$activecolor = red
// radio
.custom_input[type="radio"]
	display: none
.custom_input[type="radio"] + label.custom_input
	cursor: pointer
	display:inline-block
	width: auto
	text-align: left
	box-sizing:border-box
	user-select:none
.custom_input[type="radio"] + label.custom_input::before
		content: ""
		display: inline-block
		width: 18px
		height: 18px
		background: #EEE
		vertical-align: middle
		margin-right: 5px
		box-sizing:border-box
		background-color: #fff
		border: 4px solid #EEEEEE
		border-radius:50%
		transition: all ease-in .3s

.custom_input[type="radio"]:checked + label.custom_input::before
	background-color: $activecolor
	transition: all ease-in .3s

.custom_input[type="radio"]:hover + label.custom_input::before
	border: 4px solid #e1e1e1
	transition: all ease-in .3s
	
// check
.custom_input[type="checkbox"]
	display: none
.custom_input[type="checkbox"] + label.custom_input
	cursor: pointer
	display:inline-block
	width: auto
	text-align: left
	box-sizing:border-box
	user-select:none
.custom_input[type="checkbox"] + label.custom_input::before
		content: ""
		display: inline-block
		width: 18px
		height: 18px
		background: #EEE
		vertical-align: middle
		margin-right: 5px
		box-sizing:border-box
		background-color: #fff
		border: 4px solid #EEEEEE
		transition: all ease-in .3s

.custom_input[type="checkbox"]:checked + label.custom_input::before
	background-color: $activecolor
	transition: all ease-in .3s

.custom_input[type="checkbox"]:hover + label.custom_input::before
	border: 4px solid #e1e1e1
	transition: all ease-in .3s
	