.group { 
	position: relative; 
	margin-bottom: 40px; 
}

input:not([type=checkbox]),
textarea,
select {
	padding: 10px 0px 10px 0px;
	-webkit-appearance: none;
	display: block;
	color: #636363;
	width: 100%;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #8CB0CF;
    background: #fff;
}

select {
    border-bottom: 1px solid #8CB0CF;
}

#valor{
    font-size: 4rem;
    border: none;
}

input,textarea,select:focus { outline: none; border-bottom: 1px solid #8CB0CF; }



input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
 
}



/* Label */
label {
	color: #999; 
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	top: 10px;
	-webkit-transition:300ms ease;
    -moz-transition:300ms ease;
    -o-transition:300ms ease;
    transition:300ms ease;
}


/* active */
input:not([type=checkbox]):focus ~ label, input.used ~ label,
textarea:focus ~ label, textarea.used ~ label,
select:focus ~ label, select.used ~ label{
    top: -20px;
    transform: scale(.75);
    left: -10px;
	color: #28455F;
    font-weight: 600;
}


/* Underline */
.bar {
	position: relative;
	display: block;
	width: 100%;
}

.bar:before, .bar:after {
	content: '';
	height: 2px; 
	width: 0;
	bottom: 1px; 
	position: absolute;
	background: #8CB0CF; 
	-webkit-transition:300ms ease;
    -moz-transition:300ms ease;
    -o-transition:300ms ease;
    transition:300ms ease;
}

.bar:before { left: 50%; }

.bar:after { right: 50%; }


/* active */

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


/* Highlight */

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


/* active */

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


/* Animations */

@keyframes inputHighlighter {
	from { background: #8CB0CF; }
	to 	{ width: 0; background: transparent; }
}

input[type="date"]::-webkit-input-placeholder{
    margin-left: 80px;
}


select.error,
input.error {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 2px solid #b94a48;
}

select.valid,
input.valid {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-error {
    font-size: 1rem;
    display: block;
    color: #b94a48;
    line-height: 120%;
    margin-top: 5px;
}