html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Roboto', 'Noto', sans-serif;
    line-height: 1.5;
    background-color: #eeeeee;
    overflow: hidden;
}

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

.login-card {
    flex: none;
    width: 22em;
    max-width: 22em;
}

.login-form {
    display: flex;
    flex-direction: column;
    padding: 1em;
}

.login-form .mdc-select > .mdc-select__anchor {
    width: 100%;
}

.header {
    padding: 20px;
    border-bottom: 1px solid silver;
    color: white;
    background-color: #494951;
    /* Set our border-radius to match the containing mdc-card otherwise we get square corners.
   * We can not set overflow:hidden on the mdc-card or other parent (which is the normal way of handling this condition)
   * because then the dropdown box of the besgroup field gets clipped at that boundary.
   */
    border-radius: 4px 4px 0 0;
}

.header-title {
    display: flex;
    align-items: center;
}

#version {
    font-size: 0.3em;
}

.licence-name {
    font-size: 0.7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

h1 {
    margin: 0;
}

.button-row {
    display: flex;
    align-items: center;
    padding-top: 8px;
}

.button-row > button {
    height: 48px;
}

#info {
    color: red;
    padding-right: 1em;
    flex: auto;
    text-align: right;
}

.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    grid-gap: 8px;
}

.material-icons {
    color: var(--mdc-theme-text-icon-on-light);
}

.mdc-button--raised:not(:disabled) {
    background-color: #fafafa;
    color: black;
}

.mdc-text-field__input:-webkit-autofill + .mdc-floating-label {
    /* Reset the transform of the label for autofilled fields back to the normal transform otherwise the autofilled
   * text covers part of the label, so its unclear why it does this.
   * Original transform is:
   *
   * transform: translateY(-50%) scale(0.75);
   */
    transform: translateY(-106%) scale(0.75);
}

#besgroup-selected-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdc-list {
    white-space: nowrap;
}

a:visited, a:link, a:active {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.next {
    animation-duration: 0.3s;
    animation-name: next;
    animation-fill-mode: forwards;
}

.before {
    animation-duration: 0.3s;
    animation-name: before;
    animation-fill-mode: forwards;
}

@keyframes next {
    to {
        transform: translateX(-50%);
        opacity: 0;
    }
}

@keyframes before {
    to {
        transform: translateX(50%);
        opacity: 0;
    }
}