/*


*/

/*


*/

.div_radio_v {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.radio_v {
	background: #FFFFFF;
	padding: 4px;
	border-radius: 3px;
	position: relative;
}

.radio_v input {
	width: auto;
	height: 24px;
	min-width: 40px;	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	border-radius: 2px;
	padding: 2px 1px;
	background: #454857;
	color: #bdbdbdbd;
	font-size: 14px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	transition: all 100ms linear;
}

.radio_v input:checked {
	background-image: linear-gradient(180deg, #95d891, #74bbad);
	color: #fff;
	box-shadow: 0 1px 1px #0000002e;
	text-shadow: 0 1px 0px #79485f7a;
}

.radio_v input:before {
	content: attr(label);
	display: inline-block;
	text-align: center;
	width: 100%;
}






/*

    https://codepen.io/oliviale/pen/xxboXzo
    checkbox toggle
*/

.checkbox_normal label {
    background: #af4c4c;
    border: 0.5px solid rgba(117, 117, 117, 0.31);
    box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0 -3px 4px rgba(0, 0, 0, 0.15);
}
.checkbox_normal label:before {
    border: none;
    width: 2.5em;
    height: 2.5em;
    box-shadow: inset 0.5px -1px 1px rgba(0, 0, 0, 0.35);
    background: #fff;
    transform: rotate(-25deg);
}
.checkbox_normal label:after {
    background: transparent;
    height: calc(100% + 8px);
    border-radius: 30px;
    top: -5px;
    width: calc(100% + 8px);
    left: -4px;
    z-index: 0;
    box-shadow: inset 0px 2px 4px -2px rgba(0, 0, 0, 0.2), 0px 1px 2px 0px rgba(151, 151, 151, 0.2);
}
#checkbox_normal:checked + label {
    background: #4caf50;
}
#checkbox_normal:checked + label:before {
    left: 67px;
}


/*
    https://codepen.io/oliviale/pen/xxboXzo
    checkcross
*/

.checkcross label:before {
	 content: none;
}
 .checkcross .check {
	 border-radius: 50%;
	 width: 2.5em;
	 height: 2.5em;
	 position: absolute;
	 background: #8bc34a;
	 transition: 0.4s ease;
	 top: 4.5px;
	 left: 4.5px;
}
 .checkcross .check:before, .checkcross .check:after {
	 height: 4px;
	 border-radius: 10px;
	 background: #fff;
	 transition: 0.4s ease;
}
 .checkcross .check:before {
	 width: 25px;
	 transform: rotate(-45deg) translate(-6px, 20px);
}
 .checkcross .check:after {
	 width: 10px;
	 transform: rotate(45deg) translate(20px, 11px);
}
 #checkcross:checked + label .check {
	 left: 68px;
	 transform: rotate(360deg);
	 background: #c34a4a;
}
 #checkcross:checked + label .check:before {
	 width: 27px;
	 transform: rotate(-45deg) translate(-8px, 18px);
}
 #checkcross:checked + label .check:after {
	 width: 27px;
	 transform: rotate(45deg) translate(18px, 8px);
}