Backend-Api/ServiceHost/wwwroot/ClientTheme/css/responsive.css

/* XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {

}

/* X-Large devices (desktops, 1200 and up) */
@media (max-width: 1200px) {
}

/* X-Large devices (desktops, 1200 and up) */
@media (min-width: 1200px) {
    /* .main-wrapper div {
        width: 40px;
        height: 40px;
    } */

    .main-wrapper a div svg{
        width: 20px;
    }

    .profile-box {
        height: 40px;
        padding: 5px;
    }

    .dropdown button svg{
        width: 30px;
    }
    
    .dropdown button span{
        font-size: small;
    }
}


/* Large devices (desktops, 1200px and up) */
@media (min-width: 992px) { 

    .sidebar-navigation {
        width: 280px;
    }
    
    .sidebar-navigation > .sidebar-menu {
        display: block;
    }

    .sidebar-navigation > .sidebar-menu-mobile {
        display: none;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul {
        font-size: 13px;
        font-weight: 200;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul li {
        border-radius: 15px;
        border: 0.5px solid transparent;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul li a svg{
        width: 50px;
        height: 50px;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul li:hover {
        border: 0.5px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.15);
    }
    
    /* .main-wrapper a, .main-wrapper .dropdown {
        display: block !important;
    } */
        
    .sidebar-navigation.small {
        padding: 2rem 0.6rem !important;
        width: 80px;
        margin-right: 0;
        transition: ease .4s;
        transition-timing-function: cubic-bezier(0.9,0,1,1);
    }

    .sidebar-navigation.small .logo{
        padding: 0;
        width: 50px;
        height: 50px;
        text-align: center;
    }

    .sidebar-navigation.small > .sidebar-menu > ul li a span {
        display: none;
        transition: ease .4s;
        /* transition-timing-function: cubic-bezier(0.9,0,1,1); */
    }


    .sidebar-navigation.small > .sidebar-menu > ul li {
        border-radius: 50px;
        padding: 8px 0;
        margin: 6px auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .small .toggle {
        margin-right: 85px;
        transition: ease .4s;
    }    

    .content-container.small {
        margin-right: 85px;
        transition: ease .4s;
    }
    
} 


/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {    
    
    
    .sidebar-navigation {
        width: 280px;
        /* height: 100% !important; */
    }
    
    .sidebar-navigation > .sidebar-menu {
        display: none;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul {
        font-size: 13px;
        font-weight: 200;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul li {
        border-radius: 15px;
        border: 0.5px solid transparent;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul li a svg{
        width: 50px;
        height: 50px;
    }

    .sidebar-navigation > .sidebar-menu-mobile > ul li:hover {
        border: 0.5px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.15);
    }
    
    .header-left {
        display: none !important;
    } 

    /* Sidebar Navigation Small  */
    .sidebar-navigation.small {
        padding: 0 !important;
        width: 0;
        right: 0;
    }

    .sidebar-navigation.small > .sidebar-menu-mobile  {
        display: none;
    }

    .sidebar-navigation.small > .sidebar-menu-mobile > ul li a span {
        display: none;
    }

    .sidebar-navigation.small > .sidebar-menu-mobile > ul li {
        display: none;
    }
    
    .small .toggle {
        margin-right: 10px;
        transition: ease .4s;
    }

     .content-container {
        margin-right: 0;
        transition: ease .4s;
    }

    
    .modal-content label{
        font-size: 13px;
    }
    
    .btn-primary, .btn-secondary {    
        width: 190px;
        font-size: 16px;
        padding: 9px;
    }

    .form-check-inline {
        margin-left: 0.4rem;
    }

    .modal-dialog {
        max-width: 770px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {

}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .sidebar-navigation .sidebar-menu-mobile > ul li a svg {
        width: 40px;
        height: 40px;
    }
    
    .modal-content label{
        font-size: 12px;
    }
    
    .btn-primary, .btn-secondary {    
        width: 130px;
        font-size: 12px;
        padding: 7px;
    }

    .form-check-inline {
        margin-left: 0.3rem;
    }

    .form-check-custom {
        display: flex !important;
    }
}

/* 
    X-Small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default in Bootstrap 
*/
@media (max-width: 416px) {
    .sidebar-navigation .sidebar-menu-mobile > ul li a svg {
        width: 40px;
        height: 40px;
    }
    
    .modal-content label{
        font-size: 11px;
    }

    .form-check-input[type="radio"] {  
        border-radius: 5px;
        padding: 5px;
        margin: 0 3px;
    }
}