.modal {
                display: none;
                position: fixed;
                z-index: 1;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgba(0, 0, 0, 0.4);
            }
            .modal-content-app {
                /* background-color: #000435;
                */
                background-color: #2F3437;
                color: white;
                margin: 10% auto;
                padding: 20px;
                /* border: 1px solid #888;
                */
                border: 1px solid #4D5154;
                max-width: 500px;
            }
            .share-icon {
                background-color: #4D5154;
                border: 1px solid #4D5154;
            }
            .si {
                background-color: #000435;
                color: white;
                border: none;
            }
            .btn-end {
                margin-top: 2%;
                width: 30%;
                margin-left: auto;
            }
            .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
                cursor: pointer;
                text-align: end;
            }
            h6 i {
                margin-right: 5px;
            }

.dropdown-item {
                transition: all ease 0.3s;
            }
            .dropdown-item:hover {
                background-color: #414549;
                border-radius: 8px;
            }
            .nav-link:hover {
                background-color: #414549;
                border-radius: 8px;
            }
            .nav-link {
                transition: all ease 0.3s;
                padding: 4px;
            }
            .nav-dropdown-subitem {
                margin-left: 10px;
                border-left: 1px solid white;
            }
            .dropdown-menu li {
                position: relative;
            }
            .dropdown-menu .dropdown-submenu {
                display: none;
                position: absolute;
                left: 100%;
                top: -7px;
            }
            .dropdown-menu .dropdown-submenu-left {
                right: 100%;
                left: auto;
            }
            .dropdown-menu>li:hover>.dropdown-submenu {
                display: block;
            }

.mynav {
                color: #fff;
            }
            .mynav li a {
                color: #fff;
                text-decoration: none;
                width: 100%;
                display: block;
            }
            .nav-pills.mynav li a.active {
                background: rgba(255, 255, 255, 0.2);
                border-bottom-left-radius: 25px;
                border-top-left-radius: 25px;
            }
            .mynav li a:hover {
                background: rgba(255, 255, 255, 0.2);
            }
            .mynav li a i {
                width: 35px;
                text-align: center;
            }
            /* #app {
                min-height: 100vh;
            }
            */
            .app-lay {
                min-height: 100vh;
            }

.offcanvas {
                transition: all ease 0.5s;
            }
            .offcanvas-body::-webkit-scrollbar {
                width: 7px;
            }
            .offcanvas-body::-webkit-scrollbar-track {
                background-color: #000;
            }
            .offcanvas-body::-webkit-scrollbar-thumb {
                background-color: #424649;
                border-radius: 10px;
            }

.overlay {
                /* Standard syntax */
                backdrop-filter: blur(3px);
                /* Vendor Prefixes for broader compatibility */
                -webkit-backdrop-filter: blur(3px);
            }
            .toggle {
                /* width: 56px;
                height: 56px;
                */
                border-radius: 50%;
                /* Use percentage for circular shape */
                display: grid;
                place-items: center;
                cursor: pointer;
                /* box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.1);
                */
                line-height: 1;
            }
            .input {
                display: none;
            }
            .icon {
                grid-column: 1 / 1;
                grid-row: 1 / 1;
                transition: transform 0.3s ease;
            }
            .icon--moon {
                transform: scale(0);
                color: #fff;
            }
            .icon--sun {
                transition-delay: 100ms;
                color: yellow;
            }
            /* Apply animation to moon icon when switch is checked */
            #switch:checked+.icon--moon {
                transform: scale(1) rotate(360deg);
            }
            /* Apply animation to sun icon when switch is checked */
            #switch:checked~.icon--sun {
                transform: rotate(360deg) scale(0);
            }
            @keyframes animate {
                0%, 100% {
                    transform: translateZ(-100px);
                }
                50% {
                    transform: translateZ(100px);
                }
            }
            @keyframes loading6454 {
                0%, 100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-10px);
                }
            }

.no-decoration {
                text-decoration: none;
            }

            .text-light {
                color: #ffffff;
                /* Adjust as needed */
            }

            .bg-dark {
                /* background-color: #343a40; */
                background-color: rgb(6 6 6 / 91%) !important;
                /* Adjust as needed */
            }

            @media (max-width: 768px) {
                .collapse.show {
                    display: block !important;
                }

                .collapse:not(.show) {
                    display: none !important;
                }
            }

[data-bs-theme="dark"] {
                --spinner-color: #f3f3f3 !important;
            }
            [data-bs-theme="light"] {
                --spinner-color: #212529 !important;
            }
            .sk-chase {
                width: 40px;
                height: 40px;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 999;
                animation: sk-chase 2.5s infinite linear both;
            }
            .sk-chase-dot {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                animation: sk-chase-dot 2.0s infinite ease-in-out both;
            }
            .sk-chase-dot:before {
                content: '';
                display: block;
                width: 25%;
                height: 25%;
                background-color: var(--spinner-color);
                border-radius: 100%;
                animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
            }
            .sk-chase-dot:nth-child(1) {
                animation-delay: -1.1s;
            }
            .sk-chase-dot:nth-child(2) {
                animation-delay: -1.0s;
            }
            .sk-chase-dot:nth-child(3) {
                animation-delay: -0.9s;
            }
            .sk-chase-dot:nth-child(4) {
                animation-delay: -0.8s;
            }
            .sk-chase-dot:nth-child(5) {
                animation-delay: -0.7s;
            }
            .sk-chase-dot:nth-child(6) {
                animation-delay: -0.6s;
            }
            .sk-chase-dot:nth-child(1):before {
                animation-delay: -1.1s;
            }
            .sk-chase-dot:nth-child(2):before {
                animation-delay: -1.0s;
            }
            .sk-chase-dot:nth-child(3):before {
                animation-delay: -0.9s;
            }
            .sk-chase-dot:nth-child(4):before {
                animation-delay: -0.8s;
            }
            .sk-chase-dot:nth-child(5):before {
                animation-delay: -0.7s;
            }
            .sk-chase-dot:nth-child(6):before {
                animation-delay: -0.6s;
            }
            @keyframes sk-chase {
                100% {
                    transform: rotate(360deg);
                }
            }
            @keyframes sk-chase-dot {
                80%, 100% {
                    transform: rotate(360deg);
                }
            }
            @keyframes sk-chase-dot-before {
                50% {
                    transform: scale(0.4);
                }
                100%, 0% {
                    transform: scale(1.0);
                }
            }

[data-bs-theme="dark"] {
                --app-toast-backdrop-filter: blur(16px) saturate(180%);
                --app-toast-webkit-backdrop-filter: blur(16px) saturate(180%);
                --app-toast-background-color: rgba(24, 24, 29, 0.75);
                --app-toast-border-radius: 12px;
                --app-toast-border: 1px solid rgba(255, 255, 255, 0.125);
            }
            [data-bs-theme="light"] {
                --app-toast-backdrop-filter: blur(25px) saturate(180%);
                --app-toast-webkit-backdrop-filter: blur(25px) saturate(180%);
                --app-toast-background-color: rgba(225, 225, 226, 0.75);
                --app-toast-border-radius: 12px;
                --app-toast-border: 1px solid rgba(255, 255, 255, 0.125);
            }
            .app-toast {
                position: fixed;
                font-family: "Poppins", sans-serif;
                bottom: 12px;
                z-index: 1000;
                right: 30px;
                border-radius: 12px;
                backdrop-filter: var(--app-toast-backdrop-filter);
                -webkit-backdrop-filter: var(--app-toast-webkit-backdrop-filter);
                background-color: var(--app-toast-background-color);
                border-radius: var(--app-toast-border-radius);
                border: var(--app-toast-border);
                padding: 20px 35px 20px 25px;
                box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
                overflow: hidden;
                transform: translateX(calc(100% + 30px));
                transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
                opacity: 0;
                display: none;
                /* Start hidden */
            }
            .app-toast.active {
                display: block;
                /* Show the toast */
                transform: translateX(0%);
                opacity: 1;
            }
            .app-toast .app-toast-content {
                display: flex;
                align-items: center;
            }
            .app-toast-content .app-check-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 35px;
                min-width: 35px;
                background-color: #4070f4;
                color: #fff;
                font-size: 20px;
                border-radius: 50%;
            }
            .app-toast-content .app-message {
                display: flex;
                flex-direction: column;
                margin: 0 20px;
            }
            .app-message .app-text {
                font-size: 16px;
                font-weight: 400;
                color: var(--bs-heading-color);
            }
            .app-message .app-text.app-text-1 {
                font-weight: 600;
                color: var(--bs-heading-color);
            }
            .app-toast .app-close-icon {
                position: absolute;
                top: 10px;
                right: 15px;
                padding: 5px;
                cursor: pointer;
                opacity: 0.7;
            }
            .app-toast .app-close-icon:hover {
                opacity: 1;
            }
            .app-toast .app-progress {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 3px;
                width: 100%;
            }
            .app-toast .app-progress:before {
                content: "";
                position: absolute;
                bottom: 0;
                right: 0;
                height: 100%;
                width: 100%;
                background-color: #4070f4;
            }
            .app-progress.active:before {
                animation: app-progress-animation 2s linear forwards;
            }
            @keyframes app-progress-animation {
                100% {
                    right: 100%;
                }
            }

@media (max-width: 576px) {
                #sub-menu-ul {
                    left: 175px !important;
                }
            }

/* Navbar partial cleanup (resources/views/layouts/partials/navbar.blade.php) */
#navbar .nav-item-hidden {
    list-style-type: none;
    display: none;
}

#navbar .navbar-icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#navbar .navbar-menu-icon {
    color: var(--bs-white, #fff);
    font-size: 20px;
    line-height: 1;
}

#navbar .navbar-toggler-clean {
    border: none;
    font-size: 19px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#navbar .navbar-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

#navbar .navbar-user-menu {
    right: -12px;
    left: auto;
}

#navbar .theme-icon-svg {
    width: 25px;
    height: 25px;
}

#navbar .nav-divider {
    color: var(--bs-white, #fff);
    opacity: 0.7;
}

#navbar .credits-label {
    margin: 0 !important;
    font-size: 12px !important;
}

#navbar .credits-value {
    margin: 0 !important;
    color: var(--ns-text-muted, #cccccc);
}

.dropdown-menu .dropdown-submenu.dropdown-submenu-left {
    right: 100%;
    left: auto;
    top: 0;
}

#navbar .nav-link,
#navbar .dropdown-item,
#navbar .netshow-nav-item,
#navbar .netshow-nav-trigger {
    min-height: 44px;
}

#navbar .nav-link,
#navbar .dropdown-item {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 441px) {
    #credits_section {
        display: none;
    }

    #user_credits {
        display: block !important;
    }
}