.ui-dialog.login_dialog {
    margin: 0px !important;
    padding: 0px !important;
    background-size: cover;
    background-image: url("/includes/images/login/popup-login-background.jpg") !important;
    background-origin: border-box;
    font-size: 1.1em;
    overflow: visible;
}

.ui-dialog.login_dialog::before, .ui-dialog.login_dialog::after {
    position: absolute;
    display: block;
    content: "";
    padding: 0;
    pointer-events: none;
}

.ui-dialog.login_dialog_big::after {
    left: -287px;
    top: -305px;
    background-image: url("/includes/images/login/login-monk.png");
    width: 519px;
    height: 622px;
    z-index: 1;
}

.ui-dialog.login_dialog::before {
    right: -345px;
    bottom: -338px;
    background-image: url("/includes/images/login/login-dragon.png");
    width: 684px;
    height: 893px;
    z-index: -1;
}

/*
#imperian .ui-dialog.login_dialog_big::after {
    left: -287px;
    top: -305px;
    background-image: none;
    width: 564px;
    height: 470px;
    z-index: 1;
}

#imperian .ui-dialog.login_dialog::before {
    left: -320px;
    top: -50px;
    background-image: url("/includes/images/login/login-imp-wolf.png");
    width: 564px;
    height: 470px;
    z-index: -1;
} */

.ui-dialog.login_dialog .ui-dialog-titlebar .ui-dialog-title::after {
    display: none;
}


.ui-widget-overlay.login_form_overlay {
    background-size: cover;
    opacity: 1;
    z-index: 198;
}

.login_dialog a {
    color: #71CDE7;
}

.dialog_content, #login_form {
    height: 100%;
}

#char_login {
    padding: 0 .5em .5em .5em;
    overflow: hidden;
}

.ui-dialog.login_dialog .ui-dialog-titlebar {
    overflow: hidden;   /* because the parent dialog doesn't have overflow, we need it here */
    padding-bottom: 0;
}

/* don't let them close the login dialog, it makes the client useless */
.login_dialog .ui-dialog-titlebar-close {
    display: none;
}

.login_dialog .login_section {
    float: left;
    margin-left: 3%;
    position: relative;
    height: 90%;
    top: 0%;
    margin-top: 0;
    color: #d0d0d0;
    background-image: url("/includes/images/login/login-box.png");
    background-size: 100% 100%;
    padding-top: 20px;
    padding-right: 10px;
}

.login_section_left {
    width: 45%;
}

.login_section_right {
    width: 45%;
}

.login_section_right > div {
    padding-top: 10px;
    padding-bottom: 10px;
}

.login_section_bottom {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 4px;
    font-size: 0.9em;
}

.login_form_notice {
    width: 100%;
    font-weight: bold;
    color: white;
}

.login_section_top {
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.login_heading {
    margin-bottom: 15px;
}

.login_section_left .login_heading {
    padding-left: 11px;
}

.login_section *, .login_section_small * {
    text-align: center;
}

.login_dialog input[type="text"], .login_dialog input[type="password"]
{
    width: 239px;
    height: 52px;
    padding: 0px;
    margin: 0 0 10px;
    font-size: 1.0em;
    background-size: 100% 100%;
    background-image: url("/includes/images/login/form-field.png");
    background-color: transparent;
    text-align: center;
    border: 0;
    color: white;
    box-sizing: border-box;  
}

.login_section .login_bottom {
    position: absolute;
    bottom: 38px;
    left: 0;
    right: 0;
    font-size: 0.9em;
    line-height: 1.2em;
    width: 75%;
    margin: auto;
    text-align: center;
}

.login_dialog .login_button {
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: inline-block;
    background-color: transparent;
    border: 0;
    color: transparent;   /* this removes the button text */
}

.login_dialog .btn_login {
    width: 235px;
    height: 55px;
    background: url("/includes/images/login/button-signin.png") -10px -10px;
}

.login_dialog .btn_login:hover {
    width: 235px;
    height: 55px;
    background: url("/includes/images/login/button-signin.png") -10px -85px;
}

.login_dialog #btn_new_character {
    width: 235px;
    height: 75px;
    background: url("/includes/images/login/button-start.png") -10px -10px;
}

.login_dialog #btn_new_character:hover {
    width: 235px;
    height: 75px;
    background: url("/includes/images/login/button-start.png") -10px -105px;
}