@charset "UTF-8";
body {
  font-family: "Mulish-Regular";
  background-color: var(--color-slate-gray-96);
}

#sp-arrow[aria-expanded=true] {
  transform: rotate(90deg);
}

.maskvideo {
  border-radius: var(--border-radius-lg);
  overflow: auto;
}

.maskvideo video {
  display: block;
  width: 100%;
  height: auto;
}

.manutencao .titulo {
  color: var(--text-color-primary);
  font-size: var(--font-size-xs18);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-sm);
}
.manutencao .descricao {
  color: var(--text-color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-sm-md);
}
.manutencao a {
  color: var(--text-color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-sm-md);
}

.tab-content .card:hover {
  cursor: pointer;
}
.tab-content .titulo {
  color: var(--text-color-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-sm-md);
}
.tab-content .telefone {
  color: var(--text-color-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-sm-md);
}
.tab-content .horario {
  color: var(--text-color-primary);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-xs);
  border-top: 1px solid rgba(224, 224, 224, 0.4);
  margin-top: var(--sizing-scale-16);
  padding-top: var(--sizing-scale-16);
}

.atendimento-box {
  max-height: 336px;
  overflow-y: auto;
}

.badge {
  display: flex;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  padding: 1rem;
  background: var(--background-color-brand-dark);
  color: var(--text-color-light);
  font-size: var(--font-size-xs18);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-sm);
}

.btn-clear-token-primary-lg {
  background-color: transparent;
}
.btn-clear-token-primary-lg :hover {
  background-color: transparent;
}

.btnTeclaToken {
  width: 80px;
  height: 62px;
  cursor: pointer;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--outline-color-default); /*verificar no figma está para ser essa com o valor --outline-color-disabled, o token não bate*/
}

.btnTeclaTokenDisible {
  width: 80px;
  height: 62px;
  cursor: not-allowed;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--outline-color-default); /*verificar no figma está para ser essa com o valor --outline-color-disabled, o token não bate*/
}

.box-teclas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-limpar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-lg);
  background-color: transparent;
  border: 1px solid var(--outline-color-default); /*verificar no figma está para ser essa com o valor --outline-color-disabled, o token não bate*/
  width: 32%;
}
.btn-esqueci-senha {
  padding: var(--spacing-scale-4) var(--spacing-scale-8);
  display: flex;
  gap: var(--spacing-scale-16);
  justify-content: center;
  align-items: center;
  border: none;
  color: var(--text-color-informative);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-ms);
  background-color: transparent;
}
.btn-digitos {
  border-width: 1px !important;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--outline-color-default); /*verificar no figma está para ser essa com o valor --outline-color-disabled, o token não bate*/
  width: 31%;
}
.btn-link-login {
  color: var(--text-color-light);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-ms);
  background-color: transparent;
  border: none;
}
.btn-login {
  display: flex;
  width: 345px;
  padding: var(--spacing-scale-16) var(--spacing-scale-32);
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  border: none;
  background: var(--background-color-on-brand-primary);
  color: var(--text-color-brand-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-ms);
}

.modal-dialog {
  max-width: 612px;
}

.main-page-pj {
  background-color: var(--color-brand-16);
  padding: var(--spacing-scale-80) var(--spacing-scale-96);
}

.main-page {
  background-color: var(--color-surface-main);
  padding: var(--spacing-scale-80) var(--spacing-scale-96);
}

.instituicao .titulo {
  color: var(--text-color-light);
  font-size: var(--spacing-scale-32);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-lg);
}
.instituicao .descricao {
  color: var(--text-color-light);
  font-size: var(--font-line-height-sm);
  font-style: normal;
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-ms);
  width: 506px;
}

.login-modal {
  border-radius: var(--border-radius-xs);
  background: var(--color-transparency-surface-detail-92);
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
  padding: var(--spacing-scale-32);
  width: 612px;
}
.login-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-modal-header .titulo {
  color: var(--text-color-primary);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-ms);
}
.login-modal-body {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-scale-40);
  gap: var(--spacing-scale-16);
}
.login-modal-button {
  display: flex;
  padding: var(--spacing-scale-16);
  align-items: center;
  align-self: stretch;
  border-radius: var(--border-radius-lg);
  background: var(--color-transparency-surface-detail-92);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(32px);
  border: none;
  cursor: pointer;
  pointer-events: all;
}
.login-modal-button-text {
  color: var(--text-color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-sm-md);
  text-align: start;
}
.login-modal-button-descricao {
  color: var(--text-color-soft-dark);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-xs);
  text-align: start;
}

.digitacao .header {
  padding: 0 var(--spacing-scale-96);
  background-color: var(--color-surface-main);
}
.digitacao .header .logo {
  padding-bottom: var(--spacing-scale-40);
}
.digitacao .btn-link-change-login {
  color: var(--text-color-light);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-ms);
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
}
.digitacao .body {
  padding: var(--spacing-scale-80) var(--spacing-scale-96) 0;
}
.digitacao .body .txt-conta {
  color: var(--text-color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-md);
}
.digitacao .body .box-cpf {
  display: flex;
  flex-wrap: wrap;
}
.digitacao .body .box-cpf input {
  width: 100%;
}
.digitacao .body .box-cpf select {
  width: 100%;
}
.digitacao .body .btn-entrar {
  width: 100%;
}

.token .header {
  padding: 0 var(--spacing-scale-96);
  background-color: var(--color-surface-main);
}
.token .header .logo {
  padding-bottom: var(--spacing-scale-40);
}
.token .header .nome {
  color: var(--text-color-light);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-lg);
  letter-spacing: var(--sizing-none);
}
.token .header .cpf {
  padding-bottom: var(--spacing-scale-40);
}
.token .header .cpf label {
  color: var(--text-color-light);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-sm-md);
}
.token .header .cpf span {
  color: var(--text-color-light);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-sm-md);
  margin-left: var(--spacing-scale-8);
}
.token .btn-link-change-login {
  color: var(--text-color-light);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-ms);
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
}
.token .body {
  padding: var(--spacing-scale-80) var(--spacing-scale-96) 0;
}
.token .body .txt-conta {
  color: var(--text-color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-md);
}
.token .body .box-cpf {
  display: flex;
  flex-wrap: wrap;
}
.token .body .box-cpf input {
  width: 100%;
}
.token .body .box-teclas {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.token .body .box-teclas input, .token .body .box-teclas button {
  width: 32%;
  height: 62px;
}
.token .body .btn-entrar {
  width: 100%;
}
.token .body .btn-esqueci-senha {
  padding: var(--spacing-scale-4) var(--spacing-scale-8);
  justify-content: center;
  align-items: center;
  border: none;
  color: var(--text-color-informative);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-ms);
  background-color: transparent;
}

@media (min-width: 992px) {
  .digitacao .body .box-cpf input, .digitacao .body select {
    width: 25%;
  }
  .digitacao .body .btn-entrar {
    width: 25%;
  }
  .token .body .box-teclas {
    width: 33.3333333333%;
  }
  .token .body .box-cpf input, .token .body .box-cpf button, .token .body .box-cpf select {
    width: 33.3333333333%;
  }
  .token .body .btn-entrar {
    width: 25%;
  }
}

/*# sourceMappingURL=login.css.map */