:root {
	--bg-primary: #10263a;
	--bg-secondary: #1f2c3a;
	--bg-menu: #2f4054;
	--bg-gradient-start: #10263a;
	--bg-gradient-end: #6687ac;

	--text-primary: white;
	--text-secondary: #95aea0;
	--text-highlight: #bdd82f;
	--text-link: #84e064;
	--text-link-hover: #868e9c;
	--text-header: #bedde4;

	--border-color: #6e8999;
}

body {
	margin: 0px;
	scroll-behavior: smooth;
	/* Solid fallback color for environments that don't render gradients */
	background-color: var(--bg-primary);
	/* SVG data-URI fallback (works in WebViews that don't support CSS gradients) */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2310263a'/><stop offset='1' stop-color='%236688ac'/></linearGradient></defs><rect width='100' height='100' fill='url(%23g)'/></svg>");
	/* Vendor-prefixed gradients for older WebViews */
	background-image: -webkit-linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
	/* Standards-compliant gradient */
	background-image: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
	/* Make sure background covers the viewport */
	background-size: cover;
	background-position: center center;
	overflow-x: hidden;
	width: 100%;
	min-height: 100vh;
	/* ensure gradient covers viewport */
	/* background-image: url('../icons/background.jpg'); */
}

.no-scroll {
	overflow: hidden !important;
}

h1 {
	color: var(--text-header);
}

@font-face {
	font-family: 'Calibri';
	src: url('../fonts/Calibri.ttf') format('truetype');
}

div,
span {
	font-family: 'Calibri';
}

img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
}

/* preload images */
body::after {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: -1;
	content: url('../icons/loading.gif');
}

.hidden {
	display: none;
}

button,
input {
	align-items: center;
	background-color: #dddddd;
	border: 1px solid rgba(0, 0, 0, 0.1);
	/* box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0; */
	box-sizing: border-box;
	color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	display: inline-flex;
	font-weight: 600;
	justify-content: center;
	line-height: 1.25;
	margin: 0;
	min-height: 1rem;
	position: relative;
	text-decoration: none;
	transition: all 250ms;
	user-select: none;
	/* -webkit-user-select: none; */
	touch-action: manipulation;
	vertical-align: baseline;
	width: auto;
	opacity: 0.4;
	font-size: 16px;
	padding: 3px 10px;
}

@media screen and (min-aspect-ratio: 13/9) and (min-width:1199px) {
	input {
		width: 300px;
	}
}

@media screen and (min-aspect-ratio: 13/9) and (max-width:1200px) {
	input {
		width: 200px;
	}
}

button:hover,
input:hover {
	opacity: 1;
}

button:hover,
button:focus,
input:hover,
input:focus {
	border-color: rgba(0, 0, 0, 0.15);
	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
	color: rgba(0, 0, 0, 0.65);
}

input:focus {
	background-color: #ffffff;
	opacity: 0.8;
}

button:hover,
input:hover {
	transform: translateY(-1px);
}

button:active {
	background-color: #F0F0F1;
	border-color: rgba(0, 0, 0, 0.15);
	box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
	color: rgba(0, 0, 0, 0.65);
	transform: translateY(0);
	opacity: 0.8;
}


.autocomplete-items {
	position: absolute;
	border: 1px solid var(--border-color);
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 0;
}

.autocomplete-items div {
	background-color: #ffffff;
	font-size: 16px;
	padding-left: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	/* border-radius: .25rem; */
}

.autocomplete-items div:hover,
.autocomplete-items div.autocomplete-active {
	background-color: #e1eadd;
}



.button-active {
	background-color: #bedde4;
	opacity: 1;
}



input+.button-clear {
	position: absolute;
	right: calc(0% + 7px);
	padding-top: 5px;
	border: none;
	border-radius: .25rem;
	opacity: 0;
	color: #bc7e7e;
}

input.button-active+.button-clear {
	background-color: #d3e5e9;
	opacity: 1;
}

input+.button-clear:before {
	content: "✕";
}






.overlay,
.overlay-on-body {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	/*backdrop-filter: blur(3px);
  	-webkit-backdrop-filter: blur(3px);*/
}



.centeralign {
	text-align: center;
	justify-content: center;
}

.padleft20 {
	padding-left: 20px;
}

.cursorpointer {
	cursor: pointer;
}

.hide {
	display: none;
}

.vgap30px {
	height: 30px;
}

#page-loader {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100%;
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

#page-loader .page-loader-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.35);
}

#page-loader .loader-binoculars {
	position: relative;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: binoculars-scan 2.5s infinite ease-in-out;
}

#page-loader .loader-binoculars .barrel {
	width: 50px;
	height: 50px;
	background: #1f2c3a;
	/* Dark body color */
	border: 3px solid #6e8999;
	border-radius: 50%;
	position: relative;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

/* The lens glass effect inside the barrel */
#page-loader .loader-binoculars .barrel::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1) 40%, rgba(30, 30, 50, 0.8) 80%);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Reflection glint */
#page-loader .loader-binoculars .barrel::before {
	content: '';
	position: absolute;
	top: 12px;
	left: 12px;
	width: 10px;
	height: 6px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	transform: rotate(-45deg);
	z-index: 2;
	filter: blur(1px);
}

#page-loader .loader-binoculars .connector {
	width: 15px;
	height: 12px;
	background: #3e4e5e;
	border-top: 2px solid #6e8999;
	border-bottom: 2px solid #6e8999;
	margin: 0 -2px;
	/* Pull them together slightly */
	z-index: -1;
	/* Behind barrels if overlap occurs */
}

@keyframes binoculars-scan {

	0%,
	100% {
		transform: translateX(-15px) rotate(0deg);
	}

	50% {
		transform: translateX(15px) rotate(0deg);
	}

	25% {
		transform: translateX(-15px) rotate(-5deg);
	}

	75% {
		transform: translateX(15px) rotate(5deg);
	}
}

.heading-hr {
	border: none;
	border-bottom: 2px solid #99b3ce;
	margin-top: 30px;
	margin-bottom: 60px;
}

.inline-loader {
	border: 3px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	border-top: 3px solid #c9e0ff;
	width: 24px;
	height: 24px;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	display: inline-block;
	vertical-align: middle;
}

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

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

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}