/*NEW STYLES*/

/*Navigation Menu*/

.rz-footer.fixed {
    padding: 0 !important;
    overflow: hidden;
}

.rz-footer a.rz-navigation-item-link {
    margin-left: 16px !important;
}



body {
    background: #f3f3f3 !important;
}



.rz-layout {
background: #fff;
margin: 10px;
border-radius: 10px;
max-height: calc(100vh - 20px);
}

.rz-panel-menu .rz-navigation-item-wrapper-active {
background-color: #1474b9;
}

.active i.notranslate.rzi.rz-navigation-item-icon{
color: white;
}

.rz-layout .rz-body {
background: #f7f7f7;
margin: 10px;
}

.rz-sidebar {
background-color: #ffffff;
border-inline-end: none;
margin:15px;
}

.rz-header {
box-shadow: none;
}


.rz-sidebar-toggle {
border: none;
}


ul.rz-panel-menu {
    margin-top: 60px;
    background: #fff !important;
}

.rz-panel-menu .rz-navigation-item {
    background: white;
    color: #444;
    border-bottom: 0;
    border-radius: 4px;
}

i.notranslate.rzi.rz-navigation-item-icon {
color: #999;
}

a.rz-navigation-item-link.active {
color: white;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover {
background-color: #1474b9;
color: white;
}

.rz-footer ul.rz-panel-menu {
margin: 0 -16px;
}

.rz-footer .rz-card.rz-variant-filled {
background: #efefef;
border-radius: 15px !important;
width: 100% !important;
padding: 10px;
margin-top: 10px;
}


.rz-footer rz-card {
background: #eee;
padding: 15px 10px;
border-radius: 10px;
margin: 0 -12px;
}

.rz-progressbar {
background-color: #accadf;
}

.rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value {
background-color: #1474b9;
}

.rz-dialog-side-position-right {
right: 20px;
height: calc(100% - 20px);
}

.rz-button.rz-secondary.rz-shade-default {
background: #1474b9 !important;
}

.page-item.active .page-link {
background-color: #1474b9;
border-color: #1474b9;
}

i.rzi {
cursor: pointer;
}

.rz-notification {
inset-block-start: 10px;
margin-right: 10px;
}

.rz-header.fixed {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 50px;
    right: 0;
    z-index: var(--rz-header-z);
}









/*Login Page*/




section.login-page {
    background-image: url(/assets/images/beach.jpg);
    background-repeat: no-repeat;
    background-position: center;
}

/* .rz-progressbar-circular-lg {
        width: 3rem;
        height: 3rem;
        font-size: calc(var(--rz-progressbar-font-size) * 1);
    } */

.rz-progressbar-circular-md {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 16px;
    margin: -50px 0 0 -50px;
}

.login-page .rz-card {
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
}

.rz-m-12 {
    margin: 1rem !important;
}




/*Dashboard*/



.rz-card.rz-variant-filled {
    margin: 20px auto;
}

.rz-card.rz-variant-outlined {
    background: #ffffff;
}

.rz-p-4 {
    padding: 0rem !important;
}

.DB-data-cards .rz-card i.rzi {
    font-size: 70px;
    background: #1474b9 !important;
    margin: 0 !important;
}

.rz-stack {
    width: 100%;
}

h6.rz-text-subtitle1 {
    font-size: 20px;
}

h6.rz-text-subtitle2 {
    font-weight: 500;
    margin: 2px 0 !important;
    width: 100% !important;
}

    h6.rz-text-subtitle2 p {
        font-weight: 700;
        margin: 0 0 0 auto !important;
    }


th.action-th {
    min-width: 60px;
}




.rz-badge-primary.rz-shade-default {
    background-color: #3b7fc2;
    color: var(--rz-on-primary);
}

.rz-badge-secondary.rz-shade-default {
    background-color: #978b00;
    color: var(--rz-on-secondary);
}

.rz-dialog-content {
    padding-top: 4px;
}

.rz-text-overline{
    font-size: 0.7rem;
}

.rz-dialog h6.rz-text-subtitle1 {
    font-size: 21px;
    text-decoration: underline;
}

.rz-button.rz-primary.rz-shade-default {
    background-color: #3b7fc2;
    color: #ffffff;
}


/*Media Queries*/









@media (max-width: 768px) {
    .rz-sidebar.sidebar {
display: none !important;
}

.rz-sidebar.sidebar-expanded {
    display: block !important;
}

.rz-body {
    margin-top: 60px !important;
    max-width: calc(100vw - 40px) !important;
}

.rz-header img{
    display:block !important;
}







}











@media (min-width: 768px) {
    .rz-sidebar.sidebar {
width: max-content !important;
}



}




@media (min-width: 1024px) {

    .rz-p-md-12 {
        padding: 0 !important;
    }

    .rz-sidebar.sidebar.sidebar-expanded {
        width: 220px !important;
    }
}