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

body {
    margin: 0;
    padding: 0;
    position: relative;
	zoom: 72%;
}

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;
}
div#tabla-eliminacion {
    display: flex;
    justify-content: center;
}
h1 {
    text-align: center;
    margin: 10px 0;
    font-size: 28px;
}
h5 {
    font-size: 16px;
}
h3 {
    margin: 10px 0;
}

table {
    width: 95%;
    /* max-width: 341px; */
    margin-bottom: 10px;
    border: 1px solid gray;
    border-radius: 10px;
}
div {
    text-align: center;
}
table {
    min-height: 112px;
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: gray;
}
#tabla-torneo h5 {
    text-align: left;
    margin: 20px 0;
}
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: 1.5px;
    border: none;
    background-color: white !important;
    /* border-bottom: 1px solid #e3e3e3; */
}

.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: 1px !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%;
}

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

td img {
    width: 24px;
    height: 24px;
    margin: 3px 5px;
    object-fit: contain;
}

tr td:nth-of-type(2),
tr td:nth-of-type(3) {
    /* width: 48px; */
    background: white;
}

tr td:nth-of-type(5) {
    /* width: 7%; */
    background: white;
}
@media screen and (max-width: 800px) and (orientation: landscape) {
	
	.container, .container-sm {
		max-width: 100% !important;
	}
	p {
		margin-top: 0;
		margin-bottom: 5px;
	}
	h3{
		font-size: 10px;
		margin: 0 !important;
	}
    
	td{
		font-size: 6px !important;
		padding: 0px !important;
	}
	td img {
		width: 8px !important;
		height: 8px !important;
		margin: 3px 5px !important;
		object-fit: contain !important;
	}
	h1{
		font-size: 15px !important;
		margin: 0 !important;
	}
	tr td:nth-of-type(1) {
		width: 1px !important;
		background: white !important;
	}
	tr td:nth-of-type(2), tr td:nth-of-type(3) {
		/* width: 40px !important; */
		background: white !important;
	}
	tr td:nth-of-type(4), tr td:nth-of-type(5) {
		width: 40px !important;
		background: white;
	}
	body {
		padding: 0px;
		width: 100%;
		zoom: 60%;
		/* max-width: 520px; */
        /* background-color: red; */
    }
	table {
		margin: 0 !important;
		/* width: 90%;
		max-width: 520px; */
	}
	
}
@media screen and (max-width: 767px) and (orientation: portrait)  {
	body {
		padding: 0px;
		width: 100%;
		zoom: 50%;
		/* max-width: 520px; */
        /* background-color: red; */
    }
    .dMRHzb {
        display: flex;
        justify-content: space-evenly;
    }
	table {
		margin: 0 !important;
		/* width: 90%;
		max-width: 520px; */
	}
	tr td:nth-of-type(2), tr td:nth-of-type(3) {
		/* padding: 0 10px !important; */
		background: white !important;
	}
	tr td:nth-of-type(4), tr td:nth-of-type(5) {
		background: white;
	}
    table > tbody > tr {
        font-size: 14px;
    }
    table > thead > tr {
        font-size: 14px;
    }
    #tabla-container > table > tbody > tr > td:nth-child(2) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    h3{
		font-size: 10px;
		margin: 0 !important;
	}
    
	td{
		font-size: 8px !important;
		padding: 0px !important;
	}
    .fechapartido {
        display: none;
    }
    .tabla-responsive {
        overflow-x: auto;
    }

    th.club,
    th.no,
    tr td:nth-of-type(1),
    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;
    }
	footer{
		text-align: center;
		padding: 20px 0px;
	}
	footer h1{
		font-size: 10px !important;
	}
}

.jornada {
    margin-top: 30px;
}
.container img{
	width: 75px !important;
}
footer{
	text-align: center;
    padding: 20px 0px;
}
footer h1{
	font-size: 20px;
}

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

td:nth-of-type(1) {
	width: 1px;
    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: 16px;
    height: 16px;
    object-fit: contain;
    margin-right: 3px;
}

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

@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;
}