.root {
  border-bottom: var(--standard-border-width) solid var(--medium-gray);
}

.instructions {
  padding: var(--extra-large-padding) var(--xxl-padding);
  border: var(--standard-border-width) solid var(--medium-gray);
}

.instructionsHeader {
  padding-bottom: var(--standard-padding);
  font-weight: var(--font-weight-medium-bold);
}

.info {
  padding: var(--large-padding) var(--extra-large-padding);
  background-color: var(--lightest-gray);
  height: 100%;
}

.header {
  padding-top: var(--standard-padding);
  padding-bottom: var(--large-padding);
}

.title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium-bold);
}

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

.itemWrapper {
  display: flex;
}

.stimulusItem {
  flex: 1 1 auto;
}

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

.stimulusInfo {
  width: 50%;
}

.sourceUrl {
  font-size: var(--font-size-sm);
}

@media (--phone-break-point) {
  .stimulusGroup {
    flex-direction: column;
  }

  .stimulusInfo {
    width: 100%;
  }

  .items {
    width: 100%;
  }

  .instructions {
    padding: var(--extra-large-padding) var(--large-padding);
  }

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

  .connectingLines {
    flex: 0 0 1rem;

    border-left: var(--standard-border-width) dotted;
    border-bottom: var(--standard-border-width) dotted;
    border-color: var(--dark-gray);

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