:root {
  --box-color-1: #50e3c2;
  --box-color-2: #dbf11e;
  --box-color-3: #fc3fb2;
  --box-color-4: #ff4972;
  --box-color-5: #0164f2;
  --box-color-6: #bdd7ff;
}

.streaming-module-section.tm-heading-intro--dark {
  --color: #fff;
  --progressive-bar--label-color: #fff;
  --progressive-bar--background-color: transparent;
  --input-value-control--color: #fff;
  --input-value-control--border: 1px solid var(--color);
  --input-value-control--shadow: 0;
  --input-label-wrapper--icon-1: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-navigazione-internet-dark.svg");
  --input-label-wrapper--icon-2: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-musica-smart-dark.svg");
  --input-label-wrapper--icon-3: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-movie-dark.svg");
  --input-label-wrapper--icon-4: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-controller-dark.svg");
  --input-label-wrapper--icon-5: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-multistreaming-360-dark.svg");
  --input-label-wrapper--icon-6: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-massive-iot-dark.svg");
  --note-text-color: #fff;
}

.streaming-module-section.tm-heading-intro--light {
  --color: #1a1a1a;
  --progressive-bar--label-color: #0164f2;
  --progressive-bar--background-color: rgba(239, 239, 239, 0.5);
  --input-value-control--color: #0164f2;
  --input-value-control--border: 0;
  --input-value-control--shadow: rgb(0 0 0 / 14%) 0px 2px 15px 0px;
  --input-label-wrapper--icon-1: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-navigazione-internet-light.svg");
  --input-label-wrapper--icon-2: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-musica-smart-light.svg");
  --input-label-wrapper--icon-3: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-movie-light.svg");
  --input-label-wrapper--icon-4: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-controller-light.svg");
  --input-label-wrapper--icon-5: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-multistreaming-360-light.svg");
  --input-label-wrapper--icon-6: url("https://risorse.tim.it/content/dam/flytoco-areapubblica-aemfe/tim_it/fibra-e-mobile/fibra-e-adsl/fattori-velocita/ic-massive-iot-light.svg");
  --note-text-color: rgba(102, 102, 102, 1);
}

.box:nth-child(1),
.legend--wrapper .legend.social::before {
  background-color: var(--box-color-1);
}

.box:nth-child(2),
.legend--wrapper .legend.music::before {
  background-color: var(--box-color-2);
}

.box:nth-child(3),
.legend--wrapper .legend.film::before {
  background-color: var(--box-color-3);
}

.box:nth-child(4),
.legend--wrapper .legend.gaming::before {
  background-color: var(--box-color-4);
}

.box:nth-child(5),
.legend--wrapper .legend.call::before {
  background-color: var(--box-color-5);
}

.box:nth-child(6),
.legend--wrapper .legend.home::before {
  background-color: var(--box-color-6);
}

.legend--wrapper .legend.empty-space::before {
  border: 1px solid var(--color);
}

.input-number--container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  row-gap: 14px;
  margin-bottom: 14px;
}

.input-number--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px dotted var(--color);
}

.input-number--wrapper .input-label--wrapper {
  display: flex;
  align-items: center;
  column-gap: 14px;
}

.input-number--wrapper:nth-child(1) .input-label--wrapper img {
  content: var(--input-label-wrapper--icon-1);
}

.input-number--wrapper:nth-child(2) .input-label--wrapper img {
  content: var(--input-label-wrapper--icon-2);
}

.input-number--wrapper:nth-child(3) .input-label--wrapper img {
  content: var(--input-label-wrapper--icon-3);
}

.input-number--wrapper:nth-child(4) .input-label--wrapper img {
  content: var(--input-label-wrapper--icon-4);
}

.input-number--wrapper:nth-child(5) .input-label--wrapper img {
  content: var(--input-label-wrapper--icon-5);
}

.input-number--wrapper:nth-child(6) .input-label--wrapper img {
  content: var(--input-label-wrapper--icon-6);
}

.input-number--wrapper .input-label--wrapper label {
  font-size: 1.4rem;
  font-weight: 500;
}

.input-value--wrapper .value-control {
  width: 24px;
  height: 24px;
  color: var(--input-value-control--color);
  background: transparent;
  border: var(--input-value-control--border);
  box-shadow: var(--input-value-control--shadow);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.8rem;
}

.input-value--wrapper .value-control:hover,
.input-value--wrapper .value-control:active {
  background: rgba(239, 239, 239, 0.5);
}

.input-value--wrapper .value-control:focus,
.input-value--wrapper .value-input:focus {
  outline: none;
}

.input-value--wrapper .value-input {
  width: 24px;
  height: 24px;
  color: var(--color);
  background: transparent;
  border: 0;
  text-align: center;
  font-size: 1.8rem;
}

.input-value--wrapper .value-input:hover {
  border-color: rgba(239, 239, 239, 0.5);
}

.label-wrapper {
  position: relative;
}

.label-wrapper span.label {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--progressive-bar--label-color);
}

.label-wrapper span.error {
  display: none;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--progressive-bar--label-color);
}

.label-wrapper span.error.show {
  display: block;
}

.progressive-bar {
  position: relative;
  width: 100%;
  height: 50px;
  border: 2px solid var(--color);
  border-radius: 10px;
  background: var(--progressive-bar--background-color);
  margin-top: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 2px;
  position: relative;
}

.progressive-bar.blocked::after {
  content: "";
  display: block;
  background-color: rgba(51, 51, 51, 0.5);
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  height: 100%;
  width: 0%;
  text-align: center;
  transition: width 0.3s ease, left 0.3s ease;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 8px;
}

.box:not([style="width: 0%;"]) {
  margin-right: 3px;
}

.legend--wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 14px;
  margin-bottom: 6px;
}

.legend--wrapper span {
  margin: 0 !important;
}

.legend--wrapper span.legend {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color);
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.legend--wrapper span.legend::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  margin-right: 8px;
}

.streaming-module-section .ta-note.ta-note--2-col .ta-note__table-col {
  color: var(--note-text-color);
}

.streaming-module-section .ta-note.ta-note--2-col .ta-note__table-col a {
  color: unset;
  text-decoration: underline;
}

@media (min-width: 48em) {
  .label-wrapper span.error {
    position: absolute;
    top: 0;
    right: 0;
  }
}

@media (min-width: 80em) {
  .streaming-module-section.tm-heading-intro {
    padding: 3.2rem calc(1 / 12 * 100vw) 1.6rem;
  }
  .streaming-module-section.tm-heading-intro .tm-heading-intro__body {
    max-width: 100vw;
  }
  .input-number--container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 24px;
  }
  .input-number--wrapper {
    min-width: 360px;
  }
}