@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
*{
    --heading-color: #2E2E2E;
    --label-color: #4E4E4E;
    --body-color: #6E6E6E;
}
.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    max-width: 89%;
    overflow: hidden;
    text-overflow: ellipsis;
}



.balance-detail::before {
    content: 'CREDIT';
    position: absolute;
    font-size: 12px;
    width: 100%;
    left: 0;
    top: -10px;
    font-weight: 100 !important;
}
.balance-detail {
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    font-size: 20px;
    font-weight: 300 !important;
}
.unsaved-client {
    margin-top: 10px;
    font-size: 12px;
}

.new-client-button {
    position: absolute;
    top: 18px;
    left: 280px;
    width: 200px;
    height: 35px;
}

.payment-icon {
    font-size: 20px;
}

.copy-icon {
    border: solid #00144e22 1px;
    border-radius: 50%;
    padding: 8px;
    color: #00144e;
    cursor: pointer;
}

    .copy-icon:hover {
        border: solid #00144e22 1px;
        border-radius: 50%;
        padding: 8px;
        background: #00144e22;
        /*color: #fff;*/
        cursor: pointer;
    }

.finch-card {
    background: #fff;
    margin: 5px 0;
    padding: 10px !important;
    border-radius: 15px;
}

#InsuredBenefitsGrid .e-table {
    border-spacing: 1px !important;
}

#VehicleAddressGrid .e-table {
    border-spacing: 1px !important;
}

#VehicleExtrasGrid .e-table {
    border-spacing: 1px !important;
}

#VehicleTrackingGrid .e-table {
    border-spacing: 1px !important;
}

#VehicleDriversGrid .e-table {
    border-spacing: 1px !important;
}

.e-chip-list.e-chip.e-outline, .e-chip-list .e-chip.e-outline {
    background: transparent;
    border-color: #bdbdbd;
    color: rgba(0,0,0,.87);
    border-width: 1px;
    border-radius: 9px !important;
}

.e-chip-list.e-selection .e-chip.e-active.e-outline {
    background: #00144e;
    border-color: #00144e;
    color: #fff;
    border-radius: 9px;
}

.no-policies {
    font-weight: 600;
    text-align: center;
    font-size: 15px;
    height: calc(100dvh - 240px);
    display: grid !important;
    align-content: center;
}
/*Pagination*/
.pagination {
    background: #00144E;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 10px !important;
}

.pagination-text {
    color: #fff;
    margin: 10px;
}

.pagination-text-end {
    color: #fff;
    margin: 10px;
    position: absolute;
    right: 15px;
}

.pagination button {
    box-shadow: none;
    height: 35px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    margin: 5px 2.5px 5px 5px;
}

.pagination-first-button {
    border-bottom-left-radius: 15px !important;
    border-top-left-radius: 0px !important;
    background: #fff !important;
    color: #00144E !important;
}

.pagination-previous-button {
}

.pagination-next-button {
}

.pagination-last-button {
    background: #fff !important;
    color: #00144E !important;
}

.pagination-page-indicator {
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    height: fit-content;
    padding: 1.5px 5px;
    margin: 9px 2.5px 5px 5px;
    min-width: 20px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
}

.pagination-page-indicator-active {
    color: #00144E;
    background: #fff;
    border: 1px solid rgba(255,255,255,.4);
    height: fit-content;
    padding: 2.5px 5px;
    margin: 7px 2.5px 5px 5px;
    min-width: 20px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
    font-weight: 600;
}
/*Pagination*/


.client-communication-banner-closed {
    background: #00144e;
    position: absolute;
    height: calc(100dvh - 125px);
    width: 46px;
    z-index: 95;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    box-shadow: -0px 0 8px rgba(0,0,0,0.6)
}

.client-communication-banner-open {
    background: #00144e;
    position: absolute;
    height: calc(100dvh - 125px) !important;
    width: 46px;
    z-index: 95;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    display: none;
}

.client-communication-banner-closed::after {
    content: 'Communication';
    color: #fff;
    transform: rotate(270deg);
    position: absolute;
    top: 100px;
    left: -80px;
    font-size: 25px;
    cursor: pointer;
}

.client-communication-expander {
    z-index: 9 !important;
    position: relative;
    box-shadow: none !important;
    width: 100%;
    border-top-left-radius: 10px !important;
}

    .client-communication-expander:hover {
    }

.client-communication-banner-closed:hover {
    background: #1f3063 !important;
    cursor: pointer !important;
}

@media only screen and (max-width: 600px) {
    .col-3, .col-6 {
        min-width: 80vw;
        margin: 0 auto;
    }
}
/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #e6e9f3;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #00144E;
}

/*PolicyCard*/
.new-policy-button {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px !important;
    right: 55px;
    background: #00144E !important;
    color: #fff !important;
    /* font-size: 25px !important; */
    border-radius: 50% !important;
    box-shadow: 0 10px 10px -5px rgba(0,0,0,0.45) !important;
    z-index: 999;
    cursor: pointer;
}

    .new-policy-button::before {
        content: '';
        position: absolute;
        background: #00144E;
        right: 35px;
        top: 5px;
        z-index: 9999999;
        padding: 5px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        box-shadow: 0 0px 10px rgba(0,0,0,0.45) !important;
        width: 0;
        overflow: hidden;
    }

    .new-policy-button:hover::before {
        top: 0;
        content: 'New';
        display: block;
        width: fit-content;
    }

    .new-policy-button::after {
        content: '';
        position: absolute;
        background: #00144E;
        left: 31px;
        bottom: 0;
        z-index: 9999999;
        padding: 5px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        box-shadow: 0 0px 10px rgba(0,0,0,0.45) !important;
        width: fit-content !important;
        overflow: hidden;
    }

    .new-policy-button:hover::after {
        content: 'Policy';
        display: block;
        width: fit-content;
    }

    .new-policy-button:hover {
        box-shadow: 0 0px 10px rgba(0,0,0,0.45) !important;
        transform: scale(1.1);
    }

    .new-policy-button .fas {
        font-size: 28px !important;
    }

.policyCard {
    height: 360px;
    padding: 10px;
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.4);
    border-radius: 10px;
    margin: 10px;
    position: relative;
    cursor: pointer !important;
    border: 1px solid rgba(0,0,0,0.05);
    background: #fff;
    color: #00144e;
    transition: .5s;
    overflow: hidden;
    line-height: .7;
}

#PaymentHistoryGrid {
    border-bottom-left-radius: 24px;
}

    #PaymentHistoryGrid .e-gridcontent {
        background: #fff;
        border-bottom-left-radius: 24px;
    }

.policyCard:hover {
    transform: scale(1.05);
}

    .policyCard:hover .policyCardInnerImage {
        /*background-position: top !important;*/
        /*background-position-y: -10px;*/
        transform: scale(0.6);
        filter: blur(0px);
        background-size: contain;
    }

    .policyCard:hover::after {
        display: none !important;
    }

.policyUnderwriter {
    background: transparent;
    height: 100% !important;
    width: 100%;
    color: #fff;
    position: absolute;
    text-align: center;
    font-size: 30px;
    filter: blur(0px);
    line-height: 3;
    left: 0;
}

.policyCardInner {
    height: 100%;
    background: transparent;
    border-radius: 13px;
}

    .policyCardInner p {
        margin-left: 10px;
    }

.policyCardPremium {
    background: #00144e;
    color: #fff;
    width: fit-content;
    position: absolute;
    right: 0px;
    top: 15px;
    padding: 5px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
}

.policyCard::after {
    content: attr(underwriter);
    color: #fff;
    position: absolute;
    right: 0px;
    top: 50px;
    min-width: 100%;
    text-align: center;
    text-shadow: 0 0 6px #00144E;
    font-size: 15px;
    filter: drop-shadow(0 0 5px #00144eac)
}

.policyCardType {
    margin-top: 10px;
    margin-bottom: 12px;
    font-size: 18px;
    letter-spacing: 1.1px;
    font-weight: 400 !important;
}

.policyCardButton {
    text-align: center;
    border-radius: 7px;
    border: 1px solid var(--coll);
    margin: 15px 5px;
    line-height: 2;
    color: var(--coll);
    font-weight: 700;
}

    .policyCardButton:hover {
        background: var(--coll);
        color: #fff;
    }

.policyCardHeading {
    font-weight: 600;
    margin-right: 10px;
}

.policyCardInnerImage {
    width: 100%;
    height: 40%;
    background: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    transition: .5s !important;
    position: relative;
    overflow: hidden;
    filter: blur(10px);
    transform: scale(1.2);
    /*border-bottom-left-radius: 10px;*/
}
/*Policy Card*/
/*Tab styleong*/
.customTab {
    max-height: calc(100vh - 170px);
}

.ClientDetailTab .e-content > .e-item.e-active {
    padding-bottom: 30px !important;
    max-height: calc(100vh - 295px);
    overflow-x: hidden;
    overflow-y: auto;
}

.customTab .e-tab-header, .customTab .e-tab-header .e-toolbar-ite .e-tab-wrap {
    overflow: visible !important;
}

    .customTab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
        background: #f1ab18 !important;
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
        box-shadow: 0 -10px 10px -5px rgba(0,0,0,0.1);
    }

.customTab .CustomSub .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background: #f1ab18 !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    box-shadow: none !important;
    border-right: none;
}

/*Tab styleong*/

.feature_options_row, .feature_search_row {
    width: 100% !important;
}

.feature_options_row, .feature_search_row, .content_container {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

.ui.form .fields > .field {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.ui.form .fields {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0 -0.5em 1em;
}

    .ui.form .fields .wide.field {
        width: 6.25%;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .ui.form .fields .field:first-child {
        border-left: none;
        box-shadow: none;
    }

    .ui.form .field:last-child, .ui.form .fields:last-child .field {
        margin-bottom: 0;
    }

    .ui.form .fields .field {
        clear: both;
        margin: 0;
    }

.ui.form .field {
    clear: both;
    margin: 0 0 1em;
}

.ui.form .field {
    clear: both;
    margin: 0 0 1em;
}

.ui.form .fields > .field {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto !important;
    flex: 0 1 auto !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}

element.style {
}

.ui.form .four.wide.field {
    width: 21% !important;
}

.ui.form .three.wide.field {
    width: 21% !important;
}

.ui.form .fields .wide.field {
    width: 1%;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.ui.form .fields > .field:first-child {
    border-left: none;
    box-shadow: none;
}

.ui.form .field:last-child, .ui.form .fields:last-child .field {
    margin-bottom: 0;
}

.ui.form .fields > .field {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.feature_options_row, .feature_search_row, .content_container {
    padding-left: 25px;
    padding-right: 25px;
    background: transparent;
    margin-bottom: 15px !important;
}

    .feature_options_row ul {
        margin-left: -40px !important;
    }

        .feature_options_row ul li, .voicemail_options_box ul li {
            cursor: pointer;
            display: inline;
            width: auto;
            padding: 10px 10px;
            border-radius: 10px;
            color: #00144e;
        }

            .feature_options_row ul li:hover {
                background: #00144e;
                color: #fff;
            }

.inbox-mail-header-avatar {
    height: 70px;
    width: 70px;
    background: #c8c3c3;
    color: #000;
    padding: 0;
    line-height: 0;
    border-radius: 50%;
}

    .inbox-mail-header-avatar p {
        font-size: 35px;
        text-align: center;
        padding: 0;
        line-height: 2;
        text-transform: uppercase;
    }

.inbox-mail-header-buttons {
    width: 120px;
    float: right;
    height: 50px;
    margin-top: -5px;
}

.inbox-mail-header-buttons-button {
    padding-left: 5px;
    width: 120px;
    border: solid 1px rgba(255,255,255, 0.4) !important;
    margin: 1px;
    border-radius: 3px;
}

    .inbox-mail-header-buttons-button:hover {
        background: rgba(255,255,255, 0.4) !important;
        cursor: pointer;
    }

    .inbox-mail-header-buttons-button::after {
        content: ' ' attr(word);
        color: #fff;
    }

.inbox-body-content {
    max-width: calc(100vw - 500px);
}

.inbox-mailitem {
    border-bottom: none;
    width: 100% !important;
    padding: 5px;
    height: 65px;
    padding-top: 1px;
    border-top: solid 1px rgba(0,0,0,0.1);
    border-bottom: solid 1px rgba(0,0,0,0.1);
}

.inbox-mailitem-unread {
    color: #00144e;
    border: solid #00144e40 1px;
    border-left: solid #00144e 8px;
    padding: 5px;
    padding-left: 10px;
    padding-top: 1px;
}

    .inbox-mailitem-unread::after {
        content: '';
        height: 10px;
        width: 10px;
        background: #00144e;
        position: absolute;
        right: 10px;
        border-radius: 50%
    }


.inbox-mailitem-address {
    font-weight: 400;
    font-size: 12px;
}

.inbox-mailitem-date {
    font-weight: 400;
    font-size: 12px;
    float: right;
}

.inbox-mailitem-subject {
    font-weight: 800;
    text-align: Left;
    width: 100%;
    margin-top: -30px;
    margin-bottom: -20px;
}

.inbox-mail-header-text-heading {
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
}

.inbox-mail-header-text-date {
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    margin-top: 6px;
}

.inbox-mail-header-text-from {
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
}

.inbox-mail-header-text-subject {
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
}

.inbox-mail-header-text-to {
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    margin-top: 5px;
}

.inbox-mail-header {
    background: #00144e !important;
    color: #fff;
    padding: 10px;
    /*margin-top: 15px;*/
    min-height: 100px;
    /*margin-bottom: 10px;*/
}

.inbox-mail-body {
    background: transparent;
    padding: 10px;
}

.combined-in {
    width: 50% !important;
    float: left;
    border: 1px solid #8da0d7;
    background: #00144e;
    color: #fff;
    padding: 10px;
    margin: 9px;
    border-radius: 10px;
    position: relative;
}

    .combined-in::after {
        clip-path: polygon(0 0, 0% 100%, 99% 100%);
        height: 20px;
        width: 20px;
        content: '';
        position: absolute;
        background: #00144e;
        top: -12px;
    }

    .combined-in::before {
        content: attr(type);
        position: absolute;
        background: #00144e;
        bottom: 10px;
        right: 10px;
        color: #fff;
    }

.combined-out {
    width: 50% !important;
    float: right;
    border: 1px solid #474747;
    background: #3c404d;
    color: #fff;
    padding: 10px;
    margin: 9px;
    border-radius: 10px;
    position: relative;
}

    .combined-out::after {
        clip-path: polygon(100% 0, 0% 100%, 0 0);
        height: 20px;
        width: 20px;
        content: '';
        position: absolute;
        background: #3c404d;
    }

    .combined-out::before {
        content: attr(type);
        position: absolute;
        background: #3c404d;
        bottom: 10px;
        right: 10px;
        color: #fff;
    }

.communication-buttons {
    float: right;
    width: 152px;
    margin-top: -190px;
    border: 1px solid #00144E;
    padding: 10px;
    border-radius: 7px;
    /*margin-right: 60px;*/
}

    .communication-buttons:before {
        content: 'Communication';
        color: #00144E;
        width: 50px !important;
        /*background: #000;*/
        text-align: right !important;
        margin: 0 auto !important;
        font-weight: 900;
    }

.communication-button {
    float: right !important;
    width: 100%;
    text-align: left !important;
    margin: 0 !important;
    margin-top: 3px !important;
    border-radius: 5px !important;
}

.notification-item-icon {
    color: #fff !important;
    font-size: 18px !important;
    float: right !important;
    margin-right: 8px;
}

.notification-item-date {
}

#whatsapp-client-button {
    position: absolute;
    right: 20px;
    top: 3px;
    font-size: 22px;
    color: seagreen;
    font-weight: 900 !important;
    text-shadow: 0 0 2px #000;
    cursor: pointer;
}

    #whatsapp-client-button:after {
        position: absolute;
        left: -2px;
        top: -15px;
        font-size: 8px;
        color: #fff;
        font-weight: 900 !important;
        text-shadow: 0 0 2px #000;
        content: '';
        display: none;
        background: #00144E;
        padding: 3px;
        clip-path: polygon(100% 0, 0 0, 94% 100%);
        letter-spacing: 0.5px;
        box-shadow: 0 0 6px #000;
        width: 5px;
        height: 7px;
        text-align: center;
    }

    #whatsapp-client-button:before {
        position: absolute;
        left: -6px;
        top: -29px;
        font-size: 8px;
        color: #fff;
        font-weight: 900 !important;
        text-shadow: 0 0 2px #000;
        content: 'WHATSAPP CLIENT';
        display: none;
        background: #00144E;
        padding: 3px;
        border-radius: 5px;
        letter-spacing: 0.5px;
        box-shadow: 0 0 6px #000;
        width: 105px;
        text-align: center;
    }

    #whatsapp-client-button:hover:after {
        display: block !important;
    }

    #whatsapp-client-button:hover:before {
        display: block !important;
    }


.setup-test-email-error {
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
}

.setup-section-heading {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.email-setup-domain-resolve {
    font-size: 12px;
    margin-left: 13px;
}

.setup-section {
    border: solid 1px rgba(0,0,0,0.2);
    width: 97%;
    margin: 20px 1.5%;
    border-radius: 10px;
    padding: 20px;
}

.sidebar-close {
    color: #fff;
    background: transparent;
    /*width: fit-content;*/
    /*margin: 0 auto;*/
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    display: block;
    cursor: pointer;
    right: 0;
    clear: both;
    text-align: right;
}

    .sidebar-close:hover {
        transform: scale(0.9);
    }
/*Start Notifiactions*/
.notification-username-small {
    font-size: 8px;
    width: 100%;
    margin-top: -10px;
    font-weight: 900;
    text-transform: uppercase;
}
/*end Notifications*/
/*Start Compliance Management*/
.num-count-notifications {
    position: absolute;
    user-select: none;
    cursor: default;
    font-size: 0.7rem;
    background: #7b191900;
    width: 1rem;
    height: 1rem;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    top: 15px;
    right: 15px;
    box-sizing: border-box;
    font-weight: bolder;
    font-size: 10px;
    font-family: 'Roboto';
}

#compliance-management-modal {
    min-height: 80vh;
}

.compliance-modal-heading {
    text-align: center;
    color: #370375;
    margin-bottom: 20px;
}

.compliance-task-user-assigned {
    font-size: 10px;
    font-weight: 900;
}

    .compliance-task-user-assigned .heading {
        font-size: 9px;
        text-transform: uppercase;
        font-weight: 400;
    }

.compliance-task-user-created {
    font-size: 10px;
    font-weight: 900;
}

    .compliance-task-user-created .heading {
        font-size: 9px;
        text-transform: uppercase;
        font-weight: 400;
    }

.compliance-memo-item .heading {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 400;
}

.radio-button-heading {
    text-align: left;
    /* text-transform: uppercase; */
    font-size: 10px;
    font-weight: 500;
    margin-top: 9px !important;
    margin-bottom: -2px;
    background: #fff !important;
}

.active-tasks-assigned {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    width: 20px;
    height: 20px;
    line-height: 5 !important;
    padding: 3px;
    position: absolute;
    left: 200px;
    margin-top: -40px;
}

    .active-tasks-assigned::after {
        content: 'Tasks';
        position: absolute;
        top: 7px;
        left: -5.5px;
        color: #000 !important;
        font-size: 8px;
        text-transform: uppercase;
        font-size: 10px;
    }



    /*.active-tasks-assigned::after {
    content: 'This item has pending tasks';
    position: absolute;
    top: -30px;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 2px;
    display: none;
    width: 100%;
    height: 30px;
    line-height: 1.9;
    font-weight: 900;
    text-transform: uppercase;
    border-top: 1px solid #f5ae17;
    border-left: 1px solid #f5ae17;
    border-right: 1px solid #f5ae17;
}*/

    .active-tasks-assigned:hover {
        background: #f5ae17;
    }

.active-tasks-count {
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 900;
}

.SecurityLevelMessage {
    font-size: 15px;
    margin-top: 20px;
    text-align: center;
    color: rgba(0,0,0, 0.6);
    text-transform: uppercase;
    border: 1px solid rgba(0,0,0, 0.4);
    padding: 5px
}

.compliance-memo-delete {
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
}


    .compliance-memo-delete:hover::after {
        display: block;
    }

    .compliance-memo-delete::after {
        content: "Delete";
        color: #f5ae17;
        position: absolute;
        left: -50px;
        bottom: 8px;
        cursor: pointer;
        font-size: 11px;
        text-transform: uppercase;
        display: none;
    }

    .compliance-memo-delete:hover {
        transform: scale(0.9);
        color: #f1ab18;
    }

.compliance-memo-container {
    margin: 10px;
    max-height: 50vh;
    overflow: hidden;
    overflow-y: auto;
}

.compliance-memo-item {
    background: rgb(235 235 235);
    color: #000 !important;
    padding: 10px;
    margin: 1px;
    position: relative !important;
    cursor: pointer;
    border: solid 1px rgba(0,0,0, 0.2);
    border-radius: 3px;
}


    .compliance-memo-item:hover {
        background: #3f007b !important;
        color: #fff !important;
        padding: 10px;
        margin: 1px;
        position: relative !important;
        color: #000;
        cursor: pointer;
    }

.compliance-memo-user {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

    .compliance-memo-user::after {
        content: attr(date);
        font-size: 12px;
        font-weight: 400;
        text-transform: uppercase;
        padding-left: 5px;
    }

.compliance-memo {
    font-size: 10px;
    font-weight: 900 !important;
    text-transform: none;
}

.td-heading {
    width: 70px;
    text-align: left !important;
}

.td-summary {
    max-width: 1000px;
    overflow: hidden !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.policindicator {
    overflow: visible;
    position: relative;
}

    .policindicator::after {
        content: attr(word);
        position: absolute;
        top: -30px;
        left: -120%;
        width: 100px;
        display: none;
    }

    .policindicator:hover::after {
        display: block;
    }

#ComplianceGrid {
    border: solid 1px #000 !important;
    border-width: 0 !important;
}

#ClientGrid .e-gridheader {
    border-top-style: solid !important;
    border-width: 0 !important;
}


#ClientGrid .e-grid .e-gridheader {
    background: #fff;
    border-bottom-color: #fff;
    border-top-color: #fff;
    color: rgba(0,0,0,.54);
}

#ComplianceModal {
    max-width: 40%;
    text-align: center;
}

    #ComplianceModal .select-button {
        float: right;
        background: rgb(0, 20, 78);
        color: #fff;
        margin-top: -22px;
        margin-right: -12px;
        height: 17px;
        width: 17px;
        border-radius: 50%;
        cursor: pointer;
    }

    #ComplianceModal .learn-more {
        margin: 0px auto;
        display: block;
        width: 145px;
        overflow: hidden;
        margin-left: 41% !important;
        border: solid 1px #00144e64;
        box-shadow: inset -2px -2px 3px rgba(0,0,0,0.1), inset 2px 2px 3px rgba(0,0,0,0.1);
        border-radius: 30px;
        animation: bg infinite 0.8s;
    }

@keyframes bg {
    0% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 0%, rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    10% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 10%,rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    20% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 20%,rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    30% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 30%,rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    40% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 40%,rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    50% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 50%,rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    60% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 60%,rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    70% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 70%,rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    80% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 80%,rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    90% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 90%,rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }

    100% {
        background: linear-gradient(90deg,rgb(25, 135, 84, 0.0) 100%, rgb(25, 135, 84, 0.1),rgb(25, 135, 84, 0.0));
    }
}

#ComplianceModal .e-dlg-content {
    border-radius: 10px;
    padding-top: 30px;
}

#ComplianceGrid {
    margin: 10px;
    border: none;
}

    #ComplianceGrid th {
        margin: 10px;
        border: none !important;
        background: transparent !important;
    }

    #ComplianceGrid .e-pager .e-currentitem, #ComplianceGrid .e-pager .e-currentitem:hover {
        background: linear-gradient(45deg,#3f007b 0,#060c34 100%) !important;
        color: #fff;
        opacity: 1;
    }

    #ComplianceGrid th .e-headertext {
        margin: 10px;
        border: none;
        background: linear-gradient(45deg,#3f007b 0,#060c34 100%) !important;
        font-weight: 600 !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent;
    }

.sent-external {
    background: rgba(0, 0, 0, 0.6);
    top: 2px;
    left: 0px;
    color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding: 2px 5px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 9px 2px -7px rgb(0 0 0 / 50%);
    position: relative;
}

    .sent-external::after {
        position: absolute;
        left: 0;
        top: -30px;
        height: 30px;
        width: 295px;
        line-height: 3;
        content: 'This has been sent to External Compliance';
        background: rgba(0, 0, 0, 0.8);
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        display: none;
        font-weight: 900;
        border-left: #f1ab18 solid 1px;
        border-right: #f1ab18 solid 1px;
        border-top: #f1ab18 solid 1px;
        font-size: 10px;
    }

    .sent-external:hover {
        background: #f1ab18;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }

        .sent-external:hover::after {
            display: block;
        }

    .sent-external:hover {
        background: #f1ab18;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }

.sent-external-heading {
    font-size: 10px;
    font-weight: 600;
    display: inline;
}

.sent-external-value {
    font-weight: 400;
    font-size: 11px;
    display: inline;
}

.qa-div {
    max-height: 65vh;
    overflow: hidden;
    overflow-y: auto;
}

.btn-compliance {
    position: relative;
}

    .btn-compliance::before {
        content: attr(word);
        position: absolute;
        top: -42px;
        color: rgb(0, 20, 78);
        right: 0;
        font-size: 10px;
        background: #f1ab18;
        padding: 10px;
        padding-bottom: 20px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        line-height: 1;
        display: none;
        /*left: -75px;*/
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
        max-width: 150px;
        text-overflow: revert;
        white-space: initial;
    }

    .btn-compliance:hover {
        color: rgb(0, 20, 78) !important;
        background: #fff !important;
    }

        .btn-compliance:hover::before {
            display: block !important;
        }

.password-button {
    color: #000 !important;
    background: transparent;
    border: none;
    position: absolute;
    margin-top: 6px;
}

.prorate-upgrade {
    text-align: center;
    margin-top: 5px;
    color: rgb(0, 20, 78);
}

.package-compare-first {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 14px 12px -10px rgb(0 0 0 / 25%);
    position: relative;
    border: 1px solid rgba(0,0,0, 0.3);
    margin-top: 100px;
}

    .package-compare-first::after {
        content: "\f061";
        font-size: 20px;
        position: absolute;
        bottom: 40%;
        right: -20px;
        background: #f1ab18;
        color: #fff;
        padding: 10px;
        border-radius: 10px;
        /*box-shadow: 0 14px 12px -10px rgb(0 0 0 / 45%);*/
        font-family: "Font Awesome 6 Pro";
        line-height: 1;
        text-shadow: 0 0 5px rgba(0, 20, 78, 0.5);
        z-index: 9999;
    }

    .package-compare-first::before {
        content: "OLD";
        background: rgb(0, 20, 78);
        color: #fff;
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 9999;
        padding: 5px;
        border-radius: 10px;
        opacity: 0.4;
    }

.package-compare-second {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 14px 12px -10px rgb(0 0 0 / 45%);
    /*border: 1px solid #f1ab18;*/
    position: relative;
    transform: scale(1.1);
    margin-top: 100px;
}

    .package-compare-second::before {
        content: "NEW";
        background: rgb(0, 20, 78);
        color: #fff;
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 9999;
        padding: 5px;
        border-radius: 10px;
        opacity: 0.4;
    }

.package-compare-heading {
    font-weight: 800;
}

.package-compare-item {
}

/*Document Analyser*/

.upgrade-selection {
    height: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 12px -10px rgb(0 0 0 / 45%);
    cursor: pointer;
    transition: transform 0.5s;
    position: relative;
}

.feature-list-item {
    line-height: 0;
    width: 100%;
    text-align: center;
}

.feature-list-plus {
    font-weight: 900;
    color: #f5ae17;
    font-size: 30px;
    padding: 0px;
    text-align: center;
}

.upgrade-selection:hover {
    transform: scale(1.1);
}

    .upgrade-selection:hover .upgrade-selection-icon {
        transform: scale(0.9);
    }
/*End Compliance Management*/

.upgrade-selection-heading {
    text-align: center;
    font-size: 18px;
    background: rgb(0, 20, 78);
    color: rgb(245 174 23) !important;
    width: 105%;
    margin-left: -2.5%;
    margin-top: -10px;
    border-radius: 5px;
    height: 40px;
    position: relative;
    font-weight: 900;
    line-height: 2.3;
}
    /*
    .upgrade-selection-heading::after{
        content: attr(word);
        position: absolute;
        bottom: 3px;
        left: 0;
        color: #fff !important;
        width: 100%;
        font-size: 13px;
        text-align: center;

    }*/
    .upgrade-selection-heading::before {
        content: '\f49a';
        font-family: "Font Awesome 6 Pro";
        margin-top: -3px;
        color: rgb(245 174 23) !important;
        font-size: 17px;
        text-align: center;
        font-weight: 900;
    }

.upgrade-selection-icon {
    position: absolute;
    bottom: 50px;
    text-align: center !important;
    margin: 0 auto;
    font-size: 30px;
    display: block;
    width: 100%;
    transition: 0.5s forward !important;
    color: #f1ab18;
}

.uploaded-user {
}

.import-prompt {
    background: linear-gradient(315deg,#3f007b 0,rgb(0, 20, 78) 100%) !important;
    box-shadow: 0 14px 12px -10px rgb(0 0 0 / 45%);
}

.purp-btn {
    background: linear-gradient(315deg,#3f007b 0,rgb(0, 20, 78) 100%) !important;
    box-shadow: rgb(38 57 77) 0px 10px 20px -10px;
    border-radius: 7px !important;
    margin-top: 10px;
}

    .purp-btn:hover {
        box-shadow: rgb(38 57 77) 0px 10px 20px -10px;
        border-radius: 7px !important;
        margin-top: 10px;
        background: linear-gradient(315deg,#3f007b 0,rgb(0, 20, 78) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent;
    }

.uploaded-user-icon {
    height: 30px;
    width: 30px;
    float: left;
    z-index: 999999999;
    background-position: center !important;
    background-size: cover !important;
    border-radius: 50%;
    box-shadow: 0 0 6px rgb(0 0 0 / 30%);
}

.uploaded-user-name {
    font-size: 14px;
    font-weight: 400;
    line-height: 2;
    padding-left: 10px !important;
    float: left;
}

.e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
    border: none !important;
}

#GeneralUploads {
    border: dashed 1px #fff;
    margin: 10px;
    height: 80px;
    color: rgb(0, 20, 78);
    text-align: center;
    position: relative;
    border-radius: 10px;
    min-height: 90%;
    font-size: 22px;
    font-weight: 400 !important;
    position: relative;
    background: rgb(0, 20, 78) !important;
    cursor: pointer;
    background: linear-gradient(315deg,#3f007b 0,rgb(0, 20, 78) 100%) !important;
    box-shadow: rgb(38 57 77) 0px 10px 20px -10px;
}

    #GeneralUploads p {
        margin-top: calc(100% / 6);
        color: #fff !important;
        text-transform: uppercase;
        font-weight: 300 !important;
        text-shadow: 0 0 2px rgb(0 0 0 / 50%)
    }

/*Document Analyser*/
/*QA Component*/
.qa-row::after {
    content: '';
    width: 80%;
    height: 1px;
    margin-left: 10%;
    background: rgba(0, 20, 78, 0.4);
    margin-bottom: 12px;
    box-shadow: 0px 5px 12px rgba(0,0,0, 0.45) !important;
}

.document-update-heading {
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 20px;
    color: rgb(245 174 23);
    position: relative;
    padding-left: 10px;
}

    .document-update-heading::before {
        content: attr(step);
        background: rgb(0, 20, 78);
        color: #ffffff;
        position: absolute;
        left: -12px;
        line-height: 1.2;
        border-radius: 50%;
        text-align: center;
        height: 16px;
        width: 16px;
    }

.update-button {
    max-width: 20%;
    margin-left: 40% !important;
    margin-top: -60px;
    border-radius: 10px !important;
}

.e-dropdownbase .e-list-item,
.e-dropdownbase .e-list-item.e-item-focus {
    background: #29c2b8;
    color: #207cd9;
    min-height: 29px;
}

.policy-datail {
    color: rgba(0,0,0,1);
    font-weight: 800 !important;
    position: absolute;
    right: 10px;
    top: 10px;
}

.current-datail {
    color: #198754;
    font-weight: 900 !important;
    position: absolute;
    right: 10px;
    top: 10px;
    font-style: italic;
}

.input-group {
    float: right;
    width: calc(100% - 20px);
}

    .input-group label {
        width: 100%;
        margin-left: -20px;
    }

    .input-group .UploaderIput {
        height: 40px !important;
        width: 100%;
        border-radius: 5px;
        border: solid 1px rgb(194 194 194);
        /*margin-bottom: 0px !important;*/
        margin-left: 50px;
        float: right;
        display: block;
        z-index: 0;
        margin-top: 20px !important;
        padding-left: 8px;
    }

    .input-group .icon {
        position: absolute;
        left: -20px;
        top: 10px;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 20px;
        font-weight: 400;
        background: linear-gradient(to right, rgb(0, 20, 78), #0071c1);
        background: rgb(0, 20, 78);
        border: solid 1px rgb(0, 20, 78);
        border-top-left-radius: 5px !important;
        border-bottom-left-radius: 5px !important;
        line-height: 1.8;
        color: #ffffff;
    }

.auto-import-heading-background {
    background: #fff;
    width: fit-content;
    height: 20px;
    margin-bottom: -30px;
    margin: 0 auto;
    display: block;
}

.auto-import-heading {
    font-size: 20px;
    margin-left: 10px;
    font-weight: 400;
    background: linear-gradient(315deg,#3f007b 0,rgb(0, 20, 78) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    width: fit-content;
    text-transform: uppercase;
    text-align: center !important;
}

.analysis-toolbar {
    padding: 1px !important;
    padding-bottom: 3px;
    height: 30px;
    position: relative;
    display: block;
    z-index: 0;
    margin-bottom: 50px;
    width: 70%;
    margin: 0 auto;
    margin-top: 35px;
    background: transparent !important;
    border-radius: 7px;
    line-height: 2.5;
    color: #fff;
}

/*.analysis-update-toolbar {
    padding: 1px !important;
    padding-bottom: 3px;
    height: 30px;
    position: absolute;
    bottom: 0px;
    right: 20px;
    display: block;
    z-index: 7;
    margin-bottom: 50px;
    width: 10%;
    margin: 0 auto;
    margin-top: 60px;    
}*/

.update-policy {
    background: #fff;
    font-weight: 600;
    border: none;
    padding: 10px;
    float: left;
    /*height: 100% !important;*/
    position: relative;
    z-index: 3;
    border: solid 1px rgb(0, 20, 78);
    border-radius: 30px;
    cursor: pointer;
    margin: 0 auto;
    display: block;
}

    .update-policy p {
        background: linear-gradient(to right, rgb(0, 20, 78), #0071c1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
        z-index: 6;
        line-height: 1;
    }

    .update-policy:hover {
        background: linear-gradient(to right, rgb(0, 20, 78), #0071c1);
    }

    .update-policy p:hover {
        -webkit-text-fill-color: #fff;
    }

.capture-policy {
    background: #fff;
    font-weight: 600;
    border: none;
    margin-right: 2%;
    width: 47%;
    float: left;
    max-height: 100% !important;
    border: solid 1px rgb(0, 20, 78);
    border-radius: 30px;
    cursor: pointer;
}

    .capture-policy:hover {
        background: linear-gradient(to right, rgb(0, 20, 78), #0071c1);
    }

    .capture-policy p {
        background: linear-gradient(to right, rgb(0, 20, 78), #0071c1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
        float: left;
        width: 100%;
        text-align: center;
        max-height: 100% !important;
        line-height: 2.2 !important;
    }

        .capture-policy p:hover {
            -webkit-text-fill-color: #fff;
        }

.document-analysis {
    width: 90%;
    margin-left: 5%;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    height: 500px;
}

    .document-analysis p {
        font-weight: 900 !important;
        font-size: 12px;
    }

.document-analysis-heading {
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
}

.ComplianceUploader {
    color: #fff !important;
    text-transform: uppercase;
    text-align: left !important;
    margin-right: 30px;
    display: none;
    margin-top: -8px;
    border: none !important;
}

    .ComplianceUploader .e-file-select-wrap .e-upload-browse-btn {
        display: none !important;
    }

#DropArea {
    border: dashed 1px rgb(245 174 23);
    width: 200px;
    right: 30px;
    top: 30px;
    position: absolute;
    border-radius: 10px;
    height: 135px;
    width: 200px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center !important;
    line-height: 9;
    display: block;
}

.UploaderIput {
    height: 30px !important;
    width: 100%;
    border-radius: 5px;
    border: solid 1px rgba(0,0,0,0.4);
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    display: block;
    padding-left: 8px;
}

.UploaderLabel {
    color: #6b6b6b;
    font-size: 12px;
    margin: 15px 0;
    line-height: 0;
    display: block;
}

#FileDetails {
    border-radius: 10px;
    width: 100%;
    margin: 10px 0;
    border: 1px dashed #fff;
}

    #FileDetails .save {
        border-radius: 10px;
        height: 30px;
        width: 70px;
        border: none;
        background: #20c997;
        color: #fff;
        padding: 0;
        line-height: 1;
        margin-top: 20px;
        float: right;
    }

    #FileDetails .cancel {
        /*position: absolute;*/
        border-radius: 10px;
        top: 70px;
        left: -80px;
        height: 30px;
        width: 70px;
        border: none;
        background: #dc3545;
        color: #fff;
        padding: 0;
        line-height: 1;
        margin-top: 20px;
        margin-right: 20px;
        float: right;
    }

.ComplianceUploader .e-upload-files .e-upload-file-list {
    color: #fff;
    width: 200px;
    position: absolute !important;
    border-bottom: 1px dashed #fff !important;
    border: 1px dashed #fff !important;
    position: absolute;
    top: 30px;
    height: 200px !important;
    width: 200px;
    left: 30px;
    border-radius: 10px;
}

    .ComplianceUploader .e-upload-files .e-upload-file-list .e-file-container .e-file-name {
        color: rgb(255 255 255 / 87%) !important;
        width: 100% !important;
    }

    .ComplianceUploader .e-upload-files .e-upload-file-list .e-file-container .e-file-type {
        color: rgb(255 255 255 / 87%) !important;
    }

    .ComplianceUploader .e-upload-files .e-upload-file-list .e-file-container .e-file-size {
        color: rgb(255 255 255 / 54%) !important;
    }

.ComplianceUploader .e-upload-files .e-file-delete-btn.e-icons,
.ComplianceUploader .e-upload-files .e-file-reload-btn.e-icons,
.ComplianceUploader .e-upload-files .e-file-abort-btn.e-icons,
.ComplianceUploader .e-upload-files .e-file-pause-btn.e-icons,
.ComplianceUploader .e-upload-files .e-file-play-btn.e-icons {
    color: #fff !important;
}

.ComplianceUploader .e-file-select-wrap .e-file-drop,
.ComplianceUploader .e-bigger.e-small .e-upload .e-file-select-wrap .e-file-drop {
    font-family: inherit;
    font-size: 14px;
    margin-left: 12px;
    color: rgb(255,255,255, 0.6) !important;
}

.ComplianceUploader .e-upload-files .e-upload-file-list .e-file-container .e-file-status.e-upload-success {
    color: rgb(245 174 23) !important;
}

/*QA Component*/

tr {
    cursor: pointer;
}

th {
    cursor: default !important;
}

.txt-height {
    min-height: 250px !important;
    width: 100%;
}

    .txt-height:after {
        display: inline;
        content: attr(data-text) !important;
        position: absolute;
        right: 10px;
        bottom: -10px;
        color: #000;
        min-width: 250px;
    }

.rounded-button {
    border-radius: 7px !important;
    position: relative;
    padding: 0.5rem 0.85rem;
    overflow: visible;
}

#MemoButton:hover {
    transform: scale(1.2);
}

#CallButton:hover {
    transform: scale(1.2);
}

#MemoButton:hover {
    animation-name: call;
    animation-duration: 0.7s;
}

    #MemoButton:hover .fal {
        animation-name: callTwo;
        animation-duration: 0.7s;
    }

#CallButton:hover {
    animation-name: memo;
    animation-duration: 0.7s;
}

    #CallButton:hover .fal {
        animation-name: memoTwo;
        animation-duration: 0.7s;
    }

@keyframes call {
    0% {
        color: #fff;
        background: #0071c1;
    }

    10% {
    }

    20% {
    }

    30% {
    }

    40% {
    }

    50% {
        color: #0071c1;
        background: #ffffff;
    }

    60% {
    }

    70% {
    }

    80% {
    }

    90% {
    }

    100% {
        color: #fff;
        background: #0071c1;
    }
}

@keyframes callTwo {
    0% {
        transform: scale(1) rotate(0deg);
        color: #fff;
        background: #0071c1;
    }

    10% {
        transform: scale(1.1) rotate(45deg)
    }

    20% {
        transform: scale(1.2) rotate(90deg);
    }

    30% {
        transform: scale(1.3) rotate(135deg);
    }

    40% {
        transform: scale(1.5) rotate(180deg);
    }

    50% {
        transform: scale(2) rotate(190deg);
        color: #0071c1;
        background: #ffffff;
    }

    60% {
        transform: scale(1.5) rotate(225deg);
    }

    70% {
        transform: scale(1.4) rotate(270deg);
    }

    80% {
        transform: scale(1.3) rotate(315deg);
    }

    90% {
        transform: scale(1.2) rotate(360deg);
    }

    100% {
        transform: scale(1.1) rotate(360deg);
        color: #fff;
        background: #0071c1;
    }
}

@keyframes memo {
    0% {
        color: #fff;
        background: rgb(0, 20, 78);
    }

    10% {
    }

    20% {
    }

    30% {
    }

    40% {
    }

    50% {
        color: rgb(0, 20, 78);
        background: #ffffff;
    }

    60% {
    }

    70% {
    }

    80% {
    }

    90% {
    }

    100% {
        color: #fff;
        background: rgb(0, 20, 78);
    }
}

@keyframes memoTwo {
    0% {
        transform: scale(1) rotate(0deg);
        color: #fff;
        background: rgb(0, 20, 78);
    }

    10% {
        transform: scale(1.1) rotate(45deg)
    }

    20% {
        transform: scale(1.2) rotate(90deg);
    }

    30% {
        transform: scale(1.3) rotate(135deg);
    }

    40% {
        transform: scale(1.5) rotate(180deg);
    }

    50% {
        transform: scale(2) rotate(190deg);
        color: rgb(0, 20, 78);
        background: #ffffff;
    }

    60% {
        transform: scale(1.5) rotate(225deg);
    }

    70% {
        transform: scale(1.4) rotate(270deg);
    }

    80% {
        transform: scale(1.3) rotate(315deg);
    }

    90% {
        transform: scale(1.2) rotate(360deg);
    }

    100% {
        transform: scale(1.1) rotate(360deg);
        color: #fff;
        background: rgb(0, 20, 78);
    }
}

.e-btn::after {
    position: absolute;
    color: #fff;
    background: rgb(0, 20, 78);
    box-shadow: 0 0 6px #000;
    display: none;
    z-index: 9999 !important;
    padding: 5px;
}

.tutorial {
    border: solid var(--border) #f4ae17 !important;
    box-shadow: 0px 0px 10px #ffffff;
    background: var(--bgColorItem) !important;
    transform: scale(var(--scale));
    border-radius: 15px;
}

    .tutorial img {
        margin-top: -5px;
        max-height: 70%;
    }

    .tutorial .svg {
        margin-top: 10px;
        max-height: 70%;
    }

    .tutorial:before {
        position: absolute;
        top: -40px;
        left: 0px;
        color: #ffffff !important;
    }

#tutorialText {
    background: #00144E !important;
    /*display: none !important;*/
    visibility: hidden;
    color: #ffffff;
    position: absolute;
    max-width: 250px;
    z-index: 99996 !important;
    border: solid 1px #f4ae17;
    box-shadow: 0px 0px 6px #ffffff;
}

#tutorialShadow {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100vw;
    height: 100vh;
    background: #00000087 !important;
    z-index: 9999 !important;
}

#download-button {
    color: #fff;
    font-size: 22px;
    font-weight: 400 !important;
    display: inline;
    float: left;
    position: absolute;
    right: 15px;
    bottom: 10px;
    text-decoration: none !important;
}

    #download-button:after {
        font-size: 8px;
        text-decoration: none !important;
        content: 'Download';
        position: absolute;
        top: 20px;
        left: -7px;
    }

#analyse-button {
    color: #fff;
    font-size: 22px;
    font-weight: 400 !important;
    display: inline;
    float: left;
    position: absolute;
    right: 15px;
    bottom: 10px;
    text-decoration: none !important;
}

#download-button:after {
    font-size: 8px;
    text-decoration: none !important;
    content: 'Download';
    position: absolute;
    top: 20px;
    left: -7px;
    font-weight: 900;
}

#analyse-button:after {
    font-size: 8px;
    text-decoration: none !important;
    content: 'Analyse';
    position: absolute;
    top: 20px;
    left: -3px;
    font-weight: 900;
}

#download-button:hover, #download-button:hover i, #download-button:hover:after,
#analyse-button:hover, #analyse-button:hover i, #analyse-button:hover:after {
    transform: scale(0.95);
}

#download-button:hover {
    color: #fff;
    font-size: 22px;
    font-weight: 400 !important;
    display: inline;
    float: left;
    position: absolute;
    right: 15px;
    bottom: 10px;
    text-decoration: none !important;
}

* {
    font-family: 'Montserrat', sans-serif;
}

h1:focus {
    outline: none;
}

a,
.btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

#wav-play {
    margin: 0 auto;
    display: block;
    background: transparent;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    color: #fff !important;
    border: solid 1px #ffffff;
    font-size: 30px;
    margin-top: 15px;
    text-shadow: 0 0 5px #f1ab18;
    box-shadow: 0 0 5px #f1ab18;
    /*padding-left: 13px;*/
}

#recording-time {
    color: #fff;
    width: 100%;
}

#duration {
    text-align: right;
    float: right;
}

#waveform {
    margin-top: 20px;
}

#Recording .e-dlg-content {
    display: block;
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: normal;
    line-height: normal;
    overflow: auto;
    overflow-x: hidden;
    border-radius: 7p;
    background: #1c2643 !important;
    border-radius: 7px !important;
}

#WaveTwo {
    width: 100% !important;
}

/* #dial-pad {
    display: none !important;
    visibility: hidden !important;
}
#calling-pad {
    display: none !important;
    visibility: hidden !important;
} */
/* #lead-closing-pad{
    visibility: visible !important;
    display: block !important;
} */

.cdr-status {
    text-transform: uppercase;
}

#on-call-answer {
    display: inline-block;
    padding: 4px 30px;
    margin: 10px;
    color: white;
    border-radius: 11px;
    cursor: pointer;
    margin: 20px auto;
    height: 45px;
    line-height: 2.5;
    visibility: visible;
    position: relative;
    transition: opacity 0.3s ease-in-out;
}

#on-call-complete {
    display: inline-block;
    padding: 4px 30px;
    margin: 10px;
    color: white;
    border-radius: 11px;
    cursor: pointer;
    margin: 20px auto;
    height: 45px;
    line-height: 2.5;
    visibility: visible;
    position: relative;
    transition: opacity 0.3s ease-in-out;
}


/*Start Dialer Page /Dialer*/
/*Start Dialer Toolbar*/

.blank-line {
    background: #fff !important;
}

.dialer-dash-table th {
    text-transform: uppercase;
    padding: 10px;
    font-size: 10px;
}

#container-call {
    display: none;
}

#DialerButton:before {
    content: attr(display-text);
    position: absolute;
    top: -30px;
    left: -100px;
    background: rgb(0, 20, 78);
    width: 150px;
    border-radius: 10px;
    font-size: 15px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .4);
    display: none;
}

#DialerButton:hover:before {
    display: block !important;
}

.dialer-dash-table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

    .dialer-dash-table tr {
        padding: 20px;
        cursor: pointer;
        box-shadow: 0 0 1px #000000;
        border-collapse: separate;
        border-spacing: 0 15px;
        border-radius: 7px;
        border: solid 1px #000;
    }

        .dialer-dash-table tr:hover td {
            cursor: pointer;
            background: #00144e !important;
            color: #fff;
        }

        .dialer-dash-table tr:hover .dialer-dash-lead {
            box-shadow: rgb(255 255 255 / 20%) 0px 7px 15px 0px !important;
        }

    .dialer-dash-table td {
        border: solid 1px #000;
        border-style: none none none none;
        padding: 10px;
        padding-bottom: 10px;
        background: rgb(225 227 234);
        font-size: 15px;
        line-height: 2.8 !important;
        font-weight: 500;
        margin-top: 10px !important;
    }

        .dialer-dash-table td:first-child {
            border-top-left-radius: 7px !important;
            border-bottom-left-radius: 7px !important;
        }

        .dialer-dash-table td:last-child {
            border-top-right-radius: 7px !important;
            border-bottom-right-radius: 7px !important;
        }

.dialer-dash-lead {
    width: 100%;
    background: #b3b9ca !important;
    height: 41px !important;
    color: #000;
    padding: 3px;
    line-height: 2;
    border-radius: 20px;
    box-shadow: rgb(100 100 111 / 30%) 0px 7px 29px 0px !important;
}

.dialer-dash-lead-icon {
    float: left;
    background: rgb(225 227 234);
    border-radius: 20px;
    width: 35px;
    height: 35px;
    font-size: 18px;
    text-align: center;
    font-weight: 800;
    line-height: 2.1;
    color: #4e4e4e;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4), -2px -2px 4px rgba(255, 255, 255, 0.6), inset 2px 2px 6px rgba(0, 0, 0, 0.2), inset -2px -2px 6px rgba(255, 255, 255, 0.4) !important;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
    margin-top: -5px;
    margin-left: -4px;
}

.dialer-dash-lead-name {
    float: left;
    margin-left: 15px;
    font-size: 13px;
}

.dialer-call-div {
    float: right;
    background: #00144E;
    width: 110px;
    color: #fff;
    text-align: center;
    font-weight: 800;
    position: relative;
    height: 26px;
    line-height: 2;
    border-radius: 20px;
    overflow: hidden;
    margin-left: 15px;
}

.dialer-call-icon {
    /* background: #e8a61a; */
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 3px;
    border-radius: 20px;
    padding: 0 !important;
    font-size: 10px;
}

.dialer-call-text {
    margin-left: 25px;
    font-size: 12px;
    line-height: 2.2;
}

#DialerPage .mini-stats-desc h6 {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 0px !important;
    position: absolute;
    bottom: -5px;
    left: 20px;
    line-height: 2.5;
}

#DialerPage .mini-stats-desc p {
    font-size: 45px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: -10px;
    margin-bottom: -20px !important;
    line-height: 2.5;
}

#DialerToolbar.e-toolbar .e-toolbar-items.e-tbar-pos {
    background: #00144E;
    height: 60px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

#toolbar {
    padding-right: 1rem;
}

    #toolbar .cf:before,
    #toolbar .cf:after {
        content: "";
        display: table;
    }

    #toolbar .cf:after {
        clear: both;
    }

    #toolbar ul {
        padding-left: 0px;
    }

    #toolbar p {
        bottom: 10px;
        left: 10px;
        position: absolute;
    }

    #toolbar a {
        color: #fff;
        text-decoration: none;
    }

    #toolbar .toolbar {
        transition: all 1s ease;
        width: 100%;
    }

        #toolbar .toolbar li {
            float: left;
            list-style: none;
            padding-left: 1rem;
        }

        #toolbar .toolbar a {
            color: #fff;
            display: block;
            font-size: 14px;
            line-height: 40px;
        }

        #toolbar .toolbar li:first-child a {
            border-left: none;
            border-radius: 10px 0 0 10px
        }

        #toolbar .toolbar li:last-child a {
            border-right: none;
            border-radius: 0 10px 10px 0
        }

        #toolbar .toolbar a:hover {
            color: #fff;
        }


.dialer-dash-icon {
    position: absolute;
    top: 30px;
    right: -30px;
    font-size: 160px;
    color: rgb(0, 20, 78);
    --fa-primary-color: rgb(0, 20, 78);
    /* --fa-primary-color: rgb(241, 171, 24);   */
    --fa-secondary-color: rgb(0, 20, 78);
    opacity: 0.3;
}

    .dialer-dash-icon .secondary {
        position: absolute;
        top: 10px;
        right: -30px;
        font-size: 180px;
        color: #000;
    }

/*End Dialer Toolbar*/
/*Start General*/
.campaign-channel-icon {
    background: #26b050;
    color: #ffffff !important;
    padding: 0px 5px;
    border-radius: 7px;
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
    font-size: 25px;
    line-height: 1.5;
}

#CampaignGrid td {
    font-weight: 600 !important;
}

#CampaignGrid th {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #00144E;
}

.campaign-created-user {
    font-weight: 700 !important;
    color: seagreen;
}

.import-table-div {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

    .inputfile + label {
        font-size: 1em;
        font-weight: 700;
        color: white;
        background: #f3ad17;
        display: inline-block;
        padding: 5px;
        text-transform: uppercase;
        border-radius: 3px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
    }

        .inputfile:focus + label,
        .inputfile + label:hover {
            background: #00144E;
        }

    .inputfile + label {
        cursor: pointer;
        /* "hand" cursor */
    }

/*End General*/
/*End Dialer Page /Dialer*/

/*Start Campaign Setup /CampaignSerup*/
/*CampaignSetup Toolbar*/
#CampaignToolbar .mini-stats-desc h6 {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 0px !important;
}

#CampaignToolbar .mini-stats-desc p {
    font-size: 35px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: -10px !important;
}

#CampaignToolbar.e-toolbar .e-toolbar-items.e-tbar-pos {
    background: #00144E;
    height: 0px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

#toolbar {
    padding-right: 1rem;
}

    #toolbar .cf:before,
    #toolbar .cf:after {
        content: "";
        display: table;
    }

    #toolbar .cf:after {
        clear: both;
    }

    #toolbar ul {
        padding-left: 0px;
    }

    #toolbar p {
        bottom: 10px;
        left: 10px;
        position: absolute;
    }

    #toolbar a {
        color: #fff;
        text-decoration: none;
    }

    #toolbar .toolbar {
        transition: all 1s ease;
        width: 100%;
    }

        #toolbar .toolbar li {
            float: left;
            list-style: none;
            padding-left: 1rem;
        }

        #toolbar .toolbar a {
            color: #fff;
            display: block;
            font-size: 14px;
            line-height: 40px;
        }

        #toolbar .toolbar li:first-child a {
            border-left: none;
            border-radius: 10px 0 0 10px
        }

        #toolbar .toolbar li:last-child a {
            border-right: none;
            border-radius: 0 10px 10px 0
        }

        #toolbar .toolbar a:hover {
            color: #fff;
        }


/*End Campaign Setup Toolbar*/

#NewCampaignModal {
    width: 50%;
}

    #NewCampaignModal .e-dlg-header-content {
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
        background: #00144E;
        color: #ffffff !important;
    }

    #NewCampaignModal .e-dlg-header {
        color: #ffffff !important;
    }

    #NewCampaignModal .e-dlg-content {
        border-bottom-left-radius: 7px !important;
        border-bottom-right-radius: 7px !important;
        padding-top: 20px;
    }

    #NewCampaignModal .e-outline {
        background: #ffffff;
        color: #000000 !important;
    }

    #NewCampaignModal .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
        background: transparent;
        border-color: rgba(241, 171, 24, 0.6);
        color: rgb(241, 171, 24);
        border-radius: 50%;
        bottom: 0;
        float: right;
        height: 30px;
        left: 6px;
        position: relative;
        width: 30px;
    }

    #NewCampaignModal .e-btn .e-btn-icon.e-icon-dlg-close {
        font-size: 12px;
        width: auto;
        color: #f1ab18;
    }

.wizard-forward {
    background: #00144E !important;
    color: #ffffff !important;
    margin-top: 20px;
}

.wizard-back {
    background: #e8a61a !important;
    color: #ffffff !important;
    margin-top: 20px;
}

.wizard-step-heading {
    text-align: left;
    text-transform: uppercase;
    font-size: 25px;
}

.wizard-step-text {
    text-align: left;
    font-size: 15px;
}

.wizard-finalise-item {
    font-weight: 700;
    font-size: 15px;
}

.remove-button {
    background: #dc3545 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    margin-top: 0px;
}

/*End Campaign Setup /CampaignSerup*/

#on-call-answer:after {
    font-size: 12px;
    position: absolute;
    bottom: -25px;
    left: 10px;
    color: white;
    border-radius: 11px;
    visibility: visible;
    content: 'Answer';
    text-transform: uppercase !important;
    opacity: 0;
}

#on-call-answer:hover:after {
    transition: opacity 0.3s ease-in-out;
    opacity: 1 !important;
}

#on-call-complete:after {
    font-size: 12px;
    position: absolute;
    bottom: -25px;
    left: -85px;
    color: white;
    border-radius: 11px;
    visibility: visible;
    content: 'SUBMIT OUTCOME';
    text-transform: uppercase !important;
    opacity: 0;
    width: 250px;
}

#on-call-complete:hover:after {
    transition: opacity 0.3s ease-in-out;
    opacity: 1 !important;
}

#on-call-hangup {
    display: inline-block;
    padding: 4px 30px;
    margin: 10px;
    color: white;
    border-radius: 11px;
    cursor: pointer;
    margin: 20px auto;
    height: 45px;
    line-height: 2.5;
    visibility: visible;
    position: relative;
}

    #on-call-hangup:after {
        font-size: 12px;
        position: absolute;
        bottom: -25px;
        left: 10px;
        color: white;
        border-radius: 11px;
        visibility: visible;
        content: 'hang up';
        text-transform: uppercase !important;
        opacity: 0;
    }

    #on-call-hangup:hover:after {
        transition: opacity 0.3s ease-in-out;
        opacity: 1 !important;
    }

.show-dialer-active {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1003;
    width: 103px;
    height: 38px;
    background: #e8a61a !important;
    box-shadow: rgb(255 255 255 / 30%) -1px -1px 4px;
    height: 60px;
    width: 60px;
    border-top-left-radius: 50%;
    font-size: 22px;
    text-shadow: 0 0 5px #000000bd;
    color: #fff !important;
    border: none;
}

.show-dialer-inactive {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1003;
    width: 103px;
    height: 38px;
    background: #00144e !important;
    box-shadow: rgb(0 0 0 / 80%) -1px -1px 4px;
    height: 60px;
    width: 60px;
    border-top-left-radius: 50%;
    font-size: 22px;
    text-shadow: 0 0 5px #000000bd;
    color: #fff !important;
    border: none;
}

.show-dialer:hover {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1003;
    width: 103px;
    height: 38px;
    background: #00144e;
    box-shadow: 0 0px 15px #00000040;
    height: 60px;
    width: 60px;
    border-top-left-radius: 50%;
    /* border-top-right-radius: 50%; */
    font-size: 22px;
    text-shadow: 0 0 5px #000000bd;
}


#container-call {
    opacity: 1;
    background: #081436;
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
    position: fixed;
    bottom: 0 !important;
    right: 0px;
    z-index: 1002 !important;
    border-top-left-radius: 15px;
    width: 290px;
    transition: opacity 0.5s ease-in-out !important;
    min-height: 570px !important;
    max-height: 570px !important;
    display: flex !important;
}

#phoneNumber {
    font-size: 2rem;
    height: 60px;
    color: #ffffff;
    text-align: center;
    height: 70px;
    background: #1f325e;
    margin: 5px;
    margin-top: 20px;
    /*border-top-left-radius: 10px;*/
    /*border-top-right-radius: 10px;*/
    line-height: 2;
}

#rec-div {
    font-size: 12px !important;
    float: right;
    margin-right: 20px;
    color: #ffffff;
    text-transform: uppercase !important;
    position: absolute;
    right: 0;
    display: none;
}

#rec-text {
    font-size: 10px;
    margin-right: 5px;
}

#rec-dot {
    color: red;
    font-size: 10px;
}

.e-dialog {
    border-radius: 7px !important;
}

/*#dialer-tabs{
    margin: 30px auto;
    display: block;
    width: 100%;
}*/
#missed-call-count {
    font-size: 15px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: red;
    padding: 5px;
    line-height: 0.5;
    border-radius: 50%;
    box-shadow: 0 0 5px #000;
}

#dialer-tabs .e-tab-header .e-toolbar-items {
    background: transparent;
    /*color: #ffffff !important;*/
    /*border: 2px solid blue;*/
}

#call-client-button {
    position: absolute;
    right: 46px;
    top: 5px;
    font-size: 19px;
    color: seagreen;
    font-weight: 900 !important;
    text-shadow: 0 0 2px #000;
    cursor: pointer;
}

    #call-client-button:after {
        position: absolute;
        left: -2px;
        top: -15px;
        font-size: 8px;
        color: #fff;
        font-weight: 900 !important;
        text-shadow: 0 0 2px #000;
        content: '';
        display: none;
        background: #00144E;
        padding: 3px;
        clip-path: polygon(100% 0, 0 0, 94% 100%);
        letter-spacing: 0.5px;
        box-shadow: 0 0 6px #000;
        width: 5px;
        height: 7px;
        text-align: center;
    }

    #call-client-button:before {
        position: absolute;
        left: -6px;
        top: -29px;
        font-size: 8px;
        color: #fff;
        font-weight: 900 !important;
        text-shadow: 0 0 2px #000;
        content: 'CALL CLIENT';
        display: none;
        background: #00144E;
        padding: 3px;
        border-radius: 5px;
        letter-spacing: 0.5px;
        box-shadow: 0 0 6px #000;
        width: 65px;
        text-align: center;
    }

    #call-client-button:hover:after {
        display: block !important;
    }

    #call-client-button:hover:before {
        display: block !important;
    }

#email-client-button {
    position: absolute;
    right: 20px;
    top: 3px;
    font-size: 20px;
    color: seagreen;
    font-weight: 900 !important;
    text-shadow: 0 0 2px #000;
    cursor: pointer;
}

.tooltip {
    position: relative;
    opacity: 1;
}

    .tooltip:before,
    .tooltip:after {
        display: block;
        opacity: 0;
        pointer-events: none;
        position: absolute;
    }

    .tooltip:after {
        border-right: 6px solid transparent;
        border-top: 6px solid rgba(0,0,0,.75);
        border-left: 6px solid transparent;
        content: '';
        height: 0;
        top: -9px;
        left: 6px;
        width: 0;
    }

    .tooltip:before {
        background: #00144E;
        font-size: 8px;
        font-weight: 600 !important;
        text-shadow: 0 0 2px #000;
        border-radius: 2px;
        color: #fff;
        content: attr(data-title);
        padding: 3px;
        border-radius: 5px;
        letter-spacing: 0.5px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        left: -6px;
        top: -26px;
        white-space: nowrap;
    }

.fade:not(.show) {
    opacity: 1;
}

.tooltip.fade:after,
.tooltip.fade:before {
    transform: translate3d(0,-10px,0);
    transition: all .15s ease-in-out;
}

.tooltip.fade:hover:after,
.tooltip.fade:hover:before {
    opacity: 1;
    transform: translate3d(0,0,0);
}


#dialer-tabs .e-tab-header .e-toolbar-item .e-tab-text {
    display: inherit;
    font-family: inherit;
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
}

#dialer-tabs .e-toolbar-item.e-active.e-ileft .e-tab-text {
    color: #ffffff !important;
    font-weight: 800 !important;
}

#dialer-tabs .e-tab-header .e-indicator {
    background: #fff;
}

#dialer-tabs .e-tab-header {
    /*background: #fff !important;*/
    margin-top: 0px
}




.WhatsappChatHeader {
    height: 60px;
    background: #ededed;
    color: #000;
    padding: 12px;
}

.WhatsappChatView {
    height: calc(100vh - 241px);
    overflow: auto;
    padding: 20px;
    display: flex;
    flex-direction: column-reverse;
    background: #e9e4dd;
    background-image: url('/Images/wa-bg.png');
    background-size: contain;
    background-position: center;
}

.payment-button {
    background: #e5ecff;
    border-radius: 5px !important;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    font-weight: 600;
    padding: 5px 8px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.cancel-button {
    background: #e5ecff;
    border-radius: 5px !important;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    font-weight: 600;
    padding: 5px 8px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.WhatsappChatSendBox {
    height: 53px;
    background: #ededed;
    color: #000;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border-radius: 0px 0px 10px 0px;
}

.WhatsappChatMessageIn {
    border-radius: 10px;
    padding: 20px 20px;
    border: none;
    margin: 10px 20px;
    background: #fff;
    width: 70%;
    float: left;
    color: #000;
    position: relative;
    z-index: 5;
}

    .WhatsappChatMessageIn::before {
        content: '';
        position: absolute;
        top: 10px;
        left: -25px;
        background: #fff;
        -webkit-clip-path: polygon(100% 14%, 100% 78%, 0 63%);
        clip-path: polygon(100% 14%, 100% 78%, 0 63%);
        height: 55px;
        width: 45px;
        /*box-shadow: 0 0 12px #000 !important;*/
        z-index: 1;
    }

.WhatsappChatMessageOut {
    border-radius: 10px;
    padding: 20px 20px;
    border: none;
    margin: 10px 20px;
    background: rgb(220 248 198);
    color: #000;
    width: 70%;
    float: right;
    /*box-shadow: 0 0 5px rgba(0,0,0,0.2);*/
    position: relative;
}

    .WhatsappChatMessageOut::after {
        content: '';
        position: absolute;
        bottom: 10px;
        right: -25px;
        background: rgb(220 248 198);
        -webkit-clip-path: polygon(0 8%, 0 76%, 100% 68%);
        clip-path: polygon(0 8%, 0 76%, 100% 68%);
        height: 55px;
        width: 45px;
    }

.messageName {
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
}

.messageTime {
    font-weight: 900;
    width: 100%;
    font-size: 12px;
}

.messageStatus {
    font-weight: 900;
    text-align: right;
    width: 100% !important;
    display: block;
    margin-top: -18px;
}

.WhatsappChatsList {
    list-style: none;
    padding: 0;
    overflow: auto;
}

.WhatsappChatsListItem {
    line-height: 3.5;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 20px !important;
}

    .WhatsappChatsListItem:hover {
        line-height: 3.5;
        cursor: pointer;
        background: #c5c5c5;
        color: #000;
        margin: 0 !important;
        padding: 0 20px !important;
    }

.WhastappChatSendBoxText {
    border: 1px solid rgba(0,0,0,0.4) !important;
    height: 35px;
    color: #000 !important;
    width: 90% !important;
    margin-left: 30px;
    padding-left: 12px;
    padding-top: 3px;
    margin-top: 8px;
    border-radius: 20px !important;
    line-height: 2 !important;
}

.WhastappChatSendBoxButton {
    z-index: 99;
    position: relative;
    border-radius: 50% !important;
    margin-left: -100px;
    margin-top: 5px;
    background: transparent !important;
    color: rgba(0,0,0,0.4) !important;
    box-shadow: none !important;
    /*border: 1px solid rgba(0,0,0,0.4) !important;*/
    padding: 10px 9px 10px 10px !important;
    line-height: 0 !important;
}

    .WhastappChatSendBoxButton:hover .fal {
        color: rgb(220 248 198);
        filter: drop-shadow(0 0 1px rgba(0,0,0,0.4));
    }

    .WhastappChatSendBoxButton .fal {
        font-size: 22px !important;
        margin: 0 !important;
        font-weight: 900;
    }

.WhatsappChatListContainer {
    height: calc(100vh - 187px);
    overflow: auto;
    background: #ededed;
    margin-top: 0px;
    border-bottom-left-radius: 20px;
}

.WhatsappChatListContainerButtonContainer {
    background: #ececec;
    width: 100%;
    height: 59px;
    position: relative;
    line-height: 2.3;
    padding-left: 10px
}

.WhatsappChatListContainerButtonContainerHeading {
    font-size: 25px;
    font-weight: 400 !important;
}

.WhatsappChatListContainerButton {
    position: absolute;
    right: 10px;
    top: 12px;
    background: transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    /*border: 2px solid rgba(0,0,0,0.4) !important;*/
}

    .WhatsappChatListContainerButton .fal {
        color: rgba(0,0,0,0.4);
        font-weight: 900;
        font-size: 25px !important;
    }

    .WhatsappChatListContainerButton:hover .fal {
        color: rgb(220 248 198) !important;
        filter: drop-shadow(0 0 1px rgba(0,0,0,0.4));
    }

.status-icon {
    position: absolute;
    right: 20px;
    bottom: 15px;
    font-size: 18px;
    font-weight: 400 !important;
}

.info-icon {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 10px;
    font-weight: 400 !important;
    border-radius: 50%;
    color: rgba(0,0,0,0.4);
    border: .5px solid rgba(0,0,0,0.4);
    padding: 2px 6px;
    font-weight: 900;
    cursor: pointer;
}

    .info-icon:hover {
        color: #fff;
        background: rgba(0,0,0,0.4);
    }

.second-pane {
    max-height: calc(100vh - 160px) !important;
    overflow: auto !important;
    padding-bottom: 50px;
}

    .second-pane::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background: #F5F5F5;
    }

    .second-pane::-webkit-scrollbar {
        width: 10px;
        background: #F5F5F5;
    }

    .second-pane::-webkit-scrollbar-thumb {
        border-radius: 10px;
        /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
        background: #00144e;
    }


button {
    background: #e5ecff;
    border-radius: 5px !important;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.2);
    font-weight: 600;
    padding: 5px 8px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.payment-shadow {
    position: absolute;
    height: 100vh !important;
    width: 100vw !important;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: grid;
    align-content: center;
}

.payment-container {
    width: 50%;
    margin: 0 auto;
    background: #fff;
    /*min-height: 80vh;*/
    padding: 20px;
    border-radius: 30px;
}

.button-div {
    max-width: fit-content;
    margin: 0 auto;
}

.pill-container {
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 15px;
    display: block;
}

.pill::after {
    content: '';
    background: var(--pill-color);
    /*background: rgba(0,0,0,0.6);*/
    position: absolute;
    bottom: -5px;
    left: 10%;
    height: 10px;
    width: 80%;
    filter: blur(10px);
    z-index: 9;
    opacity: 0.8
}

.pill::before {
    content: '';
    /*background: var(--pill-color);*/
    background: rgba(0,0,0,0.3);
    position: absolute;
    bottom: -2px;
    left: 5%;
    height: 3px;
    width: 90%;
    filter: blur(2px);
    z-index: 7;
    opacity: 1;
}

.pill {
    background: var(--pill-color);
    width: fit-content;
    color: #fff;
    font-size: 12px;
    padding: 5px 7px;
    border-radius: 30px;
    display: inline-block;
    position: relative;
    margin: 0 auto;
    z-index: 10;
}

    .pill p {
        margin-left: 5px;
        display: inline;
        position: relative;
        color: var(--text-color);
        text-shadow: 0 0 1px rgba(255,255,255,.8);
        font-weight: 500;
        z-index: 99;
    }

        .pill p::after {
            content: '';
            position: absolute;
            width: 200%;
            top: -10px;
            left: -30px;
            height: 20px;
            background: rgba(255,255,255,0.1);
            z-index: 98;
        }

    .pill i {
        color: var(--icon-color);
        text-shadow: 0 0 1px rgba(255,255,255,.8);
        font-weight: 400;
    }

.package-card {
    margin: 0px !important;
    margin-top: 30px;
    /*padding-bottom: 5px;*/
    box-shadow: 0 0 3px rgba(0,0,0,0.1), 0 12px 12px -12px rgba(0,0,0,0.2);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    display: block;
    background: #fff;
    z-index: 999;
    min-height: fit-content;
    border: 5px solid #1aa0d3;
}

.package-card-image {
    min-height: 50px;
    width: 100%;
    background: transparent;
    padding: 5px 10px;
    /*border-radius: 10px;*/
}

    .package-card-image img {
        margin: 0 auto;
        display: block;
        height: 100px;
        margin-top: -50px;
        object-fit: contain;
        width: 60%;
    }

.package-card-heading {
    color: #2E2E2E;
    padding: 0px 14px;
    font-size: 20px;
font-weight: 600;
text-shadow: 0 0 1px #000;

}

    .package-card-heading p {
        margin: 0 !important;
    }

.package-card-label {
    color: #4E4E4E;
    padding: 5px 14px;
}

.package-card-body {
    color: #4E4E4E;
    padding: 0px 14px;
    margin-top: 14px;
    font-size: 14px;
}

.active {
}

.best-value {
    transform: scale(1.1);
    border-color: #f1ab18;
    box-shadow: 0 0 3px rgba(0,0,0,0.1), 0 12px 12px -12px rgba(0,0,0,0.4);
}

.modal-buttons {
    width: 90%;
    margin: 0 auto;
    margin-top: 15px;
}

.package-select-button {
    margin: 0px 0px;
    color: #fff;
    width: 49%;
    line-height: 2;
    text-align: center;
    border-radius: 10px;
    font-weight: 400;
    display: inline-block;
    background: #333D57;
    border: 1px solid #333D57;
    font-size: 14px;
}

.best-value .package-select-button {
    background: #f1ab18;
    margin: 20px 0px;
    border: 1px solid #f1ab18;
    color: #fff;
    width: 48%;
    line-height: 2;
    text-align: center;
    border-radius: 10px;
    font-weight: 400;
    display: inline-block;
    font-size: 14px;
}
    .best-value .package-select-button:hover {
        color: #f1ab18;
    }

.package-detail-button {
    margin: 20px 0px;
    border: 1px solid #6E6E6E;
    color: #6E6E6E;
    width: 48%;
    line-height: 2;
    text-align: center;
    border-radius: 10px;
    font-weight: 400;
    display: inline-block;
    font-size: 14px;
}

.package-select-button:hover {
    background: transparent;
    color: #1aa0d3;
}

.package-detail-button:hover {
    background: #6E6E6E;
    color: #fff;
}

.package-select-button-text {
    position: absolute;
    bottom: 12px;
    left: 5%;
    color: #4E4E4E;
    width: 25%;
    line-height: 2;
    text-align: left;
    border-radius: 12px;
    padding: 0 0px;
}

.package-select-button i, .package-detail-button i {
    float: right;
    margin-right: 5px;
    margin-top: 8px;
    display: none;
}

sup{
    font-size: 16px;
    color: #f1ab18;
    top: -2px
}

.best-value .package-card-heading::after {
    background: transparent;
    content: '\f005\f005\f005\f005\f005';
    color: #d3a41a;
    font-size: 10px;
    box-shadow: none;
    text-shadow: none;
    opacity: 1;
    font-family: "Font Awesome 6 Pro";
    margin-left: 50px;
    top: 0;
    margin-top: -21px;
    display: block;
}
.best-value .package-card-heading::before {
    position: absolute;
    top: 42px;
    right: 13px;
    background: transparent;
    content: '';
    color: #d3a41a;
    padding: 2px;
    font-size: 8px;
    box-shadow: none;
    text-shadow: none;
    opacity: 1;
    /*font-family: "Font Awesome 6 Pro";*/
}

.payment-success-icon {
    font-size: 85px;
    border: 8px solid #26b050;
    width: fit-content;
    line-height: 0;
    border-radius: 50%;
    padding: 10px 18px;
    color: #26b050;
    margin: 0 auto;
    margin-top: 20px;
}

.payment-success-text {
    text-align: center;
    margin-top: 20px;
}

.payment-continue {
    margin: 20px auto;
    display: block;
}

input:not(:active) + #h4-container h4 {
    opacity: 0;
    margin-top: -50px;
    pointer-events: none;
}

/*button.step, input.step {
    background: linear-gradient(to right, #1386e2 40%, #1597ff);
    border: none;
    color: #fff;
    box-shadow: none;
    padding: 10px 20px;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    border-radius: 10px !important;
}

    button.step:hover, input.step:hover {
        color: #fff !important;
        background: #00144E;
        
    }*/

.kanban-custom-icon {
    width: fit-content;
    color: #1e48c3;
    border-radius: 2px;
    background: #e9eefb;
    padding: 0;
    line-height: .7;
    padding: 7px 10px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
}

    .kanban-custom-title {
        font-weight: 600 !important;

    }
.kanban-custom-summary {
    overflow: hidden;
    padding-right: 90px;
    word-break: break-word;
    height: 100px;
    text-overflow: ellipsis;
    max-width: 100%;
}
    .kanban-custom-summary p {
        width: 100%;
        max-height: 90px;
        overflow: hidden;
        text-overflow: ellipsis !important;
        line-height: 1.5;
    }
    .kanban-custom-Created {
        position: absolute;
        right: 10px;
        bottom: 35px;
        width: fit-content;
        font-size: 12px;
        border-radius: 10px;
        border: 1px solid #e9eefb;
        line-height: 1.5;
        padding: 0 5px;
        color: #00144e;
    }
    .kanban-custom-Created i {
        font-weight: 900;
        color: #26b050;
    }
.kanban-custom-Due {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: fit-content;
    font-size: 12px;
    border-radius: 10px;
    border: 1px solid #e9eefb;
    line-height: 1.5;
    padding: 0 5px;
    color: #00144e;
}
    .kanban-custom-Due i {
        font-weight: 900;
        color: #ceaa90;
    }

.time-being-tracked{
    position: absolute;
    top: -12px;
    left: -3px;
    font-size: 12px;
    font-weight: 600 !important;
    background: #26b050;
    color: #fff;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    padding: 5px 3px;
    line-height:0;
    width: calc(100% + 6px);
    text-align: center;
}
    .time-being-tracked p {
        padding: 0;
        margin: 0;
        padding: 1px 3px;
    }
    .mapping-card {
        height: 360px !important;
        display: inline-block !important;
        padding: 10px 5px;
    }
    .mapping-card:hover {
        transform: scale(1.08);
        z-index: 99;
        transition:all 0.2s ease-in-out;
    }
    .mapping-card::before {
        content: '';
        background: linear-gradient(to bottom, #00144e 10%, #fff);
        width: 100%;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .mapping-card::after {
        content: '';
        background: #fff;
        width: 150%;
        height: 60px;
        position: absolute;
        top: 80px;
        left: 0;
        z-index: 3;
        filter: blur(25px)
    }
.mapping-card {
    border-radius: 10px !important;
}
    .mapping-card .e-columnheader {
        display: none;
    }
.mapping-header{
    display:block;
    position: relative;
    color: #fff !important;
    z-index: 4;
    margin-top: -10px;
    margin-bottom: 15px;
    font-weight: 300;
}
.mapping-card .e-grid .e-gridheader {
    background: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    color: transparent;
}
    .mapping-card .sf-grid {
        max-height: 280px !important;
        border: none;
        overflow: auto !important;
        display: grid;
        align-content: center;
        z-index: 4;
        background: transparent !important;
    }
.mapping-card .e-grid .e-gridcontent, .mapping-card .e-grid .e-content, .mapping-card .e-grid .e-table {
    background: transparent;
}
.mapping-card .e-grid .e-rowcell, .e-grid .e-groupcaption,
.mapping-card .e-grid .e-indentcell,
.mapping-card .e-grid .e-recordplusexpand,
.mapping-card .e-grid .e-recordpluscollapse,
.mapping-card .e-grid .e-rowdragdropcell,
.mapping-card .e-grid .e-detailrowcollapse,
.mapping-card .e-grid .e-detailrowexpand,
.mapping-card .e-grid .e-detailindentcell,
.mapping-card .e-grid .e-detailcell {
    border-color: transparent;
    background: transparent !important;
}
.mapping-add-button {
    position: absolute;
    top: 14px;
    right: 13px;
    width: fit-content;
    z-index: 4;
    background: #fff !important;
    color: #00144e !important;
    cursor: pointer;
}
    .mapping-add-button:hover, .mapping-add-button:hover i {
        background: #f5ae17 !important;
        fill: #fff !important;
        color: #fff !important;
    }
    .mapping-edit-button {
        position: absolute;
        bottom: 15px;
        right: 15px;
        width: 43%
    }

.mapping-item {
    position: relative;
    width: 200px;
    font-weight: 600;
}
.mapping-item-buttons {
    display: none;
    right: -160px;
    top: -4px;
    width: 100%;
}
.mapping-item-buttons-button {
    /*border-radius: 50% !important;*/
}
.mapping-item:hover .mapping-item-buttons {
    position: absolute;
    display: block;
}
.kanban-custom-toolbar {
    margin: 20px 20px;
    display: flex;
    justify-content: space-between;
}
.kanban-custom-toolbar-heading{
    font-size: 22px;
}
.customtoolbar-item {
    max-width: fit-content;
    display: flex;
    justify-content: space-between;
}
.drop-down-text{
    font-size: 22px;
}
.dropdown-icon{
    text-align: center;
    font-size: 18px;
    line-height: 1.9;
    height: 35px;
    width: 35px;
    border: 1px solid rgba(0,0,0,.1);
    background: rgba(0,0,0,.05);
    border-radius: 50%;
    margin-left: 20px;
    margin-top: -2px;
    cursor: pointer;
    color: rgba(0,0,0,.5);
}

.add-icon{
    text-align: center;
    font-size: 18px;
    line-height: 2.2;
    height: 40px;
    width: 40px;
    border: 1px dashed rgba(0,0,0,.1);
    background: rgba(0,0,0,.05);
    border-radius: 5px;
    margin-left: 10px;
    margin-top: -2px;
    cursor: pointer;
    color: rgba(0,0,0,.5);    
}
.add-icon:hover{
    background: #0071c1;
    color: #fff;    
}
.user-icon{
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    height: 40px;
    width: 40px;
    border: 1px solid rgba(0,0,0,.1);
    background: #0071c1;
    border-radius: 5px;
    margin-left: -5px;
    margin-top: -2px;
    cursor: pointer;
    color: #fff;  
    position:relative; 
    overflow: hidden;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
.user-icon::after{
    content: attr(name);
    position: absolute;
    bottom: 0px;
    left: 0;
    font-size: 10px;
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: visible;
    color: #fff !important;
}
.user-icon:hover::before{
    content: '\f1f8';
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #dc3545;
    background: #fff;
    z-index: 101;
    line-height: 2.2;
    transform: scale(1.1);
    transition: all .3s;
}


.custom-speed-dial {
    width: fit-content;
    position: relative;
    top: 0px;
    left: 0;
    z-index: 99;
    display: flex;
}

.custom-speed-dial::before{
    content: '';
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.1);
    filter: blur(30px);
    z-index: 98;
    position: absolute;
}

.speed-icon{
    text-align: center;
    font-size: 18px;
    line-height: 2.2;
    height: 40px;
    width: 40px;
    border: 1px solid rgba(0,0,0,.1);
    background: #0071c1;
    border-radius: 5px;
    margin-left: 5px;
    margin-top: 0px;
    cursor: pointer;
    color: #fff;  
    position: relative; 
    overflow: visible;
    z-index: 100;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4)
}
.drop-down-text{
    position: relative;
}
.drop-down-text::before {
    content: 'Current';
    position: absolute;
    top: -12px;
    font-size: 12px;
    font-weight: 400;
    min-width: 100%;
    text-align: center;
}

.one {
    /* margin-top: -0px; */
}

.speed-icon::after{
    content: attr(item);
    position: absolute;
    top: -22px;
    left: 0;
    max-width: 100%;
    line-height: 1;
    text-align: center !important;
    color: rgba(0,0,0,0.6);
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}
.speed-icon:hover{
    transform: scale(1.05);
}

.speed-icon-seperator{
    height: 90%;
    width: 0px;
    margin: 1% 10px;
    border-right: 1px solid rgba(0,0,0,.3);
}




.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 16px;
    white-space: nowrap;
    height: 100%
}

.kanban-column {
    flex: 0 0 auto;
    width:400px;
    background: #ebecef;
    border-radius: 5px;
    padding: 12px;
    height: fit-content;
    min-height: 80px;
    position: relative;
    padding-bottom: 28px;
}
.kanban-add-task i{
    opacity: 0.6;
    margin-right: 10px;
}
    .kanban-add-task{
        height: 25px;
        cursor: pointer;
        position: absolute;
        bottom: 8px;
    }

    .kanban-column-heading {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 10px;
        margin-left: 2px;
    }

.kanban-card {
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    padding: 8px;
    cursor: pointer;
    position: relative;
}
    .kanban-card.dragging {
        background: linear-gradient(45deg, rgba(0,0,0,0.1) 10%, transparent 20%, rgba(0,0,0,0.1) 30%, transparent 40%, rgba(0,0,0,0.1) 50%, transparent 60%, rgba(0,0,0,0.1) 70%, transparent 80%, rgba(0,0,0,0.1) 90%, transparent 100%);
    }

    .kanban-card:hover .kanban-card-toolbar{
        display:block;
    }

.kanban-card-toolbar {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #000;
    padding: 0 5px;
    border-bottom-left-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: none;
    z-index: 99;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

    .kanban-card-toolbar i {
        margin: 0 2px;
        font-weight: 300;
    }

    .kanban-card-toolbar i:hover {
        margin: 0 2px;
        font-weight: 600;
    }

    .kanban-card-user {
        background: #0071c1;
        width: 30px;
        height: 30px;
        color: #fff;
        font-size: 18px;
        line-height: 1.8;
        text-align: center;
        border-radius: 5px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
.kanban-card-user-text{

}
.kanban-card-title {
    font-size: 16px;
    font-weight: 400;
    padding-left: 2px;
    margin-top: 0px;
    word-break: break-word;
    white-space: break-spaces;
    max-width: 315px;
}
.kanban-card-summary {
    font-size: 14px;
}

.kanban-card:last-child {
    margin-bottom: 0;
}
.kanban-card-items{
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    margin-top: 10px;
}
.kanban-card-user{

}
.kanban-card-items-item {
    max-width: fit-content !important;
    margin: 0 5px;
    margin-left: 2px;
    color: rgba(0,0,0,0.5);
}
.kanban-card-items-item-text{
    display: inline;
    font-size: 15px;
    margin-top: -1px
}
.tags{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.tags-item{
    background: var(--bgcol);
    height: 18px;
    color: #fff;
    font-size: 14px;
    padding: 2px;
    margin: 2px;
    line-height: 1;
    border-radius: 3px;
}

#emitter {
    visibility: hidden;
    background: #222;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 40%;
    left: 0%;
}

.dot-container {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    z-index: 5000;
    pointer-events: none;
}

.dot {
    position: absolute;
    pointer-events: none;
}

.labels-text{
    font-size: 12px;
    color: rgba(0,0,0,1);
    margin-top: 8px;
    margin-bottom: 5px;
}

.tags-item-card {
    background: var(--bgcol);
    height: 27px;
    color: #fff;
    font-size: 15px;
    padding: 2px;
    margin: 0;
    line-height: 1.4;
    /* border-radius: 3px; */
}


.boards-list {
    position: absolute;
    left: calc(50% - 175px);
    top: 75px;
    z-index: 999999;
    background: #fff;
    width: 450px;
    border-radius: 4px;
    max-height: 350px !important;
    min-height: 350px !important;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    overflow-y: auto;
    
}
.board-list-shadow{
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 999;
    cursor: pointer;
}
.boards-list-item {
    line-height: 1.8;
    padding: 10px 30px;
    cursor: pointer;
    font-weight: 400;
}

    .boards-list-item:hover {
        color: #000;
        background: rgba(0,0,0,0.1);
        font-weight: 400;
    }


.tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.tab-button {
    padding: 10px 15px;
    border: none;
    background: #f1f1f1;
    cursor: pointer;
    transition: background 0.3s;
    border-radius: 0 !important;
    font-weight: 400;
}

    .tab-button.active {
        background: #0071c1;
        color: #fff;
        font-weight: 400;
    }

.tab-content .tab-pane {
    display: block;
    padding: 0;
    background: #fff;
}

    .tab-content .tab-pane.active {
        display: block;
        max-height: 305px;
        overflow: auto;
    }

.no-content{
    color: rgba(0,0,0,0.8);
    height: 100%;
    text-align:center;
    line-height: 260px;
}

.kanban-card-complete {
    position: absolute;
    right: 10px;
    top: 5px;
    text-transform: uppercase;
    font-weight: 700 !important;
}
/*    .kanban-card-complete::before{
        content: 'Completed';
        position: absolute;
        font-size: 8px;
        top: -10px;
        text-transform: uppercase;

        text-align: right;
        font-weight: 900 !important;
    }*/
.kanban-card-complete-text {
    font-size: 13px;
    text-align: right;
    opacity: 0.8;
}

.timing {
    border: 3px solid #26b050;
    animation: tim 2s infinite;
}
@keyframes tim {
    0% {
        border-color: #26b050;
    }

    50% {
        border-color: transparent;
    }

    100% {
        border-color: #26b050;
    }
}
.kanban-card-time {
    position: absolute;
    bottom: -5px;
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #26b050;
    text-shadow: 0 0 1px #26b050;
    z-index: 99;
}
.credit-purchase-heading {
    margin-bottom: 12px !important;
    margin-top: 20px !important;
    color: #000;
    font-weight: 500;
    text-align: left;
}
.credit-purchase-list {
    color: var(--label-color);
    text-decoration: none;
    list-style: none;
    padding: 0;
    font-weight: 300;
    text-align: left;
    font-size: 14px;
}
.credit-purchase-subtext{
    font-size: 12px;
    color: #0071c1;
    text-align: left;
    margin: 0;
    margin-bottom: 10px;
}

.credit-purchase-list li {
    margin-left: 0 !important;
}

.credit-projection {
    position: absolute;
    right: -90px;
    top: 70px;
    font-size: 15px;
    text-align: right;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
}

.credit-projection-heading{
    font-size: 14px;
    color: #0071c1;
    text-align: center;
    margin: 0;
    margin-bottom: 10px;
}
.credit-projection .credit-purchase-heading {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    color: #000;
    font-weight: 500;
    text-align: center;
}

.credit-projection .credit-purchase-list {
    color: var(--label-color);
    text-decoration: none;
    list-style: none;
    padding: 0;
    font-weight: 300;
    text-align: center;
    font-size: 12px;
}