.afv-dialog-overlay {
	display: none;
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
}

.afv-dialog {
	display: none;
	z-index: 3;
	background-color: @white;
	width: 60%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	overflow-y: auto;
	overflow-x: hidden;
	.header {
		background-color: @brand-color;
		padding: 10px 0 10px 0;
		h2, h3, h4, h5, h6 {
			font-family: 'Roboto Slab', serif;
			text-align: center;
			color: @white;
			margin: 0;
		}
	}
	.body { padding: 20px !important;}

	.afv-close-dialog {
		display: block;
		position: absolute;
		text-indent: -9999px;
		right: 10px;
		top: 8px;
		width: 32px;
		height: 32px;
		transition: transform .25s ease-in-out;
		border: unset;
		background: unset;
		&::before, &::after {
			content: "";
			position: absolute;
			display: block;
			margin: auto;
			transform-origin: center;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 28px;
			height: 0;
			border-top: 2px solid @white;
		}
		&::before {
			transform: rotate(45deg);
		}
		&::after {
			transform: rotate(-45deg);
		}
	}
}

.afv-dialog-overlay[aria-hidden="true"],
.afv-dialog[aria-hidden="true"] {
	display: none;
}

.afv-dialog-overlay:not([aria-hidden="true"]),
.afv-dialog:not([aria-hidden="true"]) {
	display: block;
}

/* Touch edit styles*/
.firstvisitmodal.cq-Editable-dom {
	border: 1px solid @light-grey;
	background-color: @white;
	margin: 20px;
}
.aem-AuthorLayer-Preview {
	.firstvisitmodal.cq-Editable-dom {
		border: unset;
		background-color: unset;
		padding: unset;
		margin: unset;
	}
}
.afv-dialog-edit-mode {
	.header {
		background-color: @brand-color;
		padding: 10px 0 10px 0;
		h2, h3, h4, h5, h6 {
			font-family: 'Roboto Slab', serif;
			text-align: center;
			color: @white;
			margin: 0;
		}
	}
	.body {
		margin: 0 20px 20px 20px;
	}
}

@media (max-width: 992px) {
	.afv-dialog {
		width: 90%;
		.header {
			h2, h3, h4, h5, h6 {
				margin: 0 25px 0 25px;
			}
		}
	}
}