@charset "ISO-8859-1";

/*############################################################### LAYOUT #*/
@font-face {
	font-family: Montserrat;
	src: url('../font/montserrat.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Bahnschrift;
	src: url('../font/bahnschrift.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/** {
	box-sizing: border-box;
}*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
	--cor1: #00D1B2;
	--cor2: #009FFD;
	--cor3: #FFC914;
	--cor4: #E4572E;
	--cor5: #F6F8FA;
	--cor6: #3C403F;
	--cor7: #afafaf;

	--cor11: #00AD91;
	--cor12: #00E5BB;
	--cor13: #addad1;
	--cor14: #daf1ed;
	--cor15: #78C1B6;
	--cor16: #389384;

	--cor50: #eaedf1;
	--cor51: #dde0e4;
	--cor52: #6a706f;
	--cor53: #f1f1f1;
	--cor54: #a1a3a3;
}

.status1 {
	background: #00D1B2;
	color: #035549;
}

.status2 {
	background: #FFC914;
	color: #695205;
}

.status3 {
	background: #E4572E;
	color: #611f0b;
}

.status4 {
	background: #a551cc;
	color: #301c3a;
}

.status6 {
	background: none;
}

.tb_status {
	font-size: 12px;
	padding: 3px 3px 3px 3px;
	border-radius: 5px;
	font-weight: bold;
}
.cor_status0 {
	background: #558ec4;
	color: #183bad;
}
.cor_status1 {
	background: #7ec5ab;
	color: #265644;
}
.cor_status2 {
	background: #e1e6ac;
	color: #7e8038;
}
.cor_status3 {
	background: #edb0ad;
	color: #7a3d3b;
}

body {
	margin: 0 auto;
	font-family: Bahnschrift;
	font-size: 16px;
	background-color: #ffffff;
	color: var(--cor6);
	overflow-x: hidden;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	-khtml-user-select: none;
	-webkit-touch-callout: none;
}

.container {
	display: grid;
	grid-template-areas: "menu header logado" "menu conteudo conteudo";
	grid-template-columns: 350px 1fr auto;
	grid-template-rows: 71px 1fr;
	height: 100vh;
}

.header {
	grid-area: header;
	background: var(--cor5);
	padding: 0px 0px 0px 35px;
	box-shadow: 4px 4px 4px rgba(50, 50, 50, 0.20);
}

.logado {
	grid-area: logado;
	background: var(--cor5);
	padding: 5px 5px 5px 5px;
	box-shadow: 4px 4px 4px rgba(50, 50, 50, 0.20);
}

.menu {
	grid-area: menu;
	background: var(--cor5);
	padding: 5px 5px 5px 5px;
	box-shadow: 4px 4px 4px rgba(50, 50, 50, 0.20);
}

.conteudo {
	grid-area: conteudo;
}

/*############################################################### xSUBAREA (C/ BOTOES) #*/

.container_sub {
	margin-top: 35px;
	display: grid;
	grid-template-areas: "conteudo_sub botao_sub";
	grid-template-columns: 1fr 190px;
}

.conteudo_sub {
	grid-area: conteudo_sub;
}

.botao_sub {
	grid-area: botao_sub;
	padding-left: 10px;
}

/*############################################################### xAREA #*/
.area_obj, .area_tab_btn {
	border: 1px solid var(--cor5);
	border-radius: 5px;
	margin: 15px 15px 15px 15px;
	padding: 15px 15px 15px 15px;
	box-shadow: 4px 4px 4px rgba(50, 50, 50, 0.20);
}

.area_logo, .area_obj, .area_btn {
	display: flex;
  	flex-wrap: wrap;
	gap: 5px 20px;
}

.area_select {
	background: var(--cor5);
}

.area_select .form, .area_visualizar .form {
	margin-right: 10px;
}

.area_info {
	background: var(--cor13);
	width: 500px;
	border-radius: 5px;
	margin: 15px 15px 15px 15px;
	padding: 10px 10px 10px 10px;
	display: none;
	position: absolute;
	right: 0px;
	bottom: 0px;
	box-shadow: 4px 4px 4px rgba(50, 50, 50, 0.20);
	z-index: 1000;
	font-size: 14px;
	text-align: justify;
	cursor: pointer;
}

/*############################################################### xFORM #*/
.form {
	padding: 0px 0px 0px 0px;
	float: left;
}

.form_margin {
	margin-right: 20px;
}

.form_center {
	/*margin: 0px 10px 10px 0px;*/
	text-align: center;
	float: left;
}

.form_center_ob {
	margin: 0px 10px 10px 0px;
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}

.form_linha {
	width: 100%;
	padding: 0px 0px 0px 0px;
}

.form_titulo {
	color: var(--cor1);
	font-weight: bold;
	width: 100%;
	padding: 0px 0px 10px 0px;
	font-size: 16px;
}

.form_padding0 {
	padding: 0px 0px 0px 0px;
}

.form_config {
	margin: 0px 30px 30px 0px;
	float: left;
}

.form_simples {
	float: left;
}

.espaco { /*g*/
	display: inline-block;
	width: 100%;
}

.div_center {
	justify-content: center;
}

/*############################################################### xROLAGEM #*/
::-webkit-scrollbar {
	background: #FFFFFF;
	width: 5px;
}
::-webkit-scrollbar-thumb {
	background-color: var(--cor1);
	border-radius: 15px;
}

/*############################################################### xTELA #*/
.tela {
	display: inline-flex; /*g*/
	flex-wrap: wrap;
}

.tela_home1 {
	flex: 2;
	text-align: center;
}

.tela_home2 {
	flex: 4;
	text-align: justify;
}

.tela_inter1, .tela_usu1 {
	order: 1;
	flex: 12;
}

.tela_inter2, .tela_usu2 {
	order: 2;
	flex: 2;
	text-align: center;
	padding: 0px 0px 0px 10px;
}

.tela_alta1 {
	order: 1;
	flex: 5;
}

.tela_alta2 {
	order: 2;
	flex: 1;
	text-align: center;
}

.tela100 {
	width: 100%;
}

.esq {
	float: left;
}

.dir {
	float: right;
}

/*############################################################### xSEPARADOR #*/
.form_divisor {
	width: 100%;
	height: 6px;
	background: var(--cor5);
	border-radius: 20px;
}

.txt_dividor {
	background: var(--cor5);
	color: var(--cor11);
	font-size: 8px;
	/*box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.20);*/
	font-weight: bold;
	border-radius: 20px;
	padding: 3px 10px 2px 10px;
	margin: 0px 10px 0px 10px;
}

/*############################################################### xMFLEX #*/
.org_flex {
	padding: 5px 0px 5px 0px;
	display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.gap10 {
	gap: 10px;
}

.gap20 {
	gap: 10px 20px;
}

.flex-ajusteS {
	flex-grow: 1;
}

.flex-ajusteN {
	flex-shrink: 0;
}

.sizePPP {
	width: 50px;
}

.sizePP {
	width: 100px;
}

.sizeP {
	width: 200px;
}

.sizeM {
	width: 400px;
}

.sizeG {
	width: 600px;
}

.sizeGG {
	width: 800px;
}

.sizeGGG {
	width: 1000px;
}

.sizeNo {
	flex-basis: 0px;
	max-width: auto;
}

.size100 {
	width: 100%;
}

.flex_c_hv {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex_r {
	/*display: flex;*/
	/*align-items: center;
	justify-content: center;*/
	justify-items: end;
}

.org_flex_r {
	padding: 5px 0px 5px 0px;
	display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

/*###############################################################  xAreaConfirmarcao*/
.area_confirmar {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 900;
	transform: translateY(-100%);
  transition: transform 0.5s ease-in-out;
}

.area_confirmar.show {
  transform: translateY(0%);
  display: block;
}

.area_confirmar .minitela {
  position: absolute;
	top: 30%;
	left: 25%;
	width: auto;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0 0 10px rgba(50, 50, 50, 0.40);
  background: #FFFFFF;
}

.minitela_titulo {
	background: var(--cor11);
	padding: 10px 10px 10px 10px;
	color: #FFFFFF;
	border-radius: 5px 5px 0px 0px;
	text-align: center;
}

.minitela_botao {
	padding: 20px 20px 20px 20px;
}

.area_contato {
	top: 0%;
}

/*###############################################################  xAreaStatus*/
.area_status {
	margin-top: 10px;
	width: auto;
	max-width: 800px;
	border-radius: 10px;
	position: absolute;
	color: #4A4A4A;
	z-index: 500;
	top: 10px;
	left: 60%;
  transform: translateX(-50%) translateY(-100%);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  display: grid;
	grid-template-areas: "statusicon statusmsn statusfechar";
	grid-template-columns: auto 1fr auto;
	height: auto;
	box-shadow: 3px 3px 3px rgba(200, 200, 200, 0.20);
}

.statusicon {
	grid-area: statusicon;
	padding: 5px 5px 5px 5px;
	border-radius: 5px 0px 0px 5px;
}

.statusmsn {
	grid-area: statusmsn;
	padding: 5px 5px 5px 5px;
	font-size: 16px;
	border-right: 1px solid #FFFFFF;
}

.statusfechar {
	grid-area: statusfechar;
	padding: 5px 5px 5px 5px;
	border-radius: 0px 5px 5px 0px;
}

.area_status.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/*StatusConfig*/
.statusfechar button, .statusicon img {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
  justify-content: center;
}

.statusfechar button img {
	width: 20px;
	height: 20px;
	filter: invert(60%) sepia(10%) saturate(308%) hue-rotate(169deg) brightness(92%) contrast(85%);
}

.statusfechar button img:hover {
	transition: 0.3s;
	filter: invert(32%) sepia(6%) saturate(859%) hue-rotate(169deg) brightness(90%) contrast(91%);
}

.txt_statuscod {
	font-size: 12px;
	font-weight: bold;
}

/*StatusCor*/
.statusmsn1 { /*VERDE*/
	background: #7ec5ab;
	color: #265644;
}
.statusicon1 {
	background: #265644;
}
.statusicon1 img {
	filter: invert(85%) sepia(9%) saturate(1195%) hue-rotate(106deg) brightness(85%) contrast(90%);
}

.statusmsn2 { /*VERMELHO*/
	background: #edb0ad;
	color: #7a3d3b;
}
.statusicon2 {
	background: #7a3d3b;
}
.statusicon2 img {
	filter: invert(86%) sepia(5%) saturate(2771%) hue-rotate(314deg) brightness(96%) contrast(93%);
}

.statusmsn3 { /*AMARELO*/
	background: #e1e6ac;
	color: #7e8038;
}
.statusicon3 {
	background: #7e8038;
}
.statusicon3 img {
	filter: invert(92%) sepia(15%) saturate(614%) hue-rotate(16deg) brightness(99%) contrast(90%);
}