* { margin:0; padding:0; }

a {
    text-decoration: none;
}

html {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    touch-action: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
}


:root {
    --color-scheme-base: #3e88e6;
    /*--color-scheme-dark: #1f4373;*/
    --color-scheme-dark: #000000;
    /*--color-scheme-lite: #dae5f2;*/
    --color-scheme-lite: #535353;
}


#fullpage {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#menu {
    flex: 0 1 auto;
    position: relative;
    z-index: 100;
    /*background: var(--color-scheme-lite);*/
    background: #2e2e2e;/*#535353;/*#2e2e2e;*/
    /*border-bottom: 2px solid var(--color-scheme-dark);*/
    /*border-bottom: 1px solid var(--color-scheme-dark);*/
    border-bottom: 1px solid #5c5c5c;
    /*box-shadow: 0px 1px 8px #222222;*/
    /*padding: 4px 8px 2px;*/
    padding: 4px 8px 8px;
    color: #d0d2d3;
}

#menu:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #6d6e70;
    background: #575757;
    border-bottom: 1px solid #a6a8ab;
}


#workarea {
    flex: 1 1 auto;
    position: relative;
    z-index: 0;
}




#menu span.group {
    display: inline-block;
    white-space: nowrap;
    margin: 0 0.5em;
}
/*
#menu button {
    padding: 2px 4px;
    cursor: pointer;
    font-size: 1em;
    margin: 4px 2px;
}

#menu button.selected {
    background-color: #ffff99;
}
*/




canvas#wsi-canvas {
    /*
    position: relative;
    display: block;
    z-index: 0;
    width: 100%;
    height: 100%;
    */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: grab;
}

img#loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


img#logoh {
/*    position: absolute;
    top: 6px;
    left: 6px;*/
    width: auto;
    height: 40px;
    margin-top: 2px;
    margin-right: 0.5em;
    vertical-align: bottom;
    display: table-cell;/*inline-block;*/
}

@media (max-width: 768px) {
    img#logoh {
        display: none;
    }
}


img#logov {
    width: auto;
    height: 70px;
    margin-top: 2px;
    margin-right: 0.5em;
    vertical-align: bottom;
    display: none;
}

@media (max-width: 768px) {
    img#logov {
        display: table-cell;/*inline-block;*/
    }
}


#menu span#currentMag {
    display: inline-block;
    width: 2.1em;
    text-align: right;
}


#menu #caseName {
    /*float: right;*/
    display: block;
    font-weight: bold;
    /*margin-top: 10px;*/
    /*margin-right: 15px;*/
    color: #d0d2d3;
    text-align: center;
    padding: 0 24px;
}


#menu-bar {
    display: table;
}


#menu-bar > div {
    display: table-row;
}


#menu-controls {
    display: table-cell;
    width: 100%;
    vertical-align: bottom;
}

#menu-controls > div {
    text-align: center;
}


#menu-zoom-controls {
    display: inline-block;
}

@media (max-width: 768px) {
    #menu-zoom-controls {
        display: block;
    }
}


#menu-zoom {
    display: inline-block;
    text-align: left;
}

#menu-zoom > * {
    display: block;
}

@media (max-width: 768px) {
    #menu-zoom > * {
        display: inline-block;
    }
}


#menu #zoom-buttons {
    /*display: inline-block;*/
    border: 2px solid #a6a8ab;
    border-radius: 6px;
    /*vertical-align: bottom;*/
    display: flex;
    flex-direction: row;
    background: #2e2e2e;
    margin-left: 1em;
}

@media (max-width: 768px) {
    #menu #zoom-buttons {
        display: none;
    }
}

#menu #zoom-buttons li {
    /*display: table-cell;*/
    display: inline-block;
    width: 36px;
    text-align: center;
    padding: 6px 0;
    cursor: pointer;
    font-weight: bold;
}

#menu #zoom-buttons li:not(:first-child) {
    border-left: 1px solid #a6a8ab;
}

#menu #zoom-buttons li:hover {
    color: #1466c4;
}

#menu #zoom-buttons li.selected {
    color: #c51418;
}



#zoom-jump {
    display: inline-block;
    /*border: 1px solid orange;*/
    position: relative;
    /*vertical-align: top;*/
    vertical-align: bottom;
}

#zoom-jump #jumpMag {
    display: none;
}

#zoom-jump #jumpMag:after {
    content: ' x';
}


@media (max-width: 768px) {
    #menu span#currentMag {
        display: none;
    }
    #menu span#currentMag + span {
        display: none;
    }
    #viewMag {
        margin-left: 20px;
    }
    #zoom-jump {
        width: 70px;
        text-align: center;
        border: 2px solid #a6a8ab;
        border-radius: 6px;
    }
    #zoom-jump:after {
        content: '\25bc\a0';
        float: right;
    }
    #zoom-jump #jumpMag {
        display: inline-block;
    }
}


@media (max-width: 768px) {
    #zoom-jump.selected #zoom-buttons {
        display: block;
        position: absolute;
        z-index: 100;
        left: -2px;
        right: -2px;
        top: calc(100% + 2px);
        border-radius: 0;
        box-shadow: 0px 0px 8px #222222;
    }
    #zoom-jump {
        cursor: pointer;
    }
}


@media (max-width: 768px) {
    #menu #zoom-buttons li {
        width: 100%;
    }

    #menu #zoom-buttons li:not(:first-child) {
        border-left: 0;
        border-top: 1px solid #a6a8ab;
    }
}


#menu-other {
    display: inline-block;
    vertical-align: bottom;
}
@media (max-width: 768px) {
    #menu-zoom {
        margin-top: 12px;
    }
    #menu-other {
        margin-top: 10px;
        margin-bottom: 2px;
    }
}


#menu svg {
    width: auto;
    height: 20px;
    /*vertical-align: bottom;*/
    padding: 4px;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    cursor: pointer;
    fill: #d0d2d3;
    stroke: #d0d2d3;
    vertical-align: bottom;
}

#menu svg:hover {
    fill: #a6a8ab;
    stroke: #a6a8ab;
    border-color: #a6a8ab;
}

#menu svg.tool.selected {
    fill: #c51418;
    stroke: #c51418;
    border-color: #c51418;
}

#menu svg.window.selected {
    fill: #1466c4;
    stroke: #1466c4;
    border-color: #1466c4;
}

#menu svg#rescan-button {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: auto;
    border: 0;
}

#menu svg#rescan-button:hover {
    fill: #c51418;
}


svg#selectroi-button {
    margin: 0 30px;
    visibility: hidden;
}
@media (max-width: 768px) {
    svg#selectroi-button {
        margin: 0 40px 0 0;
    }
}
@media (min-width: 950px) {
    svg#selectroi-button {
        margin: 0 60px;
    }
}


/*
svg#roilist-button {
    visibility: hidden;
}
*/



#map-canvas {
    /*
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    box-shadow: 1px -1px 4px #444444;
    */
    display: block;
}




#aggregate-score td {
    text-align: right;
}

#aggregate-score td:first-of-type {
    padding-right: 8px;
}

.aggregate-score-button {
    display: block;
    margin: 4px auto 2px;
    padding: 2px 5px 4px;
}




.popup {
    display: none;
    padding: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border: 1px solid #808080;
    box-shadow: 0px 0px 6px #444444;
    z-index: 10;
}

.popup button.close {
    display: block;
    margin: 8px auto 0;
    padding: 2px 5px;
}


.rescan {
    display: none;
    padding: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border: 1px solid #808080;
    box-shadow: 0px 0px 6px #444444;
    z-index: 10;
}

.rescan input[type=radio] {
    margin: 4px 0;
}

.rescan input[type=radio]:first-of-type {
    margin-top: 8px;
}

.rescan label {
    margin-left: 2px;
}

.rescan div {
    text-align: center;
}

.rescan button {
    display: inline-block;
    margin: 8px 3px 0;
    padding: 2px 5px;
}

#rescan-error {
    display: inline-block;
    margin-top: 8px;
    color: #aa0000;
}

.rescan-title {
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 8px;
}




#roi-container {
    padding: 4px 8px;
    background: #ffffff;
    /*background: #f6f6f6;*/
    color: #000000;
    text-align: left;
    cursor: default;
    width: 230px;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
}

#roi-list {
    overflow-y: auto;
    flex: 0 1 auto;
    padding-right: 8px;
    padding-bottom: 5px;
}

#roi-container #roi-list div {
    padding: 0.1em 0;
    display: flex;
}

@media (max-width: 768px) {
    #roi-container #roi-list div {
        padding: 0.2em 0;
    }
}

#roi-container #roi-list div * {
    margin-top: auto;
    margin-bottom: auto;
}

#roi-container #roi-list div input[type=checkbox] {
    margin: auto 0;
}

#roi-container #roi-list label {
    margin-left: 0.5em;
    margin-right: 0.5em;
}

a.roi-only {
    margin-right: 0.75em;
    font-size: 0.9em;
}

#roi-container #roi-list div:first-child a.roi-only {
    visibility: hidden;
}

a.roi-delete {
    font-weight: bold;
    font-size: 2em;
    line-height: 0.6em;
    vertical-align: text-bottom;
    margin-right: 0.2em;
}

span.roi-options {
    margin-left: auto;
}

span.initializing {
    color: #ff0000;
    -webkit-animation: fadeAnimation 2s infinite;
    -moz-animation: fadeAnimation 2s infinite;
    -o-animation: fadeAnimation 2s infinite;
    animation: fadeAnimation 2s infinite;
}

span.running {
    color: #aaaa00;
    -webkit-animation: fadeAnimation 2s infinite;
    -moz-animation: fadeAnimation 2s infinite;
    -o-animation: fadeAnimation 2s infinite;
    animation: fadeAnimation 2s infinite;
}

span.done {
    color: #009900;
}

span.results a {
    color: #009900;
}

@keyframes fadeAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}
@-o-keyframes fadeAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadeAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}




:root {
  --movable-bar-height: 20px;/*20px;15px;*/
  --movable-border-size: 1px;
}

div.movable-container {
    position: absolute;
    /*border: var(--movable-border-size) solid var(--color-scheme-dark);*/
    /*border: 2px solid #cdcdcf;*/
    border: 1px solid #2e2e2e;
    box-shadow: 0px 0px 8px #222222;
    padding-top: var(--movable-bar-height);
    z-index: 1;
}

div.movable-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--movable-bar-height);
    /*background: linear-gradient(to bottom, var(--color-scheme-base) 0%, var(--color-scheme-lite) 50%, var(--color-scheme-base) 100%);*/
    background: #2e2e2e;/*#5c5c5c;*/
    background: linear-gradient(to bottom, #2e2e2e 0%, #4e4e4e 50%, #2e2e2e 100%);
}

div.movable-container.moving:before {
    /*background: linear-gradient(to bottom, var(--color-scheme-dark) 0%, var(--color-scheme-base) 50%, var(--color-scheme-dark) 100%);*/
    background: #2e2e2e;
    background: linear-gradient(to bottom, #4e4e4e 0%, #6e6e6e 50%, #4e4e4e 100%);
}

div.movable-container span.movable-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--movable-bar-height);
    cursor: move;
    color: #d0d2d3;
    font-weight: bold;
    font-size: 0.88em;
    line-height: var(--movable-bar-height);
    padding: 0 6px;
}

div.movable-container span.movable-handle span {
    float: right;
    cursor: pointer;
    padding: 0 5px;
    margin-right: -5px;
    font-weight: bold;
}

div.movable-container span.movable-handle span:hover {
    color: #c51418;
}




:root {
  --digital-zoom-height: 2em;
}

div.digital-zoom {
    position: absolute;
    background: rgba(255, 255, 96, 0.6);
    pointer-events: none;
    display: none;
}

div.digital-zoom::before {
    content: 'DIGITAL ZOOM';
    display: block;
    line-height: var(--digital-zoom-height);
    letter-spacing: 2px;
    text-align: center;
    font-weight: bold;
}

#digital-zoom-top {
    left: 0;
    right: 0;
    top: 0;
    height: var(--digital-zoom-height);
}

#digital-zoom-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--digital-zoom-height);
}

#digital-zoom-left {
    left: 0;
    top: var(--digital-zoom-height);
    bottom: var(--digital-zoom-height);
    width: var(--digital-zoom-height);
    writing-mode: vertical-lr;
    text-orientation: sideways;
    transform: rotate(180deg);
}

#digital-zoom-right {
    right: 0;
    top: var(--digital-zoom-height);
    bottom: var(--digital-zoom-height);
    width: var(--digital-zoom-height);
    writing-mode: vertical-lr;
    text-orientation: sideways;
}




#file-tree {
    background: #ffffff;
    /*background: #f6f6f6;*/
    padding: 5px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: auto;
}

#file-tree div.slide {
    border: 2px solid rgba(246, 246, 246, 0);
    padding: 0 16px 0 3px;
}

#file-tree div.slide.selected {
    border-color: #c51418;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="25" style="background-color: rgb(197, 20, 24); fill: rgb(246, 246, 246);"><path d="M24.285 5l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}

#file-tree span {
    display: block;
    margin: 0.5em;
    white-space: nowrap;
    cursor: pointer;
    color: #393939;
}

#file-tree img.thumb {
    height: 40px;
    width: auto;
    border: 1px solid var(--color-scheme-lite);
    cursor: pointer;
    margin-left: 5px;
}

#file-tree img.thumb:first-of-type {
    margin-left: 0;
}

#file-tree img.thumb + img.enlarge {
    height: 100px;
    width: auto;
    position: absolute;
    transform: translate(0, -30px);
    margin-left: 5px;
    border: 1px solid var(--color-scheme-dark);
    box-shadow: 0px 0px 8px #222222;
    visibility: hidden;
}

#file-tree img.thumb:hover + img.enlarge {
    visibility: visible;
}




#roi-deepliif {
    display: none;
    text-align: center;
    margin: 10px -4px 0;
    border: 1px solid #555555;
    padding: 5px 0;
    flex: 0 0 content;
}


#deepliif-enable-controls {
    display: inline-block;
    border: 1px solid #8f8f9d;
    border-radius: 4px;
    padding: 2px 5px;
    cursor: pointer;
    margin: 4px;
    background: #e9e9ed;
}

#deepliif-enable-controls:hover {
    border-color: #0066cc;/*#1466c4;*/
    color: #0066cc;/*#1466c4;*/
    background: #d9d9dd/*#abb5ca;*/
}


#score-table {
    border: 1px solid #abb5ca;
    margin: 5px auto;
}

#score-table tr td:first-child {
    padding-left: 5px;
}

#score-table tr td:last-child {
    padding-right: 5px;
}

#score-table tr:first-child td {
    padding-top: 1px;
}

#score-table tr:last-child td {
    padding-bottom: 1px;
}

#score-table td {
    text-align: right;
    padding: 0 1px;
}




input[type=range] {
    -webkit-appearance: none;
    height: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    width: 95%;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.4em;
    width: 0.7em;
    box-sizing: content-box;
    border: 1px solid #000000;
    border-radius: 3px;
    background: #dae5f2;/*var(--color-scheme-lite)*/;
    cursor: pointer;
    margin-top: -0.6em;
}
input[type=range]::-moz-range-thumb {
    height: 1.4em;
    width: 0.7em;
    box-sizing: content-box;
    border: 1px solid #000000;
    border-radius: 3px;
    background: #dae5f2;/*var(--color-scheme-lite)*/;
    cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.2em;
    cursor: pointer;
    background: var(--color-scheme-base);
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 0.2em;
    cursor: pointer;
    background: var(--color-scheme-base);
}


.slidersDiv {
    position: relative;
    height: 1.5em;
}

.slidersDiv input[type=range] {
    position: absolute;
    top: 50%;
    left: 2.5%;
}

.slidersDiv input[type=range]::-webkit-slider-thumb {
    z-index: 2;
    position: relative;
}

.slidersDiv input[type=range]::-moz-range-thumb {
    z-index: 2;
    position: relative;
}

.slidersDiv input.top[type=range]::-moz-range-track {
    background: transparent;
}


.slidersDiv output {
    position: absolute;
    display: none;
    z-index: 5;
    bottom: 1.6em;
    border: 2px solid #3d6acc;
    border-radius: 8px;
    background: #ffffff;
    padding: 4px 8px;
}
#slider-size-min-output, #slider-size-max-output {
    bottom: 1.7em;
}


.sliderLabel {
    position: relative;
    text-align: left;
    padding: 0 5px;
    margin: 15px 0 2px;
}


span.reset {
    width: 18px;
    height: 15px;
    position: absolute;
    bottom: 1px;
    right: 5px;
    cursor: pointer;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAC2ElEQVQ4T5VVXUgUURT+7t2ZneyHHgwiVnoo6EGpbV+KyjaU7MGkDIXEpDWCjIzMCi1ECyN/lgwURKwgScFkH1yiDDQoLEzzoa0oK2Ij6PfBfgh3x9356c6Oulu7M7rn6c7cw/nO+c53zyEqM5iZFMbbBzL6vAqejRJMfIo6Z2wlWJ9FkF/AY6ONJoxCjAFkfB2eRl0lwaOYoEa5bDpMcaFGwJol/3oYAEgYawmhwk3wa8Z/WwnFfpcFO9I5CJwC8beEl4MyrjZhLgHeTtB+XYBzNZlDIT9fBVXvHYKcKgG2yG8Ffo+I4uN68BWbKRqv8di+MjEFYBQONYdR26b783aKnn4B9plKyOTAlJpbSuBw8+hwcZD9QZRuAcYTOBu3SoKvPYSj9TrIqhIOt1t4LGNnRpGodhfKaHhMcfmpFbb+IIoaKAgh7FvAbq1crdEjKpY62b0hSgieMgm1Xp2ec0MpcG2IAKhqYDyAwjyCqX0U2d8V9I4AtjION0pk3O9U0NVDoESoEhhVJnW8CGBPDoGfuaSVcxio43UAIIzB02GcYIH+N5oKHKznUV7IRUo2t2l05yu49ASgqRR9r4VZANbazwGUOZgkYzA06Z2vtmLt8nhgIyBfSwBFTH06xYuiAJp6fO2M/3oaUc7ZJg556Zb5Uo67/+IJIJspULNTd1NiAWZ9FXYwkOQC4EwBVFHCn2kFH58DizMYNYz/ZM2EIqZGpqZMpiZNy1lXrOg4kCxFJk3WMlVFEY0OFTd/AILTggGPme7ja5OMZRrl39eqPzTN9nZa0Zy/0CpMHlpsLspkEDWZQD+rgqYSXPRaUbBuvqZLmOgK4VB1wlERvw+0l13MevFG0xNr9JE2K07uNKiEjZHhVglVbiQedon3gYIP90RUsiGogWiWlktRccyCXY4kx7XZRgu+C8J9Bugdm1+sSS6c2IAyvo2H4L0FPBwFfO+jdwtZmX8BFddYaJnx3PkAAAAASUVORK5CYII=");
    background-size: cover;
}

span.reset:hover {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAADAklEQVQ4T5VVbUhTYRR+pouwFCtrRbRmhl9ltFIwVz+cqGRFoWU1RcMoTfzVF5ozcdWEDARRyvwhWDpNV1KC5hdmVioV01ZWpHOYoIXkTKpbzG7vvfvQ5Xad59d77/u85znned9zDo8mBg6jjZMYbFXjbW0VDE87MaOzgIXgR4bAMzoegbI4+G5YClc7fnhcBKMdBeg8lYlfVqeOIvGC29liSK7IsMndFuOAgMLr/Eho5M/NaCHc0rPgl7oPW4K8sZwP/DToMNhUBW1OrjUAXmgGxDUlCPaeJeGNa+vo/npXBFyOxUbzf70qHm2JavaLF56D4OqrEK+zHz1tHEOP4ijeXXtmwu9SQtKajUBzJrzxh6l0w6EyeJTpceS0CPTgbah8z+CPHbDjq6KgLTyA3vPtLMQ1vQmxN/diBeODpofo5pjN+Pw4DluH78O91g+9mZ/Iluk7jKTLXPRQlx7u0h1wkAjB69Ce5I/hSiNZb4ePpg8RYpaApqe7FVBL8kAnyeExpsRUG8C/2ATpSSPeF5VgtLSZSHWBSHXDoVRM5L8116HamYUZsuZf6sDx/HATATCJrvRV+FhqR4Q1UgiKbkEq84cH13tm93RojiJqkAB5a5XYPZ5tIQBmRu+gWngClNWJ6emF5crgw4jppPXl8/BKzoBNEts8U22hmFxUPytHYHEOQoM87RYPF9eIaj9aEhtZiKibtiWwHGQ0tFeVziTBSWCkDPhOfcMXjR7LtkVAtNoZl7YYTomo7jxUShTsCY9yPY6liBbJwHHJjCeaasUDYTQmJwCXmHJENqZYq9sZJo5nOntcW2ApNC+srB3A4XiBM77ZJ+qw0OZ6+DvRgHuBB/GDZAFBAgI6y7EnYOkCJBQGypLxIq2Oxf3XKubPA0OPAvVheWxFghTa+ooaRMUIsMQODdPsXhYk442cVBexec3O0TzQP0pDB2mCLAkxl3gl/M8lQByyyHbNNXCmPtxFS3oGpp5MLyDRogfOXH8URnrU0Fao8ZUZmQMG86ZzI/Mf9wlvyJt2drQAAAAASUVORK5CYII=");
}