/* The ContenedorCheckBox */
.ContenedorCheckBox {
  display: block;
  position: relative;
  padding-left: 2.5vw;
  cursor: pointer;
  font-size: 1.1vw;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.ContenedorCheckBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.CheckMarkCheckBox {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.3vw;
	width: 1.3vw;
	background-color: #ccc;
}
/* On mouse-over, add a grey background color */
.ContenedorCheckBox:hover input ~ .CheckMarkCheckBox {
	background-color: #38B2BC;
}
/* When the checkbox is checked, add a blue background */
.ContenedorCheckBox input:checked ~ .CheckMarkCheckBox {
	background-color: #F4A164;
}
/* Create the CheckMarkCheckBox/indicator (hidden when not checked) */
.CheckMarkCheckBox:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the CheckMarkCheckBox when checked */
.ContenedorCheckBox input:checked ~ .CheckMarkCheckBox:after {
  display: block;
}
/* Style the CheckMarkCheckBox/indicator */
.ContenedorCheckBox .CheckMarkCheckBox:after {
	left: 0.3vw;
	top: 0px;
	width: 0.45vw;
	height: 0.85vw;
	border: solid white;
	border-width: 0 0.2vw 0.2vw 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* The ContenedorRadio */
.ContenedorRadio {
	display: block;
	position: relative;
	padding-left: 2.5vw;
	margin-bottom: 0.9vw;
	cursor: pointer;
	font-size: 1.1vw;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default radio button */
.ContenedorRadio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.CheckMarkRadio {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.3vw;
	width: 1.3vw;
	background-color: #ccc;
	border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.ContenedorRadio:hover input ~ .CheckMarkRadio {
  background-color: #38B2BC;
}
/* When the radio button is checked, add a blue background */
.ContenedorRadio input:checked ~ .CheckMarkRadio {
  background-color:#F4A164;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.CheckMarkRadio:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.ContenedorRadio input:checked ~ .CheckMarkRadio:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.ContenedorRadio .CheckMarkRadio:after {
	top: 0.31vw;
	left: 0.33vw;
	width: 0.65vw;
	height: 0.65vw;
	border-radius: 50%;
	background: white;
}

/* ***************************************************************************************************************************** */
/* ***************************************************************************************************************************** */
/* ***************************************************************************************************************************** */

/* The ContenedorCheckBox */
.MContenedorCheckBox {
	display: block;
	position: relative;
	padding-left: 50px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
	/* Hide the browser's default checkbox */
	.MContenedorCheckBox input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}
/* Create a custom checkbox */
.MCheckMarkCheckBox {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #ccc;
}
/* On mouse-over, add a grey background color */
.MContenedorCheckBox:hover input ~ .MCheckMarkCheckBox {
	background-color: #38B2BC;
}
/* When the checkbox is checked, add a blue background */
.MContenedorCheckBox input:checked ~ .MCheckMarkCheckBox {
	background-color: #F4A164;
}
/* Create the CheckMarkCheckBox/indicator (hidden when not checked) */
.MCheckMarkCheckBox:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the CheckMarkCheckBox when checked */
.MContenedorCheckBox input:checked ~ .MCheckMarkCheckBox:after {
	display: block;
}
/* Style the CheckMarkCheckBox/indicator */
.MContenedorCheckBox .MCheckMarkCheckBox:after {
	left: 5px;
	top: 0px;
	width: 9px;
	height: 17px;
	border: solid white;
	border-width: 0 4px 4px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* The ContenedorRadio */
.MContenedorRadio {
	display: block;
	position: relative;
	padding-left: 50px;
	margin-bottom: 18px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
	/* Hide the browser's default radio button */
	.MContenedorRadio input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
	}
/* Create a custom radio button */
.MCheckMarkRadio {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #ccc;
	border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.MContenedorRadio:hover input ~ .MCheckMarkRadio {
	background-color: #38B2BC;
}
/* When the radio button is checked, add a blue background */
.MContenedorRadio input:checked ~ .MCheckMarkRadio {
	background-color: #F4A164;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.MCheckMarkRadio:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the indicator (dot/circle) when checked */
.MContenedorRadio input:checked ~ .MCheckMarkRadio:after {
	display: block;
}
/* Style the indicator (dot/circle) */
.MContenedorRadio .MCheckMarkRadio:after {
	top: 6px;
	left: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: white;
}