html, body {
    height: 100%;
}

body {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.glyphicon-refresh {
    cursor: pointer;
}

.glyphicon-volume-down {
    cursor: pointer;
}


.logon-page {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logon-form {
    width: 960px;
    height: 640px;
    display: flex;
    box-shadow: 0 2px 20px hsla(0, 0%, 0%, 0.5);
}

.first-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first-side-image {
    width: 480px;
    height: 640px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.elise-logo {
    width: 330px;
}

.second-side {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #F3F8F9;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-form {
    width: 400px;
    height: 600px;
    display: flex;
    flex-direction: column;
}

.instance-logo {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.instance-logo-img {
    width: 100px;
    height: 100px;
}

.instance-name {
    line-height: 40px;
    color: #0C3849;
    text-align: center;
    font-size: 20px;
}

.captcha-required {
    color: #0A6E89;
    font-size: 12px;
    line-height: 14px;
    height: 40px;
    display: flex;
    align-items: center;
    width: 100%;
}

.security-message {
    height: 40px;
}

.information-message {
    line-height: 14px;
    height: 20px;
    width: 100%;
    color: #4A4A4A;
    font-size: 12px;
    font-weight: bold;
}

.form-input-captcha {
    display: flex;
    align-items: center;
    height: 40px;
    margin-top: 10px;
}

body[dir="ltr"] .form-login-label,
body[dir="ltr"] .form-password-label,
body[dir="ltr"] .form-captcha-label,
body[dir="ltr"] .form-captcha-message,
body[dir="ltr"] .error-logon-message,
body[dir="ltr"] .submit-button,
body[dir="ltr"] .information-message,
body[dir="ltr"] .captcha-required,
body[dir="ltr"] .instance-name {
    font-family: "Trebuchet MS";
}

body[dir="rtl"] .form-login-label,
body[dir="rtl"] .form-password-label,
body[dir="rtl"] .form-captcha-label,
body[dir="rtl"] .form-captcha-message,
body[dir="rtl"] .error-logon-message,
body[dir="rtl"] .submit-button,
body[dir="rtl"] .information-message,
body[dir="rtl"] .captcha-required,
body[dir="rtl"] .instance-name {
    font-family: "Tahoma";
}

.form-login-label, .form-password-label, .form-captcha-label {
    width: 200px;
    color: #0C3849;
    font-size: 12px;
    line-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form-login, .form-password, .form-captcha {
    width: 100%;
    height: 40px;
}

.input-login, .input-password, .input-captcha {
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-image: none;
    background-color: #E1EDF0;
    border: none;
    border-radius: 4px;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.error-logon-message {
    width: 100%;
    color: #F44336;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    align-items: center;
}

.form-input-button {
    display: flex;
    flex: 1;
    align-items: flex-end;
}

.submit-button {
    height: 60px;
    width: 400px;
    color: #FAFCFC;
    background-color: #0A6E89;
    font-size: 20px;
    font-weight: 500;
    line-height: 27px;
    text-align: center;
    text-transform: uppercase;
    padding: 0;
    border: 0;
    border-radius: 4px;
}

.submit-button:hover {
    background-color: #165C77;
}

.form-captcha-message {
    height: 20px;
    width: 100%;
    color: #4A4A4A;
    font-size: 12px;    
    line-height: 14px;
}

.captcha {
    height: 50px;
    display: flex;
    align-items: center;
}

.logon-captcha-refresh, .logon-captcha-play {
    width: 40px;
    height: 40px;
    color: #FAFCFC;
    background-color: #0A6E89;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
}

    .logon-captcha-refresh:hover, .logon-captcha-play:hover {
        background-color: #165C77;
    }

.logon-captcha-refresh {
    margin: 0 10px;
}

.logon-captcha-play {
    margin: 0 5px;
}

.loading-form {
    height: 20px;
    display: flex;
    align-items: center;
    font-weight: bold;
    justify-content: flex-end;
}

.logon-form-inputs {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}