:root {
  --bs-primary: #3e8924; 
  --bs-primary-rgb: 62, 137, 36; 
  --bs-border-radius: 3px;
}
.btn-primary {
  --bs-btn-bg: #3e8924;
  --bs-btn-border-color: #3e8924;
  --bs-btn-hover-bg: #3e8924;
  --bs-btn-hover-border-color: #3e8924;
  --bs-btn-active-bg: #3e8924;
}
body {
    padding-top: 60px;
}
.page-header {
    padding-bottom: 10px;
    margin: 25px 0 20px;
}
.input-group-text { 
    min-width: 50px; 
    justify-content: center; 
}
.card { 
    --bs-card-cap-bg: #eef5ed;
    --bs-card-cap-padding-y: 0;
    --bs-card-cap-padding-x: 0;
    --bs-card-bg: #fcfcfc;
}
#create_form .card,
.select-siteform .card {
    --bs-card-cap-padding-y: 0.5em;
    --bs-card-cap-padding-x: 1em;
}
.card-header h3 {
    margin-top: 5px;
    margin-bottom: 0;
}
.card-body > .well {
    border: unset;
    background-color: unset;
}
.card-body > .well:last-of-type {
    margin-bottom: 0;
}
.well {
    box-shadow: unset;
    min-height: unset;
}
.input-group > .form-control, 
.input-group > .form-select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.form-group .form-control {
    margin-bottom: 1em;
}
.login-panel {
    margin-top: 3em;
}
.accordion .card {
    margin-bottom: 1em;
}
.row .fa-stack {
    width: 1em;
    text-align: center;
}
.row h3 .fa-stack {
    width: 1.5em;
}
.fa-stack .fa-caret-down {
    position: absolute;
    bottom: .375em;
    margin-top: 0.35em;
}
.fa-stack .fa-caret-up {
    position: absolute;
    top: .375em;
    margin-top: -0.35em;
}
.nav-link {
    color: #333;
    padding: 12px 20px;
}
.nav-link:hover {
    background-color: #f0f0f0;
}
.nav-link.dropdown-toggle::after {
    float: right;
    margin-top: 8px;
}
.navbar {
    z-index: 1050 !important; 
}
.sidebar {
    z-index: 1045 !important;
}
.offcanvas-backdrop {
    z-index: 1040 !important;
}
.sidebar ul li {
    border: none;
}
/* Force the submenu to remain a vertical flex container even during animation */
#side-menu .collapse.show,
#side-menu .collapsing {
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Ensure it is HIDDEN when it doesn't have the show class */
#side-menu .collapse:not(.show) {
    display: none !important;
}

/* 3. Keep the items full-width */
#side-menu .nav-item {
    width: 100%;
}
@media (min-width: 768px) {
    body {
        padding-top: 72px;
    }
    .sidebar {
            padding-top: 0;
            height: calc(100vh - 75px);
            position: fixed;
            z-index: 1;
            margin-top: 0;
    }
}
@media (min-width: 992px) {
    .offcanvas-lg.sidebar {
        position: fixed;
        top: 72px;
        bottom: 0;
        left: 0;
        width: 250px;
        visibility: visible !important;
        transform: none !important;
        border-right: 1px solid #dee2e6;
        background-color: #f8f9fa;
        z-index: 1030;
    }
    #page-wrapper {
        margin-left: 250px;
        padding: 20px;
    }
}
@media (max-width: 991.98px) {
    #page-wrapper {
        margin-left: 0;
        padding: 10px;
    }
    .offcanvas-lg.sidebar {
        width: 280px;
        background-color: #fff;
    }
}
@media (max-width: 767px) {
    .input-group {
        flex-wrap: wrap !important;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        margin-bottom: 10px;
        background-color: #fff;
    }
    .input-group > .input-group-text:first-child {
        flex: 0 0 100% !important;
        border-radius: 0 !important;
        background-color: var(--bs-secondary) !important;
        color: white !important;
        text-align: left;
        justify-content: flex-start;
        padding-left: 15px;
        border: none;
    }
    .input-group.input-group-mobile-col > .input-group-text:not(:first-child) {
        flex: 0 0 35% !important;
        border-radius: 0 !important;
        background-color: #f8f9fa;
        border-top: 1px solid #dee2e6;
        font-size: 0.85rem;
    }
    .input-group.input-group-mobile-col > .form-control, 
    .input-group.input-group-mobile-col > .form-select {
        flex: 0 0 65% !important;
        border-radius: 0 !important;
        width: auto !important;
        border-top: 1px solid #dee2e6;
    }
    .btn { 
        width: 100%; 
        margin-bottom: 10px; 
        padding: 12px;
    }
    h1.page-header { 
        font-size: 1.5rem; 
        margin-top: 20px !important;
    }
    
    .card-body {
        padding: 10px;
    }
    .well.well-sm.mb-2 {
        margin-bottom: 2.5em !important;
    }

    .input-group.mb-3 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        overflow: hidden;
    }
    .input-group.mb-3 > .input-group-text.fw-bold {
        flex: 0 0 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: none;
        border-bottom: 1px solid #444;
    }
    .input-group.mb-3 > .input-group-text:not(.fw-bold) {
        flex: 0 0 calc(30% - 1px) !important; 
        border-radius: 0 !important;
        border: none;
        border-bottom: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
    }
    .input-group.mb-3 > .form-control {
        flex: 0 0 calc(70% + 1px) !important;
        width: auto !important;
        border-radius: 0 !important;
        border: none;
        border-bottom: 1px solid #dee2e6;
    }
    .input-group.mb-3 > .input-group-text:nth-last-child(2),
    .input-group.mb-3 > .form-control:last-child {
        border-bottom: none;
    }
}