@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, 0.15) 0 6px 8px -4px, rgba(0, 0, 0, 0.1) 0 20px 40px -8px, rgba(0, 0, 0, 0.2) 0px 10px 20px -12px;
    --uic-shadow-hover:
        rgba(0, 0, 0, 0.3) 0 6px 8px -4px, rgba(0, 0, 0, 0.2) 0 20px 40px -8px, rgba(0, 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;
    }
}