:root {
	--text: #343434;
	--heading: #343434;
	--contrast: #fff;
	--gradient-yellow: linear-gradient(90deg, #FBDC84 0%, #F2BE30 100%);
	--gradient-light-blue: linear-gradient(90deg, #74BFCD 0%, #98D1DC 100%);
	--gradient-dark-blue: linear-gradient(90deg, #3499C9 0%, #1F5E7C 100%);
	--gradient-orange: linear-gradient(90deg, #D77101 0%, #F68624 100%);
	--gradient-dark-grey: linear-gradient(90deg, #747474 0%, #343434 100%);
	--gradient-orange-yellow: linear-gradient(90deg, #F68624 0%, #F7B805 100%);
	--orange: #f68624;
	--dark-grey: #343434;
	--mid-grey: #7c7c7c;
	--light-grey: #f2efec;
	--yellow: #f2be30;
	--dark-orange: #e07423;
	--light-blue: #98d1dc;
	--dark-blue: #1f5e7c;
	--white: #ffffff;
	--black: #000000;
}

.has-orange-color {
	color: var(--orange);
	p {
		color: var(--orange);
	}
	.badge {
		color: var(--orange);
		border-color: var(--orange);
	}
}

.bg_orange {
	--text: var(--mid-grey);
	--heading: var(--dark-grey);
	background-color: #f68624;
}

.uo_btn.orange {
	--button-bg: #f68624;
	--button-text: var(--dark-grey);
}

.has-dark-grey-color {
	color: var(--dark-grey);
	p {
		color: var(--dark-grey);
	}
	.badge {
		color: var(--dark-grey);
		border-color: var(--dark-grey);
	}
}

.bg_dark-grey {
	--text: var(--contrast);
	--heading: var(--contrast);
	background-color: #343434;
}

.uo_btn.dark-grey {
	--button-bg: #343434;
	--button-text: var(--contrast);
}

.has-mid-grey-color {
	color: var(--mid-grey);
	p {
		color: var(--mid-grey);
	}
	.badge {
		color: var(--mid-grey);
		border-color: var(--mid-grey);
	}
}

.bg_mid-grey {
	--text: var(--mid-grey);
	--heading: var(--dark-grey);
	background-color: #7c7c7c;
}

.uo_btn.mid-grey {
	--button-bg: #7c7c7c;
	--button-text: var(--dark-grey);
}

.has-light-grey-color {
	color: var(--light-grey);
	p {
		color: var(--light-grey);
	}
	.badge {
		color: var(--light-grey);
		border-color: var(--light-grey);
	}
}

.bg_light-grey {
	--text: var(--mid-grey);
	--heading: var(--dark-grey);
	background-color: #f2efec;
}

.uo_btn.light-grey {
	--button-bg: #f2efec;
	--button-text: var(--dark-grey);
}

.has-yellow-color {
	color: var(--yellow);
	p {
		color: var(--yellow);
	}
	.badge {
		color: var(--yellow);
		border-color: var(--yellow);
	}

}

.bg_yellow {
	--text: var(--mid-grey);
	--heading: var(--dark-grey);
	background-color: #f2be30;
}

.uo_btn.yellow {
	--button-bg: #f2be30;
	--button-text: var(--dark-grey);
}

.has-dark-orange-color {
	color: var(--dark-orange);;
	p {
		color: var(--dark-orange);
	}
	.badge {
		color: var(--dark-orange);
		border-color: var(--dark-orange);
	}
}

.bg_dark-orange {
	--text: var(--mid-grey);
	--heading: var(--dark-grey);
	background-color: #e07423;
}

.uo_btn.dark-orange {
	--button-bg: #e07423;
	--button-text: var(--dark-grey);
}

.has-light-blue-color {
	color: var(--light-blue);
	p {
		color: var(--light-blue);
	}
	.badge {
		color: var(--light-blue);
		border-color: var(--light-blue);
	}
}

.bg_light-blue {
	--text: var(--mid-grey);
	--heading: var(--dark-grey);
	background-color: #98d1dc;
}

.uo_btn.light-blue {
	--button-bg: #98d1dc;
	--button-text: var(--dark-grey);
}

.has-dark-blue-color {
	color: var(--dark-blue);
	p {
		color: var(--dark-blue);
	}
	.badge {
		color: var(--dark-blue);
		border-color: var(--dark-blue);
	}
}

.bg_dark-blue {
	--text: var(--contrast);
	--heading: var(--contrast);
	background-color: #1f5e7c;
}

.uo_btn.dark-blue {
	--button-bg: #1f5e7c;
	--button-text: var(--contrast);
}

.has-white-color {
	color: var(--white);
	p {
		color: var(--white);
	}
	.badge {
		color: var(--white);
		border-color: var(--white);
	}
}

.bg_white {
	--text: var(--mid-grey);
	--heading: var(--dark-grey);
	background-color: #ffffff;
}

.uo_btn.white {
	--button-bg: #ffffff;
	--button-text: var(--dark-grey);
}

.has-black-color {
	color: var(--black);
	p {
		color: var(--black);
	}
	.badge {
		color: var(--black);
		border-color: var(--black);
	}
}

.bg_black {
	--text: var(--contrast);
	--heading: var(--contrast);
	background-color: #000000;
}

.uo_btn.black {
	--button-bg: #000000;
	--button-text: var(--contrast);
}

.bg_gradient_orange-yellow {
	background: var(--gradient-orange-yellow);
}