[data-modal-show="quickPayPopUp"]{overflow:hidden}
dialog#quickPayPopUp[open]{&.quickPayPopUp{background-color:transparent;border:0;display:flex;flex-direction:column;width:100%;overflow:hidden;padding:0;margin:auto 0 0 0;color:#2f3043;justify-content:flex-end;min-width:100%;>.sidebar-arrow{display:none}
.popup_body{.closeIcon{display:none}
}
img.closeIcon{border-radius:50px;background-color:#fff;padding:4px;cursor:pointer;align-self:flex-end;margin:0 10px 10px 0}
.popup_body{padding:20px;background-color:#fff;border-radius:16px 16px 0 0;display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:20px;overflow-y:auto;&::-webkit-scrollbar{width:6px;border-radius:4px}
&::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;margin:10px}
&::-webkit-scrollbar-thumb{background:#595969;border-radius:4px}
&::-webkit-scrollbar-thumb:hover{background:#d5d6d9;cursor:pointer}
.heading{font-size:24px;line-height:28px;font-family:'ViBold';color:#2f3043;margin:0;text-align:center}
.itemsWrapper{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;width:100%;.item{display:grid;grid-template-columns:40px 1fr 48px;grid-gap:0 12px;width:100%;.itemIcon{grid-column:1/2;grid-row:1/3;width:40px;height:40px;align-self:center}
.itemTitle{grid-column:2/3;grid-row:1/2;font-size:14px;line-height:16px;color:#2f3043;font-family:"ViBold";margin:0 0 4px 0}
.itemSubHeading{grid-column:2/3;grid-row:2/3;font-size:12px;line-height:16px;margin:0;font-family:"ViMedium";color:#595969;&.hasError{color:#ee2737}
.offerTNC{text-decoration:underline;font-family:"ViBold"}
}
.changeMethodCTA{grid-column:3 / 4;grid-row:1 / 3;font-size:14px;line-height:18px;font-family:ViMedium;margin:0;text-decoration:underline;align-self:center}
&:not(:first-child){display:none}
&.noOffer{.itemTitle{grid-row:1 / 3;align-self:center}
.itemSubHeading{display:none}
}
}
}
.amountSection{position:relative;padding:16px 0 0 0;width:100%;display:flex;flex-direction:column;&::before{content:'';position:absolute;top:0;left:-20px;width:calc(100% + 40px);height:1px;background-color:#d5d6d9}
p.payableAmount{width:100%;display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 18px 0;.title{font-family:"ViBold"}
.value{font-family:"ViBold"}
}
button.quickPayCTA{width:100%;border-radius:50px;padding:10px 0;border:0;background-color:#ee2737;color:#fff;font-family:'ViMedium';font-size:16px;line-height:20px;&:focus{outline:0}
}
}
}
}
&::backdrop{background-color:#111622;opacity:.8}
}
#divLoadingPaymentStatus.show{display:block !important;position:fixed;z-index:9999999;background-image:url(../../../../../content/dam/paymentGateway/preloader-vodafone.gif);background-color:rgb(17 22 34 / 60%);background-repeat:no-repeat;background-position:center;left:0;bottom:0;right:0;top:0;background-size:127px;&:after{content:'we are fetching your payment status...';position:absolute;display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#fff;transform:translateY(60px);font-size:16px;line-height:20px;font-family:'ViBold'}
@media screen and (max-width:768px){background-size:60px;background-color:rgb(17 22 34 / 80%)}
}
dialog#quickPayOfferTNC[open]{background-color:transparent;border:0;display:flex;flex-direction:column;width:100%;overflow:hidden;padding:0;margin:auto 0 0 0;color:#2f3043;justify-content:flex-end;min-width:100%;svg#close-icon{align-self:flex-end;margin:0 10px 10px 0;width:32px;height:32px;background-color:#fff;border-radius:50px;padding:8px;min-width:32px;min-height:32px;rect{fill:#111622}
}
.popupBody{padding:20px;background-color:#fff;border-radius:16px 16px 0 0;display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:20px;overflow-y:auto;min-height:35dvh;&::-webkit-scrollbar{width:6px;border-radius:4px}
&::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;margin:10px}
&::-webkit-scrollbar-thumb{background:#595969;border-radius:4px}
&::-webkit-scrollbar-thumb:hover{background:#d5d6d9;cursor:pointer}
.heading{font-size:24px;line-height:28px;font-family:'ViBold';color:#2f3043;margin:0;text-align:center}
ul{padding:0 0 0 10px;color:#595969;margin:0;li{font-size:12px;line-height:16px;padding:0;margin:0}
}
}
&::backdrop{background-color:#111622;opacity:.8}
}
section{&.numberValidation{.nv_container{align-items:flex-end}
.numberForm{display:flex;flex-direction:column;padding:23px 24px;border:1px solid #ccc;border-radius:16px;box-shadow:0 .5px 2px 0 rgba(96,97,112,0.16),0 0 1px 0 rgba(40,41,61,0.08);background-color:#fff;width:448px;margin:32px 0 0 0;position:relative;input.formControl{height:auto;border:1px solid var(--btnDisabledBgColor);padding:13px 16px;line-height:20px;font-size:16px;font-family:ViRegular;color:var(--primaryColor);border-radius:8px;transition:all cubic-bezier(0.445,0.05,0.55,0.95) .4s;&:focus{outline:0;border:1px solid #737482}
&:focus+label{font-family:"ViBold"}
&:not(:placeholder-shown)+label{opacity:1}
&:not(:valid)+label+.errorMsg+.validateNumber{background-color:var(--btnDisabledBgColor)}
&::placeholder{font-size:16px;line-height:20px;font-family:"ViRegular";font-weight:normal}
}
label{font-size:12px;position:absolute;top:12px;line-height:16px;padding:4px 8px;background-color:#fff;left:36px;opacity:0;transition:all .2s ease-in-out;font-family:"ViRegular"}
&.hasError{.errorMsg{display:block}
}
.errorMsg{display:none;font-size:14px;line-height:20px;margin:6px 0 0;color:var(--errorColor);a{text-decoration:underline;&:hover{color:var(--primaryColor)}
}
}
.validateNumber{background-color:var(--btnBgColor);width:100%;font-size:16px;line-height:20px;padding:15px 0;margin:20px 0 0 0;border:0;color:#fff;border-radius:50px;transition:all .2s ease-in-out;&:disabled{background-color:var(--btnDisabledBgColor)}
&:focus{outline:0}
}
.offerBanner{.bannerImage{width:100%}
}
}
@media screen and (max-width:768px){padding:0;flex-direction:column;.mainHeading{order:2;padding:20px;font-size:16px;line-height:20px;margin:0}
.numberForm{width:calc(100% - 40px);order:3;margin:0 auto 40px;padding:16px;.validateNumber{position:relative;width:100%;margin:20px auto 0;left:0}
label{font-size:12px;top:8px;line-height:14px;padding:0 6px;left:28px}
.errorMsg{font-size:12px;line-height:14px;margin:6px 0 0 0}
}
.offerBanner{order:1;width:100%;background-image:linear-gradient(to bottom,#dff9ff,#c9dff4);padding:0;p.offerheading{font-size:16px;line-height:20px;margin:0}
}
}
}
}
img#clickableImage{cursor:pointer}
section{&.billerList{.billerListContainer{margin:0;box-shadow:0 .5px 2px 0 rgba(96,97,112,0.16),0 0 1px 0 rgba(40,41,61,0.08);border:solid 1px var(--borderColor);height:505px;width:100%;border-radius:16px;padding:24px;display:flex;flex-direction:column;background-color:var(--whiteBgColor);gap:40px;position:relative;&::before{content:'';position:absolute;width:calc(100% - 48px);height:1px;top:98px;left:0;background-color:var(--borderColor);right:0;margin:auto}
.searchBox{width:400px;position:sticky;.searchBoxInput{font-size:16px;line-height:20px;padding:15px 50px 15px 44px;color:var(--primaryColor);margin:0;height:auto;border:1px solid var(--btnDisabledBgColor);border-radius:8px;width:100%;font-family:"ViRegular";transition:all cubic-bezier(0.445,0.05,0.55,0.95) .4s;&:focus{border:1px solid var(--primaryColor);outline:0}
&:not(:placeholder-shown)~.searchClose{display:block}
&::placeholder{font-family:"ViRegular";text-transform:unset}
}
img{position:absolute;top:0;bottom:0;margin:auto;z-index:2;&.searchIcon{left:12px}
&.searchClose{display:none;right:12px;cursor:pointer}
}
}
.resultNotFound{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;position:relative;&::before{content:'';position:absolute;top:0;left:0;height:1px;width:100%;background-color:var(--borderColor)}
img.noResultFound{margin:0 0 16px 0}
p.heading{font-size:26px;line-height:30px;font-family:'ViBold';margin:0 0 8px 0;text-align:center;color:var(--primaryColor)}
.subHeading{font-family:'ViRegular';color:var(--mutedTextColor);font-size:16px;line-height:20px;margin:0;text-align:center;padding:0 20px;.searchTerm{word-break:break-word}
}
}
.listOfBiller{height:505px;overflow-x:auto;display:flex;flex-direction:column;gap:40px;&::-webkit-scrollbar{width:8px}
&::-webkit-scrollbar-track{background:#fff}
&::-webkit-scrollbar-thumb{background:#d5d6d9;border-radius:10px}
&::-webkit-scrollbar-thumb:hover{background:#8f8f8f}
.stateItems{display:flex;flex-direction:column;gap:16px;position:relative;&[data-circle="false"]{order:2}
&[data-circle="true"]{order:1}
&:not(:nth-last-child(1))::before{content:'';position:absolute;bottom:-20px;height:1px;width:100%;background-color:var(--borderColor)}
&.last{&::before{content:none}
}
p.stateName{font-size:14px;line-height:18px;color:var(--mutedTextColor);margin:0;font-family:'ViMedium'}
.billers{display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;flex-wrap:wrap}
}
}
.listOfBiller:not([data-category="Electricity"]){display:flex;gap:12px;position:relative;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;flex-direction:row;height:auto}
&.noResult::before{content:none}
}
.billerItem{flex-basis:24%;display:flex;align-items:center;justify-content:flex-start;gap:8px;cursor:pointer;.billerIcon{min-width:52px;min-height:52px;display:flex;align-items:center;justify-content:center;border:1px var(--borderColor) solid;border-radius:6px;background-color:var(--whiteBgColor);align-self:flex-start;img.icon{width:24px;line-height:24px}
}
p.billerName{font-size:14px;line-height:16px;margin:0;font-family:'ViMedium';color:var(--primaryColor);max-width:180px;b{font-family:"ViBold"}
}
}
@media screen and (max-width:768px){.nv_container{padding:0}
padding:0;.mainHeading{order:unset;display:none}
.billerListContainer{margin:0;background-color:transparent;border:0;box-shadow:none;gap:16px;padding:0;height:calc(100dvh - 58px);&::before{content:none}
&.noResult{gap:0;.searchBox{border-bottom:0}
}
.searchBox{width:100%;padding:18px;border-bottom:1px solid var(--borderColor);border-left:0;border-right:0;border-top:0;background-color:var(--whiteBgColor);position:sticky;top:58px;left:0;z-index:1;.searchBoxInput{padding:12px 32px 12px 36px}
img{&.searchIcon{left:24px}
&.searchClose{right:24px}
}
}
.listOfBiller{padding:0 20px;gap:16px;height:auto;.stateItems{border:1px solid var(--borderColor);background-color:var(--whiteBgColor);border-radius:12px;padding:16px;&:not(:nth-last-child(1))::before{content:none}
p.stateName{font-size:12px;line-height:14px}
.billers{gap:16px;.billerItem{flex-basis:100%;position:relative;&::after{content:'';position:absolute;top:0;bottom:0;right:0;width:20px;height:20px;background-image:url(../../../../../content/dam/utility-payment/Utility-NonLoggedIn/UtilityList/mobile-arrow.svg);margin:auto}
p.billerName{font-size:14px;line-height:18px}
}
}
}
}
.listOfBiller>.billerItem{flex-basis:100%;position:relative;&::after{content:'';position:absolute;top:0;bottom:0;right:0;width:20px;height:20px;background-image:url(../../../../../content/dam/utility-payment/Utility-NonLoggedIn/UtilityList/mobile-arrow.svg);margin:auto}
p.billerName{font-size:14px;line-height:18px}
}
.listOfBiller:not([data-category="Electricity"]){box-shadow:0 .5px 2px 0 rgba(96,97,112,0.16),0 0 1px 0 rgba(40,41,61,0.08);border:solid 1px var(--borderColor);background-color:var(--whiteBgColor);padding:16px;width:calc(100% - 40px);margin:0 auto;border-radius:16px}
}
}
}
}
section{&.billDetails{.billDetailsBox{width:100%;display:grid;grid-template-columns:3fr 1fr;grid-gap:24px;margin:0;.selectedBiller{padding:24px;border-radius:16px;box-shadow:0 .5px 2px 0 rgba(96,97,112,0.16),0 0 1px 0 rgba(40,41,61,0.08);background-color:var(--whiteBgColor);border:1px solid var(--borderColor);display:flex;flex-direction:column;gap:0;.billerHeader{position:relative;display:flex;width:100%;align-items:center;justify-content:flex-start;gap:8px;margin:0 0 40px 0;&::before{content:'';position:absolute;bottom:-19px;left:0;width:100%;height:1px;background-image:linear-gradient(90deg,#fff 25%,#d5d6d9 25%,#d5d6d9 50%,#fff 50%,#fff 75%,#d5d6d9 75%,#d5d6d9 100%);background-size:20.00px 20.00px}
.billerIcon{min-width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--borderColor);border-radius:8px}
p.billerName{font-size:18px;line-height:20px;margin:0;font-family:ViMedium;width:100%}
.editIcon{margin:0 0 0 16px;cursor:pointer;font-size:16px;line-height:20px;display:flex;align-items:center;justify-content:center;img.editIcon{margin:0}
}
}
.formSection{display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;gap:20px;margin:0 0 20px 0;.inputWrapper{flex-basis:48.5%;width:100%;position:relative;.relPrty__SelectBox{width:100%;height:auto;border:1px solid var(--btnDisabledBgColor);padding:13px 16px;line-height:20px;font-size:16px;font-family:ViRegular;color:var(--primaryColor);border-radius:8px;position:relative;input.absolutInput{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}
p#openDropDown{margin:0;font-size:16px;line-height:20px;color:var(--mutedTextColor);text-transform:lowercase}
dialog.relParty_Model[open]{width:100%;box-shadow:0 .5px 2px 0 rgba(96,97,112,0.16),0 0 1px 0 rgba(40,41,61,0.08);border-radius:8px;transform:translate(0,18px);border:1px solid var(--btnDisabledBgColor);padding:0;z-index:1;.listWrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:15px;padding:10px 10px;p.relParty_Option{font-size:16px;line-height:20px;color:var(--primaryColor);font-family:ViRegular;width:100%;padding:8px;position:relative;margin:0;cursor:pointer;&::after{content:'';position:absolute;bottom:-10px;left:0;width:100%;height:1px;background-color:var(--borderColor);right:0;margin:auto}
&:nth-last-child(1){&::after{content:none}
}
}
}
}
}
input.formControl{width:100%;height:auto;border:1px solid var(--btnDisabledBgColor);padding:13px 16px;line-height:20px;font-size:16px;font-family:ViRegular;color:var(--primaryColor);border-radius:8px;&:focus{outline:0}
&:not(:placeholder-shown)+label{display:block;position:absolute;top:-7px;left:10px;font-size:12px;line-height:16px;padding:0 8px;background-color:var(--whiteBgColor);color:var(--mutedTextColor);text-transform:lowercase;font-family:'ViRegular';font-weight:200;max-width:calc(100% - 10%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
label{display:none}
.sameAsEnteredNumber{display:flex;align-items:center;justify-content:flex-start;gap:4px;margin:10px 0 0 0;position:relative;input[type="checkbox"]{position:absolute;top:0;left:0;opacity:0;cursor:pointer;width:20px;height:20px;z-index:9999}
label{display:flex;align-items:center;font-size:14px;line-height:16px;color:var(--primaryColor);margin:0 0 0 25px;font-family:'ViRegular';position:relative;cursor:pointer;&::before{content:'';position:absolute;left:-25px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:url("../../../../../content/dam/utility-payment/Utility-NonLoggedIn/UtilityList/dth-unselectedBox%20.svg");background-size:contain;cursor:pointer}
}
input[type="checkbox"]:checked+label::before{background:url("../../../../../content/dam/utility-payment/Utility-NonLoggedIn/UtilityList/dth-selectedBox.svg");background-size:contain}
}
}
.sampleBill{flex-basis:100%;width:100%;border:1px solid var(--btnDisabledBgColor);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;cursor:pointer;p.heading{margin:0;font-size:16px;line-height:20px;font-family:'ViMedium';display:flex;align-items:center;justify-content:flex-start;gap:2px}
p.subHeading{margin:0;font-size:14px;line-height:17px;color:var(--mutedTextColor);font-family:'ViRegular'}
}
}
button.fetchBill{background-color:var(--btnBgColor);width:335px;font-size:16px;line-height:20px;padding:15px 0;margin:0 0 8px 0;border:0;color:var(--whiteBgColor);border-radius:50px;transition:all .2s ease-in-out;&:disabled{background-color:var(--btnDisabledBgColor)}
&:focus{outline:0}
}
p.fetchBillFailureReson{color:var(--errorColor);margin:0;font-size:14px;line-height:16px;font-family:'ViRegular'}
}
.bharatConnectSection{background-color:var(--paleBlueBg);border-radius:16px;border:1px solid var(--borderColor);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:24px;gap:16px;.bharatConnectLogo{width:66px}
.txt{font-size:14px;line-height:16px;color:var(--mutedTextColor);font-family:"ViRegular";margin:0}
}
}
}
}
@media(max-width:768px){section.billDetails{padding:0;.mainHeading{display:none}
.billDetailsBox{grid-template-columns:auto;grid-gap:16px;margin:0;padding:20px;.selectedBiller{padding:16px;.billerHeader{margin-bottom:20px;.billerIcon{min-width:52px;height:52px}
p.billerName{font-size:16px;line-height:18px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:calc(100vw - 182px)}
.editIcon{margin:0;width:max-content;height:20px;img.editIcon{margin:0;width:100%;height:100%}
}
}
.formSection{flex-wrap:wrap;gap:16px;padding-top:16px;margin:0;.inputWrapper{flex-basis:100%}
.sampleBill{flex-basis:100%;padding:12px;p.heading{font-size:14px}
p.subHeading{font-size:12px}
}
}
button.fetchBill{width:100%;font-size:14px;padding:12px 0;position:relative;width:100%;margin:20px auto 0}
p.fetchBillFailureReson{margin:8px 0 0 0;font-size:12px;line-height:14px;font-family:'ViRegular';word-break:break-word}
}
.bharatConnectSection{padding:15px;flex-direction:row;gap:8px;p{margin:0;font-size:12px;color:var(--mutedGreen)}
}
}
}
}
section{&.fetchBillSection{.fetchBillWrapper{margin:32px 0 0 0;display:grid;grid-template-columns:repeat(2,1fr);width:100%;gap:24px;.layout{padding:24px;border-radius:16px;box-shadow:0 .5px 2px 0 rgba(96,97,112,0.16),0 0 1px 0 rgba(40,41,61,0.08);border:solid 1px var(--borderColor);background-color:var(--whiteBgColor);ul{display:flex;margin:0;padding:0;list-style:none;flex-direction:column;gap:12px;li{display:flex;width:100%;align-items:flex-start;justify-content:space-between;font-size:16px;line-height:20px;font-family:"ViRegular";span{margin:0;padding:0;&.boldTxt{font-family:"ViBold";color:var(--primaryColor)}
}
.title{color:var(--mutedTextColor);overflow:hidden;max-width:385px;width:100%}
.value{color:var(--primaryColor);font-family:"ViMedium";text-align:right}
}
&.billState{margin:0 0 40px 0;position:relative;&::before{content:'';position:absolute;bottom:-20px;left:0;width:100%;height:1px;background-image:linear-gradient(90deg,#fff 25%,#d5d6d9 25%,#d5d6d9 50%,#fff 50%,#fff 75%,#d5d6d9 75%,#d5d6d9 100%);background-size:20.00px 20.00px}
}
&.paymentState{margin:0 0 20px 0}
&.additionalInformation{margin:0 0 40px 0;position:relative;&::before{content:'';position:absolute;bottom:-20px;left:0;width:100%;height:1px;background-image:linear-gradient(90deg,#fff 25%,#d5d6d9 25%,#d5d6d9 50%,#fff 50%,#fff 75%,#d5d6d9 75%,#d5d6d9 100%);background-size:20.00px 20.00px}
}
}
.paymentAmoutBox{width:100%;display:flex;flex-direction:column;gap:16px;margin:0 0 20px 0;p.titleAdvance{font-size:18px;line-height:22px;margin:0 0 4px 0;font-family:"ViMedium"}
.formControlDiv{width:100%;display:flex;align-items:flex-start;justify-content:flex-start;.formControl{width:100%;border:1px solid var(--btnDisabledBgColor);padding:14px 16px;font-size:16px;line-height:20px;font-family:'ViRegular';border-radius:8px;&:focus{outline:0}
}
&.hasError{flex-direction:column;gap:8px;.errorMsg{display:block}
}
.errorMsg{display:none;font-size:14px;line-height:18px;padding:0 0 0 16px;color:var(--errorColor);margin:0;span{margin:0}
}
}
ul.priceTitles{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:8px;padding:0;margin:0;li{padding:7px 12px;font-size:12px;line-height:16px;margin:0;border:1px solid var(--mutedPurple);background-color:var(--whiteBgColor);border-radius:50px;width:min-content;font-family:'ViRegular';color:var(--primaryColor);cursor:pointer;transition:all .1s ease-in-out;&.active{background-color:var(--primaryColor);border:1px solid var(--primaryColor);color:var(--whiteBgColor);font-family:'ViBold';padding:7px 28px 7px 12px;position:relative;&::before{content:'';position:absolute;top:0;right:8px;bottom:0;width:16px;height:16px;margin:auto;background-image:url('../../../../../content/dam/utility-payment/Utility-NonLoggedIn/UtilityList/status-icon-success.svg');background-repeat:no-repeat}
}
}
}
}
}
.billerAndBillDetails{align-self:flex-start;.billerHeader{display:flex;align-items:center;justify-content:flex-start;gap:12px;.billerIcon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background-color:var(--whiteBgColor);border:1px solid var(--borderColor);border-radius:8px;img.icon{width:100%;height:100%;max-width:32px;max-height:32px}
}
p.billerName{margin:0;font-size:18px;line-height:22px;font-family:'ViMedium';color:var(--primaryColor)}
}
.consumerDetails{margin:40px 0 0 0;position:relative;&::before{content:'';position:absolute;top:-20px;left:0;width:100%;height:1px;background-image:linear-gradient(90deg,#fff 25%,#d5d6d9 25%,#d5d6d9 50%,#fff 50%,#fff 75%,#d5d6d9 75%,#d5d6d9 100%);background-size:20.00px 20.00px}
}
}
.fetchbill{.proTips{display:flex;align-items:center;justify-content:flex-start;gap:4px;background-color:var(--lightBeige);border-radius:8px;padding:8px 10px;margin:0 0 20px 0;img.proTipsIcon{width:100%;height:100%;max-width:14px}
p{font-size:12px;line-height:14px;margin:0;color:var(--mutedGreen);font-family:"ViMedium"}
}
button.payCTA{width:100%;border-radius:50px;border:0;font-size:16px;line-height:20px;padding:15px 0;background-color:var(--btnBgColor);color:var(--whiteBgColor);font-family:'ViMedium';&:focus{outline:0}
&:disabled{background-color:var(--btnDisabledBgColor)}
}
.errorMsg:not(.d-none){font-size:14px;line-height:16px;margin:8px 0 0;color:var(--errorColor);font-family:"ViRegular"}
}
.advancepayment{margin-bottom:20px;.titleAdvance{font-size:18px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.2;letter-spacing:normal;text-align:left;color:var(--primaryColor)}
.amount input{width:100%;padding:13px 16px;border-radius:8px;border:solid 1px var(--btnDisabledBgColor);font-family:"ViRegular";font-size:16px;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.13;letter-spacing:normal;text-align:left;color:var(--primaryColor);margin-bottom:16px}
.defultAmount{display:flex;gap:8px;align-items:anchor-center;.amountCard{padding:8px 8px 8px 12px;border-radius:30px;border:solid 1px var(--primaryColor);p{margin:0;font-family:"ViMedium";font-size:12px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.33;letter-spacing:normal;text-align:center;color:var(--primaryColor)}
}
.active{background-color:var(--primaryColor);display:flex;gap:4px;p{font-family:"ViBold";font-size:12px;font-weight:bold;font-stretch:normal;font-style:normal;line-height:1.33;letter-spacing:normal;text-align:center;color:var(--whiteBgColor)}
}
}
}
}
@media screen and (max-width:768px){padding:0;.mainHeading{padding:0 20px;font-size:16px;line-height:20px;margin:20px 0 0 0;display:flex;align-items:center;justify-content:space-between;span.editIcon{font-size:14px;line-height:16px;img{width:14px;height:14px}
}
}
.fetchBillWrapper{grid-template-columns:auto;gap:16px;padding:20px;margin:0;.layout{padding:16px;.proTips{flex-direction:row;padding:6px 8px;p{font-size:10px}
}
button.payCTA{width:100%;padding:12px 0;font-size:14px;position:relative;width:100%;margin:20px auto 0}
.paymentAmoutBox{ul.priceTitles{flex-wrap:wrap}
}
ul{li{font-size:14px;line-height:16px;.title{max-width:180px}
}
}
}
.billerAndBillDetails{.billerHeader{flex-direction:row;align-items:center;gap:8px;margin:0 0 32px 0;.billerIcon{width:52px;height:52px;min-width:52px}
p.billerName{font-size:16px;line-height:18px}
}
.consumerDetails{margin-top:20px}
}
}
}
}
}
#paymentMethodClone.paymentAmoutBox{display:none}
.backArrow{.faqHeading{display:none}
}
[data-modal-show="faq_NLJ"]{overflow:hidden;@media screen and (max-width:768px){.backArrow{.heading{display:none}
.faqHeading{display:block;font-size:16px;line-height:20px;font-family:ViMedium;margin:0;color:var(--primaryColor)}
}
}
}
dialog#faq_NLJ[open]::backdrop{background-color:#000;opacity:.8}
dialog#faq_NLJ[open]{border:0;padding:0;margin:10svh auto auto;background-color:transparent;display:flex;flex-direction:column;width:100%;max-width:504px;gap:16px;&:focus{outline:0}
.closeIcon{width:40px;height:40px;background-color:#fff;border-radius:50px;padding:10px;display:flex;align-items:center;justify-content:center;margin:auto 0 auto auto;cursor:pointer}
.faq_NLJ_body{border-radius:24px;padding:32px 22px 0 32px;background-color:#fff;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:24px;p.heading{font-size:24px;line-height:30px;font-family:ViBold;margin:0;color:#2f3043;width:100%;text-align:left}
.faqItems{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;max-height:calc(100svh - 40svh);overflow-y:scroll;width:100%;padding:0 8px 32px 0;&::-webkit-scrollbar{width:8px;transform:translateX(20px)}
&::-webkit-scrollbar-track{background:#fff}
&::-webkit-scrollbar-thumb{background:#d5d6d9;border-radius:10px}
&::-webkit-scrollbar-thumb:hover{background:#8f8f8f}
&:focus{outline:0}
.faqItem{border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px 0;box-shadow:0 .5px 2px 0 rgba(96,97,112,0.16),0 0 1px 0 rgba(40,41,61,0.08);border:solid 1px #eaeaec;width:100%;&[data-open="true"]{.question{.heading{font-family:"ViBold"}
.arrow{transform:rotate(0)}
}
.answer{display:flex;.subHeading{font-size:16px;line-height:20px;color:#595969;font-family:"ViRegular";margin:0}
}
}
.question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;.arrow{transform:rotate(180deg);cursor:pointer}
.heading{font-size:16px;line-height:20px;font-family:'ViRegular';margin:0;color:#2f3043}
}
.answer{display:none}
}
}
}
}
@media screen and (max-width:768px){dialog#faq_NLJ[open]{margin:0;top:118px;background-color:#fafcfe;min-height:calc(100dvh - 58px);&::backdrop{opacity:0}
.closeIcon{display:none}
.faq_NLJ_body{border-radius:0;padding:20px 20px 90px 20px;.heading{display:none}
.faqItems{height:auto;max-height:unset;padding:0 0 20px 0;overflow:auto;background-color:#fff;.faqItem{&[data-open="true"]{.question{.heading{display:block;font-size:14px;line-height:16px}
}
.answer{.subHeading{font-size:14px;line-height:16px}
}
}
.question{gap:4px;.arrow{width:22px}
.heading{display:block;font-size:14px;line-height:16px;font-family:"ViRegular"}
}
}
}
}
}
}