.md-input {
    position: relative;
}

.md-input .md-form-control {
    border: none;
    border-bottom: 1px solid var(--beep-green);
    border-radius: 0;
    box-shadow: none;
    display: block;
    margin-bottom: 1rem;
    padding: 10px 10px 2px 2px;
    width: 100%;
}

.md-input .input-text-overlay ~ .md-form-control,
.md-input .input-overlay ~ .md-form-control {
    padding-left: calc(1rem + 10px);
}

.md-input textarea.md-form-control {
    border: 1px solid var(--beep-green);
    padding: 2px;
}

.md-input label {
    pointer-events: none;
    position: absolute; top: 0.8rem;
    transition: 0.2s ease all;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-input .input-overlay ~ label,
.md-input .input-text-overlay ~ label {
    left: calc(1rem + 5px);
}

.md-input textarea.md-form-control ~ label {
    top: 4px; left: 6px;
}

.md-input .md-form-control ~ label.md-raised,
.md-input .md-form-control:focus ~ label,
.md-input .md-form-control:not(:placeholder-shown) ~ label {
    top: -0.5rem;
    left: unset;
    transform: scale(0.7);
    transform-origin: top left;
}

.md-input .md-form-control ~ label.md-over-left-icon.md-raised,
.md-input .md-form-control:focus ~ label.md-over-left-icon,
.md-input .md-form-control:not(:placeholder-shown) ~ label.md-over-left-icon {
    left: 0;
}

.md-input textarea.md-form-control:focus ~ label,
.md-input textarea.md-form-control:not(:placeholder-shown) ~ label {
    top: -0.7rem;
}

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

.md-input .bar::before {
    left: 50%;
}

.md-input .bar::after {
    right: 50%;
}

.md-input .bar::before, .md-input .bar::after {
    background: var(--beep-turquoise);
    content: '';
    position: absolute; bottom: 0;
    transition: 0.2s ease all;
    width: 0; height: 2px;
}

.md-input .md-form-control:focus ~ .bar::before,
.md-input .md-form-control:focus ~ .bar::after,
.md-input .md-form-control:hover ~ .bar.bar-on-hover::before,
.md-input .md-form-control:hover ~ .bar.bar-on-hover::after,
.md-input .md-form-control ~ .bar.bar-static::before,
.md-input .md-form-control ~ .bar.bar-static::after {
    width: 50%;
}