@keyframes skeleton-animation {
    0% {
        transform: translateX(-100%);
    }
    30% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

#mainRecharge .leftIconBox {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 20px;
	top: 0px !important;
}

#mainRecharge .rechargeMain .leftIconBox, #mainRecharge .successPage .leftIconBox{
    background: rgba(255, 255, 255,0.70);
}

#mainRecharge .leftIconBox img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.mainRechargeContent {
	padding: 0px 0px 100px;
    background: #FFF;
    height: 100%;
    overflow-y: auto;
    min-height: calc(100vh - 190px);
    width: 100%;
}

.mainbannerarea {
    width: 100%;
    background: rgb(113 146 255 / 25%);
    padding: 80px 16px 34px 16px;
    float: left;
}
.mainbannerareain {
    float: left;
    width: 100%;
    height: 230px;
    margin-top: 60px;
}
.mainbannerheading {
	text-align: center;
    font-size: 27px;
    padding: 0px 0px;
    margin-bottom: 20px;
    line-height: 30px;
    color: #003a59;
    float: left;
    width: 100%;
}
.mainbannersubheading {
    text-align: center;
    font-size: 16px;
    padding: 0px 0px;
    line-height: 20px;
    color: #003a59;
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
.phoneNumberBlock {
    float: left;
    width: 100%;
    padding: 30px 20px 0 20px;
}
.starttopupbtnbox {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 15px;
}
.starttopupbtn {
    width: 100%;
    background: #8a73ff;
    float: left;
    color: #FFF;
    height: 46px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 600;
    position: relative;
}

#checkRechargeInputNumber .YellowSpinnerBox {
    background: #8a73ff;
}

section {
    background: rgba(5,52,109,0.50);
    overflow: auto;
}

.mobileInputBlock {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#mainRecharge .mobileForm .payInputTitle {
    font-size: 22px;
    padding-left: 13px;
    font-weight: 500;
    color: #000;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

#rechargeNumberLabel {
    font-size: 18px!important;
    font-weight: 600!important;
    color: #000!important;
    float: left;
    width: 100%;
    text-align: center;
}

#mainRecharge .payInputTitle {
    margin-bottom: 15px;
	padding-left: 0px;
}

#mainRecharge .contryPrepaidSelectLabel {
    margin: 10px 0 2px 0;
	display:block !important;
}

.errorRequrd {
    color: #656060;
    font-size: 16px;
    display: inline-block;
    margin: 20px 0 0 0;
    font-weight: 600;
}

#mainRecharge #xareSignup .mobileForm .inputFormFild {
    margin-top: 0px;
    background: #d9d9d9;
    border-radius: 50px;
    border: 2px solid transparent;
    padding: 0 12px;
    position: relative;
    display: inline-flex;
}

#mainRecharge .mobileForm .inputFormFild {
    margin-top: 0px;
    background: #f3f3f3;
    border-radius: 50px;
    border: 2px solid transparent;
    padding: 0 12px;
    position: relative;
    display: inline-flex;
}

#mainRecharge #xareSignup .phoneOtpRow .payInputTitle {
    padding-left: 0px;
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

#mainRecharge #xareSignup .phoneOtpBox input {
height: 47px;
font-size: 22px;
color: #000;
font-weight: 400;
background: #d9d9d9;
border-radius: 16px;
width: 40px;
padding: 0px;
flex-grow: unset;
float: left;
margin-right: 10px;
border: 2px solid transparent;
text-align: center;
font-family: inherit;
}

#mainRecharge #xareSignup .phoneOtpBox {
    padding-left: 0px;
    justify-content: center;
    margin-bottom: 20px;
}

#mainRecharge #xareSignup .bottomInputBox .continuForwrd {
    background: linear-gradient(315.28deg, #a54ff7 0%, #476efc 100%)!important;
    width: 170px;
    height: 44px;
}

#mainRecharge #xareSignup .bottomInputBox {
    justify-content: center;
    position: relative;
    padding: 40px 20px 0 20px;
}

#mainRecharge #xareSignup .mobileForm .inputFormFild {
    border-radius: 20px;
    padding: 0;
}

#mainRecharge .mobileForm .inputFormFild.inputFocus{
    background: #ffffff;
}

#mainRecharge #xareSignup .mobileForm .inputFormFild.inputFocus{
	background: #d9d9d9;
}

#mainRecharge .inputFormFild.inputFocus{
	border: 1px solid #8a73ff !important;
}

#mainRecharge .prepaidXareSignup .inputFormFild.inputFocus{
    border: 2px solid #111 !important;
}

#mainRecharge .indvidualSlide .inputFormFild .isdCode {
    color: #000;
    justify-content: flex-start;
    position: relative;
    flex-shrink: 0;
    width: auto;
    padding-right: 15px;
}
#mainRecharge .prepaidXareSignup .indvidualSlide .inputFormFild .isdCode {
    padding-right: 0;
    padding-left: 13px;
}

#mainRecharge #xareSignup #xaremobileNumber.signInput {
    padding: 13px 13px 13px 0;
}
#mainRecharge .indvidualSlide .inputFormFild .isdCode i {
    font-weight: 600;
}

#mainRecharge .countryFlag {
	height: 30px;
    width: 30px;
    margin-right: 13px;
}
#mainRecharge .countryFlag.selected {
	border: 2px solid #FFF;
    border-radius: 100%;
    box-shadow: 0px 0px 0px 2px #000;
    transform: scale(1.05);
}
.mobileCountriesBlock {
    float: left;
    width: 100%;
    margin-bottom: 0;
    overflow-x: auto;
    padding-bottom: 0;
    padding-left: 6px;
	display:block !important;
}

.mobileCountriesBlockin {
    display: inline-flex;
    white-space: nowrap;
    height: 50px;
    align-items: center;
    width: 100%;
    justify-content: center;
}

#mainRecharge #xareSignup .signInput {
    color: #000;
    background: #d9d9d9;
    border-radius: 20px;
    padding: 13px;
    font-weight: 400;
    font-size: 15px;
}
#mainRecharge #xareSignup .countryFlag {
    height: 30px;
    width: 30px;
    margin-right: 10px;
    margin-left: 10px;
}

#mainRecharge .signInput {
    height: 45px;
    font-size: 18px;
    color: #000;
}

#mainRecharge #xareiscodeNum {
    font-weight: 500!important;
    color:  #000!important;
    font-size: 16px;
    padding-right: 10px;
}

#mainRecharge .isdCode {
    color: #000;
    justify-content: flex-start;
    position: relative;
    flex-shrink: 0;
    width: auto;
    padding-right: 0;
}

#mainRecharge .userIcon {
    margin-left: 20px;
}

#mainRecharge .userIcon svg {
    width: 45px;
    height: 45px;
    fill: #188DF0;
}

/* updated */
.mainBlocks {
    margin: 0;
    padding: 0 20px 20px 20px;
    background: #FFF;
    border-radius: 10px;
    /*border: 1.5px solid #cbccce;*/
    float: left;
    width: 100%;
}

.mobile_down_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

.mobile_down_arrow i {
    font-weight: 600;
}

.mainBlocks h2 {
    font-size: 21px;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 5px 0 12px 0;
}

#pack-amount-block h2.pack-amount-block-h2 {
    font-size: 26px;
    font-weight: 700;
	    margin-bottom: 20px;
}

.suggestedBlock .litteral {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.litteralSpan {
    width: 65px;
    height: 65px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: 28px;
    font-weight: 700;
    background: #5912c5;
    color: #FFF;
    margin: 0 0 10px 0;
}

.litteralLabel {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    align-items: center;
    display: inline-flex;
    flex-direction: column-reverse;
    width: auto;
    margin-right: auto;
}

.opearotrsList {
    max-height: 500px;
    overflow-x: scroll;
}

.operatorListItem {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 10px 0 30px 0;
}

.operatorName {
    font-size: 18px;
    font-weight: 600;
    margin-left: 25px;
}

.operatorIco {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 100%;
    border: 1px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
}

.operatorIco.dropdownico {
    width: 36px;
    height: 36px;
    margin-right: 15px;
    padding: 2px;
}

.operatorIco img {
	width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 100%;
}

#numberSearchContent {
    padding: 120px 20px 0 20px;
}

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

.topSearchBlockIcons {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-right: 20px;
}

#numberSearchContent .topSearchBlockIcons .userIcon {
    margin-left: 0px;
	display:none;
}

#numberSearchContent .userIcon svg {
    width: 65px;
    height: 65px;
    fill: #188DF0;
}

.topSearchBlockIcons .operatorIco {
    width: 65px;
    height: 65px;
    margin-left: 5px;
	background: #FFF;
}

h1.topSearchBlockNumber {
    font-size: 24px;
    font-weight: 500;
}

#numberSearchContent .isdCode {
    padding-right: 10px;
}

.planDropdownBlock {
    margin: 50px 0 0 0;
}

.planDropdown {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 20px;
    height: 47px;
    border-radius: 50px;
    color: #000;
    border: 1px solid #8a73ff !important;
    font-size: 18px;
    font-weight: 600;
    background: #FFF;
    position: relative;
}

#carier-dropdown-wrapper .dropdownLabel {
    display: flex;
    align-items: center;
}

#carier-dropdown-wrapper i {
    font-size: 18px;
    font-weight: 600;
}

.searchBottomBlock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 50px;
    height: auto;
    width: 100%;
    left: 0;
}

.terms {
    font-size: 14px;
    font-weight: 500;
}
.terms span {
    color: #5912c5;
}

.continueBtn {
    background: #177EE6;
    font-size: 16px;
    color: #FFF;
    border-radius: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 90%;
    position: relative;
    margin: 20px 0 0 0;
}


.planDropdown.is-active {

}
.planDropdown.is-active i {
    transform: rotate(180deg);
}

.planDropdown.is-active .dropdown-list {
    border: 1px solid #b5b6b8;
    max-height: 400px;
}

.dropdown-list {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Styles */
    background: #fff;
    border-radius: 0 0 10px 10px;
    border: 1px solid #b5b6b8;
    border-top: none;
    border-bottom: none;
    list-style: none;
    transition: all 0.3s ease-out;
    /* Hiding */
    max-height: 0;
    overflow: hidden;
}
.dropdown-list li {
    padding: 20px;
}
.dropdown-list li:hover a {
    color: #5912c5;
}
.dropdown-list li:last-of-type a {
    border: none;
}
.dropdown-list a {
    display: block;
    text-decoration: none;
    color: #222;
    padding: 0;
    transition: all 0.3s ease-out;
}

#operatorProductPage .sectionTitle {
    display: flex;
    align-items: center;
    justify-content: start;
    color: #222;
}

#operatorProductPage .sectionTitle .operatorIco {
    width: 45px;
    height: 45px;
    margin: 0 10px;
}

#topOperatorProductPageContent {
    margin: 90px 0 0 0;
    height: 65%;
}

.OperatorProductHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid;
    background: #fff;
    padding: 20px 40px;
	display:none;
}

.OperatorProductHeader.opened i {
    transform: rotate(-90deg);
}

.OperatorProductHeaderName {
    display: inline-flex;
    align-items: center;
    justify-content: start;
    color: #222;
}

.operatorIcoName {
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 100%;
    border: 1px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #7c48e3, #6000e6 54%, #4896e3);
    color: white;
    font-weight: 700;
    font-size: 18px;
    margin-right: 15px;
}

.operatorIcoNameValue {
    font-size: 20px;
    font-weight: 600;
}

.OperatorProductHeader i {
    font-size: 20px;
    color: #222;
    font-weight: 700;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.OperatorProductMain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.operatorProductPageContent {
    height: 100%;
    background: #f1f1f1;
}

.bottomOperatorProductPageContent {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 60px 0 40px 0;
    height: 35%;
    border-top-right-radius: 35px;
    border-top-left-radius: 35px;
    background: #fff;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);

}

.bottomOperatorProductPageContent.opened {
    height: calc(100% - 164px);
    height: calc(100% - 20px);
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}

#OperatorProductMain .operatorIco {
    width: 80px;
    height: 80px;
    margin: 0 0 20px 0;
}

.OperatorProductMainName {
    font-size: 24px;
    color: #222;
    margin: 20px 0;
}

.OperatorProductMainNameLabel {
    font-size: 16px;
    margin: 20px 0 0 0;
}
.bottomOperatorProductPageHeader {
    padding: 0 20px;
}

.bottomOperatorProductPageSearch {
    padding: 0 30px;
    height: 46px;
    width: 100%;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 30px;
}

.bottomOperatorProductPageSearch svg {
    width: 15px;
    height: 15px;
    margin: 0px 7px 0px 0px;
    fill: #888;
}

.bottomOperatorProductPageSearch .ProductPageSearchInput {
    background: transparent;
    height: 100%;
    width: calc(100% - 50px);
    font-size: 17px;
    text-align: center;
}

.prepaidPlansNavTab {
    display: flex;
    width: 100%;
    justify-content: start;
    align-items: center;
    padding: 40px 40px 0;
}

.prepaidPlansNavTabItemA{
    font-size: 22px;
    font-weight: 700;
    color: #5912c5;
    margin-right: 20px;
}

.prepaidPlansNavTabItemA.active{
    border-bottom: 2px solid #5912c5;
}

.bottomOperatorProductPageMain {
    padding: 15px 0 0 0;
    overflow-y: scroll;
    height: calc(100% - 50px);
    margin-top: 15px;
	    float: left;
    width: 100%;
}
.selecttopupamout {
    float: left;
    width: 100%;
    padding: 0px 25px;
    margin-top: 25px;
}
.bottomOperatorProductPageMainItem{
    padding: 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    position: relative;
    padding-bottom: 5px;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-bottom: 10px;
}

.bottomOperatorProductPageMainDescription {
    margin: 0 5px 0 10px;
    font-size: 18px;
    color: #222;
    width: 100%;
}

.bottomOperatorProductPageMainDescription .pd_validity {
    font-size: 17px;
    font-weight: 600;
    margin: 1px 0 10px 0;
    color: #000;
}

.bottomOperatorProductPageMainDescription .pd_intenet {
	margin: 0 5px 0 0px;
    font-size: 16px;
    color: #222;
    width: calc(100% - 150px);
    font-weight: 600;
	display: none;
}
.bottomOperatorProductPageMainDescription span {
    margin: 0;
    float: left;
    width: 100%;
}

.bottomOperatorProductPageMainAmount {
    font-size: 15px;
    font-weight: 600;
    min-width: 110px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-align: center;
    background: #8a73ff;
    height: 40px;
    border-radius: 30px;
    color: #FFF;
    line-height: 15px;
    padding: 5px 30px 6px 30px;
}

.nextPlanIco {
    font-size: 24px;
    font-weight: 700;
    transform: rotate(-90deg);
	display: none;
}


.searchOperatorByPhoneBtn {
    position: fixed;
	bottom: 45px;
    right: 25px;
    width: 85px;
    height: 85px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #8a73ff;
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    padding: 0 10px;
    border-radius: 30px;
    box-shadow: 0 5px 20px -5px rgba(0, 0, 0, .3);
}

.searchOperatorByPhoneBtn svg {
    fill: #fff;
    width: 40px;
    height: 40px;
}
.circleBoxContent {
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    width: 100%;
    height: auto;
}

.circleBoxContent.fullHeight {
    height: 100%;
}

#mainRecharge .popUpInnerBox{
    background: white;
	    position: relative;
}

.circleBoxItem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    height: 75px;
    padding: 20px 40px;
    font-size: 22px;
    color: #222;
    line-height: 30px;
}

.circleBoxItem a {
    color: #222;
}

.emptyline {
    position: relative;
    overflow: hidden;
    background-color: #ececec;
    border: none;
}

p.emptyline {
    width: 200px;
    height: 20px;
}

.emptyline:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: translateX(-100%);
    content: "";
    background: linear-gradient(0.25turn, transparent, #fff, transparent);
    pointer-events: none;
    opacity: 0.8;
    animation: skeleton-animation 2s infinite;
}

.bottomSlideLineBlock {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
}

.bottomSlideLine {
    width: 100px;
    height: 6px;
    background: #f1f1f1;
    border-radius: 35px;
    position: absolute;
    top: 10px;
}

.slideOutDown{
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slideOutDown{
    from {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@media only screen and (min-width:769px){
    section {
        padding: 50px;
    }

    .searchBottomBlock {
        bottom: 100px;
        height: auto;
        width: auto;
        left: 50px;
        right: 50px;
    }

    .bottomOperatorProductPageContent {
        border-radius: 35px;
        left: 50px;
        right: 50px;
        bottom: 50px;
        width: auto;
    }

    .bottomOperatorProductPageContent.opened {
        height: calc(100% - 260px);
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
        border-bottom-right-radius: 35px;
        border-bottom-left-radius: 35px;
    }

    .OperatorProductMain {
        padding: 60px 0;
    }
}

#rechargemobileRow.inputFormFild .isdCode .contryCode {
    font-size: 18px;
    font-weight: 600;
}

#fullScreenPay {
    background: #FFF;
}

.fullScreenPayin {
    float: left;
    width: 100%;
    position: relative;
    height: 100%;
}
.brandlogo {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 20%;
}
.brandlogo img {
    width: 110px;
    height: 110px;
    border-radius: 100%;
    object-fit: cover;
}
.brandname {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-top: 15px;
}
.brandphone {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 16px;
    font-size: 24px;
}
.brndamount {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 36px;
    margin-top: 40px;
    font-weight: 700;
}
#fullScreenPay .leftIconBox {
    position: absolute;
    top: 0px;
    height: 70px;
    left: 13px;
    width: 50px;
}
#fullScreenPay .leftIconBox img {
    width: 25px;
}
.paybtn {
    background: #8a73ff;
    font-size: 16px;
    color: #FFF;
    border-radius: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 80%;
    position: fixed;
    bottom: 35px;
    left: 10%;
    font-weight: 500;
}

.addnewcardpopup {
	z-index: 301;
	background: transparent;
}

.addnewcardpopupin {
	background: rgb(0 0 0 / 40%);
}
.addnewcardbottom{
	padding: 15px 15px 40px 15px;
    z-index: 306;
}
.addcardcardbox {
    margin-top: 0px;
    padding: 0px 5px;
}
.addnewcardpopupcnt .removenotifybox {
    z-index: 306;
    /* right: unset;
    left: 0px;
    background: transparent;
    width: 60px;
    height: 40px; */
}
.infoButnBox .infoOkBtn{
	font-weight: 600;
}

/* .addnewcardpopupcnt .removenotifybox svg{
	opacity:0;
} */

.addcardttprodboxttl{
	display:none;
}

#cardSelectingPopUp {
    z-index: 302;
}

.opratorinit {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: #8a73ff;
    border-radius: 100%;
    font-weight: 700;
    color: #FFF;
}

#mainRecharge .userIcon svg {
    width: 65px;
    height: 65px;
    fill: #188DF0;
}
.small_amountBox {
    font-size: 10px;
}

.max_min_info {
    margin: 10px 15px;
    display: flex;
    justify-content: space-between;
}

.amount_input {
    margin: 15px 0 0 0;
}
.pricerangproduct .bottomOperatorProductPageMainAmount {
    display: none;
}
.pricerangproduct .bottomOperatorProductPageMainDescription {
    margin-left: 0px;
}
#mainRecharge #amountBox .userIcon{
	margin-left: 0px;
	display: none;
}
 
#mainRecharge #amountBox .topSearchBlockIcons .operatorIco {
    margin-left: 0px;
}


/*! CSS Used from: Embedded */
.guJpyG{margin:var(--typoMargin);user-select:inherit;max-width:var(--typoMaxWidth);color:var(--typoColor);}
@media (min-width: 1024px){
.guJpyG{user-select:text;}
}
.guJpyG[data-typeface="h4"]{font:32px / 40px BeatriceSemibold, Arial, sans-serif;}
@media (min-width: 576px){
.guJpyG[data-typeface="h4"]{font:24px / 36px BeatriceSemibold, Arial, sans-serif;}
}
.guJpyG[data-typeface="p4"]{font:16px;}
@media not all and (max-width: 575px){
.HLbDt[data-lessthan="sm"]{display:none!important;}
}
@media not all and (min-width: 575px){
.HLbDt[data-greaterthanorequal="sm"]{display:none!important;}
}
.fTutVk{display:flex;box-sizing:border-box;flex-direction:row;height:100%;width:100%;}
.fTutVk picture,.fTutVk section{display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;box-sizing:border-box;height:100%;     background: transparent;}
.fTutVk picture{width:0px;transition:width 0.4s ease 0s;}
.fTutVk section{-webkit-box-flex:1;flex-grow:1;}
.iHBits{font:18px / 22px BeatriceSemibold, Arial, sans-serif;display:inline-block;outline:none;min-width:auto;cursor:pointer;border-radius:64px;border:none;height:48px;text-decoration:none;padding:0px 32px;white-space:nowrap;box-sizing:border-box;transition:padding 0.4s ease 0s;text-align:center;overflow:hidden;}
.iHBits:hover{text-decoration:none;}
.iHBits:hover{transform:scale(0.98, 0.98);}
.iHBits[data-fullwidth="true"]{min-width:100%;}
.iHBits[data-small="true"]{padding:0px 16px;height:40px;font:14px / 24px BeatriceSemibold, Arial, sans-serif;}
.iHBits[data-small="true"]:hover{transform:scale(0.98, 0.98);}
.hTMjCv{font-size: 22px;
    color: #FFF;
    background: #7F00FF;
    font-weight: 600;}
.eWLEgr{display:grid;grid-template:"disclaimer badge" auto "value value" min-content / auto auto;gap:0px 8px;}
.eZKjsN{min-height:24px;grid-area:disclaimer / disclaimer / disclaimer / disclaimer;}
.iPOamM{grid-area:value / value / value / value;    font-weight: 700;}
.iPOamM[data-issender="true"]{padding:8px 0px 0px;}
.iPOamM > p{display:inline-block;margin-right:8px;}
.QzQFI{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gpIaIR{margin:0px;word-break:break-all;width:fit-content;font-size: 30px;}
@media (min-width: 576px){
.gpIaIR{font:24px / 36px BeatriceSemibold, Arial, sans-serif;}
}
.iFptLl{display:grid;box-sizing:border-box;grid-template-rows:min-content auto;align-items:flex-end;padding:16px;background-color:rgb(255, 255, 255);border-bottom:1px solid rgb(185, 203, 211);border-left:1px solid rgb(185, 203, 211);border-right:1px solid rgb(185, 203, 211);border-bottom-right-radius:16px;border-bottom-left-radius:16px;     height: auto;
    min-height: 160px;}
.iFptLl .sc-dkzDqf{line-height:0px;}
.dkdsHA{margin:8px 0px 0px;    width: 100%;}
.qkLQR{box-sizing:border-box;display:grid;grid-template-rows:min-content auto;height:var(--denominationHeight);padding:16px;background-color:var(--denominationBackground);border-top:solid 1px var(--denominationBackground);border-left:solid 1px var(--denominationBackground);border-right:solid 1px var(--denominationBackground);border-top-right-radius:16px;border-top-left-radius:16px;}
.qkLQR p{color:var(--denominationColor);}
.emBmAB{height:100%;display:grid;grid-template-rows:auto 1fr;cursor:pointer;width: 100%;
    background: transparent;}
.jgrSSz *{box-sizing:border-box;}

.validitymsgrow {
    font-size: 11px;
    margin-bottom: 10px;
    color: #708C8C;
    float: left;
    width: 100%;
    margin-top: 5px;
}
.benefitsmsgrow {
    font-size: 14px;
    color: #70718c;
    font-weight: 600;
    float: left;
    width: 100%;
    margin-bottom: 25px;
}
#mainRecharge #xareSignup{
	z-index:302;
    padding: 50px 20px 0 20px;
}

#mainRecharge #phoneVerify{
	z-index:303;
}
#mainRecharge #xareSignup .signFirstNme .payInputTitle {
    margin-bottom: 10px;
    padding-left: 13px;
    font-size: 16px;
}
#mainRecharge #xareSignup .signInput {
    color: #000;
    background: #d9d9d9;
    border-radius: 20px;
    padding: 13px;
}

#mainRecharge #xareSignup #signMobNumbrLbl {
    margin-bottom: 10px;
    padding-left: 0;
    font-size: 20px;
}

.whatsappblock {
    position: fixed;
    bottom: 25px;
    right: 20px;
    z-index: 300;
    width: 50px;
    height: 50px;
    overflow: hidden;
    background-color: #70ff75;
    background-image: linear-gradient(#70ff75, #2aaf2f);
    border-radius: 50%;
    align-items: center;
    padding: 10px;
    display: flex;
}
.whatsappblock img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* new styles */
.packs-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    padding: 20px 0 5px 0;
}

.pack-item {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 15px;
    background: #FFF;
    border-radius: 40px;
    padding: 5px 10px;
    color: #151515!important;
    min-width: 30%;
    height: 32px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid #8a73ff;
}

.pack-item.selected {
    background: #8a73ff;
    color: white!important;
}

.mainbannerareain_img {
    width: 100%;
    max-height: 95%;
    object-fit: cover;
}

#mainRechargeContent .mainbannerarea {
    width: 100%;
    background: #FFF;
    padding: 0;
    float: left;
}

#OperatorCountryCodeList {
    top: 0;
    height: 100%;
    background: rgba(5,52,109,0.50);
}

#OperatorCountryCodeList .infoContainer {
    background: #FFF;
    border-radius: 35px;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    padding: 0px 0 40px 0;
    width: 100%;
    position: relative;
    top: 0;
}

#OperatorCountryCodeList .appHeader {
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    overflow: hidden;
}

@media only screen and (max-width:769px){
    #OperatorCountryCodeList .infoContainer {
        background: #FFF;
        border-radius: 0;
        border-top-left-radius: 35px;
        border-top-right-radius: 35px;
        padding: 0px 0 40px 0;
        width: 100%;
        position: relative;
        top: 0;
    }
}

/* sign styles */
#xareSignup.prepaidXareSignup .formLablBox {
    margin-top: 20px;
}

.prepaidXareSignup .appFormBox .inputFormFild {
    margin-top: 15px;
}

#xareSignup.prepaidXareSignup .mobileForm {
    margin-top: 15px;
}

#mainRecharge #xareSignup.prepaidXareSignup .signFirstNme .payInputTitle {
    font-size: 20px;
}

.signFirstNme .signInput {
    border-radius: 50px;
}

#mainRecharge .prepaidXareSignup  .mobileForm .payInputTitle {
    font-size: 20px;
    font-weight: 500;
    color: #656060;
}

.prepaidXareSignup .inputFocus {
    border: 2px solid #111 !important;
}

.prepaidXareSignup .errorRequrd {
    color: #D31D1D;
    font-size: 12px;
    display: inline-block;
    margin: 0 0 0 5px;
    font-weight: 600;
}

.prepaidXareSignup  .phoneVerifyBox .digitCodeTxt {
    color: #000;
    background: transparent;
}

.prepaidXareSignup .appFullBtnBox {
    padding: 20px 20px;
}

/* success page styles */
#successPage .mainbannerarea {
    width: 100%;
    background: rgb(113 146 255 / 25%);
    padding: 0;
    float: left;
}

#successPage .successPageContentBox {
    float: left;
    width: 100%;
    padding: 30px 20px 20px 20px;
}

#successPage .successBtnsBlock {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 15px;
}

#successPage .successProfileContent {
    margin: 0 0 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

#successPage .profiletoparea{
    width: 49%;
}

#successPage .successProfileMessageBox {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 49%;
}

#successPage .successProfileMessageBox h4{
    width: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 1.2;
}

#successPage .profileinit {
    left: 0;
}

#successPage .profilename {
    margin-bottom: 1px;
    padding: 0 0 0 50px;
    min-height: 45px;
    font-size: 20px;
}

#successPage .profileemail {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
    text-align: right;
}

#successMessage {
    line-height: 1.5;
    margin: 0 0 20px 0;
    font-size: 26px;
}

#mainRecharge #xareSignup .appFullBtnBox .formSaveBtn {
	height: 44px;
    font-size: 16px;
    background: linear-gradient(315.28deg, #a54ff7 0%, #476efc 100%)!important;
}
#xareSignup .formLablBox .formHeading{
	margin-bottom: 20px;
}

#OTPphoneVerify .phoneVerifyBox {
    padding: 0px 0;
}

#OTPphoneVerify .resendCodBtn {
    font-size: 14px;
    padding: 5px 5px;
}

#OTPphoneVerify .codeVrifyBox {
    margin-bottom: 0px;
}

#OTPphoneVerify #entrOtpSentCode {
    font-size: 18px;
}

#OTPphoneVerify #VerfyNumber{
    font-size: 18px;
}

#OTPphoneVerify #vrfyCodLbl {
    font-size: 16px;
    padding: 0;
}

.prepaidXareSignup .inputFormName .signFirstNme {
    float: left;
    width: 100%;
}

.prepaidXareSignup  .inputFormFild .isdCode .isdarr {
    width: 16px;
    height: 20px;
    fill: #656060!important;
}

.rightIconBox {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #8a73ff;
    right: 10px;
    top: 10px;
    border-radius: 100%;
    color: #FFF;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
	display:none;
}
#promocodeContentBox {
	float: left;
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #CCC;
}
#promocodeContentBox .addcardboxttl1 {
    color: #000;
    font-size: 16px;
    margin-top: 10px;
    font-weight: 600;
    padding-left: 5px;
}

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

.addpromocode {
    margin-top: 10px;
    height: 50px;
    border: 1px solid #d6d6d6;
    border-radius: 10px 0px 0px 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addpromocodetxt {
    position: absolute;
    left: 10px;
    color: #5e5e5e;
    font-size: 14px;
    font-weight: 500;
}

.addpromocodeval {
    text-align: left;
    width: 100%;
    padding-left: 5px;
    color: #000;
    font-size: 16px;
}

.addpromocodeval input {
    height: 36px;
    width: 100%;
    padding-left: 10px;
    background: transparent;
    color: #000;
    font-size: 19px;
}

.addpromocodebtn {
	width: 140px;
    margin: 10px 0 0 0px;
}

.promocodeBox .addcardbtn {
    border-radius: 0px 10px 10px 0px;
    height: 50px;
    background: #b0b0b0 !important;
	position:relative;
}

.promocodeBox .addcardbtn.active {
    background: #8a73ff !important;
}

.linethrough {
    display: inline-block;
    margin-right: 7px;
    text-decoration: line-through;
    color: #777;
}
.savecardmessage {
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    margin-top: 20px;
    padding: 0px 10px;
}
.addcardcardbox #promocodeContentBox{
	float: left;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: none;
    margin-top: 10px;
}
.promocodeBoxadded{
	display:none;
}
.promocodeBoxadded .addpromocode {
    margin-bottom: 15px;
}
.promocodeBoxadded .addpromocodeval {
    color: #008b71;
    font-weight: 600;
    font-size: 18px;
    padding-left: 8px;
    position: relative;
    padding-top: 2px;
    display: inline-flex;
    align-items: center;
    line-height: 18px;
}
.coponcode {
    font-weight: 700;
    display: inline-flex;
    margin-right: 5px;
    font-size: 20px;
    height: 34px;
    align-items: center;
    padding: 0px 10px;
    background: #008b7112;
    border-radius: 6px;
}
.coponcodermicn {
    position: absolute;
    right: 10px;
    width: 20px;
    height: 20px;
}
.coponcodermicn svg {
    width: 20px;
    height: 20px;
    fill: #555;
}
.discountrow {
    padding: 0px 7px;
    display: inline-flex;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 600;
}
.discntval {
    font-weight: 700;
}
.discountvalrow .discntval {
    color: #008b71;
}
.promocodeBox .addcardbtn .YellowSpinnerBox {
    border-radius: 0px 10px 10px 0px;
}
.nonofferimg{
	display:none;
}

.optinwhatsapp {
    margin-bottom: 5px;
    min-height: 25px;
	width: 100%;
    float: left;
}

.optinwhatsappinner {
    display: inline-flex;
    padding: 0px 7px;
    height: 25px;
    align-items: center;
	width: 100%;
    float: left;
}
.whatsappicon {
    width: 14px;
    height: 25px;
    margin-right: 3px;
    display: inline-flex;
    align-items: center;
}
.whatsappicon svg {
    width: 12px;
    height: 12px;
}
.whatsappmsg {
    font-size: 11px;
}
.optinwhatsapp .serviveToggle .toggle-btn.active {
    background: rgb(15 165 225 / 50%);
}

.toggle-btn [type=checkbox]{
    box-sizing: border-box;
    padding: 0;
}
.serviveToggle{margin-left:auto;float:left;}
.toggle-btn.active{background:#98019A;}
.toggle-btn .round-btn{width:18px;height:18px;background-color:#fff;border-radius:50%;display:inline-block;position:absolute;left:4px;top:50%;margin-top:-9px;-webkit-transition:all .30s ease-in-out;-moz-transition:all .30s ease-in-out;-o-transition:all .30s ease-in-out;transition:all .30s ease-in-out;z-index:4;}
.toggle-btn.active .round-btn{left:23px;}
.serviveToggle{float:left;margin-left:auto;}
.toggle-btn{width:46px;height:25px;border-radius:50px;display:inline-block;position:relative;background:#D2D6E9;cursor:pointer;-webkit-transition:background-color .40s ease-in-out;-moz-transition:background-color .40s ease-in-out;-o-transition:background-color .40s ease-in-out;transition:background-color .40s ease-in-out;cursor:pointer;}
.toggle-btn .cb-value{position:absolute;left:0;right:0;width:100%;height:100%;opacity:1;z-index:6;border-radius:30px;cursor:pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; background:transparent;}
.toggle-btn input:checked{transition:all ease 400ms;-webkit-transition:all ease 400ms;background:transparent;}
@media only screen and (min-width:600px){
.toggle-btn .round-btn{width:24px;height:24px;margin-top:-13px;left:8px;}
.toggle-btn{width:70px;height:35px;}
.toggle-btn.active .round-btn{left:36px;}
}
@media only screen and (min-width:600px){
.toggle-btn .round-btn{width:24px;height:24px;margin-top:-13px;left:8px;}
.toggle-btn{width:70px;height:35px;}
.toggle-btn.active .round-btn{left:36px;}
}
.optinwhatsapp .serviveToggle{transform:scale(0.50);transform-origin:right;}
.optinwhatsapp .serviveToggle .toggle-btn.active{background:rgb(15 165 225 / 50%);}

.cardSelectItem.selected{
	    transform: scale(1.02);
    transform-origin: center center;
    background: #8127ff;
}

.cardSelectItem.selected .xareIco svg{
	fill:#FFF;
}
.cardSelectItem.selected h4 {
	color:#FFFFFF;
}

.cardSelectItem.selected .yourcrdldigit{
	color:#FFFFFF;
}

.topuppagerefer {
    margin: 20px 0px 5px 0px;
}

.topuppagereferin img {
    width: 100%;
    object-fit: cover;
}

.pack-amount-block-fees {
    font-size: 12px;
    margin-left: 10px;
    margin-top: 1px;
	display:none;
}



#payLaterInfoContent {
    background: #ffffff;
    overflow-y: auto;
}

.payLaterBannerBox {
    position: relative;
}

.paylaterInfoClose {
    position: absolute;
    width: 18px;
    height: 18px;
    right: 25px;
    top: 25px;
}

.paylaterInfoClose svg {
    width: 18px;
    height: 18px;
    fill: #8127ff;
}

#payLaterInfoContent h2 {
    font-weight: 800;
}

.payLaterContentBox {
    padding: 45px 10px 10px 30px;
}

.payLaterContentBoxFirstLabel, .payLaterContentBoxSecondLabel, .payLaterContentBoxThirdLabel{
    margin: 0 0 50px 0;
}

.payLaterContentBoxSecondLabel {
    padding: 0 20px 0 0;
}

.gradientText {
    background: linear-gradient(to right, #5994db 0%, #831dba 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    font-weight: 800;
}

#payLaterInfoContent p {
    color: #808080;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 10px;
}

.payLaterContentBoxThirdLabel {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.payLaterContentBoxLabelLeftItem {
    width: 53%;
    padding: 15px 10px 0 0;
}

.payLaterContentBoxLabelRightItem {
    width: 47%;
}

.payLaterContentImage {
    width: 100%;
    height: auto;
}

.chatIconBox {
    padding: 15px 0;
}

.chatImgIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: #f6f0f1;
    padding: 10px;
}

.chatImgIcon img {
    width: 100%;
}

@media only screen and (max-width:390px){
    #payLaterInfoContent p {
        font-size: 12px;
    }

    #payLaterInfoContent h2 {
        font-size: 18px;
    }
}

.summaryContentHeader {
    padding: 0px 7px;
    margin: 10px 0;
}

.selected .rightCardSelectItem {
    color: #FFF;
}

#rechargemobileRow .mobile_down_arrow {
    display: none;
}
.showspinwheel {
    background: #371c83;
}

.showspinwheel .mainSpinerContent {
    overflow: hidden;
    margin-top: 50px;
}
.showspinwheel .topSpinerBox {
    display: flex;
    height: auto;
    position: relative;
}
.showspinwheel .topSpinerBoxImage {
	display: inline-flex;
	float: left;
	position: relative;
	height: 350px;
	width: 100%;
}

.showspinwheel .mainSpinerWheelImage {
	width: 100%;
	height: 100%;
/* 	background-color: #eae8fd;
	float: left;
	background-image: repeating-conic-gradient(#9a2bad 0 9deg, #eae8fd 9deg 18deg);
	background-size: 100% 100%;
	-webkit-animation: 1.5s spinbgloader linear infinite;
	animation: 1.5s spinbgloader linear infinite; */
}
-webkit-@keyframes spinbgloader {
	-webkit-from {
		background-image: repeating-conic-gradient(#ffffff 0 9deg, #eae8fd 9deg 18deg);
	}
	-webkit-to {
		background-image: repeating-conic-gradient(#eae8fd 0 9deg, #ffffff 9deg 18deg);
	}
}

@-webkit-keyframes spinbgloader {
	from {
		background-image: repeating-conic-gradient(#ffffff 0 9deg, #eae8fd 9deg 18deg);
	}
	to {
		background-image: repeating-conic-gradient(#eae8fd 0 9deg, #ffffff 9deg 18deg);
	}
}

@keyframes spinbgloader {
	from {
		background-image: repeating-conic-gradient(#ffffff 0 9deg, #eae8fd 9deg 18deg);
	}
	to {
		background-image: repeating-conic-gradient(#eae8fd 0 9deg, #ffffff 9deg 18deg);
	}
}

.wheelContentBox {
	position: absolute;
	width: calc(80%);
	height: auto;
	left: 10%;
	bottom: 0;
}

.wheelAvailableBox {
	position: absolute;
	width: 120px;
	height: auto;
	left: 50px;
	bottom: -53px;
	max-width: 435px;
}

#thespinner {
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: rotate(38deg);
}

#thespinner {
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-o-transform-origin: center center;
	transform-origin: center center;
	transition: 9s cubic-bezier(.5, .8, .1, 0.95);
}

.available_label_box {
	position: absolute;
	z-index: 2;
	width: calc(100% - 59%);
	top: 26%;
	left: 30%;
	color: #614dea;
}

.available_label_box h2 {
	font-size: 17px;
	text-align: center;

}

.available_label_box p {
	font-size: 12px;
	text-align: center;
}

.wheelAvailableBox img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.centerSpinerBox {
	margin: 90px 0 20px 0;
	position: relative;
	color: #FFFFFF;
}

.centerSpinerBotBox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 30px 20px 0px 20px;
    border-top: 1px dashed #FFF;
}

.centerSpinerBotBox h4 {
	margin: 0px 0 0px 0;
	font-size: 22px;
	font-weight: 900;
}
.centerSpinerBotBox h4.subheadng {
	font-size: 13px;
	font-weight: 500;
	margin-top: 17px;
    text-align: center;
}
.centerSpinerBotBox h4.nextsubheadng {
	margin-top: 30px;
	font-size: 16px;
	margin-bottom: 0px;
}

.centerSpinerBotBoxContentBorder {
	width: 100%;
	padding: 0 10px;
	border: 2px solid transparent;
	margin: 20px 0 0 0;
	border-radius: 20px;
}

.centerSpinerBotBoxContent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 25px 0;
}
@keyframes loading-bar-spinner{
	0%{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}
@-webkit-keyframes loading-bar-spinner{
	0%{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}

.pointer_arrow {
	width: 50px;
	height: auto;
	position: absolute;
	right: -35px;
	top: calc(50% - 20px);
	z-index: 2;
}

.pointer_arrow img {
	width: 100%;
	object-fit: contain;
}
#confetti {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
}
.closewheelppop {
    position: absolute;
    z-index: 5;
    right: 0px;
    top: 10px;
    font-size: 14px;
    font-weight: 600;
    width: 42px;
    height: 30px;
    color: #FFF;
}
.wheelAvailableBox.pushbtn {
	transform: scale(0.9);
}
.cashbackvaladdcard {
    margin-top: 10px;
}


#pack-item-3846{
	display: none;
}

.pintopupinfo {
    margin-top: 20px;
    float: left;
    width: 100%;
    background: #faeeff;
    color: #850bbc;
    border-radius: 10px;
    padding: 20px;
    font-size: 16px;
    display: inline-flex;
}
.pintopupicn {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    margin-top: 2px;
}
.pintopupicn svg {
    fill: #7e7e7e;
}
.pintopuptxt {
    font-weight: 500;
    width: calc(100% - 30px);
    line-height: 20px;
}