@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:#516484;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;box-shadow: 0 0 30px #ccd3e7;}
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: #0659d5;}
.tab-active a { background: #fff; border-bottom-color: transparent; color: #0060ee; 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; }}

/* 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: #0437ff;}
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: #0066ff;color:#fff;}
button.primario:hover {background:#0040ff} 

button.secundario {background:#005c94;color:#fff}
button.terciario {background:#0fba00;color:#fff}
button.terciario:hover {background:#0eab00;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: 600px)
{

  .tabelas tr,
  .tabelas td
  {
    display: block;
    margin-top: 10px;
  }

  .tabelas td
  {
    border: none;
    border-bottom: 1px solid #0095D4;
    position: relative;
    min-height: 40px;
    padding-left: 0;
    /* Remova o padding-left */
    display: flex;
    /* Flex para alinhar título e conteúdo */
    align-items: center;
  }

  .tabelas td:before
  {
    content: attr(data-label);
    flex: 0 0 45%;
    /* Ocupa 45% da largura */
    font-weight: bold;
    color: #333;
    text-align: left;
    margin-right: 10px;
    position: static;
    /* Não usa mais absolute */
    width: auto;
    white-space: nowrap;
  }
}

.tabelas thead tr {
	position: absolute;
	top: -9999em;
	left: -9999em;
}
.tabelas tr {
	border: 1px solid #0095D4;
	border-bottom: 0;
}
tr + tr {
	margin-bottom: 1.5em;
}




.legenda {color: #06439e;display:block;line-height:normal;padding:10px;font-size:14px;}
.legenda, thead { padding: 1px;}
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;}
footer
{
  text-align: center;
  padding: 10px;
  color: #fff;
  background: #00204a
}


#topo
{
  margin: 0;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #ededed;
  background-color: #f4f8fb;
  max-width: 1024px;
}

#meio
{
  display: flex;
  background: #f1f4f9;
}

main
{
  background: #f1f4f9
}

#esquerda
{
  background: #002b64;
  min-width: 250px;
  ;
}

#esquerda a
{
  color: #fff;
  display: block;
  padding: 10px 20px;
}

#esquerda a:hover
{
  background: #004aad;
}

#direita
{
  min-width: 200px
}

#itemcurso
{
  margin: 5px;
  border: 1px solid #dedede;
  padding: 6px;
  border-radius: 6px
}

#itemcurso:hover
{
  box-shadow: 0 0 20px #bdbdbd;
}

#centro
{
  padding: 35px;
  background: #fff;
  flex: 0 1 900px;
  margin: 20px;
  box-shadow: 3px 3px 10px gainsboro;
}
@media (max-width: 768px)
{
  #meio
  {
    display: block !important;
  }

  #esquerda,
  #centro
  {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  #centro
  {
    padding: 15px !important;
  }
  #topo
  {
    max-width: auto;
  }  
}