.change-password {
    display: flex;
    align-items: center;
    justify-content: center;
}

section {
    width: calc(var(--lumo-size-xl) * 10);
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 2.5rem;
    box-shadow: var(--lumo-box-shadow-s);
    margin: var(--lumo-space-s);
    height: auto;
    /*width: calc(var(--lumo-size-m) * 10);*/
    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
}

section #brand {
    box-sizing: border-box;
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
    background-color: var(--lumo-primary-color);
    color: var(--lumo-primary-contrast-color);
    min-height: calc(var(--lumo-size-m) * 5);

}

section #brand h1 {
    color: inherit;
    margin: 0;
    font-size: var(--lumo-font-size-xxxl);
}

section #brand p {
    line-height: var(--lumo-line-height-s);
    color: var(--lumo-tint-70pct);
    margin-bottom: 0;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

section #form {
    padding: var(--lumo-space-l);
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

}

section #form vaadin-button {
    width: calc(var(--lumo-size-xl) * 5);
    margin: var(--lumo-space-m) auto;
}

section #form h2 {
    margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
    color: var(--lumo-header-text-color);
    line-height: var(--lumo-line-height-xs);
    margin-block: 0;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
