@CHARSET "UTF-8";

.tabela-badge {
	border-radius: 2px;
	padding: 0.25em 0.5rem;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.3px;
	text-align: center;
}

.tabela-badge.status-ativo {
	background: #ACEBB4;
	color: #348861;
}

.tabela-badge.status-inativo {
	background: #FABD9A;
	color: #AD342B;
}

.tabela-badge.status-warning {
	background: #F8D895;
	color: #A76927;
}

:root {
	--overflow-offset : 0
}

.picture_border {
	border: 1px solid #6f6f6f !important;
	border-radius: 4px !important;
	padding: 2px !important;
	color: #6f6f6f !important;
	border: 1px solid #6f6f6f !important;
	margin-top: 2px !important;
}

.min_width20px {
	min-width: 20px !important;
}

.min_width10px {
	min-width: 10px !important;
}

.min_width15px {
	min-width: 15px !important;
}

.min_width30px {
	min-width: 30px !important;
}

.min_width40px {
	min-width: 40px !important;
}

.min_width50px {
	min-width: 50px !important;
}

.min_width60px {
	min-width: 60px !important;
}

.min_width70px {
	min-width: 70px !important;
}

.min_width80px {
	min-width: 80px !important;
}

.min_width90px {
	min-width: 90px !important;
}

.min_width100px {
	min-width: 100px !important;
}

.min_width110px {
	min-width: 110px !important;
}

.min_width120px {
	min-width: 120px !important;
}

.min_width130px {
	min-width: 130px !important;
}

.min_width140px {
	min-width: 140px !important;
}

.min_width150px {
	min-width: 150px !important;
}

.min_width160px {
	min-width: 160px !important;
}

.min_width170px {
	min-width: 170px !important;
}

.min_width180px {
	min-width: 180px !important;
}

.min_width190px {
	min-width: 190px !important;
}

.min_width200px {
	min-width: 200px !important;
}

.width10px {
	width: 10px !important;
}

.width15px {
	width: 15px !important;
}

.width20px {
	width: 20px !important;
}

.width30px {
	width: 30px !important;
}

.width40px {
	width: 40px !important;
}

.width50px {
	width: 50px !important;
}

.width60px {
	width: 60px !important;
}

.width70px {
	width: 70px !important;
}

.width80px {
	width: 80px !important;
}

.width90px {
	width: 90px !important;
}

.width100px {
	width: 100px !important;
}

.width110px {
	width: 110px !important;
}

.width120px {
	width: 120px !important;
}

.width130px {
	width: 130px !important;
}

.width140px {
	width: 140px !important;
}

.width150px {
	width: 150px !important;
}

.width200px {
	width: 200px !important;
}

.width100 {
	width: 100% !important;
}

.width90 {
	width: 90% !important;
}

.width80 {
	width: 80% !important;
}

.width70 {
	width: 70% !important;
}

.width60 {
	width: 60% !important;
}

.width50 {
	width: 50% !important;
}

.width40 {
	width: 40% !important;
}

.width30 {
	width: 30% !important;
}

.width20 {
	width: 20% !important;
}

.width10 {
	width: 10% !important;
}

.width15 {
	width: 15% !important;
}

.margin_top10px {
	margin-top: 10px !important;
}

.margin_top15px {
	margin-top: 15px;
}

.margin_top20px {
	margin-top: 20px;
}

.height30px {
	height: 30px !important;
}

.vertical_margin10px {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}

.vertical_margin20px {
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

.vertical_margin30px {
	margin-top: 30px !important;
	margin-bottom: 30px !important;
}

.vertical_margin40px {
	margin-top: 40px !important;
	margin-bottom: 40px !important;
}

.vertical_margin50px {
	margin-top: 50px !important;
	margin-bottom: 50px !important;
}

.vertical_margin_auto {
	margin: auto 0 !important;
}

.horizontal_margin_auto {
	margin: 0 auto !important;
}

.padding5px {
	padding: 5px !important;
}

.padding10px {
	padding: 10px !important;
}

.no_horizontal_padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.no_vertical_padding {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.text_left {
	text-align: left !important;
}

.text_center {
	text-align: center !important;
}

.text_right {
	text-align: right !important;
}

.bottomTelaPadraoBotaoCentro {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px 5px;
}

.border {
	border: 1px solid red !important;
}

.display_none {
	display: none !important;
}

.display_flex {
	display: flex !important;
}

.display_block {
	display: block !important;
}

.display_inlineblock {
	display: inline-block !important;
}

.flex1 {
	flex: 1;
}

.order1 {
	order: 1;
}

.order2 {
	order: 2;
}

.order3 {
	order: 3;
}

.uppercase {
	text-transform: uppercase !important;
}

.lowercase {
	text-transform: lowercase !important;
}

.text_transform_none {
	text-transform: none !important;
}

.position_relative {
	position: relative !important;
}

.position_absolute {
	position: absolute !important;
}

.customSeparator {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}

.yellowStatusDigitacao {
	background: #ffffe6 !important;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.fn {
	float: none !important;
}

.bold {
	font-weight: bold;
}

.dialog_mob_height_250 {
	height: 250px !important;
}

.dialog_mob_height_550 {
	height: 550px !important;
}

.dialog_mob_height_700 {
	height: 700px !important;
}

/* Larguras de p:dialog (styleClass). PF 16: a classe fica na camada .ui-dialog, então a largura vai
   para a janela visível (.ui-dialog-box) - ver docs/MIGRACAO_PRIMEFACES_16.md. */
.dialog_mob_width_400 .ui-dialog-box {
	width: 400px !important;
}

.dialog_mob_width_550 .ui-dialog-box {
	width: 550px !important;
}

.dialog_mob_width_700 .ui-dialog-box {
	width: 700px !important;
}

.dialog_mob_width_900 .ui-dialog-box {
	width: 900px !important;
}

@media ( max-width : 767px) {
	.dialog_mob_height_250 {
		height: 250px !important;
	}
	.text_mob_left {
		text-align: left !important;
	}
	.text_mob_right {
		text-align: right !important;
	}
	.width10_mob_100 {
		width: 100% !important;
	}
	.width15_mob_100 {
		width: 100% !important;
	}
	.width20_mob_100 {
		width: 100% !important;
	}
	.width50_mob_100 {
		width: 100% !important;
	}
	.mob_display_none {
		display: none !important;
	}
	.mob_flex1 {
		flex: 1;
	}
	.mob_vertical_margin10px {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}
	.dialog_mob_width_400 .ui-dialog-box {
		width: 100% !important;
	}
	.dialog_mob_width_550 .ui-dialog-box {
		width: 100% !important;
	}
	.dialog_mob_width_700 .ui-dialog-box {
		width: 100% !important;
	}
	.dialog_mob_width_900 .ui-dialog-box {
		width: 100% !important;
	}
}

/* lzzgabriel - conserta o align dos selectOneMenu das tabelas de pesquisa
   deve ser colocado no span que envolve o select */
.conserta-select {
	display: inline-flex;
}

.animated-overflow {
	animation: 10s anima-overflow linear infinite;
}

span:hover > .animated-overflow{
	animation: none
}

@keyframes anima-overflow {
	10% {
		transform: translate(0);
	}
	50.99% {
		transform: translate(-100%);
	}
	51% {
		transform: translate(140px);
	}
	90% {
		transform: translate(0);
	}
	100% {
		transform: translate(0);
	}
}
/* "X" que limpa a pesquisa do menu lateral (template-rain/menu.xhtml): fica DENTRO da caixa, à esquerda da lupa,
   e só aparece quando há texto (o campo tem placeholder, então :placeholder-shown = vazio). Ao clicar, o menu refaz a consulta. */
.pesquisa-menu > i.pesquisa-menu-limpar.pi {
	display: none;
	position: absolute;
	left: auto;
	right: 2.1rem;
	top: 50%;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: .8rem;
	cursor: pointer;
	color: var(--text-color-secondary, #6c757d);
}

.pesquisa-menu > input:not(:placeholder-shown) ~ i.pesquisa-menu-limpar.pi {
	display: inline-flex;
}

.pesquisa-menu > i.pesquisa-menu-limpar.pi:hover {
	background: var(--surface-border, #dee2e6);
	color: var(--text-color, #212529);
}

/* border-box: sem isso o padding extra soma à largura do campo e cria barra de rolagem horizontal no menu */
body .pesquisa-menu > input.pesquisa-menu-input {
	box-sizing: border-box;
}

body .pesquisa-menu > input.pesquisa-menu-input:not(:placeholder-shown) {
	padding-right: 3.6rem;
}

/* para fazer a caixa de pesquisa do menu desaparecer quando não for "static" ou "overlay" */
.layout-horizontal > .menu-wrapper > .layout-menu-container > form > div > .pesquisa-menu {
	display: none;
}
.layout-slim > .menu-wrapper > .layout-menu-container > form > div > .pesquisa-menu {
	display: none;
}
.layout-slim-plus > .menu-wrapper > .layout-menu-container > form > div > .pesquisa-menu {
	display: none;
}