/*##############################################################################
####    layout    ############################################################*/
.lrow {
	display: flex;
	flex-direction: row;
	overflow: hidden;  /* was disabled because of how it is compressing first row in new thread editor, required for proper scroll panel support */
}
.lrow.noCompress {
	overflow: visible;
}

.lcol {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.lcol.noCompress {
	overflow: visible;
}

.lmax400 {
	max-width: 400px;
}

.lmax500 {
	max-width: 500px;
}

.lmaxWidth {
	max-width: 100%;
}

.lgrow10 {
	flex-grow: 10;
}

.lgrow20 {
	flex-grow: 20;
}

.lgrow30 {
	flex-grow: 30;
}

.lgrow40 {
	flex-grow: 40;
}

.lgrow50 {
	flex-grow: 50;
}

.lgrow60 {
	flex-grow: 60;
}

.lgrow70 {
	flex-grow: 70;
}

.lgrow80 {
	flex-grow: 80;
}

.lgrow90 {
	flex-grow: 90;
}

.lgrow100 {
	flex-grow: 100;
}

.lshrink0 {
	flex-shrink: 0;
}

.lgs {
	flex-grow: 100;
	flex-shrink: 100;
	overflow: auto;
}
.lgs.noOverflow {
	overflow: initial;
}

.lequalProportion {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0%;
}

.lpadSmall {
	gap: var(--spacing-small);
}

.lpadSmaller {
	gap: var(--spacing-smaller);
}

.lpadNormal {
	gap: var(--spacing-normal);
	row-gap: var(--spacing-normal);
	column-gap: var(--spacing-normal);
}

.lpadLarger {
	gap: var(--spacing-larger);
}

.lpadLarge {
	gap: var(--spacing-large);
}

.lpad50 {
	gap: 50px;
}


.lh100 {
	height: 100%;
}

.lh100vh {
	height: 100vh;
}

.lrowCenter {
	align-items: center;
	justify-content: center;
}
.lrowCenterHeight {
	align-items: center;
}
.lrowTopHeight {
	align-items: flex-start;
}
.lcolStretchHeight {
	align-items: stretch;
}
.lrowLeftWidth {
	justify-content: flex-start;
}
.lrowCenterWidth {
	justify-content: center;
}
.lrowRightWidth {
	justify-content: flex-end;
}

.lcolLeft {
	align-items: flex-start;
}

.lcolCenter {
	align-items: center;
	justify-content: center;
}
.lcolCenterHeight {
	justify-content: center;
}
.lcolCenterWidth {
	align-items: center;
}

.lw300 {
	min-width: 300px;
	max-width: 300px;
	width: 300px;
}

.lwrap {
	flex-wrap: wrap;
}

.lrow.pad5 {
	gap: var(--spacing-5);
}
.lrow.pad10 {
	gap: var(--spacing-10);
}
.lrow.pad15 {
	gap: var(--spacing-15);
}
.lrow.pad20 {
	gap: var(--spacing-20);
}

.lwidth100p {
	width: 100%;
}
/* g2 is 2 column table, useful for settings panels, something with label on left and controls on right etc */
.g2 {
	display: grid;
	grid-template-columns: 0fr 10fr;
	grid-template-rows: 0fr;
	align-items: center;
	row-gap: var(--spacing-5);
}
.g2.c1 {
	grid-template-columns: 0fr 1fr;
}
.g2.c2 {
	grid-template-columns: 0fr 2fr;
}
.g2.c5 {
	grid-template-columns: 0fr 5fr;
}

.g2 > div {
	padding: var(--spacing-small);
	display: flex;
	align-items: center; /* Vertical center alignment */
}

.g2 > div:nth-child(even){
	width: 100%;
}

.g2 > div:nth-child(odd) {
	margin-right: var(--spacing-normal);
	display: block;
	text-align: right;
	white-space: nowrap;
}

.g2 > div.sep {
	height: 20px;
}

.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.floatClear {
	clear: both;
}