/* Custom Input */
.custom-input {
	display:flex;
	flex-wrap: nowrap; 
	/* justify-content: center; */ 
	height:20px;
	font-size: 12px;
}

/* Etiqueta de texto */ 
.custom-input .custom-input-label {
	display:flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap:nowrap;
	font-weight: normal;
	padding-left: 16px;
	width: calc(100% - 30px);
	height: 24px;
	cursor: pointer; 
}

/* Elemento input */ 
.custom-input input {
	display: none !important; 
	opacity:0;
	width:0; 
}

/* Elemento de estado */ 
.custom-input .check-radio {
	/*
	display: flex;
	flex-direction: column;
	justify-content: center;
	*/
	cursor:pointer;
	width:20px;
	height:20px;
	border: 1px solid #d1d6db;
	background-color: rgba(213, 218, 223, 0.102);
	box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
	border-radius: 50%;
}

.custom-input .check-checkbox {
	/*
	display:flex;
	flex-direction:column;
	justify-content: center;
	*/
	cursor:pointer;
	user-select:none;
	width:24px;
	height:24px;
	border: 0px;
	border-radius: 0px;
	background-color: #ffffff;
	position: relative;
}

/* Elemento deshabilitado */ 
.custom-input input:disabled ~ .check-radio,
.custom-input input:disabled ~ .check-checkbox,
.custom-input input:disabled ~ .custom-input-label {
	cursor: default; 
}

.custom-input input:disabled ~ .check-radio,
.custom-input input:disabled ~ .check-checkbox {
	background-color: #e9ecef;
}

.custom-input input:disabled ~ .custom-input-label {
	opacity: 0.6; 
}

/* Elemento seleccionado */ 
.custom-input input:checked ~ .check-radio,
.custom-input input:checked ~ .check-checkbox {
	background-color: #fff;
	border-color: #d1d6db;
}

.custom-input input:checked ~ .check-checkbox {
	background-color: #ffffff; 
	color: #01b6ed;
}

/* Elemento seleccionado y deshabilitado */ 
.custom-input input:checked:disabled ~ .check-radio {
	border: 1px solid #a9a9a9; 
}

.custom-input input:checked:disabled ~ .check-checkbox {
	background-color: #e9ecef; 
	border: 1px solid #a9a9a9; 
}

/* Parte :after del elemento de estado  */ 
.custom-input .check-radio:after, 
.custom-input .check-checkbox:after {
  content: "";
	position: relative;
	display: none;
}

/* Al seleccionar el input mediante la etiqueta, se 
   muestra la parte :after del elemento de estado */ 
.custom-input input:checked ~ .check-radio:after,
.custom-input input:checked ~ .check-checkbox:after {
	display: block; 
}

/* Elemento de radio */ 
.custom-input input:checked:disabled ~ .check-radio:after {
	background-color: #333;
	top:2px;
	left:2px;
	width:12px;
	height:12px;
	border-radius:50%; 
}

.custom-input .check-radio:after {
	background-color: #01c8fc; 
	top:2px;
	left:2px;
	width:14px;
	height:14px;
	border-radius:50%;
}

/* Elemento de checkbox */ 
.custom-input input:checked:disabled ~ .check-checkbox:after {
	left: 4px;
	top: -1px;
	width: 7px;
	height:12px; 
	border-radius: 2px;
	border: solid #333;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.custom-input .check-checkbox:after {
	text-align: center;
	border-radius: 0;
	font-family:'FontAwesome';
	content: "\f00c";
	border-width: 0 0 0 0;
	transform: rotate(0deg);
	position: absolute;
	font-size: 18px;
	left: 3px;
    top: 0;
}