#menu {
	display: grid;
	height: 100%;
	overflow-y: auto;
    grid-auto-rows: max-content;
}


@media (max-width: 1023px) {
	#menu .main-main {
        padding: 0.4rem;
    }
}
@media (min-width: 1024px) {
    #menu .main-main {
        padding: 1rem 1rem 0.3rem 1rem;
    }
}

#menu .menu.last-edited::before, #menu .item.last-edited::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 1;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--green-3);
}

#menu .menu-grid {
	display: grid;
	row-gap: 2rem;
	color: var(--windows-font);
}

#menu .menu-grid > div {
	box-shadow: 0 0 3px 0 #00000096;
	border-radius: 0.3rem;
}

#menu .menu {
	display: grid;
	grid-template-areas: 
		"title sort"
		"buttons buttons";
	grid-template-columns: 1fr auto;
	column-gap: 0.5rem;
	row-gap: 0.5rem;
	background-color: var(--windows);
	border-radius: 0.3rem;
	position: relative;
	padding: 0.7rem;
}
#menu .menu.open {
	grid-template-areas: 
		"title sort"
		"buttons buttons"
		"menu-prop menu-prop";
}
#menu .menu.open .prop {
	color: var(--menu-menu-open-prop);
}
#menu .menu.changed {
	outline: 1px dashed var(--save-menu);
    outline-offset: 0px;
}
#menu .menu .save > span {
	display: none;
}
#menu .menu.changed .save > span {
	display: block;
	color: var(--save-menu);
}


#menu .menu .menu-prop {
	display: none;
}
#menu .menu.open .menu-prop {
	display: grid;
	grid-area: menu-prop;
}
@media (max-width: 1023px) {
	#menu .menu.open .menu-prop {
    	grid-template-areas:
			"area-title"
			"select"
			"classes-title"
			"classes";
	}
	#menu .menu .menu-prop > div:not(:first-child) {
		padding-top: 0.75rem;
	}
	#menu .menu .menu-prop > .area-select-grid:not(:first-child) {
		padding-top: 0;
	}
}
@media (min-width: 1024px) {
	#menu .menu.open .menu-prop {
		grid-template-areas: 
			"area-title select classes-title classes";
		grid-template-columns: 6em minmax(240px, 100%) 6em minmax(240px, 100%);
		row-gap: 0.75rem;
    	column-gap: 0.7rem;
		padding: 0.5rem 0 0.3rem 0;
	}
}

#menu .menu input[name=title] {
	grid-area: title;
    line-height: 27px;
	background-color: var(--menu-input-bg);
	border: 2px solid var(--menu-input-border);
}
#menu .menu input[name=sort] {
	grid-area: sort;
	width: 4rem;
	text-align: center;
	font-size: 0.9rem;
	background-color: var(--menu-input-bg);
	border: 2px solid var(--menu-input-border);
}
#menu .menu .area.title {
	grid-area: area-title;
	font-size: 1rem;
    line-height: 27px;
}

#menu .menu .classes.title {
	grid-area: classes-title;
	font-size: 1rem;
    line-height: 27px;
}
#menu .menu input[name=classes] {
	grid-area: classes;
	font-size: 0.9rem;
	background-color: var(--menu-input-bg);
	border: 2px solid var(--menu-input-border);
}


@media (min-width: 1024px) {
	#menu .menu .area.title, #menu .menu .classes.title {
		justify-self: right;
	}
}
#menu input[type="text"] {
	padding: 0 0.54rem;
    border-radius: 4px;
    min-height: 30px;
	font-size: 0.94rem;
    height: 100%;
    background-color: var(--bg-4);
    border: 1px solid var(--bg-4);
    color: var(--text);
	width: 100%;
	max-width: 100%;
}

#menu .menu-buttons {
    grid-area: buttons;
	display: grid;
    column-gap: 0.7rem;
    font-size: 0.9rem;
}
#menu .menu-buttons > div {
	display: flex; /* Chrome Mobile Browser - Fonts Size */
}
#menu .menu .menu-buttons {
    grid-template-columns: auto auto 1fr auto;
}
#menu .menu-buttons div {
    cursor: pointer;
    user-select: none;
    color: var(--buttons-font);
	width: max-content;
}
#menu .menu-buttons div:active {
	color: var(--buttons-hover);
}
@media (min-width: 1024px) {
	#menu .menu-buttons div:hover {
		color: var(--buttons-hover);
	}
}


/*Items*/
#menu .items-grid {
    display: grid;
    row-gap: 0.3rem;
    padding: 0.8rem 0 0.5rem 0.5rem;
    margin-top: -5px;
    background-color: var(--windows);
    border-radius: 0 0 0 0.3rem;
}
@media (min-width: 768px) {
	#menu .items-grid .items-grid {
		padding-left: 1rem;
	}
}
#menu .menu-grid > div > .items-grid {
    border-radius: 0 0 0.3rem 0.3rem;
}

#menu .items-grid .items-grid {
    box-shadow: inset 0 0 0 1px var(--windows-hover);
}

#menu .item {
	display: grid;
	grid-template-areas: 
		"title"
		"buttons";
	row-gap: 0.5rem;
	background-color: var(--bg-3);
    background-image: var(--noise);
	border-radius: 0.3rem 0 0  0.3rem;
	position: relative;
	padding: 0.7rem;
}


/*Lines*/
#menu .item.clicked + .items-grid {
	box-shadow: inset 1px -1px 0 0 var(--green-3);
}
#menu .items-grid:has(> * > .last-edited) {
	box-shadow: inset 1px -1px 0 0 var(--green-3);
}
#menu div:has(> .item > .menu-buttons .append:hover) > .items-grid {
    box-shadow: inset 1px -1px 0 0 var(--green-3);
}


#menu > .main-main .menu-grid > div > .items-grid.highlite-parent > div > .item.highlite-children::after {
	margin-left: -7px;
	width: 7px;
}

#menu .items-grid.highlite-parent {
	box-shadow: inset 1px 0px 0 0 var(--sub-line);
}

#menu .item.highlite-children::after {
	content: "";
	position: absolute;
	margin-left: -15px;
	top: calc(50% - 1px);
	border-top: 1px solid var(--sub-line);
	width: 15px;
}
@media (max-width: 767px) {
	#menu .item.highlite-children::after {
		margin-left: -7px;
		width: 7px;
	}
}
#menu .item.highlite-children + .items-grid {
	box-shadow: inset 1px -1px 0 0 var(--green-3);
}
/*Lines End*/


@media (min-width: 1024px) {
	#menu .item:hover {
		background-color: var(--open-menu);
	}
}
#menu .item.open {
	grid-template-areas: 
		"title"
		"buttons"
		"menu-prop";
	background-color: var(--open-menu);
}

#menu .item .menu-buttons {
    grid-template-columns: auto auto 1fr auto;
}
#menu .item.open .menu-buttons {
    grid-template-columns: auto auto 1fr auto;
}

#menu .item.changed {
    outline: 1px dashed var(--save-menu);
    outline-offset: 0px;
}
#menu .item .save > span {
    display: none;
}
#menu .item.changed .save > span {
    display: block;
	color: var(--save-menu);
}


#menu .item .menu-prop > .title {
	font-size: 1rem;
	line-height: 27px;
	color: var(--names);
}


#menu .menu-grid > div.will-be-deleted {
	outline: 1px dashed red;
    outline-offset: 0px;
}
#menu .menu-grid > div.will-be-deleted .del {
	outline: 1px dashed red;
    outline-offset: 2px;
    border-radius: 1px;
}

#menu .will-be-deleted .item {
    outline: 1px dashed red;
    outline-offset: -1px;
}
#menu .will-be-deleted .item .del {
	outline: 1px dashed red;
    outline-offset: 2px;
    border-radius: 1px;
}

@media (min-width: 1024px) {
	#menu .item .menu-buttons div {
        opacity: 0;
    }
    #menu .item:hover div {
        opacity: 1;
    }
    #menu .item.open div {
        opacity: 1;
    }
	#menu .item .menu-prop > .title {
		text-align: right;
	}
}



#menu .item .menu-prop {
	display: none;
}
#menu .item.open .menu-prop {
	display: grid;
	grid-area: menu-prop;
}
#menu .item.open .prop {
	color: var(--menu-item-open-prop);
}

#menu .item a {
    grid-area: title;
    display: flex;
    width: fit-content;
    margin-top: -5px;
    font-size: 1rem;
    text-decoration: none;
    min-height: 21px; /* for empty title */
}
#menu .item a[href] {
    color: var(--menu-item-a);
}
#menu .item a[href]:hover {
    color: var(--menu-item-a-hover);
}
#menu .item a:not([href]) {
	width: fit-content;
    margin-top: -5px;
    font-size: 1rem;
	min-height: 21px;
	color: var(--menu-item-a-none-link);
}

@media (max-width: 1023px) {
	#menu .item .menu-prop {
		grid-template-areas: 
			"page-title"
			"select-grid"
			"parent-title"
			"pid"
			"title-name"
			"title"
			"tag-title"
			"tag_title"
			"url-title"
			"target-blank"
			"classes-title"
			"classes"
			"sort-title"
			"sort";
	}
}
@media (min-width: 1024px) {
	#menu .item .menu-prop {
		grid-template-areas: 
			"page-title select-grid  parent-title  pid"
			"title-name title        tag-title     tag_title"
			"url-title  target-blank classes-title classes"
			".          .            sort-title    sort";
		grid-template-columns: 6em minmax(240px, 100%) 6em minmax(240px, 100%);
		row-gap: 0.75rem;
    	column-gap: 0.7rem;
		padding: 0.5rem 0 0.3rem 0;
	}
}

#menu .item .page.title {
	grid-area: page-title;
}
#menu .item .select-grid {
	grid-area: select-grid;
}


#menu .item .parent.title {
	grid-area: parent-title;
}

#menu .item input[name=pid] {
	grid-area: pid;
}

#menu .item .title.name {
	grid-area: title-name;
}
#menu .item input[name=title] {
	grid-area: title;
}


#menu .item .tag.title {
	grid-area: tag-title;
}
#menu .item input[name=tag_title] {
	grid-area: tag_title;
}



#menu .item .classes.title {
	grid-area: classes-title;
}
#menu .item input[name=classes] {
	grid-area: classes;
}


#menu .item .url.title {
	grid-area: url-title;
}
#menu .item .target-blank {
	grid-area: target-blank;
	display: grid;
	grid-template-columns: 1fr 30px;
	column-gap: 0.5rem;
	position: relative;
}
#menu .item input[name=url] {
	width: 100%;
	grid-column: 1/-1;
	grid-row: 1/2;
}
#menu .item input[name=url][disabled] {
	color: var(--menu-input-select-font-disabled);
}

#menu .item .sort.title {
	grid-area: sort-title;
}
#menu .item input[name=sort] {
	grid-area: sort;
	width: 5rem;
    text-align: center;
}

@media (max-width: 1023px) {
	#menu .item .parent-title, #menu .item .title, #menu .item .tag-title, #menu .item .url-title, #menu .item .classes-title, #menu .item .sort-title {
		padding-top: 0.75rem;
	}
}

#menu .target-blank input[type="checkbox"] {
	grid-row: 1/2;
	grid-column: 2/3;
	align-self: center;
	justify-self: center;
	border: 2px solid var(--orange);
}


#menu .select-grid .field-options {
	position: relative;
}
#menu .select-grid .select-dropdown {
	display: grid;
	position: absolute;
	left: 0;
	right: 0;
	top: 2px;
	background-color: var(--bg-3);
	border: 2px solid var(--bg-4);
	color: var(--menu-item-select-dropdown-font);
	border-radius: 0.25rem;
	z-index: 7;
	overflow: hidden;
	box-shadow: 0 2px 3px 0 #00000033;
}
#menu .select-grid .field-search {
	display: grid;
	padding: 0.37rem;
	border-bottom: 2px solid var(--bg-4);
}
#menu .select-grid .field-search input {
	width: 100%;
	background-color: var(--menu-item-field-search-input-bg);
	color: var(--text);
	border: 2px solid var(--bg-4);
	font-size: 0.94rem;
	background-repeat: no-repeat;
	background-position: right .37rem center;
	padding: 0.25rem 2rem 0.25rem 0.25rem;
	background-size: 17px 14px;
}
#menu .select-grid .field-search input {
	background-image: var(--search-icon);
}
#menu .select-grid .field-search input:focus {
	border: 2px solid var(--menu-item-field-search-input-focus);
	transition: all .700s ease 0s;
}
#menu .select-grid ul.list-search, #menu .item .field-search {
    background-color: var(--bg-3);
}
#menu .select-grid ul.list-search {
	display: grid;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	max-height: 17rem;
	overscroll-behavior: contain;
}
#menu .select-grid .list-search li {
	display: block;
	list-style-type: none;
	padding: 0.4rem 0.44rem;
	cursor: pointer;
	font-size: 0.94rem;
	text-align: left;
}
#menu .select-grid .list-search li:hover {
	background-color: var(--menu-item-list-search-li-hover-active);
}
#menu .select-grid .list-search li.active {
	background-color: var(--menu-item-list-search-li-hover-active);
}
#menu .select-grid .list-search li.searcher-hidden { display: none; }
#menu .select-grid .field-options { overflow: hidden; }
#menu .select-grid .field-options.open { overflow: initial; }

#menu .main-footer {
    padding: 1rem;
}

@media (max-width: 1023px) {
	#menu .main-footer {
		padding: 0.7rem 0.4rem 1rem 0.4rem;
	}
}
@media (min-width: 1024px) {
	#menu .main-footer {
		padding: 1rem;
	}
}

#menu .main-footer .create {
    display: block;
    width: max-content;
    padding: 0.4rem 0.7rem 0.5rem 0.7rem;
    background-color: var(--bg-4);
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--windows-font);
    border-radius: 0.3rem;
    cursor: pointer;
	user-select: none;
}


/* Select */
#menu .menu-prop .area-select-grid, #menu .item .menu-prop .parent-select-grid {
    position: relative;
}

#menu .menu-prop .field-select-menu {
	display: grid;
	grid-template-columns: 1fr 26px;
	height: 100%;
	cursor: pointer;
	background-color: var(--menu-input-bg);
	border: 2px solid var(--menu-input-border);
	border-radius: 4px;
    user-select: none;
	line-height: 26px;
	font-size: 1rem;
}
#menu .menu-prop .field-select-menu > .value {
	padding: 0 0 0 0.44rem;
    white-space: nowrap;
    overflow: hidden;
	line-height: 26px;
    font-size: 0.94rem;
	color: var(--text);
}
#menu .menu-prop .field-select-menu > .icon {
    background-image: var(--select-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

#menu .menu-prop .field-select {
	display: grid;
	grid-template-columns: 1fr 26px;
	height: 100%;
	min-height: 30px;
	cursor: pointer;
	background-color: var(--bg-4);
	border: 1px solid var(--bg-4);
	border-radius: 4px;
    user-select: none;
}
#menu .menu-prop .field-select > .value {
	padding: 0 0 0 0.44rem;
    white-space: nowrap;
    overflow: hidden;
	line-height: 26px;
    font-size: 0.94rem;
	color: var(--text);
}
#menu .menu-prop .field-select > .icon {
    background-image: var(--select-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

#menu .menu-prop .area-select-grid .field-options, #menu .menu-prop .parent-select-grid .field-options {
    display: grid;
    position: absolute;
    height: 0;
    overflow: hidden;
    width: 100%;
    border-radius: 0.25rem;
    box-shadow: 0 2px 3px 0 #00000033;
    max-height: 17rem;
    z-index: 7;
}
#menu .menu-prop .area-select-grid .field-options.open, #menu .menu-prop .parent-select-grid .field-options.open {
    background-color: var(--bg-3);
    border: 2px solid var(--bg-4);
    color: var(--text);
	margin-top: 2px;
    overflow: auto;
    height: auto;
}
#menu .menu-prop .area-select-grid .field-options .option, #menu .menu-prop .parent-select-grid .field-options .option {
    padding: 0.4rem 0.44rem;
    cursor: pointer;
    font-size: 0.94rem;
}
#menu .menu-prop .area-select-grid .field-options .option:hover, #menu .menu-prop .parent-select-grid .field-options .option:hover {
    background-color: var(--bg-2);
}

#menu .no-database, #menu .no-tables {
    color: var(--windows-font);
    border-radius: 0.4rem;
}