@media (min-width: 320px) {
    .biller-detail .container,
    .biller-benefit .container {
        width: 100% !important;
    }

    .biller-detail .inner-box {
        background: #FFFFFF;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
        animation: fadeOutScale linear 500ms;
    }
}

@media (min-width: 375px) {
    .country-code-box .country-flag,
    .title-birth .title-div {
        -ms-flex: 0 0 140px;
        flex: 0 0 140px;
        max-width: 140px;
    }

    .country-code-list img,
    #country-code img {
        margin-right: 8px;
    }
}

@media (min-width: 394px) {
}

@media (min-width: 350px) {
    .pymt-method-inner {
        max-width: 345px;
        margin: 0 auto 20px;
    }
}

@media (min-width: 576px) {
    .adv-info {
        background-image: url(../assets/adv-info-bg.png);
    }

    .adv-info-inner {
        padding: 20px 10px;
    }

    .container {
        max-width: 100%;
    }

    .modal-dialog {
        max-width: 75%;
        margin: auto auto;
    }
}

@media (min-width: 600px) {
}

@media (min-width: 675px) {
    .pymt-method-inner {
        max-width: 48%;
        margin-right: 5px;
        margin-left: 5px;
    }

    .payment-method-flex {
        justify-content: space-between;
    }
}

@media (min-width: 768px) {
    .qr-thumbnail p {
        font-size: 15px;
    }

    .pymt-hist.hist-detail .result-row {
        font-size: 15px;
    }
    /*img.img-qr {
        width: 80%;
    }*/
    .qr-thumbnail {
        width: 55%;
    }

    .user-consent .legal-pg {
        height: 28vh;
    }

    .user-consent .footer-accept-btn {
        width: 30%;
    }
    .enter-fav-name {
        width: 70%;
    }
    .easypoints-pymt-modal .ant-modal-content {
        padding: 1em 1.5em 2em;
    }
    .my .agent-welcome-content {
        padding: 75px 75px 0;
    }

    .ant-picker-date-panel {
        width: 335px;
    }

    .resend-code-modal .mx-auto {
        max-width: 80%;
    }

    .my .benefit-screen .benefit-step h3 {
        font-size: 15px;
    }

    .ant-select-dropdown .biller-search.ant-select-item, .biller-search-dropdown, .no-result-biller-search {
        min-width: 60vw;
    }

    .ant-collapse-header {
        display: inline-block;
    }

    .email-instruction,
    .payment-pending {
        max-width: 75%;
    }

    footer .list-block {
        align-items: start;
    }

    footer .about-inner {
        justify-content: start;
        flex-wrap: wrap;
    }
    .about-us-block {
        padding: 0 40px;
        text-align: center;
        justify-content:center;
    }
    footer .footer-account {
        flex-wrap: wrap;
    }
    .redeem-block, .easypont-payment {
        grid-template-columns: 80% 20%;
    }

    .generated-link .generated-value {
        width: auto;
        padding: 5px 35px;
    }

    .link-value {
        width: auto;
    }

    .country-prefix {
        grid-template-columns: 46% 52%;
    }

    .grid {
        display: grid;
        grid-template-columns: 49% 49%;
        column-gap: 15px;
    }

    .category-block {
        padding: 30px 0;
        position: relative;
    }

    .reset-pwd-fail-inner .form-btn {
        max-width: 65%;
    }

    .saved-card .container {
        min-height: 75vh;
    }

    .biller-benefit .container {
        min-height: auto !important;
    }

    .subheader-inner {
        justify-content: space-between;
        margin-bottom: 20px;
        flex-direction: row;
    }

    .promo-biller .promo-value {
        background: url(../assets/promotion-icon.svg) no-repeat 36px -2px;
        width: 116px;
        height: 77px;
    }

    .promo-price span,
    .my .promo-price span {
        top: 70%;
        left: 49%;
        font-family: "NBlack", Arial, Helvetica, sans-serif !important;
        font-size: 80%;
    }

    .list-view .master-biller-name,
    .list-view .agent-trans-amount {
        text-align: right;
    }

    .m-upgrade-agent {
        display: none;
    }

    .pagination-div {
        justify-content: space-between;
    }

    .show-record {
        margin-bottom: 0;
    }

    .my .show-record {
        width: 30%;
        font-size: 13px;
    }

    .other-pg.legal-pg .container {
        max-width: 70%;
        animation: fadeOpacity linear 500ms;
    }

    .generated-link .generated-btn,
    .referral-code .code-box {
        width: 65%;
    }

    .referral-adv-icon img,
    .referral-adv-icon svg {
        width: 350px;
    }

    .other-pg.biller-register-result .form-btn {
        max-width: 30%;
    }

    .benefit-screen .benefit-info-div {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .benefit-info-inner {
        text-align: left;
    }

    .biller-benefit.other-pg .container {
        padding: 30px 0px 0px;
    }

    .biller-register-result.other-pg .container {
        padding: 25px 20px;
    }

    .promo-agent-value {
        float: right;
    }

    .scanner-main-box {
        width: 70%;
    }

    .biller-detail .inner-box {
        border: 1px solid #DDDDDD;
        border-radius: 10px;
    }

    .biller-detail .biller-pymt .ant-radio-group {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 10px;
    }

    .biller-detail .ant-radio-group {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .biller-field-inner {
        display: grid;
        grid-template-columns: 49% 49%;
        grid-gap: 10px;
    }

    .biller-detail .container {
        max-width: 85%;
    }

    .upgrade-agent,
    .biller-benefit {
        background-color: var(--theme-color);
        background-image: url(../assets/sign-in-bg-other.png); /* fallback */
        background-image: url(../assets/sign-in-bg-other.png), radial-gradient(circle, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1));
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 85vh;
        background-position: center;
    }

    .main-company .upgrade-agent,
    .main-company .biller-benefit {
        background-color: transparent;
        background-image: url(../assets/upgrade-agent-bg.png);
        background-position: center;
    }

    .other-pg .form-btn,
    .biller-detail .form-btn {
        max-width: 45%;
        animation: fadeOutScale linear 500ms;
    }

    .other-pg .container {
        max-width: 85%;
        background: #FFFFFF;
        box-shadow: 0px 3px 6px #DBDBDB;
        border: 1px solid #EDEFF2;
        border-radius: 10px;
        padding: 30px 20px;
    }

    .other-pg .container, .account-sec .container {
        animation: fadeOutScale linear 700ms;
    }

    .category-pg {
        min-height: 90vh;
    }

        .category-pg .flow-biller {
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            max-width: 25%;
        }

    .reset-pwd-success .ant-row {
        background: #fff;
        border-radius: 20px;
        padding: 30px 50px;
    }

    .reset-pwd .reset-pwd-inner {
        background: #fff;
        border-radius: 20px;
        padding: 30px;
    }

    .account-sec.reset-pwd-success .container {
        max-width: 60%;
    }

    .sign-in-left {
        display: block;
        padding: 30px 20px 30px 30px;
    }

    .sign-in-right {
        padding: 30px 15px;
    }

    .account-sec {
        background-color: var(--theme-color);
        background-image: url(../assets/sign-in-bg-other.png); /* fallback */
        background-image: url(../assets/sign-in-bg-other.png), radial-gradient(circle, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1));
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        min-height: 80vh;
    }

    .main-company .account-sec {
        background-color: transparent;
        background-image: url(../assets/sign-in-bg.png);
        background-position: center;
    }

    .are-you-biller {
        font-size: 14px;
        padding: 8px;
    }

        .are-you-biller h6 {
            font-size: 16px;
        }

    .cat-icon object,
    .title-bar svg,
    .cat-icon img {
        display: block;
    }

    .flow-biller-box {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .title-bar .see-all.push-left {
        right: 75px;
    }

    .category-list-inner .ant-col-md-2 {
        flex: 0 0 10%;
        max-width: 10%;
    }
    /*.category-block:last-child {
        margin-bottom: 30px;
    }*/
    .ant-layout-footer {
        padding: 40px 0 30px;
        border-top: none;
    }

    footer .list-block {
        justify-content: space-between;
    }

    footer .footer-logo {
        display: block;
    }

    footer .footer-account {
        width: 26%;
    }

    footer .category-list {
        width: 22%;
    }

    footer .footer-social {
        width: 21%;
    }

    footer .footer-download {
        width: 17%;
    }

    footer .footer-about {
        width: 22%;
    }

    footer .copyright-block {
        align-items: center;
        justify-content: center;
    }

    footer .policy-list {
        margin-top: 0;
    }

        footer .policy-list .ant-btn {
            /*line-height: 1.5;*/
            padding-left: 10px;
        }

    footer .category-list {
        padding-top: 0;
    }

    footer .social-link {
        margin-top: 0;
    }

    footer .user-type-enter {
        padding-left: 15px;
    }

    .search-block {
        background-image: url('../assets/other-dektop-search-bg.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }

    .main-company .search-block {
        background-image: url('../assets/search-desktop-bg-color.png');
        background-repeat: no-repeat;
    }

    .search-block .container {
        max-width: 60%;
    }

    .country-side-menu .ant-drawer-content-wrapper {
        position: absolute;
        width: 60% !important;
        height: auto;
        background: #ffffff;
        z-index: 2222;
        padding: 30px 20px 20px;
        box-shadow: -5px 0px 10px rgb(0 0 0 / 10%);
        overflow-y: unset;
        transform: translate(-50%, -9%);
        top: 9%;
        left: 50%;
        border-radius: 10px;
    }

    .ant-drawer-right.ant-drawer-open {
        transition: none;
    }

    .ant-drawer > .ant-drawer-mask {
        height: 100%;
        transition: opacity .3s linear,height .05s linear .3s !important;
    }

    .ant-drawer > .ant-drawer-content-wrapper {
        transition: none !important;
        animation: none !important;
    }

    .close-country-bar {
        max-width: 13px;
    }

    .header-sec .country-menu-bar .image-cropper {
        display: block;
    }

    .header-sec .top-signin,
    .header-sec .country-menu-bar .user-acc-icon {
        display: flex;
    }

    .d-upgrade-agent {
        display: block;
    }

        .d-upgrade-agent .agent-btn {
            display: inline-block;
            width: auto;
        }
    /*.side-become-agent {
        display: none;
    }*/
    .user-side-menu .ant-drawer-content-wrapper {
        width: 50% !important;
    }

    .container {
        max-width: 90%;
    }

    .modal-dialog {
        top: 20%;
        max-width: 50%;
    }

    #loader {
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #content {
        left: 50%;
    }

    .my-account .country-prefix {
        grid-template-columns: 27% 73%;
    }

    .biller-register .country-prefix {
        grid-template-columns: 50% 50%;
    }
}

@media (min-width: 992px) {
    .user-consent .legal-pg {
        height: 25vh;
    }
    .easypoints-pymt-modal .ant-modal, .legal-modal .ant-modal {
        width: 53% !important;
    }
    .my .show-record {
        width: 40%;
    }

    .register-enable img {
        width: 28px;
    }

    .my .account-sec .benefit-dots {
        transform: translateY(12%);
    }

    .my .biller-benefit .benefit-dots {
        transform: translateY(18%);
    }

    .user-side-menu .ant-drawer-content-wrapper {
        width: 30% !important;
    }

    .generated-link .generated-btn,
    .referral-code .code-box {
        width: 55%;
    }

    .country-prefix {
        grid-template-columns: 38% 60%;
    }

    .biller-register .country-prefix {
        grid-template-columns: 44% 56%;
    }

    .receipt-box-agent .country-prefix {
        grid-template-columns: 28% 72%;
    }

    .adjust-slideshow {
        height: calc(50vh - 25px);
    }

    .benefit-screen .benefit-info-div {
        padding: 30px 75px;
    }

    .receipt-box-agent {
        max-width: 80%;
    }

    .biller-detail .ant-radio-group {
        display: grid;
        grid-template-columns: 32.2% 32.2% 32.2%;
    }

    .biller-detail .container {
        max-width: 55%;
    }

    .receipt-box-agent .ant-radio-group {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 10px;
    }

    .upgrade-agent .ant-col-lg-12:first-child {
        padding-right: 20px;
    }

    .category-pg .flow-biller {
        -ms-flex: 0 0 14.25%;
        flex: 0 0 14.25%;
        max-width: 14.25%;
    }

    .other-pg .container {
        max-width: 75%;
    }

    .container {
        max-width: 80%;
    }
}

@media (min-width: 1023px) {

    .user-consent .legal-pg {
        height: 22vh;
    }

    .biller-register .country-prefix {
        grid-template-columns: 53% 47%;
    }

    footer .list-block {
        align-items: start;
    }

    footer .about-inner {
        /*justify-content: space-around;*/
        flex-wrap: nowrap;
    }
    /*footer .cat-list-group li {
        width: 165px;
    }*/
    footer .footer-account {
        /*justify-content: space-evenly;*/
        flex-wrap: nowrap;
    }

    footer .user-type-enter {
        width: 100%;
        padding-left: 35px;
    }
}

@media (min-width: 1279px) {
    .other-pg .container {
        max-width: 60%;
    }

    .account-sec .container {
        max-width: 65%;
    }

    .my-account .country-prefix {
        grid-template-columns: 22% 78%;
    }

    .biller-register .country-prefix {
        grid-template-columns: 43% 57%;
    }

    .ant-back-top {
        right: 7%;
    }
    .country-side-menu .ant-drawer-content-wrapper {
        transform: translate(-50%, -20%);
        top: 20%;
    }
}

@media (min-width: 1400px) {
    .pymt-method-inner {
        padding: 3.5em 2em;
        margin: 0 5px 28px;
    }
    .adjust-slideshow {
        height: calc(45vh - 25px);
    }

    .generated-link .generated-btn,
    .referral-code .code-box {
        width: 45%;
    }

    .container {
        max-width: 70%;
    }

    .country-prefix {
        grid-template-columns: 41.5% 58.5%;
    }

    .account-sec .container {
        max-width: 55%;
    }

    .biller-detail .container {
        max-width: 52%;
    }

    .other-pg .form-btn,
    .biller-detail .form-btn {
        max-width: 35%;
    }

    .my-account .country-prefix {
        grid-template-columns: 18% 82%;
    }

    .biller-register .country-prefix {
        grid-template-columns: 39% 61%;
    }
}

@media (min-width: 1900px) {
    .user-consent .legal-pg {
        height: 27vh;
    }

    .email-instruction,
    .payment-pending {
        max-width: 65%;
    }

    .email-instruction-inner {
        width: 95%;
    }

    .ant-select-item-option-content .search-biller-name {
        font-size: 16px;
    }

    .ant-select-item-option-content {
        padding: 8px 1px;
    }

        .biller-search .search-biller-logo {
            width: 45px;
        }

    .biller-register .country-prefix {
        grid-template-columns: 29% 71%;
    }

    .user-side-menu .side-menu-logo {
        padding: 15px 20px;
        height: 80px;
    }
    .country-prefix {
        grid-template-columns: 32.5% 67.5%;
    }
    .my-account .country-prefix {
        grid-template-columns: 14% 86%;
    }
}


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
    .inner-content {
        padding: 3em 0;
    }
}

@media (max-width: 767.9px) {

    .country-flag-click {
        display: none;
    }

    .pagination-div {
        flex-direction: column;
    }

    .benefit-info-inner {
        margin-bottom: 15px;
    }

    .ant-select-dropdown {
        max-width: 91%;
        left: 5% !important;
    }

        .ant-select-dropdown .biller-search.ant-select-item, .biller-search-dropdown, .no-result-biller-search {
            min-width: 90vw;
        }

    footer .footer-about,
    footer .category-list {
        width: 100%;
    }

    footer .footer-social,
    footer .footer-download {
        width: 50%;
    }

    footer .list-block,
    footer .about-inner {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .title-bar .arrow-left,
    .title-bar .arrow-right {
        display: none !important;
    }

    .ant-layout-content {
        background: #fff;
    }

    .inner-content.biller-detail {
        padding: 0;
    }

    .biller-detail .form-btn.continue-btn {
        max-width: 90%;
        margin: 5px 0 30px;
    }

    .biller-detail .inner-box.biller-pymt {
        box-shadow: none;
    }

}

@media (max-width: 576px) {
    .register-enable {
        display: grid;
        grid-template-columns: 12% 88%;
    }
    .ant-picker-date-panel .ant-picker-body {
        padding: 0;
    }

    .ant-picker-date-panel {
        width: 100%;
    }

        .ant-picker-date-panel .ant-picker-content {
            width: 320px;
        }

    .ant-picker-panel-container .ant-picker-panels {
        display: flex;
        flex-direction: column;
    }

    .resend-code-modal .ant-modal-body {
        padding: 20px 5px 0;
    }

    .ant-select-item-option-content {
        max-width: 320px;
    }

    .ant-pagination-options {
        display: block;
        margin-top: 10px;
        text-align: center;
    }

    footer .policy-list {
        margin-top: 10px;
    }
}

@media (max-width: 475px) {
    .register-enable {
        display: grid;
        grid-template-columns: 14% 86%;
    }
}

@media (max-width: 400px) {
    .country-code-box .country-flag {
        -ms-flex: 0 0 45%;
        flex: 0 0 45%;
        max-width: 45%;
        width: 100%;
    }

    .country-code-box .ph-no-box {
        -ms-flex: 0 0 55%;
        flex: 0 0 55%;
        max-width: 55%;
        width: 100%;
    }
}

@media (max-width: 374.9px) {
    .country-code-box .country-flag {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        width: 100%;
    }

    .country-code-box .ph-no-box {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        width: 100%;
    }

    .header-sec .top-signin-btn {
        -ms-flex: 0 0 37%;
        flex: 0 0 37%;
        max-width: 37%;
    }

    .en .header-sec .top-signin-btn {
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 35%;
    }

    .header-sec .country-menu-bar {
        -ms-flex: 0 0 29%;
        flex: 0 0 29%;
        max-width: 29%;
    }

    .header-sec .top-logo,
    footer .footer-logo {
        max-width: 100px;
    }

   /* form galay fold */

    .container {
        width: 87% !important;
    }

    .header-sec .top-logo {
        width: 100%;
    }

    .en .header-sec .top-logo {
        max-width: 105px;
    }

    .header-sec .toggle-bar {
        max-width: 20px;
    }

    .en .header-sec .toggle-bar {
        max-width: 25px;
    }

    .country-prefix {
        grid-template-columns: 52% 45%;
    }

    .biller-register .country-prefix {
        grid-template-columns: 50% 50%;
    }

    .adv-info {
        background-size: 100% 100%;
    }

    .user-side-menu .side-menu-logo {
        background-size: 135%!important;
    }

    .are-you-biller {
        font-size: 14px;
    }
    .sign-in-right .remember-password {
        font-size: 12px;
    }

    .category-pg .flow-biller {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        width: 100%;
    }
    .inner-content.biller-detail, .inner-content {
        padding: 2em 0;
    }
    .pymt-method {
        left: -21px;
    }
    .biller-benefit .icon-div {
        width: 95%;
    }
    .icon-div .benefit-step h3 {
        font-size: 13px;
    }
    .biller-benefit .benefit-dots {
        transform: translateY(12%);
    }
    .inner-box {
        padding-bottom: 15px;
    }
    .inner-box.biller-info {
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
    }
    .method-left .pymt-method-name {
        font-size: 13.5px;
    }
    .ant-pagination {
        text-align: center;
    }

    .ant-pagination li {
        margin-bottom: 5px;
    }
    .ant-picker-date-panel .ant-picker-content {
        width: 255px;
    }
}

@media all and (orientation: landscape) {
    .user-menu li img {
        width: 30px;
        height: auto;
    }
}

@media (min-width: 600px) and (max-width: 767px) {
    .footer-download .app-img {
        grid-template-columns: 33% 33% 33%;
    }
}