.body-app_login #sidepanel.hidden { display: none; }
#sidepanel {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: max-content;
    background-color: white;
    z-index: 999;
    transition: 0.20s linear;
    padding: 1rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, .75);
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    &.hidden {
        /*display: none;*/
        right: -1000px;
        transition: 0.35s linear;
    }
    & .sidepanelContainer {
        display: block;
        height: 100vh;
        overflow: scroll;
        overflow-scrolling: auto;
    }
    & .sidebarContent {
        font-family: "interRegular", -apple-system, sans-serif;
        font-size: 0.90rem;
        line-height: 1rem;
        color: #373847;
        & .sidebarContentTitle {
            font-family: "interRegular", -apple-system, sans-serif;
            font-size: 1.4rem;
            color: #114a9a;
            line-height: 1.9rem;
        }
        & .sidebarContentDate {
            font-family: "interLight", -apple-system, sans-serif;
            font-size: 0.85rem;
            color: #373847;
            line-height: 0;
            margin: 0 0 22px 0;
        }
        & .sidebarContentSection {
            margin: 8px 0 0 0;
            font-family: "interRegular", -apple-system, sans-serif;
            font-size: 0.90rem;
            line-height: 1rem;
            color: #373847;
            & strong {
                font-family: "interBold", -apple-system, sans-serif;
                font-size: 1rem;
                color: #114a9a;
            }
            & .outsource {
                font-family: "interRegular", -apple-system, sans-serif;
                font-size: 0.90rem;
                line-height: 1rem;
                margin: 0 0 6px 0;
            }
            & select {
                display: inline-block;
                border: 1px solid #114a98;
                width: 65%;
                max-width: 280px;
                padding: 6px;
                background-color: white;
                margin: 6px 12px 0 0;
            }
            & .outsource-btn{
                display: inline-block;
                border: 1px solid #79b2ef;
                width: 47%;
                max-width: 180px;
                padding: 6px;
                background-color: white;
                margin: 6px 0 0 0;
                color: #79b2ef;
                background-color: white;
                font-family: "interRegular", -apple-system, sans-serif;
            }
        }
    }
    & .sidebarAction {
        margin: 50px 0 0 0;
        text-transform: capitalize;
        font-family: "interLight", -apple-system, sans-serif;
        font-size: 0.85rem;

        & a {
            text-decoration: none;
            padding: 6px;
            display: block;
            background-color: transparent;
            width: max-content;
            height: max-content;
            border: 1px solid transparent;
        }
        & .sidebarActionEdit {
            color: #52bc52;
            &:hover {
                border: 1px solid #52bc52;
            }
        }
        & .sidebarActionClone {
            color: #5599d3;
            &:hover {
                border: 1px solid #5599d3;
            }
        }
        & .sidebarActionView {
            color: #000000;
            &:hover {
                border: 1px solid #000000;}
        }
        & .sidebarActionClose {
            color: #980000;
            padding: 6px 0;
            border: 1px solid transparent;
            &:hover {
                border: 1px solid #980000;
            }
        }
    }
    & .spinner-border {
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 10px; /* Espacement entre le spinner et le bouton */
        display: inline-block;
        vertical-align: text-bottom;
    }
    
    & .text-danger {
        color: #dc3545; /* Couleur rouge */
    }
    
    & .text-success {
        color: #198754; /* Couleur verte */
    }
    & .d-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    & .spinner-border {
        margin-left: 10px; /* Ajustez la marge selon vos besoins */
    }

    & .slider-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    & .slider {
        display: flex;
        width: 200px;
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
        width: 100%;
    }
    & .option {
        flex: 1;
        padding: 10px;
        text-align: center;
        cursor: pointer;
    }
    & .option-left {
        background-color: red;
        color: white;
    }
    & .option-right {
        background-color: red;
        color: white;
    }
    & .option.active {
        background-color: green;
        color: white;
    }
    & .vehicule-driver-container {
        display: flex;
        gap: 10px; /* Ajoute un espace entre les éléments */
        align-items: center; /* Aligne les éléments au centre verticalement */
    }
    
    & .vehicule-select {
        flex: 1;
    }
    
    & .driver-name-input {
        flex: 1;
    }
    
}