.form-outline {
    position: relative;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
    display: block;
    width: 100%;
}

    .form-outline input:focus {
        box-shadow: 0 0 0 0.25rem rgb(57 62 70 / 50%);
    }

    .form-outline label {
        background: #fff;
        padding: 3px;
        font-size: 14px;
        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: bottom left;
        color: #adadad;
        font-family: arial;
        position: absolute;
        top: 12px;
        left: 9px;
        z-index: 1;
        cursor: text;
    }

    .form-outline input, .form-outline textarea, .form-outline select {
        border: 1px solid #ddd;
        display: block;
        padding: 10px;
        border-radius: 3px;
        width: 100%;
        box-sizing: border-box;
    }

        .form-outline input[readonly] {
            color: var(--bs-dark);
        }

        .form-outline input:focus, .form-outline textarea:focus, .form-outline select:focus {
            outline: 0;
            border-color: var(--bs-dark);
        }

            .form-outline input:focus + label, .form-outline input:not(:placeholder-shown) + label,
            .form-outline textarea:focus + label, .form-outline textarea:not(:placeholder-shown) + label,
            .form-outline select:focus + label, .form-outline label.select-option-set {
                transform: translateX(-3px) translateY(-19px);
                font-size: 10px;
                color: var(--bs-dark);
            }