.visual-progress-container {
  position: relative;
  width: 100%;
}

.visual-progress-current {
  /* For high contrast we don't show colors so instead use a solid border
        to show current allocation. */
  border-style: solid;
  border-width: 1px;
}

.visual-progress-underallocated {
  background-color: rgba( 16, 124, 16 ,  1 );
  background-color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
}

.visual-progress-overallocated {
  background-color: rgba( 218, 10, 0 ,  1 );
  background-color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
}

.visual-progress-total-unallocated {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.visual-progress-no-total {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.visual-progress-total {
  /* For high contrast we don't show colors so instead use a dashed border
        to show current capacity. */
  border-width: 1px;
  border-style: dashed;
  border-right: 4px solid black;
}

.visual-progress-summary-current {
  display: inline-block;
  font-size: 32pt;
  margin-right: 8px;
  height: 50px;
}

.visual-progress-total > .visual-progress-current,
.visual-progress-current > .visual-progress-total {
  height: 18px;
}