/* Responsive */
@media (max-width: 339.98px) {
    .side-nav-open {
        width: 0;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .side-nav-close {
        width: 180px;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .content {
        width: 100%;
        margin-left: 0;
    }
    .content-expand {
        width: 100%;
        margin-left: 180px;
    }
    .top-navbar{
        width: 100%;
        margin-left: 0;
    }
    .top-navbar-expand{
        width: 100%;
        margin-left: 180px;
    }
}

@media (min-width:340px) and (max-width: 360.98px) {
    .side-nav-open {
        width: 0;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .side-nav-close {
        width: 180px;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .content {
        width: 100%;
        margin-left: 0;
    }
    .content-expand {
        width: 100%;
        margin-left: 180px;
    }
    .top-navbar{
        width: 100%;
        margin-left: 0;
    }
    .top-navbar-expand{
        width: 100%;
        margin-left: 180px;
    }
}

@media (min-width: 361px) and (max-width: 575.98px) {
    .side-nav-open {
        width: 0;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .side-nav-close {
        width: 180px;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .content {
        width: 100%;
        margin-left: 0;
    }
    .content-expand {

        width: 100%;
        margin-left: 180px;
    }
    .top-navbar{
        width: 100%;
        margin-left: 0;
    }
    .top-navbar-expand{
        width: 100%;
        margin-left: 180px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .side-nav-open {
        width: 0;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .side-nav-close {
        width: 180px;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .content {
        width: 100%;
        margin-left: 0;
    }
    .content-expand {
        width: 100%;
        margin-left: 180px;
    }
    .top-navbar{
        width: 100%;
        margin-left: 0;
    }
    .top-navbar-expand{
        width: 100%;
        margin-left: 180px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .side-nav-open {
        width: 0;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .side-nav-close {
        width: 180px;
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: hidden;
    }
    .content {
        width: 100%;
        margin-left: 0;
    }
    .content-expand {
        width: 100%;
        margin-left: 180px;
    }
    .top-navbar{
        width: 100%;
        margin-left: 0;
    }
    .top-navbar-expand{
        width: 100%;
        margin-left: 180px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {

}

@media (min-width: 1200px) {

}