@import url(fonts.css);

:root {
  --main-bg: #e8e8e8;
  --table-bg: #e5e5e5;
  --card-bg: #f8f8f8;
  --hover-bg: #fff;
  --off-dark: #034748ff;
  --primary-color: #00a000;
  --primary-border: #008b00b9;
  --primary-color-bg: #00a0001b;
  --primary-shadow: #00a0003a;
  --secondary-color: #7280fd;
  --secondary-border: #5964caba;
  --secondary-color-bg: #7280fd21;
  --secondary-shadow: #7280fd3e;
  --accent-color: #ff771d;
  --accent-border: #c25b16b8;
  --accent-color-bg: #ff771d1c;
  --accent-shadow: #ff771d3c;
  --danger-color: #f21e50;
  --danger-border: #b5173cb9;
  --danger-color-bg: #f21e4f2b;
  --danger-shadow: #f21e4f44;
  --gray-color: #6c757d;
  --gray-border: #6c757db9;
  --gray-color-bg: #6c757d18;
  --gray-shadow: #6c757d3c;
  --text-color: #212121;
  --text-off-light: #6d6d6d;
  --header-height: 3rem;
  --nav-width: 68px;
  --z-fixed: 100;
  --shadow-color: rgba(0, 0, 0, 0.175);
  --border-bg: #cecece;
  --border-off: #c0c0c020;
  --input-border: #d9d9d9;
  /** Sizes **/
  --card-rd: 0;
  --input-height: 30px;
  --fs-1: 13px;
  --fs-3: 15px;
  --color: var(--bs-primary);
  --border-rd5: 5px !important;
  --border-rd10: 10px !important;
  --border-rd15: 15px !important;
  --border-rd25: 25px !important;
  --border-rd35: 35px !important;
  --border-rdCircle: 50% !important;
}

:root[data-color-scheme="dark"] {
  --main-bg: #181818;
  --table-bg: #1d1d1d;
  --card-bg: #212121;
  --hover-bg: #292929;
  --text-color: #b8b8b8;
  --text-off-light: #636363;
  --shadow-color: rgba(10, 10, 10, 0.491);
  --border-bg: #323232;
  --border-off: #00000020;
  --input-border: #313131;
  /* --primary-color-bg: #0f2d1a;
  --secondary-color-bg: #101230;
  --accent-color-bg: #25160b; */
}
:root[data-color-scheme="dark-mobile"] {
  --main-bg: #000000;
  --card-bg: #0d0d0d;
  --hover-bg: #141414;
  --table-bg: #151515;
  --text-color: #b8b8b8;
  --text-off-light: #727272;
  --shadow-color: rgba(10, 10, 10, 0.491);
  --border-bg: #161616;
  --border-off: #00000020;
  --input-border: #1f1f1f;
}

body[color="secondary"] {
  --primary-color: #7280fd;
  --primary-border: #5964caba;
  --primary-color-bg: #7280fd21;
  --secondary-color: #00a000;
  --secondary-border: #008b00b9;
  --secondary-color-bg: #00a0001b;
}
body[color="accent"] {
  --primary-color: #ff771d;
  --primary-border: #c25b16b8;
  --primary-color-bg: #ff771d1c;
  --accent-color: #00a000;
  --accent-border: #008b00b9;
  --accent-color-bg: #00a0001b;
}
body[color="danger"] {
  --danger-color: #00a000;
  --danger-border: #008b00b9;
  --danger-color-bg: #00a0001b;
  --primary-color: #f21e50;
  --primary-border: #b5173cb9;
  --primary-color-bg: #f21e4f2b;
}
/** 
Reset All Margins and Paddings 
*/
/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
* :not(i) {
  font-family: "Maven-pro", sans-serif;
}
html {
  background-color: var(--main-bg);
}
a {
  text-decoration: none;
  color: var(--text-color);
}
li,
ol {
  list-style: none;
}
ol,
ul {
  padding: 0;
}
/** 
Custom Scroll Bar
*/
*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /* width of the entire scrollbar */
}

*::-webkit-scrollbar-track {
  background: var(--hover-bg);
  /* color of the tracking area */
}

*::-webkit-scrollbar-thumb {
  background-color: var(--border-bg);
  /* color of the scroll thumb */
  border-radius: 0px;
  /* roundness of the scroll thumb */
  border: 0px;
  /* creates padding around scroll thumb */
}

/** 
Fix Body & Default Browser Styles
*/
body {
  position: relative;
  background-color: var(--main-bg);
  min-height: 100vh;
  color: var(--text-color);
}
/** Section Container */
.section-container .card-header {
  position: -webkit-sticky;
  position: sticky;
  top: 4rem;
  background-color: inherit;
  z-index: 10;
  border-top-left-radius: var(--card-rd);
  border-top-right-radius: var(--card-rd);
}
.section-container .card-footer,
.sticky-bottom {
  background-color: inherit;
  position: -webkit-sticky;
  position: sticky;
  bottom: 18px;
  z-index: 10;
  border-top-left-radius: var(--card-rd);
  border-top-right-radius: var(--card-rd);
}
.section-container .card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.md-screen {
  font-size: medium;
}
.loader-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.loader-box .text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-off-light);
}
.swinging {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  color: var(--text-off-light);
  left: -100px;
  box-sizing: border-box;
  animation: shadowRolling 2.5s linear infinite;
}

@keyframes shadowRolling {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 var(--text-off-light), 0px 0 rgba(255, 255, 255, 0),
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 110px 0 var(--text-off-light), 100px 0 var(--text-off-light),
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 120px 0 var(--text-off-light), 110px 0 var(--text-off-light),
      100px 0 var(--text-off-light), 0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 130px 0 var(--text-off-light), 120px 0 var(--text-off-light),
      110px 0 var(--text-off-light), 100px 0 var(--text-off-light);
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--text-off-light),
      120px 0 var(--text-off-light), 110px 0 var(--text-off-light);
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
      130px 0 var(--text-off-light), 120px 0 var(--text-off-light);
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
      200px 0 rgba(255, 255, 255, 0), 130px 0 var(--text-off-light);
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
      200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

.form-input input:-webkit-autofill,
.form-input input:-webkit-autofill:hover,
.form-input input:-webkit-autofill:focus,
.form-input input:-webkit-autofill:active {
  -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
  -webkit-transition-delay: 9999s;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--hover-bg) inset;
  -webkit-text-fill-color: var(--secondary-color);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/*Firefox */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  text-align: inherit;
  text-transform: inherit;
}
/* Input Start */
.form-group {
  width: 100%;
  margin-bottom: 1rem;
}
.form-group .label-required {
  position: relative;
}
.form-group .label-required::after {
  position: absolute;
  margin-top: -3px;
  content: "*";
  color: var(--bs-danger);
  font-size: 18px;
}
.card .form-input {
  position: relative;
  margin: 0 35px 25px;
}

.card .form-input input {
  outline: none;
  z-index: 1;
  position: relative;
  background: none;
  width: 100%;
  height: 54px;
  border: 0;
  color: var(--text-color);
  font-size: 18px;
  font-weight: 400;
}

.card .form-input input:focus ~ label {
  color: var(--text-off-light);
  -webkit-transform: translate(-12%, -50%) scale(0.65);
  transform: translate(-12%, -50%) scale(0.65);
}

.card .form-input input:focus ~ .bar:before,
.card .form-input input:focus ~ .bar:after {
  width: 50%;
}

.card .form-input input:valid ~ label {
  color: var(--text-off-light);
  -webkit-transform: translate(-12%, -50%) scale(0.75);
  transform: translate(-12%, -50%) scale(0.75);
}

.card .form-input label {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--text-off-light);
  font-size: 24px;
  font-weight: 300;
  line-height: 60px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

@media (max-width: 768px) {
  .card .form-input input {
    font-size: 14px;
  }
  .card .form-input label {
    font-size: 18px;
  }
}
.card .form-input .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--text-off-light);
  width: 100%;
  height: 1px;
}

.card .form-input .bar:before,
.card .form-input .bar:after {
  content: "";
  position: absolute;
  background: var(--primary-color);
  width: 0;
  height: 2px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

.card .form-input .bar:before {
  left: 50%;
}

.card .form-input .bar:after {
  right: 50%;
}
.side-content-box {
  position: sticky;
  top: 7.5rem;
}
form.was-validated .card .form-input input:invalid ~ .bar {
  background-color: var(--bs-danger);
  height: 2px;
}

.input-card,
.input-card:focus {
  background-color: var(--card-bg);
  border: 1px solid grey !important;
  color: var(--text-color);
}

.input-select,
.input-select:focus {
  background-color: var(--card-bg);
  border: 1px solid grey !important;
  color: var(--text-color);
}

input:read-only,
textarea:read-only,
[contenteditable]:read-only {
  background-color: var(--card-bg);
}

.input-box,
.input-box[readonly],
.selectric-input-box .selectric {
  width: 100%;
  border: 2px solid var(--input-border);
  border-radius: 0 !important;
  height: var(--input-height);
  padding: 0.175rem 0.75rem !important;
  background-color: var(--hover-bg);
  color: var(--text-color);
  font-size: var(--fs-1);
  transition-property: border-color, box-shadow;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease-in-out, ease-in-out;
  transition-delay: 0s, 0s;
}
.input-box.disabled,
.input-box:disabled {
  background-color: var(--hover-bg);
  filter: brightness(110%);
  color: var(--text-off-light);
}
.resize-none {
  resize: none;
}

.input-box:not(.disabled):focus,
.input-box:not(:disabled):focus {
  box-shadow: 0 0 1px 4px rgba(0, 158, 0, 0.175);
  border-color: var(--primary-color) !important;
  background-color: var(--hover-bg);
  color: var(--input-text);
}
.input-group input {
  max-width: 60%;
}

.input-group a.link {
  min-width: 79%;
}
.input-group-text.has-link {
  max-width: 24%;
}
.input-group-text {
  border-radius: 0;
  background-color: var(--hover-bg);
  filter: brightness(110%);
  border: 2px solid var(--input-border);
  padding: 0.175rem 0.75rem !important;
  height: var(--input-height);
  color: var(--text-color);
  font-size: var(--fs-1);
  margin: 0 2px;
}
.input-group-append {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  min-width: 35%;
  margin-left: 1px !important;
}
.input-group-prepend {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  min-width: 55%;
  margin-right: 1px !important;
}
/* Selectric Css */
.selectric-wrapper {
  transition: all 0.3 ease-in-out;
}
.selectric-focus .selectric {
  box-shadow: 0 0 1px 4px rgba(0, 158, 0, 0.175);
  border-color: var(--primary-color) !important;
}
.selectric-items {
  background-color: var(--hover-bg);
  border: 0.5px solid var(--border-bg);
}
.selectric-items li {
  border-top: 0.5px solid var(--border-bg);
  border-bottom: none;
}
.selectric-items li:hover {
  background-color: var(--hover-bg);
  filter: brightness(95%);
}
.selectric .button {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(var(--input-height) - 7px);
  height: calc(var(--input-height) - 7px);
  line-height: var(--input-height);
  background-color: inherit;
  color: var(--text-color);
  text-align: center;
  font: 0 / 0 a;
}

.selectric .button::before {
  content: "\f078";
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: none;
  border-bottom: none;
  font-family: "Font Awesome 6 Pro";
  font-size: 13px;
  line-height: normal;
  transition: all 0.4s;
}
.selectric-focus:has(select[multiple]) .selectric .button::before {
  transform: rotate(180deg);
}
.selectric-items li.selected {
  position: relative;
  background: var(--secondary-color-bg);
  color: var(--secondary-color);
}
.selectric-focus:has(select[multiple]) .selectric-items li.selected::after {
  content: "\f00d";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--text-off-light);
  font-size: 13px;
}
.multi-select .selectric {
  height: auto;
}
.multi-select .selectric .label {
  height: 100%;
  white-space: initial;
  margin: 0 auto;
}
/* Form Transaction Table Css */
form.transaction .form-control.is-valid,
form.transaction.was-validated .form-control:valid,
form.transaction.was-validated .selectable.select-valid:not(.disabled) {
  border: 2px solid;
  border-color: var(--input-border);
  background-image: none;
}
form.transaction .form-control.is-invalid,
form.transaction.was-validated .form-control:invalid,
form.transaction.was-validated .selectable.select-invalid:not(.disabled) {
  border: 2px solid;
  border-color: var(--bs-danger) !important;
  background-image: none;
}
form.transaction .transaction-table .form-control.is-valid,
form.transaction.was-validated .transaction-table .form-control:valid,
form.transaction.was-validated
  .transaction-table
  .selectable.select-valid:not(.disabled) {
  border: none;
  background-image: none;
}

form.was-validated .selectable.form-control.select-invalid:not(.disabled) {
  border: 2px solid;
  border-color: var(--bs-danger) !important;
  background-image: none;
}
form.was-validated .selectable.form-control.select-valid:not(.disabled) {
  border: 2px solid;
  border-color: var(--input-border) !important;
  background-image: none;
}
/** Form Label Css */
.col-form-label {
  padding-top: calc(0.175rem + 1px);
  padding-bottom: calc(0.175rem + 1px);
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 13px;
}
.col-form-label.fw {
  font-weight: bold;
}
.col-form-label.f7 {
  font-weight: 700;
}
.col-form-label.f6 {
  font-weight: 600;
}
.col-form-label.f4 {
  font-weight: 400;
}
.col-form-label.f1 {
  font-weight: 100;
}
.col-label {
  width: 50%;
  padding-right: 6px;
}
.col-input {
  width: 50% !important;
  padding-left: 6px;
}
.text-indent {
  text-indent: 20px;
}
.text-indent-sm {
  text-indent: 10px;
}
.text-indent-md {
  text-indent: 25px;
}
.text-indent-lg {
  text-indent: 30px;
}
.text-indent-xl {
  text-indent: 40px;
}
.text-indent-xxl {
  text-indent: 50px;
}
/** Alerts */
.primary-alert {
  color: var(--primary-color);
  background-color: var(--primary-color-bg);
  border-color: var(--primary-color-bg);
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0 !important;
  /* 0.25rem*/
}
.secondary-alert {
  color: var(--secondary-color);
  background-color: var(--secondary-color-bg);
  border-color: var(--secondary-color-bg);
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0 !important;
  /* 0.25rem*/
}

.accent-alert {
  color: var(--accent-color);
  background-color: var(--accent-color-bg);
  border-color: var(--accent-color-bg);
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0;
  /* 0.25rem*/
}
.danger-alert {
  color: var(--danger-color);
  background-color: var(--danger-color-bg);
  border-color: var(--danger-color-bg);
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0 !important;
  /* 0.25rem*/
}
.alert-danger {
  /* color: #f4c7c7; */
  background-color: #1d0f0f;
  border-color: #2b1515;
}
.alert-success {
  /* color: rgb(204, 232, 205); */
  background-color: #0c130d;
  border-color: #172419;
}
.alert-warning {
  /* color: #ffe2b7; */
  background-color: #191207;
  border-color: #31230d;
}
.alert-info {
  /* color: #b8e7fb; */
  background-color: #071318;
  border-color: #0e252f;
}

.alert {
  border-radius: 0 !important;
}
/**
* Selectable Css
*/
.selector-box {
  position: relative;
}
.selectable.is-mobile:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--primary-color);
  border-color: var(--primary-color) !important;
}
.selectable-options-box {
  color: var(--text-color) !important;
  border-radius: 0 !important;
  border: 1px solid var(--border-bg) !important;
}
.selectable-options-box li {
  font-size: 13px;
}
.selectable-options-box li a {
  font-size: 16px;
}

.selectable-options-mobile {
  color: var(--text-color) !important;
}
.selectable .selectable-options {
  border-radius: 0 !important;
}
.selectable li.active,
.selectable-options-box li.active {
  background-color: var(--secondary-color) !important;
  color: white;
}
/**
* Text Area
*/
*:not(textarea).form-control {
  height: var(--input-height);
}
textarea {
  resize: none;
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: break-word;
  min-height: var(--input-height);
}
.form-control.row-2 {
  min-height: 70px;
}

.form-control.row-3 {
  min-height: 93px;
}

.form-control.row-4 {
  min-height: 120px;
}

.form-control.row-5 {
  min-height: 140px;
}

.form-control.row-6 {
  min-height: 163px;
}
.dt-checkboxes-cell input[type="checkbox"],
.dt-checkboxes {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: var(--hover-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  transition: background-color 0.15s ease-in-out,
    background-position 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.dt-checkboxes-cell input[type="checkbox"],
.form-check-input,
.dt-checkboxes {
  border: 1px solid var(--input-border);
  border-radius: 0 !important;
}
.dt-checkboxes-cell input[type="checkbox"]:focus,
.form-check-input:focus,
.dt-checkboxes:focus {
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 1px 4px rgba(0, 158, 0, 0.175);
}
.dt-checkboxes-cell input[type="checkbox"]:checked,
.form-check-input:checked,
.dt-checkboxes:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.dt-checkboxes-cell input:checked[type="checkbox"],
.form-check-input:not(.switch)[type="checkbox"]:checked,
.dt-checkboxes:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
/**
* Fonts Families
*/
.font-asap,
.font-asap *:not(i) {
  font-family: asap, serif !important;
}
.font-cata,
.font-cata *:not(i) {
  font-family: Catamaran, serif !important;
}
.font-oswald,
.font-oswald *:not(i) {
  font-family: oswald, serif !important;
}
/**
* SWitches Css
*/
.switch-label {
  margin-bottom: 0;
  min-height: 0;
}

/**
* Custom Css
*/

.ucwords {
  text-transform: capitalize;
}
/** Text Css */
.info-text {
  font-size: 12px;
  color: var(--text-off-light);
}
.info-text.xxsmall {
  font-size: 4px;
}
.info-text.xsmall {
  font-size: 6px;
}
.info-text.smaller {
  font-size: 10px;
}
.info-text.small {
  font-size: 11px;
}
.info-text.lg {
  font-size: 14px;
}
.info-text.xl {
  font-size: 16px;
}
.info-text.xxl {
  font-size: 18px;
}
.info-text.xxxl {
  font-size: 20px;
}
/*=================Custom Color Schemes======================*/
.bg-main {
  background-color: var(--main-bg) !important;
}
.bg-table {
  background-color: var(--table-bg) !important;
}
.bg-card {
  background-color: var(--card-bg) !important;
}
.bg-hover {
  background-color: var(--hover-bg) !important;
}
.text-color {
  color: var(--text-color) !important;
}
.text-off-light {
  color: var(--text-off-light) !important;
}
.primary-text {
  color: var(--primary-color) !important;
}
.secondary-text {
  color: var(--secondary-color) !important;
}
.accent-text {
  color: var(--accent-color) !important;
}
.danger-text {
  color: var(--danger-color) !important;
}
.primary-bg {
  background-color: var(--primary-color) !important;
}
.secondary-bg {
  background-color: var(--secondary-color) !important;
}
.accent-bg {
  background-color: var(--accent-color) !important;
}
.danger-bg {
  background-color: var(--danger-color) !important;
}
.border-bg {
  background-color: var(--border-bg) !important;
}
.gray-bg {
  background-color: var(--bs-gray) !important;
}
.border-1 {
  border: 1px solid var(--border-bg);
}
.border-2 {
  border: 2px solid var(--border-bg);
}
.border-3 {
  border: 3px solid var(--border-bg);
}
.border-y-1 {
  border-top: 1px solid var(--border-bg);
  border-bottom: 1px solid var(--border-bg);
}
.border-y-2 {
  border-top: 2px solid var(--border-bg);
  border-bottom: 2px solid var(--border-bg);
}
.border-y-3 {
  border-top: 3px solid var(--border-bg);
  border-bottom: 3px solid var(--border-bg);
}
.border-double-y-1 {
  border-top: 1px solid var(--border-bg);
  border-bottom: 4px double var(--border-bg);
}
.border-double-y-2 {
  border-top: 4px double var(--border-bg);
  border-bottom: 4px double var(--border-bg);
}
.boarder-x-1 {
  border-left: 1px solid var(--border-bg);
  border-right: 1px solid var(--border-bg);
}
.border-x-2 {
  border-left: 2px solid var(--border-bg);
  border-right: 2px solid var(--border-bg);
}
.border-x-3 {
  border-left: 3px solid var(--border-bg);
  border-right: 3px solid var(--border-bg);
}
.border-double-x-1 {
  border-left: 1px solid var(--border-bg);
  border-right: 4px double var(--border-bg);
}
.border-double-x-2 {
  border-left: 4px double var(--border-bg);
  border-right: 4px double var(--border-bg);
}

/* Border Color */
.border-primary {
  border-color: var(--primary-border) !important;
}
.border-secondary {
  border-color: var(--secondary-border) !important;
}
.border-accent {
  border-color: var(--accent-border) !important;
}
.border-danger {
  border-color: var(--danger-border) !important;
}

/**
* Layout Css
*/
.vh-100 {
  height: auto !important;
  min-height: calc(100vh - var(--header-height) - 10.5rem) !important;
}
.input-height {
  min-height: var(--input-height) !important;
}
.fsz-1 {
  font-size: var(--fs-1);
}
.fsz-3 {
  font-size: var(--fs-3);
}
.rd-15 {
  border-radius: var(--border-rd15) !important;
}
.rd-25 {
  border-radius: var(--border-rd25) !important;
}
.rd-35 {
  border-radius: var(--border-rd35) !important;
}
.rd-circle {
  border-radius: var(--border-rdCircle) !important;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 30px;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 30px;
}
.flex-ended {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 30px;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/**
Button CSS

*/
.btn {
  border-radius: 0;
}
.btn-xsmall {
  padding: 0.2rem 0.4rem;
  font-size: 0.65rem;
}
.btn-close {
  color: var(--text-color);
  background: none;
  position: relative;
}
.btn-close::before {
  content: "\f057";
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  font-size: 22px;
  color: var(--text-off-light);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}
.btn-close:hover::before {
  color: var(--danger-color) !important;
}

.btn-o-primary {
  border-color: var(--primary-border);
  color: var(--primary-border);
  transition: all 0.3s;
}
.btn-o-primary:hover,
.btn-o-primary:active {
  color: #fff;
  background-color: var(--primary-color);
}
.btn-o-secondary {
  border-color: var(--secondary-border);
  color: var(--secondary-border);
}
.btn-o-secondary:hover,
.btn-o-secondary:active {
  color: #fff;
  background-color: var(--secondary-color);
}
.btn-o-accent {
  border-color: var(--accent-border);
  color: var(--accent-border);
}
.btn-o-accent:hover,
.btn-o-accent:active {
  color: #fff;
  background-color: var(--accent-color);
}

.btn-primary-soft {
  color: var(--primary-color);
  background-color: var(--primary-color-bg);
  border-color: var(--primary-border);
}
.btn-primary-soft:hover {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-border);
}
.btn-primary-soft:focus {
  box-shadow: 0 0 0 4px var(--primary-shadow);
}
.btn-secondary-soft {
  color: var(--secondary-color);
  background-color: var(--secondary-color-bg);
  border-color: var(--secondary-border);
}
.btn-secondary-soft:hover {
  color: #fff;
  background-color: var(--secondary-color);
  border-color: var(--secondary-border);
}
.btn-secondary-soft:focus {
  box-shadow: 0 0 0 4px var(--secondary-shadow);
}
.btn-accent-soft {
  color: var(--accent-color);
  background-color: var(--accent-color-bg);
  border-color: var(--accent-border);
}
.btn-accent-soft:hover {
  color: #fff;
  background-color: var(--accent-color);
  border-color: var(--accent-border);
}
.btn-accent-soft:focus {
  box-shadow: 0 0 0 4px var(--accent-shadow);
}
.btn-danger-soft {
  color: var(--danger-color);
  background-color: var(--danger-color-bg);
  border-color: var(--danger-border);
}
.btn-danger-soft:hover {
  color: #fff;
  background-color: var(--danger-color);
  border-color: var(--danger-border);
}
.btn-danger-soft:focus {
  box-shadow: 0 0 0 4px var(--danger-shadow);
}
.btn-gray-soft {
  color: var(--gray-color);
  background-color: var(--gray-color-bg);
  border-color: var(--gray-border);
}
.btn-gray-soft:hover {
  color: #fff;
  background-color: var(--gray-color);
  border-color: var(--gray-border);
}
.btn-gray-soft:focus {
  box-shadow: 0 0 0 4px var(--gray-shadow);
}
.theme-btn {
  position: relative;
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0;
  overflow: hidden;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.theme-btn span {
  position: relative;
  color: var(--text-off-light);
  z-index: 1;
  transition: all 0.3s;
}
.theme-btn::before {
  position: absolute;
  left: 45%;
  top: 30%;
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  border-radius: 50%;
  content: "";
  opacity: 0;
  transition: transform 0.37s ease-in-out;
}
.theme-btn:focus::before {
  opacity: 0.6;
  width: 60px;
  height: 60px;
  transform: scale(15);
}
.theme-btn:hover span,
.theme-btn:focus span,
.theme-btn:active span {
  color: var(--text-color);
  font-weight: bold;
}
.theme-btn:hover:not(:has(span)) {
  color: var(--primary-color);
  font-weight: bold;
}
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}
.btn-block {
  width: 100% !important;
}
.btn-icon-remove {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-off-light);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: default !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 13px;
}
.btn-icon-remove.enabled {
  color: var(--text-color);
  cursor: pointer !important;
  transition: all 0.3s;
}
.btn-icon-remove.enabled:hover,
.btn-icon-remove.enabled:focus,
.btn-icon-remove.enabled:active {
  color: var(--bs-danger);
  box-shadow: 0 0 0 4px var(--bs-danger);
}

.raised-btn {
  box-shadow: 0 0 4px 1px var(--shadow-color);
}

.btn-load,
.btn-load:before,
.btn-load:after {
  border-radius: 50%;
  width: 13px;
  height: 13px;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}
.btn-load {
  color: var(--text-off-light);
  opacity: 0.8;
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.btn-load:before,
.btn-load:after {
  content: "";
  position: absolute;
  top: -260%;
}
.btn-load:before {
  left: 1em;
  animation-delay: -0.32s;
}
.btn-load:after {
  left: 6.5em;
}
.btn-success {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-success:hover {
  color: #fff;
  filter: brightness(85%);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-success:focus {
  box-shadow: 0 0 0 4px var(--primary-color);
}
.btn-outline-success {
  color: var(--primary-color);
  background-color: transparent;
  border-color: var(--primary-color);
}
.btn-outline-success:hover {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-check:active + .btn-outline-success,
.btn-check:checked + .btn-outline-success,
.btn-outline-success.active,
.btn-outline-success.dropdown-toggle.show,
.btn-outline-success:active {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-link {
  color: var(--text-color);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  transition: all 0.3s;
}
.btn-link.secondary {
  color: var(--secondary-color);
  transition: all 0.3s;
}
.btn-link.accent {
  color: var(--accent-color);
  transition: all 0.3s;
}
.btn-link.danger {
  color: var(--danger-color);
  transition: all 0.3s;
}
.btn-link.primary {
  color: var(--primary-color);
  transition: all 0.3s;
}
.btn-link:hover {
  font-weight: bold;
  color: var(--accent-color);
  text-decoration: none;
  background-color: transparent;
}

/* Keyframes */

@-webkit-keyframes buttonFadeInUp {
  0% {
    bottom: 30px;
    opacity: 0;
  }
}

@keyframes buttonFadeInUp {
  0% {
    bottom: 30px;
    opacity: 0;
  }
}
@keyframes bblFadInOut {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
/**
Card Css
*/
.card {
  position: relative;
  background-color: var(--card-bg);
  border-radius: var(--card-rd);
  border: none;
  box-shadow: 0px 0 30px var(--shadow-color);
}
.card-header.border-off {
  border-color: var(--border-off);
}
.card-header.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 4rem;
  background-color: inherit;
  z-index: 10;
  border-top-left-radius: var(--card-rd);
  border-top-right-radius: var(--card-rd);
}
.card-mb {
  margin-bottom: 30px;
}
.card .details-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card .details-title .back {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card .details-title .back a:hover {
  color: var(--primary-color);
}
@media (max-width: 576px) {
  .card .details-title .back span {
    display: none;
  }
}

/**
Badge Css
*/
.badge {
  border-radius: 0;
}
.badge-pill {
  border-radius: 0.5rem;
}
.badge-circle {
  border-radius: 50%;
  padding: 0.4rem 0.4rem;
}
.badge-lg {
  font-size: 12px;
  margin: 0.27rem;
}
.badge:disabled,
.badge.disabled {
  background-color: var(--hover-bg) !important;
  color: var(--text-off-light);
}
/**
Modal Css
*/
.modal-content {
  background-color: var(--main-bg);
  border-radius: var(--card-rd);
  font-size: 13px;
}
.modal-content.form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.modal-header {
  border-bottom: 1px solid var(--hover-bg);
}
.modal-footer {
  border-top: 1px solid var(--hover-bg);
}
.modal-backdrop {
  width: 100%;
  height: 100%;
}
.modal .close,
.printing .close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem 0 -0.5rem auto;
  box-sizing: content-box;
  width: 2em;
  height: 2em;
  padding: 0.25em 0.25em;
  color: #000;
  border: 0;
  border-radius: 0.25rem;
  text-align: center;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.4s;
}
.modal .close:hover i,
.modal .close:hover svg,
.printing .close:hover i,
.printing .close:hover svg {
  color: red;
}
.modal.left > .modal-dialog,
.modal.right > .modal-dialog {
  position: fixed;
  margin: auto;
  width: 800px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}
/*Right*/
.modal.right.fade > .modal-dialog {
  right: -320px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

/*Left*/
.modal.left.fade > .modal-dialog {
  left: -320px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.show > .modal-dialog {
  left: 0;
}
.modal.right.fade.show > .modal-dialog {
  right: 0;
}

.modal.left .modal-header,
.modal.right .modal-header {
  background-color: var(--main-bg);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  bottom: 100%;
  z-index: 10;
}
.modal.left .modal-footer,
.modal.right .modal-footer {
  background-color: var(--main-bg);
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.modal.left .footer-top-100 .modal-footer,
.modal.right .footer-top-100 .modal-footer {
  top: 100%;
}
.modal.left .modal-content,
.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px;
}

@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: auto;
  }
}

@media (min-width: 576px) {
  .modal-md {
    max-width: 650px;
  }
}
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw !important;
  }
}

.modal-xxl {
  min-width: 85%;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100% !important;
  }
}
.modal .close svg,
.printing .close svg {
  color: var(--text-color);
  font-size: 20px;
}
.printing {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  outline: 0;
  overflow-x: hidden;
  overflow-y: hidden;

  z-index: 1050;
  transition: all 0.25s linear;
}

.printing.show {
  opacity: 0.94;
  background-color: var(--card-bg);
  visibility: visible;
}
#busy-modal .modal-content {
  opacity: 0.2;
}
/** BS Sweet Alert Swal **/
.swal2-popup {
  background-color: var(--card-bg) !important;
  border-radius: 0 !important;
}
button.swal2-styled {
  border-radius: 0 !important;
}
.swal2-styled.swal2-confirm {
  background-color: var(--primary-color) !important;
}
button.swal2-styled:focus {
  outline: 4px solid var(--accent-color-bg);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.swal2-icon.swal2-success {
  border-color: var(--primary-border) !important;
  color: var(--primary-color) !important;
}
.swal2-icon.swal2-question,
.swal2-icon.swal2-info {
  border-color: var(--secondary-color-bg) !important;
  color: var(--secondary-color) !important;
}
.swal2-icon.swal2-error {
  border-color: var(--danger-color-bg) !important;
  color: var(--danger-color) !important;
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--danger-border) !important;
}
.swal2-icon.swal2-warning {
  border-color: var(--accent-color-bg) !important;
  color: var(--accent-color) !important;
}

.swal2-validation-message {
  background: var(--hover-bg) !important;
  font-size: var(--fs-3) !important;
  color: var(--text-off-light) !important;
}
.swal2-validation-message::before {
  content: "\f06a" !important;
  font-family: "Font Awesome 6 Pro" !important;
  border-radius: 50%;
  background: none !important;
  color: var(--danger-color) !important;
  font-weight: 100 !important;
  font-size: 20px !important;
}

/**
*List Group
*/
.list-group-item {
  background-color: inherit;
  border: 1px solid var(--border-bg);
  transition: background-color 0.4s ease-in;
}
.list-group-item:hover {
  background-color: var(--border-bg);
  cursor: pointer;
}
/** Bullet List Css */
.bullet-list {
  list-style-type: none;
  padding-left: 0;
}
.bullet-list .list-item {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.bullet-list .list-item::before {
  content: "\f111";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  left: 0;
  top: 0.2rem;
  color: var(--primary-color);
  font-weight: 900;
  font-size: 0.5rem;
}

/**
*Dropdown Css
*/
.dropdown-menu {
  background-color: var(--card-bg);
  border-radius: var(--card-rd);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.275);
  overflow-y: auto;
}
.dropdown-menu.scroll {
  max-height: 300px;
}
.dropdown-divider {
  margin: 0;
}
.dropdown-item,
.dropdown-item a {
  color: var(--text-off-light);
  display: flex;
  width: 100%;
}
.dropdown-item:hover {
  background-color: var(--card-bg);
  filter: brightness(110%);
  color: var(--accent-color);
  cursor: pointer;
}

.dropdown-item a:hover {
  color: var(--accent-color);
}
.dropdown-menu-top::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--card-bg);
  position: absolute;
  top: -7px;
  right: 20px;
  transform: rotate(45deg);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}
.dropdown-menu-left::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--card-bg);
  position: absolute;
  top: 28px;
  left: -7px;
  transform: rotate(45deg);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.amount-box .balances {
  position: relative;
  font-size: 13px;
  cursor: default;
  color: var(--text-color);
  transition: all 0.4s ease-in-out;
}
.amount-box .balances.multi::after,
.dropdown-btn::after {
  position: absolute;
  content: "\f107";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  right: -15px;
}
.amount-box .balances.multi:hover,
.dropdown-btn:hover {
  cursor: pointer;
  color: var(--secondary-color);
  font-weight: 500;
}

/**
*Borders Css
*/
.border-left {
  border-left: 1px solid var(--border-bg) !important;
}

/**
*Date Range Picker
*/

.daterangepicker {
  color: var(--text-color);
  background-color: var(--card-bg);
  border-color: var(--card-bg);
  border-radius: var(--card-rd);
  box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.175);
  margin-bottom: 1rem;
}

.daterangepicker .calendar-table {
  border: 1px solid var(--card-bg);
  background-color: var(--card-bg);
  border-radius: var(--card-rd);
}

.daterangepicker td:hover,
.daterangepicker th:hover {
  background-color: var(--accent-color-bg) !important;
  color: var(--accent-color) !important;
}

.daterangepicker td.in-range {
  background-color: var(--hover-bg);
  color: var(--text-color);
}

.daterangepicker .ranges li.active {
  background-color: var(--primary-color);
}

.daterangepicker .ranges li:hover {
  color: var(--accent-color) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: var(--card-bg);
}

.daterangepicker .calendar-table .next,
.daterangepicker .calendar-table .prev {
  border-radius: 50%;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  color: var(--text-color);
}

.daterangepicker .calendar-table .next:hover,
.daterangepicker .calendar-table .prev:hover {
  border-radius: 50%;
  background-color: var(--card-bg);
}

.daterangepicker.show-ranges.ltr .drp-calendar.left,
.daterangepicker .drp-buttons {
  border-color: var(--card-bg);
}

.drp-buttons .cancelBtn {
  color: var(--text-color);
}

.drp-buttons .applyBtn {
  color: #fff;
  background-color: var(--primary-color);
}

.drp-buttons .applyBtn {
  color: #fff;
  /* font-weight: 700 !important; */
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.drp-buttons .applyBtn:hover,
.drp-buttons .applyBtn:focus {
  background-color: var(--primary-color);
  filter: brightness(85%);
}

.daterangepicker .hide-showBtn {
  display: none;
}
.daterangepicker::before,
.daterangepicker::after {
  top: -6px;
  left: 30px !important;
  border-right: none;
  border-bottom: none;
  border-left: none;
  content: "";
  width: 13px;
  height: 13px;
  background: var(--card-bg);
  position: absolute;
  transform: rotate(45deg);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  z-index: -1;
}
/**
* Single Date Picker Css
*/

.gj-datepicker-md {
  color: var(--text-color);
}
.gj-datepicker-md [role="right-icon"] {
  position: absolute;
  top: 9px;
  right: 10px;
  font-size: 14px;
  color: var(--text-off-light);
  opacity: 0.5;
}
.gj-picker {
  background-color: var(--card-bg);
  border-radius: var(--card-rd);
  color: var(--text-color);
  border: 1px solid var(--border-bg);
}

.gj-picker-md table tr td.selected.gj-cursor-pointer div {
  color: #fff;
  background: var(--primary-color);
  border-radius: 0;
}
.gj-picker-md table tr td.gj-cursor-pointer div:hover {
  color: #333;
  background: var(--secondary-color);
  border-radius: 0;
}
.gj-picker-md table tr td.today div {
  color: var(--primary-color);
}

.gj-picker-md table tr td.today div {
  color: var(--primary-color);
}

.gj-picker-md table tr td.disabled div {
  color: var(--text-off-light);
}

/**
* Accordion Css
*/
.accordion-item.card {
  margin-bottom: 20px;
}
.accordion-item.card .accordion-button {
  border-radius: 0;
  color: var(--text-off-light);
  background-color: var(--card-bg);
}
.accordion-item.card .accordion-button:focus {
  border: 0;
  box-shadow: none;
}
.accordion-button::after {
  filter: brightness(230%);
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-width: 1px;
  border-radius: 0;
}
.accordion-button:not(.collapsed)::after {
  filter: grayscale(1);
}
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-width: 1px;
  border-radius: 0;
}

.popover {
  z-index: 10000;
  background-color: var(--hover-bg);
  border-radius: 0;
}
.popover-header {
  background-color: var(--border-bg);
  border-radius: 0;
  color: var(--text-color);
}
.popover-body {
  background-color: inherit;
  color: var(--text-color);
  box-shadow: 0 0 6px var(--shadow-color);
}
.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--hover-bg);
}
.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--hover-bg);
}
.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--hover-bg);
}
.bs-popover-end > .popover-arrow::after {
  border-right-color: var(--hover-bg);
}
.icon-container {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
/**
* Table css
*/

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: var(--border-bg);
  border-style: solid;
  border-width: 0;
}
.table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--border-bg);
}

/**
* List Table Css
*/
.list-table:not(.table-sm) thead th,
.empty-table:not(.table-sm) thead th {
  border-bottom: none;
  background-color: inherit;
  color: #67696e;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.list-table,
.empty-table {
  font-size: 13px;
  color: var(--text-color);
  border: 0.5px solid var(--border-bg);
}
.list-table thead,
.empty-table thead {
  background-color: var(--hover-bg);
  filter: brightness(90%);
}

.list-table tbody tr:nth-child(even) {
  background-color: var(--card-bg);
}

.list-table tbody tr:nth-child(odd) {
  background-color: var(--hover-bg);
}
.list-table tbody td {
  position: relative;
  border-bottom: 1px solid var(--border-bg);
  text-align: center;
  height: auto;
  padding: 6px 10px;
  vertical-align: middle;
}
.list-table tbody td .tr-link {
  transition: all 0.4s ease-in-out;
}
.list-table tbody td .tr-link::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.list-table tbody td .tr-link:hover {
  color: var(--secondary-color);
  font-weight: 600;
}
.list-table tbody td .balances {
  position: relative;
  font-size: 13px;
  cursor: default;
  color: var(--text-color);
  transition: all 0.4s ease-in-out;
}
.list-table tbody td .balances.multi::after,
.dropdown-btn::after {
  position: absolute;
  content: "\f107";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  right: -15px;
}
.list-table tbody td .balances.multi:hover,
.dropdown-btn:hover {
  cursor: pointer;
  color: var(--secondary-color);
  font-weight: 500;
}
.list-table tbody td .action-dropdown {
  font-size: 18px;
  transition: all 0.4s ease-in-out;
}
.list-table tbody td .action-dropdown:hover {
  color: var(--primary-color);
  cursor: pointer;
}
.list-table tbody td .action-dropdown:focus {
  transform: rotate(180deg);
}
.list-table.center * {
  text-align: center;
}
.list-table.left * {
  text-align: left;
}
.list-table.right * {
  text-align: right;
}

/**
* Fold Table Css
*/
.fold-table * {
  font-size: 13px;
}

.fold-table table tbody {
  display: table-row-group;
}

.fold-table td.tr-head {
  padding-left: 35px !important;
}
.fold-table > tbody > tr.view td,
.fold-table > tbody > tr.view th {
  cursor: pointer;
}
.fold-table > tbody > tr.view td:first-child,
.fold-table > tbody > tr.view th:first-child {
  position: relative;
  padding-left: 20px;
}
.fold-table > tbody > tr.view td:first-child:before,
.fold-table > tbody > tr.view th:first-child:before {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 9px;
  height: 16px;
  margin-top: -8px;
  font: 16px "Font Awesome 6 Pro";
  color: var(--text-color);
  content: "\f078";
  transition: all 0.3s ease;
}
.fold-table > tbody > tr.view:nth-child(4n-1) {
  background: var(--hover-bg);
  transition: all 0.3s ease;
}
.fold-table > tbody > tr.view:hover {
  color: var(--secondary-color);
  background-color: var(--secondary-color-bg);
  font-weight: bold;
}
.fold-table > tbody > tr.view.open {
  background: var(--primary-color-bg);
  color: var(--text-color);
}
.fold-table > tbody > tr.view.open td {
  color: var(--primary-border);
  font-weight: bold;
}
.fold-table > tbody > tr.view.open td:first-child:before,
.fold-table > tbody > tr.view.open th:first-child:before {
  transform: rotate(180deg);
  color: var(--text-off-light);
}
.fold-table .fold > td {
  padding: 0 !important;
}
.fold .fold-content .table {
  margin-bottom: 0;
}
.fold-table .fold-content .desc {
  text-align: left;
  width: 100%;
  padding-left: 30px;
}
.fold-table table tbody {
  display: table-row-group;
}
.fold-table .fold-content .desc h5 {
  margin-top: 0;
}
.fold-table .fold-content > table {
  border: none;
}
.fold-table .tr-head {
  text-align: left !important;
}
.fold-table .td-head {
  max-width: 170px;
  font-weight: 500;
}
.fold-table .td-head.indent {
  text-align: left;
  padding-left: 35px;
  max-width: 120px;
}
.fold-table .td-content {
  max-width: 80px;
}
.fold-table .td-content.totals {
  font-weight: 400;
}
/**
* Transactions Table
*/
.table {
  font-size: 13px;
  color: var(--text-color);
}
.transaction-table {
  color: var(--text-color);
  border-collapse: collapse;
  width: 100%;
  background-color: transparent;
  display: flex;
  flex-flow: column;
  text-align: center;
  border-color: var(--bs-secondary) !important;
}

.transaction-table th {
  text-align: center;
  padding: 6px;
  border-bottom: 1px solid var(--card-bg);
  background-color: var(--card-bg);
  border: 1px solid var(--main-bg);
  flex: 0 0 auto;
  font-size: 13px;
}
.transaction-table td {
  font-size: 13px;
}

.transaction-table tbody {
  flex: 1 1 auto;
  display: block;
}

.transaction-table tr {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.table.striped tbody tr:nth-child(even),
.transaction-table tbody tr:nth-child(even) {
  background-color: var(--card-bg);
}
.table.striped tbody tr:nth-child(odd),
.transaction-table tbody tr:nth-child(odd) {
  background-color: var(--hover-bg);
}

.transaction-table tbody tr:has(td input:focus),
.transaction-table tbody tr:has(td textarea:focus) {
  box-shadow: 0 0 0 4px var(--accent-color);
}
.transaction-table td {
  padding: 6px;
  border-right: 1px solid var(--main-bg) !important;
}
.transaction-table tbody td.ta-sr span,
.transaction-table tbody td input:not([type="checkbox"]):not([type="radio"]),
.transaction-table tbody td textarea,
.transaction-table tbody td .selectable-option-selected {
  font-size: 13px;
  padding: 2px 8px;
  min-height: var(--input-height);
  width: 100%;
  border-radius: 0;
  background-color: inherit;
}
.transaction-table tbody td input:focus,
.transaction-table tbody td textarea:focus {
  outline: none;
  /* border: 1px solid var(--secondary-color) !important; */
  box-shadow: 0 0 4px 1px var(--accent-color-tr);
}
.transaction-table tbody tr {
  position: relative;
  transition: all 0.4s;
}
.transaction-table tbody tr.slideUp {
  opacity: 0;
  transform: translate(0, -55px);
}
.totals-table {
  width: 100%;
  height: 100%;
}
.totals-table span {
  font-size: 14px;
}
.totals-table tr {
  text-align: right;
  height: 30px;
}
/**
* Tables & DataTables
*/
.table-responsive {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.table-responsive > .table {
  margin-bottom: 0;
}

.table-responsive > .table.no-wrap > thead > tr > th,
.table-responsive > .table.no-wrap > tbody > tr > th,
.table-responsive > .table.no-wrap > tfoot > tr > th,
.table-responsive > .table.no-wrap > thead > tr > td,
.table-responsive > .table.no-wrap > tbody > tr > td,
.table-responsive > .table.no-wrap > tfoot > tr > td {
  white-space: nowrap;
}
.no-wrap {
  text-wrap: none;
  white-space: nowrap;
  overflow-x: hidden;
}

.table-card .filter-table {
  position: absolute;
  top: 0;
  right: 260px;
  padding: 9px;
}

.table-card .filter-table .selectric {
  height: 38px !important;
  width: 130px;
}

.table-search {
  position: absolute;
  font-size: 15px;
  right: 180px;
  top: 15px;
}
.dataTables_wrapper {
  position: initial;
}

.dataTables_wrapper .dataTables_length {
  position: absolute;
  top: 20px;
  left: 0;
  padding: 15px;
}

.dataTables_wrapper .dataTables_length:has(label div.selectric-wrapper) {
  padding: 9px;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--input-border);
  color: var(--text-color);
  background-color: var(--hover-bg);
}

.dataTables_wrapper .dataTables_length label:has(div.selectric-wrapper) {
  display: flex;
  align-items: center;
}

.dataTables_wrapper .dataTables_length .selectric {
  margin-right: 4px;
}

.dataTables_wrapper .dataTables_length .selectric-items {
  margin-left: 4px !important;
}

.dataTables_filter_container {
  color: var(--text-color) !important;
  border: none !important;
}

.dataTables_wrapper .dataTables_filter {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  text-align: left;
}

@media (max-width: 768px) {
  .dataTables_wrapper .dataTables_filter,
  .table-card .selectric,
  .table-search {
    display: none !important;
  }
}

.dataTables_wrapper .dataTables_filter label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
  margin-top: -10px;
}

.dataTables_wrapper .dataTables_filter input {
  width: 100%;
  border: 2px solid var(--input-border);
  margin-top: 7px;
  border-radius: 0 !important;
  height: var(--input-height);
  padding: 0.175rem 0.75rem;
  background-color: var(--hover-bg);
  color: var(--text-color);
  font-size: var(--fs-1);
  transition-property: border-color, box-shadow;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease-in-out, ease-in-out;
  transition-delay: 0s, 0s;
}

.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  box-shadow: 0 0 1px 4px rgba(0, 158, 0, 0.175);
  border-color: var(--primary-color) !important;
  background-color: var(--hover-bg);
  color: var(--input-text);
}

.dataTables_wrapper .dataTables_info {
  padding: 20px 10px !important;
}

.dataTables_wrapper .dataTables_paginate.paging_simple_numbers {
  padding: 20px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin: 0px 5px !important;
  padding: 3px 5px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var();
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--secondary-color) !important;
  color: var(--text-color) !important;
  border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
  color: var(--secondary-color) !important;
  border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--text-off-light) !important;
  border: none;
}

.dataTables_empty {
  text-align: center !important;
}

.custom-select-item {
  width: 100%;
}

.custom-select-item .row div {
  display: flex;
  align-items: center;
}
.custom-select-item .col-4 {
  font-size: 13px;
  display: flex;
  align-items: center;
}
.custom-select-item .colon {
  opacity: 0;
}
.custom-select-item .btn {
  min-width: 50%;
}
/** Paginatable Custom Css*/
.paginatable-pagingBox li.active {
  background-color: var(--primary-color);
}
.paginatable-rows .selectric {
  width: 60px;
  margin: 0 5px;
}
/**
* Page Titles and Headings
*/
.pagetitle {
  padding: 0 8px;
  height: 50px;
  width: 60%;
  position: sticky;
  top: calc(110px - var(--header-height));
  z-index: 10;
}
.edit-header {
  padding: 0.5rem 1rem;
}
.edit-ribbon {
  background-color: var(--bs-warning);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edit-ribbon a {
  border-radius: 0 !important;
  background-color: var(--accent-color);
}

.page-header,
.title-btns-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-btns-box > * {
  margin: 3px;
}

/**
* Arrows Css
*/
.fa-turn-up.left-down {
  rotate: -180deg;
}
.primary-contrast {
  color: var(--primary-color);
  background: var(--primary-color-bg);
}
.secondary-contrast {
  color: var(--secondary-color);
  background: var(--secondary-color-bg);
}
.accent-contrast {
  color: var(--accent-color);
  background: var(--accent-color-bg);
}
.danger-contrast {
  color: var(--danger-color);
  background: var(--danger-color-bg);
}
.muted-contrast {
  color: var(--text-off-light);
  background: var(--border-bg);
}
/* Example from [^2^][2] */
.shine-xs {
  --shine-size: 13px;
}
.shine-sm {
  --shine-size: 20px;
}
.shine-md {
  --shine-size: 30px;
}
.shine-lg {
  --shine-size: 50px;
}
.shine-xl {
  --shine-size: 70px;
}
.shine-primary {
  --shine-color: #00ff00;
  --shine-shadow: #00ff007e;
}
.shine-secondary {
  --shine-color: #005eff;
  --shine-shadow: #005eff7e;
}
.shine-accent {
  --shine-color: #f86300;
  --shine-shadow: #f863007e;
}
.shine-danger {
  --shine-color: #ff0026;
  --shine-shadow: #ff00267e;
}

.shine {
  position: relative;
  width: var(--shine-size, 15px);
  height: var(--shine-size, 15px);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.shine::before {
  content: "";
  background: var(--shine-color, #1e90ff);
  border: 0.5px solid #ffffff4c;
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  box-shadow: 0 0 3px 2px var(--shine-shadow, #1e90ff7e);
  animation: bshine 2s infinite;
}
.shine::after {
  content: "";
  background: var(--shine-color, #1e90ff);
  border: 0.5px solid #ffffff4c;
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  box-shadow: 0 0 3px 2px var(--shine-shadow, #1e90ff7e);
  animation: ashine 2s infinite;
}

@keyframes ashine {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes bshine {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

/**
*CFrom Switch
*/
.cswitch-xs {
  --cswitch-width: 30px;
  --cswitch-height: 15px;
}
.cswitch-sm {
  --cswitch-width: 40px;
  --cswitch-height: 20px;
}
.cswitch-md {
  --cswitch-width: 60px;
  --cswitch-height: 30px;
}
.cswitch-lg {
  --cswitch-width: 80px;
  --cswitch-height: 40px;
}
.cswitch-xl {
  --cswitch-width: 100px;
  --cswitch-height: 50px;
}
.cswitch {
  position: relative;
  width: var(--cswitch-width, 50px);
  height: var(--cswitch-height, 25px);
  background-color: var(--main-bg);
  box-shadow: inset 0 2px 8px 0 rgba(0, 0, 0, 0.25);
  border-radius: 24px;
  border: 1px solid var(--hover-bg);
  overflow: hidden;
  display: inline-flex;
  flex-direction: row;
  transition: all 500ms ease;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.cswitch .cswitch input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.cswitch label {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 4px;
  cursor: pointer;
}
.cswitch input {
  display: none;
}
.cswitch input + label::before {
  content: "Off";
  position: absolute;
  left: 53%;
  font-size: 80%;
  font-weight: bold;
  transition: left 0.3s;
  color: #777;
}
.cswitch input + label::after {
  content: "";
  position: absolute;
  left: 8%;
  z-index: 1;
  width: 40%;
  height: 80%;
  background-color: var(--hover-bg);
  border-radius: 50%;
  transition: left 0.15s ease-in;
}
.cswitch input:checked + label::before {
  content: "On";
  position: absolute;
  left: 15%;
  font-size: 80%;
  font-weight: bold;
  transition: left 0.3s;
  color: #f0efef;
}
.cswitch input:checked + label::after {
  content: "";
  position: absolute;
  left: 54%;
  z-index: 1;
  width: 40%;
  height: 80%;
  background-color: var(--hover-bg);
  border-radius: 50%;
  transition: left 0.15s ease-in;
}
.cswitch:has(input:not(.disabled):focus) {
  box-shadow: 0 0 1px 4px rgba(0, 158, 0, 0.175);
}
.cswitch:has(input:checked) {
  background-color: var(--primary-color);
}
.cswitch:has(input:disabled) {
  filter: invert(30%);
}
/**
*Slides
*/
.slideX {
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.15s linear;
}
.slideX.show {
  opacity: 1;
  transform: translateX(0px);
}
.slideY {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.15s linear;
}
.slideY.show {
  opacity: 1;
  transform: translateY(0px);
}
.slideXy {
  opacity: 0;
  transform: translate(200px, 100px);
  transition: all 0.15s linear;
}
.slideXy.show {
  opacity: 1;
  transform: translate(0, 0);
}
/**
* CForm Check
*/
.cform-check {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1.5rem;
}
.cform-check-xs {
  --check-size: 13px;
}
.cform-check-sm {
  --check-size: 16px;
}
.cform-check-md {
  --check-size: 20px;
}
.cform-check-lg {
  --check-size: 26px;
}
.cform-check-xl {
  --check-size: 32px;
}
.cform-check-xxl {
  --check-size: 40px;
}
.cform-check-rounded {
  --check-rd: 5px;
}
.cform-check-circle {
  --check-rd: 50%;
}
.cform-check-input {
  position: relative;
  min-width: calc(var(--check-size, 15px) + 1px) !important;
  max-width: calc(var(--check-size, 15px) + 1px);
  min-height: var(--check-size, 15px) !important;
  max-height: var(--check-size, 15px);
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  border: 2px solid var(--border-bg, rgba(0, 0, 0, 0.25));
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--check-rd, 0) !important;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.cform-check-input::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border: 8px solid var(--primary-color);
  border-radius: var(--check-rd, 0);
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}
.cform-check-input:checked::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border: 8px solid var(--primary-color);
  border-radius: var(--check-rd, 0);
  transform: scale(1);
}
.cform-check-input:hover,
.cform-check-input:checked:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 1px 4px rgba(0, 158, 0, 0.175);
}
.cform-check label {
  margin-left: 8px;
  display: inline-block;
}
.cform-check-input.is-valid ~ .cform-check-label,
.was-validated .cform-check-input:valid ~ .cform-check-label {
  color: var(--primary-color);
}
.cform-check-input.is-valid ~ .cform-check-label,
.was-validated .cform-check-input:invalid ~ .cform-check-label {
  color: var(--danger-color);
}
/**
*Bs Progress Bar
*/
.progress {
  border-radius: 0;
}

.img-preview {
  position: relative;
  width: 100%;
  height: 250px;
  border: 2px double var(--border-bg);
  border-radius: 0;
  overflow: hidden;
  background-color: var(--hover-bg);
  color: var(--accent-color);
  background: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.img-preview label {
  position: absolute;
  z-index: 1;
  opacity: 0.8;
  cursor: pointer;
  background-color: var(--secondary-color);
  color: #fff;
  width: 150px;
  height: 50px;
  font-size: 12px;
  line-height: 50px;
  text-transform: uppercase;
  top: 200px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
.img-preview input {
  line-height: 200px;
  font-size: 200px;
  position: absolute;
  opacity: 0;
  z-index: 10;
}
/**
* Table top filters
*/
.filter-box {
  min-width: 150px;
  margin: 0 5px;
}
/*
* Info Cards Panel for balances
*/

.info-panel {
  margin: 10px 0 20px 0;
  padding: 0;
}
.info-panel .info-item {
  padding: 2px;
}
.info-panel .info-item > div {
  position: relative;
  background-color: var(--primary-color);
  padding: 10px;
  cursor: pointer;
  transition: all 0.5s;
}
.info-panel .info-item > div:hover {
  transform: scale(1.05);
  box-shadow: 0 0 4px 1px #1111117e;
  z-index: 1;
}
.info-panel .info-item > div.active {
  transform: scale(1);
  filter: brightness(85%);
  box-shadow: 0 0 4px 1px #1111117e;
  z-index: 1;
}
.info-panel .info-item > div:hover::after,
.info-panel .info-item > div.active::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  border-bottom: 5px solid #1111117e;
}
.info-panel .info-item > div .amount {
  font-size: 30px;
  color: #e2e5e8;
  font-weight: 600;
}
.info-panel .info-item > div .description {
  color: #c9cdd1;
}
/**
*Montly Custom Css
*/
.monthly-wrp {
  background-color: var(--card-bg);
  border: 1px solid var(--card-bg);
}
.monthly-wrp:before {
  border-bottom: 6px solid var(--card-bg);
}
.monthly-wrp select option {
  padding: 3px;
}
.monthly-wrp table button:hover {
  background-color: var(--secondary-color);
}
.monthly-wrp table button.active {
  background-color: var(--primary-color);
}
.monthly-wrp table button.active:hover {
  background-color: var(--accent-color);
}

/** YearPicker Custom Css */
.yearpicker-container {
  position: absolute;
  color: var(--text-color);
  width: 280px;
  border: 1px solid var(--border-bg);
  border-radius: var(--card-rd);
  font-size: 1rem;
  box-shadow: var(--shadow-color);
  background-color: var(--card-bg);
  z-index: 10;
  margin-top: 0.2rem;
}

.yearpicker-header {
  display: flex;
  width: 100%;
  height: 2.5rem;
  border-bottom: 1px solid var(--border-bg);
  align-items: center;
  justify-content: space-around;
}

.yearpicker-prev,
.yearpicker-next {
  cursor: pointer;
  font-size: 2rem;
}

.yearpicker-prev:hover,
.yearpicker-next:hover {
  color: var(--primary-color);
}

.yearpicker-year {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
}

.yearpicker-items {
  list-style: none;
  padding: 1rem 0.5rem;
  flex: 0 0 33.3%;
  width: 100%;
}

.yearpicker-items:hover {
  background-color: var(--hover-bg);
  color: var(--secondary-color);
  cursor: pointer;
}

.yearpicker-items.selected {
  color: var(--primary-color);
}

.hide {
  display: none;
}

.yearpicker-items.disabled {
  pointer-events: none;
  color: var(--text-off-light);
}
/** BS5 Tooltip Custom Css */
.tooltip-inner {
  background-color: var(--text-color) !important; /* Set box color */
  color: var(--main-bg) !important;
  opacity: 0.85;
  border-radius: var(--card-rd);
  box-shadow: 1px 1px 4px var(--shadow-color);
  font-weight: 500;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--text-color) !important; /* Set arrow color */
  opacity: 0.85;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--text-color) !important; /* Set arrow color */
  opacity: 0.85;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--text-color) !important; /* Set arrow color */
  opacity: 0.85;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--text-color) !important; /* Set arrow color */
  opacity: 0.85;
}

/* Limited Height Sizes */
.min-h-0 {
  min-height: 0 !important;
}
.min-h-50 {
  min-height: 50% !important;
}
.min-h-75 {
  min-height: 75% !important;
}
.min-h-100 {
  min-height: 100% !important;
}
.max-h-0 {
  max-height: 0 !important;
}
.max-h-50 {
  max-height: 50% !important;
}
.max-h-75 {
  max-height: 75% !important;
}
.max-h-100 {
  max-height: 100% !important;
}
/* Limited Width Sizes */
.min-w-0 {
  min-width: 0 !important;
}
.min-w-50 {
  min-width: 50% !important;
}
.min-w-75 {
  min-width: 75% !important;
}
.min-w-100 {
  min-width: 100% !important;
}
.max-w-0 {
  max-width: 0 !important;
}
.max-w-50 {
  max-width: 50% !important;
}
.max-w-75 {
  max-width: 75% !important;
}
.max-w-100 {
  max-width: 100% !important;
}

.w-5 {
  width: 5% !important;
}
.w-10 {
  width: 10% !important;
}
.w-15 {
  width: 15% !important;
}
.w-20 {
  width: 20% !important;
}
.w-30 {
  width: 30% !important;
}
.w-35 {
  width: 35% !important;
}
.w-40 {
  width: 40% !important;
}
.w-45 {
  width: 45% !important;
}
.w-55 {
  width: 55% !important;
}
.w-60 {
  width: 60% !important;
}
.w-65 {
  width: 65% !important;
}
.w-70 {
  width: 70% !important;
}
.w-75 {
  width: 75% !important;
}
.w-80 {
  width: 80% !important;
}
.w-85 {
  width: 85% !important;
}
.w-90 {
  width: 90% !important;
}
.w-95 {
  width: 95% !important;
}

/** Vertical Line Css */
.vr {
  position: relative;
}
.vr::before {
  content: "";
  position: absolute;
  right: 1px;
  width: 1px;
  height: 30px;
  background-color: var(--text-color);
}
.vr.primary::before {
  background-color: var(--primary-color);
}
.vr.secondary::before {
  background-color: var(--secondary-color);
}
.vr.accent::before {
  background-color: var(--accent-color);
}
.vr.danger::before {
  background-color: var(--danger-color);
}
.vr.muted::before {
  background-color: var(--text-off-light);
}

.vr.xxsmall::before {
  height: 14px;
}
.vr.xsmall::before {
  height: 20px;
}
.vr.small::before {
  height: 25px;
}
.vr.medium::before {
  height: 40px;
}
.vr.large::before {
  height: 50px;
}
.vr.xl::before {
  height: 70px;
}
.vr.xxl::before {
  height: 100px;
}
.vr.xxxl::before {
  height: 150px;
}
.vr.thick::before {
  width: 2px;
}
.vr.m-thick::before {
  width: 3px;
}
.vr.l-thick::before {
  width: 4px;
}
.vr.xl-thick::before {
  width: 5px;
}
.vr.xxl-thick::before {
  width: 6px;
}

/** Shadow Css */
.shadow-none {
  box-shadow: none !important;
}
.shadow-xs {
  box-shadow: 0 0 1px 1px var(--shadow-color);
}
.shadow-sm {
  box-shadow: 0 0 2px 1px var(--shadow-color);
}
.shadow-md {
  box-shadow: 0 0 3px 1px var(--shadow-color);
}
.shadow-lg {
  box-shadow: 0 0 4px 1px var(--shadow-color);
}
.shadow-xl {
  box-shadow: 0 0 5px 1px var(--shadow-color);
}
.shadow-xxl {
  box-shadow: 0 0 6px 1px var(--shadow-color);
}
.shadow-xxxl {
  box-shadow: 0 0 7px 1px var(--shadow-color);
}
.shadow-top {
  box-shadow: 0 -6px 6px -6px var(--shadow-color);
}
.shadow-bottom {
  box-shadow: 0 6px 6px -6px var(--shadow-color);
}
.shadow-left {
  box-shadow: -6px 0 6px -6px var(--shadow-color);
}
.shadow-right {
  box-shadow: 6px 0 6px -6px var(--shadow-color);
}

.shadow-inset {
  box-shadow: inset 0 0 5px 1px var(--shadow-color);
}
.shadow-inset-top {
  box-shadow: inset 0 -1px 5px 1px var(--shadow-color);
}
.shadow-inset-bottom {
  box-shadow: inset 0 1px 5px 1px var(--shadow-color);
}
.shadow-inset-left {
  box-shadow: inset -1px 0 5px 1px var(--shadow-color);
}
.shadow-inset-right {
  box-shadow: inset 1px 0 5px 1px var(--shadow-color);
}