////////////////// General //////////////////
html, body {
  height: 100%;
}
body .container-fluid {
  height:100%;
}
#navigation {
  height: 8%;
}
#main-content {
  height: 92%;
}
/////////////////////////////////////////////

////////////////// Catalog index //////////////////
.search_result {
  padding: 0.5em;
}
.search_result:hover {
  background-color: #EEE;
}
.search_result.selected {
  border: 2px solid #32a1ce;
  padding: calc(0.5em - 2px);
}
#canvas_wide_dates_histogram {
  height: 60vh;
}
////////////////////////////////////////////

////////////////// Facets //////////////////
#facets .constrained {
  background: lightgreen;
}

li.selected_constraint {
  color: green;
}
////////////////////////////////////////////

////////////////// Show page - Viewer //////////////////
#openseadragon_view {
  width: auto;
  height: 85vh;
  border-style: solid;
  border-width: 2px;
  background-color: #b3c3c7;
}
#viewer_container {
  position: relative;
}

.openseadragon-canvas + div {
  z-index: 2;
}

#page_counter {
  position: absolute;
  background-color: #8AF;
  border-color: #000;
  border-style: solid;
  font-weight: bold;
  border-width: 2px;
  top: 1vh;
  right: 3.5vh;
  padding: 0px 2px;
  z-index: 1;
}
.article_overlay {
  background-color: #AAAAAA;
  opacity: 0.2;
  outline-style: solid;
  outline-width: 1px;
  z-index: 1;
}
.article_overlay_selected {
  background-color: #9999FF;
  opacity: 0.2;
  outline-style: solid;
  outline-width: 2px;
  z-index: 1;
}
.article_overlay_compound_selected {
  background-color: #BBCCFF;
  opacity: 0.4;
  outline-style: solid;
  outline-width: 1px;
  z-index: 1;
}
.article_overlay:hover {
  background-color: #CCCCCC;
  opacity: 0.6;
}
.article_overlay_compound_selected:hover {
  background-color: #CCDDFF;
  opacity: 0.6;
}
.selection_mask {
  background-color: #000000;
  opacity: 0.4;
  z-index: 0;
}

.li-handle {
  cursor: move;
  padding-right: 10px;
}
///////////////////////////////////////////////

////////////////// Show Experiment /////////////////////
.tool:hover {
  cursor: grab;
}
.tf-nc.tool-slot {
  border-style: dashed;
  width:8vw;
  height:10vh;
  padding: 0;
}
.tf-nc.possible-tool-slot {
  border-color: cornflowerblue;
  border-width: 3px;
}
.tf-nc.tool-slot-hover {
  border: 1em solid blue !important;
}

.tool-status {
  height: 1em;
  width: 1em;
  border-radius: 50%;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
}
.tool-status-created {
  background-color: gray;
}
.tool-status-configured {
  background-color: white;
}
.tool-status-error {
  background-color: red;
}
.tool-status-running {
  background-color: gold;
}
.tool-status-finished {
  background-color: green;
}

.tool-slot-occupied {
  width:15vw;
  height:15vh;
  padding: 0;
}
#experiment_area {
  display: flex;
  align-items: center;
  justify-content: center;
}
#experiment_canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  overflow: visible;
}
////////////////////////////////////////////////////////

////////////////////// Index Datasets ////////////////////
.dataset-item:hover {
  background-color: #EEE;
}
////////////////////////////////////////////////////////

////////////////////// Show Dataset ////////////////////
.dataset_document {
  padding: 0.5em;
}
.dataset_document:hover {
  background-color: #FBFBFB;
}
.dataset_document.selected {
  border: 2px solid #32a1ce;
  padding: calc(0.5em - 2px);
}
////////////////////////////////////////////////////////