.top-bar{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    background-color: white;
    padding-left: 280px;
    transition: padding-left 0.5s ease;
    /* box-shadow: 0px 7px 0px 5px gba(20, 19, 19, 0.1); */
}

.lateral-menu{
    position: fixed;
    width: 250px;
    transition: all .5s ease;
    background-color: white;
    top:0;
    left: 0;
    bottom: 0;
    z-index: 999;
    transition: width 0.5s;
}
.lateral-menu #btn{
    text-align: left;
}

.lateral-menu.colapseMenu{
    width: 80px;
    opacity: 1;
}

.lateral-menu.colapseMenu .logo-lateral{
    display: none;
}

.lateral-menu .logo-lateral{
     display: block;
}
.lateral-menu li .textMenu, .lateral-menu .sub-menu, .lateral-menu .accordion-button{
   opacity: 1;
} 

.lateral-menu.colapseMenu li .textMenu, .lateral-menu.colapseMenu .sub-menu, .lateral-menu.colapseMenu .accordion-button{
    opacity: 0;
 }

 .lateral-menu.colapseMenu .content{
    margin-left: 100px;
 }

 .notifications-list{
    background-color: rgb(246, 243, 243);
    position: absolute;
    width:400px;
    padding-bottom: 20px;
    /* height: 100px; */
    top: 70px;
    right: 10%;
    display: none;
    transition: all 0.3 ease-in-out
 }

 .notifications-list-offcanvas{
    background-color: rgb(246, 243, 243);
    position: absolute;
    width:85%;
    /* top: -200px; */
    left: 10%;
    display: none;
    transition: all 0.3 ease-in-out
 }

 .mark-as-read, .mark-as-read-admin{
    font-size: 12px;
 }

 .notifications{
    
    background-color: rgb(246, 243, 243);
    /* border-bottom: solid rgb(204, 200, 200) 1px; */
    overflow-y:auto;
    overflow-x: hidden;
 }

.content{
    margin-top: 50px;
    margin-left: 250px;
    transition: margin-left 0.5s ease; 
}
.content-body{
    /* box-shadow: 1px 1px 1px 1px rgba(20, 19, 19, 0.1); */
    border-radius: 10px;
    padding: 20px;
    margin-right: 5px;
    background-color: white;
}

.graph-container{
    border-radius: 10px;
    padding: 20px;
    background-color: white; 
}

.lateral-shadow{
    box-shadow: 7px 0px 10px 0px rgba(20, 19, 19, 0.1);
}

.lateral-menu ul{
    list-style: none;
}

.lateral-menu .menu-item{
    /* color: black; */
    font-size: 17px;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    padding-left: 12px;
}

.sub-menu-item{
    padding: 10px;   
}

.sub-menu-item:hover{
    color: rgb(243, 53, 53);
}

.lateral-menu .menu-item:hover{
    background-color: antiquewhite;
}

.lateral-menu .menu-item.active{
    background-color: antiquewhite;
}

.menu li{
    line-height: 15px;
}

.main-menu{
    margin-top: 20px;
}

.logo-lateral{
    width: 120px;
    height: 70px;
}

.logout{
    margin-top: 120px}

.body-admin{
    background-color: rgb(242, 240, 240);
}

.form{
   width: 50%;;
}
.dropzone{
    border-color: red;
    border-radius: 20px;
}

.form-input{
    flex-grow: 0 ;
    flex-shrink: 0;
    flex-basis: 60%;
}

.form-img{
    flex-grow: 0 ;
    flex-shrink: 0;
    flex-basis: 40%;
}

.input-number::-webkit-inner-spin-button, .custom-number-input::-webkit-outer-spin-button{
    appearance: none; margin: 0;
 }

 .icone-pedido{

    width: 25px;
    height: 25px;
 }

 td, th{
    text-align: left;
 }

 .modal-detalhes p{
    font-size: 18px;
 }

 /* .card-dash-image{
    z-index: -1;
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
 }
*/
 .card-dashboard{
    border-radius: 10px;
    padding: 20px; 
    background-color: rgb(255, 255, 255);
    /* background-image: url('../images/icones/add.svg'); rgb(250, 235, 215);
    background-size: 35%;
    background-repeat: no-repeat;
    background-position: right -20px bottom 0px;;
    transition: background-size 0.2s ease-in-out; */
 } 

 .card-dashboard:hover{
    background-size: 36%;
 }

 .modal-detalhes p{
    font-size: 15px;
 }

 #tabelaPedidos, #tabelaPedidosRecentes, #tabelavoucher, #tabelarevendedores, #tabelaproduto {
    font-size: 15px;
 }