.traffic-light {
    display: flex;
    align-items: center;
    gap: 20px;
}

.traffic-light-1 {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}

.traffic-light-value {
    width: 100px;
    display: inline-block;
    background: #b0b0b1;
    padding: 0 12px;
    border-radius: 32px;
    margin: 1px;
    text-align: center;
}

.traffic-light-content {
    padding: 10px;
    width: 80%;
    border-radius: 10px;
}

.red {
    background: red;
    /* background-image: radial-gradient(brown, transparent); */
    /* background-size: 5px 5px; */
    width: 50px;
    height: 50px;
    border-radius: 50%;

    /* top: 20px;
  left: 25px; */
    animation: 13s red infinite;
    border: dotted 2px red;
    box-shadow: 0 0 20px red, 0 0 10px red;
}

.yellow {
    background: yellow;
    /* background-image: radial-gradient(orange, transparent); */
    /* background-size: 5px 5px; */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: dotted 2px yellow;

    /* top: 115px;
  left: 25px; */
    animation: 13s yellow infinite;
    box-shadow: 0 0 20px #fbff00, 0 0 10px yellow;
}

.green {
    background: lime;
    /* background-image: radial-gradient(lime, transparent);
  background-size: 5px 5px; */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: dotted 2px lime;

    /* top: 215px;
  left: 25px; */
    box-shadow: 0 0 20px lime, 0 0 10px lime;
    animation: 13s green infinite;
}