#main-header {

	--color-background-logos-container: #fff;
	--color-background-menu: #dddddd;
	--color-background-menu-hover: #bbbbbb;
	--color-main-menu-items: #000000;

	--font-size-menu-option-large: 18px;
	--font-size-menu-option-small: 12px;

	display: flex;
	flex-direction: column;

	position: fixed;
	top: 0px;
	width: var(--width-window);
}

#main-header figure {
	display: flex;
	flex-direction: column;

	background-color: var(--color-azul-prefeitura);
}
#main-header figure svg {
	margin: auto;
	padding-top: var(--3u);
	padding-bottom: var(--3u);
}
#svg-main-logo-paulo-gustavo {
	--prop-xy: 1.1734;
	--prop-yx: 0.8522;

	/* --height: 128px; */
	/* --height-mobile: 128px; */
	/* --height-tablet: 128px; */
	/* --height-desktop: 128px; */

	height: var(--h);
	width: calc( var(--h) * var(--prop-xy) );

	/* transition: height 1s ease; */

	--h: var(--height-main-logo-paulo-gustavo);
}
/* .mobile #svg-main-logo-paulo-gustavo { --h: var(--height-mobile) } */
/* .tablet #svg-main-logo-paulo-gustavo { --h: var(--height-tablet) } */
/* .desktop #svg-main-logo-paulo-gustavo { --h: var(--height-desktop) } */

.svg-path-paulo-gustavo-logo {
	fill: #fff;
}

#notification-icon-translation {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	background-color: red;
}

#notification-icon {
	position: absolute;


	/* padding: var(--2u); */
}
/* #notification-icon::after {
	content: "";

	background-color: white;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
} */

#notification-icon-container {
	position: absolute;

	--w: 48px;
	--h: 48px;

	--border-size: var(--1u);

	width: 0px;
	height: 0px;
}

#notification-icon-container .wrapper {
	width: 100%;
	height: 100%;

	width: var(--w);
	height: var(--h);
	/* background-size: cover; */
	/* transform: translate3d(calc(var(--w) + (var(--border-size)/2) * -1), calc((var(--h) + var(--border-size))/2 * -1), 0); */

	/* transform: translateX(calc(var(--w) + (var(--border-size)/2) * -1)); */
	transform: translateX(calc(var(--w) * -1));

	background-color: var(--color-icon-notification-button);
	border-radius: 50%;
}

.mobile #notification-icon-container { left: calc(var(--width-content-mobile)/2); }
.tablet #notification-icon-container { left: calc(var(--width-content-tablet)/2); }
.desktop #notification-icon-container { left: calc(var(--width-content-desktop)/2); }

#notification-icon-container .wrapper div {
	width: var(--w);
	height: var(--h);
	background-size: cover;
}

#notification-icon-container.no-notification .wrapper div {
	background-image: url('/app/icons/notification-icon-no-notification.png');
}
#notification-icon-container.has-notification .wrapper div {
	background-image: url('/app/icons/notification-icon-has-notification.png');
}