body {
    width: 100vw;
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../img/background.jpg');
    background-size: cover;
    background-position: center;
}

.wrapper,
.wrapper-card__header,
.wrapper-card__content {
    display: flex;
    flex-direction: column;
}

.wrapper {
    flex-basis: 450px;
}

.wrapper-card {
    padding: 16px;
}

.wrapper-card__header + .wrapper-card__content,
.wrapper-card__content + .wrapper-card__actions,
.wrapper-card__header + .wrapper-card__actions {
    margin-top: 32px;
}

.wrapper-card__header {
    align-items: center;
    text-align: center;
}

.wrapper-card .empolis-logo {
    height: 32px;
    margin: 16px 0 24px 0;
}

.wrapper-card__header .title,
.wrapper-card__header .subtitle {
    margin: 8px 0 0 0;
    color: #666666;
}

.wrapper-card .mdc-text-field:not(:last-child) {
    margin-bottom: 24px;
}

.wrapper-card .error-msg {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    color: #b00020;
    border: #b00020 solid 1px;
    border-radius: 4px;
}

.wrapper-card__actions .mdc-button.fullWidth {
    width: 100%
}

.footer-line {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.footer-line .footer-line__item {
    margin-left: 16px;
    color: #666666;
}

:root {
  --mdc-theme-primary: #0099d4;
  --mdc-theme-secondary: #0099d4;
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
     color: #0099d4 !important;
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #b00020 !important;
}

input:-internal-autofill-selected {
    background-color: #ffffff !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s;
}


.margin-top-32 {
    margin-top: 32px;
}

.margin-bottom-24 {
    margin-bottom: 24px;
}