/*  FOCO SEMAFORICO PERSONALIZADO - VEICULAR*/
.traffic-table {
    width: 100%;
    border-collapse: collapse; /* Remove o espaçamento entre células */
    table-layout: fixed; /* Faz com que as células tenham largura uniforme */
    margin: 0 auto; /* Centraliza a tabela */
}

    .traffic-table td {
        padding: 10px; /* Espaço ao redor de cada semáforo */
        text-align: center; /* Centraliza o conteúdo da célula */
        vertical-align: middle; /* Centraliza verticalmente */
    }

.light {
    width: 17px;
    height: 15px;
    background-color: #818181;
    border-radius: 100%;
}

    .light.red.on {
        background-color: #ff565b;
    }

    .light.yellow.on {
        background-color: #ff9900;
    }

    .light.green.on {
        background-color: #51bc56;
    }

/* ===============================
   Piscar trocando cor de fundo
   =============================== */

/* Red */
@keyframes blink-red {
    0%, 49% {
        background-color: #ff565b;
    }
    /* cor “on” */
    50%, 100% {
        background-color: #818181;
    }
    /* cinza escuro “off” */
}

.light.red.blink {
    animation: blink-red 1s steps(1, start) infinite !important;
}

/* Yellow */
@keyframes blink-yellow {
    0%, 49% {
        background-color: #ff9900;
    }

    50%, 100% {
        background-color: #818181;
    }
}

.light.yellow.blink {
    animation: blink-yellow 1s steps(1, start) infinite !important;
}

/* Green */
@keyframes blink-green {
    0%, 49% {
        background-color: #51bc56;
    }

    50%, 100% {
        background-color: #818181;
    }
}

.light.green.blink {
    animation: blink-green 1s steps(1, start) infinite !important;
}


.phase-label {
    color: white; /* Cor do texto */
    margin-bottom: 0.1px; /* Espaço abaixo do texto */
    margin-top: 0.1px; /* Espaço acima do texto */
    font-size: 11px; /* Tamanho fixo da fonte */
    text-align: center; /* Centraliza o texto */
}