@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
/*@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-Bold.woff2') format('woff2');
    font-weight: bolder; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-BoldItalic.woff2') format('woff2');
    font-weight: bolder; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-SemiBold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-SemiBoldItalic.woff2') format('woff2');
    font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-Regular.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-Italic.woff2') format('woff2');
    font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-Medium.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-MediumItalic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-SemiLight.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-SemiLightItalic.woff2') format('woff2');
    font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-Light.woff2') format('woff2');
    font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-LightItalic.woff2') format('woff2');
    font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-Thin.woff2') format('woff2');
    font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Aileron';
    src: url('/static/fonts/Aileron-ThinItalic.woff2') format('woff2');
    font-weight: 100; font-style: italic; font-display: swap;
}*/

:root {
	--mainblue: #055c8e;
	--topgradient: radial-gradient(circle, #FFF 0%, #F7F7F7 50%);
	
	--color1: #fdfdfd;
	--color2: #d2d4d9;
	--color3: #055c8e;
	--colortext: black;
	--colorlink: darkcyan;
	
	--coolcolor: #abc5;
	--coolcolorhover: #9ab9;
	
	--headercolor1: #fdfcff;
	--headercolor2: #f4f9fc;
	--headercolor3: #e3e7e9;
	--headertextcolor: #112532;
	--headertextcolorhover: #074163;
	--headericons: #78858d;
	--headericonsaccent: #155287;
	
	--BGgradient1: linear-gradient(180deg, #fff 0%, #eaeaea 100%); /*linear-gradient(180deg, #c9c9c9 0%, #828495 100%);*/
	--BGgradient2: linear-gradient(180deg, #f3f4f5 0%, #ccc 100%);
	--BGlighter: #eaeef5; /*#dfe8f7*/
	--BGlighter2: #f2f8f8; /*#eaeaf5*/
	
	--nightfilter: unset;
	--shapesfilter: contrast(0.75) brightness(0.55) sepia(2) hue-rotate(165deg);
	--dayinvert: invert(1);
	--nightbright: unset;
	--shadowcolor: #FFF6;
	
	--toggleicon: "\f186";
}

body,h1,h2,h3,h4,h5,h6,a,button,input {
	font-family: "Manrope", sans-serif;
	line-height: 1em;
	text-decoration: none;
	color: var(--colortext);
}
p { line-height: 1.25em; }
h1,h2 { color: var(--headertextcolor); }
h1,h2,h3 { text-align: center; font-weight: normal; }
button,input { border: none; background: none; color: inherit; accent-color: #2c89d8; }
select { font-family: "Manrope", sans-serif; }

*:has(font):after, font + i { margin-left: 4px; }
i:has(+ font) { margin-right: 4px; }

body, html { margin: 0; padding: 0; position: relative; overflow-x: clip; min-height: 100%; }

.hidden { display: none !important; }

/* ALERT MESSAGES */

#systemmessages {
	position: fixed;
	z-index: 4;
	top: 0;
	width: 100%;
	display: flex; flex-direction: column;
	pointer-events: none;
}

.sysmessage {
	margin: auto;
	text-align: center;
	min-width: 300px;
	min-height: 50px;
	color: white;
	position: relative;
	font-weight: bold;
	border-radius: 250px;
	box-shadow: 0 1px 5px #0009;
	animation: message 3s ease;
	top: -150px;
	cursor: pointer;
	pointer-events: all;
}

.sysmessage > p {
	padding-left: 45px;
	padding-right: 10px;
}

.sysmessage:before {
	font: normal normal normal 28px/1 FontAwesome;
	position: absolute; left: 15px; height: 100%;
	display: flex; align-items: center;
	content: "\f071";
}

.good { background-color: #0bb335; }
.good:before { content: "\f00c"; }
.bad { background-color: #ec3c3c; }
.bad:before { content: "\f00d"; }
.aria { opacity: 0 !important; position: absolute; }

@keyframes message {
	0%, 100% { top: -100px; } 
	10%, 90% { top: 20px; } 
}