.sidebar {
    width: 20%;
    z-index: 1;
    top: 0;
    left: 0;

    min-height: 100vh;
    background: #FBFBFB;
    color: #D27975;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.11);
    overflow-x: hidden;
  
    padding-top: 60px;
}

    .sidebar a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
    

        display: block;
        transition: 0.3s;
    }

        .sidebar a:hover {
            color: #f1f1f1;
        }

    
.closebtn {
    display: none !important;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.openbtn {
    display: none;
    color: #fff !important;
}
.desktop-upload {
    display: flex !important;
}
.mobile-upload {
    display: none !important;
}




/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidebar {
        padding-top: 15px;
    }

        
}

@media screen and (max-width: 992px) {
    .sidebar {
        width: 0%;
    }
    .desktop-upload {
        display: none !important;
    }
    .mobile-upload{
        display:flex !important;
    }

    .openbtn {
        display: block;
        font-size: 20px;
        cursor: pointer;
        background-color: #DA443D;
        color: #fff !important;
        padding: 10px 15px;
        border: none;
        border-radius: 20px;
    }
    .closebtn {
        display:block !important;
 
     
        font-size: 36px;
   
    }
    .closebtn :hover{
        cursor:pointer;
        opacity:1 !important;
    }
    .dashboard-main {
        width: 100% !important;
    }

}