#preload {
    position: relative;
    z-index: 9999999999;
    pointer-events: none;
    cursor: not-allowed;
}

#preload .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0000007a;
    backdrop-filter: blur(5px);
}

#preload .loading img {
    width: 200px;
    animation: bounce 1s infinite ease-in-out;
}

.nav-item button.solde-pro-header,
.nav-item button.seuil-pro-header {
    position: relative;
    background: transparent;
    color: #fff;
    padding: 0 5px;
    width: 50px;
    min-width: max-content;
    padding-right: 20px;
    border-radius: 5px;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease;
}

.nav-item button.solde-pro-header {
    border: 1px solid #4c4aad;
}

.nav-item button.seuil-pro-header {
    border: 1px solid #ad4a4aff;
}

.nav-item>ul>li>button.solde-pro-header:before,
.nav-item>ul>li>button.seuil-pro-header:before {
    background-color: transparent;
}

.solde-pro-header .icon,
.seuil-pro-header .icon {
    position: absolute;
    right: 0%;
    width: 30px;
    height: 30px;
    font-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    transform: translateX(50%);
}

.solde-pro-header .icon {
    background: #4c4aad;
}

.seuil-pro-header .icon {
    background: #ad4a4aff;
}

.solde-pro-header .kl-solde-user {
    color: #4c4aad;
    font-weight: 700;
}

.seuil-pro-header .kl-seuil-user {
    color: #ad4a4aff;
    font-weight: 700;
}

@keyframes bounce {

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

    50% {
        transform: translateY(-10px);
        /* hauteur du bond */
    }
}
.sidebar {
    padding-top: 20px;
}
.text-to-upper {
    text-transform: uppercase;
}
.solde-and-seuil-boutique {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.nav-item button.solde-pro-header {
    margin-right: 15px;
}

/* new sidebar */
.sidebar .nav .nav-item .nav-link {
    padding: 0.6rem 1rem 0.6rem 1rem;
}

.sidebar .nav:not(.sub-menu)>.nav-item.active,
.sidebar .nav .nav-item.active>.nav-link,
.sidebar .nav.sub-menu {
    background: #f0f4ff;
}
.nav-item:hover>.nav-link i.menu-icon,
.sidebar .nav .nav-item:hover>.nav-link i.menu-icon,
.sidebar .nav .nav-item.active .nav-link i.menu-icon {
    color: #0952eb;
}
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link .menu-arrow {
  color: #0952eb;
}
.sidebar .nav:not(.sub-menu)>.nav-item:hover>.nav-link,
.sidebar .nav:not(.sub-menu)>.nav-item:hover[aria-expanded="true"],
.sidebar .nav.sub-menu:hover,
.sidebar .nav:not(.sub-menu)>.nav-item>.nav-link[aria-expanded="true"] {
    background: #e1e5f0;
}
.sidebar .nav .nav-item:hover>.nav-link i,
.sidebar .nav .nav-item:hover>.nav-link .menu-title,
.sidebar .nav .nav-item:hover>.nav-link .menu-arrow,
.sidebar .nav:not(.sub-menu)>.nav-item>.nav-link[aria-expanded="true"] i.menu-icon,
.sidebar .nav:not(.sub-menu)>.nav-item>.nav-link[aria-expanded="true"] .menu-title,
.sidebar .nav:not(.sub-menu)>.nav-item>.nav-link[aria-expanded="true"] .menu-arrow,
.sidebar .nav.sub-menu .nav-item .nav-link:hover,
.sidebar .nav.sub-menu .nav-item .nav-link.active {
    color: #0952eb;
}

.sidebar .nav .nav-item.nav-label .nav-link {
    padding: 0.8rem 0.5rem 0.8rem 0.5rem;
}

.nav-item.nav-label,
.nav-item.nav-label:hover {
    background: transparent;
    pointer-events: none;
}

.nav-item.nav-label *{
    font-weight: bolder;
    color: #606f82 !important;
}

.sidebar .nav.sub-menu .nav-item::before {
    background: #000;
}

.sidebar .nav.sub-menu .nav-item:hover::before,
.sidebar .nav.sub-menu .nav-item::before {
    background: #0952eb;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    color: #000;
}

@media screen and (width < 600px) {
    .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right,
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-settings {
        flex: 1;
        justify-content: flex-end;
    }
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item {
        margin-left: 0.3rem;
        margin-right: 0.3rem;
    }
    .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right .nav-item.solde-and-seuil-boutique {
        gap: 0px;
        justify-content: space-evenly;
        align-items: flex-end !important;
        flex-direction: column;
    }
    .nav-item button.solde-pro-header {
        margin-right: 0;
    }
    .solde-pro-header .kl-solde-user,
    .seuil-pro-header .kl-seuil-user {
        font-size: 12px;
    }
    .solde-pro-header .icon,
    .seuil-pro-header .icon {
        width: 24px;
        height: 24px;
        font-size: 15px;
        top: 50%;
        transform: translate(50%, -50%);
    }
}