html {
	height: 100vh;
	width: 100vw;
	border: 0;
	overflow: auto;
	display: flex;
	justify-content: flex-start !important;
}

html.devmode {
	/* background: #1f1f1f; */
}

body.devmode {
	width: 100%;
	max-width: 1920px;
	max-height: 1080px;
	/* background-size: cover; */
	/* background-size: 100%; */
	background-color: black;
	/* background: #252525; */
	background-color: #1f1f1f;
	position: relative;
	--dev-accent-color: lime;
	--dev-bg-image: url(../../../img/dev_bg.jpg);
	/* border: 1px solid #3dff00; */
}

body.devmode::before {
	position: absolute;
	z-index: -1;
	content: ' ';
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: unset;
	background-size: cover;
	background-position: center top;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-image: var(--dev-bg-image);
	opacity: 0.7;
}

body.devmode.sport_fight::before {
	background-image: url('../dev/img/dev_fight3.jpg');
	background-size: auto;
}

body.sport_football::before {
	/* background-image: url("img/bg_football.jpg"); */
}

debug_panel {
	display: block;
	background: black;
	padding: 20px;
	color: white;
	/* max-height: 200px; */
	overflow-y: auto;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 900px;
	max-height: 300px;
}

debug_console {
	display: block;
	/* background: red; */
}

debug_console_row {
	display: block;
	margin-bottom: 10px;
}

dev_controls {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 1rem;
	text-align: right;
}

dev_controls > * {
	margin-right: 1rem;
}

button {
	padding: 0.5rem 1rem;
	color: white;
	background: black;
	border-radius: 0.3rem;
	cursor: pointer;
	border: none;
	transition: all 0.3s;
	color: var(--accent-color);
}

button:hover {
	background: #002b12;
}

button.active {
	background: var(--dev-accent-color);
	color: var(--text-color-inverted);
}

.button_startRecord.active {
	background: #d40000;
	color: white;
}

devsidebar {
	position: fixed;
	z-index: 100;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* width: 400px; */
	/* resize: horizontal; */
}

devsidebar > wrapper {
	display: flex;
	flex-direction: column;
	height: 100% !important;
	/* flex-grow: 1; */
	align-self: end;
	/* overflow: auto; */
	resize: horizontal;
	background: #858585;
}
devsidebar iframe {
	width: 320px;
	/* width: 500px; */
	border: none;
	width: 350px;
	box-shadow: 0px -10px 20px black;
}
devsidebar .dev_iframe_controls {
	min-height: 70%;
	/* margin-bottom: 0.8rem; */
	flex-grow: 1;
	resize: both;
	direction: rtl;
	/* box-shadow: 0px 20px 20px black; */
	/* z-index: 1; */
}

devsidebar .dev_iframe_titles {
	/* min-height: 410px; */
	height: 50%;
}

devsidebar::before {
	position: absolute;
	right: 100%;
	padding: 4px;
}

.sidebar-activator {
	/* margin-top: 1rem; */
	/* margin-bottom: 0.3rem; */
	margin-right: -0.3rem;
	display: flex;
	justify-content: flex-start;
	/* width: 100%; */
}

.sidebar-activator.active {
	background: black;
	color: var(--dev-accent-color);
}

.sidebar-activator::before {
	content: '<<';
	justify-self: right;
	margin-right: 10px;
}
.sidebar-activator::after {
	content: 'x';
	justify-self: right;
	text-align: right;
	margin-left: 20px;
	align-self: self-end;
	opacity: 0;
	flex-grow: 1;
}


.sidebar-activator.active::before {
	/* opacity: 0; */
	 
}

.sidebar-activator.active::after {
	opacity: 1;
	/* content: '>>'; */
}

.sidebar-activator a {
	align-self: flex-end;
	display: flex;
	flex-grow: 1;
	justify-self: self-end;
	justify-content: flex-end;
	color: var(--dev-accent-color);
	margin-left: 18px;
}
body.devmode.sport_hockey::before {
	/* background-image: url("img/bg_hockey.jpg"); */
}