/*
Empresa: Vitae Tecnologia Ltda.
Autor: Francisco Cláudio (claudiofbs@gmail.com)
Proibido a cópia, publicação e distribuição sem expressa autorização da empresa.
Todos os direitos reservados.
*/
/* 
    Created on : 13/02/2019, 20:45:45
    Author     : Cláudio
*/
:root{
    --altura-tela: 100vh;
    --largura-tela: 100vw;
}
*{
    padding: 0px;
    margin: 0px;
}
body{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #eee;
}
#container{
    position: absolute;
    width: 100vw;
    height: 100vh;
}
#topo{

    position: relative;
    width: 100%;
    margin: auto;
    /*border-bottom: 1px solid #000000;*/
}
#janela{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 90%;
    height: calc(100% - 53px);
    margin: auto;
    /*border: 2px gold double;*/
    background-color: #eee;
    padding:7px;
    overflow-y: auto;

}
#novaEmpresa{
    color: blue;
    font-style: italic;
    font-size: 8pt;
    display: block;
    width: 100%;
    text-align: center;
    height: 50px;
}
#novaEmpresa:hover{
    cursor: pointer;
    /*font-size: 10pt;*/
    font-weight: bold;
}
.linha{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.larg1{
    flex-grow: 1;
}
.larg2{
    flex-grow: 2;
}
.larg3{
    flex-grow: 3;
}
.larg4{
    flex-grow: 4;
}
.larg5{
    flex-grow: 5;
}
.coluna{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#perfil{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 5px;
    right: 5px;

    /* border: 2px #ffffff solid;*/
    justify-content: center;
    z-index: 10;


}
#perfil:hover{
    /*width: 80px;*/
    /*height: 90px*/
    background-color: #ffffff;

}
#perfil > label{
    width: 40px;
    height: 40px;



    margin: auto;
}
#perfil > label img{
    position: relative;
    width: 100%;
    height: 100%;
}
#perfil > div{
    /*position: absolute;
    top: 42px;
    right: 5px;*/
    display: none;
    width: 150px;
    flex-direction: column;
    /*background-color: #ffffff;*/
    font-size: 10pt;
    color: #000000;
    margin: auto;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding-bottom: 10px;

}

sair > a > img{
    width: 40px;
    height: 40px;
}
login, senha, email{
    cursor: pointer;
    color: #0000ff;
}
#divCategoria{
    display: none;
    position: absolute;
    top: 30%;
    left: 30%;
    /*max-width: 50%;*/
    width: 500px;
    padding: 20px;
    background-color: #f0f0f0;
    z-index: 11;
}
#divCategoria>span{
    display: block;
    background-color: #0000ff;
    color: #ffffff;
    width: 100%;
    height: 30px;
    font-size: 12pt;
    text-align: center;
    vertical-align: central;
}

#mensagem{
    display: none;
}

#aviso{
    position: absolute;
    top: 10%;
    left: 30%;

    display: none;
    min-width: 100px;
    max-width: 400px;
    /*margin: auto;*/
    background-color: greenyellow;
    padding: 10px;
    text-align: center;
    color: red;
    border-radius: 15px;
    z-index: 21;



}
.container2{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0px;
    margin: 0px;
}
.div-50{
    position: relative;
    width: 45%;
    min-width: 300px;
    min-height: 450px;
    max-height: 500px;
    margin: 0px;
    padding: 20px;
    overflow-y: auto;
    border-color: #a0a0a0;
    border-spacing: 10px;
    border-style: outset;
    margin: 2.5%;
    /*box-shadow: #a0a0a0 5px 5px 5px;*/
    border-radius: 5%;
}
.div-50 > table{
    position: relative;
    width: 100%;
    max-height: 80%;
    overflow-y: auto;

}
.div-50 table th{
    border-right: 1px #000000 double;
}
.div-50 table td{
    border: 1px solid #000000;
    /*background-color: red;*/

}



#divLogin, #primeiroLogin{
    position: relative;
    max-width: 400px;
    min-width: 300px;
    float: right;
    background-color: #ffffff;
    padding-top: 2%;
    padding-bottom: 10%;
    padding-left: 5%;
    padding-right: 5%;
    margin: 5%;
    border-radius: 10%;
    border-spacing: 20px;
    border-style: solid;
    border-color: #eeeeee;


}
#primeiroLogin{
    display: none;
}
#divLogin form >  input{
    /*border-radius: 10%;*/
    margin-bottom: 20px;
    padding-top: 5%;
    /*background-color: red;*/
}
#divLogin img, #primeiroLogin img{
    position: relative;
    width: 100%;
    margin-bottom: 5%
}
#divLogin label{
    position: absolute;
    width: 100%;
    background-color: #ffffff;
    color: #808080;
    font-size: 6pt;
    height: 3px;
    z-index: 5;
    padding-left: 10px;
    display: none;
}
#menuTopo{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: #aaaaff;
    font-family: arial;
    font-weight: bold;
}
#menuTopo span{
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    min-width: 100px;
    box-shadow: #808080 2px 2px 0px 0px;
    text-align: center;
    margin: 3px;
    background-color: #eeeeee;
}
#menuTopo > span:hover{
    background-color: #ff5555;
    font-stretch: extra-expanded;
    color: #ffffff;
}
#topo strong{
    position: relative;
    width: 100%;
    display: block;
    background:none;
    text-align: center;
    font-size: 14pt;
    font-variant-caps: titling-caps;

}


/*menu*/
nav{
    position: absolute;
    top: 0px;
    background: rgb(4,149,20);
    background: linear-gradient(360deg, rgba(4,149,20,1) 2%, rgba(6,240,10,1) 43%);
    width: 200px;
    height: 100%;
    left: -350px;
    z-index: 1;
    overflow-y: auto;
}
#imgMenu{
    width: 40px;
}
nav a{
    text-decoration: none;
    color: #000000;
    /*background-color: red;*/
    display: block;
    padding: 5px;
    color: #000;
}
nav a:hover{
    background-color: rgb(176, 224, 230);
    color: #000000;
}
nav > ul{
    position: relative;
    width: 100%;
    list-style: none;
    top: 50px;
    color: #ffff99;

    /*background-color: blue;*/

}
nav > ul > li{


    height: 90px;

    margin:1px;
    color:#000;
    text-align:center;
    line-height:40px;
    font-size:12px;

}

#menuCheck{
    display: none;
}
#menuCheck:checked ~ nav{
    transform: translateX(350px);
}
#divMenu{
    position: absolute;
    top: 0px;
    left:75px;
    z-index: 2;

    margin: 0 auto;
}
#divMenu img{
    width: 50px;
    height: 50px;

}

.quadro{
    /*background-color: #aaffaa;*/
    padding: 50px;
    border-radius: 10%;

}
.controle{
    height: 100%;
    width: 900px;

    margin-left: auto;
    margin-right: auto;
    background-color: #f0f0f0;
    padding: 20px ;
    padding-top: 10px;
    overflow-y: auto;

}

#janelaSuspensa{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(127, 127, 127, 0.5);
}
.janela-interna{
    position: absolute;
    display: flex;
    top: 50px;
    left: 50%;

    transform: translateX(-50%);
    margin: 0 auto;
    flex-direction: column;
    min-width: 400px;
    max-width: 8500px;
    /*max-height: 550px;
    min-height: 400px;*/
    height: calc(var(--altura-tela) - 20%);
    z-index: 20;
    /*overflow-y: auto;*/
    background-color: #ffffff;
    border: 1px #eee double;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
}
#tituloJanelaSuspensa{
    position: relative;
    top: 0;
    width: 100%;
    display: flex;

    /*align-items: flex-end;*/
    justify-content: space-between;
    background-color:#03a55c;
    /*padding-right: 50px;*/
    color: #ffffff;



}
#tituloJanelaSuspensa #fechar{
    position: relative;
    /*display: block;*/
    /*float: right;*/
    width: 30px;
    height: 30px;
    background-color: blue;
    color: #ffffff;
    text-align: center;
    border: 1px #ffffff solid;
    /*padding-right: 50px;*/
    cursor: pointer;

}
#novaJanela{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100% - 51px);
    overflow: auto;
    margin: auto;
    /*background-color: yellow;*/
}
.abas{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 50px;
    /*border: 1px red solid;*/
    font-family: Arial;
    font-size: 14pt;
    color: #000000;
}
.aba-item{
    display: flex;
    flex: 1;
    padding: 0px 10px 0px 10px;
    border-radius: 25px 25px 0px 0px;
    text-align: center;
    align-items: center;
    cursor: pointer;
}
.aba-ativa{
    border: 1px #000000 solid;
    border-bottom: none;
    background-color: #D3D3D3;
    ;
}
.aba-inativa{
    border: 1px #000000 solid;
    background-color: #f0f0f0;
}
.aba-item:hover{
    background-color: #fafafa;
    color: #000000;
}
.base{
    display: none;
    flex-direction: column;
    height: calc(100% - 50px);
    overflow-y: auto;
    border: 1px #000000 solid;
    border-top: none;
    border-radius: 0% 0% 25px 25px;
    background-color: #D3D3D3;
    padding: 25px;
}
.base2{
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px);
    overflow-y: auto;
    border: 1px #000000 solid;
    border-radius: 25px;
    background-color: #D3D3D3;
    padding: 25px;
}
.base2 h3{
    display: block;
    width: 100%;
    text-align: center;
}
[type], pre, select {
    /*[type=text], [type=number], [type=date], [type=email],  [type=password]{*/
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
}
.titulo{
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
}
.titulo strong{
    padding: 10px;

    background:none;
    font-weight: bolder;
    /*text-shadow: 2px 3px #0a0a0a;*/

}
#relDiario{
    display: flex;
    flex-direction: column;
    min-width: 300px;
    max-width: 650px;
    margin: auto;
    padding-top: 70px;
}
#relDiario [type=text]{
    text-align: right;
}
#relDiario #total, #relDiario #lblTotal{
    font-size: 14pt;
    font-weight: bold;
    color: blue;
}
#aguarde{
    position: absolute;
    width: 100vw;
    height: 100vh;
    /*margin: auto;*/
    flex-direction: column;
    align-self: center;
    align-content: center;
    align-items: center;
    alignment-adjust: middle;
    z-index: 100;

}
#aguarde img{
    position: relative;
    width: 200px;
    height: 200px;


}
.texto-d{
    text-align: right;
}
.texto-e{
    text-align: left;
}
.texto-c{
    text-align: center;
}
.inativa{
    display: none;
}
.ativa-flex{
    display: flex;
}
.ativa-block{
    display: block;
}

/*==============================================================================
                       CONFIGURAÇÃO PARA MIDIAS PEQUENAS 
===============================================================================*/
@media only screen and (max-width: 600px) {
    .container2{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .div-50{
        width: 90%;
    }
}
/* FIM DE CONFIGURAÇÃO PARA MIDIAS PEQUENAS */