/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Variables used in color palette */
:root {
    color-scheme: light dark;
    --pulseon-lightgray: #e0e0e0;
    --pulseon-off-black: #4D4D4D;
    --pulseon-light-blue: #62C2DA;
    --pulseon-dark-blue: #2780C2;
    --pulseon-red: #E30157;
    --pulseon-red-light: #FE4D91;
    --pulseon-green: #75B82A;
    --btn-font-size: 16px; 
}

@media (prefers-color-scheme: light) {
    :root {
        --cl-arrhythmia: #e38f8e;
        --cl-sinus: #b9c4db;
        --cl-no-valid-data: #d9d9d9;
        --high-contrast-blue: var(--pulseon-dark-blue);
        --low-contrast-blue: var(--pulseon-light-blue);
        --high-contrast-red: var(--pulseon-red);
        --btn-blue: var(--pulseon-dark-blue);
        --btn-blue-hover: var(--pulseon-light-blue);
        --btn-green: var(--pulseon-green);
        --btn-green-hover: #91d544;
        --btn-red: var(--pulseon-red);
        --btn-red-hover: var(--pulseon-red-light);
        --background-color: white;
        --label-container-background: var(--background-color);
        --select-background-color: white;
        --navbar-background-color: #fafafa;
        --sidebar-background-color: var(--pulseon-lightgray);
        --sidebar-highlight-color: #eeeeee;
        --sidebar-highlight-hover: #cccccc;
        --table-odd-color: #f2f2f2;
        --tr-border-color: rgba(0, 0, 0, .12);
        --list-highlight-text-color: var(--background-color);
        --sidebar-box-bg: var(--navbar-background-color);
        --sidebar-box-border: #d0d0d0;
        --text-color: black;
        --navbar-logo-image: url(../images/PulseOn_logo_RGB_small.png);
        --navbar-height: 60px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --cl-arrhythmia: #8f2524;
        --cl-sinus: #344465;
        --cl-no-valid-data: #595959;
        --high-contrast-blue: var(--pulseon-dark-blue);
        --low-contrast-blue: var(--pulseon-light-blue);
        --high-contrast-red: var(--pulseon-red-light);
        --btn-blue: #195380;
        --btn-blue-hover: #278ca5;
        --btn-green: #507d1c;
        --btn-green-hover: #6aa626;
        --btn-red: #98013b;
        --btn-red-hover: #cb014e;
        --background-color: #202020;
        --label-container-background: #A0A0A0;
        --select-background-color: #303030;
        --navbar-background-color: #1f1f1f;
        --sidebar-background-color: #303030;
        --sidebar-highlight-color: #242424;
        --sidebar-highlight-hover: #404040;
        --table-odd-color: #404040;
        --tr-border-color: #404040;
        --sidebar-box-bg: var(--navbar-background-color);
        --sidebar-box-border: #404040;
        --list-highlight-text-color: var(--background-color);
        --text-color: #ffffff;
        --navbar-logo-image: url(../images/PulseOn_logo_small_neg_RGB.png);
    }
}


:root[theme='light'] {
    --cl-arrhythmia: #e38f8e;
    --cl-sinus: #b9c4db;
    --cl-no-valid-data: #d9d9d9;
    --high-contrast-blue: var(--pulseon-dark-blue);
    --low-contrast-blue: var(--pulseon-light-blue);
    --high-contrast-red: var(--pulseon-red);
    --btn-blue: var(--pulseon-dark-blue);
    --btn-blue-hover: var(--pulseon-light-blue);
    --btn-green: var(--pulseon-green);
    --btn-green-hover: #91d544;
    --btn-red: var(--pulseon-red);
    --btn-red-hover: var(--pulseon-red-light);
    --background-color: white;
    --label-container-background: var(--background-color);
    --select-background-color: white;
    --navbar-background-color: #fafafa;
    --sidebar-background-color: var(--pulseon-lightgray);
    --sidebar-highlight-color: #eeeeee;
    --sidebar-highlight-hover: #cccccc;
    --table-odd-color: #f2f2f2;
    --tr-border-color: rgba(0, 0, 0, .12);
    --list-highlight-text-color: var(--background-color);
    --sidebar-box-bg: var(--navbar-background-color);
    --sidebar-box-border: #d0d0d0;
    --text-color: black;
    --navbar-logo-image: url(../images/PulseOn_logo_RGB_small.png);
    --navbar-height: 60px;
}

:root[theme='dark'] {
    --cl-arrhythmia: #8f2524;
    --cl-sinus: #344465;
    --cl-no-valid-data: #595959;
    --high-contrast-blue: var(--pulseon-dark-blue);
    --low-contrast-blue: var(--pulseon-light-blue);
    --high-contrast-red: var(--pulseon-red-light);
    --btn-blue: #195380;
    --btn-blue-hover: #278ca5;
    --btn-green: #507d1c;
    --btn-green-hover: #6aa626;
    --btn-red: #98013b;
    --btn-red-hover: #cb014e;
    --background-color: #202020;
    --label-container-background: #A0A0A0;
    --select-background-color: #303030;
    --navbar-background-color: #1f1f1f;
    --sidebar-background-color: #303030;
    --sidebar-highlight-color: #242424;
    --sidebar-highlight-hover: #404040;
    --table-odd-color: #404040;
    --tr-border-color: #404040;
    --sidebar-box-bg: var(--navbar-background-color);
    --sidebar-box-border: #404040;
    --list-highlight-text-color: var(--background-color);
    --text-color: #ffffff;
    --navbar-logo-image: url(../images/PulseOn_logo_small_neg_RGB.png);
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

table {
    table-layout: fixed;
}

[popover] {
    color: var(--text-color);
    border: none;
}

tr {
    border-bottom: 1px solid;
    border-color: var(--tr-border-color);
}

td {
    word-break: break-word;
}

    td::-webkit-scrollbar {
        display: none;
    }

input {
    color: var(--text-color);
    background-color: var(--background-color);
}

.btn, .btn-small, .btn-danger {
    justify-content: center;
}

input[type=datetime-local]:not(.browser-default):disabled { /*create annoucement start and end time disabled styling*/
    color: dimgray;
}

input[type=text]:not(.browser-default):disabled { /*user settings email disabled filed styling*/
    color: dimgray;
}

input:not([type]):not(.browser-default),
input[type="text"]:not(.browser-default),
input[type="password"]:not(.browser-default),
input[type="email"]:not(.browser-default),
input[type="url"]:not(.browser-default),
input[type="time"]:not(.browser-default),
input[type="date"]:not(.browser-default),
input[type="datetime"]:not(.browser-default),
input[type="datetime-local"]:not(.browser-default),
input[type="month"]:not(.browser-default),
input[type="tel"]:not(.browser-default),
input[type="number"]:not(.browser-default),
input[type="search"]:not(.browser-default),
textarea.materialize-textarea {
    color: var(--text-color);
    border: none;
    border-bottom: solid 1px;
    border-bottom-color: darkgrey;
}

.input-field input {
    padding: 0 16px;
    border: none;
    border-radius: 4px;
    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
    margin-bottom: 1em;
}

/* Select element which has label on top (direct sibling) should have some margin */
label + select {
    margin-top: 0.25em;
}

select {
    background-color: var(--select-background-color);
    color: var(--text-color);
    border-color: var(--pulseon-lightgray);
}

    select:disabled {
        background-color: var(--background-color);
        color: dimgrey;
    }

    select.browser-default {
        color: var(--text-color);
    }

.flex {
    display: flex;
    flex-wrap: wrap;
}


.checkbox[type="checkbox"].filled-in:checked + span:not(.lever):after {
    border: 2px solid var(--pulseon-dark-blue);
    background-color: var(--pulseon-dark-blue);
}

[type=checkbox]+span:not(.lever) {
    height: 20px; /* Fixes the incorrect 25px height to 20px for checkboxes*/
}

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

table.dataTable.cell-border > tbody > tr > td:first-child {
    border-left: 1px solid !important;
    border-color: var(--tr-border-color) !important;
}

table.dataTable.cell-border > tbody > tr > td {
    border-top: 1px solid !important;
    border-right: 1px solid !important;
    border-color: var(--tr-border-color) !important;
}

table.highlight > tbody > tr:hover {
    background-color: rgba(242,242,242,.5);
}

table thead {
    color: var(--text-color);
}

.modal {
    background-color: var(--background-color);
    --modal-border-radius: 28px;
    border-radius: var(--modal-border-radius);
}

    .modal .modal-content {
        padding: 24px;
        overflow-y: hidden;
    }

/* Slider for dark theme setting */
.switch label .lever {
    background-color: var(--pulseon-lightgray);
}

.switch label input[type="checkbox"]:checked + .lever:after {
    background-color: var(--pulseon-dark-blue);
}

.switch-label:hover {
    cursor: default;
}

/* Button style */
.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled, .btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled, .btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
    pointer-events: none;
    background-color: #dfdfdf !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #9f9f9f !important;
    cursor: default;
}

/*Common general helper classes*/
.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: end;
}

.align-items-start {
    align-items: start;
}

.bg-green {
    background-color: var(--btn-green) !important;
}

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

body.cursor-wait * {
    cursor: wait !important;
}

.bold {
    font-weight: bold;
}

#container div.row {
    display: block;
}

.collection {
    border-color: var(--pulseon-lightgray);
}

    .collection .collection-item.sidebar.active {
        color: var(--background-color);
        background-color: var(--high-contrast-blue);
    }

    .collection .collection-item {
        background-color: var(--background-color);
        color: var(--text-color);
        line-height: 1.5rem;
        padding: 10px 20px;
        margin: 0;
        border-bottom: 1px solid #e0e0e0;
    }

    .collection a.collection-item {
        color: #26a69a;
    }

    .collection .collection-item.active {
        background-color: #26a69a;
        color: white;
    }

    .collection a.sidebar.collection-item {
        color: var(--text-color);
    }

        .collection a.sidebar.collection-item:not(.active):hover {
            background-color: var(--sidebar-highlight-hover);
        }

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

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

.cursor-pointer {
    cursor: pointer;
}

.disabled-color-text {
    color: var(--text-color) !important;
    opacity: 0.42;
}

.display-none {
    display: none;
}

.display-block {
    display: block;
}

.display-inline {
    display: inline;
}

.display-inline-flex {
    display: inline-flex !important;
}

.error {
    color: var(--pulseon-red);
}

.field-validation-error {
    color: var(--pulseon-red);
}

.float-none {
    float: none !important;
}

.gap-0 {
    gap: 0;
}

.green-button {
    background-color: var(--btn-green) !important;
}

    .green-button:hover {
        background-color: var(--btn-green-hover) !important;
    }

.margin-0 {
    margin: 0;
}

.margin-auto {
    margin: auto;
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.margin-bottom-em {
    margin-bottom: 1em;
}

.margin-left-em {
    margin-left: 1em;
}

.margin-left-15em {
    margin-left: 1.5em;
}

.margin-top-rem {
    margin-top: 1rem;
}

.margin-top-em {
    margin-top: 1em;
}

.margin-top-3em {
    margin-top: 3em;
}

.margin-top-0 {
    margin-top: 0;
}

.margin-top-0 {
    margin-top: 0;
}

.margin-right-em {
    margin-right: 1em;
}

.modal-footer {
    background-color: var(--background-color) !important;
}

.overflow-visible {
    overflow: visible;
}

.padding-0 {
    padding: 0;
}

.padding-left-0 {
    padding-left: 0 !important;
}

.padding-inline-start-0 {
    padding-inline-start: 0;
}

.padding-em {
    padding: 1em !important;
}

.position-relative {
    position: relative;
}

.row-gap-0 {
    row-gap: 0;
}

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

    .red-button:hover {
        background-color: var(--btn-red-hover) !important;
    }

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

.vertical-align-middle {
    vertical-align: middle;
}

.vertical-align-bottom {
    vertical-align: bottom;
}

.visibility-hidden {
    visibility: hidden;
}

.white-space-nowrap {
    white-space: nowrap;
}

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

.width-75 {
    width: 75%;
}

.width-50 {
    width: 50%;
}

.width-30 {
    width: 30%;
}

.width-20 {
    width: 20%;
}

.width-10 {
    width: 10%;
}

.z-index-21 {
    z-index: 21;
}


/* Login, LoginSSO, forgot password */
#login-form * {
    font-size: 1rem;
}

#login-container {
    max-width: 500px;
    margin: auto;
    margin-top: 3em;
    padding: 1em 2em 2em 2em;
}

.divider {
    height: auto;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: var(--background-color);
    margin-top: 1em;
    margin-bottom: 1em;
}
    .divider::before,
    .divider::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #9a9a9a;
    }

    .divider:not(:empty)::before {
        margin-right: .75em;
    }

    .divider:not(:empty)::after {
        margin-left: .75em;
    }

.secondary-login-link {
    border-color: #9a9a9a;
    border-style: solid;
    border-width: thin;
}

.secondary-login-link:hover {
    background-color: lightgray;
}

.secondary-login-link:focus {
    background-color: darkgray;
}

/* NavBar */
#navbar {
    background-color: var(--navbar-background-color);
    color: var(--text-color);
}

#footer-bar {
    background-color: var(--navbar-background-color);
    color: var(--text-color);
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

header {
    height: var(--navbar-height);
}

.header-banner {
    height: 85px;
}

#navbar {
    height: 60px;
    padding-left: 1em;
}

#nav-mobile, #nav-mobile-navigation {
    display: inline-flex;
    text-align: center;
    height: var(--navbar-height);
}

#navbar-container {
    z-index: 997;
}

nav ul a:hover {
    background-color: var(--navbar-background-color) !important;
    border-bottom: 4px solid;
    height: var(--navbar-height);
    border-color: var(--low-contrast-blue);
}

#hamburger-menu-icon {
    color: var(--text-color);
    margin-right: 0.5vw;
}

    #hamburger-menu-icon:hover {
        cursor: pointer
    }

#hamburger-menu {
    z-index: 996;
    max-width: 30rem;
    position: fixed;
    left: 15px;
    top: 60px;
}

#hamburger-overlay {
    z-index: 995;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
}

.hamburger-list-item {
    width: 100%;
    display: block;
    padding: 0.5em 1em;
    background-color: var(--background-color);
}

    .hamburger-list-item:hover {
        background-color: var(--sidebar-highlight-hover);
    }

.system-update-buttons {
    padding-top: 1em;
}

.system-update-banner {
    height: 25px;
    text-align: center;
    background-color: yellow;
    display: block;
    position: fixed;
    width: 100%;
    z-index: 40;
    top: 60px;
}

.banner-text {
    color: gray;
    padding-right: 2em;
}

.banner-close {
    padding-top: 2px;
    font-size: 20px;
    color: gray;
    float: right;
    vertical-align: middle;
    cursor: pointer;
}


/* Change Note page */
.change-note-container {
    width: 80%;
    margin: auto;
}

.change-note-title {
    text-align: center;
}

.change-note-service {
    padding-left: 1em;
}

ul.change-note-list {
    padding-left: 4em;
    margin-top: 0;
}

.change-note-list-item {
    list-style-type: disc !important;
}

ul.inner-change-note-list {
    padding-left: 3em;
    margin-top: 0;
    list-style-type: circle;
}

    ul.inner-change-note-list > li {
        list-style-type: inherit;
    }

.inner-change-note-list-item {
    list-style-type: none;
}

.change-note-note {
    margin: 0;
}

/*Navigation header*/
#navbar-user-avatar-li {
    height: 100%;
}

#navbar-user-avatar {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    margin: 10px 0;
    border-radius: 50%;
    color: white;
    text-align: center;
    background: var(--high-contrast-blue);
    font-weight: 500;
}

#navbar-logout-button-li {
    height: 90%;
}

#navbar-logout-button {
    height: 36px;
    background-color: var(--btn-red);
}

.nav-highlight {
    border-bottom: 4px solid;
    border-color: var(--high-contrast-blue);
    max-height: 60px;
}

.navbar ul:not(.dropdown-content) > li > a {
    color: var(--text-color);
}

#account-icon {
    color: var(--text-color);
}

#pulseon-logo {
    height: 100%;
    content: var(--navbar-logo-image);
}

#header-company-identifier {
    position: relative;
    height: 100%;
    font-size: 1.2em;
}

#pulseon-arrhythmia-monitor {
    position: fixed;
    overflow: hidden;
    white-space: nowrap;
}

/* User management */
.validation-summary-errors {
    color: red;
}

.role-add-button {
    margin-right: 1em;
}

.role-remove-button {
    background-color: var(--btn-red);
    margin-right: 1em;
}

#language-disclaimer {
    color: var(--pulseon-red);
}

#remove-role-text {
    height: 0px;
    width: 0px;
}

/* Provide sufficient contrast against white background */
a {
    color: var(--high-contrast-blue);
}

.btn-primary {
    color: #fff;
    background-color: var(--btn-blue);
    border-color: var(--pulseon-light-blue);
}

    .btn-primary:hover, .btn-primary:focus {
        color: #fff;
        background-color: var(--btn-blue-hover);
        border-color: var(--pulseon-light-blue);
    }


.btn-danger {
    color: #fff;
    background-color: var(--btn-red);
    border-color: var(--btn-red);
}

    .btn-danger:hover, .btn-danger:focus {
        color: #fff;
        background-color: var(--btn-red-hover);
        border-color: var(--btn-red-hover);
    }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--low-contrast-blue);
    border-color: var(--high-contrast-blue);
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
    color: #fff;
    background-color: var(--pulseon-light-blue);
    border-color: var(--pulseon-dark-blue);
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

body {
    display: flex;
    height: 100%;
    flex-direction: column;
}

main {
    margin-bottom: 60px;
    height: 100%;
    flex: 1 0 auto;
}

.page-footer {
    margin-top: 0;
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding: 0;
}

    .page-footer a {
        color: var(--high-contrast-blue);
    }

#footer-row {
    height: 60px;
}

#about-page {
    color: var(--pulseon-dark-blue);
    margin-right: 1rem;
}

#label-container {
    border: solid;
    padding: 2em 0 0 1em;
    border-color: var(--pulseon-lightgray);
    color: black;
    background-color: var(--label-container-background);
}

.about-page-header {
    margin-top: -0.26em;
    margin-bottom: 0em;
}

#about-page-h4 {
    margin-top: 1.65em;
}

#about-page-img {
    vertical-align: middle;
    width: 16.5%;
}

.about-page-h5 {
    display: inline-block;
    margin-left: 1em;
}

#ce-label-image {
    width: 38%;
}

#manufacturer-image {
    width: 16%;
}

#about-info-image {
    width: 15%;
}

/* Materialize css toas */
#toast-container {
    min-width: 10%;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(50%);
}

/*Releases*/
#downloads-manage-buttons-container {
    margin-top: 1em;
}

/* MaintenanceAnnouncement */
#delete-announcement-form {
    padding: 1em;
}

#complete-update-form {
    padding: 1em;
}

/* PatientList*/
.patient-row {
    cursor: pointer;
}

    .patient-row.selected-patient td {
        background-color: var(--high-contrast-blue) !important;
        color: var(--list-highlight-text-color);
    }

.column-group-header {
    border-style: solid !important;
    border-width: 0.05em !important;
}

#patient-list-create-patient {
    margin-top: 2em;
}

.status-icon {
    color: var(--high-contrast-blue);
    line-height: 0;
    padding-left: 0.2em;
    vertical-align: middle;
}

/* PatientSelection */
.patient-info-container {
    margin-left: 3em;
    padding: 1em;
}

.patient-info-table {
    border-collapse: separate;
}

.patient-info-table-row-topic {
    font-weight: 700;
}

.patient-info-measurement-sessions {
    margin-top: 2em;
}

.patient-info-measurement-sessions-header {
    background: var(--sidebar-background-color);
}

.patient-info-measurement-sessions-item {
    cursor: pointer;
}

.patient-info-right {
    margin-top: 5em;
}

.patient-info-right-edit {
    padding-right: 100%;
}

.patient-info-archive-patient {
    margin-top: 3em;
}

.patient-info-download-data {
    margin-top: 3em;
}

#hide-patient-info {
    background-color: var(--btn-red);
}


/*CreateSession*/
#create-session-container {
    position: relative;
    left: 9em;
}

#loading-spinner-container {
    margin: auto;
    width: fit-content;
    padding: 7rem;
}

#create-session-form-container {
    margin-top: 1em;
}

#form-group-time-zone {
    margin-top: 2em;
}

#create-session-form {
    padding: 2em;
}

.session-created-reminder {
    font-size: 1.5em;
    color: var(--high-contrast-blue);
    font-weight: bold;
}

.info-icon {
    color: var(--high-contrast-blue);
}

.create-session-label {
    justify-content: space-between;
    display: flex;
}

#form-group-initial-information {
    margin-left: 0;
    margin-top: 20px;
}

#create-session-label-annotation {
    margin-left: 0;
    margin-bottom: 10px;
}

#session-initial-information {
    height: 10em;
}


/* PatientSideBarPartial */
.attachment-input {
    margin-top: 0.5rem;
}


.attachment-icon {
    font-size: 14px;
    margin-left: -3px;
    color: var(--high-contrast-blue);
}

.sidenav li {
    line-height: 1;
    word-break: break-word;
}

#patient-sidenav {
    background-color: var(--sidebar-background-color);
    width: 15%;
    margin-top: 61px;
    height: calc(100% - 61px - 61px);
    padding-left: 1em;
    padding-right: 1em;
    overflow: auto;
    color: var(--text-color);
}

#sidenav-warning-container {
    height: auto;
}

#sidenav-warning {
    color: var(--high-contrast-red);
    line-height: 1.5em;
}

.sidenav-subtitle {
    height: auto;
    line-height: 1.5em;
    padding: 0 !important;
    font-size: 14px;
}

    .sidenav-subtitle.row {
        display: block;
    }

.sidenav-small {
    line-height: 0.5em;
    font-weight: bold;
    font-size: 14px;
}

.sidenav-subtitle-small-li {
    margin-top: 0.5em;
    line-height: 1;
    font-weight: bold;
}

.sidenav-subtitle-medium-li {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.sidenav-hr-subtitle-medium-li {
    margin-top: 0.75em;
    margin-bottom: 0.5em;
}

.sidenav-collapsible {
    background-color: var(--sidebar-highlight-color);
    color: var(--text-color);
    cursor: pointer;
    border: none;
    text-align: left;
    outline: none;
    width: 100%;
    font-weight: bold;
    padding-left: 0;
    font-size: 14px;
}

    .sidenav-collapsible:hover {
        background-color: var(--sidebar-highlight-hover);
    }

#sidenav-annotations-container {
    border-style: solid;
    border-width: 0.15em;
    width: 100%;
    padding: 0.5em;
    min-height: 12em;
    max-height: 12em;
    overflow: auto;
    background-color: var(--sidebar-box-bg);
    border-color: var(--text-color);
}

.sidenav-session-annotations-container {
    border-style: solid;
    border-width: 0.15em;
    width: 100%;
    padding: 0.5em;
    min-height: 8em;
    max-height: 8em;
    overflow: auto;
    background-color: var(--sidebar-box-bg);
    border-color: var(--text-color);
}

.sidenav-patient-info {
    height: auto;
    padding-bottom: 0em;
    font-size: 14px;
}

    .sidenav-patient-info.row {
        display: block;
    }

.sidenav-session-info-row.row {
    display: block;
}

#sidenav-patient-organization-name {
    font-weight: bold;
}

.sidenav-session-info-row {
    padding: 0em 0.5em 0.5em 0em;
    margin-bottom: 0em;
}

.sidenav-period-time {
    height: auto;
    line-height: 1.5em;
    padding: 0;
}

.annotation-row {
    cursor: pointer;
    line-height: 1.5em;
    margin: 0.2em;
}

.session-hr-container {
    margin-right: 0.25em;
    cursor: pointer;
    padding: 0.25em 0 0.25em 0;
}

    .session-hr-container:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .session-hr-container > * {
        pointer-events: none;
    }

.pop-out-icon {
    font-size: 14px;
    float: right;
    color: var(--high-contrast-blue);
}

.secret-visibility {
    font-size: 19px;
    float: right;
    color: var(--high-contrast-blue);
}
    .secret-visibility:hover {
        cursor: pointer
    }

.modal-footer-style {
    text-align: left !important;
    height: 70% !important;
}

.modal-container {
    overflow-x: hidden;
    background-color: var(--background-color);
}

.close-modal-button {
    background-color: var(--btn-red);
}

    .close-modal-button:hover {
        color: #fff;
        background-color: var(--btn-red-hover);
    }

.session-annotation-input-container {
    height: auto;
    padding-right: 1em;
    padding-left: 0 !important;
}

.session-annotation-collection {
    padding-inline-start: 0.5em;
}

.session-annotation-message {
    gap: 0;
    height: auto;
    margin-left: 0;
    margin-top: 1em;
    margin-right: 0;
    margin-bottom: 0;
    border-bottom: gray;
    border-width: thin;
    border-style: dotted;
    border-top: hidden;
    border-left: hidden;
    border-right: hidden;
}

.session-annotation-message-text {
    text-align: left;
    display: inline-block;
}

#hidden-validation-input {
    height: 0;
    width: 0;
}

#hidden-validation-input-error {
    color: red;
    font-size: 14px;
}

#export-pdf {
    width: 100%;
    margin-top: 15px;
    height: auto;
    line-height: 18px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.export-form-container {
    padding-top: 1em;
    margin-bottom: 0;
}

.export-modal-col {
    padding-left: 0 !important;
}

.export-checkbox {
    padding-left: 20px;
}

.col-no-padding {
    padding: 0 !important;
}

.export-modal-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0;
    margin-bottom: 20px;
}

.ecg-partial-selector {
    padding-left: 0 !important;
}

.session-status-update-button {
    width: 100%;
    margin-top: 2em;
    height: auto;
    line-height: 18px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.cancel-button {
    margin-left: 1em;
}

.expand-more-icon {
    font-size: 18px;
    vertical-align: middle;
}

.expand-less-icon {
    font-size: 18px;
    vertical-align: middle;
}

.export-speed {
    display: block;
}

.export-datatype {
    display: block;
}

.export-start-end-index {
    display: block;
}

.export-to-pdf {
    display: inline-flex;
}

.sidenav-overlay {
    height: 0px;
    width: 0px;
}

.include-checkbox-label {
    text-align: center;
    width: 100%;
}

.loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #0098db;
    border-radius: 50%;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    visibility: hidden;
}

#loader-seconds-container {
    display: none;
    text-align: center;
    margin-top: 0.2em;
}

.loader-no-space-container {
    position: relative;
    width: 0;
    height: 0;
}

.loader-no-space {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #0098db;
    border-radius: 50%;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    display: none;
    position: absolute;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.drag-over {
    background-color: var(--pulseon-lightgray);
}

/* Month View */
#calendar {
    width: 70vw;
    height: 70vh;
}

/* ECGData Day view*/
.day-view-title {
    margin-top: 0px;
    margin-bottom: 0.1em;
}

.date-bar-pagination {
    border: solid grey 1px;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

    .date-bar-pagination:hover {
        cursor: pointer;
    }


.date-bar-large {
    max-height: 200px;
    padding: 0.2em;
    border: solid 1px grey;
    overflow-y: auto;
}

.date-bar-small {
    max-height: 2em;
    overflow-y: hidden;
    padding: 0.2em;
    border: solid 1px grey;
}

#date-bar {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#date-bar-content {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

#date-bar a {
    border-style: solid;
    border-width: 1px 3px 1px 3px;
    padding: 0 0.2em 0 0.2em;
    width: 100%;
    border-color: var(--background-color);
    font-size: 1em;
    text-align: center;
    position: relative;
    z-index: inherit;
}

    #date-bar a.current-date {
        border-style: solid;
        border-color: var(--high-contrast-blue);
        font-weight: bold;
        background-color: var(--sidebar-background-color);
        z-index: 31;
    }

    #date-bar a:hover {
        border-style: solid;
        border-color: var(--high-contrast-blue);
        cursor: pointer;
        z-index: 31;
    }

.date-bar-scroll-content {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    white-space: nowrap;
    /* hide scrollbars */
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}

#date-bar-content::-webkit-scrollbar {
    display: none; /* WebKit */
}

#date-bar-content > a {
    scroll-snap-align: start;
}

#date-bar-row {
    margin-bottom: 0;
}

#day-view-container {
    position: relative;
    width: 100%;
    padding-left: 15.5%;
    height: 100%;
}

.ecg-flag-checkbox-container {
    position: absolute;
    display: none;
    z-index: 10;
}

.day-view-top-content {
    position: sticky;
    top: 60px;
    width: 100%;
    padding-right: 20%;
    padding-bottom: 0.7em;
    z-index: 30;
    background-color: var(--background-color);
}

.day-view-top-content-with-banner {
    position: sticky;
    top: 75px;
    width: 100%;
    padding-right: 20%;
    padding-bottom: 0.7em;
    z-index: 30;
    background-color: var(--background-color);
}

#ecg-filters-container {
    position: fixed;
    z-index: 40;
    width: 10%;
    top: 20%;
    right: 0%;
    overflow-y: auto;
    bottom: 0;
}

#measurement-session-statistics-container {
    margin-bottom: 1em;
}

    #measurement-session-statistics-container > a {
        display: inline-block;
        margin-bottom: 0.5em;
    }


#ecg-data-content {
    width: 100%;
    height: 100%;
    padding-bottom: 0%;
}

#ecg-all-charts {
    height: auto;
    width: 90%;
}

.ecg-chart {
    overflow-y: hidden;
    overflow-x: hidden;
    right: 0;
}

.ecg-chart-title-col {
    padding-right: 10px !important;
}

.ecg-chart-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0.7rem 0 0.4rem 0;
    position: relative;
}

.ecg-title-z {
    z-index: 20;
}

.ecg-category-selector {
    opacity: 0 !important;
    position: absolute;
    z-index: 21;
    width: 50%;
    margin-top: 0.7rem; /* Same as ecg-chart-title */
    padding-bottom: 0;
    padding-top: 0;
}

    .ecg-category-selector:hover {
        cursor: pointer;
    }

.category-button {
    z-index: 21;
    position: relative;
}

.title-edit-icon {
    color: inherit;
    line-height: 0;
    vertical-align: middle;
    z-index: 20;
    position: relative;
}

.assignment-edit-icon {
    line-height: 0;
    vertical-align: middle;
    font-size: 17px;
    padding-left: 0.3em;
}

.ecg-chart-subtext {
    font-size: 1.15rem;
    margin: 0;
}

.ecg-chart-subtitle-second {
    position: relative;
}

.ecg-chart-subtitle {
    position: relative;
}

.erroneous-ecg-chart {
    overflow-y: hidden;
    overflow-x: hidden;
    height: 10em;
    right: 0;
    width: 100%;
    text-align: left;
}

.ecg-setting {
    color: var(--text-color);
    height: auto;
    width: auto;
    display: block;
}

#hide-cl-markers-container {
    background-color: var(--background-color);
}

.ecg-chart-container-display {
    height: auto;
    display: block;
}

.ecg-chart-initial {
    height: 46vh;
}

.history-container {
    height: auto;
    width: 97%;
}

.history-header {
    font-size: 1.30rem;
    margin-top: 0px;
    margin-left: 0.75rem;
    font-weight: bold;
}

.histories {
    height: auto;
    width: 100%;
}

.history-list {
    margin-left: 1.5rem;
}

.history-message {
    width: 100%;
    height: auto;
}

.history-message-text {
    text-align: left;
    display: inline-block;
}

.annotations-container {
    height: auto;
    width: 97%;
}

.annotations-header {
    font-size: 1.30rem;
    margin-top: 0px;
    margin-left: 0.75rem;
    font-weight: bold;
}

.annotations {
    height: auto;
    width: 100%;
    gap: 0;
}

.annotation-message {
    width: 100%;
    height: auto;
    margin-left: 1em;
    margin-bottom: 1em;
}

.annotation-message-text {
    text-align: left;
    display: inline-block;
}

.new-annotation-header {
    font-size: 1.30rem;
}

.new-annotation-container {
    height: auto;
    gap: 0;
    padding: 0.5em;
    margin-bottom: 0.75em;
    margin-left: 0.25rem !important;
    margin-right: 0.5rem !important;
}

.new-session-annotation-container {
    height: auto;
    padding: 0.1em 0em 0em 0.5em;
    margin-bottom: 0;
}

.annotation-input-container {
    height: auto;
    padding-right: 1em;
}

.annotation-input {
    color: var(--text-color) !important;
    width: 100%;
    height: auto;
    margin: 0px !important;
    word-break: break-all;
}

.delete-annotation-button {
    width: 30%;
    margin-right: 1em;
    width: auto;
}

.delete-session-annotation-button {
    width: 30%;
    margin-left: 2em;
    width: auto;
}

.create-annotation-button {
    margin: 1em;
}

.ecg-data-type-checkbox {
    width: auto;
    height: auto;
    margin: 10px;
}



/* Week view*/
.week-view {
    padding: 0;
}

    .week-view table {
        table-layout: fixed;
        overflow-x: auto;
        overflow-y: auto;
    }

#set-time {
    width: 1.8em;
    text-align: center;
    vertical-align: middle;
}

.week-view table th {
    font-size: 1em;
    padding: 0.1em;
}

.week-view #set-time {
    width: 2.5em;
}

.week-view table tr td {
    padding: 0.2em 0 0.2em 0;
    font-size: 0.7em;
    border-left: solid 1px grey;
    border-right: solid 1px grey;
}

#week-number-bar {
    width: 100%;
    height: auto;
    padding: 0.2em;
    border: solid 1px grey;
}

    #week-number-bar a {
        border-style: solid;
        border-color: var(--pulseon-off-black);
        padding: 0 1em;
        font-size: 1em;
        text-align: center;
        vertical-align: middle;
        width: 100%;
    }

.current-week-number {
    border-style: solid;
    border-color: var(--pulseon-off-black);
    font-weight: bold;
    background-color: var(--pulseon-lightgray);
}

.week-view a:hover {
    border-style: solid;
    border-color: var(--pulseon-light-blue);
    cursor: pointer;
}

.arrhythmia-background {
    background-color: var(--cl-arrhythmia);
}

.sinus-background {
    background-color: var(--cl-sinus);
}

.no-valid-data-background {
    background-color: var(--cl-no-valid-data);
}

/* Rounded border for ECG amount*/
.ecg-amount {
    border-radius: 50%;
    width: 12%;
    aspect-ratio: 1 / 1; /* Forces height to equal width for perfect circle */
    height: 100%;
    font-size: 1.2em;
    text-align: center;
    border: solid;
    border-width: 1px;
    border-color: var(--text-color);
    color: var(--text-color);
    margin: -1px 0px -1px 0px;
    z-index: 10;
    position: relative;
}

    .ecg-amount:hover {
        cursor: pointer;
    }

    .ecg-amount.sinus-rhythm {
        background-color: var(--cl-sinus);
    }

    .ecg-amount.arrhythmia {
        background-color: var(--cl-arrhythmia);
    }

    .ecg-amount.no-valid-data {
        background-color: var(--cl-no-valid-data);
    }




/* Indicators for ECG (Similar, but different class name..)*/
.ecg-indicator {
    border: 1px solid black;
    border-radius: 50%;
    width: 1.8em;
    height: auto;
    font-size: 1em;
    text-align: center;
}

    .ecg-indicator.arrhythmia-indicator {
        background-color: var(--cl-arrhythmia);
    }

    .ecg-indicator.sinus-rhythm-indicator {
        background-color: var(--cl-sinus);
    }

    .ecg-indicator.no-valid-data-indicator {
        background-color: var(--cl-no-valid-data);
    }


/*Change week icons*/
#week-previous-week {
    margin: 0;
    position: absolute;
    top: 35%;
    -ms-transform: translateY(-0%);
    transform: translateY(-35%);
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
}

#week-next-week {
    margin: 0;
    position: absolute;
    top: 35%;
    -ms-transform: translateY(-0%);
    transform: translateY(-35%);
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
}

#classification-info {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-0%);
}

    #classification-info > * {
        display: inline-block;
    }

/*Breadcrumb*/
.breadcrumb-clean {
    background: none;
    box-shadow: none;
    color: black;
    height: 3em;
}

.breadcrumb {
    font-size: 1em;
    color: var(--text-color);
}

    .breadcrumb:before {
        color: var(--text-color);
    }

    .breadcrumb:last-child {
        color: gray;
    }

/* UserList User List */
.tr-link {
    display: block;
    color: var(--text-color);
}

#user-list-container {
    padding: 1em;
}

#create-user-button-container {
    margin-top: 2em;
}


#user-roles {
    list-style: none;
    padding-left: 0px;
}

    #user-roles li {
        margin-top: 4px;
    }

/* DMSSYstemList and OrganizationList*/
#customer-item-list-container {
    padding: 1em;
}

#customer-item-list-table {
    height: 50vh;
    display: block;
    overflow-y: auto;
    margin: 0px;
    /*    TODO: https://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td*/
}

.customer-item-row {
    cursor: pointer;
}

.customer-item-selected-row {
    background-color: var(--high-contrast-blue) !important;
    color: var(--list-highlight-text-color);
}

#customer-item-list-create-new {
    margin-top: 2.5em;
}

#customer-selected {
    margin-left: 1em;
}

.customer-info {
    height: 68vh;
    overflow-y: auto;
    display: none;
    padding: 1em;
}


/* DMSSystemInfoPartial and OrganizationInfoPartial */
.customer-item-info-container {
    padding: 1em;
}

.customer-item-info-table {
    border-collapse: separate;
}

.customer-item-info {
    display: none;
}

.customer-item-info-table-row-topic {
    font-weight: 700;
}

.customer-item-subitems-h5 {
    margin-top: 2em;
}

.customer-item-subitems-header {
    background: lightgray;
}

.customer-item-info-right {
    margin-top: 5em;
}

/* EditDMSSystem & EditOrganization*/
#save-changes-customer-item {
    background-color: var(--high-contrast-blue);
}

#cancel-delete-customer-item {
    background-color: var(--high-contrast-blue);
}

#new-customer-sub-item {
    border-style: solid;
    border-width: 0.15em;
    padding-left: 1em;
    padding-right: 1em;
    margin: 0.5em;
    margin-top: 2em;
}

#edit-customer-system.row {
    display: block;
}

#customer-sub-item-container.row {
    display: block;
}

#mesaurement-settings-form.row {
    display: block;
}

#notification-policy-form.row {
    display: block;
}

#organizationsso-edit-form.row {
    display: block;
}

/* OrganizationIntegrationsEdit */
.ext-system-edit-row {
    margin-top: 1em;
}

/* Contact information */
#logo-file {
    margin-top: 8px;
    margin-bottom: 8px;
}

#organization-current-logo {
    max-width: 70px;
    max-height: 53px;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 8px;
}

#logo-preview {
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 8px;
}


/* User management */
#manage-account-content {
    width: 80%;
}

    #manage-account-content .row {
        display: block;
    }

#create-user-content {
    width: 60%;
    display: block;
}

#role-info-content {
    position: absolute;
    top: 20%;
    right: 3em;
    height: 70%;
    overflow: auto;
    width: 20%;
}

#user-info-content {
    position: absolute;
    top: 20%;
    right: 3em;
    height: 70%;
    overflow: auto;
    width: 20%;
}

.user-info-row {
    margin: 0;
}


#users-container {
    overflow-y: auto;
    height: 55vh;
}

.sso-info-row {
    margin-top: 1rem;
}

/* Cookie Consent */

.cookie-consent-footer-button {
    background: none !important;
    color: var(--high-contrast-blue);
    border: none;
    padding: 0 !important;
    cursor: pointer;
    margin-top: 0.19em;
}

#cookie-consent {
    position: fixed;
    width: 70%;
    margin-bottom: 0px;
    padding-bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1001;
}

.cookie-consent-container {
    height: auto;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

#cookie-consent-card {
    background: var(--pulseon-light-blue);
    height: auto;
    margin: 0px;
}

#cookie-consent-button {
    position: absolute;
    top: 25%;
    right: 2em;
}

#decline-cookie-consent-button {
    position: absolute;
    top: 25%;
    right: 10em;
}



/*Assignment functionality */

.assignee-dropdown {
    display: none;
}

.assignee-dropdown-list {
    list-style-type: none;
    max-height: 200px;
    overflow: auto;
    padding: 0;
    margin: 0;
}

.assignee-dropdown-list-create-session {
    max-height: 140px;
}

.assignee-dropdown-list li {
    border: 1px solid #ddd;
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6;
    padding: 12px;
    text-decoration: none;
    color: black;
    display: block
}

.assignee-list-element:hover {
    cursor: pointer;
    background-color: #e0e0e0;
}

.assignee-name-editable:hover {
    cursor: pointer;
}

.submit-assignment {
    display: none;
    margin-top: 0.5em;
}

.cancel-assignment {
    display: none;
    margin-top: 0.5em;
}


.materialize-container-wide-override {
    margin: 0 auto;
    max-width: 1680px;
    width: 95%;
}

@media only screen and (min-width: 601px) {
    .materialize-container-wide-override {
        width: 85%;
    }
}

@media only screen and (min-width: 1600px) {
    .materialize-container-wide-override {
        width: 80%;
    }
}


/* FileTypes and Downloads*/
#device-spinner-container {
    text-align: center;
    margin: auto;
    width: fit-content;
    padding: 7rem 0rem 0rem 0rem;
    display: none;
}

#filelist-form {
    padding-top: 10px;
}

.file-type-create-settings {
    margin-top: 3em;
}

/* Device views*/
#device-content-container {
    display: none;
}

#device-connected-uploading-display {
    margin: auto;
    width: fit-content;
    padding: 4rem 0rem;
}

#modal-buttons {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

#device-refresh-icon {
    margin-right: 2rem;
    color: var(--pulseon-off-black);
}

#device-connection-icon {
    color: var(--text-color);
}

/* IdP */
#create-idp-button-container {
    margin-top: 2em;
    margin-bottom: 1em;
}

.idp-row {
    cursor: pointer;
}