/*comportamento loader quando o body é pai*/
body > .gesfrota-loader-container {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: inline-flex;
	vertical-align: top;
	justify-content: center;
	align-items: center;
	z-index: 1050;
}

/*comportamento genérico do loader em secções*/
.gesfrota-loader-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: inline-flex;
	vertical-align: top;
	justify-content: center;
	align-items: center;
	z-index: 1050;
}

.loaders .list-group-item {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	display: inline-flex;
	vertical-align: top;
	justify-content: center;
	align-items: center;
	z-index: 1050;
	background-color: rgba(219, 202, 202, 0.7);
	backdrop-filter: blur(1px);
}

/*loader circulo final*/

.loader-circle-light {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-block;
	border-top: 3px solid #fff;
	border-right: 3px solid transparent;
	box-sizing: border-box;
	animation: rotation2 1s linear infinite;
}

@keyframes rotation2 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/*loader velocimetro*/

.loader-velo {
	width: 96px;
	height: 48px;
	display: inline-block;
	position: relative;
	background: #fff;
	border-radius: 48px 48px 0 0;
	box-sizing: border-box;
	overflow: hidden;
}
.loader-velo::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
	width: 24px;
	height: 12px;
	border-radius: 24px 24px 0 0;
	background: #ff3d00;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}
.loader-velo::before {
	content: '';
	position: absolute;
	width: 4px;
	height: 32px;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 0;
	background: #ff3d00;
	transform-origin: 50% 100%;
	box-sizing: border-box;
	animation: animloader 2s linear infinite alternate;
}

@keyframes animloader {
	0% {
		transform: rotate(-70deg);
	}
	10% {
		transform: rotate(-40deg);
	}
	20%,
	45%,
	35% {
		transform: rotate(-10deg);
	}
	40%,
	30% {
		transform: rotate(-30deg);
	}
	50%,
	60% {
		transform: rotate(20deg);
	}
	55%,
	65%,
	75% {
		transform: rotate(40deg);
	}
	70% {
		transform: rotate(45deg);
	}
	85%,
	90% {
		transform: rotate(50deg);
	}
	95% {
		transform: rotate(75deg);
	}
	100%,
	93% {
		transform: rotate(70deg);
	}
}

/*loader mapa*/

.loader-map {
	width: 48px;
	height: 48px;
	display: block;
	margin: 20px auto;
	box-sizing: border-box;
	position: relative;
}
.loader-map::after {
	content: '';
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	left: 0;
	bottom: 0;
	position: absolute;
	border-radius: 50% 50% 0;
	border: 15px solid #fff;
	transform: rotate(45deg) translate(0, 0);
	box-sizing: border-box;
	animation: animMarker 0.4s ease-in-out infinite alternate;
}
.loader-map::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 150%;
	width: 24px;
	height: 4px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	animation: animShadow 0.4s ease-in-out infinite alternate;
}

@keyframes animMarker {
	0% {
		transform: rotate(45deg) translate(5px, 5px);
	}
	100% {
		transform: rotate(45deg) translate(-5px, -5px);
	}
}

@keyframes animShadow {
	0% {
		transform: scale(0.5);
	}
	100% {
		transform: scale(1);
	}
}

/* loader vehicle*/
.loader-vehicle {
	position: relative;
	display: block;
	margin: 20px auto;
	width: 130px;
	height: 100px;
	background-repeat: no-repeat;
	background-image: linear-gradient(#0277bd, #0277bd),
		linear-gradient(#29b6f6, #4fc3f7), linear-gradient(#29b6f6, #4fc3f7);
	background-size: 80px 70px, 30px 50px, 30px 30px;
	background-position: 0 0, 80px 20px, 100px 40px;
}
.loader-vehicle:after {
	content: '';
	position: absolute;
	bottom: 10px;
	left: 12px;
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 50%;
	box-sizing: content-box;
	border: 10px solid #000;
	box-shadow: 78px 0 0 -10px #fff, 78px 0 #000;
	animation: wheelSk 0.75s ease-in infinite alternate;
}

.loader-vehicle:before {
	content: '';
	position: absolute;
	right: 100%;
	top: 0px;
	height: 70px;
	width: 70px;
	background-image: linear-gradient(#fff 45px, transparent 0),
		linear-gradient(#fff 45px, transparent 0),
		linear-gradient(#fff 45px, transparent 0);
	background-repeat: no-repeat;
	background-size: 30px 4px;
	background-position: 0px 11px, 8px 35px, 0px 60px;
	animation: lineDropping 0.75s linear infinite;
}

@keyframes wheelSk {
	0%,
	50%,
	100% {
		transform: translatey(0);
	}
	30%,
	90% {
		transform: translatey(-3px);
	}
}

@keyframes lineDropping {
	0% {
		background-position: 100px 11px, 115px 35px, 105px 60px;
		opacity: 1;
	}
	50% {
		background-position: 0px 11px, 20px 35px, 5px 60px;
	}
	60% {
		background-position: -30px 11px, 0px 35px, -10px 60px;
	}
	75%,
	100% {
		background-position: -30px 11px, -30px 35px, -30px 60px;
		opacity: 0;
	}
}

/* loader opções */

.loader-options {
	width: 60px;
	height: 40px;
	position: relative;
	display: inline-block;
	--base-color: #545b628f; /*use your base color*/
}
.loader-options::before {
	content: '';
	left: 0;
	top: 0;
	position: absolute;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #fff;
	background-image: radial-gradient(
			circle 8px at 18px 18px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 4px at 18px 0px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 4px at 0px 18px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 4px at 36px 18px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 4px at 18px 36px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 4px at 30px 5px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 4px at 30px 5px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 4px at 30px 30px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 4px at 5px 30px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 4px at 5px 5px,
			var(--base-color) 100%,
			transparent 0
		);
	background-repeat: no-repeat;
	box-sizing: border-box;
	animation: rotationBack 3s linear infinite;
}
.loader-options::after {
	content: '';
	left: 35px;
	top: 15px;
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #fff;
	background-image: radial-gradient(
			circle 5px at 12px 12px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 2.5px at 12px 0px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 2.5px at 0px 12px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 2.5px at 24px 12px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 2.5px at 12px 24px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 2.5px at 20px 3px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 2.5px at 20px 3px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 2.5px at 20px 20px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 2.5px at 3px 20px,
			var(--base-color) 100%,
			transparent 0
		),
		radial-gradient(
			circle 2.5px at 3px 3px,
			var(--base-color) 100%,
			transparent 0
		);
	background-repeat: no-repeat;
	box-sizing: border-box;
	animation: rotationBack 4s linear infinite reverse;
}
@keyframes rotationBack {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

/* loader pesquisa */

.loader-search {
	width: 48px;
	height: 48px;
	display: block;
	margin: 20px auto;
	position: relative;
	border: 3px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
	animation: animloadersearch 2s linear infinite;
}
.loader-search::after {
	content: '';
	box-sizing: border-box;
	width: 6px;
	height: 24px;
	background: #fff;
	transform: rotate(-45deg);
	position: absolute;
	bottom: -20px;
	left: 46px;
}

@keyframes animloadersearch {
	0% {
		transform: translate(-10px, -10px);
	}
	25% {
		transform: translate(-10px, 10px);
	}
	50% {
		transform: translate(10px, 10px);
	}
	75% {
		transform: translate(10px, -10px);
	}
	100% {
		transform: translate(-10px, -10px);
	}
}

.loader-overflow-hidden {
    overflow: hidden;
}