/* Final: 2021-01-28
// หากต้องใช้แบบ Check-Box
<label class="container-checkbox">One
  <input type="checkbox" checked="checked" name="checkbox">
  <span class="checkmark"></span> 
</label>
	
// หากต้องใช้แบบ Radio-Box
<label class="container-radio">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span> 
</label>
*/

/* The containerCheck */
.container-radio {
	display: inline-block;
	position: relative;
	padding-left: 35px;
	margin-right: 24px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 24px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default radio button */
.container-radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
/* Create a custom radio button */
.container-radio .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 50%;
	border: 1px solid #999;
}
.container-radio .checkmarkBox {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark, .container-radio:hover input ~ .checkmarkBox {
	background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container-radio input:checked ~ .checkmark, .container-radio input:checked ~ .checkmarkBox {
	background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.container-radio .checkmark:after, .container-radio .checkmarkBox:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark:after, .container-radio input:checked ~ .checkmarkBox:after {
	display: block;
}
/* Style the indicator (dot/circle) */
.container-radio .checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
/* Style the checkmark/indicator */
.container-radio .checkmarkBox:after {
  left: 8px;
  top: 7px;
  width: 7px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



/*
// หากต้องใช้แบบ Check-Box
<label class="container-checkbox">One
  <input type="checkbox" checked="checked" name="checkbox">
  <span class="checkmark"></span> 
</label>
*/
/* The container Custom Checkbox */
.container-checkbox {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

/* Create a custom checkbox */
.container-checkbox .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border: 1px solid #CCC;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
	background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.container-checkbox .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}