:root {
    --XXS: 0px;
    --XS: 2px;
    --S: 4px;
    --M: 8px;
    --L: 16px;
    --XL: 24px;
    --XXL: 32px;
    --XXXL: 40px;
    --XXXXL: 48px;
    --surface-Primary-surface-primary-dark-main: #2B4DFE;
    --surface-Primary-surface-primary-dark-hover: #0123D4;
    --surface-Primary-surface-primary-dark-pressed: #01157F;
    --surface-surface-disable-main: #F3F4F8;
    --border-Primary-border-primary: #8094FE;
    --text-Primary-text-primary-main: #2B4DFE;
    --text-Primary-text-primary-hover: #0123D4;
    --text-Primary-text-primary-pressed: #01157F;
    --border-border-external-focus: #D5DBFF;
    --border-border-disable: #DCDEEB;
    --text-text-disable: #9096BB;
    --surface-Secondary-surface-secondary: #A070EC;
    --border-Secondary-border-secondary: #A070EC;
    --border-Secondary-border-secondary-hover: #8F58E6;
    --surface-Secondary-surface-secondary-hover: #8F58E6;
    --border-Secondary-border-secondary-pressed: #4B06BA;
    --surface-Secondary-surface-secondary-pressed: #4B06BA;
    --surface-surface-hover: #E9EBF5;
    --surface-surface-pressed: #DCDEEB;
    --text-text-main: #484E75;
    --surface-pellet-surface-pellet-terciary: #FF9651;
    --surface-pellet-surface-pellet-occasionnaly: #00C6F8;
    --surface-pellet-surface-pellet-occasionnaly-hover: #0AA0C6;
    --surface-surface-background: #FAFAFA;
    --border-border-light: #BFC3DB;
    --surface-surface-main: #FEFEFE;
    --surface-pellet-surface-pellet-primary: #2B4DFE;
    --surface-pellet-surface-pellet-primary-hover: #0123D4;
    --surface-surface-filters: #00C6F81A;
    --surface-Semantic-surface-info: #EEFAFF;
    --color-primary-Primary-10: #F0F2FF;
    --border-Semantic-border-info: #00BFFF;
    --text-Semantic-text-info: #004F80;
    --surface-surface-profile-main: #FFC75B;
    --border-border-profile: #895C05;
    --text-text-dark: #2D314A;
    --text-text-profile: #895C05;
    --text-text-light: #646CA0;
    --surface-Menu-surface-menu-1: #A070EC;
    --surface-Menu-surface-menu-2: #EA4985;
    --surface-Menu-surface-menu-3: #FF9651;
    --surface-Menu-surface-menu-4: #FFC75B;
    --surface-Menu-surface-menu-5: #2DE474;
    --surface-Menu-surface-menu-6: #00E5D1;
    --surface-Menu-surface-menu-7: #00C6F8;
    --surface-Menu-Sous-menu-Surface-sous-menu-2: #FFE4EE;
    --border-Menu-border-menu-2: #EA4985;
    --surface-Menu-Sous-menu-Surface-sous-menu-3: #FFEEE3;
    --border-Menu-border-menu-3: #FF9651;
    --surface-Menu-Sous-menu-Surface-sous-menu-4: #FEF0D5;
    --border-Menu-border-menu-4: #FFC75B;
    --surface-Menu-Sous-menu-Surface-sous-menu-5: #D9FFE8;
    --border-Menu-border-menu-5: #2DE474;
    --surface-Menu-Sous-menu-Surface-sous-menu-7: #D9F7FF;
    --border-Menu-border-menu-7: #00C6F8;
    --surface-Menu-Sous-menu-Surface-sous-menu-1: #EFE6FE;
    --border-Menu-border-menu-1: #A070EC;
    --surface-Menu-Sous-menu-Surface-sous-menu-6: #D7FFFB;
    --border-Menu-border-menu-6: #00E5D1;
    --text-Menu-text-menu-icon: #FEFEFE;
    --color-grey-Neutral-10: #FAFAFA;
    --text-text-lighter: #9096BB;
    --surface-surface-inverted: #2D314A;
    --surface-surface-profile-hover: #EB9D07;
    --surface-Primary-surface-primary-light-main: #F0F2FF;
    --surface-Semantic-surface-danger: #FFF3F7;
    --text-Semantic-text-danger: #AF0A47;
    --surface-Semantic-surface-success: #F8FEE0;
    --text-Semantic-text-success: #6A8500;
    --surface-Semantic-surface-warning: #FFF6E6;
    --text-Semantic-text-warning: #A26B00;
    --text-Primary-text-primary-inverted: #FEFEFE;
    --border-Semantic-border-danger: #E21361;
    --border-Semantic-border-success: #9BC200;
    --border-Semantic-border-warning: #E09300;
    --text-Secondary-text-secondary: #FEFEFE;
    --buttons-padding: 8px 16px;
    --surface-orange-surface-orange: orange;
    --border-orange-border-orange: orange;
    --border-orange-border-orange-hover: darkorange;
    --surface-orange-surface-orange-hover: darkorange;
    --border-orange-border-orange-pressed: orangered;
    --surface-orange-surface-orange-pressed: orangered;
    --border-orange-border-orange-focus: #ff6600;
    --border-orange-border-orange-disable: #f2f2f2;
    --text-orange-text-disable: #ccc;
}

.btn:not(.btnSuivi):not(.presentationMarkDemo):not(.btn-circle-presentation):not(.toggle-on):not(.toggle-off):not(.toggle-handle):not(.presentationActivityAddor):not(.presentationRemover):not(.toggle-group):not(.toggle):not(.btnSearchcnv),.btn-action {
    width: fit-content !important;
    /*max-width: 200px !important;*/
    height: auto !important;
    /*max-height: 40px !important;*/
    padding: var(--buttons-padding);
    gap: 4px !important;
    border-radius: var(--XXL) !important;
    font-family: "Inter", 'OpenSans Regular', 'serif' !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    text-align: center !important;
    text-underline-position: from-font !important;
    text-decoration-skip-ink: none !important;
    text-wrap: nowrap;
    max-height: 40px;
    margin: .9px;
}

.input-group-btn > .form-control,
.input-group-btn > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.select2-choice {
    border-radius: var(--L) !important;
    height: 40px !important;
}

.btn-primary,.btn-action {
    background: var(--surface-Primary-surface-primary-dark-main) !important;
    .icon-path {
        fill: #FEFEFE !important;
    }
 }

.btn-primary:hover {
    background: var(--surface-Primary-surface-primary-dark-hover) !important;
    .icon-path {
        fill: #FEFEFE !important;
    }
}

.btn-primary:active {
    background: var(--surface-Primary-surface-primary-dark-pressed) !important;
    .icon-path {
        fill: #FEFEFE !important;
    }
}

.btn-primary:focus {
    border: 1px solid var(--border-border-external-focus) !important;
    background: var(--surface-Primary-surface-primary-dark-main) !important;
    .icon-path {
        fill: #FEFEFE !important;
    }
}

.btn-primary:disabled {
    color: var(--text-text-disable);
    background: var(--surface-surface-disable-main) !important;
    .icon-path {
        fill: var(--text-text-disable) !important;
    }
}

.btn-outline-primary {
    background: none !important;
    color: var(--text-Primary-text-primary-main) !important;
    border: 1px solid var(--border-Primary-border-primary) !important;
    .icon-path {
        fill: var(--text-Primary-text-primary-main) !important;
    }
}

.btn-outline-primary:hover {
    color: var(--text-Primary-text-primary-hover, ) !important;
    border: 1px solid var(--border-Primary-border-primary) !important;
    .icon-path {
        fill: var(--text-Primary-text-primary-hover) !important;
    }
}

.btn-outline-primary:active {
    color: var(--text-Primary-text-primary-pressed, ) !important;
    border: 1px solid var(--border-Primary-border-primary) !important;
    .icon-path {
        fill: var(--text-Primary-text-primary-pressed) !important;
    }
}

.btn-outline-primary:focus {
    color: var(--text-Primary-text-primary-main, ) !important;
    border: 1px solid var(--border-border-external-focus) !important;
    .icon-path {
        fill: var(--text-Primary-text-primary-main) !important;
    }
}

.btn-outline-primary:disabled {
    color: var(--text-text-disable, ) !important;
    border: 1px solid var(--border-border-disable);
    .icon-path {
        fill: var(--text-text-disable) !important;
    }
}

.btn-secondary {
    background: var(--surface-Secondary-surface-secondary) !important;
    border: 1px solid var(--border-Secondary-border-secondary) !important;
}

.btn-secondary:hover {
    background: var(--border-Secondary-border-secondary-hover) !important;
    border: 1px solid var(--surface-Secondary-surface-secondary-hover) !important;
}

.btn-secondary:active {
    background: var(--border-Secondary-border-secondary-pressed) !important;
    border: 1px solid var(--surface-Secondary-surface-secondary-pressed) !important;
}

.btn-secondary:focus {
    background: var(--border-Secondary-border-secondary) !important;
    border: 2px solid var(--border-border-external-focus) !important;
}

.btn-secondary:disabled {
    color: var(--text-text-disable) !important;
    background: var(--surface-surface-disable-main) !important;
}

.btn-orange {
    background: var(--surface-orange-surface-orange) !important;
    border: 1px solid var(--border-orange-border-orange) !important;
    color: white; /* Texte blanc pour contraster avec l'orange */
}

.btn-orange:hover {
    background: var(--surface-orange-surface-orange-hover) !important;
    border: 1px solid var(--border-orange-border-orange-hover) !important;
}

.btn-orange:active {
    background: var(--surface-orange-surface-orange-pressed) !important;
    border: 1px solid var(--border-orange-border-orange-pressed) !important;
}

.btn-orange:focus {
    background: var(--surface-orange-surface-orange) !important;
    border: 2px solid var(--border-orange-border-orange-focus) !important;
}

.btn-orange:disabled {
    color: var(--text-orange-text-disable) !important;
    background: var(--border-orange-border-orange-disable) !important;
}

.text_btn {
    color: var(--text-Primary-text-primary-main) !important;
    background: transparent !important;
}

.text_btn:hover {
    color: var(--text-Primary-text-primary-hover) !important;
}

.text_btn:active {
    color: var(--text-Primary-text-primary-pressed) !important;
}

.text_btn:focus {
    border: 2px solid var(--border-border-external-focus) !important;
    color: var(--text-Primary-text-primary-main);
}

.text_btn:disabled {
    color: var(--text-text-disable);
}

.icon {
    vertical-align: sub;
}

/*.show:not(td) {
    display: inline-block !important;
    align-self: center !important;
}*/

.custom-rounded-10 {
    border-radius: 10px;
}

.dropdown-menu {
    margin-top: 8px !important;
    width: auto !important;
    padding: 4px 0 4px 0 !important;
    gap: 0 !important;
    border-radius: var(--L) !important;
    max-height: 200px;
    overflow: auto;
    max-width: 200px !important;
    float: right !important;
    z-index: 10000000000;
}

.dropdown-item, .select2-result {
    width: auto !important;
    height: auto !important;
    /*max-height: 32px !important;*/
    padding: 6px 16px 6px 16px !important;
    gap: 10px !important;
    border-radius: inherit !important;
    color: var(--text-text-main) !important;
}

.dropdown-item:hover, .select2-result:hover {
    width: auto !important;
    height: auto !important;
    padding: 6px 16px 6px 16px !important;
    gap: 10px !important;
    background: var(--surface-surface-hover) !important;
    color: var(--text-text-main) !important;
}

.dropdown-item:focus, .select2-result:focus {
    width: auto !important;
    height: auto !important;
    padding: 6px 16px 6px 16px !important;
    gap: 10px !important;
    background: #F3F4F8 !important;
    border: 3px solid var(--border-border-external-focus) !important;
    color: var(--text-text-main) !important;
}

.dropdown-item:active, .select2-result:active {
    width: auto !important;
    height: auto !important;
    padding: 6px 16px 6px 16px !important;
    gap: 10px !important;
    background: var(--surface-surface-pressed) !important;
    color: var(--text-text-main) !important;

}

.dropdown-item:disabled, .select2-result:disabled {
    width: auto;
    height: auto;
    padding: 6px 16px 6px 16px;
    gap: 10px;
    color: var(--text-text-disable);
}

.dropdown-menu li:first-child .dropdown-item, .select2-results:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.dropdown-menu li:last-child .dropdown-item, .select2-results:first-child {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.pellet-blank {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    display: flex;
    justify-content: center;
    border: 0 !important;
    padding: 8px !important;
    background: transparent !important;
}

.pellet-terciary {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    display: flex;
    justify-content: center;
    border: 0 !important;
    padding: 8px !important;
    background: var(--surface-pellet-surface-pellet-terciary) !important;
}

.pellet-primary {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    display: flex;
    justify-content: center;
    border: 0 !important;
    padding: 8px !important;
    background: var(--surface-pellet-surface-pellet-primary);
}

.pellet-primary:hover,
.pellet-primary:focus {
    border: 0 !important;
    padding: 8px !important;
    background: var(--surface-pellet-surface-pellet-primary-hover);
}

.pellet-primary:active {
    border: 0 !important;
    padding: 8px !important;
    background: var(--surface-pellet-surface-pellet-primary);
}

.pellet-primary-outline {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    border: 0 !important;
    padding: 8px !important;
    border-radius: var(--XXL);
    border: 1px solid var(--border-Primary-border-primary, #8094FE) !important;
}

.pellet-occasionnaly {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    border: 0 !important;
    padding: 8px !important;
    background: var(--surface-pellet-surface-pellet-occasionnaly);
}

.pellet-occasionnaly:focus,
.pellet-occasionnaly:active
.pellet-occasionnaly:hover {
    border: 0 !important;
    padding: 8px!important;
    background: var(--surface-pellet-surface-pellet-occasionnaly-hover);
}

.pellet-secondary {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    display: flex;
    justify-content: center;
    padding: 8px !important;
    background: var(--surface-Secondary-surface-secondary);
    border: 1px solid var(--border-Secondary-border-secondary);
}

.pellet-secondary:hover {
    padding: 8px !important;
    background: var(--surface-Secondary-surface-secondary-hover);
    border: 1px solid var(--border-Secondary-border-secondary-hover);
}

.closed-sidebar .app-sidebar .app-sidebar__inner .metismenu-icon {
    text-indent: 0;
    left: 50%;
    margin-left: -16%
}

.app-container.app-theme-white.body-tabs-shadow.fixed-header.fixed-sidebar.closed-sidebar #link-menu-1-dashboard span:first-child {
    /*left: 17px;*/
}

.treeview-dash.active .metismenu-icon.fa.fa-2x.menu-toggle-icon.ef-icon.ef-icon-small.ef-dashboard-fill {
    left: 15px;
    top: 59%;
}

.form-control {
    padding: 7px 16px 7px 16px;
    gap: 16px;
    border-radius: var(--XXL);
    /*border: 1px !important;*/
}

.pagination {
    gap: 4px !important;
    vertical-align: center !important;
}

.paginate_button:not(.disabled, .next, .previous):is(.active) > a {
    width: 40px !important;
    height: 40px !important;
    padding: 10px 0 0 0 !important;
    gap: 4px !important;
    border-radius: var(--XXL) !important;
    border: 1px solid var(--border-Primary-border-primary) !important;
    text-align: center !important;
    justify-content: space-between !important;
    color: var(--text-Primary-text-primary-main);
    background: var(--surface-surface-main);
}

.paginate_button:not(.disabled, .next, .previous):is(.active) > a:focus {
    background: none;
}

.paginate_button:not(.disabled, .next, .previous):is(.active) > a:hover {
    background: var(--surface-surface-hover) !important;
}

.pagination li.active a:hover{
    color : var(--border-Primary-border-primary) !important;
}

.paginate_button:not(.disabled, .next, .previous):is(.active) > a:active {
    background: var(--surface-surface-pressed) !important;
    border: 1px solid var(--border-Primary-border-primary) !important;
}

.paginate_button:not(.disabled, .next, .previous):not(.active) > a {
    width: 40px !important;
    height: 40px !important;
    padding: 10px 0 0 0 !important;
    gap: 8px !important;
    border-radius: var(--XXL) !important;
    text-align: center !important;
    justify-content: space-between !important;
    color: var(--text-text-main);
    background: var(--surface-surface-background) !important;
    border: 1px solid var(--border-border-light) !important;
}

.paginate_button:not(.disabled, .next, .previous):not(.active) > a:focus {
    background: none;
}

.paginate_button:not(.disabled, .next, .previous):not(.active) > a:hover {
    background: var(--surface-surface-hover) !important;
}

.paginate_button:not(.disabled, .next, .previous):not(.active) > a:active {
    background: var(--surface-surface-pressed) !important;
    border: 1px solid var(--border-border-light) !important;
}

.paginate_button:is(.disabled) > a,
.paginate_button:is(.disabled) {
    border: 0;
    background-image: none;
}

.next:is(.disabled) > a,
.previous:is(.disabled) > a {
    background: var(--text-text-disable) !important;
}

.paginate_button {
    height: 100% !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding: 0 !important;
}

.paginate_button:is(.next) > a {
    content: '' !important;
    mask-image: url(ef_icons/chevron_forward.svg) !important;
    mask-repeat: no-repeat;
    background: var(--text-text-main);
    color: transparent;
    height: 100% !important;
}
.paginate_button:is(.previous) > a {
    content: '' !important;
    mask-image: url(ef_icons/chevron_backward.svg) !important;
    mask-repeat: no-repeat;
    background: var(--text-text-main);
    color: transparent;
    height: 100% !important;
}

.pagination li a {
    padding: 10px 15px;
}

tr {
    width: 100% !important;
}

div.dataTables_wrapper div.dataTables_length select {
    width: auto !important;
}

/* General Table Styles */
table {

    grid-template-columns: auto auto auto !important; /* Adjust number of columns */
    row-gap: 10px; /* Adds spacing between rows */
    /*border-collapse: separate !important;
    border-spacing: 0 5px !important; /* Ensures no extra spacing outside grid */
    width: 100% !important;
}

/* DataTable Styles */
table.dataTable {
    border: none !important;
    padding-bottom: 35px !important;
    border-spacing: 0 5px;
}

/* Header Styles */
.dataTable > thead, table > thead {
    /*display: grid !important;*/
    width: 100%;
    grid-template-columns: auto auto auto; /* Adjust based on column count */
    gap: 0 !important;
    border-radius: var(--L) !important;
    box-shadow: 1px 4px 8px 1px #0000001A !important; /* Subtle shadow under header */
    margin-bottom: 8px !important;
    opacity: 1 !important; /* Makes the header visible */
    backdrop-filter: blur(10px);
    background-color: transparent;
}

.dataTable:not(#tableAverages, .examschedulesTable, #teletransmission_lsu, #teletransmission_lsu_bp, #teletransmission_lsu_bc, #teletransmission_lsu_popup, #teletransmission_siecle) > thead > tr > th {
    text-wrap: nowrap;
    border: none !important;
    /*padding-right: 0.55rem !important;*/
    font-family: "Inter", 'OpenSans Regular', 'serif';
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding: 14px 16px 14px 16px;
    gap: 8px;
}

.examschedulesTable > thead > tr > th {
    text-wrap: wrap;
    border: none !important;
    /*padding-right: 0.55rem !important;*/
    font-family: "Inter", 'OpenSans Regular', 'serif';
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding: 14px 16px 14px 16px;
}

#scores {
    display: inline-table;
}

table.dataTable thead .sorting:after {
    opacity: 1 !important;
}

/* Body Styles */
.dataTable > tbody {
    row-gap: 2px !important; /* Spacing between rows */
    margin-top: 8px !important;
    border: none !important;
}

.dataTable > tbody > tr {
    background: var(--surface-surface-main);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Row shadow */
    border-radius: var(--L) !important; /* Rounded corners for rows */
    padding: 10px !important; /* Padding inside rows */
}

/* Row Styles for Selected Rows */
.dataTable > tbody > tr:has(input.selectedCheckbox:checked) {
    background: var(--surface-surface-hover) !important;
    border: 1px solid var(--border-Primary-border-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* Slightly larger shadow */
}

.dataTable > tbody > tr:has(input.selectedCheckbox:checked) > td {
    background: var(--surface-surface-hover) !important;
    border-top: 1px solid var(--border-Primary-border-primary) !important;
    border-bottom: 1px solid var(--border-Primary-border-primary) !important;
    box-shadow: 0 4px 0px rgba(0, 0, 0, 0.15) !important; /* Slightly larger shadow */
}

.dataTable > tbody > tr:has(input.selectedCheckbox:checked) > td:first-child {
    border-left: 1px solid var(--border-Primary-border-primary) !important;
}

.dataTable > tbody > tr:has(input.selectedCheckbox:checked) > td:last-child {
    border-right: 1px solid var(--border-Primary-border-primary) !important;
}

/* Cell Styles */
.dataTable:not(.nov2touching, #onlineadmissionTable, #tableAverages, #datatable_absence_index, #datatable_sepa_index, .datatable-parent-index, .table-suivi-pedagogical, #datatable_mailsystem, #teletransmission_onde_students, #teletransmission_onde_parents, #teletransmission_onde, #convsent, #datatable_examsession, #etablissment, #teletransmission_lsu, #teletransmission_lsu_bp, #teletransmission_lsu_bc, #teletransmission_lsu_popup, #mailsqueuelist, #teletransmission_siecle) > tbody > tr > td {
    text-wrap: nowrap;
    padding: 12px !important; /* Padding inside cells */
    background: var(--surface-surface-main) !important;
    border: none !important;
}

.datatable-parent-index > tbody > tr > td {
    text-wrap: wrap;
    padding: 12px !important;
    background: var(--surface-surface-main) !important;
    border: none !important;
}

#onlineadmissionTable {
    display: inline-table;
}

#onlineadmissionTable > tbody > tr > td {
    text-wrap: wrap;
    padding: 12px !important;
    background: var(--surface-surface-main) !important;
    border: none !important;
}

#onlineadmissionTable > tbody > tr > td:not(:first-child):not(:nth-child(2)) {
    min-width: 150px !important;
}

#onlineadmissionTable > tbody > tr > td > div > figure > a > img {
        max-height: 250px !important;
}

#onlineadmissionTable > tbody > tr > td:nth-child(6) {
    max-width: 450px !important;
}


.table-suivi-pedagogical {
    width: 100%;
    display: inline-table !important;
}

.table-suivi-pedagogical > tbody > tr > td {
    text-wrap: wrap;
    padding: 12px !important;
    background: var(--surface-surface-main) !important;
    border: none !important;
}

#datatable_absence_index > tbody > tr > td {
    text-wrap: wrap;
    padding: 12px !important;
    background: var(--surface-surface-main) !important;
    border: none !important;
}

#datatable_sepa_index > tbody > tr > td {
    text-wrap: wrap;
    padding: 3px !important;
    text-align: left !important;
    background: var(--surface-surface-main) !important;
    border: none !important;
}

.dataTable.normal-wrap > tbody > tr > td {
    text-wrap: wrap;
}

.dataTables_wrapper th .sorting,
.dataTables_wrapper th .sorting_asc,
.dataTables_wrapper th .sorting_desc {
    margin-left: 5px !important;
}

.dataTable > tbody > tr > td:first-child,
    tfoot > tr > td:first-child {
    border-top-left-radius: var(--L) !important;
    border-bottom-left-radius: var(--L) !important;
}

.dataTable > tbody > tr > td:last-child,
tfoot > tr >  td:last-child
{
    border-top-right-radius: var(--L) !important;
    border-bottom-right-radius: var(--L) !important;
}

/*.dataTables_filter {*/
/*    width: 100%;*/
/*}*/

/*.dataTables_wrapper > .top {*/
/*    display: flex;*/
/*    width: 100%;*/
/*}*/

/*.dataTables_wrapper > .top > label {*/
/*    float: right;*/
/*}*/

/*.dataTables_wrapper {*/
/*    margin-top: 25px;*/
/*}*/

/* Sorting Icons */
.sorting_asc::after {
    mask-image: url('ef_icons/swap_up.svg');
    mask-size: 100% 100% !important;
    mask-repeat: no-repeat;
    background: var(--text-text-main);
    color: var(--text-text-main);
    height: 25px !important;
    width: 25px !important;
    opacity: 1 !important;
}

.sorting_desc::after {
    mask-image: url('ef_icons/swap_down.svg');
    mask-size: 100% 100% !important;
    mask-repeat: no-repeat;
    background: var(--text-text-main);
    color: var(--text-text-main);
    height: 25px !important;
    width: 25px !important;
    opacity: 1 !important;
}

.sorting:after {
    mask-image: url('ef_icons/swap_vert.svg');
    mask-size: 100% 100% !important;
    mask-repeat: no-repeat;
    background: var(--text-text-main);
    color: var(--text-text-main);
    height: 25px !important;
    width: 25px !important;
    opacity: 1 !important;

}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    position: static !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 18px !important;
    opacity: 1 !important;
}

.dataTable > tbody > tr > td > div > div > img,
.dataTable > tbody > tr > td > img {
    border-radius: 50%;
    width: 32px !important;
    height: 32px !important;
}

.datatable-ef > tbody > tr > td > div > div > img,
.datatable-ef > tbody > tr > td > img {
    border-radius: 50%;
    width: 64px !important;
    height: 64px !important;
}

table::-webkit-scrollbar {
    background: transparent;
    height: 8px !important;
}

table::-webkit-scrollbar-thumb {
    background:  var(--text-text-lighter) !important;
    height: 8px !important;
    padding: 0 208px 0 208px;
    gap: 16px;
    border-radius: var(--XXL);
}

.app-main {
    background-image: url('/assets/inilabs/fondEcoleFutee.jpg');
    background-repeat: no-repeat !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

.dtfh-floatingparenthead {
    top: 80px !important;
    box-shadow: 0px 4px 8px 0px #0000001A !important;
    opacity: 1 !important;
    background: white;
    border-radius: var(--XXL) !important;
}

.box-body,
.nav-tabs-custom,
.tab-content,
.dataTable,
.dataTable > tbody,
#datatable_test_ellipsis > a {
    background: transparent !important;
}

/* General Container Style */
.filter-container {
    display: flex !important;
    align-items: center  !important;
    gap: 40px !important; /* Spacing between pills */
    background: var(--surface-surface-filters);
    padding: 10px !important;
    border-radius: var(--XXL) !important; /* Rounded container */
    overflow-x: auto !important; /* Allow horizontal scrolling if needed */
    justify-content: end !important;
    width: fit-content !important;
    float: right !important;
    margin-bottom: 13px;
    max-width: 100%;
}
.filter-container.ismono{
    margin: 0 !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
}


.filter-pills {
    flex-wrap: wrap !important;
    display: flex !important;
    align-items: center  !important;
    gap: 8px !important;
}

/* Pill Style */
.filter-pill {
    align-items: center !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-Semantic-text-info);
    background: var(--surface-Semantic-surface-info);
    border: 1px solid var(--border-Semantic-border-info) !important;
    border-radius: 20px !important; /* Rounded pills */
    white-space: nowrap !important; /* Prevent text wrapping */
    cursor: pointer !important;
    transition: background-color 0.3s, border-color 0.3s !important;
}

/* Close Button Style */
.close-btn {
    margin-left: 8px !important; /* Space between text and the close button */
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    color: var(--text-Semantic-text-info) !important;
}

.refresh-btn {
    border-color: var(--border-Primary-border-primary);
    border-width: 1px;
    border-style: solid;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    padding: 6px;
}

.refresh-btn:hover {
    background: var(--color-primary-Primary-10);
    cursor: pointer;
}

.refresh-btn:disabled {
    border-color: var(--border-border-disable);
    border-width: 1px;
    border-style: solid;
    background: var(--color-primary-Primary-10);

    .refresh-btn > i {
        color: var(--text-text-disable);
    }
}

.page-header {
    margin-bottom: 0 !important;
    /*padding-bottom: 0 !important;*/
}

input[type="checkbox"]:not(.activityEnder) {
    width: 16px !important;
    height: 16px !important;
}

/* Drawer container */
.drawer {
    position: fixed;
    top: 0;
    right: -40%; /* Match the width */
    width: 40%; /* Set the drawer width */
    height: 100%;
    background-color: #f8f9fa; /* Light gray background */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    transition: right 0.3s ease; /* Smooth sliding */
    z-index: 99999999999; /* Appear on top */
}

/* Drawer visible state */
.drawer.open {
    right: 0; /* Slide into view */
}

/* Drawer content */
.drawer-content {
    padding: 24px;
}

.drawer-footer {
    padding: 16px 40px 24px 32px !important;
}

/* Close button */
.close-btn {
    top: 10px;
    left: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* Open Drawer Button */
.open-drawer-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff; /* Bootstrap blue */
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    z-index: 999; /* Above everything else */
}

.app-header__content {
    border-radius: 32px !important;
    box-shadow: 0 4px 16px 0 #2D314A33;
    background: white;
    margin: 3% 2% 2% 2%;
    width: 60% !important;
    height: 48px !important;
    max-height: 48px !important;
}

.skin-ecolefutee .navbar .nav li.nav-item  {
    padding: 0 !important;
    margin-right: 25px;
}

.app-header .app-header__content {
    padding: 0 !important;
}

.app-header-right, .widget-content, .widget-content-wrapper {
    height: 100% !important;
}

.widget-content-wrapper {
    padding: 12px 8px;
}

.app-header .app-header__content .app-header-right > .header-btn-lg {
    border-radius: 36px !important;
    height: 100% !important;
    background: var(--surface-surface-profile-main);
    /*border: 1px solid var(--border-border-profile);*/
}

.app-header .app-header__content .app-header-right > .header-btn-lg:hover {
    border-radius: 36px !important;
    height: 100% !important;
    background: var(--surface-surface-profile-hover);
}

.app-header .app-header__content .app-header-right > .header-btn-lg:has(.show) {
    border-radius: 36px !important;
    height: 100% !important;
    background: var(--surface-surface-profile-main);
    border: 1px solid var(--border-border-profile);
}

.fa-angle-down:before {
    color: var(--text-text-dark) !important;
}

.app-header-right > img {
    padding: 5px;
    border-radius: 50%;
}

.widget-heading {
    color: var(--text-text-dark) !important;
}

.widget-subheading {
    color: var(--text-text-profile) !important;
}

.treeview:is(.mm-active) > a > i,
.app-sidebar.sidebar-text-light .vertical-nav-menu li a {
    color: var(--text-text-dark);
}

.app-container.app-theme-white.body-tabs-shadow.fixed-header.fixed-sidebar .vertical-nav-menu li:not(.active) a .metismenu-icon.fa.fa-2x.menu-toggle-icon.ef-icon.ef-icon-small.ef-dashboard-fill {
    opacity: .5;
    color: var(--text-text-dark);
}

.treeview:not(.mm-active) > a > span {
    color: var(--text-text-main) !important;
}

.treeview:is(.mm-active) > a > span > i {
    color: var(--text-Menu-text-menu-icon) !important;
    opacity: 1 !important;
}

.treeview:is(.mm-active) > a > span:first-child,
.linkMenuHref:is(.mm-active):has(.ef-dashboard-fill) > span:first-child {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 32px;
    position: absolute;
    left: 1px;
    border: 1px;
    /*margin-top: -5px;*/
}

.treeview:is(.mm-active) > a > span,
.linkMenuHref:is(.mm-active):has(.ef-dashboard-fill) > span {
    display: flex;
    justify-content: start;
}

/*#main_navbar.closed-sidebar .treeview.mm-active > a > span:first-child {*/
/*    left: 14px !important;*/
/*}*/

/*#main_navbar.closed-sidebar .vertical-nav-menu:hover .treeview.mm-active > a > span:first-child {*/
/*    left: 1px !important;*/
/*}*/

#main_navbar.closed-sidebar .vertical-nav-menu:hover .treeview.mm-active > ul {
    display: block !important;
}

#main_navbar.closed-sidebar .treeview.mm-active > ul {
    display: none !important;
}

#main_navbar:not(.closed-sidebar) .vertical-nav-menu i.metismenu-icon,
#main_navbar.closed-sidebar .vertical-nav-menu:hover i.metismenu-icon {
    left: 8px !important;
    margin-top: -12px !important;
    top: 50%;
}

.treeview.mm-active i.metismenu-icon {
    margin-left: initial !important;
    left: 20% !important;
    top: 59%;
}

.linkMenuHref.mm-active:has(.ef-dashboard-fill) > span:first-child {
    background: var(--surface-Menu-surface-menu-1) !important;
    i {
        color: white;
        opacity: 1 !important;
    }
}

.treeview:is(.mm-active):has(.ef-school-fill) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-school-fill) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-2) !important;
}

.treeview:is(.mm-active):has(.ef-schedule-fill) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-schedule-fill) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-3) !important;
}

.treeview:is(.mm-active):has(.ef-emoji-language-fill) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-emoji-language-fill) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-7) !important;
}

.treeview:is(.mm-active):has(.ef-mail-fill) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-mail-fill) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-1) !important;
}

.treeview:is(.mm-active):has(.ef-settings-fill) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-settings-fill) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-6) !important;
}

.treeview:is(.mm-active):has(.ef-category-fill) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-category-fill) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-4) !important;
}

.treeview:is(.mm-active):has(.ef-grading-fill) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-grading-fill) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-5) !important;
}

.treeview:is(.mm-active):has(.ef-finance) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-finance) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-3) !important;
}

.treeview:is(.mm-active):has(.ef-draft-fill) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-draft-fill) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-5) !important;
}

.treeview:is(.mm-active) > a:hover{
    color: var(--text-text-dark) !important;
    opacity: 1 !important;
}

.treeview {
    text-align: start !important;
}

ul.metismenu > li:first-child {
    text-align: center !important;
}

.treeview:is(.mm-active):has(.ef-school-fill) > .treeview-menu > li.active > a.mm-active {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-2) !important;
    border: 1px solid var(--border-Menu-border-menu-2) !important;
}

.treeview:is(.mm-active):has(.ef-schedule-fill) > .treeview-menu > li.active > a.mm-active  {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-3) !important;
    border: 1px solid var(--border-Menu-border-menu-3) !important;
}

.treeview:is(.mm-active):has(.ef-category-fill) > .treeview-menu > li.active > a.mm-active  {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-4) !important;
    border: 1px solid var(--border-Menu-border-menu-4) !important;
}

.treeview:is(.mm-active):has(.ef-grading-fill) > .treeview-menu > li.active > a.mm-active  {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-5) !important;
    border: 1px solid var(--border-Menu-border-menu-5) !important;
}

.treeview:is(.mm-active):has(.ef-emoji-language-fill) > .treeview-menu > li.active > a.mm-active  {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-7) !important;
    border: 1px solid var(--border-Menu-border-menu-7) !important;
}

.treeview:is(.mm-active):has(.ef-mail-fill) > .treeview-menu > li.active > a.mm-active  {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-1) !important;
    border: 1px solid var(--border-Menu-border-menu-1) !important;
}

.treeview:is(.mm-active):has(.ef-finance) > .treeview-menu > li.active > a.mm-active  {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-3) !important;
    border: 1px solid var(--border-Menu-border-menu-3) !important;
}

.treeview:is(.mm-active):has(.ef-book-4-fill) > a > span:first-child,
.treeview:is(.mm-active):has(.ef-book-4-fill) > .treeview-menu::before {
    background: var(--surface-Menu-surface-menu-6) !important;
}

.treeview:is(.mm-active):has(.ef-book-4-fill) > .treeview-menu > li.active > a.mm-active  {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-6) !important;
    border: 1px solid var(--border-Menu-border-menu-6) !important;
}

.treeview:is(.mm-active):has(.ef-settings-fill) > .treeview-menu > li.active > a.mm-active  {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-6) !important;
    border: 1px solid var(--border-Menu-border-menu-6) !important;
}

.treeview:is(.mm-active):has(.ef-draft-fill) > .treeview-menu > li.active > a.mm-active  {
    border-radius: var(--XXL) !important;
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-5) !important;
    border: 1px solid var(--border-Menu-border-menu-5) !important;
}


.treeview-menu {
    background: var(--surface-surface-background) !important;
}

.app-container:is(.closed-sidebar) ~ .treeview-menu {
    display: none !important;
    background-color: #0a53be;
}

.bg-plum-plate {
    background-image: none !important;
}

.linkMenuHref {
    color: var(--text-text-main) !important;
}

.overlayImg {
    background-image: none !important;
}

.app-header.header-text-light .header-btn-lg .hamburger-inner,
.app-header.header-text-light .header-btn-lg .hamburger.is-active .hamburger-inner,
.app-header.header-text-light .header-btn-lg .hamburger-inner::before,
.app-header.header-text-light .header-btn-lg .hamburger-inner::after,
.app-header.header-text-light .header__pane .hamburger-inner,
.app-header.header-text-light .header__pane .hamburger.is-active .hamburger-inner,
.app-header.header-text-light .header__pane .hamburger-inner::before,
.app-header.header-text-light .header__pane .hamburger-inner::after {
    background: var(--text-text-light) !important;
}

.schoolName {
    color: var(--text-text-dark) !important;
    font-family: "Inter", 'OpenSans Regular', 'serif';
    font-size: 20px;
    font-weight: 700;
    line-height: 24.2px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

li:has(.schoolName) {
    margin-top: 9px !important;
}

.box .box-body,
.tab-content {
    box-shadow: none !important;
}

.breadcrumb > li {
    border: 1px solid var(--border-border-light);
    border-radius: 32px;
    width: auto !important;
    height: 36px;
    line-height: 35px;
    text-wrap: nowrap;
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-align: center;
}

.breadcrumb > li:has(i) {
    border: 1px solid var(--border-border-light) !important;
    border-radius: 32px !important;
    width: auto !important;
    height: 36px !important;
    line-height: 35px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.box-header {
    background: transparent !important;
    box-shadow: none !important;
}

.btn-download {
    background-color: var(--surface-Secondary-surface-secondary) !important;
    color: white;
}

.box-title {
    line-height: 35px !important;
}

.breadcrumb li:not(:first-child)::before {
    display: none !important;
    padding-right: 0 !important;
    content: '' !important;
}

.box .box-header {
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    line-height: 35px !important;
}

.box-title {
    padding: 0 4px !important;

}

.breadcrumb > span {
    margin-right: 8px;
    margin-left: 8px;
}

.vertical-nav-menu > li > a:has(a) {
    text-align: center !important;
}

.input-holder {
    border: 1px solid var(--border-border-light);
    background-color: transparent !important;
}

.input-holder input {
    color : black !important;
}

.search-input::placeholder {
    color: var(--text-text-light) !important;
}

.search-icon {
    background: transparent !important;
    border: none !important;
    color: var(--text-text-light) !important;
}

.search-icon > span::after{
    border-color: var(--text-text-light) !important;
}

.search-icon > span::before {
    background-color: var(--text-text-light) !important;
}


.app-theme-white.app-container {
    background: var(--color-grey-Neutral-10) !important;
}

.nav-tabs-custom {
    box-shadow: none !important;
}

.treeview-menu {
    text-align: start !important;
}

.dropdownLang {
    border-radius: var(--XXL) !important;
    border: 1px solid var(--border-border-light) !important;
    margin-right: 16px;
}

.dropdownLang > .nav-link > span {
    margin-right: 8px;
}

.dropdownLang > .libelleLang {
    color: var(--text-text-main);
    max-height: 40px;
}

.box-title {
    font-family: "Inter", 'OpenSans Regular', 'serif' !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    text-align: left !important;
    text-underline-position: from-font !important;
    text-decoration-skip-ink: none !important;
    color: var(--text-text-dark);
}

.vertical-nav-menu > li.search {
    padding: 1px 8px 24px 8px !important;
}

.logo-src {
    height: 50px !important;
}

.top {
    padding-top: 50px;
}

.tooltip-inner {
    border-radius: var(--L) !important;
    background: var(--surface-surface-inverted) !important;
    padding: var(--S) var(--M) var(--S) var(--M) !important;
    gap: var(--S) !important;
}
.text-dark{
    color : var(--text-text-dark);
}
.font-size-l{
    font-size: var(--L);
}
.font-size-ml{
    font-size: var(--ML);
}
.popover{
    background-color: var(--surface-surface-inverted) !important;
    color: white !important;
}
.popover.bottom .arrow:after{
    border-bottom-color: var(--surface-surface-inverted) !important;
}
.popoverbtn-info{
    border-radius: 50%;
    color: white;
    width: 39px;
    height: 39px;
    display: flex;
}
.popover-ef2{
    background-color: var(--surface-surface-inverted) !important;
    color: white;
}
a{
    color : var(--text-text-main);
}
label{
    color : var(--text-text-main) !important;
}
.input-group-with-icon{
    position: relative;
    width: 100%;
}
.input-group-with-icon button{
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    position: absolute;
    padding: 0 13px !important;
    margin-right: 3px !important;
}
.input-group-with-icon i{
    color : var(--text-text-main);
}

.label-danger {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 30px;
    font-size: 10px;
    width: 15px;
    height: 15px;
    line-height: 1.0em;
    text-align: center;
    padding: 2px;
    font-weight: bold;
    color: #fff;
    background: #c32e2e;
}

 /* Default style for the checkbox */
table input[type="checkbox"] {
    appearance: none !important; /* Remove default styling */
    -webkit-appearance: none !important; /* For Safari */
    -moz-appearance: none !important; /* For Firefox */
    width: 20px !important; /* Set width of the checkbox */
    height: 20px !important; /* Set height of the checkbox */
    background-color: transparent !important; /* Default background */
    border: 2px solid var(--border-border-light) !important; /* Border when unchecked */
    cursor: pointer !important; /* Pointer on hover */
}

/* Style when the checkbox is checked */
table input[type="checkbox"]:checked {
    background-color: var(--text-Primary-text-primary-main) !important; /* Blue background */
    border: none !important; /* Remove border */
    position: relative !important; /* To position the pseudo-element */
}

/* Horizontal white line (only when checked) */
table input[type="checkbox"]:checked::before {
    content: '' !important; /* Pseudo-element to create the line */
    position: absolute !important;
    top: 50% !important; /* Center horizontally */
    left: 25%; /* Center the line within the checkbox */
    width: 50%; /* Make the line 50% of the checkbox's width */
    height: 2px !important; /* Height of the line */
    background-color: white !important; /* White line */
    transform: translateY(-50%) !important; /* Adjust for vertical alignment */
}

.select2-choices {
    border-radius: var(--XL) !important;
}

#main_navbar.closed-sidebar .treeview:is(.mm-active) > a > span:first-child,#main_navbar.closed-sidebar .treeview:is(.active) > a > span:first-child{
    left: 50%;
    transform: translateX(-50%);
}
.closed-sidebar .app-sidebar:hover .treeview:is(.mm-active) > a > span:first-child,.closed-sidebar .app-sidebar:hover .treeview:is(.active) > a > span:first-child{
    left: 1px !important;
    transform: none !important;
}
#main_navbar.closed-sidebar .treeview:is(.mm-active) .treeview-menu.mm-collapse.mm-show{
    height: 0px;
}
.closed-sidebar .app-sidebar:hover .treeview:is(.mm-active) .treeview-menu.mm-collapse.mm-show{
    height: auto !important;
}
#main_navbar.closed-sidebar .treeview:is(.mm-active) li.childItem:not(.active){
    display: none;
}
.closed-sidebar .app-sidebar:hover .treeview:is(.mm-active) li.childItem{
    display: block !important;
}
.vertical-nav-menu ul > li.active.childItem > a,
.vertical-nav-menu ul > li.childItem > a {
    display: flex;
    align-items: center;
    white-space: break-spaces !important;
    line-height: normal !important;
}
.closed-sidebar .app-sidebar:hover .vertical-nav-menu ul > li.active.childItem > a{
    padding-top: 17px;
    padding-bottom: 17px;
}
#main_navbar:not(.closed-sidebar) .vertical-nav-menu ul > li.active.childItem > a{
    padding-top: 17px;
    padding-bottom: 17px;
}
.toggle-group .btn{
    padding: 18px 10px 20px 17px !important;
    font-size: 14px !important;
    line-height: 0px !important;
}
.toggle-group .btn.toggle-on{
    padding: 19px 19px 13px 1px !important;
    font-size: 14px !important;
    line-height: 0px !important;
    color: white !important;
    text-align: center !important;
    margin: 0 auto;
}
body a.btn-action, button.btn-action{
    font-family: "Inter", 'OpenSans Regular', 'serif' !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #fff !important;
    background-color: var(--surface-Primary-surface-primary-dark-main) !important;
    border-color: var(--surface-Primary-surface-primary-dark-main) !important;
    padding: var(--buttons-padding) !important;
}
body a.btn-action:hover, button.btn-action:hover{
    background: var(--surface-Primary-surface-primary-dark-hover) !important;
}
#schoolyears-container{
    max-width: 400px;
    max-height: 40px;
}
.nav-link .nav-link-icon{
    opacity: 1;
    margin-left: 0;
}
.nav-item #displayIframe, .nav-item #display-page-infos{
    cursor: pointer;
    background: var(--surface-Secondary-surface-secondary);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
}
.nav-item #displayIframe i, .nav-item #display-page-infos i{
    color: white !important;
}
.nav-item #displayIframe:hover, .nav-item #display-page-infos:hover{
    background: var(--text-text-light) !important;
}
.nav-item #displayIframe:focus, .nav-item #display-page-infos:focus{
    background: var(--text-text-dark) !important;
}
.app-header.header-text-light .app-header-left > .nav > li > .nav-link{
    color : var(--text-text-main) !important;
}
#dropdown-toggle-schoolyears{
    padding-left: 15px;
    padding-right: 15px;
    max-height: 40px;
}
#dropdown-toggle-schoolyears span{
    color : #7A81AE !important;
}
#schoolyear-pick-icon{
    color : var(--text-text-light) !important;
    display: none;
}
#school-name-container{
    height: auto !important;
    white-space: break-spaces !important;
}
.app-theme-white .app-footer .app-footer__inner, .app-theme-white .app-header{
    background: transparent !important;
}
.app-sidebar.sidebar-text-light .vertical-nav-menu li a:hover{
    color: var(--text-text-dark);
}
.tag-unclickable-primary {
    padding: 8px 16px 8px 16px;
    text-wrap: nowrap;
    gap: 4px;
    border-radius: 50px;
    background: var(--surface-Primary-surface-primary-light-main);
    color: var(--text-Primary-text-primary-main);
}

.tag-unclickable-danger {
    padding: 8px 16px 8px 16px;
    text-wrap: nowrap;
    gap: 4px;
    border-radius: 50px;
    background: var(--surface-Semantic-surface-danger);
    color: var(--text-Semantic-text-danger);
}

.tag-unclickable-info {
    padding: 8px 16px 8px 16px;
    text-wrap: nowrap;
    gap: 4px;
    border-radius: 50px;
    background: var(--surface-Semantic-surface-info);
    color: var(--text-Semantic-text-info);
}

.tag-unclickable-success {
    padding: 8px 16px 8px 16px;
    text-wrap: nowrap;
    gap: 4px;
    border-radius: 50px;
    background: var(--surface-Semantic-surface-success) !important;
    color: var(--text-Semantic-text-success);
    a {
        color: var(--text-Semantic-text-success) !important;
    }
}

.tag-unclickable-warning {
    padding: 8px 16px 8px 16px;
    text-wrap: nowrap;
    gap: 4px;
    border-radius: 50px;
    background: var(--surface-Semantic-surface-warning);
    color: var(--text-Semantic-text-warning);
}

.tag-unclickable-disabled {
    padding: 8px 16px 8px 16px;
    text-wrap: nowrap;
    gap: 4px;
    border-radius: 50px;
    background: var(--surface-surface-main);
    background: var(--text-text-main);
}

.tag-clickable-disabled {
    width: fit-content;
    text-wrap: nowrap;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--surface-surface-main);
    border: 1px solid var(--border-border-light);
    color: var(--text-text-main) !important;
    a {
        color: var(--text-text-main) !important;
    }
}

.tag-clickable-primary {
    text-wrap: nowrap;
    width: fit-content;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--surface-Primary-surface-primary-light-main);
    border: 1px solid var(--border-Primary-border-primary);
    color: var(--text-Primary-text-primary-main) !important;
    a {
        color: var(--text-Primary-text-primary-main) !important;
    }
}

.tag-clickable-danger {
    text-wrap: nowrap;
    width: fit-content;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--surface-Semantic-surface-danger);
    border: 1px solid var(--border-Semantic-border-danger);
    color: var(--text-Semantic-text-danger) !important;
    a {
        color: var(--text-Semantic-text-danger) !important;
    }
}

.tag-clickable-info {
    text-wrap: nowrap;
    width: fit-content;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--surface-Semantic-surface-info);
    border: 1px solid var(--border-Semantic-border-info);
    color: var(--text-Semantic-text-info) !important;
    a {
        color: var(--text-Semantic-text-info) !important;
    }
}

.tag-clickable-success {
    text-wrap: nowrap;
    width: fit-content;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--surface-Semantic-surface-success);
    border: 1px solid var(--border-Semantic-border-success);
    color: var(--text-Semantic-text-success) !important;
    a {
        color: var(--text-Semantic-text-success) !important;
    }
}

.tag-clickable-warning {
    text-wrap: nowrap;
    width: fit-content;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--surface-Semantic-surface-warning);
    border: 1px solid var(--border-Semantic-border-warning);
    color: var(--text-Semantic-text-warning) !important;

    a {
        color: var(--text-Semantic-text-warning) !important;
    }
}

.onoffswitch-small-inner {
    width: 120px;
    display: flex;
}

.onoffswitch-small-inner:before {
    background: var(--text-Primary-text-primary-main);
    height: 24px;
    width: 58px;
    text-align: left;
    padding: 4px;
}

.onoffswitch-small-inner:after {
    height: 24px;
    width: 58px;
    text-align: right;
    padding: 4px;
}

.onoffswitch-small-switch {
    width: 20px;
    height: 20px;
    max-height: 20px;
    right: 34px;
}

.select2-search-choice {
    color: var(--text-Primary-text-primary-main, #2B4DFE) !important;
    border-radius: var(--L) !important;
    border: 1px solid var(--border-Primary-border-primary, #8094FE) !important;
    background: var(--surface-Primary-surface-primary-light-main, #F0F2FF) !important;
    display: flex;
    padding: var(--M) var(--XL) var(--M) var(--L) !important;
    justify-content: center;
    align-items: center;
    gap: var(--M);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px !important;
}

.select2-container-multi .select2-search-choice-close {
    left: unset !important;
    right: var(--M) !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
    margin: var(--S) !important;
}

.pick_container {
    padding: 0 25px 10px 25px !important;
    min-height: 160px;
}
.box .box-body{
    padding: 0;
}
.dataTable.normal-wrap > thead > tr > th {
    text-wrap: initial !important;
    padding: 1.55rem !important;
}
/* Some mobile adjustments */
@media(max-width : 767px){
    #schoolyear-pick-icon{
        display: flex;
    }
    #schoolyear-pick-text{
        display: none;
    }
    .skin-ecolefutee .navbar .nav li.nav-item{
        margin-right: 10px;
    }
    .page-header{
        flex-direction: column;
    }
    .page-header .btn{
        justify-content: start;
        align-items: center;
        display: flex;
        margin-bottom: 0 !important;
    }
}
@media(max-width : 800px){
    #hide-table td{
        padding-left: 50% !important;
    }
}
@media(max-width : 991px){
    .app-header__content{
        width: 90% !important;
        margin: inherit !important;
    }
    .app-theme-white .app-header{
        background: var(--surface-Menu-surface-menu-2) !important;
    }
    .app-header.header-text-light .header-mobile-open{
        background: #fafafa !important;
    }
    .dropDown-lang-content{
        width: 90% !important;
    }
    .dataTables_filter{
        float: none;
    }
    #main_navbar.closed-sidebar .treeview:is(.mm-active) > a > span:first-child{
        left: 0;
        transform: none;
    }
    #main_navbar.closed-sidebar .treeview:is(.mm-active) li.childItem:not(.active){
        display: block;
    }
    #main_navbar.closed-sidebar .treeview:is(.mm-active) .treeview-menu.mm-collapse.mm-show{
        height: auto;
    }
    .drawer.open{
        width: 100% !important;
    }
    .drawer .close-btn{
        top: 32px;
        position: relative;
    }
    .top{
        padding: 0;
    }
    .box .box-body{
        padding-top: 0;
    }
    .btn:not(.btnSuivi){
        margin-bottom: 5px;
    }
    .btn-action{
        margin-bottom: 5px;
        margin-top: 5px;
    }
    .dropdown-menu{
        width: 90% !important;
    }
}
@media(max-width : 500px){
    .menutopbar.navbar{
        padding: 0;
        width: 100%;
    }
    .skin-ecolefutee .navbar .nav li.nav-item{
        margin-right: 5px;
    }
    .dropdownLang{
        margin-right: 0;
    }
}

.dataTables_wrapper > .top {
    display: flex !important;
    gap: 16px;
    padding-top : 0;
    justify-content: center !important;
    align-items: center !important;
    .dataTables_filter {
        float: right !important;
        width: 100% !important;
        margin: 0;
    }

    .custom-html,
    .dt-buttons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0;
    }
}

.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
    text-align: left !important;
}

.dropdown-toggle {
    display: flex;
}

.dropdown:not(.show) > .dropdown-toggle:after,
.btn-group:not(.show) > .dropdown-toggle:after
{
    mask-image: url(ef_icons/keyboard_arrow_down.svg);
    mask-size: 100% 100% !important;
    mask-repeat: no-repeat;
    color: currentColor;
    background: currentColor;
    height: 25px !important;
    width: 25px !important;
    opacity: 1 !important;
}

.dropdown:is(.show) > .dropdown-toggle:after,
.btn-group:is(.show) > .dropdown-toggle:after
{
    mask-image: url(ef_icons/keyboard_arrow_up.svg);
    mask-size: 100% 100% !important;
    mask-repeat: no-repeat;
    color: currentColor;
    background: currentColor;
    height: 25px !important;
    width: 25px !important;
    opacity: 1 !important;
}

.dropdown-toggle:hover:after {
    color: currentColor;
}
.modal-header, .modal-footer{
    background: white !important;
    border: none !important;
}
.modal-header .modal-title{
    font-family: "Inter", 'OpenSans Regular', 'serif' !important;
    color: var(--text-text-dark) !important;
    font-weight: bold;
}
#magicBox a.btn{
    padding: var(--buttons-padding) !important;
}
.pick_title{
    background: var(--surface-Primary-surface-primary-dark-main) !important;
    border: none !important;
}
table.dataTable.normal-wrap thead .sorting:after,
table.dataTable.normal-wrap thead .sorting_asc:after,
table.dataTable.normal-wrap thead .sorting_desc:after,
table.dataTable.normal-wrap thead .sorting_asc_disabled:after,
table.dataTable.normal-wrap thead .sorting_desc_disabled:after {
    position: absolute !important;
}

.btn.btn-default:hover, .btn.btn-default:active, .btn.btn-default.hover{
    background-color: var(--surface-pellet-surface-pellet-primary) !important;
    color: var(--surface-surface-hover) !important;
}
.table thead th{
    border-bottom: none !important;
}

.show.d-flex{
    display: flex !important;
}

.select2-container .select2-choice .select2-arrow b {
    display: block;
    width: 100%;
    height: 100%;
    background: url(ef_icons/keyboard_arrow_down.svg) no-repeat -4px 9px;
}

.select2-container {
    padding: var(--buttons-padding);
    top: -5px;
}

.select2-dropdown-open .select2-choice .select2-arrow b, .select2-dropdown-open .select2-choice div b {
    background: url(ef_icons/keyboard_arrow_up.svg) no-repeat -4px 9px;
}

.select2-chosen, .select2-choice > span:first-child, .select2-container .select2-choices .select2-search-field input {
    padding: 10px 12px !important;
}

label.d-flex input[type="checkbox"]{
    height: auto !important;
}
.select2-results .select2-highlighted{
    color: white !important;
    padding: 4px 16px !important;
    background-color: var(--surface-Primary-surface-primary-dark-main) !important;
}
fieldset{
    background: white;
    legend{
        background: white;
    }
}
.filter-container.ismono{
    margin: 0 !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
}
.pagination li:first-child a{
    max-width: 40px;
}
.pagination li a:hover{
    background: var(--surface-Secondary-surface-secondary) !important;
    color: var(--surface-Secondary-surface-secondary) !important;
}
.dataTables_wrapper ul.pagination{
    justify-content: center;
    float: none;
    margin-bottom: 10px !important;
}

.col-sm-7 ul.pagination{
    justify-content: left;
}
.sticky-header {
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 999999999;
    background: white;
    overflow-y: hidden;
    overflow-x: auto; /* Enable horizontal scrolling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--text-text-lighter) white ; /* Thumb color and track color */
    display: none;
    white-space: nowrap;
    border-radius: var(--XXL) !important;
    box-shadow: 1px 4px 8px 1px #0000001A !important;
    padding: 10px 5px;
}
/* Webkit browsers (Chrome, Edge, Safari) */
.sticky-header::-webkit-scrollbar {
  height: 3px; /* Set the scrollbar width */
}

.sticky-header::-webkit-scrollbar-thumb {
    background: var(--text-text-lighter) !important;
    height: 3px !important;
}

.sticky-header::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Set the scrollbar track color */
}
.sticky-header .sticky-table {
    width: 100%;
    border-collapse: collapse;
    min-height: 50px;
}
.sticky-header th {
    background: white;
    padding: 10px;
    text-align: left;
    white-space: nowrap;
    font-family: "Inter", 'OpenSans Regular', 'serif';
}

@media(max-width: 800px){
    .sticky-header {
        display: none !important;
    }
}

.sticky-table-wrapper {
  max-height: 100vh; /* Set the max height for the table wrapper */
  overflow-y: auto; /* Enable vertical scrolling */
}

.sticky-table thead th {
  position: sticky !important;
  top: 0;
  z-index: 1020; /* Ensure the header stays above the table content */
  background-color: #fff; /* Match the table's header background color */
}
.sticky-table tbody td {
  vertical-align: middle; /* Ensures content is aligned nicely */
}

.input-group-addon{
    padding: 0 8px;
}
.dropdown-menu.show{
    display: table-cell !important;
}
td.show{
    display: table-cell !important;
}
.dataTable > thead > tr > th.force-border-bottom, .force-border-bottom{
    border-bottom: 1px solid #dddddd !important;
}
.dataTable > thead > tr > th.force-border-right, .force-border-right{
    border-right: 1px solid #dddddd !important;
}

.dt-buttons {
    gap: 16px;
}

textarea{
    padding: 8px 17px 7px 23px !important;
}
.btn-primary:disabled:hover{
    background-color: var(--surface-Primary-surface-primary-dark-main) !important;
    border-color: var(--surface-Primary-surface-primary-dark-main) !important;
}
.color-secondary{
    color: var(--surface-Secondary-surface-secondary) !important;
}
.tag-clickable-success a.color-secondary{
    color: var(--surface-Secondary-surface-secondary) !important;
}
.toggle.btn{
    min-height: 40px !important;
}
.badge{
    text-wrap: auto !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-family: "Inter", 'OpenSans Regular', 'serif' !important;
    font-size: 11px !important;
    margin-bottom: 5px !important;
    min-width: 100px;
}
.nav-tabs-custom.profile-nav{
    background: white !important;
    border-radius: var(--XXL) !important;
}
.tag{
    margin: 4px 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, a, div {
    font-family: "Inter", 'OpenSans Regular', 'serif' !important;
}
button, span, li{
     font-family: "Inter", 'OpenSans Regular', 'serif';
}
.box.box-default.bg-white{
    border-radius: var(--XXL) !important;
}
.box.box-default.bg-white .box-header{
    background: white !important; 
    padding: 15px;
    border-radius: var(--XXL) !important;
}
.box.box-default.bg-white .box-body{
    background: white !important; 
    padding: 15px;
    border-radius: var(--XXL) !important;
}
.nav-tabs-custom > .nav-tabs > li{
    max-width: 100% !important;
}
table .btn{
    margin-bottom: 5px !important;
}
.alert-success,.badge-success{
    background: var(--surface-Semantic-surface-success) !important;
    color: var(--text-Semantic-text-success) !important;
    border: 1px solid var(--text-Semantic-text-success) !important;
}
.alert-danger,.badge-danger{
    background: var(--surface-Semantic-surface-danger) !important;
    color: var(--text-Semantic-text-danger) !important;
    border: 1px solid var(--text-Semantic-text-danger) !important;
}
.alert-info,.badge-info{
    background: var(--surface-Semantic-surface-info) !important;
    color: var(--text-Semantic-text-info) !important;
    border: 1px solid var(--text-Semantic-text-info) !important;
}
.alert-warning,.badge-warning{
    background: var(--surface-Semantic-surface-warning) !important;
    color: var(--text-Semantic-text-warning) !important;
    border: 1px solid var(--text-Semantic-text-warning) !important;
}
.alert-primary,.badge-primary{
    background: var(--surface-Primary-surface-primary-light-main) !important;
    color: var(--text-Primary-text-primary-main) !important;
    border: 1px solid var(--text-Primary-text-primary-main) !important;
}
.popover-header{
    color :var(--surface-surface-inverted) !important;
}
.popover-body{
    color: white !important;
}
.bg-white-radius{
    background: white !important;
    border-radius: var(--XXL) !important;
}
/* fix tables on medium and small devices */
@media(max-width : 1650px){
    .dataTable > thead > tr > th{
        text-wrap: initial !important;
        font-size: 13px;
    }
    .dataTable:not(.nov2touching) > tbody > tr > td{
        text-wrap: initial !important;
    }
    .sticky-header th{
        white-space: normal;
        text-align: center;
        font-size: 13px;
    }
    .filter-pill{
         margin : .25em 0;
    }
    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td{
        text-align: center !important;
    }
    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after{
        position: absolute !important;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }
    table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting{
        padding-right: 30px !important;
    }
}

.sticky-table > thead, table > thead{
    box-shadow: none !important;
}
.tab-legend-v2{
    min-width: 200px;
}
.small-box > .small-box-footer{
    min-height: 120px;
}
a.list_separator_comma{
    text-decoration: underline;
    color: var(--text-Primary-text-primary-main);
}
.btn_credit{
    background: var(--surface-Primary-surface-primary-light-main) !important;
    color: #ab47bc !important;
    border: 1px solid #ab47bc !important;
    margin: 3.12px;
}
.drop-marg{
    border: none !important;
}

.custom-filter-message {
    background-color: transparent;
    border-radius: 25px;
    padding: 15px 20px;
    box-shadow: 0px 6px 12px 0px #0000001A;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    color: #333;
}

.input-group {
    .form-control{
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .input-group-append,
    .input-group-append > button {
        border-bottom-left-radius: 0 !important;
        border-top-left-radius: 0 !important;
    }
}

.dropdown.no-arrow .dropdown-toggle:after{
    content: none !important;
}
.no-after::after {
    content: none !important;
}

/* Fake scrollbar above */
.fake-scrollbar {
    width: 100%;
    height: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    margin-bottom: -10px; /* Prevents extra space */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--text-text-lighter) transparent ; /* Thumb color and track color */
}

/* Scrollbar styling */
.fake-scrollbar::-webkit-scrollbar {
    height: 8px;
    background: transparent;
}

/* Sync scrollbar width */
.fake-scrollbar-content {
    height: 1px;
}

/* Webkit browsers (Chrome, Edge, Safari) */
.fake-scrollbar::-webkit-scrollbar {
  height: 3px; /* Set the scrollbar width */
  background: transparent;
}

.fake-scrollbar::-webkit-scrollbar-thumb {
    background: var(--text-text-lighter) !important;
    height: 3px !important;
}

.fake-scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Set the scrollbar track color */
}

.jss207.jss212.jss213{
    min-height: 130px;
}

.btn-check:checked + label {
    background-color: #cfe5ff !important; /* Highlight active button */
    /*border: solid 1px #007bff !important;*/
}

.btn-group-toggle input {
    display: none !important;
}

.btn-group-toggle label:nth-child(2) {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.btn-group-toggle label:nth-child(4) {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.btn-group-toggle label {
    width: 60px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    box-shadow: 0 12px 12px 0 #0000001A;
    :hover {
        cursor: pointer;
    }
}

.btn-outline-secondary:hover i {
    color: white !important;
}

.btn-outline-info:hover i,.btn-outline-info:hover a{
    color: white !important;
}

.link-fc {
    color: var(--text-Primary-text-primary-main) !important;
}

.filter-action-container .page_buttons{
    flex-wrap: wrap;
    gap: 5px;
}

#main_navbar.closed-sidebar .treeview-dash:is(.mm-active) > a > span:first-child,#main_navbar.closed-sidebar .treeview-dash:is(.active) > a > span:first-child{
    left: 50%;
    transform: translateX(-50%);
}
.closed-sidebar .app-sidebar:hover .treeview-dash:is(.mm-active) > a > span:first-child,.closed-sidebar .app-sidebar:hover .treeview-dash:is(.active) > a > span:first-child{
    left: 1px !important;
    transform: none !important;
}
#main_navbar.closed-sidebar .treeview-dash:is(.mm-active) .treeview-dash-menu.mm-collapse.mm-show{
    height: 0px;
}
.closed-sidebar .app-sidebar:hover .treeview-dash:is(.mm-active) .treeview-dash-menu.mm-collapse.mm-show{
    height: auto !important;
}
#main_navbar.closed-sidebar .treeview-dash:is(.mm-active) li.childItem:not(.active){
    display: none;
}
.closed-sidebar .app-sidebar:hover .treeview-dash:is(.mm-active) li.childItem{
    display: block !important;
}

.fc-prev-button{
    background: white !important;
    border: 1px solid var(--surface-Primary-surface-primary-dark-main) !important;
    padding: 7px 9px !important;
}
.fc-prev-button .fa-chevron-left, .fc-prev-button .fc-icon-left-single-arrow {
    -webkit-mask-image: url('ef_icons/arrow_backward.svg');
    mask-image: url('ef_icons/arrow_backward.svg');
    color: var(--surface-Primary-surface-primary-dark-main) !important;
    display: inline-block !important;
    width: 1em;
    height: 1em;
    vertical-align: middle !important;
    background-color: currentColor !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    width: 20px;
    height: 23px;
}

.fc-next-button{
    background: white !important;
    border: 1px solid var(--surface-Primary-surface-primary-dark-main) !important;
    padding: 7px 9px !important;
    margin-left: 3px !important;
}
.fc-next-button .fa-chevron-right, .fc-next-button .fc-icon-right-single-arrow {
    -webkit-mask-image: url('ef_icons/arrow_forward.svg');
    mask-image: url('ef_icons/arrow_forward.svg');
    color: var(--surface-Primary-surface-primary-dark-main) !important;
    display: inline-block !important;
    width: 1em;
    height: 1em;
    vertical-align: middle !important;
    background-color: currentColor !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    width: 20px;
    height: 23px;
}
.fc-next-button:hover{
    color : white !important;
    .fa-chevron-right{
        color: white !important;
    }
}
.fc-prev-button:hover{
    color : white !important;
    .fa-chevron-left{
        color: white !important;
    }
}
.custom-form-inline .form-group{
    padding: 0 9px;
    min-width: 180px;
}

.fc-toolbar.fc-header-toolbar button{
    min-height: 35px !important;
    background: white !important;
    border: 1px solid var(--surface-Primary-surface-primary-dark-main) !important;
    color: var(--surface-Primary-surface-primary-dark-main) !important;
}

.fc-toolbar.fc-header-toolbar button:hover{
    background: var(--surface-Primary-surface-primary-dark-main) !important;
    color: white !important;
    span{
        color: white !important;
    }
}

.fc-toolbar.fc-header-toolbar button.fc-state-active{
    background: var(--surface-Primary-surface-primary-dark-main) !important;
    color: white !important;
}
.dropdown-menu li:not(.dropdown-item) a{
    text-wrap: initial;
}
.br-surface-menu-1{
    border: 1px solid var(--surface-Menu-surface-menu-1) !important;
}
.br-surface-menu-2{
    border: 1px solid var(--surface-Menu-surface-menu-2) !important;
}
.br-surface-menu-3{
    border: 1px solid var(--surface-Menu-surface-menu-3) !important;
}
.br-surface-menu-4{
    border: 1px solid var(--surface-Menu-surface-menu-4) !important;
}
.br-surface-menu-5{
    border: 1px solid var(--surface-Menu-surface-menu-5) !important;
}
.br-surface-menu-6{
    border: 1px solid var(--surface-Menu-surface-menu-6) !important;
}
.br-surface-menu-7{
    border: 1px solid var(--surface-Menu-surface-menu-7) !important;
}

/* Common Styles for Hover and Active States */
.hv-surface-menu-1:hover .linkMenuHref,
.hv-surface-menu-1 .mm-active,
.hv-surface-menu-2:hover .linkMenuHref,
.hv-surface-menu-2 .mm-active,
.hv-surface-menu-3:hover .linkMenuHref,
.hv-surface-menu-3 .mm-active,
.hv-surface-menu-4:hover .linkMenuHref,
.hv-surface-menu-4 .mm-active,
.hv-surface-menu-5:hover .linkMenuHref,
.hv-surface-menu-5 .mm-active,
.hv-surface-menu-6:hover .linkMenuHref,
.hv-surface-menu-6 .mm-active,
.hv-surface-menu-7:hover .linkMenuHref,
.hv-surface-menu-7 .mm-active {
    margin-bottom: 10px !important;
}

.hv-surface-menu-1:hover .menu-toggle-text,
.hv-surface-menu-1 .mm-active .menu-toggle-text,
.hv-surface-menu-2:hover .menu-toggle-text,
.hv-surface-menu-2 .mm-active .menu-toggle-text,
.hv-surface-menu-3:hover .menu-toggle-text,
.hv-surface-menu-3 .mm-active .menu-toggle-text,
.hv-surface-menu-4:hover .menu-toggle-text,
.hv-surface-menu-4 .mm-active .menu-toggle-text,
.hv-surface-menu-5:hover .menu-toggle-text,
.hv-surface-menu-5 .mm-active .menu-toggle-text,
.hv-surface-menu-6:hover .menu-toggle-text,
.hv-surface-menu-6 .mm-active .menu-toggle-text,
.hv-surface-menu-7:hover .menu-toggle-text,
.hv-surface-menu-7 .mm-active .menu-toggle-text {
    display: block;
    width: auto;
    border-radius: var(--XXL) !important;
    padding: 6px 0px 6px 10px;
    font-weight: bold;
}

/* Styles for Each Menu */
.hv-surface-menu-1:hover .menu-toggle-text,
.hv-surface-menu-1 .mm-active .menu-toggle-text {
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-1) !important;
    border: 1px solid var(--border-Menu-border-menu-1) !important;
}

.hv-surface-menu-2:hover .menu-toggle-text,
.hv-surface-menu-2 .mm-active .menu-toggle-text {
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-2) !important;
    border: 1px solid var(--border-Menu-border-menu-2) !important;
}

.hv-surface-menu-3:hover .menu-toggle-text,
.hv-surface-menu-3 .mm-active .menu-toggle-text {
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-3) !important;
    border: 1px solid var(--border-Menu-border-menu-3) !important;
}

.hv-surface-menu-4:hover .menu-toggle-text,
.hv-surface-menu-4 .mm-active .menu-toggle-text {
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-4) !important;
    border: 1px solid var(--border-Menu-border-menu-4) !important;
}

.hv-surface-menu-5:hover .menu-toggle-text,
.hv-surface-menu-5 .mm-active .menu-toggle-text {
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-5) !important;
    border: 1px solid var(--border-Menu-border-menu-5) !important;
}

.hv-surface-menu-6:hover .menu-toggle-text,
.hv-surface-menu-6 .mm-active .menu-toggle-text {
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-6) !important;
    border: 1px solid var(--border-Menu-border-menu-6) !important;
}

.hv-surface-menu-7:hover .menu-toggle-text,
.hv-surface-menu-7 .mm-active .menu-toggle-text {
    background: var(--surface-Menu-Sous-menu-Surface-sous-menu-7) !important;
    border: 1px solid var(--border-Menu-border-menu-7) !important;
}


.v-none{
    visibility: hidden !important;
}
ul.treeview-menu .childItem i{
    display: none !important;
}

#main_navbar.closed-sidebar .childItem.no-display-closed {
    display: none; /* Remove !important */
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .childItem.no-display-closed,
.closed-sidebar .app-sidebar:hover .childItem.no-display-closed {
    display: block !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

#main_navbar.closed-sidebar .childItem.spaced-display-closed {
    padding-top: 15px;
    padding-bottom: 7px;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .childItem.spaced-display-closed {
    padding: 5px;
}


.wanted_level {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 20px;
}

.header-menu.nav .dropdown-menu{
    max-height: initial;
}

.ef-slim-scroll {
  flex-wrap: wrap;
}

.ef-slim-scroll::-webkit-scrollbar {
  height: 2px; /* Slim scrollbar */
}

.ef-slim-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ef-slim-scroll::-webkit-scrollbar-thumb {
  background-color: var(--text-text-lighter);
  border-radius: 2px;
}

.hv-surface-menu-1:hover .menu-icon,
.hv-surface-menu-1 .mm-active .menu-icon,
.hv-surface-menu-1.light-up-icon .menu-icon,
.hv-surface-menu-2:hover .menu-icon,
.hv-surface-menu-2 .mm-active .menu-icon,
.hv-surface-menu-2.light-up-icon .menu-icon,
.hv-surface-menu-3:hover .menu-icon,
.hv-surface-menu-3 .mm-active .menu-icon,
.hv-surface-menu-3.light-up-icon .menu-icon,
.hv-surface-menu-4:hover .menu-icon,
.hv-surface-menu-4 .mm-active .menu-icon,
.hv-surface-menu-4.light-up-icon .menu-icon,
.hv-surface-menu-5:hover .menu-icon,
.hv-surface-menu-5 .mm-active .menu-icon,
.hv-surface-menu-5.light-up-icon .menu-icon,
.hv-surface-menu-6:hover .menu-icon,
.hv-surface-menu-6 .mm-active .menu-icon,
.hv-surface-menu-6.light-up-icon .menu-icon,
.hv-surface-menu-7:hover .menu-icon,
.hv-surface-menu-7 .mm-active .menu-icon,
.hv-surface-menu-7.light-up-icon .menu-icon{
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 32px;
    position: absolute;
    left: 1px;
    border: 1px;
    i {
        color: white !important;
        opacity: 1 !important;
    }
}

.hv-surface-menu-1:hover .menu-icon,
.hv-surface-menu-1 .mm-active .menu-icon,
.hv-surface-menu-1.light-up-icon .menu-icon  {
    background: var(--border-Menu-border-menu-1) !important;
}

.hv-surface-menu-2:hover .menu-icon,
.hv-surface-menu-2 .mm-active .menu-icon,
.hv-surface-menu-2.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-2) !important;
}

.hv-surface-menu-3:hover .menu-icon,
.hv-surface-menu-3 .mm-active .menu-icon,
.hv-surface-menu-3.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-3) !important;
}

.hv-surface-menu-4:hover .menu-icon,
.hv-surface-menu-4 .mm-active .menu-icon,
.hv-surface-menu-4.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-4) !important;
}

.hv-surface-menu-5:hover .menu-icon,
.hv-surface-menu-5 .mm-active .menu-icon,
.hv-surface-menu-5.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-5) !important;
}

.hv-surface-menu-6:hover .menu-icon,
.hv-surface-menu-6 .mm-active .menu-icon,
.hv-surface-menu-6.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-6) !important;
}

.hv-surface-menu-7:hover .menu-icon,
.hv-surface-menu-7 .mm-active .menu-icon,
.hv-surface-menu-7.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-7) !important;
}

.hv-surface-menu-1.last-child:hover .linkMenuHref,
.hv-surface-menu-1.last-child .mm-active,
.hv-surface-menu-2.last-child:hover .linkMenuHref,
.hv-surface-menu-2.last-child .mm-active,
.hv-surface-menu-3.last-child:hover .linkMenuHref,
.hv-surface-menu-3.last-child .mm-active,
.hv-surface-menu-4.last-child:hover .linkMenuHref,
.hv-surface-menu-4.last-child .mm-active,
.hv-surface-menu-5.last-child:hover .linkMenuHref,
.hv-surface-menu-5.last-child .mm-active,
.hv-surface-menu-6.last-child:hover .linkMenuHref,
.hv-surface-menu-6.last-child .mm-active,
.hv-surface-menu-7.last-child:hover .linkMenuHref,
.hv-surface-menu-7.last-child .mm-active {
    margin-bottom: 18px !important;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .last-child.m-margin-hv,
.closed-sidebar .app-sidebar:hover .last-child.m-margin-hv {
     margin-bottom: 3px !important;
}

#main_navbar.closed-sidebar .menu-toggle-text {
    display: none; /* Remove !important */
}

#main_navbar.closed-sidebar .menu-icon{
    left: 42%;
    transform: translateX(-48%);
}

#main_navbar.closed-sidebar .mm-active .menu-icon i,
#main_navbar.closed-sidebar .light-up-icon .menu-icon i{
    margin-left: initial !important;
    left: 21% !important;
    top: 62%;
}

#main_navbar.closed-sidebar .light-up-icon .parenthref,
#main_navbar.closed-sidebar li.spaced-display-closed.mm-active .parenthref{
    min-height: 38px;
}

#main_navbar.closed-sidebar li.last-child .parenthref{
    min-height: 28px !important;
}

#main_navbar.closed-sidebar .light-up-icon,
#main_navbar.closed-sidebar li.spaced-display-closed.mm-active
{
    padding-top: 12px !important;
    padding-bottom: 5px !important;
    min-height: 66px;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .menu-toggle-text,
.closed-sidebar .app-sidebar:hover .menu-toggle-text {
    display: flex !important;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .menu-icon{
    left: 1px;
    transform: none;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .light-up-icon .parenthref,
#main_navbar.closed-sidebar .vertical-nav-menu:hover li.spaced-display-closed.mm-active .parenthref,
#main_navbar.closed-sidebar .vertical-nav-menu:hover li.last-child .parenthref{
    min-height: auto !important;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .light-up-icon,
#main_navbar.closed-sidebar .vertical-nav-menu:hover li.spaced-display-closed.mm-active{
    min-height: auto !important;
}

.app-sidebar .ps__rail-x, .app-sidebar .ps__rail-y {
    width: 0px !important;
    height: 0px !important;
    opacity: 0 !important;
}

.app-sidebar .ps__thumb-x,.app-sidebar .ps__thumb-y {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

.ef-slim-scroll a, .ef-slim-scroll span{
    min-width: auto;
    width: auto;
    text-wrap: nowrap !important;
}

.w-55 {
    width: 55% !important;
}
label.alert-image.filterCount{
    color: white !important;
}

li.dropdown-item.status_step_changer{
    font-size: 12px;
}
.uper-name{
    text-transform: uppercase;
}

.yellow-selection{
    background: #d2d21130;
}

.box-header .box-title{
    max-width: 50%;
}

.overflow-few-lines{
  max-width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* Ensures wrapping */
  word-break: break-word; /* Prevents overflow due to long words */
}

.btn-group.group-conditions .btn{
    color: white !important;
}




.hv-surface-menu-1:hover .menu-icon,
.hv-surface-menu-1 .mm-active .menu-icon,
.hv-surface-menu-1.light-up-icon .menu-icon,
.hv-surface-menu-2:hover .menu-icon,
.hv-surface-menu-2 .mm-active .menu-icon,
.hv-surface-menu-2.light-up-icon .menu-icon,
.hv-surface-menu-3:hover .menu-icon,
.hv-surface-menu-3 .mm-active .menu-icon,
.hv-surface-menu-3.light-up-icon .menu-icon,
.hv-surface-menu-4:hover .menu-icon,
.hv-surface-menu-4 .mm-active .menu-icon,
.hv-surface-menu-4.light-up-icon .menu-icon,
.hv-surface-menu-5:hover .menu-icon,
.hv-surface-menu-5 .mm-active .menu-icon,
.hv-surface-menu-5.light-up-icon .menu-icon,
.hv-surface-menu-6:hover .menu-icon,
.hv-surface-menu-6 .mm-active .menu-icon,
.hv-surface-menu-6.light-up-icon .menu-icon,
.hv-surface-menu-7:hover .menu-icon,
.hv-surface-menu-7 .mm-active .menu-icon,
.hv-surface-menu-7.light-up-icon .menu-icon{
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 32px;
    position: absolute;
    left: 1px;
    border: 1px;
    i {
        color: white !important;
        opacity: 1 !important;
    }
}

.hv-surface-menu-1:hover .menu-icon,
.hv-surface-menu-1 .mm-active .menu-icon,
.hv-surface-menu-1.light-up-icon .menu-icon  {
    background: var(--border-Menu-border-menu-1) !important;
}

.hv-surface-menu-2:hover .menu-icon,
.hv-surface-menu-2 .mm-active .menu-icon,
.hv-surface-menu-2.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-2) !important;
}

.hv-surface-menu-3:hover .menu-icon,
.hv-surface-menu-3 .mm-active .menu-icon,
.hv-surface-menu-3.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-3) !important;
}

.hv-surface-menu-4:hover .menu-icon,
.hv-surface-menu-4 .mm-active .menu-icon,
.hv-surface-menu-4.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-4) !important;
}

.hv-surface-menu-5:hover .menu-icon,
.hv-surface-menu-5 .mm-active .menu-icon,
.hv-surface-menu-5.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-5) !important;
}

.hv-surface-menu-6:hover .menu-icon,
.hv-surface-menu-6 .mm-active .menu-icon,
.hv-surface-menu-6.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-6) !important;
}

.hv-surface-menu-7:hover .menu-icon,
.hv-surface-menu-7 .mm-active .menu-icon,
.hv-surface-menu-7.light-up-icon .menu-icon {
    background: var(--border-Menu-border-menu-7) !important;
}

.hv-surface-menu-1.last-child:hover .linkMenuHref,
.hv-surface-menu-1.last-child .mm-active,
.hv-surface-menu-2.last-child:hover .linkMenuHref,
.hv-surface-menu-2.last-child .mm-active,
.hv-surface-menu-3.last-child:hover .linkMenuHref,
.hv-surface-menu-3.last-child .mm-active,
.hv-surface-menu-4.last-child:hover .linkMenuHref,
.hv-surface-menu-4.last-child .mm-active,
.hv-surface-menu-5.last-child:hover .linkMenuHref,
.hv-surface-menu-5.last-child .mm-active,
.hv-surface-menu-6.last-child:hover .linkMenuHref,
.hv-surface-menu-6.last-child .mm-active,
.hv-surface-menu-7.last-child:hover .linkMenuHref,
.hv-surface-menu-7.last-child .mm-active {
    margin-bottom: 18px !important;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .last-child.m-margin-hv,
.closed-sidebar .app-sidebar:hover .last-child.m-margin-hv {
     margin-bottom: 3px !important;
}

#main_navbar.closed-sidebar .menu-toggle-text {
    display: none; /* Remove !important */
}

#main_navbar.closed-sidebar .menu-icon{
    left: 42%;
    transform: translateX(-48%);
}

#main_navbar.closed-sidebar .menu-icon i{
    margin-left: initial !important;
    left: 27% !important;
    top: 62%;
}

#main_navbar.closed-sidebar .mm-active .menu-icon i,
#main_navbar.closed-sidebar .light-up-icon .menu-icon i{
    margin-left: initial !important;
    left: 21% !important;
    top: 62%;
}

#main_navbar.closed-sidebar .light-up-icon .parenthref,
#main_navbar.closed-sidebar li.spaced-display-closed.mm-active .parenthref{
    min-height: 38px;
}

#main_navbar.closed-sidebar li.last-child .parenthref{
    min-height: 28px !important;
}

#main_navbar.closed-sidebar .light-up-icon,
#main_navbar.closed-sidebar li.spaced-display-closed.mm-active
{
    padding-top: 12px !important;
    padding-bottom: 5px !important;
    min-height: 66px;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .menu-toggle-text,
.closed-sidebar .app-sidebar:hover .menu-toggle-text {
    display: flex !important;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .menu-icon{
    left: 1px;
    transform: none;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .light-up-icon .parenthref,
#main_navbar.closed-sidebar .vertical-nav-menu:hover li.spaced-display-closed.mm-active .parenthref,
#main_navbar.closed-sidebar .vertical-nav-menu:hover li.last-child .parenthref{
    min-height: auto !important;
}

#main_navbar.closed-sidebar .vertical-nav-menu:hover .light-up-icon,
#main_navbar.closed-sidebar .vertical-nav-menu:hover li.spaced-display-closed.mm-active{
    min-height: auto !important;
}

.app-sidebar .ps__rail-x, .app-sidebar .ps__rail-y {
    width: 0px !important;
    height: 0px !important;
    opacity: 0 !important;
}

.app-sidebar .ps__thumb-x,.app-sidebar .ps__thumb-y {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

.ef-slim-scroll a, .ef-slim-scroll span{
    min-width: auto;
    width: auto;
    text-wrap: nowrap !important;
}

.w-55 {
    width: 55% !important;
}
label.alert-image.filterCount{
    color: white !important;
}

li.dropdown-item.status_step_changer{
    font-size: 12px;
}
.administratifsFoldersContent:first-of-type:not(.administratifsFoldersContent .administratifsFoldersContent) {
    border: 1px dashed #2b4dfe;
    border-radius: 22px;
    padding-left: 10px;
}
.uper-name{
    text-transform: uppercase;
}

.yellow-selection{
    background: #d2d21130;
}

.nocol div[class*="col-"] {
    padding: 0 !important;
}

.bg-semantic-danger {
    background: var(--surface-Semantic-surface-danger, #FFF3F7) !important;
}

.bg-semantic-warning {
    background: var(--surface-Semantic-surface-warning, #FFF8E5) !important;
}

.text-semantic-danger {
    color: var(--text-Semantic-text-danger) !important;
}

.text-semantic-warning {
    color: var(--text-Semantic-text-warning) !important;
}

.text-text-light {
    color: var(--text-text-light) !important;
}

.padding-modal {
    padding: calc(var(--XXL) - 15px);
}

.referenciels {
    border-radius: var(--XXL, 32px);
    border: 1px solid var(--border-border-light, #BFC3DB);
    background: var(--surface-surface-background, #FAFAFA);
}

.btn-semantic-warning {
    background: var(--text-Semantic-text-warning) !important;
    color: var(--text-Primary-text-primary-inverted) !important;
}

table[id^="teletransmission"] {
    display: table !important;
}

.app-sidebar .scrollbar-sidebar{
    -webkit-overflow-scrolling: touch;
    max-height: 300vh;
}