.loading-background {
    background: url('/images/loading.gif') no-repeat center/3rem;
}

.v-progress {
    /*
        the default `position: relative` bumps the body content down by the
        height of the progress bar (typically 4px), resulting in the entire
        cart having a (useless) vertical scrollbar that scrolls only ~4px.
        `position: fixed` with a `z-index` corrects this behavior.
     */
    position: fixed;
    z-index: 1;
    top: 0;
}

*, *:before, *:after {
    box-sizing: border-box; /* SERENITY NOW! */
}

body, .v-page-content {
    background: #f6f6f6;
}

a {
    color: var(--mdc-theme-primary, LinkText);
}

#event_submission_themed_background {
    position: absolute;
    width: 100%;
    user-select: none;
    pointer-events: none;
}

.one-column-layout {
    background: #f6f6f6;
}

.submission-form--top {
    background: black;
    color: white;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--v-padding3);
}

.submission-form--top .v-typography {
    font-weight: 700;
    font-size: 28px;
    color: white;
}

.submission-form--top .v-content {
    gap: var(--v-padding2);
}

.submission-form--top .v-button {
    background: var(--mdc-theme-primary4, #F6556E);
    color: var(--mdc-theme-secondary, #00ACC1);
}

.submission-form--middle {
    background: white;
}

.submission-form--bottom {
    background: #F0F1EC;
    justify-content: flex-end;
    gap: var(--v-padding3);
}

.submission-mini-card {
    gap: var(--v-padding3);
}

.submission-mini-card--image {
    max-width: 38%;
}

.submission-mini-card img {
    border-radius: 12px;
    border: 2px solid #8D8D8D;
    height: auto;
}

.submission-mini-card .published-state {
    left: -6px;
    border-radius: 8px;
    gap: var(--v-padding1);
    padding: 10px 12px;
}

.submission-mini-card .published-state i {
    font-size: 1em;
}

@media (min-width: 480px) {
    :root {
        --top-gap: var(--v-padding5);
    }

    main {
        padding-bottom: calc(2 * var(--top-gap));
    }

    .one-column-layout,
    .two-column-layout {
        position: relative;
        top: var(--top-gap);
        margin: 0 auto;
    }

    .one-column-layout {
        max-width: 50em;
    }

    .two-column-layout {
        max-width: 970px;
    }

    .one-column-layout.layout--wide,
    .two-column-layout.layout--wide {
        max-width: 1390px;
    }

    .one-column-layout,
    .two-column-layout .v-card {
        border-radius: 12px;
        box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
        overflow-x: hidden;
    }
}