/* Common */

.element-preview-content {
    --accordion-border-color: #fdffb6;
    --accordion-header-color: #b1b37f;
    --excess-border-color: #ffdac1;
    --excess-header-color: #b39988;
    --normal-border-color: #e3f0cb;
    --normal-header-color: #919982;
    --small-border-color: #c7ceea;
    --small-header-color: #868c9e;
}

.t3-grid-table .t3-grid-table {
    border-spacing: 0;
}

/* Hide "edit all content" icon */
.container-frame + div .t3-page-column-header {
    display: none;
}

/* Hide bottom border of cells because of the above element is hidden */
.container-frame + div .t3-grid-cell {
    border-bottom-width: 0;
}

.container-frame + .t3-grid-container {
    margin-bottom: 0;
}

.container-frame + .t3-grid-table {
    table-layout: fixed;
}

br + .container-frame > .header {
    margin-top: 10px;
}

.container-frame > .header {
    padding: 7px 7px 0;
    text-align: right;
}

.container-frame + .t3-grid-table .t3-page-column-header-icons .icon {
    top: 2px;
}

/* Accordion */
.accordion + table {
    border: 7px solid var(--accordion-border-color);
}

.accordion .header {
    background-color: var(--accordion-border-color);
    color: var(--accordion-header-color);
    margin: 0;
    padding-right: 10px;
}

/* Containers */

.container-frame.accordion,
.container-frame.accordion + .t3-grid-container,
.container_1column_excess + .t3-grid-container {
    padding: 0;
}

.container_1column_excess .header {
    background-color: var(--excess-border-color);
    color: var(--excess-header-color);
    margin: 0;
}

.container_1column_excess + table {
    border: 7px solid var(--excess-border-color);
}

.element-preview-content > [class*="_small"] + table {
    --border-color: var(--small-border-color);
    border: 7px solid var(--small-border-color);
    margin: 0 auto;
    min-width: unset;
    width: 80%;
}

.container-frame[class*="_small"] .header {
    background-color: var(--small-border-color);
    color: var(--small-header-color);
    margin: 0 auto;
    padding-right: 10px;
    width: 80%;
}

.element-preview-content > [class*="_normal"] + table {
    --border-color: var(--normal-border-color);
    border: 7px solid var(--normal-border-color);
    margin: 0 auto;
    min-width: unset;
    width: 90%;
}
.container-frame[class*="_normal"] .header {
    background-color: var(--normal-border-color);
    color: var(--normal-header-color);
    margin: 0 auto;
    padding-right: 10px;
    width: 90%;
}

.accordion .element-preview-content > [class*="_small"],
.accordion .element-preview-content > [class*="_normal"] {
    margin-left: 0;
    padding-left: 25px;
    padding-right: 25px;
    width: 100%;
}

.t3-grid-cell:not(:last-child) {
    border-right: 7px solid var(--border-color);
}