/* RESET */
* {
   font-family: Arial, Helvetica, sans-serif;
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   font-size: 12pt;
}

h1{
   font-size: 1.3rem;
   color:#35363a;
   margin-bottom: 20px;
}

p{
   color: grey;
}

label{
   color: grey;
}

/*a*/
a{
   cursor: pointer;
   color: #0581FD;
}

a:link,
a:visited {
   text-decoration: none;
   color: #0581FD;
}

a:hover,
a:active {
   text-decoration: underline;
}

a[class=aVoltar]{
   color: grey;
   font-size: 22pt;
   font-weight: bold;
   margin-right: 3px;
}

a[class=aVoltar]:hover,
a[class=aVoltar]:active {
   text-decoration: none;
}
/*Aim a*/
/* FIM REST */


/* BODY */
body {
   display: grid;
   grid-template-areas:
     "header"
     "nav"
     "section"
     "footer";
   
   grid-template-rows: auto auto 1fr auto;
   grid-template-columns: 1fr;

   /* background-color: #F3F5F7; */
 }
 /* FIM BODY */
 
 
 /* HEADER */
 header {
    grid-area: header;
    /* demais config em menu.css */
 }
 /* FIM HEADER*/


 /* NAV */
 #navPrincipal {
   grid-area: nav;
   /* demais config em menu.css */
}
/* FIM NAV*/


/* SECTION */
section {
   grid-area: section;

   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   padding: 20px;
}
/* FIM SECTION*/


/* HEADER */
footer {
   grid-area: footer;
   /* demais config em footer.css */
}
/* FIM HEADER*/


/*ENTRADAS*/
input,
select,
button,
textarea,
output{
   width: fit-content;
   height: 40px;
   border: 1px solid lightgray;
   border-radius: 2px;
   background: white;
   padding: 0px 3px;
}

textarea{
   height: 500px;
}

input[type=image]{
   cursor: pointer;
   width: fit-content;
   border: none;
   border: 1px solid transparent;
   background-color: transparent;
}

   input[type=image]:hover{
      border: 1px solid lightgrey;
   }

input[type=submit],
input[type=button],
button{
   cursor: pointer;
   color: white;
   border: none;
   font-weight: bold;
   padding: 0px 10px;
   /* overflow: hidden; */
   white-space: nowrap;
}

   input[type=submit]:hover,
   input[type=button]:hover,
   button:hover{
      opacity: 0.5;
   }

   input[class=cadastrar],
   button[class=cadastrar]{
      background-color: #279B61;
   }

   input[class=atualizar],
   button[class=atualizar]{
      background-color: #0581FD;
   }

   input[class=editar],
   button[class=editar]{
      background-color: #008080;
   }

   input[class=excluir],
   button[class=excluir]{
      background-color: #FF004B;
   }

   input[class=cancelar],
   button[class=cancelar]{
      background-color: #FD7E14;
   }
   
   input[class=apenasLeitura]{
      background-color: #f2f2f2;
   }

   input[class=padrao],
   button[class=padrao]{
      color: grey;
      background-color: #ececec;
      border: 1px solid lightgrey;
   }

input[class=valor]{
   text-align: right;
}

output{
   display: flex;
   align-items: center
}

output[class=valor]{
   justify-content: right;
}

input[class="botaoArquivo"]{
   color:grey;
   font-weight: normal;
   text-align: left;
   border: 1px solid lightgrey;
}
/*FIM ENTRADAS*/


/* FORM */
form{
   display: flex;
   width: 100%;
   /*border-radius: 3px;*/
}

.formLinha{
   flex-direction: row;
   justify-content: center;
   gap: 3px;
}

   .formLinha input[type="text"],
   .formLinha input[type="search"]{
      width: 100%;
      max-width: 400px;
   }

.formColuna{
   flex-direction: column; 
   max-width: 500px;
   background-color: white;
   border: 1px solid lightgrey;
   margin: 20px 0px;
   padding: 50px;
}

   .formColuna > *{
      width: 100%;
      max-width: 400px;
   }

   .formColuna label{
      margin-top: 15px;
      text-indent: 5px
   }
/* FIM FORM */


/*DIVS*/
/*divOverflow*/
.divOverflow{
   width: 100%;
}
/*Fim divOverflow*/

/*divLinha*/
.divLinha{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
}

.divLinhaDireita{
   display: flex;
   flex-direction: row;
   justify-content: right;
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
}
/*Fim divLinha*/

/*divColuna*/
.divColuna{
   display: flex;
   flex-direction: column;
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
}
/*Fim divColuna*/
/*FIM DIVS*/

/*TABELA*/
.tableCartao{
   border-collapse: separate;
   border-spacing: 20px 4px;
}

.tableCartao > *{
   color: #6C757D;
}

.tableCartao > th{
   text-align: right;
}

.tableCartao > td{
   text-align: left;
}
/*FIM TABELA*/