:root {
    --default-font-size: 16px;
    --aside-width: 13.75rem;
    --border-radius: .25rem;
    --border-radius-sm: .5rem;
    --border-radius-lg: 1rem;
    --border-radius-pill: 50rem
}

.accordion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .8rem
}

.accordion .accordion-item {
    border-radius: 1.0666666667rem;
    border: 1px solid #f0f0f0
}

.accordion .accordion-item .accordion-header .accordion-button {
    background: rgba(0, 0, 0, 0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    font-size: .9333333333rem;
    font-weight: 500;
    color: #1f1f1f;
    gap: .2666666667rem;
    -webkit-box-shadow: none;
    box-shadow: none
}

.accordion .accordion-item .accordion-header .accordion-button__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .2666666667rem
}

.accordion .accordion-item .accordion-header .accordion-button__text span:last-of-type {
    width: 100%;
    font-size: .8rem;
    color: #767d8b;
    display: none
}

.accordion .accordion-item .accordion-header .accordion-button.collapsed .accordion-button__text span {
    display: block
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Light.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-ExtraLight.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/IBMPlexSansArabic-Thin.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

html,
body {
    height: 100%
}

html {
    font-size: 1.0666666667rem;
    scroll-behavior: smooth;
    font-size: 80%
}

@media screen and (min-width: 576px) {
    html {
        font-size: 80%
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 80%
    }
}

@media screen and (min-width: 1400px) {
    html {
        font-size: .9vw
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size: .85vw
    }
}

@media screen and (min-width: 3000px) {
    html {
        font-size: .9vw
    }
}

body {
    position: relative;
    min-width: 21.3333333333rem;
    font-family: "IBM Plex Sans Arabic";
    text-align: initial;
    color: var(--color-text-color);
    --bs-body-color: color(color-primary);
    overflow-x: hidden;
    font-size: 1rem
}

body::-webkit-scrollbar {
    width: 12px;
    height: 12px
}

body::-webkit-scrollbar-thumb {
    background: #02955f;
    border-radius: 8px;
    border-inline: 2px solid #f5f5f9
}

body::-webkit-scrollbar-track {
    background: #f5f5f9;
    border-radius: 8px
}

body {
    scrollbar-face-color: #02955f;
    scrollbar-track-color: #f5f5f9
}

.theme-dark body {
    background-image: none;
    background: linear-gradient(74deg, #443b37 -17.04%, #463d3b 54.94%, #3a302d 85.54%)
}

* {
    margin: 0;
    padding: 0
}

::-moz-selection {
    background-color: #02955f;
    color: #fff
}

::selection {
    background-color: #02955f;
    color: #fff
}

.text-muted {
    color: #6c737f
}

.no-scroll {
    overflow-y: hidden
}

.disabled {
    opacity: 1;
    pointer-events: none;
    background: #fafafb
}

.custom-tooltip {
    --bs-tooltip-bg: #02955F
}

.theme-dark .custom-tooltip {
    --bs-tooltip-bg: $color-secondary
}

a,
button {
    cursor: pointer
}

.visible-hidden {
    visibility: hidden
}

* {
    margin: 0;
    padding: 0;
    text-align: initial
}

h1 {
    font-size: 2.1333333333rem;
    font-family: "IBM Plex Sans Arabic";
    font-weight: 600;
    margin: 0
}

h2 {
    font-size: 1.8666666667rem;
    font-family: "IBM Plex Sans Arabic";
    font-weight: 600;
    margin: 0
}

h3 {
    font-size: 1.6rem;
    font-family: "IBM Plex Sans Arabic";
    font-weight: 600;
    margin: 0
}

h4 {
    font-size: 1.4666666667rem;
    font-family: "IBM Plex Sans Arabic";
    font-weight: 600;
    margin: 0
}

h5 {
    font-size: 1.2rem;
    font-family: "IBM Plex Sans Arabic";
    font-weight: 600;
    margin: 0
}

h6 {
    font-size: 1.0666666667rem;
    font-family: "IBM Plex Sans Arabic";
    font-weight: 600;
    margin: 0
}

p {
    margin: 0
}

a {
    text-decoration: none
}

.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

a:hover {
    text-decoration: none
}

[dir=rtl] [type=email],
[dir=rtl] [type=number],
[dir=rtl] [type=tel],
[dir=rtl] [type=url] {
    direction: rtl
}

.custom-loader {
    position: fixed;
    inset: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: rgba(58, 106, 200, .7);
    -webkit-backdrop-filter: blur(40px) brightness(1.015);
    backdrop-filter: blur(40px) brightness(1.015);
    z-index: 999
}

.theme-dark .custom-loader {
    background-color: rgba(47, 43, 61, .3)
}

.custom-loader .loader__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.0666666667rem
}

.custom-loader .loader__container .loader-icon {
    margin-bottom: 1.0666666667rem;
    font-family: "IBM Plex Sans Arabic"
}

[dir=rtl] .custom-loader .loader__container .loader-icon {
    font-family: "IBM Plex Sans Arabic"
}

.custom-loader .loader__container .loader-title {
    display: block;
    margin-top: .5333333333rem;
    text-align: center;
    font-size: 1.2rem;
    color: #fff
}

.custom-loader .loader {
    color: #fff;
    position: relative;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    letter-spacing: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.custom-loader .loader::before {
    content: "";
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    right: 70px;
    bottom: 20px;
    height: 24px;
    width: 5.15px;
    background: currentColor
}

.custom-loader .loader::after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    left: 125px;
    top: 2px;
    border-radius: 50%;
    background: #0b3c9b;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: animloader 1s ease-in infinite;
    animation: animloader 1s ease-in infinite
}

@-webkit-keyframes animloader {
    0% {
        -webkit-transform: translateY(8px) scaleY(1) scaleX(1.25);
        transform: translateY(8px) scaleY(1) scaleX(1.25)
    }

    25%,
    75% {
        -webkit-transform: translateY(-5px) scaleY(1.2) scaleX(1);
        transform: translateY(-5px) scaleY(1.2) scaleX(1)
    }

    50% {
        -webkit-transform: translateY(-10px) scaleY(1) scaleX(1);
        transform: translateY(-10px) scaleY(1) scaleX(1)
    }

    100% {
        -webkit-transform: translateY(8px) scaleY(0.8) scaleX(0.8);
        transform: translateY(8px) scaleY(0.8) scaleX(0.8)
    }
}

@keyframes animloader {
    0% {
        -webkit-transform: translateY(8px) scaleY(1) scaleX(1.25);
        transform: translateY(8px) scaleY(1) scaleX(1.25)
    }

    25%,
    75% {
        -webkit-transform: translateY(-5px) scaleY(1.2) scaleX(1);
        transform: translateY(-5px) scaleY(1.2) scaleX(1)
    }

    50% {
        -webkit-transform: translateY(-10px) scaleY(1) scaleX(1);
        transform: translateY(-10px) scaleY(1) scaleX(1)
    }

    100% {
        -webkit-transform: translateY(8px) scaleY(0.8) scaleX(0.8);
        transform: translateY(8px) scaleY(0.8) scaleX(0.8)
    }
}

.custom-cursor__cursor {
    width: 1.6666666667rem;
    height: 1.6666666667rem;
    border-radius: 100%;
    border: 1px solid var(--color-tertiary);
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    -webkit-transform: translate(calc(-50% + 5px), -50%);
    transform: translate(calc(-50% + 5px), -50%);
    z-index: 999991;
    opacity: .5
}

.custom-cursor__cursor-two {
    width: .6666666667rem;
    height: .6666666667rem;
    border-radius: 100%;
    background-color: var(--color-tertiary);
    opacity: .5;
    position: fixed;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: width .3s, height .3s, opacity .3s;
    transition: width .3s, height .3s, opacity .3s;
    z-index: 999991
}

.custom-cursor__hover {
    background-color: var(--color-primary);
    opacity: .1;
    width: 5rem;
    height: 5rem
}

.custom-cursor__innerhover {
    width: 1.6666666667rem;
    height: 1.6666666667rem;
    opacity: .1
}

.bg-primary {
    background-color: var(--color-tertiary) !important
}

.bg-primary-light {
    background-color: var(--color-primary-light) !important
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important
}

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

.bg-teal {
    background-color: var(--color-teal) !important
}

.bg-purple {
    background-color: var(--color-purple) !important;
    background-color: #8789d5 !important
}

.bg-yellow {
    background-color: var(--color-yellow) !important;
    background-color: #fad45a !important
}

.fs-10 {
    font-size: .6666666667rem
}

.fs-11 {
    font-size: .7333333333rem
}

.fs-12 {
    font-size: .8rem
}

.fs-13 {
    font-size: .8666666667rem
}

.fs-14 {
    font-size: .9333333333rem
}

.fs-15 {
    font-size: 1rem
}

.fs-16 {
    font-size: 1.0666666667rem
}

.fs-17 {
    font-size: 1.1333333333rem
}

.fs-18 {
    font-size: 1.2rem
}

.fs-19 {
    font-size: 1.2666666667rem
}

.fs-20 {
    font-size: 1.3333333333rem
}

.fs-21 {
    font-size: 1.4rem
}

.fs-22 {
    font-size: 1.4666666667rem
}

.fs-23 {
    font-size: 1.5333333333rem
}

.fs-24 {
    font-size: 1.6rem
}

.fs-25 {
    font-size: 1.6666666667rem
}

.fs-26 {
    font-size: 1.7333333333rem
}

.fs-27 {
    font-size: 1.8rem
}

.fs-28 {
    font-size: 1.8666666667rem
}

.fs-29 {
    font-size: 1.9333333333rem
}

.fs-30 {
    font-size: 2rem
}

.fs-32 {
    font-size: 2.1333333333rem
}

.fs-35 {
    font-size: 2.3333333333rem
}

.fs-40 {
    font-size: 2.6666666667rem
}

.fs-45 {
    font-size: 3rem
}

.border-bottom-1 {
    border-bottom: 1px solid #dce3ef !important
}

.border-start-1 {
    -webkit-border-start: 1px solid #dce3ef !important;
    border-inline-start: 1px solid #dce3ef !important
}

.border-end-1 {
    -webkit-border-end: 1px solid #dce3ef !important;
    border-inline-end: 1px solid #dce3ef !important
}

.item-chart {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.list-progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .6666666667rem
}

.list-progress .item-progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .4rem
}

.list-progress .item-progress__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.list-progress .item-progress__label span {
    font-size: .9333333333rem;
    font-weight: 400;
    color: #1f1f1f
}

.list-progress .progress {
    --bs-progress-bg: #F3F7FE;
    --bs-progress-border-radius: 1.625rem;
    height: .4666666667rem
}

.list-progress .progress .progress-bar {
    border-radius: 1.625rem;
    -webkit-animation-name: animateBar;
    animation-name: animateBar;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

@-webkit-keyframes animateBar {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes animateBar {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.item-result {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .3333333333rem
}

.item-result .price {
    font-size: 1.2rem;
    color: #1f1f1f;
    font-weight: 500
}

.item-result .Percentage {
    font-size: 1rem;
    color: #32a840;
    font-weight: 500;
    direction: ltr
}

.card-summary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 2.1333333333rem
}

.card-summary__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    gap: .8rem;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.card-summary__info p {
    font-size: .9333333333rem;
    color: #767d8b
}

.card-summary__info .total-score {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

.card-summary__info .total-score__title {
    font-size: 1rem;
    color: #767d8b;
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .2666666667rem
}

.card-summary__info .total-score__title::before {
    content: "";
    width: .6666666667rem;
    height: .6666666667rem;
    border-radius: 50%;
    background-color: #2f65cc
}

.card-summary__info .total-score__title.cash::before {
    background-color: #32a840
}

.card-summary__info .total-score__price span {
    font-size: 1rem;
    font-weight: 500;
    color: #1f1f1f
}

.card-summary__info .total-score__price span:first-of-type {
    color: #767d8b
}

.card-summary__info .btn-secondary {
    margin-top: .8rem
}

.card-summary__chart {
    width: 9.9333333333rem;
    height: 9.9333333333rem
}

.card-summary__chart canvas {
    width: 100%
}

.card-summary__chart img {
    width: 100%
}

.list-investment-fund {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.3333333333rem;
  margin-bottom: 100px;
}

.list-investment-fund .item-investment-fund {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .5333333333rem;
    padding: 1.3333333333rem;
    border: .0666666667rem solid #f0f0f0;
    border-radius: .8rem;
    gap: .8rem;
    -webkit-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out
}

.list-investment-fund .item-investment-fund:hover {
    border: .0666666667rem solid #02955f
}

.list-investment-fund .item-investment-fund__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.0666666667rem;
    padding-bottom: .8rem;
    border-bottom: .0666666667rem solid #f0f0f0
}

.list-investment-fund .item-investment-fund__header__logo {
    width: 4.0666666667rem;
    height: 2.6666666667rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: .3333333333rem
}

.list-investment-fund .item-investment-fund__header__logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.list-investment-fund .item-investment-fund__header__name {
    color: #1f1f1f;
    font-size: 1.0666666667rem;
    font-weight: 500
}

.list-investment-fund .item-investment-fund__header .col-btn {
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    height: 2.5333333333rem;
    width: auto
}

.list-investment-fund .item-investment-fund__header .col-btn .btn {
    height: 2.5333333333rem
}

.list-investment-fund .item-investment-fund__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.1333333333rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.list-investment-fund .item-investment-fund__body__price span:first-child {
    color: #767d8b;
    font-size: .9333333333rem;
    font-weight: 400
}

.list-investment-fund .item-investment-fund__body__price span:last-child {
    color: #1f1f1f;
    font-size: 1.2rem;
    font-weight: 500;
    -webkit-margin-start: .5333333333rem;
    margin-inline-start: .5333333333rem
}

.list-investment-fund .item-investment-fund__body__item span:first-child {
    color: #767d8b;
    font-size: .9333333333rem;
    font-weight: 400
}

.list-investment-fund .item-investment-fund__body__item span:last-child {
    color: #1f1f1f;
    font-size: 1.2rem;
    font-weight: 500;
    -webkit-margin-start: .5333333333rem;
    margin-inline-start: .5333333333rem
}

.list-investment-fund .item-investment-fund__body__performance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .5333333333rem
}

.list-investment-fund .item-investment-fund__body__performance span:first-child {
    color: #767d8b;
    font-size: .9333333333rem;
    font-weight: 400
}

.list-investment-fund .item-investment-fund__body__performance div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.list-investment-fund .item-investment-fund__body__performance div span:first-child {
    color: #1f1f1f;
    font-size: 1.0666666667rem;
    font-weight: 500
}

.list-investment-fund .item-investment-fund__body__performance div span:last-child {
    color: #02955f;
    font-size: 1.0666666667rem;
    font-weight: 500;
    -webkit-margin-start: .5333333333rem;
    margin-inline-start: .5333333333rem
}

.list-item-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .8rem
}

.item-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.item-brand__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .5333333333rem
}

.item-brand__header__logo {
    width: 4.0666666667rem;
    height: 2.6666666667rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: .3333333333rem;
    border: 1px solid #f0f0f0;
    border-radius: 1.0666666667rem
}

.item-brand__header__logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.item-brand__header__name {
    font-size: 1.2rem;
    color: #1f1f1f
}

.total-investment {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .5333333333rem
}

.total-investment__label {
    font-size: .9333333333rem;
    color: #767d8b;
    font-weight: 400
}

.total-investment__value {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.total-investment__value div:first-of-type {
    font-weight: 500;
    color: #1f1f1f;
    font-size: 1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.total-investment__value div:last-of-type {
    font-weight: 500;
    color: #02955f;
    font-size: 1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .1333333333rem
}

.total-investment__value div:last-of-type small {
    font-size: .9333333333rem
}

.item-days {
    color: #767d8b;
    font-size: .9333333333rem
}

.color-gray {
    color: #767d8b;
    font-size: 1rem;
    font-weight: 400
}

.bank-transfer {
    border: 1px dashed #02955f;
    border-radius: 8px;
    padding: 16px;
    background-color: #f4fbf7;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: 1.6rem
}

.bank-transfer h3 {
    color: #1f1f1f;
    font-size: 1.3333333333rem;
    font-weight: bold;
    margin-bottom: 0
}

.bank-transfer ol {
    list-style: none;
    padding-right: 0;
    margin: 0;
    counter-reset: item
}

.bank-transfer ol li {
    margin-bottom: 1rem;
    position: relative;
    padding-right: 30px;
    line-height: 1.6
}

.bank-transfer ol li::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    right: 0;
    top: .15em;
    background-color: #02955f;
    color: #fff;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 0;
    font-size: .9333333333rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.copy-text-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fafafb;
    border-radius: .5333333333rem;
    padding: 1.0666666667rem .8rem;
    width: 100%
}

.copy-text-card .copy-text {
    font-size: .9333333333rem;
    color: #1f1f1f;
    font-weight: 500
}

.copy-text-card .copy-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    cursor: pointer
}

.copy-text-card .copy-icon img {
    width: 1.3333333333rem;
    height: 1.3333333333rem;
    -o-object-fit: contain;
    object-fit: contain
}

.copy-text-card .copy-icon:hover {
    opacity: .7
}

.notes {
    color: #1f1f1f;
    font-size: .8rem;
    font-weight: 400
}

.upload-box {
    width: 100%
}

.upload-box__zone {
    background: rgba(0, 0, 0, 0);
    border: 1px dashed #02955f;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.upload-box__zone:hover {
    opacity: .9
}

.upload-box__icon {
    width: 24px;
    height: 24px;
    margin-bottom: 12px
}

.upload-box__icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.upload-box__text {
    font-size: 14px;
    font-weight: 500;
    color: #1f1f1f;
    text-align: center
}

.upload-box__text span {
    display: block;
    color: #7d7d7d;
    margin-top: 8px;
    font-size: 12px
}

.upload-box-file {
    margin-top: 15px;
    background: #f6fffa;
    border-radius: 12px;
    padding: 12px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #333;
    font-size: 14px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05)
}

.upload-box-file__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px
}

.upload-box-file__info .upload-box__file-info-img {
    width: 32px;
    height: 32px;
    opacity: .45
}

.upload-box-file__info .upload-box__file-info-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.upload-box-file__info .upload-box__file-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.upload-box__delete {
    background: none;
    border: none;
    color: red;
    cursor: pointer;
    font-size: 18px
}

.amount-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: .8rem 1.0666666667rem;
    border: .0666666667rem solid #f0f0f0;
    background: #fff;
    border-radius: .5333333333rem;
    width: 100%
}

.amount-field .amount-input {
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    background: rgba(0, 0, 0, 0);
    width: 100%
}

.amount-field .amount-input::-webkit-input-placeholder {
    font-size: .9333333333rem;
    font-weight: 500;
    color: rgba(31, 31, 31, .5)
}

.amount-field .amount-input::-moz-placeholder {
    font-size: .9333333333rem;
    font-weight: 500;
    color: rgba(31, 31, 31, .5)
}

.amount-field .amount-input:-ms-input-placeholder {
    font-size: .9333333333rem;
    font-weight: 500;
    color: rgba(31, 31, 31, .5)
}

.amount-field .amount-input::-ms-input-placeholder {
    font-size: .9333333333rem;
    font-weight: 500;
    color: rgba(31, 31, 31, .5)
}

.amount-field .amount-input::placeholder {
    font-size: .9333333333rem;
    font-weight: 500;
    color: rgba(31, 31, 31, .5)
}

.amount-field .currency {
    color: #7d7d7d;
    font-size: 1rem;
    font-weight: 500;
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.main-layout .page-content {
    padding-block: 1.3333333333rem
}

.main-layout .page-content .main-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.main-layout .page-content .main-head .page-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem
}

.main-layout .page-content .main-head .page-title h1 {
    font-size: 1.3333333333rem;
    font-weight: 600
}

.main-layout .page-content .main-head .page-title h3 {
    font-size: 1.2rem;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.col-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.col-pagination .pagination {
    gap: .5rem;
    margin: 0
}

.col-pagination .pagination .page-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    padding: 0 .8rem;
    height: 2.6666666667rem;
    min-width: 2.6666666667rem;
    isolation: isolate;
    overflow: hidden;
    border-radius: .5333333333rem
}

.col-pagination .pagination .page-item:only-child {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 2.6666666667rem;
    padding-inline: 1rem;
    background-color: #fff;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    font-size: 1.3333333333rem;
    border-radius: .5rem;
    color: var(--color-primary);
    isolation: isolate;
    overflow: hidden
}

.col-pagination .pagination .page-item .page-link {
    position: absolute;
    inset: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #1f1f1f
}

@media(max-width: 991.98px) {
    .col-pagination .pagination .page-item .page-link {
        font-size: .9333333333rem
    }
}

.col-pagination .pagination .page-item .page-link[disabled] {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.col-pagination .pagination .page-item.disabled .page-link {
    background-color: #fff;
    color: #1f1f1f
}

.col-pagination .pagination .page-item:is(:hover, :focus, :active, .active) {
    color: #fff;
    background-color: #02955f;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none
}

.col-pagination .pagination .page-item:is(:hover, :focus, :active, .active) .page-link {
    background-color: #02955f;
    color: #fff
}

.col-pagination .pagination .page-item:is(:hover, :focus, :active, .active) svg {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.breadcrumb {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    margin-bottom: 0
}

.breadcrumb>li:first-of-type::before {
    display: none
}

.breadcrumb>li:first-of-type>ul>li::before {
    display: none
}

.breadcrumb li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 !important;
    line-height: 1;
    font-size: 1.2rem;
    font-family: "IBM Plex Sans Arabic";
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    --bs-breadcrumb-divider: ""
}

.breadcrumb li:first-of-type a {
    color: #02955f
}

.breadcrumb li a {
    color: #02955f;
    text-decoration: none;
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-size: 1.0666666667rem;
    font-weight: 500
}

.breadcrumb li a svg {
    width: 1.3333333333rem;
    height: 1.3333333333rem;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.breadcrumb li a:hover {
    color: #02955f;
    text-decoration: none
}

.breadcrumb li a:hover svg path {
    fill: var(--color-secondary) !important
}

@media(max-width: 575.98px) {
    .breadcrumb li a {
        font-size: 1.0666666667rem
    }
}

.breadcrumb li.active {
    color: #767d8b !important;
    font-size: 1.0666666667rem
}

.breadcrumb li::before {
    margin-inline: .5rem;
    padding: 0;
    -webkit-padding-start: 8px;
    padding-inline-start: 8px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='15' viewBox='0 0 9 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7.5 7.5L1 14' stroke='%23A29591'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .5333333333rem;
    height: 1.0666666667rem;
    width: 1.0666666667rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

[dir=rtl] .breadcrumb li::before {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-padding-start: 0;
    padding-inline-start: 0
}

ul.breadcrumb-item {
    padding: 0;
    margin: 0
}

ul.breadcrumb-item::before {
    display: none
}

.item-desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .5333333333rem
}

.item-desc p {
    color: #767d8b;
    font-size: .9333333333rem;
    font-weight: 400
}

button {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    font-family: inherit
}

.btn {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 1rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 3.3333333333rem;
    min-width: 6.6666666667rem;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    height: 2.8rem
}

.btn .icon {
    width: 1.3333333333rem;
    height: 1.3333333333rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.btn .icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.btn-sm {
    padding: .5333333333rem 1.6rem
}

.btn-primary {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: $color-tertiary;
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: rgba(2, 149, 95, 0.85);
    --bs-btn-hover-border-color: rgba(2, 149, 95, 0.85);
    --bs-btn-focus-shadow-rgb: var(--col$color-primary-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: rgba(2, 149, 95, 0.8);
    --bs-btn-active-border-color: rgba(2, 149, 95, 0.8)
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #02955F;
    --bs-btn-border-color: #02955f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(2, 149, 95, 0.85);
    --bs-btn-hover-border-color: rgba(2, 149, 95, 0.85);
    --bs-btn-focus-shadow-rgb: 120, 117, 255;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #02955f;
    --bs-btn-active-border-color: #02955f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(#02955f, 0.5);
    --bs-btn-disabled-border-color: #605dff
}

.btn-primary img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.btn-outline-dange {
    --bs-btn-color: #FE4D4F;
    --bs-btn-border-color: #FE4D4F;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(254, 77, 79, 0.85);
    --bs-btn-hover-border-color: rgba(254, 77, 79, 0.85) --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(254, 77, 79, 0.85);
    --bs-btn-active-border-color: #01427F;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FE4D4F;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #FE4D4F;
    --bs-gradient: none
}

.btn-secondary {
    --bs-btn-color: #1F1F1F;
    --bs-btn-bg: #F9F9F9;
    --bs-btn-border-color: #F0F0F0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #313846;
    --bs-btn-hover-border-color: #2e3542;
    --bs-btn-focus-shadow-rgb: 88, 94, 108;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2e3542;
    --bs-btn-active-border-color: #2c323e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3a4252;
    --bs-btn-disabled-border-color: #3a4252;
    font-weight: 500
}

.btn-secondary:hover img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.btn-success {
    --bs-btn-color: #000;
    --bs-btn-bg: #37d80a;
    --bs-btn-border-color: #37d80a;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #55de2f;
    --bs-btn-hover-border-color: #4bdc23;
    --bs-btn-focus-shadow-rgb: 47, 184, 9;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #5fe03b;
    --bs-btn-active-border-color: #4bdc23;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #37d80a;
    --bs-btn-disabled-border-color: #37d80a
}

.btn-info {
    --bs-btn-color: #000;
    --bs-btn-bg: #2db6f5;
    --bs-btn-border-color: #2db6f5;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #4dc1f7;
    --bs-btn-hover-border-color: #42bdf6;
    --bs-btn-focus-shadow-rgb: 38, 155, 208;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #57c5f7;
    --bs-btn-active-border-color: #42bdf6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #2db6f5;
    --bs-btn-disabled-border-color: #2db6f5
}

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffbc2b;
    --bs-btn-border-color: #ffbc2b;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffc64b;
    --bs-btn-hover-border-color: #ffc340;
    --bs-btn-focus-shadow-rgb: 217, 160, 37;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffc955;
    --bs-btn-active-border-color: #ffc340;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffbc2b;
    --bs-btn-disabled-border-color: #ffbc2b
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #FE4D4F;
    --bs-btn-border-color: #FE4D4F;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(254, 77, 79, 0.85);
    --bs-btn-hover-border-color: rgba(254, 77, 79, 0.85);
    --bs-btn-focus-shadow-rgb: 120, 117, 255;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #FE4D4F;
    --bs-btn-active-border-color: #FE4D4F;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(#FE4D4F, 0.5);
    --bs-btn-disabled-border-color: #FE4D4F
}

.btn-danger img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.btn-light {
    --bs-btn-color: #1F1F1F;
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #F0F0F0;
    --bs-btn-hover-color: #1F1F1F;
    --bs-btn-hover-bg: #f6f6f6;
    --bs-btn-hover-border-color: rgba(31, 31, 31, 0.5);
    --bs-btn-focus-shadow-rgb: 181, 184, 192;
    --bs-btn-active-color: #1F1F1F;
    --bs-btn-active-bg: #f8f8f8;
    --bs-btn-active-border-color: rgba(240, 240, 240, 0.6);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #1F1F1F;
    --bs-btn-disabled-bg: #d5d9e2;
    --bs-btn-disabled-border-color: #d5d9e2
}

.btn-light:hover {
    border-color: #f0f0f0
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #262626;
    --bs-btn-hover-border-color: #1a1a1a;
    --bs-btn-focus-shadow-rgb: 38, 38, 38;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #333;
    --bs-btn-active-border-color: #1a1a1a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-disabled-border-color: #000
}

.dropdown .dropdown-menu {
    display: block;
    border: 0;
    padding: 1.4666666667rem 1.0666666667rem;
    opacity: 0;
    visibility: hidden;
    inset-inline-end: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    top: 2rem;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    will-change: transform;
    background: #fff;
    border-radius: 1.0666666667rem;
    -webkit-box-shadow: 0 5px 30px rgba(47, 43, 61, .14);
    box-shadow: 0 5px 30px rgba(47, 43, 61, .14)
}

.dropdown .dropdown-menu::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 7px;
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    inset-inline-end: .9333333333rem
}

.dropdown .dropdown-menu .dropdown-item {
    color: var(--color-text-color);
    margin-bottom: .5rem;
    font-size: 1rem;
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-bg: transparent
}

.dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--color-primary)
}

.theme-dark .dropdown .dropdown-menu {
    background: rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px)
}

.dropdown .dropdown-menu.show {
    inset: 0px 0px auto auto;
    opacity: 1;
    visibility: visible;
    margin-top: 0 !important;
    -webkit-transform: translateY(3.7rem) !important;
    transform: translateY(3.7rem) !important
}

[dir=rtl] .dropdown .dropdown-menu.show {
    inset: 0px auto auto 0px
}

.dropdown:hover .dropdown-menu {
    inset: 0px 0px auto auto;
    opacity: 1;
    visibility: visible;
    margin-top: 0 !important;
    -webkit-transform: translateY(3.5rem) !important;
    transform: translateY(3.5rem) !important
}

[dir=rtl] .dropdown:hover .dropdown-menu {
    inset: 0px auto auto 0px
}

.btn-add {
    border-radius: .5333333333rem;
    border: 1px solid #ced5e2;
    background: #ebf0f8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 2rem;
    color: var(--color-secondary);
    font-size: 1.0666666667rem;
    font-weight: 400;
    gap: .4666666667rem
}

.btn-add .icon {
    font-size: 2rem
}

.btn-add span {
    font-weight: 500
}

.btn-new {
    color: #fff;
    font-size: 1rem
}

.btn-new:hover {
    text-decoration: underline;
    color: #fff
}

.btn-filter {
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    border-radius: .8rem;
    background-color: #fafafb;
    border: .0666666667rem solid #f0f0f0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.btn-filter img {
    width: 1.3333333333rem;
    height: 1.3333333333rem;
    -o-object-fit: contain;
    object-fit: contain
}

.btn-filter:hover {
    background-color: #02955f
}

.btn-filter:hover img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.col-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    gap: .8rem
}

.btn-view {
    width: 20px;
    height: 20px
}

.btn-view img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%
}

.header .header-top {
    width: 100%;
    background: #02955f;
    background: -webkit-gradient(linear, left top, right top, color-stop(23%, rgb(2, 149, 95)), to(rgb(110, 175, 107)));
    background: linear-gradient(90deg, rgb(2, 149, 95) 23%, rgb(110, 175, 107) 100%)
}

.header .header-top .header-top-contant {
    padding-block: 1.0666666667rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3rem
}

.header .header-top .header-top-contant .logo {
    color: #fff;
    font-size: 2.6666666667rem;
    font-weight: 700
}

.header .header-top .header-top-contant .profile {
    -webkit-margin-start: auto;
    margin-inline-start: auto
}

.header .header-top .header-top-contant .profile .dropdown-menu li a {
    text-align: center;
    border-radius: 3.3333333333rem;
    padding-block: .8rem;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.header .header-top .header-top-contant .profile .dropdown-menu li:first-of-type a {
    border: 1px solid #f0f0f0
}

.header .header-top .header-top-contant .profile .dropdown-menu li:first-of-type a:hover {
    background: #f0f0f0
}

.header .header-top .header-top-contant .profile .dropdown-menu li:last-of-type a {
    background: #fe4d4f;
    color: #fff
}

.header .header-top .header-top-contant .profile .dropdown-menu li:last-of-type a:hover {
    background: #d63b3d
}

.header .header-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #1f1f1f;
    padding-block: .8rem
}

.header .header-nav .navbar .navbar-nav .nav-item .nav-link {
    font-size: 1rem;
    color: #fff;
    font-weight: 500;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.header .header-nav .navbar .navbar-nav .nav-item .nav-link:hover {
    color: #02955f
}

.header .header-nav .navbar .navbar-nav .nav-item .nav-link.active {
    color: #02955f
}

.form-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.form-label {
    margin-bottom: .75rem;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    font-size: 1rem;
    color: #767d8b;
    font-weight: 500
}

.form-control,
.form-select {
    padding: .8rem 1.2rem;
    border: .0666666667rem solid #f0f0f0;
    font-size: 1.0666666667rem;
    border-radius: .5333333333rem;
    height: 3rem;
    color: #1f1f1f;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transition: border-color, background-color .3s ease-in-out;
    transition: border-color, background-color .3s ease-in-out;
    line-height: 1.3
}

.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder {
    color: #8f939c
}

.form-control::-moz-placeholder,
.form-select::-moz-placeholder {
    color: #8f939c
}

.form-control:-ms-input-placeholder,
.form-select:-ms-input-placeholder {
    color: #8f939c
}

.form-control::-ms-input-placeholder,
.form-select::-ms-input-placeholder {
    color: #8f939c
}

.form-control::placeholder,
.form-select::placeholder {
    color: #8f939c
}

.form-control:is(:active, :focus),
.form-select:is(:active, :focus) {
    border-color: #02955f !important;
    border-width: .125rem !important;
    -webkit-box-shadow: 0 2px 6px rgba(2, 149, 95, .3) !important;
    box-shadow: 0 2px 6px rgba(2, 149, 95, .3) !important
}

.form-control:disabled,
.form-select:disabled {
    background-color: rgba(47, 43, 61, .6)
}

.form-control.is-invalid,
.form-select.is-invalid {
    -webkit-box-shadow: 0 2px 6px rgba(255, 0, 0, .3) !important;
    box-shadow: 0 2px 6px rgba(255, 0, 0, .3) !important;
    border-width: .0666666667rem
}

.theme-dark .form-control,
.theme-dark .form-select {
    background-color: rgba(0, 0, 0, 0)
}

.form-select option {
    padding-block: .5rem
}

.passowrd-control {
    position: relative
}

.passowrd-control button {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    margin-block: auto
}

.passowrd-control button svg {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 1.25rem;
    width: 1.25rem;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.theme-dark .passowrd-control button svg {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.passowrd-control button:hover {
    -webkit-transform: scale(1.12);
    transform: scale(1.12)
}

.passowrd-control:has(.is-invalid) button {
    inset-inline-end: 2rem
}

div:has(>.focused)>.form-label,
div:has(div>.focused)>.form-label {
    color: var(--color-secondary)
}

div:has(>.is-invalid)>.form-label,
div:has(div>.is-invalid)>.form-label {
    color: var(--color-danger)
}

.form-check {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: .5333333333rem;
    margin-bottom: 0
}

.form-check input[type=radio] {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: .9333333333rem;
    height: .9333333333rem;
    background: #fff;
    -webkit-box-shadow: 0px 4px 4px 0px #dbe2ee;
    box-shadow: 0px 4px 4px 0px #dbe2ee;
    border-radius: 50%;
    position: relative;
    border: none;
    margin-left: 0;
    float: none
}

.form-check input[type=radio]:checked {
    background-color: #fff;
    border: none
}

.form-check input[type=radio]:checked::before {
    content: "";
    display: block;
    width: .5333333333rem;
    height: .5333333333rem;
    background-color: #01427f;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.form-check .form-check-label {
    font-size: .9333333333rem;
    color: var(--color-secondary)
}

.input-group-abs {
    gap: 1.0666666667rem
}

.input-group-abs>.input-group-prepend,
.input-group-abs>.input-group-append {
    position: absolute;
    padding: .3rem;
    z-index: 11;
    line-height: 1;
    top: 0;
    bottom: 0;
    width: 2.6666666667rem;
    height: 98%;
    padding: 0;
    margin: auto;
    overflow: hidden
}

.input-group-abs>div.input-group-append {
    inset-inline-end: 0
}

.input-group-abs>div.input-group-append+.form-control {
    -webkit-padding-end: 2.6666666667rem;
    padding-inline-end: 2.6666666667rem
}

.input-group-abs>div.input-group-prepend {
    inset-inline-end: .0666666667rem
}

.input-group-abs>div.input-group-prepend+.form-control {
    -webkit-padding-end: 2.6666666667rem;
    padding-inline-end: 2.6666666667rem
}

.input-group-abs .form-control {
    border-radius: .8rem !important
}

.input-group-abs .form-control:first-child {
    -webkit-padding-end: 2.6666666667rem;
    padding-inline-end: 2.6666666667rem
}

.input-group-abs .form-control:last-child {
    -webkit-padding-end: 2.6666666667rem;
    padding-inline-end: 2.6666666667rem
}

.input-group-abs button {
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.input-group-abs button.btn-search {
    color: #161616;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: .8rem
}

.input-group-abs button.btn-search:hover {
    background-color: #02955f
}

.input-group-abs button.btn-search:hover img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.header-serach {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .8rem
}

.custom-checkbox {
    padding: 1rem;
    border: 1px solid #f0f0f0;
    border-radius: .5333333333rem
}

.custom-checkbox .form-check-input {
    width: 1.1113333333rem;
    height: 1.1113333333rem;
    border: 1.5px solid #767d8b;
    border-radius: .25rem;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    margin-top: .3rem;
    margin-left: 0;
    margin-right: 0
}

.custom-checkbox .form-check-input:checked {
    background-color: #02955f;
    border-color: #02955f
}

.custom-checkbox .form-check-input:checked::before {
    position: absolute;
    top: 0;
    left: 3px;
    color: #fff;
    font-size: .85rem;
    line-height: 1.25rem
}

.custom-checkbox .form-check-input:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

.custom-checkbox .form-check-label {
    margin-left: .5rem;
    cursor: pointer;
    color: #767d8b;
    font-size: 1.0666666667rem;
    font-weight: 400
}

.select2 .select2-selection {
    border: .0666666667rem solid #d9dfea;
    font-size: 1.0666666667rem;
    border-radius: .5rem;
    height: 3rem;
    color: #1f1f1f;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.select2 .select2-selection .select2-selection__rendered {
    line-height: 3.2rem;
    color: #1f1f1f
}

.select2 .select2-selection .select2-selection__arrow {
    top: .6666666667rem;
    left: .6666666667rem !important
}

.select2-dropdown {
    border: .0666666667rem solid #f0f0f0;
    border-radius: .5rem
}

.select2-dropdown .select2-search {
    display: none
}

.select2-container {
    z-index: 9999 !important
}

.form-control {
    position: relative
}

.form-control.flatpickr-input::after {
    content: "";
    width: 1.0666666667rem;
    height: 1.0666666667rem;
    background-image: url("../images/calendar.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.0666666667rem;
    position: absolute;
    inset-inline-end: 0;
    top: 2px
}

.card {
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-title-spacer-y: 1.25rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: #F0F0F0;
    --bs-card-border-radius: var(--border-radius-lg);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-bg: color(white);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: transparent;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: rgba(0, 0, 0, 0);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: .8rem
}

.card.card-start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 100%
}

.card.card-start .card-body {
    -webkit-border-end: 1px solid #dce3ef !important;
    border-inline-end: 1px solid #dce3ef !important
}

.card.card-end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%
}

.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color)
}

.card-body .card-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: .8rem
}

.card-body .card-head__title h3 {
    font-size: 1rem;
    color: #767d8b
}

.card-body .card-head__icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 1rem;
    height: 1rem
}

.card-body .card-head__icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.card-body .item-icon {
    width: 2.9333333333rem;
    height: 2.9333333333rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    border: .0666666667rem solid #f0f0f0;
    margin-bottom: .6rem
}

.card-body .card-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .5333333333rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.card-body .card-info__text {
    font-size: 1.0666666667rem;
    font-weight: 500;
    color: #1f1f1f
}

.card-body .card-info__link {
    font-size: 1.0666666667rem;
    font-weight: 500;
    color: #767d8b;
    cursor: pointer
}

.card-body .card-info__link:hover {
    text-decoration: underline;
    color: #02955f
}

.card-header {
    padding: 1.3333333333rem 1.3333333333rem 0rem 1.3333333333rem;
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: 0
}

.card-header h3 {
    color: #212121;
    font-size: 1.2rem
}

.card-iconText {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    padding-block: .6666666667rem
}

.card-iconText__icon {
    color: var(--color-white);
    width: 2.9333333333rem
}

.card-iconText__icon svg {
    width: 100%
}

.card-iconText__text h3 {
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0
}

.card-iconText__text span {
    font-size: 1.0666666667rem;
    color: var(--color-white)
}

.exchange-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 2rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    position: relative
}

.exchange-box .exchange-side {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: .75rem 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: .5rem;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-start-end-radius: 1rem;
    border-end-end-radius: 1rem;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.exchange-box .exchange-side .label {
    color: #02955f;
    font-weight: 400;
    font-size: 1.2rem
}

.exchange-box .exchange-side .value {
    font-size: 1rem;
    font-weight: 600;
    width: 98%;
    background: rgba(0, 0, 0, 0);
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0 !important;
    text-align: end;
    -moz-appearance: textfield
}

.exchange-box .exchange-side .value::-webkit-inner-spin-button,
.exchange-box .exchange-side .value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.exchange-box .exchange-side--active {
    background-color: #e6fff6;
    border: 1px solid #02955f;
    border-start-start-radius: 1rem;
    border-end-start-radius: 1rem;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

.exchange-box .exchange-side--active .value {
    text-align: start
}

.exchange-box .swap-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #02955f;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
    -webkit-transition: -webkit-transform .6s ease;
    transition: -webkit-transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease, -webkit-transform .6s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 600px;
    perspective: 600px
}

.exchange-box .swap-icon img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    -webkit-transition: -webkit-transform .6s ease;
    transition: -webkit-transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease, -webkit-transform .6s ease
}

.exchange-box .swap-icon:hover {
    -webkit-transform: translate(-50%, -50%) rotateY(180deg);
    transform: translate(-50%, -50%) rotateY(180deg)
}

.total-balance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 2rem;
    padding: 2.6666666667rem 1.3333333333rem;
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 1.6rem
}

.total-balance span {
    font-size: 2rem;
    color: #1f1f1f;
    font-weight: 600
}

.total-balance p {
    color: #1f1f1f;
    font-size: 1rem;
    font-weight: 400
}

.available-wallet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1rem
}

.available-wallet__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .3rem
}

.available-wallet__text span {
    font-weight: 500
}

.available-wallet__text span:first-of-type {
    color: #1f1f1f;
    font-size: 1rem
}

.available-wallet__text span:last-of-type {
    color: #767d8b;
    font-size: .9333333333rem
}

.card-invoice {
    padding: 1.0666666667rem 0;
    border-radius: 1.0666666667rem;
    border: .0666666667rem solid #f0f0f0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .8rem
}

.card-invoice__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-inline: 1.0666666667rem;
    padding-block: .6666666667rem
}

.card-invoice__item__label {
    color: #767d8b;
    font-size: 1.0666666667rem;
    font-weight: 400
}

.card-invoice__item__value {
    color: #1f1f1f;
    font-size: 1.0666666667rem;
    font-weight: 500
}

.card-invoice__item:nth-last-child(odd) {
    background-color: rgba(240, 240, 240, .368627451)
}

.card-invoice__item:last-of-type {
    padding-top: .6666666667rem;
    border-top: 1px solid #f0f0f0;
    background-color: rgba(0, 0, 0, 0)
}

.card-wallet {
    padding: 1rem;
    background-color: #fafafb;
    border: .0666666667rem solid #f0f0f0;
    border-radius: 1.0666666667rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .8rem;
    position: relative
}

.card-wallet::after {
    content: "";
    width: 1.3333333333rem;
    height: 1.3333333333rem;
    background-color: #fff;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    inset-inline-end: 2.6666666667rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: .4rem solid #02955f
}

.card-wallet__icon {
    width: 1.3333333333rem;
    height: 1.3333333333rem
}

.card-wallet__icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.card-wallet__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .3333333333rem
}

.card-wallet__text__label {
    font-size: 1rem;
    font-weight: 500;
    color: #1f1f1f
}

.card-wallet__text__value {
    font-size: torem(14px);
    font-weight: 500;
    color: #767d8b
}

.card-payment {
    margin-bottom: 1rem
}

.card-payment input[type=radio] {
    display: none
}

.card-payment input[type=radio]:checked+.card-payment__label {
    background-color: #fafafb
}

.card-payment input[type=radio]:checked+.card-payment__label .card-payment__label__radio {
    opacity: 1;
    visibility: visible;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.card-payment input[type=radio]:checked+.card-payment__label .card-payment__label__radio::after {
    opacity: 1
}

.card-payment__label {
    background-color: rgba(0, 0, 0, 0);
    border-radius: .6666666667rem;
    padding: 1.3333333333rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    -webkit-transition: border .3s;
    transition: border .3s;
    border: 1px solid #f0f0f0
}

.card-payment__label:hover {
    border-color: #02955f
}

.card-payment__label__radio {
    width: 1.1333333333rem;
    height: 1.1333333333rem;
    border-radius: 50%;
    background-color: #02955f;
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    position: relative;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .2s;
    transition: .2s;
    display: none
}

.card-payment__label__radio::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: .4rem;
    height: .4rem;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: .2s;
    transition: .2s
}

.card-payment__label__number {
    font-weight: 500;
    color: #1f1f1f;
    font-size: 1.0666666667rem
}

.card-payment__label__logo {
    width: 2.4rem;
    height: auto;
    -webkit-margin-end: .2666666667rem;
    margin-inline-end: .2666666667rem
}

.card-payment__label__logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.card-payment[disabled] {
    pointer-events: none;
    cursor: not-allowed
}

.card-pricing {
    padding: 1.6rem 1.3333333333rem;
    background-color: #fafafb;
    border: .0666666667rem solid #f0f0f0;
    border-radius: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1.0666666667rem
}

.card-pricing__value {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.card-pricing__value span:first-child {
    color: #767d8b;
    font-size: .9333333333rem;
    font-weight: 400
}

.card-pricing__value .price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .4rem;
    color: #1f1f1f;
    direction: ltr
}

.card-pricing__value .price span {
    font-size: 2.1333333333rem;
    font-weight: 600
}

.card-pricing__value .price sub {
    font-size: 1rem;
    font-weight: 400
}

.card-pricing__value__link {
    color: #1f1f1f;
    font-size: 1.0666666667rem;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .2666666667rem;
    cursor: pointer
}

.card-pricing__value__link span {
    color: #1f1f1f !important
}

.card-pricing__btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .8rem
}

.card-pricing__btn .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .8rem;
    min-width: 6.6666666667rem;
    height: 3rem
}

.card-pricing__btn .btn .icon {
    width: .8rem;
    height: .8rem
}

.card-pricing__btn .btn .icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.card-deposit {
    width: 100%;
    max-height: 181px;
    height: 100%;
    border: 1px solid #f0f0f0;
    padding: 3.3333333333rem 1.3333333333rem;
    border-radius: 1.0666666667rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    gap: 3.2rem
}

.card-deposit__input {
    font-size: 2.1333333333rem;
    font-weight: 600;
    border: none;
    outline: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    text-align: center
}

.card-deposit__input::-webkit-outer-spin-button,
.card-deposit__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.card-deposit__input[type=number] {
    -moz-appearance: textfield
}

.card-deposit__note {
    font-size: 1rem;
    color: #1f1f1f
}

.item-Payment-method {
    padding: 1rem;
    border-radius: 1rem;
    background-color: #fafafb;
    border: 1px solid #f0f0f0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: .5333333333rem;
    position: relative
}

.item-Payment-method::after {
    content: "";
    background: url(../images/arrow-left.svg) no-repeat;
    background-size: contain;
    width: 1.0666666667rem;
    height: 1.0666666667rem;
    display: block;
    position: absolute;
    top: 2.4rem;
    inset-inline-end: 1.4666666667rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.item-Payment-method__icon {
    width: 1.3333333333rem;
    height: 1.3333333333rem
}

.item-Payment-method__icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.item-Payment-method__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .3333333333rem
}

.item-Payment-method__text h4 {
    font-size: 1rem;
    font-weight: 500;
    color: #1f1f1f;
    margin-bottom: 0
}

.item-Payment-method__text p {
    font-size: .9333333333rem;
    font-weight: 400;
    color: #767d8b
}

.card-amount {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .4666666667rem;
    padding: 1rem;
    border: 1px solid #dce3ef;
    border-radius: .5333333333rem
}

.card-amount__header {
    padding: .4666666667rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.card-amount__header__title {
    font-size: 1rem;
    font-weight: 500;
    color: #1f1f1f
}

.card-amount__header__icon {
    width: 2.4rem;
    height: 2.4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f4fbf7
}

.card-amount__header__icon img {
    width: 1.2rem;
    height: 1.2rem;
    -o-object-fit: contain;
    object-fit: contain
}

.card-amount__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .8rem
}

.card-amount__body p {
    font-size: .9333333333rem;
    font-weight: 400;
    color: #767d8b;
    margin-bottom: 0
}

.card-amount__body .accordion {
    --bs-accordion-btn-icon: url(../images/arrow-down.svg)
}

.card-amount__body .accordion .accordion-item {
    border: 0
}

.card-amount__body .accordion .accordion-item .accordion-button {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    background-color: #f4fbf7;
    color: #02955f;
    border-radius: .5333333333rem;
    font-size: .9333333333rem;
    font-weight: 500;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .6666666667rem
}

.card-amount__body .accordion .accordion-item .accordion-button::after {
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: contain;
    width: .8rem;
    height: .4rem
}

.card-amount__body .accordion .accordion-item .accordion-body {
    padding-inline: 0
}

.card-amount__body .card-recovery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .8rem;
    border: 1px solid #dce3ef;
    border-radius: .5333333333rem
}

.card-amount__body .card-recovery:not(:last-of-type) {
    margin-bottom: .8rem
}

.card-amount__body .card-recovery__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .3333333333rem
}

.card-amount__body .card-recovery__item:last-of-type {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.card-amount__body .card-recovery__item__value {
    font-size: .9333333333rem;
    font-weight: 500;
    color: #1f1f1f
}

.card-amount__body .card-recovery__item__date {
    font-size: .9333333333rem;
    font-weight: 400;
    color: #767d8b
}

.tabs .nav-tabs {
    border: 0
}

.tabs .nav-tabs .nav-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.tabs .nav-tabs .nav-item .nav-link {
    padding: 1rem 2rem;
    border-radius: 1rem 1rem 0 0;
    border: 0;
    font-size: 1.125rem;
    width: 100%;
    text-align: center;
    color: #767d8b;
    border-bottom: .0666666667rem solid #f0f0f0;
    font-weight: 400
}

.tabs .nav-tabs .nav-item .nav-link.active {
    font-weight: 500;
    border-color: #1f1f1f;
    color: #1f1f1f
}

.tabs .nav-tabs .nav-item .nav-link:hover {
    color: #1f1f1f;
    border-color: #1f1f1f
}

.tabs .tab-content {
    padding: 1.6rem;
    background-color: var(--color-white)
}

.tabs.tabs-days nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.tabs.tabs-days nav .nav-tabs {
    gap: 1.2rem
}

.tabs.tabs-days nav .nav-tabs .nav-link {
    color: #8e9cb4;
    font-size: 1.0666666667rem;
    font-weight: 400;
    padding: 0 .4rem;
    border: 0 !important;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.tabs.tabs-days nav .nav-tabs .nav-link:first-of-type {
    -webkit-padding-start: 0;
    padding-inline-start: 0
}

.tabs.tabs-days nav .nav-tabs .nav-link.active {
    border: none;
    color: var(--color-text-color);
    font-weight: 600 !important
}

.tabs.tabs-days nav .nav-tabs .nav-link:is(:hover, :active, :focus) {
    border: 0;
    color: var(--color-text-color);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.tabs.tabs-days nav .nav-date {
    font-size: .8666666667rem;
    color: var(--color-text-color);
    font-weight: 600
}

.tabs .header-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.tabs .header-tabs__action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .8rem
}

.filter-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff
}

.filter-nav__item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: .75rem 1rem;
    font-size: .9333333333rem;
    font-weight: 500;
    color: #767d8b;
    background: #fff;
    border-left: 1px solid #f0f0f0;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    -webkit-transition: .3s;
    transition: .3s
}

.filter-nav__item:first-child {
    border-right: none
}

.filter-nav__item:hover {
    background-color: #f8f8f8
}

.filter-nav__item.active {
    background-color: #00966a;
    color: #fff
}

@media(max-width: 576px) {
    .filter-nav {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .filter-nav__item {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
        flex: 1 0 50%
    }
}

.table {
    border-color: #f0f0f0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%
}

.table thead th {
    padding: 1rem;
    color: #667085;
    background-color: #fafafb !important;
    border-top: 1px solid #f0f0f0
}

.table thead th:first-child {
    border-start-start-radius: 1rem
}

.table thead th:last-child {
    border-start-end-radius: 1rem;
    text-align: center
}

.table thead th .ms-headerSortTitleLink {
    color: var(--color-text-color) !important
}

.table tr td {
    padding: 1rem;
    color: var(--color-text-color);
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0);
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0
}

.table tr td img {
    height: 1.8666666667rem
}

.table tr td .color-primary {
    color: #02955f
}

.table tr:last-child td:first-child {
    border-end-start-radius: 1rem
}

.table tr:last-child td:last-child {
    border-end-end-radius: 1rem
}

.td-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 8px
}

.td-actions .btn {
    height: 2.2666666667rem;
    padding: 0 1.6rem;
    line-height: 2.2666666667rem;
    font-size: 1.0666666667rem;
    margin-bottom: 8px;
    margin: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.td-actions .btn:not(:first-of-type) {
    -webkit-margin-start: .5333333333rem;
    margin-inline-start: .5333333333rem
}

.td-actions .btn.btn-icon {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 2.2666666667rem;
    padding: 0;
    border: none !important
}

.td-actions .btn.btn-icon svg,
.td-actions .btn.btn-icon img {
    width: 1.3333333333rem
}

.td-actions .btn:hover svg,
.td-actions .btn:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

@media(max-width: 991px) {
    .table thead {
        display: none
    }

    .table tr {
        display: table;
        width: 100%
    }

    .table td {
        display: table-row;
        position: relative;
        width: 100%;
        vertical-align: top;
        min-height: 2.4rem
    }

    .table td .td-data {
        display: block;
        padding: .5333333333rem
    }

    .table td .td-actions {
        text-align: start;
        padding: 0 .5333333333rem
    }

    .table tr td:first-child {
        background: #f9f4f2;
        --bs-table-accent-bg: #f9f4f2
    }

    .table.no-responsive-bg-color tr td:first-child {
        background-color: #fff;
        color: var(--color-primary)
    }

    .table.no-responsive-bg-color tr:not(:first-child) td:first-child {
        background-color: #fff;
        color: var(--color-primary);
        border-top: .1333333333rem solid var(--color-border-color)
    }

    .table td {
        border-bottom: .0666666667rem solid rgba(131, 149, 183, .25)
    }

    .table td:before {
        content: attr(data-th);
        display: table-cell;
        padding: .6666666667rem;
        width: 8.6666666667rem;
        line-height: 2.4rem
    }
}

.info-prand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.info-prand__logo {
    width: 2.6666666667rem;
    -webkit-margin-end: .3333333333rem;
    margin-inline-end: .3333333333rem
}

.info-prand__logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.badge {
    padding: .5333333333rem;
    min-width: 4.8666666667rem;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    font-size: 1rem;
    font-weight: 500;
    border-radius: .2666666667rem
}

.badge.badge-warning {
    background-color: #fff9f0;
    color: #fc9c0f
}

.badge.badge-success {
    background-color: #f3fff4;
    color: #32a840
}

.badge.badge-danger {
    background-color: #fef5f5;
    color: #fe4d4f
}

.datepicker-wrapper {
    position: relative
}

.datepicker-wrapper .datepicker-icon {
    position: absolute;
    inset-inline-end: 10px;
    top: 10px
}

.flatpickr-day {
    color: #1f1f1f
}

.flatpickr-day.today {
    background-color: #02955f;
    color: #fff;
    border-radius: 50%
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background-color: #02955f;
    color: #fff;
    border-radius: 50%
}

.flatpickr-day:hover {
    background-color: rgba(2, 149, 95, .2);
    color: #1f1f1f
}

.flatpickr-months,
.flatpickr-weekdays {
    background-color: #02955f;
    color: #fff
}

.flatpickr-months span.flatpickr-weekdays,
.flatpickr-weekdays span.flatpickr-weekdays {
    color: #fff !important
}

span.flatpickr-weekdays {
    color: #fff !important
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #fff
}

.flatpickr-current-month {
    color: #fff
}

.flatpickr-current-month input.cur-month {
    color: #fff
}

.dayContainer {
    padding-block: 1rem
}

span.flatpickr-weekday {
    color: #fff !important
}

.modal .modal-dialog .modal-content {
    border: 0 !important;
    border-radius: 1.0666666667rem
}

.modal .modal-dialog .modal-content .modal-header {
    padding-block: 1.3333333333rem;
    padding-inline: 1.3333333333rem
}

.modal .modal-dialog .modal-content .modal-body {
    padding-block: 1.3333333333rem;
    padding-inline: 1.3333333333rem
}

.modal .modal-dialog .modal-content .modal-footer {
    padding-block: 1.3333333333rem;
    padding-inline: 1.3333333333rem
}

.item-confirm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    gap: 2.3333333333rem;
    margin-bottom: 2.6666666667rem
}

.item-confirm__icon {
    width: 10.4rem;
    height: 10.4rem;
    border-radius: 50%;
    background-color: #ebfff5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.item-confirm__icon img {
    width: 3.8rem;
    height: 3.8rem;
    -o-object-fit: contain;
    object-fit: contain
}

.item-confirm__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .5333333333rem
}

.item-confirm__text h6 {
    font-size: 1.3333333333rem;
    color: #1f1f1f;
    font-weight: 600
}

.item-confirm__text p {
    font-size: 1rem;
    color: #767d8b;
    font-weight: 400
}

.modal .btn-close {
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease
}

.modal .btn-close:hover {
    -webkit-transform: rotate(90deg) scale(1.2);
    transform: rotate(90deg) scale(1.2)
}

.drop-zone {
    width: 100%;
    height: 14.9333333333rem;
    border: 1px dashed #ccc;
    border-radius: 10px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    padding: 1.3333333333rem;
    -webkit-column-gap: .5333333333rem;
    -moz-column-gap: .5333333333rem;
    column-gap: .5333333333rem
}

.drop-zone .icon {
    font-size: 30px;
    color: #666
}

.drop-zone p {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0
}

.drop-zone .description {
    font-size: 12px;
    color: #888
}

.drop-zone .upload-btn {
    margin-top: 10px;
    background-color: #f3f4f6;
    color: var(--color-text-color);
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.drop-zone .upload-btn:hover {
    background-color: rgba(243, 244, 246, .5960784314)
}

.file-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 250px;
    font-size: 14px;
    font-weight: 500;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.file-item .file-icon {
    color: green;
    font-size: 16px;
    margin-right: 8px
}

.file-item .file-name {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.file-item .remove-file {
    cursor: pointer;
    color: #999;
    font-size: 16px;
    border: none;
    background: none
}

.file-item .remove-file:hover {
    color: #333
}

.login-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    background-color: #02955f;
    padding: 6.6666666667rem
}

.login-container .form-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 37.6rem
}

.login-container .form-body .form-container {
    background-color: #3d3d3d;
    padding: 3rem 2rem;
    border-radius: 1rem;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.login-container .form-body .form-container .form-title {
    color: #fff;
    font-size: 1.3333333333rem;
    font-weight: 600;
    margin-bottom: .5rem;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.login-container .form-body .form-container .sub-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 4rem;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.theme-dark .login-container .form-body .form-container .sub-title {
    color: #fff
}

.theme-dark .login-container .form-body .form-container {
    background-color: #2f2b3d
}

.login-container .form-body .form-container .form-label {
    color: #fff;
    font-weight: 400;
    font-size: 1rem
}

.login-container .form-body .form-container .form-control {
    height: 4.1333333333rem
}

.login-container .form-body .form-container .iti {
    width: 100%
}

.login-container .form-body .form-container .iti .form-control {
    padding-left: 0 !important;
    -webkit-padding-start: 6rem;
    padding-inline-start: 6rem
}

.login-container .form-body .form-container .iti .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0)
}

.login-container .form-body .form-container .iti .iti__flag {
    -webkit-margin-end: .5333333333rem;
    margin-inline-end: .5333333333rem
}

@media(max-width: 1199.98px) {
    .login-container .form-body {
        padding-inline: 2rem
    }
}

.login-container .logo {
    font-size: 6rem;
    font-weight: bold;
    color: #fff
}

.login-container .otp-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .8rem;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 1.3333333333rem 0
}

.login-container .otp-input {
    width: 3.9333333333rem;
    height: 4.3333333333rem;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    border: .0666666667rem solid #f0f0f0;
    border-radius: .5333333333rem;
    outline: none;
    -webkit-transition: border .3s;
    transition: border .3s
}

.login-container .otp-input:focus {
    border-color: #007f5f
}

.login-container .resend-time {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 1.3333333333rem
}

.login-container .resend-link {
    color: var(--color-primary);
    font-size: 1.0666666667rem;
    text-decoration: underline;
    margin-bottom: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.login-container .password-rules {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .2666666667rem;
    list-style-type: none;
    margin-top: .6666666667rem;
    margin-bottom: 0;
    padding: 0
}

.login-container .password-rules li {
    position: relative;
    color: #fff;
    font-size: .9333333333rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .3333333333rem
}

.login-container .password-rules li::before {
    content: "";
    width: 1.0666666667rem;
    height: 1.0666666667rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13L8.52642 15.8211C9.35374 16.483 10.5536 16.3848 11.2624 15.5973L19 7' stroke='%2328303F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.login-container .account-locked {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.login-container .account-locked__icon {
    width: 8.5333333333rem;
    height: 8.5333333333rem;
    background-color: #4c4b4b;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2.6666666667rem
}

.login-container .account-locked__icon img {
    width: 3.9333333333rem;
    -o-object-fit: contain;
    object-fit: contain
}

.login-container .account-locked__info {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .8rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 1.6rem
}

.login-container .account-locked__info h5 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-align: center
}

.login-container .account-locked__info p {
    text-align: center;
    color: #fff;
    font-size: 1rem
}

.login-container .account-locked__btn {
    width: 100%
}

.login-container .account-locked__btn .btn {
    width: 100%
}
.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;

  @media screen and (max-width: 768px) {
    flex-direction: column;
    align-items: center;
  }
}