html {
    overflow-x: hidden;
    font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #fdfafd;
}


@media (min-width: 992px) { /* lg */
    .layout {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh; /* pleine hauteur */
    }

    .offcanvas-lg {
        /* Sur desktop, on affiche l’offcanvas comme un bloc fixe */
        position: static;
        transform: none;
        visibility: visible !important;
        border-right: 1px solid #dee2e6;
        width: auto;
    }


    .navbar {
        position: fixed;
        top: 0;
        left: 280px;
        right: 0;
        height: 40px; /* hauteur standard Bootstrap */
        background: #fff;
        border-bottom: 2px solid #999999;
        z-index: 1030; /* au-dessus du contenu */
    }

    .content {
        margin-left: 280px; /* espace pour la sidebar */
        /*padding-top: 56px;  espace pour la navbar */
    }

}

.personal-data-masked {
    color: #888;
    font-style: italic;
    cursor: help;
    border-bottom: 1px dotted #aaa;
}

.offcanvas {
    width: 280px;
}

.offcanvas-header {
    height: 50px;
}

.sidebar-header {
    height: 150px; /* prend toute la hauteur de la fenêtre */
    overflow-y: auto; /* ajoute une barre de défilement verticale si nécessaire */
}

.sidebar-infobox {
    background-color: hsl(31, 0%, 93%);
    box-shadow: 1px 2px 4px 4px rgba(0,0,0,0.1) inset;
    padding: 1rem;
    padding-left: 24px;
    padding-right: 0;
}


.sidebar-nav {
    height: calc(100vh - 315px); /* prend toute la hauteur de la fenêtre */
    overflow-y: auto; /* ajoute une barre de défilement verticale si nécessaire */
}

.sidebar-footer {
    height: 115px; /* prend toute la hauteur de la fenêtre */
    overflow-y: auto; /* ajoute une barre de défilement verticale si nécessaire */
    padding-left: 24px;
}


.search {
    display: flex;
    flex-direction: column;
    justify-items: center;
    background-color: white;
    margin-bottom: 3rem;
    padding: 1rem;
}

.sidebar-container {
    min-width: 270px;
}

.sidebar-search {
    overflow: hidden; /* empêche le dépassement global */
    display: flex;
    flex-direction: column;
    min-width: 250px;
}

@media (min-width: 992px) { /* lg */
    .sidebar-search {
        height: calc(100vh - 100px); /* prend toute la hauteur de la fenêtre */
    }
}

    .sidebar-search form {
        flex-shrink: 0; /* garde le formulaire en haut */
    }
    /*
    .sidebar-search .result-scrollable {
        flex-grow: 1;
        overflow: visible; 
        overflow-y: auto;
    }


    .sidebar-search .dropdown-toggle::after {
        display: inline-block !important;
    }


.dropdown-menu {
    position: absolute !important;
    z-index: 2000 !important;
}
*/


.search-title {
    width: 85%;
    margin: 0.5rem;
    margin-bottom: 2rem;
    display: flex;
    justify-items: flex-start;
}


.search-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    justify-items: center;
    align-content: center;
    align-items: center;
    background-color: white;
    margin-bottom: 3rem;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
}



.search-text {
    width: 60%;
    display: flex;
    justify-self: center;
    justify-content: stretch;
    justify-items: stretch;
    align-content: center;
    flex-direction: row;
    padding: 1rem;
}

.search-bar {
    border: 0;
    border: 2px solid navajowhite;
    width: 80%;
    height: 50px;
    padding-left: 2rem;
    border-radius: 3px;
    transition: all 0.1s ease-in-out;
}

    .search-bar:focus {
        box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.15), 4px 7px 15px 8px rgba(0,0,0,0.08);
        outline: 2px solid orange;
    }

    .search-bar:active {
        box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.15), 4px 7px 15px 8px rgba(0,0,0,0.08);
        outline: 2px solid orange;
    }

.launch-search {
    height: 50px;
    background-color: orange;
    border: 0;
}

    .launch-search:hover {
        background-color: orangered;
    }

.search-filter {
    width: 40%;
    height: 50px;
    display: flex;
    justify-self: center;
    justify-content: flex-end;
    align-content: center;
    flex-direction: row;
}

.search-sorting {
    display: flex;
    justify-self: center;
    justify-content: flex-end;
    align-content: center;
    flex-direction: row;
}

.page-selection {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    flex-direction: row;
    margin-bottom: 2rem;
}

    .page-selection a {
        text-decoration: none;
        color: black;
    }

.page-buttons-container {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    flex-direction: row;
    border-radius: 3px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.page-selection-label {
    margin-right: 1rem;
    align-self: center;
}

.page-button {
    border: 0;
    background-color: white;
    padding: 0.5rem 1rem;
    margin: 0;
    border-right: 1px solid lightgray;
    text-align: center;
}

.page-button-ellipsis {
    border: 0;
    background-color: white;
    padding: 0.1rem 0.1rem;
    font-size: 0.5rem;
    margin: 0;
    border-right: 1px solid lightgray;
    text-align: center;
}

.page-button-current {
    background-color: white;
    padding: 0.5rem 1rem;
    margin: 0;
    border: 1px solid orange;
}

.filter {
    margin-left: 1rem;
    margin-right: 1rem;
    border: 2px solid navajowhite;
    border-radius: 3px;
    transition: all 0.1s ease-in-out;
}

    .filter:focus {
        box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.15), 4px 7px 15px 8px rgba(0,0,0,0.08);
        outline: 2px solid orange;
    }

    .filter:active {
        box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.15), 4px 7px 15px 8px rgba(0,0,0,0.08);
        outline: 2px solid orange;
    }




.card-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.hcard-container {
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.opsilog-card {
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    border-radius: 5px;
    /*margin-bottom: 1rem;*/
    background-color: #fff;
    box-shadow: 0 1px 2px 0px rgba(0,0,0,0.15), 0 2px 5px 2px rgba(0,0,0,0.09);
    padding: 0;
    transition: box-shadow 0.15s ease-in-out;
}

    .opsilog-card:hover {
        box-shadow: 0 2px 3px 1px rgba(0,0,0,0.15), 0 7px 15px 5px rgba(0,0,0,0.09);
    }

    .opsilog-card.green {
        border-color: seagreen;
    }

    .opsilog-card.orange {
        border-color: lightsalmon;
    }

    .opsilog-card.red {
        border-color: indianred /*lightcoral*/;
    }

    .opsilog-card.gray {
        border-color: black /*lightcoral*/;
    }


.vehicle-list-item {
    transition: box-shadow 0.15s ease-in-out;
    border-radius: .25rem; /* arrondis visibles */
    margin: .5rem 0; /* espace vertical pour voir les shadows */
    overflow: visible; /* au cas où un style global couperait la shadow */
}

    .vehicle-list-item:hover {
        box-shadow: 0 1px 2px 0px rgba(0,0,0,0.15), 0 2px 5px 2px rgba(0,0,0,0.09);
    }

.hcard {
    display: flex;
    flex-direction: row;
    border: 2px solid black;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0px rgba(0,0,0,0.15), 0 2px 5px 2px rgba(0,0,0,0.09);
    padding: 0;
    transition: box-shadow 0.15s ease-in-out;
}

    .hcard:hover {
        box-shadow: 0 2px 3px 1px rgba(0,0,0,0.15), 0 7px 15px 5px rgba(0,0,0,0.09);
    }

    .hcard.green {
        border-color: seagreen;
    }

    .hcard.orange {
        border-color: lightsalmon;
    }

    .hcard.red {
        border-color: indianred /*lightcoral*/;
    }

    .hcard.gray {
        border-color: black /*lightcoral*/;
    }

.opsilog-card-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: stretch;
    background-color: #fff;
    padding: 0;
    border-bottom: 0;
}

    .opsilog-card-header.elevate {
        box-shadow: 0 2px 5px 2px rgba(0,0,0,0.1);
    }

.opsilog-card-status {
    width: 10px;
    flex-shrink: 0;
    flex-grow: 0;
}

    .opsilog-card-status.green {
        background-color: seagreen;
    }

    .opsilog-card-status.orange {
        background-color: lightsalmon;
    }

    .opsilog-card-status.red {
        background-color: indianred /*lightcoral*/;
    }

    .opsilog-card-status.gray {
        background-color: black /*lightcoral*/;
    }



.driver-card-header {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 1rem;
}

.avatar-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-left: 1rem;
}

.avatar-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /*margin: 0.3rem;*/
}

.driver-infos {
    flex: 1;
}

.driver-additional-infos {
    margin-right: 1rem;
}

.driver-infos h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.driver-infos p {
    font-size: 0.9rem;
}


.text-with-dot::before {
    content: "";
    display: inline-block;
    width: 12px; /* taille de la pastille */
    height: 12px;
    background-color: black; /* couleur de la pastille */
    border-radius: 50%; /* rend la pastille circulaire */
    margin-right: 8px; /* espace entre la pastille et le texte */
}


.text-with-dot.green::before {
    background-color: var(--bs-success);
}

.text-with-dot.orange::before {
    background-color: var(--bs-warning);
}

.text-with-dot.red::before {
    background-color: var(--bs-danger) /*lightcoral*/;
}

.text-with-dot.gray::before {
    background-color: black /*lightcoral*/;
}

.action-section {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center
}


.action2 {
    width: 120px;
    height: 50px;
    border: 0px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    background-color: orange;
    margin-left: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action {
    box-shadow: 0 2px 4px 1px rgba(0,0,0,0.1);
}

    .action:hover {
        background-color: orangered;
    }

    .action a {
        text-decoration: none;
        color: white;
    }

    .action.orange {
        background-color: orange;
    }

    .action.yellow-orange {
        background-color: #ffb347;
    }

    .action.yellow {
        background-color: #ffd347;
    }

    .action.left {
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        margin-left: 0.7rem;
    }

    .action.right {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-right: 0.7rem;
    }

.action-icon {
    width: 20%;
    height: auto;
}

.arrow {
    font-size: 1.5rem;
    background: none;
    border: 0px;
    transition: transform 0.3s ease-in-out;
}

    .arrow.rotation {
        transform: rotate(180deg)
    }

.btn a {
    text-decoration: none;
    color: inherit;
}

.opsilog-card-body {
    /*/display: none; /* caché par défaut */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    box-shadow: inset 0 2px 5px 2px rgba(0,0,0,0.1);
}

    .opsilog-card-body.show {
        max-height: 1000px; /* ajustable selon le contenu */
    }

.opsilog-card-body-info {
    padding: 1rem;
    margin: 1rem;
    margin-top: 1.5rem;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.1), 0px 1px 8px 1px rgba(0,0,0,0.09);
    border-radius: 5px;
    min-width: 300px;
}

    .opsilog-card-body-info p {
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }

    .opsilog-card-body-info h3 {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid black;
    }

.offence-card-body {
    /*/display: none; /* caché par défaut */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

    .offence-card-body.show {
        max-height: 1000px; /* ajustable selon le contenu */
    }


.activity-content {
    width: 100%;
    height: calc(100vh - 250px);
    overflow-y: auto;
}

.archive-viewer {
    width: 100%;
    height: 900px;
}

.add-item-container {
    display: none !important; /* caché par défaut */
}

    .add-item-container.show {
        display: flex !important;
    }


.btn-theme-color1 {
    background-color: hsl(31, 97%, 50%);
    border-color: hsl(31, 80%, 80%);
    color: hsl(0, 0%, 100%);
    border: 0;
    border-top: 2px solid hsl(21, 80%, 75%);
    box-shadow: 0 2px 4px 1px rgba(0,0,0,0.1);
}

    .btn-theme-color1:hover {
        background-color: hsl(31, 100%, 55%);
        border-color: hsl(31, 85%, 80%);
    }

    .btn-theme-color1:disabled {
        background-color: hsl(31, 0%, 60%);
        border-color: hsl(31, 0%, 90%);
    }



.btn-outline-ok {
    border-color: seagreen;
    color: seagreen;
}

.btn-check:checked + .btn-outline-ok {
    background-color: seagreen;
    border-color: seagreen;
    color: white !important;
}

.btn-check:focus + .btn-outline-ok {
    border-color: seagreen;
    color: seagreen;
}

.btn-check:active + .btn-outline-ok {
    border-color: seagreen;
    color: seagreen;
}

.btn-check:hover + .btn-outline-ok {
    background-color: seagreen;
    border-color: seagreen;
    color: white !important;
}




.btn-outline-alert {
    border-color: lightsalmon;
    color: lightsalmon;
}

.btn-check:checked + .btn-outline-alert {
    background-color: lightsalmon;
    border-color: lightsalmon;
    color: white !important;
}

.btn-check:focus + .btn-outline-alert {
    border-color: lightsalmon;
    color: lightsalmon;
}

.btn-check:active + .btn-outline-alert {
    border-color: lightsalmon;
    color: lightsalmon;
}

.btn-check:hover + .btn-outline-alert {
    background-color: lightsalmon;
    border-color: lightsalmon;
    color: white !important;
}



.btn-outline-late {
    border-color: indianred;
    color: indianred;
}

.btn-check:checked + .btn-outline-late {
    background-color: indianred;
    border-color: indianred;
    color: white !important;
}

.btn-check:focus + .btn-outline-late {
    border-color: indianred;
    color: indianred;
}

.btn-check:active + .btn-outline-late {
    border-color: indianred;
    color: indianred;
}

.btn-check:hover + .btn-outline-late {
    background-color: indianred;
    border-color: indianred;
    color: white !important;
}


.btn-outline-inactive {
    border-color: black;
    color: black;
}

.btn-check:checked + .btn-outline-inactive {
    background-color: black;
    border-color: black;
    color: white !important;
}

.btn-check:focus + .btn-outline-inactive {
    border-color: black;
    color: black;
}

.btn-check:active + .btn-outline-inactive {
    border-color: black;
    color: black;
}

.btn-check:hover + .btn-outline-inactive {
    background-color: black;
    border-color: black;
    color: white !important;
}


.page-item.active .text-theme-color1 {
    color: hsl(31, 97%, 40%);
    border-color: hsl(31, 97%, 40%);
}



.interactive-text:hover {
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    cursor: pointer;
}

.interactive-box {
    transition: 0.15s ease-in-out;
    border-top: 2px solid;
    border-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity));
    border-radius: 5px;
}

    .interactive-box:hover {
        box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.1);
        border-top: 2px solid white;
        cursor: pointer;
    }

.bg-theme-color1 {
    background-color: hsl(31, 97%, 55%);
}

.bg-theme-color1-light {
    background-color: hsl(31, 97%, 80%);
}

.bg-theme-color1-dark {
    background-color: hsl(31, 97%, 30%);
}

.border-theme-color1 {
    border-color: hsl(31, 97%, 55%) !important;
}

.color-opsilog {
    color: hsl(31, 97%, 55%) !important;
}

.chart-area {
    height: 270px;
    width: 270px;
}

.full-height {
    height: calc(100vh - 100px);
}

#uploadSource {
    display: block;
    position: relative;
    height: 300px;
    width: 500px;
}

.dashboard-filters {
    display: block;
    left: calc(50% + 130px);
    /*transform: translate(-50%, 0);*/
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: -1.5rem;
}

.dashboard-content {
    /*margin-top: 80px;*/
}


.dashboard-filter {
}

.notification {
    border-radius: 15px;
    border: 2px solid;
    font-weight: 600;
}

    .notification.green {
        background-color: #d1e7dd;
        color: #0a3622;
        border-color: #a3cfbb;
    }

    .notification.orange {
        background-color: #fff3cd;
        color: #664d03;
        border-color: #ffe69c;
    }

    .notification.red {
        background-color: #f8d7da;
        color: #58151c;
        border-color: #f1aeb5;
    }

    .notification.blue {
        background-color: #cfe2ff;
        color: #052c65;
        border-color: #9ec5fe;
    }

    .notification.gray {
        background-color: #e2e3e5;
        color: #2b2f32;
        border-color: #c4c8cb;
    }

.bottom-actions {
    box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.1);
    border-top: 2px solid white;
}

.bottom-actions-fs {
    width: 300px;
    height: 45px;
    box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.1);
    border-top: 2px solid white;
}

.extract-search-area{

}
    .extract-search-area .full-height {
        height: calc(100vh - 150px);
    }

.activity-status-icon {
    max-height: 1000px;
    transition: max-height 0.1s ease-in-out;
}
    .activity-status-icon.d-none {
        max-height: 0;
    }

.disabled-zone {
    opacity: 0.5;
    pointer-events: none;
}

.activity-noaccess {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/activity_feature.png); /* gris transparent */
    background-size: contain;
    z-index: 10;
    cursor: not-allowed;
    opacity: 0.5;
}

.overlay-message {
    background: white;
    text-align: center;
}

.validation-summary-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.validation-summary-errors ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.validation-summary-errors ul li::before {
    content: "";
    color: #842029;
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23842029' viewBox='0 0 16 16'%3E%3Cpath d='M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.48 1.48 0 0 1 0-2.098zm1.4.7a.495.495 0 0 0-.7 0L1.134 7.65a.495.495 0 0 0 0 .7l6.516 6.516a.495.495 0 0 0 .7 0l6.516-6.516a.495.495 0 0 0 0-.7L8.35 1.134z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C%2Fsvg%3E");
}

.external-ipd-link{
    height: 300px;
    width: 250px;
}

.external-ipd-logo {
    width: 220px;
}



.resource-access-control {
    border: 4px solid rgb(150, 150, 150);
    background-color: white;
    color: rgb(120, 120, 120);
    max-width: 48%;
    border-radius: 9px;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
}
.resource-access-control.active {
    border-color: rgb(120, 160, 230);
    background-color: rgb(253, 254, 255);
    color: rgb(100, 100, 150);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.resource-access-control.full {
    border-color: rgb(120, 190, 140);
    background-color: rgb(254, 255, 253);
    color: rgb(100, 100, 150);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
    .resource-access-control h5 {
        color: rgb(120, 120, 120);
    }

    .resource-access-control label {
        color: rgb(120, 120, 120);
    }

    .resource-access-control.active h5 {
        color: rgb(30, 60, 100);
    }

    .resource-access-control.active label {
        color: rgb(30, 60, 100);
    }

    .resource-access-control.full h5 {
        color: rgb(40, 90, 30);
    }

    .resource-access-control.full label {
        color: rgb(40, 90, 30);
    }


.btn.resource-toggler{

}
.btn.resource-toggler:focus{
    outline: 0;
    box-shadow: none;
}


.fixed-size-column-400 {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis; /* affiche "..." */
    white-space: nowrap; /* si vous voulez éviter le retour à la ligne */
}