@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

@font-face {
    font-family: 'Montserrat';
    src: url(fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format("truetype");
}

@font-face {
    font-family: 'RethinkSans';
    src: url(fonts/Rethink_Sans/RethinkSans-VariableFont_wght.ttf) format("truetype");
}

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

:root {
    --navbar-height: 75px;
    --primary-font: Montserrat, sans-serif;
    /* --header-background: #405A97; 
    --header-background: #405A97;
    --sidebar-background: #46537D;
    --orginal --sidebar-background: #77B5DD; */

    --header-background: #405A97;
    --sidebar-background: #77B5DD;
    --footer-background: #DFE6EF;
    --color-purple: #6277B2;
    --color-green: #4CAF50;
    --color-red: #F3485C;
    --blue-text: #425175;
    --acuity-low-color: #F3d148;
    --acuity-medium-color: #F37B48;
    --acuity-high-color: #F3485C;
    --prognosis-tier-0-color: #4EB57C;
    --prognosis-tier-1-color: #F3d148;
    --prognosis-tier-2-color: #F37B48;
    --prognosis-tier-3-color: #F3485C;
    --status-eligible-color: #23AEB7;
    --status-enrolled-color: #405A97;
    --status-active-color: #4EB57C;
    --status-inactive-color: #F3485C;
    --status-unenrolled-color: #DFE6EF;
    --status-deceased-color: #434043;
    --color-blue: #003DA5;
    --color-purple-2: #405A97;
    --color-dark-gray-2: #858585;
    --color-light-gray: #CACACA;
    --color-light-blue: #E0E4F0;
    --color-blue-border: #2F3648;
    --color-dark-blue: #455A95;
    --color-blue-gray: #98A5C4;
    --status-hasdoc-color: #4EB57C;
    --status-hasnodoc-color: #F3485C;
    --color-bright-blue: #80B3D9;
    --tier-0-color: #4EB57C;
    --tier-1-color: #F3d148;
    --tier-2-color: #F37B48;
    --tier-3-color: #F3485C;
    --dark-gray-color: #434043;
    --gray-color: #AAAAAA;
    --bs-light: #F9F9F9;
    --bs-danger-rgb: 243, 72, 92;
    --e-input-field-border: #CBCBCB;
    --health-program-call-type-health-check-in-color: #4EB57C;
    --health-program-call-type-clinical-escalation-app-color: #F37B48;
    --health-program-call-type-clinical-escalation-rn-color: #23A3B7;
    --health-program-call-type-follow-up-color: #4EB57C;
    --health-program-call-type-non-urgent-follow-up-color: #4Eb57c;
    --health-program-call-type-nurse-assistance-color: #6E9ECF;
    --health-program-call-type-nurse-assistance-urgent-color: #F3485C;
    --bs-light-rgb: 249, 249, 249;
    --bs-secondary-rgb: 125, 127, 134;
    --bs-corner-radius: 7px;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-body-font-size: .9rem;
    --bs-primary-rgb: var(--color-sf-primary);
    --color-yellow: #FFDA6B;
    --enrollment-task-welcome-call-color: #E8E8E8; /* Welcome call */
    --enrollment-task-callback-color: #405A97; /* Follow up call */
    --enrollment-task-schedule-color: #4EB57C; /* Schedule appointment */
    --enrollment-task-hold-color: #000000; /* On Hold */
    --enrollment-task-reschedule-color: #F3485C; /* Reschedule appointment */
    --enrollment-task-none-color: #E8E8E8;
    --enrollment-task-appointment-color: #E8E8E8;
}

html, body, body * {
    font-family: var(--primary-font);
}

html, body, td, th, .e-grid .e-rowcell {
    font-size: var(--bs-body-font-size) !important;
}

body {
    position: relative;
}

input,
.card,
.card.card-secondary,
.e-grid .e-gridheader,
.elevate-card,
.section-header,
.e-outline,
.e-outline.e-input-group:not(.e-input-focus),
.e-outline.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
.e-outline.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
.e-outline.e-input-group.e-float-icon-left:not(.e-input-focus),
.e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-input-focus) {
    border-radius: var(--bs-corner-radius) !important;
}

button, 
.btn, 
.e-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button,
.btn,
.e-btn,
.e-outline.filter-button {
    border-radius: 2px !important;
}

.e-control, .e-radio + label, .e-label {
    font-family: var(--primary-font) !important;
}

.assessment-container {
    margin: 0px !important;
    padding: 2rem !important;
    overflow-y: auto !important;
    flex-grow: 1 !important;
}

    .assessment-container > *:not(form) {
        margin: 0px !important;
        padding: 0px !important;
        margin-top: 1rem !important;
    }

    .assessment-container > *:not(form):first-child {
        margin-top: 0 !important;
    }

    .assessment-container > form > * {
        margin: 0px !important;
        padding: 0px !important;
        margin-top: 1rem !important;
    }

    .assessment-header-patient-info-container {
        background-color: #F5F5F5;
    }

.assessment-title-container {
    justify-content: space-between;
    margin-bottom: 8px;
}

.assessment-title {
    text-align: left;
    font-weight: 300;
    font-size: 30px;
    padding-top: 15px;
}

.assessment-header-sticky {
    top: 70px;
    z-index: 10;
    padding: 15px 20px 15px 0;
    margin: 0;
    background-color: #F5F5F5;
}

h1:focus {
    outline: none;
}

a {
    color: #0071c1;
}

.list-card-severe, .list-card-moderate, .list-card-low {
    width: 100px;
}

.list-card-severe {
    color: white;
    margin: 1rem;
    padding-bottom: 1rem;
    background-color: #B16161;
    text-align: center;
    border: solid 2px #B16161;
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    flex: 0 1 26%;
}

.list-card-moderate {
    color: white;
    margin: 1rem;
    padding-bottom: 1rem;
    background-color: #B1A961;
    text-align: center;
    border: solid 2px #B1A961;
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    flex: 0 1 26%;
}

.list-card-low {
    color: white;
    margin: 1rem;
    padding-bottom: 1rem;
    background-color: #76B161;
    text-align: center;
    border: solid 2px #76B161;
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    flex: 0 1 26%;
}

.bold-text {
    font-weight: bold;
}

.page-title {
    width: 90%;
}

.error-text {
    color: red;
    font-size: large;
}

.success-message {
    color: green;
    font-weight: bold;
    font-size: large;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-check-input {
    border: none;
    min-width: 14px !important;
}

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

.invalid {
    outline: 1px solid red;
}

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

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

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

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

.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");
    }

.section-header {
    margin: 8px 56px 16px 56px;
}

/* CUSTOM CLASSES */

.e-footer-content .e-btn.elevate-primary-button.e-flat:not([DISABLED]) {
    color: #fff !important;
}

.elevate-primary-button, .btn-primary {
    color: #fff;
    background-color: #405A97 !important;
    border-color: #405a97 !important;
}

    .elevate-primary-button:disabled {
        background-color: rgba(var(--color-sf-secondary), 0.12) !important;
        color: var(--grey-400, #7D7F86) !important;
    }

    .elevate-primary-button:hover {
        color: white !important;
    }

.elevate-outline-button {
    color: #405A97 !important;
    background-color: #fff !important;
    border-color: #405A97 !important;
    border-image: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

    .elevate-outline-button:hover {
        color: #fff !important;
        background-color: #405A97 !important;
        border-color: #405A97 !important;
    }

    .elevate-outline-button:disabled {
        background-color: rgba(var(--color-sf-secondary), 0.12) !important;
        border-color: rgba(var(--color-sf-secondary), 0.12) !important;
        color: var(--grey-400, #7D7F86) !important;
    }

.elevate-dropdown {
    border: 1px solid #CBCBCB !important;
    border-radius: 7px !important;
    padding: 4px 4px 4px 12px;
    align-items: center;
}

    .elevate-dropdown .e-icons {
        position: relative !important;
        top: 4px !important;
    }

    .elevate-dropdown input {
        position: relative !important;
        top: 2px !important;
    }

        .elevate-dropdown input::placeholder {
            color: var(--blue-text) !important;
            font-style: italic !important;
        }

.elevate-checkbox .e-icons {
    border: 1px solid var(--color-blue-border) !important;
}

.elevate-checkbox .e-label {
    font-size: 14px !important;
    font-family: var(--primary-font) !important;
}

.elevate-textbox {
    border: 1px solid #CBCBCB !important;
    border-radius: 1px !important;
    padding: 4px 4px 4px 12px;
    align-items: center;
}

    .elevate-textbox textarea::placeholder {
        color: var(--blue-text) !important;
        font-style: italic !important;
    }

.elevate-context-menu ul {
    box-shadow: 0px 1px 8px 0px #00000033 !important;
    color: #2F3648 !important;
    border: none !important;
}

.elevate-datepicker {
    border: 1px solid #CBCBCB !important;
    border-radius: 1px !important;
    padding: 4px 4px 4px 12px;
    background: white !important;
}

    .elevate-datepicker input {
        position: relative;
        top: 2px;
    }

    .elevate-datepicker .e-date-icon {
        position: relative;
        top: 4px;
    }

.e-time-wrapper .e-input-group-icon.e-icons.e-active {
    background: none !important;
}

.e-tab > .e-content {
    padding: 1rem 2rem !important;
}

.elevate-grid {
    width: 100% !important;
    padding: 0px !important;
}

    .elevate-grid > *:first-child {
        margin-top: 0px !important;
    }

    .elevate-grid h4, .elevate-grid h3, .elevate-grid h5 {
        font-weight: 600 !important;
        font-size: 24px !important;
        color: #232323 !important;
        margin: 0px !important;
        padding-left: 0px !important;
        margin-right: 1rem !important;
    }

.e-grid,
.e-grid .e-gridheader,
.e-grid th,
.e-grid tr,
.e-grid td,
.e-grid .e-grid tbody,
.e-grid tfoot,
.e-grid thead,
.e-grid .e-pager,
.e-grid .e-toolbar {
    border: none !important;
    padding: 0px !important;
}

    .e-grid .e-gridheader {
        background: #F9F9FA !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

        .e-grid .e-gridheader .e-centeralign {
            text-align: center !important;
        }

        .e-grid .e-gridheader .e-rightalign {
            text-align: right !important;
        }

    .e-grid th {
        background: #F9F9FA !important;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        box-shadow: none !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .e-grid td {
        border-bottom: 1px solid #F2F2F2 !important;
        gap: 10px;
        padding-right: 14px !important;
        padding-left: 14px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        box-shadow: none !important;
    }

    .e-grid .e-toolbar {
        padding: .5rem !important;
    }

    .e-grid .grid-actions .e-control-container {
        margin-top: 0 !important;
    }

    .e-grid tr:hover {
        cursor: pointer;
    }

    .e-grid .e-pager .e-pagercontainer,
    .e-grid .e-pager .e-pagercontainer * {
        background-color: transparent;
    }

    .e-grid .e-pager .e-currentitem.e-active,
    .e-grid .e-pager .e-currentitem.e-focus,
    .e-grid .e-pager .e-currentitem.e-focused {
        background: var(--primary-base, #405A97) !important;
        color: var(--primary-100, #EEF0FA) !important;
    }

    .e-grid .e-pager {
        background: #F9F9FA !important;
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

        .e-grid .e-pager .e-spacing, .e-grid .e-pager .e-numericitem:hover, .e-grid .e-pager .e-currentitem {
            padding: 3px 12px 3px 12px !important;
        }

    .e-grid .e-headercelldiv,
    .e-grid .e-columnheader.e-wrap .e-sortfilterdiv,
    .e-grid.e-wrap .e-columnheader .e-sortfilterdiv {
        display: inline !important;
        float: none !important;
        margin: 0px !important;
        padding: 0px !important;
    }

    .e-grid .e-columnheader.e-wrap .e-sortfilterdiv,
    .e-grid.e-wrap .e-columnheader .e-sortfilterdiv {
        margin-bottom: -5px !important;
        position: absolute;
    }

    .e-grid .e-headercelldiv {
        padding-right: .5rem !important;
    }


    /* Unsorted (neutral) icon */
    .e-grid .e-headercell[aria-sort] .e-sortfilterdiv.e-icons:not(.e-icon-ascending):not(.e-icon-descending)::before {
        font-family: "Font Awesome 6 Pro";
        content: "\e60d"; /* fa-sort */
        font-weight: 900;
        color: #A2A5AB;
        display: inline-block;
        font-size: 0.8rem;
    }

    /* Ascending icon */
    .e-grid .e-sortfilterdiv.e-icon-ascending::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f106"; /* fa-chevron-up */
        font-weight: 900;
        color: #A2A5AB;
        display: inline-block;
        font-size: 0.8rem;
    }

    /* Descending icon */
    .e-grid .e-sortfilterdiv.e-icon-descending::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f107"; /* fa-chevron-down */
        font-weight: 900;
        color: #A2A5AB;
        display: inline-block;
        font-size: 0.8rem;
    }

    .e-grid tr:has(.e-recordpluscollapse) button#expand-button {
        display: none;
    }

    .e-grid tr:has(.e-recordplusexpand) button#collapse-button,
    .e-grid tr:has(.e-recordplusexpand) .grid-group-more-details span {
        display: none;
    }

    /* Hide the sort order number in Syncfusion Grid headers */
    .e-grid .e-sortnumber {
        display: none !important;
    }

    .e-grid tr:has(.e-recordpluscollapse) .grid-group-more-details span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-weight: normal !important;
    }

    .e-grid.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        background: #F9F9F9 !important;
    }

.no-header-grid .e-grid .e-gridheader {
    display: none !important;
}

.no-header-grid .e-grid .e-row {
    cursor: default !important;
}

.patient-care-plan .e-grid .e-groupcaption {
    background: #eeeeee !important;
    color: #333333 !important;
    font-weight: 600 !important;
}

.patient-care-plan .e-grid .e-recordplusexpand,
.patient-care-plan .e-grid .e-recordpluscollapse,
.patient-care-plan .e-grid .e-group-intent {
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.patient-care-plan .e-grid .e-gridcontent {
    border: 1px solid #F1F1F1 !important;
}

.elevate-chip {
    padding: 5px 15px !important;
    border-radius: 100px !important;
    gap: 10px;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
    white-space: nowrap;
}

    .elevate-chip.rounded-circle {
        padding: 2px 6px !important;
        font-family: monospace !important;
        font-size: 12px !important;
    }

.elevate-card {
    display: flex;
    box-shadow: 0px 1px 3px 0px #00000040;
    background: #ffffff;
}

.elevate-card-info {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* see notes below */
    grid-gap: 1em;
}

.elevate-card .card-actions {
    width: 80px;
}

.elevate-card .card-field-title, .elevate-card .card-field-value {
    font-size: 18px;
}

.dialog-error {
    font-size: 12px;
    line-height: 14px;
}

.elevate-wizard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 660px;
    overflow-x: hidden;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    overflow-y: hidden;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.wizard-step-indicator {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background-color: #cbcbcb; /* Default background */
    border: 1px solid #cbcbcb; /* Default border */
}

    .wizard-step-indicator.active {
        background-color: var(--color-purple);
        border-color: var(--color-purple);
    }

    .wizard-step-indicator.complete {
        background-color: var(--color-green);
        border-color: var(--color-green);
        color: white;
    }

.wizard-step-title {
    font-size: 12px;
    font-weight: 600;
}

.wizard-step-separator {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.separator-line {
    height: 1px;
    width: calc(100% + 68px);
    background-color: #cbcbcb; /* Line color */
    position: relative;
    top: -12px;
}

.table-button {
    box-shadow: none !important;
    border: 1px solid var(--color-purple) !important;
}

.spinner-inline {
    position: relative;
}

    .spinner-inline .e-spinner-pane {
        position: relative;
        display: block;
    }

/* Ensure the Font Awesome icons are visible */
.fas.fa-check {
    color: white;
    font-size: 12px;
}

.elevate-wizard-tabs .e-toolbar {
    display: none;
}

/* OVERRIDES */

.e-sidebar.e-left {
    border-right: none !important;
}

.content .e-content-animation {
    height: calc(100vh - var(--navbar-height));
    overflow-y: scroll;
}

.main.e-content-animation {
    transition: none !important;
}

.acuity-low {
    background-color: var(--acuity-low-color) !important;
}

.acuity-medium {
    background-color: var(--acuity-medium-color) !important;
}

.acuity-high {
    background-color: var(--acuity-high-color) !important;
}

.prognosis-tier-0 {
    background-color: var(--prognosis-tier-0-color) !important;
}

.prognosis-tier-1 {
    background-color: var(--prognosis-tier-1-color) !important;
}

.prognosis-tier-2 {
    background-color: var(--prognosis-tier-2-color) !important;
}

.prognosis-tier-3 {
    background-color: var(--prognosis-tier-3-color) !important;
}

.health-program-call-type-health-check-in {
    background-color: var(--health-program-call-type-health-check-in-color) !important;
}

.health-program-call-type-clinical-escalation-app {
    background-color: var(--health-program-call-type-clinical-escalation-app-color) !important;
}

.health-program-call-type-clinical-escalation-rn {
    background-color: var(--health-program-call-type-clinical-escalation-rn-color) !important;
}

.health-program-call-type-follow-up {
    background-color: var(--health-program-call-type-follow-up-color) !important;
}

.health-program-call-type-non-urgent-follow-up {
    background-color: var(--health-program-call-type-non-urgent-follow-up-color) !important;
}

.health-program-call-type-nurse-assistance {
    background-color: var(--health-program-call-type-nurse-assistance-color) !important;
}

.health-program-call-type-nurse-assistance-urgent {
    background-color: var(--health-program-call-type-nurse-assistance-urgent-color) !important;
}

.text-tier-0 {
    color: var(--prognosis-tier-0-color) !important;
}

.text-tier-1 {
    color: var(--prognosis-tier-1-color) !important;
}

.text-tier-2 {
    color: var(--prognosis-tier-2-color) !important;
}

.text-tier-3 {
    color: var(--prognosis-tier-3-color) !important;
}

.status-eligible {
    background-color: var(--status-eligible-color) !important;
}

.status-enrolled {
    background-color: var(--status-enrolled-color) !important;
}

.status-active {
    background-color: var(--status-active-color) !important;
}

.status-inactive {
    background-color: var(--status-eligible-color) !important;
}

.status-unenrolled {
    background-color: var(--status-unenrolled-color) !important;
}

.status-deceased {
    background-color: var(--status-deceased-color) !important;
}

.inprogress {
    background-color: var(--color-bright-blue) !important;
}

.cancelled {
    background-color: var(--color-red) !important;
}

.missed {
    background-color: #dfe6ef !important;
    color: black !important;
}

.status-hasdoc {
    background-color: var(--status-hasdoc-color) !important;
}

.status-hasnodoc {
    background-color: var(--status-hasnodoc-color) !important;
}

.enrollment-task-welcome-call {
    background-color: var(--enrollment-task-welcome-call-color) !important;
}

.enrollment-task-callback {
    background-color: var(--enrollment-task-callback-color) !important;
}

.enrollment-task-schedule {
    background-color: var(--enrollment-task-schedule-color) !important;
}

.enrollment-task-appointment {
    background-color: var(--enrollment-task-appointment-color) !important;
}

.enrollment-task-hold {
    background-color: var(--enrollment-task-hold-color) !important;
}

.enrollment-task-reschedule {
    background-color: var(--enrollment-task-reschedule-color) !important;
}

.enrollment-task-none {
    background-color: var(--enrollment-task-none-color) !important;
}

.e-btn.e-primary.e-link:hover, .e-btn.e-primary.e-link:active, .e-btn.e-primary.e-link:focus {
    background: none !important;
    box-shadow: none !important;
}

.pb-8 {
    padding-bottom: 5rem !important;
}

.blue-text {
    color: var(--blue-text);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.past-due-dot-indicator {
    height: 18px;
    width: 18px;
    background-color: #e8d4d4;
    border-radius: 50%;
    display: inline-block;
}

.due-soon-dot-indicator {
    height: 18px;
    width: 18px;
    background-color: #fff0bc;
    border-radius: 50%;
    display: inline-block;
}

.patient-comment-icon {
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer !important;
}
.cursor-not-allowed {
    cursor: not-allowed !important;
}

/* stylization to override the grey text when the input fields are disabled */
.e-input-group input.e-input,
.e-input-group.e-control-wrapper input.e-input,
.e-float-input input,
.e-float-input.e-control-wrapper input,
.e-input-group textarea.e-input,
.e-input-group.e-control-wrapper textarea.e-input,
.e-float-input textarea,
.e-float-input.e-control-wrapper textarea,
.e-input-group .e-input[disabled],
.e-input-group.e-control-wrapper .e-input[disabled],
.e-input-group.e-disabled input.e-input,
.e-input-group.e-control-wrapper.e-disabled input.e-input,
.e-input-group.e-disabled textarea.e-input,
.e-input-group.e-control-wrapper.e-disabled textarea.e-input {
    color: black !important;
    -webkit-text-fill-color: black;
}

/* Azure Maps */
.maplibregl-canvas.atlas-map-canvas {
    height: 100% !important;
    width: 100% !important;
}

.txt-sm-6 {
    font-size: 0.675em;
}

.decoration-auto {
    text-decoration: auto;
}

.ml-3 {
    margin-left: 1rem !important;
}

.ml-17 {
    margin-left: 17.5em !important
}

.width-fit-content {
    width: fit-content !important
}

.width-31em {
    width: 31em;
}

.pending-site-visit-description {
    margin-left: 10.6em !important
}

    .pending-site-visit-description .e-label {
        font-weight: 500 !important;
    }

.my-task-circle {
    width: 7em;
    height: 7em;
    content: "";
    margin: 0 auto;
}

.text-x-large {
    font-size: x-large
}

.address-text {
    max-width: 16em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.border-left-high {
    border-left: #f3485c solid 1em !important;
    border-top: #2b4b98 solid 1px !important;
    border-right: #2b4b98 solid 1px !important;
    border-bottom: #2b4b98 solid 1px !important;
    border-radius: 5px;
}

.border-left-low {
    border-left: #f3d148 solid 1em !important;
    border-top: #2b4b98 solid 1px !important;
    border-right: #2b4b98 solid 1px !important;
    border-bottom: #2b4b98 solid 1px !important;
    border-radius: 5px;
}

.border-left-medium {
    border-left: #f37b48 solid 1em !important;
    border-top: #2b4b98 solid 1px !important;
    border-right: #2b4b98 solid 1px !important;
    border-bottom: #2b4b98 solid 1px !important;
    border-radius: 5px;
}

.bg-tuesday-blue {
    color: #2b4b98 !important;
}

.badge-danger {
    background: #fddade !important;
    color: #f12038 !important;
    padding: 1em;
    font-style: italic;
}

.th-blue-text {
    color: #405a97 !important
}

.hidden {
    visibility: hidden !important;
}

.right-button {
    margin-left: auto !important;
}

.upload-file {
    text-decoration: none;
    font-size: 14px;
    color: #3f5996;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}

/* #region Badge */
.count-indicator {
    right: 0px;
    padding: 3px 5px;
    font-family: monospace;
    position: absolute;
}

.bg-primary {
    background-color: rgba(var(--color-sf-primary), var(--bs-bg-opacity)) !important;
}
/* #endregion*/
/* #region Grid Checkbox Icon*/
.e-checkbox-wrapper .e-frame,
.e-checkbox-wrapper .e-frame:hover {
    border-color: rgb(var(--color-sf-primary)) !important;
    color: #fff !important;
}

.e-checkbox-wrapper.e-checkbox-disabled .e-frame
.e-checkbox-wrapper.e-checkbox-disabled .e-frame:hover {
    border-color: #ccc !important;
}
/* #endregion*/

/* #region Message Dialog Box */
.e-dlg-container.e-dlg-danger .e-dlg-header {
    font-weight: 500;
    color: red;
}

.e-dlg-container.e-dlg-warning .e-dlg-header {
    font-weight: 500;
    color: yellow;
}

.e-dlg-container.e-dlg-info .e-dlg-header {
    font-weight: 500;
    color: rgb(var(--color-sf-primary));
}

.e-dlg-container.e-dlg-success .e-dlg-header {
    font-weight: 500;
    color: green;
}
/* #endregion*/

/* #region Common Dialog */
.e-dialog.common-modal .e-dlg-header-content,
.e-dialog.common-modal .e-dlg-header-content .e-dlg-header,
.e-dialog.common-modal .e-dlg-header-content .e-dlg-header .modal-header,
.e-dialog.common-modal .e-dlg-content,
.e-dialog.common-modal .e-footer-content {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Reset all paddings to 0 first */
.e-dialog.common-modal .e-dlg-header-content,
.e-dialog.common-modal .e-dlg-content,
.e-dialog.common-modal .e-footer-content {
    padding: 0 !important;
}

.e-dialog.common-modal .e-dlg-content {
    padding: 0px 24px !important
}

.e-dialog.common-modal .e-footer-content {
    padding: 0 24px 24px 24px !important;
}

.e-dialog.common-modal .e-dlg-header-content {
    padding: 24px 24px 16px 24px !important;
    display: flex;
    flex-direction: row-reverse;
}

    .e-dialog.common-modal .e-dlg-header-content .e-dlg-header {
        display: flex;
        width: 100%;
        flex-direction: row;
    }

        .e-dialog.common-modal .e-dlg-header-content .e-dlg-header .modal-header span,
        .e-dialog.common-modal .e-dlg-header-content .e-dlg-header .modal-header {
            font-weight: 600;
            font-size: 20px;
            padding: 0 !important;
        }

    .e-dialog.common-modal .e-dlg-header-content .e-dlg-closeicon-btn {
        display: none;
    }


.e-dialog.common-modal .e-footer-content > div {
    padding: 24px 40px 24px 40px;
}

    .e-dialog.common-modal .e-footer-content .e-btn {
        margin-left: 0px !important;
        align-self: stretch;
        border-radius: 2px;
    }

/* #endregion*/


.red-star {
    color: red;
}

.elevate-text-area {
    font-size: 14px !important;
    padding: 10px;
    border-radius: 5px;
}

.larger-text-area {
    min-height: 85px;
}

.text-white {
    color: #fff !important;
}

.e-danger.e-btn.e-link, button#delete-sympton-triage {
    background: red !important;
    color: white !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.pre-line {
    white-space: pre-line;
}

.red-trash {
    color: rgb(var(--bs-danger-rgb));
}

.required::after {
    content: " *";
    color: rgb(var(--bs-danger-rgb));
}

.form-label.section-title {
    font-size: 1.2em;
}

.form-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #232323;
}

.form-label.required {
    color: #232323!important;
}

.form-group-label {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #232323;
}

.e-grid .e-gridcontent.e-wrap .e-rowcell {
    word-wrap: normal !important;
}

.word-wrap {
    word-wrap: break-word;
}

/* #region e-outline form control class follow the existing field layout */
.validation-message {
    font-size: .9rem;
}

.e-outline {
    display: flex;
    align-items: center;
}

.e-outline.e-input-group .e-input-group-icon,
.e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    margin: 0px !important;
}

.validation-message,
.e-outline.invalid .e-float-text.e-label-top,
.e-outline.invalid .e-float-text.e-label-bottom,
.e-outline.error .e-float-text.e-label-top,
.e-outline.error .e-float-text.e-label-bottom {
    color: rgb(var(--bs-danger-rgb)) !important;
}

.e-outline .e-float-text.e-label-top,
.e-outline .e-float-text.e-label-bottom {
    color: var(--color-sf-on-surpace) !important;
}

.e-outline .e-float-text.e-label-top {
    font-weight: bold !important;
}

.e-outline.invalid,
.e-outline.error {
    border-color: var(--color-red) !important;
}

.e-outline.valid:focus,
.e-outline.valid:active,
.e-outline.valid:hover {
    border-color: var(--color-blue) !important;
}

.e-outline, .e-outline:hover,
.e-outline.e-input-group:not(.e-input-focus),
.e-outline.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
.e-outline.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
.e-outline.e-input-group.e-float-icon-left:not(.e-input-focus),
.e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-input-focus),
.e-outline.common-dropdown-menu.e-btn.e-dropdown-btn,
.e-outline.common-dropdown-menu.e-btn.e-lib {
    box-shadow: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--e-input-field-border) !important;
}

    .e-outline:focus, .e-outline:active, .e-outline.e-input-focus,
    .e-outline:valid, .e-outline.valid {
        border-color: var(--e-input-field-border);
        box-shadow: none !important;
    }

    .e-outline .e-float-text::after,
    .e-outline .e-float-text::before {
        display: none;
        border-radius: 0px !important;
        border: none !important;
    }

    .e-outline.e-float-input *:valid ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input *:focus ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input *:active ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input.valid * ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input.error * ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input.invalid * ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input textarea:focus ~ label.e-float-text,
    .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
    .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
        top: -20px !important;
        left: -10px !important;
        color: rgb(var(--color-sf-on-surface));
    }

    .e-outline::after {
        bottom: 0px !important;
        display: block !important;
        background: rgba(var(--color-sf-primary)) !important;
        height: 2px !important;
        transition: .2s cubic-bezier(0.4, 0, 0.4, 1);
        position: absolute;
        width: 0 !important;
    }

    .e-outline.invalid::after,
    .e-outline.error::after {
        background-color: var(--color-red) !important;
    }

    .e-outline[disabled]::after {
        display: none !important;
    }

    .e-outline.e-disabled {
        background-color:#f7f7f7!important;
    }
        .e-outline.e-disabled input::placeholder,
        .e-outline.e-disabled select::placeholder,
        .e-outline.e-disabled .e-dropdownlist::placeholder,
        .e-outline.e-disabled .e-input::placeholder,
        .e-outline.e-disabled .e-dropdownlist.e-input::placeholder {
            color: #AAAAAA !important;
        }

    .e-outline.e-input-focus::after {
        width: 100% !important;
    }

    .e-outline label.e-float-text, .e-tab-text {
        font-family: var(--primary-font) !important;
    }

    .e-outline.e-popup-open {
        overflow: hidden;
    }

.e-outline.e-ddl > input.e-dropdownlist {
    flex-grow:1!important;
    font-size:var(--bs-body-font-size);
}

    .e-outline.word-wrap .e-list-item {
        word-wrap: normal !important;
        white-space: normal !important;
        min-height: auto !important;
        height: auto !important;
        line-height: 15px !important;
        text-indent: 0px !important;
        padding: 8px !important;
        overflow: visible !important;
    }

    .e-outline > input {
        height:100%!important;
    }

    .e-outline.global-search-autocomplete:not(.e-input-focus) {
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .090) !important;
    }

    .e-outline.e-card > * {
        width: 100%;
    }
    .e-outline textarea[disabled="disabled"],
    .e-outline.e-disabled:has(input) {
        background-color: #F7F7F7 !important;
        border-radius: var(--bs-corner-radius) !important;
    }

textarea.e-outline {
    font-size: 14px !important;
    min-height: 85px !important;
}

.e-outline:has(textarea) {
    display: flex !important;
    align-items: start;
    padding: 0px !important;
    margin: 0px !important;
    width: 100%;
}

    .e-outline:has(textarea) textarea {
        margin: 0px !important;
        padding: .5rem !important;
    }

.e-outline.border-primary,
.e-outline.border-primary:hover,
.e-outline.border-primary.e-input-group:not(.e-input-focus),
.e-outline.border-primary.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
.e-outline.border-primary.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
.e-outline.border-primary.e-input-group.e-float-icon-left:not(.e-input-focus),
.e-outline.border-primary.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-input-focus),
.e-outline.border-primary.common-dropdown-menu.e-btn.e-dropdown-btn,
.e-outline.border-primary.common-dropdown-menu.e-btn.e-lib {
    border: 1px solid #405A97!important;
}

input.e-outline.e-input,
.e-outline.e-input-group input.e-input,
.e-outline.e-input-group input,
.e-outline.e-input-group.e-control-wrapper input.e-input,
.e-outline.e-input-group.e-control-wrapper input,
.e-outline.e-float-input input.e-input, .e-outline.e-float-input input,
.e-outline.e-float-input.e-control-wrapper input.e-input,
.e-outline.e-float-input.e-control-wrapper input,
.e-outline.e-input-group:not(.e-float-icon-left) input.e-input:focus,
.e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) input.e-input:focus,
.e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) input:focus,
.e-outline.e-float-input:not(.e-float-icon-left) input:focus,
.e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left).e-input-focus input,
.e-outline.e-float-input:not(.e-float-icon-left).e-input-focus input,
.e-outline.e-input-group:not(.e-float-icon-left).e-input-focus input.e-input,
.e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-input-focus input.e-input {
    padding: 9px 12px 10px 12px !important;
}
.e-outline.e-multiselect .e-multi-select-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
/* #endregion */
.e-grid .e-row.past-due {
    background-color: #e8d4d4 !important;
}

/* #region Patient Chip tags */
.e-chip-list .e-chip.TagCategory-Safety-Color { 
    background: #4EB57C14 !important;
    border: 1px solid #2F6F4C !important;
    color: #2F6F4C !important;
}

    .e-chip-list .e-chip.TagCategory-Safety-Color:hover {
        background: #4EB57C33 !important;
        border: 1px solid #2F6F4C !important;
        color: #2F6F4C !important;
    }

    .e-chip-list .e-chip.TagCategory-Safety-Color .e-chip-delete {
        color: #2F6F4C !important;
    }

        .e-chip-list .e-chip.TagCategory-Safety-Color .e-chip-delete:hover {
            color: #2F6F4C !important;
            background-color: rgba(47, 111, 76, 0.1) !important;
        }

.e-chip-list .e-chip.TagCategory-Clinical-Color {
    background: #F3485C14 !important;
    border: 1px solid #990A1B !important;
    color: #990A1B !important;
}

    .e-chip-list .e-chip.TagCategory-Clinical-Color:hover {
        background: #F3485C33 !important;
        border: 1px solid #990A1B !important;
        color: #990A1B !important;
    }

    .e-chip-list .e-chip.TagCategory-Clinical-Color .e-chip-delete {
        color: #990A1B !important;
    }

        .e-chip-list .e-chip.TagCategory-Clinical-Color .e-chip-delete:hover {
            color: #990A1B !important;
            background-color: rgba(153, 10, 27, 0.1) !important;
        }

.e-chip-list .e-chip.TagCategory-Operational-Color {
    background: #23A3B714 !important;
    border: 1px solid #1B7E8D !important;
    color: #1B7E8D !important;
}

    .e-chip-list .e-chip.TagCategory-Operational-Color:hover {
        background: #23A3B733 !important;
        border: 1px solid #1B7E8D !important;
        color: #1B7E8D !important;
    }

    .e-chip-list .e-chip.TagCategory-Operational-Color .e-chip-delete {
        color: #1B7E8D !important;
    }

        .e-chip-list .e-chip.TagCategory-Operational-Color .e-chip-delete:hover {
            color: #1B7E8D !important;
            background-color: rgba(27, 126, 141, 0.1) !important;
        }
/* #endregion*/

.col-header {
    color: #232323;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.col-description {
    color: #777;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.common-modal .btn.btn-outline-primary {
    border-radius: 8px;
    border: 1px solid var(--primary-500, #405A97) !important;
    display: flex;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    color: var(--primary-500, #405A97);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.common-modal .form-label {
    color: #232323;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: var(--Letter-Spacing, 0px);
}

.e-dialog .e-dlg-header {
    font-weight: bold !important;
}

.common-dropdown-menu.e-btn.e-dropdown-btn, .common-dropdown-menu.e-btn.e-lib {
    border-radius: 8px !important;
    gap: 10px;
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 12px;
    background: #FFFFFF !important;
    border: 1px solid #EEEEEE !important;
    box-shadow: none !important;
}

    .common-dropdown-menu.e-btn.e-dropdown-btn:hover,
    .common-dropdown-menu.e-btn.e-lib:hover {
        background: rgba(255,255,255,.7) !important;
    }

.common-dropdown-menu.e-btn .card-subtitle {
    font-weight: 400;
    font-size: 11px;
    line-height: .7;
    color: #777777;
}

.common-dropdown-menu.e-btn .banner-drop-down-list {
    border: 0px !important;
}

.common-dropdown-menu.e-dropdown-popup,
.common-dropdown-menu.e-dropdown-popup.e-dropdown-btn,
.common-dropdown-menu.e-dropdown-popup.e-outline {
    background: transparent !important;
    padding: 0px !important;
    border: 0px!important;
}

@media (max-width: 540px) {
    .common-dropdown-menu.e-dropdown-popup, .common-dropdown-menu.e-dropdown-popup.e-dropdown-btn {
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .common-dropdown-menu.e-dropdown-popup, .common-dropdown-menu.e-dropdown-popup.e-dropdown-btn {
        max-width: 500px;
    }
}

@media (min-width: 992px) {
    .common-dropdown-menu.e-dropdown-popup, .common-dropdown-menu.e-dropdown-popup.e-dropdown-btn {
        max-width: 700px;
    }

        .common-dropdown-menu.e-dropdown-popup.filter-size.e-dropdown-popup,
        .common-dropdown-menu.e-dropdown-popup.e-dropdown-btn.filter-size.e-dropdown-popup {
            max-width: 450px;
        }
}

.common-dropdown-menu.e-dropdown-popup > .e-card {
    background: #fff !important;
    padding: 5px 10px;
    box-shadow: 0 348px 97px 0 rgba(194, 194, 194, 0.00), 0 223px 89px 0 rgba(194, 194, 194, 0.01), 0 125px 75px 0 rgba(194, 194, 194, 0.05), 0 56px 56px 0 rgba(194, 194, 194, 0.09), 0 14px 31px 0 rgba(194, 194, 194, 0.10);
    border: 1px solid #F0F1F1 !important;
    border-radius: var(--bs-corner-radius) !important;
}

    .common-dropdown-menu.e-dropdown-popup > .e-card .e-card-header {
        font-weight: 600;
        font-size: 16px;
        display: flex;
    }

    .common-dropdown-menu.e-dropdown-popup > .e-card .e-card-actions {
        text-align: right;
    }

.e-chip-list.e-selection .e-chip {
    border: 1px solid #AAAAAA;
    border-radius: 100px;
    border-width: 1px;
    padding-top: 8px !important;
    padding-right: 14px;
    padding-bottom: 8px !important;
    padding-left: 14px;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: center;
}

hr {
    border: none;
    border-top: 1px solid #ccc !important;
    margin: 0px;
    margin-top: 1rem !important
}

@media (max-width: 540px) {
    .w-sm-100 {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .w-md-100 {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .w-lg-60 {
        width: 60%;
    }

    .w-lg-40 {
        width: 40%;
    }
}

.btn.btn-cancel, .btn.btn-cancel:active, .btn.btn-cancel:focus {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--grey-400, #7D7F86) !important;
    box-shadow: none !important;
}

    .btn.btn-cancel:hover {
        background: #F2F2F2 !important;
        border: 1px solid#F2F2F2 !important;
    }

button {
    padding-top: 10px !important;
    padding-right: 14px !important;
    padding-bottom: 10px !important;
    padding-left: 14px !important;
}

.e-calendar .e-header button span, .e-bigger.e-small .e-calendar .e-header button span {
    padding: 0px;
}

.e-calendar .e-header .e-icon-container .e-prev,
.e-calendar .e-header .e-icon-container .e-next,
.e-bigger.e-small .e-calendar .e-header .e-icon-container .e-prev,
.e-bigger.e-small .e-calendar .e-header .e-icon-container .e-next {
    padding: 10px 4px !important;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    height: auto;
    width: auto;
    color: #B4B4B4 !important;
    box-shadow: none !important;
    margin-right: -8px;
    padding: 0 !important;
}

    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover,
    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus,
    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active {
        background-color: transparent !important;
        color: #fff !important;
        box-shadow: none !important;
    }

.table > :not(:last-child) > :last-child > * {
    border-bottom-color: inherit;
    background: #F9F9F9;
}

h4 {
    font-weight: 600;
    font-size: 24px;
    color: #232323;
    margin: 0px;
}

.btn.btn-link.modal-btn-close, .modal-btn-close:focus, .modal-btn-close:active, .modal-btn-close i {
    color: #B4B4B4 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 0px !important;
    outline: none !important;
    box-shadow: none !important;
    min-height: auto !important;
}

    .btn.btn-link.modal-btn-close:hover, .btn.btn-link.modal-btn-close:hover i {
        color: #858585 !important;
        background-color:transparent!important;
    }

    .modal-btn-close span.e-icon-left {
        width: auto !important;
        margin: 0 .5rem 0 0 !important;
        padding: 0 !important;
        font-size: 14px!important;
    }

.e-btn.e-primary:disabled, .e-btn.e-primary.e-disabled, .e-css.e-btn.e-primary:disabled, .e-css.e-btn.e-primary.e-disabled {
    background: rgba(var(--color-sf-secondary), 0.12) !important;
    border-color: rgba(var(--color-sf-secondary), 0) !important;
    box-shadow: none !important;
    color: rgba(var(--color-sf-on-surface), 0.38) !important;
}

.chart-container .e-accumulationchart {
    width: 100%;
    min-width: 100% !important;
}

/* #region Dashboard */
.dashboard-section .card:not(.card-secondary) {
    border-radius: var(--bs-corner-radius) !important;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #fff !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .010) !important;
}

    .dashboard-section .card:not(.card-secondary):hover {
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .09) !important;
    }

.dashboard-section h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    margin: 0px;
}

    .dashboard-section h2 i {
        font-size: 1.1rem;
        cursor: pointer;
    }

        .dashboard-section h2 i:hover {
            color: rgba(170, 170, 170, 1);
        }

.dashboard-section h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin: 0px;
    letter-spacing: 0px;
}

    .dashboard-section h3 i {
        font-size: 15px;
        cursor: pointer;
    }

.dashboard-section h4 {
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
}

.dashboard-section h5, .dashboard-section .form-label {
    margin: 0px;
}

.dashboard-section .card > .card-body {
    padding: 0px;
}

    .dashboard-section .card > .card-body .total-count {
        font-weight: 700;
        font-size: 32px;
        line-height: 32px;
    }

.dashboard-right-column {
    max-width: 350px;
    background:#fff;
    overflow-y:auto!important;
}

    .dashboard-right-column .dashboard-section:not(:first-child) {
        margin-top: 0px;
    }

    .dashboard-right-column > .card:not(.card-secondary) {
        border-bottom: 1px solid rgba(241, 241, 241, 1) !important;
        border-radius: 0px !important;
        padding: 24px 27px;
    }

        .dashboard-right-column > .card:not(.card-secondary):last-child {
            border-bottom: none !important;
        }

    .dashboard-right-column .card:not(.card-secondary):hover {
        box-shadow: none !important;
    }

    .dashboard-right-column .card:not(.card-secondary) .title {
        margin-block: 1rem;
    }

    .dashboard-right-column .my-schedule-cards {
        padding: 0px !important;
        min-height: 0;
    }

        .dashboard-right-column .my-schedule-cards > .card-title {
            padding: 24px 27px 0px 27px;
        }

        .dashboard-right-column .my-schedule-cards > .card-body {
            padding: 0px !important;
        }

            .dashboard-right-column .my-schedule-cards > .card-body:not(.appointment-cards) {
                padding: 0px 27px !important;
            }

        .dashboard-right-column .my-schedule-cards > .appointment-cards > .card {
            padding: 0 !important;
            margin: .5rem 27px;
            background: rgba(248, 249, 252, 1) !important;
        }

            .dashboard-right-column .my-schedule-cards > .appointment-cards > .card > .card-body {
                padding: .8rem 1.5rem !important;
            }

            .dashboard-right-column .my-schedule-cards > .appointment-cards > .card:not(.card-secondary):hover {
                background: rgba(237, 240, 247, 1) !important;
            }

            .dashboard-right-column .my-schedule-cards > .appointment-cards > .card > .card-body .card-title {
                font-size: 14px;
                font-weight: 600;
            }

            .dashboard-right-column .my-schedule-cards > .appointment-cards > .card > .card-body .modality-icon {
                background-color: rgba(226, 231, 243, 1);
                color: rgba(64, 90, 151, 1);
                height: 39px;
                width: 39px;
            }

            .dashboard-right-column .my-schedule-cards > .appointment-cards > .card.drive-time-card,
            .dashboard-right-column .my-schedule-cards > .appointment-cards > .card.drive-time-card:hover {
                background: rgba(242, 242, 242, 1) !important;
            }

                .dashboard-right-column .my-schedule-cards > .appointment-cards > .card.drive-time-card .modality-icon {
                    background-color: rgba(230, 230, 230, 1);
                    color: rgba(35, 35, 35, 1);
                }
/* #endregion */

/* #region Dashboard Card Secondary */
.card.card-secondary {
    background-color: rgb(var(--bs-light-rgb)) !important;
    padding: 1rem !important;
    border: 1px solid rgb(var(--bs-light-rgb)) !important;
    font-weight: 400;
    font-size: 14px;
}

    .card.card-secondary .card-body {
        padding: 0 !important;
    }

    .card.card-secondary:hover {
        background-color: #F1F1F1 !important;
        border: 1px solid #F1F1F1 !important;
    }

        .card.card-secondary .card-title,
        .card.card-secondary:hover .card-title {
            font-size: 14px !important;
        }

            .card.card-secondary .card-title i,
            .card.card-secondary:hover .card-title i {
                font-size: 10px !important;
            }
/* #endregion */

a.no-style, a.no-style:visited, a.no-style:active {
    text-transform: none;
    text-decoration: none;
    color: inherit;
}

.text-yellow {
    color: rgba(243, 209, 72, 1);
}

.text-orange {
    color: rgba(243, 123, 72, 1);
}

.text-dark {
    color: #232323!important;
}

.bg-orange {
    background-color: rgba(243, 123, 72, 1);
}

.bg-secondary-subtle {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

.floating-update-button {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem 1.5rem;
    z-index: 1111;
    height: 74px;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.e-tip-content {
    padding: .5rem 1rem !important;
}

.e-tooltip-wrap {
    border-radius: var(--bs-corner-radius) !important;
}

.bg-light-green {
    background: rgba(226, 243, 234, 1);
    color: rgba(78, 181, 124, 1);
    font-size: 14px;
}

.bg-light-teal {
    background: rgba(221, 247, 248, 1);
    color: rgba(35, 174, 183, 1);
    font-size: 14px;
}

.bg-light-red {
    background: rgba(252, 217, 221, 1);
    color: rgba(243, 72, 92, 1);
    font-size: 14px;
}

.bg-light-f9 {
    background: #f9f9f9 !important;
}

.color-red {
    color: var(--color-red) !important;
}

.color-gray-dark {
    color: var( --gray-color) !important;
}


@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s infinite ease-in-out;
}

.elevate-sidebar-slide {
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    background-color: white;
    padding: 24px;
    position: relative;
    font-family: "Inter", sans-serif;
    display: flex;
    flex-flow: column nowrap;
}

/* #region Comment*/
.comment-container {
    position: relative;
}

.comment > textarea,
.comment > textarea:active,
.comment > textarea:focus {
    resize: none !important;
    height: 104px !important;
    padding-bottom: 2.5rem; /* Add space for the button inside */
}

.comment-floating-submit {
    position: absolute;
    bottom: 8px;
    right: 23px;
    margin-right: -5px;
    margin-top: 80px;
    border-width: 1px;
    padding: 4px 10px;
    font-size: 12px !important;
}
/* #endregion */

/* #region Common Dialog Sidebar */
.common-sidebar.e-dialog {
    background: var(--bs-body-bg) !important;
    max-height: 100% !important;
    position: relative;
}

    .common-sidebar.e-dialog .sidebar-container,
    .common-sidebar.e-dialog,
    .common-sidebar.e-dialog .e-dlg-content {
        box-shadow: none !important;
        height: 100% !important;
        min-height: 0;
    }

        .common-sidebar.e-dialog .sidebar-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            margin: 0px !important;
            border-left: 1px solid rgba(0,0,0,.02);
        }

            .common-sidebar.e-dialog .e-dlg-content,
            .common-sidebar.e-dialog .sidebar-container .sidebar-header,
            .common-sidebar.e-dialog .sidebar-container .sidebar-body,
            .common-sidebar.e-dialog .sidebar-container .sidebar-footer {
                padding: 0px !important;
                margin: 0px !important;
                border: none !important;
                border-radius: 0px !important;
            }

            .common-sidebar.e-dialog .sidebar-container .sidebar-header {
                display: flex;
                width: 100%;
                flex-direction: row;
                padding: 1.5rem !important;
                border-bottom: 1px solid rgba(0,0,0,.02) !important;
                max-height: 62px;
            }

                .common-sidebar.e-dialog .sidebar-container .sidebar-header .sidebar-title {
                    font-weight: 600;
                    font-size: 20px;
                }

                .common-sidebar.e-dialog .sidebar-container .sidebar-header .e-dlg-closeicon-btn {
                    display: none;
                }

            .common-sidebar.e-dialog .sidebar-container .sidebar-body.fixed-body {
                min-height: 0px;
                display: flex;
                flex-direction: column;
                flex-grow: 1 !important;
            }

                .common-sidebar.e-dialog .sidebar-container .sidebar-body.fixed-body > * {
                    padding-left: 1.5rem !important;
                    padding-right: 1.5rem !important;
                    padding-top: .5rem !important;
                    padding-bottom: .5rem !important;
                }

                    .common-sidebar.e-dialog .sidebar-container .sidebar-body.fixed-body > *:has(.progress-bar-container) {
                        padding-top: 0 !important;
                        padding-bottom: .5rem !important;
                    }

                    .common-sidebar.e-dialog .sidebar-container .sidebar-body.fixed-body > *:first-child {
                        padding-top: 1.5rem !important;
                    }

                    .common-sidebar.e-dialog .sidebar-container .sidebar-body.fixed-body > *:last-child {
                        padding-bottom: 1.5rem !important;
                    }

                .common-sidebar.e-dialog .sidebar-container .sidebar-body.fixed-body .overflow-y-auto {
                    flex-grow: 1;
                    overflow-y: auto;
                    overflow-x: hidden !important;
                }

            .common-sidebar.e-dialog .sidebar-container .sidebar-body.overflow-y-auto {
                padding: 1.5rem !important;
                flex-grow: 1;
                overflow-y: auto;
                overflow-x: hidden!important;
            }

            .common-sidebar.e-dialog .sidebar-container .sidebar-footer {
                padding: 1.5rem !important;
                border-top: 1px solid rgba(0,0,0,.02) !important;
            }

.common-sidebar.e-dialog .sidebar-container .sidebar-footer .e-btn.e-link {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    color: rgba(var(--color-sf-info));
}

        .common-sidebar.e-dialog h2 {
            font-weight: 500;
            font-size: 20px;
            line-height: 30px;
            margin: 0px;
        }

        .common-sidebar.e-dialog p {
            margin: 0px;
            font-weight: 400;
            line-height: 18px;
            letter-spacing: 0px;
            color: rgba(35, 35, 35, 1);
        }

.common-sidebar .e-tab > .e-content {
    padding: 0px !important;
    margin: 0px !important;
}

.common-sidebar.e-dialog .loading-overlay {
    position:absolute;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
}

.e-dialog h5 {
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    margin: 0px!important;
}
/* #endregion */

/* #region Page Layout */
.page-container .page-navigation,
.page-container .page-toolbar,
.page-container .page-filter,
.page-container .page-footer,
.page-container .page-content,
.page-container .page-legend {
    padding: 12px 10px;
}

.page-container .page-navigation {
    border-bottom: 1px solid #eee;
}

.page-container .page-toolbar,
.page-container .page-navigation,
.page-container .page-legend {
    --bs-gutter-x: .75rem !important;
}

.page-container .page-toolbar > * {
    display: flex;
    align-items: center;
}

.page-container .page-toolbar .e-tab-wrap {
    padding: 0px !important;
}

.page-container .page-toolbar .e-toolbar-item:hover {
    background: #fff !important;
}

.page-container .page-toolbar .e-text-wrap {
    padding: 0px 14px !important;
    border-bottom: 2px solid rgba(233, 233, 233, 1);
    transition: background-color 0.5s ease-in-out !important;
}

    .page-container .page-toolbar .e-text-wrap:hover {
        background: rgba(var(--bs-light-rgb),1);
    }

.page-container .page-toolbar .e-active .e-text-wrap {
    padding: 0px 14px !important;
    border-bottom: 4px solid rgba(64, 90, 151, 1) !important;
}

    .page-container .page-toolbar .e-active .e-text-wrap:hover {
        padding: 0px 14px !important;
        border-bottom: 4px solid rgba(64, 90, 151, 1) !important;
    }

.page-container .page-toolbar .e-text-wrap:before {
    display: none !important;
}

.page-container .page-toolbar > div > * {
    display: flex;
    align-items: center;
    height: 40px!important;
}
    .page-container .page-navigation > div > .e-btn,
    .page-container .page-toolbar > div > *,
    .page-container .page-toolbar > div .drop-down-menu-filter-container,
    .page-container .page-toolbar > div .drop-down-menu-filter-container .filter-button {
        height: 42px !important;
    }

.page-container .page-legend {
    border: 0px;
    padding-bottom: 0px !important;
}

.page-container .page-legend > div {
    display: flex;
    align-items: center;
}

/* > * with display:flex style makes the style visible, needs to display it to non*/
.page-container .page-toolbar > div style {
    display: none;
}

.page-container .page-toolbar .e-outline {
    background: rgba(249, 249, 249, 1) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

    .page-container .page-toolbar .e-outline .e-input-group-icon,
    .page-container .page-toolbar .e-outline .e-btn-icon,
    .page-container .page-toolbar .e-btn.e-outline {
        color: rgba(125, 127, 134, 1) !important;
    }

.page-container .page-toolbar .e-outline:hover {
    background: #fff !important;
}

    .page-container .page-toolbar .e-outline *,
    .page-container .page-toolbar .e-outline:hover * {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

.page-container .page-toolbar .e-tab .e-content {
    display: none;
}

.page-container .page-filter {
    padding: .5rem 10px;
}

.page-container .page-previous-button {
    display: flex;
    align-items: center;
}

.page-content .e-grid .e-checkbox-wrapper .e-frame.e-check,
.page-content .e-grid .e-css.e-checkbox-wrapper .e-frame.e-check {
    color: #fff !important;
}

.page-content .e-grid .e-headercell .e-headercelldiv:has(.e-checkbox-wrapper) {
    padding-left: 3px !important;
}

.page-content .e-grid tr:has(.alert-row) {
    background: rgba(var(--bs-danger-rgb), .1) !important;
}

.page-container .e-outline:hover .e-multi-select-wrapper .e-chips,
.page-container .e-outline .e-multi-select-wrapper .e-chips {
    border: 1px solid rgba(var(--color-sf-outline)) !important;
}

/* Style for Chip Text */
.page-container .page-legend .e-chip-list .e-chip {
    background: #E2E7F3 !important;
    background: linear-gradient(0deg, #E2E7F3, #E2E7F3) !important;
    border: 1px solid #C1CBEC !important;
    border-image: none !important;
    border-radius: 100px !important;
    padding: 4px 12px !important;
    overflow: visible !important;
}

    .page-container .page-legend .e-chip-list .e-chip:hover {
        background: #DFE5F1 !important;
        background: linear-gradient(0deg, #DFE5F1, #DFE5F1) !important;
    }

    .page-container .page-legend .e-chip-list .e-chip .e-chip-text,
    .page-container .page-legend .e-chip-list .e-chip .e-chip-delete.e-dlt-btn {
        font-weight: 400 !important;
        font-size: 12px !important;
        line-height: 18px !important;
        color: #405A97;
    }

    .page-container .page-legend .e-chip-list .e-chip-delete.e-dlt-btn:hover,
    .page-container .page-legend .e-chip-list .e-chip:hover .e-chip-text {
        color: rgba(32, 45, 76, 1) !important;
    }
/* #endregion */

/* #region Elevate Selection Option Chips*/
.selection-chips.e-chip-list .e-chip {
    border-radius: 100px!important;
    padding: 4px 14px !important;
    border: 1px solid #aaa !important;
    background: #fff !important;
    margin: 0px !important;
    margin-right: .5rem !important;
    margin-bottom: .5rem !important;
}

    .selection-chips.e-chip-list .e-chip:hover {
        background-color: #F3F4F4!important;
    }

    .selection-chips.e-chip-list .e-chip.e-active,
    .selection-chips.e-chip-list .e-chip.e-focused {
        padding: 4px 14px !important;
        border: 1px solid #1C8292 !important;
        background: #1C8292 !important;
    }

    .selection-chips.e-chip-list .e-chip .e-chip-text {
        font-weight: 400 !important;
        font-size: 12px !important;
        line-height: 12px !important;
        padding: 0px 0px !important;
        margin: 0px 0px !important;
        color: #232323 !important;
    }

    .selection-chips.e-chip-list .e-chip.e-active .e-chip-text,
    .selection-chips.e-chip-list .e-chip.e-focused .e-chip-text {
        font-size: 12px !important;
        color: #fff !important;
        padding: 0px 0px !important;
        margin: 0px 0px !important;
    }
/* #endregion*/

/* #region Scroolbar*/
/* Scrollbar Track */
::-webkit-scrollbar {
    width: 5px; /* Vertical scrollbar width */
}

/* Scrollbar Thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    background-color: #ddd !important; /* Scrollbar color */
    border-radius: 10px;
}

    /* Scrollbar Thumb on Hover */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

/* Scrollbar Track Background */
::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.bg-yellow {
    background: var(--color-yellow) !important;
}
/* #endregion*/

/* #region Global Search*/
.global-search-wrapper {
    max-width: 600px;
    width: inherit;
}

@media (max-width: 768px) {

    .global-search-wrapper {
        max-width: 100%;
        width: 100%;
    }
}

.global-search-autocomplete {
    width: 100%;
}

    .global-search-autocomplete.e-outline,
    .global-search-autocomplete.e-outline:hover,
    .global-search-autocomplete.e-outline.e-input-group:not(.e-input-focus),
    .global-search-autocomplete.e-outline.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
    .global-search-autocomplete.e-outline.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
    .global-search-autocomplete.e-outline > input {
        width: 100%;
        border-radius: 50px !important;
        background: #F9F9F9!important;
    }

        .global-search-autocomplete.e-outline > input, 
        .global-search-autocomplete.e-outline > input::placeholder {
            text-indent: 20px !important;
        }

            .global-search-autocomplete.e-outline > input.e-input::placeholder {
                color: #777777!important;
            }

            .global-search-autocomplete.e-outline.e-popup-open {
                border-radius: var(--bs-corner-radius) !important;
                overflow: hidden !important;
                border: 1px solid #F0F1F1 !important;
                box-shadow: 0px 19px 19px 0px rgba(194, 194, 194, 0.01);
            }

    .global-search-autocomplete.e-popup-open > * {
        border: none !important;
        padding: 8px;
    }

    .global-search-autocomplete.e-popup-open .row {
        padding: 1rem;
    }

    .global-search-autocomplete .e-ddl-header, .global-search-autocomplete .e-ddl-header * {
        padding-top: 8px;
        background: #fff;
        border: none !important;
    }

    .global-search-autocomplete .e-dropdownbase .e-list-item {
        user-select: none !important;
        padding: 0px !important;
        margin: 0px !important;
        line-height: 25px;
        text-indent: 0px !important;
        font-size: 1rem !important;
        border-bottom: 1px solid #f1f1f1 !important;
    }

    .global-search-autocomplete .e-clear-icon {
        right: .5rem !important;
        color: rgba(180, 180, 180, 1) !important;
        font-weight: bold;
    }

    .global-search-autocomplete .search-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        font-size: 14px;
        z-index: 10;
        pointer-events: none;
    }

.global-search-container .autocomplete-icon-container {
    position: relative;
}

    .global-search-container .autocomplete-icon-container .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        pointer-events: none;
    }

.global-search-autocomplete input.e-input {
    padding-left: 2rem; /* Make room for the icon */
}
/* #endregion*/

.custom-input {
    height: 40px;
    border: 1px solid #CBCBCB !important;
    border-radius: 8px !important;
}

.h-40{
    height:40px;
}

/* #region Fields with Dropdown Icon*/
.dropdown-with-icon {
    position: relative;
    display: block;
}

    .dropdown-with-icon .prefix-icon {
        position: absolute;
        top: 50%;
        left: 13px;
        transform: translateY(-50%);
        color: gray !important;
        z-index: 1005;
    }

    .dropdown-with-icon .e-date-icon:before {
        content: "\e70d" !important;
        font-family: "e-icons", sans-serif !important;
    }

    .dropdown-with-icon .e-date-icon.e-active::before {
        transform: rotate(180deg);
        transition: transform 300ms ease;
    }

    .dropdown-with-icon input.e-input,
    .dropdown-with-icon input.e-outline.e-input,
    .dropdown-with-icon .e-outline.e-input-group input.e-input,
    .dropdown-with-icon .e-outline.e-input-group input,
    .dropdown-with-icon .e-outline.e-input-group:not(.e-float-icon-left).e-input-focus input.e-input, 
    .dropdown-with-icon .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-input-focus input.e-input{
        padding: 9px 12px 10px 35px !important;
    }

    .dropdown-with-icon .e-multi-select-wrapper {
        padding-left: 25px !important;
    }
        .dropdown-with-icon .e-multi-select-wrapper input.e-multiselect {
            padding: 9px 12px 10px 12px !important
        }
/* #endregion*/

/* #region For component top instruction alert message*/
.alert-primary, .alert-info {
    color: #283963;
    background-color: #EEF0F7;
    border-color: #C1CBEC;
    font-weight: 500!important;
}
/* #endregion*/

/* #region For Call Notes Group Header*/
.weekly-divider-container {
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

    .weekly-divider-container .line {
        flex-grow: 1;
        height: 1px;
        background-color: var(--blue-text) !important;
        padding-right: 10px;
    }

    .weekly-divider-container .pill {
        margin: 0 10px;
        padding: 5px 10px;
        background-color: #F1F1F1;
        color: var(--blue-text);
        border-radius: 20px;
        font-size: 12px;
        text-align: center;
    }
/* #endregion*/

.progress-bar-container {
    margin-left:-10px;
}

.fs-7 {
    font-size:12px!important;
}

/* #region .btn Button Class Style, Primary Outline Disable*/
.btn {
    margin-left: 0px !important;
    box-shadow: none !important;
    font-family: "Open Sans", sans-serif;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px;
    text-align: center;
    transition: background-color 500ms linear;
}
    .btn:has(.fa) > .fa {
        margin-right: 5px!important;
    }

    .btn.btn-primary {
        background: #405A97;
        color:#fff!important;
        border: 1px solid #405A97 !important;
    }
        .btn.btn-primary:hover {
            background: #5371B6 !important;
            border: 1px solid #5371B6 !important;
            color: #fff !important;
        }
        .btn.btn-primary[disabled] {
            background: #EEEEEE !important;
            border: 1px solid #EEEEEE !important;
            color: #BBBBBB !important;
        }

    .btn.btn-outline-primary {
        background-color: #fff !important;
        border: 1px solid #405A97 !important;
        color: #405A97 !important;
    }
        .btn.btn-outline-primary:hover {
            background-color: #EEF0FA !important;
        }
        .btn.btn-outline-primary[disabled] {
            background: #EEEEEE !important;
            border: 1px solid #DDDDDD !important;
            color: #BBBBBB !important;
        }

.e-btn.btn.btn-ellipsis {
    background: transparent !important;
    border-color: transparent !important;
    color: #AAAAAA !important;
    margin: 0px !important;
    padding: 0px !important;
}
    .e-btn.btn.btn-ellipsis .e-btn-icon {
        margin: 0px;
        padding: 0px;
        width: 2.5em;
    }
    .e-btn.btn.btn-ellipsis .e-btn-icon:before {
        font-size:1rem;
    }
    .e-btn.btn.btn-ellipsis:hover {
        background: #F5F5F5 !important;
        border-radius: 50px !important;
    }
    .e-btn.btn.btn-ellipsis[disabled] {
        color: #BBBBBB !important;
    }
    .e-btn.btn.btn-ellipsis .e-caret {
        display: none;
    }

.btn.btn-ellipsis.e-dropdown-popup.e-popup-open {
    border: 1px solid rgba(0,0,0,.04);
    margin: 0px !important;
    padding: 0px !important;
}
    .btn.btn-ellipsis.e-dropdown-popup.e-popup-open ul {
        box-shadow: 0 2px 6px 2px rgba(0,0,0,.05), 0 1px 2px 0 rgba(0,0,0,.05) !important
    }
    .btn.btn-ellipsis.e-dropdown-popup.e-popup-open .dropdown-item {
        padding: 10px 15px 10px 10px;
        display: flex !important;
        align-items: center !important;
        color: #232323
    }
        .btn.btn-ellipsis.e-dropdown-popup.e-popup-open .dropdown-item span.e-btn-icon {
            max-width: 45px;
            margin-left: 5px;
            margin-right: 15px;
            color: #AAAAAA;
        }

.e-btn.btn.btn-icon {
    background: transparent !important;
    border-color: transparent !important;
    color: #405A97;
    margin: 0px !important;
    padding: 0px !important;
}
    .e-btn.btn.btn-icon .e-btn-icon {
        color: #405A97;
        margin: 0px;
        padding: 0px;
        width: 2.8em;
    }
    .e-btn.btn.btn-icon.text-secondary .e-btn-icon {
        color: rgba(var(--bs-secondary-rgb), 1) !important;
    }
    .e-btn.btn.btn-icon:hover {
        color: #5371B6;
        background: #F5F5F5 !important;
        border-radius: 50px !important;
    }
    .e-btn.btn.btn-icon[disabled] {
        color: #BBBBBB !important;
    }

.e-btn.btn.btn-flat {
    background: transparent !important;
    border-color: transparent !important;
    color: #AAAAAA;
    margin: 0px !important;
    padding: 0px !important;
}
    .e-btn.btn.btn-flat .e-btn-icon {
        margin: 0px;
        padding: 0px;
    }
    .e-btn.btn.btn-flat:hover {
        background: #F5F5F5 !important;
        border-radius: 50px !important;
    }
    .e-btn.btn.btn-flat[disabled] {
        color: #BBBBBB !important;
    }

.btn.btn-link {
    background: transparent !important;
    border-color: transparent !important;
    color: #0071c1;
}
    .btn.btn-link .e-btn-icon {
        color: #0071c1;
    }
    .btn.btn-link:hover {
        color: #5371B6;
        background: #F5F5F5 !important;
        border-color: transparent !important;
    }
    .btn.btn-link[disabled] {
        color: #BBBBBB !important;
    }

.btn.btn-danger {
    background: rgb(var(--bs-danger-rgb));
    color: #fff;
    border: 1px solid rgb(var(--bs-danger-rgb)) !important;
}
    .btn.btn-danger:hover {
        color: #fff;
        background: rgb(var(--bs-danger-rgb)) !important;
    }
    .btn.btn-danger[disabled] {
        background: #EEEEEE !important;
        border: 1px solid #EEEEEE !important;
        color: #BBBBBB !important;
    }
/* #endregion*/

/* For Step 1: Call card */
.card.card-start-call {
    background: #f9f9f9;
    border-color:transparent!important;
}
    .card.card-start-call.active {
        background: #fff;
        border: 1px solid #405A97 !important;
    }
.card.card-start-call .card-body {
    padding: .5rem 1rem !important;
}
    .card.card-start-call .card-body .e-outline.border-primary > input {
        min-height: 0px !important;
    }

/* For Border with blue brder color */
.border-primary {
    border-color: #405A97!important;
}

/* For Multiple Tooltip: ensure multiple tooltips don't affect layout spacing*/
.sf-tooltip-container {
    display: none;
}

/* #region Shared status indicator class for BannerPrognosisCard, and BannerAcuityCard */
.status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
    flex-shrink: 0;
}
/* #endregion*/

/* #region Shared status tile border class for banner cards */
.status-tile-border {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    background-color: white;    
    padding-top: 0.175rem !important;
    padding-bottom: 0.175rem !important;
}

.status-tile-border.compact-height {
    height: 62px;
    padding: 0px !important;
    padding-left: 15px !important;
}
/* #endregion*/

.icon-status-horizontal {
    display:inline;
    width: 32px;
    height: 16px;
    border-radius: 100px;
    background: #4EB57C;
}

.text-info {
    color: #80B3D9!important;
}

/*#region TimeLine/History*/
.timeline {
    position: relative;
    border-left: 2px dashed #ccc;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
}

.timeline-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    border: 2px solid #aaa;
    position: absolute;
    left: -8px;
    top: 4px;
}

    .timeline-marker.bg-dark {
        background: #000 !important;
        border-color: #000 !important;
    }

.timeline-content {
    padding-left: 20px;
}
/*#endregion*/

/* ************** button pills ************** */
/* Hide icon check on sfchip button */
.selection-chips .e-chip.e-active:not(.e-chip-icon-wrap):not(.e-chip-avatar-wrap)::before {
    display: none !important;
    font-size: 12px !important;
    font-weight: normal !important;
}

/* Active state styling */
.selection-chips .e-chip.e-active {
    background-color: #1C8292 !important;
    border-color: #1C8292 !important;
    color: #ffffff !important;
}
    /* Active Hover/Focus/Pressed states */
    .selection-chips .e-chip.e-active:hover,
    .selection-chips .e-chip.e-active:focus,
    .selection-chips .e-chip.e-active:active {
        background-color: #1C8292 !important;
        border-color: #1C8292 !important;
        color: #ffffff !important;
    }
        .selection-chips .e-chip.e-active:hover .e-chip-text,
        .selection-chips .e-chip.e-active:focus .e-chip-text,
        .selection-chips .e-chip.e-active:active .e-chip-text {
            color: #ffffff !important;
        }
/* Optional: Add consistent padding + pill shape (button feel) */
.selection-chips .e-chip {
    padding: 6px 14px !important;
    border-radius: 16px !important;
}

.icon-status-horizontal {
    display: inline;
    width: 32px;
    height: 16px;
    border-radius: 100px;
    background: #4EB57C;
}
}

.text-black{
    color: #232323;
}