.list-with-actions {
    display: flex;
    flex-direction: column
}

.list-container {
    flex-basis: auto;
    flex-shrink: 0;
    flex-grow: 1;
}

action-bar.inline-actions > span {
    margin-right: var(--lumo-space-s);
}

action-bar {
    align-items: center;
}

.dialog-header {
    padding: .5rem;
    background-color: #0188AE;
    color: #ffffff;
}

.dialog-footer {
    padding: .5rem;
}

.dialog-body {
    padding: .5rem;
}

.card-header {
    padding: .5rem;
    background-color: #0188AE;
    color: #ffffff;
}

.card-footer {
    padding: .5rem;
}

.card-body {
    padding: .5rem;
}

.btn-group {
    margin-right: var(--lumo-space-s);
}

.btn-group:last-of-type {
    margin-right: 0;
}

.btn-group vaadin-button:not(:first-child) {
    margin-left: var(--lumo-space-xs);
}

.card-holder {
    padding: .5rem;
    margin-bottom: 8px;
}

.slide-content {
    margin: 0;
}

.page-title {
    text-align: center;
    font-size: 1.5rem;
    width: 100%;
}

.page-content {
    text-align: center;
    width: 100%;
}

.section-title {
    font-weight: 700;
}

.half-width {
    width: 50%;
}

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.file-list-item .delete-action {
    color: red;
    margin-right: 0.5rem;
    cursor: pointer;
}

.file-list-item .file-size {
    margin-right: 0.5rem;
}


.login-overlay {
    overflow: hidden;
    display: inline-block;
}

.login-overlay form {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.login-overlay .error-message {
    position: relative;
}

/* Olyan elem, amin mindkét class szerepel */
/* Dialógus alján lévő gombsor felső térköz eltávolítása */
.btn-group.dialog-footer {
    padding-top: 0;
}

/* button-grou a dialógus alján, amin olyan gomb van, aminek to-right a class-a */
.btn-group.dialog-footer vaadin-button.to-right {
    margin-left: auto;
}


/* Message táblázat ne lógjon ki a dialógusból */
.dialog-body .message-container {
    margin-left: 0;
    margin-right: 0;
}

/* Ikon átméretezése message-container ben */
.message-container .dialog-icon {
    width: 100%;
    height: 100%;
}

html {
    color: var(--lumo-body-text-color);
    background-color: var(--lumo-base-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--lumo-header-text-color);
}

a {
    color: var(--lumo-primary-text-color);
}

blockquote {
    color: var(--lumo-secondary-text-color);
}

code, pre {
    background-color: var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-m);
}

html {
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size, var(--lumo-font-size-m));
    line-height: var(--lumo-line-height-m);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.login-overlay {
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size, var(--lumo-font-size-m));
    line-height: var(--lumo-line-height-m);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: var(--lumo-line-height-xs);
    margin-top: 1.25em;
}

h1 {
    font-size: var(--lumo-font-size-xxxl);
    margin-bottom: 0.75em;
}

h2 {
    font-size: var(--lumo-font-size-xxl);
    margin-bottom: 0.5em;
}

h3 {
    font-size: var(--lumo-font-size-xl);
    margin-bottom: 0.5em;
}

h4 {
    font-size: var(--lumo-font-size-l);
    margin-bottom: 0.5em;
}

h5 {
    font-size: var(--lumo-font-size-m);
    margin-bottom: 0.25em;
}

h6 {
    font-size: var(--lumo-font-size-xs);
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

p, blockquote {
    margin-top: 0.5em;
    margin-bottom: 0.75em;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

hr {
    display: block;
    align-self: stretch;
    height: 1px;
    border: 0;
    padding: 0;
    margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
    background-color: var(--lumo-contrast-10pct);
}

blockquote {
    border-left: 2px solid var(--lumo-contrast-30pct);
}

b, strong {
    font-weight: 600;
}


.login-overlay {
    max-width: calc(var(--lumo-size-m) * 10);
    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
}

.login-overlay form {
    padding: var(--lumo-space-m);
}

.login-overlay .form-title {
    margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
}

.login-overlay .brand {
    box-sizing: border-box;
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.login-overlay .brand {
    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);
}

.login-overlay .brand h1 {
    color: inherit;
    margin: 0;
}

.login-overlay #submitbutton {
    margin-top: var(--lumo-space-m);
}

.login-overlay .error-message {
    background-color: var(--lumo-error-color-10pct);
    padding: var(--lumo-space-m);
    border-radius: var(--lumo-border-radius);
    margin-top: var(--lumo-space-m);
    margin-bottom: var(--lumo-space-s);
    color: var(--lumo-error-text-color);
}

.login-overlay .error-message {
    padding-left: var(--lumo-size-m);
}

.login-overlay .error-message::before {
    content: var(--lumo-icons-error);
    font-family: lumo-icons;
    font-size: var(--lumo-icon-size-m);
    position: absolute;
    width: var(--lumo-size-m);
    height: 1em;
    line-height: 1;
    text-align: center;
}

.login-overlay .error-message::before {
    margin-left: calc(var(--lumo-size-m) * -0.95);
}

.login-overlay .error-message-title {
    margin: 0 0 0.25em;
    color: inherit;
}

.login-overlay .error-message-description {
    font-size: var(--lumo-font-size-s);
    line-height: var(--lumo-line-height-s);
    margin: 0;
    opacity: 0.9;
}