.content-input input,
.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
 
.content-input input{
	visibility: hidden;
	position: absolute;
	right: 0;
}		

.content-input{
	position: relative;
	margin-bottom: 10px;
	padding:5px 0 5px 55px; /* Damos un padding de 60px para posicionar el elemento <i> en este espacio*/
	display: block;
}
.content-input:hover {
	cursor: pointer;
}

/* Estas reglas se aplicarán a todos las elementos i después de cualquier input*/
.content-input input + i{
	background: transparent;
	border: 2px solid grey;
	position: absolute; 
	left: 0;
	top: 0;
}
.content-input.azul input + i{
	border: 2px solid #0408f0;
}
.content-input.rojo input + i{
	border: 2px solid #ff1717;
}

/* Estas reglas se aplicarán a todos los i despues de un input de tipo radio*/
.content-input input[type=radio] + i{
	height: 22.5px;
	width: 23px;
	border-radius: 100%;
	left: 15px;
}

.content-input input[type=radio] + i:before{
	content: '';
	display: block;
	height: 13px;
	width: 13px;
	background: red;
	border-radius: 100%;
	position: absolute;
	z-index: 1;
	top: 3px;
	left: 3px;
	background: grey;
	transition: all 0.25s ease; /* Todas las propiedades | tiempo | tipo movimiento */
	transform: scale(0) /* Lo reducimos a 0*/ ;
	opacity: 0; /* Lo ocultamos*/
}
.content-input.azul input[type=radio] + i:before{
	background: #0408f0;
}
.content-input.rojo input[type=radio] + i:before{
	background: #ff1717;
}

.content-input input[type=radio]:checked + i:before{
	transform: scale(1);
	opacity: 1;
}

.content-input.rojo:hover input[type=radio]:not(:checked) + i{
	background-color: rgba(255,23,23,.1);
}
.content-input.azul:hover input[type=radio]:not(:checked) + i {
	background-color: rgba(4,8,240,.1);
}