:root {
    --left-lung-color: 0, 191, 255;
    --right-lung-color: 191, 0, 255;
    --ground-glass-color: 255, 255, 128;
    --non-dementia-color: 255, 153, 51;
    --fluid-color: 0, 0, 255;
    --adhesions-color: 0, 230, 0;
    --tumor-color: 230, 0, 0;
    --left-ventricle-color: 0, 191, 255;
    --right-ventricle-color: 191, 0, 255;
    --stroke-opacity: 1;
    --fill-opacity: 1;
    --blue: #6495ed;
    --white: #faf0e6;
}

html * {
    font-family: Roboto, Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

body {
    color: var(--bs-light-text-emphasis);
    background-color: black;
<!-- background-image: url('assets/img/background2.jpg');
--> <!-- background-repeat: no-repeat;
--> <!-- background-size: cover;
--> <!-- background-position: top;
-->
}

main {
    height: 100vh;
    max-height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
}

.view {
    border: 1px solid #222222;
    position: relative;
    padding: 0 !important;
    min-width: 50%;
    max-height: 100%;
}

#lo-view {
    max-height: 50%;
}

#lo-view:has(>div>*) {
    flex-grow: 1 !important;
}

.view.active {
    border: 1px solid #606060;
}

.info {
    position: absolute;
    top: 0;
    width: 100%;
    pointer-events: none;
    z-index: 20;
}

.info {
    /*pointer-events: none;*/
}

.controls img {
    pointer-events: all;
    width: 28px;
    height: 28px;
}

.controls img:hover {
    filter: brightness(1.2);
}

.center-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.right {
    position: absolute;
    right: 0;
}

.bottom {
    position: absolute;
    bottom: 0;
}

.content {
    text-shadow: -1px 0 0 #000,
    -1px 1px 0 #000,
    0 1px 0 #000,
    1px 1px 0 #000,
    1px 0 0 #000,
    1px -1px 0 #000,
    0 -1px 0 #000,
    -1px -1px 0 #000;
}

#measure {
    color: #ffa2a2;
}

#measurement {
    pointer-events: none;
}

annotations-viewer:focus, annotations-editor:focus {
    outline: none;
}

#review button {
    width: 28px;
    height: 28px;
    border-width: 0;
    pointer-events: all;
}

#review img {
    width: 28px;
    height: 28px;
}

#review button:hover {
    filter: brightness(1.2);
}

#view-3, #view-4 {
    overflow-y: auto;
}

#patients, #series {
    scrollbar-width: none;
}

#info-modal .modal-header {
    background-color: var(--bs-info-border-subtle);
}