:root {
  --brand-color: #5C68D9;
}

.modebar-btn {
  color: #C1C6F1 !important;
}

.modebar-btn:hover,
.modebar-btn.active {
  color: var(--brand-color) !important;
}

.modebar-btn .icon path,
.modebar-btn .icon polygon,
.modebar-btn .icon rect,
.modebar-btn .icon circle {
  fill: currentColor !important;
}

.modebar-btn[data-title="Box Select"],
.modebar-btn[data-title="Lasso Select"],
.modebar-btn.plotlyjsicon {
  display: none !important;
}

.plotly-notifier {
  display: none !important;
}

#profile-index-graph .angularaxistick text {
  font-size: 0.68rem !important;
}

.ratip-correlation-control {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

#replication-ratip-correlation-control {
  width: max-content;
  min-width: 100%;
}

@media (max-width: 1699.98px) {
  .modebar {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  .annotation-text {
    font-size: clamp(0.4rem, calc(0.4rem + 0.9vw), 1rem) !important;
  }

  .ratip-correlation-control-label {
    font-size: clamp(0.625rem, 1.2vw, 0.75rem);
  }
}

@media (max-width: 575.98px) {
  .phoneme-distribution-slider-label {
    font-size: 0.65rem !important;
    transform: translateX(-50%) rotate(-35deg) !important;
    transform-origin: center center;
    margin-top: -34px !important;
  }
}