.input-group {
	position: relative;
}

.input {
	font-size: 16px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 200px;
	border: none;
	border-bottom: 1px solid #515151;
	background: transparent;
}

.input:focus {
	outline: none;
}

label {
	color: #999;
	font-size: 14px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: -20px;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

.input:focus ~ label,
.input:valid ~ label {
	top: -20px;
	font-size: 14px;
	color: #5264ae;
}

.bar {
	position: relative;
	display: block;
	width: 200px;
}

.bar:before,
.bar:after {
	content: "";
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #5264ae;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

.bar:before {
	left: 50%;
}

.bar:after {
	right: 50%;
}

.input:focus ~ .bar:before,
.input:focus ~ .bar:after {
	width: 50%;
}

.highlight {
	position: absolute;
	height: 60%;
	width: 100px;
	top: 25%;
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}

.input:focus ~ .highlight {
	animation: inputHighlighter 0.3s ease;
}

@keyframes inputHighlighter {
	from {
		background: #5264ae;
	}

	to {
		width: 0;
		background: transparent;
	}
}

/* BUTTON */

button {
	--color: #0077ff;
	font-family: inherit;
	display: inline-block;
	width: 6em;
	height: 2.6em;
	line-height: 2.5em;
	overflow: hidden;
	font-size: 17px;
	z-index: 1;
	color: var(--color);
	border: 2px solid var(--color);
	border-radius: 6px;
	position: relative;
	background: transparent;
}

button::before {
	position: absolute;
	content: "";
	background: var(--color);
	width: 150px;
	height: 200px;
	z-index: -1;
	border-radius: 50%;
}

.button-red {
	color: lightcoral;
	border: 2px solid lightcoral;
}

.button-red::before {
	background: lightcoral;
}

.button-green {
	color: #28d634;
	border: 2px solid #28d634;
}

.button-green::before {
	background: #28d634;
}

.button-purple {
	color: #d23fe0;
	border: 2px solid #d23fe0;
}

.button-purple::before {
	background: #d23fe0;
}

button:hover {
	color: white;
	cursor: pointer;
}

button:before {
	top: 100%;
	left: 100%;
	transition: 0.3s all;
}

button:hover::before {
	top: -30px;
	left: -30px;
}

/* Radio */

.radio-inputs {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	border-radius: 0.5rem;
	background-color: #EEE;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
			box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
	padding: 0.25rem;
	width: 300px;
	font-size: 14px;
  }
  
  .radio-inputs .radio {
	-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
			flex: 1 1 auto;
	text-align: center;
  }
  
  .radio-inputs .radio .input {
	display: none;
  }
  
  .radio-inputs .radio .name {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	cursor: pointer;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	border-radius: 0.5rem;
	border: none;
	padding: .5rem 0;
	color: rgba(51, 65, 85, 1);
	-webkit-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
  }
  
  .radio-inputs .radio .input:checked + .name {
	background-color: #fff;
	font-weight: 600;
  }