#main-header {
	--main-menu-transition-duration: .6s;
}

/* MAIN MENU BAR */
#main-menu-title {
	position: relative;
	font-family: var(--font-family-primary-bold);
	font-size: 12px;
	text-align: center;

	color: var(--color-main-menu-items);

	height: var(--8u);
	width: 100%;
	background-color: var(--color-background-menu);
}
#main-menu-title:hover {
	cursor: pointer;
	/* background-color: var(--color-background-menu-hover); */
}

#main-menu-title space-element {
	height: var(--3u);
	/* background-color: red; */
}

.main-menu-title-p-container {
	justify-content: center;
}

.main-menu-title-p-container p::before,
.main-menu-title-p-container p::after {
	content: "";
	display: inline-block;
	background-image: url('/app/icons/main-menu-4-dots.png');
	width: 8px;
	height: 8px;
	background-size: contain;
	margin-left: var(--2u);
	margin-right: var(--2u);
}

#main-menu-title p {
	
	margin-top: -3px;
	margin-bottom:-3px;
}

/* MAIN MENU OPTIONS CONTAINER */
#main-menu-options-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	transition: all var(--main-menu-transition-duration) ease-in-out;

	background-color: var(--color-background-menu);

	box-shadow: 0px 0px 80px 0px black;
	z-index: -1;
}
#main-menu-options-container[data-is-collapsed="false"] {
	/* height: var(--height-main-menu-options-container); */
	/* height: 280px; */
	height: 300px;
}
#main-menu-options-container[data-is-collapsed="true"] {
	height: 0px;
}


#main-menu-options-container .wrapper {
	margin: auto;
	width: fit-content;
}

#main-menu-options-container > div {
	display: flex;
	flex-direction: column;
}
#main-menu-options-container .option-large {
	margin: auto;
}

/* BUTTONS ON MENU */
/* reset */
#main-menu-options-container button {
	padding: 0px;
	border: none;
	background-color: transparent;

	font-family: var(--font-family-primary);
	color: var(--color-main-menu-items);
}
#main-menu-options-container button:hover {
	font-family: var(--font-family-primary);
	cursor: pointer;
}

#main-menu-options-container .option-large {
	font-size: var(--font-size-menu-option-large);
}

#main-menu-options-container .wrapper span {
	padding: var(--1u);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-menu-option-small);
	color: var(--color-main-menu-items);
}

#main-menu-options-container #options-group-1 button:hover { color: var(--color-verde-paulo-gustavo); }
#main-menu-options-container #options-group-2 button:hover { color: var(--color-azul-paulo-gustavo); }
#main-menu-options-container #options-group-3 button:hover { color: var(--color-amarelo-paulo-gustavo); }
#main-menu-options-container #options-group-4 button:hover { color: var(--color-vermelho-paulo-gustavo); }
#main-menu-options-container #options-group-5 button:hover { color: var(--color-azul-prefeitura); }

#main-menu-options-container .options-group-container {
	padding-top: var(--2u);
	padding-bottom: var(--2u);
}

#main-menu-chevron {
	margin-top: auto;
}
#main-menu-chevron:hover {
	cursor: pointer;
}
#main-menu-chevron img {
	margin-left: auto;
	margin-right: auto;
	
}
#main-menu-chevron space-element {
	height: var(--3u);
}