:root {
	--spacer-width: 22px;
}

.flex-container-col {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
}

.flex-container-row {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

.flex-padd-lr-5 {
	padding-left: 5px;
	padding-right: 5px;
}

.flex-padd-tb-5 {
	padding-top: 5px;
	padding-bottom: 5px;
}

.flex-padd-10 {
	padding: 10px;
}

.flex-full-width {
	width: 100%;
}

.flex-third {
	width: calc(100% / 3);
}

.flex-two-third {
	width: calc((100% / 3) * 2);
}

.flex-quarter {
	width: calc(100% / 4);
}
.flex-half {
	width: calc(100% / 2);
}

.flex-label,
.flex-input {
	width: calc((100% / 2) - (var(--spacer-width) / 2));
}

.flex-label-large {
	width: calc(((100% / 3) * 2) - (var(--spacer-width) / 2));
}

.flex-input-small {
	width: calc((100% / 3) - (var(--spacer-width) / 2));
}

.flex-spacer {
	width: var(--spacer-width);
}

.flex-label {
	text-align: right;
}

.flex-label-large {
	text-align: left;
}

.flex-input-small {
	text-align: right;
}

.flex-text-center {
	text-align: center;
}

.flex-text-left {
	text-align: left;
}

.flex-text-right {
	text-align: right;
}