/**
 * #.# Editor Styles
 *
 * CSS for just Backend enqueued after style.scss
 * which makes it higher in priority.
 */

/* aligns toolbar properly to left edge*/

:root {
	--red: #cf2e2e;
	--teal: #20c997;
}

.components-popover.wp-block-popover
	.components-popover__content
	.block-editor-block-contextual-toolbar[data-type='c9-blocks/grid'][data-align='full'],
.components-popover.block-editor-block-list__block-popover
	.components-popover__content
	.block-editor-block-contextual-toolbar[data-type='c9-blocks/grid'][data-align='full'] {
	margin-left: -14px;
}

.padding-label,
.margin-label {
	margin-bottom: 0;
}

.padding-top-wrapper,
.padding-bottom-wrapper,
.margin-top-wrapper,
.margin-bottom-wrapper {
	> .components-base-control {
		margin: 0 !important;
		padding: 0 !important;
	}
}

.padding-top-wrapper,
.margin-top-wrapper {
	justify-content: center;
}

.padding-sides-wrapper,
.padding-top-wrapper,
.padding-bottom-wrapper,
.margin-sides-wrapper,
.margin-top-wrapper,
.margin-bottom-wrapper {
	display: flex;
}

.padding .components-range-control__slider,
.margin .components-range-control__slider {
	display: none;
}

.padding .components-range-control__number {
	margin-left: 0;
}

.padding-sides-wrapper,
.margin-sides-wrapper {
	justify-content: space-around;
	align-items: center;
}

.padding-sides-wrapper .padding,
.margin-sides-wrapper .margin {
	width: 80px;
}

.padding-wrapper {
	display: flex;
}

.padding-bottom-wrapper,
.margin-bottom-wrapper {
	justify-content: center;
	margin-top: 5px;
}

.padding-wrapper .components-range-control .components-base-control__field {
	align-items: flex-start;
}

.c9-grid
	.c9-grid-mobile-focal
	> .components-focal-point-picker_position-display-container {
	display: none;
}

/* overrides display table for center aligned images in Twenty Twenty Four */
.c9-grid .wp-block-image.aligncenter div {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* overrides default paragraph margin added to editor styles */
.editor-styles-wrapper .c9-grid p[data-block] {
	margin-top: 0px;
	margin-bottom: 20px;
}

/* for adjusting insertion points to account for select container buttons (grid items only)  */

[data-type='c9-blocks/column-container']
	> .c9-column-container
	.c9-layout-column-wrap-admin
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout
	> .wp-block
	> .block-editor-block-list__insertion-point,
[data-type='c9-blocks/column-container']
	> .c9-column-container
	.c9-column-innner
	.wp-block
	> .block-editor-block-list__insertion-point {
	z-index: 22;
	height: 22px;
	top: 8px;
}

/* for putting block editors inside of column containers on top of insert points so there's no toolbar buttons being covered*/

[data-type='c9-blocks/column-container']
	> .c9-column-container
	.c9-layout-column-wrap-admin
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout
	> .wp-block
	> .wp-block-edit,
[data-type='c9-blocks/column-container']
	> .c9-column-container
	.c9-column-innner
	.wp-block
	> .wp-block-edit {
	z-index: 24;
}

.c9-grid {
	height: 100%;

	> .block-editor-block-list__layout {
		display: -ms-grid;
		display: grid;
		height: 100%;
		justify-content: center;
	}

	> .block-editor-inner-blocks > .block-editor-block-list__layout {
		display: -ms-grid;
		display: grid;
		height: 100%;
	}
}

.wp-block[data-type='c9-blocks/grid'].components-resizable-box__side-handle.components-resizable-box__handle-bottom {
	z-index: 12;
}

.wp-block[data-type='c9-blocks/carousel-slide'] .c9-add-remove-rows {
	bottom: 30px;
}

.c9-add-remove-rows {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -80px;
	z-index: 14;

	.components-button {
		background-color: var(--wp-admin-theme-color);
		color: #fff;
		margin-left: 10px;
		transition: background-color 0.3s ease-in-out;
		padding-left: 25px;
		padding-right: 25px;
		white-space: nowrap;
	}

	.components-button.has-icon {
		padding: 6px 20px;
	}

	.components-button:focus {
		box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px var(--wp-admin-theme-color);
		outline: 1px solid transparent;
		background-color: var(--wp-admin-theme-color-darker-20);
	}

	.components-button:first-child {
		margin-left: 0;
		background-color: var(--red);
	}

	.components-button:nth-child(2) {
		background-color: var(--teal);
	}

	.components-button:hover {
		background-color: var(--wp-admin-theme-color-darker-20);
	}

	> .components-button.components-icon-button {
		margin: 0;
	}

	// padding-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.edit-post-settings-sidebar__panel-block
	.components-panel__body
	.components-base-control:last-child,
.edit-post-settings-sidebar__panel-block
	.components-panel__body
	.components-base-control {
	margin: 0;
}

.components-color-palette {
	margin-top: 10px;
}

.bgSize .components-range-control__slider {
	display: none;
}

.bgSize .components-range-control__number {
	margin-left: 0;
	margin-right: 6px;
}

.bgSize .components-base-control__field {
	justify-content: space-between;
	margin-bottom: 15px !important;
}

.bgSize .components-select-control__input {
	margin-top: 0;
}

.edit-post-sidebar .padding-wrapper input[type='number'] {
	margin-left: 0;
}

.components-panel__body .padding,
.components-panel__body .margin {
	text-align: center;
}

/* backend video background specifics to account for aspect ratio issues with editor */

.editor-styles-wrapper
	.c9-grid-has-video
	> .c9-video-container
	> .c9-embed-container {
	width: 300%;
	left: -100%;
}

.editor-styles-wrapper
	.wp-block[data-type='c9-blocks/grid']
	.c9-grid.c9-grid-has-video {
	overflow: hidden;
}

/****************************************************************************************/
/* C9 Container block edits for backend only
/****************************************************************************************/

//prevents inner columns from aligning center with no min width when added with empty content
.c9-grid .container .wp-block[data-type='c9-blocks/column'],
.c9-grid .container-fluid .wp-block[data-type='c9-blocks/column'],
.c9-grid .container-narrow .wp-block[data-type='c9-blocks/column'] {
	margin-left: auto;
	margin-right: auto;
}

.container .c9-layout-column-wrap-admin .block-editor-inner-blocks,
.container-fluid .c9-layout-column-wrap-admin .block-editor-inner-blocks,
.container-narrow .rc9-layout-column-wrap-admin .block-editor-inner-blocks {
	width: 100%;
}

.container
	.c9-layout-column-wrap-admin
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout,
.container-narrow
	.c9-layout-column-wrap-admin
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout,
.container-fluid
	.c9-layout-column-wrap-admin
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout {
	width: 100%;
	display: flex;
}

.container
	.c9-layout-column-wrap-admin
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout,
.container-narrow
	.c9-layout-column-wrap-admin
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout,
.container-fluid
	.c9-layout-column-wrap-admin
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout {
	flex-grow: 1;
	flex-basis: 0px;
}

.c9-block-layout-column .wp-block[data-align='full'],
.c9-block-layout-column .wp-block[data-align='wide'] {
	margin-left: auto;
	margin-right: auto;
}

/*c9 column container innerblocks set to full width + innerblock full width */

.wp-block[data-type='c9-blocks/grid'] .block-editor-inner-blocks,
.wp-block[data-type='c9-blocks/grid']
	> .c9-grid
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout {
	width: 100%;
	z-index: 10;
	position: relative;
}

/* draggable component adjustments */
.c9-column-container,
.c9-grid.components-resizable-box__container {
	grid-template-rows: 100% 0;
}

.wp-block.container .components-resizable-box__container > span,
.wp-block.container-fluid .components-resizable-box__container > span,
.wp-block.container-narrow .components-resizable-box__container > span,
.wp-block.container.alignwide .components-resizable-box__container > span,
.c9-grid.components-resizable-box__container > span {
	display: none;
}

.wp-block.is-selected .components-resizable-box__container > span,
.wp-block.is-selected .components-resizable-box__container > span > div,
.has-show-handle.c9-grid.components-resizable-box__container > span,
.has-show-handle.c9-grid.components-resizable-box__container > span > div {
	display: block;
	height: 5px;
	min-height: 5px;
	max-height: 5px;
	z-index: 24;
	bottom: 0px;
}

.wp-block.is-selected .components-resizable-box__container div:last-child {
	z-index: 28;
}

/* reset widths from Gutenberg Preview Dropdown that should use classnames but doesnt */
body
	.editor-styles-wrapper[style*='width: 360px']
	.is-root-container
	.container,
body
	.editor-styles-wrapper[style*='width: 360px']
	.is-root-container
	.container-narrow,
body
	.editor-styles-wrapper[style*='width: 360px']
	.is-root-container
	.container.alignwide,
body:not(.folded)
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 360px']
	.wp-block[data-type='c9-blocks/grid']
	.container,
body.folded
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 360px']
	.wp-block[data-type='c9-blocks/grid']
	.container,
body.folded
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 360px']
	.is-root-container
	> .wp-block[data-type='c9-blocks/grid'],
body:not(.folded)
	.edit-post-layout:not(.is-sidebar-opened)
	.editor-styles-wrapper[style*='width: 360px']
	.wp-block[data-type='c9-blocks/grid']
	.container-narrow,
body:not(.folded)
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 360px']
	.wp-block[data-type='c9-blocks/grid']
	.container-narrow,
body.folded
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 360px']
	.wp-block[data-type='c9-blocks/grid']
	.container-narrow,
body.folded
	.edit-post-layout:not(.is-sidebar-opened)
	.editor-styles-wrapper[style*='width: 360px']
	.wp-block[data-type='c9-blocks/grid']
	.container-narrow,
.editor-styles-wrapper[style*='width: 360px']
	.c9-grid
	[data-type='c9-blocks/column-container'].container-narrow
	.wp-block,
body.folded
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 360px']
	.wp-block[data-type='c9-blocks/grid']
	.block-editor-block-list__layout
	> .container[data-align='wide'],
body
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 360px']
	.wp-block[data-type='c9-blocks/grid']
	.block-editor-block-list__layout
	> .container[data-align='wide'],
body
	.edit-post-layout:not(.is-sidebar-opened)
	.editor-styles-wrapper[style*='width: 360px']
	.wp-block[data-type='c9-blocks/grid']
	.block-editor-block-list__layout
	> .container[data-align='wide'] {
	max-width: 360px;
	width: 100%;
}

@media only screen and (min-width: 1200px) {
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 780px']
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 780px']
		.is-root-container
		.wp-block[data-type='c9-blocks/grid'],
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 780px']
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 780px']
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded.post-type-page
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 780px']
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'],
	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper[style*='width: 780px']
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 780px']
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 780px']
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper[style*='width: 780px']
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 360px']
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 360px']
		.is-root-container
		.wp-block[data-type='c9-blocks/grid'],
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 360px']
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 360px']
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded.post-type-page
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 360px']
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'],
	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper[style*='width: 360px']
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 360px']
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 360px']
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper[style*='width: 360px']
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow {
		min-width: auto;
	}

	/* added for wp 6.5*/
	.is-sidebar-opened .c9-grid.p-0 .container-fluid.alignfull {
		width: calc(100vw - 280px);
	}

	.is-sidebar-opened .c9-grid.p-1 .container-fluid.alignfull {
		width: calc(100vw - 0.5rem - 280px);
	}

	.is-sidebar-opened .c9-grid.p-2 .container-fluid.alignfull {
		width: calc(100vw - 1rem - 280px);
	}

	.is-sidebar-opened .c9-grid.p-3 .container-fluid.alignfull {
		width: calc(100vw - 2rem - 280px);
	}

	.is-sidebar-opened .c9-grid.p-4 .container-fluid.alignfull {
		width: calc(100vw - 3rem - 280px);
	}

	.is-sidebar-opened .c9-grid.p-5 .container-fluid.alignfull {
		width: calc(100vw - 6rem - 280px);
	}

	.edit-post-layout:not(.is-sidebar-opened)
		.c9-grid.p-0
		.container-fluid.alignfull {
		width: 100vw;
	}

	.edit-post-layout:not(.is-sidebar-opened)
		.c9-grid.p-1
		.container-fluid.alignfull {
		width: calc(100vw - 0.5rem);
	}

	.edit-post-layout:not(.is-sidebar-opened)
		.c9-grid.p-2
		.container-fluid.alignfull {
		width: calc(100vw - 1rem);
	}

	.edit-post-layout:not(.is-sidebar-opened)
		.c9-grid.p-3
		.container-fluid.alignfull {
		width: calc(100vw - 2rem);
	}

	.edit-post-layout:not(.is-sidebar-opened)
		.c9-grid.p-4
		.container-fluid.alignfull {
		width: calc(100vw - 3rem);
	}

	.edit-post-layout:not(.is-sidebar-opened)
		.c9-grid.p-5
		.container-fluid.alignfull {
		width: calc(100vw - 6rem);
	}
}

body
	.editor-styles-wrapper[style*='width: 360px']
	.c9-grid
	> .block-editor-block-list__layout {
	width: 100%;
	max-width: 360px;
}

body
	.editor-styles-wrapper[style*='width: 360px']
	.is-root-container
	.container-fluid,
body .editor-styles-wrapper[style*='width: 360px'] .is-root-container .c9-grid,
body
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 360px']
	.is-root-container
	.c9-grid {
	width: 360px;
	max-width: 360px;
}

.editor-styles-wrapper[style*='width: 360px'] .is-root-container > * {
	max-width: 320px !important;
}

/* reset widths from Gutenberg Preview Dropdown that should use classnames but doesn't*/
body
	.editor-styles-wrapper[style*='width: 780px']
	.is-root-container
	.container-fluid,
body
	.editor-styles-wrapper[style*='width: 780px']
	.is-root-container
	.container-narrow,
body
	.editor-styles-wrapper[style*='width: 780px']
	.is-root-container
	.container.alignwide,
body .editor-styles-wrapper[style*='width: 780px'] .is-root-container .c9-grid,
body
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 780px']
	.is-root-container
	.c9-grid,
.editor-styles-wrapper[style*='width: 780px']
	.is-root-container
	.c9-grid
	> .block-editor-block-list__layout,
body.folded
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 780px']
	.is-root-container
	> .wp-block[data-type='c9-blocks/grid'],
body:not(.folded)
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 780px']
	.wp-block[data-type='c9-blocks/grid']
	.container,
body.folded
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 780px']
	.wp-block[data-type='c9-blocks/grid']
	.container,
body:not(.folded)
	.edit-post-layout:not(.is-sidebar-opened)
	.editor-styles-wrapper[style*='width: 780px']
	.wp-block[data-type='c9-blocks/grid']
	.container-narrow,
body:not(.folded)
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 780px']
	.wp-block[data-type='c9-blocks/grid']
	.container-narrow,
body.folded
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 780px']
	.wp-block[data-type='c9-blocks/grid']
	.container-narrow,
body.folded
	.edit-post-layout:not(.is-sidebar-opened)
	.editor-styles-wrapper[style*='width: 780px']
	.wp-block[data-type='c9-blocks/grid']
	.container-narrow {
	max-width: 740px;
	width: 740px;
	min-width: auto;
}

.editor-styles-wrapper[style*='width: 780px'] .is-root-container > * {
	max-width: 740px !important;
}

body
	.editor-styles-wrapper[style*='width: 780px']
	.is-root-container
	.container,
body:not(.folded)
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 780px']
	.wp-block[data-type='c9-blocks/grid']
	.container,
body.folded
	.is-sidebar-opened
	.editor-styles-wrapper[style*='width: 780px']
	.wp-block[data-type='c9-blocks/grid']
	.container {
	max-width: 720px;
}

@media only screen and (min-width: 1200px) {
	body.folded.post-type-page
		.is-sidebar-opened
		.editor-styles-wrapper[style*='width: 780px']
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		min-width: auto;
	}
}

@media only screen and (min-width: 768px) {
	// alignwide widths inside c9 grid
	.edit-post-layout:not(.is-sidebar-opened)
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.c9-grid
		.c9-layout-columns-1
		.c9-column-innner
		.wp-block[data-align='wide'] {
		margin-left: -20%;
		margin-right: -20%;
		width: 140%;
		max-width: 100vw;
	}

	// c9-grid internal wp-block alignwide version for when the admin inspector is open
	.is-sidebar-opened
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.c9-grid
		.c9-layout-columns-1
		.c9-column-innner
		.wp-block[data-align='wide'] {
		margin-left: -4%;
		margin-right: -4%;
		width: 108%;
		max-width: calc(100vw - 280px - 116px);
	}
}

@media only screen and (min-width: 1200px) {
	// alignwide widths inside c9 grid
	.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.c9-grid
		.container
		.c9-layout-columns-1
		.c9-column-innner
		.wp-block[data-align='wide'] {
		margin-left: -10%;
		margin-right: -10%;
		width: 120%;
		max-width: 120%;
	}

	// alignwide widths inside c9 grid
	.edit-post-layout:not(.is-sidebar-opened)
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.c9-grid
		.c9-layout-columns-1
		.c9-column-innner
		.wp-block[data-align='wide'] {
		margin-left: -10%;
		margin-right: -10%;
		width: 120%;
		max-width: 1368px;
	}

	// c9-grid internal wp-block alignwide version for when the admin inspector is open
	.is-sidebar-opened
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.c9-grid
		.container
		.c9-layout-columns-1
		.c9-column-innner
		.wp-block[data-align='wide'] {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
	}

	.edit-post-layout:not(.is-sidebar-opened)
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.c9-grid
		.container
		.c9-layout-columns-1
		.c9-column-innner
		.wp-block[data-align='full'] {
		width: calc(100vw - 116px);
		max-width: calc(100vw - 116px);
		margin-left: calc((-100vw + 100% + 116px) / 2);
		margin-right: calc((-100vw + 100% + 116px) / 2);
	}

	.is-sidebar-opened
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.c9-grid
		.container
		.c9-layout-columns-1
		.c9-column-innner
		.wp-block[data-align='full'] {
		width: calc(100vw - 280px);
		max-width: calc(100vw - 280px - 116px);
		margin-left: calc((-100vw + 100% + 280px) / 2);
		margin-right: calc((-100vw + 100% + 280px) / 2);
	}

	.edit-post-layout:not(.is-sidebar-opened)
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.c9-grid
		.container[data-align='wide']
		.c9-layout-columns-1
		.c9-column-innner
		.wp-block[data-align='full'] {
		width: calc(100vw - 116px);
		max-width: calc(100vw - 116px);
		margin-left: calc((-100vw + 100% + 116px) / 2);
		margin-right: calc((-100vw + 100% + 116px) / 2);
	}

	.is-sidebar-opened
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.c9-grid
		.container[data-align='wide']
		.c9-layout-columns-1
		.c9-column-innner
		.wp-block[data-align='full'] {
		width: calc(100vw - 280px);
		max-width: calc(100vw - 280px - 116px);
		margin-left: calc((-100vw + 100% + 280px) / 2);
		margin-right: calc((-100vw + 100% + 280px) / 2);
	}
}

// set z-indexes of columns to prevent toolbars from overlapping under columns
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-6
	[data-type='c9-blocks/column']:nth-child(1),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-5
	[data-type='c9-blocks/column']:nth-child(1),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-4
	[data-type='c9-blocks/column']:nth-child(1),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-3
	[data-type='c9-blocks/column']:nth-child(1),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-2
	[data-type='c9-blocks/column']:nth-child(1) {
	z-index: 25;
}

.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-6
	[data-type='c9-blocks/column']:nth-child(2),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-5
	[data-type='c9-blocks/column']:nth-child(2),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-4
	[data-type='c9-blocks/column']:nth-child(2),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-3
	[data-type='c9-blocks/column']:nth-child(2),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-2
	[data-type='c9-blocks/column']:nth-child(2) {
	z-index: 26;
}

.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-6
	[data-type='c9-blocks/column']:nth-child(3),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-5
	[data-type='c9-blocks/column']:nth-child(3),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-4
	[data-type='c9-blocks/column']:nth-child(3),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-3
	[data-type='c9-blocks/column']:nth-child(3) {
	z-index: 27;
}

.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-6
	[data-type='c9-blocks/column']:nth-child(4),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-5
	[data-type='c9-blocks/column']:nth-child(4),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-4
	[data-type='c9-blocks/column']:nth-child(4) {
	z-index: 28;
}

.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-6
	[data-type='c9-blocks/column']:nth-child(5),
.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-5
	[data-type='c9-blocks/column']:nth-child(5) {
	z-index: 29;
}

.wp-block[data-type='c9-blocks/column-container']
	.c9-layout-columns-6
	[data-type='c9-blocks/column']:nth-child(6) {
	z-index: 30;
}

// set width of editor screen and a max width
.edit-post-layout__content .editor-styles-wrapper {
	width: 94%;
}

// set a z-index for multiple row grids to account for negative margins of editor containers and higher z-index of alignfull/wide
.edit-post-layout
	.editor-styles-wrapper
	.c9-grid
	.container-fluid.wp-block[data-align='full']:not(:first-child),
.edit-post-layout
	.editor-styles-wrapper
	.c9-grid
	.container.wp-block[data-lign='wide']:not(:first-child),
.edit-post-layout .editor-styles-wrapper .c9-grid .container:not(:first-child),
.edit-post-layout
	.editor-styles-wrapper
	.c9-grid
	.container-narrow:not(:first-child) {
	z-index: 22;
}

@media only screen and (min-width: 1px) {
	.c9-grid
		[data-type='c9-blocks/column-container']
		.wp-block[data-type='c9-blocks/column'] {
		width: 100%;
	}

	/* show add/remove rows buttons only when no child continer are selected to make room for editing text in bototm of containers */
	body
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']:not(.is-selected).has-child-selected
		.c9-add-remove-rows {
		display: none;
	}
}

@media only screen and (min-width: 600px) {
	//setting the outer .c9-grid container width for the main blocks window when all admin sidebars are hidden or collapsed
	.edit-post-layout
		.block-editor-block-list__layout
		.wp-block[data-type='c9-blocks/grid'] {
		width: 100%;
		margin-top: 16px;
		margin-bottom: 16px;
	}

	/* WP 5.5 and on */
	.edit-post-layout
		.block-editor-block-list__layout.is-root-container
		.wp-block[data-type='c9-blocks/grid'] {
		margin-top: 28px;
		margin-bottom: 28px;
	}

	.edit-post-layout
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.c9-grid
		.container-narrow {
		width: 960px;
		max-width: 960px;
	}

	/* position visual cues further outside of column containers so they are visibile*/
	.edit-post-layout
		.c9-grid
		[data-type='c9-blocks/column-container']
		> .wp-block-edit:before,
	body:not(.folded)
		.edit-post-layout
		[data-type='c9-blocks/column-container']
		> .wp-block-edit:before,
	body:not(.folded)
		.is-sidebar-opened
		[data-type='c9-blocks/column-container']
		> .wp-block-edit:before,
	.editor-styles-wrapper
		[data-type='c9-blocks/grid']
		.c9-grid
		[data-type='c9-blocks/column-container']
		> .wp-block-edit:before {
		right: -14px;
		left: -14px;
		top: -14px;
		bottom: -14px;
	}
}

@media only screen and (min-width: 768px) {
	/* for some themes that set left setting */
	/* WordPress Twenty Nineteen Theme*/
	.editor-styles-wrapper .c9-grid .container-fluid.wp-block[data-align='full'] {
		left: auto;
	}

	.editor-styles-wrapper .c9-grid .container-narrow,
	.editor-styles-wrapper .c9-grid .container,
	.editor-styles-wrapper .c9-grid .container.alignwide {
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-width: 1200px) {
	/* 2019/2020 theme specific*/
	.editor-styles-wrapper .c9-grid .container-fluid.wp-block[data-align='full'] {
		margin-top: 0px;
		margin-bottom: 0px;
	}

	/* wp 5.5 updates */
	.editor-styles-wrapper
		.is-root-container
		.c9-grid
		.container-fluid
		> .wp-block[data-align='full'] {
		margin-left: 0px;
		margin-right: 0px;
		max-width: 100%;
		width: 100%;
	}

	.editor-styles-wrapper
		.is-root-container
		.c9-grid
		.container-fluid
		> .wp-block[data-align='full']
		.wp-block {
		max-width: 100%;
	}

	/* WP 6.4 updates for twenty twenty four theme */
	//max width of inner containers is 100% of the available space of the .c9-grid
	body
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.c9-grid
		> .block-editor-inner-blocks,
	.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.c9-grid
		> .block-editor-inner-blocks {
		max-width: 100%;
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'],
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'] {
		max-width: 100%;
		width: 100%;
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.is-root-container.is-layout-constrained
		.wp-block[data-type='c9-blocks/grid'] {
		max-width: 100vw;
		width: 100vw;
	}

	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'] {
		max-width: calc(100vw - 280px);
		width: calc(100vw - 280px);
	}

	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'] {
		max-width: calc(100vw - 330px);
		width: calc(100vw - 330px);
	}

	body:not(.folded)
		.is-sidebar-opened
		.is-root-container.is-layout-constrained
		> .wp-block[data-type='c9-blocks/grid']:where(
			:not(.alignleft):not(.alignright):not(.alignfull)
		) {
		margin-left: calc((-100vw + 100% + 280px) / 2) !important;
		margin-right: calc((-100vw + 100% + 280px) / 2) !important;
	}

	// compensate for width of inspector and the padding added by the styles wrapper
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'] {
		max-width: calc(100vw - 280px - 116px + 16px);
		width: 100vw;
	}

	// WP 5.5 updates
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.is-root-container
		.wp-block[data-type='c9-blocks/grid'] {
		max-width: calc(100vw - 280px);
		width: calc(100vw - 280px);
	}

	body.folded.post-type-page
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'] {
		width: calc(100vw - 280px);
	}

	body.folded.post-type-page
		.is-sidebar-opened
		.editor-styles-wrapper
		.is-root-container
		.wp-block[data-type='c9-blocks/grid'] {
		max-width: calc(100vw - 280px);
	}

	// post single has narrower container
	body.folded.post-type-post
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'] {
		width: 100vw;
		max-width: calc(100vw - 280px);
		margin-left: calc(((-100vw + 280px) + 100%) / 2);
		margin-left: calc(((-100vw + 280px) + 100%) / 2);
	}

	/* c9 grid on blog post with wide container width unsetting additional align wide class*/
	body.folded.post-type-post
		.editor-styles-wrapper
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide']
		> .wp-block[data-align='wide'] {
		margin-left: auto;
		margin-right: auto;
		width: auto;
	}

	/* c9 grid on blog post with full container width unsetting additional align full class*/
	body.folded.post-type-post
		.editor-styles-wrapper
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='full']
		> .wp-block[data-align='full'] {
		margin-left: auto;
		margin-right: auto;
		width: auto;
	}

	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'] {
		width: calc(100vw - 116px);
		max-width: calc(100vw - 116px);
		margin-left: calc((-100vw + 100% + 116px) / 2);
		margin-right: calc((-100vw + 100% + 116px) / 2);
	}

	// WP 5.5 update
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.is-root-container
		.wp-block[data-type='c9-blocks/grid'] {
		margin-left: 0;
		margin-right: 0;
		width: 100vw;
		max-width: 100vw;
	}

	// Narrow container width with all 4 editing screen variations
	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow {
		width: 100%;
		max-width: 960px;
		min-width: 960px;
	}

	//normal container width
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.c9-grid
		> .block-editor-inner-blocks
		> .block-editor-block-list__layout,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.c9-grid
		> .block-editor-inner-blocks
		> .block-editor-block-list__layout {
		min-width: 100%;
		width: 100%;
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container {
		max-width: 100%;
		width: 1140px;
	}

	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container {
		max-width: 100%;
		min-width: 1000px;
	}

	//for some instances where containers live inside other containers like image carousels
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow
		.container,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow
		.container {
		min-width: auto;
	}

	body.folded.post-type-post
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container {
		width: 1140px;
		max-width: calc(100vw - 280px);
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide'],
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide'] {
		width: 120%;
		margin-left: 0;
		margin-right: 0;
		max-width: 1368px;
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide']
		> .wp-block[data-align='wide'],
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide']
		> .wp-block[data-align='wide'] {
		max-width: 1368px;
	}

	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide'],
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide'] {
		width: 100%;
	}

	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'],
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		margin-left: -44px;
		margin-right: -44px;
	}

	/* WP 5.5 updates */
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'],
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		margin-left: 0px;
		margin-right: 0px;
	}

	// Admin open. Inspector open.
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		width: 100%;
	}

	// Admin closed. Inspector open.
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		width: calc(100vw - 280px - 6%);
	}

	/* WP 5.5 update */
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.is-root-container
		> .wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		max-width: calc(100vw - 280px);
		width: calc(100vw - 280px);
	}

	/* WP 5.5 updates */
	// Admin closed. Inspector open.
	body.folded.post-type-page
		.is-sidebar-opened
		.editor-styles-wrapper
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		max-width: calc(100vw - 280px);
		min-width: 1100px; //added to account for strange bug that doesnt make width 100% inside a grid
		width: 100%;
	}

	// Admin open. Inspector closed.
	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		max-width: calc(100vw - 6%);
		width: 100%;
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'],
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		margin-left: calc((-100vw + 106% + 116px) / 2);
		margin-right: calc((-100vw + 106% + 116px) / 2);
	}

	// Admin closed. Inspector closed.
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		max-width: calc(100vw - 116px);
		width: calc(100vw - 6%);
	}
}

@media only screen and (min-width: 1500px) {
	// compensate for width of inspector, editor-style-wrapper margins, and negative margins form pseudo elements
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'] {
		max-width: calc(100vw - 280px - 116px - 12px);
		width: calc(100vw - 280px - 116px - 12px);
		margin-left: calc((-100vw + 280px + 100%) / 2);
		margin-right: calc((-100vw + 280px + 100%) / 2);
	}

	/* wp 6.4.3 WP 2024 theme updates */
	body.post-type-page
		.is-sidebar-opened
		.editor-styles-wrapper
		.is-root-container
		> .wp-block[data-type='c9-blocks/grid']:not(.alignwide):not(.alignfull) {
		max-width: calc(100vw - 280px);
	}

	/* WP 5.5 updates */
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.is-root-container
		> .wp-block[data-type='c9-blocks/grid'] {
		margin-left: 0px;
		margin-right: 0px;
		width: calc(100vw - 280px);
		max-width: calc(100vw - 280px);
	}

	/* WP 5.5 updates */
	// Admin closed. Inspector open.
	body.folded.post-type-page
		.is-sidebar-opened
		.editor-styles-wrapper
		.is-root-container
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		max-width: calc(100vw - 280px);
		min-width: 1100px; //added to account for strange bug that doesnt make width 100% inside a grid
		width: calc(100vw - 280px);
	}

	/* WP 6.4 twenty twenty four theme update */
	body.folded
		.is-sidebar-opened
		.is-root-container.is-layout-constrained
		> .wp-block[data-type='c9-blocks/grid']:where(
			:not(.alignleft):not(.alignright):not(.alignfull)
		) {
		margin-left: calc((-100vw + 100% + 317px) / 2) !important;
		margin-right: calc((-100vw + 100% + 317px) / 2) !important;
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'],
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.block-editor-editor-skeleton__content
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		margin-left: calc((-100vw + 100% + 116px) / 2);
		margin-right: calc((-100vw + 100% + 116px) / 2);
	}

	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid'] {
		margin-left: 0;
		margin-right: 0;
		width: 100vw;
		max-width: 100vw;
	}

	.c9-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
		justify-content: center;
	}

	// Narrow container width with all 4 editing screen variations
	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow,
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-narrow {
		width: 100%;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container {
		max-width: 100%;
		width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}

	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container:not(.carousel.slide):not([data-type='c9-blocks/post-grid']),
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container:not(.carousel.slide):not([data-type='c9-blocks/post-grid']) {
		width: 1140px;
		max-width: 1140px;
		margin-left: 0;
		margin-right: 0;
	}

	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container:not(.carousel.slide)
		.container,
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container:not(.carousel.slide)
		.container,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid:not(.carousel.slide)
		.container,
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid:not(.carousel.slide)
		.container {
		margin-left: auto;
		margin-right: auto;
	}

	/* c9 grid on blog post with default container width */
	.post-type-post
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container {
		width: 1140px;
		max-width: calc(100vw - 280px - 116px - 6%);
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide'],
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide'] {
		width: 120%;
		max-width: 1368px;
		margin-left: auto;
		margin-right: auto;
	}

	/* c9 grid on blog post with default container width */
	.post-type-post
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide'] {
		width: 120%;
		max-width: 1368px;
		margin-left: -10%;
		margin-right: -10%;
	}

	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide'],
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container[data-align='wide'] {
		width: 1368px;
		max-width: 1368px;
	}

	// Admin open. Inspector open.
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		width: calc(100vw - 280px - 7%);
		min-width: 1200px;
	}

	// Admin closed. Inspector open.
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'],
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		max-width: 100vw;
		min-width: 1200px;
		width: calc((100vw * 0.96) - 280px - 18px);
		margin-left: -58px;
		margin-right: -58px;
	}

	// Admin open. Inspector closed.
	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		max-width: none;
		min-width: 1200px;
		width: 100%;
	}

	// Admin closed. Inspector closed.
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		max-width: none;
		min-width: 1200px;
		width: calc(100vw - 7%);
	}

	body:not(.folded)
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'],
	body.folded
		.edit-post-layout:not(.is-sidebar-opened)
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container-fluid[data-align='full'] {
		margin-left: calc((-100vw + 107%) / 2);
		margin-right: calc((-100vw + 107%) / 2);
	}
}

@media only screen and (min-width: 1600px) {
	body:not(.folded)
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container,
	body.folded
		.is-sidebar-opened
		.editor-styles-wrapper
		.wp-block[data-type='c9-blocks/grid']
		.container {
		margin-left: auto;
		margin-right: auto;
	}
}

/****************************************************************************************/