/*------------ VARIABLES ------------*/

:root {
	--primary: #002f87;
	--primary-light: #8097c3;
	--primary-medium: #5978b1;
	--primary-dark: #001357;
	--secondary: #0055a8;
	--secondary-light: #80aad4;
	--secondary-medium: #5990c6;
	--secondary-dark: #002a7d;
	--info: #007ac9;
	--info-light: #80bde4;
	--info-medium: #59a8dc;
	--info-dark: #004aa9;
	--success: #00943b;
	--success-light: #80ca9d;
	--success-medium: #59b97f;
	--success-dark: #006619;
	--warning: #f9b924;
	--warning-light: #fcdc92;
	--warning-medium: #fbd170;
	--warning-dark: #f5930d;
	--alert: #da3d25;
	--alert-light: #ed9e92;
	--alert-medium: #e78171;
	--alert-dark: #c21b0d;
	--white: #ffffff;
	--gray00: #f8f8f8;
	--gray0: #f2f2f2;
	--gray1: #e5e5e5;
	--gray2: #cccccc;
	--gray3: #b3b3b3;
	--gray4: #999999;
	--gray5: #808080;
	--gray6: #666666;
	--gray7: #4d4d4d;
	--gray8: #333333;
	--gray9: #1a1a1a;
	--black: #000000;
	--text: var(--gray9);
	--link: var(--secondary);
	--link-hover: var(--info);
	--hr: var(--gray1);
	--shadow: 0 4px 6px rgba(0,0,0,.1);
	--header-height: 50px;
}


/*------------ COLORS ------------*/

.c-inherit {color: inherit;}
.c-primary {color: var(--primary);}
.c-primary-light {color: var(--primary-light);}
.c-primary-medium {color: var(--primary-medium);}
.c-primary-dark {color: var(--primary-dark);}
.c-secondary {color: var(--secondary);}
.c-secondary-light {color: var(--secondary-light);}
.c-secondary-medium {color: var(--secondary-medium);}
.c-secondary-dark {color: var(--secondary-dark);}
.c-info {color: var(--info);}
.c-info-light {color: var(--info-light);}
.c-info-medium {color: var(--info-medium);}
.c-info-dark {color: var(--info-dark);}
.c-success {color: var(--success);}
.c-success-light {color: var(--success-light);}
.c-success-medium {color: var(--success-medium);}
.c-success-dark {color: var(--success-dark);}
.c-warning {color: var(--warning);}
.c-warning-light {color: var(--warning-light);}
.c-warning-medium {color: var(--warning-medium);}
.c-warning-dark {color: var(--warning-dark);}
.c-alert {color: var(--alert);}
.c-alert-light {color: var(--alert-light);}
.c-alert-medium {color: var(--alert-medium);}
.c-alert-dark {color: var(--alert-dark);}
.c-white {color: var(--white);}
.c-gray0 {color: var(--gray0);}
.c-gray1 {color: var(--gray1);}
.c-gray2 {color: var(--gray2);}
.c-gray3 {color: var(--gray3);}
.c-gray4 {color: var(--gray4);}
.c-gray5 {color: var(--gray5);}
.c-gray6 {color: var(--gray6);}
.c-gray7 {color: var(--gray7);}
.c-gray8 {color: var(--gray8);}
.c-gray9 {color: var(--gray9);}
.c-black {color: var(--black);}

.bg-primary {background-color: var(--primary);}
.bg-secondary {background-color: var(--secondary);}
.bg-info {background-color: var(--info);}
.bg-success {background-color: var(--success);}
.bg-warning {background-color: var(--warning);}
.bg-alert {background-color: var(--alert);}
.bg-primary-light {background-color: var(--primary-light);}
.bg-secondary-light {background-color: var(--secondary-light);}
.bg-info-light {background-color: var(--info-light);}
.bg-success-light {background-color: var(--success-light);}
.bg-warning-light {background-color: var(--warning-light);}
.bg-alert-light {background-color: var(--alert-light);}
.bg-primary-medium {background-color: var(--primary-medium);}
.bg-secondary-medium {background-color: var(--secondary-medium);}
.bg-info-medium {background-color: var(--info-medium);}
.bg-success-medium {background-color: var(--success-medium);}
.bg-warning-medium {background-color: var(--warning-medium);}
.bg-alert-medium {background-color: var(--alert-medium);}
.bg-primary-dark {background-color: var(--primary-dark);}
.bg-secondary-dark {background-color: var(--secondary-dark);}
.bg-info-dark {background-color: var(--info-dark);}
.bg-success-dark {background-color: var(--success-dark);}
.bg-warning-dark {background-color: var(--warning-dark);}
.bg-alert-dark {background-color: var(--alert-dark);}
.bg-white {background-color: var(--white);}
.bg-gray00 {background-color: var(--gray00);}
.bg-gray0 {background-color: var(--gray0);}
.bg-gray1 {background-color: var(--gray1);}
.bg-gray2 {background-color: var(--gray2);}
.bg-gray3 {background-color: var(--gray3);}
.bg-gray4 {background-color: var(--gray4);}
.bg-gray5 {background-color: var(--gray5);}
.bg-gray6 {background-color: var(--gray6);}
.bg-gray7 {background-color: var(--gray7);}
.bg-gray8 {background-color: var(--gray8);}
.bg-gray9 {background-color: var(--gray9);}
.bg-black {background-color: var(--black);}

code {display: block; font-family: monospace !important; background: var(--gray0); padding: 1em; font-size: 15px;}
.textlabel {display: inline-block; vertical-align: baseline; padding: .125em .25em; font-weight: 400; border-radius: var(--radius); border: 1px solid var(--hr); background: var(--gray0);}


/*------------ GENERAL STYLES ------------*/

body {display: flex; flex-direction: column; min-height: 100vh; padding-top: var(--header-height); font-family: Mulish, serif; color: var(--text);}
a {color: var(--link);}
a:hover {color: var(--link-hover);}


/*------------ HEADER / MENU ------------*/

#header {left: 0; top: 0; right: 0; height: var(--header-height); z-index: 2;}
#header a {color: inherit; text-decoration: none;}
#logo:hover {background: var(--link); color: var(--white);}
#logo:hover img {filter: brightness(0) invert(1);}
#header h1 {background: linear-gradient(to right, var(--gray0), transparent 1em);}

#menu-fade {opacity: .9; z-index: 5;}
#menu {position: fixed; inset: 0 0 0 auto; width: 300px; background: var(--white); box-shadow: -10px 10px 10px rgb(0 0 0 / 10%); transform: translateX(calc(100% + 10px)); transition: transform .5s; z-index: 10;}
#menu.open {transform: translateX(0);}
#menu a {border-top: 1px solid rgb(0 0 0 / 10%); padding: 10px 20px;}
#menu a:hover {background: var(--primary); color: var(--white); text-decoration: none;}

#main {flex-grow: 1;}


/*------------ FORMS ------------*/

/*.input-group, input:not([type="checkbox"]):not([type="radio"]), select, textarea, .button {border: 0; border-radius: var(--radius); overflow: hidden;}
.input-group input:not([type="checkbox"]):not([type="radio"]), .input-group select, .input-group textarea, .input-group .button {border-radius: 0;}*/

select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {display: block; width: 100%; border: 1px solid var(--gray2); padding: .5em; line-height: 1.5; height: 2.5em;}
textarea {height: 300px;}

input[type="file"] {cursor: pointer;}
input[type="file"]::file-selector-button {font: inherit; padding: .5em .75em; margin: -.5em -.75em; -webkit-margin-end: .75em; margin-inline-end: .75em; color: var(--text); background-color: var(--gray0); border-color: inherit; border-style: solid; border-width: 0; border-inline-end-width: 1px; border-radius: 0; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}
input[type="file"]:hover::file-selector-button {background-color: var(--primary); color: var(--white);}

button, .button, input[type="submit"], input[type="button"] {display: inline-block; padding: .75em 1em; height: 2.5em; border-radius: var(--radius); border: 0; color: var(--white); text-transform: uppercase; font-weight: 600; transition: .25s; cursor: pointer;}
button:not([class*="bg-"]), .button:not([class*="bg-"]), input[type="submit"]:not([class*="bg-"]), input[type="button"]:not([class*="bg-"]) {background: var(--primary);}
button:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover {background: var(--secondary); text-decoration: none;}
button[disabled], input[type="submit"][disabled], input[type="button"][disabled] {cursor: default; opacity: .2; background: var(--gray5) !important;}
button.tiny {padding: .5em .75em;}
.button.arrow-left:before {content: '\2190'; margin-right: .5em; font-size: 1.25em; line-height: .5em;}
.button.arrow-right:before {content: '\2192'; margin-left: .5em; font-size: 1.25em; line-height: .5em;}

label:not(.h2):not(.h3):not(.h4):not(.h5):not(.h6), .input-group-label, legend {display: block; line-height: 1.1; padding: 1em 0 .25em; font-size: 14px; font-weight: 700; text-transform: uppercase;}

input[type="checkbox"] + label:not(.label), input[type="radio"] + label:not(.label) {font-weight: normal !important; text-transform: none !important; color: inherit !important;}
input[type="checkbox"] + label, input[type="radio"] + label {padding: 0 !important;}
input[type="checkbox"], input[type="radio"] {margin-bottom: 0;}

.radiocheck {min-width: 0; padding: 0; margin: 0; border: 0; display: flex; flex-direction: column; gap: .5em;}
.radiocheck > div {display: flex; gap: .5em; align-items: center;  min-height: 2.5em;}

.input-group {display: flex; align-items: stretch;}
.input-group-field {border-radius: 0;}
.input-group-field:first-child {border-radius: var(--radius) 0 0 var(--radius);}
.input-group-button input {border-radius: 0 var(--radius) var(--radius) 0;}


/*select, option {position: relative; background-color: var(--dkgray); color: inherit;}
select[multiple] {height: 200px; overflow-y: scroll;}
select[multiple]::-webkit-scrollbar {width: 6px;}
select[multiple]::-webkit-scrollbar-track {background: rgba(255,255,255,.2);}
select[multiple]::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,.2); border-radius: 20px;}*/


/*------------ GRIDS ------------*/

/*.tool-grid > .cell {padding: 10px;}
a.tool-link {display: block; background: var(--hr); color: rgba(255,255,255,.5); padding: 25px; height: 100%; line-height: var(--lineheight); border-radius: var(--radius); transition: background .5s; text-decoration: none;}
a.tool-link:hover {background: var(--vvdkteal);}
.tool-imgarea {position: relative; height: 130px; margin: -10px -10px 30px; box-shadow: inset 0 0 300px rgba(0,0,0,.8); border-radius: var(--radius); transition: box-shadow .5s;}
.tool-link:hover .tool-imgarea {box-shadow: inset 0 0 120px #000;}
.tool-img {position: relative; top: -10px; max-width: 150px; aspect-ratio: 1 / 1; margin: 0 auto; background: center center; background-size: cover; border-radius: 50%;}
.tool-link h2 {font-size: 1em; text-transform: uppercase; font-weight: 500; letter-spacing: .1em; color: var(--text);}
.tool-link:hover h2 {color: #fff;}
.tool-link > *:last-child {margin-bottom: 0;}*/


/*------------ TABLES ------------*/

table {width: 100%; margin: 1em 0; border-spacing: 1px;}
th {text-align: left;}
th, td {padding: .5em 1em;}
thead tr:not([class*="bg-"]) {background: var(--gray8);}
thead tr:not([class*="c-"]) {color: var(--white);}
table:not(.no-stripes) tbody tr:nth-child(odd):not([class*="bg-"]) {background: var(--gray0);}


/*------------ TABS ------------*/

.tabs {display: flex; border: 0; border-bottom: 1px solid var(--hr);}
.tabs.vertical {flex-direction: column;}
.tabs a {display: block; padding: .5em 1.5em; background: var(--gray0); border: solid var(--hr); border-width: 1px 1px 0; margin-right: 5px; font-weight: 500; text-decoration: none; color: inherit;}
.tabs.vertical a {padding: .75em 1em; margin: 0;}
.tabs a.is-active {background: var(--white); font-weight: 700;}
.tabs a:not(.is-active):hover {border-color: transparent; background: var(--secondary); color: var(--white);}
.tabs-panel:not(.is-active) {display: none;}


/*------------ SPINNER ------------*/

/*.spinner {display: flex; align-items: center; justify-content: center; font-size: 150px; height: 250px;}
.spinner:after {content: ''; width: 1em; aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--hr); border-bottom-color: var(--dkmint); animation: spin 1.25s linear infinite;}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}*/


/*------------ TYPE TO FILTER ------------*/

.type-to-filter {display: flex;}
.type-to-filter input {flex-grow: 1; flex-shrink: 0; width: auto !important; max-width: none; height: auto; margin: 0; font-size: inherit; border: 0; background: var(--gray0);}
.type-to-filter button {flex-grow: 0; flex-shrink: 0; position: relative; height: calc(1.5em + 1rem); aspect-ratio: 1; border-radius: 0; padding: 0; background: var(--primary); color: var(--white); overflow: hidden; text-indent: -200vw; cursor: pointer;}
.type-to-filter button:before {content: '\2715'; position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; text-indent: 0;}
.type-to-filter button:hover {background: var(--secondary);}


/*------------ FILE DROP ------------*/

.uploader {width: 100%;}
.uploader input[type="file"] {display: none !important;}
.uploader .dropzone {display: flex; align-items: center; justify-content: center; width: 100%; height: 200px; border: 5px dashed var(--hr); background: var(--gray0); margin: 10px 0; padding: 20px; text-align: center; text-transform: uppercase; font-weight: 600; color: var(--gray6);}
.uploader .dropzone.hover, .uploader .dropzone.done, .uploader .dropzone.error {background-color: var(--primary); color: var(--white); border-color: rgba(255,255,255,.5);}
.uploader .dropzone.done {background-color: var(--success);}
.uploader .dropzone.error {background-color: var(--alert);}


/*.callout {background-color: rgba(0,0,0,.5); border: 0; color: inherit;}*/