/*For Payment Work*/
svg:not(:root),
svg { display: block; overflow: auto; }

/* Icons */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
    .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
    .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/*Helpers*/
.no-pad { padding: 0 !important; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-text-fill-color: #000 !important;
}
/*Scroll bars*/

::-webkit-scrollbar { width: 3px; height: 2px; }

::-webkit-scrollbar-button { width: 3px; height: 2px; }

::-webkit-scrollbar-thumb { background: var(--orange); border: 3px none rgba(0, 0, 0, 0.54); border-radius: 1px; }

    ::-webkit-scrollbar-thumb:hover { background: var(--orange); }

    ::-webkit-scrollbar-thumb:active { background: var(--orange); }

::-webkit-scrollbar-track { background: #fff; border: 2px none #fff; border-radius: 1px; }

    ::-webkit-scrollbar-track:hover { background: #fff; }

    ::-webkit-scrollbar-track:active { background: #fff; }

::-webkit-scrollbar-corner { background: transparent; }

.drag-target { z-index: 997 !important; }

.dark-1 { background-color: #000000; }

.dark-2 { background-color: #212121; }

.dark-3 { background-color: #303030; }

.dark-4 { background-color: #424242; }

.light-1 { background-color: #E0E0E0; }

.light-2 { background-color: #F5F5F5; }

.light-3 { background-color: #FAFAFA; }

.light-4 { background-color: #FFFFFF; }

.primary-500 { background-color: #cddc39; }

.primary-50 { background-color: #f9fbe7; }

.primary-100 { background-color: #f0f4c3; }

.primary-700 { background-color: #afb42b; }

.accent-50 { background-color: #e0f7fa; }

.accent-A100 { background-color: #84ffff; }

.accent-A200 { background-color: #18ffff; }

.accent-A400 { background-color: #00e5ff; }

.warn-500 { background-color: #ff5722; }

.warn-100 { background-color: #ffccbc; }

.warn-700 { background-color: #e64a19; }

/*.dropdown-content { overflow: visible !important; background-color: #e5e5e5 ; margin-top: -4px !important; }*/

.dropdown-content.sub-menu { margin-top: -0.3rem; }

.button-collapse { width: 64px; text-align: -webkit-center; }

a.button-collapse:hover { background: rgba(0, 0, 0, 0.13); border-radius: 50%; }


/* Stepper */
label.invalid { font-size: 13px; font-weight: 500; color: red !important; top: 50px !important; }

    label.invalid.active { -webkit-transform: translateY(0%) !important; transform: translateY(0%) !important; }
/*Validate.js FIX*/

ul.stepper { counter-reset: section; /*max-width: 800px;*/ }

    ul.stepper.horizontal { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 458px; }

.card-content ul.stepper.horizontal { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; overflow: hidden; }

    .card-content ul.stepper.horizontal:first-child { margin-top: -20px; }

ul.stepper.horizontal::before { content: ''; background-color: transparent; width: 100%; min-height: 84px; box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12); position: absolute; left: 0; }

ul.stepper .wait-feedback { left: 0; right: 0; top: 0; z-index: 2; position: absolute; width: 100%; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

ul.stepper:not(.horizontal) .step { position: relative; }

ul.stepper .step.feedbacking .step-content > *:not(.wait-feedback) { opacity: 0.1; }

ul.stepper.horizontal .step { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 84px; }

    ul.stepper.horizontal .step:last-child { width: auto; }

    ul.stepper.horizontal .step:not(:last-child)::after { content: ''; display: inline-block; width: 100%; height: 1px; background-color: rgba(0,0,0,0.1); }

ul.stepper:not(.horizontal) .step:not(:last-child) { margin-bottom: 10px; -webkit-transition: margin-bottom 0.4s; transition: margin-bottom 0.4s; }

    ul.stepper:not(.horizontal) .step:not(:last-child).active { margin-bottom: 5px; }

ul.stepper:not(.horizontal) .step::before { position: absolute; top: 12px; counter-increment: section; content: counter(section); height: 28px; width: 28px; color: white; background-color: rgb(193, 193, 193); border-radius: 50%; text-align: center; line-height: 28px; font-weight: 400; }

ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .step.done::before, ul.stepper.horizontal .step.active .step-title::before, ul.stepper.horizontal .step.done .step-title::before { background-color: var(--orange) !important; }

ul.stepper:not(.horizontal) .step.done::before, ul.stepper.horizontal .step.done .step-title::before { content: "\f26b"; font-size: 14px; font-weight: 200; font-family: 'Material-Design-Iconic-Font'; background-color: #8BC34A !important; }

ul.stepper:not(.horizontal) .step.wrong::before, ul.stepper.horizontal .step.wrong .step-title::before { content: "\f136"; font-size: 14px; font-weight: 200; font-family: 'Material-Design-Iconic-Font'; background-color: #de3030 !important; }

ul.stepper:not(.horizontal) .step-title { margin: 0 -20px; cursor: pointer; padding: 13px 44px 10px 60px; display: block; cursor: default; }

ul.stepper.horizontal .step-title { line-height: 84px; height: 84px; padding-left: 65px; padding-right: 25px; display: inline-block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -ms-flex-negative: 0; flex-shrink: 0; }

ul.stepper.horizontal .step .step-title::before { position: absolute; top: 28.5px; left: 19px; counter-increment: section; content: counter(section); height: 28px; width: 28px; color: white; background-color: rgba(0,0,0,0.3); border-radius: 50%; text-align: center; line-height: 28px; font-weight: 400; }


ul.stepper .step-title::after { content: attr(data-step-label); display: block; position: absolute; font-size: 0.8rem; color: #424242; font-weight: 400; }

ul.stepper.horizontal .step-title::after { top: 15px; }


ul.stepper .step.active .step-title { font-weight: 500; cursor: default; }

ul.stepper .step-content { position: relative; display: none; height: calc(100% - 132px); width: inherit; overflow: visible; margin-left: 41px; margin-right: 24px; }

ul.stepper.horizontal .step-content { position: absolute; height: calc(100% - 84px); top: 84px; left: 0; width: 100%; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 20px 20px 76px 20px; }

.card-content ul.stepper.horizontal .step-content { padding-left: 40px; padding-right: 40px; }

ul.stepper:not(.horizontal) > .step:not(:last-child)::after { content: ''; position: absolute; top: 40px; left: 13.5px; width: 1px; height: calc(100% - 38px); background-color: rgba(0,0,0,0.1); -webkit-transition: height 0.4s; transition: height 0.4s; }

ul.stepper:not(.horizontal) .step.done::after, ul.stepper.horizontal .step.done .last-child::after { background-color: #8bc34a; height: calc(100% - 0px); }

ul.stepper:not(.horizontal) > .step.active:not(:last-child)::after { height: calc(100% - 12px); background-color: var(--orange); }
ul.stepper:not(.horizontal) .step.wrong:not(:last-child)::after { height: calc(100% - 12px); background-color: #de3030; }
ul.stepper .step-actions { padding-top: 2px; -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: -webkit-box; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

ul.stepper:not(.horizontal) .step-actions .btn:not(:last-child), ul.stepper:not(.horizontal) .step-actions .btn-flat:not(:last-child), ul.stepper:not(.horizontal) .step-actions .btn-large:not(:last-child) { margin-right: 10px; margin-left:19px !important;   }

ul.stepper.horizontal .step-actions .btn:not(:last-child), ul.stepper.horizontal .step-actions .btn-flat:not(:last-child), ul.stepper.horizontal .step-actions .btn-large:not(:last-child) { margin-left: 5px; }

ul.stepper.horizontal .step-actions { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background-color: #fff; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

.card-content ul.stepper.horizontal .step-actions { padding-left: 40px; padding-right: 40px; }

ul.stepper .step-content .row { margin-bottom: 7px; }

/*.modal .modal-content { padding: 15px; background: linear-gradient(to right, #ffd844, #d49e24 100%); }*/

#modal1 .navbar-brand { position: relative; font-size: 22px; color: #FFF; height: 28px; }
#modal1 .navbar-default { position: relative; font-size: 22px; color: #FFF; height: 28px; }
#modal1 .navbar-header { position: relative; font-size: 22px; color: #FFF; height: 28px; }
#modal1 .navbar-brand { border-radius: 4px; float: left; top: -40px; width: 65px; z-index: 99; left: -20px; }
.brandlogo { bottom: 0; left: 0; padding: 10px; right: 0; top: 0; }
.brandlogo, .cancel-this { text-align: center; position: absolute; }
    .brandlogo img, .brandlogo::before { display: inline-block; vertical-align: middle; }
    .brandlogo img, .brandlogo::before { display: inline-block; vertical-align: middle; }
#modal1 img { border: 0; vertical-align: middle; margin-top: 3px; }

#modal1 { overflow-y: visible; width: 360px; max-height: 100%; float: left; margin-top: 10px; }
    #modal1 .brandlogo { padding: 0px; }
    #modal1 .card { box-shadow: none; width: 100%; margin-top: 0px; margin-bottom: 0px; padding: 0px 15px 0px 24px; padding-right: 0px; border: none; background: #fff0; }

        #modal1 .card .card-content { padding: 0px; border-radius: 0 0 0px 0px; margin-top: -0px; }

.model-email-content { padding: 0px; }

.lean-overlay { background: #44454685; }
/*header .brand-logo img { margin-top:-5px; }*/
.step-content a { color: var(--orange) !important; font-size: 14px; }
.Reccomended { color: green !important; top: 0px; font-size: 12px; position: absolute; display: block; margin: 0px; margin-left: 0px; width:100%; text-align:center; }
.clsStep2txtbox { width: 100% !important; outline: none !important; border: none !important; text-indent: 10px !important; height: 40px !important; border: 1px solid !important; border-color: #bdbdbd !important; color: #242424 !important; background-color: #fff !important; }
.overlay .QuickPayMain { min-height: 272px !important ; width:500px; border-radius:0px; }
.overlay .QuickPayMain { position: relative; margin: auto; top: 20%; min-height: 280px; background: var(--orange); padding: 10px; padding-top: 0px; padding-bottom: 20px; border-radius: 10px; }
.QuickPayMain p { line-height:16px; }
.overlay ul li a { margin-top: 14px; }
#AppQuickPayDiv select { height: 40px !important; color: #ffffff; }
::-webkit-input-placeholder { color: rgba(0,0,0,0.75) !important; }
:-moz-placeholder { color: rgba(0,0,0,0.75) !important; }
::-moz-placeholder { color: rgba(0,0,0,0.75) !important; }
:-ms-input-placeholder { color: rgba(0,0,0,0.75) !important ; }
.ButonBlue { background-color: #00c6f7 !important; font-weight: 300; color: #fff !important; border-radius: 5px !important; border: none; text-transform: uppercase !important; }
    .ButonBlue:hover { background-color: #00c6f7 !important; color: #fff !important;  }
    .btn-default:active:focus, .ButonBlue:focus {color: #fff !important;  }
    .ButonBlue i { font-size:14px; }
.IDStep { margin-top: 3%; }
.step-1 { margin-top: 3%;  }
.step-2 { margin-top: 3%;  }
/*For Select Payment Option*/

.PaymentMode { margin-bottom: 10px; cursor: pointer; -webkit-box-shadow: 0px 0px 3px 0px rgba(171,171,171,1); -moz-box-shadow: 0px 0px 3px 0px rgba(171,171,171,1); box-shadow: 0px 0px 3px 0px rgba(171,171,171,1); background: #eaeaea; position: relative; cursor: pointer; padding: 12px 0px 12px 0px !important; float: left; width: 118px !important; margin-right: 0px; margin-left: 12px !important; text-align: center; }
    .PaymentMode .selPayMode { float: left; width: 100%; line-height: 1; }
    .PaymentMode .svg { float: right; display: none; position: absolute; right: 0; top: 8px; }
        .PaymentMode .svg img { width: 38px; }
    .PaymentMode:nth-last-child(1) { border-bottom: 0px solid #d2d1d1; }
    .PaymentMode a:hover, a:focus { text-decoration: none; }
.svg-success { stroke-width: 2px; stroke: #8EC343; fill: none; }
    .svg-success path { stroke-dasharray: 17px, 17px; stroke-dashoffset: 0px; -webkit-animation: checkmark 0.15s ease-in-out 0.4s backwards; animation: checkmark 0.15s ease-in-out 0.4s backwards; }
    .svg-success circle { stroke-dasharray: 76px, 76px; stroke-dashoffset: 0px; transform: rotate(-90deg); transform-origin: 50% 50%; -webkit-animation: checkmark-circle 0.6s ease-in-out forwards; animation: checkmark-circle 0.6s ease-in-out forwards; }
.PaymntImmg { width: 31px; margin-top: 4px; margin-bottom: 3px; }
.SidebarIcon { padding: 2px 0px 0px 14px; color: #fff; display: none}
    .SidebarIcon:focus, .SidebarIcon:hover { color: #fff; }
.NavigationImage { width: 75% !important; height: 166px !important; margin-left: 25px !important; }
.NavigationImageBG { width: 74%; height: 166px; margin-left: 25px;}
.tooltip { position: relative !important; display: inline-block !important; opacity: 1 !important; }
    .tooltip .tooltiptext { visibility: hidden; bottom: 125%; left: 0%; margin-left: -73px; width: 158px; background-color: #3e3e3e; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; }
    .tooltip:hover .tooltiptext { visibility: visible; }




.leftDueamountPostmain { background: #f2f2f2; position: absolute; width: 100%; text-align: center; padding: 6px 0px 0px 0px; margin-left: -30px; margin-top: -30px; border-radius: 10px 0px 0px 0px; }
    .leftDueamountPostmain .post_heading { font-size: 15px; text-align: center; color: #000; line-height: 0px; padding-bottom: 13px; padding-top: 13px; font-weight: 400; }
.bill_detals { display: flex; justify-content: space-between; line-height: 20px; padding: 0px 14px; color: #000; font-size: 12px; }
.bill_amount { text-align: center; margin: 0px; padding-top: 10px; font-size: 20px; color: red; }
.post_arrow_icon { text-align: right; line-height: 9px; font-size: 13px; color: #fb8309; cursor: pointer; padding: 0px 14px 5px 0px; }
.unbilled_amonut { width:100%; color: #000; padding: 0px 14px; background: #fff }
    .unbilled_amonut h3 { text-align: center; margin: 0px; font-size: 14px; font-weight: 400; padding-top: 5px; padding-bottom: 4px; }
.unbilled_amonut_dt { color: #000; display: flex; justify-content: space-between; line-height: 17px; font-size: 12px; }
.next_bill_date { padding: 10px 0px; width: 100%; }
.marginsub { margin-top: 127px !important; }
.nomargin { margin-top: 167px !important; }
.nomarginmob { margin-top: 210px !important; }
/*.overflowy { overflow-y: inherit; }*/
.overflow_hide { overflow-y:hidden; }
.info_post_icon { width: 13px; margin-top: -3px; }
/*Css By Devendra*/

 .AdvanceInfo:hover + .AdvanceInfoDt { display:block }
    .AdvanceInfoDt { display: none; width: auto; text-align: center; z-index: 5; border-radius: 5px; position: absolute; background-color: #efefef; color: #373737; -webkit-box-shadow: 1px 0px 5px 0px rgba(76,175,80,1); -moz-box-shadow: 1px 0px 5px 0px rgba(76,175,80,1); box-shadow: 1px 0px 5px 0px rgba(76,175,80,1); top: 25px; right: -10px; font-size: 12px; line-height: 19px; padding: 4px 4px 1px 4px; }
    .AdvanceInfoDt:after { content: ""; position: absolute; right: 10px; bottom: 100%; margin-left: -21px; border-width: 7px; border-style: solid; border-color: transparent transparent #4caf50 transparent; }





@keyframes checkmark {
    0% { stroke-dashoffset: 17px; }
    100% { stroke-dashoffset: 0; }
}

@keyframes checkmark-circle {
    0% { stroke-dashoffset: 76px; }
    100% { stroke-dashoffset: 0px; }
}


.QuickPayMain .input-field label.active { font-size: 14px !important; margin-bottom: 0; -webkit-transform: translateY(-120%); -moz-transform: translateY(-120%); -ms-transform: translateY(-120%); -o-transform: translateY(-120%); transform: translateY(-120%); }
.QuickPayMain .input-field .prefix ~ label { margin-left: 2rem; }
.overlay .innerDiv { margin: 10px 18px;}
.input-field .prefix ~ input, .input-field .prefix ~ textarea { color:#242424;}
#AppQuickPayDiv select { background: transparent; box-shadow: none; border-bottom: 1px solid #ffffff !important; color: #fff; text-indent:-1.5px; }

.PayLeft { float: left; padding: 5px 5px 5px 5px; }
    .PayLeft::after { content: "    :"; }
.PayRight { float: right; padding: 5px 0px 5px 0px; }

.hide { display: none; }

.overflow { overflow: hidden !important; }

/*Css By Devendra*/
.PaymentSubsDetails { margin: 0 auto; background: #fff; width: 830px; margin-top: 4%; border-radius: 10px; }
.DetailsMain { float: left; background: #fbfbfb; width: 100%; position: relative; border-radius: 10px; overflow-y: scroll; height: 509px; }
.LeftDtails { background: #ecb733 !important; max-height: 509px; min-height: 300px; position: fixed; -webkit-box-shadow: 3px 0px 7px -5px rgba(0,0,0,0.75); border-right: 1px solid #bfb9b9; -moz-box-shadow: 3px 0px 7px -5px rgba(0,0,0,0.75); box-shadow: 3px 0px 7px -5px rgba(0,0,0,0.75); width: 255px; height: 100%; border-radius: 10px 0px 0px 10px; float: left; }
.DefaultPage .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; width: 100%; position: relative; }
.LeftDtails ul { padding: 30px 30px 0px 30px !important; }
    .LeftDtails ul li { color: #fff; border-bottom: 1px solid #ffffff40; line-height: 2; }
    .LeftDtails ul li:last-child { border-bottom: none; }
        .LeftDtails ul li h4 { color: #fff; padding-bottom: 7px; font-weight: 300; font-size: 16px; margin-top: 7px; }
.leftDueamountmain h4 { color: #de3030 !important; font-weight: 600 !important; }
.LeftDtails ul li h5 { color: #4f4f4f; padding-bottom: 7px; font-size: 17px; }
.RightDetails { float: left; width: 571px; margin-left: 31%;}
.DueDateTop { border-bottom: 1px solid #e4e4e4; width: 100%; float: left; }
    .DueDateTop p { text-align: left; padding: 10px 16px 9px 16px; color: #005a95; font-size: 15px; font-weight: 300; float: left; margin: 0px; }
.DefaultPage .overlay-close { right: 35px; font-size: 18px; color: #FFF; width: 100%; text-align: right; float: right; }
.DueDateTop a { color: #000 !important; padding-right: 15px !important; width: auto !important; padding: 10px 0px 0px 0px; }
.PaymentSteps { width: 100% !important; }
#modal1 { overflow-y: visible; width: 360px; max-height: 100%; float: left; margin-top: 12px; }
.selPayMode { margin-top: 0px !important; }
.QuickPayBack { margin: 0px; width: auto !important; top: -26px; color: #242424 !important; position: absolute; left: 7px; font-size: 18px !important; margin-top: 0px !important; }
    .QuickPayBack i { font-size:20px;  }
.PaymentFormdetails { float: left; width: 40%; }

.SmalClosebtn { display: none; }
.MobileviewMain { width: 456px; margin-bottom: 10px; }
.RedioBtnMob { display: inline-block; width: auto; }
.Mobileview-label { position: relative; }
.Mobileview + .Mobileview-label:before {  width: 20px !important; height: 20px !important; top: 0px !important;}
.Mobileview:checked + .Mobileview-label:before { content: "\f26b"; width: 20px; height: 20px; vertical-align: middle; text-align: center; font-family: 'Material-Design-Iconic-Font'; font-size: 12px; color: #ffffff; padding: 0px; border: 2px solid #8BC34A; background: #8BC34A; font-weight: 900; }
.Mobileview, .Mobileview-label, .Mobileview, .Mobileview-label { display: inline-block;  vertical-align: middle; cursor: pointer; text-align: left; line-height: 18px !important; }
.Mobileview { opacity: 0; position: absolute; }

#RegisterPayTv { padding: 0px 14px; color: rgb(55, 55, 55); margin: 0px; font-size: 13px; }
    #RegisterPayTv p { line-height: 1; display: inline-block; margin: 0px; float: left; margin-top: 13px; color: #373737; font-size: 13px; }
.leftDueamountmain { background: #fbfbfb; position: absolute; width: 100%; text-align: center; padding: 6px 14px 0px 14px; margin-left: -30px; margin-top: -30px; border-radius: 10px 0px 0px 0px;}
    .leftDueamountmain h4 { color: #de3030 !important; font-weight: 400 !important; }

.RightDetails input[type=text], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], textarea.materialize-textarea { background-color: transparent; border: none; border-bottom: 1px solid #9e9e9e; border-radius: 0; outline: none; height: 30px; width: 100%; font-size: 14px; margin: 0 0 0px 0; padding: 0; box-shadow: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; transition: all .3s; padding-left: 7px; color: #000; }
    .RightDetails  input[type=text]:focus:not([readonly]) { border-bottom: 1px solid var(--orange) !important; box-shadow: 0 1px 0 0 var(--orange) !important; }

.RightDetails select.browser-default { display: block; border-bottom: 1px solid #5a5a5a; box-shadow: none !important; }
.error { color: red; font-size: 11px !important; }
.RightDetails .input-field { position: relative; margin-left: 25px; margin-top: 0px;}
.PaymentError { color: red; font-size: 14px; }
.QuickPayBack { margin: 0px; width: auto !important; top: 16px; color: #242424 !important; position: absolute; left: 7px; font-size: 18px !important; margin-top: 0px !important; }
    .QuickPayBack i { font-size:20px;  }
    .GeogDetError { visibility:hidden; margin: 4px 0px 4px 4px; color: #9b0000; font-size: 14px !important;}
.RightDetails select { border: none !important; height: 45px !important; width: 100% !important; padding: 0px !important; outline: none !important; margin-bottom: 25px !important; text-indent: 5px !important; color: #7b7878 !important; border-bottom: 1px solid #9e9e9e !important; box-shadow: none !important; }
.yelow { background-color: var(--orange) !important; color: #fff; }
.QickPayLink { padding: 10px; font-size: 15px; color: #000; text-align: center; margin-top: 28px; color: #0099fd; cursor: pointer; color: #fff; background: linear-gradient(360deg,#ffcc5a,#ffb612) !important; padding: 4px 0px; border-radius: 6px; font-weight: 500; font-size: 17px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 2px 4px 0px rgba(76, 76, 76, 0.75); }
    .QickPayLink a { text-decoration: none; color: #fff; }
    .QickPayLink img { width: 34px; }
    .QickPayLink p { font-size: 12px; margin: 0px; }

    .QickPayLink a:hover { text-decoration: none; }
.ContinueBtn { position: absolute; bottom: 13px; margin-top:7px; text-align: right; padding: 0px 20px; width: 100%; color: #fff; display: none; }
#coformation { font-size: 12px; float: left; position: relative; bottom: 0px; background-color: #d4d4d4; padding: 8px; text-align: justify; display: none; line-height: 17px; color: #000; }
.input_wrapper { width: auto; height: auto; position: relative; cursor: pointer; }
    .input_wrapper input[type="checkbox"]:checked { background: #8bc34a; }
        .input_wrapper input[type="checkbox"]:checked:after { left: calc(100% - 25px); }
    .input_wrapper input[type="checkbox"] { width: 49px; height: 24px; margin-top: 6px;cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ccc; border-radius: 34px; position: relative; outline: 0; -webkit-transition: all .2s; transition: all .2s; -webkit-box-shadow: 0px 0px 3px 0px rgba(153,153,153,1); -moz-box-shadow: 0px 0px 3px 0px rgba(153,153,153,1); box-shadow: 0px 0px 5px 0px rgb(146, 144, 144); }
        .input_wrapper input[type="checkbox"]:after { position: absolute; content: ""; top: 4px; left: 5px; width: 17px; height: 17px; background: #fff; z-index: 2; border-radius: 57%; -webkit-transition: all .35s; transition: all .35s; }
        .input_wrapper input[type="checkbox"]:checked + .is_checked { -webkit-transform: translateX(0) translateY(-30%) scale(1); transform: translateX(0) translateY(-30%) scale(1); }
    .input_wrapper .is_checked { width: 13px; left: 10%; -webkit-transform: translateX(190%) translateY(-30%) scale(0); transform: translateX(190%) translateY(-30%) scale(0); top: 15px; }
    .input_wrapper input[type="checkbox"]:checked ~ .is_unchecked { -webkit-transform: translateX(-190%) translateY(-30%) scale(0); transform: translateX(-190%) translateY(-30%) scale(0); }
    .input_wrapper .is_unchecked { width: 10px; right: 19%; top: 45%; -webkit-transform: translateX(0) translateY(-30%) scale(1); transform: translateX(0) translateY(-30%) scale(1); top: 15px; }
    .input_wrapper svg { position: absolute; top: 44%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; fill: #fff; -webkit-transition: all .35s; transition: all .35s; z-index: 1; }
    .card { overflow: hidden; }
.PayButton {color: #fff !important;}
.PayModeImg { margin-top: 0px !important; width: 100px; }
.PayMain { width: 91% !important;}
/*Amount Info CSS Start*/
.AmountInfo  { width:15px; float:right; margin-top: 7px !important; margin-top: 11px !important; margin-left: 5px; }
.AmountInfoPopup { position: absolute; display: none; width: 200px; right: -10px; top: -48px !important;; background: #69cd92; color: #242424; padding: 2px 10px; border-radius: 6px; font-size: 13px; }
.AmountInfotxt { padding: 2px 0px; line-height: 20px !important; }
.AmountInfo:hover + .AmountInfoPopup { display: block; color: #242424; }
.AmountInfoPopup::after { content: ""; position: absolute; top: 100%; right: 6%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #69cd92 transparent transparent transparent; }
.NoPendingBills { margin: 58px 0px 44px 0px; width: 100%; text-align: center; display: none; }
.NoPendingBills img { margin:0 auto;}
/*.btn:hover, .btn-large:hover { background-color: #fff !important; }*/
/*.PayButton:hover { background:rgb(252, 128, 2) !important }*/
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: inherit }
#txtPaymentAmount { width: 85% !important;}
/*.cover-spin { position: fixed; width: 100%; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255,255,255,0.7); z-index: 9999; display: none; }

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cover-spin::after { content: ''; display: block; position: absolute; left: 48%; top: 40%; width: 40px; height: 40px; border-style: solid; border-color: #ecb733; border-top-color: transparent; border-width: 4px; border-radius: 50%; -webkit-animation: spin .8s linear infinite; animation: spin .8s linear infinite; }

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes checkmark {
    0% { stroke-dashoffset: 17px; }
    100% { stroke-dashoffset: 0; }
}

@keyframes checkmark-circle {
    0% { stroke-dashoffset: 76px; }
    100% { stroke-dashoffset: 0px; }
}*/

/*Css By Devendra*/

.clear { clear: both; }

.clsContinue { font-size: 14px; visibility: visible; width: 126px; }
.clsBack { font-size: 16px; float: left !important; width: 50%; }

.step-1 { display: none; }
.step-2 { display: none; }

.IDStep .btn-default { color: #6d6a6a; background-color: #fff; border-color: #ccc; border-radius: 5px; margin-top: 11px; }


/*box-shadow: 0px 1px 4px 1px rgb(175, 175, 175);*/
.clsStep2OR { text-align: center; color: #FFF; margin-top: 0px; margin-bottom: 10px; }

.innerDiv { width: 90%; margin: auto; }

.step-2 .innerDiv { margin-top: 8px; margin-bottom: 6px; }

.float-left { float: left; }

.Step2Error { color: #9b0000; font-weight: 300; visibility: hidden; font-size: 14px; }
.Step2Error1 { color: #9b0000; font-weight: 300; visibility: hidden;  font-size: 14px;text-align:left; margin-left:3em !important }
.Step2Error2 { color: #9b0000; font-weight: 300; visibility: hidden;  font-size: 14px;text-align:left;height: 16px; margin-left:3em !important}
.Step2Error3 { color: #9b0000; font-weight: 300; visibility: hidden;  font-size: 14px;text-align:left;height: 16px; margin-left:3em !important}
.Step2Error4 { color: #9b0000; font-weight: 300; visibility: hidden;  font-size: 14px;text-align:left; margin-left:3em !important }



/*For Quick Pay Loading*/
.sk-fading-circle { width: 18px; height: 30px; position: relative; display: none; }

	.sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

		.sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #FFF; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
	.sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }
	.sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); }
	.sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
	.sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); }
	.sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); }
	.sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
	.sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); }
	.sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); }
	.sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }
	.sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); }
	.sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); }
	.sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
	.sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; }
	.sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
	.sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
	.sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
	.sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
	.sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
	.sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
	.sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
	.sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
	.sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }
    /*Expiring Details Popup Start*/
#ExpiringDetails { top: 15%; }
.ExepirProductdetails p { margin-bottom: 0px; }
.ExepirProtags2 { float: right; margin: 4px 0px 0px 0px; }
.ExepirProtags2 p { margin-bottom: 0px; }
.ExepirProlist-unstyled { margin-bottom: 3px; }
.ExepirProHeadtxt:hover { color: #fff; }
/*Expiring Details Popup End*/
@-webkit-keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; }
}
/*Quick Pay Payment Screen*/
@media only screen and (min-width: 1025px) and (max-width: 1500px) {
    .QuickPayMain { width: 42%; }
    /*.PaymentSubsDetails { width: 60%; }*/
    .ErrorMsgBox { width: 32%; }
    .ErrorMsgicon { width: 32%; }
    /*.LeftDtails { width: 34%; }*/
    .RightDetails { float: left; width: 571px; }
    /*.PaymentSubsDetails { width: 64%; }*/
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    .ErrorMsgBox { width: 38%; }
    .ErrorMsgicon { width: 38%; }
    .LeftDtails { width: 34%; }
    .RightDetails { float: left; width: 66%; }
    /*.PaymentSubsDetails { width: 68%; }*/
}

@media only screen and (min-width: 751px) and (max-width: 1024px) {
    .QuickPayMain { width: 54%; }
    .ErrorMsgBox { width: 45%; }
    .ErrorMsgicon { width: 45%; }
    #modal1 { width: 97% !important; }
    .LeftDtails { width: 34%; }
    .RightDetails { float: left; width: 66%; }
    .SidebarIcon { display:block}
}

@media only screen and (min-width: 751px) and (max-width: 830px) {
    .PaymentSubsDetails { width: 100%; }
}
@media only screen and (min-width: 200px) and (max-width: 720px) {
    .smallexpirynew{display:none;}
}
@media only screen and (min-width: 690px) and (max-width: 750px) {
    .QuickPayMain { width: 76%; }
    .ErrorMsgBox { width: 57%; }
    .ErrorMsgicon { width: 57%; }
    .LeftDtails { width: 34%; }
    .RightDetails { float: left; width: 66%; }
    .PaymentSubsDetails { width: 100%; }
}

@media only screen and (min-width: 450px) and (max-width: 768px) {
    .QuickPayMain { width: 76%; }
    .ErrorMsgBox { width: 80%; }
    .ErrorMsgicon { width: 80%; }
    .RightDetails { display: none; }
    .LeftDtails { width: 100%; }
    .PaymentSubsDetails { width: 100%; }
    .ExtraLi { display: none; }
    .ContinueBtn { display: block; }
    .RightDetails { width: 100%; }
    .PayModeImg { width: 74%; margin-top: -4px !important;}
    .NoPendingBills img { width: 70%; }
    .ExpiriConnecDt { margin-top: 65px; }
}

@media only screen and (min-width: 200px) and (max-width: 768px) {
    .SmalClosebtn { display: block; }
    .FullCloseBtn { display: none; }
    #coformation { position: relative; }
    .PayMain { width: 80% !important;}
    .SidebarIcon { display:block}
    .MobileviewMain { width:auto;
                  margin-bottom: 10px; }
}

@media only screen and (min-width: 200px) and (max-width: 450px) {
    .QuickPayMain { width: 97%; }
    .ErrorMsgBox { width: 97%; }
    .ErrorMsgicon { width: 97%; }
    .RightDetails { display: none; }
    .LeftDtails { width: 95%; }
    .PaymentSubsDetails { width: 95%; }
    .ExtraLi { display: none; }
    .ContinueBtn { display: block; }
    .RightDetails { width: 100%; margin-left: 0px; }
    .DueDateTop p { font-size: 13px; }
    #PayTVPayment { width: 100% !important; }
    .overlay .QuickPayMain { width:95%;}
    .PayModeImg { width: 74%; margin-top: 0px !important;}
    .ExpiriConnecDt { margin-top: 65px; }
    .overlay .innerDiv { margin: 10px 8px; }
}
@media only screen and (min-width: 200px) and (max-width: 410px) {
    .QuickPayBack { left: 0px; }
}
@media only screen and (min-width: 200px) and (max-width: 380px) {
    .PaymentMode { width: 105px !important; margin-bottom: 6px; }
    .stepper { width: 100% !important; }
    #coformation { bottom: -11px; }
    .PayModeImg { margin-top: 4px !important; width: 80px; }
    .RedioBtnMob { width: 51%; margin-bottom: 7px; }
    .PayMain { width: 86% !important;}
    ul.stepper:not(.horizontal) .step-actions .btn:not(:last-child), ul.stepper:not(.horizontal) .step-actions .btn-flat:not(:last-child), ul.stepper:not(.horizontal) .step-actions .btn-large:not(:last-child) { margin-left:6px !important;   }
    .ExepirCloseBtn { position: absolute; right: 0; }
    .ExepirCloseBtn a { padding-right: 3px; padding-left: 0px;}
}

@media only screen and (min-width: 200px) and (max-width: 315px) {
    ul.stepper .step-content { margin-left: 25px; margin-right: 7px !important;  }
}
@media screen and (max-width: 690px) {
    #modal1 { width: 99% !important; top: 0% !important; }
        #modal1 .card { padding: 11px 15px 15px 11px; width: 100%; }
    .RightDetails .input-field { margin-left: 20px; }
    .PaymentFormdetails { width: 43%; }
    .stepper { width: 91% !important; }
}

@media screen and (max-width: 480px) {

    .navbar-brand { display: none; }
    #modal1 .card { /*max-height: 385px;*/ overflow-y: auto; }
    ul.stepper .step-content { margin-left: 33px; margin-right: 7px !important; }
    .PaymentFormdetails { width: 41%; }
}
@media screen and (max-width: 320px) {
    ul.stepper .step-content { margin-left: 33px; margin-right: 7px !important; }
}
/*@media screen and (max-width: 1024px) and (min-width: 480px) {
    #modal1 { width: 360px !important; }
}*/