/* CSS Overrides for Queue-It Custom Theme: UDX Waiting Room - USH */
/* /UORAssets/css-overrides.css */

@font-face {
	font-family: 'Avenir Next';
	src: url('https://assets-us-west-2.queue-it.net/nbcuniversal/userdata/v01/fonts/AvenirNext-Bold.woff2') format('woff2'),
		url('https://assets-us-west-2.queue-it.net/nbcuniversal/userdata/v01/fonts/AvenirNext-Bold.woff') format('woff'),
		url('fonts/AvenirNext-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir Next';
	src: url('https://assets-us-west-2.queue-it.net/nbcuniversal/userdata/v01/fonts/AvenirNext-DemiBold.woff2') format('woff2'),
		url('https://assets-us-west-2.queue-it.net/nbcuniversal/userdata/v01/fonts/AvenirNext-DemiBold.woff') format('woff'),
		url('fonts/AvenirNext-DemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir Next';
	src: url('https://assets-us-west-2.queue-it.net/nbcuniversal/userdata/v01/fonts/AvenirNext-Regular.woff2') format('woff2'),
		url('https://assets-us-west-2.queue-it.net/nbcuniversal/userdata/v01/fonts/AvenirNext-Regular.woff') format('woff'),
		url('fonts/AvenirNext-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* iFrame fix */
iframe {
	width: 100%;
}

body {
	background: #fff;
	height: 100%;
	font-family: 'Avenir Next', Helvetica, sans-serif;
}

#toppanel_iframe {
	height: 112px;
}

#bottompanel_iframe {
	position: fixed;
	bottom: 0;
	height: 100px;
}

/* Main page background color */
#wrapper {
	background: #fff;
	min-height: auto;
}

/* Dynamic message yellow box */
.time-box {
	margin: -6px 0 0 0;
}

/* Error dialog box */
.alert-error {
	color: #fff;
	background-color: darkred;
}

.alert-error a {
	color: #fff;
}

/* Container of the box with progress bar and blue content area below it */
#main {
	width: 100%;
	max-width: none;
	padding: 0;
}

#main .c {
	background: none;
	width: 100%;
	padding: 0;
}

/* Main "You can close this page without losing your place in line" div */
#main-top {
	display: none;
}

/* Grey top bar */
#main_t {
	display: none;
}

/* Main Queue-It heading box */
#header {
	padding: 0 20px;
	margin: 38px auto 20px;
}
#queue-paused{
	font-size:18px;
	display:block;
	text-align:center;
	margin: 18px 0;
}
/* Inside #header  */
#logocontainer {
	display: none;
}

#headertext,
#header h1 {
	margin: 0 auto 18px;
	font-size: 24px;
	font-weight: 700;
}

#whatisthis {
	display: none;
}

/* Stray grey outlines */
#header,
.warning-box {
	border: none;
}

/* Dark grey background behind the progress bar */
/* Also the container of the progress bar animation */
.warning-box {
	background: none;
	border: none;
	max-width: 600px;
	margin: 0 auto;
	padding: 24px;
}

/* Grey info box with line place text info */
.processbar-box {
	margin: -18px auto 0;
	padding: 0;
	background: none;
}

.processbar-box .holder {
	background: #0368d9;
	color: #fff;
	border: none;
	padding: 44px 40px 40px;
}

/* Slow-blinking yellow skeuomorphic sphere */
#MainPart_ulProgressbarBox_Holder_Processbar {
	display: none;
}

/* Bottom box shadow effect */
#MainPart_divVersionInfo {
	display: none;
}

/* The (previously green lined) animated progress bar */
.progressbar .progress {
	background-image: none;
	background-color: #0368D9;
	border-radius: 100px;
}

.progressbar .progress.updated {
	background-image: none;
}

/* The grey box the progress bar resides in */
.progressbar {
	background: none;
	border: 2px solid #d5d5d5;
	border-radius: 20px;
	overflow: hidden;
}

/* Roller coaster icon instead of running man */
.progressbar .progress .runner,
.progressbar .progress .runner.paused {
	background-image: url('https://assets-us-west-2.queue-it.net/nbcuniversal/userdata/USHAssets/rollercoaster-icon.png');
	height: 30px;
	width: 30px;
	margin-top: -5px;
	right: 5px;
}

/* Font changes */
#MainPart_lbQueueNumberText,
#MainPart_lbUsersInLineAheadOfYouText,
#MainPart_lbExpectedServiceTimeText,
#MainPart_lbWhichIsInText,
#MainPart_lbLastUpdateTime {
	font-weight: normal;
}

/* Footer with Queue-It ID line */
/* Hide the footer content, but use this to cover the bottom of the page in blue */
#footer {
	background: #0368d9;
	position: absolute;
	/* height: -webkit-fill-available; */
	width: -webkit-fill-available;
}

div[id^='footer-'] {
	display: none;
}

/* Remove small space below main content so blue can be continuous */
#content {
	padding: 0;
}

/* Skyline area (dependent on custom jQuery from udx-script.js as of now */
.skyline-container {
	background: #0368d9;
	max-width: 900px;
	margin: 0 auto;
}

.skyline-img {
	width: -webkit-fill-available;
}

/* Removing countdown and status time info in "Before" pre-queue page */
#MainPart_divBlock,
#defaultCountdown,
#MainPart_divUsersInQueueCount,
#MainPart_lbLastUpdateTime,
#MainPart_divProgressbarBox_Holder_LastUpdateTime {
	display: none;
}

/* Align the dynamic message text to the center of the yellow box*/
.time-box .frame {
	text-align: center;
	min-height: inherit;
}

#detailExpander {
	text-align: center;
}

/* Note: #MainPart_divUsersInQueueCount had the empty <p></p>
that was causing the white space at the bottom */

/* Hide the "Mode Details" in the error page */
#detailExpander {
	display: none;
}

/* Dynamic message spacing */
#MainPart_pMessageOnQueueTicket, #MainPart_pMessageOnQueueTicket p {
	margin: 0;
}

/* Layout for main body copy (in Language tab) */
#headertext,
#headerparagraph,
.uo-content-container {
	font-size: 16px;
	font-weight: normal;
	text-align: center;
	line-height: 1.5;
	max-width: 672px;
	margin: auto;
}
#MainPart_divProgressbarBox,
.uo-content-container {
	background-color: #0368d9;
}
@media screen and (max-width: 480px) {
    .time-box .frame {
        padding: 17px 20px 16px;
    }
}

#MainPart_divProgressbarBox_Holder {
	display: none;
}

.uo-row {
	max-width: 740px;
	display: flex;
	justify-content: space-between;
	gap: 42px;
}
.uo-column {
	flex: 1;
}
.uo-column p {
	margin: 0;
}

/* Stack them when below 700px */
@media (max-width: 700px) {
	.uo-row {
		flex-direction: column;
		max-width: 500px;
		margin: auto;
	}
}

.small-text {
	font-size: 14px;
}

.margin-large {
	margin: 52px 0 48px;
}