html {
    margin:0;
    padding:0;
	width: 100%; 
	height: 100%;
	display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

p,span,div,h1,h2,h3,h4,label {
  user-select: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;   
  margin: 0;
}


/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  display: none;
}

/* Firefox */
* {
  scrollbar-width: none;
}


div.tableDataParent::-webkit-scrollbar {
    width: 8px;
}

div.tableDataParent::-webkit-scrollbar-track {
    background: transparent;
}

div.tableDataParent::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6a5af9, #8f84ff);
    border-radius: 10px;
}

div.tableDataParent::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #5847e6, #766bff);
}

/* Firefox */
div.tableDataParent {
    scrollbar-width: thin;
    scrollbar-color: #6a5af9 transparent;
}


body {
    margin:0;
    padding:0;
	width: 100%;
	height: 100%;
    overflow-x: hidden;
	overflow-y: scroll;
	display: flex;
    flex-direction: column;
    align-items: center;
} 

p,span,div,h1,h2,h3,h4,label {
 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;   
}


.screen {
    height: 100%;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
}

.profile-inf-dis {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
}

.main-screen {
    height: 100%;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
}

.welcome-scroll-box {
    height: calc(100% - 150px);
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.welcome-scroll {
    height: auto;
    display: none;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 40px);
    gap: 30px;
}


.welcome-scroll.active {
    display: flex;
    animation: fadeIn 0.8s ease-in-out;
}

.welcome-scroll img {
    width: 100%;
    height: auto;
    max-width: 320px;
}

.welcome-scroll h4 {
    font-size: 21px;
    text-align: center;
    color: black;
}

.welcome-scroll p {
    color: #909090;
    font-size: 15px;
    text-align: center;
}

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

.opp-badges-box {
    display: flex
;
    align-items: center;
    gap: 10px;
}

span.opp-det-verify-only {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 15px;
    border-radius: 50px;
    background: #cdffcd;
    color: #009500;
    font-size: 15px;
    font-weight: 500;
}

span.opp-det-cate-bade {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: #e0ccff;
    border-radius: 50px;
    color: #390092;
    font-weight: 500;
    font-size: 15px;
}

.opp-dts-org-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

span.opp-dt-org-inner {
    display: flex;
    align-items: center;
    gap: 5px;
}

.opp-details-amount-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.opp-details-amount-box p {
    color: grey;
    font-size: 13px;
    font-weight: 500;
}

.opp-details-desc-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.opp-details-desc-box h3 {
    font-size: 19px;
    color: black;
    font-weight: 800;
}

button.loadMoreBt {
    margin-top: 20px;
    height: 35px;
    width: 160px;
    border-radius: 10px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #5b2be0;
    color: #fff;
    font-size: 14px;
}

.opp-details-criterial-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.opp-dt-criterial-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

span.single-criterial-span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #5e5e5e;
    font-size: 15px;
    font-weight: 500;
}

.payWithTranContBox {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    gap: 30px;
}

.pay-bank-detail-inner-box {
    width: calc(100% - 30px);
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: solid 1px #e1e1e1;
}

.pay-bank-detail-inner-box:last-child {
 border-bottom: 0;   
}

.pay-bank-detail-inn-div {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
}

.pay-bank-detail-inn-div label {
    color: #6c6c6c;
    font-size: 15px;
    gap: 10px;
}

span.pay-bank-name-logo-box {
    display: flex;
    align-items: center;
    gap: 7px
}

span.pay-bank-name-logo-box h4 {
    font-size: 18px;
    color: black;
}

.pay-bank-details-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    box-shadow: -1px 1px 15px 0px #8080802e;
    background: #fff;
}

.pay-top-box img {
    width: 60px;
    height: 60px;
}

.pay-top-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
}

.pay-time-count-parent-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.pay-counter {
    padding: 15px 10px;
    width: calc(100% - 20px);
    border-radius: 10px;
    background: #f2eeff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

span.pay-counter-count-info-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

span.pay-counter-icon {
    display: flex;
    padding: 10px;
    border-radius: 50px;
    color: #5B2BED;
    background: #cfcfff;
    font-size: 18px;
}

.pay-headsup-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 15px;
    width: calc(100% - 30px);
    background: #f2eeff;
    border-radius: 10px;
}

.pay-headsup-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 15px;
    width: calc(100% - 30px);
    background: #f2eeff;
    border-radius: 10px;
}

span.pay-headsup-icon {
    display: flex;
    padding: 10px;
    border-radius: 50px;
    color: #5B2BED;
    background: #cfcfff;
    font-size: 18px;
}

span.pay-heads-up {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

span.pay-heads-up p {
    font-size: 14px;
    color: #4e4e4e;
    text-align: left;
}

.pay-complete-button-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.pay-complete-button-box button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 45px;
    border-radius: 10px;
    border: 0;
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    background: #5B2BED;
}

span.paySecuritySpan {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #9e9e9e;
}

span.pay-heads-up h4 {
    font-size: 17px;
    color: black;
    text-align: left;
}

span.pay-top-inner-span h3 {
    font-size: 18px;
    color: black;
}

span.pay-top-inner-span p {
    color: #818181;
    font-size: 15px;
}

span.pay-top-inner-span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

span.pay-bank-name-logo-box img {
    width: 30px;
    height: 30px;
}

.pay-bank-detail-inn-div h3 {
    font-size: 17px;
    color: black;
}

.pay-bank-details-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pay-bank-detail-inner-box button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 80px;
    border-radius: 10px;
    font-size: 14px;
    border: 0;
    font-weight: 500;
    color: #5B2BED;
    background: #f2eeff;
    height: 35px;
}

.opp-details-btn-box .pri {
    height: 45px;
    width: 30%;
    border: solid 2px #5b2be0;
    border-radius: 10px;
    color: #5b2be0;
    background: 0;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opp-details-btn-box .sec {
    height: 45px;
    width: 70%;
    border: solid 2px #5b2be0;
    border-radius: 10px;
    color: #fff;
    background: #5b2be0;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opp-dts-boxx p {
    color: #535353;
    font-size: 15px;
    font-weight: 500;
}

.opp-dts-boxx h4 {
    font-size: 19px;
    color: black;
}

.opp-dts-boxx {
display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    padding: 0 10px;
    border-right: solid 1px #dcdcdc;
}

.opp-dts-boxx:last-child {
border-right: 0;    
}

.opp-details-data-box {
    width: calc(100% - 20px);
    display: flex
;
    justify-content: space-around;
    box-shadow: 1px 1px 8px 2px #80808063;
    padding: 20px 10px;
    border-radius: 10px;
    background: #fff;
}

.opp-details-btn-box {
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.opp-details-desc-box p {
    color: #5e5e5e;
    font-size: 15px;
    font-weight: 500;
}

.opp-details-amount-box h3 {
    font-size: 25px;
    font-weight: 800;
    color: #00a400;
}

span.opp-dt-org-inner img {
    width: 25px;
    height: 25px;
    border-radius: 50px;
}

span.opp-dt-org-inner p {
    font-size: 15px;
    font-weight: 500;
    color: #6f6f6f;
}

.opp-dts-org-box h3 {
    color: black;
    font-size: 25px;
}

span.opp-dt-dat-title-span {
    color: #8e8e8e;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

span.scrollNav {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    border: solid #9a9a9a 1px;
}

span.scrollNav.active {
        background: #4d00e0;
    border-color: #4d00e0;
}

span.resendSpan {
    display: flex
;
    align-items: center;
    gap: 10px;
}


.welcome-nav-div {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    position: fixed;
    bottom: 0;
    z-index: 10;
}

button.welcome-nav-btn {
    min-height: 45px;
    width: 100%;
    max-width: 400px;
    font-size: 17px;
    border-radius: 50px;
    border: 1px #0103d7 solid;
}

button.welcome-nav-btn.pri {
    background: #4d00e0;
    color: #fff;
}

button.welcome-nav-btn.sec {
    color: #4d00e0;
    background: #fff;
}

.screenTop {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

span.topNav {
display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 50px;
    background: #f3edfe;
    font-weight: 500;
    font-size: 14px;
    gap: 5px;
    color: #4d00e0;
}

i {
display: flex;
}


.form100 {
    height: calc(100% - 20px);
    width: calc(100% - 40px);
    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 30px;
}

.formHeader100 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.formInputGroup {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.formHeader100 h3 {
    color: black;
    font-size: 20px;
}

.formHeader100 p {
    color: #737373;
    font-size: 15px;
}

.inputGroup {
    display: flex
;
    flex-direction: column;
    width: 100%;
    gap: 7px;
}

input.input100 {
    height: 100%;
    width: 100%;
    border: 0;
    font-size: 16px;
    color: black;
}

input.input100:focus {
border: 0;
outline: 0;
}

span.forgotPassSpan h4 {
    color: #4d00e0;
    font-size: 15px;
}


label.label100 {
    font-size: 15px;
    font-weight: 500;
    color: #575757;
}

span.inputSpan {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 30px;
    padding: 10px;
    border-radius: 5px;
    border: solid 1px #b6b6b6;
}

span.forgotPassSpan {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

button.formBtn {
    margin-top: 30px;
    margin-bottom: 10px;
    height: 45px;
    width: 100%;
    border-radius: 50px;
    border: 0;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    background: #4d00e0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.opp-details-top-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.signupProgress {
    width: 100px;
    height: 7px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    background: #e7e7e7;
    justify-content: flex-start;
}

.signupProgress span {
    background: #4d00e0;
    height: 100%;
    display: flex;
    border-radius: 50px;
}

span.otpInputGroupSpan {
    display: flex;
    align-items: center;
    gap: 10px;
}

input.inputOtp {
    height: 35px;
    width: 30px;
    border-radius: 5px;
    border: solid 1px #c3c3c3;
    text-align: center;
    color: black;
    font-weight: 400;
    font-size: 19px;
}

span.countryDropDownBox {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    margin-right: 10px;
}

span.countryDropDownBox img {
    width: 20px;
    height: 20px;
    border-radius: 50px;
}

.modernSelectListsBox {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
}

.completedScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
}

.completedScreen h4 {
    font-size: 25px;
    color: black;
    text-align: center;
}

.completedScreen p {
    max-width: 80%;
    text-align: center;
    color: #747474;
    font-size: 17px;
}

.completedScreen button {
    height: 45px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 40px;
    border: 0;
    border-radius: 50px;
    color: #fff;
    background: #5000dd;
}

.completedScreen img {
    width: calc(100% - 40px);
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
}

.modal {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 100000;
    background: #00000059;
    backdrop-filter: blur(1px);
}

.modalScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    z-index: 100000;
    background: #fff;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}

verfy-blockk {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.editProfileForm {
    margin-top: 80px;
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

span.dbParentBoxx {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

span.dbParentBoxx img {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    object-fit: cover;
}

.verificationPageTitleBox h2 {
    font-size: 18px;
    color: black;
}

.verificationPageTitleBox p {
    color: #a3a3a3;
    font-size: 15px;
}

.payVerificationBtnDiv.editPro {
    margin-top: 30px;
}

span.dbParentBoxx i {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 29px;
    color: red;
    border: solid 3px #fff;
    border-radius: 50px;
    background: #fff;
}

.verify-benefit-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

span.verify-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: black;
}

.payVerificationBtnDiv {
 width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    justify-content: center;
    gap: 15px;
}

.payVerificationBtnDiv button.pri {
    background: #fff;
    border: solid 2px #7d4dff;
    color: #7d4dff;
}

label.paymentMethod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    border-bottom: solid 1px #dbdbdb;
}

label.paymentMethod:last-child {
border-bottom: 0;    
}

label.paymentMethod input {
width: 19px;
    height: 19px;
    accent-color: #7d4dff;
}

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

span.payment-method-icon {
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 7px;
    color: black;
    background: #ededed;
}

.payVerificationBtnDiv button {
    height: 49px;
    min-height: 49px;
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #7d4dff;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.opport-box {
    width: calc(100% - 20px);
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
}

.applaction-inner-box {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.opportunity-data-box-inner span {
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

.opport-boxx {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.opportunity-data-box-inner span {
    color: #6a6a6a;
    font-size: 16px;
    font-weight: 500;
}

.opportunity-data-box-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    border-right: solid 1px #cacaca;
}

.opportunity-data-box-inner:last-child {
border-right: 0;
}

.opportuityDataBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    border-radius: 10px;
    padding: 25px 0;
    box-shadow: 1px 1px 10px 1px #8080807d;
    background: #fff;
}

.opportunity-data-box-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

span.oppor-org-img-span {
    display: flex;
    gap: 7px;
    align-items: center;
}

h4.opp-sec-title {
    font-size: 22px;
    color: black;
}

p.opp-description {
    font-size: 16px;
    color: #494949;
}

span.oppor-org-img-span p {
    font-size: 16px;
    font-weight: 600;
    color: #6f6f6f;
}

span.oppor-org-img-span img {
    width: 30px;
    height: 30px;
    min-height: 30px;
    min-width: 30px;
    border-radius: 50px;
    background: #dbdbdb;
}

span.opportunity-badge-main {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 13px;
    background: #dbceff;
    border-radius: 50px;
    color: #7d4dff;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
}

h2.opportunityMainAmount {
    font-size: 26px;
    color: #027502;
}

p.opportunityAmountLabel {
    font-size: 15px;
    color: #262626;
    font-weight: 600;
}

.opportunities-boxx {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.filter-opp-btn {
height: 35px;
    width: auto;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #646464;    
}

button.filter-opp-btn.active {
    background: #7d4dff;
    color: #fff;
}

div.opportBoard {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    gap: 7px;
}

h2.opportunity-title {
    font-size: 23px;
    color: black;
    text-align: left;
}

.payment-method-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.payment-method {
    padding: 10px 15px;
    width: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    border: solid 1px #a9a9a9;
    border-radius: 10px;
    box-shadow: 1px 1px 8px 2px #80808036;
    background: #fff;
}

.form550 {
    width: calc(100% - 30px);
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.form-top550 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.input-group550 {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 15px;
}

span.input-span550 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: solid 2px grey;
    border-radius: 10px;
    height: 40px;
}

.referralBoard {
    margin-top: 80px;
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.referralBtnGrp {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

span.copyRefSpan {
    width: calc(100% - 30px);
    max-width: 400px;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #e7e7e7;
    border-radius: 50px;
    height: 40px;
}

.copyRefSpan input:focus {
outline: none;    
}

span.copyRefSpan input {
    background: 0;
    border: 0;
    outline: 0;
    font-size: 23px;
    font-weight: 600;
    width: 150px;
    color: #7d4dff;
}

div.bank-board {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}

.empty-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.empty-box img {
    width: 90px;
    margin-bottom: 10px;
}

.empty-box p {
    max-width: 300px;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #8e8e8e;
}

.empty-box h4 {
    font-size: 17px;
    color: black;
}

.my-bank-boxx {
    width: calc(100% - 70px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 1px 12px 2px #8080804f;
    padding: 30px 20px;
    border-radius: 10px;
}

span.input-span650 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: solid 1px #5d5d5d;
    border-radius: 10px;
    height: 30px;
}

span.input-span650 input {
    width: 100%;
    height: 100%;
    border: 0;
    font-size: 17px;
    color: #262626;
    font-weight: 500;
    letter-spacing: 1px;
}

i.removeBankcon {
    color: red;
    font-size: 19px;
}

.my-bank-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

span.my-bank-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

span.my-bank-info h4 {
    font-size: 18px;
    color: black;
    text-align: left;
}

span.my-bank-info p {
    color: #666666;
    font-size: 15px;
}

.my-bank-inner img {
    width: 50px;
    height: auto;
    max-height: 50px;
}

.empty-box button {
    margin-top: 25px;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: #2e2e2e;
    color: #fff;
    font-size: 14px;
}

span.copyRefSpan button {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 15px;
    border-radius: 50px;
    border: 0;
    font-size: 15px;
    font-weight: 500;
    background: #7d4dff;
    color: #fff;
}

button.shareRefBtn {
    height: 55px;
    min-height: 49px;
    width: 100%;
    max-width: 400px;
    border-radius: 50px;
    border: 0;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    background: #7d4dff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.referralInnerBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.referralInnerBox img {
    width: 100%;
    height: auto;
    background: #e6e6e6;
    border-radius: 5px;
    margin-bottom: 10px;
    max-width: 400px;
}

.verificationTopBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 100%;
}

.dobInputBlock {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

span.dobInputSpan {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: solid 1px #5d5d5d;
    border-radius: 10px;
    height: 30px;
    width: 100px;
    justify-content: center;
    position: relative;
}

.verificationPageTitleBox h4 {
    font-size: 19px;
    color: black;
}

.verificationPageTitleBox p {
    color: #636363;
}

span.dobSelectSpan {
    position: absolute;
    top: 60px;
    background: #fff;
    width: calc(100% - 30px);
    border-radius: 10px;
    padding: 15px;
    max-height: 190px;
    overflow-y: scroll;
    box-shadow: 1px 1px 10px 1px #80808040;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

span.dobSelectSpan p {
    font-size: 16px;
    font-weight: 500;
    color: black;
    padding: 5px;
    width: calc(100% - 10px);
}

.bankLoader {
    font-family: sans-serif;
    color: black;
    font-size: 16px;
}

.userBankLoader {
    width: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.idd9jr-45 {
    display: flex;
    gap: 10px;
    align-items: center;
}

.loading-effect {
background: rgba(255, 255, 255, 0.6);
animation: fadePulse 1.5s ease-in-out infinite;
}

@keyframes fadePulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

span.hdjf-34fd-v-g {
    width: 25px;
    height: 25px;
    display: flex;
    background: #f3f3f3;
    border-radius: 50px;
}

span.gdud-98474 {
    width: 50px;
    height: 50px;
    display: flex;
    border-radius: 50px;
    background: #f3f3f3;
}

span.hd-ejd7-e8 {
    width: 200px;
    background: #f3f3f3;
    display: flex;
    height: 20px;
    border-radius: 15px;
}
 
span.dhdy-03ld-fhsk { 
    width: 130px;
    background: #f3f3f3;
    display: flex;
    height: 15px;
    border-radius: 15px;
}

.osodd-273j {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

span.dobInputSpan input {
    width: 100%;
    height: 100%;
    border: 0;
    font-size: 17px;
    color: #262626;
    font-weight: 500;
    letter-spacing: 1px;
}

span.dobInputSpan input:focus {
outline: 0;    
}

span.inputTip {
    display: flex;
    margin-top: -5px;
    color: grey;
    font-size: 14px;
}

span.inputTip p b {
    color: #7d4dff;
}

.verificationPageTitleBox {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.verificationForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
}

.verificationBoard {
    margin-top: 80px;
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 30px;
}

.referralInnerBox h4 {
    font-size: 23px;
    color: black;
}

.referralInnerBox p {
    text-align: center;
    font-size: 16px;
    color: #7f7f7f;
    font-weight: 400;
}

.suggestedAmountBox {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

button.suggBtn {
    height: 35px;
    width: auto;
    padding: 0 12px;
    border-radius: 5px;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    background: #e6e6e6;
    color: #4a4a4a;
}

span.input-span550 input {
    width: 100%;
    height: 100%;
    border: 0;
    font-size: 21px;
    color: black;
    font-weight: 600;
}

span.input-span550 input:focus {
outline: 0;
border: 0;
}

span.input-span650 input:focus {
outline: 0;
border: 0;
}

.input-span550:focus-within {
    border-color: #7d4dff;
}

.input-span650:focus-within {
    border-color: #7d4dff;
}

span.input-span550 h4 {
    font-size: 21px;
    color: black;
}

b.required {
    color: red;
}

.input-group550 label {
    font-size: 17px;
    font-weight: 600;
}
.verfy-blockk {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 40px);
    gap: 35px;
}

span.payment-info-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

span.payment-info-inner h4 {
    font-size: 16px;
    color: black;
}

span.payment-info-inner p {
color: #818181;
font-size: 14px;
}

.verify-fee-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.verify-card-parent.other {
    margin-top: 75px;
}

.closeBlank {
    width: 100%;
    height: 100%;
}

.modalContBox {
    width: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    gap: 15px;
    height: auto;
}

span.inputSpan.big {
    height: 80px;
}

span.signupAgreement {
    font-size: 14px;
    color: #9f9f9f;
}

b.lnk {
    color: #4d00e0;
}

b.resendOtpBtn {
    font-size: 17px;
    color: #4d00e0;
}

label.selectLabel p {
    font-size: 15px;
}

span.inputError {
    color: red;
    font-size: 14px;
}

.inputSpan:focus-within {
    border-color: #4000e9;
}

.modalContBox img {
    width: 50px;
    height: 50px;
    padding: 10px;
    border-radius: 50px;
}

.modalContBox h4 {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #4d4d4d;
    max-width: 300px;
}

.modalContBox button {
    margin-top: 20px;
    height: 40px;
    width: 200px;
    border-radius: 50px;
    border: 0;
    background: #3900d1;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.modalContBox.error img {
    background: #ffebeb;
}

.modalContBox.success img {
    background: #ddffdd;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btnLoader {
    width: 15px;
    height: 15px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.btnLoader.text {
border-top: 3px solid #4d00e0;    
}

.checkRefBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

span.checkRefSpan {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: -15px;
}

.checkRefBox{
    width: 100%;
    margin-top: 15px;
}

.checkRefSpan{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

/* Hide default checkbox */
#referalCheckBox{
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #6C3BFF;
    border-radius: 6px;
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(108, 59, 255, 0.1);
}

/* Hover effect */
#referalCheckBox:hover{
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(108, 59, 255, 0.2);
}

/* Checked state */
#referalCheckBox:checked{
    background: linear-gradient(135deg, #6C3BFF, #8A63FF);
    border-color: #6C3BFF;
    animation: pop 0.25s ease;
}

/* Check icon */
#referalCheckBox::before{
    content: "✔";
    color: white;
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

/* Show icon when checked */
#referalCheckBox:checked::before{
    transform: translate(-50%, -50%) scale(1);
}

/* Text */
.checkRefSpan p{
    font-size: 15px;
    color: #333;
    font-weight: 500;
    margin: 0;
}

/* Input animation */
#referrerCode{
    margin-top: 12px;
    transition: all 0.3s ease;
}

/* Pop animation */
@keyframes pop{
    0%{
        transform: scale(0.7);
    }
    100%{
        transform: scale(1);
    }
}


label.selectLabel {
    display: flex;
    align-items: center;
    height: auto;
    width: auto;
    padding: 10px;
    gap: 5px;
    background: #ededed;
    border-radius: 10px;
}

label.selectLabel input {
    width: 15px;
    height: 15px;
    border: solid 2px black;
}

/* card */
.selectLabel{
display:flex;
align-items:center;
gap:10px;
border:1px solid #ddd;
padding:10px 16px;
border-radius:8px;
cursor:pointer;
transition:.2s;
position:relative;
}

/* hide default radio */
.selectLabel input{
position:absolute;
opacity:0;
}

/* custom checkbox/radio */
.customBox{
width:15px;
height:15px;
border:2px solid #bbb;
border-radius:4px;
display:inline-block;
position:relative;
transition:.2s;
background: #fff;
}

/* check icon */
.customBox::after{
content:"";
position:absolute;
display:none;
left:5px;
top:1px;
width:4px;
height:9px;
border:solid white;
border-width:0 2px 2px 0;
transform:rotate(45deg);
}

/* checked state */
.selectLabel input:checked + .customBox{
background:#4d00e0;
border-color:#4d00e0;
}

/* show check */
.selectLabel input:checked + .customBox::after{
display:block;
}

/* card highlight */
.selectLabel:has(input:checked){
border: solid 2px #4d00e0;
background: #faf8ff;
}

.selectLabel input:checked ~ p{
color:#4d00e0;
font-weight:600;
}

.inputSpan:has(input.invalid){
    border-color: red;
}


#flashContainer{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
width:90%;
max-width:420px;
z-index: 10000000000;
display:flex;
flex-direction:column;
gap:10px;
}

.flashMsg{
padding:14px 16px;
border-radius:10px;
color:#fff;
font-size:14px;
font-weight:500;
display:flex;
align-items:center;
gap:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
animation:flashSlideIn .35s ease;
}

.flashMsg.success{
background:#22c55e;
}

.flashMsg.error{
background:#ef4444;
} 

.flashMsg.hide{
animation:flashSlideOut .35s ease forwards;
}

@keyframes flashSlideIn{
from{
opacity:0;
transform:translateY(-20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes flashSlideOut{
from{
opacity:1;
transform:translateY(0);
}
to{
opacity:0;
transform:translateY(-20px);
}
}


.modalInnerCotainer {
    width: calc(100% - 40px);
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-radius: 20px 20px 0px 0px;
    max-height: 85%;
}

.dragToClose {
    width: 100%;
    margin-top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.dragToClose span {
    width: 50px;
    height: 6px;
    background: #bcbcbc;
    border-radius: 50px;
}

span.modalContentSearchSpan {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    background: #ececec;
    border-radius: 50px;
    padding: 5px 10px;
    gap: 10px
}

span.modalContentSearchSpan input {
    height: calc(100% - 10px);
    width: 100%;
    border: 0;
    background: 0;
    font-size: 16px;
}

span.countryListSpan p {
    color: black;
    font-size: 16px;
}

.mainDropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.mainCoutryDropdown {
    max-height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-y: scroll;
}

span.countryListSpan {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: solid 1px #f0f0f0;
    padding: 13px 0;
    gap: 10px;
}

span.countryListSpan:last-child {
border-bottom: 0;    
}

span.modalContentSearchSpan i {
    font-size: 16px;
    color: #7b7b7b;
}

span.countryListSpan img {
    height: 23px;
    width: 23px;
}

span.modalContentSearchSpan input:focus {
outline: 0;
}

.main-screen{
    display:none;
    padding-bottom:100px;
}

.main-screen.active-screen{
    display:block;
}

.bottomNav{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#fff;
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding:10px 0;
    border-top:1px solid #eee;
    z-index: 10000;
    box-shadow: 1px 1px 11px 4px #8080802b;
}

.wallet-box-parent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px;
}

.bottom-nav-inner-box{
    text-align:center;
    color:#999;
    cursor:pointer;
    transition:0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-nav-inner-box i{
    font-size:22px;
}

.bottom-nav-inner-box p{
    font-size:12px;
    margin-top:5px;
}

.bottom-nav-inner-box.active{
    color:#5b2be0;
}



/* HEADER */

.topHeader{
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: fixed;
    z-index: 1000;
    background: #fff;
    width: 100%;
}

.userInfo{
    display:flex;
    align-items:center;
    gap:7px;
}

.userInfo img{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
}

.userInfo h3{
    font-size:18px;
}

.userInfo p{
    color:#777;
    font-size:14px;
}

.notificationBtn{
    width:42px;
    height:42px;
    border-radius:12px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 22px;
    margin-right: 10px;
}

/* SEARCH */

.searchBox{
    width: calc(100% - 56px);
    height: 55px;
    background: #f0f0f0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    margin-bottom: 20px;
}

.search-section {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 80px;
}

.searchBox input{
    width:100%;
    border:none;
    outline:none;
    background:none;
    margin-left:10px;
    font-size:15px;
}

/* VERIFIED CARD */

.verifyCard{
    width: calc(100% - 64px);
    background: linear-gradient(135deg, #5b2be0, #7d4dff);
    border-radius: 22px;
    padding: 22px;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.verify-inner-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

span.verify-inner-ico-span {
    width: 80px;
    height: 80px;
    display: flex;
    border-radius: 50px;
    background: #ffffffe0;
    align-items: center;
    justify-content: center;
}

span.verify-inner-ico-span img {
    width: 40px;
    height: 40px;
}

.verify-card-parent {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verifyCard h2{
    font-size:19px;
    margin-bottom:5px;
}

.verifyCard p{
    font-size:14px;
    line-height:1.5;
    margin-bottom:18px;
    opacity:0.9;
}

.verifyBtn{
 width: auto;
    height: 40px;
    padding: 0 15px;
    border: none;
    border-radius: 14px;
    background: #fff;
    color: #5b2be0;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

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

.opportunity-box-category {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

/* SECTION */

.sectionTitle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    width: 100%;
}

.sectionTitle h3{
    font-size:18px;
}

.trans-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tranInfoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.tranInfoBox h4 {
    font-size: 16px;
    color: #2e2e2e;
}

.tranImg img {
    width: 30px;
    min-width: 30px;
    height: 30px;
}

.sectionTitle a{
text-decoration: none;
    color: #5b2be0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* CATEGORIES */

.categories{
display: flex;
    gap: 14px;
    overflow-x: auto;
    margin-bottom: 25px;
    width: 100%;
    justify-content: flex-start;
}

.categoryBox{
    background: #fff;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    padding: 5px;
}

.categoryBox i{
color: #5b2be0;
    font-size: 20px;
    padding: 10px;
    border: solid 1px #d9d9d9;
    border-radius: 10px;
}

.categoryBox.active i {
    background: #ece5ff;
}

.trans-box-parent {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px;
}

button.filter-application-btn {
    height: 35px;
    width: auto;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #646464;
}

button.filter-application-btn.active {
background: #7d4dff;
color: #fff;
}

.applicatonImg img {
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 10px;
}

/* OPPORTUNITY CARD */

.opportunityCard{
width: calc(100% - 36px);
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 10px;
    box-shadow: 1px 1px 12px 2px #80808057;
    gap: 17px;
    display: flex;
    flex-direction: column;
}

.opportunityTop{
display: flex;
    margin-bottom: 10px;
    align-items: flex-start;
    gap: 10px;
}

.oppot-info-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.opportunityTop img {
width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
    border-radius: 10px;
}

.opporCardInfoBox {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px
}

.opportunityBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.opporCardFeatures {
    display: flex;
    align-items: center;
    gap: 5px;
}

.categoryTag {
    padding: 5px 10px;
    background: #e2e1ff;
    border-radius: 50px;
    color: #0200da;
    font-weight: 600;
    font-size: 13px;
}

.categoryTag.grant {
color: #0200da; 
background: #e2e1ff;
}

.categoryTag.loan {
color: green;
background: #d1ffd1;
}

.categoryTag.giveaway {
color: #cc00da;
background: #feedff;
}

.verifiedOnlyTag.verified {
    padding: 5px 10px;
    background: #e4dbff;
    border-radius: 50px;
    color: #7d4dff;
    font-weight: 600;
    font-size: 12px;
    gap: 5px;
    display: flex;
    align-items: center;
    background: #cdffcd;
    color: #009500;
}

.verifiedOnlyTag.verified i {
    font-size: 10px;
}

p.oppCardOrgName {
    color: #9c9c9c;
    font-size: 13px;
    margin-top: 3px;
    font-weight: 500;
    text-align: left;
}

span.oppEndTime {
    font-size: 13px;
    font-weight: 600;
    color: #c50000fa;
    text-align: right;
}

.opportunityTop h4{
    font-size:16px;
    text-align: left;
}

.amount{
    color:#1ca64c;
    font-weight:bold;
    font-size: 15px;
}

.tag{
    display:inline-block;
    background:#efe9ff;
    color:#5b2be0;
    padding:7px 12px;
    border-radius:30px;
    font-size:12px;
    margin-top:10px;
}

/* WALLET CARD */

.walletCard{
width: calc(100% - 70px);
    background: linear-gradient(135deg, #5b2be0, #7d4dff);
    border-radius: 15px;
    padding: 25px;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.walletCard p{
    opacity:0.8;
    margin-bottom: 7px;
}

div.transactions-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-bottom: 70px;
}

h4.screenTitle {
    font-size: 19px;
    color: black;
}

.walletCard h1{
    font-size:23px;
}

.popup {
    height: 100%;
    width: 100%;
    position: fixed;
    background: #000000ab;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(1px);
}

.popupInnerBox {
    width: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    background: #fff;
    border-radius: 10px;
    padding: 30px 10px;
}

.popupConfirmBtnDiv {
    display: flex;
    align-items: center;
    gap: 15px;
}

.popupConfirmBtnDiv button {
    height: 45px;
    width: 140px;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    color: black;
    background: #e5e5e5;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

i.fi.fi-rr-bookmark {
    font-size: 18px;
}

span.seeMore {
    font-size: 16px;
    color: #7d4dff;
    font-weight: 600;
}

.popupConfirmBtnDiv button.pri {
    background: red;
    color: #fff;
}

.popupInnerBox img {
    width: 45px;
    height: 45px;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 50px;
    background: #ffcdcd;
}

.popupInnerBox h4 {
    font-size: 19px;
    color: #313131;
    margin-bottom: 3px;
}

.popupInnerBox p {
    color: #616161;
    font-size: 15px;
    margin-bottom: 40px;
}

.walletBtn{
    width:120px;
    height:43px;
    border:none;
    border-radius:14px;
    background:#fff;
    color:#5b2be0;
    font-weight:bold;
    font-size: 14px;
}

.main-screen.active-screen.hide {
display: none;
}

.tranInfoBox p {
font-size: 14px;
    color: #9f9f9f;
}

span.tranAmount {
    font-size: 16px;
    font-weight: 600;
}

span.tranAmount.debit {
    color: red;
}

span.tranAmount.credit {
    color: #02a202;
}

.transactions-list .listItem:last-child {
border-bottom: 0;    
}

.transactionsFilterBoxes {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 15px;
    width: calc(100% - 20px);
}

button.filter-tran-btn {
    height: 35px;
    width: auto;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #646464;
}

button.filter-tran-btn.active {
    background: #7d4dff;
    color: #fff;
}

div.transactions-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.notifyIconBox img {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
}

.notify-info-box h4 {
    font-size: 17px;
    margin-bottom: 3px;
    color: #4f4f4f;
}

.notify-info-box p {
    color: #494949;
    font-size: 16px;
    margin-bottom: 10px;
}

.notify-info-box small {
    color: #a7a7a7;
    font-size: 15px;
}


.goBackBtn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

div.notificationBoard {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 65px;
}

.notificationBoard .listItem:last-child {
border-bottom: 0;
}

.sectionTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    width: 100%
}

.tranSectionTitle {
display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    width: calc(100% - 20px);
}

/* LIST ITEMS */

.listItem{
width: calc(100% - 30px);
    background: #fff;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: solid 1px #80808047;
}

.listLeft{
    display:flex;
    align-items: flex-start;
    gap:15px;
}

.applicationBox{
width: calc(100% - 45px);
    background: #fff;
    padding: 18px 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 1px 1px 12px 2px #80808057;
    border-radius: 18px;
    margin-bottom: 15px;
    gap: 20px
}

span.applcationStatus.accepted {
    color: #02a702;
    background: #e3ffe3;
}

span.applcationStatus.selected {
    background: #00ae0029;
    color: #00ae00;
}

span.applcationStatus.rejected {
    color: red;
    background: #ffeaea;
}

div.transactions-list.app {
margin-top: 15px;
}

.application-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.application-box h3 {
    margin-bottom: 5px;
    font-size: 16px;
    color: black; 
    text-align: left;
}

.application-box p {
    color: #b1b1b1;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 13px;
    text-align: left;
}

span.applcationStatus {
    height: 33px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    justify-content: center;
    border-radius: 10px;
    background: #ffeac4;
    color: orange;
    font-weight: 600;
    font-size: 14px;
}

.application-box h4 {
    color: #808080;
    font-weight: 600;
    font-size: 15px;
    text-align: left;
}

span.dhdy-03ld-fhskdfg {
    width: 150px;
    background: #f3f3f3;
    display: flex;
    height: 15px;
    border-radius: 15px;
}

span.zxo-pdsfq {
    width: 190px;
    background: #f3f3f3;
    display: flex;
    height: 12px;
    border-radius: 15px;
    margin-top: 10px;
}

span.fdt-yuo-dfg {
    width: 80px;
    height: 30px;
    display: flex;
    border-radius: 10px;
    background: #f3f3f3;
}

.opportunityLoader {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.opportuity-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 18px;
}

.oppor-inner-box-bottom-loader {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.hfjd-fjfo94-3j3u8 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
}

span.jf-0494jff-r4j {
    height: 20px;
    width: 90px;
    display: flex;
    background: #f3f3f3;
    border-radius: 10px;
}

.jfjf-304jh3-4945hf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.singleOpportunityLoader {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.single-opp-title-box-loader {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.single-opp-org-box-loader {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sigle-opp-amout-box-loader {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.single-opp-data-boxx-loader {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.single-opp-data-inner-box-loader {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px
}

span.single-desc-title-loader {
    display: flex;
    background: #f3f3f3;
    height: 30px;
    border-radius: 50px;
    width: 180px;
}

.single-opp-desc-box-loader {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.single-opp-critial-box-loader {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.single-opp-btn-div-box-loader {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 30px;
}

.single-crit-boxx-loader {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.sigle-crit-list-box-loader {
    display: flex;
    align-items: center;
    gap: 8px;
}

span.single-opp-verify-badge-loader {
    display: flex;
    height: 40px;
    width: 150px;
    border-radius: 50px;
    background: #f3f3f3;
    margin-bottom: 15px;
}

span.single-opp-opp-full-title-loader {
    width: 100%;
    height: 20px;
    border-radius: 10px;
    display: flex;
    background: #f3f3f3;
}

span.single-opp-opp-half-title-loader {
    width: 50%;
    height: 20px;
    border-radius: 10px;
    display: flex;
    background: #f3f3f3;
}

span.single-opp-org-logo-loader {
    display: flex;
    height: 30px;
    width: 30px;
    background: #f3f3f3;
    border-radius: 50px;
}

span.single-opp-org-name-loader {
    display: flex;
    height: 15px;
    width: 190px;
    background: #f3f3f3;
    border-radius: 50px;
}

span.single-opp-amount-loader {
    height: 30px;
    display: flex;
    width: 150px;
    background: #f3f3f3;
    border-radius: 15px;
}

span.single-opp-amount-descr {
    height: 17px;
    display: flex;
    width: 250px;
    background: #f3f3f3;
    border-radius: 15px;
}

span.data-box-data-title-loader {
    height: 15px;
    display: flex;
    background: #f3f3f3;
    width: 110px;
    border-radius: 10px;
}

span.data-box-data-desc-loader {
    height: 22px;
    display: flex;
    background: #f3f3f3;
    width: 80px;
    border-radius: 10px;
}

.single-desc-boxx-loader {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

span.single-opp-full-desc-txt-loader {
    display: flex;
    background: #f3f3f3;
    height: 13px;
    border-radius: 50px;
    width: 100%;
}

span.single-opp-half-desc-txt-loader {
    display: flex;
    background: #f3f3f3;
    height: 13px;
    border-radius: 50px;
    width: 40%;
}

span.single-opp-crit-check-loder {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background: #f3f3f3;
    display: flex;
}

span.single-opp-crit-text-loder {
    width: 200px;
    height: 15px;
    border-radius: 50px;
    background: #f3f3f3;
    display: flex;
}

span.single-opp-btn-loader {
    width: 50%;
    height: 50px;
    background: #f3f3f3;
    border-radius: 10px;
}

.sigl-opp-first-box-loader {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

span.gh45fzv {
    height: 20px;
    width: 100px;
    display: flex;
    background: #f3f3f3;
    border-radius: 10px;
}

span.jfh34hf {
    height: 30px;
    width: 100px;
    display: flex;
    background: #f3f3f3;
    border-radius: 10px;
}

.jg-43jf94 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
}

span.h03-dpl3jf4 {
    height: 50px;
    width: 50px;
    display: flex;
    background: #f3f3f3;
    border-radius: 50px;
}

span.gg849ffof4 {
    height: 20px;
    width: 220px;
    display: flex;
    background: #f3f3f3;
    border-radius: 10px;
}

span.hf44-fj440fj {
    height: 15px;
    width: 150px;
    display: flex;
    background: #f3f3f3;
    border-radius: 10px;
}

.oppor-inner-box-top-loader {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.applicationsLoader {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 20px);
    gap: 30px;
}

.listIcon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:#f1ecff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#5b2be0;
}

/* PROFILE CARD */

.profileCard {
    width: calc(100% - 20px);
    background: linear-gradient(135deg, #5b2be0, #7d4dff);
    border-radius: 0;
    padding: 30px 10px;
    color: #fff;
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.accountProfileProgress {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -50px;
}

.account-progress-box {
    width: calc(100% - 65px);
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 1px 1px 11px 3px #80808026;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-direction: column;
}

.profileProgressDiv {
    width: 100%;
    display: flex;
    height: 8px;
    background: #f5f5f5;
    border-radius: 50px;
    align-items: center;
    justify-content: flex-start;
}

.profileProgressDiv span {
    background: #03bf03;
    display: flex;
    height: 100%;
    border-radius: 50px;
}

.emptyFetch {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 200px;
    justify-content: center;
}

.emptyFetch img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    background: #f3f3f3;
    border-radius: 50px;
}

.shdz-dkfj-df {
width: 250px;
    background: #f3f3f3;
    display: flex;
    height: 20px;
    border-radius: 15px;
}

span.zxo-pdsf {
    width: 80px;
    background: #f3f3f3;
    display: flex;
    height: 12px;
    border-radius: 15px;
}

.notificationsLoader {
    width: calc(100% - 20px);
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

span.dhdy-03ld-fhskd {
    width: 330px;
    background: #f3f3f3;
    display: flex;
    height: 15px;
    border-radius: 15px;
}

.emptyFetch h3 {
    font-size: 16px;
    color: #616161;
    margin-bottom: 6px;
    text-align: center;
    max-width: 80%;
}

.transactionsLoader {
    margin-top: 10px;
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

span.tran-amt-load-spn {
    width: 70px;
    background: #f3f3f3;
    display: flex;
    height: 20px;
    border-radius: 15px;
}

.tran-load-boxx {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.emptyFetch p {
    max-width: 80%;
    text-align: center;
    color: #c7c7c7;
    font-size: 15px;
}

.profile-progress-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.profile-menu-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
        margin-bottom: 70px;
}

.profile-menu-box .menuItem:last-child { 
 border-bottom: 0;   
}

.menu-item-inner.logout {
    color: red;
}

.profileCard img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
}

.profileCard h2{
    margin-bottom:8px;
    font-size: 23px;
    color: #fff;
}

.profile-progress-top h4 {
    font-size: 18px;
    color: #313131;
}

.profile-progress-top p {
    color: #737373;
    font-weight: 500;
    font-size: 15px;
}

i.menuitemArrow {
    font-size: 12px;
    color: #c1c1c1;
}

.menu-item-inner p {
    color: #474747;
    font-size: 15px;
    font-weight: 500;
}

.verifiedBadge{
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
}

.verifiedBadge.unverified {
    background: #ffcecec4;
    color: red;
}

.verifiedBadge.verified {
    background: #c4ffc4;
    color: #04a504;
}

/* MENU */

.menuItem{
 width: calc(100% - 45px);
    background: #fff;
    border-radius: 0;
    padding: 20px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #cdcdcdba;
}

.profileSsectionTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 20px);
}

.menu-item-inner i {
    padding: 10px;
    background: #ebebeb;
    border-radius: 10px;
    font-size: 16px;
}

.menu-item-inner.logout i {
    background: #ffe9e9;
}

.profileSsectionTitle h3{
font-size: 18px;    
}

.menu-item-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-dp-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50px;
}

.main-dp-box i {
position: absolute;
    bottom: 0px;
    right: 0px;
    color: #00b600;
    font-size: 14px;
    background: #fff;
    border-radius: 50px;
    border: solid 2px #fff;
}

div.home-oppor-board {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 70px;
}

.opp-description {

    overflow: hidden;
    transition: 0.3s ease;
    line-height: 1.7;
}

.opp-description.collapsed {

    max-height: 110px;
}

.opp-description.expanded {

    max-height: 2000px;
}

.read-more-btn {

    margin-top: 10px;
    border: none;
    background: transparent;
    color: #007bff;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}



div.hide, span.hide, p.hide, i.hide, section.hide, input.hide, select.hide, ul.hide {
display: none;
}