/*********** NEVER USE filter: !!! GIVES RANDOM ARTIFACTS ALL OVER THE PLACE **************/

.popups {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 29;
}
.popups:not(.plugins) {
	display: none;
}

.popups-shade {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(40, 40, 40, 0.85);
}

.popups:not(.plugins) .popups-shade {
	opacity: 0;
	transition: opacity 0.2s;
}
.popups.open .popups-shade {
	opacity: 1;
}

.popups.no-block,
.popups.no-block .popups-shade
{
	pointer-events: none;
	background: transparent;
}

.popups .button-grid {
	margin-bottom: 0.5rem;
}

.popups-shade > menu {
	pointer-events: auto;
	padding: 16px;
	box-sizing: border-box;
	width: 25rem;
	position: relative;
	background: radial-gradient(#292929, #171717);
	box-shadow: 0 0 3rem 1rem #000;
	outline: solid 0.5px #383838;
}
#plugins .popups-shade > menu {
	position: absolute;
}
.popups.open > .popups-shade > menu.xray {
	opacity: 0.8;
	background: rgba(0, 0, 0, 0.23);
	backdrop-filter: blur(3px);
}
.popups:not(.plugins) .popups-shade > menu {
	margin: auto;
}

.popups-shade > menu.xray div.label, .popups-shade > menu.xray p {
	text-shadow: 0 0 5px #000, 0 0 5px #000;
}

.popups-shade > menu h1 {
	line-height: 1.2em;
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 0.7rem;
	font-weight: bold;
	font-style: normal;
	color: #eee;
}

.popups:not(.plugins) > menu > div.radio, .popups:not(.plugins) > menu > div > div.radio {
	margin-bottom: 1.5rem;
}

.popups.ui .popups-shade > menu > button,
.popups.ui .popups-shade > menu > div > button,
.popups.ui .popups-shade > menu > div > div > button,
.popups.ui .popups-shade > menu > div > div > div > button,
.popups.ui .popups-shade > menu > div > div > div > div > button
{
	width: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
.popups.ui button.action {
	font-weight: bold;
}

.popups-shade > menu .popup-buttons {
	width: calc(100% + 32px);
	margin: 16px 0 -16px -16px;
	display: flex;
}

.popups-shade > menu .popup-buttons button {
	flex-grow: 1;
}

.popups-shade > menu.fixed-buttons {
	padding: 0;
	max-height: initial;
}

.popups-shade > menu.fixed-buttons > div:first-of-type {
	padding: 16px 16px calc(16px + 2.15rem) 16px;
	max-height: calc(var(--app-height) - 4rem - 2.15rem);
	overflow: auto;
	box-sizing: border-box;
}

.popups.ui div.label:not(.inline) {
	margin-bottom: 0.1rem;
}

.popups.ui .popups-shade > menu div.radio.tabs {
	margin: 0 0 0 -16px;
	width: calc(100% + 32px);
}

#plugins .popups-shade > menu {
	display: block;
	width: auto;
	/* in plugins, we implement our own scrolling inside the 'editor' div */
	overflow-y: hidden;
	border-color: #333;
}
#plugins .popups-shade > menu:not(.drag) {
/*	transition: left 0.12s, top 0.12s, transform 0.12s, opacity 0.12s;*/
}
#plugins .popups-shade > menu.drag .plugin-titlebar {
	filter: brightness(1.5);
}
#plugins .popups-shade > menu.top {
	z-index: 105;
}
#plugins .popups-shade > menu.fullscreen {
	top: 2rem;
	left: 0;
	bottom: calc(2rem + 1px);
	outline: none;
	border: none;
	right: 6rem; /* App.config.channelWidth */
	max-height: none;
	box-shadow: none;
}

.plugin-titlebar {
	color: #fff;
	background: #474747;
	box-shadow: inset 0 0 2rem #0005;
	font-size: 0.65rem;
	text-align: left;
	margin: -16px 0 16px -16px;
	width: calc(100% + 32px);
	height: 2rem;
	line-height: 1;
	position: relative;
}

.plugin-sidebar {
	position: absolute;
	right: 0;
	top: 2rem;
	width: 2rem;
	height: calc(100% - 4rem);
	background: #1c1c1c;
}
.popups.ui menu > div.plugin-sidebar > button {
	padding: 0;
	width: 100%;
	display: block;
	border-left: none;
	border-right: none;
}

#plugins.ui menu .plugin-titlebar button {
	float: right;
	margin: 0;
	border: none;
	height: 2rem;
	line-height: 2rem;
	padding-left: 0.9rem;
	padding-right: 0.9rem;
}

.plugin-titlebar > span {
	display: inline-block;
	margin-left: 16px;
	line-height: 2rem;
	pointer-events: none;
}