* { 
  margin: 0;
  padding: 0;
  -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
      box-sizing:border-box;
  font-family: Arial, Helvetica, sans-serif; font-size: 18px
}

.modal {
  position: absolute; width: 100vw; height: 100vh; 
  overflow: hidden; background-color: rgba(25,25,25, 0.4); 
  z-index: 5; top: 0; left: 0; 
}

.disabled { opacity: 0.5; }

.header-page {
	position: fixed; padding-left: 0; padding-right: 0;background-color: #726B51; padding: 5px 10px; }
	.host { text-decoration: none; cursor: pointer;font-size: 9pt; font-style: italic; color: white; transition: linear 0.3s; }
		.host:hover{ color: yellow; }
	.p-host { font-size: 9pt; font-style: italic; color: yellow; margin-top: 5px; margin-left: 10px; }

.main-page { background-color: #c1c1c1; height: 100vh; overflow: auto; padding-top: 2em; }
.titulo { font-size: 15pt; color: white; padding: 5px 10px; background-color: #726B51; }
.titulo-sm { font-size: 12pt; color: white; padding: 2px 8px; background-color: #726B51; }
.span-recover { font-size: 9pt; color: #424242; font-style: italic; margin-top: 5px; cursor: pointer; transition: 0.3s linear; }
	.span-recover:hover{ color: blue; }
label { font-size: 10pt; color: #424242; font-style: italic; padding-left: 3px; padding-bottom: 5px; text-align: left; }
.entrada-md { 
  width: 100%; padding: 5px 8px; margin: 5px 0; display: inline-block; border: 1px solid #ccc; 
  border-radius: 4px; box-sizing: border-box; font-size: 12pt; }
.entrada { 
  width: 100%; padding: 3px 5px; margin: 5px 0; display: inline-block; border: 1px solid #ccc; 
  border-radius: 4px; box-sizing: border-box; font-size: 15px; }

.entrada-sm { 
  width: 100%; padding: 2px 4px; margin: 3px 0; display: inline-block; border: 1px solid #ccc; 
  border-radius: 4px; box-sizing: border-box; font-size: 10pt; }

.btn { padding: 5px 8px; text-align: center; border-radius: 5px; cursor: pointer; font-size: 12pt; margin: 3px; min-width: 40px; }
	.btn-sm { padding: 2px 10px; text-align: center; border-radius: 5px; cursor: pointer; font-size: 9pt; font-style: italic; }
		.btn-azul { background-color: #2196f3; color: white; border: 1px solid #1e88e5; transition: background 0.2s linear 0s; }
		  .btn-azul:hover { background-color: #1565c0; }
    
    .btn-verde { background-color: #4caf50; color: white; border: 1px solid #43a047; transition: background 0.2s linear 0s; }
      .btn-verde:hover { background-color: #00c853; }

    .btn-laranja { background-color: #f57c00; color: white; border: 1px solid #e65100; transition: background 0.2s linear 0s; }
      .btn-laranja:hover { background-color: #ef6c00; }

    .btn-vermelho { background-color: #e53935; color: white; border: 1px solid #e53935; transition: background 0.2s linear 0s; }
      .btn-vermelho:hover { background-color: #c62828; }
    
    .btn-titulo { background-color: #726B51; color: white; border: 1px solid white; transition: background 0.2s linear 0s; }
      .btn-titulo:hover { background-color: #878067;  }


.container{ margin: 0 auto; width: 100%; }
  /*Configuração da tela grande*/
  @media(min-width: 900px){ .container{ max-width: 900px; } }

.container-md{ margin: 0 auto; width: 100%; }
  /*Configuração da tela grande*/
  @media(min-width: 400px){ .container-md{ max-width: 400px; } }

.container-xl{ margin: 0 auto; width: 100%; }
  /*Configuração da tela grande*/
  @media(min-width: 1400px){ .container-xl{ max-width: 1400px; } }

.linha{ margin-left: 0px; margin-right: 1px; }
  .linha:before, .linha:after{ content: ""; display: table; }
  .linha:after{ clear: both; }

.col{ 
  display: inline-block; 
  vertical-align: top; 
  min-height: 1px; 
  padding-left: 5px; 
  padding-right: 5px; 
  width: 100%; 
  margin-right: -4px;
}
  @media(min-width: 780px) {
    .col-2{ width: 50%; }
    .col-3{ width: 33.3333%; }
    .col-4{ width: 25%; }
    .col-8{ width: 8%; }
    .col20{ width: 20%; }
    .col25{ width: 25%; }
    .col30{ width: 30%; }
    .col40{ width: 40%; }
    .col50{ width: 50%; }
    .col60{ width: 60%; }
    .col80{ width: 80%; }
  }
  
table { width: 100%; border: 1px solid #c1c1c1; border-collapse: collapse; }
/*table tbody tr:nth-child(odd) { background-color: #eeeeee; }*/
table th { font-size: 12pt; font-weight: bold; border: 1px solid #c1c1c1; border-collapse: collapse; }
table td{ border: 1px solid #c1c1c1; padding: 5px 5px; margin-bottom: 2px; font-size: 10pt; }


.card-v-verde{ vertical-align: middle; padding: 5px; background-color: white; font-size: 12pt;text-align: center; color: green; }
  .card-v-verde-tit { background-color: green; text-align: left; font-size: 9pt; color: white; text-align: center; padding: 3px; }

  .card-v-azul{ vertical-align: middle; padding: 5px; background-color: white; font-size: 12pt; text-align: center; color: blue; }
  .card-v-azul-tit { background-color:#0000FF; text-align: left; font-size: 9pt; color: white; text-align: center; padding: 3px; }

  .card-v-vermelho{ vertical-align: middle; padding: 5px; background-color: white; font-size: 12pt;text-align: center; color: red; }
  .card-v-vermelho-tit { background-color: red; text-align: left; font-size: 9pt; color: white; text-align: center; padding: 3px; }

  .card-v-roxo{ vertical-align: middle; padding: 5px; background-color: white; font-size: 12pt; text-align: center; color: #e65100; }
  .card-v-roxo-tit { background-color: #e65100; text-align: left; font-size: 9pt; color: white; text-align: center; padding: 3px; }

  .card-af { padding: 5px; color: white; font-size: 15pt; text-align: center; background-color: #ef9a9a; }
  .card{ background-color: white; border: 1px solid #c1c1c1; border-radius: 15px; box-shadow: 0 0 1em #424242; padding: 10px; }

  .doc{ background-color: white; border: 1px solid #c1c1c1; box-shadow: 0 0 1em #424242; padding: 10px; margin-bottom: 10px; }