/*
Copyright 2021-2023 Epic Systems Corporation
*/

/* Without this, the widths defined below will not work when adding padding or borders */
#scheduleContainer, #openSchedulingFrame {
	box-sizing: content-box !important;
}

/* Standard widget styling (e.g. on a desktop) */
#scheduleContainer {
	background: #fff;
	text-align: center;
}

#openSchedulingFrame {
	width: 700px; /* = native width of Open Scheduling widget in desktop mode */
	height: 500px;
	border: 1px solid #ccc;
}
/*Fullscreen for signup steps */
html.viewportmax *:not(.keepshown) {
	display: none !important;
}

.viewportmax, html.viewportmax .keepshown {
	margin: 0 !important;
	padding: 0 !important;
	width: auto;
	overflow: hidden;
	height: 100%;
}

#openSchedulingFrame.viewportmax {
	width: 100%;
	padding: 0;
	border: none;
	height: 100%;
}

#scheduleContainer.viewportmax {
	height: 100%;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	overflow: scroll-y;
}
/* Fullscreen for list of available time slots */
html.poppedOut, body.poppedOut {
	position: fixed; /* prevent scrolling behind the widget */
	overflow: hidden;
	margin: 0;
}

#scheduleContainer.poppedOut {
	position: fixed;
	padding: 0;
	z-index: 99999999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#openSchedulingFrame.poppedOut {
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
}

/*if the browser can't write cookies, a button will display and the iframe will resize to the button based on this class */
#openSchedulingFrame.buttonOnly {
	width: 100%;
	max-width: 300px;
	height: 11rem;
	border: none;
}

/* Mobile-optimized widget styling when the host page itself is narrow enough */
@media only screen and (max-width:747px) { /* Width above = media query in EpicWP.css + any left/right margin of the host page
	
	/* Widget styling when it shouldn't be fullscreen yet */
	#scheduleContainer {
	}

	#openSchedulingFrame {
		width: 100%;
		max-width: 699px; /* = media query defined in EpicWP.css. Prevents the widget from inadvertently switching to desktop mode when the host page isn't wide enough to actually support it */
		height: 400px; /* change to desired initial height when mobile-optimized */
		padding-top: 1px;
	}

		#openSchedulingFrame[data-oswstep="0"] {
		}
			/* needed by native Android browser to properly process the rules that follow */
			#openSchedulingFrame[data-oswstep="0"] + #toggleBtn {
				-webkit-perspective: 1000;
				margin: -5.5em auto 2.5em;
				height: 3em;
				width: 5em;
				border-radius: 1.5em;
				box-shadow: 0px 2px 5px #000;
				opacity: 0.8;
				background: #666;
				background-size: auto 65%;
				background-repeat: no-repeat;
				background-position: center;
				/* Maximize icon */
				background-image: url('images/maximize.png');
			}

		#openSchedulingFrame[data-oswstep="0"]:not(.captchaWasShown) + #toggleBtn{
			display: block;
		}

		#openSchedulingFrame[data-oswstep="0"]:not(.poppedOut) + #toggleBtn {
			display: block;
		}


		#openSchedulingFrame.poppedOut[data-oswstep="0"] + #toggleBtn {
			margin-top: -6em;
			/* Minimize icon */
			background-image: url('images/minimize.png');
		}
}

.scheduleContainer .stickyBottom {
	line-height: 2rem;
	text-align: center;
	background-color: white;
}

.scheduleContainer .stickyBottom a {
	color: #00a1db;
}

.scheduleContainer {
	background: #fff;
	text-align: center;
}

.scheduleContainer .widgetFrame {
	box-sizing: content-box !important;
	width: 100%;
	height: 500px;
	border: none;
}

.scheduleContainer .simpleWidget {

}

.scheduleContainer .detailedWidget {

}

@media only screen and (max-width:747px) {
	.scheduleContainer .widgetFrame {
		width: 100%;
		max-width: 699px; /* = media query defined in EpicWP.css. Prevents the widget from inadvertently switching to desktop mode when the host page isn't wide enough to actually support it */
		height: 400px; /* change to desired initial height when mobile-optimized */
		padding-top: 1px;
	}
}