/*************** TOOLBAR ******************/
section.toolbar {
	border-bottom: 2px solid black;
}

section.toolbar main {
	height: 0;
	overflow: hidden;
}

section.toolbar.open main {
	height: auto;
}

section.toolbar header {
	display: flex;
}

section.toolbar header input {
	border: none;
	background: transparent;
	font-weight: 700;
	font-size: 2rem;
	margin: 0;
	padding: 0;
	height: auto;
	font-family: 'Neue Haas Grotesk W01 Disp', Times, Arial, sans-serif, FontAwesome;
}

section.toolbar header input::placeholder {
	opacity: 1;
	color: #000;
}

section.toolbar header {
	background: transparent;
}


section.toolbar div.searchResults > div {
	background: #fff;
	padding: 10px 10px 0 10px;
	position: relative;
}

section.toolbar div.searchResults > div a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

section.toolbar div.searchResults > div p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 10px;
}

section.toolbar div.searchResults .previewImage {
	width: 100%;
	padding-bottom: 50%;
	background-size: cover;
	background-position: center center;
	margin-bottom: 10px;
}

/**************** multiselect dropdow checkboxen *****************/
section h1 form {

	margin: 5px 0 0 0;
	white-space: nowrap;
	display: inline-block;
	float: right;
}

div.brandSearchBar,
div.brandSearchBar > div {
	float: right;
}

section h1 form input[type="text"],
section h1 form a.button,
section h1 form button {
	width: auto;
	padding: 3px;
	height: 33px;
	background: white;
	color: black;
}

section h1 form a.button.active {
	background: black;
	color: white;
}

section.burdaBrands.fold h1 form .tags option,
section.burdaBrands.fold h1 form .orte option {
	color: #ccc;
	font-size: 20px;
}

div.multidropdown > div {
	display: none;
}

div.multidropdown.open > div {
	display: block;
}

div.multidropdown {
	height: 33px;
	display: inline-block;
	padding: 3px;
	border: 2px solid #000;
	font-size: 18px;
	cursor: pointer;
	position: relative;
}

div.multidropdown label {
	cursor: pointer;
	text-align: center;
}

div.multidropdown div {
	position: absolute;
	z-index: 2;
	background: rgb(255, 255, 255);
	padding: 10px 50px 10px 10px;
	border: 2px solid rgb(0, 0, 0);
	top: 34px;
	left: -2px;

}

h1 div.multidropdown div label {
	text-align: left;
}

h1 div.multidropdown div label input {
	height: auto;
}


/**************** info andmessages *****************/
#patchworkInfo div.info,
#animationFrameInfo div.info {
	font-family: monospace;
	border: 1px solid rgb(230, 230, 230);
	text-align: right;
}

#animationControlButtons {
	font-family: monospace;
	font-size: 20px;
}

#animationControlButtons a {
	visibility: hidden;
}

#animationControlButtons a.resume,
#animationControlButtons.playing a.pause,
#animationControlButtons a.next,
#animationControlButtons.paused a.prev,
#animationControlButtons.paused a.stop {
	visibility: visible;
}

#animationControlButtons.playing a.resume,
#animationControlButtons.playing a.next {
	display: none;
}

#animationFrameConsole,
#queueInfo {
	text-align: left;
	height: 100px;
	overflow-y: auto;
}

#animationFrameConsole p,
#queueInfo p {
	line-height: 1;
	margin: 0;
}

div.banner {
	margin-left: -10px;
	padding: 5px 10px;
	background: rgb(230, 230, 230);
	font-family: monospace;
	color: white;
	text-align: right;
}

div.banner.info {
	background: #83C759;
}

div.banner.warning {
	background: rgb(255, 153, 0);
}

div.banner.error {
	background: #F50000;
}

/**************** SETTINGS CLASS *****************/
.settingsClass.edit .level_3 ul.barmenu,
.settingsClass.edit .level_3 .level_4 ul.barmenu {
	border: 2px solid #000;
	margin-left: 0;
	min-height: 28px;
	padding: 0;
	color: #fff;
	background: #000;
}

.settingsClass.edit .level_3 ul.barmenu {
	min-height: 32px;
}

.settingsClass.edit .level_3 ul.barmenu li,
.settingsClass.edit .level_4 ul.barmenu li {
	margin-left: 0;
}

.settingsClass.edit .level_3 h2,
.settingsClass.edit .level_4 > span {
	border: 2px solid #000;
	padding: 2px 6px;
	min-height: 28px;
}

.settingsClass section.widget main {
	overflow: visible;
}

.settingsClass div:empty {
	width: 0;
	flex: 0 0 0;
	margin-left: -10px;
}

.settingsClass .level_2 > header > div:empty {
	margin-left: 0;
}

.settingsClass .level_3 {
	margin-right: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: -2px;
	padding: 2px;
}

.settingsClass.edit .level_3 {
	border: 2px solid #000;
}

.settingsClass.edit .level_3 > .row:not(.level_4) > h2 {
	margin-top: -4px;
	margin-right: -4px;
	flex: 1 1 auto;
}

.settingsClass.edit .level_3 > .row:not(.level_4) > ul.barmenu {
	margin-left: -2px;
	margin-top: -4px;
}

.settingsClass .level_3 .row {
	padding-right: 0;
}

.settingsClass .level_3 .row:last-child {
	padding-bottom: 8px;
}

.settingsClass.edit .level_4 {
	padding: 0 10px 8px 10px;
}

.settingsClass.edit [contenteditable] {
	outline: 0;
}

.settingsClass section.widget {
	width: auto;
}

body > .layout > div.settingsClass {
	flex: 1 1 auto;
}


/*div.center { side effects - spezialisieren
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}*/
h1.stage {
	display:inline;
	color:rgba(0,0,0,0.2);
	font-size:55px;
}