#menus {
	xborder:1px solid lime;
	width:100%;
	height:100%;
	user-select:none;
	overflow-y:scroll;
	scrollbar-color: rgb(62, 62, 62) grey;
	scrollbar-width: thin;
	xdisplay:grid;
    xgrid-template-columns: 50% 50%;
    xgrid-template-rows: 50% 50%;
	background-color:rgb(49, 49, 49);
	background-color:rgba(0, 0, 0, 0.5);
	border-top: 2px solid rgb(68, 68, 68);
	xdisplay:flex;
	xflex-direction: row;
	xflex-wrap: wrap;
	xjustify-content: start;
	xalign-items: center;
	xfloat:left;

}

#menus > .menu {
	border: 2px solid rgb(68, 68, 68);
	border-radius:5px;
	box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.8);
	margin:10px;
	background-color:#171717;
	display:inline-flex;
	flex-direction:column;
	justify-content: start;
	width:45%;
	height:40%;
	xheight:auto;
	transition:height 0.1s;
	overflow:hidden;
}

.menu.minimized > span {
    display:none;
}

.menu > .top {
	xborder: 1px solid lime;
	display:flex;
	align-items: center;
	justify-content: space-between;
	xpadding:5px 5px 5px 10px;
	color:grey;
	height:35px;
}

.menu > .top > .buttons {
	xborder: 1px solid lime;
	display:flex;
	justify-content: space-around;
	align-items: center;
	height:100%;
	width:30%;
}

.menu > .top > .buttons > .icon-button {
	xborder: 1px solid lime;


	xmargin:0px 0px 0px 5px;
	border-radius:5px;
	xheight:130%;
	xaspect-ratio: 1/1;
	flex:1;
}

.menu > .top > .buttons > .icon-button:hover {
	color: grey;
}

.menu > .top > .buttons > .hide-button.on {
	color:rgb(176, 46, 46);
	xbackground-color:rgba(0, 0, 0, 0.5);
} 

.menu > .top > .buttons > .icon-button.on:hover {
	background-color:rgba(0, 0, 0, 0.9);
}

.menu > .top > .buttons > .icon-button > i {
	xborder: 1px solid lime;
	margin:0px;
	display:flex;
	align-items: center;
	justify-content: center;
	width:100%;
	height:100%;
	aspect-ratio: 1/1;

}

.menu > .top > .buttons > .icon-button:hover {
	background-color:rgba(0, 0, 0, 0.5);
	cursor:pointer;
} 

.menu > .top> .buttons > .icon-button:active {
	background-color:rgba(0, 0, 0, 0.9);
} 

.menu > .top > .subtitle {
	xborder: 1px solid grey;
	xfont-size:1.2em;
	display:flex;
	align-items: center;
	justify-content: start;
    xfont-family: Roboto Mono;
	xalign-self: start;
	xflex:1;
	height:100%;
	width:40%;
	padding:5px;

}

.menu > .top > .layer-order {
	xborder: 1px solid grey;
	color:rgb(73, 73, 73);
	xmargin-right:5px;
	width:30%;
	xtext-align: center;
	height: 100%;
	display:flex;
	align-items: center;
	justify-content: center;
}

.menu > .items {
	xborder: 2px solid rgb(68, 68, 68);
	border-top: 2px solid rgb(68, 68, 68);
	overflow-y: auto;
	xoverflow-x:auto;
	flex:1;
	scrollbar-color: rgb(62, 62, 62) grey;
	scrollbar-width: thin;
	background-color:rgba(0, 0, 0, 0.5);
	box-shadow:inset 5px 5px 5px 0px rgba(0, 0, 0, 0.8);
	padding:3px 0px 3px 0px;
}



.menu > .items > .item {
	padding:0px 10px 0px 10px;
	cursor:pointer;
	xtransition:all 0.05s;
	xborder: 5px outset grey;

	xoverflow: visible;
	white-space: nowrap;
	text-overflow: ellipsis;
	border:3px solid rgba(0, 0, 0, 0.0);
	
	margin: 0px 3px;
}

/* Prevent click events to Font Awesome icon, or other inner elements */
.menu > .items > .item > i, .menu > .items > .item > div {
	pointer-events: none;
}



/* Special styles for color items */
.menu.color > .items > .item {
	padding:0px;
	display:flex;
	max-height: 40px;
}


.menu.color > .items > .item:hover {
	xborder-color: grey;
}

.menu.color > .items > .item > .block {
	height:30px;
	width:30%;
	display:flex;
	align-items: center;
	justify-content: center;
	color:rgba(255, 255, 255, 0.5);
}


.menu.color > .items > .item > .name {
	xborder:1px solid red;
	xcolor:lime;
	xpadding:5px;
	xfont-family: Roboto Mono;
	width:100%;
	xheight:100%;
	padding:5px;
}

.menu > .items > .item.selected {
	background-color:rgb(32, 41, 69);
	xbackground-color:rgb(7, 48, 16);
	xcolor:rgb(141, 215, 141);
	xcolor:white;
	border-color: rgb(23, 176, 69);
	xborder-color:white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);

	xbox-shadow: inset 0px 0px 5px 0px lime;
	xbackground: repeating-linear-gradient(
		45deg,
		rgb(50, 50, 50),
		rgb(50, 50, 50) 10px,
		rgb(31, 33, 39) 10px,
		rgb(31, 33, 39) 20px
	  );
}


.menu > .items > .item:hover {
	xborder:1px solid red;
	background-color:rgba(255,255,255,0.1);
	text-overflow: '';
}

.menu > .items > .item:hover i  {
	xborder:1px solid red;
}

.menu > .items > .item:active {
	xborder:1px solid red;
	color:rgb(43, 198, 69);
}



.force-hide {
	visibility:hidden!important;
}