:root {
    --bounce : linear(0, 0.01 0.7%, 0.037 1.4%, 0.152 3%, 0.792 8.7%, 1.022 11.2%, 1.163 13.6%, 1.203 14.8%, 1.226 16.1%, 1.23 17.6%, 1.213 19.2%, 1.004 27.8%, 0.965 30.4%, 0.948 33.1%, 0.951 36.3%, 0.999 44.8%, 1.012 49.9%, 0.997 66.6%, 1);
    --lazy : linear(0, 0.009 1%, 0.04 2.1%, 0.093 3.3%, 0.164 4.5%, 0.324 6.7%, 0.807 12.6%, 0.935 14.4%, 1.037 16.1%, 1.12 17.8%, 1.179 19.4%, 1.22 21%, 1.245 22.7%, 1.253 25%, 1.233 27.6%, 1.189 30.3%, 1.058 36.6%, 1.004 39.7%, 0.96 43.2%, 0.939 46.7%, 0.941 52%, 0.998 64%, 1.015 70.6%, 1);
    --spring : linear(0, 0.002 0.5%, 0.009 1%, 0.02 1.5%, 0.038 2.1%, 0.057 2.6%, 0.084 3.2%, 0.115 3.8%, 0.15 4.4%, 0.214 5.4%, 0.3 6.6%, 0.383 7.7%, 0.625 10.8%, 0.757 12.6%, 0.818 13.5%, 0.875 14.4%, 0.928 15.3%, 0.977 16.2%, 1.02 17.1%, 1.055 17.9%, 1.089 18.8%, 1.118 19.7%, 1.142 20.6%, 1.162 21.5%, 1.177 22.4%, 1.188 23.3%, 1.196 24.5%, 1.199 25.8%, 1.195 27.1%, 1.185 28.5%, 1.171 29.8%, 1.153 31.2%, 1.055 37.7%, 1.032 39.4%, 1.013 41%, 0.994 42.9%, 0.98 44.7%, 0.97 46.5%, 0.964 48.4%, 0.961 51%, 0.963 54%, 0.97 56.8%, 0.996 66.2%, 1.003 69.6%, 1.007 73.1%, 1.007 79.2%, 1 92.4%, 1);
}

body {
    overflow-y: auto;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    /* Permet le défilement vertical */
}



.btn-edit {
    /* background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16"><path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z"/></svg>');
    */
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 20px;

}

.backg {
    background-image: linear-gradient(0deg, rgba(189, 201, 182) 100%, rgb(165, 165, 165) 0%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

.under_header {
    position: fixed;
    display: block;
    /* top: 60px; */
    top: 0px;
    padding-top: 60px;
    bottom: 0px;
    width: 100%;
    overflow-y: auto;

    /* border: 5px solid #f44336; */
}

.center-text {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    height: 30px;
    padding-bottom: 5px;
    padding-top: 5px;
    background-color: cornflowerblue;
    color: #fff;
}


.update {
    position: absolute;
    justify-content: center;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    height: 50px;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    opacity: 1;
    /* Début de l'animation */
    animation: fadeOut 3s forwards;
    z-index: 5000;
}

.update.error {
    background-color: #f44336;
    /* Rouge pour les erreurs */
    color: #fff;
    /* Texte en blanc */
}

.update.success {
    background-color: #28a745;
    color: #fff;
}

@keyframes fadeOut {
    75% {
        opacity: 1;
    }

    99% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

.btn-back {
    background-color: cornflowerblue;
    color: cornsilk;
}

.btn-select {
    display: none;
}

.btn-select+label {
    background-color: transparent;
    border: 0px solid #000;
    height: 30px;
    display: block;
    padding: 20px;
    cursor: pointer;
}

.btn-select:checked+label {
    background-color: var(--employee-color);
    border-color: #000;
}

.btn-select:not(:checked)+label:hover {
    background-color: #324A76;
    opacity: 0.3;
}

.btn-absent {
    display: none;
}


.btn-absent+label {
    position: absolute;
    left: 0px;
    right: 0px;
    background-color: transparent;
    padding-bottom: 30px;
    display: block;
    cursor: pointer;
}

.btn-absent:checked+label {
    background-color: var(--employee-color);
    border-color: #000;
}

.btn-absent:not(:checked)+label:hover {
    background-color: #324A76;
    opacity: 0.3;
}

.btn-absent:checked+label:focus {
    outline: none;
    box-shadow: none;
}

th[colspan],
td {
    width: 100px;
    border-right: 2px solid #000;
}

th[colspan]:last-child,
td:last-child {
    border-right: 0px solid #000;
}


th:first-child,
td:first-child {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-decoration: underline;
    word-break: break-all;
}

th {
    width: 100px;
    text-align: center;
}


.fixed-table {
    position: fixed;
    top: 130px;
    bottom: 80px;
    left: 0;
    right: 0;
    overflow-y: auto;
    /* Pour faire défiler le contenu si nécessaire */
    background-color: #fff;
    /* Optionnel, pour donner une couleur de fond au tableau */
    border-collapse: separate;
    /* Pour éviter les doublons de bordure */
}

.fixed-table table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
}

.fixed-table tbody {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fixed-table tbody .table-row:first-child {
    height: 30px;
    /* Hauteur fixe pour la première ligne */
}

.fixed-table tbody .table-row:nth-child(2) {
    height: 50%;
    /* Deuxième ligne à 50% de la hauteur restante */
}




.tablex {
    /* table-layout: fixed; */
    width: 100%;
}

.table-container {
    flex-grow: 1;
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    overflow: auto;
}



.calendrier {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    max-height: 100vh;
    /* Limite la hauteur à la hauteur de la fenêtre */
    /* Ajoute un défilement vertical */
    padding: 10px;
    /* Ajoute un peu de marge autour du calendrier */
}

.mois {
    background-color: #ffffffcc;
    border: 1px solid #ffffff69;
    margin: 10px;
    /* flex: 0 0 30%; */
    overflow: hidden;
    border-radius: 5px;
    opacity: 0;
    /* Invisible au départ */
    transform: translateY(50px) scale(0.95);
    /* Légèrement décalé vers le bas */
    transition: opacity 5s ease, transform 0.5s ease;
    /* Animation fluide */
}

.mois.apparait {
    opacity: 1;
    /* Visible */
    transform: translateY(0) scale(1);
    transition: transform 0.8s var(--spring);
    /* Position initiale */
}


.mois-texte {
    font-size: 22px;
    font-weight: bold;
    color: #0c0052;
    text-align: center;

}



.logout-button {
    height: 35px;
    transform: translateY(10px);
    text-align: center;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.3s;
}

.logout-button:hover {
    background-color: #ff1a1a;
}

.bar {
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: medium;
    padding: 0px;
    position: fixed;
    opacity: 1;
    background-color: var(--bar-color);
    width: 100%;
}

.bar2 {
    opacity: 1;
    background-color: #32766b;
}

.bar3 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #4596ff8f;
    backdrop-filter: blur(5px);
    z-index: 500;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    /* Espace entre texte et boutons */
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    /* Assure que le padding est pris en compte */
}

/* Section pour le texte à gauche */
.bar3 .text-section {
    flex-grow: 0;
    /* La taille de cette section dépend du contenu */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
    /* Empêche le texte de se couper sur plusieurs lignes */
}

/* Section des boutons à droite */
.bar3 .button-section {
    display: flex;
    gap: 10px;
    /* Espace entre les boutons */
    flex-wrap: nowrap;
    /* Les boutons se réorganisent si l'espace manque */
    justify-content: flex-end;
    /* Aligne les boutons à droite */
    flex-grow: 1;
    /* Cette section prend tout l'espace restant */
}

.logout-button {
    /* height: 35px; */
    text-align: center;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    margin: 0 10px;
    white-space: wrap;
}

.bar-button {
    height: 25px;
    font-size: 15px;
    font-weight: bold;
    margin: 10px;

    /* Flexbox pour centrer */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Gérer le débordement avec ellipsis */
    white-space: nowrap;
    /* Une seule ligne */
    overflow: hidden;
    /* Cache le texte qui déborde */
    text-overflow: ellipsis;
    /* Ajoute les trois points (...) */

    /* Limites de largeur */
    width: auto;
    max-width: 150px;
    /* Taille maximale du bouton */
    min-width: 60px;
    /* Taille minimale pour éviter que le bouton ne soit trop petit */
}

.button-as-link {
    display: block;
    /* Permet au bouton d'occuper toute la largeur */
    width: 100%;
    text-align: center;
    /* Centre le texte à l'intérieur du bouton */
    border: none;
    /* Supprime les bordures pour un aspect de lien */
    padding: 0;
    margin: 0;
    /* Supprime les marges pour un aspect de lien */
    cursor: pointer;
}

.btn-inline {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    padding-bottom: 5px;
    /* padding-top: 5px; */
    background-color: rgb(131, 171, 245);
    color: #fff;
    z-index: 1000;
}

.container {
    border: 0px solid #000;
    position: relative;
    display: flex;
    min-height: 100px;
    /* 200px; */
    height: 100%;
    /* height: 100%; */
    /* flex-grow: 1; */
}

.container2 {
    border: 0px solid #000;
    position: relative;
    height: 30px;
    max-height: 30px !important;
}

.container-login {
    border: 0px solid #000;
    align-items: center;
    position: absolute;
    left: 0px;
    height: auto;
    top: 0px;
    width: auto;
    background-color: #ffffff;
    text-align: center;
}

.btn-check+label {
    position: absolute;
    left: 0px;
    right: 0px;
    background-color: transparent;
    height: 100%;
    display: flex;
    cursor: pointer;
    border: 0px solid #000;
}

.diff_label {
    /* border: 2px solid #f44336; */
    position: absolute;
    top: 50%;
    font-weight: bold;

    font-size: calc(0.5em + 0.5vh);
    left: 0;
    right: 0;
    z-index: 5;
    transform: translateY(-50%);
    text-align: center;
    line-height: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.daytype_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* S'assurer que l'élément prenne la largeur du parent */
}

.daytype_display {
    position: absolute;
    display: flex;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 0px solid #000;
    color: #ffffff;
    background-color: transparent;
    transform: rotate(-90deg);
    /* Rotation seulement sur le daytype */
    font-size: 20px;
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.absent_display {
    position: absolute;
    display: flex;
    padding: 0;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: auto;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: 0px solid #000;
    color: #ffffff;
    background-color: transparent;
    font-size: 10px;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    white-space: nowrap;
    /* Cache le texte qui déborde */
    text-overflow: clip;
    pointer-events: none;
    font-size: calc(0.5vw + 0.5vh);
}

.diff_display {
    border: 2px solid #ff030388;
    font-size: 15px;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    color: #ffffff;
    background-color: #000000b4;
    bottom: 30px;

}



/*
 .centered {
 border: 1px solid #000; 
}*/

.btn-up {
    position: absolute;
    background-color: transparent;
    text-align: center;
    top: 0px;
    border-radius: 0px;
    left: 0px;
    right: 0px;
    height: 25px;
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
}


.btn-down {
    position: absolute;
    background-color: transparent;
    text-align: center;
    bottom: 0px;
    border-radius: 0px;
    left: 0px;
    right: 0px;
    height: 25px;
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
}

.btn-check:checked+label {
    background-color: var(--employee-color);
    border-color: var(--employee-color);
}

.btn-check:not(:checked)+label:hover {
    background-color: var(--employee-color);
    opacity: 0.3;
}

.btn-check:checked+label:focus {
    outline: none;
    box-shadow: none;
}

.nickcontainer {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--employee-color);
}

.nickblock {
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #ffffffa4;
    z-index: 1;
    display: flex;
}

.nickname {
    position: absolute;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    transform: rotate(-90deg);
}


.popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    text-align: center;
    width: 200px;
    display: flex;
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    opacity: 1;
    background-color: var(--bar-color);

    height: 40px;
    text-align: center;
    display: flex;
    font-size: medium;
    padding: 0px;
    position: fixed;

}

.center-group {
    display: flex;
    gap: 10px; /* Espace entre "Actuelle" et "Landscape" */
}


.popupOption {
    position: absolute;
    left: 0px;
    right: 0px;
    color: #000;
    width: 100%;
    border: 1px solid #13131315;
    /* border: 1px solid #b6b6b6; */

}

.popupOption:hover {
    background-color: #2b41ff;
    color: #fff;
}


/* Styles pour le loader */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spinner Bootstrap pour l'animation de chargement */
.spinner-border {
    width: 5rem;
    height: 5rem;
    /* border-width: 0.25rem; */
}

.highlight {
    background-color: #ff4141;
    /* Mettre une couleur de fond dorée par exemple */
    font-weight: bold;
    /* Mettre le texte en gras */
    border-radius: 0px;
    /* Ajouter un effet de cercle autour du jour */
    color: white;
    /* Couleur du texte */
}

.highlight-border {
    border: 3px solid #ff0000 !important;
    font-weight: bolder;
}

.highlight-holiday {
    background-color: #606060;
    /* Mettre une couleur de fond dorée par exemple */
    font-weight: bold;
    /* Mettre le texte en gras */
    border-radius: 0px;
    /* Ajouter un effet de cercle autour du jour */
    color: white;
    /* Couleur du texte */
}

.login-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url('log_background.jpg');
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);

    /* Transparence sur fond noir */
}

.mobile-warning {
    display: none;
}

.classic_container {
    position: fixed;
    display: block;
    top: 0px;
    padding-top: 60px;
    bottom: 0px;
    width: 100%;
    overflow-y: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);

    /* Transparence sur fond noir */
}


.login-box {
    background-color: #ffffffa0;
    backdrop-filter: blur(3px);
    text-align: center;
    padding: 40px;
    border-radius: 10px;
    border: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: auto;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.1s linear;
    /* Ajout de la transition pour le background-color */
}

.curmonth {
    background-color: #ffffffa0;
}

.list-group-item.active,
.list-group-item:hover {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: large;
    font-weight: bold;
 /* transition: font-size 0.5s ease-out, font-weight 0.5s ease-out; */
}


.prevmonth {
    background-color: #d8d8d8aa;
    backdrop-filter: blur(8px);
}

.login-box:hover {
    background-color: #ffffff;
    color: #000000;
}


.logout-button span {
    display: none;
}

@media screen and (max-width: 768px) {

    .button-section {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        /* Les boutons passeront à la ligne si besoin */
    }

    .logout-button {
        width: auto;
        font-size: 12px;
    }

    /* Remplacer les textes par des icônes sur petits écrans */
    .logout-button span {
        display: none;
    }

    .logout-button i {
        font-size: 1.5em;
    }
}

.boxborder {

    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(255, 0, 0, 0.75);
    outline-style: solid;
    animation: animateOutline 1.5s ease-out 2;

}

@keyframes animateOutline {
    0% {
        outline-width: 1px;
        outline-offset: 0px;
        outline-color: rgb(206, 0, 0);
    }

    100% {
        outline-width: 5px;
        outline-offset: 0px;
        outline-color: rgba(102, 102, 102, 0);
    }
}

body-config {
    font-family: Arial, sans-serif;
}

.container-config {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 400px;
    margin: 50px auto;
}

.button-container-config {
    text-align: center;
}

.button-config {
    padding: 10px 20px;
    background-color: #ececec;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

.label-config {
    margin-top: 10px;
    font-size: 14px;
}

.button-config:hover {
    background-color: #165297;
}