.login-bg {
    position: fixed;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    background-color: rgba(0,0,0,0.4);
    z-index: 1;
    overflow-y: hidden;
}

.login-container {
    background: white;
    position: absolute;
    top: calc(50% - 50px);
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 20px;
    max-width: 400px;
}

.login-header {
    text-align: center;
    border: 2.5px solid var(--bg-primary);
    border-radius: 20px 20px 0px 0px;
    padding: 5px 0px;
}

.login-form {
    text-align: center;
    border: 2.5px solid var(--bg-primary);
    border-radius: 0px 0px 20px 20px;
    padding: 5px 5px;
}

    .login-form .form-warning {
        display: flex;
        text-align: justify;
        margin: 10px 10px 0px 0px;
    }

    .login-form .form-row {
        display: flex;
        margin-top: 10px;
        min-height: 40px;
    }

        .login-form .form-row .row-label {
            float: left;
            width: 35%;
            padding-left: 10px;
            padding-right: 5px;
            text-align: left;
            margin-top: 5px;
        }

        .login-form .form-row .row-value {
            width: 65%;
            float: right;
            padding-right: 10px;
        }

            .login-form .form-row .row-value .text-border {
                border: 1px solid var(--bg-primary-gradient)
            }

                .login-form .form-row .row-value .text-border:hover {
                    background: var(--bg-main-hover)
                }

.login-form-button {
    border: 1px solid var(--bg-primary);
}

    .login-form-button:hover {
        background: var(--bg-main-hover);
        border: 1px solid black;
    }

    .login-form-button:active, .login-form-button:focus {
        outline: none !important;
        background: var(--bg-main-hover) !important;
        border: 1px solid black !important;
    }