label.switch {
  --switch-size: 45px;
  --thumb-gap: 4px;
  --thumb-size: calc(var(--switch-size) * 0.55 - var(--thumb-gap));
  --thumb-active-offset: calc(var(--switch-size) / 2);
  --track-radius: calc(var(--switch-size) / 1.6666);

  --thumb-color: #fff;
  --track-color: #c82c46;
  --accent-color: #c82c46;

  --transition: 200ms ease;
  display: inline-block;
  position: relative;
}

label.switch .track {
  width: var(--switch-size);
  height: calc(var(--switch-size) / 1.6666);
  background: var(--track-color);
  border-radius: calc(var(--track-radius) / 2);
  display: flex;
  align-items: center;
  box-shadow: inset 0px 0px 4px -2px rgba(0, 0, 0, 0.129);
  transition: 250ms ease;
}

label.switch .thumb {
  display: inline-block;
  background: var(--thumb-color);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
  transform: translateX(var(--thumb-gap));
  transition: transform 250ms ease-in-out;
}

label.switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

label.switch input[type="checkbox"]:checked + .track {
  background: var(--accent-color);
}

label.switch input[type="checkbox"]:checked + .track .thumb {
  transform: translateX(var(--thumb-active-offset));
}

label.switch input[type="checkbox"]:focus + .track {
  box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
}

/* Variation: has-indicator */
label.switch.has-inidicator .thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

label.switch.has-inidicator .thumb::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 6px;
  background: #d71830;
}

label.switch.has-inidicator
  input[type="checkbox"]:checked
  + .track
  .thumb::before {
  background: var(--accent-color);
}

/* Variation: has-label */
label.switch.has-label {
  display: grid;
  grid-template-areas: "col-1 col-2 col-3";
  grid-gap: 10px;
  align-items: center;
}

label.switch.has-label .chart {
  color: rgba(0, 0, 0, 0.6);
  grid-area: col-1;
  transition: var(--transition);
}

label.switch.has-label .map {
  color: rgba(0, 0, 0, 0.3);
  grid-area: col-3;
  transition: var(--transition);
}

label.switch.has-label .track {
  grid-area: col-2;
}

label.switch.has-label input[type="checkbox"]:checked ~ .map {
  color: rgba(0, 0, 0, 0.6);
}

label.switch.has-label input[type="checkbox"]:checked ~ .chart {
  color: rgba(0, 0, 0, 0.3);
}

/* Graph styling */

/* Main container styles */
.algorithm-change-detector {
  margin: 2rem auto;
  max-width: 1280px;
  font-family: system-ui, sans-serif;
}

/* Loading / error message inside the chart area */
#kw_algo_update_chart p {
  text-align: center;
  font-size: 16px;
  color: #555;
  /* margin: 1rem 0; */
}

/* Data container spacing */
.data-container {
  margin-top: 2rem;
  min-height: 500px;
  /* background: #fafafa; */
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 8px;
}

/* Chart and map toggle visibility */
.display-none,
.hidden {
  display: none !important;
}

/* Custom input + select field enhancements */
.algo-input-group_inside {
  padding: 0.25rem 0.5rem;
  font-size: 14px;
}

/* Preset ranges and date range UI */
#date-preset-ranges li {
  display: inline-block;
  margin: 0.5rem;
}

#date-preset-ranges a {
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  background: #f0f0f0;
  color: #333;
  transition: background 0.2s ease;
}

#date-preset-ranges a:hover {
  background: #dfe2e5;
}

/* Tweet callout styles */
.algo-tweet-it {
  margin-top: 1rem;
  font-style: italic;
  /* text-align: center; */
  @apply text-brand;
}

.algo-tweet-it a {
  font-weight: bold;
  color: #c82c46;
  text-decoration: none;
}

.algo-tweet-it a:hover {
  text-decoration: underline;
}

.algo-tweet-quote {
  /* text-align: center; */
  font-size: 13px;
  color: #11100f;
  margin-top: 0.5rem;
}

.algo-tweet-quote a {
  color: #000;
  text-decoration: underline;
}

/* Responsive chart box */
@media screen and (max-width: 768px) {
  .algo-top-tool_bar {
    flex-direction: column;
  }

  .algo-top-tool_bar > div {
    width: 100% !important;
    margin-bottom: 1rem;
  }

  #kw_algo_update_chart,
  #kw_algo_update_map {
    height: auto !important;
    min-height: 300px;
  }
}

#aptwk-watermark {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  opacity: 0.1;
  max-width: 25%;
  height: auto;
  pointer-events: none;
  z-index: 10;
}

/* Loader */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px;
  width: 200px;
  height: 200px;
  background-color: transparent;
  border: none;
  -webkit-user-select: none;
}

.wrapper .box-wrap {
  width: 70%;
  height: 70%;
  margin: calc((100% - 70%) / 2) calc((100% - 70%) / 2);
  position: relative;
  transform: rotate(-45deg);
}

.wrapper .box-wrap .box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(
    to right,
    #d33653,
    /* French Raspberry */ #8c2d3a,
    /* French Raspberry - Dark */ #2a2725,
    /* Jet Black */ #0d0b0a,
    /* Jet Black - Dark */ #9b9e8f,
    /* Artichoke */ #5e6255,
    /* Artichoke - Dark */ #f8f6ed,
    /* Isabeline */ #f5f3e8,
    /* Isabeline - Capu */ #eceae1 /* Isabeline - Medium */
  );
  background-position: 0% 50%;
  background-size: 1000% 1000%;
  visibility: hidden;
}

.box.one {
  animation: moveGradient 15s infinite, oneMove 3.5s infinite;
}

.box.two {
  animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
}

.box.three {
  animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
}

.box.four {
  animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
}

.box.five {
  animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
}

.box.six {
  animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
}

@keyframes moveGradient {
  to {
    background-position: 100% 50%;
  }
}

@keyframes oneMove {
  0%,
  14.2857% {
    visibility: visible;
    clip-path: inset(0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }
  28.5714% {
    clip-path: inset(35% round 5%);
  }
  42.8571%,
  57.1428% {
    clip-path: inset(35% 70% 35% 0 round 5%);
  }
  71.4285%,
  85.7142% {
    clip-path: inset(0% 70% 70% 0 round 5%);
  }
  100% {
    clip-path: inset(0% 35% 70% round 5%);
  }
}

@keyframes twoMove {
  0%,
  14.2857% {
    visibility: visible;
    clip-path: inset(0% 70% 70% 0 round 5%);
  }
  28.5714%,
  42.8571% {
    clip-path: inset(0% 35% 70% round 5%);
  }
  57.1428%,
  71.4285% {
    clip-path: inset(35% round 5%);
  }
  85.7142% {
    clip-path: inset(35% 70% 35% 0 round 5%);
  }
  100% {
    clip-path: inset(0% 70% 70% 0 round 5%);
  }
}

@keyframes threeMove {
  0%,
  14.2857% {
    visibility: visible;
    clip-path: inset(35% 70% 35% 0 round 5%);
  }
  28.5714%,
  42.8571% {
    clip-path: inset(0% 70% 70% 0 round 5%);
  }
  57.1428%,
  71.4285% {
    clip-path: inset(0% 35% 70% round 5%);
  }
  85.7142% {
    clip-path: inset(35% round 5%);
  }
  100% {
    clip-path: inset(35% 70% 35% 0 round 5%);
  }
}

@keyframes fourMove {
  0%,
  14.2857% {
    visibility: visible;
    clip-path: inset(35% 0% 35% 70% round 5%);
  }
  28.5714% {
    clip-path: inset(35% round 5%);
  }
  42.8571%,
  57.1428% {
    clip-path: inset(70% 35% 0% 35% round 5%);
  }
  71.4285%,
  85.7142% {
    clip-path: inset(70% 0 0 70% round 5%);
  }
  100% {
    clip-path: inset(35% 0% 35% 70% round 5%);
  }
}

@keyframes fiveMove {
  0%,
  14.2857% {
    visibility: visible;
    clip-path: inset(70% 0 0 70% round 5%);
  }
  28.5714%,
  42.8571% {
    clip-path: inset(35% 0% 35% 70% round 5%);
  }
  57.1428% {
    clip-path: inset(35% round 5%);
  }
  71.4285%,
  85.7142% {
    clip-path: inset(70% 35% 0% 35% round 5%);
  }
  100% {
    clip-path: inset(70% 0 0 70% round 5%);
  }
}

@keyframes sixMove {
  0%,
  14.2857% {
    visibility: visible;
    clip-path: inset(70% 35% 0% 35% round 5%);
  }
  28.5714%,
  42.8571% {
    clip-path: inset(70% 0 0 70% round 5%);
  }
  57.1428%,
  71.4285% {
    clip-path: inset(35% 0% 35% 70% round 5%);
  }
  85.7142% {
    clip-path: inset(35% round 5%);
  }
  100% {
    clip-path: inset(70% 35% 0% 35% round 5%);
  }
}

.google-visualization-tooltip {
  pointer-events: none !important;
  z-index: 9999 !important;
}