/**
 * -----------------------------------------------------------------------------
 * New Colors - Source: Figma (these names will not change in Figma as they come
 * from the Figma library, we should standardize around them).
 * -----------------------------------------------------------------------------
 */
/* Custom breakpoints for mobile carousel */
/* Navy icons */
.component.component-toggle-list {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (min-width: 992px) {
  .component.component-toggle-list {
    padding: 36px 50px;
  }
}
.component.component-toggle-list > h2 {
  color: #ffffff;
}
.component.component-toggle-list > h2 * {
  color: #ffffff;
}
.component.component-toggle-list .field--name-field-subcomp-toggle-right {
  display: none;
}

.toggle-list__header {
  border-bottom: 1px solid #c6ccd0;
}

@media (min-width: 768px) {
  .toggle-list__header__title > * {
    max-width: 400px;
  }
}

.toggle-list__header__toggle {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .toggle-list__header__toggle {
    top: -38px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

.field--name-field-comp-toggle-list-options {
  width: 100%;
}
@media (min-width: 768px) {
  .field--name-field-comp-toggle-list-options {
    width: auto;
  }
}
.field--name-field-comp-toggle-list-options .toggle-switch {
  width: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: block;
}
@media (min-width: 768px) {
  .field--name-field-comp-toggle-list-options .toggle-switch {
    display: inline-block;
    width: auto;
  }
}
@media (min-width: 768px) {
  .field--name-field-comp-toggle-list-options .toggle-switch {
    display: inline-block;
    width: auto;
  }
}
.field--name-field-comp-toggle-list-options .toggle-switch.right-shown .right-side-toggle {
  font-family: "Roboto-Bold", Helvetica, Arial, sans-serif;
  color: #ffffff;
}
.field--name-field-comp-toggle-list-options .toggle-switch.right-shown .left-side-toggle {
  font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
  color: #9b9b9b;
}
.field--name-field-comp-toggle-list-options .toggle-switch .left-side-toggle, .field--name-field-comp-toggle-list-options .toggle-switch .right-side-toggle {
  width: 120px;
}
@media (min-width: 450px) {
  .field--name-field-comp-toggle-list-options .toggle-switch .left-side-toggle, .field--name-field-comp-toggle-list-options .toggle-switch .right-side-toggle {
    width: auto;
  }
}
.field--name-field-comp-toggle-list-options .toggle-switch .left-side-toggle {
  font-family: "Roboto-Bold", Helvetica, Arial, sans-serif;
  color: #ffffff;
}
.field--name-field-comp-toggle-list-options .toggle-switch .right-side-toggle {
  font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
  color: #9b9b9b;
}
.field--name-field-comp-toggle-list-options .toggle-switch .slider {
  width: 60px;
  margin: -0.2em 1em 0 1em;
}
@media (min-width: 768px) {
  .field--name-field-comp-toggle-list-options .toggle-switch .slider {
    margin: 0 1em;
    top: 3px;
    width: 150px;
  }
}
.field--name-field-comp-toggle-list-options .toggle-switch .slider:before {
  width: 30px;
}
@media (min-width: 768px) {
  .field--name-field-comp-toggle-list-options .toggle-switch .slider:before {
    width: 75px;
  }
}
.field--name-field-comp-toggle-list-options .toggle-switch input:checked + .slider::before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}
@media (min-width: 768px) {
  .field--name-field-comp-toggle-list-options .toggle-switch input:checked + .slider::before {
    -webkit-transform: translateX(75px);
    -ms-transform: translateX(75px);
    transform: translateX(75px);
  }
}