body{background: #f2f2f2!important}
.mg-auto{margin: auto;}
.right-side-body li{list-style: none;float: left;width: 33.33%;    padding: 1rem 0rem 1rem 0rem;}
.edit-prodile-icon{width: 30px;
    position: absolute;
    right: 0px;
    transform: translate(15px, 0px);
}

.UV-Email{background: #22A7DE 0% 0% no-repeat padding-box!important;
border-radius: 4px;width: auto;
height: 23px;letter-spacing: 0px;
color: #FFFFFF;font-size: 14px}
.main-profile-details{   height: 100%;
  background: #fff;
  margin: 0px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-container-main{background: #fff;
  margin: 2em auto;
  max-width: 80%!important;}
.main-profile-details .profile-boady-parent-ss{border-bottom: 1px solid #f2f2f2;
  padding: 1rem 10px;
  border-radius: 5px;}
.right-menu-list-main .media{float: right!important;}
.profile-container-main .right-side-body{    max-width: 90%;margin: auto;}
.main-flowing-Followers-parent{    width: 40%!important;
    margin: auto;
}

.profile-boady-parent-ss{text-align: center;}
.right-menu-list-main .media{width: 100%}
.right-side-body ul{overflow: auto;}
.right-side-body ul li{cursor: pointer;}
.right-side-body ul li p{margin-bottom: 0px;color: #686868}

.right-side-body ul li h5{    font-size: 16px;
    margin-bottom: 0px;}

    .profile-container-main{border-radius: 10px;
    box-shadow: 0px 1px 7px -4px #000;}
@media only screen and (min-width: 768px) {

  .mobile-nav-bar{display: none!important;}
  .mobile-show{display: none;}
  }
@media only screen and (max-width: 768px) {
  .main-profile-details .profile-boady-parent-ss{padding: 1rem 15px;}
  .profile-image-main{width: 100%;
    float: left;
    position: relative;}
.profile-container-main{padding: 0px!important}
.profile-title-subtitle{width: 80%;
    float: left;
    text-align: left;
    padding-left: 2rem;}
header{display: none;}
.mobile-nav-bar .media{width: 100%}
.mobile-nav-bar .media .media-left a{color: #22a7de!important;}
.mobile-nav-bar .media .media-body h5{margin-bottom: 0px;    text-align: center;}
.mobile-nav-bar{background: #fff;
    box-shadow: 0px 1px 3px #0000004d;
    position: sticky;
    z-index: 1;
    height: 45px;
    display: flex;
    align-items: center;}
  .profile-container-main{margin: 0em auto;border-radius: 0px!important;
    max-width: 100%!important;}
    .main-flowing-Followers-parent {
    width: 100%!important;}
    .main-flowing-Followers-parent .row{    width: 100%;
    display: contents;}
    .right-side-body li {
    list-style: none;
    float: left;
    width: 100%;
    padding: 20px 0rem 0rem 10px;
}
.UV-Email{font-size: 14px;}
.main-flowing-Followers-parent{display: flex;    padding-left: 25%;}
.main-flowing-Followers-parent .col-md-6{    text-align: left;font-size: 12px;}
.porfile-image-top-head{    height: 60px;
    width: 60px;
    border-radius: 50%;
    object-fit: contain}
    .profile-title-subtitle h4{margin: 0px;    font-size: 20px;}
    .profile-title-subtitle p{ margin: 0px;
    color: #686868;}
    .profile-container-main .right-side-body {
    max-width: 100%;
    margin: auto;
    padding: 0px;
}
.right-menu-list-main .mr-5{margin-right: 1rem!important}
}
/*new css*/
.rightsid-main-div #pills-tab {display: flex;
    flex-direction: column;    margin-bottom: 0px!important;}
.profilesection .mainbody-div{    background: #fff;
    margin: 4rem auto;box-shadow: 0px 2px 2px #00000024;max-width: 90%;
border-radius: 4px;}
.profile-heder-main{height: 10vh;display: flex;
    align-items: center;border-bottom: 1px solid #f2f2f2;}

    .rightsid-main-div::-webkit-scrollbar {
  display: none;
}
.rightsid-main-div {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.profile-heder-main h4{letter-spacing: 0.34px;
color: #000000;margin-bottom: 0px;font-size: 18px;
    font-weight: bolder;}
    .left-side-column{border-right: 1px solid #f2f2f2;
    padding: 0px;}

    .rightsid-main-div, .right-side-column{padding: 0px!important}
    .rightsid-main-div #pills-tab .nav-link.active{background-color: #22a7de0d;
    border-radius: 0px;}
    .profile-image-main{position: relative;}
    .profile-image-main .porfile-image-top-head {width: 60px;
height: 60px;border-radius: 50%}
.top-user-section .media-body .user-name-and-title h1{letter-spacing: 0.29px;    font-size: 18px;
    color: #000;
    font-weight: bolder;margin-bottom: 0px}

    .top-user-section .media-body .user-name-and-title p{letter-spacing: 0.29px;
color: #686868;    font-size: 16px;margin-bottom: 0px;}
.top-user-section .media-body  .follow-following{display: flex;justify-content: space-between;padding: .5rem 4rem .0rem 1rem;}
.following, .following{display: flex;font-size: 14px;
    color: #000;}
.top-user-section .media-body  .follow-following .count{margin-right: .4rem}
#pills-tab .nav-link{border-radius: 0px;border-bottom: 1px solid #f2f2f2; padding-top: 1rem;padding-bottom: 1rem;transition: .5s ease;position: relative;}

.icon-li .media-body h5{;margin-bottom: 0px;
    font-size: 18px;
    color: #000}
    .icon-li .media-body p{margin-bottom: 0px;color: #686868;font-size: 14px;}
    .rightsid-main-div #pills-tab .nav-link.active::before{content: "";
    position: absolute;
    height: 100%;
    width: 3px;
    top: 0px;
    left: 0px;
    background: #22a7de;}

    /*new css close*/

/*edit profile css*/
  .avatar-edit input{display: none;}
  .avatar-edit label{cursor: pointer;height: 40px;
    width: 40px;
    background: #22a7de;
    padding: 9px;
    border-radius: 50%;}
.avatar-upload{display: flex;
    justify-content: center;
    align-items: center;}
   .avatar-edit{position: relative;}
  .avatar-edit label{position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    right: 0%;
    transform: translate(0%, 75%);
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;}
    .images-profile{height: 100%;
    width: 100%;}
        .images-profile img{height: 130px;
    width: 130px;
    object-fit: contain;
    border-radius: 50%;}
    .form-main-div-edit-profile .form-row .col-md-12 input{font-size: 20px;color: #000;}
      .form-main-div-edit-profile .form-row .col-md-12 label{    margin: 0px;
    font-size: 12px;
    color: grey;
    letter-spacing: 0.4px;}
    .form-main-div-edit-profile{    width: 80%;
    margin: auto;}
    .form-main-div-edit-profile .form-row .col-md-12{padding: 0px!important}
  .form-main-div-edit-profile  .effect-1 ~ .focus-border{width: 100%;}
        .top-user-image-edit{margin: 4rem 0px 1rem 0px;}
.effect-1:focus{outline:none!important;box-shadow: None}
.effect-1 {border: 0; padding: 0px 0px 7px 0px; border-bottom: 1px solid #ccc;width: 100%;border-radius: 0px!important}
.effect-1 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.form-main-div-edit-profile .label{margin: 0px;
    position: absolute;
    left: 0px;
    bottom: 0px; transition: .5s ease}
    .effect-1:focus ~ .label{  position: absolute;
      left: 0px;
      top: 0px;
      font-size: 12px;}
    .form-main-div-edit-profile .form-field{    height: 40px;
    position: relative;}
    .save-btn-on{background: #22A7DE 0% 0% no-repeat padding-box;
box-shadow: 0px 1px 3px #00000029;
border-radius: 4px;width: 184px;
height: 45px;letter-spacing: 0.49px;
color: #FFFFFF;}
.submit-save-btn-section{margin: 2rem 0px;
    display: flex;
    justify-content: flex-end;
    padding: 0px;}

.form-main-div-edit-profile ::placeholder{color: #68686896;font-size:14px;}
 .form-main-div-edit-profile ::-ms-input-placeholder{color: #68686896;font-size:14px;}
.form-main-div-edit-profile ::-ms-input-placeholder{color: #68686896;font-size:14px;}
.right-side-column .rightside-mainbody{padding: 0px;}

/*edit profile css close*/

/*Bio css*/

#the-count{   margin: .5rem 0px 0px; font-weight: normal;
    display: flex;
    justify-content: flex-end; color: #22a7de;}
    #pills-Bio .discription-bio {    width: 90%;margin: 3rem auto 2rem auto;}

        #pills-Bio .discription-bio textarea{background: #6868680F;
    height: 120px;
    border-radius: 6px 6px 0px 0px;
    letter-spacing: 0.31px;
    color: #686868;
    font-size: 14px;
    padding: 1rem;border-bottom: 2px solid #22a7de;}
      #pills-Bio .discription-bio textarea:focus{box-shadow: none;outline: none   }
      /*Bio css close*/

      /*gender css*/

      .gender-list .li-gender ul li label{width: 100%;cursor: pointer;    padding: 1rem 10px 1rem 0px;}
        .gender-list{width: 90%;
    margin: 1rem auto;padding: 0px}
  .gender-list .li-gender ul li .media-right{position: relative;}
.li-gender .form-check-input {margin-top: 0px;
    margin-left: -20px;
    height: 20px;
    width: 20px;}
        .gender-list .li-gender ul li {border-bottom: 1px solid #f2f2f2;    cursor: pointer;}

.li-gender{padding: 0px!important}
.gender-list .li-gender ul li h5{margin-bottom: 0px; font-size: 16px; letter-spacing: 0px;
color: #000000;}
.header-headigngander-div{  padding: 1rem 0px;
    border-bottom: 1px solid #f2f2f2;}

.header-headigngander-div .header-headign-gender{    width: 90%;
      margin: 1rem auto 0rem;
    padding: 0px;}
    .header-headigngander-div .header-headign-gender h4{margin: 0px;font-size: 16px;color:#686868 }
    /*gender close*/
/*Birthdate css*/

#day-btn, #Month-btn, #Year-btn{    background: transparent!important;
    color: #000!important;
    border: none!important;
    border-bottom: 1px solid #22a7de!important;
    border-radius: 0px;
    padding: 5px 5px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;}
    #day-btn:focus, #Month-btn:focus, #Year-btn:focus{box-shadow: none;outline: none}
    .Birthdate-day-dropdown .dropdown-menu, .Birthdate-month-dropdown .dropdown-menu, .Birthdate-Year-dropdown .dropdown-menu {height: 300px;
    overflow-y: auto;
    width: 100%;  }
    .date-Birthdate .top-labels{    margin: 0px;
    font-size: 12px;
    color: #686868;
    letter-spacing: 0.22px;}


    .date-Birthdate{display: flex;width: 90%;
    margin: 2rem auto 1rem auto;}
    .whos-see-section .form-select-section {display: flex;}
      .whos-see-section .form-select-section .buttons-div{width: 50%;    padding: 0px 10px 0px 0px;}
            .whos-see-section .form-select-section .buttons-div .Who-seesbutton{width: 100%}
            .Who-seesbutton .media .media-body{text-align: left;}
            .whos-see-section .form-select-section .buttons-div .Who-seesbutton  {background: transparent;border:0.5px solid #dbdbdb;
border-radius: 4px;padding: 2px 10px;}
.Who-seesbutton .media-body label{margin: 0px;
    font-size: 14px; color: #000}
    .result-show-who .media-left{margin-right: .2em;}
    .result-show-who .media-body span{font-size: 12px;
    color: #686868; }
    .result-show-who{    margin-top: -5px;}
      .whos-see-section .form-select-section .buttons-div .media-right .fa-chevron-down{    color: #686868;}
      .whos-see-section{    margin: 3rem auto;
    width: 90%;}
        .whos-see-section .headign .color-blue{letter-spacing: 0px;
color: #22A7DE;
opacity: 1;font-size: 18px}
#pills-Birthdate .notes {width: 85%;
    margin: auto;}
#pills-Birthdate .notes .color-blue{color: #22A7DE!important;}
.save-button-section-birthdate{    width: 85%;
    margin: auto;}
    .email-verification{background: #f5f5f5;
    width: 90%;
    margin: 3rem auto;
    border-radius: 6px;}
    .footer-email-verification{display: flex;
    justify-content: flex-end;    padding-top: 2rem;}
.email-verification .Email-alerts-div{padding: 2rem 1rem;}

.email-verification .Email-alerts-div .media-left .info-icon{height: 25px;
    width: 25px;
    background: #ff000000;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #000;
    font-size: 14px;
    font-weight: normal;}
.email-verification .Email-alerts-div .media-body h4{    font-size: 22px;
    margin-bottom: 0px;
    letter-spacing: -0.67px;
    color: #000000;}
.email-verification .Email-alerts-div .media-body {margin: auto;}
.email-verification .Email-alerts-div .media{margin-bottom: 1rem}
.email-verification .Email-alerts-div .massage-text p{letter-spacing: -0.13px;
    color: #686868;
    font-size: 16px;margin-bottom: 0px}
    .remove-btn,.Retry-btn{    width: 12%;
    text-transform: uppercase;
    color: #686868;
    text-align: right;
    font-size: 15px;
    letter-spacing: -0.58px;}

    .Retry-btn .color-blue{color: #22A7DE!important}

    /*Mobile update css*/
    .phone-form-section .intl-tel-input .flag-container{position: relative;margin-right: 1rem;}
    .phone-form-section #phone{padding: 0px;
    border: none;  }
    .phone-form-section .allow-dropdown{    display: flex;}
    .main-mobile-body{margin: 4rem auto;
    width: 90%;}

    .phone-form-section  .flag-container .selected-flag{    width: 100px!important;
    height: 32px;
    border: 1px solid #22A7DE;
    border-radius: 4px;
    background: transparent!important;
}

  .phone-form-section #phone{width: 100%;
    border-bottom: 1px solid #22A7DE;
    padding: 0px 10px;}

   .main-mobile-body .number-secure-note{margin-top: 4rem;}
   .main-mobile-body .number-mobile-note{margin-top: 2rem;}

      .main-mobile-body .number-secure-note p{letter-spacing: 0.43px;
color: #686868;margin-bottom: 0px;font-size: 14px;}
 .main-mobile-body .number-mobile-note p{letter-spacing: 0.43px;
color: #686868; margin-bottom: 0px;font-size: 14px;}
.main-mobile-body .Privacy-options-btn{margin-top: 2rem;}
.main-mobile-body .Privacy-options-btn a{letter-spacing: 0.27px;
color: #22A7DE!important;font-size: 14px}
.main-mobile-body .save-button-on-phone{margin-top: 3rem;}
/*Mobile update css close*/

.Change-password form .input-group{    flex-direction: column;}
.Change-password form .input-group input{    font-size: 14px;
    width: 100%;
    padding: 5px 0px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #22a7de;
    border-radius: 0px;}
    .Change-password form .input-group input:focus{outline: none;box-shadow: none}
.Change-password form .input-group .password-field{position: relative;margin-bottom: 2rem;}
.Change-password form .input-group .password-field #btnToggle, .Change-password form .input-group .password-field #btnToggle2{position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;}
.color-blue{color: #22a7de!important}
#eyeIcon{color: #E1E1E1}
.password-field.change-eyye #eyeIcon{color: #22A7DE!important}
.Change-password{width: 90%;
    margin: 2rem auto;}
.Change-password form .input-group label{margin-bottom: 0px;letter-spacing: 0.22px;
color: #686868;font-size: 14px}


.password-field ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #c0c0c0;
  opacity: 1; /* Firefox */
}

.password-field :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #c0c0c0;
}

.password-field ::-ms-input-placeholder { /* Microsoft Edge */
  color: #c0c0c0;
}

.Change-password .forrget-password{padding: 0px!important}
.Change-password .forrget-password a{letter-spacing: 0.26px;
color: #22A7DE;font-size: 14px;}
.payment-mm1 .Payment-Method-main-body{padding: 0px!important;    margin-top: 2rem;}

.payment-mm1 .Payment-Method-main-body .save-banklist{    padding: 0px;}

.payment-mm1 .Payment-Method-main-body .save-banklist ul{margin-bottom: 0px}

.payment-mm1 .Payment-Method-main-body .save-banklist ul li{padding: 0px 40px; transition: .5s a ease;cursor: pointer; border-color: #f2f2f2}
.payment-mm1 .Payment-Method-main-body .save-banklist ul li:hover{border-bottom: 1px solid #f2f2f2; background: #22A7DE0F}
.Delet-icon{visibility: hidden;}
.payment-mm1 .Payment-Method-main-body .save-banklist ul li:hover .Delet-icon{visibility: visible;}
.payment-mm1 .Payment-Method-main-body .save-banklist ul li  .bank-image-and-icon img{width: 61px;
height: 41px;object-fit: contain;}


.payment-mm1 .Payment-Method-main-body .save-banklist ul li .media .media-body .bank-title h6{letter-spacing: 0.27px;
color: #686868;margin-bottom: 0px;font-size: 16px}
.payment-mm1 .Payment-Method-main-body .save-banklist ul li .media .media-body .bank-number h6{letter-spacing: 0.24px;
color: #686868;margin-bottom: 0px;font-size: 14px}
.payment-mm1 .Payment-Method-main-body .save-banklist ul li .main-bank-list-body::before{content: "";
    height: 1px;
    width: 100%;
    background: #f2f2f2;
    position: absolute;
    z-index: 111;
    bottom: -1px;}
.payment-mm1 .Payment-Method-main-body .save-banklist ul li .main-bank-list-body{    position: relative;
    padding: 15px 30px;}
    .add-list-li .add-list-title h4{font-size: 16px;margin-bottom: 0px;letter-spacing: 0.31px;
color: #22A7DE;}



.Country .control-label {
	font-size: 16px;
	font-weight: 400;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	transform: translate3d(0, 22px, 0) scale(1);
	transform-origin: left top;
	transition: 240ms;
	line-height: 29px;
}

.Country .form-group.focused .control-label {
  transform: scale(0.75);
  letter-spacing: 0px;
color: #22A7DE;
      font-size: 16px;

}

.Country .form-control {
	align-self: flex-end;
}

.Country .form-control::-webkit-input-placeholder {
	color: transparent;
	transition: 240ms;
}

.Country .form-control:focus::-webkit-input-placeholder {
	transition: none;
}

.Country .form-group.focused .form-control::-webkit-input-placeholder {
	color: #bbb;
}
.country-section .Country .form-group label{opacity: 1;
    margin: 0px;
    left: 20px;}

    .country-section .Country .form-group select{font-size: 14px;
    letter-spacing: 0.4px;}
    .country-section .Country .form-group.focused select{  font-size: 14px;
    letter-spacing: 0.4px;
    padding-top: 14px;
    height: 45px;
    padding-bottom: 0px;
    padding-left: 15px;
    padding-right: 15px;
}
.country-section .Country{    width: 90%;
    margin: auto;}
.country-section{margin-top: 2rem}
    .country-section .Country .form-group{position: relative;}
    .payment-mm2 .headign-section{padding: 0px!important}
        .payment-mm2 .headign-section .headign-Pm{width: 90%;
    margin: auto;}
        .payment-mm2 .headign-section .headign-Pm h4{letter-spacing: 0.27px;
color: #000000;margin-bottom: 0px;font-size: 16px}

    .payment-mm2 .headign-section .account-list li .media{width: 90%;
    margin: auto;    height: 60px;}
    .payment-mm2 .headign-section .account-list li .media .media-left{height: 100%;display: flex;align-items: center;}
      .payment-mm2 .headign-section .account-list li .media .media-body{height: 100%;display: flex;align-items: center; border-bottom: 1px solid #ced4da}
    .payment-mm2 .headign-section .account-list li{position: relative; transition: all .5s ease;cursor: pointer;}
    .payment-mm2 .headign-section .account-list li:hover{background: #22A7DE0F}
          .payment-mm2 .headign-section .account-list li .media .media-body h4{letter-spacing: 0.27px;
color: #000000;    font-size: 16px;
    margin: 0px;}
    .payment-mm2 .headign-section .account-list li:hover .media .media-body::after{
      content: "";
    position: absolute;
    height: 1px;
    bottom: 0px;
    width: 100%;
    background: #ced4da;
    left: 0px

    }

      .payment-mm2 .main-sectionNPM{    margin-top: 2rem;}
      .account-list-div{    margin-top: 1rem;}
      .CARS-Section-List {margin-top: 3rem}

      .account-list li .media .media-left img{box-shadow: 0px 1px 3px #00000029;
border-radius: 4px;width: 51px;
height: 34px;    overflow: hidden;
    object-fit: contain;}




/* --- material floating label --- */

.car-details-section .form-group {
    display: flex;
    height: 55px;
    margin: 0 auto;
}

.car-details-section .control-label {
    font-size: 16px;
    font-weight: 400;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    transform: translate3d(0, 22px, 0) scale(1);
    transform-origin: left top;
    transition: 240ms;
    line-height: 29px;
}

.car-details-section .form-group.focused .control-label {
    opacity: 1;
    transform: none;
    color: #686868;
}

.car-details-section .form-control {
    align-self: flex-end;
}

.car-details-section .form-control::-webkit-input-placeholder {
    color: transparent;
    transition: 240ms;
}

.car-details-section .form-control:focus::-webkit-input-placeholder {
    transition: none;
}

.car-details-section .form-group.focused .form-control::-webkit-input-placeholder {
    color: #bbb;
}

.car-details-section{    width: 90%;
    margin: 2rem auto;}
.car-details-section .card-details-heading{padding: 0px!important}

.car-details-section .card-details-heading h6{text-align: center;
    letter-spacing: 0.43px;
    color: #686868;
    font-size: 16px;}
.payment-mm3 .cards-form-ss .form-group{position: relative;margin: 2rem 0px 0px;}
.payment-mm3 .cards-form-ss .form-group label{left: 0px;letter-spacing: 0.22px;
color: #686868;margin-bottom: 0px;font-size: 14px}
.payment-mm3 .cards-form-ss .form-group input{border: none;border-bottom: 1px solid #22a7de;;border-radius: 0px;padding-left: 0px}
.payment-mm3 .cards-form-ss .form-group input:focus{outline: none;box-shadow: none;border-radius: 0px}
.Expiration-CVV{    display: flex;
    justify-content: space-between;
    padding: 0px;}

    .Expiration-CVV .form-group{width: 40%;}
    .car-identity{    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;margin: 4rem 0px 2rem;}
        .car-identity .card-name {margin-right: 1rem;}
          .car-identity .card-name p{margin-bottom: 0px;letter-spacing: 0.24px;
color: #686868;font-size: 16px}
.car-identity .card-icon img{border-radius: 4px;
opacity: 1;width: 54px;
height: 36px;}

.payment-mm3 .save-btn-cards{    padding: 0px;}

.payment-mm1 .Payment-Method-main-body2{padding: 0px!important}
.payment-mm1 .save-banklist2{padding: 0px!important}
.payment-mm1 .save-banklist2 .save-card-ss li .media{    display: flex;
    height: 67px;
    overflow: hidden;
    width: 90%;
    margin: auto;
    align-items: center;}

    .payment-mm1 .save-banklist2 .save-card-ss li .media .media-left{height: 100%; display: flex;align-items: center;}
    .payment-mm1 .save-banklist2 .save-card-ss li .media .media-body {
        height: 100%;
        border-bottom: 1px solid #f2f2f2;
        position: relative;
        display: flex;
        align-items: self-start;
        flex-direction: column;
        justify-content: center;
    }
.payment-mm1 .save-banklist2 .save-card-ss li .media .media-right{height: 100%}
.payment-mm1 .save-banklist2 .save-card-ss li .media .card-icon-image img{width: 61px;
    height: 41px;border-radius: 4px}
.Delet-icon-hover{position: absolute;
    right: 0px;}
  .payment-mm1 .save-banklist2 .save-card-ss li .media .media-body .bank-title h6{    font-size: 16px;
    color: #686868;
    margin: 0px;letter-spacing: 0.27px;}

      .payment-mm1 .save-banklist2 .save-card-ss li .media .media-body .bank-number h6{letter-spacing: 0.24px;
color: #686868;font-size: 14px;margin: 0px;}

      .payment-mm1 .save-banklist2 .save-card-ss li:hover .media::after{content: "";position: absolute; height: 1px;width: 100%;background: #f2f2f2; bottom: 0px;
    left: 0px;}
      .payment-mm1 .save-banklist2 .save-card-ss li{position: relative;cursor: pointer;transition: all .5s ease}

      .payment-mm1 .save-banklist2 .save-card-ss li:hover{background: #22A7DE0F}
      .payment-mm1 .Payment-Method-main-body2{    margin-top: 2rem; }

        .payment-mm1  .add-list-li .media{height: auto!important;PADDING: 15PX 0PX;}
        .payment-mm1  .add-list-li .media .media-body{border-bottom: none!important}
        .payment-mm1  .add-list-li .media .media-right button{background: transparent}
        .save-card-ss .media .media-body .Delet-icon-hover{display: none;}
          .payment-mm1 .save-banklist2 .save-card-ss li:hover  .Delet-icon-hover{display: block!important;}
          .payment-mm1 .add-list-li  .media{border-bottom: 1px solid #f2f2f2!important ;}
          .payment-mm2-show .payment-mm1{display: none;}
          .payment-mm2-show .payment-mm2{display: block!important;}
          .payment-mm3-show .payment-mm2, .payment-mm3-show .payment-mm1{display: none;}
.payment-mm1,  .payment-mm2,   .payment-mm3{transform: all .5s ease; animation: fade .5s }
@keyframes fade {
0%{opacity: 0;}

100%{opacity: 1;}

}

.payment-mm3 .profile-heder-main .media-left a, .payment-mm2 .profile-heder-main .media-left a{color: #22a7de!important;
    font-size: 20px;}
          .payment-mm3-show .payment-mm3{display: block!important;}
.pd-0{padding:0px !important}


/*membership card*/

.card-image img{width: 79px; height: 53px;border-radius: 4px;object-fit: cover;}
.membercards-tab-body{
  margin: 3rem auto 0px;
  padding: 0px!important
}


    .membercards-tab-body .membership-list li:hover{background: #22A7DE0F;}
      .membercards-tab-body .membership-list li:hover .delet-card{display: block!important;}
  .membercards-tab-body .delet-card{display: none;}
    .membercards-tab-body .membership-list li{position: relative; transition: .5s ease;cursor: pointer;}
      .membercards-tab-body .membership-list li .media  .media-body{position: relative;;border-bottom: 1px solid #f2f2f2}
  .membercards-tab-body .membership-list li .media h4{line-height: 5.2rem;margin-bottom: 0px;letter-spacing: 0.38px;
color: #686868;font-size: 16px}
  .delet-card{position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);}
          .membercards-tab-body .membership-list li .media{width: 90%; margin: auto;}
        .membercards-tab-body .membership-list li:hover .media::after{content: "";position: absolute;left: 0px;bottom: 0px;height: 1px;width: 100%;background: #f2f2f2}
.add-list-member li .media  {width: 90%;
    margin: auto;}
    .add-list-member li .media .media-body .add-list-title h4{    font-size: 16px;
    margin-bottom: 0px;
    line-height: 3.5rem;}
    .add-list-member li .btn-add-mamber{background: transparent}
        .add-list-member li .media .media-body{border-bottom: 1px solid #f2f2f2;position: relative;}
  .add-list-member li .media .media-body .plust-btn{position: absolute;right: 0px;top: 50%;transform: translateY(-50%);}
.add-list-member li{transition: .5s ease ; cursor: pointer;}
    .add-list-member li:hover .media::after{content: "";position: absolute;left: 0px;bottom: 0px;height: 1px;width: 100%;background: #f2f2f2}
.add-list-member li:hover{ background: #22A7DE0F}

.pp-card{
  position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}
.pp-card .price-card h3{font-weight: bolder;letter-spacing: 0.42px;
color: #22A7DE;margin-bottom: 0px;font-size: 18px}
.price-card.paid h3{color: #07DC00!important}
.membership-card-purchse .product-card-image img{width: 379px;
height: 224px;border-radius: 13px;}
.membercards-purchse-list{margin-top: 2rem}
.membercards-purchse-list .membership-list li .media{width: 90%;}
.membership-card-purchse{
    margin-top: 2rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;    padding: 0px;
}
.membership-card-purchse .product-card-image{text-align: center;padding: 0px;padding-bottom: 2rem;
    border-bottom: 1px solid #f2f2f2;}

.membership-card-purchse .purchse-card-list{    padding: 1rem 0px;}
.membership-card-purchse .purchse-card-list li .media .media-body h4{margin-bottom: 0px;font-size:16px;color: #000000;}
.membership-card-purchse .purchse-card-list li{border-bottom: 1px solid #f2f2f2;
    padding: 10px 0px;cursor: pointer;}

.membership-card-purchse .buy-btn button{width: 130px;
height: 35px;background: #22A7DE 0% 0% no-repeat padding-box;
border-radius: 4px;letter-spacing: 0px;
color: #FFFFFF;font-size: 16px}

.Cards-partners-div{padding: 0px!important}
.Cards-partners-div .media-body h4{margin-bottom: 0px;font-size: 16px}
.Cards-partners-div .media-body p{margin-bottom: 0px;font-size: 13px;color: #686868}
.Cards-partners-div .media{    border-bottom: 1px solid #f2f2f2;
    padding: 10px 0px;
    border-top: 1px solid #f2f2f2;}
    .notes-cards{    margin-top: 1rem;
    margin-bottom: 1rem;}
      .notes-cards p{letter-spacing: 0px;
color: #686868;margin-bottom: 0px;font-size: 14px}

$lightGrey: #E6E6E6;
$grey: #E6E6E6;
$white: #FFFFFF;
$blue: #22A7DE;


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $grey;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: $blue;
}

input:focus + .slider {
  box-shadow: 0 0 0 4px rgba(21, 156, 228, 0.7);
  outline: none;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.profile-heder-main .media-left a{color: #22a7de!important;
    font-size: 20px;}
.address-main-body .address-list li{position: relative;}
.address-main-body .address-list li .media .media-body  h4{font-size: 16px;letter-spacing: 0px;
color: #000000;margin-bottom: 0px;font-weight: bold;}

.address-main-body .address-list li .media .media-body  p {margin-bottom: 0px;letter-spacing: 0px;
color: #686868;font-size: 14px}
.address-main-body .address-list li .media {    width: 90%;
    margin: auto;    padding: 10px 0px;    border-bottom: 1px solid #f2f2f2;}
    .address-main-body{margin-top: 2rem }
    .address-main-body .address-list li .media  .media-body{position: relative;}
.address-main-body .delet-address-icon{position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);}
    .address-main-body .delet-address-icon {display: none;}
.address-main-body .address-list li:hover .delet-address-icon {display: block!important;}
        .address-main-body .address-list li {cursor: pointer; position: relative;transition: all .5s ease}
        .address-main-body .address-list li:hover{background: #22A7DE0F}

        .address-main-body .search-ss label{position: relative;margin-bottom: 0px;width: 100%}
        .address-main-body .search-ss label .searh-btn{position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);}
            .address-main-body .search-ss label input{width: 100%;border: 1px solid #A1A1A1;
border-radius: 6px;padding: 10px 0px 10px 3rem}
.address-map-ss .map-div .map img{width: 100%;height: 100%;object-fit: cover;}

.address-map-ss .map-div{position: relative;height: 344px;
    overflow: hidden;}

.address-map-ss .map-div .icon-one{    position: absolute;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    right: 15px;}
    .address-map-ss .map-div .icon-one button{margin-bottom: 1rem; background-color: #fff;width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0px 1px 6px #00000029;}

    .merker-icon{position: absolute;
    top: 31%;
    z-index: 777;
    left: 50%;}

        .address-map-ss .map-div .map{height: 100%}
        .adress-details{background: #22a7de;
    color: #fff;border-radius: 0px 0px 6px 6px;}
            .adress-details .media-body h4{margin-bottom: 0px;font-size: 20px}
              .adress-details .media-body p{margin-bottom: 0px;font-size: 18px}
              .address-map-ss{margin-top: 2rem;}
              .address-map-ss .media{padding: 15px 0px;}
.map-icon-list .media-body p{margin-bottom: 0px;color: #000000;font-weight: bold;}
.map-icon-list{box-shadow: 0px 4px 4px #00000029;
    border-radius: 0px 0px 6px 6px;}
    .map-icon-list ul li{cursor: pointer;}
    .address-map-ss .map-div iframe{    border: 0;
    width: 100%;}
    .address-map-ss .map-div{border-radius: 6px 6px 0px 0px;
}
.map-icon-list{display: none;}

.address-map-ss.Show-list .map-icon-list{display: block!important; animation: fade .8s ease }

.address-map-ss.Show-list .adress-details{border-radius: 0px 0px 0px 0px;}

.address-map-ss.Show-list .adress-details .media .media-right img{transform: rotate(
180deg
);}
.list-dd{background: transparent}
.address-map-ss .adress-details .media .media-right img{transition:.5s ease;}
.address-tab3 .mainpbody{    margin-top: 3rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;}

    .address-tab3 .mainpbody .discription-notes textarea {height: 118px; background: #6868680F 0% 0% no-repeat padding-box;
border-radius: 6px 6px 0px 0px;    border-bottom: 1px solid #22a7de;    padding: 10px 1rem;}
.language-body{    padding: 0px;}
.language-body .default-language{padding: 0px}
.language-body .default-language ul li .media{width: 90%;
    margin: auto;border-bottom: 1px solid #f2f2f2;padding: 10px 0px;}
    .language-body .default-language ul li .media .media-body h4{margin-bottom: 0px;font-size: 18px}
        .language-body .default-language ul li .media .media-right h5{margin-bottom: 0px;font-size: 16px;}
        .language-body  .default-language{margin-top: 2rem;}
        .language-body .default-language ul li{position: relative;transition: .5s ease;cursor: pointer;}
        .Preferred-Language-order{padding: 0px;
    width: 90%;
    margin: 2rem auto 0px auto;}
    .Preferred-Language-order h4{    letter-spacing: 0.36px;
    color: #000000;
    font-size: 21px;
    margin-bottom: 0px}
        .Preferred-Language-order ul{margin-bottom: 0px}
                .Preferred-Language-order ul li p{margin-bottom: 0px;letter-spacing: 0.38px;
color: #000000;font-size: 16px}
    .Preferred-Language-order ul li{padding: 10px 0px;border-bottom: 1px solid #f2f2f2}
    .Preferred-Language-order .headign-pp{    padding: 10px 0px!important;
    border-bottom: 1px solid #f2f2f2;}
          .language-body .default-language ul li:hover .media::before{content: "";position: absolute;height: 1px; width: 100%;left: 0px;border-bottom: 1px solid #f2f2f2;bottom: 0px;}
            .language-body .default-language ul li:hover{background: #22A7DE0F}
            .Preferred-Language-order-add-new{padding: 0px!important;margin-top: 2rem}
            .Preferred-Language-order-add-new  ul li .media{width: 90%;margin: auto;    padding: 10px 0px;
    border-bottom: 1px solid #f2f2f2;}
            .Preferred-Language-order-add-new  ul li .media .media-body h4{margin-bottom: 0px;font-size: 18px}
                .Preferred-Language-order-add-new li{cursor: pointer;position: relative;cursor: pointer;transition: .5s ease}
                .Preferred-Language-order-add-new li:hover {background: #22A7DE0F}
                .Preferred-Language-order-add-new li .media .media-right button{background: transparent}
                .notes-language{padding: 0px!important;margin-top: 2rem}
                .notes-language .note-pp{width: 90%;
    margin: auto;
    padding: 0px;}
      .notes-language .note-p p{letter-spacing: 0.43px;
color: #686868;font-size: 16px}
.edit-button-language{padding: 0px;
    width: 90%;
    margin: auto;
    margin-top: 4rem;display: flex;
    justify-content: flex-end;}

    .edit-button-language button{width: 184px;
height: 45px;box-shadow: 0px 1px 3px #00000029;
border-radius: 4px;background: #22A7DE 0% 0% no-repeat padding-box;color: #fff}

.language-tab-2 .default-main-body .form-group.focused select{padding-top: 20px;
    height: 46px;
    font-size: 14px;}
          .language-tab-2 .default-main-body .form-group label{position: absolute;}
    .language-tab-2 .default-main-body .form-group {position: relative;}
      .language-tab-2 .default-main-body .form-group.focused label{position: absolute;
    left: 15px;
    top: 4px;margin-bottom: 0px;
    letter-spacing: 0px;
    color: #22A7DE;
    font-size: 14px;}
        .language-tab-2 .default-main-body .form-group.focused #selectCtrl{padding-top: 20px;
    height: 50px;
    font-size: 14px;
    padding-bottom: 0px;}
    .language-tab-2 .default-main-body{    margin-top: 3rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;}
        .language-tab-2 .default-main-body .Change-default-language{margin-top: 2rem}

      .language-tab-2 .default-main-body .Change-default-language p  {font-size: 14px;letter-spacing: 0.43px;
color: #686868;}



.language-tab-3 .default-main-body .form-group.focused select{padding-top: 20px;
    height: 46px;
    font-size: 14px;}
          .language-tab-3 .default-main-body .form-group label{position: absolute;}
    .language-tab-3 .default-main-body .form-group {position: relative;}
      .language-tab-3 .default-main-body .form-group.focused label{position: absolute;
    left: 15px;
    top: 4px;margin-bottom: 0px;
    letter-spacing: 0px;
    color: #22A7DE;
    font-size: 14px;}
        .language-tab-3 .default-main-body .form-group.focused #selectCtrl{padding-top: 20px;
    height: 50px;
    font-size: 14px;
    padding-bottom: 0px;}
    .language-tab-3 .default-main-body{    margin-top: 3rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;}
        .language-tab-3 .default-main-body .Change-default-language{margin-top: 2rem}

      .language-tab-3 .default-main-body .Change-default-language p  {font-size: 14px;letter-spacing: 0.43px;
color: #686868;}

.Edit-order-list ul li .media{display: flex;
    padding: 10px 0px;
    border-bottom: 1px solid #f2f2f2; cursor: pointer;}
    .Edit-order-main-body{    width: 90%;
    margin: 2rem auto;}
.save-order{margin-top: 5rem}
.Currency-list-main ul li label{width: 100%;cursor: pointer;}
.Currency-main-body .headign-curency{padding: 10px 0px;
    border-bottom: 1px solid #f2f2f2;}
.Currency-main-body .headign-curency .title{width: 90%;
    margin: auto}
    .Currency-main-body .headign-curency .title h4{letter-spacing: 0px;
color: #686868;margin-bottom: 0px;font-size: 20px}
.Currency-list-main ul{width: 90%;
    margin: auto;}
    .Currency-list-main ul li{padding: 10px 0px;
    border-bottom: 1px solid #f2f2f2;}

        .Currency-list-main ul li .media-body h5{margin-bottom: 0px;letter-spacing: 0px;
color: #000000;font-size: 16px}

      .Currency-list-main ul li  .form-check-input {
    position: absolute;
    margin-top: 0.3rem;
    width: 15px;
    margin-left: -15px;
    height: 15px;
}
.Currency-list-main{margin-top: 2rem}




.curency0choose-list .control-label {
	font-size: 16px;
	font-weight: 400;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	transform: translate3d(0, 22px, 0) scale(1);
	transform-origin: left top;
	transition: 240ms;
	line-height: 29px;
}

.curency0choose-list .form-group.focused .control-label {
  transform: scale(0.75);
  letter-spacing: 0px;
color: #22A7DE;
      font-size: 16px;

}

.curency0choose-list  .form-control {
	align-self: flex-end;
}

.curency0choose-list  .form-control::-webkit-input-placeholder {
	color: transparent;
	transition: 240ms;
}

.curency0choose-list  .form-control:focus::-webkit-input-placeholder {
	transition: none;
}

.curency0choose-list  .form-group.focused .form-control::-webkit-input-placeholder {
	color: #bbb;
}
.curency0choose-list  .form-group label{opacity: 1;
    margin: 0px;
    left: 20px;}

.curency0choose-list  .form-group select{font-size: 14px;
    letter-spacing: 0.4px;}
  .curency0choose-list  .form-group.focused select{  font-size: 14px;
    letter-spacing: 0.4px;
    padding-top: 14px;
    height: 45px;
    padding-bottom: 0px;
    padding-left: 15px;
    padding-right: 15px;
}
.curency0choose-list{    width: 90%;
    margin: 2rem auto;}
    .curency0choose-list .foem-col-md-12{width: 50%;}
    .curency0choose-list .curency-chosse-label-notte {    width: 50%;
    margin-bottom: 2rem;}
      .curency0choose-list .curency-chosse-label-note p{margin-bottom: 0px;letter-spacing: 0.7px;
color: #686868;font-size: 14px}

.address-tab2 .address-main-body{    width: 90%;
    margin-left: auto;
    margin-right: auto;}

    .curency-chosse-label-note{    margin-bottom: 2rem;}

    .curency0choose-list{display: none;}
    .Show-lists     .curency0choose-list{display: block;}

/*tabs issue*/


/*Hide and-show-div css*/

.membership-1, .membership-2, .membership-3  {transform: all .5s ease; animation: fade .5s }
.Show-membership-2 .membership-1{display: none;}
.Show-membership-2 .membership-2{display: block!important;}

.Show-membership-3 .membership-2{display: none;}
.Show-membership-3 .membership-1{display: none;}
.Show-membership-3 .membership-3{display: block!important;}

/*member ship card close*/

/*address start*/
.address-tab, .address-tab2, .address-tab3  {transform: all .5s ease; animation: fade .5s }
.Show-address-tab2 .address-tab {display: none;}
.Show-address-tab2 .address-tab2{display: block!important;}

.Show-address-tab3  .address-tab2{display: none;}
.Show-address-tab3 .address-tab{display: none;}
.Show-address-tab3 .address-tab3{display: block!important;}


/*language start*/
.address-tab, .address-tab2, .address-tab3  {transform: all .5s ease; animation: fade .5s }
.Show-language-tab-2 .language-tab-1  {display: none;}
.Show-language-tab-2 .language-tab-2 {display: block!important;}
.Show-language-tab-3 .language-tab-3 {display: block!important;}
.Show-language-tab-3 .language-tab-1  {display: none;}

.Show-language-tab-4 .language-tab-1  {display: none;}

.Show-language-tab-4  .language-tab-4 {display: block!important;}



.rightsid-main-div{height: auto;
overflow-y: auto;}

@media only screen and (max-width: 768px) {
  .mobile-show{display: block;}
  .profilesection .mainbody-div{    margin: 0rem auto;
    box-shadow: none;
    max-width: 100%;}

    .no-padding-mobile{padding: 0px!important}
    .right-side-column{display: none;}
    .row {
    margin-left: 0px!important;
    margin-right: 0px!important;
}
.Show-right-tab .left-side-column{display: none;}

.Show-right-tab .right-side-column{display: block!important; height: 100vh;overflow-y: auto;}
html, body, section,.mobile-height{height: 100%}
#pills-Bio .discription-bio{padding: 0px;}
.date-Birthdate,.whos-see-section{    width: 100%;    padding: 0px;}
 #pills-Birthdate .notes{padding: 0px;}
  #pills-Birthdate .notes p{    font-size: 14px;
    margin-bottom: 0px;}
 #pills-Birthdate .notes p br{display: none;}
 .Birthdate-Year-dropdown .dropdown-menu{    left: -70px;}
 .whos-see-section .headign .color-blue{    font-size: 14px;}
 .whos-see-section .form-select-section{justify-content: space-between;margin-top: 1rem;}
 .whos-see-section .form-select-section .buttons-div{padding: 0px 0px 0px 0px;width: 48%;}
 .Who-seesbutton .media-body label{font-size: 12px;}
 .email-verification{    padding: 0px;}
 .email-verification .Email-alerts-div {
    padding: 1rem 1rem;
}
.email-verification .Email-alerts-div .massage-text p{font-size: 14px;letter-spacing: 0.5px;}
.footer-email-verification{padding-top: 1rem;    padding-right: 0px;}
.remove-btn, .Retry-btn{width: 22%;}
.email-verification .Email-alerts-div .media-body h4 {
    font-size: 20px;}
    .email-verification .Email-alerts-div .media-left .info-icon{    height: 20px;
    width: 20px;    font-size: 10px}
    .main-mobile-body{    width: 100%;    margin: 2rem auto;}
    .Change-password {
    width: 100%;}
    .payment-mm1 .save-banklist2 .save-card-ss li .media .media-left{    margin-right: 20px!important;}
    .payment-mm1 .save-banklist2 .save-card-ss li .media .media-body .bank-title h6{margin-bottom: 5px;font-size: 14px;}
    .payment-mm1 .save-banklist2 .save-card-ss li .media .media-body .bank-number h6{font-size: 12px;}
    .car-details-section .card-details-heading h6{font-size: 14px;}
    .payment-mm3 .cards-form-ss .form-group{margin: 1rem 0px 0px;}
    .car-identity{    margin: 2rem 0px 2rem;}
    .membercards-tab-body {
    margin: 1rem auto 0px;}

  .membership-2  .membercards-tab-body .membership-list li .media h4 {
    line-height: 1.8em;
    margin-bottom: 0px;
    letter-spacing: 0.38px;
    color: #686868;
    font-size: 14px;
    padding-right: 5rem;
}
  .membership-2 .membercards-purchse-list .membership-list li{padding: 5px 0px;}
  .membership-2 .membercards-purchse-list .membership-list li .media{height: 65px;}
  .membership-2   .membercards-tab-body .membership-list li .media .media-body{    height: 100%;display: flex;
    align-items: center;}

    .pp-card .price-card h3{font-size: 16px;}
    .membership-card-purchse .product-card-image img{width: 320px;
    height: 200px;
    object-fit: contain;
    border-radius: 13px;}
    .notes-cards p{    font-size: 12px;}
    .address-tab2 .address-main-body{width: 100%;}
    .adress-details .media-body p{    font-size: 14px}
    .adress-details .media-body h4{font-size: 14px;}
    .address-map-ss .map-div{    height: 300px;}
    .address-tab3 .mainpbody{width: 100%;    margin-top: 2rem;}
    .address-tab3 .discription-notes{    padding: 0px;}
    .language-tab-3 .default-main-body .Change-default-language{padding: 0px!important}
    .language-tab-3 .default-main-body .Change-default-language p {
    font-size: 12px;}
    .curency0choose-list .curency-chosse-label-note p br{display: none;}
    .curency0choose-list .curency-chosse-label-note p{font-size: 12px;}
    .curency0choose-list .foem-col-md-12 {
    width: 90%;
}
}