body{
    background-color:#1E1E1E;
    margin:0;
    padding:0;
}

/* index - login */
.areaconteudo_index{
    width:100%;
    height:100vh;
    display:flex;
    justify-content: center;
    align-items: center;
}
.card_menu_index{
    width:400px;
    height:500px;
    background-color:#171717;
    border-radius:2%;

}
.image_menu_index{
    width:100%;
    height:300px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.image_menu_index > img{
    width:65%;
    height:auto;
}
.card_frase_index{
    width:100%;
    height:20px;
    display:flex;
    align-items: center;
    justify-content: center;
    color:#666;
    font-family: 'Cabin', sans-serif;
    font-size:17px;

}
.card_form_index{
    width:100%;
    height:150px;
    margin-top:15px;
    display:flex;
    justify-content: center;
    flex-wrap:wrap;
}
.formindex{
    width:60%;
    height:35px;
    background-color:#171717;
    border:1px solid #333;
    padding-left:5%;
    color:#ddd;
    font-size:0.95em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    border-radius:0.2em;
    outline: none;

}
.formindex_button{
    width:67%;
    height:35px;
    background-color:#333;
    border:0px;
    padding-left:5px;
    color:#ddd;
    font-size:1em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    border-radius:0.2em;
}

/* ------ template -------*/
.full_area_body{
    width:100%;
    height:100vh;
    display:flex;
    background-color:#1E1E1E;
}
.menu_lateral{
    width:200px;
    height:100%;
    background-color:#171717;
    display:flex;
    justify-content: center;
    margin-right:30px;
    position:fixed;
}

.logo{
    width:86%;
    height:60px;
    margin-top:5px;
}

.paosasco{
    width:100%;
    height:100%;
    color:#E9E9E9;
    font-family: 'Cabin', sans-serif;
    display:flex;
    align-items: center;
}
.paosasco > img{
    width:auto;
    height:75%;
    margin-right:5px;
}
.divisor{
    width:99%;
    height:1px;
    background-color:#333;
    margin-top:10px;


}
.menu_buttons{
    width:100%;
    height:500px;
    font-family: 'Cabin', sans-serif;
    margin-top:50px;
}
.menu_buttons > a{
    color:none;
    text-decoration:none;
}


.bt_menu{
        width:180px;
        height:40px;
        display:flex;
        align-items: center;
        justify-content: left;
        padding-left:10px;
        color:#696969;
        border-radius:0.5em;

}
.bt_menu:hover{
    color:pink;
}
.bt_ativo{
    width:180px;
    height:40px;
    background-color:#1E1E1E;
    display:flex;
    align-items: center;
    justify-content: left;
    padding-left:10px;
    color:#333;
    border-radius:0.5em;
}
.bt_menu > img{
    width:20px;
    height:auto;
    margin-right:10px;
}
.bt_pendencia_qtde{
    width:20px;
    height:20px;
    margin-left:15px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:pink;
    font-size:0.80em;
}

.data{
    width:100px;
    height:30px;
    background-color:#333;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:1em;
    margin-top:80px;
    margin-left:30px;
    font-size:0.95em;
    color:#ddd;

}

.conteudo{
    width:80.5%;
    height:100%;
    font-family: 'Cabin', sans-serif;
    margin-left:230px;
}
header{
    width:100%;
    height:80px;
    display:flex;
    align-items: center;
}
.hello{
    width:400px;
    height:100%;
    display:flex;
    align-items: center;
    color:#E3E3E3;
    font-size:1.5em;
    font-weight: lighter;
    font-family: Arial, Helvetica, sans-serif;
}
.statusadm{
    width:300px;
    height:10px;

}
.busca{
    width:300px;
    height:100%;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    margin-left:170px;
}
.busca > input{
/*
    width:230px;
    height:30px;
    background:none;
    border:1px solid #696969;
    font-family: Arial, Helvetica, sans-serif;
    color:#696969;
    border-radius:1em;
    padding-left:20px;
    outline: none;
*/
width:80%;
height:35px;
background-color:#333;
border:0px;
padding-left:20px;
color:#ddd;
font-size:1em;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
border-radius:0.2em;
}




/* ------ fim template -------*/

/* ------- dashboard ---------*/

.consolidadodash{
    width:100%;
    height:auto;
    display:flex;
    margin-top:45px;
}
.cardsconsolidado{
    width:550px;
    height:200px;
    

}
.linha1_cards{
    width:570px;
    height:120px;
    display:flex;
    justify-content: space-between;
    margin-bottom:10px;
}
.cards_dash{
    width:280px;
    height:100%;
    background-color:#171717;
    border-radius:0.5em;

}
.card_dash_l1{
    width:100%;
    height:75px;
    display:flex;


}
.card_dash_c1{
    width:25%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}
.circle_cards{
    width:40px;
    height:40px;
    border-radius:50% 50%;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:#222;
}
.imgfundo_l1_c1{
    width:100%;
    height:100%;
    border-radius:50% 50%;
    background-position: center center;
    background-size:auto 100%;
}

.card_dash_c2{
    width:70%;
    height:100%;

}
.qtde_vendido{
    width:100%;
    height:auto;
    display:flex;
    align-items: center;

    font-family:'Cabin', sans-serif;
    font-size:1.5em;
    color:#ddd;
    font-weight: lighter;
    padding-top:20px;
}
.descricao_card{
width:100%;
height:20%;
display:flex;

color:#666;
font-size:0.95em;
font-weight: lighter;
font-family: Arial, Helvetica, sans-serif;
}
.card_dash_c3{
    width:10%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}



.card_dash_l2{
    width:100%;
    height:35px;
    display:flex;
    justify-content: center;
    align-items: center;



}



.graficosconsolidado{
    width:550px;
    height:250px;
    background-color:#171717;
    margin-left:50px;
    border-radius:0.5em;
}
.titulo_graficos{
    width:90%;
    height:30px;
    display:flex;
    align-items: flex-end;
    padding-left:15px;
    color:#666;
    font-family: Arial, Helvetica, sans-serif;
    font-size:0.95em;
    font-weight: lighter;

}
.row-graficos-vendas{
    width:100%;
    height:150px;
    margin-top:15px;
    display:flex;
    align-items: flex-end;
    border-top:2px solid #222;
}
.meses{
    width:96%;
    height:50px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-left:15px;
    border-top:2px solid #222;
    color:#666;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 0.95em;
}

.lucrosdiarios{
    width:99%;
    height:300px;
    background-color:#171717;
    border-radius:0.5em;
    margin-top:20px;
}
.titulo_lucros{
    width:98.5%;
    height:40px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    color:#666;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 0.95em;
    padding-left:1.5%;
}
.menu_semanal{
    width:400px;
    padding-right:20px;
    display:flex;
    justify-content: flex-end;

}
.timeline{
    width:100%;
    height:220px;
    display:flex;
    align-items: center;
    justify-content: center;
    border-bottom:1px solid #333;
}
.cards{
    width:80%;
    height:190px;
    display:flex;
    justify-content: space-between;
    align-items: center;

}
.card_data{
    width:120px;
    height:80%;
    background-color:#222;
    border-radius:0.5em;
}
.titulo_card_lucro_diario{
    width:100%;
    height:30px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:#666;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 0.85em;
    padding-left:1.5%;


}
.valor_card_lucro_diario{
    width:100%;
    height:80px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-family:'Cabin', sans-serif;
    font-size:1.5em;
    color:#5388CB;
    font-weight: lighter;
}
.diasemana_card_lucro_diario{
    width:100%;
    height:40px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:#666;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 0.85em;
    border-top:1px solid #000;

}
.diasemana_card_lucro_diario > img{
    width:50px;
    height:auto;
}
#card_29a31 > .card_data{
    margin-right:15px;
}

/* ------ pagina historico ----------- */

.anoatual{
    width:100%;
    height:40px;
    display:flex;
    align-items: center;
    margin-bottom:15px;

}
.anoatual > div > img{
    width:40px;
    height:auto;
    padding-top:5px;
}
.anoatual > div {
    font-size:1.5em;
    margin-right:15px;
    font-family:'Cabin', sans-serif;
    font-size:1em;
    color:#ddd;
    font-weight: lighter;

}
.titulo_colunas{
    width:100%;
    height:30px;
    margin-top:15px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    border-bottom:2px solid #666;


}
.numero_pedidos_historico{
    width:25%;
    height:100%;
    display:flex;
    align-items: center;
    color:pink;
    font-family:'Cabin', sans-serif;
    padding-left:5px;

}
.mes_pedidos_historico{
    width:25%;
    height:100%;
    display:flex;
    align-items: center;
    color:pink;
    font-family:'Cabin', sans-serif;
    padding-left:5px;

}
.total_pedidos_historico{
    width:25%;
    height:100%;
    display:flex;
    align-items: center;
    color:pink;
    font-family:'Cabin', sans-serif;
    padding-left:5px;

}
.lucro_pedidos_historico{
    width:25%;
    height:100%;
    display:flex;
    align-items: center;
    color:pink;
    font-family:'Cabin', sans-serif;
    padding-left:5px;

}
.consolidado_mensal_historico{
    width:100%;
    height:35px;
    display:flex;
    align-items: center;
    border-bottom:1px solid #333;
    color:#666;
   

}
.consolidado_mensal_historico:hover{
    background-color:#171717;
    color:#ddd;
}
.consolidado_mensal_historico > div{
    width:25%;
    height:100%;
    display:flex;
    align-items: center;
    padding-left:5px;
    font-family: Arial, Helvetica, sans-serif;
}

/*** pagina registrar vendas ***/

.inicia_pedido{
    width:100%;
    height:80px;
    display:flex;
    align-items: flex-end;
}
.item1_input{
    width:auto;
    height:100%;
    display:flex;
    align-items: center;
    margin-right:30px;


}
.item1_input input{
    width:500px;
    height:80px;
    border:0;
    outline:0;
    padding-left:2%;
    padding-right:2%;
    background-color:#333;
    border:0px;
    padding-left:20px;
    color:#ddd;
    font-size:2.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    border-radius:0.2em;

}
.item2_input{
    width:300px;
    height:80px;
    background-color:#333;
    border:0px;
    padding-left:20px;
    color:pink;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    border-radius:0.5em;
}
.calculadora-vendas{
    width:100%;
    height:30px;
    display:flex;
    align-items: center;
    padding-top:5px;
    margin-left:-10px;

}
.calculadora-vendas > img{
    width:auto;
    height:25px;
}
.valor-vendas{
    width:100%;
    height:50px;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-top:-20px;
    margin-left:-10px;

}
.cifraovendas{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 0.80em;
    margin-right:5px;
    color:#666;
}
.valortotal{
    color:#ddd;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 2.5em;
}
.item3_input{
    width:300px;
    height:80px;
    background-color:rgb(233, 175, 184);
    margin-left:15px;
    border-radius:0.5em;
    display:flex;
    justify-content: center;
    align-items: center;
    color:#171717;
    font-size:1.5em;
    font-weight: lighter;
    font-family: Arial, Helvetica, sans-serif;
    cursor:pointer;
    border:0;

}
.qtde_itens_pedidos{
    width:100%;
    height:50px;
    margin-top:25px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 1.2em;
    margin-right:5px;
    color:#5388CB;
    display:flex;
    align-items: center;
    display:flex;
}
.qtde_itens_pedidos > div > a{
    width:auto;
    height:auto;
    padding:5px;
    color:#CE4343;
    margin-left:15px;
    text-decoration:none;


}
.tabela_produtos{
    width:100%;
    height:30px;
    color:pink;
    margin-top:15px;
    border-bottom:1px solid #666;
    display:flex;
    justify-content: space-between;
    align-items: center;


}
.cod, .cod2{
    width:15%;

}
.nomeProd, .nomeProd2{
    width:45%;

}
.valorProd, .valorProd2{
    width:12.5%;

}
.actionbutton, .actionbutton2{
    width:20%;
    display:flex;
    justify-content: center;
    align-items: center;


}
.valorProd, .valorProd2{
    width:12.5%;
}    
.cod4{
    width:20%;
    height:100%;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    align-items: center;
    padding-left:10px;
    font-weight: normal;
    color:pink;
}
.nomeProd4{
    width:45%;
    height:100%;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    padding-left:10px;
    font-weight: normal;
    color:pink;
}
.valorProd4{
    width:20%;
    height:100%;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    padding-left:10px;
    font-weight: normal;
    color:pink;
}
.qtdeProd4{
    width:20%;
    height:100%;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    align-items: center;
    justify-content: center;
    padding-left:10px;
    font-weight: normal;
    color:pink;
}

.cod3{
    width:20%;
    height:23px;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    align-items: center;
    padding-left:10px;
    font-weight: normal;
    color:#999;
    padding-top:5px;
    padding-bottom:5px;

}
.nomeProd3{
    width:45%;
    height:23px;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    padding-left:10px;
    font-weight: normal;
    color:#999;
    padding-top:5px;
    padding-bottom:5px;
    text-transform:uppercase;
}
.valorProd3{
    width:20%;
    height:23px;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    padding-left:10px;
    font-weight: normal;
    color:#999;
    padding-top:5px;
    padding-bottom:5px;
}
.qtdeProd3{
    width:20%;
    height:23px;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    align-items: center;
    justify-content: center;
    padding-left:10px;
    font-weight: normal;
    color:#999;
    padding-top:5px;
    padding-bottom:5px;
}
.actionbutton3{
    width:20%;
    height:23px;
    font-family: Arial, Helvetica, sans-serif;
    display:flex;
    align-items: center;
    justify-content: center;
    padding-left:10px;
    font-weight: normal;
    color:#999;
    padding-top:5px;
    padding-bottom:5px;
}
.actionbutton3 input{
    border:1px solid #ddd;
    background-color:#333;
    color:#fff;
}



.buttonvendas{
    width:20px;
    height:20px;
    margin:5px;
}
.newqtde{
    width:60px;
    height:25px;
    border:1px solid #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size:0.97em;
    text-align:center;
    background-color:#222;
    color:#ddd;

}
.looping_itens{
    width:100%;
    height:40px;
    font-size:0.89em;
    font-family: Arial, Helvetica, sans-serif;
    color:#ddd;
    
}
.linhaproduto{
    width:100%;
    height:40px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    border-bottom:1px solid #444;
}
.linhaproduto:hover{
    background-color:#000;
}

.qtde_pendencias{
    width:100%;
    height:30px;
    display:flex;
    align-items: center;
    color:#5388CB;
    margin-bottom:20px;
}
.qtde_pendencias > a{
    margin-left:15px;
    text-decoration:none;
    color:#CE4343;
}
.estrutura_cards{
    width:100%;
    height:auto;
    display:flex;
    justify-content: flex-start;
    flex-wrap:wrap;
}
.layer-fora{
    width:340px;
    height:auto;
    background-color:#171717;
    border-radius:5px;
    border-bottom:1px solid #222;
    margin-right:15px;
    box-shadow: 1px 2px 5px #222;
    margin-bottom:15px;
    padding:5px;
}
.titulolayer{
    width:94%;
    height:40px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding-left:3%;
    padding-right:3%;
    font-family: Arial, Helvetica, sans-serif;
    font-size:0.89em;
    font-weight: normal;
    border-bottom:1px dashed #333;
}
.titulolayer > span{
    color:#666; 
    text-transform: uppercase;  
}
.itenslayer{
    width:98%;
    height:300px;
    overflow-y: auto;
    padding-left:1%;
    padding-right:1%;
    padding-top:3%;
    margin-bottom:30px;
    font-size:0.72em;
    border-bottom:1px solid  #333; 
    text-transform:uppercase;
    color:#999;
    font-family: Arial, Helvetica, sans-serif;
}
.layervalorped{
    width:94%;
    height:40px;
    padding-left:3%;
    padding-right:3%;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:1.2em;
    font-family: Arial, Helvetica, sans-serif;
    z-index:999;
}
.layervalorped > span{
    border:1px solid #171717; 
    background-color:#333;  
    padding:5px; 
    color:#999; 
    border-radius:15px;
    margin-top:-40px;
    font-size:0.89em;
    
}
.buttonfinalizar{
    width:94%;
    height:40px;
    padding-left:2%;
    padding-right:2%;
    display:flex;
    align-items: center;
    justify-content: center;
    padding-bottom:10px;
    
}
.buttonfinalizar > input{
    width:150px;
    height:35px;
    background-color:#333;
    border:1px solid #333;
    color:#666;
}
.botaofin{
    width:150px;
    height:35px;
    background-color:#333;
    border:1px solid #333;
    color:#999;
}
.titulo{
    color:#999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    font-weight: lighter;
    margin-bottom:50px;
    display:flex;
    align-items: center;
}
.titulo > img{
    width:20px;
    height:auto;
    margin-right:15px;
}
.formestoques{
    width:400px;
    height:40px;
    background-color:#171717;
    border:0;
    border-radius: 0.5em;
    color:#ddd;
    padding-left:10px;
    font-size: 0.89em;
}
.area_input{
    width:300px;
    height:auto;
    margin-bottom:15px;
}
.btcadastro{
    width:410px;
    height:35px;
    background-color:pink;
    color:#222;
    border:0px;
    border-radius:0.3em;

}
.notification{
    width:400px;
    height:50px;
    background-color:lightgreen;
    color:#222;
    margin-top:100px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5em;
}
.notification > img{
    width:20px;
    height:auto;
    margin-right:15px;
}

.notificationdanger{
    width:400px;
    height:50px;
    background-color:lightsalmon;
    color:#222;
    margin-top:100px;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5em;
}
.notificationdanger > img{
    width:20px;
    height:auto;
    margin-right:15px;
}