:root {
	--main-theme-color: #262261;
	--main-theme-color-faded: #5400c5;
	--secondary-theme-color: #ff3d38;
	--tertiary-theme-color: #f2f2f2;
	--body-color: rgba(0, 0, 0, 0.70);
}

body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	color: var(--body-color);
}

main {
	flex: 1 0 auto;
}

html {
	background-image: url(../images/background.jpg);
	background-size: 100% auto;
	background-repeat: repeat-y;
	font-size: 80%;
}

.primary {
	background-color: var(--main-theme-color) !important;
}

.primary-text {
	color: var(--main-theme-color) !important;
}

.hover-primary:hover {
	background-color: var(--main-theme-color)  !important;
	cursor: pointer;
}

.hover-primary-text:hover {
	color: var(--main-theme-color)  !important;
	cursor: pointer;
}


.primary.hover-light:hover {
	background-color: white  !important;
	color: var(--main-theme-color)  !important;
	cursor: pointer;
}

.secondary.hover-light:hover {
	background-color: white  !important;
	color: var(--secondary-theme-color)  !important;
	cursor: pointer;
}

.secondary {
	background-color: var(--secondary-theme-color)  !important;
}

.secondary-text {
	color: var(--secondary-theme-color) !important;
}

.hover-secondary:hover {
	background-color: var(--secondary-theme-color)  !important;
	cursor: pointer;
}

.hover-secondary-text:hover {
	color: var(--secondary-theme-color)  !important;
	cursor: pointer;
}

.tertiary {
	background-color: var(--tertiary-theme-color);
}

.tertiary-text {
	color: var(--tertiary-theme-color);
}

.hover-tertiary:hover {
	background-color: var(--tertiary-theme-color)  !important;
	cursor: pointer;
}

.hover-tertiary-text:hover {
	color: var(--tertiary-theme-color)  !important;
	cursor: pointer;
}

.tertiary.hover-light:hover {
	background-color: white  !important;
	color: var(--tertiary-theme-color)  !important;
	cursor: pointer;
}

.hover-white:hover {
	background-color: white !important;
	cursor: pointer;
}

.hover-white-text:hover {
	color: white !important;
	cursor: pointer;
}

.hover-dark-text:hover {
	color: #00000044 !important;
	cursor: pointer;
}
.progress .indeterminate {
	background-color: var(--main-theme-color);
}

.progress {
	background-color: var(--main-theme-color-faded);
}

.progress .determinate {
	background-color: var(--main-theme-color);
}

.clickable {
	cursor: pointer;
}

.btn-xsmall {
	height: 20px;
	line-height: 20px;
	font-size: 13px;
	padding: 0 5px;
}