/* #region Replace fxFlexLayout */

/* display: flex is with latest standard, while flexbox is older. flex may cause the label in buttons to wrap, however, this may be good.
	https://stackoverflow.com/questions/16280040/css3-flexbox-display-box-vs-flexbox-vs-flex
	If label wrapping happens, sometimes good to shorten, for example, "Change Password" to "New Password".
*/

/* fxLayout="row" */
.fx-layout-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.fx-layout-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fx-layout-wrap {
	flex-wrap: wrap;
}

/* flex row with fxLayoutGap=1em */
.fx-column-gap-1 {
	display: flex;
	flex-direction: row;
	column-gap: 1em;
}

/* flex column with fxLayoutGap=1em */
.fx-row-gap-1 {
	display: flex;
	flex-direction: column;
	row-gap: 1em;
}

/*fxLayoutGap=2em*/
.fx-column-gap-2 {
	display: flex;
	flex-direction: row;
	column-gap: 2em;
}

.fx-row-gap-2 {
	display: flex;
	flex-direction: column;
	row-gap: 2em
}

/*fxLayoutGap=0.5em*/
.fx-column-gap-half {
	display: flex;
	flex-direction: row;
	column-gap: 0.5em
}

.fx-row-gap-half {
	display: flex;
	flex-direction: column;
	row-gap: 0.5em
}

.fx-align-center-center {
	justify-content: center;
	align-content: center;
}

.fx-align-start {
	justify-content: flex-start;
}

.fx-align-start-start {
	justify-content: flex-start;
	align-content: flex-start;
}

.fx-align-end {
	justify-content: flex-end;
}

.fx-align-end-end {
	justify-content: flex-end;
	align-content: flex-end;
}

.fx-align-space-between {
	justify-content: space-between;
}

.fx-grow-1 {
	flex-grow: 1;
}

.fx-grow-2 {
	flex-grow: 2;
}

.fx-shrink-1 {
	flex-shrink: 1;
}

.flex-100pc {
	flex: 100%;
}

.flex-95pc {
	flex: 95%;
}

.flex-80pc {
	flex: 80%;
}

/* fxFlexFill https://github.com/angular/flex-layout/wiki/fxFlexFill-API */
.fx-full-width {
	margin: 0;
	width: 100%;
	min-width: 100%;
}

.fx-95pc-width {
	margin: 0;
	width: 95%;
	min-width: 95%;
}

.fx-80pc-width {
	margin: 0;
	width: 80%;
	min-width: 80%;
}

.fx-50pc-width {
	margin: 0;
	width: 50%;
	min-width: 50%;
}

.fx-offset-80px {
	margin-left: 80px;
}

.line-ellipsis {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.line2-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}


/* #endregion */

/* #region flex 0 grow 0 shrink width */
.flex-half {
	flex: 0 0 0.5em;
	flex-wrap: nowrap;
}

.flex-1 {
	flex: 0 0 1em;
}

.flex-2 {
	flex: 0 0 2em;
}

.flex-3 {
	flex: 0 0 3em;
}

.flex-4 {
	flex: 0 0 4em;
}

.flex-5 {
	flex: 0 0 5em;
}

.flex-6 {
	flex: 0 0 6em;
}

.flex-7 {
	flex: 0 0 7em;
}

.flex-8 {
	flex: 0 0 8em;
}

.flex-9 {
	flex: 0 0 9em;
}

.flex-10 {
	flex: 0 0 10em;
}

.flex-11 {
	flex: 0 0 11em;
}

.flex-12 {
	flex: 0 0 12em;
}

.flex-13 {
	flex: 0 0 13em;
}

.flex-14 {
	flex: 0 0 14em;
}


.flex-15 {
	flex: 0 0 15em;
}

.flex-16 {
	flex: 0 0 16em;
}

.flex-17 {
	flex: 0 0 17em;
}

.flex-18 {
	flex: 0 0 18em;
}

.flex-19 {
	flex: 0 0 19em;
}

.flex-20 {
	flex: 0 0 20em;
}

.flex-21 {
	flex: 0 0 21em;
}

.flex-22 {
	flex: 0 0 22em;
}

.flex-23 {
	flex: 0 0 23em;
}

.flex-24 {
	flex: 0 0 24em;
}


.flex-25 {
	flex: 0 0 25em;
}

.flex-26 {
	flex: 0 0 26em;
}

.flex-27 {
	flex: 0 0 27em;
}

.flex-28 {
	flex: 0 0 28em;
}

.flex-29 {
	flex: 0 0 29em;
}

.flex-30 {
	flex: 0 0 30em;
}

.flex-31 {
	flex: 0 0 31em;
}

.flex-33 {
	flex: 0 0 32em;
}

.flex-33 {
	flex: 0 0 33em;
}

.flex-34 {
	flex: 0 0 34em;
}


.flex-35 {
	flex: 0 0 35em;
}

.flex-36 {
	flex: 0 0 36em;
}

.flex-37 {
	flex: 0 0 37em;
}

.flex-38 {
	flex: 0 0 38em;
}

.flex-39 {
	flex: 0 0 39em;
}

/* #endregion */

/* #region flex grow 1 shrink 1 width while in flex, grow 1 and shrink 1 are defaults */
/* https://github.com/angular/flex-layout/wiki/fxFlex-API */
.flex11-half {
	flex: 1 1 0.5em;
}

.flex11-1 {
	flex: 1 1 1em;
}

.flex11-2 {
	flex: 1 1 2em;
}

.flex11-3 {
	flex: 1 1 3em;
}

.flex11-4 {
	flex: 1 1 4em;
}

.flex11-5 {
	flex: 1 1 5em;
}

.flex11-6 {
	flex: 1 1 6em;
}

.flex11-7 {
	flex: 1 1 7em;
}

.flex11-8 {
	flex: 1 1 8em;
}

.flex11-9 {
	flex: 1 1 9em;
}

.flex11-10 {
	flex: 1 1 10em;
}

.flex11-11 {
	flex: 1 1 11em;
}

.flex11-12 {
	flex: 1 1 12em;
}

.flex11-13 {
	flex: 1 1 13em;
}

.flex11-14 {
	flex: 1 1 14em;
}


.flex11-15 {
	flex: 1 1 15em;
}

.flex11-16 {
	flex: 1 1 16em;
}

.flex11-17 {
	flex: 1 1 17em;
}

.flex11-18 {
	flex: 1 1 18em;
}

.flex11-19 {
	flex: 1 1 19em;
}

.flex11-20 {
	flex: 1 1 20em;
}

.flex11-21 {
	flex: 1 1 21em;
}

.flex11-22 {
	flex: 1 1 22em;
}

.flex11-23 {
	flex: 1 1 23em;
}

.flex11-24 {
	flex: 1 1 24em;
}


.flex11-25 {
	flex: 1 1 25em;
}

.flex11-26 {
	flex: 1 1 26em;
}

.flex11-27 {
	flex: 1 1 27em;
}

.flex11-28 {
	flex: 1 1 28em;
}

.flex11-29 {
	flex: 1 1 29em;
}

.flex11-30 {
	flex: 1 1 30em;
}

.flex11-31 {
	flex: 1 1 31em;
}

.flex11-33 {
	flex: 1 1 32em;
}

.flex11-33 {
	flex: 1 1 33em;
}

.flex11-34 {
	flex: 1 1 34em;
}


.flex11-35 {
	flex: 1 1 35em;
}

.flex11-36 {
	flex: 1 1 36em;
}

.flex11-37 {
	flex: 1 1 37em;
}

.flex11-38 {
	flex: 1 1 38em;
}

.flex11-39 {
	flex: 1 1 39em;
}

/* #endregion */

/* #region width */
.width-half {
	width: 0.5em;
}

.width-1 {
	width: 1em;
}

.width-2 {
	width: 2em;
}

.width-3 {
	width: 3em;
}

.width-4 {
	width: 4em;
}

.width-5 {
	width: 5em;
}

.width-6 {
	width: 6em;
}

.width-7 {
	width: 7em;
}

.width-8 {
	width: 8em;
}

.width-9 {
	width: 9em;
}

.width-10 {
	width: 10em;
}

.width-11 {
	width: 11em;
}

.width-12 {
	width: 12em;
}

.width-13 {
	width: 13em;
}

.width-14 {
	width: 14em;
}


.width-15 {
	width: 15em;
}

.width-16 {
	width: 16em;
}

.width-17 {
	width: 17em;
}

.width-18 {
	width: 18em;
}

.width-19 {
	width: 19em;
}

.width-20 {
	width: 20em;
}

.width-21 {
	width: 21em;
}

.width-22 {
	width: 22em;
}

.width-23 {
	width: 23em;
}

.width-24 {
	width: 24em;
}


.width-25 {
	width: 25em;
}

.width-26 {
	width: 26em;
}

.width-27 {
	width: 27em;
}

.width-28 {
	width: 28em;
}

.width-29 {
	width: 29em;
}

.width-30 {
	width: 30em;
}

.width-31 {
	width: 31em;
}

.width-33 {
	width: 32em;
}

.width-33 {
	width: 33em;
}

.width-34 {
	width: 34em;
}


.width-35 {
	width: 35em;
}

.width-36 {
	width: 36em;
}

.width-37 {
	width: 37em;
}

.width-38 {
	width: 38em;
}

.width-39 {
	width: 39em;
}

/* #endregion */