.whiteBackground {
  background: white;
}

.detailsTab .details {
  position: relative;
  top: 20px;
  width: 300px;
  float: left;
}

.detailsTab .tags,
.detailsTab .tagsosd {
  width: calc(100% - 300px);
  position: relative;
  float: left;
}

.detailsTab .tags {
  top: 20px;
}
.detailsTab .tagsosd {
  top: 150px;
}

.detailsTab .tagList {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 10px;
}

.detailsTab .tagList > div {
  padding: 3px 8px;
  margin: 3px;
  border: 1px solid var(--blue-7);
  border-radius: 15px;
}

.detailsTab .tagList i {
  width: 10px;
  padding: 0;
  color: var(--icon-color);
}

.detailsTab .tags > div:last-child,
.detailsTab .tagsosd > div:last-child {
  display: inline-block;
}

.tags input,
.tagsosd input {
  width: calc(100% - 16px);
  margin: 8px;
  outline: none;
  border: none;
  border-bottom: 1px solid #413e4f;
  padding-bottom: 2px;
  font-size: 11px;
}

.detailsTab table {
  padding: 10px;
  width: 265px;
  border-collapse: separate;
}

.detailsTab table td {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailsTab span.header5 {
  padding-left: 10px;
}

div[autocomplete] {
  width: 200px;
  padding-left: 10px;
  display: inline-block;
}

.autocomplete {
  width: 100%;
}

.autocomplete ul {
  left: 0;
  width: 100%;
  z-index: 100;
}

.autocomplete li {
  text-align: left;
  list-style: none;
  width: 100%;
  padding: 0.4em;
  background-color: #fff;
}

.autocomplete li.active {
  width: 100%;
  background-color: #4bf;
}

.autocomplete .highlight {
  background-color: #e2e2e2;
}

.autocomplete li.active .highlight {
  background: #666;
  color: #fff;
}

.detailsTab .access {
  position: relative;
  top: 50px;
  /*width: calc(100% - 100px);*/
  clear: both;
}

.detailsTab .slideaccess {
  position: relative;
  top: 150px;
  width: calc(100% - 100px);
  float: left;
}

.detailsTab .userdisplayname,
.detailsTab .ownerdisplayname {
  position: relative;
  top: 5px;
  width: 350px;
  float: left;
  left: 10px;
}

.detailsTab .ownerdisplayname {
  width: 480px;
}

.detailsTab .ownertext {
  position: relative;
  top: 5px;
  float: left;
}

.detailsTab .useraccess,
.detailsTab .useraccessosd {
  position: relative;
  top: 5px;
  float: left;
}

.useraccess select {
  background: #f0f1f1;
}

.detailsTab .removex {
  position: relative;
  float: left;
  top: 5px;
  bottom: 2px;
  left: 10px;
  color: #cc0a0a;
}

.detailsTab .endaccess {
  position: relative;
  clear: both;
  width: 0px;
  height: 1px;
}

.detailsTab .access i {
  width: 2px;
  top: 8px;
  color: #cc0a0a;
  position: relative;
  float: left;
  left: 20px;
}

detailsTab .sharing-select {
  border: none;
  outline: none;
}

.detailsTab .addmember {
  position: relative;
  clear: both;
  top: 30px;
  display: inline-block;
  left: 7px;
}

.detailsTab .publicaccessname {
  position: relative;
  top: 0px;
  width: 120px;
  float: left;
  left: 10px;
}

.detailsTab .publicpage {
  position: relative;
  top: 0px;
  min-height: 1px;
  min-width: 720px;
  float: left;
}

.detailsTab .publicpagecheckbox {
  position: relative;
  top: 0px;
  float: left;
}

.detailsTab .belowaccess {
  position: relative;
  clear: both;
  height: 20px;
}

.detailsTab .belowaddmember {
  position: relative;
  clear: both;
  height: 40px;
}

.publicpagecheckbox input[type='checkbox'] {
  visibility: hidden;
}

.anyoneWithLinkContainer {
  display: flex;
}

.addmember input {
  width: calc(100% - 16px);
  margin: 8px;
  outline: none;
  border: none;
  border-bottom: 1px solid #413e4f;
  padding-bottom: 2px;
  font-size: 11px;
}

.addmember div.edit {
  height: 21px;
  cursor: pointer;
  padding: 3px 8px;
  min-width: 100px;
  text-align: center;
  margin: 5px;
  background: #83859b;
  font-size: 13px;
  line-height: 15px;
  font-weight: 600;
  color: #f0f0f1;
  border: none;
}
.addmember div.edit:hover {
  background: #5f3362;
}

.addmember div.edit:hover {
  background: #5f3362;
}

select.sharing-select {
  border: none;
  outline: none;
  width: 180px;
}

select.sharing-select option {
  background: #f0f1f1;
}

.detailsTab .beforeincludedin {
  position: relative;
  clear: both;
  height: 40px;
}

/******************************************************************
							CHECKBOXES
*******************************************************************/

input[type='radio'],
input[type='checkbox'] {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  top: 3px;
  background: #fff;
  border: 1px solid rgb(178, 178, 178);
  cursor: pointer;
  overflow: visible;
  position: relative;
}

input[type='radio'] {
  border-radius: 50%;
}

input[type='radio']:focus {
  outline: none;
}

input[type='radio']:checked {
  background-image: url('../Content/openSeaDragon/checked-radio.svg');
  background-size: 6px;
  background-repeat: no-repeat;
  background-position: center center;
}

input[type='checkbox']:checked {
  background-image: url('../Content/openSeaDragon/checked.svg');
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center center;
}

.pageAccessTab .publicaccessname,
.pageAccessTab .publicpage {
  margin-top: 20px;
}

.pageAccessTab .anyoneWithLinkContainer {
  margin-top: 10px;
}

/* @todo: This whole file should be dismantled once the visual styles for the Image Viewer's pop-up wizards are updated */

.actionBarOptions {
    display: flex;
    margin-top: 5px;
    margin-bottom: 5px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-size: 14px;
}

.actionBarOptions > div:first-child {
    cursor: pointer;
}

.actionBarOptions .fix {
    line-height: 40px;
}

.actionBarOptions .actionBarArrow {
    width: 16px;
    margin-left: 10px;
    margin-right: 4px;
}

.actionBarOptions i:hover {
    color: #5F3362;
}

.iaRunBar.create > .content {
    min-height: 240px;
    display: inline-block;
    width: 100%;
}

.iaRunBar .accessIARun select {
    margin: 5px 0 5px 5px;
    width: 100%;
    font-size: 12px;
}

.iaRunBar .accessIARun select.disabled {
    color: gray;
}

.scoringPanel.create > .content {
    min-height: 240px;
    display: inline-block;
    width: 100%;
}

.annotationBar .content .annotation-element-small {
    padding-bottom: 5px;
    display: flex;
}

.annotationBar .content .annotation-element-small p {
    margin: 0 10px;
}

.annotationBar .content textarea {
    min-height: 50px;
    max-height: 250px;
    resize: vertical;
    width: 100%;
    padding-bottom: 5px;
    vertical-align: top;
    margin-top: 10px;
}

.annotationDropdown > label {
    display: inline-block;
    width: 90px;
}

.annotationDropdown > input[type="range"] {
    vertical-align: middle
}

.annotationDropdownList li {
    display: flex;
    justify-content: space-between;
    line-height: 18px;
}

.annotationDropdownList li a {
    font-size: 12px;
    text-decoration: underline;
    color: black;
    cursor: pointer;
}

.annotationDropdownList li i {
    font-size: 13px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: #C7C8D2;
    color: #83859B;
    border-radius: 10px;
}

.annotationDropdownOptions {
    display: flex;
}

.annotationDropdownOptions>div {
    width: 50%;
    margin: 10px;
}

.annotationDropdownOptions label {
    display: block;
}

.annotationDropdownOptions select {
    width: 100%;
}

.iaRunDropdown {
    min-height: 60px;
}

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

.iaRunDropdownOptions {
    padding: 10px;
}

.scoringPanelDropdown {
    min-height: 60px;
}

.iaRunDropdownOptions {
    padding: 10px;
}
.scoringPanelDropdownOptions {
    padding: 10px;
}

#scoringMarking .table-container {
    width:100%;
    height: 90px;
    background: white;
}

#scoringFeature p.scoringFeature{
    margin-top:5px;
    margin-bottom:10px;
}

#scoringFeature p.scoringFeature,  .scoringRegionOfInterestLi{
    justify-content: space-between;
    line-height: 18px;
}

#scoringFeature p.scoringFeature > i, .scoringRegionOfInterestLi > i{
    font-size: 13px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: #83859B;
    border-radius: 10px;
}

.scoringRegionOfInterestLi > td {
    cursor: pointer;
}

.scoringRegionOfInterestLi >.regionRemove{
    width:17px;
}

.scoringRegionOfInterestLi >.regionSize{
    width:30px;
}

table.scoringMarking {
    width:100%;
    text-align: right;
}

table.scoringMarking td:first-child, table.scoringMarking th:first-child {
    text-align: left;
}

#newFreeAnnotationTools p, #editAnnotationTools p, #editAreaAnnotationTools, #newAreaAnnotationTools p, #tmaTool p {
    margin: 0;
    padding-top: 5px;
    padding-bottom: 3px;
}

.featureList {
    margin-left: 5px;
    margin-right: 10px;
}

#iaRunTools .pencil > p {
    display: inline;
}

#iaRunTools .pencil > i {
    font-size: large;
}

#iaRunTools h4 {
    color: black;
    margin-top: 5px;
}

.areaButtons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 33px;
}

.edit.disabled {
    background-color: lightgrey;
    cursor: default;
}

.listElement {
    -webkit-transition: all 2s 1.5s ease-out;
    -moz-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 5px;
    border-bottom: 1px solid lightgrey;
}

.listElement .thumbnail {
    background-size: cover;
    width: 80px;
    min-width: 80px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.iaRunListElement .thumbnail {
    border: 3px #83859B solid;
}

.listElement .iaRunProperties {
    margin-left: 5px;
    width: 100%;
}

.iaBatchesLoading {
    margin-right: 10px;
}

.listElement .thumbnailContainer {
    display: flex;
    width: 100%;
}

.listElement .iaRunProperties p.error {
    color: red;
    font-weight: bold;
}

.listElement .iaRunProperties .name {
    width: 98px;
}

.listElement .iaRunProperties .iaRunName {
    width: 120px;
}

li a.selected {
    font-weight: bold;
}

.listElement .thumbnail.incomplete {
    cursor: not-allowed;
}

.iaRunListElement .iaRunList {
    width: 100%;
    margin-left: 10px;
}


.iaRunListElement p.iaRunDropdownCaption {
    font-size: 13px;
}

p.iaRunDropdownCaption i {
    font-weight: bold;
    font-size: 20px;
    margin-left: 5px;
}

.iaRunListElement ul {
    width: 100%;
    margin-top: 5px;
}

.iaRunListElement li {
    position: relative;
    line-height: 22px;
    width: 235px;
    display: flex;
    justify-content: space-between;
}

.iaRunListElement li div {
    font-size: 12px;
    margin-left: auto;
    padding-right: 3px;
}

.iaRunListElement a {
    margin-left: 5px;
}

.iaRunListElement li i {
    margin-right: 3px;
    margin-top: 3px;
}

.iaRunListElement li.selected {
    background: lightgrey;
}

.iaRunListElement .iaRunFilter {
    width: 100%;
    font-size: 12px;
    height: 25px;
}

.deleteIA {
    position: absolute;
    top: 10px;
    right: 10px;
}

.showResults {
    position: absolute;
    top: 35px;
    right: 8px;
}

.showResults input {
    width: 14px;
}

.annotationShow {
    position: absolute;
    top: 7px;
    right: 12px;
    font-size: 12px;
}

.annotationShow input {
    margin-left: 5px;
    top: 3px;
}

.tmaLablesShow {
  display: inline-block;
  position: absolute;
  top: 7px;
  right: 12px;
  font-size: 12px;
}

.tmaLablesShow input[type="checkbox"] {
    margin-left: 5px;
    top: 3px;
    width: 16px !important;
    height: 16px;
}

.annotation-element-small > div:nth-child(2) {
    width: 150px;
}
.annotation-element-small > div:last-child {
    font-size: 12px;
    margin-top: 10px;
    word-wrap: break-word;
    white-space: normal;
}

.visibilityToggle {
    display: inline-flex;
    padding: 5px;
    width: 100%;
    padding-left: 0;
}

.shapesMeasuresFree {
    display: flex;
    justify-content: space-between;
}
.shapesMeasuresGroup {
    display: flex;
    justify-content: space-around;
}

.shapesMeasures > * {
    box-sizing: content-box;
    padding: 5px;
    text-align: center;
    width: 20px;
    line-height: 20px;
    height: 20px;
    font-size: 20px;
}

.shapesMeasures .tmaTool {
    width: 40px;
}

.shapesMeasuresGroup .fullSlide {
    font-size: 28px;
}

.shapesMeasures > div:first-child {
    margin-left: 20px;
}

.shapesMeasures .withImage {
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center;
}

#tmaTool input[type='text'], #tmaTool input[type='number'] {
    width: 90%;
}

#tmaTool .tmaMargins {
    display: flex;
}

#recognizeSpotsBtn, #showDataGrid {
    width: 120px;
}

#createGridBtn {
    width: 100px;
}

#importGridDataBtn {
    width: 130px;
}

#dataGridOverlay .dataGrid {
    width: 798px;
    height: 350px;
    margin-bottom: 5px;
    font-size: 10px;
}

#dataGridOverlay .content {
    width: 805px;
    z-index:110;
}

#importGridOverlay h1 {
    padding: 0;
    margin-top: 10px;
}

#importGridOverlay textarea {
    font-size: 12px;
    line-height: 12px;
}

#importGridOverlay .orientation {
    justify-content: center;
}

#importGridOverlay .orientation .edit {
    width: 40px;
    min-width: 40px;
}

#importGridOverlay .orientation .rotate.selected {
    background-color: #5F3362;
}

.ui-grid-cell-contents {
    padding: 2px;
}

.ui-grid-cell-contents.selected {
    border: 1px solid red;
}

.scoringClasses{
    height: 90px;
    margin: 0px;
    padding:0px;
}

.addScoringFeature > div{

}

.addScoringFeature .content{
    width:300px;
}

.addScoringFeature .content > div{
    padding-left:7px;
    padding-right:7px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

.addScoringFeature .caption >div{
    text-align: center;
}

.addScoringFeature label {
    font-size: 14px;
}

.addScoringFeature p {
    margin: 0px;
    margin-left: 5px;
}

.disabled{
    background-color: rgb(235, 235, 228);
}

.scoringClasses > ul {
    height: 90px;
    margin:0px;
    padding: 0px;
    overflow-y: scroll;
    border: 2px solid #ccc;
    font-size: 14px;

    -webkit-overflow-scrolling: touch;
}
.bordable{
    border: 2px solid #ccc;
    font-size: 14px;
    margin:0px;
    padding: 0px;
    overflow-y: auto;
}
.regionList{
    height: 80px;
    background: white;
}

.regionList > .pointer {
    cursor: pointer;
}

.scoringClasses > ul >li {
    font-size: 14px;
    margin-left: 4px;
}

.scoringMarking >tbody >tr >td.selected{
    font-weight: 500;
}

table.scoringMarking tr.selected {
    background: rgba(199, 200, 210, 0.25);
}

table.scoringMarking td, table.scoringMarking th {
    padding: 1px 2px;
}

.scoringMarking >tbody >tr >td.className {
    cursor: pointer;
}

.featureToggle >select{
    font-size: 14px;
    width: 100%;
}

#scoringRegionOfInterest .shapesMeasures > div:first-child, #scoringMarking .shapesMeasures > div:first-child{
   margin-left: 0px;

}

#scoringRegionOfInterest .shapesMeasuresGroup,#scoringMarking .shapesMeasuresGroup {
    justify-content: flex-start;
}

.wholeSlide, .wholeROI{
    width: auto;
}

.wholeSlide >label,.wholeROI >label{
    font-size: 16px;
}

@import url('../Content/openSeaDragon/access.css');

* {
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
}

body {
  --side-panel-width: 318px;
  --panel-selector-width: 60px;
  --panel-selector-item-height: 55px;
  --slide-tray-width: 240px;
  background-image: linear-gradient(
    -45deg,
    #e7e7e7 25%,
    #f0f1f1 25%,
    #f0f1f1 50%,
    #e7e7e7 50%,
    #e7e7e7 75%,
    #f0f1f1 75%,
    #f0f1f1
  );
  background-size: 4px 4px;
  overflow: hidden;
  color: #1a3358;
  font-weight: 500;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

a {
  text-decoration: none;
  color: #536d9d;
}

.header1 {
  color: #413e4f;
  font-size: 20px;
  line-height: 24px;
}

.header2 {
  color: #413e4f;
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;
}

.header3 {
  color: #413e4f;
  font-weight: 300;
  font-size: 15px;
  line-height: 18px;
}

.header4 {
  color: #83859b;
  font-size: 14px;
  line-height: 17px;
}

.header5 {
  color: #413e4f;
  font-weight: 300;
  font-size: 13px;
  line-height: 15px;
}

.header6 {
  color: #83859b;
  font-size: 11px;
  line-height: 13px;
}

.header7 {
  color: #83859b;
  font-weight: 300;
  font-size: 11px;
  line-height: 13px;
}

header {
  width: 100%;
  display: flex;
  z-index: 100 !important;
  position: absolute;
  flex-wrap: wrap;
  pointer-events: none;
}

header > * {
  pointer-events: auto;
}

header.whiteBackground {
  background: white;
  pointer-events: auto;
}

.logo {
  width: 240px;
  display: flex;
  z-index: 100 !important;
  position: absolute;
  top: 0;
  padding: 10px;
  height: 83px;
}
.logo img {
  height: 100%;
}

/* Use a subtle and unified border glow around the elements that are laid directly on top of the image */
.logo img,
.headerOptions {
  filter: drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.6))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.6)) drop-shadow(1px 0 0 rgba(255, 255, 255, 0.6))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

.headerOptions {
  display: flex;
  line-height: 55px;
  justify-content: space-between;
  width: calc(100% - 250px);
  font-weight: bold;
  z-index: 100 !important;
  margin-left: 250px;
  pointer-events: none;
}

.headerOptions > * {
  line-height: 55px;
  pointer-events: auto;
}

.headerOptions i {
  line-height: 55px;
  font-size: 24px;
  margin: 0 20px 0 5px;
  cursor: pointer;
}

.headerOptions i:hover {
  color: #5f3362;
}

.headerOptions i:first-child {
  margin-left: 50px;
}

.headerOptions > div:nth-child(1) {
  cursor: default;
}

.headerOptions > div:nth-child(2) {
  margin-left: auto;
}

.publicHeader > div {
  display: flex;
  flex-direction: row;
}

.publicHeader > div > div {
  cursor: default;
}

.fa-chevron-right.empty {
  color: lightgrey;
}

.logo > div sup {
  display: inline-block;
  font-size: 10px;
  top: -12px;
}

.slide-viewer {
  z-index: 1 !important;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slide-viewer header.slide {
  background: none;
  display: flex;
  flex-wrap: wrap;
}

.slide-viewer header .options > div:not(:first-child) {
  width: 100px;
  text-align: center;
  cursor: pointer;
}

.optionsDropdown i {
  margin-left: 10px;
}

.optionsDropdown {
  margin-right: 40px;
  cursor: pointer;
}
.optionsDropdown:hover {
  color: #5f3362;
}

header .dropdown {
  top: 55px;
  z-index: 100 !important;
  width: 100%;

  display: flex;
  justify-content: space-between;
}

.options {
  display: flex;
  justify-content: flex-start;
}

.options > div {
  padding: 25px 10px 10px 10px;
  border-bottom: 5px solid #c7c8d2;
}

.options > div:first-child {
  padding: 15px 8px;
}

.options > div.navSelect {
  border-bottom: 5px solid #5f3362;
}

.options > div:not(:first-child) {
  cursor: pointer;
}

.options > div:not(:first-child):hover {
  color: #5f3362;
  border-bottom: 5px solid #5f3362;
}

header .dropdown .icons {
  position: absolute;
  width: 480px;
  right: 55px;
  display: flex;
}

header .dropdown .icons .iconSection {
  display: flex;
  flex-wrap: wrap;
}

header .dropdown .icons .iconSection div {
  width: 90px;
  margin: 5px 10px 5px 0;
  color: #83859b;
  cursor: pointer;
  font-size: 12px;
}

header .dropdown .icons .iconSection.helpIcons div {
  width: 128px;
}

header .dropdown .icons .iconSection div:hover {
  color: #5f3362;
}

header .dropdown .icons .iconSection i {
  padding-right: 10px;
  font-size: 18px;
}

header .dropdown .flex {
  display: flex !important;
}

/* main content */

.slide-viewer {
  z-index: 1;
  height: calc(100vh - 55px);
  width: 100%;
}

#tools h4 {
  margin: 0;
  line-height: 30px;
  font-size: 14px;
  font-weight: 500;
}

input,
textarea {
  padding: 3px;
}

.annotationDropdownList {
  overflow-y: scroll;
  max-height: 150px;
}

.slideTray {
  --gutter-width: 10px;
  padding-top: 90px; /* Make room for the logo */
  position: absolute;
  background: white;
  border-right: 1px solid var(--blue-1);
  box-sizing: content-box;
  width: var(--slide-tray-width);
  left: 0;
  top: 0;
  bottom: 0;
  transition: width 0.1s ease-in-out;
  z-index: 90;
}

.slideTray.minimized {
  width: 5px;
}

.slideTray .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slideTray .action,
.caseTray .action {
  cursor: pointer;
}

.slideTray .header {
  width: var(--slide-tray-width);
}

.slideTray .title {
  flex: 0 0 auto;
  margin: 7px var(--gutter-width);
  font-size: 17px;
  font-weight: 500;
  line-height: 21px;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.slideTray .info {
  flex: 0 0 auto;
  height: 20px;
  margin: 0 var(--gutter-width) 10px var(--gutter-width);
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.slideTray input.slideFilter {
  flex: 0 0 auto;
  margin: 5px var(--gutter-width);
  font-size: 14px;
  font-weight: 400;
}

.slideTray .clinicalTools {
  margin: 0 var(--gutter-width) 10px var(--gutter-width);
}

.slideTray .slides {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  padding: var(--gutter-width);
  border-top: 1px solid var(--blue-1);
}

.slideTray .slide {
  flex: 0 0 auto;
  width: calc(var(--slide-tray-width) - var(--gutter-width) * 2);
  margin-bottom: 20px;
}

.slideTray .slide .thumbnailContainer {
  background: #eee;
  padding: 5px;
  margin-bottom: 5px;
}

.slideTray .slide.current .thumbnailContainer {
  background: var(--blue-4);
}

.slideTray .slide:hover .thumbnailContainer {
  background: var(--blue-2);
}

.slideTray .slide .thumbnail {
  height: 96px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.slideTray .slide .name {
  overflow-wrap: break-word;
  font-size: 14px;
  font-weight: normal;
  color: var(--link-text);
}

.slideTray .slide.current .name {
  font-weight: 500;
}

.slideTray .slide:hover .name {
  color: var(--link-text-hover);
}

.slideTray .minimizeButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(50vh - 10px);
  right: -21px;
  width: 20px;
  height: 40px;
  background: white;
  cursor: pointer;
  z-index: 1001;
  border: 1px solid var(--blue-1);
  border-left: none;
  color: var(--blue-4);
}

.caseTray {
  --gutter-width: 10px;
  position: absolute;
  background: white;
  border-right: 1px solid var(--blue-1);
  left: var(--slide-tray-width);
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 201;
  padding-top: 55px;
}

.caseTray .slides {
  max-height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.caseTray .slide {
  --thumbnail-size: 256px;
  --thumbnail-padding: 5px;
  width: calc(var(--thumbnail-size) + 2 * var(--thumbnail-padding));
  flex: 0 0 auto;
  margin: 0 5px 15px 5px;
}

.caseTray .slide .thumbnailContainer {
  background: #eee;
  padding: var(--thumbnail-padding);
  margin-bottom: 2px;
}

.caseTray .slide.current .thumbnailContainer {
  background: var(--blue-4);
}

.caseTray .slide:hover .thumbnailContainer {
  background: var(--blue-2);
}

.caseTray .slide .thumbnail {
  height: var(--thumbnail-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.caseTray .slide .name {
  overflow-wrap: break-word;
  font-size: 14px;
  font-weight: normal;
  color: var(--link-text);
}

.caseTray .slide.current .name {
  font-weight: 500;
}

.caseTray .slide:hover .name {
  color: var(--link-text-hover);
}

#summaryToggleButton {
  z-index: 101; /* Keep the button above the options bar, as they overlap a little, and we want the entire button area to be clickable */
  position: absolute;
  left: calc(var(--slide-tray-width) + 10px);
  top: 50px;
}

.panelSelectorStack {
  position: absolute;
  max-height: 100vh; /* If necessary, this allows the flex layout to squeeze the stack to fit vertically. The media queries handle the proper layout changes, though. */
  padding-top: 60px;
  z-index: 90;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.panelSelector {
  width: var(--panel-selector-width);
  z-index: 90;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: white;
  border: 1px solid var(--blue-1);
  border-right-width: 0;
  margin-bottom: 10px;
  pointer-events: auto;
}

.panelSelector .selectPanel {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--panel-selector-item-height);
  font-size: 12px;
}

.panelSelector .selectPanel:hover {
  background: var(--blue-1);
}

.panelSelector .selectPanel.selected {
  background: var(--blue-3);
}

.panelSelector .selectPanel i.fa {
  display: block;
  font-size: 24px;
}

#tools {
  align-items: center;
}

#tools button {
  height: 30px;
  width: 30px;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 0 10px 0;
  padding: 0;
}

/* This is a hack to hide the inline-styled div that OpenSeaDragon automatically adds to the "tools" element. It messes up the layout in Edge. */
#tools > div:last-of-type {
  display: none;
}

#tools button i.fa {
  margin: 0;
  line-height: 30px;
  font-size: 20px;
}

#tools button.measure-tape {
  background-image: url('../Content/openSeaDragon/images/length-icon-blue.svg');
  background-size: 18px;
}
#tools button.measure-tape.toolEnable {
  background-image: url('../Content/openSeaDragon/images/length-icon-white.svg');
}

#tools button.area {
  background-image: url('../Content/openSeaDragon/images/area-icon-blue.svg');
  background-size: 23px;
}
#tools button.area.toolEnable {
  background-image: url('../Content/openSeaDragon/images/area-icon-white.svg');
}

div.changeImage {
  z-index: 100000;
  position: fixed;
  bottom: 20px;
  right: 90px;
  width: 250px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(96, 92, 92, 0.6) !important;
}

div.changeImage input {
  width: 170px;
  border: none;
  box-shadow: none;
  z-index: 1000 !important;
}

div > input[type='range']:focus {
  outline: none;
}

/*hide the outline behind the border*/
div > input[type='range']:-moz-focusring {
  outline: 0px solid white;
  outline-offset: -1px;
}

#tools img {
  width: 25px;
  display: block;
  margin: auto;
}

.editAnnotationBtn {
  cursor: pointer;
  font-size: 12px;
}

.editAnnotationBtn:hover {
  color: #5f3362;
}

input.editShape {
  width: 100%;
}

#tagInput {
  padding-left: 0;
  width: 100%;
}

#editShapeTools label {
  padding-bottom: 8px;
  padding-top: 5px;
  display: block;
}

#editShapeTools h3 {
  padding-top: 15px;
  margin: 0;
}

.shapeTags input {
  background-color: #f0f1f1;
  border: none transparent;
  border-bottom: 1px solid black;
  outline: none;
  width: 100%;
}

.visibilityToggle label {
  padding-right: 10px;
}

.visibilityToggle select.disabled {
  color: gray;
}

.listElement h3,
.listElement p {
  margin-left: 5px;
}

.listElement h3 {
  font-size: 14px;
}

.listElement p {
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 5px;
}

.annotation-element-small.small-right > div:first-child {
  width: 50px;
  height: 35px;
}

.content-options {
  border-top: 1px solid #413e4f;
}

.scrollable {
  overflow-y: auto;
  overflow-x: hidden;
}

.annotationDropdown .description {
  width: 100%;
  font-size: 13px;
  margin-top: 2px;
}

#ovg-toolbar {
  height: 34px;
  z-index: 100;
}

.ui-button:focus {
  outline: none !important;
}

.ui-dialog-titlebar-close {
  display: none !important;
}

.ui-dialog-content {
  padding: 0.5em 0 !important;
}

#openseadragon1 {
  height: 100%;
  position: absolute;
  top: 0;
}

#openseadragon1 > .loadingCircle {
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  position: absolute;
  z-index: 200;
}

.openseadragon-canvas > svg {
  z-index: 50;
}

.openseadragon-canvas .resultCanvas {
  z-index: 60;
}

div.navigator {
  z-index: 90;
  background: rgba(96, 92, 92, 0.6) !important;
}

.ovg-viewport {
  width: 800px;
}

.pencil-settings-buttons > div {
  width: 33%;
  float: left;
  text-align: center;
}

.pencil-settings-button {
  border: 1px solid #a6c9e2;
  height: 32px;
  line-height: 32px;
  margin: 0 2px;
  vertical-align: middle;
  cursor: pointer;
}

fieldset {
  border: 1px solid #a6c9e2;
}

fieldset legend {
  font-size: 12px;
}

#paintbrush-width {
  font-size: 40px;
}

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

.slider-value {
  font-size: 40px;
}

.slider-unit {
  font-size: 15px;
}

.selected-marker > path {
  stroke: red !important;
}

.selected-marker > text {
  fill: red !important;
}

#ovg-marker-table {
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}

#ovg-marker-body tr {
  border-bottom: 1px solid #a6c9e2;
}

.ovg-marker-radio {
  width: 25px;
}

.ovg-marker-color {
  width: 52px;
}

.ovg-marker-value {
  width: 50%;
  text-align: right;
}

.ovg-marker-percent {
  width: 50%;
  text-align: left;
}

#ovg-marker-plus {
  margin-top: 15px;
}

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

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

.ui-button {
  font-weight: normal !important;
  font-size: 15px !important;
}

input[type='range'].vVertical {
  outline: none;
  -webkit-appearance: none;
  background-color: #f0f1f1;
  width: 150px;
  height: 35px;
  margin-top: 25px;
  -webkit-transform: translate(-50px, 35px) rotate(270deg);
  -moz-transform: translate(-50px, 35px) rotate(90deg);
  -o-transform: translate(-50px, 35px) rotate(90deg);
  -ms-transform: translate(-50px, 35px) rotate(90deg);
  transform: translate(-50px, 35px) rotate(270deg);
  z-index: 1000 !important;
}

div.edit,
a.edit,
input.edit,
button.edit {
  height: 21px;
  cursor: pointer;
  padding: 3px 8px;
  min-width: 100px;
  text-align: center;
  margin: 5px;
  background: #83859b;
  font-size: 13px;
  line-height: 15px;
  font-weight: 600;
  color: #f0f0f1;
  border: none;
}

.highlight {
  color: tomato;
  font-weight: bold;
}

.toolEnable,
.toolEnable:hover {
  background: var(--blue-6);
  color: white;
}

.toolUnavailable {
  color: #aaaaaa;
}

.detailsTab .details {
  position: relative;
  top: 150px;
  width: 250px;
  float: left;
}

.detailsTab .tags {
  width: calc(100% - 300px);
  position: relative;
  top: 150px;
  float: left;
}

.detailsTab .layers {
  padding-top: 50px;
  position: relative;
  clear: both;
  top: 150px;
}

.detailsTab .layers .layerSlides {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  list-style: none;
}

ul[dnd-list] .dndDraggingSource {
  display: none !important;
}

ul[dnd-list] .dndPlaceholder {
  display: block;
  background-color: #c7c8d2;
  height: 110px;
  width: 161px;
  margin: 5px 20px;
  border: 2px #666 dashed;
}
#iaRunTools h4 {
  color: darkslategray;
  margin-bottom: 10px;
}

.dragFrom {
  display: flex;
}

.elementFrom {
  margin: 5px 20px;
  height: 160px;
  text-align: center;
  position: relative;
}

.elementFrom .delete {
  position: absolute;
  color: #cc0a0a;
  font-size: 13px;
  right: 8px;
  top: 8px;
}

.elementFrom .content > div {
  background: no-repeat center center;
  background-size: cover;
  height: 55px;
  width: calc(161px / 3);
}

.elementFrom .content {
  display: flex;
  flex-wrap: wrap;
  width: 161px;
  height: 110px;
  position: relative;
  background: #c7c8d2;
}

.elementFrom .content > div:only-child {
  background: no-repeat center center;
  background-size: cover;
  height: 110px;
  width: 161px;
}

.elementFrom .caption {
  background: #f0f0f0;
  padding: 8px 0;
}

.elementFrom .content span,
.elementTo .content span {
  height: 60px;
  width: 33.333%;
  background: rgba(255, 255, 255, 0.65);
  position: absolute;
  color: #5f3362;
  bottom: 0;
  right: 0;
  z-index: 0;
  padding-top: 20px;
}

.detailsTab {
  background: white;
  width: 100%;
  height: 100vh;
  z-index: 1;
  position: absolute;
  overflow: auto;
  padding-left: 15px;
}

.fa {
  cursor: pointer;
}
.rename-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1500;
  width: 100%;
}

.rename {
  display: flex;
  margin: auto;
  width: 580px;
  background: #f0f1f1;
  align-items: center;
  border-width: 1px 1px 0px 1px;
  border-color: black;
  border-style: solid;
  z-index: 1500;
  padding: 0 10px;
}

.rename > div:nth-child(3) {
  margin-left: 0;
}

input.invalid-input:focus {
  border: 1px solid #789ad2;
  outline: 1px solid #789ad2;
  border-radius: 2px;
}

input.invalid-input.ng-invalid {
  border: 1px solid tomato;
  outline: 1px solid tomato;
  border-radius: 2px;
}

button.edit[disabled]:hover {
  background: #83859b;
}

.rename input {
  height: 24px;
  width: 230px;
  margin: 4px 0 4px 4px;
  padding-left: 2px;
}

/**********************     DELETE WIZARD     ***************************/

#delete-item {
  position: fixed;
  display: flex;
  z-index: 1500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 12px;
}

.delete-item-content {
  margin: auto;
  /*width: 300px;*/
  background: #f0f1f1;
}

#delete-item .buttons {
  display: flex;
  justify-content: space-between;
}

#delete-item .buttons .edit {
  margin: 10px;
}

#delete-item .caption {
  margin-left: 5px;
  margin-right: 5px;
}

#delete-item .caption h1 {
  font-size: 20px;
  padding: 10px;
  line-height: 25px;
}

#delete-item .content {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

/******************************************************************
                            LEFT NAV BAR
*******************************************************************/

/**********************     GENERAL     ***************************/

/* @todo: The image viewer has no left nav bar. Is ALL of this stuff just cruft? Could a wizard pop-up use these? */
.left-nav-bar {
  position: fixed;
  z-index: 1000;
  display: block;
  left: 0;
  width: 270px;
  height: 100%;
  background: white;
  float: left;
  text-align: center;
  border-right: 2px solid #f0f0f0;
}

.left-bottom {
  width: 100%;
  max-height: calc(100% - 438px);
}

.left-list > ul > li {
  text-align: center;
  background: white;
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
}

.left-list.collectionList > ul > li {
  text-align: left;
}

.left-list > ul > li > ul {
  max-height: calc(100% - 400px);
  overflow: auto;
  -ms-overflow-style: none;
}

.left-list > ul > li > a {
  height: 36px;
  border-bottom: 6px solid #536d9d;
  padding: 0 30px;
  display: block;
  text-align: left;
  line-height: 36px;
}

.left-list > ul > li > div:not(:first-child) {
  background: white;
}

.left-list > ul > li > div {
  width: 46px;
  line-height: 46px;
  text-align: center;
  color: #413e4f;
  font-weight: 300;
  font-size: 15px;
}

.left-list > ul > li > div a {
  color: #413e4f;
}

.left-list > ul > li > div:first-child i {
  width: 24px;
  text-align: center;
}

.left-items > div:first-child {
  margin-bottom: auto;
  background: #f0f0f0;
}

.left-items.selected > div:first-child {
  margin-bottom: auto;
  background: #536d9d;
}

.left-items ul.dropdown {
  display: none;
}

.triangle-right {
  width: 15px;
  height: 15px;
  background: url(../Content/openSeaDragon/triangle-right.svg) no-repeat center center;
  background-size: 7.5px;
}

.triangle-down {
  width: 15px;
  height: 15px;
  background: url(../Content/openSeaDragon/triangle-down.svg) no-repeat center center;
  background-size: 12px;
}

div.selected > div:nth-child(2) {
  position: relative;
}

div.ieTooltip {
  position: absolute;
  text-align: center;
  padding: 2px;
  font: 12px sans-serif;
  background: lightyellow;
  border: 0;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1000;
}

.createdHighlight {
  background-color: #ffff88;
}

#exit-full-page {
  font-size: 24px;
  width: 24px;
  height: 24px;
  text-align: center;
  background: #c7c8d2;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10000;
}

.adminPopup {
  color: #83859b;
}

.copy-move.exportPanel .item-content {
  min-width: 240px;
  position: absolute;
  top: 100px;
  left: 100px;
}

.copy-move.exportPanel h4,
.copy-move.exportPanel h1 {
  margin: 10px;
}

.copy-move.exportPanel .exportOptions {
  display: flex;
}

.copy-move.exportPanel .buttonBar {
  display: flex;
}

.copy-move.exportPanel #exportSelect {
  margin-left: 10px;
  width: 60%;
  max-height: 2em;
}

.copy-move.exportPanel #exportFiletype {
  margin-left: 20px;
  width: 40%;
  text-align: left;
}

.copy-move.exportPanel .item-content .cancelButton input {
  color: #83859b;
  background: #f0f1f1;
  font-weight: normal;
}

.copy-move.exportPanel .item-content .cancelButton input:hover {
  color: #5f3362;
}

.notificationPopup {
  position: fixed;
  background: white;
  top: -50px;
  left: calc(50% - 150px);
  padding: 10px;
  border: 1px lightgray solid;
  border-radius: 5px;
  z-index: 1000;
}

.notificationPopup span {
  font-weight: 700;
  margin-left: 20px;
  color: #5f3362;
  cursor: pointer;
}

#tmaTool .loadingCircle {
  position: absolute;
  top: 155px;
  left: 130px;
}

#confirm-ia-run-wizard {
  position: fixed;
  display: flex;
  z-index: 1500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 12px;
}

#confirm-ia-run-wizard .content {
  margin: auto;
  background: #f0f1f1;
}

#confirm-ia-run-wizard .buttons {
  display: flex;
  justify-content: space-between;
}

#confirm-ia-run-wizard .buttons .edit {
  margin: 10px;
}

#confirm-ia-run-wizard .caption {
  margin-left: 5px;
  margin-right: 5px;
}

#confirm-ia-run-wizard .caption h1 {
  font-size: 20px;
  padding: 10px;
}

#confirm-ia-run-wizard .content {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#confirm-ia-run-wizard .content p {
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
}

#confirm-ia-run-wizard .content h1 {
  font-size: 18px;
}

#confirm-ia-run-wizard .content .slicker {
  margin: auto;
  margin-top: 20px;
}

#confirm-ia-run-wizard .image {
  margin: auto;
  margin-top: 20px;
  width: 215px;
  height: 130px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.sidePanel {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    color: #1a3358;
    background: white;
    z-index: 200;
    border: 1px solid var(--blue-1);
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    --fade-background: #f5f5f5;
}

.sidePanel.left {
    top: 90px;
    max-height: calc(100vh - 110px);
    width: var(--side-panel-width);
    left: 10px;
}

.sidePanel.right {
    top: 60px;
    max-height: calc(100vh - 80px);
    width: var(--side-panel-width);
    right: calc(var(--panel-selector-width) - 1px); /* Make the borders overlap exactly to avoid a 2px border */
}

@media (max-height: 660px) {
    .sidePanel.right {
        right: calc(var(--panel-selector-width) * 3 - 1px);
    }
    .sidePanel.clinicalAnnotationPanel.right {
        /* The clinical viewer has fewer panel selectors, and the horizontal "stack" is not as wide */
        right: calc(var(--panel-selector-width) * 2 - 1px);
    }
}

.sidePanel .tabs {
    padding: 0;
    display: flex;
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.sidePanel .tab {
    display: flex;
    flex: 1 0 auto;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--blue-1);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.sidePanel .tab.selected {
    border-bottom-color: transparent;
}

.sidePanel .tab.selected:not(:last-of-type) {
    border-right: 1px solid var(--blue-1);
}

.sidePanel .tab.selected:not(:first-of-type) {
    border-left: 1px solid var(--blue-1);
}

.sidePanel h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 36px;
    text-transform: uppercase;
}

.sidePanel .header {
    font-weight: 500;
}

.sidePanel .title {
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 18px;
}

.sidePanel .buttons {
    display: flex;
    justify-content: space-between;
}

.sidePanel .buttons button, .sidePanel .buttons .button {
    margin-right: 0; /* Override the default component's right margin to allow buttons to right-align */
}

.sidePanel .compactLabelButtons button, .sidePanel .compactLabelButtons .button {
    font-size: 11px;
}

.sidePanel > * {
    padding: 0 10px;
}

.sidePanel .toolButtons {
    display: flex;
    margin: 5px 0;
    flex: 0 0 auto;
}

.sidePanel .toolButtons button {
    padding: 0;
}

.sidePanel .toolButtons button.labeled {
    padding: 0 10px; /* Unlike icon buttons, text buttons don't have to be square */
}

.sidePanel .toolButtons button i {
    margin: 0;
    width: 30px;
    height: 30px;
    display: block;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
}

.sidePanel .toolButtons button .icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px; /* Some default, but this should to be adjusted for each icon to account for visual weight */
}

.sidePanel .toolButtons button .icon.length {
    background-image: url("../Content/openSeaDragon/images/length-icon-blue.svg");
    background-size: 18px;
}
.sidePanel .toolButtons button.toolEnable .icon.length {
    background-image: url("../Content/openSeaDragon/images/length-icon-white.svg");
}

.sidePanel .toolButtons button .icon.area {
    background-image: url("../Content/openSeaDragon/images/area-icon-blue.svg");
    background-size: 23px;
}
.sidePanel .toolButtons button.toolEnable .icon.area {
    background-image: url("../Content/openSeaDragon/images/area-icon-white.svg");
}

.sidePanel .toolButtons button .icon.freehand {
    background-image: url("../Content/openSeaDragon/images/freehand-icon-blue.svg");
    background-size: 20px;
}

.sidePanel .toolButtons button.toolEnable .icon.freehand {
    background-image: url("../Content/openSeaDragon/images/freehand-icon-white.svg");
}

.sidePanel .action, #summaryPanel .expandableRow {
    cursor: pointer;
}

.sidePanel .action.name-editor {
    width: 100%;
}

.sidePanel .name-editor-icon {
    margin-right: 5px;
}

/* A very plain list component with text and an "x" button */
.sidePanel ul {
    margin: 0 0 10px 0;
    max-height: 150px;
    overflow-y: auto;
}
.sidePanel ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 20px;
}

.sidePanel ul li input {
    flex: 1 1 auto;
    margin-right: 10px;
    height: 20px;
    line-height: 20px;
}

.sidePanel textarea {
    width: 100%;
    min-height: 60px;
    margin: 0 0 10px 0;
}

.sidePanel .markingAccess {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 10px 0;
}
.sidePanel .markingAccess select {
    width: 200px;
}

.sidePanel .nameEditor {
    margin-bottom: 10px;
}

.sidePanel .nameEditor input {
    display: block;
    width: 100%;
}

/* There is a greedy global set of CSS rules for the ".tags" class, which is why we need a different name here */
.sidePanel .tagEditor {
    margin-bottom: 10px;
}

.sidePanel .tagEditor .labelAndInput {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.sidePanel .tagEditor .labelAndInput input {
    width: 200px;
}

.sidePanel ul.tagList {
    display: flex;
    flex-wrap: wrap;
}

.sidePanel ul.tagList li {
    --pill-height: 22px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid var(--blue-3);
    border-radius: calc(var(--pill-height) / 2);
    height: var(--pill-height);
    line-height: var(--pill-height);
    padding: 0 10px;
    margin-right: 5px;
    margin-top: 5px;
}
.sidePanel ul.tagList li > *:not(:last-child) {
    /* Add a gutter between the elements inside a tag pill */
    margin-right: 10px;
}

.sidePanel .tableWrapper {
    flex: 1 1 auto;
    border: 1px solid var(--blue-2);
    padding: 0 10px;
    min-height: 80px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow-y: auto;
}

.sidePanel table {
    width: 100%;
    line-height: 20px;
}

.sidePanel table th {
    font-weight: 500;
}

.sidePanel table thead tr {
    border-bottom: 1px solid var(--blue-2);
}

.sidePanel table th, .sidePanel table td {
    text-align: right;
}

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

.sidePanel table .selected {
    font-weight: 500;
}

.sidePanel .fade {
    background: inherit;
    transition: background-color 0.2s ease;
}

.sidePanel .fade.faded {
    background: var(--fade-background);
}

#annotationPanel .editors, #iaRunPanel .editors {
    flex: 0 0 auto;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--blue-1);
}

#annotationPanel .listControls, #iaRunPanel .listControls {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--blue-1);
}

#annotationPanel .listControls .row, #iaRunPanel .listControls .row {
    margin-bottom: 10px;
}

#annotationPanel .filterAndOrder {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* @todo: The checkbox input component has become a weird mess of !important pixel adjustments, and it doesn't behave sanely in flex layouts.
   It should probably be completely rewritten at some point, and all the hacks removed. This is the cleanest hack/fix I could think of here. */
#annotationPanel .filterAndOrder .checkboxContainer .checkmark {
    top: 7px;
}

#annotationPanel .filterAndOrder .order {
    display: flex;
    align-items: center;
}

#annotationPanel .filterAndOrder .order select {
    margin: 0 5px;
}

#annotationPanel .annotations,
#iaRunPanel .iaRunBatches {
    --thumbnail-size: 80px;
}

#iaRunPanel .regionsOfInterest {
    --thumbnail-size: 60px;
}

#annotationPanel .annotations,
#iaRunPanel .iaRunBatches,
#iaRunPanel .regionsOfInterest {
    --row-height: 20px; /* Try to pace the detail lines nicely with the thumbnail */
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

#annotationPanel .annotations .emptyWarning,
#iaRunPanel .iaRunBatches .emptyWarning {
    margin: 10px 0;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
}

#annotationPanel .annotation,
#iaRunPanel .iaRunBatch {
    font-size: 14px;
    font-weight: normal;
    line-height: var(--row-height);
}

#annotationPanel .annotation:not(:last-child),
#iaRunPanel .iaRunBatch:not(:last-child),
#iaRunPanel .regionOfInterest:not(:last-child) {
    /* Sandwich the border between 10px gutters */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--blue-1);
    margin-bottom: 10px;
}

#annotationPanel .annotation .thumbnailAndDetails,
#iaRunPanel .iaRunBatch .thumbnailAndDetails {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

#annotationPanel .annotation .thumbnail,
#iaRunPanel .iaRunBatch .thumbnail {
    width: var(--thumbnail-size);
    height: var(--thumbnail-size);
    flex: 0 0 auto;
    border: 1px solid var(--blue-1);
    background-position: center center;
    background-size: cover;
}

#annotationPanel .annotation .details,
#iaRunPanel .iaRunBatch .details {
    flex: 1 1 auto;
}

#annotationPanel .annotation .details,
#iaRunPanel .iaRunBatch .thumbnail {
    margin-right: 10px;
}

#annotationPanel .annotation .header,
#iaRunPanel .iaRunBatch .header {
    font-weight: 500;
}

#annotationPanel .annotation .details .row,
#iaRunPanel .iaRunBatch .details .row {
    display: flex;
    justify-content: space-between;
    word-break: break-word;
    align-items: baseline; /* Align any icons etc. with the first line of text in case the text wraps */
}

#iaRunPanel .algorithmname {
    justify-content: space-between;
    word-break: break-word;
    align-items: baseline; /* Align any icons etc. with the first line of text in case the text wraps */
}

#annotationPanel .annotations .checkboxContainer input[type="checkbox"],
#summaryPanel .checkboxContainer input[type="checkbox"],
#iaRunPanel .checkboxContainer input[type="checkbox"] {
    /* @hack: Workaround for various global CSS rules fighting over checkboxes.
       Should be unnecessary once we can remove the access.css input rules. */
    display: none; /* The custom component declares "opacity: 0 !important;", not sure why that instead of this */
}

#annotationPanel .annotation {
    display: flex;
}

#annotationPanel .annotation .visibility {
    width: 20px;
    flex: 0 0 auto;
}

#annotationPanel .annotation .visibility .checkboxContainer,
#iaRunPanel .regionOfInterest .selection .checkboxContainer {
    /* The default checkboxContainer is a pain to pixel-align, as its size seems to be almost ambiguous */
    display: block;
}

#annotationPanel .annotation .visibility .checkmark,
#iaRunPanel .regionOfInterest .selection .checkmark {
    /* Align vertically with the annotation's name */
    top: 3px;
}

#annotationPanel .annotation .content {
    flex: 1 1 auto;
}

#annotationPanel button {
    flex: 0 0 auto; /* A generic fix to make buttons behave within flex containers */
}

#annotationPanel .annotation .buttons {
    display: flex;
    justify-content: space-between;
}

#annotationPanel .annotation .buttons button {
    width: var(--thumbnail-size); /* In the design specs, the button widths match the thumbnail */
    margin: 0;
}

#annotationPanel.clinicalAnnotationPanel .shapes {
    margin-bottom: 10px;
}

#annotationPanel.clinicalAnnotationPanel ul {
    /* The clinical annotation panel has no other components, so the ul can take the entire vertical space */
    max-height: 100%;
    margin-bottom: 0;
}

#annotationPanel.clinicalAnnotationPanel li .shapeName {
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#annotationPanel.clinicalAnnotationPanel li .shapeName input {
    width: 100%;
}

#annotationPanel.clinicalAnnotationPanel li .shapeText {
    margin: 0 10px;
    flex: 0 0 auto;
}

#annotationPanel.clinicalAnnotationPanel li .shapeIcon {
    overflow: hidden;
}

#iaRunPanel select.algorithm {
    width: 100%;
    margin-bottom: 10px;
}

#iaRunPanel .iaRunBatch select {
    font-size: 12px;
}

#iaRunPanel .iaRunBatch button {
    padding: 0 10px;
    margin: 0;
    line-height: var(--row-height);
}

#iaRunPanel .iaRunBatch .iaRun {
    display: flex;
    align-items: baseline;
    letter-spacing: -0.25px; /* Squeeze the text a little bit to make it take up less space. We don't have a lot of real estate on the IA run list. */
}

#iaRunPanel .iaRunBatch .iaRun:hover {
    background: var(--blue-1);
    /* Use box-shadow to allow the highlight to overflow horizontally without affecting the layout */
    box-shadow: -5px 0 0 var(--blue-1), 5px 0 0 var(--blue-1);
}

#iaRunPanel .iaRunBatch .iaRun.selected {
    background: var(--blue-4);
    /* Use box-shadow to allow the highlight to overflow horizontally without affecting the layout */
    box-shadow: -5px 0 0 var(--blue-4), 5px 0 0 var(--blue-4);
}

#iaRunPanel .iaRunBatch .iaRun .name {
    flex-grow: 1;
}

#iaRunPanel .iaRunBatch .iaRun .state {
    flex: 0 0 auto;
    width: 80px;
    overflow: hidden;
    margin-left: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

#iaRunPanel .iaRunBatch .iaRun .delete {
    margin-left: 10px;
}

#iaRunPanel .newAnalysis {
    margin-bottom: 20px;
}

#iaRunPanel .tabs {
    text-transform: uppercase;
}

#iaRunPanel .tabs .tab {
    color: var(--blue-5);
}

#iaRunPanel .tabs .tab.selected {
    color: var(--blue-7);
    border-top: 1px solid var(--blue-1);
}

#iaRunPanel .regionOfInterest {
    display: flex;
}

#iaRunPanel .regionOfInterest .selection {
    width: 20px;
    flex: 0 0 auto;
}

#iaRunPanel .regionOfInterest .thumbnailAndDetails {
    flex-grow: 1;
    display: flex;
}

#iaRunPanel .regionOfInterest .thumbnailAndDetails .details {
    flex: 1 1 auto;
    margin-right: 10px;
}

#iaRunPanel .regionOfInterest .thumbnailAndDetails .details .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The editable fields have an icon that should only show up when hovering over the editable text */
#iaRunPanel .editable i {
    visibility: hidden;
    cursor: default;
}

#iaRunPanel .editable:hover i {
    visibility: visible;
}

#iaRunPanel .regionOfInterest .thumbnailAndDetails .thumbnail {
    width: var(--thumbnail-size);
    height: var(--thumbnail-size);
    background-size: cover;
    background-position: center;
    outline: 1px solid var(--blue-1);
    flex: 0 0 auto;
}

#iaRunPanel .regionOfInterest button {
    padding: 0 10px;
    margin: 0;
    line-height: var(--row-height);
}

#iaRunPanel .toolButtons button {
    padding: 0 8px;
}

#iaRunPanel button.iconAndText {
    /* Specialized layout fine tuning for buttons that have both an icon and text */
    display: flex;
    align-items: center;
    padding-right: 8px;
    padding-left: 3px;
}

#iaRunPanel .imageAnalysisRegionTools {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

#iaRunPanel .imageAnalysisRegionTools .toolButtons {
    /* We want to use the actual icon-and-text button styles from .toolButtons, but not the overall layout */
    margin: 0 0 10px 0;
}

#iaRunPanel .imageAnalysisRegionTools button {
    /* The layout has two buttons on top of each other. Currently, the "Draw region" button is natively bigger. This is its width.
       Due to the layout of the buttons, their sizes can't be easily auto-matched with flex rules. We have to set one manually. */
    width: 124px;
}

#iaRunPanel .imageAnalysisRegionTools .buttonAndInfo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#iaRunPanel .imageAnalysisRegionTools .buttonAndInfo button {
    margin-right: 10px;
    flex: 0 0 auto;
}

#iaRunPanel .imageAnalysisRegionTools .buttonAndInfo .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 30px;
    overflow: hidden;
}

#iaRunPanel .imageAnalysisRegionTools .buttonAndInfo .info .infoRow {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#iaRunPanel .credits {
    margin-top: 10px;
}

#iaRunPanel .tmaTabContent {
    margin-bottom: 10px;
}

/* The old actionbar.css rules aren't great for our new layouts. They should probably be removed at some point. This is a quick fix to make things align nicely. */
#iaRunPanel .tmaTabContent .actionBarOptions {
    margin-top: 10px;
    margin-bottom: 0;
}

#iaRunPanel .tmaTabContent .tmaTypeSelector {
    display: flex;
    flex-direction: column;
}

#scoringPanel .regionsOfInterest {
    display: flex;
    flex-direction: column;
}

#summaryPanel {
    padding: 10px 0;
    transition: left 0.1s ease-in-out;
    width: auto;
    min-width: var(--side-panel-width);
}

.summaryNoTabs {
    margin-top: 15px;
}

#summaryPanel > * {
    padding: 0;
}

#summaryPanel .heading {
    padding: 0 10px;
    font-weight: 500;
}

#summaryPanel.displacedBySlideTray {
    left: calc(var(--slide-tray-width) + 10px);
}

#summaryPanel .tabs {
    margin: 10px 0;
}

#summaryPanel .tabs .tab {
    border-top: 1px solid transparent;
}

#summaryPanel .tabs .tab.selected {
    border-top: 1px solid var(--blue-1);
}

#summaryPanel .tableWrapper {
    flex: 1 1 auto;
    border: none;
    padding: 0;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 10px;
    overflow-y: auto;
}

#summaryPanel table th, #summaryPanel table td {
    text-align: center;
}

#summaryPanel table .left {
    text-align: left;
    padding-left: 10px;
}

#summaryPanel table thead tr {
    border-bottom: none;
    height: 30px;
}


#summaryPanel .tableWrapper tbody:first-of-type {
    border-top: 1px solid var(--blue-1);
}

#summaryPanel .titleAndExport {
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
}

#summaryPanel #instanceSegmentationVisibility {
    margin-bottom: 5px;
}

#summaryPanel #instanceSegmentationVisibility .visibilities {
    padding: 5px 10px;
}

#summaryPanel #instanceSegmentationVisibility .visibilities label {
    margin-right: 10px;
}

#iaRunTools select.algorithm {
    width: 100%;
    margin-bottom: 10px;
}

#iaRunTools .info {
    margin-bottom: 10px;
}

#iaRunTools .regionEditor .drawingTools {
    margin-bottom: 10px;
}

#summaryPanel .metricsPanel {
    margin-bottom: 5px;
}

#summaryPanel .metricsPanel .spatialDistributions {
    padding: 5px 10px;
}

#summaryPanel .metricsPanel .spatialDistributions .color {
    display: inline-block;
    font-size: 11px;
    margin-right: 6px;
}

#summaryPanel .metricsPanel .spatialDistributions .arrow {
    margin: 0 5px;
}

.tableWrapper tbody {
    border-bottom: 1px solid var(--blue-1);
}

.tableWrapper tbody tr:first-child {
    height: 30px;
}

.accordianArrow {
    width: 12px;
    padding-right: 10px;
}

.accordianArrow i {
    font-weight: 800;
}

.dimensionMetricsContainer {
    display: flex;
    height: 30px;
    max-height: 30px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.dimensionMetricsContainer .checkboxContainer:first-of-type {
    margin-left: 35px;
}

.dimensionMetricsContainer .checkboxContainer:last-of-type {
    margin-left: 110px;
}

.dimensionMetricsContainer.ng-hide {
    max-height: 0;
    display: flex !important;
    transition: max-height 0.25s ease-in-out;
}

.classLabelName {
    padding-left: 5px;
}

#summaryPanel .expandableRow.expanded {
    background: #f5f5f5;
}

#summaryPanel.minimized {
    --extra-width: 0;
}

#summaryPanel.minimized .header {
    margin-bottom: 0;
}

.roiName .action {
    width: 100%;
}

#iaRunPanel .roiName.editable .fa-pencil {
    cursor: pointer;
}

.with-awesome, .with-awesome option {
    font-family: 'FontAwesome', 'DM Sans', sans-serif;
    font-weight: 300;
}
/*!
 * ui-grid - v4.8.3 - 2019-10-21
 * Copyright (c) 2019 ; License: MIT 
 */.ui-grid{border:1px solid #d4d4d4;box-sizing:content-box;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-o-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.ui-grid-vertical-bar{position:absolute;right:0;width:0}.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar,.ui-grid-cell:not(:last-child) .ui-grid-vertical-bar{width:1px}.ui-grid-scrollbar-placeholder{background-color:transparent}.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar{background-color:#d4d4d4}.ui-grid-cell:not(:last-child) .ui-grid-vertical-bar{background-color:#d4d4d4}.ui-grid-header-cell:last-child .ui-grid-vertical-bar{right:-1px;width:1px;background-color:#d4d4d4}.ui-grid-clearfix:before,.ui-grid-clearfix:after{content:"";display:table}.ui-grid-clearfix:after{clear:both}.ui-grid-invisible{visibility:hidden}.ui-grid-contents-wrapper{position:relative;height:100%;width:100%}.ui-grid-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.ui-grid-icon-button{background-color:transparent;border:none;padding:0}.clickable{cursor:pointer}.ui-grid-top-panel-background{background-color:#f3f3f3}.ui-grid-header{border-bottom:1px solid #d4d4d4;box-sizing:border-box}.ui-grid-top-panel{position:relative;overflow:hidden;font-weight:bold;background-color:#f3f3f3;-webkit-border-top-right-radius:-1px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:-1px;-moz-border-radius-topright:-1px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:-1px;border-top-right-radius:-1px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:-1px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box}.ui-grid-header-viewport{overflow:hidden}.ui-grid-header-canvas:before,.ui-grid-header-canvas:after{content:"";display:-ms-flexbox;display:flex;line-height:0}.ui-grid-header-canvas:after{clear:both}.ui-grid-header-cell-wrapper{position:relative;display:-ms-flexbox;display:flex;box-sizing:border-box;height:100%;width:100%}.ui-grid-header-cell-row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui-grid-header-cell{position:relative;box-sizing:border-box;background-color:inherit;border-right:1px solid;border-color:#d4d4d4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:0}.ui-grid-header-cell:last-child{border-right:0}.ui-grid-header-cell .sortable{cursor:pointer}.ui-grid-header-cell .ui-grid-sort-priority-number{margin-left:-8px}.ui-grid-header-cell>div{-ms-flex-basis:100%;flex-basis:100%}.ui-grid-header .ui-grid-vertical-bar{top:0;bottom:0}.ui-grid-column-menu-button{position:absolute;right:1px;top:0}.ui-grid-column-menu-button .ui-grid-icon-angle-down{vertical-align:sub}.ui-grid-header-cell-last-col .ui-grid-cell-contents,.ui-grid-header-cell-last-col .ui-grid-filter-container,.ui-grid-header-cell-last-col .ui-grid-column-menu-button,.ui-grid-header-cell-last-col+.ui-grid-column-resizer.right{margin-right:13px}.ui-grid-render-container-right .ui-grid-header-cell-last-col .ui-grid-cell-contents,.ui-grid-render-container-right .ui-grid-header-cell-last-col .ui-grid-filter-container,.ui-grid-render-container-right .ui-grid-header-cell-last-col .ui-grid-column-menu-button,.ui-grid-render-container-right .ui-grid-header-cell-last-col+.ui-grid-column-resizer.right{margin-right:28px}.ui-grid-column-menu{position:absolute}.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add,.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove{-webkit-transition:all .04s linear;-moz-transition:all .04s linear;-o-transition:all .04s linear;transition:all .04s linear;display:block !important}.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add.ng-hide-add-active,.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-o-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add,.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove.ng-hide-remove-active{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-add,.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove{-webkit-transition:all .04s linear;-moz-transition:all .04s linear;-o-transition:all .04s linear;transition:all .04s linear;display:block !important}.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-add.ng-hide-add-active,.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-o-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-add,.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove.ng-hide-remove-active{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.ui-grid-filter-container{padding:4px 10px;position:relative}.ui-grid-filter-container .ui-grid-filter-button{position:absolute;top:0;bottom:0;right:0}.ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"]{position:absolute;top:50%;line-height:32px;margin-top:-16px;right:10px;opacity:.66}.ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"]:hover{opacity:1}.ui-grid-filter-container .ui-grid-filter-button-select{position:absolute;top:0;bottom:0;right:0}.ui-grid-filter-container .ui-grid-filter-button-select [class^="ui-grid-icon"]{position:absolute;top:50%;line-height:32px;margin-top:-16px;right:0px;opacity:.66}.ui-grid-filter-container .ui-grid-filter-button-select [class^="ui-grid-icon"]:hover{opacity:1}input[type="text"].ui-grid-filter-input{box-sizing:border-box;padding:0 18px 0 0;margin:0;width:100%;border:1px solid #d4d4d4;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box}input[type="text"].ui-grid-filter-input:hover{border:1px solid #d4d4d4}select.ui-grid-filter-select{padding:0;margin:0;border:0;width:90%;border:1px solid #d4d4d4;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box}select.ui-grid-filter-select:hover{border:1px solid #d4d4d4}.ui-grid-filter-cancel-button-hidden select.ui-grid-filter-select{width:100%}.ui-grid-render-container{position:inherit;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box}.ui-grid-render-container:focus{outline:none}.ui-grid-viewport{min-height:20px;position:relative;overflow-y:scroll;-webkit-overflow-scrolling:touch}.ui-grid-viewport:focus{outline:none !important}.ui-grid-canvas{position:relative;padding-top:1px}.ui-grid-row{clear:both}.ui-grid-row:nth-child(odd) .ui-grid-cell{background-color:#fdfdfd}.ui-grid-row:nth-child(even) .ui-grid-cell{background-color:#f3f3f3}.ui-grid-row:last-child .ui-grid-cell{border-bottom-color:#d4d4d4;border-bottom-style:solid}.ui-grid-row:hover>[ui-grid-row]>.ui-grid-cell:hover .ui-grid-cell,.ui-grid-row:nth-child(odd):hover .ui-grid-cell,.ui-grid-row:nth-child(even):hover .ui-grid-cell{background-color:#d5eaee}.ui-grid-no-row-overlay{position:absolute;top:0;bottom:0;left:0;right:0;margin:10%;background-color:#f3f3f3;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #d4d4d4;font-size:2em;text-align:center}.ui-grid-no-row-overlay>*{position:absolute;display:table;margin:auto 0;width:100%;top:0;bottom:0;left:0;right:0;opacity:.66}.ui-grid-cell{overflow:hidden;float:left;background-color:inherit;border-right:1px solid;border-color:#d4d4d4;box-sizing:border-box}.ui-grid-cell:last-child{border-right:0}.ui-grid-cell-contents{padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;height:100%}.ui-grid-cell-contents-hidden{visibility:hidden;width:0;height:0;display:none}.ui-grid-row .ui-grid-cell.ui-grid-row-header-cell{background-color:#F0F0EE;border-bottom:solid 1px #d4d4d4}.ui-grid-cell-empty{display:inline-block;width:10px;height:10px}.ui-grid-footer-info{padding:5px 10px}.ui-grid-footer-panel-background{background-color:#f3f3f3}.ui-grid-footer-panel{position:relative;border-bottom:1px solid #d4d4d4;border-top:1px solid #d4d4d4;overflow:hidden;font-weight:bold;background-color:#f3f3f3;-webkit-border-top-right-radius:-1px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:-1px;-moz-border-radius-topright:-1px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:-1px;border-top-right-radius:-1px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:-1px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box}.ui-grid-grid-footer{float:left;width:100%}.ui-grid-footer-viewport,.ui-grid-footer-canvas{height:100%}.ui-grid-footer-viewport{overflow:hidden}.ui-grid-footer-canvas{position:relative}.ui-grid-footer-canvas:before,.ui-grid-footer-canvas:after{content:"";display:table;line-height:0}.ui-grid-footer-canvas:after{clear:both}.ui-grid-footer-cell-wrapper{position:relative;display:table;box-sizing:border-box;height:100%}.ui-grid-footer-cell-row{display:table-row}.ui-grid-footer-cell{overflow:hidden;background-color:inherit;border-right:1px solid;border-color:#d4d4d4;box-sizing:border-box;display:table-cell}.ui-grid-footer-cell:last-child{border-right:0}.ui-grid-menu-button{z-index:2;position:absolute;right:0;top:0;background:#f3f3f3;border:0;border-left:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4;cursor:pointer;height:32px;font-weight:normal}.ui-grid-menu-button .ui-grid-icon-container{margin-top:5px;margin-left:2px}.ui-grid-menu-button .ui-grid-menu{right:0}.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid{overflow:scroll}.ui-grid-menu{overflow:hidden;max-width:320px;z-index:2;position:absolute;right:100%;padding:0 10px 20px 10px;cursor:pointer;box-sizing:border-box}.ui-grid-menu-item{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-grid-menu .ui-grid-menu-inner{background:#fff;border:1px solid #d4d4d4;position:relative;white-space:nowrap;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui-grid-menu .ui-grid-menu-inner ul{margin:0;padding:0;list-style-type:none}.ui-grid-menu .ui-grid-menu-inner ul li{padding:0}.ui-grid-menu .ui-grid-menu-inner ul li .ui-grid-menu-item{color:#000;min-width:100%;padding:8px;text-align:left;background:transparent;border:none;cursor:default}.ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item{cursor:pointer}.ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item:hover,.ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item:focus{background-color:#b3c4c7}.ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item.ui-grid-menu-item-active{background-color:#9cb2b6}.ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child)>.ui-grid-menu-item{border-bottom:1px solid #d4d4d4}.ui-grid-sortarrow{right:5px;position:absolute;width:20px;top:0;bottom:0;background-position:center}.ui-grid-sortarrow.down{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}@font-face{font-family:'ui-grid';src:url('../Content/openSeaDragon/fonts/ui-grid.eot');src:url('../Content/openSeaDragon/fonts/ui-grid.eot#iefix') format('embedded-opentype'),url('../Content/openSeaDragon/fonts/ui-grid.woff') format('woff'),url('../Content/openSeaDragon/fonts/ui-grid.ttf') format('truetype'),url('../Content/openSeaDragon/fonts/ui-grid.svg?#ui-grid') format('svg');font-weight:normal;font-style:normal}[class^="ui-grid-icon"]:before,[class*=" ui-grid-icon"]:before{font-family:"ui-grid";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}.ui-grid-icon-blank::before{width:1em;content:' '}.ui-grid-icon-plus-squared:before{content:'\c350'}.ui-grid-icon-minus-squared:before{content:'\c351'}.ui-grid-icon-search:before{content:'\c352'}.ui-grid-icon-cancel:before{content:'\c353'}.ui-grid-icon-info-circled:before{content:'\c354'}.ui-grid-icon-lock:before{content:'\c355'}.ui-grid-icon-lock-open:before{content:'\c356'}.ui-grid-icon-pencil:before{content:'\c357'}.ui-grid-icon-down-dir:before{content:'\c358'}.ui-grid-icon-up-dir:before{content:'\c359'}.ui-grid-icon-left-dir:before{content:'\c35a'}.ui-grid-icon-right-dir:before{content:'\c35b'}.ui-grid-icon-left-open:before{content:'\c35c'}.ui-grid-icon-right-open:before{content:'\c35d'}.ui-grid-icon-angle-down:before{content:'\c35e'}.ui-grid-icon-filter:before{content:'\c35f'}.ui-grid-icon-sort-alt-up:before{content:'\c360'}.ui-grid-icon-sort-alt-down:before{content:'\c361'}.ui-grid-icon-ok:before{content:'\c362'}.ui-grid-icon-menu:before{content:'\c363'}.ui-grid-icon-indent-left:before{content:'\e800'}.ui-grid-icon-indent-right:before{content:'\e801'}.ui-grid-icon-spin5:before{content:'\ea61'}.ui-grid[dir=rtl] .ui-grid-header-cell,.ui-grid[dir=rtl] .ui-grid-footer-cell,.ui-grid[dir=rtl] .ui-grid-cell{float:right !important}.ui-grid[dir=rtl] .ui-grid-column-menu-button{position:absolute;left:1px;top:0;right:inherit}.ui-grid[dir=rtl] .ui-grid-cell:first-child,.ui-grid[dir=rtl] .ui-grid-header-cell:first-child,.ui-grid[dir=rtl] .ui-grid-footer-cell:first-child{border-right:0}.ui-grid[dir=rtl] .ui-grid-cell:last-child,.ui-grid[dir=rtl] .ui-grid-header-cell:last-child{border-right:1px solid #d4d4d4;border-left:0}.ui-grid[dir=rtl] .ui-grid-header-cell:first-child .ui-grid-vertical-bar,.ui-grid[dir=rtl] .ui-grid-footer-cell:first-child .ui-grid-vertical-bar,.ui-grid[dir=rtl] .ui-grid-cell:first-child .ui-grid-vertical-bar{width:0}.ui-grid[dir=rtl] .ui-grid-menu-button{z-index:2;position:absolute;left:0;right:auto;background:#f3f3f3;border:1px solid #d4d4d4;cursor:pointer;min-height:27px;font-weight:normal}.ui-grid[dir=rtl] .ui-grid-menu-button .ui-grid-menu{left:0;right:auto}.ui-grid[dir=rtl] .ui-grid-filter-container .ui-grid-filter-button{right:initial;left:0}.ui-grid[dir=rtl] .ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"]{right:initial;left:10px}.ui-grid-animate-spin{-moz-animation:ui-grid-spin 2s infinite linear;-o-animation:ui-grid-spin 2s infinite linear;-webkit-animation:ui-grid-spin 2s infinite linear;animation:ui-grid-spin 2s infinite linear;display:inline-block}@-moz-keyframes ui-grid-spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes ui-grid-spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes ui-grid-spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes ui-grid-spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes ui-grid-spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.ui-grid-cell-focus{outline:0;background-color:#b3c4c7}.ui-grid-focuser{position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%}.ui-grid-focuser:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.ui-grid-offscreen{display:block;position:absolute;left:-10000px;top:-10000px;clip:rect(0, 0, 0, 0)}.ui-grid-cell input{border-radius:inherit;padding:0;width:100%;color:inherit;height:auto;font:inherit;outline:none}.ui-grid-cell input:focus{color:inherit;outline:none}.ui-grid-cell input[type="checkbox"]{margin:9px 0 0 6px;width:auto}.ui-grid-cell input.ng-invalid{border:1px solid #fc8f8f}.ui-grid-cell input.ng-valid{border:1px solid #d4d4d4}.ui-grid-viewport .ui-grid-empty-base-layer-container{position:absolute;overflow:hidden;pointer-events:none;z-index:-1}.expandableRow .ui-grid-row:nth-child(odd) .ui-grid-cell{background-color:#fdfdfd}.expandableRow .ui-grid-row:nth-child(even) .ui-grid-cell{background-color:#f3f3f3}.ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell{pointer-events:none}.ui-grid-expandable-buttons-cell i{pointer-events:all}.scrollFiller{float:left;border:1px solid #d4d4d4}.ui-grid-tree-header-row{font-weight:bold !important}.movingColumn{position:absolute;top:0;border:1px solid #d4d4d4;box-shadow:inset 0 0 14px rgba(0,0,0,0.2)}.movingColumn .ui-grid-icon-angle-down{display:none}.ui-grid-pager-panel{display:flex;justify-content:space-between;align-items:center;position:absolute;left:0;bottom:0;width:100%;padding-top:3px;padding-bottom:3px;box-sizing:content-box}.ui-grid-pager-container{float:left}.ui-grid-pager-control{padding:5px 0;display:flex;flex-flow:row nowrap;align-items:center;margin-right:10px;margin-left:10px;min-width:135px;float:left}.ui-grid-pager-control button,.ui-grid-pager-control span,.ui-grid-pager-control input{margin-right:4px}.ui-grid-pager-control button{height:25px;min-width:26px;display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background:#f3f3f3;border:1px solid #ccc;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#eee}.ui-grid-pager-control button:hover{border-color:#adadad;text-decoration:none}.ui-grid-pager-control button:focus{border-color:#8c8c8c;text-decoration:none;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.ui-grid-pager-control button:active{border-color:#adadad;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.ui-grid-pager-control button:active:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.ui-grid-pager-control button:active:hover,.ui-grid-pager-control button:active:focus{background-color:#c8c8c8;border-color:#8c8c8c}.ui-grid-pager-control button:hover,.ui-grid-pager-control button:focus,.ui-grid-pager-control button:active{color:#eee;background:#dadada}.ui-grid-pager-control button[disabled]{cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}.ui-grid-pager-control button[disabled]:hover,.ui-grid-pager-control button[disabled]:focus{background-color:#f3f3f3;border-color:#ccc}.ui-grid-pager-control input{display:inline;height:26px;width:50px;vertical-align:top;color:#555555;background:#fff;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.ui-grid-pager-control input:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.ui-grid-pager-control input[disabled],.ui-grid-pager-control input[readonly],.ui-grid-pager-control input::-moz-placeholder{opacity:1}.ui-grid-pager-control input::-moz-placeholder,.ui-grid-pager-control input:-ms-input-placeholder,.ui-grid-pager-control input::-webkit-input-placeholder{color:#999}.ui-grid-pager-control input::-ms-expand{border:0;background-color:transparent}.ui-grid-pager-control input[disabled],.ui-grid-pager-control input[readonly]{background-color:#eeeeee}.ui-grid-pager-control input[disabled]{cursor:not-allowed}.ui-grid-pager-control .ui-grid-pager-max-pages-number{vertical-align:bottom}.ui-grid-pager-control .ui-grid-pager-max-pages-number>*{vertical-align:bottom}.ui-grid-pager-control .ui-grid-pager-max-pages-number abbr{border-bottom:none;text-decoration:none}.ui-grid-pager-control .first-bar{width:10px;border-left:2px solid #4d4d4d;margin-top:-6px;height:12px;margin-left:-3px}.ui-grid-pager-control .first-bar-rtl{width:10px;border-left:2px solid #4d4d4d;margin-top:-6px;height:12px;margin-right:-7px}.ui-grid-pager-control .first-triangle{width:0;height:0;border-style:solid;border-width:5px 8.7px 5px 0;border-color:transparent #4d4d4d transparent transparent;margin-left:2px}.ui-grid-pager-control .next-triangle{margin-left:1px}.ui-grid-pager-control .prev-triangle{margin-left:0}.ui-grid-pager-control .last-triangle{width:0;height:0;border-style:solid;border-width:5px 0 5px 8.7px;border-color:transparent transparent transparent #4d4d4d;margin-left:-1px}.ui-grid-pager-control .last-bar{width:10px;border-left:2px solid #4d4d4d;margin-top:-6px;height:12px;margin-left:1px}.ui-grid-pager-control .last-bar-rtl{width:10px;border-left:2px solid #4d4d4d;margin-top:-6px;height:12px;margin-right:-11px}.ui-grid-pager-row-count-picker{float:left;padding:5px 10px}.ui-grid-pager-row-count-picker select{color:#555555;background:#fff;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px;height:25px;width:67px;display:inline;vertical-align:middle}.ui-grid-pager-row-count-picker select:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.ui-grid-pager-row-count-picker select[disabled],.ui-grid-pager-row-count-picker select[readonly],.ui-grid-pager-row-count-picker select::-moz-placeholder{opacity:1}.ui-grid-pager-row-count-picker select::-moz-placeholder,.ui-grid-pager-row-count-picker select:-ms-input-placeholder,.ui-grid-pager-row-count-picker select::-webkit-input-placeholder{color:#999}.ui-grid-pager-row-count-picker select::-ms-expand{border:0;background-color:transparent}.ui-grid-pager-row-count-picker select[disabled],.ui-grid-pager-row-count-picker select[readonly]{background-color:#eeeeee}.ui-grid-pager-row-count-picker select[disabled]{cursor:not-allowed}.ui-grid-pager-row-count-picker .ui-grid-pager-row-count-label{margin-top:3px}.ui-grid-pager-count-container{float:right;margin-top:4px;min-width:50px}.ui-grid-pager-count-container .ui-grid-pager-count{margin-right:10px;margin-left:10px;float:right}.ui-grid-pager-count-container .ui-grid-pager-count abbr{border-bottom:none;text-decoration:none}.ui-grid-pinned-container{position:absolute;display:inline;top:0}.ui-grid-pinned-container.ui-grid-pinned-container-left{float:left;left:0}.ui-grid-pinned-container.ui-grid-pinned-container-right{float:right;right:0}.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child{box-sizing:border-box;border-right:1px solid;border-width:1px;border-right-color:#aeaeae}.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-cell:last-child{box-sizing:border-box;border-right:1px solid;border-width:1px;border-right-color:#aeaeae}.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar,.ui-grid-pinned-container .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar{width:1px}.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar{background-color:#d4d4d4}.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar{background-color:#aeaeae}.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child .ui-grid-vertical-bar{right:-1px;width:1px;background-color:#aeaeae}.ui-grid-pinned-container.ui-grid-pinned-container-right .ui-grid-header-cell:first-child{box-sizing:border-box;border-left:1px solid;border-width:1px;border-left-color:#aeaeae}.ui-grid-pinned-container.ui-grid-pinned-container-right .ui-grid-cell:first-child{box-sizing:border-box;border-left:1px solid;border-width:1px;border-left-color:#aeaeae}.ui-grid-pinned-container.ui-grid-pinned-container-right .ui-grid-header-cell:not(:first-child) .ui-grid-vertical-bar,.ui-grid-pinned-container .ui-grid-cell:not(:first-child) .ui-grid-vertical-bar{width:1px}.ui-grid-pinned-container.ui-grid-pinned-container-right .ui-grid-header-cell:not(:first-child) .ui-grid-vertical-bar{background-color:#d4d4d4}.ui-grid-pinned-container.ui-grid-pinned-container-right .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar{background-color:#aeaeae}.ui-grid-pinned-container.ui-grid-pinned-container-first .ui-grid-header-cell:first-child .ui-grid-vertical-bar{left:-1px;width:1px;background-color:#aeaeae}.ui-grid-column-resizer{top:0;bottom:0;width:5px;position:absolute;cursor:col-resize}.ui-grid-column-resizer.left{left:0}.ui-grid-column-resizer.right{right:0}.ui-grid-header-cell:last-child .ui-grid-column-resizer.right{border-right:1px solid #d4d4d4}.ui-grid[dir=rtl] .ui-grid-header-cell:last-child .ui-grid-column-resizer.right{border-right:0}.ui-grid[dir=rtl] .ui-grid-header-cell:last-child .ui-grid-column-resizer.left{border-left:1px solid #d4d4d4}.ui-grid.column-resizing{cursor:col-resize;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-grid.column-resizing .ui-grid-resize-overlay{position:absolute;top:0;height:100%;width:1px;background-color:#aeaeae}.ui-grid-row-saving .ui-grid-cell{color:#848484 !important}.ui-grid-row-dirty .ui-grid-cell{color:#610B38}.ui-grid-row-error .ui-grid-cell{color:#FF0000 !important}.ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell{background-color:#C9DDE1}.ui-grid-disable-selection{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.ui-grid-selection-row-header-buttons{display:flex;align-items:center;height:100%;cursor:pointer}.ui-grid-selection-row-header-buttons::before{opacity:.1}.ui-grid-selection-row-header-buttons.ui-grid-row-selected::before,.ui-grid-selection-row-header-buttons.ui-grid-all-selected::before{opacity:1}.ui-grid-tree-row-header-buttons.ui-grid-tree-header{cursor:pointer;opacity:1}.ui-grid-tree-header-row{font-weight:bold !important}.ui-grid-tree-header-row .ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell{pointer-events:all}.ui-grid-cell-contents.invalid{border:1px solid #fc8f8f}
#zoom {
  top: 550px;
}

@media (max-height: 750px) {
  #full-page {
    visibility: hidden;
  }

  .panelSelectorStack {
    padding-top: 0;
  }

  .panelSelector {
    margin-bottom: 0;
  }
}

@media (max-height: 660px) {
  #full-page {
    display: none !important;
  }

  .panelSelectorStack {
    padding-top: 60px;
    flex-direction: row;
    align-items: flex-start;
  }
}

.defaultStrokeShape {
  pointer-events: none;
}

#resultContextMenu div {
  font-size: 12px;
}

#resultContextMenu .spatialDistributionContainer,
#resultContextMenu .metricsContainer {
  margin-top: 15px;
}

#resultContextMenu .spatialDistribution:not(:last-child) {
  margin-bottom: 5px;
}

.minimap {
  position: fixed;
  width: 250px;
  height: 170px;
  left: 40px;
  bottom: 30px;
  z-index: 99;
  transition: left 0.1s ease-in-out;
}

.minimap.displacedBySlideTray {
  left: calc(var(--slide-tray-width) + 40px);
}

.minimap #osdNavigator {
  width: 100%;
  height: 100%;
  background: black;
  border: 2px solid rgb(85, 85, 85);
  opacity: 0.8;
  overflow: hidden;
}

.privacyPreferences p {
  font-weight: 300;
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.42857143;
}

.privacyPreferences .checkboxContainer input {
  position: absolute;
  cursor: pointer;
}

.privacyPreferences span.checkboxtext {
  font-size: 13px;
}

.privacycheckbox strong {
  font-weight: bold;
  font-size: 13px;
}

.slideviewer-tray-lock {
  color: #a317b5;
  cursor: default;
}

.slideviewer-breadcrumb {
  margin-left: 0;
  margin-top: 10px;
}

.algorithmChannels {
  margin-bottom: 10px;
}

.missingChannelsErrorMsg {
  padding: 10px;
  background: #fceeef;
  margin-top: 10px;
}

.missingChannelsErrorMsg div {
  margin-top: 10px;
}

.missingChannelBanIcon {
  color: #e1595e;
}