/* Styles V2 */

body {
    font-family: 'Inter', sans-serif !important;
    background-color: #ECEFF1 !important;
}

.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* Menu */

/* Side Menu */

#layoutSidenav #layoutSidenav_nav{
    z-index: 1000;
    margin-top: 56px;
}

@media screen and (max-width:768px) {
    #layoutSidenav #layoutSidenav_nav{
        z-index: 1038;
    }
}

@media screen and (max-width:768px) {
    .sb-sidenav{
        padding-top: 12px;
    }
}

.sb-sidenav-dark {
    background-color: #ECEFF1 !important;
    color: rgba(255, 255, 255, 0.5);
}

.sb-sidenav-menu{
    z-index: 1000;
}

.sb-sidenav .sb-sidenav-menu .nav .nav-link {
    margin-right: 16px;
    margin-bottom: 6px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link {
    color: rgba(39, 36, 36, 0.8);
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
    /* background-color: #7B1FA2; */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9575cd+0,673ab7+100 */
    background: #9575cd;
    /* Old browsers */
    background: -moz-linear-gradient(left, #9575cd 0%, #673ab7 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #9575cd 0%, #673ab7 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #9575cd 0%, #673ab7 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9575cd', endColorstr='#673ab7', GradientType=1);
    /* IE6-9 */
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link.active:hover{
    color: #ffffff !important;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover{
    color: rgba(39, 36, 36, 0.8) !important;
    background-color: rgb(207, 216, 220);
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link span.material-icons-outlined{
    margin-right: 1rem !important;
}

/* Navbar */

nav{
    background-color: #ECEFF1;
    z-index: 1038 !important;
}

/* Content Area */

#layoutSidenav_content{
    background-color: #ECEFF1;
}

main {
    margin-top: 56px;
}

/* Buttons */

.btn-primary{
    background-color: #673ab7 !important;
    border-color: #673ab7 !important;
    transition: box-shadow 0.3s linear;
}

.btn-primary:hover{
    box-shadow: 0px 4px 8px rgba(0,0,0,0.25);
}

.btn-shadow{
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

/* Cards */

.card{
    border-radius: 10px !important;
}

.card.stat-card .card-body{
    display: flex;
}

.card.stat-card .card-icon{
    height: 50px;
    width: 50px;
    font-size: 32px;
    padding: 9px;
    line-height: 34px;
    margin-right: 12px;
    border-radius: 6px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.12);
}

.card.stat-card .card-icon span.material-icons-outlined{
    font-size: 32px !important;
}

.card.stat-card .card-cont h6{
    font-size: 0.8rem;
    font-weight: 300;
}

.card.sub-card .card-body{
    display: flex;
    flex-direction: column;
}

.card.sub-card .card-icon{
    height: 50px;
    width: 50px;
    font-size: 32px;
    padding: 9px;
    line-height: 34px;
    margin-right: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.12);
}

.card.sub-card .card-icon span.material-icons-outlined{
    font-size: 32px;
    color: #ffffff;
}

.card.sub-card p{
    font-size: 1rem;
    margin-bottom: 0;
}

/* Tables */

.custom-table .btn-sm{
    line-height: 1;
    padding: 4px;
    border-radius: 8px;
}

.custom-table thead th{
    font-size: 14px;
    font-weight: 500;
}

.custom-table tbody tr{
    font-size: 13px;
}
.custom-table.table-hover tbody tr:hover{
    background-color: rgba(0,0,0,0.01) !important;
}

.custom-table .btn-sm span.material-icons-outlined{
    font-size: 16px;
}

.custom-table .btn-sm.only-icon span.material-icons-outlined{
    font-size: 18px;
}