::root {
    --rz-datepicker-calendar-color: #00133D;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: none;
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #B3B3B3;
}

.table-wrapper .dxbl-loading-panel .dxbl-loading-panel-target-content {
    height: auto !important;
}
.table-wrapper .dxbl-loading-panel {
    height: auto !important;
}


.dxbl-text-edit {
    --dxbl-text-edit-border-radius: 8px !important;
}

@font-face {
    font-family: 'WhyteInktrap';
    src: url('/fonts/WhyteInktrap-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WhyteInktrap';
    src: url('/fonts/WhyteInktrap-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'WhyteInktrap';
    src: url('/fonts/WhyteInktrap-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'WhyteInktrap';
    src: url('/fonts/WhyteInktrap-BolItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: 'WhyteInktrap', sans-serif !important;
    /*font-family: 'Poppins', sans-serif !important;*/
    overflow: hidden;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0 ;
    margin-bottom: 0px !important;
}
.loading-animation {
    height: 70%;
    text-align: center;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position:static
}
.loading-animation h1{
    margin-top:-30px;
    font-size:14px;
    color:#b3b3b3;
    font-weight:600;
}
.loader,
.loader:after {
    border-radius: 50%;
    width: unset;
    min-width: 10em;
    height: 10em;
}


.smallLoader {
    width: 40px; 
    height: 40px;
    border: 4px solid #d9d9d9;
    border-top-color: #3686ee;
    border-radius: 50%;
    animation: load8 1.1s infinite linear;
    margin: 10px auto;
}

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

    100% {
        transform: rotate(360deg);
    }
}



.modal-body .loader {
    aspect-ratio: 1 / 1;
    width: 80%;
    max-width: 90px;
    margin: 20px;
}

.login-header select:focus{
    border:0;
    outline:0;
}
.login-header select {
    border: 0px;
    box-shadow: 0px 4px 16px 0px #00000014;
    background-color: #fff;
    border-radius: 8px;
    padding-left: 16px;
    color: #00133D;
    font-size: 14px;
    appearance: none;
    background: url(../assets/selectArrow.svg) no-repeat 85% center;
    width: 160px;
    font-weight: 500;
}
.login-header select option {
    color: #00133D;
    font-size: 14px;
    font-weight: 500;
}
.loader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 0.6em solid rgba(54, 134, 238, 1);
    border-right: 0.6em solid rgba(54, 134, 238, 1);
    border-bottom: 0.6em solid rgba(54, 134, 238, 1);
    border-left: 0.6em solid rgba(217, 217, 217, 1);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}



.navbar {
    background: #fff;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
}


.user-menu-container {
    position: relative;
    display: inline-block;
}

.user-initials {
    background-color: #0d399633;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.user-menu-dropdown {
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1001;
    padding: 10px;
    border-radius: 4px;
}

    .user-menu-dropdown .user-email {
        margin-bottom: 8px;
        font-size: 15px;
        margin-top: 8px;
    }

    .user-menu-dropdown a {
        display: block;
        text-decoration: none;
        color: #0078D4;
        padding: 4px 0;
    }

        .user-menu-dropdown a:hover {
            text-decoration: underline;
        }


.menu-button {
    position: fixed;
    top: 0px;
    width: 56px;
    height: 56px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: grid; 
    place-items: center; 
    font-size: 24px;
    line-height: 1; 
    padding: 0; 
    box-sizing: border-box;
    cursor: pointer;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
}

.menu-button {
    transform: translateY(-0.5px);
}

.synoptic-check {
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.bottom-nav {
    background: #fff;
    padding: 12px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #ccc;
    margin-top: auto; 
}

    .bottom-nav button {
        color: #fff; 
        border: none;
        border-radius: 50%; 
        width: 35px;
        height: 35px;
        display: flex; 
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: background 0.2s;
        outline: none;
        margin: 0 8px; 
    }
.navbar button {
    color: #fff; 
    border: none;
    border-radius: 50%; 
    width: 35px;
    height: 35px;
    display: flex; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background 0.2s;
    outline: none; 
    margin: 0 8px; 
}

.back-button, .next-button {
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background 0.2s;
    outline: none;
    margin: 0 8px; 
}

.title {
    font-family: Poppins, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: #000;
}

.section-title {
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000;
}


.icon {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

.icon-close {
    width: 24px;
    height: 24px;
}


.user-menu-container {
    position: relative;
    display: inline-block;
}

.user-initials {
    background-color: #0d399633;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.user-menu-dropdown {
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1001;
    padding: 10px;
    border-radius: 4px;
}

    .user-menu-dropdown .user-email {
        margin-bottom: 8px;
        font-size: 15px;
        margin-top: 8px;
    }

    .user-menu-dropdown a {
        display: block;
        text-decoration: none;
        color: #0078D4;
        padding: 4px 0;
    }

        .user-menu-dropdown a:hover {
            text-decoration: underline;
        }

.slide-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
    z-index: 1000;
}

    .slide-menu.closed {
        transform: translateX(-100%);
    }

    .slide-menu.open {
        transform: translateX(0);
    }

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row {
    height: 3.5rem;
}


.maximum-size {
    width: 100%;
    height: 100%;
}

.selectableText {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    cursor: auto;
    user-select: text;
}

.panelLoader {
    width: 1.5em;
    height: 1.5em;
    border: 0.2em solid rgba(13, 57, 150, 0.2);
    border-top: 0.2em solid rgba(13, 57, 150, 1);
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
.panelLoader-container {
    display: flex;
    align-items: center; /* Aligne verticalement les éléments */
    column-gap: 12px;
}

.panelLoader-text {
    margin-left: 7px;
    font-weight: 500;
    font-size: 14px;
    color: #0D3996;
    margin-right: 10px; /* Ajustez l'espacement entre le texte et le loader */
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.recent-list{
    display:flex;
    flex-direction:column;
}
.recent-list .submenu-link {
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none;
    height: auto !important;
    margin-bottom: 4px;
    line-height: 14px !important;
    padding-left: 2.65rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    color: #0D3996;
}
.recent-list .submenu-link:hover {
    background: #CFD7EA;
    border-radius: 4px !important;
}

.NotificationPopup {
    position: relative;
    background-color: #f1f1f1;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    z-index: 1000;
    display: inherit;
    justify-items: self-end;
    /*    max-height: 500px;
    max-width: 600px;*/
}


.NotificationControl {
    background-color: #f5f5f5;
    height: 500px;
    width: 800px;
/*    overflow-y: auto;*/
}

.NotificationPopup::-webkit-scrollbar {
    width: 10px;
}

.event-list li {
    padding: 10px;
    /*border-bottom: 1px solid #ccc;*/
}

    .event-list li.even {
        background-color: #dfdddd;
    }


.NotificationPopup::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
}

.NotificationPopup::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.NotificationButton {
    display: flex;
    position: relative;
    z-index: 1000;
    background-size: contain;
    border-radius: 30% 10% 0% 10%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 20px 0px;
    border-width: 1px;
    border-style: solid;
    border-color: #8ca1cf !important;
}

.errorSearch {
    border: 1px solid rgba(241, 39, 39, 1) !important;
    background: rgba(241, 39, 39, 0.05) url(../assets/MagnifyingGlass.svg) no-repeat !important;
    background-position: 16px center !important;
}
.text-error{
    font-size:12px;
    color:#f12727;
}
input:focus {
    outline: 0;
    border: 0;
}
.content{
/*    padding-left:3rem;
    padding-right:3rem;*/
}

.widgetChart {
    height: calc(100% - 18px) !important;
}
.widgetPie {
    height: calc(100% - 50px) !important;
}

.login-header{
    display:flex;
    justify-content:space-between;
}
.select-lang {
    color: #00133D !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0px 4px 16px 0px #00000014;
    border: 0px !important;
    padding: 16px 20px 16px 20px;
    border-radius:8px !important;
}
.btn-auth {
    background: #3686EE;
    border-radius: 8px;
    color: #FFF;
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    border: 0px;
    font-weight: 600;
    margin-top: 10px;
}
.login-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    height: calc(100vh - 160px);
}
.form-forget {
    color: #B3B3B3;
    font-size:14px;
    text-align:center;
    margin-top:24px ;
    cursor:pointer;
}
.form-forget:hover {
    text-decoration: none !important;
    color: #11103B;
}
.form-forget span {
    text-decoration: underline;
    margin-left: 8px;
}
.form-signin h1 {
    color: #0D3996 !important;
    font-weight:700;
    margin-top:0px;
    margin-bottom:4px;
    font-size:24px;
    text-align:center;
}
.form-signin h3 {
    font-weight: 400;
    font-size: 14px;
    color: #0D3996 !important;
    margin-bottom: 40px;
    margin-top: 0px;
    text-align: center;
}
.logo-client {
    box-shadow: 0px 4px 16px 0px #00000014;
    padding: 16px 24px 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 50%;
    margin: 0 auto;
    margin-bottom: 24px;
    border-radius: 8px;
}
.logo-client p{
    margin:0;
    color:#000;
    font-weight:500;
}
.form-signin {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}
.invalid {
    background: rgba(241, 39, 39, 0.05) !important;
    border: rgba(241, 39, 39, 1) !important;
}
.validation-message {
    /*position: absolute;*/
    line-height: 18px;
    bottom: -2px;
    color: rgba(241, 39, 39, 1);
    font-size: 12px;
}
.form-control-auth {
    background-color: #F7F7F7;
    border-radius: 8px !important;
    color: #00133D !important;
    border: 0px;
    padding: 10px;
    margin-bottom: 16px;
    font-family: 'Poppins';
}
.form-control-auth::placeholder {
    color: #B3B3B3 !important;
}
.form-signin label {
    color: #00133D !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-bottom:0px;
}

.my-progress-bar {
    position: relative;
    width: 401px;
    height: 55px;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
}


.my-progress-wrapper {
    display: flex;
    place-items: center;
    min-height: 100svh; 
    padding: 16px; 
    box-sizing: border-box;
    background-color: #f5f5f5;
    background-image: url('/assets/boaconcept_banner_lightMode.png');
    background-size: cover;
    background-position: center;
    overflow: hidden; 
}
.my-progress-image {
    width: min(400px, 90vw); 
    aspect-ratio: 400 / 282; 
    background-image: url('/assets/boaconcept_lightMode.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20px;
}

@media (max-width: 450px) {
    .my-progress-bar {
        width: 84vw;
    }
}

#svg-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: scaleX(-1);
}

.my-progress-text {
    font-size: 14px;
    margin-top: 5px;
    text-align: center;
}
.nav-item .submenu-link {
    font-size: 14px !important;
    text-decoration: none;
    height: auto !important;
    margin-bottom: 4px;
    line-height: 14px !important;
    padding-left: 2.2rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.nav-item .submenu-link:hover {
    background: #CFD7EA;
    border-radius: 4px !important;
}
.active-sublink {
    background: rgba(207, 215, 234, 1);
    border-radius: 4px !important;
    font-weight:600 !important;
}
.nav-active .submenu-link:active {
    background: rgba(13, 57, 150, 0.2);
    border-radius: 4px !important;
}
.sidebar {
    /*background-color: #FFFFFF;*/
    background-image: url('/assets/boaconcept_banner_lightMode.png');
    background-size: cover;
    background-position: center;
    background-color: rgba(255,255,255,0.5);
    background-blend-mode: lighten;
    width: 288px;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
    resize: horizontal;
    overflow: auto;
    min-width: 288px;
}
.rz-dropdown {
    border: 0px !important;
    padding: 0 !important;
    margin-bottom: 0px !important;
    line-height: 21px !important;
    height: 21px !important;
    margin-left:4px;
}
select {
    background: #f7f7f7;
    border: none;
    /* text-align: center; */
    height: 35.99px;
    border-radius: 8px;
}
select:disabled {
    background: #B3B3B3;
}
select-checkbox {
    background: #f7f7f7;
    border: none;
    /* text-align: center; */
    height: 170px;
    border-radius: 8px;
}
    .select-checkbox option::before {
        content: "\2610";
        width: 1.3em;
        text-align: center;
        display: inline-block;
    }
    .select-checkbox option:checked::before {
        content: "\2611";
    }
.w-190{
    width:190px;
}
.filter-item-container .rz-dropdown-label {
    font-size: 14px !important;
    color: #00133D !important;
    font-weight: 400 !important;
}
.filter-item-container > .d-flex{
    margin-bottom:1rem;
}
.rz-html-editor-dropdown-items, .rz-splitbutton-menu, .rz-autocomplete-panel, .rz-multiselect-panel, .rz-dropdown-panel {
    box-shadow: 0px 4px 16px 0px #00000014 !important;
}
.rz-dropdown-item.rz-state-highlight, .rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-dropdown-items li.rz-state-highlight, .rz-autocomplete-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight {
    border-radius: 8px !important;
    background-color: #f7f7f7 !important;
}
.rz-dropdown-item, .rz-menuitem, .rz-autocomplete-list-item, .rz-multiselect-item, .rz-dropdown-items li, .rz-autocomplete-items li, .rz-multiselect-items li {
   padding:4px 8px !important;
    font-size: 14px !important;
    color: #00133D !important;
}
.rz-dropdown-items-wrapper, .rz-multiselect-items-wrapper {
    padding: 12px !important;
    border-radius: 8px !important;
}
.rz-form-field.rz-state-focused .rz-form-field-content, .rz-spinner:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .rz-calendar .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow:none !important;
}
.rz-dropdown-items rz-dropdown-list li {
    margin-bottom:8px;
}
.rz-dropdown-items rz-dropdown-list li:last-of-type{
    margin-bottom:0px;
}




.rz-calendar .rz-inputtext {
    border-radius: 8px !important;
    height: 35.99px !important;
    border: none !important;
    background: #e9ecef !important;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #b3b3b3 !important;
    color: #495057 !important;
}

.rz-calendar .rz-inputtext {
    background-color: #b3b3b3 !important;
}


.rz-calendar .rz-inputtext:not(:disabled) {
    background: #f7f7f7 !important;
}


.Selectable {
    -webkit-user-select: text; /* Safari */
    -ms-user-select: text; /* IE 10 and IE 11 */
    user-select: text; /* Standard syntax */
}


#ApropoModal h3{
    margin:0px;
    font-size:14px;
}
#ApropoModal h1 {
    margin-bottom:24px;
}
#signOutModal h1 {
    color: #00133D;
    font-size:14px;
    font-weight:600;
    margin-bottom:12px;

}
#signOutModal .modal-body{
    padding:0;
}
#signOutModal .modal-footer {
    display: flex;
    width: 100%;
    column-gap: 12px;
    margin: 0;
    padding: 0;
}
    #signOutModal .modal-footer a{
        flex:1;
        margin:0;
    }
    #signOutModal h2 {
        color: #00133D;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 24px;
    }
#ApropoModal .modal-body > div {
    row-gap: 8px;
}
.texxt-right{
    text-align:right;
}
.modal-body p {
    margin: 0;
    color: #00133D;
    font-size:14px;
    line-height:21px;
}
.modal-backdrop.show {
    background: rgba(26, 26, 26, 0.4) !important;
}
.alert-close {
    padding: 0 !important;
    margin: 0 !important;
    position: absolute;
    right: -25px;
    top: -20px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.5) url(../assets/closemodal.svg) no-repeat center center;
}
.alert-danger {
    border: 1px solid #F12727 !important;
    background: #FEF4F4 !important;
    border-radius: 8px !important;
    padding: 16px 24px 16px 24px !important;
    color: #F12727 !important;
    font-weight: 500 !important;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    animation: mymove 6s;
    z-index: 99;
    opacity: 0;
    top: -10px;
}
.alert-warning {
    border: 1px solid #FF8A1E !important;
    background: #FFF4E9 !important;
    border-radius: 8px !important;
    padding: 16px 24px 16px 24px !important;
    color: #FF8A1E !important;
    font-weight: 500 !important;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    animation: mymove 6s;
    z-index: 99;
    opacity: 0;
    top: -10px;
}
.alert-info {
    border: 1px solid #217AEF !important;
    background: #F4F8FE !important;
    border-radius: 8px !important;
    padding: 16px 24px 16px 24px !important;
    color: #217AEF !important;
    font-weight: 500 !important;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    animation: mymove 6s;
    z-index: 99;
    opacity: 0;
    top: -10px;
}
.alert-success {
    border: 1px solid #00BE86 !important;
    background: #F2FBF9 !important;
    border-radius: 8px !important;
    padding: 16px 24px 16px 24px !important;
    color: #00BE86 !important;
    font-weight: 500 !important;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    animation: mymove 6s;
    z-index: 99;
    opacity:0;
    top:-10px;
}

@keyframes animationMove {
    0% {
        -webkit-transform: translate(0,20px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0,0px);
        opacity: 1;
    }
}


    @keyframes mymove {
        0% {
        top: -10px;
        opacity: 0;
    }

    16% {
        top: 40px;
        opacity: 1;
    }

    84% {
        top: 40px;
        opacity: 1;
    }

    100% {
        top: -10px;
        opacity: 0;
    }
}
.alert-danger img, .alert-info img, .alert-warning img , .alert-success img{
    margin-right:18px;
}
.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary svg{
    display:none;
   
}
.dxbl-btn-outline-secondary[aria-label="Next page"] {
    background: transparent url(../assets/rightOneArrow.svg) center center no-repeat;
    background-size: 20px;
}
    .dxbl-btn-outline-secondary[aria-label="Next page"]:hover {
        background: #E7EBF5 url(../assets/rightOneArrow.svg) center center no-repeat !important;
        background-size: 20px !important;
        border-radius: 8px !important;
    }

.dxbl-btn-outline-secondary[aria-label="Last page"] {
    background: transparent url(../assets/rightTwoArrows.svg) center center no-repeat;
    background-size: 20px;
}

    .dxbl-btn-outline-secondary[aria-label="Last page"]:hover {
        background: #E7EBF5 url(../assets/rightTwoArrows.svg) center center no-repeat !important;
        background-size: 20px !important;
        border-radius: 8px !important;
    }
.dxbl-btn-outline-secondary[aria-label="Previous page"] {
    background: transparent url(../assets/leftOneArrow.svg) center center no-repeat;
    background-size: 20px;
}

    .dxbl-btn-outline-secondary[aria-label="Previous page"]:hover {
        background: #E7EBF5 url(../assets/leftOneArrow.svg) center center no-repeat !important;
        background-size: 20px !important;
        border-radius: 8px !important;
    }
.dxbl-btn-outline-secondary[aria-label="First page"] {
    background: transparent url(../assets/leftTwoArrows.svg) center center no-repeat;
    background-size: 20px;
}

    .dxbl-btn-outline-secondary[aria-label="First page"]:hover {
        background: #E7EBF5 url(../assets/leftTwoArrows.svg) center center no-repeat !important;
        background-size: 20px !important;
        border-radius: 8px !important;
    }
.dxbl-btn-group-vertical > .dxbl-text-edit:has(:focus), .dxbl-btn-group > .dxbl-text-edit:has(:focus) {
    border: 0px !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.dxbl-pager .dxbl-pager-page-edit {
    border: 0px !important;
}
.dxbl-text dxbl-pager-page-edit-text {
    color: #00133D !important;
}
.dxbl-pager .dxbl-pager-page-edit > input:focus{
    outline:0 !important;
    box-shadow:0 !important;
}
.dxbl-pager .dxbl-pager-page-edit > input {
    background: #E7EBF5 !important;
    border: 0px !important;
    padding: 8px 12px 8px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #0D3996 !important;
    width: 100%;
    font-weight: 600 !important;
}
.parameters {
    background: #fff;
    padding: 12px;
    box-shadow: 0px 4px 16px 0px #00000014;
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 1200;
    right: 60px;
    top: 25px;
    min-width: 290px;
}
    .parameters > .v-scroll {
        max-height: 250px;
        overflow-y: auto;
    }
    /* width */
.v-scroll::-webkit-scrollbar {
    width: 8px;
}

/* Track */
.v-scroll::-webkit-scrollbar-track {
    background: #fff;
}

/* Handle */
.v-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    /* Handle on hover */
    .v-scroll::-webkit-scrollbar-thumb:hover {
        background: #B3B3B3;
    }
.parameters h3 {
    color: #00133D;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    margin-bottom: 8px;
    cursor: pointer;
}
    .parameters h3 img{
        margin-right:8px;
    }
    .parameters label{
        margin:0;
    }
    .columnVisibility {
        border-top: 1px solid #E7EBF5;
        padding-top: 8px;
        padding-bottom: 8px;
        margin-top: 8px;
        margin-bottom: 8px;
        cursor:pointer;
    }
.exportVisibility {
    border-radius: 5px;
    padding: 3px;
    border: none;
    color: black !important;
    background-color: white;
    cursor: pointer;
}

        .exportVisibility:hover {
            background-color: #E7EBF5 !important;
            text-decoration: none;
        }

    .exportVisibility:active {
        background-color: #CFD7EA;
        text-decoration: none;
    }

.export-action {
    border-top: 1px solid #E7EBF5;
    padding-top: 8px;
}
    .export-action > div:first-child(1) {
        border-top: 1px solid #E7EBF5;
        padding-top: 8px;
    }
.column-action {
    border-top: 1px solid #E7EBF5;
    padding-top:8px;
}
.columnVisibility > div:nth-child(1) {
    color: #00133D;
    font-size: 14px;
}
.columnVisibility > div:nth-child(2) {
    color: #34B0B9;
    font-size: 14px;
}
.favorisButton {
    cursor: pointer;
}
.retractMenu {
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
    overflow: unset;
}
    .columns-list {
        margin:0;
        padding:0;
        width:100%;
    }

    .columns-list li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: #00133D;
        font-size: 14px;
        font-weight: 400;
        margin-top: 8px;
        margin-bottom: 8px;
        cursor: pointer;
    }
        .parameters a {
            font-weight: 500;
            font-size: 14px;
            color: #0D3996;
            cursor: pointer;
        }
.parameters p {
    margin: 0;
    padding: 0;
    color: #B3B3B3;
}
.dxbl-grid .dxbl-grid-table > tbody > tr > td > .dxbl-checkbox, .dxbl-grid .dxbl-grid-table > tfoot > tr > td > .dxbl-checkbox, .dxbl-grid .dxbl-grid-table > thead > tr > td > .dxbl-checkbox{
    vertical-align:middle !important;
}

.dxbl-grid .dxbl-pager {
    align-items: center;
}

.retractMenu .navbar-brand, .retractMenu .nav-link {
    display: none;
}

.navbar-brand {
    cursor: pointer;
}


.retractMenu .nav-link div span {
    display: none;
}
            .retractMenu .nav-link .icon{
                display:block;
            }
            .retractMenu .nav-active div span {
                display: none;
            }
        .retractMenu .nav-active a div span{
            display:none;
        }
    .retractMenu .search-menu{
        width:80px;
    }
.retractMenu .profile-menu{
    left:80px !important;
}
.retractMenu .UserName {
    display: none;
}
    .retractMenu .btn-retract-menu img{
        transform:rotate(180deg);
    }

.btn-retract-menu {
    cursor: pointer;
}

    .retractMenu .sub-menu {
        position: absolute;
        background: #FFFFFF;
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        width: auto;
        white-space: nowrap;
        left: 24px;
        margin-top: 24px;
        padding-right: 12px;
        padding-left: 12px;
        padding-bottom: 4px;
        z-index:8
    }
        .retractMenu .sub-menu .submenu-link {
            padding-left: 24px !important;
            padding-right: 24px;
        }

.sidebar hr {
    background-color: #E7EBF5;
    margin-right: 1.5rem;
}
.nav-active {
    background-color: rgba(13, 57, 150, 0.1);
    border-radius: 8px;
    padding-bottom: 16px;
}
.dxbl-grid-empty-data {
    /*height: 400px !important;*/
    background: url(../assets/NoData.svg) no-repeat center center #fff;
    padding-top: 9rem !important;
}
.dxbl-loading-panel{
    width:100%;
}
.dxbl-grid-empty-data span {
    color: #b3b3b3 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.sub-menu .submenu-link:first-of-type {
    margin-top: 16px;
}
.sub-menu .submenu-link:last-of-type {
    margin-bottom: 8px;
}

.nav-scroll {
    height: calc(100vh - 310px);
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}
    /* width */
    .nav-scroll::-webkit-scrollbar {
        width: 8px;
    }

    /* Track */
    .nav-scroll::-webkit-scrollbar-track {
        background: #fff;
    }

    /* Handle */
    .nav-scroll::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

        /* Handle on hover */
        .nav-scroll::-webkit-scrollbar-thumb:hover {
            background: #B3B3B3;
        }

.nav-profile {
    justify-content: space-between;
    margin-right: 1.5rem;
    align-items: center;
    width: calc(100% - 32px);
    font-weight: 600;
    font-size: 16px;
    color: #00133D;
}

    .nav-profile img {
        margin-right: 12px;
    }
.invisible {
    display:none !important;
}
.profile-menu {
    position: absolute;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: #FFFFFF;
    left: 220px;
    bottom: 30px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    width: 163px;
    z-index: 1040;
   
}

    .profile-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .profile-menu ul li {
            border-bottom: 1px solid #E7EBF5;
            padding-bottom: 8px;
            padding-top: 8px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

            .profile-menu ul li:last-of-type {
                border-bottom: 0px;
                color: #0D3996;
                font-weight: 400;
            }

            .profile-menu ul li img {
                margin: 0;
            }
    .profile-menu select {
        appearance: none;
        background: url(../assets/selectArrow.svg) no-repeat 100% center;
        border: 0px;
        font-size: 14px;
        color: #00133D;
        font-weight: 500;
        width: 100%;
        padding-left:0;
    }
        .profile-menu select:focus{
            outline:0;
            border:0;
        }
        .profile-menu ul li div {
            width: 100%;
        }
    .profile-menu ul li div label {
        width:100%;
        margin:0;
    }
    .nav-link .icon {
        width:24px;
        height:24px;
        text-align:center;
        margin-right:12px;
        display:inline-flex;
        
    }
.nav-link > div {
    display:flex;
    align-items:center;
}
.nav-link > div > span{
    line-height:20px;
}
.search-menu {
    border-radius: 8px;
    height: 56px;
    width: calc(100% - 1.5rem);
    background: #F7F7F7 url(../assets/MagnifyingGlass.svg) no-repeat;
    background-position: 16px center;
    border: 0px;
    padding-left: 3rem;
    margin-top: 2.5rem;
    font-size: 16px;
    margin-right: 1.5rem;
    margin-bottom: 24px;
    padding-right:1rem;
}
.sub-panels {
    display: flex;
    width: 100%;
    column-gap: 24px;
    margin-top: 24px;
    row-gap: 10px;
    flex-wrap: wrap;
}
    .sub-panels > .d-flex {
        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
        border-bottom: 1px solid rgba(247, 247, 247, 1);
        background: #fff;
        flex: 1;
        padding: 8px 16px;
        border-radius: 8px;
        color: #0D3996;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        height: 59px;
        align-items: center;
        min-width: 350px;
    }
    .grid-panel {
       
    }
.sidebar .form-inline .text-error {
    position: absolute;
    bottom: 5px;
}
    .search-menu::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #B3B3B3;
        opacity: 1; /* Firefox */
    }

    .search-menu:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #B3B3B3;
    }

    .search-menu::-ms-input-placeholder { /* Microsoft Edge */
        color: #B3B3B3;
    }

    .search-menu:focus {
        outline: 0;
        border: 0;
    }

.pointer {
    cursor: pointer !important;
}

.align-text-and-input {
    display: flex;
    align-items: center;
    gap: 5px;
}
.header-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-top: 2rem;*/
    color: #0D3996;
    margin-bottom: 1.5rem;
    /*font-size: 25px;*/
    /*margin-left: 25px;*/
/*    background-image: url('/assets/boaconcept_banner_lightMode.png');
    background-size: cover;
    background-position: center;*/
}
.header-title2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    color: #0D3996;
    /*margin-bottom: 1.5rem;*/
    font-size: 25px;
    margin-left: 25px;
}

.noMargin.action-wrapper {
    margin-bottom: 0px
}

.boardInfoTile {
    position: relative;
    width: 400px;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    text-align: center;
    padding: 15px;
    margin: 20px;
}

.boardInfoTileContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:2px;
}

.action-wrapper {
    /*background-color: #fff;*/
    background-image: url('/assets/boaconcept_banner_lightMode.png');
    background-color: rgba(255,255,255,0.5);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: center;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 1.5rem;
    position: relative;
    min-width: 350px;
}
    .action-wrapper .search-menu {
        /*margin-bottom: 20px !important;*/
        width: 400px;
        margin: 0;
        margin-right: 10px !important;
  /*      margin-bottom: 4px;*/
    }
.action-wrapper > div {
    display: flex;
    margin-top: 1rem;
    column-gap: 16px;
    flex-wrap: wrap;
    row-gap: 16px;
}
/*.action-wrapper div a{
    margin-right:1rem;
}*/
    .action-wrapper .form-inline {
        justify-content: normal;
        align-items: baseline;
        margin-block-end: 0;
    }
.action-button {
    /*    padding-bottom: 30px;
    margin-right: 10px !important;*/
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 10px !important;
}

.dashboard-container{
   width:100%;
   height:100%;
}
.cards-size-1 {
    width: calc(25% - 18px);
}
.cards-size-4 {
    width:100%;
}
.cards-size-2 {
    width: calc(50% - 12px);
}
.space-size-2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 24px;
    width: 100%;
    height: 100%;
}
#PanelStock2 {
    background: #F7F7F7 !important;
    box-shadow:none !important;
}
.space-size-2 .cards-size-1 {
    width: calc(50% - 13px);
    flex: auto;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 24px;
    min-height: calc(50% - 12px);
    padding-right: 24px;
    align-items: flex-start;
}
        .space-size-2 .cards-size-1 h1, .space-size-2 .cards-size-1 h3 {
            text-align: left;
            color: #00133D
        }
        .space-size-2 .cards-size-1 div:nth-child(1){
            margin-top:16px;
        }
        .cards-size-4 {
            display: flex;
            flex-direction: column;
            box-shadow: 0px 4px 16px 0px #00000014;
            background: #fff;
            border-radius: 8px;
            position: relative;
            flex-direction: column;
            min-height: 220px;
        }
.client-card {
    background: #fff url(../assets/Waves.svg) !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0px bottom !important;
}
.commandes-card {
    background: #fff url(../assets/WavesRed.svg) !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0px bottom !important;
}
.revenus-card {
    /*background: #fff*/ /* url(../assets/Waves1.svg)*/ /*!important;*/
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0px bottom !important;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 27px;
    text-align: center;
}
    
    .croissance-card {
        background: #fff url(../assets/Waves2.svg) !important;
        background-size: 100% !important;
        background-repeat: no-repeat !important;
        background-position: 0px bottom !important;
    }
.positive-percentage {
    background: url(../assets/PolygonGreen.svg) left center no-repeat;
    padding-left: 1rem;
    color: #00BE86;
    font-weight: 500;
    margin-top: 24px;
    min-width: 40px;
    margin-left: 8px;
    top: -15px;
    position: relative;
}

.negative-percentage {
    background: url(../assets/PolygonRed.svg) left center no-repeat;
    padding-left: 1rem;
    color: #F12727;
    font-weight: 500;
    margin-top: 24px;
    min-width: 40px;
    margin-left: 8px;
    top: -15px;
    position: relative;
}
.cards-size-2 {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 16px 0px #00000014;
    background: #fff;
    border-radius: 8px;
    position: relative;
    flex-direction: column;
    min-height: 220px;
}.cards-size-1 {
    display: flex;
    justify-content: center;
    box-shadow: 0px 4px 16px 0px #00000014;
    background: #fff;
    border-radius: 8px;
    position: relative;
    flex-direction: column;
    align-items: center;
    min-height: 132px;
    max-height:188px;
}

.e-dashboardlayout.e-control {
    z-index: 5;
    display: grid;
    place-items: center;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(auto-fit, 242px);
    grid-template-rows: repeat(auto-fit, 175px);
    --bs-gutter-x:0;
    gap: 16px;
}
  
    .e-dashboardlayout.e-control .e-panel .icon {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        position: absolute;
        top: 18px;
        left: 18px;
    }
.e-dashboardlayout.e-control .e-panel h1 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(16px,2vw,40px) !important;
    text-align: center;
}

    .e-dashboardlayout.e-control .e-panel {
        border: 0px !important;
        
    }
        .e-dashboardlayout.e-control .e-panel.over {
            border: 3px dotted #666;
        }
        .e-dashboardlayout.e-control .e-panel h3 {
            margin-left: 5px;
            margin-top: 10px;
            font-weight: 400;
            font-size: clamp(10px,1vw,16px) !important;
            text-align: center;
        }
    .e-dashboardlayout.e-control .e-panel {
        border-radius: 8px !important;
        height: 175px;
        box-shadow: 0px 4px 16px 0px #00000014 !important;
        transition: opacity 0.3s;
        background-color: white;
    }
   
.article-card, .alerts-card, .stock-negative-card, .stock-positive-card, .article-card, .revenus-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 27px;
    text-align: center;
}
    .article-card, .alerts-card, .stock-negative-card, .stock-positive-card, .article-card, .revenus-card, .editWidgetBtn{
        top: 0px;
        right: 0px;
        position: relative;
    }
    
}
.alerts-card h1, .alerts-card h3 {
    color: #FF8A1E;
}

.revenus-card .icon {
    background: rgba(255, 138, 30, 0.1) url(../assets/Warning.svg) no-repeat center center;



   
    top: 0px;
    right: 0px;

}

.alerts-card .icon {
    background: rgba(255, 138, 30, 0.1) url(../assets/Warning.svg) no-repeat center center;
}
.stock-negative-card h1, .stock-negative-card h3 {
    color: #F12727;
}
.stock-negative-card .icon {
    background: rgba(241, 39, 39, 0.1) url(../assets/FileMinus.svg) no-repeat center center;
}
.stock-positive-card h1, .stock-positive-card h3 {
    color: #0D3996;
}
.stock-positive-card .icon {
    background: rgba(231, 235, 245, 1) url(../assets/Package.svg) no-repeat center center;
}
.article-card h1, .article-card h3 {
    color: #0D3996;
}
.article-card .icon {

    background: rgba(231, 235, 245, 1) url(../assets/FilePlus.svg) no-repeat center center;
}
.inventaire-card .head, .fournisseur-card .head, .clients-card .head, .stock-card .head {
/*    align-items: center;
    height: 50px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 20px;*/
    align-items: center;
    height: 50px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    padding-left: 7px;
    padding-right: 7px;
}

.inventaire-card, .fournisseur-card, .clients-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
    .inventaire-card .content {
        display: grid;
        width: calc(100% - 48px);
        height: calc(100% - 48px);
        column-gap: 16px;
        margin-left: 24px;
        margin-right: 24px;
        margin-bottom: 24px;
        row-gap: 16px;
        padding: 0;
        padding-top: 32px;
        grid-template-columns: repeat(4, 1fr);
    }
    .fournisseur-card .content, .clients-card .content {
        display: grid;
        width: calc(100% - 48px);
        height: 100%;
        column-gap: 16px;
        margin-left: 24px;
        margin-right: 24px;
        margin-bottom: 24px;
        row-gap: 16px;
        padding: 0;
        grid-template-columns: repeat(2, 1fr);
    }
    .fournisseur-card .content, .clients-card .content {
        flex-wrap: wrap;
        row-gap: 16px;
        padding-top: 32px;
    }
    .inventaire-card .icon {
        width: 44px;
        height: 44px;
        display: block;
        border-radius: 8px;
        background: rgba(231, 235, 245, 1) url(../assets/FileText.svg) no-repeat center center;
    }
.fournisseur-card .icon {
    width: 44px;
    height: 44px;
    display: block;
    border-radius: 8px;
    background: rgba(231, 235, 245, 1) url(../assets/ArrowSquareIn.svg) no-repeat center center;
}
.clients-card .icon {
    width: 44px;
    height: 44px;
    display: block;
    border-radius: 8px;
    background: rgba(231, 235, 245, 1) url(../assets/ArrowSquareOut.svg) no-repeat center center;
}
.rz-chart {
    height: 100% !important;
    /*height: 300px !important;*/
}

.stock-card{
    width: 100%;
    height: 100%;
    contain: content;
  
}
.stock-card .icon {
    width: 44px;
    height: 44px;
    display: block;
    border-radius: 8px;
    background: rgba(231, 235, 245, 1) url(../assets/ChartLineUp.svg) no-repeat center center;
}
    .stock-card .content {
        padding: 16px;
        height: calc(100% - 70px) !important;
        align-items: center;
        display: flex;
        justify-content: center;
        padding-right: 0px;
        width: 100%;
        position: absolute;
    }
    .rz-axis{
        font-size:clamp(8px,2vw,12px) !important;
    }
.inventaire-card h2, .fournisseur-card h2, .clients-card h2, .stock-card h2 {
    color: #0D3996;
    margin: 0;
    font-weight: 500;
    font-size: clamp(14px,1.4vw,18px);
    /*margin-left: 4rem;
    margin-top:4px;*/
}
.inventaire-card .content > div  {
    border: 1px solid #E7EBF5;
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fournisseur-card .content > div, .clients-card .content > div {
    border: 1px solid #E7EBF5;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    align-items: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    .inventaire-card .content > div > h1, .fournisseur-card .content > div > h1, .clients-card .content > div > h1 {
        font-size: clamp(12px, 2vw, 40px) !important;
        font-weight: 700 !important;
        color: #00133D !important;
        margin: 0 !important;
        text-align: center !important;
    }
    .inventaire-card .content > div > h3, .fournisseur-card .content > div > h3, .clients-card .content > div > h3, .cards-size-1 h3 {
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #00133D !important;
        margin: 0 !important;
        text-align: left !important;
    }
.btnSmall {
    background-color: #3686ee;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    height: 37px;
}
.btnOutlineDisabled {
    border: 1px solid #B3B3B3 !important;
    pointer-events:none;
}
.btnOutline {
    border: 1px solid rgba(231, 235, 245, 1);
    background-color: #fff;
    font-weight: 500;
    font-size: 14px;
    color: #0D3996;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}
.btnOutline:hover {
    border: 1px solid rgba(0, 19, 61, 1);
    color: #00133D;
    text-decoration:none;
}

.btnOutline:active {
    background-color: rgba(231, 235, 245, 1);
    border: 1px solid rgba(0, 19, 61, 1);
    color: #00133D;
    text-decoration: none;
}
.btnOutline:disabled {
    border: 1px solid #B3B3B3;
    color: #B3B3B3;
}
.btnTextDisabled {
    background: #B3B3B3 !important; 
 }
    .btnText {
        background-color: #FFF;
        font-weight: 500;
        font-size: 14px;
        color: #0D3996;
        padding: 0.8rem 1rem;
        border-radius: 8px;
        text-decoration: none;
        cursor: pointer;
        text-align: center;
    }
.btnText:hover {
    color: #11103B !important;
    text-decoration:none;
}
.btnText:active {
    color: #000C25;
    text-decoration: none;
}
.btnText:disabled {
    color: #B3B3B3;
    text-decoration: none;
}
.btnNormalDisabled {
    background: #B3B3B3 !important;
    pointer-events:none;

}
.dxcomboboxbutton-icon {
    width: 16px;
    height: 16px;
    background: url(../assets/filterSelectArrow.svg) center center no-repeat;
    display: block;
    content: '' !important;
}
.dxbl-text-edit {
    border: 0px !important;
    padding: 0 !important;
    margin-bottom: 0px !important;
    line-height: 21px !important;
    height: 21px !important;
}
.dxbl-text-edit .dxbl-text-edit-input {
    font-size: 14px !important;
    color: #00133D !important;
    font-weight: 400 !important;
}
.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before{
    width:16px;
    height:16px;
    background:url(../assets/filterSelectArrow.svg) center center no-repeat;
    display:block;
    content:'' !important;
}
.rz-dropdown-trigger{
    width:16px;
    height:16px;
    top:6px !important;
}
.rz-dropdown-item:hover, .rz-menuitem:hover, .rz-autocomplete-list-item:hover, .rz-multiselect-item:hover, .rz-dropdown-items li:hover, .rz-autocomplete-items li:hover, .rz-multiselect-items li:hover{
    border-radius:8px !important;
}
.rz-dropdown-items-wrapper, .rz-multiselect-items-wrapper {
    max-height: 230px !important;
}

.dxbl-context-menu li :hover {
    background-color: #E7EBF5 !important;
}
.dxbl-context-menu li :active {
    color: #000000 !important;
    background-color: #CFD7EA !important;
    font-weight: 500 !important;
}
.dxbl-context-menu-submenu li :hover {
    background-color: #E7EBF5 !important;
}
.dxbl-context-menu-submenu li :active {
    color: #000000 !important;
    background-color: #CFD7EA !important;
    font-weight: 500 !important;
}

.dxbl-context-menu-item:active {
    color: #000000 !important;
    background-color: #CFD7EA !important;
    font-weight: 500 !important;
}
.chartLegendSmaller {
    width: 100%;
    font-size: smaller;
}
.btnNormalDesktop {
    z-index: 1000;
    background-color: #3686EE;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    padding: 0.8rem 1.0rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.btnNormal {
    z-index: 1000;
    background-color: #3686EE;
    font-weight: 500;
    font-size: 14px;
    color: #fff !important;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}
    .btnNormal img{
        margin-left:8px;
    }
    .btnNormal:hover, .btnSmall:hover {
        background-color: #0D3996;
        color: #fff;
        text-decoration: none;
    }
    .btnNormal:active, .btnSmall:active {
        background-color: #0D3996;
        color: #fff;
        text-decoration: none;
    }
    .btnNormal:disabled {
        background: #B3B3B3;
        pointer-events: none;
    }
.btnSmall:disabled {
    background: #B3B3B3;
}

.table-header {
    display: flex;
    justify-content: space-between;
    position: relative;
}
    .table-header h1 {
        color: #0D3996;
        font-size:18px;
        font-weight:600;
        text-transform:uppercase;
    }

.actionButton {
    padding-left: 0px !important;
    margin-left: 0px !important;
    border-left: 0px !important;
    display: inline-block !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    border-radius: 8px !important;
    border-color: transparent !important;
    background: transparent url(../assets/DotsThree.svg) no-repeat center center !important;
}

.actionButton:hover {
    background: #E7EBF5 url(../assets/DotsThree.svg) no-repeat center center !important;
}
.actionButton:active {
    background: #CFD7EA url(../assets/DotsThree.svg) no-repeat center center !important;
}


.sinkContainer {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    direction: rtl;
    scrollbar-width: none;
}

.sinkCard {
    direction: ltr;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    text-align: center;
    transition: width 0.2s;
    max-height: 385px;
    height: 100%;
    width: 250px;
    padding: 23px;
    margin: 20px;
}

.readerCard {
    direction: ltr;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    text-align: center;
    transition: width 0.2s;
    max-height: 330px;
    height: 100%;
    width: 250px;
    padding: 23px;
    margin: 20px;
    position: relative;
}

.readerCard .dxbl-loading-panel {
    width: 200px !important;
    padding: 23px;
}



.sinkCard:hover:not(.selectedSinkCard) {
    box-shadow: 0px 6px 30px 5px rgba(54, 134, 238, 0.2) !important;
}

.selectedSinkCard {
    box-shadow: 0px 4px 16px 0px rgba(54, 134, 238, 0.5);
}


.sinkCard .dxbl-loading-panel {
    width: 200px !important;
    padding: 23px;
}

/*.sinkCard-body .dxbl-chart-legend-items
{
    width: 200px;
}*/


.sinkCard-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    align-items: center;
}
.sinkCard-body {
    display: flex;
    flex-direction: column;
}
.sinkCard-footer {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border-top: 1rem;
    gap: 3px;
    padding: 4px;
    align-items: flex-start;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
}

.sinkManagerPage {
    display: flex;
    height: 76%;
}

.sinkSideBar {
    margin-top: 7px;
    height: 100%;
    width: 1000px;
    border-radius: 24px 0px 0px 24px;
    right: -50px;
    padding: 10px 16px 0px 16px;
    position: relative;
    background-color: red;
    background: var(--White, #FFF);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
    overflow-y: auto;
}


.sinkSideBarContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    align-self: stretch;
    margin: 10px;
}

.sinkSideBarSubContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.sinkSideBarInfo {
    display: flex;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 16px;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--White, #FFF);
    flex-direction: column;
}
.sinkSideBarInfoElt {
    display: flex;
    justify-content: flex-start;
    align-self: stretch;
    gap: 23px;
    align-items: center;
}


.sinkSideBarInfoLoadUnit {
    display: flex;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 16px;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
    height: 400px;
    overflow-y: auto;
    border-radius: 8px;
    background: var(--White, #FFF);
    flex-direction: column;
    height: 180px;
}

    .sinkSideBarInfoLoadUnit .sinkSideBarInfoElt
    {
        font-size: 10px;
        gap: 10px;
        cursor: pointer;
        padding: 2px;
            border-radius: 5px;
    }
        .sinkSideBarInfoLoadUnit .sinkSideBarInfoElt:hover {
            background: #E7EBF5;
            
        }


#PieChartSinkCard text {
    fill: black !important;
    font-weight: 700 !important;
    font-size: medium !important;
}

#SinkCardCenterSpan {
    position: relative;
    top: 140px;
    height: 0px;
    font-weight: bold;
    font-size: large;
}


#ReaderCardCenterSpan {
    position: relative;
    top: 131px;
    height: 0px;
    font-weight: bold;
    font-size: large;
}

.readerCardImg {
    position: absolute;
    left : 20px;
    top : 20px;
    height: 40px;
}

.DateEditReaderManager {
    height: 34px !important;
    border: solid #0D3996 1px !important;
}

.brightnessSink {
    filter: brightness(0.90);
}


.moreBtn {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    background: transparent url(../assets/DotsThree.svg) no-repeat center center;
}
.moreBtn:hover {
    background: #E7EBF5 url(../assets/DotsThree.svg) no-repeat center center;
}
.moreBtn:active {
    background: #CFD7EA url(../assets/DotsThree.svg) no-repeat center center;
}


.editWidgetBtn {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    background: transparent url(../assets/ConfigurationMenuIcon.svg) no-repeat center center;
    z-index: 1000;
    padding: 4px;
    /*top: 22px;
    right: 30px;
    position: absolute;
    opacity: 70%;*/
}

.editWidgetBtn:hover {
    background: #D1DAEC url(../assets/ConfigurationMenuIcon.svg) no-repeat center center; /*E7EBF5*/
}

.editWidgetBtn:active {
    background: #D1DAEC url(../assets/ConfigurationMenuIcon.svg) no-repeat center center; /*E7EBF5*/
}

.linkWidgetBtn {
    padding: 4px;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    background: transparent url(../assets/ArrowSquareOut.svg) no-repeat center center;
    /*    top: 22px;
    right: 30px;
    position: absolute;
    opacity: 70%;
    top: 7px;
    left: 7px;*/
    z-index: 1000;
}

    .linkWidgetBtn:hover {
        background: #D1DAEC url(../assets/ArrowSquareOut.svg) no-repeat center center; /*E7EBF5*/
    }

    .linkWidgetBtn:active {
        background: #D1DAEC url(../assets/ArrowSquareOut.svg) no-repeat center center; /*E7EBF5*/
    }






.pieChartWidget {

}

.refreshBtn {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    background: transparent url(../assets/ArrowsClockwise.svg) no-repeat center center;
}
.refreshBtn:hover {
    background: #E7EBF5 url(../assets/ArrowsClockwise.svg) no-repeat center center;
}
.refreshBtn:active {
    background: #CFD7EA url(../assets/ArrowsClockwise.svg) no-repeat center center;
}
  
.addBtn {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    background: transparent url(../assets/Plus.svg) no-repeat center center;
}
.addBtn:hover {
    background: #E7EBF5 url(../assets/Plus.svg) no-repeat center center;
}
.addBtn:active {
    background: #CFD7EA url(../assets/Plus.svg) no-repeat center center;
}

.deleteBtn {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    background: transparent url(../assets/Trash.svg) no-repeat center center;
}
.deleteBtn:hover {
    background: #E7EBF5 url(../assets/Trash.svg) no-repeat center center;
}
.deleteBtn:active {
    background: #CFD7EA url(../assets/Trash.svg) no-repeat center center;
}



.table-wrapper {
    /*background-color: #fff;*/
    background-image: url('/assets/boaconcept_banner_lightMode.png');
    background-color: rgba(255,255,255,0.5);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: center;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 24px;
    min-width: 350px;
}
.ClosePanelBtn {
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    width: 24px;
    height: 24px;
    background: url(../assets/CloseGrid.svg) no-repeat center center;
}
.ClosePanelBtn:hover {
    background: #E7EBF5 url(../assets/CloseGrid.svg) no-repeat center center;
}
.ClosePanelBtn:active {
    background: #CFD7EA url(../assets/CloseGrid.svg) no-repeat center center;
}

.OpenPanelBtn {
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    width: 24px;
    height: 24px;
    background: url(../assets/OpenGrid.svg) no-repeat center center;
}
.OpenPanelBtn:hover {
    background: #E7EBF5 url(../assets/OpenGrid.svg) no-repeat center center;
}
.OpenPanelBtn:active {
    background: #CFD7EA url(../assets/OpenGrid.svg) no-repeat center center;
}

.table-filtre {
    margin-bottom: 1rem;
    display: flex;
    width: 100%;
    align-items: center;
    column-gap: 8px;
    flex-wrap: wrap;
    row-gap: 8px;
}
.funnel{
    width:16px;
    height:16px;
    background:url(../assets/FunnelSimple.svg) no-repeat center center;
    display:inline-block;
}

.ascOrder {
    background: url(../assets/arrow_upward.svg) left 0 no-repeat;
}
.descOrder {
    background: url(../assets/arrow_downward.svg) left 0 no-repeat;
}

.filter-container {
    position: absolute;
    /*width: 236px;*/
    padding: 12px;
    box-shadow: 0px 4px 16px 0px #00000014;
    background: #fff;
    border-radius: 8px;
    z-index: 8;
    top: 20px;
    right: 0px;
}
filter-container .order-first {
    
}
    .filter-container input{
        margin-top:0px;
        margin-bottom:8px;
    }
    .filter-container li {
        padding-left: 26px;
        color: #00133D;
        font-size: 12px;
        font-weight: 400;
    }
    .filter-container ul li:first-child {
        background: url(../assets/arrow_upward.svg) left 0px no-repeat;
        /*border-top: 1px solid #E7EBF5;*/
        /*padding-top: 8px;*/
    }
    .filter-container ul li:nth-child(2) {
        background: url(../assets/arrow_downward.svg) left 0 no-repeat;
    }
.filter-container ul li:nth-child(3) {
    background: url(../assets/remove_sort.svg) left 3px top 3px no-repeat;
    /*padding-bottom: 8px;*/
    /*border-bottom: 1px solid #E7EBF5;*/
}
    .filter-container ul li:nth-child(4) {
        background: url(../assets/EyeSlash.svg) left 8px no-repeat;
        padding-top: 8px;
    }
.table-wrapper .h-scroll {
    margin-bottom: 1rem !important;
}
/* width */
    .h-scroll::-webkit-scrollbar {
        width: 8px;
    }

/* Track */
    .h-scroll::-webkit-scrollbar-track {
        background: #fff;
    }

/* Handle */
    .h-scroll::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    /* Handle on hover */
        .h-scroll::-webkit-scrollbar-thumb:hover {
            background: #B3B3B3;
        }

.line-filters {
    display: flex;
    column-gap: 8px;
    flex-wrap: wrap;
    row-gap: 8px;
}
.dxbl-wait-indicator {
    --dxbl-wait-indicator-color: #3686ee!important;
    height:48px !important;
    width:48px !important;
}
.dxbl-loading-panel .dxbl-loading-panel-container .dxbl-loading-panel-indicator-area.dxbl-loading-panel-hidden{
    display:flex;
    flex-direction:column;
}
.dxbl-loading-panel .dxbl-loading-panel-message{
    font-size:14px !important;
    color:#B3B3B3 !important;
    font-weight:600 !important;
    margin-top:16px !important;
}
.filter-statut-list{
    list-style-type:none;
    padding:0;
    margin:0;
    color:black;
}
.filter-statut-itemlist {
    border-radius: 5px;
    padding: 3px;
    cursor: pointer;
}
.filter-statut-itemlist:hover {
    background-color: #E7EBF5 !important;
}

.filter-statut-itemlist:active {
    background-color: #CFD7EA;
}

.addPreferenceFilter-list {
   
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    z-index: 1200;
    box-shadow: 0px 4px 16px 0px #00000014;
    padding: 12px;
    min-width:200px;
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}
    .addPreferenceFilter-list .addFilter-item:last-of-type {
        margin-bottom: 0px;       
    }
    /* width */
    .addPreferenceFilter-list::-webkit-scrollbar {
        width: 8px;
    }

    /* Track */
    .addPreferenceFilter-list::-webkit-scrollbar-track {
        background: #fff;
    }

    /* Handle */
    .addPreferenceFilter-list::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    /* Handle on hover */
    .addPreferenceFilter-list::-webkit-scrollbar-thumb:hover {
        background: #B3B3B3;
    }

.PanelFilters-list {
    position: absolute;
    /*right:0px;*/
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
    z-index: 1200;
    box-shadow: 0px 4px 16px 0px #00000014;
    padding: 12px;
    min-width: 100px;
    max-width: 280px;
    border-radius: 8px;
    max-height: 110px;
    overflow-y: auto;
    overflow-x: hidden;
}
/* width */
    .PanelFilters-list::-webkit-scrollbar {
        width: 8px;
    }

/* Track */
    .PanelFilters-list::-webkit-scrollbar-track {
        background: #fff;
    }

/* Handle */
    .PanelFilters-list::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    /* Handle on hover */
    .PanelFilters-list::-webkit-scrollbar-thumb:hover {
        background: #B3B3B3;
    }

.Panelfilter-statut-itemlist {
    border-radius: 5px;
    padding: 3px;
    cursor: pointer;
}
    .Panelfilter-statut-itemlist:hover {
        background: #E7EBF5;
    }


.filterGroup .modal-body-container {
    max-height: 400px;
}
.filterGroup .addFilters-list {
    max-height: 180px;
    max-width: 250px;
}

.addFilters-list {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    z-index: 1200;
    box-shadow: 0px 4px 16px 0px #00000014;
    padding: 12px;
    /*min-width: 250px;*/
    border-radius: 8px;
    max-height: 299px;
    overflow-y: auto;
    overflow-x: hidden;
}
    .addFilters-list .addFilter-item:last-of-type{
        margin-bottom:0px;
    }
    /* width */
    .addFilters-list::-webkit-scrollbar {
        width: 8px;
    }

/* Track */
    .addFilters-list::-webkit-scrollbar-track {
        background: #fff;
    }

/* Handle */
    .addFilters-list::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    /* Handle on hover */
        .addFilters-list::-webkit-scrollbar-thumb:hover {
            background: #B3B3B3;
        }
/********/

.addSavedFilters-list {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    z-index: 1200;
    box-shadow: 0px 4px 16px 0px #00000014;
    padding: 12px;
    /*min-width: 250px;*/
    border-radius: 8px;
    max-height: 299px;
    overflow-y: auto;
    overflow-x: hidden;
}

    .addSavedFilters-list .addSavedFilter-item:last-of-type {
        margin-bottom: 0px;
    }
    /* width */
    .addSavedFilters-list::-webkit-scrollbar {
        width: 8px;
    }

    /* Track */
    .addSavedFilters-list::-webkit-scrollbar-track {
        background: #fff;
    }

    /* Handle */
    .addSavedFilters-list::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    /* Handle on hover */
    .addSavedFilters-list::-webkit-scrollbar-thumb:hover {
        background: #B3B3B3;
    }

.addSavedFilter-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #B3B3B3;
    border-radius: 50px;
    padding: 6px 12px 6px 12px;
    column-gap: 8px;
    margin-bottom: 12px;
    width: fit-content;
    white-space: nowrap;
    cursor: pointer;
}

    .addSavedFilter-item:hover {
        background: #E7EBF5;
    }

    .addSavedFilter-item:active {
        background: #CFD7EA;
    }

    .addSavedFilter-item label {
        margin: 0;
    }

.savedFilter-selected {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #B3B3B3;
    border-radius: 50px;
    padding: 6px 12px 6px 12px;
    column-gap: 8px;
    margin-bottom: 12px;
    width: fit-content;
    white-space: nowrap;
    cursor: pointer;
}

    .savedFilter-selected div:nth-child(1) {
        font-weight: 400;
        padding-right: 8px;
    }

    .savedFilter-selected div:nth-child(2) {
        border-left: 1px solid #b3b3b3;
        font-weight: 400;
        padding-left: 8px;
        padding-right: 8px;
    }

    .savedFilter-selected div:nth-child(3) {
        font-weight: 600;
        padding-left: 8px;
        padding-right: 8px;
        border-left: 1px solid #b3b3b3;
    }

    .savedFilter-selected div:nth-child(4) {
        padding-left: 8px;
        border-left: 1px solid #b3b3b3;
    }

.btnFilter {
    cursor: pointer;
}
/***********/
.search-container {
    box-shadow: 0px 4px 16px 0px #00000014;
    padding: 0px;
    background: #fff;
    max-height: 400px;
    overflow-y: auto;
    border-radius: 8px;
    width: 230px;
    padding-top: 16px;
    position: absolute;
    top: 100px;
    z-index:99;
}
    .search-container h1 {
        padding: 0;
        padding-bottom: 4px;
        margin-bottom: 8px;
        border-bottom: 1px solid #E7EBF5;
        color: #B3B3B3;
        font-weight: 400;
        margin-left: 16px;
        font-size: 14px;
        margin-right: 16px;
    }
    .search-container .nav-item {
        padding: 16px;
        margin: 0px;
        padding-bottom:4px;
        padding-top:0px;
    }
    /* width */
    .search-container::-webkit-scrollbar {
        width: 8px;
    }

/* Track */
.search-container::-webkit-scrollbar-track {
        background: #fff;
    }

/* Handle */
    .search-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    /* Handle on hover */
        .search-container::-webkit-scrollbar-thumb:hover {
            background: #B3B3B3;
        }

.addFilterBtn:hover {
    color: #B3B3B3 !important;
    text-decoration: none;
    cursor: pointer;
}
/*.filter-item-container div:nth-child(2){
    width:100% !important;
}*/
.dxbl-grid > .dxbl-grid-bottom-panel:last-of-type{
    justify-content:center !important;
}
.addFilter-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #B3B3B3;
    border-radius: 50px;
    padding: 6px 12px 6px 12px;
    column-gap: 8px;
    margin-bottom: 12px;
    width: fit-content;
    white-space: nowrap;
    cursor: pointer;
}
.addFilter-item:hover {
    background: #E7EBF5;
}
.addFilter-item:active {
    background: #CFD7EA;
}

.addFilter-item label{
    margin:0;
}
.statutRed {
    padding-left: 28px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    background: #FCD4D4 url("../assets/XCircle.svg") no-repeat 8px center;
    color: #F12727;
    font-size: 14px;
    font-weight: 400;
    border-radius: 40px;
}
.statutGreen {
    padding-left: 28px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    background: #E5F8F3 url("../assets/CheckCircle.svg") no-repeat 8px center;
    color: #00BE86;
    font-size: 14px;
    font-weight: 400;
    border-radius: 40px;
}
.statutOrange {
    padding-left:28px;
    padding-top:4px;
    padding-right:8px;
    padding-bottom:4px;
    background: #FFE8D2 url("../assets/ClockClockwise.svg") no-repeat 8px center;
    color: #FF8A1E;
    font-size:14px;
    font-weight:400;
    border-radius:40px;
}
.statutOrangeFonce {
    padding-left: 28px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    background: #FFE8D2 url("../assets/ClockClockwise.svg") no-repeat 8px center;
    color: #d46d00;
    font-size: 14px;
    font-weight: 400;
    border-radius: 40px;
}
.statutBlack {
    padding-left: 28px;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    background: #000 url("../assets/PauseWhite.svg") no-repeat 8px center;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border-radius: 40px;
}
.checkbox-panel-item {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: 6px;
}
    .checkbox-panel-item li {
        display: flex;
        margin-bottom: 12px;
    }

.filter-statut-list{
    list-style-type:none;
    margin:0;
    padding:0;
    margin-top:12px;
}
    .filter-statut-list li {
        display: flex;
        margin-bottom: 12px;
    }
    .filter-statut-list input {
        margin-top:0px;
        margin-right:8px;
    }
.btnDelete{
    cursor:pointer;
}
.btnEdit{
    cursor:pointer;
}
.btnEdit:hover {
    color: #11103B;
}
.btnEdit:active {
    color: #000C25;
}
.filter-wrapper{
    position:relative;
}
.filter-item-active {
    display: flex;
    align-items: center;
    background: #EBF7F8;
    padding: 6px 9px 6px 9px;
    border: 1px solid #34B0B9;
    border-radius: 50px;
    column-gap: 8px;
    position: relative;
    cursor: pointer;
}
.filter-item {
    display: flex;
    white-space: nowrap;
    align-items: center;
    background: #FFFFFF;
    padding: 6px 9px 6px 9px;
    border: 1px solid #34B0B9;
    border-radius: 50px;
    column-gap: 8px;
    position: relative;
    cursor: pointer;
}
    .filter-item:hover, .filter-item-active:hover {
        color: #34B0B9;
        border: 1px solid #34B0B9;
        background: rgba(52, 176, 185, 0.2);
    }
  
    .filter-form-control {
        background: #F7F7F7;
        border: 0px;
        padding: 8px 12px 8px 12px;
        border-radius: 8px;
        font-size: 14px;
        color: #00133D;
    }
    .filter-form-control::placeholder {
        color: #B3B3B3;
    }

.filter-item-container {
    position: absolute;
    background: #FFFFFF;
    padding: 12px;
    box-shadow: 0px 4px 16px 0px #00000014;
    z-index: 1200;
    border-radius: 8px;
    top: 40px;
    left: 0px;
    min-width: 150px; /*min-width: 350px;*/
    max-height: 400px;
    overflow-y: auto;
}

    .filter-item-container a {
        width: 24px;
        height: 24px;
        text-align: center;
    }

        .filter-item-container a:hover {
            width: 24px;
            height: 24px;
            border-radius: 8px;
            background: #E7EBF5;
        }

    .filter-item-container img {
    }

    .filter-item-container label {
        color: #B3B3B3 !important;
        margin: 0px !important;
    }

.filter-item select, .filter-item-active select {
    border: 0px;
    color: #00133D;
}

.filter-item-container input[type=text] {
    background: #F7F7F7 !important;
    border: 0px !important;
    padding: 8px 12px 8px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #00133D !important;
    width: 100%;
    min-width: 140px !important;
    height: 33px;
}

.dxbl-dropdown > .dxbl-dropdown-dialog.dxbl-edit-dropdown {
    top: 13px;
}

.modal-body .dxbl-text-edit {
    height: 34px !important;
    border: 1px !important;
    border-style: groove !important;
}

.dxbl-text-edit.dxbl-focused, .dxbl-text-edit:focus-within {
    height: 34px !important;
}

.dxbl-text-edit.dxbl-disabled > *, .dxbl-text-edit:disabled > * {
    color: #495057 !important;
    height: 34px !important;
}
.dxbl-text-edit.dxbl-disabled > *, .dxbl-text-edit:disabled > * {
    color: #495057 !important;
    height: 34px !important;
}
.dxbl-text-edit.dxbl-disabled, .dxbl-text-edit:disabled {
    color: #495057 !important;
    height: 34px !important;
}


    .dxbl-text-edit.dxbl-disabled > *, .dxbl-text-edit:disabled > * {
        color: #495057 !important;
        height: 34px !important;
        border-radius: 8px;
        background-color: #b3b3b3 !important;
    }

    .dxbl-text-edit.dxbl-disabled > *, .dxbl-text-edit:disabled > * {
        opacity: 1 !important;
    }
        

    .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear,.dxbl-btn.dxbl-btn-icon).dxbl-disabled, .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear,.dxbl-btn.dxbl-btn-icon):disabled {
        display: none;
    }


.filter-item select:focus, .filter-item-active select:focus, .filter-form-control:focus {
    outline: 0;
    border: 0;
}

.filter-item label, .filter-item-active label {
    color: #34B0B9;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.lines-selected {
    background: #E7EBF5;
    border-radius: 8px;
    padding: 4px 12px 4px 12px;
    color: #0D3996;
    min-width: fit-content;
}

    .lines-selected div:nth-child(1) {
        font-weight: 400;
        padding-right: 8px;
    }

    .lines-selected div:nth-child(2) {
        border-left: 1px solid #b3b3b3;
        font-weight: 400;
        padding-left: 8px;
        padding-right: 8px;
    }

    .lines-selected div:nth-child(3) {
        font-weight: 600;
        padding-left: 8px;
        padding-right: 8px;
        border-left: 1px solid #b3b3b3;
    }

    .lines-selected div:nth-child(4) {
        padding-left: 8px;
        border-left: 1px solid #b3b3b3;
    }

.addFilterBtn {
    font-size: 14px;
    color: #B3B3B3;
    font-weight: 400;
    min-width: fit-content;
    line-height: 35px;
}

    .addFilterBtn:hover {
        color: #0D3996 !important;
        text-decoration: none;
    }

    .addFilterBtn:active {
        color: #11103B !important;
    }
    .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-group-footer-row > td > div[dxbl-grid-summary-item], .dxbl-grid .dxbl-grid-table > tbody > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > td > div[dxbl-grid-summary-item], .dxbl-grid .dxbl-grid-table > thead > tr > th, .dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-header-content > span {
        width: 100% !important;
        overflow: unset !important;
    }
.dxbl-grid-table tr th {
    background-color: #fff !important;
    font-size: 16px !important;
    color: #00133D !important;
    font-weight: 600 !important;
    height: 56px !important;
    border-right: 1px solid #E7EBF5 !important;
    border-left: 0 !important;
}

.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: #0D3996 !important;
    --dxbl-checkbox-switch-checked-bg: #0D3996 !important;
    --dxbl-checkbox-radio-checked-border-color: #0D3996 !important;
    --dxbl-checkbox-radio-check-bg: #0D3996 !important;
    --dxbl-checkbox-switch-checked-hover-bg: #0D3996 !important;
    --dxbl-checkbox-radio-checked-hover-bg: #0D3996 !important;
    --dxbl-checkbox-check-element-checked-hover-bg: #0D3996 !important;
    --dxbl-checkbox-radio-checked-hover-border-color: #0D3996 !important;
    --dxbl-checkbox-checked-focus-shadow-color: rgba(13, 57, 150, 0.5) !important;
}

/*OU CELA EST IL UTILISE ???*/
/*.dxbl-btn-outline-secondary { 
    border: 0px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    color: #00133D !important;
    margin-right: 0.5rem !important;
}*/

.dxbl-pager .dxbl-btn-outline-secondary {
    border: 0px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    color: #00133D !important;
    margin-right: 0.5rem !important;
}


.dxbl-pager-page-btn {
    border: 0px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    color: #00133D !important;
    margin-right: 0.5rem !important;
}


.dxbl-pager-active-page-btn {
    background-color: #E7EBF5 !important;
    color: #0D3996 !important;
    border: 0px !important;
    border-radius: 4px !important;
}

.dxbl-grid .dxbl-grid-table {
    --dxbl-grid-border-color: #E7EBF5 !important;
}

.dxbl-grid > .dxbl-grid-bottom-panel:last-of-type {
    border: 0 !important;
}

.dxbl-grid {
    border: 0px !important;
    border-top: 1px solid #E7EBF5 !important;
}

    .dxbl-grid .dxbl-grid-table thead tr th:first-of-type {
        border: 0 !important;
    }

    .dxbl-grid .dxbl-grid-table tbody tr td:first-of-type {
        border: 0 !important;
    }

    .dxbl-grid .dxbl-grid-table tr td {
        overflow: hidden !important;
        color: #00133D !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        height: 37px;
        border: 0px !important;
        border-right: 1px solid #E7EBF5 !important;
        cursor: pointer;
    }

.dxbl-grid-filter-menu-funnel-btn {
    background: url(../assets/FunnelSimple.svg) no-repeat center center;
    width: 16px;
    height: 16px;
}

    .dxbl-grid-filter-menu-funnel-btn svg {
        display: none;
    }

.dxbl-grid .dxbl-grid-table .dxbl-grid-selected-row:nth-child(odd) {
    background-color: #E7EBF5 !important
}

.dxbl-grid .dxbl-grid-table .dxbl-grid-selected-row:nth-child(even) {
    background-color: #E7EBF5 !important
}

.dxbl-grid .dxbl-grid-table tr {
    border-bottom: 0px !important;
}

    .dxbl-grid .dxbl-grid-table tr:nth-child(odd) {
        background-color: #F7F7F7 !important;
    }

    .dxbl-grid .dxbl-grid-table tr:nth-child(even) {
        background-color: #FFFFFF !important;
    }

.rz-datepicker-calendar td .rz-state-active {
    background: #E7EBF5 !important;
    color: #0D3996 !important;
    font-weight: 400 !important;
    border: 2px solid #0D3996 !important;
}

.rz-datepicker-trigger {
    box-shadow: none !important;
}

.dxbl-loading-panel .dxbl-loading-panel-container.dxbl-loading-panel-shading {
    background: #fff !important;
}

.rz-datepicker-trigger .rzi-calendar:before {
    content: '' !important;
    width: 16px;
    height: 16px;
    background: url(../assets/CalendarInput.svg) no-repeat center center;
    display: block;
    margin-top: 4px;
}

.rz-datepicker-calendar td .rz-state-default {
    border-radius: 0 !important;
    color: #00133D;
    font-weight: 400;
}

.rz-button:not(.rz-state-disabled):before, .rz-paginator-element:not(.rz-state-disabled):before {
    top: 10px !important;
    right: 9px !important;
}

.rz-button.rz-secondary {
    background-color: #0D3996 !important;
}

.rz-dropdown-label {
    color: #00133D !important;
    font-weight: 500 !important;
}

.rz-datepicker-calendar td a.rz-state-default, .rz-datepicker-calendar td span.rz-state-default, .rz-datepicker-calendar th a.rz-state-default, .rz-datepicker-calendar th span.rz-state-default {
    background-color: #F9F9F9 !important;
    margin-top: 5px !important;
}

.rz-datepicker-title .rz-dropdown {
    border: 0px !important;
}

.rz-chart {
    width: 100% !important;
}

.grid-item {
    padding: 10px;
}

.item-grid {
    background: #fff !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0px bottom !important;
    border-radius: 10px;
}

.reloadBtn {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    background: transparent url(../assets/BlueClockClockwise.svg) no-repeat center center;
}
.reloadBtn:hover {
    background: #E7EBF5 url(../assets/BlueClockClockwise.svg) no-repeat center center;
}
.reloadBtn:active {
    background: #CFD7EA url(../assets/BlueClockClockwise.svg) no-repeat center center;
}


.widget-editingSize {
    position: absolute;
    z-index: 9999;
    box-shadow: 0px 4px 16px 0px #00000014;
    border-radius: 8px;
    /*padding-top: 50px;*/
    position: absolute;
    top: 40px;
    right: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: #f7f7f7;
}

.widgets {
    position: absolute;
    z-index: 9999;
    background-color: #fff;
    top: 147px;
    left: 53px;
    box-shadow: 0px 4px 16px 0px #00000014;
    /*min-width: 370px;*/
    padding: 12px;
    border-radius: 8px;
    margin-top: 1.2rem !important;
    max-height: 588px;
    overflow-y: auto;
}

.dxbl-checkbox {
    --dxbl-checkbox-check-element-size: 12px !important;
    --dxbl-checkbox-check-element-unchecked-border-width: 1.5px !important;
}

    .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-checkbox-checked .dxbl-checkbox-check-element .dxbl-image {
        width: 8px !important;
        height: 8px !important;
    }

    .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-checkbox-indeterminate .dxbl-checkbox-check-element::before {
        width: 6px !important;
    }

    .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-checkbox-unchecked .dxbl-checkbox-check-element::before {
        border: var(--dxbl-checkbox-check-element-unchecked-border-width) solid #b3b3b3 !important;
    }

.boaGridProgressBar {
    padding : 5px;
}

.dxbl-progress-bar.dxbl-progress-bar.dxbl-progress-bar-success {
    --dxbl-progress-bar-indicator-color: #28a745 !important;
}
.dxbl-progress-bar.dxbl-progress-bar.dxbl-progress-bar-error {
    --dxbl-progress-bar-indicator-color: #dc3545 !important;
}
.dxbl-progress-bar.dxbl-progress-bar.dxbl-progress-bar-pause {
    --dxbl-progress-bar-indicator-color: #ffc107 !important;
}

.dxbl-progress-bar .dxbl-progress-bar-indicator {
    border-radius: 3px !important;
}

dxbl-progress-bar:not(.dxbl-progress-bar-pause):not(.dxbl-progress-bar-success):not(.dxbl-progress-bar-error)
.dxbl-progress-bar-indicator {
    --dxbl-progress-bar-indicator-color: #0d3996;
}


.dxbl-progress-bar .dxbl-progress-bar-track-container .dxbl-progress-bar-track {
    border-radius: 3px;
    --dxbl-progress-bar-indicator-color: #1356e2;
}


/* width */
.widgets::-webkit-scrollbar {
    width: 8px;
}

.modal.fade.show {
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-body-container {
    max-height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 4px;
}

.modal-body {
    padding: 12px;
    padding-right: 8px;
}
    /* width */
    .modal-body-container::-webkit-scrollbar {
        width: 8px;
    }

    /* Track */
    .modal-body-container::-webkit-scrollbar-track {
        background: none; /*#fff;*/
    }

    .dxbl-toast-portal.dxbl-toast-align-center {
        top: -40px; /*Permet de ne pas afficher dxbl-toast-portal (une barre verticale grise au bas de l'écran) lorsqu'un BoaPanel est ouvert*/
    }

    /* Handle */
    .modal-body-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

        /* Handle on hover */
        .modal-body-container::-webkit-scrollbar-thumb:hover {
            background: #B3B3B3;
        }

    /* width */
    .widgets::-webkit-scrollbar {
        width: 8px;
    }
    /* Track */
    .widgets::-webkit-scrollbar-track {
        background: #fff;
    }

    /* Handle */
    .widgets::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

        /* Handle on hover */
        .widgets::-webkit-scrollbar-thumb:hover {
            background: #B3B3B3;
        }

    .action-wrapper a {
        position: relative;
        margin-right: 15px;
    }

    .rz-switch {
        height: 26px !important;
        right: 0px;
        width: 50px !important;
    }

        .rz-switch.rz-switch-checked .rz-switch-circle:before {
            transform: translateX(1.4rem) !important;
            background: #fff !important;
            box-shadow: none !important;
        }

        .rz-switch.rz-switch-checked .rz-switch-circle {
            height: 26px;
            width: 50px;
            background: #0D3996 !important;
        }

        .rz-switch .rz-switch-circle:before {
            left: 4px !important;
            box-shadow: none !important;
        }

        .rz-switch .rz-switch-circle {
            background: #e5e5e5 !important;
        }

    .isnull .dxbl-text-edit-input {
        color: transparent !important;
    }

    .synopticDropdownBtn {
        background-color: #FFF;
        font-weight: 500;
        font-size: 14px;
        color: #0D3996;
        border-radius: 8px;
        text-decoration: none;
        cursor: pointer;
        text-align: center;
        height: 36px;
    }

        .synopticDropdownBtn .dxbl-btn-standalone {
            color: #0D3996;
        }

    .searchbarSynoptic {
        background-color: white;
        position: absolute;
        top: 80px;
        display: flow !important;
        left: 15px;
        z-index: 1010;
        width: 399px;
        border-radius: 7px;
        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
        max-height: 500px;
        overflow: auto;
    }

        .searchbarSynoptic ul {
            overflow-y: auto;
            width: 100%;
            border-radius: 7px;
        }

        .searchbarSynoptic li {
            padding-left: 8px;
            padding-bottom: 3px;
            padding-top: 3px;
        }

            .searchbarSynoptic li:hover {
                background-color: #e6ebf4;
            }

    .widgets ul {
        width: 100%;
    }

        .widgets ul li div {
            display: flex;
            margin: 0;
            align-items: center;
            column-gap: 12px;
        }

        .widgets ul li {
            background-color: #F7F7F7;
            border-radius: 8px;
            display: flex;
            padding: 12px 16px;
            color: #0D3996;
            font-weight: 500;
            font-size: 14px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

    .widgets li:last-of-type {
        margin-bottom: 0px;
    }

    .icon-fournisseur {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(231, 235, 245, 1) url(../assets/ArrowSquareIn.svg) center center no-repeat;
        background-size: 16px;
    }

    .icon-widgetList {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(231, 235, 245, 1) center center no-repeat;
        background-size: 16px;
    }

    .icon-clients {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(231, 235, 245, 1) url(../assets/ArrowSquareOut.svg) center center no-repeat;
        background-size: 16px;
    }

    .icon-inventaire {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(231, 235, 245, 1) url(../assets/FileText.svg) center center no-repeat;
        background-size: 16px;
    }

    .icon-stock-positive {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(231, 235, 245, 1) url(../assets/Package.svg) center center no-repeat;
        background-size: 16px;
    }

    .icon-article {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(231, 235, 245, 1) url(../assets/FilePlus.svg) center center no-repeat;
        background-size: 16px;
    }

    .icon-stock {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(231, 235, 245, 1) url(../assets/ChartLineUp.svg) center center no-repeat;
        background-size: 16px;
    }

    .icon-alerts {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(255, 138, 30, 0.1) url(../assets/Warning.svg) center center no-repeat;
        background-size: 16px;
    }

    .icon-stock-negative {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(241, 39, 39, 0.1) url(../assets/FileMinus.svg) center center no-repeat;
        background-size: 16px;
    }

    .modal-content {
        border: 0px !important;
        box-shadow: none !important;
        width: 100%;
        padding: 12px !important;
        min-width: 350px;
    }

    #deleteModal .modal-content {
        width: 289px !important;
        padding: 0px !important;
    }

.modal {
    background: rgba(26, 26, 26, 0.4) !important;
}

    .modal-header {
        border: 0 !important;
        padding: 0 !important;
    }

    .modal-body h2 {
        color: #00133D;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
    }

    .mt-8 {
        margin-top: 8px !important;
    }

    .modal-body .form-control {
        background: #F7F7F7;
        border-radius: 8px;
        color: #00133D;
        padding: 10px;
        border: 0px;
    }


        .modal-body .form-control:focus {
            outline: 0;
            border: 0;
            background: #F7F7F7 !important;
            box-shadow: none !important;
        }

    .modal-body h1 {
        font-size: 16px;
        color: #0D3996;
        font-weight: 500;
        margin: 0;
        margin-bottom: 2rem;
    }

    .modal-body h3 {
        font-size: 16px;
        color: #00133D;
        font-weight: 600;
        margin-top: 2rem;
    }

        .modal-body h3:first-of-type {
            margin-top: 0px;
        }

    .modal-body label {
        font-size: 12px;
        color: #00133D;
        font-weight: 400;
        margin: 0;
    }

label > span {
    color: #F12727;
}

    .text-red {
        color: #F12727 !important;
    }

    .modal-footer p {
        font-size: 12px;
    }

    .modal-footer {
        border: 0px;
        margin-top: 0px;
        border: 0 !important;
        max-height: 100px;
        overflow: visible;
    }

    .modal.show .modal-dialog {
        max-width: 80%;
    }


    .modal-footer .d-flex {
        width: 100%;
    }

    #deleteModal .modal-body {
        display: flex;
        flex-direction: column;
        padding: 0;
        row-gap: 12px;
    }

    .modal-header .close {
        padding: 0 !important;
        margin: 0 !important;
        position: absolute;
        right: -25px;
        top: -20px;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        opacity: 1;
        background: rgba(255, 255, 255, 0.5) url(../assets/closemodal.svg) no-repeat center center;
    }

        .modal-header .close span {
            display: none;
        }

    .not-visible {
        display: none !important;
    }

    .col-largeText {
        padding: 20px;
    }

    /*****************Picking*************************/
    .pickingStationHeader {
        position: relative;
        height: 0px;
        top: -42px;
        width: 100%;
        font-weight: bold;
        text-align: center;
        display: flex;
        font-size: 34px;
        color: #0D3996;
        font-family: 'Poppins', sans-serif !important;
        align-items: center;
        justify-content: flex-end;
        gap: 40px;
        padding-right: 51px;
    }

    .askSupervisorBtn {
        background-color: #af1616;
    }

        .askSupervisorBtn:hover {
            background-color: #6b1515;
        }


    .pickingContainer {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        /*height: 89%;*/
    }

        .pickingContainer.reverse.vertical {
            flex-direction: column-reverse !important;
        }

        .pickingContainer.reverse {
            flex-direction: row-reverse;
        }

        .pickingContainer:not(.vertical) {
            position: relative;
            top: 30px;
            height: 85%;
        }


        .pickingContainer.vertical {
            flex-direction: column !important;
        }


    .pickingSubContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        height: 100%;
    }


        .pickingSubContainer.vertical {
            flex-direction: row;
        }

            .pickingSubContainer.vertical.left {
                padding-bottom: 10px;
                flex-direction: row;
                width: 300px;
            }

                .pickingSubContainer.vertical.left.reverse {
                    padding-bottom: 0px;
                    padding-top: 10px;
                }

            .pickingSubContainer.vertical.right {
                /* padding-top: 60px;*/
                flex-direction: row;
                width: 100%;
            }



    .quantity.vertical {
        /*height: 0px;*/
        position: relative;
        /*top: 105px;*/
    }

        .quantity.vertical.reverse {
            /*top: -120px;*/
        }



    .pickingCardContainer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1 0 0;
    }

        .pickingCardContainer.reverse {
            flex-direction: row-reverse;
        }

        .pickingCardContainer.vertical {
            flex-direction: column;
            max-width: 300px;
            justify-content: flex-end;
        }

    .right .pickingCardContainer.vertical {
        height: 450px !important;
    }


    .pickingCardContainer.vertical.reverse {
        flex-direction: column-reverse;
    }


    .pickOneBtn {
        display: inline-block;
        width: 68%;
    }

        .pickOneBtn:hover {
            transform: scale(1.05);
        }


    .pickingCard {
        z-index: 100;
        background-color: #fff;
        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        transition: width 0.2s;
        max-height: 400px;
        height: 100%;
        width: 300px;
        padding: 23px;
    }

    .pickingCardFooter {
    }

    .pickingCard.vertical {
        height: 350px !important;
        width: 100% !important;
    }


    .pickingPopup {
        background-color: #fff;
        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        height: 200px;
        width: 600px;
    }

    .pickingPopupContent {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        width: 100%
    }

        .pickingPopupContent input {
            width: 80%;
            text-align: center;
            background: #F7F7F7;
            border-radius: 8px;
            color: #00133D;
            padding: 10px;
            border: 0px;
        }

        .pickingPopupContent h2 {
            color: #0D3996;
        }

    .pickingCard:hover {
        /*transform: scale(1.01);*/
    }

    .pickingImg {
        height: 68%;
        margin-top: 10px;
        width: auto;
        height: auto;
        max-height: 68%;
        max-width: 100%;
    }

    .pickingImgContainer {
        height: 68%;
        width: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .waitingScreen {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 15%;
    }


    .pickingScreen {
        height: 35%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 15%;
    }

    .pickingArrow {
        z-index: 0;
        height: 62.5px;
        margin-right: 15px;
        margin-left: 10px;
        transform: rotate(-90deg);
        /*color: red;*/
        width: 50px;
        position: relative;
        /* left: -220px*/

        display: block;
    }




    .pickingBtnList {
        display: flex;
        width: 100%;
        align-items: flex-end;
        /*height: 20%;*/
        justify-content: space-evenly;
        padding-top: 10px;
    }

    .btnPicking {
        display: flex;
        align-items: center;
        background-color: white;
        /*border: 2px solid #0D3996;*/
        border-radius: 5px;
        /*padding: 4px 3px;*/
        cursor: pointer;
        transition: background-color 0.3s ease;
        border: 0px;
        height: 33px;
        width: 33px;
    }

        .btnPicking.identifyBtn {
            height: 100%;
            width: 60%;
            font-weight: bold;
            border: 2px solid #0D3996;
            color: #0D3996;
            padding: 3px;
            /* border-top: 117px; */
            /*position: relative;
        top: 63px;
        display: block;*/
            display: inline-block;
        }

        .btnPicking.pickingInfoAdditional {
            background: url(../assets/PickingInfoAdditional.svg) no-repeat;
        }

        .btnPicking.pickingItemErrorBtn {
            background: url(../assets/PickingProblemOccured.svg) no-repeat;
        }

        .btnPicking.pickingLoadUnitIsFullBtn {
            background: url(../assets/PickingLoadUnitIsFull.svg) no-repeat;
        }

        .btnPicking.pickingLoadUnitIsEmptyBtn {
            background: url(../assets/PickingLoadUnitIsEmpty.svg) no-repeat;
        }

        .btnPicking.pickingLoadUnitErrorBtn {
            background: url(../assets/PickingErrorLoadUnit.svg) no-repeat;
        }


        .btnPicking:hover {
            text-decoration: none;
            background-color: #E7EBF5;
            /*transform: scale(1.05);*/
        }




    .btnPickingIcon {
        margin-right: 3px;
        display: flex;
        align-items: center;
    }

    .btnPickingText {
        font-size: 15px;
        font-weight: bold;
        color: #0D3996;
    }





    .pickingArrowContainer {
        height: 100px;
        width: 160px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        .pickingArrowContainer.reverse {
            flex-direction: row-reverse;
        }


        .pickingArrowContainer.vertical {
            flex-direction: column;
        }

            .pickingArrowContainer.vertical.reverse {
                flex-direction: column-reverse;
            }


        .pickingArrowContainer:hover {
            cursor: pointer;
            transform: scale(1.03);
            font-weight: bold;
        }


    .pickingArrow.priority1 {
        background: url(../assets/PickingArrowRed.svg) no-repeat;
    }

    .pickingArrow.priority2 {
        background: url(../assets/PickingArrowOrange.svg) no-repeat;
    }

    .pickingArrow.priority3 {
        background: url(../assets/PickingArrowGreen.svg) no-repeat;
    }



    .pickingArrow.reverse {
        transform: rotate(-270deg) !important;
        margin-right: 10px;
        margin-left: 15px;
        /*left: 220px !important;*/
    }

    .pickingArrow.vertical {
        transform: rotate(0deg) !important;
        margin-right: 0px;
        margin-left: 0px;
        margin-bottom: 10px;
        /*  left: 0px !important;
        top: -240px;*/
    }

        .pickingArrow.vertical.reverse {
            margin-top: 10px;
            margin-bottom: 0px;
            /* margin-top: 15px;
            margin-bottom: 0px;*/
            transform: rotate(180deg) !important;
            /* left: 0px !important;
        top: 240px !important;*/
        }

        .pickingArrow.vertical.reverse {
            /*top: -150px;*/
        }


    .pickingErrorText {
        color: red;
    }

    .pickingCard:hover .pickingImg {
        /*filter: blur(4px);*/
    }


    /*********************** Numeric keypad ********************************/

    .numpad-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #displayNumericKeypad {
        width: 312px;
        font-size: 35px;
        text-align: right;
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #F7F7F7;
    }

    .numpad {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-gap: 10px;
    }

        .numpad button {
            width: 100px;
            height: 100px;
            font-size: 24px;
            background-color: #F7F7F7;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }


        .numpad .disabled {
            background-color: #bbb;
        }

        .numpad button .disable {
            background-color: #bbb;
        }


        .numpad button:hover {
            background-color: #ccc;
        }

        .numpad button:active {
            background-color: #bbb;
        }

    .actions {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        width: 100%;
    }

        .actions button {
            width: 150px;
            height: 50px;
            font-size: 20px;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            cursor: pointer;
            background-color: #3686ee;
            font-weight: 500;
            font-size: 20px;
            color: #fff;
            padding: 0.8rem 1rem;
            text-decoration: none;
            text-align: center;
        }

            .actions button:hover {
                background-color: #00133D;
                color: #fff;
                text-decoration: none;
            }

            .actions button:active {
                background-color: #000C25;
                color: #fff;
                text-decoration: none;
            }

    /****************************************************/

    .editSinkBtn {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border-radius: 8px;
        cursor: pointer;
        background: transparent url(../assets/ConfigurationMenuIcon.svg) no-repeat center center;
        background-size: contain;
    }

        .editSinkBtn:hover {
            background: #E7EBF5 url(../assets/ConfigurationMenuIcon.svg) no-repeat center center;
            background-size: contain
        }

        .editSinkBtn:active {
            background: #CFD7EA url(../assets/ConfigurationMenuIcon.svg) no-repeat center center;
            background-size: contain
        }




    .widgetGauge {
        /*margin-top: -23px;*/
    }

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

    .boaTooltip {
        z-index: 1000000;
        position: absolute;
        background-color: rgba(13, 57, 150);
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 4px;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease;
        white-space: nowrap;
        font-size: 12px;
        max-width: 200px;
        width: max-content;
        text-align: start;
        white-space: normal;
    }

        .boaTooltip.top {
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 8px;
        }

        .boaTooltip.right {
            top: 50%;
            left: 100%;
            transform: translateY(-50%);
            margin-left: 8px;
        }

        .boaTooltip.bottom {
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 8px;
        }

        .boaTooltip.left {
            top: 50%;
            right: 100%;
            transform: translateY(-50%);
            margin-right: 8px;
        }

    .boaTooltip-wrapper:hover .boaTooltip {
        visibility: visible;
        opacity: 1;
    }



    @media (max-width: 1024px) {
        .nav-scroll {
            height: calc(100vh - 310px);
        }

        .e-dashboardlayout.e-control {
            display: grid;
            grid-template-columns: repeat(2,auto);
            gap: 10px;
            width: 100%;
            box-sizing: border-box;
            margin: 0 auto;
        }

        .e-panel {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            grid-column: span 1;
            grid-row: span 1;
            height: 100%;
        }

    .inventaire-card h2, .fournisseur-card h2, .clients-card h2, .stock-card h2 {
        /*margin-left: 3rem;*/
        margin-top: 0px;
    }

        .inventaire-card .content {
            display: grid;
            width: calc(100% - 24px);
            height: calc(100% - 24px);
            column-gap: 16px;
            margin-left: 12px;
            margin-right: 12px;
            margin-bottom: 12px;
            row-gap: 16px;
            padding: 0;
            padding-top: 12px;
            grid-template-columns: repeat(4, 1fr);
        }

        .fournisseur-card .content, .clients-card .content {
            padding-top: 12px;
            margin-left: 12px;
            margin-bottom: 12px;
            margin-right: 12px;
            width: calc(100% - 24px);
        }

        .stock-card .content {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 4px;
        }
    }

    @media(max-width:1700px) {
        .client-card {
            background-position: 0px bottom !important;
        }

        .commandes-card {
            background-position: 0px bottom !important;
        }

        .revenus-card {
            background-position: 0px bottom !important;
        }

        .croissance-card {
            background-position: 0px bottom !important;
        }
    }

    @media(max-width:1180px) {
        .action-wrapper .search-menu {
            width: 270px;
            height: 45px;
        }

    .e-dashboardlayout.e-control .e-panel h1 {
        font-size: 50px !important;
    }

        .e-dashboardlayout.e-control .e-panel h3 {
            font-size: 14px !important;
            overflow-wrap: break-word;
            width: 100%;
            text-align: center !important;
        }

        .article-card, .alerts-card, .stock-negative-card, .stock-positive-card, .article-card {
            padding: 16px;
        }
    }




    div.scroll {
        overflow: auto;
    }


        div.scroll::-webkit-scrollbar {
            display: none;
        }

    .navbar-shadow {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    /*test*/
    test {
        margin-top: 5%;
        margin-bottom: 5%;
        display: grid;
        grid-template-rows: auto auto;
        justify-items: center;
        overflow: hidden;
    }

    main#carousel1, main#carousel2 {
        width: 100vw;
        height: 100%;
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        perspective: 300px;
        transform-style: preserve-3d;
    }

    main#carousel1 {
        --position: var(--position1);
    }

    main#carousel2 {
        --position: var(--position2);
    }

    .multiGrid {
        padding-bottom: 40px;
    }

    div.item {
        position: absolute;
        display: grid;
        width: 60%;
        height: 60%;
        align-items: self-start;
        justify-content: center;
        border: 2px solid;
        border-color: #0D3996;
        border-radius: 5px;
        --r: calc(var(--position) - var(--offset));
        --abs: max(calc(var(--r) * -1), var(--r));
        transition: all 0.25s linear;
        transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r)));
        -webkit-font-smoothing: antialiased;
        will-change: transform;
    }

        div.item:nth-of-type(1) {
            --offset: 1;
        }

        div.item:nth-of-type(2) {
            --offset: 2;
        }

        div.item:nth-of-type(3) {
            --offset: 3;
        }

        div.item:nth-of-type(4) {
            --offset: 4;
        }

    div.mobileMenu {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: fit-content;
        position: relative;
    }

    div.mobileMenuItem {
        flex: 1 1 calc(50% - 20px);
        background-color: #e6eaf5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 50%;
        height: 200;
        cursor: pointer;
        z-index: 100;
        transition: 150ms;
    }

    .mobileMenuContent {
        font-family: 'Poppins';
        font-weight: bold;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 15px 0 !important;
        align-items: center;
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden
    }

    .ctaPns {
        --shadowColor: 221 84% 32%;
        display: grid;
        flex-wrap: wrap;
        background: hsl(0, 1%, 100%);
        max-width: 50rem;
        width: 80%;
        box-shadow: 0.65rem 0.65rem 0 hsl(var(--shadowColor) / 1);
        border-radius: 0.8rem;
        overflow: hidden;
        border: 0.5rem solid;
        height: fit-content;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        align-items: center;
        padding: 10px;
        gap: 10px;
    }

    .select {
        position: relative;
        display: flex;
        width: 20em;
        height: 3em;
        border-radius: .25em;
        overflow: hidden;
        color: white;
        background-color: #3686ee;
        transition: .25s all ease;
    }

    /* BoaToggle */

    .boatoggle {
        position: relative;
        display: inline-block;
        width: 36px;
        height: 18px;
    }

        .boatoggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .sliderboatoggle {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #7f7f7f;
        transition: .2s;
        border-radius: 18px;
    }

        .sliderboatoggle:hover {
            background-color: #4c4c4c;
        }

        .sliderboatoggle:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 2px;
            top: 2px;
            background-color: white;
            transition: .2s;
            border-radius: 50%;
        }

    input:checked + .sliderboatoggle {
        background-color: #3686ee;
    }

    input:checked:hover + .sliderboatoggle {
        background-color: #122958;
    }

    input:focus + .sliderboatoggle {
        box-shadow: 0 0 1px #F7F7F7;
    }

    input:checked + .sliderboatoggle:before {
        transform: translateX(18px);
    }

.modal-synoptic {
    position: absolute;
    background: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
    padding: 12px;
}

    .modal-synoptic .modal-body-container {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: auto; 
    }

    @media (min-width:651px) {
        .card-unhautorized {
            height: 200px !important;
            width: 375px !important;
            display: grid;
            place-items: center;
            gap: 6px;
            padding: 16px 10px;
            border: 0;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 6px 18px rgba(13, 57, 150, 0.08);
            color: #0D3996;
            font-weight: 600;
        }
        .std-mobile-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 12px;
            width: 100%;
        }

        .mtn-title {
            font-size: 16px;
        }
        .synoptic-check {
            height: 20px !important;
            width: 20px !important;
        }
        .conf-actions {
            padding-bottom: 0px !important;
        }

        .pv-field .pv-input, .pv-field .pv-select, .pv-field .form-control {
            height: 30px !important;
        }

        .pv-select-native {
            width: 200px !important;
            height: 30px !important;
            font-size: 14px !important;
            align-self: center;
        }
        .pv-row * {
            font-size: 14px !important;
        }
        .pv-button {
            font-size: 14px !important;
        }
        .settings-title.settings-toggle {
            font-size: 16px !important;
/*            margin: 14px 0 10px !important;
*/            padding: unset !important;
        }
        .pv-field .pv-input, .pv-field .pv-select, .pv-field .form-control {
            font-size: 14px !important;
        }

        .statistic-switch {
            transform: unset !important;
            position: unset !important;
        }

        .modal-body-container {
            max-height: unset;
        }
        .pv-mobile-simple-list {
            margin-bottom: 0px !important;
        }
        .pv-mobile-title {
            margin-top: 0px !important;
        }
        .ne-header .ne-field {
            align-items: center;
        }
        .ne-location .btnText {
            top: 50%;
            transform: translateY(-50%);
        }

        .settings-input {
            font-size: 14px !important;
            height: 35px !important;
        }

        .refreshBtn {
            width: 30px !important;
            height: 30px !important;
        }
        .Selectable {
            font-size: 14px;
        }

        .pv-select-native {
            border: 1px solid #e6eaf5 !important;
            border-radius: 10px !important;
        }

        .msg-k {
            font-size: 12.5px !important;
            opacity: .7;
        }
        .msg-v {
            font-size: 12px !important;
        }

        .msg-empty {
            font-size: 14px !important;
        }
        .std-mobile-actions .action-card {
             height: 85px !important; 
        }
        .mobile-alt .btn-primary-cta {
            height: 35px;
            margin-top: 0px !important;
        }

        .std-mobile-actions .action-card img {
            width: 20px !important;
            height: 20px !important;
        }

        .modal-synoptic .view-toggle {
            height: 50px !important;
            width: 325px !important;
        }

        .ne-header .mobile-top-right {
            width: 30px !important;
            height: 30px !important;
        }
        .card-header {
            font-size: 14px !important;
            margin-bottom: 8px;
        }
        .alt-card-title {
            font-size: clamp(14px, 3.6vw, 16px) !important;
        }
        .mobile-alt .alt-card-desktop {
            display: grid !important;
            grid-template-columns: 1fr auto;
        }

        .view-toggle .seg {
            font-size: 14px !important;
        }

        .ne-settings .btnText, .ne-location .btnText {
            font-size: clamp(14px, 3.6vw, 16px) !important;
        }

        .std-mobile-card .card-header {
            font-size: 14px !important;
            margin: 0px !important;
        }

        .modal-synoptic {
            width: 600px;
            height: 95% !important;
            right: 30px;
            top: 37px;
        }

        .synoptic-scale {
            transform: scale(1);
        }
    }

    .synoptic-sheet {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ne-header {
        display: grid !important;
        grid-template-columns: 1fr auto;
        row-gap: 10px !important;
        column-gap: 12px !important;
        position: relative !important;
        padding-right: 44px !important;
    }

        .ne-header .refreshBtn {
            justify-self: end;
        }

        .ne-header .ne-field {
            display: flex !important;
            color: #0D3996 !important;
            gap: 10px !important;
            font-size: 1.0em !important;
            padding: 6px 14px !important;
        }

            .ne-header .ne-field span:first-child {
                font-weight: 600 !important;
                opacity: .85 !important;
            }

            .ne-header .ne-field span:last-child {
                font-weight: 500 !important;
                color: #082a7a !important;
            }

        .ne-header .mobile-top-right {
            position: absolute !important;
            top: 8px;
            right: 8px;
            width: 50px ;
            height: 50px ;
            z-index: 2;
        }

    .ne-status {
        color: #0D3996 !important;
        font-size: 1.0em !important;
        text-align: left !important;
    }

    .ne-settings select {
        background: #fff !important;
        border: 1px solid #e6eaf5 !important;
        border-radius: 10px !important;
        padding: 0 10px !important;
        width: 100% !important;
        font-size: 1.0em !important;
        height: 44px !important;
    }

    .ne-settings .btnText, .ne-location .btnText {
        border-radius: 10px !important;
        background: rgba(13,57,150,0.08) !important;
        color: #0D3996 !important;
        padding: 0 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: clamp(24px, 3.6vw, 16px);
        height: 44px !important;
        padding-inline: 14px !important;
    }

    .ne-ports {
        padding: 0 !important;
        overflow: hidden !important;
    }

    .ne-ports-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

        .ne-ports-table thead {
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 1;
        }

        .ne-ports-table table,
        .ne-ports-table {
            min-width: 520px !important;
        }

            .ne-ports-table th, .ne-ports-table td {
                white-space: nowrap !important;
                font-size: clamp(24px, 3.6vw, 16px) !important;
                padding: 12px 14px !important;
            }

    .ne-delete {
        text-align: center !important;
        background: transparent !important;
        box-shadow: none !important;
    }

        .ne-delete .btnText {
            width: 100% !important;
            font-size: clamp(24px, 3.7vw, 16px) !important;
            height: 48px !important;
            border-radius: 10px !important;
            background: rgba(220, 53, 69, .1) !important;
            color: #dc3545 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

    .ne-location .btnText,
    .synoptic-sheet > div[style*="justify-content:space-evenly"] .btnText {
        font-size: clamp(24px, 3.7vw, 16px);
        height: 48px !important;
    }

    .ne-ports .btnText {
        font-size: clamp(20px, 3.7vw, 16px) !important;
        height: 48px !important;
    }

    .synoptic-sheet span,
    .synoptic-sheet label,
    .synoptic-sheet th,
    .synoptic-sheet td {
        letter-spacing: .1px;
    }

    .ne-location .btnText {
        position: absolute !important;
        right: 15px;
    }

            .synoptic-sheet .ne-header,
            .synoptic-sheet .ne-status,
            .synoptic-sheet .ne-location,
            .synoptic-sheet .ne-settings,
            .synoptic-sheet .ne-ports,
            .synoptic-sheet .ne-delete {
                background: #ffffff !important;
                border-radius: 12px !important;
                box-shadow: 0 6px 18px rgba(13,57,150,0.08) !important;
                padding: 14px !important;
                display: block !important;
            }

    .hide {
        display: none !important;
    }

    .mobile-only {
        display: none;
    }

    /* Barre du switch */
    .mobile-toolbar {
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        margin-bottom: 10px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(13,57,150,0.08);
    }

        .mobile-toolbar .toolbar-label {
            font-weight: 600;
            color: #0D3996;
        }

    /* Switch (iOS-like) */
    .switch {
        position: relative;
        width: 52px;
        height: 30px;
        display: inline-block;
    }

        .switch input {
            display: none;
        }

        .switch .slider {
            position: absolute;
            inset: 0;
            background: #dfe6f7;
            border-radius: 999px;
            transition: background .2s ease;
        }

            .switch .slider::before {
                content: "";
                position: absolute;
                left: 4px;
                top: 4px;
                width: 22px;
                height: 22px;
                background: #fff;
                border-radius: 50%;
                box-shadow: 0 2px 6px rgba(0,0,0,.12);
                transition: transform .2s ease;
            }

        .switch input:checked + .slider {
            background: #0D3996;
        }

            .switch input:checked + .slider::before {
                transform: translateX(22px);
            }


    /*@media (max-width: 650px) {
*/ .synoptic-sheet.mobile-alt {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-alt .alt-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(13,57,150,0.08);
        padding: 12px;
    }

    .mobile-alt .alt-chip {
        background: rgba(13,57,150, .08);
        color: #0D3996;
        border-radius: 999px;
        padding: 8px 12px;
        font-weight: 600;
        width: fit-content;
    }

    .mobile-alt .alt-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mobile-alt .alt-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(13,57,150,0.08);
        padding: 12px;
    }

    .mobile-alt .alt-card-title {
        font-size: clamp(24px, 3.6vw, 16px);
        color: #6b7aa6;
        margin-bottom: 6px;
    }

    .mobile-alt .alt-card-value {
        font-size: clamp(25px, 3.9vw, 18px);
        color: #0D3996;
        font-weight: 600;
        background: transparent;
        border: 0;
        padding: 0;
        text-align: left;
    }

    .mobile-alt .select-wrap {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
    }

    .mobile-alt .ne-select:focus {
        outline: none;
        border-color: #0D3996 !important;
        box-shadow: 0 0 0 3px rgba(13,57,150,.18);
    }

    .mobile-alt .ne-select:disabled {
        background: #f5f7fd !important;
        color: #9aa8c7 !important;
        border-color: #e6eaf5 !important;
    }

    .mobile-alt .ne-select {
        -webkit-appearance: none;
        appearance: none;
        width: 100% !important;
        min-height: 52px !important;
        line-height: 52px !important;
        border: 1px solid #d7dff0 !important;
        border-radius: 14px !important;
        padding: 0 44px 0 14px !important;
        color: #0D3996 !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(13,57,150,.06);
        transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
    }

        .mobile-alt .ne-select option {
            font-size: 16px;
        }

    .mobile-alt .select-wrap::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background: url("/assets/chevron-down.svg") no-repeat center / 16px 16px;
        pointer-events: none;
        opacity: .7;
    }

    .mobile-alt .btn-primary-cta {
        width: 100%;
        height: 44px;
        border-radius: 10px;
        background: #0D3996;
        color: #fff;
        border: 0;
        font-weight: 600;
        margin-top: 15px;
    }

    .mobile-alt .alt-section-title {
        margin-top: 4px;
        margin-bottom: 2px;
        color: #6b7aa6;
        font-weight: 700;
    }

.mobile-alt .alt-port-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-alt .alt-port-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(13,57,150,0.08);
    padding: 12px;
    min-width: 0; 
}

    .mobile-alt .alt-port-card .row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 10px;
        align-items: center;
        padding: 6px 0;
        margin-right: 0;
        margin-left: 0;
        border-bottom: 1px dashed #eef1f6;
        min-width: 0;
    }
        .mobile-alt .alt-port-card .row.grid {
            display: grid;
        }
        .mobile-alt .alt-port-card .row:last-child {
            border-bottom: 0;
        }

    .mobile-alt .alt-port-card .k {
        color: #6b7aa6;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-alt .alt-port-card .v {
        color: #0D3996;
        font-weight: 600;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Si ton select garde class="v", on force le comportement */
    .mobile-alt .alt-port-card select.v {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 36px;
        border-radius: 10px;
        border: 1px solid rgba(13,57,150,0.18);
        background: #fff;
        color: #0D3996;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7aa6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
    }

        .mobile-alt .alt-port-card select.v:focus {
            outline: none;
            border-color: rgba(13,57,150,0.45);
            box-shadow: 0 0 0 3px rgba(13,57,150,0.12);
        }

        .mobile-alt .alt-port-card .row.right .v {
            display: flex;
            justify-content: flex-end; 
            align-items: center;
        }

    .std-mobile-only {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


        .std-mobile-actions .action-card {
            display: grid;
            place-items: center;
            gap: 6px;
            padding: 16px 10px;
            border: 0;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 6px 18px rgba(13,57,150,0.08);
            color: #0D3996;
            font-weight: 600;
            height: 130px;
        }

            .std-mobile-actions .action-card img {
                width: 28px;
                height: 28px;
                scale: 1.4;
            }

            .std-mobile-actions .action-card:active {
                transform: translateY(1px);
            }

            .std-mobile-actions .action-card:hover {
                background-color: #E7EBF5;
                text-decoration: none;
            }

    .std-mobile-card {
        position: relative;
        background: #f3f6ff;
        border-radius: 14px;
        padding: 14px 12px 10px 12px;
        box-shadow: 0 6px 18px rgba(13,57,150,0.08);
    }

        .std-mobile-card .card-header {
            font-size: 22px;
            letter-spacing: .08em;
            /*            color: #6b7aa6;
*/          font-weight: 700;
            border-bottom: unset !important;
            background-color: transparent;
            margin-bottom: 0px;
        }

        .std-mobile-card .card-pill {
            position: absolute;
            top: 28px;
            left: 12px;
            right: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

    .card-pill .pill-left {
        background: #fff;
        color: #9aa3b2;
        border-radius: 999px;
        padding: 8px 16px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        opacity: .85;
    }

    .card-pill .pill-right {
        margin-left: auto;
        border: 0;
        border-radius: 999px;
        padding: 10px 16px;
        background: #FF3B30;
        color: #fff;
        font-weight: 700;
        box-shadow: 0 6px 18px rgba(255,59,48,.28);
    }

    .std-mobile-card .kv {
        background: #fff;
        border-radius: 12px;
        padding: 8px;
        box-shadow: 0 2px 8px rgba(13,57,150,0.06);
    }

        .std-mobile-card .kv .row {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            padding: 10px 8px;
            border-bottom: 1px dashed #e6eaf5;
        }

            .std-mobile-card .kv .row:last-child {
                border-bottom: 0;
            }

        .std-mobile-card .kv .k {
            color: #6b7aa6;
        }

        .std-mobile-card .kv .v {
            color: #0D3996;
            font-weight: 700;
        }

            .std-mobile-card .kv .v.linky {
                color: #1e65ff;
            }

    .mobile-status-info {
        justify-content: flex-start !important;
    }
    /*}*/

    /*@media (max-width: 650px) {
*/ .mobile-scroll {
        flex: 1 1 auto;
        overflow: visible !important;
        height: auto !important;
        padding-bottom: 0 !important;
        -webkit-overflow-scrolling: touch;
        padding: 12px;
    }

    .synoptic-sheet * {
        max-width: 100%;
    }

    #container, .modal-synoptic, .modal-body-container {
        overflow-y: visible !important;
    }

    .view-toggle.mobile-only {
        position: sticky;
        z-index: 15;
        display: flex;
        gap: 6px;
        margin: 8px 12px;
        padding: 4px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(13,57,150,.12);
    }



    .modal-synoptic .view-toggle {
        bottom: 1px;
        z-index: 5;
        display: flex;
        gap: 6px;
        padding: 6px;
        background: #fff;
        border-radius: 999px;
        box-shadow: 0 10px 25px rgba(0,0,0,.12);
        width: 450px;
        justify-self: anchor-center;
        justify-content: center;
        height: 70px;
        transition: opacity .2s ease, transform .2s ease;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .modal-synoptic.expanded .view-toggle {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .view-toggle {
        background: #fff;
        border-radius: 999px;
        box-shadow: 0 8px 24px rgba(13,57,150,.12);
        padding: 4px;
        gap: 4px;
    }

        .view-toggle .seg {
            border: 0;
            background: transparent;
            font-weight: 600;
            font-size: 22px;
            padding: 10px 16px;
            border-radius: 999px;
            color: #9aa3b2;
            cursor: pointer;
            line-height: 1;
        }

            .view-toggle .seg.active {
                background: #E7EBF5;
            }

            .view-toggle .seg:hover {
                background-color: #E7EBF5;
                text-decoration: none;
            }

            .view-toggle .seg.left {
                border-radius: 999px 0 0 999px;
            }

            .view-toggle .seg.mid {
                border-radius: 0;
            }

            .view-toggle .seg.right {
                border-radius: 0 999px 999px 0;
            }

    button, .btnText, .action-card {
        touch-action: manipulation;
    }
    /*}*/

    @media (min-width: 651px) {
        .mobile-only {
            display: none !important;
        }

        .hide-on-desktop {
            display: none !important;
        }
    }

    /*@media (max-width:650px) {
*/ .msg-list {
        display: grid;
        gap: 10px;
    }

    .msg-empty {
        padding: 8px 12px;
        font-size: 25px;
        opacity: .7;
    }

    .msg-item {
        border: 1px solid #e6eaf5;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }

        .msg-item:hover {
            background-color: #E7EBF5;
            text-decoration: none;
        }

    .msg-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        color: #0D3996;
        cursor: pointer;
        list-style: none;
    }

    .msg-left {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .msg-ico {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    .msg-type {
        font-weight: 600;
    }

    .msg-right {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .msg-time {
        white-space: nowrap;
        opacity: .75;
        font-weight: 500;
    }

    .msg-caret {
        width: 10px;
        height: 10px;
        border-right: 2px solid #0D3996;
        border-bottom: 2px solid #0D3996;
        transform: rotate(-45deg);
        transition: transform .18s ease;
    }

    .msg-item[open] .msg-caret {
        transform: rotate(45deg);
    }

    .msg-body {
        padding-left: 12px;
        display: grid;
        gap: 6px;
    }

    .msg-row {
        display: grid;
        grid-template-columns: 110px 1fr;
        align-items: start;
        gap: 8px;
    }

    .msg-k {
        font-size: 22.5px;
        opacity: .7;
    }

    .msg-v {
        font-size: 22px;
    }

        .msg-v.mono {
            word-break: break-word;
            margin-left: 100px;
        }

    .msg-row {
        grid-template-columns: 96px 1fr;
    }

    .msg-item .msg-body,
    .msg-item .msg-body * {
        -webkit-user-select: text !important;
        user-select: text !important;
        cursor: text;
    }

    .msg-item .msg-body {
        -webkit-touch-callout: default;
    }

    .msg-header {
        -webkit-user-select: none;
        user-select: none;
    }


    .settings-sep {
        margin: 8px 0 !important;
        opacity: .6;
    }

    .settings-section {
        padding: 0 12px 0px;
    }

    .settings-title {
        margin: 5px 0 5px;
        font-size: 16px;
        font-weight: 700;
        text-align: left !important;
        color: #0D3996;
        padding: 0.2rem 0.5rem;
    }

    .settings-group {
        margin-bottom: 12px;
    }

    .param-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .settings-actions {
        margin-top: 8px;
    }

        .settings-actions .actions-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
            margin-bottom: 8px;
        }

        .settings-actions .btnText {
            min-height: 44px;
            border-radius: 10px;
            padding: 0 12px;
            box-shadow: 0 6px 18px rgba(13,57,150,.10);
            text-align: center;
            align-content: center;
        }

        .settings-actions .actions-send {
            align-items: stretch;
        }

    .settings-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 44px;
        font-size: large;
        border-radius: 10px !important;
    }

    .settings-actions .synopticDropdownBtn {
        flex: 0 0 auto;
        height: 44px;
        border-radius: 10px !important;
        align-self: center;
    }

    .conf-table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
    }

        .conf-table thead {
            display: none !important;
        }

        .conf-table tr {
            display: block;
            background: #fff;
            border: 1px solid #e6eaf5;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 8px 24px rgba(13,57,150,.06);
        }

        .conf-table td {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 0 !important;
            padding: 6px 0 !important;
        }

            .conf-table td:first-child {
                font-weight: 600;
                color: #0D3996;
                padding-right: 12px !important;
            }

        .conf-table select {
            width: 100%;
            max-width: 260px;
            height: 44px;
            border: 1px solid #e6eaf5 !important;
            border-radius: 10px !important;
            padding: 0 12px !important;
            background: #fff !important;
            font-size: 16px;
        }

    .conf-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding: 10px 12px;
        gap: 8px;
    }

        .conf-actions .btnText {
            min-height: 44px;
            border-radius: 10px;
            padding: 0 14px;
            box-shadow: 0 6px 18px rgba(13,57,150,.10);
        }

    .param-history {
        position: fixed !important;
        left: 12px;
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
        max-height: 40vh;
        overflow: auto;
        background: #fff;
        border: 1px solid #e6eaf5;
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(13,57,150,.18);
        padding: 8px;
        z-index: 9999;
    }

        .param-history ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .param-history li {
            padding: 10px 12px;
            border-radius: 8px;
        }

            .param-history li:hover {
                background: #f5f7ff;
            }

    .modal-body-container .table + hr {
        display: none;
    }

    h1 {
        font-size: 18px;
        margin: 18px 0 10px;
    }

    .settings-group.is-collapsed-mobile {
        display: none;
    }

    .settings-section {
        margin-bottom: 8px;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }

    .settings-title.settings-toggle {
        width: 100%;
        border: none;
        background: transparent;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 25px;
    }

    .settings-chevron {
        font-size: 30px;
    }

    .settings-group {
        padding: 4px 12px 12px;
    }
    /*}*/

    @media (min-width: 650px) {
        .settings-group {
            display: block;
        }
    }

        .pv-select-native {
            height: 44px;
            border: 1px solid #e6eaf5 !important;
            border-radius: 10px !important;
            padding: 0 12px !important;
            background: #fff !important;
            font-size: 20px;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
        }

        .pv-label {
            width: auto !important;
            margin-bottom: 6px;
            font-weight: 600;
            color: #0D3996;
        }

        .pv-control {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }

            .pv-control .pv-input,
            .pv-select {
                width: 58% !important;
                font-size: large;
                border-radius: 12px !important;
            }

        .pv-saved-value {
            width: 40% !important;
        }

        .pv-field .pv-input,
        .pv-field .pv-select {
            width: 100% !important;
        }


        .pv-field {
            flex: 1 1 auto;
            min-width: 0;
            display: grid;
            grid-template-rows: auto auto;
            row-gap: 6px;
        }

            .pv-field .pv-input,
            .pv-field .pv-select,
            .pv-field .form-control {
                height: 46px;
                border-radius: 12px !important;
                font-size: 18px;
                padding: 8px 12px !important;
                box-sizing: border-box;
            }

        .pv-control > :not(.pv-field) {
            flex: 0 0 auto;
        }

        .pv-field .pv-select {
            appearance: none;
            -webkit-appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, #0D3996 50%), linear-gradient(135deg, #0D3996 50%, transparent 50%);
            background-size: 8px 8px, 8px 8px;
            background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
            background-repeat: no-repeat;
            padding-right: 36px !important;
        }

        .pv-error {
            color: #c92a2a;
            font-size: 13px;
            line-height: 1.2;
        }

        .pv-control > * + * {
            margin-top: 0;
        }

        .pv-row * {
            max-width: 100%;
            font-size: large;
            box-sizing: border-box;
        }

        .pv-button {
            font-size: 22px;
        }

        pv-unauthorized {
            display: grid;
            place-items: center;
            gap: 6px;
            padding: 16px 10px;
            border: 0;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 6px 18px rgba(13, 57, 150, 0.08);
            color: #0D3996;
            font-weight: 600;
            height: 130px;
        }



        .pv-picker {
            position: relative;
        }

        .pv-dd {
            position: relative;
        }

            .pv-dd[open] > .pv-dd-trigger {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }

        .pv-dd-trigger {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            min-height: 48px;
            padding: 10px 14px;
            border: 1px solid #e6eaf5;
            border-radius: 12px;
            background: #fff;
            color: #0D3996;
            font-size: 16px;
            line-height: 1.3;
            box-sizing: border-box;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .pv-dd-panel {
            max-height: 60vh;
            overflow-y: auto;
            background: #fff;
            box-shadow: 0 -12px 32px rgba(13,57,150,.14);
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 8px;
            z-index: 100000;
        }

        .pv-dd-list {
            list-style: none;
            margin: 0;
            padding: 4px;
        }

        .pv-dd-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 14px 12px;
            font-size: 16px;
            background: #fff;
            border: 1px solid #eef1f8;
            border-radius: 12px;
            margin-bottom: 8px;
            text-align: left;
            cursor: pointer;
        }

            .pv-dd-option.is-active {
                border-color: #0D3996;
                box-shadow: 0 0 0 3px rgba(13,57,150,.12);
            }

        .pv-dd-check {
            margin-left: 12px;
        }

        .pv-dd-option:focus {
            outline: 2px solid #0D3996;
        }

        .pv-dd-panel {
            -webkit-overflow-scrolling: touch;
        }

        .modal-synoptic .pv-dd-panel, .modal-synoptic .pv-dd-trigger {
            pointer-events: auto;
        }


        .pv-dd-trigger.is-disabled {
            opacity: .55;
            pointer-events: none;
        }

        .m-mask {
            position: fixed;
            inset: 0;
            background: #f7f7f7;
            z-index: 1001;
        }

        .m-dialog-wrap {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 16010;
            padding: 20px;
        }

        .m-dialog {
            pointer-events: auto;
            position: fixed;
            width: 100%;
            max-width: 520px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 18px 46px rgba(0,0,0,.2);
            padding: 16px;
        }

        .m-title {
            font: 700 18px/1.2 system-ui, sans-serif;
            color: #0D3996;
            margin-bottom: 8px;
            font-size: 20px;
        }

        .m-body {
            margin-bottom: 14px;
            color: #2c3e50;
            font-size: 15px;
        }

        .m-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        .m-btn {
            border: 0;
            border-radius: 10px;
            padding: 10px 14px;
            font: 600 14px/1 system-ui, sans-serif;
        }

            .m-btn.primary {
                background: #0D3996;
                color: #fff;
            }

            .m-btn.ghost {
                background: #eef2ff;
                color: #0D3996;
            }

            .m-btn.text {
                background: transparent;
                color: #0D3996;
            }


    .desktop-only {
        display: inline-block;
    }


    #synopticSheet {
        transition: height .25s ease-out;
    }

    html.modal-lock,
    body.modal-lock {
        overflow: hidden;
        height: 100%;
    }

    #synopticSheet.scroll-locked,
    #synopticSheet.scroll-locked .modal-body-container,
    #synopticSheet.scroll-locked .mobile-scroll {
        overflow: hidden !important;
        overscroll-behavior: contain;
    }
    /*}*/

    .no-scroll {
        overflow: hidden !important;
    }

    .body-no-scroll {
        overflow: hidden !important;
        height: 100% !important;
        /*        touch-action: none;
*/
    }

    .diag-spinner {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid rgba(0, 0, 0, .15);
        border-top-color: rgba(0, 0, 0, .6);
        animation: diag-spin 0.7s linear infinite;
        display: inline-block;
    }

    @keyframes diag-spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .diag-last-run {
        font-size: 14px;
    }

    #mobileSelectModal {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: var(--app-vh) !important;
        background: rgba(0,0,0,0.35);
        z-index: 1005;
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
    }

        #mobileSelectModal .modal-dialog {
            margin: 0 !important;
            width: 100% !important;
            height: 100% !important;
            display: flex;
            flex-direction: column;
            border-radius: 0;
            background: white;
        }

        #mobileSelectModal .modal-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow-y: hidden;
        }

        #mobileSelectModal .modal-body {
            flex: 1 1 auto;
            overflow-y: hidden;
        }

        #mobileSelectModal .modal-footer {
            flex-shrink: 0;
        }

    .pv-mobile-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 12px !important;
    }

    .pv-mobile-list {
        overflow-y: auto;
    }

    .pv-mobile-loading,
    .pv-mobile-empty {
        padding: 20px 8px;
        text-align: center;
        font-size: 0.95rem;
        color: #777;
    }

    .pv-mobile-list {
        overflow-y: auto;
        padding: 4px 2px 8px;
        -webkit-overflow-scrolling: touch;
    }

    .pv-mobile-simple-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 75px !important;
    }

    .pv-mobile-simple-item {
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 0 6px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(15, 23, 42, 0.10);
        overflow: hidden;
    }

    .pv-mobile-simple-list .pv-mobile-simple-item:last-child {
        margin-bottom: 24px;
    }


    .pv-mobile-item-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        font-size: 1.1rem;
        line-height: 1.3;
        color: #111827;
    }

    .pv-mobile-simple-item:active .pv-mobile-item-main {
        background: #eef2ff;
    }

    .pv-mobile-simple-item.is-selected {
        background: linear-gradient(90deg, #e0edff, #ffffff);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    }

        .pv-mobile-simple-item.is-selected .pv-mobile-item-main {
            font-weight: 600;
        }

    .pv-mobile-simple-item + .pv-mobile-simple-item {
        margin-top: 2px;
    }

    .panelLoader-container .btnNormal[disabled] {
        opacity: 0.4;
        pointer-events: none;
    }

    .statistic-switch {
        display: inline-flex;
        align-items: center;
        transform: scale(2);
        position: absolute;
        right: 15px;
    }

    boaTooltip bottom {
        visibility: hidden !important;
    }

    .mobile-busy-container {
        position: relative;
    }

        .mobile-busy-container.is-busy > *:not(.mobile-busy-overlay) {
            pointer-events: none;
            opacity: 0.9;
        }

    .mobile-busy-overlay {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.22);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(2px);
        z-index: 50;
    }

    .mobile-busy-spinner {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 3px solid rgba(255, 255, 255, 0.5);
        border-top-color: #ffffff;
        animation: mobileBusySpin 0.8s linear infinite;
        margin-bottom: 8px;
    }

    .mobile-busy-text {
        color: #ffffff;
        font-size: 0.95rem;
    }

    @keyframes mobileBusySpin {
        to {
            transform: rotate(360deg);
        }
    }

    .std-mobile-actions .action-card[disabled] {
        opacity: 0.5;
        pointer-events: none;
    }

    body.mobile-location-open .synoptic-scale {
        width: 100% !important;
        transform: none !important; /* annule le scale calculé par le JS */
        transform-origin: top left !important;
    }

    .pv-mobile-search {
        margin-bottom: 8px;
    }

    .pv-mobile-search-input {
        width: 100%;
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        font-size: 14px;
    }

.boaTooltip-content {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.synoptic-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 48px; 
}

    .synoptic-header .view-toggle {
        display: inline-flex;
    }

    .synoptic-header .header-refresh {
        position: absolute;
        right: 12px;
        top: 50%;
/*        transform: translateY(-50%);
*/        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .synoptic-header .header-refresh {
        background-size: contain;
    }

.ne-location {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: .5rem;
}

.ne-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 5px;
}

.ne-text {
    flex: 1;
    min-width: 0;
}

.ne-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}