@charset "UTF-8";
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css");

:root {
  --main-color-principal: rgb(247, 159, 6);
  --main-color-principal-hover: rgba(247, 159, 6, 0.8);
  --zinc-200: rgb(228, 228, 231);
  --gray-200: #E4E4E4;
  --gray-300: #85878D;
  --purple-900: #211C37;
}

* {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  border: box-sizing;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

table td, th, tr{
  font-size: 0.75rem;
}

.dashboard-cards {
  display: grid;
  overflow-x: auto;
  grid-template-columns: repeat(3,1fr);
  width: 100%;
  gap: 0.5rem;
  padding: 0.5rem;
}

.dashboard-card-item {
  width: 100%;
  border: 1px solid var(--zinc-200);
  margin: auto;
  border-radius: 6px;
  padding: 1.25rem;
  cursor: pointer;
}

.dashboard-card-item p {
  margin-bottom: 0;
}


.selectYearAndMonthContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding: 0.5rem 0 0.5rem 0;
}

.selectYearAndMonthContainer select {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.75rem;
  width: 100%;
  max-width: 12.5rem;
  text-align: center;
  font-weight: 500;
  box-sizing: border-box;
}

.selectYearAndMonthContainer option {
  font-size: 0.75rem;
}

#message-hello-dashboard {
  color: var(--purple-900);
  font-weight: 700;
}

.dashboard-align-with-icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
}

.sort-arrow {
  cursor: pointer;
}

body {
  scroll-behavior: smooth;
}

.highlight-cell {
  background-color: #dcdcdc !important;
}

.skeleton {
  padding: 5px;
  background-color: rgb(228, 228, 231);
  color: rgb(212, 212, 216);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.skeleton::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; 
  height: 100%;
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  animation: loading 2.5s infinite linear;
}

@keyframes loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@page {
  size: 210mm 297mm;
  margin: 10mm;
}

#contentPDF {
  font-family: Arial, sans-serif;
  page-break-inside: avoid;
}

#contentPDF table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  page-break-inside: avoid;
}

#contentPDF th,
#contentPDF td {
  font-size: 0.8rem !important;
  padding: 4px !important;
  text-align: center !important;
  border: 1px solid #ddd;
  page-break-inside: avoid;
}

#contentPDF th {
  background-color: var(--main-color-principal) !important;
  color: white !important;
  font-weight: bold !important;
  page-break-inside: avoid;
}

#contentPDF tr {
  page-break-inside: avoid;
}

#contentPDF tr:nth-child(even) {
  background-color: #f9f9f9;
}

#contentPDF tr:hover {
  background-color: #f1f1f1;
}

#contentPDF td {
  color: #333;
}

#contentPDF caption {
  caption-side: top;
  font-size: 1rem;
  font-weight: bold;
  padding: 5px;
  color: #333;
  page-break-inside: avoid;
}

.select2-container .select2-dropdown .select2-results__option {
  font-size: 12px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  font-size: 12px;
}
/* ========================= Utils =========================  */

.square {
  width: 20px;
  height: 30px;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
}

[my-title] {
  position: relative;
}

[my-title]::after {
  content: attr(my-title);
  opacity: 0;
  position: absolute;
  top: 110%;
  left: 50px;
  z-index: 9999;
  pointer-events: none;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 0.9em;
  color: white;
  background-color: #3f3f46;
  transition: 0.3s;
  border-radius: 5px;
  white-space: nowrap;
}

[my-title]:hover::after {
  opacity: 1;
}

.row-square {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

card-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.max-w-screen-mobile {
  width: 400px;
}

.max-w-screen-lg {
  width: 100vw;
  max-width: 70rem;
  padding: 0.75rem;
}

.max-w-screen-md {
  width: 100vw;
  max-width: 60rem;
}

.container-management {
  padding-top: 2rem;
}

.container-margin {
  margin-top: 4rem;
}
.my-table {
  width: 100%;
  font-family: "Roboto", sans-serif;
  border-collapse: collapse;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.my-table thead tr th {
  padding: 12px;
  background-color: #f8f9fa;
  color: #495057;
  text-align: center;
  font-weight: 600;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.my-table tbody td {
  padding: 8px;
  text-align: center;
  color: #495057;
  border-radius: 5px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(206, 206, 206, 0.164);
}

.custom-striped tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}

.custom-striped tbody tr td.highlight-cell {
  background-color: #dcdcdc !important;
}

.my-table tbody tr {
  border-bottom: 2px solid #e4e4e7;
}

.my-table tbody tr:hover {
  background-color: #e4e4e7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-custom {
  font-size: 0.75rem;
  border-collapse: collapse;
  max-height: 420px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  width: 100%;
}

.table-custom thead {
  background-color: var(--main-color-principal);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;

}

.table-custom th {
  padding: 0.25rem;
  text-align: left;
}

.table-custom td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table-custom tr:nth-child(even) {
  background-color: #f2f2f2;
}

.table-custom tr:hover {
  background-color: #f5f5f5;
}

@media (max-width: 768px) {
  .table-custom {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

.swal2-loader {
  border-top-color: var(--purple-900) !important; 
  border-bottom-color: var(--purple-900) !important; 
}

/* ========================= Modal =========================  */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-50px);
  }
}

.modal.fade .modal-dialog {
  animation: fadeIn 0.3s ease-out;
}

.modal.fade .modal-dialog.modal.fade.show {
  animation: fadeOut 0.3s ease-out;
}

.modal-backdrop.show {
  animation: none;
}
/* =========================================================  */
.input-wrapper {
  position: relative;
  display: inline-block;
}

.tippy-box[data-theme~="custom"] .tippy-content {
  text-align: justify;
  border-radius: 20px;
  font-size: 0.7rem;
}

.tippy-box[data-theme~="light"] .tippy-content {
  font-size: 0.7rem;
  background-color: white;
  color: black;
}

.tableFontSize {
  font-size: 0.6em;
}

.tableFontSize-l {
  font-size: 0.75em;
}

.tablePaddingSize td {
  padding: 4px;
}

.input-icons span {
  position: absolute;
}

.currency-symbol {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #6c757d;
  background-color: #f8f9fa;
  padding: 0 5px;
  pointer-events: none;
}

.input-icons span {
  position: absolute;
}

.toast.toast-success {
  background-color: #059669 !important;
  color: #e4e4e7 !important;
}

.toast.toast-error {
  background-color: #dc2626 !important;
  color: #e4e4e7 !important;
}

.toast.toast-info {
  background-color: #17a2b8 !important;
  color: #e4e4e7 !important;
}

.toast.toast-warning {
  background-color: #fbbf24 !important;
  color: #09090b !important;
}

::-webkit-scrollbar {
  width: 4px;
  /* Largura da barra de rolagem vertical */
  height: 4px;
  /* Altura da barra de rolagem horizontal */
}

/* Fundo da barra de rolagem */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* Cor de fundo da faixa da barra de rolagem */
  border-radius: 10px;
  /* Bordas arredondadas da faixa */
}

/* Cor da "polegada" da barra de rolagem */
::-webkit-scrollbar-thumb {
  background: #888;
  /* Cor da "polegada" da barra de rolagem */
  border-radius: 10px;
  /* Bordas arredondadas da "polegada" */
}

/* Cor da "polegada" da barra de rolagem quando estiver sendo hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* Cor da "polegada" quando estiver sendo hover */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Para navegadores baseados em Gecko (Firefox) */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Para navegadores baseados em Blink (Chrome, Opera) */
input[type="number"] {
  appearance: textfield;
}

.overlay-spinner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.overlay-loading-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s linear, visibility 0s linear 0.3s;
}

.spinner-image {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.overlay-loading-page.hide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s linear, visibility 0s linear 1s;
}

.btn.btn-xs {
  padding: 0.35rem 0.55rem;
  font-size: 0.65rem;
}

.auto-roll-x {
  width: 50vw;
  overflow-x: auto;
  margin: 0 auto;
}

.auto-roll-x table {
  width: 100vw;
  border-collapse: collapse;
}

.table-responsive {
  overflow-y: auto;
  max-height: 70vh;
}

.table-responsive-sm {
  overflow-y: auto;
  max-height: 60vh;
  margin-bottom: 10px;
}

.table-responsive-xs {
  overflow:auto;
  max-height: 30vh;
  margin-bottom: 10px;
}

.table thead {
  position: sticky;
  top: 0px;
  z-index: 1;
}

.loading-spinner {
  display: none;
}

.icon-size {
  font-size: 16px;
}

#menu-visibily {
  display: none;
}

.container-pages-sm {
  height: 100vh;
  width: 100vw;
  padding: 20px;
  /* padding-top: 8vh; */
  max-width: 550px;
  max-height: 480px;
  margin: 0 auto;
  font-size: 0.7rem;
}

.containerPages {
  height: 100vh;
  width: 100vw;
  padding: 20px;
  /* padding-top: 8vh; */
  max-width: 800px;
  max-height: 768px;
  margin: 0 auto;
  font-size: 0.7rem;
}

.containerSelect {
  padding: 20px;
  max-width: 800px;
  padding-top: 8vh;
  margin: 0 auto;
  font-size: 0.7rem;
}

.input-size input {
  font-size: 0.7rem;
}

.select-size select,
option {
  font-size: 0.7rem;
}
@media (max-width: 576px) {
  #search-bar-id {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
  }
  .responsive-item {
    flex: 1 1 10%;
  }
}
.text-screen-size {
  font-size: 0.7rem;
}

.box-shadow-container {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.7);
  padding: 20px;
  padding-top: 40px;
  border-radius: 10px;
}

/* ============================================================  */

/* ============================================================ */

.text-xs {
  font-size: 0.75rem; /* 12px */
}

.text-sm {
  font-size: 0.875rem; /* 14px */
}

#picture-report-dashboard {
  transition: transform 0.4s;
}

#picture-report-dashboard:hover {
  transform: scale(1.02);
}

.text-base {
  font-size: 1rem; /* 16px */
}
.text-align-left {
  text-align: left;
}

.text-lg {
  font-size: 1.125rem; /* 18px */
}

.text-xl {
  font-size: 1.25rem; /* 20px */
}

.text-2xl {
  font-size: 1.5rem; /* 24px */
}

.text-3xl {
  font-size: 1.875rem; /* 30px */
}

.text-4xl {
  font-size: 2.25rem; /* 36px */
}

.text-5xl {
  font-size: 3rem; /* 48px */
}

.text-6xl {
  font-size: 3.75rem; /* 60px */
}

.text-7xl {
  font-size: 4.5rem; /* 72px */
}

.text-8xl {
  font-size: 6rem; /* 96px */
}

.text-9xl {
  font-size: 8rem; /* 128px */
}

/* ========================= Cores =========================  */
/* Zinc Text Colors */
.text-orange-custom {
  color: rgb(231, 110, 80);
}
.text-green-custom {
  color: rgb(52, 162, 150);
}

.text-zinc-50 {
  color: rgb(250, 250, 250);
}

.text-transparent {
  color: transparent;
}

.text-zinc-100 {
  color: rgb(244, 244, 245);
}

.text-zinc-200 {
  color: rgb(228, 228, 231);
}

.text-zinc-300 {
  color: rgb(212, 212, 216);
}

.text-zinc-400 {
  color: rgb(161, 161, 170);
}

.text-zinc-500 {
  color: rgb(113, 113, 122);
}

.text-zinc-600 {
  color: rgb(82, 82, 91);
}

.text-zinc-700 {
  color: rgb(63, 63, 70);
}

.text-zinc-800 {
  color: rgb(42, 42, 47);
}

.text-zinc-900 {
  color: rgb(28, 28, 30);
}

/* Colors */
.text-amber-600 {
  color: #d97706 !important;
}

/* Colors Background Colors in RGB */
.bg-zinc-50 {
  background-color: rgb(250, 250, 250);
}

.bg-zinc-100 {
  background-color: rgb(244, 244, 245);
}

.bg-management-background {
  background-color: #f8f9fa;
}

.bg-zinc-200 {
  background-color: rgb(228, 228, 231);
}

.bg-zinc-300 {
  background-color: rgb(212, 212, 216);
}

.bg-zinc-400 {
  background-color: rgb(161, 161, 170);
}

.bg-zinc-500 {
  background-color: rgb(113, 113, 122);
}

.bg-zinc-600 {
  background-color: rgb(82, 82, 91) !important;
}

.bg-zinc-700 {
  background-color: rgb(63, 63, 70);
}

.bg-zinc-800 {
  background-color: rgb(42, 42, 47);
}

.bg-zinc-900 {
  background-color: rgb(28, 28, 30);
}

.border-zinc-50 {
  border-color: rgb(250, 250, 250);
}

.border-zinc-100 {
  border-color: rgb(244, 244, 245);
}

.border-zinc-200 {
  border-color: rgb(228, 228, 231);
}

.border-zinc-300 {
  border-color: rgb(212, 212, 216);
}

.border-zinc-400 {
  border-color: rgb(161, 161, 170);
}

.border-zinc-500 {
  border-color: rgb(113, 113, 122);
}

.border-zinc-600 {
  border-color: rgb(82, 82, 91);
}

.border-zinc-700 {
  border-color: rgb(63, 63, 70);
}

.border-zinc-800 {
  border-color: rgb(42, 42, 47);
}

.border-zinc-900 {
  border-color: rgb(28, 28, 30);
}

.hover-bg-zinc:hover {
  background-color: var(--zinc-200);
  transition: 0.3s;
}

.btn-zinc {
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
  font-size: 0.75rem;
  background-color: white;
}

.btn-zinc:hover {
  background-color: var(--zinc-200);
  transition: 0.3s;
}

#wallets-cards {
  overflow-y: scroll;
  height: 100vh;
  max-height: 40rem;
}

#department-cards {
  overflow-y: scroll;
  height: 100vh;
  max-height: 40rem;
}

.hover-bg-dark:hover {
  background-color: #343a40;
  color: #ffffff;
  transition: 0.3s;
}

.hover-zoom:hover {
  transform: scale(1.03);
  transition: 0.1s;
  transition-timing-function: linear;
}

/* ======================================================  */

/* ============================== menu.php ==============================  */
.button-menu {
  padding: 1vh 5vw;
  width: 100vw;
  font-size: 24px;
  background-color: var(--main-color-principal) !important;
  transition: 0.4s;
  color: black;
  z-index: 1001;
  position: relative !important;
}

.button-menu p {
  font-size: 0.6rem;
}

.initial-menu ul {
  padding: 0;
  margin: 0;
}

.initial-menu li {
  border-bottom: 1px solid black !important;
  list-style-type: none;
}

.material-icons {
  margin-right: 8px;
  vertical-align: middle;
}

.initial-menu {
  position: fixed !important;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  top: 20;
  overflow-x: hidden;
  transition: height 0.4s ease, opacity 0.4s ease;
}

.initial-menu a {
  text-decoration: none;
  color: white !important;
  width: 100% !important;
  display: block !important;
  height: 100% !important;
  padding-top: 15px !important;
  padding-bottom: 10px !important;
  padding-left: 5vw !important;
  box-sizing: border-box !important;
  font-size: 0.7em;
}

.initial-menu a:hover {
  background-color: rgba(155, 101, 1, 0.8) !important;
}

.menu {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  z-index: 101 !important;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0 !important;
  color: var(--bs-list-group-color);
  text-decoration: none;
  background-color: var(--bs-list-group-bg);
  border: var(--bs-list-group-border-width) solid
    var(--bs-list-group-border-color);
}

.bodyDashboard {
  position: relative;
  z-index: 1;
}

/* ===========================================================  */

/* ========================= Dashboard index.php =========================  */


.align-text-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}


#showEntryOfNotesFoTheMonthStyle {
  cursor: pointer;
}

.pointer {
  cursor: pointer;
}

.high-z-index-alert {
  z-index: 9999 !important;
}

.symbolindex {
  display: none;
}

.totalForeseenContainer {
  height: 4vh;
  line-height: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: normal;
  align-items: stretch;
}

.totalForeseenContainer p {
  font-size: 0.7em;
}

.mobile-menu-spacing {
  width: 100%;
  padding-top: 3.5rem;
}

#infoForeseen,
#infoReceived,
#infoExpenseReceived,
#infoIndex,
#infoExpenseForeseen,
#infoFinalIncomeReceived,
#infoFinalIncomeForeseen {
  cursor: pointer;
}

#showMoreInfoExpensesIndex,
#showMoreIncomesIndex {
  visibility: hidden;
}

#showMoreInfoInCardIncomes {
  display: none;
}

#showEntryOfNotesOfTheMonth {
  cursor: pointer;
}


/* ==========================================================  */
/* ====================Chart.php==================== */

.container-charts {
  display: grid;
  grid-template-columns: 1fr;
}

.charts-content {
  flex: 1;
  margin: 10px;
  min-width: 500px;
}

.containerYearly {
  padding: 20px;
  padding-top: 8vh;
  max-width: 1200px;
  overflow-y: scroll;
  font-size: 0.7rem;
}

.size-chart {
  width: 1280px;
}

/* ==========================================================  */

/* ====================Graficos Configurações==================== */

.chartExpenses {
  margin: 0 auto;
}

.containerGraphs {
  margin: 0 auto;
}

.chartDonutContainer {
  padding: 20px;
  height: auto;
}

.chartLineContainer {
  display: none;
  width: auto;
  border: 2px solid rgb(228, 228, 231);
  margin: 0 auto;
  height: 60dvh;
}

#tableIndexCategoriesInfo {
  height: 10vh;
}

#tableIndexCategoriesInfo td {
  font-size: 0.7rem;
  text-align: left;
}

.table-responsive-index {
  overflow-y: auto;
  max-height: 40vh;
  margin: 0 auto;
  margin-bottom: 30px;
  width: 95dvw;
}

/* ====================================== =========================  */

/* ========================= expenses.php =========================  */

.optionselect {
  font-size: 0.8em;
  width: 100%;
}

#filterCategories {
  width: 50vw;
  text-align: center;
}

.dashboard-info-expenses h1 {
  font-size: 1.4em;
  margin-bottom: 0;
}

.info-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

#costumerButtonTd {
  padding: 6px;
  font-size: 0.7em;
}

#buttonPaymentCashForPass:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#editExpense,
#editExpense H5,
#editExpense input,
#editExpense select,
#editExpense option {
  font-size: 0.85rem;
}

.selectInTable select {
  font-size: 0.55rem;
}

.selectInTable option {
  font-size: 0.55rem;
}

#insertExpensesForm {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
  padding: 20px;
  padding-top: 40px;
  border-radius: 10px;
}

/* =============================================================  */

/* ========================= incomes.php =========================  */

.date-range-picker {
  width: 50vw;
}

.daterangepicker .calendar-table th.next.available {
  display: block;
}

.daterangepicker .drp-calendar.left {
  display: block !important;
}

.daterangepicker .ranges,
.daterangepicker .drp-calendar {
  float: block !important;
}

/* ========================= Modal de Edit Do Incomes =========================  */

#showTax {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.item-tax {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: start;
  align-items: center;
}

.item-tax label {
  margin-bottom: 4px; /* Espaçamento entre o label e o input */
}

.item-tax input {
  margin-bottom: 8px; /* Espaçamento entre os inputs */
}

#showTax input {
  width: 100%;
  color: black;
  text-align: center;
}

/* =============================================================================  */

/* ========================= insertInvoice.php =========================  */

#listFormInsertIncomes {
  margin: 0 auto;
  padding: 20px;
  padding-top: 8vh;
  max-width: 800px;
}

#listFormInsertIncomes input {
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 0.65rem;
}

#editIncomes {
  font-size: 0.65rem;
}

#editIncomes select {
  font-size: 0.65rem;
}

#editIncomes input {
  font-size: 0.65rem;
}

/* ========================= wallet.php =========================  */
.listWallet {
  margin: 10vh auto;
  width: 80%;
}

.dashboard-wallet {
  width: 70%;
  margin: 20vh auto;
}

.dashboard-info-wallet {
  width: 90%;
  margin: 18vh auto;
  background-color: rgba(0, 0, 0, 0.144);
  border-radius: 20px;
  padding: 30px;
  gap: 10px;
}

.dashboard-info-wallet a {
  text-decoration: none;
  text-align: center;
  color: black;
}

.dashboard-info-wallet a:hover {
  color: rgba(0, 0, 0, 0.404);
}

.dashboard-info-category-item-1 {
  border: 1px solid black;
  border-radius: 8px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.button-style-cadastration {
  padding: 16px 24px;
  width: 100%;
  font-size: 2em;
  background-color: white;
  border-radius: 8px;
}

.dashboard-info-category-item-2 {
  border: 1px solid black;
  border-radius: 8px;
}

.align-button {
  text-align: center;
  margin-bottom: 10px;
}

/* =================================================================  */

/* ========================= login.php =========================  */

.login-screen {
  height: 0;
  width: 400px;
  margin: 20vh auto;
  text-align: center;
}

.login-screen > button {
  margin-top: 20px;
  width: 100%;
}

/* ======================================================================  */

/* ========================= insertExpenses.php =========================  */
.expensesForm {
  padding: 20px;
  padding-top: 8vh;
  max-width: 800px;
  margin: 0 auto;
}

.expensesForm input {
  font-size: 0.7rem;
}

.expensesForm select {
  font-size: 0.7rem;
}

#insertExpensesForm {
  font-size: 0.7rem;
}

#insertExpensesForm {
  font-size: 0.7rem;
}

/* ===================================================================  */

/* =========================management.php============================  */

.contentManagement {
  width: 100%;
}

.listManagement {
  padding-top: 20vh;
  margin: 0 auto;
  max-width: 95%;
}

.listManagement h1 {
  font-size: 1.4em;
}

#dateManagementForm {
  font-size: 0.7em;
}

#tableManagement {
  font-size: 0.8em;
}

#tableManagement th {
  background-color: var(--main-color-principal);
  color: white;
}

/* ==================================================================  */

/* ========================= categories.php =========================  */

.listCategories {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
  padding: 20px;
  padding-top: 40px;
  border-radius: 10px;
}

/* ==================================================================  */

/* ========================= report.php =========================  */

.report {
  margin: 20vh auto;
}

.formFormat input {
  width: 50vw;
  margin: 0 auto;
}

.formFormat select {
  width: 50vw;
  margin: 0 auto;
}

.reportOptions {
  font-size: 0.8rem;
}

.selectDateAndType {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* ===================================================================  */

/* ========================= importSpreadsheetIncomes.php =========================  */
.containerUploadSpreadsheet {
  margin: 0 auto;
  padding-top: 10vh;
}

.btn-choice-archive {
  cursor: pointer;
  width: 100%;
  height: 30vh;
}

.inputTypeFilePersonalized {
  color: white;

  width: 100%;
  height: 0vh;
  cursor: pointer;
}

.optionsWallet {
  width: 10vw;
}

.nfNumberEdit {
  width: 5vw;
}

.editTaxCss {
  width: 5vw;
  text-align: center;
}

#formInsertImportationSpreadsheetIncomes input {
  text-align: center;
}

#removeCsv {
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 2vh auto;
}

#parseCsv {
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 2vh auto;
}

#submitCsv {
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 2vh auto;
}

#containerAlerts {
  display: flex;
  flex-direction: row;
}

#colorAlertSuccess {
  background: rgba(26, 255, 26, 0.5);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

#colorAlertWarning {
  background: rgba(255, 204, 0, 0.5);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.alertImportSpreadsheet {
  width: 40vw;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: auto;
}

.containerDisplayAlert {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#contentDisplayAlertSpreadsheet {
  display: flex;
  flex-direction: column;
  line-height: 2vh;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: white;
}

/* =====================================================================  */

/* =======================Formulário de Cadastro Entrada De Valor De Contratante ===================  */
.formContentContractor {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
/* ===========================================================  */

/* =========================Menu teste=========================  */
.menu,
.menu-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: rgb(24, 24, 27);
  z-index: 10;
  overflow: hidden;
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}

.menu li a {
  display: inline-block;
  text-indent: -500em;
  height: 4em;
  width: 4em;
  line-height: 4em;
  text-align: center;
  color: white;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}

.menu li a:before {
  font-family: FontAwesome;
  speak: none;
  text-indent: 0em;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
}

.menu li a.search:before {
  content: "\f002";
}

.menu li a.archive:before {
  content: "\f187";
}

.menu li a.pencil:before {
  content: "\f040";
}

.menu li a.contact:before {
  content: "\f003";
}

.menu li a.about:before {
  content: "\f007";
}

.menu li a.home:before {
  content: "\f039";
}

.menu-bar li a:hover,
.menu li a:hover {
  background: rgba(0, 0, 0, 1);
  color: #fff;
}

.menu-bar {
  overflow: hidden;
  left: 4em;
  z-index: 5;
  width: 0;
  height: 0;
  transition: all 0.1s ease-in-out;
}

.menu-bar li a {
  display: block;
  height: 4em;
  line-height: 4em;
  text-align: center;
  color: white;
  text-decoration: none;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}

.menu-bar li:first-child a {
  height: 5em;
  background: rgb(24, 24, 27);
  color: #fff;
  line-height: 5;
}

.para {
  color: #033f72;
  padding-left: 100px;
  font-size: 1em;
  margin-bottom: 20px;
}

.open-menu {
  width: 9em;
  height: 100%;
  font-size: 0.8rem;
}

@media all and (max-width: 991px) {
  .container {
    margin-top: 100px;
  }

  .menu {
    height: 2.5em;
    width: 100%;
  }

  .menu li {
    display: inline-block;
    font-size: 0.6rem;
  }

  .menu-bar li a {
    width: 100%;
  }

  .menu-bar {
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0;
  }

  .open-menu {
    width: 100%;
    height: auto;
  }

  .para {
    padding-left: 5px;
  }
}

@media screen and (max-height: 34em) {
  .menu li,
  .menu-bar {
    font-size: 70%;
  }
}

@media screen and (max-height: 34em) and (max-width: 650px) {
  .menu {
    height: 3.5em;
  }
}

/* ==========================================================  */

/* ========================================================================  */

/* .dashboard-category-expenses-initial {
  width: 100%;
  margin: 18vh auto;
  background-color: rgba(0, 0, 0, 0.253);
  border-radius: 20px;
  padding: 20px;
}

.dashboard-category-initial-item {
  display: flex;
  width: 100%;
  margin: 0;
  text-align: center;
  flex-direction: column;
  margin-top: 20px;
  gap: 10px;
  padding-top: 4px;
}

.dashboard-category-initial-item-1 {
  border: 1px solid black;
  border-radius: 8px;
  background-color: white;
} */

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

/* Regras específicas para PDF */
@media print {
  .no-print {
    display: none !important;
  }
  
  .page-break {
    page-break-before: always;
  }
  
  .avoid-break {
    page-break-inside: avoid;
  }
  
  .force-break {
    page-break-after: always;
  }
}

/* Estilos para o botão de ajuda */
.help-button {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.help-button:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

.help-content {
    display: none;
    position: fixed;
    top: 70px;
    right: 20px;
    width: 300px;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 999;
}

.help-content.show {
    display: block;
}

.help-content h3 {
    margin-top: 0;
    color: #333;
    font-size: 1.2em;
    margin-bottom: 10px;
}

.help-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
    font-size: 0.9em;
}