.size-dlg {
    height: 60%;
    max-height: 500px;
    min-height: 250px;

    width: 80%;
    max-width: 800px;
    min-width: 175px;
}

.size-dlg-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 0;
}

.size-dlg-image {
    border: 1px solid var(--theme-dark-shadow-color);
    border-radius: var(--theme-border-radius);
    max-width: 200px;
    height: 100%;
    padding: 5px;
}

.size-dlg-grid {
    display: grid;
    grid-auto-rows: 30px;
    border: 1px solid var(--theme-dark-shadow-color);
    border-radius: var(--theme-border-radius);
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.size-dlg-grid-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 2px 5px;
    background-color: var(--theme-light-base-color);

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    justify-content: center;
}

.size-dlg-grid-header > label {
    font-weight: var(--font-weight-bold);
    font-variant: all-small-caps;
    font-size: var(--font-size-xl);
}

.size-dlg-grid-element {
    display: flex;
    padding: 2px 5px;
    background-color: var(--theme-light-base-color);
    border-bottom: 1px solid var(--theme-light-shadow-color);
    font-size: var(--font-size-l);

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    justify-content: center;
}

.size-dlg-grid-element > label {}

.size-dlg-close {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
}

.size-dlg-link-container {
    margin: 5px 0;
}

.size-dlg-link-container > a {
    font-size: var(--font-size-l);
    text-decoration: underline;
}

@media only screen and (max-width: 800px) {
    .size-dlg {
        height: unset;
        max-height: unset;
        width: unset;
    }
    .size-dlg-container {
        flex-wrap: wrap;
    }
}