app-bar-top {
	display: grid;
	grid-template: "action brand menu";
	grid-template-columns: 40px auto 40px
}

@media(min-width: 768px) {
	app-bar-top {
		grid-template: "brand action menu";
		grid-template-columns: 200px auto auto
	}
}

app-bar-brand {
	grid-area: brand
}

app-bar-action {
	grid-area: action
}

app-bar-menu {
	grid-area: menu
}

brand {
	display: grid;
	grid-template-columns: 40px auto min-content !important;
	grid-template: "brand name action" "brand rating action"
}

brand-profile {
	grid-area: brand
}

brand-name {
	overflow: hidden;
	grid-area: name
}

brand-rating {
	grid-area: rating
}

brand-action {
	grid-area: action
}

card {
	display: grid;
	grid-template: "header" "media" "content" "option" "action"
}

card-header {
	display: grid;
	grid-area: header;
	grid-template-columns: 35px auto auto !important;
	grid-template: "thumbnail title action" "thumbnail subtitle action"
}

card-header-thumbnail {
	grid-area: thumbnail
}

card-header-title {
	overflow: hidden;
	grid-area: title
}

card-header-subtitle {
	overflow: hidden;
	grid-area: subtitle
}

card-header-action {
	grid-area: action
}

card-media {
	overflow: hidden;
	grid-area: media
}

card-content {
	overflow: hidden;
	grid-area: content
}

card-option {
	grid-area: option
}

card-option::-webkit-scrollbar {
	display: none
}

card-action {
	grid-area: action
}

content-hero {
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 0;
	grid-row-gap: 1rem
}

@media(min-width: 768px) {
	content-hero {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: .8rem;
		grid-row-gap: 1.8rem
	}
}

@media(min-width: 992px) {
	content-hero {
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: .8rem;
		grid-row-gap: 1.8rem
	}
}

@media(min-width: 1200px) {
	content-hero {
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: .8rem;
		grid-row-gap: 1.8rem
	}
}

food {
	display: grid;
	overflow: hidden;
	grid-auto-columns: min-content auto;
	grid-template: "foodtitle foodtitle" "foodrating foodrating" "foodprice foodstatus" "foodcontent foodcontent"
}

food-title {
	overflow: hidden;
	grid-area: foodtitle
}

food-rating {
	grid-area: foodrating
}

food-price {
	grid-area: foodprice
}

food-status {
	grid-area: foodstatus
}

food-content {
	overflow: hidden;
	grid-area: foodcontent
}

.g-imgs {
	display: grid;
	grid-template: "cover cover cover cover", "thumbnail thumbnail thumbnail thumbnail"
}

.g-imgs-cover {
	grid-area: cover
}

.g-imgs-thumbnail {
	grid-area: thumbnail
}

layout-food {
	display: grid;
	grid-auto-columns: 1fr 1fr;
	grid-column-gap: 10px;
	grid-template: "column1" "column2"
}

@media(min-width: 768px) {
	layout-food {
		grid-template: "column1 column2"
	}
}

layout-profile {
	grid-area: column1
}

layout-detail {
	grid-area: column2
}

layout-with-sidenav {
	display: grid;
	grid-auto-columns: auto;
	grid-column-gap: 10px;
	grid-template: "sidenav" "content"
}

@media(min-width: 768px) {
	layout-with-sidenav {
		grid-auto-columns: minmax(min-content, 250px) auto;
		grid-template: "sidenav content"
	}
}

layout-sidenav {
	grid-area: sidenav
}

layout-content {
	grid-area: content
}

grid-4-col {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 12px
}

@media(min-width: 768px) {
	grid-4-col {
		grid-template-columns: repeat(4, 1fr)
	}
}

grid-3-col {
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 12px
}

@media(min-width: 768px) {
	grid-3-col {
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 12px
	}
}

grid-2-col {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 12px
}

@media(min-width: 768px) {
	grid-2-col {
		grid-template-columns: repeat(2, 1fr)
	}
}

.gc {
	display: grid;
	grid-gap: 12px;
	grid-template-columns: 1fr
}

@media(min-width: 768px) {
	.gc-4c {
		grid-template-columns: repeat(4, 1fr)
	}
}

@media(min-width: 768px) {
	.gc-3c {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media(min-width: 768px) {
	.gc-2c {
		grid-template-columns: repeat(2, 1fr)
	}
}

popup {
	display: grid;
	grid-template: "action title close" "media media media" "content content content"
}

popup-action {
	grid-area: action
}

popup-title {
	grid-area: title
}

popup-close {
	grid-area: close
}

popup-media {
	grid-area: media
}

popup-content {
	grid-area: content
}

navigation-drawer .nd-list {
	display: grid
}

navigation-drawer .nd-list .ndl-item {
	display: grid;
	grid-template: "icon title badge";
	grid-template-columns: 40px auto 30px
}

navigation-drawer .nd-list .ndl-item .ndli-icon {
	grid-area: icon
}

navigation-drawer .nd-list .ndl-item .ndli-title {
	grid-area: title
}

navigation-drawer .nd-list .ndl-item .ndli-badge {
	grid-area: badge
}

order {
	display: grid;
	grid-template-columns: 75px auto !important;
	grid-template: "profile name" "profile subtitle" "profile label"
}

order-profile {
	grid-area: profile
}

order-name {
	overflow: hidden;
	grid-area: name
}

order-subtitle {
	overflow: hidden;
	grid-area: subtitle
}

order-label {
	grid-area: label
}

.g-m-a {
	display: grid;
	grid-template-columns: min-content auto !important;
	grid-template: "label content"
}

.g-m-a-label {
	grid-area: label;
	align-self: center
}

.g-m-a-content {
	grid-area: content;
	align-self: center
}