.displayFlex {display: flex;}
.displayFlexCentro {align-items: center;}
.displayFlexStart {align-items: flex-start;}
.displayFlexJustCentro {justify-content: center;}
.displayFlexSpaceBetween {justify-content: space-between;}
.displayFlexSpaceAround {justify-content: space-around;}
.flexGrow1 {flex-grow: 1;}
.gap5 {gap: 5px;}
.gap10 {gap: 10px;}
.gap20 {gap: 20px;}

.vermelho {color: red;}
.cinza {color: gray;}
.verde {color: green;}

.fundoCorPrincipal {background-color: var(--corPrincipal); color: var(--corPrincipalTexto);}
.fundoBranco {background-color: white; color: black;}
.fundoCinza {background-color: #cacaca; color: black;}
.fundoCinzaClaro {background-color: #dbdbdb; color: black;}
.fundoVermelhoClaro {background-color: #d68484; color: black;}
.fundoVermelho {background-color: #b80000; color: white;}

.fundoVerdeClaro {background-color: #ccf6cc;}

.hoverVermelho:hover {background-color: #980000;}

.padding3 {padding: 3px;}
.padding5 {padding: 5px;}
.padding3-5 {padding: 3px 5px;}
.padding5-10 {padding: 5px 10px;}
.padding10 {padding: 10px;}
.padding10-20 {padding: 10px 20px;}
.padding20-10 {padding: 20px 10px;}

.margemAuto {margin: auto;}
.margem3 {margin: 3px;}
.margem5 {margin: 5px;}
.margem10 {margin: 10px;}
.margemDir5 {margin-right: 5px;}

.ladoALado {display: inline-table;}

.maiuscula {text-transform: uppercase;}

.divHover:hover {background-color: #b8b8b8;}
.divHoverOpacidade:hover {opacity: 0.8;}

.posicaoRelativa {position: relative;}

.cursorMao {cursor: pointer;}
.cursorNormal {cursor: default;}

.sublinhado {text-decoration: underline;}

.centro {text-align: center;}
.esquerda {text-align: left;}
.direita {text-align: right;}

.negrito {font-weight: bold;}

.fonteMaior {font-size: 1.2rem;}

.corPrincipal {color: var(--corPrincipal);}
.corVerde {color: green;}
.corVermelho {color: red;}
.corAzul {color: darkblue;}

.bordaCinza {border: 1px solid gray;}
.bordaCinzaClaro {border: 1px solid #c8c8c8;}

.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;
}

#divResultado {position: fixed; top: 40px; right: 10px; z-index: 9999999; cursor: pointer;}
.sucesso {padding: 15px; color: green; font-weight: bold; background-color: #ccf6cc; border-radius: 5px; border: 1px solid green; border-left: 4px solid green;}
.erro {padding: 15px; color: red; font-weight: bold; background-color: #f0b9b9; border-radius: 5px; border: 1px solid red; border-left: 4px solid red;}


.linhaCorPrincipal {border: 0px; border-bottom: 1px var(--corPrincipal) solid;}
.linhaCinzaClaro {border: 0px; border-bottom: 1px #cacaca solid;}
.linhaCinza {border: 0px; border-bottom: 1px grey solid;}
.linhaBranca {border: 0px; border-bottom: 1px white solid;}
.linhaBranca2px {border: 0px; border-bottom: 2px white solid;}

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

table.tabela {width: 100%; border: 1px solid var(--corPrincipal); border-spacing: 0px;}
table.tabela thead tr {background-color: var(--corPrincipal); color: var(--corPrincipalTexto); text-align: center;}
table.tabela th, table.tabela td {padding: 6px 10px; border: 1px solid var(--corPrincipal);}
table.tabela tbody tr:hover {background-color: #f2f2bd;}

table.tabelaClientes tr:hover {cursor: pointer;}


/*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 var(--corPrincipal);
	border-left: 4px solid var();
	border-right: 4px solid transparent;

	animation: spin .7s infinite linear;
}
.carregando div:nth-child(2)::before {
	content: "Carregando... Espere um momento.";
	color: var(--corPrincipal);
}
@keyframes spin {
	to {transform: rotate(360deg);}
}


/*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; }
.svg23 { height: 23px; width: 23px; 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%); }