:root {
	--pace-color: #e8001e;
}

.pace.pace-erase {
	display: none;
}

.pace {
	-webkit-pointer-events: none;
	pointer-events: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;

	z-index: 2000;
	position: fixed;
	height: 120px;
	width: 120px;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background: var(--dreamscape);
	border-radius: 50%;
}

.pace .pace-progress {
	z-index: 2000;
	position: absolute;
	height: 100%;
	width: 100%;

	/* Override default meter incrementation*/
	box-sizing: content-box !important;
	-webkit-transform: translate3d(0, 0, 0) !important;
	-ms-transform: translate3d(0, 0, 0) !important;
	transform: translate3d(0, 0, 0) !important;
}

.pace-progress-inner {
	height: 100%;
}

/*.pace-activity:after {
	content: '';
	background: var(--dreamscape);
	border-radius: 50%;
	width: 6rem;
	height: 6rem;
	z-index: -1;
	position: relative;
	display: block;
}*/

.pace .pace-progress:after {
	content: attr(data-progress-text);
	text-align: center;
	color: #fff;
	border-radius: 50%;
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 16px;
	font-weight: bolder;
	text-shadow: 1px 1px 1px black;
	width: 4.5rem;
	height: 4.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	box-sizing: content-box !important;
}

.pace .pace-activity {
	border-radius: 50%;
	border: 5px solid transparent;
	content: ' ';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 110px;
	width: 110px;
	box-sizing: content-box !important;
	background-color: transparent;
	background-image: url(/saito/img/saito-loader.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

	animation: pace-theme-center-atom-spin 6s linear infinite;
}

.pace.pace-inactive {
	animation: pace-theme-grow-atom 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
	z-index: 5000;
	transform-origin: center;
}

.pace.pace-inactive::before {
	position: absolute;
    top: -50%;
    left: -50%;
	transform-origin: center;
	width: 200%;
	height: 200%;
	content: '';
	display: block;
	background: var(--dreamscape);
	border-radius: 515px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .3);
	animation: pulse-ring 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.1s forwards;
	z-index: -5000;
}

.pace.pace-inactive .pace-activity {
	-webkit-animation: unset;
	-moz-animation: unset;
	-o-animation: unset;
	animation: unset;
}

/*.pace.pace-inactive .pace-activity:after {
	animation: pulse-ring 1.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s forwards;
}*/


@keyframes pace-theme-center-atom-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

@keyframes pace-theme-grow-atom {
	0% {
		scale: .8;
	}
	45% {
		scale: 1;
	}
	90% {
		scale: .8;
		display: block;
		opacity: 1;
	}
	100% {
		scale: .8;
		display: none;
		opacity: 0;
	}
}

@keyframes pulse-ring {
	0% {
		display: none;
		scale: 0.33;
	}
	1% {
		display: block;
	}
	95%,
	100% {
		scale: 3;
		opacity: 0;
		display: none;
	}
}