@charset "utf-8";
/* CSS Document */

*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box;}

/* elementos */
body, p, button, input, select, textarea {    font-family: 'montserrat', sans-serif;font-size: 15px;line-height: 2em; transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}    
h1, h2, h3, h4, h5, h6 {padding: 0 0 10px 0px; color:#004388;font-weight: 600;}
hr {margin-bottom: 10px;border: 1px solid red;}

.width100{width:100%}
.radius-p {border-radius:5px;}
.radius-m {border-radius:8px;}
.radius-g {border-radius:50px;}
.radius-gg {border-radius:100%;}

a {color:#6304ff;text-decoration: none}

/*icones*/
.material-icons, .material-icons-round {vertical-align:middle;}

/* Tabs */


.tabs { margin: 0 auto; background:#fff; max-width: 480px;border-radius:6px;}
ul.tabs-nav { list-style-type: none;}
.tabs-nav li {   float: left; width: 50%;}
.tabs-nav li:first-child a { border-right: 0;border-top-left-radius: 6px;}
.tabs-nav li:last-child a { border-top-right-radius: 6px;}
.tabs-nav a { background: #e6ebf9;border: 1px solid #d0d7eb; color: #8995ba; display: block; font-weight: 600; padding: 10px 0; text-align: center; text-decoration: none;}
.tabs-nav a:hover { color: #004388;}
.tab-active a { background: #fff; border-bottom-color: transparent; color: #004388; cursor: default;}
.tabs-stage { border: 1px solid #d0d7eb; border-radius: 0 0 6px 6px; border-top: 0; clear: both; padding: 24px 30px; position: relative; top: -1px;}


/* Estrutura  */

.linha {margin-bottom:15px;}
.container:after, .linha:after {  content: "";  display: table;  clear: both; }
.container { position: relative; width: 100%; max-width: 1170px/*960px*/; margin: 0 auto; padding: 0 20px;box-sizing: border-box; }
.coluna, .colunas { width: 100%; float: left; box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container { width: 85%;padding: 0; }
}

@media (min-width: 400px) {
  .loja .container { width: 100%;padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container { width: 80%; }
  .coluna,  .colunas {margin-left: 4%; }
  .coluna:first-child,
  .colunas:first-child {
    margin-left: 0; }

  .uma.coluna,
  .uma.colunas                    { width: 4.66666666667%; }
  .duas.colunas                    { width: 13.3333333333%; }
  .tres.colunas                  { width: 22%;            }
  .quatro.colunas                   { width: 30.6666666667%; }
  .cinco.colunas                   { width: 39.3333333333%; }
  .seis.colunas                    { width: 48%;            }
  .sete.colunas                  { width: 56.6666666667%; }
  .oito.colunas                  { width: 65.3333333333%; }
  .nove.colunas                   { width: 74.0%;          }
  .dez.colunas                    { width: 82.6666666667%; }
  .onze.colunas                 { width: 91.3333333333%; }
  .doze.colunas                 { width: 100%; margin-left: 0; }
}

.grid4colunas {display:grid; grid-template-columns:repeat(4, 1fr);}

@media screen and (max-width: 768px) {.grid4colunas {display:block !important;}
    
    .meio {flex-direction: column}
    
}

.grid4colunas div {
	padding: 3px;
	background: #dadada;
	margin: 7px;
	
}

/* formularios */
input, select, textarea {color: #5772a2;border: 1px solid #b3c6ed;width: 100%;background-color: #d8e3f9;margin-bottom:6px;border-radius:8px}
button {cursor: pointer;padding: 5px 20px;border:none;border-radius:30px;font-weight: 600;}
button.p {font-size:14px}
button.m {font-size:16px}
button.g {font-size:20px}

form.p label, form.p input, form.p textarea {font-size:14px;padding: 5px 10px}
form.m label, form.m input, form.m select, form.m textarea {font-size:16px;padding: 10px 16px;}
form.g label, form.g input, form.g select, form.g textarea {font-size:20px;padding: 10px 16px;}
form input:focus, form textarea:focus {box-shadow: 0px 4px 20px #aab7d0;outline: none;background: #fff;color: #004388;}
form.p select {font-size:14px;padding: 10px;}
form label {color:#617aa9;padding: 0 !important;font-weight: 600;}
form .linha {margin-bottom:0}

button.primario {background:#004388;color:#fff;}
button.primario:hover {background:#004388} 

button.secundario {background:#005c94;color:#fff}
button.terciario {background:#0069BA;color:#fff}
button.terciario:hover {background:#0069BA;color:#fff}
button.quartenario {background:#c3d6f3;color:#315994}
form h3 {padding-bottom:0;color:#005c94;padding-top:15px;}

input[type=radio] {width: auto;}
#esquecisenha {margin-bottom: 1em;display: block;font-size: 12px;color: #06439e;float: right;}

/* menu e lista */

header li, header ul {list-style: none;}


/* tabelas*/


.tabelas a {
	border-bottom: 1px solid;
}
table.tabelas {
	width: 100%;
	border-collapse: collapse;
	border-radius: 10px;
}
.tabelas tr {
	border-bottom: 1px solid #b2c2cb !important;
}
.tabelas tr:last-child {
	border-bottom: 0;
}
.tabelas th {
	border-bottom: 1px solid #b5bdd5;
	font-weight: 600;
	color: #06439e;
	background: #eff2fb;
}
.tabelas th, .tabelas td {
	padding: 9px;
	text-align: left;
}
.tabelas tr:hover {
	background: #d7f0ff;
}
 @media (max-width: 30em) {
td, th {
	text-align: left !important;
}
.tabelas thead tr {
	position: absolute;
	top: -9999em;
	left: -9999em;
}
.tabelas tr {
	border: 1px solid #0095D4;
	border-bottom: 0;
}
tr + tr {
	margin-bottom: 1.5em;
}
.tabelas tr, .tabelas td {
	display: block;
	margin-top: 10px;
}
.tabelas td {
	border: none;
	border-bottom: 1px solid #0095D4;
	padding-left: 50%;
}
.tabelas td:before {
	content: attr(data-label);
	display: inline-block;
	font-weight: bold;
	line-height: 1.5;
	margin-left: -100%;
	width: 100%;
}

 }
.legenda {color: #06439e;display:block;line-height:normal;padding:10px;font-size:14px;}
.legenda, thead {}
input:read-only {background: #fff !important; box-shadow:none;cursor:default;}


/* Telinha modal para a Mensagem em funcoes.js */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  max-width: 350px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
.modal-header {
  padding: 2px 16px;
  background-color: #0041bf;
  color: white;
}
.modal-body {padding: 2px 16px;}

/********************* fim tela modal */

/************ checkbox toggle */
.togglex {
    margin-bottom: 40px;
}

.togglex > input {
    display: none;
}

.togglex > label {
    position: relative;
    display: block;
    height: 20px;
    width: 44px;
    background: #898989;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.togglex > label:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
    content: '';
    transition: all 0.3s ease;
}
.togglex > label:active:after {
    transform: scale(1.15, 0.85);
}
.togglex > input:checked ~ label {
    background: #6fbeb5;
}
.togglex > input:checked ~ label:after {
    left: 20px;
    background: #179588;
}
.togglex > input:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none;
}
.togglex > input:disabled ~ label:after {
    background: #bcbdbc;
}

/********** fim toggle */

.menuesquerda{width: 200px; min-width: 160px; max-width: 220px;}

#topo {margin:0;display:flex;align-items: center;}
.meio {display:flex;background:#d8d8d8;}
#esquerda {background:#004388;min-width: 200px;;}
#esquerda a {color:#fff;display: block;padding: 10px 20px;}
#esquerda a:hover {background:#04405B;}
#direita {min-width: 200px}

#centro {padding:20px; background:#fff;flex: 0 1 800px;margin: 20px;}