/* Disable hover effects on disabled Save button */
    #btnMissingDataSave:disabled,
    #btnMissingDataSave:disabled:hover,
    #btnMissingDataSave:disabled:focus {
        background-color: #9ca3af !important;
        opacity: 0.65 !important;
        cursor: not-allowed !important;
        pointer-events: none;
    }

    .more-info-bacs-icon {
        width: 15px;
        margin-left: 5px;
        margin-bottom: 3px;
        margin-top: 10px;
    }

    .tooltip-bacs .more-info-bacs-tooltip {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        padding-top: 15px;
        position: absolute;
        white-space: nowrap;
        z-index: 99999;
        left: 56%;
        top: 50%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }

    .tooltip-bacs:hover .more-info-bacs-tooltip {
        visibility: visible;
    }

    .tooltip-bacs .more-info-bacs-tooltip::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;
    }


    .more-info-UserChoice-icon {
        width: 15px;
        margin-left: 5px;
        margin-bottom: 3px;
        margin-top: 10px;
    }

    .tooltip-UserChoice .more-info-UserChoice-tooltip {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        padding-top: 15px;
        position: absolute;
        white-space: nowrap;
        z-index: 99999;
        left: 57.3%;
        top: 37%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }

    .tooltip-UserChoice:hover .more-info-UserChoice-tooltip {
        visibility: visible;
    }

    .tooltip-UserChoice .more-info-UserChoice-tooltip::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;
    }

    .more-info-from-icon
    {
           width: 15px;
    margin-left: 5px;
    margin-bottom: 3px;
    margin-top: 10px;
    }

    .tooltip-from .more-info-from-tooltip {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        padding-top: 15px;
        position: absolute;
        white-space: nowrap;
        z-index: 99999;
        left: 58%;
        top: 50%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }

    .tooltip-from:hover .more-info-from-tooltip {
        visibility: visible;
    }

    .tooltip-from .more-info-from-tooltip::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;
    }

    .more-info-to-icon {
        width: 15px;
        margin-left: 5px;
        margin-bottom: 3px;
        margin-top: 10px;
    }

    .tooltip-to .more-info-to-tooltip {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        position: absolute;
        padding-top: 15px;
        white-space: nowrap;
        z-index: 99999;
        left: 58%;
        top: 60%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
        }

    .tooltip-to:hover .more-info-to-tooltip {
            visibility: visible;
        }

    .tooltip-to .more-info-to-tooltip::after {
            content: " ";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #635b5b transparent transparent transparent;
        }

    .tooltip-from-Mp .more-info-from-tooltip-Mp {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        position: absolute;
        padding-top: 15px;
        white-space: nowrap;
        z-index: 99999;
        left: 58%;
        top: 60%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }

    .tooltip-from-Mp:hover .more-info-from-tooltip-Mp {
        visibility: visible;
    }

    .tooltip-from-Mp .more-info-from-tooltip-Mp::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;
    }


    .tooltip-to-Mp .more-info-to-tooltip-Mp {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        position: absolute;
        padding-top: 15px;
        white-space: nowrap;
        z-index: 99999;
        left: 58%;
        top: 60%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }

    .tooltip-to-Mp:hover .more-info-to-tooltip-Mp {
        visibility: visible;
    }

    .tooltip-to-Mp .more-info-to-tooltip-Mp::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;
    }
    .nxt-btn .next-tooltip {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        position: absolute;
        white-space: nowrap;
        z-index: 99999;
        left: 81%;
        top: 75%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }
    .nxt-btn:hover .next-tooltip
    {
        visibility:visible;
    }
    .nxt-btn .next-tooltip::after
    {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;

    }

    .nxt-btn-mp .next-tooltip-MarkAspaid {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        position: absolute;
        white-space: nowrap;
        z-index: 99999;
        left: 78%;
        top: 79%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }

    .nxt-btn-mp:hover .next-tooltip-MarkAspaid {
        visibility:visible;
    }

    .nxt-btn-mp .next-tooltip-MarkAspaid::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;

    }

    .tooltip-Reference-Mp .more-Reference-tooltip-Mp {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        position: absolute;
        padding-top: 15px;
        white-space: nowrap;
        z-index: 99999;
        left: 57.5%;
        top: 47%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }

    .tooltip-Reference-Mp:hover .more-Reference-tooltip-Mp {
        visibility: visible;
    }

    .tooltip-Reference-Mp .more-Reference-tooltip-Mp::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;
    }
    .nxt-btn-mp-error .next-tooltip-MarkAspaid-error {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        position: absolute;
        white-space: nowrap;
        z-index: 99999;
        left: 65%;
        top: 75%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }

    .nxt-btn-mp-error:hover .next-tooltip-MarkAspaid-error {
        visibility: visible;
    }

    .nxt-btn-mp-error .next-tooltip-MarkAspaid-error::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;
    }

    .nxt-btn-remittance .next-tooltip-remittance {
        visibility: hidden;
        max-width: 500px;
        background: #3f3c3c;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        position: absolute;
        white-space: nowrap;
        z-index: 99999;
        left: 75%;
        top: 75%;
        border-radius: 7px;
        transition-delay: .40000s;
        font-size: 12px;
    }

    .nxt-btn-remittance:hover .next-tooltip-remittance {
        visibility: visible;
    }

    .nxt-btn-remittance .next-tooltip-remittance::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #635b5b transparent transparent transparent;
    }

    .e-icon-settings {
        color: gray;
    }

    /*  #promptInfoDialogContainerSendingRemittanceProgress .e-icon-settings {
            color: #343434 !important;
        }*/
    #GridSendingRemittances .e-grid .e-rowcell {
        font-size: 14px;
        padding: 2px !important;
    }

    #GridSendingRemittances .e-grid .e-icons:not(.e-btn-icon) {
        color: unset;
    }

    #GridSendingRemittances .e-grid.e-gridhover tr[role=row]:not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover tr[role=row]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        background-color: unset !important;
        color: #000;
    }

    #GridSendingRemittances .e-grid td.e-active {
        background: none !important;
        color: #000;
    }

    .HideToolbarItem {
        display: none;
    }

    #templateStatus .e-grid .e-icons:not(.e-btn-icon) {
        color: unset;
    }

    .progress-bar-bg {
    }

    #dateTransaction {
        font-weight: bold;
        font-family: 'Open Sans'
    }

    #dateTransaction2 {
        font-weight: bold;
        font-family: 'Open Sans'
    }
    .msg_success {
        background: #adcfb47a;
        padding: 8px;
        color: #033c03;
        display: flex;
        font-size: 13px;
    }

    .msg_pending {
        background: #adcfb47a;
        padding: 8px;
        color: brown;
        display: flex;
        font-size: 13px;
    }

    .msg_error {
        background: #cfadb37a;
        padding: 8px;
        color: #cf0606;
        display: flex;
        font-size: 13px;
    }

    #control-container {
        padding: 0px !important;
    }

    .linear-parent {
        text-align: center;
        margin-top: 2%;
    }

    .linear-button {
        text-align: center;
    }

    .linear-progress {
        width: 80%;
        margin: auto;
        margin-bottom: 3%;
    }

    #reLoad {
        border-radius: 4px;
        text-transform: capitalize;
    }

    .disablegrid {
        pointer-events: none;
        opacity: 0.4;
    }

    .wrapper {
        cursor: not-allowed;
    }

    /*   .e-grid .e-gridcontent {
            margin-top: 20px !important;
        }*/

    /*.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
                background-color: #ff7b2e !important;

            }*/

    .e-pager .e-currentitem, .e-pager .e-currentitem:hover {
        background: #44C7F4 !important;
    }

    .e-btn.e-primary, .e-css.e-btn.e-primary {
        background-color: deepskyblue;
    }


    .e-ddl.e-input-group.e-control-wrapper.e-input-focus::before, .e-ddl.e-input-group.e-control-wrapper.e-input-focus::after {
        background: #44C7F4 !important;
    }


    .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
        background: #44C7F4 !important;
    }

    .e-spinner-pane .e-spinner-inner .e-spin-material {
        stroke: #44C7F4 !important;
        stroke-width: 15px !important; /* Adjust the spinner thickness */
    }

    div.e-gridheader.e-lib.e-droppable {
        padding-right: 0px !important;

    }

    /* .e-grid .e-toolbar-items {
            background-color: #deecf9;
        }*/

    /* .select-bills {
            display:none !important;
        }*/
    /* .toolbar-btn-row {
        background: #FCFCFC;
        margin-bottom: -5px;
        margin-right: 10px;
    } */
    .toolbar-btn-row {
        background: #FCFCFC;
        margin-bottom: -5px;
        margin-right: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .toolbar-btn-row > div:first-child {
        flex: 1 1 300px;
        min-width: 200px;
    }
    .toolbar-btn-row > div:last-child {
        flex: 0 0 auto;
    }
    .toolbar-btn {
        height: calc(67% - 10px);  
        min-height: 0;
        min-width: 0;
        background-image: linear-gradient(#44C7F4, #44C7F4);
        padding: 0;
        border-right: 1px solid #B0D4E1;
        color: #FCFCFC !important;
        border: none !important;
/*        float: right;*/
        padding: 6px;
        padding-right: 12px;
        padding-left: 12px;
        margin: 10px;
        margin-bottom: 20px;
        margin-right: 5px;
        margin-left: 5px;
        text-transform: capitalize;
        box-shadow: 0px 2px 3px #9b9595;
        font-size: 16px;
        font-family: 'Play' !important;
        border-radius: 7px;
    }

    .steps-horizontal-line1 {
        width: 180px;
        border-top: 1px solid #578;
        display: block;
        margin-top: 8px;
        margin-left: 3px;
        margin-right: 3px;
    }

    .stepper-line-default {
        width: 245px;
        border-top: 3px solid #c2c5c7;
        display: block;
        margin-top: 8px;
    }
    .btn-more-info
    {
        padding: 5px;
        z-index: 9999;
        position: absolute;
        height: 25px !important;
        text-align: end;
        float: right;
        right: 0;
        margin-right: 15px !important;
        margin-top: 10px !important;
    }
    .stepper-line-default-markaspaid {
        width: 245px;
        border-top: 3px solid #c2c5c7;
        display: block;
        margin-top: 8px;
    }
    .stepper-line-inprogress {
        width: 245px;
        border-top: 3px solid #44C7F4;
        display: block;
        margin-top: 8px;
    }

    .stepper-line-inprogress-markaspaid {
        width: 245px;
        border-top: 3px solid #44C7F4;
        display: block;
        margin-top: 8px;
    }

    .stepper-line-default-remmittance {
        width: 590px;
        border-top: 3px solid #c2c5c7;
        display: block;
        margin-top: 8px;
        text-align: center;
    }
    .stepper-line-inprogress-remmittance {
        width: 800px;
        border-top: 3px solid #44C7F4;
        display: block;
        margin-top: 8px;
        text-align: center;
    }
    .stepper-line-done {
        width: 245px;
        border-top: 3px solid #44C7F4;
        display: block;
        margin-top: 8px;
    }
    /* .search-bar-toolbar {
        display: flex;
        margin-top: 100px;
        margin-left: 33px;
        margin-bottom: -5px;
        width: 70%;
    } */
    .search-bar-toolbar {
        display: flex;
        margin-top: 100px;
        margin-left: 33px;
        margin-bottom: -5px;
        width: 400px;
    }
    .search-icons {
        margin-top: 10px;
        margin-right: 10px;
        color: #48484877;
        float: left !important;
        position: absolute;
        margin-left: 10px;
    }

    .delete-search-icons {
        margin-top: 10px;
        margin-right: 10px;
        color: #48484877;
    }

    /* .toolbar-btn-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        margin-top: 95px;
        margin-right: -15px;
        margin-bottom: -5px;
        float: right;
        gap: 5px;
    } */
    .toolbar-btn-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        margin-top: 95px;
        margin-bottom: -5px;
        gap: 5px;
    }
    /* Responsive adjustments for toolbar buttons */
    @media (max-width: 1200px) {
        .toolbar-btn-right {
            justify-content: flex-start;
            margin-top: 10px;
        }
        .toolbar-btn {
            padding: 6px 8px;
            font-size: 13px;
            margin: 5px 2px;
        }
        .btn-introjs {
            font-size: 13px;
            padding: 0px 8px;
        }
    }
    @media (max-width: 768px) {
        .toolbar-btn-right {
            width: 100%;
            justify-content: flex-start;
        }
        .toolbar-btn,
        .btn-introjs {
            font-size: 11px;
            padding: 4px 6px;
        }
    }

    .input-search {
        border: 1px solid #bec9be !important;
        border-radius: 3px;
    }

    #three-dots .e-btn .e-btn-icon, .e-css.e-btn .e-btn-icon {
        border-left: none !important;
    }
    #wizardForm .e-btn .e-btn-icon, .e-css.e-btn .e-btn-icon {
        display: inline-block;
        font-size: 15px;
        margin-top: -2px;
        vertical-align: middle;
        border-left: 1px solid #f7f7f7;
        margin-left: 10px !important;
    }
    #wizardForm .e-btn-icon .e-icons .e-more-vertical-1 {
        display: inline-block;
        font-size: 15px;
        margin-top: -2px;
        vertical-align: middle;
        border-left: 1px solid #676;
        margin-left: 10px !important;
    }
    #wizardForm .e-btn.e-flat, .e-css.e-btn.e-flat {
        background-color: rgba(0,0,0,0);
        border-color: rgba(0,0,0,0);
        box-shadow: none;
        color: rgba(0,0,0,.87);
        height: calc(100% - 10px);
        margin: 4px 0;
        min-height: 0;
        min-width: 0;
        background-image: linear-gradient(#50b7d5, #5089b3);
        border: none;
        text-transform: capitalize;
        font-family: "Play" !important;
        color: #fff !important;
        padding-bottom: 7px;
    }

 /*   .e-btn:hover, .e-css.e-btn:hover {
        background-color: rgba(226,226,226,.9844);
        border-color: rgba(0,0,0,0);
        box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    }*/

    .markasPaid {
        height: calc(100% - 10px);
        margin: 4px 0;
        min-height: 0;
        min-width: 0;
        padding: 0 1.5px;
        background-image: linear-gradient(#50b7d5, #5089b3);
        padding-left: 5px;
        padding-right: 5px;
        padding: 0;
        border-right: 1px solid #a4e5ef;
        color: #ffff !important;
        border: none !important;
        float: right;
    }

    .e-btn.e-primary, .e-css.e-btn.e-primary {
       /*  height: calc(100% - 10px); */
        margin: 4px 0;
        min-height: 0;
        min-width: 0;
        background: #44C7F4;
        box-shadow: 0px 1px 4px #9b9595;
        border: none;
        text-transform: capitalize;
        font-family: "Play" !important;
        color: #fff;
        padding-bottom: 7px;
        border-radius:7px;
    }

        .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover {
            background-color: #44C7F4 !important;
            border-color: rgba(0,0,0,0);
            box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
            color: #fff;
        }
        .e-btn.e-primary:active, .e-css.e-btn.e-primary:active {
            background-color: #44C7F4;
    border-color: rgba(0,0,0,0);
    color: #fff;
    outline: #fafafa 0 solid;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}
.e-btn.e-primary:disabled, .e-css.e-btn.e-primary:disabled:hover {
    background-color: rgba(0,0,0,.12);
    border-color: rgba(0,0,0,0);
    box-shadow: none;
    color: rgba(0,0,0,.26);
}
        .e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus {
            background-color: #44C7F4;
            border-color: rgba(0,0,0,0);
            color: #fff;
            outline: #fafafa 0 solid;
            box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
        }
    .btn-cancel {
        height: calc(100% - 10px);
        margin: 4px 0;
        min-height: 0;
        min-width: 0;
        background-image: linear-gradient(#ffffff, #ebebeb);
        border: none;
        text-transform: capitalize;
        font-family: "Play" !important;
        color: #316c83 !important;
        padding-bottom: 7px;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .e-grid .e-gridheader .e-sortfilter .e-headercelldiv, .e-grid .e-gridheader .e-stackedheadercelldiv {
        padding: 0px;
    }

    .e-btn-cancel-modal {
        margin-left: 6px;
        background-color: rgba(0,0,0,0);
        border-color: rgba(0,0,0,0);
        box-shadow: none;
        color: rgba(0,0,0,.87);
        height: calc(100% - 10px);
        /* margin: 4px 0; */
        min-height: 0;
        min-width: 0;
        background-image: linear-gradient(#50b7d5, #5089b3);
        border: none;
        text-transform: capitalize;
        font-family: "Play" !important;
        color: #fff !important;
        padding-bottom: 7px;
    }

    .bill-selected {
        margin-left: 15px;
        cursor: unset !important;
    }

    .default-txt-btn {
        margin-left: -35px;
        cursor: unset !important;
    }

    .awaiting-status {
        background: #9ae79a;
        border: 1px solid #70ce70;
        padding-left: 4px;
        border-radius: 6px;
        color: #020202;
        font-size: 13px;
        width: 114px;
        margin-left: 15px;
    }

    .failed-status {
        background:red;
        border: 1px solid red;
        padding-left: 4px;
        border-radius: 6px;
        color: #020202;
        font-size: 13px;
        width: 114px;
        margin-left: 15px;
    }

    .paid-status {
        background: #4CAF50;
        border: 1px solid #388E3C;
        padding-left: 4px;
        border-radius: 6px;
        color: #ffffff;
        font-size: 13px;
        width: 114px;
        margin-left: 15px;
    }

    .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
        color: #404040;
        font-weight: bold;
        font-size: 15px;
        font-family: 'Play';
         margin-left: 50px;
    }

    .arrow-container {
        padding: 0;
        color: #FCFCFC !important;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 10px;
        text-transform: capitalize;
        border-left: 1px solid #f7f7f7;
        height: 15px;
    }

    .arrow-icon {
        font-size: 16px !important;
        margin-top: 1px;
        color: #FCFCFC !important;
        z-index: 9999;
        position: absolute;
        margin-right: 10px;
    }

    .arrow-container:hover {
        color: #D9D9D9;
    }

    .arrow-icon:hover {
        color: #D9D9D9;
    }


    /* Some basic styling for the progress bar container */
    .progress-container {
        width: 100%;
        text-align: center;
    }

    /* Styling for the progress bar */
    progress {
        width: 100%;
    }

    /* Styling for the label */
    .progress-label {
        font-size: 16px;
        margin-top: 10px;
    }

    #control-container {
        padding: 0px !important;
    }

    .linear-parent {
        text-align: center;
        width: 80%;
        margin: auto;
    }

    .progressbar-label-linear {
        text-align: left;
        font-family: Roboto-Regular;
        font-size: 14px;
        color: #3D3E3C;
        margin-left: 10px;
        padding: 0px;
        top: 10px;
    }

    #reLoad {
        border-radius: 4px;
        text-transform: capitalize;
    }
    .loading-indicator
    {
        height: 25px;
        width: 25px;
        z-index: 99999;
        position: absolute;
        margin-left: -25px;
        margin-top: -4px;
    }

    .loading-indicator-PAS {
        height: 35px;
        width: 35px;
        z-index: 99999;
        position: absolute;
        bottom: 0;
        text-align: right;
        right: 0;
        margin-right: 19%;
        margin-bottom: 11%;
    }
    .export-batchpay-indicator
    {
        height: 25px;
        width: 25px;
        z-index: 99999;
        position: absolute;
        margin-left: -80px;
        margin-top: -4px;
        visibility:hidden;
    }
    .loading-indicator-js {
    height: 25px;
    width: 25px;
    z-index: 99999;
    position: absolute;
    margin-left: -45px;
    margin-top: -5px;
}
    .error-loading-indicatorMp
    {
        height: 60px;
        width: 60px;
        z-index: 99999;
        position: absolute;
        margin-left: 220px;
    }

    .error-loading-indicator {
        height: 60px;
        width: 60px;
        z-index: 99999;
        position: absolute;
        margin-left: 220px;
    }

    .loading-indicatorMp {
        height: 25px;
        width: 25px;
        z-index: 99999;
        position: absolute;
        margin-left: -90px;
        margin-top: -4px;
    }
      .loading-indicatorSr
    {
        height: 25px;
        width: 25px;
        z-index: 99999;
        position: absolute;
        margin-left: -35px;
        margin-top: -4px;
    }
    #promptrActivateSubscriptionDialog {
        max-width: 95vw !important;
    }

    .activation-logo
    {
        background-image: url(/img/BatchPay-Sub-Congrats-final-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        height: 680px;
        width: 900px;
        max-width: 100%;
        position: relative;
    }

    @media (max-width: 950px) {
        .activation-logo {
            height: auto;
            aspect-ratio: 900 / 680;
        }
        .activation-logo .col-md-7 {
            width: 60% !important;
            margin-left: 5% !important;
        }
        .activation-logo input,
        .activation-logo textarea {
            font-size: 12px !important;
            height: 32px !important;
            padding: 6px 12px !important;
        }
        .activation-logo textarea {
            height: 45px !important;
        }
    }

    @media (max-width: 600px) {
        .activation-logo .col-md-7 {
            width: 90% !important;
            margin-left: 5% !important;
        }
        .activation-logo input,
        .activation-logo textarea {
            font-size: 11px !important;
            height: 28px !important;
            padding: 5px 10px !important;
        }
        .activation-logo textarea {
            height: 40px !important;
        }
        .activation-logo .row {
            margin-bottom: 4px !important;
        }
        #feedbackDesc1 {
            font-size: 11px !important;
        }
    }

    .btn-introjs
    {
        margin-right: 10px;
        margin-top: 0;
        box-shadow: unset;
        border-radius: 7px;
        text-transform: capitalize;
        height: 30px;
        background: #9ae79a;
        border: none;
        font-family: 'Play';
        padding: 0px 10px;
        color: #808380;
        box-shadow: 0px 2px 3px #9b9595;
        align-self: center;
    }
    .btn-introjs:hover
    {
       border-color: rgba(0,0,0,0);
        box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !important;
        color: #171817;
    }
    .vertical-line-introjs
{
    font-size: 15px;
    margin-top: -2px;
    vertical-align: middle;
    border-left: 1px solid #b8c1b8;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

     .progress-bar-batchpay{
     display: flex;
     height: 40px;
    /*  overflow: hidden; */
     font-size: 0.75rem;
     width: 100%;
     margin-left: -10px;

 }

 .linear-progress {
     width: 80%;
     margin: auto;
     margin-bottom: 3%;
 }

    .custom-tooltip {
        position: relative;
        display: inline-block;
    }

        .custom-tooltip .tooltip {
            position: absolute;
            top: 45px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s;
            white-space: nowrap;
            padding: 4px 10px;
            font-size: 12px;
            font-family: 'Play' !important;
            transition-delay: .50000s;
        }

            .custom-tooltip .tooltip::before {
                content: '';
                position: absolute;
                top: -50%;
                left: 50%;
                border: solid transparent;
                border-width: 8px;
                border-bottom-color: #333;
            }
        .custom-tooltip:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }

   
    .clear-tooltip {
        position: absolute;
        left: calc( 50% - 60px);
        top: 38%;
    }

        .clear-tooltip .c-tooltip {
            position: absolute;
            top: 45px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s;
            white-space: nowrap;
            padding: 4px 10px;
            font-size: 12px;
            font-family: 'Play' !important;
            transition-delay: .50000s;
        }

            .clear-tooltip .c-tooltip::before {
                content: '';
                position: absolute;
                top: -50%;
                left: 50%;
                border: solid transparent;
                border-width: 8px;
                border-bottom-color: #333;
            }

        .clear-tooltip:hover .c-tooltip {
            visibility: visible;
            opacity: 1;
        }

    /* Override tooltip arrow styles */
    .ejs-tooltip::before {
        /* Your custom styles for the arrow here */
        border-top-color: #ff0000; /* Example arrow color */
    }
    #dialogMarkAsPaidConfirmation{
        z-index: 999999999;
    }

    .e-btn.e-primary.e-active, .e-css.e-btn.e-primary.e-active {
        background-color: #44C7F4;
        border-color: rgba(0, 0, 0, 0);
        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
        color: #fff;
    }

    #exportreport-popup .e-btn.e-primary, .e-css.e-btn.e-primary {
        height: unset !important;
        margin: 4px 0;
        min-height: 0;
        min-width: 0;
        /* box-shadow: 0px 1px 4px #9b9595; */
        border: none;
        text-transform: capitalize;
        font-family: "Play" !important;
        padding-bottom: 7px;
        border-radius: 7px;
    }

    .e-dropdown-popup ul {
        background: #44C7F4;
        border-radius: 5px;
        color: #ffff;
        margin-top: 1px;
    }

    .e-dropdown-popup ul .e-item .e-menu-icon {
        color: rgba(0, 0, 0, .87);
        margin-left: -20px;
    }
    .exportBtncss
    {
        margin: 4px 0;
        min-height: 0;
        min-width: 0;
        background: #44C7F4;
        box-shadow: 0px 1px 4px #9b9595;
        border: none;
        text-transform: capitalize;
        font-family: "Play" !important;
        color: #fff;
        border-radius: 7px;
    }

    .exportBtncss:hover{
        background: #44C7F4;
        box-shadow: 0px 1px 4px #9b9595;
    }
    .exportBtncss:active{
        background: #44C7F4;
        box-shadow: 0px 1px 4px #9b9595;
    }

    .exportBtncss:focus {
        background: #44C7F4;
        box-shadow: 0px 1px 4px #9b9595;
    }
    .e-dropdown-popup {
        background-color: #fff;
        color: rgba(0, 0, 0, .87);
        border-radius: 5px;
    }

    .e-footer-content .e-btn.e-primary {
        background: #44C7F4;
        box-shadow: 0px 1px 4px #9b9595;
        color: #fff;
    }

    .e-footer-content .e-btn.e-primary:not([DISABLED]):active {
        background: #44C7F4;
    }

    .e-footer-content .e-btn:not([DISABLED]):active {
        background: #44C7F4;
    }

    .e-footer-content .e-btn.e-primary:not([DISABLED]):hover {
        background: #44C7F4;
    }

    .e-footer-content .e-btn.e-primary:not([DISABLED]):focus-visible, .e-footer-content .e-btn.e-primary:not([DISABLED]):focus {
        /* background: rgba(227, 22, 91, .2); */
        background: #44C7F4;
    }

    .e-btn:hover, .e-css.e-btn:hover {
        background-image: linear-gradient(#44C7F4, #44C7F4);
        border-color: rgba(0, 0, 0, 0);
        color: #fff;
    }

    .e-btn:hover, .e-css.e-btn:hover {
        background-image: linear-gradient(#44C7F4, #44C7F4);
        box-shadow: 0px 2px 3px #9b9595;
    }

    .e-btn:active, .e-css.e-btn:active {
        background-image: linear-gradient(#44C7F4, #44C7F4);
        outline: #fafafa 0 solid;
        outline-offset: 0;
        box-shadow: 0px 2px 3px #9b9595;
    }

    .e-btn:focus, .e-css.e-btn:focus {
        background-image: linear-gradient(#44C7F4, #44C7F4);
        outline-offset: 0;
        box-shadow: 0px 2px 3px #9b9595;
    }