@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Theme color */

:root {
    --font-heading-color: #44475be8;
    --font-text: var(--font-heading-color);
    --font-lite-text: #858585;
    --lite-container: #f1f1ff;
    --border-color: #dcdcdc;
    --border-solid: 0.8px solid var(--border-color);
    --border-dashed: 0.8px dashed var(--border-color);

    --primary-color: #e2e2e2;
    --primary-solid: #9f8af3;
    --white-color: #fff;
    --panel-color: #f3f3f3;
    --panel-bg-wrap: #00000080;

    --black-color: #000;
    --dark-green: #057105;

    --lite-gradiant: linear-gradient(45deg, #f9f9f9, #f7f7f7);
    --primary-gradiant: linear-gradient(140deg, #dadbff94, #f6f0ff73);

    --lite-color: #898989;
    --shaded-gradiant: #ede4ff;

    --lite-card-background: #f1f1ff57;
    --lite-card-border: 1px solid #eee3ff;

    --body-bg: #f5f5f8;
    --shadow: 0 0 18px #a5a5a53b;
    --image-bg: #f6f0ff;
    --card-color: #d6ffa8;
    --card-btn-color: #e6dcfd;

    --ring-color-1: rgb(140 255 164);
    --ring-color-2: rgb(253 255 151);
    --ring-color-3: rgb(235 203 255);

    --button-color: rgb(91 59 123);

    --healthy-color: var(--table-head-color);
    --warn-color: rgb(255, 223, 39);
    --clear-color: rgb(78 147 255);
    --danger-color: rgb(255, 72, 72);

    --table-bg-color: #fff;
    --table-head-color: #04b488;

    --softbros-bk: #3f3f3f;
    --softbros-wt: #fff;
}

table {
    background-color: var(--table-bg-color);
    border-collapse: collapse;
}

th,
td {
    padding: 6px 18px;
    text-align: left;
    min-width: 120px;
}

th {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

tr:has(th) {
    border-bottom: var(--border-solid);
    background-color: var(--lite-container);
    color: var(--font-text);
}

td a {
    border-bottom: var(--border-dashed);
}

td {
    font-size: 14px;
    color: var(--font-text);
}

tr:nth-child(even) {
    background-color: var(--lite-card-background);
}

button.svg svg {
    width: 20px;
}

button.svg {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shadow_btn {
    box-shadow: 3px 3px 18px #dfdfdf;
    padding: 6px 18px;
    border-radius: 4px;
}

body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
    background: var(--body-bg);
}

main {
    margin: auto;
    max-width: 1400px;
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 60px;
}

input,
select,
textarea {
    padding: 8px 20px;
    border: var(--border-solid);
    border-radius: 6px;
    outline: 0;
    font-family: "Poppins", sans-serif;
}

p,
span,
strong,
label,
sup,
sub,
a,
strong,
li,
i {
    font-size: 16px;
    color: var(--font-text);
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    text-transform: capitalize;
}

strong {
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--font-heading-color);
    font-weight: 500;
    text-transform: capitalize;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

.tiny_text {
    font-size: 14px;
}

.nano_text {
    font-size: 12px;
    line-height: 18px;
}

.super_nano_text {
    font-size: 9px;
    line-height: normal;
}

.dwarf-btn {
    background-color: var(--lite-container);
    padding: 11px 20px 10px 60px;
    border-radius: 32px;
    width: max-content;
    display: flex;
    gap: 10px;
    border: 0;
    transition: background-color .4s ease;
}

.dwarf-btn:hover {
    background-color: var(--primary-color);
}

.primary-solid {
    color: var(--primary-solid);
}

.slim {
    font-weight: 400
}

.transparent-btn {
    background-color: transparent;
    color: var(--font-text);
    font-size: 16px;
}

.bankDepositContainer {
    border-bottom: var(--border-dashed);
}

.dwarf-btn::before {
    transform: translateY(2px);
}

.lite_color {
    color: var(--lite-color);
}

button {
    padding: 6px 18px;
    font-size: 14px;
    cursor: pointer;
    text-transform: capitalize;
    border-radius: 28px;
    border: 0;
    width: max-content;
    color: var(--black-color);
    border-color: var(--black-color);
}

.showmore {
    background-color: var(--lite-container);
    width: auto;
    display: inline-block;
    padding: 2px 16px;
    border-radius: 10px;
    margin: 50px 0;
}

.showmore::after {
    content: '';
    width: 8px;
    height: 8px;
    display: inline-block;
    border-top: 2px solid var(--font-lite-text);
    border-right: 2px solid var(--font-lite-text);
    transform: rotate(135deg);
    margin: 0 0 3px 6px;
}

.flex {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    margin: 12px 0;
}

.bold {
    font-weight: 600;
}

.auditBtns p {
    margin: 0;
}

.uppercase {
    text-transform: uppercase;
}

.center {
    text-align: center;
    margin: auto;
}

.cursor {
    cursor: pointer;
}

:disabled,
input[disabled] {
    background-color: transparent;
    border: 0;
    cursor: not-allowed;
    opacity: .7;
}

.markcolorgreen {
    color: var(--table-head-color);
}

.title {
    margin-bottom: 38px;
    border-bottom: var(--border-dashed);
}

.fancy-btn {
    background-color: transparent;
    color: var(--font-text);
    font-weight: 600;
    font-size: 16px;
}

.classic-btn {
    padding: 0;
    background: transparent;
    font-weight: 600;
    color: var(--font-text);
    font-size: 16px;
    border: 0;
}

.graphic,
.image_wrapper,
.printer,
.graphic-plain {
    position: relative;
    padding-left: 48px;
    background-color: transparent;
}

.printer {
    width: 0;
    padding: 0;
}

.primary-color {
    color: var(--primary-color);
}

.graphic::before,
.printer::before,
.image_wrapper::before,
.graphic-plain::before,
.hamburger .toggle::after {
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    width: 29px;
    height: 29px;
    display: block;
    position: absolute;
    left: 0;
    bottom: 2px;
    padding: 4px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.graphic-small::before {
    width: 20px;
    height: 20px;
}

.graphic-plain::before {
    background-color: transparent;
    bottom: -8px;
    transform: translateX(-20px);
}

.graphic-plain:has(button)::before {
    bottom: 2px;
    transform: none;
}

.graphic-plain {
    padding: 0 18px;
}

.graphic-nano::before {
    width: 16px;
    height: 16px;
    left: 16px;
    bottom: -3px;
}

.delete-icon::before {
    background-image: url(/static/icons/delete.svg);
}

.hi-user-icon::before {
    background-image: url(/static/icons/hi-user.svg);
}

.medal-icon::before {
    background-image: url(/static/icons/medal.svg);
}

.download-icon::before {
    background-image: url(/static/icons/download.svg);
}

.call-icon::before {
    background-image: url(/static/icons/call.svg);
}

.flag-icon::before {
    background-image: url(/static/icons/flag.svg);
}

.setting-icon::before {
    background-image: url(/static/icons/setting.svg);
}

.image-icon::before {
    background-image: url(/static/icons/image.svg);
}

.attach-icon::before {
    background-image: url(/static/icons/attach.svg);
}

.hamburger .toggle::after {
    background-image: url(/static/icons/menu.svg);
    left: -20px;
}

.edit-icon::before {
    background-image: url(/static/icons/edit.svg);
}

.lock-icon::before {
    background-image: url(/static/icons/lock.svg);
}

.pdf-icon::before {
    background-image: url(/static/icons/pdf.svg);
}

.excel-icon::before {
    background-image: url(/static/icons/excel.svg);
}

.power-icon::before {
    background-image: url(/static/icons/power.svg);
}

.notif-icon::before {
    background-image: url(/static/icons/notif.svg);
}

.warn-icon::before {
    background-image: url(/static/icons/info.svg);
}

.add-user-icon::before {
    background-image: url(/static/icons/add-user.svg);
}

.add-users-icon::before {
    background-image: url(/static/icons/users.svg);
}

.route-icon::before {
    background-image: url(/static/icons/path.svg);
}

.slip-icon::before {
    background-image: url(/static/icons/slip.svg);
}

.location-icon::before {
    background-image: url(/static/icons/location.svg);
}

.print-icon::before {
    background-image: url(/static/icons/printer.svg);
}

.expand-icon::before {
    background-image: url(/static/icons/expand.svg);
}

.document-icon::before {
    background-image: url(/static/icons/document.svg);
}

.right-mark-icon::before {
    background-image: url(/static/icons/right-mark.svg);
}

.border-top {
    border-top: var(--border-dashed)
}

.border-bottom {
    border-bottom: var(--border-dashed)
}



.no_msg {
    padding: 5px;
    margin-bottom: 20px;
}

img {
    animation: image_smooth_open .4s ease-out;
    object-position: top;
}

html {
    scroll-behavior: smooth;
    accent-color: var(--font-text);
}

.accordion {
    border-radius: 12px;
    width: auto;
    display: inline-block;
}

.xl {
    font-size: 18px;
}

.white_color {
    color: var(--white-color);
}

.accordion .accordion-title::after {
    content: '';
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--lite-color);
    border-right: 2px solid var(--lite-color);
    transform: rotate(135deg) translateY(5px);
    display: inline-block;
    margin-left: 10px;
    transition: all .6s;
}

.accordion.active .accordion-title::after {
    transform: rotate(315deg) translateY(5px);
}

.accordion .accordion-title {
    padding: 12px 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
    border-bottom: 2px solid var(--border-color);
    min-width: 340px;
    justify-content: space-between;
}

.accordion .accordion-body {
    display: none;
}

.accordion.active .accordion-body {
    display: block;
    padding: 20px;
    border: var(--border-solid);
    margin-top: 16px;
    border-radius: 12px;
    background-color: var(--white-color);
}

/* CHECKBOX */
.chkBox .container {
    cursor: pointer;
    margin: auto;
    width: max-content;
    display: block;
}

.chkBox .container input {
    display: none;
}

.chkBox .container svg {
    overflow: visible;
}

.image_wrapper {
    cursor: pointer;
    margin: 0 0 40px;
}

.image_wrapper::before {
    background-image: url(/static/icons/attach.svg);
    background-color: transparent;
    transform: translateY(24px);
    cursor: pointer;
}

.image_wrapper::after {
    content: 'Attach image';
    transform: translateY(12px);
    display: flex;
    color: var(--font-text);
}

input[type=file] {
    width: 100%;
    position: absolute;
    top: 10px;
    left: 0;
    padding: 0;
    opacity: 0;
    z-index: 20;
}

.chkBox .path {
    fill: none;
    stroke: var(--font-text);
    stroke-width: 7px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
    stroke-dasharray: 241 9999999;
    stroke-dashoffset: 0;
}

.chkBox .container input:checked~svg .path {
    stroke-dasharray: 70.5096664428711 9999999;
    stroke-dashoffset: -262.2723388671875;
}


.custImgView {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    background: var(--panel-bg-wrap);
}

.custImgView a {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.custImgView .wrapper {
    height: auto;
    margin: auto;
    max-width: 720px;
    display: flex;
    justify-content: center;
    top: 20%;
    height: 510px;
    max-height: 480px;
    flex-direction: column;
    position: relative;
    overflow: auto;
}

.table-wrapper {
    max-width: 100%;
    overflow: auto;
}

.kjsdhflkjbekrh65 {
    position: absolute;
    top: 22px;
    font-size: 10px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 20px;
}

.fileExporter button {
    padding: 10px;
    margin: 28px 14px;
}

.custImgView .wrapper img {
    max-height: 100%;
    border-radius: 22px;
    margin: auto;
    max-width: 80vh;
}

sub {
    padding: 4px;
    position: relative;
    right: 4px;
    bottom: 6px;
}

.msg_btn {
    display: flex;
    gap: 40px;
    align-items: center;
}

.marginTopZero {
    margin-top: 0;
}

.marginZero {
    margin: 0;
}

.marginBottomZero {
    margin-bottom: 0;
}

.moveBottom,
.moveBottom:before {
    transform: translateY(8px);
}

.skeleton {
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
    border-radius: 4px;
    background-size: 200% 100%;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    animation: shimmer 1.5s infinite;
}


/* Define the shimmer animation */

@keyframes gradientBackground {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes image_smooth_open {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

iframe {
    border-radius: 20px;
}

@keyframes topdown {
    0% {
        top: 47px;
    }

    50% {
        top: 58px;
    }

    100% {
        top: 47px;
    }
}

@keyframes wave {
    0% {
        background-size: 120%;
    }

    50% {
        background-size: 140%;
    }

    100% {
        background-size: 120%;
    }
}

@media print {

    .reloader,
    button {
        display: none;
    }
}

.reloader {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 9;
}

.reloader img {
    width: 26px;
}

.softbros_brand_name {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 0 0 8px;
    border-radius: 40px;
    margin-top: 10px;
    display: flex;
    gap: 6px;
    z-index: 9;
}

.softbros_brand_name img {
    position: unset;
    width: 1.3rem;
    height: 1.3rem;
    vertical-align: middle;
    align-self: center;
}

.softbros_brand_name h1 {
    margin: 0;
}

.midWithdrawal {
    padding: 12px;
    flex-wrap: wrap;
    margin: auto;
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 4px;
    max-height: 450px;
    max-width: max-content;
    overflow-y: scroll;
}

.midWithdrawal>div {
    display: flex;
    padding-bottom: 12px;
    justify-content: left;
    gap: 20px;
    flex-wrap: wrap;
}

#min_resol img {
    border-radius: 50%;
}

#customer-login-input button {
    border: 0;
    display: block;
    padding: 10px;
    width: 350x;
    margin-bottom: 18px;
    margin: auto;
    margin-top: 40px;
    border-radius: 12 px;
}

.brand_name {
    display: flex;
    gap: 4px;
    position: fixed;
    bottom: 0;
    padding: 2px;
    justify-content: left;
    z-index: 99999;
    left: 0;
    background: var(--lite-container);
    width: auto;
    padding: 1px 6px;
    border-radius: 4px;
}

.brand_name img {
    width: 12px;
    height: 12px;
    margin-top: 4px;
}

.brand_name p {
    margin: 0;
    padding-left: 12px;
    font-size: 10px;
}

#onboard-form {
    display: block;
}

input::placeholder,
textarea::placeholder {
    font-size: 12px;
    color: var(--font-lite-text);
}

#customer-onboard-form,
#collector-onboard-form,
#route-form-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    z-index: 100;
    background-color: var(--panel-bg-wrap);
}

.add_new_customer_tab,
.add_new_collector_tab {
    display: block;
}

#customer-onboard-form .wrapper,
#collector-onboard-form .wrapper,
#route-form-container .wrapper {
    max-width: 720px;
    margin: auto;
    position: relative;
    top: 10%;
    padding: 25px;
    border-radius: 24px;
    background: var(--panel-color);
}

#onboard-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

form>div {
    padding: 12px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

form label {
    padding: 2px 8px;
    background-color: var(--card-btn-color);
    font-size: 12px;
    border-radius: 18px;
    opacity: .9;
    width: max-content;
}

#onboard-form button {
    display: block;
    margin-top: 80px;
    width: 100%;
}

.preview_image {
    position: absolute;
    top: 90px;
    right: 20px;
    display: none;
    animation: updown 2s ease-in-out infinite;
    z-index: 2222;
}

.preview_image2 {
    position: absolute;
    top: 50%;
    right: 265px;
    animation: updown 2s ease-in-out infinite;
}

.preview_image img,
.preview_image2 img {
    max-width: 234px;
    object-fit: cover;
    border-radius: 12px;
    height: 220px;
}

#customer-onboard-form .wrapper,
#collector-onboard-form .wrapper {
    position: relative;
    margin-bottom: 190px;
}

#customer-onboard-form .close,
.close,
#collector-onboard-form .close,
#route-form-container .close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 7;
    background: transparent;
    color: var(--font-text);
    font-weight: 500;
    font-size: 22px;
    cursor: pointer;
    background: var(--white-color);
    padding: 6px 12px;
    margin: 0;
    border-radius: 0;
}

#customer-onboard-form .close:hover,
.close:hover,
#collector-onboard-form .close:hover,
#route-form-container .close:hover {
    background-color: var(--danger-color);
    color: var(--white-color);
}

.white-color {
    color: var(--white-color);
}

#customer-onboard-form.add_new_customer_tab {
    display: block;
}

#collector-onboard-form.collector-onboard-form_tab {
    display: block;
}

.indicator {
    padding: 5px;
    position: absolute;
    left: 20px;
    z-index: 5;
    bottom: 98px;
}

.loan_container_show {
    display: block;
}

#popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 301;
    top: 0;
    left: 0;
    background-color: var(--panel-bg-wrap);
}

body.no-scroll {
    overflow: hidden;
}

#popup .wrapper {
    max-width: 320px;
    margin: auto;
    padding: 20px;
    text-align: center;
    position: relative;
    top: 20%;
    background: linear-gradient(206deg, #f3efef, #ebecff);
    border-radius: 32px;
}

.fetching::after {
    content: "";
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--warn-color);
    border-radius: 50%;
    animation: load 1s linear infinite;
    margin-left: 10px;
}

#popup h3 {
    font-weight: 500;
}

#popup h3.gogreen {
    background: #c8ffc599;
    width: fit-content;
    margin: auto;
    padding: 2px 12px;
    border-radius: 20px;
}

#popup h3.gogreen::before {
    content: '';
    display: inline-block;
    transform: rotate(45deg);
    height: 14px;
    width: 5px;
    border-bottom: 5px solid #3ab807;
    border-right: 5px solid #3ab807;
    margin-right: 12px;
}

#popup .btns {
    display: flex;
    gap: 60px;
    width: fit-content;
    margin: 30px auto 10px;
}

#popup.active {
    display: block;
}

#spin .wrapper {
    position: relative;
    top: 40%;
    width: fit-content;
    margin: auto;
    border-radius: 0;
}

#spin {
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999999;
    display: none;
    animation: none;
}

#spin.active {
    display: block;
}

@keyframes rotateloader {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* COnsent */

.saving_withdraw .wrapper>div {
    display: flex;
    gap: 20px;
}

.saving_withdraw .wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.saving_withdraw_consent {
    display: none;
    width: 100%;
    position: fixed;
    height: 100%;
    backdrop-filter: blur(16px);
    top: 0;
    left: 0;
    background: #95959547;
    z-index: 240;
}

.saving_withdraw_consent .wrapper {
    background: #fff;
    max-width: 70%;
    margin: auto;
    padding: 30px 20px;
    position: relative;
    top: 10%;
    border-radius: 20px;
}

.saving_withdraw_consent.active {
    display: block;
}

.saving_withdraw_consent .btns {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.softbros_brand_name.left {
    left: 80px;
    position: fixed;
}

.softbros_brand_name i {
    color: #fff;
    font-size: 12px;
    margin-top: 0;
}

#popup.popup_active {
    display: flex;
}

#softbros_init {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999999999999;
}

#softbros_init.disable {
    display: none;
}

@keyframes messageSlide {
    from {
        transform: translateX(-50px);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes load {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#custom_alert .wrapp {
    display: flex;
    gap: 30px;
}

#custom_alert.disable {
    display: none;
}

#custom_alert .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#custom_alert button {
    display: block;
    margin: auto;
    border-radius: 8px;
}

#custom_alert {
    position: fixed;
    bottom: 40px;
    margin: auto;
    padding: 0px 23px;
    z-index: 99999999;
    border-left: 0;
    animation: messageSlide 2s ease-out;
}

@keyframes softbros_init {
    70% {
        zoom: 70%;
        opacity: 1;
    }

    100% {
        zoom: 100%;
        opacity: 0;
    }
}

#softbros_init .wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#softbros_init .contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
    animation: softbros_load 1s linear infinite;
    background: var(--white-color);
    padding: 4px;
    box-sizing: var(--shadow);
}

.hamburger #checkbox {
    display: none;
}

.hamburger .toggle {
    position: relative;
    width: 26px;
    height: 40px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition-duration: .3s;
}

.hamburger-menu {
    position: absolute;
    top: 23%;
    right: 0;
    z-index: 30;
    border-radius: 12px;
    height: 0;
    overflow: hidden;
    transition: opacity .3s ease-in-out;
    opacity: 0;
}

.hamburger-menu.active {
    height: 480px;
    max-width: 80%;
    overflow: auto;
    padding: 20px;
    background-color: var(--white-color);
    border: var(--border-solid);
    box-shadow: var(--shadow);
    opacity: 1;
}

.light-dark {
    padding: 4px 12px;
    border-radius: 28px;
    cursor: pointer;
}

.light-dark p {
    margin: 0;
}


header {
    margin-bottom: 48px;
    max-width: 2400px;
    margin: auto;
    background-color: var(--white-color);
}

.brandName>.wrapper {
    display: flex;
}

header>.wrapper {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    max-width: 1400px;
    min-width: 300px;
    padding: 10px 20px;
    box-sizing: border-box;
    align-items: center;
    margin: auto;
    border-bottom: var(--border-dashed);
}

header .brandName .wrapper img {
    max-width: 120px;
    max-height: 70px;
}

.client_brand>.wrapper>.client_logo {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.logout {
    margin-top: 20px;
}

.logout a {
    color: var(--danger-color);
    font-weight: 600;
}

header .app_type p {
    margin: 0;
}

header .app_type p::before {
    content: "";
    display: block;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    transform: translate(-10px, 14px);
    background-color: var(--healthy-color);
}

.client_brand img {
    max-width: 48px;
    max-height: 32px;
}

.client_brand>.wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row-reverse;
}

.homeBtn {
    padding: 4px;
}

.hamburger.active .toggle::after,
.home-page-filter:has(.hamburger-menu.active) .hamburger .toggle::after,
.settingMenu p.active::after {
    content: "✕";
    display: inline;
    margin-left: 10px;
    background: unset;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-weight: 600;
    text-align: center;
}

.secondary_btn {
    background-color: var(--healthy-color);
    color: var(--white-color);
}

.historyModal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--panel-bg-wrap);
}

.historyModal>.wrapper {
    background-color: var(--white-color);
    padding: 20px;
    border-radius: 18px;
    max-height: 80vh;
    position: relative;
    margin: 0 20px;
    top: 40px;
    overflow-y: auto;
}

.historyModal table {
    margin: 0;
}

.historyModal .table-wrapper {
    overflow: auto;
}

.loanCircle,
.savingCircle {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ffc95c;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.align_start {
    align-items: flex-start;
}

.savingCircle {
    background-color: var(--healthy-color);
}

@media (max-width:767px) {

    .homeBtn {
        padding: 4px;
    }

    .historyModal td,
    .historyModal th {
        font-size: 10px;
        min-width: auto;
    }

    .accordion .accordion-title {
        min-width: 240px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 22px;
    }

    h4 {
        font-size: 20px;
    }

    p,
    span,
    strong,
    label,
    sup,
    sub,
    a,
    strong,
    li,
    i {
        font-size: 14px;
    }

    button,
    .button {
        font-size: 14px;
        width: max-content;
    }

    button,
    input,
    textarea,
    a,
    select,
    label,
    summary,
    [role="button"] {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

    th {
        font-size: 12px;
    }

    .preview_image2,
    .preview_image {
        bottom: 144px;
        top: auto;
        left: 20px;
    }

    .preview_image {
        left: 320px;
    }

    input,
    select,
    textarea {
        padding: 6px 12px;
        max-width: 220px;
    }

    header .brandName .wrapper img {
        max-width: 100px;
    }

    .transparent-btn {
        font-size: 14px;
    }

    .collectors>div,
    .top-bar,
    #collector_csd,
    .collectors .get_slip {
        flex-wrap: wrap;
    }

    main {
        padding: 0 20px;
    }

    .profileShow>div:has(span) {
        flex-direction: column;
    }

    .top-bar>div {
        width: 100%;
    }

    header>.wrapper {
        padding: 10px 20px;
    }

    .app_type {
        display: none;
    }
}

@keyframes updown {
    0% {
        transform: translateY(20px);
    }

    50% {
        transform: translateY(30px);
    }

    100% {
        transform: translateY(20px);
    }
}