/* loading */
.container-loading {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	max-height: 100vh !important;
	max-width: 100vw !important;
	
	display: none;
	z-index: 1000;
	
	background: rgba(238, 236, 235);
	opacity: 0.5;
	vertical-align: middle;
	animation: fade-out 0.3s;
}

.container-loading.fullscreen {
	position: fixed !important;
	height: 100vh !important;
	width: 100vw !important;
	
}

.container-loading.show {
	display: inherit;
	animation: fade-in 0.3s;
}

.container-loading.show svg {
	-webkit-animation: rotate-loading 2s linear infinite;
	animation: rotate-loading 2s linear infinite;
	height: 100px;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	width: 100px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.container-loading.show svg circle {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	-webkit-animation: dash-loading 1.5s ease-in-out infinite, color-loading 6s ease-in-out infinite;
	animation: dash-loading 1.5s ease-in-out infinite, color-loading 6s ease-in-out infinite;
	stroke-linecap: round;
}

@-webkit-keyframes rotate-loading {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotate-loading {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes dash-loading {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	
	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35;
	}
	
	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124;
	}
}

@keyframes dash-loading {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	
	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35;
	}
	
	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124;
	}
}

@-webkit-keyframes color-loading {
	
	100%,
	0% {
		stroke: #d62d20;
	}
	
	40% {
		stroke: #0057e7;
	}
	
	66% {
		stroke: #008744;
	}
	
	80%,
	90% {
		stroke: #ffa700;
	}
}

@keyframes color-loading {
	
	100%,
	0% {
		stroke: #d62d20;
	}
	
	40% {
		stroke: #0057e7;
	}
	
	66% {
		stroke: #008744;
	}
	
	80%,
	90% {
		stroke: #ffa700;
	}
}