@import url(datatable.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: 600;
}

/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/************************************************************ TWEAKS **********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
:root {
    --hauteur-menu: 60px;
    --bleu-fonce: #51459e;
    --orange-feu: #F9896B;
    --bleu-flash: #84E8F4;
    --color-grey: #c3c3c3;
    --color-light: #f6f8ff;
    --border-color: #eceff7;
    --color-success: #20c993;
}

[placeholder] {
    text-overflow: ellipsis;
    font-size: 14px;
}

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

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

::-moz-placeholder {
    /* Firefox 19+ */
    text-overflow: ellipsis;
    font-size: 14px;
}

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

:-moz-placeholder {
    /* Firefox 18- */
    text-overflow: ellipsis;
    font-size: 14px;
}

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

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

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

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

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


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

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

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

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

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

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

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

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

.border-top {
    border-color: var(--border-color) !important;
}

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

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

a,
a:hover {
    color: initial;
    text-decoration: none;
}

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

.border-bottom {
    border-bottom: 2px solid #f6f8ff !important;
}

.form-check-input:checked {
    background-color: #20c993;
    border-color: #20c993;
}
.toast {
    top: calc(var(--hauteur-menu) + 5px);
    right: 20px;
}
.tooltip {
    font-family: "Rubik Regular";
}

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

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

.fake-input {
    display: flex;
    justify-content: space-between;
}

.fake-textarea {
    border: 2px solid var(--border-color);
    padding: 5px;
    border-radius: 4px;
    min-width: 100%;
    min-height: 110px;
    margin-bottom: -20px;
}

    .fake-textarea div {
        display: inline;
    }

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

    .input-custom select,
    .input-custom input[type=email],
    .input-custom input[type=text],
    .input-custom input[type=password],
    .input-custom input[type=number],
    .input-custom input[type=date],
    .input-custom input[type=datetime-local],
    .input-custom textarea,
    .input-button,
    .fake-input {
        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=email]:focus,
        .input-custom input[type=text]:focus,
        .input-custom input[type=password]:focus,
        .input-custom input[type=number]:focus,
        .input-custom input[type=date]:focus,
        .input-custom input[type=datetime-local]:focus,
        .input-custom 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,
    .input-custom .fake-input {
        padding: 10px;
    }

    .input-custom input[type=email],
    .input-custom input[type=text],
    .input-custom input[type=password],
    .input-custom input[type=number],
    .input-custom input[type=date],
    .input-custom input[type=datetime-local],
    .input-custom 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=email]:disabled,
.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);
    cursor: default;
}

.input-custom input[type=email]:read-only.readonly,
.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=email]:read-only.readonly:hover,
    .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;
    }

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

body {
    font-family: "Rubik Regular", serif;
    position: relative;
}

.btn-icon {
    border: 2px solid #eceff7;
    background: transparent;
    border-radius: 5px;
}

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

    .btn-brace {
        background-color: white;
    }
.btn-brace.active {
    background-color: var(--color-light);
}

.btn-round {
    border-radius: 50px;
    padding: .5rem 1.5rem;
    border: none;
    position: relative;
    transition: .1s;
    bottom: 0px;
    display: inline-block;
}

    .btn-round.helper {
        background-color: #f6f8ff;
        color: #5b4fa6;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        padding: 0;
    }

    .btn-round:hover {
        bottom: 5px;
        box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
    }

    .btn-round.orange {
        background-color: #F97171;
        color: white;
    }

    .btn-round.vert,
    .bg-success {
        background-color: #20c993 !important;
        color: white;
    }

        .bg-success:hover {
            color: white;
        }

.bg-blue {
    background-color: #5B4FA3;
    color: white;
}

.bg-light {
    background-color: #f6f8ff !important;
}

.btn-filtres {
    padding: 10px;
    font-weight: 600;
    color: black;
    background-color: #F6F8FF;
}

    .btn-filtres:first-of-type,
    .btn-filtres.active:first-of-type,
    .btn-filtres.active:first-of-type:hover {
        border-radius: 50px 0 0 50px;
        padding: 10px 10px 10px 20px;
    }

    .btn-filtres:last-of-type,
    .btn-filtres.active:last-of-type,
    .btn-filtres.active:last-of-type:hover {
        border-radius: 0 50px 50px 0;
        padding: 10px 20px 10px 10px;
    }

    .btn-filtres:hover {
        cursor: pointer;
    }

    .btn-filtres.active,
    .btn-filtres.active:hover {
        padding: 10px;
        background-color: #20c993;
        color: white;
    }

.btn-violet,
.btn-violet:hover {
    color: #fff !important;
    background-color: #5b4fa3;
    border-color: #5b4fa3;
}

.choix-marques {
    max-height: 330px;
    overflow: auto;
}

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


.datepicker-inputs.active {
    right: 0;
    transition: .5s;
    padding: 10px;
    width: 100%;
}

.datepicker-inputs {
    position: absolute;
    right: -100%;
    top: 0;
    transition: .5s;
}

.dropdown-menu {
    overflow: hidden;
    border: 2px solid #eceff7;
    font-size: 14px;
    min-width: 275px;
    box-shadow: 0 5px 5px 0 #0000000d;
}

.petit-bouton-vert {
    border-radius: 50px;
    padding: 10px 14px;
    border: none;
    position: relative;
    transition: .1s;
    bottom: 0px;
    display: inline-block;
    background-color: #20c993 !important;
    color: white;
}

.filtres-scenario {
    right: 100%;
    transition: .5s;
    position: relative;
}

    .filtres-scenario.active {
        right: 0;
        transition: .5s;
        width: 100%;
    }

.form-round {
    border: none;
    padding: 10px 10px 10px 15px;
    border-radius: 50px 0 0 50px;
    background-color: #f6f8ff;
}

.form-check-label {
    font-weight: 600;
    color: #001142;
}

.form-control:focus {
    border-bottom: 2Px solid #20c993;
    border-radius: 0;
}

.form-control.table-input {
    padding-left: 0;
    border: 1px solid transparent;
}

    .form-control.table-input:read-only {
        background-color: transparent;
    }

        .form-control.table-input:read-only:hover,
        .form-control.table-input:read-only:focus {
            background-color: #f6f8ff;
            cursor: text;
        }

.modal-xxl {
    max-width: 1400px;
}

.loader {
    opacity: 0;
    display: none;
    visibility: hidden;
}

    .loader.tada {
        display: flex;
        visibility: visible;
        opacity: 1;
        position: fixed;
        width: calc(100vw - 280px);
        left: 280px;
        top: 0;
        background-color: rgba(255, 255, 255, .6);
        z-index: 1001;
    }

select.table-input {
    padding: 5px 0;
    display: block;
    width: 100%;
}

    select.table-input:disabled {
        border: none;
        color: black;
    }

        select.table-input:disabled:hover {
            background-color: #f6f8ff;
            cursor: pointer;
        }

.handle {
    font-size: 24px;
    padding: 0 10px;
    cursor: all-scroll;
    opacity: .5;
}

    .handle:hover {
        opacity: 1;
    }

h3 {
    font-weight: 500;
    color: #5B4FA3;
    font-family: "Rubik Medium", serif;
}

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

    .link::after {
        content: '';
        width: 100%;
        height: 3px;
        background-color: #5b4fa3;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: .1s;
    }

    .link:hover::after {
        height: 5px;
        transition: .1s;
    }

.logo {
    max-width: 150px;
}

.logo-svg {
    background-image: url(/img//logo-id-welcome.svg);
    height: var(--hauteur-menu);
    width: var(--hauteur-menu);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

    .logo-svg:hover {
        background-image: url(/img/logo-id-welcome-hover.svg);
    }

.modal-header, .modal-footer, .donnees {
    background-color: #F6F8FF
}


.monospace {
    font-family: 'Courier New', Courier, monospace;
}

.icon-group {
    padding: 0 25px 0 10px;
    min-width: 161px;
}

    .icon-group > .bi-cloud,
    .icon-group > .bi-cloud-slash {
        border: 1px solid #e2e5ef;
        border-radius: 5px;
        color: #20c993;
        font-size: 20px;
        width: 35px;
        height: 35px;
        display: inline-block;
        text-align: center;
        line-height: 35px;
    }

.listing {
    padding-top: 15px;
    padding-left: 0;
}

.list-item {
    display: flex;
    background-color: #f6f8ff;
    padding: 15px 20px 15px 0;
    border-radius: 5px;
    align-items: center;
    border: 1px solid #ceecff;
    margin-bottom: 15px;
}

.disabled {
    opacity: .6;
}

.list-item > .titre {
    flex: 1;
    flex-direction: column;
    display: flex;
}

    .list-item > .titre > span {
        font-size: 10px;
        text-transform: uppercase;
        color: #20c993;
        font-weight: 900;
        letter-spacing: .5px;
    }


.list-scenario {
    min-height: 500px;
    border-left: 2px solid #f6f8ff;
}


#main {
    width: calc(100% - 280px);
    margin-left: 280px;
    padding: 3rem;
}

.mininav {
    padding-bottom: 15px;
    border-bottom: 2px solid #f6f8ff;
    display: flex;
    align-items: center;
}

    .mininav > .form-check {
        background-color: #f6f8ff;
        padding: 3px 0px 7px 32px;
        margin-right: 20px;
        border-radius: 5px;
    }

.progress {
    height: .4rem;
}

.spinner {
    height: 100%;
    padding: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .spinner .spinner-grow {
        height: 200px;
        width: 200px;
    }

.scan-media {
    height: 35px;
    display: inline-block;
    border: 1px solid #e2e5ef;
    line-height: 35px;
    color: #5b4fa3;
    font-size: 20px;
    border-radius: 5px;
    padding: 0 10px;
}

.search-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .search-wrapper > i {
        color: #d1daf3;
        background-color: #f6f8ff;
        border-radius: 0 50px 50px 0;
        padding: 8.5px 15px 8.5px 10px;
    }

    .search-wrapper > .form-round {
        flex: 1;
    }

.row-tags {
    position: absolute;
    z-index: 100;
    background-color: white;
    top: 0;
    left: 47px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.tags {
    border: 2px solid #eceff7;
    background-color: transparent;
    text-align: left;
    padding: 2.5px 10px;
    cursor: pointer;
}

    .tags:hover {
        background-color: #f6f8ff;
    }

    .tags:first-of-type {
        border-left: 2px solid #eceff7;
    }

    .tags > span {
        flex: 1;
        padding: 5px 10px;
    }

        .tags > span:last-of-type {
            border-left: 1px solid var(--border-color);
            padding-left: 10px;
        }

        .tags > span:first-of-type {
            border-right: 1px solid var(--border-color);
            padding-left: 10px;
        }

.table-header {
    background-color: #f6f8ff;
    border-left: 2px solid #f0f2f9;
    border-right: 2px solid #f0f2f9;
    border-top: 2px solid #f0f2f9;
    padding: 0 5px;
}

#table_users {
    border: 2px solid #f0f2f9;
    border-radius: 5px;
    font-size: 14px;
}

    #table_users th {
        background-color: #f6f8ff;
    }

    #table_users tbody tr {
        border-bottom: 2px solid #f0f2f9;
        vertical-align: middle;
    }

        #table_users tbody tr:last-of-type {
            border-bottom: none;
        }

table[id^='table'] {
    border: 2px solid #f0f2f9;
    border-radius: 5px;
    font-size: 14px;
}

    table[id^='table'] th {
        background-color: #f6f8ff;
    }

    table[id^='table'] tbody tr {
        border-bottom: 2px solid #f0f2f9;
        vertical-align: middle;
    }

        table[id^='table'] tbody tr:last-of-type {
            border-bottom: none;
        }

.text-success {
    color: #20c993 !important;
}

.text-light {
    color: #dbd5ff !important;
}

.ui-datepicker {
    z-index: 1000 !important;
}

    .ui-datepicker .ui-state-highlight {
        margin-bottom: inherit;
        height: initial;
        border-radius: 0;
    }

.ui-state-highlight {
    background-color: transparent;
    height: 71px;
    border-radius: 5px;
    align-items: center;
    border: 1px solid #ceecff;
    margin-bottom: 15px;
}

.ui-sortable-helper {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.nav-tabs .nav-link {
    border: none;
    color: black;
    font-weight: 600;
}
.nav-link.active {
    color: black !important;
    border: none;
    border-bottom: 3px solid var(--bleu-fonce) !important;
}

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

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

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

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

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

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

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

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

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

.select-body {
    background-color: white;
    color: #7987a5;
    position: relative;
}

    .select-body > div {
        padding: 5px 10px 5px 10px;
    }

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

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

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

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

.select-number {
    flex: 1;
    text-align: end;
    padding-right: 10px;
    color: var(--bleu-flash);
    font-weight: 200;
}
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************* NAVIGATION NEW *******************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
body {
    overflow: hidden;
}

.mobile-wrapper, #btn_nav {
    display: none;
}

.navigation-wrapper {
    display: flex;
    align-items: center;
    height: var(--hauteur-menu);
    flex: 1;
}
.nav-horizontal,
.nav-vertical {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    background-color: var(--color-light);
    transition: .3s;
}

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

.nav-vertical {
    display: flex;
    position: fixed;
    width: var(--hauteur-menu);
    background-color: var(--color-light);
    border-right: 1px solid var(--border-color);
    height: calc(100vh - var(--hauteur-menu));
    left: 0;
    top: var(--hauteur-menu);
    flex-direction: column;
    z-index: 1000;
    justify-content: center;
}

    .nav-vertical:hover {
        width: 280px;
    }

        .nav-vertical:hover .nav-menu-icon > span {
            visibility: visible;
            opacity: 1;
            transition: .5s;
            transition-delay: .2s;
            position: relative;
            left: initial;
        }

.nav-menu-icon > span {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: -100%;
    font-size: 14px;
}

.nav-menu-icon {
    height: var(--hauteur-menu);
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
}

    .nav-menu-icon:hover {
        cursor: pointer;
        background-color: white;
    }

    .nav-menu-icon.active {
        color: var(--color-success);
        background-color: white;
    }

        .nav-menu-icon.active > i {
            color: var(--color-success);
        }

.menu-icon-list {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
}

.menu-icon {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
    align-items: center;
    justify-content: center;
    height: var(--hauteur-menu);
    min-width: var(--hauteur-menu);
    position: relative;
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

    .menu-icon > i, .nav-menu-icon > i {
        font-size: 22px;
        color: var(--bleu-fonce);
        min-width: var(--hauteur-menu);
        text-align: center;
        min-height: var(--hauteur-menu);
        line-height: var(--hauteur-menu);
        cursor: pointer;
    }

    .menu-icon > span {
        cursor: pointer
    }

    .menu-icon:hover {
        background-color: white;
    }

.menu-icon-details {
    display: none;
    position: absolute;
    top: calc(var(--hauteur-menu) - 1px);
    right: 0;
    background-color: var(--color-light);
    min-width: 240px;
    min-height: var(--hauteur-menu);
    border: 1px solid var(--border-color);
    z-index: 500;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.new-notif::after {
    content: '';
    position: absolute;
    top: 15px;
    width: 10px;
    height: 10px;
    background-color: var(--color-success);
    border-radius: 50px;
    left: 35px;
    box-shadow: 0px 0px 5px var(--color-success);
}

.menu-icon.active > .menu-icon-details {
    display: block;
}

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

.notification-menu-item {
    padding: 1rem;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notification-status {
    min-width: 10px;
    height: 10px;
    border-radius: 50px;
    margin-left: 1rem;
    display: block;
}

    .notification-status.unread {
        background-color: var(--color-success);
        border: 2px solid transparent;
        cursor: pointer;
    }

    .notification-status.read {
        background-color: transparent;
        border: 2px solid var(--color-success);
    }

/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************* NAVIGATION OLD ***********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/

    /*
#nav_wrapper {
    display: flex;
    flex-direction: column;
    width: 280px;
    background-color: #F6F8FF;
    align-items: center;
    justify-content: space-evenly;
    overflow: auto;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 1000;
}

    #nav_wrapper.active {
        left: 0;
    }

.nav-body {
    width: 100%;
}

.nav-item {
    font-weight: 600;
    color: #555555;
    width: 100%;
    margin-top: 10px;
    padding: 8px 0 8px 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

    .nav-item > i {
        font-size: 22px;
        padding-right: 10px;
    }

    .nav-item.active,
    .nav-item.active:hover,
    .nav-item-link.active,
    .nav-item-link.active:hover {
        color: #20c993;
        background-color: #ffffff;
    }

    .nav-item:hover, .nav-item-link:hover {
        background-color: #f6fffc;
    }

.nav-item-link {
    padding: 5px 0 5px 53px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}
    */
    #nav_wrapper,
    #btn_nav.active,
    #btn_nav {
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
    }

/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/**************************************************** PASSAGES TEMPS REELS ****************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/

.table-passages-container {
    border-radius: 5px;
    font-size: 14px;
}
.table-passages-container.historique .table-passage-item {
    opacity: .5;
}
    .table-passages-container.historique .table-passage-item:hover {
        opacity: 1;
    }


.tooltip-inner ul {
    font-size: 12px;
}


.table-passages-body {
    position: relative;
}
.table-passages-header-action {
    font-family: 'Rubik Medium';
    background-color: var(--color-light);
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.table-passages-header,
.table-passages-row,
.table-passages-header-wrapper {
    display: flex;
}

    .table-passages-header-wrapper {
        gap: 1rem;
    }
    .test {
        background-color: blue;
        height: 400px;
    }

.table-passages-row {
    border-radius: 20px;
}

    .table-passages-row.active {
        background-color: var(--color-light);
        border-radius: 20px 20px 0 0;
    }

    .table-passages-row:hover {
        background-color: var(--color-light);
        cursor: pointer;
    }


    .table-passages-row ul {
        line-height: 27.9px;
    }

.table-passages-actions, .table-passages-header-action {
    min-width: 150px;
    max-width: 150px;
    position: relative;
}
.table-passages-actions {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: .3rem;
    justify-content: start;
    padding-top: 3px;
}

    .table-passages-actions::before {
        content: '';
        position: absolute;
        top: 22px;
        right: 4px;
        border-top: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        border-radius: 10px;
        width: 90px;
        height: 91px;
    }

.table-passage-item {
    display: flex;
    position: relative;
    margin: 10px 0;
    gap: 1rem;
}

.table-passages-content {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    position: relative;
}

    .table-passages-content::before {
        content: '';
        position: absolute;
    }

    .table-passages-content::before {
        left: -7.5px;
        top: 59.3px;
        border-radius: 50px;
        border: 2px solid var(--border-color);
        width: 15px;
        height: 15px;
        background-color: white;
    }

    .table-passages-content.important::before {
        border-color: var(--orange-feu);
    }

    .table-passages-content.traite::before {
        border-color: var(--bleu-fonce);
    }
    .table-passages-content.traite::before {
        border-color: var(--color-success);
    }

.table-passages-actions::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 67px;
    height: 1px;
    border-top: 1px solid var(--border-color);
    width: 61px;
    z-index: -1;
}


.table-passages-header {
    background-color: var(--color-light);
    font-family: "Rubik Bold";
    border-radius: 50px;
    flex: 1;
}

    .table-passages-header > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .table-passages-header > div,
    .table-passages-row > div {
        flex: 1;
        padding: 2px 10px;
        margin: 8px 0;
    }
        /*.table-passages-header > div:last-of-type,
.table-passages-row > div:last-of-type {
    flex: 2;
}*/

        .table-passages-header > div:first-of-type,
        .table-passages-row > div:first-of-type {
            flex: .5;
        }

    .table-passages-header .bi {
        color: var(--bleu-fonce);
    }

    .table-passages-header .bi,
    .table-passages-row .bi {
        font-size: 16px;
    }

    .table-passages-header > div:not(:first-of-type),
    .table-passages-row > div:not(:first-of-type) {
        border-left: 2px solid var(--border-color);
    }

    .table-passages-header > *,
    .table-passages-row > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.table-passages-container .icon-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

    .table-passages-container .icon-list li.text-orange::after {
        font-family: bootstrap-icons;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        content: '\f33a';
        position: absolute;
        left: 12px;
        top: -6px;
        font-size: 14px;
    }


.passage-title {
    font-family: "Rubik Medium";
    display: flex;
    flex-direction: column;
}
.passage-title  i {
    font-size: 20px;
}

.radio-box-label,
.checkbox-box-label {
    border: 2px solid var(--border-color);
    min-width: 150px;
    height: 70px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    user-select: none;
    flex: 1;
    position: relative;
}

    .radio-box-label:hover,
    .checkbox-box-label:hover {
        border-color: var(--bleu-fonce);
        color: var(--bleu-fonce);
        cursor: pointer;
    }

        
input:checked + .radio-box-label,
input:checked + .checkbox-box-label {
    color: var(--bleu-fonce);
    border-color: var(--bleu-fonce);
}


    input:checked + .radio-box-label::after,
    input:checked + .checkbox-box-label::after,
    .checkbox-box-label:hover::after {
        --cote: 20px;
        position: absolute;
        top: calc(var(--cote)/2*-1);
        width: var(--cote);
        height: var(--cote);
        line-height: var(--cote);
        font-family: bootstrap-icons;
        border-radius: 50px;
        right: calc(var(--cote)/2*-1);
        color: white;
    }


    input:checked + .radio-box-label::after,
    input:checked + .checkbox-box-label::after {
        content: "\f633";
        background-color: var(--color-success);
    }

    .checkbox-box-label:hover::after {
        content: "\f64d";
        background-color: var(--bleu-fonce);
    }

    input:checked + .checkbox-box-label:hover::after {
        content: "\f63b";
        background-color: var(--orange-feu);
    }

.passage-historique-container {
    border: 2px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    max-height: 632px;
    overflow: auto;
}

.passage-historique-item {
    padding: 10px;
    border-bottom: 2px solid var(--border-color);
    background-color: white;
}

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

.row-passage-tags {
    position: absolute;
    z-index: 100;
    background-color: white;
    bottom: 40px;
    right: 16px;
    min-width: 300px;
}

.row-passage-tags.left {
    right: initial;
    left : 0;    
}

    .row-passage-tags > div {
        border-left: 2px solid var(--border-color);
        border-right: 2px solid var(--border-color);
        border-top: 2px solid var(--border-color);
    }

    .row-passage-tags .passage-title {
        flex: 1;
    }

        .row-passage-tags .passage-title:last-of-type {
            border-left: 1px solid var(--border-color);
        }

        .row-passage-tags .passage-title:first-of-type {
            border-right: 1px solid var(--border-color);
        }

.passages-tags {
    color: var(--bleu-fonce);
    font-style: italic;
}

.text-var {
    border-bottom: 2px dashed var(--bleu-flash);
    color: var(--bleu-fonce);
}

    .text-var:hover {
        background-color: var(--bleu-flash);
    }

.input-textarea-email,
.input-textarea-sms {
    margin-top: 10px;
}

.passage-details-footer {
    height: 69px;
    background-color: var(--color-light);
    border-top: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 2.5rem;
    border-bottom: 2px solid var(--border-color);
    border-radius: 0 0 20px 20px;
}

    .passage-details-footer button {
        min-width: 200px;
    }
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/********************************************************* SCENARIO ***********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
.accordion > span {
    width: 100%;
    display: block;
    text-align: center;
    border-left: 1px solid #ceecff;
    border-right: 1px solid #ceecff;
    padding: 10px 0;
}

.accordion-button > .small {
    flex: 1;
}

    .accordion-button > .small > i {
        color: #20c993;
        min-width: 20px;
        display: inline-block;
    }

    .accordion-button > .small > .bi-x-circle-fill {
        color: #F97171;
    }

.accordion-button {
    opacity: .5;
    background-color: #f6f8ff;
}

    .accordion-button:hover {
        opacity: 1;
    }

    .accordion-button:not(.collapsed) {
        color: #5B4FA3;
        background-color: #ffffff;
        opacity: 1;
    }

.accordion-item {
    border: 1px solid #ceecff;
}

    .accordion-item:first-of-type,
    .accordion-item:first-of-type .accordion-button {
        border-radius: 0;
    }

.caracounter_sms {
    position: absolute;
    bottom: 2px;
    right: 14px;
    font-size: 10px;
    color: #909195;
}

.category {
    color: #999999;
    font-size: 10px;
    text-transform: uppercase;
    padding-right: 15px;
}

.trigger-header,
.actions-header {
    display: flex;
    background-color: #f6f8ff;
    padding: 15px 20px;
    border-radius: 5px;
    align-items: center;
    border: 1px solid #ceecff;
    cursor: pointer;
}

    .trigger-header > i,
    .actions-header > i {
        border: 1px solid #e2e5ef;
        border-radius: 5px;
        color: #20c993;
        height: 45px;
        width: 45px;
        font-size: 24px;
        text-align: center;
        line-height: 45px;
        margin-right: 18px;
    }

.trigger-wrapper:hover,
.actions-wrapper:hover {
    opacity: 1;
}

.trigger-header > button,
.actions-header > button,
.trigger-wrapper.active > button {
    display: none;
}

.trigger-wrapper:not(.active) .trigger-header:hover button,
.actions-wrapper:not(.active) .actions-header:hover button {
    display: block;
}

.trigger-wrapper.active > .trigger-header,
.actions-wrapper.active > .actions-header {
    border-radius: 5px 5px 0 0;
}

.trigger-wrapper {
    margin-bottom: 3rem;
    position: relative;
}

    .trigger-wrapper::after {
        content: '';
        width: 2px;
        height: 3rem;
        background-color: #ceecff;
        position: absolute;
        left: calc(50% - 1px);
    }

.titre-wrapper {
    flex: 1;
}

    .titre-wrapper > span {
        font-weight: 600;
        color: #5B4FA3;
        user-select: none;
    }


.select-body::before {
    content: '';
    position: absolute;
    top: 2px;
    width: 2px;
    background-color: #eceff7;
    height: calc(100% - 30px);
    left: -17px;
}

.select-body.sous_menu_collaborateur::before {
    left: -7px;
    top: 7px;
}

.section_email_fonction,
.section_dest_fonction,
.checkbox-custom,
.checkbox-random,
.form-check-input {
    position: relative;
    z-index: 500;
}

    .section_email_fonction::before,
    .section_dest_fonction::before,
    .sous_menu_services > .checkbox-custom::before,
    .sous_menu_collaborateur > .checkbox-custom::before {
        content: '';
        position: absolute;
        top: 16px;
        width: 20px;
        background-color: #eceff7;
        height: 2px;
        left: -17px;
    }

    .section_email_fonction:last-of-type::after,
    .section_dest_fonction:last-of-type::after {
        content: '';
        position: absolute;
        top: 18px;
        width: 20px;
        background-color: #ffffff;
        height: 80%;
        left: -27px;
    }

/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/********************************************************** FLUX **************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/

.flux-header {
    background-color: #f6f8ff;
    border-radius: 10px 10px 0 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    border: 1px solid #ceecff;
}

    .flux-header > * {
        padding: 10px 10px 0 10px;
        margin: 0;
    }

        .flux-header > *:last-of-type {
            margin-bottom: 10px;
        }

    .flux-header > h5 {
        color: #5b4fa3;
        font-weight: 600;
    }

.flux-body {
    border: 1px solid #ceecff;
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-bottom: 3rem;
}

.flux-var-header,
.flux-var-item {
    display: flex;
    align-items: center;
}

    .flux-var-header > *,
    .flux-var-item > * {
        flex: 1;
        text-align: center;
        padding: 10px;
    }

    .flux-var-item:hover {
        background-color: #f6f8ff;
    }

.flux-import-wrapper {
    background-color: #f6f8ff;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #ceecff;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow: hidden;
    margin-bottom: 2rem;
}

.flux-import-body {
    display: flex;
    padding: 15px 20px;
    flex-direction: row;
    align-items: flex-start;
}

    .flux-import-body > * {
        text-align: start;
        padding: 0 2rem;
        flex: 1;
    }

.flux-import-name {
    flex: 1 320px;
    padding-left: 0;
}

/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************* PARAMETRES ***********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/

.accordion-param .accordion-button {
    opacity: 1;
    background-color: white;
}
    .accordion-param .accordion-button:not(.collapsed) {
        color: black;
        font-weight: 600;
        background-color: var(--color-light);
    }
.accordion-param .accordion-button:hover {
    background-color: var(--color-light);
}
.scenario-wrapper {
    display: flex;
    background-color: #f6f8ff;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    border-radius: 5px;
    justify-content: space-between;
    margin-top: 1.5rem;
}

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

.scenario-header {
    font-size: 32px;
    color: #20c993;
    padding: 0 20px;
}

.scenario-body {
    max-width: 62%;
    font-size: 12px;
    padding: 10px 0 5px 0;
    flex: 1;
}

    .scenario-body > .number {
        font-size: 28px;
        font-weight: 600;
        color: #5b4fa3;
    }

.scenario-footer {
    align-self: start;
    position: relative;
}

    .scenario-footer > button {
        border: none;
        background-color: transparent;
        padding: 0;
        margin: 5px;
        border-radius: 50px;
        padding-top: 2px;
    }

        .scenario-footer > button:hover {
            background-color: #ebecf1;
        }

.row-dots {
    position: absolute;
    background-color: #ffffff;
    font-size: 12px;
    border: 1px solid #ceecff;
    top: 4px;
    right: -119px;
    width: 120px;
}

    .row-dots:hover {
        background-color: #f6f8ff;
    }


/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/**************************************************** REPORTING v2 ***********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/



button.btn.dropdown-toggle {
    font-size: 14px;
}

.custom-height {
    max-height: 261px;
}

.dropdown-toggle::after {
    display: none;
}

.reporting-bloc {
    border-radius: 5px;
    margin-top: 1rem;
    margin-bottom: 5rem;
}

.report-item {
    border: 2px solid #f6f8ff;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

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

.reporting-body {
    padding: 10px;
    border: 2px solid #f6f8ff;
}

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

.reporting-header {
    display: flex;
    align-items: center;
    height: 48px;
    justify-content: space-between;
    background-color: #f6f8ff;
}

.item-body {
    background-color: white;
    overflow: auto;
}

.text-header,
.item-header {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

.item-header {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 10px;
    border-bottom: 2px solid #f6f8ff;
    font-size: 12px;
    justify-content: space-between;
}

#derniers_passages thead,
.table-par-marque thead {
    position: sticky;
    top: -1px;
    background-color: white;
    z-index: 50;
    box-shadow: 0px 2px 0px 0px #f6f8ff;
}

.item-body.table-par-marque,
.item-body.table-par-user {
    max-height: 720px;
    overflow: auto;
}

.table.table-par-marque tbody tr:hover {
    background-color: #f6f8ff;
    color: #5B4FA3;
    cursor: pointer;
}

.table-details thead {
    position: sticky;
    top: 61px;
    background-color: white;
    z-index: 50;
    box-shadow: 0px 2px 0px 0px #f6f8ff;
}


/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/**************************************************** MEDIA QUERIES ***********************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/
/******************************************************************************************************************************/

@media screen and (max-width: 1199px) {
    .list-scenario {
        border-left: none;
        border-top: 2px solid #f6f8ff;
        padding-top: 15px;
    }
}

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

    .logo-svg {
        display: none;
    }

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

    #nav_wrapper {
        left: -280px;
        justify-content: space-between;
    }

    #btn_nav {
        background-color: #F6F8FF;
        display: block;
        font-size: 24px;
        width: var(--hauteur-menu);
        height: var(--hauteur-menu);
        line-height: var(--hauteur-menu);
        text-align: center;
        z-index: 1001;
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;
    }

    #main {
        width: 100%;
        margin-left: 0;
        padding: 1rem;
    }

    .nav-menu-icon > span {
        visibility: visible;
        opacity: 1;
        display: block;
        position: initial;
    }

    .nav-vertical {
        display: none;
    }

}