/*!
 * shop/index.css
 * (c) 2021 newfire.com
 */
@import "../lib/object.css";
@import "../lib/User.css";
@import "../lib/import.css";
@import "../index.css";

@import "./Store.css";
@import "./Item.css";
@import "./Order.css";
@import "./Event.css";
@import "./Review.css";
@import "./Message.css";
@import "../mail/Mail.css";

:root{
	--color: #7DA826;
	--color2: #617723;
	--color: #6A4D88;
	--color2: #500249;
	--color: #562E77;
	--color2: #3b0036;
	--background-color: white;
	--background: white;
}

body {
	color: #333;
	background: var(--background);
	max-width: 800;
	left: 0; right: 0;
	margin: auto;
}

/* Hide vertical scrollbar but keep scrolling possible */
html {
  overflow-y: scroll;
  scrollbar-width: none;
}

h3 {
	font-size: large;
}

menubar {
	display: block;
	//background: url(/images/patternTruchet.svg) var(--color) 0px 0px / auto 80px;
	//background: url(/shop/images/background.svg) var(--color);
	background: url(/shop/images/floral.webp) var(--color) 0px 0px / auto 80px;
	text-align: right;

	position: fixed;
	width: 100vw;
	max-width: 800;
	top:0;
	z-index: 100;
}

apps-menu{
	float: left;
	display: inline-block;
}
apps-menu img{
	height: 32;
}

menu1 {
	display: block;
	//margin: 6;
	//float: right;
	//padding: 0 35 0 0;
	padding: 0 5 0 0;
}
menu1 >*{
	display: inline-block;
	margin: 3;
	//border-radius: 10px;
	vertical-align: middle;
}
menu1 >mi{
	margin: 4 0;
	color: white;
}

mi[open=true] {
		box-shadow: 1px 1px 4px 0px silver;
		outline: unset;
}

mi {
	display: inline-block;
	text-transform: uppercase;
	padding: 1;
	z-index: 1; /* avoid later element blocking from clicking */
}

/*
mi#events {
	display: none;
}
body.admin mi#events,
body.seller mi#events {
	display: inline-block;
}
*/

profile{
	position: unset;
	//position: absolute;
	//top: 0;
	//right: 0;
	//margin: 3;
	//color: white;
	//background: var(--color);
}

mi#messages counter,
mi#cart counter {
	display: inline-block;
	border-radius: .5em;
	background: red;
	padding: 0 4;
	pointer-events: none;
	margin-left: -11;
}

app{
	display: flex;
	margin: 50 2 2 2;
}

app.public mi#join{
	color: white;
	background: silver !important;
	display: block;
}
app.public mi#enter{
	display: block;
}

app.nonmember mi#subscribe{
	display: block;
	background: orange !important;
	color: white;
}

app.member mi#forum,
app.member mi#groups,
app.member mi#lectures,
app.member mi#archive,
app.member mi#search {
	display: block;
}

mi.admin {
	display: none;
}

body.admin mi.admin {
	display: inline;
}

app >app-menu >user > mi{
	display: block;
}

app-menu {
	//display: inline-block;
}

app-menu mi{
	display: block;
	border-radius: 1em;
	margin: 4;
	//color: gray;
	background: rgba(0, 0, 0, .07) !important;
	box-shadow: var(--box-shadow);
	font-size: small;
}

app-menu mi[open=true]{
	color: white;
	background: var(--color) !important;
}
app-menu mi:hover{
	filter: brightness(1.1);
}
app-menu mi img{
	border-radius: 1em;
	width: 21;
	height: 21;
	padding: 2;
}


app-body{
	display: inline-block;
	flex-grow: 1;
	margin: 2;
}

app-body > obj[klass=User],
app-body > form > obj[klass=User] {
	width: 320;
	display: inline-block;
	border-radius: 5px;
	box-shadow: var(--box-shadow);
}

/* hide omenu 
app:not([class~=member]) omenu {
	display: none;
}
*/


footer {
	font-size: smaller;
	margin: 50 9 9 9;
	filter: opacity(.7);

}
footer mi {
	color: var(--color);
}

@media screen and (max-width: 600px) {
	/* vertical menu label for non-member */
	app:not(.member) app-menu{
		min-width: 30; /* firefox width too narrow */
	}
	app:not(.member) app-menu mi {
		writing-mode: vertical-lr;
		text-orientation: upright;
	}
	app:not(.member) app-menu mi img{
		vertical-align: unset;
	}
}

/* notification box */
zoom,
box {
	max-width: 350;
	border: 1px solid silver;
	border-radius: 10px;
	display: inline-block;
	margin: 20;
	padding: 8;
}

zoom {
	max-width: 300;
	text-align: left;
}
zoom img {
	width: 50;
	margin-right: 15;
	float: left;
}

/*
searchbox >result >obj{
	margin-bottom: 0 !important;
}
*/

loginpanels {
	display: inline-grid;
}
loginpanels button {
	box-shadow: unset;
}