body {
    /* font-family: "Roboto", sans-serif; */
    font-family: 'Rubik', sans-serif !important;
    /* font-weight: 300; */
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    font-family: 'Rubik', sans-serif ;
    font-weight: 400; /* For Rubik font, 400 is enough */
}
#sidebar-menu > ul > li > a{
    font-family: 'Rubik', sans-serif ;
}
#sidebar-menu .menu-title{
    font-weight: 400;
}
b, strong {
    font-weight: 500;
}
.badge{
    font-weight:400;
}
label{
    font-weight: 500;
}
.user-notifications .dropdown-item {
    white-space: inherit;
    /* background-color: #323b44; */
}
.user-notifications .dropdown-item.active {
    background-color: #3b4753;
    opacity: 1;
}
.user-notifications .dropdown-item.active:hover {
    background-color: #44505c;
    opacity: 1;
}

.user-notifications .notification-list-item {
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 12px;
    transition: 0.2s all linear;
    opacity: 0.6;
}

.user-notifications .notification-list-item:hover {
    /* background-color: #3d4c5a; */
    background-color: #2e3741;
    opacity: 1;
}

.dropdown-menu-right.dropdown-notification {
    right: -60px !important;
}

.notification-list .noti-icon-badge{
    top: 16px;
    right: 10px;
    line-height: 18px;
    font-size: 12px;
}

.dropdown-item.notify-all, .dropdown-item.noti-title {
    background-color: #36404a;
}

.notification-card .icon-section{
    width: 50px;
}
.notification-card .content-section{
    width: calc(100% - 50px);
}

.dropdown-notification {
    width: 450px;
    max-width: calc(100vw - 10px);
    padding:0px !important;
}

.noti-scroll {
    height: 330px !important;
    max-height: 350px;
    margin: 10px;
    margin-top: 0px;
    overflow: auto;
}

@media (max-width:500px) {
    .content-page { 
        padding: 0px;
    }
}

.enlarged .left-side-menu #sidebar-menu > ul > li:hover > a, .enlarged .left-side-menu #sidebar-menu > ul > li:hover > ul{
    box-shadow: none;
    -webkit-box-shadow: none;
    transition:0.3s all ease;
}

.enlarged .left-side-menu #sidebar-menu > ul > li:hover > ul{
    /* background-color: #252c31; */
    background-color: #22272d;
    border-radius: 0px 0px 6px 6px;
    margin-top: -4px;
    margin-left: 0px;
}

.enlarged.left-side-menu-dark #wrapper .left-side-menu #sidebar-menu > ul > li:hover > a{
    background-color: #22272d;
    transition:0.3s all ease;
    border-radius: 6px;
    border-left: none;
}

.ribbon-box .ribbon{
    font-weight: 500;
}

.nav-tabs > li > a, .nav-pills > li > a{
    font-weight: 500;
}




.user-gbt {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 70px;
    color: #caccc8;
}

.header-wallet-icon {
    font-size: 26px;
    margin-right: 4px;
    line-height: initial;
    opacity: 0.9;
}

.header-wallet-content {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-top: 2px;
}
.header-wallet-content span:first-child {
    line-height: 10px;
    font-size: 10px;
    opacity: 0.6;
}
.header-wallet-content span:last-child {
    line-height: 19px;
    /* font-weight: bold; */
}


@media (max-width:700px) {

    .user-gbt {
        height: 65px;
    }

    .navbar-custom {
        /* Important note: This is also the theme color of the app, in case this color is changed, make sure to also update the theme-color meta tag in favicon_code.html */
        /* background-color: #262b2f; */
        background-color: #1f2427;
        height: 65px;
    }

    .navbar-custom .button-menu-mobile {
        line-height: 65px;
        height:65px;
        font-size: 20px;
        color: #eee;
    }

    .content-page {
        margin-top: 65px;
    }

    .navbar-custom .topnav-menu .nav-link {
        line-height: 65px;
    }

    .left-side-menu {
        top: 65px
    }


    .navbar-custom .button-menu-mobile i {
        padding: 8px;
        background-color: #1f2427;
        border-radius: 100%;
    }

    .left-side-menu-dark .left-side-menu {
        background: #181c21;
    }

    .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a.active {
        border-radius: 8px;
        border-left: none;
    }
    #sidebar-menu > ul > li > a {
        padding-left: 10px;
        margin: 0px 10px;
    }

    #sidebar-menu > ul > li > a.active i {
        color: #fff;
    }

    #sidebar-menu .share-feedback-btn{
        background:linear-gradient(45deg, #31373f, #2a323a);
    }

}

.card-box{
    border-radius: 8px;
    border:0px;
}

.card{
    border-radius: 8px;
    border:0px;
}

.card-header:first-child{
    border-radius: 8px 8px 2px 2px;
}

.nav-pills > a{
    font-weight: 500;
}

.nav-pills .nav-link{
    background-color: #303942;
    transition: 0.2s all ease;
}

.nav-pills .nav-link:not(.active):hover{
    background-color: #2a323a;
}

.nav-pills .nav-link.active .nav-alt-text{
    color:white !important;
}

@media (max-width: 768px) {
    .page-title-box .page-title {
        line-height: 52px;
    }
    .page-title-box{
        background-color: #2b333a;
    }
}

@media (max-width: 767.98px){
    .sidebar-enable .left-side-menu {
        left: 0px;
    }
    .left-side-menu {
        display: block;
        left: -250px;
        /* Width of the sidebar is 240px however, doing 10px extra to avoid shadow from overflowing, and possibly other problems? */
    }
}

/* This fixes an issue with bootstrap where xl modals where shown at max 500px width on screen sizes between these ranges */
@media (min-width: 576px) and (max-width: 992px) {
    .modal-dialog.modal-xl {
        max-width: 80%;
    }
}