/* large screens: side-by-side */
@media (min-width: 1186px){ /*1024 + 512 + 7*/
	.layout-primebar{
		margin: 0;
		padding: 0;
	}
	.layout-primebar>.primary{
		position: fixed;
		width: 512px;
		max-width: 512px;
		top: 55px;
		left: 0;
		height: calc(100% - 31px - 55px);
		max-height: calc(100% - 31px - 55px);
		overflow-y: auto;
		background-color: #ffffff70;
	}
	.layout-primebar>.secondary{
		padding-top: 25px;
		margin-left: 519px;
		margin-right: 28px;
		width: 100%;
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
	}
	
	.layout-primebar>.primary section{
		border-radius: unset;
	}
	
	.layout-primebar .filter-layout-primebar-wide{
		/* intentionally empty */
	}
	.layout-primebar .filter-layout-primebar-compact{
		display: none;
	}
	
	.layout-primebar>header{
		position: fixed;
		top: 0;
		left: 0;
		width: 512px;
		max-width: 512px;
		height: 48px;
		max-height: 48px;
		overflow-x: auto;
		background-color: #ffffff70;
	}
	
	.layout-primebar>footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 512px;
		max-width: 512px;
		height: 24px;
		max-height: 24px;
		overflow-x: auto;
		color: #333;
	}
}
/* small screens: stacked */
@media (max-width: 1185px){
	.layout-primebar{
		margin: 7px;
	}
	.layout-primebar>.primary{
		width: 100%;
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
	}
	.layout-primebar>.secondary{
		margin-top: 7px;
		width: 100%;
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
	}
	
	.layout-primebar>.primary section{
		background-color: #ffffffB0;
	}
	
	.layout-primebar .filter-layout-primebar-wide{
		display: none;
	}
	.layout-primebar .filter-layout-primebar-compact{
		/* intentionally empty */
	}
	
	.layout-primebar>header{
		width: 100%;
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
		height: 48px;
		max-height: 48px;
		margin-bottom: 7px;
		overflow-x: auto;
		background-color: #ffffff70;
	}
	
	.layout-primebar>footer{
		width: 100%;
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
		height: 24px;
		max-height: 24px;
		margin-top: 24px;
		overflow-x: auto;
		color: #333;
	}
} 
section{
	width: 100%;
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	background-color: #ffffff70;
	border-radius: 7px;
	/*min-height: 220px;*/
	padding: 7px;
	margin-bottom: 7px;
}

.layout-primebar>header a{
	color: #333;
	text-decoration: none;
}
.layout-primebar>header nav{
	height: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.layout-primebar>header nav>ol{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.layout-primebar>header nav>ol>li{
	display: inline-block;
}
.layout-primebar>header nav>ol>li:last-child{
	font-weight: bold;
	display: inline-block;
}
.layout-primebar>header nav>ol>li:not(:last-child){
	padding-right: 3px;
}
.layout-primebar>header nav>ol>li:not(:last-child)::after{
	content: '⯈';
}
/*.layout-primebar>header nav>ol>li:not(:last-child):hover::after{
	content: '⯆';
}*/
.layout-primebar>header nav>ol>li>ul{
	display: none;
}
.layout-primebar>header nav>ol>li:hover>ul{
	display: block;
	position: absolute;
}

.layout-primebar>footer a{
	color: #333;
	text-decoration: none;
}
.layout-primebar>footer nav{
	height: 24px;
	text-align: center;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.layout-primebar>footer nav>ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.layout-primebar>footer nav>ul>*{
	padding-right: 3px;
	display: inline-block;
}
.layout-primebar>footer nav>ul>*:first-child{
}
.layout-primebar>footer nav>ul>*:not(:first-child){
	border-left: solid #333 1px;
	padding-left: 3px;
}