:root {
    --vh: 100vh; /* Fallback for browsers that do not support env() */
    --vh: calc(var(--vh-safe-area-inset-bottom, 0px) + 100vh - env(safe-area-inset-bottom));
    --vh90: 90vh;
    --vh90: calc(var(--vh-safe-area-inset-bottom, 0px) + 90vh - env(safe-area-inset-bottom));

    --sans: "IBM Plex Sans", sans-serif;
    --mono: "IBM Plex Mono", monospace;

    --color-theme: #1B557C;
    --color-red: #cf0000;

    --bg-active: #dde1e5;
    --bg-hover: #cdcfd2;
    --bg-selected: #77a7a0;
    --bg-secondary: #f3f4f6;
    --bg-button-schedule-row: #f1f8fd;
    --bg-button-schedule-row-hover: #c2e1ff;
    --bg-button-is-access_restricted: #ffdc99; 
    --bg-button-is-soft-deleted: #ffc0c0;
    --bg-page-header: var(--color-theme);
    --bg-nav-quick: #E5E5E5;
    --bg-code: rgba(0,0,0,0.12);
    --bg-mobile-scroll: #D5E6FF;
    --bg-facility-unassigned: #fff679;
    --bg-button-add-extensible-block: #780098;
    --fg-button-add-extensible-block: #f9f9f9;

    --color-patient-note-text-core: #343434;
    --color-patient-note-text-core-self: #ffffff;
    --color-patient-note-text-author: #969595;
    --color-patient-note-text-author-self: #a6c1ff;
    --color-patient-note-text-date: #4c7d9d;
    --color-patient-note-text-self: #b9d5ff;

    --color-patient-note-bg: #daf3ff;
    --color-patient-note-bg-self: #f0e7ff;
    --color-patient-note-bg-template: #ffedbf;
    --color-patient-note-bg-editing: #ffbebe;

    --color-text-question: #367aa8;
    --color-text-info-text: #343434;
    
    --border-button: #a0a0a0;
    
    --bg-good-light: #c9ffb3;
    --bg-bad-light: #ffdbdb;

    --bg-table-header: #dfdede;
    --bg-table-header-calendar: #e6e6e6;
    --bg-table-header-calendar-today: rgb(33, 122, 40);
    --bg-table-header-calendar-weekend: rgb(232, 240, 253);;
    --bg-table-data: #fffee9;
    --bg-table-highlight: #eeff00;
    --bg-legend: #fffee0;
    --bg-side-button-active: var(--color-theme);

    --bg-schedule-button-unstarted: #8f8f8f;
    --bg-schedule-button-active: #ffae00;
    --bg-schedule-button-finalized: #00ac09;
    --bg-schedule-button-crd-data-exists: #268dbf;
    --bg-schedule-button-crd-data-null: #8f8f8f;

    --bg-crd-table-cell-heading: #82b0ff;
    --bg-crd-table-cell-data: #fffdec;
    --bg-crd-table-cell-data-divider: #666;

    --color-text-project-name: #00e070;
    --color-text-facility-light: #dddddd;
    --color-text-sid: #800080;
    --color-text-sid-light: #cf86cf;
    --color-text-username-self: #800080;

    --border-table: #c4c4c4;

    --text-button-schedule: #222;
    --text-button-disabled: #808080;
    --text-primary: black;
    --text-secondary: #909090;
    --text-header: #F7F7F7;
    --text-header-dim: #BBC9DA;
    --text-secondary-header: #666;
    --text-error: #ff0000;
    --text-code: #333;
    --text-disabled: #b8b8b8;

    --indent-context: 10px;
    --width-context-menu: 190px;
    --width-button-bar: 50px;

    --bg-clear: rgba(0, 0, 0, 0.0);
    --bg-obscure: rgba(0, 0, 0, 0.5);

    --font-code: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier,
        monospace;
    --font_size_default: 12pt;
    --font_size_small: 10pt;
}

body {
    margin: 0;
    font-family: var(--sans);
    background: var(--bg-secondary);
}
html,
body {
    height: var(--vh);
    width: 100%;
    margin: 0;
}
textarea {
    font-family: var(--sans);
}

button {
    padding: 0;
    font-size: 1em;
    color: var(--text-primary);
}
button:disabled {
    color: var(--text-button-disabled);
}
input {
    font-size: 12pt;
}
code {
    color: var(--text-code);
    background-color: var(--bg-code);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 2px 5px;
    font-family: var(--font-code);
    font-size: 75%;
    border: none;
    border-radius: 0;
}
h1, h2 {
    margin: 5px;
}
h1 {
    font-size: 19px;
}
h2 {
    font-size: 17px;
}


 /* ----------------------------------
 * GENERAL
 * ----------------------------------
 */
#upload-dropzone {
    border-radius: 10px;
    background: var(--bg-table-data);
    color: var(--text-secondary);
    padding: 10px 20px;
}
.button {
    font-family: system-ui, sans-serif;
    border: 0;
    background: var(--bg-active);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    margin-left: 0.5rem;
    white-space: nowrap;
}
.button.allow-wrap{
    white-space: unset;
}
.button-selected {
    background: var(--bg-selected);
}
button.button:hover:enabled {
    filter: brightness(0.8);
}
button.button:hover:disabled {
    cursor:default;
}
button.button-selected:hover {
    background: var(--bg-selected);
}
.button.unperformable {
    opacity: 0.4;
}
.checkbox-group input{
    width: 15px;
    height: 15px;
    padding: 0;
    margin: 0 10px 0 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
}
.checkbox-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 120px;
}
.event-checkbox-group {
    min-width: auto;
}
.event-checkbox-group label{
    min-width: auto;
}
#event-max-results {
    width: 90px;
    /* font-size: 12pt; */
}
#event-search-text {
    width: 300px;
}

.paint-canvas {
    border: 1px black solid;
    margin: 10px;
    display: flex;
    flex: 0 0 auto;
    cursor: crosshair;

    /* In practice height/width are
     * overwritten in js code.
     */
    height: 110px;
    width: 80px;
}
.user-info {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}

.upload-state {
    width: 1rem;
    height: 1rem;
    border: 1px var(--text-secondary) solid;
    border-radius: 0.5rem;
    margin-left: 0.5rem;
}
.container-row{
    display: flex;
    flex-flow: row;
}
.container-column{
    display: flex;
    flex-flow: column;
}
.box {
    display: flex;
    flex-flow: column;
    min-height: 0;
    min-width: 0;
}
.box.application {
    height: var(--vh);
    width: 100vw;
}
.box.directory {
    flex: 1 1 auto;
    padding: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
}

.directory-empty-text {
    color: #808080;
    font-style: italic;
}
.box .row.header {
    flex: 0 1 auto;
    color: var(--text-header);
    background-color: var(--bg-page-header);

    cursor: default;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
.box .row.header.breadcrumbs {
    background-image: none;
    background-color: #ccc;
}

.box .row.directory {
    flex: 0 1 auto;
    width: 100%;
    gap: 8px;
    padding: 6px;
}
.box .row.content {
    flex: 1 1 auto;
    padding: 0px;
}
.header .dim {
    color: var(--text-header-dim);
}
.canvases {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
}
.annotation-column {
    min-width: 131px;
}
.side-box {
    margin-right: 5px;
    margin-top: 5px;
    padding: 5px;
    border: 1px var(--text-secondary) solid;
    background-color: #f8f8f8;
    font-size: 10pt;
}
button {
    float: left;
    /* vertical-align: middle; */
}
button.admin-item{
    margin: 3px;
}
.error-text {
    color: var(--text-error);
}
.fa-lock {
    color: var(--text-header-dim);
    margin-left: 10px;
}
.non-standard-host-name {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    font-size: 12px;
    
    color: #ffbf00;

    margin-left: 8px;
}
.project-name {
    margin-left: 5px;
    color: var(--color-text-project-name);
}
.anchor--no-decorate,
.anchor--no-decorate:visited,
.anchor--no-decorate:hover,
.anchor--no-decorate:active {
    text-decoration: none;
    color: inherit; /* or specify a color */
    cursor: pointer;
}
.loginitem {
    margin: 7px;
    text-align: center;
}
.button-auth-login {
    margin-top: 10px;
}
#key {
    width: 850px;
}
#admin-message {
    width: 550px;
    margin: 0px 0px 0px 10px;
}
#admin-message-form {
    background-color: #00000010;
    padding: 10px;
    border: gray 1px solid;
    border-radius: 8px;
}
.generic-root {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    height: 100%;
    padding: 10px;
    overflow-y: auto;
}
table.generic-table{
    border-spacing: 0px;
    border-collapse: collapse;
    margin: 1rem;
}
.generic-table td, 
.generic-table th {
    border: 1px solid var(--border-table);
    padding: 2px 10px;
}
.generic-table th {
    background: var(--bg-table-header);
}
.generic-table td {
    background: var(--bg-table-data);
}
.generic-centered-text {
    text-align: center;
    margin: 0.5rem;
}
.generic-centered-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.5rem;
}
.warning-text {
    color: var(--color-red);
}
.generic-secondary-text {
    color: var(--text-secondary);
}
.generic-invisible {
    display: none;
}
.tb2 {
    background-color: orange;
    text-align: center;
    margin: 0.5rem;
    display: inline-block;
}
.title-block {
    /* background-color: orange; */
    text-align: center;
    margin: 0px;
}
.event-log tr td:first-child {
    /* Trick to enforce min-width */
    width: 1%;
    white-space: nowrap;
}
.empty-event-log {
    text-align: center;
    margin: 0.5rem;
    background-color: var(--bg-table-data);
    border: 1px solid var(--border-table);
    padding: 0.5rem;
}
.greeting-content {
    max-width: 800px;
}
.generic-table.center-all td{
    text-align: center;
}
.pii-header-text {
    color: #DC143C;
}

.dialog-fieldset {
    margin: 15px;
}

/* ----------------------------------
 * table button
 * ---------------------------------- */
 .table-button{
    margin: 5px 0px;
    padding: 3px 10px;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    color: black;
    background: var(--bg-active);
    min-width: 127px;
    min-height: 26px;

    border: 1px solid var(--border-button);
    box-sizing: border-box; 
}
.table-button:hover {
    filter: brightness(1.3);
}
.table-button.unresolved{
    background-color: var(--bg-bad-light);
}
.table-button.resolved{
    background-color: var(--bg-good-light);
}
.table-button.nid{
    font-weight: bold;
    color: var(--color-text-sid);
}
.vertical-button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ----------------------------------
State transition (st) dialog box
------------------------------------- */
#st-dialog-message{
    margin-bottom: 10px;
}
#st-warning-message{
    color: var(--color-red);
    margin-bottom: 10px;
}
#st-note{
    width: 500px;
    margin: 10px 0 10px 0;
}
.ui-widget-header {
    /* background-color: var(--color-text-sid) !important; */
    /* background-color: #4040ff !important; */
    background-color: var(--bg-page-header) !important;
    color: #ffffff !important;
}
.study-id-block{
    margin-top: -1px;
    vertical-align: middle;
}
.study-id-block:focus{
    /* Remove outline from radio buttons when focused */
    outline: none;
}
#dialog-ok-button {
    background-color: var(--bg-page-header);
    color: white;
}
#dialog-ok-button:hover {
    filter: brightness(1.3);   
}
/* ----------------------------------
Add NET Vue Patient dialog box
------------------------------------- */
.dialog-field-general-input {
    margin: 10px 0px;
}
.dialog-field-sex--disabled{
    color: var(--text-disabled);
}
.dialog-radio-button-container, .dialog-radio-button-container label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}
.dialog-radio-button-container label {
    gap: 5px;
}
#ap-birth-year {
    width: 100px;
}
#ap-age-when-treated {
    width: 100px;
}
#ap-birth-year.invalid, #ap-age-when-treated.invalid {
    background-color: pink;
}
.dialog__warning {
    color: var(--color-red);
    display: none;
    margin-left: 10px;
}
.dialog__warning.active {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 550px is the max width. Downsize if needed */
.ui-dialog {
    width: 550px !important;
}
@media screen and (max-width: 550px) {
    .ui-dialog {
        width: 90% !important;
        left: 4% !important;
    }
}

/* ----------------------------------
SCHEDULE (SOA) Table
------------------------------------- */
.schedule-root {
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column; */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}
.schedule-root .container-mobile-scroll {
    flex: 0 0 auto;
}

.schedule-root h2:not(:first-child) {
    margin-top: 20px;
}

table.table-schedule {
    border-spacing: 0px;
    border-collapse: collapse;
}

.table-schedule td {
    border: 1px solid var(--border-table);
    width: 10px;
}

.schedule-footer {
    color: #444;
}

th {
    color: #333;
}
.table-schedule th, .table-schedule td {
    /* No text selection in the SOA table */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
th.th-left {
    position: relative;
    background: var(--bg-table-header);
    border: 1px solid var(--border-table);
    text-align: right;
    padding: 1px 5px;
}
span.global-doc {
    color: rgb(197, 118, 0);
}
th.rotate {
    /* Something you can count on */
    height: 70px;
    white-space: nowrap;
}
th.rotate > .th-content {
    transform: 
        /* Magic Numbers */ 
        translate(14px, 21px)
        rotate(315deg);
    width: 25px;
}
th.rotate > .th-content > span {
    border-bottom: 1px solid #aaa;
    padding: 0px 5px;
}
.schedule-root th.rotate{
    /* This allows .th-underlay to use absolute positioning
     * relative to its th parent
     */
    position: relative;
}
.th-underlay{
    /* This is a "highlighting" div which is (z axis) below the
     * th content.  It is (magic numbers) translated to position it
     * at an angle and position which makes it appear to highlight the
     * targeted th.
     */
    transform: 
        /* Magic Numbers */ 
        translate(-24px, 34px)
        rotate(315deg);

    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 105px;
    height: 19px;
    display: none;
    z-index: -1;
}
.th-underlay.highlight{
    display: inline;
    background: var(--bg-table-highlight);
}
#table-subject-info{
    /* Force this (small) table to center */
    margin: auto;
}
#table-subject-info th{
    text-align: right;
}

.info-access-restricted{
    background-color: var(--bg-button-is-access_restricted);
}
.info-soft-deleted{
    background-color: var(--bg-button-is-soft-deleted);
}
.info-soft-deleted, .info-access-restricted{
    border: 1px solid #888;
    padding: 10px;
    color: var(--color-red);
    margin-bottom: 5px;
}
.td-schedule {
    position: relative;
}
.schedule-badge {
      position: absolute;
      top: -8px;
      right: -14px;
      background-color: #dc3545;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* ----------------------------------
DATASET (CRD)
------------------------------------- */
.crd-widget{
    display: flex;
    align-items: center;
    flex-direction: column;

    margin-bottom: 10px;
}
.crd-table-row{
    display: flex;
    flex-direction: row;
    /* width: 200px; */
    font-weight: 500;
}

.crd-table-cell-heading{
    display: flex;
    font-weight: 700;
    width: 150px;
    background-color: var(--bg-crd-table-cell-heading);
    border: 1px #000;
    border-style: none solid solid solid;
    padding: 2px 5px;
}
.crd-table-row:first-child .crd-table-cell-heading{
    border-style: solid solid solid solid;
}
.crd-table-cell-data{
    background-color: var(--bg-crd-table-cell-data);
    width: 200px;
    border: 1px #000;
    border-style: none solid solid none;
    padding: 2px 5px;
}
.crd-table-row:first-child .crd-table-cell-data{
    border-style: solid solid solid none;
}

.crd-table-cell-data.divider{
    background-color: var(--bg-crd-table-cell-data-divider);
}
.crd-table-null-value{
    color: #888;
    font-style: italic;
}
/*-----------------
 * Walkthrough
 *-----------------*/
th.wt-rotate {
    /* Something you can count on */
    height: 190px;
    white-space: nowrap;
}
th.wt-rotate > div {
    transform: 
        /* Magic Numbers */ translate(0px, 80px) /* translate(14px, 31px) */
        /* 45 is really 360 - 45 */ rotate(270deg);
    width: 25px;
}
th.wt-rotate > div > span {
    /* border-bottom: 1px solid #aaa; */
    padding: 0px 5px;
}
.schedule-root .td-screening {
    background: rgb(247, 255, 223);
}
.schedule-root .td-inpatient {
    background: rgb(223, 255, 245);
}
.schedule-root .td-outpatient {
    background: rgb(223, 228, 255);
}
.schedule-root tr.tr-core:hover td {
    background: var(--bg-table-highlight);
}
.schedule-root tr.tr-core:hover th {
    background: rgb(182, 182, 182);
}
.schedule-root .td-schedule.highlight {
    background: var(--bg-table-highlight);
}

.button-box {
    display: flex;
    justify-content: center;
}

a.button-schedule {
    width: 20px;
    height: 20px;
    background: var(--bg-schedule-button-unstarted);
    display: block;
    margin: auto;
    border-radius: 10px;
    padding: 0;
    margin: 0;
    /* border: 1px solid #333; */
}
a.button-crd-data-exists {
    border-radius: 0;
    width: 18px;
    height: 18px;
    background-color: var(--bg-schedule-button-crd-data-exists);
}
a.button-crd-data-null {
    border-radius: 0;
    width: 12px;
    height: 12px;
    background-color: var(--bg-schedule-button-crd-data-null);
}
a.button-eform {
    border-radius: 0;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
a.button-active {
    background: var(--bg-schedule-button-active);
}
a.button-finalized {
    background: var(--bg-schedule-button-finalized);
}
a.button-unstarted {
    width: 15px;
    height: 15px;
}
a.button-unstarted.button-eform {
    border-top-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
a.button-schedule:hover {
    filter: brightness(1.3);
}

.highlight {
    line-break: auto;
    word-break:normal;
    word-wrap: normal;
}
.form-set-id {
    color: var(--text-secondary);
    font-size: 8pt;
}

/* ----------------------------------
 * DIRECTORY
 * ----------------------------------
 */
.directory-root {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}
.directory-item {
    min-width: 90px;
    position: relative;

    text-decoration: none;
    text-align: center;
    margin: 3px;
    padding: 0;
    font-size: 1em;
    color: var(--text-primary);
    font-family: system-ui, sans-serif;
    border: 0;
    background: var(--bg-active);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;

    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
.directory-item--is-access-restricted {
    background: var(--bg-button-is-access_restricted);
    cursor: default;
    border: 1px solid #ccc;
}
.directory-item--is-soft-deleted {
    background: var(--bg-button-is-soft-deleted);
    cursor: default;
    border: 1px solid #ccc;
}
.directory-item--is-unclickable {
    cursor: default;
}
.directory-item:hover:not(.directory-item--is-unclickable) {
    filter: brightness(80%);
    -webkit-filter: brightness(80%);
}
.directory-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background-color: #dc3545;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#calendar-button {
    min-width: auto;
}

/* ----------------------------------
 * Calendar
 * ----------------------------------
 */

.box.calendar {
    flex: 1 1 auto;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
}
.box.calendar .row {
    flex: 0 1 auto;
    width: 100%;
    height: auto;
    gap: 8px;
}
.calendar.container-mobile-scroll{
    flex: 0 1 auto;
    width: 100%;
}
.calendar table{
    border-spacing: 0px;
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: fixed;
    width: 100%;
}
.calendar td, 
.calendar th {
    border: 1px solid var(--border-table);
    padding: 2px 10px;
}
.calendar th {
    color: #555;
    background-color: var(--bg-table-header-calendar);
}
.calendar td {
    /* for td, height is effectively min-height */
    height: 28px;
    background: var(--bg-table-data);
}
.calendar .emoji {
    font-size: 12px;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    line-height: 12px;
    padding-bottom: 3px;
}
.calendar .weekend {
    background-color: var(--bg-table-header-calendar-weekend);
}
.calendar .today{
    background-color: var(--bg-table-header-calendar-today);
    color: white;
}
.calendar .scr-hideable{
    /* TODO: add checkbox to show/hide this */
    display: none;
}
.event {
    margin: 5px 0px;
    padding: 3px 10px;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: black;    
    background-color:  var(--bg-facility-unassigned);
    border: 1px solid var(--border-button);
}
.legend {
    margin-left: 10px;
    min-width: 120px;
    text-align: center;
    cursor: default;
}
.event:hover {
    filter: brightness(70%);
    -webkit-filter: brightness(70%);
}
.legend:hover {
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
}
/* ----------------------------------
 * Facility colors
 * NOTE: Must preserve numbering because the colors for existing facilities
 * are well established.
 * FIXME: Remove named facilities after "projects" are fully implemented.
 * ----------------------------------
 */
.facility-0 {
    background-color: var(--bg-facility-unassigned);
}
.facility-1 {
    background-color: #1142A6;
    color: var(--color-text-facility-light)
}
.facility-1 .sid-number {
    color: var(--color-text-sid-light)
}
.facility-2 {
    background-color: #8DA6D9;
}
.facility-3 {
    background-color: #6fb7a0;
}
.facility-4 {
    background-color: #A611A6;
    color: var(--color-text-facility-light)
}
.facility-4 .sid-number {
    color: var(--color-text-sid-light)
}
.facility-5 {
    background-color: #D98DD9;
}
.facility-6 {
    background-color: #ffc985;
}
.facility-7 {
    background-color: #e1ff85;
}
.facility-8 {
    background-color: #98ffea;
}
.facility-9 {
    background-color: #fcc52d;
}
.facility-10 {
    background-color: #c66;
    color: var(--color-text-facility-light)
}
.facility-11 {
    background-color: #e94;
}
.facility-12 {
    background-color: #784c05;
    color: var(--color-text-facility-light)
}
.facility-13 {
    background-color: #FF7F50;
}
.facility-14 {
    background-color: #c2d6a0;
}
.facility-15 {
    background-color: #fddbff;
}
.facility-16 {
    background-color: #ffedc1;
}
.facility-17 {
    background-color: #c7ba8e;
}
.facility-18 {
    background-color: #e4cecc;
}
.facility-19 {
    background-color: #d5ffd6;
}
.facility-20 {
    background-color: #ff9a76;
}
.outpatient {
    background-color: #9A8DD9;
}


/* ----------------------------------
 * COMMON classes for SID (PID), SCR display
 * ----------------------------------
 */
.sid-number, .nid-number {
    font-weight: bold;
    color: var(--color-text-sid);
}
.scr-number {
    color: var(--text-secondary);
}
.header .scr-number {
    color: #666;
}
.control {
    margin: 0.5rem;
    display:inline-block;
}
.controls {
    /* flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin: 0.5rem;
}
.controls.breadcrumbs {
    display: flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;
    height: auto;
    margin-left: 1rem;
    margin: 0 0 0 10px;
    color: var(--text-secondary-header);
    white-space: nowrap;
}
.breadcrumb-item {
    display: block;
    margin: 3px 0 3px 0;
}

.controls.breadcrumbs a {
    text-decoration: none;
    color: var(--text-secondary-header);
}
span.fa-chevron-right{
    margin: 0 4px 0 4px;
    color: var(--text-secondary);
}
.controls-child {
    flex: 1;
    display: flex;
    justify-content: center;
}
.controls-child:first-child > span {
    margin-right: auto;
}
.controls-child:last-child > span {
    margin-left: auto;
}

.controls-group {
    display: flex;
    justify-content: center;
    align-items: center;
}
.controls-group.allow-wrap {
    flex-wrap: wrap;
}

.link-as-button {
    text-decoration: none;
    text-align: center;
    margin-left: 0.5rem;
    font-size: 1em;
    color: var(--text-primary);
    font-family: system-ui, sans-serif;
    border: 0;
    background: var(--bg-active);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.link-as-button:hover {
    background: var(--bg-hover);
}
.link-as-button.schedule-row {
    color: var(--text-button-schedule);
    background: var(--bg-button-schedule-row);
    padding: 2px 10px;
    font-weight: 500;
}
.link-as-button.schedule-row:hover {
    background: var(--bg-button-schedule-row-hover);
    padding: 2px 10px;
}
.subject-name {
    color: var(--text-secondary);
}
/* ----------------------------------
 * LOGIN
 * ----------------------------------
 */
.login-root {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}
.login-form{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
.login-text {
    display: inline-block;
    text-align: center;
 }

/* ----------------------------------
 * Header
 * ----------------------------------
 */
 .version{
     color: var(--text-header-dim);
 }

 /* ----------------------------------
 * Tooltips (JQuery UI)
 * ----------------------------------
 */
 .ui-tooltip{
     background: rgb(255, 255, 148) !important;
     /* Allow /n to force line breaks */
     white-space: pre-line;
 }

/* ----------------------------------
 * Annotation loading pop-up
 * ----------------------------------
 */
 #annotation-load-message {
    display: none;
    position: absolute;
    text-align: center;
    padding: 10px 20px;
    top: 50px;
    width: 600px;
    background-color: #ff0000c0;
    color: black;
    left: 50%;
    /* Half of width + left pad */
    margin-left:-320px; 

    border-radius: 6px;
 }

 /* ----------------------------------
  * Navigation
  * ----------------------------------
  */
 .main {
    display: flex;

    height: 100%;
    width: 100%;
    min-height: 0;
    min-width: 0;
 }
 .nav-side {
    display: flex;
    flex: 1 1 auto;
    min-width: calc(var(--width-button-bar) + var(--width-context-menu));
    max-width: calc(var(--width-button-bar) + var(--width-context-menu));
    height: 100%;
    background-color: var(--bg-nav-quick);
    z-index: 20;
 }
 .nav-side-button-bar {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: var(--width-button-bar);
    max-width: var(--width-button-bar);
    height: 100%;
    background-color: var(--bg-nav-quick);
 }
 .nav-side-context-menu {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 10px;

    min-width: var(--width-context-menu);
    max-width: var(--width-context-menu);

    background-color: #ffffff;
    border-right: 1px solid #ccc;

    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
 }
 .nav-side-context-content {
    display: flex;
    margin: 10px; 
    align-items: stretch;
    gap: 10px;
 }
.nav-side-context-menu .button {
    margin: 0 0 0 var(--indent-context);
    border: 1px solid #a0a0a0;
    border-radius: 5px;
    padding: 2px 5px;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: center;
    color: #313131;
}
/* .nav-side-context-menu .button.tall {
    height: 50px;
} */
.nav-side-context-menu .button.valid {
    background-color: var(--bg-good-light);
}
.nav-side-context-menu .button.exceptional {
    background-color: var(--bg-bad-light);
}
.nav-side-context-menu .state-marker {
    margin: 0 0 0 var(--indent-context);
    border: 4px solid #0081bc;
    color: #0880ab;
    background-color: #badeff;
    padding: 2px 5px;
    overflow-wrap: break-word;
    white-space: normal;
    text-align: center;
    font-weight: 700;
    cursor: default;

    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
/* .nav-side-context-menu .state-marker.tall {
    height: 50px;
} */
.side-box{
    margin-left: var(--indent-context);
}
#read-only-indicator{
    text-align: center;

    background-color: pink;
    color: var(--color-red);
    font-weight: 700;
    font-size: 15px;
    cursor: default;
    display: none;

    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
.nav-side-context-menu .button:disabled {
    filter: brightness(1.11);
    color: #a8a8a8;
}
.nav-side-context-menu h1 {
    font-size: 14px;
    margin: 0;
    border-bottom: 1px solid #5b76a6;
    color: #3A4E6E;
}
 .content {
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    min-width: 0;
 }
.nav-round-button {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    border-radius: 50%;

    color: #404040;
    background-color: #CECECE;
    text-decoration: none;
}
.nav-round-button:hover{
    background-color: #B6B6B6;
}
.nav-round-button.active{
    color: #f2f2f2;
    background-color: var(--bg-side-button-active);
}
#button-help{
    margin-top: 25px;
}
.toggle-menu{
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    margin-right: 8px;

    width: 30px;
    height: 30px;
    border-radius: 50%;

    color: #f2f2f2;
    background-color: #324772;
}

 /* ----------------------------------
  * Project Page
  * ----------------------------------
  */
.pg-project h2{
    margin-top: 20px;
}

 /* ----------------------------------
  * Audit Page
  * ----------------------------------
  */
.pg-audit h2{
    margin-top: 20px;
}

.pg-audit,
.pg-eform {
    justify-content: flex-start;
}

@media screen and (max-width: 768px), screen and (orientation: portrait) {
    .toggle-menu{
        display: flex;
    }
    .user-info{
        display: none;
    }
    .nav-side{
        position: absolute;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        /* Must force height because auto-height no longer works when this
         * menu is hidden.  The value below leaves a big gap but has enough
         * margin so scroll bars won't start appearing if the heading bar
         * ever changes height slightly.
         */
        height: var(--vh90);
    }
    .slide-in {
        animation: sp-slide-in 0.5s forwards;
        -webkit-animation: sp-slide-in 0.5s forwards;
    }
    
    .slide-out-immediate {
        animation: sp-slide-out 0s forwards;
        -webkit-animation: sp-slide-out 0s forwards;
    }

    .slide-out {
        animation: sp-slide-out 0.5s forwards;
        -webkit-animation: sp-slide-out 0.5s forwards;
    }
    
    /* The dropzone js library is already using the animation
     * names `slide-in` and `slide-out`, so we prefix with `sp-`
     * to avoid the name collision.
     */
    @keyframes sp-slide-in {
        100% { transform: translateX(0%); }
    }
    
    @-webkit-keyframes sp-slide-in {
        100% { -webkit-transform: translateX(0%); }
    }
        
    @keyframes sp-slide-out {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-100%); }
    }
    
    @-webkit-keyframes sp-slide-out {
        0% { -webkit-transform: translateX(0%); }
        100% { -webkit-transform: translateX(-100%); }
    }

    #admin-message {
        width: 315px;
        margin: 0px 0px 0px 10px;
    }
}

 /* ----------------------------------
  * Text-Notes Page
  * ----------------------------------
  */
.panel-patient-notes{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    height: 500px;
    width: 100%;
    padding-top: 8px;
    margin-bottom: 15px;
}

.patient-notes{
    display: flex;
    flex-direction: column;

    flex: 1 1;
    gap: 4px;

    align-items: stretch;
    padding: 10px;
    border: 1px solid #a5a5a5;

    background-color: #ffffff;
    font-size: 15px;
    overflow-y: scroll;
}
.patient-note{
    background-color: var(--color-patient-note-bg);
    padding: 5px 10px;
    border-radius: 14px;
}
.patient-note--self-authored:not(.patient-note--from-template) {
    background-color: var(--color-patient-note-bg-self);
}
.patient-note--from-template {
    background-color: var(--color-patient-note-bg-template);
}
.patient-note--mode-editing {
    background-color: var(--color-patient-note-bg-editing) !important;
}
.patient-notes > .patient-note:last-of-type{
    margin-bottom: 0px;
}
.patient-note .patient-note__heading{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 5px;
}
.patient-note__name {
    color: var(--color-patient-note-text-author);
    font-weight: 600;
}
.patient-note__timespan {
    color: var(--color-patient-note-text-author);
    font-weight: 600;
    margin-right: 5px;
}
.patient-note__date{
    color: var(--color-patient-note-text-date);
    font-weight: 500;
}
.patient-note__text{
    white-space: pre-wrap;
    color: #343434;
}
.patient-note-compose-area{
    display: flex;
    flex-direction: column;
    border: 1px solid #a5a5a5;
    background-color: #ddd;
    border-top: none;
}
#patient-note-compose-text{
    flex: 1 0;
    min-height: 100px;
    width: auto;
    margin: 8px;
    padding: 5px;
    /* IMPORTANT: 16px is the min font size to avoid iOS "auto zooming" on the text field when 
    it gets focus. DO NOT reduce it. */
    font-size: 16px;
    background-color: white;
    overflow-y: scroll;
    outline: none;
    resize: none;
    border: 1px solid #a5a5a5;
}
.patient-note-row{
    display: flex;
    justify-content: flex-end;
    padding: 5px;
    gap: 10px;
}

.patient-note__button-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}
.button-row-editing {
    display: none;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.button-row-message-editing {
    display: none;
}
.panel-patient-notes--editing .button-row-editable,
.panel-patient-notes--editing .button-row-message-submit{
    display: none;
}
.patient-note--mode-editing .button-row-editing,
.panel-patient-notes--editing .button-row-message-editing{
    display: flex;
}

.patient-note__button__edit {
    border: 0;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;

    background-color: #ff0000;
    color: #ffffff;
}

.patient-note__button__submit {
    border: 0;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;

    background-color: var(--color-theme);
    color: white
}
.patient-note-divider-row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.patient-note-divider{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #747474;
    color: white;
    border-radius: 12px;
    width: 120px;
    height: 22px;
    font-weight: 700;
    font-size: 11px;
}


/* ----------------------------
 * ISO-8601 Date
 * ---------------------------- */
 /* The display:inline makes it so that the span does not cause a
    line break during copy-paste */
.iso8601-t, .iso8601-offset{
    /* opacity: 0.3;  */
    display: inline;
    font-weight: 700;
}
.patient-note .iso8601-t,
.patient-note .iso8601-offset{
    /* opacity: 0.5; */
    color: #d1a358;
    font-weight: 400;
}
.eform_cluster_banner .iso8601-t,
.eform_cluster_banner .iso8601-offset{
    font-weight: 400;
    color: #d1a358
}

/* ----------------------------
 * FontAwesome icon tweaks.
 * ----------------------------
 */
.fa-gear {
    margin-top: 0.5px;
    margin-left: 1px;
}
.fa-eye {
    margin-bottom: 1px;
    margin-left: 1px;
}
.dimmer{
    /* This div fills the whole screen and acts as a "dimmer" for
    * the base content of the page. The mp-card-detail element inherits
    * its visibility from this root, so we show/hide the card detail by
    * toggling the visibility of this element.
    */
    z-index: 10;
    position: absolute;
    pointer-events: none;

    width: 100%;
    left: 0px;
    
    height: 100%;
    top: 0px;

    background-color: var(--bg-clear);
    -webkit-transition: background-color 400ms linear;
    -ms-transition: background-color 400ms linear;
    transition: background-color 400ms linear;
}
.dimmer.obscure{
    pointer-events: auto;
    background-color: var(--bg-obscure);
}

/* ----------------------------
 * eForms
 * ----------------------------
 */
.eform_content {
    font-size: var(--font_size_default);
    max-width: 800px;
}
.eform_doc_info_header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding: 5px 12px;
    margin-bottom: 14px;
    border: 2px solid #b9b9b9;
    color: #888;
    background-color: #e2e2e2;
}
.eform_doc_info {
    color: #ac99b0;
    font-weight: 700;
    margin: 0 4px;
}
.eform_heading {
    font-weight: 700;
}
.eform_heading--l0{
    font-size: 18px;
    background-color: #1B557C;
    color: #ffff;
    padding: 1px 0px 1px 8px;
}
.eform_question {
    font-weight: 700;
    color: var(--color-text-question);
}
.eform_emphasis {
    color:#A32AB4;
}
.eform_info_text {
    font-style: italic;
    color: var(--color-text-info-text);
    margin-bottom: 8px;
}
.eform_textbox {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.eform_textbox textarea,
.eform_numberbox input {
    width: 300px;
    padding: 5px;
    /* font-size: var(--font_size_default); */
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 2px;
}
.eform_textbox textarea {
    width: 400px;
    min-width: 400px;
    min-height: 22px;
    font-family: inherit;
    font-size: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.eform_textbox textarea:disabled,
.eform_numberbox input:disabled{
    color: var(--text-secondary)
}

.eform_datebox input {
    padding: 5px;
    font-size: var(--font_size_default);
    border: 1px solid #ccc;
    border-radius: 4px;
}
.eform_timebox {
    margin-top: 4px;
}
.eform_timebox input {
    padding: 5px;
    font-size: var(--font_size_default);
    border: 1px solid #ccc;
    border-radius: 4px;
}
.eform_textbox_as_datebox{
    max-width: 100px;
    min-height: 22px;
    /* padding: 5px 8px; */
    color: #c0c0c0;
}
.eform_image {
    margin: 8px 0px;
}
.eform_textbox label,
.eform_numberbox label {
    margin-left: 8px;
}
.eform_block {
    /* border: 1px solid #ccc; */
    /* border-left: 3px solid #d77e00; */
    /* background-color: #f9f9f9; */
    margin-left: 15px;
    padding: 3px 3px 3px 8px;
}
.eform_extensible_block {
    border: 1px solid #ccc;
    /* border-left: 3px solid #d77e00; */
    /* background-color: #f2f2f2; */
    /* background-color: #ececec; */
    background-color: #f4ecff;
    /* margin-left: 15px; */
    padding: 3px 3px 3px 8px;
    border-radius: 6px;
    margin-top: 8px;
}
.eform_cluster {
    border-radius: 8px;
}
.eform_cluster--visible {
    /* background-color: #c7c7c7; */
    background-color: #ececec;
    /* padding: 5px; */
    border: 1px solid #ccc;
    margin-bottom: 8px;
}
.eform_cluster--visible.eform_cluster--type_q_response--latest_answered{
    background-color: #e2f4ff;
}
.eform_cluster--visible.eform_cluster--type_issue {
    background-color: #ffe2e2;
}
.eform_cluster--visible.eform_cluster--type_issue--closed {
    background-color: #e3ffe2;
}
.eform_cluster--visible.eform_cluster--type_note {
    background-color: #feffbc;
}
.eform_cluster_content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 8px;
}
.eform_cluster_banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font_size_small);
    background-color: rgba(0, 0, 0, 0.1);
    mix-blend-mode: multiply;
    color: #5d5d5d;
    padding: 2px 8px;
    margin: 0;
    border-radius: 8px 8px 0px 0px;
}
.eform_cluster_banner__username_self {
    color: var(--color-text-username-self);
    font-weight: 700;
}
/* .eform_cluster--type_issue .eform_cluster_banner {
    background-color: #ffb3b3;
}
.eform_cluster--type_note .eform_cluster_banner {
    background-color: #e2e28d;
} */

.eform_cluster_footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    /* font-size: var(--font_size_small); */
    color: #5d5d5d;
    padding: 0px 8px 8px 8px;
    margin: 0;
    border-radius: 0px 0px 8px 8px;
}

.eform_button_row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    gap: 8px;
}
.eform_button_row--margin_bottom {
    margin-bottom: 10px;
}
.eform_button_row--margin_top {
    margin-top: 10px;
}
.eform_button {
    text-decoration: none;
    text-align: center;
    margin: 0;
    font-size: 1em;
    color: var(--text-primary);
    font-family: system-ui, sans-serif;
    background-color: var(--bg-active);
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid var(--border-button);
    filter : brightness(1.0);
}
.eform_button--question {
    background: #d7ebf7;
}
.eform_button--red {
    background: var(--color-red);
    color: #f6f6f6;
    border: 1px solid var(--color-red);
}
.eform_button--theme {
    background: var(--color-theme);
    color: #f6f6f6;
    border: 1px solid var(--color-theme);
}
.eform_button--add-extensible-block {
    background: var(--bg-button-add-extensible-block);
    color: var(--fg-button-add-extensible-block);
    border: 1px solid var(--bg-button-add-extensible-block);
}

.eform_button:hover {
    filter : brightness(0.80);
}
.eform_label{
    font-size: var(--font_size_default);
}
.eform_label--disabled {
    color: var(--text-secondary);
    font-style: italic;
    /* width: 0;
    max-width: 0;
    margin: 0;
    padding: 0; */
}

 /* ----------------------------------
 * HTMX
 * ----------------------------------
 */
 #oob-scripts {
    display: none;
 }
 #oob-dummy-target {
    display: none;
 }

/* ----------------------------
 * Scrolling containers for mobile tables
 * ----------------------------
 */
.container-mobile-scroll{
    flex: 1 0 auto;
    display: inline-block;
    background-color: var(--bg-clear);
    min-height: 100px;
    min-width: 360px;
}
.container-mobile-scroll table {
    margin: 0;
}
@media screen and (max-width: 1200px) {
    .container-mobile-scroll.calendar{
        width: 520px;
        overflow: scroll;
        background-color: var(--bg-mobile-scroll);
    }
    .calendar table{
        width: 1200px;
    }
}
@media screen and (max-width: 768px) {
    .container-mobile-scroll{
        height: 400px;
        width: 360px;
        overflow: scroll;
        background-color: var(--bg-mobile-scroll);
    }
    .container-mobile-scroll.calendar{
        width: 400px;
    }
    .container-mobile-scroll table {
        margin: 5px;
    }
    .schedule-root .container-mobile-scroll {
        background-color: var(--bg-mobile-scroll);
    }
}

.state-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background-color: rgba(0,0,0,0.02);
    border: 1px solid #ccc;
    margin-top: 10px;
    border-radius: 5px;
}