@font-face {
    font-family: SourceSans3-Italic;
    src: url(./fonts/SourceSans3-Italic.ttf);
}

@font-face {
    font-family: SourceSans3-Regular;
    src: url(./fonts/SourceSans3-Regular.ttf);
}

@font-face {
    font-family: SourceSans3-SemiBold;
    src: url(./fonts/SourceSans3-SemiBold.ttf);
}

@font-face {
    font-family: SourceSans3-SemiBoldItalic;
    src: url(./fonts/SourceSans3-SemiBoldItalic.ttf);
}


body {
    font-family: SourceSans3-Regular;
    font-size: 18px;
}

:root {
    --DarkBlue600: #202849;
    --DarkBlue500: #2A3460;
    --DarkBlue400: #334075;
    --DarkBlue300: #415295;
    --DarkBlue200: #4E62B1;
    --Orange900: #372101;
    --Orange600: #FAA329;
    --Oragne300: #FBB24C;
    --Orange100: #FAF4EB;
    --Bright150: #DFE3F1;
    --Bright100: #EAECF6;
    --Bright50: #F4F6FA;
    --Bright10: #FFFFFF;
    --RoyalBlue600: #0062E0;
    --RoyalBlue400: #147BFF;
    --RoyalBlue300: #4798FF;
    --Green600: #2E7A44;
    --Green400: #BCE6C8;
    --Green200: #DEF2E4;
    --Red600: #B4382D;
    --Red400: #EDBAB6;
    --Red200: #F6DDDA;
    --Purple600: #5745BA;
    --Purple400: #C3BCE6;
    --Purple200: #E1DDF3;
    --Yellow600: #816803;
    --Yellow400: #FDEBA5;
    --Yellow200: #FEF5D2;
    --Gray1300: #000000;
    --Gray1200: #141414;
    --Gray1100: #1F1F1F;
    --Gray1000: #262626;
    --Gray900: #434343;
    --Gray800: #595959;
    --Gray700: #8C8C8C;
    --Gray600: #BFBFBF;
    --Gray500: #D9D9D9;
    --Gray400: #F0F0F0;
    --Gray300: #F5F5F5;
    --Gray200: #FAFAFA;
    --Gray100: #FFFFFF;
}

/* mobile */
@media only screen and (max-width:768px) {
    :root {
        --radius-xxl: 32px;
        --radius-l: 8px;
        --spacer-xxxxl: 48px;
        --spacer-xxxl: 32px;
        --spacer-xxl: 28px;
        --spacer-xl: 24px;
        --spacer-l: 20px;
        --spacer-m: 16px;
        --spacer-s: 12px;
        --spacer-xs: 8px;
        --spacer-xxs: 4px;
    }
}

/* desktop */
@media only screen and (min-width:768px) {
    :root {
        --radius-xxl: 64px;
        --radius-l: 8px;
        --spacer-xxxxl: 96px;
        --spacer-xxxl: 64px;
        --spacer-xxl: 48px;
        --spacer-xl: 32px;
        --spacer-l: 24px;
        --spacer-m: 16px;
        --spacer-s: 12px;
        --spacer-xs: 8px;
        --spacer-xxs: 4px;
    }
}

/* radius */
.radius-xxl {
    border-radius: var(--radius-xxl);
}

.radius-l {
    border-radius: var(--radius-l);
}

/* spacers */
.spacer-xxxxl {
    margin: var(--spacer-xxxxl) 0;
}

.spacer-xxxl {
    margin: var(--spacer-xxxl) 0;
}

.spacer-xxl {
    margin: var(--spacer-xxl) 0;
}

.spacer-xl {
    margin: var(--spacer-xl) 0;
}

.spacer-l {
    margin: var(--spacer-l) 0;
}

.spacer-m {
    margin: var(--spacer-m) 0;
}

.spacer-s {
    margin: var(--spacer-s) 0;
}

.spacer-xs {
    margin: var(--spacer-xs) 0;
}

.spacer-xss {
    margin: var(--spacer-xss) 0;
}


/* surface */
.surface-primary {
    background-color: var(--Bright100);
}

.surface-bright {
    background-color: var(--Bright10);
}

.surface-silver {
    background-color: var(--Bright150);
}

.surface-secondary {
    background-color: var(--DarkBlue600);
}

.surface-onSecondary {
    background-color: var(--DarkBlue500);
}

.surface-contrast {
    background-color: var(--Orange600);
}

.surface-onContrast {
    background-color: var(--Oragne300);
}

.surface-neutral {
    background-color: var(--Gray300);
}

.surface-onNeutral {
    background-color: var(--Gray100);
}

.surface-success {
    background-color: var(--Green200);
}

.surface-alert {
    background-color: var(--Red200);
}

.surface-help {
    background-color: var(--Purple200);
}

.surface-warning {
    background-color: var(--Yellow200);
}

/* buttons */
.btn-contrast {
    background-color: var(--Orange600);
    color: var(--Orange900);
    text-align: center;
    border-radius: var(--radius-l);
    font-family: SourceSans3-SemiBold;
    font-size: 16px;
}

    .btn-contrast:hover {
        background-color: var(--Oragne300);
        font-family: SourceSans3-SemiBold;
    }

.btn-dark-blue {
    background-color: var(--DarkBlue600);
    color: var(--Bright100);
    text-align: center;
    border-radius: var(--radius-l);
    font-family: SourceSans3-SemiBold;
}

    .btn-dark-blue:hover {
        color: var(--Bright100);
        background-color: var(--DarkBlue400);
        font-family: SourceSans3-SemiBold;
    }

.btn-dark-blue-ghost {
    color: var(--DarkBlue500);
    text-align: center;
    border: 2px solid var(--DarkBlue600);
    border-radius: var(--radius-l);
    font-family: SourceSans3-SemiBold;
    background-color: transparent;
    font-size: 16px;
}

    .btn-contrast:focus-visible,
    .btn-dark-blue-ghost:focus-visible,
    .btn-dark-blue:focus-visible {
        border-radius: 12px;
        border: 2px solid var(--border-focus, #5745BA);
        font-family: SourceSans3-SemiBold;
    }

.btn-royalblue {
    background-color: var(--RoyalBlue600);
}

    .btn-royalblue:hover {
        background-color: var(--RoyalBlue400);
    }

.btn-silver {
    background-color: var(--Bright150);
}

    .btn-silver:hover {
        background-color: var(--DarkBlue600);
    }

.btn-bright {
    background-color: var(--Bright10);
}

.input-default {
    color: var(--Bright100);
}

    .input-default:hover {
        color: var(--Bright150);
    }

.input-active {
    color: var(--Bright150);
}

.input-disabled {
    color: var(--Bright100);
}

.input-alert {
    color: var(--Red200);
}

.text-primary {
    color: var(--DarkBlue600);
}

.text-secondary {
    color: var(--Bright100);
}

.text-onContrast {
    color: var(--Orange900);
}

.text-contrast {
    color: var(--Orange600);
}

.text-onSuccess {
    color: var(--Green600);
}

.text-onAlert {
    color: var(--Red600);
}

.text-onHelp {
    color: var(--Purple600);
}

.text-onWarning {
    color: var(--Yellow600);
}

.text-neutralDark {
    color: var(--Gray1300);
}

.text-neutralBright {
    color: var(--Gray100);
}

.text.royalBlue {
    color: var(--RoyalBlue600);
}

.border-primary {
    border-color: var(--DarkBlue600);
}

.border-secondary {
    border-color: var(--Bright150);
}

.border-tertiary {
    border-color: var(--RoyalBlue600);
}

.border-success {
    border-color: var(--Green400);
}

.border-alert {
    border-color: var(--Red400);
}

.borde-help {
    border-color: var(--Purple400);
}

.border-warning {
    border-color: var(--Yellow400);
}

.border-focus {
    border-color: var(--Purple600);
}

.border-neutral {
    border-color: var(--Gray500);
}

.btn-border-contrast {
    border-color: var(--Orange600);
}

    .btn-border-contrast:hover {
        border-color: var(--Oragne300);
    }

.btn-border-darkblue {
    border-color: var(--DarkBlue600);
}

    .btn-border-darkblue:hover {
        border-color: var(--DarkBlue400);
    }

.btn-border-royalBlue {
    border-color: var(--RoyalBlue600);
}

    .btn-border-royalBlue:hover {
        border-color: var(--RoyalBlue300);
    }

.icon-primary {
    color: var(--DarkBlue600);
}

.icon-secondary {
    color: var(--Bright100);
}

.icon-royalBlue {
    color: var(--RoyalBlue600);
}

.icon-neutralDark {
    color: var(--Gray1300);
}

.icon-onContrast {
    color: var(--Orange900);
}

.icon-onSuccess {
    color: var(--Green600);
}

.icon-onAlert {
    color: var(--Red600);
}

.icon-onHelp {
    color: var(--Purple600);
}

.icon-onWarning {
    color: var(--Yellow600);
}

input[readonly] {
    cursor: default !important;
}

.input-group input {
    background-color: var(--Bright100) !important;
    color: var(--DarkBlue500);
    border-color: transparent;
    border-radius: 0px 8px 8px 0px;
}

    .input-group input:hover {
        background-color: var(--Bright150) !important;
        color: var(--DarkBlue500) !important;
        border-radius: 0px 8px 8px 0px;
    }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill::first-line {
    background-color: var(--Bright100) !important;
    border-radius: 8px;
    border-color: transparent;
    height: 48px;
    font-size: 18px;
    -webkit-text-fill-color: var(--DarkBlue500) !important;
    -webkit-box-shadow: none;
}

input::placeholder {
    color: #202849;
    opacity: 0.5;
}

.input-box {
    background-color: var(--Bright100);
    color: var(--DarkBlue500);
    border-radius: 8px;
    border-color: transparent;
    font-family: SourceSans3-Regular;
    height: 48px;
    font-size: 18px;
    box-shadow: none;
}

    .input-box:hover {
        background-color: var(--Bright150) !important;
        color: var(--DarkBlue500) !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        border-color: #202849 !important;
    }

    .input-box:focus {
        background-color: #DFE3F1 !important;
        border: 2px solid #0062E0 !important;
        border-radius: 8px !important;
        color: #202849 !important;
        box-shadow: none !important;
        border-color: #202849 !important;
    }

.input-box-Validation {
    color: var(--DarkBlue500);
}

.input-box-disabled {
    background-color: var(--Bright100);
    color: var(--DarkBlue500);
    border-radius: 8px;
    opacity: 40%;
}

.input-box-error {
    background-color: var(--Red200);
    color: var(--Red600);
    border-radius: 8px;
    border-color: var(--Red400);
}


.input-boxF {
    border-color: transparent !important;
    box-shadow: none;
    height: 48px;
    font-size: 18px;
}

    .input-boxF:hover {
        background-color: var(--Bright150) !important;
        color: var(--DarkBlue500) !important;
        box-shadow: none;
        border-color: transparent !important;
    }

    .input-boxF:focus {
        background-color: #DFE3F1 !important;
        border: 2px solid #202849 !important;
        color: #202849 !important;
        box-shadow: none;
    }

.form-background {
    background-color: var(--Bright100);
}

.dropdownF {
    background-color: var(--Bright100);
    color: var(--DarkBlue500);
    border-radius: 8px;
    height: 48px;
}

    .dropdownF:focus {
        box-shadow: none !important;
        border-color: #202849 !important;
    }

.dropdown-item {
    background-color: var(--Bright100);
    color: var(--DarkBlue500);
}

h1 {
    font-family: SourceSans3-SemiBold;
    font-size: 38px;
    line-height: 46px;
    font-weight: 600;
    margin: 5px 0 !important;
}

h2 {
    font-family: SourceSans3-SemiBold;
    font-size: 30px;
    line-height: 38px;
    font-weight: 600;
    margin: 5px 0 !important;
}

h3 {
    font-family: SourceSans3-Regular;
    font-size: 30px;
    line-height: 32px;
    font-weight: 600;
    margin: 5px 0 !important;
}


h4 {
    font-family: SourceSans3-SemiBold;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    /*margin: 5px 0 !important;*/
}


h5 {
    font-family: SourceSans3-SemiBold;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    margin: 5px 0 !important;
}

.XL {
    font-family: SourceSans3-Regular;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
}

.L {
    font-family: SourceSans3-Regular;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.S {
    font-family: SourceSans3-Regular;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

.XS {
    font-family: SourceSans3-Regular;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
}




.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.m-4 {
    margin: 1.5rem !important
}

.m-5 {
    margin: 3rem !important
}

.m-auto {
    margin: auto !important
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.p-5 {
    padding: 3rem !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: .25rem !important
}

.pt-2 {
    padding-top: .5rem !important
}

.pt-3 {
    padding-top: 1rem !important
}

.pt-4 {
    padding-top: 1.5rem !important
}

.pt-5 {
    padding-top: 3rem !important
}

.pe-0 {
    padding-right: 0 !important
}

.pe-1 {
    padding-right: .25rem !important
}

.pe-2 {
    padding-right: .5rem !important
}

.pe-3 {
    padding-right: 1rem !important
}

.pe-4 {
    padding-right: 1.5rem !important
}

.pe-5 {
    padding-right: 3rem !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .25rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.pb-3 {
    padding-bottom: 1rem !important
}

.pb-4 {
    padding-bottom: 1.5rem !important
}

.pb-5 {
    padding-bottom: 3rem !important
}

.ps-0 {
    padding-left: 0 !important
}

.ps-1 {
    padding-left: .25rem !important
}

.ps-2 {
    padding-left: .5rem !important
}

.ps-3 {
    padding-left: 1rem !important
}

.ps-4 {
    padding-left: 1.5rem !important
}

.ps-5 {
    padding-left: 3rem !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mt-4 {
    margin-top: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.mt-auto {
    margin-top: auto !important
}

.me-0 {
    margin-right: 0 !important
}

.me-1 {
    margin-right: .25rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.me-4 {
    margin-right: 1.5rem !important
}

.me-5 {
    margin-right: 3rem !important
}

.me-6 {
    margin-right: 6rem !important
}

.me-auto {
    margin-right: auto !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.mb-auto {
    margin-bottom: auto !important
}

.ms-0 {
    margin-left: 0 !important
}

.ms-1 {
    margin-left: .25rem !important
}

.ms-2 {
    margin-left: .5rem !important
}

.ms-3 {
    margin-left: 1rem !important
}

.ms-4 {
    margin-left: 1.5rem !important
}

.ms-5 {
    margin-left: 3rem !important
}

.ms-auto {
    margin-left: auto !important
}

.w-25 {
    width: 25% !important
}

.w-50 {
    width: 50% !important
}

.w-75 {
    width: 75% !important
}

.w-100 {
    width: 100% !important
}

.justify-content-around {
    justify-content: space-around !important
}

.d-flex {
    display: flex !important
}

.justify-content-start {
    justify-content: flex-start !important
}

.justify-content-center {
    justify-content: center !important
}

.justify-content-between {
    justify-content: space-between !important
}

.flex-row {
    flex-direction: row !important
}

.flex-column {
    flex-direction: column !important
}

.justify-content-between {
    justify-content: space-between !important
}

.justify-content-start {
    justify-content: flex-start !important
}

.justify-content-end {
    justify-content: flex-end !important
}

.justify-content-evenly {
    justify-content: space-evenly !important
}

.align-content-start {
    align-content: flex-start !important
}

.align-content-end {
    align-content: flex-end !important
}

.align-content-center {
    align-content: center !important
}

.align-content-between {
    align-content: space-between !important
}

.align-content-around {
    align-content: space-around !important
}

.align-content-stretch {
    align-content: stretch !important
}