/*
    * demo.css
    * File include item demo only specific css only
    ******************************************************************************/

    .light-style .menu .app-brand.demo {
    height: 64px;
    }

    .dark-style .menu .app-brand.demo {
    height: 64px;
    }

    .app-brand-logo.demo {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -ms-flexbox;
    display: flex;
    width: 34px;
    height: 24px;
    }

    .app-brand-logo.demo svg {
    width: 35px;
    height: 24px;
    }

    .app-brand-text.demo {
    font-size: 1.375rem;
    }

    /* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
    .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
    }
    .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 78px !important;
    }
    /* Navbar page z-index issue solution */
    .content-wrapper .navbar {
    z-index: auto;
    }

    /*
    * Content
    ******************************************************************************/

    .demo-blocks > * {
    display: block !important;
    }

    .demo-inline-spacing > * {
    margin: 1rem 0.375rem 0 0 !important;
    }

    .demo-vertical-spacing > * {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    }
    .demo-vertical-spacing.demo-only-element > :first-child {
    margin-top: 0 !important;
    }

    .demo-vertical-spacing-lg > * {
    margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
    }
    .demo-vertical-spacing-lg.demo-only-element > :first-child {
    margin-top: 0 !important;
    }

    .demo-vertical-spacing-xl > * {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
    }
    .demo-vertical-spacing-xl.demo-only-element > :first-child {
    margin-top: 0 !important;
    }

    .rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
    }

    [dir='rtl'] .rtl-only {
    display: block !important;
    }

    /*
    * Layout demo
    ******************************************************************************/

    .layout-demo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1rem;
    }
    .layout-demo-placeholder img {
    width: 900px;
    }
    .layout-demo-info {
    text-align: center;
    margin-top: 1rem;
    }

    /* ==========================================================================
    COMPLETE GREEN & WHITE THEME — GLOBAL OVERRIDE
    ==========================================================================
    Primary Green:      #28C76F
    Hover/Active Green: #1F9D55
    Light Mint:         #E8F9EE
    Focus Glow:         rgba(40, 199, 111, 0.25)
    Body Background:    #F8F9FA
    Card Background:    #FFFFFF
    ========================================================================== */

    /* --- CSS Variable Bridges (Light & Dark) --- */
    :root, [data-bs-theme="light"], [data-bs-theme="dark"], html {
        --bs-primary: #28C76F !important;
        --bs-primary-rgb: 40, 199, 111 !important;
        --bs-primary-hover: #1F9D55 !important;
        --bs-primary-bg-subtle: #E8F9EE !important;
        --bs-primary-border-subtle: #28C76F !important;
    }

    /* --- Body & Card Backgrounds --- */
    html body {
        background: #F8F9FA !important;
    }

    html body .bg-body {
        background: #F8F9FA !important;
    }

    html body .card,
    html body .card-body {
        background: #FFFFFF !important;
    }

    /* --- Primary Text & Background Utilities --- */
    html body .text-primary {
        color: #28C76F !important;
    }

    html body .bg-primary {
        background-color: #28C76F !important;
    }

    html body .bg-label-primary {
        background-color: #E8F9EE !important;
        color: #28C76F !important;
    }

    html body .border-primary,
    html body [dir=rtl] .border-primary {
        border-color: #28C76F !important;
    }

    /* ============================================
    SIDEBAR NAVIGATION — ACTIVE & HOVER
    ============================================ */
    html body .menu-vertical .menu-item.active:not(.open) > .menu-link {
        background: #28C76F !important;
        background-color: #28C76F !important;
        color: #FFFFFF !important;
    }

    html body .bg-menu-theme .menu-item.active > .menu-link {
        color: #28C76F !important;
    }

    html body .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
        background: linear-gradient(72.47deg, #28C76F 22.16%, rgba(40, 199, 111, 0.7) 76.47%) !important;
        color: #fff !important;
        box-shadow: 0px 2px 6px 0px rgba(40, 199, 111, 0.48) !important;
    }

    html body [dir=rtl] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
        background: linear-gradient(72.47deg, rgba(40, 199, 111, 0.7) 22.16%, #28C76F 76.47%) !important;
        color: #fff !important;
        box-shadow: 0px 2px 6px 0px rgba(40, 199, 111, 0.48) !important;
    }

    html body .bg-menu-theme.menu-horizontal .menu-item.active > .menu-link:not(.menu-toggle) {
        background: #E8F9EE !important;
        color: #28C76F !important;
    }

    html body .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
    html body .bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle {
        background: #E8F9EE !important;
        color: #28C76F !important;
    }

    html body .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
        background: #28C76F !important;
    }

    html body .menu-vertical .menu-item .menu-link:hover,
    html body .bg-menu-theme .menu-inner .menu-item .menu-link:hover {
        background-color: #E8F9EE !important;
        color: #28C76F !important;
    }

    html body .menu-vertical .menu-item .menu-link:hover i,
    html body .menu-vertical .menu-item .menu-link:hover svg,
    html body .bg-menu-theme .menu-inner .menu-item .menu-link:hover i,
    html body .bg-menu-theme .menu-inner .menu-item .menu-link:hover svg {
        color: #28C76F !important;
    }

    /* ============================================
    ALL BUTTONS
    ============================================ */
    html body button[type="submit"],
    html body .btn-primary,
    html body [class*="btn-primary"] {
        background-color: #28C76F !important;
        background: #28C76F !important;
        border-color: #28C76F !important;
        color: #FFFFFF !important;
    }

    html body button[type="submit"]:hover,
    html body .btn-primary:hover,
    html body [class*="btn-primary"]:hover,
    html body button[type="submit"]:focus,
    html body .btn-primary:focus,
    html body [class*="btn-primary"]:focus,
    html body button[type="submit"]:active,
    html body .btn-primary:active,
    html body [class*="btn-primary"]:active,
    html body .btn-primary.active {
        background-color: #1F9D55 !important;
        background: #1F9D55 !important;
        border-color: #1F9D55 !important;
        box-shadow: 0 4px 12px rgba(40, 199, 111, 0.35) !important;
        color: #FFFFFF !important;
    }

    html body .btn-primary.disabled,
    html body .btn-primary:disabled {
        background-color: #28C76F !important;
        border-color: #28C76F !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    html body .btn-outline-primary {
        color: #28C76F !important;
        border-color: #28C76F !important;
    }

    html body .btn-outline-primary:hover,
    html body .btn-outline-primary:focus,
    html body .btn-outline-primary:active,
    html body .btn-outline-primary.active {
        background-color: #E8F9EE !important;
        color: #28C76F !important;
        border-color: #28C76F !important;
    }

    html body .btn-label-primary {
        color: #28C76F !important;
        background: #E8F9EE !important;
        border-color: transparent !important;
    }

    html body .btn-label-primary:hover,
    html body .btn-label-primary:focus,
    html body .btn-label-primary:active,
    html body .btn-label-primary.active {
        background: #D0F0DC !important;
        color: #28C76F !important;
    }

    /* ============================================
    FORM CONTROLS — HOVER, FOCUS & CHECKED
    ============================================ */
    html body .form-control:focus,
    html body .form-select:focus {
        border-color: #28C76F !important;
        box-shadow: 0 0px 4px rgba(40, 199, 111, 0.25) !important;
    }

    html body .form-control:hover:not(:focus):not(:disabled),
    html body .form-select:hover:not(:focus):not(:disabled),
    html body textarea:hover:not(:focus):not(:disabled),
    html body input[type="text"]:hover:not(:focus):not(:disabled),
    html body input[type="email"]:hover:not(:focus):not(:disabled),
    html body input[type="password"]:hover:not(:focus):not(:disabled),
    html body input[type="number"]:hover:not(:focus):not(:disabled),
    html body input[type="search"]:hover:not(:focus):not(:disabled),
    html body input[type="url"]:hover:not(:focus):not(:disabled),
    html body input[type="tel"]:hover:not(:focus):not(:disabled),
    html body input[type="date"]:hover:not(:focus):not(:disabled),
    html body input[type="datetime-local"]:hover:not(:focus):not(:disabled),
    html body input[type="time"]:hover:not(:focus):not(:disabled),
    html body input[type="week"]:hover:not(:focus):not(:disabled),
    html body input[type="month"]:hover:not(:focus):not(:disabled) {
        border-color: #28C76F !important;
    }

    html body .form-check-input:checked {
        background-color: #28C76F !important;
        border-color: #28C76F !important;
    }

    html body .form-check-input:focus {
        border-color: #28C76F !important;
        box-shadow: 0 0 0 0.25rem rgba(40, 199, 111, 0.25) !important;
    }

    html body .form-switch .form-check-input:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    }

    html body .input-group:focus-within .input-group-text {
        border-color: #28C76F !important;
    }

    /* ============================================
    DROPDOWN ITEMS
    ============================================ */
    html body .dropdown-menu .dropdown-item:hover,
    html body .dropdown-menu .dropdown-item:focus,
    html body .dropdown-menu .dropdown-item.active {
        background-color: #E8F9EE !important;
        color: #28C76F !important;
    }

    html body .dropdown-item.active,
    html body .dropdown-item:active {
        background-color: #28C76F !important;
        color: #fff !important;
    }

    /* ============================================
    SELECT2, CHOICES, TAGIFY, BOOTSTRAP SELECT
    ============================================ */
    html body .select2-container--default.select2-container--focus .select2-selection,
    html body .select2-container--default.select2-container--open .select2-selection {
        border-color: #28C76F !important;
        box-shadow: 0 0px 4px rgba(40, 199, 111, 0.25) !important;
    }

    html body .select2-dropdown {
        border-color: #28C76F !important;
    }

    html body .tagify--focus {
        border-color: #28C76F !important;
        box-shadow: 0 0px 4px rgba(40, 199, 111, 0.25) !important;
    }

    html body .tagify__dropdown__item--active {
        background: #28C76F !important;
    }

    html body .bootstrap-select .dropdown-menu.inner a[aria-selected=true] {
        background: #28C76F !important;
        color: #fff !important;
    }

    html body .bootstrap-select .dropdown-toggle.show {
        border-color: #28C76F !important;
    }

    /* ============================================
    PAGINATION
    ============================================ */
    html body .page-item.active .page-link,
    html body .pagination li.active > a:not(.page-link) {
        border-color: #28C76F !important;
        background-color: #28C76F !important;
        color: #fff !important;
    }

    html body .page-item > .page-link.active {
        border-color: #28C76F !important;
        background-color: #28C76F !important;
        color: #fff !important;
    }

    html body .page-link:focus {
        box-shadow: 0 0 0 0.25rem rgba(40, 199, 111, 0.25) !important;
        border-color: #28C76F !important;
    }

    html body .page-link:hover {
        background-color: #E8F9EE !important;
        color: #28C76F !important;
    }

    /* ============================================
    NAVIGATION PILLS & TABS
    ============================================ */
    html body .nav-pills .nav-link.active,
    html body .nav-pills .nav-link.active:hover,
    html body .nav-pills .nav-link.active:focus {
        background-color: #28C76F !important;
        color: #fff !important;
    }

    html body .nav-pills .nav-link:hover,
    html body .nav-pills .nav-link:focus {
        background-color: #E8F9EE !important;
        color: #28C76F !important;
    }

    html body .nav-tabs .nav-link.active,
    html body .nav-tabs .nav-link.active:focus {
        box-shadow: 0 -2px 0 #28C76F inset !important;
        color: #28C76F !important;
    }

    /* ============================================
    BADGES
    ============================================ */
    html body .badge.bg-primary {
        background-color: #28C76F !important;
    }

    html body .badge.bg-label-primary {
        background-color: #E8F9EE !important;
        color: #28C76F !important;
    }

    /* ============================================
    PROGRESS BAR
    ============================================ */
    html body .progress-bar {
        background-color: #28C76F !important;
        color: #fff !important;
    }

    /* ============================================
    ALERTS
    ============================================ */
    html body .alert-primary {
        background-color: #E8F9EE !important;
        border-color: #E8F9EE !important;
        color: #28C76F !important;
    }

    html body .alert-primary .alert-link {
        color: #28C76F !important;
    }

    /* ============================================
    LIST GROUP
    ============================================ */
    html body .list-group-item-primary {
        background-color: #E8F9EE !important;
        border-color: #E8F9EE !important;
        color: #28C76F !important;
    }

    html body .list-group-item-action:hover,
    html body .list-group-item-action:focus {
        background-color: #E8F9EE !important;
        color: #28C76F !important;
    }

    html body .list-group-item-action.active {
        border-color: #28C76F !important;
        background-color: #28C76F !important;
    }

    /* ============================================
    TABLE
    ============================================ */
    html body .table-primary {
        --bs-table-bg: #E8F9EE !important;
        --bs-table-striped-bg: #DEF1E4 !important;
        --bs-table-active-bg: #D3E5DA !important;
        --bs-table-hover-bg: #D9ECD9 !important;
        border-color: #C8D8CE !important;
    }

    /* ============================================
    TOOLTIPS & POPOVERS
    ============================================ */
    html body .tooltip-primary .tooltip-inner {
        background: #28C76F !important;
        color: #fff !important;
    }

    html body .popover-primary {
        border-color: transparent !important;
        background: #28C76F !important;
    }

    /* ============================================
    SWITCH COMPONENTS
    ============================================ */
    html body .switch-input:checked ~ .switch-toggle-slider {
        background: #28C76F !important;
        color: #fff !important;
    }

    html body .switch-input:focus ~ .switch-toggle-slider {
        border: 1px solid #28C76F !important;
        box-shadow: 0 0 0.25rem 0.05rem rgba(40, 199, 111, 0.25) !important;
    }

    /* ============================================
    DATEPICKER / FLATPICKR / DATERANGEPICKER
    ============================================ */
    html body .datepicker table tr td.active.active,
    html body .flatpickr-day.selected,
    html body .daterangepicker td.active:not(.off) {
        background: #28C76F !important;
        color: #fff !important;
    }

    html body .flatpickr-day.inRange,
    html body .daterangepicker td.in-range:not(.start-date):not(.end-date):not(.off) {
        background: #E8F9EE !important;
        color: #28C76F !important;
    }

    /* ==========================================================================
    THEME CUSTOM SELECT DROPDOWN LIST HOVER FIX
    ========================================================================== */

    /* Force custom library dropdown options to use light-green background and green text on hover */
    html body .select2-container--default .select2-results__option--highlighted[aria-selected],
    html body .select2-container--default .select2-results__option--highlighted,
    html body .choices__list--dropdown .choices__item--selectable.is-highlighted,
    html body .choices__list--dropdown .choices__item.is-highlighted,
    html body .dropdown-menu .dropdown-item:hover,
    html body .select2-results__option:hover,
    html body .choices__item:hover {
        background-color: #E8F9EE !important;
        background: #E8F9EE !important;
        color: #28C76F !important;
    }

    /* Ensure any selected item background remains distinct but text matches theme */
    html body .select2-container--default .select2-results__option[aria-selected="true"],
    html body .choices__list--dropdown .choices__item--selected {
        background-color: #E8F9EE !important;
        color: #28C76F !important;
    }