/**
 * We don't want the top padding that DD9 gave us on the footer.  The content
 * sections already have padding and the extra puts too much space in the way.
 */
#footer {
	padding: 0;
}

/*
 * When we're in dark mode, we don't want as much padding in the header.  The
 * content takes care of it.
 */
@media (min-width: 992px) {
	body.page-darkmode .header-upper {
		padding: 1rem 0 0; } }

/*
 * entry-header is needed to get info popups next to a header, but when the
 * header is inside a card on a darkmode page, the text color needs to be
 * overridden.
 */
body.page-darkmode .card-body .entry-header h1,
body.page-darkmode .card-body .entry-header h2,
body.page-darkmode .card-body .entry-header h3,
body.page-darkmode .card-body .entry-header h4,
body.page-darkmode .card-body .entry-header h5,
body.page-darkmode .card-body .entry-header h6 {
	color: #003651;
}

/*
 * Rows for our message area need different padding rules than most sections;
 * they need padding on the top, but not the bottom.
 */
.row-outer-messages {
	position: relative;
	padding-top: 2rem;
}

/*
 * Items inside a message div need to align with each other. This code is
 * needed because the fa-2x style used in the messages was causing the text to
 * be misaligned.
 */
.message-div i, .message-div span {
	vertical-align: middle !important;
}

/*
 * The first "section" row needs to eliminate the padding on the top so that it
 * sits just below the messages.
 */
.first-section {
	padding-top: 0 !important;
}

/*
 * There were a couple of things left out of the "dark mode" style
 */
.page-darkmode .accordion > .card.active {
	border-color: rgba(102, 167, 207, 0.8);
}

.page-darkmode .accordion > .card.active > .card-header,
.page-darkmode .accordion > .card.active > .card-header > .card-title,
.page-darkmode .accordion > .card.active > .card-header > .card-header-meta {
	color: #fff;
}

/*
 * The following css overrides the "X" that was appearing inside our inputs.
 */
.was-validated .form-control:invalid, .was-validated select:invalid, .was-validated textarea:invalid,
.was-validated input[type="text"]:invalid,
.was-validated input[type="password"]:invalid,
.was-validated input[type="datetime"]:invalid,
.was-validated input[type="datetime-local"]:invalid,
.was-validated input[type="date"]:invalid,
.was-validated input[type="month"]:invalid,
.was-validated input[type="time"]:invalid,
.was-validated input[type="week"]:invalid,
.was-validated input[type="number"]:invalid,
.was-validated input[type="email"]:invalid,
.was-validated input[type="url"]:invalid,
.was-validated input[type="search"]:invalid,
.was-validated input[type="tel"]:invalid,
.was-validated input[type="color"]:invalid,
.was-validated .uneditable-input:invalid, .form-control.is-invalid, select.is-invalid, textarea.is-invalid,
input.is-invalid[type="text"],
input.is-invalid[type="password"],
input.is-invalid[type="datetime"],
input.is-invalid[type="datetime-local"],
input.is-invalid[type="date"],
input.is-invalid[type="month"],
input.is-invalid[type="time"],
input.is-invalid[type="week"],
input.is-invalid[type="number"],
input.is-invalid[type="email"],
input.is-invalid[type="url"],
input.is-invalid[type="search"],
input.is-invalid[type="tel"],
input.is-invalid[type="color"],
.is-invalid.uneditable-input {
	background-image: none;
}

.was-validated .custom-select:invalid, .custom-select.is-invalid {
	background-image: none;
}

/*
 * Rows for our message area need different padding rules than most sections;
 * they need padding on the top, but not the bottom.
 */
.row-outer-messages {
	position: relative;
	padding-top: 2rem;
}

/*
 * The first "section" row needs to eliminate the padding on the top so that it
 * sits just below the messages.
 */
.first-section {
	padding-top: 0 !important;
}

/*
 * Bootstrap modal dialog overrides for the session timeout window.
 */
.modal-dialog {
	background-color: #e9ecef;
}
.modal-header {
	background-color: #003651;
}

.modal-title {
	color: white;
}

/*
 * DD9's alert sizes are .8em, which are just a bit small.  We'll use .9
 */
.alert {
	font-size: 0.9rem;
}

/**
 * DD9's footer text is too small at 70%, so we'll use 80%.
 */
#sub-floor {
	font-size: 80%;
}

/*
 * Styles needed for the Passport's videos to look right.
 */
canvas {
	/* background-color: white; Commented out for Wistia Play Bar issue */
	width: 100%;
	height: auto;
}

.tracom-canvas {
	float: left;

}

.icon-ssp, .icon-ssp3 {
	background-image: url("../images/icon_ss.jpg");
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px 50px; }

.icon-beq {
	background-image: url("../images/icon_beq.jpg");
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px 50px; }

.icon-res3 {
	background-image: url("../images/icon_res.jpg");
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px 50px; }

.icon-bnch {
	background-image: url("../images/icon_bnch.jpg");
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px; }

.icon-agl {
	background-color: transparent;
	background-image: url("../images/icon_agl.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px 50px; }

/*
 * We don't want the usual borders on the table element of the unavailable page
 */
.unavailable-page table th,
.unavailable-page .table td,
.unavailable-page table td {
	border-top: none;
}

.unavailable-page table thead th {
	vertical-align: bottom;
	border-bottom: none;
}

.unavailable-page table tbody + tbody {
	border-top: none;
}

/*
 * DD9 gave us a progress-row style that defines an excessive margin on the top,
 * because they intended it to go on the bottom of the survey page.  We want it
 * at the top, so we need to suppress the margin on the survey page.  We can't
 * just get rid of the style, because that would mess up how the buttons render.
 *
 * We also want the "Save for later" button to stay on the same line as the
 * "page x of y" badge.
 */
.survey-page .progress-row {
	margin: 0 !important;
}

.survey-page .progress-status {
	display: inline-block;
}

.survey-page .progress-actions {
	display: inline-block;
	float: right;
}

/*
 * We need to change what vcu control we see based on the screen resolution.
 */
@media (max-width: 767.98px) {
	.vcu-style-radio {
		visibility: hidden;
		height: 0;
		width: 0;
	}
	.vcu-style-buttons {
		visibility: visible;
	}
}
@media (min-width: 768px) {
	.vcu-style-radio {
		visibility: visible;
	}
	.vcu-style-buttons {
		visibility: hidden;
		height: 0;
		width: 0;
	}
}

/* We need a little bit of a margin on the page # badge on the survey page in case
   the buttons wrap to the next line */
.statusbadge-dark {
	margin-bottom: 5px;
}

/* Overrides for? */
span.action-link {
	font-size: 0.8rem;
	letter-spacing: 0.03rem;
	padding: 0;
	text-transform: uppercase;
	font-weight: bold;
}

span.disabled-action-link {
	font-size: 0.8rem;
	letter-spacing: 0.03rem;
	padding: 0;
	text-transform: uppercase;
	font-weight: bold;
}


span.action-link:not(:disabled):not(.disabled) {
	cursor: pointer;
}

ul.action-list > li.status-blocked span {
	/*color: #FFA40f;*/
	color: #929aa3;
}

ul.action-list > li.status-to-do span {
	color: #0ea075;
}

ul.action-list > li.status-in-progress span {
	color: #e7be44;
}

ul.action-list > li.status-ongoing span {
	color: #176FA5;
}

ul.action-list > li.status-to-do span:hover,
ul.action-list > li.status-in-progress span:hover,
ul.action-list > li.status-ongoing span:hover {
	color: #343a40;
}

span.action-link::after, span.disabled-action-link::after {
	font-family: "Font Awesome 5 Free";
	font-stretch: normal;
	font-style: normal;
	font-weight: 900;
	letter-spacing: normal;
	line-height: 1;
	text-rendering: auto;
}

span.action-link::after, span.disabled-action-link::after {
	content: " \f30b"
}

.action-list > ul > li.status-blocked::before, ul.action-list > li.status-blocked::before {
	font-size: 1.0rem;
	color: #FFA40F;
	background-color: white;
	content: " \f023"
}

.action-list > ul > li.status-feedback-not-needed::before, ul.action-list > li.status-feedback-not-needed::before {
	font-size: 1.0rem;
	background-color: #929aa3;
	content: " \f05e"
}

.action-list > ul > li.status-ongoing::before, ul.action-list > li.status-ongoing::before {
	background-color: #176FA5;
	content: " \f00c"
}


.embed-responsive-4by3::before {
	padding-top: 75%;
}

h6.item-title br {
	display: block;
}

.accordion > .card.active .card-alert-badge, .accordion > .card .card-alert-badge {
	background-color: #DB4B3B;
}

.accordion > .card:hover .card-alert-badge {
	background-color: darkred;
}
/*
 * On the reports page, we want a button to launch Social Style Navigator.  We
 * want it in the header for the product family, but we need to add some padding
 * to the button div so the button is not right on top of the horizontal line.
 */
#navigator-link-div {
	padding-bottom: 2rem;
}

/* Used on the New Invitation page so that the system provided text in the text-
 * area is a little smaller (for less scrolling)
 */
.form-control-plaintext-small {
	display: block;
	width: 100%;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	margin-bottom: 0;
	line-height: 1.5;
	color: #343a40;
	background-color: transparent;
	border: solid transparent;
	border-width: 1px 0;
	font-size: 0.8rem;
}

/* These classes are used on the FAQ page to implement the disclosure buttons
 * that open and close each FAQ item
 */


dl.faq button {
	background-color: transparent;
	border: none;
	color: #343a40; /* $gray-800 */
	cursor: pointer;
	display: block;
	font-size: 100%;
	font-weight: bold;
	margin-top: 1rem;
	outline: none;
	padding: 0 20px 0 0;
	position: relative;
	text-align: left;
	width: 100%;
}

dl dd {
	margin: 0.3rem 0 0 0;
	padding: 0;
}

dl.faq > dd {
	display: none;
}

dl.faq .desc {
	background-color: #ffffff;
	font-size: 100%;
	margin: 0;
	padding: 0.5em;

}

dl.faq .toggle-trigger.active > button {
	cursor: pointer;
	color: #176FA5; /* $blue */
}

@media (min-width: 992px) {
	dl.faq button:hover {
		color: #176FA5; /* $blue */
	}
}

dl.faq button:active,
dl.faq button:focus {
	color: #343a40; /* $gray-800 */
}

dl.faq .toggle-trigger > button::after {
	content: "\f105";
	/* content: url('../images/triangle-closed.png');*/
	font-family: "Font Awesome 5 Free";
	font-size-adjust: none;
	font-size: 1.5rem;
	font-stretch: normal;
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	letter-spacing: normal;
	line-height: 1;
	position: absolute;
	right: 0;
	text-rendering: auto;
	top: 0;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

dl.faq .toggle-trigger.active > button::after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.help-text {
	color: #697988;
	font-size: 0.9rem;
	line-height: 1.2;
}

@-webkit-keyframes spinner-border {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spinner-border {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.spinner-border {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: text-bottom;
	border: 0.25em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: spinner-border .75s linear infinite;
	animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
	width: 1rem;
	height: 1rem;
	border-width: 0.2em;
}

@-webkit-keyframes spinner-grow {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	50% {
		opacity: 1;
	}
}

@keyframes spinner-grow {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	50% {
		opacity: 1;
	}
}

.spinner-grow {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: text-bottom;
	background-color: currentColor;
	border-radius: 50%;
	opacity: 0;
	-webkit-animation: spinner-grow .75s linear infinite;
	animation: spinner-grow .75s linear infinite;
}

.spinner-grow-sm {
	width: 1rem;
	height: 1rem;
}

.loading-box{
	position: relative;
	width: auto;
	height: 25px;
	border-radius: 12px;
	/*border: 2px solid #003651;*/
	overflow: hidden;
}

.loader{
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50px;
	background: linear-gradient(45deg, #FFFFFF, #003651);
	/*background: linear-gradient(45deg, #176FA5, #003651);*/
	left: 0%;
}

.loader{
	left: -100%;
	animation: load 3s linear infinite;
}

@keyframes load{
	0%{
		left: -100%;
	}
	100%{
		left: 100%;
	}
}

@media (max-width: 767px) {
	.norm-intro-frame {
		height: 420px !important;
	}
}

@media (min-width: 768px) {
	.norm-intro-frame {
		height: 560px !important;
	}
}

@media (min-width: 992px) {
	.norm-intro-frame {
		height: 700px !important;
	}
}

@media (min-width: 1200px) {
	.norm-intro-frame {
		height: 810px !important;
	}
}

@media (min-width: 1500px) {
	.norm-intro-frame {
		height: 1000px !important;
	}
}