body{background: #F2F2F2!important}
.wallet-body-p{margin: 1em auto;
    height: 75vh;
    background: #fff;
    display: flex;
    align-items: flex-start;
  justify-content: flex-start;border-radius: 4px;    box-shadow: 0px 1px 5px -1px #000000bf;  }
  .right-three-dout img{width: 20px;
    height: 20px;cursor: progress;}
  .headign-send-money{width: 100%}
.send-mony-search form label{width: 100%;position: relative;}
.send-mony-search form label input{padding-top: 4px;
    padding-bottom: 4px;width: 100%;padding-left: 3em;border: 1px solid #00000033;border-radius: 4px}
.send-mony-search form label img{position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);}
:focus{outline: none}
.headign-send-money .col-md-12 h3{    margin: .8em -0px;
    font-size: 1.5em}
    .friends-list-send{    height: 50vh;
    overflow-y: auto;}
    .send-mony-search{    padding: 1em 0px;}
    .friends-list-send ul li:first-child{
      border-top: 1px solid #f2f2f2;
    }
    .friends-list-send ul li{   cursor: pointer; padding: 8px 0px;border-bottom: 1px solid #f2f2f2}
.friends-list-send ul{list-style: none;padding: 0px;margin: 0px;}
.friends-list-send ul li .media-left{margin-right: 2rem}
.mg-auto{margin: auto;  }
.friends-list-send ul li .media-left img{height: 50px;width: 50px;border-radius: 50%;
    border: 1px solid #ececec;}



    /*scroll bar css */

    ::-webkit-scrollbar
    {
        width: 5px;
        border-radius: 50%;
    }
    ::-webkit-scrollbar-thumb{
        background:linear-gradient(rgb(99 198 237), rgb(99 198 237));
        border-radius: 10%;
    }
    /*scroll bar css */


@media only screen and (min-width: 768px) {
  .mobile-back-arow{display: none;}
.contacts-headign-mobile{display: none;}
.wallet-body-p{flex: 0 0 56.666667%!important;
    max-width: 56.666667%!important;}
}

@media only screen and (max-width: 768px)  {
  .mobile-back-arow{display: inline-block;    margin-right: 1rem;}
  .wallet-body-p {
    margin: 0em auto;
    height: 100vh;}
    header{display: none!important;}
    .friends-list-send {
    height: 78vh;}
    .headign-send-money .col-md-12 h3 {font-size: 1.3em;
    margin: 0.8em -0px 0px;}
    .wallet-body-p{padding: 0px!important}
    .contacts-headign-mobile{display: block;padding: 10px 10px;
    background: #22A7DE0F;}
    .contacts-headign-mobile h5{margin: 0px!important;font-weight: bolder;}

}


/*send money page 2*/
.send-mony-amount form{display: flex;justify-content: center;align-items: center;font-size: 6rem;
    position: relative;
}
.send-mony-amount input::-webkit-outer-spin-button,
.send-mony-amount input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.send-mony-amount form input{    width: 100%;
    text-align: center;
    padding: 0px;
    border: none;
    margin: 0px;color: #686868}
    .Curnecy{    padding: 0px 12px;
    width: 60px;background: #F2FAFD 0% 0% no-repeat padding-box;
box-shadow: 0px 1px 2px #00000029;
border-radius: 6px;border: none;color: #686868;}
.amount-Middle-section ul{list-style: none;padding: 0px;margin: 0px}
.amount-Middle-section ul li{padding: 15px 0px ; border-bottom: 1px solid lightgrey;cursor: pointer;}
.amount-Middle-section ul li .media-left{margin-right: 1rem;margin: auto;}
.amount-Middle-section ul li .media-left img{width: 50px}
.amount-Middle-section .profile img{width: 50px;height: 50%;border-radius: 50%;border: 1px solid #f2f2f2}
.amount-Middle-section ul li .media-right p{margin-bottom: 0px;    font-size: 12px;}
.amount-Middle-section ul li .media-right h4{margin-bottom: 0px;margin-bottom: 0px;
    font-size: 16px;
    font-weight: bolder;color: #283A90}
.amount-bottom{padding: 10px 0px;}
.amount-bottom .col-md-12{padding: 0px!important}
.buttons-bottom-footer{    display: flex;
    justify-content: space-between;}
    .buttons-bottom-footer button{    width: 50%;
    border: none;
    height: 40px;}
    .buttons-bottom-footer .borer-btn{margin-right: 5px;border: 1px solid #22A7DE;color: #22A7DE;border-radius: 4px;background: transparent;}
    .buttons-bottom-footer  .backborer-btn{margin-left: 5px;background: #22A7DE;color: #fff;border-radius: 4px}
.send-1{align-items: center;}
@media only screen and (min-width: 768px) {

    .headign-send-money h3 b{display: none;}
  }

@media only screen and (max-width: 768px)
 {
   .send-1{align-items: start!important;
}
.send-mony-amount{    padding: 2rem 0px;}
.send-mony-amount form{font-size: 4.5rem;}
.amount-bottom {
    padding: 10px 10px;
    position: fixed;
    width: 100%;
    bottom: 0px;
    BACKGROUND: #fff;
z-index: 1;
  }
  .amount-Middle-section ul li {
    padding: 15px 0px;}
  }
/*send money page 2 closebtn*/

/*send-money card page*/
.card-selecrk ul li label{width: 100%!important;cursor: pointer;}
.card-selecrk  .col-md-12{padding: 0px!important}
.card-select{height: 100%!important;width: 100%}
.card-select .mobile-top-headign-l{height: 20%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;}
    .card-select .mobile-top-headign-l h3 img{margin-right: 1rem}
.card-select .mobile-top-headign-l h3{    font-size: 20px;}
.card-selecrk{    height: 65%;    align-items: center;
    display: flex;}
  .card-selecrk  ul{    padding: 0px;
    margin: 0px;
    width: 100%;
    height: auto;}
    .card-select-s .buttons-bottom-footer{    display: flex;
    justify-content: center!important;}

    @media only screen and (max-width: 768px){
      .card-selecrk{    display: contents!important;}
      .card-selecrk ul {
    padding: 0px 10px;}
    .card-select .mobile-top-headign-l {
    height: 10%!important;}
    }


    /*confirmation popup*/
  @media only screen and (min-width: 768px){
    #confirmation .modal-dialog{    width: 55%!important;
    max-width: 100%;}
    .modal.fade .modal-dialog{    -webkit-transform: translate(0, -0%)!important; transform: translate(0, -0%)!important;}
  }

    #confirmation .modal-footer{    justify-content: center!important;}

      #confirmation .confirmation-main-body ul{list-style: none;padding: 0px;margin: 0px}
#confirmation .card-s .media-left img{width: 50px}
#confirmation  .good-news .media-left img{width: 50px}
#confirmation  .good-news .media-body p{margin-bottom: 0px}
#confirmation  .good-news .media-body span{color: #686868;font-size: 13px;}
#confirmation .Total-lisit-menu .total {display: flex;
    justify-content: space-between;}
    .total-headign h5{    font-size:18px;}
      .total-headign h4{    font-size: 20px;}
      .total-headign .color-grey{font-size: 1em!important;color: #686868;}
  #confirmation .Total-lisit-menu .total h5,#confirmation .Total-lisit-menu .total h4{margin-bottom: 0px;}
#confirmation .confirmation-main-body ul li{    padding: 1em 0px;
    border-bottom: 1px solid #f2f2f2;
    border-top: 1px solid #f2f2f2;}
    .Total-lisit-menu .send-in-second {margin-top: 2rem}

  @media only screen and (min-width: 768px){
    #confirmation{    background: rgb(242, 242, 242)!important;
        padding-right: 0px!important;}
  }
    @media only screen and (max-width: 768px){
      #confirmation .modal-dialog{    margin: 0px!important;
    border: none;}
        #confirmation .modal-content{    justify-content: revert;
    position: fixed;
    bottom: 0px;
    left: 0px;
        border-radius: 13px 13px 0px 0px;
    border: none;    animation: .5s bottom;}
        #confirmation .buttons-bottom-footer button {
    width: 80%;
  }
}
#confirmation .buttons-bottom-footer {text-align: center;}
#confirmation .buttons-bottom-footer a {width: 100%!important;}
@keyframes bottom {
0%{
  bottom: -80%
}
100%{
  background: red
  bottom: 0%
}
}
    /*confirmation popup*/

    /*success-css*/
    .aligned::after {
    content: "\201D";
}
.aligned::before {
    content: "\201C";
    position: relative;
    left: -.5%;
}
  .wallet-body-ps{margin: 1em auto;
    height: auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 1px 5px -1px #000000bf;}
    .wallet-body-ps .header-success-gif{text-align: center;}
    .wallet-body-ps .header-success-gif img{    width: 300px;}
    .success-msg{text-align: center;    font-size: 22px;letter-spacing: 0.57px;
}
.success-notes{    text-align: center;
    margin: 1rem 0px;
    font-size: 25px;
    font-weight: bolder;}

.success-notes h1{margin-bottom: 0px;font-size: 28px;}
.Invoice .Invoice-first-line{    display: flex;
    justify-content: space-between;    align-items: center;padding: 0px 0px 20px;}
.Invoice-first-line .left-side-con .media .media-left img{    width: 50px;}
.sc{justify-content: center;border: none!important}

  @media only screen and (max-width: 768px){
    .sc button{    width: 90%!important;}
    .sc{    justify-content: center!important;    background: #fff;
    position: fixed;
    bottom: 0px;}
    .confirmation-mi{    margin: 0px!important;box-shadow: none!important}
    .success-msg{    font-size: 14px;}
    .success-notes h1 {
    margin-bottom: 0px;
    font-size: 24px;
}
.confirmation-k{height: 100%;background: #fff}
.Invoice .Invoice-first-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0px 0px!important;
}
.success-msg br{display: none}
  }
/*Declined page css*/

.wallet-decline-main-body{    padding: 0px;    min-height: 65vh;}
.wallet-decline-header{padding:10px 0px!important;    border-bottom: 1px solid #f2f2f2;    height: 15%;
    display: flex;
    align-items: center;}
.wallet-decline-header .media-body h5{margin-bottom: 0px!important;    font-weight: bold;    font-size: 16px;
    letter-spacing: .09em;}
    .wallet-decline-main-body .header-success-gif img{ animation: alertdeclined 2s ease ;height: 120px;
    margin-bottom: 3rem;    width: 120px;}
    @keyframes alertdeclined {
    0%{
opacity: 0;
transform: scale(0) rotate3d(1, 1, 1,
267deg
);
    }

    100%{
  opacity: 1;
  transform: scale(1) rotate3d(1, 1, 1,
360deg
 )
    }


    }
    .headign-decline h1{    font-size: 24px;font-weight: bolder;
    color: #000;    margin-bottom: 2rem;}
.body-decline{height: 90%;display: flex;
    align-items: center;
    justify-content: center;}
.decline-paragraph{text-align: center;}
.modal-footer-decline{margin: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;}

    .modal-footer-decline .button-body{width: 100%;
    display: flex;
    justify-content: flex-end;}
  .modal-footer-decline .button-body button{    width: 15%;margin-left: 20px!important;height: 40px}
  .modal-footer-decline{padding-left: 0px!important;
    padding-right: 0px!important;}
    .modal-footer-decline .border-button{background: transparent!important;border: 1px solid #22A7DE!important;color: #22A7DE!important}

    @media only screen and (max-width: 768px)  {
      .declined-error-body{height: 100%;}
      .declined-error-body-container{height: 100%}
        .declined-error-body-container .row{height: 100%}
          .declined-error-body .wallet-decline-main-body{    height: 90%;}
          .declined-error-body .wallet-decline-header{    height: 10%;}
                .declined-error-body .body-decline{    height: 90%;    padding: 0px;}
                .modal-footer-decline{    height: 10%;}
    }
/*Declined page css close*/

/*wallet  design*/
@media (min-width: 768px){
  .deposit-design .left-side-menus{max-width: 20%!important;    margin: 16px 0px;}
}

.deposit-design .wallet-body-ps .wallet-decline-header .media{padding: 0px 15px;width: 100%}
.deposit-design  .modal-footer-decline .button-body button {    margin-left: 0px!important;}
.deposit-design  .modal-footer-decline .button-body{    justify-content: space-between!important}

.deposit-design .left-side-menus .nav-pills .nav-link.active{background: transparent!important;border-bottom: 2px solid #22A7DE;padding-left: 0px;padding-right: 0px;color: #000!important;}
.deposit-design .left-side-menus .nav-link{padding-left: 0px;padding-right: 0px;display: inline-block;    border-radius: 0px;padding-bottom: 0px!important;margin: 5px 0px;font-weight: bold;}

.deposit-main-body .body-decline{align-items: inherit;}

.deposit-main-body .Save-Bank .bank-details{display: flex;
    justify-content: center;
    align-items: center;}

.deposit-main-body .heading-top h4{text-align: center;margin: 2rem 0px;}
.deposit-main-body .deposit-paragraph{text-align: center;
    padding: 4rem 0px 2rem 0px;}
    .Save-Bank .bank-details{cursor: pointer;}
.Save-Bank .bank-details .media-left img{    width: 45px;
    height: 25px;
    object-fit: contain;}

    .deposit-design .mamber-ship-page .main-contain-decline{  width: 90%;margin: auto;}
      .deposit-design .mamber-ship-page  .heading-top{    padding: 0rem 0px 0px;
    border-bottom: 1px solid #f2f2f2;    display: flex;
    justify-content: center;
    align-items: center;
}

  .deposit-design .mamber-ship-page  .heading-top h6{font-weight: bold;}
    .deposit-design .mamber-ship-pag .amount-Middle-section ul li{    margin: 20px 0px;}

      .deposit-design  .confirmation-page .heading-top h6{font-weight: bold;color: #000;text-align: center;}

        .deposit-design  .confirmation-page  .amount-display{text-align: center;}
        .deposit-design  .confirmation-page  .amount-display h1{font-size: 60px;color: #686868}
  .deposit-design  .confirmation-page  .amount-display button{    background: transparent;
    padding: 5px 10px;
    border: 1px solid #22a7de;
    border-radius: 6px;color: #22a7de}


          .deposit-design  .confirmation-page .heading-top{    padding-top: 2rem;}

  .deposit-design  .confirmation-page .from-and-to-seection{padding: 0px!important}
.deposit-design  .confirmation-page .from-and-to-seection .from-section,.deposit-design  .confirmation-page .from-and-to-seection  .to-section {border-bottom: 1px solid #f2f2f2;padding: 10px 0px;}
.deposit-design  .confirmation-page .from-and-to-seection h5{font-size: 16px;
    margin-bottom: -0px;
    color: grey;}

    .deposit-design  .confirmation-page .from-and-to-seection .media{padding-top: 5px}

      .deposit-design  .confirmation-page .from-and-to-seection .media .media-left{     width: 39px;
    height: 26px;
    object-fit: contain;}
  .deposit-design  .confirmation-page  .bill-bottom-section {padding: 10px 0px!important;}
  .deposit-design  .confirmation-page  .bill-bottom-section .head-in-head{text-align: center;text-align: center;
    margin-top: 2rem;}
    .deposit-design  .confirmation-page  .bill-bottom-section .list-bill{padding: 0px!important}

    .deposit-design  .confirmation-page  .bill-bottom-section .list-bill ul li{display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 1px solid #c0c0c0;}

    .deposit-design  .confirmation-page  .bill-bottom-section .list-bill ul li p{margin-bottom: 0px;    font-size: 14px;color: #000}

  .deposit-design  .add-account-save-account ul li .media .media-body h4{    font-size: 14px;
    margin: 0px 0px 5px;
    color: #686868;}

      .deposit-design  .add-account-save-account ul li .media .media-body p{margin: 0px;color: #686868;    font-size: 12px;}
.deposit-design  .add-bank .media .media-left button{background: #22a7de;
    border: none;
    color: #fff;
    height: 35px;
    width: 35px;
    border-radius: 50%}


    .deposit-design .add-account-save-account{height: 50%;}
    .deposit-design  .add-bank{    padding: 1rem 0px!important;
    border-bottom: 1px solid lightgrey;}
    .deposit-design  .add-bank .media-body a{color: #22A7DE!important ;font-size: 14px;}

    .delet-button a{display: flex;
    align-items: center;color: #22a7de!important; font-size: 15px}

   .add-bank-body .heading-top h4{  font-size: 20px; font-weight: 900;}


.menu-mobile-item{display: none;}

@media (max-width: 768px){
  .deposit-design .left-side-menus ul{display: none;}
.deposit-design   .col-md-8{padding: 0px 10px;
    margin: 15px 0px;}
    .deposit-design .mamber-ship-page .main-contain-decline {
        width: 100%;
    }
    .deposit-design{padding: 0px!important}
    .add-account-save-account ul{padding: 0px!important}
    .deposit-design .add-bank{    margin-top: 3rem;}
    .menu-mobile-item {
    display: block;
}
  .deposit-design .modal-footer{    justify-content: space-between!important;
background: transparent;
    position: relative;
    bottom: 0%;
    top: 2rem;}

    .deposit-design .modal-footer-decline .button-body button {
    width: 35%!important}
}

.modal-footer .button-body button a{color: inherit!important;}
.deposit-design{margin: 1rem 0px 4rem;}
.deposit-design .add-account-save-account ul li label{margin-bottom: 0px}

/*Deposit design */

/*this css, hide all screen*/
.show-first-screen,.show-second-screen,.show-three-screen, .show-four-screen, .show-five-screen{display: none;}
/*this css, hide all screen*/

/*this css, hide all screen footer button next*/

.first-screen-next-btn,.second-screen-next-btn,.third-screen-next-btn, .four-screen-next-btn,.five-screen-next-btn{display: none;}
/*this css, hide all screen footer button close*/

/*Show btn and section*/
.show-first-screen-div .show-first-screen {display: block!important;}
.show-first-screen-div .first-screen-next-btn {display: block!important;}
/*Show btn and section close*/

/*Show btn and section*/
.show-second-screen-div .show-second-screen {display: block!important;}
.show-second-screen-div .second-screen-next-btn {display: block!important;}
/*Show btn anad section close*/

/*Show btn anad section*/
.show-three-screen-div .show-three-screen {display: block!important;}
.show-three-screen-div .third-screen-next-btn {display: block!important;}
/*Show btn anad section close*/

/*Show btn anad section*/
.show-four-screen-div .show-four-screen {display: block!important;}
.show-four-screen-div .four-screen-next-btn {display: block!important;}
/*Show btn anad section*/

/*Show btn anad section*/
.show-five-screen-div .show-five-screen {display: block!important;}
.show-five-screen-div .five-screen-next-btn {display: block!important;}
/*Show btn anad section*/


/*back bitton css*/

.second-screen-back-btn,.third-screen-back-btn, .four-screen-back-btn, .five-screen-back-btn{display: none;}

.show-second-screen-div .second-screen-back-btn {display: block;}
.show-second-screen-div .first-screen-back-btn{display: none;}

.show-three-screen-div .third-screen-back-btn{display: block;}
.show-three-screen-div .first-screen-back-btn{display: none;}

.show-four-screen-div .four-screen-back-btn{display: block;}
.show-four-screen-div  .first-screen-back-btn{display: none;}

.show-five-screen-div .five-screen-back-btn{display: block;}
.show-five-screen-div  .first-screen-back-btn{display: none;}
/*back bitton css*/






/*tabs inner css*/
.show-second-screen-div .show-second-screen .heading-top h4{    margin: 1rem 0px;}
.show-second-screen-div .show-second-screen .heading-top{border-bottom: None!important}
.show-second-screen-div .show-second-screen .send-mony-amount{    margin-top: 1rem;}
.show-second-screen-div .wallet-decline-main-body{    height: auto;}
.show-second-screen-div .send-mony-amount form input{    font-size: 67px;}


.show-three-screen-div .show-three-screen .heading-top{    display: contents;}

.wallet-decline-header .media-body h5 {font-size: 19px;    letter-spacing: 0px;}
.main-heading-member-ship{    border-bottom: 1px solid lightgrey;
    padding: 1rem 0px}
    .main-heading-member-ship p{font-size: 14px;margin-bottom: 0px;letter-spacing: 0.38px;
color: #686868;}
    .main-heading-member-ship h6{    font-size: 19px;}

.show-four-screen .confirmation-page .heading-top {    padding-top: 1rem;flex-direction: column;border-bottom: 0px!important}
.show-four-screen .confirmation-page .heading-top h6 {
    font-size: 20px;}
    .show-four-screen .confirmation-page .heading-top p {
      letter-spacing: 0px;
color: #686868;font-size: 18px}
.show-four-screen .confirmation-page{padding: 0px!important}
.show-four-screen  .bill-bottom-section .head-in-head p{font-size: 16px;color: #000;letter-spacing: 0px;margin-bottom: 0px;}
.show-four-screen  .bill-bottom-section .head-in-head p span{color: #686868!important}
.show-four-screen  .bill-bottom-section .list-bill ul{    margin-bottom: 3rem;}
.pay-icon{display: none;}
.add-bank-body.success .pay-icon{display: block!important;}
.add-bank-body.success .normal-icon {display: none;}

/*success page and decline page */
.show-five-screen .Declined-page{display: none;padding-top: 2rem;}

.failed .show-five-screen .Declined-page{display: block!important;    }
.failed .success-page{display: none;}
.failed  .success-done-btn{display: none!important;}
/*success page and decline page  close*/
.success-page{padding-bottom: 3rem}
.success-page .success-details  .table td {
      padding: 10px 0px 0px;
    vertical-align: top;
    border-top: none;
        font-size: 15px;
}
.success-page .success-details{   margin-top: 2rem;  border-top: 1px solid  #f2f2f2;
    padding-top: 0rem;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: .5rem;    padding-left: 0px;
    padding-right: 0px;}
.success-page .success-details .table{margin-bottom: 0px}
.success-page .header-success-gif img{    margin-bottom: 1rem;    margin-top: 2rem;}
.success-notes p{    letter-spacing: 0.57px;
    color: #000000;
    font-size: 21px;
    width: 100%;
    margin: auto;
    font-weight: normal;
    padding: 0px 7rem;
}

.success  .failed-try-again-btn{visibility: hidden;}
.success  .failed-Not-Now-btn{display: none!important;}
.add-bank-body{margin: auto;}
.right-side-list ul {    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-direction: column;}
    .right-side-list{    width: 50%;
    margin: auto;}
    .right-side-list ul li{padding: 10px 5px ; cursor: pointer;}

      .right-side-list ul li a  {letter-spacing: 1.47px;
color: #A1A1A1!important;font-size: 18px; transition: .5s ease ;position: relative;    font-weight: bolder;}

      .right-side-list ul li:hover a{color: #000!important}
      .right-side-list ul li a::before{    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background: #22a7de;
    bottom: 0px;transition: .5s ease width}
      .right-side-list ul li:hover a::before{    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #22a7de;
    bottom: 0px;transition: .5s ease width}
    .right-side-list ul li.active a::before{    content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #22a7de;
  bottom: 0px;transition: .5s ease width}
      .right-side-list ul li.active a{color: #000!important}
.transfer-screen-1 .modal-footer-decline .first-screen-next-btn{width: auto;    padding-left: 15px;
    padding-right: 15px;}

/*transfer page*/
     .transfer-page .wallet-decline-header .media-body h5{    font-size: 18px;
    letter-spacing: 0px;
    font-weight: bold;
    color: #000;}
       .transfer-page   .show-first-screen .heading-top h6{margin: 1rem;}

         .transfer-page .show-first-screen-div .modal-footer-decline .first-screen-back-btn{    visibility: hidden;}

            .transfer-page .show-second-screen .add-account-save-account ul{    border-top: 1px solid lightgrey;}
              .transfer-page .show-second-screen .add-account-save-account  ul li {
    padding: 20px 0px;}
                .transfer-page .show-second-screen .heading-top{padding: 1rem 0px;}
                .transfer-amount-card-details .media .media-left img{width: 39px;
height: 26px;object-fit: contain;}
          .transfer-amount-card-details .media .media-left{margin-right: 1rem}
                    .transfer-amount-card-details .media .media-body h5{text-align: left;margin-bottom: 0px}
                    .transfer-amount-card-details .media{width: 20%;    margin: auto auto 1rem;}
                    .transfer-amount-card-details p{font-size: 18px;
    color: #686868;}

     .transfer-page  .from-and-to-seection .media .media-body span{color: #686868!important }
        .transfer-page  .from-and-to-seection .media .media-body .card-total{    color: #000;
    font-weight: bold;}
         .transfer-page .show-four-screen-div .four-screen-Confirm-btn  {    width: auto;
    padding-left: 15px;
    padding-right: 15px;}
    /*transfer page close*/


    /*send money screen*/
    .send-money-screen .show-first-screen .searh-bar-Freinds{padding: 0px!important}
        .send-money-screen .show-first-screen .searh-bar-Freinds label{    width: 100%;
    position: relative;
    margin: 1.5rem 0px;}
        .send-money-screen .show-first-screen .searh-bar-Freinds label input{width: 100%;border: 2px solid #00000033;    padding-left: 3rem;
border-radius: 4px;height: 50px;}
.send-money-screen .show-first-screen .searh-bar-Freinds label img{position: absolute;left: 15px;top: 50%;transform: translateY(-50%);}
    .send-money-screen .Featured-Contacts-div{padding: 0px!important}
      .send-money-screen .heading-Feature-Contacts h4 {letter-spacing: 0.49px;
color: #000000;font-size: 18px;font-weight: 900}
      .send-money-screen .heading-Feature-Contacts{ padding-bottom: .5rem;}
              .send-money-screen  .Featured-Contacts-div .Featured-Contacts-list {padding: 0px!important}
        .send-money-screen  .Featured-Contacts-div .Featured-Contacts-list ul {border-top: 1px solid #f2f2f2}
                .send-money-screen  .Featured-Contacts-div .Featured-Contacts-list ul li{border-bottom: 1px solid #f2f2f2;padding: 10px;transition: .5s ease;cursor: pointer;}
                  .send-money-screen  .Featured-Contacts-div .Featured-Contacts-list ul li .media .media-left img{width: 52px;border-radius: 50%;
    border: 1px solid #ececec;
height: 52px;object-fit: cover;}
  .send-money-screen  .Featured-Contacts-div .Featured-Contacts-list ul li .media .media-body h4{margin-bottom: 0px;font-size: 16px;color: #000000;}
    .send-money-screen  .Featured-Contacts-div .Featured-Contacts-list ul li .media .media-right button {width: 88px;
height: 30px;background: #22A7DE 0% 0% no-repeat padding-box;
border-radius: 4px;border: none;letter-spacing: 0.43px;
color: #FFFFFF;font-size: 16px}
    .send-money-screen  .Featured-Contacts-div .Featured-Contacts-list ul li .media .media-right button{display: none; transition: .5s ease}
        .send-money-screen  .Featured-Contacts-div .Featured-Contacts-list ul li:hover .media .media-right button{display: block;}
        .send-money-screen  .Featured-Contacts-div .Featured-Contacts-list ul li:hover   {background: #22A7DE0F}

        .heading-top-friend .media {max-width: 40%;
    margin: auto;}
  .heading-top-friend .media .media-left img  {    width: 60px;
    height: 60px;border-radius: 50%;    border: 1px solid #ececec;object-fit: cover;}
.note-fields textarea{width: 100%}
  .send-money-screen .show-second-screen .main-contain-decline .heading-top-friend{    margin-top: 2rem;}
  .send-money-screen  .friends-send-notes{    margin-top: 2rem;}
  .send-money-screen  .friends-send-notes textarea{background: #f2f2f2;
    border-bottom: 2px solid #22a7de;}
  .send-money-screen   .Send-money-Membership-card{       margin-top: 1rem;    padding: 10px 0px;
    border-bottom: 1px solid #f2f2f2;}
    .send-money-screen   .Send-money-Membership-card h4{letter-spacing: 0.49px;
color: #000000;font-size: 18px;font-weight: bold;margin-bottom: 0px}
    .send-money-screen   .Send-money-Membership-card p{margin-bottom: 0px;letter-spacing: 0.38px;
color: #686868;font-size: 14px}
    .send-money-screen .membership-card-send-change {padding: 15px 0px!important;border-bottom: 1px solid #f2f2f2;    margin-bottom: 1rem;}
      .send-money-screen .membership-card-send-change .card-image img{width: 60px;
height: 40px;border-radius: 4px;object-fit: contain;}
      .send-money-screen .membership-card-send-change .card-details .card-name h4{letter-spacing: 0.27px;
color: #000000;margin-bottom: 0px;font-size: 16px}
.send-money-screen .membership-card-send-change .card-details .card-Balance span {letter-spacing: 0px;
color: #686868;font-size: 14px}
.send-money-screen .membership-card-send-change .card-details .card-Balance h3{letter-spacing: 0px;
color: #283A90;font-weight: 900;font-size: 18px;margin-bottom: 0px}
.send-money-screen .membership-card-send-change .media-right button{border: 2px solid #22A7DE;
border-radius: 4px;background: transparent;letter-spacing: 0.58px;
color: #22A7DE;    padding: 5px 10px;}
.send-money-screen  .send-money-Freinds-details{padding: 10px 0px!important;
    border-bottom: 1px solid #f2f2f2;}

  .send-money-screen  .send-money-Freinds-details .media .media-left  img  {width: 52px;
height: 52px;border-radius: 50%;object-fit: contain;}

  .send-money-screen  .send-money-Freinds-details .media  h4{font-size: 16px;letter-spacing: 0px;
color: #000000;margin-bottom: 0px}
  .send-money-screen  .list-bill{padding: 0px!important;    margin-bottom: 2rem;}
  .send-money-screen  .list-bill ul{   border: 1px solid;
    border-width: 1px 0px;
    border-color: #d5d5d5;
    margin: 0px;
    padding: 1rem 0px;}
    .send-money-screen  .list-bill ul li .right-side-price{text-align: right;}
        .send-money-screen  .list-bill ul li p{margin-bottom: 0px}
                .send-money-screen  .list-bill ul li{padding-bottom: 10px;display: flex;justify-content: space-between; }

                /*send mony screem issue */

.member-ship-save-btn,.member-ship-cancel-btn{display: none;}
.select-card-show .member-ship-save-btn, .select-card-show .member-ship-cancel-btn{display: block!important;}

.select-card-show  .send-btn, .select-card-show .third-screen-back-btn {display: none!important;}
.select-card-show .wallet-decline-header {    background: #22A7DE;}
.select-card-show .noraml-header{display: none;}
.show-select-cards-div{display: none;}
.select-card-show .show-select-cards-div{display: block;}
.member-ship-cancel-btn{    color: #fff!important;letter-spacing: 0px;font-size: 21px;}
.show-select-cards-div .main-heading-member-ship{    margin: 2rem 0px 0px;border-bottom:none!important;text-align: center;}
.send-money-screen .success-notes p{padding: 0px 5rem;}
.send-money-screen .success-details .table td {
    padding: 15px 0px 0px;}

    .write-a-notes{text-align: center;position: relative;    width: 70%;
    margin: auto;}
        .write-a-notes p::before{content: '';
    width: 24px;
    height: 24px;
    background: url(/api/public/images/website-images/wallet-qouate.svg) no-repeat;
    position: absolute;
    right: 0px;
    background-size: contain;
    bottom: -10px;}
    .write-a-notes p::after{content: '';
width: 24px;
height: 24px;
background: url(/api/public/images/website-images/wallet-qouate2.svg) no-repeat;
position: absolute;
left: 0px;
background-size: contain;
top: -10px;}

  .write-a-notes p{  padding: 0px 12px;
    letter-spacing: 0px;
    color: #000;
    font-size: 22px;}
.write-a-notes-div{margin-top: 2rem;}

.request-money .heading-top-friend .media {
    max-width: 70%;
    margin: auto;
}
.request-bill ul{padding: 10px!important;}
.request-bill  ul li {
    padding-bottom: 0px!important;}


.confirmation-massage p {font-size: 23px;
letter-spacing: 0px;
color: #000000;text-align: center;
    margin-bottom: 2rem;}
    .notify-massage{        margin: 3rem auto 0px;
    text-align: center;
    width: 70%;}
    .notify-massage p  {letter-spacing: 0px;
color: #686868;font-size: 18px;margin-bottom: 0px}
/*pannel page css*/
.pannel-page{    margin: 2rem auto 4rem;    max-width: 90%!important;}
.pannel-page .right-side-list {
    width: 100%;}

    /*pannel page css close*/

  .pannel-page .right-side-body{padding: 0px!important}
    .pannel-page .right-side-body .col-md-7 .col-md-12{padding: 0px!important}
    .pannel-page .right-side-body .col-md-7  .panel-headign .media .media-left{margin-right: 1rem}
        .pannel-page .right-side-body .col-md-7  .panel-headign .media .media-body h1{margin-bottom: 0px;font-size: 24px;letter-spacing: 0px;
color: #000000;font-weight: bolder;}
.pannel-page .right-side-body .col-md-7  .panel-headign .media .media-left{margin-right: 1rem}
    .pannel-page .right-side-body .col-md-7  .panel-headign{margin-bottom: 1rem;}
      .pannel-page  .request-card .card-head-image-and-btn{   padding:  1rem
         1rem; display: flex;
    justify-content: space-between;
    align-items: center;}
        .pannel-page  .request-card {background: transparent linear-gradient(116deg, #22A7DE 0%, #283A90 100%) 0;border-radius: 4px;    margin-bottom: 1rem;}
          .pannel-page  .request-card .card-head-image-and-btn .card-profile-image img{width: 41px;
height: 41px;object-fit: contain;}
  .pannel-page  .request-card .card-head-image-and-btn .card-pay-btn button{background: transparent;width: 84px;
height: 28px;border: 1px solid #FFFFFF;
border-radius: 4px;letter-spacing: 0.33px;
color: #FFFFFF;}

  .pannel-page  .request-card .name-and-amount h1{letter-spacing: 0.38px;
color: #FFFFFF;font-size: 16px;font-weight: 100;}
  .pannel-page  .request-card .card-note{text-align: center;margin: 2rem auto;color: #fff;width: 65%;position: relative;    padding: 5px 10px;}
  .pannel-page  .request-card .card-note p{margin-bottom: 0px}

  .pannel-page .request-card .card-note p::before{content: '';position: absolute;    top: -5px;left: 0px;width: 20px;height: 20px;background: url(/api/public/images/website-images/wallet-panel-quoat.svg)no-repeat;}
  .pannel-page .request-card .card-note p::after{content: '';position: absolute; bottom: -10px;right: 0px;width: 20px;height: 20px;background: url(/api/public/images/website-images/wallet-panel-quoat2.svg)no-repeat;}

  .pannel-page  .request-card  .date-and-time{    padding: 0px 1rem 1rem;
    text-align: right;
    letter-spacing: 0px;
  color: #FFFFFF;font-size: 12px}

  .pannel-page   .Balance-card{padding: 15px!important;background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 1px #0000001F;
border-radius: 4px;    margin: 2rem 0px;}
  .pannel-page   .Balance-card .blance-card-main-b{    padding: 1rem 1rem 0px;}
    .pannel-page   .Balance-card .blance-card-main-b .title{    margin-top: 1rem;}
        .pannel-page   .Balance-card .blance-card-main-b .title h5{letter-spacing: 0.11px;
color: #22A7DE;font-size: 16px}

  .pannel-page   .Balance-card .blance-card-main-b .title h1{font-size: 47px;letter-spacing: 0px;
color: #686868;    margin-bottom: 2rem;margin-top: 1rem}

  .pannel-page .footer-money{   text-align: center;
    border-top: 1px solid #22A7DE;    padding: 10px 0px 10px;
}
    .pannel-page .footer-money  a{color: #22A7DE!important;letter-spacing: 0.1px;}
    .three-btn ul{display: flex;justify-content: space-between}

    .three-btn ul li a .rounf-btn
    {width: 60px;height: 60px;background: transparent linear-gradient(180deg, #22A7DE 0%, #283A90 100%) 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #6868688F;    display: flex;align-items: center;    margin-bottom: 10px;
    border-radius: 50%;
    justify-content: center;}
      .three-btn ul li p{text-align: center;letter-spacing: 0.11px;
color: #000000;margin-bottom: 0px}
.Recent-moves .header-headign .media-body h4{margin-bottom: 0px;letter-spacing: 0px;
color: #000000;font-size: 20px;font-weight: bold;}
.Recent-moves .header-headign .media-left img{width: 40px;
    height: 20px;
    object-fit: contain}
.Recent-moves .header-headign {    margin-bottom: 1rem;}
.Recent-moves-list{background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 2px 2px #00000024;
border-radius: 4px;padding: 0px;}
.Recent-moves-list ul{margin-bottom: 0px}
.Recent-moves-list ul li .media .media-left img{
box-shadow: 0px 1px 1px #00000024;
opacity: 1;width: 42px;
height: 42px;border-radius: 50%;object-fit: contain;}
.Recent-moves-list ul li .media .details-name-and-amount{width: 100%;
    display: flex;
    border-bottom: 1px solid #d2d2d2;
    padding: 0px 15px 10px 0px;}
    .Recent-moves-list ul li .media .details-name-and-amount .name,  .Recent-moves-list ul li .media .details-name-and-amount .date p, .Recent-moves-list ul li .media .details-name-and-amount .status p{margin-bottom: 0px}

    .Recent-moves-list ul li .media .details-name-and-amount .name{letter-spacing: 0px;
color: #000000;font-size: 16px;font-weight: bolder}
 .Recent-moves-list ul li .media .details-name-and-amount .date p{letter-spacing: 0px;
color: #686868;font-size: 14px}
 .Recent-moves-list ul li .media .details-name-and-amount .status p{letter-spacing: 0px;
color: #686868;font-size: 14px}
 .Recent-moves-list ul li .media .details-name-and-amount  .price h5{margin-bottom: 0px;font-weight: bold;font-size: 16px}
  .Recent-moves-list ul li {    padding: 15px 0px 0px;cursor: pointer;transition: .5s ease}
   .Recent-moves-list ul li .media .media-left{    margin-left: 1rem;}
     .Recent-moves-list ul li:hover{background: #22A7DE0F}
     .Recent-moves{padding: 0px!important}
     .more-button-right-side-list{padding: 0px!important;border-top: 1px solid #d2d2d2;}
      .more-button-right-side-list button{width: 100%;
    padding: 15px;
    background: transparent;
    border: none;transition: .5s ease;font-size: 16px}
      .more-button-right-side-list button span{margin-right: .5rem;}
      .more-button-right-side-list button:hover{background: #22A7DE0F;color: #22A7DE}
      .Recent-moves-list ul li:last-child .media .details-name-and-amount{border-bottom: none!important}
      .Panel-main-bb{    padding: 0px 30px 0px 0px;}


      /*Invoice -page css*/

      .invoice-design{display: none;}
      .view-Invoice .invoice-design{display: block!important;}
        .view-Invoice  .right-side-main-body{display: none;}
        .invoice-design {background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 2px 2px #00000024;
border-radius: 4px;}
.view-Invoice .right-side-body {
    padding: 0px 0px 0px 40px!important;
}
.view-Invoice .left-side-menus{    max-width: 20%;}
.invoice-design{padding: 0px!important}
.invoice-design .invoice-body .invoice-header{    padding: 10px 15px;
    border-bottom: 1px solid #f2f2f2;}

.view-Invoice  .invoice-body .invoice-header .media-body h2{letter-spacing: 0px;
color: #000000;
opacity: 1;font-size: 21px;font-weight: bold;margin-bottom: 0px}
.invoice-body-main-b .Transaction-Details .Transaction-Details-m{    display: flex;
    justify-content: space-between;    padding: 20px 15px;
    border-bottom: 1px solid #d6d6d6;}

    .invoice-body-main-b .Transaction-Details .Transaction-Details-m .title h4{letter-spacing: 0.06px;
color: #000000;margin-bottom: 0px;font-size: 18px}
    .invoice-body-main-b .Transaction-Details .Transaction-Details-m .details{text-align: right;}
        .invoice-body-main-b .Transaction-Details .Transaction-Details-m .details p{margin-bottom: 0px;letter-spacing: 0px;
color: #707070;font-size: 16px;}

        .invoice-body-main-b .Transaction-Details .Transaction-Details-m .details .Complete-btn{    margin-top: 5px;width: 120px;
height: 31px;
background: #00A791 0% 0% no-repeat padding-box;
border-radius: 4px;border: none;color: #fff}
.details-of-transition .media {    padding: 20px 15px;
    border-bottom: 1px solid #d6d6d6;}
    .details-of-transition .media .media-left img{width: 46px;border-radius: 50%;
height: 46px;object-fit: contain;box-shadow: 0px 1px 1px #00000024;}
.details-of-transition .media .media-body{padding: 0px 15px;}
.details-of-transition .media .media-body h4{letter-spacing: 0px;
color: #000000;font-size: 16px}
.details-of-transition .media .media-body .details-date-and-time{padding: 0px!important}
.details-of-transition .media .media-body .details-date-and-time p{letter-spacing: 0px;
color: #686868;margin-bottom: 0px;font-size: 16px}
.details-of-transition .media .groess-amount{text-align: right;}
.details-of-transition .media .groess-amount h6{letter-spacing: 0.33px;
color: #000000;margin-bottom: 10px;font-size: 14px}
.details-of-transition .media .groess-amount h1 {margin-bottom: 0px;letter-spacing: 0.16px;
color: #000000;font-size: 27px;font-weight: bold;}
.view-Invoice  .billing-details{display: flex;
    justify-content: space-between;    padding: 20px 15px;
    border-bottom: 1px solid #d6d6d6;}
.Your-Payment .table th, .Your-Payment .table td{border-top: 0px;
    padding: 5px 0px;
    font-size: 14px}
.footer-total-btn td{border-top: 1px solid #d6d6d6!important}

.view-Invoice  .billing-details .billing-details-left, .view-Invoice  .billing-details .billing-details-right{width: 50%}
.billing-heading{letter-spacing: 0.96px;
color: #000000;font-weight: bolder;font-size: 16px}
.billing-details .billing-details-left p {letter-spacing: -0.38px;
color: #000000; font-size: 16px}
.billing-details-right .payment-type p{ letter-spacing: -0.38px;
color: #000000; font-size: 16px}
.billing-details .billing-details-left button{padding: 0px;
    background: transparent;
    border: none;}
    .billing-details .billing-details-left button .media-body{margin-right: .5rem}
      .billing-details .billing-details-left button .media-body p{margin-bottom: 0px;letter-spacing: -0.38px;
color: #A2A2A2;font-size: 16px}
      .billing-details .billing-details-left button .fa-question-circle{    color: #22a7de;}
      .billing-details .table{margin-bottom: 0px}
      .Currency-conversion{    padding: 20px 15px;
    border-bottom: 1px solid #d6d6d6;}
        .Currency-conversion  .list-Curnecy ul{margin-bottom: 0px;display: flex;justify-content: space-between;}
          .Currency-conversion  .list-Curnecy ul li::after{    content: '';
    position: absolute;
    right: -30px;
    width: 2px;
    height: 20px;
    background: #A2A2A2;}
      .Currency-conversion  .list-Curnecy ul li{position: relative;}
      .list-Curnecy{    display: flex;
    justify-content: space-between;}
          .list-Curnecy .vertical-height{   width: 2px;
height: 17px;
    background: #A2A2A2;
    margin: auto 1rem;}
      .list-Curnecy p{margin-bottom: 0px}
          .list-Curnecy .cc-list{display: flex;       width: 100%;}
            .list-Curnecy p span b{color: #000}

            .Contact-information{    padding: 20px 15px;
    border-bottom: 1px solid #d6d6d6;    display: flex;}

                .Contact-information .title-headign {    width: 30%;}
                .Contact-information .Contact-information-right-side-information{width: 70%;}
                            .Contact-information .Contact-information-right-side-information p{margin-bottom: .5rem}
                          .Contact-information .Contact-information-right-side-information .name  {font-size: 16px;letter-spacing: 0.96px;
color: #000000;}

.payment-receiver {letter-spacing: -0.38px;
color: #686868;font-size: 16px;color: #686868}
.payment-receiver .color-black b{color: #000!important}
                                  .Contact-information .Contact-information-right-side-information .Email{margin-bottom: 0px!important}
                                  .print-button-div{    padding: 20px 15px;}
                                    .print-btn{background: #FFFFFF00 0% 0% no-repeat padding-box;
border: 1px solid #22A7DE;
border-radius: 4px;width: 162px;
height: 37px;color: #22A7DE}

.invoice-header{cursor: pointer;}
.pannel-page .request-card .card-head-image-and-btn .card-pay-btn button a{color: #fff!important}

/*Send-money screem issue close */



/*Mobile view version*/


@media only screen and (max-width: 768px)  {
  .right-side-list{display: none;}
  .Panel-main-bb {
    padding: 0px 15px 0px 15px;
}
.pannel-page{    max-width: 100%!important;margin: 0rem auto 0rem;
    padding: 0px;}
    .pannel-page .request-card .card-note{width: 95%;    margin: 1rem auto;}
.pannel-page .row {margin: 0px;}
}