/* :root {
  --primary-dark: #9acd32;
  --primary-light: #f1ffd3;
  --danger-dark: rgba(195, 10, 7, 1);
  --danger-light: rgba(195, 10, 7, 0.1);
  --success-dark: rgba(32, 116, 74, 1);
  --success-light: rgba(32, 116, 74, 0.1);
  --info-dark: #3b82f6;
  --info-light: #3c83f61a;

  --secondary-dark: #6c6c6c;

  --nav-text-light: rgba(241, 255, 211, 1);

  --dark-nav: rgba(29, 36, 17, 1);
  --dark-text: #1d2411;
  --secondary: #6C6C6C;
  --text-light: #6C6C6C;
  --text-dark: #000;

  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
} */



.table-responsive {
  min-width: 900px !important;
}

.custom-x-overflow {
  overflow-x: auto !important;

  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  /* Track */
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: #c9c9c9;
  }

  /* Handle on hover */
  &::-webkit-scrollbar-thumb:hover {
    background: #a3a3a3;
  }
}

&::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/* Track */
&::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
&::-webkit-scrollbar-thumb {
  background: #c9c9c9;
}

/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;
}



.page-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-dark);
  font-family: 'Instrument Sans';
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  min-width: fit-content;
}


.page-subtitle {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-dark);
  font-family: 'Instrument Sans';
  min-width: fit-content;
}


.custom-btn {
  border-radius: 0px !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  padding: 4px 12px !important;
  background-color: #fff !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--border-color) !important;
}

.custom-btn:hover {
  border: 0px !important;
  background: #ababab !important;
  color: #fff !important;
}

.custom-btn.active {
  background-color: #1c1f15 !important;
  color: #fff !important;
}

.quick-graph-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 0px;

  &.income-btn {
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
  }

  &.expense-btn {
    color: var(--text-light);
    border: 2px solid var(--text-light);
  }

  &.profit-btn {
    color: var(--primary-dark);
    border: 2px solid var(--primary-dark);
  }
}


.quick-graph-btn.expense-btn input:checked+.check-btn {
  background-color: var(--text-light);
}

.quick-graph-btn.income-btn input:checked+.check-btn {
  background-color: var(--text-dark);
}

.quick-graph-btn.profit-btn input:checked+.check-btn {
  background-color: var(--primary-dark);
}

/* ⚙️ Set B: unchecked state */
.quick-graph-btn .check-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid currentColor;
  transition: all 0.3s ease;
}

.notification-btn {
  border: 0px;
  color: var(--text-dark);
}

.download-btn {
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border: 0px !important;
  border-radius: 0 !important;
  background-color: #000 !important;
  color: #fff !important;
}

.expandable .level-1 {
  padding: 12px 12px 12px 0px;

  & h2 {
    font-size: 18px;
    font-weight: 500;
    font-family: 'Instrument Sans';
    letter-spacing: normal;
    margin: 0;
  }
}

.level-2-group {
  padding: 0px !important;
  gap: 5px !important;
  display: flex !important;
  flex-direction: column !important;
}

.expandable .level-2 {
  padding: 0 !important;
  background: var(--chart-card) !important;
  border-left: 3px solid var(--primary-dark) !important;
  border-radius: 0px !important;

  & .level-2-main-div {
    padding: 6px 12px 6px 14px !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    & h2 {
      font-size: 14px;
      font-weight: 400;
      font-family: 'Instrument Sans';
      letter-spacing: normal;
      margin: 0;
      text-align: left;
    }
  }

}

.custom-tree li {
  list-style: none !important;

  &::after,
  &::before {
    content: unset !important;
  }
}

.tree-right-side {
  max-width: 650px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 6px;

  & .account-statement {
    max-width: 340px;
    width: 100%;
    display: flex;
    justify-content: center;

    & .account-statement-open {
      flex-grow: 1;
      width: 50%;
      text-align: start;
      padding-right: 8px;
      font-size: 13px;
      font-family: 'Instrument Sans';
      font-weight: 300;
    }

    & .account-statement-close {
      flex-grow: 1;
      width: 50%;
      text-align: end;
      padding-left: 8px;
      border-left: 1px solid #ccc;
      font-size: 13px;
      font-family: 'Instrument Sans';
      font-weight: 300;

      &.grow-full {
        width: 100%;
        flex-grow: 2;
      }
    }

    & .account-statement-middle {
      flex-grow: 1;
      width: 50%;
      text-align: center;
      padding-left: 8px;
      padding-right: 8px;
      border-left: 1px solid #ccc;
      font-size: 13px;
      font-family: 'Instrument Sans';
      font-weight: 300;
    }
  }
}

.level-1 .tree-right-side {
  & .account-statement {
    & .account-statement-open {
      font-size: 13px !important;
      font-weight: 500 !important;
    }

    & .account-statement-middle {
      font-size: 13px !important;
      font-weight: 500 !important;
    }

    & .account-statement-close {
      font-size: 13px !important;
      font-weight: 500 !important;
    }
  }
}

@media (max-width: 1500px) {
  .tree-right-side {
    max-width: 580px;
    min-width: 580px;
  }
}

@media (max-width: 1366px) {
  .tree-right-side {
    max-width: 500px;
    min-width: 500px;
  }
}

@media (max-width: 1200px) {
  .tree-right-side {
    max-width: 420px;
    min-width: 420px;
  }
}


.primary-btn {
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--primary-dark) !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  border-radius: 0px !important;
  color: var(--Primary-btn-color) !important;
  font-family: 'Instrument Sans' !important;
}

.primary-btn-2 {
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--primary-dark) !important;
  padding: 3px 13px 3px 12px !important;
  font-size: 14px !important;
  border-radius: 0px !important;
  color: var(--Primary-btn-color) !important;
  font-family: 'Instrument Sans' !important;
  border: 0;
  height: 28px;
}

.secondary-btn {
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--secondary-dark) !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  border-radius: 0px !important;
  color: #fff !important;
  font-family: 'Instrument Sans' !important;
}

.secondary-btn-2 {
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--secondary-dark) !important;
  padding: 3px 13px 3px 12px !important;
  font-size: 14px !important;
  border-radius: 0px !important;
  color: #fff !important;
  font-family: 'Instrument Sans' !important;
  border: 0;
  height: 28px;
}

.primary-badge {
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--primary-dark) !important;
  padding: 0px 4px !important;
  font-size: 11px !important;
  border-radius: 0px !important;
  color: var(--Primary-btn-color) !important;
  font-family: 'Instrument Sans' !important;
  font-weight: 300 !important;
}

.success-btn {
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--success-dark) !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  border-radius: 0px !important;
  color: #fff !important;
  font-family: 'Instrument Sans' !important;
}

.danger-btn {
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--danger-dark) !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  border-radius: 0px !important;
  color: #fff !important;
  font-family: 'Instrument Sans' !important;
}


.custom-dropdown .dropdown-item {
  padding: 10px 20px;
  border-radius: 0px;
  font-family: 'Instrument Sans' !important;

  &.add {
    background: var(--primary-light);
    color: var(--primary-dark);
  }

  &.delete {
    background: var(--danger-light);
    color: var(--danger-dark);
  }

  &.edit {
    background: var(--info-light);
    color: var(--info-dark);
  }
}


.tree ul ul li:hover {
  background: var(--chart-card) !important;
}

.level-3-group {
  padding-top: 0px !important;
  gap: 0px !important;
  flex-direction: column !important;
}

.expandable .level-3 {
  padding: 0 !important;
  background: var(--chart-card) !important;
  border-radius: 0px !important;

  & .level-3-main-div {
    padding: 6px 12px 6px 14px !important;

    & h2 {
      font-size: 13px;
      font-weight: 300;
      font-family: 'Instrument Sans';
      letter-spacing: normal;
      margin: 0;
    }
  }

}


.main-content {
  padding: 20px !important;
}

.custom-page-header {
  display: flex !important;
  align-items: center !important;
  gap: 50px !important;
  margin-bottom: 24px !important;
  font-family: 'Instrument Sans' !important;

  & .nav-tabs {
    display: flex !important;
    gap: 2px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100%;
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 1px !important;

    & li {
      list-style: none !important;
      margin-bottom: 2px !important;

      & a {
        border-radius: 0;
        color: var(--text-light);
        font-size: 20px;
        font-family: 'Instrument Sans' !important;
        font-weight: 500 !important;
        border: 1px solid transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 6px 20px;

        &:hover {
          border: 1px solid var(--primary-dark) !important;
          border-bottom: 0px !important;
          border-radius: 8px 8px 0 0;
          background: var(--body-bg) !important;
          color: var(--primary-dark);
        }

      }

      &.active {
        & a {
          border: 1px solid var(--primary-dark) !important;
          border-bottom: 0px !important;
          border-radius: 8px 8px 0 0;
          background: var(--body-bg) !important;
          color: var(--primary-dark);

          &:hover {
            border: 1px solid var(--primary-dark) !important;
            border-bottom: 0px !important;
            border-radius: 8px 8px 0 0;
            background: var(--body-bg) !important;
            color: var(--primary-dark);
          }
        }
      }
    }
  }
}

.main-content fieldset {
  display: block;
  padding: 24px 0;
  border: none;
  background: transparent;
  position: relative;
}

.account-image-upload {
  color: black;
  width: 180px;
  height: 180px;
  display: flex;
  border-radius: 50%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background: #fff;
  margin: 0 auto;
  border: 1px solid var(--border-color) !important;
}

.main-content .label {
  display: flex;
  margin-bottom: 8px;
  line-height: 19px;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-dark);
  text-align: left;
  white-space: normal;
  font-family: 'Instrument Sans';
  align-items: center;
  padding: 0px !important;
}

.main-content .label.radio {
  display: flex;
  line-height: 23px;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-dark);
  text-align: left;
  white-space: normal;
  font-family: 'Instrument Sans';
  align-items: center;
  padding-left: 26px !important;
}

.main-content .radio i,
.main-content .radio input:checked+i {
  border-color: var(--primary-dark) !important;
}

.main-content .radio input+i:after {
  content: '';
  top: 0px;
  left: 0px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--primary-dark);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjYiIHZpZXdCb3g9IjAgMCA4IDYiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik03LjY5NDUyIDAuMjIyMTc1QzcuOTYzMDEgMC40OTA2NTcgNy45NjMwMSAwLjkyNTk2NCA3LjY5NDUyIDEuMTk0NDJMMy4xMTExOSA1Ljc3NzVDMi44NDI3IDYuMDQ2MjQgMi40MDc0NiA2LjA0NjI0IDIuMTM4OTQgNS43Nzc1TDAuMzA1NjEgMy45NDQ0MkMwLjAzNzEyNyAzLjY3NTkzIDAuMDM3MTI3IDMuMjQwNjkgMC4zMDU2MSAyLjk3MjJDMC41NzQxMDIgMi43MDM3MSAxLjAwOTQgMi43MDM3MSAxLjI3NzkgMi45NzIyTDIuNjI1MDggNC4zMTkzM0w2LjcyMjMgMC4yMjIxNzVDNi45OTA4IC0wLjA0NjMwNzYgNy40MjYwNCAtMC4wNDYzMDc2IDcuNjk0NTIgMC4yMjIxNzVaIiBmaWxsPSIjMUQyNDExIi8+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: center;
}

.main-content input[type="text"],
.main-content input[type="number"],
.main-content input[type="password"],
.main-content input[type="email"],
select {
  height: 34px !important;
  display: flex;
  align-items: center !important;
  border-radius: 0px !important;
  padding: 8px 12px;
  font-size: 13px !important;
  font-family: 'Instrument Sans' !important;
  font-weight: 400 !important;
}

.select2-container .select2-choice,
.select2-selection {
  height: 34px !important;
  display: flex;
  align-items: center !important;
  border-radius: 0px !important;
  padding: 0px 12px;
  font-size: 14px !important;
  font-family: 'Instrument Sans' !important;
  font-weight: 400 !important;
}

.select2-container--open .select2-selection,
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border: 1px solid var(--primary-dark);
  outline: 0;
}

.select2-container--open .select2-dropdown,
.select2-drop-active {
  border: 1px solid var(--primary-dark);
  border-radius: 0px;
  padding: 0px;
  overflow: hidden;
}

.select2-container {
  margin: 0;
  position: relative;
  display: inline-block;
  zoom: 1;
  vertical-align: middle;
  margin-top: 0px;
}

.select2-search {
  display: inline-block;
  width: 100%;
  min-height: 26px;
  margin: 0;
  padding-left: 9px;
  padding-right: 9px;
  position: relative;
  z-index: 10000;
  white-space: nowrap;
  margin-top: 10px;
}

.select2-search input {
  width: 100%;
  height: 100%;
  max-height: 30px;
  padding: 6px 20px 5px 10px;
  margin: 0;
  outline: 0;
  font-family: 'Instrument Sans' !important;
  font-size: 14px;
  border: 1px solid #c5c5c5;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #fff;
  border-radius: 0px;
}

.select2-results {
  max-height: 200px;
  padding: 0;
  margin: 8px 0 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
}

.select2-results li {
  padding: 6px 10px !important;
  font-family: 'Instrument Sans' !important;
  font-size: 13px;
  font-weight: 300;
}

.select2-results .select2-highlighted,
.select2-results__option--highlighted {
  background: var(--primary-dark);
  color: #fff;
  font-family: 'Instrument Sans' !important;
  font-size: 14px;
  /* padding: 4px !important; */
}

.select2-results {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  /* Track */
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: #c9c9c9;
  }

  /* Handle on hover */
  &::-webkit-scrollbar-thumb:hover {
    background: #a3a3a3;
  }
}

.select2-search:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  content: "\f002";
  top: 50%;
  margin-top: -7px;
  right: 18px;
  color: #999595 !important;
}

.select2-container .select2-choice .select2-arrow,
.select2-selection__arrow {
  display: inline-block;
  width: 50px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-left: none;
  background: transparent;
}

.select2-container .select2-choice .select2-arrow b,
.select2-selection__arrow b {
  width: 100%;
  height: 100%;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  font-size: 14px;
  top: 5px;
}

.select2-container .select2-choice .select2-arrow b:before,
.select2-selection__arrow b:before {
  content: "\f107";
  width: 100%;
  height: 100%;
  text-align: center;
  display: block;
  font-size: 18px;
}

.main-content input[type="text"].icon-left,
.main-content input[type="number"].icon-left,
.main-content input[type="password"].icon-left,
.main-content input[type="email"].icon-left {
  padding-left: 30px !important;
}

.main-content input[type="text"].icon-right,
.main-content input[type="number"].icon-right,
.main-content input[type="password"].icon-right,
.main-content input[type="email"].icon-right {
  padding-right: 30px !important;
}

.main-content .input-icon {
  position: absolute;
  width: 26px;
  height: 34px;
  display: flex;
  justify-content: end;
  align-items: center;
  left: 0;

  & svg {
    width: 16px !important;
    height: 16px !important;
  }
}

.main-content .checkbox input:focus+i,
.main-content .input input:focus,
.main-content .radio input:focus+i,
.main-content .select select:focus,
.main-content .textarea textarea:focus,
.main-content .toggle input:focus+i,
.main-content .checkbox:hover i,
.main-content .input:hover input,
.main-content .radio:hover i,
.main-content .select:hover select,
.main-content .textarea:hover textarea,
.main-content .toggle:hover i {
  border-color: var(--primary-dark) !important;
}

.main-content footer {
  display: flex;
  padding: 0;
  border-top: none;
  background: transparent;
  justify-content: end;
  gap: 8px;
  align-items: center;
  margin-top: 16px !important;
}

.main-content .hasinput input[type="text"],
.main-content .hasinput input[type="number"],
.main-content .hasinput input[type="password"],
.main-content .hasinput input[type="email"] {
  padding: 6px !important;
  height: 32px !important;
  border-radius: 0px !important;
  font-size: 12px !important;
}


#datatable_fixed_column_wrapper,
#datatable_fixed_column2_wrapper,
#datatable_fixed_column3_wrapper {
  & .buttons-copy {
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    background: var(--primary-dark) !important;
    padding: 3px 12px !important;
    font-size: 14px !important;
    border-radius: 0px !important;
    color: var(--Primary-btn-color) !important;
    font-family: 'Instrument Sans' !important;
    height: 34px !important;
    border: 0 !important;
    margin: 0 !important;
  }

  & .buttons-pdf {
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    background: var(--danger-dark) !important;
    padding: 3px 12px !important;
    font-size: 14px !important;
    border-radius: 0px !important;
    color: #fff !important;
    font-family: 'Instrument Sans' !important;
    height: 34px !important;
    border: 0 !important;
    margin: 0 !important;
  }

  & .buttons-excel {
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    background: var(--success-dark) !important;
    padding: 3px 12px !important;
    font-size: 14px !important;
    border-radius: 0px !important;
    color: #fff !important;
    font-family: 'Instrument Sans' !important;
    height: 34px !important;
    border: 0 !important;
    margin: 0 !important;
  }

  & .buttons-collection {
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    background: #fff !important;
    padding: 3px 12px !important;
    font-size: 14px !important;
    border-radius: 0px !important;
    color: #000 !important;
    font-family: 'Instrument Sans' !important;
    height: 34px !important;
    border: 0 !important;
    margin: 0 !important;
    min-width: 220px !important;
    border: 1px solid var(--border-color) !important;
  }
}

div.dt-button-background {
  background: transparent !important;
}

div.dt-button-collection {
  position: absolute !important;
  width: 220px !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  padding: 0px !important;
  border: 1px solid #ccc !important;
  border: 1px solid #ccc !important;
  background-color: white !important;
  overflow: hidden !important;
  z-index: 2002 !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;

  & div[role='menu'] {
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
}


div.dt-button-collection button.dt-button:active:not(.disabled),
div.dt-button-collection button.dt-button.active:not(.disabled),
div.dt-button-collection div.dt-button:active:not(.disabled),
div.dt-button-collection div.dt-button.active:not(.disabled),
div.dt-button-collection a.dt-button:active:not(.disabled),
div.dt-button-collection a.dt-button.active:not(.disabled) {
  background: var(--primary-dark) !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--Primary-btn-color) !important;
  font-size: 14px !important;
  font-family: 'Instrument Sans' !important;
  font-weight: 400 !important;
  padding: 6px !important;
  margin: 0 !important;
  text-align: left !important;

  /* &::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M5.79763 11.6085C5.58532 11.6085 5.38363 11.5236 5.23501 11.375L2.23088 8.37085C1.92304 8.06301 1.92304 7.55347 2.23088 7.24563C2.53873 6.93779 3.04826 6.93779 3.35611 7.24563L5.79763 9.68715L11.2539 4.23088C11.5617 3.92304 12.0713 3.92304 12.3791 4.23088C12.687 4.53873 12.687 5.04826 12.3791 5.3561L6.36024 11.375C6.21162 11.5236 6.00993 11.6085 5.79763 11.6085Z' fill='%23292D32'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    padding: 6px 12px;
  } */
}

button.dt-button:active:not(.disabled):hover:not(.disabled),
button.dt-button.active:not(.disabled):hover:not(.disabled),
div.dt-button:active:not(.disabled):hover:not(.disabled),
div.dt-button.active:not(.disabled):hover:not(.disabled),
a.dt-button:active:not(.disabled):hover:not(.disabled),
a.dt-button.active:not(.disabled):hover:not(.disabled),
input.dt-button:active:not(.disabled):hover:not(.disabled),
input.dt-button.active:not(.disabled):hover:not(.disabled) {
  box-shadow: none !important;
  background: var(--primary-dark-hover) !important;
}

div.dt-button-collection button.dt-button,
div.dt-button-collection div.dt-button,
div.dt-button-collection a.dt-button {
  background: #fff !important;
  box-shadow: none !important;
  border: none !important;
  color: #000 !important;
  font-size: 14px !important;
  font-family: 'Instrument Sans' !important;
  font-weight: 400 !important;
  padding: 6px !important;
  margin: 0 !important;
  text-align: left !important;
  border-radius: 0px !important;

  /* &::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE1IDE1IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTIuMDc2MyA0LjA0NTA1TDMuNTkwOTkgMTIuNTMwM0MzLjMwMTA4IDEyLjgyMDIgMi44MjAyNCAxMi44MjAyIDIuNTMwMzMgMTIuNTMwM0MyLjI0MDQyIDEyLjI0MDQgMi4yNDA0MiAxMS43NTk2IDIuNTMwMzMgMTEuNDY5N0wxMS4wMTU2IDIuOTg0MzlDMTEuMzA1NSAyLjY5NDQ4IDExLjc4NjQgMi42OTQ0OCAxMi4wNzYzIDIuOTg0MzlDMTIuMzY2MiAzLjI3NDMgMTIuMzY2MiAzLjc1NTE0IDEyLjA3NjMgNC4wNDUwNVoiIGZpbGw9IiMyOTJEMzIiLz48cGF0aCBkPSJNMTIuMDc2MyAxMi4wMTU2QzExLjc4NjQgMTIuMzA1NSAxMS4zMDU1IDEyLjMwNTUgMTEuMDE1NiAxMi4wMTU2TDIuNTMwMzMgMy41MzAzM0MyLjI0MDQyIDMuMjQwNDIgMi4yNDA0MiAyLjc1OTU4IDIuNTMwMzMgMi40Njk2N0MyLjgyMDI0IDIuMTc5NzYgMy4zMDEwOCAyLjE3OTc2IDMuNTkwOTkgMi40Njk2N0wxMi4wNzYzIDEwLjk1NUMxMi4zNjYyIDExLjI0NDkgMTIuMzY2MiAxMS43MjU3IDEyLjA3NjMgMTIuMDE1NloiIGZpbGw9IiMyOTJEMzIiLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: center;
    padding: 6px 12px;
  } */
}

button.dt-button:hover:not(.disabled),
div.dt-button:hover:not(.disabled),
a.dt-button:hover:not(.disabled),
input.dt-button:hover:not(.disabled) {
  background-color: #f1f1f1 !important;
}


#datatable_fixed_column_filter,
#datatable_fixed_column2_filter,
#datatable_fixed_column3_filter {
  & label {
    display: flex !important;
    margin: 0 !important;
    margin-bottom: 0px !important;

    & input {
      display: block !important;
      max-width: 400px !important;
      width: 320px !important;
      height: 34px !important;
      background: #fff !important;
      border-radius: 0px !important;
      border-color: #ccc !important;
      padding: 8px 12px !important;
      font-family: 'Instrument Sans' !important;
      font-size: 16px !important;
      font-weight: 400 !important;
    }
  }
}

.table-edit-btn {
  color: #fff !important;
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  border-radius: 0px !important;
  padding: 4px 5px 0px !important;
}

.table-delete-btn {
  color: #fff !important;
  background-color: var(--danger-dark) !important;
  border-color: var(--danger-dark) !important;
  border-radius: 0px !important;
  padding: 4px 5px 0px !important;
}


.trial-page-filter-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: end !important;

  & .filter-form-section {
    max-width: 250px !important;
    width: 100% !important;
  }
}


.trial-card {
  display: flex !important;
  width: 100% !important;
  background: var(--chart-card) !important;
  min-height: 50px !important;
  border-radius: 0px !important;
  justify-content: space-between !important;
  padding: 16px !important;

  & .icon-div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 0px !important;
    width: 52px !important;
    height: 52px !important;
  }

  & .context-div {
    text-align: end !important;

    & h2 {
      font-family: 'Instrument Sans' !important;
      font-size: 32px !important;
      font-weight: 400 !important;
      letter-spacing: normal !important;
      margin: 0 !important;
      line-height: 25px !important;
      margin-bottom: 4px !important;
    }

    & span {
      color: rgba(108, 108, 108, 1) !important;
      font-family: 'Instrument Sans' !important;
      font-size: 16px !important;
    }
  }
}

.ui-datepicker {
  max-width: 250px !important;
  padding: 8px 8px 0 !important;
  width: 100% !important;
  border-radius: 0px !important;
  overflow: hidden !important;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  border: 0 !important;
  width: 100% !important;
  padding: 4px 0 !important;
  background-color: var(--primary-dark-hover) !important;
  color: #000 !important;
  border-radius: 0px !important;
  font-family: 'Instrument Sans' !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
  background: transparent !important;
}

.ui-datepicker table {
  font-size: 14px !important;
  font-family: 'Instrument Sans' !important;
}

.ui-datepicker td .ui-state-active {
  color: #333 !important;
  background-color: var(--primary-dark) !important;
  margin-bottom: 0 !important;
  font-size: normal !important;
  text-shadow: none !important;
  border-color: var(--primary-dark) !important;
  border-radius: 0px !important;
}

.ui-datepicker td .ui-state-hover {
  color: #333 !important;
  background: var(--primary-dark-hover) !important;
  background-color: var(--primary-dark-hover) !important;
  text-shadow: none !important;
  border-color: var(--primary-dark-hover) !important;
  border-radius: 0px !important;
}

.ui-datepicker-today .ui-state-default.ui-state-highlight {
  border-radius: 0px !important;
  background-color: var(--primary-dark-hover) !important;
  color: #333 !important;
}

.select2-container--open .select2-dropdown.select2-dropdown--above,
.select2-drop.select2-drop-above {
  margin-bottom: 0 !important;
  border-top: 1px solid var(--primary-dark) !important;
  border-top-width: 1px !important;
  border-bottom: 1px solid var(--primary-dark) !important;
  margin-top: -8px !important;
  box-shadow: none !important;
}

.profit-loss-card {
  border-radius: 0px !important;
  background: var(--chart-card) !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;

  & .Profit-card-heading {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    font-family: 'Instrument Sans' !important;
    margin-top: 0px !important;
    padding: 18px !important;
  }

  & .Profit-card-heading-2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    font-family: 'Instrument Sans' !important;
    margin-top: 0px !important;
    padding: 18px !important;
  }

  & .table {
    margin: 0 !important;
    font-family: 'Instrument Sans' !important;
    font-size: 14px !important;

    & td {
      padding: 4px 4px 4px 20px !important;
      border: none;
    }

    & thead tr {
      background: #fff !important;
      border-color: #0000;
    }

    & thead tr th {
      font-family: 'Instrument Sans' !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      border-color: #0000;
      padding: 10px 10px 10px 20px !important;
    }

    & .no-data {
      text-align: center !important;
    }

    & tfoot tr {
      background: #000 !important;
      border-color: #000 !important;
    }

    & tfoot tr th {
      font-family: 'Instrument Sans' !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      border-color: #0000 !important;
      color: #fff !important;
      padding: 10px 10px 10px 20px !important;
      background: #000 !important;

      &.total-amount {
        color: var(--primary-dark) !important;
      }
    }

    .sub-total {
      background: var(--primary-light) !important;
      border-color: #0000 !important;
    }

    .sub-total-group {
      background: var(--primary-dark) !important;
      border-color: #0000;
      color: var(--Primary-btn-color) !important;
    }

    .account-name {
      font-weight: 600 !important;
      font-size: 13px !important;
    }

    .account-name.primary-text {
      font-size: 14px !important;
    }
  }
}

.primary-text {
  color: var(--primary-dark) !important;
}

.account-name.border-top-2px {
  border-top: 2px solid !important;
  border-color: #000 !important;
}

.border-top-2px {
  border-top: 2px solid !important;
  border-color: #000 !important;
}


#left-panel {
  overflow: hidden !important;

  & nav {
    height: calc(100% - 160px) !important;
    overflow: auto !important;

    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      background: #ffffff00;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #b3b3b3;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
      background: #919191;
    }
  }
}

.openMenu {
  display: block !important;
}

/* ================================= Responsive ============================= */

@media (max-width: 992px) {
  #left-panel {
    left: -250px;
  }

  #main {
    margin-left: 0;
  }

  .trial-page-filter-form {
    & .filter-form-section {
      max-width: 100% !important;
      width: 100% !important;
      flex-grow: 1 !important;
      flex-basis: 300px !important;
    }
  }
}


.debit-input,
.credit-input,
#totalCredit,
#totalDebit {
  text-align: right !important;
}

table td {
  padding: 4px !important
}


#content {
  padding-bottom: 0px !important;
}


.custom-header {
  max-height: 70px !important;
  background: var(--dark-nav) !important;
  display: none !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999999 !important;
  padding: 0px 24px !important;
  background: var(--navbar-bg) !important;
}

.header-toggle-menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 4px !important;
  cursor: pointer !important;

  & svg {
    width: 30px !important;
    height: 30px !important;

  }
}

.login-info {
  height: 60px !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
}


@media(max-width: 991.99px) {
  .custom-header {
    display: flex !important;
  }


  #left-panel {
    left: -250px !important;
  }

  #left-panel.active {
    left: 0 !important;
  }

  .custom-page-header {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 24px !important;

    & .nav-tabs {
      display: flex !important;
      gap: 2px !important;
      justify-content: flex-start !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      width: 100%;
      border-bottom: 1px solid var(--border-color) !important;
      margin-bottom: 1px !important;

      & li {
        list-style: none !important;
        margin-bottom: 2px !important;

        & a {
          border-radius: 0;
          color: var(--text-light);
          font-size: 20px;
          font-family: 'Instrument Sans' !important;
          font-weight: 500 !important;
          border: 1px solid transparent !important;
          background: transparent !important;
          box-shadow: none !important;
          margin: 0 !important;
          padding: 6px 20px;

          &:hover {
            border: 1px solid var(--primary-dark) !important;
            border-bottom: 0px !important;
            border-radius: 8px 8px 0 0;
            background: var(--body-bg) !important;
            color: var(--primary-dark);
          }
        }

        &.active {
          & a {
            border: 1px solid var(--primary-dark) !important;
            border-bottom: 0px !important;
            border-radius: 8px 8px 0 0;
            background: var(--body-bg) !important;
            color: var(--primary-dark);

            &:hover {
              border: 1px solid var(--primary-dark) !important;
              border-bottom: 0px !important;
              border-radius: 8px 8px 0 0;
              background: var(--body-bg) !important;
              color: var(--primary-dark);
            }
          }
        }
      }
    }
  }
}

.add-btn svg path,
.icon-div svg path {
  fill: var(--primary-dark);
}

@media (max-width: 767px) {
  .theme-options {
    justify-content: center;
  }
}


@media (max-width: 440px) {
  #content {
    padding: 0 !important;
  }

  .main-content {
    padding: 16px 8px !important;
  }

  .page-title {
    font-size: 26px;
  }

  .custom-page-header {
    & .nav-tabs {
      & li {
        & a {
          font-size: 16px;
          padding: 6px 12px 4px;
        }
      }
    }
  }
}