/* --------------------------------------------------------------

   theme.css
   Tema padrão da ASPAS (para SPIP 4)
   Ricardo Porto

-------------------------------------------------------------- */

:root {
	/* -- palette
	------------------------------------------ */
	--card-background: rgba(255, 255, 255, 0);
	--card-border-color: rgb(225, 223, 218);
	--card-border-hover-color: rgb(150, 148, 145);
	--card-border-radius: 0;
	--card-padding: 3rem;
	--card-shadow: 0 1px 1rem rgba(0, 0, 0, 0);
	--card-text-size: 1.2rem;
	--gray-dark: rgb(35, 35, 40);
	--gray-medium: rgb(150, 150, 150);
	--page-max-width: 1366px;
	--text-gray: rgb(120, 120, 120);
	--footer-background: rgb(110, 110, 110);
}


/* ------------------------------------------
/* Hacks dos estilos do SPIP
/* ------------------------------------------ */

div.page {
	margin-top: 8rem;
	max-width: var(--page-max-width);
	width: 100%;
}

.page_article .page,
.page_recherche .page,
.page_rubrique .page,
.page_mot .page {
	margin-top: var(--top-menu-height);
}

.spip_logo {
	float: none;
}

.aside {
	float: none;
	width: 100%;
	overflow: unset;
}

.menu {
	border-bottom: 1px solid var(--card-border-color);
	margin-bottom: 2rem;
}
.menu ul ul,
.menu ul ul ul {
	border-left: 1px solid var(--card-border-color);
	list-style-type: none;
	margin-bottom: 0.5rem;
	/* margin-left: 0.5rem; */
	padding-left: 1rem;
}

.formulaire_recherche {
	border-bottom: 1px solid var(--card-border-color);
	margin-bottom: 2rem;
	padding: 0.5rem 0 1rem;
}

.nav-sommaire {
	border: none;
	scroll-margin-top: 14rem;
}
.nav-sommaire h2 {
	font-family: var(--font-sans);
	scroll-margin-top: var(--top-menu-height);
}
h2[id] {
	scroll-margin-top: 14rem;
}
.sommaire-back {
	background: url(img/sommaire-up-16.png) no-repeat center;
	display: block;
	width: 16px;
	height: 16px;
	/* opacity: 0.5; */
}



/* ------------------------------------------
/* Layout das tags HTML
/* ------------------------------------------ */

/* Elementos básicos
------------------------------------------ */

body {
	background: white;
	color: var(--gray-dark);
	position: relative;
	text-align: left;
}

h1 {
	margin-bottom: 4rem;
}


/* ------------------------------------------
/* Logo
/* ------------------------------------------ */

.fnd-logo {
	background-color: white;
	border: 1px solid var(--card-border-color);
	border-top: none;
	box-shadow: 2px 2px 6px rgba(0,0,0,.15);
	display: flex;
	flex-direction: column-reverse;
	height: 11rem;
	margin-top: -2rem;
	padding: 0 1.2rem 0.7rem 1.2rem;
	width: 13rem;
}
.fnd-logo:hover {
	border-color: var(--card-border-hover-color);
}
.fnd-logo img {
	align-self: flex-end;
	bottom: 0;
	height: auto;
	margin: 0;
	width: 100%;
}
.fnd-logo img.logo_sistema {
	margin-bottom: 2rem;
	opacity: 0.5;
}


/* ------------------------------------------
/* Heros
/* ------------------------------------------ */

.hero {
	height: 65dvh;
	margin-bottom: 3rem;
	margin-top: var(--top-menu-height);
	padding: 2rem;
	position: relative;
}

.page_sommaire .hero {
	background-image: url('/IMG/jpg/img-hero2.jpg');
	background-position: bottom;
	background-size: cover;
	display: flex;
	flex-direction: row-reverse;
}
.page_sommaire .hero p {
	align-self: flex-end;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	font-family: var(--font-serif);
	/* font-size: var(--font-size-2); */
	font-size: clamp(var(--font-size-1), 4vw, 8rem);
	line-height: var(--line-height-100);
	margin: 0 -2rem 0 0;
	padding: 3rem 3rem 3rem 3rem;
	text-align: right;
}
.page_sommaire .hero p span {
	font-family: var(--font-sans);
	font-size: var(--font-size-4);
}

.page_rubrique .hero {
	background-image: none;
	margin-bottom: 0;
	position: relative;
}
.page_rubrique .hero h1 {
	font-size: clamp(var(--font-size-1), 5vw, 8rem);
	position: relative;
	width: 35%;
}
.page_rubrique .hero div {
	font-size: clamp(var(--font-size-0), 1vw, 1.6rem);
	position: relative;
	width: 30%;
}
.page_rubrique .hero img {
	bottom: 0;
	mask-image: linear-gradient(120deg, transparent 0%,transparent 40%,black 60%);
	object-fit: cover;
	object-position: center;
	position: absolute;
	width: 80%;
	right: 0;
	width: 100%;
}



/* ------------------------------------------
/* Cards
/* ------------------------------------------ */

.card {
	background-color: var(--card-background);
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-border-radius);
	box-shadow: var(--card-shadow);
	font-size: var(--card-text-size);
	margin: 1rem 0;
	overflow: hidden;
	padding: var(--card-padding);
	margin-bottom: 2rem;
}
.card .vantagem img {
	float: left;
	margin-right: 1rem;
}
.card .vantagem p {
	margin: 0;
	padding-left: 5.5rem;
}
.card:hover {
	border: 1px solid var(--card-border-hover-color);
}

.chamada {
	padding: 2rem 0 2rem 0;
}

/* ------------------------------------------
/* Boxes
/* ------------------------------------------ */

.box {
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-border-radius);
	box-shadow: var(--card-shadow);
	margin: 1rem 0;
	padding: var(--card-padding);
	margin-bottom: 1rem;
}


/* ------------------------------------------
/* Migalhas
/* ------------------------------------------ */

.migalhas {
	clear: both;
	color: var(--gray-dark);
	font-size: .9em;
	margin-bottom: 6rem;
}
.migalhas * {
	font-weight: normal;
}
.migalhas a,
.migalhas a:visited {
	/* color: var(--gray-medium); */
}
.migalhas a:hover,
.migalhas a:focus {
	background: var(--gray-medium);
	color: white;
	text-decoration: none;
}


/* ------------------------------------------
/* Boletim
/* ------------------------------------------ */

.news h2 {
	border-bottom: 1px solid var(--card-border-color);
	font-size: 3rem;
	margin-bottom: 2rem;
}
.news h3 {
	font-size: 2rem;
	margin-bottom: 2rem;
}
.news h3 a {
	text-decoration: none;
}
.news h3 a:hover {
	text-decoration: underline;
}
.news h3 small {
	color: var(--gray-medium);
	font-size: 1rem;
}
.news h4 {
	font-size: 1rem;
	text-transform: uppercase;
}
.news img {
	height: auto;
	width: 100%;
}

/* ------------------------------------------
/* Seções
/* ------------------------------------------ */

.page_rubrique .page {
	margin-top: unset;
}

.introducao {
	margin-bottom: 4rem !important;
}
.introducao .texte {
	color: var(--text-gray);
	font-size: 1.3rem;
	font-style: italic;
}

.page_rubrique .chamada {
	border-bottom: 1px solid var(--gray-medium);
}
.page_rubrique .chamada h2 {
	font-size: 2.5rem;
	margin-bottom: 2rem;
}
.page_rubrique .chamada img {
	height: 14rem;
	object-fit: cover;
}
.page_rubrique .chamada .logotipo img {
	height: unset;
	object-fit: cover;
}

.page_article .spip_logo {
	height: auto;
	width: 100%;
}

.page_article .lateral {
	border-top: 3px solid var(--gray-dark);
	margin-top: 0.65rem;
	padding-top: 1rem;
}
.page_article .lateral h2 {
	color: var(--ligray-dark);
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
}
.page_article .lateral h2 span.faded {
	font-weight: 400;
	opacity: 0.7;
}
.page_article .lateral hr {
	color: var(--card-border-color);
}
.page_article .lateral {
	font-size: 1.1rem;
}
.page_article .lateral .formulaire_spip * {
	display: ruby;
	font-weight: 400;
}



/* ------------------------------------------
/* Rodapé
/* ------------------------------------------ */

.footer {
	background-color: var(--footer-background);
	color: white;
	padding: 2rem;
	padding-bottom: 4rem;
}
.footer a {
	color: white;
}


/* ------------------------------------------
/* Formulários
/* ------------------------------------------ */

.formulaire_spip .grupo-proponente,
.formulaire_spip .grupo-participante,
.formulaire_spip .grupo-responsavel,
.formulaire_spip .campo-assinatura {
	/* background-color: yellow; */
	border-bottom: 1px solid var(--gray-medium);
	border-top: 1px solid var(--gray-medium);
	margin-top: 6rem;
	padding: 2rem;
	position: relative;
}
.formulaire_spip .campo-assinatura {
	padding-bottom: 4rem;
	padding-top: 0;
}

.formulaire_spip .grupo-proponente > legend,
.formulaire_spip .grupo-participante > legend,
.formulaire_spip .grupo-responsavel > legend,
.formulaire_spip .campo-assinatura > legend {
	/* font-family: var(--font-serif); */
	font-size: 1.5rem;
	font-weight: 400;
	left: 0;
	top: -2.5rem;
	position: absolute;
}

.formulaire_spip .saisie_input,
.formulaire_spip .saisie_radio,
.formulaire_spip .saisie_date,
.formulaire_spip .saisie_selection {
	border-bottom: 1px solid var(--card-border-color);
}

.formulaire_spip .saisie_input label,
.formulaire_spip .saisie_date label,
.formulaire_spip .saisie_selection label {
	display: inline-block;
	width: 40%;
}

.formulaire_spip .saisie_input input {
	Width: 55%;
}

.formulaire_spip .saisie_radio legend {
	display: block;
	float: left;
	width: 40%;
}
.formulaire_spip .saisie_radio .choix {
	display: block;
	clear: unset;
	float: left;
	margin-right: 1rem;
}

.formulaire_spip .saisie_date input.date {
	border: 1px solid var(--gray-medium);
}


/* == Alterações dos estilos do Orgchart =================================== */
/* baseado em https://thecodeplayer.com/walkthrough/css3-family-tree */
.organo ul {
	padding-top: 20px; position: relative;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.organo li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.organo li::before, .organo li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 20px;
}
.organo li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.organo li:only-child::after, .organo li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.organo li:only-child{ padding-top: 0;}

/*Remove left connector from first child and
right connector from last child*/
.organo li:first-child::before, .organo li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.organo li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.organo li:first-child::after{
	border-radius: 5px 0 0 0 !important;
	-webkit-border-radius: 5px 0 0 0 !important;
	-moz-border-radius: 5px 0 0 0 !important;
}

/*Time to add downward connectors from parents*/
.organo ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;
}

.organo li a{
	background-color: var(--green-faded);
	border: 1px solid #ccc;
	padding: 5px 10px;
	text-decoration: none;
	color: black;
	/* font-family: arial, verdana, tahoma; */
	font-size: 1rem;
	display: inline-block;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.organo li a:hover, .organo li a:hover+ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.organo li a:hover+ul li::after,
.organo li a:hover+ul li::before,
.organo li a:hover+ul::before,
.organo li a:hover+ul ul::before{
	border-color:  #94a0b4;
}


/* == Alterações dos estilos do Spip =================================== */

.lateral .menu.menu_articles ul li,
.lateral .menu.menu_documents_joints ul li,
.lateral .menu.menu_rubrique ul li {
	margin-bottom: 0.5rem;
}
.lateral #documents_joints.menu.documents_joints a small.info_document {
	font-size: 0.9rem;
}

.formulaire_spip fieldset legend {
	/* color: var(--gray-medium); */
}
.formulaire_spip .saisie_radio legend,
.formulaire_spip .saisie_case legend {
	color: var(--gray-dark);
	font-weight: 400;
}
.formulaire_spip label {
	font-weight: 400;
}


/* =========================================================================
/* Gestão de associados
/* ------------------------------------------------------------------------- */

.page_sistema {
	/* --------------------------------------------------------------

	   theme.css
	   Tema padrão da ASPAS (para SPIP 4)
	   Ricardo Porto

	-------------------------------------------------------------- */

	font-size: 1.1rem;

	h1, .h1,
	h2, .h2,
	h3, .h3,
	h4, .h4,
	h5, .h5,
	h6, .h6 {
	  display: block;
	  font-family: "Oswald", sans-serif;
	  font-optical-sizing: auto;
	  font-size: 120%;
	  font-style: normal;
	  font-weight: 400;
	  margin: 0;
	  padding: 0;
	}

	/* ------------------------------------------
	/* Layout das tags HTML
	/* ------------------------------------------ */

	/* Elementos principais
	------------------------------------------ */

	h1, .h1,
	h2, .h2 { line-height: 1.2;}

	/* Hiperlinks
	---------------------------------------------- */
	a, a:visited { color: var(--red-muted);  }

	a:focus,
	:a:active {
		background-color: var(--red-bright)
		color: white;
		text-decoration:none;
	}



	/* ------------------------------------------
	/* Visual dos elementos de conteúdo
	/* ------------------------------------------ */

	/* migalhas */
	.arbo {
		clear: both;
		font-size: .9em;
		color: var(--gray-medium);
	}
	.arbo * {
		font-weight: normal;
	}
	.arbo a,
	.arbo a:visited {
		color: var(--gray-medium);
	}
	.arbo a:hover,
	.arbo a:focus {
		background: var(--gray-medium);
		color: white;
		text-decoration: none;
	}

	.cartouche {
		margin-bottom: 1.5em;
	}
	.cartouche h1 {
		margin-bottom: 0;
	}
	.cartouche p {
		margin-bottom: 0;
	}
	abbr.published {
		border: 0;
	}
	@media print {
		abbr[title].published:after {
			content: "";
		}
		abbr[title].dtreviewed:after {
			content: "";
		}
	}
	.info-publi {
		margin: 1.5em 0 0;
		font-size: .9em;
		font-style: italic;
	}
	.traductions {
		font-size: .9em;
	}
	.traductions a[hreflang]:after {
		content: '';
	}

	.chapo {
		font-weight: bold;
	}
	.hyperlien {
		display: block;
		padding: 1.5em 50px;
		background: var(--white-muted) url(img/def.png) no-repeat 25px 1.9em;
		font-weight: bold;
	}
	.ps,
	.notes {
		margin-bottom: 1.5em;
	}
	.notes {
		clear: both; font-size: .9em;
	}

	/* Listas e tabelas */
	.spip-puce {
		color: var(--red-muted);
	}
	dl.spip dt {
		background: url(img/def.png) no-repeat 25px .5em;
	}

	table.spip {
		margin: 1em 0;
	}
	table.spip caption {
		background: none;
		border-bottom: 1px solid;
		text-align: left;
		font-weight: bold;
	}
	table.spip thead th {
		background: none;
		border: 1px solid;
		border-width: 1px 0;
	}
	table.spip tbody tr th,
	table.spip tr td {
		background: none;
	}
	table.spip tbody tr.odd th,
	table.spip tr.odd td {
		background: var(--white-muted);
	}
	table.spip tr:hover td {
		background: var(--gray-light);
	}
	table.spip tfoot {
		border-top: 1px solid;
	}

	/* Formulários : variantes e casos particulares
	----------------------------------------------- */
	input.text {
		border: 1px solid var(--gray-line);
		border-radius: 3px;
		box-sizing: border-box;
		margin-left: 0.1rem;
		padding: 0.25rem 0.75rem;
	}
	.formulaire_spip {
		margin-bottom: 1.5em;
	}
	.formulaire_spip label {
		display: block;
		font-weight: normal;
	}
	.formulaire_spip input.text,
	.formulaire_spip select,
	.formulaire_spip textarea {
		border: 1px solid var(--gray-line);
		border-radius: 3px;
		box-sizing: border-box;
		margin-left: 0.1rem;
		padding: 0.75rem;
		width: 100%;
	}
	.formulaire_spip img.ui-datepicker-trigger {
		position: relative;
		max-width: 1.5em;
		margin-top: -0.25em;
		margin-left: -1.75em;
	}

	.formulaire_spip .choix label {
		display: inline;
		margin-bottom: 1rem;
	}

	.formulaire_recherche label {
		display: block;
	}
	.erreur_message {
		display: block;
	}

	/* Seleção de idiomas */
	.formulaire_menu_lang {
		margin: 0;
		padding: 0;
		background: none;
	}

	/* Formulários de busca (site / petições) */
	.formulaire_recherche input.text {
		width: auto;
		height: 32px;
		padding-left: 20px;
		vertical-align: middle;
		border:1px solid var(--gray-light);
		background: white url(img/recherche.png) no-repeat left center;
		-webkit-border-radius: 0.25em 0 0 0.25em;
		border-radius: 0.25em 0 0 0.25em;
	}
	.formulaire_recherche input.btn,
	.formulaire_recherche input.submit  {
		width: auto;
		height: 32px;
		vertical-align: middle;
		border: 1px solid var(--gray-light);
		border-left: none;
		-webkit-border-radius: 0 0.25em 0.25em 0;
		border-radius: 0 0.25em 0.25em 0;
		text-align: center;
	}

	input[type="submit"].submit {
		background-color: var(--red-muted);
		border: 1px solid var(--red-border);
		border-radius: 3px;
		-webkit-border-radius: 3px;
		color: white;
		font-weight: 600;
		padding: 0.75rem 1.5rem;
		text-align: center;
		vertical-align: middle;
		width: auto;
	}

	.btn, a.btn,
	.btn-sml, a.btn-sml {
		align-items: center;
		background-color: var(--red-muted);
		border: 1px solid var(--red-border);
		border-radius: 0.25rem;
		box-sizing: border-box;
		color: white;
		cursor: pointer;
		display: inline-flex;
		font-weight: 400;
		justify-content: center;
		padding: 0.5rem 1rem;
		text-align: center;
		text-decoration: none;
		transition: all 0.1s;
		vertical-align: middle;
	}
	.btn-sml, a.btn-sml {
		padding: 0.15rem 0.6rem !important;
	}
	.btn-sml.on, a.btn-sml.on {
		background-color: var(--gray-dark);
	}
	.btn-aux {
		background-color: white !important;
		color: var(--gray-dark) !important;
	}
	/* Seletor de palavras-chave */
	.formulaire_spip .saisie_mots_forum fieldset {margin-left: 0}
	ul.choix_mots { display: flex; margin: 0; padding: 0; list-style: none; flex-wrap: wrap}
	ul.choix_mots li { display: flex; flex-basis: 30%; max-width: 30%; padding: 0.25em 0.5em; align-items: center}
	ul.choix_mots li label { font-weight: normal; font-size: 1em; line-height: 1.25; margin-left: 0.25em}

	.formulaire_spip .bugajaxie { display: none; } /*IE/Win*/

	/* Formulário de login em uma página */
	.formulaire_login .editer-groupe .editer { clear: left; }
	.formulaire_login .editer_password .details { display: block; }
	.formulaire_login #spip_logo_auteur { float: right; }

	/* Fomulário de contato */
	.formulaire_ecrire_auteur {}
	.formulaire_ecrire_auteur .saisie_sujet_message_auteur input.text { width: 100%; }


	/* Layout dos portfolios
	---------------------------------------------- */
	.documents_portfolio li {display:inline;margin:0;padding:0;}
	.documents_portfolio a {
		display: inline-block;
		padding: 10px;
		margin: 5px;
		border: 1px solid var(--gray-dark) !important;
		color: var(--white-muted);
		background: white;
		box-shadow: 5px 7px 5px 2px var(--gray-shadow);
	}
	.documents_portfolio a:hover {color: var(--gray-light); opacity:0.8;}
	.documents_portfolio img {margin:0;}

	.documents_joints .descriptif p {margin:0;}

	/* Layout dos fóruns
	---------------------------------------------- */
	.comments  {margin-top:2em;padding:1em 0;border-top:10px solid var(--white-muted);}
	.comments  ul {list-style:none;}
	.comment-item {margin:0.5em 0 0 0;padding:0.5em 0 0 0;border-top:1px solid var(--white-muted);}
	.comments-items .comments-items {
		margin-left: 25px;
		padding-left: 20px;
		border-left:5px solid var(--white-off);}
	.comment-meta { margin: 0; font-weight: bold; }
	.comment-meta small { font-size: 100%; }
	.comment-meta abbr { border: 0; }
	.comment-meta a { text-decoration:none;}
	.comment-content { overflow-wrap: break-word; }
	.comment-content .hyperlien { padding: 0; background: transparent; font-weight: normal; }
	.comment-texte p { overflow-wrap: anywhere; }

	/* Formulário de fórum */
	.forum-titre  {margin-top:2em;padding:1em 0;border-top:10px solid var(--white-muted);}
	.formulaire_forum {}
	.formulaire_forum form+form{margin-top:1em;}
	.formulaire_forum legend { display: none; }
	.formulaire_forum .saisie_titre input.text { width: 100% }
	.formulaire_forum .session_qui { display: none; }
	.formulaire_forum .saisie_texte .explication { font-size: .9em; font-style: italic; margin: 0.5em 0; }
	.formulaire_forum .boutons { margin-top: 1em; }

	/* Layout das petições
	---------------------------------------------- */
	#signatures td.signature-date small { white-space: nowrap; }
	#signatures .formulaire_recherche { margin: 1.5em auto; text-align: center; }

	/* Formulário de assinatura */
	.formulaire_signature {}

	/* ------------------------------------------
	/* Subnavegação e outros menus menus
	/* ------------------------------------------ */

	/* Layout geral dos menus de nav */
	.menu { clear: both; margin-bottom: 1.5em; text-align: left; }
	.menu p {}
	.menu ul { margin-bottom: 1.5em; }
	.menu ul li {}
	.menu ul li ul { margin-left: 1.5em; list-style: circle; }

	.on { border-bottom: 1px solid red }

	/* Paginação */
	.pagination .pagination-items {list-style: none;display: flex;flex-wrap: wrap; flex-direction: row; justify-content: center}
	.pagination .pagination-item {  margin: 0em; flex-basis: 7.5%; display: flex;align-items: center;}
	.pagination .pagination_precedent_suivant .pagination-item { flex-basis: auto;}
	.pagination .pagination-item + .pagination-item {  margin-left: 0.5em }
	.pagination .pagination-item-label {
		display: block;
		flex-basis: 100%;
		background: var(--white-muted);
		text-decoration: none;
		padding: 0.5em;
		border-radius: 0.25em;
		text-align: center;
	}
	.pagination .on .pagination-item-label,
	.pagination a.pagination-item-label:hover,
	.pagination a.pagination-item-label:focus,
	.pagination a.pagination-item-label:active { background: var(--red-bright); color: white; }
	.pagination .on .pagination-item-label {font-weight: bold;}
	.pagination .pagination_precedent_suivant .disabled {visibility: hidden}
	.pagination .pagination-item.disabled {}
	.pagination .pagination-item.disabled .pagination-item-label {
		color: var(--gray-medium);
		font-weight: normal;
	}
	.menu_articles .pagination strong {font-size:1em;}

	/* Listas de matérias e segmentos introdutórios */
	.menu_articles li { clear: both; margin-bottom: 1.5em; }
	.menu_articles li h3,
	.menu_articles li h2 { margin: 0 0 0.2em 0; }
	.menu_articles li p { margin: 0; }
	.menu_articles li small {  }
	.menu_articles li .enclosures { float: right; text-align: right; max-width: 60%; margin: 0; }
	.menu_articles li div {margin-top:0.2em;margin-bottom:0.5em;}
	.menu_articles a {text-decoration:none;}
	.menu_articles strong {font-size:1.2em;}

	.menu_breves li {}
	.menu_breves li h3 { margin: 0; }

	.aside h2 {border-bottom:3px solid var(--white-muted); padding-bottom:.1em;}
	.aside li {margin:1em 0;}
	.aside a {text-decoration:none;}

	.footer a {text-decoration:none;}
	.footer a.spip_out:after { content: ""; }

	/* ------------------------------------------
	/* Outras mídias
	/* ------------------------------------------ */

	@media print {

		/*  Não imprimir */
		.spip-admin,
		.spip-admin-float,
		.spip-previsu { display: none; }
		.repondre { display: none; }

		/* Sublinhar e revelar os links */
		a { color: var(--red-dark); text-decoration: underline !important; }
		a.spip_out:after,
		a.spip_glossaire:after,
		a.spip_mail:after { display: inline; content: " [" attr(href) "]"; }

	}


	/* ------------------------------------------
	/* Responsividade
	/* ------------------------------------------ */

	/* largura máxima 767px */
	@media (max-width: 767px) {
		.pagination {line-height:3;}
	}


	/* largura máxima 640px */
	@media (max-width: 640px) {
		body { font-size: .95em; }
		h1,.h1,
		h2,.h2 { line-height: 1; }
	}

	@media screen and (max-width: 1080px) {
		html {
			overflow-x: hidden;
		}
		body {
			padding: 0;
		}
	}
	/* -- fim dos estilos SPIP ------------------------------------------------- */


	/* -------------------------------------------------------------------------
	/* Definições gerais
	/* ------------------------------------------------------------------------- */

	.h1 {
		margin-top: 2rem;
	}

	/* Menu
	---------------------------------------------------------------------------- */
	#container {
		position: relative;
	}
	#container:after {
		clear: both;
		content: "";
		display: block;
		height: 0;
	}
	#menu {
		border-radius: 3px;
		margin-top: -3rem;
		float: right;
		padding: 0 20px;
		position: relative;
		z-index: 10;
	}
	#menu,
	#menu ul {
		list-style: none;
	}
	#menu > li {
		border-right: 1px solid rgba(0,0,0,.2);
		box-shadow: 1px 0 0 rgba(255,255,255,.5);
		float: left;
		position: relative;
		text-align: left;

	}
	#menu > li:first-child {
		border-left: 1px solid rgba(255,255,255,.5);
		box-shadow: -1px 0 0 rgba(0,0,0,.2), 1px 0 0 rgba(255,255,255,.5);
	}
	#menu a {
		background: transparent;
		color: var(--gray-medium);
		display: block;
		font-weight: 600;
		line-height: 1;
		padding: 13px 20px 13px 20px;
		position: relative;
		text-decoration: none;
		transition: all .25s ease-in-out;
		z-index: 10;
	}
	#menu > li:hover > a {
		background: var(--gray-medium);
		color: var(--nav-blue);
		text-shadow: none;
	}
	#menu li ul  {
		background: transparent;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		opacity: 0;
		padding: 0;
		position: absolute;
		overflow: hidden;
		right: 0;
		transform-origin: 50% 0%;
		visibility: hidden;
		width: 400px;
		z-index: 1;
	}
	#menu li:hover ul {
		background: white;
		box-shadow: 1px 1px 7px rgba(0,0,0,.5);
		opacity: 1;
		padding: 15px 0;
		visibility: visible;
	}
	#menu li li a {
		border-bottom: dotted 1px transparent;
		border-top: dotted 1px transparent;
		color: var(--white-off);
		font-weight: 400;
		padding-left: 15px;
		text-shadow: none;
		transition: all .15s linear;
	}
	#menu li li a:hover {
		background: rgba(0,223,252,.02);
		border-top: dotted 1px rgba(255,255,255,.15);
		border-bottom: dotted 1px rgba(255,255,255,.15);
		color: var(--nav-blue);
	}

	/* ------------------------------------------
	/* Gestão de associados
	/* ------------------------------------------ */

	.main {
		margin: 0 2rem;
	}

	.page p.arbo,
	.page p.arbo a,
	.page_sistema p.arbo,
	.page_sistema p.arbo a {
		color: var(--gray-medium);
		text-align: left;
	}
	.page p.arbo a,
	.page_sistema p.arbo a {
		color: var(--gray-medium);
		text-decoration: none;
	}
	.page p.arbo a:hover,
	.page p.arbo a:active,
	.page_sistema p.arbo a:hover,
	.page_sistema p.arbo a:active {
		background-color: var(--gray-medium);
		color: var(--nav-blue);
		margin: -0.25rem;
		padding: 0.25rem;
		text-align: left;
	}


	/* cards e boxes
	---------------------------------------------------------------------------- */
	.box-gray {
		background-color: var(--white-muted);
		margin-bottom: 4rem;
		padding: 3rem;
	}

	.card {
		background-color:var(--green-faded);
		border: 1px solid var(--white-off);
		border-radius: 1.5rem;
		box-shadow: 0 1px 1rem rgba(0,0,0,0.1);
		/* font-size: 80%; */
		margin: 1rem 0;
		overflow: hidden;
		padding: 0;
		margin-bottom: 2rem;
	}
	.card b {
		color: var(--gray-medium);
	}
	.card-head {
		background-color: var(--red-muted);
		color: white;
		padding: 1rem;
	}
	.card-head h2 {
		font-size: 1.1rem;
		margin: 0;
	}
	.card h2 .normal {
		font-weight: 300;
	}
	.card-body {
		padding: 1rem;
		line-height: 150%;
	}

	.card ul.menu {
		margin-bottom: 0;
	}
	.card ul.menu li {
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}


	/* cards
	---------------------------------------------------------------------------- */
	.card-modal,
	.card-verde {
		background-color:var(--green-faded);
		border: 1px solid var(--white-off);
		/* border: 1px solid var(--green-line); */
		border-radius: 1.5rem;
		box-shadow: 0 1px 1rem rgba(0,0,0,0.1);
		margin: 1rem 0;
		overflow: hidden;
		margin-bottom: 2rem;
		padding: 2rem;
	}

	.card-modal {
		border: 1px solid var(--gray-light);
		box-shadow: 0 1px 2rem rgba(0,0,0,0.2);
		display: flex;
		flex-flow: column;
		max-height: 80vh;
		padding: 0;
		position: relative;
	}
	.card-modal-titulo {
		margin: 2rem 2rem -2rem;
	}
	.card-modal-conteudo {
		display: block;
		height: 100% !important;
		margin: 2rem 0 2rem 2rem;
		overflow: auto;
		padding-right: 1.5rem;
	}
	.card-modal-conteudo table.table.spip {
		border-top: 1px solid black;
	}
	.card-modal-conteudo table.table.spip td {
		background: none;
	}
	.card-modal-conteudo table.table.spip td p {
		margin: 0;
	}
	.card-modal-conteudo table.table.spip td p.crayon i {
		color: var(--red-muted);
		opacity: 0.6;
	}
	.card-modal-conteudo p.nome {
		font-size: 1.2rem;
	}
	.card-modal-conteudo .columns {
		margin: 0 -0.75rem !important;
	}
	.card-modal-conteudo .column {
		padding: 0 0.75rem !important;
	}

	.card-verde span.pendencias {
		display: inline-block;
		width: 40px;
	}
	.card-verde a span.pendencias {
		text-decoration: underline;
	}

	mark {
	  background-color: yellow;
	  color: inherit;
	  font-weight: bold;
	  padding: 0 2px;
	}

	.inicial:first-letter {
		text-transform: capitalize;
	}


	/* Notificações
	---------------------------------------------------------------------------- */
	.notification {
		background-color: var(--green-faded);
		border: 1px solid var(--white-off);
		box-shadow: 0 1px 1rem rgba(0,0,0,0.1);
		border-radius: 0.4rem;
		color: rgb(40, 30, 0);
		margin: 1.5rem auto;
		padding: 1rem 1.5rem;
		position: relative;
	}

	.notification.is-warning {
		background-color: rgb(255, 235, 125);
		border-color: rgb(245, 225, 110);
		color: rgb(40, 30, 0);;
	}


	/* Formulário de critérios
	---------------------------------------------------------------------------- */
	.ui-accordion .ui-accordion-header {
		background-color: var(--white-off);
		color: var(--red-muted);
		font-weight: 600;
	}
	.ui-icon {
		margin-right: 0.25rem;
	}
	.ui-state-active {
		background-color: var(--red-muted) !important;
		border: 1px solid var(--red-border) !important;
		color: white !important;
	}
	.ui-accordion .ui-accordion-content {
		background-color: var(--white-off) !important;
		padding: 1rem !important;
	}
	.criterios div.columns {
		margin: -0.75rem -0.75rem 0;
	}
	.criterios div.column {
		padding: 0.75rem;
	}
	.criterios form .editer {
		margin: 0 0 0.5rem;
		padding: 0;
	}
	.criterios input.text,
	.criterios select.select {
		border: 1px solid var(--gray-light);
		border-radius: 3px;
		color: black;
		padding: 0.25rem;
		width: 100%;
	}
	.criterios ano input.text {
		width: 8rem;
	}




	.explication_texte ol.spip,
	.explication_texte ul.spip {
		margin-left: 1rem;
	}

	.chave-tabela:first-letter {
		text-transform: capitalize;
		margin-left: 1rem;
	}

	.table {
		background-color: var(--green-faded);
	}
	.table-title {
		font-weight: bold;
		margin-bottom: 0;
		margin-top: 3rem;
	}
	.resumo table {
		border: 0;
		border-collapse: collapse;
		box-sizing: border-box;
		font: inherit;
		margin: 1em 0;
		min-width: 20em;
		padding: 0;
	}
	.resumo table th {
		background: none;
		border-bottom: 1px solid;
		border-top: 1px solid;
		font-weight: bold;
		padding: 0.375em;
		vertical-align: bottom;
	}
	.resumo table td {
		background: none;
		border-bottom: 1px solid;
		padding: 0.375em;
	}


	/* -- Layout dos relatórios ------------------------------------------------ */
	.ordenadores{
		margin-bottom: 2rem;
	}
	.ordenadores h4 {
		margin-bottom: 0.5rem;
	}
	.btn-edit {
		font-size: 0.75rem;
		justify-content: left;
		margin-bottom: 0.5rem;
		padding: 0.15rem 0.6rem !important;
		position: absolute;
		right: 1rem;
		text-transform: uppercase;
		top: 1rem;
	}
	.btn.btn-filtro {
		font-size: 0.75rem;
		justify-content: left;
		margin-bottom: 0.5rem;
		text-transform: uppercase;
		width: 100%;
	}

	.card-associado,
	.card-aniversario {
		background-color:var(--green-faded);
		border: 1px solid var(--white-off);
		border-radius: 1.5rem;
		/* border-radius: 0.5rem; */
		box-shadow: 0 1px 1rem rgba(0,0,0,0.1);
		font-size: 80%;
		margin: 1rem 0;
		padding: 1rem;
		page-break-inside: avoid;
		position: relative;
	}
	.card-associado h2 {
		font-size: 1rem;
		font-weight: 600;
		margin: 0;
		margin-bottom: 0.75rem;
	}
	.normal {
		font-weight: 300;
	}
	.card-associado b {
		color: var(--gray-medium);
	}

	.card-associado .columns,
	.card-aniversario .columns {
		margin: 0;
		margin-inline-end: 0;
		margin-inline-start: 0;
	}

	.card-associado .columns:last-child,
	.card-aniversario .columns:last-child {
		margin-bottom: 0;
	}
	.card-associado .column,
	.card-aniversario .column {
		margin: 0;
		padding: 0;
	}

	.card-aniversario .column.dia {
		flex-grow: 0.1;
		padding: 0 0.75rem 0 0;
		text-align: center;
	}
	.card-aniversario .column.aniversariantes {
		padding: 0 0 0 0.75rem;
	}
	.card-aniversario h2.data {
		color: var(--gray-medium);
		font-size: 3rem;
		font-weight: 900;
		line-height: 100%;
		margin: 0;
	}
	.card-aniversario h2.data span {
		color: var(--red-muted);
	}
	.card-aniversario hr {
		margin: 0;
	}
	.card-aniversario table {
		margin-bottom: 0;
	}
	.card-aniversario th,
	.card-aniversario td {
		border-color: var(--gray-line);
	}
	.card-aniversario td.nome {
		width: 40%;
	}
	.card-aniversario td.email {
		width: 30%;
	}
	.card-aniversario td.uf {
		width: 1%;
	}
	.card-aniversario td.beneficio {
		width: 29%;
	}

	.footer {
		padding: 2rem;
	}

	/* -- Utilidades ----------------------------------------------------------- */
	.align-right {
		text-align: right;
	}

	.main-color {
		color: var(--red-muted);
	}

	.mb-0 {
		margin-bottom: 0 !important;
	}
	.mb-1 {
		margin-bottom: 0.25rem !important;
	}
	.mb-2 {
		margin-bottom: 0.5rem !important;
	}
	.mb-3 {
		margin-bottom: 0.75rem !important;
	}
	.mb-4 {
		margin-bottom: 1rem !important;
	}
	.mt-0 {
		margin-bottom: 0 !important;
	}
	.mt-1 {
		margin-bottom: 0.25rem !important;
	}
	.mt-2 {
		margin-bottom: 0.5rem !important;
	}
	.mt-3 {
		margin-bottom: 0.75rem !important;
	}
	.mt-4 {
		margin-bottom: 1rem !important;
	}
	.p-0 {
		padding: 0;
	}

	/* -- Layout para impressão ------------------------------------------------ */
	@media print {
		@page {
			margin-top: 20mm;
			margin-bottom: 15mm;
			margin-left: 20mm;
			margin-right: 1mm;
			size: A4;
			@top-left {
				content: url('/IMG/svg/icoaspas-24.svg') " Gestão de Associados";
				font-size: 14pt;
			}
			@bottom-right {
				content: "Página " counter(page)"/"counter(pages);
				font-size: 7pt;
				text-align: left
		    }
		}
		* {
			background: transparent;
			color: black;
			filter: none;
			font-size: 8pt;
			text-shadow: none;
			-ms-filter: none;
		}
		.break-page {
			break-after: page;
		}
		.no-print,
		.ordenadores,
		.arbo,
		h1 {
			display: none;
			height: 0;
		}
		.page,
		.cartouche {
			margin: 0;
		}
		.main {
			padding: 0;
		}
		h2 {
			font-size: 12pt;
		}
		.card-aniversario h2.data span {
			color: var(--red-muted) !important;
		}
		.card-associado:first-child,
		.card-aniversario:first-child {
			margin-top: 1.5mm;
		}
		.card-associado,
		.card-aniversario {
			margin: 2.5mm 0;
			padding: 2.5mm;
		}
		.card-associado h2 {
			font-size: 8pt;
			font-weight: 600;
			margin-left: 1.5mm;
			margin-bottom: 1mm;
			width: 100%;
		}
		.card-associado .column {
			margin-bottom: 0;
			padding: 0 1.5mm;
		}
	}


	/* ------------------------------------------
	/* Site público
	/* ------------------------------------------ */

	.page {
		margin: 0;
		max-width: 100%;
	}
	.envelope {
		margin: 0 2rem;
	}
	.cabecalho {
		background: white;
		background: linear-gradient(180deg, rgba(223, 236, 223, 1) 10%, rgba(245, 250, 245, 1) 70%, rgba(245, 250, 245, 0) 100%);
		/* background-color: var(--green-faded); */
		/* border-top: 1rem solid var(--red-muted); */
		/* background-color: black; */
		/* border-top: 1rem solid var(--red-muted); */
		/* border-top: 1rem solid var(--green-faded); */
		/* background-color: var(--red-muted); */
		/* border-top: 1rem solid var(--gray-medium); */
		height: 180px;
	}
	.page_sistema .envelope {
		margin-top: 0 !important;
	}
	.fnd-logo {
		background-color: white;
		border: 1px solid var(--gray-light);
		border-top: none;
		box-shadow: 2px 2px 6px rgba(0,0,0,.15);
		display: flex;
		flex-direction: column-reverse;
		height: 11rem;
		margin-top: -1rem;
		padding: 0 1.2rem 0.7rem 1.2rem;
		width: 13rem;
	}
	.fnd-logo img {
		align-self: flex-end;
		bottom: 0;
		height: auto;
		margin: 0;
		width: 100%;
	}
	.fnd-logo img.logo_sistema {
		margin-bottom: 2rem;
		opacity: 0.5;
	}

	nav {
		float: right;
		margin-top: 8.5rem;
	}
	.nav li a {
		background: none;
		/* color: white; */
	}
	.hero {
		background-image: url('/IMG/jpg/img-hero2.jpg');
		background-position: bottom;
		background-size: cover;
		display: flex;
		flex-direction: row-reverse;
		height: 60vh;
		margin-bottom: 3rem;
		padding: 2rem;
		position: relative;
	}
	.hero h1 {
		align-self: flex-end;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		font-size: 2.5rem;
		font-weight: 600;
		margin: 0 -2rem 0 0;
		padding: 3rem 6rem 3rem 3rem;
		text-align: right;
	}
	.hero h1 p {
		margin: 0;
	}

	.content,
	.foot-content,
	.conteudo .envelope .vantagens {
		margin: 0 auto;
		max-width: 1400px;
	}
	.conteudo .envelope .vantagens .columns {
		padding: 0 auto;
	}
	.conteudo .envelope .vantagens .columns .vantagens .card {
		margin: 0;
	}
	.page .content,
	.page_sistema .content {
		margin-top: 2rem;
	}
	.vantagem {
			padding: 3rem;
	}
	.vantagem img {
		float: left;
		margin-right: 1rem;
	}
	.vantagem p {
		margin: 0;
		padding-left: 5.5rem;
	}
	.footer {
		background-color: var(--gray-dark);
		border-top: none;
		color: white;
		height: 20vh;
	}



	/* modal
	---------------------------------------------------------------------------- */
	.h5-modal {
		display: none;
		height: 100%;
		left: 0;
		overflow: auto;
		padding-top: 100px;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}
	.h5-modal-content {
		margin: auto;
		max-width: 80%;
		outline: 0;
		padding: 0;
		position: relative;
	}
	.h5-modal-content.largo {
		max-width: 1350px;
		width: 80%;
	}
	.h5-modal-content.medio {
		max-width: 1000px;
		width: 50%;
	}
	.h5-modal-content.estreito {
		max-width: 600px;
		width: 50%;
	}
	@media (max-width: 600px) {
		.h5-modal {
			padding-top: 30px;
		}
		.h5-modal-content {
			margin: 0 10px;
			width: auto !important;
		}
		.h5-modal-content.estreito,
		.h5-modal-content.medio,
		.h5-modal-content.largo {
			width: 90%;
			max-width: 550px;
		}
	}
	@media (max-width: 768px) {
		.h5-modal {
			padding-top: 50px;
		}
		.h5-modal-content {
			width: 500px;
		}
		.h5-modal-content.estreito {
			width: 90%;
			max-width: 550px;
		}
		.h5-modal-content.medio,
		.h5-modal-content.largo {
			width: 90%;
		}
	}
	@media (max-width: 1024px) {
		.h5-modal-content.estreito {
			width: 90%;
			max-width: 600px;
		}
		.h5-modal-content.medio,
		.h5-modal-content.largo {
			width: 90%;
		}
	}


	.h5-button {
		background-color: var(--green-water);
		border: 1px solid var(--green-line);
		border-radius: 50%;
		color: inherit;
		cursor: pointer;
		display: inline-block;
		font-weight: bold;
		overflow: hidden;
		padding: 8px 16px;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		white-space: nowrap;
	}
	.h5-button {
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
	}
	.h5-button:hover {
		background-color: var(--red-muted) !important;
		color: white !important;
	}
	.h5-display-topright {
		position: absolute;
		right: 0.5rem;
		top: 0.5rem;
		z-index: 1;
	}


	/* Tags
	--------------------------------------------------------------------------- */
	.tag {
	  align-items: center;
	  background-color: rgb(200, 200, 200);
	  border-radius: 0.15rem;
	  box-shadow:inset 2px 1px 6px 0 rgba(0,0,0,0.25);
	  -webkit-box-shadow:inset 2px 1px 6px 0 rgba(0,0,0,0.25);
	  color: rgba(0, 0, 0, 0.5);
	  display: inline-flex;
	  font-family: "Luxi sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", sans-serif;
	  font-size: 0.75rem;
	  height: 2em;
	  justify-content: center;
	  line-height: 1;
	  margin-left: 1rem;
	  margin-top: -1rem;
	  padding-left: 1rem;
	  padding-right: 1rem;
	  text-transform: uppercase;
	  white-space: nowrap;
	}
	.tag.efetivo {
		background-color: var(--green-water);
	}
	.tag.isento {
		background-color: var(--green-water);
	}
	.tag.facultativo {
		background-color: var(--green-water);
	}
	.tag.previdenciário {
		background-color: var(--green-water);
	}
	.tag.desligado {
		background-color: var(--red-faded);
	}
	.tag.falecido {
		background-color: var(--red-faded);
	}



	/* Listagens alfa
	--------------------------------------------------------------------------- */

	a.button-alfa {
		background-color: var(--red-muted);
		border-radius: 50%;
		color: white;
		display: inline-block;
		font-size: 0.95rem;
		font-weight: 600;
		height: 1.5rem;
		margin: 0 0.15rem;
		text-align: center;
		text-decoration: none;
		width: 1.5rem;
	}

	.page_sistema .formulaire_recherche {
		margin-bottom: 0;
	}
	.page_sistema .formulaire_recherche label {
		display: none;
	}
	.page_sistema .formulaire_recherche input.text {
		border: 1px solid var(--green-line);
		border-bottom-left-radius: 3px;
		border-top-left-radius: 3px;
		border-right: none;
		color: var(--red-bright);
		font-style: italic;
		opacity: 0.7;
		padding: 0 0.5rem;
		width: 9rem;
	}
	.page_sistema .formulaire_recherche input[type="submit"].submit {
		padding: 0 1rem;
	}

	/* == Alterações dos estilos do SPIP ======================================= */
	.formulaire_spip legend {
		font-weight: normal;
	}
	.formulaire_spip fieldset:has(div.choix.inline) legend {
		margin-bottom: 0.75rem;
		margin-top: 0.5rem;
	}

	.formulaire_spip .column {
		padding-bottom: 0;
	}
	.formulaire_spip .column.is-8 {
		width: calc(66.6666666667% - var(--bulma-column-gap));
	}


	/* == Alterações dos estilos do Orgchart =================================== */
	/* baseado em https://thecodeplayer.com/walkthrough/css3-family-tree */
	.organo ul {
		padding-top: 20px; position: relative;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
	}

	.organo li {
		float: left; text-align: center;
		list-style-type: none;
		position: relative;
		padding: 20px 5px 0 5px;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
	}

	/*We will use ::before and ::after to draw the connectors*/

	.organo li::before, .organo li::after{
		content: '';
		position: absolute; top: 0; right: 50%;
		border-top: 1px solid #ccc;
		width: 50%; height: 20px;
	}
	.organo li::after{
		right: auto; left: 50%;
		border-left: 1px solid #ccc;
	}

	/*We need to remove left-right connectors from elements without
	any siblings*/
	.organo li:only-child::after, .organo li:only-child::before {
		display: none;
	}

	/*Remove space from the top of single children*/
	.organo li:only-child{ padding-top: 0;}

	/*Remove left connector from first child and
	right connector from last child*/
	.organo li:first-child::before, .organo li:last-child::after{
		border: 0 none;
	}
	/*Adding back the vertical connector to the last nodes*/
	.organo li:last-child::before{
		border-right: 1px solid #ccc;
		border-radius: 0 5px 0 0;
		-webkit-border-radius: 0 5px 0 0;
		-moz-border-radius: 0 5px 0 0;
	}
	.organo li:first-child::after{
		border-radius: 5px 0 0 0 !important;
		-webkit-border-radius: 5px 0 0 0 !important;
		-moz-border-radius: 5px 0 0 0 !important;
	}

	/*Time to add downward connectors from parents*/
	.organo ul ul::before{
		content: '';
		position: absolute; top: 0; left: 50%;
		border-left: 1px solid #ccc;
		width: 0; height: 20px;
	}

	.organo li a{
		background-color: var(--green-faded);
		border: 1px solid #ccc;
		padding: 5px 10px;
		text-decoration: none;
		color: black;
		/* font-family: arial, verdana, tahoma; */
		font-size: 1rem;
		display: inline-block;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
	}

	/*Time for some hover effects*/
	/*We will apply the hover effect the the lineage of the element also*/
	.organo li a:hover, .organo li a:hover+ul li a {
		background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
	}
	/*Connector styles on hover*/
	.organo li a:hover+ul li::after,
	.organo li a:hover+ul li::before,
	.organo li a:hover+ul::before,
	.organo li a:hover+ul ul::before{
		border-color:  #94a0b4;
	}


	/* == Migalhas ============================================================= */
	.migalhas {
		border-radius: 5px;
		box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
		counter-reset: flag; /* Adiciona os números para cada link usando CSS counters; flag é o nome do contador;  definido com counter-reset no elemento superior dos links */
		display: inline-block;
		height: 36px;
		overflow: hidden;
		text-align: center;
	}
	.migalhas a {
		background: var(--green-faded);
		color: var(--gray-medium);
		display: block;
		float: left;
		font-size: 14px;
		line-height: 36px;
		outline: none;
		padding: 0 10px 0 60px; /* margem maior à esquerda para acomodar os números */
		position: relative;
		text-decoration: none;
		transition: all 0.5s;
	}
	/* como o primeiro link não tem triângulo inicial, o padding-left é reduzido */
	.migalhas a:first-child {
		border-radius: 5px 0 0 5px;
		padding-left: 46px;
	}
	.migalhas a:first-child:before {
		left: 14px;
	}
	.migalhas a:last-child {
		border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
		padding-right: 20px;
	}
	/* o link final não termina em seta */
	.migalhas a:last-child:after {
		content: none;
	}
	/* setas usando pseudo elementos rotacionados */
	.migalhas a:after {
		background: var(--green-faded);
		border-radius: 0 5px 0 50px; /* 5px para os cantos arredondados e 50px para evitar problemas no hover com a borda criada com sombras */
		box-shadow: 1px -1px 0 1px rgba(95, 120, 105, 0.5); /* define a borda da seta com box-shadow*/
		color: var(--gray-medium);
		content: '';
		height: 36px; /* mesmo valor do line-height do .migalhas a */
		position: absolute;
		right: -18px; /* metade do lado do quadrado */
		top: 0;
		/* O quadrado rotacionado ocupa uma altura maior, o que dificulta o posicionamento correto.
		   Precisa ser reduzido para que a diagonal se torne igual ao  line-height do link.
		   É reduzido para 70.7% porque:, because if square's:
		     se o lado do quadrado = 1; então a diagonal = (1^2 + 1^2)^0.5 = 1.414 (teorema de Pitágoras)
		     se a diagonal deve ser = 1; o lado do quadrado = 1/1.414 = 0.707 */
		transform: scale(0.707) rotate(45deg);
		transition: all 0.5s;
		width: 36px; /* mesmo valor do line-height do .migalhas a */
		z-index: 1; /* evita que a seta seja sobreposta pelo link seguinte */
	}
	/* :before é usado para exibir os números */
	.migalhas a:before {
		background: white;
		border-radius: 100%;
		box-shadow: 0 0 0 1px rgba(95, 120, 105, 0.5);
		content: counter(flag);
		counter-increment: flag;
		height: 20px;
		left: 30px;
		line-height: 20px;
		margin: 8px 0;
		position: absolute;
		top: 0;
		width: 20px;
	}
	/* hover/active */
	.migalhas a.active, .migalhas a.active:after,
	.migalhas a:active, .migalhas a:active:after,
	.migalhas a:focus, .migalhas a:focus:after,
	.migalhas a:focus-visible, .migalhas a:focus-visible:after,
	.migalhas a:focus-within, .migalhas a:focus-within:after,
	.migalhas a:hover, .migalhas a:hover:after {
		background: var(--green-water) !important;
		color: var(--gray-medium) !important;
	}


	/* == Para excluir ========================================================= */
	.flex {
		display: flex;
	}
	.combo-periodo .de,
	.combo-periodo .ate,
	.combo-periodo .mes,
	.combo-periodo .ano {
		display: block;
		/* flex-basis: 0; */
		/* flex-grow: 1; */
		padding: 0.5rem;
	}
	.combo-periodo .ano input.text {
		width: 6.25rem;
	}
	.filters {
		margin-bottom: 2rem;
	}

	.checkbox {
		display: inline-block;
		position: relative;
	}
}




/* ------------------------------------------
/* Utilidades
/* ------------------------------------------ */

.dimmed {
	opacity: 0.5;
}

.text-thin {
	font-weight: 300;
}

.back-gray-dark {
	background-color: var(--gray-dark);
	color: white;
}

.margin-bottom-big {
	margin-bottom: 3rem;
}

p.align-right {
	margin-top: 1rem;
	text-align: right;
}



/* ------------------------------------------
/* Responsividade
/* ------------------------------------------ */

@media screen and (max-width: 1920px) {
	div.page {
		margin-top: 6rem;
	}
	.fnd-logo {
		/* background-color: white; */
		/* border: 1px solid var(--gray-light); */
		/* border-top: none; */
		/* box-shadow: 2px 2px 6px rgba(0,0,0,.15); */
		/* display: flex; */
		/* flex-direction: column-reverse; */
		height: calc(11rem * 0.77);
		margin-top: -5rem;
		padding: 0 calc(1.2rem * 0.77) 0.2rem calc(1.2rem * 0.77);
		width: calc(13rem * 0.77);
	}
	.fnd-logo img {
		align-self: flex-end;
		bottom: 0;
		height: auto;
		margin: 0;
		width: 100%;
	}
	.fnd-logo img.logo_sistema {
		margin-bottom: 2rem;
		opacity: 0.5;
	}
	.hero {
		margin-top: 10rem;
	}
}

@media screen and (max-width: 14300px) {
	.main {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 1280px) {
	.main {
		padding-top: 0;
	}
	.migalhas {
		margin-bottom: 3rem;
	}
}

@media screen and (max-width: 1080px) {
	html {
		overflow-x: hidden;
	}
	body {
		padding: 0;
		overflow-x: hidden;
	}
	.hero p {
		font-size: var(--font-size-3) !important;
		margin: 0 -2rem 0 0;
		padding: 2rem 2rem 2rem 2rem;
	}
	.hero p span {
		font-size: var(--font-size-5) !important;
	}
	.page {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	h1 small, .h1 small,
	h2 small, .h2 small,
	h3 small, .h3 small,
	h4 small, .h4 small,
	h5 small, .h5 small,
	h6 small, .h6 small {
		font-size: 50%;
	}

}