/*
	CSS-flex =
	
		 .flex [ .flex-nowrap ] [ CSS-flex-margin ] [ CSS-flex-horizontal-alignment ] [ CSS-flex-vertical-alignment ] [ CSS-flex-direction ] [ CSS-flex-grow ]
			DIV
				*
			...

	CSS-flex-margin =

		.flex-0 .flex-1 .flex-5 .flex-10

	CSS-flex-horizontal-alignment =

		.flex-right .flex-center .flex-space

	CSS-flex-vertical-alignment =

		.flex-middle .flex-baseline .flex-top .flex-bottom

	CSS-flex-direction =

		.flex-row .flex-column .flex-row-reverse .flex-column-reverse

	CSS-flex-grow =

		.flex-grow-first .flex-grow-last
*/

.flex {
	display: flex;
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap !important;
}

.flex-0 {
	gap: 0;
}

.flex-1 {
	gap: 1px;
}

.flex-5 {
	gap: 5px;
}

.flex-10 {
	gap: 10px;
}

.flex-30 {
	gap: 30px;
}

.flex-60 {
	gap: 60px;
}

.flex-right {
	justify-content: flex-end;
}

.flex-center {
	justify-content: center;
}

.flex-space {
    justify-content: space-between;
}

.flex-middle {
	align-items: center;
}

.flex-baseline {
	align-items: baseline;
}

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

.flex-bottom {
	align-items: end;
}

.flex-row {
	flex-direction: row;
}

.flex-column {
	flex-direction: column;
}

.flex-row-reverse {
	flex-direction: row-reverse;
}

.flex-column-reverse {
	flex-direction: column-reverse;
}

.flex-grow-first > DIV:FIRST-CHILD {
	flex-grow: 1;
}

.flex-grow-last > DIV:LAST-CHILD {
	flex-grow: 1;
}

/*
	max-width
*/

.flex > DIV {
	max-width: -moz-available;
    max-width: -webkit-fill-available;
    max-width: fill-available;
}