.root {
  border-bottom: var(--rootBorderWidth) solid var(--rootBorderColor);
}

.instructions {
  padding: var(--instructionsPaddingTopBottom) var(--instructionsPaddingLeftRight);
  border: var(--instructionsBorderWidth) solid var(--instructionsBorderColor);
}

.instructionsHeader {
  padding-bottom: var(--instructionsHeaderPadding);
  font-weight: var(--instructionsHeaderFontWeight);
}

.items {
  padding: var(--itemsPadding);
  width: 50%;
}

.scroll {
  max-height: 90vh;
  overflow: auto;
}

/* for MS Edge */

@supports (-ms-ime-align: auto) {
  .scroll {
    overflow-x: inherit;
  }
}

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

.stimulusInfo {
  width: 50%;
  max-height: 90vh;
  overflow: auto;
  height: 100%; /* this height is to allow the background color full height */
}

@media screen and (--phoneBreakPoint) {
  .stimulusGroup {
    flex-direction: column;
  }

  .stimulusInfo {
    width: 100%;
    max-height: auto;
  }

  .items {
    width: 100%;
  }

  .scroll {
    max-height: auto;
  }

  .instructions {
    padding: var(--phoneInstructionsPaddingTopBottom) var(--phoneInstructionsPaddingLeftRight);
  }
}
