/* Bootstrap 5 defaults to 16px; set to 14px so Bootstrap 5 Cosmo's 0.9375rem base resolves to ~13px.
   Matches MultiTenant - without this, every rem-based size (fs-*, h1-h6, paddings, gutters) is ~14% larger. */
html {
    font-size: 14px;
}

/* Bootstrap 5 default gutter is 1.5rem (21px at 14px root); override to match Bootstrap 3's 30px (MultiTenant). */
.row {
    --bs-gutter-x: 30px;
}

/* Bootstrap 3 had max-width: 100% on .table - Bootstrap 5 removed it, causing tables to overflow containers.
   !important because Bootstrap 5's table layout inside flex containers ignores max-width otherwise (MultiTenant). */
.table {
    max-width: 100% !important;
}

:root {
    --lightGrey: #efefef;
    --darkyellow: #FECD58;
    --primaryBlues: #0D1D78;
    --primary-blue-table: #103CD7;
    --forestGreen: #228B22;
    --crimson: #DC143C;
    --deepBlue: #3255a4;
    --lighBlue: #17a2b8;
    --vibrantblue: #214FEE;
    --white: #FFFFFF;
    --black: #000000;
    --primary-gray: #6C757D;
    --dark-gray: #333333;
    --light-gray: #F8F9FA;
    --primary-blue: #214FEE;
    --secondary-blue: #1A3FCC;
    --dark-blue: #172B91;
    --light-blue: #4A7DFF;
    --light-blue-soft: #e7f0f7;
    --primary-green: #28A745;
    --dark-green: #1E7E34;
    --light-green: #5CC67A;
    --primary-red: #DC3545;
    --dark-red: #A71D2A;
    --light-red: #F28B8B;
    --primary-yellow: #FFC107;
    --dark-yellow: #D39E00;
    --light-yellow: #FFE083;
    --alert-red: #D92828;
    --medium-gray: #999999;
    --purple: #9954bb;
    --space-5: 5px;
    --space-10: 10px;
    --space-15: 15px;
    --space-20: 20px;
    --space-25: 25px;
    --space-30: 30px;
    --space-35: 35px;
    --space-50: 50px;
    --space-100: 100px;
    --space-150: 150px;
    --space-200: 200px;
    --space-300: 300px;
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-variation-settings: "wdth";
    --page-width: 980px;
}

body, * {
    font-family: "Roboto", serif !important;
}

.fa, .fas, .far, .fal, .fad, .fa-classic, .fa-solid, .fa-regular, .fa-light, .fat, .fa-thin {
    font-family: 'Font Awesome 6 Pro' !important;
}

.fab,
.fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
}

.fad,
.fa-classic.fa-duotone,
.fa-duotone {
    font-family: 'Font Awesome 6 Duotone' !important;
}

.fass,
.fasr,
.fasl,
.fast,
.fa-sharp {
    font-family: 'Font Awesome 6 Sharp' !important;
}

.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

.mce-ico {
    font-family: "TinyMCE", "FontAwesome", sans-serif !important; /* Ensure this is correct */
}

.ag-theme-alpine {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

    .ag-theme-alpine .ag-icon {
        font-family: 'agGridAlpine' !important;
    }

.e-icons {
    font-family: 'e-icons' !important;
}

#PolicyTitle {
    text-align: center;
    margin-bottom: 20px;
}

#PolicyText {
    border: 1px black solid;
    padding: 20px;
    background-color: var(--white);
}

.MsoNormal {
    margin: 0px;
}


.star, .nostar, .starg {
    color: var(--dark-red);
    width: 12px;
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
}

.starg {
    color: var(--medium-gray);
}

html {
    margin: 0;
    padding: 0;
}


.but {
    text-align: center;
    /*float: right;
    display: inline;*/
    margin: 20px 0;
}

    .but:before {
        margin-top: 1rem;
        content: '';
        display: block;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.5);
        width: 99%;
    }

#accordion h3 *, #accordion2 h3 * {
    display: inline;
    font-weight: bold;
}


img {
    border: 0px;
}


body, p, ol, table tr td {
    font-family: "Open Sans", Verdana, Helvetica, Sans-Serif;
    line-height: 1.6em;
}

body {
    background-color: var(--white);
    /*border-top: solid 2px #000;*/
    color: var(--dark-gray);
    font-size: 12.8px; /* was .8em - converted to absolute px so html { font-size: 14px } doesn't scale this down. 12.8px = 0.8 x 16 (browser default), matching MultiTenant */
    margin: 0;
    padding: 0;
}

a {
    color: var(--dark-gray);
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}

    a:link, a:visited,
    a:active, a:hover {
        color: var(--dark-gray);
    }


.statistic-item:hover {
    background-color: silver !important;
}

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

hr {
    border: 0px;
    /*height: 5px;*/
    background-color: #c8c8c8;
    margin-top: 30px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: var(--black);
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 1.7em;
    font-weight: normal;
}

h2 {
    font-size: 1.4em;
    font-weight: normal;
}

h3 {
    font-size: 1.2em;
    margin-top: 30px;
}


h4 {
    font-size: 18px; /* Bootstrap 3 */
}

h5 {
    font-size: 14px; /* Bootstrap 3 */
}

h6 {
    font-size: 12px; /* Bootstrap 3 */
}

h5 a:link, h5 a:visited, h5 a:active {
    padding: 0;
    text-decoration: none;
}


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
}

.header-wrapper {
    /*border: solid 1px #ccc;
    border-radius: 4px;*/
}

#body {
    clear: both;
    padding-bottom: 70px;
}

.main-content {
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 100px;
    background-color: white !important;
}

.featured + .main-content {
}

header .content-wrapper {
}

body .footer {
    font-size: 14px !important;
}

footer {
    clear: both !important;
    background-color: #f0f1f5 !important;
    font-size: .8em !important;
    position: fixed !important;
    bottom: 0 !important;
    width: 100% !important;
    border-top: 1px solid #666 !important;
    z-index: 999 !important;
}

    footer p {
        margin: 8px 0 8px 0;
    }

.footer-link {
    color: var(--dark-gray);
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline !important;
}


/* site title
----------------------------------------------------------*/
.site-title {
    color: var(--light-gray);
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

    .site-title a, .site-title a:hover, .site-title a:active {
        background: none;
        color: var(--light-gray);
        outline: none;
        text-decoration: none;
    }


/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

        #login a.username {
            background: none;
            margin: 0;
            padding: 0;
            text-decoration: underline;
        }

    #login ul {
        margin: 0;
    }

    #login li {
        display: inline;
        list-style: none;
    }




/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

            ul#menu li a:hover {
                color: #333;
                text-decoration: none;
            }


/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: #7ac0da;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        color: #3e5667;
        padding: 20px 40px 30px 40px;
    }

    .featured hgroup.title h1, .featured hgroup.title h2 {
        color: #fff;
    }

    .featured p {
        font-size: 1.1em;
    }


/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

    hgroup.title h1, hgroup.title h2 {
        display: inline;
    }

    hgroup.title h2 {
        font-weight: normal;
        margin-left: 3px;
    }

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

        ol.round li.zero {
            background: url("../Images/orderedList0.png") no-repeat;
        }

        ol.round li.one {
            background: url("../Images/orderedList1.png") no-repeat;
        }

        ol.round li.two {
            background: url("../Images/orderedList2.png") no-repeat;
        }

        ol.round li.three {
            background: url("../Images/orderedList3.png") no-repeat;
        }

        ol.round li.four {
            background: url("../Images/orderedList4.png") no-repeat;
        }

        ol.round li.five {
            background: url("../Images/orderedList5.png") no-repeat;
        }

        ol.round li.six {
            background: url("../Images/orderedList6.png") no-repeat;
        }

        ol.round li.seven {
            background: url("../Images/orderedList7.png") no-repeat;
        }

        ol.round li.eight {
            background: url("../Images/orderedList8.png") no-repeat;
        }

        ol.round li.nine {
            background: url("../Images/orderedList9.png") no-repeat;
        }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #loginForm .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

    #loginForm .validation-summary-errors li {
        display: inline;
        list-style: none;
        margin: 0;
    }

    #loginForm input {
        width: 250px;
    }

        #loginForm input[type="checkbox"],
        #loginForm input[type="submit"],
        #loginForm input[type="button"],
        #loginForm button {
            width: auto;
        }

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 {
        margin-bottom: 5px;
    }

#socialLoginList button {
    margin-bottom: 12px;
}

#logoutForm {
    display: inline;
}

/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/* admin calendar*/
.cal-wrapper {
    width: 100%;
    float: left;
}

.cal-left-box {
    width: 66%;
    float: left;
}

.cal-right-box {
    width: 30%;
    float: left;
    padding-left: 1%;
}

    .cal-right-box input[type=text] {
        width: 90%;
    }

    .cal-right-box label {
        text-align: left;
        width: 50px;
    }

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#accordion fieldset, #accordion2 fieldset {
    width: 93%;
}


fieldset legend {
    display: none;
}

fieldset ol {
    padding: 0;
    list-style: none;
}

    fieldset ol li {
        padding-bottom: 5px;
        clear: left;
    }

        fieldset ol li span {
            margin-top: 6px;
            display: inline-block;
        }


label {
    font-size: 1em;
    font-weight: 500;
    width: 30%;
    text-align: right;
    margin-right: 10px;
    padding-top: 7px;
    text-transform: capitalize;
    display: inline-block;
    vertical-align: top;
}

.home-col {
    width: 31%;
    padding-right: 2%;
    float: left;
    margin-top: 20px;
}

    .home-col .button {
        position: relative;
        bottom: 0px;
    }


.sq {
    width: 388px;
}

.lblq {
    font-size: 1.2em;
    font-weight: 300;
    width: 30%;
    text-align: right;
    margin-right: 10px;
    padding-top: 7px;
    margin-left: auto;
    display: inline-block;
}



/* hilights */

* ::-moz-selection {
    background: #2b7a95;
    color: white;
}

* ::selection {
    background: #2b7a95;
    color: white;
}


.comments-history {
    width: 600px;
    border: 1px solid #E2E2E2;
    background-color: var(--white);
    padding: 10px;
}

.field-value-container {
    margin: 5px 0;
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 630px;
    margin-left: 250px;
}

.profile-title {
    font-weight: bold;
}


label.checkbox {
    display: inline;
}

input, textarea {
    border: 1px solid #c2c2c2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
    vertical-align: top;
}


textarea {
    font-family: inherit;
    width: 500px;
    height: 100px;
}

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }

.textarea-small textarea {
    width: 300px;
}

input[type="checkbox"] {
    background: transparent;
    border: inherit;
    width: auto;
}

input[type="radio"] {
    background: transparent;
    border: inherit;
    width: auto;
}

/* The global `input[type="checkbox"]` rule above (background:transparent; border:inherit) outranks
    Bootstrap 5's `.form-check-input`, which strips the switch track/border and leaves only the knob
    (renders as a "dot"). Restore the Bootstrap 5 toggle-switch appearance for the Correspondence
    dialog switches in both tabs (Letter and Patient Detail). Also lay each
   row out with flexbox so the (enlarged) switch and its label stay on the same line despite the
   floated input + the global 33%-width label rule. */
.corr-letter .form-check.form-switch,
.corr-detail .form-check.form-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    min-height: auto;
}

.corr-letter .form-switch .form-check-input,
.corr-detail .form-switch .form-check-input {
    flex-shrink: 0;
    float: none;
    margin-left: 0;
    margin-top: 0;
    width: 3em;
    height: 1.5em;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    -webkit-appearance: none;
    appearance: none;
    transition: background-position .15s ease-in-out;
}

.corr-letter .form-switch .form-check-label,
.corr-detail .form-switch .form-check-label {
    width: auto;
    margin: 0;
}

.corr-letter .form-switch .form-check-input:checked,
.corr-detail .form-switch .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.corr-detail .communication-delivery-method {
    border: 1px solid #d6dee8;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 1rem;
    background-color: #fff;
    width: max-content;
}

.corr-detail .communication-delivery-heading {
    font-weight: 700;
    margin: 0 0 2px;
}

.corr-detail .communication-delivery-scope {
    color: #0b5d99;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 2px;
}

.corr-detail .communication-delivery-instructions {
    color: #6c757d;
    font-size: 0.8rem;
    margin: 0 0 8px;
}

.corr-detail .communication-delivery-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.corr-detail .communication-delivery-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: auto;
    text-align: left;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #d6dee8;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.corr-detail .communication-delivery-option:hover {
    border-color: #6ea8fe;
}

.corr-detail .communication-delivery-option:focus-within {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.corr-detail .communication-delivery-option:has(.communication-delivery-radio:checked) {
    border: 2px solid #0d6efd;
    background-color: #eef6ff;
}

.corr-detail input.communication-delivery-radio {
    appearance: auto;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 2px 0 0;
    border: initial;
    background: initial;
    accent-color: #0d6efd;
}

.communication-delivery-option-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.communication-delivery-option-title {
    font-weight: 700;
}

.communication-delivery-option-note {
    color: #6c757d;
    font-size: 0.75rem;
}

.corr-detail .communication-preference-history {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #d6dee8;
}

.corr-detail .communication-preference-history-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d6dee8;
    border-radius: 4px;
    background-color: #f8f9fa;
    color: #343a40;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.corr-detail .communication-preference-history-toggle:hover {
    border-color: #adb5bd;
    background-color: #f1f3f5;
}

.corr-detail .communication-preference-history-toggle:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.communication-preference-history-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.communication-preference-history-count {
    color: #6c757d;
    font-size: 0.8rem;
    font-weight: 400;
}

.communication-preference-history-icon {
    flex: 0 0 auto;
    color: #495057;
}

.corr-detail .communication-preference-history .e-grid {
    max-width: 100%;
}

.corr-detail .communication-preference-history .collapse {
    padding-top: 0.75rem;
}

@media (max-width: 576px) {
    .corr-detail .communication-delivery-options {
        grid-template-columns: 1fr;
    }
}

input[type="submit"],
.button, .button-s, .button-s2, .buttont {
    background-color: var(--primary-blue-table) !important;
    border: #17a2b8;
    cursor: pointer;
    font-size: 1.2em;
    padding: 5px 10px 6px 9px;
    margin-right: 8px;
    width: auto;
    color: white !important;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    border-radius: 6px;
}

.button-not-allowed, .button-s, .button-s2, .buttont {
    background-color: #0e7da2;
    border: 1px #0e7da2 solid;
    cursor: not-allowed;
    font-size: 1.2em;
    padding: 5px 10px 6px 9px;
    margin-right: 8px;
    width: auto;
    color: white !important;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    border-radius: 6px;
}

.buttont {
    background-color: #22275b;
    border: 1px #22275b solid;
}

input[type="submit"]:hover,
.button:hover,
.button-sel,
.button-s:hover,
.button-s2:hover {
    background-color: #7ac0da;
    border: 1px #7ac0da solid;
    cursor: pointer;
    margin-right: 8px;
    width: auto;
    color: white;
    font-weight: normal;
    padding: 5px 10px 6px 9px;
}

.buttont:hover {
    background-color: #4b4f7a;
    border: 1px #4b4f7a solid;
}


.button-s, .button-s:hover,
.button-s2, .button-s2:hover {
    padding: 2px 5px 2px 5px;
}

    .button-s2, .button-s2:hover {
        background-color: gray;
        border: 0px;
    }

        .button-s2:hover {
            background-color: #c8c8c8;
        }




td input[type="submit"],
td .button, td .button:hover {
    padding: 3px 7px 4px 7px;
    margin-right: 4px;
}



/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error, select.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}


/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
    vertical-align: top;
}

    th a {
        display: block;
        position: relative;
    }

        th a:link, th a:visited, th a:active, th a:hover {
            color: #333;
            font-weight: 600;
            text-decoration: none;
            padding: 0;
        }

        th a:hover {
            color: #000;
        }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

        th.asc a:after, th.desc a:after {
            display: block;
            position: absolute;
            right: 0em;
            top: 0;
            font-size: 0.75em;
        }

        th.asc a:after {
            content: '▲';
        }

        th.desc a:after {
            content: '▼';
        }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}




select {
    width: 100%;
    padding: 7px;
}

.small-select select {
    width: 200px;
    padding: 7px;
}


/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

        #login ul {
            margin: 5px 0;
            padding: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

            #login a:hover {
                color: #333;
            }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li {
            margin: 0;
            padding: 0;
        }

    .lblq {
        text-align: left;
    }

    .sq {
        width: 85%;
    }


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

    /* features */
    section.feature {
        float: none;
        padding: 10px;
        width: auto;
    }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* forms */
    input {
        width: 90%;
    }

    select {
        width: 100%;
        padding: 8px;
    }

    label {
        width: 90%;
        text-align: left;
    }



    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }


    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer ul li, .float-left ul li {
            display: inline;
        }

        footer p {
            margin: 0;
        }


    /* admin calendar*/
    .cal-wrapper {
        width: 100%;
        float: left;
    }

    .cal-left-box {
        width: 100%;
        float: left;
    }

    .cal-right-box {
        width: 100%;
        float: left;
        padding-left: 0px;
    }

        .cal-right-box input[type=text] {
            width: 250px;
        }
}


.pager {
    margin: 10px 0;
}

    .pager .pager-count {
        float: left;
    }

    .pager .pager-buttons {
        float: right;
    }

#FilterForm label {
    float: none;
}

#FilterForm input, #FilterForm select {
    width: auto;
}

label.field-value {
    width: auto;
    text-align: left;
    vertical-align: top;
}

fieldset ol li:after {
    content: '';
    display: block;
    clear: both;
}

span.field-value {
    font-size: 1.2em;
    padding: 5px;
    margin: 5px 0;
    display: inline-block;
    vertical-align: top;
}

.input-field {
    width: 700px;
    display: inline;
}

.security-question select {
    width: 300px;
}

.clear {
    clear: both;
}

#view-file #page-navigation #page-number {
    float: left;
}

#view-file #page-navigation #page-buttons {
    float: right;
}

#view-file #page-image {
    position: relative;
    width: 960px;
    overflow: hidden;
    margin-top: 20px;
}

    #view-file #page-image img {
        width: 960px;
        z-index: 100;
    }

    #view-file #page-image #image-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        filter: alpha(opacity=0); /* For IE8 and earlier */
        z-index: 1000;
    }

.bold {
    font-weight: bold;
}

.tooltipsy {
    padding: 10px;
    max-width: 400px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
    border-radius: 5px;
}

span.tooltip {
    margin-top: 10px;
    vertical-align: top;
    display: inline-block;
    position: static;
    opacity: 1;
}

#SpecialistRegistrations {
    width: 100%;
}

    #SpecialistRegistrations td {
        white-space: nowrap;
    }

        #SpecialistRegistrations td form {
            display: inline;
        }

body .cookie-message-body {
    font-size: 14px !important;
    background-color: #f0f1f5;
}

.cookie-message-p {
    margin: 10px;
    padding: 0;
    font-size: .8em !important;
}

.cookie-left {
    float: left;
    width: 80%;
}

.cookie-right {
    float: right;
}

.cookie-link {
    color: var(--dark-gray);
    text-decoration: underline !important;
}

th a.LinkSortColumn {
    font-weight: bold;
}

#tab1 h2, #tab2 h2, #tab3 h2, #tab4 h2, #tab5 h2, #tab6 h2, #tab7 h2 {
    float: left;
}

.home-main {
    width: 99%;
    overflow: hidden;
}

    .home-main .home-box-left, .home-main .home-box-right {
        width: 48%;
        float: left;
        background-color: #f0f1f5;
        height: 100%;
    }

    .home-main .home-box-left {
        margin-right: 2%;
    }

    .home-main .home-box-right {
        margin-left: 2%;
    }

    .home-main .home-box-content {
        text-align: center;
    }

        .home-main .home-box-content h1, .home-main .home-box-content .button, .home-main .home-box-content p {
            margin: 40px 20px;
        }

        .home-main .home-box-content .button {
            font-size: 1.5em;
            line-height: 1.5em;
        }

        .home-main .home-box-content h1 {
            font-weight: bold;
            line-height: 1.5em;
        }

        .home-main .home-box-content p {
            font-size: 1.5em;
        }

.ui-icon {
    display: inline-block !important;
}

#timeout-countdown {
    position: fixed;
    bottom: 40px;
    right: 0;
    /*border: 1px solid #999999;*/
    /*background-color: #efeeef;*/
    /*padding: 5px;*/
    background: rgb(0, 20, 137);
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    z-index: 10000;
    opacity: 0.5;
}

    #timeout-countdown #remaining-time {
    }

#remaining-time {
    font-size: x-large;
    color: #e80c4d;
    opacity: 1;
    z-index: 10001;
}

#timeout-countdown #remaining-time.warning {
    color: #e80c4d;
}

.report-scroller {
    overflow-x: scroll;
    width: 100%;
    background-color: #fff;
}

    .report-scroller table {
        font-size: 12px;
        margin: 0;
    }

        .report-scroller table th, .report-scroller table td {
            border: 1px solid var(--lightGrey);
            white-space: nowrap;
            padding: 3px;
        }

.manage-users {
    width: 300px;
    display: inline-block;
    margin: 5px 0;
}

    .manage-users table {
        margin-top: 0;
    }

        .manage-users table select {
            width: 220px;
        }

.hospital-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 300px;
    display: inline-block;
}

    .hospital-list li label {
        width: auto;
        text-align: left;
    }

.popup_staylogoutbtn {
    background-color: #272559 !important;
    background: #272559 !important;
    margin-left: 20px !important;
}

    .popup_staylogoutbtn span {
        color: white !important;
    }

.mce-tinymce {
    display: inline-block !important;
}

.referral-prescriptions {
    width: 100% !important;
}

    .referral-prescriptions input {
        width: 100%;
    }

    .referral-prescriptions tfoot {
    }

.referral-investigations {
    width: 100% !important;
}

.referral-investigation-note {
    width: 100% !important;
}

.referral-investigations-pathology {
    width: 100% !important;
}

.fake-input-field {
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 16px;
    width: 500px;
    height: 100px;
    overflow: auto;
    padding: 5px;
}

.ui-autocomplete {
    cursor: pointer;
    min-height: 50px;
    max-height: 300px;
    width: 500px;
    overflow-x: auto;
    overflow-y: scroll;
}

    .ui-autocomplete li.ui-menu-item a:hover {
        background: #114a88;
        color: white;
        border-radius: inherit !important;
    }

.custom-bordered {
    border: 2px solid #3189d4 !important;
}

    .custom-bordered th {
        font-weight: 700 !important;
    }

.info-record {
    margin-bottom: -10px !important;
    font-size: small;
    color: #114a88 !important;
}

.txtsearchcode {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23888'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-position: 14px center;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 14px;
    padding: 8px 10px 10px 50px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    background-size: 20px;
}


/*
new styling changes */
#body {
    background-color: #ffff;
    /* min-height: 500px;*/
}

.main-content {
    background-color: #ffff !important;
}


table.myDataTable {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    /*border: 0 none;*/
    width: 99%;
    table-layout: fixed;
    white-space: normal !important;
}

#MVCGridTable_ReferralGrid thead, .myDataTable thead {
    background-color: #5bc0de;
    color: white;
}

.myDataTable th {
    font-size: small;
    /*background-color: #5bc0de;*/
    padding: 8px;
    padding-left: 0;
    vertical-align: top;
    border: 1px solid #ddd;
    word-wrap: break-word;
    white-space: pre-wrap !important;
    text-align: center;
}

.myDataTable td {
    border: 1px solid #ddd;
    word-wrap: break-word;
    white-space: pre-wrap !important;
    text-align: center;
    background-color: white;
    padding: 0 4px;
}

.menu-inner-items {
    margin-left: 2%;
}

.dataTables_wrapper {
    width: 99%;
}

.dataTables_length label, .dataTables_length label select {
    width: auto !important;
}

.custom-h2 {
    color: #337ab7 !important;
}

.mdc-data-table__header-cell {
    color: white !important;
}

.menu-header {
    background-color: #f0f1f5 !important;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    border-bottom: 1px solid rgba(0,0,0,.5);
    height: 120px;
    z-index: 3;
}

.header-logo {
    width: 256px;
    /*height: 80px;*/
    float: right;
    margin-top: -2rem;
}

.sticky {
    width: 100% !important;
    position: -webkit-sticky;
    position: fixed;
    top: 120px;
    background-color: var(--primaryBlues);
    color: rgb(255, 255, 255);
    font-size: 15px;
    display: flex !important;
    z-index: 1;
    padding: 5px 15px;
    line-height: 1.6em !important;
    left: 0;
    z-index: 999998;
    margin: 0px !important;
}

    .sticky > div {
        padding: inherit !important;
        align-self: center !important;
        display: inline-flex !important;
    }



.admin-heading {
    display: flex;
}

.admin-heading-left {
    width: 50%;
}

.admin-heading .h2Btn {
    width: 61%;
    background: white;
    color: #0e7da2 !important;
    border-left: 5px solid #0e7da2;
    font-weight: bold;
    cursor: default;
}

.admin-heading-right {
    width: 50%;
}

.menu-inner-items .button {
    width: 60%;
    border-left: 5px solid #f0f1f5;
}

.menu-heading {
    display: block;
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 120px;
}

.menu-heading-left {
    position: relative;
    top: 10px;
}

.menu-heading-right {
    position: relative;
    margin-left: -2%;
    top: 50px;
}

.mdc-data-table__header-row {
    background-color: #5bc0de !important;
}

@media only screen and (max-width: 768px) {
    header {
        height: inherit;
    }

    .menu-heading {
        display: block;
        flex-direction: row-reverse;
    }

    .admin-heading {
        display: block;
    }

    .admin-heading-left {
        width: auto;
    }

    .menu-inner-items .button {
        width: 90%;
        white-space: pre-wrap !important;
    }
}

.info-text-color {
    color: #114a88;
}




.dataTables_filter label {
    display: flex !important;
    margin: auto;
}

.dataTables_filter input {
    margin-top: -4px
}

.myDataTable td a {
    margin: 5px 0;
    white-space: normal;
    word-wrap: break-word;
    font-size: small;
}

.myDataTableExt td {
    position: relative;
}

    .myDataTableExt td a {
        top: 13px;
        position: absolute;
        left: 5px;
        right: 5px;
    }

.reportsTable {
    table-layout: unset !important;
}

.btnCaptial {
    text-transform: uppercase;
    font-weight: bold;
}

.patientRespond {
    width: 37%;
    display: inline-block;
    border-radius: 4px;
}

.patientInputDetails {
    margin-bottom: 30px;
}

    .patientInputDetails input {
        width: 37%;
        border-radius: 4px;
    }

    .patientInputDetails li {
        padding: 10px 0px;
    }

.highlight {
    border: 2px solid red !important;
}

    .highlight:focus {
        outline: none !important;
    }

.pt-0 {
    padding-top: 0px !important;
}

.referral-doc-logo {
    padding-bottom: 10px;
    margin-top: 32px;
    height: 50px;
}

.logo-summary {
    width: 150px;
    float: right;
}

    .logo-summary img {
        width: 100%;
        padding-top: 5px;
        padding-right: 10px;
    }

.consultant-header-logo {
    height: 50px;
    display: flex;
}

@-moz-document url-prefix() {
    .menu-heading-right {
        padding-top: 20px;
    }
}

.loader {
    margin: 0px;
    padding: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100vw;
    height: 100vh;
    /* Darker, near-opaque overlay covering the whole viewport so the translucent grey
       spinner has enough contrast to stand out over the (also grey) Syncfusion grid. */
    background-color: rgba(45, 45, 45, 0.92);
}

    .loader p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        color: White;
        line-height: 0;
    }

    .loader > p > img {
        height: 100px;
    }

.reactivation-title {
    width: 50%;
    display: inline-block;
    word-break: break-word;
}

.counter-tab {
    padding: 10px 0;
    margin: 0px;
    font-size: 14px;
}

#liOutcome img {
    margin-left: 50px;
}

/*New css*/
.specialistResponse {
    /*border: 1px solid black;*/
    /*border-radius: 4px;
    padding: 0 30px 30px 30px;*/
}

#divSpecialistResponse p {
    font-size: 16px;
}

.questionSections {
    width: 100% !important;
}

    .questionSections .questionSections-Text label {
        width: 30% !important
    }

    .questionSections input[type=text] {
        width: 70%;
        /* border: 20px black; */
    }

.outComeRadioButton {
    display: flex;
    width: 100% !important;
}

.labelRadioCheckbox {
    width: 100%;
    display: inline;
    text-align: left;
    padding: 10px 0 0 15px !important;
    font-size: 15px;
}

.specialistResponse input[type=radio], .specialistResponse input[type=checkbox] {
    width: 30px;
    height: 30px;
}

.ml-10 {
    margin-left: 10px;
}

.column-half li {
    display: flex;
    padding: 5px;
}

    .column-half li > * {
        padding: 5px !important;
    }

#dvReferralRelatedQuestion {
    padding: 5px 0px 0px 10px;
}

.specialistResponse p {
    padding: 20px 0px;
}

#dvDifferentSpecialityQuestion {
    display: flex;
}

.consultant-outcomes-tooltip {
    padding-left: 15px;
    position: relative;
    display: flex;
    /*width: 100px;*/
    cursor: pointer;
    float: right;
    font-weight: normal;
    font-size: 14px;
}

    .consultant-outcomes-tooltip .tooltiptext {
        visibility: hidden;
        background-color: var(--darkyellow);
        text-align: left;
        border-radius: 4px;
        padding: 15px;
        position: absolute;
        z-index: 5;
        word-break: break-word;
        top: 0;
        right: 80px;
        margin-top: -10px;
        width: 200px;
    }

    .consultant-outcomes-tooltip:hover .tooltiptext {
        visibility: visible;
    }

    .consultant-outcomes-tooltip .response-txt {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.outcomeDivInside {
    margin: 0px 0px;
    display: flex;
    vertical-align: top;
    position: relative;
    width: 100%;
}

    .outcomeDivInside div {
        width: 50%;
        padding: 5px;
    }

    .outcomeDivInside select {
        border-radius: 4px;
        width: auto !important;
    }

    .outcomeDivInside label {
        text-align: left;
        font-weight: bold;
    }

.outcomeCbDivPadding {
    padding-top: 10px;
}

.btnDiffSpeciality {
    margin: 5px;
    padding-top: 15px;
}

#followUpDates {
    width: 100%;
    margin: 5px;
    margin-left: 42px;
}

    #followUpDates select, #followUpDates input {
        border-radius: 4px;
        width: 25% !important;
    }

#dvPartialViewRecommendedSpecialities {
    margin: 5px 5px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 100%;
}

.outcomeInternal {
    margin-left: 34px !important;
}

.btnDisabled {
    background-color: #c8dbf1;
    border: #c8dbf1;
    color: #114a88 !important;
    pointer-events: none;
}

.closeButton {
    position: absolute;
    background-color: white;
    color: #c0c0c0 !important;
    font-weight: bold;
    font-size: 34px;
    border: 0;
    right: 5px;
    top: 1px;
    padding: 0;
}

    .closeButton:hover {
        position: absolute;
        background-color: white;
        color: #c0c0c0 !important;
        font-weight: bold;
        font-size: 34px;
        border: 0;
        right: 5px;
        top: 1px;
        padding: 0;
    }

.tableCommon tr td {
    word-break: break-all
}

.taskBody {
    background: white !important;
    color: black !important;
}

.bgcolor {
    background: var(--deepBlue) !important;
    border: unset !important;
    color: white !important;
}

.linkClass {
    color: var(--vibrantblue) !important;
    font-size: 14px;
}

.responseDivTop {
    padding-left: 0px;
    padding-top: 5px;
    margin-left: 250px;
}

.responseText {
    font-weight: bold;
    font-size: medium;
}

.subResponse {
    padding-left: 20px;
}

.subResponseText {
    display: inline !important;
    font-size: medium;
    font-weight: 300;
}

.leafnodeexpandable {
    padding-left: 42px;
    padding-top: 13px;
}

.followUpDates {
    width: 100%;
    margin: 5px;
    margin-left: 42px;
}

.followUpReason {
    width: 100%;
    margin: 5px;
    margin-left: 42px;
}

.ui-autocomplete-category {
    /*font-weight: bold;*/
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
}

.noResults a {
    color: red !important;
}

    .noResults a:hover {
        background: none !important;
        color: red !important;
        border: none !important;
    }

.ui-menu-item-wrapper:hover {
    background-color: #9CE3D5 !important;
    color: black !important;
}

.categoryLi {
    padding-left: 20px !important;
}

#ddlDiagnosisStages {
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

#diagnosiStagesSearch {
    margin-top: 20px !important;
}

#diagnosisOrderedDiv .table-primary {
    background-color: var(--primary-blue-table);
    border-radius: 4px;
}

#diagnosisOrderedDiv .btn-danger {
    background-color: #AF3232;
    border-color: #AF3232;
    border-radius: 4px !important;
}

#diagnosisOrderedDiv .undoExcluded {
    background-color: #001489;
    border-color: #001489;
    border-radius: 4px !important;
}

.hideNotExcludedDiv {
    display: none;
}

.treatmentLabel {
    text-align: left !important;
}

.iconPlus {
    font-size: 3em !important;
    padding-left: 10px !important;
}

.treatmentButton {
    border: none !important;
    background-color: white !important;
}



.treatmentItalic {
    font-style: italic !important
}

.infoPlus {
    font-size: 10px;
    font-style: italic;
    width: 20%;
    padding-top: 5px;
    font-weight: 700;
    color: #8C8C8C;
}

/* Absolute Center Spinner */
.loadingSpinner {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

    /* Transparent Overlay */
    .loadingSpinner:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
        background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
    }

    /* :not(:required) hides these rules from IE9 and below */
    .loadingSpinner:not(:required) {
        /* hide "loading..." text */
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
    }

        .loadingSpinner:not(:required):after {
            content: '';
            display: block;
            font-size: 10px;
            width: 1em;
            height: 1em;
            margin-top: -0.5em;
            -webkit-animation: spinner 150ms infinite linear;
            -moz-animation: spinner 150ms infinite linear;
            -ms-animation: spinner 150ms infinite linear;
            -o-animation: spinner 150ms infinite linear;
            animation: spinner 150ms infinite linear;
            border-radius: 0.5em;
            -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
            box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
        }

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.iconBgColor {
    color: rgb(40, 53, 147) !important;
}

.iconBtn {
    all: unset !important;
    display: inline-block !important;
    cursor: pointer !important;
}

.btnCancelNew {
    border: 1px solid !important;
    background: none !important;
    text-decoration: none !important;
    border-color: #2e6da4 !important;
    color: #2e6da4 !important;
}

.custom-modal-viewrtt .modal-content, .custom-modal-history .modal-content {
    background-color: rgb(238,238,238) !important;
    padding-bottom: 40px !important;
    border-radius: 10px !important;
}

.rttHistoryBody {
    padding: 10px 40px !important;
}

.modal-headerHist {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 10px !important;
    width: 95% !important;
    margin: 10px !important;
}

.modal-titleHist {
    width: 90% !important;
    text-align: left !important;
    font-size: xx-large !important;
    font-weight: 600 !important;
}

.rttView th, .rttHistory th {
    background-color: rgb(40, 53, 147) !important;
    text-align: center !important;
    border: 1px solid rgb(189,189,189) !important;
    height: 50px !important;
    vertical-align: middle !important;
    color: white !important;
    width: 15% !important;
}

.rttView td, .rttHistory td {
    border: 1px solid rgb(189,189,189) !important;
    background-color: white !important;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

.rttHistory th {
    width: 10% !important;
}

    .rttHistory th:nth-child(2), .rttHistory th:nth-child(3), .rttHistory th:nth-child(7) {
        width: 20% !important;
    }

.rttView th:nth-child(1), .rttView th:nth-child(4), .rttView th:nth-child(5), .rttView th:nth-child(6), .rttView th:nth-child(8) {
    width: 10% !important;
}

.rttView tbody td:nth-child(8) {
    text-align: center !important;
    vertical-align: middle !important;
}

.rttContentRed {
    color: #ff0000;
}

.rttContentblack {
    color: var(--black);
}

.add-new-btn {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-weight: normal;
    font-style: italic;
    color: black;
    padding-left: 16px;
}

    .add-new-btn .plus-icon {
        background-color: rgb(40, 53, 147);
        color: #fff;
        font-size: 18px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding-right: 3px;
        margin-right: 4px;
    }


    .add-new-btn span {
        font-style: italic;
        color: black;
    }

.closeButtonRTT {
    background-color: rgb(40, 53, 147);
    color: white;
    font-size: 18px;
    width: 24px;
    top: 57px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: center;
    right: 44px;
}


.addBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0px !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    text-align: center !important;
}

    .addBtn i {
        margin-right: 10px;
    }

.modal-headerRttView {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    width: 95%;
    margin: 10px
}

.modal-titleRttView {
    width: 90% !important;
    text-align: left !important;
    font-size: xx-large !important;
    font-weight: 600 !important;
}

.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap;
}

.pagination-container, .buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1;
}

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

    .items-per-page-container label {
        font-size: 14px;
        margin-right: 5px;
        white-space: normal;
        word-wrap: break-word;
        max-width: 150px;
        line-height: 1.2;
    }

itemSelect {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 80px;
    max-width: 100%;
}



.rttViewBody {
    padding: 10px 40px;
}

.rtt-dates p {
    margin: 10px;
    font-size: 14px;
    color: #555;
}

.abp-busy-overlay {
    z-index: 9999 !important;
}

.modal-content {
    border-radius: 20px !important;
}

.rttStatus .ui-select-choices .ui-select-choices-row {
    word-wrap: break-word; /* Break long words to fit the container */
    white-space: normal; /* Allow line breaks */
    overflow-wrap: break-word; /* Same as word-wrap: break-word */
}

.no-btn {
    background-color: #21a26f;
    border-color: #21a26f;
}
/* Optional: limit max height of dropdown and make it scrollable */
.rttStatus .ui-select-choices {
    max-height: 250px; /* Maximum height of the dropdown */
    overflow-y: auto; /* Make the dropdown scrollable if content exceeds max height */
}

/* Style for the input box (optional) */
.rttStatus .ui-select-match {
    padding: 5px;
}

.rttConfirmation .modal-footer {
    text-align: center;
}

.ag-header-row {
    background-color: rgb(40, 53, 147) !important;
    color: white !important;
}

.ag-header .ag-icon {
    color: #fff !important;
    /*font-size: 20px !important;*/
}

.ag-header-row .ag-header-cell {
    border: 1px solid rgb(189,189,189) !important;
    font-weight: bold !important;
}

.wordwrapCells {
    word-wrap: break-word !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

.ag-header-cell-text {
    word-wrap: break-word !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.statistics-list a {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: inherit;
    text-decoration: none;
}

div.statistics-list {
}

span.new-referral-info {
    float: right;
    width: auto;
    font-weight: normal;
    font-size: 15px;
    text-align: right;
    background-color: #f0f1f5;
    padding: 5px;
    background-color: #fff3cd; /* Light yellow background */
    color: #856404; /* Darker gold/brown text */
    border: 2px solid #ffe3cd; /* Slightly darker yellow border */
}

h2.page-heading {
    padding: 20px;
    padding-left: 0px;
    font-size: 26px;
    border-bottom: 1px solid #ddd;
}

ol h4 {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 10px;
    background-color: #f0f1f5;
}



hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.table-striped {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--primary-blue-table) !important;
}

    .table-striped th {
        background-color: var(--primary-blue-table) !important;
        color: white;
        padding: 10px;
    }

    .table-striped td {
        padding: 10px;
    }

    /* Only apply striped styling if the row does NOT have class "lightgrey" */
    .table-striped tbody tr:nth-child(even):not(.lightgrey) {
        background-color: var(--light-blue-soft) !important;
        transition: background-color 0.3s ease;
    }

        .table-striped tbody tr:nth-child(even):not(.lightgrey):hover {
            background-color: var(--light-blue-soft) !important;
        }

    .table-striped tbody tr:nth-child(odd):not(.lightgrey) {
        background-color: var(--white) !important;
    }

        .table-striped tbody tr:nth-child(odd):not(.lightgrey):hover {
            background-color: var(--white) !important;
        }

    /* Custom style for .lightgrey rows */
    .table-striped tbody tr.lightgrey {
        background-color: #d3d3d3 !important; /* Example color */
    }

        .table-striped tbody tr.lightgrey:hover {
            background-color: #c0c0c0 !important; /* Example hover color */
        }

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--primaryBlues);
}


.ui-menu-item-wrapper {
    width: 100% !important;
    text-decoration: none !important;
    display: block !important;
    border: none !important;
}

.btn {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: black;
}

.btn-info {
    background-color: var(--primary-blue-table) !important;
    border-color: #17a2b8;
    color: white;
}

.btn-light {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: black;
}

.btn-dark {
    background-color: #343a40;
    border-color: #343a40;
    color: white;
}

.btn-outline-primary {
    background-color: transparent;
    border-color: #007bff;
    color: #007bff;
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: #6c757d;
    color: #6c757d;
}

.btn-outline-success {
    background-color: transparent;
    border-color: #28a745;
    color: #28a745;
}

.btn-outline-danger {
    background-color: transparent;
    border-color: #dc3545;
    color: #dc3545;
}

.btn-outline-warning {
    background-color: transparent;
    border-color: #ffc107;
    color: #ffc107;
}

.btn-outline-info {
    background-color: transparent;
    border-color: #17a2b8;
    color: #17a2b8;
}

.btn-outline-light {
    background-color: transparent;
    border-color: #f8f9fa;
    color: black;
}

.btn-outline-dark {
    background-color: transparent;
    border-color: #343a40;
    color: #343a40;
}

.btn:hover {
    opacity: 0.85;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
}

.btn-lg {
    padding: 12px 25px;
    font-size: 18px;
    border-radius: 6px;
}


.comment-history-container {
    max-height: 400px;
    overflow-y: auto;
}

.comment-text {
    border: 1px solid black;
    padding: 10px;
}

.comment-user {
    line-height: 1;
    margin-bottom: 20px;
    font-size: 10px;
    text-align: right;
}

#diagnosiStagesSearch .txtsearchcode {
    width: 100% !important;
}

#searchloadingp1 {
    display: none;
    height: 10px;
    margin-left: 93%;
    margin-top: -7.2%;
    position: absolute;
    color: var(--primaryBlues);
    font-size: 30px;
}

#searchloadingp {
    display: none;
    height: 10px;
    margin-left: 30%;
    margin-top: -1.8%;
    position: absolute;
    color: var(--primaryBlues);
    font-size: 30px;
}

#searchloadingtreatment {
    display: none;
    height: 10px;
    position: absolute;
    margin-left: 30%;
    margin-top: -1.8%;
    color: var(--primaryBlues);
    font-size: 30px;
}

#dvIsInitialLoad {
    display: none;
}

.txtsearchcode {
    width: 84% !important;
}

.specialistresponseheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #f0f1f5;
    height: 40px !important;
}

    .specialistresponseheader h4 {
        border: none !important;
    }

.responseText {
    margin: 0;
    padding-left: 10px;
}

.sphelpBlock {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .sphelpBlock img {
        margin-left: 5px;
    }

.consultant-outcomes-tooltip {
    position: relative;
    display: flex;
    align-items: center;
}

#genderDictionaryNotification {
    display: none !important;
    margin-left: 3%;
}

.treatmentPlusIcons {
    color: var(--primaryBlues);
    font-size: 0.8em !important;
    line-height: 1em !important;
    vertical-align: 2% !important;
}

.treatmentsMainDiv {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

    .treatmentsMainDiv #txtcode {
        flex: 7;
        min-width: 0;
    }

    .treatmentsMainDiv.iconPlus {
        flex: 1;
        display: flex;
        justify-content: center;
    }

.infoPlus {
    flex: 1;
    white-space: nowrap;
}

.recommendedTreatment, .consultantMangementPlan, .diagnosismainSection, .outcomeMainDiv, .previewPageHeader {
    display: flex;
    gap: 8px;
    width: 100%;
}

    .diagnosismainSection .bannerDiagnosis, .consultantMangementPlan .bannerCmp, .recommendedTreatment .bannerTreatment, .outcomeMainDiv .leftContent, .previewPageHeader a {
        flex: 1.9;
        min-width: 0;
    }

    .recommendedTreatment #prescriptionSection, .consultantMangementPlan .responseDivTop, .diagnosismainSection #diagnosisSection, .outcomeMainDiv .rightContent {
        flex: 6;
        min-width: 0;
        margin: unset;
        margin-top: 5px;
    }

    .outcomeMainDiv .responseDivTop {
        margin: unset !important;
    }

#stickyheader {
    display: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

    #stickyheader .header-title {
        flex: 6;
        font-size: 28px !important;
    }

    #stickyheader .header-info {
        flex: 2;
        text-align: center;
    }

.signConsultantName {
    color: #00A887;
    font-size: large;
    font-weight: bold;
}

.guideMe {
    margin-left: 15px;
}

.previewStep {
    width: 0px;
    margin-left: 30%;
    height: 0px
}

.previewLogo {
    text-align: right;
    padding-right: 30px;
    padding-bottom: 20px;
}

    .previewLogo img {
        height: 50px;
    }

.previewContentM200 {
    margin-left: 200px;
}


.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}




/* Margin Classes */
.m-0 {
    margin: 0px !important;
}

.m-5 {
    margin: var(--space-5);
}

.m-10 {
    margin: var(--space-10);
}

.m-15 {
    margin: var(--space-15);
}

.m-20 {
    margin: var(--space-20);
}

.m-25 {
    margin: var(--space-25);
}

.m-30 {
    margin: var(--space-30);
}

.m-35 {
    margin: var(--space-35);
}

.m-50 {
    margin: var(--space-50);
}

.m-100 {
    margin: var(--space-100);
}

.m-150 {
    margin: var(--space-150);
}

.m-200 {
    margin: var(--space-200);
}

.m-300 {
    margin: var(--space-300);
}

/* Margin Top */
.mt-5 {
    margin-top: var(--space-5);
}

.mt-10 {
    margin-top: var(--space-10);
}

.mt-15 {
    margin-top: var(--space-15);
}

.mt-20 {
    margin-top: var(--space-20);
}

.mt-25 {
    margin-top: var(--space-25);
}

.mt-30 {
    margin-top: var(--space-30);
}

.mt-35 {
    margin-top: var(--space-35);
}

.mt-50 {
    margin-top: var(--space-50);
}

.mt-100 {
    margin-top: var(--space-100);
}

.mt-150 {
    margin-top: var(--space-150);
}

.mt--100 {
    margin-top: calc(-1 * var(--space-100));
}

.mt--150 {
    margin-top: calc(-1 * var(--space-150));
}

.mt-200 {
    margin-top: var(--space-200);
}

.mt-300 {
    margin-top: var(--space-300);
}

/* Margin Bottom */
.mb-5 {
    margin-bottom: var(--space-5);
}

.mb-10 {
    margin-bottom: var(--space-10);
}

.mb-15 {
    margin-bottom: var(--space-15);
}

.mb-20 {
    margin-bottom: var(--space-20);
}

.mb-25 {
    margin-bottom: var(--space-25);
}

.mb-30 {
    margin-bottom: var(--space-30);
}

.mb-35 {
    margin-bottom: var(--space-35);
}

.mb-50 {
    margin-bottom: var(--space-50);
}

.mb-100 {
    margin-bottom: var(--space-100);
}

.mb-150 {
    margin-bottom: var(--space-150);
}

.mb--150 {
    margin-bottom: calc(-1 * var(--space-150));
}

.mb-200 {
    margin-bottom: var(--space-200);
}

.mb-300 {
    margin-bottom: var(--space-300);
}

/* Margin Left */
.ml-5 {
    margin-left: var(--space-5);
}

.ml-10 {
    margin-left: var(--space-10);
}

.ml-15 {
    margin-left: var(--space-15);
}

.ml--15 {
    margin-left: calc(-1 * var(--space-15));
}

.ml--20 {
    margin-left: calc(-1 * var(--space-20));
}

.ml-20 {
    margin-left: var(--space-20);
}

.ml-25 {
    margin-left: var(--space-25);
}

.ml-30 {
    margin-left: var(--space-30);
}

.ml-35 {
    margin-left: var(--space-35);
}

.ml-50 {
    margin-left: var(--space-50);
}

.ml-100 {
    margin-left: var(--space-100);
}

.ml-150 {
    margin-left: var(--space-150);
}

.ml--150 {
    margin-left: calc(-1 * var(--space-150));
}

.ml-200 {
    margin-left: var(--space-200);
}

.ml-300 {
    margin-left: var(--space-300);
}

/* Margin Right */
.mr-5 {
    margin-right: var(--space-5);
}

.mr-10 {
    margin-right: var(--space-10);
}

.mr-15 {
    margin-right: var(--space-15);
}

.mr-20 {
    margin-right: var(--space-20);
}

.mr-25 {
    margin-right: var(--space-25);
}

.mr-30 {
    margin-right: var(--space-30);
}

.mr-35 {
    margin-right: var(--space-35);
}

.mr-50 {
    margin-right: var(--space-50);
}

.mr-100 {
    margin-right: var(--space-100);
}

.mr-150 {
    margin-right: var(--space-150);
}

.mr-200 {
    margin-right: var(--space-200);
}

.mr-300 {
    margin-right: var(--space-300);
}

/* Padding Classes */
.p-5 {
    padding: var(--space-5);
}

.p-10 {
    padding: var(--space-10);
}

.p-15 {
    padding: var(--space-15);
}

.p-20 {
    padding: var(--space-20);
}

.p-25 {
    padding: var(--space-25);
}

.p-30 {
    padding: var(--space-30);
}

.p-35 {
    padding: var(--space-35);
}

.p-50 {
    padding: var(--space-50);
}

.p-100 {
    padding: var(--space-100);
}

.p-150 {
    padding: var(--space-150);
}

.p-200 {
    padding: var(--space-200);
}

.p-300 {
    padding: var(--space-300);
}

/* Padding Top */
.pt-5 {
    padding-top: var(--space-5);
}

.pt-10 {
    padding-top: var(--space-10);
}

.pt-15 {
    padding-top: var(--space-15);
}

.pt-20 {
    padding-top: var(--space-20);
}

.pt-25 {
    padding-top: var(--space-25);
}

.pt-30 {
    padding-top: var(--space-30);
}

.pt-35 {
    padding-top: var(--space-35);
}

.pt-50 {
    padding-top: var(--space-50);
}

.pt-100 {
    padding-top: var(--space-100);
}

.pt-150 {
    padding-top: var(--space-150);
}

.pt-200 {
    padding-top: var(--space-200);
}

.pt-300 {
    padding-top: var(--space-300);
}

/* Padding Bottom */
.pb-5 {
    padding-bottom: var(--space-5);
}

.pb-10 {
    padding-bottom: var(--space-10);
}

.pb-15 {
    padding-bottom: var(--space-15);
}

.pb-20 {
    padding-bottom: var(--space-20);
}

.pb-25 {
    padding-bottom: var(--space-25);
}

.pb-30 {
    padding-bottom: var(--space-30);
}

.pb-35 {
    padding-bottom: var(--space-35);
}

.pb-50 {
    padding-bottom: var(--space-50);
}

.pb-100 {
    padding-bottom: var(--space-100);
}

.pb-150 {
    padding-bottom: var(--space-150);
}

.pb-200 {
    padding-bottom: var(--space-200);
}

.pb-300 {
    padding-bottom: var(--space-300);
}

/* Padding Left */
.pl-5 {
    padding-left: var(--space-5);
}

.pl-10 {
    padding-left: var(--space-10);
}

.pl-15 {
    padding-left: var(--space-15);
}

.pl-20 {
    padding-left: var(--space-20);
}

.pl-25 {
    padding-left: var(--space-25);
}

.pl-30 {
    padding-left: var(--space-30);
}

.pl-35 {
    padding-left: var(--space-35);
}

.pl-50 {
    padding-left: var(--space-50);
}

.pl-150 {
    padding-left: var(--space-150);
}

/* Padding Right */
.pr-5 {
    padding-right: var(--space-5);
}

.pr-10 {
    padding-right: var(--space-10);
}

.pr-15 {
    padding-right: var(--space-15);
}

.pr-20 {
    padding-right: var(--space-20);
}

.pr-25 {
    padding-right: var(--space-25);
}

.pr-30 {
    padding-right: var(--space-30);
}

.pr-35 {
    padding-right: var(--space-35);
}

.pr-50 {
    padding-right: var(--space-50);
}

.height-80 {
    height: 80px;
}

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

.font-weight-normal {
    font-weight: normal;
}

.font-weight-light {
    font-weight: lighter;
}

.font-weight-bolder {
    font-weight: bolder;
}

.font-weight-medium {
    font-weight: 500;
}

.w-auto {
    width: auto !important
}

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


.previewpidbanner {
    background-color: var(--lightGrey);
    border-radius: 20px;
}

#EventsIndex {
    line-height: 1.7;
}

.colorforestGreen {
    color: var(--forestGreen)
}

.colorcrimson {
    color: var(--crimson)
}

.color-forest-green {
    color: var(--forestGreen);
    font-weight: bold;
}

.color-crimson {
    color: var(--crimson);
    font-weight: bold;
}

/* Approve-referral comment on the Case Action card: bolder weight for the bracketed note. */
#EventsIndex .event-description.text-center.color-crimson b {
    font-weight: 700;
}

.color-ligh-blue {
    color: var(--lighBlue);
}

.taskbtn {
    display: flex;
    gap: 3px;
}

.attachmentName {
    width: 80%;
}

/* Case Action (ReferralRequest) header - bigger bold heading to match MultiTenant. */
#EventsIndex .custom-h2 {
    font-size: 1.8rem;
    font-weight: 700;
}

/* Case Action filter row: keep the search input, dropdowns and buttons the same
   height (the global .form-control rule forces 43px) and bottom-aligned so the
   labels and controls line up. */
#ReferralRequestForm .form-select {
    height: 43px !important;
    font-size: 13px !important;
}

#ReferralRequestForm .form-control {
    height: 43px !important;
    margin: 0 !important;
}

    /* The global `input { color: #333 }` rule darkens the placeholder; restore Bootstrap's
   light-grey placeholder so it matches MultiTenant. */
    #ReferralRequestForm .form-control::placeholder {
        color: #6c757d !important;
        opacity: 1 !important;
    }

#ReferralRequestForm .row > [class^="col-"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#ReferralRequestForm .row .btn {
    height: 43px;
    line-height: 1.2;
    width: 100%;
    min-width: 80px;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* All dropdowns on the ReferralRequest (Case Action) page use a 13px font. */
#EventsIndex .form-select {
    font-size: 13px !important;
}

/* Case Action cards - ported from MultiTenant referralRequest/index.css. */
#EventsIndex .event-list-item {
    position: relative;
}

#EventsIndex .event-body {
    background-color: #f4f5f9;
    border-left: 10px solid #9954bb;
    border-radius: 4px !important;
    padding: 5px;
    margin-bottom: 10px;
    transition: all linear 0.2s;
}

/* Patient Cases (Investigation Manager) card left border, ported verbatim from MultiTenant
   investigations/index.css. The card has no status class (unlike Case Action), so it always
   shows the purple border; this more-specific selector ensures it is not out-specified. */
#EventsIndex .event-list-item .event-body {
    background-color: #f5f8ff !important;
    border: unset !important;
    border: 1px solid #666666 !important;
}

    /* Sticky case header (NHS Number ... Pathway Summary), ported from MultiTenant
   investigations/index.css so it stays pinned while the card body scrolls. */
    #EventsIndex .event-list-item .event-body .event-header {
        background-color: inherit;
        padding-bottom: 30px;
        margin-bottom: 10px;
        position: sticky;
        top: 120px;
        z-index: 1;
        border-bottom: solid 1px #c0c0c0;
    }

/* Status-specific left-border colours (MultiTenant). status17 (Action Required)
   has an explicit thin full border plus the NHS-blue left border. */
#EventsIndex .event-list-item .status17 {
    border: 1px solid !important;
    border-left: 10px solid #005eb8 !important;
    border-radius: 10px !important;
}

#EventsIndex .event-list-item .status2 {
    border-left: 10px solid #5c9bb7 !important;
}

#EventsIndex .event-list-item .status3 {
    border-left: 10px solid #E74C3C !important;
}

#EventsIndex .event-list-item .status5 {
    border-left: 10px solid #95A5A6 !important;
}

#EventsIndex .event-list-item .status10,
#EventsIndex .event-list-item .status15 {
    border-left: 10px solid #F9423A !important;
}

#EventsIndex .event-list-item .event-body .event-title {
    margin-top: 0;
    font-size: 1.4em;
}

#EventsIndex .fs-7 {
    font-size: 0.85rem;
}

/* Case Action progress ring (Syncfusion Circular) - "Days since referral",
   ported from MultiTenant round-progress (#45ccce on #eaeaea). */
#EventsIndex .rr-progress-col {
    padding-top: 5px;
}

#EventsIndex .rr-ring-label {
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

#EventsIndex .rr-ring-wrap {
    display: inline-block;
}

#EventsIndex .rr-ring-caption {
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    color: #555;
}

/* Case Action attachments grid action buttons - stacked vertically like MultiTenant. */
#EventsIndex .rr-att-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

    #EventsIndex .rr-att-actions a {
        color: #333;
        cursor: pointer;
    }

        #EventsIndex .rr-att-actions a:hover {
            color: #000;
        }

/* Keep the read (edit/delete) and edit (save/cancel) action groups stacked vertically. */
#EventsIndex .rr-att-read-actions,
#EventsIndex .rr-att-edit-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Inline attachments table (MultiTenant crud-grid). */
#EventsIndex .rr-att-table {
    width: 100%;
    margin-bottom: 0;
    font-size: 0.85rem;
}

    #EventsIndex .rr-att-table th,
    #EventsIndex .rr-att-table td {
        /* !important overrides Bootstrap 5's default top alignment for tbody cells. */
        vertical-align: middle !important;
        padding: 5px;
        border: 1px solid #ddd;
    }

    /* Header row - blue with white text/icons (matches the app's table-striped header). */
    #EventsIndex .rr-att-table thead th {
        background-color: var(--primary-blue-table) !important;
        color: #fff !important;
        font-weight: 600;
    }

        #EventsIndex .rr-att-table thead th .rr-att-add-toggle,
        #EventsIndex .rr-att-table thead th .rr-att-add-cancel,
        #EventsIndex .rr-att-table thead th .rr-att-sort-icon {
            color: #fff;
        }

#EventsIndex .rr-att-sort {
    cursor: pointer;
    white-space: nowrap;
}

#EventsIndex .rr-att-th-actions {
    width: 50px;
    white-space: nowrap;
}

#EventsIndex .rr-att-th-date {
    width: 80px;
}

/* Comments table (Patient Cases card) - mirrors the Attachments table styling; inline add/edit/delete
   with the action icons in the left column (no toolbar on top). */
#EventsIndex .rr-cmt-table {
    width: 100%;
    margin-bottom: 0;
    font-size: 0.85rem;
}

    #EventsIndex .rr-cmt-table th,
    #EventsIndex .rr-cmt-table td {
        /* !important overrides Bootstrap 5's default top alignment for tbody cells. */
        vertical-align: middle !important;
        padding: 5px;
        border: 1px solid #ddd;
    }

    #EventsIndex .rr-cmt-table thead th {
        background-color: var(--primary-blue-table) !important;
        color: #fff !important;
        font-weight: 600;
    }

        #EventsIndex .rr-cmt-table thead th .rr-cmt-add-toggle,
        #EventsIndex .rr-cmt-table thead th .rr-cmt-add-cancel {
            color: #fff;
        }

#EventsIndex .rr-cmt-th-actions {
    width: 50px;
    white-space: nowrap;
}

#EventsIndex .rr-cmt-th-date {
    width: 120px;
}

/* Header add (+) / cancel and row edit/delete icons. */
#EventsIndex .rr-cmt-add-toggle,
#EventsIndex .rr-cmt-add-cancel,
#EventsIndex .rr-cmt-edit,
#EventsIndex .rr-cmt-delete {
    cursor: pointer;
    color: #333;
    margin: 0 3px;
}

#EventsIndex .rr-cmt-add-toggle,
#EventsIndex .rr-cmt-add-cancel {
    color: #fff;
}

/* Inline add-row + edit save/cancel icons - stacked vertically like the Attachments table. */
#EventsIndex .rr-cmt-add-row .rr-cmt-add-save,
#EventsIndex .rr-cmt-add-row .rr-cmt-add-cancel,
#EventsIndex .rr-cmt-edit-save,
#EventsIndex .rr-cmt-edit-cancel {
    display: block;
    color: #333;
    cursor: pointer;
    margin: 6px auto;
}

    #EventsIndex .rr-cmt-add-row .rr-cmt-add-save:hover,
    #EventsIndex .rr-cmt-add-row .rr-cmt-add-cancel:hover,
    #EventsIndex .rr-cmt-edit:hover,
    #EventsIndex .rr-cmt-delete:hover,
    #EventsIndex .rr-cmt-edit-save:hover,
    #EventsIndex .rr-cmt-edit-cancel:hover {
        color: #000;
    }

#EventsIndex .rr-cmt-add-row .rr-cmt-add-input,
#EventsIndex .rr-cmt-row .rr-cmt-edit-input {
    width: 100%;
    max-width: none;
    font-size: 0.85rem;
    margin: 0;
    padding: 4px 8px;
    line-height: 1.4;
    /* Default height and resize are set INLINE on the textarea (style="height:200px;resize:vertical")
       so they beat the global "textarea { height:100px }" rule and, crucially, the drag-resize updates
       that same inline height - no stylesheet rule (and no !important) can override/snap it back.
       Do NOT re-add height/min-height/resize here. */
    overflow: auto;
}

#EventsIndex .rr-cmt-read {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Sortable column headers (Comment / Date). */
#EventsIndex .rr-cmt-sort {
    cursor: pointer;
    white-space: nowrap;
}

#EventsIndex .rr-cmt-table thead th .rr-cmt-sort-icon {
    color: #fff;
    margin-left: 3px;
}

/* The "new comment" date picker in the add row. */
#EventsIndex .rr-cmt-add-row .rr-cmt-add-date {
    width: 100%;
    max-width: none;
    font-size: 0.85rem;
    padding: 4px 8px;
    height: auto;
}

/* Add (+) / cancel icons in the header. */
#EventsIndex .rr-att-add-toggle,
#EventsIndex .rr-att-add-cancel {
    cursor: pointer;
    margin: 0 3px;
}

/* Inline add-row + edit save/cancel icons - black like MultiTenant, stacked vertically. */
#EventsIndex .rr-att-add-row .rr-att-add-save,
#EventsIndex .rr-att-add-row .rr-att-add-cancel,
#EventsIndex .rr-att-edit-save,
#EventsIndex .rr-att-edit-cancel {
    display: block;
    color: #333;
    cursor: pointer;
    margin: 6px auto;
}

    #EventsIndex .rr-att-add-row .rr-att-add-save:hover,
    #EventsIndex .rr-att-add-row .rr-att-add-cancel:hover,
    #EventsIndex .rr-att-edit-save:hover,
    #EventsIndex .rr-att-edit-cancel:hover {
        color: #000;
    }

/* Inline add-row controls - override the global input/select rules so the service-type
   dropdown and file input render as normal full-width Bootstrap form controls. */
#EventsIndex .rr-att-add-row .rr-att-servicetype,
#EventsIndex .rr-att-add-row .rr-att-file,
#EventsIndex .rr-att-row .rr-att-edit-input {
    width: 100%;
    max-width: none;
    font-size: 0.85rem;
    margin: 0 0 6px 0;
    padding: 4px 8px;
    height: auto;
    vertical-align: middle;
    line-height: 1.4;
}

#EventsIndex .rr-att-add-row .rr-att-file {
    margin-bottom: 0;
    cursor: pointer;
}

input.rr-att-file {
    height: 1px !important;
}

.rr-att-file::file-selector-button {
    background-color: #007bff !important;
    color: #fff !important;
    border: 1px solid #007bff;
}

.rr-att-file:hover::file-selector-button {
    background-color: #0056b3 !important;
}

/* File-name link, uploader name and malware warning in the Name cell. */
#EventsIndex a.rr-att-view {
    color: cornflowerblue;
    cursor: pointer;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
    display: inline-block;
}

#EventsIndex .rr-att-username {
    font-size: smaller;
    font-style: italic;
}

#EventsIndex .rr-att-malware {
    font-size: smaller;
    font-style: italic;
    color: #856404;
}

/* Attachment lazy-load row: increase contrast/size so the loading state is noticeable. */
#EventsIndex .rr-att-loading-cell {
    color: #1f3f67;
    font-size: 0.95rem;
    font-weight: 600;
    background-color: #f2f7ff;
}

#EventsIndex .rr-att-loading-icon {
    color: #0078d7;
    font-size: 1.1rem;
    margin-right: 8px;
}

/* Patient-alerts link next to the patient name - ported verbatim from the MultiTenant
   <patient-alerts> directive style block (patient-alerts.html). */
.alertsLinkDiv {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Keep the patient name and the patient-alerts link on the same line, vertically centred.
   The h3.event-title carries default heading margins that push the link out of line; zero
   them and center both children so the badge sits next to the name (matches MultiTenant). */
#EventsIndex .rr-patient-header {
    align-items: center;
}

    #EventsIndex .rr-patient-header .event-title {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Patient Cases card keeps the default (large) <h4> name; only zero its heading margins so it
   stays vertically aligned with the patient-alerts badge (does NOT shrink the font like event-title). */
    #EventsIndex .rr-patient-header h4 {
        margin-top: 0;
        margin-bottom: 0;
        /* Allow a long name to wrap onto the next line instead of overflowing. In a flex row the
       item defaults to min-width:auto (won't shrink below its content), so it must be zeroed. */
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #EventsIndex .rr-patient-header .alertsLinkDiv {
        margin-bottom: 0;
        /* Keep the badge intact when the name wraps. */
        flex-shrink: 0;
    }

/* First header row: vertically centre the whole row so the specialist-responded date (small plain
   text) sits in line with the patient name (large h4) instead of at the top of the row. Bootstrap 5
   .row is display:flex and top-aligns items by default, which is what made the date appear "up". */
#EventsIndex .event-header > .row:first-child {
    align-items: center;
}

/* Send SMS dialog (Patient Cases card) - ported from MultiTenant SendSmsDialog.cshtml styles so the
   dialog looks identical (bold left-aligned block labels, greyed readonly inputs, the exact info/
   warning banner colours, and a tall message box). Scoped to #sendSmsModal. */
#sendSmsModal .modal-body.sms-dialog-container {
    padding: 20px;
    text-align: left;
}

#sendSmsModal .sms-dialog-container .form-group {
    margin-bottom: 15px;
}

#sendSmsModal .sms-dialog-container label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

#sendSmsModal .sms-dialog-container input[type="text"],
#sendSmsModal .sms-dialog-container textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Readonly fields (Referral ID + Mobile Number) are visibly greyed out, matching MultiTenant. */
#sendSmsModal .sms-dialog-container input[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

#sendSmsModal .sms-message-input {
    min-height: 150px;
    resize: vertical;
}

#sendSmsModal .char-count {
    text-align: right;
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

/* Shared info banner used by all dialogs (History, Manage, Comm History, etc.). Individual
   modals may override with a different colour (e.g. #sendSmsModal below). */
.info-message {
    color: #004578;
    background-color: #deecf9;
    border: 1px solid #c7e0f4;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

#sendSmsModal .info-message {
    color: #31708f;
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

#sendSmsModal .warning-message {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Communication History dialog (Patient Cases card) - ported from MultiTenant comm-history styles so
   the tabbed dialog + preview overlay look identical. Scoped to #commHistoryModal (except the preview
   overlay which is position:fixed and covers the viewport above the modal). */
#commHistoryModal .modal-content {
    overflow: hidden;
}

/* Communication History modal at ~90% width (xl), matching the MultiTenant xl dialog feel. */
#commHistoryModal .modal-dialog {
    max-width: 90%;
}

/* Shared blue header for the Patient Cases card-action popups (Send SMS, Communication History, and
   future ones) so every button-click dialog has a consistent coloured header. */
.case-modal-header {
    background-color: #0078d4;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .case-modal-header .case-modal-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #fff;
    }

.case-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.8;
}

    .case-modal-close:hover {
        opacity: 1;
    }

/* Clip the coloured header to the modal's rounded corners. */
#sendSmsModal .modal-content {
    overflow: hidden;
}

#commHistoryModal .comm-history-body {
    padding: 20px;
    /* Let the tabbed content scroll below the modal header. */
    max-height: 80vh;
    overflow-y: auto;
}

#commHistoryModal .button-container {
    text-align: right;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

#commHistoryModal .comm-tab-buttons {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}

#commHistoryModal .comm-tab-btn {
    padding: 10px 24px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

    #commHistoryModal .comm-tab-btn:hover {
        color: #0078d4;
    }

    #commHistoryModal .comm-tab-btn.active {
        color: #0078d4;
        border-bottom-color: #0078d4;
    }

#commHistoryModal .comm-placeholder {
    padding: 30px;
    text-align: center;
}

/* Sent/Failed status pill in the grid (solid green/red, matching MultiTenant comm-status-badge). */
#commHistoryModal .comm-status-badge {
    padding: 6px 10px;
    border-radius: 20px;
    min-width: 80px;
    font-size: 11px;
    color: #fff;
    display: inline-block;
    text-align: center;
}

#commHistoryModal .comm-status-sent {
    background-color: #5cb85c;
}

#commHistoryModal .comm-status-failed {
    background-color: #d9534f;
}

/* Scheduled-tab State pill (colour set inline per state via queryCellInfo, matching MultiTenant). */
#commHistoryModal .comm-state-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 20px;
    min-width: 90px;
    font-size: 11px;
    color: #fff;
    text-align: center;
}

/* Grid "View" button (eye icon + text), matching MultiTenant comm-preview-btn. */
#commHistoryModal .comm-preview-btn {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.5;
}

/* Type / Status badges in the preview panel (matching MultiTenant comm-preview-badge). */
.comm-preview-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

    .comm-preview-badge.badge-sms {
        background-color: #0078d4;
    }

    .comm-preview-badge.badge-email {
        background-color: #2b88d8;
    }

    .comm-preview-badge.badge-sent {
        background-color: #5cb85c;
    }

    .comm-preview-badge.badge-failed {
        background-color: #d9534f;
    }

/* Docmail file tags + "show more" (ported verbatim from MultiTenant). */
.comm-file-tag {
    display: inline-block;
    background: #e8f0fe;
    color: #1a73e8;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin: 2px 0;
    white-space: nowrap;
}

.comm-file-more-btn {
    display: inline-block;
    background: #f0ad4e;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    line-height: 22px;
    text-align: center;
    padding: 0;
    vertical-align: middle;
}

    .comm-file-more-btn:hover {
        background: #ec971f;
    }

.comm-file-cell {
    line-height: 1.8;
}

.comm-file-link {
    text-decoration: none;
    cursor: pointer;
}

    .comm-file-link:hover {
        background: #c6dcf7;
        text-decoration: underline;
    }

/* Non-Patient tab: recipient-type badge + files cell (ported from MultiTenant). */
.comm-recipient-badge {
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    display: inline-block;
}

.comm-nonpatient-files {
    line-height: 1.8;
}

/* Patient Episode History dialog (History button) - plain HTML table (not Syncfusion). */
#historyModal .modal-content {
    overflow: hidden;
}

/* Match the Communication History modal width (~90%, wider than the default xl dialog). */
#historyModal .modal-dialog {
    max-width: 90%;
}

/* Patient Correspondence dialog (Correspondences button) - size + tabs match the History / Comm History popups. */
#correspondenceModal .modal-content {
    overflow: hidden;
}

#correspondenceModal .modal-dialog {
    max-width: 90%;
}

.corr-body {
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

.corr-tab-buttons {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #e5e5e5;
    /* Keep the tabs pinned to the top of the scrolling modal body so a long tab panel
       (e.g. a big investigation list) never scrolls them out of view. */
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}

    .corr-tab-buttons .corr-tab-btn {
        padding: 10px 24px;
        border: none;
        background: none;
        font-size: 14px;
        font-weight: 600;
        color: #666;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        transition: color 0.2s, border-color 0.2s;
    }

        .corr-tab-buttons .corr-tab-btn:hover {
            color: #0078d4;
        }

        .corr-tab-buttons .corr-tab-btn.active {
            color: #0078d4;
            border-bottom-color: #0078d4;
        }

/* Investigation type selector rendered as tabs. Matches MultiTenant's look: solid dark-blue
   buttons, the active one highlighted. The one-active / others-hidden behaviour is wired via
   checkFocus() + the .active class toggled in referralInvestigation.js. */
.investigation-buttons ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 15px 0;
    padding: 0;
    list-style: none;
}

    .investigation-buttons ul li {
        display: inline-block;
        margin-bottom: 0;
    }

        .investigation-buttons ul li a {
            display: inline-block;
            padding: 10px 10px;
            border: 1px solid #16277a;
            border-radius: 4px;
            background-color: #16277a;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.2s ease-in, color 0.2s ease-in;
        }

            .investigation-buttons ul li a:hover {
                background-color: #0f1c5c;
                color: #fff;
            }

            .investigation-buttons ul li a.active {
                background-color: #0f1c5c;
                border-color: #0f1c5c;
                color: #fff;
                box-shadow: 0 3px 0 #42C964;
            }

/* Manage Referral dialog (Manage button) - size + header match the History popup. */
#manageModal .modal-content {
    overflow: hidden;
}

#manageModal .modal-dialog {
    max-width: 90%;
}

/* Investigation Summary dialog (Investigation Summary button) - size + header match the History popup. */
#investigationSummaryModal .modal-content {
    overflow: hidden;
}

#investigationSummaryModal .modal-dialog {
    max-width: 90%;
}

.investigation-summary-body {
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

/* Investigation Summary in-cell editors (SuperAdmin native inline edit). */
.inv-e-dates .inv-e-sublabel {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 4px 0 2px;
}

.inv-e-dates .form-control {
    margin-bottom: 2px;
}

.inv-e-dates .inv-e-toggle {
    display: inline-block;
    margin: 6px 0 2px;
    font-size: 0.8rem;
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
}

    .inv-e-dates .inv-e-toggle:hover {
        text-decoration: underline;
    }

.investigation-summary-body .inv-edit-error {
    display: block;
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Investigation Summary tab bar (mirrors MultiTenant InvestigationsFormDialog). Sticky so the tabs stay
   visible while scrolling the (potentially long) questions list. Negative margins cancel the body
   padding so the sticky bar spans the full width and pins flush to the top. */
.inv-summary-tabs {
    margin: -20px -20px 12px -20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 2px solid #dee2e6;
    padding: 12px 20px 8px 20px;
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

    .inv-summary-tabs .inv-tab-btn {
        border: 1px solid #dee2e6;
        background-color: #f8f9fa;
        color: #333;
        border-radius: 4px 4px 0 0;
        padding: 6px 14px;
        font-size: 0.9rem;
        cursor: pointer;
    }

        .inv-summary-tabs .inv-tab-btn:hover {
            background-color: #e9ecef;
        }

        .inv-summary-tabs .inv-tab-btn.active {
            background-color: #3189d4;
            border-color: #3189d4;
            color: #fff;
        }

.inv-order-list {
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
}

.inv-order-item {
    padding: 4px 0;
}

    .inv-order-item label {
        width: auto;
        font-weight: normal;
        cursor: default;
    }

.inv-order-subtype {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Investigation ordering-tab questions (B2/B3). */
.inv-q-group {
    margin: 6px 0 10px 24px;
    padding: 8px 12px;
    /*border-left: 3px solid #dee2e6;
    background-color: #fbfbfc;*/
}

.inv-q-section {
    margin: 14px 0;
    padding-left: 5%;
}

/* Bootstrap 5 class collision fix: the investigation-type panels use class="modal-dialog dynamicModal"
   but they are NOT Bootstrap modals. Bootstrap 5 styles .modal-dialog with pointer-events:none, auto
   margins and flex sizing, which disables the checkboxes/textareas inside the panels and breaks the
   layout (content appears missing / unclickable). MultiTenant's Investigations.css treated .modal-dialog
   as a plain block (display:none; box-sizing:border-box), so scope those rules back inside the
   investigation section. checkFocus()/jQuery .show() toggle visibility, so keep the default hidden. */
.investigation-tab-section .modal-dialog {
    display: none;
    box-sizing: border-box;
    margin: 0;
    width: auto;
    max-width: none;
    pointer-events: auto;
    align-items: initial;
    min-height: 0;
}

    .investigation-tab-section .modal-dialog .modal-dialog-header {
        padding: 20px;
        background-color: #eee;
        border-bottom: 1px solid #ccc;
    }

/* Investigation sub-type accordion headings (Biochemistry, Haematology, Immunology, ...).
   Mirrors MultiTenant Investigations.css ".investigation-section h3.heading" but rendered as the
   white card + chevron used on the current screen. The chevron is drawn with FontAwesome 6
   (App2 uses FA 6.5.1; MultiTenant's "font-family: FontAwesome" is FA4 and would not render).
   Clicking the heading slides the matching .subSection open/closed (referralInvestigation.js),
   which also toggles the .expanded class handled below. Scoped with .investigation-tab-section so
   it out-specifies the grey ".modal-dialog .modal-dialog-header" rule (the heading also carries
   the modal-dialog-header class). */
.investigation-tab-section .investigation-section h3.heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    margin: 0 0 10px 0;
    padding: 10px 10px;
    background-color: #f0f8ff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    border-bottom: 1px solid #dee2e6;
}

    .investigation-tab-section .investigation-section h3.heading:hover {
        background-color: #f8f9fa;
    }

    .investigation-tab-section .investigation-section h3.heading::after {
        font-family: 'Font Awesome 6 Pro';
        font-weight: 900;
        content: "\f078"; /* chevron-down */
        margin-left: 12px;
        font-size: 13px;
        color: #6c757d;
        transition: transform 0.2s ease-in;
    }

    .investigation-tab-section .investigation-section h3.heading.expanded::after {
        content: "\f077"; /* chevron-up */
    }

/* Hides the whole "Questions related to X" block (incl. the h2) until an investigation is selected.
   Mirrors MultiTenant InvestigationsFormDialog.cshtml .invQDisplay { display: none; }. */
.invQDisplay {
    display: none;
}

/* Section heading ("Questions related to X") - blue, mirrors MultiTenant .custom-h2 + investigation-section h3. */
.investigation-section .custom-h2 {
    color: #337ab7;
    font-weight: 700;
    font-size: 15px;
    margin: 10px 0;
}

/* Group heading (groupByHeading key) - black, same size/weight as MultiTenant investigation-section h3. */
.inv-q-group-heading {
    color: #000;
    font-weight: 700;
    font-size: 15px;
    margin: 8px 0;
}

.inv-q-subheading {
    font-weight: 600;
    font-size: 0.85rem;
    margin: 6px 0 3px;
}

/* Investigation-level questions are indented under their investigation (MultiTenant padding-left:5%). */
.inv-q-group {
    padding-left: 5%;
}

.inv-q {
    padding: 4px 0;
}

    .inv-q label {
        width: auto;
        font-weight: normal;
        margin-bottom: 2px;
    }

/* Checkbox + text wrapper (investigation checkboxes and Bool questions). Not a <label>, so the global
   "label { width: 30% }" rule does not apply; checkbox and text sit inline with a small gap. */
.inv-check-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
    width: auto;
}

    .inv-check-wrap input[type="checkbox"] {
        flex: 0 0 auto;
        margin: 0;
    }

    .inv-check-wrap .inv-check-text {
        line-height: 1.3;
    }

/* Text question: label above a full-width textarea, clearly separated. */
.inv-q-text {
    margin-bottom: 8px;
}

    .inv-q-text .inv-q-text-label {
        display: block;
        width: auto;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .inv-q-text textarea {
        width: 100%;
        min-height: 60px;
    }

/* Investigation ordering tabs: two-column layout + sub-type grouping (mirrors MultiTenant
   _ReferralInvestigationDetailNew .investigation-section / .column-half). */
.investigation-section .row {
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

    .investigation-section .row .column-half {
        padding-left: 10px;
        padding-right: 10px;
        width: 50%;
        float: left;
        box-sizing: border-box;
        min-height: 50px;
    }

    .investigation-section .row::after {
        content: "";
        display: table;
        clear: both;
    }

.inv-subtype-heading {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 10px 0;
    color: #337ab7;
}

.investigation-section .inv-order-list {
    margin: 0;
    padding: 0;
}

.investigation-section .inv-order-item {
    margin-bottom: 6px;
}

/* SweetAlert2 input label - override the global "label { width: 30% }" rule so the prompt label
   (e.g. the mandatory-comment prompt) renders on one line instead of wrapping. */
label.swal2-input-label {
    width: 100% !important;
}

.case-manage-body {
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

/* Tab bar matches the Communication History dialog (.comm-tab-*). */
#manageModal .manage-tab-buttons {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #e5e5e5;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}

#manageModal .manage-tab-btn {
    padding: 10px 24px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

    #manageModal .manage-tab-btn:hover {
        color: #0078d4;
    }

    #manageModal .manage-tab-btn.active {
        color: #0078d4;
        border-bottom-color: #0078d4;
    }

.case-history-body {
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

.case-history-comments-label {
    margin: 12px 0 6px;
}

/* Filter box (mirrors the MultiTenant crud grid filter). */
.case-history-filter {
    margin-bottom: 10px;
}

.case-history-filter-clear {
    cursor: pointer;
}

/* Table colours: Bootstrap table-striped/table-bordered/table-hover provide the striping, borders and
   hover; these rules add the MultiTenant header shading and sortable-header affordance. */
.case-history-table {
    width: 100%;
    font-size: 13px;
}

    .case-history-table thead th {
        background-color: #f5f5f5;
        white-space: nowrap;
        vertical-align: middle;
    }

    .case-history-table tbody td {
        vertical-align: top;
    }

.case-history-sort {
    cursor: pointer;
    user-select: none;
}

.case-history-sort-icon {
    color: #999;
    font-size: 11px;
    margin-left: 4px;
}

.case-history-empty {
    text-align: center;
    color: #888;
    padding: 20px 10px;
}

/* SuperAdmin editable ReferralComment (History dialog) - Save action column + inline RichTextEditor. */
.case-history-action-col {
    width: 60px;
    white-space: nowrap;
}

.case-history-save-btn {
    color: #337ab7;
    border: none;
    background: transparent;
    padding: 2px 6px;
}

    .case-history-save-btn:hover {
        color: #23527c;
    }

/* Non-editable row indicator (generated "Additional specialty" rows) - info icon with a tooltip
   explaining why no Save button is shown. */
.case-history-noedit {
    cursor: help;
}

/* Editable Comment cell editor - lightweight contenteditable WYSIWYG mirroring MultiTenant's
   text-angular (toolbar + bordered editing box), constrained to 350px (style="max-width:350px"). */
.case-history-comment-editor {
    max-width: 350px;
}

    .case-history-comment-editor .ta-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px;
        border: 1px solid #ccc;
        border-bottom: none;
        border-radius: 3px 3px 0 0;
        background: #f5f5f5;
    }

    .case-history-comment-editor .ta-group {
        display: inline-flex;
        gap: 2px;
        margin-right: 6px;
    }

    .case-history-comment-editor .ta-btn {
        border: 1px solid #ccc;
        background: #fff;
        color: #333;
        font-size: 12px;
        line-height: 1;
        padding: 4px 7px;
        border-radius: 3px;
        cursor: pointer;
    }

        .case-history-comment-editor .ta-btn:hover {
            background: #e6e6e6;
        }

        .case-history-comment-editor .ta-btn.active {
            background: #d5d5d5;
            border-color: #adadad;
        }

    .case-history-comment-editor .ta-content {
        min-height: 90px;
        max-height: 220px;
        overflow-y: auto;
        padding: 6px 8px;
        border: 1px solid #ccc;
        border-radius: 0 0 3px 3px;
        background: #fff;
        font-size: 13px;
    }

        .case-history-comment-editor .ta-content:focus {
            outline: none;
            border-color: #66afe9;
        }

    .case-history-comment-editor .ta-html {
        width: 100%;
        min-height: 90px;
        max-height: 220px;
        padding: 6px 8px;
        border: 1px solid #ccc;
        border-radius: 0 0 3px 3px;
        font-family: monospace;
        font-size: 12px;
    }

/* Message preview overlay (position:fixed so it covers the viewport above the Bootstrap modal). */
.comm-preview-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10600;
    justify-content: center;
    align-items: center;
}

    .comm-preview-overlay.active {
        display: flex;
    }

.comm-preview-panel {
    background: #fff;
    border-radius: 6px;
    width: 1100px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}

.comm-preview-header {
    background-color: #0078d4;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px 6px 0 0;
}

    .comm-preview-header h4 {
        margin: 0;
        font-size: 16px;
        color: #fff;
    }

.comm-preview-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    opacity: 0.8;
}

    .comm-preview-close:hover {
        opacity: 1;
    }

.comm-preview-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.comm-preview-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e5e5;
    text-align: right;
}

.comm-preview-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    margin-bottom: 18px;
}

/* Preview detail rows (label above value), ported verbatim from MultiTenant. */
.comm-preview-body .detail-row {
    margin-bottom: 14px;
}

.comm-preview-body .detail-label {
    font-weight: 600;
    color: #004578;
    margin-bottom: 3px;
    font-size: 12px;
    text-transform: uppercase;
}

.comm-preview-body .detail-value {
    color: #333;
    word-wrap: break-word;
}

    .comm-preview-body .detail-value.body-content {
        background: #f9f9f9;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 12px;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: auto;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

        .comm-preview-body .detail-value.body-content img {
            max-width: 100%;
            height: auto !important;
        }

        .comm-preview-body .detail-value.body-content table {
            max-width: 100% !important;
            width: auto !important;
            table-layout: fixed;
        }

        .comm-preview-body .detail-value.body-content * {
            max-width: 100% !important;
            box-sizing: border-box;
        }

/* Bootstrap 5's .row is display:flex, so text-align:right no longer right-aligns the bare
   "No referrals found" text node (MultiTenant's Bootstrap 3 .row was not flex). Push the
   anonymous flex item to the end so it renders on the right like MultiTenant. */
#caseResults .row.text-right {
    justify-content: flex-end;
}

/* Per-referral Tasks grid (Patient Cases cards). Closed/completed rows are greyed to match
   MultiTenant's `.table-striped tbody tr.lightgrey` (no action button is shown for them). */
#caseResults .referral-task-grid .e-row.lightgrey td.e-rowcell {
    background-color: #d3d3d3 !important;
}

#caseResults .referral-task-grid .e-row.lightgrey:hover td.e-rowcell {
    background-color: #c0c0c0 !important;
}

#caseResults .no-tasks-message {
    padding: 8px 0;
    font-style: italic;
    color: #555;
}

#caseResults .no-comments-message {
    padding: 8px 0;
    font-style: italic;
    color: #555;
}

.loading-text {
    font-size: large;
    color: #0078d7;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-left: 5px !important;
}

.loading-dots::after {
    content: '';
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% {
        content: '';
    }

    40% {
        content: '.';
    }

    60% {
        content: '..';
    }

    80%, 100% {
        content: '...';
    }
}

.patient-alerts-link {
    font-size: large;
}

    .patient-alerts-link i {
        margin-right: 6px;
    }

/* Active/inactive state colours. Use a higher-specificity selector (element + two classes) so
   these always beat the later `.patient-alerts-link { color: #d32f2f !important }` rule ported
   from MultiTenant Site.css; otherwise the link would always render red regardless of state. */
a.patient-alerts-link.active-alert {
    color: #FF4C4C !important;
}

a.patient-alerts-link.inactive-alert {
    color: blue !important;
}

/* "Total cases to be actioned" heading - larger/bolder to match MultiTenant. */
#EventsIndex .statistics-list > h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 10px;
}

/* Space between the attachments row and the Accept/Reject buttons (MultiTenant). */
#EventsIndex .rr-cta-row {
    margin-top: 20px;
}

/* Raised buttons (Accept/Reject) - ported from MultiTenant Content/Site.css .btn-raised. */
.btn-raised {
    padding: 10px 20px !important;
    font-size: 14px !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2) !important;
}

/* Accept button: grey when disabled, original blue when enabled. */
.btn-info.btn-raised.rr-accept:disabled,
.btn-info.btn-raised.rr-accept[disabled] {
    background-color: #9e9e9e !important;
    border-color: #9e9e9e !important;
    color: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Case Action "Showing X of total Y" count line - small, right aligned (MultiTenant). */
#EventsIndex .rr-showing-count {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 6px;
}

/* SHOW MORE button - full width like MultiTenant btn-block. */
#EventsIndex #showMoreButton {
    width: 100%;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
}

    #EventsIndex #showMoreButton:hover {
        background-color: #e9ecef;
    }



.menu-header {
    background-color: var(--primary-blue-table) !important;
}

.menu-heading {
    /*padding: 10px 20px;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}


.menu-heading-center {
    display: flex;
    justify-content: end;
    flex: 2;
    gap: 20px;
}

    .menu-heading-center a {
        background-color: #2E58EF !important;
        border: 1px solid white !important;
        border-radius: 3px !important;
        color: white !important;
        padding: 10px 20px !important;
        text-decoration: none !important;
        display: inline-block !important;
        text-align: center !important;
        font-size: 14px !important;
        margin: unset !important;
        margin-right: 10px !important;
    }

        .menu-heading-center a:hover {
            background-color: #2E58EF !important;
            border-color: black !important;
            cursor: pointer !important;
            border-radius: 3px !important;
            color: white !important;
            padding: 10px 20px !important;
            text-decoration: none !important;
            display: inline-block !important;
            text-align: center !important;
        }

html, body {
    background-color: var(--white) !important;
}

.metro-scope .icon {
    color: white;
}

.metro-scope .branding-bar {
    font-weight: bold !important;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.form-control {
    height: 43px !important;
}

.ui-select-match .btn-default {
    background-color: var(--white) !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
}

.ui-select-match .caret {
    color: var(--black) !important;
}

.ui-select-match-text {
    color: var(--black);
}

.ui-select-choices-row {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

    .ui-select-choices-row span {
        display: block !important;
        max-width: 450px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .ui-select-choices-row:hover {
        background-color: #cccccc !important;
        color: black !important;
    }

.ui-select-choices-row-inner:hover {
    background-color: #cccccc !important;
}

.ui-select-choices-row.active {
    background-color: #428bca !important;
    color: white !important;
}


.sweet-alert.release-referral {
    font-family: "Open Sans", Verdana, Helvetica, Sans-Serif !important;
    padding: 30px !important;
    width: 510px !important;
}

    .sweet-alert.release-referral h2 {
        color: #575757;
        font-size: 20px;
        text-align: left;
        font-weight: 600;
        text-transform: none;
        position: relative;
        margin: 0px !important;
        padding: 0px !important;
        line-height: 25px;
        display: block;
    }

    .sweet-alert.release-referral p {
        color: #575757 !important;
        text-align: left !important;
        margin-bottom: 30px !important;
        margin-top: 30px !important;
    }

    .sweet-alert.release-referral .confirm {
        float: right !important;
        background-color: #0e7da2 !important;
        color: #fff !important;
        border: 2px solid #0e7da2 !important;
    }

    .sweet-alert.release-referral .cancel {
        float: left !important;
        color: #0e7da2 !important;
        border: 2px solid #0e7da2 !important;
        background-color: #fff !important;
    }

.referral-tooltip {
    position: relative;
    display: inline-block;
    width: 100px;
    cursor: pointer;
}

    .referral-tooltip .tooltiptext {
        visibility: hidden;
        max-width: 200px;
        width: -moz-max-content;
        width: -webkit-max-content;
        width: -o-max-content;
        width: max-content;
        background-color: #22275b;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 5;
        word-break: break-word;
        top: 40px;
        left: 10px;
        margin-top: -10px;
    }

    .referral-tooltip:hover .tooltiptext {
        visibility: visible;
    }

    .referral-tooltip .response-txt {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#consultantText {
    overflow-wrap: break-word;
    word-break: normal;
}


body.loading {
    position: relative;
    opacity: 0.8;
}

    body.loading::after {
        content: "Loading...";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px 20px;
        background: #333;
        color: white;
        border-radius: 4px;
        z-index: 9999;
    }

.wide-mode {
    max-width: 90% !important;
    /*width: 90% !important;*/
    transition: max-width 0.3s ease;
}



.e-grid .deactivated-row {
    background-color: #f2f2f2 !important;
    color: #999 !important;
}

/* Disabled command buttons */
.e-grid .disabled-action-btn {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Optional: subtle hover effect for active rows only */
.e-grid tr:not(.deactivated-row):hover {
    background-color: #eef6ff !important;
}

/* Optional: make readonly cells look different */
.e-grid .readonly-cell {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    cursor: not-allowed;
}

/* Hide filter icons from header */
.e-grid .e-filtermenudiv,
.e-grid .e-filterbarcell {
    display: none !important;
}

/* Remove extra space from header caused by hidden icons */
.e-grid .e-headercelldiv {
    padding-right: 8px !important;
}
/* Remove hover, selection, and focus for ALL rows EXCEPT deactivated ones */
body .e-grid .e-content .e-row:not(.deactivated-row):hover,
body .e-grid .e-content .e-row:not(.deactivated-row).e-hover,
body .e-grid .e-content .e-row:not(.deactivated-row).e-selectionbackground,
body .e-grid .e-content .e-row:not(.deactivated-row):hover td,
body .e-grid .e-content .e-row:not(.deactivated-row).e-hover td,
body .e-grid .e-content .e-row:not(.deactivated-row).e-selectionbackground td {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    cursor: default !important;
}

/* Keep deactivated rows as they are — untouched */
body .e-grid .e-content .e-row.deactivated-row:hover,
body .e-grid .e-content .e-row.deactivated-row.e-hover {
    /* No override here — allow existing disabled-row styling */
}


.custom-blue-dialog.e-dialog .e-dlg-content {
    background-color: transparent !important;
    color: rgb(255, 255, 255) !important;
}

.custom-blue-dialog.e-dialog .e-dlg-header {
    background-color: var(--primaryBlues) !important;
    color: rgb(255, 255, 255) !important;
}

/* Center the header text */
.custom-blue-dialog .e-dlg-header-content {
    justify-content: center !important; /* centers the text horizontally */
    text-align: center !important;
    position: relative;
}

    /* Keep the close (X) icon on the right */
    .custom-blue-dialog .e-dlg-header-content .e-dlg-closeicon-btn {
        position: absolute;
        right: 10px;
    }

        /* Nudge the close (X) glyph down 1px — patient-alert dialog only */
        .custom-blue-dialog .e-dlg-header-content .e-dlg-closeicon-btn .e-btn-icon.e-icon-dlg-close.e-icons {
            position: relative;
            top: 1px;
        }

/* Optional - remove header bottom border for cleaner look */
.custom-blue-dialog .e-dlg-header {
    border-bottom: none !important;
}


.patient-alerts-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #d32f2f !important;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    /*    font-family: Arial, sans-serif;
    font-size: 14px;*/
    transition: all 0.2s ease;
}

/* Dialog content layout */
.deactivate-dialog-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 4px;
}

/* Label styling */
.deactivation-label {
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
}


/* Textarea styling */
#deactivationReason {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    font-size: 14px;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

    #deactivationReason:focus {
        border-color: var(--primaryBlues, #0078d4);
        box-shadow: 0 0 3px rgba(0, 120, 212, 0.3);
    }

/* Character counter */
.char-counter {
    text-align: right;
    font-size: 12px;
    color: #666;
}

/* Disabled confirm button */
.e-btn.confirm-deactivate-btn.e-disabled,
.confirm-deactivate-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.hide-action-btn {
    display: none !important;
}

.e-grid .e-emptyrow td {
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 17px;
    color: #666;
    font-style: italic;
    background-color: #f9f9f9;
}

/* Communication History Partial Styles */
.comm-history-container {
    padding: 0;
}

.comm-history-header {
    background-color: #0078d4;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .comm-history-header h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #fff;
    }

    .comm-history-header .comm-dialog-close {
        background: none;
        border: none;
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        line-height: 1;
        padding: 0 4px;
        opacity: 0.8;
    }

        .comm-history-header .comm-dialog-close:hover {
            opacity: 1;
        }

.comm-history-body {
    padding: 20px;
    max-height: 100vh;
    overflow-y: auto;
}

.comm-history-container .button-container {
    text-align: right;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.comm-tab-buttons {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #e5e5e5;
}

    .comm-tab-buttons .comm-tab-btn {
        padding: 10px 24px;
        border: none;
        background: none;
        font-size: 14px;
        font-weight: 600;
        color: #666;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        transition: color 0.2s, border-color 0.2s;
    }

        .comm-tab-buttons .comm-tab-btn:hover {
            color: #0078d4;
        }

        .comm-tab-buttons .comm-tab-btn.active {
            color: #0078d4;
            border-bottom-color: #0078d4;
        }

.comm-preview-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10600;
    justify-content: center;
    align-items: center;
}

    .comm-preview-overlay.active {
        display: flex;
    }

.comm-preview-panel {
    background: #fff;
    border-radius: 6px;
    width: 1100px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

.comm-preview-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    margin-bottom: 18px;
}

.comm-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: none;
    background: #0078d4;
    border-radius: 6px 6px 0 0;
    color: #fff;
}

    .comm-preview-header h4 {
        margin: 0;
        font-weight: 600;
        color: #fff;
    }

.comm-preview-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #fff;
    line-height: 1;
    padding: 0;
    opacity: 0.8;
}

    .comm-preview-close:hover {
        opacity: 1;
    }

.comm-preview-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

    .comm-preview-body .detail-row {
        margin-bottom: 14px;
    }

    .comm-preview-body .detail-label {
        font-weight: 600;
        color: #004578;
        margin-bottom: 3px;
        font-size: 12px;
        text-transform: uppercase;
    }

    .comm-preview-body .detail-value {
        color: #333;
        word-wrap: break-word;
    }

.comm-preview-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

    .comm-preview-badge.badge-sms {
        background-color: #0078d4;
    }

    .comm-preview-badge.badge-email {
        background-color: #2b88d8;
    }

    .comm-preview-badge.badge-sent {
        background-color: #5cb85c;
    }

    .comm-preview-badge.badge-failed {
        background-color: #d9534f;
    }

.comm-preview-body .detail-value.body-content {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

    .comm-preview-body .detail-value.body-content img {
        max-width: 100%;
        height: auto !important;
    }

    .comm-preview-body .detail-value.body-content table {
        max-width: 100% !important;
        width: auto !important;
        table-layout: fixed;
    }

    .comm-preview-body .detail-value.body-content * {
        max-width: 100% !important;
        box-sizing: border-box;
    }

.comm-preview-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e5e5;
    text-align: right;
}

#commHistoryGridScheduled .e-rowcell, #commHistoryGridSent .e-rowcell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#commHistoryGridScheduled .body-truncate, #commHistoryGridSent .body-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#commHistoryGridScheduled .e-gridcontent, #commHistoryGridSent .e-gridcontent {
    overflow-y: auto;
}

.comm-history-container .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

/* Communication History - File tag styles */
.comm-file-tag {
    display: inline-block;
    background: #e8f0fe;
    color: #1a73e8;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin: 2px 0;
    white-space: nowrap;
}

.comm-file-more-btn {
    display: inline-block;
    background: #f0ad4e;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    line-height: 22px;
    text-align: center;
    padding: 0;
    vertical-align: middle;
}

    .comm-file-more-btn:hover {
        background: #ec971f;
    }

.comm-file-cell {
    line-height: 1.8;
}

.comm-file-link {
    text-decoration: none;
    cursor: pointer;
}

    .comm-file-link:hover {
        background: #c6dcf7;
        text-decoration: underline;
    }

.site-banner {
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    z-index: 1000;
}

.site-banner-content {
    color: #ffffff;
    margin: 0 auto;
}

    .site-banner-content i {
        margin-right: 8px;
    }

.banner-warning {
    background-color: #d97706;
    border-bottom: 1px solid #ffc107;
    text-align: start;
}

.banner-info {
    background-color: #1d4ed8;
    border-bottom: 1px solid #b8daff;
    text-align: start;
}

.banner-label {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-label-warning {
    background-color: #e1943c;
}

.banner-label-info {
    background-color: #4e74e0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.state-pill {
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px; /* makes pill shape */
    display: inline-block;
    font-size: 0.85rem;
    text-align: center;
    min-width: 80px;
}

.state-success {
    background-color: #c8e6c9; /* light green */
    color: #2e7d32; /* dark green */
}

.state-failed {
    background-color: #f8d7da; /* light red */
    color: #d32f2f; /* dark red text */
}

.state-cancelled {
    background-color: #ffe0b2; /* light orange */
    color: #f57c00; /* dark orange */
}

.state-deleted {
    background-color: #e9ecef; /* light gray */
    color: #6c757d; /* medium gray text */
    border: 1px solid #dee2e6;
}

.state-succeeded {
    background-color: #c8e6c9; /* light green */
    color: #2e7d32; /* dark green */
}

.state-enqueued {
    background-color: #d1c4e9; /* light purple */
    color: #512da8; /* dark purple text */
}

.state-scheduled {
    background-color: #bbdefb; /* light blue */
    color: #1565c0; /* dark blue */
}

.state-processing {
    background-color: #fff3cd; /* light yellow/orange */
    color: #ff9800; /* orange text */
}

.state-actioned {
    background-color: lightgray; /* light yellow/orange */
    color: darkgray; /* orange text */
}

.my-resources-btn {
    background-color: #abcef1;
    border-color: #abcef1;
}

    .my-resources-btn:hover {
        background-color: #abcef1;
        border-color: #abcef1;
        cursor: pointer;
    }

.home-btn {
    /*border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;*/
    background-color: #114a88;
    border-color: #114a88;
}

    .home-btn:hover {
        /* border-bottom-left-radius: 3px;
                border-top-left-radius: 3px;*/
        background-color: #114a88;
        border-color: #114a88;
        cursor: pointer;
    }


.best-browser-consent {
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: #ffffff;
    background-color: darkblue;
    padding: .6em 1.8em;
    z-index: 9999;
    display: none;
}

.info-text {
    font-family: Helvetica,Calibri,Arial,sans-serif;
    font-size: 15px;
    line-height: 1.5em;
    flex: 99 1 500px;
    text-align: left;
    margin: 6px 30px 5px 0;
    font-weight: bold;
    float: left;
}

.show-consent {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    padding: 15px;
}

.consent-btn {
    color: black !important;
    float: right;
    border: 1px;
    border-radius: 4px;
    font-size: 20px;
}

.logoutbtn {
    background-color: #2E58EF !important;
    border: 1px solid white !important;
    border-radius: 3px !important;
    color: white !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    font-size: 14px !important;
    margin: unset !important;
    margin-right: 10px !important;
}
/* If using the custom class approach, add this to your CSS file */
.border-custom-purple {
    border-color: var(--purple) !important;
}

/* Read-only / view-only form section (e.g. AdminME Establishment Details).
   Communicates "non-editable" without looking like a regular editable textbox. */
.readonly-section {
    background-color: #f5f6f8;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    padding: 12px 16px;
}

    .readonly-section legend {
        color: #6c757d;
    }

    .readonly-section .readonly-note {
        color: #6c757d;
        font-size: 0.85em;
        font-style: italic;
        margin: 0 0 10px;
    }

    .readonly-section input[readonly],
    .readonly-section select[disabled] {
        background-color: #eceef1;
        border: 1px solid #d6dae0;
        color: #495057;
        cursor: not-allowed;
        box-shadow: none;
    }

        .readonly-section input[readonly]:focus,
        .readonly-section select[disabled]:focus {
            outline: none;
            box-shadow: none;
            border-color: #d6dae0;
        }

.case-history-filter.input-group .input-group-text {
    margin-top: 5px !important;
    height: 43px !important;
}

#corrDocmailAttachmentsBody .rr-att-actions, #corrDocmailAttachmentsBody .rr-att-read-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.tox.tox-tinymce {
    border: 1px solid black;
}

.tox.tox-tinymce {
    height: 400px !important;
}

/* Custom Yes/No/Cancel confirmation popup used by functionConfirm() in
   specialist/respondReferral.js (ported from MultiTenant Views/Specialist/RespondReferral.cshtml).
   Hidden by default (display:none) and shown via .show()/.hide() in functionConfirm. Without this
   rule the #confirm markup renders inline all the time. Values copied exactly from MultiTenant. */
#confirm {
    display: none;
    background-color: #91FF00;
    border: 1px solid #aaa;
    position: fixed;
    width: 250px;
    left: 50%;
    margin-left: -100px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}

    #confirm button {
        background-color: #48E5DA;
        display: inline-block;
        border-radius: 5px;
        border: 1px solid #aaa;
        padding: 5px;
        text-align: center;
        width: 100px;
        cursor: pointer;
    }

    #confirm .message {
        text-align: left;
    }


.customerrorpanel {
    border: 1px solid red;
    background: #f7f5e3;
    text-align: center;
    padding: 10px;
    width: auto;
    max-width: 630px;
    display: flex;
    margin-left: 20%;
    margin-top: 2%;
}

    /*   .customerrorpanel ul {
        list-style-type: disc;
    }

        .customerrorpanel ul li {
            text-align: left !important;
        }*/
    .customerrorpanel ul {
        list-style: none;
        padding-left: 20px;
    }

        .customerrorpanel ul li {
            position: relative;
            padding-left: 24px;
            text-align: left !important;
        }

            .customerrorpanel ul li::before {
                content: "\f05a"; /* fa-circle-info */
                position: absolute;
                left: 0;
                color: mediumblue;
                font-family: "Font Awesome 6 Pro";
                font-size: 17px;
                font-weight: 600;
            }