.material-icons.cc-icon {
	color: var(--primary-light-color);
}

	.material-icons.cc-icon.cc-icon-warning {
		color: var(--warning-color);
	}

	.material-icons.cc-icon.cc-icon-danger {
		color: var(--danger-color);
	}

	.material-icons.cc-icon.cc-icon-success {
		color: var(--success-color);
	}



	.material-icons.cc-icon.cc-icon-sm {
		font-size: 20px;
	}

.material-icons.cc-icon-sm {
	font-size: 20px;
}

.material-icons.cc-icon-lg {
	font-size: 32px;
}



a.material-icons.cc-icon:hover {
	text-decoration: none;
}

.material-icons.cc-icon:hover {
	color: var(--primary-color);
}


.cc-custom-icon-sm {
	height: 20px;
	width: 20px;
}



/* JH April 2022 - this prevents the blue underline from appearing when hoving over icons set with an anchor tag */
a.cc-icon:hover {
	text-decoration: none !important;
}
















/*always have media queries at the bottom of the file like so*/


/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}


/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}