/* --- material floating label --- */

.form-group {
    display: flex;
    height: 55px;
    margin-top: 10px;
}

.control-label {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    transform: translate3d(0, 22px, 20) scale(1);
    transform-origin: left top;
    transition: 240ms;
}

.form-group.focused .control-label {
    opacity: 1;
    transform: scale(0.85);
}

.form-control {
    align-self: flex-end;
}

.form-control::-webkit-input-placeholder {
    color: transparent;
    transition: 100ms;
}

.form-control:focus::-webkit-input-placeholder {
    transition: none;
}

.form-group.focused .form-control::-webkit-input-placeholder {
    color: #bbb;
}