:root {
  --primary-color: #0d6efd;
  --body-bg: #f9f6ee;
  --spinner-track-color: #f3f3f3;
}

html, body {
  background-color: var(--body-bg);
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

section {
  display: flex;
  flex-flow: column;
  height: 100vh;
  padding: 10px;
}

.appHeader {
  padding: 1rem;
}

.tab-content {
  flex: 1;
  overflow-y: scroll;
  position: relative; 
}

tr {
  cursor: default;
}

.action-btn {
  min-width: 70px;
}

.myBtn {
  width: 70px;
}

/* Filter button icon visibility */
#filterBtn .fa-filter {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

/* Button icon visibility */
.btn .fa-solid {
  opacity: 1 !important;
}

.btn:disabled .fa-solid {
  opacity: 0.65 !important; /* Default disabled opacity */
}

/* Font Awesome icon visibility */
.fa-solid::before {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Filter button icon fix */
#filterBtn .fa-solid.fa-filter::before {
  content: "\f0b0" !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* Filter button visibility override */
button#filterBtn i.fa-filter,
button#filterBtn i.fa-filter::before,
#filterBtn i {
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
}

@media (max-width: 575.98px) {
  .appHeader {
    padding: 0.5rem;
  }

  .nav-tabs .nav-link {
    padding: 0.5rem 0.75rem;
  }

  .modal-dialog.modal-sm {
    max-width: 95%;
    margin: 0.5rem auto;
  }
}