.input {
    display: inline-block;
    margin-top: 20px;
    position: relative;
    width: calc(100% - 2em);
    z-index: 1;
}
.input__field {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    color: #aaa;
    display: block;
    float: right;
    font-weight: 400;
    padding: 0.8em;
    position: relative;
    width: 60%;
}
.input__field:focus {
    outline: medium none;
}
.input__label {
    -moz-user-select: none;
    color: #696969;
    display: inline-block;
    float: right;
    font-size: 70.25%;
    padding: 0 1em;
    width: 40%;
}
.input__label-content {
    display: block;
    padding: 1.6em 0;
    position: relative;
    width: 100%;
}
.graphic {
    fill: none;
    left: 0;
    position: absolute;
    top: 0;
}
.icon {
    color: #ddd;
    font-size: 150%;
}
.input__label--yoshiko {
    bottom: 100%;
    overflow: hidden;
    padding: 0 1.25em;
    pointer-events: none;
    position: absolute;
    text-align: left;
    transform: translate3d(0px, 3em, 0px);
    transition: transform 0.25s ease-in-out 0s;
    width: 100%;
}
.input__label-content--yoshiko {
    color: #949494 !important;
    padding: 0.25em 0;
    transition: transform 0.25s ease-in-out 0s;
}
.input__label-content--yoshiko::after {
    bottom: 100%;
    color: #009ae1;
    content: attr(data-content);
    font-size: 0.85em;
    font-weight: 800;
    height: 100%;
    left: 0;
    letter-spacing: 1px;
    padding: 0.25em 0;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
}
.input__field--yoshiko:focus + .input__label--yoshiko, .input--filled .input__label--yoshiko {
    transform: translate3d(0px, 0px, 0px);
}
.input__field--yoshiko:focus + .input__label--yoshiko .input__label-content--yoshiko, .input--filled .input__label-content--yoshiko {
    transform: translate3d(0px, 100%, 0px);
}
.input__field--yoshiko:focus + .input__field--yoshiko, .input--filled .input__field--yoshiko {
    background-color: transparent;
    border-color: #a3d39c;
}