* {
    font-family: "Poppins", sans-serif;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../img/logo-naranja.png"); /* Aseg���rate de que esta imagen exista en tu carpeta o apunta a una URL */
    background-size: 150px 150px; /* Tama���o de la imagen en el mosaico */
    background-repeat: repeat; /* Repetici���n del mosaico */
    opacity: 0.20; /* Nivel de opacidad */
    z-index: -1;
}

h1 {
    text-align: center;
    margin: 10px 0;
    font-size: 28px;
}

h3 {
    margin: 10px 0;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}

thead th {
    background: white;
    color: #333 !important;
    font-weight: bold;
    text-align: center;
    padding: 8px;
    border: none;
    border-bottom: 1px solid #e3e3e3;
}

th.club {
    text-align: left;
}

tbody td {
    text-align: center;
    padding: 8px;
    border: none;
    border-bottom: 1px solid #e3e3e3;
}

.rojo {
    display: inline-block;
    width: 10px;
    /*Oeltama���oquedesees*/
    height: 10px;
    margin: 3px;
    background-color: #3aa757;
    border-radius: 50%;
    /*Hacequeelspansearedondo*/
    animation: parpadeo 3s infinite;
    /* Hace que el span parpadee */
    -webkit-animation: parpadeo 2.5s infinite;
}

@keyframes parpadeo {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
tr td:nth-of-type(5) input {
    width: 52px !important;
}
.cyFc6e {
    background-color: #f8f9fa;
    padding: 6px 8px 10px;
    border-radius: 4px;
    border: 1px solid #dadce0;
    margin: 10px 0px;
    font-size: 12px;
    line-height: 16px;
}

.gyj1Q9jDD8K__rs-en,
.Qkxs7b {
    align-items: center;
    display: flex;
    margin-bottom: 2px;
    margin-top: 2px;
}

.gyj1Q9jDD8K__rs-sq {
    border-radius: 1px;
    display: inline-block;
    height: 8px;
    vertical-align: middle;
    width: 8px;
}

.imso-hide-overflow {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.TiMwHe,
.gyj1Q9jDD8K__rs-de {
    display: inline-block;
    flex: 1;
    margin-left: 8px;
    vertical-align: middle;
}

@media (min-width: 500px) {
    .dMRHzb {
        display: flex;
        flex-wrap: wrap;
    }

    .xjIE8d {
        flex: 1;
    }
}

.eeyKOd {
    font-weight: bold;
    margin-bottom: 5px;
}

tbody tr:nth-child(even) {
    /* background-color: #f2f2f2; */
}

tbody tr:hover {
    background-color: #ddd;
}

.gano,
.empate,
.perdio {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    margin-right: 5px;
    color: #fff;
    font-size: 11px;
}

.gano {
    background-color: #3aa757;
}

.perdio {
    background-color: #ea4335;
}

.empate {
    background-color: #9aa0a6;
}

#tabla-container tr td:nth-of-type(1) {
    width: 4% !important;
    background: white;
}

#tabla-container tbody > tr:nth-of-type(1),
#tabla-container tbody > tr:nth-of-type(2) {
    border-left: 4px solid #4285f4;
}

#tabla-container tbody > tr:nth-of-type(3) {
    border-left: 4px solid #fa7b17;
}

#tabla-container tr td {
    width: 6.25%;
}

.resultados {
    display: flex;
}

#tabla-container tr td:nth-of-type(2) {
    width: 40%;
    background: white;
}

tr td:nth-of-type(4) {
    width: 30%;
    background: white;
}

td img {
    width: 24px;
    margin: 3px;
}

tr td:nth-of-type(2),
tr td:nth-of-type(3) {
    width: 10%;
    background: white;
}

tr td:nth-of-type(5) {
    width: 20%;
    background: white;
}

@media screen and (max-width: 767px) {
    .dMRHzb {
        display: flex;
        justify-content: space-evenly;
    }
    table > tbody > tr {
        font-size: 12px;
    }
    table > thead > tr {
        font-size: 12px;
    }
    #tabla-container > table > tbody > tr > td:nth-child(2) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    h3 {
        font-size: 17px;
        font-weight: 600;
        margin: 10px 0;
    }
    .fechapartido {
        display: none;
    }
    .tabla-responsive {
        overflow-x: auto;
    }

    th.club,
    th.no,
    tr td:nth-of-type(1),
    tr td:nth-of-type(2) {
        position: sticky;
        left: 0;
        z-index: 1;
        background: white;
    }
    td:first-child {
        /* background: white; */
    }

    .ganador,
    .perdedor,
    .empates {
        width: 30%;
        /* background: white; */
    }
    table.jornada tbody tr td:nth-of-type(2),
    table.jornada tbody tr td:nth-of-type(3) {
        width: 10%;
        background: white;
    }
}

.jornada {
    margin-top: 30px;
}

tr td:nth-of-type(7) {
    font-weight: 600;
}

td:nth-of-type(1) {
    background: white;
}

td:nth-of-type(11) {
    background: white;
}

#tabla-container > table > tbody > tr > td {
    background: white;
    padding: 3px 0;
    border-bottom: 1px solid #e3e3e3;
}

#tabla-container > table > tbody > tr > td:nth-of-type(2) {
    font-weight: 600;
    text-align: left;
}

.ganador img,
.perdedor img,
.empates img {
    width: 13px;
}

.ganador {
    color: #3aa757;
    font-weight: 600;
    text-align: left;
}
.perdedor {
    color: red;
    font-weight: 600;
    text-align: left;
}
.empates {
    color: #6a6a6a;
    font-weight: 600;
    text-align: left;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    table > tbody > tr {
        font-size: 13px;
    }
    table > thead > tr {
        font-size: 13px;
    }
}

@media screen and (min-width: 700px) and (max-width: 767px) {
    .container,
    .container-sm {
        max-width: 740px;
    }
    #tabla-container tr td {
        padding: 2px;
    }
    tr td:nth-of-type(4) {
        width: 40%;
        background: white;
    }
    #tabla-container > table > tbody > tr > td {
        padding: 1px;
    }
}

@keyframes animarLinea {
    0% {
        transform: scaleY(1);
    }
    /* 50% {
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
		-moz-transform: scaleY(0.4);
		-ms-transform: scaleY(0.4);
		-o-transform: scaleY(0.4);
} */
    100% {
        transform: scaleY(0);
        -webkit-transform: scaleY(0);
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
    }
}

.jugando {
    position: relative;
}

.jugando td::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: #3aa757;
    transform-origin: top;
    animation: animarLinea 1.5s ease-in-out 0s infinite alternate-reverse
        forwards;
    -webkit-animation: animarLinea 1.5s ease-in-out 0s infinite
        alternate-reverse forwards;
}
.jugando td:nth-of-type(2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 100%;
    background-color: #3aa757;
}