@font-face {
    font-family: "Rubik Regular";
    src: url("../fonts/Rubik-Variable.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "Rubik Medium";
    src: url("../fonts/Rubik-Variable.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Rubik Bold";
    src: url("../fonts/Rubik-Variable.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "Rubik Black";
    src: url("../fonts/Rubik-Variable.ttf");
    font-weight: 700;
}

/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/************************************************************ TWEAKS **********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
:root {
    --bleu-fonce: #51459e;
    --orange-feu: #F9896B;
    --bleu-flash: #84E8F4;
    --color-grey: #c3c3c3;
    --color-light: #f6f8ff;
    --hauteur-menu: 60px;
    --border-color: #eceff7;
    --shadow-md: 0 .5rem 1rem rgb(0 0 0 / 10%);
    --sidebar-width: 360px;
    --planning-item: 210px;
    --canard: #3EB7C6;
    --beige: #ffac95;
}

/* largeur et hauteur (barre horizontale et barre verticale) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--color-light);
    border-left: 1px solid var(--border-color);
    background-color: white;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #e0e6f7;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--bleu-flash);
    }

[placeholder] {
    text-overflow: ellipsis;
}

:focus-visible {
    outline: 1px solid transparent !important;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    text-overflow: ellipsis;
    font-size: 14px;
    color: #cacaca;
    font-weight: 100;
}

::-moz-placeholder {
    /* Firefox 19+ */
    text-overflow: ellipsis;
    font-size: 14px;
    color: #cacaca;
    font-weight: 100;
}

:-ms-input-placeholder {
    /* IE 10+ */
    text-overflow: ellipsis;
    font-size: 14px;
    color: #cacaca;
    font-weight: 100;
}

:-moz-placeholder {
    /* Firefox 18- */
    text-overflow: ellipsis;
    font-size: 14px;
    color: #cacaca;
    font-weight: 100;
}

b, strong, .fw-bold, bold, .badge {
    font-family: 'Rubik Medium', sans-serif;
    font-weight: 400 !important;
}

a {
    color: var(--bleu-fonce);
    text-decoration: none;
    position: relative;
}

    a.flex-link {
        display: flex;
        align-items: center;
    }

        a.flex-link > i {
            padding-right: 5px;
        }

        a.flex-link:after {
            content: '';
            height: 2px;
            width: 0%;
            position: absolute;
            background-color: var(--bleu-flash);
            left: 0;
            transition: .2s;
        }

        a.flex-link:after {
            top: 100%;
        }

    a:hover::after {
        width: calc(100% - 20px);
        transition: .2s;
    }

.accordion-title {
    cursor: pointer;
}

    .accordion-title:hover,
    .accordion-title[aria-expanded="true"]:hover {
        background-color: #eceff7;
    }

.accordion-button.custom {
    box-shadow: none !important;
    padding: 0;
    background-color: transparent !important;
}

.accordion-button:not(.collapsed) {
    color: var(--bleu-fonce);
    background: transparent;
    box-shadow: none;
}

.bg-success {
    background-color: #2ddb8a !important;
}

.bg-light {
    background-color: var(--color-light) !important;
}

.bglink {
    background: radial-gradient(farthest-corner at 0% 0%, var(--bleu-flash) 40%, var(--bleu-fonce) 40%, var(--bleu-fonce) 70%, var(--orange-feu) 70%, var(--orange-feu) 100%);
    color: white;
}

/*MODAL API GOOGLE MAPS*/
.pac-container {
    z-index: 5000 !important;
}


.text-success {
    color: #15bb6e !important;
}

.text-gold {
    color: #FFD700 !important;
}



.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--border-color) !important;
}

.border {
    border: 1px solid var(--border-color) !important;
}

.border-grey {
    border-color: var(--border-color) !important;
    border-style: solid;
}

.border-delete {
    border: 2px dashed var(--orange-feu);
}

.border-final {
    border: 2px solid #15bb6e;
}

.bloc-carre {
    background-color: var(--color-light);
    border: 2px solid var(--border-color);
    border-radius: 5px;
    max-width: 240px;
    position: relative;
}

    .bloc-carre.active {
        border-color: var(--bleu-fonce);
    }

        .bloc-carre.active::after {
            content: "\f26a";
            position: absolute;
            top: 10px;
            right: 10px;
            color: var(--bleu-fonce);
            font-size: 26px;
            display: inline-block;
            font-family: bootstrap-icons !important;
            font-style: normal;
            font-weight: normal !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: -0.125em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

.bloc-content {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
    font-family: 'Rubik Medium', sans-serif;
    cursor: pointer;
}

.bloc-carre:hover {
    border-color: var(--bleu-fonce);
}

.bloc-prix {
    border: 2px solid var(--border-color);
    background-color: var(--color-light);
    position: relative;
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    border-radius: 10px;
    margin-top: 2rem;
}

.bloc-prix b {
    position: absolute;
    top: -10px;
    left: 55px;
    z-index: 1;
}

.bloc-prix b::before {
    content: '';
    width: calc(100% + 56px);
    height: calc(100% + 30px);
    background-color: #fff;
    position: absolute;
    left: -30px;
    bottom: -15px;
    border: 2px solid;
    border-color: var(--border-color);
    border-radius: 5px;
    z-index: -1;
}

.chat-new-messages {
    position: sticky;
    bottom: 20px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chat-new-messages > span {
        background-color: var(--bleu-fonce);
        color: white;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
        border-radius: 50px;
        z-index: 50;
        font-size: 14px;
        text-align: center;
        padding: 5px 20px;
        cursor: pointer;
        position: relative;
        transition: .1s;
        bottom: 0;
    }

        .chat-new-messages > span:hover {
            transition: .1s;
            bottom: 5px;
        }

.chat-backdrop {
    content: '';
    position: absolute;
    height: 100px;
    bottom: -20px;
    width: calc(100% + 32px);
    background: linear-gradient(0deg, #f6f8ff, transparent);
    z-index: 10;
}

#charging_backdrop_with_text .loader {
    display: grid !important;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    justify-content: center;
    justify-items: center;
    text-align: center;
    border: 1px solid var(--bleu-flash);
}

#charging_backdrop_with_text p {
    color: var(--bleu-fonce);
    font-weight: bold;
    font-size: 18px;
    max-width: 100%;

}

#charging_backdrop_with_text svg {
    width: 85px;
}


.select-contact-wrapper {
    position: absolute;
    width: 100%;
    height: 94px;
    z-index: 50;
    cursor: pointer;
}

    .select-contact-wrapper:hover + input {
        background-color: var(--bleu-flash) !important;
    }

.contact-alert-selection {
    display: flex;
    align-items: center;
    justify-content: center;
}


.contact-messages-wrapper input[type=checkbox] {
    position: absolute;
    left: 15px;
    width: 42px;
    height: 42px;
    border-radius: 50px !important;
    z-index: 50;
    top: 21px;
    background-color: transparent;
    border: 2px solid var(--bleu-fonce);
}

    .contact-messages-wrapper input[type=checkbox]:checked {
        background-color: var(--bleu-flash);
    }

.contact-creation-groupe-wrapper {
    position: fixed;
    z-index: 5000;
    bottom: -80px;
    right: 10px;
    width: 495px;
    background-color: white;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    transition: .5s;
}

.contact-ajout-participant-a-groupe-wrapper {
    position: fixed;
    z-index: 5000;
    bottom: -100px;
    right: 10px;
    width: 495px;
    background-color: white;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    transition: .5s;
}

    .contact-creation-groupe-wrapper.active, .contact-ajout-participant-a-groupe-wrapper.active {
        transition: .5s;
        bottom: 0;
    }

.contact-group-name-input {
    border: 2px solid;
    padding: 10px 10px 10px 15px;
    border-radius: 90px;
    background-color: white;
    border-color: var(--bleu-fonce);
    margin: 1rem;
    width: 100%;
}

.contact-group-add-participant {
    padding: 10px 10px 10px 15px;
    background-color: white;
    margin: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.contact-btn-next-name-input {
    height: 44px;
    border-radius: 50px;
    position: absolute;
    right: 18px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-btn-next-add-input {
    height: 44px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.select-contact-wrapper > span {
    position: absolute;
    right: 16px;
    top: 35px;
}

.h-custom {
    height: var(--hauteur-menu);
}

.input-group-text {
    background-color: #e2eaff;
}

sup {
    top: -3px;
    font-size: .5rem;
}

.modal-xxl {
    max-width: 85%;
}

.modal-title {
    margin: 0;
}

.modal-backdrop {
    background-color: #949dac;
}

.list-group-item.options {
    padding-left: 0;
    border-color: var(--bleu-flash);
    font-family: 'Rubik Medium', sans-serif;
}

.list-group-item i {
    color: #f87957;
    font-size: 16px;
    min-width: 25px;
    display: inline-block;
}

.form-check-label {
    user-select: none;
}

.form-check-input.radio-input-pills:checked + label {
    background-color: var(--bleu-flash);
}

.offcanvas-backdrop {
    background-color: #f6f8ff;
}

.offcanvas-end {
    border-color: var(--border-color);
}

.fs-7 {
    font-size: .75rem !important;
}

.fs-8 {
    font-size: .5rem !important;
}
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************** NAVIGATION **********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
.dot {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    margin-right: 0.5rem;
    line-height: 23px;
    padding: 7px 7px 0 0;
    margin-bottom: 5px;
}

.dot-xs {
    transform: scale(.7);
}

.logo {
    background: url(../svg/logo-square.svg);
    width: calc(var(--hauteur-menu) - 1px);
    height: calc(var(--hauteur-menu) - 1px);
    flex-shrink: 0;
}

    .logo:hover {
        background: url(../svg/logo-id-color.svg);
        cursor: pointer;
    }

#scroll_top.active {
    transform: none;
}

#scroll_top:hover {
    box-shadow: var(--shadow-md);
}

#scroll_top {
    transition: .5s;
    position: fixed;
    right: 30px;
    bottom: 100px;
    transform: none;
    z-index: 1000;
    transform: translateX(100px) rotate(180deg);
    font-size: 30px;
    background-color: var(--bleu-flash);
    border-radius: 50px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    color: var(--bleu-fonce);
}

#nav_wrapper {
    height: var(--hauteur-menu);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-light);
    border-bottom: 1px solid;
    border-color: var(--border-color);
    z-index: 1050;
    position: relative;
}

.navigation-wrapper {
    display: flex;
    align-items: center;
}

.mobile-wrapper {
    display: none;
}

.mobile-menu {
    position: fixed;
    top: var(--hauteur-menu);
    padding: 15px;
    background-color: var(--color-light);
    width: 100vw;
    border-bottom: 1px solid var(--border-color);
}

.mega-wrapper {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: stretch;
}

.mega-item {
    border-right: 1px solid;
    border-color: var(--border-color);
    padding: 0 25px;
    display: flex;
    height: calc(var(--hauteur-menu) - 1px);
    align-items: center;
    font-size: 14px;
    position: relative;
    z-index: 1002;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    color: var(--bleu-fonce);
}

    .mega-item:hover:nth-child(1) {
        background-color: var(--orange-feu);
    }

    .mega-item:hover:nth-child(2),
    .mega-item:hover:nth-child(3),
    .mega-item:hover:nth-child(7) {
        background-color: var(--bleu-fonce);
    }

    .mega-item:hover:nth-child(4),
    .mega-item:hover:nth-child(6) {
        background-color: var(--orange-feu);
    }

    .mega-item:hover:nth-child(5) {
        background-color: var(--bleu-flash);
        color: var(--bleu-fonce);
    }

    .mega-item:first-of-type {
        border-left: 1px solid;
        border-color: var(--border-color);
    }

    .mega-item:hover {
        color: white;
    }

    .mega-item > span,
    .licence-item .licence span {
        font-family: 'Rubik Black';
        font-size: 14px;
        text-transform: uppercase;
    }


.notif-dot-menu {
    font-family: "Rubik Regular", serif;
    width: 18px;
    height: 18px;
    background-color: var(--orange-feu);
    border-radius: 50px;
    font-size: 8px;
    color: white;
    border: 2px solid white;
    position: absolute;
    top: 8px;
    right: 8px;
    text-align: center;
    line-height: 13px;
}

.mega-item > i {
    font-size: 20px;
    padding: 5px 5px 5px 0;
    margin-right: 5px;
}

.mega-item-wrapper {
    color: var(--bleu-fonce);
    box-shadow: var(--shadow-md);
    position: absolute;
    left: 0;
    display: none;
    background-color: var(--color-light);
    padding: 28px 35px 35px 35px;
    justify-content: flex-start;
    gap: 35px 0;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100vw - 664px);
}

.mega-item:hover .mega-item-wrapper {
    display: flex;
    top: calc(var(--hauteur-menu) - 1px);
    border: 1px solid;
    border-color: var(--border-color);
    left: -1px;
}

.mega-item .item-menu {
    width: 33%;
    padding-right: 30px;
}

.mega-item-link {
    padding: 2px 0;
    margin-bottom: 10px;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    position: relative;
    transition: .5s;
}

    .mega-item-link.parent:hover {
        background-color: white;
        border-radius: 10px;
        transition: .25s;
        padding-left: 20px;
        padding-right: 20px;
    }

        .mega-item-link.parent:hover h5::after {
            opacity: 0;
            transition: .25s;
        }

    .mega-item-link.parent .bi.draggable-icon {
        font-size: 24px;
        position: absolute;
        left: 0px;
        color: var(--bleu-flash);
        height: 100%;
        line-height: 70px;
        cursor: grab;
    }

    .mega-item-link > h5 > i:not(.draggable-icon),
    #shortcut_wrapper a {
        display: inline-block;
        background-color: #e2eaff;
        border-radius: 5px;
        width: calc(var(--hauteur-menu) - 10px);
        height: calc(var(--hauteur-menu) - 10px);
        text-align: center;
        line-height: calc(var(--hauteur-menu) - 10px);
        font-size: 22px;
        color: var(--bleu-fonce);
    }

.dropped {
    transition: all 0s ease 0s;
    z-index: 1000;
    margin: 5px 0 0 0;
    width: calc(var(--hauteur-menu) - 10px);
    height: calc(var(--hauteur-menu) - 10px);
    border-radius: 5px;
}

.dopped:last-of-type {
    margin-bottom: 0;
}

.dropped > h5 {
    background-color: #e2eaff;
    width: calc(var(--hauteur-menu) - 10px);
    height: calc(var(--hauteur-menu) - 10px);
    line-height: calc(var(--hauteur-menu) - 9px);
    text-align: center;
    font-size: 22px;
    border-radius: 5px;
    margin-bottom: 5px;
}

/* #shortcut_wrapper li {
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    text-align: center;
} */
.dropped h5::after {
    display: none;
}

.dropped:hover {
    padding: 0;
    background-color: transparent;
}

.mega-item-link:hover {
    color: black;
}

.mega-item-link:last-of-type {
    margin-bottom: 0;
}

.mega-item-link .link-arrow {
    position: relative;
    right: 0;
    transition: .2s;
    color: transparent;
}

.mega-item-link:hover .link-arrow {
    color: var(--bleu-fonce);
    right: 5px;
}

.user-icon,
.shortcut-icon,
.search-wrapper > .search-input-wrapper {
    display: flex;
    margin: 0 15px;
    padding: 0 10px;
}

.user-icon,
.shortcut-icon {
    height: 40px;
    line-height: 40px;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.shortcut-icon,
.search-wrapper > .search-input-wrapper {
    width: 40px;
    position: relative;
    transition: .4s;
}

.search-input-wrapper {
    border: 2px solid transparent;
}

.search-wrapper > button {
    position: absolute;
    right: 17px;
    top: 1px;
    z-index: 50;
    border-radius: 50px;
    height: 34px;
    width: 34px;
    line-height: 36px;
    color: var(--bleu-fonce);
}

    .search-wrapper > button i {
        font-size: 16px;
    }

    .search-wrapper > button:hover {
        background-color: var(--color-light);
    }

.search-wrapper.active > .search-input-wrapper {
    width: var(--sidebar-width);
    border: 2px solid var(--border-color);
    padding: 0 20px 0 10px;
    z-index: 50;
}

.search-results {
    position: absolute;
    left: 15px;
    border: 2px solid var(--border-color);
    width: calc(100% - 30px);
    padding-top: 15px;
    background-color: var(--color-light);
    top: 17px;
    max-height: 80vh;
    overflow: auto;
    box-shadow: var(--shadow-md);
}

    .search-results ul:before {
        content: attr(aria-label);
        font-size: 10px;
        padding-left: 10px;
        color: var(--color-grey)
    }

.search-wrapper input {
    border: none;
    flex: 1;
    padding: 0 100px 0 10px;
    font-size: 14px;
}

.search-filters {
    margin-right: 10px;
    margin-left: -5px;
    font-size: 12px;
    position: absolute;
    right: 10px;
    z-index: 50;
    background-color: white;
}

.radio-label-pills:hover {
    cursor: pointer;
}

.radio-label-pills {
    border: 2px solid var(--border-color);
}

    .radio-label-pills:first-of-type {
        border-right: none;
    }

radio-label-pills:last-of-type {
    border-left: none;
}

.result-item {
    display: flex;
    font-size: 12px;
    color: black;
    width: 100%;
    align-items: center;
    padding: 10px;
    border-top: 1px solid var(--border-color);
}

    .result-item:hover {
        background-color: white;
    }

        .result-item:hover > .pastille-ronde {
            transform: scale(.9);
        }

    .result-item > .pastille-ronde {
        transition: .2s;
        transform: scale(.75);
        font-size: 22px;
    }

.result-info {
    max-width: 87%;
}

.shortcut-icon .bi-bell.have-notif {
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    animation: ring 4s .7s ease-in-out infinite;
}

@keyframes ring {
    0% {
        transform: rotate(0);
    }

    1% {
        transform: rotate(30deg);
    }

    3% {
        transform: rotate(-28deg);
    }

    5% {
        transform: rotate(34deg);
    }

    7% {
        transform: rotate(-32deg);
    }

    9% {
        transform: rotate(30deg);
    }

    11% {
        transform: rotate(-28deg);
    }

    13% {
        transform: rotate(26deg);
    }

    15% {
        transform: rotate(-24deg);
    }

    17% {
        transform: rotate(22deg);
    }

    19% {
        transform: rotate(-20deg);
    }

    21% {
        transform: rotate(18deg);
    }

    23% {
        transform: rotate(-16deg);
    }

    25% {
        transform: rotate(14deg);
    }

    27% {
        transform: rotate(-12deg);
    }

    29% {
        transform: rotate(10deg);
    }

    31% {
        transform: rotate(-8deg);
    }

    33% {
        transform: rotate(6deg);
    }

    35% {
        transform: rotate(-4deg);
    }

    37% {
        transform: rotate(2deg);
    }

    39% {
        transform: rotate(-1deg);
    }

    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

.no-results {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - (var(--hauteur-menu)*5));
    flex-direction: column;
}

.notif {
    display: none;
    position: absolute;
    top: 3px;
    color: white;
    right: 0px;
    line-height: 15px;
    font-family: 'Rubik Medium', sans-serif;
    width: 18px;
    font-size: 8px;
    height: 18px;
    border-radius: 50px;
    background-color: #f9896b;
    border: 2px solid var(--color-light);
    z-index: 50;
    box-shadow: 0 0 10px 0 #f9896b;
}

    .notif.active {
        display: block;
    }

.shortcut-icon > i,
.search-wrapper > .search-input-wrapper > i {
    font-size: 22px;
}

.shortcut-wrapper,
.user-menu {
    position: absolute;
    background-color: var(--color-light);
    border: 1px solid;
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
    min-width: 25vw;
    max-width: 600px;
    z-index: 100;
}

.shortcut-wrapper {
    top: calc(var(--hauteur-menu) - 11px);
    right: 0;
    z-index: 50;
    font-size: 14px;
    max-height: 300px;
    overflow: auto;
}


.user-icon > i {
    font-size: 28px;
}

.user-icon > span {
    font-size: 14px;
}

.user-icon:hover,
.shortcut-icon:hover,
.search-wrapper > .search-input-wrapper:hover,
.search-wrapper.active > .search-input-wrapper {
    background-color: white;
    border-radius: 50px;
}

.user-info {
    min-width: 150px;
    max-width: 200px;
    border-left: 1px solid;
    border-color: var(--border-color);
}

.user-shortcut:first-of-type {
    border-left: none;
}

.user-shortcut,
.search-wrapper {
    position: relative;
    border-left: 1px solid;
    border-color: var(--border-color);
}

.user-wrapper {
    padding: 5px;
    min-width: 150px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    color: var(--bleu-fonce);
}

    .user-wrapper > * {
        cursor: pointer;
    }

.user-menu {
    right: 0;
    top: calc(var(--hauteur-menu) - 1px);
}

.user-item {
    border-bottom: 1px solid;
    border-color: var(--border-color);
    font-size: 14px;
}

    .user-item > a:hover {
        background-color: white;
    }

.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: .5;
    border-bottom: 1px solid;
    border-color: var(--border-color);
}

    .notification-item:last-of-type {
        border-bottom: none;
    }

    .notification-item.non-lu {
        opacity: 1;
    }

    .notification-item:hover {
        background-color: white;
        cursor: pointer;
        opacity: 1;
    }

    .notification-item.non-lu span:first-of-type {
        font-family: 'Rubik Medium', sans-serif;
    }

    .notification-item.non-lu .small {
        font-size: 10px;
        color: #999999;
    }

.nav-notif .nav-link {
    font-size: 12px;
    font-family: 'Rubik Medium';
    color: #776db4;
    text-transform: uppercase;
    width: 100%;
}

    .nav-notif .nav-link.active {
        background-color: white;
        color: var(--bleu-fonce);
    }

#shortcut_wrapper {
    width: var(--hauteur-menu);
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 250;
    left: 0;
    background-color: var(--color-light);
    border-right: 1px solid;
    border-color: var(--border-color);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /*justify-content: center;*/
    align-items: center;
    transition: .5s;
    padding-top: var(--hauteur-menu);
    transition-delay: 0s;
}

    #shortcut_wrapper.active {
        width: calc(var(--hauteur-menu) + 50px);
    }

    #shortcut_wrapper .bi-plus-square-dotted {
        width: var(--hauteur-menu);
        height: var(--hauteur-menu);
        line-height: var(--hauteur-menu);
        font-size: 30px;
        text-align: center;
        color: var(--bleu-fonce);
    }

.shortcut-list {
    width: var(--hauteur-menu);
    min-height: var(--hauteur-menu);
    text-align: center;
}

    .shortcut-list.active::after {
        content: '';
        position: absolute;
        top: calc(50% - 25px);
        width: calc(var(--hauteur-menu) - 10px);
        height: calc(var(--hauteur-menu) - 10px);
        border: 1px solid;
        border-color: var(--border-color);
        left: calc(50% - 25px);
        border-radius: 5px;
        z-index: -5;
    }

    .shortcut-list .ui-sortable-placeholder,
    .shortcut-list .ui-state-highlight {
        background-color: white !important;
        border: 1px solid;
        border-color: var(--border-color);
        margin-top: 5px;
        margin-bottom: -7px;
    }

/* .ui-draggable-dragging {
    cursor: grabbing;
    box-shadow: var(--shadow-md);
} */
.drop-here {
    display: flex;
    height: var(--hauteur-menu);
    top: calc(50% - 30px);
    position: absolute;
    left: 100%;
    width: 100px;
    font-size: 14px;
    color: #999999;
    line-height: 1.5;
    background-color: white;
    padding: 10px;
    min-width: 180px;
    align-items: center;
    border-radius: 0 50px 50px 0;
    border: 1px solid;
    border-color: var(--border-color);
}

/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/*********************************************************** LOADER ***********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/

.loader {
    min-width: 30px;
    max-width: 60px;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

    .loader.absolute {
        position: absolute;
        z-index: 1000;
        margin: 0 10px;
    }

.rond.bleu {
    fill: #51459E;
    animation: load 1s infinite ease-in-out;
    animation-delay: 0.2s;
}

.rond.bleuflash {
    fill: #84E8F4;
    animation: load 1s infinite ease-in-out;
    animation-delay: 0.1s;
}

.rond.orange {
    fill: #F9896B;
    animation: load 1s infinite ease-in-out;
}

@keyframes load {

    0%, 100% {
        transform: translateY(30px);
    }

    50% {
        transform: translateY(-30px);
    }
}

/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/*********************************************************** GLOBAL ***********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/

body {
    font-family: "Rubik Regular", serif;
    background-color: white;
    overflow: hidden;
}

a.data-item {
    position: relative;
    overflow: hidden;
}

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
    from {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }

    10% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }

    12% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }

    20% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }

    30% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }
}

@keyframes bounce {
    from {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }

    10% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }

    12% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }

    20% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }

    30% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }
}


a.data-item:after,
a.data-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background-image: linear-gradient(360deg, rgb(255 255 255 / 75%), rgb(255 255 255 / 25%));
    opacity: .1;
    transform: rotate(75deg);
    transition: all ease .3s;
}

a.data-item:hover:before {
    left: 100%;
}

a.data-item:hover:after {
    left: 25%;
}

a.data-item:hover:after {
    transition-delay: .2s;
}

button,
select {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.equipement-libelle-modifiable {
    border-bottom: 1px solid transparent;
    user-select: none;
    cursor: text;
}

    .equipement-libelle-modifiable:hover {
        border-bottom: 1px dashed var(--bleu-flash);
    }

    .equipement-libelle-modifiable:focus {
        border-bottom: 1px dashed var(--orange-feu);
        transition: border-bottom .5s
    }

    .equipement-libelle-modifiable[contentEditable="true"]:hover {
    }

h5,
h2 {
    font-family: "Rubik Bold", serif;
    color: var(--bleu-fonce);
    position: relative;
    padding-bottom: 5px;
    margin: 1rem 5px 20px 0;
}

    h5::after {
        content: '';
        position: absolute;
        width: calc(var(--hauteur-menu) - 10px);
        height: 2px;
        background-color: var(--bleu-flash);
        left: 0;
        bottom: 0px;
        opacity: 1;
        transition: .5s;
    }

.btn-add {
    position: relative;
    border-radius: 50px;
    transition: .1s;
    bottom: 0;
    height: 40px;
    min-width: 40px;
    background-color: var(--bleu-flash);
    text-align: center;
    line-height: 40px;
    color: var(--bleu-fonce);
    z-index: 120;
    font-size: 14px;
    display: flex;
}

    .btn-add > i {
        position: relative;
        top: 4px;
    }

    .btn-add span {
        padding-right: 10px;
    }

.btn-delete-user {
    position: absolute;
    top: -2px;
    right: -4px;
    font-size: 6px;
    width: 12px;
    height: 12px;
    line-height: 13px;
    text-align: center;
    background-color: #ff4c4c;
    border-radius: 50px;
    padding: 0;
    color: white;
    display: block;
}

.btn-dmg {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50px;
    background-color: var(--bleu-fonce);
    color: white;
    font-size: 26px;
    text-align: center;
    padding: 0;
    z-index: 501;
    position: relative;
    border: 2px solid var(--bleu-flash);
}

    .btn-dmg:hover {
        background-color: var(--bleu-flash);
        color: var(--bleu-fonce);
        border: 2px solid var(--bleu-fonce);
    }

.btn-sm {
    padding: .3rem 1.2rem;
}

.btn-round {
    padding: .5rem 1rem;
}

    .btn-round.active {
        border: 2px solid var(--bleu-fonce);
        background-color: var(--bleu-flash);
        color: var(--bleu-fonce);
        font-family: 'Rubik Medium', sans-serif;
    }

.btn-round-sm {
    padding: .25rem 1rem;
    margin: 0;
    font-size: 14px;
}

.btn-round.icon {
    width: 35px;
    height: 35px;
}

.btn-round,
.btn-round-sm {
    position: relative;
    bottom: 0;
    transition: .1s;
    border: 2px solid transparent;
    border-radius: 50px;
    min-width: 35px;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*gap: .5rem;*/
}

    .btn-round:hover,
    .btn-round-sm:hover,
    .btn-add:hover {
        bottom: 5px;
        box-shadow: var(--shadow-md);
    }

    .btn-round.orange {
        background-color: var(--orange-feu);
        color: white;
    }

.btn-icon {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid var(--bleu-flash);
    font-size: .875em;
    padding: 0;
    line-height: 40px;
    width: 100%;
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
}

    .btn-icon:hover {
        background-color: #eceff7;
    }

    .btn-icon > i {
        background-color: #eceff7;
        margin-right: 8px;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

.btn-delete-input:hover {
    color: white;
}

.btn-round.btn-xs {
    min-height: initial;
    min-width: initial;
    padding: .5rem .75rem;
}

.btn-quickactions {
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: .25rem .5rem;
    position: relative;
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
}

.bgblue {
    background-color: var(--bleu-fonce) !important;
}

.bgbeige {
    background-color: var(--beige);
}


.outline-bgblue {
    border-color: var(--bleu-fonce) !important;
    color: var(--bleu-fonce) !important;
}

    .outline-bgblue:hover {
        background-color: var(--bleu-fonce) !important;
        color: white !important;
    }

.colorblue {
    color: var(--bleu-fonce) !important;
}

.bgcanard {
    background-color: var(--canard) !important;
}

.bgorange {
    background-color: var(--orange-feu) !important;
}



.borderorange {
    border-color: var(--orange-feu) !important;
}

.borderblueflash {
    border-color: var(--bleu-flash) !important;
}

.borderblue {
    border-color: var(--bleu-fonce) !important;
}

.bgblueflash {
    background-color: var(--bleu-flash) !important;
    color: var(--bleu-fonce) !important;
}

.bggreen {
    background-color: #20C993 !important;
    color: white !important;
}

.bgblueflash:hover,
.bggrey:hover {
    color: var(--bleu-fonce);
}

.bggrey {
    background-color: var(--color-light);
    color: var(--bleu-fonce);
}

.bgblue,
.bgorange,
.bgblue:hover,
.bgorange:hover {
    color: white !important;
}

.carousel-control-next,
.carousel-control-prev {
    width: auto;
    padding: .5rem;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    background-size: 50% 50%;
    background-color: #51459e;
    border-radius: 50px;
}

.carousel-indicators {
    bottom: -15px;
}

    .carousel-indicators [data-bs-target] {
        margin-right: 5px;
        margin-left: 5px;
        width: 10px;
        height: 10px;
        background-color: #51459e;
        border-radius: 50px;
        border: none;
        margin-top: 10px;
    }

.carousel-edit {
    position: absolute;
    top: 10px;
    z-index: 50;
    display: flex;
    gap: 10px;
    right: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 0 10px;
}

    .carousel-edit button {
        width: 40px;
        height: 40px;
        border-radius: 50px;
        justify-content: center;
        border: 2px solid transparent;
        display: flex;
        align-items: center;
    }

        .carousel-edit button:hover {
            color: var(--bleu-flash);
        }

.carousel-item.add-dmg.active,
#btn_add_dmg.add-dmg {
    cursor: url(../svg/cursor-dmg.svg) 16 36, crosshair;
}

.btn-add-photo {
    position: absolute;
    top: calc(50% - 15px);
    right: calc(50% - 15px);
    background-color: #ffffff;
    font-size: 8px;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

    .btn-add-photo:hover {
        background-color: var(--bleu-flash);
        color: var(--bleu-fonce);
        cursor: pointer;
    }

#carousel_photo .carousel-item {
    background-color: var(--color-light);
    border: 2px solid var(--border-color);
}

/*.carousel-item img {
    max-width: 724px !important;
    max-height: 544px !important;
}*/

.dropzone {
    border: 2px dashed #ddd;
    padding: 3px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .dropzone:hover {
        background-color: #f5f5f5;
    }

    .dropzone img {
        max-width: 100%;
    }

.cursor-pointer {
    cursor: pointer;
}

.container-fluid.settings {
    min-height: calc(100vh - var(--hauteur-menu)*2);
    border-bottom: 1px solid var(--border-color);
}

    .container-fluid.settings .table-wrapper-responsive {
        max-height: unset;
    }

.calendar-wrapper {
    max-width: 100vw;
    display: flex;
}

    .calendar-wrapper .tab-item-wrapper {
        width: 90%;
    }

.column-day {
    flex: 1;
    min-width: 200px;
    border-radius: 10px 10px 0 0;
    height: 100%;
}

    .column-day:first-of-type {
        border-left: none;
    }

    .column-day:last-of-type {
        border-right: 1px solid var(--color-light);
    }

.chat-wrapper {
    position: fixed;
    height: calc(100vh - var(--hauteur-menu));
    width: calc(100vw - var(--hauteur-menu) - var(--sidebar-width));
    background-color: white;
    top: var(--hauteur-menu);
    z-index: 1002;
    left: 100%;
    transition: .5s;
    border-left: 1px solid var(--border-color);
}

    .chat-wrapper.active {
        left: calc(var(--hauteur-menu) + var(--sidebar-width));
        z-index: 1002;
    }

.chat-item {
    padding: 10px;
    border-radius: 15px;
    position: relative;
    margin-bottom: 20px;
    color: var(--bleu-fonce);
    max-width: 700px;
}

    .chat-item.vendeur {
        background-color: white;
        margin-right: 35px;
        border: 1px solid var(--border-color);
    }

    .chat-item.cdv {
        background-color: var(--bleu-flash);
        margin-left: auto;
    }

    .chat-item.accepte {
        background-color: #2ddb8a;
        margin-left: auto;
        border-radius: 10px;
    }

    .chat-item.refuse {
        background-color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity));
        margin-left: auto;
        border-radius: 10px;
    }

    .chat-item.annule {
        background-color: var(--orange-feu);
        margin-left: auto;
        border-radius: 10px;
    }


    .chat-item.cdv::after {
        content: '';
        width: 20px;
        height: 20px;
        position: absolute;
        right: 10px;
        bottom: -10px;
        border-left: 10px solid transparent;
        border-right: 10px solid var(--bleu-flash);
        border-bottom: 10px solid transparent;
        border-top: 10px solid var(--bleu-flash);
    }

    .chat-item.vendeur::after {
        content: '';
        width: 20px;
        height: 20px;
        position: absolute;
        left: 10px;
        bottom: -10px;
        border-left: 10px solid #ffffff;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-top: 10px solid transparent;
    }

.chat-date {
    color: #769ab9;
    position: relative;
    font-size: 10px;
    display: block;
    font-weight: 100;
    font-family: 'Rubik Medium', serif;
}

.chat-item.cdv .chat-date {
    color: var(--bleu-fonce);
}

.chat-messages-wrapper, .contact-messages-wrapper {
    max-height: calc(100vh - 199px);
    overflow: auto;
    position: relative;
    padding-bottom: 78px;
}

.chat-message-item,
.contact-chat-item {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem;
    font-size: 14px;
    display: flex;
    gap: 1rem;
    align-items: center;
}

    .chat-message-item:hover,
    .contact-chat-item:hover {
        background-color: var(--color-light);
        cursor: pointer;
    }

    .chat-message-item.active,
    .contact-chat-item.active {
        background-color: var(--color-light);
        outline: 2px solid var(--bleu-flash);
    }

    .chat-message-item.unread .chat-preview {
        font-family: 'Rubik Medium', sans-serif;
        color: var(--bleu-fonce);
    }

.contact-initiales.small {
    width: auto;
    height: 25px;
    min-height: 25px;
    min-width: 25px;
    padding: 0 4px;
}

.custom-switch {
    width: 90px;
    height: 40px;
    background-color: var(--bleu-fonce);
    border-radius: 50px;
    transition: .2s;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: 12px;
}

    .custom-switch[data-type='checkbox'] {
        background-color: var(--border-color);
    }

        .custom-switch[data-type='checkbox'] > i.ball {
            background-color: white;
        }

    .custom-switch.sm {
        width: 50px;
        height: 25px;
    }

        .custom-switch.sm > i.ball, .custom-switch.sm > i.not-ball {
            height: 21px;
            width: 21px;
            line-height: 21px;
        }

    .custom-switch > i.ball {
        background-color: var(--bleu-flash);
        height: 36px;
        width: 36px;
        display: block;
        text-align: center;
        border-radius: 50px;
        line-height: 36px;
        color: var(--bleu-fonce);
        margin: 0 2px;
        border: 1px solid transparent;
        position: absolute;
        left: 0;
        transition: .2s;
    }

    .custom-switch.light {
        background-color: var(--border-color);
    }

        .custom-switch.light > i.ball {
            background-color: var(--color-light);
        }

    .custom-switch > i.not-ball {
        position: absolute;
        right: 2px;
        width: 36px;
        text-align: center;
        color: white;
        border-radius: 50px;
        height: 36px;
        line-height: 36px;
        margin: 0 2px;
    }

    .custom-switch.sm.active > i.ball {
        left: 25px;
    }

    .custom-switch.active > i.not-ball {
        right: 50px;
    }

    .custom-switch.active {
        background-color: var(--bleu-flash);
        transition: .2s;
    }

        .custom-switch.active > i.ball {
            left: 50px;
            background-color: white;
        }

.custom-switch--titre {
    z-index: 5;
    padding: 0 5px;
    background-color: white;
    position: relative;
    font-size: 10px;
    text-transform: uppercase;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--bleu-fonce);
    left: -5px;
}

.disabled-all {
    opacity: .4;
    pointer-events: none;
    user-select: none;
}

.red-border {
    border: 1px solid red;
}

.red-border-important {
    border: 1px solid red !important;
}

.position-relative > .bi-exclamation {
    position: absolute;
    width: 20px;
    background-color: var(--bleu-fonce);
    z-index: 10;
    color: white;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50px;
    right: calc(50% - 10px);
    top: calc(50% - 10px);
}

.carousel,
.img-item {
    border-radius: 5px;
}

.img-legend {
    font-size: 10px;
    background-color: white;
    color: var(--bleu-fonce);
    padding: 3px;
    border-radius: 5px;
    text-align: center;
}

.carousel-caption button {
    border-radius: 0 0 5px 5px;
}

.critair {
    padding-left: 5px;
    width: 40px;
    opacity: .2;
}

    .critair.active {
        opacity: 1;
        width: 60px;
    }

.custom-input-group {
    display: flex;
}

    .custom-input-group input,
    .custom-input-group select {
        border-bottom-right-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

        .custom-input-group input[type=checkbox] {
            width: 1em;
            margin: 0 0 0 5px;
        }

    .custom-input-group span {
        padding: 8.5px 12px 8.5px 15px;
        border: 2px solid #eceff7;
        position: relative;
        border-radius: 0 5px 5px 0;
        border-left: 0;
        flex: 0 0 auto;
        max-height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

#creation_essai .modal-body,
#recherche_objet .modal-body > .container-fluid {
    min-height: 80vh;
}

    #creation_essai .modal-body .container-fluid {
        min-height: 50vh;
    }

#creation_essai .stock-wrapper.lists > .stock-item > .stock-veh-infos,
#interet_stock .stock-wrapper.lists > .stock-item > .stock-veh-infos {
    flex: initial;
}

#creation_essai .stock-item,
#interet_stock .stock-item {
    border: 2px solid transparent;
}

    #creation_essai .stock-item.active,
    #interet_stock .stock-item.active {
        border: 2px solid var(--bleu-fonce);
    }

.dates-wrapper,
.heures-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 0 0;
    position: relative;
    flex: 1;
    user-select: none;
}

.desc-dmg {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 280px;
    background-color: white;
    z-index: 600;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}

    .desc-dmg.left {
        right: 20px;
    }

    .desc-dmg.right {
        left: -270px;
    }

.dates-wrapper > .flatpickr-calendar {
    position: absolute;
    top: 51px;
    width: auto;
    left: 23px;
    border: 2px solid var(--border-color);
    border-top: none;
    border-radius: 5px;
    z-index: 5000;
}


.dropdown-datetime-wrapper {
    min-width: 350px;
}


.heure-min-wrapper {
    position: absolute;
    left: 203px;
    top: 49px;
    display: flex;
    width: 109px;
    z-index: 50;
}

    .heure-min-wrapper > ul {
        margin: 0;
        list-style: none;
        padding: 0;
        background-color: white;
        border-top: 2px solid var(--border-color);
        max-height: 330px;
        overflow: auto;
        flex: 1;
        border-bottom: 2px solid var(--border-color);
    }

        .heure-min-wrapper > ul:first-of-type {
            border-radius: 0 0 0 5px;
        }

        .heure-min-wrapper > ul:last-of-type {
            border-radius: 0 0 5px 0;
        }

        .heure-min-wrapper > ul > li {
            padding: 4px 0 4px 0;
            border-top: 1px solid var(--border-color);
            text-align: center;
        }

            .heure-min-wrapper > ul > li.active,
            .heure-min-wrapper > ul > li:hover {
                font-family: 'Rubik Medium', sans-serif;
                cursor: pointer;
                background-color: var(--bleu-flash);
                color: var(--bleu-fonce);
            }

            .heure-min-wrapper > ul > li:first-of-type {
                border-top: none;
            }

.date-debut > .bi,
.date-fin > .bi,
.heure-debut > .bi,
.heure-fin > .bi,
.filtres-debut > .bi,
.filtres-fin > .bi {
    font-size: 18px;
    margin: 0 0.5rem 0 0.25rem;
    color: var(--bs-gray-400);
}

.heure-debut > .date-btn,
.heure-fin > .date-btn {
    display: inline-block;
}

.list-heure {
    border-left: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
    position: relative;
}

#creation_essai .date-debut,
#creation_essai .date-fin,
#creation_essai .heure-debut,
#creation_essai .heure-fin,
.filtres-debut,
.filtres-fin {
    padding: 0.25rem;
    background-color: #f6f8ff;
    flex: 1;
    position: relative;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    padding-left: 10px;
}

#creation_essai .date-debut,
#creation_essai .date-fin,
.filtres-debut {
    border-right: none;
    border-radius: 50px 0 0 50px;
}

#creation_essai .heure-debut,
#creation_essai .heure-fin,
.filtres-fin {
    border-left: 2px solid var(--border-color);
    border-radius: 0 50px 50px 0;
}

    #creation_essai .date-debut:hover,
    #creation_essai .date-fin:hover,
    #creation_essai .heure-debut:hover,
    #creation_essai .heure-fin:hover,
    .filtres-debut:hover,
    .filtres-fin:hover {
        background-color: white;
        cursor: pointer;
    }

    .date-debut .small,
    .date-fin .small,
    .heure-debut .small,
    .heure-fin .small,
    .filtres-debut .small,
    .filtres-fin .small {
        font-size: 10px;
    }

    .date-debut .small,
    .date-fin .small,
    .heure-debut .small,
    .heure-fin .small,
    .date-debut #date_debut,
    .date-fin #date_fin,
    .filtres-debut .small,
    .filtres-fin .small {
        color: var(--bleu-fonce);
        font-family: 'Rubik Medium', sans-serif;
    }

.date-btn {
    display: none;
    position: absolute;
    height: 30px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    top: calc(50% - 14px);
    right: 5px;
    color: var(--bleu-fonce);
    border-radius: 50px;
}

    .date-btn:hover {
        background-color: white;
    }

.date-debut:hover > .date-btn,
.date-fin:hover > .date-btn {
    display: block;
}

.droits {
    display: none !important;
}

.flatpickr-calendar {
    border: 2px solid var(--border-color);
    box-shadow: none;
    user-select: none;
}

.flatpickr-day.inRange {
    -webkit-box-shadow: -5px 0 0 var(--color-light), 5px 0 0 var(--color-light);
    box-shadow: -5px 0 0 var(--color-light), 5px 0 0 var(--color-light);
}

.flatpickr-calendar.inline {
    margin: 0 auto;
    margin-top: 15px;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    background: var(--color-light);
    border-color: var(--color-light);
    font-family: 'Rubik Medium', sans-serif;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--bleu-flash);
    font-family: 'Rubik Medium', sans-serif;
    border-color: var(--bleu-flash);
    color: var(--bleu-fonce);
}

.flatpickr-day.today,
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    border-color: transparent;
    background-color: #f6f8ff;
    font-family: 'Rubik Medium', sans-serif;
    color: white;
}

    .flatpickr-day.today.inRange {
        color: var(--bleu-fonce);
        background-color: var(--bleu-fonce) !important;
        border-radius: 50px;
    }

        .flatpickr-day.today.inRange:hover {
            color: white;
            border-radius: 50px;
        }

.flatpickr-day.today {
    color: var(--bleu-fonce) !important;
}

.flatpickr-day.selected.inRange {
    border: none;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -10px 0 0 var(--bleu-fonce);
    box-shadow: -10px 0 0 var(--bleu-fonce);
}

.flatpickr-months {
    font-size: 12px;
    height: var(--hauteur-menu);
    align-items: center;
}

    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        height: var(--hauteur-menu);
        display: flex;
        align-items: center;
    }

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.numInputWrapper:hover {
    background: var(--color-light);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: rgb(153 153 153 / 46%);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #cdcdcd;
}

.flatpickr-months .flatpickr-month {
    height: var(--hauteur-menu);
    display: flex;
    align-items: center;
}

.flatpickr-current-month {
    padding: 0;
}

    .flatpickr-current-month .flatpickr-monthDropdown-months {
        margin-right: 10px;
    }

    .flatpickr-current-month .flatpickr-monthDropdown-months,
    .flatpickr-current-month input.cur-year {
        text-transform: capitalize;
        font-family: 'Rubik Medium', sans-serif;
    }

    .flatpickr-current-month .numInputWrapper {
        min-width: 70px;
    }

.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown {
    opacity: 1;
    border: none;
}

.flatpickr-current-month {
    height: var(--hauteur-menu);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.flatpickr-innerContainer {
    justify-content: center;
}

.filtres-radio.right {
    right: 17px;
}

.filtres-radio {
    position: absolute;
    display: none;
    z-index: 100;
    background-color: white;
    font-size: 10px;
    text-transform: uppercase;
    min-width: 110px;
    text-align: right;
    top: -4px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

    .filtres-radio.active {
        display: block;
    }

    .filtres-radio label {
        font-weight: 200;
        width: 100%;
        padding: 10px;
    }

        .filtres-radio label:hover,
        .filtres-radio label.active {
            font-family: 'Rubik Medium', sans-serif;
            cursor: pointer;
        }

        .filtres-radio label.active {
            color: var(--bleu-fonce);
            background-color: var(--color-light);
        }

.email-container.active {
    bottom: 20px;
    max-width: 65vw;
    min-width: 35vw;
}

.email-container {
    bottom: calc(-80% + 230px);
    position: fixed;
    right: 20px;
    z-index: 500;
    min-width: 25vw;
    max-width: 25vw;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: var(--shadow-md);
    transition: .5s;
}

    .email-container:not(.active) {
        cursor: pointer;
    }

.email-header {
    padding: 10px 10px 0 10px;
}

.email-footer {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--border-color);
}

    .email-footer > div {
        flex: 1;
    }

    .email-footer > button {
        margin-top: 1rem;
        flex: 1;
    }

.email-container button#minimize:hover {
    color: black;
}

.ai-generation {
    position: absolute;
    height: 100%;
    width: 100%;
    display: grid;
    place-content: center;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .7);
    z-index: 50;
}


.image_compte_mail {
    width: 50px;
}

.ligne_mail {
    display: flex;
    align-items: center;
    font-size: 25px;
    gap: 20px
}

.files-lists > .badge {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.controls {
    position: absolute;
    top: 10px;
    right: 10px;
}

    .controls > button:first-of-type {
        opacity: .7;
    }

    .controls > button:hover {
        opacity: 1;
    }

.email-info {
    flex: 1;
}

    .email-info > div {
        border-bottom: 1px solid var(--border-color);
        padding: 10px 0;
        display: flex;
        position: relative;
        flex-direction: row;
        padding-right: 70px;
        flex-wrap: wrap;
    }

        .email-info > div > span {
            color: var(--bs-gray-500);
        }

        .email-info > div:last-of-type {
            border: none;
        }

.email-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
}

.email-info input[type=text] {
    border: none;
    flex: 1;
    padding-left: 5px;
}

.error-row {
    border: 2px solid red;
}

.form-check-label {
    font-family: 'Rubik Medium', sans-serif;
    color: #001142;
}

.index-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    grid-gap: 2rem;
    padding: 2rem;
    background-color: var(--color-light);
    border-top: 1px solid var(--border-color);
    min-height: calc(100vh - 135px);
}

.grid-item {
    background-color: white;
    display: flex;
    flex-direction: column;
}

.grid-item,
.grid-placeholder {
    min-height: 450px;
    border-radius: 5px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

    .grid-item[data-span="1"],
    .grid-placeholder[data-span="1"] {
        grid-column-start: span 1;
    }

    .grid-item[data-span="2"],
    .grid-placeholder[data-span="2"] {
        grid-column-start: span 2;
    }

    .grid-item[data-span="3"],
    .grid-placeholder[data-span="3"] {
        grid-column-start: span 3;
    }

    .grid-item[data-span="4"],
    .grid-placeholder[data-span="4"] {
        grid-column-start: span 4;
    }

    .grid-item[data-span="5"],
    .grid-placeholder[data-span="5"] {
        grid-column-start: span 5;
    }

    .grid-item[data-span="6"],
    .grid-placeholder[data-span="6"] {
        grid-column-start: span 6;
    }

.grid-placeholder {
    border: 2px dashed var(--bleu-fonce);
    background-color: var(--color-light);
}

.grid-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    height: var(--hauteur-menu);
}

.grid-filtres,
.grid-layout {
    color: var(--bs-gray-500);
    font-size: 10px;
    cursor: pointer;
    position: relative;
}

.grid-filtres {
    padding: 5px 15px 5px 5px;
}

    .grid-filtres .btn-text {
        text-transform: uppercase;
    }

.encart-header-dark .grid-filtres .btn-text {
    color: var(--bleu-fonce);
}

.encart-header-grey .grid-filtres .btn-text {
    color: var(--bs-gray-500);
}

.grid-layout {
    padding: 5px 10px;
}

.grid-handle {
    font-size: 24px;
    color: var(--bleu-flash);
    padding: 10px;
    display: block;
}

.grid-title {
    flex: 1;
    font-size: 10px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.grid-handle:hover {
    color: var(--bleu-fonce);
    cursor: grab;
}

.grid-body {
    padding: 1rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 100%;
    /*min-height: 400px;*/
}

.grid-list {
    font-size: 12px;
    color: black;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: .25rem;
    margin-top: .25rem;
    margin-bottom: 0;
}

.grid-list small {
    color: var(--bs-gray-500);
    text-transform: uppercase;
}
.gestion-etape-pipeline {
    width: 100%;
    font-size: 14px;
}

    .gestion-etape-pipeline tr {
        border-bottom: 1px solid var(--border-color);
        background-color: white;
    }

    .gestion-etape-pipeline th {
        font-size: 12px;
        text-transform: uppercase;
        justify-content: space-between;
    }

    .gestion-etape-pipeline th,
    .gestion-etape-pipeline td {
        height: 46px;
        align-items: center;
        padding: 0 10px;
    }

        .gestion-etape-pipeline th:first-of-type,
        .gestion-etape-pipeline td:first-of-type {
            flex-grow: 0;
            min-width: 35px;
            padding: 0;
        }

    .gestion-etape-pipeline th,
    .gestion-etape-pipeline td {
        border-left: 1px solid var(--border-color);
    }

        .gestion-etape-pipeline th:first-of-type,
        .gestion-etape-pipeline td:first-of-type {
            border-left: transparent;
        }

.filtres-layout {
    position: absolute;
    top: 30px;
    right: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    background-color: white;
    border: 1px solid var(--border-color);
    padding: 5px;
    border-radius: 5px;
    z-index: 500;
}

    .filtres-layout > button {
        opacity: .4;
    }

        .filtres-layout > button:hover,
        .filtres-layout > button.active {
            opacity: 1;
        }

/* .img-carousel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
} */

.img-item {
    /*    height: 124px;
    width: 164px;*/
    opacity: .5;
    cursor: pointer;
    transition: .1s;
    border: 2px solid var(--border-color);
    background: var(--color-light);
}

    .img-item:hover {
        opacity: .7;
    }

    .img-item.active {
        opacity: 1;
        border: 2px solid var(--bleu-fonce);
    }


.immat {
    background-color: white;
    border-right: 8px solid #0963EB;
    border-left: 8px solid #0963EB;
    border-radius: 3px;
    padding: 3px 3px;
    font-size: 14px;
    font-family: 'Rubik Medium', sans-serif;
    position: relative;
    /* bottom: 2px;*/
    text-align: center;
    min-width: 120px;
    max-width: 120px;
    display: inline-block;
    height: 18px;
    color: black;
    letter-spacing: .5px;
    line-height: 14px;
}

    .immat::before {
        content: '-';
        position: absolute;
        color: white;
        font-size: 7px;
        left: -6px;
        top: 5px;
        font-weight: 100;
    }

    .immat::after {
        content: '-';
        position: absolute;
        color: white;
        font-size: 6px;
        right: -7px;
        top: 5px;
        font-weight: 100;
    }

.item-popover {
    cursor: pointer;
}

.input-button::after {
    content: "\f282";
    position: absolute;
    top: 14px;
    right: 12px;
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-size: 14px;
    font-weight: normal !important;
}

.table-proposition {
    border-left: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
}

tbody.ligne-avec-tva tr {
    border-left: 2px solid var(--bleu-fonce);
}

tbody.ligne-frais-immatriculation tr {
    border-left: 2px solid var(--color-grey);
}

tbody.ligne-carte-grise tr {
    border-left: 2px solid var(--color-grey);
}

tbody.ligne-accessoires tr {
    border-left: 2px solid var(--bleu-fonce);
}

tbody.ligne-autres tr {
    border-left: 2px solid var(--bleu-flash);
}

tbody.ligne-frais tr {
    border-left: 2px solid var(--bs-teal);
}

tbody.pack-frais tr {
    border-left: 2px solid var(--bs-purple);
}


tbody.ligne-remise tr td:nth-child(4n),
tbody.ligne-frais-immatriculation tr td:nth-child(4n),
tbody.ligne-acompte tr td:nth-child(4n) {
    opacity: 0;
}

tbody.ligne-remise tr td:nth-child(4n),
tbody.ligne-carte-grise tr td:nth-child(4n),
tbody.ligne-acompte tr td:nth-child(4n) {
    opacity: 0;
}

tbody.ligne-remise tr {
    border-left: 2px solid var(--orange-feu);
}

tbody.ligne-avec-tva tr,
tbody.ligne-autres tr,
tbody.ligne-frais-immatriculation tr,
tbody.ligne-accessoires tr,
tbody.ligne-remise tr {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

tbody.ligne-avec-tva tr,
tbody.ligne-autres tr,
tbody.ligne-carte-grise tr,
tbody.ligne-accessoires tr,
tbody.ligne-remise tr {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.custom-select-body {
    min-width: 190px;
}

.custom-select .custom-select-body {
    display: none;
}

.custom-select.active .custom-select-body {
    display: block;
}

.custom-select-body {
    position: absolute;
    top: 44px;
    max-height: 340px;
    overflow: auto;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    background-color: white;
    z-index: 50;
    left: 0;
    width: 100%;
    box-shadow: 0px 15px 10px 5px #0000000d;
}

    .custom-select-body > input[type=text] {
        border: none;
        width: 100%;
        font-size: 14px;
        z-index: 80;
    }

    .custom-select-body input[type=checkbox] {
        min-width: 20px !important;
        min-height: 20px !important;
        border: 2px solid #eceff7;
        margin: 0 0 0 0.5rem;
    }

    .custom-select-body .custom-option,
    .custom-select .select-btn-add {
        height: 46px;
        border-top: 2px solid var(--border-color);
        display: flex;
        align-items: center;
    }

.custom-select .select-btn-add {
    padding-left: 1rem;
    font-size: 14px;
}

.custom-select-body .custom-option > *,
.input-button,
.custom-select .select-btn-add {
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 15px;
}

    .custom-select-body .custom-option:hover, .custom-select .select-btn-add:hover {
        color: var(--bleu-fonce);
    }

.custom-select-body label,
.custom-select-tabs {
    font-size: 14px;
    font-family: 'Rubik Medium', sans-serif;
    line-height: 43px;
}


.custom-select-body small {
    font-family: 'Rubik Regular', sans-serif;
}


.custom-select-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
}

    .custom-select-tabs.tabs-vertical {
        flex-direction: column;
    }

        .custom-select-tabs.tabs-vertical .select-tabs {
            border-left: none;
        }

.custom-select--localisation .custom-select-body {
    max-height: calc(100vh - (var(--hauteur-menu)*3) - 25px);
    top: 0;
    position: relative;
}

input.select-text {
    position: sticky;
    top: 0;
    box-shadow: 0px 2px 0 var(--border-color);
}

.select-categorie {
    position: sticky;
    top: 45px;
    box-shadow: 0px 2px 0 var(--border-color);
}

.select-tabs {
    flex: 1;
    border-left: 2px solid var(--border-color);
    padding-left: 10px;
    display: flex;
    align-items: center;
    background-color: var(--color-light);
    color: #7f77b8;
}

    .select-tabs:hover {
        background-color: white;
        cursor: pointer;
        color: black;
    }

    .select-tabs.active {
        background-color: white;
        color: black;
    }

    .select-tabs:first-of-type {
        border-left: none;
    }

.select-number {
    flex: 1;
    text-align: end;
    padding-right: 10px;
    color: var(--bleu-flash);
    font-weight: 200;
}

.input-custom,
.custom-select {
    position: relative;
    margin-top: 1rem;
}

    .input-custom label,
    .custom-select > label {
        z-index: 5;
        padding: 0 5px;
        background-color: white;
        position: absolute;
        font-size: 10px;
        text-transform: uppercase;
        font-family: 'Rubik Medium', sans-serif;
        color: var(--bleu-fonce);
        top: -7px;
        left: 5px;
        border-radius: 5px;
    }

    .input-custom select,
    .input-custom input[type=text],
    .input-custom input[type=password],
    .input-custom input[type=number],
    .input-custom input[type=date],
    .input-custom input[type=datetime-local],
    .input-custom input[type=email],
    .input-custom textarea,
    .input-button {
        display: block;
        position: relative;
        border: 2px solid #eceff7;
        font-size: 14px;
        border-radius: 5px;
        width: 100%;
        font-family: 'Rubik Medium', sans-serif;
        color: #001142;
        background-color: white;
    }

        .input-custom input[type=text]:focus,
        .input-custom input[type=password]:focus,
        .input-custom input[type=number]:focus,
        .input-custom input[type=date]:focus,
        .input-custom input[type=datetime-local]:focus,
        .input-custom input[type=email]:focus,
        .input-custom textarea:focus,
        .input-custom select:focus {
            border: 2px solid var(--bleu-fonce) !important;
        }

        .input-custom select:not(:first-of-type),
        .input-custom input:not(:first-of-type),
        .input-custom textarea:not(:first-of-type) {
            border-left: none;
            border-radius: 0;
        }

    /* .input-custom select {
    padding: 10px 5px;
} */

    .input-custom textarea {
        padding: 10px;
    }

    .input-custom input[type=text],
    .input-custom input[type=password],
    .input-custom input[type=number],
    .input-custom input[type=date],
    .input-custom input[type=datetime-local],
    .input-custom input[type=email],
    .input-custom select,
    .input-button,
    .custom-select-body > input[type=text] {
        padding: 10px;
        max-height: 45px;
        min-width: 70px;
        height: 45px;
    }

.input-button {
    padding-right: 30px;
    overflow: auto;
    min-height: 46px;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

    .input-button .badge {
        line-height: 1px;
        font-size: 12px;
        display: flex;
        align-items: center;
        min-height: 22px;
    }

.input-custom input[type=text]:disabled,
.input-custom input[type=password]:disabled,
.input-custom input[type=number]:disabled,
.input-custom input[type=date]:disabled,
.input-custom input[type=email]:disabled,
.input-custom select:disabled,
.input-custom textarea:disabled {
    color: var(--bleu-fonce);
    background-color: var(--color-light);
    cursor: default;
}

.input-custom input[type=text]:read-only.readonly,
.input-custom input[type=password]:read-only.readonly,
.input-custom input[type=number]:read-only.readonly,
.input-custom input[type=date]:read-only.readonly,
.input-custom input[type=email]:read-only.readonly,
.input-custom select.readonly,
.input-custom textarea:read-only.readonly {
    border: 2px solid transparent;
    background-color: transparent;
    opacity: 1;
}

    .input-custom input[type=text]:read-only.readonly:hover,
    .input-custom input[type=password]:read-only.readonly:hover,
    .input-custom input[type=number]:read-only.readonly:hover,
    .input-custom input[type=date]:read-only.readonly:hover,
    .input-custom input[type=email]:read-only.readonly:hover,
    .input-custom select.readonly:hover,
    .input-custom textarea:read-only.readonly:hover {
        border-bottom: 2px solid var(--border-color);
        border-radius: 0;
    }

.input-immat::after {
    content: 'o';
    color: gold;
    font-size: 14px;
    border-radius: 5px 0 0 5px
}

.input-immat::before {
    content: '67';
    color: white;
    font-size: 10px;
    right: 0;
    z-index: 50;
    border-radius: 0 5px 5px 0
}

.input-immat::after,
.input-immat::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 45px;
    background-color: #0963EB;
    position: absolute;
    top: 0;
}

.input-immat input {
    padding: 0 30px !important;
    text-align: center;
    font-size: 20px !important;
}

.checkbox-custom {
    padding-bottom: 1rem;
}

    .checkbox-custom input[type=checkbox] {
        width: 15px;
        height: 15px;
        position: relative;
        top: 2px;
    }

        .checkbox-custom input[type=checkbox] + label {
            font-size: 14px;
            margin-left: 3px;
        }

.checked-label {
    border: 2px solid var(--border-color);
    cursor: pointer;
    padding: .5rem;
    border-radius: 5px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

    .checked-label i {
        color: var(--bleu-flash);
    }

input:checked + .checked-label {
    border-color: #20C993;
}

    input:checked + .checked-label i {
        color: #20C993;
    }

.link {
    cursor: pointer;
    padding-bottom: 3px;
    border: none;
    background: transparent;
    line-height: 1;
    border-bottom: 2px solid var(--bleu-flash);
    margin-bottom: 3px;
    padding: 5px 0;
}

    /* .link>i {
    padding: 5px 10px;
    background-color: #eceff7;
    margin-right: 5px;
} */
    .link:hover {
        background-color: var(--color-light);
    }

.opportunite-details {
    font-size: 14px;
    color: black;
    font-weight: 600;
}

    .opportunite-details .tiny {
        font-size: 10px;
        color: darkgrey;
        text-transform: uppercase;
        font-weight: 500;
    }

.modal-header {
    cursor: all-scroll;
}

.modal-header,
.modal-footer {
    background-color: var(--color-light);
    height: var(--hauteur-menu);
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.modal-footer-fidelisation {
    justify-content: space-between;
}

.modal-content {
    box-shadow: var(--shadow-md);
}

.main {
    width: calc(100vw - var(--hauteur-menu));
    height: calc(100vh - var(--hauteur-menu));
    float: right;
    overflow: auto;
}

    .main.sidebars {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: initial;
    }

.content {
    position: relative;
    flex: 1;
    overflow: auto;
}

.sidebar-body,
.sidebar-header {
    border-bottom: 1px solid var(--border-color);
}

.sidebar-bloc > .sidebar-header {
    cursor: pointer;
}

    .sidebar-bloc > .sidebar-header:hover {
        background-color: var(--color-light);
    }

.sidebar {
    background-color: white;
    width: var(--sidebar-width);
    height: calc(100vh - var(--hauteur-menu));
    display: flex;
    flex-direction: column;
    z-index: 200;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    overflow: auto;
    position: relative;
    left: 0;
    border-right: 1px solid var(--border-color);
}

.sidebar-chat {
    font-size: 12px;
    overflow: auto;
    max-height: calc(100vh - var(--hauteur-menu)*2 - 358px);
    min-height: calc(100vh - var(--hauteur-menu)*2 - 358px);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.sidebar-filtres-stock {
    min-height: calc(100vh - 1rem - var(--hauteur-menu)*4);
    max-height: calc(100vh - 1rem - var(--hauteur-menu)*4);
    overflow: auto;
}

.sidebar.dark {
    background-color: #eceff7;
}

.sidebar.right {
    border-left: 1px solid var(--border-color);
}

.sidebar.left {
    border-right: 1px solid var(--border-color);
}

    .sidebar.left.hide {
        left: calc(var(--sidebar-width)*-1);
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        position: absolute;
    }

        .sidebar.left.hide + .drawer.left.active {
            left: var(--hauteur-menu);
        }

.sidebar-body {
    width: 100%;
    /* overflow: auto; */
    font-size: 12px;
    position: relative;
}

.sidebar-footer .footer-btn-stock {
    position: fixed;
    bottom: 0;
    width: 343px;
    background-color: var(--color-light);
}

.sidebar.retracted {
    left: calc(-343px + var(--hauteur-menu));
    position: absolute;
}

.btn-filtres {
    position: relative;
}

.btn-hide-filters {
    position: absolute;
    right: calc(var(--hauteur-menu)*-1);
    top: 0px;
    background-color: var(--color-light);
    width: var(--hauteur-menu);
    height: var(--hauteur-menu);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border-color);
    border-radius: 0 50px 50px 0;
    border-left: 1px solid var(--border-color);
}

    .btn-hide-filters:hover {
        background-color: var(--border-color);
    }

.btn-identification {
    height: 58px;
}

    .btn-identification div {
        display: flex;
        flex-direction: column;
    }

.btn-sidebar {
    font-size: 10px;
    text-transform: uppercase;
    margin-left: auto;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: var(--bs-gray-600);
}

    .btn-sidebar:hover {
        color: var(--bleu-fonce);
        font-family: 'Rubik Medium', sans-serif;
    }

    .btn-sidebar > i {
        font-size: 12px;
        margin-right: 2px;
    }

.podium-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 300px;
    align-items: flex-end;
    gap: 1rem;
    justify-content: center;
}

.podium-item {
    min-width: 140px;
    max-width: 100%;
    text-align: center;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.podium-legende {
    position: absolute;
    bottom: 5px;
    width: 100%;
    color: white;
    font-size: 12px;
}

.podium-value {
    position: absolute;
    top: -50px;
    width: 80%;
    font-size: 12px;
    left: 10%;
}

.podium-number {
    padding-top: 20px;
    color: white;
    font-family: 'Rubik Medium';
}

.podium-item.first {
    height: 75%;
    background-color: var(--bleu-flash);
}

.podium-item.second {
    height: 50%;
    background-color: var(--bleu-fonce);
}

.podium-item.third {
    height: 25%;
    background-color: var(--orange-feu);
}

.apexcharts-tooltip.apexcharts-theme-light {
    border-color: var(--border-color) !important;
}

.apexcharts-xaxistooltip {
    background-color: var(--color-light) !important;
    border-radius: 5px !important;
    border-color: var(--border-color) !important;
}

.apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: var(--color-light) !important;
}

.apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: var(--border-color) !important;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--color-light) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-family: 'Rubik Medium', sans-serif;
}

.pipeline-wrapper {
    width: calc(100vw - var(--hauteur-menu));
    border-bottom: 1px solid var(--border-color);
    height: calc(100vh - 196px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: var(--color-light);
    overflow: auto;
}

    .pipeline-wrapper .tab-item-title {
        max-width: 100%;
        flex-grow: 1;
    }

.tabs-timeline {
    padding-left: 146px;
    position: relative;
    margin-bottom: 50px;
}

    .tabs-timeline::before {
        content: attr(aria-label);
        font-size: 10px;
        position: absolute;
        top: 0;
        left: 0;
        text-transform: uppercase;
        font-family: 'Rubik Medium', sans-serif;
    }

    .tabs-timeline > li.tab-item-wrapper {
        transition: .5s;
    }

        .tabs-timeline > li.tab-item-wrapper::after,
        .tabs-timeline > li.tab-item-wrapper::before {
            content: '';
            position: absolute;
            background-color: var(--border-color);
        }

        .tabs-timeline > li.tab-item-wrapper::before {
            left: -42px;
            width: 9px;
            height: 9px;
            top: 23px;
            border-radius: 50px;
        }

        .tabs-timeline > li.tab-item-wrapper::after {
            height: 100%;
            width: 1px;
            left: -38px;
            top: 37px;
            border-radius: 50px;
        }

        .tabs-timeline > li.tab-item-wrapper:last-of-type:after {
            display: none;
        }

.tabs-minimenu {
    position: relative;
}

.tab-item-wrapper,
.pipeline-placeholder,
.day-placeholder {
    width: 90%;
    margin-top: 1rem;
    max-width: 90%;
    border: 1px solid var(--border-color);
    margin-bottom: 0;
    box-shadow: none;
    min-height: 58px;
    border-radius: 5px;
}

.pipeline-body .tab-item-wrapper {
    min-height: auto;
}

.pipeline-body .pipeline-placeholder {
    min-height: 78px;
}

.tab-item-wrapper:first-of-type {
    margin-top: 1rem;
}

.tab-item-wrapper:last-of-type {
    margin-bottom: 1rem;
}

.pipeline-wrapper .tab-item-wrapper {
    max-width: 90%;
}

    .pipeline-wrapper .tab-item-wrapper:last-of-type {
        margin-bottom: 1rem;
    }

.pipeline-placeholder,
.day-placeholder {
    background-color: var(--color-light);
}

    .pipeline-placeholder:last-of-type,
    .day-placeholder:last-of-type {
        margin-bottom: 1rem;
    }

.tab-item-wrapper:hover {
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
    border-color: var(--bleu-fonce);
}

.pipeline-body,
.day-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0;
    overflow: auto;
    margin: 0;
    min-height: 200px;
}

.day-body {
    height: calc(50vh - 61px);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-left: none;
    overflow: auto;
}

    .day-body.today {
        background-color: var(--color-light);
    }

    .day-body.stripped {
        background: repeating-linear-gradient(45deg, #f6f8ff, #f6f8ff 0.9rem, #ffffff 0, #ffffff 1.8rem);
        background: -webkit-repeating-linear-gradient(45deg, #f6f8ff, #f6f8ff 0.9rem, #ffffff 0, #ffffff 1.8rem);
    }

ul.day-body:before {
    content: attr(aria-label);
    font-size: 10px;
    color: var(--color-grey);
    display: block;
    text-align: center;
    position: relative;
    top: 9px;
    z-index: 50;
    background-color: white;
    padding: 2px 10px;
    border-radius: 50px;
}

.pipeline-wrapper button[data-direction=left],
.pipeline-wrapper button[data-direction=right] {
    position: absolute;
    height: 46px;
    width: calc(100vw - var(--hauteur-menu));
    align-items: center;
    top: calc(50% + 46px);
}

.pipeline-column {
    display: flex;
    flex-direction: column;
    border-left: 1px solid;
    border-color: var(--border-color);
    min-width: 350px;
    flex-basis: 100%;
    background-color: white;
}

.pipeline-add-column {
    height: 26px;
    width: 26px;
    position: absolute;
    right: -3px;
    top: calc(50% - 13px);
    z-index: 50;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    border-radius: 50px;
}

.pipeline-column:first-of-type {
    border-left: none;
}

.pipeline-column:last-of-type {
    border-right: 1px solid var(--border-color);
}

.pipeline-input {
    border: none;
    background: transparent;
    font-weight: 500;
    text-transform: uppercase;
    width: 100%;
    border-bottom: 2px solid var(--orange-feu);
    border-top: 2px solid transparent;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bleu-fonce);
}

    .pipeline-input:focus-visible {
        border-bottom: 1px solid var(--border-color);
    }

    .pipeline-input:read-only {
        border: none;
        color: black;
        border-bottom: 2px solid transparent;
        border-top: 2px solid transparent;
        font-family: 'Rubik Medium', sans-serif;
        cursor: default;
    }

/* .pipeline-input:read-only:hover {
    border-bottom: 2px solid var(--border-color);
    border-top: 2px solid transparent;

} */

.pipeline-new-col {
    position: absolute;
    height: 100%;
    width: 20px;
    left: -10.5px;
}

.pipeline-footer {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.pipeline-header,
.pipeline-footer,
.day-title {
    min-height: 46px;
    line-height: 46px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Rubik Medium', sans-serif;
    padding: 0 10px;
    position: relative;
}

.photo-carre {
    display: flex;
    flex-direction: column;
    background-color: white;
}

    .photo-carre > p {
        font-size: 12px;
        text-align: center;
        margin: 0;
    }

    .photo-carre > button {
        font-size: 36px;
        min-height: 130px;
        min-width: 150px;
    }

.reporting-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 1rem 1rem 1rem;
    gap: 1rem;
}

.reporting-item {
    flex-shrink: 1;
    position: relative;
    flex-grow: initial;
    display: flex;
    flex-basis: calc(50% - 0.5rem);
}

    .reporting-item label {
        border-radius: 5px;
        border: 2px solid var(--border-color);
        width: 100%;
        min-height: 300px;
        position: relative;
    }

        .reporting-item label[data-type=line],
        .reporting-item label[data-type=bar],
        .reporting-item label[data-type=cake],
        .reporting-item label[data-type=infos],
        .reporting-item label[data-type=table],
        .reporting-item label[data-type=podium],
        .reporting-item label[data-type=single-line-number],
        .reporting-item label[data-type=double-line-number],
        .reporting-item label[data-type=pyramid-number],
        .reporting-item label[data-type=pyramid],
        .reporting-item label[data-type=timeline] {
            background-position: 0% 0%;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .reporting-item label[data-type=line] {
            background-image: url(../img/modules_kpis/linechart.png);
        }

        .reporting-item label[data-type=bar] {
            background-image: url(../img/modules_kpis/barchart.png);
        }

        .reporting-item label[data-type=cake] {
            background-image: url(../img/modules_kpis/cakechart.png);
        }

        .reporting-item label[data-type=reporting] {
            background-image: url(../img/modules_kpis/reporting.png);
        }

        .reporting-item label[data-type=infos] {
            background-image: url(../img/modules_kpis/infochart.png);
        }

        .reporting-item label[data-type=table] {
            background-image: url(../img/modules_kpis/tablechart.png);
        }

        .reporting-item label[data-type=podium] {
            background-image: url(../img/modules_kpis/podiumchart.png);
        }

        .reporting-item label[data-type=single-line-number] {
            background-image: url(../img/modules_kpis/number1.png);
        }

        .reporting-item label[data-type=double-line-number] {
            background-image: url(../img/modules_kpis/number2.png);
        }

        .reporting-item label[data-type=pyramid-number] {
            background-image: url(../img/modules_kpis/number3pyramid.png);
        }

        .reporting-item label[data-type=pyramid] {
            background-image: url(../img/modules_kpis/pyramide.png);
        }

        .reporting-item label[data-type=timeline] {
            background-image: url(../img/modules_kpis/spidercharts.png);
        }

    .reporting-item .grid-title {
        font-size: 12px;
        text-transform: uppercase;
        align-items: center;
        overflow: unset;
        white-space: initial;
    }

.reporting-desc {
    position: absolute;
    bottom: 0;
    background-color: white;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    min-height: 110px;
    box-shadow: 0px -2px 5px 0px #2e2e2e14;
    border-radius: 0 0 5px 5px;
}

    .reporting-desc > .description {
        font-size: 12px;
        margin-top: 5px;
        color: var(--bs-gray-500);
    }

    .reporting-desc > .title {
        font-family: 'Rubik Medium', sans-serif;
    }

.reporting-item input {
    position: absolute;
    top: 5px;
    left: 8px;
    width: 15px;
    height: 15px;
    z-index: 50;
}

.reporting-item label:hover {
    background-color: var(--color-light);
    cursor: pointer;
}

.reporting-label.active {
    border: 2px solid var(--bleu-fonce);
    background-color: var(--color-light);
}


.funnel {
    display: flex;
    justify-content: space-around;
    width: 100%;
    position: relative;
    align-items: center;
    min-height: 180px;
}

    .funnel::after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        background: linear-gradient(to right, var(--bleu-fonce), var(--bleu-fonce) 33%, var(--bleu-flash) 33%, var(--bleu-flash) 66%, #20c993 66%, #20c993 100%);
        height: 100%;
        width: 100%;
        clip-path: polygon(0% 0%, 100% 30%, 100% 70%, 0% 100%);
    }

.funnel-item {
    color: white;
    min-height: 40px;
    display: grid;
    place-content: center;
    position: relative;
    flex-grow: 1;
}


    .funnel-item a {
        color: white;
        z-index: 5;
        border-bottom: 2px solid white;
        text-align: center;
    }

    .funnel-item p {
        color: white;
        z-index: 5;
    }

    .funnel-item a:hover {
        color: white;
        z-index: 5;
        border-bottom: 2px solid var(--bleu-fonce);
    }


.reorder {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 100px;
}

.reorder-col {
    width: 50%;
    position: relative;
}

    .reorder-col:first-of-type {
        border-right: 1px solid var(--border-color);
    }

.reorder-item > i {
    font-size: 24px;
    color: var(--border-color);
}

.reorder-item {
    background-color: white;
    border: 1px solid var(--border-color);
}

.reorder-item,
.reorder-placeholder {
    margin-top: 0.5rem;
    height: 56px;
    display: flex;
    border-radius: 5px;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    justify-content: space-between;
}

    .reorder-item:hover,
    .reorder-placeholder:hover {
        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%)
    }

.reorder-placeholder {
    background-color: var(--color-light);
    border: 1px solid var(--border-color);
}

.reorder-widget .sidebar-body {
    overflow: unset;
}

.read-more {
    max-height: 150px;
    overflow: hidden;
    transition: 1s;
    position: relative;
    padding-bottom: 25px;
}

.read-more-btn {
    position: absolute;
    bottom: 0;
    width: 100px;
    z-index: 50;
    font-size: 12px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--bleu-fonce);
    right: calc(50% - 50px);
    background-color: #eceff7;
    padding: 2px;
    border-radius: 50px;
    cursor: pointer;
    text-align: center;
}

    .read-more-btn:hover {
        background-color: #dee4f3;
    }

.read-more.white:after {
    background: linear-gradient(to top, rgb(255 255 255) 20%, rgba(255, 255, 255, 0) 80%);
}

.read-more:after {
    position: absolute;
    bottom: 0;
    left: -2rem;
    height: 100%;
    width: 100%;
    content: "";
    background: linear-gradient(to top, rgb(246 248 255) 20%, rgba(255, 255, 255, 0) 80%);
    pointer-events: none;
}

.read-more.active {
    max-height: 110vh;
}

    .read-more.active:after {
        background: none;
    }

.smart-link {
    font-size: 10px;
    color: var(--bleu-fonce);
    border-bottom: 2px solid #eceff7;
    float: right;
}

.small.table tr:hover {
    background-color: var(--color-light);
}

.shadow-top {
    box-shadow: 0 -.15rem .25rem rgba(0, 0, 0, .075) !important;
}

.scrollspy-container {
    position: relative;
    height: calc(100vh - var(--hauteur-menu));
    overflow: auto;
}

.tooltip-inner {
    font-family: "Rubik Regular", serif;
    font-size: 12px;
}

.tooltip-fs-5 * {
    font-size: 14px;
}

.popover {
    font-family: "Rubik Regular", serif;
    font-size: 13px;
    border: 1px solid var(--border-color);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    max-width: 450px;
}

.popover-body a {
    display: block;
    margin-bottom: .5rem;
}

    .popover-body a:last-of-type {
        margin-bottom: 0;
    }

.popover-header {
    background-color: var(--color-light);
    font-size: 12px;
    font-family: 'Rubik Medium', sans-serif;
    text-transform: uppercase;
    line-height: 46px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-color);
}

.text-blue {
    color: var(--bleu-fonce) !important;
}

.text-blue-bold {
    font-family: 'Rubik Bold', serif !important;
    color: var(--bleu-fonce) !important;
}

.text-inline {
    display: inline !important;
}


.text-blueflash {
    color: var(--bleu-flash) !important;
}

.text-orange {
    color: var(--orange-feu) !important;
}
.text-underline-dashed {
    padding-left: 1rem;
}
.text-underline-dashed::after {
    position: absolute;
    content: '';
    border-bottom: 2px dashed var(--bleu-fonce);
    width: 100%;
    left: 0;
    bottom: -5px;
}

    .text-underline-dashed::before {
        content: '\F431';
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        position: absolute;
        left: 0;
        top: 0;
        line-height: 1;
    }

.task-hover:hover::after {
    content: "\f4cb";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-left: 5px;
    color: var(--color-grey);
}

/******************************************************/
/******************************************************/
/*********************** CONTACTS *********************/
/******************************************************/
/******************************************************/

.table-listes-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 20px;
    justify-content: center;
    position: relative;
}

.table-search-wrapper,
.table-button-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

    .table-button-wrapper button {
        display: flex;
        align-items: center;
    }

.table-listes-filtres > * > button > i {
    font-size: 22px;
}

.table-search-wrapper > i {
    color: var(--bleu-flash);
    background-color: var(--color-light);
    padding: 10px 15px 10px 10px;
    position: relative;
    border: 1px solid;
    border-color: var(--border-color);
    border-radius: 0 50px 50px 0;
}

.table-search-wrapper .filtres-checked {
    display: flex;
}

.table-quick-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.table-listes-item,
.table-liste-placeholder {
    padding: 10px 20px 10px 0;
    background-color: white;
    border: 1px solid var(--border-color);
    border-bottom: none;
    font-size: 14px;
    min-width: 140px;
    max-width: 200px;
    border-radius: 15px 15px 0 0;
    transition: .5s;
    display: flex;
    align-items: center;
    height: 63px;
    margin-left: -1px;
    position: relative;
}

.table-liste-placeholder {
    background-color: var(--color-light);
}

.gestion-etape-pipeline .handle {
    font-size: 24px;
    cursor: all-scroll;
    color: var(--bleu-flash);
    padding: 0 6px;
}

.table-listes-item .handle,
.scenario-filtres-wrapper .handle {
    font-size: 24px;
    cursor: grab;
    min-width: 40px;
    text-align: center;
    color: var(--bleu-flash);
}

    .table-listes-item .handle:hover,
    .gestion-etape-pipeline .handle:hover,
    .scenario-filtres-wrapper .handle:hover {
        color: var(--bleu-fonce);
    }

.table-listes-item:hover {
    background-color: var(--color-light);
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}

.liste-options {
    position: relative;
}

.table-listes-item:hover div {
    opacity: 1;
}

.table-listes-item:first-of-type {
    border-left: 1px solid var(--border-color);
}

.table-listes-item .liste-options {
    display: none;
}

.table-listes-item.active {
    background-color: var(--color-light);
    z-index: 1002;
    min-width: 200px;
    max-width: 400px;
    transition: .5s;
    padding-inline: 25px;
}

    .table-listes-item.active .liste-options {
        display: block;
        position: absolute;
        right: 6px;
        top: 6px;
        overflow: inherit;
    }

        .table-listes-item.active .liste-options button {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            line-height: 30px;
            border: 1px solid var(--border-color);
        }

            .table-listes-item.active .liste-options button:hover {
                background-color: var(--border-color);
                color: var(--bleu-fonce);
            }

        .table-listes-item.active .liste-options:hover button > i::before,
        .search-wrapper > button:hover i::before {
            content: "\f229";
        }

.custom-dropdown {
    position: absolute;
    min-width: 200px;
    max-width: 200px;
    background-color: white;
    color: black;
    font-family: 'Rubik Medium', sans-serif;
    font-size: 14px;
    left: 0;
    top: 38px;
    z-index: 50;
}

    .custom-dropdown.right {
        left: initial;
        right: 0;
    }

    .custom-dropdown ul,
    .dropdown-menu {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 2px solid var(--border-color);
        border-radius: 5px;
        background: white;
        min-width: 400px;
    }

        .custom-dropdown li,
        .dropdown-menu .dropdown-item {
            height: 46px;
            display: flex;
            align-items: center;
            padding-left: 1rem;
            padding-right: 1rem;
            cursor: pointer;
            font-size: 14px;
            font-family: 'Rubik Medium', sans-serif;
        }

.dropdown-item.active {
    background-color: var(--color-light);
    color: var(--bleu-fonce);
}

.dropdown-divider {
    margin: 0;
    border-top: 2px solid var(--border-color);
    opacity: 1;
}

.custom-dropdown li.last {
    border-bottom: 2px solid var(--border-color);
}

.custom-dropdown li:hover,
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: var(--color-light);
    color: var(--bleu-fonce);
}

.custom-dropdown li:first-of-type {
    border-top: none;
}

.table-listes-item.active div {
    font-family: 'Rubik Medium', sans-serif;
    opacity: 1;
}

.table-listes-item div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .9;
}

.table-listes-item span {
    opacity: .5;
}

.table-filtres-liste {
    max-height: 88px;
    overflow: auto;
    flex-wrap: wrap;
}

.table-listes-filtres {
    border: 1px solid var(--border-color);
    background-color: var(--color-light);
    border-left: none;
    border-right: none;
    z-index: 1001;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
}

.table-filtres-wrapper {
    position: absolute;
    right: 0px;
    top: 54px;
    min-width: 35vw;
    height: calc(100vh - 260px);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

    .table-filtres-wrapper.in-page {
        min-width: auto;
        position: relative;
        border-radius: 0;
        box-shadow: none;
        top: 0;
        height: calc(100vh - 60px);
        border: none;
    }

        .table-filtres-wrapper.in-page .filtres-listing-wrapper {
            max-height: calc(100vh - 260px);
        }

.custom-pop-wrapper,
.table-filtres-wrapper {
    background-color: white;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    z-index: 50;
}

.custom-pop-wrapper {
    font-size: 13px;
    z-index: 2002;
}

.table-listes-filtres .badge {
    cursor: pointer;
}

    .table-listes-filtres .badge .bi-x:hover {
        background-color: white;
        border-radius: 50px;
    }

.table-pagination-wrapper {
    height: var(--hauteur-menu);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--color-light);
    font-size: 14px;
    padding: 0 20px;
    position: relative;
}

    .table-pagination-wrapper > *:first-of-type {
        position: absolute;
        left: 15px;
    }

    .table-pagination-wrapper button {
        padding: 5px 10px;
        border-radius: 50px;
        min-width: 31px;
        color: var(--bleu-fonce);
    }

        .table-pagination-wrapper button:hover {
            background-color: white;
        }

        .table-pagination-wrapper button.active {
            font-family: 'Rubik Medium', sans-serif;
            background-color: var(--bleu-flash);
            color: var(--bleu-fonce);
            border-radius: 50px;
            width: auto;
        }

.filtres-listing-wrapper {
    position: relative;
    height: calc(100% - 105px);
    display: block;
    overflow: auto;
    margin: 10px 0 0 0;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    left: -110%;
    transition: .4s;
    opacity: 0;
}

.filtres-listing-details {
    position: absolute;
    top: 41px;
    width: calc(100% - 30px);
    height: calc(100% - 67px);
    border-radius: 10px;
    transition: .4s;
    opacity: 0;
    left: 110%;
    display: block;
    overflow: auto;
    margin: 10px 0 0 0;
    border: 1px solid var(--border-color);
    background-color: white;
}

    .filtres-listing-details.active {
        left: 15px;
        transition: .4s;
        opacity: 1;
    }

.filtres-listing-wrapper.active {
    left: 0;
    transition: .4s;
    opacity: 1;
}

.filtres-liste {
    padding: 0;
    list-style: none;
    font-size: 12px;
    margin-bottom: 0;
}

    .filtres-liste > li {
        padding: 8px 5px;
        color: #222222;
        display: flex;
        flex-direction: column;
        user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
    }

        .filtres-liste > li.active {
            background-color: var(--color-light);
            color: var(--bleu-fonce);
            font-family: 'Rubik Medium', sans-serif;
        }

        .filtres-liste > li span {
            font-size: 10px;
            color: #999999;
            font-weight: 500;
        }

        .filtres-liste > li:last-of-type {
            margin-bottom: 10px;
        }

        .filtres-liste > li:hover {
            color: black;
            background-color: var(--color-light);
            cursor: pointer;
            user-select: none;
            -o-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

ul.filtres-liste:before {
    content: attr(aria-label);
    font-size: 14px;
    font-weight: bold;
    border-bottom: 2px solid var(--border-color);
    padding: 5px 10px;
    background-color: var(--color-light);
    display: block;
}

.table-custom-dynamique.fluid,
.table-console-publication.fluid {
    width: 100%;
}

.table-custom-dynamique thead,
.table-stock-responsive thead,
.table-console-publication thead {
    position: sticky;
    top: -1px;
    background-color: white;
    z-index: 50;
}

.table-wrapper-responsive {
    overflow: auto;
    font-size: 13px;
    max-height: calc(100vh - (259px + var(--hauteur-menu)));
}

    .table-wrapper-responsive.no-tabs {
        max-height: calc(100vh - (196px + var(--hauteur-menu)));
    }

    .table-wrapper-responsive.table-stock {
        max-height: calc(100vh - (154px + var(--hauteur-menu)));
    }

.table-custom-dynamique thead tr, .table-custom-dynamique tbody tr, .table-console-publication thead tr, .table-console-publication tbody tr {
    display: flex;
    width: 100%;
    height: auto;
    position: relative;
    align-items: stretch;
}

.table-custom-dynamique.fluid th:first-of-type,
.table-custom-dynamique.fluid td:first-of-type,
.table-custom-dynamique.fluid th,
.table-custom-dynamique.fluid td,
.table-console-publication.fluid th,
.table-console-publication.fluid td {
    flex: 1;
    width: initial;
    max-width: initial;
}

.table-custom-dynamique th:first-of-type,
.table-custom-dynamique td:first-of-type {
    flex: 50 0 auto;
    width: 50px;
    max-width: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-custom-dynamique.first-col-auto th:first-of-type,
.table-custom-dynamique.first-col-auto td:first-of-type {
    flex: 340 0 auto;
    width: 340px;
    max-width: 340px;
}


.table-custom-dynamique thead tr > *,
.table-custom-dynamique tbody tr > *,
.table-console-publication thead tr > *,
.table-console-publication tbody tr > * {
    padding: 0 10px;
    border-right: 1px solid var(--border-color);
}

    .table-custom-dynamique thead tr > *:last-of-type,
    .table-custom-dynamique tbody tr > *:last-of-type,
    .table-console-publication thead tr > *:last-of-type,
    .table-console-publication tbody tr > *:last-of-type {
        border-right: none;
    }

.table-custom-dynamique th,
.table-console-publication th {
    line-height: 45px;
    cursor: pointer;
    border-bottom: 1px solid #e4e4e4;
    font-size: 12px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: visible !important;
    font-family: 'Rubik Bold';
    font-weight: 400;
    /*min-width: 150px;*/
}

.table-console-publication.console-publication-v2 th,
.table-console-publication.console-publication-v2 td {
    flex: 300 0 auto;
    width: 300px;
    max-width: 300px;
    line-height: inherit;
    text-transform: initial;
    justify-content: stretch;
}

.table-custom-dynamique input[type='checkbox']:not(.check-task) {
    cursor: pointer;
    width: 15px;
    height: 15px;
}

.table-custom-dynamique tbody tr,
.table-console-publication tbody tr {
    min-height: 35px;
    background-color: white;
    line-height: 35px;
    border-bottom: 1px solid #f1f1f1;
}

    .table-custom-dynamique tbody tr.active {
        background-color: var(--color-light);
    }

    .table-custom-dynamique tbody tr:hover {
        background-color: var(--color-light);
    }

.table-custom-dynamique th,
.table-custom-dynamique td {
    flex: 340 0 auto;
    width: 340px;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 20px;
}

.table-console-publication th,
.table-console-publication td {
    flex: 150 0 auto;
    width: 150px;
    max-width: 150px;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
}

    .table-console-publication th:nth-child(2),
    .table-console-publication td:nth-child(2) {
        background-color: white;
        position: sticky;
        right: 0;
        flex: 1;
        width: 150px;
        max-width: 150px;
        min-width: 150px;
    }

    .table-console-publication th.xl,
    .table-console-publication td.xl {
        flex: 700 0 auto;
        width: 700px;
        max-width: 700px;
    }

.table-custom-dynamique th.tight,
.table-custom-dynamique td.tight {
    flex: 200 0 auto;
    width: 200px;
    max-width: 200px;
}

.table-custom-dynamique th:hover,
.table-custom-dynamique td:hover,
.table-console-publication tr:hover {
    background-color: var(--color-light);
}

.table-custom-dynamique .width-handle {
    position: absolute;
    background-color: transparent;
    width: 10px;
    height: 46px;
    right: -5px;
    z-index: 500000;
    cursor: w-resize;
}

    .table-custom-dynamique .width-handle:hover {
        background-color: var(--border-color);
    }

th.width-xs,
td.width-xs {
    max-width: 105px;
}

/******************************************************/
/******************************************************/
/*************** Modal analyse comm ***************/
/******************************************************/
/******************************************************/

#modal_analyse_commerciale thead, #modal_analyse_commerciale .total {
    background: var(--color-light);
}

#modal_analyse_commerciale .total {
    color: var(--bleu-fonce) !important;
}

.synthese-marge thead th {
    color: white !important;
}

.synthese-marge thead, .synthese-marge thead tr:hover {
    background: #51459e !important;
}

#modal_analyse_commerciale h5, .synthese-marge h5 {
    font-size: 1rem;
    margin: 0;
}

.synthese-marge h5:after {
    display: none;
}

#modal_analyse_commerciale tbody {
    border-bottom: 2rem solid white !important;
}

#modal_analyse_commerciale thead th {
    text-align: left;
    font-family: "Rubik Bold", serif;
    color: var(--bleu-fonce);
    position: relative;
    padding-bottom: 1rem;
    font-size: .8rem;
    font-weight: 100;
}
/******************************************************/
/******************************************************/
/*************** CONSOLE DE PUBLICATION ***************/
/******************************************************/
/******************************************************/
.console-item {
    display: flex;
    align-items: center;
    height: 130px;
}

    .console-item img {
        max-width: 142px;
        padding: 5px;
        border-radius: 10px;
    }

    .console-item .stock-veh-mm {
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 300px;
        width: 300px;
        padding: 0 10px;
    }

        .console-item .stock-veh-mm > * {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


    .console-item .stock-veh-prix {
        font-size: 20px;
        color: var(--bleu-fonce);
    }

        .console-item .stock-veh-prix > span {
            font-size: 14px;
        }

    .console-item .stock-veh-mm::after {
        display: none;
    }

    .console-item .veh-prix {
        line-height: 26px;
        padding: 0 10px;
    }

.filtre-console-media {
    display: none;
}

.filtre-console-media+label {
    border: 2px solid var(--border-color);
    width: 20px;
    height: 20px;
    border-radius: 5px;
    cursor: pointer;
    display: grid;
    place-content: center;
}

.filtre-console-media.red:checked+label,
.filtre-console-media.red:checked+label:hover {
    color: white;
    border-color: red;
    background-color: red;
}

.filtre-console-media.red+label {
    color: red;
}

.filtre-console-media.red+label:hover {
    border-color: red;
}

.filtre-console-media.orange:checked+label,
.filtre-console-media.orange:checked+label:hover {
    color: white;
    border-color: #FFC107;
    background-color: #FFC107;
}

.filtre-console-media.orange+label {
    color: #FFC107;
}

.filtre-console-media.orange+label:hover {
    border-color: #FFC107;
}

.filtre-console-media.green+label {
    color: #20c993;
}

.filtre-console-media.green+label:hover {
    border-color: #20c993;
}

.filtre-console-media.blue:checked+label,
.filtre-console-media.blue:checked+label:hover {
    color: white;
    border-color: var(--bleu-fonce);
    background-color: var(--bleu-fonce);
}

.filtre-console-media.blue+label {
    color: var(--bleu-fonce);
}

.filtre-console-media.blue+label:hover {
    border-color: var(--bleu-fonce);
}

.filtre-console-media:checked+label {
    color: white;
    border-color: #20c993;
    background-color: #20c993;
}

.filtre-console-media+label:hover {
    border-color: var(--bleu-fonce);
}

.table-console-publication .dropdown-toggle::after,
.grid-filtres.dropdown-toggle::after {
    display: none;
}

.table-console-publication .dropdown-item.active,
.dropdown-item:active {
    color: #51459e;
    background-color: var(--color-light);
}

.table-console-publication .btn-text {
    background-color: white;
    border: 2px solid var(--border-color);
}

    .table-console-publication .btn-text:hover {
        background-color: var(--color-light);
    }

/******************************************************/
/******************************************************/
/******************** CONTACT DETAILS *****************/
/******************************************************/
/******************************************************/

.btn-contact-more-info {
    display: none;
}

.contact-details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

    .contact-details .contact-btn-edit,
    .contact-details .contact-btn-histo,
    .user-item .contact-btn-edit {
        display: none;
    }

    .contact-details:hover .contact-btn-edit,
    .contact-details:hover .contact-btn-histo,
    .user-item:hover .contact-btn-edit {
        display: block;
    }

.contact-initiales,
.pastille-ronde {
    position: relative;
    min-height: 40px;
    min-width: 40px;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    font-size: 16px;
    font-family: 'Rubik Medium', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .contact-initiales button {
        display: none;
    }

    .contact-initiales:hover button {
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #84e8f4;
        color: white;
        border-radius: 50px;
        line-height: 40px;
        top: 0px;
        font-size: 24px;
    }

    .contact-initiales > .initiales-delete {
        right: 0;
        height: 15px !important;
        width: 15px !important;
        background-color: var(--orange-feu) !important;
        font-size: 10px !important;
        line-height: 1 !important;
        text-align: center !important;
        padding: 0;
    }

.card-contact-vehicule input:checked {
    background-color: var(--bleu-flash);
}
    
.contact-quickmenu {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    color: black;
    margin-left: 15px;
    max-width: calc(100% - 120px);
    position: relative;
    margin-right: 25px;
}

    .contact-quickmenu > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.contact-quicklinks {
    flex: 1;
    flex-basis: 100%;
    text-align: center;
}

    .contact-quicklinks > button {
        font-size: 16px;
        width: 30px;
        display: inline-block;
        height: 30px;
        background-color: var(--bleu-flash);
        color: #51459e;
        border-radius: 50px;
        margin: 10px 5px 0 5px;
        line-height: 32px;
        text-align: center;
    }

        .contact-quicklinks > button:hover {
            background-color: #eceff7;
        }


.contact-btn-edit,
.col-btn-edit,
.col-btn-remove,
.contact-btn-delete,
.contact-delete {
    display: block;
    position: absolute;
    top: calc(40% - 15px);
    right: 20px;
    height: 30px;
    width: 30px;
    line-height: 22px;
    text-align: center;
    border-radius: 50px;
    border: 2px solid var(--border-color);
    padding: 1px 0 0 0;
}

    .contact-btn-edit:hover {
        border-color: var(--bleu-flash);
    }

.contact-btn-histo {
    right: -8px;
    position: absolute;
    color: var(--bleu-fonce);
    top: 12px;
    font-size: 16px;
}

.col-btn-remove,
.contact-btn-delete,
.contact-delete {
    color: var(--orange-feu);
    font-size: 18px;
    pointer-events: all;
    line-height: 1.5;
}
  
.contact-vehicule-btn-delete {
    color: var(--orange-feu);
    font-size: 18px;
    pointer-events: all; 
    display: block;
    position: absolute;
    top: calc(50% - 15px);
    right: 20px;
    width: 30px;
    line-height: 22px;
    text-align: right;
    border-radius: 50px;
    padding: 0px 0 0 0;
}

    .contact-vehicule-btn-delete:checked {
        background-color: var(--bleu-flash) !important; /*Change the color of the toggle when it is checked */
        border-color: var(--bleu-flash) !important; /*Change the border color of the toggle when it is checked */
    }

.col-btn-remove {
    display: none;
}

.reorder-item:hover .col-btn-remove {
    display: block;
}

.col-btn-remove:not(.disabled-all) {
    cursor: pointer;
}

.contact-btn-edit,
.col-btn-edit {
    background-color: var(--color-light);
}

.card-contact,
.opportunite-details {
    margin: 1rem 1rem 0 1rem;
    border-radius: 5px;
    padding: 10px;
    display: block;
}

.card-contact {
    font-size: 12px;
    color: var(--bleu-fonce);
    position: relative;
}

    .card-contact:hover {
        cursor: pointer;
        background-color: var(--color-light);
    }

    .card-contact > span {
        display: block;
    }

.card-contact-vehicule {
    margin: 1rem 1rem 0 1rem;
    border-radius: 5px;
    padding: 10px;
    display: block;
}

.card-contact-vehicule {
    font-size: 12px;
    color: var(--bleu-fonce);
}

    .card-contact-vehicule:hover {
        cursor: pointer;
        background-color: var(--color-light);
    }

    .card-contact-vehicule > span {
        display: block;
    }

.checkbox-user {
    padding: 0;
}

    .checkbox-user,
    .checkbox-user > label {
        display: flex;
        align-items: center;
        flex: 1;
    }

        .checkbox-user > label {
            padding: 5px;
        }

            .checkbox-user > label:hover {
                background-color: var(--color-light);
                cursor: pointer;
            }

.nav.nav-pills {
    height: var(--hauteur-menu);
    border-bottom: 1px solid var(--border-color);
    align-items: end;
    flex-direction: row;
    flex-wrap: nowrap;
}

.nav-onglet {
    font-size: 14px;
    color: #a2bfd1;
    margin: 0 16px;
    position: relative;
    overflow: hidden;
    height: var(--hauteur-menu);
}

#simulation_container .nav-onglet {
    color: var(--bleu-fonce);
}

.nav-onglet:hover {
    color: var(--bleu-fonce);
}

.nav-onglet.active {
    color: var(--bleu-fonce);
    opacity: 1;
    font-family: 'Rubik Medium', sans-serif;
}

    .nav-onglet.active::after {
        content: '';
        height: 2px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: var(--bleu-flash);
        transition: .5s;
    }

.nav-onglet::after {
    content: '';
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 100%;
    background-color: var(--bleu-flash);
    transition: .5s;
}

.url-view {
    margin: 1.5rem 1.5rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

    .url-view li {
        padding-bottom: 1.5rem;
        position: relative;
        padding-left: 25px;
    }

        .url-view li::before {
            content: '';
            position: absolute;
            left: 2px;
            top: 5px;
            width: 10px;
            height: 10px;
            background-color: #eceff7;
            border-radius: 50px;
        }

        .url-view li::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 20px;
            width: 1px;
            height: 100%;
            background-color: #eceff7;
            z-index: 50;
        }

        .url-view li:last-of-type:after {
            display: none;
        }

    .url-view a {
        font-weight: 600;
    }

.url-view {
    margin: 1.5rem 1.5rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

    .url-view li {
        padding-bottom: 1.5rem;
        position: relative;
        padding-left: 25px;
    }

        .url-view li::before {
            content: '';
            position: absolute;
            left: 2px;
            top: 5px;
            width: 10px;
            height: 10px;
            background-color: #eceff7;
            border-radius: 50px;
        }

        .url-view li::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 20px;
            width: 1px;
            height: 100%;
            background-color: #eceff7;
            z-index: 50;
        }

        .url-view li:last-of-type:after {
            display: none;
        }

    .url-view a {
        font-weight: 600;
    }

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

.tabs-buttons {
    display: flex;
}

.tabs-minimenu > button {
    font-size: 10px;
    text-transform: uppercase;
}

    .tabs-minimenu > button.active,
    .tabs-minimenu > button:hover {
        font-family: 'Rubik Medium', sans-serif;
    }


.tab-item-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: white;
    border-radius: 5px;
    font-size: 14px;
    position: relative;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border-color);
}

    .tab-item-wrapper:last-of-type {
        margin-bottom: 1rem;
    }

    .tab-item-wrapper .tab-date {
        position: absolute;
        left: -158px;
        top: 20px;
        font-size: 10px;
        width: 100px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--bs-gray-500);
    }

    .tab-item-wrapper.done > .tab-item-header,
    .table-custom-dynamique td.done {
        text-decoration: line-through;
        color: #bcbcbc;
    }

.tab-item-taches {
    width: 100%;
}

.priority-btn {
    position: absolute;
    top: calc(50% - 10px);
    width: 10px;
    left: -11px;
    height: 20px;
    border-radius: 50px 0 0 50px;
    background-color: transparent;
    border-right: 1px solid var(--border-color);
}

    .priority-btn.high,
    .form-check-input.custom-check-prio.high[type=radio] {
        background-color: #ff8888;
    }

    .priority-btn.medium,
    .form-check-input.custom-check-prio.medium[type=radio] {
        background-color: #84e8f4;
    }

    .priority-btn.low,
    .form-check-input.custom-check-prio.low[type=radio] {
        background-color: #1aee8b;
    }

.tab-item-wrapper.active {
    width: 100%;
    max-width: 100%;
    transition: .5s;
}

    .tab-item-wrapper.active .tab-item-edit,
    .tab-item-wrapper.active .tab-item-view {
        display: block;
    }

.tab-item-wrapper:not(.active) > .tab-item-header {
    border-radius: 0 0 10px 10px;
}

.tab-item-title,
.reorder-item-title {
    font-family: 'Rubik Medium', sans-serif;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .tab-item-title:hover {
        cursor: pointer;
        color: var(--bleu-fonce);
    }

    .tab-item-title > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.tab-item-header {
    display: flex;
    align-items: center;
    color: black;
    justify-content: space-between;
}

    .tab-item-header .handle {
        font-size: 24px;
        cursor: all-scroll;
        color: var(--border-color);
        line-height: 56px;
    }

.reorder .bi-grip-vertical {
    cursor: all-scroll;
}

    .reorder .bi-grip-vertical:hover {
        color: var(--bleu-flash);
    }

.tab-item-header .handle:hover {
    color: var(--bleu-flash);
}

.tab-item-header:hover > .tab-item-edit,
.tab-item-header:hover > .tab-item-pin,
.tab-item-header:hover > .tab-item-trash,
.tab-item-header:hover > .tab-item-view {
    display: block;
}

.check-task {
    background-color: white;
    min-width: 25px;
    min-height: 25px;
    border-radius: 50px !important;
    transition: .3s;
    margin: 0 0 0 12px;
    position: absolute;
}

    .check-task:checked {
        background-color: #15bb6e;
        border-color: #15bb6e;
    }

.tab-item-title:hover > button {
    background-color: var(--color-light);
}

.tab-item-title .activite-email-repondre {
    position: absolute;
    right: 53px;
    top: 14px;
}

.tab-item-title > button,
.tab-item-edit,
.tab-item-pin,
.tab-item-trash,
.tab-item-view {
    position: absolute;
    right: 13px;
    top: 14px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50px;
    color: var(--bs-gray-500);
}

.tab-item-pin {
    right: 88px;
}

.tab-item-trash {
    right: 123px;
}

.tab-item-preview {
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 30px;
}

.tab-item-header:hover .tab-item-preview {
    margin-right: 115px;
}

.tab-item-edit,
.tab-item-pin,
.tab-item-trash,
.tab-item-view {
    display: none;
}

.tab-item-edit {
    right: 53px;
}

.tab-item-view {
    right: 95px;
}

.tab-item-title > span:last-child,
.reorder-item-title > span:last-child {
    font-size: 10px;
    color: darkgrey;
    text-transform: uppercase;
    font-weight: 500;
}

.tab-item-type {
    width: 25px;
    height: 25px;
    background-color: var(--bleu-flash);
    color: white;
    text-align: center;
    line-height: 25px;
    border-radius: 50px;
    display: block;
    font-size: 10px;
}

.tab-item-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-color);
}

.tab-item-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

    .tab-item-flex > div {
        min-width: 33.3333333%;
        max-width: 33.3333333%;
        height: var(--hauteur-menu);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 20px;
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

        .tab-item-flex > div:nth-of-type(3n) {
            border-right: none;
        }

.tab-item-product > span:last-child {
    min-width: 250px;
}

.tab-item-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
    flex: 1;
    flex-basis: 100%;
    border-top: 1px solid var(--border-color);
}

    .tab-item-bottom.flex {
        position: relative;
        top: -1px;
    }

.tab-item-user,
.tab-item-add-user,
.tab-item-contact {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50px;
    position: relative;
    font-size: 12px;
    font-family: 'Rubik Medium', sans-serif;
}

.affectation-user {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    position: relative;
}

.tab-item-contact {
    background-color: var(--bleu-flash);
    color: var(--bleu-fonce);
}

.tab-item-user {
    background-color: var(--orange-feu);
    color: white;
}

.tab-item-add-user {
    background-color: var(--color-light);
    color: black;
}

    .tab-item-add-user:hover,
    .tab-item-edit:hover,
    .tab-item-pin:hover,
    .tab-item-trash:hover,
    .tab-item-view:hover,
    .tab-item-title > button:hover {
        background-color: #f6f8ff;
        cursor: pointer;
        color: black;
    }

.tab-item-localisation {
    font-family: 'Rubik Medium', sans-serif;
    background-color: var(--color-light);
    border-radius: 50px;
    font-size: 10px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color: var(--bleu-fonce);
    text-transform: uppercase;
}

.drawer,
.localisation-drawer {
    position: fixed;
    top: var(--hauteur-menu);
    overflow: auto;
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background-color: white;
    height: calc(100vh - var(--hauteur-menu));
    transition: .5s;
    z-index: 1040;
    left: initial;
    right: initial
}

    .drawer.active,
    .localisation-drawer.active {
        transition: .5s;
        box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
        z-index: 1040;
    }

    .drawer.large {
        min-width: calc(100vw - var(--sidebar-width) - var(--hauteur-menu) + 10px);
        max-width: calc(100vw - var(--sidebar-width) - var(--hauteur-menu) + 10px);
        left: 100vw;
    }

    .drawer.half {
        min-width: 50vw;
        max-width: 50vw;
        left: -50vw;
    }

        .drawer.half.active {
            left: var(--hauteur-menu);
        }

    .drawer.left.mid,
    .drawer.right.mid {
        min-width: calc(100% - (var(--sidebar-width)*2) - var(--hauteur-menu));
        max-width: calc(100% - (var(--sidebar-width)*2) - var(--hauteur-menu));
    }

    .drawer.left,
    .localisation-drawer.left {
        left: calc(var(--sidebar-width)*-1);
        border-right: 1px solid var(--border-color);
    }

        .drawer.left.mid {
            left: calc(-100% + 1149px);
        }

            .drawer.left.mid.active {
                border-right: none;
            }

        .drawer.left.active,
        .localisation-drawer.left.active {
            left: calc(var(--sidebar-width) + var(--hauteur-menu));
        }

    .drawer.right,
    .localisation-drawer.right {
        right: calc(var(--sidebar-width)*-1);
        border-left: 1px solid var(--border-color);
    }

        .drawer.right.half {
            right: -50vw;
            left: initial;
        }

        .drawer.right.large {
            right: -100vw;
            left: initial;
        }

        .drawer.right.mid {
            right: calc(-100% + 1089px);
        }

            .drawer.right.mid.active {
                right: var(--sidebar-width);
                border-left: none;
            }

        .drawer.right.active,
        .localisation-drawer.right.active {
            right: 0;
            left: initial;
        }

.form-check-input.custom-check-prio:checked[type=radio] {
    background-image: none;
    border: 2px solid var(--bleu-fonce);
}

.form-check-input.custom-check-prio.none {
    border: 2px solid var(--border-color);
}

.form-check-input.custom-check-prio {
    border: 2px solid transparent;
    width: 25px;
    height: 25px;
    background-color: white;
    cursor: pointer;
}

/******************************************************/
/******************************************************/
/*********************** PARAMETRES *******************/
/******************************************************/
/******************************************************/

.users-wrapper {
    max-height: calc(100vh - var(--hauteur-menu)*2);
    min-height: calc(100vh - var(--hauteur-menu)*2);
    overflow: auto;
    border-right: 1px solid var(--border-color);
}

.users-list > .list-item {
    font-size: 12px;
    padding: 8px 15px;
    border-bottom: 1px solid var(--border-color);
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

    .users-list > .list-item:first-of-type {
        border-top: 1px solid var(--border-color);
    }

    .users-list > .list-item.active,
    .users-list > .list-item:hover {
        font-family: 'Rubik Medium', sans-serif;
        color: var(--bleu-fonce);
        background-color: var(--color-light);
        cursor: pointer;
    }

.user-bloc {
    padding: 1rem;
    background-color: white;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

    .user-bloc.sticky {
        position: sticky;
        top: 1.5rem;
    }

.user-teams-wrapper {
    border-radius: 10px;
    overflow: auto;
    border: 1px solid var(--border-color);
    max-height: 185px;
    background-color: white;
}

    .user-teams-wrapper.full,
    .droit-wrapper.full {
        max-height: calc(100vh - var(--hauteur-menu)*6 + 58px);
    }

.user-team {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

    .user-team:last-of-type {
        border-bottom: none;
    }

    .user-team span {
        display: block;
        padding-top: 10px;
        font-size: 10px;
    }

.user-table {
    max-height: 800px;
    overflow: auto;
    font-size: 12px;
}

    .user-table tr {
        vertical-align: middle;
    }


.user-shortcut.user-localisation {
    overflow: visible;
}

.shortcut-wrapper.user-localisation-wrapper {
    border: none;
    overflow: initial;
    top: 0;
}

.list-nested {
    padding-left: 0;
}

    .list-nested,
    .list-nested ul {
        list-style: none;
    }

        .list-nested ul {
            margin-left: 3rem;
        }

.licence-item,
.licence {
    display: flex;
    align-items: center;
}

.licence {
    color: var(--bleu-fonce);
}

.licence-item {
    padding: 10px;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

    .licence-item:first-of-type {
        border-top: 1px solid var(--border-color);
    }

    .licence-item:last-of-type {
        border-bottom: none;
    }

.licences-wrapper {
    max-height: 305px;
    overflow: auto;
}

.filtres-alpha {
    border: 2px solid var(--border-color);
    border-left: none;
}

    .filtres-alpha:hover {
        background-color: var(--border-color);
    }

.droit-item:first-of-type {
    border-top: 1px solid var(--border-color);
    padding-top: .5rem;
}

.droit-item {
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--border-color);
}

.droit-item,
.droit-check {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

    .droit-name small,
    .droit-check label {
        font-size: 10px;
    }

.droit-name {
    display: flex;
    flex-direction: column;
    min-width: 63%;
}

    .droit-name > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.droit-wrapper {
    max-height: 300px;
    overflow: auto;
}

.droit-check {
    margin-right: 10px;
}

/******************************************************/
/******************************************************/
/*********************** DATA ITEMS *******************/
/******************************************************/
/******************************************************/

.data-item {
    display: flex;
    padding: 15px 25px;
    border-radius: 15px;
    margin-bottom: 1.5rem;
    position: relative;
    bottom: 0;
    transition: .2s;
    width: 100%;
}

.data-item-sm {
    padding: 10px 25px 10px 25px;
    border-radius: 15px;
    position: relative;
    bottom: 0;
    transition: .2s;
}

a.data-item:hover,
a.data-item-sm:hover {
    bottom: 5px;
    box-shadow: var(--shadow-md);
}

.data-item-sm p {
    margin: 0;
}

.data-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    color: white;
    border-radius: 20px;
    overflow: hidden;
    margin-top: .75rem;
}

.data-item.horizontal,
.data-item-sm.horizontal {
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

    .data-item.horizontal > .data-header {
        font-size: 32px;
    }

    .data-item.horizontal > .data-body {
        line-height: 26px;
        font-size: 16px;
    }

        .data-item.horizontal > .data-body > span {
            font-size: 36px;
        }

.data-item.vertical {
    flex-direction: column;
}

    .data-item.vertical > .data-header {
        font-size: 32px;
    }

    .data-item.vertical > .data-body {
        font-size: 48px;
    }

        .data-item.vertical > .data-body span:first-of-type {
            min-width: 82px;
            display: inline-block;
        }

        .data-item.vertical > .data-body span:nth-child(2n) {
            font-size: 12px;
        }

    .data-item.vertical > .data-footer {
        display: flex;
        align-items: flex-end;
    }

        .data-item.vertical > .data-footer > span {
            flex: 1;
            line-height: 26px;
            font-size: 16px;
        }

        .data-item.vertical > .data-footer > i {
            flex: 2;
            text-align: end;
        }

.data-item .data-footer .bi,
.data-item-sm .data-footer .bi {
    position: relative;
    right: 0;
    -webkit-transition: all 0.5s 0s cubic-bezier(0, 1, 0.43, 1);
    -moz-transition: all 0.5s 0s cubic-bezier(0, 1, 0.43, 1);
    -o-transition: all 0.5s 0s cubic-bezier(0, 1, 0.43, 1);
    transition: all 0.5s 0s cubic-bezier(0, 1, 0.43, 1);
}

.data-item:hover .data-footer .bi,
.data-item-sm:hover .data-footer .bi {
    right: 15px !important;
}

/******************************************************/
/******************************************************/
/********************* DATA COLUMNS *******************/
/******************************************************/
/******************************************************/

.bar-label {
    font-size: 12px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--bleu-fonce);
    text-align: center;
}

.data-columns {
    display: flex;
    height: 360px;
    align-items: stretch;
}

.data-columns-labels-x {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    justify-content: space-between;
    position: relative;
    padding-top: 5px;
    color: #7987a5;
}

.column-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
    padding-right: 10px;
    border-right: 1px solid var(--bleu-flash);
    color: #7987a5;
}

.column-label-y {
    position: relative;
    top: 7px;
}

    .column-label-y::after {
        content: '';
        position: absolute;
        width: 5px;
        height: 1px;
        background-color: var(--bleu-flash);
        right: -10px;
        top: 10px;
    }

.column-label-x::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 5px;
    background-color: var(--bleu-flash);
    left: -1px;
    top: -5px;
}

.column-label-x {
    flex: 1;
    text-align: center;
    position: relative;
}

    /*.column-label-x:first-of-type {*/
    /*    flex: 0 0 25px;*/
    /*}*/

.column-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0 10px;
    border-bottom: 1px solid var(--bleu-flash);
    position: relative;
}

    .column-wrapper:nth-child(2n) > .column-bar {
        background-color: var(--bleu-flash);
    }

.column-bar {
    background-color: var(--bleu-fonce);
    border-radius: 10px 10px 0 0;
    height: 0;
    transition: .2s;
}

    .column-bar:hover {
        cursor: pointer;
    }

/******************************************************/
/******************************************************/
/*********************** DATA PIE *********************/
/******************************************************/
/******************************************************/

.legend-pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.legend:nth-child(1) {
    background-color: #51459e;
    color: white;
}

.legend:nth-child(2) {
    background-color: #f9896b;
    color: white;
}

.legend:nth-child(3) {
    background-color: #84e8f4;
}

.legend:nth-child(4) {
    background-color: #44707f;
    color: white;
}

.legend:nth-child(5) {
    background-color: #6455c4;
    color: white;
}

.legend:nth-child(6) {
    background-color: #ff9f6d;
    color: white;
}

.legend:nth-child(7) {
    background-color: #6db4cc;
    color: white;
}

.legend:nth-child(8) {
    background-color: #020104;
    color: white;
}

.legend:nth-child(9) {
    background-color: #89d2ff;
}

.legend {
    padding: 5px 15px;
    border-radius: 10px;
}

.search-results-list {
    position: absolute;
    left: calc(50% + 11PX);
    top: 50px;
    background-color: white;
    border: 1px solid;
    border-color: var(--border-color);
    width: calc(50% + 10px);
    z-index: 200;
    list-style: none;
    padding: 0;
    max-height: 60vh;
    overflow: auto;
    box-shadow: var(--shadow-md);
}

    .search-results-list > li {
        background-color: var(--color-light);
        border-top: 1px solid;
        border-color: var(--border-color);
    }

        .search-results-list > li:hover {
            background-color: white;
            cursor: pointer;
        }

        .search-results-list > li:first-of-type {
            border-top: none;
        }

.search-advanced-wrapper {
    width: 0px;
    height: 0px;
    position: fixed;
    top: 13px;
    right: 11px;
    opacity: 0;
    transition: width 1s, height 1s;
}

    .search-advanced-wrapper * {
        visibility: hidden;
        opacity: 0;
        transition: 1s;
    }

    .search-advanced-wrapper.active {
        width: calc(100vw - 40px);
        height: calc(100vh - 90px);
        background-color: var(--color-light);
        z-index: 400;
        border-radius: 5px;
        opacity: 1;
        right: 0;
        top: 50px;
        visibility: visible;
        transition: width 1s, height 1s;
        margin: 20px;
        border: 1px solid;
        border-color: var(--border-color);
        padding: 20px;
    }

        .search-advanced-wrapper.active * {
            visibility: visible;
            opacity: 1;
        }

.form-round {
    border: 1px solid;
    padding: 10px 10px 10px 15px;
    border-radius: 50px 0 0 50px;
    background-color: white;
    min-width: 150px;
    border-color: var(--border-color);
    border-right: none;
}

.form-round-sm {
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 12px;
    z-index: 500;
    position: relative;
}

.form-icon-sm {
    position: absolute;
    right: 1px;
    top: 1px;
    background-color: var(--color-light);
    border-radius: 50px;
    width: 26px;
    height: 26px;
    text-align: center;
    font-size: 12px;
    line-height: 26px;
    color: var(--bleu-flash);
    z-index: 800;
}

/******************************************************/
/******************************************************/
/********************** PLANNING **********************/
/******************************************************/
/******************************************************/
.button-hide-sidebar {
    border-radius: 0 50px 50px 0;
}

.planning-header,
.planning-filtres {
    display: flex;
    height: var(--hauteur-menu);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.planning-header {
    padding: 0 1rem 0 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 70;
}

.planning-body {
    display: flex;
    flex-direction: row;
}

.planning-col:first-of-type {
    flex-basis: 150px;
    max-width: var(--planning-item);
    min-width: var(--planning-item);
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 60;
}

.planning-body.switch-day .planning-col:first-of-type .planning-item:first-of-type,
.planning-body.switch-day .planning-col .planning-item:first-of-type {
    max-height: 100%;
    min-height: auto;
    margin-bottom: 1rem;
}

    .planning-body.switch-day .planning-col:first-of-type .planning-item:first-of-type div {
        height: 92%;
    }

.planning-body.switch-day .planning-hour {
    position: relative;
}

    .planning-body.planning-livraison .planning-hour::after,
    .planning-body.switch-day .planning-hour::after {
        left: -25px;
        height: 0px;
    }

.planning-hour::after {
    content: '';
    height: 1px;
    width: 75%;
    background-color: var(--border-color);
    position: absolute;
    top: 75px;
    left: 89px;
}

.planning-body.switch-day.contract .planning-col .planning-item {
    height: 90px;
}

.planning-body.switch-day.contract .planning-veh {
    height: 75px;
}

    .planning-body.switch-day.contract .planning-veh .veh-img {
        height: 0px;
        transition: .5s;
    }

.planning-body.switch-day.contract .planning-resa-wrapper {
    top: 107px;
    height: calc(100% - 107px);
}

.planning-body.switch-day .hour {
    padding: 0 10px;
    width: 69px;
    text-align: center;
}

.planning-body.planning-livraison .planning-col:first-of-type .planning-hour:after,
.planning-body.switch-day .planning-col:first-of-type .planning-hour:after {
    content: '';
    width: 55px;
    height: 2px;
    position: absolute;
    right: -10px;
    background-color: var(--border-color);
    top: 75px;
}

.planning-body.planning-livraison .hour::after,
.planning-body.planning-livraison .hour::before,
.planning-body.switch-day .hour::after,
.planning-body.switch-day .hour::before {
    content: '';
    width: 50px;
    height: 2px;
    position: absolute;
    right: 55px;
    background-color: var(--border-color);
}

.planning-body.planning-livraison .hour::after,
.planning-body.switch-day .hour::after {
    top: 124.25px;
}

.planning-body.planning-livraison .hour::before,
.planning-body.switch-day .hour::before {
    top: 50px;
}

.planning-body.planning-livraison .planning-col:first-of-type,
.planning-body.switch-day .planning-col:first-of-type {
    border-right: 1px solid var(--border-color);
    max-width: 70px;
    min-width: 70px;
}

    .planning-body.switch-day .planning-col:first-of-type .planning-hour {
        border-top: none;
    }

.planning-body.switch-day .planning-veh {
    background-color: white;
}

.planning-col:first-of-type .planning-item {
    border-right: none;
    box-shadow: 1px 0px 0px 0px var(--border-color);
}

    .planning-col:first-of-type .planning-item:first-of-type div {
        background-color: var(--border-color);
        width: 95%;
        height: 75%;
        border-radius: 5px;
    }

.planning-col {
    display: flex;
    flex-direction: column;
    min-width: 250px;
    flex: 1;
    position: relative;
}

    .planning-col.today .thead,
    .planning-col.today .thead > small {
        color: var(--bleu-fonce);
    }

.planning-col-day {
    position: fixed;
    top: calc(var(--hauteur-menu)*3);
    width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: calc(100vh - var(--hauteur-menu)*3);
}

.planning-livraison .planning-item > .thead {
    position: absolute;
}

.planning-item > .thead {
    text-align: center;
    font-family: 'Rubik Medium', sans-serif;
    color: black;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .planning-item > .thead small {
        font-size: 10px;
        color: #999999;
    }


    .today .thead,
    .planning-item > .thead:hover,
    .planning-item > .thead.active {
        background-color: white;
        cursor: pointer;
        border-bottom: 1px solid var(--bleu-flash);
    }

.planning-item:first-of-type {
    background-color: var(--color-light);
    height: var(--hauteur-menu);
    display: flex;
    align-items: center;
    justify-content: center;
}

.planning-resa {
    padding: 8px;
    border-radius: 5px;
    font-size: 12px;
    border: 2px solid var(--border-color);
    position: relative;
    height: 75px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

    .planning-resa.active,
    .planning-resa:hover,
    .panning-resa.ui-draggable-dragging {
        border: 2px solid var(--bleu-fonce);
    }

    .planning-resa:hover {
        cursor: pointer;
    }

    .planning-resa[data-statut='ferme'] {
        background-color: var(--color-light);
        border: 2px solid transparent;
        opacity: .5;
        position: relative;
    }

        .planning-resa[data-statut='ferme']::after {
            right: 6px;
            top: 14px;
        }

        .planning-resa[data-statut='ferme']::before {
            right: 10px;
            top: 10px;
        }

        .planning-resa[data-statut='ferme']::after,
        .planning-resa[data-statut='ferme']::before {
            position: absolute;
            width: 20px;
            height: 20px;
        }

        .planning-resa[data-statut='ferme']::before {
            content: '';
            background-color: var(--bleu-flash);
            border-radius: 50px;
        }

        .planning-resa[data-statut='ferme']::after {
            content: "\f633";
            display: inline-block;
            color: white;
            font-family: bootstrap-icons !important;
            font-style: normal;
            font-weight: normal !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: -0.125em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

    .planning-resa[data-statut='ouvert'] {
        background-color: var(--color-light);
    }

.planning-resa-wrapper {
    position: absolute;
    top: 257px;
    width: 100%;
    height: calc(100% - 257px);
    z-index: 5;
    border-right: 1px solid var(--border-color);
    padding: 0 10px;
    transition: .5s;
}

    .planning-resa-wrapper .planning-resa {
        position: absolute;
        width: calc(100% - 20px);
    }

.planning-livraison .planning-resa-wrapper {
    top: 96px;
    height: calc(100% - 96px);
    width: 50%;
}

    .planning-livraison .planning-resa-wrapper[data-type='VN'] {
        left: 50%;
    }

.planning-col .planning-item {
    height: 240px;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    transition: .5s;
}

    .planning-col:first-of-type .planning-item:first-of-type,
    .planning-col .planning-item:first-of-type {
        min-height: 80px;
        max-height: 80px;
        position: sticky;
        top: var(--hauteur-menu);
        border-bottom: 1px solid var(--border-color);
        z-index: 50;
    }

.planning-livraison .planning-col:first-of-type .planning-item:first-of-type,
.planning-livraison .planning-col .planning-item:first-of-type {
    margin-bottom: 1rem;
}

.planning-veh {
    height: 218px;
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--color-light);
    transition: .5s;
}

    .planning-veh .veh-img {
        width: auto;
        height: 143px;
        overflow: hidden;
        transition: .5s;
    }

.planning-livraison .planning-item > * {
    flex: 1;
    text-align: center;
}

.planning-livraison .planning-item > span {
    font-size: 10px;
    margin-top: 108px;
    background-color: white;
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid white;
}

.planning-item > * {
    margin: 10px;
}

.planning-veh b {
    font-size: 12px;
}

.planning-veh .stock-veh-mm .div:last-of-type {
    font-size: 10px;
}

.planning-more {
    position: relative;
}

.planning-details {
    background-color: white;
    border: 1px solid var(--border-color);
    width: 350px;
    height: 400px;
    overflow: auto;
    border-radius: 5px;
    box-shadow: var(--shadow-md);
    position: absolute;
    top: 10px;
    left: 40px;
    padding: 0 10px 10px 10px;
    z-index: 30;
}

    .planning-details .btn-close {
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 50;
    }

    .planning-details .planning-day {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 50;
    }

.planning-hour {
    height: 150px;
    border-top: 1px solid var(--border-color);
    position: relative;
}

.hour {
    display: inline-block;
    position: relative;
    padding: 0 15px 5px 5px;
    background-color: white;
    top: -12px;
    color: var(--bs-gray-400);
}

.planning-details .planning-resa {
    position: absolute;
    right: 20px;
    width: 70%;
}

.grab-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    color: var(--bs-gray-300);
    cursor: all-scroll;
}

    .grab-icon:hover {
        background-color: white;
        border-radius: 0 5px 0 15px;
        border-left: 2px solid var(--border-color);
        border-bottom: 2px solid var(--border-color);
    }

/******************************************************/
/******************************************************/
/********************** DOCUMENTS *********************/
/******************************************************/
/******************************************************/

#table_input input[type="checkbox"] {
    width: 15px;
    height: 15px;
}

#table_input tbody tr.active {
    background-color: #eceff7;
}

    #table_input tbody tr.active:hover {
        background-color: var(--color-light);
    }

.accordion-title[aria-expanded="true"] {
    background-color: var(--color-light);
}

.accordion-title i {
    transition: transform .2s ease-in-out;
    display: inline-block;
}

    .accordion-title i.active {
        transform: rotate(-180deg);
    }

.documents-wrapper,
.documents-selected-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.documents-categ-item {
    padding: 10px;
    border: 2px solid;
    border-bottom: 1px solid;
    border-top: 1px solid;
    border-color: var(--border-color);
    cursor: pointer;
    opacity: .5;
    flex: 1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    justify-content: center;
}

    .documents-categ-item:last-of-type {
        border-bottom: 2px solid;
        border-color: var(--border-color);
    }

    .documents-categ-item:first-of-type {
        border-top: 2px solid;
        border-color: var(--border-color);
    }

    .documents-categ-item:hover {
        background-color: var(--color-light);
        opacity: 1;
    }

    .documents-categ-item.active {
        background-color: var(--color-light);
        font-family: 'Rubik Medium', sans-serif;
        opacity: 1;
    }

.documents-categ-wrapper,
.documents-input-wrapper {
    min-height: 40vh;
    max-height: 40vh;
}

.documents-categ-wrapper {
    overflow: auto;
    width: 250px;
}

.document-subtitle {
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 10px;
    border-bottom: 2px solid var(--bleu-flash);
    padding: .5rem 0;
}

    .document-subtitle:hover {
        background-color: white;
        font-family: 'Rubik Medium', sans-serif;
    }

.documents-wrapper {
    padding: 0;
    margin-top: 1.5rem;
}

.tab-content > .active {
    display: flex;
}

.documents-tab-pane {
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
}

.documents-input-wrapper {
    overflow: auto;
    flex: 1;
    border-top: 2px solid var(--color-light);
    border-right: 2px solid var(--color-light);
    border-bottom: 2px solid var(--color-light);
    padding: 20px;
    overflow-x: hidden;
    position: relative;
}

.document-item {
    background-color: white;
    border-radius: 10px;
    border: 2px solid #eceff7;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    width: calc(20% - 16px);
    min-width: 140px;
    overflow: hidden;
}

    .document-item.active {
        background-color: var(--color-light);
        border-color: var(--bleu-fonce);
    }

    .document-item label i {
        font-size: 42px;
        color: var(--bleu-fonce);
        display: block;
    }

    .document-item.custom i {
        color: var(--orange-feu);
    }

    .document-item input {
        position: absolute;
        top: 5px;
        left: 5px;
        margin: 0;
    }

    .document-item label {
        text-align: center;
        height: 100%;
        padding: 10px;
        cursor: pointer;
        border-radius: 10px;
        font-size: 12px;
        display: block;
        min-width: 100%;
    }

        .document-item label:hover {
            background-color: var(--color-light);
        }

.documents-selected-wrapper {
    flex: 1;
    min-height: 70px;
    border-left: 2px solid #f6f7fb;
    border-right: 2px solid #f6f7fb;
    border-bottom: 2px solid #f6f7fb;
    margin-bottom: 1.5rem;
    align-items: center;
    padding: 0;
}

    .documents-selected-wrapper > .listing-button {
        flex-basis: auto;
        padding: 20px;
    }

    .documents-selected-wrapper > .listing-wrapper {
        display: flex;
        overflow: auto;
        padding: 15px 10px 10px 10px;
        flex: 1;
    }

.doc-list-item {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: var(--color-light);
    border-radius: 10px;
    border: 2px solid var(--bleu-fonce);
    position: relative;
    margin-right: 15px;
    min-width: fit-content;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

    .doc-list-item > i {
        font-size: 24px;
    }

    .doc-list-item > span {
        font-size: 12px;
        margin-left: 5px;
        color: var(--bleu-fonce);
    }

.doc-delete {
    background-color: var(--orange-feu);
    color: white;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    padding: 0;
    border-radius: 50px;
    position: absolute;
    right: -10px;
    top: -10px;
}

.table-header {
    display: flex;
    background-color: var(--color-light);
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #eceff7;
    justify-content: space-between;
    border-radius: 5px 5px 0 0;
}

/******************************************************/
/******************************************************/
/*********************** TIMELINE *********************/
/******************************************************/
/******************************************************/

.timeline-wrapper,
.timeline-item {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.timeline-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.timeline-item {
    border-radius: 15px;
    background-color: var(--color-light);
    color: var(--bleu-fonce);
}

    .timeline-item > .bg-white {
        padding: 15px;
        border-radius: 15px;
        position: relative;
        left: 15px;
    }

.timeline-header {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    padding: 15px 10px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 5px 15px 15px 5px;
}

.timeline-number {
    font-size: 36px;
}


.timeline-stock-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2rem;
    padding-top: 1rem;
}

    .timeline-stock-wrapper.vertical {
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        min-height: 600px;
    }

        .timeline-stock-wrapper.vertical .timeline-stock-item {
            min-width: 100%;
        }

            .timeline-stock-wrapper.vertical .timeline-stock-item::before {
                height: 100%;
                left: calc(50% - 1px);
                width: 2px;
                top: 50%;
            }

        .timeline-stock-wrapper.vertical .timeline-stock-item-titre {
            top: 67%;
            min-width: 130px;
            text-align: center;
            background-color: white;
            padding: 5px 0;
        }

        .timeline-stock-wrapper.vertical .timeline-stock-item.active .timeline-stock-item-titre {
            right: 0px;
            top: 75%;
            left: 0;
        }


.timeline-stock-item {
    text-align: center;
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    height: 60px;
    align-items: center;
    color: #2DDB8A;
}

    .timeline-stock-item::before {
        content: '';
        width: 100%;
        height: 30px;
        position: absolute;
        left: 50%;
        background-color: var(--color-light);
    }

    .timeline-stock-item:last-of-type::before {
        display: none;
    }

    .timeline-stock-item.active {
        opacity: 1;
    }

    .timeline-stock-item .timeline-stock-item-icone {
        width: 42px;
        margin: 0 auto;
        height: 42px;
        line-height: 42px;
        border-radius: 8px;
        background-color: white;
        z-index: 50;
        border: 2px solid var(--border-color);
        position: relative;
    }

    .timeline-stock-item__pastille {
        width: 14px;
        height: 14px;
        position: absolute;
        top: -7px;
        right: -7px;
        border-radius: 50px;
    }

    .timeline-stock-item.active .timeline-stock-item-icone {
        width: 60px;
        height: 60px;
        line-height: 60px;
        background-color: #f6f8ff;
        font-size: 24px;
        z-index: 50;
        box-shadow: 0px 1px 5px -2px #a2a2a2;
        border: 2px solid var(--bleu-fonce);
        color: var(--bleu-fonce);
    }

    .timeline-stock-item.active .timeline-stock-item-titre {
        font-family: 'Rubik Medium', sans-serif;
        font-size: 12px;
        top: 66px;
        color: var(--bleu-fonce);
    }

.timeline-stock-item-titre {
    position: absolute;
    font-size: 10px;
    text-transform: uppercase;
    top: 56px;
}

.timeline-stock-item-time {
    z-index: 50;
    position: absolute;
    right: -40px;
    width: 80px;
}

.timeline-stock-item-value {
    position: absolute;
    bottom: 54px;
    color: var(--bleu-flash);
    font-size: 36px;
}

.timeline-stock-item.active ~ .timeline-stock-item {
    color: var(--bleu-fonce);
    opacity: 1;
}

/******************************************************/
/******************************************************/
/******************* SVGs & CONSTATS ******************/
/******************************************************/
/******************************************************/
.constat-container {
    max-height: 605px;
    overflow: auto;
}

.constat-wrapper {
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 10px;
    border: 2px solid var(--border-color);
    font-size: 14px;
}

    .constat-wrapper:hover {
        background-color: var(--color-light);
        cursor: pointer;
    }

    .constat-wrapper.active {
        border: 2px solid var(--bleu-fonce);
    }

    .constat-wrapper .btn-delete-warning {
        position: absolute;
        right: 3px;
        top: 5px;
        border: 2px solid transparent;
        border-radius: 50px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0;
        padding: 0;
    }

        .constat-wrapper .btn-delete-warning:hover {
            border: 2px solid var(--border-color);
            background-color: white;
        }

.constat-btn {
    background-color: var(--bleu-flash);
    color: var(--bleu-fonce);
    height: 100%;
    padding: 0 16px;
    border-radius: 50px;
    margin-left: 10px;
}

.constat-text {
    color: black;
}

    .constat-text > b {
        display: block;
    }

.part {
    fill: #FFFFFF;
    stroke: #666666;
    stroke-miterlimit: 10;
}

    .part.active {
        fill: #f87957;
    }

    .part:hover {
        fill: var(--bleu-fonce);
        cursor: pointer;
    }

button.defaut-photo {
    display: flex;
    height: 245px;
    width: 245px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bleu-flash);
    margin: auto;
    color: var(--bleu-fonce);
}

    button.defaut-photo > i {
        font-size: 48px;
    }

/******************************************************/
/******************************************************/
/************************** STOCK *********************/
/******************************************************/
/******************************************************/

/* 
.sidebar.right {
    background-color: white;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--border-color);
    min-height: calc(100vh - var(--hauteur-menu));
    width: var(--sidebar-width);
    position: fixed;
    right: 0px;
    left: initial;
    overflow: auto;
}

.sidebar.left {
    left: var(--hauteur-menu);
}

.content.left {
    left: 0;
}

.content {
    width: calc(100% - var(--sidebar-width));
    left: var(--sidebar-width);
    min-height: calc(100vh - var(--hauteur-menu));
    position: relative;
}

.content.mid {
    width: calc(100% - var(--sidebar-width)*2);
} */
.action-masse-button-container {
    display:flex;
}
.backdrop-veh {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #f6f8ffbf;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3rem;
}

.sidebar-header {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 0 1.5rem;
    color: var(--bleu-fonce);
    z-index: 50;
    height: var(--hauteur-menu);
}

.filtres-wrapper {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.vehicule-reservation-active {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-body.vide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 24px;
    flex-direction: column;
    flex-wrap: nowrap;
}

.sidebar-body .icon-desc {
    font-size: 16px;
}

    .sidebar-body .icon-desc i {
        color: #f87957;
    }

.sidebar .dropdown-item {
    font-size: 12px;
    padding-left: 30px;
    position: relative;
    color: var(--bs-gray-500);
}

    .sidebar .dropdown-item:focus {
        background-color: transparent;
    }

    .sidebar .dropdown-item::before {
        content: '';
        position: absolute;
        left: 17px;
        height: 100%;
        top: 0;
        width: 2px;
        background-color: var(--border-color);
    }

    .sidebar .dropdown-item.active:before {
        display: none;
    }

    .sidebar .dropdown-item:hover {
        background-color: var(--color-light);
    }

    .sidebar .dropdown-item:active,
    .sidebar .dropdown-item.active {
        color: var(--bleu-fonce);
        background-color: var(--color-light);
        font-family: 'Rubik Medium', sans-serif;
    }

.sidebar .dropdown-header {
    text-transform: uppercase;
    font-size: 10px;
    font-family: 'Rubik Medium', sans-serif;
    color: black;
    margin-top: 10px;
}

/* 
.select-filtres {
    margin: 1rem 0;
    background-color: white;
    position: relative;
}

.select-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px;
    color: var(--bleu-fonce);
    font-family: 'Rubik Medium', sans-serif;
}
 .select-body {
    font-size: 12px;
    max-height: 200px;
    overflow: auto;
    position: absolute;
    background-color: white;
    width: 100%;
    padding-top: 0;
    z-index: 50;
    top: calc(100% + 6px);
    color: #7987a5;
    border-radius: 5px;
    box-shadow: var(--shadow-md);
    border: 2px solid #eceff7;
    min-width: 300px;
}

.select-body>div {
    padding: 5px 10px 5px 10px;
} */

.liste-equipements .list-group-item {
    border-color: var(--border-color);
}

    .liste-equipements .list-group-item:hover {
        background-color: var(--color-light);
        cursor: pointer;
    }

.liste-equipements input[type="checkbox"] {
    margin-right: .5rem;
}

.liste-equipements .list-group-item.active {
    background-color: white;
    color: var(--bleu-fonce);
    font-family: 'Rubik Medium', sans-serif;
    border-color: var(--bleu-flash);
}

.list-group-item.item-equipement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

    .list-group-item.item-equipement i {
        min-width: auto;
    }

    .list-group-item.item-equipement:hover .delete-vehequipement-container {
        display: flex;
    }

    .list-group-item.item-equipement .delete-vehequipement-container {
        position: absolute;
        right: 5px;
        background-color: white;
        font-size: 12px;
        align-items: center;
        display: none;
    }

        .list-group-item.item-equipement .delete-vehequipement-container:hover {
            color: var(--bleu-fonce);
            font-family: 'Rubik Medium', sans-serif;
        }

    .list-group-item.item-equipement > small {
        color: rgba(0,0,0,.5);
    }

.equipement-selected, .equipement-selected > .delete-vehequipement-container, .equipement-selected > small {
    background-color: var(--bleu-fonce) !important;
    color: white !important;
}

.btn-add-vehequipement-to-list-multiple-delete i {
    color: var(--bleu-fonce);
}

.equipement-selected .btn-add-vehequipement-to-list-multiple-delete i {
    color: white;
}

.stock-switch {
    font-size: 18px;
    cursor: pointer;
    height: 30px;
    width: 30px;
    border-radius: 5px;
    display: block;
    text-align: center;
    line-height: 30px;
    color: #cac8d6;
}

    .stock-switch:hover {
        background-color: var(--color-light);
    }

    .stock-switch.active {
        background-color: #eceff7;
        color: var(--bleu-fonce);
    }

.stock-equipements-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--color-light);
    padding: 0;
    position: relative;
}

    .stock-equipements-wrapper > button {
        position: absolute;
        top: 57px;
        height: calc(100% - 57px);
        z-index: 150;
        width: 3rem;
        left: calc(50% - 48px);
        background-color: #eceff7;
    }

        .stock-equipements-wrapper > button:hover {
            background-color: var(--bleu-flash);
        }

.select-edit {
    position: relative;
}

    .select-edit #btn_champs_energie, .select-edit #btn_champs_categ, .select-edit #btn_champs_souscateg {
        display: none;
    }

    .select-edit:hover #btn_champs_energie, .select-edit:hover #btn_champs_categ, .select-edit:hover #btn_champs_souscateg {
        display: block;
        position: absolute;
        right: 20px;
        padding: 0;
        margin: 0;
        font-size: 10px;
        top: 3px;
        font-weight: 600;
    }

    .select-edit #btn_champs_energie i, .select-edit #btn_champs_categ i, .select-edit #btn_champs_souscateg i {
        color: var(--bleu-flash);
    }

#btn_champs_energie:hover, #btn_champs_categ:hover, #btn_champs_souscateg:hover {
    color: var(--bleu-fonce);
}

.logo-stock {
    position: absolute;
    bottom: calc(50% - 75px);
    right: calc(50% - 75px);
    z-index: 40;
    width: 150px;
    height: 150px;
    left: initial;
    top: initial;
    background-color: #eceff7;
    border-radius: 50%;
}

.equipement-wrapper {
    flex: 1;
    border-bottom: 1px solid #eceff7;
    position: relative;
}

.equipement-header {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.equipement-body {
    max-height: calc(100vh - (var(--sidebar-width)*2) + 266px);
    overflow: auto;
    padding: 10px;
}

/*********** VUE CARDS **********/
.stock-wrapper.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1rem;
    gap: 1rem;
    justify-content: flex-start;
}

    .stock-wrapper.grid > .stock-item {
        min-width: 295px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        max-width: calc(24% + 3px);
    }

    .stock-wrapper.grid .stock-veh-mm > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

/************ VUE ROW ************/
.stock-wrapper.lists {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0.5rem;
    gap: 0.5rem;
}

    .stock-wrapper.lists > .stock-item {
        max-height: 200px;
        display: flex;
        align-items: center;
    }

        .stock-wrapper.lists > .stock-item > .stock-veh-img {
            flex: 0 0 190px;
        }

    .stock-wrapper.lists .stock-veh-desc {
        padding: 10px;
        color: var(--bleu-fonce);
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 340px;
    }

    .stock-wrapper.lists .stock-veh-mm {
        padding: 0 10px 10px 10px;
    }

    .stock-wrapper.lists .btn-round {
        padding: 5px 20px;
        font-size: 14px;
    }

    .stock-wrapper.lists > .stock-item > .stock-veh-infos {
        flex: 1 1 auto;
        min-width: 320px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .stock-wrapper.lists > .stock-item .stock-veh-options {
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

.vm-wrapper:hover {
    border-color: var(--bleu-fonce) !important;
}

.vm-range {
    height: 10px;
    width: 80%;
    background-color: var(--color-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin: 20px auto 10px;
    position: relative;
}

.vm-range-fill::after {
    left: 0;
}

.vm-range-fill::before {
    right: 0;
    z-index: 50;
}

.vm-range-fill::after, .vm-range-fill::before {
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    border-radius: 50px;
    top: -6px;
    background-color: var(--bleu-fonce);
}

.vm-range-fill {
    position: absolute;
    width: 68%;
    height: 100%;
    left: calc(50% - 34%);
    background-color: var(--bleu-flash);
}

.vm-range-text {
    width: 100%;
    margin: 5px auto 20px auto;
    padding: 5px 10px 10px 10px;
    font-family: 'Rubik Medium', sans-serif;
    background-color: var(--bleu-flash);
    color: var(--bleu-fonce);
    border-radius: 10px;
    position: relative;
}

    .vm-range-text::after {
        content: '';
        position: absolute;
        bottom: -30px;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid var(--bleu-flash);
        border-bottom: 20px solid transparent;
        z-index: 50;
        width: 20px;
        height: 20px;
        left: calc(50% - 20px);
    }
/************ TOUTE VUES ************/

.financement-radio--label {
    font-size: 8px;
    text-transform: uppercase;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--bleu-fonce);
}

.financement-slider::-webkit-slider-thumb {
    background: var(--bleu-fonce);
}

.financement-slider::-moz-range-thumb {
    background: var(--bleu-fonce);
}

.financement-slider::-ms-thumb {
    background: var(--bleu-fonce);
}

.financement-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .financement-results .radio-item-fi {
        padding: 1rem;
        border: 2px solid var(--border-color);
        border-radius: 5px;
        /*cursor: pointer;*/
        background-color: white;
        /*padding-left: 42px;*/
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: start;
    }

.radio-item-fi button {
    display: none;
}

.financement-input {
    position: absolute;
    left: 14px;
}

.financement-results .radio-item-fi:hover {
    border-color: var(--bleu-flash);
}

.financement-results .radio-item-fi.active {
    border-color: var(--bleu-fonce);
}

.financement-input:checked + label:hover,
.financement-input:checked + label {
    border-color: var(--bleu-fonce);
}

    .financement-input:checked + label b {
        color: var(--bleu-fonce);
    }

    .financement-input:checked + label button {
        display: block;
    }

.stock-item {
    background-color: var(--color-light);
    flex: 1;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

.stock-optionne {
    position: absolute;
    height: 26px;
    width: 100%;
    background-color: var(--bleu-fonce);
    bottom: 0;
    color: white;
    font-size: 11px;
    z-index: 50;
    line-height: 26px;
    text-align: center;
}

.btn-id,
.btn-like {
    padding: 5px 10px 6px 8px;
    border-radius: 0 0 20px;
    font-size: 12px;
}

.btn-id {
    background-color: var(--bleu-flash);
    color: var(--bleu-fonce);
}

.btn-like {
    background-color: var(--orange-feu);
    color: white;
}

    .btn-id.right,
    .btn-like.right {
        right: 0;
        border-radius: 0 8px 0 20px;
        padding: 8px 8px 6px 10px;
        left: inherit;
    }

    .btn-like.bg-white {
        background-color: white;
        color: #f87957;
        position: absolute;
        top: 0;
    }

.liste-info-veh li span {
    min-width: 150px;
    display: inline-block;
}

.lists-tag {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 100;
    width: initial;
    height: initial;
}

    .lists-tag.bottom {
        bottom: 0;
        top: initial;
    }

    .lists-tag.top {
        top: 0;
        bottom: initial;
    }

    .lists-tag.left {
        left: 0;
        right: initial;
    }

    .lists-tag.right {
        right: 0;
        left: initial;
        align-items: flex-end;
    }

    .lists-tag.bottom.left > * {
        border-radius: 0 20px 0 0;
        text-align: left;
        padding-right: 14px;
    }

    .lists-tag.bottom.right > * {
        border-radius: 20px 0 0 0;
        text-align: right;
        padding-left: 0px;
    }

.stock-tag {
    padding: 5px 8px 5px 8px;
    border-radius: 0 20px 20px 0;
    font-size: 12px;
}

.photo-tag {
    padding: 5px 10px 6px 8px;
    border-radius: 0 0 20px 0;
    left: 0;
    top: 60px;
    font-size: 12px;
    background-color: #eceff7;
    font-family: 'Rubik Medium', sans-serif;
}

    .photo-tag:hover {
        color: black;
    }

.stock-alert {
    position: absolute;
    font-size: 10px;
    top: 0;
    left: 35px;
    background-color: var(--bleu-flash);
    z-index: 100;
    padding: 2px 9px 6px 7px;
    color: var(--bleu-fonce);
    font-family: 'Rubik Medium', sans-serif;
    border-radius: 0 0 10px 10px;
}

.stock-veh-mm {
    padding: 10px;
    color: var(--bleu-fonce);
    position: relative;
}

a.stock-veh-mm:hover {
    background-color: #eceff7;
}

.stock-veh-prix {
    color: var(--bleu-fonce);
    font-size: 24px;
    text-align: end;
    display: flex;
    flex-direction: column;
}

.stock-veh-number {
    display: block;
    font-size: 14px;
    color: #7987a5;
}

.stock-veh-prix > span {
    font-size: 16px;
    display: block;
}

.stock-veh-img {
    overflow: hidden;
    position: relative;
}

    .stock-veh-img:hover > img {
        transform: scale(1.05);
        opacity: .9;
    }

    .stock-veh-img > img {
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

/*.stock-veh-img--financement-info {
    color: var(--bleu-fonce);
    padding: 5px 5px 5px 10px;
    border-radius: 20px 0 0;
    text-align: center;
    width: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgba(132,232,244, 0.8);
    font-size: 12px;
}

.stock-veh-img--financement-info a:hover {
    text-decoration: underline;
}*/

.stock-veh-mm > div {
    font-size: 12px;
}

.stock-veh-mm::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 2px;
    background-color: var(--bleu-flash);
    left: 10px;
    bottom: 0px;
}

.stock-veh-options {
    color: var(--bleu-fonce);
    font-family: 'Rubik Medium', sans-serif;
    padding-top: 10px;
}

.stock-veh-infos {
    display: flex;
    flex-direction: column;
}

.stock-veh-desc {
    padding: 10px;
    color: var(--bleu-fonce);
    position: relative;
    display: flex;
    flex-direction: column;
}

    .stock-veh-desc i {
        color: var(--orange-feu);
        display: inline-block;
    }

    .stock-veh-desc > .veh-prix {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
.veh-desc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.stock-veh-financement {
    background-color: #e9eeff;
}

.icon-desc {
    font-size: 16px;
    display: flex;
    align-items: center;
}

.icon-desc b {
    font-size: 12px;
    padding-left: 5px;
    display: block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-stock-responsive {
    width: 100%;
}

    .table-stock-responsive tr {
        display: flex;
        border-bottom: 1px solid var(--border-color);
    }

        .table-stock-responsive tr:hover {
            background-color: var(--color-light);
        }

    .table-stock-responsive td {
        display: flex;
        align-items: stretch;
    }

    .table-stock-responsive td,
    .table-stock-responsive th {
        flex: 1;
        border-right: 1px solid var(--border-color);
    }

        .table-stock-responsive td:nth-last-child(2),
        .table-stock-responsive th:nth-last-child(2) {
            border-right: none;
        }

        .table-stock-responsive td:last-of-type,
        .table-stock-responsive th:last-of-type {
            position: sticky;
            right: 0;
            background-color: #f6f8ff;
            z-index: 10;
            border-left: 1px solid var(--border-color);
            border-right: none;
            flex: initial;
            box-shadow: -2px 0 5px 0px #f0f0f1;
            min-width: 200px;
        }

        .table-stock-responsive td.lg,
        .table-stock-responsive th.lg {
            flex: 2;
        }

        .table-stock-responsive td.xl,
        .table-stock-responsive th.xl {
            flex: 3;
        }

    .table-stock-responsive th {
        text-transform: uppercase;
    }

        .table-stock-responsive th > span {
            line-height: 45px;
            padding: 0 10px;
        }

        .table-stock-responsive th:last-of-type {
            border-right: none;
        }

    .table-stock-responsive .stock-photo {
        border-radius: 5px;
        overflow: hidden;
        position: relative;
    }

    .table-stock-responsive .stock-compteur {
        position: absolute;
        border-radius: 5px;
        background-color: var(--bleu-flash);
        bottom: 10px;
        right: 10px;
        font-size: 12px;
        padding: 2px 5px;
        font-family: 'Rubik Medium', sans-serif;
    }

    .table-stock-responsive .stock-health {
        width: 30px;
        display: flex;
        align-items: center;
    }

        .table-stock-responsive .stock-health .healthbar {
            position: relative;
            width: 10px;
            background-color: var(--color-light);
            border-radius: 50px;
            height: 100%;
        }

            .table-stock-responsive .stock-health .healthbar.bad::after,
            .table-stock-responsive .stock-health .healthbar.medium::after,
            .table-stock-responsive .stock-health .healthbar.good::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 10px;
                border-radius: 50px;
            }

            .table-stock-responsive .stock-health .healthbar.bad::after {
                height: 33%;
                background-color: var(--orange-feu);
            }

            .table-stock-responsive .stock-health .healthbar.medium::after {
                height: 66%;
                background-color: var(--bleu-fonce);
            }

            .table-stock-responsive .stock-health .healthbar.good::after {
                height: 100%;
                background-color: #2DDB8A;
            }

    .table-stock-responsive .stock-vehicule {
        width: calc(100% - 50px + 1rem);
    }

    .table-stock-responsive .stock-vehicule,
    .table-stock-responsive .stock-statut,
    .table-stock-responsive .stock-alertes {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .table-stock-responsive .stock-marque {
        font-family: 'Rubik Medium', sans-serif;
    }

    .table-stock-responsive .stock-modele {
        max-width: 308px;
    }


    .table-stock-responsive .stock-marque,
    .table-stock-responsive .stock-modele,
    .table-stock-responsive .stock-vehicule-infos {
        font-size: 14px;
    }

    .table-stock-responsive .stock-vehicule-infos {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

        .table-stock-responsive .stock-vehicule-infos > div {
            flex-basis: 50%;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            font-size: 12px;
            padding: 0 5px;
            width: 50%;
            max-width: 110px;
        }

            .table-stock-responsive .stock-vehicule-infos > div i {
                font-size: 22px;
                color: var(--bleu-flash);
                margin-right: 5px;
            }

            .table-stock-responsive .stock-vehicule-infos > div:nth-of-type(2n) {
                border-left: 1px solid var(--border-color);
            }

            .table-stock-responsive .stock-vehicule-infos > div:nth-last-of-type(-n+2) {
                border-bottom: none;
            }

    .table-stock-responsive .badge {
        font-size: 14px;
    }

    .table-stock-responsive .stock-prix {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: end;
        width: 100%;
        padding-right: 1rem;
    }

    .table-stock-responsive .stock-statut,
    .table-stock-responsive .stock-prix-vente,
    .table-stock-responsive .stock-prix-marge,
    .table-stock-responsive .stock-prix-achat,
    .table-stock-responsive .stock-dates {
        font-family: 'Rubik Medium', sans-serif;
    }

    .table-stock-responsive .stock-prix-vente {
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

        .table-stock-responsive .stock-prix-vente.barre {
            font-weight: 100;
            text-decoration: line-through;
            color: var(--color-grey);
        }

        .table-stock-responsive .stock-prix-marge,
        .table-stock-responsive .stock-prix-achat,
        .table-stock-responsive .stock-prix-vente.barre {
            font-size: 14px;
        }

    .table-stock-responsive .stock-dates > div,
    .table-stock-responsive .stock-prix-marge,
    .table-stock-responsive .stock-prix-achat {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 46px;
        width: 100%;
    }

    .table-stock-responsive .stock-dates {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 1rem;
        align-items: flex-end;
        width: 100%;
    }

.veh-input,
.phrase-input {
    background-color: transparent;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 0;
    width: 100%;
}

    .veh-input:hover,
    .phrase-input :hover {
        border-bottom: 2px dashed var(--bleu-flash);
    }

    .veh-input:focus:not([readonly]),
    .phrase-input:focus:not([readonly]) {
        border-bottom: 2px solid var(--bleu-fonce);
    }

    .veh-input + button,
    .phrase-input + button {
        display: block;
    }
/******************************************************/
/******************************************************/
/****************** MARKETPLACE CHAT ******************/
/******************************************************/
/******************************************************/
.market-wrapper {
    padding: 10px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-light);
    color: var(--bleu-fonce);
    margin-bottom: 15px;
}

    .market-wrapper .message-header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 20px;
    }

.market-message-wrapper {
    background-color: var(--color-light);
    border-radius: 10px;
}

    .market-message-wrapper > .chat-wrapper {
        padding: 15px;
        height: calc(100vh - 375px);
        overflow: auto;
    }

    .market-message-wrapper > .chat-textarea {
        padding: 15px;
        border-top: 1px solid #eceff7;
        display: flex;
    }

.market-contact {
    border-radius: 10px;
    background-color: var(--color-light);
    padding: 20px;
    height: calc(100vh - 95px);
    color: var(--bleu-fonce);
    overflow: auto;
    margin-bottom: 15px;
}


    .market-contact i {
        color: var(--orange-feu);
        min-width: 25px;
        display: inline-block;
        font-size: 18px;
    }

.marketplace-minimenu {
    display: flex;
    padding: 10px 12px;
    position: relative;
    align-items: center;
    height: 40px;
}

.input-select-editable { 
    margin-top: 0rem;
    display: block; 
    border: 2px solid #eceff7;
    font-size: 14px;
    border-radius: 5px;
    width: 100%;
    font-family: 'Rubik Medium', sans-serif;
    color: #001142;
    background-color: white;
 
}


.custom-select-editable {
    margin: 0;
}

.select-editable {
    position: relative;
    background-color: white; 
    width: 100%;
    height: 30px;
}

    .select-editable select {
        position: absolute; 
        top: 0px;
        right: 12px;
        font-size: 14px;
        border: none; 
        width: 95%;
        height: 100%;
    }
    .select-editable option {
        height: 46px;
        border-top: 2px solid var(--border-color);
        display: flex;
        align-items: center;
    }

    .select-editable input {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 90%;
        height: 100%;
        padding: 1px;
        font-size: 12px;
        border: none;
    }
    .select-editable label{
        z-index: 5;
        padding: 0 5px;
        background-color: white;
        position: absolute;
        font-size: 10px;
        text-transform: uppercase;
        font-family: 'Rubik Medium', sans-serif;
        color: var(--bleu-fonce);
        top: -12px;
        left: 5px;
        border-radius: 5px;
    }

        .select-editable select:focus, .select-editable input:focus {
            outline: none;
        }

    .select-editable select,
    .select-editable,
    .select-editable > input[type=text] {
        padding: 10px;
        max-height: 45px;
        min-width: 70px;
        height: 45px;
    }

        .custom-select-editable label,
        .select-editable > label {
            z-index: 5;
            padding: 0 5px;
            background-color: white;
            position: absolute;
            font-size: 10px;
            text-transform: uppercase;
            font-family: 'Rubik Medium', sans-serif;
            color: var(--bleu-fonce);
            top: -7px;
            left: 5px;
            border-radius: 5px;
        }

  
.message-info {
    padding-bottom: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.message-type {
    font-size: 10px;
    color: #7987a5;
}

.message-next i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50px;
    display: inline-block;
    margin-left: 6px;
}

.table-marketplace-messages {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

    .table-marketplace-messages .messages-icones {
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: #eceff7;
        display: none;
        box-shadow: -15px 0px 10Px #eceff7;
    }

[class^="btn-demande"] {
    background-color: var(--bleu-flash);
    color: var(--bleu-fonce);
    border-radius: 50px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 10px;
}

.table-marketplace-messages [class^="message-info"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
}

.table-marketplace-messages .message-info-veh {
    max-width: 15vw;
    min-width: 15vw;
}

.table-marketplace-messages .message-info-demande {
    flex: 1;
}

.table-marketplace-messages .form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
}

.table-marketplace-messages a {
    display: flex;
    padding: 10px;
    position: relative;
    border-top: 2px solid var(--border-color);
    border-left: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
    align-items: center;
}

.marketplace-item:hover,
.marketplace-item.active {
    background-color: var(--color-light);
    border-top: 2px solid white;
}

.table-marketplace-messages a:last-of-type {
    border-bottom: 2px solid var(--border-color);
}

/******************************************************/
/******************************************************/
/********************* ESTIMATION *********************/
/******************************************************/
/******************************************************/

/* PAGE ESTIMATION */

.estimation-header {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 500;
}

.estimation-reprise-wrapper {
    display: flex;
}

.estimation-chat-wrapper {
    flex: 1;
    border-left: 1px solid var(--border-color);
}

.estimation-details-wrapper,
.estimation-chat-wrapper {
    overflow: auto;
    max-height: calc(100vh - ((var(--hauteur-menu) * 2)));
}

.estimation-details-wrapper {
    flex: 2;
}

.sidebar-chat-footer {
    position: relative;
    margin: 1rem 1rem 0.5rem 1rem;
}

    .sidebar-chat-footer textarea {
        resize: none;
        margin: 0 0 45px 0;
        padding: 5px 5px 0 5px;
        border-radius: 5px 5px 0 0;
    }

    .sidebar-chat-footer .btn-chat-actions, .sidebar-chat-footer .btn-chat-send {
        position: absolute;
        bottom: 36px;
        z-index: 50;
        height: 45px;
    }

    .sidebar-chat-footer .btn-chat-actions {
        border: 2px solid var(--bleu-fonce);
        width: 75%;
        border-radius: 0 0 0 5px;
    }

        .sidebar-chat-footer .btn-chat-actions input {
            width: 100%;
            height: 39px;
            font-size: 22px;
        }

            .sidebar-chat-footer .btn-chat-actions input[placeholder] {
                text-align: center;
            }

    .sidebar-chat-footer .btn-chat-send {
        right: 0;
        width: 25%;
        border-radius: 0 0 5px 0;
    }

    .sidebar-chat-footer .ql-toolbar {
        border-top: 2px solid var(--border-color);
        border-right: 2px solid var(--border-color);
        border-left: 2px solid var(--border-color);
        border-bottom: none;
    }

    .sidebar-chat-footer .ql-editor {
        height: 150px;
        margin-bottom: 46px;
        border-top: 2px solid var(--border-color);
        border-right: 2px solid var(--border-color);
        border-left: 2px solid var(--border-color);
        min-height: initial;
    }

        .sidebar-chat-footer .ql-editor:focus {
            border-color: var(--bleu-fonce);
        }

/* MODAL CREATION ESTIMATION */



.step-wrapper {
    background-color: white;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: calc(100vh - var(--hauteur-menu));
}

.modal .step-wrapper {
    height: calc(100vh - (var(--hauteur-menu)*2));
}

.step-wrapper .step-content.active {
    width: 100%;
    height: calc(100vh - var(--hauteur-menu));
}

    .step-wrapper .step-content.active > .step-body {
        height: 100%;
        padding-bottom: var(--hauteur-menu);
    }

.step-wrapper .step-header {
    height: 100%;
    border-right: 1px solid;
    border-color: var(--border-color);
}

.step-body {
    overflow: auto;
    padding: 0 20px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--border-color);
}

.step-content.active .step-header {
    background-color: var(--orange-feu);
    border: none;
    border-radius: 0;
    flex: 0;
    height: var(--hauteur-menu);
    display: flex;
    align-items: center;
}

.step-content.active > .step-header > h5 {
    writing-mode: initial;
    transform: none;
}

.step-content.active > .step-footer {
    height: var(--hauteur-menu);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-light);
    position: fixed;
    bottom: 0;
    width: calc(100vw - var(--hauteur-menu)*6 - 25px);
}

.modal .step-content.active > .step-footer {
    position: relative;
    width: 100%;
    bottom: var(--hauteur-menu);
}

.step-content {
    width: 70px;
    display: flex;
    flex-direction: column;
}

    .step-content > .step-header > h5 {
        writing-mode: vertical-lr;
        overflow: hidden;
    }



.step-header {
    padding: 20px;
    background-color: var(--bleu-fonce);
}

    .step-header > h5 {
        margin: 0;
        color: white;
    }






/******************************************************/
/******************************************************/
/******************* FIDELISATION *********************/
/******************************************************/
/******************************************************/






.input-sortable {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .input-sortable li {
        display: flex;
        background-color: white;
        border: 1px solid var(--border-color);
        border-left: none;
        border-right: none;
        border-bottom: none;
        height: 50px;
        align-items: center;
        font-size: 14px;
    }

        .input-sortable li:last-of-type {
            border-bottom: 1px solid var(--border-color);
        }

        .input-sortable li > i:first-of-type {
            cursor: move;
            height: 50px;
            display: grid;
            place-content: center;
            font-size: 20px;
            color: var(--bleu-flash);
            width: 50px;
        }


            .input-sortable li > i:first-of-type:hover {
                color: var(--bleu-fonce);
            }



        .input-sortable li.ui-sortable-helper {
            border: 1px solid var(--border-color);
        }

    .input-sortable .input-sortable-placeholder {
        background-color: var(--color-light);
        height: 50px;
    }







/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/***************************************** PARAMETRES PANIER DE FUSIONS *******************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/

.panier-fusion__item {
    border: 2px solid var(--border-color);
    border-radius: 5px;
    margin: 1rem 0;
}

.tabs-fusion {
    height: calc(100vh - (4 * var(--hauteur-menu)));
    overflow: auto;
    border-bottom: 1px solid var(--border-color);
}

.show-checkbox {
    font-size: 14px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 0 1rem;
    margin-left: .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .show-checkbox:hover {
        background-color: var(--bs-light);
    }

input:checked + .show-checkbox {
    border: 2px solid var(--bleu-fonce);
}

/***************/
/***************/
/* CHAT GLOBAL */
/***************/
/***************/  
.chat-content > * {
    margin: 0;
}

.chat-preview > * {
    margin: 0;
}

#editor-container-chat {
    height: 230px;
}
#chat_partie_gauche_discussion .zoomable_photo, #editor-container-chat .zoomable_photo,#tab_messages img {
    cursor: pointer;
}

#chat_partie_gauche_discussion .zoomable_photo, #editor-container-chat img {
    max-height: 200px;
    max-width: 200px;
}

#tab_messages .zoomable_photo {
    max-height: 50px;
    max-width: 50px;
}


/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/****************************************************** SIMPLE TIMELINE *******************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/


.custom-file-label {
    border: 2px solid var(--border-color);
    border-radius: 5px;
    padding: 1rem;
    gap: .5rem;
}

    .custom-file-label:hover {
        cursor: pointer;
        background-color: var(--color-light);
    }

.simple-timeline {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: auto;
    justify-content: space-between;
    font-size: 12px;
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 1rem;
    z-index: 10;
}

    .simple-timeline::before {
        content: '';
        position: absolute;
        width: calc(100% - 2rem);
        height: 2px;
        background-color: var(--border-color);
        left: 1rem;
    }

.simple-timeline__item {
    display: block;
    padding: 0 1rem;
    background-color: white;
    z-index: 1;
    color: var(--bs-gray-500);
}

    .simple-timeline__item.active {
        color: white;
        font-weight: 600;
        background-color: var(--bleu-fonce);
        padding: .5rem 1rem;
        border-radius: 50px;
    }

    .simple-timeline__item.done {
        color: white;
        font-weight: 600;
        background-color: #20c993;
        padding: .5rem 1rem;
        border-radius: 50px;
    }



/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************** MEDIA QUERIES *******************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/* SI LA LARGEUR DE L'ECRAN EST INFERIEURE Ã  1400px */

@media screen and (max-width: 1550px) {
    .btn-identification {
        position: relative;
        top: initial;
        right: initial;
        margin: 10px auto 0 auto;
    }
}

/* SI LA LARGEUR DE L'ECRAN EST INFERIEURE Ã  1400px */

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



    .drawer.half.active {
        min-width: calc(100vw - var(--hauteur-menu));
        max-width: calc(100vw - var(--hauteur-menu));
    }

    .drawer.half {
        left: -100vw;
    }

    .chat-item.cdv {
        margin-left: 35px;
        max-width: 100%;
    }

    .estimation-wrapper {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
        margin-bottom: 10px;
        border-right: 1px solid;
        border-color: var(--border-color);
    }

    .estimation-marque,
    .estimation-modele {
        flex-basis: auto;
    }

    .estimation-wrapper > * {
        border-right: 0;
        border-bottom: 1px solid;
        border-color: var(--border-color);
        width: 100%;
        text-align: center;
    }

    .mega-item .item-menu {
        width: 50%;
    }

    .table-filtres-wrapper {
        min-width: 45vw;
    }

    .tabs-menu {
        flex-direction: column;
    }

    .tabs-minimenu {
        padding-bottom: 1rem;
    }
}

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

    .bloc-content h5 {
        font-size: 12px;
    }

    .index-grid {
        grid-template-columns: 1fr;
        grid-gap: 10px;
        padding: 10px;
    }

    .grid-body {
        padding: 0;
    }

    .grid-item[data-span="1"],
    .grid-placeholder[data-span="1"],
    .grid-item[data-span="2"],
    .grid-placeholder[data-span="2"],
    .grid-item[data-span="3"],
    .grid-placeholder[data-span="3"],
    .grid-item[data-span="4"],
    .grid-placeholder[data-span="4"],
    .grid-item[data-span="5"],
    .grid-placeholder[data-span="5"],
    .grid-item[data-span="6"],
    .grid-placeholder[data-span="6"] {
        grid-column-start: span 1;
        width: calc(100vw - var(--hauteur-menu) - 2rem);
    }

    .grid-layout {
        display: none;
    }

    .reporting-item {
        flex-basis: calc(100% - 0.5rem);
    }

    .sidebar,
    .content,
    .content.right,
    .content.left {
        width: 100%;
        overflow: initial;
        height: auto;
        min-height: auto;
    }

        .sidebar.left,
        .sidebar.right {
            border-left: none;
            border-right: 1px solid var(--border-color);
        }

    .scrollspy-container {
        height: auto;
    }

    .drawer.left {
        left: calc(var(--sidebar-width)*-1);
    }

        .drawer.left.active {
            left: var(--hauteur-menu);
        }

    .drawer.right {
        right: calc(var(--sidebar-width)*-1);
    }

        .drawer.right.active {
            right: 0;
        }

    .sidebar-body {
        max-height: 100%;
        overflow: initial;
    }


    .main.sidebars {
        display: block;
        overflow: auto;
    }

    .step-wrapper {
        flex-direction: column;
    }

    .step-content:not(.active) {
        display: none;
    }

    .step-content {
        width: 100%;
    }

    .step-wrapper {
        overflow: auto;
    }

        .step-wrapper .step-header {
            border-bottom: 1px solid var(--border-color);
        }

    .step-header {
        padding: 15px;
    }

    .step-body {
        align-items: flex-start;
    }

    .step-content > .step-header > h5 {
        writing-mode: initial;
        transform: none;
    }

    .step-wrapper .step-content.active > .step-body {
        height: calc(100vh - var(--hauteur-menu)*3);
    }

    .sidebar-vehicules {
        min-height: auto;
        border-left: 0;
        border-bottom: 0;
        border-top: 1px solid;
        border-right: 1px solid;
        border-color: var(--border-color);
    }

    .mobile-wrapper {
        display: block;
        width: var(--hauteur-menu);
        height: var(--hauteur-menu);
        line-height: var(--hauteur-menu);
        text-align: center;
        border-right: 1px solid var(--border-color);
        color: var(--bleu-fonce);
    }

        .mobile-wrapper.active,
        .mobile-wrapper:hover {
            background-color: white;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
        }

        .mobile-wrapper > i {
            font-size: 32px;
        }

    /* .user-icon,
    .shortcut-icon {
        margin: 0 8px;
    }

    .user-info {
        min-width: 100px;
        max-width: 170px;
    } */
    .user-icon > span,
    .mega-wrapper,
    .logo {
        display: none;
    }

    .user-info {
        min-width: initial;
    }
}

/* SI LA LARGEUR DE L'ECRAN EST INFERIEURE Ã  992px */

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

    .desc-dmg {
        position: fixed;
        top: 30%;
        left: 20px;
        width: calc(100vw - 40px);
    }

        .desc-dmg.right {
            left: 20px;
        }

    .documents-wrapper,
    .documents-selected-wrapper {
        flex-direction: column;
    }

    .documents-categ-wrapper {
        width: 100%;
        border-radius: 0;
    }

    .documents-categ-wrapper,
    .documents-input-wrapper {
        min-height: 30vh;
        max-height: 50vh;
    }

    .documents-selected-wrapper > .listing-wrapper {
        width: 100%;
        padding: 35px 10px 10px 10px;
        border-top: 1px solid var(--color-light);
    }

    .document-item {
        min-width: calc(50% - 10px);
    }

        .document-item label i {
            font-size: 36px;
        }

        .document-item label {
            font-size: 10px;
        }

    .doc-list-item > i {
        font-size: 16px;
    }

    .documents-input-wrapper {
        border-left: 2px solid var(--color-light);
        border-top: none;
    }

    .frais-radio > label {
        padding: 6px 10px;
    }

    .estimation-details-wrapper {
        overflow: initial;
        max-height: 100%;
        padding-bottom: calc(var(--hauteur-menu) + 20px);
    }

    .estimation-chat-wrapper {
        max-height: 100%;
        position: fixed;
        width: 100%;
        bottom: calc(-100% + (var(--hauteur-menu)));
        background-color: white;
        border-bottom: 2px solid var(--border-color);
        z-index: 500;
        height: 100vh;
        transition: .5s;
    }

        .estimation-chat-wrapper.active {
            bottom: 0;
            z-index: 1000;
            height: calc(100vh - var(--hauteur-menu)*2);
        }

    .sidebar-chat {
        max-height: calc(100vh - var(--hauteur-menu)*3 - 300px);
        min-height: calc(100vh - var(--hauteur-menu)*3 - 300px);
    }

    .form-round {
        width: calc(100% - 110px);
    }

    .market-message-wrapper > .chat-wrapper {
        font-size: 12px;
        height: calc(100vh - 410px);
        min-height: 150px;
    }

    .market-wrapper .message-header {
        flex-direction: column;
        gap: 5px;
        align-items: start;
    }

    .message-next > button > small {
        display: none;
    }

    .table-marketplace-messages .messages-icones {
        position: absolute;
        top: 12px;
        left: 35px;
        display: block !important;
        background-color: transparent;
        box-shadow: none;
    }

    .table-marketplace-messages [class^="message-info"] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: inherit;
        padding: 0;
    }

    .table-marketplace-messages a {
        display: block;
    }

        .table-marketplace-messages a > div:last-of-type {
            position: absolute;
            top: 5px;
            right: 5px;
        }

    .table-marketplace-messages .message-info-veh {
        min-width: 100%;
        max-width: 100%;
    }

    .timeline-wrapper,
    .timeline-item,
    .timeline-stock-wrapper {
        flex-direction: column;
    }

    .timeline-stock-item {
        padding-bottom: 20px;
    }

        .timeline-stock-item::before {
            left: initial;
            top: 50%;
            width: 30px;
            height: 68px;
        }

    .timeline-stock-item-time {
        right: initial;
        left: 80%;
        top: 39px;
        background-color: #f6f8ff;
        padding: 0 10px 0 20px;
        padding-right: 20px;
        min-width: 120px;
        border-radius: 0 50px 50px 0;
        z-index: 3;
    }

    .timeline-stock-item-titre {
        right: calc(100% + 20px);
        min-width: 100px;
        text-align: right;
        top: 24%;
    }

    .timeline-stock-item.active .timeline-stock-item-titre {
        top: 12px;
    }

    .timeline-header {
        writing-mode: initial;
        transform: initial;
        border-radius: 15px 15px 5px 5px;
    }

    .timeline-item > .bg-white {
        left: 0;
    }

    .timeline-body {
        padding: 20px 0;
    }

    .search-wrapper {
        max-width: calc(100% - 103px);
    }

        .search-wrapper input {
            padding: 0;
            margin-left: 10px;
            margin-right: -10px;
        }

    .search-results {
        top: var(--hauteur-menu);
        position: fixed;
        width: 100%;
        left: 0;
        max-height: 72%;
        box-shadow: 0px 10px 12px 0px #0000001f;
        padding: 0;
    }

    .filter-text {
        display: none;
    }

    .sidebar-chat-footer .btn-chat-actions {
        padding-right: 0px;
        padding-left: 10px;
        border: 2px solid var(--bleu-fonce);
    }

        .sidebar-chat-footer .btn-chat-actions input[placeholder] {
            text-align: left;
        }

    .search-advanced-wrapper.active {
        width: calc(100% - 25px);
    }



    .step-content.active > .step-footer {
        width: 100%;
    }

    .estimation-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
    }

        .estimation-wrapper > * {
            width: auto;
        }

    [class^=estimation].large {
        flex-basis: 100%;
    }

    [class^=estimation].little {
        margin: 0 auto;
    }
}

/* SI LA HAUTEUR DE L'ECRAN EST INFERIEURE Ã  768px */

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

    #shortcut_wrapper {
        left: calc(var(--hauteur-menu)*-1);
    }

    .equipement-body {
        max-height: 100%;
        font-size: 12px;
    }

    .h-custom {
        height: auto;
    }

    .main,
    .pipeline-wrapper {
        width: 100%;
        transition: .5s;
    }

    .pipeline-wrapper {
        height: auto;
    }

    .grid-item[data-span="1"],
    .grid-placeholder[data-span="1"],
    .grid-item[data-span="2"],
    .grid-placeholder[data-span="2"],
    .grid-item[data-span="3"],
    .grid-placeholder[data-span="3"],
    .grid-item[data-span="4"],
    .grid-placeholder[data-span="4"],
    .grid-item[data-span="5"],
    .grid-placeholder[data-span="5"],
    .grid-item[data-span="6"],
    .grid-placeholder[data-span="6"] {
        grid-column-start: span 1;
        width: calc(100vw - 30px);
    }

    .drawer.half.active,
    .drawer.left.active {
        min-width: 100%;
        left: 0;
    }

    .user-informations {
        display: none;
    }

    .btn-add {
        position: fixed;
        right: 10px;
        bottom: 70px;
    }

        .btn-add:hover {
            bottom: 60px;
        }

    #scroll_top {
        bottom: 130px;
    }

    .stock-wrapper.grid {
        padding: 0.5rem;
        justify-content: center;
    }

        .stock-wrapper.grid > .stock-item {
            max-width: calc(100% - 15px);
        }

    .btn-contact-more-info {
        display: block;
        font-size: 18px;
        width: 40px;
        height: 40px;
        background-color: var(--bleu-fonce);
        border-radius: 50px;
        color: white;
    }

    .email-container {
        right: 1vw;
        max-width: 98vw;
        bottom: -605px;
        height: calc(98vh - var(--hauteur-menu));
    }

        .email-container.active {
            min-width: 98vw;
            right: 1vw;
            bottom: 1vh;
            max-width: 98vw;
            overflow: auto;
        }

    .email-footer {
        flex-wrap: wrap;
    }

        .email-footer button {
            margin-top: 0;
        }

    .ql-toolbar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
    }

        .ql-toolbar.ql-snow .ql-formats {
            margin-right: 0 !important;
        }

    .ql-container {
        max-width: 100% !important;
    }

    .tabs-timeline {
        padding-top: 8px;
        padding-left: 10px;
    }

    .tab-item-title,
    .reorder-item-title {
        max-width: 88%;
    }

    .table-listes-wrapper {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: auto;
        justify-content: flex-start;
        margin: 0;
        z-index: 500;
    }

    .table-listes-filtres {
        justify-content: center;
    }

    .table-search-wrapper {
        margin-bottom: 1rem;
        justify-content: center;
    }

    .table-wrapper-responsive {
        max-height: initial;
    }

    .table-filtres-wrapper {
        position: fixed;
        bottom: 20px;
        top: initial;
        right: 20px;
        width: calc(100vw - 40px);
        height: calc(100vh - var(--hauteur-menu)*2 - 40px);
    }

    .table-pagination-wrapper {
        flex-direction: column;
        margin-bottom: 70px;
    }

        .table-pagination-wrapper > *:first-of-type {
            position: relative;
            left: initial;
        }

    .filtres-checked {
        margin-top: 1rem;
    }

    .filtres-stock-mobile {
        position: fixed;
        bottom: calc(-100% + var(--hauteur-menu));
    }

        .filtres-stock-mobile.active {
            bottom: calc(var(--hauteur-menu)*-1);
        }

    .nav.nav-pills {
        justify-content: center;
        flex-wrap: wrap;
        height: auto;
    }

    .planning-header {
        padding: 1rem 0;
        position: relative;
    }

    .planning-header,
    .planning-filtres {
        flex-direction: column;
        height: auto;
    }

    .planning-col:first-of-type {
        position: relative;
    }

        .planning-col:first-of-type .planning-item:first-of-type,
        .planning-col .planning-item:first-of-type {
            position: initial;
        }
}

input[type="time"] {
    border: 2px solid var(--border-color);
    height: 40px;
    border-radius: 5px;
}

.list-square {
    list-style: none;
    margin: 0;
    padding: 1rem 1rem 0 1rem;
    display: grid;
    grid-template-columns: repeat(3, calc(33.33% - 10px));
    grid-gap: 1rem;
}

.list-square li {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: .5rem;
    display: grid;
    place-content: center;
    text-align: center;
}


.list-square-fluid label {
    display: grid;
    place-content: center;
    text-align: center;
    height: 100%;
}

.list-square-fluid label:hover {
    background-color: var(--color-light);
}

.list-square-fluid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.list-square-fluid li {
    min-width: 100px;
    flex-grow: 1;
    max-width: 160px;
}

.label-report,
.input-report {
    padding: .5rem .75rem;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    margin: 0 .2rem;
    cursor: pointer;
}

input:checked+.label-report {
    background-color: #2ddb8a;
    color: white;
}

.label-report:hover {
    background-color: var(--color-light);
}

.stars {
    display: flex;
    justify-content: center;
    align-items: center;
    color: mediumseagreen;
}
.stars i {
    color: inherit; /* Utilise la couleur définie pour .stars */
}

.separator {
    border-top: 2px dashed var(--border-color);
    width: 50%;
    display: block;
    margin: 51px auto;
    position: relative;
}

.separator span {
    background-color: white;
    position: absolute;
    text-align: center;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    padding: 0 1rem;
    color: var(--bleu-flash);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
}

.tout-selectionner-container {
    position: sticky;
    top: 47px;
    z-index: 1000;
    background: white;
    border-bottom: 2px solid var(--border-color);
}


.input-group-text-annexe {
    color: var(--bleu-fonce);
    font-weight: bold;
    border: none;
    background-color: transparent !important;
}

.input-group-annexe {
    display: flex;
    align-items: center;
    position: relative;
    width: max-content;
}

.form-control-annexe[type=file] {
    font-size: 14px;
}


.form-control-annexe[type=file]::file-selector-button {
    border: none;
    background: none;
    color: var(--bleu-fonce);
    cursor: pointer;
    display: flex;
    text-align: center;
    padding-left: 13px;


}


.container-fichier-annexe .form-control-annexe {
    cursor: pointer !important;
    border: none;
    background-color: transparent;
    padding-block: 0;

}

.container-fichier-annexe .form-control-annexe:hover {
    background-color: transparent;
}

.container-fichier-annexe {
    padding: 8px 20px;
    border: 2px dashed var(--bleu-flash);
    width: max-content;
    position: relative;

    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 5px;
    cursor: pointer;

}

.container-fichier-annexe:hover {
    border: 2px dashed var(--bleu-fonce);
}

.container-fichier-annexe i {
    color: var(--bleu-fonce);
}

.container-fichier-annexe a {
    font-size: 14px;
    border: none;
}

.container-fichier-annexe .reset-file-annexe {
    position: absolute !important;
    top: -25%;
    right: -10px;
    background-color: #F9896B;
    border: none;
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}





/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/********************************************************** FACEBOOK **********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/

.integrations-wrapper__item {
    padding: 2rem;
    border: 1px solid var(--border-color);
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
    border-radius: 5px;
}

div#modal_integration .integrations-wrapper__item {
    place-items: center;
    display: flex;
}

.integrations-wrapper__item > div {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
    justify-content: space-between;
    place-items: center;
}

div#modal_integration .integrations-wrapper__item > div {
    margin-bottom: 0rem;
}

.integrations-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem;
}

@media (max-width:992px) {
    .integrations-wrapper {
        grid-template-columns: repeat(1, 1fr);
        padding-left: 0;
        padding-right: 0;
    }
}

.integrations-wrapper__item img {
    margin-right: 10px;
}

.integrations-wrapper__item p {
    margin: 0;
}














/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/************************************************* FILTRES AVANCÉS GESTION STOCK **********************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/* ==========================================================================
  SOMMAIRE
  ==========================================================================
  1. Bouton rond principal (icône filtres)
  2. Compteur de filtres sélectionnés
  3. Header (retour + titre)
  4. Liste des filtres avancés
  5. Contenu des filtres avancés (affichage détail d'un filtre)
  6. Footer (bouton valider)
  7. animation slider
   ========================================================================== */


/* ==========================================================================
1. Bouton rond principal (icône filtres)
========================================================================== */
.filtres-avancer {
    height: 25px;
    width: 25px;
    background-color: var(--bleu-flash);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.filtres-avancer i {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ==========================================================================
2. Compteur de filtres sélectionnés
========================================================================== */
.numero-filtres-avancer {
    position: absolute;
    font-size: 9px;
    top: -6px;
    right: -5px;
    border-radius: 50%;
    z-index: -1;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}


/* ==========================================================================
3. Header (retour + titre)
========================================================================== */
.header-filtres-avancer {
    margin-bottom: 10px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    padding-inline: 1rem;
}

.header-filtres-avancer .retour-filtres-avancer {
    width: 30px;
    height: 30px;
    background-color: var(--bleu-flash);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
}

.header-filtres-avancer .titre-header {
    color: var(--bleu-fonce);
    font-weight: bold;
    font-size: 17px;
}


/* ==========================================================================
4. Liste des filtres avancés
========================================================================== */
#form_stock_filtres-avancer .filtres-liste-avancer {
    list-style: none;
    display: grid;
    padding-left: 0;
    padding-inline: 1rem;
    height: fit-content;
}

#form_stock_filtres-avancer .filtres-liste-avancer .filtres-item-avancer {
    padding: 10px;
    cursor: pointer;
    border-bottom: .5px solid var(--border-color);
    font-size: 14px;
    font-weight: 600;
    color: #001142;
    position: relative;

    display: grid;
    gap: 5px;
}

#form_stock_filtres-avancer .filtres-liste-avancer .filtres-item-avancer:hover {
    background-color: white;
}

#form_stock_filtres-avancer .filtres-liste-avancer .filtres-item-avancer::before {
    content: '➜';
    position: absolute;
    font-size: smaller;
    top: 50%;
    right: 10px;
    opacity: 0;
    transform: translateY(-50%) translateX(-10px);
    transition: all 0.3s ease-in-out;
    color: var(--bleu-fonce);
}

#form_stock_filtres-avancer .filtres-liste-avancer .filtres-item-avancer:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

#form_stock_filtres-avancer .container-filtre-ajouter {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding-right: 13px;
}

#form_stock_filtres-avancer .container-filtre-ajouter .filtre-ajouter {
    background-color: var(--bleu-flash);
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 10px;
    color: var(--bleu-fonce);

    display: flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

#form_stock_filtres-avancer .container-filtre-ajouter .filtre-ajouter i {
    height: 13px;
    width: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}

#form_stock_filtres-avancer .container-filtre-ajouter .filtre-ajouter i:hover {
    background-color: white;
    cursor: pointer;

}


/* ==========================================================================
5. Contenu des filtres avancés (affichage détail d'un filtre)
========================================================================== */
.container-content-filtres-item {
    /* display: grid; */
    gap: 5px;
    padding-inline: 1rem;

}

.header-content-filtre-item {
    border-radius: 5px;
    padding-inline: 10px;
    padding-block: 15px;
    display: grid;
    text-align: left;
    width: 100%;
    gap: 20px;
    color: var(--bleu-fonce);
    font-weight: 700;
    font-size: 15px;
}

.header-content-filtre-item span {
    padding-block: 5px;
    background-color: white;
    border-radius: 5px;
    color: black;
    text-align: center;
    font-size: 16px;
}

.container-content-filtres-item .form-check {
    padding-left: 2em;
}

.container-content-filtres-item .liste-item {
    padding-inline: 10px;
    font-weight: 600;
    color: #001142;
    font-size: 14px;
}


/* ==========================================================================
6. Footer (bouton valider)
========================================================================== */
.sidebar-filtres-avancer .footer-btn-stock {
    position: absolute;
    bottom: 0;
    width: 100%;
    right: 8px;
}

/* ==========================================================================
7. animation slider
========================================================================== */

.container-animation-slide-liste {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-bottom: 100px;
}

.filtres-liste-avancer,
.container-content-filtres-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

.filtres-liste-avancer {
    transform: translateX(0%);
    z-index: 2;
}

.container-content-filtres-item {
    transform: translateX(100%);
    z-index: 1;
}

.container-content-filtres-item.active {
    transform: translateX(0%);
    z-index: 2;
}

.filtres-liste-avancer.slide-left {
    transform: translateX(-100%);
    z-index: 1;
}





/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/********************************************************* DATAFLEET **********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
.data-columns.data-columns-parc {
    height: 60px;
}

.data-columns-labels-x.data-columns-parc .column-label-x:first-of-type {
    flex: initial;
}

.data-columns-labels-x.data-columns-parc .column-label-x::after {
    top: -8px;
}

.data-columns.data-columns-parc .column-wrapper {
    min-width: 40px;
}

.data-columns.data-columns-parc .column-bar {
    margin: 0 auto;
    width: 20px;
    border: 2px solid var(--bleu-fonce);
    border-bottom: none;
    color: var(--bleu-fonce);
    background-color: var(--bleu-flash);
}

.data-columns-labels-x.data-columns-parc .column-label-x:last-of-type::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 5px;
    background-color: var(--bleu-flash);
    top: -8px;
    right: 0px;
}

.data-columns-labels-x.data-columns-parc .data-columns-labels-x {
    padding-top: 2px;
}

.parc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1rem;
    column-gap: 1rem;
    padding: 1rem 1rem 0 1rem;
}

.parc-grid .grid-fw {
    grid-column-start: 1;
    grid-column-end: 5;
}

.parc-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1rem 0 1rem;
}

.parc-flex > div {
    flex: 1;
}
.parc-flex .bar-label {
    position: relative;
    bottom: 20px;
}
.parc-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    font-size: 10px;
    gap: .25rem;
    flex-wrap: wrap;
}

.parc-grid ul li {
    display: flex;
    align-items: center;
    padding: 0 5px;
    gap: 5px;
}


.triple-svg {
    display: flex;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    justify-content: center;
    background-color: var(--bleu-flash);
    color: var(--bleu-fonce);
}

.triple-svg>i {
    transform: scale(.5);
    position: relative;
}

.triple-svg>i:nth-child(2) {
    left: -2px;
    top: -1px;
}

.triple-svg>i:last-child {
    top: 3px;
    left: -15px;
}

.triple-svg>i:first-child {
    top: -5px;
    right: -12px;
}

.sidebar-parc {
    background-color: white;
    position: fixed;
    top: var(--hauteur-menu);
    width: calc(100% - (2*var(--sidebar-width) + var(--hauteur-menu)));
    height: calc(100% - var(--hauteur-menu));
    left: calc(-100% + 2*var(--sidebar-width));
    transition: .5s;
    visibility: hidden;
    z-index: 5;
}

.sidebar-parc.active {
    left: calc(2*var(--sidebar-width) + var(--hauteur-menu));
    visibility: visible;
}

.sidebar-parc.active .sidebar-body {
    max-height: calc(100% - 2*var(--hauteur-menu));
    overflow: auto;
}

@media screen and (max-width: 1199px) {
    .sidebar-parc {
        width: 100%;
        left: -100%;
        height: calc(100% - var(--hauteur-menu));
    }

    .sidebar-parc.active {
        top: var(--hauteur-menu);
        left: 0;
        z-index: 500;
    }

    .sidebar-parc.active .sidebar-body {
        max-height: calc(100% - (2*var(--hauteur-menu)));
    }

    .parc-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}