/* Minimal CSS - Using Bootstrap classes */

/* Dynamic styles applied via JavaScript */
.result-display.positive {
    border-color: #28a745 !important;
}

.result-display.negative {
    border-color: #dc3545 !important;
}

.tone-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #333;
    transition: all 0.3s;
}

.tone-dot.active {
    background: #b40600 !important;
}

.status-dot.active {
    background: #00ff00 !important;
}

.tone-dot.playing {
    background: #ff0000;
    box-shadow: 0 0 15px #ff0000;
    animation: none;
}

.detection-dot.pos {
    background: #28a745;
    color: #fff;
}

.detection-dot.neg {
    background: #dc3545;
    color: #fff;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #dc3545; /* Cor do botão */
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-top: -6px; /* Ajuste para centralizar na barra */
}

#countdownProgress {
    transition: none!important;
}

/* Animation for pop-in effect */
@keyframes popIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.detection-dot {
    animation: popIn 0.3s;
}