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

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

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

.info {
  padding: var(--infoPaddingTopBottom) var(--infoPaddingLeftRight);
  background-color: var(--infoBackgroundColor);
  height: 100%;
  overflow: scroll;
}

.header {
  padding-top: var(--headerPaddingTop);
  padding-bottom: var(--headerPaddingBottom);
}

.title {
  font-size: var(--titleFontSize);
  font-weight: var(--titleFontWeight);
}

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

.stimulusItem {
  flex: 1 1 auto;
}

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

.stimulusInfo {
  width: 50%;
}

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

  .stimulusInfo {
    width: 100%;
  }

  .items {
    width: 100%;
  }

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

  .info {
    padding: var(--phoneInfoPadding);
  }

  .connectingLines {
    flex: 0 0 1rem;

    border-left: var(--phoneConnectingLinesBorderWidth) dotted;
    border-bottom: var(--phoneConnectingLinesBorderWidth) dotted;
    border-color: var(--phoneConnectingLinesBorderColor);

    margin-top: var(--phoneConnectingLinesMargin);
    margin-right: var(--phoneConnectingLinesMargin);
    height: 2rem;
    width: 1.5rem;
  }
}
