div.menubar {
   display: flex;
   align-items: center;
   width: 100%;
   top: 0;
   left: 0;
   height: 2em;
   background: #e0e0e0;
   border-bottom: 1px solid black;
   margin-bottom: 2px;
}

div.menubar-item {
   display: inline-block;
   height: 100%;
   align-content: center;
   padding-left: 0.5em;
   padding-right: 0.5em;
   cursor: default;
}

div.menu, div.submenu {
   display: flex;
   flex-direction: column;
   background: #e0e0e0;
   border: 1px solid black;
   z-index: 9999;
   margin-top: 0.4em;
   margin-left: -0.5em;
   position: absolute;
}

div.submenu {
   position: absolute;
   left: calc(100% + 1em);
   top: 1em;
}

div.menu-item {
   min-width: 150px;
   height: 2em;
   padding-left: 0.5em;
   align-content: center;
   align-items: center;
   display: flex;
   cursor: default;
}

div.menu-item span.menu-icon {
   width: 2em;
   height: 2em;
   padding: 0;
   margin: 0;
   display: flex;
   padding-left: 3px;
}

div.menu-item span.menu-name {
   padding-left: 0.25em;
   display: inline-block;
   padding-right: 0.5em;
}

div.menu-item span.menu-submenu {
   float: right;
}

span.menu-icon img {
   width: 85%;
   height: 85%;
   align-self: center;
}

div.menu-item.separator {
   border-top: 1px solid black;
}

div.menubar-item:hover, div.menu-item:hover {
   background: #c0c0c0;;
}

.popup-menu, .popup-submenu {
	display: flex;
	flex-direction: column;
	margin: 5px;
	padding: 5px;
	position: absolute;
	z-index: 9999;
	border: 1px solid black;
	background: #e0e0e0;
	color: black;
}

.popup-submenu {
	display: none;
}

.menubar .menu-item span.menu-icon, .popup-menu .menu-item span.menu-icon {
	min-width: unset;
	width: unset;
}

.menubar .menu-item {
	min-width: unset;
	width: unset;
	color: black;
}

.menu-item span.menu-name {
	text-wrap: nowrap;
}