/* Load fonts */
@font-face {
    font-family: 'PlutoThin';
    src: url('../../fonts/PlutoThin.otf');
}

@font-face {
    font-family: 'PlutoExtraLight';
    src: url('../../fonts/PlutoExtraLight.otf');
}

@font-face {
    font-family: 'PlutoLight';
    src: url('../../fonts/PlutoLight.otf');
}

@font-face {
    font-family: 'PlutoRegular';
    src: url('../../fonts/PlutoRegular.otf');
}

@font-face {
    font-family: 'PlutoBold';
    src: url('../../fonts/PlutoBold.otf');
}

@font-face {
    font-family: 'PlutoBoldItalic';
    src: url('../../fonts/PlutoBold-Italic.otf');
}

@font-face {
    font-family: 'PlutoHeavy';
    src: url('../../fonts/PlutoHeavy.otf');
}

:root {
    /* Colors */
    --governmentBlueSuperLight: #E6F4F9;
    --governmentBlueLight: #B4DDE9;
    --governmentBlue: #88CFE0;
    --governmentBlueOpacity: #88CFE0CC;
    --governmentBlueDark: #1A8BB3;
    --governmentBlueDarker: #0D6A8A;
    --governmentBlueDarkest: #0A4C66;
    --governmentBlueDarkOpacity: #1A8BB3CC;
    --gobernmentRedLight: #F4C7C3;
    --governmentRed: #DB473C;
    --governmentRedOpacity: #DB473CCC;
    --governmentRedDark: #B71C1C;
    --governmentRedDarkOpacity: #B71C1CCC;
    --governmentGrayLight: #E5E5E5;
    --governmentGray: #949699;
    --governmentGrayDark: #6B6B6B;
    --governmentGrayDarkOpacity: #6B6B6BCC;
    --extraBlack: #000000;
    --black: #333333;
    --blackOpacity: #333333CC;
    --white: #FFFFFF;
    --whiteOpacity8: #FFFFFFCC;
    --whiteOpacity7: #FFFFFFB3;
    --whiteOpacity6: #FFFFFF99;
    --whiteOpacity5: #FFFFFF80;
    --orange: #FFA500;
    --orangeDark: #FF8C00;
    --orangeDarker: #FF4500;
    --red: #FF0000;
    --redDark: #8B0000;
    --green: #008000;
    --greenDark: #006400;
    --gray: #808080;
    --grayDarkest: #2F4F4F;
    --grayDarker: #696969;
    --grayDark: #A9A9A9;
    --grayMedium: #E0E0E0;
    --grayLight: #F2F2F2;
    --grayLighter: #f5f5f5;
    --grayLightest: #f8f8f8;
    --graySuperLight: #f9f9f9;

    /* Fonts */
    --plutoThin: 'PlutoThin';
    --plutoExtraLight: 'PlutoExtraLight';
    --plutoLight: 'PlutoLight';
    --plutoRegular: 'PlutoRegular';
    --plutoBold: 'PlutoBold';
    --plutoBoldItalic: 'PlutoBoldItalic';
    --plutoHeavy: 'PlutoHeavy';

    /* Sizes */
    --generalSpacing: 24px;
    --xxxsmall: 6px;
    --xxsmall: 8px;
    --xsmall: 10px;
    --small: 12px;
    --normal: 14px;
    --medium: 16px;
    --large: 18px;
    --xlarge: 20px;
    --xxlarge: 22px;
    --xxxlarge: 24px;

    /* Miscellaneous */
    --borderRadius: 6px;
    --shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    --shadowHover: 0 4px 8px 0 rgba(0,0,0,0.3);
    --shadowActive: 0 0 4px 0 rgba(0,0,0,0.3);
    --shadowFloor: 0 8px 6px -6px var(--black);
    --transitionAll: all 0.3s ease;
}

.governmentBlue{ color: var(--governmentBlue) !important; }
.governmentBlueDark{ color: var(--governmentBlueDark) !important; }
.governmentRed{ color: var(--governmentRed) !important; }
.governmentRedDark{ color: var(--governmentRedDark) !important; }
.governmentGray{ color: var(--governmentGray) !important; }
.extraBlack{ color: var(--extraBlack) !important; }
.black{ color: var(--black) !important; }
.white{ color: var(--white) !important; }
.red{ color: var(--red) !important; }
.red-dark{ color: var(--redDark) !important; }
.green{ color: var(--green) !important; }
.gray{ color: var(--gray) !important; }
.gray-light{ color: var(--grayLight) !important; }
.gray-medium{ color: var(--grayMedium) !important; }
.gray-dark{ color: var(--grayDark) !important; }
.gray-darker{ color: var(--grayDarker) !important; }
.gray-darkest{ color: var(--grayDarkest) !important; }
.white { color: var(--white) !important; }
.white-opacity-8 { color: var(--whiteOpacity8) !important; }
.white-opacity-7 { color: var(--whiteOpacity7) !important; }
.white-opacity-6 { color: var(--whiteOpacity6) !important; }
.white-opacity-5 { color: var(--whiteOpacity5) !important; }
.bgTransparent{ background-color: transparent !important; }
.bgGovernmentBlue{ background-color: var(--governmentBlue) !important; }
.bgGovernmentBlueDark{ background-color: var(--governmentBlueDark) !important; }
.bgGovernmentRed{ background-color: var(--governmentRed) !important; }
.governmentRedOpacity{ background-color: var(--governmentRedOpacity) !important; }
.bgGovernmentRedDark{ background-color: var(--governmentRedDark) !important; }
.bgGovernmentGray{ background-color: var(--governmentGray) !important; }
.bgBlack{ background-color: var(--black) !important; }
.bgWhite{ background-color: var(--white) !important; }
.bgWhiteOpacity8{ background-color: var(--whiteOpacity8) !important; }
.bgWhiteOpacity7{ background-color: var(--whiteOpacity7) !important; }
.bgWhiteOpacity6{ background-color: var(--whiteOpacity6) !important; }
.bgWhiteOpacity5{ background-color: var(--whiteOpacity5) !important; }

.bgRed{ background-color: var(--red) !important; }
.bgRedDark{ background-color: var(--redDark) !important; }
.bgGreen{ background-color: var(--green) !important; }
.bgGray{ background-color: var(--gray) !important; }
.bgGrayLight{ background-color: var(--grayLight) !important; }
.bgGrayMedium{ background-color: var(--grayMedium) !important; }
.bgGrayDark{ background-color: var(--grayDark) !important; }
.bgGrayDarker{ background-color: var(--grayDarker) !important; }
.bgGrayDarkest{ background-color: var(--grayDarkest) !important; }

.plutoThin{ font-family: var(--plutoThin) !important; }
.plutoExtraLight{ font-family: var(--plutoExtraLight) !important; }
.plutoLight{ font-family: var(--plutoLight) !important; }
.plutoRegular{ font-family: var(--plutoRegular) !important; }
.plutoBold{ font-family: var(--plutoBold) !important; }
.plutoBoldItalic{ font-family: var(--plutoBoldItalic) !important; }
.plutoHeavy{ font-family: var(--plutoHeavy) !important; }

.xxxsmall{ font-size: var(--xxxsmall) !important; }
.xxsmall{ font-size: var(--xxsmall) !important; }
.xsmall{ font-size: var(--xsmall) !important; }
.small{ font-size: var(--small) !important; }
.normal{ font-size: var(--normal) !important; }
.medium{ font-size: var(--medium) !important; }
.large{ font-size: var(--large) !important; }
.xlarge{ font-size: var(--xlarge) !important; }
.xxlarge{ font-size: var(--xxlarge) !important; }
.xxxlarge{ font-size: var(--xxxlarge) !important; }

.flex{ display: flex !important; }
.flex-column{ flex-direction: column !important; }
.flex-row{ flex-direction: row !important; }
.justify-center{ justify-content: center !important; }
.justify-start{ justify-content: flex-start !important; }
.justify-end{ justify-content: flex-end !important; }
.justify-between{ justify-content: space-between !important; }
.justify-around{ justify-content: space-around !important; }
.align-center{ align-items: center !important; }
.align-start{ align-items: flex-start !important; }
.align-end{ align-items: flex-end !important; }

.shadowFloor{ box-shadow: var(--shadowFloor) !important; }
.borderRadius{ border-radius: var(--borderRadius) !important; }
.display-none{ display: none; }
.display-block{ display: block; }
.display-inline{ display: inline; }
.display-inline-block{ display: inline-block; }
.display-flex{ display: flex; }

*{
    box-sizing: border-box;
}

/* Scrollbars */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--gray) var(--grayMedium);
}

html::-webkit-scrollbar {
	width: 0.6vw;
}

html::-webkit-scrollbar-thumb {
	background-color: var(--gray);
}

html::-webkit-scrollbar-track {
	background-color: var(--grayMedium);
}

/* General */
body{
    font-family: var(--plutoRegular);
    color: var(--black);
    font-size: var(--normal);
    background-color: var(--grayLightest);
}

h1, h2, h3, h4, h5, h6, p{
    color: var(--black) !important;
}

/* Loading */
#loader{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--governmentBlue);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--governmentRed);
    box-shadow: 0 0 0 0 var(--governmentRedOpacity);
    animation: l1 1s infinite;
}

@keyframes l1 {
    100% {
        box-shadow: 0 0 0 30px #0000
    }
}

/* Pulse */
.round-btn{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    padding: calc(var(--generalSpacing) / 1.5);
    cursor: pointer;
}

.pulse {
    text-align: center;
    white-space: nowrap;
    display: block;
    box-shadow: 0 0 0 0 var(--governmentBlueOpacity);
    background-color: var(--governmentBlue);
    -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    text-decoration: none !important;
    color: var(--white);
    font-size: small;
    transition: all 300ms ease-in-out;
    box-sizing: border-box;
}

.pulse.red-pulse{
    box-shadow: 0 0 0 0 var(--governmentRedOpacity);
    background-color: var(--governmentRed);
    -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

a.pulse:hover {
    /* -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none; */
    color: var(--governmentRed);
}

@-webkit-keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

@-ms-keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

@keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
}

/* Miscellaneous */
.validation{
    min-height: 35px;
    color: var(--red);
    font-size: small;
}

.input-error{
    outline: 1px solid var(--red) !important;
}

fieldset{
    border: 1px solid var(--grayLight);
    border-radius: calc(var(--generalSpacing) / 4);
    padding: calc(var(--generalSpacing) / 2);
}

legend{
    font-size: var(--small);
    color: var(--gray);
}

#big-screen{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--governmentBlueDarkOpacity);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
}

.has-dropcap:first-letter {
    float: left;
    font-size: 6rem;
    line-height: 0.65;
    margin: 0.1em 0.1em 0.2em 0;
}

.dropcap {
    background: #303030;
    color: #FDF9F2;
    float: left;
    font-size: 6rem;
    line-height: 1;
    margin: 0.1em 0.1em 0.2em 0;
    padding: 0.1em;
}

.dropcap:before,
.dropcap:after {
    content: "";
    display: block;
}

.dropcap:before {
    margin-top: -0.2em;
}

.dropcap:after {
    margin-bottom: -0.15em;
}

@media screen and (max-width: 600px) {
    .round-btn{
        width: 75px;
        height: 75px;
    }
}