/*********************
↓↓↓↓↓ UB LOADING ↓↓↓↓↓
*********************/
.ub-loading {
	z-index: 9999;
	position: fixed;
	background: #fff;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	overflow: none !important;
}
.ub-loading svg{
	width: 20rem;
	height: 20rem;
}
.ub-loading .brasao-svg-loading{
	/*stroke: #6576ff;*/
	stroke:  var(--color-principal);
	fill: transparent;
	stroke-width: 1.2;
	stroke-dashoffset: 4000;
	stroke-dasharray: 4000;
	animation: dashLoading 5s linear forwards;
}
.ub-loading .ub-loading-text{
	/*color: #6576ff;*/
	color:  var(--color-principal);
	font-size: 0.9rem;
	font-weight: 200!important;
	line-height: 0;
	margin-top: -20px;
}
.ub-loading .ub-loading-text span{
	font-size: 2rem;
	letter-spacing: -2px;
}
.ub-loading .ub-loading-text span:nth-child(1){
	animation: dotsLoading 1s linear forwards infinite;
    animation-delay: 0.3s;
}
.ub-loading .ub-loading-text span:nth-child(2){
	animation: dotsLoading 1s linear forwards infinite;
    animation-delay: 0.6s;
}
.ub-loading .ub-loading-text span:nth-child(3){
	animation: dotsLoading 1s linear forwards infinite;
    animation-delay: 0.9s;
}

@keyframes dashLoading {
	95%{
		fill: transparent;
		stroke-dashoffset: 0;
		/*stroke: #6576ff;*/
		stroke: var(--color-principal);
		stroke-width: 1.2;
	}
	100%{
		/*stroke: #6576ff;*/
		stroke: var(--color-principal);
		stroke-dashoffset: 0;
		/*fill: #6576ff;*/
		fill:  var(--color-principal);
		stroke-width: 0.2;
	}
}
@keyframes dotsLoading {
	0%{
		opacity: 0.2;
	}
	50%{
		opacity: 1;
	}
}

/*	DARK MODE LOADING	*/
body.dark-mode .ub-loading {
	background: #101924 !important;
}

/*********************
↑↑↑↑↑ UB LOADING ↑↑↑↑↑
*********************/

/***************************
↓↓↓↓↓ UB IMG ANIMATION ↓↓↓↓↓
***************************/
.ub-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.ub-svg .brasao-svg {
	/*stroke: #6576ff;*/
	stroke: var(--color-principal);
	fill: transparent;
	stroke-width: 0.6;
	stroke-dashoffset: 2000;
	stroke-dasharray: 500;
	animation: dash 10s linear forwards infinite;
	opacity: 0.7;
	margin-left: -50%;
}

@keyframes dash {
	100% {
		stroke-dashoffset: 0;
	}
}

/***************************
↑↑↑↑↑ UB IMG ANIMATION ↑↑↑↑↑
***************************/