@import url('../font/css.css');
@import url('../font/icon.css');

body {
    background-color: #040507;
    background-image: url('../img/login-screen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    /*text-shadow: 0px 0px 10px #000;*/
}

:root {
    --mdc-theme-primary: ghostwhite;
    --mdc-theme-secondary: #018786;
    --mdc-theme-background: #fff;
    --mdc-theme-surface: #fff;
    --mdc-theme-on-primary: black;
    --mdc-theme-on-secondary: #fff;
    --mdc-theme-on-surface: #000;
    --mdc-theme-text-primary-on-background: rgba(0,0,0,.87);
}

.mdc-button {
    min-width: 125px;
}

.logo-container {
    background-color: rgb(0, 96, 255);
    width: 100%;
    display: flex;
}

img.koerber-logo {
    margin: 20px;
    height: 50px;
    padding-left: 50px;
}

img.log4x-logo {
    padding: 30px;
}

.error-container {
    color: #000000;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.label-container {
    height: 50px;
    width: 400px;
    background-color: rgb(230, 226, 220);
    vertical-align: middle;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    display: table-cell;
    color: black;
}

.username-container {
    padding: 10px;
}

.password-container {
    padding: 10px;
}

.button-container {
    padding: 10px;
}

.title {
    margin-bottom: 15px;
}

/* without this, the fields all expand
   when the MDC JavaScript is run. */
.mdc-text-field {
    margin-top: 16px;
}

#kc-header,
#kc-content {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

#kc-header {
    width: 90%;
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
    margin-top: 7%;
    color: rgb(68, 68, 68);
    height: 100px;
}

#kc-content {
    background: white;
    box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2),
        0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12);
}

#kc-reset-password-form #kc-form-options {
    float: left;
}

#kc-reset-password-form #kc-form-buttons {
    float: right;
}

#kc-register-form #kc-form-options {
    float: left;
}

#kc-register-form #kc-form-buttons {
    float: right;
}

.clearfix {
    float: none;
    clear: both;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.24);
}

@media (max-width: 768px) {
    #kc-content {
        width: 90%;
    }
}

@media (min-width: 769px) {
    #kc-content {
        width: 360px;
    }
}

.mdc-text-field {
    width: 100%;
}

#kc-form-login #kc-form-options {
    margin-top: 15px;
    margin-right: 10px;
}

#kc-login {
    float: right;
}

#kc-error-message p {
    margin: 0;
}

#kc-renew-password {
    float: right;
}

.remember-me-checkbox {
    float: left;
}

.register .register-field {
    margin-bottom: 15px;
}

.register .register-button-container {
    margin-top: 20px;
}

.reset-password .reset-password-field {
    margin-bottom: 15px;
}

.update-password .update-password-field {
    margin-bottom: 15px;
}

.update-password .update-password-button-container {
    margin: 15px;
}

.config-totp .config-totp-button-container {
    margin-top: 15px;
}

.totp .totp-button-container {
    margin-top: 15px;
}

.update-profile .update-profile-field {
    margin-top: 15px;
}

.update-profile .update-profile-button-container {
    margin-top: 20px;
}

.template .language-picker {
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 195px;
}

.template .language-picker .language-icon {
    float: left;
    color: rgba(0, 0, 0, 0.54);
}

.template .language-picker .mdc-select {
    float: right;
    margin-top: -25px;
}

.template .language-picker .mdc-select option {
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}