:root {
  --transparent: rgba(0, 0, 0, 0);
  --timeline-background: #242c32;
}

.demo__rhs-panel {
  z-index: 1;
}

.orange-border {
  border: 2px solid var(--primary-color500);
}

.default-border {
  border: 2px solid var(--timeline-background);
}

.navigation-button {
  font-size: var(--font-size-body-large);
  min-width: var(--s3);
}

.demo__title {
  text-align: center;
}

.view-body {
  font-size: var(--font-size-about);
}

.view-title {
  font-size: var(--font-size-h4);
  text-align: center;
}

.demo_button {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  padding: var(--s-3) var(--s-2);
  width: 100%;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-out {
  from {
    background-color: var(--timeline-background);
    border: 2px solid var(--transparent);
  }
  to {
    background-color: var(--transparent);
    border: 2px solid var(--primary-color500);
  }
}

@keyframes fade-out {
  from {
    background-color: var(--timeline-background);
    border: 2px solid var(--transparent);
  }
  to {
    background-color: var(--transparent);
    border: 2px solid var(--primary-color500);
  }
}

.fade-in {
  -webkit-animation: fade-in 0.8s ease-in;
          animation: fade-in 0.8s ease-in;
}

.fade-out {
  -webkit-animation: fade-out 0.8s ease-in;
          animation: fade-out 0.8s ease-in;
}

.box {
  border: 2px solid var(--primary-color500);
  border-radius: 5px;
  position: absolute;
  pointer-events: none;
  background-color: var(--transparent);
  padding: 0;
  margin: 0;
}

.label {
  position: absolute;
  pointer-events: none;
  color: var(--primary-color500);
}

.label span {
  background-color: var(--timeline-background);
}