<div class="decoration">
    <div class="logo"></div>
    <div class="status-display" data-ui="status">
        <div class="spinner" data-ui="icon"></div>
        <div class="connected" data-ui="icon"></div>
        <div class="label" data-ui="label">label</div>
    </div>
</div>
<div class="login-area"></div>
<div class="login-area-overlay">
    <div class="project-image" id="project-image"></div>
    <div class="forms">
        <div class="input-field login-if" data-ui="user-name-input">
            <div class="value-box">
                <div class="optional-border">
                    <div class="icon-in-valuebox icon icon_user"></div>
                    <div class="border-element">
                        <input id="username" data-ui="user-field" type="text" name="name" autocomplete="off"
                            placeholder="User Name" class="input-field-value" size="1">
                    </div>
                </div>
            </div>
        </div>

        <div class="input-field login-if password">
            <div class="value-box">
                <div class="optional-border">
                    <div class="icon-in-valuebox icon icon_password"></div>
                    <div class="border-element">
                        <input id="pw" data-ui="password-field" type="password" name="password" placeholder="Password"
                            class="input-field-value" size="1">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="buttons">
        <div data-ui="autologin-button" type="button" value="Auto Login"
            class="button login-btn button-auto-login hidden">
            <div class="center-element">
                <div data-ui="button-icon" class="button-icon icon icon_login"></div>
                <div data-ui="button-label" class="button-label">Auto Login</div>
            </div>
        </div>
        <div data-ui="login-button" type="button" value="Login" class="button login-btn button-login">
            <div class="center-element">
                <div data-ui="button-icon" class="button-icon icon icon_login"></div>
                <div data-ui="button-label" class="button-label">Login</div>
            </div>
        </div>
        <div data-ui="clear-button" type="button" value="Clear" class="button login-btn button-clear">
            <div class="center-element">
                <div data-ui="button-icon" class="button-icon icon icon_back"></div>
                <div data-ui="button-label" class="button-label">Reset</div>
            </div>
        </div>
    </div>
</div>
