.container-datos {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.container-datos > * {
	padding: 10px;
	margin: 10px 0;
	border-radius: 10px;
}
#sidebar1 {
	display: inline-block;
	position: absolute;
	z-index: 99;
	top: 0;
	width: 100%;
}
#datos, .calculos {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background-color: rgba(255,255,255,.1);
	overflow-y: hidden;
}
#datos {
	max-height: 400px;
	overflow-x: auto;
}
.calculos {
	max-height: 370px;
}
.calculos > div {
	width: 100%;
	padding: 8px 5px;
	font-size: 1.5em;
	font-weight: bold;
}
.calculos > div:after {
	display: block;
	text-transform: uppercase;
	font-size: .75em;
	color: #8ea6c2;
}
#datos > div,
.calculos > div {
	color: white;	
}

#datos > div {
	display: flex;
	justify-content: center;
	align-items: baseline;
	width: 20%;
	padding: 8px 5px;
	font-size: 1em;
}
#datos > div:before {
	counter-increment: counter;
	content: counter(counter) ")";
	font-size: .6em;
	color: #8ea6c2;
	margin-right: 5px;
}

/* Termina ... */ 

	/* --- */

/* Empieza Afters */

.moda:after {
	content: "Moda";
}
.esperanza:after {
	content: "Media";
}
.mediana:after {
	content: "Mediana";
}
.varianza:after {
	content: "Varianza";
}
.desvio:after {
	content: "Desvío Estándar";
}
.minimo:after {
	content: "Mínimo";
}
.maximo:after {
	content: "Máximo";
}
.rango:after {
	content: "Rango";
}
.primer_cuartil:after {
	content: "Primer cuartil";
}
.segundo_cuartil:after {
	content: "Segundo cuartil";
}
.tercer_cuartil:after {
	content: "Tercer cuartil";
}
.rango_intercuartil:after {
	content: "Rango intercuartil";
}
.asimetria:after {
	content: "Asimetría";
}
.curtosis:after {
	content: "Curtosis";
}
.percentil:after {
	content: "Percentil";
	padding-left: 15px;
}
.rango_percentilar:after {
	content: "Rango percentilar";
	padding-left: 15px;
}

/* Terimina Afters */

	/* --- */

/* Empieza Percentil */

.percentil_content,
.rango_percentilar_content {
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: left;
	margin-bottom: 8px;
}
.percentil_content input,
.rango_percentilar_content input {
	padding: 8px 15px;
	border-radius: 0;
}
.percentil_content p,
.rango_percentilar_content p {
	padding: 8px 15px;
	margin: 0;
}
#percentil, #rango_percentilar {
	background-color: transparent;
	border: 1px solid #8ea6c2;
	color: white;
	width: 50%;
	padding: 0px 3px;
	min-width: 50px;
}
#percentil::placeholder,
#rango_percentilar::placeholder {
	color: #8ea6c2;
}
#resultado_percentil {
	margin: 0;
	color: white;
}

/* Termina Percentil */

	/* --- */