.overlay {
    position: relative;
    width: 99%;
    padding: 5px;
    color: white;
    font-family: Arial, sans-serif;
}

.table-livetime {
    width: 100%; /* Define a largura máxima da tabela */
    max-width: 95vw; /* Limita a largura máxima ao tamanho da .top-block */
    border-radius: 0px;
    background: rgba(100, 100, 100, 0.7);
    border-collapse: separate;
    border-spacing: 2px 2px; /* Espaço entre as linhas */
    border: none;
}

.th-livetime, td {
    padding: 2px;
    text-align: center;
    vertical-align: middle;
}

.th-livetime {
    background-color: #444;
}

.tr-livetime:nth-child(even) {
    background-color: #444;
}

.flag-icon {
    margin-right: 10px;
    font-size: 1.5em;
    vertical-align: middle;
    width: 1.2em;
    height: auto;
}

.name {
    display: flex;
    align-items: center;
}

.category-title {
    padding: 10px;
    background-color: #555;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    margin-top: 10px;
}

/* Estilos para categorias */
.category.Cadete {
    background-color: #ffcc00; /* Cor para F1 */
    color: black;
}

.category.Indoor {
    background-color: #0066cc; /* Cor para F2 */
    color: white;
}

/* Estilos para posição */
.position {
    font-weight: bold;
    color: #333;
    padding: 4px 8px;
    border-radius: 0 0 8px 0;
    text-align: center;
    background: white;
}

/* Estilos para número do competidor */
.number {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 0 0 8px 0;
    text-align: center;
    background: linear-gradient(90deg, #333 50%, #444 50%);
    color: white;
}

    .number.Cadete {
        background: linear-gradient(90deg, #ffcc00 50%, #ffa500 50%);
        color: black;
    }

    .number.Indoor {
        background: linear-gradient(90deg, #0066cc 50%, #003399 50%);
        color: white;
    }

@media (max-width: 768px) {
   .th-livetime, td {
        padding: 2px;
        font-size: 0.8em;
    }

    .flag-icon {
        font-size: 1.2em;
        width: 1.2em;
    }
}

@media (max-width: 520px) {
    .name span.full-name {
        display: none;
    }

    .name span.initials {
        display: inline;
    }
}

@media (min-width: 521px) {
    .name span.initials {
        display: none;
    }

    .name span.full-name {
        display: inline;
    }
}

.lower-third {
    position: relative;
    width: 99vw; /* Responsivo: largura do container baseada na viewport */
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 0;
}

.top-block {
    background: rgba(15, 15, 15, 0.8);
    padding: 0.2vw 3vw; /* Padding em unidades relativas */
    color: white;
    margin-top: 2.5vw;
    font-size: 2vw; /* Tamanho da fonte responsivo */
    text-align: center;
    position: relative;
    clip-path: polygon(2% 0%, 98% 0%, 96% 100%, 0% 100%);
    z-index: 0;
}

    .top-block::after {
        content: '';
        position: absolute;
        height: 5vw; /* Altura proporcional */
        top: 0;
        width: 3vw; /* Responsivo: largura das barras laterais */
        z-index: 0;
        right: 2vw;
        background: linear-gradient(to top, #0066cc, #003399);
        transform: skewX(-20deg);
    }

.bottom-block {
    background: linear-gradient(to right, #0066cc, #003399);
    color: white;
    padding: 0vw 2vw;
    text-align: center;
    width: 20vw;
    height: 2.5vw;
    position: absolute;
    top: -2.5vw;
    left: 2.0vw;
    z-index: 0;
    clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
    font-size: 2vw;
    line-height: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

/* Bloco amarelo reduzido e inclinado */
.yellow-block {
    position: absolute;
    top: -2.5vw;
    left: 1.5vw; 
    width: 2vw;
    height: 7.5vw; 
    background: linear-gradient(to top, #0066cc, #003399);
    transform: skewX(-22deg);
    z-index: 0;
}