:root {
    /*azuis*/
    --c-azul-super-escuro-background: #00143C;    
    --c-azul-escuro-background: #002570;
    --c-azul-escuro-font: #00227f;
    --c-azul-claro-font: #188CFF;
    --c-azul-claro-botao-background: #EDF1F7;
    --c-azul-claro-borda: #99ACD2;
    --c-rosa-escuro-botoes: #741958;   
    --c-rosa-botoes: #b8288b;
    --c-rosa-destaque: #E031AA;
    --c-rosa-medio-background: #E28DC8;
    --c-rosa-claro-background: #F9EBF5;
    --c-cinza-claro-font: #666;
    --c-cinza-claro-botoes: #A6A6A6;
    --c-cinza-clarissimo-botoes: #C4C4C4;
    --c-cinza-escuro-font: #333;
    --c-cinza-escurissimo-font: #222;
    --c-cinza-clarissimo-font: #E6E6E6;
    --c-vermelho-alerta-escuro: #800000;
    --c-vermelho-alerta-medio: #E52424;
    --c-vermelho-alerta-claro: #F9C8C8;
    --c-verde-claro-background: #DFECE4;    
    --c-ciano-claro-background: #4EF0FA;
    --c-ciano-claro-texto: #00D9E6;
    --c-ciano-medio-background: #00D9E6;
    --c-amarelo-forte-fonte: #FACE47;
    --c-amarelo-medio-fonte: #FFBF64;
}

.botao_azul_escuro {
    height: 40px;
    Box-sizing: border-box;
    padding: 12px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #002F8E;
    color: #fff;
    font-size: 16px;
    gap: 8px;
    border: 1px #EDF1F7 solid;
    border-radius: 6px;
    width: fit-content;
    transition: background-color 0.5s ease;
    cursor: pointer;
}

.area_escura_modal
{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000AA;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    font-family: Roboto;
}

.area_escura_modal .area_modal
{
    position: relative;
    display: flex;
    background-color: #fff;
    border-radius: 12px;
    min-width: 100px;
    min-height: 100px;
    overflow: hidden;
}

.area_escura_modal .area_modal .area_bloco_login
{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.area_escura_modal .area_modal .area_bloco_login .chamada_login
{
    color: #fff;
    background-image: url(modal-login-geral-background.png);
    width: 400px;
    height: 500px;
    padding: 24px;
}

.area_escura_modal .area_modal .area_bloco_login .chamada_login h2
{
  font-size: 48px;
  font-style: normal;
  font-weight: 900;
  line-height: 120%;
  margin-top: 90px;
  margin-bottom: 24px;
}
.area_escura_modal .area_modal .area_bloco_login .chamada_login p
{
  font-size: 18px;  
  margin-bottom: 24px;
}

.area_escura_modal .area_modal .area_bloco_login .cabecalho
{
    width: 100%;
    color: #000;
    /* font-family: Poppins; */
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-bottom: 1px solid #888;
    text-align: left;
    padding: 16px;
}

.area_escura_modal .area_modal .area_bloco_login .aviso
{
    width: 100%;
    color: #000;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
    text-align: left;
}

.area_escura_modal .area_modal .area_bloco_login .detalhes
{
  margin-top: 4px;
  width: 100%;
  color: #000;
  font-size: 14px;
  font-style: normal;
}

.area_escura_modal .area_modal .area_bloco_login .avisovermelho
{
    width: 100%;
    color: red;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
    text-align: right;
}

.area_escura_modal .area_modal .area_bloco_login .aviso span {
  color: #962172;
}

.area_escura_modal .area_modal .area_bloco_login .cabecalho i {
  float: right;
}

#RefErroSenhaSenha
{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-align: center;
}

.area_escura_modal .area_modal .fechar
{
    background-color: var(--c-azul-escuro-background);
    background-image: url(../../templates/templatemultirio2025/images/icones/close.svg);
    background-repeat: no-repeat;
    background-position: center center;
    right: 0px;
    width: 40px;
    height: 40px;
    position: absolute;
    margin-right: auto;
    top: -60px;
    border-radius: 8px;
    border: 2px solid var(--c-azul-claro-botao-background);
}

.mod_mr_login {
  background-color: var(--c-azul-escuro-background);
  font-family: Roboto;
}

.mod_mr_login a {
  text-decoration: none;
  color: #ffffff;
}
.mod_mr_login .area_mobile {
  display: none;
}

.mod_mr_login .login div {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: var(--c-azul-claro-botao-background);
  color: var(--c-azul-escuro-font);
  font-size: 16px;
}

.mod_mr_login .area_modal {
  width: 800px;
  display: flex;
  flex-direction: row;
}

.mod_mr_login .area_modal img.detalhe {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.mod_mr_login .area_login {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* margin: 16px 24px; */
}

.mod_mr_login .area_login .cabecalho {
  width: 100%;
  text-align: center;
  color: var(--c-azul-escuro-font);
  font-size: 20px;
  padding: 1px;
}

.mod_mr_login .area_login .subtexto {
  width: 100%;
  text-align: center;
  color: var(--c-cinza-claro-font);
  font-size: 14px;
  padding: 20px 1px 30px 1px;
}

.mod_mr_login .area_login .etapa {
  width: 100%;
  min-height: 330px;;
  display: flex;
  flex-direction: column;
  padding: 24px;
  flex: 1;
}

.mod_mr_login .area_login .etapa.formulario {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 24px;
  flex: 1;
  gap: 12px 24px;
}

.mod_mr_login .area_login .etapa .logoPrefeitura{
  width: 100%;
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
}

.mod_mr_login .area_login .etapa .botao_azul_escuro.invertido {
  background-color: #fff;
  border: #002F8E solid 2px;
  color: #002F8E;
}

.mod_mr_login .area_login .etapa .div_botoes {
  display: flex;
  flex-direction: row;
  justify-content: right;
  width: 100%;
  gap: 24px;
}

.mod_mr_login .area_login .etapa .div_botoes .botao_azul_escuro {
  margin-left: unset;
}


.mod_mr_login .area_login .formulario .espaco1, .mod_mr_login .area_login .formulario .espaco2, .mod_mr_login .area_login .formulario .espaco3 {
  display: flex;
  flex-direction: column;
}

.mod_mr_login .area_login .formulario input{
  width: 100%;
}

.mod_mr_login .area_login .formulario input[type="checkbox"]{
  width: unset;
}

.mod_mr_login .area_login .formulario .espaco1{
  width: calc(100% / 3 - 16px);
}

.mod_mr_login .area_login .formulario .espaco2{
  width: calc(100% / 3 * 2 - 8px);
}

.mod_mr_login .area_login .formulario .espaco3{
  width: 100%;
}


.mod_mr_login .area_login .etapa .ou {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.mod_mr_login .area_login .botao_prefeitura {
  border-radius: 4px;
  border: 1px solid#EDF1F7;
  background: #13335A;
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
  justify-content: center;
  gap: 8px;
}
.mod_mr_login .area_login .botao_prefeitura img {
  margin-bottom: 3px;
}

.mod_mr_login .area_login .botao_cadastrese {
  display: flex;
  min-height: 32px;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 2px solid #3359A5;
  background: #FFF;
  color: #002F8E;
  font-size: 14px;
}

.mod_mr_login #etapaLoginRioeduca .div_botoes {
  margin-top: 40px;
}

.mod_mr_login #etapaLoginRioeduca .div_botoes .botao_azul_escuro{
  flex: 1;
}

.mod_mr_login #etapaLoginRioeduca .div_botoes .invertido{
  flex: unset;
}

.mod_mr_login .area_login .etapa .ou div {
  height: 1px;
  background-color: black;
  width: 40%;
}

.mod_mr_login .area_login label {
  color: #000000;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}

.mod_mr_login .area_login input[type="text"],
.mod_mr_login .area_login input[type="number"],
.mod_mr_login .area_login input[type="date"] {
  height: 40px;
  border: 1px solid #000;
  font-size: 18px;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 8px 12px;
  -moz-appearance: textfield;
}

.mod_mr_login .area_login select {
  height: 40px;
  padding: 4px 8px;
  border: 1px solid #000;
  font-size: 18px;
  box-sizing: border-box;
}

.mod_mr_login .area_login select {
  margin-bottom: 5px;
}

.mod_mr_login .area_login .senha input[type="text"] {
  width: 28px;
  text-align: center;
}

.mod_mr_login .area_login input[type="text"]:read-only {
  color: var(--c-cinza-claro-font);
}

.mod_mr_login .area_login .senha input[type="number"] {
  width: 28px;
  text-align: center;
}

.mod_mr_login .area_login input[type="number"]:read-only {
  color: var(--c-cinza-claro-font);
}


.mod_mr_login .area_login span {
  margin-bottom: 10px;
  color: var(--c-vermelho-alerta-medio);
  font-size: 14px;
  margin-bottom: 5px;
  /* height: 20px; */
}

.mod_mr_login .area_login .mini {
  color: var(--c-cinza-claro-font);
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 8px;
}

.mod_mr_login .botao_azul_escuro {
  margin-left: auto;
}

.mod_mr_login .cadastrese {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  color: #666;
  font-size: 14px;
  padding-top: 20px;
}

.mod_mr_login .area_login input::placeholder {
  color: var(--c-cinza-claro-botoes);
  font-size: 18px;
}

.mod_mr_login .area_login .botao_azul_escuro {
  margin-top: auto;
  height: 48px;
  border-radius: 6px;
  font-size: 16px;
}

.mod_mr_login #etapaLogin .area_login .botao_azul_escuro {
  margin-top: 24px;
  margin-bottom: 24px;
  width: 100%;
  height: 48px;
  border-radius: 6px;
  font-size: 16px;
}

.mod_mr_login .area_login .senha {
  width: 100%;
  justify-content: center;
  display: flex;
  flex-direction: row;
  gap: 48px;
}

.mod_mr_login .area_login .senha input[type="number"]{
  border: 4px solid #002F8E;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 40px;
  margin-top: 60px;
  -moz-appearance: textfield;
}


.mod_mr_login .area_login input.alerta {
  border: 1px solid var(--c-vermelho-alerta-medio);
  color: var(--c-vermelho-alerta-medio);
  background-image: url(alert-triangle.svg);
  background-repeat: no-repeat;
  background-position-x: calc(100% - 10px);
  background-position-y: center;
}

.mod_mr_login .area_login input.alerta::placeholder {
  color: var(--c-vermelho-alerta-medio);
}

.mod_mr_login .area_login a {
  color: var(--c-azul-escuro-background);
}

.mod_mr_login .area_logado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  color: #fff;
  gap: 16px;
}

.mod_mr_login .area_logado .avatar {
  width: 48px;
  border-radius: 24px;
}

@media (max-width: 840px) {
  /* ajustar a modal de login*/
  .mod_mr_login .area_login {
    width: unset;
  }
  .mod_mr_login .area_modal {
    width: 80vw;
    max-width: 452px;
    min-width: 360px;
    flex-direction: column;
  }
  .mod_mr_login .area_modal img.detalhe {
    width: 345px;
    height: 258px;
    object-fit: cover;
    border-radius: 12px 12px 0px 0px;
  }

  .area_escura_modal .area_modal .area_bloco_login {
    flex-direction: column;
  }

  .area_escura_modal .area_modal .area_bloco_login .chamada_login {
      background-image: url(modal-login-geral-background-mobile.png);
      height: unset;
      width: unset;
      padding: 24px 24px 0px 24px
  }

  .area_escura_modal .area_modal .area_bloco_login .chamada_login h2 {
    margin: 0px;
    font-size: 40px;
  }
  .mod_mr_login .area_login .botao_cadastrese {
    padding: 6px 8px;
  }

  .mod_mr_login .area_login .senha {
    gap: calc((100% / 5) - 52px);
  }

  .mod_mr_login .area_login .formulario .espaco1{
    width: 100%;
  }

  .mod_mr_login .area_login .formulario .espaco2{
    width: 100%;
  }
}

@media (max-width: 1000px) {
  .mod_mr_login .apenas_descktop {
    display: none;
  }

  .mod_mr_login .busca_login .area_logado {
    display: none;
  }

  .mod_mr_login .area_mobile {
    display: flex;
  }
}

.mod_mr_login .menu_mobile {
  justify-content: end;
}

.mod_mr_login .menu_mobile .area_modal {
  height: 100vh;
  flex-direction: column;
  width: 308px;
  border-radius: 0px;
}

.mod_mr_login .area_busca {
  width: 100%;
  max-width: 752px;
  border-radius: 12px;
  padding: 24px;
}

.mod_mr_login .area_busca span {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.mod_mr_login .area_busca input[type="text"] {
  width: calc(100% - 140px);
  font-size: 18px;
  border-radius: 8px;
  background-color: var(--c-cinza-clarissimo-font);
  border-width: 0px;
  padding: 10px;
}

.mod_mr_login .area_busca input[type="number"] {
  width: calc(100% - 140px);
  font-size: 18px;
  border-radius: 8px;
  background-color: var(--c-cinza-clarissimo-font);
  border-width: 0px;
  padding: 10px;
  -moz-appearance: textfield;
}

.mod_mr_login .area_busca input::placeholder {
  color: var(--c-cinza-claro-font);
}

.mod_mr_login .area_busca .area_historico {
  display: flex;
  flex-direction: column;
}

.mod_mr_login .area_busca .area_historico label {
  margin-top: 24px;
  color: var(--c-cinza-claro-font);
  font-size: 14px;
  font-weight: bold;
}

.mod_mr_login .area_busca .area_historico span {
  border-bottom: 1px solid var(--c-cinza-claro-font);
  flex-wrap: wrap;
  padding-bottom: 6px;
}

.mod_mr_login .area_busca .area_historico span a {
  text-decoration: none;
  color: var(--c-azul-escuro-font);
  padding: 14px;
  text-wrap: nowrap;
  font-size: 16px;
}

.mod_mr_login .area_busca .area_historico div {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mod_mr_login .area_busca .area_historico div a {
  text-decoration: none;
  color: var(--c-cinza-escuro-font);
  background-color: var(--c-ciano-claro-background);
  padding: 6px 12px;
  text-wrap: nowrap;
  font-size: 15px;
  border-radius: 4px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}