/* RADIO BUTTON */
.radioButton
{
    color:#888b90;
	cursor:pointer;
	font-size:14px;
	line-height:18px;
	padding-left:50px;
	position:relative;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

.radioButton:before
{
	border:3px solid #37383d;
	border-radius:50%;
	content:"";
	display:block;
	height:30px;
	left:0px;
	position:absolute;
	top:calc(50% - 18px);
	transition:border 0.25s, box-shadow 0.25s;
	width:30px;
}

.radioButton:hover:before
{
	border:3px solid #cffdff;
    box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9;
}

.radioButton:after
{
	background:#6b42de;
	background:linear-gradient(180deg, #ac78e4 0%, #7262f2 100%);
	border-radius:50%;
	content:"";
	display:block;
	height:0px;
	left:18px;
	position:absolute;
	top:50%;
	transition:height 0.25s, left 0.25s, top 0.25s, width 0.25s;
	width:0px;
}

.radioButton.selected:after
{
	animation-duration:0.25s;
	animation-name:selectRadioButton;
	height:24px;
	left:6px;
	top:calc(50% - 12px);
	width:24px;
}

/* ANIMATION KEY FRAMES */
@keyframes selectRadioButton
{
	0%   {height:0px; left:18px; top:50%; width:0px;}
	80%  {height:26px; left:5px; top:calc(50% - 13px); width:26px;}
	100% {height:24px; left:6px; top:calc(50% - 12px); width:24px;}
}