:root {
  --base-body-font-family: "InterVariable", system-ui, sans-serif;
}

@supports (font-variation-settings: normal) {
  :root {
    --base-body-font-family: "InterVariable", system-ui, sans-serif;
  }
}

body {
  font-family: var(--base-body-font-family);
}

/* .portable {
    overflow: auto;
    height: 100px;
}
.portable thead th {
    position: sticky;
    top: 0;
    z-index: 1;
} */

* {
  scrollbar-color: rgb(131, 129, 149, 0.6) transparent;
  scrollbar-width: auto;
}

label {
  font-size: 14px;
}

.pt-sm-80 {
  margin-top: 0;
}

.rounded {
  border-radius: 0.5rem !important;
}

.form-control-sm {
  border-radius: 0.5rem !important;
}

.form-select-sm {
  border-radius: 0.5rem !important;
}

.input-group .form-control-sm {
  border-radius: 0.5rem 0 0 0.5rem !important;
}

.input-group-text {
  border-radius: 0 0.5rem 0.5rem 0 !important;
}

.select2-selection {
  border-radius: 0.5rem !important;
}

.select2-search__field {
  height: 31px !important;
  border-radius: 0.5rem !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
  border-radius: 0.5rem !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search {
  padding: 0.75rem 0.75rem !important;
}

.btn-sm {
  border-radius: 0.5rem !important;
}

.nav-link {
  border-radius: 0.5rem !important;
  font-size: 14px !important;
}

.nav-link-active-bg {
  background-color: #408dfb !important;
  color: #fff !important;
}

.accordion-button {
  border-radius: 0.5rem !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.accordion-button::after {
  background-size: 15px !important;
  width: 16px !important;
  height: 16px !important;
}

.accordion-button:not(.collapsed) {
}

/* Ensure the second <a> tag is hidden by default */
li .nav-link + a {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  position: absolute; /* Ensure it's positioned relative to the list item */
  padding: 12px 0;
  right: 9px;
  top: 0;
  bottom: 0;
  z-index: 10; /* Place it above the first <a> */
}

/* Show the second <a> tag when the first <a> or second <a> is hovered */
li:hover .nav-link + a {
  opacity: 1;
  visibility: visible;
}

li .nav-link.active + a {
  opacity: 1;
  visibility: visible;
}

/* Ensure the second <a> tag stays visible on hover */
li .nav-link + a:hover {
  opacity: 1;
  visibility: visible;
}

li .nav-link + a > div {
  color: white !important;
}

li .nav-link.active + a > div {
  background-color: white !important;
  color: #408dfb !important;
}

#portable_filter > label > input[type="search"],
#budget_table_filter > label > input[type="search"],
#transaction_table_filter > label > input[type="search"],
#account_control_filter > label > input[type="search"] {
  border-radius: 0.5rem !important;
}

#portable_length > label > select,
#budget_table_length > label > select,
#transaction_table_length > label > select,
#account_control_length > label > select {
  border-radius: 0.5rem !important;
}

#portable_paginate > span > a.paginate_button,
#budget_table_paginate > span > a.paginate_button,
#transaction_table_paginate > span > a.paginate_button,
#account_control_paginate > span > a.paginate_button {
  border-radius: 0.5rem !important;
}

#portable_paginate > .paginate_button,
#budget_table_paginate > .paginate_button,
#transaction_table_paginate > .paginate_button,
#account_control_paginate > .paginate_button {
  border-radius: 0.5rem !important;
}

.card {
  border-radius: 0.5rem !important;
}

.toast {
  border-radius: 0.5rem !important;
}

.modal-dialog {
  border-radius: 0.5rem !important;
}

.modal-header {
  padding: 12px 16px !important;
}

.alert {
  padding: 8px 16px !important;
  border-radius: 0.5rem !important;
}

.alert-dismissible .btn-close {
  padding: 12px 16px !important;
}

.custom-bg-primary {
  background-color: #be9b04 !important;
}

.btn-bg-primary {
  background-color: #408dfb !important;
  border-color: #408dfb !important;
  color: #fff !important;
  border-radius: 0.5rem !important;
}

.bg-color-blue-gradient {
  background: linear-gradient(45deg, #4099ff, #73b4ff) !important;
}

.bg-color-green-gradient {
  background: linear-gradient(45deg, #28bea0, #51dbc0) !important;
}

.bg-color-yellow-gradient {
  background: linear-gradient(45deg, #ffb041, #ffc470) !important;
}

.bg-color-pink-gradient {
  background: linear-gradient(45deg, #ff5370, #ff8095) !important;
}

.bg-color-purple-gradient {
  background: linear-gradient(45deg, #845ef7, #b47cff) !important;
}

.bg-color-orange-gradient {
  background: linear-gradient(45deg, #ffb64d, #ffcb80) !important;
}

.bg-color-red-gradient {
  background: linear-gradient(45deg, #fc2549, #fc5c77) !important;
}

.bg-color-blue {
  background-color: #c2e2ff !important;
}

.bg-color-blue > div {
  color: #4099ff !important;
}

.bg-color-green {
  background-color: #c2f7e8 !important;
}

.bg-color-green > div {
  color: #28bea0 !important;
}

.bg-color-yellow {
  background-color: #fff3c0 !important;
}

.bg-color-yellow > div {
  color: #ffb041 !important;
}

.bg-color-pink {
  background-color: #ffd6e5 !important;
}

.bg-color-pink > div {
  color: #db2777 !important;
}

.bg-color-purple {
  background-color: #f0e6ff !important;
}

.bg-color-purple > div {
  color: #845ef7 !important;
}

.bg-color-orange {
  background-color: #fff0c2 !important;
}

.bg-color-orange > div {
  color: #ffb64d !important;
}

.bg-color-red {
  background-color: #ffd6e5 !important;
}

.bg-color-red > div {
  color: #fc2549 !important;
}

@media screen and (min-width: 576px) {
  .pt-sm-80 {
    margin-top: 80px;
  }
}

#contact_form_action_container {
  position: fixed;
  bottom: 0;
  left: 200px;
  width: 100%;
  max-width: calc(100vw - 200px);
  z-index: 10;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
}

@media only screen and (max-width: 992px) {
  #contact_form_action_container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    min-width: 100%;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
  }
}