@import url('https://fonts.googleapis.com/css?family=Barlow:100,300,400,500,700,900&display=swap');

:root {
	--alert-color: #af0000;
	--primary-color: #0080ff;
	--white-color: #ffffff;
	--warning-color: #ff8a00;
	--success-color: #008b00;
	--darkreader-text: #e85861;
	--medium-light-grey-color: #a9a9a9;
	--main-height: calc(100vh - var(--header-height));
	--heading-hight: 45px;
	--header-height: 0px;
	--footer-height: 20px;
	--menu-static-area-height: 200px;
	--primary-container-max-width: 940px;
	--desktop-menu-width: 500px;
	--grid-gap: 5px;
	--shadow-drop-outer: 0 0 10px var(--black-color-transparent-7);
	--input-text-label: #ccc;
	--green-description: #168a16;
	--yellow-public: #e4de03;
	--orange-confidential: #ffb325;
}

/* MAIN Styles */

html,
* {
	font-family: 'Barlow', sans-serif;
}
body {
	margin: 5px;
	background-image: url('/images/background.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	color: white;
	background-attachment: fixed;
	min-height: var(--main-height);
}
a {
	color: var(--green-description);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.5;
}

a > span {
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.5;
}

a:hover,
a:hover > span {
	color: var(--primary-color);
}
menu > a {
	color: var(--white-color);
	font-weight: 400;
	letter-spacing: 0.8px;
	line-height: 1.5;
}
.dashboard-info a {
	color: var(--white-color);
	font-weight: 400;
	letter-spacing: 0.8px;
	line-height: 1.5;
}
.page-nav a {
	color: var(--white-color);
	font-weight: 400;
	letter-spacing: 0.8px;
	line-height: 1.5;
}
.dashboard-header a {
	color: var(--white-color);
	font-weight: 400;
	letter-spacing: 0.8px;
	line-height: 1.5;
}
p,
span,
li {
	font-weight: 400;
	letter-spacing: 0.8px;
	line-height: 1.5;
	cursor: default;
}

hr {
	border-color: var(--primary-color);
}

h1 {
	color: var(--primary-color);
	font-size: 28px;
	font-weight: 500;
	margin-bottom: 1rem;
	cursor: default;
}

h2 {
	color: var(--primary-color);
	font-size: 22px;
	font-weight: 400;
	margin-bottom: 1rem;
	cursor: default;
}

h3 {
	color: var(--primary-color);
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 1rem;
	cursor: default;
}

h4 {
	color: var(--dark-grey-color);
	font-size: 28px;
	font-weight: 500;
	margin-bottom: 1rem;
	cursor: default;
}

h5 {
	color: var(--dark-grey-color);
	font-size: 22px;
	font-weight: 400;
	margin-bottom: 1rem;
	cursor: default;
}

h6 {
	color: var(--dark-grey-color);
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 1rem;
	cursor: default;
}
/* Button Styles */
.primary-hover:hover {
	color: var(--primary-color);
}
.min-content {
	width: min-content;
}
.max-content {
	width: max-content;
}
.grey-button {
	height: min-content;
	cursor: pointer;
	background-color: transparent;
	border: none;
	color: var(--medium-light-grey-color);
	padding: 0;
}
.default-button {
	height: min-content;
	cursor: pointer;
	background-color: transparent;
	border: none;
	color: white;
	font-size: medium;
	padding: 0;
}
.default-button:hover {
	color: var(--primary-color);
}
.default-button:disabled {
	color: var(--medium-light-grey-color);
	cursor: not-allowed;
}
/* GLASSMORPHISM BACKGROUND */
.glassmorphism {
	backdrop-filter: blur(4px) saturate(7%);
	-webkit-backdrop-filter: blur(4px) saturate(7%);
	background-color: rgba(0, 0, 0, 0.75);
	border-radius: 5px;
}
.blur {
	width: 100%;
	height: 100%;
	z-index: 2;
	backdrop-filter: blur(6px) saturate(3%);
	-webkit-backdrop-filter: blur(6px) saturate(3%);
	background-color: rgba(225, 225, 225, 0.15);
	position: absolute;
	top: 0;
	left: 0;
}
/* PADDING/MARGIN */
.m {
	margin: 0.5rem;
}

.m-0 {
	margin: 0 !important;
}

.m-1 {
	margin: 1rem;
}

.m-2 {
	margin: 2rem;
}

.m-3 {
	margin: 3rem;
}

.my {
	margin: 0.5rem 0;
}

.my-1 {
	margin: 1rem 0;
}

.my-2 {
	margin: 2rem 0;
}

.my-3 {
	margin: 3rem 0;
}

.mx {
	margin: 0 0.5rem;
}

.mx-1 {
	margin: 0 1rem;
}

.mx-2 {
	margin: 0 2rem;
}

.mx-3 {
	margin: 0 3rem;
}

.mt {
	margin-top: 0.5rem;
}

.mt-1 {
	margin-top: 1rem;
}

.mt-2 {
	margin-top: 2rem;
}

.mt-3 {
	margin-top: 3rem;
}

.mt-4 {
	margin-top: 4rem;
}

.mb {
	margin-bottom: 0.5rem;
}

.mb-1 {
	margin-bottom: 1rem;
}

.mb-2 {
	margin-bottom: 2rem;
}

.mb-3 {
	margin-bottom: 3rem;
}

.ml-0 {
	margin-left: 0;
}

.ml-1 {
	margin-left: 0.25rem;
}

.ml-2 {
	margin-left: 0.5rem;
}

.ml-3 {
	margin-left: 1rem;
}

.ml-4 {
	margin-left: 1.5rem;
}

.mr-0 {
	margin-right: 0;
}

.mr-1 {
	margin-right: 0.25rem;
}

.mr-2 {
	margin-right: 0.5rem;
}

.mr-3 {
	margin-right: 1rem;
}

.mr-4 {
	margin-right: 1.5rem;
}

/* Padding */
.p {
	padding: 0.5rem;
}

.p-0 {
	padding: 0 !important;
}

.p-1 {
	padding: 1rem;
}

.p-2 {
	padding: 2rem;
}

.p-3 {
	padding: 3rem;
}

.pl-0 {
	padding-left: 0 !important;
}

.pl-1 {
	padding-left: 1rem;
}

.pl-2 {
	padding-left: 2rem;
}

.pl-3 {
	padding-left: 3rem;
}

.pl-4 {
	padding-left: 4rem;
}

.pr-0 {
	padding-right: 0 !important;
}

.pr-1 {
	padding-right: 1rem;
}

.pr-2 {
	padding-right: 2rem;
}

.pr-3 {
	padding-right: 3rem;
}

.py {
	padding: 0.5rem 0;
}

.py-1 {
	padding: 1rem 0;
}

.py-2 {
	padding: 2rem 0;
}

.py-3 {
	padding: 3rem 0;
}

.px {
	padding: 0 0.5rem;
}

.px-1 {
	padding: 0 1rem;
}

.px-2 {
	padding: 0 2rem;
}

.px-3 {
	padding: 0 3rem;
}

.pt {
	padding-top: 0.5rem;
}

.pt-1 {
	padding-top: 1rem;
}

.pt-2 {
	padding-top: 2rem;
}

.pt-3 {
	padding-top: 3rem;
}

.pt-4 {
	padding-top: 4rem;
}

.pb {
	padding-bottom: 0.5rem;
}

.pb-1 {
	padding-bottom: 1rem;
}

.pb-2 {
	padding-bottom: 2rem;
}

.pb-3 {
	padding-bottom: 3rem;
}

/* REGULAR STYLES */
/* FORM STYLES */
.error-message {
	color: var(--alert-color);
	margin: -1.3rem 0.75rem;
	font-size: 1rem;
}
/* Modal additions */
.blur {
	width: 100%;
	height: 100%;
	z-index: 1;
	backdrop-filter: blur(6px) saturate(3%);
	-webkit-backdrop-filter: blur(6px) saturate(3%);
	background-color: rgba(225, 225, 225, 0.15);
	position: absolute;
	top: 0;
	left: 0;
}
.modal {
	position: fixed;
	z-index: 2;
	top: 50px;
	height: var(--main-height);
	width: 100%;
}

.side-modal {
	position: fixed;
	z-index: 2;
	right: 0;
	top: calc(var(--header-height) - var(--footer-height) - 15px);
	height: min-content;
	width: 70%;
}

@media (min-width: 576px) {
	.modal {
		width: var(--desktop-menu-width);
		height: calc(var(--main-height) - var(--header-height));
		left: calc(
			var(--primary-container-max-width) / 2 - var(--desktop-menu-width) / 2
		);
		filter: drop-shadow(var(--shado-drop-outer));
	}

	.side-modal {
		position: fixed;
		z-index: 2;
		right: 0;
		top: calc(var(--header-height) - var(--footer-height) + 35px);
		width: var(--desktop-menu-width);
		height: calc(var(--main-height) - var(--header-height));
		filter: drop-shadow(var(--shado-drop-outer));
	}
}

@media print {
	canvas {
		display: none !important;
		visibility: hidden !important;
	}
	.pdf-container {
		display: none !important;
	}
}