:root {
    /* Définition des couleurs pour le mode clair (par défaut) */
    /*--bg-color: #EBECED;*/
    --bg-color: #F2F4F7;
    --sub-bg-color: #ffffff;
    --text-color: #12131D; /* Couleur de texte par défaut */
    --h1-color: #000; /* Couleur spécifique pour h1 */
    --h2-color: #103959; /* Couleur spécifique pour h2 */
    --h3-color: #CE1424; /* Couleur spécifique pour h3 */
    --link-bg-color: #103959; /* Couleur de fond pour les liens */
    --link-text-color: #fff; /* Couleur de texte pour les liens */

    /* Variables pour le mode sombre */
    --bg-color-dark: #12131D;
    --sub-bg-color-dark: #1B1C29;
    --text-color-dark: #EBECED; /* Couleur de texte pour le mode sombre */
    --h1-color-dark: #fff; /* Couleur de h1 en mode sombre */
    --h2-color-dark: #fcdddd; /* Couleur de h2 en mode sombre */
    --h3-color-dark: #fff; /* Couleur de h3 en mode sombre */
    --link-bg-color-dark: #5FBEF3; /* Couleur de fond pour les liens en mode sombre */
    --link-text-color-dark: #fff; /* Couleur de texte pour les liens en mode sombre */
}
*{
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transition: background-color 1s ease, color 1.5s ease;
    -webkit-transition: background-color 1s ease, color 1.5s ease;
    -moz-transition: background-color 1s ease, color 1.5s ease;
    -ms-transition: background-color 1s ease, color 1.5s ease;
    -o-transition: background-color 1s ease, color 1.5s ease;
    font-family: "Kanit" , "Helvetica Neue", Helvetica, Arial !important;
    overflow-x: hidden !important ;
}

h1 {
    color: var(--h1-color) !important;
    font-size: 40px;
    font-weight: 600;
}

h2 {
    color: var(--h2-color) !important;
    font-size: 30px;
    font-weight: 400;
}

h3 {
    color: var(--h3-color) !important;
    font-size: 20px;
    font-weight: 300;
}

a, input[type="submit"] {
    cursor: pointer;
    color: var(--link-text-color) !important;
    background-color: var(--link-bg-color) !important;
    transition: color0.5s,background-color0.5s ;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 400;
    -webkit-transition: color0.5s,background-color0.5s ;
    -moz-transition: color0.5s,background-color0.5s ;
    -ms-transition: color0.5s,background-color0.5s ;
    -o-transition: color0.5s,background-color0.5s ;
}
a:hover , input[type="submit"]:hover{
    transform: translateX(1px) !important;
    -webkit-transform: translateX(1px) !important;
    -moz-transform: translateX(1px) !important;
    -ms-transform: translateX(1px) !important;
    -o-transform: translateX(1px) !important;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.btna{
    background: transparent !important;
    padding: 0px !important;
    color: var(--text-color) !important;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    cursor: pointer;
}
p{
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color) !important;
}

body.dark-mode {
    /* Application des variables pour le mode sombre */
    --bg-color: var(--bg-color-dark);
    --sub-bg-color: var(--sub-bg-color-dark);
    --text-color: var(--text-color-dark);
    --h1-color: var(--h1-color-dark);
    --h2-color: var(--h2-color-dark);
    --h3-color: var(--h3-color-dark);
    --link-bg-color: var(--link-bg-color-dark);
    --link-text-color: var(--link-text-color-dark);
}
/*
body.dark-mode {
    --bg-color: #121212;
    --sub-bg-color: #1e1e1e;
    --text-color: #e0e0e0;
    --h1-color: #ffffff;
    --h2-color: #e0e0e0;
    --h3-color: #cccccc;
    --link-bg-color: #333333;
    --link-text-color: #ffffff;
}
*/
/* Définissez les styles pour le titre avec une classe personnalisée */
.custom-success-title {
    color: rgb(10, 138, 52) !important;
}
.custom-error-title{
    color: rgb(136, 31, 31)!important;
}


/* Style du bouton de basculement */
.toggle-btn {
    display: inline-block;
    position: relative;
    width: 50px; /* Réduction de la largeur pour un look plus compact */
    height: 25px; /* Réduction de la hauteur pour un look plus compact */
    background: linear-gradient(to right, skyblue 50%, grey 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    border-radius: 12.5px; /* Ajustement du rayon pour garder la proportion */
    cursor: pointer;
    transition: background-position 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    margin-top: 8px;
}

.toggle-btn:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.toggle-btn .slider {
    position: absolute;
    top: 0.5px; /* Ajustement mineur pour centrage vertical */
    left: 0.5px; /* Ajustement mineur pour centrage horizontal */
    width: 24px; /* Taille inchangée pour conserver une manipulation aisée */
    height: 24px; /* Taille inchangée pour conserver une manipulation aisée */
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-btn .icons {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    color: #fff;
    font-size: 10px; /* Réduction de la taille de la police pour les icônes */
    pointer-events: none;
}

.toggle-btn .icon-sun {
    padding-left: 2px; /* Moins d'espace pour l'icône du soleil */
}

.toggle-btn .icon-moon {
    padding-right: 2px; /* Moins d'espace pour l'icône de la lune */
    text-align: right;
}

.ckeckdarlight {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

input[type="checkbox"]:checked + .slider {
    transform: translateX(26px); /* Ajustement pour la nouvelle largeur du bouton */
}

input[type="checkbox"]:checked + .slider + .icons {
    color: yellow; /* Changement de couleur des icônes quand activé */
}

input[type="checkbox"]:checked ~ .toggle-btn {
    background-position: left bottom; /* Ajustement du fond pour le mode activé */
}

main{
    display: flex;
    padding: 30px;
}
.fa-pen-to-square{
    color: var(--link-bg-color-dark) !important;
    font-size: 16px;
    padding: 0px 5px;
}
.fa-eye{
    color: var(--h1-color)!important;
    font-size: 16px;
    padding: 0px 5px;
}
.fa-trash-can{
    color: rgb(241, 44, 44)!important;
    font-size: 16px;
    padding: 0px 5px;
}
/* INPUT */
.flexend{
    width: 100%;
    display: flex;
    justify-content: end !important;
}
.flex{
    display: flex;
    width: auto;
}
.flexinput{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.flexinput input, .flex input {
    outline: none !important;
    width: 100%;
    background: #871dff09;
    color: var(--text-color) !important;
    border: none;
    border-bottom: var(--link-bg-color) 1px solid!important;
    font-size: 14px !important;
}
.flexinput input:focus, .flex input:focus{
    background: #7f69ff1a;
    border-bottom:none !important;
}
label{
    color: var(--text-color) !important;
}
label::after{
    background: #ffffff13 !important;
}
.form-floating{
    width: 100% !important;
    margin-right: 10px !important;
}
/*TexArea*/
textarea{
    width: 100%;
    background: #871dff09 !important;
    color: var(--text-color)!important;
    border: none;
    border-bottom: var(--link-bg-color) 1px solid!important;
    transition: 0.4s!important;
    -webkit-transition: 0.4s!important;
    -moz-transition: 0.4s!important;
    -ms-transition: 0.4s!important;
    -o-transition: 0.4s!important;
    outline: none!important;
    height: 100px!important;
    padding: 10px!important;
    border-radius: 8px!important;
    -webkit-border-radius: 8px!important;
    -moz-border-radius: 8px!important;
    -ms-border-radius: 8px!important;
    -o-border-radius: 8px!important;
}
textarea:focus{
    border: #7499df41 1px solid !important;
    background: #7f69ff1a !important;
    border-bottom:none !important;
    border-radius:8px  !important;
    -webkit-border-radius:8px  !important;
    -moz-border-radius:8px  !important;
    -ms-border-radius:8px  !important;
    -o-border-radius:8px  !important;
    box-shadow: rgba(72, 72, 248, 0.849) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 10px -18px !important;
    transition: 0.4s !important;
    -webkit-transition: 0.4s !important;
    -moz-transition: 0.4s !important;
    -ms-transition: 0.4s !important;
    -o-transition: 0.4s !important;
}
.dropspace{
    margin: 15px 0px !important;
}
input[type="submit"], .stpbtn{
    outline: none;
 border: none !important;
 padding: 10px 40px;
 font-size: 19px;
 margin-top: 10px;

}
/* SELEC2 DESIGN*/

.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single{
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    box-shadow: rgba(11, 15, 253, 0.151) 0px 22px 70px 4px;
}

.select2-dropdown--below{
    background: var(--sub-bg-color) !important;
}
.select2-results ul li{
    background:  var(--bg-color) !important;
    color: var(--text-color)!important;
}
.select2-results ul li:hover{
    background:  var(--sub-bg-color) !important;
}
.select2-search{
    border: var(--link-bg-color) 1px solid !important;
}
.select2-search input{
    background: var(--sub-bg-color)!important;
    color: var(--text-color)!important;
    outline: none;
    border: none !important;
}
.select2-dropdown, .select2-selection--single {
    border: none!important;
}

/* ========== BEAUTIFUL SELECT STYLES ========== */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    padding: 15px 50px 15px 20px !important;
    background: linear-gradient(135deg, var(--sub-bg-color) 0%, rgba(135, 29, 255, 0.05) 100%) !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    color: var(--text-color) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(135, 29, 255, 0.1) !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 10px 0 !important;
}

select:focus {
    outline: none !important;
    border-color: var(--link-bg-color) !important;
    box-shadow: 0 8px 25px rgba(135, 29, 255, 0.2), 0 0 0 3px rgba(135, 29, 255, 0.1) !important;
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--sub-bg-color) 0%, rgba(135, 29, 255, 0.1) 100%) !important;
}

select:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(135, 29, 255, 0.15) !important;
}

select option {
    background: var(--sub-bg-color) !important;
    color: var(--text-color) !important;
    padding: 12px !important;
    border-radius: 8px !important;
    margin: 2px 0 !important;
}

select option:hover,
select option:checked {
    background: var(--link-bg-color) !important;
    color: var(--link-text-color) !important;
}

/* ========== BEAUTIFUL DATE INPUT STYLES ========== */
input[type="date"] {
    width: 100% !important;
    padding: 15px 50px 15px 20px !important;
    background: linear-gradient(135deg, var(--sub-bg-color) 0%, rgba(135, 29, 255, 0.05) 100%) !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    color: var(--text-color) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(135, 29, 255, 0.1) !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 10px 0 !important;
}

input[type="date"]:focus {
    outline: none !important;
    border-color: var(--link-bg-color) !important;
    box-shadow: 0 8px 25px rgba(135, 29, 255, 0.2), 0 0 0 3px rgba(135, 29, 255, 0.1) !important;
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--sub-bg-color) 0%, rgba(135, 29, 255, 0.1) 100%) !important;
}

input[type="date"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(135, 29, 255, 0.15) !important;
}

/* Date input calendar styling - make entire input clickable */
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
}

/* Firefox date input styling */
input[type="date"]::-moz-focus-inner {
    border: 0 !important;
}

/* Custom calendar icon for date inputs */
input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23103959' d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px !important;
}

/* Custom dropdown arrow for select */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23103959' d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 16px !important;
}

/* ========== DARK MODE ADJUSTMENTS ========== */
body.dark-mode select,
body.dark-mode input[type="date"] {
    background: linear-gradient(135deg, var(--sub-bg-color-dark) 0%, rgba(135, 29, 255, 0.1) 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode select:focus,
body.dark-mode input[type="date"]:focus {
    box-shadow: 0 8px 25px rgba(95, 190, 243, 0.3), 0 0 0 3px rgba(95, 190, 243, 0.1) !important;
    background: linear-gradient(135deg, var(--sub-bg-color-dark) 0%, rgba(95, 190, 243, 0.1) 100%) !important;
}

body.dark-mode select option {
    background: var(--sub-bg-color-dark) !important;
    color: var(--text-color-dark) !important;
}



/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 768px) {
    select,
    input[type="date"] {
        padding: 12px 45px 12px 15px !important;
        font-size: 14px !important;
    }
    
    select {
        background-position: right 15px center !important;
        background-size: 14px !important;
    }
    
    input[type="date"] {
        background-position: right 15px center !important;
        background-size: 16px !important;
    }
}

/* ========== ANIMATION EFFECTS ========== */
@keyframes selectFocus {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.02);
    }
    100% {
        transform: translateY(-2px) scale(1);
    }
}

select:focus,
input[type="date"]:focus {
    animation: selectFocus 0.3s ease-out !important;
}

/* Enhanced Date Input Styling */
input[type="date"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: linear-gradient(135deg, rgba(135, 29, 255, 0.05), rgba(135, 29, 255, 0.1)) !important;
    border: 2px solid rgba(135, 29, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 12px 45px 12px 15px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(135, 29, 255, 0.1) !important;
    cursor: pointer !important;
    position: relative !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23871dff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
}

input[type="date"]:hover {
    border-color: rgba(135, 29, 255, 0.4) !important;
    box-shadow: 0 6px 25px rgba(135, 29, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

input[type="date"]:focus {
    outline: none !important;
    border-color: var(--link-bg-color) !important;
    box-shadow: 0 0 0 3px rgba(135, 29, 255, 0.1), 0 8px 30px rgba(135, 29, 255, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Dark mode adjustments for date input */
.dark-mode input[type="date"] {
    background: linear-gradient(135deg, rgba(135, 29, 255, 0.1), rgba(135, 29, 255, 0.15)) !important;
    border-color: rgba(135, 29, 255, 0.3) !important;
    color: var(--text-color) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23bb86fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Searchable Select Styles */
.searchable-select-container {
    position: relative !important;
    width: 100% !important;
}

.searchable-select-container.active .select-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    max-height: 200px !important;
}

.select-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--sub-bg-color) !important;
    border: 2px solid rgba(135, 29, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-top: 5px !important;
}

.select-option {
    padding: 12px 15px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-bottom: 1px solid rgba(135, 29, 255, 0.1) !important;
    color: var(--text-color) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.select-option:last-child {
    border-bottom: none !important;
}

.select-option:hover {
    background: linear-gradient(135deg, rgba(135, 29, 255, 0.1), rgba(135, 29, 255, 0.15)) !important;
    color: var(--link-bg-color) !important;
    transform: translateX(5px) !important;
}

.select-option.selected {
    background: linear-gradient(135deg, var(--link-bg-color), rgba(135, 29, 255, 0.8)) !important;
    color: white !important;
    font-weight: 600 !important;
}

.select-option.hidden {
    display: none !important;
}

.no-results {
    padding: 15px !important;
    text-align: center !important;
    color: rgba(135, 29, 255, 0.6) !important;
    font-style: italic !important;
    font-size: 13px !important;
}

/* Dark mode adjustments for searchable select */


.dark-mode .select-dropdown {
    background: var(--sub-bg-color) !important;
    border-color: rgba(135, 29, 255, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .select-option {
    color: var(--text-color) !important;
    border-bottom-color: rgba(135, 29, 255, 0.2) !important;
}

.dark-mode .select-option:hover {
    background: linear-gradient(135deg, rgba(135, 29, 255, 0.15), rgba(135, 29, 255, 0.2)) !important;
    color: #bb86fc !important;
}


/*TABLE */

.table{
    border-radius: 10px !important;
}
tbody tr td{
    background-color: transparent!important;
    color: var(--text-color)!important;
}
.table tr:hover{
    background-color: var(--bg-color) !important;
}

/*Tabs*/
.tab-btn {
    background: transparent !important;
    color: var(--text-color) !important;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.activebtn{
    color: var(--link-text-color) !important;
    background-color: var(--link-bg-color) !important;
}
/*sub-Tab */
.sub-tab-btn{
    background-color: transparent !important;
    color: var(--text-color) !important;
}
.sub-tab-content {
    display: none !important;
}
.sub-tab-content.active {
    display: block !important;
}
.sub-tab-btn.activebtn {
    background-color: #CE1424 !important;
    color: white;
}

/* Bordure inférieure */
.BorderLink {
    padding: 0px;
    transition:  0.3s;
    background: transparent !important;
    color:var(--text-color) !important;
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    -webkit-transition:  0.3s;
    -moz-transition:  0.3s;
    -ms-transition:  0.3s;
    -o-transition:  0.3s;
}

/* Effet sur le survol */
.BorderLink:hover {
    margin-left: 2px;
}

/* Bootstrap color change */
/*Modal bg */
.offcanvas  {
    background: var(--sub-bg-color) !important;
}

/*  Notification Header */
header{
    display: flex ;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 50 !important;
    position: relative;
}
.pere1{
    width: 75%;
    justify-items: center;
    padding: 0px;
    padding-left: 10px;
}
.pere1 img{
    width: 60px;
}
.pere2 {
    display: flex;
    justify-items: center;
    padding: 0px;
    width: 33%;
    justify-content: space-around;
    justify-items: center ;
}
.anotif {
    background: transparent !important;
    color: var(--text-color) !important;
    font-size: 20px;
    width: auto;
    position: relative;
    padding: 0px !important;
    margin-top: 8px;
}
.anotif span {
    position: absolute;
    font-size: 12px;
    background-color: #CE1424;
    color: #fff;
    padding: 0px 6px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    left: 0.5rem;
}
.noifdayoff{
    font-size: 10px;
    background-color: #CE1424;
    color: #fff;
    padding: 0px 6px;
    border-radius: 50px;
    margin-left: 5px;
}

.welcomname{
    background: transparent !important;
    padding: 0px !important;
    border: 0px !important;
    color: var(--text-color) o !important;
    margin-top: 10px;
}
.dropdown-menu{
    background-color: var(--sub-bg-color) !important;
}
.dropdown-menu a{
    background-color: transparent !important;
    color: var(--text-color) !important;
}
.mobile{
    display: none ;
}
.messageMobile{
    font-size: 20px;
    color: var(--text-color) !important;
}
.fa-magnifying-glass{
   font-size: 18px !important;
}

/* Track */
/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
/* Track */
::-webkit-scrollbar-track {
    border-radius: 10px;
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background:  var(--link-bg-color)  !important;
    border-radius: 10px;
}
  
/* MODEALDESIGN*/
.modal-content{
    background-color: var(--bg-color) !important;
}
.btn-close{
    color: var(--text-color) !important;
    background-color: #CE1424 !important;
}

/* SWEET ALERT */
.swal2-popup{
    background: var(--bg-color) !important;
    border-radius: 8PX !important;
    -webkit-border-radius: 8PX !important;
    -moz-border-radius: 8PX !important;
    -ms-border-radius: 8PX !important;
    -o-border-radius: 8PX !important;
}
.swal2-html-container{
    color: var(--text-color) !important;
}
.custom-error-title{
  color: #CE1424 !important; 
}
.swal2-confirm{
    background: #CE1424 !important;
    outline: none!important;
    border: none!important;
    color: azure!important;
    border-radius: 50px !important;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    box-shadow: none !important;
}
/*Offcanvace*/
.offcanvas-header{
    background-color: #CE1424 !important;
}
.offcanvas-title{
    font-size: 18px !important;
    text-align: center !important;
    color: #EBECED !important;
}
.btnclose{
    margin-top: 13px !important;
}
/*search */
#searchInput, #searchInput2,.searchInput {
    color: var(--text-color);
    padding: 5px 30px;
    border: none;
    border-radius: 8px;
    border-bottom: 1px solid var(--h3-color);
    background: #FFFFFF12;
    width: 200px; /* Définir une largeur initiale */
    transition: border-bottom 0.5s ease-in-out; /* Transition pour le changement de bordure */
    margin: 20px 0px !important;

}

#searchInput:focus,#searchInput2:focus,.searchInput:focus {
    border-bottom: 2px solid var(--h2-color);
    outline: none;
    width: 300px; /* Augmenter la largeur au focus */
    transition: width 0.5s ease-in-out; /* Transition pour l'extension de la largeur */
}

/* BTN */

button{
    background-color: transparent !important;
    color: var(--text-color) !important;
    border: none !important;
    outline: none;
    border-bottom: 1px solid var(--link-bg-color);
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}
.edit-button{
    color: #2e8997 !important;
    font-size: 18px !important;
    background: transparent !important;
    padding:2px !important;
}
.Pay-button{
    color: rgb(75, 145, 47) !important;
    font-size: 18px !important;
    background: transparent !important;
    padding:2px !important;
}
.Change-button{
    color: rgb(177, 163, 84) !important;
    font-size: 18px !important;
    background: transparent !important;
    padding:2px !important;
}
.history-button{
    color: rgb(112, 81, 81) !important;
    font-size: 18px !important;
    background: transparent !important;
    padding:2px !important;
}
.DeleteGrp-button{
    color: rgb(199, 20, 59) !important;
    font-size: 18px !important;
    background: transparent !important;
    padding:2px !important;
}
.newGrp-button{
    color: rgb(250, 193, 6) !important;
    font-size: 18px !important;
    background: transparent !important;
    padding:2px !important;
}
.absence-button{
    color: var(--text-color) !important;
    font-size: 18px !important;
    background: transparent !important;
    padding:2px !important;
}

.edit-button:hover,.Pay-button:hover,.Change-button:hover,.history-button:hover,.DeleteGrp-button:hover,.newGrp-button:hover{
    opacity: 0.8;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.savebtn{
    background: var(--link-bg-color) !important;
    color: var(--link-text-color) !important;
    border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    -ms-border-radius: 50px !important;
    -o-border-radius: 50px !important;
    padding: 8px 40px !important;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}
.savebtn:hover{
    margin-left: 5px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    opacity: 0.8;
}
/* LIVE SEARCH BARR*/
.student-search {
    outline: none !important;
    width: 20%;
    background: #9948f71c;
    padding: 7px 8px;
    color: var(--text-color) !important;
    border: none;
    border-bottom: var(--link-bg-color) 1px solid !important;
    font-size: 14px !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    margin-left: 10px;

}

.student-search:focus {
    background: #7f69ff1a;
    border: 2px solid #d89eff31 !important;
    width: 23% !important;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    box-shadow: rgba(138, 35, 255, 0.575) 0px 25px 50px -12px !important;
}

.search-results {
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    background-color: var(--sub-bg-color) !important;
    color: var(--text-color) !important;
    width: 30%;
    z-index: 9999999999999999999999999999999 !important;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: rgba(138, 35, 255, 0.473) 0px 25px 50px -12px !important;
}

.search-result-item {
    padding: 10px;
    cursor: pointer;
}

.search-result-item:hover {
    background-color:  var(--bg-color)!important;
}

.bodyforsearch{
   height: 200px !important;
}
    
.no-results {
    padding: 10px;
}
.searchbtn{
    background: transparent !important;
    outline: none;
    border: none;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    font-size: 17px;
    padding: 5px;
    color: var(--text-color) !important;
}
.possitionBage{
    position: relative;
}
.badgeStatut {
    position: absolute;
    font-size: 13px;
    background: #ffe685;
    top: 30px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    padding: 2px 5px;
    color: black !important;

}
/*TOAST CONNEXTION*/
.toast{
    background-color: var(--sub-bg-color) !important;
    color: var(--text-color) !important;
}
.horligne{
    background: #CE1424 !important;
    color: #fff !important;
}
.online{
    background: #0f9647 !important;
    color: #fff !important;
}
.mr-auto img{
    width: 30px !important;
    padding: 5px;
    background: #f1f1f1ea;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}
/*SIDE BAR TOGGOL*/
#sidenav {
    position: relative;
    left: 0PX;
    transition: left 0.5s ease;
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
}

#sidenav.open {
    left: -450px;
    margin-left: -300px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}

#contenu {
    margin-left: 0;
    transition: margin-left 0.5s ease;
    -webkit-transition: margin-left 0.5s ease;
    -moz-transition: margin-left 0.5s ease;
    -ms-transition: margin-left 0.5s ease;
    -o-transition: margin-left 0.5s ease;
}

#sidenav.open #contenu.open, section.open {
    width: 100% !important;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}
section{
    transition: 0.4s;
}
.toggle-sidebar{
    background: transparent !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    padding: 5px;
    color: var(--text-color) !important;
}
.btnPcMenu{
    margin-top: 8px;
}
/*Success*/
.success{
    background: #C4EED0 !important;
    color: rgb(20, 108, 46) !important;
    font-size: 24px !important;
    padding: 10px;
}
/* MENU BTN TOGGL FOR MODILE*/
.fixMenuBtn{
    z-index: 50;
    width: 80px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    position: sticky;
    top: 4px;
}

.headerMenu{
    display: none;
}
/*ALL STUDENTS*/
.occupation{
    background-color: #d9d8ff;
    color: #0800ff;
    padding: 0px 5px;
    border-radius: 50px;
}
.student{
    background-color: #ffdcb3;
    color: #ff8800;
    padding: 2px 5px;
    border-radius: 50px;
}
.man{
    background-color: #bbf0fd;
    color: #057d92;
    padding: 2px 5px;
    border-radius: 50px;
}
.boy{
    background-color: #aaffea;
    color: #0f97d6;
    padding: 2px 5px;
    border-radius: 50px;
}
.woman{
    background-color: #fdbbf2;
    color: #92055c;
    padding: 2px 5px;
    border-radius: 50px;
}
.girl{
    background-color: #ffdbf9;
    color: #f00251;
    padding: 2px 5px;
    border-radius: 50px;
}

.quitstudent{
    background-color: #ff8d8d;
    color: #631717;
    padding: 2px 5px;
    border-radius: 50px;
}
.completedcours{
    background-color: #baff9f;
    color: #408f44;
    padding: 2px 5px;
    border-radius: 50px;
}
/*ICON STYLE */
.fa-arrow-down{
    color: #aa2323 !important;
}
.fa-thumbs-up{
    color: #408f44 !important;
}
/* CSS pour masquer le bouton PC sur les petits écrans */
@media (max-width: 768px) {
    .btnPcMenu {
        display: none;
    }
}

/* CSS pour masquer le bouton mobile sur les grands écrans */
@media (min-width: 769px) {
    .btnMobileMenu {
        display: none;
    }
}
.fixdbtnmn{
    cursor: pointer;
}
@media (min-width: 769px) {
    .fixdbtnmn{
        z-index: 50 !important;
        width: 80px;
        position: sticky;
        top: 4px;
    }
}
@media (max-width: 600px){
    .pc{
        display: none;
    }
    .mobile{
        z-index: 50;
        width: 90% !important;
        margin: auto !important;
        display: flex;
        padding: 5px;
        position: fixed;
        bottom: 0px !important;
        background: var(--sub-bg-color) !important;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        -ms-border-radius: 50px;
        -o-border-radius: 50px;
        margin-left: 20px !important;
        margin-bottom: 20px !important;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    }
    .sectionspace{
        margin-top: 50px;
    }
    .toggle-btn {
        margin-top: 20px;
    }
    .fa-bell{
        font-size: 25px;
        position: absolute;
        top: -15px;
    }
    .lateStudentsCount{
        position: absolute;
        top: -15px;
    }
    .fixMenuBtn {
        display: none;
    }
    .overflowWithMb{
        width: 100% !important;
        overflow: auto !important;
        padding: 5px !important;
    }
    .welcomname{
        margin-top: 17px !important;
        margin-bottom: -10px;
        font-size: 25px !important;
        margin-bottom: -18px !important;
    }
    .badgeStatut{
        top: 32px;
        right: -8px;
        padding: 0px;
        font-size: 10px;
    }
    .mobile img{
        width: 45px;
        margin-right: 15px;
        margin-top: -30px !important;
        margin-bottom: -18px !important;
    }
    .pere1 {
        width: 45%;
    }
    .spaceleft{
        margin-left: 20px !important;
    }
    .spaceright{
        margin-right: 10px !important;
    }
    .pere2 {
        width: 40%;
        margin-top: -13px;
    }
    .DropMenu{
        margin-top: -3px;
    }
    .btnliststud{
        background: transparent !important;
        color: var(--text-color) !important;
        font-size: 25px !important;
        padding: 0px !important;
        border: none !important;
        margin-top: 2px;
        margin-bottom: -18px !important;
        margin-left: 20px;
    }
    .table{
        font-size: 12px !important
    }

    /*SIDE BAR TOGGOL*/
    #sidenav {
        position: fixed;
        left: -450px;
        transition: left 0.5s ease;
        -webkit-transition: left 0.5s ease;
        -moz-transition: left 0.5s ease;
        -ms-transition: left 0.5s ease;
        -o-transition: left 0.5s ease;
    }
    nav {
        width:100% !important;
    }
    #sidenav.open {
        left: 300PX;
        transition: 0.4s;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        z-index: 10;
    }
    main{
        padding: 5px;
    }
    #contenu {
        width: 100% !important;
        margin-left: 0;
        transition: margin-left 0.5s ease;
        -webkit-transition: margin-left 0.5s ease;
        -moz-transition: margin-left 0.5s ease;
        -ms-transition: margin-left 0.5s ease;
        -o-transition: margin-left 0.5s ease;
    }

    #sidenav.open #contenu.open, section.open {
        width: 100% !important;
        transition: 0.4s;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
    }
    section{
        transition: 0.4s;
        width: 100% !important;
        margin-bottom: 150px !important;
        overflow: hidden !important;
    }
    .toggle-sidebar{
        background: transparent !important;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        -ms-border-radius: 50px;
        -o-border-radius: 50px;
        padding: 5px;
        color: var(--text-color) !important;
    }
    p{
        font-size: 14px !important;
    }
    a{
        font-size: 14px !important;
        padding: 10px 15px;
    } 
    .progress{
        height: 15px !important;
        padding: 0px;
    }
    .progress-bar{
        height: 100% !important;
    }
    .student-search{
    	width: 50% !important;
   }
   .student-search:focus{
   	width: 90% !important;
   }
    tbody tr{
    background-color: var(--bg-color) !important;
    padding: 5px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
   
}
.btn-close{
    border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    -ms-border-radius: 50px !important;
    -o-border-radius: 50px !important;
}
#notifideas{
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    padding: 0px 8px;
    background-color: #CE1424 !important;
    color: #E4E0D0 !important;
    font-size: 12px !important;
}
.nobg{
    background-color: transparent !important;
    color: var(--text-color)  !important;
}
.allleadsnotif{
    background-color: #057d92 !important;
    border-radius: 100px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    color: #fff !important;
}
.countnotification{
    font-size: 12px;
    background-color: rgb(210, 37, 37);
    padding: 0px 8px;
    border-radius: 50px;
    color: #fff !important;
}

/*Pop up notif*/
#studentsTablepop {
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px !important;
}
#studentsTablepop td{
    padding: 10px !important;
    margin-bottom: 5px !important;
}
.successt{
    background-color: #d4edda !important;
    color: #0d2f15 !important; 
}
.dangert{
    background-color: #f8c2c6 !important;
    color: #721c24 !important; 
}
.secondaryt{
    background-color: #e2e3e5 !important; 
    color: #19191a !important; 
}
.headerpop{
    background-color: #CE1424 !important;
    padding: 20px !important;
    color: #fff !important;
    border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -ms-border-radius: 10px !important;
    -o-border-radius: 10px !important;
}
#leadpalcementModalLabel{
    text-align: center !important;
    color: #fff2f2 !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px !important;
}
.btnperiod{
    margin-top: -15px  !important;
}
#studentCountspop p {
    border-radius: 10px !important;
    background: var(--sub-bg-color) !important;
    padding: 10px !important;
    font-size: 16px !important;
}
#studentCountspop p span{
    font-size: 20px !important;
}
.fa-folder-closed{
    color: #d4d5d5 !important; 
}
.fa-ban{
    color: #efa8ac !important;
}
.fa-circle-check{
    color:  #b3eec1 !important;;
}

/* Dropdon btn */
.dropdown-toggle::after{
    display: none !important;
}
/* iframe */
html, body {
    height: 100%;
    overflow: auto;
  }
iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.choices__list--dropdown {
  z-index: 99 !important;
  position: relative;
}
.dark-mode  .slider:before{
    display: none;
}