:root {
    --grey-bg: rgb(93,92,92);
    --grey-linear: linear-gradient(0deg, rgba(93,92,92,1) 0%, rgba(194,192,192,1) 100%);
    --ltblue-bg: rgb(27,45,68);
    --ltblue-linear: linear-gradient(0deg, rgba(27,45,68,1) 0%, rgba(147,184,255,1) 100%);
    --red-linear: linear-gradient(0deg, rgba(99,9,9,1) 0%, rgba(253,45,45,1) 100%);
    --green-linear: linear-gradient(0deg, rgb(9, 157, 2) 0%, rgb(1, 91, 3) 100%);
    --yellow-linear: linear-gradient(0deg, rgb(234, 217, 28) 0%, rgb(168, 154, 4) 100%);
    --ltgrey-linear: linear-gradient(0deg, rgb(122,122,122) 0%, rgba(200,200,200,0.4) 100%);
    --white-linear: linear-gradient(0deg, #fff 0%, rgb(157, 157, 157) 100%);
    --sidebar-selected: linear-gradient(0deg, rgba(235,53,53,1) 0%, rgba(156,16,16,1) 100%);
}

.bg-section {
    background: rgb(2,0,36);
}

.service-panel-title {
    color: white;
}

.link-hover {
    cursor: pointer;
}

body {
    background: url('https://images.cmpusa.org/images/white_flag_bg.jpg');
    background-size: cover;
    font-family: Tahoma !important;
}

div {
    padding: 0px;
    margin: 0px;
}

tr:hover {
    background: rgb(193, 193, 193)
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: .95rem !important;
}

.pointer {
    cursor: pointer;
}

.link-hover:hover {
    color: rgb(38, 57, 152);
}

a, .btn-link {
    color: #0366d6;
}

i:hover {
    cursor: pointer;
}

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

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

th {
    font-size: .95rem;
}

td {
    vertical-align: top;
}


.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }


.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.table-sm td, .table-sm th {
    padding: 0px !important;
    font-size: 0.75rem !important;
}

.container-fluid {
    padding: 0px !important;
}

.payment-amount-input {
    width: 100%;
    text-align: center;
    font-size: 18px !important;
    height: 2.25rem !important;
    line-height: 1.25 !important;
}

    .payment-amount-input input, .payment-amount-input cmp-dropdown {
        width: 100%;
        text-align: center;
        font-size: 18px !important;
        height: 2.25rem !important;
    }

.main {
    flex: 1;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.sidebar {
    background-image: linear-gradient(0deg, rgba(27,45,68,1) 0%, rgba(147,184,255,1) 100%);
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: white;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: white;
            }

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.custom-link {
    color: blue;
    font-weight: 700;
    cursor: pointer;
}

.service-wrap {
    background: rgba(253,45,45,1);
}

.bg-selected {
    background: rgb(77, 241, 21) !important;
}

.bg-pending {
    background: rgb(233, 229, 19) !important;
}

.bg-online {
    background: rgb(77, 241, 21) !important;
}

#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;
    }

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 200px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}



.panel {
    visibility: collapse;
}

    .panel.show {
        visibility: visible;
    }

.bg-table-row {
}

    .bg-table-row:hover {
        color: #FFF;
        background: var(--ltblue-linear);
    }

.shadow {
    border: 1px solid rgb(128, 128, 128);
    border-radius: 6px;
}

.bg-payment-pending {
    background: rgb(93,92,92);
    background: linear-gradient(0deg, rgba(93,92,92,1) 0%, rgba(194,192,192,1) 100%);
}

.bg-payment-processing {
    background: rgb(2,0,36);
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(12,9,121,1) 59%, rgba(0,212,255,1) 100%);
}

.bg-alternate-pay {
    background: rgb(27,45,68);
    background: linear-gradient(0deg, rgba(27,45,68,1) 0%, rgba(147,184,255,1) 100%);
}

.bg-payment-success {
    background: rgb(36,99,9);
    background: linear-gradient(0deg, rgba(36,99,9,1) 0%, rgba(53,253,45,1) 100%);
}

.bg-payment-failed {
    background: rgb(99,9,9);
    background: linear-gradient(0deg, rgba(99,9,9,1) 0%, rgba(253,45,45,1) 100%);
}

.bg-table-row-selected {
    background: rgb(93,92,92);
    background: linear-gradient(0deg, rgba(150,150,150,1) 0%, rgba(222,222,222,1) 100%);
    color: #000 !important;
}

/*span > .cmp-spinner-input {
    font-size: 14px;
    font-weight: 600;
}*/

.proofing-form-text {
    font-size: 12px;
    font-weight: 700;
}

.overflow-wrap-container {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}



/*DIALER HISTORY*/
.dialer-history-text {
    color: blue;
    font-weight: 700;
}

.dialing-history-link {
    width: 100%;
    cursor: pointer;
    color: blue;
    padding-left: 10px;
    font-weight: 600;
    text-decoration: underline
}


/*Payments*/
.card-on-file-text-upper {
    font-weight: 600;
    color: rgb(32, 12, 211);
    line-height: 1
}

.card-on-file-text-lower {
    font-weight: 600;
    color: rgb(93,92,92);
    line-height: 1;
    font-size: 12px;
}


/*TOOL TIP*/


.tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: help;
}


.tooltip-text {
    display: none;
    position: fixed;
    width: 400px;
    text-align: center;
    background: rgb(83, 86, 241);
    color: #fff;
    font-weight: 700;
    padding: 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: -4px -4px 8px rgba(128,128,128,0.67);
    z-index: 9999999;
}

    .tooltip-text.tooltip-top-center {
        top: 0px;
        left: 33%;
    }

    .tooltip-text.tooltip-top-left {
        top: 0px;
        left: 0px;
    }

    .tooltip-text.tooltip-top-right {
        top: 0px;
        right: 0px;
    }

    .tooltip-text.tooltip-bottom-center {
        top: 0px;
        left: 33%;
    }

    .tooltip-text.tooltip-bottom-left {
        top: 0px;
        left: 0px;
    }

    .tooltip-text.tooltip-bottom-right {
        top: 0px;
        right: 0px;
    }

    .tooltip-text.tooltip-middle-center {
        top: 40%;
        left: 33%;
    }

    .tooltip-text.tooltip-middle-left {
        top: 40%;
        left: 0px;
    }

    .tooltip-text.tooltip-middle-right {
        top: 40%;
        right: 0px;
    }

.tooltip-wrapper:hover .tooltip-text {
    display: block;
}

@media (max-width:900px) {
    .tooltip-text {
        left: 0px;
    }
}


.new-item-notification-wrapper {
    position: absolute;
    top: 0px;
    font-size: 13px;
    color: red;
    left: 0px;
}

/*LoginPage.razor*/
.login-form-wrapper {
    width: 380px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgb(128,128,128);
    box-shadow: 3px 3px 6px rgba(128,128,128, 0.76);
    border-radius: 10px;
    margin-top: 11%;
    align-self: baseline;
}

.login-form-image-topper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.login-form-image {
    max-width: 110px;
}

.login-form-error-message {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    line-height: 1.1;
    color: red;
    font-weight: 700;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
    border-top: 1px solid black;
    padding: 10px 8px
}


/*CreateUserForm*/
.upsert-user-form-table {
    margin: 10px;
}

    .upsert-user-form-table tr > td:first-child {
        padding-right: 10px;
    }


.table-low-profile {
    font-size: 0.95rem;
    width: 100%;
}

    .table-low-profile td {
        padding: 0.25rem;
        font-size: 0.75rem;
    }


/*Customer INfo Panel*/
.customer-info-panel-a {
    font-size: 13px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: flex-start;
    flex-wrap: wrap;
    border: 1px solid grey;
    padding: 0px;
    padding-bottom: 10px;
}

.customer-info-panel-a-header {
    width: 100%;
    text-align: center;
    font-weight: 600;
    color: #0366d6
}

    .customer-info-panel-a-header.clickable {
        cursor: pointer;
        box-shadow: 2px 2px 3px rgba(200, 200, 200, 0.76);
        margin-right: 10px
    }

    .customer-info-panel-a-header.selected {
        width: 100%;
        text-align: center;
        font-weight: 600;
        color: rgb(13, 135, 26);
        background: rgb(222,222,222);
        border: 1px solid rgb(2,0,36);
    }

.customer-info-panel-a-left {
    width: 50%;
    padding-left: 10px;
    text-align: left;
}

.customer-info-panel-a-right {
    width: 50%;
    padding-right: 10px;
    text-align: right;
}

.customer-info-panel-a > img {
    margin-top: 15px
}

.customer-info-panel-a-subtext {
}

.customer-info-panel-text {
}

@media (max-width:1100px) {
    .customer-info-panel-a {
        width: 100%
    }
}

/*Customer callbacks*/
.open-callback-creator-button {
    height: 30px;
    width: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
    font-size: 20px;
    font-weight: 700;
    border: 2px solid #FFF;
    color: #FFF;
    border-radius: 50%
}

/*Customer Service Panel Selector Wrap*/
.csr-service-pane-selector-wrap {
    border-radius: 8px;
}

.csr-service-pane-selector-button-wrapper {
    height: 2.75rem;
    width: 7.5rem;
    text-align: center;
    cursor: pointer;
    padding-top: 2px
}

    .csr-service-pane-selector-button-wrapper:hover {
        background: var(--green-linear);
        border-radius: 10px;
    }


.csr-service-pane-selector-button {
    height: 1.4rem;
    width: 3rem;
    text-align: center;
    line-height: 1.1;
    margin: auto;
    font-size: 1.12rem;
    color: #FFF;
    border-bottom: 1px solid white;
    /*border-radius: 50%;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 0.95rem
}

.csr-service-pane-selector-text {
    font-size: 0.75rem;
    color: #FFF;
}

.csr-service-pane-selector-button:hover {
    color: rgb(2,0,36);
    border-bottom: 1px solid rgb(2,0,36);
}

    .csr-service-pane-selector-button:hover + .csr-service-pane-selector-text {
        color: rgb(2,0,36);
    }

.csr-service-pane-selector-count {
    position: absolute;
    top: -3px;
    right: 0px;
    color: red;
    border: 2px solid red;
    padding: 0px 5px;
    border-radius: 50%;
    background: #fff;
    font-weight: 700;
    font-size: 12px;
}


@media (max-width:900px) {
    .csr-service-pane-selector-wrap {
        border-radius: 6px;
    }

    .csr-service-pane-selector-button {
        height: 1.2rem;
        width: 2.5rem;
        text-align: center;
        line-height: 1;
        font-size: .9rem;
        color: #FFF;
        border-bottom: 1px solid white;
        /*border-radius: 50%;*/
    }

    .csr-service-pane-selector-text {
        font-size: 0.85rem;
        color: #FFF;
    }
}

@media (max-width:776px) {
    .csr-service-pane-selector-wrap {
        border-radius: 6px;
    }

    .csr-service-pane-selector-button {
        height: 1.1rem;
        width: 2.5rem;
        text-align: center;
        line-height: 1;
        font-size: .85rem;
        color: #FFF;
        border-bottom: 1px solid white;
        /*border-radius: 50%;*/
    }

    .csr-service-pane-selector-text {
        font-size: 0.85rem;
        color: #FFF;
    }
}

.csr-service-pane-selector-button-wrapper.selected .csr-service-pane-selector-button, .csr-service-pane-selector-button-wrapper.selected .csr-service-pane-selector-text {
    color: #000;
    font-weight: 800;
}

.csr-service-pane-selector-button-wrapper.selected {
    background: var(--white-linear);
    color: #000;
    font-weight: 800;
    border: 3px solid red;
    box-sizing: content-box;
    border-radius: 10px;
}



/*Calback Sidebar*/
.cmp-stylized-button {
    border-radius: 10px !important;
    /* height: 30px !important;
    font-size: 14px !important;*/
    width: 100% !important;
    padding: 0 5px !important;
    text-align: center !important;
    border-top: 2px solid rgb(122,122,122) !important;
    background: var(--ltblue-linear) !important;
}

    .cmp-stylized-button.inactive {
        border-radius: 10px !important;
        height: 30px !important;
        font-size: 14px !important;
        width: 100% !important;
        padding: 0 5px !important;
        text-align: center !important;
        border-top: 2px solid rgb(122,122,122) !important;
        background: var(--grey-linear) !important;
    }

    .cmp-stylized-button:hover {
        border-radius: 10px !important;
        height: 30px !important;
        font-size: 14px !important;
        width: 100% !important;
        padding: 0 5px !important;
        text-align: center !important;
        border-top: 2px solid rgb(122,122,122) !important;
        background: var(--grey-linear) !important;
    }

    .cmp-stylized-button.inactive {
        border-radius: 10px !important;
        height: 30px !important;
        font-size: 14px !important;
        width: 100% !important;
        padding: 0 5px !important;
        text-align: center !important;
        border-top: 2px solid rgb(122,122,122) !important;
        background: var(--ltblue-linear) !important;
    }


/*SEARCHING CONTAINER*/

.search-container {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    background: rgba(128,128,128,0.76);
    z-index: 9999999999;
}

.search-dialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    height: 150px;
    background: #FFF;
    box-shadow: 3px 3px 6px 5px rgba(128,128,128,0.98);
}

/*Calback Dashboard*/
/*.callback-dashboard-header{
    position:fixed;
    z-index:9999;
}
.callback-dashboard-table-wrapper{
    margin-top:120px !important;
    max-height:80vh;
    overflow-y:scroll;
}*/
.callback-center-header-btn {
    border: 2px solid #FFF;
    border-radius: 20px;
    margin-left: 10px;
}

.day-increment-btn {
    background: var(--green-linear);
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    color: #FFF;
    padding: 2px 6px 5px 6px;
    font-size: 12px;
}

/*Order Processing*/

.banner-location-grid {
    height: 200px;
    width: 250px;
    border: 1px solid black;
    padding: 2px;
    background: #FFF;
}

.banner-location-grid-banner {
    border: 1px solid grey;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #000;
}

.banner-location-grid-middle-section {
    height: 123px;
    display: flex;
    flex-direction: row;
}

.banner-location-grid-content-area {
    background: rgb(200,200,200);
    width: 180px;
    height: 123px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.banner-location-grid-sidebar {
    height: 123px;
    width: 66px;
    background: rgb(93,92,92);
}

.top-banner {
    width: 244px;
    height: 35px;
    background: rgb(27,45,68);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    font-weight: 600;
    font-size: 12px;
}

.bottom-banner {
    width: 244px;
    height: 35px;
    background: rgb(27,45,68);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    font-weight: 600;
    font-size: 12px;
}

.right-banner {
    width: 63px;
    height: 45px;
    background: rgb(27,45,68);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    font-weight: 600;
    font-size: 12px;
}

.top-right-banner {
    width: 63px;
    height: 45px;
    background: rgb(27,45,68);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    font-weight: 600;
    font-size: 12px;
}

.banner-selected {
    background: rgb(234, 217, 28);
    color: #000;
}


/*ONline Campaigns*/
.location-type-header {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    width: 100%;
}

.unverified {
    background: rgb(255 169 169);
}

.verified {
    background: rgb(220 255 228);
}

.remove-pane {
    width: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.remove-icon {
    width: 20px;
    height: 20px;
    margin-top: 12px;
    border-radius: 50%;
    text-align: center;
    background: rgb(255 0 0);
    color: #FFF;
    font-weight: 700;
}

.data-pane {
    width: calc(100% - 40px);
}

.error-message {
    font-size: 11px;
    font-weight: 700;
    color: rgb(255,0,0);
    line-height: 1;
    text-transform: uppercase;
}

/*Day Parting*/
.day-wrap {
    width: 16px;
}

.hour-container-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 34px;
    width: 34px;
}

.hour-container {
    height: 30px;
    width: 30px;
    text-align: center;
    border: 2px solid rgb(163 163 163);
    border-radius: 50%;
    color: rgb(163,163,163);
}

    .hour-container.selected {
        background: rgb(46 121 255);
        color: #FFF;
    }

@media (max-width:800px) {
    .day-wrap {
        font-size: 12px;
        width: 16px;
    }

    .hour-container-wrap {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 24px;
        width: 24px;
    }

    .hour-container {
        font-size: 12px;
        height: 20px;
        width: 20px;
        text-align: center;
        border: 2px solid rgb(163 163 163);
        border-radius: 50%;
        color: rgb(163,163,163);
    }
}



/*Clickable container*/
.clickable-icon {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .clickable-icon.bg-danger {
        background: none !important;
        color: red;
    }

    .clickable-icon:hover {
        background: rgb(51, 58, 143);
        border-radius: 8px;
        box-shadow: 2px 2px 3px rgba(51, 58, 143,0.76);
        padding: 0px;
        color: #FFF !important;
    }

    .clickable-icon.bg-danger:hover {
        background: rgba(99,9,9,1) !important;
        border-radius: 8px;
        box-shadow: 2px 2px 3px rgba(51, 58, 143,0.76);
        padding: 0px;
        color: #FFF !important;
    }

    .clickable-icon:hover > i {
        color: #FFF !important;
    }


/*Campaign Detail*/
.campaign-detail-text {
    color: darkblue;
    font-weight: 800;
    font-size: 17px;
}


/*ONline Campaign Audience Package Selection*/
.package-selection-wrapper {
    width: 260px;
    max-height: 500px;
    overflow-y: scroll;
    border: 3px solid #000;
    border-radius: 8px
}

.package-selection-row {
    width: 235 px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center
}

.package-selection-lob-title {
    width: 100%;
    font-size: 16px;
    color: rgb(2,0,36);
    font-weight: 800;
    text-align: center;
    border: 1px solid grey;
}

.package-selection-item {
    height: 50px;
    width: 50px;
    border-radius: 10px;
    font-size: 45px;
    text-align: center;
    padding: 0px 10px;
    margin: 10px;
    line-height: 1;
    background: var(--ltblue-linear);
    color: #FFF;
    cursor: pointer;
}

    .package-selection-item:hover {
        background: var(--grey-linear);
    }

    .package-selection-item.selected {
        background: var(--green-linear);
    }

/*Dialer Button*/
.dialer-button {
    height: 23px;
    width: 23px;
    border-radius: 50%;
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
    background: var(--green-linear);
    color: #FFF;
}

    .dialer-button:hover {
        box-shadow: 2px 3px 3px 3px rgba(128,128,128,0.5);
        background: var(--ltblue-linear);
        color: #FFF;
    }

.dialer-text-area-upper {
    font-size: 20px;
}

.dialer-text-area-lower {
    font-size: 16px;
}

/*PAYMENTS*/
.payment-amount-header {
    font-size: 20px;
    color: rgb(152, 0, 0);
    font-weight: 700
}
/*Creative Approvals*/
.approval-failed-text {
    color: red;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    width: 260px;
    align-self: center;
    margin: auto;
    border-top: 2px solid #000
}

    .approval-failed-text a {
        color: #000;
        font-weight: 700;
        font-size: 16px;
        text-align: center;
        width: 260px;
        align-self: center;
        margin: auto;
    }

.approval-text {
    color: rgb(47, 138, 62);
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    width: 210px;
    align-self: center;
    margin: auto;
    padding-top: 20px;
    border-top: 2px solid #000
}



.sort-button-wrapper {
    margin-left: 3px;
    font-size: 10px;
}

.sort-button-asc {
    height: 8px;
}

.sort-button-desc {
    height: 8px
}

.contact-form-input {
    height: 30px !important;
    font-size: 18px !important;
    border-radius: 30px !important;
    padding-left: 18px !important;
}

.contact-form-wrapper {
    border-radius: 30px;
    padding: 30px !important;
    margin-top: 50px;
}

.contact-form-company {
    text-align: center;
    width: 100%;
    color: cadetblue !important;
    font-size: 27px;
}

.contact-form-message {
    text-align: center;
    width: 100%;
    color: blue !important;
    font-size: 23px;
}


.contact-form-button {
    height: 40px !important;
}
/*EFFECTS*/
.blobs-container {
    display: flex;
}



.blob {
    background: black;
    /*  border-radius: 50%;*/
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    margin: 10px;
    height: 20px;
    width: 20px;
    transform: scale(1);
    animation: pulse-black 1s infinite;
}

@keyframes pulse-black {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.blob.white {
    background: white;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.blob.red {
    background: rgba(255, 82, 82, 1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
}

    .blob.red.pulse {
        background: rgba(255, 82, 82, 1);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
        animation: pulse-red 2s infinite;
    }



@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.blob.orange {
    background: rgba(255, 121, 63, 1);
    box-shadow: 0 0 0 0 rgba(255, 121, 63, 1);
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 121, 63, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 121, 63, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 121, 63, 0);
    }
}

.blob.yellow {
    background: rgba(255, 177, 66, 1);
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
    animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 177, 66, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
    }
}

.blob.blue {
    background: rgba(52, 172, 224, 1);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
    }
}

.blob.green {
    background: rgb(28, 180, 54);
    box-shadow: 0 0 0 0 rgba(28, 180, 54, 1);
}

    .blob.green.pulse {
        background: rgb(28, 180, 54);
        box-shadow: 0 0 0 0 rgba(28, 180, 54, 1);
        animation: pulse-green 1.5s infinite;
    }

@keyframes pulse-green {
    0% {
        transform: scale(0.75);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
    }
}

.blob.purple {
    background: rgba(142, 68, 173, 1);
    box-shadow: 0 0 0 0 rgba(142, 68, 173, 1);
    animation: pulse-purple 2s infinite;
}

@keyframes pulse-purple {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(142, 68, 173, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0);
    }
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

    footer p {
        margin: 10px 0;
    }

    footer i {
        color: red;
    }

    footer a {
        color: #3c97bf;
        text-decoration: none;
    }




/*FLOOR DISPLAY*/
.floor-display-programing-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    border: 1px solid grey;
    padding: 5px 20px;
    border-radius: 8px;
    box-shadow: 3px 3px 4px rgba(120,120,120,0.76);
    margin-bottom: 2px;
    cursor: pointer;
}

    .floor-display-programing-item:hover {
        background: rgb(144, 163, 255);
    }

.floor-display-programing-day {
    border: 1px solid blue;
    padding: 2px 5px;
    margin-left: 10px;
    border-radius: 50%;
}

    .floor-display-programing-day:hover {
        border: 1px solid blue;
        padding: 2px 5px;
        margin-left: 10px;
        border-radius: 50%;
        background: blue;
        color: #fff;
    }

.floor-display-programing-item label {
    font-weight: 700;
    margin-right: 5px;
}

.floor-display-programing-item_header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: blue;
    font-weight: 800;
    text-decoration: underline;
}

.floor-display-programing-item_buttons {
    display: flex;
    flex-direction: row;
}

    .floor-display-programing-item_buttons div {
        margin-left: 8px;
    }

.floor-display-programing-item_body {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.floor-display-programing-item_foot {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}



/*ONline Campaigns*/

.online-campaign-creative-preview {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    content: "X";
}

.online-campaign-creative-options {
    width: 100px;
}

.online-campaign-creative-remove-button {
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.34);
}

.online-campaign-creative-info {
    width: 90%;
    display: flex;
}

    .online-campaign-creative-info p {
        line-height: 1.4;
        margin-left: 30px;
        font-weight: 600;
        color: blue;
        border: 1px solid black;
        padding: 5px;
    }

.online-campaign-creative-embed-wrapper {
    display: flex;
    flex-direction: row;
}

    .online-campaign-creative-embed-wrapper textarea {
        width: 260px;
    }

.creative-number {
    font-weight: 700;
    line-height: 1;
    margin: 0px;
    border: 2px solid blue;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    padding: 0px;
}

.cmp-event-content {
    background: var(--ltblue-linear) !important;
}


/*Analyics*/
.analytics-card {
    width: 180px;
    height: 70px;
    border: 1px solid var(--theme_color_5);
    border-radius: 8px;
    background: var(--theme_color_3);
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0px 5px 0px 20px;
    padding-top: 5px;
}

.analytics-card-value {
    font-size: 24px;
    color: #000;
    font-weight: 600;
    width: 100%;
    text-align: center;
}

.analytics-card-title {
    font-size: 18px;
    color: rgb(128,128,128);
    width: 100%;
    text-align: center;
}

.remove-icon {
    cursor: pointer;
}

.insert-url-link {
    color: blue;
    font-size: 10px;
    text-decoration: underline;
    font-weight: 700;
    cursor: pointer;
}




/*PAYMENT SECTION*/
.process-overlay {
    display: none;
}

    .process-overlay.show {
        display: flex;
        height: 100vh;
        width: 100vw;
        background: rgba(200,200,200,0.76);
    }

.card-container {
    width: 100%;
}

.payment-complete-wrapper {
    display: none;
}

    .payment-complete-wrapper.show {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

.payment-failed-wrapper {
    display: none;
}

    .payment-failed-wrapper.show {
        display: block;
    }

.payment-form {
    height: 0px;
    overflow: hidden;
}

    .payment-form.show {
        height: fit-content;
        overflow: auto;
    }

.gpay-card-info-container {
    width: 100% !important;
}

#apple-pay-button {
    height: 48px;
    width: 100%;
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: plain;
    -apple-pay-button-style: black;
}

.sq-card-message {
    height: 0px;
}


.sq-card-wrapper .sq-card-message {
    width: 100%;
    margin-top: 3px;
    margin-bottom: 3px;
    visibility: hidden;
    font-family: "Square Sans Text VF","Square Sans Text",Arial,sans-serif;
    font-size: 11px
}

    .sq-card-wrapper .sq-card-message::before {
        visibility: hidden;
        display: inline-block;
        height: 14px;
        width: 16px;
        vertical-align: -3px;
        margin-right: 8px;
        content: " ";
        -webkit-mask: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 7C8.55229 7 9 7.44772 9 8V11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11V8C7 7.44772 7.44772 7 8 7ZM8 6C8.55229 6 9 5.55228 9 5C9 4.44772 8.55229 4 8 4C7.44772 4 7 4.44772 7 5C7 5.55228 7.44772 6 8 6Z%27 fill=%27%2349A4D5%27/%3E%3C/svg%3E");
        mask: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 7C8.55229 7 9 7.44772 9 8V11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11V8C7 7.44772 7.44772 7 8 7ZM8 6C8.55229 6 9 5.55228 9 5C9 4.44772 8.55229 4 8 4C7.44772 4 7 4.44772 7 5C7 5.55228 7.44772 6 8 6Z%27 fill=%27%2349A4D5%27/%3E%3C/svg%3E")
    }

.sq-card-iframe-container {
    height: 38px !important;
}

    .sq-card-iframe-container iframe {
        height: 36px !important;
    }

.sq-input-wrapper {
    height: 36px !important;
}

.sq-visible {
    margin: 0px 0px 20px !important;
}

.payment-customer-info-message {
    font-size: 11px;
    color: red;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    width: 100%;
    text-decoration: underline;
}

.label-lg {
    font-size: 16px;
}

.payment-processing-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    background: rgb(255, 255, 255)
}

.payment-processing-image-wrap {
    height: 200px;
    width: 200px
}
/**/

.signature-message {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin: 0px;
}

.new-notifications {
    background: red;
    width: 30px;
    text-align: center;
    color: white;
    border-radius: 5px;
    animation: blink-animation 1.5s steps(10, start) infinite;
    -webkit-animation: blink-animation 1.5s steps(10, start) infinite;
    padding: 1px 6px;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}


.qr-wrapper {
    height: 140px;
    width: 120px;
    padding: 3px;
    border: 1px solid black;
    margin: 2px;
}

    .qr-wrapper:hover {
        background: rgb(163 163 163);
        box-shadow: 2px 3px 3px rgba(128,128,128,0.65);
    }

/*Admin Buttons*/
.link-button-wrapper {
    background: var(--ltblue-linear);
    border-bottom: 4px solid black;
    margin-bottom: 5px !important;
}

.link-btn-a {
    margin: 1px 3px;
    border: 2px solid white;
    color: white !important;
}

    .link-btn-a:first-of-type {
        margin: 1px 3px 1px 0px;
        border: 2px solid white;
        color: white !important;
    }


/*DROP ZONE*/
.plk-dd-inprogess > * {
    pointer-events: none;
}

.status-processing {
    background: red;
    color: white;
}

.status-pending {
    background: rgb(244, 218, 57);
    color: #000;
}

.status-processed {
    background: rgb(45, 150, 36);
    color: white;
}

.order-service-wrapper-text {
    width: 100%;
    text-align: center;
    line-height: 1;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: Arial;
    color: rgb(2,0,36);
    padding-bottom: 10px
}

.order-service-icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
    text-align: center;
    border: 4px solid rgb(2,0,36);
    border-radius: 50%;
    padding: 2px 3px 2px 4px;
    color: rgb(2,0,36)
}

    .order-service-icon:hover {
        background: rgb(2,0,36);
        color: #FFF;
    }


.customer-phone-wrapper {
    width: 325px;
    max-height: 200px;
    overflow-y: scroll;
    border: 1px solid lightgrey;
    padding: 4px;
    font-size: 12px;
}

.customer-phone-item {
    display: flex;
    flex-direction: row;
    border: 1px solid rgb(200,200,200);
    border-radius: 3px;
    padding: 1px 4px;
    margin-bottom: 3px;
    box-shadow: 3px 3px 4px rgba(200,200,200,0.76);
}



.customer-phone-number {
    font-weight: bold;
    width: 160px
}

.customer-phone-type {
    font-weight: 600;
    color: rgb(39, 155, 49);
    width: 100px;
}

.customer-phone-controls {
    display: flex;
    flex-direction: row;
    /*    justify-content:space-between;*/
    text-align: right;
    justify-content: flex-end
}

.order-service-wrapper {
    width: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 4px solid rgb(2,0,36);
    border-radius: 18px;
    padding: 3px 10px 10px 10px;
    background: #FFF;
    box-shadow: 3px 6px 12px rgba(20,20,20, 0.76);
    /*margin-top: -15px;*/
    z-index: 999999999;
}

.order-service-wrapper-arrow {
    height: 20px;
    width: 20px;
    background: rgb(2,0,36);
    margin-left: 15px;
    z-index: -1;
    rotate: 45deg;
    margin-top: -15px;
}