#email-subscribe-modal-dialog-content { display: none; }

#email-subscribe-modal { z-index: 1001; }

	#email-subscribe-modal div.modal-popup-black-background { opacity: 0.5; }

	#email-subscribe-modal div.modal-popup-container {
		max-width: 748px !important;
		width: 748px;
	}

		#email-subscribe-modal div.modal-popup-body {
			height: 386px;
			max-height: 386px;
			padding: 0 !important;

			border: 1px solid black;

			box-shadow: inset 0 0 1px black;

			background: #4283f3 url(/media/dental/common/misc/dentist.jpg) top left no-repeat;
			background-clip: padding-box;
		}

			#email-subscribe-modal div.modal-popup-close > div { border: 2px solid white; }

				#email-subscribe-modal div.modal-popup-close > div::before,
				#email-subscribe-modal div.modal-popup-close > div::after { background: white; }

			#email-subscribe-modal div.modal-popup-message {
				height: 100%;
				padding: 0 24px 0 270px;
			}

				#email-subscribe-modal div.email-subscribe-modal-dialog-wrapper {
					display: flex;
					height: 100%;

					align-content: stretch;
					align-items: stretch;
					flex-flow: column nowrap;
					justify-content: flex-start;
				}

					div.email-subscribe-modal-dialog-wrapper div.email-subscribe-modal-dialog-container {
						display: flex;
						margin: 28px 16px 28px 40px;

						align-content: stretch;
						align-items: stretch;
						flex-flow: column nowrap;
						justify-content: space-between;

						align-self: auto;
						flex: 1 1 100%;
						order: 1;
					}

						div.email-subscribe-modal-dialog-container div.email-subscribe-modal-dialog-header-container {
							align-self: auto;
							flex: 0 1 auto;
							order: 1;
						}

							div.email-subscribe-modal-dialog-header-container > div {
								margin: 0 0 6px;

								color: white;
								font-family: 'Roboto', sans-serif;
								font-size: 28px;
								font-weight: 500;
							}

						div.email-subscribe-modal-dialog-container div.email-subscribe-modal-dialog-body-container {
							align-self: auto;
							flex: 1 1 auto;
							order: 2;
						}

							div.email-subscribe-modal-dialog-body-container ul.email-subscribe-modal-dialog-reason-list {
								display: block;
								margin: 15px 5px;

								list-style: none;
							}

								ul.email-subscribe-modal-dialog-reason-list > li {
									display: flex;
									min-height: 20px;
									padding: 5px 0;

									align-content: flex-start;
									align-items: flex-start;
									flex-flow: row nowrap;
									justify-content: flex-start;
								}

									ul.email-subscribe-modal-dialog-reason-list > li > div.email-subscribe-checkbox-container {
										align-self: auto;
										flex: 0 1 32px;
										order: 1;
									}

										div.email-subscribe-checkbox {
											display: inline-block;
											height: 20px;
											margin: 0 10px 0 0;
											vertical-align: bottom;
											width: 20px;

											border: 1px solid white;
											border-radius: 7px;
										}

											div.email-subscribe-checkbox > div.email-subscribe-check {
												height: 10px;
												left: 7px;
												position: relative;
												top: 3px;
												width: 3px;

												transform: rotate(45deg);
												-moz-transform: rotate(45deg);
												-webkit-transform: rotate(45deg);

												border-bottom: 2px solid white;
												border-right: 2px solid white;
											}

									ul.email-subscribe-modal-dialog-reason-list > li > div.email-subscribe-reason-container {
										align-self: auto;
										flex: 1 1 auto;
										order: 2;
									}

										span.email-subscribe-reason {
											color: white;
											font-family: 'Roboto', sans-serif;
											font-size: 14px;
											font-weight: 400;
											line-height: 22px;
										}

						div.email-subscribe-modal-dialog-container div.email-subscribe-modal-dialog-footer-container {
							align-self: auto;
							flex: 0 1 auto;
							order: 3;
						}

							#email-subscribe-modal input.email-subscribe-input {
								-webkit-appearance: none;
								-moz-appearance: none;
								appearance: none;

								box-sizing: border-box;
								display: block;
								height: 46px !important;
								padding: 10px 32px;
								width: 100%;

								border: 1px solid white;
								border-radius: 23px;

								font-size: 18px;
								line-height: 24px;
							}
								#email-subscribe-modal input.email-subscribe-input::-ms-clear { display: none; }
								#email-subscribe-modal input.email-subscribe-input:focus { outline: none; }
								#email-subscribe-modal input.email-subscribe-input:disabled {
									background: white;
									cursor: not-allowed;
									opacity: 0.5;
								}

							#email-subscribe-modal-dialog-label {
								display: block;
								margin: 0;
								padding: 3px 32px;

								color: #ffff33;
								font-family: 'Roboto', sans-serif;
								font-size: 12px;
								font-weight: 500;
								line-height: 16px;
							}
								#email-subscribe-modal-dialog-label.invisible-label { visibility: hidden; }

							a.email-subscribe-modal-dialog-nothanks-anchor,
							a.email-subscribe-modal-dialog-nothanks-anchor:hover,
							a.email-subscribe-modal-dialog-nothanks-anchor:active {
								color: white !important;
								text-decoration: underline !important;
							}

		#email-subscribe-modal div.modal-popup-body.subscribe-success { border: none !important; }

			#email-subscribe-modal div.modal-popup-body.subscribe-success div.modal-popup-message { padding: 0 !important; }

			#email-subscribe-modal div.modal-popup-body.subscribe-success div.modal-popup-close > div { border: 2px solid #505050 !important; }

				#email-subscribe-modal div.modal-popup-body.subscribe-success div.modal-popup-close > div::before,
				#email-subscribe-modal div.modal-popup-body.subscribe-success div.modal-popup-close > div::after { background: #505050 !important; }


/* Desktop */
@media screen and (min-width: 1025px)
{

	div.email-subscribe-modal-dialog-input-submit-nothanks-flex {
		display: block;
	}

		div.email-subscribe-modal-dialog-input-container {
			margin: 10px 0;
		}

		div.email-subscribe-modal-dialog-submit-nothanks-container {
			margin: 10px 0 0;
		}

			div.email-subscribe-modal-dialog-submit-nothanks-flex {
				display: flex;

				align-content: stretch;
				align-items: center;
				flex-flow: row nowrap;
				justify-content: flex-start;
			}

				div.email-subscribe-modal-dialog-submit-container {
					flex: 0 1 auto;
				}

				div.email-subscribe-modal-dialog-nothanks-container {
					margin-left: 32px;

					flex: 1 1 auto;
				}

	div.email-subscribe-modal-dialog-nothanks-container-mobile {
		display: none;
	}

}


/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px)
{

	#email-subscribe-modal div.modal-popup-container {
		width: 500px;
	}

		#email-subscribe-modal div.modal-popup-body {
			background-image: none;
		}

			#email-subscribe-modal div.modal-popup-message {
				padding: 0;
			}

				div.email-subscribe-modal-dialog-wrapper div.email-subscribe-modal-dialog-container {
					margin: 28px 40px;
				}

	div.email-subscribe-modal-dialog-input-submit-nothanks-flex {
		display: block;
	}

		div.email-subscribe-modal-dialog-input-container {
			margin: 10px 0 0;
		}

		div.email-subscribe-modal-dialog-submit-nothanks-container {
			margin: 0 0 10px;
		}

			div.email-subscribe-modal-dialog-submit-nothanks-flex {
				display: flex;

				align-content: stretch;
				align-items: center;
				flex-flow: row nowrap;
				justify-content: flex-start;
			}

				div.email-subscribe-modal-dialog-submit-container {
					flex: 0 1 auto;
				}

				div.email-subscribe-modal-dialog-nothanks-container {
					margin-left: 32px;

					flex: 1 1 auto;
				}

	div.email-subscribe-modal-dialog-nothanks-container-mobile {
		display: none;
	}

}


/* Mobile */
@media screen and (max-width: 480px),
	screen and (max-width: 767px),
	screen and (max-width: 767px) and (orientation: landscape)
{

	#email-subscribe-modal div.modal-popup-container {
		margin: 10px;
		max-height: calc(100% - 20px);
		max-width: calc(100% - 20px) !important;
		width: calc(100% - 20px);
	}

		div.email-subscribe-modal-dialog-wrapper div.email-subscribe-modal-dialog-container {
			margin: 21px 14px 21px 24px;
		}

			#email-subscribe-modal div.modal-popup-body {
				max-height: calc(100% - 14px) !important;

				background-image: none;
			}

				#email-subscribe-modal div.modal-popup-close > div {
					height: 24px;
					margin: 3px;
					width: 24px;

					border-radius: 15px;
				}

					#email-subscribe-modal div.modal-popup-close > div::before,
					#email-subscribe-modal div.modal-popup-close > div::after {
						height: 4px;
						top: 10px;
						width: 18px;

						background-color: white;
					}
					#email-subscribe-modal div.modal-popup-close > div::before { left: 3px; }
					#email-subscribe-modal div.modal-popup-close > div::after { right: 3px; }

			#email-subscribe-modal div.modal-popup-message {
				padding-left: 0;
			}

			div.email-subscribe-modal-dialog-header-container > div {
				font-size: 24px;
			}

			div.email-subscribe-modal-dialog-container div.email-subscribe-modal-dialog-body-container {
				align-self: auto;
				flex: 0 1 auto;
				order: 2;
			}

			div.email-subscribe-modal-dialog-body-container ul.email-subscribe-modal-dialog-reason-list {
				margin: 5px;
			}

			#email-subscribe-modal-dialog-label {
				padding: 3px 0;
			}

			div.email-subscribe-modal-dialog-nothanks-container {
				display: none;
			}

			div.email-subscribe-modal-dialog-nothanks-container-mobile {
				display: block;
			}

}

/* Mobile, landscape orientation */
@media screen and (max-width: 480px),
	screen and (max-width: 767px) and (orientation: landscape) {

	#email-subscribe-modal div.modal-popup-container {
		/* height: calc(100% - 20px); */
		width: calc(75% - 20px);
	}

		#email-subscribe-modal div.modal-popup-body {
			height: auto;
			max-height: 90vh;

			overflow-y: scroll;
		}

	div.email-subscribe-modal-dialog-input-submit-nothanks-flex {
		display: flex;

		align-content: stretch;
		align-items: flex-start;
		flex-flow: row nowrap;
		justify-content: flex-start;
	}

		div.email-subscribe-modal-dialog-input-container {
			flex: 1 1 auto;
		}

		div.email-subscribe-modal-dialog-submit-nothanks-container {
			flex: 0 1 auto;
		}

			div.email-subscribe-modal-dialog-submit-nothanks-flex {
				margin-left: 10px;
			}

	div.email-subscribe-modal-dialog-nothanks-container-mobile {
		margin: 0 0 0 32px;
	}

}

/* IE-specific workaround for mobile, landscape orientation. */
@media screen and (-ms-high-contrast: none) and (max-width: 480px),
	screen and (-ms-high-contrast: active) and (max-width: 480px),
	screen and (-ms-high-contrast: none) and (max-width: 767px) and (orientation: landscape),
	screen and (-ms-high-contrast: active) and (max-width: 767px) and (orientation: landscape)
{

	#email-subscribe-modal div.modal-popup-body {
		height: 386px;
	}

}

/* Mobile, portrait orientation */
@media screen and (max-width: 480px),
	screen and (max-width: 767px) and (orientation: portrait) {

	#email-subscribe-modal div.modal-popup-container {
		max-height: calc(100% - 20px);
		max-width: calc(100% - 20px) !important;
		width: calc(100% - 20px);
	}

		#email-subscribe-modal div.modal-popup-body {
			max-height: 90vh !important;
		}

	div.email-subscribe-modal-dialog-input-submit-nothanks-flex {
		display: block;
	}

		div.email-subscribe-modal-dialog-submit-nothanks-flex {
			margin-left: 0;
		}

		#email-subscribe-modal-dialog-submit {
			width: 100%;
		}

	div.email-subscribe-modal-dialog-nothanks-container-mobile {
		margin: 10px 0 0;

		text-align: center;
	}

}

/* IE-specific workaround for mobile, landscape orientation. */
@media screen and (-ms-high-contrast: none) and (max-width: 480px),
	screen and (-ms-high-contrast: active) and (max-width: 480px),
	screen and (-ms-high-contrast: none) and (max-width: 767px) and (orientation: portrait),
	screen and (-ms-high-contrast: active) and (max-width: 767px) and (orientation: portrait)
{

	#email-subscribe-modal div.modal-popup-body {
		height: 386px;
	}

}


/* Very small mobile screens. */
@media only all and (max-height: 200px) {

	#email-subscribe-modal div.modal-popup-container {
		height: 100%;
		max-height: 100%;
		max-width: 100%;
		width: 100%;
	}

		#email-subscribe-modal div.modal-popup-body {
			max-height: 100%;
		}

			div.email-subscribe-modal-dialog-wrapper div.email-subscribe-modal-dialog-container {
				margin: 9px;
			}

				div.email-subscribe-modal-dialog-container div.email-subscribe-modal-dialog-header-container,
				div.email-subscribe-modal-dialog-container div.email-subscribe-modal-dialog-body-container {
					display: none;
				}

}