:root {
    --dxp-g-root-font-family: Epilogue, sans-serif;
    --dxp-g-heading-font-family: Epilogue, sans-serif;
    --dxp-g-root-contrast-1: rgb(0, 15, 96);
    --dxp-g-neutral-3: #001689;
    --bs-border-radius-xl: 20px;
    --bs-font-sans-serif: Epilogue, sans-serif;
    --bs-body-color: #001689;
    --bs-card-border-color: none;
    --bs-card-border-radius: 1.25rem;
    --bs-card-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    --btn-color: #001689;


    /* slds hook */
    --slds-c-select-color-border: #E0E7F4;
    --slds-c-input-color-border: #E0E7F4;
    --sds-c-select-color-border: #E0E7F4;
    --sds-c-input-color-border: #E0E7F4;
    --slds-c-card-sizing-border: 0;
    --slds-c-card-shadow: none;

    /* Market color */
    --color-ds: #004438;
    --color-bc: #630019;
    --color-ph: #014D57;
    --color-ah: #941B00;
    --color-pm: #33058D;
    --tile-ds: #C3F4CA;
    --tile-bc: #F8CCD7;
    --tile-ph: #C1F8FF;
    --tile-ah: #FFDEC0;
    --tile-pm: #E6E1FD;
    --tile-df: #EEF3FC;
    --back-bc: #FCE9EE;
    --back-ah: #FFF0E2;
    --back-pm: #F5F3FF;
    --back-ph: #E2FCFF;
    --back-ds: #EBFFEE;

    /* color : text, button and hover */
    --color-seppic: #001689;
    --color-hover: #4965FA;
    --color-seppic-pale: #C1E1FF;
    --color-grey: #8C93A2;
    --color-sample: #BF2553;
    --color-sample-hover: #E46189;
}

/*
 * START
 * Bootstrap styles override
 */

.btn-primary {
    --bs-btn-bg: var(--color-seppic);
    --bs-btn-border-color: var(--color-seppic);
}

.btn-outline-primary {
    --bs-btn-hover-bg: var(--color-seppic);
    --bs-btn-border-color: var(--color-seppic);
    --bs-btn-color: var(--color-seppic);
    --bs-btn-active-bg: var(--color-seppic);
}

/* 
 * END
 * Bootstrap styles override
 */

/* slds overwright */
.slds-form-element__label {
    text-transform: uppercase;
    color: #001689;
    font-family: Epilogue;
    font-size: 0.625rem;
    /* 0.625rem origin */
}

body {
    font-family: Epilogue;
    font-style: normal;
}

.size-max {
    max-width: 90rem;
    margin: auto;
}

/* TILES */

.tile {
    padding: 0.4375rem 0.5rem 0.28rem 0.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
    font-family: Epilogue;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-transform: uppercase;
}

.back-bc,
.tile-bc {
    background: var(--light-bc, #F8CCD7);
}

.back-ds,
.tile-ds {
    background: var(--light-ds, #C3F4CA);
}

.back-ph,
.tile-ph {
    background: var(--light-ph, #C1F8FF);
}

.back-ah,
.tile-ah {
    background: var(--light-ah, #FFDEC0);
}

.back-pm {
    background: var(--light-pm, #E6E1FD);
}

.tile-bc {
    color: var(--color-bc, #630019);
}

.tile-ds {
    color: var(--color-ds, #004438);
}

.tile-ph {
    color: var(--color-ph, #441170);
}

.tile-ah {
    color: var(--color-ah, #941B00);
}

.tile-pm {
    color: var(--color-pm, #33058D);
}

.badge-bc {
    background: var(--tile-bc, #F8CCD7);
    color: var(--color-bc, #630019);
}

.badge-ph {
    background: var(--tile-ph, #E6E1FD);
    color: var(--color-ph, #441170);
}

.badge-pm {
    background: var(--tile-pm, #E6E1FD);
    color: var(--color-pm, #33058D);
}

.badge-ah {
    background: var(--tile-ah, #FFF4CF);
    color: var(--color-ah, #74531B);
}

.badge-ds {
    background: var(--tile-ds, #C3F4CA);
    color: var(--color-ds, #004438);
}

.badge-corp {
    background: #C1E1FF;
    color: #001689;
}

/* BUTTONS */

.button-hidden {
    border: none;
    background-color: transparent;
}

.button-x-small {
    width: 1.125rem;
    height: 1.125rem;
    border: none;
    text-decoration: none;
}

.button-small {
    display: inline-flex;
    padding: 0.59375rem var(--spacing-10, 0.625rem);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-radius: 0.3125rem;
    border: none;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.button-reg {
    display: inline-flex;
    padding: 0.8rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.3125rem;
    border: none;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.button-link {
    color: #001689;
    background-color: #fff;
    display: inline-flex;
    padding: 0.4rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border: none;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.button-blue {
    background: var(--color-seppic, #001689);
    color: #FFF;
}

.button-sample {
    background: var(--color-sample, #BF2553);
    color: #FFF;
}

.button-white {
    background: #FFF;
    color: var(--color-seppic, #001689);
}

.button-white:hover:enabled,
.button-blue:hover:enabled {
    color: #FFF !important;
    background: var(--color-hover, #4965FA) !important;
    text-decoration: none !important;
}

.button-white:disabled {
    opacity: 0.3;
    text-decoration: none;
}

.button-blue:disabled {
    opacity: 0.3;
    background: var(--Primary-Primary, #001689);
    text-decoration: none;
}

.button-sample:hover {
    color: #FFF;
    background: var(--color-sample-hover, #E46189);
    text-decoration: none;
}

.button-link:hover {
    text-decoration: underline;
}

.profil-connection {
    background: #C1E1FF;
}

.max-title * {
    font-size: 4.0625rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 110% !important;
    /* 4.46875rem */
}

/* INPUT */

.field-form-label,
lightning-select label,
.field-form-label-account {
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 1rem */
    letter-spacing: 0.03125rem;
    text-transform: uppercase;
}

.seppic-input-field * input::placeholder {
    /* Body/x-Small/Regular */
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 1.4rem */
}

.input-required:after {
    content: " *";
    color: red;
    font-size: 1rem;
}

.isloading-account {
    background-color: white;
    width: 10rem;
    border: 1px solid #E0E7F4;
}

/* TEXT */
/* Desktop */
@media all and (min-width: 1200px) {
    .big {
        font-size: 4.0625rem !important;
        font-weight: 400 !important;
        line-height: 110% !important;
        /* 4.46875rem */
    }

    h1 {
        font-size: 3.125rem !important;
        font-weight: 400 !important;
        line-height: 120% !important;
        /* 3.75rem */
    }

    h2 {
        font-size: 2.5rem !important;
        font-weight: 400 !important;
        line-height: 120% !important;
        /* 3rem */
    }

    h3 {
        font-size: 1.875rem !important;
        font-weight: 500 !important;
        line-height: 140% !important;
        /* 2.625rem */
    }

    h4 {
        font-size: 1.5rem !important;
        font-weight: 500 !important;
        line-height: 140% !important;
        /* 2.1rem */
    }

    h5 {
        font-size: 1.25rem !important;
        font-weight: 500 !important;
        line-height: 140% !important;
        /* 1.75rem */
    }

    .text-xxx-small {
        font-size: 0.625rem;
        letter-spacing: 0.0375rem;
    }

    .text-xx-small {
        font-size: 0.75rem;
        letter-spacing: 0.0375rem;
    }

    .text-x-small {
        font-size: 0.875rem;
    }

    .text-small {
        font-size: 1rem;
    }

    .text-big {
        font-size: 1.125rem;
    }

    .text-max {
        font-size: 1.25rem;
    }
}

/* Tablet and small Desktop */
@media (min-width: 576px) and (max-width: 1200px) {
    .big {
        font-size: 4.0625rem;
        font-weight: 400;
        line-height: 110%;
        /* 4.46875rem */
    }

    h1 {
        font-size: 2.5rem !important;
        font-weight: 400 !important;
        line-height: 120% !important;
        /* 3.75rem */
    }

    h2 {
        font-size: 1.875rem !important;
        font-weight: 400 !important;
        line-height: 120% !important;
        /* 3rem */
    }

    h3 {
        font-size: 1.5rem !important;
        font-weight: 500 !important;
        line-height: 140% !important;
        /* 2.625rem */
    }

    h4 {
        font-size: 1.25rem !important;
        font-weight: 500 !important;
        line-height: 140% !important;
        /* 2.1rem */
    }

    h5 {
        font-size: 1rem !important;
        font-weight: 500 !important;
        line-height: 140% !important;
        /* 1.75rem */
    }

    .text-xxx-small {
        font-size: 0.625rem;
        letter-spacing: 0.0375rem;
    }

    .text-xx-small {
        font-size: 0.75rem;
        letter-spacing: 0.0375rem;
    }

    .text-x-small {
        font-size: 0.75rem;
    }

    .text-small {
        font-size: 0.875rem;
    }

    .text-big {
        font-size: 1rem;
    }

    .text-max {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .field-form-label-account {
        color: #193EFF !important;
    }
}

/* MOBILE only */

.text-seppic {
    color: var(--color-seppic, #001689) !important;
}

.text-grey {
    color: var(--color-grey, #8C93A2);
}

.text-white {
    color: #FFF;
}

.text-reg {
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 1.6rem */
}

.text-reg-slim {
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 1.6rem */
}

.text-med {
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    /* 1.6rem */
}

.text-bold {
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    /* 1.6rem */
}

.text-cap {
    text-transform: uppercase;
}

.text-column {
    color: #193EFF;
}

/* MOBILE TEXT */

.mobile-h2 {
    text-align: center;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 2.275rem */
}