.tippy-tooltip {
    max-width: 450px !important;
    color: #000 !important;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    background-color: #333;
    transition-property: visibility,opacity,transform;
    outline: 0;
    background: #fff !important;
    border: 2px solid;
}

.semafori-cont{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;

    .semaforo-wrapper{
        padding: 0.2rem 0.4rem;
        display: flex;
        align-items: center;
        justify-content: left;
        border-radius: 0.4rem;

        .semaforo-stato{
            margin-right: 1rem;
            border: 1px solid hsl(0, 0%, 88%);
            border-radius: 50%;

            div{
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
                background-color: #F1F4F9;
            }

            .red, .rosso    {
                background-color: #FF4141;
            }
            .orange, .giallo {
                background-color: #FFC14E;
            }
            .green, .verde  {
                background-color: #60DE4B;
            }
            .red-on-yellow, .rosso-su-giallo
            {
                background-color: #f9ff50;
                color: red;
            }
            .blue-on-yellow, .blu-su-giallo
            {
                background-color: #f9ff50;
                color: blue;
            }
            .black-on-yellow, .nero-su-giallo
            {
                background-color: #f9ff50;
                color: black;
            }
            .red-on-blue, .rosso-su-blu
            {
                background-color: #009CF9;
                color: red;
            }
            .purple-on-blue
            {
                background-color: #009CF9;
                color: purple;
            }
            .purple-on-violet
            {
                background-color: violet;
                color: purple;
            }
            .blue-on-green, .blu-su-verde
            {
                background-color: #60DE4B;
                color: blue;
            }
            .black-on-blue, .nero-su-blue
            {
                background-color: #66afe9;
                color: black;
            }

            .blinking2{
                animation:blinkingText 0.8s infinite;
            }
            .blinking{
                animation:blinkingText 1.2s infinite;
            }
            .blinking-red{
                animation:blinkingTextRed 1.2s infinite;
            }
            .blinking-green{
                animation:blinkingTextGreen 1.2s infinite;
            }
            .blinking-blue{
                animation:blinkingTextBlue 1.2s infinite;
            }

            /*@keyframes blinkingText{
                0%{
                    color: #000;
                }
                49%{
                    color: #000;
                }
                60%{
                    color: transparent;
                }
                99%{
                    color:transparent;
                }
                100%{
                    color: #000;
                }
            }
            @keyframes blinkingTextRed{
                0%{
                    color: #f00;
                }
                49%{
                    color: #f00;
                }
                60%{
                    color: transparent;
                }
                99%{
                    color:transparent;
                }
                100%{
                    color: #f00;
                }
            }
            @keyframes blinkingTextGreen{
                0%{
                    color: #08b342;
                }
                49%{
                    color: #08b342;
                }
                60%{
                    color: transparent;
                }
                99%{
                    color:transparent;
                }
                100%{
                    color: #08b342;
                }
            }
            @keyframes blinkingTextBlue{
                0%{
                    color: #00f;
                }
                49%{
                    color: #00f;
                }
                60%{
                    color: transparent;
                }
                99%{
                    color:transparent;
                }
                100%{
                    color: #00f;
                }
            }*/
        }

        .semaforo-text{
            font-size: 13px;
        }
    }
}

@media only screen and (min-width: 992px){
    .semafori-cont{
        grid-template-columns: 1fr 1fr;
    }
}