#characterCreation {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-content: stretch;
  align-items: center;
}

#ccLeft {
  flex: 0 1 auto;
  width: 50%;
  align-self: auto;
}

#ccRight {
  flex: 0 1 auto;
  width: 50%;
  align-self: center;
}

.ccOption {
  margin: auto;
  margin-bottom: 2.25ex;
  text-align: center;
}

.ccRange {
  vertical-align: top;
  margin-left: 1.5ex;
  margin-right: 1.5ex;
}

.ccButton {
  @extend .textLink;
  &[data-shortcut]:before {
    content: " (" attr(data-shortcut) ") " !important;
  }
}

.ccOptionTopLabel {
  text-align:center;
  font-weight: bold;
  margin-bottom: -0.25ex;
}

.ccHeader {
  text-align: center;
  font-weight: bold;
  margin-top: 2ex;
  margin-bottom: 0.5ex;
  font-size: 1.1rem;
}

.rangeValue {
  margin-top: -0.25ex;
}