/**
 * 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;
}

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

.tracom-canvas {
	float: left;

}

/*
 * 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);
}

/** Things pulled from tracom.com css **/

.divider-bar {
	background-color: #176fa5;
	display: block;
	height: 3px;
	width: 100px;
	margin: 0 0 1.2rem;
}
.widget-title {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.widget ul {
	padding: 0;
	margin: 0
}

.widget ul li {
	list-style: none
}

.widget select {
	margin-bottom: 10px
}

.social-links {
	margin: 0;
	padding: 0 !important
}

.social-links li {
	display: inline
}

.social-links a {
	padding-right: 10px;
	font-size: 1.2em;
	font-family: "Font Awesome 5 Free";
}

.social-links a:hover {
	color: #0e4262
}

.social-links > li:last-child > a {
	padding-right: 0
}

.bg-diamonds-blue {
	background-image: url("../images/bg_diamonds_blue.jpg");
	background-size: 2200px auto;
	background-position: center top;
	background-repeat: repeat
}

#page-hero {
	background-color: #176fa5;
	overflow: hidden;
	position: relative;
	z-index: 11
}

#page-hero.page-hero-overlay {
	height: auto;
	min-height: 10px;
	padding: 8rem 0 0;
	overflow: visible;
	position: relative;
	z-index: 1
}

#page-hero.page-hero-overlay::before {
	content: "";
	position: absolute;
	top: -50px;
	height: 140px;
	left: 0;
	right: 0;
	z-index: 2;
	opacity: .7;
	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 50%, transparent);
	background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 50%, transparent);
	background-repeat: no-repeat
}

#page-hero.page-hero-overlay .entry-header {
	margin-bottom: 4rem
}

#page-hero.page-hero-overlay .overlay-element {
	height: 140px;
	margin-bottom: -100px;
	padding: 0
}

#page-hero.page-hero-overlay .overlay-element iframe {
	width: 100%;
	height: 100%
}

body #site-header .navbar-brand {
	width: 110px;
}

.navbar{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}
.navbar>.container,.navbar>.container-fluid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
.navbar-brand{display:inline-block;padding-top:.14rem;padding-bottom:.14rem;margin-right:1rem;font-size:1.68rem;line-height:inherit;white-space:nowrap}
.navbar-brand:hover,.navbar-brand:focus{text-decoration:none}


#page-hero.page-hero-overlay + section {
	padding-top: calc(100px + 4rem)
}

#page-hero.page-hero-default {
	height: auto;
	min-height: 1px;
	overflow: visible;
	padding: 4rem 0 3rem
}

#page-hero.page-hero-default::before {
	content: "";
	position: absolute;
	top: -50px;
	height: 200px;
	left: 0;
	right: 0;
	z-index: 2;
	opacity: .7;
	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 50%, transparent);
	background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 50%, transparent);
	background-repeat: no-repeat
}

#page-hero.page-hero-carousel {
	min-height: 200px
}

#page-hero.page-hero-bg-img {
	padding: 4rem 0 3rem
}

#page-hero.page-hero-bg-img::before {
	content: "";
	position: absolute;
	top: -50px;
	height: 140px;
	left: 0;
	right: 0;
	z-index: 2;
	opacity: .7;
	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 50%, transparent);
	background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 50%, transparent);
	background-repeat: no-repeat
}

#page-hero.page-hero-bg-img::after {
	content: "";
	background-color: #176fa5;
	bottom: 0;
	left: 0;
	opacity: .75;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0
}

body.home #page-hero.page-hero-bg-img {
	background-position: center top
}

.entry-header .entry-title {
	margin-bottom: 1.25rem
}

.entry-header > * :last-child {
	margin-bottom: 0 !important
}

.hero-content-centered {
	left: 0;
	position: absolute;
	top: 50%;
	width: 100%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	z-index: 3
}

.hero-content {
	position: relative;
	z-index: 2;
	width: 100%
}

#page-hero.page-hero-default::before {
	height: 140px;
}

/******************************************************************
Author: DD9
Stylesheet: Footer
******************************************************************/
#footer { background-color: #003651; color: #fff; clear: both; font-size: 0.9rem; padding: 4rem 0 0; }

#footer a { color: #fff; }

#footer a:hover { color: #54afe7; text-decoration: none; }

#footer .divider-bar { background-color: #4b6f86; }

#footer .site-credit, #footer .site-credit:hover { opacity: 0; cursor: default; }

#footer .site-credit { width: 1px; overflow: hidden; display: inline-block; height: 1px; }

#footer .social-links a { color: #fff !important; }

#footer .social-links a:hover { color: #54afe7 !important; text-decoration: none !important; }

#sub-floor { color: #4b6f86; padding: 40px 0; text-align: center; }

#sub-floor a { color: #4b6f86; }

.widgetFooter > *:last-child, .textwidget > *:last-child { margin-bottom: 0; }

.widget-title { border: none; font-weight: 700; }

.widgetFooter { margin-bottom: 1rem; }

@media (min-width: 768px) { .widgetFooter { margin-bottom: 0; } }

.widgetFooter + .widgetFooter { margin-top: 1rem; }

.footer-col-left { margin-bottom: 1rem; }

@media (min-width: 992px) { .footer-col-left { margin-bottom: 0; } }

.footer-col-center { margin-bottom: 1rem; }

@media (min-width: 992px) { .footer-col-center { margin-bottom: 0; text-align: center; }
	.footer-col-center .divider-bar { margin: 0 auto 1.2rem; } }

@media (min-width: 992px) { .footer-col-right { text-align: right; }
	.footer-col-right .divider-bar { margin: 0 0 1.2rem auto; } }

.footer-meta { font-size: 0.65rem; text-align: left; }

@media (min-width: 768px) { .footer-meta { text-align: center; } }

/* Footer Menu
================================================== */
#footer .menu { position: relative; margin: 0; }

#footer .menu > *:last-child { margin-bottom: 0; padding-bottom: 0; }

#footer .menu > li { line-height: 1.3; margin-bottom: 8px; }

#footer .menu > li > a { color: #fff !important; }

#footer .menu > li > a:hover { color: #54afe7 !important; text-decoration: none !important; }

#footer-nav-two.menu { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02rem; margin-bottom: 10px; padding: 0; text-transform: uppercase; }

#footer-nav-two.menu > li { display: block; text-align: left; }

@media (min-width: 768px) { #footer-nav-two.menu > li { display: inline; text-align: center; } }

#footer-nav-two.menu > li > a { color: #4b6f86 !important; }

@media (min-width: 768px) { #footer-nav-two.menu > li > a { padding: 0 15px; } }

#footer-nav-two.menu > li > a:hover { color: #54afe7 !important; }