
// Parent div for login
#login
{

}

// Logo image
#login-logo-image
{
    width: 80%;
    margin-bottom: -15px;
}

// Parent overlay
.login-overlay
{
    // Credit to w3schools.com:
    // https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp

    // Fill entire screen
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;

    // Stay in place
    position: fixed;

    // Sit on top layer
    z-index: 1;

    // Overlay color
    background-color: rgba(0,0,0, 0.65);

    // Disable horizontal scroll
    overflow-x: hidden;

    // Make it a table for vertical centering
    display: table;
}

.login-vertical-center
{
    // Vertically center
    display: table-cell;
    vertical-align: middle;
}

// The user interacting panel
.login-panel
{
    // Make it smaller
    width: 256px;

    // Center
    margin-left: auto;
    margin-right: auto;

    // Borders
    padding: 15px;
    border-radius: 10px;
    // box-shadow: 0 0 20px 0 white;
    border: 1px solid #DCDFE6;

    // Make it white
    background-color: white;

    // Input bars
    .el-input
    {
        margin: 5px 0;
    }

    // Button
    .el-button
    {
        margin: 5px 0;
        width: 100%;
    }
}

// Error
.input-error
{
    .el-input__inner
    {
        color: #ff3a3a6b !important;
        border-color: #ff3a3a6b !important;
        background-color: #ffdddd3b !important;
    }

    .el-input__inner:focus
    {
        background-color: white !important;
    }
}

// Fix error message
.el-form-item__error.custom
{
    padding-top: 0;
    position: relative;
    top: auto;
    float: left;
}
