.container-ranking-list {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}
.container-ranking {
    /* background-image: url(https://colmena.topbrand.interactiva.net.co/media/assets/fondo_register_2.jpg); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: #1891a2;
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
}

table {
    /* border: 1px solid #ccc; */
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}
  
table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}
  
table tr {
    padding: .35em;
}
  
table th,
table td {
	padding: .625em;
	text-align: center;
}
  
table th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #f9c71b;
}

.position-color {
	color: #fcee89;
}

.border-ranking{
    border: 2px solid #fcc91f;
    border-radius: 2rem;
}

@media screen and (max-width: 600px) {
	table {
		border: 0;
	}

	table caption {
		font-size: 1.3em;
	}

	table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	table tr {
		/* border-bottom: 3px solid #ddd; */
		display: block;
		margin-bottom: .625em;
	}

	table td {
		border-bottom: 1px solid #f9c71b;
		display: block;
		font-size: .8em;
		text-align: right;

	}

	table td::before {
		/*
		* aria-label has no advantage, it won't be read inside a table
		content: attr(aria-label);
		*/
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	table td:last-child {
		border-bottom: 0;
	}
}