body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.container.is-fluid.adaptable-width {
  max-width: calc(85vw + 8rem) !important;
}

.image-highlight {
  border: 3px lightgrey solid;
}

.sticky-image {
  position: sticky;
  top: 20px;
}

.handle {
  cursor: pointer;
}

.edited-row {
  border-left: solid #3298dc 1px;
}

.has-margin-top-auto {
  margin-top: auto;
}

.xml_code {
  white-space: break-spaces;
}

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

.container {
  flex: 1;
  width: 100%;
}

/* Two containers are present in the main template as some views use a fluid container and some not
 * This code hides the unused container
 */
.container:empty {
  display: none;
}

.osd-container {
  display: block;
  height: calc(100vh - 18rem);
  background-color: black;
}

.is-nowrap {
  white-space: nowrap;
}

.label[for*="~"] {
  padding: .5rem 0 .25rem .75rem;
  margin: -.75rem 0 0 .5rem;
  border-left: 2px solid lightgrey;
}

.label[for*="~"] ~ * {
  padding-left: .75rem;
  margin-left: .5rem;
  border-left: 2px solid lightgrey;
}

.is-ellipsed {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.is-overflow-auto {
  overflow: auto;
}

.columns.has-sidebar-right > .column.collapsible {
  max-width: 40%;
}

.columns.has-sidebar-right.is-collapsed > .column:last-child .sidebar-content {
  display: none;
}

.columns.has-sidebar-right.is-collapsed > .column:last-child .sidebar-trigger-icon {
  transform: rotate(180deg);
}

.is-150px-height {
  height: 150px;
}

.is-width-fifth {
  width: 20%;
}

.faq-rendering h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Use a decimal listing for h2 representing questions */
.faq-rendering h2 {
  font-size: 1.75rem;
  margin: 1.5rem 0 .75rem 0;
}

.faq-rendering h3 {
  font-size: 1.5rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.faq-rendering h4 {
  font-size: 1.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.15rem;
}

.faq-rendering ul {
  list-style: disc;
  margin-left: 1.5rem;
}

.top-left-absolute {
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-left-radius: 2px !important;
  border-top-right-radius: 2px !important;
}

/* Override the look of the main Annotorious polygon */
.main-polygon {
  stroke: green !important;
  fill: green !important;
  fill-opacity: 10% !important;
}

/* Update Annotorious polygon style on hover
 * and apply the same style when the user hovers a reference to the zone
 */
#annotated_image .hovered-polygon.a9s-inner,
#annotated_image .a9s-inner:hover {
  fill: #fff000;
  fill-opacity: 20%;
  stroke: #fff000;
}

/* Increase contrast on Annotorious zones numbering */
#annotated_image svg text.numbering {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  fill: #eee;
}

#annotated_image .hovered-polygon + svg text.numbering,
#annotated_image polygon:hover + svg text.numbering {
  font-weight: bold;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}