﻿.ºlayout{
	display: grid;
	width: 100%;
	margin-bottom: var(--size-2);
	grid-gap: var(--size-1) var(--size-2);
	grid-auto-rows: min-content;
	box-sizing: border-box;
}
	.ºlayout > .layout-group{
		display: grid;
		grid-gap: inherit;
		grid-column: 1/-1;
	}
	.ºlayout > .layout-break,
	.ºlayout > .layout-space{
		grid-column: 1/-1;
		margin: var(--size-2) 0 0;
	}
	.ºlayout > .layout-space.control{
		margin: 0;
		height: var(--control-height)
	}
	.ºlayout > .layout-break{
		margin: var(--size-2) 0;
	}

	main .ºlayout:last-child,
	footer .ºlayout:last-child,
	.ºwindow  .ºlayout:last-child{
		margin-bottom: 0;
	}
	
	footer .ºlayout{
		padding: var(--size-3) var(--size-4) var(--size-3) var(--size-3);
	}

.ºlayout.form{
	--padding-top: calc(var(--size-4) - var(--size-1) / 2);
	--margin-top: calc(var(--padding-top) * -1);
	--margin-h: calc(var(--size-4) * -1);
	--padding: var(--padding-top) var(--size-4);
	padding: var(--padding);
	background: #FFF;
	border-radius: var(--control-border-radius-2);
}
	.ºlayout.form > .layout-break{
		border-bottom: 1px solid var(--control-border-color-2);
	}
	.ºlayout.form .ºlabel{
		padding-right: var(--size-3);
	}
	
	.ºlayout.form > .layout-header{
		grid-column: 1/-1;
		margin: var(--margin-top) var(--margin-h) var(--size-3);
		padding: var(--size-1) var(--size-3);
		height: var(--size-4);
		border-bottom: 1px solid var(--control-border-color-2);
	}
		.ºlayout.form > .layout-header .text-size{
			font-weight: 400;
		}	
	
.ºlayout > .ºlayout{
	padding: 0;
}
	.ºlayout > .ºlayout.form{
		grid-column: auto;
		margin-bottom: var(--size-2);
		padding: var(--padding);
	}
	.ºlayout.form > .ºlayout{
		margin-bottom: 0;
	}
	
.ºlayout.gap2{
	grid-gap: var(--size-1) var(--size-1);
}
.ºlayout.form.legend{
	padding: var(--size-1) var(--size-4);
}
.ºlayout.form.legend.fixbottom{
	position: sticky;
    bottom: 0;
	border-top: solid 4px var(--bg-main);
}
#content > main:has(.selected .ºlayout.form.legend.fixbottom) {
	padding: var(--size-4) calc(var(--size-4) + 10px) 0px var(--size-4);
}

.ºlayout.error{
	position: relative;
}

.ºlayout.compact > .layout-header{
	margin-bottom: 0;
}
	.ºlayout.compact .ºgrid.view-table > .container > .body{
		min-height: auto;
	}
	.ºlayout.compact > .ºbutton{
		margin-top: var(--size-2);
	}
.ºlayout.only-columns{
	grid-gap: 0 var(--size-2);
}

.ºlayout.centered{
	width: 60%;
	min-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.ºlayout.paragraph *{
	white-space: break-spaces !important;
}

.ºlayout.padding2{
	padding: var(--size-2);
}
.ºlayout.padding3{
	padding: var(--size-3);
}
.ºlayout.padding4{
	padding: var(--size-4);
}
	.ºlayout.vpadding4{
		padding: var(--size-4) 0;
	}