/* CSS Document */

/****************************************************/
/* Tags                                             */
/****************************************************/  
html, body{
 font-family: Arial, Tahoma, Verdana, Sans;
 background-color: #f1f1f1;
 /*background-image: url(../../imagens-site/fundo2.png);*/
 background-position: top left;
 background-repeat: repeat;
 font-size: small;
 text-align: left;
 color: #363636;
 padding: 0;
 margin: 0;
 overflow: hidden;
}  

body *{
 position: relative;
}

a:hover{
 color: #999;
}


/* Remove o redimensionamento de textarea no safari e FF */
::-webkit-input-placeholder { color:#000; }
:-moz-placeholder { color:#000; }

/****************************************************/
/* IDs estrutura                                    */
/****************************************************/  
 #tudo{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #fff;
 padding: 0;
 margin: 0;
 overflow: hidden;
}

#topo{
 width: 100%;
 padding: 0;
 background-color: #0099ff;
 color: #fff;
 float: left; 
}

#topo h1{
 float: left;
 font-size: small;
 margin: 0;
 padding: 3px 12px;
 border-right: 1px solid #fff;
 width: auto;
}

#topo nav{
 width: auto;
 float: left;
}

#topo nav ul{
 width: auto;
 float: left;
}

#topo nav ul li{
 display: block;
 float: left;
 font-size: small;
 margin: 0;
 padding: 3px 12px;
 border-right: 1px solid #fff;
}

#topo nav ul li a{
 color: #fff;
}
  
#topo nav ul li a:hover{
 text-decoration: underline;  
}

#topo nav ul li:hover{
 background-color: #22a7ff;
}

#topo nav ul li:hover ul{
 display: block;
}

#topo nav ul li ul{
 width: auto;
 float: left;
 display: none;
 position: absolute;
 margin-top: 3px;
 margin-left: -12px;
 background-color: #22a7ff;
 z-index: 1;
 padding-bottom: 3px;
}

#topo nav ul li ul li{
 width: auto;
 border: none;
 white-space: nowrap;
 padding: 6px 12px; 
 clear: both;
}

#topo nav ul li ul .separador{
 width: 94%;
 padding: 0;
 margin: 0 3%;

 border-bottom: 1px solid #c4e8ff;
}

#conteudo{
 width: 99%;
 height: 90%;
 float: left;
 padding: 0.5%;
 margin: 0;
 overflow: auto;
}

#conteudo h1{
 color: #363636;
 border-bottom: 1px solid #363636;
 text-align: inherit;
 padding: 0;
 margin: 12px 0;
}

#conteudo h2{
 color: #363636;
 font-size: small;
 text-align: inherit;
 margin: 3px 0;
 border-bottom: 1px solid #363636;
 width: 100%;
}

#conteudo h3{
 width: 100%;
 float: left;
 color: #363636;
 border-bottom: 1px solid #363636;
 font-size: small;
 font-weight: normal;
 text-align: inherit;
}

#print{
 display: none;
}


/****************************************************/
/* IDs específicos                                  */
/****************************************************/   
#cadastro{
 width: 100%;
}

#cadastro fieldset{
 width: 30%;
 position: relative;
 border: none;
 margin: 0 3% 0 0;
 padding: 0;
 text-align: right;
 float: left;
}

#cadastro fieldset h2{
 text-align: left;
}

#cadastro-contas{
 width: 96% !important;
 margin-top: 24px !important;
}   

#cadastro-contas label{
 width: auto !important;
 float: right;
 margin-left: 12px;
}

#cadastro-contas .label-in{
 margin-left: 12px;
 white-space: nowrap; 
}

#cheque-margem label{
 display: block;
 width: 14em;
 text-align: right;
 clear: both;
 padding: 0;
 margin: 0.5em 0;
}

#compra-extra{
 width: calc(27% - 2px);
 height: 90%;
 background-color: #f4f4f4;
 margin-left: 1%;
 margin-top: -12px;
 padding: 1%;
 border: 1px solid #363636;
 overflow-y: auto;
 text-align: right;
}

#compra-form{

}

#compra-itens{
 width: 70%;
 height: 90%;
 overflow: auto;
}

#configuracoes-banco label{
 width: auto;
 margin-right: 12px;
}

#despesa-dia{
 margin-top: 36px;
}

#despesa-dia article{
 float: left;
 margin: 0 1px 35px 0;
 display: block;
 width: 12em;
 color: #000;
}

#despesa-dia header{
 display: block;
 float: left;
 width: 94%;
 padding: 0 0 0 6%; 
 color: #fff;
 background-color: #00406a;
 margin: 0 0 1px 0; 
 line-height: 2em;
}
                       
#despesa-dia header span{
 float: right;
 display: block;
 background-color: #005791;
 width: 2em;
 text-align: center;
 padding: 0;
 margin: 0;
}

#despesa-dia .total{
 display: block;
 float: left;
 width: 88%;
 padding: 0.5em 6%;
 margin: 0 0 1px 0;
}

#despesa-dia-periodo{
 margin-top: 36px !important;
}

#despesa-dia-conta{
 background-color: rgb(255, 255, 127);
}

#despesa-dia-geral{
 background-color: rgb(127, 127, 255);
}

#despesa-dia-paga{
 background-color: rgb(127, 255, 127);
}

#despesa-dia-pagar{
 background-color: rgb(255, 127, 127);
}

#despesa-dia-total{
 width: 28em;
}

#despesa-dia-total li{
 padding: 0.5em;
 margin-bottom: 1px;
}

#despesa-extra{
 width: calc(27% - 2px);
 height: 90%;
 background-color: #f4f4f4;
 margin-left: 1%;
 margin-top: -12px;
 padding: 1%;
 border-left: 1px solid #363636;
 border-right: 1px solid #363636;
 overflow-y: auto;
}

#despesa-filtra{
 text-align: right;
}
 
#despesa-lista{
 width: 70%;
 height: 90%;
 overflow: auto;
}

#deposito-form{
 text-align: left;
 padding: 0;
 margin: 12px 0 0 0;
 float: left;
 width: auto;
}

#extrato-form{
 text-align: right;
 padding: 0;
 margin: 12px 0 0 0;
 float: right;
 width: auto;
}

#login{
 width: 88%;
 float: left;
 border-top: 1px solid #999;
 border-bottom: 1px solid #999;
 background-color: #fff;
 margin: 0;
 padding: 48px 6%;
}

#login h1{
 width: 100%;
 float: inherit;
 text-align: inherit;
 padding: 0;
 margin: 0 0 12px 0;
}

#login nav{
 width: 100%;
 margin: 32px 0 0 0; 
}

#login nav ul{
 width: 100%;
 margin: 4px 0 8px 0;
 float: left;
}

#login nav ul li{
 display: inline;   
 padding: 0;
 margin: 0;
 font-size: 10px;
}   

#login nav ul li a{
 color: #808080;
 padding: 1px 8px;
}     

#pagamento{
 width: 42em;
 float: left;
}

#pagamento fieldset{
 width: 21em;
 float: left;
} 

#pagamento-formas .label-in{
 width: 100% !important;
 margin: 2px 0;
 padding: 0;
 white-space: nowrap; 
 float: left;
}

#pagamento label, #pagamento .label{
 display: block;
 float: left;
 width: 21em;
 text-align: right;
}

#pagamento select{
 width: 12em;
 border: 1px solid #363636;
}

#pagamento-mes{
 width: auto;
 float: right;
 text-align: right;
 padding: 0;
 margin: 0;
}

#pagamento-totais{
 margin: 24px 0;
 padding: 0;
 border-collapse: collapse;
 width: 30em;
}

#pagamento-totais td{
 border-bottom: 1px solid #363636;
 padding: 3px;
}

#pagamento-total{
 font-size: xx-large;
 font-weight: bold
}

#pagamentos-extra{
display: none;
 width: 27%;
 height: 90%;
 background-color: #f4f4f4;
 margin-left: 1%;
 margin-top: -12px;
 padding: 1%;
 border-left: 1px solid #363636;
 border-right: 1px solid #363636;
 overflow-y: auto;
}

#pagamentos-filtra{
 text-align: right;
}

#pagamentos-form{
 text-align: right;
}
 
#pagamentos-lista{
 width: 100%;
 height: calc(100% - 74px);
 overflow: auto;
 margin: 0;
}

#pagamentos-navega-mes{
 margin-top: 3px;
 text-align: right;
 float: right;
 width: auto;
}

#pagamentos-pesquisa{
 width: auto;
}

#pagamentos-pesquisa-cheque{
 width: auto;
 margin-left: 3em;
}

#painel{  
 position: absolute;
 bottom: 0;
 left: 0;
 width: 99%;
 padding: 0 0.5%;
 color: #fff;
 background-color: #005a97;
 margin: 0;
}

#painel-bt{  
 display: block;
 float: left;
 padding: 6px 12px;
 background-color: #0099ff;
 margin: 0;
 color: #fff;
 font-weight: bold;
}

#painel.painel-aberto #painel-in{
 display: block !important;
}

#painel-in{
 width: 100%;
 padding: 12px 0;
 float: left;
 display: none;
 color: #fff;
}  

#painel-in div{
 width: 22%;
 height: 28em;
 margin: 0 2% 0 0;
 padding: 0 1% 0 0;
 overflow: auto;
 text-align: right;
}

#painel-in h2, #painel-in h3{
 border-color: #fff !important;
 color: #fff !important;
 text-align: left !important;
}

#painel h1{
 padding: 0;
 font-size: small;
 border-bottom: 1px solid #fff;
}

#painel hr{
 border-color: #fff !important;
}

#panorama{
 margin-top: 24px;
}

#recebimentos-total{
 font-size: large;
 margin-bottom: 3em;
}

#relatorio-form{
 text-align: right;
 padding: 0;
 margin: 0;
 float: right;
 width: auto;
}

#t-modo{
 display: none;
}

#t-modo-pagamento{

}

/****************************************************/
/* Classes específicas                              */
/****************************************************/   
.cheque{
 padding: 0;
 margin: 12px 0;
 float: left;
}

.cheque-hr{
 padding: 0;
 margin: 4px 0;
}
 
.extrato{
 margin: 12px 0;
 padding: 0;
 border-collapse: collapse;
 width: 100%;
}

.extrato td{
 padding: 0.5em 1em;
 border: none;
 text-align: center;
}

.extrato tr:nth-child(odd){
 background-color: #fbfeff;
}

.extrato tr:nth-child(even){
 background-color: #ecf8ff;
}   

.extrato .valor{
 text-align: right;
}

.extrato-credito{
 color: #080;
}

.extrato-debito{
 color: #f00;
}

.extrato-negativo{
 color: #f00;
}

.extrato-positivo{
 color: #080;
}

.extrato-total{
 width: 98%;
 margin: 0 1% 12px 1%;
 text-align: right;
}

.grafico{
 margin: 24px 0;
}

.grafico-img{
 float: left;
 margin: 0 24px;
}

.grafico .legenda{
 float: left;
 margin: 10px 24px 0 24px;
 min-width: 30em;
}

.grafico .legenda td{
 padding: 3px 6px;
 font-size: 12px; 
 color: #fff;
}

.grafico .legenda .cor{
 width: 12px;
 height: 12px;
 padding: 0;
}    

.h1-1{
 display: none;
}

.legenda{
 padding: 0;
 margin: -8px 0 36px 0;
 color: #666;
}

.paga-check{
 z-index: 8;
}

.plan-pagamento{
 table-layout: fixed;
 width: auto;
 border-collapse: collapse;
 margin: -1px;
 float: left;
 border-bottom: 1px solid #363636;
}

.plan-pagamento td{
 padding: 0.2em 0.5em;
 border: 1px solid #363636;
 text-align: center;
}

.plan-pagamento th{
 padding: 0.2em 0.5em;
 border: 1px solid #363636;
 text-align: center;
}

.plan-pagamento tr:hover{
 background-color: #005a97 !important;
 color: #fff !important;
}

.plan-pagamento .borda-negra{
 border-top: 1px solid #000;
}

.plan-pagamento .titulo{

}

.plan-pagamento .titulo-d{
 background-color: #00406a;
 color: #FFF;
 white-space: nowrap;
}

.plan-pagamento .titulo-d a{
 color: #fff;
}

.plan-pagamento .titulo-d:hover{
 background-color: #0099ff;
}

.plan-pagamento .titulo-n{
 background-color: #00406a;
 color: #FFF;
 white-space: nowrap;
}

.plan-pagamento .titulo-n a{
 color: #fff;
}

.plan-pagamento .titulo-n:hover{
 background-color: #00406a;
}

.plan-pagamento .titulo-s{
 background-color: #005a97;
 color: #FFF;
 white-space: nowrap;
}

.plan-pagamento .titulo-s a{
 color: #FFF;
}

.plan-pagamento .titulo-s:hover{
 background-color: #0099ff;
}

.plan-pagamento .td-0{
 width: 7em;   
}

.plan-pagamento .td-1{
 width: 7em; 
}

.plan-pagamento .td-2{
 width: 10em; 
}

.plan-pagamento .td-3{
 width: 10em; 
}
      
.plan-pagamento .td-4{
 width: 25em;    
}
       
.plan-pagamento .td-5{
 width: 12em;
}

.plan-pagamento .td-6{
 width: 14em;
}

.plan-pagamento .td-7{
 width: 12em;
}

.plan-pagamento .td-8{
 width: 14em;
}

.plan-pagamento .td-9{
 width: 2em;
}

.plan-pagamento .td-10{
 width: 10em;
}

.plan-pagamento .td-11{
 width: 5em;
}

.plan-pagamento .td-operacoes{
 width: 6em;
}

.plan-pagamento .td-total{
 width: 6em;
}

.plan-pagamento-cheque{
 display: none;
}

.plan-pagamento-extra{
 table-layout: fixed;
 width: auto;
 border-collapse: collapse;
 margin: -1px -1px -1px 0;
 float: left;
 border-bottom: 1px solid #363636;
}

.plan-pagamento-extra td{
 padding: 0.2em 0.5em;
 border: 1px solid #363636;
 text-align: center;
}

.plan-pagamento-extra tbody td{
 line-height: 19px;
}

.plan-pagamento-extra thead{
 border-bottom: 3px solid #000;
}

.plan-pagamento-extra th{
 padding: 0.2em 0.5em;
 border: 1px solid #363636;
 text-align: center;
}

.plan-pagamento-extra tr:hover{
 background-color: #005a97 !important;
 color: #fff !important;
}

.plan-pagamento-extra .borda-negra{
 border-top: 1px solid #000;
}

.plan-pagamento-extra .titulo{

}

.plan-pagamento-extra .titulo-d{
 background-color: #00406a;
 color: #FFF;
 white-space: nowrap;
}

.plan-pagamento-extra .titulo-n{
 background-color: #00406a;
 color: #FFF;
 white-space: nowrap;
}

.plan-pagamento-extra-1{
 width: 20em !important;   
 text-align: left !important;
}

.plan-pagamento-extra-2{
 width: 10em !important;   
 text-align: right !important;
}

.plan-pagamento-extra-3{
 width: 8em !important; 
 text-align: right !important;   
}

.plan-pagamento-extra-4{
 width: 16em !important;   
 text-align: left !important;
}

.plan-pagamento-extra-5{
 display: none;
}

.plan-pagamento-extra-6{
 display: none;
}


/****************************************************/
/* Classes genéricas                                */
/****************************************************/
.bkg-acerto{
 color: #090;
 font-weight: bold;
 background-color: #ecf8ff;
 padding: 0.5em;
 margin: 2em 0;
 border: 1px solid #090;
}

.destaque-bkg{
 background-color: #ff0;
 padding: 0.2em 0.5em;
 margin: -0.2em -0.5em;
}

.link{
 text-decoration: underline;
}

.lista{
 width: 100%;
 float: left; 
 border: none;
 border-collapse: collapse;
 padding: 0;
 margin: 8px 0;
}

.lista input{
 border: none;
}

.lista td{
 padding: 8px; 
 border: 1px solid #eee;
 vertical-align: middle;
 color: #363636;
}

.lista tr:hover{
 background-color: #f8f8f8 !important;
}

.lista .borda-negra{
 border-top: 3px solid #ccc;
}

.lista .icone{
 margin: 0 2px;
}

.lista .operacoes{
 text-align: center;
}

.lista .titulo-d{
 background-color: #00406a;
 color: #FFF;
 white-space: nowrap;
}

.lista .titulo-d a{
 color: #fff;
}

.lista .titulo-d:hover{
 background-color: #0099ff;
}

.lista .titulo-n{
 background-color: #00406a;
 color: #FFF;
 white-space: nowrap;
}

.lista .titulo-n a{
 color: #fff;
}

.lista .titulo-n:hover{
 background-color: #00406a;
}

.lista .titulo-s{
 background-color: #005a97;
 color: #FFF;
 white-space: nowrap;
}

.lista .titulo-s a{
 color: #FFF;
}

.lista .titulo-s:hover{
 background-color: #0099ff;
}

.msg-acerto{
 color: #090;
 font-weight: bold;
}

.msgerro{
 color: #d00;
 font-weight: bold;
}

.modo-piece{
 width: 221em;
 border: 1px solid #000;
 padding: 0;
 margin: -1px 0 0 0;
}

.modo-piece header{
 background-color: #000;
 padding: 0;
}

.modo-piece header h1{
 display: none;
}

.modo-piece table thead{
 display: none;
}

.modo-piece .plan-pagamento-extra{
 border-top: 3px solid #363636;
}   

.planilha{
 margin: -1px 0 0 0;
 padding: 0;
 border-collapse: collapse;
 min-width: 100%;
 border-bottom: 1px solid #000;
}

.planilha td{
 padding: 0.2em 0.5em;
 border: 1px solid #363636;
 text-align: center;
}

.planilha th{
 padding: 0.2em 0.5em;
 border: 1px solid #363636;
 text-align: center;
}

.planilha tr:hover{
 background-color: #005a97 !important;
 color: #fff !important;
}

.planilha .borda-negra{
 border-top: 1px solid #000;
}

.planilha .titulo{

}

.planilha .titulo-d{
 background-color: #00406a;
 color: #FFF;
 white-space: nowrap;
}

.planilha .titulo-d a{
 color: #fff;
}

.planilha .titulo-d:hover{
 background-color: #0099ff;
}

.planilha .titulo-n{
 background-color: #00406a;
 color: #FFF;
 white-space: nowrap;
}

.planilha .titulo-n a{
 color: #fff;
}

.planilha .titulo-n:hover{
 background-color: #00406a;
}

.planilha .titulo-s{
 background-color: #005a97;
 color: #FFF;
 white-space: nowrap;
}

.planilha .titulo-s a{
 color: #FFF;
}

.planilha .titulo-s:hover{
 background-color: #0099ff;
}

.planilha2 tr:hover{
 background-color: #0099ff !important;
 color: #fff !important;
}  

.table-piece{
 width: 200em;
 border: 1px solid #000;
 padding: 0;
 margin: -1px 0 0 0;
}

.table-piece header{
 background-color: #000;
 padding: 0;
}

.table-piece header h1{
 padding: 0.2em 0.5em !important;
 margin: 0 !important;
 border: none !important;
 color: #fff !important;
}