@media (min-width:1500px) {
    .custom-container {
        width: 100%;
        max-width: 1550px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Extra Small (XS) - Phones (Portrait) */
@media (max-width: 575px) {

}

/* Small (SM) - Phones (Landscape) & Small Tablets */
@media (min-width: 300px) and (max-width: 767px) {
    /* Styles for small devices */
    .sidebar {
        width: 0;
        &.active{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
        }
    }
    .main-content {
        width: 98%;
        margin-left: auto;
        margin-right: auto;
    }
    .custom-dropdown {
        width: 88px;
    }
    .dropdown-toggle img {
        width: 14px;
        height: 10px;
    }
    .dropdown-toggle .selected-lang{
        font-size: 10px !important;
    }
    .nav {
        &.nav-pills {
            & .nav-link {
               font-size: 12px;
               padding: 5px 8px;
            }
        }
    }
    .offcanvas-custom{
        width: 100% !important;
     }
}

/* Medium (MD) - Tablets */
@media (min-width: 768px) and (max-width: 991px) {
    .sidebar {
        width: 10%;
        overflow-x: hidden;

        & .nav-items {
            overflow-x: hidden;
        }

        & .nav-link {
            white-space: nowrap;

            & span {
                margin-right: 30px;
                padding-left: 8px;
            }
        }

        .logo-wrapper {
            justify-content: space-between;
            & .logo {
                width: 50px;
            }
        }
        &.active{
            width: 45%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
        }
    }
    .main-content {
        width: 88%;
        &.active{
            width: 98%;
        }
    }
    .table{
        & thead tr th{
            white-space: nowrap;
        }
    }
    .offcanvas-custom{
        width: 70% !important;
     }
}

/* Large (LG) - Laptops & Small Desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Styles for laptops */
}

/* Extra Large (XL) - Large Desktops */
@media (min-width: 1200px) and (max-width: 1399px) {
    /* Styles for large screens */
}

/* Extra Extra Large (XXL) - 4K Screens */
@media (min-width: 1400px) {
    /* Styles for extra large screens */
}