:root {
  --azul-primary: #4a6da7;
  --bordo-primary: #750052;
  --laranja-primary: #ea6d01;
  --monocromatico-primary: #434343;
  --ouro-primary: #9e8100;
  --rosa-primary: #cc0098;
  --roxo-primary: #5b3c88;
  --verde-primary: #29b24a;
  --verde-escuro-primary: #007041;
  --vermelho-primary: #cc0000;

  --azul-secondary: #c2d4f1;
  --bordo-secondary: #dd68bb;
  --laranja-secondary: #ffaa5f;
  --monocromatico-secondary: #a9a9a9;
  --ouro-secondary: #ffe25f;
  --rosa-secondary: #ff8fe3;
  --roxo-secondary: #bda8e0;
  --verde-secondary: #9ff7b3;
  --verde-escuro-secondary: #4fc292;
  --vermelho-secondary: #ff5f5f;

  --azul-tertiary: #e2edff;
  --bordo-tertiary: #ffdaf5;
  --laranja-tertiary: #ffefe2;
  --monocromatico-tertiary: #e2e2e2;
  --ouro-tertiary: #fff5c7;
  --rosa-tertiary: #ffe4f8;
  --roxo-tertiary: #e5d6ff;
  --verde-tertiary: #ddffe5;
  --verde-escuro-tertiary: #c5ffe7;
  --vermelho-tertiary: #ffd8d8;

  --cinza-primary: #d8d8d8;
  --cinza-secondary: #b5b5b5;
  --cinza-tertiary: #ddd;
  --cinza-quaternary: #ececec;
  --cinza-claro-f1: #f1f1f1;
  --cinza-escuro-29: #292929;
  --cinza-escuro-12: #121212;
  --cinza-e1: #e1e1e1;
  --branco: #fff;
  --preto: #000;

  --track-background: #ddd;
}

body.theme-dark {
  --track-background: #444;
}

* {
  font-family: "Roboto", sans-serif;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  width: 100%;
}

body[data-tema="azul"] {
  --color-primary: var(--azul-primary);
  --color-secondary: var(--azul-secondary);
  --color-tertiary: var(--azul-tertiary);
}

body[data-tema="bordo"] {
  --color-primary: var(--bordo-primary);
  --color-secondary: var(--bordo-secondary);
  --color-tertiary: var(--bordo-tertiary);
}

body[data-tema="laranja"] {
  --color-primary: var(--laranja-primary);
  --color-secondary: var(--laranja-secondary);
  --color-tertiary: var(--laranja-tertiary);
}

body[data-tema="monocromatico"] {
  --color-primary: var(--monocromatico-primary);
  --color-secondary: var(--monocromatico-secondary);
  --color-tertiary: var(--monocromatico-tertiary);
}

body[data-tema="ouro"] {
  --color-primary: var(--ouro-primary);
  --color-secondary: var(--ouro-secondary);
  --color-tertiary: var(--ouro-tertiary);
}

body[data-tema="rosa"] {
  --color-primary: var(--rosa-primary);
  --color-secondary: var(--rosa-secondary);
  --color-tertiary: var(--rosa-tertiary);
}

body[data-tema="roxo"] {
  --color-primary: var(--roxo-primary);
  --color-secondary: var(--roxo-secondary);
  --color-tertiary: var(--roxo-tertiary);
}

body[data-tema="verde"] {
  --color-primary: var(--verde-primary);
  --color-secondary: var(--verde-secondary);
  --color-tertiary: var(--verde-tertiary);
}

body[data-tema="verde-escuro"] {
  --color-primary: var(--verde-escuro-primary);
  --color-secondary: var(--verde-escuro-secondary);
  --color-tertiary: var(--verde-escuro-tertiary);
}

body[data-tema="vermelho"] {
  --color-primary: var(--vermelho-primary);
  --color-secondary: var(--vermelho-secondary);
  --color-tertiary: var(--vermelho-tertiary);
}

.no-scroll {
  overflow: hidden;
}

/*Onboarding*/

#onboarding {
  position: fixed;
  display: none;
  text-align: center;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  transition: all 1s;
  opacity: 0;
}

.steps {
  display: none;
}

#step0 {
  display: block;
}

#onboarding-container {
  width: 400px;
  max-width: 90%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 5px;
  padding-bottom: 20px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-height: 90%;
  height: 75vh;
  border-radius: 5px;
}

.onboarding-container__media {
  height: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.onboarding-media {
  max-height: 400px;
  margin-top: 20px;
  max-width: 360px;
}

.onboarding-container__dot {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding: 10px 0;
}

.onboarding-dot {
  border-radius: 20px;
  height: 20px;
  width: 20px;
  margin: 10px 0;
  background-color: var(--cinza-primary);
  border: solid;
  cursor: pointer;
}

.onboarding-container__text {
  margin: 0;
  text-align: center;
  padding: 0 20px;
  line-height: 1.2;
  overflow: auto;
}

.onboarding-title {
  font-size: 1.5em;
  margin: 10px auto;
  font-weight: bold;
  text-transform: uppercase;
}

.onboarding-description {
  font-size: 1.25em;
  margin: 0 auto 50px;
}

.onboarding-container__buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0 20px;
  position: absolute;
  bottom: 0;
  width: calc(100% - 40px);
}

.onboarding-button {
  cursor: pointer;
}

/*-------------------------*/

/*Loading*/

#load {
  position: fixed;
  display: block;
  text-align: center;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.logoHeaderLoad {
  width: 100px;
  margin: auto;
}

#load1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#load2 {
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#load-chat {
  position: fixed;
  display: block;
  text-align: center;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.logoHeaderLoad-chat {
  width: 100px;
  margin: auto;
}

#load1-chat {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#load2-chat {
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/*-------------------------*/

/*Login*/
#container-title-login {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

#carrinho-login {
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  height: 50px;
}

#login-container {
  width: 400px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 20px #000000ad;
  border-radius: 10px;
  padding: 20px 0;
  margin: 20vh auto 100px;
}

#titleLogin {
  color: white;
  font-size: 24px;
  margin: 0 auto;
}

#titleLogin img {
  height: 60px;
}

#loginText {
  font-weight: bold;
  font-size: 25px;
  margin: 15px auto;
}

.container-form-login {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 80%;
  margin: 0 auto 20px;
}

.container-inputs-login {
  display: flex;
  flex-direction: column;
  width: 320%;
  gap: 10px;
}

.container-input-login {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  margin: 10px auto;
}

#login-container input {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid;
  background-color: transparent !important;
  margin: 0 !important;
  padding-left: 16px;
  width: 200px;
  text-align: left;
}

#terms-container {
  justify-content: center;
}

#buttonEntrarLogin {
  width: 80%;
}

/*-------------------------*/

/*webmail*/

#webmail-login {
  width: 90%;
  margin: 50px auto;
  text-align: center;
}

#webmail-login svg {
  max-height: 150px;
  margin-bottom: 30px;
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#webmail-login #lembrar-me {
  font-size: 14px;
  margin: 5px 0;
}

#webmail-login #lembrar-me label {
  display: inline;
}

/*-------------------------*/

/*Admin/Dashboard*/
.filter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.filter-group-container  {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.filter-container .inputMarcar {
  margin: 0;
  width: 150px;
  height: 35px;
}

.filter-container .buttonLogin {
  height: 35px;
  padding: 0 15px;
  align-self: flex-end;
}

#graficosNomes,
#graficosLocais,
#graficosTotais,
#graficosTotaisNomes {
  width: 400px;
  margin: 10px auto;
  display: inline-block;
}

#carrinhoLocalGrafic,
#carrinhoHorarioGrafic {
  margin-top: 30px;
  display: none;
  width: 400px;
}

.conteudo-grafico {
  width: 900px;
  margin: 50px auto 10px;
  text-align: center;
}

.container-grafico {
  text-align: center;
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  height: 400px;
}

.graficoVazio,
.graficoVazioTotal,
.graficoLoadTotal {
  margin: 30px auto;
  text-align: center;
  display: none;
}

.graficoVazio {
  display: none;
}

.graficoLoadTotal {
  display: block;
}

.relatorioGeral {
  margin: 0 auto 30px;
  width: 90%;
  border-radius: 5px;
}

.menuSelectRelatorio {
  display: none;
}

canvas {
  margin-bottom: 30px;
}

#listaParticipantesButton {
  margin: 0 auto;
  display: block;
  width: fit-content !important;
  text-decoration: underline;
  font-size: 1em;
}

#menu-admin-button {
  display: flex;
  align-items: center;
  padding: 15px;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  font-size: 20px;
  border-radius: 0 10px 10px 0;
  border: none;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

#menu-admin-button .button-icon-open {
  display: none;
  align-items: center;
  gap: 5px;
}

#menu-admin-button .button-icon-open span {
  margin-left: 10px;
}

#menu-admin-button .button-icon-close {
  display: flex;
  align-items: center;
}

#menu-admin-button:hover .button-icon-open {
  display: flex;
}

#menu-admin-button:hover .button-icon-close {
  display: none;
}

.container-management {
  display: flex;
  align-items: center;
  width: 320px;
  padding: 0;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  top: 0;
  left: -500px;
  z-index: 1;
  transition: left 0.5s ease-in-out;
}

.container-management.active {
  left: 0;
}

.container-management.active #menu-admin-button {
  opacity: 0;
  visibility: hidden;
}

#container-management__content {
  width: 100%;
  padding-left: 25px;
  margin: 0 0 30px;
  overflow-y: auto;
}

#container-management__content.hidden {
  display: none;
}

.container-email,
.container-logs,
.container-users,
.container-cars,
.container-congregations {
  display: flex;
  align-items: flex-start;
  width: calc(100% - 35px);
  flex-direction: column;
}

#title-users,
#title-cars,
#title-cong,
#title-mail {
  padding: 5px 5px 5px 6px;
  border-bottom: solid 1px;
  border-radius: 4px 4px 0 0;
  min-height: 23px;
}

#title-users span,
#title-cars span,
#title-cong span,
#title-mail span {
  margin: 0 0 0 10px !important;
  text-align: left !important;
  flex: 1;
}

#title-users .toggle-management,
#title-cars .toggle-management,
#title-cong .toggle-management,
#title-mail .toggle-management {
  font-size: 14px;
}

#btn-logs {
  padding: 5px 5px 5px 6px;
  border-radius: 4px;
  min-height: 23px;
}

#btn-logs span {
  margin: 0 0 0 10px !important;
  text-align: left !important;
  flex: 1;
}

#btn-new-cong {
  display: none;
}

.container-buttons {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  border-bottom: solid 1px;
}

.container-buttons span {
  text-align: left !important;
  margin: 0 0 0 10px !important;
}

.container-buttons .btn-menu-preferencias-select-list {
  padding-left: 35px;
}

#container-buttons-users.hidden,
#container-buttons-cars.hidden,
#container-buttons-cong.hidden,
#container-buttons-mail.hidden {
  display: none;
}

.btn-management {
  display: flex;
  border: none;
  cursor: pointer;
  font-size: 20px;
  gap: 5px;
  padding: 10px;
  border-radius: 4px;
}

#btn-toggle-management {
  display: flex;
  border: none;
  cursor: pointer;
  align-items: center;
  font-size: 20px;
  width: 50px;
  height: 50px;
  gap: 5px;
  padding: 10px;
  margin-top: 0;
  border-radius: 50%;
}

/*-------------------------*/

/*Tabelas*/
/*Calendário*/
.containerTable {
  text-align: center;
  width: 80%;
  margin: 30px auto;
  padding: 0;
  display: block;
  overflow: scroll;
  height: calc(100vh - 300px);
  min-height: 500px;
}

.calendar {
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 3px;
  font-weight: bold;
}

.calendar td {
  cursor: grab;
}

.calendar:active td {
  cursor: grabbing !important;
}

tbody {
  vertical-align: middle;
}

.cabecalhoTable td,
.cabecalhoTable th {
  color: var(--branco);
  font-size: 1.3125em;
  padding: 5px;
  width: 180px;
  top: 0;
  position: sticky;
}

.data,
.dia {
  width: 90px !important;
}

.bloqueado {
  cursor: not-allowed !important;
}

.calendar td:not(.nãoclicar):not(.bloqueado) {
  cursor: pointer;
}

.linhaTable {
  height: 80px;
  vertical-align: middle;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
}

.linhaClaraTable td,
.linhaEscuraTable td {
  font-size: 1em;
  padding: 5px;
}

.form-help {
  font-size: 0.875em;
  margin-bottom: 16px;
  line-height: 1.5;
}

.inputMarcar {
  display: block;
  margin: 10px auto 25px;
  height: 30px;
  max-height: 30px;
  max-width: 250px;
  padding: 0 !important;
  border: solid 1px;
  border-radius: 5px;
  font-size: 1em !important;
  font-weight: bold;
  text-align: center;
  width: 250px;
}

.inputMarcarjustify optgroup {
  text-align: justify;
}

.inputMarcarjustify optgroup option {
  text-align: center;
}

select {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

select:disabled {
  opacity: 1;
}

#dataselect,
#horaselect,
#IdInput,
#nameInput,
#userInput,
.localselect,
.disabled {
  border: none !important;
  cursor: not-allowed !important;
}

.disabled-button {
  cursor: not-allowed !important;
  opacity: 0.6;
}

.buttonsForm {
  margin: 0 auto 80px;
  gap: 10px;
  display: flex;
  justify-content: center;
}

.buttonSave {
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
}

.buttonCancel {
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
}

/*-------------------------*/

/*Logs*/
.container-table-logs {
  text-align: center;
  width: 90%;
  margin: 30px auto;
  padding: 0;
  display: block;
  overflow: scroll;
  height: calc(100vh - 200px);
}

#table-logs {
  margin: 0 auto;
  table-layout: auto;
}

.table-logs td {
  cursor: grab;
}

.table-logs:active td {
  cursor: grabbing !important;
}

.col-acao,
th.col-acao,
.col-usuario,
th.col-usuario,
.col-dataHora,
th.col-dataHora {
  width: 150px;
  white-space: nowrap;
  text-align: center;
  padding: 5px 15px !important;
}

#col-detalhe,
.col-detalhe {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  padding: 5px 15px !important;
}

.linhaTableLogs {
  height: 30px;
}

.linhaTableLogs td {
  border-left: none !important;
  border-right: none !important;
}

.item-detalhe {
  text-align: left;
}

/*-------------------------*/
/*-------------------------*/

/*Termo de uso*/
.cc-window {
  z-index: 1 !important;
}

.cc-link {
  font-weight: bold;
}

/*-------------------------*/

/*Sweet Alert 2*/
.swal2-toast-overlay.swal2-top-end {
  width: auto !important;
  background-color: rgba(0, 0, 0, 0) !important;
  pointer-events: none !important;
}
.swal2-toast-overlay.swal2-center,
.swal2-toast-overlay.swal2-top {
  width: 100% !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  pointer-events: all !important;
}

.terms-privacy .swal2-actions {
  flex-direction: column;
  align-items: flex-start;
}

.swal2-toast-overlay.swal2-center .swal2-toast,
.swal2-toast-overlay.swal2-top-end .swal2-toast,
.swal2-toast-overlay.swal2-top .swal2-toast {
  width: 360px !important;
}

.swal2-toast-overlay.swal2-center.agendamentos .swal2-toast {
  width: 90% !important;
  max-width: 500px !important;
}

.swal2-toast-overlay.swal2-toast-center-close.toast-participantes
  .swal2-popup.swal2-toast.swal2-show {
  max-height: 70vh !important;
}

.swal2-toast-overlay.swal2-toast-center-close.toast-participantes
  .swal2-popup.swal2-toast.swal2-show
  #swal2-title {
  text-align: center !important;
  font-size: 1.5em !important;
  margin: 0 !important;
}

.swal2-actions.center {
  justify-content: center !important;
}

.listaParticipantes {
  overflow: scroll !important;
  height: 500px !important;
  max-height: 60vh !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  font-size: 20px !important;
  text-align: justify !important;
}

.swal-text-agendamentos {
  margin-bottom: 20px !important;
}

.swal-text-agendamentos.info-agendamentos {
  margin-bottom: 0 !important;
  margin-top: 10px !important;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
  font-weight: bold !important;
}

.swal2-styled:hover {
  background-image: none !important;
}

.swal2-select {
  font-weight: bold !important;
}

.swal2-icon {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.swal2-toast-overlay.swal2-toast-center-close .swal2-close,
.swal2-toast-overlay.swal2-toast-center-close .swal2-title {
  grid-row: 1 !important;
}

.swal2-toast-overlay.swal2-center .swal2-close {
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
}

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

.swal-scrollable {
  max-height: 500px;
  overflow-y: auto;
}

.swal-fixed-buttons .swal2-actions {
  position: sticky;
  bottom: 0;
  z-index: 1000;
  padding-top: 10px;
}
/*-------------------------*/

/*Formularios*/
.container-form-help {
  width: 300px;
  margin: 10px auto;
}

#contato-form {
  text-align: center;
  margin: 10px auto 130px;
}

.inputFormContato {
  width: 300px !important;
  text-transform: none !important;
}

.textareaForm {
  height: auto !important;
  resize: none;
}

.inputMSG {
  height: 75px;
  text-align: left;
  padding: 10px;
  resize: none;
}

.inputMSGContato {
  height: 150px !important;
  text-align: left;
  padding: 10px;
  resize: none;
}

.buttonAnexo {
  display: flex;
  height: 50px;
  width: 150px;
  align-items: center;
  margin: 10px auto;
}

#file-name-container {
  display: none;
  padding: 10px;
}

.container-sem-senha {
  text-align: center;
}

.grecaptcha-badge {
  z-index: 1;
  bottom: 190px !important;
}

.inputCapitalize {
  text-transform: capitalize;
}

#login-form {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.container-input {
  display: flex;
  flex-direction: column;
}

.enviar-anexo {
  margin-bottom: 50px;
}

.enviar-anexo,
#anexo {
  display: none;
}

.container-input-week {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0px 15px;
  max-width: 1280px;
  margin: 0 auto;
}

.button-container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  gap: 50px;
}

.label-login {
  font-weight: bold;
}

.labelInput {
  max-width: 100%;
  min-width: 50%;
  width: 236px;
  display: block;
  text-align: left;
}

.label-week {
  font-size: 0.875em;
}

.inputLogin {
  display: block;
  margin: 10px auto 25px;
  height: 30px;
  width: 200px;
  border: solid 1px;
  border-radius: 5px;
  font-size: 0.875em;
  font-weight: bold;
  text-align: center;
  text-transform: lowercase;
}

.inputLoginPassword {
  text-transform: none;
}

.resetSenha {
  margin: 10px 0 25px;
  display: inline-block;
  width: 250px;
}

.inputEmail {
  width: 280px;
}

#togglePassword {
  margin: 0 auto;
  display: inline-block;
  width: 150px;
}

.showPass {
  margin: 0 auto 20px;
  cursor: pointer;
  display: inline-block;
}

.buttonLogin {
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
}

#spinner {
  display: none;
}

.infoSite {
  margin: 10px 20px 15px;
  line-height: 1.2;
  font-size: 0.75em;
}

.infoSite b {
  font-weight: bold;
  text-transform: uppercase;
}

.infoInput {
  margin: 0 20px;
}

#newCadastro,
#forgotPass {
  cursor: pointer;
}

.switch__container {
  margin: 0 auto 10px;
  text-align: left;
  padding: 10px;
  border-radius: 50px;
  width: 100%;
  max-width: 300px;
  display: flex;
  align-items: center;
  position: relative;
}

#enabled-status {
  margin-bottom: 0;
  padding-bottom: 0;
}

.switch {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.switch + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 32px;
  min-width: 32px;
  height: 16px;
  border-radius: 60px;
  background-color: var(--cinza-secondary);
  transition: background-color 0.4s;
}

.switch + label:after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -2.5px 0;
  border-radius: 100%;
  background-color: var(--cinza-quaternary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
  transition: transform 0.4s, background-color 0.4s;
}

.switch:checked:disabled + label {
  cursor: not-allowed;
}

.switch:disabled + label:after {
  background-color: var(--cinza-secondary) !important;
}

.switch:checked + label:after {
  transform: translateX(16px);
}

.textToggle {
  max-width: 230px;
  margin-left: 20px;
}

/*-------------------------*/

/*Menu configurações*/

.btn-fixed {
  position: fixed;
  display: flex;
  gap: 5px;
  right: 5px;
  font-size: 20px;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

#btn-logout {
  top: 15px;
}

#btn-help {
  top: 15px;
}

.btn-fixed span {
  font-size: 12px;
}

.menu-preferencias {
  z-index: 9;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 100%;
  position: fixed;
  top: 0;
  right: -500px;
  margin: 0;
  transition: right 0.5s;
}

.container-menu-preferencias {
  width: calc(100% - 20px);
  margin: 0 auto 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.btn-menu-preferencias {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  border: none;
}

.btn-menu-preferencias.reverse {
  flex-direction: row-reverse;
}

#btn-toggle-management-container {
  cursor: default;
  display: flex;
  border: none;
  font-size: 20px;
  padding: 0 0 0 15px;
  border-radius: 4px;
  margin-top: 0;
  width: calc(100% - 20px);
}

#btn-toggle-management-container span {
  text-align: left;
  flex: 1;
  margin-left: 10px;
}

.toggle-management {
  font-size: 20px;
}

.btn-menu-preferencias span {
  text-align: right;
  margin-right: 10px;
}

.btn-menu-preferencias .toggle-menu-preferencias {
  font-size: 14px;
  flex: 1;
  text-align: left;
}

.btn-options {
  padding-right: 35px !important;
  flex-direction: row-reverse;
}

.dropdown-container {
  display: block;
  border-bottom: solid 1px;
  width: 100%;
}

.dropdown-container.hidden {
  display: none;
}

.btn-menu-preferencias-select-list {
  padding: 5px;
  cursor: pointer;
  margin: 10px 0 0;
  border-radius: 4px;
}

#select-dark-mode,
#select-color-mode,
#select-font,
#agenda-config,
#notification-config {
  border-bottom: solid 1px;
  border-radius: 4px 4px 0 0;
}

#privacidade-page {
  border-radius: 4px;
}

.fa-chevron-down:before {
  content: "\f078" !important;
}

#dropdown-container-font {
  padding: 15px 0;
}

.font-size-legend {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}

#font-size-min {
  font-size: 12.8px;
}

#font-size-max {
  font-size: 24px;
}

#font-size-slider {
  accent-color: currentColor;
  width: 100%;
  background: linear-gradient(to right, currentColor 0%, #ddd 0%);
  appearance: none;
  height: 4px;
}

#font-size-slider::-webkit-slider-thumb {
  appearance: none;
  height: 16px;
  width: 16px;
  background-color: currentColor;
  border-radius: 50%;
  margin-top: -6px;
  cursor: pointer;
}

#font-size-slider::-moz-range-track {
  height: 8px;
  background-color: #ddd;
  border-radius: 5px;
}

#font-size-slider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  background-color: currentColor;
  border-radius: 50%;
  cursor: pointer;
}

#font-size-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 5px;
}

.menu-preferencias-back {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 15px);
  padding-right: 10px;
}

.menu-preferencias-back div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.menu-preferencias-back div span {
  margin-right: 10px;
}

#onMobile {
  display: none;
}

#btn-back {
  font-size: 20px;
  padding: 10px;
  border-radius: 50%;
  text-align: center;
  margin: 0;
  width: 50px;
  height: 50px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

#btn-back:hover,
#btn-toggle-management:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/*-------------------------*/

/*Menu carrinhos*/

.caixa {
  display: block;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 5px 0;
  text-align: center;
  bottom: 0;
  transition: bottom 0.5s;
}

nav {
  position: relative;
}

nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

nav li {
  display: flex;
  flex-direction: row;
  margin: 10px 5px;
}

.btn-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.5s;
  background-color: transparent;
  gap: 10px;
  text-align: center;
  width: 60px;
  cursor: pointer;
}

.btn-menu i {
  font-size: 24px;
}

.btn-menu span {
  font-size: 12px;
  font-weight: bold;
}

#admin-container {
  display: none;
}

.car:has(.car-text-dark-select) {
  cursor: default;
}

#car-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
  padding: 10px;
  width: 200px;
  bottom: 90px;
  max-height: 290px;
  transition: all 0.5s;
  visibility: hidden;
  opacity: 0;
}

#seta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 15px;
  border-color: transparent;
  position: absolute;
  bottom: -25px;
  margin-top: -30px;
  margin-left: 5px;
  clear: both;
  rotate: 180deg;
}

#setaIcon {
  font-size: 23px;
  padding-top: 12px;
  font-weight: 200;
}

.btn-car {
  border: none;
  cursor: pointer;
  background-color: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  padding: 5px;
}

.btn-car.selected {
  cursor: default;
}

.btn-car:first-child {
  margin-top: 0;
}

.car-1,
.car-2 {
  height: 40px;
}

.car-3 {
  height: 20px;
}

.car-1,
.car-3 {
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.carrinho {
  stroke-width: 5px;
}

/*-------------------------*/

/*imagens index*/

i {
  text-align: center;
  width: 30px;
}

.apk-area {
  margin: 50px auto 20px;
  height: 50px;
}

/*-------------------------*/

/*principal*/

main {
  margin-bottom: 120px;
}

strong {
  font-weight: bold;
}

em {
  font-weight: bold;
  font-style: italic;
}

.dragscroll {
  overflow: scroll;
}

.principal {
  width: 80%;
  margin: 0 auto;
}

.titulo-principal {
  text-align: center;
  font-weight: bold;
  font-size: 2em;
  margin: 10px 0 20px 0;
  padding: 10px;
  clear: left;
}

.subtitulo-principal {
  font-weight: bold;
  margin: 50px 20px 5px 20px;
}

.subtitulo-locais {
  margin-top: 30px;
}

.titulo-boasvindas {
  font-weight: bold;
  font-size: 1.25em;
  margin: 20px;
  line-height: 1.2;
  text-align: center;
}

.meus-dados {
  font-size: 1.25em;
  text-align: left;
  display: inline-block;
  line-height: 1.2;
  margin: 10px auto;
}

#meus-dados__div-principal {
  margin: 0 auto 30px;
  text-align: left;
  line-height: 1.2;
}

.meus-dados__container-avatar {
  display: flex;
  gap: 20px;
  width: 100%;
  position: absolute;
  left: 20px;
  top: 20px;
}

.meus-dados__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  overflow: hidden;
}

#meus-dados__avatar-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.meus-dados__pub-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.5;
  padding: 0 20px 20px 0;
}

#meus-dados__details.hidden {
  display: none;
}

#meus-dados__details {
  text-align: left;
  width: 100%;
}

#meus-dados__toggleDetails {
  width: fit-content;
  border-radius: 5px;
}

#meus-dados__toggleDetails.hidden {
  border-radius: 0 0 5px 5px;
  width: 100%;
}

.meus-dados__button {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  font-size: 0.875em;
  font-weight: bold;
  border: none;
  cursor: pointer;
  width: 100%;
  min-height: 30px;
  gap: 5px;
}

#meus-dados__selectFileButton {
  border-radius: 5px 5px 0 0;
}

#meus-dados__selectFileButton.hidden {
  border-radius: 0;
}

#meus-dados__edit-senha {
  text-align: center;
}

#meus-dados__uploadButton {
  padding: 10px;
  margin: 10px auto 0;
  width: 100%;
  text-transform: uppercase;
  justify-content: center;
}

#meus-dados__removeImage {
  display: none;
}

#meus-dados__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}

#meus-dados__modalUpload {
  display: none;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-height: 70%;
  z-index: 10;
  margin: 0 auto;
  padding: 10px;
  width: 800px;
  border-radius: 5px;
  background-color: var(--branco);
}

.meus-dados__modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  flex-direction: row-reverse;
}

.meus-dados__modal-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0 auto;
  text-align: center;
  width: 90%;
  text-transform: uppercase;
}

.meus-dados__modal-button-close {
  border: none;
  padding: 10px;
  border-radius: 50%;
  font-size: 25px;
  cursor: pointer;
  margin: 10px 0;
}

.cropper-container .cropper-bg {
  width: 100% !important;
}

.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}

#meus-dados__cropper-container {
  max-width: 90%;
  height: 400px;
}

.meus-dados__container-atividade {
  display: none;
  line-height: 1.2;
  margin: 30px auto 10px;
  text-align: center;
}

.meus-dados__icon {
  margin-right: 5px;
  text-align: center;
}

.meus-dados_pass-new {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0;
  justify-content: center;
  gap: 10px;
}

.meus-dados_label {
  text-align: center;
  display: block;
  margin-top: 20px;
}

.meus-dados__label:first-child {
  margin-top: 0;
}

#toggleCurrentPassword,
#toggleNewPassword,
#toggleConfirmPassword {
  cursor: pointer;
}

.meus-dados__input {
  margin: 5px 0;
  display: inline-block;
  border-radius: 4px;
}

.meus-dados__buttonsForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  text-align: right;
}

.meus-dados__buttons {
  width: 100%;
  font-weight: bold;
}

#meus-dados__quant {
  display: block;
  text-align: center;
  padding: 10px;
}

#meus-dados__emptyCar {
  display: none;
  text-align: center;
  padding: 10px;
  font-size: 2em;
  padding: 0;
  margin: 0 auto;
  max-width: 500px;
}

#meus-dados__info {
  line-height: 1.2;
  font-size: 0.75em;
  margin: 10px auto 15px;
  text-align: center;
}

#meus-dados__fileInput {
  display: none;
}

#meus-dados__grafico {
  text-align: center;
  width: 100%;
  padding: 0;
  display: block;
  overflow: scroll;
  margin-bottom: 30px;
}

#graficoUser {
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 1px;
  position: relative;
  height: 100%;
  width: 100%;
}

.buttonHistorico {
  height: 40px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
  margin: 0 auto;
  padding: 5px;
  width: 170px;
  height: auto;
}

#btnHistorico,
#btnTresMeses {
  display: none;
}

.box-agendamento {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  line-height: 1.2;
  text-align: center;
  gap: 5px;
  cursor: pointer;
  min-height: 80px;
}

.box-agendamento div {
  padding: 5px;
  width: 50%;
}

.box-agendamento:only-of-type {
  border-radius: 5px !important;
}

.box-agendamento:first-of-type {
  border-radius: 5px 5px 0 0;
}

.box-agendamento:last-of-type {
  border-radius: 0 0 5px 5px;
}

.congregacoes {
  font-size: 1.125em;
}

.boasvindas {
  margin: 15px 0;
  line-height: 1.2;
}

.boasvindas-login {
  text-align: center;
}

.boasvindas-relatorio {
  margin: 15px 20px;
  line-height: 1.2;
  text-align: center;
}

.itens {
  margin: 5px auto;
  line-height: 1.2;
}

.itens:before,
.sub-itens:before {
  content: "▸ ";
}

.lista-horarios {
  text-align: center;
  font-weight: bold;
  font-size: 1.25em;
  margin: 10px auto;
  width: 825px;
}

.descricão-lista-horarios {
  text-align: center;
  font-style: italic;
  width: 825px;
  margin: 10px auto;
  line-height: 1.2;
}

.endereco {
  font-weight: bold;
  margin: 0 auto;
  display: none;
}

#lista {
  background: white;
  margin: 15px 20px;
  text-align: center;
  text-transform: uppercase;
  height: 25px;
  border-radius: 5px;
  font-weight: bold;
  padding: 4px 5px 5px;
  text-align: center;
  border: none;
}

/*-------------------------*/

/*Links*/

.dark-link {
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
}

.help-link {
  cursor: help;
}

/*-------------------------*/

/*Botões*/

.formulario {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 1em;
  padding: 15px;
  margin: 30px auto;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  width: auto;
  cursor: pointer;
}

#installApp,
#allowNotifications,
#meusAgendamentos {
  display: none;
  text-align: center;
}

.imgButtonL,
.imgButtonR {
  align-self: center;
  width: 20px;
  position: absolute;
}

.imgButtonL {
  left: 10px;
}

.imgButtonR {
  right: 10px;
}

.onDesktop {
  display: block;
}

.onMobile {
  display: none;
}

/*-------------------------*/

/*Página ajuda*/

.help-caixa {
  width: 90%;
  margin: 20px auto;
  text-align: center;
  align-items: center;
}

.help-video {
  width: 480px;
  margin: 10px auto;
  align-content: center;
  display: block;
}

.help-video-pc {
  width: 100%;
  margin: 10px auto;
  align-content: center;
  display: block;
}

/*-------------------------*/

/*Página política de privacidade*/

.paragrafo-privacidade {
  text-align: justify;
}

.recuo {
  margin-left: 30px;
}

.recuo2 {
  margin-left: 40px;
}

.cookie {
  margin-top: 40px;
}

/*-------------------------*/

/*ChatBot*/
.chat-container {
  width: 90%;
  max-width: 400px;
  border-radius: 10px;
  flex-direction: column;
  height: 80vh;
  max-height: 700px;
  overflow: hidden;
  margin: 0 auto;
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  visibility: hidden;
  opacity: 0;
  display: none;
}

.chat-header {
  padding: 10px;
  text-align: center;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  gap: 5px;
}

.chat-header h1 {
  flex: 1;
  text-align: left;
}

.chat-header button {
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.chat-body {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  padding-bottom: 10px;
}

.chat-message {
  position: relative;
  margin: 10px 0;
  width: fit-content;
  padding: 10px;
  max-width: 80%;
  display: block;
  font-size: 1em;
  line-height: 1.2;
}

.bot-message {
  align-self: flex-start;
  margin-left: 12px;
  border-radius: 4px 8px 8px 8px;
}

.bot-message::before {
  content: "";
  position: absolute;
  top: 3px;
  left: -18px;
  border-width: 10px;
  border-style: solid;
}

.user-message {
  margin-left: auto;
  margin-right: 12px;
  border-radius: 8px 4px 8px 8px;
}

.user-message::before {
  content: "";
  position: absolute;
  top: 3px;
  right: -18px;
  border-width: 10px;
  border-style: solid;
}

#chatInfo {
  text-align: center;
  padding: 10px;
  font-size: 0.875em;
  line-height: 1.5;
  display: none;
}

.chat-footer {
  padding: 10px;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.chat-footer button {
  padding: 8px 12px;
  font-size: 1em;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 50%;
}

.chat-footer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dateDescription {
  margin: 5px auto;
  padding-bottom: 10px;
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 0.75em;
  text-transform: uppercase;
}

.header-hour {
  margin: 10px auto;
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 0.875em;
}

.carousel-container {
  overflow: scroll;
  max-width: 100%;
}

.carousel-container.grab {
  cursor: grab;
}

.carousel-container.grab:active {
  cursor: grabbing;
}

.carousel {
  display: flex;
  gap: 10px 5px;
  padding: 10px 0;
  margin: 0 auto;
}

#hourCarousel {
  overflow: scroll;
  flex-wrap: wrap;
}

#hourCarousel:has(.chat-message) {
  padding: 0;
}

#hourCarousel .carousel {
  gap: 10px 5px;
}

#hourCarousel .chat-message {
  max-width: 100%;
  width: 100%;
  text-align: center;
  font-weight: bold;
  padding: 30px 0;
  margin: 0 auto;
}

.carousel-names-container,
.carousel-places-container,
.carousel-confirm-container {
  display: none;
}

.carousel-names-container {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

.carousel-names-container #namesCarousel {
  flex-wrap: wrap;
}

.carousel-names-container #namesCarousel .carousel-item {
  max-width: 25%;
  min-width: 25%;
  min-height: 48px;
  line-height: 1.5;
  padding: 5px 10px;
}

.carousel-names-container #namesCarousel .carousel-item.selected {
  pointer-events: all;
}

.item-date hr {
  width: 100%;
  margin: 0;
}

.carousel-item {
  width: fit-content;
  min-width: 50px;
  padding: 10px;
  background: #f0f0f0;
  border-radius: 8px;
  text-align: center;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.carousel-item.selected {
  pointer-events: none;
}

.carousel-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#hourCarousel .carousel-item {
  min-width: 26%;
  max-width: 26%;
}

.carousel-item .dia-semana {
  font-weight: bold;
  font-size: 0.875em;
}

.carousel-item .dia-numero {
  font-weight: bold;
  font-size: 1.25em;
}

.carousel-item .mes {
  font-size: 0.75em;
  text-transform: uppercase;
}

/*-------------------------*/

/*Escondendo scrollbar*/

::-webkit-scrollbar {
  display: none;
}

/*-------------------------*/

/*Acessando em resolução menor*/

@media screen and (max-width: 1200px) {
  nav a {
    display: inline;
    font-size: 0.938em;
    margin: 0 2px;
  }

  h1 {
    text-align: center;
  }

  nav {
    position: static;
  }

  .principal,
  .lista-horarios,
  .descricão-lista-horarios {
    width: 90%;
  }

  .titulo-principal,
  .container-title__text {
    font-size: 1.5em;
  }

  .titulo-boasvindas {
    font-size: 1em;
  }

  .congregacoes {
    font-size: 0.875em;
  }

  .meus-dados__container-avatar {
    position: relative;
    left: 0;
    top: 0;
  }

  .meus-dados__pub-info {
    padding: 0;
  }

  .conteudo-grafico {
    width: 90%;
  }
}

@media screen and (max-width: 900px) {
  .meus-dados__conteudo-grafico {
    width: 100%;
  }

  #meus-dados__modalUpload {
    width: 90%;
  }

  .onMobile {
    display: block;
  }

  .onDesktop {
    display: none;
  }
}

/*Acessando pelo celular*/

@media screen and (max-width: 480px) {
  .container-grafico,
  .conteudo-grafico,
  #carrinhoLocalGrafic,
  #carrinhoHorarioGrafic,
  #graficosNomes,
  #graficosLocais,
  #graficosTotais,
  #graficosTotaisNomes,
  .graficoVazio {
    width: 90%;
  }

  #login-container {
    width: 90%;
  }

  .menu-preferencias {
    width: 100%;
  }

  #onDesktop {
    display: none;
  }

  #onMobile {
    display: block;
  }

  .help-video {
    width: 90%;
  }

  .containerTable {
    width: 90%;
  }

  .container-form-help {
    width: 80%;
  }

  .btn-fixed {
    right: 0;
  }

  .container-management {
    width: 100%;
  }

  #onboarding-container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
  }

  .onboarding-container__buttons {
    width: 100%;
  }
}

@media screen and (max-width: 400px) {
  nav ul {
    gap: unset;
  }

  #titleLogin {
    font-size: 20px;
  }

  #titleLogin img {
    height: 48px;
  }

  #login-container input {
    width: 80%;
  }

  #terms-container {
    width: 60%;
  }
}

@media screen and (max-height: 700px) {
  .onboarding-container__media {
    height: 60vh;
  }
  .onboarding-media {
    max-height: calc(60vh - 80px);
  }
  .onboarding-container__text {
    height: calc(40vh - 80px);
  }
  .onboarding-title {
    margin-bottom: 10px;
    max-height: 10vh;
  }
  .onboarding-description {
    overflow: scroll;
    height: calc(30vh - 80px);
  }
}

@media screen and (max-height: 400px) {
  .onboarding-container__media {
    height: 40vh;
  }
  .onboarding-media {
    max-height: 35vh;
  }
  .onboarding-container__dot {
    display: none;
  }
  .onboarding-container__text {
    height: calc(60vh - 80px);
  }
  .onboarding-title {
    margin-bottom: 10px;
    max-height: 20vh;
  }
  .onboarding-description {
    overflow: scroll;
    height: calc(40vh - 80px);
  }
}

@media screen and (max-width: 350px) {
  nav a {
    font-size: 10px;
    margin: 0;
  }
  .meus-dados__input {
    width: 150px;
  }

  #titleLogin {
    font-size: 16px;
  }

  #buttonEntrarLogin {
    width: 50%;
  }
}