@media screen and (max-width: 576px) {
    /*----------------------- left menu css -----------------------*/
    :root { 
        --left-nav-size: 100vw;
    }

    #show-sidebar, #close-sidebar {
        position: relative;
        left: inherit; 
        border-radius: 1.25rem;
        transition-delay: 0s;
        padding: 3px 105px 3px 68px;
        font-size: 14px;
    }

        #show-sidebar .fa-bars {
            vertical-align: middle;
            width: 1.5em;
            height: 1.5em;
            padding-top: inherit;
            padding-bottom: inherit;
        }

    .page-wrapper.toggled #show-sidebar {
       /* left: 0;*/
        z-index: 999;
    }

    .page-wrapper.responsive-toggle #show-sidebar {
        z-index: -1 !important;
    }

    .page-wrapper.toggled .sidebar-wrapper {
        left: -129vw;
    }

    .page-wrapper.responsive-toggle .sidebar-wrapper {
        left: 0 !important;
    }

    /*----------------------- global site css -----------------------*/
    .navbar-logo-mm {
        width: 100%;   
        padding-bottom: 0px;
    }
    
    .input-group-prepend {
        width: 100%;
        height: 3rem;        
    }
     
    .search {
        width: 100%;        
    }
        .search input {
            width: 100%;            
        }

    .header-dd {
        border-radius: 25px;        
    }
     

    .sidebar-wrapper {
        position: fixed; 
        width:100%;   
        top: 70px;
    }

    .sidebar-wrapper .sidebar-menu ul li a i {
        margin-right: 10px;
        font-size: 31px;
        width: 30px;
        height: 30px;            
    }
    
    .sidebar-submenu li {
        padding-left: 0px;        
    }
    .page-content {
        background: #F4F1EA;
        border-radius: 10px 0px 0px 0px;
        margin-left: 0px;
        padding: 85px 30px 0px 30px !important;
    }

    .display-none-mobile {
        display: none !important;
    }

    .container-content {
        max-width: 100vw !important;
    }
     
    .pt-16{
        padding-top:16px;
    }

    .sb-footer {
        position: fixed;
    }

    .page-wrapper .navbar, .page-wrapper .page-content {
        width: 100vw; 
    }

    .container {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        padding-left: 30px;
    }

    .tables-activites{
        display: block;
    }
    
    .header-container{
        margin-left: 0px
    }

    .header-contents {
        display: grid;
        grid-auto-flow: column;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row; 
    }

    .fullw-action-btns {
        width: calc(100vw - 30px) !important;
        left: unset;
        padding-left: 0;
    }

    .navbar-toggleable-sm {
        position: fixed;
        top: 0;
        z-index: 1200;
        width: 100vw;
        padding: 0 3rem;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .sidebar-wrapper {
        z-index: 1021;
        background-color: white;
        top: 50px;
    }

    .w-xs-100{
        width:100%;
    }

    .icon-profile-size{
        font-size: 2.5rem;
    }

    .titre-creation {
        font-size: 30px !important;
    }
    
    .w-sm-75 {
        width: 100%;        
    }

    .centered-body .split-content .left-container {
        height: fit-content;
        height: -moz-fit-content; /* For firefox */
    }

    .top-8 {
        top: 8px;
    }

    .word-break {
        word-break: break-word;
    }

    #global-message {
        left: 50% !important;
    }

    .table-scroll {
        min-width: 200px;
        overflow-x: scroll;
        overflow-y: hidden;
    }

        .table-scroll table {
            padding-bottom: 3px;
        }

            .table-scroll table.min-w-900 {
                min-width: 900px;
            }

            .table-scroll table.min-w-600 {
                min-width: 600px;
            }
}