*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans";
}

input[type=number]{
    margin-top: 8px;
}

input[type=text],
input[type=date],

textarea{
    -webkit-appearance: none;
    border-radius: 0;
}

html,body{
    height: 100%;
    background: rgb(225,225,225);
}

body{
    overflow-x: hidden;
}

.card-title{
    width: 100%;
    padding: 8px;
    color: white;
    font-size: 17px;
    margin: 10px 0;
    font-weight: lighter;
    background: #0091ea;
}

/*Página de login*/

.box-login{
    box-shadow:10px 10px 5px rgb(200,200,200);
    max-width: 600px;
    width: 95%;
    padding: 60px 2%;
    background: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

.box-login h2{
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    font-weight: normal;
    margin: 10px 0;
    color: black;
}

.box-login input[type=text],
.box-login input[type=password]
{
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    padding-left: 8px;
    margin-top: 8px; 
}

.box-login input[type=submit]{
    width: 100px;
    height: 40px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
    background: #00bfa5;
    color: white;
    border: 0;

}

/*Box erro do painel*/

.erro-box{
    width: 100%;
    padding: 8px 2%;
    text-align: center;
    background: #f75353;
    color: white;
    font-size: 15px;
}

/*Fim página login*/

/*Painel de controle*/

.clear{clear:both;}

.center{padding: 0 2%;margin:0 auto;}


header{
    position: relative;
    background: #383838f2 ;
    width: 100%;
}

.logout{
    float: right;    
}

.logout a{
    padding: 0 20px;
    color: white;
    font-size: 20px;
    text-decoration: none;
}

.logout span{
    font-size: 17px;
    text-decoration: none;
}




div.menu{
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    padding: 10px 0;
    position: fixed;
    left: 0;
    top: 0;
    background:#2B2B2B;
    float: left;
    top: 108px;
}

li.nav-item:hover .dropdown-menu {display: block;}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    top: 65px;
}

div.box-usuario{
    text-align: center;
}

.avatar-usuario{
    text-align: left;
    display: inline-block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border:3px solid #525252;
}

.imagem-usuario{
    display: inline-block;
    width: 130px;
    height: 130px;
    position: relative;
    border-radius: 50%;
    border:3px solid #525252;
}

.imagem-usuario img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;   

}

.avatar-usuario i{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%); /*Para funcionar no IE*/
    font-size: 50px;    
    color:#525252;
}

.nome-usuario{
    text-align: center;
    margin-top: 10px;
}

.nome-usuario p{
    color: white;    
    font-size: 15px;
    font-weight: normal;
}
.items-menu{
    margin-top: 30px;
    
}

.items-menu h2{    
    text-align: left;
    font-weight: normal;
    font-size: 17px;
    background: #525252; 
    color: white;
    padding: 8px;
    
}

.items-menu a{
    display: block;
    padding: 8px;
    font-weight: 300;
    font-size: 16px;
    text-decoration: none;
    color: white;
    border-bottom: 2px solid #525252;  
    
}

#myTabContent{
    z-index: 99999;
    width: 100%;
}

nav li.nav-item {
    margin: 10px 30px;
}

a.icons {
    padding: 0!important;
    max-width: 100%;
}

span.navbar-text{
    padding: 0!important;
}

li.text-icon{
    max-width: 75px;
}

.dropdown-item:hover{
    background:#ccc!important;
}

button{
    border: 0!important;
}

button.navbar-toggler{
    padding: 0 !important;
}

.homeLogout a{
    padding: 0!important;
    margin-left: 30px;    
}

.home{
    text-align: center;
}


/*Conteúdo principal do painel*/

.w100{
    padding: 5px 10px; 
    width: 100%;
}

.w70{
    padding: 5px 10px; 
    width: 67%;
}

.w20{
    width: 19%;
    padding: 5px 10px; 
}

.w25{
    width: 24%;
    padding: 5px 10px; 
}

.w30{
    width: 33%;
    padding: 5px 10px; 

}

.w40{
    width: 40%;
    padding: 5px 10px;
}

.w45{
    width: 44%;
    padding: 5px 10px;
}

.w50{
    width: 49%; 
    padding: 5px 10px;   
}

.left{
    float: left;
}

.right{
    float: right;
}

.content{
    top: 108px;
    width: 100%;    
    position: relative;
    border: 10px solid #ccc;
}

.box-content{   
    background: white;
    padding: 30px;
    min-height: 640px;
}

.box-content a{
    color: black;
}

.box-content h1{
    font-weight: 700;
    font-size: 23px;
    margin-bottom: 20px;
    color: #343A40;
}

.box-content h2{
    font-weight: 300;
    font-size: 23px;
}

.box-content h3{
    text-align: center;
    margin-bottom: 40px;
}

.sucesso{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;    
    z-index: 99999;
    padding: 15px 2%; 
    text-align: center;  
    color: #008000;
    font-weight: bold;
    font-size: 14px;
    background: #dff2bf;
}



/*Tabelas*/

.wraper-table{
    overflow-x: auto;
}

table{
    font-weight: 300;
    min-width: 900px;
    margin: 20px 0;
    width: 100%;
    border-collapse: collapse; /*retira o espaçamento padrão*/
}

table.romaneio tr td input[type=number]{
    width: 90%;
}



table tr:nth-of-type(1){
    background: #04A65A;
    color: #fff;
}

table tr{
    color:#555;
    border-bottom: 1px solid #ccc;
}

table td{
    padding: 8px;
    font-size: 13px;
}

table a.btn{    
    text-decoration: none;
    padding: 4px 6px;
    color: white;    
    font-size: 13px;
}

.divisao{
    margin: 40px 0 40px 0;
    border-top: 2px dotted #333;
}

a.btn{    
    text-decoration: none;
    padding: 4px 6px;
    color: white;    
    font-size: 13px;

}

input.btn{background: #f4b03e; color:white;border: 0;padding: 5px 10px;text-align: center;cursor: pointer;}
a.btn.edit{background: #f4b03e;}
a.btn.delete{background: #E05C4E;}
a.btn.order{background: #04A65A;}

/*Paginação*/

.paginacao{
    text-align: center;
    margin: 20px 0;

}

.paginacao a{
    font-size: 14px;
    margin: 0 8px;
    display: inline-block;
    padding: 3px 4px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #666;
}

.paginacao a.page-selected{background: rgb(220,220,220);}


/*Box Metricas*/

.box-metricas{
    margin-top: 16px;
    padding: 0 15px;
}

.box-metrica-single{
    float: left;
    position: relative;
    width: 33.3%;
    background: #226694;
    border: 5px solid white;
}

.box-metricas .box-metrica-single:nth-of-type(2){
    background: #04a65a;
}

.box-metricas .box-metrica-single:nth-of-type(3){
    background: #e05c4e;
}

.box-metricas .box-metrica-single:nth-of-type(4){
    background: #f4b03e;
}

.box-metrica-wraper{
    padding: 10px 20px;
    text-align: left;
    color: white;
}

.box-metrica-wraper h2{
    font-size: 28px;
}

.box-metrica-wraper p{
    padding: 10px 0;
    font-size: 26px;
}

/*Tabela responsiva*/

.table-responsive{    
    max-width: 1280px;
    margin:20px auto;
}
.table-responsive .row:nth-of-type(1){
    color: white;
    font-weight: bold;    
    border-bottom: 1px solid #ccc;
    background-color: #309cc7;
    
    
}


.table-responsive .row{    
    color: #777;    
    padding: 8px 10px;
}
.col{
    float: left;
    width: 50%;
}

.box-content form{
    margin: 30px 0;
}

.box-content form label{
    font-size: 17px;
    font-weight: 300;
    color: black;
    display: block;
}

.box-content .form-group{
    margin: 15px 0;
}

.box-content form input[type=text],
.box-content form input[type=password],
.box-content form input[type=number],
.box-content form input[type=date],
.box-content form input[type=time]{
    margin-top: 8px;
    font-size: 16px;
    font-weight: normal;
    color: black;
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    padding-left: 8px;
}

.box-content form textarea{
    margin-top: 8px;
    font-size: 16px;
    font-weight: normal;
    color: black;
    width: 100%;
    height: 150px;
    border: 1px solid #ccc;
    padding: 8px;
    resize: vertical;

}

.box-content form select{
    margin-top: 8px;
    font-size: 16px;
    font-weight: normal;
    color: black;
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    padding-left: 8px;

}

.box-content form input[type=file]{
    margin-top: 8px;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc
}

.box-content form input[type=submit]{
    width: auto;
    height: 40px;
    padding: 3px 8px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 16px;
    background: #00bfa5;
    color: white;
    border: 0;
}

form.payment {
    margin: 0;
}

/*Box de Alerta*/

.box-alert{
    width: 100%;
    padding: 8px 0;
    text-align: center;
    margin-bottom: 8px;
}

.box-alert a{
    color: #fff;
    font-weight: bold;
}
.sucesso{
    background: #00e676;
    color: white;
}

.erro{    
    background: #f75353;
    color: white; 
}

.atencao{
    background: #F4B03E;
    color: #fff;
}

.menu-active{
    background: #441c1cf2;
}

.menu-active::before{
    content: '>> ';
}

.form-group-login label{
    font-size: 13px;
    padding-left: 6px;
    font-weight: 300;
    color: black;
}

form .form-group-login:nth-of-type(2){
    position: relative;
    top: 10px;
}

.boxes{
    display: flex;
    flex-wrap: wrap;
}

.box-single-wraper{   
    width: 33.3%;
    padding: 20px;
}

.box-single{
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;    
    overflow-x: auto;
}

.box-imgs img{
	width: 100%;
}

.box-imgs img.img-square{
	width: 200px;
	height: 200px;
	display: block;
	margin:8px auto;
}

.box-imgs{
	text-align: center;
}

.box-imgs h1{
	color: #ccc;
	font-size: 70px;
	margin:10px 0;
}

.topo-box{
	text-align: center;
	color: #ccc;
	padding:8px 0;
	border-bottom: 1px solid #ccc;
}

.topo-box img{
	display: block;
	max-width: 150px;
	margin:0 auto;
}

.topo-box h2{
	font-size: 36px;
}

.body-box{
	padding:10px;
}

.body-box p{
	color: #646464;
	font-size: 15px;
	margin-bottom: 8px;
}

.group-btn{margin-top: 15px;}

.group-btn a{
    display: inline-block;
    text-decoration: none;
    color: white;
    padding: 3px 8px;
}

.busca{
    margin: 10px 0;
    width: 100%;
    padding: 8px 10px;
    
}

.busca form{
    margin: 0;
}

.busca h4{
    font-weight: lighter;
    font-size: 22px;
    color: #646464;
}

.busca-result{
    color: #646464;    
    border-top: 3px solid #ccc;
}

.busca-result p{
    font-size: 16px;
}
.gerar-pdf{
    display: block;
    margin: 8px 0 ;

}

.gerar-pdf a{        
    color: white!important;
    padding: 3px 8px;
    background: #f75353;
    text-decoration: none;
}

.row1{
    float: left;
    width: 30%;
    padding: 8px 10px;
}

.row1 img{
    width: 100%;
}

.row2{
    float: left;
    width: 70%;
    padding: 8px 10px;
}

.row2 p{
    padding: 8px 0;
    color: #646464;
    border-bottom: 1px solid #ccc;
}

/*Chat Online do painel*/

.box-chat-online{
    margin: 20px 0;
    height: 300px;
    overflow-y: scroll;
    padding: 10px 10px;
}

.mensagem-chat{
    padding: 8px 0;
    border-bottom: 1px dotted rgb(210,210,210);
}

.mensagem-chat span{
    background: #309CC7;
    padding: 0 4px;
    border-radius: 10px;
}

.mensagem-chat p{
    font-size: 15px;
    color: #646464;
}

/*Calendário*/

table.calendario-table td{
    border: 1px solid #ccc;
    text-align: center;
    cursor: pointer;
}

td.day-selected{
    background: rgb(200,200,200);
}

.box-tarefas-single{
    background:#F4B03E;
    float:left;
    width: 33.3%;
    border: 4px solid white;
    color: white;    
}

.box-tarefas-single h2{
    font-size: 20px;    
    padding: 0 8px;
}
/* 
.box-content a{
    float:right;
    padding: 0 20px;
} */

a.posterior {
   

}

a.anterior {
   
}

@media screen and (max-width:1024px){
    .box-single-wraper{
        width: 100%;
        min-height: 0;
    }
    .box-metrica-single{        
        width: 100%;
    }
}

@media screen and (max-width:768px){
    .row1,.row2{
        width: 100%;
    }
   

    .content{
        width: 100%;
        left: 0;
    }

    header{
        left: 0;
        width: 100%;
    }

    

    ul li{
        display: none;
    }

    ul li.active{
        display: block;
    }



    .menu{
        display: none;        
    }

    .content{
        width: 100%;
        left: 0;
    }

    header{
        left: 0;
        width: 100%;
    }
}

@media screen and (max-width: 500px){
    .box-imgs,
    .box-single{
        width: 100%!important;
    }
    .w50{
        width: 100%;
    }
    .box-single-metrica{
        width: 100%;
        padding-top: 40%;
    }

}


@media screen and (max-width:400px){
    .box-content{
        padding: 8px 2%;
    }
    .menu-wraper{
        width: 200px; 
    }       
}

@media screen and (max-width:380px){
    .items-menu a{
        font-size: 15px;
    }
}


nav i{
    font-size: 35px!important;
}