:root {
    /*Primary*/
    --rgb-primary-100: 231, 243, 255;
    --primary-100: #DBE4FE;
    --primary-200: #C0D1FD;
    --primary-300: #94B5FC;
    --primary-500: #3660F4;
    --primary-600: #2745E9;
    --primary-700: #1F32D6;
    --primary-800: #1F2989;
    /*Surface*/
    --surface-a: #FFFFFF;
    --surface-b: #EBF0FA;
    --surface-c: #D1DAEB;
    --surface-d: #B3BCCB;
    --surface-e: #939FB3;
    --surface-f: #80899C;
    --surface-g: #667285;
    --surface-j: #222D3E;
    --surface-i: #374156;
    --surface-j: #222D3E;
    --surface-k: #191E25;
    /*Danger*/
    --danger-300: #FF9DA9;
    --danger-400: #FF6477;
    --danger-500: #FF334C;
    --danger-600: #ED152F;
    --danger-700: #C80D24;
    /*Success*/
    --success-300: #64D3C5;
    --success-500: #2BA198;
    --success-700: #1D6864;
    /*Alert*/
    --alert-300: #C45E0A;
    /*Warning*/
    --warning-700: #C45E0A;
    /*Neutral*/
    --neutral-0: #FFFFFF;
    --neutral-50: #F2F6FA;
    --neutral-200: #C5CDDD;
    --neutral-400: #96A4C1;
    --neutral-500: #7E8FB3;
    --neutral-700: #57617A;
    --neutral-900: #303441;
    --neutral-950: #1D1E22;
    /*Ultramarine*/
    --ultramarine-500: #3660F4;
    /*Variables*/
    --header-height: 3rem;
    --subheader-height: 56px;
    /*Z-Index*/
    --z-index-tooltip: 1;
    --z-index-second-header: 500;
    --z-index-main-header: 550;
    --z-index-modal: 900;
    --z-index-loading: 1000;
}

/* Inter Variable Font - Déclaration pour utilisation avec Google Fonts */
/* Note: Le fichier de police sera chargé via le <link> dans _Layout.cshtml */

/* Fallback local Inter Regular uniquement */
@font-face {
    font-family: Inter;
    src: url(../fonts/Inter.eot);
    src: url(../fonts/Inter.eot?#iefix) format('embedded-opentype'),
         url(../fonts/Inter.woff) format('woff'),
         url(../fonts/Inter.ttf) format('truetype');
    font-weight: 400;  /* Regular uniquement */
    font-style: normal;
    font-display: swap;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
    line-height: normal!important;
}

* {
    scrollbar-color: var(--surface-f) var(--surface-a);
    scrollbar-width: thin !important
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.5;
}

h3 {
    font-size: 1.5rem!important;
    font-weight: 700!important;
}


.septeo-full-page-header {
    position: sticky;
    top: var(--header-height);
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    height: fit-content;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 0.1rem;
    margin-bottom: 1.5rem;
}

.septeo-simple-text {
    font-family: Inter, sans-serif;
    font-style: normal;
    font-size: 1rem;
    font-weight: 600;
    color: #222D3E;
    color: var(--surface-j);
    text-align: left;
}

.septeo-simple-text-2 {
    font-family: Inter, sans-serif;
    font-style: normal;
    font-size: 0.9rem;
    font-weight: 500;
    color: #222D3E;
    color: var(--surface-j);
    text-align: left;
}

.septeo-input, .septeo-dropdown, .septeo-textarea {
    width: 100%;
    height: 40px;
    border: 1px solid #C5CDDD;
    border: 1px solid var(--neutral-200);
    border-radius: 0.5rem;
    padding: 0.625rem 0.5rem 0.625rem 0.75rem;
    gap: 8px;
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    color: #1D1E22;
    color: var(--neutral-950);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}

.septeo-input::placeholder {
    font-weight: 500;
    font-size: 0.875rem;
    color: #57617A;
    color: var(--neutral-700);
}

.septeo-dropdown {
    padding: 0 0.5rem 0 0.75rem;
}

.septeo-header-bar-dropdown {
    background-color: #191E25 !important;
    background-color: var(--surface-k) !important;
    border: 2px solid #374156 !important;
    border: 2px solid var(--surface-i) !important;
    width: 255px !important;
}

.septeo-header-bar-dropdown .septeo-select-selected {
    color: #FFFFFF !important;
    color: var(--surface-a) !important;

}

.septeo-dropdown-borderless {
    padding-right: 1.5rem;
    width: 100%;
    border: none;
    text-align: end;
    font-size: 0.875rem;
    font-weight: 500;
    color: #222D3E;
    color: var(--surface-j);
    background-color: transparent;
}

.septeo-dropdown-borderless.septeo-select-focus {
    border: none!important;
}

.septeo-dropdown-borderless > .septeo-select-selected {
    padding-right: 0.5rem;
}


.septeo-dropdown-borderless:focus-visible {
    outline: none;
}


.septeo-dropdown-active-option > .septeo-select-selected {
    color: #222D3E!important;
    color: var(--surface-j) !important;
}


.septeo-input-fixed-size {
    width: 255px!important;
}

.septeo-input:hover, .septeo-dropdown:hover,
.septeo-textarea:hover, .septeo-check-input:hover {
    border-color: #939FB3;
    border-color: var(--surface-e);
}

.septeo-input:focus, .septeo-input:focus-visible,
.septeo-dropdown:focus, .septeo-dropdown:focus-visible,
.septeo-textarea :focus, .septeo-textarea:focus-visible,
.septeo-check-input:focus, .septeo-check-input:focus-visible {
    border: 2px solid #2D84F6 !important;
    border: 2px solid var(--primary-500) !important;
    outline: 0 none;
}

.septeo-input:disabled, .septeo-dropdown:disabled {
    color: #B3BCCB;
    color: var(--surface-d);
    border-color: #EBF0FA;
    border-color: var(--surface-b);
}

.septeo-textarea {
    min-height: 44px;
}

    .septeo-textarea:disabled, .septeo-check-input:disabled {
        color: #B3BCCB;
        color: var(--surface-d);
        border-color: #EBF0FA;
        border-color: var(--surface-b);
    }

.septeo-dropdown::before,
.septeo-dropdown::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 0.75rem;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.septeo-dropdown::before{
    background-image: url(../images/arrow.svg);
    opacity: 1;
}

.septeo-dropdown::after {
    background-image: url(../images/arrow_reverse.svg);
    opacity: 0;
}

.septeo-dropdown:focus::after, .septeo-select-focus::after {
    opacity: 1;
}

.septeo-dropdown:focus::before, .septeo-select-focus::before {
    opacity: 0;
}

.septeo-dropdown-borderless {
    background-position: right 0rem center;
}

.septeo-label {
    height: 15px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.septeo-label[disabled] {
    color: #B3BCCB;
    color: var(--surface-d);
}

.septeo-label-information {
    font-size: 1rem;
    color: #2D84F6;
    color: var(--primary-500);
    cursor: pointer;
}

.septeo-radio {
    display: block;
    min-height: 1.5rem;
    padding-left: 2.625rem;
    margin-bottom: 0.125rem;
}

.septeo-radio .septeo-radio-input {
    float: left;
    margin-left: -2.625rem;
    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}

.septeo-radio-input[type=radio] {
    border-radius: 50%;
}

.septeo-radio-input[type=radio]:checked {
    border: 4px solid #2D84F6 !important;
    border: 4px solid var(--primary-500) !important;
}
.septeo-radio-input[type=radio]:checked:disabled {
    border: 4px solid #BCD8FA !important;
    border: 4px solid var(--primary-200) !important;
}
.septeo-radio-input[type=radio]:checked:hover:not(:disabled) {
    border: 4px solid #1F5FAF !important;
    border: 4px solid var(--primary-700) !important;
}

.septeo-radio-input:hover:not(:disabled) {
    border: 1px solid #939FB3;
    border: 1px solid var(--surface-e);
}
.septeo-radio-input:focus {
    outline: 0 none;
    box-shadow: 0 0 0 0.25rem var(--primary-300);
}

.septeo-radio-input:disabled {
    border: 1px solid #FFFFFF;
    border: 1px solid var(--surface-a);
    background-color: #FFFFFF;
    background-color: var(--surface-a);
}

.septeo-radio-input {
    width: 1em;
    height: 1em;
    border-radius: 4px;
    margin-top: 0.30em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #D1DAEB;
    border: 1px solid var(--surface-c);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
}

.septeo-radio-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #222D3E;
    color: var(--surface-j);
}

.text-danger {
    color: #667285 !important;
    color: var(--surface-g) !important;
    border: 1px solid #F62D70 !important;
    border: 1px solid var(--danger-500) !important;
}

.septeo-check {
    display: block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1D1E22;
    color: var(--neutral-950);
    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}

/* Hide the default checkbox */
.septeo-check input[type=checkbox] {
    visibility: hidden;
}

/* Creating a custom checkbox
        based on demand */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    border-radius: 4px;
    border: 1px solid #D1DAEB;
    border: 1px solid var(--surface-c);
    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}

/* Specify the background color to be
        shown when hovering over checkbox */
.septeo-check:hover input ~ .checkmark {
    border: 1px solid #939FB3;
    border: 1px solid var(--surface-e);
}
.septeo-check input:disabled ~ .checkmark {
    border: 1px solid #D1DAEB;
    border: 1px solid var(--surface-c);
    background-color: #FFFFFF;
    background-color: var(--surface-a);
}
/*
.septeo-check input:focus ~ .checkmark {
    outline: 0 none;
    box-shadow: 0 0 0 0.25rem var(--primary-300);
}
    */
.septeo-check input.text-danger ~ .checkmark {
    color: #667285 !important;
    color: var(--surface-g) !important;
    border: 1px solid #F62D70 !important;
    border: 1px solid var(--danger-500) !important;
}

/* Specify the background color to be
        shown when checkbox is checked */
.septeo-check input:checked ~ .checkmark {
    background-color: #3660F4;
    background-color: var(--ultramarine-500);
    border: 1px solid #3660F4;
    border: 1px solid var(--ultramarine-500);
}
.septeo-check input:checked:hover ~ .checkmark {
    background-color: #1F5FAF;
    background-color: var(--primary-700);
    border: 1px solid #1F5FAF;
    border: 1px solid var(--primary-700);
}
.septeo-check input:checked:focus ~ .checkmark {
    outline: 0 none;
    box-shadow: 0 0 0 0.25rem var(--primary-300);
}
.septeo-check input:checked:disabled ~ .checkmark {
    background-color: #BCD8FA;
    background-color: var(--primary-200);
    border: 1px solid #BCD8FA;
    border: 1px solid var(--primary-200);
}

/* Checkmark to be shown in checkbox */
/* It is not be shown when not checked */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Display checkmark when checked */
.septeo-check input:checked ~ .checkmark:after {
    display: block;
}

/* Styling the checkmark using webkit */
/* Rotated the rectangle by 45 degree and 
        showing only two border to make it look
        like a tickmark */
.septeo-check .checkmark:after {
    left: 6px;
    bottom: 4.5px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.septeo-toggle {
    cursor: pointer;
    display: inline-block;
}

.septeo-toggle-switch {
    display: inline-block;
    background: #B3BCCB;
    background: var(--surface-d);
    border-radius: 1rem;
    width: 32px;
    height: 18px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

.septeo-toggle input.text-danger ~ .septeo-toggle-switch {
    color: #667285 !important;
    color: var(--surface-g) !important;
    box-shadow: 0 0 0 1px #F62D70 !important;
    box-shadow: 0 0 0 1px var(--danger-500) !important;
}

input:focus + .septeo-toggle-switch {
    outline: 0 none;
    box-shadow: 0 0 0 0.25rem #7FB3F7;
    box-shadow: 0 0 0 0.25rem var(--primary-300);
}

.septeo-toggle-switch:before, .septeo-toggle-switch:after {
    content: "";
}

.septeo-toggle-switch:before {
    display: block;
    background: #FFFFFF;
    background: var(--surface-a);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.25s;
}

.septeo-toggle:hover .septeo-toggle-switch:before {
}

.septeo-toggle-checkbox:checked + .septeo-toggle-switch {
    background: #2D84F6;
    background: var(--primary-500);
}

.septeo-toggle-checkbox:checked + .septeo-toggle-switch:before {
    left: 16px;
}
.septeo-toggle-checkbox:disabled + .septeo-toggle-switch {
    background: #7FB3F7;
    background: var(--primary-300);
}
.septeo-toggle-checkbox:disabled:not(:checked) + .septeo-toggle-switch {
    background: #D1DAEB;
    background: var(--surface-c);
}


.septeo-toggle-checkbox:checked:is(:hover):not(:disabled) + .septeo-toggle-switch {
    background: #1F5FAF;
    background: var(--primary-700);
}

.septeo-toggle-checkbox:hover:not(:disabled) + .septeo-toggle-switch {
    background: #939FB3;
    background: var(--surface-e);
}

.septeo-toggle-checkbox {
    position: fixed;
    visibility: hidden;
}

.septeo-toggle-label {
   font-size: 0.875rem;
   font-weight: 500;
   margin-left: 0.5rem;
}

.septeo-button {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: none;
    width: 100%;
    height: 40px;
    border-radius: 8px;
    padding: 0.5rem 0.5rem;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 21px;
    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}
    .septeo-button-small {
        line-height: 15px;
    }

    .septeo-button i {
        font-size: 1.25rem;
        font-weight: 400;
    }

.septeo-button-inline {
    display: inline-block!important;
    width: auto!important;
}

.septeo-button:disabled, .septeo-button-icon:disabled {
    background-color: #F2F6FA !important;
    background-color: var(--neutral-50) !important;
    color: #96A4C1 !important;
    color: var(--neutral-400) !important;
    cursor: default;
    border: none !important;
}

.septeo-success:hover {
    background-color: #1E806D;
    background-color: var(--success-700);
    color: #FFFFFF;
    color: var(--surface-a);
}

.septeo-success {
    background-color: #2BA198;
    background-color: var(--success-500);
    color: #FFFFFF;
    #FFFFFF;
    color: var(--surface-a);
}

.septeo-primary {
    background-color: #3660F4;
    background-color: var(--ultramarine-500);
    color: #FFFFFF;
    color: var(--surface-a);
}

    .septeo-primary:hover {
        background-color: #1F5FAF;
        background-color: var(--primary-700);
        color: #FFFFFF;
        color: var(--surface-a);
    }

.septeo-danger {
    background-color: #F62D70;
    background-color: var(--danger-500);
    color: #FFFFFF;
    color: var(--surface-a);
}

    .septeo-danger:hover {
        background-color: #ED152F;
        background-color: var(--danger-600);
        color: #FFFFFF;
        color: var(--surface-a);
    }

    .septeo-danger:focus {
        outline: 0 none;
        box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #3660F4 !important;
        box-shadow: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--danger-400) !important;
    }

.septeo-secondary {
    background-color: #FFFFFF;
    background-color: var(--neutral-0);
    border: 1px solid #C5CDDD;
    border: 1px solid var(--neutral-200);
    color: #303441;
    color: var(--neutral-900);
    font-weight: 500;
}

    .septeo-secondary:hover:not(:disabled) {
        background-color: #F2F6FA;
        background-color: var(--neutral-50);
        border: 1px solid #C5CDDD;
        border: 1px solid var(--neutral-200);
        color: #303441;
        color: var(--neutral-900);
    }

    .septeo-button:focus {
        outline: 0 none;
        box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0.25rem #3660F4;
        box-shadow: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--primary-500);
    }

.septeo-secondary i {
    color: #3660F4;
    color: var(--ultramarine-500);
}

.septeo-button-icon-large {
    display: flex;
    padding: 0.5rem;
    border: 2px solid #D1DAEB;
    border: 2px solid var(--surface-c);
    border-radius: 0.5rem;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.septeo-button-icon {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    width: 32px;
    height: 32px;
    border: none;
    font-weight: 400;
    border-radius: 4px !important;
    padding: 4px;
    gap: 8px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}

.septeo-icon-primary {
    background-color: #E7F3FF;
    background-color: var(--primary-100);
    color: #2D84F6;
    color: var(--primary-500);
}
.septeo-icon-primary:hover:not(:disabled) {
    background-color: #7FB3F7;
    background-color: var(--primary-300);
    color: #FFFFFF;
    color: var(--surface-a);
}
.septeo-icon-primary:focus, .septeo-icon-secondary:focus {
    outline: 0 none;
    box-shadow: 0 0 0 0.25rem var(--primary-200) !important;
    box-shadow: 0 0 0 0.25rem #BCD8FA;
}

.septeo-icon-danger {
    background-color: #F62D70;
    background-color: var(--danger-500);
    color: #FFFFFF;
    color: var(--surface-a);
}
    .septeo-icon-danger:hover:not(:disabled) {
        background-color: #AF1F4F;
        background-color: var(--danger-700);
        color: #FFFFFF;
        color: var(--surface-a);
    }
    .septeo-icon-danger:focus {
        outline: 0 none;
        box-shadow: 0 0 0 0.25rem #7FB3F7;
        box-shadow: 0 0 0 0.25rem var(--danger-300);
    }

.septeo-icon-secondary {
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    color: #80899C;
    color: var(--surface-f);
    border: 1px solid #D1DAEB;
    border: 1px solid var(--surface-c);
}

.septeo-badge
{
    position:relative;
}

    .septeo-badge i {
        position: absolute;
        font-size: 12px;
        top: -26px;
        right: -10px;
        color: #AF1F4F;
        color: var(--danger-700);
    }

.septeo-icon-secondary:hover:not(:disabled) {
    color: #222D3E!important;
    color: var(--surface-j) !important;
}

.septeo-input-icon-container {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 20px;
}

    .septeo-input-icon-container span {
        position: absolute;
        top: 0.625rem;
        right: 0.75rem;
        color: #1D1E22;
        color: var(--neutral-950);
        font-size: 1.25rem;
        pointer-events: none;
    }

.septeo-input-password-icon, .septeo-input-copy-icon i {
    cursor: pointer;
    pointer-events: auto !important;
}

    .septeo-input-password-icon i, .septeo-input-copy-icon i {
        pointer-events: none;
    }

    .septeo-input-icon-container:has(input:disabled) span {
        color: #B3BCCB !important;
        color: var(--surface-d) !important;
        cursor: default;
    }

.septeo-input-icon-container input {
    padding-right: 2.5rem;
}

.septeo-large-icon-danger {
    color: #AF1F4F;
    color: var(--danger-700);
}
.septeo-large-icon-success {
    color: #1E806D;
    color: var(--success-700);
}
.septeo-large-icon-danger, .septeo-large-icon-success {
    font-size: 1.75rem;
}


.septeo-breadcrumb-link-active {
    font-size: 16px;
    font-weight: 600;
    color: #222D3E;
    color: var(--surface-j);
    text-decoration: none;
    cursor: default;
}

.septeo-breadcrumb-link {
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-500) !important;
    color: var(--primary-500) !important;
    text-decoration: none;
    cursor: pointer !important;
}

.septeo-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: #3660F4;
    color: var(--ultramarine-500);
    text-decoration: none;
    cursor: pointer;
}

.septeo-link:hover {
    color: #1F5FAF;
    color: var(--primary-700);
}

.septeo-link.septeo-disabled, .septeo-link.septeo-disabled:hover {
    background-color: transparent !important;
}

.septeo-table-container {
    overflow-y: auto;
}

.septeo-table-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.septeo-table {
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
    position: relative;
    height: 1px;
    font-size: 0.75rem;
}

    .septeo-table tr {
        height: 100%;
        background-color: #FFFFFF;
        background-color: var(--surface-a);
        transition: background-color 0.5s;
    }

    .septeo-table th {
        background: #FFFFFF;
        background: var(--surface-a);
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #D1DAEB;
        border-bottom: 1px solid var(--surface-c);
        -webkit-user-select: none;
        user-select: none;
        font-weight: 600;
        color: #222D3E;
        color: var(--surface-j);
        transition: background 0.2s;
    }
.septeo-table th:hover {
    background: #EBF0FA;
    background: var(--surface-b);
}
.septeo-table th:first-child {
    border-radius: 0.75rem 0 0 0;
}
.septeo-table th:last-child {
    border-radius: 0 0.75rem 0 0;
}

.septeo-table td {
    overflow: hidden;
    white-space: nowrap; /* Don't forget this one */
    text-overflow: ellipsis;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #EBF0FA;
    border-bottom: 1px solid var(--surface-b);
}

.septeo-table tr:hover {
    background-color: #E7F3FF;
    background-color: var(--primary-100);
}
/*
.septeo-table tr td:first-child {
    border-radius: 0.75rem 0 0 0.75rem;
}
.septeo-table tr td:last-child {
    border-radius: 0 0.75rem 0.75rem 0;
}
*/
.septeo-table tr:hover td {
    
}
    .septeo-table tr .septeo-icon-primary {
        background-color: #E7F3FF;
        background-color: var(--primary-100);
        color: #2D84F6;
        color: var(--primary-500);
    }
        .septeo-table tr .septeo-icon-primary:hover {
            background-color: #BCD8FA;
            background-color: var(--primary-200);
        }
    .septeo-table tr:hover .septeo-icon-primary {
        background-color: #FFFFFF;
        background-color: var(--surface-a);
    }
    .septeo-table tr:hover .septeo-icon-primary:hover {
        background-color: #BCD8FA;
        background-color: var(--primary-200);
        color: #2D84F6;
        color: var(--primary-500);
    }
    .septeo-table tr:hover .septeo-icon-primary:focus {
        box-shadow: 0 0 0 0.25rem #7FB3F7 !important;
        box-shadow: 0 0 0 0.25rem var(--primary-300) !important;
    }

.septeo-table-action {
    text-align: end;
}
.septeo-table-action .septeo-button-icon:not(:first-of-type) {
    margin-left: 0.25rem;
}

.septeo-sub-row {
    display: none;
    background-color: rgba(100: 231, 243, 255, 0.3) !important;
    background-color: rgba(100: 231, 243, 255, 0.3) !important;
}

    .septeo-sub-row:hover {
        background-color: #E7F3FF !important;
        background-color: var(--primary-100) !important;
    }

.septeo-card {
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    min-width: 500px;
    flex: 0;
    flex-shrink: 0;
}

.septeo-card-header {
    padding: 1rem;
    border-bottom: 1px solid #EBF0FA;
    border-bottom: 1px solid var(--surface-b);
}

.septeo-card-body {
    padding: 1rem 1rem 1rem 1rem;
    font-weight: 400;
    font-size: 0.875rem;
}
.septeo-card-button {
    width: fit-content !important;
    float: right;
    margin-bottom: 2rem;
    min-width: 0;
}

.blazored-modal {
    max-width: 80%;
}

.septeo-pagination {
    display: flex;
    gap: 0.25rem;
}

.septeo-page-item {
    width: 2rem;
    line-height: 2rem;
    border-radius: 0.25rem;
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    text-align: center;
    text-decoration: none;
    color: #667285;
    color: var(--surface-g);
    cursor: pointer;
}

.septeo-page-item-text {
    line-height: 2rem;
    text-align: center;
    text-decoration: none;
    color: #667285;
    color: var(--surface-g);
}

.septeo-page-item:hover:not(.septeo-disabled) {
    background-color: #EBF0FA;
    background-color: var(--surface-b);
}
.septeo-page-item.active:not(.septeo-disabled) {
    background-color: #E7F3FF;
    background-color: var(--primary-100);
    color: #2672D3;
    color: var(--primary-600);
}
.septeo-page-item.septeo-disabled, .septeo-page-item.septeo-disabled:hover {
    background-color: #FFFFFF !important;
    background-color: var(--surface-a) !important;
    color: #B3BCCB !important;
    color: var(--surface-d) !important;
}
.septeo-page-item:focus:not(.septeo-disabled) {
    background-color: #E7F3FF;
    background-color: var(--primary-100);
    color: #2672D3;
    color: var(--primary-600);
    box-shadow: 0 0 0 0.25rem #7FB3F7 !important;
    box-shadow: 0 0 0 0.25rem var(--primary-300) !important;
}

.septeo-page-popup {
    position: relative;
    width: fit-content;
    padding: 0 1rem;
}

.septeo-page-select {
    visibility: hidden;
    width: 10rem;
    background-color: #EBF0FA;
    background-color: var(--surface-b);
    border: 1px solid #D1DAEB;
    border: 1px solid var(--surface-c);
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    position: absolute;
    z-index: 1;
    z-index: var(--z-index-tooltip);
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    display: flex;
    gap: 1rem;
}
/* Popup arrow */
    .septeo-page-select::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #D1DAEB transparent transparent transparent;
        border-color: var(--surface-c) transparent transparent transparent;
    }
.septeo-page-select .septeo-button-icon {
    width: 4rem;
    height: 2.5rem;
    margin-top: 0.35rem;
}

.septeo-tooltip-wrap {
    position: relative;
    display: inline-block;
}
    .septeo-tooltip-wrap .septeo-tooltip-content {
        display: block;
        width: 10rem;
        background-color: #EBF0FA;
        background-color: var(--surface-b);
        border: 1px solid #D1DAEB;
        border: 1px solid var(--surface-c);
        text-align: center;
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        position: absolute;
        z-index: 1;
        z-index: var(--z-index-tooltip);
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
        gap: 1rem;
    }

.septeo-tooltip-wrap:hover .septeo-tooltip-content {
    display: block;
}

.septeo-tooltip {
    --bs-tooltip-bg: var(--surface-j);
    --bs-tooltip-padding-x: 0.75rem;
    --bs-tooltip-padding-y: 0.75rem;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-font-size: 0.875rem;
}

/*Surcharge Bootstrap*/
.tooltip-inner {
    text-align: left !important;
    font-weight: 500!important;
    font-family: Inter!important;
    box-shadow: 0 .5rem 2rem -.5rem #174d8c;
}

.modal-body {
    font-size: 0.875rem;
}

.septeo-modal-lg {
    width: 60%!important;

}

.septeo-modal-container {
    position: fixed;
    z-index: 900;
    z-index: var(--z-index-modal);
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.septeo-modal-content {
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: auto;
    width: 30%;
}

.septeo-modal-header {
    padding: 1rem;
    border-bottom: 1px solid #EBF0FA;
    border-bottom: 1px solid var(--surface-b);
}

.septeo-modal-body {
    font-size: 0.875rem;
    padding: 1rem 1rem 1rem 1rem;
    font-weight: 400;
}
.septeo-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    font-size: 0.75rem;
    padding: 1rem 1rem 1rem 1rem;
}

.septeo-close {
    color: #80899C;
    color: var(--surface-f);
    text-align: end;
    font-size: 2rem;
    font-weight: 100;
    line-height: 1rem;
    padding-top: 0.2rem;
    cursor: pointer;
}

    .septeo-close:hover,
    .septeo-close:focus {
        color: #222D3E;
        color: var(--surface-j);
        text-decoration: none;
        cursor: pointer;
    }

.septeo-blazor-modal {
    background-color: red;
}

.septeo-toast-container {
    border-radius: 0.5rem;
    padding: 0.75rem;
    background-color: #222D3E;
    background-color: var(--surface-j);
}

.septeo-toast-icon-type, .septeo-toast-icon-close {
    font-size: 1.5rem;
    color: #80899C;
    color: var(--surface-f);
}
.septeo-toast-icon-close {
    cursor: pointer;
}
.septeo-toast-icon-type {
    line-height: 1.5rem;
}
.septeo-toast-title {
    font-size: 0.875rem;
    font-weight: 700;
    word-break: break-word;
}
.septeo-toast-message {
    font-size: 0.875rem;
    word-break: break-word;
}


.septeo-separator {
    border-top: 1px solid #EBF0FA;
    border-top: 1px solid var(--surface-b);
    padding-top: 1rem;
}

#septeo-scroll-up {
    position: fixed;
    bottom: 1rem;
    right: 0rem;
    opacity: 0;
}


    #septeo-scroll-up a {
        font-size: 3rem;
        color: #2D84F6;
        color: var(--primary-500);
    }


/* =========================== HEADERS =========================== */

.septeo-content-header {
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    padding: 1rem;
    position: sticky;
    height: 56px;
    height: var(--subheader-height);
    z-index: 500;
    z-index: var(--z-index-second-header);
    top: var(--header-height);
    transition: box-shadow 0.3s ease-in-out;
}

.scroll-shadow {
    box-shadow: 0 25px 30px 0 #191E251A, /* #191E25 à 10% d'opacité */
    0 0 20px 0 #191E2510, /* #191E25 à 6% d'opacité */
    0 0 1px 1px #191E250A;
}

.septeo-content-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 24px;
    color: #222D3E;
    color: var(--surface-j);
}

.septeo-header-bar {
    position: fixed;
    height: 3rem;
    height: var(--header-height);
    width: 100%;
    padding: 0.5rem;
    background-color: #191E25;
    background-color: var(--surface-k);
    z-index: 550;
    z-index: var(--z-index-main-header);
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.septeo-header-bar-end-container {
    margin-left: auto;
    display: flex;
    align-items: center;


}

.septeo-header-bar-icon {
    width: 32px;
    height: 32px;
}

.septeo-header-bar-title {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: #FFFFFF;
    color: var(--surface-a);
    font-weight: 600;
}

.septeo-body {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.septeo-content {
    flex-grow: 1;
    margin-left: 242px;
    top: var(--header-height);
    position: relative;
}

.septeo-content-div-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    width: 100%;
    flex-direction: column;
}

.septeo-content-headerless {
    width: 100%;
}

.septeo-content-headerless > .septeo-content-header {
    top: 0;
}

.septeo-container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(1.5* .5);
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(1.5* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
    height: calc(100vh - 3rem - 2rem - 56px);
    height: calc(100vh - var(--header-height) - 2rem - var(--subheader-height));
    display: flex;
    flex-direction: column;
}

/* =========================== CUSTOM DROPDOWN =========================== */

/* The container must be positioned relative: */
.septeo-select {
    position: relative;
    font-family: Inter, sans-serif;
    cursor: pointer;
}

    .septeo-select select {
        display: none; /*hide original SELECT element: */
    }

.septeo-select-focus {
    border: 2px solid #2D84F6 !important;
    border: 2px solid var(--primary-500) !important;
    outline: 0 none; /* Couleur de la bordure lorsque la div enfant a la classe active */
}

/* Point the arrow upwards when the select box is open (active): */
.septeo-select-selected.septeo-select-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}

/* style the items (options), including the selected item: */
.septeo-select-selected {
    color: #667285;
    color: var(--surface-g);
    font-size: 0.875rem;
    padding: 0.5rem 0;
    cursor: pointer;
    padding: 0.5rem 1.75rem 0.5rem 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 21px;
}

/* Style items (options): */
.septeo-select-items {
    border: .0625rem solid #D1DAEB;
    border: .0625rem solid var(--surface-c);
    box-shadow: 0 .5rem 2rem -.5rem #174D8C;
    box-shadow: 0 .5rem 2rem -.5rem var(--primary-800);
    color: #667285 !important;
    color: var(--surface-g) !important;
    font-size: 0.875rem;
    position: absolute;
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    border-radius: 0.5rem;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    margin-top: 2px;
    max-height: 200px;
    overflow: auto;
}

    .septeo-select-items div {
        transition: background-color 0.5s;
        padding: 0.2rem 0.5rem;
        cursor: pointer;
    }

/* Hide the items when the select box is closed: */
.select-hide {
    display: none;
}

.septeo-select-items div:not(.same-as-selected):hover {
    color: #222D3E !important;
    color: var(--surface-j) !important;
    background-color: #EBF0FA !important;
    background-color: var(--surface-b) !important;
}

.septeo-select-items div:first-child {
    border-radius: 0.5rem 0.5rem 0 0;
}

.septeo-select-items div:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
}

.same-as-selected {
    color: #2D84F6;
    color: var(--primary-500);
}




/* =========================== CARD LIST =========================== */

.septeo-card-list {
    width: 100%;
    background-color: #EBF0FA;
    background-color: var(--surface-b);
    border-radius: 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .septeo-card-list thead {
        position: sticky;
        top: 0px;
        z-index: 500;
        z-index: var(--z-index-second-header);
        box-shadow: 0 -1px 0 0 #EBF0FA, /* Top border */
        1px 0 0 0 #EBF0FA, /* Right border */
        0 0.5px 0 0 #EBF0FA, /* Bottom border */
        -1px 0 0 0 #EBF0FA; /* Left border */
        box-shadow: 0 -1px 0 0 var(--surface-b), /* Top border */
        1px 0 0 0 var(--surface-b), /* Right border */
        0 0.5px 0 0 var(--surface-b), /* Bottom border */
        -1px 0 0 0 var(--surface-b); /* Left border */
    }

.septeo-card-list > div:first-child {
    border-radius: 0.5rem 0.5rem 0 0;
}

.septeo-card-list-search {
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    height: 64px;
    padding: 0.875rem;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.septeo-card-list-title {
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    padding: 0.875rem;
    border-bottom: 1px solid #EBF0FA;
    border-bottom: 1px solid var(--surface-b);
    font-weight: 600;
}

.septeo-card-list-header {
    height: 41px;
    width: 100%;
    background-color: #F7F9FD;
}
    .septeo-card-list-header > tr > th {
        font-weight: 500;
        font-size: 0.875rem;
        color: #667285;
        color: var(--surface-g);
        padding: 0.75rem;
        border: 1px solid #EBF0FA;
        border: 1px solid var(--surface-b);
        border-left: none;
        border-right: none;
    }

.septeo-card-list-body > tr {
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    border: 1px solid #EBF0FA;
    border: 1px solid var(--surface-b);
    border-left: none;
    border-right: none;
    transition: background-color 0.5s;
}

    .septeo-card-list-body > tr > td {
        height: 48px;
        padding: 0 0.75rem;
        font-weight: 500;
        font-size: 0.875rem;
        color: #222D3E;
        color: var(--surface-j);
    }

.septeo-card-list-body > tr:hover {
    background-color: #F7F9FD;
}

.septeo-card-list-body > tr:last-child > td:first-child {
    /*border-radius: 0 0 0 0.5rem;*/
}
.septeo-card-list-body > tr:last-child > td:last-child {
    /*border-radius: 0 0 0.5rem 0;*/
}

.septeo-card-list-table {
    width: 100%;
}

.septeo-card-list-footer {
    background: #FFFFFF;
    background: var(--surface-a);
    padding: 0.5rem 1rem;
    border-top: 1px solid #EBF0FA;
    border-top: 1px solid var(--surface-b);
    margin-top: -1px;
}

/* =========================== NAVMENU =========================== */
.septeo-sidebar {
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    top: var(--header-height);
    top: var(--header-height);
    width: 240px;
    flex-shrink: 0;
    position: fixed;
    height: calc(100% - 3rem);
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
}

.septeo-version {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.75rem;
    width: 100%;
    height: 100%;
    font-weight: 500;
    font-size: 0.875rem; 
}

.septeo-navmenu {
    margin: 1.25rem;
}

.septeo-nav-item-container {
    text-decoration: none;
    cursor: pointer;
}

.septeo-nav-item {
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}

.septeo-nav-item:hover, .active > .septeo-nav-item {
    background-color: #E7F3FF;
    background-color: var(--primary-100);
}

.septeo-nav-item-icon {
    font-size: 1.25rem;
    color: #222D3E;
    color: var(--surface-j);
}

.septeo-nav-item:hover > .septeo-nav-item-icon, .active > .septeo-nav-item > .septeo-nav-item-icon {
    color: #2D84F6;
    color: var(--primary-500);
}

.septeo-nav-item-text {
    margin-left: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #222D3E;
    color: var(--surface-j);
}

.septeo-nav-sub-item-container {
    margin-left: 40px;
}

.septeo-nav-sub-item {
    font-weight: 500;
    font-size: 0.875rem;
    color: #222D3E;
    color: var(--surface-j);
    text-decoration: none;
}

.septeo-nav-item-arrow {
    font-size: 1.25rem;
    color: #222D3E;
    color: var(--surface-j);
    margin-left: auto;
    transition: transform .35s ease;
}

.septeo-nav-item-container[aria-expanded="true"] .septeo-nav-item-arrow {
    transform: rotate(180deg);
}

/* =========================== OTHERS =========================== */
.invalid {
    outline: none !important;
    border: 1px solid#F62D70 !important;
    border: 1px solid var(--danger-500) !important;
    border-color: #F62D70 !important;
    border-color: var(--danger-500) !important;
}

.validation-message {
    background-color: #222D3E !important;
    background-color: var(--surface-j) !important;
    border-radius: 0.25rem;
    color: #FFFFFF;
    color: var(--surface-a);
    font-weight: 400;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin-top: 0.25rem;
}

.valid.modified {
    outline: none!important;
}

.septeo-icon-info {
    cursor: pointer;
}

/* =========================== UTILS =========================== */

#loading-message {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    z-index: var(--z-index-loading);
    background-color: #FFFFFF;
    background-color: var(--surface-a);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.septeo-disabled, .septeo-disabled:hover {
    cursor: default;
    background-color: #D1DAEB !important;
    background-color: var(--surface-c) !important;
    color: #939FB3 !important;
    color: var(--surface-e) !important;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.ml-4 {
    margin-left: 1rem;
}

.ml-5 {
    margin-left: 1.25rem;
}

.ml-6 {
    margin-left: 1.5rem;
}

.ml-7 {
    margin-left: 1.75rem;
}

.ml-8 {
    margin-left: 2rem;
}

.fs-125 {
    font-size: 1.25rem!important;
}

.fs-100 {
    font-size: 1rem!important;
}

.fs-87 {
    font-size: 0.875rem!important;
}

.fs-75 {
    font-size: 0.75rem!important;
}

.fw-500 {
    font-weight: 500!important;
}

.fw-600 {
    font-weight: 600!important;
}

.mb-35 {
    margin-bottom: 1.25rem;
}

.mt-25 {
    margin-top: 0.75rem;
}

.septeo-visibility {
    visibility: visible;
    animation: fadeIn 0.5s;
}

.septeo-text-weight {
    font-weight: 300;
}

.blazored-modal {
    padding: 0!important;
}

.alert {
    font-size: 0.875rem;
}
.septeo-color-success {
    color: #2BA198 !important;
    color: var(--success-500) !important;
}
.septeo-color-info {
    color: #7FB3F7 !important;
    color: var(--primary-300) !important;
}
.septeo-color-alert {
    color: #C45E0A !important;
    color: var(--alert-300) !important;
}
.septeo-color-error {
    color: #F77FA7 !important;
    color: var(--danger-500) !important;
}

.septeo-color-neutral {
    color: #7E8FB3!important;
    color: var(--neutral-500)!important;
}

.cursor-pointer {
    cursor: pointer;
}

.flex-v-center {
    display: flex;
    align-items: center;
}

.capitalize {
    text-transform: capitalize;
}

/* =========================== ANIMATIONS =========================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================== Blazored =========================== */
.bm-container {
    z-index: 900 !important;
    z-index: var(--z-index-modal) !important;
}

.blazored-toast {
    background-color: transparent!important;
}

/* =========================== List HTML =========================== */

.septeo-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}