/* ---- Main menu specific styling ---- */
#menu_div {
	width: 100%;
	min-width: 100%;
	background: var(--backgroundcolor-menu);
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	box-sizing: border-box;
	padding: 0 3px;
}
#menu_div .menuicon { font-size: 26px; }
#menu_div .mainicon {
	text-align: center;
}

/* Class to be able to hide (temporarily) all submenus */
#menu_div.hide_all_dropdown .dropdownmenu { display: none !important; }

#menu_div > .menu {
	height: 50px;
	display: flex;
	flex-flow: row;
	align-items: center;
	margin: 0;
	padding: 0;
	gap: 10px;
}

/* Count of mail pending */
#menu_div li.menuitem .count:empty { display: none; }
#menu_div li.menuitem .count {
	background: red;
	color: white;
	position: absolute;
	right: 0px;
	top: -5px;
	font-size: 0.8em;
	padding: 1px 5px;
	border-radius: 50%;
}
#menu_div li.menuitem {
	list-style: none outside none;
	color: var(--color-button-text);
	cursor: pointer;
	position: relative;
	text-align: center;
}
#menu_div li.menuitem:hover > :not(.dropdownmenu) {
	opacity: 0.5;
}

#menu_div li.menuitem button > .icon_div { width: 1em; }
#menu_div li.menuitem>button > .icon_div { width: 1.5em; font-size: 1.5em; }

#menu_div .menuopen { position: relative; }
#menu_div .menuopen > .dropdownmenu { visibility: hidden; transition: linear visibility 0s 0.2s }
#menu_div .menuopen:hover > .dropdownmenu { visibility: visible; }

#menu_div .dropdownmenu {
	background: var(--backgroundcolor-menu);
	line-height: 22px;
	padding: 10px;
	position: absolute;
	text-align: left;
	top: 100%;
	z-index: 9999;
	border: 1px solid white;
	box-shadow: gray 3px 3px 14px;
	border-radius: 5px;
}

#menu_div .dropdownmenu.right { right: -1px; }
#menu_div .dropdownmenu.right .line_hiding_div { right: -1px; }
#menu_div .dropdownmenu.left { left: -1px; }
#menu_div .dropdownmenu.left .line_hiding_div { left: -1px; }
#menu_div .dropdownmenu .menuitem { display: flex; padding: 4px 8px; opacity: 0.5; width: 100%; box-sizing: border-box; text-align: left; align-items: center; }
#menu_div .dropdownmenu .menuitem>div:not(.icon_div) { flex-grow: 10; flex-shrink: 10; min-width: 0; overflow: hidden; }
#menu_div .dropdownmenu .menuitem:hover { opacity: 1; }
#menu_div .dropdownmenu .naam_gebruiker { background: inherit; cursor: default; font-weight: bold; }
#menu_div .dropdownmenu .email_gebruiker:hover { background: inherit; cursor: default; color: gray; }

.blackout { top: 0; height: 100%; }

@media (min-width: 1001px) {
	#menu_div .dashboardicon { display: none; }
}
@media (max-width: 1000px) {
	#leftmenu { display: none; }
	#menu_div .mainicon:first-child { display: none; }
	#menu_div .mainicon:not(:first-child)>* { margin-right: 0 }
	#menu_div .dashboardicon { display: inline-block; width: 30px; text-align: center; }
	#menu_div [ref="dashboard"] { display: none; }
	.topsearch { display: none; }
}
#leftmenu { width: 200px; background: var(--backgroundcolor-light); color: var(--color-text); flex-basis: auto; padding-top: 15px; }
#leftmenu.smallmenu { width: 50px; }
#leftmenu.smallmenu>ul>.menuitem>a span { display: none; }
#leftmenu .menuitem { position: relative; }
#leftmenu .menuitem>a {
	display: flex;
	flex-flow: row;
	cursor: pointer;
	font-family: 'Roboto Condensed';
	font-size: 1.2em;
	height: 1.8em;
	line-height: 1.8em;
	border-left: 2px solid transparent;
}
#leftmenu .menuitem>a.selected,
#leftmenu .menuitem:hover>a {
	opacity: 0.4;
}
#leftmenu .menuitem .icon {
	text-align: center;
	width: 32px;
	margin: 0 4px;
	font-size: 1.3em;
	border-radius: 3px;
}
#leftmenu .menuitem.menu_selected>a {
	border-color: var(--color-primary);
}
#leftmenu .menuitem>a span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 5px;
}

#leftmenu .menuitem > ul {
	visibility: hidden;
	top: -5px;
	left: 45px;
	background: #f0f0f0;
	position: absolute;
	z-index: 11;
	border: 1px solid var(--color-text);
	border-radius: 4px;
	padding: 5px;
	min-width: 200px;
	transition: linear visibility 0s 0.5s;
}

#leftmenu .menuitem:hover>ul {
	visibility: visible;
}

/* ---- ScreenView ----- */
.app_div:not(.minimize)>*:not(:last-child) { display: none; }
.app_div .screen-item { min-width: 0; flex-basis: 100%; flex-grow: 10; flex-shrink: 10; align-self: stretch; display: flex; background: var(--backgroundcolor-hover); }
.app_div:not(.minimize) .screen-item > .screen-remove { display: none; }
.app_div .screen-item > .screen-remove { position: absolute; right: -5px; top: -5px; z-index: 1; background: var(--backgroundcolor); border-radius: 50%; }
.app_div .screen-item > .screen { min-width: 0; flex-basis: 100%; flex-grow: 10; flex-shrink: 10; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--backgroundcolor-hover); }
.app_div .screen-item > .screen > * { flex-basis: 100%; flex-grow: 10; flex-shrink: 10; display: flex; height: 100%; width: 100%; box-sizing: border-box; flex-direction: column; gap: 6px; }
.app_div .screen-item > .screen > * > .module-title { flex-basis: auto; flex-grow: 0; flex-shrink: 0; display: flex; box-sizing: border-box; flex-direction: row; padding: 10px 20px; border: 1px solid lightgray; border-radius: 5px; font-size: var(--font-size-header); background-color: var(--backgroundcolor); align-items: center; gap: 10px; }
.app_div .screen-item > .screen .panel-title { flex-basis: auto; flex-grow: 0; flex-shrink: 0; display: flex; box-sizing: border-box; flex-direction: row; padding: 10px 20px; font-size: var(--font-size-header); background-color: var(--backgroundcolor); align-items: center; gap: 10px; }
.app_div .screen-item > .screen .panel-content { flex-basis: 100%; flex-grow: 0; flex-shrink: 10; display: flex; box-sizing: border-box; flex-direction: column; padding: 10px 20px; align-items: stretch; overflow: auto; }
.app_div .screen-item > .screen > .configuration > .module-title { background-color: var(--color-primary-superlight); }
.app_div .screen-item > .screen > * > .panellayout,
.app_div .screen-item > .screen > * > .screenlayout { flex-basis: 100%; flex-grow: 0; flex-shrink: 10; min-height: 0; }

.app_div.minimize { flex-wrap: wrap; justify-content: center; overflow-y: auto; align-content: center; background: lightgray; }
.app_div.minimize .screen-item { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; width: 25%; height: 25%; border: 2px solid darkgray; position: relative; background: var(--backgroundcolor); }
.app_div.minimize .screen { min-width: 400%; min-height: 400%; transform: scale(0.25); transform-origin: 0 0; pointer-events: none; }

.menu_minimize {
	position: relative;
}
.menu_minimize:not(:hover) .minimize_container {
	visibility: hidden;
}
.minimize_container {
	align-items: flex-end;
	bottom: 0;
	display: flex;
	left: 100%;
	padding: 2px;
	position: absolute;
	z-index: 9000;
	background: white;
	transition: linear visibility 0s 0.5s;
	gap: 10px;
}
.minimize_container>* {
	border: 1px solid black;
	padding: 5px;
	border-radius: 6px;
}
.tray-item { width: 48px; height: 48px; position: relative; }
.tray-item .tray-remove { position: absolute; right: -5px; top: -5px; background: var(--backgroundcolor); border-radius: 50%; }
.tray-item .tray-icon { font-size: 48px; line-height: 1; }