/**********************************/
/* css is required by Blazor      */
/**********************************/

#components-reconnect-modal {
    display: none !important;
}

#blazor-error-ui {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.75);
    z-index: 99999;
    text-align: center;
}

    #blazor-error-ui p {
        font-size: 1.2em;
        width: 400px;
        padding: 25px;
        border-radius: 10px;
        color: white;
        background-color: #0000cd;
        border-color: white;
        border-width: 3px;
        border-style: solid;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

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

/********************************************/
/*  Syncfusion & Blazor css customisations  */
/********************************************/

.e-control,
.e-wrapper,
.e-control-wrapper,
.e-input-group,
.e-grid {
    font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
    font-size: 15px;
}

.controlregion {
    margin-top: 50px;
}

.syncfusion-blazor-index-icons {
    font-family: "sbicons";
    color: #0073DC !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    padding-right: 13px;
    font-size: 18px;
}

/********************************************/
/*  Our Alert                               */
/********************************************/

.my-alert-span-red {
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;
    padding: 4px;
    background-color: #DA2647;
    color: white;
    text-decoration-color: #DA2647 !important;
}

.my-alert-span-blue {
    font-size: 15px;
    font-weight: 400;
    border-radius: 5px;
    padding: 4px;
    background-color: #214fc6;
    color: white;
    text-decoration-color: #DA2647 !important;
}

.my-alert-dialog-red {
    background-color: Red;
    color: white;
    padding: 50px;
    font-size: 18px;
    font-weight: 400;
    border-color: white;
    border-width: 3px;
    border-style: solid;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
}

.my-alert-dialog-blue {
    background-color: darkblue;
    color: white;
    padding: 50px;
    font-size: 18px;
    font-weight: 400;
    border-color: white;
    border-width: 3px;
    border-style: solid;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
}

/*******************************/
/***  URLs                   ***/
/*******************************/

.my-url-link {
    font-size: 15px;
    color: blue !important;
}

.my-url-link-2 {
    color: blue !important;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline !important;
}

/********************************************/
/*  Login                                  */
/********************************************/

.login-body {
    background-color: #1d1a27;
    padding: 40px;
    max-width: 500px;
    margin-top: 40px !important;
    margin-left: auto;
    margin-right: auto;
}

.login-header {
    margin-top: 20px;
    margin-bottom: 26px;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    text-decoration: none;
}

.login-field {
    margin-bottom: 20px;
}

.login-error {
    background-color: orangered;
    padding: 10px;
    margin-top: 26px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

.login-button {
    width: 100%;
    margin-top: 12px;
    margin-left: 0px !important;
    border-radius: 8px;
    background-color: #626adb !important;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    color: white !important;
    height: 34px;
    text-transform: capitalize;
}

    .login-button:hover {
        background-color: #bb4895 !important;
        box-shadow: 1px 1px 3px 0 grey !important;
    }

    .login-button:disabled {
        background-color: #626adb !important;
    }

    .login-button:active {
        background-color: darkred !important;
    }

/********************************************/
/*  CW Specifics                            */
/********************************************/

.cw-background {
    background-color: #13111a;
    background-image: url('../images/cw-gradient-bg.svg');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: auto;
}

.cw-login-logo {
    display: block;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    max-width: 80px;
    height: auto;
}

.cw-home-logo-div {
}

.cw-home-logo {
    display: block;
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
    height: auto;
    box-shadow: 1px 1px 3px 0 white !important;
}

.cw-logo {
    max-width: 70px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}


/********************************************/
/*  SP Specifics                            */
/********************************************/

.sp-background {
    background-color: #13111a;
    background-image: url('../images/sp-gradient-bg.svg');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: auto;
}

.sp-login-logo {
    display: block;
    margin-top: -30px;
    margin-bottom: -20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 80px;
    height: auto;
}

.sp-home-logo-div {
}

.sp-home-logo {
    display: block;
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    max-width: 10%;
    height: auto;
    box-shadow: 1px 1px 3px 0 white !important;
}

.sp-logo {
    max-width: 70px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.sp-row {
    margin-top: -30px;
    margin-bottom: -20px;
}

/********************************************/
/*  DP Specifics                            */
/********************************************/
.dp-background {
    background-color: #13111a;
    background-image: url('../images/dp-gradient-bg.svg');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: auto;
}

.dp-login-logo {
    display: block;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    max-width: 200px;
    height: auto;
}

.dp-logo {
    max-width: 150px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}



/********************************************/
/*  Main Areas                              */
/********************************************/

.my-page-filter-area {
    margin-left: 12px;
    margin-right: 16px;
    padding-top: 0px;
    padding-bottom: 12px;
}

    .my-page-filter-area > div {
        margin-bottom: 18px;
        width: 240px;
    }

.my-content-area {
    margin-top: 0px;
}

.my-content-area-plain {
    width: fit-content;
    margin-top: 0px;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 48px;
    padding-right: 0px;
    border: 3px;
    border-color: white;
    border-style: solid;
    border-radius: 5px;
}

.my-inline-block {
    display: inline-block;
    margin-right: 16px;
}

.my-inline-block-wide {
    display: inline-block;
    margin-right: 16px;
    width: 300px;
    margin-right: 112px;
}

.my-reset-inline-block {
    display: inline-block;
    margin-right: -36px;
}

.my-tabs-div {
}

/********************************************/
/*  Main Items                              */
/********************************************/

html, body {
    font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
    margin-right: 0px;
    margin-left: 0px;
    color: #333;
    font-size: 14px;
    line-height: 20px;
}

a {
    color: white !important;
    text-decoration: none !important;
}

.my-header {
    top: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 24px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    /*background-color: #005;*/
}

.my-menu {
    top: 0px;
    z-index: 0 !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.my-title {
    margin-top: 12px;
    margin-bottom: 24px;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
}

.my-sub-title {
    margin-top: 10px;
    margin-bottom: 30px;
    margin-left: 10px;
    color: pink;
    font-size: 18px;
    font-weight: 400;
}

.my-totals {
    padding-top: 2px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #bb4895;
    color: white;
    font-size: 15px;
    font-weight: 500;
}

.my-content {
    margin-right: 32px;
    margin-left: 32px;
}

.my-link {
    margin-left: -15px;
    margin-right: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.my-link-always {
    margin-right: 12px;
    margin-left: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.link-text-always {
    opacity: 1;
    font-size: 16px;
    font-weight: 400;
}

    .link-text-always:hover {
        font-weight: 500;
    }

.link-text {
    opacity: 1;
    font-size: 16px;
    font-weight: 400;
}

    .link-text:hover {
        font-weight: 500;
        background-color: #bb4895;
    }

.my-label {
    color: #b7b4c7;
}

.form-label {
    color: #b7b4c7 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.form-input {
    color: #b7b4c7 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.text-block {
    display: inline-block;
    color: #fff;
}

.image {
    max-width: 20px;
    margin-right: 8px;
    margin-left: 24px;
}

.order-flags {
    height: 16px;
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
}

.column-blue {
    color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    display: inline-block;
    border-radius: 5px;
    background-color: midnightblue;
}

.column-alert {
    color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    display: inline-block;
    border-radius: 5px;
    background-color: #DA2647;
}

.column-blink {
    color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    display: inline-block;
    border-radius: 5px;
    animation: blinkingBackground 2s infinite;
}

.alert-blink {
    color: white;
    padding: 1px;
    display: inline-block;
    border-radius: 5px;
    animation: blinkingBackground 2s infinite;
}

@keyframes blinkingBackground {
    0% {
        background-color: deeppink;
    }

    25% {
        background-color: deeppink;
    }

    50% {
        background-color: darkorange;
    }

    75% {
        background-color: orangered;
    }

    100% {
        background-color: red;
    }
}

.highlight-blink {
    color: white;
    padding: 1px;
    display: inline-block;
    border-radius: 5px;
    animation: blinkinghighlight 2s infinite;
}

@keyframes blinkinghighlight {
    0% {
        background-color: black;
    }

    25% {
        background-color: black;
    }

    50% {
        background-color: white;
    }

    55% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}


.my-account {
    display: inline-block;
}

/********************************************/
/*  Spinner                                 */
/********************************************/

/* Hide the Default Grid spinner */

.e-grid .e-spinner-pane {
    display: none;
}

.e-spinner-pane.my-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 20px;
    height: auto;
}

    .e-spinner-pane.my-spinner .e-spinner-inner .e-spin-material {
        stroke: red;
    }

.my-spinner-image {
    max-width: 70px;
    height: auto;
}

/*************************************************/
/*   DropDownButton (Split single menu button)   */
/*************************************************/

/* To customize the dropdown button. */
.e-dropdown-btn {
    background-color: transparent;
    color: white;
    font-size: 16px;
    font-weight: 400;
}

    /* To customize the dropdown button on hover */
    .e-dropdown-btn:hover {
        background-color: lightpink;
        color: black;
        font-size: 16px;
        font-weight: 400;
    }

    /* Next 3 are ALL required to ensure the selected top level menu selected remains highlighted once a sub menu has been selected and is active */
    .e-dropdown-btn:active {
        background-color: lightpink;
        color: black;
        font-size: 16px;
        font-weight: 400;
    }

    .e-dropdown-btn:focus {
        background-color: lightpink;
        color: black;
        font-size: 16px;
        font-weight: 400;
    }

    .e-dropdown-btn:target {
        background-color: lightpink;
        color: black;
        font-size: 16px;
        font-weight: 400;
    }

/*******************************/
/***  Action Buttons         ***/
/*******************************/

.action-class {
    border-radius: 5px;
}

    .action-class.e-dropdown-btn {
        background-color: #1d1a27;
        color: white;
        font-size: 16px;
        font-weight: 400;
    }

        /* To customize the dropdown button on hover */
        .action-class.e-dropdown-btn:hover {
            background-color: lightpink;
            color: black;
            font-size: 16px;
            font-weight: 400;
        }

        /* Next 3 are ALL required to ensure the selected top level menu selected remains highlighted once a sub menu has been selected and is active */
        .action-class.e-dropdown-btn:active {
            background-color: lightpink;
            color: black;
            font-size: 16px;
            font-weight: 400;
        }

        .action-class.e-dropdown-btn:focus {
            background-color: lightpink;
            color: black;
            font-size: 16px;
            font-weight: 400;
        }

        .action-class.e-dropdown-btn:target {
            background-color: lightpink;
            color: black;
            font-size: 16px;
            font-weight: 400;
        }

/* To customize the dropdown button pop up. */
.menu-class-popup {
    border-radius: 5px;
}

/* Menu dropdowns */

.e-dropdown-popup {
    background-color: #1d1a27;
    border: 1px solid #fff;
}

    /* To customize the dropdown button pop up items. */
    .e-dropdown-popup ul .e-item {
        color: white !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
    }

        /* To customize the dropdown button pop up items on hover. */
        .e-dropdown-popup ul .e-item:hover {
            background-color: #626adb;
            border-radius: 5px;
        }

        /* To customize the dropdown button pop up items on active. */
        .e-dropdown-popup ul .e-item:active {
            background-color: deeppink;
        }

/********************************************/
/*  Form Messages & Errors                  */
/********************************************/

.form-message {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 30px;
    padding-right: 30px;
    margin-right: 12px;
    color: white;
    background-color: red;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    box-shadow: 1px 0px 12px 0 white, -1px 0px 12px 0 white;
    animation: blink 3s linear 1;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/***************/
/***  Grids  ***/
/***************/
.e-grid {
}

    .e-grid .e-headercell {
        background-color: #626adb;
        text-align: center;
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 0px
    }

    .e-grid .e-headercelldiv {
        color: white;
        font-size: 14px;
        font-weight: 500;
    }

    .e-grid .e-rowcell {
        color: black;
        font-size: 14px;
        font-weight: 400;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .e-grid .e-row {
        background-color: whitesmoke;
    }

    .e-grid .e-rowcell.e-selectionbackground {
        background-color: pink !important;
    }

    .e-grid .e-altrow {
        /* background-color: #fafafa; */
    }

    .e-grid td.e-active {
        background-color: #ffc5c5;
    }

    .e-grid .e-groupdroparea {
        font-size: 14px;
        font-weight: 400;
        opacity: 0.8;
    }

    .e-grid .e-icon-grightarrow::before, .e-grid-menu .e-icon-grightarrow::before {
        color: cornflowerblue;
        font-weight: bold;
    }

    .e-grid .e-icon-gdownarrow::before, .e-grid-menu .e-icon-gdownarrow::before {
        color: red;
        font-weight: bold;
    }

    .e-grid .e-detail-intent, .e-grid .e-detailrowcollapse, .e-grid .e-detailheadercell {
        color: red;
        font-weight: bold;
    }

/*Grid_search - Grid denotes the id of Grid control*/
#Grid_search div {
    margin-top: 2px;
}

/***********************/
/***  Grid Toolbars  ***/
/***********************/

/* to apply style to toolbar and button */

.e-toolbar {
}

    .e-toolbar .e-toolbar-item {
    }

        .e-toolbar .e-toolbar-item .e-tbar-btn {
        }

            .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
                background-color: lightpink !important;
                box-shadow: 1px 1px 3px 0 black !important;
                color: white !important;
            }

/******************/
/*   Grid Pager   */
/******************/

/* This class is added to root element of the pager. This to change appearance of the background color and color of font., e.g. "Items per Page"*/
.e-pager {
    font-size: 16px;
    font-weight: 500;
    color: black;
    padding-left: 4px;
}

    /* This class is added to numeric items of the pager.*/
    .e-pager.e-pagercontainer {
    }

    /* This class is added to pager info of the pager. e.g. " 1 of 10 Pages (123 Items)" */
    .e-pager.e-parentmsgbar {
    }

    .e-pager .e-numericitem {
        color: black !important;
        border-bottom: 0px;
        border-radius: 0.125rem;
    }

        .e-pager .e-numericitem:hover {
            color: deeppink !important;
        }

        .e-pager .e-numericitem.e-currentitem {
            background-color: lightpink !important;
            color: black !important;
            border-bottom: 0px;
            border-radius: 0.125rem;
        }

    .e-pager .e-pagesizes {
        font-size: 16px;
        font-weight: 400;
    }

/* This class is added to root of the summary div. */
.e-gridfooter {
}

/* This class is added to rows of grid summary.*/
.e-summaryrow {
}

/* This class is added to rows of grid summary.*/
.e-summarycell {
}

/* This class is added to Filter icon in grid header. */
.e-grid .e-icon-filter::before,
.e-grid-menu .e-icon-filter::before {
    color: hotpink;
}

.e-grid .e-icon-ascending::before,
.e-grid-menu .e-icon-ascending::before {
    color: white;
}

.e-grid .e-icon-descending::before,
.e-grid-menu .e-icon-descending::before {
    color: white;
}

.e-grid .e-groupcaption {
    font-weight: bold;
}

/* Inline grid edit */

.e-grid .e-rowcell .e-checkbox-wrapper {
    margin-top: 0px;
    margin-left: 0px;
}

    .e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-check {
        background-color: deeppink;
        border-color: deeppink;
        color: white;
    }

/* This class is added to Excel Column Filter */
.sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu {
    display: none;
}

.sf-grid .e-excelfilter .e-checkbox-wrapper, .e-checkbox-wrapper .e-label {
    margin-top: 0px;
}

.sf-grid .e-excelfilter.e-popup.e-popup-open {
    width: 350px !important;
}

/***************************************/
/***  Dialog Titles                  ***/
/***************************************/

.my-dialog-title-div {
    color: white !important;
    font-weight: 400;
    display: flex;
}

    .my-dialog-title-div > div:first-child {
        margin-right: auto;
    }

.my-dialog-alert-title {
    color: white !important;
    font-weight: 400;
    padding: 5px;
}

.my-dialog-vip-title {
    color: white !important;
    font-weight: 400;
    background-color: red;
    padding: 5px;
}

.my-dialog-highlight-title {
    color: yellow !important;
    font-weight: 400;
    background-color: #214fc6; /* hlNewCar */
    padding: 5px;
}

.my-dialog-title {
    color: white !important;
    font-weight: 400;
    padding: 5px;
}

/***************************************/
/***  BI / LBS                       ***/
/***************************************/

.my-bi-div-simple {
    margin-top: 16px;
    border-radius: 0px;
    color: white;
    background-color: #0000cd;
    border-color: #0000cd;
    border-width: 5px;
    border-style: solid;
    text-align: center;
}

.my-lbs-div-simple {
    margin-top: 16px;
    border-radius: 0px;
    color: black;
    background-color: yellow;
    border-color: yellow;
    border-width: 5px;
    border-style: solid;
    text-align: center;
}

.my-lts-div-simple {
    margin-top: 16px;
    border-radius: 0px;
    color: black;
    background-color: #44d7a8;
    border-color: #44d7a8;
    border-width: 5px;
    border-style: solid;
    text-align: center;
}
.my-other-div-simple {
    margin-top: 16px;
    border-radius: 0px;
    color: black;
    background-color: lightgrey;
    border-color: lightgrey;
    border-width: 5px;
    border-style: solid;
    text-align: center;
}

.my-bi-div-button {
    margin-top: 16px;
    border-radius: 10px;
    color: white;
    background-color: #0000cd;
    border-color: #0000cd;
    border-width: 5px;
    border-style: solid;
    text-align: center;
    box-shadow: 1px 1px 3px 0 black !important;
}

    .my-bi-div-button:hover {
        box-shadow: 1px 1px 3px 0 deeppink !important;
    }

.my-lbs-div-button {
    margin-top: 16px;
    border-radius: 10px;
    color: black;
    background-color: yellow;
    border-color: yellow;
    border-width: 5px;
    border-style: solid;
    text-align: center;
    box-shadow: 1px 1px 3px 0 black !important;
}

    .my-lbs-div-button:hover {
        box-shadow: 1px 1px 3px 0 deeppink !important;
    }

.my-lts-div-button {
    margin-top: 16px;
    border-radius: 10px;
    color: black;
    background-color: #44d7a8;
    border-color: #44d7a8;
    border-width: 5px;
    border-style: solid;
    text-align: center;
    box-shadow: 1px 1px 3px 0 black !important;
}

    .my-lts-div-button:hover {
        box-shadow: 1px 1px 3px 0 deeppink !important;
    }

.my-other-div-button {
    margin-top: 16px;
    border-radius: 10px;
    color: black;
    background-color: lightgrey;
    border-color: lightgrey;
    border-width: 5px;
    border-style: solid;
    text-align: center;
    box-shadow: 1px 1px 3px 0 black !important;
}

    .my-other-div-button:hover {
        box-shadow: 1px 1px 3px 0 deeppink !important;
    }

.my-bi-text {
    color: white !important;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none !important;
}

.my-lbs-text {
    color: black !important;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none !important;
}

.my-other-text {
    color: black !important;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none !important;
}

/*********************************/
/***  Dialogs                  ***/
/*********************************/

[id*="Grid_dialogEdit_wrapper"] {
}

.e-dlg-container {
    padding-top: 24px;
    padding-bottom: 24px;
}

.e-edit-dialog {
    overflow-y: scroll !important;
    max-height: calc(100%) !important; /* Stops small Dialog Edit height when grid is searched then row is edited */
}

.e-dialog {
    overflow-y: auto !important;
    max-height: calc(100%) !important; /* Stops small Dialog Edit height when grid is searched then row is edited */
}

    .e-dialog .e-dlg-header-content {
        background-color: #3f51b5;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .e-dialog .e-dlg-header {
    }

    .e-dialog .e-dlg-content {
        margin-top: 16px;
        margin-bottom: 0px;
    }

    .e-dialog .e-footer-content {
        display: block;
        width: 100%;
        margin-bottom: 0px;
        margin-top: 6px;
        text-align: right;
    }

/*********************************/
/***  Main Grid Dialogs        ***/
/*********************************/

.my-main-grid-dialog.e-dialog .e-footer-content {
    display: block;
    width: 99%;
    margin-bottom: 0px;
    margin-top: 6px;
    text-align: right;
}

/****************************/
/***  SfDialogs Dialogs   ***/
/****************************/

.my-normal-dialog.e-dialog .e-footer-content {
    display: block;
    width: 100%;
    margin-bottom: 0px;
    margin-top: -24px;
    text-align: right;
}

/************************************************/
/***  SfDialogs Dialogs with dynamic Content  ***/
/************************************************/

.my-normal-dialog-dynamic.e-dialog {
    overflow-y: hidden !important;
    max-height: calc(100%) !important;
}

    .my-normal-dialog-dynamic.e-dialog .e-footer-content {
        display: block;
        width: 100%;
        margin-bottom: 0px;
        margin-top: 0px;
        text-align: right;
    }

.my-tab-dynamic.e-tab .e-content {
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
}

/***************************************/
/***  SfDialogs Dialogs - Centered   ***/
/***************************************/
.my-confirm-dialog.e-dialog .e-dlg-content {
    margin-top: 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
}

.my-confirm-dialog.e-dialog .e-footer-content {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    margin-top: -4px;
    text-align: center;
}

/************************************************/
/***  SfDialogs Dialogs with dynamic Content  ***/
/************************************************/

.my-alert-dialog.e-dialog {
    overflow-y: hidden !important;
    max-height: calc(100%) !important; /* Stops small Dialog Edit height when grid is searched then row is edited */
}

    .my-alert-dialog.e-dialog .e-dlg-header-content {
        background-color: red;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .my-alert-dialog.e-dialog .e-dlg-content {
        margin-top: 24px;
        margin-bottom: 0px;
        text-align: center;
        font-size: 15px;
        font-weight: 400;
    }

    .my-alert-dialog.e-dialog .e-footer-content {
        display: block;
        width: 100%;
        margin-bottom: 0px;
        margin-top: 0px;
        text-align: center;
    }

.my-alert-dialog.e-tab .e-content {
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
}

/************************************************* 
** Page Filters 
**************************************************/

.form-group-filter {
    margin-right: 0px;
}

.form-group-filter-checkbox {
    margin-right: 0px;
}

/************************************************* 
** General Span Classes 
**************************************************/

.vip-order {
    color: red;
    font-weight: 500;
}

.stuck-order {
    color: red;
    background: yellow;
    font-weight: 500;
}

/************************************************* 
** Generic inputs 
**************************************************/

/* Default */

.e-input-group .e-input,
.e-input-group.e-control-wrapper .e-input,
.e-float-input input,
.e-float-input.e-control-wrapper input,
.e-float-input textarea,
.e-float-input.e-control-wrapper textarea,
.e-ddl.e-input-group.e-control-wrapper .e-input {
    font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
    background-color: AliceBlue;
    color: black;
    font-size: 15px;
    font-weight: 400;
    padding-left: 4px;
    resize: none !important;
    border: none !important;
}

/* Default but with a name */

.my-default.e-input-group .e-input,
.my-default.e-input-group.e-control-wrapper .e-input,
.my-default.e-float-input input,
.my-default.e-float-input.e-control-wrapper input,
.my-default.e-float-input textarea,
.my-default.e-float-input.e-control-wrapper textarea,
.e-ddl.e-input-group.e-control-wrapper .e-input {
    font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
    background-color: AliceBlue;
    color: black;
    font-size: 15px;
    font-weight: 400;
    padding-left: 4px;
    resize: none !important;
    border: none !important;
}

/* Also affects Pager Page Size Numeric Dropdown */
.e-ddl.e-input-group.e-control-wrapper .e-input {
    font-size: 15px;
    background-color: transparent;
    margin-top: -1px;
}

.e-ddl.e-input-group.e-control-wrapper:hover .e-input {
    font-size: 15px;
    background-color: transparent;
    margin-top: -1px;
}

/************************************************* 
** Mandatory inputs 
**************************************************/

.my-mandatory.e-input-group .e-input,
.my-mandatory.e-input-group.e-control-wrapper .e-input,
.my-mandatory.e-float-input input,
.my-mandatory.e-float-input.e-control-wrapper input,
.my-mandatory.e-float-input textarea,
.my-mandatory.e-float-input.e-control-wrapper textarea,
.my-mandatory.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: #ffe9ee;
    color: black;
    font-size: 15px;
}

.my-mandatory-column {
    background-color: #ffe9ee;
    color: black;
}

/************************************************* 
** Highlighted Flashing inputs 
**************************************************/

.my-flashing-highlight.e-input-group .e-input,
.my-flashing-highlight.e-input-group.e-control-wrapper .e-input,
.my-flashing-highlight.e-float-input input,
.my-flashing-highlight.e-float-input.e-control-wrapper input,
.my-flashing-highlight.e-float-input textarea,
.my-flashing-highlight.e-float-input.e-control-wrapper textarea,
.my-flashing-highlight.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: black;
    color: white;
    font-size: 15px;
    font-weight: 500;
    animation: flashingHighlight 2s infinite !important;
}

@keyframes flashingHighlight {
    0% {
        background-color: deeppink;
        color: white;
    }

    25% {
        background-color: deeppink;
        color: white;
    }

    50% {
        background-color: darkorange;
        color: white;
    }

    75% {
        background-color: orangered;
        color: white;
    }

    100% {
        background-color: red;
        color: white;
    }
}

/************************************************* 
** Mandatory inputs in inline Grid Edit
**************************************************/

.my-inline-mandatory {
    background-color: #ffe9ee;
    color: black;
    font-size: 15px;
}

/************************************************* 
** My Grid Search Input
**************************************************/

.my-search-box.e-input-group .e-input,
.my-search-box.e-input-group.e-control-wrapper .e-input {
    background-color: #fff;
    color: black;
    margin-top: 2px;
}

/************************************************* 
** Mandatory inputs - White 
**************************************************/
.my-mandatory-white.e-input-group .e-input,
.my-mandatory-white.e-input-group.e-control-wrapper .e-input,
.my-mandatory-white.e-float-input input,
.my-mandatory-white.e-float-input.e-control-wrapper input,
.my-mandatory-white.e-float-input textarea,
.my-mandatory-white.e-float-input.e-control-wrapper textarea,
.my-mandatory-white.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: #ffe9ee;
    color: black;
}


/********************************************** 
** Readonly inputs 
**********************************************/

.my-readonly.e-input-group .e-input,
.my-readonly.e-input-group.e-control-wrapper .e-input,
.my-readonly.e-float-input input,
.my-readonly.e-float-input.e-control-wrapper input,
.my-readonly.e-float-input textarea,
.my-readonly.e-float-input.e-control-wrapper textarea,
.my-readonly.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: WhiteSmoke;
    color: black;
}

.my-help.e-input-group .e-input,
.my-help.e-input-group.e-control-wrapper .e-input,
.my-help.e-float-input input,
.my-help.e-float-input.e-control-wrapper input,
.my-help.e-float-input textarea,
.my-help.e-float-input.e-control-wrapper textarea,
.my-help.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: white;
    color: darkgreen;
    margin-top: 0px;
    margin-left: 0px;
}

.my-readonly-highlight.e-input-group .e-input,
.my-readonly-highlight.e-input-group.e-control-wrapper .e-input,
.my-readonly-highlight.e-float-input input,
.my-readonly-highlight.e-float-input.e-control-wrapper input,
.my-readonly-highlight.e-float-input textarea,
.my-readonly-highlight.e-float-input.e-control-wrapper textarea,
.my-readonly-highlight.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: #ffd0b9;
    color: black;
}

.my-custreadonly.e-input-group .e-input,
.my-custreadonly.e-input-group.e-control-wrapper .e-input,
.my-custreadonly.e-float-input input,
.my-custreadonly.e-float-input.e-control-wrapper input,
.my-custreadonly.e-float-input textarea,
.my-custreadonly.e-float-input.e-control-wrapper textarea,
.my-custreadonly.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: blue;
    color: white;
    padding-left: 5px;
    text-align: left;
}

.my-poreadonly.e-input-group .e-input,
.my-poreadonly.e-input-group.e-control-wrapper .e-input,
.my-poreadonly.e-float-input input,
.my-poreadonly.e-float-input.e-control-wrapper input,
.my-poreadonly.e-float-input textarea,
.my-poreadonly.e-float-input.e-control-wrapper textarea,
.my-poreadonly.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: lightgreen;
    color: black;
    padding-left: 5px;
    text-align: left;
}

.my-pomandatory.e-input-group .e-input,
.my-pomandatory.e-input-group.e-control-wrapper .e-input,
.my-pomandatory.e-float-input input,
.my-pomandatory.e-float-input.e-control-wrapper input,
.my-pomandatory.e-float-input textarea,
.my-pomandatory.e-float-input.e-control-wrapper textarea,
.my-pomandatory.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: lightgreen;
    color: red;
    padding-left: 5px;
    text-align: left;
}

.my-supplierreadonly.e-input-group .e-input,
.my-supplierreadonly.e-input-group.e-control-wrapper .e-input,
.my-supplierreadonly.e-float-input input,
.my-supplierreadonly.e-float-input.e-control-wrapper input,
.my-supplierreadonly.e-float-input textarea,
.my-supplierreadonly.e-float-input.e-control-wrapper textarea,
.my-supplierreadonly.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: pink;
    color: black;
    padding-left: 5px;
    text-align: left;
}

.my-supplierdiff.e-input-group .e-input,
.my-supplierdiff.e-input-group.e-control-wrapper .e-input,
.my-supplierdiff.e-float-input input,
.my-supplierdiff.e-float-input.e-control-wrapper input,
.my-supplierdiff.e-float-input textarea,
.my-supplierdiff.e-float-input.e-control-wrapper textarea,
.my-supplierdiff.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: #44D7A8;
    color: black;
    padding-left: 5px;
    text-align: left;
}

.my-supplierdiffOK.e-input-group .e-input,
.my-supplierdiffOK.e-input-group.e-control-wrapper .e-input,
.my-supplierdiffOK.e-float-input input,
.my-supplierdiffOK.e-float-input.e-control-wrapper input,
.my-supplierdiffOK.e-float-input textarea,
.my-supplierdiffOK.e-float-input.e-control-wrapper textarea,
.my-supplierdiffOK.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: #A6E7FF;
    color: black;
    padding-left: 5px;
    text-align: left;
}

.my-suppliermandatory.e-input-group .e-input,
.my-suppliermandatory.e-input-group.e-control-wrapper .e-input,
.my-suppliermandatory.e-float-input input,
.my-suppliermandatory.e-float-input.e-control-wrapper input,
.my-suppliermandatory.e-float-input textarea,
.my-suppliermandatory.e-float-input.e-control-wrapper textarea,
.my-suppliermandatory.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: pink;
    color: red;
    padding-left: 5px;
    text-align: left;
}

.my-lineitemmandatory.e-input-group .e-input,
.my-lineitemmandatory.e-input-group.e-control-wrapper .e-input,
.my-lineitemmandatory.e-float-input input,
.my-lineitemmandatory.e-float-input.e-control-wrapper input,
.my-lineitemmandatory.e-float-input textarea,
.my-lineitemmandatory.e-float-input.e-control-wrapper textarea,
.my-lineitemmandatory.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: #ffe9ee !important;
    color: red;
    font-weight: 400;
    padding-right: 10px;
    padding-top: 8px;
    text-align: right;
    font-size: 14px !important;
    text-decoration: none !important;
}

/********************************************** 
** Change the input field for Select/Filter inputs 
**********************************************/
.my-filter-select.e-input-group .e-input,
.my-filter-select.e-input-group.e-control-wrapper .e-input,
.my-filter-select.e-float-input input,
.my-filter-select.e-float-input.e-control-wrapper input,
.my-filter-select.e-float-input textarea,
.my-filter-select.e-float-input.e-control-wrapper textarea,
.my-filter-select.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: lawngreen;
    color: black;
    padding-left: 5px;
    text-align: left;
}

/********************************************** 
** Change the input field for Highlight inputs 
**********************************************/

.my-highlight.e-input-group .e-input,
.my-highlight.e-input-group.e-control-wrapper .e-input,
.my-highlight.e-float-input input,
.my-highlight.e-float-input.e-control-wrapper input,
.my-highlight.e-float-input textarea,
.my-highlight.e-float-input.e-control-wrapper textarea,
.my-highlight.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: #214fc6; /* hlNewCar */
    color: white !important;
    font-weight: 500;
}

/*********************************************************** 
** Change the input field for DeliveryDate within Window
***********************************************************/

.my-dd-in-window.e-input-group .e-input,
.my-dd-in-window.e-input-group.e-control-wrapper .e-input,
.my-dd-in-window.e-float-input input,
.my-dd-in-window.e-float-input.e-control-wrapper input,
.my-dd-in-window.e-float-input textarea,
.my-dd-in-window.e-float-input.e-control-wrapper textarea,
.my-dd-in-window.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: darkgreen;
    color: white !important;
    font-weight: 500;
}

.dd-in-window {
    background-color: darkgreen;
    color: white !important;
    font-weight: 500;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    display: inline-block;
    border-radius: 5px;
}



/*********************************************************** 
** Change the input field for DeliveryDate outside Window
***********************************************************/
.my-dd-out-window.e-input-group .e-input,
.my-dd-out-window.e-input-group.e-control-wrapper .e-input,
.my-dd-out-window.e-float-input input,
.my-dd-out-window.e-float-input.e-control-wrapper input,
.my-dd-out-window.e-float-input textarea,
.my-dd-out-window.e-float-input.e-control-wrapper textarea,
.my-dd-out-window.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: red;
    color: white !important;
    font-weight: 500;
}

.dd-out-window {
    background-color: red;
    color: white !important;
    font-weight: 500;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    display: inline-block;
    border-radius: 5px;
    animation: blinkingBackground 2s infinite;
}

/********************************************** 
** Change the input field for Flag inputs 
**********************************************/

/* Change the input field for my-flag fields */
.my-flag.e-input-group .e-input,
.my-flag.e-input-group.e-control-wrapper .e-input,
.my-flag.e-float-input input,
.my-flag.e-float-input.e-control-wrapper input,
.my-flag.e-float-input textarea,
.my-flag.e-float-input.e-control-wrapper textarea,
.my-flag.e-ddl.e-input-group.e-control-wrapper .e-input {
    background-color: red;
    color: white;
}

/************************************************* 
** All Input Labels 
**************************************************/
.form-row {
    margin: 5px;
}

/* Normal labels */
.e-float-input.e-control-wrapper:not(.e-error) input:not(:focus) ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error):not(e-input-focus) input ~ label.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error):not(e-input-focus) input[readonly] ~ label.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus) ~ label.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error):not(e-input-focus) textarea ~ label.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error):not(e-input-focus) textarea[readonly] ~ label.e-float-text {
    font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
    color: darkblue;
    font-size: 1.32em;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin-top: -10px;
    margin-bottom: 0px;
}

/* Form labels - White */ /* Also affects Grid Search Box !*/

.my-mandatory-white.e-float-input.e-control-wrapper:not(.e-error) input:not(:focus) ~ label.e-label-top.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:not(.e-error):not(e-input-focus) input ~ label.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:not(.e-error):not(e-input-focus) input[readonly] ~ label.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus) ~ label.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:not(.e-error):not(e-input-focus) textarea ~ label.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:not(.e-error):not(e-input-focus) textarea[readonly] ~ label.e-float-text {
    color: #fff;
}

/* Hover Input */

.e-input-group .e-input,
.e-input-group.e-control-wrapper:hover .e-input,
.e-float-input input,
.e-float-input.e-control-wrapper:hover input,
.e-float-input textarea,
.e-float-input.e-control-wrapper:hover textarea,
.e-ddl.e-input-group.e-control-wrapper:hover .e-input {
    color: deeppink;
}

/* Hover labels */

.e-float-input.e-control-wrapper:hover:not(.e-error) input:not(:focus) ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper:hover:not(.e-error):not(e-input-focus) input ~ label.e-float-text,
.e-float-input.e-control-wrapper:hover:not(.e-error):not(e-input-focus) input[readonly] ~ label.e-float-text,
.e-float-input.e-control-wrapper:hover:not(.e-error) textarea:not(:focus) ~ label.e-float-text,
.e-float-input.e-control-wrapper:hover:not(.e-error):not(e-input-focus) textarea ~ label.e-float-text,
.e-float-input.e-control-wrapper:hover:not(.e-error):not(e-input-focus) textarea[readonly] ~ label.e-float-text {
    color: deeppink;
}

/* Hover labels - White */

.my-mandatory-white.e-float-input.e-control-wrapper:hover:not(.e-error) input:not(:focus) ~ label.e-label-top.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:hover:not(.e-error):not(e-input-focus) input ~ label.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:hover:not(.e-error):not(e-input-focus) input[readonly] ~ label.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:hover:not(.e-error) textarea:not(:focus) ~ label.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:hover:not(.e-error):not(e-input-focus) textarea ~ label.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper:hover:not(.e-error):not(e-input-focus) textarea[readonly] ~ label.e-float-text {
    color: hotpink;
}

/* Focused labels */

.e-float-input.e-input-focus input ~ label.e-float-text,
.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text,
.e-float-input.e-input-focus textarea ~ label.e-float-text,
.e-float-input.e-control-wrapper.e-input-focus textarea ~ label.e-float-text {
    font-weight: 500 !important;
    color: forestgreen !important;
}

/* Focused labels - White */

.my-mandatory-white.e-float-input.e-input-focus input ~ label.e-float-text,
.my-mandatory-white.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    font-weight: 500 !important;
    color: greenyellow !important;
}

/* Focused Inputs */

.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus .e-input,
.e-float-input.e-input-focus input,
.e-float-input.e-control-wrapper.e-input-focus input,
.e-float-input.e-input-focus textarea,
.e-float-input.e-control-wrapper.e-input-focus textarea,
.e-ddl.e-input-group.e-control-wrapper.e-input-focus .e-input {
    color: forestgreen;
}

/****************************/
/***    Checkbox          ***/
/****************************/

.e-checkbox-wrapper .e-frame {
    padding-left: 0px;
    margin-top: 0px;
    margin-top: 0px;
    vertical-align: top;
}

    .e-checkbox-wrapper .e-frame.e-check {
        background-color: deeppink;
        border-color: deeppink;
        color: #fff;
    }

.e-checkbox-wrapper .e-label {
    font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
    margin-top: 0px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
}

/* Top Filter Checkbox */

.my-filter-checkbox.e-checkbox-wrapper {
    margin-top: 22px;
    margin-left: 0px;
}

    .my-filter-checkbox.e-checkbox-wrapper .e-label {
        font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
        margin-top: 0px;
        color: #fff;
        font-size: 15px;
        font-weight: 400;
    }

    .my-filter-checkbox.e-checkbox-wrapper:hover .e-label {
        color: deeppink;
    }

    .my-filter-checkbox.e-checkbox-wrapper[readonly] {
        background-color: lightpink;
        border-color: lightpink;
        color: black;
    }

/* Edit Dialog Filter Checkbox */

.my-checkbox.e-checkbox-wrapper {
    margin-top: 22px;
    margin-bottom: 0px;
    margin-left: 0px;
}

    .my-checkbox.e-checkbox-wrapper .e-label {
        font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
        color: darkblue;
        font-size: 16px;
        font-weight: 400;
    }

    .my-checkbox.e-checkbox-wrapper:hover .e-label {
        color: deeppink;
    }

    .my-checkbox.e-checkbox-wrapper[readonly] {
        background-color: lightpink;
        border-color: lightpink;
        color: black;
    }

.my-checkbox-line.e-checkbox-wrapper {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
}

    .my-checkbox-line.e-checkbox-wrapper .e-label {
        font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
        color: darkblue;
        font-size: 16px;
        font-weight: 400;
    }

    .my-checkbox-line.e-checkbox-wrapper:hover .e-label {
        color: deeppink;
    }

    .my-checkbox-line.e-checkbox-wrapper[readonly] {
        background-color: lightpink;
        border-color: lightpink;
        color: black;
    }

.my-checkbox-filter.e-checkbox-wrapper {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.my-checkbox-filter.e-checkbox-wrapper {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

    .my-checkbox-filter.e-checkbox-wrapper .e-frame {
        margin-top: 6px;
        height: 24px;
        width: 24px;
        font-size: 18px;
        padding-top: 5px;
    }

    .my-checkbox-filter.e-checkbox-wrapper .e-label {
        font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
        color: white;
        font-size: 16px;
        font-weight: 400;
        margin-top: 8px;
    }

    .my-checkbox-filter.e-checkbox-wrapper:hover .e-label {
        color: deeppink;
    }

    .my-checkbox-filter.e-checkbox-wrapper[readonly] {
        background-color: lightpink;
        border-color: lightpink;
        color: black;
    }

/**************************************/
/***    Multi-Line Outputs          ***/
/**************************************/

textarea.e-input,
.e-float-input textarea,
.e-float-input.e-control-wrapper textarea,
.e-input-group textarea,
.e-input-group.e-control-wrapper textarea {
    resize: none !important;
}

.run-div {
    margin: 16px 10px 0px 10px;
}

.text-box-run {
    width: 100%;
    padding: 10px 10px;
    margin-bottom: 8px;
    font-family: "Cascadia Code", "Courier New", "Courier" !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: darkblue !important;
    background-color: AliceBlue;
}

.text-box-normal {
}

    .text-box-normal textarea {
        font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
        font-size: 14px !important;
        color: black !important;
        font-weight: 400 !important;
    }

.text-box-mandatory {
}

    .text-box-mandatory textarea {
        font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
        font-size: 14px !important;
        color: black !important;
        font-weight: 400 !important;
        background: #ffe9ee !important;
    }

.text-box-result {
}

    .text-box-result textarea {
        font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
        font-size: 14px !important;
        color: black !important;
        font-weight: 400 !important;
        background: #e7f9fa !important;
    }

.text-box-staff-notes {
}

    .text-box-staff-notes textarea {
        font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
        font-size: 14px !important;
        color: blue !important;
        font-weight: 400 !important;
    }

.text-box-system-notes {
}

    .text-box-system-notes textarea {
        font-family: "Work Sans", "sans-serif", "Helvetica", "Arial";
        font-size: 14px !important;
        color: orangered !important;
        font-weight: 400 !important;
    }

.text-box-monospace {
}

    .text-box-monospace textarea {
        font-family: "Cascadia Code", "Courier New", "Courier" !important;
        font-size: 14px !important;
        color: black !important;
        font-weight: 400 !important;
    }

/*******************************/
/***  RichTextEditor         ***/
/*******************************/

/* RichTextEditor : To change font family and font size */
.my-richtext.e-richtexteditor .e-rte-content .e-content,
.my-richtext.e-richtexteditor .e-source-content .e-content {
    font-size: 14pt;
    font-weight: 400;
    font-family: 'Cascadia Code', 'Verdana', 'Arial', 'Courier New', 'Courier';
}

.my-richtext .e-rte-content .e-content {
    /* to get the desired font on intially*/
    font-size: 14pt;
    font-weight: 400;
    font-family: 'Cascadia Code', 'Verdana', 'Arial', 'Courier New', 'Courier';
}

/* RichTextEditor : To change font color and content background */
.my-richtext.e-richtexteditor .e-rte-content,
.my-richtext.e-richtexteditor .e-source-content {
    background: #1d1a27 !important;
    color: black;
}

/* RichTextEditor : To change font family and font size */
.my-email-richtext.e-richtexteditor .e-rte-content .e-content,
.my-email-richtext.e-richtexteditor .e-source-content .e-content {
    font-size: 14pt;
    font-weight: 400;
    font-family: 'Cascadia Code', 'Verdana', 'Arial', 'Courier New', 'Courier';
}

.my-email-richtext .e-rte-content .e-content {
    /* to get the desired font on intially*/
    font-size: 14pt;
    font-weight: 400;
    font-family: 'Cascadia Code', 'Verdana', 'Arial', 'Courier New', 'Courier';
}

/* RichTextEditor : To change font color and content background */
.my-email-richtext.e-richtexteditor .e-rte-content,
.my-email-richtext.e-richtexteditor .e-source-content {
    background: #ffe9ee !important;
    color: black;
}


/* RichTextEditor : To change font family and font size */
.my-ai-richtext.e-richtexteditor .e-rte-content .e-content,
.my-ai-richtext.e-richtexteditor .e-source-content .e-content {
    font-size: 14pt;
    font-weight: 400;
    font-family: 'Cascadia Code', 'Verdana', 'Arial', 'Courier New', 'Courier';
}

.my-ai-richtext .e-rte-content .e-content {
    /* to get the desired font on intially*/
    font-size: 14pt;
    font-weight: 400;
    font-family: 'Cascadia Code', 'Verdana', 'Arial', 'Courier New', 'Courier';
}

/* RichTextEditor : To change font color and content background */
.my-ai-richtext.e-richtexteditor .e-rte-content,
.my-ai-richtext.e-richtexteditor .e-source-content {
    background: #F0FFFF !important;
    color: black;
}


/* Date Range */

.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
    font-size: 16px;
    height: 20px;
}

/* Dropdown icon color */

.e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    color: #626adb;
    font-size: 16px;
    padding-left: 4px;
}

/**********************************/
/***  Date Range Picker         ***/
/**********************************/

.e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
}

.e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper:hover .e-input-group-icon:last-child {
    color: deeppink;
}

.e-daterangepicker.e-popup .e-range-header .e-start-label, .e-daterangepicker.e-popup .e-range-header .e-end-label {
    color: hotpink;
    font-size: 16px;
}

.e-daterangepicker.e-popup .e-range-header {
    background-color: #ffe9ee;
    height: 75px;
}

    .e-daterangepicker.e-popup .e-range-header .e-start-label, .e-daterangepicker.e-popup .e-range-header .e-end-label {
        color: black !important;
        font-size: 20px;
    }

.e-calendar .e-header .e-prev, .e-calendar .e-header .e-next, .e-bigger.e-small .e-calendar .e-header .e-prev, .e-bigger.e-small .e-calendar .e-header .e-next {
    font-size: 16px;
}

.e-daterangepicker.e-popup .e-calendar {
}

.e-calendar .e-content td:hover span.e-day {
}

.e-daterangepicker.e-popup .e-calendar .e-header .e-title {
    color: hotpink;
    font-size: 18px;
}

/**********************************/
/***  Dropdown Menu             ***/
/**********************************/

.e-dropdownbase {
    font-size: 16px;
    background-color: #1d1a27;
}

    .e-dropdownbase .e-list-item {
        font-size: 16px;
        background-color: #1d1a27;
        color: white;
    }

        .e-dropdownbase .e-list-item.e-active {
            background-color: deeppink;
            color: white;
        }

            .e-dropdownbase .e-list-item.e-active.e-hover {
                background-color: #626adb;
                color: white;
            }

        .e-dropdownbase .e-list-item.e-hover {
            background-color: #626adb;
            color: white;
        }

/* Dropdown focusing color of input element */
.e-ddl.e-input-group.e-control-wrapper.e-input-focus::before, .e-ddl.e-input-group.e-control-wrapper.e-input-focus::after {
    background-color: green;
    color: white;
}

/* DDL Icon */

.e-ddl.e-input-group.e-control-wrapper .e-ddl-icon:hover {
    color: deeppink;
}

/**********************************/
/***  Numeric input             ***/
/**********************************/

.e-numeric e-input-group-icon.e-spin-down:before,
.e-numeric .e-input-group-icon.e-spin-down:before,
.e-numeric .e-input-group-icon.e-spin-down:before,
.e-numeric .e-input-group-icon.e-spin-down:before {
    content: "\e934";
    font-size: 10px;
    margin-left: 8px;
}

.e-numeric .e-input-group-icon.e-spin-up:before,
.e-numeric .e-input-group-icon.e-spin-up:before,
.e-numeric .e-input-group-icon.e-spin-up:before,
.e-numeric .e-input-group-icon.e-spin-up:before {
    content: "\e823";
    font-size: 10px;
}

.my-mandatory.e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
    color: #626adb;
    font-size: 16px;
    padding-left: 6px;
}

.my-mandatory.e-numeric.e-control-wrapper:hover.e-input-group .e-input-group-icon {
    color: deeppink;
}


.my-mandatory-white.e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
    color: #626adb;
    font-size: 16px;
    padding-left: 6px;
}

.my-mandatory-white.e-numeric.e-control-wrapper:hover.e-input-group .e-input-group-icon {
    color: deeppink;
}

/********************/
/***  Dashboards  ***/
/********************/

#BasicCard, #SideCard {
    margin: 16px;
    padding: 24px;
    background-color: #1d1a27;
    color: #b7b4c7;
    font-size: 16px;
}

.newIcon {
    background: #2CC000;
    border-radius: 12px;
    border-radius: 12px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 14px;
    margin-bottom: 10px;
    margin-left: 16px;
    font-size: 14px;
    width: 58px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.4px;
}

.comingIcon {
    background: #2CC000;
    border-radius: 12px;
    border-radius: 12px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 14px;
    margin-bottom: 10px;
    margin-left: 16px;
    font-size: 14px;
    width: 128px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.4px;
}

/********************/
/***  Cards       ***/
/********************/

.card {
    background-color: #1d1a27;
}

.e-card {
    padding: 10px;
    box-shadow: 1px 1px 3px 0 white !important;
}

    .e-card .e-card-header {
    }

        .e-card .e-card-header .e-card-header-image {
        }

    .e-card > .e-card-image {
        width: auto;
        height: auto;
    }

    .e-card .e-card-content {
        font-size: 16px;
        color: #b7b4c7;
        margin-top: -12px;
    }

    .e-card .e-card-separator {
    }

    .e-card .e-card-header .e-card-header-caption .e-card-header-title {
        font-size: 18px;
        color: #fff;
    }

    .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
        font-size: 18px;
    }

/******************/
/***  ListView  ***/
/******************/

.new-listview.e-listview {
}

    .new-listview.e-listview .e-list-text {
    }

    .new-listview.e-listview .e-list-header {
    }

    .new-listview.e-listview .e-list-item {
        text-align: center;
        color: #fff;
        font-size: 16px !important;
        font-weight: 500;
        margin-top: 8px;
        margin-left: 8px;
        margin-right: 8px;
        white-space: normal;
        background-color: #ff8866; /* Orange */
        background-color: #6f2da8; /* Grape */
        background-color: #bb4895; /* Pink */
        background-color: #214fc6; /* Blue */
        background-color: #da614e; /* Dark Orange */
    }

        .new-listview.e-listview .e-list-item .e-text-content {
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .new-listview.e-listview .e-list-item.e-hover {
            background-color: #45A27D;
            box-shadow: 1px 1px 3px 0 white !important;
        }

.coming-listview.e-listview {
}

    .coming-listview.e-listview .e-list-text {
    }

    .coming-listview.e-listview .e-list-header {
    }

    .coming-listview.e-listview .e-list-item {
        text-align: left;
        color: #000;
        font-size: 16px !important;
        font-weight: 500;
        margin-top: 8px;
        margin-left: 8px;
        margin-right: 8px;
        white-space: normal;
        background-color: #cec8ef; /* Soap */
    }

        .coming-listview.e-listview .e-list-item .e-text-content {
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .coming-listview.e-listview .e-list-item.e-hover {
            background-color: #45A27D;
            box-shadow: 1px 1px 3px 0 white !important;
        }

/******************/
/*   Buttons      */
/******************/

.e-btn {
    margin-left: 4px;
    color: white;
}

.btn-primary {
    background-color: #bb4895 !important;
}

/***************************/
/*   Buttons - Primary     */
/***************************/

.footer-button-primary {
    width: 150px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 20px !important;
    border-radius: 8px;
    background-color: #45A27D !important;
    box-shadow: 1px 1px 3px 0 transparent;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: white !important;
    height: 30px;
    text-transform: capitalize;
}

    .footer-button-primary.e-dialog .e-btn.e-flat, .e-css.e-btn.e-flat {
        color: white;
    }

    .footer-button-primary:hover {
        background-color: #bb4895 !important;
        box-shadow: 1px 1px 3px 0 black !important;
        color: white !important;
    }

    .footer-button-primary:active {
        background-color: darkred !important;
        color: white !important;
    }

/***************************/
/*   Buttons - Normal      */
/***************************/

.footer-button {
    width: 150px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 20px !important;
    border-radius: 8px;
    background-color: #626adb !important;
    box-shadow: 1px 1px 3px 0 transparent;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: white !important;
    height: 30px;
    text-transform: capitalize;
}

    .footer-button.e-dialog .e-btn.e-flat, .e-css.e-btn.e-flat {
        color: white;
    }

    .footer-button:hover {
        background-color: #bb4895 !important;
        box-shadow: 1px 1px 3px 0 black !important;
        color: white !important;
    }

    .footer-button:disabled {
        background-color: #626adb !important;
        color: darkgrey !important;
    }

    .footer-button:active {
        background-color: darkred !important;
        color: white !important;
    }

/***************************/
/*   Buttons - Alert       */
/***************************/

.footer-button-alert {
    width: 150px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 20px !important;
    border-radius: 8px;
    background-color: red !important;
    box-shadow: 1px 1px 3px 0 transparent;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: white !important;
    height: 30px;
    text-transform: capitalize;
}

    .footer-button-alert.e-dialog .e-btn.e-flat, .e-css.e-btn.e-flat {
        color: white;
    }

    .footer-button-alert:hover {
        background-color: red !important;
        box-shadow: 1px 1px 3px 0 black !important;
        color: white !important;
    }

    .footer-button-alert:active {
        background-color: darkred !important;
        color: white !important;
    }

/********************************/
/*   Buttons - Inline First     */
/********************************/

.inline-button-first {
    width: 150px;
    margin-left: 24px;
    margin-top: 12px;
    border-radius: 8px;
    background-color: #626adb !important;
    box-shadow: 1px 1px 3px 0 transparent;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: white;
    height: 34px;
}

    .inline-button-first:hover {
        background-color: #bb4895 !important;
        box-shadow: 1px 1px 3px 0 white;
        color: white !important;
    }

    .inline-button-first:disabled {
        background-color: #626adb !important;
        color: darkgrey !important;
    }

    .inline-button-first:active {
        background-color: darkred !important;
        color: white !important;
    }

/********************************/
/*   Buttons - Inline Rest      */
/********************************/

.inline-button {
    width: 150px;
    margin-left: 0px;
    margin-top: 12px;
    border-radius: 8px;
    background-color: #626adb !important;
    box-shadow: 1px 1px 3px 0 transparent;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: white;
    height: 34px;
}

    .inline-button:hover {
        background-color: #bb4895 !important;
        box-shadow: 1px 1px 3px 0 white;
        color: white !important;
    }

    .inline-button:disabled {
        background-color: #626adb !important;
        color: darkgrey !important;
    }

    .inline-button:active {
        background-color: darkred !important;
        color: white !important;
    }

/********************************/
/*   Buttons - Reset            */
/********************************/

.reset-filter-button {
    margin-top: 10px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    border-radius: 8px;
    background-color: #626adb !important;
    box-shadow: 1px 1px 3px 0 transparent;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: white;
    height: 30px;
    text-transform: capitalize;
}

    .reset-filter-button:hover {
        background-color: #bb4895 !important;
        box-shadow: 1px 1px 3px 0 white;
        color: white;
    }

    .reset-filter-button:disabled {
        background-color: #626adb !important;
        color: darkgrey !important;
    }

    .reset-filter-button:active {
        background-color: darkred !important;
        color: white !important;
    }

/********************************/
/*   Buttons - PDF              */
/********************************/

.pdf-button {
    margin-top: 0px;
    margin-bottom: 20px;
    margin-right: 20px;
    border-radius: 8px;
    background-color: #626adb !important;
    box-shadow: 1px 1px 3px 0 transparent;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: white;
    height: 30px;
    text-transform: capitalize;
}

    .pdf-button:hover {
        background-color: #bb4895 !important;
        box-shadow: 1px 1px 3px 0 black !important;
        color: white;
    }

    .pdf-button:disabled {
        background-color: #626adb !important;
        color: darkgrey !important;
    }

    .pdf-button:active {
        background-color: darkred !important;
        color: white !important;
    }

/********************************/
/*   Buttons - Save             */
/********************************/

.save-button {
    margin-top: 15px;
    margin-left: 0px !important;
    margin-right: 20px !important;
    border-radius: 8px;
    background-color: lightgreen !important;
    box-shadow: 1px 1px 3px 0 transparent;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: black;
    height: 30px;
    text-transform: capitalize;
}

    .save-button:hover {
        background-color: #bb4895 !important;
        box-shadow: 1px 1px 3px 0 black !important;
        color: white;
    }

    .save-button:disabled {
        background-color: #626adb !important;
        color: darkgrey !important;
    }

    .save-button:active {
        background-color: darkred !important;
        color: white !important;
    }

/********************************/
/*   Buttons - Close            */
/********************************/

.close-button {
    margin-top: 15px;
    margin-left: 0px !important;
    margin-right: 20px !important;
    border-radius: 8px;
    background-color: lightpink !important;
    box-shadow: 1px 1px 3px 0 transparent;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: black;
    height: 30px;
    text-transform: capitalize;
}

    .close-button:hover {
        background-color: #bb4895 !important;
        color: white;
    }

    .close-button:disabled {
        background-color: #626adb !important;
        box-shadow: 1px 1px 3px 0 black !important;
        color: darkgrey !important;
    }

    .close-button:active {
        background-color: darkred !important;
        color: white !important;
    }

/********************************/
/*   Buttons - Logout           */
/********************************/

.logout-button {
    background-color: #1d1a27;
    font-size: 12px;
    font-weight: 500;
    border: 0;
    text-align: center;
    color: white;
    height: 30px;
    width: 100px;
}

    .logout-button:hover {
        background-color: #bb4895;
        box-shadow: 1px 1px 3px 0 white;
        color: white;
    }

    .logout-button:disabled {
        background-color: #626adb !important;
        color: darkgrey !important;
    }

    .logout-button:active {
        background-color: darkred !important;
        color: white !important;
    }

.mysection {
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
    color: darkblue;
    margin-left: 11px;
    margin-top: 0px;
    margin-bottom: 30px;
}

/******************/
/***  Tooltips  ***/
/******************/

.e-tooltip-wrap {
    border-radius: 4px;
    opacity: 1;
}

    .e-tooltip-wrap.e-popup {
        font-family: "Cascadia Code", "Courier New", "Courier" !important;
        background-color: deeppink;
        border: 0px solid #000;
    }

    .e-tooltip-wrap .e-tip-content {
        color: white;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
    }

    /* To customize the arrow tip at top */
    .e-tooltip-wrap .e-arrow-tip.e-tip-top {
        margin-top: 0px;
    }

    .e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
        color: deeppink;
    }

    /* To customize the arrow tip at top */
    .e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
        color: deeppink;
    }

.notes-tooltip.e-tooltip-wrap.e-popup {
    font-family: "Cascadia Code", "Courier New", "Courier" !important;
    background-color: blue;
    border: 0px solid #000;
}

.notes-tooltip.e-tooltip-wrap .e-tip-content {
    color: white;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    width: 800px;
}

.flash-tooltip.e-tooltip-wrap.e-popup {
    font-family: "Cascadia Code", "Courier New", "Courier" !important;
    background-color: yellow;
    border: 0px solid #000;
}

.flash-tooltip.e-tooltip-wrap .e-tip-content {
    color: red;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

/***************************/
/***  Tabs               ***/
/***************************/

.e-tab {
}

    .e-tab > .e-content {
        overflow-y: auto !important;
        /* height: calc(100% - 200px) !important; /* tab height - tab header height*/
    }

        .e-tab > .e-content .e-item {
        }

    /* customize the header of Tab control */

    .e-tab .e-tab-header {
        background: AliceBlue !important;
        border: 1px solid hotpink;
    }

    /* content items of Tab */

    .e-tab .e-content {
        margin-right: -2px;
        margin-top: -6px;
        padding-bottom: 0px;
    }

        .e-tab .e-content .e-item {
            margin-top: 0px;
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
            color: black;
            border-left: 1px solid hotpink;
            border-right: 1px solid hotpink;
            border-bottom: 1px solid hotpink;
        }

    /* customize the inactive tab item */

    .e-tab .e-tab-header .e-toolbar-item {
        box-shadow: 1px 0px 6px 0px darkblue !important;
    }

        .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
            color: darkblue !important;
            font-family: "Work Sans", "sans-serif", "Helvetica", "Arial" !important;
            font-size: 15px !important;
            font-weight: 400 !important;
            text-transform: capitalize !important;
        }

        /* customize the active tab item */

        .e-tab .e-tab-header .e-toolbar-item.e-active {
            border: 0px solid pink;
        }

            /* customize the selected tab item text and icon */

            .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
            .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
                font-weight: 500 !important;
                color: hotpink !important;
            }

/***************************/
/***  Icons              ***/
/***************************/

.e-btn-icon, e-ddl-icon, .e-input-group-icon {
    font-family: 'e-icons';
}

.menu-icons {
    font-size: 16px;
}

.e-message::before {
    content: '\e7cb';
}

.my-search-icon::before {
    content: '\e993';
    font-family: e-icons;
    color: blueviolet;
}

.e-search:before {
    content: '\e993';
}

.e-font:before {
    content: '\e34c';
}

.e-admin:before {
    content: '\e679';
    color: deeppink;
}

.e-menu-admin:before {
    content: '\e679';
    color: orangered;
}

.e-menu-manage:before {
    content: '\e193';
    color: deepskyblue;
}

.e-menu-orders:before {
    content: '\ec2a';
    color: yellowgreen;
}

.e-menu-products:before {
    content: '\ec23';
    color: darkorange;
}

.e-menu-calls:before {
    content: '\e424';
    color: orangered;
}

.e-menu-tasks:before {
    content: '\e30d';
    color: mediumvioletred;
}

.e-menu-customers:before {
    content: '\e424';
    color: fuchsia;
}

.e-menu-view:before {
    content: '\e950';
    color: lightyellow;
}

.e-menu-prompts:before {
    content: '\e30d';
    color: mediumvioletred;
}

.e-menu-prompt-results:before {
    content: '\e424';
    color: orangered;
}

.e-menu-stocks-funds:before {
    content: '\ec23';
    color: darkorange;
}

.e-stores:before {
    content: '\e660';
    color: coral;
}

.e-site:before {
    content: '\e660';
    color: coral;
}

.e-admin:before {
    content: '\e679';
    color: deeppink;
}

.e-menu-admin:before {
    content: '\e679';
    color: orangered;
}

.e-menu-settings:before {
    content: '\eb4c';
    color: sandybrown;
}

.e-general:before {
    content: '\e679';
    color: sandybrown;
}

.e-user:before {
    content: '\e424';
    color: sandybrown;
}

.e-users:before {
    content: '\e424';
    color: darkgoldenrod;
}

.e-menu-manage:before {
    content: '\e193';
    color: deepskyblue;
}

.e-menu-leads:before {
    content: '\ec2a';
    color: yellowgreen;
}

.e-menu-products:before {
    content: '\ec23';
    color: darkorange;
}

.e-menu-view:before {
    content: '\e950';
    color: lightyellow;
}

.e-clients:before {
    content: '\e424';
    color: navajowhite;
}

.e-customers:before {
    content: '\e424';
    color: navajowhite;
}

.e-dashboard:before {
    content: '\e459';
    color: white;
}

.e-reports:before {
    content: '\e30d';
    color: antiquewhite;
}

.e-order:before {
    content: '\ec2a';
    color: darkorange;
}

.e-product:before {
    content: '\ec23';
    color: yellowgreen;
}

.e-financial:before {
    content: '\e664';
    color: mediumseagreen;
}

.e-bigcommerce:before {
    content: '\e663';
    color: darkgoldenrod;
}

.e-sparesource:before {
    content: '\eb4d';
    color: green;
}

.e-ebay:before {
    content: '\ec28';
    color: darkslateblue;
}

.e-onbuy:before {
    content: '\e345';
    color: deeppink;
}

.e-amazon:before {
    content: '\e267';
    color: chocolate;
}

.e-lead:before {
    content: '\ec2a';
    color: yellowgreen;
}

.e-lead-report:before {
    content: '\e30d';
    color: orange;
}

.e-logout:before {
    content: '\e424';
    color: red;
}

.e-testcode:before {
    content: '\e92f';
    color: red;
}

.e-parameter:before {
    content: '\eb4c';
    color: deeppink;
}

.e-email:before {
    content: '\e73a';
    color: deeppink;
}

.e-supplier:before {
    content: '\e290';
    color: darkslateblue;
}

.e-brand:before {
    content: '\ec2a';
    color: blue;
}

.e-category:before {
    content: '\e663';
    color: green;
}

.e-channel:before {
    content: '\eb41';
    color: yellowgreen;
}

.e-send-leads:before {
    content: '\e606';
    color: deepskyblue;
}

.e-adgroups:before {
    content: '\e660';
    color: coral;
}

.e-visit:before {
    content: '\e30c';
    color: aliceblue;
}

.e-site:before {
    content: '\e660';
    color: coral;
}

.e-listed:before {
    content: '\e192';
    color: green;
}

.e-close:before {
    content: '\e192';
    color: green;
}

.e-notlisted:before {
    content: '\e204';
    color: orange;
}

.e-premove:before {
    content: '\e974';
    color: red;
}

.e-psync::before {
    content: '\e606';
    color: coral;
}

.e-ptrash:before {
    content: '\e820';
    color: red;
}

.e-pplus:before {
    content: '\eb0c';
    color: blue;
}

.e-pnew:before {
    content: '\e22c';
    color: darkslateblue;
}

.e-pupdate:before {
    content: '\e99d';
    color: blueviolet;
}

.e-premove:before {
    content: '\e706';
    color: red;
}

.e-orderstatus:before {
    content: '\ec2a';
    color: ghostwhite;
}

.e-action::before {
    content: '\e816';
    color: red;
}

.e-refresh::before {
    content: '\e606';
    color: blue;
}

.e-refresh-coral::before {
    content: '\e606';
    color: coral;
}

.e-refresh-green::before {
    content: '\e606';
    color: green;
}

.e-refresh-yellow::before {
    content: '\e606';
    color: yellowgreen;
}

.e-refresh-blue::before {
    content: '\e606';
    color: mediumblue;
}

.e-note:before {
    content: '\e30d';
    color: blue;
    font-size: 22px;
}

.e-new::before {
    content: '\ec2a';
    color: lightgreen;
}

.e-new-coral::before {
    content: '\ec2a';
    color: coral;
}

.e-new-blue::before {
    content: '\ec2a';
    color: blue;
}

.e-new-green::before {
    content: '\ec2a';
    color: green;
}

.e-sent::before {
    content: '\e816';
    color: green;
}

.e-under1k::before {
    content: '\ec18';
    color: pink;
}

.e-print::before {
    color: black;
}

.e-filtered::before {
    content: '\e251';
    color: lightcoral;
}

.e-duplicate::before {
    content: '\e60d';
    color: coral;
}

.e-incomplete::before {
    content: '\e607';
    color: orange;
}

.e-complete::before {
    content: '\e682';
    color: orangered;
}

.e-noclient::before {
    content: '\ec1a';
    color: orangered;
}

.e-error::before {
    content: '\ec1a';
    color: red;
}

.e-current::after {
    content: '\e308';
    color: lawngreen;
}

.e-archived::after {
    content: '\e308';
    color: sandybrown;
}

.e-export::before {
    content: '\e242';
    color: dodgerblue;
}

.e-updateentity::before {
    content: '\e728';
    color: orange;
}

.e-downloadfile::before {
    content: '\e603';
    color: darkolivegreen;
}

.e-uploadfile::before {
    content: '\e710';
    color: orangered;
}

.e-goc::before {
    content: '\e725';
    color: red;
}

.e-cps-orange:after {
    content: '\e725';
    color: orange;
}

.e-cps-pink::before {
    content: '\e725';
    color: deeppink;
}

.e-store::before {
    content: '\e677';
    color: yellow;
}

.e-market::before {
    content: '\ebaa';
    color: mediumpurple;
}

.e-delete::before {
    content: '\e602';
    color: red;
}

.e-archive::before {
    content: '\e340';
    color: orangered;
}

.e-make-visible::before {
    content: '\e345';
    color: green;
}

.e-make-not-visible::before {
    content: '\e721';
    color: orange;
}

.e-pdeleted::before {
    content: '\e607';
    color: red;
}

.e-pproduct::before {
    content: '\e30c';
    color: red;
}

.e-process::before {
    content: '\e816';
    color: blue;
}

.e-sendpo::before {
    content: '\e816';
    color: blue;
}

.e-chasepo::before {
    content: '\e816';
    color: orange;
}

.e-dispatch::before {
    content: '\e682';
    color: fuchsia;
}

.e-sendorderupdate::before {
    content: '\e209';
    color: purple;
}

.e-sendinvoice::before {
    content: '\e19f';
    color: red;
}

.e-park::before {
    content: '\e607';
    color: mediumvioletred;
}

.e-unpark::before {
    content: '\ea84';
    color: purple;
}

.e-copy::before {
    content: '\e77b';
    color: orangered;
}

/*******************************/
/***  Dashboard Reports      ***/
/*******************************/

.e-dbgreen::before {
    color: green;
}

.e-dbwhite::before {
    color: white;
}

.e-dbred::before {
    color: red;
}

.e-dbblue::before {
    color: blue;
}

.e-dbyellow::before {
    color: yellow;
}

.e-dbpeople::before {
    color: sandybrown;
}

/******************************/
/***  Column styles         ***/
/******************************/

.e-red-column {
    font-weight: 500 !important;
    color: indianred !important;
}

.e-green-column {
    font-weight: 500 !important;
    color: mediumseagreen !important;
}

.e-blue-column {
    font-weight: 500 !important;
    color: mediumblue !important;
}

/******************************/
/***  Our Highlight styles  ***/
/******************************/

.hlBanana {
    border-radius: 5px;
    padding: 2px;
    background-color: #FFD12A;
    text-decoration-color: #FFD12A !important;
}

.hlBlueberry {
    border-radius: 5px;
    padding: 2px;
    background-color: #4F86F7;
    color: white;
    text-decoration-color: #4F86F7 !important;
}

.hlBubbleGum {
    border-radius: 5px;
    padding: 2px;
    background-color: #FFD3F8;
    text-decoration-color: #FFD3F8 !important;
}

.hlCedarChest {
    border-radius: 5px;
    padding: 2px;
    background-color: #C95A49;
    color: white;
    text-decoration-color: #C95A49 !important;
}

.hlCherry {
    border-radius: 5px;
    padding: 2px;
    background-color: #DA2647;
    color: white;
    text-decoration-color: #DA2647 !important;
}

.hlChocolate {
    border-radius: 5px;
    padding: 2px;
    background-color: #BD8260;
    text-decoration-color: #BD8260 !important;
}

.hlCoconut {
    border-radius: 5px;
    padding: 2px;
    background-color: #FEFEFE;
    text-decoration-color: #FEFEFE !important;
}

.hlDaffodil {
    border-radius: 5px;
    padding: 2px;
    background-color: #FFFF31;
    text-decoration-color: #FFFF31 !important;
}

.hlDirt {
    border-radius: 5px;
    padding: 2px;
    background-color: #9B7653;
    color: white;
    text-decoration-color: #9B7653 !important;
}

.hlEucalyptus {
    border-radius: 5px;
    padding: 2px;
    background-color: #44D7A8;
    text-decoration-color: #44D7A8 !important;
}

.hlGreen {
    border-radius: 5px;
    padding: 2px;
    background-color: darkgreen;
    color: white;
    text-decoration-color: darkgreen !important;
}

.hlFreshAir {
    border-radius: 5px;
    padding: 2px;
    background-color: #A6E7FF;
    text-decoration-color: #A6E7FF !important;
}

.hlGrape {
    border-radius: 5px;
    padding: 2px;
    background-color: #6F2DA8;
    color: white;
    text-decoration-color: #6F2DA8 !important;
}

.hlJellyBean {
    border-radius: 5px;
    padding: 2px;
    background-color: #DA614E;
    color: white;
    text-decoration-color: #DA614E !important;
}

.hlLeatherJacket {
    border-radius: 5px;
    padding: 2px;
    background-color: #253529;
    color: white;
    text-decoration-color: #253529 !important;
}

.hlLemon {
    border-radius: 5px;
    padding: 2px;
    background-color: #FFFF38;
    text-decoration-color: #FFFF38 !important;
}

.hlLicorice {
    border-radius: 5px;
    padding: 2px;
    background-color: #1A1110;
    color: white;
    text-decoration-color: #1A1110 !important;
}

.hlLilac {
    border-radius: 5px;
    padding: 2px;
    background-color: #DB91EF;
    text-decoration-color: #DB91EF !important;
}

.hlLime {
    border-radius: 5px;
    padding: 2px;
    background-color: #B2F302;
    text-decoration-color: #B2F302 !important;
}

.hlLumber {
    border-radius: 5px;
    padding: 2px;
    background-color: #FFE4CD;
    text-decoration-color: #FFE4CD !important;
}

.hlNewCar {
    border-radius: 5px;
    padding: 2px;
    background-color: #214FC6;
    color: white;
    text-decoration-color: #214FC6 !important;
}

.hlOrange {
    border-radius: 5px;
    padding: 2px;
    background-color: #FF8866;
    text-decoration-color: #FF8866 !important;
}

.hlPeach {
    border-radius: 5px;
    padding: 2px;
    background-color: #FFD0B9;
    text-decoration-color: #FFD0B9 !important;
}

.hlPine {
    border-radius: 5px;
    background-color: #45A27D;
    color: white;
    text-decoration-color: #45A27D !important;
}

.hlRose {
    border-radius: 5px;
    padding: 2px;
    background-color: #FF5050;
    color: white;
    text-decoration-color: #FF5050 !important;
}

.hlShampoo {
    border-radius: 5px;
    padding: 2px;
    background-color: #FFCFF1;
    text-decoration-color: #FFCFF1 !important;
}

.hlSmoke {
    border-radius: 5px;
    padding: 2px;
    background-color: #738276;
    color: white;
    text-decoration-color: #738276 !important;
}

.hlSoap {
    border-radius: 5px;
    padding: 2px;
    background-color: #CEC8EF;
    text-decoration-color: #CEC8EF !important;
}

.hlStrawberry {
    border-radius: 5px;
    padding: 2px;
    background-color: #FC5A8D;
    text-decoration-color: #FC5A8D !important;
}

.hlTulip {
    border-radius: 5px;
    padding: 2px;
    font-size: 14px;
    background-color: #FF878D;
    text-decoration-color: #FF878D !important;
}

.my-tbd {
    margin-left: 20px;
    color: blue;
    font-size: 20px;
    font-weight: 600;
}

.my-error {
    margin-top: 12px;
    margin-left: 20px;
    color: red;
    font-size: 18px;
    font-weight: 500;
}

.my-error-blue {
    margin-top: 12px;
    margin-left: 20px;
    color: lightskyblue !important;
    font-size: 18px;
    font-weight: 500;
}

/*******************************/
/***  File Upload            ***/
/*******************************/

/* To specify height */
.e-upload.e-control-wrapper, .e-bigger.e-small .e-upload.e-control-wrapper {
    height: auto;
    width: auto;
}

/* To specify font size and color for File Upload browse button */
.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn, .e-bigger.e-small .e-upload .e-upload-actions .e-btn {
    font-family: cursive;
    height: 40px;
    background-color: AliceBlue;
    color: red;
    font-size: 16px;
    font-weight: 500;
}

/* To specify font size and color for File Upload content */
.e-upload .e-file-select-wrap .e-file-drop, .e-bigger.e-small .e-upload .e-file-select-wrap .e-file-drop {
    font-family: cursive;
    font-size: 16px;
    font-weight: 200;
    color: red;
}

/* To specify background color */
.e-upload .e-upload-files .e-upload-file-list {
    background-color: AliceBlue;
}

/*******************************/
/***  Toasts                 ***/
/*******************************/

.e-toast-container {
    margin-top: 75px !important;
    margin-right: 20px !important;
}

    .e-toast-container .e-toast .e-toast-message .e-toast-title {
        color: white !important;
        font-size: 15px;
        font-weight: bold;
    }

    .e-toast-container .e-toast .e-toast-message .e-toast-content {
        color: white !important;
        font-size: 15px;
        font-weight: normal;
    }

@font-face {
    font-family: 'Toast_icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.toast-icons {
    font-family: 'Toast_icons' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.e-toast-container .e-toast .e-toast-icon.e-icons {
    height: auto;
    font-size: 30px;
}


.toast-icons.e-success::before {
    content: "\e701";
}

.toast-icons.e-error::before {
    content: "\e700";
}

.toast-icons.e-info::before {
    content: "\e704";
}

.toast-icons.e-warning::before {
    content: "\e703";
}

/*******************************/
/***  General Media          ***/
/*******************************/

@media screen and (max-width: 1280px) {

    .my-account {
        display: none;
    }
}

/*******************************/
/***  CW Media               ***/
/*******************************/

@media screen and (max-width: 1440px) {

    .cw-logo {
        display: none;
        z-index: 0 !important;
    }

    .sp-logo {
        display: none;
        z-index: 0 !important;
    }

    .my-menu {
        margin-left: 10px;
        margin-right: auto;
        z-index: 0 !important;
    }

    .my-account {
        display: none;
        z-index: 0 !important;
    }
}

/*******************************/
/***  DP Media               ***/
/*******************************/

@media screen and (max-width: 1440px) {

    .dp-logo {
        display: none;
    }

    .my-menu {
        margin-left: 10px;
        margin-right: auto;
    }

    .my-account {
        display: none;
    }
}