/* --------- conditional popup --------- */
.conditionPopup {
    position: fixed;
    top: 20px;
    background-color: #fff;
    max-width: 775px;
    right: 0px;
    border-radius: 28px;
    margin: 0 10px;
}

.conditionPopup-inner {
    border: 2px solid #001926;
    margin: 0;
    border-radius: 28px;
    position: relative;
}

.conditionPopup-text p {
    margin: 10px 0 0;
    padding: 38px 15px;
    font-size: 18px;
    color: #000;
    font-weight: 400;
}

.conditionPopup-crossIcon {
    position: absolute;
    right: 25px;
    top: 10px;
    cursor: pointer;
}

.conditionPopup-crossIcon img {
    width: 30px;
    height: 30px;
    object-fit: cover;
}
@media(max-width:1024px){
/*     .conditionPopup-inner {
        margin: 20px 20px;
    }
    .conditionPopup-text p {
        padding: 38px 20px;
        font-size: 24px;
    } */
}
@media(max-width:767px){
/*     .conditionPopup-inner {
        margin: 20px 20px;
    }
    .conditionPopup-text p {
        padding: 35px 15px;
        font-size: 18px;
    } */
}
/* --------- conditional popup --------- */
div#progressBarssLogo img {
    max-width: 400px;
    width: 100%;
}

div#progressBarssLogo {
    margin-bottom: 50px;
}

#progressBarss{
    max-width: 520px;
    width: 100%;  
    padding: 30px 15px 20px;
}
.progressBarss .progMessagess {
    font-weight: 700;
    color: #fff;
    font-size: 22px;
    max-width: 380px;
    margin: 0 auto;
    padding: 70px 0 50px;
}
.progressBarss .progressTextss {
    font-size: 18px;
    font-weight: 600;
    padding: 5px 0 0;
    color: #fff;
}
.dnrsss {
    font-size: 14px;
    line-height: normal;
    padding: 20px 0 0;
    font-weight: 600;
    color: #fff;
}
.progressBarss .bottomTextss {
    font-size: 12px;
    line-height: normal;
    padding: 15px 0;
    font-weight: 600;
    color: #fff;
}
.LoadingWrapperss {
    background-color: rgb(255 134 29 / 67%);
    border-radius: 0 15px 15px 0;
}



.progMessageAlert p a {
    font-size: 18px;
    font-weight: 400;
    text-decoration: underline;
}
#progressBarAlert{
    max-width: 520px;
    width: 100%;  
    padding: 30px 15px 20px;
}

.progMessageAlert h4 {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
}

.progMessageAlert p {
    font-size: 18px;
    font-weight: 400;
}

.progressBarAlert .progMessageAlert {
    font-weight: 700;
    color: #000;
    font-size: 22px;
    max-width: 385px;
    margin: 0 auto;
    padding: 70px 0 35px;
}
.progressBarAlert .progressTextAlert {
    font-size: 18px;
    font-weight: 600;
    padding: 5px 0 0;
    color: #000;
}

.progressBarAlert .bottomTextAlert {
    font-size: 12px;
    line-height: normal;
    padding: 15px 0;
    font-weight: 600;
    color: #000;
}

.dnrsAlert {
    font-size: 14px;
    line-height: normal;
    padding: 5px 0 0;
    font-weight: 600;
    color: #000;
}

.dnrsAlert strong {
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
}

.dnrsAlert strong button {
    font-size: 16px;
    background: #f38020;
    border: 1px solid #f38020;
}

button#CloseManualUsage {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 10px;
}

div#goToUpdatePaymentTab, div#paymentDetails, div#makePaymentMethods  {
    margin-left: 37px;
}
div#paymentDetails ul {
    padding-left: 15px;
    /*     padding: 0;
    list-style: none; */
    margin-bottom: 20px;
}
div#paymentDetails ul li, div#paymentDetails ul li span {
    font-weight: 400;
    font-size: 16px;
}
button#opt1Submit {
    align-items: center;
    background-color: #f38020;
    color: #fff;
    display: inline-block;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 8px;
    margin-top: 0px;
    transition: all .3s ease-in;
    margin-bottom: 20px;
}

button#opt1Submit:hover, button#opt1Submit:active {
    background-color: #006ac6;
    color: #fff;
}
div#mp-jnpiays-credit {
    margin-bottom: 20px;
}

div#andtext {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: #425b76;
    max-width: 410px;
    margin-bottom: 15px;
}
div#andtext h4 {
    font-size: 18px;
    margin: 0;
    margin-top: 14px;
}

div#finalCheck-error, div#finalCheck-errorUp {
    font-size: 16px;
    font-weight: 400;
}
input#ACHDepositAmount1, input#ACHDepositAmount1Up {
    max-width: 410px;
    margin-bottom: 4px;
}

input#ACHDepositAmount2, input#ACHDepositAmount2Up {
    max-width: 410px;
    margin-bottom: 4px;
}

div#ACHDepositAmount1-error-message, div#ACHDepositAmount1-error-messageUp {
    font-size: 14px;
    color: red;
    margin-bottom: 10px;
}

div#ACHDepositAmount2-error-message, div#ACHDepositAmount2-error-messageUp {
    font-size: 14px;
    color: red;
    margin-bottom: 10px;
}

button#ACHDepositButton, button#ACHDepositButtonUp {
    max-width: 410px;
    align-items: center;
    background-color: #f38020;
    color: #fff;
    display: inline-block;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 8px;
    margin-top: 0;
    transition: all .3s ease-in;
}
button#ACHDepositButton:hover, button#ACHDepositButton:active, button#ACHDepositButtonUp:hover, button#ACHDepositButtonUp:active {
    background-color: #006ac6;
    color: #fff;
}

.hidden {
    display: none !important;
}


div#stripeBankCreditMain, div#stripeBankCreditMainUp {
    max-width: 600px;
}
.stripePaymentMessage > p {
    font-size: 18px;
    margin-bottom: 15px;
}
/* -------- stripe css --------- */
.stripe-container {
    margin-bottom: 40px;
}
div#payment-element, div#payment-elementUp {
    margin-bottom: 20px;
}
div#error-message.error-message, div#error-messageUp.error-message {
    margin-top: 5px;
}
.stripePaymentMessage p {
    color: #494a52;
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 15px;
}
button.stripePaymentButton {
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: Poppins;
    font-size: 22px;
    font-weight: 700;
    height: 50px;
    letter-spacing: 0;
    line-height: 26px;
    /*     margin-bottom: 25px; */
    max-width: 620px;
    padding: 0;
    text-align: center;
    width: 100%;
    background-color: #00314B;
    color: #fff;
    /*     margin-top: 40px; */
}
/* ------------ stripe css ------------- */
/* ---------- enrollment tab items ------------- */
.listContent ul:not(last-child) {
    border-bottom: 1px solid #E2E8F0;
}
.enrolledAccounts-list {
    border: 1px solid #E2E8F0;
    border-radius: 0 0 12px 12px;
}
.allreadySubmitDetail, .mp-allreadySubmitDetail, .mp-amountDetail {
    margin-bottom: 35px !important;
}
.mp-amountDetail {
    background-color: #F0F8FF;
    margin-top: -10px !important;
    border-radius: 0 0 14px 14px;
}
.allreadySubmitDetail .itemDetailList, .mp-allreadySubmitDetail .itemDetailList, .mp-amountDetail .itemDetailListt {
    margin-top: 0 !important;
    border: none !important;
}

.mp-amountDetail .itemDetailListt .row .valueCol {
    max-width: 152.67px;
    width: 100%;
    text-align: right;
}
.valueCol.finalAmount {
    max-width: 110.67px !important;
}
/* utility login info */
.featureNotAvailable h2{
    color: #1b1b1b;
    font-size: 28px;
    text-align: center;
    font-weight: 600;
    margin-top: 100px;
}
div#have-online-details > div > h2 {
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

ul.accountNumbersUl li span {
    padding: 10px;
}

ul.accountNumbersUl {
    display: flex;
    gap: 20px;
    padding: 0;
    list-style-type: none;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

ul.accountNumbersUl li {
    cursor: pointer;
}

ul.accountNumbersUl li span {
    background-color: #fff;
}
ul.accountNumbersUl li {
    min-height: 53px;
}
div.meterWrapper h4 {
    margin-bottom: 20px;
    margin-top: 20px;
}

ul#meterList {
    list-style-type: none;
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    padding: 0px;
}

ul#meterList li {
    border: 1px solid black;
    padding: 5px 10px;
    background: #fff;
    cursor: pointer;
}

div#accounterror {
    font-size: 20px;
}
/* utility login info */

/* ---------- View Popup ------------- */
.accountDetailsView-outer{
    padding: 15px 0;
}
.accountDetailsView-main.mCustomScrollbar {
    overflow: hidden;
    height: 892px;
}

.accountDetailsView-main{
    position: fixed;
    background: #fff;
    padding: 20px 0 40px;
    max-width: 74%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.accCrosssBtn img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.accCrosssBtn {
    text-align: right;
    position: absolute;
    right: 20px;
    top: 10px;
}
.accountDetailsView-inner {
    max-width: 70%;
    background-color: #fcf0e7;
    margin: 0 auto !important;
}

.accountDetailsView-header ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.accountDetailsView-content ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 8px 0;
    margin: 0;
    border-bottom: 1.5920000076293945px solid #c8ced4;
}

.accountDetailsView-header {
    background-color: #f0801f;
    padding: 15px 15px;
}

.accountDetailsView-content {
    padding: 10px 25px 15px;
}

.accountDetailsView-header ul li {
    color: #ffffff;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0px;
}

.accountDetailsView-content ul li.accountDetailsViewTitle {
    font-size: 18px;
    letter-spacing: 0px;
    color: #000000;
    font-weight: 600;
}

.accountDetailsView-content ul li {
    font-size: 18px;
    font-weight: 400;
    color: #000;
}
.accountDetailsView-bottom-text p {
    font-size: 22px;
    color: #000000;
    font-weight: 500;
    text-align: center;
    max-width: 80%;
    margin: 0 auto;
}

.accountDetailsView-bottom-text {
    margin-top: 30px;
}

.accountDetailsView-bottom-text p a {
    font-size: 22px;
    font-weight: 500;
    color: #f18020;
}

.accountDetailsView-bottom-text p a:hover, .accountDetailsView-bottom-text p a:active {
    font-size: 22px;
    font-weight: 500;
    color: #f18020;
    text-decoration: underline;
    font-family: Poppins,sans-serif !important;
}

.accountDetailsView-content ul:last-child {
    border: none;
}





/* Overlay behind the popup */
.body-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 999; /* Behind the popup but above everything else */
    display: none;
}

/* When overlay is active */
.body-overlay.active {
    display: block;
}

/* Disable scroll on body */
body.no-scroll {
    overflow: hidden;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgb(240 128 31) !important;
}
.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #000 !important;
}
@media (max-width: 1440px){
    .accountDetailsView-main.mCustomScrollbar {
        height: 770px;
        overflow: hidden;
    }
    .accountDetailsView-content ul {
        padding: 6px 0;
    }
    .accountDetailsView-content {
        padding: 10px 25px 10px;
    }
    .accountDetailsView-bottom-text {
        margin-top: 20px;
    }
    .accountDetailsView-bottom-text p a, .accountDetailsView-bottom-text p a:hover {
        color: #f18020;
        font-size: 18px;
        font-weight: 500;
    }
    .accountDetailsView-bottom-text p {
        font-size: 18px;
    }
}
@media (max-width: 767px){
    .accountDetailsView-main.mCustomScrollbar {
        height: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        /*         padding: 0; */
    }
    .mCustomScrollBox{
        height: auto !important;
    }
    .accountDetailsView-main {
        max-width: 98%;
        padding: 20px 0 40px;
    }
    .accountDetailsView-inner {
        max-width: 90%;
        margin: 50px auto 0;
        margin-top: 45px !important;
    }
    .accCrosssBtn {
        right: 50%;
        top: 10px;
    }
    .accountDetailsView-content {
        padding: 10px 10px 15px;
    }
    .accountDetailsView-content ul li.accountDetailsViewTitle {
        font-size: 16px;
        max-width: 100%;
        text-wrap: wrap;
    }
    .accountDetailsView-content ul li {
        font-size: 16px;
        max-width: 100%;
        text-wrap: wrap;
    }
    .accountDetailsView-bottom-text p a, .accountDetailsView-bottom-text p a:hover {
        font-size: 16px;
    }
    .accountDetailsView-bottom-text p {
        font-size: 16px;
        max-width: 90%;
    }
    .accountDetailsView-header ul li {
        font-size: 16px;
    }
    .mCSB_inside > .mCSB_container {
        margin-right: 0px !important;
    }
    .accountDetailsView-main .page-center {
        padding: 0 10px;
    }
    .accountDetailsView-content ul {
        padding: 5px 0;
    }
    .accountDetailsView-header {
        padding: 10px;
    }
}
@media (max-width: 540px){
    .accountDetailsView-content ul li, .accountDetailsView-content ul li.accountDetailsViewTitle {
        font-size: 14px;
    }
}
/* ---------- View Popup ------------- */

.enrolledAccounts-header {
    text-align: center;
    /*     background-color: #f38020; */
    padding: 13px 0;
    background-color: #F0F8FF;                                                                                                                                                                                                                                                              
}
.enrolledAccounts-header h2 {                                                                                                                       
    font-size: 24px;
    color: #1B1B1B; 
    font-weight: 600;
    font-family: "Poppins";
    margin: 0;
}
.enrolledAccounts-main {
    margin-top: 50px;
    margin-bottom: 150px;
}

.listHeadings ul {
    display: flex;
    list-style-type: none;
    justify-content: space-between;
    padding: 10px 50px;
    border-bottom: 1px solid #E2E8F0;
}

.enrolledAccounts-list {
    padding: 0px 0px 0;
}

.enrolledAccounts-btn {
    padding: 0 50px 100px;
    text-align: right;
}

.listContent ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
    padding: 10px 50px;
}
.enrolledAccounts-btn a {
    border-radius: 10px;
    background-color: #f18020;
    padding: 10px 30px;
    letter-spacing: 0px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    font-family: Poppins,sans-serif;
    display: inline-block;
    margin-top: 20px;
}

.enrolledAccounts-btn a:hover, .enrolledAccounts-btn a:active {
    font-family: Poppins,sans-serif;
    font-weight: 500;
}
.listHeadings ul {
    margin-bottom: 0px;
}

.listHeadings ul li {
    color: #18355f;
    font-size: 14px;
    text-transform: uppercase;
    text-align: left;
    font-weight: 700;
}
.listContent ul li {
    color: #000000;
    font-weight: 500;
    font-size: 14px;
    text-align: left;
}
li.list_account {
    max-width: 175px;
    width: 100%;
    margin-right: 20px;
}

li.list_name {
    max-width: 130px;
    width: 100%;
    margin-right: 20px;
}

li.list_address {
    max-width: 420px;
    width: 100%;
    margin-right: 20px;
}

li.list_status {
    max-width: 230px;
    width: 100%;
    margin-right: 20px;
}

li.list_manage {
    max-width: 170px;
    width: 100%;
    margin-right: 20px;
    /*     cursor: pointer; */
}
li.lastBtn.list_manage {
    cursor: pointer;
}

li.lastBtn {
    color: #f18020 !important;
    font-weight: 600 !important;
}

p.error-message {
    color: red;
    font-size: 14px;
    padding: 10px 0;
}


@media (max-width: 767px){
    .enrolledAccounts-header h2 {
        font-size: 24px;
    }
    .banner-p0pnf-main .banner-artboard-1-heading.page3prac-heading h1 {
        font-size: 38px;
    }
    .listHeadings ul li {
        font-size: 14px;
    }
    .listContent ul li {
        font-size: 16px;
    }
    .enrolledAccounts-btn a {
        font-size: 16px;
    }
    .enrolledAccounts-list {
        padding: 0px 0px;
    }
    .enrolledAccounts-btn {
        padding: 0;
    }
}

@media (max-width: 540px){
    .enrolledAccounts-list {
        display: flex;
        padding: 0px 0px;
        justify-content: center;
    }
    .listHeadings ul {
        margin-bottom: 15px;
        flex-direction: column;
        padding: 5px;
    }
    .listContent ul {
        flex-direction: column;
        padding: 5px;
    }
    .enrolledAccounts-btn {
        text-align: center;
        padding: 0;
    }
}
/* ---------- enrollment tab items ------------- */



div#have-online-details iframe {height: 600px !important;max-width: 540px;}

/* ----------- make a payment ---------------- */
input#amountField {
    padding-left: 10px;
}
p#amountErrorMessage {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 0px;
}
.checkAmountSectionWrapper {
    padding-bottom: 0px;
}
.checkAmountBelowtext {
    padding-top: 10px;
    padding-bottom: 25px;
}
.checkAmountBelowtext p {
    font-size: 16px;
}
@media screen and (max-width: 767px){
    input#amountField {
        width: 100%;
    }
    .amountFieldWrapper {
        display: flex;
        align-items: center;
    }
    div#checkAmountSection {
        /* flex-direction: column; */
        flex-wrap: wrap;
    }
}
/* ----------- make a payment ---------------- */
#ICCMSG, #iBNMSG, #mp-ICCMSG, #mp-iBNMSG {
    font-size: 20px;
    text-align: center;
}


.success-message { font-size:14px; color:green; font-weight:600; padding-top:10px; }
button:hover, a:hover, button:active, a:active { font-weight:inherit; }
a:active, button:active, a:focus, button:focus { font-family:inherit; }
.update-card-info:hover, .mp-update-card-info:hover, .mp-strp-update-card-info:hover, .up-strp-update-card-info:hover, .update-card-info:active, .mp-update-card-info:active, .mp-strp-update-card-info:active, .up-strp-update-card-info:active { background-color:#006ac6; }

div#checkAmountSection {display: flex;gap: 20px;}
button#amountCheckButton {background-color: #006ac6;border-radius: 8px;color: #fff;display: inline-block;font-size: 14px;font-weight: 500;line-height: 24px;padding: 8px 16px;transition: all .3sease-in;}
button#amountCheckButton:hover, button#amountCheckButton:active {background-color: #f38020;font-family: inherit;font-weight: 500;}

.disabled {opacity: 0.5; /* Make it look disabled */cursor: not-allowed; /* Show not-allowed cursor */filter: grayscale(80%); /* Slightly dull the color */}

.default-method label, .mp-default-method label { font-size:14px !important; line-height:1; }
.jnpiays-bank, .mp-jnpiays-bank { padding-bottom:15px; }
.default-method, .mp-default-method {
    display: flex;
    align-items: center;
    margin-bottom: 15px !important;
    margin-top: -10px !important;
    margin-left: 35px !important;
}
a#update-card-info, a#mp-update-card-info, a#mp-strp-update-card-info, a#up-strp-update-card-info {
    align-items: center;
    background-color: #f38020;
    color: #fff;
    display: inline-block;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 8px;
    margin-top: 0px;
    transition: all .3s ease-in;
}
.jnpiays-credit .radioLabelContainer, .mp-jnpiays-credit .mp-radioLabelContainer {
    padding-bottom: 15px;
}
.radioLabelContainer {
    align-items: center;
    display: flex;
}
.mp-radioLabelContainer{
    align-items: center;
    display: flex;
}
input[type=radio]:before {
    content: none !important;
}
input[type=radio] {
    margin-right: 18px!important;
}
@supports (-moz-appearance: none) {
    input[type="radio"]::before {
        content: none !important;
    }
}
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 18px !important;
    height: 18px !important;
    border: 1px solid #c8ced4 !important;
    border-radius: 50% !important;
    position: relative;
    outline: none;
    cursor: pointer;
}

input[type="radio"]:checked {
    background-color: #00bdd0 !important;
    /*   box-shadow: inset 0 0 0 4px white !important; */
}


/* ---- progress bar --------------- */
#progressBarIl{
    max-width: 520px;
    width: 100%;  
    padding: 30px 15px 20px;
}
.progressBarIl .progMessageIl{
    font-weight: 700;
    color: #000;
    font-size: 22px;
    max-width: 385px;
    margin: 0 auto;
    padding: 70px 0 100px;
}
.progressBarIl .progressTextIl{
    font-size: 18px;
    font-weight: 600;
    padding: 5px 0 0;
    color: #000;
}
.dnrsIl {
    font-size: 14px;
    line-height: normal;
    padding: 5px 0 0;
    font-weight: 600;
    color: #000;
}
.progressBarIl .bottomTextIl {
    font-size: 12px;
    line-height: normal;
    padding: 15px 0;
    font-weight: 600;
    color: #000;
}
.LoadingWrapperIl {
    background-color: rgb(255 134 29 / 67%);
    border-radius: 15px;
}
/* ---- progress bar --------------- */


/* -------------- Icheck ----------------- */
div#jnpiays-bank p, div#mp-jnpiays-bank p {
    margin-left: 35px;
}
div#jnpiays-credit p, div#mp-jnpiays-credit p {
    margin-left: 35px;
}

.jnpiays-bank-details, .mp-jnpiays-bank-details,
.jnpiays-credit-details, .mp-jnpiays-credit-details{
    display: none;
}
.fwto-wrapper label .mp-radioLabelContainer {
    margin-bottom: 15px;
}
.jnpiays-bank label, .mp-jnpiays-bank label, .fwto-wrapper label {
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    font-weight: 500;
    font-family: "Poppins";
}

.jnpiays-bank label input, .mp-jnpiays-bank label input, .fwto-wrapper label input {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    z-index: 989;
}

.jnpiays-credit label input, .mp-jnpiays-credit label input {
    z-index: 989;
}

.jnpiays-bank label p, .mp-jnpiays-bank label p, .fwto-wrapper label p {
    font-size: 14px;
    line-height: 22px;
    color: #000000;
    font-weight: 500;
    font-family: "Poppins";
    margin: 10px 0 20px;
}

.jnpiays-bank-details, .mp-jnpiays-bank-details {
    background-color: rgba(0, 189, 208, 0.102);
    padding: 20px 30px;
    min-height: 568px;
    margin-bottom: 50px !important;
}

.jnpiays-bank-details h4, .mp-jnpiays-bank-details h4 {
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    font-weight: 500;
    font-family: "Poppins";
    text-align: center;
}

.jnpiays-bank-details > input, .jnpiays-bank-details > select, .mp-jnpiays-bank-details > input, .mp-jnpiays-bank-details > select {
    height: 50px;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    border: 1px solid #c8ced4 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    color: #6e757c !important;
    font-weight: 500;
    font-family: "Poppins";
    margin-bottom: 15px;
}

.jnpiays-bank-details > img, .mp-jnpiays-bank-details > img {
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
}

.jnpiays-bank-details label, .mp-jnpiays-bank-details label {
    font-size: 18px;
    line-height: 22px;
    color: #000000;
    font-weight: 500;
    font-family: "Poppins";
}


.jnpiays-credit label, .mp-jnpiays-credit label {
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    font-weight: 500;
    font-family: "Poppins";
}

.jnpiays-credit label input[type="number"], .mp-jnpiays-credit label input[type="number"], .jnpiays-credit label input[type="text"], .mp-jnpiays-credit label input[type="text"] {
    height: 50px;
    border-radius: 5px;
    background-color: #ffffff;
    border: 1px solid #c8ced4;
}

.jnpiays-credit label p, .mp-jnpiays-credit label p {
    font-size: 14px;
    line-height: 22px;
    color: #000000;
    font-weight: 500;
    font-family: "Poppins";
    margin: 10px 0;
}

.jnpiays-credit-details, .mp-jnpiays-credit-details {
    background-color: rgba(0,189,208,.102);
    margin-bottom: 50px;
    min-height: 568px;
    padding: 20px 30px;
}


.jnpiays-credit-details h4, .mp-jnpiays-credit-details h4 {
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    font-weight: 500;
    font-family: "Poppins";
    text-align: center;
}

.jnpiays-credit-details > input, .mp-jnpiays-credit-details > input, .jnpiays-credit-details > select, .mp-jnpiays-credit-details > select {
    height: 50px;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    border: 1px solid #c8ced4 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    color: #6e757c !important;
    font-weight: 500;
    font-family: "Poppins";
    margin-bottom: 15px;
}

.jnpiays-credit-details > img, .mp-jnpiays-credit-details > img {
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
}

.jnpiays-credit-details label, .mp-jnpiays-credit-details label {
    font-size: 18px;
    line-height: 22px;
    color: #000000;
    font-weight: 500;
    font-family: "Poppins";
}
.jnpiays-heading h4, .mp-jnpiays-heading h4 {
    max-width: 620px;
    min-height: 52px;
    font-size: 24px;
    letter-spacing: 0px;
    line-height: 32px;
    color: #495057;
    font-weight: 500;
    font-family: "Poppins";
    margin: 0 0 20px;
}

.jnpiays-form form, .mp-jnpiays-form form {
    background: none;
}

.jnpiays-form label, .mp-jnpiays-form label {
    max-width: 587px;
    min-height: 67px;
    font-size: 20px;
    line-height: 30px;
    color: #495057;
    font-weight: 500;
    font-family: "Poppins";
    margin-bottom: 30px;
}

.jnpiays-form label p, .mp-jnpiays-form label p {
    max-width: 587px;
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    color: #6e757c;
    font-weight: 500;
    font-family: "Poppins";
    margin: 8px 0 0;
}

.jnpiays-form label p a, .mp-jnpiays-form label p a {
    color: #f18020;
    font-weight: 500;
    font-family: "Poppins";
    font-size: 16px;
    line-height: 24px;
}

.jnpiays-form label p a:hover, .mp-jnpiays-form label p a:hover, .jnpiays-form label p a:active, .mp-jnpiays-form label p a:active {
    color: #f18020;
    font-weight: 500;
    font-family: "Poppins";
    font-size: 16px;
    line-height: 24px;
    text-decoration: underline;
}
.jnpiays-form input, .mp-jnpiays-form input {
    width: 23px;
    height: 23px;
    border-radius: 12px;
    background-color: #ffffff;
    border: 1px solid #c8ced4;
}
label.jnpiays-ccexccv {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.jnpiays-ccex {
    position: relative;
    max-width: 339px !important;
    width: 100% !important;
}

.jnpiays-ccex input {
    max-width: 339px !important;
    width: 100% !important;
}

label.jnpiays-ccexccv > input {
    border-radius: 5px !important;
    background-color: #ffffff !important;
    border: 1px solid #c8ced4 !important;
    max-width: 206px !important;
    min-height: 50px !important;
    width: 100% !important;
}

.jnpiays-ccex img {
    position: absolute;
    right: 10px;
    top: 10px;
}

.jnpiays-bank-details, .jnpiays-bank-details iframe, .mp-jnpiays-bank-details, .mp-jnpiays-bank-details iframe, .jnpiays-credit-details, .jnpiays-credit-details iframe,  .mp-jnpiays-credit-details, .mp-jnpiays-credit-details iframe {
    max-width: 600px;
    width: 100%;
}


@media screen and (max-width: 767px){
    .jnpiays-credit-details input::placeholder, .mp-jnpiays-credit-details input::placeholder{
        font-size: 16px;
    }
    .jnpiays-ccex {
        max-width: 100% !important;
    }

    .jnpiays-ccex input {
        max-width: 100% !important;
    }

    label.jnpiays-ccexccv > input {
        max-width: 100% !important;
    }
}
/* -------------- Icheck ----------------- */
.tabinInfo {
    margin-top: 28px !important;
}

.ssmainsection-main #popup {
    background-color: #fff;
    display: none;
    /*     left: 50%; */
    padding: 70px 20px;
    position: unset;
    text-align: center;
    /*     top: 50%; */
    /*     transform: translate(-50%, -50%); */
    width: 100%;
    z-index: 1000;
    max-width: 100%;
    min-height: 100%;
    align-content: center;
}
.login-details {
    display: flex;
    flex-direction: column;
    text-align: justify;
    max-width: 500px;
    margin: 0 auto;
}
.login-details button:disabled {
    opacity: 0.5;
}
.accountEmailId { padding-top:20px; }
.login-details button {
    align-items: center;
    background-color: #f18020;
    color: #000;
    display: flex;
    font-family: Poppins;
    font-size: 22px;
    font-weight: 700;
    height: 50px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 26px;
    text-align: center;
}


.login-inner {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: fit-content;
    /*     background: linear-gradient(135deg, #667eea, #764ba2); */
    margin:0 auto;
}

.login-header h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.login-details input[type="email"]:focus,
.login-details input[type="password"]:focus {
    border: 2px solid #667eea;
}

#password-message {
    display: block;
    margin-bottom: 15px;
}

.login-details label {
    font-size: 20px;
    color: #000;
}
#wrong-message { display:none; }
.login-details input {
    display: inline-block;
    font-size: .875rem;
    padding: .7rem;
    width: 100%;
    background-color: #fff !important;
    border: 1px solid #c8ced4 !important;
    border-radius: 5px !important;
    height: 50px;
    margin-bottom: 15px;
    color:#425b76;
}
.login-details input::placeholder {
    font-weight:400;
    font-size: .875rem;
}
#popup p {
    color:#000;
    font-size: 20px;
    margin: 0;
}
#popup a {
    color: #006ac6;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 600;
}
#overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}


.banner-artboard-1-main.banner-p0pnf-main.banner-p2mu-main {
    padding: 150px 0 115px !important;
}

.font14, .font14 * {
    font-size: 14px;
    font-weight: 500;
    color: #020617;
    line-height: 20px;
}
.font18, .font18 * {
    font-size: 18px;
    font-weight: 500;
    color: #020617;
    line-height: 20px;
}
.font16, .font16 * {
    font-size: 16px;
    font-weight: 500;
    color: #020617;
    line-height: 20px;
}
.black_color *, .black_color{ 
    color:#020617;
}
.blue_gray *, .blue_gray { 
    color:#64748B;
}
.pwderror {
    padding: 5px 0;
    font-size: 15px;
    color: red;
}



/* Overall Dashboard  and Header Part */
.ssmainsection-outer { padding: 40px 0 80px; }
.contactSection span.svg-icon { display: inline-block; line-height: 0; }
.ssmainsection { display: flex; background-color: #006AC6; border-radius: 15px; }
.headerSection { display: flex; align-items:center; justify-content: space-between; }
.contactSection { display: flex; gap:16px; width:657px; justify-content:end; }
.yourSubs { width: calc(100% - 660px); }
.itemDetailList .row, .itemDetailListt .row { display: flex; justify-content: space-between; gap:8px; }
.ssmainsection { padding: 90px 62px 120px 30px;position: relative; }
.ssmainsection-tabs { width: 310px; }
.ssmainsection-tabContent * { margin:0; }
.ssmainsection-tabContent { padding: 30px; background-color: #fff; border-radius: 16px; width:calc(100% - 310px); }
.ssmainsection-tabs ul { display: flex; flex-direction: column; gap: 17px; list-style-type: none;
    padding: 0; padding-top:27px; margin: 0; }
.ssmainsection-tabs ul li { padding: 21px 18px; border-radius: 11.49px 0px 0px 11.49px; font-size: 18px; line-height: 28px;
    color: #fff; cursor:pointer; transition:all ease-in 0.3s; }
.ssmainsection-tabs ul li.active, .ssmainsection-tabs ul li:hover, .ssmainsection-tabs ul li:active { color: #1B1B1B; background-color:#fff; }
.ssmainsection-tabContent h4 {color: #1b1b1b;font-size: 18px;line-height: 26px;margin: 0;margin-bottom: 15px;}
.ssmainsection-tabContent h5 { line-height:24px; margin:0; }
.ssmainsection-tabContent .contactSection a:hover, .ssmainsection-tabContent .contactSection a:active { font-weight: 600; font-family: inherit; color: #006ac6; }
.ssmainsection-tabContent .contactSection a { display:flex; align-items:center; gap:8px; font-size: 14px; font-weight: 600;
    line-height: 18.23px; text-align: center; color: #1B1B1B; padding: 11px 10px 11px 16px;
    border: 1px solid #E8E8E8; border-radius: 8px; transition:all ease-in 0.3s; }
.ssmainsection-tabContent .liveChat a:hover, .ssmainsection-tabContent .liveChat a:active { background-color: #006ac6; color: #fff; }
.ssmainsection-tabContent .liveChat a { display: flex; align-items: center; background-color: #F38020; color: #fff; }


/* Account Balance */
.accountBalance { display: flex; justify-content: space-between; align-items: center;
    margin-top: 30px; background-color: #F0F8FF; border-radius: 14px; padding:15px 30px; }
.accountBalance .accountTitle p { font-size: 18px; font-weight: 500; line-height: 27px; color: #64748B; }
.accountBalance .amount p { font-size: 24px; font-weight: 600; line-height: 36px; color: #1B1B1B; margin-top:4px; }
.accountBalance .accountBalanceCol2 a:hover, .accountBalance .accountBalanceCol2 a:active { font-weight: 500; background-color:#f38020; font-family:inherit; }
.accountBalance .accountBalanceCol2 a { font-size: 14px; transition: all ease-in 0.3s; font-weight: 500; line-height: 24px; 
    padding:6px 16px; background-color: #006AC6; color: #fff; display: inline-block; border-radius:8px; }


/* Select Field */
.SelectAnotherSub { margin-top: 28px; }
.SelectAnotherSub select { border: 1px solid #e2e8f0 !important; appearance: none; width: 100%; padding: 10px 39px 10px 19px !important;
    font-size:14px !important; line-height:24px; color:#020617 !important; }
.selectField { position:relative; max-width: max-content; width: 100%; }
.selectField:after { position:absolute; content:''; background-image:url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M2 4L8.5 11L15 4" stroke="%23020617" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
    background-repeat:no-repeat; background-size:cover; top:50%; right:14px; transform:translateY(-50%);
    width: 16px; height: 16px; }

/* Home */
.ssmainsection-tabContent .itemDetailList, .ssmainsection-tabContent .itemDetailListt { margin-top: 26px; }
.ssmainsection-tabContent .itemDetailList, .ssmainsection-tabContent .itemDetailListt { margin-top: 26px; border: 1px solid var(--border, #E2E8F0); border-radius: 12px; }
.ssmainsection-tabContent .itemDetailList .row, .ssmainsection-tabContent .itemDetailListt .row { padding: 16px 44px; }
.ssmainsection-tabContent .itemDetailList .row:not(:last-child), .ssmainsection-tabContent .itemDetailListt .row:not(:last-child) { border-bottom: 1px solid #E2E8F0; }
.ssmainsection-tabContent .itemDetailList .titleCol, .ssmainsection-tabContent .itemDetailList .valueCol, .ssmainsection-tabContent .itemDetailListt .titleCol, .ssmainsection-tabContent .itemDetailListt .valueCol {
    font-size: 14px; font-weight: 400; line-height: 24px; color:#020617; }
.ssmainsection-tabContent .itemDetailList .row:nth-child(even), .ssmainsection-tabContent .itemDetailListt .row:nth-child(even) { background-color: #f7f8fa; }


/* contact_preference */
.ssmainsection-tabContent .contact_infos_inner .row { display: flex; gap: 37px; align-items: center; padding-bottom: 21px; }
.ssmainsection-tabContent .contact_infos_inner.checkbox .row { padding-bottom:34px; align-items:start; }
.ssmainsection-tabContent .contact_infos_inner.checkbox { padding: 34px 0 0; position: relative;border-bottom: 1px solid #e2e8f0; }
/* .ssmainsection-tabContent .contact_infos_inner.checkbox:after { position: absolute; content: ''; width: calc(100% + 96px); height: 1px; background-color: #E2E8F0; left: -48px; } */
.ssmainsection-tabContent .contact_infos_inner .row div:first-child { width: 130px; }
.ssmainsection-tabContent .contact_infos_inner .row div { max-width: 100%; width: 30.723%; }
.ssmainsection-tabContent .contact_infos_inner .row label { display:none; }
.ssmainsection-tabContent .contact_infos_inner.checkbox .row label { display: block; }
.ssmainsection-tabContent .contact_infos_inner.checkbox .row label span { display: none; }
.ssmainsection-tabContent .contact_infos_inner .row input[type="text"],
.ssmainsection-tabContent .contact_infos_inner .row input[type="email"]{
    width: 100%; padding: 8px 12px; border:1px solid #E2E8F0 !important; border-radius:8px; }
.ssmainsection-tabContent .contact_infos_inner .row input::placeholder {
    font-size: 14px; line-height: 20px; color: #64748B; }
.ssmainsection-tabContent .contact_infos_inner .row .new_info input { background-color:#fafafa !important; }
.ssmainsection-tabContent .contact_infos_inner { padding:21px 0; }
.ssmainsection-tabContent .agreement_info_content p { color:#64748B; margin-top:10px; }
.ssmainsection-tabContent  .agreement_info { padding:34px 0; border-top:1px solid #E2E8F0; border-bottom:1px solid #E2E8F0; margin-top: 13px; }
.important_note { font-size:13px; line-height:20px; color:#F93A0B; margin-top:2px; }
.ssmainsection-tabContent .contact_infos_inner.checkbox .row div:first-child { max-width: 723px; width:100%; margin: 0; }
.ssmainsection-tabContent .contact_infos_inner.checkbox .row div:not(:first-child) { width:140px; margin:0 auto; text-align:center; }
.contact_infos_inner.checkbox span { display:block; margin-bottom:4px; }
.ssmainsection-tabContent .contact_infos_inner .row input[type="checkbox"]{ padding:0; }
.ssmainsection-tabContent input[type=checkbox]+.label { z-index:1; }
.button_parent { display:flex; gap:22px; padding-top:36px; }
.save_btn a:hover,.customIframe a:hover, .updatePwdBtn button:hover, .save_btn a:active, .customIframe a:active, .updatePwdBtn button:active { font-weight: 500; background-color: #f38020; font-family: inherit; }
.save_btn a ,.customIframe a , .undo_btn a , .updatePwdBtn button { font-size: 14px; transition: all ease-in 0.3s; font-weight: 500; line-height: 24px;
    padding: 8px 16px; background-color: #006AC6; color: #fff; display: inline-block; border-radius: 8px; }
a:hover, a:active { font-family:inherit; font-weight:inherit; }
.undo_btn a { background-color: #ffffff; border: 1px solid #E2E8F0; color:#000; }
.undo_btn a:hover, .undo_btn a:active { background-color: #f38020; border: 1px solid #006AC6; color:#ffffff; }


/* Bill&Payment */
.bill_payment .row { display: flex; background-color:#fff; }
.bill_info_inner .row > div { width: 16.25%; padding:8px 12px; }
.bill_info_inner .row > div:first-child { width: 10%; }
.bill_info_inner .row > div:last-child { width: 25%; }
.payment_info_inner .row > div { width: 30%; padding:8px 12px; }
.payment_info_inner .row > div:first-child { width: 30%; }
.payment_info_inner .row > div:last-child { width: 30%; }
.bill_info_inner .row > div:not(:last-child),.payment_info_inner .row > div:not(:last-child)  {
    border-right: 2px solid #E2E8F0;
}
.bill_info_inner .row > div,.payment_info_inner .row > div  {
    border-bottom: 1px solid #E2E8F0;
}
.row.row_heading_part { background-color: #f0f8ff;border-radius: 12px 12px 0 0; }
.row_inner_part {border-radius: 0 0 12px 12px;}
.bill_payment .row_inner_part .row:nth-child(odd) { background-color: #f7f8fa; }
.bill_info_inner , .payment_info_inner {margin-top:10px;border: 1px solid #E2E8F0;border-radius: 12px;}
.bill_info_inner > div:nth-child(even), .payment_info_inner > div:nth-child(even) { background-color: #f7f8fa; }
.bill_payment { padding: 21px 0; }
.payment_info_outer { padding-top: 70px; }

/* payementHistory */
.notFound {
    padding: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #020617;
}
/* payementHistory */


/* Contract */
.contracts_infos { padding:21px 0; }
.contracts .row { display: flex; background-color:#fff; }
.contracts .row > div { width: 22.5%; padding:8px 12px; }
.contracts .row > div:last-child { width: 32.5%; }
.contracts_info .row_inner_part .row:nth-child(odd) { background-color: #f7f8fa; }
.contracts_info_inner { border: 1px solid #E2E8F0;border-radius: 12px; margin-top:10px; }
.contracts_info_inner > div:nth-child(even) { background-color: #f7f8fa; }
.contracts_info_inner .row > div:not(:last-child)  { border-right: 2px solid #E2E8F0; }

/* Bill&Payment and Contracts */
.row.row_heading_part,.row_inner_part { padding-right: 5px; }
/* .row_inner_part { max-height: 150px; overflow-y: scroll; } */
/* .row_inner_part::-webkit-scrollbar-track { background-color: transparent; }
.row_inner_part::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; }
.row_inner_part::-webkit-scrollbar-thumb { background-color: #000000; } */
.row_inner a { color: #006ac6;text-decoration: underline; }
.row_inner a:hover, .row_inner a:active { color: #64748b; font-family: inherit; font-weight: 500; }
.row.row_heading_part { background-color: #f0f8ff; }
.bill_info, .contracts_info, .payment_info {
    max-height: 185px;
    overflow-y: auto;
}

.row_inner_part::-webkit-scrollbar-track,.bill_info::-webkit-scrollbar-track, .contracts_info::-webkit-scrollbar-track, .payment_info::-webkit-scrollbar-track { background-color: transparent; }
.row_inner_part::-webkit-scrollbar,.bill_info::-webkit-scrollbar, .contracts_info::-webkit-scrollbar, .payment_info::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; }
.row_inner_part::-webkit-scrollbar-thumb,.bill_info::-webkit-scrollbar-thumb, .contracts_info::-webkit-scrollbar-thumb, .payment_info::-webkit-scrollbar-thumb { background-color: #000000; }



/* Left Side Deashboard Responsive */
.selected-tag { display:none; }

/* Change Password */
.change_password #newPassword, .change_password #confirmPassword { width: 100%; padding: 8px 12px; border:1px solid #E2E8F0 !important; border-radius:8px; }
.change_password #newPassword::placeholder,.change_password #confirmPassword::placeholder{ font-size:14px; line-height:20px; }
.change_password_inner > div { display:flex; align-items:center; }
.change_password_inner > div label { width: 300px; }
.change_password_inner { max-width: 640px; display: flex; flex-direction: column; gap: 30px; padding: 30px 0; }
span.toggle-password {position: absolute;right: 10px;z-index:999;cursor:pointer;}
.change_password_inner > div { position: relative;}


.topBarMessage {text-align: center;}
.topBarMessage p {font-family: Poppins;font-size: 18px;font-weight: 500;margin: 0;}
.ssmainsection-main {padding-top: 40px;}


/* Logout Popup */
#logout-btn , .popup-box button {
    align-items: center;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    color: #1b1b1b;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    line-height: 18.23px;
    padding: 11px 10px 11px 16px;
    text-align: center;
    transition: all .3s ease-in;
    align-items: center;
    background-color: #f38020;
    color: #fff;
    display: flex;
    max-width: 140px;
    margin-top: 0;
    width: 100%;
    justify-content: center;
}

#logout-btn{
    position: absolute;
    right: 62px !important;
    top: 25px !important;
    bottom: unset !important;
}

#logout-btn:hover, #update-card-info:hover, #mp-update-card-info:hover, #mp-strp-update-card-info:hover, #up-strp-update-card-info:hover, #logout-btn:active, #update-card-info:active, #mp-update-card-info:active, #mp-strp-update-card-info:active, #up-strp-update-card-info:active{
    background-color: #006ac6;
    color: #fff;
}
p.belowButtonText {
    padding: 10px 0;
    font-size: 14px;
    line-height: 22px;
    color: #000000;
}
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.popup-box h4 {
    color:#1b1b1b;
}
.popup-box {
    background: #fff;
    border-radius: 10px;
    padding: 25px 30px;
    text-align: center;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.enrollments {
    margin-top: 10px;
}
.welcomeFirstName {
    position: absolute;
    top: 25px !important;
    bottom: unset !important;
    left: 30px;
    margin-left: 310px;
}

.welcomeFirstName p {
    color: #fff;
    font-size: 24pt;
}



@media(min-width:1680px){
    /*  Overall Dashboard   */
    .ssmainsection-main .page-center { max-width: 1700px; }
}
@media(max-width:1681px){
    /*  Overall Dashboard   */
    .ssmainsection-tabs { width: 270px;}
    .ssmainsection-tabContent { width:calc(100% - 270px);}
    .ssmainsection { padding: 90px 30px; 52px }
    #logout-btn {bottom: 56px;position: absolute;right: 60px;}
    .ssmainsection-tabContent { padding: 30px 30px 52px;}
    /* contact_preference */
    /*     .ssmainsection-tabContent .contact_infos_inner.checkbox:after { left: -30px; width: calc(100% + 60px); } */
}
@media screen and (max-width:1440px){
    /*  Overall Dashboard   */
    .ssmainsection-tabContent { padding: 40px 30px; }
}
@media screen and (max-width:1280px){
    /*  Overall Dashboard   */
    .ssmainsection-tabContent h4 { font-size: 22px; }
    .ssmainsection-tabContent h5 { font-size: 14px; }
    .ssmainsection-tabContent .contactSection a { font-size: 12px; }
    .ssmainsection-tabs ul li { font-size: 16px; line-height: 22px; }

    /* contact_preference */
    .ssmainsection-tabContent .contact_infos_inner .row div { max-width: 100%; width: 38%; }
}
@media screen and (max-width:1231px){
    /*  Overall Dashboard   */
    /*   Header Part   */
    .headerSection { flex-direction: column; align-items: start; gap: 20px; }
    .contactSection { width: 100%; flex-wrap: wrap; justify-content: start; }
    .yourSubs { width: 100%; }

    /* Bill&Payment and Contract */
    .bill_info, .payment_info, .contracts_info { width: 100%; overflow-x: scroll; }
    .bill_info_inner, .payment_info_inner, .contracts_info_inner { width: 799px; }
    .bill_info::-webkit-scrollbar-track,
    .payment_info::-webkit-scrollbar-track,
    .contracts_info::-webkit-scrollbar-track { background-color: transparent; }
    .bill_info::-webkit-scrollbar,
    .payment_info::-webkit-scrollbar,
    .contracts_info::-webkit-scrollbar{ height: 5px; background-color: #F5F5F5; }
    .bill_info::-webkit-scrollbar-thumb,
    .payment_info::-webkit-scrollbar-thumb,
    .contracts_info::-webkit-scrollbar-thumb { background-color: #000000; }
    .yourSubs {display: none;}
}
@media screen and (max-width:1158px){
    .listContent ul li {
        font-size: 14px;
    }
    .listHeadings ul li {
        font-size: 14px;
    }
}
@media screen and (max-width:991px){
    /*  Overall Dashboard   */
    /*   Header Part   */
    .titleCol, .valueCol { width: 48%; }
    .valueCol { text-align: right; }
    .accountBalance { padding: 24px 16px; }
    .ssmainsection-tabs { max-width: 320px;  width:100%; position:relative; }
    .ssmainsection-tabContent { width: calc(100% - 220px);padding: 30px 20px; }
    .ssmainsection { padding: 90px 15px; 30px }
    .ssmainsection-tabs ul li { padding:15px; }
    .ssmainsection { flex-direction: column; align-items: center; gap: 30px; }
    .ssmainsection-tabContent { width: 100%; }
    .selected-tag { cursor:pointer; display:block }
    .ssmainsection-tabs ul li,
    .ssmainsection-tabs ul li.active { border-radius: 12px; background: #f38020; color: #fff; }
    .ssmainsection-tabs ul li:hover, .ssmainsection-tabs ul li:active { color: #000; background-color: #fff; border-radius: 0px; }
    .ssmainsection-tabs ul { padding: 0; display: none; position: absolute; top: 100%;
        left: 0; overflow-y: scroll; width: 100%; background: #f38020; z-index: 1000; height: 200px; }
    .selected-tag {background-color: #fff;padding: 15px;border-radius: 12px;position:relative;}
    .selected-tag.no-lower-border { border-radius: 12px 12px 0 0; }
    .selected-tag::before { content: "▼"; position: absolute; right: 10px; top: 50%;
        transform: translateY(-50%); transition: all ease-in 0.3s; pointer-events: none; }
    .selected-tag.no-lower-border::before { transform: rotateX(180deg); top: 25%; }
    .ssmainsection-tabs ul::-webkit-scrollbar-track { background-color: transparent; }
    .ssmainsection-tabs ul::-webkit-scrollbar { width: 5px; background: #f38020; }
    .ssmainsection-tabs ul::-webkit-scrollbar-thumb { background-color: #000000; }
    .accountBalance { flex-wrap: wrap; gap: 10px; }

    /* contact_preference */
    /*     .ssmainsection-tabContent .contact_infos_inner.checkbox:after {
    left: -20px; width: calc(100% + 40px); } */

    /* Home */
    .ssmainsection-tabContent .itemDetailList .row, .ssmainsection-tabContent .itemDetailListt .row { padding: 15px; }
    #logout-btn {bottom: -62px;position: absolute;right: 60px;}
    .welcomeFirstName {left: 15px;margin-left: 0;}
}
@media(max-width:767px){
    /* contact_preference */
    .ssmainsection-tabContent .contact_infos_inner .row { flex-wrap: wrap; align-items: start; gap: 15px; padding-bottom: 30px; }
    .ssmainsection-tabContent .contact_infos_inner .row label { display: block; }
    .ssmainsection-tabContent .contact_infos_inner .row div:first-child { width: 100%; }
    .ssmainsection-tabContent .contact_infos_inner .row div { max-width: 100%; width: 48%; }
    .ssmainsection-tabContent .contact_infos_inner .row:first-child { opacity: 0; height: 0; }
    .ssmainsection-tabContent .contact_infos_inner.checkbox .row label span { display:block }
    .welcomeFirstName {position: absolute;top: 95px !important;bottom: unset !important;left: 0;margin-left: 0;max-width: 100%;width: 100%;text-align: center;}
    .welcomeFirstName p {color: #fff;font-size: 18pt;}
    .ssmainsection {padding: 150px 15px 90px;}
}
@media(max-width:640px){
    /*  Overall Dashboard   */
    .ssmainsection-tabContent { padding:30px 15px; }

    /* Change Password */
    .change_password_inner > div { flex-direction: column; }
    .change_password_inner > div label { width: 100%; padding-bottom: 4px; }
    .change_password_inner { gap: 15px; }
}
@media(max-width:575px){
    /* contact_preference */
    .ssmainsection-tabContent .contact_infos_inner .row div:first-child { width: 100%; }
    .ssmainsection-tabContent .contact_infos_inner .row div { max-width: 100%; width: 100%; }
    .ssmainsection-tabContent .itemDetailList .row, .ssmainsection-tabContent .itemDetailListt .row { flex-direction: column; align-items: center; }
    .titleCol, .valueCol { width: 100%; text-align: center; }
}