:root{
    --bg-light: #eee;
    --sidebar-size: 250px;
}

/* ========== */

.hidden {
    display: none;
}

#blocInfoSave {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#blocInfoSave.show {
    display: block !important; /* ou flex selon ton besoin */
    opacity: 1;
}

.fullHeight{
    height: 100vh;
}

.tablesorter-filter{
    width: 100%;
    outline: none;
}

.max-h-100 {
    max-height: 100% !important;
}

/* ========== */

.loginForm{
    max-width: 100%;
    width: 500px;
    background-color: white
}

.loginForm img{
    width: 100%;
}

/* ========== */

.side-mobile{
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    display: none !important;
    cursor: pointer;
}

.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-size);
    transition: left .2s ease-in-out;
    z-index: 999;
}

.sidebar.overPage{
    left: 0;
}

.background-filter{
    z-index: 99;
    background-color: #00000010;
    backdrop-filter: blur(2px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sidebar .sidebar-scroldown{
    cursor: pointer;
    position: relative;
}

.sidebar .sidebar-scroldown::after{
    content: "arrow_drop_down";
    position: absolute;
    font-family: 'Material Symbols Outlined', serif;
    top: 10px;
    right: 10px;
    color: white;
}

.sidebar .sidebar-scroldown .dropdown-content:not(.open){
    display: none;
}

.sidebar .sidebar-item.sidebar-scroldown .dropdown-content a:hover{
    color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) !important;
}

.sidebar .sidebar-item{
    transition: all .2s linear;
}

.sidebar .sidebar-active{
    background-color: rgba(0, 0, 0, 0.2);
}

.sidebar .sidebar-item:hover{
    background-color: rgba(0, 0, 0, 0.2);
}

/* ========== */

.main-content{
    width: calc(100% - var(--sidebar-size));
    margin-left: var(--sidebar-size);
    transition: width .2s ease-in-out, margin-left .2s ease-in-out;
}

/* ========== */

.formTournees textarea{
    height: 80px !important;
    resize: none;
}

.formTournees .blocTitle{
    position: relative;
}

.formTournees .blocTitle::after{
    position: absolute;
    top: 0;
    left: 15px;
    transform: translateY(-50%);
    background-color: white;
    padding: 0 5px;
    color: var(--bs-success);
    border-radius: 100px;
}

.formTournees .blocTracteur{
    background-color: #3c7d22;
}

.formTournees .blocTracteur::after{
    content: "Transports";
}

.formTournees .blockChargement{
    background-color: #8ed973;
}

.formTournees .blockChargement::after{
    content: "Chargements";
}

.formTournees .blocLivraison{
    background-color: #daf2d0;
}

.formTournees .blocLivraison::after{
    content: "Livraisons";
}

.formTournees .blocImage::after{
    content: "Pièces-jointes";
}

.formTournees input:read-only:not(input[type='checkbox']){
    background-color: #ddd;
    cursor: not-allowed;
}

.formTournees .btn-line .btn-outline-success,
.formTournees .btn-line .btn-outline-danger{
    display: flex;
    align-items: center;
    justify-content: center;
}

.select_traited_bg {
    background-color: #00000050;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.select_traited_bg .select_traited_content{
    background-color: white;
    max-height: 100%;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
}

.select_traited_bg .select_traited_content .title{
    color: var(--bs-green);
    font-weight: bold;
    font-size: 20px;
}

.select_traited_bg .select_traited_content .title span{
    color: var(--bs-red);
    font-weight: normal;
    font-size: 16px;
}

.select_traited_bg .select_traited_content .content{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.select_traited_bg .select_traited_content .content img{
    max-height: 100%;
    height: 400px;
    width: auto;
    position: relative;
}

.select_traited_bg .select_traited_content .content img:hover{
    border: solid 5px var(--bs-green);
    cursor: pointer;
}

.select_traited_bg .select_traited_content .footer{
    margin-top: 20px;
    float: right;
}


/* ========== */

.previewBloc{
    position: relative;
}

.previewBloc > button{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border-radius: 100%;
    height: 50px;
    width: 50px;
    right: 5px;
}

.previewBloc > button.btn-open-img{
    top: 5px;
}

.previewBloc > button.btn-del-img{
    top: 60px;
}

.pj-output{
    max-height: 400px;
}

.pj-output img{
    height: 100%;
    max-width: 100%;
    max-height: 400px;
}

.pj-output .loader{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pj-output .loader span{
    opacity: .5;
    font-size: 13px;
}

.pj-output .loader progress{
    width: 300px;
    height: 20px;
}

.pj-output .errorImg{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.blocPickFile{
    cursor: pointer;
}

.blocPickPdfFile{
    cursor: pointer;
}

.galerieImage{
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
}

.galerieImage img{
    height: 80px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.ImageViewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000070;
    z-index: 999;
    backdrop-filter: blur(3px);
    background-image: var(--image-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ImageViewer button{
    position: fixed;
    top: 20px;
    right: 20px;
}

/* ========== */

.select2.select2-container.select2-container--bootstrap-5{
    height: 3.5rem !important;
}

.select2-container--bootstrap-5 .select2-selection--single{
    padding: .375rem 2.25rem 3rem .75rem !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered{
    padding: 1.2rem 0 0 0 !important;
}
.select2-container--bootstrap-5 .select2-selection{
    /*border: var(--bs-border-width) solid var(--bs-success-rgb) !important;*/
    border: 1px solid #198754 !important;
}

.addCustomSelect{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.editCustomSelect{
    /*display: flex;*/
    display: none;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.addCustomSelect:hover{
    background-color: var(--bs-btn-hover-bg);
}

.floating-label-forced{
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.floating-label-color-forced{
    color: rgba(var(--bs-body-color-rgb), .65);
}

input.weight{
    font-weight: bold;
    color: var(--bs-green) !important;
    background-color: var(--bs-gray-300) !important;
}

.label-weight, .label-weight::after{
    color: var(--bs-success-text-emphasis) !important;
    background-color: transparent !important;
}

input.facturation{
    color: var(--bs-primary-text-emphasis) !important;
    /*background-color: var(--bs-gray-500);*/
}

.label-facturation, .label-facturation::after{
    color: var(--bs-primary-text-emphasis) !important;
}

.div-livraisons-desc {
    justify-items: right;
}

.livraisons-desc {
    width: 75%;
}

.label-livraisons-desc {
    left: 25% !important;
}

/* ========== */

.listingTournees table{ width: max-content; }
.listingTournees table .col-fit-size{ width: 1px; }
.listingTournees table .col-id{ width: 60px; }
.listingTournees table .col-tps{ width: 85px; }
.listingTournees table .col-text{ width: 250px; }

.listingTournees table thead{
    position: sticky;
    top: -20px;
}

.listingTournees table tr.valid td{
    background: #19875430;
}

/* ========== */

@media (max-width: 1500px) {
    .sidebar{
        left: calc(0px - var(--sidebar-size));
    }

    .main-content{
        width: 100%;
        margin-left: 0;
    }

    .side-mobile{
        display: flex !important;
    }
}

@media (min-width: 768px) {
    .max-h-90 {
        max-height: 90% !important;
    }

    .overflow-y-scroll {
        overflow-y: scroll !important;
    }

    .lg\:overflow-hidden {
        overflow: hidden !important;
    }

}

@media (max-width: 768px) {
    #user-tractor > span{
        max-width: 100%;
    }

    /*.blocTracteur > .row > .col, .blockChargement > .row > .col,*/
    .row > .col{
        width: 100%;
        flex-basis: 100%;
    }

    #div-tractor > span, #div-trailer > span  {
        width: 75%;
    }

    .livraisons-desc {
        width: 100%;
    }

    table {
        max-width: 100%;
    }

    table thead {
        display: none; /* on masque les en-têtes */
    }

    table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    table td {
        display: flex;
        justify-content: space-between;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        border: none;
        border-bottom: 1px solid #eee;
    }

    table td:last-child {
        border-bottom: none;
    }

    table td::before {
        content: attr(data-label);
        font-weight: bold;
        flex: 1;
        width: 120px;       /* largeur fixe du label */
        min-width: 120px;   /* empêche le rétrécissement */
        margin-right: 0.5rem;
    }

    table td span,
    table td a,
    table td {
        flex: 1;          /* le contenu prend le reste */
        text-align: left; /* aligne le texte à gauche */
    }

    table tbody td a{
        max-width: 50px !important;
    }

    tfoot tr th div{
        flex-wrap: wrap;
    }

    .border-b{
        border-bottom: 1px solid rgba(52, 58, 64, 0.2) !important;
    }

}