:root {
  --animation-speed: 1.5s;
  --primary-color: #fff;
  --secondary-color: #000;
  --background-color: #fff;
  --text-color: #fff;
  --font: sans-serif;

  /*    Spinner Variables */
  --spinner-size: 3;
  --line-color: #ef3b39;
  --line-alpha: 1;
  --ring-color: #f9b5b5;
  --ring-alpha: 0.5;
  --ring-size: 6;
}

body {
  color: #1B1D21;
  font-feature-settings: 'kern';
  font-synthesis: none;
  letter-spacing: -0.1px;
  -moz-font-feature-settings: 'kern';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.checkbox {
  -moz-appearance:none;
  -webkit-appearance:none;
  -o-appearance:none;
  appearance: none;
  outline: none;
  content: none;	
}

.checkbox:before {
    content: '';
    color: #90919F;
    display: grid;
    place-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid #B0B0BA;
    border-radius: 0.375rem;
}

.checkbox:checked:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5.19679e-05 5.7703C0.00127483 5.65937 0.0152504 5.55013 0.0458801 5.44322C0.11471 5.20325 0.256329 5.01795 0.467942 4.88687C0.63856 4.78118 0.821698 4.71224 1.02516 4.70665C1.25116 4.70048 1.45106 4.77653 1.63519 4.9005C1.88116 5.06605 2.12655 5.23254 2.37147 5.39972C2.94295 5.7897 3.51403 6.18031 4.08534 6.57064C4.10613 6.58485 4.31984 6.71499 4.34156 6.72769C4.34156 6.72769 4.39385 6.65327 4.47153 6.54216C4.5615 6.41353 4.64943 6.28344 4.73794 6.15376C5.85156 4.52264 6.96564 2.89181 8.07816 1.25987C8.23445 1.03061 8.43977 0.875076 8.70973 0.806654C9.27487 0.663404 9.85952 1.02916 9.97656 1.60012C10.0382 1.90106 9.9772 2.17748 9.80548 2.43021C9.64429 2.6675 9.4813 2.90351 9.31953 3.14045C8.33822 4.57796 7.35713 6.01558 6.37582 7.45308C6.0786 7.88847 5.7811 8.32376 5.48359 8.75898C5.39258 8.89209 5.28235 9.00658 5.13869 9.08175C4.78819 9.26518 4.43374 9.27759 4.08284 9.0849C3.96771 9.02172 3.86033 8.94398 3.75156 8.86973C2.68691 8.14347 1.62267 7.41657 0.558375 6.68978C0.452569 6.61751 0.350373 6.54076 0.262676 6.44637C0.0855357 6.25584 -0.00245199 6.03066 5.19679e-05 5.7703Z" fill="white"/></svg>');
}

.checkbox-holder:hover .checkbox {
  background-color: #F7F7F8;
}

.checkbox:focus {
  background-color: #F7F7F8;
}

.checkbox:checked:before {
  background-color: #EF3B39;

  border: 1px solid #EF3B39;
}

.spinner {
  font-size: calc(var(--spinner-size) * 1em);
  width: 1em;
  height: 1em;
  border-radius: 50%;
}
.spinner .line {
  fill: none;
  stroke: var(--line-color);
  stroke-width: var(--ring-size);
  opacity: var(--line-alpha);
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transform: rotate3d(0, 0, 1, 0deg);
  animation: 2156ms spinner-arc ease-in-out infinite,
    1829ms spinner-rotate linear infinite;
}
.spinner .ring {
  fill: none;
  stroke: var(--ring-color);
  stroke-width: var(--ring-size);
  opacity: var(--ring-alpha);
}
@keyframes spinner-rotate {
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
@keyframes spinner-arc {
  from {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: 100 150;
    stroke-dashoffset: -140;
  }
}

.productLink > svg {
  display: none;
}

.productLink.active > svg {
  display: block;
}

.productLink.active {
  background-color: #EFEFF1;
}

.productLink.active .product-icon {
  color: #EF3B39;
}

.productLink.active p {
  color: #1B1D21;
}
.productLink .product-icon {
  color: #60606D;
}

.productLink.productLink--hub:hover .product-icon,
.productLink.productLink--campaigns.active .product-icon,
.productLink.productLink--campaigns:hover .product-icon,
.productLink.productLink--convos.active .product-icon,
.productLink.productLink--convos:hover .product-icon,
.productLink.productLink--websites.active .product-icon,
.productLink.productLink--websites:hover .product-icon {
  color: #1B1D21;
}
.productLink.productLink--campaigns .productLink--campaigns-background {
  fill: white;
}

.productLink.productLink--campaigns.active .productLink--campaigns-background {
  fill: red;
}


.productLink.productLink--convos .productLink--convos-background,
.productLink.productLink--websites .productLink--websites-background {
  display: none;
}

.productLink.productLink--convos.active .productLink--convos-background,
.productLink.productLink--websites.active .productLink--websites-background {
  display: block;
}