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

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

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

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

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

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

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

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

:root {
    /* Colors */
    --black: #2B2E31;
    --blackLight: #58595a;
    --deepestBlue: #062847;
    --deepBlue: #2E3385;
    --blueLight: #A2B4D3;
    --blue: #005593;
    --blueDark: #004170;
    --blueDarkOpacity8: rgba(0, 65, 112, 0.8);
    --blueDarkOpacity5: rgba(0, 65, 112, 0.5);
    --blueDarkOpacity3: rgba(0, 65, 112, 0.3);
    --greenLight: #A2D3C6;
    --green: #009988;
    --greenDark: #005c51;
    --greenDarkOpacity6: rgba(0, 92, 81, 0.6);
    --redLight: #F9B2A0;
    --red: #E93C25;
    --redDark: #b90f00;
    --orangeLight: #F9D6C1;
    --orange: #E57C26;
    --orangeOpacity40: rgba(229, 124, 38, 0.4);
    --orangeDark: #b95909;
    --yellow: #E9AB20;
    --greyDarker: #A6A6A6;
    --greyDark: #C6C6C6;
    --greyMedium: #D8D8D8;
    --grey: #E6E6E6;
    --greyLight: #F6F6F6;
    --white: #FFFFFF;

    --highlightYellow: #fff598;
    --highlightGreen: #baffba;
    --highlightBlue: #bae1ff;
    --highlightRed: #ffb3ba;
    --highlightOrange: #ffdfba;

    /* Fonts */
    --futuraRegular: 'FuturaRegular', sans-serif;
    --futuraRegularOblique: 'FuturaRegularOblique', sans-serif;
    --futuraMedium: 'FuturaMedium', sans-serif;
    --futuraMediumOblique: 'FuturaMediumOblique', sans-serif;
    --futuraBold: 'FuturaBold', sans-serif;
    --futuraBoldOblique: 'FuturaBoldOblique', sans-serif;
    --neueRegular: 'NeueRegular', sans-serif;
    --neueBold: 'NeueBold', sans-serif;

    /* Font sizes */
    --xxxsmall: 8px;
    --xxsmall: 10px;
    --xsmall: 12px;
    --small: 14px;
    --normal: 16px;
    --medium: 20px;
    --large: 24px;
    --xlarge: 28px;
    --xxlarge: 32px;
    --xxxlarge: 36px;

    /* Spacing */
    --generalSpace: 24px;

    /* Border radius */
    --borderRadius: 6px;

    /* Shadows */
    --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);

    /* Transition */
    --transitionAll: all 0.2s ease-in-out;
}

/* Global styles */
textarea{
    scrollbar-width: auto;
}

html{
    background-color: var(--greyLight);
}

body {
    font-family: var(--neueRegular);
    color: var(--black);
    font-size: var(--normal);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p, a, li, span {
    font-family: var(--neueRegular);
}

em {
    color: inherit !important;
}

.futuraBold{ font-family: var(--futuraBold); }
.futuraBoldOblique{ font-family: var(--futuraBoldOblique); }
.futuraMedium{ font-family: var(--futuraMedium); }
.futuraMediumOblique{ font-family: var(--futuraMediumOblique); }
.futuraRegular{ font-family: var(--futuraRegular); }
.futuraRegularOblique{ font-family: var(--futuraRegularOblique); }
.neueBold{ font-family: var(--neueBold); }
.neueRegular{ font-family: var(--neueRegular); }

.fontXsmall{ font-size: var(--xsmall); }
.fontSmall{ font-size: var(--small); }
.fontNormal{ font-size: var(--normal); }
.fontMedium{ font-size: var(--medium); }
.fontLarge{ font-size: var(--large); }
.fontXLarge{ font-size: var(--xlarge); }
.fontXXLarge{ font-size: var(--xxlarge); }

.colorBlue{ color: var(--blue) !important; }
.colorBlueDark{ color: var(--blueDark) !important; }
.colorGreen{ color: var(--green) !important; }
.colorRed{ color: var(--red) !important; }
.colorOrange{ color: var(--orange) !important; }
.colorOrangeDark{ color: var(--orangeDark) !important; }
.colorYellow{ color: var(--yellow) !important; }
.colorGreyDarker{ color: var(--greyDarker) !important; }
.colorGreyDark{ color: var(--greyDark) !important; }
.colorGrey{ color: var(--grey) !important; }
.colorGreyLight{ color: var(--greyLight) !important; }
.colorWhite{ color: var(--white) !important; }

.bgBlue{ background-color: var(--blue); }
.bgBlueDark{ background-color: var(--blueDark); }
.bgGreen{ background-color: var(--green); }
.bgRed{ background-color: var(--red); }
.bgOrange{ background-color: var(--orange); }
.bgOrangeDark{ background-color: var(--orangeDark); }
.bgYellow{ background-color: var(--yellow); }
.bgGreyDark{ background-color: var(--greyDark); }
.bgGrey{ background-color: var(--grey); }
.bgGreyLight{ background-color: var(--greyLight); }
.bgWhite{ background-color: var(--white); }

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

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

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

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

.spinner {
    width: calc(var(--generalSpace) * 3);
    height: calc(var(--generalSpace) * 3);
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--orange) 94%, #0000) top/9px 9px no-repeat,
        conic-gradient(#0000 30%, var(--orange));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), var(--blueDark) 0);
    mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), var(--blueDark) 0);
    animation: spinner-c7wet2 1s infinite linear;
}

@keyframes spinner-c7wet2 {
    100% {
        transform: rotate(1turn);
    }
}

/* Custom select */
.custom-select {
    position: relative;
    width: 100%;
    font-family: sans-serif;
}

.select-box {
    border: 1px solid #ccc;
    padding: 6px 10px;
    cursor: pointer;
    user-select: none;
    background: white;
    border-radius: calc(var(--generalSpace) / 4);
}

.dropdown {
    position: absolute;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-top: none;
    background: white;
    display: none;
    z-index: 1000;
}

.dropdown input[type="text"] {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #ccc;
}

.option {
    padding: 5px 10px;
}

.option label {
    cursor: pointer;
}

.select-box.active+.dropdown {
    display: block;
}