/*
====================================
large Screen - Others
====================================
*/
@media screen and (min-width: 1200px) and (max-width: 1399px) {



}

/*
====================================
Medium Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .dashsidenav {
        height: calc(100vh - 87px);
        max-width: 110px;
    }

    .sidebar-wrap {
        height: calc(100vh - 87px);
        max-width: 310px;
    }

    .dashCanvas {
        width: calc(100% - 420px);
        position: relative;
    }




}



/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {
    .dashsidenav {
        display: none;
    }
    .dashCanvas {
        width: 100%;
        height: calc(100dvh - 72px - 70px);
    }
    .smTabPopup {
        overflow: auto;
        scrollbar-width: none;
    }
    .sm-bottombar ul li.active button {
        background-color: #fff;
    }

    .sm-bottombar ul li.active button span {
        color: #241C15;
    }
    .flex.gap-3.pb-6 > * {
        flex: 1;
    }





}

/*
====================================
Xtra Small Screen - Small Mobile
====================================
*/
@media screen and (max-width: 767px) {

    .dashsidenav {
        display: none;
    }
    .dashCanvas {
        width: 100%;
        height: calc(100dvh - 72px - 70px);
    }
    .smTabPopup {
        overflow: auto;
        scrollbar-width: none;
    }
    .sm-bottombar ul li.active button {
        background-color: #fff;
    }

    .sm-bottombar ul li.active button span {
        color: #241C15;
    }
    .sm-bottombar ul li button svg {
        transform: scale(0.8);
    }
    .canvassidebar.active {
        transform: translateX(120%);
    }
    .canvassidebar{
        transform: translateX(0);
    }

    .togglebar.active {
        left: 70px;
        transition: 0.3s;
        border-radius: 4px;
    }

    .togglebar {
        left: -65px;
    }
    .flex.gap-3.pb-6 > * {
        flex: 1;
    }

}



@media screen and (max-width: 575px) {


}