* {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

body {
    margin: 0;
    font-family: Lexend, sans-serif !important;
    overflow: hidden;
    background-color: #fff !important
}

.dashboard-layout {
    display: flex;
    height: 100vh;
    overflow: hidden
}

.main-content {
    flex: 1;
    margin: 122px clamp(30px, 3.33vw, 64px) 0 clamp(200px, 19.5vw, 376px);
    overflow-y: auto;
    height: calc(100vh - 128px);
    scrollbar-width: none;
    -ms-overflow-style: none
}

.main-content.expand {
    margin-left: clamp(140px, 9.42vw, 181px)
}

.main-content::-webkit-scrollbar {
    display: none
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Lexend, sans-serif
}

.top-navbar {
    width: 100%;
    height: 92px;
    position: fixed;
    top: 0;
    display: flex;
    z-index: 1000
}

.side-navabar {
    scrollbar-width: none;
    overflow: auto;
    position: fixed;
    top: 80px;
    left: 0;
    height: calc(100vh - 80px);
    width: clamp(250px, 15.98vw, 307px);
    background-image: url(../assets/leftbg-DkUQGD0F.svg);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 999;
    transition: all .3s ease;
    overflow-y: auto
}

.first-top-card {
    width: 60.6%;
    background-size: cover;
    background-image: url(../assets/topbg--1Pmfmms.svg);
    display: flex;
    align-items: center
}

.second-top-card {
    width: 73.6%;
    display: flex;
    align-items: center
}

.toggle-navigate {
    margin-right: clamp(20px, 2.34vw, 45px);
    cursor: pointer
}

.toggle-navigate img {
    width: clamp(20px, 1.66vw, 32px)
}

.toggle-logo {
    object-fit: contain
}

.navigate-clock {
    width: 29.4%;
    display: flex;
    align-items: center
}

.navigate-clock img {
    margin-right: 13px
}

.navigate-clock-text {
    font-weight: 500;
    font-size: clamp(10px, .625vw, 12px);
    color: #fff;
    text-transform: uppercase
}

.navigate-top-buttons {
    width: 61.6%;
    display: flex;
    align-items: center;
    gap: clamp(15px, 1.5625vw, 30px)
}

.navigate-top-buttons-items {
    border: 1px solid #F96EAF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: clamp(10px, .625vw, 12px);
    color: #fb94c4;
    text-transform: uppercase;
    padding: 7px clamp(7px, .729vw, 14px) 10px 13px
}

.navigate-top-buttons-items img {
    margin-right: 13px
}

.side-navabar.closed-navBar {
    width: 110px
}

.navbar-top-right {
    width: 39.4%;
    display: flex;
    align-items: center;
    padding: 0 clamp(30px, 3.385vw, 65px) 0 0
}

.second-text-card {
    justify-content: space-between;
    display: flex;
    align-items: center;
    width: 100%
}

.kyc-popup {
    border: 1px solid #DEDAD2;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 9px 19px;
    cursor: pointer
}

.kyc-popup img {
    margin-right: 18px
}

.kyc-popup p {
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: #51464b;
    margin: 0
}

.message,
.notification {
    position: relative
}

.message p,
.notification p {
    background: #b20153;
    box-shadow: 0 3px 10px #fb095b59;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 13px;
    line-height: 26px;
    color: #fff;
    text-transform: uppercase;
    border-radius: 50%;
    position: absolute;
    right: calc(-100% + 1px);
    top: -19px;
    margin: 0
}

.notification p {
    right: calc(-100% + 8px);
    top: clamp(-14px, -.989vw, -19px)
}

.profile {
    display: flex;
    align-items: center;
    position: relative
}

.profile-content .navBar-userName {
    font-weight: 500;
    font-size: 12px;
    color: #17080f
}

.profile-content .session-text {
    font-weight: 500;
    font-size: 12px;
    color: #51464b;
    text-transform: uppercase
}

.profile .profile-pic svg {
    width: 34px;
    height: 34px;
    border-radius: 50px;
    margin-left: 13px;
    cursor: pointer
}

.session-text {
    text-align: right;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0px;
    color: #51464b;
    text-transform: uppercase;
    opacity: 1
}

.viyonapay-logo {
    width: clamp(140px, 9.375vw, 180px);
    height: auto;
    max-height: 33px;
    object-fit: contain;
    transition: all .3s ease
}

.side-navabar-header {
    margin-top: 1rem;
    margin-left: 1rem
}

.side-navabar-header-text {
    color: #fb94c4;
    text-align: left;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    opacity: 1;
    padding-left: 10px;
    margin: 0
}

.items-card {
    margin-top: 10%
}

.flex-item-card {
    width: 80%;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 5%;
    padding: 7.5px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s ease;
    text-decoration: none
}

.menu-item-content {
    flex: 1
}

.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    transition: all .3s ease
}

.flex-item-card.active .icon-wrapper {
    background-color: #de0068
}

.dropdown-menu {
    margin-left: 25px;
    margin-top: -5%;
    margin-bottom: 5%;
    background-color: transparent;
    border-radius: 8px;
    overflow: visible;
    animation: slideDown .3s ease;
    box-shadow: none;
    position: relative;
    z-index: 1000
}

.dropdown-list-vertical-line {
    position: relative;
    padding-left: 50px;
    margin-top: 8px;
    margin-bottom: 8px
}

.dropdown-list-vertical-line:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #fff 0px, #fff 6px, transparent 6px, transparent 12px);
    opacity: .3;
    z-index: 0
}

.dropdown-list-item-row {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 2px
}

.dropdown-list-item-row:before {
    content: " ";
    width: 22px;
    height: 1px;
    border-bottom: 1px dashed #fff;
    position: absolute;
    left: -44px;
    top: 50%;
    transform: translateY(-50%)
}

.dropdown-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    margin-right: 12px;
    margin-left: -18px;
    z-index: 1;
    transition: background .2s, opacity .2s
}

.dropdown-dot.active {
    background: #ffe600;
    opacity: 1
}

.dropdown-item {
    display: block;
    padding: 7px 0;
    color: #fff;
    text-decoration: none;
    font-size: clamp(10px, .677vw, 13px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .24px;
    transition: all .3s ease;
    background: none;
    border-left: none;
    margin-left: 0;
    position: relative;
    z-index: 1
}

.dropdown-item.active {
    color: #ffe600;
    font-weight: 700
}

.dropdown-item:hover {
    color: #ffe600
}

.side-navbar-list-footer-item {
    max-width: 100%;
    text-align: left;
    font: normal normal medium 12px/24px Lexend;
    letter-spacing: 2.4px;
    color: #fb94c4;
    text-transform: uppercase
}

.flex-item-card svg {
    width: 12px
}

.side-navbar-list {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.side-navbar-list-item {
    gap: 1.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1em 0;
    color: #fff
}

.navBar-space-container {
    width: 100%;
    height: 12.5vh
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.icon-wrapper img {
    width: clamp(15px, 1.614vw, 31px)
}

.item-text {
    font-size: clamp(12px, .729vw, 14px);
    letter-spacing: 0px;
    text-transform: uppercase;
    opacity: 1;
    text-decoration: none;
    text-align: left;
    color: #fff
}

.first-text-card {
    width: 26.4%;
    padding: 0 0 0 clamp(20px, 2.08vw, 40px)
}

.first-text-card.logo-hide {
    width: 100px;
    padding: 0
}

.first-text-card.logo-hide img {
    width: 100px
}

.profile-dropDownContainer {
    position: absolute;
    top: 100%;
    right: 0;
    width: 168px;
    background: #fff;
    box-shadow: 0 3px 50px #00000021;
    border-radius: 10px;
    z-index: 100;
    padding: 22px 0 16px 17px
}

.profile-dropDownContainer ul,
.profile-dropDownContainer ul li {
    list-style: none;
    margin: 0;
    padding: 0
}

.profile-dropDownContainer ul li {
    margin: 0 0 11px
}

.profile-dropDownContainer ul li a {
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    color: #51464b;
    text-transform: uppercase;
    display: flex;
    align-items: center
}

.profile-dropDownContainer ul li a span {
    margin-left: 17px
}

.profile-dropDownContainer ul li a:hover span {
    color: #bd246b
}

.profile-kyc-container {
    width: 36.4%
}

.profile-icons-common-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    width: 58%;
    justify-content: space-between
}

.profile-icons-common-container .sun img,
.profile-icons-common-container .message img {
    width: clamp(14px, 1.4vw, 27px)
}

.profile-icons-common-container .notification img {
    width: clamp(14px, 1.19vw, 23px)
}

#logout {
    color: #b20153
}

@media screen and (max-width: 1024px) {
    .first-top-card {
        width: 70%;
        background-size: cover;
        background-image: url(../assets/topbg--1Pmfmms.svg);
        display: flex;
        padding: 0 1rem
    }

    .toggle-navigate {
        margin-left: 2rem;
        padding: 0
    }

    .navigate-clock {
        width: 30%;
        align-items: center
    }

    .second-top-card {
        gap: 0
    }

    .first-text-card {
        width: 225px
    }

    .first-text-card.logo-hide {
        width: 78px
    }

    .viyonapay-logo {
        max-height: 25px
    }
}

@media screen and (max-width: 768px) {
    .flex-item-card {
        width: 95%
    }

    .top-navbar {
        height: 70px
    }

    .side-navabar {
        top: 70px;
        height: calc(100vh - 70px);
        width: 100%;
        z-index: 100
    }

    .viyonapay-logo {
        width: 130px
    }

    .side-navabar-header {
        margin-top: 1.5rem;
        margin-left: 1.5rem
    }

    .side-navabar.closed-navBar {
        width: 0px
    }

    .first-text-card.logo-hide {
        width: 225px
    }

    .profile-content {
        display: none
    }

    .navbar-top-right {
        width: min-content !important
    }

    .first-top-card {
        width: 100% !important
    }
}

.change-tpin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000026;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start
}

.change-tpin-modal {
    background: #fff;
    box-shadow: 0 4px 24px #00000021;
    width: 470px;
    height: 597px;
    padding: 0 32px 32px;
    position: relative
}

.success-tpin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000026;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start
}

.success-tpin-modal {
    margin: 0 32px 0 0;
    background: #fff;
    box-shadow: 0 4px 24px #00000021;
    width: 470px;
    height: 407px;
    padding: 0 32px 32px;
    position: relative
}

.change-tpin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 12px;
    border-bottom: 1px solid #eee
}

.change-tpin-title {
    color: #e6007a;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .5px
}

.change-tpin-title-header {
    width: 350px;
    height: 72px;
    margin-left: 40px;
    font-weight: 700;
    color: var(--unnamed-color-17080f);
    display: flex;
    justify-content: flex-start;
    font: normal normal medium 16px/24px Lexend;
    letter-spacing: 0px;
    color: #17080f;
    opacity: 1
}

.change-tpin-inputs {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    margin-bottom: 32px;
    margin-left: 40px
}

.change-tpin-input {
    width: 73px;
    height: 40px;
    border: none;
    border-bottom: 2px solid #aaa;
    font-size: 28px;
    text-align: center;
    outline: none;
    background: transparent;
    margin-bottom: 16px
}

.change-tpin-verify-btn {
    width: 201px;
    height: 50px;
    background-image: url(../assets/bgbutton-Do6V9T7r.png);
    background-size: cover;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    box-shadow: 0 4px 12px #e6007a21;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 0
}

@media screen and (max-width: 1800px) {
    .navigate-clock {
        width: 19.4%
    }

    .navigate-top-buttons {
        width: 71.6%
    }
}

@media screen and (max-width: 1300px) {

    .profile-icons-common-container .sun,
    .profile-icons-common-container .message,
    .profile-icons-common-container .notification,
    .navigate-clock {
        display: none
    }

    .navbar-top-right {
        padding: 0 20px
    }

    .second-text-card {
        justify-content: space-between
    }

    .profile-kyc-container {
        width: 48%
    }

    .profile-icons-common-container {
        width: auto
    }
}

@media screen and (max-width: 1000px) {
    .profile-kyc-container {
        display: none
    }

    .profile-icons-common-container {
        margin-left: auto
    }

    .first-top-card {
        width: 75%
    }

    .navbar-top-right {
        width: 25%
    }
}

@media screen and (max-width: 600px) {
    .navigate-top-buttons {
        display: none
    }

    .first-top-card,
    .navbar-top-right {
        width: 50%
    }
}

.notification-time {
    color: #b20153;
    text-align: left;
    font-size: 12px;
    font-family: Lexend
}

.custom-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0000001a;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center
}

.custom-loader-circle-rotating {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center
}

.rotating-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    animation: rotate360 1.2s linear infinite
}

.arc-path {
    stroke: #7c1c47;
    stroke-width: 6;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 157;
    stroke-dashoffset: 0;
    animation: arcSweep 1.5s linear infinite
}

.arc-path-white {
    stroke: #fff;
    stroke-width: 6;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 78.5 235.5;
    stroke-dashoffset: 0
}

.arc-path-pink {
    stroke: #7c1c47;
    stroke-width: 6;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 78.5 235.5;
    stroke-dashoffset: 39.25
}

.full-screen-loader-logo {
    position: relative;
    width: 60px;
    height: 60px;
    z-index: 2;
    display: block;
    margin: auto
}

@keyframes arcSweep {
    0% {
        stroke-dasharray: 0 314;
        stroke-dashoffset: 0;
        transform: rotate(90deg)
    }

    25% {
        stroke-dasharray: 157 157;
        stroke-dashoffset: 0;
        transform: rotate(0)
    }

    50% {
        stroke-dasharray: 314 0;
        stroke-dashoffset: 0;
        transform: rotate(270deg)
    }

    75% {
        stroke-dasharray: 280 34;
        stroke-dashoffset: 0;
        transform: rotate(280deg)
    }

    to {
        stroke-dasharray: 0 314;
        stroke-dashoffset: 0;
        transform: rotate(0)
    }
}

@keyframes rotate360 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.shareUpiPopup__container {
    position: absolute;
    background-color: #fff;
    min-height: 12vh;
    width: 12vw;
    max-width: 180px;
    box-shadow: 0 2px 8px #00000026;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 12px;
    font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    z-index: 1000
}

.shareUpiPopup__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .2s ease;
    outline: none
}

.shareUpiPopup__item:hover,
.shareUpiPopup__item:focus {
    background-color: #f0f0f0
}

#PayOut-view-balance-outLine:hover {
    border-color: #05619b;
    color: #05619b
}

.txn-status-pending {
    color: #2d9cdb
}

.react-select-container {
    width: 100%
}

.react-select__control {
    border: 1px solid #ddd;
    border-radius: 4px;
    min-height: 40px;
    font-size: 14px
}

.react-select__control:hover {
    border-color: #05619b
}

.react-select__control--is-focused {
    border-color: #05619b;
    box-shadow: 0 0 0 1px #05619b
}

.react-select__placeholder {
    color: #999
}

.react-select__single-value {
    color: #333
}

.react-select__option {
    padding: 8px 12px;
    font-size: 14px
}

.react-select__option--is-focused {
    background-color: #f0f8ff
}

.react-select__option--is-selected {
    background-color: #05619b;
    color: #fff
}

* {
    box-sizing: border-box;
    font-family: Lexend, sans-serif !important
}

.home-title {
    color: var(--unnamed-color-17080f);
    text-align: left;
    font: 600 22px/28px Lexend;
    letter-spacing: 0px;
    color: #17080f;
    text-transform: uppercase;
    opacity: 1
}

.home-content {
    display: flex;
    gap: 20px;
    width: 100vw
}

.collection-wallet-card,
.payout-wallet-card {
    width: 47.3%
}

.wallet-top {
    padding: clamp(15px, 1.5625vw, 30px) clamp(15px, 1.875vw, 36px) 0 clamp(15px, 1.77vw, 34px)
}

.collection-wallet-card {
    background: #ffeff6;
    border: 1px solid #F5D2E1;
    border-radius: 15px
}

.payout-wallet-card {
    background: var(--unnamed-color-eff4ff) 0% 0% no-repeat padding-box;
    border: 1px solid var(--unnamed-color-c2d1f2);
    background: #eff4ff 0% 0% no-repeat padding-box;
    border: 1px solid #C2D1F2;
    border-radius: 15px;
    opacity: 1
}

.connected-banking-card {
    background: #f7f7f7;
    border: 1px solid #D6D6D6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 15px;
    padding: clamp(15px, 1.56vw, 30px) clamp(33px, 2.5vw, 48px) clamp(16px, 1.92vw, 37px) clamp(27px, 1.4vw, 42px);
    margin: 0 0 clamp(20px, 1.4vw, 27px) 0
}

.connected-banking-card img:first-child {
    width: clamp(20px, 2.08vw, 40px)
}

.connected-banking-card .connected-banking-title {
    margin: 0;
    font-weight: 700;
    font-size: clamp(12px, .833vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    color: #17080f;
    text-transform: uppercase
}

.connected-banking-card h3+img {
    width: clamp(100px, 7.6vw, 146px)
}

.connected-banking-card button.open-current-account-btn {
    background: url(../assets/bgbutton-Do6V9T7r.png);
    font-weight: 700;
    font-size: clamp(10px, .625vw, 12px);
    color: #fff;
    text-transform: uppercase;
    border: none;
    outline: none;
    width: clamp(100px, 8.125vw, 156px);
    height: clamp(33px, 2.65vw, 51px);
    padding: 0 0 13px;
    background-size: 100%
}

.connected-list-card {
    border: 1px solid #d6d6d6;
    border-radius: 15px;
    margin-bottom: clamp(20px, 1.71vw, 33px)
}

.collection-payout-card-flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(20px, 1.979vw, 38px)
}

.dashboard-main {
    display: flex;
    justify-content: space-between
}

.dashboard-left {
    width: 48.6%
}

.dashboard-right {
    width: 48.9%
}

.connected-banking-card,
.connected-list-card {
    width: 100%;
    box-sizing: border-box
}

.wallet-statistics-card {
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 2px 8px #00000005;
    width: 100%;
    box-sizing: border-box
}

.wallet-statistics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    border-bottom: 1px solid #d6d6d6;
    padding: 5px 30px 0
}

.home-container h1.wallet-statistics-title {
    font-weight: 700;
    color: #c2185b;
    font-size: clamp(12px, .833vw, 16px);
    letter-spacing: .5px
}

.wallet-statistics-tabs {
    display: flex;
    gap: 8px;
    background: #f5f5f5;
    border-radius: 30px
}

.wallet-statistics-tab {
    border: none;
    outline: none;
    font-weight: 500;
    font-size: 12px;
    color: #51464b;
    padding: 6px 18px;
    border-radius: 20px;
    cursor: pointer;
    transition: background .2s, color .2s
}

.wallet-statistics-tab.active {
    background: #c2185b;
    color: #fff
}

.wallet-statistics-chart {
    width: 100%;
    height: 100%;
    padding: 20px clamp(20px, 2.08vw, 40px) clamp(20px, 1.5625vw, 30px) clamp(20px, 2.083vw, 40px);
    box-sizing: border-box
}

.recent-payments-card {
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 2px 8px #00000005;
    width: 100%;
    box-sizing: border-box
}

.recent-payments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 25px 25px 45px;
    border-bottom: 1px solid #d6d6d6
}

.recent-payments-title {
    font-weight: 700;
    color: #c2185b;
    font-size: 1.1rem;
    letter-spacing: .5px
}

.recent-payments-tabs {
    display: flex;
    gap: 8px;
    background: #f5f5f5;
    border-radius: 30px
}

.recent-payments-tab.active {
    background: #c2185b;
    color: #fff
}

.recent-payments-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
    background: #fff;
    border-radius: 0 0 25px 25px
}

.recent-payments-table thead {
    position: sticky;
    top: 0;
    background: #fafafa
}

.recent-payments-table th:first-child,
.recent-payments-table td:first-child {
    padding-left: 45px
}

.recent-payments-table th,
.recent-payments-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #d6d6d6;
    font-weight: 400;
    font-size: 14px;
    color: #51464b
}

.recent-payments-table th {
    background: #fafafa;
    color: #222;
    font-size: 12px;
    font-weight: 700
}

.recent-payments-table tr:hover,
.recent-payments-table tr:focus,
.recent-payments-table tr:active,
.recent-payments-table tr:focus-within,
.recent-payments-table tr.selected {
    background: #f0f8ff
}

.recent-payments-table tr:last-child {
    border: 2px solid grey
}

.recent-payments-txn-amount {
    color: #009688;
    font-weight: 700
}

@media (max-width: 800px) {
    .recent-payments-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .recent-payments-card {
        padding: 12px 4px 10px
    }

    .recent-payments-table th,
    .recent-payments-table td {
        padding: 8px 4px;
        font-size: .95rem
    }
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #D1B8C4;
    font-weight: 500;
    font-size: 12px;
    color: #17080f;
    display: flex;
    justify-content: space-between;
    margin-top: clamp(30px, 3.64vw, 70px);
    padding: clamp(15px, 1.09375vw, 21px) 0 0 clamp(15px, 1.25vw, 24px)
}

.recent-payments-card {
    margin-top: 45px
}

.fade-slide-enter {
    opacity: 0;
    transform: translateY(20px)
}

.fade-slide-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s, transform .3s
}

.fade-slide-exit {
    opacity: 1;
    transform: translateY(0)
}

.fade-slide-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity .3s, transform .3s
}

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

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.collection-wallet-card,
.payout-wallet-card,
.connected-banking-card,
.connected-list-card,
.wallet-statistics-card,
.quick-links-card,
.recent-payments-card {
    animation: fadeInUp .6s ease-out forwards;
    opacity: 0
}

.collection-wallet-card {
    animation-delay: .1s
}

.payout-wallet-card {
    animation-delay: .2s
}

.connected-banking-card {
    animation-delay: .3s
}

.connected-list-card {
    animation-delay: .4s
}

.wallet-statistics-card {
    animation-delay: .5s
}

.quick-links-card {
    animation-delay: .6s
}

.recent-payments-card {
    animation-delay: .7s
}

.collection-wallet-card,
.payout-wallet-card,
.connected-banking-card,
.connected-list-card,
.wallet-statistics-card,
.quick-links-card,
.recent-payments-card {
    transition: transform .3s ease, box-shadow .3s ease
}

.collection-wallet-card:hover,
.payout-wallet-card:hover,
.connected-banking-card:hover,
.connected-list-card:hover,
.wallet-statistics-card:hover,
.quick-links-card:hover,
.recent-payments-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px #0000001a
}

h3.wallet_card_title {
    font-weight: 700;
    font-size: clamp(12px, .833vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    color: #b20153;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin: 0
}

.payout-wallet-card h3.wallet_card_title,
.payout-wallet-card .view-balance-btn-outline {
    color: #0277bf
}

.payout-wallet-card .add-money-button {
    border: 1px solid #C2D1F2
}

.collection-wallet-card-header img {
    width: clamp(28px, 2.5vw, 48px)
}

.collection-wallet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 clamp(20px, 2.1875vw, 42px) 0
}

.collection-wallet-card-number {
    font-weight: 400;
    font-size: clamp(11px, .729vw, 14px);
    letter-spacing: clamp(1px, .27vw, 5.22px);
    color: #17080f;
    text-transform: uppercase;
    margin: 0 0 clamp(15px, 1.4vw, 27px) 0;
    cursor: pointer
}

.view-balance-btn-outline {
    background: #fff;
    border-radius: 10px;
    font-weight: 700;
    font-size: clamp(12px, .833vw, 16px);
    letter-spacing: clamp(1px, .166vw, 3.2px);
    color: #b20153;
    text-transform: uppercase;
    border: none;
    outline: none;
    width: 100%;
    padding: 10px 0 12px 20px;
    display: flex;
    align-items: center;
    margin: 0 0 clamp(15px, 1.979vw, 38px) 0
}

.view-balance-btn-outline:hover {
    border-color: #8b003f;
    color: #8b003f
}

.view-balance-btn-outline svg {
    width: 16px;
    height: 16px;
    color: inherit;
    margin-right: clamp(5px, .78vw, 15px)
}

.view-balance-text {
    font: inherit;
    color: inherit;
    margin-left: 4px;
    letter-spacing: 2px
}

.payout-view-balance-btn-outline svg {
    width: 16px;
    height: 16px;
    color: inherit
}

.upi-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 clamp(15px, 1.5625vw, 30px) 0
}

.upi-container-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px
}

.upi-container-item-text {
    font-weight: 500;
    font-size: clamp(12px, .729vw, 14px);
    color: #17080f;
    text-transform: uppercase;
    cursor: pointer
}

.upi-container-item-img,
.change-size {
    width: 20px;
    height: 20px
}

.add-money-button {
    background: #fff;
    border: none;
    border-top: 1px solid #F5D2E1;
    border-radius: 0 0 15px 15px;
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    color: #b20153;
    text-transform: uppercase;
    display: block;
    width: 100%;
    text-align: center;
    padding: clamp(15px, 1.5625vw, 30px) 0 clamp(15px, 1.5625vw, 30px) 0
}

.connected-list-card-header {
    border-bottom: 1px solid #d6d6d6;
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0 10px
}

.connected-list-card-header h3.connected-list-card-title {
    padding: clamp(10px, 1.25vw, 24px) 0 clamp(10px, 1.04vw, 20px) clamp(20px, 1.875vw, 36px);
    margin: 0;
    font-weight: 700;
    font-size: clamp(12px, .833vw, 16px);
    color: #b20153;
    text-transform: uppercase
}

.quick-links-card {
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 2px 8px #00000005;
    width: 100%;
    box-sizing: border-box
}

.quick-links-title {
    border-bottom: 1px solid #d6d6d6;
    padding: clamp(10px, 1.25vw, 24px) 0 clamp(10px, 1.04vw, 20px) clamp(20px, 1.875vw, 36px);
    margin: 0;
    font-weight: 700;
    font-size: clamp(12px, .833vw, 16px);
    color: #b20153;
    text-transform: uppercase
}

.quick-links {
    display: flex;
    align-items: center;
    padding: clamp(20px, 2.34vw, 45px);
    justify-content: space-between;
    text-align: center
}

.quick-links-pagination {
    width: 22.6%;
    background: #eff4ff;
    border-radius: 15px;
    padding: clamp(15px, 1.66vw, 32px) 10px clamp(20px, 2.18vw, 42px) 10px;
    cursor: pointer
}

.quick-links-pagination .quick-link-bank-icon {
    margin-bottom: clamp(20px, 2.29vw, 44px)
}

.quick-links-pagination .quick-link-bank-icon img {
    width: clamp(20px, 2.18vw, 42px)
}

.quick-links-pagination .quick-link-bank-header {
    font-weight: 500;
    font-size: clamp(10px, .625vw, 12px);
    line-height: clamp(14px, .833vw, 16px);
    color: #17080f;
    text-transform: uppercase
}

.quick-links-pagination:nth-child(2n) {
    background: #ffeff6
}

@media (max-width: 480px) {
    .dashboard-left {
        width: 100%
    }

    .balance-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px
    }

    .collection-wallet-card,
    .payout-wallet-card {
        height: max-content
    }

    .dashboard-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .connected-list-card {
        height: max-content;
        width: 100%
    }

    .connected-list-card-body {
        display: flex;
        flex-direction: column;
        padding: 40px
    }
}

.connected-list-card-body {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    user-select: none;
    padding: clamp(20px, 1.77vw, 34px) clamp(20px, 1.875vw, 36px) clamp(20px, 2.39vw, 46px) clamp(20px, 1.875vw, 36px);
    gap: clamp(11px, 1.71vw, 33px)
}

.connected-list-card-body::-webkit-scrollbar {
    display: none
}

.connected-list-card-body-item {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: clamp(10px, 1.3vw, 25px) clamp(10px, 1.17vw, 22.5px);
    border-radius: 15px;
    width: clamp(200px, 14.37vw, 276px);
    height: clamp(127px, 9.11vw, 175px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    white-space: normal;
    flex-shrink: 0;
    background-color: #f3f3f3;
    transition: transform .2s ease
}

.connected-bank-canara-card {
    background-image: url(../assets/canaracardbg-DcTW5wRN.png)
}

.connected-bank-idfc-card {
    background-image: url(../assets/idfcCard-Cu_TCBRd.png)
}

.connected-list-card-body-item-bank-name {
    width: 100%;
    height: 17px;
    color: #fff;
    text-align: left;
    font: 700 12px/24px Lexend, sans-serif;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.connected-list-card-body-bank-image {
    width: 32px;
    height: 24px
}

.connected-list-card-view-balance-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    width: 100%;
    margin: 8px 0
}

.connected-list-card-view-balance-Icon {
    display: flex;
    align-items: center
}

.connected-list-card-view-balance-text {
    width: 99px;
    height: 17px;
    color: #f96eaf;
    font: 700 10px/24px Lexend, sans-serif;
    text-transform: uppercase;
    display: flex;
    align-items: center
}

.connected-list-card-account-number {
    color: #fff;
    text-align: left;
    font: 700 12px/24px Lexend, sans-serif;
    text-transform: uppercase
}

.connected-list-card-view-statement-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
    cursor: pointer
}

.connected-list-card-view-statement-text {
    color: #fff;
    font: 700 10px/24px Lexend, sans-serif;
    text-transform: uppercase
}

.connected-list-card-verify-status-container {
    width: 168px;
    height: 44px;
    border: 1px solid var(--unnamed-color-ffffff);
    border: 1px solid #FFFFFF;
    border-radius: 50px;
    opacity: 1;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 3px 5px;
    gap: 3px
}

.connected-list-card-verify-status-text {
    width: 111px;
    height: 17px;
    color: var(--unnamed-color-ffffff);
    text-align: left;
    font: 700 12px/24px Lexend;
    letter-spacing: 0px;
    color: #fff;
    text-transform: uppercase;
    opacity: 1;
    align-items: center;
    justify-content: center;
    display: flex
}

.connected-list-card-verify-status-img {
    width: 10px;
    height: 10px;
    border: 1px solid white;
    opacity: 1;
    align-items: center;
    border-radius: 100%
}

.selected-account-details {
    margin: 15px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef
}

.account-info {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.account-info p {
    margin: 0;
    color: #495057;
    font-size: 14px
}

.account-info strong {
    color: #212529;
    font-weight: 600
}

.input-field option {
    padding: 8px
}

.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    height: 20px;
    border-radius: 4px;
    margin: 4px 0
}

@keyframes loading {
    0% {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

.refresh-icon {
    cursor: pointer;
    color: #666;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px
}

.refresh-icon:hover {
    color: #007bff;
    background-color: #007bff1a
}

.refresh-icon:active {
    transform: rotate(180deg)
}

.payouts-header-text {
    padding-top: 29px;
    width: 153px;
    height: 29px;
    text-align: left;
    font: 600 22px/28px Lexend;
    letter-spacing: 0px;
    color: #17080f;
    text-transform: uppercase;
    opacity: 1
}

.payouts-card-container {
    display: flex;
    flex-direction: column;
    width: 48.7%
}

.payouts-flex-cards-dashboard {
    display: flex;
    justify-content: space-between
}

.payouts-flex-cards-dashboard .total-transaction-card-payouts {
    width: 47.2%;
    border-radius: 15px;
    border: 1px solid #D1D8BA;
    background: #fbffef;
    padding: clamp(20px, 2.08vw, 40px)
}

.payouts-flex-cards-dashboard .total-transaction-card-payouts.transaction-amount-card {
    background: #effff3;
    border: 1px solid #C1DBC7
}

.payouts-flex-cards-dashboard .card-text-container-payouts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 15px
}

.payouts-flex-cards-dashboard .card-text-container-payouts h3 {
    font-weight: 700;
    font-size: clamp(12px, .722vw, 14px);
    line-height: 16px;
    color: #17080f;
    text-transform: uppercase;
    margin: 0
}

.payouts-flex-cards-dashboard .card-text-container-payouts .card-container-logo img {
    width: clamp(30px, 2.44vw, 47px)
}

.payouts-flex-cards-dashboard .card-data {
    font-weight: 400;
    font-size: 20px;
    color: #b77e0c;
    text-transform: uppercase
}

.payouts-flex-cards-dashboard .transaction-amount-card .card-data {
    color: #1d8d65
}

.payouts-flex-cards-dashboard:nth-child(2) {
    margin: clamp(20px, 2.08vw, 40px) 0 0 0
}

.payouts-flex-cards-dashboard:nth-child(2) .total-transaction-card-payouts-bottom {
    width: 29.4%;
    border-radius: 15px;
    padding: clamp(20px, 1.5625vw, 30px) 0 clamp(20px, 2.08vw, 40px) clamp(20px, 1.822vw, 35px)
}

.total-transaction-card-payouts-bottom .card-container-logo {
    margin-bottom: 23px
}

.total-transaction-card-payouts-bottom h3 {
    font-weight: 700;
    font-size: clamp(12px, .722vw, 14px);
    line-height: 16px;
    color: #17080f;
    text-transform: uppercase;
    margin: 0 0 31px
}

.total-transaction-card-payouts-bottom h4 {
    font-weight: 400;
    font-size: 20px;
    color: #0277bf;
    text-transform: uppercase;
    margin: 0
}

.total-transaction-card-payouts-bottom#failed-transaction-card h4 {
    color: #b20153
}

.total-transaction-card-payouts-bottom#refund-transaction-card h4 {
    color: #58488a
}

.payouts-bottom-card {
    width: 100%
}

#processing-transaction-card {
    background-color: #eff4ff;
    border: 1px solid #C2D1F2
}

#failed-transaction-card {
    background-color: #ffeff6;
    border: 1px solid #F5D2E1
}

#refund-transaction-card {
    background-color: #f3efff;
    border: 1px solid #D1C8EB
}

.card-text-container-payouts-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.payouts-filter-btn {
    background-color: #fff;
    padding: 2px 15px;
    height: 33px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease;
    letter-spacing: 0px;
    color: #51464b;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.filter-text {
    color: #a9a9a9
}

.payouts-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    min-width: 900px
}

.payouts-table th,
.payouts-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500
}

.payouts-table th {
    background: #f7f7f7;
    color: #000;
    font-size: .98rem;
    font-weight: 700;
    text-transform: uppercase
}

.payouts-table tr:last-child td {
    border-bottom: none
}

.payout-dashboard-statistics {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 15px;
    width: 48.6%;
    display: flex;
    flex-direction: column
}

.payout-dashboard-statistics .wallet-statistics-chart {
    flex-grow: 1
}

.payout-dashboard-header {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.payout-dashboard-title {
    font-weight: 700;
    color: #c1004a;
    font-size: 16px;
    text-transform: uppercase
}

.payout-dashboard-toggle-group {
    background-color: #efefef;
    display: flex;
    border-radius: 50px
}

.payout-dashboard-chart-placeholder {
    padding: 20px 25px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 1px solid #E0E0E0;
    background: #fafafa
}

.payout-dashboard-toggle-btn {
    border: none;
    padding: 6px 16px;
    font-size: 14px;
    cursor: pointer;
    color: #c1004a;
    font-weight: 600;
    outline: none
}

.payout-dashboard-toggle-btn.active {
    background: #c1004a;
    color: #fff;
    border-radius: 20px
}

.transaction-history-actions .transaction-four.collections-transcations .payout-fundtransfer-actions-date {
    width: 23.3%;
    border: 1px solid #51464B;
    border-radius: 5px;
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.transaction-history-actions .transaction-four.collections-transcations .payout-fundtransfer-actions-date label {
    width: 27.3%;
    text-align: center;
    font-weight: 700;
    font-size: clamp(12px, .722vw, 14px);
    color: #51464b;
    text-transform: uppercase
}

.transaction-history-actions .transaction-four.collections-transcations .payout-fundtransfer-actions-date label {
    width: 37.9%
}

.transaction-history-actions .transaction-four.collections-transcations .payout-fundtransfer-actions-date label+div {
    width: 62.1%
}

.transaction-history-actions .transaction-four.collections-transcations .payout-fundtransfer-actions-date label+div {
    border-left: 1px solid #51464b !important;
    width: 72.7%;
    height: 40px
}

.transaction-history-actions .transaction-four.collections-transcations .payout-fundtransfer-actions-date fieldset {
    border: none !important
}

.transaction-history-actions .transaction-four.collections-transcations .payout-fundtransfer-actions-date label+div span {
    font-size: 14px !important;
    font-weight: 500;
    color: #a8a2a5 !important
}

.transaction-history-actions .transaction-four.collections-transcations .payout-fundtransfer-actions-date input,
.payout-fundtransfer-actions-date select {
    border-left: 1px solid #51464b !important;
    width: 72.7%;
    height: 40px;
    font-size: 14px !important;
    font-weight: 500;
    color: #a8a2a5 !important;
    padding-left: 18px;
    background: none
}

.transaction-history-actions .transaction-four.collections-transcations button.search-btn {
    margin-left: auto;
    margin-right: 1.7%;
    margin-top: -18px
}

.payout-fundtransfer-self-button {
    width: 151px;
    height: 29px;
    background: var(--unnamed-color-b20153) 0% 0% no-repeat padding-box;
    background: #b20153 0% 0% no-repeat padding-box;
    border-radius: 50px;
    opacity: 1;
    margin-right: 20px;
    border: none;
    font: normal normal medium 12px/24px Lexend;
    letter-spacing: 0px;
    color: #fff;
    text-transform: uppercase
}

.payout-fundtransfer-self-data-button {
    width: 151px;
    height: 29px;
    background: var(--unnamed-color-0277bf) 0% 0% no-repeat padding-box;
    background: #0277bf 0% 0% no-repeat padding-box;
    border-radius: 50px;
    opacity: 1;
    border: none;
    font: normal normal medium 12px/24px Lexend;
    letter-spacing: 0px;
    color: #fff;
    text-transform: uppercase
}

.user-connected-cards-item {
    width: 380px;
    height: 257px;
    background-image: url(../assets/userCards-CAMikU6k.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 40px 50px;
    align-items: center
}

.mycards-wrapper .card-box {
    width: 32%;
    background: url(../assets/idfcCard-Cu_TCBRd.png) no-repeat center top;
    border-radius: 20px;
    background-size: cover;
    padding: clamp(20px, 2.03vw, 39px) clamp(20px, 1.77vw, 34px) clamp(20px, 1.5625vw, 30px) clamp(25px, 2.6vw, 50px);
    position: relative;
    margin-right: 1.3%;
    margin-bottom: 25px
}

.mycards-wrapper .card-box:nth-child(3n) {
    margin-right: 0
}

.mycards-wrapper .card-box .top-text h1 {
    font-weight: 700;
    font-size: clamp(14px, .9375vw, 18px);
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 clamp(20px, 1.5625vw, 30px) 0
}

.mycards-wrapper .card-box .top-text img {
    position: absolute;
    right: 20px;
    top: 24px;
    width: clamp(30px, 2.6vw, 50px)
}

.mycards-wrapper .card-box .middle-text {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px
}

.mycards-wrapper .card-box .middle-text p {
    font-weight: 700;
    font-size: clamp(14px, .9375vw, 18px);
    letter-spacing: 3.6px;
    color: #fff134;
    text-transform: uppercase;
    margin: 0
}

.mycards-wrapper .card-box .middle-text svg {
    width: 22px !important;
    color: #fff134;
    cursor: pointer
}

.mycards-wrapper .card-box .bottom-text {
    margin-bottom: clamp(20px, 1.77vw, 34px)
}

.mycards-wrapper .card-box .bottom-text p {
    margin: 0 0 14px;
    font-weight: 500;
    font-size: clamp(12px, .729vw, 14px);
    color: #fff
}

.mycards-wrapper .card-box .bottom-text p:last-child {
    margin-bottom: 0
}

.mycards-wrapper .card-box .bottom-button {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.mycards-wrapper .card-box .bottom-button .active {
    background: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    color: #1d8d65;
    display: flex;
    align-items: center;
    border: none;
    outline: none;
    padding: 7px 20px
}

.mycards-wrapper .card-box .bottom-button .active svg {
    margin-right: 7px
}

.mycards-wrapper .card-box .bottom-button .view-more {
    background: #b20153;
    border-radius: 50px;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2.88px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    outline: none;
    padding: 7px 20px
}

.button-icons {
    align-items: center;
    justify-content: center
}

.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0006;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start
}

.custom-modal-content {
    background: #fff;
    width: 480px;
    max-width: 100vw;
    box-shadow: -4px 0 32px #0000002e;
    position: relative;
    overflow-y: auto;
    animation: slideInRight .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column
}

@keyframes slideInRight {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(0)
    }
}

.custom-modal-close {
    position: absolute;
    top: 36px;
    right: 16px;
    z-index: 10
}

.fund-transfer-modal-tabs {
    padding: 25px 42px 55px;
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: space-between
}

.fund-transfer-form {
    padding: 42px
}

.fund-transfer-button-bg {
    background: #efefef;
    border-radius: 50px;
    display: flex;
    width: 100%
}

.fund-transfer-modal-tabs button {
    background: none;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0px;
    color: #51464b;
    text-transform: uppercase;
    border: none;
    flex-grow: 1;
    padding: 8px 24px;
    cursor: pointer;
    transition: background .2s, color .2s
}

.popup-table table {
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #C8C8C8;
    border-radius: 15px;
    width: 100%
}

.popup-table table td {
    border: 1px solid #C8C8C8
}

.popup-table table td:nth-child(1) {
    background: #f7f7f7;
    font-size: 12px;
    color: #17080f;
    padding: 10px 18px 17px
}

.popup-table table td:nth-child(2) {
    background: #fff;
    font-weight: 600;
    font-size: 12px;
    color: #b20153;
    padding: 10px 18px 17px
}

.popup-table table td:nth-child(2) .table-data {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.popup-table table td svg {
    color: #2b3151
}

.popupform .form-group {
    margin-bottom: 51px
}

.popupform .form-group h2 {
    font-weight: 600;
    font-size: 22px;
    color: #17080f;
    text-transform: uppercase
}

.popupform .form-group label {
    font-weight: 700;
    font-size: 12px;
    color: #17080f;
    text-transform: uppercase;
    display: block;
    margin-bottom: 19px
}

.popupform .form-group input {
    border: none;
    outline: none;
    border-bottom: 1px solid #6d6d6d;
    width: 100%;
    font-size: 14px;
    color: #8d8588;
    font-family: Lexend, sans-serif;
    padding-bottom: 8px
}

.popup-h2 {
    font-weight: 500;
    font-size: 20px;
    color: #17080f;
    margin: 0 0 20px
}

.popup-h3 {
    font-weight: 500;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
    color: #17080f;
    margin: 0 0 32px
}

.fund-transfer-modal-tabs button:first-child {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px
}

.fund-transfer-modal-tabs button:last-child {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px
}

.fund-transfer-modal-tabs button.active {
    background: #b20153;
    border-radius: 50px;
    color: #fff
}

.fund-transfer-modal-header {
    width: 283px;
    height: 19px;
    top: 25;
    color: var(--unnamed-color-b20153);
    text-align: left;
    font: 700 16px/24px Lexend;
    letter-spacing: 0px;
    color: #b20153;
    text-transform: uppercase;
    opacity: 1
}

.fund-transfer-btn {
    width: 201px;
    height: 50px;
    background-image: url(../assets/bgbutton-Do6V9T7r.png);
    background-size: cover;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    box-shadow: 0 4px 12px #e6007a21;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 20px
}

.fund-transfer-modal-content {
    overflow-y: auto;
    height: calc(100vh - 70px)
}

.otp-inputs input {
    width: 48px;
    height: 40px;
    border: none;
    border-bottom: 2px solid #aaa;
    font-size: 28px;
    text-align: center;
    outline: none;
    background: transparent
}

.otp-inputs input:focus {
    border-bottom: 2px solid #DE0068
}

.collection-main-header-title p {
    color: var(--unnamed-color-51464b);
    text-align: left;
    font: 600 16px/20px Lexend;
    letter-spacing: 0px;
    color: #51464b;
    text-transform: uppercase
}

.collection-main-header-transactions {
    width: 100%;
    border: 1px solid #C8C8C8;
    border-radius: 15px;
    padding-bottom: 20px
}

.collection-main-header-transactions h1 {
    align-items: flex-start;
    color: var(--unnamed-color-b20153);
    text-align: left;
    font: 700 16px/24px Lexend;
    letter-spacing: 0px;
    text-transform: uppercase;
    opacity: 1
}

.collection-main-header-title {
    display: flex;
    align-items: center
}

.collection-main-header-title h1 {
    color: var(--unnamed-color-17080f);
    text-align: left;
    font: 600 22px/28px Lexend;
    letter-spacing: 0px;
    color: #17080f;
    text-transform: uppercase;
    opacity: 1;
    cursor: pointer
}

.collection-flex-cards .total-transaction-card.transaction-amount-card,
.total-transaction-card.transaction-amount-card {
    background: #effff3;
    border: 1px solid #C1DBC7
}

.collection-flex-cards .total-transaction-card.refund-transaction-card {
    background: #ffeff6;
    border: 1px solid #F5D2E1
}

.collection-flex-cards .total-transaction-card.settlement-transaction-card {
    background: #eff4ff;
    border: 1px solid #C2D1F2
}

.total-transaction-card.transaction-amount-card .total-transaction-amount .total-transaction-card.transaction-amount-card .total-transaction-amount p {
    color: #1d8d65
}

.total-transaction-card.refund-transaction-card .total-transaction-amount p {
    color: #b20153
}

.total-transaction-card.settlement-transaction-card .total-transaction-amount p {
    color: #0277bf
}

.icon {
    width: 44px;
    height: 36px;
    border: 2.5px solid var(--unnamed-color-2b3151);
    border: 3px solid #2B3151;
    border-radius: 5px;
    align-items: center;
    justify-items: center
}

.icon p {
    font-size: 25px;
    color: #b77e0c;
    position: relative;
    top: -15px
}

.collection-flex-cards {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dfdfdf;
    padding: clamp(20px, 2.08vw, 40px) clamp(20px, 1.822vw, 35px)
}

.collection-flex-cards .total-transaction-card {
    padding: clamp(10px, 1.822vw, 5px) clamp(20px, 2.08vw, 40px) clamp(10px, 1.8vw, 5px) clamp(20px, 1.822vw, 35px);
    width: 22.9%;
    border-radius: 15px;
    border: 1px solid #D1D8BA;
    background: #fbffef
}

.collection-flex-cards .total-transaction-card p {
    margin: 0
}

.collection-flex-cards-dashboard {
    display: flex;
    justify-content: space-between
}

.collection-flex-cards .total-transaction-card .total-transaction-text {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.collection-flex-cards .total-transaction-card .total-transaction-text p {
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    line-height: clamp(14px, .833vw, 16px);
    color: #17080f;
    text-transform: uppercase
}

.collection-flex-cards .total-transaction-card .total-transaction-text img {
    width: clamp(20px, 2.44vw, 47px)
}

.collection-cards-chart-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 0 clamp(20px, 2.08vw, 40px) 0
}

.collection-cards-container {
    display: flex;
    flex-direction: column;
    width: 48.7%;
    gap: clamp(20px, 2.083vw, 40px)
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px
}

.card-value {
    font-size: 28px;
    font-weight: 700;
    margin-top: 30px;
    color: #17080f
}

.card-value.refund {
    color: #e53e3e
}

.card-value.settlement {
    color: #2b6cb0
}

.payout-statics {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 15px;
    width: 48.6%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box
}

.payout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.payout-title {
    font-weight: 700;
    color: #c1004a;
    font-size: 16px;
    text-transform: uppercase
}

.payout-toggle-group {
    display: flex;
    background: #f5f5f5
}

.payout-chart-placeholder {
    padding: 0 40px;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.payout-chart-placeholder canvas {
    width: 100% !important;
    height: auto !important
}

.refund-transaction-cards {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.refund-transaction-cards .failed-amount {
    width: 48.5%;
    background: #ffeff6;
    border: 1px solid #F5D2E1;
    border-radius: 15px;
    padding: clamp(10px, 1.822vw, 5px) clamp(20px, 2.08vw, 35px) clamp(10px, 1.822vw, 5px) clamp(20px, 1.822vw, 35px)
}

.refund-transaction-cards .initiated-amount {
    width: 48.5%;
    background: #eff4ff;
    border: 1px solid #C2D1F2;
    border-radius: 15px;
    padding: clamp(10px, 1.822vw, 5px) clamp(20px, 2.08vw, 35px) clamp(10px, 1.08vw, 5px) clamp(20px, 1.822vw, 35px)
}

.refund-transaction-cards .failed-amount .total-transaction-text {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.refund-transaction-cards .failed-amount .total-transaction-text p {
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    line-height: clamp(14px, .833vw, 16px);
    color: #17080f;
    text-transform: uppercase
}

.refund-transaction-cards .failed-amount .total-transaction-text img {
    width: clamp(20px, 2.44vw, 47px)
}

.refund-transaction-cards .initiated-amount .total-transaction-text {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.refund-transaction-cards .initiated-amount .total-transaction-text p {
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    line-height: clamp(14px, .833vw, 16px);
    color: #17080f;
    text-transform: uppercase
}

.refund-transaction-cards .initiated-amount .total-transaction-text img {
    width: clamp(20px, 2.44vw, 47px)
}

.collection-flex-cards .total-transaction-amount p {
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #0277bf;
    text-transform: uppercase
}

.disputes-transaction-cards {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.disputes-transaction-cards .total-transaction-card-dispute {
    padding: clamp(10px, 1.822vw, 5px) clamp(20px, 2.08vw, 35px) clamp(10px, 2.08vw, 5px) clamp(20px, 1.822vw, 35px);
    width: 31.5%;
    border-radius: 15px;
    background: #fbffef;
    border: 1px solid #D1D8BA
}

.disputes-transaction-cards .total-transaction-card-transaction-amount-card-dispute {
    padding: clamp(10px, 1.822vw, 5px) clamp(20px, 2.08vw, 35px) clamp(10px, 2.08vw, 5px) clamp(20px, 1.822vw, 35px);
    width: 31.5%;
    border-radius: 15px;
    background: #effff3;
    border: 1px solid #C1DBC7
}

.disputes-transaction-cards .total-transaction-card-refund-transaction-card-dispute {
    padding: clamp(10px, 1.822vw, 5px) clamp(20px, 2.08vw, 35px) clamp(10px, 2.08vw, 5px) clamp(20px, 1.822vw, 35px);
    width: 31.5%;
    border-radius: 15px;
    background: #ffeff6;
    border: 1px solid #F5D2E1
}

.disputes-transaction-cards .total-transaction-card-dispute .total-transaction-text {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.disputes-transaction-cards .total-transaction-card-dispute .total-transaction-text p {
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    line-height: clamp(14px, .833vw, 16px);
    color: #17080f;
    text-transform: uppercase
}

.disputes-transaction-cards .total-transaction-card-dispute .total-transaction-text img {
    width: clamp(20px, 2.44vw, 47px)
}

.collection-flex-cards .total-transaction-amount p {
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #b77e0c;
    text-transform: uppercase
}

.disputes-transaction-cards .total-transaction-card-transaction-amount-card-dispute .total-transaction-text {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.disputes-transaction-cards .total-transaction-card-transaction-amount-card-dispute .total-transaction-text p {
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    line-height: clamp(14px, .833vw, 16px);
    color: #17080f;
    text-transform: uppercase
}

.disputes-transaction-cards .total-transaction-card-transaction-amount-card-dispute .total-transaction-text img {
    width: clamp(20px, 2.44vw, 47px)
}

.collection-flex-cards .total-transaction-amount p {
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #1d8d65;
    text-transform: uppercase
}

.disputes-transaction-cards .total-transaction-card-refund-transaction-card-dispute .total-transaction-text {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.disputes-transaction-cards .total-transaction-card-refund-transaction-card-dispute .total-transaction-text p {
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    line-height: clamp(14px, .833vw, 16px);
    color: #17080f;
    text-transform: uppercase
}

.disputes-transaction-cards .total-transaction-card-refund-transaction-card-dispute .total-transaction-text img {
    width: clamp(20px, 2.44vw, 47px)
}

.collection-flex-cards .total-transaction-amount p {
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #b20153;
    text-transform: uppercase
}

.collection-mn-header {
    border-bottom: 1px solid #dfdfdf
}

.total-transaction-card-refund-transaction-card {
    width: 31.5%;
    background: #fff;
    border: 1px solid #C8C8C8;
    border-radius: 15px
}

.status-grid {
    width: 31.5%;
    background: #fff;
    border: 1px solid #C8C8C8;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap
}

.status-grid .status-box {
    width: 50%;
    height: 50%;
    border-right: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 0 0 clamp(20px, 2.08vw, 40px)
}

.status-grid .status-box:nth-child(2n) {
    border-right: none
}

.status-grid .status-box:nth-child(3n),
.status-grid .status-box:nth-child(4n) {
    border-bottom: none
}

.status-grid .status-box h5 {
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    color: #17080f;
    text-transform: uppercase;
    margin: 0 0 6px
}

.status-grid .status-box span {
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #1d8d65;
    text-transform: uppercase
}

.status-grid .status-box:nth-child(2) span {
    color: #b77e0c
}

.status-grid .status-box:nth-child(3) span {
    color: #a30b1e
}

.status-grid .status-box:nth-child(4) span {
    color: #0277bf
}

.collection-main-header-title {
    color: var(--unnamed-color-b20153);
    text-align: left;
    font: 700 16px/24px Lexend;
    letter-spacing: 0px;
    color: #b20153 !important;
    text-transform: uppercase;
    opacity: 1
}

@media (max-width: 1100px) {
    .collection-cards-chart-wrapper {
        flex-direction: column
    }

    .payout-statics {
        min-width: unset;
        width: 100%
    }
}

@media (max-width: 800px) {
    .collection-flex-cards {
        flex-wrap: wrap;
        gap: 10px
    }

    .collection-flex-cards .total-transaction-card {
        width: 49%
    }

    .total-transaction-card {
        width: 100%;
        min-width: unset
    }

    .collection-cards-container {
        gap: 10px
    }
}

@media (max-width: 600px) {
    .collection-flex-cards .total-transaction-card {
        width: 100%
    }

    .collection-main-container {
        padding-left: 5px;
        padding-right: 5px
    }

    .card-header {
        font-size: 15px
    }

    .card-value {
        font-size: 20px
    }
}

.transaction-history-section-dashboard {
    border: 1px solid #dadada;
    border-radius: 15px;
    padding-bottom: 60px
}

.transaction-history-header-collection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 21px 32px 17px 35px;
    border-bottom: 1px solid #d7d7d7
}

.transaction-history-header-collection h3 {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    color: #b20153;
    text-transform: uppercase
}

.transaction-history-header {
    padding: clamp(20px, 2.08vw, 40px)
}

.help-container {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.help-left {
    width: 53.5%
}

.help-right {
    width: 35.3%
}

.help-accordion {
    margin-bottom: clamp(10px, .885vw, 17px)
}

.help-question {
    background: #fff;
    border: 1px solid #D6D6D6;
    font-weight: 700;
    font-size: 14px;
    color: #17080f;
    text-transform: uppercase;
    cursor: pointer;
    padding: 14px 31px 12px
}

.help-answer {
    background: #fff;
    border: 1px solid #D6D6D6;
    padding: 20px 30px 26px
}

.help-answer p {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #17080f
}

.help-right h2 {
    margin: 0 0 clamp(30px, 2.8125vw, 54px) 0;
    font-weight: 700;
    font-size: clamp(14px, .833vw, 16px);
    color: #b20153;
    text-transform: uppercase
}

.more-help-box {
    display: flex;
    margin-bottom: clamp(30px, 2.6vw, 50px)
}

.more-help-box:last-child {
    margin-bottom: 0
}

.help-icon {
    border: 2px solid #2b3151;
    border-radius: 5px;
    width: 48px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: clamp(20px, 1.35vw, 26px)
}

.help-content {
    width: 85%
}

.help-content h3 {
    margin: 0 0 5px;
    font-weight: 700;
    font-size: 14px;
    color: #17080f;
    text-transform: uppercase
}

.help-content p {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #51464b
}

.help-icon svg {
    display: block;
    width: 50%
}

.transaction-history-title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.transaction-history-title h3 {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    color: #b20153;
    text-transform: uppercase
}

.transaction-history-title a {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2.88px;
    color: #17080f;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    cursor: pointer
}

.transaction-history-title a svg {
    width: 8px;
    color: #b30556
}

.transaction-history-actions {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.transaction-history-actions button.search-btn {
    width: 44px
}

.transaction-history-actions .transaction-three {
    width: 95.7%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.transaction-history-actions .transaction-three .transaction-history-actions-date1 {
    width: 31.5%
}

.transaction-history-actions .transaction-four {
    width: 95.7%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.transaction-history-actions .transaction-four.collections-transcations {
    width: 95%;
    padding: 20px 0 20px 2.5%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.7%;
    justify-content: flex-start
}

.transaction-history-actions .transaction-four .transaction-history-actions-date1 {
    width: 23.3%
}

.transaction-history-actions-date1 {
    border: 1px solid #51464B;
    border-radius: 5px;
    display: flex;
    align-items: center
}

.transaction-history-actions-date1 label {
    width: 27.3%;
    text-align: center;
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    color: #51464b;
    text-transform: uppercase
}

.transaction-history-actions .transaction-four .transaction-history-actions-date1 label {
    width: 37.9%
}

.transaction-history-actions .transaction-four .transaction-history-actions-date1 label+div {
    width: 62.1%
}

.transaction-history-actions-date1 label+div {
    border-left: 1px solid #51464b !important;
    width: 72.7%;
    height: 40px
}

.transaction-history-actions-date1 fieldset {
    border: none !important
}

.transaction-history-actions-date1 label+div span {
    font-size: 14px !important;
    font-weight: 500;
    color: #a8a2a5 !important
}

.transaction-history-actions-date1 input,
.transaction-history-actions-date1 select {
    border-left: 1px solid #51464b !important;
    width: 72.7%;
    height: 40px;
    font-size: clamp(12px, .729vw, 14px) !important;
    font-weight: 500;
    color: #a8a2a5 !important;
    padding-left: 18px;
    background: none
}

.collection-main-header-transactions .collection-flex-cards {
    border-bottom: 1px solid #dfdfdf
}

.collection-main-header-transactions .collection-flex-cards .total-transaction-card-dispute {
    width: 31.5%
}

.transaction-history-actions-collections {
    display: flex;
    align-items: center;
    gap: 18px
}

.transaction-history-actions-collections .transaction-filter-button {
    border: 1px solid #51464B;
    border-radius: 5px
}

.transaction-history-actions-collections .transaction-filter-button p {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    color: #51464b;
    text-transform: uppercase
}

.transaction-history-actions-collections .input-wrapper {
    border: 1px solid #51464B;
    border-radius: 5px;
    align-items: center;
    display: flex;
    padding: 3px 9px 6px
}

.transaction-history-actions-collections .input-wrapper svg {
    width: 16px;
    margin-right: 16px
}

.transaction-history-actions-collections .input-wrapper input {
    border: none;
    outline: none;
    font-weight: 500;
    font-size: 12px;
    color: #51464b;
    text-transform: uppercase
}

.transaction-history-actions-collections .transaction-filter-button {
    display: flex;
    align-items: center;
    padding: 6px 18px 7px 13px
}

.transaction-history-actions-collections .transaction-filter-button img {
    margin-right: 10px
}

.transaction-history-actions-date {
    width: 309px;
    height: 40px;
    border: 1px solid var(--unnamed-color-51464b);
    border: 1px solid #51464B;
    border-radius: 5px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.transaction-history-actions-date label {
    color: var(--unnamed-color-51464b);
    font: 700 14px/24px Lexend;
    letter-spacing: 0px;
    color: #51464b;
    text-transform: uppercase;
    opacity: 1;
    text-align: center;
    justify-content: center;
    width: 50%;
    border-right: 1px solid #51464B;
    height: 100%;
    align-content: center
}

.transaction-search-input:focus {
    outline: none;
    border: none
}

.transaction-filter-btn {
    width: 44px;
    height: 43px;
    background: #de0068;
    box-shadow: 0 5px 10px #57062775;
    border-radius: 10px;
    border: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease
}

.transaction-filter-btn:hover {
    background: #c1004a
}

.transaction-history-table-wrapper {
    overflow-x: auto;
    margin-top: 8px
}

.transaction-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    min-width: 900px
}

.transaction-history-table th,
.transaction-history-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500
}

.transaction-history-table th {
    background: #fafafa;
    color: #000;
    font-size: .98rem;
    font-weight: 700;
    text-transform: uppercase
}

.transaction-history-table tr:last-child td {
    border-bottom: none
}

.txn-status-success,
.txn-status-Active {
    color: #219653
}

.txn-status-failed,
.txn-status-Expired {
    color: #c1004a
}

.txn-status-processing,
.txn-status-Deactive,
.txn-status-initiated {
    color: #2d9cdb
}

.txn-status-refund {
    color: #e67e22
}

.chargebackbox {
    display: flex;
    align-items: center;
    padding: 39px 49px 42px 38px
}

.transactionswithdrawal-container {
    display: flex;
    align-items: center;
    padding: 39px 49px 42px 38px;
    justify-content: space-between
}

.transaction-charge-report {
    width: 1300px;
    height: 40px;
    border: 1px solid var(--unnamed-color-51464b);
    border: 1px solid #51464B;
    border-radius: 5px;
    opacity: 1;
    display: flex;
    align-items: center
}

.transaction-charge-input {
    padding: 10px;
    font-size: 15px;
    outline: none;
    border: none;
    width: 70%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.transaction-charge-report label {
    color: var(--unnamed-color-51464b);
    font: 700 14px/24px Lexend;
    letter-spacing: 0px;
    color: #51464b;
    text-transform: uppercase;
    opacity: 1;
    text-align: center;
    justify-content: center;
    width: 30%;
    border-right: 1px solid #51464B;
    height: 100%;
    align-content: center
}

.transaction-refresh-button {
    width: 44px;
    height: 43px;
    background: var(--unnamed-color-0277bf) 0% 0% no-repeat padding-box;
    background: #0277bf 0% 0% no-repeat padding-box;
    box-shadow: 0 5px 10px #57062775;
    border: none;
    border-radius: 15px
}

@media (max-width: 900px) {
    .transaction-history-section {
        padding: 10px 2px 14px
    }

    .transaction-history-table th,
    .transaction-history-table td {
        padding: 8px 4px;
        font-size: .95rem
    }

    .transaction-history-title {
        font-size: 1rem
    }
}

@media (max-width: 600px) {
    .transaction-history-section {
        padding: 6px 0 8px
    }

    .transaction-history-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .transaction-history-table th,
    .transaction-history-table td {
        padding: 6px 2px;
        font-size: .9rem
    }

    .transaction-history-table {
        min-width: 600px
    }
}

.transaction-details-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 16px #00000014;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    animation: slideInRight .3s ease;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px
}

.transaction-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 24px 10px;
    border-bottom: 1px solid #eee
}

.transaction-details-title {
    color: #c1004a;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .5px
}

.transaction-details-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #c1004a;
    cursor: pointer;
    font-weight: 700;
    padding: 0 4px;
    transition: color .2s
}

.transaction-details-close:hover {
    color: #17080f
}

.transaction-details-content {
    padding: 18px 24px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.transaction-details-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 24px;
    font-size: 1rem
}

.transaction-details-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;
    color: #51464b
}

.transaction-details-table tr:last-child td {
    border-bottom: none
}

.transaction-details-table td:first-child {
    color: #888;
    font-weight: 600;
    width: 44%
}

.transaction-details-table .highlight,
.transaction-details-table .charge-amount {
    color: #c1004a;
    font-weight: 700
}

.transaction-details-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    justify-content: flex-end
}

.transaction-details-logo-text {
    font-weight: 700;
    color: #c1004a;
    font-size: 1.1rem;
    letter-spacing: 1px
}

@media (max-width: 600px) {
    .transaction-details-drawer {
        width: 100vw;
        border-radius: 0;
        padding: 0
    }

    .transaction-details-header,
    .transaction-details-content {
        padding-left: 10px;
        padding-right: 10px
    }

    .transaction-details-logo {
        margin-top: 18px
    }

    .transaction-details-table td {
        padding: 6px 4px;
        font-size: .95rem
    }
}

.collection-main-header {
    color: var(--unnamed-color-17080f);
    font: 600 16px/28px Lexend;
    letter-spacing: 0px;
    color: #17080f;
    text-transform: uppercase;
    opacity: 1;
    display: flex;
    width: 100%;
    padding: 10px 20px 0 10px
}

.total-transaction-card-collection {
    width: 47.2%;
    background: #fbffef;
    border: 1px solid #D1D8BA;
    border-radius: 15px;
    padding: clamp(10px, 1.4vw, 5px) clamp(20px, 2.03vw, 39px) clamp(10px, 2.5vw, 5px) clamp(20px, 2.03vw, 39px);
    box-sizing: border-box
}

.total-transaction-card-collection.transaction-amount-card {
    background: #effff3;
    border: 1px solid #C1DBC7
}

.total-transaction-card-collection.refund-transaction-card {
    background: #ffeff6;
    border: 1px solid #F5D2E1
}

.total-transaction-card-collection.settlement-transaction-card {
    background: #eff4ff;
    border: 1px solid #C2D1F2
}

.card-text-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 clamp(20px, 1.875vw, 36px) 0
}

.card-text-container .card-text {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #17080f;
    text-transform: uppercase
}

.card-text-container .card-container-logo img {
    width: clamp(30px, 2.44vw, 47px)
}

.total-transaction-card-collection .card-data-amount {
    font-weight: 400;
    font-size: 20px;
    color: #b77e0c;
    text-transform: uppercase
}

.total-transaction-card-collection.transaction-amount-card .card-data-amount {
    color: #1d8d65
}

.total-transaction-card-collection.refund-transaction-card .card-data-amount {
    color: #b20153
}

.total-transaction-card-collection.settlement-transaction-card .card-data-amount {
    color: #0277bf
}

.create-payment-link-btn {
    width: 187px;
    height: 29px;
    background: var(--unnamed-color-b20153) 0% 0% no-repeat padding-box;
    background: #b20153 0% 0% no-repeat padding-box;
    border-radius: 50px;
    border: none;
    color: var(--unnamed-color-ffffff);
    font: normal normal medium 12px/24px Lexend;
    letter-spacing: 0px;
    color: #fff;
    text-transform: uppercase;
    opacity: 1
}

.right-modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: #0000001f;
    z-index: 3000;
    display: flex;
    justify-content: flex-end
}

.right-modal {
    width: 410px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 16px #00000014;
    display: flex;
    flex-direction: column;
    padding: 32px 24px 24px;
    animation: slideInRight .3s ease;
    position: relative;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    overflow-y: auto
}

@keyframes slideInRight {
    0% {
        right: -420px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

.right-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #eee;
    padding: 24px 31px 25px 48px
}

.right-modal-header span {
    font-weight: 700;
    font-size: 16px;
    color: #b20153;
    text-transform: uppercase
}

.right-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #c1004a;
    cursor: pointer;
    font-weight: 700;
    padding: 0 4px;
    transition: color .2s
}

.right-modal-close:hover {
    color: #17080f
}

.right-modal-form label {
    font-weight: 600;
    margin-bottom: 13px;
    color: #17080f;
    text-transform: uppercase;
    display: block
}

.right-modal-form input[type=number],
.right-modal-form input[type=email],
.right-modal-form input[type=text],
.right-modal-form input[type=date],
.right-modal-form select {
    width: 100%;
    padding: 10px 0 8px;
    margin-bottom: 2px;
    border: none;
    border-bottom: 2px solid #C8C8C8;
    border-radius: 0;
    font-size: 15px;
    background: #fff;
    outline: none;
    transition: border-color .2s
}

.right-modal-form input[type=number]:focus,
.right-modal-form input[type=email]:focus,
.right-modal-form input[type=text]:focus,
.right-modal-form input[type=date]:focus,
.right-modal-form select:focus {
    border-bottom: 2px solid #B20153
}

.right-modal-form input[type=checkbox] {
    width: 36px;
    height: 20px;
    accent-color: #B20153;
    margin-top: 8px;
    margin-bottom: 8px
}

.success-submit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    color: #b20153
}

.submit-btn {
    width: 201px;
    height: 50px;
    background-image: url(../assets/bgbutton-Do6V9T7r.png);
    background-size: cover;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    box-shadow: 0 4px 12px #e6007a21;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 8px
}

@media (max-width: 600px) {
    .right-modal {
        width: 100vw;
        border-radius: 0;
        padding: 18px 8px
    }

    .right-modal-header {
        font-size: 16px;
        padding: 0 2px
    }
}

.custom-toggle-switch {
    width: 44px;
    height: 24px;
    background: #c8c8c8;
    border-radius: 12px;
    position: relative;
    transition: background .2s;
    display: flex;
    align-items: center
}

.custom-toggle-switch.active {
    background: #b20153
}

.custom-toggle-slider {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 2px;
    top: 2px;
    transition: left .2s;
    box-shadow: 0 1px 4px #00000014
}

.custom-toggle-switch.active .custom-toggle-slider {
    left: 22px
}

.Parent-header {
    cursor: pointer;
    width: 153px;
    height: 29px;
    text-align: left;
    font: 600 22px/28px Lexend;
    letter-spacing: 0px;
    color: #17080f;
    text-transform: uppercase;
    opacity: 1
}

.downloadReport-main-header {
    margin-top: 19px;
    padding: 10px;
    height: 29px;
    color: var(--unnamed-color-17080f);
    text-align: left;
    font: 600 14px/26px Lexend;
    letter-spacing: 0px;
    color: #17080f;
    text-transform: uppercase;
    display: flex;
    align-items: center
}

.downloadReport-header-container {
    background: #fff;
    border: 1px solid #E0E0E0;
    margin-top: 22px;
    padding: 0;
    box-shadow: 0 2px 8px #00000005;
    border-radius: 10px
}

.downloadReport-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px;
    border-bottom: 1px solid #E0E0E0
}

.downloadReport-title {
    font-weight: 700;
    color: #c1004a;
    font-size: 1.1rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0;
    padding: 20px
}

.downloadReport-header-subNavigate {
    width: 202px;
    height: 21px;
    color: var(--unnamed-color-51464b);
    text-align: left;
    font: 600 16px/20px Lexend;
    letter-spacing: 0px;
    color: #51464b;
    text-transform: uppercase
}

.downloadReport-generate {
    width: 265px;
    height: 29px;
    background: #b20153 0% 0% no-repeat padding-box;
    border-radius: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    padding-inline: 9px
}

.downloadReport-generate-report {
    width: 200px;
    height: 16px;
    color: var(--unnamed-color-ffffff);
    font: normal normal medium 10px/24px Lexend;
    letter-spacing: 0px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center
}

.download-report-customize-transactions {
    width: 100%;
    padding: 5px 35px;
    display: flex;
    flex-direction: row;
    gap: 35px
}

.download-report-actions-date {
    width: 403px;
    height: 40px;
    border: 1px solid #51464B;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.download-report-actions-date label {
    font: 700 14px/24px Lexend;
    letter-spacing: 0px;
    color: #51464b;
    text-transform: uppercase;
    text-align: center;
    justify-content: center;
    width: 50%
}

.download-report-actions-date select {
    width: 60%;
    height: 100%;
    outline: none;
    border: 1.5px solid #8F0545;
    text-transform: uppercase;
    padding-left: 10px
}

.download-report-actions-date option {
    width: 57px;
    height: 18px;
    color: var(--unnamed-color-51464b);
    text-align: left;
    font: normal normal medium 14px/30px Lexend;
    letter-spacing: 0px;
    color: #51464b
}

.download-report-action-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px
}

.download-report-action {
    border-radius: 7px;
    width: 25px;
    height: 20px;
    box-shadow: 0 5px 10px #57062775;
    align-items: center;
    display: flex;
    padding: 10px
}

#download-report-search {
    background: #de0068 0% 0% no-repeat padding-box
}

#download-report-reset {
    background: #0277bf 0% 0% no-repeat padding-box
}

.download-report-table-wrapper {
    overflow-x: auto;
    margin-top: 8px;
    padding: 0 10px
}

.download-report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    min-width: 900px
}

.download-report-table-header th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: #333;
    background-color: #f9f9f9
}

.download-report-table-data {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;
    color: #51464b;
    text-align: left
}

.download-report-table tr:last-child td {
    border-bottom: none;
    align-items: center
}

.download-report-table td:first-child {
    color: #888;
    font-weight: 600;
    width: 5%
}

.download-report-table-body {
    padding: 30px
}

.generate-report-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000026;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start
}

.generate-report-modal {
    margin: 0 32px 0 0;
    background: #fff;
    box-shadow: 0 4px 24px #00000021;
    width: 470px;
    height: 457px;
    padding: 0 32px 32px;
    position: relative
}

.generate-report-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 12px;
    border-bottom: 1px solid #eee
}

.generate-report-title {
    color: #e6007a;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .5px
}

.form-group select {
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 2px solid #ccc;
    font-size: 14px;
    outline: none
}

.bene-container {
    padding: 20px
}

.beneficiaries-container {
    padding: 32px 0;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #fff 0% 0% no-repeat padding-box;
    border-radius: 10px 0 0;
    opacity: 1;
    min-height: 100vh
}

.title-topbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.payouts-main-container {
    margin-bottom: 200px
}

.main-content .collection-main-container {
    min-height: 73vh;
    margin-bottom: 100px
}

.main-content .page-title {
    font-weight: 600;
    font-size: 22px;
    color: #17080f;
    text-transform: uppercase;
    margin: 0 0 31px;
    display: flex;
    align-items: center
}

.main-content .page-title span {
    font-weight: 600;
    font-size: 16px;
    color: #51464b;
    text-transform: uppercase
}

.main-content .common-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d6d6d6;
    padding: 18px 32px 15px 35px;
    gap: 10px
}

.main-content .common-header .common-title {
    font-weight: 700;
    font-size: 16px;
    color: #b20153;
    text-transform: uppercase;
    margin-right: 30px
}

.common-tab {
    background: #efefef;
    border-radius: 50px;
    display: flex;
    gap: 5px
}

.common-tab button {
    background: none;
    outline: none;
    border: none;
    font-weight: 500;
    font-size: clamp(10px, .625vw, 12px);
    color: #51464b;
    text-transform: uppercase;
    padding: 6px 17px;
    cursor: pointer;
    transition: all .3s ease-in-out
}

.common-tab button.active,
.common-tab button:hover {
    background: #b20153;
    border-radius: 50px;
    color: #fff
}

.beneficiaries-card {
    border: 1px solid #d6d6d6;
    border-radius: 15px
}

.beneficiaries-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 33px 15px 40px;
    border-bottom: 1px solid #d6d6d6
}

.beneficiaries-list-label {
    font-weight: 700;
    font-size: clamp(12px, .833vw, 16px);
    color: #b20153;
    text-transform: uppercase
}

.beneficiaries-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.beneficiaries-actions button {
    border-radius: 50px;
    font-weight: 500;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    background: none;
    outline: none;
    border: none;
    padding: 6px 16px 6px 15px;
    cursor: pointer;
    transition: all .3s ease-in-out
}

.beneficiaries-actions button.bulk-btn {
    background: #b20153;
    border-radius: 50px
}

.beneficiaries-actions button.bulk-btn:hover {
    background: #de0068
}

.beneficiaries-actions button.add-btn {
    background: #0277bf;
    border-radius: 50px
}

.beneficiaries-actions button.add-btn:hover {
    background: #0093ed
}

.beneficiaries-search-row {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    background: #fff
}

.beneficiaries-search-input-group {
    width: 90.9%;
    border: 1px solid #51464B;
    border-radius: 5px;
    display: flex;
    align-items: center
}

.beneficiaries-search-label {
    font-weight: 700;
    font-size: clamp(10px, .729vw, 14px);
    color: #51464b;
    text-transform: uppercase;
    width: 28.4%;
    text-align: center
}

.beneficiaries-search-input {
    border: none;
    outline: none;
    font-weight: 400;
    font-size: clamp(10px, .729vw, 14px);
    color: #51464b;
    line-height: 40px;
    background: none;
    width: 71.6%;
    padding: 0 0 0 clamp(12px, 1.145vw, 22px);
    border-left: 1px solid #696064
}

.search-btn,
.refresh-btn,
.clear-btn {
    width: clamp(30px, 2.29vw, 44px);
    height: clamp(30px, 2.29vw, 44px);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(12px, .9375vw, 18px);
    cursor: pointer;
    box-shadow: 0 2px 6px #00000014;
    transition: all .3s ease-in-out
}

.search-btn svg,
.refresh-btn svg {
    width: clamp(20px, 1.5625vw, 30px)
}

.search-btn {
    background: #de0068;
    color: #fff
}

.refresh-btn {
    background: #0277bf;
    color: #fff;
    margin-left: auto
}

.clear-btn {
    background: #ff5722;
    color: #fff;
    margin-left: 10px
}

.date-filter.date-btn-wrapper .refresh-btn {
    margin-left: inherit
}

.search-btn.six-inputs {
    margin-right: -1.3% !important
}

.refresh-btn.six-inputs {
    margin-top: -17px
}

.beneficiaries-table-wrapper {
    overflow-x: auto
}

.beneficiaries-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    background: #fff;
    border-radius: 25px
}

.beneficiaries-table th,
.beneficiaries-table td {
    padding: 18px 8px;
    text-align: left;
    font-size: 14px
}

.beneficiaries-table th {
    background: #fafbfc;
    color: #222;
    font-weight: 700;
    border-bottom: 2px solid #eee
}

.beneficiaries-table td {
    border-bottom: 1px solid #f0f0f0;
    color: #222
}

.status-active {
    color: #009e60;
    font-weight: 600;
    display: flex;
    align-items: center
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #009e60;
    border-radius: 50%;
    margin-right: 6px
}

.tpin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000026;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start
}

.tpin-modal {
    background: #fff;
    box-shadow: 0 4px 24px #00000021;
    width: 470px;
    min-height: 50vh;
    position: relative
}

.tpin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 24px 31px 25px 48px
}

.tpin-modal-content {
    padding: 50px 36px 50px 47px
}

.tpin-modal-content.overflow {
    height: calc(100vh - 75px);
    overflow-y: auto
}

.tpin-modal-header img {
    cursor: pointer
}

.tpin-title {
    color: #b20153;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0px;
    text-transform: uppercase
}

.tpin-close-btn {
    background: #fff;
    border: 1px solid #e6007a;
    color: #e6007a;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.tpin-modal-body {
    margin-top: 18px;
    text-align: left
}

.tpin-modal-body p {
    color: #17080f;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 32px;
    text-align: left
}

.tpin-title-header {
    width: 350px;
    height: 72px;
    font-weight: 700;
    color: var(--unnamed-color-17080f);
    display: flex;
    justify-content: flex-start;
    font: normal normal medium 16px/24px Lexend;
    letter-spacing: 0px;
    color: #17080f;
    opacity: 1;
    margin-bottom: 30px
}

.tpin-inputs {
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(30px, 2.6vw, 50px)
}

.tpin-input {
    font-weight: 500;
    padding: 0 0 16px;
    font-size: 16px;
    line-height: 24px;
    color: #17080f;
    margin: 0;
    width: 8.5%;
    border: none;
    border-bottom: 2px solid #aaa;
    text-align: center;
    outline: none;
    background: transparent
}

.tpin-verify-btn {
    width: 201px;
    height: 50px;
    background-image: url(../assets/bgbutton-Do6V9T7r.png);
    background-size: cover;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    box-shadow: 0 4px 12px #e6007a21;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 8px
}

.Qr-combined-box .copy-UpiId {
    font-weight: 500;
    font-size: 16px;
    color: #17080f;
    margin-bottom: 20px;
    text-align: center
}

.QR-code-box {
    text-align: center;
    margin-bottom: 20px
}

.qr-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}

.qr-btn-left {
    display: flex;
    align-items: center
}

.qr-btn-left a svg {
    margin-right: 10px
}

.qr-btn-left a {
    font-weight: 400;
    font-size: 18px;
    color: #b20153;
    text-transform: uppercase
}

.qr-btn-right a svg {
    margin-right: 10px
}

.qr-btn-right a {
    font-weight: 400;
    font-size: 18px;
    color: #0277bf;
    text-transform: uppercase
}

.qr-bottom1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 400;
    font-size: 18px;
    color: #b20153;
    margin-bottom: 20px
}

.qr-bottom2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 400;
    font-size: 18px;
    color: #0277bf
}

.add-beneficiary-modal {
    width: 470px;
    height: 90vh !important;
    min-height: 600px;
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom: 0;
    border-radius: 12px
}

.form-group select {
    width: 100%;
    border: none;
    border-bottom: 2px solid #888;
    font-size: 15px;
    padding: 8px 0 6px;
    background: transparent;
    outline: none;
    margin-top: 2px;
    color: #231f20
}

.form-group input:focus,
.form-group select:focus {
    border-bottom: 2px solid #DE0068
}

.verified-text {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #009e60;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px
}

.verified-text span {
    color: #009e60
}

.add-beneficiary-btn {
    width: 200px;
    height: 40px;
    background: linear-gradient(90deg, #0277bf, #4ba3e3);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    box-shadow: 0 4px 12px #0277bf21;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 8px;
    display: none
}

.add-beneficiary-btn.show {
    display: block
}

.tpin-verify-btn.hide {
    display: none
}

.add-beneficiary-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 32px
}

.cancel-btn {
    background: none;
    border: none;
    color: #0c0b0c;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
    margin-left: 16px;
    display: flex;
    align-items: center
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0
    }

    to {
        background-position: 1000px 0
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 4px
}

.skeleton-text {
    height: 16px;
    margin: 4px 0
}

.skeleton-circle {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 8px
}

.skeleton-table th {
    background: #fafbfc;
    color: #222;
    font-weight: 700;
    border-bottom: 2px solid #eee
}

.skeleton-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f0f0f0
}

.skeleton-table .skeleton-text {
    width: 80%
}

.skeleton-table .skeleton-text.short {
    width: 40%
}

.skeleton-table .skeleton-text.medium {
    width: 60%
}

.skeleton-table .skeleton-text.long {
    width: 90%
}

.loading-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.loading-dot {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    animation: loadingDot 1.4s infinite ease-in-out both
}

.loading-dot:nth-child(1) {
    animation-delay: -.32s
}

.loading-dot:nth-child(2) {
    animation-delay: -.16s
}

@keyframes loadingDot {

    0%,
    80%,
    to {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-8px)
    }
}

.tpin-verify-btn.loading {
    pointer-events: none;
    opacity: .8
}

.tpin-error {
    color: #e6007a;
    font-size: 13px;
    margin-top: 4px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 4px
}

.tpin-input.error {
    border-bottom: 2px solid #e6007a
}

.tpin-input.error:focus {
    border-bottom: 2px solid #e6007a
}

.tpin-amount {
    padding: 30px 0;
    display: flex;
    gap: 10px
}

.tpin-amount button {
    font-size: 20px;
    flex: 1 1 auto;
    padding: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    background: #eff4ff;
    color: #51464b;
    cursor: pointer;
    transition: all .3s ease-in-out
}

.tpin-modal-content .agreement-text {
    margin: 0 0 30px;
    font-size: 14px
}

.tpin-modal-content .agreement-text input[type=checkbox] {
    margin-right: 10px
}

.form-group.error label {
    color: #e6007a
}

.form-group.error input,
.form-group.error select {
    border-bottom: 2px solid #e6007a
}

.form-group.error input:focus,
.form-group.error select:focus {
    border-bottom: 2px solid #e6007a
}

.form-error {
    color: #e6007a;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px
}

.form-error span {
    font-size: 14px
}

.add-beneficiary-actions {
    margin-top: 24px
}

.add-beneficiary-actions .tpin-verify-btn {
    min-width: 200px
}

.sucess-modal {
    height: 590px !important
}

.otp-section {
    margin-top: 24px;
    text-align: center
}

.otp-section label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px
}

.otp-inputs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px
}

.otp-input {
    font-weight: 600;
    color: #333;
    background: #fff;
    transition: all .2s ease;
    width: 53px;
    height: 40px;
    border: none;
    border-bottom: 2px solid #aaa;
    font-size: 28px;
    text-align: center;
    outline: none;
    background: transparent;
    margin-bottom: 16px;
    margin-top: 10px
}

.otp-input.error {
    border-color: #ff4d4f
}

.otp-input:disabled {
    background: #f5f5f5;
    cursor: not-allowed
}

.payIn-add-money-tab-group {
    margin-top: 10px;
    display: flex;
    border-radius: 10px;
    align-items: center;
    gap: 20px
}

.payIn-add-money-tab {
    flex: 1;
    cursor: pointer;
    color: var(--unnamed-color-565987);
    text-align: left;
    font: 700 15px/18px Roboto;
    letter-spacing: 0px;
    color: #565987;
    text-transform: uppercase;
    opacity: 1;
    background: transparent;
    border: none;
    transition: all .3s ease-in-out;
    white-space: nowrap;
    text-align: center
}

.payIn-add-money-tab.active {
    border-bottom: 1px solid #AA182A;
    color: #aa182a
}

.navbar-balance-popup {
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px #00000021;
    min-width: 173px;
    z-index: 1001;
    padding: 20px;
    color: #b20153;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px
}

.navbar-balance-section {
    margin-bottom: 25px
}

.navbar-balance-label {
    color: #51464b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px
}

.navbar-balance-value {
    color: #b20153;
    font-size: 20px;
    font-weight: 700
}

.navbar-balance-divider {
    border-top: 1px solid #eee;
    margin: 8px 0
}

html,
body {
    height: 100%;
    overflow: hidden;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body.login-body {
    width: 100vw;
    height: 100vh;
    font-family: Lexend, sans-serif
}

.logo img {
    display: block;
    width: 11.875vw
}

.login-page {
    height: 100vh
}

.login-img img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 3
}

.login-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 9vh 5.9% 0 11.85vh;
    position: relative;
    z-index: 4
}

.login-title {
    display: flex;
    align-items: center
}

.login-title h2 {
    font-weight: 400;
    font-size: clamp(20px, 3.7vh, 40px);
    line-height: clamp(30px, 4.62vh, 50px);
    color: #fff;
    margin-right: 2.86vw;
    margin-top: 0;
    margin-bottom: 0
}

.login-title h2 span {
    font-weight: 700;
    font-size: clamp(20px, 2.08vw, 40px);
    color: #f96eaf
}

.login-title p {
    width: 10.41vw;
    font-weight: 400;
    font-size: clamp(12px, 1.04vw, 20px);
    line-height: clamp(17px, 1.3vw, 25px);
    color: #fff;
    margin-top: 0;
    margin-bottom: 0
}

.img-section1 p,
.img-section2 p,
.img-section3 p {
    text-align: center;
    font-weight: 400;
    font-size: clamp(10px, 1.66vh, 18px);
    line-height: clamp(15px, 2.12vh, 23px);
    color: #fff
}

.img-section3 img {
    display: block
}

.login-main-section {
    width: 38.54vw;
    margin-left: auto;
    margin-top: 12.6vw
}

.img-section1 p span,
.img-section2 p span,
.img-section3 p span {
    display: block;
    font-weight: 500;
    font-size: clamp(16px, 2.31vh, 25px);
    line-height: clamp(14px, 2.35vh, 27px);
    color: #ffd500;
    margin-bottom: 2px
}

.copyright {
    position: absolute;
    right: 0;
    bottom: 0;
    border-top: 1px solid #ACACAC;
    width: 72.1%;
    text-align: right;
    z-index: 1;
    padding: 2.12vh 7.96vh 2.59vh 0
}

.copyright p {
    font-weight: 700;
    font-size: clamp(8px, .625vw, 12px);
    letter-spacing: 2.88px;
    color: #17080f;
    text-transform: uppercase;
    padding: 0;
    margin: 0
}

.copyright a {
    text-decoration: none;
    color: #0277bf
}

.copyright a:hover {
    color: #17080f
}

.img-section1 {
    z-index: 4;
    position: absolute;
    left: 4.6%;
    bottom: 51vh;
    width: 14.07vh;
    height: 13.79vh
}

.img-section1 svg {
    display: block;
    transform: scale(1.5) !important;
    left: .78125vw
}

.img-section1 p {
    margin: 1.759vh 0 0
}

.img-section2 {
    z-index: 4;
    position: absolute;
    left: 69.81vh;
    top: 14.5vh;
    width: 12.4vh;
    height: 13.61vh
}

.img-section2 svg {
    display: block;
    transform: scale(2.8) !important;
    margin: 8.33vh 0 0 1.66vh
}

.img-section2 p {
    width: 13.6vh;
    margin: -4vh 0 0 -2.5vh
}

.img-section3 {
    z-index: 4;
    position: absolute;
    width: 28.61vh;
    height: 36.48vh;
    left: 60.92vh;
    bottom: 2.2vh
}

.img-section3 svg {
    display: block;
    transform: scale(1.42) !important;
    margin: 0 0 0 -1.2vh
}

.img-section3 p {
    position: absolute;
    left: -47%;
    top: 16%
}

.img-section4 {
    z-index: 4;
    position: absolute;
    left: 7.7%;
    width: 7.03vw;
    height: 8.33vw;
    margin-bottom: 0;
    bottom: 0;
    overflow: hidden
}

.img-section4 svg {
    width: 13vw !important;
    position: relative;
    left: -40%;
    top: -1.5625vw
}

.primary-form {
    width: 58.51vh;
    position: relative;
    z-index: 5;
    margin-left: auto;
    height: 70.09vh;
    margin-right: 10.925vh;
    display: flex;
    align-items: center
}

.primary-form .primary-form-container {
    width: 100%
}

.form-container h1 {
    font-weight: 400;
    font-size: clamp(20px, 3.7vh, 40px);
    margin: 0 0 clamp(30px, 5vh, 54px) 0;
    color: #17080f
}

.login-form-container {
    margin-bottom: 13.88vh
}

.login-form-container .input-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    margin-bottom: clamp(30px, 2.6vw, 50px)
}

.login-form-container .input-field input[type=text] {
    border: none;
    border-bottom: 2px solid #4b4b4b;
    width: 100%;
    font-weight: 400;
    font-size: clamp(15px, 1.3vw, 25px);
    text-transform: capitalize;
    padding: 0 0 clamp(15px, 1.302vw, 25px) 0;
    color: #17080f
}

.login-form-container .input-field input[type=text]:focus {
    border-bottom: 2px solid #b20354
}

.login-form-container .input-field input::placeholder {
    color: #8b8387
}

.primary-form-container .register-button-proceed {
    background: url(../assets/ProceedButton-DKp8_jij.png) no-repeat left top;
    border: none;
    outline: none;
    width: clamp(200px, 25.09vh, 271px);
    height: clamp(65px, 8.14vh, 88px);
    background-size: contain;
    cursor: pointer
}

.login-form-container .input-field .phone-icon {
    position: absolute;
    right: 0;
    bottom: clamp(13px, 1.197vw, 23px);
    width: 18px
}

.login-form-container.enterpan .input-field .phone-icon {
    position: absolute;
    right: 0;
    bottom: clamp(13px, 1.197vw, 23px);
    width: clamp(30px, 2.39vw, 46px)
}

.primary-form-container .register-button-proceed div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    letter-spacing: 3.5px;
    color: #fff;
    padding: clamp(16px, 1.04vw, 20px) 0 0 0;
    gap: clamp(3px, .468vw, 9px)
}

.login-form-container p.error-message,
.tpin-modal-body p.error-message,
.rightPanel p.error-message {
    margin: clamp(-20px, -2.6vw, -50px) 0 0 0;
    font-size: clamp(12px, .729vw, 14px);
    transform: translateY(-100%);
    color: red
}

.input-data:hover {
    border: none;
    border-bottom: 1px solid #B20153;
    outline: none
}

.input-data:focus {
    border: none;
    border-bottom: 2px solid #B20153;
    outline: none
}

.error-message {
    color: red
}

.success-message {
    color: green
}

.otp-resend-text {
    font-weight: 600;
    font-size: clamp(12px, .833vw, 16px);
    color: #b20153
}

.create-tpin {
    color: var(--unnamed-color-b20153);
    text-align: left;
    font: 600 16px/20px Lexend;
    letter-spacing: 0;
    color: #b20153;
    opacity: 1
}

.location-permission-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 12px;
    margin: 10px 0;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px
}

.location-status {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    z-index: 1000;
    box-shadow: 0 2px 10px #0000001a;
    max-width: 400px;
    animation: slideIn .3s ease-out
}

.location-status.error {
    background-color: #fff3f3;
    border: 1px solid #ffcdd2;
    color: #d32f2f
}

.location-status.success {
    background-color: #f1f8e9;
    border: 1px solid #c5e1a5;
    color: #33691e
}

.location-status p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4
}

.retry-location-button {
    background: linear-gradient(180deg, #ed028c, #c2054f);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: opacity .3s ease
}

.retry-location-button:hover {
    opacity: .9
}

@keyframes slideIn {
    0% {
        transform: translate(100%);
        opacity: 0
    }

    to {
        transform: translate(0);
        opacity: 1
    }
}

.location-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000080;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn .3s ease-out
}

.location-modal {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px #00000026;
    animation: slideUp .3s ease-out
}

.location-modal-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.location-modal-header h3 {
    color: #17080f;
    font-size: 24px;
    margin: 0;
    font-weight: 600
}

.location-modal-body {
    margin-bottom: 24px
}

.location-modal-body p {
    color: #333;
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.5
}

.location-modal-body ul {
    margin: 0 0 16px;
    padding-left: 20px
}

.location-modal-body li {
    color: #666;
    margin-bottom: 8px;
    font-size: 15px
}

.location-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

.location-modal-button {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease;
    border: none
}

.location-modal-button.allow {
    background: linear-gradient(180deg, #ed028c, #c2054f);
    color: #fff
}

.location-modal-button.allow:hover {
    opacity: .9;
    transform: translateY(-1px)
}

.location-modal-button.skip {
    background: #f5f5f5;
    color: #666
}

.location-modal-button.skip:hover {
    background: #e0e0e0
}

.location-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all .3s ease
}

.location-modal-close:hover {
    background-color: #f5f5f5;
    color: #333
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

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

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin: auto
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.phone-icon {
    width: clamp(10px, 1.85vh, 20px);
    height: clamp(26px, 3.33vh, 36px);
    margin-left: -2.77vh;
    margin-bottom: -.92vh
}

.top-right-section {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 650px;
    flex-wrap: wrap
}

.payment-wrapper {
    height: 70.09vh;
    width: 32.5%;
    display: flex !important;
    align-items: center;
    margin-left: auto;
    margin-right: 6.5%;
    justify-content: center;
    position: relative;
    z-index: 999
}

.payment-container {
    width: 100%
}

.has-expired {
    background: #f5f5f5;
    border-radius: 15px;
    width: 64%;
    padding: clamp(50px, 4.63vw, 89px) 0 clamp(50px, 4.63vw, 89px) 0;
    margin: 0 auto
}

.has-expired h1 {
    font-weight: 700;
    font-size: clamp(16px, 1.145vw, 22px);
    line-height: clamp(18px, 1.25vw, 24px);
    text-transform: uppercase;
    max-width: 200px;
    margin: clamp(20px, 1.71vw, 33px) auto 0 auto;
    color: #b20153;
    text-align: center
}

.make-payment h3 {
    font-weight: 400;
    font-size: clamp(20px, 2.08vw, 40px);
    color: #17080f;
    margin: 0 0 clamp(15px, 1.822vw, 35px) 0
}

.make-payment .input-field {
    margin: 0 0 clamp(20px, 1.45vw, 28px) 0
}

.make-payment .input-field input,
.make-payment .input-field select {
    border: none;
    outline: none;
    width: 100%;
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #17080f;
    border-bottom: 1px solid #190a11;
    padding: 0 0 clamp(16px, 1.35vw, 26px) 0
}

.make-payment .input-field input::placeholder {
    color: #8b8487
}

.payment-details .payment-row {
    display: flex;
    align-items: center;
    margin: 0 0 clamp(20px, 1.45vw, 28px) 0
}

.payment-details .payment-row label {
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #17080f;
    width: clamp(100px, 5.833vw, 112px)
}

.payment-details .payment-row span {
    font-weight: 700;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #b20153
}

.qr-section-text {
    width: 100%
}

.qr-section-text h1 {
    font-weight: 400;
    font-size: clamp(20px, 3.7vh, 40px);
    margin: 0 0 clamp(30px, 5vh, 54px) 0;
    color: #17080f
}

.qr-section-text select {
    border: none;
    outline: none;
    width: 100%;
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #17080f;
    border-bottom: 1px solid #190a11;
    padding: 0 0 clamp(16px, 1.35vw, 26px) 0;
    margin: 0 0 clamp(20px, 1.45vw, 28px) 0
}

.qr-details {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.qr-details-text {
    width: 34.2%
}

.qr-details-text ul,
.qr-details-text li {
    list-style: none;
    margin: 0;
    padding: 0
}

.qr-details-text li {
    border-bottom: 1px solid #707070;
    padding: 0 0 28px;
    margin: 0 0 27px
}

.qr-details-text li:last-child {
    border-bottom: none
}

.qr-details-text li label {
    display: block;
    font-weight: 400;
    font-size: 20px;
    color: #17080f;
    margin-bottom: 5px
}

.qr-details-text li span {
    font-weight: 700;
    font-size: 20px;
    color: #b20153
}

.qr-image-box {
    width: 56.4%;
    background: #f5f5f5;
    border-radius: 15px;
    text-align: center;
    padding: clamp(25px, 2.6vw, 50px) clamp(25px, 2.6vw, 50px)
}

.qr-image-box .qrtext {
    font-weight: 400;
    font-size: clamp(14px, .9375vw, 18px);
    color: #17080f
}

.qr-image-box svg {
    max-width: 100%
}

.search-error {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500
}

.date-filter-wrapper1 {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.date-title1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 20px 20px 30px
}

.date-title1 h3 {
    font-weight: 700;
    margin: 0;
    font-size: clamp(12px, .729vw, 14px);
    color: #b20153;
    text-transform: uppercase
}

.date-title1 a.viewall {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2.88px;
    color: #17080f;
    text-transform: uppercase
}

.date-filter-wrapper {
    border-bottom: 2px solid #e6e6e6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: clamp(20px, 1.927vw, 37px) clamp(20px, 2.39vw, 46px) clamp(20px, 2.39vw, 46px) clamp(20px, 1.927vw, 37px)
}

.date-filter-wrapper .date-title {
    width: 100%;
    display: flex;
    margin: 0 0 clamp(15px, 1.5625vw, 30px) 0;
    align-items: center;
    justify-content: space-between
}

.date-filter-wrapper .date-title h3 {
    font-weight: 700;
    margin: 0;
    font-size: clamp(12px, .729vw, 14px);
    color: #b20153;
    text-transform: uppercase
}

.date-filter-wrapper .date-title a.viewall {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2.88px;
    color: #17080f;
    text-transform: uppercase
}

.date-filter-wrapper .date-title .beneficiaries-actions {
    margin-left: auto
}

.overflow-wrapper {
    min-width: 1000px
}

.date-filter-box {
    width: 90.6%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.date-filter {
    width: 49%;
    border: 1px solid #51464B;
    border-radius: 5px;
    display: flex;
    align-items: center;
    position: relative
}

.date-filter label {
    width: 24.1%;
    text-align: center;
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    color: #51464b;
    text-transform: uppercase
}

.date-filter input,
.date-filter select {
    border: none;
    outline: none;
    width: 75.9%;
    padding: 0 5px 0 0;
    border-left: 1px solid #696064;
    border-radius: 0;
    height: 40px;
    background: none
}

.date-filter .MuiFormControl-root {
    padding: 0;
    margin: 0;
    width: 75.9%
}

.date-btn-wrapper {
    width: 7.5%;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.date-filter .MuiPickersInputBase-root {
    padding: 0 2px 0 5px;
    border-left: 1px solid #696064;
    border-radius: 0;
    height: 40px
}

.date-filter .MuiPickersInputBase-root fieldset {
    border: none !important
}

.overflow-x {
    overflow-x: auto
}

.date-filter-box.three .date-filter {
    width: 32%
}

.date-filter-box.four .date-filter {
    width: 23.3%
}

.date-filter-box.five {
    width: 100%;
    flex-wrap: wrap
}

.date-filter-box.five .date-filter {
    width: 32.3%
}

.date-filter-box.five .date-filter:nth-child(1),
.date-filter-box.five .date-filter:nth-child(2),
.date-filter-box.five .date-filter:nth-child(3) {
    margin-bottom: clamp(20px, 1.3vw, 25px)
}

.date-filter-box.five .date-filter.date-btn-wrapper {
    border: none;
    justify-content: flex-end;
    gap: 16px
}

.date-filter-box.four .date-filter label {
    width: 37.9%
}

.date-filter-box.four .date-filter input,
.date-filter-box.four .date-filter select {
    width: 62.1%;
    padding-left: 17px
}

.date-filter-box.four .date-filter .MuiFormControl-root {
    width: 62.1%
}

.date-filter-box.four .date-filter .MuiPickersInputBase-root {
    padding-left: 17px
}

.date-filter-box.five .date-filter label {
    width: 30%
}

.date-filter-box.five .date-filter input,
.date-filter-box.five .date-filter select {
    width: 70%;
    padding-left: 17px
}

.date-filter-box.five .date-filter .MuiFormControl-root {
    width: 70%
}

.date-filter-box.five .date-filter .MuiPickersInputBase-root {
    padding-left: 17px
}

.date-filter-box.six {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start
}

.date-filter-box.six .date-filter {
    width: 23.3%;
    margin-right: 2.26%
}

.date-filter-box.six .date-filter:nth-child(4n) {
    margin-right: 0
}

.date-filter-box.six .date-filter:nth-child(1),
.date-filter-box.six .date-filter:nth-child(2),
.date-filter-box.six .date-filter:nth-child(3),
.date-filter-box.six .date-filter:nth-child(4) {
    margin-bottom: clamp(20px, 1.3vw, 25px)
}

.date-filter-box.six .date-filter.date-btn-wrapper {
    border: none;
    justify-content: flex-end;
    gap: 16px
}

.date-filter-box.six .date-filter.no-border {
    border: none
}

.date-filter-box.six .date-filter label {
    width: 35%
}

.date-filter-box.six .date-filter input,
.date-filter-box.six .date-filter select,
.date-filter-box.six .date-filter .MuiFormControl-root {
    width: 65%
}

.date-filter-box.one .date-filter {
    width: 100%
}

.date-filter-box.one .date-filter label {
    width: 17.2%
}

.date-filter-box.one .date-filter input {
    width: 82.8%;
    padding-left: clamp(15px, 1.5625vw, 30px)
}

.date-filter p.error-massage {
    font-size: clamp(10px, .625vw, 12px);
    color: red;
    position: absolute;
    left: 0;
    top: calc(100% + 5px);
    margin: 0
}

.date-filter p.error-massage span {
    margin-right: 2px
}

.mycards-wrapper {
    padding: clamp(25px, 2.6vw, 50px);
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap
}

.copy-code {
    border: 1px solid #696064;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.copy-code .copy-icon {
    cursor: pointer
}

.fund-transfer-form.popupform .cancel-btn {
    margin-left: auto
}

.popup-table {
    background: #fff;
    border-collapse: collapse;
    width: 100%
}

.popup-table td {
    border: 1px solid #c8c8c8;
    padding: 9px 16px 16px
}

.popup-table td:first-child {
    background: #f7f7f7;
    font-weight: 500;
    font-size: 12px;
    color: #17080f;
    width: 38%
}

.popup-table td:last-child {
    font-weight: 600;
    font-size: 12px;
    color: #b20153;
    text-transform: uppercase
}

.connected-bank-account {
    background: #f7f7f7;
    border: 1px solid #D6D6D6;
    padding: 20px;
    margin: 30px 0 0;
    border-radius: 5px;
    width: 100%
}

.connected-bank-account ul,
.connected-bank-account li {
    list-style: none;
    padding: 0;
    margin: 0
}

.connected-bank-account ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between
}

.connected-bank-account ul li {
    font-weight: 700;
    font-size: 14px;
    color: #17080f;
    padding: 10px;
    display: flex
}

.connected-bank-account ul li label {
    color: #b20153;
    margin-right: 5px
}

.connected-bank-buttons {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 20px
}

.connected-bank-buttons button {
    background: none;
    border: none;
    outline: none;
    border: 1px solid #B20153;
    border-radius: 5px;
    padding: 10px 25px;
    font-weight: 500;
    font-size: 12px;
    color: #b20153;
    text-transform: uppercase
}

.connected-bank-buttons button:last-child {
    background: #c1004a;
    color: #fff
}

.top-add-vendor .css-hlm6fe-control,
.css-tp6s97-control,
.css-tp6s97-control:hover {
    border: none !important
}

@media screen and (max-width: 1500px) {
    .primary-form {
        margin-right: 50px
    }

    .login-form-container p.error-message,
    .rightPanel p.error-message {
        transform: translateY(-50%)
    }
}

@media screen and (max-width: 1300px) {
    .help-container {
        flex-direction: column
    }

    .help-left {
        width: 100%;
        margin-bottom: 30px
    }

    .help-right {
        width: 100%
    }

    .payouts-card-container {
        width: 100%;
        margin-bottom: 20px
    }

    .payout-dashboard-statistics {
        width: 100%
    }

    .wallet-statistics-chart canvas {
        min-height: 300px
    }

    .collection-cards-chart-wrapper {
        flex-direction: column
    }

    .collection-cards-container {
        width: 100%;
        margin-bottom: 20px
    }

    .payout-statics {
        width: 100%
    }

    .main-content {
        margin-left: 275px
    }

    .dashboard-main {
        flex-direction: column
    }

    .dashboard-left {
        width: 100%;
        margin-bottom: 20px
    }

    .dashboard-right {
        width: 100%
    }

    .recent-payments-card {
        margin-top: 20px
    }

    .beneficiaries-search-label {
        width: 30%
    }

    .beneficiaries-search-input {
        width: 70%
    }

    .mycards-wrapper {
        justify-content: space-between
    }

    .mycards-wrapper .card-box {
        width: 49%;
        margin-right: 0
    }
}

@media screen and (max-width: 1200px) {
    .transaction-history-section-dashboard {
        overflow-x: auto
    }

    .transaction-history-section-dashboard .transaction-history-header-collection,
    .transaction-history-section-dashboard .recent-payments-table-wrapper {
        min-width: 1000px
    }

    .img-section1,
    .img-section2,
    .img-section4,
    .img-section3 p,
    .user-start-kyc-tree {
        display: none
    }

    html,
    body {
        height: auto;
        overflow: visible
    }

    .login-img img {
        width: 75.1%;
        height: auto
    }

    .login-header {
        padding: 40px 40px 0;
        align-items: center
    }

    .login-title h2,
    .login-title h2 span {
        font-size: 30px;
        line-height: 40px
    }

    .login-title p {
        width: auto;
        font-size: 14px;
        line-height: 20px;
        max-width: 200px
    }

    .logo img {
        width: 150px
    }

    .img-section3 {
        left: 30%;
        top: 33.33vw;
        width: 200px;
        height: auto;
        bottom: inherit
    }

    .copyright {
        display: none;
        position: relative;
        width: 100%;
        padding: 10px;
        text-align: center;
        margin-top: auto
    }

    .copyright p {
        font-size: 12px;
        letter-spacing: 0;
        font-weight: 500
    }

    .primary-form {
        width: 40%;
        margin-top: 100px
    }

    .beneficiaries-header-row {
        padding: 10px
    }

    .beneficiaries-actions button {
        padding: 5px 10px
    }

    .beneficiaries-search-label {
        width: 35%
    }

    .beneficiaries-search-input {
        width: 65%
    }
}

@media screen and (max-width: 980px) {
    .login-title p {
        display: none
    }

    .beneficiaries-search-row {
        padding: 15px;
        justify-content: space-between
    }

    .beneficiaries-search-input-group {
        width: 85%
    }

    .search-btn {
        margin-left: 10px
    }
}

@media screen and (max-width: 768px) {
    .profile .profile-pic svg {
        background: #fff;
        border: 1px solid #fff
    }

    .first-top-card {
        background: none
    }

    .top-navbar {
        background: #b20153
    }

    .navigate-top-buttons {
        display: none
    }

    .first-top-card {
        position: relative
    }

    .toggle-navigate {
        position: absolute;
        right: 0;
        margin: 0
    }

    .main-content {
        margin: 100px 5% 0
    }

    .main-content.expand {
        margin-left: 5%
    }
}

@media screen and (max-width: 600px) {
    .payouts-flex-cards-dashboard:nth-child(2) {
        margin-top: 0
    }

    .payouts-flex-cards-dashboard:nth-child(2) .total-transaction-card-payouts-bottom {
        width: 100%;
        margin-bottom: 20px;
        position: relative
    }

    .total-transaction-card-payouts-bottom .card-container-logo {
        margin: 0;
        position: absolute;
        right: 20px;
        top: 20px
    }

    .total-transaction-card-payouts-bottom .card-container-logo img {
        width: 30px
    }

    .payouts-card-container {
        margin-bottom: 0
    }

    .payouts-flex-cards-dashboard {
        flex-direction: column
    }

    .main-content .downloadReport-header-container .common-header {
        flex-direction: row
    }

    .status-grid {
        width: 100%
    }

    .status-grid .status-box {
        padding: 10px
    }

    .collection-cards-container {
        gap: 0
    }

    .collection-flex-cards-dashboard {
        flex-direction: column
    }

    .total-transaction-card-collection,
    .payouts-flex-cards-dashboard .total-transaction-card-payouts {
        width: 100%;
        margin-bottom: 20px
    }

    .login-header {
        padding: 25px 20px 0;
        align-items: flex-end
    }

    .login-title h2,
    .login-title h2 span {
        font-size: 18px;
        line-height: 20px
    }

    .img-section3 {
        width: 100px
    }

    .primary-form {
        width: 100%;
        padding: 0 20px;
        height: auto;
        margin-top: 70vw;
        margin-bottom: 30px
    }

    .login-form-container {
        margin-bottom: 20px
    }

    .login-header .logo {
        margin-bottom: -30px;
        position: relative
    }

    .img-section3 {
        width: 175px;
        left: 25%
    }

    .form-container h1 {
        font-size: 20px;
        margin-bottom: 20px
    }

    .tpin-modal-body p {
        font-size: 12px;
        margin-bottom: 15px
    }

    .tpin-modal-body p br {
        display: none
    }

    .login-form-container p.error-message,
    .rightPanel p.error-message {
        transform: translateY(-20%)
    }

    .collection-payout-card-flex {
        flex-wrap: wrap
    }

    .collection-wallet-card {
        width: 100%;
        margin-bottom: 20px
    }

    .payout-wallet-card {
        width: 100%
    }

    .wallet-statistics-chart {
        padding: 0 20px;
        min-height: auto
    }

    .quick-links {
        flex-wrap: wrap;
        padding-bottom: 0
    }

    .quick-links-pagination {
        width: 47%;
        margin-bottom: 20px
    }

    .main-content .common-header {
        padding: 10px
    }

    .main-content .common-header .common-title {
        font-size: 12px;
        margin: 0;
        width: 100%;
        text-align: left
    }

    .collection-main-header-transactions .common-tab.mobile-common-tab {
        flex-wrap: wrap;
        border-radius: 0;
        width: 100%;
        margin-top: 20px
    }

    .collection-main-header-transactions .common-tab button.active,
    .common-tab button:hover {
        border-radius: 0
    }

    .collection-main-header-transactions .common-tab button {
        width: 49%;
        text-align: center
    }

    .main-content .collection-main-header-transactions .common-header.collection-header {
        flex-direction: column
    }

    .disputes-transaction-cards {
        flex-wrap: wrap;
        gap: 10px
    }

    .collection-main-header-transactions .collection-flex-cards .total-transaction-card-dispute,
    .disputes-transaction-cards .total-transaction-card-transaction-amount-card-dispute,
    .disputes-transaction-cards .total-transaction-card-refund-transaction-card-dispute {
        width: 100%
    }

    .refund-transaction-cards {
        flex-wrap: wrap;
        gap: 10px
    }

    .refund-transaction-cards .failed-amount,
    .refund-transaction-cards .initiated-amount {
        width: 100%
    }

    .recent-payments-table th,
    .recent-payments-table td {
        font-size: 12px
    }

    .recent-payments-table th:first-child,
    .recent-payments-table td:first-child {
        padding-left: 10px
    }

    .recent-payments-card {
        overflow: auto
    }

    .recent-payments-card .common-header,
    .recent-payments-card .recent-payments-table-wrapper {
        min-width: 768px
    }

    .footer {
        flex-direction: column;
        text-align: center
    }

    .footer-left {
        margin-bottom: 15px
    }

    .wallet-statistics-header {
        padding-left: 15px;
        padding-right: 15px
    }

    .wallet-statistics-tab {
        padding: 6px 10px;
        font-size: 10px
    }

    .main-content .page-title {
        font-size: 14px;
        margin-bottom: 20px
    }

    .connected-banking-card {
        padding: 10px
    }

    .connected-banking-card button.open-current-account-btn {
        font-size: 10px;
        padding-bottom: 8px
    }

    .connected-list-card-verify-status-container {
        width: 100%;
        height: auto;
        padding: 10px
    }

    .beneficiaries-actions {
        gap: 7px
    }

    .beneficiaries-actions button {
        padding: 5px;
        font-size: 10px
    }

    .beneficiaries-search-label {
        width: 50%
    }

    .beneficiaries-search-input {
        width: 50%;
        padding-left: 5px
    }

    .mycards-wrapper .card-box {
        width: 100%;
        margin-bottom: 20px
    }
}

.carousel-dots {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px
}

.carousel-dots .dot {
    width: 8px;
    height: 8px;
    background-color: #ccc;
    border-radius: 50%;
    transition: background-color .3s ease
}

.carousel-dots .dot.active {
    background-color: #f04c9a
}

.pagination-page-limit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd
}

.page-limit {
    display: flex;
    align-items: center;
    gap: 10px
}

.page-limit label {
    font-size: 14px;
    font-weight: 500
}

.page-limit select {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .3s ease
}

.page-limit select:focus {
    border-color: #007bff
}

.page-limit select:hover {
    border-color: #bbb
}

.pagination {
    display: flex;
    align-items: center;
    gap: 15px
}

.pagination button {
    padding: 8px 16px;
    background-color: #de0068;
    color: #fff;
    border: 1px solid #DE0068;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .3s ease
}

.pagination button:disabled {
    background-color: #ccc;
    border-color: #ccc;
    cursor: not-allowed
}

.pagination button:hover:not(:disabled) {
    background-color: #99064a
}

.pagination span {
    font-size: 16px;
    color: #333
}

@media (max-width: 768px) {
    .pagination-page-limit {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px
    }

    .pagination {
        justify-content: flex-start;
        gap: 10px
    }

    .page-limit select {
        font-size: 12px;
        padding: 6px 10px
    }

    .pagination button {
        font-size: 12px;
        padding: 6px 12px
    }
}

.beautiful-pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    flex-wrap: wrap;
    gap: 15px
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0
}

.pagination-summary {
    font-size: 14px;
    color: #17080f;
    font-weight: 500
}

.page-limit-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #17080f
}

.page-limit-selector select {
    padding: 6px 12px;
    border: 1px solid #C2D1F2;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: all .2s ease;
    color: #17080f
}

.page-limit-selector select:hover {
    border-color: #c2185b
}

.page-limit-selector select:focus {
    outline: none;
    border-color: #c2185b;
    box-shadow: 0 0 0 2px #c2185b40
}

.beautiful-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.pagination-btn {
    padding: 8px 12px;
    border: 1px solid #C2D1F2;
    background: #fff;
    color: #17080f;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px;
    font-weight: 500;
    min-width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center
}

.pagination-btn:hover:not(:disabled) {
    background: #c2185b;
    color: #fff;
    border-color: #c2185b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px #c2185b4d
}

.pagination-btn:disabled {
    background: #f8f9fa;
    color: #6c757d;
    border-color: #dee2e6;
    cursor: not-allowed;
    opacity: .6
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 4px
}

.pagination-number {
    padding: 8px 12px;
    border: 1px solid #C2D1F2;
    background: #fff;
    color: #17080f;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px;
    font-weight: 500;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center
}

.pagination-number:hover {
    background: #eff4ff;
    border-color: #c2185b;
    transform: translateY(-1px)
}

.pagination-number.active {
    background: #c2185b;
    color: #fff;
    border-color: #c2185b;
    box-shadow: 0 2px 4px #c2185b4d
}

.pagination-ellipsis {
    padding: 8px 4px;
    color: #6c757d;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 36px
}

.pagination-first,
.pagination-last {
    font-weight: 700
}

.pagination-prev,
.pagination-next {
    font-size: 16px
}

@media (max-width: 768px) {
    .beautiful-pagination-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px
    }

    .pagination-info {
        width: 100%;
        justify-content: space-between
    }

    .beautiful-pagination {
        gap: 4px;
        width: 100%;
        justify-content: center
    }

    .pagination-btn,
    .pagination-number {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 32px;
        height: 32px
    }

    .pagination-summary,
    .page-limit-selector {
        font-size: 12px
    }
}

@media (max-width: 480px) {
    .beautiful-pagination {
        justify-content: center
    }

    .pagination-numbers {
        gap: 2px
    }

    .pagination-btn,
    .pagination-number {
        min-width: 28px;
        height: 28px;
        padding: 4px 6px;
        font-size: 11px
    }
}

.pagination-show-more,
.pagination-collapse {
    background: #eff4ff !important;
    color: #c2185b !important;
    border-color: #c2185b !important;
    font-weight: 600
}

.pagination-show-more:hover,
.pagination-collapse:hover {
    background: #c2185b !important;
    color: #fff !important
}

.pagination-collapse {
    min-width: 30px !important;
    font-size: 16px !important
}

.kyc-liveliness-declaration-container {
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 13px;
    padding: 0 20px 20px;
    border-radius: 8px;
    max-width: 100%
}

@media (max-width: 900px) {
    .kyc-liveliness-declaration-container {
        font-size: 12px;
        padding: 10px
    }
}

.merchant-name-text {
    font-weight: 700;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #b20153;
    margin: clamp(10px, 1.4vw, 27px) 0 0 0;
    text-align: right
}

.merchant-text {
    font-weight: 600;
    font-size: clamp(12px, .833vw, 16px);
    color: #51464b;
    margin-left: auto;
    text-align: right
}

.qr-section {
    flex-direction: column;
    position: absolute;
    z-index: 4;
    right: 7.29vw;
    top: 13.04vw;
    flex-wrap: wrap;
    width: 30.625vw;
    min-height: 31.25vw;
    display: flex;
    align-items: flex-start;
    justify-content: center
}

.card-payment-form {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fa
}

.card-details-row {
    display: flex;
    gap: 15px
}

.card-details-row .input-field {
    flex: 1
}

.card-payment-form .input-field input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px
}

.card-payment-form .input-field input:focus {
    border-color: #b20153;
    outline: none
}

.transaction-row {
    cursor: pointer
}

.transaction-row:hover {
    background-color: #2062a5
}

.bills-body-container {
    padding: clamp(20px, 1.97vw, 38px) clamp(20px, 2.08vw, 40px) clamp(20px, 1.35vw, 26px) clamp(20px, 2.08vw, 40px);
    display: flex;
    justify-content: space-between
}

.bills-left-body {
    width: 37.3%;
    background: #ffeff6;
    border-radius: 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.drag-wrapper h3 {
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #51464b;
    text-transform: uppercase;
    max-width: 245px;
    text-align: center;
    margin: 0 0 clamp(20px, 1.66vw, 32px) 0
}

.browse-card {
    text-align: center
}

.file-label {
    display: inline-flex;
    background: #fff;
    border: 1px solid #B20153;
    border-radius: 5px;
    font-weight: 500;
    font-size: 12px;
    color: #b20153;
    text-transform: uppercase;
    align-items: center;
    gap: 6px;
    padding: 4px 15px 5px 7px
}

.bills-left-body .bills-left-footer {
    margin: 0 0 clamp(20px, 2.23vw, 43px) 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: #b20153
}

.bills-right-container-body {
    width: 60.07%;
    background: #fff 0% 0% no-repeat padding-box;
    border: 1px solid #C8C8C8;
    border-radius: 15px
}

.bills-right-body {
    padding: 40px
}

.bills-right-header {
    font-weight: 700;
    font-size: 16px;
    color: #b20153;
    text-transform: uppercase;
    margin-bottom: 45px
}

.top-add-vendor {
    background: #fff 0% 0% no-repeat padding-box;
    border: 1px solid #51464B;
    border-radius: 5px;
    opacity: 1;
    padding: 10px;
    margin-bottom: 19px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    display: flex
}

.bills-form-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 30px
}

.bills-form-container label {
    font-weight: 700;
    font-size: 12px;
    color: #17080f;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px
}

.bills-form-container input {
    border: none;
    outline: none;
    border-bottom: 1px solid #6d6d6d;
    width: 100%;
    font-size: 14px;
    color: #8d8588;
    font-family: Lexend, sans-serif;
    padding-bottom: 8px;
    margin-bottom: 19px
}

.input-label-data {
    width: 50%
}

.top-add-vendor-common-container {
    width: 50%;
    padding-top: 20PX
}

.bills-file-upload-text {
    text-align: left;
    font: 12px/24px Lexend;
    letter-spacing: 0px;
    color: #51464b
}

.bill-right-container-bottom-text {
    background: #f5f5f5 0% 0% no-repeat padding-box;
    border-radius: 0 0 15px 15px;
    display: flex;
    padding: 20px 40px;
    justify-content: space-between;
    align-items: center
}

.bill-right-container-bottom-text {
    text-align: left;
    font: 700 12px/15px Lexend;
    letter-spacing: 0px;
    color: #17080f;
    text-transform: uppercase;
    opacity: 1
}

.bills-bottom-left-text-total {
    text-align: left;
    font: 700 12px/15px Lexend;
    letter-spacing: 0px;
    color: #b20153;
    text-transform: uppercase
}

.bills-bottom-button {
    width: 100%;
    display: flex;
    gap: 50px;
    align-content: center;
    justify-content: flex-end;
    padding: 0 40px
}

.icon-box {
    width: 50px;
    height: 29px;
    border: 1px solid #51464B;
    border-radius: 5px;
    align-content: center;
    text-align: center
}

.bill-create-btn {
    border: none;
    width: 100px;
    height: 29px;
    background: #b20153;
    border-radius: 50px !important;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0px;
    color: #fff;
    text-transform: uppercase;
    font-family: Lexend, sans-serif
}

.bills-common-tab {
    display: flex;
    gap: 10px
}

.image-preview {
    width: 520px;
    height: 569px;
    border: 1px solid #cac5c8;
    border-radius: 15px
}

@media screen and (max-width: 1300px) {
    .bills-body-container {
        flex-direction: column
    }

    .bills-left-body {
        width: 100%;
        padding: 25px;
        margin-bottom: 25px
    }

    .bills-left-body .bills-left-footer {
        position: relative;
        margin: 20px 0 0
    }

    .bills-right-container-body {
        width: 100%
    }
}

@media screen and (max-width: 600px) {
    .bills-form-container {
        flex-direction: column
    }

    .bills-form-container .input-label-data {
        width: 100%
    }

    .top-add-vendor-common-container {
        width: 100%;
        margin-top: 0
    }

    .tpin-verify-btn span {
        display: block;
        margin-top: -10px
    }
}

:root {
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: hsl(6, 78%, 57%);
    --toastify-color-transparent: rgba(255, 255, 255, .7);
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-container-width: fit-content;
    --toastify-toast-width: 320px;
    --toastify-toast-offset: 16px;
    --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
    --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
    --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
    --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
    --toastify-toast-background: #fff;
    --toastify-toast-padding: 14px;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-toast-bd-radius: 6px;
    --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error);
    --toastify-color-progress-bgo: .2
}

.Toastify__toast-container {
    z-index: var(--toastify-z-index);
    -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
    position: fixed;
    width: var(--toastify-container-width);
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column
}

.Toastify__toast-container--top-left {
    top: var(--toastify-toast-top);
    left: var(--toastify-toast-left)
}

.Toastify__toast-container--top-center {
    top: var(--toastify-toast-top);
    left: 50%;
    transform: translate(-50%);
    align-items: center
}

.Toastify__toast-container--top-right {
    top: var(--toastify-toast-top);
    right: var(--toastify-toast-right);
    align-items: end
}

.Toastify__toast-container--bottom-left {
    bottom: var(--toastify-toast-bottom);
    left: var(--toastify-toast-left)
}

.Toastify__toast-container--bottom-center {
    bottom: var(--toastify-toast-bottom);
    left: 50%;
    transform: translate(-50%);
    align-items: center
}

.Toastify__toast-container--bottom-right {
    bottom: var(--toastify-toast-bottom);
    right: var(--toastify-toast-right);
    align-items: end
}

.Toastify__toast {
    --y: 0;
    position: relative;
    touch-action: none;
    width: var(--toastify-toast-width);
    min-height: var(--toastify-toast-min-height);
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding: var(--toastify-toast-padding);
    border-radius: var(--toastify-toast-bd-radius);
    box-shadow: var(--toastify-toast-shadow);
    max-height: var(--toastify-toast-max-height);
    font-family: var(--toastify-font-family);
    z-index: 0;
    display: flex;
    flex: 1 auto;
    align-items: center;
    word-break: break-word
}

@media only screen and (max-width: 480px) {
    .Toastify__toast-container {
        width: 100vw;
        left: env(safe-area-inset-left);
        margin: 0
    }

    .Toastify__toast-container--top-left,
    .Toastify__toast-container--top-center,
    .Toastify__toast-container--top-right {
        top: env(safe-area-inset-top);
        transform: translate(0)
    }

    .Toastify__toast-container--bottom-left,
    .Toastify__toast-container--bottom-center,
    .Toastify__toast-container--bottom-right {
        bottom: env(safe-area-inset-bottom);
        transform: translate(0)
    }

    .Toastify__toast-container--rtl {
        right: env(safe-area-inset-right);
        left: initial
    }

    .Toastify__toast {
        --toastify-toast-width: 100%;
        margin-bottom: 0;
        border-radius: 0
    }
}

.Toastify__toast-container[data-stacked=true] {
    width: var(--toastify-toast-width)
}

.Toastify__toast--stacked {
    position: absolute;
    width: 100%;
    transform: translate3d(0, var(--y), 0) scale(var(--s));
    transition: transform .3s
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
    transition: opacity .1s
}

.Toastify__toast--stacked[data-collapsed=false] {
    overflow: visible
}

.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>* {
    opacity: 0
}

.Toastify__toast--stacked:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--g) * 1px);
    bottom: 100%
}

.Toastify__toast--stacked[data-pos=top] {
    top: 0
}

.Toastify__toast--stacked[data-pos=bot] {
    bottom: 0
}

.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
    transform-origin: top
}

.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
    transform-origin: bottom
}

.Toastify__toast--stacked:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    transform: scaleY(3);
    z-index: -1
}

.Toastify__toast--rtl {
    direction: rtl
}

.Toastify__toast--close-on-click {
    cursor: pointer
}

.Toastify__toast-icon {
    margin-inline-end: 10px;
    width: 22px;
    flex-shrink: 0;
    display: flex
}

.Toastify--animate {
    animation-fill-mode: both;
    animation-duration: .5s
}

.Toastify--animate-icon {
    animation-fill-mode: both;
    animation-duration: .3s
}

.Toastify__toast-theme--dark {
    background: var(--toastify-color-dark);
    color: var(--toastify-text-color-dark)
}

.Toastify__toast-theme--light,
.Toastify__toast-theme--colored.Toastify__toast--default {
    background: var(--toastify-color-light);
    color: var(--toastify-text-color-light)
}

.Toastify__toast-theme--colored.Toastify__toast--info {
    color: var(--toastify-text-color-info);
    background: var(--toastify-color-info)
}

.Toastify__toast-theme--colored.Toastify__toast--success {
    color: var(--toastify-text-color-success);
    background: var(--toastify-color-success)
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
    color: var(--toastify-text-color-warning);
    background: var(--toastify-color-warning)
}

.Toastify__toast-theme--colored.Toastify__toast--error {
    color: var(--toastify-text-color-error);
    background: var(--toastify-color-error)
}

.Toastify__progress-bar-theme--light {
    background: var(--toastify-color-progress-light)
}

.Toastify__progress-bar-theme--dark {
    background: var(--toastify-color-progress-dark)
}

.Toastify__progress-bar--info {
    background: var(--toastify-color-progress-info)
}

.Toastify__progress-bar--success {
    background: var(--toastify-color-progress-success)
}

.Toastify__progress-bar--warning {
    background: var(--toastify-color-progress-warning)
}

.Toastify__progress-bar--error {
    background: var(--toastify-color-progress-error)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
    background: var(--toastify-color-transparent)
}

.Toastify__close-button {
    color: #fff;
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    outline: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: .7;
    transition: .3s ease;
    z-index: 1
}

.Toastify__toast--rtl .Toastify__close-button {
    left: 6px;
    right: unset
}

.Toastify__close-button--light {
    color: #000;
    opacity: .3
}

.Toastify__close-button>svg {
    fill: currentColor;
    height: 16px;
    width: 14px
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
    opacity: 1
}

@keyframes Toastify__trackProgress {
    0% {
        transform: scaleX(1)
    }

    to {
        transform: scaleX(0)
    }
}

.Toastify__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .7;
    transform-origin: left
}

.Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards
}

.Toastify__progress-bar--controlled {
    transition: transform .2s
}

.Toastify__progress-bar--rtl {
    right: 0;
    left: initial;
    transform-origin: right;
    border-bottom-left-radius: initial
}

.Toastify__progress-bar--wrp {
    position: absolute;
    overflow: hidden;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    border-bottom-left-radius: var(--toastify-toast-bd-radius);
    border-bottom-right-radius: var(--toastify-toast-bd-radius)
}

.Toastify__progress-bar--wrp[data-hidden=true] {
    opacity: 0
}

.Toastify__progress-bar--bg {
    opacity: var(--toastify-color-progress-bgo);
    width: 100%;
    height: 100%
}

.Toastify__spinner {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid;
    border-radius: 100%;
    border-color: var(--toastify-spinner-color-empty-area);
    border-right-color: var(--toastify-spinner-color);
    animation: Toastify__spin .65s linear infinite
}

@keyframes Toastify__bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        transform: translate3d(10px, 0, 0)
    }

    90% {
        transform: translate3d(-5px, 0, 0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, var(--y), 0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, var(--y), 0)
    }
}

@keyframes Toastify__bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }

    75% {
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        transform: translate3d(5px, 0, 0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, var(--y), 0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, var(--y), 0)
    }
}

@keyframes Toastify__bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    75% {
        transform: translate3d(0, 10px, 0)
    }

    90% {
        transform: translate3d(0, -5px, 0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__bounceOutUp {
    20% {
        transform: translate3d(0, calc(var(--y) - 10px), 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, calc(var(--y) + 20px), 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes Toastify__bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }

    75% {
        transform: translate3d(0, -10px, 0)
    }

    90% {
        transform: translate3d(0, 5px, 0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutDown {
    20% {
        transform: translate3d(0, calc(var(--y) - 10px), 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, calc(var(--y) + 20px), 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
    animation-name: Toastify__bounceInLeft
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
    animation-name: Toastify__bounceInRight
}

.Toastify__bounce-enter--top-center {
    animation-name: Toastify__bounceInDown
}

.Toastify__bounce-enter--bottom-center {
    animation-name: Toastify__bounceInUp
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
    animation-name: Toastify__bounceOutLeft
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
    animation-name: Toastify__bounceOutRight
}

.Toastify__bounce-exit--top-center {
    animation-name: Toastify__bounceOutUp
}

.Toastify__bounce-exit--bottom-center {
    animation-name: Toastify__bounceOutDown
}

@keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: translate3d(0, var(--y), 0) scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.Toastify__zoom-enter {
    animation-name: Toastify__zoomIn
}

.Toastify__zoom-exit {
    animation-name: Toastify__zoomOut
}

@keyframes Toastify__flipIn {
    0% {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes Toastify__flipOut {
    0% {
        transform: translate3d(0, var(--y), 0) perspective(400px)
    }

    30% {
        transform: translate3d(0, var(--y), 0) perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        transform: translate3d(0, var(--y), 0) perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.Toastify__flip-enter {
    animation-name: Toastify__flipIn
}

.Toastify__flip-exit {
    animation-name: Toastify__flipOut
}

@keyframes Toastify__slideInRight {
    0% {
        transform: translate3d(110%, 0, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, var(--y), 0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        transform: translate3d(-110%, 0, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, var(--y), 0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        transform: translate3d(0, 110%, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, var(--y), 0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        transform: translate3d(0, -110%, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, var(--y), 0)
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        transform: translate3d(0, var(--y), 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(110%, var(--y), 0)
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        transform: translate3d(0, var(--y), 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-110%, var(--y), 0)
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        transform: translate3d(0, var(--y), 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 500px, 0)
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        transform: translate3d(0, var(--y), 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -500px, 0)
    }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
    animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
    animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
    animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
    animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
    animation-name: Toastify__slideOutLeft;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
    animation-name: Toastify__slideOutRight;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

.Toastify__slide-exit--top-center {
    animation-name: Toastify__slideOutUp;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

.Toastify__slide-exit--bottom-center {
    animation-name: Toastify__slideOutDown;
    animation-timing-function: ease-in;
    animation-duration: .3s
}

@keyframes Toastify__spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.payout-bulk-upload-wrapper {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 32px;
    margin-top: 54px;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    background-color: #fafafa;
    transition: background-color .3s ease;
    color: #51464b;
    font-size: 15px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer
}

.payout-bulk-upload-label {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2
}

.payout-bulk-upload-icon {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 3
}

.payout-bulk-hidden-input {
    display: none
}

.payout-bulk-upload-filename {
    margin-top: 20px;
    font-size: 16px;
    color: #333;
    word-break: break-word;
    z-index: 3
}

.payout-bulk-submit-btn {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.payout-bulk-submit-btn:disabled {
    cursor: not-allowed;
    opacity: .6
}

.payout-bulk-spinner {
    animation: payout-bulk-spin 1s linear infinite
}

@keyframes payout-bulk-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.bulk-sample-file-container {
    display: flex;
    justify-content: flex-end;
    cursor: pointer
}

.bulk-sample-file-text {
    background-color: #fafafa;
    padding: 1em 2em;
    border: 2px dashed #ccc;
    text-align: center;
    border-radius: 10%
}

.bulk-sample-file-text a {
    color: #000;
    text-decoration: none
}

.userKyc-container {
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row
}

.userKyc-left-container {
    width: 38.3%;
    position: relative;
    z-index: 9
}

.userkyc-background-image .kyc-side-logo {
    width: 95.925vh;
    height: 100vh
}

.services-offered-text-header {
    position: absolute;
    left: 9.53vh;
    top: 8.98vh;
    width: 49.4%;
    z-index: 10
}

.services-offered-text-header h3 {
    margin: 0;
    font-weight: 400;
    font-size: clamp(20px, 1.5625vw, 30px);
    color: #fff;
    margin: 0 0 clamp(20px, 1.4vw, 27px) 0
}

.services-offered-text-header h3 span {
    font-weight: 700;
    color: #f96eaf;
    margin-right: 9px
}

.services-offered-text-header p {
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: clamp(18px, 1.3vw, 25px);
    color: #fff;
    margin: 0 0 clamp(20px, 1.822vw, 35px) 0
}

.services-offered-text-header a {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.88px;
    color: #fc0;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
    display: flex;
    align-items: center
}

.services-offered-text-header a:hover {
    cursor: pointer
}

.user-start-kyc-tree {
    position: absolute;
    right: 5.37vh;
    bottom: 0
}

.user-start-kyc-tree img {
    width: clamp(75px, 7.03vw, 135px)
}

.start-kyc-lottie {
    position: absolute;
    left: 17.4vh;
    bottom: 1.38vh;
    width: clamp(200px, 38.7vh, 418px)
}

.start-kyc-lottie.kycheckpoint {
    left: -3.61vh;
    bottom: -3.24vh;
    width: clamp(1000px, 138.79vh, 1499px)
}

.userKyc-right-container {
    width: 61.7%;
    position: relative;
    z-index: 99
}

.kyc-logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8.98vh 9.6% 0 0
}

.kyc-logo img {
    width: clamp(200px, 11.87vw, 228px)
}

.userkyc-linear-gradient {
    position: absolute;
    right: -25.46vh;
    top: 0;
    width: 35.55vh;
    height: 23.61vh
}

.userKyc-right-bottom-container {
    height: 80.33vh;
    padding: 0;
    display: flex;
    align-items: flex-start;
    padding: 10.74vh 6.8% 0 0
}

.services-offered-text {
    width: 323px;
    height: 42px;
    text-align: left;
    letter-spacing: 0px;
    display: flex;
    gap: 8px
}

.user-options-container {
    width: 77.8%;
    padding-top: 5.9vh
}

.startKYC {
    width: 22.2%
}

.startKYC img {
    width: 100%
}

.user-options-top-container {
    display: flex;
    margin-bottom: 5vh
}

.user-options-top-container .user-options {
    width: 33.3%
}

.user-options-bottom-container {
    display: flex;
    justify-content: flex-end
}

.user-option-icon {
    margin: 0 0 21px
}

.user-option-icon img {
    width: clamp(28px, 2.5vw, 48px);
    display: block
}

.user-options-bottom-container .user-options {
    width: 33.3%
}

.user-options h3 {
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    color: #b20153;
    text-transform: uppercase;
    margin: 0 0 clamp(20px, 1.35vw, 26px) 0
}

.user-options p {
    font-weight: 400;
    font-size: clamp(12px, .729vw, 14px);
    line-height: clamp(22px, 1.25vw, 24px);
    color: #51464b;
    max-width: 185px;
    margin: 0 0 clamp(20px, 1.25vw, 24px) 0
}

.user-services-text-more {
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 2.4px;
    color: #17080f;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    cursor: pointer
}

.userkyc-footer {
    width: 94%;
    height: 6.2vh;
    border-top: 1px solid #acacac;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 100
}

.userKyc-right-top-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4.53vw 5.93vw 0 0
}

.userKyc-right-top-container .any-questions {
    display: flex;
    align-items: center;
    background: #fff8eb;
    border: 1px solid #DEDAD2;
    border-radius: 50px;
    padding: 9px 47px 14px 25px;
    margin-right: clamp(40px, 2.91vw, 56px);
    cursor: pointer
}

.userKyc-right-top-container .any-questions img.mail-icon {
    width: clamp(20px, 1.45vw, 28px);
    margin-right: clamp(10px, 1.04vw, 20px)
}

.any-questions .any-questions-content h3 {
    font-weight: 600;
    font-size: 16px;
    color: #51464b;
    margin: 0 0 2px
}

.any-questions .any-questions-content p {
    margin: 0;
    font-weight: 600;
    font-size: 12px;
    color: #51464b
}

.userKyc-right-top-container .userkyc-logo img {
    display: block;
    width: clamp(200px, 11.87vw, 228px)
}

.userKyc-footer-text {
    position: fixed;
    right: 145px;
    height: 25px;
    color: var(--unnamed-color-b20153);
    text-align: left;
    font: 12px Lexend, sans-serif;
    font-weight: 700;
    letter-spacing: 2.88px;
    color: #b20153;
    text-transform: uppercase;
    opacity: 1;
    padding-top: 15px;
    cursor: pointer
}

.kyc-detailed-services-background-container {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 100;
    right: 0;
    background: var(--unnamed-color-17080f) 0% 0% no-repeat padding-box;
    background-color: #17080f45
}

.kyc-detailed-services-container {
    background-color: #fff;
    height: 100vh;
    right: 0;
    position: fixed;
    width: 450px;
    background: #fff 0% 0% no-repeat padding-box;
    opacity: 1;
    z-index: 12
}

.kyc-detailed-services-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 20px 50px;
    border-bottom: 1px solid #cccccc
}

.kyc-detailed-services-header-image {
    height: 25px
}

.kyc-detailed-services-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 15px;
    margin-right: 10px;
    position: fixed;
    bottom: 0;
    height: 55px;
    border-top: 1px solid #ACACAC
}

.kyc-detailed-services-footer-items {
    height: 16px;
    text-align: left;
    letter-spacing: 0px;
    color: #000;
    text-transform: uppercase;
    opacity: 1;
    margin-right: 20px;
    font-size: 12px;
    font-weight: medium;
    font-family: Lexend;
    cursor: pointer
}

.kyc-detailed-services-footer-items.active {
    font-weight: 700;
    position: relative;
    color: #b20153
}

.kyc-detailed-services-footer-items.active:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    border-bottom: 2px solid #B20153
}

.detailed-screen-close {
    width: 20px;
    height: 20px;
    border: 2px solid var(--unnamed-color-2b3151);
    border: 2px solid #2B3151;
    border-radius: 5px;
    align-items: center;
    display: flex;
    justify-content: center;
    opacity: 1;
    cursor: pointer
}

.kyc-detailed-services-body {
    flex: 1;
    height: 100%;
    max-height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #a3a2a2 #f5f5f5
}

.service-common-base-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 60px 60px 30px;
    gap: 25px
}

.service-header {
    width: 185px;
    height: 26px;
    color: var(--unnamed-color-b20153);
    text-align: left;
    font: 700 16px/24px Lexend;
    font-size: 16px;
    font-family: Lexend;
    font-weight: 700;
    letter-spacing: 0px;
    color: #b20153;
    text-transform: uppercase;
    opacity: 1
}

.service-header-description {
    width: 350px;
    height: auto;
    color: var(--unnamed-color-8f0545);
    text-align: left;
    font-size: 14px;
    font-family: Lexend;
    letter-spacing: 0px;
    color: #8f0545
}

.service-header-common-container {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.service-body-question {
    color: var(--unnamed-color-17080f);
    text-align: left;
    font-size: 14px;
    font-family: Lexend;
    letter-spacing: 0px;
    color: #17080f;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.service-body-question-header {
    width: 291px;
    height: 17px;
    color: var(--unnamed-color-17080f);
    text-align: left;
    font-size: 14px;
    font-family: Lexend;
    font-weight: 700;
    letter-spacing: 0px;
    color: #17080f;
    opacity: 1
}

.service-body-question-description {
    width: 350px;
    height: auto;
    color: var(--unnamed-color-17080f);
    text-align: left;
    letter-spacing: NaNpx;
    color: #17080f;
    opacity: 1
}

.service-body-bulletPoints-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px
}

.service-body-bulletPoints-header {
    width: 291px;
    height: 17px;
    color: var(--unnamed-color-17080f);
    text-align: left;
    font-size: 14px;
    font-family: Lexend;
    font-weight: 700;
    letter-spacing: 0px;
    color: #17080f;
    opacity: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px
}

.service-body-bulletPoint {
    width: 6px;
    height: 6px;
    background: var(--unnamed-color-17080f) 0% 0% no-repeat padding-box;
    background: #858183 0% 0% no-repeat padding-box;
    opacity: 1;
    border-radius: 50%
}

.service-body-bulletPoints-description {
    width: 300px;
    height: 35px;
    color: var(--unnamed-color-17080f);
    text-align: left;
    color: #17080f;
    opacity: 1;
    font-size: 12px;
    font-family: Lexend;
    padding-left: 20px
}

.service-body-bulletPoints-double {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px
}

.start-Kyc-man-logo {
    position: fixed;
    top: 21%;
    left: 5%;
    height: 82%
}

.services-offered-text-description.start-KYC {
    width: 310px;
    height: 93px
}

.Kyc-steps-title {
    font-weight: 400;
    font-size: clamp(20px, 2.08vw, 40px);
    color: #17080f;
    margin: 0 0 clamp(10px, 1.197vw, 23px) 0
}

.Kyc-steps-description {
    margin: 0 0 clamp(20px, 2.5vw, 48px) 0;
    font-weight: 500;
    font-size: clamp(12px, .833vw, 16px);
    line-height: clamp(20px, 1.25vw, 24px);
    color: #17080f
}

.kyc-email-inputWrapper {
    position: relative;
    margin-bottom: clamp(30px, 3.33vw, 64px)
}

.kyc-email-inputWrapper ul,
.kyc-email-inputWrapper ul li {
    margin: 0 0 clamp(15px, 1.3vw, 25px) 0;
    font-size: clamp(12px, .833vw, 16px);
    color: #17080f
}

.kyc-email-input,
.business-kyc-input {
    font-weight: 400;
    font-size: clamp(14px, 1.3vw, 25px) !important;
    color: #8b8387;
    border: none;
    outline: none;
    border-bottom: 2px solid #4b4b4b;
    width: 100%;
    padding: 0 0 clamp(15px, 1.3vw, 25px) 0
}

.css-13iggtf-MuiFormControl-root-MuiPickersTextField-root {
    font-weight: 400;
    font-size: clamp(14px, 1.3vw, 25px);
    color: #8b8387;
    text-transform: capitalize;
    border: none;
    border-bottom: 2px solid #4b4b4b;
    width: 100%;
    padding: 0 0 clamp(15px, 1.3vw, 25px) 0;
    outline: none
}

.css-1cfsxq5-MuiPickersInputBase-root-MuiPickersInput-root:after,
.css-1cfsxq5-MuiPickersInputBase-root-MuiPickersInput-root:before {
    display: none !important
}

.kyc-email-mailIcon {
    position: absolute;
    bottom: clamp(10px, 1.04vw, 20px);
    right: 0
}

.kyc-email-mailIcon img {
    width: clamp(20px, 1.97vw, 38px) !important
}

.verifyBtn {
    background: url(../assets/ProceedButton-DKp8_jij.png) no-repeat left top;
    border: none;
    outline: none;
    width: clamp(200px, 25.09vh, 271px);
    height: clamp(65px, 8.14vh, 88px);
    background-size: contain;
    padding: 0;
    display: flex;
    justify-content: center;
    font-weight: 700;
    font-size: clamp(12px, .729vw, 14px);
    color: #fff;
    padding: clamp(18px, 1.145vw, 22px) 0 0 0;
    cursor: pointer
}

.verifyBtn svg {
    margin: 2px 0 0 5px
}

.kyc-step-stepItem {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    position: relative
}

.circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 15px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff
}

.circle-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    background-color: transparent
}

.line {
    width: 2px;
    height: 30px;
    position: absolute;
    left: 6px;
    top: 20px;
    z-index: 1
}

.kyc-steps-stepLabel {
    font-size: 14px;
    letter-spacing: .5px;
    line-height: 1.4;
    width: 171px;
    height: 49px;
    color: var(--unnamed-color-17080f);
    text-align: left;
    font-family: Lexend, sans-serif;
    letter-spacing: 0px;
    color: #17080f;
    text-transform: uppercase;
    opacity: 1
}

.userKyc-right-bottom-container.kycsteps {
    height: 64.81vh;
    margin: 12.77vh 0 0;
    padding: 0 10.92vh 0 0;
    width: calc(100% + clamp(40px, 4.27vw, 82px));
    position: relative;
    margin-left: clamp(-40px, -4.27vw, -82px)
}

.Kyc-steps-container {
    display: flex;
    align-items: flex-start;
    width: 100%
}

.Kyc-steps-container .leftPanel {
    width: 45.9%
}

.Kyc-steps-container .rightPanel {
    width: 54.1%;
    max-height: 65vh;
    overflow-y: auto
}

.kyc-steps-completed-container {
    width: 100%;
    background: #f5f5f5;
    border-radius: 15px;
    text-align: center;
    padding: 0 0 clamp(50px, 3.75vw, 72px) 0
}

.completed-kyc-lottie {
    width: 255px;
    height: 255px;
    margin: 0 auto
}

.completed-kyc-text-container {
    text-align: center;
    max-width: 296px;
    margin: 0 auto
}

.completed-userKyc-footer-text {
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.88px;
    color: #b20153;
    text-transform: uppercase;
    cursor: pointer
}

#kyc-completed-main-text {
    font-weight: 700;
    font-size: clamp(16px, 1.14vw, 22px);
    color: #34b233;
    text-transform: uppercase;
    margin: 0 0 clamp(20px, 1.4vw, 27px) 0
}

#kyc-completed-description-text {
    text-align: center;
    font: 12px Lexend, sans-serif;
    font-weight: 700;
    letter-spacing: 0px;
    color: #17080f;
    margin: 0 0 clamp(30px, 2.44vw, 47px) 0
}

.vertical-stepper-steps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative
}

.vertical-stepper-step-item {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 0 clamp(20px, 2.08vw, 40px) 0
}

.vertical-stepper-step-dot {
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center
}

.vertical-stepper-step-dot.completed {
    background-color: #4bae4f
}

.vertical-stepper-step-label {
    font-weight: 500;
    font-size: clamp(14px, .9375vw, 18px);
    line-height: clamp(20px, 1.25vw, 24px);
    color: #a6a7b0;
    text-transform: uppercase;
    margin-left: clamp(20px, 1.45vw, 28px)
}

.vertical-stepper-step-dot.completed+.vertical-stepper-step-label {
    color: #17080f
}

.vertical-stepper-step-label span {
    display: block
}

.vertical-stepper-step-line {
    position: absolute;
    left: 9px;
    top: 20px;
    width: 2px;
    height: 100px;
    background-color: #ccc;
    transition: background-color .3s;
    z-index: 1
}

.vertical-stepper-step-line.completed {
    background-color: #4bae4f
}

.kyc-email-Valid-input {
    padding: 0 40px 0 10px;
    font-size: 22px;
    border: none;
    border-bottom: 1px solid black;
    outline: none;
    width: 525px;
    height: 59px;
    font-family: Lexend;
    text-align: left;
    color: #17080f;
    opacity: 1
}

.kyc-email-OTP-inputWrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 0 clamp(30px, 3.125vw, 60px) 0
}

.kyc-email-OTP-inputWrapper .kyc-email-OTP-input {
    width: 8.6%;
    font-weight: 500;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #000;
    border: none;
    border-bottom: 1px solid #939393;
    outline: none;
    text-align: center;
    padding: 0 0 clamp(7px, .729vw, 14px) 0
}

.email-send-button-proceed {
    background-image: url(../assets/ProceedButton-DKp8_jij.png);
    background-size: cover;
    width: 200px;
    height: 64px;
    padding-bottom: 15px;
    border: none;
    font: 700 12px/15px Lexend;
    letter-spacing: 0px;
    color: #fff;
    text-transform: uppercase;
    opacity: 1;
    border-radius: 30px 30px 100px 100px;
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 11px;
    align-items: center
}

.email-submit-button {
    align-items: center;
    display: flex;
    justify-content: center
}

.kyc-aadhar-otp-verification-description {
    font-weight: 600;
    font-size: 14px;
    width: 485px;
    height: 100px;
    color: var(--unnamed-color-17080f);
    text-align: left;
    letter-spacing: 0px;
    color: #17080f;
    opacity: 1
}

.business-kyc-field-wrapper {
    position: relative;
    margin-top: 0;
    margin-bottom: clamp(20px, 2.08vw, 40px);
    display: flex;
    flex-direction: column
}

.business-kyc-field-wrapper label {
    margin-bottom: clamp(15px, 1.302vw, 25px);
    display: block
}

.business-kyc-label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    margin-bottom: 5px
}

.business-kyc-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: #ccc;
    pointer-events: none
}

.kyc-liveness-container {
    max-width: 100%;
    padding: 20px 20px 15px;
    border: 2px solid #6200ee;
    border-radius: 12px;
    background-color: #f9f9fb;
    text-align: center;
    width: 100%
}

.kyc-liveness-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px
}

.kyc-liveness-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: #000
}

.kyc-liveness-controls .kyc-liveness-btn {
    background-color: #6200ee;
    border: none;
    padding: 10px 20px;
    margin: 0 6px;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background-color .3s ease
}

.kyc-liveness-controls .kyc-liveness-btn:hover {
    background-color: #3700b3
}

@media screen and (max-width: 1200px) {

    .user-options-top-container .user-options,
    .user-options-bottom-container .user-options {
        width: 31.3%
    }

    .user-options-top-container,
    .user-options-bottom-container {
        justify-content: space-between;
        margin-bottom: 30px
    }

    .start-kyc-lottie {
        width: 200px;
        left: 15% !important;
        top: 16.41vw;
        height: auto
    }

    .userKyc-right-bottom-container {
        height: auto;
        justify-content: space-between
    }

    .user-options-container {
        width: 75%;
        padding-top: 0
    }

    .services-offered-text-header {
        left: 40px;
        top: 40px;
        width: 75%
    }

    .userkyc-footer {
        display: none
    }

    .userkyc-background-image .kyc-side-logo {
        width: 170%;
        height: auto
    }

    .start-kyc-lottie.kycheckpoint {
        width: clamp(600px, 66vw, 800px);
        left: 0 !important;
        bottom: -10vw
    }

    .userKyc-right-top-container .any-questions {
        display: none
    }

    .Kyc-steps-container {
        flex-direction: column
    }

    .Kyc-steps-container .leftPanel {
        width: 100%;
        margin: 0 0 20px
    }

    .Kyc-steps-container .rightPanel {
        width: 100%
    }

    .vertical-stepper-steps {
        flex-direction: row;
        flex-wrap: wrap
    }

    .vertical-stepper-step-item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 25%
    }

    .vertical-stepper-step-line {
        width: 100%;
        height: 2px;
        top: 10px;
        left: 0
    }

    .userKyc-right-bottom-container.kycsteps {
        width: 100%;
        margin-left: 0;
        margin-top: clamp(100px, 12.5vw, 150px)
    }

    .vertical-stepper-step-label {
        margin-left: 0;
        margin-top: 15px
    }
}

@media screen and (max-width: 900px) {
    .startKYC {
        display: none
    }

    .user-options-container {
        width: 100%
    }
}

@media screen and (max-width: 600px) {
    .userKyc-container {
        flex-direction: column;
        position: relative
    }

    .userKyc-left-container {
        width: 100%;
        overflow: hidden
    }

    .userkyc-background-image .kyc-side-logo {
        width: 90%
    }

    .services-offered-text-header {
        width: 50%
    }

    .userKyc-right-container {
        width: 100%;
        padding: 0 4%;
        position: initial
    }

    .kyc-logo {
        position: absolute;
        right: 5%;
        top: 33.3vw;
        padding: 0
    }

    .userKyc-right-bottom-container {
        padding: 0
    }

    .user-options-top-container,
    .user-options-bottom-container {
        flex-wrap: wrap
    }

    .user-options-top-container .user-options,
    .user-options-bottom-container .user-options {
        width: 100%;
        margin-bottom: 25px;
        background: #f5f5f5;
        border-radius: 15px;
        padding: 25px;
        text-align: center
    }

    .user-option-icon {
        margin: 0 0 20px;
        text-align: center
    }

    .user-option-icon img {
        width: 40px;
        margin: 0 auto
    }

    .user-options h3 {
        font-size: 20px;
        margin-bottom: 20px
    }

    .user-options p {
        max-width: inherit;
        font-size: 14px;
        margin-bottom: 10px
    }

    .user-services-text-more {
        font-size: 14px;
        text-align: center;
        display: block
    }

    .services-offered-text-header h3,
    .services-offered-text-header p {
        display: none
    }

    .start-kyc-lottie {
        left: 0 !important;
        width: 175px
    }

    .kyc-detailed-services-background-container {
        width: 100%;
        z-index: 9999999
    }

    .kyc-detailed-services-container {
        width: 100%;
        background: #fff
    }

    .service-common-base-container {
        height: 85vh;
        overflow-y: auto;
        padding: 20px
    }

    .kyc-detailed-services-footer {
        background: #fff
    }

    .kyc-detailed-services-footer-items.active:after {
        display: none
    }

    .userKyc-right-top-container .userkyc-logo {
        position: absolute;
        right: 40px;
        top: 170px
    }

    .userKyc-right-bottom-container.kycsteps {
        margin: 0 !important;
        padding: 0 5% !important;
        height: auto
    }

    .vertical-stepper-step-item {
        width: 33% !important;
        margin-bottom: 5px !important
    }

    .vertical-stepper-step-label {
        font-size: 12px;
        margin-top: 10px
    }

    .start-kyc-lottie.kycheckpoint {
        width: 400px;
        bottom: -100px
    }
}

.not-found-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    background-color: #f5f5f5
}

.not-found-container h1 {
    font-size: 120px;
    margin: 0;
    color: #2c3e50
}

.not-found-container h2 {
    font-size: 32px;
    margin: 0;
    color: #34495e
}

.not-found-container p {
    font-size: 18px;
    color: #7f8c8d;
    margin: 20px 0
}

.home-link {
    display: inline-block;
    padding: 12px 24px;
    background-color: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color .3s ease
}

.home-link:hover {
    background-color: #2980b9
}

.onboard-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 32px 32px 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px #a9004b14;
    font-family: Segoe UI, Arial, sans-serif;
    overflow-y: auto;
    max-height: 90vh
}

.onboard-header {
    color: #a9004b;
    font-weight: 700;
    margin-bottom: .5rem;
    letter-spacing: 1px
}

.onboard-subheader {
    color: #222;
    font-size: 1.1rem;
    margin-bottom: 2rem
}

.stepper {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    justify-content: center
}

.step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eee;
    color: #a9004b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 8px;
    border: 2px solid #eee;
    transition: background .2s, border .2s
}

.step.active {
    background: #a9004b;
    color: #fff;
    border: 2px solid #a9004b
}

.step.completed {
    background: #fff;
    color: #a9004b;
    border: 2px solid #a9004b
}

.form-section {
    margin-bottom: 2rem
}

.form-label {
    font-weight: 500;
    margin-bottom: .25rem;
    display: block;
    color: #a9004b
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: border .2s
}

.form-input:focus,
.form-textarea:focus {
    border: 1.5px solid #a9004b;
    outline: none
}

.radio-group,
.checkbox-group {
    margin-bottom: 1rem
}

.radio-item,
.checkbox-item {
    margin-bottom: .5rem;
    display: flex;
    align-items: center
}

.radio-item input,
.checkbox-item input {
    margin-right: 8px
}

.form-btn {
    background: #a9004b;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 28px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    transition: background .2s
}

.form-btn:disabled {
    background: #e0e0e0;
    color: #aaa;
    cursor: not-allowed
}

.form-btn:hover:not(:disabled) {
    background: #87003a
}

.onboard-container::-webkit-scrollbar {
    width: 10px;
    background: #f5e6ee;
    border-radius: 8px
}

.onboard-container::-webkit-scrollbar-thumb {
    background: #a9004b;
    border-radius: 8px
}

.onboard-container::-webkit-scrollbar-thumb:hover {
    background: #87003a
}

.onboard-container {
    scrollbar-width: thin;
    scrollbar-color: #a9004b #f5e6ee
}