body{
    background-color: #e0e0e0;
}

.in-out-row
{
    display:none;
    background-color : lightgrey;
    cursor: pointer;
}

.details-row.active
{
    display: table-row;
}

.rotate-icon
{
    transform: rotate(90deg);
}

.reservation-row
{
    display:none;
    background-color : white;
}

.date-row
{
    background-color : lightgrey;
    cursor: pointer;
}

.btn
{
    border : none;
}

.accordion-item
{
    margin-bottom: 5px;
    padding : 20px;
}

.accordion-header
{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #f1f1f1;
    padding: 10px;
    cursor: pointer;
}

.accordion-content
{
    display: none;
    padding: 10px;
    border: 1px solid #f1f1f1;
    background-color: white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.conteneur-flex
{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

.element-flex
{
    margin-bottom: 20px;
}

.inputs
{
    margin-right: 20px;
    padding:4px;
}

.thead
{
    background-color: #f1f1f1;
}

.no-reservation
{
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-weight: bold;
}

.arrondi-bas
{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.italique
{
    font-style: italic;
}

.nav-link
{
    color: white !important;
}

.supp
{
    border: none;
    background-color: white;
}

.zebra-pattern
{
    /* background:
     repeating-linear-gradient(-45deg,
     white,
     white 20px,
     #E3E3E3 20px,
     #E3E3E3 25px); */
     background-color: #FFDBDB;
}


.bouton-archiver:hover::before
{
    transform: translateX(-30%) !important;
    content: "Archiver les r\0000E9servations s\0000E9lectionn\0000E9es";
}

.bouton-creer:hover::before
{
    transform: translateX(-50%) !important;
    content: "Cr\0000E9er la r\0000E9servation";
}

.bouton-plusplace:hover::before
{
    transform: translateX(-95%) !important;
    content: "Ajuster le nombre de places (+1)";
}

.bouton-moinsplace:hover::before
{
    transform: translateX(-95%) !important;
    content: "Ajuster le nombre de places (-1)";
}

.big
{
    max-height: 70vh;
}

.small
{
    max-height: 45vh;
}

.bouton-desarchiver:hover::before
{
    transform: translateX(-30%) !important;
    content: "D\0000E9sarchiver les r\0000E9servations s\0000E9lectionn\0000E9es";
}
.bouton-ajouter:hover
{
    cursor: pointer;
}

.bouton-ajouter:hover::before
{
    transform: translateX(-30%) !important;
    content: "Cr\0000E9er une nouvelle r\0000E9servation";
}

.bouton-modifier:hover::before
{
    content: "Modifier la r\0000E9servation";
}

.bouton-ajd:hover::before
{
    content: "Le client est revenu en avance au parking";
}

.bouton-retard:hover::before
{
    content: "Le client n'est pas revenu au jour pr\0000E9vu";
}

.bouton-ajdtot:hover::before
{
    content: "Le client en retard est revenu aujourd'hui au parking";
}

.bouton-lecture:hover::before
{
    content: "Repasser en lecture seul (sans enregistrer)";
}

.bouton-enregistrer:hover::before
{
    content: "Enregistrer les modifications";
}



.bouton-tooltip
{
    position: relative;
    border: none;
    background-color: rgba(0, 0, 0, 0);
}

.bouton-tooltip:hover::before
{
    display: block;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    bottom: 120%;
    left: 50%;
    transform: translateX(-70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    width: auto;
    white-space: nowrap;
}

.bouton-tooltip:hover::before
{
    opacity: 1;
}


td{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    vertical-align: middle;
}

.centrer
{
    text-align: center;
    border-bottom: 1px solid gray !important;
}

.checkboxCustom
{
    width: 15px;
    height: 15px;
    background-color: #eee;
    border-radius: 25%;
    position: relative;
    cursor: pointer;
    margin-right: 10px;
    vertical-align: middle;
}

.checkboxCustom2
{
    width: 15px;
    height: 15px;
    background-color: #eee;
    border-radius: 25%;
    cursor: pointer;
    margin-left:5px;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    width: 70%;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.clickable
{
    cursor: pointer;
}

.containerPopup
{
    display: flex;
    justify-content: space-between;
}

.barre-separation::after
{
    content: "";
    border-top: 1px solid black;
    margin: 10px 0;
}

.colonnePopup
{
    flex-basis: 30%;
    padding: 10px;
}

.colonnePopupFiltres
{
    flex-basis: 48%;
    padding: 10px;
}

.centrerTitre
{
    text-align: center;
}

.conteneur-flex-colonne
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.custom-button
{
    display: inline-block;
    padding: 7px 0px 1px 10px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button-icon {
    margin-left: 10px; /* Espacement entre le texte et l'icône */
    vertical-align: middle; /* Alignement vertical au milieu */
}

.conteneur-flex-colonne-space-between
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.historiqueLine {
    margin-top: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left:50px;
    padding-right:50px;
    margin-left: auto; /* Centre le conteneur horizontalement */
    margin-right: auto; /* Centre le conteneur horizontalement */
    width: 80%; /* Largeur du conteneur de 80% de la page */
    display: flex;
    align-items: center; /* Centrer le contenu verticalement */
    justify-content: center; /* Espacement égal entre les colonnes */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    border-radius: 50px;
}

.historiqueColumn {
    color: #fff;
    font-weight: bold;
}

#cent{
    display:none;
}

#deuxcent{
    display:none;
}

#cinquante{
    display:none;
}

.modeEcriture
{
    display:none;
}

.custom-decoration {
    position: relative;
    display: inline-block;
}

.custom-decoration .fa-icon {
    display: inline-block;
    position: relative;
    z-index: 2;
}

.custom-decoration::before,
.custom-decoration::after {
    content: "";
    position: absolute;
    background-color: red; /* Couleur de la ligne de décoration */
    width: 100%;
    height: 3px; /* Épaisseur de la ligne de décoration */
}

.rotate-icon-45
{
    transform: rotate(45deg); /* Rotation de 45 degrés */
}

.rotate-icon-135
{
    transform: rotate(135deg); /* Rotation de 45 degrés */
}

.custom-decoration::before {
    bottom: 50%;
    left: 0;
    transform: rotate(-45deg); /* Rotation pour le coin supérieur gauche */
}

.custom-decoration::after {
    bottom: 50%;
    right: 0;
    transform: rotate(45deg); /* Rotation pour le coin inférieur droit */
}