html {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

:root {
	--rightBarWidth: 30px;
	--topBarHeight: 28px;
	--titleHeight: 20px;
	--bottomBarHeight: 40px;
	--chromeColor: rgb(47, 47, 51);
}

.SimojiApp {
	height: 100%;
	width: 100%;
}

.EditorHandleComponent {
	width: 10px;
	position: absolute;
	top: var(--topBarHeight);
	bottom: var(--bottomBarHeight);
	cursor: ew-resize;
}

.helpIframe {
	border: 0;
	height: 100%;
	min-height: 600px;
	min-width: 800px;
	width: 100%;
}

.GridComponent {
	position: absolute;
	left: 0;
	top: 0;
	background: transparent;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.SimEditorComponent {
	position: absolute;
	top: var(--topBarHeight);
	bottom: var(--bottomBarHeight);
	border: 0;
	left: 0;
}

.block {
	position: absolute;
	cursor: pointer;
	/*outline: 1px solid blue;*/
}

.block:active {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}

.BoardComponent {
	position: absolute;
	top: calc(10px + var(--topBarHeight) + var(--titleHeight));
	bottom: calc(10px + var(--bottomBarHeight));
	right: calc(10px + var(--rightBarWidth));
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	overflow: auto;
}

.selected {
	outline: 1px solid rgba(0, 0, 200, 0.3);
	border-radius: 5px;
}

.AgentPaletteComponent {
	text-align: center;
}

.AgentPaletteComponent div {
	cursor: pointer;
	width: 100%;
	height: 30px;
	line-height: 30px;
}

.AgentPaletteComponent div:hover {
	background-color: rgba(255, 255, 255, 0.2);
}
.AgentPaletteComponent .ActiveAgent,
.AgentPaletteComponent .ActiveAgent:hover {
	background-color: rgba(255, 255, 255, 0.5);
}

.TopBarComponent {
	background-color: var(--chromeColor);
	color: white;
	font-size: 14px;
	line-height: var(--topBarHeight);
	height: var(--topBarHeight);
	white-space: nowrap;
}
.ShareComponent {
	display: inline;
}
.ShareComponent input {
	background: rgb(79, 79, 79);
	padding: 3px;
	border-radius: 5px;
	color: white;
	border: 0;
	width: 230px;
}

.LogoComponent {
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	width: 26px;
	text-align: center;
	margin-left: 2px;
	margin-right: 2px;
}

.BottomBarComponent {
	position: absolute;
	line-height: var(--bottomBarHeight);
	height: var(--bottomBarHeight);
	padding-left: 5px;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--chromeColor);
	color: white;
	font-size: 34px;
	text-align: center;
	padding-right: var(--rightBarWidth);
}

#codeErrorsConsole {
	font-size: 10px;
	color: #999;
	text-align: center;
}

.PlayButtonComponent,
.ReportButtonComponent,
.ResetButtonComponent {
	cursor: pointer;
	user-select: none;
	width: 50px;
	display: inline-block;
	text-align: center;
}

.BottomButton:hover {
	background-color: rgba(255, 255, 255, 0.2);
	opacity: 1;
}

.BottomButton:active {
	background-color: rgba(255, 255, 255, 0.3);
	opacity: 1;
}

.ReportButtonComponent {
	float: right;
	opacity: 0.2;
}
.ResetButtonComponent {
	float: left;
	opacity: 0.2;
}

.RightBarComponent {
	position: absolute;
	width: var(--rightBarWidth);
	top: var(--topBarHeight);
	bottom: var(--bottomBarHeight);
	right: 0;
	padding-top: 20px;
	background-color: var(--chromeColor);
	color: white;
	font-size: 12px;
	z-index: 1;
	overflow: hidden;
}

.Agent {
	position: absolute;
	z-index: 1;
	user-select: none;
	cursor: pointer;
}

.Agent:hover {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

.ExamplesComponent {
	padding-left: 10px;
	display: inline-block;
}

.ExampleButton {
	cursor: pointer;
}

.ExamplesComponent a {
	text-decoration: none;
	display: inline-block;
	text-align: center;
	width: 30px;
}
.ExamplesComponent a:hover,
.LogoComponent:hover,
.ExampleButton:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

.BoardTitle {
	width: 100%;
	top: 0;
	position: absolute;
	font-family: Lato, Helvetica Neue, Arial, sans-serif;
	color: #bbb;
	text-align: center;
	font-size: 16px;
	z-index: 0;
}

.TitleComponent {
	position: absolute;
	top: var(--topBarHeight);
	right: var(--rightBarWidth);
	text-align: center;
	height: var(--titleHeight);
	font-family: Lato, Helvetica Neue, Arial, sans-serif;
	font-weight: 400;
	color: #666;
	line-height: 30px;
}