#work-area {
  overflow: hidden;
  display: flex;
}

#placeholder-text {
  padding: 1em;
}

div.noUi-handle {
  background: royalblue;
}

.bad-size {
  color: red;
}

.tooltip-before {
  position: absolute;
  bottom: 3em;
  right: 0;
}

.tooltip-after {
  position: absolute;
  top: 3em;
  right: 0;
}

.ruler {
  position: absolute;
  width: 100em;
  height: 0;
  top: 0;
  right: 0;
  border-top: 1px dashed black;
}

.noUi-tooltip {
  z-index: 2;
}

.pin-button {
  padding: 3px;
  border: 1px solid black;
}

#slider-container {
  padding-left: 8em;
  padding-right: 1em;
}

#slider {
  height: 100%;
  width: 1em;
}

.sidebar-sticky {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow: auto;
}

#outer-container {
  border: 1px solid red;
  width: 20em;
  padding: 0;
}

.placeholder-text {
  position: absolute;
  width: 100%;
  z-index: -1;
}

#image-container {
  padding: 0;
  margin: 0;
}

#image-container img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: block;
}

[role="tabpanel"] {
    border: 1px solid #d3d3d2;
    border-top-width: 0;
    padding: 0.5em;
}