.centro {text-align: center;}
.esquerdo {text-align: left;}
.direita {text-align: right;}
.justificado {text-align: justify;}
.margemAuto {margin: auto;}

.posAbsoluto {position: absolute;}

.linhaCorPrincipal {border: 0px; border-bottom: 1px var(--corPrincipal) solid;}
.linhaCinzaClaro {border: 0px; border-bottom: 1px #b8b8b8 solid;}
.linhaBranca {border: 0px; border-bottom: 1px white solid;}
.linhaVerde {border: 0px; border-bottom: 1px green solid;}
.linhaLaranja {border: 0px; border-bottom: 1px orange solid;}
.linhaCinza {border: 0px; border-bottom: 1px grey solid;}
.linhaAzul {border: 0px; border-bottom: 1px #0489B1 solid;}
.linhaHover:hover {background-color: #fbfdce;}



.fundoCorPrincipal {background-color: var(--corPrincipal);}
.fundoCorSecundaria {background-color: var(--corSecundaria);}
.fundoBranco {background-color: white;}
.fundoVermelho {background-color: red;}
.fundoVermelhoClaro {background-color: #e28585;}
.fundoLaranja {background-color: orange;}
.fundoLaranjaClaro {background-color: #F5D0A9;}
.fundoVerde {background-color: green;}
.fundoVerdeClaro {background-color: #99d0a7;}
.fundoCinzaClaro {background-color: #e1e0e0;}
.fundoCinza {background-color: #a0a0a0;}
.fundoAmarelo {background-color: #dde41c;}

#fundoVermelhoClaro {background-color: #F78181;}
#fundoLaranjaClaro {background-color: #F5D0A9;}
#fundoCorSecundaria {background-color: var(--corSecundaria);}
#fundoVerdeClaro {background-color: #A9F5BC;}

.divHover:hover {background-color: #F5F6CE;}
.btnHoverCinzaClaro:hover {background-color: #d7d7d7;}
.btnHoverVermelhoClaro:hover {background-color: #F78181; color: black;}

.padding5-0 {padding: 5px 0px;}
.padding2 {padding: 2px;}
.padding5 {padding: 5px;}
.padding1-4 {padding: 1px 4px;}
.padding3-10 {padding: 3px 10px;}
.padding5-10 {padding: 5px 10px;}
.padding10 {padding: 10px;}
.padding15 {padding: 15px;}

.textoVertical {
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: vertical-lr;
	transform: rotate(180deg)
}

.margem2 {margin: 2px;}
.margem3 {margin: 3px;}
.margem5 {margin: 5px;}
.margem10 {margin: 10px;}
.margem15 {margin: 15px;}

.corPrincipal {color: var(--corPrincipal);}
.corVermelhoForte {color: darkred;}
.corVermelho {color: red;}
.corVerde {color: green;}
.corLaranja {color: orange;}
.corPreto {color: black;}
.corBranco {color: white;}
.corCinza {color: #585858;}
.corAzulClaro {color: #0489B1;}


.cursorMao {cursor: pointer;}

.bordaBranca {border: 1px solid white;}
.bordaCinza {border: 1px solid #b8b8b8;}
.bordaCinza-0111 {border-top: 0px; border-right: 1px solid #b8b8b8; border-bottom: 1px solid #b8b8b8; border-left: 1px solid #b8b8b8;}
.bordaPreta {border: 1px solid black;}
.bordaCorPrincipal {border: 1px solid var(--corPrincipal);}

.bordaDivEsqLaranja {border-left: 5px solid orange;}
.bordaDivEsqVerde {border-left: 5px solid green;}
.bordaDivEsqVermelho {border-left: 5px solid red;}
.bordaDivEsqVermelhoClaro {border-left: 5px solid red;}

.invisivel {display: none;}
.visivel {display: block;}

.sublinhado {text-decoration: underline;}
.negrito {font-weight: bold;}
.ladoALado {display: inline-table; vertical-align: top;}
.verticalTop {vertical-align: top;}
.displayFlex {display: flex;}
.displayFlexCentro {align-items: center;}
.displayFlexJustCentro {justify-content: center;}
.displayFlexSpaceBetween {justify-content: space-between;}
.displayFlexSpaceAround {justify-content: space-around;}
.flexGrow1 {flex-grow: 1;}
.displayBlock {display: block;}

.gap5 {gap: 5px;}
.gap10 {gap: 10px;}

.overflow93 {height: 93%; overflow: auto; width: 100%;}
.overFlow {overflow: auto;}

.larguraAuto {width: auto;}

.circulo {
	-moz-border-radius: 48%;
	-webkit-border-radius: 48%;
	border-radius: 48%;
}

.bordaRedonda {
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}

.bordaRedondaSup {
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

.bordaRedondaInf {
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
}

.bordaRedondaEsq {
	-moz-border-radius: 5px 0px 0px 5px;
	-webkit-border-radius: 5px 0px 0px 5px;
	border-radius: 5px 0px 0px 5px;
}

.bordaRedondaDir {
	-moz-border-radius: 0px 5px 5px 0px;
	-webkit-border-radius: 0px 5px 5px 0px;
	border-radius: 0px 5px 5px 0px;
}

.sombraPreta {
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:    0px 0px 5px rgba(0, 0, 0, 0.4);
    box-shadow:         0px 0px 5px rgba(0, 0, 0, 0.4);
}

#mascaraSemClick, #mascaraComClick {background-color: black; opacity: 0.6; position: fixed; width: 100%; height: 100%; z-index: 9999999999; display: none;}
#mascaraSemCor {background-color: black; opacity: 0; position: fixed; width: 100%; height: 100%; z-index: 999999; display: none;}

.containerImagem {
	position: relative;
	height: 100vh;
    width: 100vw;
}
.containerMascara {
	opacity: 0.7;
	background-color: black;
	height: 100vh;
    width: 100vw;
	position: fixed;
}


details summary {cursor: pointer; padding: 4px;}
details summary:hover {background-color: var(--corPrincipal); color: white;}


/*Div com efeitos Carregando..*/
.carregando {
	padding: 10px; text-align: center; margin: auto; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.carregando div:nth-child(1) {
	width: 25px; height: 25px; border-radius: 50%; 
	border-top: 4px solid black;
	border-left: 4px solid black;
	border-right: 4px solid transparent;

	animation: spin .7s infinite linear;
}
.carregando div:nth-child(2)::before {
	content: "Carregando...";
}
@keyframes spin {
	to {transform: rotate(360deg);}
}
/*Div com efeitos Carregando..*/




/*SVG*/
.svg15 { height: 15px; width: 15px; text-align: center; vertical-align: top; }
.svg18 { height: 18px; width: 18px; text-align: center; vertical-align: top; }
.svg20 { height: 20px; width: 20px; text-align: center; vertical-align: top; }
.svg25 { height: 25px; width: 25px; text-align: center; vertical-align: top; }
.svg30 { height: 30px; width: 30px; text-align: center; vertical-align: top; }
.svg40 { height: 40px; width: 40px; text-align: center; vertical-align: top; }
.svg50 { height: 50px; width: 50px; text-align: center; vertical-align: top; }
.svg60 { height: 60px; width: 60px; text-align: center; vertical-align: top; }
.svg65 { height: 65px; width: 65px; text-align: center; vertical-align: top; }
.svg70 { height: 70px; width: 70px; text-align: center; vertical-align: top; }
.svg80 { height: 80px; width: 80px; text-align: center; vertical-align: top; }
.svg90 { height: 90px; width: 90px; text-align: center; vertical-align: top; }
.svg100 { height: 100px; width: 100px; text-align: center; vertical-align: top; }
.svg120 { height: 120px; width: 120px; text-align: center; vertical-align: top; }
.svg150 { height: 150px; width: 150px; text-align: center; vertical-align: top; }
.svgBranco { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.svgPreto { filter: invert(0%) sepia(4%) saturate(20%) hue-rotate(334deg) brightness(104%) contrast(100%); }
.svgVerde { filter: invert(64%) sepia(36%) saturate(6501%) hue-rotate(68deg) brightness(93%) contrast(98%); }
.svgVermelho { filter: invert(24%) sepia(95%) saturate(6805%) hue-rotate(356deg) brightness(100%) contrast(120%); }
.svgAzul { filter: invert(9%) sepia(98%) saturate(6525%) hue-rotate(248deg) brightness(58%) contrast(115%); }
.svgAmarelo { filter: invert(71%) sepia(60%) saturate(509%) hue-rotate(3deg) brightness(102%) contrast(102%); }
.svgCinza { filter: invert(97%) sepia(0%) saturate(30%) hue-rotate(177deg) brightness(86%) contrast(94%); }
.svgLaranja { filter: invert(60%) sepia(65%) saturate(1532%) hue-rotate(1deg) brightness(104%) contrast(105%); }