@import url('includes/multiforms.css');
@import url('includes/main.css');
@import url('includes/modal.css');
@import url('includes/forms.css');
@import url('includes/table.css');


.formulario{
 margin: 0 auto;
}

.selecioneoption{
 color: gray;
}

.prevNext{
 margin: 20px 0px 0px 0px;
}

.selects, .inputs{
 margin: 0px 0px 20px 0px;
}

.tab h2{
 margin: 0px 0px 50px 0px;
 color: #005D3A;;
}

.tab h2::after {
 content: "";
 display: block;
 margin: 5px 0;
 width: 30px;
 height: 3px;
 background-color: rgb(202, 199, 199);
}

.tab h3{
 color: rgb(33, 95, 33);
}


.add-dependentes, .delete-dependentes{
 display: flex;
 justify-content: space-between;
}

.btn-dep{
 height: 40px;
}

.btn-close{
 width: 30px;
 height: 30px;
 background: rgb(151, 151, 151);
 color: white;
 font-weight: 600;
 border-radius: 50%;
 border: 2px solid white
}

.btn-close:hover{
 background: red;
}

.delete-dependentes{
 margin: 20px 0px;
}


.content{
 display: flex;
 flex-flow: row wrap;
 min-height: 100vh;
 background: rgb(250, 250, 250);
 background: url("../img/fundo-cotacao.jpg");
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: 100% auto;
}

.apresentacao{
 width: 50%;
 color: #005D3A;
 font-size: 1.5em;
 margin: 5% 0 0 10%;
}


.apresentacao .logos{
 display: flex;
}

@media screen and (max-width: 1140px) {
 .apresentacao{
  width: 100%;
  gap: 10px;
 }

 .content{
  background: rgb(250, 250, 250);
  background: url("../img/fundo-cotacao2.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
 }
}

.row {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: flex-start;
 flex-flow: row wrap;
}

.cell {
 box-flex: 1;
 flex: 1 1 auto; 
 padding: 10px;
 margin: 10px;
 text-align: center;
}

.cell img{
 width: 150px;
 margin: 0px 0px 70px 0px;
}

.apresentacao img {
 width: 150px;
 max-width:100%;
}

.apresentacao span{
 font-size: 1em;
}

.logo_associacao img{
 object-fit: contain;
 max-height: 80px;
 float: left;
}






/**/

.dependentes, .resultado{
 display: flex;
 padding: 0 0 30px 0;
 gap: 30px;
 overflow: hidden;
}

.bloco-depentente, .card{
 min-width: 370px;
 border: 2px solid rgb(199, 199, 199);
 border-radius: 5px;
 padding: 0px 20px;
}


/**/

.plano{
 margin-bottom: 30px;
}

.descricao_plano{
  display: flex;
  gap: 30px;
  justify-content: space-between;
}

.descricao h1{
  font-size: 1.2em;
}

.subtitulo{
 font-size: .8em;
 text-align: center;
 margin: 0;
}


.logo-plano{
 width: 60px;
}


.obs{
 font-size: .6em;
}

.valores{
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 gap: 20px;
}

.valor-pessoa{
 padding: 10px;
 border-radius: 5px;
 background: rgb(245, 245, 245);
 min-width: 180px;
}

.valor-pessoa p{
 margin: 0;
}

.valor-pessoa p{
 margin: 0;
}

.valor-pessoa span, .resumo span{
font-size: .8em;
color: gray;
}

.acomodacao, .faixa{
 font-size: .8em;
}

.acomodacao{
 width: 100%;
 text-align: center;
}

.nome{
 color: #005D3A;
 text-align: center;
 font-weight: bold;
}

.total, .validade{
 text-align: center;
 margin: 10px 0px;
}

.total{
 color: #005D3A;
 font-weight: bold;
}

.abrangencia{
 font-weight: bold;
}


.validade{
 font-size: .7em;
}

.totalplanos, .totaldep, .ndep{
 font-size: .7em;
 text-align: center;
}

.totaldep{
 font-size: .8em;
}

.contato{
 display: grid;
 vertical-align: center;
 text-align: center;
 font-weight: 300;
 color: gray;
}

.contato img{
 margin: 30px 0px 10px 0px;
 width: 64px;
}

.associacao option{
 max-width: 500px;
}

.scroll-comand{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 width: 445px;
 position: relative;
 top: -430px;
 left: -38px;
}

.button-scroll{
 width: 40px;
 height: 40px;
}

.reverse{
 transform: rotate(-180deg)
}

.faixa{
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  }
  .qtdade{
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  }
  .valor_unitario{
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  }
  .valor_total{
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  }