﻿.menuitemcontent {
	overflow: hidden;
	/*border: 1px solid #ddd;*/
	border-right: 1px solid #ddd;
	margin: 10px 0px;
}

.menuitem {
	/*border-width: 1px;
	border-style: solid;
	border-color: transparent #ddd #ddd transparent;
	margin: 0px -1px -1px 0px;*/
	border: 1px solid #ddd;
	border-right-color: transparent;
	border-top-color: transparent;
	padding: 0;
	transition: all 0.5s;
	margin-bottom: -1px;
}

	.menuitem:hover .title {
		/*max-width: 100%;
		max-height: 100%;*/
		/*text-shadow: 0 0 3px black;*/
	}

	.menuitem a {
		text-decoration: none;
	}

		.menuitem a:hover {
			text-decoration: none;
		}

	.menuitem .title {
		height: 6ex;
		vertical-align: bottom;
		margin: 0px;
		display: flex;
		justify-content: center;
		flex-direction: initial;
		padding: 0 2px;
		text-align: center;
		color: #955;
		align-items: center;
	}

	.menuitem .imagecontainer {
		border: 1px solid #eeea;
		border-radius: 4px;
		height: 200px;
		line-height: 200px;
		text-align: center;
		vertical-align: middle;
	}

		.menuitem .imagecontainer:empty:before {
			content: attr(placeholder);
			position: relative;
			top: 0;
			font-size: 2rem;
			width: 100%;
			text-align: center;
			color: #bbb;
		}

		.menuitem .imagecontainer .image {
			max-width: calc(100% - 1px);
			max-height: calc(100% - 1px);
			transition: all 0.2s;
			/*position: absolute;
			top: 2%;
			left: 2%;*/
		}

	.menuitem .description {
		color: #555;
		font-size: 10pt;
		overflow: hidden;
		max-height: 9em;
		text-align: justify;
		padding: 0.5ex 1em;
		line-height: 1.3em;
		height: 6.8em;
		margin-top: 0.5em;
		overflow: hidden;
	}

	.menuitem .props {
		position: absolute;
		background-color: rgba(1, 1, 1, 0.7); /*#111b;*/
		top: calc(6ex + 4px);
		left: 0px;
		width: 100%;
		height: calc(100% - 6ex - 4px);
		padding: 5px;
		padding: 0;
		display: none;
		padding: 3px;
		overflow: hidden;
	}

		.menuitem .props div {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			border-bottom: 1px solid transparent;
			font-size: 0.9em;
		}

		.menuitem .props .proptitle {
			background-color: rgba(1, 1, 1, 0.6); /*#111a;*/
			text-align: left;
			padding: 1px 0 1px 5px;
			white-space: normal;
			color: #fff;
		}

		.menuitem .props .propvalue {
			background-color: rgba(2, 2, 2, 0.2); /*#2225;*/
			text-align: right;
			padding: 1px 5px 0 0;
			color: #eee;
		}

	.menuitem .menuitemprice {
		color: orangered;
		font-size: 1.2em;
		text-align: center;
	}

		.menuitem .menuitemprice::after {
			font-size: 0.8em;
			content: " تومان";
		}

	.menuitem .menuitemprice_empty {
		color: orange;
		font-size: 1.2em;
		text-align: center;
	}

	.menuitem .showmore {
		display: none;
	}

	/*@media not all and (-moz-touch-enabled) and (pointer: fine) {*/
	.menuitem .edit {
		display: inline-block;
		position: absolute;
		top: 0ex;
		right: 1px;
		color: #f55;
		padding: 0;
		margin: 0;
		line-height: 0;
	}

@media (pointer: fine) {
	.menuitem .showmore {
		display: inline-block;
		position: absolute;
		top: 3.8ex;
		left: 5px;
		color: #eee;
	}

		.menuitem .showmore:hover {
			cursor: pointer;
			animation: pulseshowmore ease-in-out 0.5s infinite alternate;
		}
}

@media (-moz-touch-enabled) {
	.menuitem .showmore {
		display: none;
	}
}

@keyframes pulseshowmore {
	0% {
		color: #ddd;
		text-shadow: 0 0 7px transparent;
	}

	100% {
		text-shadow: 0 0 7px #22f;
		color: white;
	}
}
/*.menuitem .props span:after {
			content: "";
		}*/
.searchResult {
	background-color: #ee5f5f;
	color: white;
	padding: 3px 1em;
}
