body {
	font-family: Trebuchet MS, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-primary-dark);
}

.smallText {
	font-size: small;
}
.textCentered {
	text-align: center;
}
.buttonHeight {
	height: var(--btnSize);
}
.warn {
	color: red !important;
	
	svg {
		fill: red !important;
		transition: fill 300ms;
		
		&:hover {
			fill: darkred !important;
		}
	}
}

.spacingBottom {
	padding-bottom: 20px;
}

.horizontal, .vertical {
	gap: 5px;
	
	&.noGap {
		gap: 0;
	}
	
	&.fullLine {
		display: flex;
		width: 100%;
	}
	
	&.maxWidth {
		max-width: 100%;
	}
	
	> .fillSpace {
		flex: 1 1 auto;
	}
	
	> .selfAlignStretch {
		align-self: stretch;
	}
	> .selfAlignStart {
		align-self: flex-start;
	}
	> .selfAlignCenter {
		align-self: center;
	}
	> .selfAlignEnd {
		align-self: flex-end;
	}
}

.horizontal {
	display: inline-flex;
	flex-direction: row;
	
	&.vAlignStart {
		align-items: flex-start;
		align-content: flex-start;
	}
	&.vAlignCenter {
		align-items: center;
		align-content: center;
	}
	&.vAlignStretched {
		align-items: stretch;
	}
	&.vAlignEnd {
		align-items: flex-end;
	}
	
	&.hAlignSpaced {
		justify-content: space-between;
	}
	&.hAlignCenter {
		justify-content: center;
	}
	&.hAlignEnd {
		justify-content: flex-end;
	}
	
	&.wrapContent {
		flex-wrap: wrap;
	}
}
.vertical {
	display: inline-flex;
	flex-direction: column;
	
	&.reversed {
		flex-direction: column-reverse;
	}
	
	&.hAlignStart {
		align-items: flex-start;
		align-content: flex-start;
	}
	&.hAlignCenter {
		align-items: center;
		align-content: center;
	}
	&.hAlignEnd {
		align-items: flex-end;
	}
	&.hAlignStretched {
		align-items: stretch;
	}
	
	&.vAlignStart {
		justify-content: flex-start;
	}
	&.vAlignCenter {
		justify-content: center;
	}
	&.vAlignEnd {
		justify-content: flex-end;
	}
	
	&.wrapContent {
		flex-wrap: wrap;
	}
}