/*
    Mejorar esta implementación para el caso Firefox y/u otros
    Ver: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms
*/

input[type='checkbox'], input[type='radio'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	position: relative;
	right: 0;
	bottom: 0;
	left: 0;
	height: 20px;
	width: 20px;
	transition: all 0.1s ease-in-out;
	background: #f5f5f5;
	border: 1px solid #c8c8c8;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin-right: 0.5rem;
	outline: none;
}

input[type='checkbox']:hover, input[type='radio']:hover,
input[type='checkbox']:focus, input[type='radio']:focus {
	border: 1px solid #8acbde;
	background: #fff;
}

input[type='checkbox']:checked, input[type='radio']:checked {
	border: 1px solid #b4b4b4;
	background: #fff;
}

input[type='checkbox']:checked {
	background: #fff url(../../images/checkbox_checked.png) center center no-repeat;
}

input[type='radio']:checked {
	background: #fff url(../../images/radio_checked.png) center center no-repeat;
}

input[type='checkbox']:checked:hover, input[type='radio']:checked:hover {
	border: 1px solid #8acbde;
}

input[type='radio'] {
	border-radius: 50%;
}
input[type='radio']::after {
	border-radius: 50%;
}

/* Styled checkbox */
form p > input[type="checkbox"],
form > input[type="checkbox"],
input[type="checkbox"].styled {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	width: 40px;
	height: 20px;
	border-radius: 3px;
	border: 1px solid #c8c8c8;
	background: #f5f5f5;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	transition: all 0.1s ease-in-out;
}

form p > input[type="checkbox"]:after,
form > input[type="checkbox"]:after,
input[type="checkbox"].styled:after {
	content:'';
	position:absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	background: #646464;
	border: 1px solid #505050;
	border-radius: 3px;
	transition: left 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

form p > input[type="checkbox"]:checked,
form > input[type="checkbox"]:checked,
input[type="checkbox"].styled:checked {
	background: #97d197;
	border-color: #51b351;
}

form p > input[type="checkbox"]:checked:after,
form > input[type="checkbox"]:checked:after,
input[type="checkbox"].styled:checked:after {
	left: 20px;
}

form p > input[type="checkbox"]:hover:not(:checked):not(:disabled):after,
form p > input[type="checkbox"]:focus:not(:checked):not(:disabled):after,
form > input[type="checkbox"]:hover:not(:checked):not(:disabled):after,
form > input[type="checkbox"]:focus:not(:checked):not(:disabled):after,
input[type="checkbox"].styled:hover:not(:checked):not(:disabled):after,
input[type="checkbox"].styled:focus:not(:checked):not(:disabled):after {
	left: 0;
}

form p > input[type="checkbox"]:hover:checked:not(:disabled):after,
form p > input[type="checkbox"]:focus:checked:not(:disabled):after,
form > input[type="checkbox"]:hover:checked:not(:disabled):after,
form > input[type="checkbox"]:focus:checked:not(:disabled):after,
input[type="checkbox"].styled:hover:checked:not(:disabled):after,
input[type="checkbox"].styled:focus:checked:not(:disabled):after {
	left: 20px;
}

form p > input[type="checkbox"]:disabled,
form > input[type="checkbox"]:disabled,
input[type="checkbox"].styled:disabled {
	opacity: 0.5;
}