:root{
	--column-wrap:wrap;
	--section-padding-top: var(--section-padding);
	--section-padding-bottom: var(--section-padding);
}
.column-widget{

	display: block;
	width:auto;	
	clear: both;
	position: relative;	
	padding:var(--section-padding-top) 0 var(--section-padding-bottom);

	&:has(+ *:not(.column-widget,.include-widget, section)){
		padding-bottom:0;
	}
}

/* BEGIN: Overrides to support existing website styles */
*:not(.include-widget,:has(.backdrop)) + .column-widget{
	padding-top: 0;
}
section .column-widget:first-child{
	padding-top:0;
}
section .column-widget:last-child{
	padding-bottom:0;
}
[class *= "include-header"] .column-widget{
	padding:0;
}
/* END */

.column-widget:has(.backdrop),
section .column-widget:has(.backdrop){
	padding:var(--section-padding-top) 0 var(--section-padding-bottom);
}

.column-wrapper{
	width:100%;
	max-width: var(--wrapper-width);
	padding:0 var(--wrapper-padding);
	position: relative;
	display: flex;
	/* flex-wrap: wrap; */
	height:100%;
	flex-wrap: nowrap;
	gap: var(--column-gap);
}

.column-widget .column{
	display: block;
	padding:var(--column-padding);
	width:100%;
	max-width:100%;
	position: relative;
	min-height: 50px;
	gap: max(var(--column-gap), var(--item-gap));
	flex-wrap: nowrap;
}

.column-widget .backdrop,
.column-widget .backdrop .backdrop-filter,
.column-widget .backdrop .backdrop-overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	top:0;
	left:0;
}
.column-widget .backdrop.fit-viewport{
	width: 100vw;
	margin-left: -50vw;
	left: 50%;
}

.column-widget.two-columns .column{
	width:50%;
}
.column-widget.three-columns .column{
	width:33.3%;
}
.column-widget.four-columns .column{
	width:25%;
}

.wrapper .wrapper.column-wrapper{
	padding:0;
	width:100%;
}

.column-widget > .module-intro-text{
	
	position: relative;
	> div{
		margin-bottom:var(--column-gap);
		padding:0 var(--column-padding);
	}

}
.column-widget .module-outro-text{
	
	position: relative;
	> div{
		margin-top:var(--column-gap);
		padding:0 var(--column-padding);
	}

}


[data-mode="wireframe"] .ui-resizable-e{
	margin:0px !important;
	padding:0px !important;
	border:none !important;
}

[data-mode="wireframe"] .column-widget:hover .ui-resizable-e{
	cursor: e-resize;
	cursor: col-resize;
	width: 8px;
	right: calc((-1 * (var(--column-gap)/2)) - 4px);
	top: 0px;
	height: 100%;
	background: rgba(189, 219, 255, 0.75);
	border-radius: 10px;
	box-sizing: border-box;
	border: 1px dashed rgba(51, 142, 255, 0.5) !important;
}

[data-mode="wireframe"] .column-widget .column:before{
	/* background: rgba(136, 136, 136, 0.09); */
	border-radius: 5px;
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	bottom: 5px;
	right: 5px;

	max-width: 100%;
	max-height: 100%;
	border: 1px dashed rgba(51, 142, 255, 0.55);
	box-sizing: border-box;
}

[data-mode="wireframe"] .column:last-child .ui-resizable-e{
	display: none !important;
}

[data-mode="wireframe"] .column-widget.elementFocusParent .column:before{
	opacity: 0.35;
}

/* [data-editor="template"] .column-widget .column{
	height: 200px;
	overflow: hidden;
} */

@media all and (max-width:680px) {
	.column-wrapper{flex-wrap: var(--column-wrap);}

	.column-widget.two-columns .column,
	.column-widget.three-columns .column,
	.column-widget.four-columns .column{	
		width: calc(50% - ((var(--column-gap)) * 0.5)) !important;
		/* width:50% !important; */
		display: block;
	}
	.column-widget .column.empty{
		display: none;
		width: 0;
	}
	
	[data-mode="wireframe"] .column-widget:hover .ui-resizable-e {
		display: none;
	}
}


@media all and (max-width:512px) {
	.column-wrapper{flex-wrap: var(--column-wrap); }

	.column-widget .column,
	.column-widget.two-columns .column,
	.column-widget.three-columns .column,
	.column-widget.four-columns .column{
		width:100% !important;
		display: block;
		/* flex-wrap: wrap; */
	}
	
	[data-mode="wireframe"] .column-widget:hover .ui-resizable-e {
		display: none !important;
	}
}



.column-widget.flexit .column-break{
	display: none !important;
}