.sentence-wrap {
  margin: 1rem 1rem 12rem 1rem;
  border: 3px solid var(--color);
  border-radius: var(--border-radius);
}

body.cc1 .sentence-wrap {
  --color: var(--cc1-main-color);
}

.list-group {
  border: none;
  border-radius: var(--border-radius);
}

.list-group-item {
  border: none;
  color: #333333;
}

.form-check-input {
  margin-top: 0.2rem !important;
}

.list-group-item {
  border-bottom: 1px solid #ddd;
}

.section-block {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.section-content {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  padding-left: 22px;
}

.lesson {
  color: #a8a8a8;
  font-size: 14px;
}

.sentence-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.mode-wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  margin-top: 1rem;
}

.mode-label {
  padding-left: 30px;
}

.index-buttons {
  justify-content: space-between;
  margin: 1rem 1rem 1rem 1rem;
}

.index-buttons button {
  width: 100%;
  text-align: center;
  height: 3rem;
  border-radius: var(--button-border-radius);
  border: none;
  font-size: 16px;
  color: white;
  letter-spacing: 0.5px;
  line-height: 3rem;
}

.index-buttons .index-reset-btn {
  background-color: var(--gray-color);
  width: calc(100% - 0.5rem) !important;
}

.index-reset-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.index-start-btn {
  margin-left: 0rem !important;
  background: var(--color);
  position: relative;
}

.index-start-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

body.cc1 .index-start-btn {
  --color: var(--cc1-main-color);
}

body.ce1 .index-start-btn {
  --color: var(--ce1-main-color);
}

body.mc1 .index-start-btn {
  --color: var(--mc1-main-color);
}

body.me1 .index-start-btn {
  --color: var(--me1-main-color);
}

body.vc1 .index-start-btn {
  --color: var(--vc1-main-color);
}

body.ve1 .index-start-btn {
  --color: var(--ve1-main-color);
}

body.ve2 .index-start-btn {
  --color: var(--ve2-main-color);
}

.index-start-btn::after {
  content: "";
  display: block;
  width: 22px;
  height: 36px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  background-image: url(../images/chevron-right_white.svg);
  background-position: center;
  background-size: 10px;
  background-repeat: no-repeat;
}

span.indent {
  padding: 0;
}

.space-emdash::after {
  content: " \2014";
}