/*------------------------------------------------------------------Project: The Squirrel AppAuthor: Mukesh Kumar    Primary use:  Online Appointment App-------------------------------------------------------------------*//*----------------Table of contents Start---------------------------1.Default CSS2.Splash screen CSS3.Onboarding screen CSS4.Let you screen CSS5.Sign In screen CSS6.Sign up screen CSS7.Verify phone number screen CSS8.Confirm otp CSS9.Send money to all screen CSS10.Pay Bill  CSS 11.Send quick response2 CSS12.Language CSS13.About us CSS14.Personal info slider CSS15.Reason for using payfast CSS16.Finger Print CSS17.Forget password CSS18.Notification screen CSS19.Deactive account CSS20.Electricity bill 1 Screen21.Paid screen Screen22.Faq css23.Feedback section css24.Contact us css25.Notifiaction setting css26.Setting screen css27.Send money1 css28.Send money4 css29.Send money css30.Taxes css31.Marketing css32.Data privacy css33.Delete deactivate css35.Transfer to bank css36.Invite friend css37.Logout popup css38.Personal info css39.Activity css40.Delete account css41.Add new card css42.Old invoice css43.Invoice css44.Tracking css45.Preapproved-payment1 css46.Spilt css47.Transfer-to-bank-success css48.Line chart css49.Homescreen css50.Bottom tabbar css51.Face recognition css52.QR code payment css53.Create new password CSS54.Keyframe Animation---------Table of contents End-----------------------------------*//*------------------------ [Color codes] ------------------------                  Background:#ffffff, #7B51F1, #F5F5F5   Content:#5A5C5E, #121212         -------------------------------------------------------------------*//************************ 1.Default CSS ***************************/

html  {
     scroll-behavior:  smooth;
     -webkit-text-size-adjust:  100%;
     width:  100%;
     height:  100%;
    */}
*,  : :after,  ::before  {
        -webkit-box-sizing:  border-box;
        box-sizing:  border-box;
}
a:focus,  a  {
        outline:  none;
        text-decoration:  none;
        cursor:  pointer;
}
 h1, h2, h3, h4, h5, h6, p  {
        margin:  0;
        padding:  0;
}
body  {
        max-width:  600px;
        margin:  0 auto;
        height:  100%;
        background:  var(--1,  #FFF);
}
ul  {
        padding:  0;
        margin:  0;
}
.container {
        padding:  0 16px !important;
}
svg {
        vertical-align:  middle;
}
input {
        outline-width:  0;
        outline-offset:  0;
        outline:  0;
}
textarea {
      outline-width:  0;
      outline-offset:  0;
      outline:  0;
}
.nav-link:focus-visible  {
        outline:  none !important;
        box-shadow:  none !important;
}
.form-control:focus {
        box-shadow:  none !important;
        background:  var(--9,  #F5F5F5);
        border:  none;
}
.site-content  {
        width:  100%;
        height:  100%;
}
.mt-16 {
        margin-top:  16px !important;
}
.mt-32 {
         margin-top:  32px !important;
}
.mt-24 {
        margin-top:  24px !important;
}
.mt-12 {
        margin-top:  12px !important;
}
.mt-8 {
        margin-top:  8px !important;
}
.color-purple {
        color:  #7B51F1 !important;
}
.color-green {
        color:  #00A266 !important;
}
.color-black {
        color:  #121212 !important;
}
.color-red, .red-color {
        color:  var(--8,  #FB4945) !important;
 }
#verify-no-main, #notification-allow-main, #reason-using-payfast-main, #create-new-pin-main, #forget-password-main, #confirm-otp-main, #create-new-password-main, #send-money1, #delete-deactivate-main, #feedback-main, #personal-info, #add-new-card, #bank-and-card-main, #old-invoice, #add-new-item, #tracking-main, #preapproved-refund, #spilt8-main, #spilt7-main, #spilt6-main, #spilt5-main, #spilt4-main, #spilt3-main, #electricity1, #internet1, #transfer-to-bank-success, #transfer-to-bank-review, #send-money-successfull, #send-money-review, #Qrcode-main, #transfer-to-bank-main {
        padding-bottom:  100px !important;
}
#deactive-main, #payment-main, #add-tax-main, #delete-account, #activity-main .favourite-list {
        padding-bottom:  80px;
}
#invite-friend-main, #contact-us-main, #about-us, #data-privacy, #faq-main, #notification-setting, #language-screen, #currency-page, #security-main, #automatic-payment, #customer-main, #setting-main, #taxes-main, #request-payment, #send-money-main, #preapproved-payment1, .split2-main, #pay-bill {
        padding-bottom:  20px;
}
@font-face  {
        font-family:  "Satoshi";
        src:  url('../fonts/Satoshi-Medium.ttf');
        font-weight:  500;
        font-display:  swap;
        font-style:  normal;
}
.split6-screen-content-top, #old-invoice .feedback-form, .send-money4-top , .boder-bottom-activity, .chart-border, .border-main  {
        border-bottom:  2px solid #F2EEFE;
        padding-bottom:  24px;
        margin-bottom:  20px;
}
.delete-content, .marketing-content, .about-us-screen-full, .boder-top  {
        border-bottom:  1px solid #F2EEFE;
        padding-bottom:  24px;
}
.change-lan-sec, .delete-account-bottom, .setting-center-border, .send-money-contact-tab.setting-border, .notification-option-wrap, #reason-using-payfast-main .change-lan-sec:last-child, .photo-content-details a, .Char-content {
     border-bottom:  1px solid #F2EEFE;
}
.loader-mask-splash  {
        position:  fixed;
        top:  0;
        left:  0;
        right:  0;
        bottom:  0;
        background-color:  #fff;
        z-index:  99999;
}
.flash-btn, .upload-id-button-content, #loader, .mobile-message-main, .notification-icon-img, .paid-button1 a,.paid-button1 button, .paid-button2 a , .contact-us-mobile-btn, .notification-option-switch, .setting-icon, .contact-icon, .tax-plus-btn , .bank-img, .custom-radio-sel-friend, .logout-button-main, .add-item-btn a, .spilt8-btn, .transfer-logo, .pie-chart .chart-container, .concentric-circles, .circle , .scan1 , #splash-screen-page, .slider-sec-btn a, .back-btn, .form-sign-in-password-btn a , .otp-section, .verify-number-btn a, .pay-bill-img, .allow-btn a, .done-btn a, .shape, .select-img, .select-sec, .plus-id-btn a, .plus-id-btn, .verify-id-btn a {
        display:  flex;
        align-items:  center;
        justify-content:  center;
}
.bg-green {
        background:  #00A266 !important;
}
/************************ 2.Splash CSS ***************************/#splash-screen-page  {
        height:  100vh;
        width:  100%;
}
.splash-screen-content, .profile-img-content {
        text-align:  center;
}
.payfast-txt  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  64px;
        font-style:  normal;
        font-weight:  500;
        line-height:  60px;
}
.payfast-txt span  {
        color:  var(--2,  #7B51F1);
        font-weight:  500;
        line-height:  60px;
}
.payfast-title  {
           color:  #000;
        text-align:  center;
        font-family:  Satoshi;
        font-size:  24px;
        font-style:  normal;
        font-weight:  600;
        line-height:  1.4;
        margin-top:  25px;
}
/************************ 3.Onboarding CSS ***************************/.custom-slider-btn  {
        position:  relative !important;
        z-index:  2;
        padding:  0;
        margin:  0 !important;
        list-style:  none;
        height:  fit-content;
        width:  fit-content;
        margin-left:  auto !important;
        margin-right:  auto !important;
        margin-top:  40px !important;
}
.onboarding-slider .carousel-indicators [data-bs-target]  {
        margin-right:  8px;
        margin-left:  0 !important;
}
.custom-slider-dots  {
        width:  12px !important;
        height:  12px !important;
        border-radius:  8px !important;
        border:  none !important;
        background:  #5A5C5E !important;
}
.Onboarding-Screen-1  {
        position:  relative;
        margin-top:  50px;
}
.Onboarding-Screen-1-full  {
        position:  relative;
        height:  100vh;
}
.slider-sec-btn  {
        position:  fixed;
        width:  100%;
        left:  0;
        bottom:  0;
        background-color:  white;
        z-index:  5;
        padding: 16px;
}
.onboarding-slider  {
        padding-bottom:  100px;
}
.slider-sec-btn a  {
        width:  100%;
        border-radius:  12px;
        background:  var(--2,  #7B51F1);
        padding:  12px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
 }
.slider-txt h2  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  30px;
        font-style:  normal;
        font-weight:  600;
        line-height:  40px;
}
.slider-txt p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.slider-img , .verify-number-img, .otp-resend    {
        text-align:  center;
}
.onboarding-slider .carousel-item  {
        transition:  none !important;
}
.slider-txt {
           margin-top:  13px;
}
.custom-slider-dots.active {
        opacity:  1;
        background:  #121212 !important;
        width:  40px !important;
}
.loader-mask   {
        position:  fixed;
        top:  0;
        left:  0;
        right:  0;
        bottom:  0;
        background-color:  #ffffff;
        z-index:  99999;
}
/************************ 4.Let you screen CSS ***************************/.let-you-page-main {
        height:  100%;
        background:  #F2EEFE;
        position:  relative;
        overflow:  auto;
}
#let-you-main {
        padding-bottom:  100px;
        margin-bottom:  180px;
}
#sign-up-main {
        padding-bottom:  150px;
        margin-bottom:  278px;
}
.let-you-top  {
        background-image:  url(../images/let-you-screen/bg-img.png);
        background-position: center;
        background-size:  cover;
        background-repeat:  no-repeat;
        height:  213px;
        position:  relative;
          width:  100%;
        max-width:  100%;
}
.payfast-img_main {
        border-radius:  24px;
        background:  var(--1,  #FFF);
        width:  120px;
        height:  120px;
        padding:  16px 20px;
        margin-left:  auto;
        margin-right:  auto;
        margin-top:  20px;
        text-align:  center;
}
.back-btn  {
        border:  1px solid #ffffff;
        height:  36px;
        width:  36px;
        border-radius:  8px;
}
.let-you-top-wrap {
        padding-top:  30px;
}
.icons_main a  {
        border:  2px solid #F2EEFE;
        padding:  10px;
        border-radius:  8px;
}
.icons_main {
        display:  flex;
        justify-content:  center;
        column-gap:  24px;
}
.lets_you_in_box  {
        border-radius:  24px;
        background:  var(--1,  #FFF);
        padding:  32px 16px;
        margin:  0 16px;
        position:  absolute;
        width:  calc(100% - 30px);
        left:  0;
        right:  0;
        top:  -118px;
}
.lets_you_in_text  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  24px;
        font-style:  normal;
        font-weight:  600;
        line-height:  36px;
}
.or-section p  {
     color:  var(--5,  #5A5C5E);
     text-align:  center;
     font-family:  Satoshi;
     font-size:  18px;
     font-style:  normal;
     font-weight:  500;
     line-height:  24px;
     overflow:  hidden;
}
.or-section p:before  {
        right:  8px;
        margin-left:  -50%;
}
.or-section p:before,  .or-section p:after  {
        background:  #F2EEFE;
        content:  "";
        display:  inline-block;
        height:  2px;
        position:  relative;
        vertical-align:  middle;
        width:  50%;
}
.or-section p:after  {
        left:  8px;
        margin-right:  -50%;
}
.form-sign-in-password-btn a,  .form-sign-in-password-btn button  {
        width:  100%;
        border-radius:  12px;
        background:  var(--2,  #7B51F1);
        padding:  12px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
     border: 0px;
}
.help-inline {
    color:  red !important;
 }
.let-you-social-sec  {
        position:  relative;
        width:  100%;
}
#let-you-footer  {
        position:  fixed;
        width:  100%;
        left:  0;
        bottom:  0;
        padding:  16px;
        z-index:  99;
        max-width:  600px;
        margin:  0 auto;
        right:  0;
        background:  #F2EEFE;
}
.block-footer p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.block-footer a  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
/************************ 5.Sign In screen CSS ***************************/.iti__arrow:before  {
        content:  url(../svg/up-icon.svg) !important;
        position:  absolute;
        top:  0px;
}
#sign-in-main  {
        padding-bottom:  120px;
        margin-bottom:  220px;
}
.iti__arrow  {
        border:  0 !important;
        margin-left:  12px !important;
}
.iti__selected-dial-code  {
        display:  none;
}
.iti--separate-dial-code .iti__selected-flag  {
        background-color:  transparent !important;
        padding:  0 !important;
}
.mobile-form  {
        border-radius:  8px;
        background:  #F0F0F0;
        padding:  11px;
}
.sign-in-custom-input  {
        border:  none;
        background:  transparent;
        width:  100%;
        padding-left:  12px;
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.sign-in-custom-input::placeholder {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
#mobile_code  {
        margin-left:  20px;
        padding-right:  0;
}
.iti  {
        display:  flex !important;
}
/************************ 6.Sign up screen CSS ***************************/.form-details-sign-in  {
        border-radius:  8px;
        background:  #F0F0F0;
        padding:  11px;
        display:  flex;
}
/************************ 7.Verify phone number screen CSS ***************************/.verify-number-bottom  {
        border-radius:  24px 24px 0px 0px;
        background:  var(--1,  #FFF);
        margin-top:  20px;
        padding:  16px 16px 0px 16px;
        position:  relative;
}
.verify-number-main {
        background-image:  url(../images/let-you-screen/bg-img.png);
        background-size:  cover;
        background-repeat:  no-repeat;
        position:  relative;
        width:  100%;
        max-width:  100%;
}
div#upload-id-page  {
        height:  100vh;
}
.verify-number-top-content {
        padding-top:  30px;
        display:  flex;
        align-items:  center;
        column-gap:  12px;
}
.header-title p  {
        color:  var(--1,  #FFF);
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.verify-txt p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.otp-section input  {
        width:  60px;
        height:  60px;
        text-align:  center;
        padding:  10px;
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  24px;
        font-style:  normal;
        font-weight:  500;
        line-height:  32px;
        border-radius:  30px;
        background:  var(--14,  #F2EEFE);
}
.otp-section  {
        column-gap:  11px;
}
.otp-section input:focus  {
        border-radius:  30px;
        border:  2px solid var(--2,  #7B51F1);
        background:  var(--1,  #FFF);
        box-shadow:  none !important;
}
.resend-txt1  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.resend-txt2  {
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
.verify-number-btn a,  .verify-number-btn button  {
        width:  100%;
        border-radius:  12px;
        background:  var(--2,  #7B51F1);
        padding:  12px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
     border: 0px;
}
.verify-number-btn {
        position:  fixed;
        bottom:  0;
        width:  100%;
        left:  0;
        right:  0;
        padding:  0 16px;
        padding-bottom:  20px;
        background:  white;
        z-index:  2;
}
.resend-txt2 a  {
        color:  var(--4,  #121212);
}
/************************ 8.Confirm otp CSS ***************************/#counter::after  {
        content:  ' Sec';
}
/************************ 9.Send money to all screen CSS ***************************/.search-text {
        background:  transparent;
        color:  white !important;
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        border:  0 !important;
        padding: 0;
}
.star-favourite a  {
        display:  block;
}
.search-text::placeholder {
     color:  rgb(255 255 255 / 64%) !important;
}
.search-icon {
        background:  transparent;
        border:  0 !important;
        padding:  0;
}
.contact-searchbar {
        border:  1px solid #ffffff;
        position:  relative;
        display:  flex;
        align-items:  center;
        flex-wrap:  nowrap;
        width:  100%;
        padding:  15px !important;
        justify-content:  space-between;
        border-radius:  16px;
        background:  linear-gradient(92deg,  rgba(255,  255,  255,  0.40) 0%,  rgba(255,  255,  255,  0.24) 100%);
        backdrop-filter:  blur(4px);
}
.seach-bar .form-control:focus {
        background:  transparent;
}
.contact-search {
        margin-top:  20px;
}
.voice-icon {
        text-align:  center;
}
.seach-bar {
        width:  80%;
}
.item-bookmark.active   {
        content:  url(../svg/fill-star.svg);
}
.send-money-contact-tab  {
        display:  flex;
        align-items:  center;
        column-gap:  16px;
        padding:  8px 0;
}
.contact-star, #Qrcode-main .bank-active-sec {
        margin-left:  auto;
}
.contact-profile img {
        border-radius:  50px;
}
.contact-details h3  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
.contact-details h4  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  18px;
        margin-top:  4px;
}
.custom-tab-contact  {
      width:  100%;
    width:  calc(100% - 30px);
      border-radius:  8px;
      border:  2px solid var(--6,  #FFAA01);
      background:  var(--1,  #FFF);
      position:  absolute;
      left:  0;
      z-index:  99;
      margin-top:  25px !important;
      margin:  0 auto;
      right:  0;
}
.custom-tab-contact button {
        width:  50%;
        border:  0 !important;
        border-top-left-radius:  0 !important;
          border-top-right-radius: 0 !important;
          color:  var(--6,  #FFAA01);
        text-align:  center;
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
        padding:  12px !important;
}
.custom-tab-contact .nav-link.active {
        background:  var(--6,  #FFAA01);
        margin-bottom:  auto !important;
        color:  var(--1,  #FFF);
}
.custom-tab-contact button:hover {
        color:  var(--6,  #FFAA01);
}
#send-money-contact  {
        margin-top:  40px !important;
        padding:  60px 16px 16px 16px !important;
}
#subscription-main .contact-searchbar {
        justify-content:  normal;
        column-gap:  8px;
}
#subscription-main .seach-bar {
        width:  100%;
}
.purple-edit-icon {
        filter:  brightness(0) saturate(100%) invert(29%) sepia(61%) saturate(1820%) hue-rotate(235deg) brightness(111%) contrast(91%);
}
/************************ 10.Pay Bill  CSS ***************************/.pay-bill-img  {
        width:  74px;
        height:  74px;
        border-radius:  37px;
}
.pay-bill-sec, .about-us-icon-wrapper  {
        display:  grid;
        grid-template-columns:  repeat(4,  1fr);
        gap:  16px;
}
.pay-bill-img.bg-1 , .pay-bill-img.bg-9 {
        background:  rgb(255 170 1 / 12%);
}
.pay-bill-img.bg-2 , .pay-bill-img.bg-12, .pay-bill-img.bg-15 {
     background:  rgb(251 73 69 / 12%);
}
.pay-bill-img.bg-3  {
        background:  rgb(34 211 238 / 12%);
}
.pay-bill-img.bg-4, .pay-bill-img.bg-10  {
     background:  rgb(0 162 102 / 12%);
}
.pay-bill-img.bg-5, .pay-bill-img.bg-13   {
     background:  rgb(123 81 241 / 12%);
}
.pay-bill-img.bg-6, .pay-bill-img.bg-11   {
     background:  rgb(249 115 22 / 12%);
}
.pay-bill-img.bg-7  {
        background:  rgb(0 162 102 / 12%);
}
.pay-bill-img.bg-8  {
        background:  rgb(132 204 22 / 12%);
}
.pay-bill-img.bg-14  {
     background:  rgb(6 182 212 / 12%);
 }
.pay-bill-img.bg-16  {
        background:  rgb(18 18 18 / 12%);
}
.pay-bill-name  {
        overflow:  hidden;
        color:  var(--4,  #121212);
        text-align:  center;
        text-overflow:  ellipsis;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        margin-top:  8px;
}
.pay-bill-sec a  {
        margin-right:  auto;
        margin-left:  auto;
}
/************************ 11.Send quick response2 CSS ***************************/.allow-btn a  {
        width:  100%;
        border-radius:  12px;
        background:  var(--2,  #7B51F1);
        padding:  15px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.done-btn a {
        width:  100%;
        border-radius:  12px;
        background:  var(--2,  #F2EEFE);
        padding:  15px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--1,  #7B51F1);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.bottom-btn  {
        position:  fixed;
        width:  100%;
        left:  0;
        right:  0;
        bottom:  0;
        padding:  0 16px 16px 16px;
        background:  white;
}
#send-response2 {
        padding-bottom:  160px;
}
/************************ 12.Language CSS ***************************/.change-lan-sec  {
        padding:  16px 0px !important;
}
#currency-page .form-check-input.custom-input:checked, #language-screen .form-check-input.custom-input:checked, #spilt8-main .form-check-input.custom-input:checked, #reason-using-payfast-main .form-check-input.custom-input:checked  {
        background:  white;
        background-image:  url(../svg/purple-tick.svg);
        background-size:  cover;
        width:  20px;
        height:  20px;
        border:  none;
        mix-blend-mode:  darken;
}
.form-check-label.custom-lable  {
        display:  flex;
        align-items:  center;
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
 }
.custom-lable span  {
        padding-right:  8px;
}
#currency-page .form-check-input.custom-input, #language-screen .form-check-input.custom-input , #spilt8-main .form-check-input.custom-input, #reason-using-payfast-main .form-check-input.custom-input   {
        width:  18px;
        height:  18px;
        border-radius:  4px;
        border:  2px solid #7B51F1;
        float:  right !important;
}
.language-sel .curr-icon   {
        filter:  brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7500%) hue-rotate(348deg) brightness(108%) contrast(111%);
}
.change-lan-sec:last-child  {
        border:  navajowhite;
}
.form-check-input:focus  {
        box-shadow:  none !important;
}
.language-sel .form-check-label.custom-lable  {
        color:  #121212;
}
.form-check-input:active  {
        filter:  none;
}
.first-pt-0 {
        padding-top:  0 !important;
}
/************************ 13.About us CSS ***************************/.social-detail-about  {
        margin-left:  auto;
        margin-right:  auto;
}
.shape  {
        width:  74px;
        height:  74px;
        border-radius:  37px;
        cursor:  pointer;
}
.facebook-bg  {
        background:  rgb(59 89 153 / 8%);
}
.instragram-bg  {
        background:  linear-gradient(225deg,  rgb(110 62 255 / 7%) 0%,  rgb(224 49 77 / 7%) 47.92%,  rgb(254 215 84 / 7%) 100%);
}
.twitter-bg  {
        background:  rgb(29 161 242 / 7%);
}
.youtube-bg  {
        background:  rgb(255 0 0 / 7%);
}
.privacy-txt p  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.pt-10 {
        padding-top:  10px;
}
p.about-social-txt  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  12px;
        font-style:  normal;
        font-weight:  500;
        line-height:  16px;
        padding-top:  12px;
}
.social-txt  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
/************************ 14.Personal info slider CSS ***************************/.form-floating>.form-control:not(:placeholder-shown)~label::after {
        background:  transparent !important;
}
#msform .progress  {
        background:  #F2EEFE;
        width:  140px;
        height:  8px;
        margin-left:  auto;
        margin-right:  auto;
}
#msform .progress-bar  {
        background:  #7B51F1;
}
#msform  {
        text-align:  center;
        position:  relative;
        margin-bottom:  0;
}
#msform fieldset:not(:first-of-type)  {
        display:  none;
}
#msform .action-button  {
        width:  48px;
        height:  48px;
        background:  #F2EEFE;
        border:  0 none;
        border-radius:  12px;
        cursor:  pointer;
        padding:  10px 5px;
        float:  right;
        position:  relative;
        margin-top:  24px;
}
.input-icon-next {
     background-image:  url(../svg/next-icon.svg) !important;
     background-repeat:  no-repeat !important;
       background-position:  center !important;
     }
.input-icon-previous {
        background-image:  url(../svg/previous-icon.svg) !important;
        background-repeat:  no-repeat !important;
          background-position:  center !important;
}
#msform .action-button-previous  {
     width:  48px;
     height:  48px;
     background:  #F2EEFE;
     border:  0 none;
     border-radius:  8px;
     cursor:  pointer;
     padding:  10px 5px;
     float:  left;
     position:  relative;
     margin-top:  24px;
}
.home-address-heading h2  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  24px;
        font-style:  normal;
        font-weight:  600;
        line-height:  36px;
}
.home-address-heading p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        margin-top:  12px;
}
#personal-info-slider {
        padding:  16px !important;
}
#file-input  {
        display:  none;
}
#files {
        display:  none;
}
.select-img {
        width:  48px;
        height:  48px;
        border-radius:  12px;
        background:  var(--2,  #7B51F1);
}
.select-sec {
        column-gap:  12px;
        margin-top:  24px;
}
.select-img img, .plus-id-btn img {
        filter:  brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7472%) hue-rotate(114deg) brightness(110%) contrast(98%);
}
.select-txt  {
        color:  var(--2,  #7B51F1);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.goverment-id-sec  {
        border-radius:  12px;
        background:  var(--9,  #F5F5F5);
        padding:  24px 16px;
}
.goverment-id-sec h3  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
        margin-bottom:  8px;
}
.goverment-id-sec p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.plus-id-btn a {
        width:  48px;
        height:  48px;
        border-radius:  12px;
        background:  var(--2,  #7B51F1);
        padding:  12px;
}
.plus-id-btn {
        column-gap:  12px;
}
.verify-id-btn a {
        width:  100%;
        border-radius:  12px;
        background:  var(--14,  #F2EEFE);
        padding:  15px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--2,  #7B51F1);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.verify-id-btn  {
        pointer-events:  none;
        cursor:  default;
        position:  absolute;
        width:  100%;
        bottom:  -100px;
        clear:  both;
        padding-bottom:  16px;
}
.verify-my-btn {
     pointer-events:  auto !important;
}
.finger-modal-content .modal-body  {
        padding:  12px 16px;
        bottom:  0;
        border-radius:  24px 24px 0px 0px;
        background:  var(--1,  #FFF);
}
.photo-custom-modal .modal-dialog {
        position:  fixed;
        top:  auto;
        right:  0;
        left:  0;
        bottom:  0;
        width:  100%;
        margin-left:  auto;
        margin-right:  auto;
        margin-bottom:  0;
}
.photo-type p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.photo-content-details a div:nth-child(1)  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.photo-content-details a  {
        display:  flex;
        align-items:  center;
        justify-content:  space-between;
        padding:  16px 0;
}
.card-btn {
        text-align:  center;
}
.photo-content-details:last-child {
        border-bottom:  none;
}
#photo-id-modal  {
        background:  linear-gradient(180deg,  rgba(18,  18,  18,  0.56) 0%,  rgba(18,  18,  18,  0.24) 100%);
        backdrop-filter:  blur(2px);
}
.finger-modal-content {
        border:  0;
}
.photo-custom-modal .modal.fade .modal-dialog  {
        transition:  transform .3s ease-out;
        transform:  translate(0,  0px);
        margin:  auto;
}
.card-btn button {
        background:  transparent;
        border:  navajowhite;
        padding:  0;
}
.hidden-text-button  {
        color:  transparent;
        text-indent:  -9999px;
        background:  #f0f0f0;
         width:  100px;
              height:  50px;
              border-radius:  10px;
         border:  none;
       }
/************************ 15.Reason for using payfast CSS ***************************/.we-txt {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
 }
.border-top {
        border-top:  2px solid #F2EEFE !important;
}
#reason-using-payfast-main .custom-lable {
        color:  var(--4,  #121212);
}
#reason-using-payfast-main .change-lan-sec {
        padding:  12px 0 !important;
}
#upload-id-main {
        background-image:  url(../images/upload-id/bg-img.png);
        background-size:  cover;
        background-repeat:  no-repeat;
        background-position:  center;
        width:  100%;
        height:  calc(100vh - 66px);
        position:  relative;
        border-radius:  24px 24px 0px 0px;
        margin-top:  20px;
}
.frame  {
        max-width:  768px;
        width:  100%;
        height:  100%;
        position:  relative;
        overflow:  hidden;
        border-radius:  24px 24px 0px 0px;
}
.frame img {
        width:  100%;
        height:  100%;
}
#upload-id-page .verify-number-top  {
        padding-bottom:  20px;
 }
.overlay  {
      position:  absolute;
      background-image:  url(../images/upload-id/overlay.png);
      background-position:  center;
      background-repeat:  no-repeat;
      background-size:  100% 100%;
      width:  100%;
      top:  0;
      right:  0;
      height:  100%;
      border-radius:  24px 24px 0px 0px;
}
.overlay.selfie-overlay {
        background-image:  url(../images/upload-id/selfie-overlay.png);
}
.upload-top h1 {
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
 }
.upload-top p {
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
 }
.upload-id-content {
     position:  absolute;
     height:  100%;
     width:  100%;
     padding:  16px 16px 0 16px;
     bottom:  0;
}
.flash-btn  {
        width:  48px;
        height:  48px;
        border-radius:  24px;
        background:  white;
}
.upload-id-button-content  {
        column-gap:  30px;
}
.upload-id-bottom {
        position:  relative;
        height:  calc(100% - 86px);
}
.upload-id-button {
        position:  fixed;
        width:  100%;
        bottom:  0;
        left:  0;
        right:  0;
        padding-bottom:  30px;
}
.scanner-border  {
        margin-top:  64px;
        text-align:  center;
}
.verify-txt  {
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
#loader  {
     color:  var(--6,  #FFAA01);
     text-align:  center;
     font-family:  Poppins;
     font-size:  36px;
     font-style:  normal;
     font-weight:  600;
     line-height:  36px;
 }
.loader-content {
        position:  fixed;
        width:  100%;
        left:  0;
        right:  0;
        margin-left:  auto;
        margin-right:  auto;
        padding-bottom:  30px;
        bottom:  0;
}
.finger-content-sec h2  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  24px;
        font-style:  normal;
        font-weight:  600;
        line-height:  36px;
}
.finger-content-sec p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.face-main .offcanvas-body {
        overflow-y:  hidden;
}
.loader, .finger-img-sec  {
        text-align:  center;
}
.sk-fading-circle  {
      width:  40px;
      height:  40px;
      position:  relative;
      margin-left:  auto;
      margin-right:  auto;
}
.sk-fading-circle .sk-circle  {
      width:  100%;
      height:  100%;
      position:  absolute;
      left:  0;
      top:  0;
}
.sk-fading-circle .sk-circle:before  {
      content:  '';
      display:  block;
      margin:  0 auto;
      width:  15%;
      height:  15%;
      background-color:  #7B51F1;
      border-radius:  100%;
      -webkit-animation:  sk-circleFadeDelay 1.2s infinite ease-in-out both;
      animation:  sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2  {
      -webkit-transform:  rotate(30deg);
      -ms-transform:  rotate(30deg);
      transform:  rotate(30deg);
}
.sk-fading-circle .sk-circle3  {
      -webkit-transform:  rotate(60deg);
      -ms-transform:  rotate(60deg);
      transform:  rotate(60deg);
}
.sk-fading-circle .sk-circle4  {
      -webkit-transform:  rotate(90deg);
      -ms-transform:  rotate(90deg);
      transform:  rotate(90deg);
}
.sk-fading-circle .sk-circle5  {
      -webkit-transform:  rotate(120deg);
      -ms-transform:  rotate(120deg);
      transform:  rotate(120deg);
}
.sk-fading-circle .sk-circle6  {
      -webkit-transform:  rotate(150deg);
      -ms-transform:  rotate(150deg);
      transform:  rotate(150deg);
}
.sk-fading-circle .sk-circle7  {
      -webkit-transform:  rotate(180deg);
      -ms-transform:  rotate(180deg);
      transform:  rotate(180deg);
}
.sk-fading-circle .sk-circle8  {
      -webkit-transform:  rotate(210deg);
      -ms-transform:  rotate(210deg);
      transform:  rotate(210deg);
}
.sk-fading-circle .sk-circle9  {
      -webkit-transform:  rotate(240deg);
      -ms-transform:  rotate(240deg);
      transform:  rotate(240deg);
}
.sk-fading-circle .sk-circle10  {
      -webkit-transform:  rotate(270deg);
      -ms-transform:  rotate(270deg);
      transform:  rotate(270deg);
}
.sk-fading-circle .sk-circle11  {
      -webkit-transform:  rotate(300deg);
      -ms-transform:  rotate(300deg);
      transform:  rotate(300deg);
 }
.sk-fading-circle .sk-circle12  {
      -webkit-transform:  rotate(330deg);
      -ms-transform:  rotate(330deg);
      transform:  rotate(330deg);
 }
.sk-fading-circle .sk-circle2:before  {
      -webkit-animation-delay:  -1.1s;
      animation-delay:  -1.1s;
 }
.sk-fading-circle .sk-circle3:before  {
      -webkit-animation-delay:  -1s;
      animation-delay:  -1s;
 }
.sk-fading-circle .sk-circle4:before  {
      -webkit-animation-delay:  -0.9s;
      animation-delay:  -0.9s;
 }
.sk-fading-circle .sk-circle5:before  {
      -webkit-animation-delay:  -0.8s;
      animation-delay:  -0.8s;
 }
.sk-fading-circle .sk-circle6:before  {
      -webkit-animation-delay:  -0.7s;
      animation-delay:  -0.7s;
 }
.sk-fading-circle .sk-circle7:before  {
      -webkit-animation-delay:  -0.6s;
      animation-delay:  -0.6s;
 }
.sk-fading-circle .sk-circle8:before  {
      -webkit-animation-delay:  -0.5s;
      animation-delay:  -0.5s;
 }
.sk-fading-circle .sk-circle9:before  {
      -webkit-animation-delay:  -0.4s;
      animation-delay:  -0.4s;
}
.sk-fading-circle .sk-circle10:before  {
      -webkit-animation-delay:  -0.3s;
      animation-delay:  -0.3s;
}
.sk-fading-circle .sk-circle11:before  {
      -webkit-animation-delay:  -0.2s;
      animation-delay:  -0.2s;
}
.sk-fading-circle .sk-circle12:before  {
      -webkit-animation-delay:  -0.1s;
      animation-delay:  -0.1s;
}
@keyframes sk-circleFadeDelay  {
      0%,  39%,  100%  {
     opacity:  0;
   }
  40%  {
     opacity:  1;
   }
 }
/************************ 16.Finger Print CSS ***************************/.scan  {
        position:  relative;
        display:  flex;
        flex-direction:  column;
        align-items:  center;
        background:  url(../images/finger-print/print-border.png);
        width:  220px;
        height:  220px;
        background-size:  300px;
        background-repeat:  no-repeat;
        background-size:  cover;
        margin-left:  auto;
        margin-right:  auto;
}
.scan .fingerprint  {
        position:  relative;
        width:  220px;
        height:  220px;
        background:  url(../images/finger-print/finger-print-img.png);
        background-size:  300px;
        background-repeat:  no-repeat;
        background-size:  cover;
}
.scan .fingerprint::before  {
        content:  "";
        position:  absolute;
        top:  0;
        left:  0;
        width:  100%;
        height:  100%;
        background:  url(../images/finger-print/finger-print-img.png);
        background-size:  300px;
        background-repeat:  no-repeat;
        background-size:  cover;
        animation:  animate 4s ease-in-out infinite;
        filter:  brightness(0) saturate(100%) invert(30%) sepia(94%) saturate(1008%) hue-rotate(229deg) brightness(109%) contrast(91%);
}
.finger-print-main .modal-dialog  {
        margin:  inherit !important;
        margin-right:  auto !important;
        margin-left:  auto !important;
}
.scan .fingerprint::after  {
        content:  "";
        position:  absolute;
        top:  0;
        left:  0;
        width:  100%;
        height:  4px;
        background:  FFAA01;
        border-radius:  8px;
        filter:  drop-shadow(0 0 20px #00D061) drop-shadow(0 0 60px #00D061);
        animation:  animate_line 4s ease-in-out infinite;
}
.sub-text  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
 }
.verify-number-btn.fingerprint-btn  {
        position:  relative;
        padding:  0;
}
.add-fingerprint p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.scanner_main  {
        padding-top:  120px;
        padding-bottom:  135px;
}
/*.circles, #homepage .home-activity {
        padding-bottom:  135px;
}
*/.skip-txt a  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.skip-txt {
        text-align:  center;
}
.finger-print-bottom  {
        position:  fixed;
        width:  100%;
        bottom:  0;
        left:  0;
        padding:  16px 16px;
        background:  white;
}
/************************ 17.Forget password CSS ***************************/.form-item  {
        position:  relative;
        margin-bottom:  15px;
}
.form-item input  {
        display:  block;
        width:  100%;
        height:  64px;
        background:  transparent;
        border:  solid 2px black;
        transition:  all .3s ease;
        padding-left:  80px;
        border-radius:  30px;
        outline:  none;
        padding-top:  5px;
        color:  grey;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.form-item label  {
        position:  absolute;
        cursor:  text;
        z-index:  2;
        top:  33%;
        left:  70px;
        padding:  0 10px;
        color:  green;
        transition:  all .3s ease;
        font-family:  Satoshi;
        font-weight:  500;
        line-height:  20px;
        font-size:  16px;
}
.form-item input:focus  {
        border:  2px solid #00D061;
}
.mobile-message-main  {
        position:  absolute;
        top:  8px;
        left:  8px;
        width:  48px;
        height:  48px;
        background-color:  #F2EEFE;
        border-radius:  50%;
}
.form-item input:focus+label,  .form-item input:valid+label  {
        font-size:  14px;
        top:  3px;
        color:  #00D061 !important;
}
.forget-password-form .form-floating>label {
        left:  70px;
}
.forget-password-form input {
        padding-left:  80px !important;
        background:  transparent !important;
        border-radius:  12px;
        border:  2px solid var(--14,  #F2EEFE) !important;
        background:  var(--1,  #FFF);
        height:  64px !important;
}
.forget-password-form .form-control:focus  {
        box-shadow:  none !important;
        background:  transparent !important;
        border:  2px solid var(--14,  #F2EEFE);
}
.forget-password-form .form-floating input:focus {
        border:  2px solid var(--2,  #7B51F1);
}
/************************ 18.Notification screen CSS ***************************/
.notification-icon-img  {
        width:  40px;
        height:  40px;
        border-radius:  32px;
}


.icon1 {
        background:  #F2EEFE;
}
.icon2  {
        background:  rgb(255 170 1 / 12%);
}
.icon3  {
        background:  rgb(251 73 69 / 12%);
}
.icon4  {
        background:  rgb(0 162 102 / 12%);
}
.nofication-content  {
        display:  flex;
        column-gap:  16px;
        align-items:  center;
 }
.notification-new {
        margin-left:  auto;
}
.new  {
        padding:  8px 12px;
        border-radius:  4px;
        background:  var(--7,  #00A266);
}
.new a {
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  12px;
        font-style:  normal;
        font-weight:  500;
        line-height:  normal;
        display:  block;
}
.notification-content h3  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
.notification-content p  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  18px;
        padding-top:  4px;
}
.now-txt {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  12px;
        font-style:  normal;
        font-weight:  500;
        line-height:  18px;
}
.notification-details  {
        border-bottom:  2px solid #F2EEFE;
        padding-bottom:  12px;
}
.notification-details:last-child {
        border-bottom:  none;
}
#notification-main {
        padding:  16px !important;
}
/************************ 19.Deactive account CSS ***************************/.deactive-account-sec h1  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
.deactivate-step p, .deactivate-step-list li   {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.deactivate-step-list li  {
        padding-top:  8px;
}
.deactivate-step-list {
        padding-left:  25px;
}
/************************ 20.Electricity bill 1 Screen ***************************/.electricity1-top  {
        border-bottom:  2px solid #F2EEFE;
}
.pay-txt  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  24px;
        font-style:  normal;
        font-weight:  600;
        line-height:  36px;
}
#electricity1 .pay-bill-img {
        margin-right:  auto;
        margin-left:  auto;
}
#electricity1 .pay-bill-name {
        padding-bottom:  24px;
}
.custom-input-id  {
        border:  none;
        background:  aqua;
        width:  100%;
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
            border-radius:  12px;
        background:  var(--9,  #F5F5F5);
        padding:  16px;
}
.custom-lbl-electricity  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
.bill-amount-content span:first-child {
        color:  var(--5,  #5A5C5E);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.bill-amount-content span:last-child {
        color:  var(--4,  #121212);
        text-align:  right;
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
}
.bill-amount-content {
        display:  flex;
        align-items:  center;
        justify-content:  space-between;
}
.electricity1-bottom.mt-24  {
        border-radius:  12px;
        border:  2px solid var(--2,  #7B51F1);
        background:  var(--1,  #FFF);
        padding:  16px;
}
.custom-select-internet select {
        width:  100%;
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        padding:  16px;
        border-radius:  12px;
        background-color:  var(--9,  #F5F5F5);
        border:  0;
}
.arrow-icon  {
        background:  url(../svg/up-icon.svg) no-repeat;
        background-position:  96% center;
        font-size:  18px;
        appearance:  none;
}
select:focus-visible  {
        outline:  0;
}
/************************ 21.Paid screen css ***************************/.paid-button1 a  {
        width:  100%;
        border-radius:  12px;
        background:  var(--2,  #7B51F1);
        padding:  12px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.paid-button1 button  {
        width:  100%;
        border-radius:  12px;
        background:  var(--2,  #7B51F1);
        padding:  12px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.paid-button2 a  {
        width:  100%;
        border-radius:  12px;
        background:  var(--14,  #F2EEFE);
        padding:  12px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--2,  #7B51F1);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.bill-paid-btn  {
        position:  fixed;
        width:  100%;
        bottom:  0;
        left:  0;
        right:  0;
        margin-left:  auto;
        margin-right:  auto;
        background:  white;
        padding: 16px;
        padding-bottom:  16px;
        box-shadow:  0px -4px 4px 0px rgba(18,  18,  18,  0.04);
}
#bill-paid {
        padding-bottom:  170px !important;
}
/************************ 22.Faq css ***************************/.nested-accordion  {
        cursor:  pointer;
        position:  relative;
}
.review-time p  {
        color:  var(--3,  #666);
        font-family:  Lato;
        font-size:  10px;
        font-style:  normal;
        font-weight:  500;
        line-height:  normal;
}
.nested-accordion h3  {
     color:  var(--4,  #121212);
     font-family:  Satoshi;
     font-size:  16px;
     font-style:  normal;
     font-weight:  700;
     line-height:  20px;
}
.nested-accordion .comment  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
 }
.nested-accordion h3:before  {
        content:  url(../svg/faq-plus.svg);
        position:  absolute;
        right:  0;
        color:  #FF4C3B;
        font-family:  Space Grotesk;
        font-size:  20px;
        font-style:  normal;
        font-weight:  700;
        line-height:  20px;
}
.nested-accordion h3.selected  {
      color:  var(--2,  #7B51F1);
      font-family:  Satoshi;
      font-size:  16px;
      font-style:  normal;
      font-weight:  700;
      line-height:  20px;
 }
.faq-txt1:before  {
        content:  url(../svg/up-arrow.html) !important;
}
.nested-accordion h3.selected:before  {
        content:  url(../svg/faq-minus.svg);
}
.faq-txt1.selected:before  {
        content:  url(../svg/faq-down.svg) !important;
}
.faq-txt1:before  {
        content:  url(../svg/up-icon.svg) !important;
}
/************************ 23.Feedback css ***************************/label  {
        display:  block;
}
.custom-textarea {
        width:  100%;
        padding:  16px;
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        border-radius:  12px;
        background:  var(--9,  #F5F5F5);
        border:  0;
}
textarea  {
        resize:  none;
}
/************************ 24.Contact us css ***************************/.contact-us-mobile-btn a  {
        border-radius:  8px;
        background:  rgb(123 81 241 / 8%);
        padding:  12px;
        width:  100%;
        display:  block;
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.contact-us-no {
        padding-left:  12px;
}
/************************ 25.Notifiaction setting css ***************************/.notification-option-wrapper  {
        display:  flex;
        align-items:  center;
        justify-content:  space-between;
        padding:  16px 0;
}
.notification-option-name p  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.notification-option-switch .switch  {
        position:  relative;
        display:  inline-block;
        width:  40px;
        height:  20px;
}
.notification-option-switch .slider  {
        position:  absolute;
        cursor:  pointer;
        top:  0;
        left:  4px;
        right:  0;
        bottom:  0;
        border:  1px solid rgb(102 102 102 / 20%);
        border-radius:  40px;
        -webkit-transition:  0.4s;
        transition:  0.4s;
}
.notification-option-switch .slider:before  {
        position:  absolute;
        content:  "";
        height:  18px;
        width:  18px;
        background:  #fff;
        border-radius:  22px;
        left:  0px;
        bottom:  0px;
        -webkit-transition:  0.4s;
        transition:  0.4s;
        border-radius:  22px;
        border:  0.5px solid #F0F0F0;
        box-shadow:  0px 3px 1px 0px rgba(0,  0,  0,  0.05),  0px 1px 1px 0px rgba(0,  0,  0,  0.08),  0px 3px 8px 0px rgba(0,  0,  0,  0.08);
}
.notification-option-switch input:checked + .slider  {
        background:  #7B51F1;
        border:  1px solid transparent;
}
.notification-option-switch input:checked + .slider:before  {
        transform:  translateX(16px);
}
.switch input  {
        opacity:  0;
        width:  0;
        height:  0;
}
p.notify-txt  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
/************************ 26.Setting screen css ***************************/.setting-header {
        display:  flex;
        justify-content:  space-between;
        width:  100%;
}
.setting-left {
        width:  50%;
        display:  flex;
        align-items:  center;
        column-gap:  12px;
}
.setting-right {
        width:  50%;
        justify-content:  end;
        display:  flex;
        align-items:  center;
        column-gap:  12px;
}
.setting-right span a {
        display:  flex;
}
.dots-icon {
        width:  36px;
        height:  36px;
        display:  flex;
        align-items:  center;
        justify-content:  space-around;
        border:  2px solid white;
        border-radius:  8px;
}
.setting-txt {
        color:  var(--1,  #FFF);
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.setting-top  {
        border-bottom:  2px solid #F2EEFE;
        padding-bottom:  16px;
}
.setting-title h3 {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.setting-icon  {
        width:  48px;
        height:  48px;
        background:  #F2EEFE;
        border-radius:  8px;
}
.setting-center-border  {
        height:  2px;
        background:  #F2EEFE;
        margin:  24px 0;
}
.border-none {
        border-bottom:  none !important;
        padding-bottom:  0 !important;
}
.setting-lanuage  {
        color:  var(--5,  #5A5C5E);
        text-align:  right;
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        display:  inline-flex;
        margin-right:  16px;
}
.diffrent-chat-dropdown  {
        display:  none;
}
.send-money-contact-tab  {
        cursor:  pointer;
}
.diffrent-chat-dropdown ul  {
        padding:  0;
        margin:  0;
        list-style-type:  circle;
        margin-left:  90px;
        margin-right:  30px;
        padding-bottom:  8px;
        margin-top:  -18px;
}
.diffrent-chat-dropdown ul li {
        border-bottom:  2px solid #F2EEFE;
        padding:  8px;
}
.diffrent-chat-dropdown ul li a  {
       color:  var(--4,  #121212);
       font-family:  Satoshi;
       font-size:  16px;
       font-style:  normal;
       font-weight:  500;
       line-height:  20px;
}
/************************ 27.Send money1 css ***************************/input[type=number]::-webkit-inner-spin-button,  input[type=number]::-webkit-outer-spin-button  {
         -webkit-appearance:  none;
        -moz-appearance:  none;
        appearance:  none;
        margin:  0;
 }
.enter-amount label, .total-txt  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.available-txt  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.enter-amount input {
        width:  100%;
        padding:  22px 12px;
        text-align:  center;
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  36px;
        font-style:  normal;
        font-weight:  500;
        line-height:  36px;
         border-radius:  12px;
        border:  2px solid var(--8,  #FB4945);
        background:  var(--1,  #FFF);
        border-style:  solid;
}
.enter-amount input:focus, .enter-amount input.active {
        border:  2px solid #00A266;
}
.fee-txt  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
/************************ 28.Send money4 css ***************************/.send-money4-top h1 {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  20px;
        font-style:  normal;
        font-weight:  600;
        line-height:  30px;
}
.send-money4-top p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.custom-radio  {
        position:  relative;
        margin-bottom:  0;
        border-radius:  12px;
        border:  2px solid var(--9,  #F5F5F5);
        background:  var(--1,  #FFF);
        padding:  16px !important;
}
#data-privacy .form-check-input:checked[type=radio], #delete-deactivate-main .form-check-input:checked[type=radio], #delete-account .form-check-input:checked[type=radio] , #transfer-to-bank-main .form-check-input:checked[type=radio]  {
        outline:  2px solid #FB4945;
        outline-offset:  4px;
        background:  #FB4945;
        border:  0;
        width:  11px;
        height:  11px;
        margin-right:  5px;
}
.custom-radio input  {
        right:  0;
}
.checkout-modal-lbl  {
        display:  inline-grid !important;
        padding:  16px 0;
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
.checkout-modal-lbl span {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        padding-right:  50px;
}
.custom-radio input  {
        position:  absolute;
        right:  25px;
        top:  0;
        bottom:  0;
        margin:  auto;
        width:  24px;
        height:  24px;
        border:  2px solid #121212;
}
.custom-radio.active {
        border:  2px solid var(--8,  #FB4945) !important;
 }
/************************ 29.Send money css ***************************/.sendmoney-top h1 {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  36px;
        font-style:  normal;
        font-weight:  600;
        line-height:  36px;
}
.sendmoney-top p {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.sendmoney-top.send-money4-top  {
        padding-bottom:  16px;
}
.contact-icon  {
        background:  var(--14,  #F2EEFE);
        padding:  13px;
        width:  74px;
        height:  74px;
        border-radius:  37px;
        margin-left:  auto;
        margin-right:  auto;
}
.send-money p  {
        color:  var(--4,  #121212);
        text-align:  center;
        text-overflow:  ellipsis;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.sendmoney-bottom-wrap  {
    /*    display:  flex;
    */    justify-content:  space-around;
        width:  100%;
}
.send-money  {
           width:  32%;
        display:  inline-block;
        margin-bottom:  22px;
}
.sendmomey-details  {
        display:  flex;
        align-items:  center;
        justify-content:  space-between;
        border-bottom:  2px solid #F2EEFE;
        padding-bottom:  12px;
}
.sendmomey-details span:first-child {
        color:  var(--5,  #5A5C5E);
        font-family:  Poppins;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.sendmomey-details span:last-child {
        color:  var(--4,  #121212);
        text-align:  right;
        font-family:  Poppins;
        font-size:  14px;
        font-style:  normal;
        font-weight:  600;
        line-height:  20px;
}
img.copied-icon  {
        margin-left:  8px;
}
.sendmoney-content  {
        border-radius:  12px;
        border:  2px solid var(--2,  #7B51F1);
        background:  var(--1,  #FFF);
        padding:  16px;
}
.sendmomey-details:last-child {
        padding-bottom:  0;
        border-bottom:  0;
}
/************************ 30.Taxes css ***************************/.tax-plus-btn  {
        width:  56px;
        height:  56px;
        background:  var(--2,  #7B51F1);
        border-radius:  26px;
        position: absolute;
        bottom:  0;
        right:  0;
        margin-bottom:  50px;
        margin-right:  16px;
}
#taxes-main .tax-plus-btn {
      margin-bottom:  30px;
}
 .tax-plus-btn img  {
        filter:  brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(299deg) brightness(106%) contrast(101%);
}
#taxes-main .sendmomey-details {
        padding:  16px 0 !important;
}
.taxes-screen-content a {
    display:  block;
     border-bottom:  solid 1px #e5e5e5;
     padding-bottom:  0px;
     padding-top:  9px;
}
#taxes-main .sendmomey-details:first-child {
        padding-top:  0 !important;
}
#taxes-main .sendmomey-details span:first-child, #taxes-main .sendmomey-details span:last-child {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
/************************ 31.Marketing css ***************************/.marketing-content p  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.marketing-content h2 {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
 }
.marketing-content .notification-option-wrapper {
        padding:  0;
}
.marketing-content .notification-option-name p {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
/************************ 32.Data privacy css ***************************/.data-privacy-content h1 {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
.privacy-content h2  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  17px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;margin-bottom: 10px;
}
.privacy-content p  {
        color:  #000;
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
            margin-bottom: 12px;
}

.privacy-content ul{    padding-left: 20px;
    margin-bottom: 15px;}
.privacy-content ul li{    margin-bottom: 8px;}
.privacy-content ul li a{}


.privacy-content  {
        border-radius:  12px;
        border:  2px solid var(--9,  #F5F5F5);
        background:  var(--1,  #FFF);
        padding:  16px;
}
.manage-txt  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
.manage-data-sec  {
        border-radius:  12px;
        border:  2px solid var(--9,  #F5F5F5);
        background:  var(--1,  #FFF);
        padding:  16px;
}
.manage-data-title h3  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
.manage-data-title p  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
/************************ 33.Delete deactivate css ***************************/.delete-content p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
/************************ 34.Send money review css ***************************/.purple-border {
        border-bottom:  2px solid #7B51F1;
}
.review-note h2 {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
 }
.review-note p {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
#send-money-review .sendmomey-details {
        padding-bottom:  16px;
}
.money-review-txt  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
form {
        margin-block-end:  0px;
}
/************************ 35.Transfer to bank css ***************************/.transfer-first  {
        display:  flex;
        align-items:  center;
        column-gap:  16px;
        border-bottom:  2px solid #F2EEFE;
        padding-bottom:  24px;
        padding-top:  24px;
}
.bank-img  {
        border:  1px solid #F2EEFE;
        width:  74px;
        height:  48px;
        border-radius:  8px;
}
.bank-details h2 {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
 }
.bank-card span:first-child  {
        color:  var(--7,  #00A266);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.bank-card span:last-child  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
#bank-and-card-main .bank-active-sec , #payment-main .bank-active-sec, #transfer-to-bank-main .bank-active-sec {
        margin-left:  auto;
}
.bank-card {
        margin-top:  4px;
}
.paid-button2 span img {
        filter:  brightness(0) saturate(100%) invert(35%) sepia(96%) saturate(2682%) hue-rotate(239deg) brightness(95%) contrast(100%);
        margin-right:  8px;
}
#bank-and-card-main .verify-number-btn span img {
     filter:  brightness(0) saturate(100%) invert(100%) sepia(13%) saturate(0%) hue-rotate(79deg) brightness(101%) contrast(101%);
      margin-right:  8px;
}
.pay-txt1  {
        color:  var(--7,  #00A266);
        text-align:  right;
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
#payment-main .transfer-first {
        padding-bottom:  16px;
        padding-top:  16px;
}
.transfer-first:first-child {
        padding-top:  0 !important;
}
#payment-main .bank-active-sec img {
        filter:  brightness(0) saturate(100%) invert(34%) sepia(31%) saturate(6894%) hue-rotate(144deg) brightness(102%) contrast(101%);
}
#payment-main .bank-details p {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        margin-top:  4px;
}
/************************ 36.Invite friend css ***************************/.invite-friend-wrapper  {
        display:  flex;
        align-items:  center;
        column-gap:  16px;
}
.friend-invite  {
        margin-left:  auto;
}
.friend-select input  {
        display:  none;
}
.custom-radio-sel-friend  {
        width:  61px;
        height:  34px;
        border-radius:  4px;
        border:  2px solid #7B51F1;
        cursor:  pointer;
        color:  var(--2,  #7B51F1);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  12px;
        font-style:  normal;
        font-weight:  500;
        line-height:  16px;
}
.friend-select input[type="checkbox"]:checked + label  {
        border-radius:  4px;
        border:  2px solid var(--2,  #7B51F1);
        background:  var(--2,  #7B51F1);
        color:  white;
}
.friend-name  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
.friend-no a  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  18px;
        margin-top:  4px;
}
.invite-img img  {
        border-radius:  50px;
}
.friend-no {
        margin-top:  4px;
}
/************************ 37.Logout popup css ***************************/.offcanvas.offcanvas-bottom  {
        border-radius:  24px 24px 0 0;
        padding:  12px 16px 30px 16px;
        height:  auto;
}
.offcanvas.offcanvas-bottom .offcanvas-header  {
        padding:  0;
        cursor:  pointer;
}
.logout-main .offcanvas-body  {
        padding:  0 !important;
}
.logout-text-pop  {
      color:  var(--4,  #121212);
      text-align:  center;
      font-family:  Poppins;
      font-size:  20px;
      font-style:  normal;
      font-weight:  600;
      line-height:  30px;
}
.sm-txt  {
     color:  var(--5,  #5A5C5E);
     text-align:  center;
     font-family:  Satoshi;
     font-size:  18px;
     font-style:  normal;
     font-weight:  500;
     line-height:  24px;
 }
.logout-button-main  {
        gap:  16px;
}
.logout-cancel  {
        color:  var(--2,  #7B51F1);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        width:  164px;
        height:  48px;
        border-radius:  12px;
        background:  var(--14,  #F2EEFE);
        border:  none !important;
}
.yes-logot  {
        border-radius:  12px;
        background:  var(--2,  #7B51F1);
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
 }
.offcanvas-backdrop.show  {
        opacity:  1 !important;
}
.offcanvas-backdrop  {
        background:  linear-gradient(180deg,  rgba(33,  43,  70,  0.56) 0%,  rgba(33,  43,  70,  0.24) 100%) !important;
        backdrop-filter:  blur(2px) !important;
}
.not-connect  {
        color:  var(--4,  #FF484D);
}
button.text-reset  {
        background:  transparent;
        color:  var(--text-color) !important;
        padding:  0;
        border:  0;
}
/************************ 38.Personal info css ***************************/.profile-edit-img  {
        text-align:  center;
        position:  relative;
        width:  120px;
        height:  120px;
        margin:  auto;
}
.profile-edit-img img  {
          border-radius:  50%;
        max-width:  120px;
        max-height:  120px;
        width:  100%;
        height:  auto;
}
.image-input  {
        position:  absolute;
        bottom:  6px;
        right:  0px;
}
.image-input input  {
        display:  none;
}
.image-button  {
        background:  black;
        padding:  8px;
        border-radius:  20px;
        cursor:  pointer;
}
.custom-icon-edit {
        position:  absolute;
        right:  16px;
        top:  35%;
        cursor:  pointer;
}
.personal-name {
        border-radius:  12px;
        background:  var(--9,  #F5F5F5);
        padding:  8px 16px;
        position:  relative;
}
.personal-name label {
        color:  var(--2,  #7B51F1);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.personal-name input {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        border:  0;
        width:  100%;
        background:  transparent;
        padding-right:  35px;
}

.personal-name textarea {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        border:  0;
        width:  100%;
        background:  transparent;
        padding-right:  35px;
}

/************************ 39.Activity css ***************************/.custom-tab-activity  {
        width:  100%;
        width:  calc(100% - 30px);
        border-radius:  8px;
        border:  2px solid var(--6,  #FFAA01);
        background:  var(--1,  #FFF);
        position:  absolute;
        left:  0;
        z-index:  99;
        margin-top:  25px !important;
        margin:  0 auto;
        right:  0;
}
.custom-tab-activity button  {
        width:  33.33%;
        border:  0 !important;
        border-top-left-radius:  0 !important;
        border-top-right-radius:  0 !important;
        color:  var(--6,  #FFAA01);
        text-align:  center;
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
        padding:  12px !important;
        border-right:  1px solid #ffaa01 !important;
}
.custom-tab-activity .nav-link.active  {
        background:  var(--6,  #FFAA01);
        margin-bottom:  auto !important;
        color:  var(--1,  #FFF);
}
.custom-tab-activity button:hover  {
        color:  var(--6,  #FFAA01);
}
.custom-tab-activity button:last-child {
        border-right:  0 !important;
}
.activity-date  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.all-details-name h3  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
.all-details-name p  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        margin-top:  4px;
}
.all-content-price p  {
        color:  var(--7,  #00A266);
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
.all-details-wrap  {
        display:  flex;
        justify-content:  space-between;
}
/************************ 40.Delete account css ***************************/.delete-account-top h1 {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
.delete-account-top p {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.delete-account-bottom  {
        display:  flex;
        justify-content:  space-between;
        padding:  16px 0;
}
.delete-account-bottom input, .bank-active-sec input  {
        width:  20px;
        height:  20px;
        border:  2px solid #121212;
        outline:  0;
        margin:  0;
}
.delete-select {
        display:  flex;
        align-items:  center;
}
.delete-account-trapping p  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.delete-account-trapping span  {
        color:  var(--4,  #121212);
}
.delete-account-trapping  {
        margin-top:  40px;
}
.delete-txt {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
/************************ 41.Add new card css ***************************/.demo-visa  {
        background-image:  url(../images/payment/visa-card.png);
        background-position:  center;
        background-repeat:  no-repeat;
        max-height:  200px;
        height:  100%;
        max-width:  343px;
        width:  100%;
        margin:  0 auto;
        border-radius:  24px;
        padding:  16px;
        display:  flex;
        flex-direction:  column;
        gap:  40px;
}
.card-hidden-number  {
     color:  var(--1,  #FFF);
     font-family:  Satoshi;
     font-size:  24px;
     font-style:  normal;
     font-weight:  500;
     line-height:  36px;
      letter-spacing:  1.2px;
}
.card-name-jessica  {
     color:  var(--1,  #FFF);
     font-family:  Satoshi;
     font-size:  16px;
     font-style:  normal;
     font-weight:  700;
     line-height:  24px;
     letter-spacing:  0.8px;
     text-transform:  uppercase;
     width:  100%;
     max-width:  170px;
     overflow:  hidden;
     text-overflow:  ellipsis;
     white-space:  nowrap;
}
.card-date-cvv  {
      color:  var(--1,  #FFF);
      text-align:  right;
      font-family:  Satoshi;
      font-size:  16px;
      font-style:  normal;
      font-weight:  700;
      line-height:  24px;
      letter-spacing:  0.8px;
      text-transform:  uppercase;
}
.new_password_input .form-item input  {
        border-radius:  8px;
        background:  #F0F0F0;
        border:  navajowhite;
        padding:  12px 16px;
        width:  100%;
        color:  #212B46;
        font-family:  "Space Grotesk",  sans-serif;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        margin-top:  8px;
}
.info-person  {
        color:  var(--3,  #67696B);
        font-family:  "League Spartan",  sans-serif;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        text-transform:  uppercase;
}
.new_password_input .form-item input::placeholder {
     color:  #212B46;
 }
.card-name-jessica-main  {
        display:  flex;
        justify-content:  space-around;
        column-gap:  25px;
}
.ui-datepicker-header a.ui-datepicker-next  {
        right:  0;
        background:  url(../images/payment/left-icon.png);
        background-repeat:  no-repeat;
        background-size:  16px;
        background-position:  50%;
}
.ui-datepicker-header a.ui-datepicker-prev  {
        left:  0;
        background:  url(../images/payment/left-icon.png);
        background-repeat:  no-repeat;
        background-size:  16px;
        background-position:  50%;
        transform:  rotate(180deg);
}
.ui-datepicker-header a>span  {
        display:  none;
}
.card-name-jessica-main-sub  {
        display:  flex;
        justify-content:  space-around;
        column-gap:  25px;
}
#ui-datepicker-div  {
        display:  none;
        background-color:  #fff;
        box-shadow:  0 0.125rem 0.5rem rgba(0,  0,  0,  0.1);
        margin-top:  0.25rem;
        border-radius:  0.5rem;
        padding:  0.5rem;
}
table  {
        border-collapse:  collapse;
        border-spacing:  0;
}
.ui-datepicker-calendar thead th  {
        padding:  0.25rem 0;
        text-align:  center;
        font-size:  0.75rem;
        font-weight:  400;
        color:  #78909C;
}
.ui-datepicker-calendar tbody td  {
        width:  2.5rem;
        text-align:  center;
        padding:  0;
}
div#ui-datepicker-div  {
        z-index:  500 !important;
}
.ui-datepicker-calendar tbody td a  {
        display:  block;
        border-radius:  0.25rem;
        line-height:  2rem;
        transition:  0.3s all;
        color:  #546E7A;
        font-size:  0.875rem;
        text-decoration:  none;
}
.ui-datepicker-calendar tbody td a:hover  {
        background:  rgb(159 130 240 / 20%);
}
.ui-datepicker-calendar tbody td a.ui-state-active  {
        background-color:  #7B51F1;
        color:  white;
}
.ui-datepicker-header a.ui-corner-all  {
        cursor:  pointer;
        position:  absolute;
        top:  0;
        width:  2rem;
        height:  2rem;
        margin:  0.5rem;
        border-radius:  0.25rem;
        transition:  0.3s all;
}
.ui-datepicker-title  {
        text-align:  center;
        line-height:  32px;
        margin-bottom:  10px;
        font-size:  16px;
        font-weight:  500;
}
.expiry-date.mt-16  {
        display:  flex;
        column-gap:  16px;
}
/************************ 42.Old invoice css ***************************/.old-invoice-edit  {
        margin-left:  auto;
}
.old-invoice-edit img  {
        filter:  brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(201deg) brightness(105%) contrast(105%);
}
.old-invoice-icon  {
        margin-left:  8px;
        width:  20px;
        height:  20px;
}
#old-invoice .verify-number-btn {
        background:  var(--1,  #FFF);
        box-shadow:  0px -4px 4px 0px rgba(18,  18,  18,  0.04);
        padding:  16px;
}
.old-invoice-add-content {
        display:  flex;
        justify-content:  space-between;
}
.old-invoice-add-content span {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
 }
.add-item-btn a {
        width:  100%;
        border-radius:  12px;
        border:  2px solid #7B51F1;
        padding:  10px 0;
        margin:  auto;
        max-width:  600px;
        color:  var(--2,  #7B51F1);
        text-align:  center;
        font-family:  Poppins;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.add-item-btn img {
        padding-right:  8px;
}
.txt2  {
        color:  var(--5,  #5A5C5E);
        font-family:  Poppins;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        margin-top:  8px;
}
.continue-txt {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.new-invoice-modal-content  {
        display:  flex;
        column-gap:  12px;
}
.new-invoice-modal-content  {
        display:  flex;
        column-gap:  12px;
        border-bottom:  2px solid #F2EEFE;
        padding:  16px 0;
}
.new-invoive-pre-bnt {
        margin-left:  auto;
}
.new-invoice-title p  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.new-invoice-modal  {
        width:  100%;
        margin-left:  auto;
        margin-right:  auto;
        max-width:  600px;
}
/************************ 43.Invoice css ***************************/.custom-tab-invoice button {
        width:  25%;
}
.all-details-name-invoice, .all-content-price-invoice  {
        display:  flex;
        justify-content:  space-between;
}
.all-details-name-invoice span  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
.all-content-price-invoice span  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        margin-top:  4px;
}
/************************ 44.Tracking css ***************************/.order-status-sec  {
        display:  flex;
        align-items:  center;
}
.order1  {
        position:  relative;
}
.order1::before  {
        content:  "";
        position:  absolute;
        width:  100%;
        top:  50%;
        left:  50%;
        border-left:  2px dashed #121212;
        height:  40px;
        margin-top:  14px;
}
.order2  {
        margin-left:  12px;
}
.order-txt1 {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  18px;
}
.order-txt2 {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  10px;
        font-style:  normal;
        font-weight:  700;
        line-height:  14px;
        margin-top:  4px;
}
.track-order-third-sec-full h3 {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
        padding-bottom:  18px;
}
/************************ 45.Preapproved-payment1 css ***************************/#preapproved-payment1 .send-money {
        width:  25%;
}
#preapproved-payment1 .send-money:last-child p {
        text-overflow:  ellipsis;
        overflow:  hidden;
        width:  74px;
        white-space:  nowrap;
        margin-left:  auto;
        margin-right:  auto;
}
#preapproved-payment1 .sendmoney-bottom-wrap  {
        display:  flex;
        justify-content:  space-between;
        width:  100%;
        column-gap:  16px;
}
.refund-txt {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  20px;
        font-style:  normal;
        font-weight:  600;
        line-height:  30px;
}
#preapproved-payment1 .contact-icon img  {
        width:  32px;
        height:  32px;
}
/************************ 46.Spilt css ***************************/.spilt8-img  {
        margin-top:  20px;
}
.split7-screen-content-top,  .spilt8-img  {
        text-align:  center;
}
.spilt8-img p  {
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  18px;
}
.spilt8-btn  {
        gap:  16px;
        position:  fixed;
        width:  100%;
        bottom:  0;
        left:  0;
        right:  0;
}
.split3-btn  {
        background:  var(--1,  #FFF);
        box-shadow:  0px -4px 4px 0px rgba(18,  18,  18,  0.04);
        padding:  16px;
}
.social-media-content  {
        display:  grid;
        grid-template-columns:  repeat(4,  1fr);
        gap:  16px;
        max-width:  600px;
        width:  100%;
        margin-left:  auto;
        margin-right:  auto;
}
.social-media-img  {
        text-align:  center;
}
.social-media-img p  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        margin-top:  8px;
}
.split7-screen-content-top h1  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  24px;
        font-style:  normal;
        font-weight:  600;
        line-height:  36px;
}
.split7-screen-content-top p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
#spilt7-main .sendmomey-details, #spilt6-main .sendmomey-details {
        padding:  12px 0;
}
.split6-screen-content-top h1  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  36px;
        font-style:  normal;
        font-weight:  600;
        line-height:  36px;
}
.split6-screen-content-top p  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        margin-top:  12px;
}
.split3-screen-content  {
        display:  flex;
        align-items:  center;
        column-gap:  16px;
}
.split3-edit  {
        margin-left:  auto;
        display:  flex;
}
.split3-edit span:first-child  {
        margin-right:  15px;
}
.split-bill2-top  {
        display:  flex;
        column-gap:  12px;
        justify-content:  space-between;
        overflow-x:  scroll;
        margin-left:  16px;
}
.split-bill2-top-wrap  {
        position:  relative;
}
.spilt-cancel-icon  {
        position:  absolute;
        right:  0;
        bottom:  0;
}
.spilt-img img  {
        border-radius:  50px;
}
::-webkit-scrollbar  {
        display:  none;
}
.split2-main .split-bill2-content .send-money-contact-tab {
        padding:  0 !important;
}
/************************ 47.Transfer-to-bank-success css ***************************/.transfer-txt h1 {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  24px;
        font-style:  normal;
        font-weight:  600;
        line-height:  36px;
}
.transfer-txt p {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.transfer-logo {
        width:  54px;
        height:  34px;
        border:  1px solid #F2EEFE;
        border-radius:  4px;
}
.first-content h2 {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  33px;
}
.first-content p {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi !important;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500 !important;
        line-height:  20px;
         margin-top:  4px;
}
.content-details {
     display:  flex;
     column-gap:  16px;
     border-bottom:  2px solid #F2EEFE;
     padding-bottom:  16px;
}
.transfer-content-details p  {
        color:  var(--5,  #5A5C5E);
        font-family:  Poppins;
        font-size:  14px;
        font-style:  normal;
        font-weight:  600;
        line-height:  20px;
}
#transfer-to-bank-review .sendmomey-details {
        padding-top:  16px !important;
        border-bottom:  2px solid #7B51F1;
}
#transfer-to-bank-review .sendmomey-details:last-child {
        border-bottom:  0;
}
#transfer-to-bank-review .sendmomey-details:first-child {
        padding-top:  0 !important;
        padding-bottom:  0 !important;
}
.estimated-time h2 {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
.estimated-time p {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.send-money4 h1 {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  20px;
        font-style:  normal;
        font-weight:  600;
        line-height:  30px;
 }
/************************ 48.Line chart css ***************************/.chat-income-sec  {
        display:  flex;
        column-gap:  16px;
        width:  100%;
}
.chat-income, .chat-expense {
        width:  50%;
        display:  flex;
        padding:  7px 8px;
        height:  56px;
        align-items:  center;
        column-gap:  9px;
        border:  2px solid var(--6,  #FFAA01);
        border-radius:  8px;
        background:  white;
}
.chat-content {
        width:  calc(100% - 30px);
        position:  absolute;
        left:  0;
        z-index:  99;
        margin-top:  16px !important;
        max-width:  100%;
        margin:  0 auto;
        right:  0;
}
.chat-txt1 {
        color:  var(--7,  #00A266);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
 }
.chat-txt2 {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  12px;
        font-style:  normal;
        font-weight:  700;
        line-height:  18px;
}
.week-txt {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.price-txt {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
        margin-top:  4px;
}
.date-txt {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  12px;
        font-style:  normal;
        font-weight:  500;
        line-height:  18px;
        margin-top:  4px;
}
.line-chart-data  {
        display:  flex;
}
.data-details  {
        width:  50%;
}
.statistic-first h2 {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  600;
        line-height:  24px;
}
.statistic-first p {
      color:  var(--5,  #5A5C5E);
      font-family:  Satoshi;
      font-size:  14px;
      font-style:  normal;
      font-weight:  500;
      line-height:  20px;
        margin-top:  4px;
}
.statistic-overview-content  {
        display:  flex;
        column-gap:  16px;
}
.chat-bottom-space {
        padding-bottom:  110px;
}
.statistic-first  {
        width:  60%;
}
.statistic-second  {
        width:  40%;
}
.area-chat .custom-select-internet select  {
        border-radius:  4px;
        background-color:  var(--2,  #7B51F1);
        color:  var(--1,  #FFF);
        font-family:  Satoshi;
        font-size:  12px;
        font-style:  normal;
        font-weight:  500;
        line-height:  16px;
        padding:  12px;
}
.area-chat .arrow-icon {
        background-image:  url(../svg/white-up-icon.svg) !important;
}
/************************ 49.Homescreen css ***************************/p.name  {
        color:  var(--1,  #FFF);
        font-family:  Poppins;
        font-size:  20px;
        font-style:  normal;
        font-weight:  600;
        line-height:  30px;
}
p.balance  {
        color:  var(--1,  #FFF);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.balance-data h1  {
        color:  var(--1,  #FFF);
        font-family:  Poppins;
        font-size:  36px;
        font-style:  normal;
        font-weight:  700;
        line-height:  36px;
}
.home-top-content  {
        display:  flex;
        align-items:  center;
        justify-content:  space-between;
        margin-top:  36px;
}
.homepage-first  {
        display:  flex;
        justify-content:  space-around;
        border-radius:  24px;
        background:  var(--6,  #FFAA01);
        padding:  16px 0;
}
.first-details p  {
        color:  var(--1,  #FFF);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        margin-top:  8px;
}
#homepage .send-money:last-child p, #homepage .send-money:first-child p {
       /* text-overflow:  ellipsis;
        overflow:  hidden;
        width:  74px;
        white-space:  nowrap;
    */    margin-left:  auto;
        margin-right:  auto;
}
.home-activity-top span:first-child  {
        color:  var(--4,  #121212);
        font-family:  Poppins;
        font-size:  20px;
        font-style:  normal;
        font-weight:  600;
        line-height:  30px;
}
.home-activity-top  {
        display:  flex;
        align-items:  center;
        justify-content:  space-between;
}
.home-activity-bottom-wrap  {
        display:  flex;
        align-items:  center;
        justify-content:  space-between;
}
.home-first h3  {
        color:  var(--4,  #121212);
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
.home-first p  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
        margin-top:  4px;
}
.home-second h4  {
        color:  var(--7,  #00A266);
        text-align:  right;
        font-family:  Satoshi;
        font-size:  18px;
        font-style:  normal;
        font-weight:  700;
        line-height:  24px;
}
/************************ 50.Bottom tabbar css ***************************/.bottom-menu-svg-main  {
        position:  relative;
}
.bottom-menu-svg  {
        position:  fixed;
        bottom:  -40px;
}
.gol3  {
        position:  absolute;
        left:  50%;
        top:  -10%;
        transform:  translateX(-50%);
        width:  80px;
        height:  80px;
        background-color:  #000000;
        border-radius:  50%;
        z-index:  99;
}
.add-to-cart-icon  {
        position:  absolute;
        top:  50%;
        left:  50%;
        transform:  translate(-50%,  -50%);
        display:  flex;
        align-items:  center;
}
.home-icon  {
        position:  absolute;
        top:  50%;
        left:  50%;
        transform:  translate(-50%,  -50%);
}
.bottom-menu-svg-design  {
        max-width:  600px;
        height:  160px;
        width:  100%;
        backdrop-filter:  blur(12px);
        background:  white;
}
.navigation  {
        position:  fixed;
        bottom:  3px;
        width:  100%;
        padding:  0 2px;
        max-width:  600px;
}
.navigation .listWrap  {
        list-style:  none;
       display:  inline-block;
        justify-content:  space-between;
        width:  100%;
}
.navigation .listWrap li {
    display:  inline-block;
        width:  23%;
        text-align:  center;
}
.navigation .listWrap li a  {
        position:  relative;
        display:  block;
        justify-content:  center;
        color:  #121212;
        font-size:  21px;
}
.navigation .listWrap li:active a .icon,  .navigation .listWrap li.active a .icon  {
      filter:  brightness(0) saturate(100%) invert(35%) sepia(56%) saturate(1672%) hue-rotate(232deg) brightness(95%) contrast(100%);
      transform:  translateY(-10px);
}
.navigation .listWrap li a .icon  {
        position:  relative;
        display:  block;
        text-align:  center;
        transition:  0.5s;
        color:  #FFF;
}
.navigation .listWrap li:active a .text,  .navigation .listWrap li.active a .text  {
        opacity:  1;
}
.navigation .listWrap li a .text  {
        position:  absolute;
        width:  10px;
        height:  10px;
        border-radius:  50%;
        background-color:  #7B51F1;
        transition:  0.5s;
        transform:  translateY(20px);
        opacity:  0;
        z-index:  1;
}
/************************ 51.Face recognition css ***************************/.concentric-circles  {
        position:  relative;
        width:  300px;
        height:  300px;
        margin-top:  70px;
        margin-left:  auto;
        margin-right:  auto;
}
.circle  {
        position:  absolute;
        border-radius:  50%;
        animation:  pulse 2s infinite;
}
.outer  {
        width:  100%;
        height:  100%;
        background-color:  rgba(136,  84,  255,  0.1);
        animation-delay:  0s;
}
.middle  {
        width:  220px;
        height:  220px;
        background-color:  rgba(136,  84,  255,  0.2);
        animation-delay:  0.5s;
}
.inner  {
        width:  120px;
        height:  120px;
        background-color:  #8854FF;
        animation-delay:  1s;
}
.inner img  {
        width:  50%;
        height:  50%;
}
.chart-container  {
        width:  100%;
        height:  300px;
}
.request-content span:first-child {
        color:  var(--5,  #5A5C5E);
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.request-content span:last-child {
        color:  var(--4,  #121212);
        text-align:  right;
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
     /}
.request-txt {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
         border-bottom:  2px solid #F2EEFE;
        padding-bottom:  16px;
}
.request-btn {
        position:  relative;
        padding:  0;
}
.request-content {
        display:  flex;
        align-items:  center;
        justify-content:  space-between;
}
.request-money-modal {
        max-width:  600px;
        margin:  auto;
}
/************************ 52.QR code payment css ***************************/.name-txt  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  20px;
        font-style:  normal;
        font-weight:  600;
        line-height:  30px;
}
.email-txt  {
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.qr-price  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  36px;
        font-style:  normal;
        font-weight:  500;
        line-height:  36px;
}
.qr-code-name input {
        border-radius:  12px;
        background:  var(--14,  #F2EEFE);
        color:  var(--5,  #5A5C5E);
        text-align:  center;
        font-family:  Poppins;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
        padding:  12px 24px;
        border:  0;
        width:  230px;
        margin:  auto;
        display:  flex;
}
.payment-method p {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.payment-method {
        padding-top:  50px;
}
.payment-method P  {
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.profile-img-content img  {
        border-radius:  80px;
}
.line-scale > div  {
        background-color:  #7B51F1;
        width:  4px;
        height:  35px;
        border-radius:  2px;
        margin:  2px;
        -webkit-animation-fill-mode:  both;
        animation-fill-mode:  both;
        display:  inline-block;
}
.line-scale > div:nth-child(1)  {
        -webkit-animation:  line-scale 1s -0.4s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
        animation:  line-scale 1s -0.4s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
}
.line-scale > div:nth-child(2)  {
        -webkit-animation:  line-scale 1s -0.3s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
        animation:  line-scale 1s -0.3s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
}
.line-scale > div:nth-child(3)  {
        -webkit-animation:  line-scale 1s -0.2s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
        animation:  line-scale 1s -0.2s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
}
.line-scale > div:nth-child(4)  {
        -webkit-animation:  line-scale 1s -0.1s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
        animation:  line-scale 1s -0.1s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
}
.line-scale > div:nth-child(5)  {
        -webkit-animation:  line-scale 1s 0s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
        animation:  line-scale 1s 0s infinite cubic-bezier(0.2,  0.68,  0.18,  1.08);
}
.loader  {
        position:  fixed;
        left:  50%;
        top:  50%;
        transform:  translate(-50%,  -50%);
}
.overlay1  {
        position:  absolute;
        background-position:  center;
        background-repeat:  no-repeat;
        background-size:  100% 100%;
        width:  100%;
        top:  0;
        right:  0;
        height:  100%;
        border-radius:  24px 24px 0px 0px;
        background:  rgb(18 18 18 / 80%);
}
.scan1 .fingerprint1  {
        position:  relative;
        width:  300px;
        height:  300px;
        background:  url(../images/finger-print/scan-code1.png);
        background-size:  300px;
        background-repeat:  no-repeat;
        background-size:  cover;
        background-color:  white;
}
.scan1  {
        position:  relative;
           background-image:  url(../images/finger-print/print-border2.png);
        width:  339px;
        height:  339px;
        background-size:  300px;
        background-repeat:  no-repeat;
        background-size:  cover;
        background-color:  white;
         margin-left:  auto;
        margin-right:  auto;
        margin-top:  70px;
        border-radius:  25px;
}
.scan1 .fingerprint1::before  {
        content:  "";
        position:  absolute;
        top:  0;
        left:  0;
        width:  100%;
        height:  100%;
        background:  url(../images/finger-print/scan-code1.png);
        background-size:  300px;
        background-repeat:  no-repeat;
        background-size:  cover;
        animation:  animate 4s ease-in-out infinite;
        background:  linear-gradient(180deg,  rgba(251,  73,  69,  0.00) 0%,  rgba(251,  73,  69,  0.60) 100%);
}
.scan1 .fingerprint1::after  {
        content:  "";
        position:  absolute;
        top:  0;
        left:  0;
        width:  100%;
        height:  4px;
        background:  #FB4945;
        border-radius:  8px;
        filter:  drop-shadow(0 0 20px #00D061) drop-shadow(0 0 60px #00D061);
        animation:  animate_line 4s ease-in-out infinite;
}
/************************ 53.Create new password CSS ***************************/#create-new-password-main .password-form input {
        padding-right:  50px !important;
}
.password-form .form-floating>.form-control:focus~label  {
        color:  var(--2,  #7B51F1);
        font-family:  Satoshi;
        font-size:  14px;
        font-style:  normal;
        font-weight:  500;
        line-height:  20px;
}
.password-form input {
     color:  var(--4,  #121212);
     font-family:  Satoshi;
     font-size:  18px;
     font-style:  normal;
     font-weight:  500;
     line-height:  24px;
     border-radius:  12px;
     background:  var(--9,  #F5F5F5);
     border:  none;
     padding-right:  16px !important;
}
i#eye,  i#eye1  {
        font-size:  20px;
        color:  #5A5C5E;
        position:  absolute;
        right:  16px;
        top:  35%;
        cursor:  pointer;
}
.password-form .form-floating>label {
     color:  var(--5,  #5A5C5E);
     font-family:  Satoshi;
     font-size:  16px;
     font-style:  normal;
     font-weight:  500;
     line-height:  24px;
  }
.password-form .form-floating>.form-control:focus~label::after {
        background:  transparent;
}
.footer-checkbox-input + .footer-chec-txt:before  {
        content:  "";
        margin-right:  12px;
        display:  inline-block;
        vertical-align:  text-top;
        width:  22px;
        height:  22px;
        border:  2px solid #000000;
        border-radius:  8px;
}
.footer-checkbox-input  {
        position:  absolute;
        opacity:  0;
        width:  fit-content;
}
.footer-checkbox-input:checked + .footer-chec-txt:after  {
        content:  "";
        position:  absolute;
        left:  6px;
        top:  12px;
        background:  white;
        width:  2px;
        height:  2px;
        box-shadow:  2px 0 0 white,  4px 0 0 white,  4px -2px 0 white,  4px -4px 0 white,  4px -6px 0 white,  4px -8px 0 white;
        transform:  rotate(45deg);
}
.footer-checkbox-input:checked + .footer-chec-txt:before  {
        background:  black;
        border:  none;
}
.footer-checkbox-input+ .footer-chec-txt  {
        position:  relative;
        cursor:  pointer;
        padding:  0;
        color:  var(--5,  #5A5C5E);
        font-family:  Satoshi;
        font-size:  16px;
        font-style:  normal;
        font-weight:  500;
        line-height:  24px;
}
.verify-txt h1  {
        color:  var(--4,  #121212);
        text-align:  center;
        font-family:  Poppins;
        font-size:  24px;
        font-style:  normal;
        font-weight:  600;
        line-height:  36px;
}
#empty-notification-main .verify-number-bottom {
        padding-bottom:  30px;
}
/************************ 54.Keyframe Animation ***************************/@keyframes line-scale  {
      0%  {
        -webkit-transform:  scaley(1);
        transform:  scaley(1);
 }
    50%  {
            -webkit-transform:  scaley(0.4);
            transform:  scaley(0.4);
     }
    100%  {
            -webkit-transform:  scaley(1);
            transform:  scaley(1);
 }
 }
}
@keyframes spin  {
        0%  {
            transform:  rotate(0deg);
    }
    100%  {
            transform:  rotate(360deg);
    }
}
@keyframes animate  {
        0%,     100%  {
            height:  0%;
    }
    50%  {
            height:  100%;
    }
}
@keyframes animate_line  {
        0%,     100%  {
            top:  0%;
    }
    50%  {
            top:  100%;
    }
}
@keyframes pulse  {
        0%,  100%  {
            transform:  scale(1);
    }
    50%  {
            transform:  scale(1.1);
    }
}
.forgot-sty1 {
        margin-top:  11px;
     text-align:  right;
}
.forgot-sty1 p {
}
.forgot-sty1 p a {
    color:  #000;
     font-weight:  500;
     text-decoration:  underline;
}
.paddiing-bottomsty15 {
    padding-bottom:  135px;
         height:  auto;
}
.message_alert_wrrpr {
    position:  fixed;
     left:  0;
     right:  0;
     bottom:  -70px;
     text-align:  center;
     z-index:  10000000;
     transition:  0.3s;
 }
.message_alert_wrrpr p {
    background:  #f1f1f1;
     display:  inline-block;
     padding:  10px 20px;
     color:  #333;
     border-radius:  2px;
     letter-spacing:  0.5px;
 }
.msg_alrt1 {
    background:  #333333 !important;
     color:  #fff !important;
 }
.message_alert_wrrpr.msg_active {
    bottom:  30px;
 }
.footer-menusty {
        display:  block;
     width:  100%;
     font-size:  13px;
}
.post-changesty {
    position:  relative !important;
        margin-top:  25px !important;
    z-index:  0 !important;
}
.mandatory_star  {
    color:  red;
     font-size:  17px;
 }
.contact-icon img {
    width:  49px;
}
.homepage-first a .first-details {
    text-align:  center;
}
.with-drawishis {
        overflow:  auto;
}
.with-drawishis table {
    width:  100%;
}
.with-drawishis table tr {
}
.with-drawishis table th {
        border:  solid 1px #e7e7e7;
     padding:  5px;
}
.with-drawishis table td {
        border:  solid 1px #e7e7e7;
     padding:  5px;
}
.with-drawishis table td span {
        background-color:  #98bb00;
        color:  #fff;
     padding:  2px 7px;
     font-size:  14px;
     border-radius:  3px;
}
    .mar-bottomdetailinv {
    margin-bottom:  15px;
}
    .download-invocesty {
        text-align:  right;
}
    .download-invocesty a {
        background-color:  #ffb600;
        color:  #fff;
        padding:  4px 10px;
        font-size:  16px;
        border-radius:  5px;
        font-weight:  600;
        text-decoration:  none;
}
    /*===============================*/.tracking-detail  {
      padding:  3rem 0;
}
#tracking  {
      margin-bottom:  1rem;
}
[class*="tracking-status-"] p  {
      margin:  0;
      font-size:  1.1rem;
      color:  #fff;
      text-transform:  uppercase;
      text-align:  center;
}
[class*="tracking-status-"]  {
      padding:  1.6rem 0;
}
.tracking-list  {
     /* border:  1px solid #e5e5e5;
    */}
.tracking-item  {
      border-left:  4px solid #00ba0d;
      position:  relative;
      padding:  2rem 1.5rem 0.5rem 2.5rem;
      font-size:  0.9rem;
      margin-left:  0rem;
      min-height:  5rem;
}
.tracking-item:last-child  {
      padding-bottom:  4rem;
}
.tracking-item .tracking-date  {
      margin-bottom:  0.5rem;
}
.tracking-item .tracking-date span  {
      color:  #888;
      font-size:  85%;
      padding-left:  0.4rem;
}
.tracking-item .tracking-content  {
      padding:  0.5rem 0.8rem;
      background-color:  #f4f4f4;
      border-radius:  0.5rem;
}
.tracking-item .tracking-content span  {
      display:  block;
      color:  #767676;
      font-size:  13px;
}
.tracking-item .tracking-icon  {
      position:  absolute;
      left:  -0.7rem;
      width:  1.1rem;
      height:  1.1rem;
      text-align:  center;
      border-radius:  50%;
      font-size:  1.1rem;
      background-color:  #fff;
      color:  #fff;
}
.tracking-item-pending  {
      border-left:  4px solid #d6d6d6;
      position:  relative;
      padding:  2rem 1.5rem 0.5rem 2.5rem;
      font-size:  0.9rem;
      margin-left:  0rem;
      min-height:  5rem;
}
.tracking-item-pending:last-child  {
      padding-bottom:  4rem;
}
.tracking-item-pending .tracking-date  {
      margin-bottom:  0.5rem;
}
.tracking-item-pending .tracking-date span  {
      color:  #888;
      font-size:  85%;
      padding-left:  0.4rem;
}
.tracking-item-pending .tracking-content  {
      padding:  0.5rem 0.8rem;
      background-color:  #f4f4f4;
      border-radius:  0.5rem;
}
.tracking-item-pending .tracking-content span  {
      display:  block;
      color:  #767676;
      font-size:  13px;
}
.tracking-item-pending .tracking-icon  {
      line-height:  2.6rem;
      position:  absolute;
      left:  -0.7rem;
      width:  1.1rem;
      height:  1.1rem;
      text-align:  center;
      border-radius:  50%;
      font-size:  1.1rem;
      color:  #d6d6d6;
}
.tracking-item-pending .tracking-content  {
      font-weight:  600;
      font-size:  17px;
}
.tracking-item .tracking-icon.status-current  {
      width:  1.9rem;
      height:  1.9rem;
      left:  -1.1rem;
}
.tracking-item .tracking-icon.status-intransit  {
      color:  #00ba0d;
      font-size:  0.6rem;
}
.tracking-item .tracking-icon.status-current  {
      color:  #00ba0d;
      font-size:  0.6rem;
}
@media (min-width: 992px)  {
      .tracking-item  {
        margin-left:  10rem;
  }
  .tracking-item .tracking-date  {
        position:  absolute;
        left:  -10rem;
        width:  7.5rem;
        text-align:  right;
  }
  .tracking-item .tracking-date span  {
        display:  block;
  }
  .tracking-item .tracking-content  {
        padding:  0;
        background-color:  transparent;
  }
  .tracking-item-pending  {
        margin-left:  10rem;
  }
  .tracking-item-pending .tracking-date  {
        position:  absolute;
        left:  -10rem;
        width:  7.5rem;
        text-align:  right;
  }
  .tracking-item-pending .tracking-date span  {
        display:  block;
  }
  .tracking-item-pending .tracking-content  {
        padding:  0;
        background-color:  transparent;
  }
}
.tracking-item .tracking-content  {
      font-weight:  600;
      font-size:  17px;
}
.blinker  {
      border:  7px solid #e9f8ea;
      animation:  blink 1s;
      animation-iteration-count:  infinite;
}
@keyframes blink  {
     50%  {
     border-color: #fff ;
 }
  }
.list-disc {
    padding-left:  15px;
     font-size:  14px;
 }
.mandatory-list15 {
}
.mandatory-list15 li {
    display:  inline-block;
        background-color:  #8b5ff4;
        color:  #fff;
        padding:  4px 12px;
        font-weight:  500;
        border-radius:  5px;
        font-size:  14px;
        margin-bottom:  5px;
}
    .nxt-candata15 {
        width:  32% !important;
         display:  inline-block !important;
}

div.gj-datepicker{margin-bottom: 0px !important;}
button.btn-outline-secondary{border: 0px !important;}

.my-odersty15{    border-bottom: solid 1px #e9e9e9; background-color: #fff; margin-bottom: 6px; padding: 5px;}
.order-idsty15{font-weight: 400 !important; width: 77%;} 
.not-padsty b{color: red;}
.paid-padsty b{color: green;}
.order-pricesty{    color: #ffb704 !important;}

.date-activedata15{    font-size: 15px !important;
    border-bottom: solid 1px #ebe8e8 !important;
    padding-bottom: 3px !important;
    margin-bottom: 5px !important;}

    .boder-bottom-activity2{    margin-bottom: 20px;
    background-color: #f9f9f9;
    padding: 5px;     border-bottom: 2px solid #F2EEFE;}

    .document-uploadsty15{margin-top: 18px;}
    .document-uploadsty15 ul{}
    .document-uploadsty15 ul li{display: inline-block;}
    .document-uploadsty15 ul li a{width: 100%;
    border-radius: 6px;
    background: var(--2, #7B51F1);
    margin: auto;
    max-width: 600px;
    color: var(--1, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    border: 0px;
    display: block;
    padding: 6px 18px;}

    .view-dostyall15{    background-color: #f9f9f9;
    padding: 15px;}
    .view-dostyall15 li{    text-align: left;
    display: block;
    margin-bottom: 12px;}
     .view-dostyall15 li a{    display: block;
    background-color: #8b5ff4;
    color: #fff;
    padding: 5px;}

.nxt-candata15.disabled-btn {
    background-color: #ccc !important; /* grey */
    color: #666 !important;           /* optional: dim the text */
    pointer-events: none;             /* make unclickable */
    cursor: not-allowed;
}


.counter-notify{position: absolute; background-color: #f13e3e; width: 25px; height: 25px; border-radius: 50%; text-align: center; line-height: 24px; top: -15px; color: #fff; right: -10px;}

.order-tracksty51{}
.order-tracksty51 a{}

.remark-styall{    color: #000 !important;}
.remark-styall b{color: #df1111; font-weight: 500;}
.recept-stybtn{text-align: left; text-transform: capitalize; font-size: 13px; background-color: #023aed; color: #fff !important; padding: 3px 10px; display: inline-flex; margin-top: 5px; border-radius: 4px;}

.logo_img{max-width: 100px !important;}
.togo-top156{    max-width: 93px; position: absolute; top: 4px;}