/* GERAL: Zera as margens e define o HTML como 100% do website */
html, body {
	height: 100%;
	margin: 0px;
	scroll-behavior: smooth;
}

input[type=submit],
input[type=reset],
input[type=text],
input[type=password],
input[type=textarea],
input[type=button]
{ outline: none; }

/* GERAL: Espaçamento das páginas */
.espTopoPagina { margin-top: 2%; }
.espPaginax1 { margin-top: 1%; }
.espPaginax2 { margin-top: 1%; }
.espPaginax4 { margin-top: 2%; }
.espPaginax6 { margin-top: 3%; }
.espPaginax8 { margin-top: 4%; }

.divAlinhaCentro {
    display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
}

.divAlinhaBase {
    display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: baseline;
}

/* GERAL - Instalação de fontes especiais */
@font-face {
	font-family: 'HelveticaRegular';
	src: url('/css/fonts/helvetica.eot'); /* IE9 Compat Modes */
	src: url('/css/fonts/helvetica.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/css/fonts/helvetica.woff') format('woff'), /* Modern Browsers */
	url('/css/fonts/helvetica.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('/css/fonts/helvetica.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: 'HelveticaLight';
	src: url('/css/fonts/helvetica-light.eot'); /* IE9 Compat Modes */
	src: url('/css/fonts/helvetica-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/css/fonts/helvetica-light.woff') format('woff'), /* Modern Browsers */
	url('/css/fonts/helvetica-light.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('/css/fonts/helvetica-light.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: 'HelveticaBold';
	src: url('/css/fonts/helvetica-bold.eot'); /* IE9 Compat Modes */
	src: url('/css/fonts/helvetica-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/css/fonts/helvetica-bold.woff') format('woff'), /* Modern Browsers */
	url('/css/fonts/helvetica-bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('/css/fonts/helvetica-bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@media (max-width: 767px) {
	#overlayLoading { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); display: none; }
	.iconeLoading { position: absolute; top: 20%; transform: translateY(-20%); left: 33%; transform: translateX(-33%); }
	.textoLoading { font-family: "HelveticaLight"; font-size: 4.5vw; color: #D3B221; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	#overlayLoading { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); display: none; }
	.iconeLoading { position: absolute; top: 30%; transform: translateY(-30%); left: 40%; transform: translateX(-40%); }
	.textoLoading { font-family: "HelveticaLight"; font-size: 4vw; color: #D3B221; }
}

@media (min-width: 1024px) {
	#overlayLoading { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); display: none; }
	.iconeLoading { position: absolute; top: 40%; transform: translateY(-40%); left: 50%; transform: translateX(-50%); }
	.textoLoading { font-family: "HelveticaLight"; font-size: 1.5vw; color: #D3B221; }
}

/* GERAL | RODAPÉ: Imagem do rodapé da página */
.imgrodapelogin {
	margin: auto;
	width: 100%;
	bottom: 0;
}

/* GERAL | RODAPÉ: Alinha o rodapé na base */
.divalinharodape {
    display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: baseline;
}

.row {
	display: flex;
}

@media (min-width: 1024px) {
	/* PARA DESKTOPS */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}

	.row {
		display: flex;
	}
}

/* LOGIN | TOOLTIP */
[data-tooltip] {
	position: relative;
	z-index: 10;
}

/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	left: 50%;
	bottom: calc(100% + 5px);
	pointer-events: none;
	transition: 0.2s;
	will-change: transform;
}

/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
	content: attr(data-tooltip);
	padding: 10px 18px;
	min-width: 50px;
	max-width: 300px;
	width: max-content;
	width: -moz-max-content;
	border-radius: 6px;
	font-size: 10px;
	/*   font-size: 0.73rem; */
	background-color: rgba(59, 72, 80, 0.9);
	background-image: linear-gradient(30deg,
	rgba(59, 72, 80, 0.44),
	rgba(59, 68, 75, 0.44),
	rgba(60, 82, 88, 0.44));
	box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
	color: #fff;
	text-align: center;
	white-space: pre-wrap;
	transform: translate(-50%, -5px) scale(0.5);
}

/* Tooltip arrow */
[data-tooltip]:after {
	content: '';
	border-style: solid;
	border-width: 5px 5px 0px 5px;
	border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
	transition-duration: 0s; /* If the mouse leaves the element, 
	the transition effects for the 
	tooltip arrow are "turned off" */
	transform-origin: top;   /* Orientation setting for the
	slide-down effect */
	transform: translateX(-50%) scaleY(0);
}

/* Tooltip becomes visible at hover */
	[data-tooltip]:hover:before,
	[data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
	}
	/* Scales from 0.5 to 1 -> grow effect */
	[data-tooltip]:hover:before {
	transition-delay: 0.3s;
	transform: translate(-50%, -5px) scale(1);
	}
	/* Slide down effect only on mouseenter (NOT on mouseleave) */
	[data-tooltip]:hover:after {
	transition-delay: 0.5s; /* Starting after the grow effect */
	transition-duration: 0.2s;
	transform: translateX(-50%) scaleY(1);
	}
/* That's it. */

/* BOTTOM */
	[data-tooltip-location="bottom"]:before,
	[data-tooltip-location="bottom"]:after {
	top: calc(100% + 5px);
	bottom: auto;
	}

	[data-tooltip-location="bottom"]:before {
	transform: translate(-50%, 5px) scale(0.5);
	}
	[data-tooltip-location="bottom"]:hover:before {
	transform: translate(-50%, 5px) scale(1);
	}

	[data-tooltip-location="bottom"]:after {
	border-width: 0px 5px 5px 5px;
	border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
	transform-origin: bottom;
}