* {
	box-sizing:						border-box;
    textarea{display:block}
}

:root {
	--main-background-color:		rgb(235, 235, 235);
	--button-color-dark:			rgb(47, 106, 49);
	--button-color:					rgb(076, 175, 080);
	--button-hover-color:			rgb(255, 153, 000);
	--button-glow-color:			rgba(255, 184, 77, 0.5);
	--color-sognare-blue:			rgb(162, 181, 208);
	--color-sognare-dark-blue:		rgb(85, 120, 170);
	--color-gray-special:			rgba(120, 120, 130, 150);
	--color-light-gray:				rgb(230, 230, 230);
	--color-dark-gray:				rgb(200, 200, 200);
	--color-blue:					rgb(0, 102, 255);
	--color-red:					rgb(255, 0, 0);
	--color-purple:					rgb(196, 100, 200);
	--color-shadow:					rgba(0, 0, 0, 0.20);
	--font-family:					Arial, Helvetica, sans-serif;
	--font-color:					rgb(64, 64, 64);
	--table-th-color:				rgb(68, 96, 136);
	--neon-green:					rgb(6, 216, 95);
	--background-color-table-light:	rgb(140, 143, 153);
	--background-color-table-dark:	rgb(120, 123, 133);
	--font-color-table:				rgb(252, 252, 252);
	--gradient-gold:				radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
		/*Card*/
	--card-color-night:				rgb(010, 075, 120);
	--card-color-day:				rgb(108, 187, 242);
	--card-color-night-1:			rgb(001, 038, 058);
	--card-color-night-2:			rgb(079, 148, 212);
	--card-color-night-3:			rgb(197, 217, 237);
	--card-color-day-3:				rgb(155, 158, 000);
	--card-color-night-4:			rgb(114, 174, 230);
	--card-color-day-4:				rgb(255, 167, 077);
	--card-color-night-5:			rgb(158, 194, 230);
	--card-color-day-5:				rgb(255, 207, 077);
	--card-color-night-6:			rgb(255, 230, 000);
	--card-color-day-6:				rgb(242, 239, 106);
	--card-color-night-7:			rgb(019, 094, 150);
	--card-color-day-7:				rgb(065, 025, 025);
	--card-color-night-8:			rgb(004, 057, 089);
	--card-color-day-8:				rgb(031, 013, 011);
	--card-color-day-9:				rgb(132, 046, 000);
	--card-color-night-10:			rgb(056, 111, 164);
	--card-color-day-10:			rgb(056, 111, 164);
	/*Fonts size*/
	--tabela-font-size:				0.7;
	/*Ediçao indicadores*/
	--indicador-qtd-rows:			6;
	--indicador-qtd-columns:		4;
}

svg:hover #icon {
	fill:					var(--button-hover-color);
}

header {
	font-family:			Arial, Helvetica, sans-serif;
}

html {
	min-height:				100%;
	font-family:			Arial, Helvetica, sans-serif;
	background:				radial-gradient(ellipse at bottom, rgba(224, 228, 232) 0%, rgba(231, 235, 239) 100%);
	background-repeat:		no-repeat;
    background-size:		auto;
	scroll-behavior:		smooth;
}

body {
	margin:					0;
    padding:				0;
}

/*==================================================
 * Generic
 *================================================*/

.autoScreenMargin {
    margin:                 5em auto !important;
    padding:                0 2em;
}

.background-one {
    z-index:                -99;
    left:                   0;
    top:                    0;
    bottom:                 0;
    right:                  0;
    background-image:       repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
    background-size:        4px 4px;
    background-color:       grey;
}

.page {
	margin-top:				3.5em;
	margin-left:			5em;
	margin-right:			5em;
	margin-bottom:			5em;
	min-height:				94vh;
}

.pageTopic {
	font-family:			Arial, Helvetica, sans-serif;
	text-indent:			1em;
	text-align:				justify;
	font-size:				1.5em;
	color:					var(--table-th-color);
}

.pageSubTopic {
	font-family:			Arial, Helvetica, sans-serif;
	text-indent:			1em;
	text-align:				justify;
	font-size:				1.3em;
	color:					var(--table-th-color);
}

.pageText {
	font-family:			Arial, Helvetica, sans-serif;
	text-indent:			2.5em;
	text-align:				justify;
	text-justify:			inter-word;
	font-size:				1.2em;
	color:					var(--font-color);
	margin:					auto 2em;
}

.pageTextSmall {
	font-family:			Arial, Helvetica, sans-serif;
	text-indent:			2.5em;
	text-align:				justify;
	font-size:				0.8em;
	color:					var(--font-color);
}

.pageTextSpan {
	font-family:			Arial, Helvetica, sans-serif;
	text-align:				justify;
	font-size:				1.2em;
	color:					var(--font-color);
}

.paragrafoSubTopic {
	display:				inline-block;
	text-indent:			1em;
}

.paragrafoText {
	display:				inline-block;
	text-indent:			2.5em;
}

.textLarge {
	font-size:				4em!important;
}

.textCenter {
	text-align:				center;
	text-indent:			0em;
	margin-left:			auto;
	margin-right:			auto;
}

.textCenterVertical {
	vertical-align:			middle;
	position:				relative;
}

.textLeft {
	text-indent:			0em;
	text-align:				left;
}

.textAuto {
	text-indent:			0em;
	text-align:				left;
}

.textRight {
	text-indent:			0em;
	text-align:				right;
}

.textLineThrough {
	text-decoration:		line-through;
}

.column-break-control {
	break-inside:			avoid;
}

.grid-column-count-2-auto {
    display:                grid;
    grid-template-columns:  50% 50%;
    white-space:            nowrap;
}

.column-count-2-auto {
	column-count:			2;
    text-indent:            0em;
}

.column-count-3-auto {
	column-count:			3;
    text-indent:            0em;
}

.column-count-4-auto {
	column-count:			4;
    text-indent:            0em;
}

.column-count-5-auto {
	column-count:			5;
    text-indent:            0em;
}

.column-count-6-auto {
	column-count:			6;
    text-indent:            0em;
}

.column-count-7-auto {
	column-count:			7;
	column-gap:				14em;
    text-indent:            0em;
}

.auto-grid {
	display:				inline-block;
}

input[type="file"] {
	opacity:				0;
}

input[type="number"] {
	-webkit-appearance:		none;
	-moz-appearance:		textfield;
	text-align:				right;
}

input[type="range"] {
	width:					90%;
}


.regular-input {
	width:					100%;
    padding:				0.5em;
	border-top:				none;
	border-right:			none;
	border-left:			0.2em solid var(--button-hover-color);
	border-bottom:			0.1em solid rgb(180, 180, 180);
	background-color:		transparent;
    margin:					0.5em auto 0.5em auto;
	color:					rgb(60, 60, 60);
	font-weight:			bold;
	font-family:			Arial, Helvetica, sans-serif;
	text-align:				left!important;
	box-sizing:				border-box;
}

.readonly-input-small {
	overflow:				hidden;
	margin:					0.5em 0em 1em 5em;
	padding:				0.3em;
	border-radius:			0em;
	width:					auto;
}

.readonly-input {
	width:					100%;
    padding:				0.5em;
	border-top:				none;
	border-right:			none;
	border-left:			0.2em solid var(--button-hover-color);
	border-bottom:			none;
	background-color:		rgb(220, 220, 220);
    margin:					0.5em auto 0.5em auto;
	color:					rgb(200, 0, 0);
	font-weight:			bold;
	font-size:				1.2em;
	font-family:			Arial, Helvetica, sans-serif;
}

.readonly-input-small {
	overflow:				hidden;
	margin:					0.5em 0em 1em 5em;
	padding:				0.3em;
	border-radius:			0em;
	width:					auto;
}

.input-dot {
	overflow:				hidden;
	padding:				0.3em;
	border-style:			none none none none;
	margin-right:			2em;
	border-radius:			0.3em;
	box-shadow:				inset 0 0 0.3em rgba(0,0,0,0.7);
	background-color:		var(--button-hover-color);
}

.greenButton  {
	font-family:			Arial, Helvetica, sans-serif;
	text-decoration:		none;
	font-size:				1em;
	font-weight:			bold;
	text-align:				center;
    background:				linear-gradient(45deg, var(--color-sognare-dark-blue) 6%, var(--color-sognare-blue) 46%, rgb(162, 181, 208) 49%, var(--color-sognare-blue) 52%, var(--color-sognare-dark-blue) 94%);
    color:					white;
	padding:				0.4em 1.5em;
    border:					0.1em solid rgb(0, 0, 0, 0.3);
    border-radius:			0.3em;
    cursor:					pointer;
	white-space:			nowrap;
	box-shadow:				0em 0em 0em 0.2em var(--color-shadow);
}

.greenButton:hover {
    background:				linear-gradient(45deg, var(--color-sognare-dark-blue) 6%, var(--color-sognare-blue) 49%, rgb(162, 181, 208) 52%, var(--color-sognare-blue) 55%, var(--color-sognare-dark-blue) 94%);
    color:					var(--button-hover-color);
	box-shadow:				0em 0em 0em 0.2em var(--color-shadow);
}

.silverButton {
   background:				linear-gradient(45deg, rgba(0,0,0) 6%, rgba(125,125,125) 46%, rgba(170,170,170) 49%, rgba(125,125,125) 52%, rgba(0,0,0) 94%);
   margin-left: 			6em;
}

.silverButton:hover {
   background:				linear-gradient(45deg, rgba(0,0,0) 6%, rgba(125,125,125) 49%, rgba(150,150,150) 52%, rgba(125,125,125) 55%, rgba(0,0,0) 94%);
}

.link {
	color:					var(--button-hover-color);
    cursor:					pointer;
	text-decoration:		none;
	font-size:				0.7em;
	font-weight:			bold;
	border:					none;
	transform:				translateY(-0.5em);
	background-color:		transparent;
	text-decoration:		underline;
	margin:					0.3em auto auto 0em;
}

.centered {
	display:				flex;
	justify-content:		center;
	align-items:			center; 
	height:					100vh;
	margin:					0;
}

/* Estilo para a barra inferior */
.footer_bar {
    background-color:		var(--color-sognare-dark-blue);
    color:					white;
    text-align:				center;        
    padding:				0.3em;          
    font-family:			var(--font-family);
	font-size:				0.75em;
    bottom:					0;
    left:					0;
    width:					100%;
    height:					2vh;
    display:				flex;
    justify-content:		center;  /* Centraliza horizontalmente */
    align-items:			center;      /* Centraliza verticalmente */
}

.textArea {
	width:					100%;
	min-height:				10em;
	font-size:				1em;
    box-sizing:				border-box;
	border:					0.1em solid rgb(0, 0, 0, 0.3);
}

.captcha {
	color:					white;
	font-size:				0.75em;
	background-color:		steelBlue;
	padding:				0.4em;
	margin:					1em auto;
	max-width:				20em;
	border:					0.2em solid rgb(43, 80, 110);
}

#padrao_listrado {
	background-size:		10px 10px;
	background-image:		repeating-linear-gradient(45deg, var(--color-dark-gray) 0, var(--color-dark-gray) 1px, rgba(255,0,0,0) 0, rgba(255,0,0,0) 50%);
	z-index:				2;
}

.padrao_listrado_alerta {
	background-size:		15px 15px;
	background-image:		repeating-linear-gradient(45deg, yellow 0, yellow 1px, rgba(255,0,0,0) 0, rgba(255,0,0,0) 50%);
	z-index:				2;
}

/* Checkbox show hide extra div info*/
#info {
    display: none;
}

#infoShow:checked ~ #info {
  display:					inline-block;
  text-align:				left;
}


/* Botão switch */
.switch_contaniner {
	margin:					0.1em auto;
	width:					3em;
}

.switch {
	visibility:				hidden;
	position:				absolute;
	margin-left:			-100em;
}

.switch + label {
	display:				inline-block;
	position: 				relative;
	cursor:					pointer;
	outline:				none;
	user-select:			none;
	padding:				0.1em;
	margin:					-0.2em 0.5em;
	width:					3em;
	height:					1em;
	background-color:		#dddddd;
	border-radius:			1em;
}
.switch + label:before {
	right:					0.1em;
	background-color:		#f1f1f1;
	border-radius:			1em;
	transition:				background 0.4s;
}

.switch + label:after {
	display:				block;
	position:				absolute;
	top:					1px;
	left:					1px;
	bottom:					1px;
	content:				"";
	width:					1em;
	background-color:		var(--button-color);
	border-radius:			100%;
	box-shadow:				0 0.1em 0.2em var(--color-shadow);
	transition:				all 0.4s;
}

.switch:checked + label:before {
	background-color:		#8ce196;
}
.switch:checked + label:after {
	transform:				translateX(1.86em);
}

.box_switch_content {
	display:				none;
}

#trigger:checked  ~ .box_switch_content {
	display:				block;
	text-align:				left;
}

#tabela_clean {
    width:                  100%;
    max-width:              calc(100% - 1em); /* Subtraindo a margem de 1em de cada lado */
    font-family:			Arial, Helvetica, sans-serif;
	font-weight:			bold;
	font-size:				1em;
    color:					var(--font-color);
	background-color:		white;
	border-collapse:		collapse;
	border-radius:			0.3em;
	box-shadow:				0.1em 0.1em 0.2em 0.1em var(--color-shadow);
}

#tabela_clean tr {
	border-top:				0.1em solid var(--color-light-gray);
	border-bottom:			0.1em solid var(--color-light-gray);
}

#tabela_clean tr:hover {
	background-color:		var(--button-hover-color);
}

#tabela_clean th {
	color:					white;
	font-size:				0.8em;
	font-weight:			bold;
	text-align:				center;
	background-color:		var(--background-color-table-light);
}

#tabela_clean td {
	text-align:				center;
	color:					var(--font-color);
	font-size:				0.8em;
	border-top:				0em solid var(--color-light-gray);
}

#tabela_clean div {
	background-color:		var(--neon-green);
	height:					0.5em;
}

.grid {
	margin:					auto;
	color:					black;
    background-color:		rgb(160, 160, 160);
	border:					0.1em solid rgb(180, 180, 180);
	border-radius:			0.2em;
	text-indent:			0.5em;
	font-size:				0.8em;
	padding:				0.3em;
	box-shadow:				inset 0 0.1em 0.2em rgba(0,0,0,0.5);
	width:					60%;
}

.box-insere-plantao {
    display:                block;
	/*white-space:			nowrap;*/
	margin:					1em 0.5em;
	border:					0em;
	border-radius:			0.2em;
	padding:				1.1em;
	font-size:				1em;
	background-color:		var(--color-light-gray);
	min-width:				48%;
}

 .notify-bubble {
    top:					1em;
    right:					1em;
    padding:				0.2em 0.5em 0.2em 0.6em;
	margin:					0.5em;
    background-color:		var(--button-color);
    color:					white;
    font-size:				0.65em;
    border-radius:			50%;
    box-shadow:				1px 1px 1px gray;
}

.aviso-sem-link {
	margin:					2em auto auto auto;
	border:					1px solid rgb(210, 210, 210);
	padding:				1em;
	background-color:		rgb(250, 250, 250);
	box-shadow:				0.0em 0.5em 1em 0em var(--color-shadow);
	max-width:				28em;
	min-width:				8em;
	min-height:				8em;
	text-align:				center;
    position:				relative;
	word-wrap:				break-word;
}

.full-space-link-container {
	display:				grid;
	width:					100%;
	grid-template-columns:  repeat(auto-fit, minmax(25em, 1fr)); /* Ajuste automático das colunas */
	position:				relative;
    align-items:			stretch;

	#card {
		display:			grid;
		word-wrap:			break-word;
		margin:				2em;
		padding:			1em 2.6em;
		border-radius:		0.8em;
		box-shadow:			0.3em 0.3em 0.7em 0.3em var(--color-shadow);
		background:			radial-gradient(circle, rgb(210, 210, 210) 0%, rgb(190, 190, 190) 100%);
		align-self:			stretch;
		font-family:		Arial, Helvetica, sans-serif;
		text-align:			justify;
		text-justify:		inter-word;
		font-size:			1em;
		color:				var(--font-color);
		line-height:		1.5em;
	}

	#card:hover {
		box-shadow:			0.2em 0.2em 0.3em 0.1em var(--color-shadow);
	}
}


.full-space-link-span{
	position:				absolute;
	width:					100%;
	height:					100%;
	top:					0;
	left:					0;
	z-index:				1;
}


.pop-up-box {
	padding:				3em;
	position:				fixed;
	top:					0;
	bottom:					0;
	left:					0;
	right:					0;
	background:				rgba(0, 0, 0, 0.7);
	transition:				opacity 500ms;
	visibility:				hidden;
	opacity:				0;
	z-index:				1000;
	overflow-y:				auto;
}

.pop-up-box:target {
	visibility:				visible;
	opacity:				1;
}

.pop-up-box-invertido {
	padding:				3em;
	position:				fixed;
	top:					0;
	bottom:					0;
	left:					0;
	right:					0;
	background:				rgba(0, 0, 0, 0.7);
	transition:				opacity 500ms;
	visibility:				visible;
	opacity:				1;
	z-index:				1000;
	overflow-y:				auto;
}

.pop-up-box-invertido:target {
	visibility:				hidden;
	opacity:				0;
}


.resize_function {
    border: 				1px solid rgb(200, 200, 200);
	border-radius:			0.4em;
  	width:					auto;
  	height:					var(--size);
	padding:				1em;
}

.info-box {
		padding: 			0.2em 1em 1em 1em;
		margin:				2em 0em;
		border: 			1px solid rgb(200, 200, 200);
		border-radius:		0.3em;
		background-color:	rgb(204, 204, 204);
}

.info-box-topo {
    border-radius:		    0.3em 0.3em 0em 0em;
    padding:                0.2em;
    margin-top:             -0.2em;
    margin-left:            -0.85em;
    margin-right:           -0.85em;
    background-color:       var(--color-sognare-blue);
}

 /*===============================================
 * index.php
 *================================================*/

/* Banner */
.banner {
	padding-top:			2em;
	padding-bottom:			1em;
    width:					100%;
    height:					auto;
}

.banner img {
	display:				block;
	margin-left:			auto;
	margin-right:			auto;
    position:				relative;
}

 /* Correção anchor */
.anchor{
    padding-top:			1.6em;
}

/* Barra de Navegação */
.hide-small-screen {
	display:				inline-block;
}

.show-small-screen {
	display:				none;
}

/* Slideshow container */
.slideShowScreen {
	position:				relative;
	overflow:				hidden;
	z-index:				0;
	width:					100%;
	height:					20em;
	margin-top:				0em;
	margin-bottom:			auto;
	margin-left:			0;
	margin-right:			0;
   	border-top:				0.05em solid rgb(110, 110, 110);
	border-bottom:			0.05em solid rgb(110, 110, 110);
	box-shadow:				0em 0em 0.2em 0.2em var(--color-shadow);
}

.slide {
	position:				absolute;
	opacity:				0;
	width:					auto;
	height:					100%;
	z-index:				1;
	background-color:		rgb(0,0,0);
	animation-name:			slideAnimation;
	animation-duration:		30s;
	animation-iteration-count: infinite;
}

.slide:nth-child(1) {
}

.slide:nth-child(2) {
	animation-delay:		10s;
}

.slide:nth-child(3) {
	animation-delay:		20s;
}

@keyframes slideAnimation {
	0% {
		transform:			scale(1.2,1.2);
	}
	10% {
		transform:			scale(1,1);
		opacity:			1;
	}
	33% {
		opacity:			1;
	}
	45% {
		opacity:			0
	}
	100% {
		opacity:					0;
	}
}

.slideBox {
	opacity:						0;
	display:						inline-block;
	position:						absolute;
	bottom:							3em;
	left:							4em;
	max-width:						20em;
	padding-top:					0.5em;
	padding-bottom:					0em;
	padding-left:					1.5em;
	padding-right:					1.5em;
	background-color:				var(--color-gray-special);
	border-bottom:					0.5em solid var(--button-hover-color);
	box-shadow:						0.2em 0.2em 0em 0.0em var(--color-shadow);
	transform:						skew(-25deg);
	z-index:						2;
	animation-name:					slideBoxAnimation;
	animation-duration:				10s;
	animation-iteration-count: 		infinite;
}

@keyframes slideBoxAnimation {

	34% {
		opacity:					0;
	}

	44% {
		opacity:					0.85;
	}

	90% {
		opacity:					0.85;
	}

	100% {
		opacity:					0;
	}
}

.slideBox .slideTextTopic {
	display:						inline-block;
	transform:						skew(25deg);
	font-weight:					bold;
	font-size:						1em;
	color:							rgb(245, 245, 245);
}

.slideBox .slideText {
	display: 						inline-block;
	font-weight: 					bold;
	font-size: 						0.8em;
	color:							rgb(245, 245, 245);
}

/* Fading animation */
.fade {
	animation-name:					fade;
	animation-duration:				1.5s;
	-webkit-animation-name:			fade;
	-webkit-animation-duration: 	1.5s;

}

@-webkit-keyframes fade {
	from {
		opacity:					0.4;
		-webkit-filter:				opacity(0.4);
	}
	to {
		opacity: 					1;
		-webkit-filter:				opacity(1);
	}
}

@keyframes fade {
	from {
		opacity: 					0.4;
		-webkit-filter:				opacity(0.4);
	}

	to {
		opacity: 1;
		-webkit-filter:				opacity(1);
	}
}

.box {
	margin:						3em auto 3em auto;
	width:						100%;
    height:						auto;
	overflow: 					hidden;
	color:						white;
	text-align:					center;
	padding:					0em;
	border-radius:				0.3em;
	background:					rgb(34,34,34);
}

.box-title {
	font-size:					1.3em;
	background:					var(--color-sognare-dark-blue);
	height:						1.9em;
	position: 					relative;
	text-align:					center;
	font-weight:				bold;
	color:						white;
	padding:					0.4em 0;
}

.box-content {
	padding:					1em 1em;
	font-size:					0.9em;
	text-align:					justify;
}

.centralPageLeftColumn {
	float:					left;
	margin-left:			auto;
	margin-right:			auto;
	margin-top:				3em;
    max-width:				19em;
	height:					22em;
}

.centralPageCentralColumn {
	margin-left:			auto;
	margin-right:			auto;
	margin-top:				3em;
    max-width:				19em;
	height:					22em;
}

.centralPageRightColumn {
	float:					right;
	margin-left:			auto;
	margin-right:			auto;
	margin-top:				3em;
    max-width:				19em;
	height:					22em;
}

/* Circulo Responsivo */
#circle{
	display:				block;
	margin-left:			auto;
	margin-right:			auto;
    position:				relative;
	width:					2.5em;
	height:					2.5em;
	border-radius:			2.5em;
	background-color:		rgb(220,220,220);
	box-sizing:				border-box;
	line-height:			2.5em;
	text-align:				center;
	font-size:				2.5em;
	color:					var(--button-hover-color);
	border:					0.02em solid rgb(200, 200, 200);
	transition:				.4s;
	box-shadow:				0em 0.2em 0.2em 0.01em var(--color-shadow);
}

#circle g {
	fill:					var(--button-hover-color);
}

#circle:hover {
	color:					var(--button-hover-color);
	background-color:		var(--button-hover-color);
	box-shadow:				0em 0em 0.1em 0em rgba(0,0,0,0.4);
}

#circle:hover g{
	fill:					rgb(220,220,220);
}

/*==================================================
 * parcerias.php
 *================================================*/

 div.gallery {
 	position: 				relative;
 	float:					left;
	text-align:				center;
	font-size:				0.8em;
	font-weight:			bold;
	font-family:			Arial, Helvetica, sans-serif;
	color:					var(--font-color);
	margin:					2em;
    border:					1px solid rgb(210, 210, 210);
    max-width:				19.4em;
    width:					19.4em;
	max-height:				12em;
    height:					12em;
 	padding:				0.5em 0em 0em 0em;
	background-color:		rgb(250, 250, 250);
	box-shadow:				0.0em 0.5em 1em 0em var(--color-shadow);
}

div.gallery:hover {
    border:					1px solid var(--button-hover-color);
	box-shadow:				0.0em 0.1em 0.5em 0em var(--color-shadow);
}

div.gallery img {
    width:					100%;
    height:					auto;
}

div.desc {
	position: 				absolute;
	bottom:					0.3em;
	width:					100%;
}


/*==================================================
 * contato.html
 *================================================*/
.emailBox {
	width:					60%;
	margin-top:				auto;
	margin-left:			auto;
	margin-right:			auto;
    margin-bottom:			auto;
    background-color:		rgb(250, 250, 250);
    padding:				2em;
	border:					0.1em solid rgb(200, 200, 200);
	border-radius:			0.5em;
	box-shadow:				0em 0.5em 1em 0em var(--color-shadow);
}


/*==================================================
 * acesso.html
 *================================================*/
.logOn {
	margin:					auto;
	width:					35%;
	padding:				3em 2em 0em 2em;
	box-shadow:				0em 0.3em 0.5em 0em var(--color-shadow);
	background:				linear-gradient(to bottom,var(--color-sognare-blue) 0%, var(--color-sognare-blue) 4%, rgb(250, 250, 250) 4%, rgb(250, 250, 250) 92%, rgb(250, 250, 250) 100%);
}

.logOnNewUser {
	padding:				0.4em;
	border-radius:			0em;
	width:					100%;
	font-family:			Arial, Helvetica, sans-serif;
	font-weight:			bold;
	cursor:					pointer;
	border:					0.2em solid var(--color-gray-special);
	border-bottom:			0em;
	color:					var(--color-gray-special);
	background:				transparent;
	transform:				translateY(-1%);

}

.logOnNewUser:hover {
	background:				var(--color-gray-special);
	color:					white;
}

/*==================================================
 * registrado.php
 *================================================*/
div.columnLeft {
	font-size:				1em;
	font-family:			Arial, Helvetica, sans-serif;
	text-align:				justify;
	color:					var(--font-color);
	margin-left:			3em;
	margin-right:			3em;
	margin-bottom:			2em;
    float:					left;
	width:					24em;
}

/*==================================================
 * orientacoes.php
 * ===============================================*/

#nav_menu {
	border-collapse:		collapse;
    padding:				0.4em 0.6em 0.2em 0.6em;
    margin:					1em auto;
}

#nav_menu th {
	margin:					0em;
	padding:				0em 0.2em;
    text-align:				center;
    align-items:			center;
	background-color:		var(--table-th-color);
    color:					rgb(255, 255, 255);
}

#nav_menu tr {
	background-color:		rgb(190, 190, 190);
}


#nav_menu td, #nav_menu input, #nav_menu select {
	padding:				0.15em 0.15em;
	border:					none;
	background-color:		transparent;
    color:					rgb( 60, 60, 60);
	font-weight:			bold;
	font-family:			Arial, Helvetica, sans-serif;
	text-align:				center;
	text-indent:			0em;
	width:					100%;
}

/* muda a cor da fonte do selector*/
#nav_menu select {
    color:					black;
}

#nav_menu option {
    color:					var(--font-color);
}

#nav_menu section {
	padding:				0.15em 0.15em;
	color:					black;
	font-weight:			bold;
	font-family:			Arial, Helvetica, sans-serif;
	font-size:				1em;
}

#nav_menu td:focus,  #nav_menu input:focus, #nav_menu select:focus {
	background-color:		white;
	color:					var(--font-color);
}

#nav_menu ul {
display: inline-block;
	position:				relative;
	top:					-0.8em;
	left:					0em;
	padding:				0.2em 0.5em;
	color:					black;
	font-size:				1em;
	font-weight:			normal;
	font-family:			Arial, Helvetica, sans-serif;
	list-style:				none;
	background-color:		white;
	z-index:				999;
	line-height: 			2em;
}

#nav_menu li.selected, #nav_menu li:hover {
	background-color:		rgb(230,230,230);
	cursor:					pointer;
}


/*==================================================
 * cadastro.php
 * ===============================================*/
.alert {
    font-family:			Arial, Helvetica, sans-serif;
	text-align:				justify;
	text-justify:			inter-word;
	font-size:				0.8em;
	color:					rgb(255,0,0);
}

.button {
	background-color:		rgb(76, 175, 80);
    color:					white;
    padding:				1em 2em;
    border:					none;
    border-radius:			0.5em;
    cursor:					pointer;
	text-decoration:		none;
	font-size:				0.8em;
	white-space:			nowrap;
}

/*==================================================
 * registrado.html
 *================================================*/
.top-bar {
	position:				fixed;
	top:					0em;
    width:					100%;
    height:					2em;
	background-color:		var(--color-gray-special);
	line-height:			1.9em;
	box-shadow:				0em 0em 0.5em 0.2em var(--color-shadow);
	filter:					blur(3);
	z-index:				1000;
}

/* Menu Hambuger */
#menu {
	background-color:		inherit;
	height:					inherit;
    color:					white;
    padding:				0.2em 1.5em 0.2em 1.5em;
    border:					none;
	font-size:				1em;
	font-family:			Arial, Helvetica, sans-serif;
	font-weight:			bold;
	text-decoration:		none;
    margin:					0;
    padding:				0;
	white-space:			nowrap;
}

#nav {
    height:					inherit;
    list-style:				none;
    margin:					0;
    padding:				0;
	left:					0;
    text-align:				left;

}

#nav input {
	margin:					2em;
	padding:				2em;
	cursor:					pointer;
    width:					auto;
	height:					2em;
	cursor:					pointer;
	opacity:				0;
	position:				absolute;
	z-index:				99;
}

#nav input:checked ~ ul{
	display:				block;
}

#nav input ~ label {
	border:					0.4em solid transparent;
}

#nav input:checked ~ label{
	color:					var(--button-hover-color);
 	text-shadow:			0.3em 0em 0.4em var(--button-glow-color);
	background-color:		rgb(102, 134, 178);
	border:					0.4em solid rgb(102, 134, 178);
}

#nav input:hover ~ label{
	color:					var(--button-hover-color);
 	text-shadow:			0.3em 0em 0.4em var(--button-glow-color);
}

#nav li {
    display:				inline-block;
	width:					auto;
}

#nav li a {
	cursor:					pointer;
	margin:					auto 1em;
    width:					auto;
    text-decoration:		none;
	color:					rgb(255,255,255);
}

#nav li li {
	display:				block;
	border-bottom:			0.05em solid rgb(210,210,210);
	padding:				0.5em 0.5em;
}

#nav li li a {
	display:				block;
	font-size:				0.8em;
}

/*--- Sublist Styles ---*/
#nav ul {
	display:				none;
    position:				absolute;
	padding:				0;
	background-color:		rgb(120, 120, 130);
	border-top:				0.15em solid rgb(210,210,210);
	border-bottom:			0.15em solid rgb(210,210,210);
	box-shadow:				0.2em 0.2em 0.2em 0.05em var(--color-shadow);
}

#nav ul ul {
	left:					10.65em;
	display:				block;

}

/*--- Hide Sub Sublists ---*/
#nav li:hover ul ul {
	display:				none;
}

/*--- Sublevel UL's display and position on hover ---*/
#nav li:hover ul {
	/*display:				block;*/
}

#nav li li:hover ul {
	margin-top:				-2.55em;
	display:				block;
}

#nav a:hover {
	color:					var(--button-hover-color);
 	text-shadow:			0.3em 0em 0.4em rgb(255, 184, 77, 0.5);
}

@media only screen and (max-width : 42em) {

	.footer_bar {
		font-size:				0.45em;
	}
	
	#nav ul{
		left:					0;
		width:					100%;
		text-align:				center;

	}

	#nav ul ul{
		position:				relative;
		top:					2.5em;
		left:					0em;
		margin:					0em 0em 2em 0em;
		box-shadow:				inset 0 0 0.15em 0.15em rgb(100, 100, 100);
		border-bottom:			none;
	}

	#nav li li {
		padding:				0.2em 0em 0.2em 0em;
	}

	.column-count-2-auto {
		column-count:			1;
	}
	.column-count-4-auto {
		column-count:			1;
	}
	.column-count-5-auto {
		column-count:			1;
	}

	.textLarge {
		font-size:				1em!important;
	}

	.pageTopic {
		font-size:				1.2em;
	}

	.pageSubTopic {
		font-size:				1em;
	}

	.pageText {
		font-size:				0.9em;
	}

	.pageTextSmall {
		font-size:				0.75em;
	}

	.pageTextSpan {
		font-size:				0.9em;
	}

	div.columnLeft {
		font-size:				0.9em;
		margin-left:			0em;
		margin-right:			3em;
		margin-bottom:			0em;
	}

	.slideBox {
		bottom:					1em;
		left:					2em;
		max-width:				10em;
		margin-right:			1em;
		padding-top:			0.5em;
		padding-bottom:			0em;
		padding-left:			1.5em;
		padding-right:			1.5em;
	}

	.slideBox .slideTextTopic {
		transform:				skew(25deg);
		font-weight:			bold;
		font-size:				0.8em;
		color:					rgb(245, 245, 245);
	}

	.slideBox .slideText {
		padding-left:			1.5em;
		font-weight:			bold;
		font-size:				0.7em;
		color:					rgb(245, 245, 245);
	}

	.emailBox {
		margin:					0em 0.3em 0em 0.3em;
        width:					auto;
		border:					none;
		padding:				2em 0em;
		box-shadow:				none;
		transform: 				none;
	}

	.column-break-control {
		break-inside:			auto;
	}

	.pop-up-box {
		padding:				2em 1em;
	}

	.pop-up-box-invertido {
		padding:				2em 1em;
	}

	#popUp {
		font-size:				0.9em;
		margin:					1em 0em;
	}

	.grid-edicao {
		grid-template-columns:	repeat(1, 100%) !important;
	}

}

div .notice {
	margin-top:					5em;
	margin-left:				auto;
	margin-right:				auto;
    margin-bottom:				5em;
    border:						1px solid rgb(210, 210, 210);
    width:						50%;
	padding:					1em;
	background-color:			rgb(250, 250, 250);
	box-shadow:					0em 0.5em 1em 0em var(--color-shadow);
}

/*==================================================
 * calendar_task.php
 *================================================*/

.scroll {
	overflow-x: 				scroll;
	background:					transparent;
	max-width:					100vw;
	padding:					3em 2em;
}

table#calendar {
	font-family:				Arial, Helvetica, sans-serif;
	text-align:					center;
	font-size:					1.5em;
	border-collapse:			collapse;
	table-layout:				fixed;
}


table#calendar th {
	text-align:					center;
	font-size:					0.7em;
	color:						var(--button-color-dark);
	vertical-align:				middle;
	background-color:			var(--button-color);
	padding:					0.2em 0em;
	border:						0.1em solid var(--button-color);
	overflow:					hidden;
	white-space:				nowrap;
}

table#calendar td {
	min-width:					10em;
	width:						calc(100vw /7);
	text-align:					left;
	background-color:			white;
	vertical-align:				top;
	font-size:					0.6em;
	border:						0.1em solid var(--color-dark-gray);
	height:						auto;
	overflow:					hidden;
	text-overflow:				ellipsis;
	white-space:				nowrap;
}

table#calendar td:hover {
	color:						red;
	cursor:						pointer;
	background-color:			var(--color-light-gray);
}

table#calendar a {
	color:						white;
	font-weight:				bold;
	text-decoration:			none;
}

table#calendar a:hover {
	cursor:						pointer;
	color:						var(--button-hover-color);
}

table#calendar div {
	margin:						0em 0.2em;
	padding-right:				0.2em;
	text-align:					left;
	font-family:				Arial, Helvetica, sans-serif;
	font-size:					0.65em;
	line-height:				100%;
	color:						var(--font-color);
	vertical-align:				top;
	z-index:					6;
	align-items:				center;
}

table#calendar span {
	line-height:				1.45em;
	margin-left:				0em;
	vertical-align:				top;
}

table#calendar custom-title {
	display:				inline-block;
	line-height:			120%;
	width:					75%;
	margin:					0.2em;
	padding:				0.2em 0em;
	text-align:				justify;
	font-family:			Arial, Helvetica, sans-serif;
	font-size:				0.58em;
	color: 					var(--font-color);
	border-width:			0.1em;
	border-color:			var(--button-color);
	border-style:			hidden hidden solid hidden;
	vertical-align:			middle;
	z-index:				6;
}

table#calendar custom-day {
	color:					var(--button-color);
	font-size:				1.8em;
	vertical-align:			middle;
	margin:					0em 0.25em;
}

table#calendar section {
	color: 					var(--font-color);
	height:					100%;
	width:					100%;
	min-height:				10em;
}

table#calendar section:hover {
	color:					var(--button-hover-color);
}

.calendar-item-green {
	text-align:				center!important;
	color:					white!important;
	border:					none!important;
	background-color:		var(--neon-green)!important;
	width:					76%;
}

.calendar-item-red {
	border-color:			rgb(255,0,0)!important;
}

.calendar-item-orange {
	border-color:			rgb(255, 102, 0)!important;
}

.calendar-item-blue {
	border-color:			rgb(0, 102, 255)!important;
}

.calendar-item-gray {
	text-align:				center!important;
	color:					white!important;
	border:					none!important;
	background-color:		rgb(200, 200, 200)!important;
	width:					76%;
}

#popUp {
	position:				relative;
	top:					0;
	bottom:					0;
	left:					0;
	right:					0;
	z-index:				999;
	margin:					2em;
	border:					1px solid rgb(210, 210, 210);
	padding:				1em;
	background-color:		rgb(250, 250, 250);
	box-shadow:				0.0em 0.5em 1em 0em var(--color-shadow);
	min-width:				8em;
	min-height:				8em;
	text-align:				center;
	word-wrap:				break-word;
}

#popUp #head  {
	font-family:			Arial, Helvetica, sans-serif;
	margin:					1em auto auto auto;
	max-width:				10em;
	font-size:				1.2em;
	padding:				0.15em 1em 0.15em 1em;
	font-weight:			bold;
	text-align:				center;
	text-indent:			0em;
	color:					var(--color-sognare-dark-blue);
	border:					0.1em solid var(--neon-green);
	border-radius:			2em / 5em;
	line-height:			1.2em;
}

#popUp ul {
	 display:				block;
	text-align:				center;
}

#popUp li {
	display:				inline-block;
	width:					10em;
	height:					12em;
	text-align:				center;
	margin:					1em;
	padding:				1em;
	list-style-type:		none;
	background-color:		rgb(255, 255, 153);
	background-image:		linear-gradient(transparent, transparent 75%, rgba(255, 255, 255, .5) 100%);
	box-shadow:				0 0.6em 0.3em -0.3em var(--color-shadow);
}

#popUp item {
	font-weight:				bold;
	line-height:				0.8em;
	vertical-align:				middle;
	padding-left:				0.5em;
	font-size:					0.9em;
	color:						var(--font-color);
}

#popUp ff {
	margin-bottom:				0.8em;
	font-size:					0.8em;
	font-weight:				bold;
	display:					inline-block;
	padding:					0.1em 0.15em 0.1em 0.15em;
	color:						white;
	background-color:			black;
	width:						2em;
	text-align:					center;
	border-radius:				0.2em;
	background-image:			linear-gradient(rgba(255, 255, 255, .5) 50%, transparent 50%, transparent);
}

#popUp ff-aviso {
	font-size:					0.7em;
	font-weight:				bold;
	line-height:				0.6em;
	vertical-align:				middle;
	padding:					0.1em 0.2em 0.1em 0.2em;
	color:						var(--font-color);
	width:						2em;

}

.popUp label {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	font-size: 0.9em;
	color: rgb(64, 64, 64);
}

.popUp input {
		font-size: 0.9em;
}

#popUp select {
	color:					var(--font-color);
	font-weight:			bold;
    background-color:		white;
	padding:				0.2em;
	margin:					0.3em 0em 0.8em 0em;
	font-size:				0.8em;
}

.popUp-field {
	width: 3em;
	text-align:center;
	color: var(--font-color);
	font-weight: bold;
}

line {
    display:				block;
    height:					0.1em;
    border-top:				0.1em solid rgb(210,210,210);
}

.greenButton-small {
	font-family:			Arial, Helvetica, sans-serif;
	text-decoration:		none;
	text-align:				center;
	font-size:				0.60em;
	font-weight:			bold;
	padding:				0.2em 0.5em;
	background:				linear-gradient(to bottom,var(--neon-green) 0%, var(--table-th-color) 100%);
	box-shadow:				0em 0em 0.3em rgb(0, 0, 0, 0.5);
	color:					rgb(240, 240, 240);
	border:					0.1em solid rgb(110, 110, 110);
    cursor:					pointer;
	white-space:			nowrap;
}

.greenButton-small:hover {
	background:				linear-gradient(to bottom,var(--neon-green) 0%, var(--table-th-color) 100%);
	box-shadow:				inset 0em 0em 0.4em rgb(0, 0, 0, 0.5);
	text-shadow:			0em 0em 0.05em white;

}

:focus {
    outline:					none;
}

div.clear{
    clear:						both;
}


/*==================================================
 * restricted_page.php
 *================================================*/

.recibo_box {
	font-size:						0.8em;
	width:							95%;
	margin:							4em auto 3em auto;
    background-color:				rgb(250, 250, 250);
    padding:						1.5em;
	border:							0.1em solid rgb(200, 200, 200);
	box-shadow:						0em 0.5em 1em 0em var(--color-shadow);
	border-radius:					0.5em;
}

#tabela, #tabelaFixa {
	margin:							auto;
	width:							100%;
	border-collapse:				collapse;
}

#tabela th, #tabelaFixa th {
    text-align:						center;
    padding:						0em 0.5em;
	min-width:						4em;
	padding:						0.6em 0.6em;
    background-color:				var(--table-th-color);
    color:							white;
}

#tabela td, #tabelaFixa td {
	padding:						0.5em 0.5em;
	vertical-align:					middle;
	border: 						0;
}

#tabela tr:nth-child(even), #tabelaFixa tr:nth-child(even){
	color: 							var(--font-color-table);
	background-color:				var(--background-color-table-light);
	border-bottom: 					0.1em solid black;
}

#tabela tr:nth-child(odd), #tabelaFixa tr:nth-child(odd) {
	color: 							var(--font-color-table);
	background-color:				var(--background-color-table-dark);
	border-bottom: 					0.1em solid black;
}

#tabela tr:hover, #tabelaFixa tr:hover {
	background-color:				var(--button-hover-color);
}

#tabela select, #tabelaFixa select {
	color:							var(--font-color);
	width:							95%;
	font-size:						0.8em;
	text-indent:					-0.1em;
	border:							none;

}

#tabela .regular-input, #tabelaFixa .regular-input {
	color:							white;
}

/* Grid formulario de Edicao indicador */
.grid-edicao {
	margin:							auto;
	table-layout:					fixed;
	width:							95%;
	display: 						grid;
	background-color: 				transparent;
	padding: 						0em;
	grid-template-columns:			repeat(var(--indicador-qtd-columns), 25%);
	align-items:					center;
 }

.grid-edicao-item {
	background-color:				rgb(190, 190, 190);
	border:							0.15em solid var(--color-sognare-dark-blue);
	padding:						0.45em 0.2em;
	font-size:						0.8em;
	text-align:						center;
	vertical-align:					middle;
	height:							4em;
}

/*Fade-out Efeito de texto desaparecendo no final do container */
.fadeOut {
	mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

/* Grid clean histórido do formulario de Edicao indicador */
.grid-clean {
	display:						grid;
	grid-template-rows:				repeat(var(--indicador-qtd-rows), 1.8em);
	grid-template-columns: 			repeat(var(--indicador-qtd-columns), 20%);
	align-items:					center;
}

.grid-clean-item {
	text-align:						center;
	vertical-align:					middle;
}


/* Grid genérico universal para agrupar itens */
.grid-group {
	max-width:						80em;
	margin:							0 auto;
	display:						grid;
	gap:							1em;
	grid-template-columns:			repeat(auto-fit, minmax(14em, 1fr));
}

.grid-item {
	padding:						0em;
	margin:							0.2em 0em;
}


/*==================================================
 * Gráfico
 *================================================*/

#chart {
	display:						table;
	table-layout:					fixed;
	width:							95%;
	height:							25em;
	margin:							0em auto;
	background-color:				white;
	padding:						0 1em;
	border-bottom:					0.1em solid var(--font-color);
	z-index:						1;
}

.barra-vertical {

}

.limite {
	width:							1380%!important;
	background:						transparent!important;
	border-top:		 				0.1em solid red!important;
	border-bottom:					none;
	border-right:					none;
	border-left:					none;
	border-top-style:				dashed!important;
	z-index:						99!important;
}

#chart li {
	position:						relative;
	display:						table-cell;
	vertical-align:					bottom;
	height:							25em;
	color:							var(--table-th-color);
	text-align:						center;
	font-size:						0.7em;
	font-weight:					bold;
	font-family:					var(--font-family);
	z-index:						2;
}

#chart li span {
	color:							var(--font-color);
	font-size:						0.8em;
	font-weight:					bold;
	font-family:					var(--font-family);
	margin:							0em 0.5em;
	display:						block;
	background:						var(--table-th-color);
	animation:						draw 1s ease-in-out;
	z-index:						3;
}

#chart li span:before {
	position:						absolute;
	left:							0;
	right:							0;
	top:							100%;
	padding:						5px 1em 0;
	display:						block;
	text-align:						center;
	content:						attr(title);
	word-wrap:						break-word;
}

@keyframes draw {
	0% {
		height:						0;
	}
}

/* Card */
.cards-list {
	width:							100%;
	display:						flex;
	justify-content:				space-around;
	flex-wrap:						wrap;
}

.card {
	z-index:						5;
	margin:							2em 2em;
	width:							18em;
	height:							18em;
	border-radius:					1.5em;
	box-shadow:						0.2em 0.2em 2em 0.3em var(--color-shadow), -0.2em -0.2em 2em 0.3em var(--color-shadow);
	cursor:							pointer;
	transition:						0.4s;
}

.cardNight {
	background-color:				var(--card-color-night);
}

.cardDay {
	background-color:				var(--card-color-day);
}

.card .card_image {
	position:						absolute;
	width:							inherit;
	height:							inherit;
	border-radius:					1.5em;
	overflow:						hidden;
}

.card_imageDay {
	background:						linear-gradient(to bottom, var(--card-color-night-1) 0%, var(--card-color-night-2) 30%, var(--card-color-day-3) 75%);
}

.card_imageNight {
	background:						linear-gradient(to bottom, var(--card-color-night-1) 0%, var(--card-color-night-2) 70%, var(--card-color-night-3) 100%);
}

.card .card_image img {
	width:							inherit;
	height:							inherit;
	border-radius:					1.5em;
	object-fit:						cover;
}

.card .card_title {
	width:							inherit;
	position:						absolute;
	text-align:						center;
	border-radius:					0px 0px 40px 40px;
	font-family:					sans-serif;
	font-weight:					bold;
	font-size:						0.7em;
	margin-top:						-0.05%;
	line-height:					1.36em;
}

.card:hover {
	transform:						scale(1.05, 1.05);
	box-shadow:						0.1em 0.1em 2em 1em rgba(0,0,0,0.25), -5px -5px 30px 15px var(--color-shadow);
}

.title-white {
	color:							white;
}


.cardButton  {
	position:						relative;
    margin:                         0.5em auto;
	font-family:					Arial, Helvetica, sans-serif;
	text-decoration:				none;
	font-size:						0.85em;
	font-weight:					bold;
	text-align:						center;
    background:						linear-gradient(45deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.3) 49%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.5) 51%, rgba(255,255,255,0) 90%);
    color:							white;
	padding:						0.3em 1.3em;
    border-radius:					0.9em;
    cursor:							pointer;
	white-space:					nowrap;
	box-shadow:						0em 0em 0em 0.2em rgba(0,0,0,0.5);
	backdrop-filter:				blur(0.3em);
}

.cardButton:hover {
	background:						linear-gradient(45deg, rgba(255,255,255,0.09) 5%, rgba(255,255,255,0.3) 51%, rgba(255,255,255,0.7) 52%, rgba(255,255,255,0.5) 53%, rgba(255,255,255,0.09) 95%);
    box-shadow:						0em 0em 0em 0.2em var(--color-shadow);
}

.tableCard {
	position:						relative;
	font-size:						0.75em;
	color:							white;
	text-indent:					0em;
	text-align:						left;
	width:							100%;
	margin:							1.5em 0em;
	padding:						0em 1em;
}

.disc-1 {
	position:						absolute;
	top:							45%;
	left:							22.5%;
	width:							10em;
	height:							10em;
	background:						var(--card-color-day-4);
	opacity:						0.2;
	border-radius:					50%;
}

.disc-2 {
	position:						absolute;
	top:							55%;
	left:							31%;
	width:							7em;
	height:							7em;
	background:						var(--card-color-day-5);
	opacity:						0.4;
	border-radius:					50%;
	}

.disc-3 {
	position:						absolute;
	top:							62%;
	left:							40%;
	width:							4em;
	height:							4em;
	border-radius:					50%;
	background:						var(--card-color-day-6);
	opacity:						0.6;
}

.landscape-1 {
	position:						absolute;
	bottom:							-9%;
	left:							-5%;
	width:							20em;
	height:							6em;
	transform:						rotate(9deg);
}

.landscape-1Night {
	background-color:				var(--card-color-night-5);
}

.landscape-1Day {
	background-color:				var(--card-color-day-5);
}

.landscape-2 {
	position:						absolute;
	bottom:							-10%;
	right:							-5%;
	width:							20em;
	height:							6em;
	transform:						rotate(-6deg);
	transform:						rotate(-6deg);
}

.landscape-2Night {
	background-color:				var(--card-color-night-4);
}

.landscape-2Day {
	background-color:				var(--card-color-day-4);
}

.landscape-3 {
	position:						absolute;
	bottom:							-12%;
	left:							-5%;
	width:							20em;
	height:							5em;
	transform:						rotate(5deg);
}

.landscape-3Night {
	background-color:				var(--card-color-night-2);
}

.landscape-3Day {
	background-color:				var(--card-color-day-9);
}

.landscape-4 {
	position:						absolute;
	bottom:							-14%;
	left:							-5%;
	width:							20em;
	height:							5em;
	transform:						rotate(-4deg);
}

.landscape-4Night {
	background-color:				var(--card-color-night-7);
}

.landscape-4Day {
	background-color:				var(--card-color-day-7);
}

.landscape-5 {
	position:						absolute;
	bottom:							-19%;
	left:							-5%;
	width:							20em;
	height:							5em;
	transform:						rotate(2deg);
}

.landscape-5Night {
	background-color:				var(--card-color-night-8);
}

.landscape-5Day {
	background-color:				var(--card-color-day-8);
}

.tree-1 {
	position:						absolute;
	top:							76%;
	left:							20%;
	height:							0.7em;
	width:							0.5em;
	clip-path:						polygon(50% 0%, 22% 100%, 75% 100%);
	box-shadow:						2px 0 2px 4px rgba(0, 0, 0, .1);
}

.tree-1Day {
	background-color:				var(--card-color-day-4);
}
.tree-1Night {
	background-color:				var(--card-color-night-2);
}

.tree-2 {
	position:						absolute;
	top:							74%;
	left:							80%;
	height:							1em;
	width:							0.7em;
	clip-path:						polygon(50% 0%, 22% 100%, 75% 100%);
	box-shadow:						2px 0 2px 4px rgba(0, 0, 0, .1);
}

.tree-2Day {
	background-color:				var(--card-color-day-9);
}
.tree-2Night {
	background-color:				var(--card-color-night-2);
}

.tree-3 {
	position:						absolute;
	top:							75%;
	left:							3%;
	height:							1.1em;
	width: 							0.9em;
	clip-path:						polygon(50% 0%, 22% 100%, 75% 100%);
	box-shadow:						2px 0 2px 4px rgba(0, 0, 0, .1);
}

.tree-3Day {
	background-color:				var(--card-color-day-8);
}
.tree-3Night {
	background-color:				var(--card-color-night-10);
}

.tree-4 {
	position:						absolute;
	top:							72.5%;
	left:							58%;
	height:							0.8em;
	width:							0.6em;
	clip-path:						polygon(50% 0%, 22% 100%, 75% 100%);
	box-shadow:						2px 0 2px 4px rgba(0, 0, 0, .1);
}

.tree-4Day {
	background-color:				var(--card-color-day-4);
}
.tree-4Night {
	background-color:				var(--card-color-night-2);
}

.tree-5 {
	position: absolute;
	top: 69%;
	left: 80%;
	height: 30px;
	width: 25px;
	background-color: #133c55;
	clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
	box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
.tree-6 {
	position: absolute;
	top: 74%;
	left: 11%;
	height: 45px;
	width: 35px;
	background-color: #133c55;
	clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
	box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
.tree-7 {
	position: absolute;
	top: 72%;
	left: 40%;
	height: 35px;
	width: 25px;
	background-color: #133c55;
	clip-path: polygon(50% 0%, 22% 100%, 75% 100%);
	box-shadow: 2px 0 2px 4px rgba(0, 0, 0, .1);
}
.star {
	position:				absolute;
	width:					0.1em;
	height:					0.1em;
	background-color:		white;
}
.s1 {
	top:					19%;
	left:					7%;
}
.s2 {
	top:					48%;
	left:					78%;
}
.s3 {
	top:					36%;
	left:					20%;
}
.s4 {
	top:					32%;
	left:					37%;
}
.s5 {
	top:					60%;
	left:					13%;
}
.s6 {
	top:					67%;
	left:					95%;
}
.s7 {
	top:					3%;
	left:					81%;
}
.s8 {
	top:					29%;
	left:					87%;
}
.s9 {
	top:					39%;
	left:					64%;
}

.s10 {
	top:					14%;
	left:					47%;
}
/* End Card */


/* Customizador de plantão */

#customizadorPlantao {
    display:                grid;
    grid-template-columns:  auto auto;
    white-space:            nowrap;
    padding:				1.5em;
	color:                  white;
    font-weight:            bold;
    font-size:				0.85em;
    vertical-align:         middle;
	border-radius:			0.7em;
	background:		        linear-gradient(90deg, rgb(84, 144, 210), rgba(52,82,163));
	box-shadow:				0em 0em 0.2em 0.2em var(--color-shadow);
    align-items:            center;
    min-width:              40em;
}


#customizadorPlantao > section { 
    padding:                0.6em 0em;
    text-align:             left;
}

#customizadorPlantao label {
    vertical-align:         middle;
}

/* End Customizador de plantão*/

#blocoInput {
}

#blocoInput section {
	font-size:				0.7em;
	display:				inline-block;
	margin-bottom:			2em;
	width:					16em;
	height:					10em;
	margin:					2em;
}

/*-- Botao checkbox que mantém pressionado --*/
/* Style the label to look like a button */
.buttonLikeLabel {
	display: 				inline-block;
	padding: 				0.6em 1.5em;
	background-color: 		var(--color-dark-gray);
	color:					white;
	border:					0.1em solid rgb(180, 180, 180);
	border-radius:			0.2em;
	cursor: 				pointer;
	margin:					0.5em;
}

/* Hide the checkbox */
.buttonLikeLabelCheckbox {
	display: 				none;
}

/* When the checkbox is checked, change the background color of the label/button */
.buttonLikeLabelCheckbox:checked + label {
	background-color:		var(--button-hover-color);
}


/*-- Ajuste para Telas pequenas --*/
@media only screen and (max-width : 62em) {
	.column-count-3-auto {
		column-count: 				1;
	}
	.column-count-4-auto {
		column-count: 				1;
	}
	.column-count-5-auto {
		column-count: 				1;
	}
	.column-count-6-auto {
		column-count: 				1;
	}
	.column-count-7-auto {
		column-count:				1;
	}
}

/*-- Ajuste para Telas pequenas --*/
@media only screen and (max-width : 52em) {
	.page {
		margin-left:				0em;
		margin-right:				0em;
		margin-bottom:				2em;
	}

	.hide-small-screen {
		display:					none;
	}
	.show-small-screen {
		display:					inline-block;
	}

	.greenButton  {
		font-size:					0.8em;

	}

	.greenButton-small {
		padding:					0.1em 0.2em;
		font-size:					0.50em;
		border-radius:				0.2em;
	}

	.link {
		font-size:					0.6em;
	}

	.textLarge {
		font-size:					2em!important;
	}

	div.gallery {
		float:						none;
		margin:						4em auto 3em auto;
		width:						80%;
	}
	
	.textArea {
		width:						100%;
		min-height:					8em;
		font-size:					0.9em;
	}
            
    .box-insere-plantao {
		margin:					    0em;
		padding:				    1em 0em;
		font-size:				    0.7em;
    }
}


/*-- Ajuste para Telas pequenas --*/
@media only screen and (max-width : 50em) {

.autoScreenMargin {
    margin:                     1.2em auto !important;
    padding:                    0 0.7em !important;
}
    
.scroll {
	padding:					3em 0em 0.4em 0em;
}

	table#calendar {
		width:					auto;
		min-height:				100%;
	}

	table#calendar th {
		height:					2.8em;
		font-size:				0.55em;
	}

	table#calendar td {
		font-size:				0.5em;
	}

	table#calendar div {
		margin:					0em;
	}

	table#calendar svg {
		width:					18px;
		height:					8px;
	}

	table#calendar span {
		margin-left:			-0.3em;
		line-height:			1.05em;
	}

	table#calendar p {
		font-size:				0.55em;
	}

	.popUp label {
		font-size:				0.55em;
	}

	#popUp {
		margin:					2em 0.3em;
	}

	#popUp select {
		font-size:				0.8em;
	}

	.popUp input {
		font-size: 				0.55em;
	}

	.popUp-item {
		font-size:				0.55em;
	}


	.popUp-field {
		font-size:				0.65em;
	}

	.recibo_box {
		width:					100vw;
		height:					100vh;
		margin:					0em;
		border:					none;
		padding:				5em 0.4em;
		box-shadow:				none;
		transform: 				none;
	}

	.logOnNewUser {
		border:					0.2em solid var(--color-gray-special);
	}

	.auto-grid {
		display:				flex;
		flex-direction:			column;
	}

	.grid-edicao {
		display:				grid;
		grid-template-columns:	repeat(2, 45%);
	}
    
    .logOn {
		min-height:				100%;
		width:					100%;
		border:					none;
		padding:				4.5em 2em 2em 2em;
		background:				var(--font-color-table);
		box-shadow:				none;
	}

}


@media only screen and (max-width : 70em) {


	.box-title {
		font-size:				1em;
	}

	.box-content {
		font-size:				0.6em;
	}

	.centralPageLeftColumn {
		float:					left;
		margin-top:				6em;
		max-width:				100%;
		height:					auto;
	}

	.centralPageCentralColumn {
		float:					left;
		margin-top:				6em;
		max-width:				100%;
		height:					auto;
	}

	.centralPageRightColumn {
		float:					left;
		margin-top:				6em;
		max-width:				100%;
		height:					auto;
	}

	.card-list {
		/* On small screens, we are no longer using row direction but column */
		flex-direction:			column;
	}

	#tabela tr, th, td {
		font-size:				calc(var(--tabela-font-size) * 1.3em);
		vertical-align:			middle;
		padding:				0em;
		overflow:				visible;
	}

	#tabela thead {
		display:				none;
	}

	#tabela tr {
		display:				block;
	}

	#tabela td{
		font-size:				calc(var(--tabela-font-size) * 1.1em);
		display:				block;
		border:					0.03em black solid;
		text-align:				right;
	}

	#tabela td::before , #tabela th::before {
		font-size:				calc(var(--tabela-font-size) * 1.1em);
		position:				relative;
		content:				attr(data-label);
		float:					left;
		font-weight:			bold;
		text-transform:			uppercase;
		width:					48%;
		min-height:				calc(var(--tabela-font-size) * 3.5em); /*Por padrao a altura da linha e o tamanho da fonte multiplicado 1.2 */
		line-height:			calc(var(--tabela-font-size) * 3.55em);
		text-align:				left;
		margin:					-0.6em;
		vertical-align:			middle;
		padding-left:			0.3em;
		overflow:				auto; /* Add a scrollbar if content overflows */
		max-height:				1.2em; /* Adjust the maximum height as needed */
	}

	#tabela tr td:first-child {
		text-align:				center;
		background-color:		var(--table-th-color);
	}

	#tabela tbody tr td:first-child::before {
		background-color:		var(--table-th-color);
	}

	#tabela tbody tr:hover::before {
		background-color:		var(--button-hover-color);
	}

	#tabela select {
		width:					48%;
		font-size:				calc(var(--tabela-font-size)*1.2em);
		text-align:				center;
		background:				transparent;
		color:					white;
	}

	#tabela option {
		font-size:				calc(var(--tabela-font-size) * 4em);
		width:					48%;
	}

	#tabela .regular-input {
		width:					48%;
		height:					calc(var(--tabela-font-size) * 2.35em); /*Por padrao a altura da linha e o tamanho da fonte multiplicado 1.2 */
		margin:					0em;
		padding:				0em;
		text-align:				center;
		border:					none;
		font-size:				calc(var(--tabela-font-size)*1em);
	}

	.grid-edicao {
		grid-template-columns:			repeat(3, 33.3%);
	}

	.full-space-link-container {
		grid-template-columns: 1fr;
		#card {
			font-size:			0.8em;
		    padding:			0.8em 1.6em;
			margin:				1.5em 0.3em;
		}
	}
}


/*==================================================
 * Filter Effect
 * ===============================================*/
.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}