:root {
  --corPrincipal: #193653;
  --corSecundaria: #6ec1e4;
  --corAmarela: #ffcd57;
  --corBranca: #fff;
  --corCinza: #ccc;
  --corVermelha: #ff0000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* Loading Animation */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: var(--corPrincipal);
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
}

.circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 0 5px;
  background-color: var(--corBranca);
  animation: loading 1s ease-in-out infinite;
}

.circle:nth-child(1) {
  animation-delay: 0.4s;
}

.circle:nth-child(2) {
  animation-delay: 0.2s;
}

.circle:nth-child(3) {
  animation-delay: 0s;
}

@keyframes loading {
  0% {
    transform: scale(0.5);
    opacity: 0.2;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0.2;
  }
}

/*Estilo Login e Reset */
.login {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100vh;
  width: 100%;
}

#formLogin-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100vh;
  min-height: 100vh;
  width: 372px;
  padding: 68px 36px 24px;
  background-color: var(--corBranca);
  overflow: hidden;
}

#formLogin {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#formReset {
  display: none;
  flex-direction: column;
  width: 100%;
}

#formLogin-container p {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 24px;
  text-align: left;
  color: var(--corPrincipal);
}

.spanLogin {
  font-size: 12px;
  margin-bottom: 10px !important;
  text-align: left;
  color: var(--corPrincipal);
}

#error-alert {
  background-color: #ffcccc;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--corVermelha);
  margin-bottom: 10px;
  width: 100%;
  display: none;
}

#error-alert-message {
  color: #a00000;
  font-size: 16px;
}

#error-alert-message i {
  margin-right: 10px;
}

.inputBox {
  margin-bottom: 20px;
  width: 100%;
}

.container-input {
  border: 1px solid var(--corCinza);
  color: var(--corCinza);
  border-radius: 4px;
  padding: 10px;
}

.container-input.error {
  border-color: var(--corVermelha);
}

.container-input i {
  font-size: 20px;
  width: 20px;
  text-align: center;
}

.container-input input {
  border: none;
  padding-left: 10px;
  width: calc(100% - 50px);
  height: 20px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--corPrincipal);
  box-shadow: none;
}

.container-input input:focus {
  outline: none;
}

.container-input:focus-within {
  border-color: var(--corPrincipal);
}

.container-input:focus-within i {
  color: var(--corPrincipal);
}

#togglePassword,
#togglePasswordConfirm {
  cursor: pointer;
}

.spanError {
  font-size: 14px;
  color: var(--corVermelha);
  display: none;
  margin-top: 5px;
}

.btnLogin {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 5px;
  text-transform: uppercase;
  border: 2px solid transparent;
}

.btnLogin:hover {
  box-shadow: none;
}

#voltar {
  background-color: var(--corBranca);
  color: var(--corPrincipal);
}

#voltar:hover {
  background-color: var(--corCinza);
}

#spinner,
#spinner-reset {
  display: none;
  margin-right: 10px;
}

.forgotLink {
  font-size: 14px;
  display: block;
  color: var(--corPrincipal);
  text-decoration: none;
  text-align: center;
  margin-top: 5px;
  cursor: pointer;
}

.forgotLink:hover {
  text-decoration: underline;
}

.footerLogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.footerLogin span {
  font-size: 12px;
  color: var(--corPrincipal);
  display: block;
  margin-top: -15px;
}

.logo-login {
  width: 90%;
  margin: 0 auto;
  max-width: 250px;
}

.banner {
  width: calc(100% - 372px);
  height: 100vh;
  overflow: hidden;
  text-align: center;
  background-color: transparent;
  background-image: linear-gradient(
    302deg,
    var(--corAmarela) 46%,
    var(--corSecundaria) 0%
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.banner img {
  margin-bottom: -1px;
  height: 100vh;
  object-fit: contain;
}

/* Estilo Cabeçalho */
header {
  background-color: var(--corSecundaria);
  color: var(--corPrincipal);
  padding: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.logo-horizontal {
  max-height: 80px;
  position: absolute;
  left: 60px;
  top: 10px;
  transition: all 0.3s ease-in-out;
}

header h1 {
  margin: 0;
  font-size: 2em;
  font-weight: 400;
  color: var(--corPrincipal);
}

/* Esilo Botão para abrir o menu */
#toggle-menu {
  position: fixed;
  top: 30px;
  left: 5px;
  background-color: var(--corSecundaria);
  color: var(--corPrincipal);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 2;
  border-radius: 4px;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

#toggle-menu i {
  margin-right: 0;
}

#toggle-menu:hover {
  background-color: var(--corPrincipal);
  color: var(--corSecundaria);
}

/* Estilo inicial do menu lateral */
#menu-lateral {
  position: fixed;
  top: 0;
  left: -270px;
  width: 270px;
  height: 100%;
  background-color: var(--corPrincipal);
  color: var(--corSecundaria);
  overflow-y: auto;
  overflow-x: hidden;
  transition: left 0.3s ease-in-out;
  z-index: 1;
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.logo-menu-area {
  background-color: var(--corSecundaria);
  padding: 25px 60px 21px;
  transition: all 0.3s ease-in-out;
  position: fixed;
  top: 0;
  left: -270px;
  width: 270px;
  z-index: 1;
}

.logo-menu {
  max-height: 50px;
  transition: all 0.3s ease-in-out;
}

#menu-lateral ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#menu-lateral li {
  text-align: left;
}

#menu-lateral a {
  display: flex;
  padding: 15px 15px 15px 10px;
  background-color: var(--corPrincipal);
  color: var(--corSecundaria);
  text-decoration: none;
  font-size: 20px;
  gap: 20px;
  align-items: center;
}

#menu-lateral a:hover:not(.selected):not(#userName) {
  background-color: var(--corAmarela);
  color: var(--corPrincipal);
}

#menu-lateral a#userName {
  background-color: var(--corSecundaria);
  color: var(--corPrincipal);
  cursor: default;
  padding-left: 5px;
  gap: 15px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  background-color: var(--corPrincipal);
  color: var(--corSecundaria);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

#menu-lateral a.selected {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  background-color: var(--corSecundaria);
  color: var(--corPrincipal);
}

#menu-lateral a i {
  text-align: center;
}

#menu-lateral #buttonLogout {
  cursor: pointer;
}

#menu-lateral ul li:nth-last-child(2) {
  flex: 1;
}

/* Estilo quando o menu está visível */
#menu-lateral.active,
#menu-lateral.active .logo-menu-area {
  left: 0;
}

.logo-horizontal.active {
  opacity: 0;
}

/* Estilo Principal */
main {
  padding: 20px;
}

h2 {
  color: var(--corPrincipal);
  margin-bottom: 15px;
}

.subtitulo {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.pageEmpty {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  margin: 20px auto;
}

#installApp {
  display: none;
  width: fit-content;
  margin: 0 auto 10px;
}

#installAppButton {
  gap: 20px;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

/* Esilo Tela inicial */
.subtitulo {
  font-size: 24px;
  color: var(--corPrincipal);
  text-align: center;
}

#verRelatoriosCompletos {
  display: flex;
  position: fixed;
  right: 20px;
  top: 120px;
  width: 250px;
}

/* Estilo Grafico */
.graficos-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 15px;
}

.grafico-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 550px;
  padding: 5px 10px;
  margin-top: 20px;
  border: 1px solid var(--corPrincipal);
  border-radius: 4px;
}

#totaisFinanceiro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 20px auto 0;
  width: 100%;
}

#totaisFinanceiro p {
  font-size: 18px;
  font-weight: 400;
  color: var(--corPrincipal);
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

#totaisFinanceiro p:nth-child(even) {
  background-color: #e2e2e2;
}

#totaisFinanceiro strong {
  color: var(--corPrincipal);
}

.linhaDivisao {
  background-color: var(--corPrincipal) !important;
  width: 100% !important;
  height: 3px !important;
  margin: 5px 0 !important;
}

.linhaTotalGrafico.text-success {
  background-color: #d4ffd4 !important;
  color: green !important;
}

.linhaTotalGrafico.text-danger {
  background-color: #ffd4d4 !important;
  color: red !important;
}

/* Estilo Botões */
button {
  background-color: var(--corPrincipal);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

button:focus,
button:focus-visible {
  outline: 2px solid var(--corSecundaria) !important;
  box-shadow: none !important;
}

button i {
  font-size: 1rem;
}

button span {
  font-size: 1rem;
  line-height: 1.5;
}

button:hover:not(:disabled) {
  opacity: 0.8;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

button:disabled {
  cursor: not-allowed;
  background-color: var(--corCinza) !important;
}

.edit-button:hover,
.history-button:hover {
  background-color: white;
  color: var(--corPrincipal);
  opacity: 1;
}

.delete-button {
  background-color: red;
}

.delete-button:hover {
  background-color: white;
  color: red;
  opacity: 1;
}

.delete-button.button-icon {
  background-color: transparent;
  color: red;
  border: none;
}

.delete-button.button-icon:hover {
  background-color: red;
  color: white;
  opacity: 1;
}

#closeForm {
  margin-bottom: 20px;
  display: none;
}

/* Estilo Tabelas */
.container-optios-table {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  margin: 0 auto;
}

.container-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.table-container {
  width: 100%;
  overflow: auto;
  max-height: 600px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  min-width: 1200px;
  cursor: grab;
}

#fornecedoresTable,
#calendarTable,
#prodServTable,
.container-optios-table-prodServ,
.container-optios-table-fornecedores {
  max-width: 1200px;
}

table tr {
  transition: background-color 0.3s ease;
}

table tr.hover:hover {
  background-color: var(--corSecundaria);
}

table tr:nth-child(even) {
  background-color: #e2e2e2;
}

table tr.hover:nth-child(even):hover {
  background-color: var(--corSecundaria);
}

table td {
  border-bottom: 1px solid var(--corCinza);
  padding: 5px 15px;
  text-align: left;
}

table th {
  background-color: var(--corPrincipal);
  color: white;
  text-align: left;
  padding: 15px 15px;
  font-size: 1.1rem;
}

table th i {
  margin-left: 4px;
}

table td button {
  width: 50px;
  padding: 10px;
  text-align: center;
}

.sort {
  cursor: pointer;
}

.coluna-150 {
  width: 150px;
}

.coluna-acao {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

.coluna-center {
  text-align: center;
}

.registro-entrada {
  box-shadow: inset 10px 0 0 0 green;
}

.registro-saida {
  box-shadow: inset 10px 0 0 0 red;
}

.actions {
  display: flex;
  gap: 5px;
}

/* Estilo Agendamentos */
.mes-nav {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

#mes-atual {
  text-transform: uppercase;
  color: var(--corPrincipal);
  text-align: center;
}

#mes-anterior {
  text-align: end;
}

#mes-proximo {
  text-align: start;
}

#calendarTable th,
#calendarTable td {
  width: 150px;
}

#calendarTable th {
  text-align: center;
  border: 1px solid var(--corPrincipal);
}

#calendarTable tr td:first-child .dia-mes {
  color: var(--corVermelha);
}

#calendarTable td {
  background-color: var(--corBranca);
  border: 1px solid var(--corPrincipal);
  text-align: center;
  cursor: pointer;
  color: var(--corPrincipal);
  height: 80px;
  padding: 10px 15px;
}

#calendarTable td.hoje {
  background-color: var(--corPrincipal);
  color: var(--corBranca);
}

#calendarTable td.hoje .agenda-vazia {
  color: var(--corBranca) !important;
}

#calendarTable td.fora-calendario {
  background-color: var(--corCinza);
  cursor: default;
}

#calendarTable td:hover:not(.fora-calendario) {
  background-color: var(--corSecundaria);
}

.dia-mes {
  margin-bottom: 10px;
  font-size: 1.5rem;
  font-weight: bold;
}

.agendamentos-dia:not(.agenda-vazia) {
  font-weight: bold;
}

.agenda-vazia {
  color: var(--corCinza);
}

.novo-agendamento-title {
  margin: 30px auto 10px;
  color: var(--corPrincipal);
}

.bloquear-agendamento-text {
  text-align: center;
  color: var(--corPrincipal);
  font-weight: bold;
  margin: 30px auto 0;
}

/* Estilo Rodapé */
footer {
  background-color: var(--corPrincipal);
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 5px 0 20px;
  gap: 10px;
}

footer img {
  height: 80px;
}

footer a {
  color: var(--corSecundaria);
}

footer a:hover {
  color: var(--corAmarela);
}

/*Estilo Formularios*/
.input-form {
  box-sizing: border-box;
  transition: border-color 0.1s, box-shadow 0.1s;
  border: 1px solid hsl(0, 0%, 85%);
  border-radius: 0.1875em;
  background: rgba(0, 0, 0, 0);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 0, 0, 0);
  color: inherit;
  font-size: 1.125em;
  height: 2.625rem;
  padding: 0 0.75rem;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.input-small {
  width: 150px;
  text-align: right;
}

.input-quant {
  width: 60px;
}

.buttons-form-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

input:disabled,
input[readonly] {
  cursor: not-allowed;
  background-color: var(--corCinza);
}

select:disabled {
  cursor: not-allowed;
  background-color: var(--corCinza);
}

option:disabled {
  color: var(--corCinza);
}

/*Input Filtro*/
.filtro-input {
  width: fit-content;
  display: inline-block;
}

.filtro-input input {
  width: calc(100% - 35px);
  box-shadow: none;
}

/*Formulário Registro*/
#editarRegistro,
#cancelarEdicao {
  display: none;
}

#cancelarEdicao {
  background-color: red;
}

#formPrincipal {
  display: flex;
  align-items: center;
  gap: 0 20px;
  margin-bottom: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.formPrincipal-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0 20px;
  flex-wrap: wrap;
}

.form-section {
  margin-bottom: 1rem;
  gap: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.form-section-new-input-container {
  padding: 10px;
  border-bottom: 1px solid var(--corCinza);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.form-section-new-input-container.error {
  border-color: red;
  color: red;
  background-color: var(--corBranca) 0f0;
}

.form-section-new-input-container.error input,
.form-section-new-input-container.error select {
  border-color: red;
}

.form-section-new-input,
.form-section-new-input-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  justify-content: space-between;
}

.form-section-new-input-div {
  flex-wrap: wrap;
}

.observacao,
.descricao {
  width: 100%;
  min-width: 220px;
}

#informarClienteContainer,
#informarFornecedorContainer,
#clienteContainer,
#fornecedorContainer,
#petContainer {
  display: none;
}

#informarClienteContainer label,
#informarFornecedorContainer label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

#informarClienteContainer label:hover input,
#informarFornecedorContainer label:hover input {
  opacity: 0.8;
}

#informarClienteContainer input,
#informarFornecedorContainer input {
  cursor: pointer;
  accent-color: var(--corPrincipal);
  height: 1rem;
  width: 1rem;
}

.valorTotal-container {
  display: flex;
  justify-content: space-between;
  padding: 40px 10px 10px 0;
}

.valorTotal {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delete-button-form-container {
  padding: 0;
}

.delete-button-form {
  background-color: rgba(0, 0, 0, 0);
  color: var(--corPrincipal);
  font-size: 18px;
  text-decoration: underline;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.delete-button-form:hover {
  box-shadow: none;
}

.delete-button-form:disabled {
  color: var(--corCinza);
  background-color: rgba(0, 0, 0, 0) !important;
  cursor: not-allowed;
}

.valorRegistro-container {
  display: flex;
  position: relative;
}

.valorRegistro-currency-symbol {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.125em;
}

.valorRegistro-container input {
  padding-left: 48px;
}

/*Agenda*/
.horario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  border: 1px solid var(--corPrincipal);
  min-height: 60px;
  gap: 5px;
}

.horario:nth-child(even) {
  background-color: var(--corCinza);
}

.horario span {
  font-size: 1rem;
  line-height: 1.5;
}

.horario:hover,
.horario:hover .tooltip-button {
  background-color: var(--corPrincipal);
  color: var(--corBranca);
}

.horario-container {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
  cursor: pointer;
}

.tooltip-button {
  color: var(--corPrincipal);
  display: flex;
  align-items: center;
  gap: 5px;
}

.tooltip-button i {
  text-decoration: none;
  font-size: 20px;
}

.endereco-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.endereco-container label {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: flex-start !important;
}

.endereco-container p {
  text-align: left;
}

/*Sweetalert2*/
.swal2-title {
  color: var(--corPrincipal);
}

.swal2-html-container label {
  display: flex;
  text-align: left;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--corPrincipal);
  font-weight: bold;
}

.swal2-input,
.swal2-select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.1s, box-shadow 0.1s;
  border: 1px solid hsl(0, 0%, 85%);
  border-radius: 0.1875em;
  background: rgba(0, 0, 0, 0);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 0, 0, 0);
  color: inherit;
  font-size: 1.125em;
  margin: 0 auto 20px;
}

.swal2-input:focus,
.swal2-select:focus,
.swal2-input:focus-visible,
.swal2-select:focus-visible {
  border: 2px solid var(--corPrincipal);
  box-shadow: none;
  color: var(--corPrincipal);
  outline: none;
}

.swal2-input:disabled,
.swal2-input.disabled,
.swal2-select:disabled,
.swal2-select.disabled {
  cursor: not-allowed;
  background-color: var(--corCinza);
}

#petsContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pets-container {
  display: flex;
  align-items: flex-start;
}

.pet-group {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.pet-group-input {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

.pet-inputs-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  max-width: 410px;
}

.input-pet {
  width: 45%;
  margin: 0;
}

#adicionarPet {
  background-color: rgba(0, 0, 0, 0);
  color: var(--corPrincipal);
  font-size: 18px;
  text-decoration: underline;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

#adicionarPet:hover,
#adicionarPet:focus,
#adicionarPet:focus-visible {
  box-shadow: none;
}

.swal2-confirm-button {
  background-color: var(--corPrincipal);
  color: var(--corBranca);
}

.swal2-cancel-button {
  background-color: red;
  color: var(--corBranca);
}

.swal2-timer-progress-bar {
  background-color: var(--corPrincipal) !important;
}

.swal2-icon {
  border-color: var(--corPrincipal) !important;
  color: var(--corPrincipal) !important;
}

.swal2-icon-success {
  border-color: var(--corPrincipal) !important;
}

.swal2-icon-success .swal2-success-line-tip,
.swal2-icon-success .swal2-success-line-long {
  background-color: var(--corPrincipal) !important;
}

.swal2-icon-success .swal2-success-ring {
  border-color: var(--corPrincipal) !important;
}

.swal2-icon-error {
  border-color: var(--corPrincipal) !important;
}

.swal2-icon-error .swal2-x-mark-line-left,
.swal2-icon-error .swal2-x-mark-line-right {
  background-color: var(--corPrincipal) !important;
}

.swal2-icon-warning {
  border-color: var(--corPrincipal) !important;
}

.swal2-icon-warning .swal2-warning-body,
.swal2-icon-warning .swal2-warning-dot {
  background-color: var(--corPrincipal) !important;
}

.swal-icon--warning__dot {
  background-color: var(--corPrincipal) !important;
}

/* Estilo Botoes */
.buttonsLink {
  text-decoration: none;
}

#buttonVoltarCliente,
#buttonVoltarFornecedor {
  display: none;
  display: none;
}

/* Dashboard */
canvas {
  max-width: 100%;
}

.filters {
  margin-bottom: 1rem;
  gap: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.filters div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.filters div label {
  font-weight: bold;
  font-size: 1rem;
  color: var(--corPrincipal);
}

#graficosGeral {
  margin-bottom: 40px;
}

#itemGraficos {
  display: none;
}

#grafico-item-vazio {
  display: none;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--corCinza);
}

/* Estilo Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f4f4f4;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
  border: 2px solid #f4f4f4;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--corPrincipal);
}

/* Estilo telas tamanhos menores */
@media screen and (min-width: 1240px) {
  table {
    cursor: default;
  }
}

@media screen and (max-width: 1280px) {
  header {
    height: auto;
    flex-direction: column;
  }

  .logo-horizontal {
    height: 60px;
    position: unset;
  }

  .logo-horizontal.active {
    opacity: 1;
  }

  #menu-lateral {
    padding-top: 75px;
  }

  .logo-menu-area {
    padding-bottom: 38px;
    background-color: var(--corPrincipal);
    display: none;
  }

  #verRelatoriosCompletos {
    top: 140px;
  }

  #toggle-menu.active {
    color: var(--corSecundaria);
    background-color: var(--corPrincipal);
  }

  #toggle-menu.active:hover {
    background-color: var(--corSecundaria);
    color: var(--corPrincipal);
  }
}

@media screen and (max-width: 910px) {
  #verRelatoriosCompletos {
    position: unset;
    margin: 15px auto 0;
  }
}

@media screen and (max-width: 768px) {
  .menu a {
    width: 100%;
  }
}

@media screen and (max-width: 720px) {
  .container-optios-table-financeiro {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media screen and (max-width: 700px) {
  .logo-horizontal.active {
    opacity: 0;
  }

  #menu-lateral {
    padding-top: 117px;
  }

  .logo-menu-area {
    text-align: right !important;
    background-color: var(--corSecundaria);
    display: block;
  }

  #toggle-menu.active {
    background-color: var(--corSecundaria);
    color: var(--corPrincipal);
  }

  #toggle-menu.active:hover {
    color: var(--corSecundaria);
    background-color: var(--corPrincipal);
  }
}

@media screen and (max-width: 680px) {
  .form-section-new-input-div {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .observacao,
  .descricao {
    width: 220px;
  }
}

@media screen and (max-width: 600px) {
  .valorTotal-container {
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .buttons-form-container {
    width: 100%;
    margin: 20px auto 0;
  }

  .buttons-form-container button {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .container-search {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media screen and (max-width: 480px) {
  #formLogin-container {
    width: 100%;
    overflow-y: auto;
  }

  .banner {
    display: none;
  }

  #toggle-menu {
    top: 10px;
    left: 10px;
  }

  #menu-lateral {
    padding-top: 64px;
  }

  #menu-lateral,
  .logo-menu-area {
    width: 100%;
    left: -100%;
  }

  #menu-lateral a {
    font-size: 25px;
    padding-left: 17px;
  }

  #menu-lateral a#userName {
    padding-left: 10px;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 20px;
  }

  .logo-menu-area {
    padding: 5px 10px;
  }

  .table-container {
    height: 500px;
  }

  .container-optios-table {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .filtro-input {
    width: 100%;
  }
}