@media only screen and (min-width: 1680px) and (max-width: 1780px) {

    .cust-container-lg,
    .cust-container-sm {
        max-width: 1530px;
    }

    :root {
        --h1-font-size: 35px;
        --h1-line-height: 40px;
        --h1-lspacing: 0;
        --h2-font-size: 27px;
        --h2-line-height: 33px;
        --h2-lspacing: 0;
        --h3-font-size: 24px;
        --h3-line-height: 34px;
        --h3-lspacing: 0;
        --h4-font-size: 21px;
        --h4-line-height: 27px;
        --h4-lspacing: 0;
        --h5-font-size: 19px;
        --h5-line-height: 26px;
        --h5-lspacing: 0.1px;
        --h6-font-size: 18px;
        --h6-line-height: 25px;
        --h6-lspacing: 0px;
        --md-font-size: 16px;
        --md-line-height: 21px;
        --md-lspacing: 0px;
        --sm-font-size: 14px;
        --sm-line-height: 19px;
        --sm-lspacing: 0px;
        --xsm-font-size: 13px;
        --xsm-line-height: 18px;
        --xsm-lspacing: 0px;
        --body-font-size: 15px;
        --body-line-height: 20px;
        --body-lspacing: 0px;
        --btn-font-size: 13px;
        --btn-line-height: 20px;
        --btn-lspacing: 0px;
    }

    .theme-btn--blue,
    .theme-btn--dark,
    .theme-btn--orange,
    .theme-btn--default,
    .theme-btn--green,
    .theme-btn--greendark,
    .theme-btn--red,
    .theme-btn--redlight,
    .delete-btn-td a,
    .edit-update-td a,
    .contr-refund-modal .modal-footer input.theme-btn--blue {
        padding: 4px 12px;
    }

    .wrap-cust-bg-page {
        max-width: 1150px;
    }
}


@media only screen and (min-width: 1600px) and (max-width: 1679px) {

    .cust-container-lg,
    .cust-container-sm {
        max-width: 1490px;
    }

    .wrap-cust-bg-page {
        max-width: 1050px;
    }

    :root {
        --h1-font-size: 35px;
        --h1-line-height: 40px;
        --h1-lspacing: 0;
        --h2-font-size: 27px;
        --h2-line-height: 33px;
        --h2-lspacing: 0;
        --h3-font-size: 24px;
        --h3-line-height: 34px;
        --h3-lspacing: 0;
        --h4-font-size: 21px;
        --h4-line-height: 27px;
        --h4-lspacing: 0;
        --h5-font-size: 19px;
        --h5-line-height: 26px;
        --h5-lspacing: 0.1px;
        --h6-font-size: 18px;
        --h6-line-height: 25px;
        --h6-lspacing: 0px;
        --md-font-size: 16px;
        --md-line-height: 21px;
        --md-lspacing: 0px;
        --sm-font-size: 14px;
        --sm-line-height: 19px;
        --sm-lspacing: 0px;
        --xsm-font-size: 13px;
        --xsm-line-height: 18px;
        --xsm-lspacing: 0px;
        --body-font-size: 15px;
        --body-line-height: 20px;
        --body-lspacing: 0px;
        --btn-font-size: 13px;
        --btn-line-height: 20px;
        --btn-lspacing: 0px;
    }

    .theme-btn--blue,
    .theme-btn--dark,
    .theme-btn--orange,
    .theme-btn--default,
    .theme-btn--green,
    .theme-btn--greendark,
    .theme-btn--red,
    .theme-btn--redlight,
    .delete-btn-td a,
    .edit-update-td a,
    .contr-refund-modal .modal-footer input.theme-btn--blue {
        padding: 2px 10px;
    }

    .cust-btn-sm,
    .delete-btn-td a,
    .edit-update-td a {
        font-size: 11px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {

    .cust-table table th,
    .cust-table table td,
    .cust-common-table-fix-header table th,
    .cust-common-table-fix-header table td,
    .ticket-detail-box table th,
    .ticket-detail-box table td {
        padding: 6px;
    }

    .wrap-cust-bg-page {
        max-width: 1050px;
    }

    .cust-container-lg,
    .cust-container-sm {
        max-width: 1310px;
    }

    :root {
        --h1-font-size: 35px;
        --h1-line-height: 40px;
        --h1-lspacing: 0;
        --h2-font-size: 27px;
        --h2-line-height: 33px;
        --h2-lspacing: 0;
        --h3-font-size: 24px;
        --h3-line-height: 34px;
        --h3-lspacing: 0;
        --h4-font-size: 21px;
        --h4-line-height: 27px;
        --h4-lspacing: 0;
        --h5-font-size: 19px;
        --h5-line-height: 26px;
        --h5-lspacing: 0.1px;
        --h6-font-size: 18px;
        --h6-line-height: 25px;
        --h6-lspacing: 0px;
        --md-font-size: 16px;
        --md-line-height: 21px;
        --md-lspacing: 0px;
        --sm-font-size: 14px;
        --sm-line-height: 19px;
        --sm-lspacing: 0px;
        --xsm-font-size: 13px;
        --xsm-line-height: 18px;
        --xsm-lspacing: 0px;
        --body-font-size: 15px;
        --body-line-height: 20px;
        --body-lspacing: 0px;
        --btn-font-size: 13px;
        --btn-line-height: 20px;
        --btn-lspacing: 0px;
    }

    .theme-btn--blue,
    .theme-btn--dark,
    .theme-btn--orange,
    .theme-btn--default,
    .theme-btn--green,
    .theme-btn--greendark,
    .theme-btn--red,
    .theme-btn--redlight,
    .delete-btn-td a,
    .edit-update-td a,
    .contr-refund-modal .modal-footer input.theme-btn--blue {
        padding: 3px 10px;
    }

    .cust-btn-sm,
    .delete-btn-td a,
    .edit-update-td a {
        font-size: 11px;
    }

    .form-control,
    select.form-control,
    select,
    textarea,
    .table.o-and-m-table-first input[type="text"] {
        padding: 3px 10px;
    }
}

@media only screen and (min-width: 1360px) and (max-width: 1399px) {
    .wrap-cust-bg-page {
        max-width: 1050px;
    }

    .cust-container-lg,
    .cust-container-sm {
        max-width: 1240px;
    }

    :root {
        --h1-font-size: 35px;
        --h1-line-height: 40px;
        --h1-lspacing: 0;
        --h2-font-size: 27px;
        --h2-line-height: 33px;
        --h2-lspacing: 0;
        --h3-font-size: 24px;
        --h3-line-height: 34px;
        --h3-lspacing: 0;
        --h4-font-size: 21px;
        --h4-line-height: 27px;
        --h4-lspacing: 0;
        --h5-font-size: 19px;
        --h5-line-height: 26px;
        --h5-lspacing: 0.1px;
        --h6-font-size: 18px;
        --h6-line-height: 25px;
        --h6-lspacing: 0px;
        --md-font-size: 16px;
        --md-line-height: 21px;
        --md-lspacing: 0px;
        --sm-font-size: 14px;
        --sm-line-height: 19px;
        --sm-lspacing: 0px;
        --xsm-font-size: 13px;
        --xsm-line-height: 18px;
        --xsm-lspacing: 0px;
        --body-font-size: 15px;
        --body-line-height: 20px;
        --body-lspacing: 0px;
        --btn-font-size: 13px;
        --btn-line-height: 20px;
        --btn-lspacing: 0px;
    }
}

@media only screen and (min-width: 1280px) and (max-width: 1359px) {
    .wrap-cust-bg-page {
        max-width: 1050px;
    }

    .cust-container-lg,
    .cust-container-sm {
        max-width: 1170px;
    }

    :root {
        --h1-font-size: 35px;
        --h1-line-height: 40px;
        --h1-lspacing: 0;
        --h2-font-size: 27px;
        --h2-line-height: 33px;
        --h2-lspacing: 0;
        --h3-font-size: 24px;
        --h3-line-height: 34px;
        --h3-lspacing: 0;
        --h4-font-size: 21px;
        --h4-line-height: 27px;
        --h4-lspacing: 0;
        --h5-font-size: 19px;
        --h5-line-height: 26px;
        --h5-lspacing: 0.1px;
        --h6-font-size: 18px;
        --h6-line-height: 25px;
        --h6-lspacing: 0px;
        --md-font-size: 16px;
        --md-line-height: 21px;
        --md-lspacing: 0px;
        --sm-font-size: 14px;
        --sm-line-height: 19px;
        --sm-lspacing: 0px;
        --xsm-font-size: 13px;
        --xsm-line-height: 18px;
        --xsm-lspacing: 0px;
        --body-font-size: 15px;
        --body-line-height: 20px;
        --body-lspacing: 0px;
        --btn-font-size: 13px;
        --btn-line-height: 20px;
        --btn-lspacing: 0px;
    }

    .theme-btn--blue,
    .theme-btn--dark,
    .theme-btn--orange,
    .theme-btn--default,
    .theme-btn--green,
    .theme-btn--greendark,
    .theme-btn--red,
    .theme-btn--redlight,
    .delete-btn-td a,
    .edit-update-td a,
    .contr-refund-modal .modal-footer input.theme-btn--blue {
        padding: 3px 10px;
    }

    .form-control,
    select.form-control,
    select,
    textarea,
    .table.o-and-m-table-first input[type="text"] {
        font-size: 13px !important;
        line-height: 19px !important;
        letter-spacing: var(--sm-lspacing) !important;
        padding: 5px 10px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1279px) {
    .wrap-cust-bg-page {
        max-width: 1050px;
    }

    .cust-container-lg,
    .cust-container-sm {
        max-width: 1170px;
    }

    :root {
        --h1-font-size: 35px;
        --h1-line-height: 40px;
        --h1-lspacing: 0;
        --h2-font-size: 27px;
        --h2-line-height: 33px;
        --h2-lspacing: 0;
        --h3-font-size: 24px;
        --h3-line-height: 34px;
        --h3-lspacing: 0;
        --h4-font-size: 21px;
        --h4-line-height: 27px;
        --h4-lspacing: 0;
        --h5-font-size: 19px;
        --h5-line-height: 26px;
        --h5-lspacing: 0.1px;
        --h6-font-size: 18px;
        --h6-line-height: 25px;
        --h6-lspacing: 0px;
        --md-font-size: 16px;
        --md-line-height: 21px;
        --md-lspacing: 0px;
        --sm-font-size: 14px;
        --sm-line-height: 19px;
        --sm-lspacing: 0px;
        --xsm-font-size: 13px;
        --xsm-line-height: 18px;
        --xsm-lspacing: 0px;
        --body-font-size: 15px;
        --body-line-height: 20px;
        --body-lspacing: 0px;
        --btn-font-size: 13px;
        --btn-line-height: 20px;
        --btn-lspacing: 0px;
    }

    .theme-btn--blue,
    .theme-btn--dark,
    .theme-btn--orange,
    .theme-btn--default,
    .theme-btn--green,
    .theme-btn--greendark,
    .theme-btn--red,
    .theme-btn--redlight,
    .delete-btn-td a,
    .edit-update-td a,
    .contr-refund-modal .modal-footer input.theme-btn--blue {
        padding: 3px 10px;
    }

    .form-control,
    select.form-control,
    select,
    textarea,
    .table.o-and-m-table-first input[type="text"] {
        font-size: 13px !important;
        line-height: 19px !important;
        letter-spacing: var(--sm-lspacing) !important;
        padding: 5px 10px;
    }
}


@media only screen and (min-width: 992px) and (max-width: 1199px) {

    .cust-container-lg,
    .cust-container-sm {
        max-width: 95%;
    }

    :root {
        --h1-font-size: 35px;
        --h1-line-height: 40px;
        --h1-lspacing: 0;
        --h2-font-size: 27px;
        --h2-line-height: 33px;
        --h2-lspacing: 0;
        --h3-font-size: 24px;
        --h3-line-height: 34px;
        --h3-lspacing: 0;
        --h4-font-size: 21px;
        --h4-line-height: 27px;
        --h4-lspacing: 0;
        --h5-font-size: 19px;
        --h5-line-height: 26px;
        --h5-lspacing: 0.1px;
        --h6-font-size: 18px;
        --h6-line-height: 25px;
        --h6-lspacing: 0px;
        --md-font-size: 16px;
        --md-line-height: 21px;
        --md-lspacing: 0px;
        --sm-font-size: 14px;
        --sm-line-height: 19px;
        --sm-lspacing: 0px;
        --xsm-font-size: 13px;
        --xsm-line-height: 18px;
        --xsm-lspacing: 0px;
        --body-font-size: 15px;
        --body-line-height: 20px;
        --body-lspacing: 0px;
        --btn-font-size: 13px;
        --btn-line-height: 20px;
        --btn-lspacing: 0px;
    }

    .cust-table table th,
    .cust-table table td,
    .cust-common-table-fix-header table th,
    .cust-common-table-fix-header table td {
        padding: 6px;
    }

    .theme-btn--blue,
    .theme-btn--dark,
    .theme-btn--orange,
    .theme-btn--default,
    .theme-btn--green,
    .theme-btn--greendark,
    .theme-btn--red,
    .theme-btn--redlight,
    .delete-btn-td a,
    .edit-update-td a,
    .contr-refund-modal .modal-footer input.theme-btn--blue {
        padding: 3px 10px;
    }

    .btn-box button,
    .btn-box input,
    .btn-box a {
        margin-bottom: 5px;
        margin-right: 5px;
    }

    .form-control,
    select.form-control,
    select,
    textarea,
    .table.o-and-m-table-first input[type="text"] {
        font-size: 15px !important;
        line-height: 25px !important;
        letter-spacing: var(--sm-lspacing) !important;
        padding: 5px 10px;
    }

    .cust-serv-header .phed-logo {
        width: 66px;
    }

    .wrap-cust-bg-page.consumer-page .cust-form-row .cust-form-input {
        width: 44%;
    }
}

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

    .cust-container-lg,
    .cust-container-sm {
        max-width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }

    :root {
        --h1-font-size: 30px;
        --h1-line-height: 40px;
        --h1-lspacing: 0;
        --h2-font-size: 25px;
        --h2-line-height: 33px;
        --h2-lspacing: 0;
        --h3-font-size: 20px;
        --h3-line-height: 30px;
        --h3-lspacing: 0;
        --h4-font-size: 19px;
        --h4-line-height: 25px;
        --h4-lspacing: 0;
        --h5-font-size: 15px;
        --h5-line-height: 22px;
        --h5-lspacing: 0px;
        --h6-font-size: 14px;
        --h6-line-height: 20px;
        --h6-lspacing: 0px;
        --md-font-size: 14px;
        --md-line-height: 20px;
        --md-lspacing: 0px;
        --sm-font-size: 14px;
        --sm-line-height: 19px;
        --sm-lspacing: 0px;
        --xsm-font-size: 13px;
        --xsm-line-height: 18px;
        --xsm-lspacing: 0px;
        --body-font-size: 14px;
        --body-line-height: 19px;
        --body-lspacing: 0px;
        --btn-font-size: 13px;
        --btn-line-height: 20px;
        --btn-lspacing: 0px;
    }

    .cust-table table th,
    .cust-table table td,
    .cust-common-table-fix-header table th,
    .cust-common-table-fix-header table td {
        padding: 6px;
    }

    .theme-btn--blue,
    .theme-btn--dark,
    .theme-btn--orange,
    .theme-btn--default,
    .theme-btn--green,
    .theme-btn--greendark,
    .theme-btn--red,
    .theme-btn--redlight,
    .delete-btn-td a,
    .edit-update-td a,
    .contr-refund-modal .modal-footer input.theme-btn--blue {
        padding: 2px 10px;
    }

    .cust-serv-header .phed-logo {
        width: 66px;
    }

    .form-control,
    select.form-control,
    select,
    textarea,
    .table.o-and-m-table-first input[type="text"] {
        font-size: 15px !important;
        line-height: 25px !important;
        letter-spacing: var(--sm-lspacing) !important;
        padding: 5px 10px;
    }

    .btn-box button,
    .btn-box input,
    .btn-box a {
        margin-bottom: 5px;
        margin-right: 5px;
    }

    .wrap-cust-bg-page.consumer-page .cust-form-row .cust-form-input {
        width: 100%;
    }

    .cust-serv-header {
        justify-content: center;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .wrap-cust-bg-page {
        padding: 20px 20px;
        border-radius: 30px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    h1.cust-serv-heading.heading-h4 {
        order: 3;
        width: 100%;
        margin-bottom: 0;
        margin-top: 11px;
        padding-top: 11px;
        background: #d6e3f2;
        padding-bottom: 13px;
        border-radius: 10px;
    }

    .toplink-box a {
        font-size: var(--sm-font-size);
        line-height: var(--sm-line-height);
        letter-spacing: var(--sm-lspacing);
    }

    .wrap-cust-bg-page.consumer-page .cust-form-row .cust-form-label {
        width: 100%;
        text-align: left;
        margin-bottom: 4px;
    }

    .wrap-cust-bg-page.consumer-page .cust-form-row .cust-form-cell {
        width: 100%;
        flex-direction: column;
    }

    .cust-form-cell.captcha-cell .cap-img {
        height: 50px;
    }

    .cust-serv-header .govt-logo a {
        width: 46px;
    }

    .cust-serv-header .phed-logo {
        width: 66px;
        padding-right: 10px;
        border-right: 1px solid #ddd;
        margin-right: 10px;
    }

    .cust-serv-header .govt-logo a:first-child {
        padding-right: 10px;
        border-right: 1px solid #ddd;
        margin-right: 10px;
    }

    .custom-modal .modal-dialog,
    .custom-modal.modal.fade .modal-dialog {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .custom-modal .modal-content {
        border-radius: 20px;
    }
}


@media screen and (min-width: 280px) and (max-width: 767px) {
    .custom-modal .modal-content {
        border-radius: 20px;
    }

    .custom-modal .modal-dialog,
    .custom-modal.modal.fade .modal-dialog {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .cust-container-lg,
    .cust-container-sm {
        max-width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }

    :root {
        --h1-font-size: 30px;
        --h1-line-height: 40px;
        --h1-lspacing: 0;
        --h2-font-size: 25px;
        --h2-line-height: 33px;
        --h2-lspacing: 0;
        --h3-font-size: 20px;
        --h3-line-height: 30px;
        --h3-lspacing: 0;
        --h4-font-size: 19px;
        --h4-line-height: 25px;
        --h4-lspacing: 0;
        --h5-font-size: 15px;
        --h5-line-height: 22px;
        --h5-lspacing: 0px;
        --h6-font-size: 14px;
        --h6-line-height: 20px;
        --h6-lspacing: 0px;
        --md-font-size: 14px;
        --md-line-height: 20px;
        --md-lspacing: 0px;
        --sm-font-size: 14px;
        --sm-line-height: 19px;
        --sm-lspacing: 0px;
        --xsm-font-size: 13px;
        --xsm-line-height: 18px;
        --xsm-lspacing: 0px;
        --body-font-size: 14px;
        --body-line-height: 19px;
        --body-lspacing: 0px;
        --btn-font-size: 13px;
        --btn-line-height: 20px;
        --btn-lspacing: 0px;
    }

    .cust-table table th,
    .cust-table table td,
    .cust-common-table-fix-header table th,
    .cust-common-table-fix-header table td {
        padding: 6px;
    }

    .theme-btn--blue,
    .theme-btn--dark,
    .theme-btn--orange,
    .theme-btn--default,
    .theme-btn--green,
    .theme-btn--greendark,
    .theme-btn--red,
    .theme-btn--redlight,
    .delete-btn-td a,
    .edit-update-td a,
    .contr-refund-modal .modal-footer input.theme-btn--blue {
        padding: 2px 10px;
    }

    .cust-serv-header .phed-logo {
        width: 66px;
    }

    .form-control,
    select.form-control,
    select,
    textarea,
    .table.o-and-m-table-first input[type="text"] {
        font-size: 14px !important;
        line-height: 21px !important;
        letter-spacing: var(--sm-lspacing) !important;
        padding: 5px 10px;
    }

    .toplink-box a {
        justify-content: flex-start;
    }

    .btn-box button,
    .btn-box input,
    .btn-box a {
        margin-bottom: 5px;
        margin-right: 5px;
    }

    .wrap-cust-bg-page.consumer-page .cust-form-row .cust-form-input {
        width: 100%;
    }

    .cust-serv-header {
        justify-content: center;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .wrap-cust-bg-page {
        padding: 20px 20px;
        border-radius: 30px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .toplink-box {
        /* background: transparent; */
        /* margin-bottom: 0; */
        margin-bottom: 10px;
        /* padding: 0; */
        padding: 9px 8px;
        border-radius: 10px;
    }

    .wrap-cust-bg-page.consumer-page .btn-box.footer-btn-box {
        padding: 11px 11px 8px;
        border-radius: 10px;
        padding: 0;
        background: transparent;
        border-radius: 0;
        border: none;
        margin: 0;
    }

    .main-heading {
        margin-bottom: 20px;
    }

    h1.cust-serv-heading.heading-h4 {
        order: 3;
        width: 100%;
        margin-bottom: 0;
        margin-top: 11px;
        padding-top: 11px;
        background: #d6e3f2;
        padding-bottom: 6px;
        border-radius: 10px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .toplink-box a {
        font-size: var(--sm-font-size);
        line-height: var(--sm-line-height);
        letter-spacing: var(--sm-lspacing);
    }

    .cust-serv-header .cust-serv-heading span {
        font-size: var(--h6-font-size);
        line-height: var(--h6-line-height);
        letter-spacing: var(--h6-lspacing);
    }

    .wrap-cust-bg-page.consumer-page .cust-form-row .cust-form-label {
        width: 100%;
        text-align: left;
        margin-bottom: 4px;
    }

    .wrap-cust-bg-page.consumer-page .cust-form-row .cust-form-cell {
        width: 100%;
        flex-direction: column;
    }

    .cust-form-cell.captcha-cell .cap-img {
        height: 50px;
    }

    .cust-serv-header .govt-logo a {
        width: 46px;
    }

    .cust-serv-header .phed-logo {
        width: 66px;
        padding-right: 10px;
        border-right: 1px solid #ddd;
        margin-right: 10px;
    }

    .cust-serv-header .govt-logo a:first-child {
        padding-right: 10px;
        border-right: 1px solid #ddd;
        margin-right: 10px;
    }
}

@media only screen and (min-width: 280px) and (max-width: 680px) {
    .cust-serv-header .cust-serv-heading span {
        font-size: var(--md-font-size);
        line-height: var(--md-line-height);
        letter-spacing: var(--md-lspacing);
    }
}

@media only screen and (min-width: 280px) and (max-width: 479px) {
    .cust-form-cell.captcha-cell .cap-img {
        height: auto;
        width: 100%;
    }
}