.cardstyling {
    padding-right: 10px;
}

@media (max-width:450px) {
    .cardstyling {
        padding-right: 0px !important;
    }

    .rightcontent1 {
        text-align: left;
    }

    .carddetailRight img {
        width: 25px;
        padding-right: 0px !important;
    }
}

@media only screen and (max-width: 1199px) and (min-width: 991px) {
    .cardstyling {
        padding-right: 0px !important;
    }
}

.rightcontent1 {
    width: 90%;
    float: left;
}

.rightcontent2 {
    width: 10%;
    float: right;
    padding-left: 5px;
}

@media (max-width:450px) {
    .rightcontent1 {
        padding-right: 5px;
    }

    #paymentOptionDetail .billpereferencetext {
        font-size: 12px;
    }

    #paymentOptionDetail .Marketingpereferencetext {
        padding-left: 14%;
    }

    #paymentOptionDetail .material-switch > label {
        left: -20px;
    }
}

@media (max-width:320px) {
    #paymentOptionDetail .billpereferencetext {
        font-size: 10px;
    }
}


.saveCardOption {
    padding-left: 14%;
}

.toggeliconcustom {
    top: 2px;
    left: -34px;
}

.imgcustom img {
    width: 20px;
    height: 20px;
    top: 2px;
    position: relative;
}


html {
    scroll-behavior: smooth;
}

#PayDown {
    margin-top: 0;
    padding-bottom: 0;
}

.payright {
    width: 98%;
    float: right;
    text-align: right;
}

#billing-app {
    padding: 15px;
}

    #billing-app .panel-collapse {
        /*        background-color: #F8F8F8;*/
    }

.bill-payment-modal a.action-link {
    color: #D50037;
}

.bill-payment-modal .adds-on-card .panel .panel-title::before {
    right: 10px;
}

.bill-payment-modal .adds-on-card .panel .panel-title a {
    border-bottom: none;
}

.bill-payment-modal .custom-tick ~ a {
    display: inline-block;
    width: calc(100% - 50px);
    text-align: left;
}

.bill-payment-modal .panel-group {
    width: 100%;
}

.bill-payment-modal .panel-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .bill-payment-modal .panel-title a {
        display: inline-flex;
        justify-content: space-between;
    }

        .bill-payment-modal .panel-title a .panel-title-left {
            margin-left: 10px;
        }

        .bill-payment-modal .panel-title a .panel-title-right {
            margin-right: 30px;
        }

        .bill-payment-modal .panel-title a .panel-title-amount {
            color: #202945;
            font-style: normal;
        }

.bill-payment-modal .amount-to-pay input[type=text] {
    font-size: 1rem;
    height: 30px !important;
    padding: 5px;
    max-width: 100px;
    text-align: right;
}

.bill-payment-modal .main-panel-body {
    padding-left: 15px;
    padding-right: 15px;
}

.bill-payment-modal .sub-panel-body {
    padding-left: 15px;
    padding-right: 15px;
}

.bill-numbers {
    display: block;
}

.content-header {
    height: 38px;
}

    .content-header span {
        font-weight: 500;
        font-size: 16px;
    }

.content-values {
    min-height: 30px;
}

    .content-header, .content-header label,
    .content-values, .content-values label {
        font-size: 13px;
    }

.pay-button-container small {
    margin-right: 5px;
    vertical-align: middle;
}

.account-holder-name {
    color: #202945;
    text-transform: capitalize;
}

.account-numer {
    padding-top: 2px;
}

.account-panel-title-right {
    display: flex;
    align-self: center;
}

.panel.account-panel h4.panel-title.account-title {
    background-color: #fbfbfb;
    border-bottom: 1px solid #f1f1f1 !important;
}

.panel.account-panel:last-child h4.panel-title.account-title {
    border-bottom: 1px solid transparent !important;
    border-radius: 8px;
}

.collapse-buttons {
    margin-bottom: 7px;
}

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

    .bill-payment-modal .amount-to-pay input {
        font-size: 1rem;
        height: 20px !important;
        padding: 5px;
        max-width: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .reform-in-mobile {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
       /* padding-top: 8px;*/
        padding-bottom: 6px;
        border-bottom: #E5E5E5;
    }

        .reform-in-mobile .content-values {
            display: inline-block;
        }

        .reform-in-mobile .content-header {
            display: inline-block;
        }
}


.tooltip-inner {
    max-width: 100% !important;
}


.positive-total-bill {
    color: #D50037 !important;
}

.negative-total-bill {
    color: #52ae93 !important;
}

.status-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 16px;
    font-size: 14px;
    color: #202945;
    position: relative; /* Add position relative */
}

.status-badge::before {
    content: "\2022";
    color: #56b093;
    margin-right: 5px;
    font-size: 25px;
    z-index: 1;
    position: absolute; /* Position the dot absolutely */
    left: -12px; /* Adjust the left position as needed */
    top: 50%;
    transform: translateY(-50%);
}

.status-badge.unknown::before {
    color: #E5E1E6; /* Inherit the color from parent */
}

.status-badge.unavailable::before {
    color: #8A8A8A; /* Inherit the background color from parent */
}
.status-badge.pending::before {
    color: #DB9C49; /* Inherit the background color from parent */
}
.status-badge.grace::before,.status-badge.failed::before {
    color: #ff4f41; /* Inherit the background color from parent */
}

@media only screen and (max-width: 470px) {
    .amountpay .form-check.form-check-inline.form-text.col-lg-5.f-text {
        width: 100% !important;
    }

    .amountpay .limitstyle {
        width: 100% !important;
        margin-left: 12%;
        justify-content: left;
    }

    .form-check.form-check-inline.form-text.col-lg-6.f-text {
        width: 100% !important;
    }

    .alertmsg {
        padding-right: 0 !important;
    }
}


.tooltip1 {
    position: relative;
    display: inline-block;
   /* border-bottom: 1px dotted black;*/
}

    .tooltip1 .tooltiptext {
        visibility: hidden;
        width: 188px;
        background-color: #202945;
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -115px;
        line-height: 19px;
        font-weight: normal;
    }

        .tooltip1 .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 60%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #f0e9e3 transparent transparent transparent;
        }

    .tooltip1:hover .tooltiptext {
        visibility: visible;
    }



.bdamt {
    float: left;
    padding-right: 5px;
    padding-top: 6px;
}

.amtspan {
    padding-top: 6px;
}

@media only screen and (max-width: 470px) {
    .bdamt {
        padding-top: 5px;
    }
}

.amoutlimit {
    width: 100px;
    justify-content: left !important;
    display: flex !important;
    float: left;
}


.textamtdisable {
    pointer-events: none;
    background-color: lightgrey;
}

.textamtenable {
    pointer-events: auto;
    background-color: white;
}