@import url('https://fonts.googleapis.com/css2?family=B612:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=B612+Mono&display=swap');

/********************************************************************************************************
 * Global style
 ********************************************************************************************************/
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;

	color: white;
	font-family: 'B612', sans-serif;
	font-weight: 400;
}

#main {
	z-index: -1;
	margin: 0;
	padding: 0;
}

canvas {
	display: block;
}

button {
	background: none;
	background-color: transparent;
	border: none;
	padding: 0;
	margin: 0;
	color: white;
}

button:focus {
	outline: none;
}

button:hover,  button.active {
	background-color: #BC004F;
}

/********************************************************************************************************
 * Generic panel styles
 ********************************************************************************************************/
.panel {
	background-color: #222222;
	opacity: 0.9;
	display: flex;
}
.panel.panel-h {
	flex-direction: row;
}
.panel.panel-v {
	flex-direction: column;
}

.button-big {
	width: 72px;
	height: 72px;
}

.button-small {
	width: 36px;
	height: 36px;
	padding: 6px;
}
.button-small img {
	width: 24px;
	height: 24px;
}


.panel pre {
	font-family: 'B612 Mono', monospace;
	font-weight: 400;
	font-size: 11px;
}

.panel h1 {
	margin: 0px;

	font-size: 19px;
	font-weight: 700;
	text-align: left;
}

.panel-header {
	border-bottom: 4px solid #5A5165;
	display: flex;
	align-items: center;
	padding: 8px;
	height: calc(24px);
}


/********************************************************************************************************
 * Generic Widgets
 ********************************************************************************************************/

 section.w-module {
	padding: 8px;
	height: calc(72px - 8px * 2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

section.w-module.active {
	background-color: #BC004F;
}

section.w-module h1 {
	margin: 0px;

	font-size: 19px;
	font-weight: 700;
	text-align: left;
}

section.w-module div {
	flex-grow: 1;

	width: 100%;
	height: 16px;
	display: inline-flex;
	align-items: center;
}
section.w-module div label {
	font-size: 13px;
	font-weight: 400;
	text-align: left;
}
section.w-module div span {
	flex-grow: 1;

	font-size: 13px;
	font-weight: 700;
	text-align: right;
}

section.module-size-1x {
	width: calc(72px - 8px * 2);
}
section.module-size-2x {
	width: calc(72px * 2 - 8px * 2);
}