@charset "UTF-8";
/* site-wide stylesheet */

/*
************************************************************************************************************************
MAIN PAGE TAGS - html, body, and main tags
************************************************************************************************************************
*/
html {
	background-color    : var(--bs-dark);
	min-height          : 100vh;
	--svs-navbar-height : 56px;
}

body {
	background-color : var(--bs-light);
	display          : flex;
	flex-direction   : column;
	min-height       : 100vh;
	overflow-x       : hidden;
}

header {
	display  : flex;
	top      : 0;
	position : sticky;
	z-index  : 1000;
}

main {
	margin-top : var(--svs-navbar-height);
	display    : flex;
}

footer {
	display : flex;
}

#main-container {
	position       : relative;
	padding-top    : 15px;
	padding-bottom : 15px;
}

:target {
	scroll-margin : calc(var(--svs-navbar-height) + 1vh);
}

/*
************************************************************************************************************************
NAVIGATION BARS
************************************************************************************************************************
*/
#top-navbar {
	background-color : var(--bs-dark);
	width            : 100%;
	top              : 0;
	transition       : top 0.7s;
}

#top-navbar .navbar-brand {
	font-family : "Titillium Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

#top-navbar .navbar-nav {
	font-family : "Titillium Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

#bottom-navbar {
	background-color : var(--bs-dark);
	bottom           : 0;
	width            : 100%;
	z-index          : 1000;
}

#bottom-navbar .navbar-text {
	font-family : Sintony, sans-serif;
	font-size   : 12px;
}

.svs-brand {
	font-size : 24px;
}

/* md and smaller */
@media (max-width : 1023px) {
	.svs-brand {
		font-size : 0;
	}

	.svs-brand::after {
		font-size : 24px;
	}

	.svs-brand-svs::after {
		content : "SVS";
	}

	.svs-brand-gms::after {
		content : "GMS";
	}

	.svs-brand-cilab::after {
		content : "CI Lab";
	}

	.svs-brand-hyperwall::after {
		content : "HW";
	}

	.svs-brand-nv::after {
		content : "NASAViz";
	}
}

#top-navbar .nav-link {
	text-decoration  : none !important;
	background-color : transparent !important;
}

#top-navbar .nav-link {
	cursor          : pointer !important;
	color           : #FFFFFF !important;
	text-decoration : none !important;
}

/*
************************************************************************************************************************
PAGE TEXT
************************************************************************************************************************
*/

h1, h2, h3, h4, h5, h6 {
	font-family    : "Titillium Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-weight    : bold;
	text-rendering : optimizeLegibility;
}

p {
	font-family : "Titillium Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

/*
************************************************************************************************************************
CUSTOM OVERRIDES
************************************************************************************************************************
*/

/*
************************************************************
Bootstrap overrides
************************************************************
 */
.carousel-item img {
	object-fit      : cover;
	object-position : center;
	overflow        : hidden;
}

.collapse.show {
	visibility : visible;
}

/*
************************************************************
Other overrides
************************************************************
 */
img {
	object-position : center;
	object-fit      : contain;

	/* Alt text properties */
	color           : var(--bs-white);
	background      : var(--bs-dark);
}

picture {
	display         : block;
	object-position : center;
	object-fit      : contain;

	/* Alt text properties */
	color           : var(--bs-white);
	background      : var(--bs-dark);
}

/*
************************************************************************************************************************
CUSTOM CLASSES
************************************************************************************************************************
*/

.bg-gray-300 {
	background-color : var(--bs-gray-300) !important;
}

.content-sticky-top {
	position : sticky;
	top      : calc(var(--svs-navbar-height) + 1rem);
	z-index  : 202;
}

@media (max-width : 768px) {
	.content-sticky-top {
		top : 1rem;
	}
}

.hover-grow {
	transition : all 0.3s ease;
}

.hover-grow:hover {
	transform : scale(1.05);
}

.d-none-important {
	display : none !important;
}

.d-block-important {
	display : block !important;
}

@media (max-width : 768px) {
	.ratio-dynamic {
		/* Bootstrap aspect ratio that becomes 1x1 on smaller screen sizes */
		--bs-aspect-ratio : 100%;
	}
}

.img-fixed-container {
	clip-path : inset(0);
}

.img-fixed {
	position : fixed;
}

.nav-link-relative {
	/* This is used by other things, so it's here as a reminder */
}

/*
************************************************************
Links
************************************************************
*/
.link {
	text-decoration  : none !important;
	background-color : transparent !important;
}

.link:hover {
	cursor          : pointer !important;
	text-decoration : underline !important;
}

.link-unstyled {
	text-decoration  : none !important;
	color            : #000000 !important;
	background-color : transparent !important;
}

.link-unstyled:hover {
	cursor          : pointer !important;
	color           : #000000 !important;
	text-decoration : underline !important;
}

/*
************************************************************************************************************************
SITEWIDE ALERT MESSAGES
************************************************************************************************************************
*/
.site-wide-message {
	max-width    : 1110px;
	margin-left  : auto;
	margin-right : auto;
}

/*
************************************************************************************************************************
FORM ERRORS
************************************************************************************************************************
*/
.errorlist {
	color : red;
}

/*
************************************************************************************************************************
LOADING ICONS - spinning and sizing
************************************************************************************************************************
*/

.icon-spin {
	display           : inline-block;
	animation         : spin 1s linear infinite;
	-webkit-animation : spin 1s linear infinite;
	-moz-animation    : spin 1s linear infinite;
}

@-moz-keyframes spin {
	100% {
		-moz-transform : rotate(360deg);
	}
}

@-webkit-keyframes spin {
	100% {
		-webkit-transform : rotate(360deg);
	}
}

@keyframes spin {
	100% {
		-webkit-transform : rotate(360deg);
		transform         : rotate(360deg);
	}
}

/* spin our loading icons */
.loading-icon {
	position          : relative;
	left              : 8px;
	width             : 12px;
	height            : 12px;
	margin            : -6px 0 0 -6px;
	-webkit-animation : spin 1s linear infinite;
	-moz-animation    : spin 1s linear infinite;
	animation         : spin 1s linear infinite;
}

.icon-xs {
	font-size : 8px;
}

.icon-sm {
	font-size : 12px;
}

.icon-lg {
	font-size : 20px;
}

/*
************************************************************************************************************************
WIDGETS
************************************************************************************************************************
*/

.checkinput-align-middle {
	margin-top : 0.4rem;
}

/*
************************************************************
Horizontally-scrolling galleries
************************************************************
 */

.gallery {
	display   : flex;
	flex-wrap : nowrap !important;
}

.gallery-horizontal {
	flex-direction   : row;
	overflow-x       : auto;
	scroll-snap-type : x mandatory;
}

.gallery-horizontal > button.gallery-scroll-left {
	position         : absolute;
	left             : 0;
	width            : 2vw;
	min-width        : 50px;
	padding-top      : 0;
	padding-bottom   : 0;
	z-index          : 100;
	border-radius    : 0 0 0 0;
	background-color : transparent;
	background-image : linear-gradient(0.75turn, rgba(var(--bs-dark-rgb), 0) 0, rgba(var(--bs-dark-rgb), 1) 100%);
}

.gallery-horizontal > button.gallery-scroll-right {
	position         : absolute;
	right            : 0;
	width            : 2vw;
	min-width        : 50px;
	padding-top      : 0;
	padding-bottom   : 0;
	z-index          : 100;
	border-radius    : 0 0 0 0;
	background-color : transparent;
	background-image : linear-gradient(0.25turn, rgba(var(--bs-dark-rgb), 0) 0, rgba(var(--bs-dark-rgb), 1) 100%);
}

.gallery-horizontal > li {
	scroll-snap-align : center;
}

.gallery-card {
	scale      : 0.97;
	transition : all 0.3s ease;
}

.gallery-card:is(:hover, :focus-within) {
	transform : scale(1.03);
}

/*
************************************************************
Fade-outs
************************************************************
 */

/*
    Clips an element and creates a gradient that gradually fades-out the bottom of the element.
    Also supports adding buttons that expand the faded out element such that the entire thing is visible.

    **IMPORTANT NOTE:
        The element needs to have .fade-out and .fade-out-<color> (see below for options)

    Expand button
	<button
		class="fade-out-control btn btn-{COLOR} w-100 fs-2 bi"
		type="button"
		title="Expand / collapse section"
		data-bs-toggle="collapse"
		data-bs-target="{ID OF SECTION TO COLLAPSE}"
	>
	</button>
 */

.fade-out {
	position : relative;
}

.fade-out-control {
	z-index  : 100;
	position : relative;
}

.fade-out-control::before {
	padding : 1rem;
	content : "\f27c";
}

.collapse:not(.show, .collapsing) + .fade-out-control::before {
	content : "\f279";
}

.fade-out-control::after {
	box-sizing : border-box;
	content    : "";
	position   : absolute;
	height     : 200%;
	width      : calc(100% + 2px);
	left       : -1px;
	bottom     : calc(100% - 4px);
	z-index    : -1;
	transition : opacity 0.25s ease-in-out;
	opacity    : 1;
}

@media (prefers-reduced-motion) {
	transition : none;
}

.show + .fade-out-control::after {
	opacity : 0;
}

/* White */
.fade-out-white > .fade-out-control::after {
	background-image : linear-gradient(rgba(var(--bs-white-rgb), 0) 0%, rgba(var(--bs-white-rgb), 1) 95%);
}

/* Light */
.fade-out-light > .fade-out-control::after {
	background-image : linear-gradient(rgba(var(--bs-light-rgb), 0) 0%, rgba(var(--bs-light-rgb), 1) 95%);
}

/* Dark */
.fade-out-dark > .fade-out-control::after {
	background-image : linear-gradient(rgba(var(--bs-dark-rgb), 0) 0%, rgba(var(--bs-dark-rgb), 1) 95%);
}

/*
************************************************************************************************************************
BUTTONS
************************************************************************************************************************
*/

/* Safari ignores the background color of <a> tags styled as buttons if -webkit-appearance is set to "button" */
a.btn {
	-webkit-appearance : none;
}

/*
************************************************************************************************************************
CUSTOM SPACING
************************************************************************************************************************
*/

.mx-n2 {
	margin-left  : -.5rem !important;
	margin-right : -.5rem !important;
}

.mt-6 {
	margin-top : 6rem !important;
}

/*
=== Variables ==========================================================================================================
 */

:root {
	--svs-navbar-height : 72px; /* Gets changed to match the actual navbar height */
}