path.css

:root {
  --tmaCanvasWidth: 55%;
  --tabsContainerWidth: 45%;
  --wsiOverlayOpacity: 0.6;
}

body {
  font-family: sans-serif;
  margin: 0 1rem 0 1rem;
}

h2 {
  color: maroon;
  display: inline-flex;
  margin-bottom: 0rem;
}

hr {
  margin-bottom: 0.7rem;
}

p {
  color: navy
}

/* 
canvas {
  position: absolute;
} */

#tmaPath {
  margin-top: 0.5rem;
}

#appHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0.4rem 0;
}

#appName {
  height: fit-content;
}

/* #loginSpan {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
} */

/* #loginSpan p {
  margin-bottom: 0.3rem;
} */

#boxLogin {
  display: flex;
  justify-content: flex-end;
  width: 15%;
  text-align: right;
  margin-top: 0.5rem;
}

#username {
  margin: auto 0;
  
}

#datasetSelectSpan {
  display: flex;
  flex-direction: row; 
}

#datasetSelectSpan p {
  margin-bottom: 0;
}

#datasetSelectDropdown {
  margin: auto 0 auto 1rem;
}

#datasetSelectDropdownBtn {
  padding: 0.3rem 2rem;
}

#datasetSelectDropdownBtn>i {
  margin-left: 1rem;
}

#datasetSelectDropdownDiv {
  width:fit-content;
  min-width: 35vw; 
  max-height: 50vh;
  overflow-y: auto;
}

#datasetSelectDropdownDiv>button {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: left;
}

.datasetOptionBtn.selected, .annotationFormat.selected  {
  background: rgba(100,200,255,0.2);
}

#imgInputBtn {
  margin-bottom: 0.8rem;
}

#box-select {
  margin-bottom: 0.8rem;
}

#filePickers {
  display: inline-flex
}

#filePickers>h5 {
  padding: 0.5rem 2rem 0rem 0rem;
}

#filePickers>h6:first-child {
  display: block;
  padding: 0.8rem 2rem 0rem 0rem;
}

#filePickers>h6:not(:first-child) {
  display: block;
  padding: 0.8rem 2rem 0rem 2rem;
}

#filePickers>hr {
  margin-top: 0rem;
}

#imageDiv {
  display: flex;
}

#toolsOuterDiv {
  visibility: hidden;
  display: flex;
  flex-direction: column;
}

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

#toolsDiv>div:first-child {
  margin-top: 0.5rem;
}

#toolsDiv>div:not(:first-child) {
  margin-top: 1.5rem;
}

.tool {
  display: flex;
  flex-direction: row;
  width: fit-content;
}

.dropdown-menu, .tooltip, .modal {
  z-index: 1000001;
}

.dropdown-toggle {
  height: 100%;
  padding-left:0.2rem;
  padding-right: 0.2rem;
}

.dropdown-menu {
  padding: 0.5rem 0 0 0.5rem;
}

#scrollToZoom {
  position: relative;
  margin-left: 0.5rem;
}

.loaderDiv {
  display: none;
  position: absolute;
  background-color: rgba(220, 220, 220, 0.4);
  z-index: 9999999;
}

.loaderImg {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#moreFilesLoaderImg {
  position: relative;
  width: 50px;
  height: 50px;
}

#imgHeader {
  height: 6%;
}

#tmaCanvasParent {
  position: relative;
}

#wsiCanvasParent {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
}

#wsiCanvasParent>div:first-child {
  height:95% !important ;
  background: black !important;
}

#wsiZoomSliderDiv {
  display: grid;
  grid-template-columns: 20px auto 80px;
  column-gap: 1rem;
  width: 100%;
  margin-top: 0.5rem;
}

#wsiZoomSliderText {
  height: fit-content;
}

#wsiZoomSlider, #wsiZoomSlider + datalist {
  --slider-width: 100%;
}

#wsiZoomSlider {
  width: var(--slider-width);
  margin-left: 0;
  margin-right: 1rem;
}

#wsiZoomSlider + datalist {
  display: grid;
  grid-template-columns: calc((var(--slider-width) / ((var(--list-length) - 1) * 2)) * 4/5) repeat(calc(var(--list-length) - 2), calc(var(--slider-width) / (var(--list-length) - 1))) calc(var(--slider-width)/((var(--list-length) - 1) * 2) + 12px);
}
#wsiZoomSlider + datalist option {
  display: inline-block;
  text-align: center;
  font-size: 10px;
  padding: 0;
}
#wsiZoomSlider + datalist option:first-child {
  text-align: left;
}
#wsiZoomSlider + datalist option:last-child {
  text-align: right;
}

.wsiControlBtnParent {
  background-color: rgba(0, 0, 0, 0.5);
}

.wsiControlBtnParent:hover {
  background-color: black;
}

.wsiControlBtnParent.active {
  background-color: black;
}

.wsiControlBtnParent.active i {
  color: rgba(100,240,100,1)
}

.wsiControlBtnParent .form-check {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.wsiControlBtnParent .form-check>label {
  width: 100%;
  height: 100%;
}

.wsiControlBtnParent .form-check:last-child {
  margin-bottom: 0.5rem;
}

.wsiControlBtnParent .form-check:hover {
  background-color: rgba(190, 190, 255, 0.4);
}

.wsiControlBtn {
  border: none;
  padding: 0;
  width: 51px;
  height: 50px;
  cursor: pointer;
}

.wsiControlBtn>i {
  font-size: 28;
  color: rgba(200, 200, 200, 1);
}

#runModelWSIDropdownDiv {
  width: 12rem;
}

#runModelWSI_moreOptions {
  padding-top:0;
}

#hideAnnotationsDropdownDiv {
  width: 10.5rem;
}

#hideAnnotationsDropdownDiv, #runModelWSIDropdownDiv {
  padding-right: 0.5rem;
}

#hideAnnotationsDropdownDiv>hr, #runModelWSIDropdownDiv>hr {
  margin: 0.3rem 0;
}

#stopWSIModelButtonDiv {
  display: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

#stopWSIModelBtn {
  width: 100%;
  height:100%;
}

#canvasWithPickers {
  position: relative;
}

#canvasWithThumbnails {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#thumbnailPickerParent {
  position: relative;
  width: 7rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

#thumbnailPicker {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0px;
  bottom: 0;
  left: 0;
  z-index: 5;
}

#thumbnailsList {
  overflow-y: auto;
}

#thumbnailPageSelector {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

/* #imagePicker>ul {
  list-style-type: none;
  list-style-position: unset;
} */

.thumbnailDiv:not(:first-child) {
  margin-top: 0.7rem;
}

.thumbnailDiv {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  align-items:center;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}

.imagePickerThumbnail {
  width: 5rem;
  height: 5rem;
  border: 1px solid lightpink;
  border-radius: 5px;
}

.annotationsPartlyCompletedThumbnail {
  border: 3px solid #a4d100;
}

.annotationsCompletedThumbnail {
  border: 3px solid rgb(0, 99, 0);
}

.selectedThumbnail {
  border: 2px solid dodgerblue;
}

.imagePickerThumbnailText {
  font-size: 7px;
  width: 85px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#tabsContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-left: 1px solid lightgray;
}

#tabsContent {
  display: flex;
  width: 100%;
  height: 100%; 
  border-top: 1px solid lightgray;
}

.tabContainer {
  height: 100%;
}

.tabContainerWithMargin {
  margin-top: 0.7rem;
  padding-left: 1.5rem;
  height: calc(100% - 0.7rem)
}

#collaborate>.jumbotron {
  padding-left: 2rem;
  margin-left: 1rem;
  height: fit-content;
}

#tabsList {
  display: flex;
}

#tabs {
  height: fit-content;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.nav-item {
  display: inline-block;
  height: fit-content;
}

.nav-tabs {
  border-bottom: none;
}

.tab-pane {
  display: flex;
  width: 100%;
  height: 100%;
}

.card-header {
  padding: 0.6rem 1.25rem;
}

#boxFileManager {
  display: flex;
  flex-direction: column;
  margin-left: 0;
}

#boxFolderTree {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#datasetSelectDropdownDiv>hr, #boxFileManager hr {
  margin-top: 0;
  margin-bottom: 0;
}

#boxFolderTree hr {
  width: 94%;
}

.boxFileMgr_folderTree {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
}

.boxFileMgr_subFolder {
  display: flex;
  flex-direction: row;
  padding-left: 3%;
  padding-right: 3%;
  justify-content: space-between;
}

.boxFileMgr_subFolder>button {
  width: 95%;
  text-align: left;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.boxFolderOptionsDiv {
  margin: auto;
}

.boxMoreFilesDiv {
  width: 100%;
  text-align: center;
}

.boxMoreFilesDiv>button {
  width: 100%;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 16px;
}

.boxFolderOptionsToggle {
  width: fit-content;
  height: fit-content;
}

.boxFolderOptionsDropdown {
  padding: 0.5rem;
}

.boxFolderOption {
  width: 10rem;
  padding: 0.5rem;
  margin: 0;
}

#boxFileMgrHeader {
  grid-template-columns: 110px 10px auto 10px 100px;
  height: 4rem;
  display: none;
}

.boxFileMgrHeader {
  position: relative;
  background-color: rgba(210, 210, 210, 0.2);
}


#boxFileMgrNav {
  grid-column-start: 3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #007bff;
}

#fileMgrOptionsContent {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  height: 2.5rem;
}

#boxFileMgrTools {
  margin-left: 0.8rem;
}

#boxFileMgrOptionsBtn {
  position: absolute;
  right: 0;
  margin-right: 1.2rem;
}

.boxFileMgrHeaderBtn:not(:last-child) {
  margin-right: 0.3rem;
}

.fileMgrOptions {
  margin: auto 0;
}

.fileMgrOption {
  width: 100%;
  min-width: 6rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  vertical-align: middle;
}

#fileMgrSortValues {
  min-width: unset;
  width: fit-content;
  padding: 0.5rem;
}

#fileMgrSortValues>button {
  margin: 0.1rem 0;
}

.selectedImage {
  background-color: rgba(220, 120, 190, 0.2);
}

#nextImageMessage {
  padding: 0.375rem 0.75rem;
}

#nextImageMessage>button {
  padding: 0;
  margin-left: 0.5rem;
  vertical-align: unset;
}

.accordion>.card:only-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

#annotationsAccordion {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow-y: auto;
}

.annotationWithMenuHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.classCardHeader {
  padding-right: 0rem;
}

.classDefinitionPopup {
  width: fit-content;
  height: 100%;
  vertical-align: middle;
  padding: 0;
  margin: 0;
}

.classificationMenuDropdown {
  z-index: 3;
  padding: 0.3rem 0;
}

.classificationMenuButtons>hr {
  margin: 0;
  padding: 0;
}

.classificationMenuOption {
  width: 100%;
  height: fit-content;
  background-color: unset;
  border: none;
}

.annotationsCard {
  width: 100%;
  overflow: visible;
}

.annotationsCardBody {
  padding: 0;
}

.wsiAnnotationsParent hr {
  margin: 0;
}

.wsiAnnotationTypesBtnGrp {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 2.2rem;
  border-bottom: 1px solid lightgray;
}

.wsiAnnotationTypesBtnGrp button {
  border-radius: 0px;
  border: none;
}

.wsiAnnotationTypesBtnGrp button:first-child.active {
  background-color: lightcoral;
}

.wsiAnnotationTypesBtnGrp button:last-child.active {
  background-color: lightsteelblue;
}

.wsiAnnotationOptions {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 1rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  vertical-align: middle;
}

#wsiAnnotationOptionThreshold {
  width: 10rem;
}

#wsiAnnotationOptionThresholdValue {
  width: 4rem;
  margin-left: 1rem;
}

.wsiAnnotationsList {
  flex-direction: column;
  width: 100%;
}

.wsiAnnotationElement {
  display: grid;
  grid-template-columns: auto 100px;
  padding: 1rem;
  cursor: pointer;
  /* content-visibility: auto; */
  background-color: transparent;
  transition-property: background-color;
  transition-duration: 500s;
}

.wsiAnnotationElement.highlightedAnnotation {
  animation: highlightElement;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.wsiAnnotationElement:hover {
  background-color:rgba(200, 200, 200, 0.25);
}

.wsiAnnotationElement>div:first-child {
  display: grid;
  grid-template-columns: 90px auto;
}

.wsiPredsUserFeedback>.btn-light:first-child.active {
  background-color: var(--success);
}

.wsiPredsUserFeedback>.btn-light:last-child.active {
  background-color: var(--danger);
}

.wsiNoAnnotationsMsg {
  display:flex;
  align-items:center;
  width:100%;
  height:20vh;
}

.qualityAnnotations {
  width: 100%;
  flex-direction: column;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.quality_othersAnnotations {
  margin: 1rem;
  color: gray;
  font-size: 1rem;
}

.qualitySelect {
  margin-bottom: 0;
  border-bottom: 1px solid #dee2e6;
}

.qualitySelect tr>th:first-child {
  padding-left: 2rem;
}

.qualitySelect tr>td:first-child {
  padding-left: 2rem;
}

.modelPrediction {
  background-color: rgba(180, 255, 180, 0.5);
}

.labelText.emojiText {
  font-size: 1.7rem;
}

.labelText.normalText {
  font-size: 1.15rem;
  /* padding: 0.3rem 0.5rem; */
}

.commentsToggleDiv {
  margin: 0 0.5rem;
}

.commentsToggleDiv>button{
  font-size: 0.9rem;
}

.allCommentsCard {
  width: 100%;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-left: 0;
  padding-right: 0;
  background-color: azure;
  height: auto;
  max-height: 8rem;
  overflow-y: auto;
  scrollbar-width: none;
}

.allCommentsCard::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.allCommentsCard>hr {
  margin:0;
}

.annotationComment {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  vertical-align: middle;
  padding: 0.7rem 0.5rem;
}

.annotationComment:hover {
  background-color: rgba(225, 235, 255);
}

/* .annotationComment:first-child {
  padding-top: 1rem;
}

.annotationComment:last-child {
  padding-bottom: 1rem;
} */

.annotationCommentText {
  margin: auto 0.5rem;
  width: 87%;
  hyphens: auto;
}

.commentMenu {
  display: none;
}

.commentMenuToggle {
  width: 5%;
  height: fit-content;
  padding: 0;
  margin: 0.2rem 1rem 0.2rem 0;
  background-color: unset;
  border: none;
  flex: 0 1 auto;
}

.commentMenuOption {
  width: fit-content;
  height: fit-content;
  padding: 0.4rem;
  margin: 0.2rem 0.2rem 0.2rem;
  background-color: unset;
  border: none;
}

.commentMenuDropdown {
  z-index: 4;
  padding: 0.3rem;
  min-width: 1rem;
  height: fit-content;
  text-align: right;
}

.commentMenuButtons {
  display: flex;
  flex-direction: row;
}

.wsiSettings_selectLabelParent {
  margin: 0.4rem 1rem 0.4rem 0;
}

.wsiSettings_hideLabelBtn {
  margin-right: 0.3rem;
  padding: 0.3rem;
  box-shadow: none;
  color: lightgrey;
  border: none;
}

.wsiSettings_hideLabelBtn.active, .wsiSettings_hideLabelBtn:active {
  background-color: transparent !important;
  color: var(--danger) !important;
  border: none;
}

.wsiSettings_hideLabelBtn.active>i, .wsiSettings_hideLabelBtn:active>i {
  text-shadow: 0px 0px 2px rgba(240,128,128,0.8);
}

.wsiSettings_hideLabelBtn:hover {
  color: var(--gray);
  background-color: transparent;
}

.wsiSettings_hideLabelBtn:focus {
  background-color: transparent;
  box-shadow: none !important;
}

.wsiUserAnnotation {
  outline: 1px solid rgba(65, 105, 225, var(--wsiOverlayOpacity));
  box-shadow: 0px 0px 2px 2px rgba(135, 206, 250, var(--wsiOverlayOpacity));
}

.wsiModelAnnotation {
  outline: 1px solid rgba(29, 172, 29, var(--wsiOverlayOpacity));
}

.wsiModelAnnotation:hover, .wsiModelAnnotation.hover {
  /* box-shadow: 0px 0px 3px 3px rgba(144, 238, 144, var(--wsiOverlayOpacity)); */
}

.wsiUserAnnotation:hover, .wsiUserAnnotation.hover {
  box-shadow: 0px 0px 5px 5px rgba(173, 216, 230, var(--wsiOverlayOpacity));
}

.wsiUserAnnotation:focus, .wsiModelAnnotation:focus, .wsiUserAnnotation.focus, .wsiModelAnnotation.focus {
  outline: 1px solid rgba(65, 105, 225, var(--wsiOverlayOpacity));
  box-shadow: 0px 0px 5px 5px rgba(135, 206, 235, var(--wsiOverlayOpacity));
}

.wsiProcessing {
  outline: 1px dashed rgba(65, 105, 225, 0.6);
  pointer-events: none;
}

.tileProcessing {
  outline: 1px dotted lightseagreen;
  background-color: rgba(240, 240, 240, 0.2);
  transition: background .5s linear;
  pointer-events: none;
}

.tileProcessing.transition {
  background-color: rgba(150, 250, 146, 0.5);
}

.fa-info-circle {
  color: lightseagreen;
}

.fa-ellipsis-v {
  color: lightslategray;
}

.fa-trash-alt {
  color: lightslategray;
}

.fa-globe {
  color: lightslategray;
}

.fa-pencil-alt {
  color: lightslategray;
}

.dropdown-toggle.classificationMenuToggle::before {
  display: none;
}

.dropdown-toggle.commentMenuToggle::before {
  display: none;
}

.dropdown-toggle.commentMenuToggle::after {
  display: none;
}

.dropdown-toggle.boxFolderOptionsToggle::after {
  display: none;
}

.quality_addComment {
  margin-top: 2px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.quality_commentOptions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-left: 0.1rem;
}

.quality_commentOptions label {
  margin-bottom: 0
}

.quality_commentOptions>div {
  display: flex;
  flex-direction: row;
  margin: auto 0;
}

#addAnnotationsBtn {
  padding-left: 0;
}

#toast {
  position: fixed;
  /* margin-top: -2.5rem; */
  bottom: 0;
  width: 100%;
  left: 45%;
  font-size: 18px;
  background-color: unset;
  z-index: 10000000;
  /* box-shadow: 0px 0px 2px 2px rgba(150, 150, 150, 0.5) */
}

.toast-header {
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255);
  font-weight: lighter;
  z-index: 1000010;
}

#addAnnotationsModal {
  overflow-y: auto;
}

#enableComments {
  width: auto;
  margin-left: 0.7rem;
}

#addLabelsToModal {
  display: none;
  flex-direction: column;
}

/* #modalLabelsList {
} */

.form-group.row {
  padding-left: 1rem;
}

.required-asterisk {
  color: red;
}

.toast {
  margin: 2rem auto;
  background-color: rgba(10, 10, 10, 0.4);
  font-size: 16px;
  color: white;
  z-index: 5;
}

#zoomLens {
  position: absolute;
  display: block;
  border: 1px solid lightcoral;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 3px lightgray;
}

.btn-default.btn-on-1.active{
  background-color: #006FFC;
  color: white;
}

.btn-default.btn-off-1.active{
  background-color: seagreen;
  color: white;
}

.fa-caret-right {
  width:18px;
}

@media only screen and (min-width: 768px) {
  .container-fluid {
    padding-left: 7px;
    padding-right: 7px;
  }

  #imageDiv {
    flex-direction: row;
  }

  #canvasWithPickers {
    width: var(--tmaCanvasWidth, 55%);
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
  }

  #canvasDiv {
    display: flex;
    flex-direction: column;
    width: calc(100% - 8rem);
    height: 100%;
  }

  #tabsContainer {
    width: var(--tabsContainerWidth, 45%);
  }
}

@media only screen and (max-width: 768px) {
  #imageDiv {
    flex-direction: column;
  }

  #canvasDiv {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 100%;
  }

  #tabsContainer {
    width: 80%;
  }

  #imageDiv :not(:first-child) {
    margin-top: 2rem;
  }

  .qualitySelect {
    flex-direction: row;
  }
}

@keyframes highlightElement {
  0% { background-color: lightskyblue; }
  100% { background-color: transparent; }
}

/* @keyframes hideTabs {
  0% { width: 35%; }
  100% { width: 0%; } 
} */