:root {
    --bs-theme: #4669B9; /*busibess theme color here*/
    --bs-theme-light: #41c6c6;
}

.text-theme {
    color: var(--bs-theme) !important;
}

.text-theme-bold {
    color: var(--bs-theme) !important;
    font-weight:bold !important;
}

.bg-theme {
    background-color: var(--bs-theme) !important;
}

.bg-theme-light {
    background-color: var(--bs-theme-light) !important;
}

.nav-bg-theme {
    background-color: #d5d5d5 !important;
}

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

.btn-paging-active-theme {
    background-color: var(--bs-theme) !important;
}

.btn-theme {
    background-color: var(--bs-theme) !important;
    color: #fff;
    border: 1px solid var(--bs-theme);
}

.btn-outline-theme {
    background-color: transparent;
    color: var(--bs-theme);
    border: 1px solid var(--bs-theme);
}

.btn-theme-light {
    background-color: var(--bs-theme-light) !important;
    color: #fff;
    border: 1px solid var(--bs-theme-light);
    width: 100%;
}

.btn-outline-theme-light {
    background-color: transparent;
    color: var(--bs-theme-light);
    border: 1px dashed var(--bs-theme-light);
    width: 100%;
}

/* Apply teal background and white text when checked */
.btn-check:checked + .btn-outline-theme {
    background-color: var(--bs-theme); /* teal */
    color: #fff;
    border-color: var(--bs-theme);
}

/* Apply light teal background and white text when checked */
.btn-check:checked + .btn-outline-theme-light {
    background-color: var(--bs-theme-light); /* light teal */
    color: #fff;
    border-color: var(--bs-theme-light);
}

/* Optional: hover effect for unselected buttons */
.btn-outline-theme:hover {
    background-color: rgba(32, 201, 151, 0.1);
    border-color: var(--bs-theme);
    color: var(--bs-theme);
}

.btn-check:checked + .btn-outline-theme {
    background-color: var(--bs-theme);
    color: #fff;
    border-color: var(--bs-theme);
}

.btn-outline-theme {
    color: var(--bs-theme);
    border: 1px solid var(--bs-theme);
    background-color: transparent;
    width: 100%;
    text-align: left;
}

.btn-check:focus + .btn-outline-theme {
    box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.4);
}

/* Active page styling */
.pagination li.active a {
    background-color: var(--bs-theme);
    color: #fff;
    border-color: var(--bs-theme);
    cursor: default;
}

/*
.pagination .active .page-link {
    background-color: var(--bs-theme);
    color: #fff;
    border-color: var(--bs-theme);
}
*/

/* Larger checkbox with proper alignment and glow */
.big-checkbox {
    width: 1.3em;
    height: 1.3em;
    transform: scale(1.3);
    margin-right: 0.5rem;
    vertical-align: middle; /* aligns with label text */
    position: relative;
    border-color: var(--bs-theme);
}

/* Theme glow when focused or checked */
.big-checkbox:focus,
.big-checkbox:checked {
    outline: none;
    box-shadow: 0 0 6px 2px var(--bs-theme); /* use your Bootstrap theme variable */
    border-color: var(--bs-theme);
}