.active-product-li {
    background-color: var(--bs-list-group-action-active-bg);
}

.productCat div{
    margin-bottom: .5rem;
}




.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.btn-group .btn {
    font-size: 1.2rem;
    font-weight: bolder;
    border-width: calc(var(--bs-btn-border-width) * 2);
}

[data-bs-theme="dark"] {
    --bs-primary: #589cff;
    --bs-primary-rgb: 87,154,255;
    --bs-primary-bg-subtle: #589cff;
    --bs-primary-bg-subtle-dark: #589cff;

    .alert-primary {
        --bs-alert-color: var(--bs-gray-900);
    }
    
    .btn-primary {
      --bs-btn-bg: #589cff;
    }
    
    .btn-outline-primary {
        --bs-btn-color: #589cff;
        --bs-btn-border-color: #589cff;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #589cff;
        --bs-btn-hover-border-color: #589cff;
        --bs-btn-focus-shadow-rgb: 13,110,253;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #589cff;
        --bs-btn-active-border-color: #589cff;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #589cff;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #589cff;
        --bs-gradient: none;
    }

    
    .nav.nav-tabs .work-in-progress a {
        background-color: #523e00;
    }

}

.nav.nav-tabs .work-in-progress a {
    background-color: var(--bs-warning-border-subtle);
}

.nav.nav-tabs .payed a {
    background-color: var(--bs-success-border-subtle);
}

.nav.nav-tabs .nav-link {
    border-radius: unset;
} 

.nav.nav-tabs .nav-link.active {
    border-color: var(--bs-primary);
} 


@media (min-width: 992px) {
    /* https://stackoverflow.com/a/44446672 */
    .sticky {
        position: -webkit-sticky; /* for Safari */
        position: sticky;
        top: 0;
        align-self: flex-start; /* <-- this is the fix */
    }

    
    .settings .input-group-text {
        min-width: 12rem;
    }
}

.messages-sticky {
    position: fixed;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 80%;
    max-width: 80%;
    position: fixed;
    z-index: 2;
}