.sec-vacinometro.vs4.vacina {
  background-color: #fff;
  position: relative;
}

.sec-vacinometro.vs4 {
  margin-bottom: 30px;
}

.container-vacinometro-v4 {
  background-color: #f6f6f8;
  max-width: 1280px;
  /* margin-bottom: 20px;
  padding: 12px 10px;
  margin-bottom: 30px; */
  border-radius: 8px;
  border: 2px solid #425889;  
  position: relative;
    
}

.container-vacinometro-v4 .row-titulo {
  display: flex;
    background-color: #425889;
    justify-content: center;
    border-radius: 8px 8px 0 0;
}

.container-vacinometro-v4 .row-titulo > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 250px;
}

.container-vacinometro-v4 .row-titulo .porcentagem-vacinados {
  width:100%;
 /*  max-width: 320px; */
  padding-right: 20px;
}

a.botao-vac-municipios, a.botao-pre-cadastro{
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  padding: 4px 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
  width: 100%;
  max-width: 216px;  
  min-height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 17px 0 0;
  border: 1px solid #425889;
  border-radius: 50px;
  background-color: #425889;
}

a.botao-pre-cadastro {
  float: right;
}

a.botao-vac-municipios:hover, a.botao-pre-cadastro:hover{
  text-decoration: none;
  background: #fff;
  color: #425889;
}

h3.titulo-vacinometro-v4 {
  font-family: 'Lato', sans-serif;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  margin-bottom: 0;
  margin: 0;
  padding: 10px 0 18px 0;
}

p.data-atualizacao-v4 {
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-size: 12px;
  margin-bottom: 0;
  margin-left: 0;
  margin-top: -15px;
  margin-bottom: 8px;
  font-weight: 600;
}

.row-vacinometro-v4 {
  display: flex;
  justify-content: space-around;
  align-items: stretch!important;
  background-color: #ededed;
  padding: 30px 40px;
  border-radius: 8px;
  padding-bottom: 45px;
}

.row-titulo-quadros {
  background-color: white;
  color: #425889;
  text-transform: uppercase;
  border: 1px solid #ccc;
  border-radius: 6px 6px 0 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 10px 0 0;
  border-bottom: none;
}

.quadro-porcentagem .linha-titulos {
  color: #425889;
  font-family: 'Lato', sans-serif;
  font-size: 1.2em;
  text-align: center;
  font-weight: 500;
 }

.row.row-conteudo {
 padding: 10px 60px 0;
 text-align: center;
 border: 1px solid #ccc;
 border-top: 0;
 border-radius: 0 0 6px 6px;
 background-color: #FFFFFF;
  align-content: flex-start;
  height: 100%;
}

.quadro-porcentagem {
  /* width: 100%;
  max-width: 360px; */
  color: #425889;
}

.quadro-porcentagem .linha-textos span.descritivo {
  display: block;
  font-weight: normal;
  font-family: "Lato", sans-serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.2;
  margin: 0;
  padding: 10px 0;
}

.quadro-porcentagem .mobile-align {
  padding: 0 5px;
}

.quadro-porcentagem .line-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;    
}

.quadro-porcentagem .line-bottom .col-5 {
    display: block;
    height: 1px;
    margin: 0; 
    background-color: #425889; 
}
.quadro-porcentagem .line-bottom .col-centro {
    display: block;
    height: 1px;
    margin: 0; 
    background-color: #FFFFFF;
    width: 36px;
    height: 36px;
}
.quadro-porcentagem .line-bottom .col-5 {
    display: block;
    height: 1px;
    margin: 0; 
    background-color: #425889; 
}

.quadro-porcentagem .line-right {
  display: block;
  border-right: 1px solid #425889;
  padding: 0 10px;
}

h3.total-porcentagem-v4 {
  font-family: "Fjalla One", sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #fd9d0d;
  padding: 5px;
  font-weight: normal;
  border: solid 2px #efad0e;
  border-radius: 0.3em;
  margin: 0 0px 10px;
}



/* QDO TOTAL */

.quadro-totais .linha-titulos {
  color: #425889;
  font-family: 'Lato', sans-serif;
  font-size: 1.8em;
  text-align: center;
  font-weight: 500;
 }

.quadro-totais .pane-v4 {
    width: 100%;
    max-width: 346px;
    height: 1.5em !important;
    display: inline-block;
    margin: 0 auto;
    border-radius: 0.1em;
    border: 0.01em solid #444;
    position: relative;
    background: #425889;
    text-align: center;
    line-height: 1;
    /* font-size: 64px; */
    font-size: 3em;
    color: #FFFFFF;
    font-family: "Fjalla One", sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    padding: 6px;
    margin: 0 auto;
}

.quadro-porcentagem .pane-v4 {
  width: 100%;
  max-width: 346px;
  height: 1.1em;
  display: inline-block;
  margin: 0 auto;
  border-radius: 0.05em;
  border: 0.01em solid #444;
  position: relative;
  background: #425889;
  text-align: center;
  line-height: 1;
  font-size: 3em;
  color: #FFFFFF;
  font-family: "Fjalla One", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0px 10px;
  margin: 0 auto;
  height: 60px !important;
}

  .quadro-porcentagem .pane-v4 {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quadro-porcentagem span.percent-value {
    font-size: 2.6rem;
  }

.quadro-porcentagem .pane-v4:after {
  border-top: 0;
}

.quadro-totais .numero-doses {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quadro-totais .col-doses-panel {
  display: flex;
  justify-content: center;
  padding: 0;
  width: 100%;
  flex-wrap: wrap!important;
  background: #f0f0f0;
  border: solid 1px #ccc;
  border-radius: 0.5em;
  margin-bottom: 10px;
}

.quadro-totais .col-doses-adicionais-panel {
  display: flex;
  justify-content: center;
  padding: 0;
  width: 100%;
  flex-wrap: wrap!important;
  background: #fff;
  border: solid 1px #ccc;
  border-radius: 0.5em;
  margin-bottom: 10px;
}

.quadro-totais .col-doses-v4 {
  padding: 0;
  border-right: solid 1px #ccc;
  min-width: 20%;
}

.quadro-totais .col-doses-v4 p,
.quadro-totais .col-doses-v4 p.vac-doses {
  text-align: center!important;
}

.quadro-totais .col-doses-v4:last-child {
  border-right: none;
}

.quadro-totais .col-doses-v4 p.vac-doses {
  width: 100%;
  border: none;
  text-align: center;
  font-family: "Fjalla One", sans-serif !important;
  font-size: 22px !important;
  color: #666 !important;
  letter-spacing: -1px;
  margin-bottom: 3px !important;
  padding-top: 5px;
}

.quadro-totais .col-doses-v4 p.legenda-doses-v4 {
  display: block;
  width: 100%;
  text-align: center;
  color: #425889;

  font-weight: normal;
    font-family: "Lato", sans-serif;
    font-style: italic;
    font-size: 11px;
    line-height: 1.2;
    margin: 0 !important; 
    padding: 0 0 5px 0;

}



/* QDO INFANTIL */

.row-vacinometro-v4 .quadro-infantil .row-titulo-quadros {
  background-color: #fd9d0d!important;
  color: #FFFFFF!important;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}


.quadro-infantil .linha-titulos {
  color: #fd9d0d;
  font-family: 'Lato', sans-serif;
  font-size: 1.8em;
  text-align: center;
  font-weight: 500;
}


.row-vacinometro-v4 .row.row-conteudo-infantil {
  padding: 10px;  
  padding-top: 20px;
  text-align: center;
  border: 2px solid #e1e2e7;
  border-top:0;
  border-radius: 0 0 6px 6px;
  background-color: #FFFFFF;
  align-content: flex-start;
  height: 100%;
  max-height: 240px;
}

.quadro-infantil .pane-v4 {
  width: 100%;
  max-width: 346px;
  height: 1.4em !important;
  display: inline-block;
  margin: 0 auto;
  border-radius: 0.1em;
  border: 0.01em solid #efad0e;
  position: relative;
  background: #efad0e;
  text-align: center;
  line-height: 1;
  font-size: 3em;
  color: #FFFFFF;
  font-family: "Fjalla One", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  padding: 6px;
  margin: 0;
}

.pane-v4:after {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  width: 100%;
  height: 0px;
  opacity: .8;
  z-index: 10;
  margin-top: -1px;
}

.assina-infantil img {
  padding: 15px 0 0 10px;
}

.quadro-infantil .linha-textos span {
  display: block;
  font-weight: normal;
  font-family: "Lato", sans-serif;
  font-style: italic;
  font-size: 11px;
  line-height: 1.2;
  margin: 0;
  padding: 0 0 5px;
  color: #454545;
}

.quadro-infantil .line-right {
  display: block;
  border-right: 1px solid #6b6a6a;
  padding: 0 10px;  
}

.quadro-infantil .line-right::after {
  content: ''; 
  width: 2px;
  height: 80%;
  margin-right: 10px;
  background: #FB5;
}

.quadro-infantil .assina-infantil {
  text-align: left!important;
}


/* Mais informacoes */

.linha-botao-vacinometro {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#divBotMaisInfo_vac {
  justify-content: center;
  align-items: center;
}


#btnTo01on.active-info img {
  transform: rotate(180deg);
}

#conteudo-mais-vacinometro {
  width: 100%;
  display: none;   
}

#conteudo-mais-vacinometro p,
#conteudo-mais-vacinometro,
#conteudo-mais-vacinometro p strong {
  font-family: "Lato", sans-serif;
  color: #4d4d4d;
  font-size: 11px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.row.active-info {
  background-color: #ebebed;
  border-radius: 0 0 8px 8px;
}

/*.row.active-info.active {
  border-top: 2px solid #425889;
}*/

button#btnTo01on {
  z-index: 999;
  background: #425889;
  width: 100px;
  height: 38px;
  margin: 0 auto;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid #FFFFFF;
  text-align: center;
  line-height: 36px;
  padding-left: 10px;
  outline: none;
}


#btnTo01off {
  display: none;
  align-items: center;
  position: relative;
  margin: 0 auto;
  border: 0;
  text-align: center;
  margin-bottom: -48px;
  z-index: 999;
}

#btnTo01on.active-info {
  position: absolute;
  bottom: 0;
}

#conteudo-mais-vacinometro.active-info #btnTo01off {
  display: flex;
}

#conteudo-mais-vacinometro.active-info {
  background-color: #ededed;
  padding: 20px 40px;
  padding-top: 0px;
  display: block;
  animation: slideDown .5s forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    max-height: 600px;
    opacity: 1;    
  }  
}

.quadro-infantil .ilustracao-g {
  position: relative;
}

.quadro-infantil .ilustracao-g img {
  position: absolute;
    right: -10px;
    bottom: -80px;
    max-height: 98px;
    width: auto;
}

/* Mais info */

.linha-botao-vacinometro {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#divBotMaisInfo_vac {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
}

#btnTo01on {
  outline: none;
}

#btnTo01off {
  z-index: 999;
}

#btnTo01on.active-info img {
  transform: rotate(180deg);
}

#conteudo-mais-vacinometro {
  width: 100%;
  display: none;   
}

#conteudo-mais-vacinometro p,
#conteudo-mais-vacinometro,
#conteudo-mais-vacinometro p strong {
  font-family: "Lato", sans-serif;
  color: #4d4d4d;
  font-size: 11px;
  line-height: 1.2;
  margin-bottom: 16px;
}

span.bullet-vac {
  color: #efad0e;
  font-size: 20px;
}

.quadro-porcentagem,
.quadro-infantil,
.quadro-totais {
  width: 100%;
  margin-top: 15px;
}


.br-mobile,
.br-mobile-280 {
  visibility: hidden;
  display: none;
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .quadro-infantil .linha-titulos,
  .quadro-porcentagem .linha-titulos,
  .quadro-totais .linha-titulos {
    font-size: 1em;
  }


  .quadro-porcentagem,
  .quadro-infantil,
  .quadro-totais {
    width: 90%;
    /*max-width: 335px;*/
    padding-bottom: 15px;
  }
  .row-vacinometro-v4 {
    padding: 20px 4px;
    padding-bottom: 40px;
  }

  .mobile-align {
    padding: 0;
  }

  .mobile-align-left {
    padding-left: 0;
  }
  .mobile-align-right {
    padding-right: 0;
  }
  .quadro-totais .col-doses-v4 p.vac-doses {
    max-width:88px;
    font-size: 17px;
  }
}


@media (min-width: 1024px) and (max-width: 1180px) {
  /* .quadro-porcentagem {
    width: 100%;
    max-width: 100%;
  } */

  .quadro-porcentagem .row.row-conteudo {
    padding: 0;
    padding-top: 20px;
  }

  .quadro-infantil .linha-titulos {
    letter-spacing: -1.2px;
}
}


@media (min-width: 1024px) and (max-width: 1080px) {
  .quadro-porcentagem, .quadro-infantil, .quadro-totais {
      width: 90%;
      /*max-width: 340px;*/
      padding-bottom: 15px;
  }
}

@media (max-width:1024px) {

  .row-vacinometro-v4 {
    flex-direction: column;
  }

  .hidden-br {
    display: none;
  }

  a.botao-vac-municipios {
    font-size: 14px;
  }

  .container-vacinometro-v4 .btn-cadastro {
    padding: 4px;
  }

  .quadro-porcentagem .linha-titulos,
  .quadro-totais .linha-titulos {
    font-size: 1em;
    letter-spacing: -.8px
  }

  /* .row-vacinometro-v4 {
    display: block;
  } */

  .quadro-porcentagem {
    width: 100%;
    max-width: 100%!important;
  }

  .quadro-porcentagem,
  .quadro-totais,
  .quadro-infantil {
    margin-bottom: 20px;
  }

  .row-vacinometro-v4 .row.row-conteudo {
    padding: 0;
    padding-top: 20px;
    padding-bottom: 18px;
    height: auto;
    min-height: auto;
  }

  .quadro-porcentagem,
  .quadro-infantil,
  .quadro-totais {
    max-width: 100%;
    width: 100%;
  }

  .quadro-totais .col-doses-panel {
    width: 100%;
}

  .quadro-totais,
  .quadro-porcentagem {
    margin-bottom: 15px;
  }

  .row-vacinometro-v4 {
    padding: 8px;
  }
  
  .container-vacinometro-v4 .row-titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 12px;
    flex-wrap: wrap;
  }

  #conteudo-mais-vacinometro.active-info {
    padding: 38px 0 20px 0;
  }

  .quadro-totais .pane-v4,
  .quadro-porcentagem .pane-v4,
  .quadro-infantil .pane-v4 {
    width: 100%;
    max-width: 90%;
    font-size: 3.1em;
  }

  .quadro-totais .col-doses-v4 p.vac-doses {
    font-size: 17px;
  }

  
  .quadro-infantil .linha-titulos {
    font-size: 1em;
  }

  .container-vacinometro-v4 .row-titulo > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }
  .container-vacinometro-v4 .row-titulo .btn-cadastro {
      width: 100%;
  }


  .quadro-infantil .ilustracao-g img {
    right: 0;
  }
  .quadro-infantil .assina-infantil img {
    padding-right: 30px;
  }
    
  .quadro-infantil .linha-titulos {  
    letter-spacing:  -1px;
  }  
}


@media (max-width:680px) {  
.quadro-porcentagem .mobile-align {
    padding: 0;
  }

  .mobile-align {
    padding: 0;
  }
  .mobile-align-left {
    padding-left: 0;
  }
  .mobile-align-right {
    padding-right: 0;
  }

  .row-vacinometro-v4 .row.row-conteudo-infantil {
    padding-left: 0;
    padding-right: 0;
  }


  .quadro-infantil .pane-v4,
  .quadro-totais .pane-v4,
  .quadro-porcentagem .pane-v4 {
    width: 100%;
    max-width: 100%;
    font-size: 3.1em
  } 

  .quadro-infantil .linha-titulos,
  .quadro-porcentagem .linha-titulos,
  .quadro-totais .linha-titulos {
    letter-spacing: -.7px;
    font-size: 1rem;
  }

  .br-mobile {
    visibility: visible;
    display: block;
  }
  .quadro-infantil .linha-titulos {
    white-space: nowrap;
    letter-spacing: -.8px;
  }  

  .quadro-infantil .ilustracao-g img {
    right: 2px;
    bottom: -78px;
  }
  .quadro-totais .col-doses-v4 p.vac-doses {
    padding: 10px 0 0;
    max-width: 100%;
    font-size: 21px !important;
  }

  .quadro-totais .col-doses-v4 p.legenda-doses-v4 {
    padding-top: 0px;
    font-size: 14px !important;
  }
}

@media (max-width: 300px) {
  .quadro-infantil .linha-titulos {
      white-space:normal;
      letter-spacing: -.6px;
    }

    .br-mobile-280 {
      visibility: visible;
      display: block;
    }

    .quadro-totais .col-doses-v4 p.vac-doses {
      font-size: 15px;
    }
    .quadro-infantil .ilustracao-g img {
      right: -34px;
    }
    
}

 /* Alter março 2022 */

 .assina-infantil img {
  padding: 0;
}

.quadro-porcentagem .pane-v4,
.quadro-totais .pane-v4,
.quadro-infantil .pane-v4 {
  height: 1.1em;
  font-size: 2.4em;
  letter-spacing: -0.8px;
  margin: 0;
}

.quadro-porcentagem .pane-v4 {
  padding-top: 5px;
}

.quadro-porcentagem span.percent-value {
  font-size: 2.5rem;
}

.row-vacinometro-v4 .row.row-conteudo,
.row-vacinometro-v4 .row.row-conteudo-infantil {
    height: 100%;
    max-height: 280px;   
}

@media (max-width:780px) {
  .quadro-totais .col-doses-panel {
    padding-top: 8px;
  }
 
  .quadro-infantil h3.total-porcentagem-v4 {
    padding-top: 10px;
  }
  .row-vacinometro-v4 .row.row-conteudo,
  .row-vacinometro-v4 .row.row-conteudo-infantil {
    height: auto;
    max-height: 100%;
    min-height: auto;
  }
  .quadro-porcentagem .pane-v4 {
    max-width: 100%;
  }
  .row-vacinometro-v4 {
    padding-bottom: 0;
   }

   .row-vacinometro-v4 .row.row-conteudo {
    padding: 0 10px;
   }

   #conteudo-mais-vacinometro.active-info {
    padding: 0 8px;
   }
    .row.row-conteudo {
      padding: 10px 0;
      text-align: center;
      border: 1px solid #ccc;
      border-top: 0;
      border-radius: 0 0 6px 6px;
      background-color: #FFFFFF;
      align-content: flex-start;
      height: 100%;
  }

  .row.active-info.active {
    height: 980px;
    display: inline-block;
}

a.botao-vac-municipios, a.botao-pre-cadastro {
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  padding: 4px 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
  width: 100%;
  max-width: 100%;
}

.container-vacinometro-v4 {
  background-color: #ebebed;
  padding-bottom: 20px;
}

  .quadro-porcentagem .pane-v4,
.quadro-totais .pane-v4,
.quadro-infantil .pane-v4 {
  height: 1.1em;
  font-size: 2.4em;
  letter-spacing: -0.8px;
  margin: 10px 0;
}

 }
 .conteudo-infos-vac {
  padding: 25px 0;
  margin-bottom: 20px;
 }