:root {
    --primary: rgb(99,102,241);
    --primary-hover: rgba(129, 140, 248, 1);
    --primary-light: rgb(224 231 255);
    --secondary-light: #f1f5f9;

    /* --tw-gradient-to-position: 100%;
    --tw-gradient-to: rgb(192 38 211 / 0.75) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(20 184 166 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-from: rgb(79 70 229 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); */
}


#login-wrapper{
    background-image: linear-gradient(to right top, rgba(79, 70, 229, 0.9), rgba(20, 184, 166, 0.9), rgba(192, 38, 211, 0.75) 100%);
}


/* Container Shadow */
.block-shadow{
    box-shadow: 0 25px 50px -12px var(--primary-light);
}

/* Background Colors */  
.bg-primary{
    background-color: var(--primary);
    color: #fff;
}

.bg-primary:hover{
    background-color: var(--primary-hover);
    color: #fff;
}

.text-primary{
    color: var(--primary);
}

.hover-row:hover{
    background-color: var(--primary-hover);
}


/*Side Bar Menu*/
#main-menu .menu-link a, #secondary-menu .menu-link a{
    background-color: var(--secondary-light);
    color: #000;
    border-radius:50%;
}

#main-menu .menu-link div, #secondary-menu .menu-link div{
    border-right: 2px solid transparent;
}

#main-menu .menu-link div.active, #secondary-menu .menu-link div.active{
    border-color: var(--primary);
}

#main-menu .menu-link a.open, #secondary-menu .menu-link a.open{
    border-radius:4px;
}

#main-menu .menu-link a.active, #secondary-menu .menu-link a.active{
    background-color: var(--primary);
    color: #fff;
}

#main-menu .menu-link a:hover, #secondary-menu .menu-link a:hover{
    background-color: var(--primary-hover);
    color: #fff;
}

button#main-menu-toggle{
    color:#6b7280;

}

button#main-menu-toggle:hover{
    background-color: var(--primary);
    color:#fff;
}

button#user-menu-trigger{
    background-color: var(--primary);
    color:#fff;
}

/* Pagination */
.pagination .pagination-btn{
    background-color: var(--secondary-light);
}

.pagination .pagination-btn.active{
    background-color: var(--primary);
    color: #fff;
}