html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.form-signin {
    max-width: 330px;
    padding: 1em 1em 0 1em;
    margin: auto;
    /* background-color: var(--color-background-darker); */
}

/*
 * Logo;
 */

.form-signin  form > a {
    text-align: center;
    display: block;
    padding-bottom: 2em;
}

.form-signin form > a > img { width: 80%; }

/*
 * FORM Title
 */

.form-signin h3 {
    text-align: center;
    margin: 0 0 1em 0;
}



/*
 * Language Selection
 */

.language-menu {
    height: 2em;
    text-align:center;
}

.language-menu > a {
    display: inline-block;
    padding: 0px;
}

.language-menu-flag {
    margin: 0 0.5rem;
    height: 1.7rem;
    width: 1.7rem;
}

/*
 * Username & Password
 */

.form-signin .form-data {
    background-color: var(--color-background-darker);
    border-radius: 1em;
    margin: 0.5em 0;
    padding: 0.5em;
}

.form-signin .form-data label {
    margin-left: 1em;
    margin-bottom: .5em;
}

.form-signin i {
    margin-right: 1em;
}

.form-signin input[type="text"],
.form-signin input[type="password"]
{
    border-radius: 1em;
    padding: 0 2em;
    background-color: var(--color-background-darker) !important;
    width: 100%;
    border:none;
    -webkit-appearance: none;
}

/* icon for input fields */

.form-data {
    position: relative;
}

.form-data.user-input:after {
    position: absolute;
    transform: translate(0,0%);
    left: 1.25em;
    bottom: .75em;
    font-family: "Font Awesome 6 Free";
    font: var(--fa-font-solid);
    content: "\f007";
}

.form-data.password-input:after {
    position: absolute;
    transform: translate(0,0%);
    left: 1.25em;
    bottom: .75em;
    font-family: "Font Awesome 6 Free";
    font: var(--fa-font-solid);
    content: "\f023";
}

.form-data.login-token-input:after {
    position: absolute;
    transform: translate(0,0%);
    left: 1.25em;
    bottom: .75em;
    font-family: "Font Awesome 6 Free";
    font: var(--fa-font-solid);
    content: "\f132";
}


.form-signin input:focus-visible {
    outline: none;
}

/* remove chrome autofill style (HACK, chrome CSS has !important to prevent override) */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 40px var(--color-background-darker) inset !important;
}

/* remove chrome autofill style */
input:autofill{
  background-color: var(--color-background-darker)
  /* -webkit-box-shadow: 0 0 0 40px var(--color-background-darker) inset !important; */
}

/*
 * Remember me
 */

.form-signin .form-checkbox {
    text-align: center;
    margin: 1em;
}

.form-signin .form-checkbox input[type="checkbox"] {
    font-weight: 400;
     margin-right:.5em;
}

/*
 * Submit
 */

.form-signin button {
    font-weight: bold;
    padding: .5em;
    border-radius: 1em;
    margin: auto;
    text-align: center;
    width: 100%;
    color: var(--color-header-button-txt-on);
    background-color: var(--color-header-button-bg-on);
    border: none;
}

.form-signin button:hover {

}

/*
 * Password Recovery
 */

.form-signin .password-reset-link {
    text-decoration: none;
    margin: 1em 0;
    font-size: .75em;
    color: var(--color-text-main);
}


/*
 * Copyright
 */

.copyright {
    text-align: center;
}