/* -------------------------------
    Global spacing variables
--------------------------------- */
/*
*  Global colour variables
*
*  1 - Greyscale colours
*  2 - System colours
*  3 - Accent colours
*    3.1 - Main
*    3.2 - Light
*    3.3 - Dark
*    3.4 - Callout backgrounds
*/
/*** 1 - Greyscale colours ***/
/*** 2 - System colours ***/
/*** 3 - Accent colours ***/
/* Main */
/* Light */
/* Dark */
/* callout backgrounds */
/* icon colours */
/* service ontario header colours */
/* -------------------------------
    Global font variables
--------------------------------- */
/* -------------------------------
    Global font-weight variables
--------------------------------- */
/* -------------------------------
    Global line-height variables
--------------------------------- */
/* Rem calc function */
/* Pixel to REM Conversion */
.ontario-loading-indicator__overlay,
.ontario-loading-indicator__overlay--within-container {
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.7);
	z-index: 9999;
}
.ontario-loading-indicator__overlay[aria-hidden='false'],
.ontario-loading-indicator__overlay--within-container[aria-hidden='false'] {
	display: block;
}
.ontario-loading-indicator__overlay[aria-hidden='true'],
.ontario-loading-indicator__overlay--within-container[aria-hidden='true'] {
	display: none;
}

.ontario-loading-indicator__overlay--within-container {
	position: absolute;
}

.ontario-loading-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 100%;
}
.ontario-loading-indicator p {
	color: rgb(76.5, 76.5, 76.5);
	font-family: 'Raleway Modified', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 700;
	word-spacing: 0.025rem;
	margin: 0.75rem 0 0;
}

.ontario-loading-indicator__spinner {
	animation: rotator 1.5s linear infinite;
	width: 3rem;
	height: 3rem;
	overflow: visible;
}
.ontario-loading-indicator__spinner circle {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	stroke-linecap: round;
	stroke: rgb(76.5, 76.5, 76.5);
	animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotator {
	100% {
		transform: rotate(360deg);
	}
}
@keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}
	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124px;
	}
}