@import "quill.css";
@import "leads.css";
@import "idpneu.css";
@import "idcarmarket.css";
@import "idwelcome.css";
@import "uikit.css";
@import "pdf-reader.css";
@import "modal-news.css";
@import "annonce-creation.css";
@import "roadmap-creation.css";
@import "fiche-entreprise.css";
@import "datafleet.css";
@import "parametres-rgpd.css";
@import "agenda-vendeur.css";




@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: 500;
}

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

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


@font-face {
    font-family: "MB corpo A TitleCond";
    src: url("../fonts/mbcorpoatitlecond-regular.woff") format("woff"),
        url("../fonts/mbcorpoatitlecond-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "MB corpo S Title";
    src: url("../fonts/mbcorpostitle-regular.woff") format("woff"),
        url("../fonts/mbcorpostitle-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "MB corpo S Text CondRegular";
    src: url("../fonts/mbcorpostext-condregular.woff") format("woff"),
        url("../fonts/mbcorpostext-condregular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: "MB corpo S Title Light";
    src: url("../fonts/mbcorpostitle-light.woff") format("woff"),
        url("../fonts/mbcorpostitle-light.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "MB corpo S TitleCond Regular";
    src: url("../fonts/mbcorpostitle-condregular.woff") format("woff"),
        url("../fonts/mbcorpostitle-condregular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}





/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/************************************************************ TWEAKS **********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
:root {
    --bleu-fonce: #51459e;
    --orange-feu: #F9896B;
    --bleu-flash: #84E8F4;
    --color-grey: #c3c3c3;
    --beige: #ffac95;
    --color-light: #f6f8ff;
    --hauteur-menu: 60px;
    --border-color: #eceff7;
    --shadow-md: 0 .5rem 1rem rgb(0 0 0 / 10%);
    --sidebar-width: 343px;
    --planning-item: 210px;
    /* --categorie-voiture: #128a89;
    --categorie-vi: #6E7B8B;
    --categorie-moto: #9c0b59;
    --categorie-camping-car: #eb7519;
    --categorie-bateau: #005577;
    --categorie-vehicule-agricole: #A0522D; */
    /* --categorie-voiture: #2E3244;
    --categorie-vi: #949696;
    --categorie-moto: #C23028;
    --categorie-camping-car: #d35c28;
    --categorie-bateau: #005577;
    --categorie-vehicule-agricole:  #A0522D; */
    --categorie-voiture: #128a89;
    --categorie-vi: #6C757D;
    --categorie-moto: #9c0b59;
    --categorie-camping-car: #F77F00;
    --categorie-bateau: #0077B6;
    /* Bleu marin plus lumineux */
    --categorie-vehicule-agricole: #347936;
}

/* 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;
}

.rounded-4 {
    border-radius: .5rem;
}

.rounded-5 {
    border-radius: .8rem;
}


.bgcanard {
    background-color: #3EB7C6 !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: 100%;
    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;
}

.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;
}

.text-success {
    color: #2ddb8a !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-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-weight: 600;
    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;
}


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

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

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

.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;
}

.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;
}

select:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.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-weight: 600;
}

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

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

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

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

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

.logo {
    background: url(../svg/logo-idconnect-v2.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: 10;
    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(6),
.mega-item:hover:nth-child(7),
.mega-item:hover:nth-child(8),
.mega-item:hover:nth-child(9),
.mega-item:hover:nth-child(10) {
    background-color: var(--bleu-fonce);
}

.mega-item.sync-price:hover {
    background-color: var(--bleu-fonce);
}

.mega-item:hover:nth-child(4) {
    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 Bold';
    font-size: 14px;
    text-transform: uppercase;
}


.mega-item>.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);
}

.id-logo>.id-text {
    position: absolute;
    left: 30px;
    top: 20px;
    color: white;
    font-size: 10px;
}

.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;
}

.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 {
    -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);
    }
}

.notif {
    display: none;
    position: absolute;
    top: 3px;
    color: white;
    right: 0px;
    line-height: 15px;
    font-weight: 600;
    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;
}

.shortcut-wrapper.shortcut-localisation {
    overflow: visible;
}

.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-weight: 600;
}

.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;
}

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

.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;
}

h5,
h2 {
    font-family: "Rubik Medium", 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-weight: 600;
}

.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;
}

.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-quickactions {
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: .25rem .5rem;
    position: relative;
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
}

.btn-quickactions:hover {
    border: 1px solid var(--bleu-flash);
}

.btn-quickactions__input:checked+.btn-quickactions__body {
    display: block;
}

.btn-quickactions__input+.btn-quickactions__body {
    display: none;
}


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

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

.bgcsi {
    background-color: #0963EB;
    color: white !important;
}

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

.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;
}

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

.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% - 10px);
    right: calc(50% - 10px);
    background-color: #ffffff;
    font-size: 8px;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

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

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

.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-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;
}

.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;
    font-weight: 600;
    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: 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;
}

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

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

.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-weight: 600;
    color: var(--bleu-fonce);
}

.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 {
    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;
}

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

.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: 18px;
    top: 6Px;
}

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

.img-legend {
    position: absolute;
    left: 15px;
    top: 4px;
    font-size: 10px;
    background-color: white;
    color: var(--bleu-fonce);
    padding: 3px;
    border-radius: 5px;
    z-index: 5;
}

.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 {
    left: initial;
    right: 20px;
}

.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-weight: 600;
    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-weight: 600;
}

.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;
}

.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-weight: 600;
}

.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-weight: 600;
    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-weight: 600;
    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-weight: 600;
}

.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-weight: 600;
    cursor: pointer;
}

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

.email-preview-wrapper {
    padding: 1rem;
    max-height: 100px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    color: #666666;
    transition: .2s;
}

.email-preview-wrapper.active {
    max-height: 100%;
    overflow: initial;
    color: black;

}

.email-preview-wrapper:not(.active)::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    background: linear-gradient(180deg, transparent, white 60%);
}


.email-preview-wrapper:hover {
    color: black;
}


.email-container.active {
    bottom: 20px;
    max-width: 35vw;
    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;
}

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

.controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: .5rem;
}

.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;
}

.form-check-label {
    font-weight: 600;
    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;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
}

.grid-filtres {
    padding: 5px 15px 5px 5px;
    display: flex;
    align-items: center;
}

.grid-filtres .custom-select {
    text-transform: initial;
}

.grid-layout {
    padding: 5px 5px 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%;
}

.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,
.gestion-etape-pipeline td,
.gestion-etape-pipeline tr {
    display: flex;
    flex: 1;
}

.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: 15px;
    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 {
    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 5px;
    font-size: 10px;
    font-weight: 600;
    position: relative;
    bottom: 2px;
    text-align: center;
    min-width: 82px;
    max-width: 82px;
    display: inline-block;
    height: 18px;
    color: black;
    letter-spacing: .5px;
    line-height: 14px;
}

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

.immat::after {
    content: '67';
    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-sans-tva tr {
    border-left: 2px solid var(--bleu-flash);
}

tbody.ligne-sans-tva tr td:nth-child(4n),
tbody.ligne-remise 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-sans-tva tr,
tbody.ligne-remise tr {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.custom-select--localisation {
    min-width: 300px;
    max-width: 350px;
}

.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: calc(100% - 2px);
    max-height: 340px;
    overflow: auto;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    background-color: white;
    z-index: 500;
    left: 0;
    width: 100%;
    box-shadow: 0px 15px 10px 5px #0000000d;
}

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

.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 {
    background-color: var(--color-light);
}

.custom-select-body label,
.custom-select-tabs {
    font-size: 14px;
    font-weight: 600;
    line-height: 43px;
}

.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;
}

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

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

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

.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: 8px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bleu-fonce);
    top: -6px;
    left: 6px;
    border-radius: 5px;
    height: 12px;
    line-height: 12px;
}

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

.input-custom input[type=text]:focus,
.input-custom input[type=email]:focus,
.input-custom input[type=phone]:focus,
.input-custom input[type=password]:focus,
.input-custom input[type=number]:focus,
.input-custom input[type=file]:focus,
.input-custom input[type=date]:focus,
.input-custom input[type=datetime-local]: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=email],
.input-custom input[type=phone],
.input-custom input[type=password],
.input-custom input[type=number],
.input-custom input[type=file],
.input-custom input[type=date],
.input-custom input[type=datetime-local],
.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;
    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 select:disabled,
.input-custom textarea:disabled {
    color: var(--bleu-fonce);
    background-color: var(--color-light);
}

.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 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 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 40px !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,
.modal-footer {
    background-color: var(--color-light);
    height: var(--hauteur-menu);
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.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 - 85px);
    min-height: calc(100vh - var(--hauteur-menu)*2 - 85px);
    border-bottom: 1px solid var(--border-color);
}

.sidebar-filtres-stock {
    min-height: calc(100vh - var(--hauteur-menu)*2);
    max-height: calc(100vh - var(--hauteur-menu)*2);
}


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

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

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

    scrollbar-width: none;


    &::-webkit-scrollbar {
        display: none;
    }
}

.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;
    max-height: 100%;
}

.btn-filtres {
    position: relative;
}

.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-weight: 600;
}

.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-weight: 600;
}

.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-weight: 600;
}

.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-weight: 600;
    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-weight: 600;
    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] {
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: contain;
}

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

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

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

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

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

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

.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-weight: 600;
}

.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);
}

.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-weight: 600;
    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;
}

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

.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);
}

.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-weight: 600;
    text-transform: uppercase;
    line-height: 46px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-color);
}

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

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

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

.task-progress-wrapper {
    padding: 1rem;
    background-color: white;
    border-bottom: 1px solid var(--border-color);
}

.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);
}

.task-progress__count {
    min-width: 250px;
}

/******************************************************/
/******************************************************/
/*********************** 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-right: 40px;
}

.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";
}

.table-listes-item__progressbar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: #fdfdff;
    border-top: 1px solid var(--border-color);
}

.table-listes-item__progressbar-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #20c993;
    height: 100%;
}

.custom-dropdown {
    position: absolute;
    min-width: 200px;
    background-color: white;
    color: black;
    font-weight: 600;
    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-weight: 600;
}

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

/* 
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bleu-fonce) !important;
    color: white;
} */

.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-weight: 600;
    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-weight: 600;
    background-color: var(--bleu-flash);
    color: var(--bleu-fonce);
    border-radius: 50px;
    width: 28px;
}

.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-weight: 600;
}

.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.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,
.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-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;
    min-width: 100px;
}

.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 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 {
    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;
}

.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);
}

.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 th,
.table-custom-dynamique td {
    flex: 340 0 auto;
    width: 340px;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.table-console-publication th {
    display: grid;
    place-content: center;
    border-bottom: 1px solid var(--border-color);
    justify-content: stretch;
}

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

}

/* .table-console-publication th:last-of-type,
.table-console-publication td:last-of-type {
    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: 600 0 auto;
    width: 600px;
    max-width: 600px;
}

.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);
}

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


.button-edit-intable {
    color: var(--bleu-flash);
    position: absolute;
    right: 5px;
    font-size: 16px;
    width: 25px;
    height: 25px;
    border-radius: 50px;
    line-height: 25px;
    text-align: center;
    top: 5px;
}

.button-edit-intable:hover {
    color: var(--bleu-fonce);

    cursor: pointer;
}

.row-edit-intable {
    position: absolute;
    left: 0;
    z-index: 50;
    top: 35px;
    background-color: white;
    box-shadow: 0 5px 5px #00000030;
    padding: 15px;
    border-radius: 5px;
    width: inherit;
    white-space: initial;
    line-height: initial;
    min-width: 300px;
}


/******************************************************/
/******************************************************/
/*************** CONSOLE DE PUBLICATION ***************/
/******************************************************/
/******************************************************/
.console-item {
    display: flex;
    align-items: center;
}

.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;
}

.table-console-publication .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-weight: 600;
    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-vehicule-btn-delete:checked {
    background-color: var(--bleu-flash) !important;
    border-color: var(--bleu-flash) !important;
}

.item-contact.item-contact-mobile {
    padding-block: .25rem;
}

.titre-categorie {
    font-weight: bold;
    font-size: 13px;
    background-color: var(--color-light);
    display: block;
    padding: 5px;
    color: var(--bleu-fonce);
}

.titre-sous-categorie {
    padding: 3px;
    padding-left: 10px;
    font-size: 12px;
    background-color: var(--color-light);
    font-weight: 100;
    display: block;
}

.card-contact-individu .statut-contact {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 10px;
}

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

.contact-quickmenu {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    color: black;
    margin-left: 15px;
    max-width: calc(100% - 60px);
    position: relative;
}

.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: 10px;
    right: 10px;
    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;
}

.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-individu .header-encart-individu {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    width: 100%;
    margin-top: 5px;
}

.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;
    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;
}

.btn-round.btn-xs {
    min-height: initial;
    min-width: initial;
    padding: .25rem .5rem;
    font-weight: inherit;
}

.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;
}

.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);
}

.nav-onglet:hover {
    color: var(--bleu-fonce);
}

.nav-onglet.active {
    color: var(--bleu-fonce);
    opacity: 1;
    font-weight: 600;
}

.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;
}


.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-weight: 600;
}


.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: 2px 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: -12px;
    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-weight: 600;
    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-view {
    display: block;
}

.check-task {
    background-color: white;
    width: 25px;
    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>button,
.tab-item-edit,
.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-edit,
.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-weight: 600;
}

.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-view:hover,
.tab-item-title>button:hover {
    background-color: #f6f8ff;
    cursor: pointer;
    color: black;
}

.tab-item-localisation {
    font-weight: 600;
    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 {
    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 {
    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 {
    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 {
    left: calc(var(--sidebar-width) + var(--hauteur-menu));
}

.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 {
    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)*1 - 1px);
    min-height: calc(100vh - var(--hauteur-menu)*1 - 1px);
    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-weight: 600;
    color: var(--bleu-fonce);
    background-color: white;
    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-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;
}

.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 {
    padding-top: none;
    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-weight: 600;
    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;
    align-content: stretch;
    justify-content: space-between;
}

.legend {
    padding: 5px 15px;
    border-radius: 10px;
    margin-bottom: 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: 290px;
    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: 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-weight: 600;
    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-weight: 600;
    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-weight: 600;
}

.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 *********************/
/******************************************************/
/******************************************************/
.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-weight: 600;
    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);
} */

.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;
}

.filtres-wrapper > button {
    color: var(--bs-gray-500);
  } */

.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-weight: 600;
}

.sidebar .dropdown-header {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    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-weight: 600;
}
 .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);
}

.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);
}

.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-around;
    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 ************/
.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 {
    position: absolute;
    z-index: 100;
    padding: 5px 10px 6px 8px;
    border-radius: 0 0 20px;
    left: 0;
    top: 0;
    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;
}

.liste-info-veh li span {
    min-width: 150px;
    display: inline-block;
}

.stock-tag {
    position: absolute;
    top: 30px;
    left: 0;
    background-color: var(--bleu-fonce);
    padding: 5px 8px 5px 8px;
    border-radius: 0 20px 20px 0;
    font-size: 12px;
    z-index: 50;
    color: white;
}

.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-weight: 600;
    border-radius: 0 0 10px 10px;
}

.stock-veh-mm {
    padding: 10px;
    color: var(--bleu-fonce);
    position: relative;
}

.stock-veh-prix {
    color: var(--bleu-fonce);
    font-size: 24px;
    text-align: end;
}

.stock-veh-number {
    display: block;
    font-size: 10px;
    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-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-weight: 600;
    padding-top: 10px;
}

.stock-veh-infos {
    display: flex;
    flex-direction: column;
}

.stock-veh-desc {
    padding: 10px;
    color: var(--bleu-fonce);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.stock-veh-desc i {
    color: var(--orange-feu);
    display: inline-block;
}

.icon-desc b {
    font-size: 12px;
    padding-left: 5px;
}

.table-checklist .btn-edit-checklist {
    visibility: hidden;
    opacity: 0;
    font-size: 14px;
    color: var(--bleu-flash);
}

.table-checklist .ligne-title,
.table-checklist .section-title,
.table-checklist .comment-title {
    padding: 5px 0;
}

.table-checklist .ligne-title[contenteditable="true"],
.table-checklist .section-title[contenteditable="true"],
.table-checklist .comment-title[contenteditable="true"] {
    border-bottom: 2px solid var(--bleu-flash);
}


.table-checklist td:hover .btn-edit-checklist,
.table-checklist h6:hover .btn-edit-checklist {
    visibility: visible;
    opacity: 1;
}

.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;
    min-width: 200px;
    width: 200px;
    border-right: 1px solid var(--border-color);
}

.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-weight: 600;
}

.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-weight: 600;
}

.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: 10px;
    padding: 0 5px;
    width: 50%;
}

.table-stock-responsive .stock-vehicule-infos>div i {
    font-size: 18px;
    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: 0 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-weight: 600;
}

.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: 13px;
}

.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%;
}

/******************************************************/
/******************************************************/
/****************** 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;
}

.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);
    transition: .5s;
}

.estimation-chat-wrapper.collapsed {
    flex: 0;
}

.estimation-details-wrapper .btn-chat-toggle {
    width: var(--hauteur-menu);
    height: var(--hauteur-menu);
    background-color: var(--color-light);
    line-height: var(--hauteur-menu);
    font-size: 24px;
}

.estimation-details-wrapper,
.estimation-chat-wrapper {
    overflow: auto;
    max-height: calc(100vh - ((var(--hauteur-menu) * 2)) - 8px);
}

.estimation-details-wrapper {
    flex: 2;
}

.list-valeur-idconnect {
    margin: 2rem 0 0 0;
    padding: 0;
    column-count: 2;
}

.list-valeur-idconnect>li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

.range-stats {
    display: flex;
    flex-direction: row;
    gap: 1px;
    align-items: center;
    min-width: 250px;
    justify-content: center;
    padding-top: 20px;
}

.range-stats__step {
    width: 100%;
    height: 10px;
    position: relative;
    display: grid;
    place-content: center;
}

.range-stats__step>div {
    position: relative;
    top: -25px;
    font-size: 16px;
    padding: 0 .5rem;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0.325rem 0.5rem rgba(0, 0, 0, .075)
}

.range-stats__step>div::after {
    content: '';
    position: absolute;
    bottom: -15px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-top: 10px solid white;
    left: 50%;
    transform: translateX(-50%);
}

.range-stats__step:nth-of-type(3),
.range-stats__step.reverse:nth-of-type(3) {
    border-radius: 0 5px 5px 0;
}

.range-stats__step.reverse:nth-of-type(1),
.range-stats__step:nth-of-type(1) {
    border-radius: 5px 0 0 5px;
    color: green;
}

/* 
.range-stats__step:nth-of-type(1),
.range-stats__step.reverse:nth-of-type(5) {
    background-color: var(--orange-feu);
}

.range-stats__step:nth-of-type(2),
.range-stats__step.reverse:nth-of-type(4) {
    background-color: #ffa48b;
} */

.range-stats__step:nth-of-type(3),
.range-stats__step.reverse:nth-of-type(3) {
    /* background-color: #84E8F4; */
    color: var(--bleu-fonce);
}

/* 
.range-stats__step:nth-of-type(4),
.range-stats__step.reverse:nth-of-type(2) {
    background-color: #24c57a;
}

.range-stats__step:nth-of-type(5),
.range-stats__step.reverse:nth-of-type(1) {
    background-color: green;
} */



.sidebar-chat-footer {
    position: relative;
    margin: 1rem;
}

.sidebar-chat-footer textarea {
    resize: none;
    padding: 1px 235px 2px 10px;
}

.sidebar-chat-footer .btn-chat-actions,
.sidebar-chat-footer .btn-chat-send {
    position: absolute;
    top: 0;
    z-index: 50;
    height: 45px;
}

.sidebar-chat-footer .btn-chat-actions {
    right: 43px;
    padding-right: 40px;
    padding-left: 10px;
    border: 2px solid var(--bleu-fonce);
    border-radius: 50px;
}

.sidebar-chat-footer .btn-chat-actions input {
    width: 140px;
}

.sidebar-chat-footer .btn-chat-actions input[placeholder] {
    text-align: center;
}

.sidebar-chat-footer .btn-chat-send {
    right: 0;
    padding: 0 40px;
}

/* MODAL CREATION ESTIMATION */

.step-wrapper {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: calc(100vh - 6rem - var(--hauteur-menu));
}

.step-wrapper .step-content.active {
    width: 100%;
    height: 100%;
}

.step-wrapper .step-content.active>.step-body {
    height: 100%;
}

.step-wrapper .step-header {
    border-bottom: 1px solid;
    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);
}

.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;
}



/******************* EXPERTISE *************************/

#tabs_expertise .frais-svg,
#creation_expertise .frais-svg {
    max-width: 33vw;
    margin: auto;
}

.expertise-controle-reponses {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.expertise-controle-reponses span {
    flex: 10;
    text-align: center;
}





/******************************************************/
/******************************************************/
/******************* 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;
}


/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/****************************************************** 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;
    }

    /* 
    .content,
    .content.mid {
        width: 100%;
        padding-bottom: var(--hauteur-menu);
        left: 0;
    }

    .sidebar.right {
        transform: translateX(100%);
        top: var(--hauteur-menu);
    }

    .sidebar.right.active {
        transform: translateX(0);
    }

    .sidebar {
        position: fixed;
        width: calc(100% - var(--hauteur-menu));
        left: 0;
        bottom: calc(-100% + (var(--hauteur-menu)*2));
        top: calc(100% - var(--hauteur-menu));
        padding-top: 0;
    }

    .sidebar.active {
        top: var(--hauteur-menu);
        height: calc(100% - var(--hauteur-menu));
        overflow: auto;
    }

    .sidebar-body {
        box-shadow: inset 0px -5px 5px -5px rgb(0 0 0 / 8%);
        overflow: initial;
        margin-bottom: 5px;
    } */
}

@media screen and (max-width: 1199px) {

    .index-grid {
        grid-template-columns: 1fr;
        grid-gap: 2rem 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) - 4rem);
    }

    .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 {
        width: 100%;
    }

    .step-wrapper {
        padding: 0 0 10px 0;
        margin-top: 75px;
        height: calc(100vh - 75px);
    }

    .step-wrapper .step-header {
        border-radius: 0 0 10px 10px;
    }

    .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 - 364px);
    }

    .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) {


    .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;
    }

    .desc-dmg {
        position: fixed;
        top: 30%;
        left: 20px;
        width: calc(100vw - 40px);
    }

    .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 {
        flex-direction: column;
    }

    .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-advanced-wrapper.active {
        width: calc(100% - 25px);
    }

    .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);
    }

    .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 - 10px - 4rem);
    }

    .drawer.half.active,
    .drawer.left.active {
        min-width: 100%;
        left: 0;
    }

    .user-informations {
        display: none;
    }

    .btn-add {
        position: fixed;
        right: 30px;
        bottom: 60px;
    }

    .btn-add:hover {
        bottom: 60px;
    }

    #scroll_top {
        bottom: 130px;
    }

    .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;
    }

    .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) - 40px);
    }

    .table-pagination-wrapper {
        flex-direction: column;
    }

    .table-pagination-wrapper>*:first-of-type {
        position: relative;
        left: initial;
    }

    .filtres-checked {
        margin-top: 1rem;
    }

    .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;
    }
}





/******************************************************/
/******************************************************/
/********************** CUSTOM SELECT SIMPLE *********************/
/******************************************************/
/******************************************************/


.custom-select-simple {
    position: relative;
    width: 100%;
    margin: 10px 0;
}


.custom-select-simple .select-button {
    display: flex;
    align-items: center;
    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;
    padding: 10px;
    max-height: 45px;
    min-width: 70px;
    height: 45px;
    cursor: pointer;
}

.custom-select-simple .select-button:hover {
    border-color: var(--bs-gray-400);
}

.custom-select-simple .select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    border-radius: 5px;
    box-shadow: 0px 15px 10px 5px #0000000d;
}

.custom-select-simple input[type=text] {
    padding: 8px;
    outline: none;
    box-sizing: border-box;
    border: none;
    width: 100%;
    font-size: 14px;
}

.custom-select-simple input[type=text]:focus {
    border: none !important;
}

.custom-select-simple .select-option {
    padding: 10px;
    cursor: pointer;
    border-top: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: 'Rubik Medium', sans-serif;
    line-height: 25px;
}


.custom-select-simple .select-option:hover {
    background-color: var(--color-light);
}


.custom-select-simple .select-option.selected {
    background-color: var(--bleu-fonce);
    color: white;
}

.custom-select-simple.open .select-dropdown {
    display: block;
}

.custom-select-simple .select-arrow {
    transition: transform 0.2s;
}

.custom-select-simple.open .select-arrow {
    transform: rotate(180deg);
}

.custom-select-simple .select-text {
    flex: 1;
    text-align: left;
}



.custom-select-simple.portal-mode .select-dropdown {
    position: fixed !important;
    z-index: 9999 !important;
}



/* ---------------- VI ACTIVE ----------------- */

.table-list-vehicule.active.vi {
    background-color: var(--categorie-vi);
    color: white;
}

.table-list-vehicule.active.vi .nbr-vehicule {
    color: white;
}


/* ---------------- BATEAUX ACTIVE ----------------- */

.table-list-vehicule.active.bateaux {
    background-color: var(--categorie-bateau);
    color: white;
}

.table-list-vehicule.active.bateaux .nbr-vehicule {
    color: white;
}

/* ---------------- VOITURES ACTIVE ----------------- */

.table-list-vehicule.active.voitures {
    background-color: var(--categorie-voiture);
    color: white;
}

.table-list-vehicule.active.voitures .nbr-vehicule {
    color: white;
}


/* ---------------- MOTOS ACTIVE ----------------- */


.table-list-vehicule.active.motos {
    background-color: var(--categorie-moto);
    color: white;
}

.table-list-vehicule.active.motos .nbr-vehicule {
    color: white;
}

/* ---------------- CAMPING CARS ACTIVE ----------------- */


.table-list-vehicule.active.camping-cars {
    background-color: var(--categorie-camping-car);
    color: white;
}

.table-list-vehicule.active.camping-cars .nbr-vehicule {
    color: white;
}

/* ---------------- CAMPING CARS VEHICULE AGRICOLE ----------------- */


.table-list-vehicule.active.vehicules-agricoles {
    background-color: var(--categorie-vehicule-agricole);
    color: white;
}

.table-list-vehicule.active.vehicules-agricoles .nbr-vehicule {
    color: white;
}