
.exit-dfx-modal {
	font-size: 3rem;
	position: absolute;
	top: 7%;
	right: 10%;
	border-radius: 360px;
	background-color: #fff;
	color: #777;
	opacity: 90%;
	width: 55px;
	height: 55px;
	line-height: 0;
	text-align: center;
	align-content: center;
}

#dfx-preview-embed {
	min-width: 320px;
	width: clamp(320px, 25vw, 620px) !important;
	height: clamp(700px, 81vh, 1000px);
	max-width: 610px;
	margin: 0;
	border: 0;
	max-height: 1000px;
}

@media screen and (min-width: 600px) and (min-height: 700px) and (orientation: portrait) {
	#dfx-preview-embed {
		height: clamp(700px, 40vh, 820px);
	}
}

@media screen and (orientation: landscape) and (min-height: 1080px) and (max-height: 1512px) and (min-width: 993px) and (max-width: 1512px) {
	#dfx-preview-embed {
		height: clamp(700px, 70vh, 970px);
	}
}

#daily-fix-iframe-wrapper {
	border: 3px solid #0085e5;
	width: fit-content;
	height: fit-content;
}

#the-daily-fix-parent-overlay #daily-fix-modal-iframe-wrapper {
	border: 5px solid black;
	width: 80%;
	margin-top: 5%;
	justify-self: center;
}

@media screen and (max-width: 767px) {
	#daily-fix-iframe-wrapper {
		margin-left: auto;
		margin-right: auto;
	}
	
	#the-daily-fix-parent-overlay #daily-fix-modal-iframe-wrapper {
		width: 95%;
		margin-top: 25%;
	}
	
	.exit-dfx-modal {
		top: 9%;
		right: 5%;
	}
}

#the-daily-fix-parent-overlay iframe {
	justify-self: center;
	z-index: 10;
	max-width: 100% !important;
}

#daily-fix-iframe-preview-header {
	background-color: #0085e5;
	justify-content: center;
}

#daily-fix-iframe-preview-header h6 {
	margin: 0;
	font-family: "Antonio";
	color: #bfe4ff;
	justify-self: center;
	font-size: 16px;
	padding: 10px;
}

#daily-fix-iframe-header {
	background-color: black;
	justify-content: end;
}

#daily-fix-iframe-header h6 {
	margin: 0;
	font-family: "Antonio";
	color: white;
	justify-self: center;
	font-size: clamp(16px, 2vh, 24px);
	padding: 10px;
}

#dfx-modal-embed {
	border: 0;
	width: 100% !important;
}

#the-daily-fix-parent-overlay {
	display: none;
	position: fixed;
	/* Sit on top of the page content */
	width: 100%;
	/* Full width (cover the whole page) */
	min-width: 100vw;
	height: 100%;
	/* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 133, 229, .8);
	/* Black background with opacity */
	z-index: 2;
	/* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer;
}
