.ticker-wrap {
    /*background: #000;*/
    background: #0072bc;
    color: floralwhite;
    font-size: large;
    padding: 20px;
    position: relative;
    width: 100%;
    top: 4px;
    z-index: 9999;
    text-align: center;
}

@keyframes ticker {
    from {
        transform: translate3d(100%, 0, 0);
    }

    to {
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes ticker-item-show {
    0%, 50% {
        opacity: 0;
        visibility: hidden;
    }
    /* Show each item for a duration of 10 seconds */
    5%,45% {
        opacity: 1;
        visibility: visible;
    }
}
.logo-container {
    width: 75%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.responsive {
    width: 100%;
    max-width: 80px;
    height: auto;
}
.responsive1 {
    width: auto;
    max-height: 65px;
    height: 100%;
}
.responsive-saylani {
    width: auto;
    max-height: 65px;
    height: 100%;
}

.result {
    background-color: white;
    margin-bottom: 32px;
}

.result-status {
    display: flex;
    padding: 16px 0px 16px 32px;
}

.result-image {
    margin-top: 0.7%;
}

.result-description {
    padding-left: 16px;
}

.transaction-details {
    display: inline-flex;
}

.transaction-reference {
    padding-right: 16px;
    display: none;
}

.secondary-button {
    height: 48px;
    background-color: white;
    color: #EE6723;
    border: 1px solid #EE6723;
    border-radius: 4px;
    font-size: 20px;
    line-height: 30px;
    padding-left: 22px;
    padding-right: 22px;
}

.header {
    background-color: #FFFFFF;
}

    .header:after {
        content: "";
        display: block;
        height: 8px;
        /*background-image: url(../images/strip.png);*/
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover;
    }



.strip {
    vertical-align: bottom;
    width: 100%;
    height: 8px;
}

.container {
    width: 83%;
}

.payment-method-bg {
    height: 72px;
    width: 100%;
    background-color: #FFFFFF;
}

.label-regular {
    color: #2B2B2B;
    opacity: 0.7;
    font-family: Roboto;
    font-weight: normal;
    font-size: 18px;
    line-height: 27px;
    margin: 0px;
}

.label-bold {
    color: #2B2B2B;
    font-family: Roboto;
    font-weight: bold;
    font-size: 18px;
    line-height: 27px;
    margin: 0px;
}

.secondary-color {
    color: #EE6723;
}

error-color {
    color: #EB5757;
}

.label-bold-small {
    color: #2B2B2B;
    font-family: Roboto;
    font-weight: bold;
    font-size: 18px;
    line-height: 27px;
    margin: 0px;
}

.label-and-content .label-regular {
    margin-bottom: 8px;
}

.body-bold {
    color: #2B2B2B;
    font-family: Roboto;
    font-weight: bold;
    font-size: 18px;
    line-height: 27px;
    margin: 0px;
}

.title-invoice {
    margin-top: 32px;
    margin-left: 32px;
}

.body {
    color: #2B2B2B;
    font-family: Roboto;
    font-weight: normal;
    font-size: 18px;
    line-height: 27px;
    margin: 0px;
}

h1 {
    color: #2B2B2B;
    font-family: Roboto;
    font-weight: bold;
    font-size: 28px;
    line-height: 51px;
    margin: 0px
}

h3 {
    color: #2B2B2B;
    font-family: Roboto;
    font-weight: bold;
    font-size: 28px;
    line-height: 42px
}

h6 {
    color: #2B2B2B;
    font-family: Roboto;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    margin: 0px;
}

.text-button {
    /*text-decoration: underline;*/
    font-size: 16px;
    /*opacity: 1.0;
    cursor: default;*/
}

.transaction-reference {
    margin-right: 2%;
}


tertiary-bold {
    color: #2B2B2B;
    font-family: Roboto;
    font-weight: bold !important;
    font-size: 16px;
    line-height: 24px;
    margin: 0px;
    opacity: 0.7;
}

.tertiary {
    color: #2B2B2B;
    font-family: Roboto;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    margin: 0px;
    opacity: 0.7;
}



.label-and-content {
    margin-bottom: 32px;
}

.invoice-bg {
    background-color: #FFFFFF;
    margin-bottom: 60px;
    padding-left: 0px;
    padding-right: 0px;
}

    .invoice-bg:after {
        content: "";
        display: block;
        height: 16px;
        background-image: url(../Images/strip-long.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover;
    }

.payment-status {
    background-color: rgba(238, 103, 35, 0.15);
    border-radius: 32px;
    width: fit-content;
    padding: 2px 16px 2px 16px;
    margin-bottom: 32px;
}

    .payment-status .label-bold {
        color: rgb(238, 103, 35);
    }

.paid-status {
    background-color: rgba(39, 174, 96, 0.15);
    border-radius: 32px;
    width: fit-content;
    padding: 2px 16px 2px 16px;
    margin-bottom: 32px;
}

    .paid-status .label-bold {
        color: rgb(39, 174, 96);
    }


.pending-status {
    background-color: rgb(255, 203, 10, 0.15);
    border-radius: 32px;
    width: fit-content;
    padding: 2px 16px 2px 16px;
    margin-bottom: 32px;
}

    .pending-status .label-bold {
        color: rgb(255, 203, 10);
    }

.blocked-status {
    background-color: rgb(115, 115, 115, 0.15);
    border-radius: 32px;
    width: fit-content;
    padding: 2px 16px 2px 16px;
    margin-bottom: 32px;
}

.how-to-pay-section {
    background-color: white;
    padding: 16px;
    margin-bottom:5px;
}

.support-section {
    background-color: white;
    padding: 32px;
}

.how-to-pay-section {
    margin-bottom: 32px;
    margin-top: 10px;
}

.support-buttons {
    margin-top: 16px;
    
}
.body-support {
    font-family: Roboto;
    font-weight: normal;
    font-size: 16px;
    line-height: 10px;
    text-decoration:underline;
    cursor:pointer;
}
.support-buttons div {
    /*margin-right: 8px;*/
}

.support-section {
    margin-top: 16px;
}

.whatsapp-button * {
    display: inline-block;
    color: #27AE60;
}

.whatsapp-button {
    display: inline-block;
    /*border: 1px solid #27AE60;*/
    /*padding: 7px 12px 7px 12px;*/
    /*border-radius: 4px;*/
    padding-left: 25px;
    padding-top: 8px;
}


.call-button * {
    display: inline-block;
    color: #2D9CDB;
}

.call-button {
    display: inline-block;
    /*border: 1px solid #2D9CDB;*/
    padding: 7px 12px 7px 12px;
    /*border-radius: 4px;*/
}


.button-icon {
    padding-right: 0px;
    vertical-align: text-bottom;
    height: 30px;
}

.blocked-status .label-bold {
    color: rgb(115, 115, 115);
}

.amount-details {
    /*margin-bottom: 32px;*/
    margin-right: 16px;
    margin-left: 16px;
}

.download-button {
    float: right;
    margin-bottom: 32px;
    margin-top: 32px;
    margin-right: 32px;
}

.due-date-bg {
    height: 36px;
    background-color: rgba(238, 103, 35, 0.15);
    padding-top: 4px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 4px;
    width: fit-content;
    margin-bottom: 8px;
    margin-left:16px;
}

    .due-date-bg .label-regular {
        color: #EE6723;
        opacity: 1;
    }

.col-lg-1 .radio-circle {
    padding: 23px 0px 23px 15px;
}

.payment-method-bg p {
    padding-top: 19px;
    padding-bottom: 19px;
}

.payment-method-bg .logos {
    padding-top: 24px;
    padding-bottom: 24px;
    float: right;
}

.cta {
    height: 72px;
    background-color: #EE6723;
    color: #FFFFFF;
    width: 100%;
    border: none;
    border-radius: 4px;
    margin-top: 32px;
    font-family: Helvetica;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    margin: 0px;
}
    .cta:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }
    .cta:disabled:hover {
        background-color: #ccc;
        border: none;
        cursor:not-allowed;
    }

    .cta:hover {
        background-color: #FB722D;
        border: 2px solid #EE6723;
    }

    .cta:focus {
        background-color: #EB621E;
        border: 0px solid #FFFFFF;
        outline: none;
    }

.payment-method-section {
    padding-top: 10px;
    padding-bottom: 32px;
}

.payment-method {
   margin-top:0px;
}

.accpount-based {
    padding-bottom: 16px;
}

.credit-card {
    padding-bottom: 16px;
}

.justify-content-between {
    /*display: flex;*/
    flex-wrap: wrap-reverse;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 48px;
}

.radio-btn {
    background-color: #FFFFFF;
    height: 72px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    width: 100%;
    display: flex;
}

.radio-circle-main {
    width: 32px;
    height: 32px;
    background-color: aqua;
}

.label-and-logos {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 12px;
    padding-right: 20px;
}


/*input[type=radio]:checked {
    margin: 0px;
    background: #ff6a00;
}*/

.radio-custom input[type="radio"] + label::after {
    background-color: #d9534f;
}

.radio-custom input[type="radio"]:checked + label::before {
    border-color: #d9534f;
}

.radio-custom input[type="radio"]:checked + label::after {
    background-color: #d9534f;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    padding: 24px 20px 24px 20px;
}

.radio-label {
    display: flex;
}

.payment-option {
    height: 72px;
    background-color: #FFFFFF;
    margin-bottom: 16px;
    cursor: default;
}

/*.payment-option:hover{
                border-style: solid;
                border-width: 1px;
                border-color: #d9534f;
        }*/

.r_circle {
    align-self: center;
}

/*.payment-label {
    padding-left: 12px;
}*/

.align-items-end {
    display: flex;
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
    flex-wrap: wrap;
}

.amount {
    display: inline-flex;
    align-items: baseline;
}

    .amount h6 {
        padding-left: 8px;
    }

.payment-section {
    margin-bottom: 30px;
}

.download-icon1 {
    display: none;
}

.input-size-custom {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.btn-size-custom {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.label-regular2 {
    color: #2B2B2B;
    opacity: 0.7;
    font-family: Roboto;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    margin: 0px;
}

#dvHowToPayAcc2 {
    padding: 24px 20px 24px 12px;
}
.dvAcc2 {
    padding-left: 0px !important;
}


@media only screen and (max-width: 470px) {
    .ticker-wrap {
        font-size: xx-small;
        padding: 25px;
    }


    .form-spacing {
        margin-bottom: 15px;
    }
    h1 {
        color: #2B2B2B;
        font-family: Roboto;
        font-weight: bold;
        font-size: 18px;
        line-height: 36px;
        margin: 0px;
    }
    h2 {
        font-size: 14px;
        line-height: 28px;
    }

    h2.saylani {
        font-size: 10px;
        line-height: 16px;
    }

        h2.teach-the-world {
            display:none;
        }

    .btnCreate {
        display: block;
        width: 100%;
        font-size: 26px !important;
    }

    #img1Bill {
        width: 90px !important;
    }

    #dvHowToPayAcc2 {
        padding: 22px 14px 24px 9px;
    }
    .payment-label {
        font-size: 18px !important;
        line-height: 20px !important;
        font-weight: bold !important;
    }

    .label-and-content .label-regular {
        margin-bottom: 8px;
    }

    .label-regular {
        color: #2B2B2B;
        opacity: 0.7;
        font-family: Roboto;
        font-weight: normal;
        font-size: 18px;
        line-height: 10px;
        margin: 0px;
    }

    .label-regular2 {
        color: #2B2B2B;
        opacity: 0.7;
        font-family: Roboto;
        font-weight: normal;
        font-size: 18px;
        line-height: 24px;
        margin: 0px;
    }

    .label-and-content {
        margin-bottom: 24px;
    }
    .label-and-content2 {
        margin-bottom: 32px;
    }

    .due-date-bg {
        height: 36px;
        background-color: rgba(238, 103, 35, 0.15);
        padding-top: 14px;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 4px;
        width: fit-content;
        margin-bottom: 8px;
        margin-left: auto;
    }

    .download-icon {
        display: none;
    }

    .download-icon1 {
        display: block;
    }

    img.download-icon1 {
        height: 35px;
    }

    h3.title-invoice {
        color: #2B2B2B;
        font-family: Roboto;
        font-weight: bold;
        font-size: 20px;
        line-height: 24px
    }

    .input-size-custom {
        height: 30px;
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }

    .btn-size-custom {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }

    .download-button {
        float: right;
        margin-bottom: 16px;
        margin-top: 16px;
        margin-right: 16px;
    }

    .title-invoice {
        margin-top: 16px;
        margin-left: 16px;
    }

    .justify-content-between {
        /* display: flex; */
        flex-wrap: wrap-reverse;
        -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 12px;
    }
    .payment-status {
        background-color: rgba(238, 103, 35, 0.15);
        /* border-radius: 32px; */
        width: fit-content;
        padding: 2px 12px 2px 12px;
        margin-bottom: 25px;
    }
    .result {
        background-color: white;
        margin-bottom: 16px;
    }
    .invoice-bg:after {
        content: "";
        display: block;
        height: 8px;
        background-image: url(../Images/strip-long.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover;
    }
 /*   .header:after {
        content: "";
        display: block;
        height: 6px;
        background-image: url(../Images/strip.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover;
    }*/
    img.responsive {
        width: 50px;
        height:auto;
    }
    h4.support-text {
        padding-left: 0px;
        padding-top: 0px;
        display:none;
    }
    .payment-option {
        height: 55px;
        background-color: #FFFFFF;
        margin-bottom: 16px;
        cursor: default;
    }
    .flex-container {
        display: flex;
        justify-content: space-between;
        padding: 18px 16px 24px 16px;
    }
    .dvPayment{
        margin-left:-15px !important;
    }
    .logo-container {
        width: 90%;
    }
    #dvCenterHeading{
        display:none;
    }
    .container {
        width: 90%;
    }
    .donation-form-container {
        max-width: 90% !important;
    }
    .container-h1 {
        width: 90% !important;
    }
    .cta{
        height:55px;
    }
    .body-support {
        font-size: 10px;
    }
    .button-icon {
        height: 24px;
        display:none;
    }
    .dd-selected {
        padding: 18px 16px 24px 16px !important;
        font-weight: bold !important;
        font-size: 18px;
    }
    .result-status {
        padding: 16px 24px 16px 24px;
    }
    .transaction-details {
        display: inline;
    }
    .result-description {
        padding-left: 0px;
    }
    .responsive-saylani {
        width: 30%;
        max-height: 65px;
        height: 100%;
    }
    .responsive-ttwf {
        max-height: 80px !important;
    }
    .responsive-denning {
        max-height: 25px !important;
    }

    .banner {
        max-width: 90% !important;
        background-image: url('/Content/payment-utility-pages/images/baitussalam-banner-mobile-view.jpg') !important;
        max-height: 150px !important;
        margin-top: 16px !important;
    }
}


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

    .download-icon {
        display: none;
    }

    .download-icon1 {
        display: block;
    }   
}

@media only screen and (max-width: 813px) {
    .form-spacing {
        margin-bottom: 15px;
    }
    .btnCreate {
        display: block;
        width: 100%;
        font-size: 26px !important;
    }
    .invoice-bg {
        background-color: #FFFFFF;
        margin-bottom: 16px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .payment-method {
        margin-top: 16px;
    }
}



@media only screen and (max-width: 369px) {
    .form-spacing {
        margin-bottom: 15px;
    }
    h1 {
        color: #2B2B2B;
        font-family: Roboto;
        font-weight: bold;
        font-size: 16px;
        line-height: 32px;
        margin: 0px;
    }

    h2 {
        font-size: 12px;
        line-height: 26px;
    }
    h2.saylani {
        font-size: 9px;
        line-height: 18px;
    }
    .responsive-saylani {
        width: 28%;
        max-height: 65px;
        height: 100%;
    }

    .btnCreate {
        display: block;
        width: 100%;
        font-size: 24px !important;
    }
    .payment-label {
        font-size: 10px;
        line-height: 20px;
        font-weight: bold;
    }
    h3.title-invoice {
        color: #2B2B2B;
        font-family: Roboto;
        font-weight: bold;
        font-size: 16px;
        line-height: 20px
    }
    .dd-selected {
        padding: 18px 16px 24px 16px !important;
        font-weight: bold !important;
        font-size: 18px;
    }
    #img1Bill{
        width:90px !important;
    }
    #dvHowToPayAcc2 {
        padding: 24px 10px 24px 10px;
    }
    .banner {
        max-width: 90%;
        background-image: url('/Content/payment-utility-pages/images/baitussalam-banner-mobile-view.jpg');
        max-height: 150px;
        margin-top: 16px;
    }
}

.banks-list {
    display: flex;
    flex-wrap: wrap;
}

    .banks-list * {
        padding: 16px;
    }

.search-bank {
    width: 10%;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    font-family: Roboto;
    background-color: transparent;
    background-image: ~/Images/bank.png;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

    .search-bank:focus {
        width: 35%;
        outline-width: 0;
        border: none;
        border-bottom: 2px solid #EE6723;
    }


.dropbtn {
    background-color: #FFF;
    color: rgba(43, 43, 43, 0.7);
    padding: 16px;
    font-size: 16px;
    font-family: Roboto;
    border: none;
    cursor: pointer;
    margin: 0px;
}

.steps-heading {
    display: inline-block;
    margin-right: 32px;
}

.dropdown-bank-logo {
    padding-right: 8px;
}

.banks-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #FFF;
    min-width: 100%;
    overflow: auto;
    /*box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.2);*/
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 16px;
        font-family: Roboto;
    }

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}



.tab {
    overflow: hidden;
    border: none;
    background-color: #FFF;
    margin-top: 32px;
}

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
        font-family: Roboto;
        width: 50%;
        border-bottom: 1px solid #ccc;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            font-weight: bold;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            border-bottom: 2px solid #EE6723;
            color: #EE6723;
            font-weight: bold;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 32px;
    background-color: #fff;
    border-top: none;
}

.steps-list-internet li {
    padding-bottom: 24px;
    padding-left: 8px;
}

.li-active {
    color: #EE6723;
    font-weight: bold;
    cursor: default;
}

.li-inactive {
    color: rgba(43, 43, 43, 0.7);
    cursor: default;
    font-weight: normal;
}

    .li-inactive:hover {
        color: rgba(43, 43, 43, 1);
    }

.steps-list-internet li::marker {
    padding: 4px 12px;
    background-color: gray;
}



.slider-image {
    display: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

slider-active {
    display: block;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}




.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

.btn-warning-custom.btn-outline {
    color: #f8ac59;
}



    .btn-warning-custom.btn-outline:hover {
        color: #fff;
    }

.btn-warning-custom {
    background-color: #EE6723;
    border-color: #EE6723;
    color: #FFFFFF;
    font-weight: bold;
}

    .btn-warning-custom:hover,
    .btn-warning-custom:focus,
    .btn-warning-custom:active,
    .btn-warning-custom.active,
    .open .dropdown-toggle.btn-warning,
    .btn-warning-custom:active:focus,
    .btn-warning-custom:active:hover,
    .btn-warning-custom.active:hover,
    .btn-warning-custom.active:focus {
        background-color: #FB722D;
        border-color: #EE6723;
        color: #FFFFFF;
    }
ul.list-payment {
    padding-left: 22px;
    margin-bottom: 0px !important;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:bold;
    opacity:0.7;
}
ul.list-payment > li::marker {
    color: #EE6723;
}
    ul.list-payment > li > a:hover {
        color: #EE6723;
    }
li > a.disabled:hover {
    color: #2B2B2B !important;
    cursor:default;
}
    ul.list-payment > li {
        padding-bottom: 4px;
        padding-top: 4px;
    }
ul.list-payment > li > a{
    color: #2B2B2B;
}
.support {
    padding-top: 30px;
    display: flex;
    align-items: center;
}
a.h4{
    color:blueviolet;
    text-decoration:underline;
}
.banner {
    max-width: 75%;
    margin:auto;
    background-image: url('/Content/payment-utility-pages/images/baitussalam-banner-desktop-view.jpg');
    max-height: 180px;
    height: 100%;
    margin-top: 20px;
    /*margin-bottom: 20px;*/
    background-size: cover;
    background-repeat: round;
}