main {
    background-color: var(--main-color-bg) !important;
}

#header {
    /* background-color: var(--main-header-bg) !important; */
    color: var(--main-header-color) !important;
}

#header .kt-menu-title {
    color: var(--main-header-color) !important;
}



footer {
    background-color: var(--main-header-bg) !important;
    
}
footer .text-secondary-foreground {
    color: var(--main-header-color) !important;
}

.kt-sidebar {
    background-color: var(--main-sidebar-bg) !important;
}

.kt-sidebar .kt-menu .kt-menu-link .kt-menu-icon {
    color: var(--main-sidebar-color) !important;
}

.kt-sidebar .kt-menu .kt-menu-link .kt-menu-title {
    color: var(--main-sidebar-color) !important;
}
/* 
.kt-menu-item.active > .kt-menu-link {
    color: var(--active-color-primary) !important;
} */

@layer utilities {
    .kt-menu-item-active\:text-primary {
        &.kt-menu-item.active {
            color: var(--primary);
        }

        .kt-menu-item.active & {
            color: var(--primary);
        }

        .kt-menu-item.active > .kt-menu-link & {
            color: var(--primary);
        }
        .kt-menu-item.active > .kt-menu-link i & {
            color: #fff !important;
        }

    }

    .kt-menu-link-hover\:text-primary {
        &.kt-menu-link:hover {
            color: var(--primary) !important;
        }

        .kt-menu-link:hover & {
            color: var(--primary) !important;
        }

        
    }

    

    .kt-menu-item-active\:border-b-primary {
        &.kt-menu-item.active {
            border-bottom-color: var(--primary);
        }
    }

    
}

.kt-sidebar .kt-menu-item.active .kt-menu-link {
    background: var(--primary) !important;
}

.kt-sidebar .kt-menu-item.active .kt-menu-link:hover {
    color: var(--primary) !important;
}   

/* .kt-btn {
    background-color: var(--main-active-bg);
    color: #fff;
} */

.kt-btn-outline {
    background-color: var(--background);
    color: var(--secondary-foreground);
}

.kt-btn-ghost {
    color: #fff !important;
    background-color: transparent;
    --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

        &:hover {
            @media (hover: hover) {
                background-color: var(--active-color-primary);
            }
        }
}

/* .kt-btn:hover i {
    color: #fff !important;
} */

.kt-btn-mono {
    background-color: #333;
}

a:hover {
    color: var(--main-active-bg);
}