/**
 * Note that these styles are loaded *before* editor styles, so that
 * editor-specific styles using the same selectors will take precedence.
 */

/* todo:: creat admin specific style sheet for block-editor styles */
.components-panel__body .components-color-picker__body {
	padding: 16px 0 12px;
}
.cwb-editor-outline {
	border: 1px dashed rgba(255,255,255,0.6);
}



/* Base max-width utilities for .container-2 inside .content-w-* */
.content-w-100 .container-2 { max-width: 100%; }
.content-w-90  .container-2 { max-width: 90%; }
.content-w-75  .container-2 { max-width: 75%; }
.content-w-66  .container-2 { max-width: 66%; }
.content-w-33  .container-2 { max-width: 33%; }
.content-w-auto .container-2 { max-width: auto; }

/* Responsive max-width utilities (Bootstrap 5 breakpoints) */

/* ≥ 576px (sm) */
@media (min-width: 576px) {
	.content-w-sm-100 .container-2 { max-width: 100%; }
	.content-w-sm-90  .container-2 { max-width: 90%; }
	.content-w-sm-75  .container-2 { max-width: 75%; }
	.content-w-sm-66  .container-2 { max-width: 66%; }
	.content-w-sm-33  .container-2 { max-width: 33%; }
	.content-w-sm-auto .container-2 { max-width: auto; }
}

/* ≥ 768px (md) */
@media (min-width: 768px) {
	.content-w-md-100 .container-2 { max-width: 100%; }
	.content-w-md-90  .container-2 { max-width: 90%; }
	.content-w-md-75  .container-2 { max-width: 75%; }
	.content-w-md-66  .container-2 { max-width: 66%; }
	.content-w-md-33  .container-2 { max-width: 33%; }
	.content-w-md-auto .container-2 { max-width: auto; }
}

/* ≥ 992px (lg) */
@media (min-width: 992px) {
	.content-w-lg-100 .container-2 { max-width: 100%; }
	.content-w-lg-90  .container-2 { max-width: 90%; }
	.content-w-lg-75  .container-2 { max-width: 75%; }
	.content-w-lg-66  .container-2 { max-width: 66%; }
	.content-w-lg-33  .container-2 { max-width: 33%; }
	.content-w-lg-auto .container-2 { max-width: auto; }
}

/* ≥ 1200px (xl) */
@media (min-width: 1200px) {
	.content-w-xl-100 .container-2 { max-width: 100%; }
	.content-w-xl-90  .container-2 { max-width: 90%; }
	.content-w-xl-75  .container-2 { max-width: 75%; }
	.content-w-xl-66  .container-2 { max-width: 66%; }
	.content-w-xl-33  .container-2 { max-width: 33%; }
	.content-w-xl-auto .container-2 { max-width: auto; }
}

/* ≥ 1400px (xxl) */
@media (min-width: 1400px) {
	.content-w-xxl-100 .container-2 { max-width: 100%; }
	.content-w-xxl-90  .container-2 { max-width: 90%; }
	.content-w-xxl-75  .container-2 { max-width: 75%; }
	.content-w-xxl-66  .container-2 { max-width: 66%; }
	.content-w-xxl-33  .container-2 { max-width: 33%; }
	.content-w-xxl-auto .container-2 { max-width: auto; }
}