@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');



:root {
	color-scheme: light dark;

	--bg-color: rgba(245, 246, 246, 1);
	--tx-color: rgba(63, 66, 66, 1);
	--bg-trans-dobro: rgba(63, 66, 66, 0.2);
	--bg-trans-mais: rgba(63, 66, 66, 0.15);
	--bg-trans: rgba(63, 66, 66, 0.1);
	--bg-trans-meio: rgba(63, 66, 66, 0.05);
	--bg-solid: #d9dbdb;
	--sep-color: #979898;
	--cor-bolinha: #ff0537;
	/* --cor-bolinha: #037aff; */
	--topPrim: 0;
	--stickyySegu: 0;
	font-size: 16px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: rgba(63, 66, 66, 1);
		--tx-color: rgba(235, 236, 236, 1);
		--bg-trans-dobro: rgba(235, 236, 236, 0.2);
		--bg-trans-mais: rgba(235, 236, 236, 0.15);
		--bg-trans: rgba(235, 236, 236, 0.1);
		--bg-trans-meio: rgba(235, 236, 236, 0.05);
		--bg-solid: #515353;
		--sep-color: #808080;
		--cor-bolinha: #ff0537;
	}
}

:root {
	--tempo-anim: 0.3s;
	--header-height: 40px;
	--def-esp: 14px;
	--def-pad: 4px;
	--sep-espessura: 1px;
	--sep-border: solid var(--sep-espessura) var(--sep-color);
	--lh: 1.2em;
	--border-rad: calc(
		(var(--lh) + (2 * var(--def-pad)) + (2 * var(--sep-espessura))) / 2
	)
}

* {
	box-sizing: content-box;
}

.button:disabled {
	opacity:0.5;
	pointer-events: none;
}

body {
	font-family: 'Nunito', ui-rounded, ui-sans-serif, system-ui, sans-serif;
	background-color: var(--bg-color);
	color: var(--tx-color);
	padding: 0;
	margin: 0;
	border: 0;
}

pre, code {
	font-family: monoid, ui-monospace, monospace;
}

hr {
	width: 100%;
	border-style: solid;
	border-color: var(--bg-trans);
	border-width: var(--sep-espessura) 0 0 0 ;
}

.content-space {
	box-sizing: border-box;
	height: calc(100vh - var(--header-height));
	width: 100vw;
	border: 0;
	padding: 0;
	margin: 0;
	overflow-y: auto;
	overflow-x: clip;
}

.coluna-central {
	max-width: calc(600px + 2 * var(--def-pad));
	margin: 0 auto;
	padding: var(--def-esp) var(--def-pad);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: start;
	align-items: stretch;
	gap: var(--def-pad);
}

#popop-fundo:not(.aberto) {
	background: transparent;
	backdrop-filter: blur(0);
	pointer-events: none; 
	opacity: 0;
}

::backdrop {
	background-color: var(--bg-trans);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: background 1s ease-in-out, backdrop-filter 1s ease-in-out, -webkit-backdrop-filter 1s;
}

.hidden {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.semitransparente {
	opacity: 0.5;
}

.grupo,
.coluna {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
}

.destacado {
	padding: 0.2em;
	margin: 0.1em 0;
	background-color: var(--bg-trans);
}

.stickyy {
	/* !important porque a classe é menos específica que o id*/
	background-color: var(--bg-color) !important;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px !important;
	clip-path: inset(0 0 -100px 0) !important;
	border-top: var(--topPrim) solid var(--bg-color) !important;
}

.linha {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 0.2em;
}

input {
	flex: 1 1 auto;
	font-family: 'Nunito', ui-rounded, ui-sans-serif, system-ui, sans-serif;
}

.mini-icon {
	height: 1em;
	width: 1em;
	vertical-align: baseline;
	position: relative;
	top: 2px;
	display: inline-block;
	z-index: unset;
}

label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aviso {
	background-color: rgba(255, 200, 143, 1);
	border-color: rgba(255, 130, 0, 1);
	color: rgba(255, 130, 0, 1);
	padding: 0.5em;
	border-style: dashed;
	border-width: 0.2em;
	border-radius: 0.5em;
	margin: 0.5em;
}
.aviso::before {
	content: "⚠️ ";
}

.aviso.suave {
	background-color: var(--bg-trans);
	border-color: var(--bg-trans);
	color: var(--tx-color);
}

/* Loading full */

#loading-full {
	z-index: 10000;
	background-color: var(--bg-trans);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
#loading-full img,
#loading-full object,
#loading-full svg {
	max-width: 33vw;
	max-height: 33vh;
}

.abaixo_do_header {
	z-index: 999 !important;
}
header {
	--crumb-ang: 22deg;
	z-index: 1000;
	background-color: var(--bg-trans);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: var(--sep-border);
}
.app_logo {
	flex: 0 0 auto;
}

.app_logo img {
	height: calc(0.6 * var(--header-height));
	margin: auto calc(1.4 * var(--def-esp)) auto var(--def-esp);
	
	transform: translate(0, 3px);
}

/* .crumbs {
	flex: 0 1 auto;
} */

/* .crumbs ol {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	list-style-type: none;
	padding-left: 0;
} */

.crumb {
	display: block;
	align-self: stretch;
	height: var(--header-height);
	line-height: var(--header-height);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 0 1 auto;
}

.crumb {
	-webkit-transform: skew(calc(-1 * var(--crumb-ang)));
	-moz-transform: skew(calc(-1 * var(--crumb-ang)));
	-o-transform: skew(calc(-1 * var(--crumb-ang)));
	background-color: transparent;
	position: relative;
	border-left: var(--sep-border);
	transition: all ease var(--tempo-anim);
}

.crumb:hover {
	background-color: var(--bg-trans);
	flex: 0 0 auto; /* aumenta se tiver diminuido */
}

.crumb.semlink a {
	color: var(--sep-color);
}
.crumb.semlink:hover {
	background-color: transparent;
	flex: 0 0 auto; /* aumenta se tiver diminuido */
}

.crumb:last-of-type:hover {
	background-color: transparent;
	background: linear-gradient(90deg, var(--bg-trans) 0%, transparent 100%);
}

.crumb a {
	display: block;
	margin: auto var(--def-esp);
	-webkit-transform: skew(calc(1 * var(--crumb-ang)));
	-moz-transform: skew(calc(1 * var(--crumb-ang)));
	-o-transform: skew(calc(1 * var(--crumb-ang)));
}

.crumb a {
	color: var(--tx-color);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.crumb.semlink a {
	cursor: default;
}

.crumb:last-of-type {
	font-weight: bolder;
	flex: 0 0 auto;
}

.crumb:last-of-type > a[iconchar]::before {
	/* content: '\f0c1'; */
	content: attr(iconchar);
	font-family: var(--fa-style-family, "Font Awesome 6 Free");
	font-weight: var(--fa-style, 900);
	font-size: 0.7em;
	padding-right:var(--def-pad);
	padding-left: 2px; /* pra não cortar o ícone */
	position: relative;
	bottom: 0.15em;
}


.vazio-menu {
	flex: 1 1 auto;
}

/* #grupo-filtro {
	--alt-total: 30px;
	--larg-total: 200px;
	--larg-vazio: var(--alt-total);
	--alt-txt: 1em;
	 display: flex; 
	flex: 0 1 auto;
}

#grupo-filtro:hover {
	flex: 0 0 auto;
}  */

input#filtro {
	--alt-total: 30px;
	--larg-total: 150px;
	--larg-vazio: var(--alt-total);
	--alt-txt: 1em;

	font-family: 'Nunito', ui-rounded, ui-sans-serif, system-ui, sans-serif;
	transition: all ease var(--tempo-anim);
	box-sizing: border-box !important;
	padding: calc((var(--alt-total) - var(--alt-txt)) / 2) 0.5em
		calc((var(--alt-total) - var(--alt-txt)) / 2) 1em;
	margin: auto var(--def-esp) auto 0;
	border: var(--sep-border);
	background: var(--bg-trans);
	border-radius: calc(var(--alt-total) / 2);
	height: var(--alt-total);
	min-width: var(--larg-vazio);
	flex: 0 1 auto;
}

input#filtro:not(:focus):not(:hover):placeholder-shown {
	/* Vazio e sem foco, formato de botão */
	width: var(--larg-vazio);
	text-align: center;
	padding: 0;
	font-size: 1em;
	flex: 0 0 auto;
}
input#filtro:not(:focus):not(:hover):placeholder-shown::placeholder {
	color: var(--tx-color);
}

input#filtro:placeholder-shown {
	/* font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--sep-color); */
}

input#filtro::placeholder {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--sep-color);
	opacity: 1 !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
}

input[type="search"]#filtro:placeholder-shown::-webkit-search-cancel-button {
	appearance: none;
	display: none;
}

input#filtro:not(:placeholder-shown) {
	/* Cheio mas sem foco */
	max-width: var(--larg-total);
	flex: 0 1 auto;
}
input#filtro:placeholder-shown:hover {
	/* Com hover */
	width: var(--larg-total);
	outline: none;
	flex: 0 0 auto;
}
input#filtro:focus {
	/* Com foco cheio ou mesmo que vazio */
	width: var(--larg-total);
	background: var(--bg-color);
	outline: none;
	flex: 0 0 auto;
}

.but_barra_menu {
	--tamanho-but: 30px;
	position: relative;
	height: var(--tamanho-but);
	width: var(--tamanho-but);
	box-sizing: border-box !important;
	margin: auto var(--def-esp) auto 0;
	border: var(--sep-border);
	background: var(--bg-trans);
	border-radius: calc(var(--tamanho-but) / 2);
	color: var(--tx-color);
	opacity: 1 !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
	transition: all ease var(--tempo-anim);
	display: flex;
	color: var(--tx-color);
	text-decoration: none;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
		animation-name: shakeshakeshake;
		animation-duration: 2s;
		animation-timing-function: linear;
		animation-delay: 1s;
		animation-iteration-count: infinite;
		animation-direction: normal;
		animation-fill-mode: none;
			
		/* shorthand
		animation: alert 2s linear 1s infinite normal none;*/
	}
	@keyframes shakeshakeshake {
			
		0% {
			transform:translateX(0);
		}
		5% {
			transform:translateX(-5px);
		}
		10% {
			transform:translateX(5px);
		}
		15% {
			transform:translateX(-5px);
		}
		20% {
			transform:translateX(5px);
		}
		25% {
			transform:translateX(-5px);
		}
		30% {
			transform:translateX(5px);
		}
		35% {
			transform:translateX(-5px);
		}
		40% {
			transform:translateX(5px);
		}
		45% {
			transform:translateX(-5px);
		}
		50% {
			transform:translateX(0);
		}
}

.but_barra_menu:hover {
	background: var(--bg-trans-mais);
}

.but_barra_menu.notif::after {
	content:' ';
	height: calc(var(--tamanho-but) / 3);
	width: calc(var(--tamanho-but) / 3);
	border-radius: 1000px;
	overflow: hidden;
	position: absolute;
	background: var(--cor-bolinha);
	right:-2px;
	top:-2px;
}

.user_info {
	--alt-total: 150px;
	--larg-total: 300px;
	--alt-icon: 30px;
	--larg-icon: var(--alt-icon);
	--alt-txt: 1em;
	display: flex;
	flex: 0 0 auto;
	transition: all ease var(--tempo-anim);
	height: var(--alt-icon);
}

.user_info .logado,
.user_info .deslogado {
	--mult: 1;
	transition: all ease var(--tempo-anim);
	box-sizing: border-box !important;
	padding: calc((var(--alt-icon) - var(--alt-txt)) / 2) 0.5em
		calc((var(--alt-icon) - var(--alt-txt)) / 2) 1em;
	width: var(--larg-icon);
	height: var(--alt-icon);
	margin: auto calc((var(--header-height) - var(--alt-icon)) / 2) auto 0;
	border: var(--sep-border);
	background: var(--bg-trans);
	border-radius: calc(var(--alt-icon) / 2);
	border-top-left-radius: calc(
		(var(--mult) * var(--alt-icon) / 2) + (var(--mult) - 1) * var(--def-pad)
	);
	flex: 0 0 auto;
	overflow-x: hidden;
	overflow-y: hidden;
	padding: 0;
	
}
.user_info .logado:hover {
	--mult: 2;
	overflow-y: visible;
	background: var(--bg-solid);
	width: var(--larg-total);
	height: var(--alt-total);
	padding: var(--def-pad);
	position: relative;
}

.user_info .logado:hover form {
	position: absolute;
	bottom: var(--def-pad);
	left: var(--def-pad);
	right: var(--def-pad);
}
.user_info .logado form button {
	border-radius: calc( var(--border-rad) - var(--def-pad) );
}

.user_info .deslogado:hover {
	--mult: 1;
	width: 100px;
}
.user_info .deslogado .button {
	background: transparent;
}
.user_info .deslogado:hover .button {
	background: var(--bg-trans);
	width: 100px;
}
.user_info .deslogado:hover .button::after {
	content: "Login";
}

.user_info .avatar_div {
	box-sizing: content-box;
	transition: all ease var(--tempo-anim);
	width: calc((var(--mult) * var(--alt-icon)) - (2 * var(--sep-espessura)));
	height: calc((var(--mult) * var(--alt-icon)) - (2 * var(--sep-espessura)));
	font-size: calc(1em * var(--mult));
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: calc(var(--mult) * var(--alt-icon) / 2);
	border: var(--sep-border);
	padding: 0;
	/* background: rgba(255, 0, 0, 0.376); */
	margin: calc(-1 * var(--sep-espessura));
}
.user_info .logado:hover .avatar_div {
}

.user_info .avatar_div img {
	width: 100%;
	height: 100%;
}

.button,
button,
a.button {
	font-family: 'Nunito', ui-rounded, ui-sans-serif, system-ui, sans-serif;
	transition: all ease var(--tempo-anim);
	/* padding: auto 12px; */
	display: flex;
	color: var(--tx-color);
	text-decoration: none;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	border-radius: var(--def-esp);
	border: var(--sep-border);
	border-color: transparent;
	flex-grow: 1;
	font-size: 1em;
	/* margin: var(--def-esp); */
	padding: var(--def-pad);
	background: var(--bg-trans) !important;
	gap: var(--def-esp);
}

.button:hover,
button:hover {
	border-color: var(--sep-color);
}

.button.destaque,
button.destaque {
	background: var(--bg-trans-dobro) !important;
}

.button-row-inline {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: flex-end;
	flex: 0 0 auto;
	width: min-content;
	gap: var(--def-pad);
}

.button-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: space-around;
	gap: var(--def-pad);
}
.button-column {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-around;
	gap: var(--def-pad);
}

.button-row .button,
.button-row button {
	flex-direction: row;
}
.button-column .button,
.button-column button {
	flex-direction: row;
}

span.badge {
	height: 1em;
	color: var(--bg-solid);
	display: inline-block;
	background: var(--tx-color);
	border-radius: 1000px;
	line-height: 1em;
	padding: 0 0.3em;
	box-sizing: border-box;
}
span.badge::after {
	font-size: 0.6em;
	content: attr(quant);
	vertical-align: middle;
}

input,
textarea, select {
	font-size: 1em;
	font-family: 'Nunito', ui-rounded, ui-sans-serif, system-ui, sans-serif;
	height: var(--lh);
	transition: all ease var(--tempo-anim);
	padding: var(--def-pad) var(--def-esp);
	border: var(--sep-border);
	background: var(--bg-trans);
	border-radius: var(--border-rad);
}

select {
	/* appearance: none; */
}
textarea {
	height: min-content;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
	color: var(--sep-color);
	opacity: 1 !important;
	font-family: 'Nunito', ui-rounded, ui-sans-serif, system-ui, sans-serif;
}

input:placeholder-shown:hover,
textarea:placeholder-shown:hover,
select:placeholder-shown:hover {
	outline: none;
}
input:focus,
textarea:focus,
select:focus {
	background: var(--bg-color);
	outline: none;
}

input:read-only,
textarea:read-only{
	background: transparent;
	border-color: transparent;
}
input:read-only::placeholder,
textarea:read-only::placeholder,
select:read-only::placeholder {
	color: transparent;
}

.campo {
	display: grid;
	grid-template-columns: 33% auto;
	grid-template-areas: "label field";
	gap: var(--def-pad);
	align-items: center;
}

.campo label {
	justify-self: end;
	grid-area: label;
	background-color: var(--bg-trans);
	font-size: 1em;
	height: var(--lh);
	transition: all ease var(--tempo-anim);
	border-radius: calc(
		(var(--lh) + (2 * var(--def-pad)) + (2 * var(--sep-espessura))) / 2
	);
	border: var(--sep-border);
	border-color: transparent;
	padding: var(--def-pad) var(--def-esp);
	max-width: calc(100% - 2 * var(--def-esp));
}

.campo input {
	justify-self: stretch;
	grid-area: field;
}

.campo input:invalid {
	background-color: rgba(255, 0, 0, 0.273);
}

.campo input#campo_fn:read-only::placeholder {
	color: var(--tx-color);
}

.campo textarea.code {
	height: calc(3 * var(--lh));
	grid-column-start: 1;
	grid-column-end: -1;
	font-family: monospace;
	white-space: pre;
}
.campo textarea.code:read-only {
	border-color: var(--sep-color);
}

.multifield {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: var(--def-pad);
}

.multifield input {
	flex: 0 1 auto;
	width: 4em;
}

.multifield input:only-of-type {
	flex: 1 1 auto;
}

.multifield input.grow {
	flex: 1 1 auto;
}

img.mini-qrcode {
	max-height: 70px;
	max-width: 70px;
	border-radius: var(--def-pad);
	margin-left: var(--def-esp);
}





a.inline_user {
	--tam-avatar:calc( var(--lh) + ( 2 * var(--def-pad) ) - ( 2 * var(--sep-espessura) ) ) !important;
	position: relative !important;
	display: inline-block !important;
	background: var(--bg-trans) !important;
	font-size: 1em !important;
	height: var(--lh) !important;
	/* transition: all ease var(--tempo-anim); */
	padding: var(--def-pad) var(--def-esp) var(--def-pad) calc( var(--def-pad) + var(--tam-avatar) ) !important;
	border: 0 !important;
	border-radius: var(--border-rad) !important;
	color: var(--tx-color) !important;
	text-decoration: none !important;
}
span.inline_user_avatar {
	--tam-avatar:calc( var(--lh) + ( 2 * var(--def-pad) ) - ( 2 * var(--sep-espessura) ) ) !important;
	position: relative !important;
	display: inline-block !important;
	background: var(--bg-trans) !important;
	font-size: 1em !important;
	height: var(--tam-avatar) !important;
	width: var(--tam-avatar) !important;
	/* transition: all ease var(--tempo-anim); */
	padding: var(--sep-espessura) !important;
	border: 0 !important;
	border-radius: var(--border-rad) !important;
	color: var(--tx-color) !important;
	text-decoration: none !important;
}

.inline_email { 
	--tam-avatar:1em;
	position: relative;
	display: inline-block;
	/* background: var(--bg-trans); */
	/* font-size: 1em; */
	/* transition: all ease var(--tempo-anim); */
	
}


a.inline_user img {
	position: absolute !important;
	background: var(--bg-trans) !important;
	height: var(--tam-avatar) !important;
	border: var(--sep-espessura) solid transparent !important;
	/* border: var(--sep-border); */
	border-radius: calc( var(--tam-avatar) ) !important;
	top: 0  !important;
	left: 0  !important;
}
span.inline_user_avatar img {
	background: var(--bg-trans) !important;
	height: var(--tam-avatar) !important;
	border: var(--sep-espessura) solid transparent !important;
	/* border: var(--sep-border); */
	border-radius: calc( var(--tam-avatar) ) !important;
	position: absolute !important;
	top: 0  !important;
	left: 0  !important;
}

.inline_email img{ 
	background: var(--bg-trans);
	height: var(--tam-avatar);
	border-radius: calc( var(--tam-avatar) );
	vertical-align: baseline;
	margin-right: var(--def-pad);
	position: relative;
	top: 0.1em

}

a.inline_user:hover,
span.inline_user_avatar:hover {
	/* background: var(--bg-color); */
	z-index: 1000 !important;
}

a.inline_user > .info {
	visibility: hidden;
	min-width: 150px;
	background-color: var(--bg-color);
	color: var(--tx-color);
	padding: 1em;
	border-radius: var(--border-rad);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px;
	
	/* Position the tooltip */
	position: absolute;
	z-index: -1;
	/* padding-top:calc( 2 * var(--border-rad) + 1em); */
	top: 100%;
	left: 0;
	
}

span.inline_user_avatar > .info {
	visibility: hidden;
	position: absolute;
	background: var(--bg-trans);
	height: var(--tam-avatar);
	border: var(--sep-espessura) solid transparent;
	/* border: var(--sep-border); */
	border-radius: calc( var(--tam-avatar) );
	padding: 0 var(--def-pad) 0 calc( var(--tam-avatar) + var(--def-pad) );
	vertical-align: middle;
	line-height: var(--tam-avatar);
	top: 0 ;
	left: 0 ;
	z-index: -1;
}

a.inline_user:hover > .info  {
	visibility: visible;
}

span.inline_user_avatar:hover > .info  {
	visibility: visible;
	display: inline-block;
}



input[type="file"] {
	font-family: 'Nunito', ui-rounded, ui-sans-serif, system-ui, sans-serif;
	font-size: 0.8em;
	height: initial;
	padding: initial;
	margin: initial;
	border-radius: initial;
}


.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}

header .app_menu {
	position: absolute;
	display: block;
	
	top: var(--header-height);
	left: 0;
	/* box-shadow: 0 0 0 1px black; */
	margin:0;
	padding:0;
	z-index: 1000;
}

header .app_menu > li {
	background: var(--bg-trans);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	-webkit-transform: skew(calc(-1 * var(--crumb-ang)));
	-moz-transform: skew(calc(-1 * var(--crumb-ang)));
	-o-transform: skew(calc(-1 * var(--crumb-ang)));
	position: relative;
	border: var(--sep-border);
	transition: all ease var(--tempo-anim);
	padding-left: 3em;
	margin-left: -3em;
	margin-bottom: calc( -1 * var(--sep-espessura) )
}


header .app_menu li > a {
	display: block;
	margin: auto var(--def-esp);
	-webkit-transform: skew(calc(1 * var(--crumb-ang)));
	-moz-transform: skew(calc(1 * var(--crumb-ang)));
	-o-transform: skew(calc(1 * var(--crumb-ang)));
	color: var(--tx-color);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}



.version_info {
	position:fixed;
	bottom: 0;
	right: 0;
	padding: var(--def-pad) var(--def-esp);
	font-size: 0.7rem;
	border-top-left-radius: var(--border-rad);
	background-color: var(--bg-trans);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.index-paginas {
	margin: var(--def-esp) auto;
	width: 20em;
	gap:var(--def-esp);
	}
.index-paginas .button {
	padding: var(--def-pad) var(--def-esp);
	align-self: stretch;
}

.index-paginas hr {
	width: calc( 100% - var(--border-rad) );
	border-style: solid;
	border-color: var(--bg-trans);
	border-width: var(--sep-espessura) 0 0 0 ;
}


input[type="checkbox"] {
	flex-grow: 0;
	flex-shrink: 0;
}


.userprefs label {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: var(--def-esp);
}



.userprefs label input[type="checkbox"] {
	height: 1em;
	width: 1em;	
}


.sn-notifications-container {
	/* colors */
	--sn-neutral-900: var(--tx-color) !important;
	--sn-neutral-800: var(--sep-color) !important;
	--sn-neutral-700: var(--bg-solid) !important;
	--sn-white-900: var(--bg-color) !important;
	/* --sn-success-color: rgb(111, 207, 151);
	--sn-success-progress-color: rgb(84, 170, 120);
	--sn-error-color: rgb(235, 87, 87);
	--sn-error-progress-color: rgb(192, 69, 69);
	--sn-warning-color: rgb(242, 201, 76);
	--sn-warning-progress-color: rgb(196, 166, 79);
	--sn-info-color: rgb(81, 205, 243);
	--sn-info-progress-color: rgb(84, 169, 196); */
	
}



	:is(#onlybox,.onlybox) {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
	height: calc(100vh - var(--header-height));
	width: 100vw;
	border: 0;
	padding: 0;
	margin: 0;
	overflow-y: auto;
	overflow-x: clip;
}
	:is(#onlybox,.onlybox) :is(#thebox,.thebox) {
	max-width: 400px;
	background: var(--bg-grupo);
	border-radius: 1.5em;
	color: var(--tx-color);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px !important;
	padding: 1.5em;
	box-sizing: content-box;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	}
	
	:is(#onlybox,.onlybox) :is(#thebox,.thebox) :first-child {
	margin-top:0;
	}
	:is(#onlybox,.onlybox) :is(#thebox,.thebox) :last-child {
	margin-bottom:0;
	}



.button-column > input {
	width: calc( 100% - 2 * var(--def-esp) );
}

.button-column > label {
	font-size: 0.7em;
	text-align: left;
	align-self: flex-start;
	margin-bottom: calc( -1 * var(--def-esp) );
}


.negrito {
	font-weight: bold;
}
.mono {
	font-family: monoid;
	font-size: 0.9em;
}







#popop-fundo {
	z-index: 5000;
	background-color: var(--bg-trans);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	/* display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center; */
	transition: background 1s ease-in-out, backdrop-filter 1s ease-in-out, -webkit-backdrop-filter 1s;
	pointer-events: auto;
}

.popop.aberto {
	opacity: 100%;
	transform: scale(100%);
	transition: transform var(--tempo-anim) ease-in-out, opacity var(--tempo-anim) ease-in-out;
	cursor: auto;
}
.popop:not(.aberto) {
	opacity: 0%;
	transform: scale(0%);
	transition: transform var(--tempo-anim) ease-in-out, opacity var(--tempo-anim) ease-in-out;

}


#popop-fundo.aberto {
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: all var(--tempo-anim) ;
	opacity: 100%;
}

#popop-fundo:not(.aberto) {
	background: transparent;
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	pointer-events: none; 
	opacity: 0;
	transition: all var(--tempo-anim);
}





.popop {
	position: fixed;
	top:50%;
	left:50%;
	translate: -50% -50%;

	margin:0;
	z-index: 6000;
	width: auto;
	min-width: var(--w-side-min);
	height: auto;
	padding: calc( 2 * var(--def-esp) );
	max-width: calc( var(--w-page-max) - 2 * var(--def-esp) - 4 * var(--def-esp) );
	--popop-max-h: calc( 100vh - 2 * var(--def-esp) - 4 * var(--def-esp) );
	max-height: var(--popop-max-h);
	overflow: auto;
	background: var(--bg-color);
	border-radius: calc( 1.5 * var(--border-rad) );
	color: var(--tx-color);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px !important;
	box-sizing: content-box;
	display: flex;
	flex-direction: column;
}

.popop:is(.filetype_pdf, .filetype_html, .filetype_eml, .filetype_zip, .filetype_dwg, .filetype_dxf) {
	height: var(--popop-max-h);
	width: calc( var(--w-page-max) - 2 * var(--def-esp) );
	overflow: hidden;
}

.popop:is(.filetype_pdf, .filetype_html, .filetype_eml, .filetype_zip, .filetype_dwg, .filetype_dxf) iframe {
	height: calc( var(--popop-max-h) - 2 * var(--def-esp) );
	border: none;
	margin: calc( -2 * var(--def-esp) ) calc( -2 * var(--def-esp) ) 0 calc( -2 * var(--def-esp) );
	border-bottom: 1px solid var(--sep-color);
}

.popop:is(.filetype_pdf):is( .nfe) iframe {
	height: calc( var(--popop-max-h) );
}

.popop:is(.filetype_pdf, .filetype_html, .filetype_eml, .filetype_zip, .filetype_dwg, .filetype_dxf) .button-row,
.popop:is(.filetype_pdf, .filetype_html, .filetype_eml, .filetype_zip, .filetype_dwg, .filetype_dxf) .file .info
 {
	margin-top: calc( 0.7 * var(--def-esp) );
}
.popop:is(.filetype_pdf, .filetype_html, .filetype_eml, .filetype_zip, .filetype_dwg, .filetype_dxf) .button-row {
	margin-bottom: calc( -1 * var(--def-esp) );
}

.popop .button-row {
	margin-top: calc( 2 * var(--def-esp) );
	align-self: stretch;
}

.popop :is(.button, button, input[type="button"]) {
	font-size: 0.8em;
}


/* .popop::before {
	content: "";
	display: block;
	position: absolute;
	top:0;
	width: 100%;
	left:0;
	right:0;
	height: calc( 2 * var(--def-esp) );
	background: linear-gradient(180deg, var(--bg-color) 0%, transparent 100%);
	pointer-events: none;
}

.popop::after {
	content: "";
	display: block;
	position: absolute;
	bottom:0;
	width: 100%;
	left:0;
	right:0;
	height: calc( 2 * var(--def-esp) );
	background: linear-gradient(0deg, var(--bg-color) 0%, transparent 100%);
	pointer-events: none;
} */


@media all and (max-width: 800px) {
	.popop {
		max-width: calc( 100vw - 2 * var(--def-esp) - 4 * var(--def-esp) );
		--popop-max-h: calc( 100vh - 2 * var(--def-esp) - 4 * var(--def-esp) );
		border-radius: var(--border-rad);
	}
}

@media all and (max-width: 600px) {
	.popop {
		max-width: calc( 100vw - 4 * var(--def-esp) );
		--popop-max-h: calc( 100vh - 4 * var(--def-esp) );
		border-radius: calc( 0.5 * var(--border-rad) );
	}
}

.popop .file {
	display: flex;
	align-items: center;
}
.popop .file.preview {
	flex-direction: column;
}
.popop .file.icon {
	flex-direction: row;
}



.popop .file.icon img {
	max-height: 256px;
	max-width: 256px;
}

.popop .visibilidade {
	background: var(--bg-msg-solid);
	border-radius: var(--border-rad);
	padding-left: var(--def-esp);
	padding-right: var(--def-esp);
}
.popop .file .item_info {
	background: var(--bg-trans);
	border-radius: var(--border-rad);
	padding-left: var(--def-esp);
	padding-right: var(--def-esp);
}

.popop .file img.item_mini_icon {
	max-height: 1.6em;
	max-width: 1.6em;
	background: var(--bg-trans-meio);
	border-radius: var(--border-rad);
	padding: var(--def-pad);
	/* margin-right: calc( -1 * ( var(--def-pad) ) ); */
}

.popop .file .info {
	margin-top: calc( 2 * var(--def-esp) );
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--def-pad);
} 

.popop .file .info .linha_info {
	display: flex;
	align-items: center;
	gap: var(--def-pad);
}


/* MODIFIED: [ 2023-10-18 11:04:32 (Alexandre) ] */