@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./font/icons-outlined.woff2) format('woff2');
    font-display: swap;
}

/* libre-franklin-latin-200-normal */
@font-face {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-display: swap;
    font-weight: 200;
    src:
            url(./font/libre-franklin/libre-franklin-latin-200-normal.woff2) format('woff2'),
            url(./font/libre-franklin/libre-franklin-latin-200-normal.woff) format('woff');
}

/* libre-franklin-latin-200-normal */
@font-face {
    font-family: 'Libre Franklin';
    font-style: italic;
    font-display: swap;
    font-weight: 200;
    src:
            url(./font/libre-franklin/libre-franklin-latin-200-italic.woff2) format('woff2'),
            url(./font/libre-franklin/libre-franklin-latin-200-italic.woff) format('woff');
}

/* libre-franklin-latin-400-normal */
@font-face {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src:
            url(./font/libre-franklin/libre-franklin-latin-400-normal.woff2) format('woff2'),
            url(./font/libre-franklin/libre-franklin-latin-400-normal.woff) format('woff');
}

/* libre-franklin-latin-400-italic */
@font-face {
    font-family: 'Libre Franklin';
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src:
            url(./font/libre-franklin/libre-franklin-latin-400-italic.woff2) format('woff2'),
            url(./font/libre-franklin/libre-franklin-latin-400-italic.woff) format('woff');
}

/* libre-franklin-latin-700-normal */
@font-face {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src:
            url(./font/libre-franklin/libre-franklin-latin-700-normal.woff2) format('woff2'),
            url(./font/libre-franklin/libre-franklin-latin-700-italic.woff) format('woff');
}

/* libre-franklin-latin-700-normal */
@font-face {
    font-family: 'Libre Franklin';
    font-style: italic;
    font-display: swap;
    font-weight: 700;
    src:
            url(./font/libre-franklin/libre-franklin-latin-700-italic.woff2) format('woff2'),
            url(./font/libre-franklin/libre-franklin-latin-700-normal.woff) format('woff');
}

html,
body {

    margin: 0;
    padding: 0;
}

:root {
    --uic-primary: #07962f;

    --uic-primary-1: #ebffec;
    --uic-primary-2: #c2e4c3;
    --uic-primary-4: #99d4a0;
    --uic-primary-6: #6cbf7b;
    --uic-primary-8: #1EAD4A;

    --uic-primary-12: #007d25;
    --uic-primary-14: #00661e;
    --uic-primary-16: #004e19;
    --uic-primary-18: #003d12;

    --uic-secondary: #7C8FD8;
    --uic-secondary-1: #737ACC;
    --uic-secondary-2: #D1D3F1;
    --uic-secondary-4: #B4B9EB;
    --uic-secondary-6: #989FE5;
    --uic-secondary-8: #7D85DF;
    --uic-secondary-12: #656ECB;
    --uic-secondary-14: #545DB2;
    --uic-secondary-16: #444C98;
    --uic-secondary-18: #363D80;

    --uic-tertiary: var(--uic-grey-7);

    --uic-tertiary-2: #d4d4d4;
    --uic-tertiary-4: #b8b8b8;
    --uic-tertiary-6: #9c9c9c;
    --uic-tertiary-8: #808080;

    --uic-tertiary-12: #4f4f4f;
    --uic-tertiary-14: #3d3d3d;
    --uic-tertiary-16: #2c2c2c;
    --uic-tertiary-18: #1a1a1a;

    --uic-grey-0: #fff;
    --uic-grey-1: #f5f5f5;
    --uic-grey-2: #EEF1F6;
    --uic-grey-3: #e0e0e0;
    --uic-grey-5: #c0c0c0;
    --uic-grey-7: #a0a0a0;
    --uic-grey-9: #808080;
    --uic-grey-10: #666666;
    --uic-grey-11: #4f4f4f;
    --uic-grey-13: #333333;
    --uic-grey-15: #222222;
    --uic-grey-18: #181D25;
    --uic-grey-20: #000;

    --uic-font-family: 'Libre Franklin', Helvetica, Arial;
    --uic-text-color: var(--uic-grey-10);
    --uic-font-size: 14px;
    --uic-font-size-s: 12px;
    --uic-font-size-xs: 10px;
    --uic-font-size-m: 16px;
    --uic-font-size-l: 18px;
    --uic-font-light: 200;
    --uic-font-normal: 400;
    --uic-font-bold: 700;

    --uic-gap-xs: 4px;
    --uic-gap-s: 8px;
    --uic-gap-m: 16px;
    --uic-gap: var(--uic-gap-m);
    --uic-gap-l: 32px;

    --uic-radius-xs: 4px;
    --uic-radius-s: 8px;
    --uic-radius-m: 12px;
    --uic-radius: 16px;
    --uic-radius-l: 24px;

    --uic-warning: #E67207;

    --uic-warning-2: #FFF4EA;
    --uic-warning-6: #ffdbbc;
    --uic-warning-14: #c15c01;
    --uic-warning-18: #9a4b00;

    --uic-danger: #F2223B;

    --uic-danger-2: #FEEEF0;
    --uic-danger-4: #facdd2;
    --uic-danger-6: #f15b5b;
    --uic-danger-14: #c62828;
    --uic-danger-18: #b71c1c;

    --uic-success: #288B53;

    --uic-success-2: #EBF7F0;
    --uic-success-6: #D6F0E1;
    --uic-success-14: #005009;
    --uic-success-18: #186a3e;

    --uic-info: #2358AE;

    --uic-info-2: #EAF0FB;
    --uic-info-6: #D5E2F7;
    --uic-info-14: #1a4a9a;
    --uic-info-18: #103775;

    --uic-main-background: #fff;

    --uic-focus-indicator: 1px solid var(--uic-primary);

    --uic-ux-transition: 260ms ease-in-out;

    --uic-shadow: rgba(0, 0, 0, .15) 0 6px 8px -4px, rgba(0, 0, 0, .1) 0 20px 40px -8px, rgba(0, 0, 0, .2) 0px 10px 20px -12px;
    --uic-shadow-hover: rgba(0, 0, 0, .3) 0 6px 8px -4px, rgba(0, 0, 0, .2) 0 20px 40px -8px, rgba(0, 0, 0, .4) 0px 10px 20px -12px;

    --uic-layout-max-width: 1400px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        display: none;
    }
    1% {
        opacity: 0;
        display: block;
    }
    100% {
        opacity: 1;
        display: block;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        display: block;
    }
    99% {
        opacity: 0;
        display: block;
    }
    100% {
        opacity: 0;
        display: none;
    }
}