body {
	font-family:Helvetica,Arial,freesans,sans-serif;
}
main {
    padding: 2em;
}


.cb_input:focus ~ .cb_label, .cb_input:valid ~ .cb_label {
    bottom: 48%;
}


.cb_label {
	font-size:1.25rem;
	line-height:1.5rem;
	bottom:4px;
	left:0;
	position:absolute;
	top:auto;
	-webkit-transition:bottom .3s ease,font-size .3s ease,line-height .3s ease;
	transition:bottom .3s ease,font-size .3s ease,line-height .3s ease;
    color: #848484;
}

:not(output) {
    box-shadow: 0 0 0 0;
}

.cb_input {
    font-weight: 700;
    border: 0;
    outline: 0;
    padding-top: 20px;
    padding-bottom: 4px;
}

input {
    padding-left: 0;
    padding-right: 0;
}

.cb_input-container {
    padding-top: 16px;
    position: relative;
}

div, body {
    margin: 0;
}

.cb {
    margin-bottom: 16px;
}


.cb_decoration {
    border-bottom: 1px solid;
}

.cb_input:focus ~ .cb_decoration::before, .cb_invalid .cb_decoration::before {
    width: 100%;
}

.cb_decoration::before {
    border-bottom: 3px solid;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    -webkit-transition: width .3s ease,border-color .3s ease;
    transition: width .3s ease,border-color .3s ease;
}


.cb_input:focus + .cb_label, .cb_input:valid + .cb_label {
    color: #000;
}