body {
    margin:0;
    padding:0;
	width: 100%;
	height: 100%;
    overflow-x: hidden;
	overflow-y: scroll;
}

html {
    margin:0;
    padding:0;
	width: 100%;
	height: 100%;
    overflow-x: hidden;
	overflow-y: scroll;
}

/* Show the active slide */
.slideContentBox.active {
  display: flex;
  animation: fadeIn 0.8s ease-in-out;
}

/* Slide indicators */
.slideIndecatorBox {
  text-align: center;
  margin: 10px 0;
}

i.flterTransIcon {
    margin-right: 15px;
    font-size: 22px;
    color: #210080;
}

i.flterTransIcon.dark {
color: #e6ddff;    
}

.slideIndecator {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  background: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.slideIndecator.active {
  background: #333;
}

/* Fade animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slidDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
    background: white;
}


.slideContentBox {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
    height: 100%;
    justify-content: center;
}

.slideActionBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
}

button.slideActionBtn1 {
    width: 80%;
    max-width: 400px;
    height: 60px;
    border-radius: 50px;
    border: 0;
    color: white;
    background: #210080;
    font-size: 18px;
    font-weight: 500;
}

button.slideActionBtn2 {
    width: 80%;
    max-width: 400px;
    height: 60px;
    border-radius: 50px;
    border: solid 2px #210080;
    color: #210080;
    background: white;
    font-size: 19px;
    font-weight: 600;
}

.slideIndecatorBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px 0;
}

span.slideIndecator {
    width: 10px;
    height: 10px;
    display: flex;
    border-radius: 50px;
    background: white;
    border: solid 3px #210080;
}

span.slideIndecator.active {
background: #210080;    
}

img.slideImg {
    width: 90%;
    height: auto;
    max-width: 400px;
}

h3.slideText {
    text-align: center;
    font-size: 25px;
    color: black;
    max-width: 85%;
}


.modalBody.contctLst {
    overflow: hidden;
}

img.adBanner {
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

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

img.depoNoticeImg {
    width: 20px;
    height: 20px;
    padding: 7px;
    border-radius: 50px;
}

img.bottomNavImg {
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    padding: 7px 10px;
    border-radius: 10px;
}

img.bottomNavImg.active {
    background: #e0d5ff;
}

.depositNoticeBoard {
    width: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    border-radius: 10px;
    border: solid 2px #3162ff;
    gap: 10px;
    background: #ecf0ff;
}

h3.depositAccTxt {
    color: black;
    font-size: 19px;
}

button.shareAccountDetails {
    width: 90%;
    max-width: 400px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 0;
    border-radius: 10px;
    background: #210080;
    color: white;
    font-size: 18px;
    margin-top: 30px;
}

img.depoNoticeImg.blue {
    background: #006cff4d;
}

img.depoNoticeImg.orange {
    background: #ff85003d;
}

img.depoNoticeImg.green {
    background: #0bb50b42;
}

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

div.paymentReceiptModal {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    background: #e7faff;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100000000;
}

.paymentRecieptTopDiv {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 20px 0;
}

span.recieptTopInnerSpan {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}

i.receptCross {
    font-size: 21px;
    padding: 10px;
    border: solid 2px #0078ff;
    border-radius: 50px;
    color: #0078ff;
}

div.receiveMoneyBoard {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 30px;
    align-items: center;
    gap: 20px
}

.depositAccountBoard {
    width: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    border: solid 2px #c5c5c5;
    border-radius: 10px;
    gap: 25px;
}

span.depositAccSpan {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

p.depositAccTitle {
    color: #3d3d3d;
}

i.copyAccIcon {
    font-size: 16px;
    color: black;
}

img.converterBreakerImg {
    width: 50px;
}

.currencyConvertDiv {
    width: calc(90% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 10px;
    background: #efeaff;
}


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

span.converterSelect {
    display: flex;
    gap: 3px;
    padding: 7px 5px;
    border: solid 2px #d1d1d1;
    border-radius: 50px;
    align-items: center;
    background: #e4efff;
}

span.conversionDisplaySpan {
    width: calc(95% - 10px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 30px;
    align-items: flex-start;
}

span.conversionDisplaySpan.second {
align-items: flex-end;    
}

p.xchngeRteTxt {
    font-size: 16px;
    color: #4b4b4b;
    font-weight: 500;
}

h3.xchangeDis {
    font-size: 17px;
    color: black;
}

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

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

span.convertInputSpan {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 15px;
}

.convertBreaker {
    width: 100%;
    display: flex;
    margin: 20px 0;
    align-items: center;
}

input.convertInput {
    width: 100%;
    height: 100%;
    padding-left: 20px;
    font-size: 25px;
    font-weight: 600;
    background: 0;
}

.convertBreaker::before,
.convertBreaker::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #ccc;
  margin: 0 10px; /* space between line and image */
}

.convertBreaker img {
  display: block;
  max-height: 50px; /* adjust as needed */
}

p,h1,h2,h3,h4,span,button {
    margin: 0;
    padding: 0;
    font-family: system-ui;
      -webkit-touch-callout: none; /* iOS Safari: disables tap-and-hold callout */
  -webkit-user-select: none;   /* Chrome, Safari, Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* Standard */
}

textarea, input, select :focus{
outline: 0;
border: 0;
}

.signupProgress {
    width: 90%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 25px;
    position: relative;
}

span.progressSpan {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 50%;
    background: #ded3ff;
    color: #210080;
    font-size: 16px;
    font-weight: 600;
    width: 20px;
    height: 20px;
    position: relative;
}

i.fingerprint {
    color: #210080;
    font-size: 35px;
}

span.progressSpan.active {
    background: #210080;
    color: white;
}


.indexTopDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

span.logoutSpann {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    color: #210080;
    font-weight: 600;
    font-size: 18px;
}

.indexGreetingDiv {
    width: 100%;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    gap: 10px
}

span.displayDp {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    background: #e9e2ff;
    color: #210080;
    border-radius: 50%;
    justify-content: center;
    font-weight: 600;
    font-size: 30px;
}

.loginDp {
    width: 100px;
    height: 100px;
}

img.displayDp {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background: #ffffff3b;
    object-fit: cover;
}

img.recipientDp {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50px;
    object-fit: cover;
    background: #b1b1b18a;
}

span.displayDp.pink {
background: #ffecf0;
color: #ff788e;    
}

span.displayDp.purple {
background: #e9e2ff;
color: #210080;    
}

span.displayDp.green {
background: #ebffe9;
color: #10a510;    
}

span.displayDp.blue {
background: #ebebff;
color: blue;    
}

span.displayDp.red {
background: #ffeeee;
color: red;   
}

h3.nameGreeting {
    font-size: 19px;
    color: #272727;
    text-align: center;
}

.pinValidationDiv {
    width: 100%;
    display: flex;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.keyyPadDiv {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px
}

button.keyPadBtn {
    width: 80px;
    height: 60px;
    border: 0;
    border-radius: 5px;
    font-size: 25px;
    background: #f6f6f6;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

button.keyPadBtn.null {
    background: 0;
}

span.pinValidationSpan.active {
    background: #210080;
}

button.keyPadBtn:hover {
background: #eee8ff;
}

button.keyPadBtn.null:hover {
background: none;
}

.keyPadRowDiv {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.homeDp {
    width: 50px;
    height: 50px;
    padding-left: 5px;
}

.searchWalletsDiv {
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

span.searchWalletsSpan {
    width: calc(90% - 20px);
    display: flex;
    justify-content: flex-start;
    padding: 10px;
    border: solid 1px grey;
    border-radius: 10px;
    gap: 10px;
    height: 35px;
    align-items: center;
}

input.searchWalletInput {
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: #4e4e4e;
    background: 0;
}

.searchRecpientDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
}

.walletBox {
min-width: 150px;
    max-width: 180px;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px;
    padding: 20px 10px;
    background: #f1f1f1;
    border-radius: 20px;
    max-height: 120px;
    min-height: 120px;
}

.transactionsBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
}

.transBoxx {
    width: calc(100% - 20px);
    padding: 15px 5px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: solid 1px #dddddd;
}

.transBoxx:last-child {
border-bottom: 0;    
}

.transBoxInner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

p.transAmountTx {
    font-size: 15px;
    font-weight: 600;
    color: red;
    text-align: right;
}

img.transactonIconImg {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50px;
}

h4.transactionTitleTxt {
    font-size: 16px;
    color: black;
    text-align: left;
}

span.transactionTxtSpan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
}

p.transAmountTx.credit {
    color: green;
}

p.transactionDescr {
    color: #2a2a2a;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 3px;
    max-width: 95%;
}

span.tranAmtSpn {
    width: max-content;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

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

p.transactionDate {
    font-size: 14px;
    color: #767676;
    text-align: left;
}

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

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

button.walletStatusBtn.inactive {
    background: #c2c2c2;
}

h2.walletBoxAmtDis {
    font-size: 21px;
}

h4.walletBoxCurrencySym {
    font-size: 17px;
    color: black;
    font-weight: 600;
}

span#ngnDisplayBal {
    margin-left: 3px;
}

span.walletBoxBalla {
    display: flex;
    justify-content: flex-start;
}

span.walletBoxStatusSpan {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

button.walletStatusBtn {
    border: 0;
    background: green;
    color: white;
    height: 30px;
    width: auto;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
}

.walletsBoxes {
    width: calc(100% - 20px);
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding-bottom: 30px;
    overflow-y: scroll;
    height: 100%;
    max-height: 650px;
  align-content: flex-start;
}

i.searchIcon {
    color: #878787;
    font-size: 18px;
}

img.notifyBellMain {
    width: 25px;
    padding: 5px;
    border-radius: 10px;
}

img.noTransImg {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    border-radius: 80%;
    padding: 0;
    opacity: 0.5;
}

.bottomNav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    background: white;
    position: fixed;
    bottom: 0;
    box-shadow: 1px 1px 18px 2px #dddddd;
}

.sendBoard {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

button.sendMoneyBtn {
    width: 90%;
    max-width: 450px;
    height: 50px;
    border: 0;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 500;
    background: #210080;
    color: white;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sendMoneyKeyBoard {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-height: 40%;
}

span.sendMoneyKeySpan {
    width: 90%;
    max-width: 450px;
    display: flex;
    justify-content: space-around;
}

.sendMoneyInnerTopDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 40%;
    margin-top: 30px;
}

.sendMoneyAmountInputDiv {
    width: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-direction: column;
}

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

input.sendMoneyAmoutDis {
    background: 0;
    text-align: center;
    border: 0;
    color: black;
    font-size: 35px;
    font-weight: 600;
    min-width: 20px;
}

.sendMoneyRecipientDp {
    width: auto;
    display: flex;
    flex-direction: column;
}

h4.sendMoneyRecipientName {
    font-size: 22px;
    color: black;
    text-align: center;
}

p.sendMoneyRecpientTag {
    font-size: 19px;
    color: #5b5b5b;
    font-weight: 400;
}

span.sendMoneyNameSpan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

p.sendMoneyCurrencyDis {
    font-size: 17px;
    color: #6f6f6f;
}

i.sendMoneyArrow {
    font-size: 21px;
    color: #767676;
}

span.sendMoneyAmountInputSpan {
    display: flex;
    align-items: center;
    gap: 7px 5px;
    padding: 10px 5px;
    border: solid 2px grey;
    border-radius: 10px;
    color: #505050;
    font-weight: 500;
}

.sendMoneyRecipientDpDiv {
    width: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 3px;
}

span.sendMoneyAbrevDp {
width: auto;
    height: auto;
    min-height: 90px;
    min-width: 90px;
    display: flex;
    align-items: center;
    background: #e9e2ff;
    color: #210080;
    border-radius: 50%;
    justify-content: center;
    font-weight: 400;
    font-size: 30px;
}

img.sendMoneyRecipientCountryFlggDis {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    margin-top: -20px;
    margin-left: 60px;
    border: 3px white solid;
}

img.sendMoneyRecipientDp {
    width: 90px;
    height: 90px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50px;
    object-fit: cover;
    background: #b1b1b18a;
}

button.sendMoneyKey {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    background: 0;
    font-size: 26px;
    font-weight: 500;
    color: black;
}

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


section.pinAuthScreen {
position: fixed;
    z-index: 100000;
    top: 0;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    width: 100%;    
}

div.navBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ab99df;
    gap: 5px;
}

i.nav {
    font-size: 26px;
}

p.navTitle {
    font-size: 12px;
}

div.navBox.active {
color: #210080;    
}

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

.inappBannerDiv {
    width: 95%;
    min-height: 140px;
    display: flex;
    background: #eae3ff;
    border-radius: 10px;
    margin-top: 20px;
}

p.balCurrencyMain {
    font-size: 16px;
    font-weight: 500;
    color: #210080;
}

h3.fnameMain {
    font-size: 22px;
    color: black;
}

.greetingDiv {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 5px;
}

p.mainGreeting {
    color: #969696;
    font-size: 16px;
}

.moreDpDiv {
    width: 70px;
    height: 70px;
}

button.convertBtn {
margin-top: 40px;
    width: 90%;
    min-height: 65px;
    border: 0;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    background: #210080;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;    
}

button.convertBtn.dark {
background: #d1c2fe;
color: #210080;    
}

h3.timeFrame {
    font-size: 18px;
    color: #323232;
}

span.displayDpMain {
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    display: flex;
    align-items: center;
    background: #e9e2ff;
    color: #210080;
    border-radius: 50%;
    justify-content: center;
    font-weight: 500;
    font-size: 25px;
}

img.noDataImg {
    width: 60px;
    height: 60px;
}

div.noChart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    opacity: 0.4;
}

p.noDataText {
    font-size: 18px;
}

img.recipientImgg {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #b8b8b8ab;
}

span.recipientList {
    display: flex;
    gap: 10px;
}

img.displayDpMain {
    border-radius: 50%;
    width: 100px;
    height: 100%;
}

span.sendMoneyAbrevDp.pink {
background: pink;
    color: red;   
}

span.sendMoneyAbrevDp.purple {
background: #e9e2ff;
color: #210080;    
}

span.sendMoneyAbrevDp.green {
background: #ebffe9;
color: #10a510;    
}

span.sendMoneyAbrevDp.addBtn {
    font-size: 35px;
}

span.sendMoneyAbrevDp.blue {
background: #ebebff;
color: blue;    
}

span.sendMoneyAbrevDp.red {
background: #ffeeee;
color: red;   
}

span.displayDpMain.pink {
background: pink;
    color: red;   
}

span.displayDpMain.purple {
background: #e9e2ff;
color: #210080;    
}

span.displayDpMain.green {
background: #ebffe9;
color: #10a510;    
}

span.addRecipient.addBtn {
    font-size: 35px;
}

span.displayDpMain.blue {
background: #ebebff;
color: blue;    
}

span.displayDpMain.red {
background: #ffeeee;
color: red;   
}

span.pinValidationSpan {
    width: 20px;
    height: 20px;
    display: flex;
    background: #ebe4ff;
    border-radius: 50%;
}

p.indexGreeting {
    color: #939393;
    font-size: 17px;
    text-align: center;
}

div.withdrawAmountBoard {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
}

span.bankOwnerNameAbrev {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    background: red;
    font-size: 35px;
    font-weight: 600;
    border-radius: 50px;
}

img.bankOwnerImg {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    margin-bottom: -5px;
    margin-left: -30px;
    border: solid 3px white;
}

img.bankOwnerImg.dark {
    border: solid 2px black;
}

span.userBankPicDizz {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

p.wthdrawMoneyBalance {
   color: #3982f0;
    padding: 10px 15px;
    background: #009fff2e;
    border-radius: 50px;
    margin-top: 10px;
    font-weight: 600;
    font-size: 15px;
}


.progressSpan:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 40px; /* adjust distance between circles */
  height: 4px;
  background-color: #ded3ff;
  transform: translateY(-50%);
  z-index: 0;
}

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

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

div.loader {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    background: #ffffffad;
    z-index: 10000000000000; 
}

section.baseSection {
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.welcomeBttm {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0;
    background: white;
    border-radius: 20px 20px 0 0;
    min-height: max-content;
    position: relative;
    bottom: 0;
    z-index: 100;
}

.welcomeImgBck {
    min-width: 100%;
    height: 100%;
    background: #210080;
    margin-bottom: -20px;
}

h3.billOptonTitle.red {
    color: red;
}

p.billOptDesc.red {
    color: #ff5d5d;
}

span.actionSpan {
    background: #ffdfdf;
}

h2.welcomeTitle {
    color: #210080;
    text-align: center;
    margin-bottom: 10px;
    font-size: 27px;
}

p.welcomeDescrp {
    text-align: center;
    color: #818181;
    margin-bottom: 25px;
    font-size: 17px;
    padding: 0 10px;
}

span.welcomeNavBtnSpn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

button.welcomeSignupBtn {
    height: 55px;
    padding: 0 20px;
    font-size: 17px;
    color: white;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    background: #210080;
    width: 80%;
    max-width: 600px;
}

p.loginBtm {
    color: #939393;
    font-size: 16px;
    display: flex;
    align-items: center;
}

b.loginBold {
    color: #210080;
    font-size: 17px;
    margin-left: 10px;
}

.passwordValidationDiv {
   margin-bottom: 35px;
    width: calc(80% + 20px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

i.invalidPass {
    color: red;
}

i.validPass {
    color: green;
}

p.passValidationTxt {
    color: #8d8d8d;
}

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

img.baseImg {
    width: 100%;
    height: 100%;
    opacity: 0.4;
    object-fit: cover;
}

section.baseSection.login {
    justify-content: flex-start;
}

.screenTopDiv {
    width: 100%;
    margin-bottom: 20px;
    min-height: 70px;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.formTitleBox {
    width: 100%;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
}

h2.formTitleHead {
    margin-bottom: 6px;
    font-size: 21px;
    color: black;
}

p.formDescrp {
    font-size: 17px;
    color: #727272;
    max-width: 90%;
}

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

.formBtnGroup {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 20px;
    gap: 20px
}

button.btn100 {
    height: 55px;
    width: 80%;
    max-width: 600px;
    border-radius: 50px;
    border: 0;
    background: #210080;
    color: white;
    font-size: 19px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modalSubTit {
    color: #5d5d5d;
    width: 80%;
    text-align: center;
    font-size: 16px;
}

span.pinAuthInputSpan {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

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

button.cancelPinBtn {
    height: 50px;
    width: 120px;
    border: 0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #210080;
    background: #ebe4ff;
}

.modalContent.pinAuth {
    width: 95%;
    min-height: fit-content;
    padding-bottom: 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    height: auto;
    box-shadow: 0px 2px 10px 4px #80808030;
}

button.confirmPinBtn {
    height: 50px;
    width: 120px;
    border: 0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: #210080;
    display: flex;
    align-items: center;
    justify-content: center;
}

input.pinInput {
    height: 30px;
    width: 30px;
    border: solid 2px grey;
    border-radius: 10px;
    color: #210080;
    font-size: 19px;
    text-align: center;
}

span.pinAuthTitleSpan {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    gap: 5px;
}

h3.modalTitle3 {
    font-size: 21px;
    color: black;
}

button:disabled {
background: #eae3ff;    
}

div.modal.pinModal {
    background: #000000ed;
}

.inputBox {
    width: 80%;
    max-width: 600px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #eae3ff;
    padding: 10px 15px;
    border-radius: 10px;
}

span.phoneInputSpn {
    display: flex;
    margin-right: 10px;
    align-items: center;
    gap: 5px;
    padding: 10px;
    justify-content: center;
    background: #2100802e;
    border-radius: 10px;
}

.mainTop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 5px;
    position: fixed;
    background: white;
    top: 0;
    z-index: 100;
}

.notifyDiv {
    display: flex;
    align-items: center;
    padding-right: 10px;
    gap: 10px
}

p.balTitle {
    color: #e6e6e6;
}

h2.bal {
    color: white;
    font-size: 20px;
}

span.balCountrySpan{
    display: flex;
    align-items: center;
    padding: 10px;
    background: #ffffffc4;
    border-radius: 20px;
    gap: 5px;
}

img.countryCurrencyFlg {
    width: 17px;
    height: 17px;
    border-radius: 50%;
}

i.curencyArrowDwn {
    color: #210080;
}

.balBoxes {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 90px;
}

.quickActionDiv {
    width: 90%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    gap: 20px;
    overflow-x: scroll;
    flex-direction: row;
}

span.noNotify {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

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

.billsOptionsDiv {
    width: 100%;
    display: flex; 
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    padding-bottom: 50px;
}

span.bllsSpnGrp {
    display: flex;
    align-items: center;
}

.modalContent.cardOtion.moreOptions {
    height: fit-content;
}

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

span.cardPolicyTxt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

h3.cardPolicyTitle {
    color: black;
    font-size: 17px;
    text-align: left;
}

p.cardPolicyDesc {
    font-size: 16px;
    color: #5c5c5c;
    text-align: left;
}

img.demoCard {
    width: 95%;
    max-width: 400px;
    height: auto;
}

p.cardFundHeadsUp {
    font-size: 17px;
    font-weight: 500;
}

.chooseCardColorDiv {
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

p.cardLabel {
    width: 100%;
    font-size: 18px;
    color: #313131;
    text-align: left;
}

i.selectContact {
    font-size: 35px;
    color: #210080;
}

.colourPickerBox {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    align-items: center;
}

span.innerColorPicker {
    height: 100%;
    width: 100%;
    display: flex;
    background: #210080;
    border-radius: 10px;
}

h3.cardCreateBalDis {
    color: black;
    font-size: 19px;
}

span.colorPicker {
    height: 40px;
    width: 40px;
    background: white;
    padding: 5px;
    border-radius: 10px;
}

p.cardCreateBalDisTitle {
    color: #606060;
    font-size: 17px;
    margin-bottom: 3px;
}

span.innerColorPicker.blue {
    background: #043cfb;
}

span.innerColorPicker.black {
    background: black;
}

span.colorPicker.active {
    border: solid 3px #210080;
}

span.cardCreateBalanceDisplay {
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

span.fundCardAmountSpan {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: solid 2px grey;
    border-radius: 10px;
    padding: 10px;
    height: 50px;
}

p.fundCardWalletCurrency {
    font-size: 19px;
    color: black;
    font-weight: 500;
}

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

span.cardCreateFundCurrencySpan {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-start;
}

input.fundCardAmountInput {
    height: 30px;
    width: calc(100% - 10px);
    padding-left: 10px;
    font-size: 20px;
    color: black;
    font-weight: 500;
    background: 0;
}

img.fundCardWalletCurrencyFlag {
    width: 30px;
    height: 30px;
    border-radius: 50px;
}

.fundCardAmountDiv {
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

img.cardDesignDisplay {
    width: 90%;
    max-width: 400px;
}

.headsUpNotice {
    width: calc(90% - 20px);
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 20px;
    padding: 20px 10px;
    border: solid 2px #0078ff;
    border-radius: 10px;
    background: #e9f4ff;
}

h2.noCardTitle {
    font-size: 27px;
    width: 95%;
    text-align: left;
    color: black;
    font-family: sans-serif;
}

img.cardPolicyImg {
    width: 20px;
    padding: 12px;
    border-radius: 50px;
    background: #efe9ff;
}

.cardPolicyDiv {
    width: calc(95% - 25px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    gap: 30px;
    border-radius: 10px;
    border: 2px dotted black;
}

button.createCardBtnn {
    width: 95%;
    height: 55px;
    border: 0;
    border-radius: 10px;
    background: #210080;
    color: white;
    font-size: 19px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

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

span.cardBalNumnSpan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

h3.balOnCardDiss {
    color: white;
    font-size: 19px;
    font-size: 25px;
}

img.cardBrandLogo {
    height: 40px;
}

p.nameOnCardDiss {
    color: white;
    font-size: 17px;
    font-weight: 500;
}

p.numbOnCardDiss {
    font-size: 24px;
    color: white;
    font-weight: 500;
    letter-spacing: 2px;
}


.cardBodyBox {
    width: calc(85% - 20px);
    max-width: 400px;
    height: 130px;
    background-color: #210080;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 20px;
    background-image: url(https://primitecoil.com/images/bckgrnd.png);
}

.cardBodyBox.black {
    background-color: black;
}

.cardBodyBox.blue {
    background-color: #043cfb;
}

span.cardInnerSpan {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.cardActionsDiv {
    width: 90%;
    max-width: 400px;
    display: flex;
    justify-content: space-between;
}

span.cardDepositBtnSpan {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    height: 50px;
    border-radius: 10px;
    background: #e9e2ff;
}

p.cardActionBtn {
    color: #210080;
    font-size: 16px;
    font-weight: 500;
}

img.cardActionIcons {
    width: 20px;
}

img.cardMoreActionIcons {
    width: 20px;
}


span.cardPolicySpan {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
}

span.bllCton {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

span.billsSpan {
    display: flex;
    align-items: center;
    width: 95%;
    padding: 15px 0;
    justify-content: space-between;
    border-bottom: solid 1px #d9d9d9;
}

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

.recentTransactionsDiv {
    margin-top: 30px;
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chartBoard {
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 30px;
    padding: 20px 10px;
    border-radius: 10px;
    border: solid 1px #e2e2e2;
}

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

.chartHeader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

button.chartIndecatorBtn.send {
    background: #210080;
}

button.chartIndecatorBtn.withdraw {
    background: #2e95ff;
}

button.chartIndecatorBtn.Bills {
    background: #fba506;
}

.chartBoard.dark {
    background: #323232;
    border: 0;
}

#cashFlowPieChart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  background: 0;
    border-radius: 50%;
}

p.chartIndecatorTxt.dark {
    color: white;
}

h3.chartResultDisplay.dark {
    color: white;
}

.chartIndecators {
    display: flex;
    width: 100%;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

span.chartIndecatorSpan {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    flex-direction: column;
}

h3.chartResultDisplay {
    font-size: 17px;
    color: black;
}

p.chartIndecatorTxt {
    font-size: 16px;
    color: #676767;
}

button.chartIndecatorBtn {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 5px;
}

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

span.switchChartFilter {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    gap: 10px;
    border-radius: 10px;
    background: #ece5ff;
}

#spendingPieChart {
display: block;
    margin: 0 auto;
    max-width: 100%;
    background: 0;
    border-radius: 50%;
}

button.chartIndecatorBtn.credit {
    background: #210080;
}

button.chartIndecatorBtn.debit {
    background: #2e95ff;
}

.recentTransTitleDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

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

img.noTransImg {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    opacity: 0.5;
}

p.sectionTitlee {
    font-size: 19px;
    color: black;
    text-align: left;
}

img.notifyIcon {
    width: 25px;
    height: 25px;
    padding: 10px;
    background: #efeaff;
    border-radius: 10px;
}

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

h3.notifyTitle {
    font-size: 19px;
    color: black;
}

p.notifyMsg {
    color: #6c6c6c;
    margin-bottom: 5px;
}

p.notifyTmeStamp {
    color: black;
    font-weight: 500;
    font-size: 15px;
}

.notificationDiv {
    width: calc(95% - 10px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 10px;
    border-bottom: solid #d9d9d9 1px;
}

.notificationDiv:last-child{
border-bottom: 0;    
}

p.viewAllTransTxt {
    font-size: 17px;
    font-weight: 600;
    color: #210080;
}

.screenTopp {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    top: 0;
    background: white;
}

p.cardBalTxt {
    font-size: 17px;
    font-weight: 400;
    color: black;
}

h3.carBal {
    font-weight: 600;
    font-size: 21px;
}

span.cardLogoSpan {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

h3.screenTitle {
    margin-left: 10px;
    font-size: 23px;
    color: black;
}

button.topScreenBtn {
    margin-right: 10px;
    height: 40px;
    border: 0;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 17px;
    background: #210080;
    color: white;
}

.cardBoxes {
    width: 100%;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.indicator {
    width: 10px;
    height: 10px;
    background: #210080;
    border-radius: 50px;
}

div.bankValidationBoard {
    min-height: 100px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: calc(100% - 40px);
    padding-bottom: 30px;
}

.cardScrollIndicator {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
}

.cardBoxx {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 70px;
    width: 100%;
}

.cardBox {
    width: calc(95% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #210080;
    color: white;
    border-radius: 10px;
    padding: 30px 20px;
    gap: 15px;
    background-image: url(https://primitecoil.com/images/bckgrnd.png);
}

img.cardBrandLogo {
    height: 40px;
}

img.recieptStatusImg {
    width: 50px;
    height: 50px;
    padding: 15px;
    border-radius: 50px;
}

.recieptFirstDivv {
    width: calc(100% - 40px);
    background: white;
    padding: 20px 10px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.confirmationBodyDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-bottom: 70px;
    overflow-y: scroll;
}

p.confirmTransTxtResult {
    color: black;
    font-weight: 500;
    font-size: 16px;
    max-width: 50%;
    text-align: right;
}

div.paymentRecieptBoard {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 30px;
}

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

h3.confirmationAmountTxx {
    font-size: 26px;
    font-weight: 800;
    color: black;
}

p.confirmAmountTxxtDescr {
    font-size: 18px;
    color: #636363;
}

div.confirmBalDiv {
    width: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: #e9e9e9;
    border-radius: 10px;
    gap: 15px;
}

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

span.confirmTranBalDestailsSpan {
    width: 100%;
    display: flex;
    justify-content: space-between;
    min-height: 20px;
    padding: 5px 0;
}

h3.confirmPaymentMethodTitleTcxt {
    width: 100%;
    padding-bottom: 15px;
    border-bottom: solid 1px #424242;
}

.modal900 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #00000096;
}

img.promptImg {
    width: 70px;
    height: 70px;
}

.promptBody {
    width: calc(90% - 20px);
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    border-radius: 10px;
    background: white;
    gap: 40px;
}

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

.cardInfoBox {
    padding: 25px 15px;
    width: calc(90% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #c4c4c4;
    gap: 15px;
}

span.cardsInfoSectionSpan {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

p.cardInfoTitleTxt {
    color: #595959;
    font-size: 16px;
}

i.copyCardInfo {
    font-size: 17px;
    color: #333333;
}

h3.cardInfoMainTxt {
    color: #3c3c3c;
    font-size: 18px;
    text-align: left;
    font-weight: 600;
}

h3.cardInfoBoxTitle {
    font-size: 21px;
    color: black;
}

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

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

span.cardInfoBoxTitleSpan {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

span.promptSpanUpper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

span.promptSpanLower {
    display: flex;
    gap: 20px;
}

p.logoutPromptTxt {
    color: black;
    font-size: 18px;
    text-align: center;
    max-width: 80%;
}

p.confirmBalInfoTxt {
    color: #585858;
}

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

p.confirmBalInfoTxt1 {
    color: #585858;
    font-size: 16px;
    text-align: left;
} 

p.confirmBalInfoTxt2 {
font-size: 16px;
    color: black;
    font-weight: 500;
    text-align: right;
}

button.confirmationBtn {
    width: 90%;
    min-height: 65px;
    border: 0;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    background: #210080;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmTransInfoBodyDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 50px);
}

span.confirmTransInfoBodySpan {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    height: auto;
    border-bottom: dashed 1px #9a9a9a;
    padding: 5px 10px;
}

p.confirmTransTitleTxt {
    max-width: 30%;
    color: #000000;
    font-size: 16px;
    text-align: left;
}

.recieptPaymentDetails {
    width: calc(100% - 40px);
    background: white;
    padding: 20px 10px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

h4.transDetlsTitle {
    width: 100%;
    font-size: 18px;
    color: black;
    margin-bottom: 10px;
    text-align: left;
}

span.transTableSpan {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

p.transTitleTxt {
    color: #666666;
    text-align: left;
}

p.transTitleTxt {
    color: #666666;
    text-align: left;
    max-width: 40%;
}

p.transTableData {
    text-align: right;
    max-width: 50%;
    color: #1b1b1b;
    font-weight: 500;
}

span.recieptSupportTxt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

h4.recieptSupportTitle {
    font-size: 18px;
    color: black;
}

p.recieptSupportDesc {
    font-size: 17px;
    color: #595959;
}

.receiptContactDiv {
    width: calc(100% - 40px);
    background: white;
    padding: 20px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

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

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

img.recieptSupport {
    width: 25px;
    height: 25px;
    padding: 10px;
    background: #ceefff;
    border-radius: 50px;
}

i.recieptArrowIcon {
    color: #575757;
}

img.recieptStatusImg.successful {
    background: #27ca4e4f;
}

img.recieptStatusImg.failed {
    background: #ff000045;
}

span.cardNoSpan {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

span.cardOwnerNameSpan {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cardBalBox {
    width: calc(95% - 40px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    background: #e7dfff;
    border-radius: 10px;
    padding: 10px 20px;
}

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

img.cardLogo {
    height: 40px;
}

p.cardNumberOnCard {
    font-size: 23px;
}

p.cardOwnerNameOnCard {
    font-size: 19px;
}

p.cardDateOnCard {
    font-size: 20px;
}

button.topScreenBtn {
    margin-right: 10px;
}

.transactionsBox {
    width: 100%;
}

p.noTransTxt {
    font-size: 18px;
    color: #a5a5a5;
}

.recentRecipientsDiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

p.sectionTitle {
    margin-bottom: 20px;
    font-size: 19px;
    color: black;
    margin-left: 10px;
    width: -webkit-fill-available;
}

.recipientsRowDisp {
    width: fit-content;
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    overflow-x: scroll;
    padding-bottom: 20px;
    padding-left: 15px;
}

span.noBank {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    gap: 15px;
}

button.generateDepoAccBtn {
    height: 45px;
    padding: 10px 20px;
    border-radius: 20px;
    border: 0;
    font-size: 17px;
    font-weight: 500;
    background: #210080;
    color: white;
}

p.recipientName {
    color: #575757;
    margin-top: 10px;
    font-size: 15px;
}

.recipientBox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recipientDivv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.recipientSearchResult {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: scroll;
}

p.recipeientNme.dark {
    color: white;
}

p.recipeientTagNme.dark {
    color: #d2d2d2;
}

p.recipeientNme {
    font-size: 18px;
    font-weight: 500;
    color: black;
}

span.searchedUserDpSpan {
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

p.recipeientTagNme {
    color: #6d6d6d;
    font-size: 17px;
}

span.displayRecipDp {
    color: white;
    background: red;
    min-width: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 600;
    border-radius: 50px;
}

.recipientBoxx {
   display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 20px);
    padding: 10px 5px;
    /* background: gainsboro; */
    border-radius: 10px;
}

.recipientBoxx:hover {
background: #f7f7f7;    
}

.screenTopTilteDiv {
    width: 100%;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
    margin-top: 30px;
    gap: 10px;
}

p.screenTitleDescrption {
    font-size: 18px;
    color: #636363;
    max-width: 70%;
}


.contactList {
    width: calc(90% - 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f6f3ff;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px 10px;
}

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

i.contactIcon {
    padding: 15px;
    background: #e3d9ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #210080;
    font-size: 25px;
}

span.contactTxt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

p.contactDescrptn {
    color: #4f4f4f;
    font-size: 16px;
}

h3.contactSupprtHead {
    color: black;
    font-size: 18px;
}

h2.screenTitleTxt {
    font-size: 28px;
    color: black;
    text-align: left;
}

.modalBody {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 20px;
    height: 100%;
}

img.qrCode {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.headsUp {
    width: calc(95% - 30px);;
    display: flex;
    gap: 15px;
    padding: 20px 15px;
    background: #f3efff;
    border-radius: 10px;
    margin-bottom: 30px;
}

.tagDisDiv {
    width: calc(90% - 20px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: solid 2px #210080;
    border-radius: 10px;
}

button.shareTagBtn {
    height: 50px;
    width: 150px;
    border-radius: 10px;
    border: 0;
    font-size: 18px;
    font-weight: 500;
    color: #210080;
    background: #e6deff;
}

button.copyTagBtn {
    height: 50px;
    width: 150px;
    border-radius: 10px;
    border: 0;  
    font-size: 18px;
    font-weight: 500;
    color: white;  
    background: #210080;     
}

img.headsUpImg {
    width: 25px;
    height: 25px;
    margin-bottom: 10px;
}

span.tagActnBtnSpn {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

span.countrySelectSpan.all {
    min-width: 40px;
}

h3.tagNameDis {
    font-size: 28px;
    color: #210080;
    font-weight: 600;
}

p.headsupTxt {
    font-size: 18px;
    font-weight: 500;
    color: #525252;
}

span.addRecipient {
    min-width: 60px;
    min-height: 60px;
    background: #e8e0ff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #210080;
    font-size: 25px;
    font-weight: 600;
}

img.recipientCountryFlggDis { 
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: relative;
    margin-top: -15px;
    margin-left: 47px;
    border: 3px white solid;
}

span.displayRecipDp.red {
color: red;
background: #ffeaea;    
}

span.displayRecipDp.green {
color: #0bb40b;
background: #daffda;   
}

span.displayRecipDp.blue {
color: #0c0ce0;
background: #d2e7ff; 
}

span.displayRecipDp.pink {
    background: pink;
    color: red;
}

span.addRecipient.red {
    color: red;
    background: #ffeaea;
}

span.addRecipient.green {
    color: #0bb40b;
    background: #daffda;
}

span.addRecipient.blue {
    color: #0c0ce0;
    background: #d2e7ff;
}

span.addRecipient.pink {
    background: pink;
    color: red;
}

.actionDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

p.actionTitle {
    color: #7c7c7c;
    font-size: 16px;
}

img.actionImg {
    width: 25px;
}

.noCardDis {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 200px);
}

.referralDiv {
    width: 100%;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-bottom: 100px;
}

span.moreTopBtn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    border-radius: 30px;
    background: #210080;
    color: white;
    margin-right: 10px;
}

span.moreDpDisp {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

h3.modalTitle2 {
    width: 100%;
    /*padding-left: 25px;*/
    color: black;
    font-size: 21px;
    margin-bottom: 30px;
    text-align: center;
}

.currencySelectDivGrp {
    width: calc(95% - 20px);
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}

span.currencySelectSpanGrp {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

h4.walletBalDisSel {
    color: grey;
    font-size: 18px;
}

h4.currencyDisNm {
    font-size: 19px;
    color: black;
    font-weight: 500;
}

.walletsSelectBody {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: max-content;
    overflow-y: scroll;
    position: relative;
    gap: 10px;
    padding-bottom: 40px;
}

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

img.moreOptn {
    padding: 10px;
    border-radius: 10px;
    background: #eee8ff;
    width: 20px;
    height: 20px;
}

button.recomBtn {
    height: 25px;
    padding: 0 10px;
    border-radius: 10px;
    background: green;
    border: 0;
    color: white;
    margin-left: 10px;
}

button.betaBtn {
    height: 25px;
    padding: 0 10px;
    border-radius: 10px;
    background: #ebe3ff;
    border: 0;
    color: #210080;
    margin-left: 5px;
}

button.frBtn {
    height: 25px;
    padding: 0 10px;
    border-radius: 10px;
    background: #ebe3ff;
    border: 0;
    color: #210080;
    margin-left: 5px;
}

p.moreOptTtle {
    font-size: 17px;
    font-weight: 500;
    color: #616161;
}

h3.sectionTitle {
    width: calc(100% - 20px);
    text-align: left;
    color: #777777;
    font-size: 21px;
    font-weight: 500;
}




/* Toggle switch styling */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px; width: 20px;
  left: 0px; bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:checked + .slider:before {
  transform: translateX(24px);
}






.moreBox {
    width: calc(95% - 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    border: solid 1px #d3d3d3;
    border-radius: 10px;
    background: #ededed;
}

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

.moreProfile {
    margin-top: 90px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(95% - 30px);
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #f3f3f3;
}

i.moreArrow {
    color: #a0a0a0;
}

img.noBankImgg {
    width: 90px;
    height: 90px;
}

p.noBankTxt {
    text-align: center;
    color: #3c3c3c;
    font-size: 16px;
    max-width: 70%;
    opacity: 0.4;
}

p.moreFullname {
    font-size: 21px;
    font-weight: 600;
    color: black;
}

p.viewAllTransTxt.dark {
    color: white;
}

.recipientName.dark {
    color: #f9f9f9;
}

p.actionTitle.dark {
    color: white;
}

.mainTop.dark {
    background: black;
}

p.mainGreeting.dark {
    color: #cbcbcb;
}

h3.fnameMain.dark {
    color: white;
}

img.notifyBellMain.dark {
    background: white;
}

p.sectionTitlee.dark {
    color: #c9c9c9;
}

p.sectionTitle.dark {
    color: #c9c9c9;
}

span.moreTagDis {
    padding: 5px 15px;
    color: #4d4d4d;
    font-size: 16px;
    background: #e8e1ff;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.profileNmeDisMore {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

img.referImg {
    width: 95%;
    height: 150px;
    border-radius: 10px;
    background: #f1ecff;
    margin-bottom: 20px;
}

h2.refTitle {
    margin-bottom: 7px;
    color: black;
    font-size: 25px;
}

p.refDesc {
    text-align: center;
    padding: 0 10px;
    color: grey;
    font-size: 18px;
    margin-bottom: 50px;
}

input.refCodeInput {
    height: 55px;
    width: 250px;
    background: #ece5ff;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #210080;
    font-size: 25px;
    font-weight: 600;
}

p.noRecipientErrorMsg {
    font-size: 16px;
    color: #868686;
}

p.noBankTxt.dark {
    font-size: 16px;
    color: black;
    text-align: center;
    max-width: 70%;
}

.refBtnGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    gap: 10px;
}

span.refBtn {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 55px;
    padding: 0 30px;
    background: #210080;
    color: white;
    border-radius: 30px;
    font-size: 21px;
}

span.actionSpan {
    min-height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: #ebe3ff;
    color: #210080;
}

span.billOptionSpnn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

p.billOptDesc {
    color: #808080;
    text-align: left;
}

h3.billOptonTitle {
    font-size: 19px;
    color: black;
    text-align: left;
}

.countrySelectOptonDiv {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 10px 0;
    padding-left: 15px;
    min-height: 50px;
}

input.selectBillPlan {
width: calc(100% - 40px);
    height: 70px;
    margin-bottom: 30px;
    border: 0;
    border-radius: 10px;
    padding: 0 20px;
    color: #212121;
    font-size: 18px;
    font-weight: 600;
    background: #eeeeee;
}

input.selectBillPlan::placeholder {
color: #545454;
font-size: 18px;    
}

span.actionSpan.home {
    height: 60px;
    width: 60px;
}

span.countrySelectSpan.active {
    background: #210080;
    color: white;
}

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

span.countrySelectSpan {
   display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    background: #d1c2fe;
    padding: 5px 10px;
    min-height: 30px;
    height: 30px;
    justify-content: center;
}

div.airtimeBoard {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    padding-bottom: 20px;
}

img.networkImg {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    opacity: 0.5;
    background: #b7b7b738;
}

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

.newInputGroup {
    width: calc(100% - 40px);
    margin-bottom: 30px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 10px;
    background: #eeeeee;
    border-radius: 10px;
}

span.phoneAirtimeInputSpan {
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    margin-bottom: 20px;
    height: 50px;
    background: #eeeeee;
}

input.airtimeNumberInput {
    width: calc(100% - 60px);
    height: 100%;
    font-size: 19px;
    font-weight: 600;
    background: 0;
}

span.seeBeneficiarySpan {
    display: flex;
    justify-content: flex-end;
    width: calc(100% - 40px);
}

h3.beneficiariesContactTxt {
    color: #210080;
    font-size: 18px;
    margin-bottom: 30px;
}

span.airtimeAmount {
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border: 0;
    padding: 10px;
    border-radius: 10px;
    height: 50px;
    background: #eeeeee;
}

button.amountPredictBtn {
    border: 0;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #210080;
    background: #dbdbff;
}

input.airtimeAmtInput {
    width: calc(100% - 80px);
    height: 100%;
    font-size: 19px;
    font-weight: 600;
    padding-left: 10px;
    background: 0;
}

.amountPredictBtnDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

button.airtimeBtn {
    margin-top: 20px;
    width: 90%;
    min-height: 65px;
    border: 0;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    background: #210080;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

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


p.inputLabel {
    width: 100%;
    font-size: 17px;
    color: black;
}

span.airtimeAmtCurrencySelect {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-right: solid #7c7c7c 2px;
}

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

img.pickContactImg {
    width: 40px;
    height: 40px;
}

p.currencyNmeDis {
    color: #210080;
    font-size: 19px;
    font-weight: 600;
}

img.networkImg.active {
    border: solid 5px #210080;
    width: 70px;
    height: 70px;
    opacity: 1;
    position: relative;
    transition: all 0.2s ease-in-out;
}

span.contactPickSpan {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contactListt {
    width: calc(100% - 20px);
    gap: 5px;
    display: flex;
    flex-direction: column;
    color: #4e4e4e;
    overflow: scroll;
    padding-bottom: 50px;
}

p.billCustomerName.dark {
    color: white;
    font-size: 17px;
    font-weight: 600;
}

span.betBillerSpan {
width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    margin-bottom: 30px;
    border-radius: 10px;
    padding: 0 10px;
    height: 70px;
    background: #eeee;
}

i.rrwdown {
    font-size: 21px;
    color: grey;
}

img.betBillerLogo {
    width: 40px;
    height: 40px;
    border-radius: 50px;
}

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

.electricityType {
    width: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    padding: 7px;
    background: #eaeaea;
    border-radius: 10px;
}

button.selectElectricityTypeBtn {
    height: 45px;
    width: 50%;
    border-radius: 10px;
    border: 0;
    background: #eaeaea;
    font-size: 19px;
    font-weight: 500;
    color: #210080; 
}

span.checkBxxSpn .checkBxxBtn {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50px;
    background: #f1f1f12e;
}

span.checkBxxSpn.active .checkBxxBtn {  
background: green;    
}

span.checkBxxSpn {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 2px #d1d1d1;
    border-radius: 50px;
    justify-content: center;
    padding: 3px;
    background: none;
}

span.checkBxxSpn.active {
border: solid 2px green;
}

img.electCompLogo {
    width: 40px;
    height: 40px;
    border-radius: 50px;
}

span.electCompList {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 0;
    border-radius: 10px;
}

span.electCompList:hover {
background: #eaeaea;    
}

span.tokenValidationSpan {
    width: calc(100% - 20px);
    margin-bottom: 30px;
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
}

p.billCustomerName {
    color: black;
    font-weight: 600;
    font-size: 17px;
    text-align: right;
    width: 80%;
}

img.noBillsImg {
    width: 60px;
    height: 60px;
    opacity: 0.6;
}

p.tokenValidationTxt {
    font-size: 19px;
    font-weight: 600;
    color: #210080;
}

button.selectElectricityTypeBtn.active {
    background: #210080;
    color: white;
}

h3.phoneList {
    padding: 10px 0;
    color: #555555;
}

p.selectCountryText {
    padding: 0;
    margin: 0;
    font-family: system-ui;
    font-weight: 500;
}

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

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

span.confirmBankDetailsBoxx {
display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 20px);
    padding: 15px 10px;
    background: #eaeaea;
    border-radius: 10px;    
}

img.noRecipientFoundImg {
    width: 50px;
    border-radius: 50px;
    opacity: 0.4;
}

span.searchWithdrawRecipirntInputSpan {
    width: calc(100% - 30px);
    display: flex;
    justify-content: space-between;
    background: #efefef;
    padding: 10px 15px;
    border-radius: 20px;
    min-height: 50px;
    align-items: center;
}

.withdrawRecipientList {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    overflow: scroll;
    position: relative;
}

input.searchWithdrawRecipientInput {
    width: 80%;
    height: 100%;
    background: 0;
    font-size: 18px;
    color: black;
}

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

.suggestedBankListDiv {
    width: 100%;
    display: flex;
    gap: 20px;
    overflow-x: scroll;
    padding-bottom: 15px;
}

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

img.bankIconImg {
    width: 35px;
    border-radius: 50px;
}

span.suggestedBankSpan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

p.suggestedBankNameTxt {
    font-size: 16px;
    font-weight: 500;
    color: #262626;
}

img.suggestedBankImg {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: #e5e5ff;
}

img.recipientBankLogo {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background: #eeeeff;
    margin-left: -20px;
    margin-bottom: -10px;
    border: solid 3px #eaeaea;
}

i.inputIcon {
    color: #929292;
    font-size: 18px;
}

.withdrawRecipientSearchDiv {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 2px #d4d4d4;
    border-radius: 10px;
    padding: 20px 10px;
    gap: 20px;
    max-height: 550px;
}

span.withdrawRecipientLogo {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: white;
    background: red;
    font-size: 25px;
}

span.withdrawRecipientLogoSpan {
    display: flex;
    align-items: flex-end;
}

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

span.withdrawRecipientSpanBox {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 20px);
    padding: 15px 10px;
    background: #eaeaea;
    border-radius: 10px;
}

h3.withdrawRecipientAccName {
    font-size: 16px;
    text-align: left;
    color: #393939;
}

p.withdrawRecipientBankName {
    color: #696969;
    font-size: 14px;
    text-align: left;
}

input.withdrawaccountnumberinput {
 width: calc(100% - 20px);
    height: 40px;
    border: solid 2px grey;
    padding: 10px;
    background: 0;
    border-radius: 10px;   
    font-weight: 600;
}

img.cardNfcImg {
    width: 20px;
    height: 25px;
}

input.withdrawAccountNumberInput {
    width: calc(100% - 20px);
    height: 40px;
    border: solid 2px grey;
    padding: 10px;
    background: 0;
    border-radius: 10px;
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 600;
}

p.withdrawInputLabel {
    width: 100%;
    text-align: left;
    font-size: 18px;
    color: #242424;
    font-weight: 500;
}

.balBox {
    width: calc(95% - 40px);
    height: 80px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #210080;
    border-radius: 10px;
    background-image: url(https://primitecoil.com/images/bckgrnd.png);
}

.balDiv {
    gap: 3px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

p.balTitle {
    color: #e6e6e6c2;
    font-size: 15px;
}

span.inputSpn {
    width: 100%;
    display: flex;
    align-items: center;
}

img.countryFlagImgBase {
    border-radius: 5px;
    height: 20px;
    width: 30px;
}

section.mainScreen {
    width: 100%;
    height: 100%;
    min-height: min-content;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

span.inputSpn.phone {
margin-top: 10px;    
}

i {
    display: flex;
}

input.input100 {
    height: 40px;
    width: 100%;
    background: 0;
    font-size: 19px;
    color: black;
    font-weight: 500;
}

label.label100 {
    font-size: 18px;
    font-family: system-ui;
    font-weight: 500;
    color: #210080;
}

span.returnSpan {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ebe4ff;
    color: #210080;
    font-size: 25px;
}

i.returnIcon {
    display: flex;
}

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






span.countryInput {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    background: #3404ce54;
    border-radius: 10px;
}

button.btn.disabled {
    background: #d5c8ff;
}

img.disCoutryFlgImg {
    height: 25px;
    width: 40px;
    border-radius: 5px;
}

div.closeModal {
    width: 100%;
    height: 100%;
}

span.selectCountrySpnn {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 12px 0;
}

.btnSpinner {
width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-top: 2px solid #3404ce;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.countryInputDiv {
    width: 80%;
    max-width: 400px;
    background: #e8e0ff;
    border-radius: 20px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

p.countryDialCode {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: black;
    font-family: system-ui;
}

div.modal100 {
    width: 100%;
    height: 100%;
    position: fixed;
    background: white;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
      transition: transform 0.3s ease;
  touch-action: none;
  will-change: transform;
}


@keyframes bounceBack {
  0%   { transform: translateY(var(--bounce-start, 0px)); }
  50%  { transform: translateY(-15px); }
  70%  { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

.modalTop {
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
}

.modalTitleDiv600 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

img.networkImg.active::after {
  content: "✔";
  font-size: 14px;
  color: #fff;
  background: #2196F3;
  border-radius: 50%;
  padding: 2px 5px;
  position: absolute;
  top: -8px;
  right: -8px;
}

.modalContent.cardOtion {
    width: 95%;
    min-height: auto;
    max-height: 85%;
    border-radius: 20px;
    margin-bottom: 30px;
    overflow: hidden;
}

section.baseSection.modal {
    position: fixed;
    top: 0;
    z-index: 100;
}

i.transIcco {
    color: #210080;
    margin-right: 15px;
    font-size: 25px;
}

p.billOptonTitle {
    font-size: 19px;
    color: #545454;
    font-weight: 600;
    margin-left: 10px;
}

input.currencySelectCheckbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: grey;
    border: 2px solid grey;
}

img.currencyFlagg {
    height: 40px;
    width: 40px;
    border-radius: 50px;
}

button:hover {
opacity: 0.5;
}

span.billsSpan:hover {
background: #edf7ff;  
border-radius: 10px;
}

span.billsSpan.dark:hover {
    background: #414141;
    border-radius: 10px;
}

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

h3.modalTitle600 {
    font-size: 21px;
    color: #383838;
}

h3.modalTitle {
    margin-left: -40px;
    font-size: 21px;
    color: black;
}

p.resetPassTxt {
    text-align: right;
    width: calc(80% + 20px);
    font-weight: 600;
    font-size: 17px;
    color: #210080;
}

input.input100.phone {
    font-weight: 600;
    letter-spacing: 1px;
}

.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */

  overflow: auto;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

p.inputPreTxt {
    background: 0;
    font-size: 19px;
    color: black;
    font-weight: 500;
}

div.modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-top: 15px;
    position: fixed;
    width: 100%;
    top: 0;
    background: #000000ab;
    z-index: 100000;
}

.modalContent {
    width: 100%;
    height: auto; 
    max-height: 90%;
    min-height: auto;
    background: white;
    padding: 0;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

hr.closeModal {
    border: solid 1px #acacac;
    width: 60px;
    margin: 20px 0;
    border-radius: 50px;
}

.reverralInputCheck {
    display: flex;
    align-items: center;
    width: calc(80% + 20px);
    justify-content: flex-start;
    margin-bottom: 20px;
}

input.referralCheckBox {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 25px;
    accent-color: #210080;
}

p.referralTxxt {
    font-size: 17px;
    color: black;
}

div.countryLstBoby {
    width: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: max-content;
    overflow-y: scroll;
}

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

img.countryFlagSmll {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

p.bankSelectNameDis {
    margin: 0;
    padding: 0;
    font-family: system-ui;
    color: #2a2a2a;
    font-weight: 600;
    font-size: 17px;
}

div.messageModal {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #00000085;
    top: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

img.messageIcon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 10px;
}

input.inputOtp.phone:valid:not(:placeholder-shown) {
background: #210080;    
}

input.inputOtp::placeholder {
color: #ded3ff00;
}

label.label {
    margin-bottom: 15px;
    font-family: system-ui;
    font-size: 17px;
    color: #210080;
    font-weight: 500;
}

button.msgBtnn {
    height: 50px;
    width: 150px;
    border: 0;
    border-radius: 10px;
    background: #210080;
    color: white;
    font-size: 17px;
    font-weight: 500;
}

img#successIconn {
    padding: 5px;
    background: #e5dcff61;
}

p.messageTxxt {
   margin-bottom: 30px;
    font-size: 19px;
    color: #2f2f2f;
    text-align: center;
}

input.inputOtp {
    height: 40px;
    width: 40px;
    background: #ded3ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #210080;
}

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

input.inputOtp:focus {
border: solid 2px #210080;    
}

img#errorIconn {
    padding: 10px;
    background: #fdeaea54;
}

.messageModalCont {
    width: calc(90% - 20px);
    background: white;
    border-radius: 20px;
    min-height: 100px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

input.searchCountryInput {
    width: calc(90% - 20px);
    margin-bottom: 20px;
    min-height: 40px;
    border-radius: 10px;
    border: solid #b3b3b3 2px;
    padding: 5px 10px;
}

input.searchCountryInput:focus {
    border: solid 2px #210080;
}  

span.topRghtSpann {
    padding-right: 10px;
}

i.copyTagIcon {
    margin-left: 5px;
}

h3.transHistryTxt {
    color: #210080;
    font-size: 21px;
}


/* DARK MODE */

section.baseSection.dark {
    background: black;
}

h3.transHistryTxt.dark {
    color: white;
}

img.pickContactImg.dark {
    background: #d1c2fe;
    border-radius: 10px;
    padding: 2px;
}

span.indicator.dark {
    background: white;
}

h2.refTitle.dark {
    color: white;
}

p.refDesc.dark {
    color: #b4b4b4;
}

h4.logoutLnk.dark {
    color: white;
}

h3.nameGreeting.dark {
    color: white;
}

p.indexGreeting.dark {
    color: #b4b4b4;
}

button.keyPadBtn.dark {
    background: #adadad2e;
    color: white;
}

span.pinValidationSpan.dark {
    background: #d5d5d54f;
}

h2.walletBoxAmtDis.dark {
    color: white;
}

h4.walletBoxCurrencySym.dark {
    color: white;
}

.walletBox.dark {
    background: #535353;
}

p.messageTxxt.dark {
    color: white;
}

.messageModalCont.dark {
    background: #333333;
}

.modalContent.pinAuth.dark {
    background: #333333;
}

h3.modalTitle3.dark {
    color: white;
}

h2.screenTitleTxt.dark {
    color: white;
}

p.screenTitleDescrption.dark {
    color: #cccccc;
}

input.selectBillPlan.dark {
    background: none;
    border: solid 2px white;
    color: white;
}

h3.phoneList.dark {
    color: white;
}

input.selectBillPlan.dark::placeholder {
    color: #8a8a8a;
}

p.modalSubTit.dark {
    color: #b8b8b8;
}

div.modal100.dark {
    background: black;
}

h3.modalTitle.dark {
    color: white;
}

h4.currencyDisNm.dark {
    color: white;
}

h3.modalTitle2.dark {
    color: white;
}

hr.closeModal.dark {
    color: white;
}

.modalContent.cardOtion.dark {
    background: #333333;
}

hr.closeModal.dark {
    border: solid 1px #ffffff;
}

p.billOptonTitle.dark {
    color: white;
}

h3.notifyTitle.dark {
    color: white;
}

p.notifyMsg.dark {
    color: #b8b8b8;
}

p.notifyTmeStamp.dark {
    color: #d0d0d0;
}

h4.walletBalDisSel.dark {
    color: #adadad;
}

input.currencySelectCheckbox.dark {
    border: white;
    color: white;
}

span.pinValidationSpan.dark.active {
    background: #ffffff;
}

h2.formTitleHead.dark {
    color: white;
}

p.formDescrp.dark {
    color: #9f9f9f;
}

p.loginBtm.dark {
    color: #b1b1b1;
}

.recipientBoxx.dark:hover {
    background: #202020;
}

span.electCompList.dark {
    background: #414141;
}

h3.modalTitle.dark {
    color: white;
}

h2.formTitleHead.dark {
    color: white;
}

span.airtimeAmtCurrencySelect.dark {
    border-right: solid #959595 2px;
}

p.formDescrp.dark {
    color: #c2c2c2;
}

.confirmBalDiv.dark {
    background: #242424;
}

h3.confirmationAmountTxx.dark {
    color: white;
}

p.confirmAmountTxxtDescr.dark {
    color: #bababa;
}

p.confirmTransTitleTxt.dark {
    color: #e0e0e0;
}

p.confirmTransTxtResult.dark {
    color: white;
}

h3.confirmPaymentMethodTitleTcxt.dark {
    color: white;
}

p.confirmBalInfoTxt1.dark {
    color: #d4d4d4;
}

p.confirmBalInfoTxt2.dark {
    color: white;
}

button.confirmationBtn.dark {
    background: #daceff;
    color: #210080;
}

p.passValidationTxt {
    color: #d3d3d3;
}

h2.formTitleHead.dark {
    color: white;
}

.depositNoticeBoard.dark {
    background: #2c2c2c;
    border: 0;
}

.depositAccountBoard.dark {
    background: #2c2c2c;
    border: 0;
}

button.shareAccountDetails.dark {
    background: #ebe4ff;
    color: #210080;
}

p.depositNoticeText.dark {
    color: #e3e3e3;
}

.transBoxx.dark {
border-bottom: 0;
}

h3.depositAccTxt.dark {
    color: white;
}

p.depositAccTitle.dark {
    color: #cccccc;
}

i.copyAccIcon.dark {
    color: white;
}

p.formDescrp.dark {
    color: #c3c3c3;
}

h2.formTitleHead.dark {
    color: white;
}

span.betBillerSpan.dark {
border: 0;
background: #4b4b4b;
}

p.noBankTxt.dark {
    color: white;
}

h3.betBillerNme.dark {
    color: white;
}

i.rrwdown.dark {
    color: white;
}

p.formDescrp.dark {
    color: #b8b8b8;
}

button.topScreenBtn.dark {
    background: #ebe3ff;
    color: #210080;
}

label.label.dark {
    color: white;
}

section.mainScreen.dark {
    background: #303030;
}

.screenTopp.dark {
    background: black;
}

h3.screenTitle.dark {
    color: white;
}

h3.timeFrame.dark {
    color: white;
}

img.qrCode.dark {
    background: white;
    padding: 10px;
}

.promptBody.dark {
    background: #4b4b4b;
}

p.logoutPromptTxt.dark {
    color: white;
}

img.networkImg.active.dark {
    border: solid 5px white;
}

input.airtimeNumberInput.dark {
    background: no-repeat;
    color: white;
}

span.phoneAirtimeInputSpan.dark {
    border: solid 2px white;
    background: 0;
}

p.inputLabel.dark {
    color: white;
}

h3.billOptonTitle.dark {
    color: white;
}

span.billsSpan.dark {
    border-bottom: solid 1px grey;
}

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

h2.noCardTitle.dark {
    color: white;
}

h3.cardPolicyTitle.dark {
    color: white;
}

p.cardPolicyDesc.dark {
    color: #c8c8c8;
}

p.cardLabel.dark {
    color: white;
}

p.billOptDesc.dark {
    color: #c4c4c4;
}

input.airtimeAmtInput.dark {
    background: none;
    color: white;
}

span.airtimeAmount.dark {
    border: solid 2px white;
    background: 0;
}

h3.beneficiariesContactTxt.dark {
    color: white;
}

span.colorPicker.dark {
    background: black;
}

span.colorPicker.dark.active {
    border: 3px solid white;
}

.cardInfoBox.dark {
    background: #333333;
    border: 0;
}

h3.cardInfoBoxTitle.dark {
    color: white;
}

p.cardInfoTitleTxt.dark {
    color: #dbdbdb;
}

h3.cardInfoMainTxt.dark {
    color: white;
}

i.copyCardInfo.dark {
    color: white;
}

span.innerColorPicker.dark {
    border: solid 1px white;
}

span.fundCardAmountSpan.dark {
    border: solid 2px white;
}

h3.billOptonTitle.red.dark {
    color: red;
}

p.billOptDesc.red.dark {
    color: #ff5d5d;
}

span.actionSpan.red {
    background: #ffdfdf;
}

p.fundCardWalletCurrency.dark {
    color: white;
}

.newInputGroup.dark {
background: #333333;
}

p.cardCreateBalDisTitle.dark {
    color: #e2e2e2;
}

h3.cardCreateBalDis.dark {
    color: white;
}

button.createCardBtnn.dark {
    background: #ebe4ff;
    color: #210080;
}

.recieptFirstDivv.dark {
    background: #222222;
}

.recieptPaymentDetails.dark {
    background: #222222;
}

.receiptContactDiv.dark {
    background: #222222;
}

p.recieptTitleTop.dark {
    color: #c2c2c2;
}

h4.transDetlsTitle.dark {
    color: white;
}

h4.recieptSupportTitle.dark {
    color: white;
}

p.recieptSupportDesc.dark {
    color: #ababab;
}

i.recieptArrowIcon.dark {
    color: white;
}

p.transTitleTxt.dark {
    color: #d3d3d3;
}

p.transTableData.dark {
    color: white;
}

p.noRecipientErrorMsg.dark {
 color: white;   
}

h3.recieptTitleNme.dark {
    color: white;
}

p.currencyNmeDis.dark {
    color: white;
}

.tagDisDiv.dark {
    border: solid 2px white;
}

.electricityType.dark {
    background: #ffffff36;
}

button.selectElectricityTypeBtn.dark {
    background: none;
    color: white;
}

span.confirmBankDetailsBoxx.dark {
    background: black;
}

img.recipientBankLogo.dark {
    border: solid 3px black;
}

button.selectElectricityTypeBtn.active.dark {
background: #ddd1ff;
    color: #210080;
}

h3.electCompName.dark {
    color: white;
}

input.fundCardAmountInput.dark {
    color: white;
}

p.tokenValidationTxt.dark {
    color: white;
}

h3.tagNameDis.dark {
    color: white;
}

button.msgBtnn.dark {
    background: #d1c2fe;
    color: #210080;
}

.moreProfile.dark {
    background: #ffffff2e;
}

.moreBox.dark {
    background: #ffffff3b;
    border: 0;
}

span.searchWalletsSpan.dark {
    border: solid 2px white;
}

p.moreOptTtle.dark {
    color: white;
}

i.moreArrow.dark {
    color: white;
}

h3.sectionTitle.dark {
    color: #cccccc;
}

section.mainScreen.dark {
    background: black;
}

p.moreFullname.dark {
    color: white;
}

div.paymentReceiptModal.dark {
    background: black;
}

.cardBodyBox.black.dark {
    background-color: black;
}

i.selectContact.dark {
    color: #e0d6ff;
}

i.receptCross.dark {
    color: white;
    border: solid 2px white;
}

input.inputOtp.dark {
    background: #ded3ff61;
    color: #21008000;
}

.bottomNav.dark {
    background: black;
    box-shadow: none;
}

i.searchIcon.dark {
    color: #d6d6d6;
}

button.generateDepoAccBtn.dark {
background: #d1c2fe; 
color: #210080;
}

input.searchWalletInput.dark {
    color: #d7d7d7;
}

div.navBox.active.dark {
    color: white;
}

div.closeModalDiv {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    flex-direction: column;
}

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

button.filterTransBtn {
    height: 50px;
    width: 80%;
    max-width: 400px;
    border-radius: 20px;
    font-size: 17px;
    font-weight: 500;
    color: white;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #210080;
}

button.filterTransBtn.dark {
    background: #e3d9ff;
    color: #210080;
}

filterInput.dark {
    border: solid 2px white;
}

label.flterLabel.dark {
    color: white;
}

i.filterDateIcon.dark {
    color: white;
}

p.filterDateInputTxt.dark {
    color: white;
}

i.filterDateIcon {
    font-size: 19px;
    color: #210080;
}

p.filterDateInputTxt {
    color: #4f4f4f;
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

label.flterLabel {
    font-size: 16px;
    color: grey;
    font-weight: 500;
}

p.noDataText.dark {
    color: white;
}

div.bonusDiv {
    position: fixed;
    top: 0;
    background: white;
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    overflow-y: scroll;
}

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

span.bonusTimeCountSpan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    border: solid 2px #7e7e7e;
    padding: 15px;
    border-radius: 10px;
}

.bonusDescrpt {
    color: #4b4b4b;
    font-size: 20px;
}

span.bonusBeneInner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px; 
}

i.bonusCancel {
    font-size: 23px;
    color: #ffa6a6;
}

button.bonusBtn {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #210080;
    border-radius: 50px;
    width: 100%;
    margin-bottom: 20px;
    color: white;
    font-size: 17px;
    font-weight: 600;
}

.bonusBeneList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

h3.bonusTitle {
    font-size: 17px;
    color: black;
}

.bonusCountDiv {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

span.bonusBeneSpan {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: flex-start;
}

.bonusTopGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.bonusImgDiv {
    width: 100%;
    min-height: 120px;
    background-color: #dfe8ff;
    border-radius: 0px 0 20px 20px;
    background-image: url(../images/bckk.jpg);
    background-size: cover;
    background-position: center;
}

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

p.bonusWriteupTxt {
    font-size: 15px;
    color: #6a6a6a;
}

h3.bonusWriteupHead {
    font-family: sans-serif;
    font-size: 24px;
    line-height: 36px;
    color: black;
}

span.bonusBtn {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #210080;
    border-radius: 10px;
}

p.bonusBtnTxt {
    color: white;
    font-weight: 600;
    font-size: 18px;
}

h3.timeWindow {
    olor: #210080;
    font-weight: 800;
    font-size: 18px;
}

.bonusDescrpt {
    font-size: 16px;
    color: #747474;
}

i.closeBonus {
margin: 10px;
font-size: 30px;
color: #ffffffb8;
}

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

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

label.flterLabel {
    font-family: sans-serif;
    color: grey;
    font-size: 17px;
    font-weight: 500;
}

#startDate, #endDate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;         /* invisible but clickable */
  cursor: pointer;    /* show pointer */
}


div.filterInputGroupSpan {
    max-width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.filterInputGroupdvv {
    width: calc(100% - 30px);
    display: flex;
    justify-content: space-around;
}

span.filterInput {
    width: calc(100% - 10px);
    max-width: calc(100% - 10px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    height: 45px;
    border: solid 2px grey;
    padding: 0 10px;
    border-radius: 10px;
}

button.airtimeBtn.dark {
background: #d1c2fe;
    color: #210080;
}

div.navBox.dark {
    color: #ffffff94;
}

i.fingerprint.dark {
    color: white;
}

img.recipientCountryFlggDis.dark {
border: 3px black solid;    
}

input.inputOtp.dark:focus {
border: solid 2px white;    
}

body.dark {
    background: black;
}

img.sendMoneyRecipientCountryFlggDis.dark {
    border: 3px black solid;
}

h4.sendMoneyRecipientName.dark {
    color: white;
}

p.sendMoneyRecpientTag.dark {
    color: #d1d1d1;
}

p.sendMoneyCurrencyDis.dark {
    color: white;
}

i.sendMoneyArrow.dark {
    color: white;
}

span.sendMoneyAmountInputSpan.dark {
    border: solid 2px white;
}

input.sendMoneyAmoutDis.dark {
    color: white;
}

button.sendMoneyBtn.dark {
    background: #ebe4ff;
    color: #210080;
}

button.sendMoneyKey.dark {
    color: white;
}

section.pinAuthScreen.dark {
    background: black;
}

i.transIcco.dark {
color: white;
}

p.xchngeRteTxt.dark {
    color: #b6b6b6;
}

h3.xchangeDis.dark {
    color: white;
}

.currencyConvertDiv.dark {
    background: #474747;
    box-shadow: none;
}

.countryConvertName.dark {
    color: white;
}

input.convertInput.dark {
    color: white;
}

p.noNotifications.dark {
    color: white;
}

span.converterSelect.dark {
    border: solid 2px white;
    background: black;
}

h4.transactionTitleTxt.dark {
    color: white;
}

p.suggestedBankNameTxt.dark {
    color: #d6d6d6;
}

p.transactionDate.dark {
    color: #b7b7b7;
}

p.withdrawInputLabel.dark {
    color: white;
}

input.withdrawAccountNumberInput.dark {
    color: white;
    border: solid 2px white;
}

.withdrawRecipientSearchDiv.dark {
    border: 0;
    background: #171717;
}

span.searchWithdrawRecipirntInputSpan.dark {
    background: black;
    color: white;
    border: solid 2px white;
}

span.withdrawRecipientSpanBox.dark {
    background: black;
}

h3.withdrawRecipientAccName.dark {
    color: white;
}

p.withdrawRecipientBankName.dark {
    color: #d1d1d1;
}

i.inputIcon.dark {
    color: white;
}

input.searchWithdrawRecipientInput.dark {
    color: white;
}

p.transactionDescr.dark {
    color: #e1e1e1;
}

.modalContent.dark {
    background: #333333;
}

div.hide,span.hide,button.hide,section.hide, p.hide, i.hide {
    display:none;
}

div.movedown {
transform: translateY(100%);    
}