.dashboard {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 40px;
      margin-top: 20px;
    }

    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      user-select: none;
    }

    .icon svg {
      width: 80px;
      height: 80px;
      transition: stroke 0.2s ease;
    }

    .left-arrow line,
    .left-arrow polygon,
    .right-arrow line,
    .right-arrow polygon {
      stroke: limegreen;
      stroke-width: 10;
      fill: none;
    }

    .hazard polygon {
      fill: none;
      stroke: red;
      stroke-width: 4;
    }

    .dimlight path,
    .dimlight line {
      stroke: rgb(28, 109, 28);
      stroke-width: 4;
      fill: none;
    }

    .highbeam path,
    .highbeam line {
      stroke: #0008fc;
      stroke-width: 4;
      fill: none;
    }

    .icon.left-arrow.active line,
    .icon.left-arrow.active polygon,
    .icon.right-arrow.active line,
    .icon.right-arrow.active polygon {
      stroke: #00ff00;
    }

    .icon.hazard.active polygon {
      stroke: #ff3333;
    }

    .icon.dimlight.active path,
    .icon.dimlight.active line {
      stroke: limegreen;
    }

    .icon.highbeam.active path,
    .icon.highbeam.active line {
      stroke: deepskyblue; 
    }

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

.icon.blinking {
  animation: blink 0.66s infinite;
}

.svg-spinner {
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  stroke: limegreen;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}


  .mic-icon {
    position: relative;
    display: inline-block;
  }

  .mic-icon .dot {
    position: absolute;
    top: 1.5em; 
    left: 1.5em;
    font-size: 0.5em;
    display: none;
    z-index: 10;  
  }