body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: sans-serif;
	background: #ccc
}

canvas {
	border: 0px solid;
}

/* Mode Selection Container */
#modeSelectionContainer {
	border: 1px solid #a7a7a7;
	background: white;
	padding: 0px;
	user-select: none;
	position: fixed;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: row;
	z-index: 0;
	/* z-index: 100; */

}

.modeButton {
	padding: 8px 12px;
	border: 1px solid #ffffff;
	cursor: pointer;
	font-size: 12px;
	font-family: sans-serif;
	background: white;
	transition: background-color 0.1s ease;
	border-right: 1px solid #a7a7a7;
}

.modeButton:last-child {
	border-right: none;
}

.modeButton:hover {
	background: #cccccc;
}

.modeButton:active {
	background: #5d5d5d;
	color: white;
}

.modeButton.selected {
	background: #4a90e2;
	color: white;
	border-color: #357abd;
}

.modeButton.selected:hover {
	background: #357abd;
}

#toolsContainer,
#propertiesContainer,
#sceneManagmentContainer,
#gravityScaleContainer,
#widgetContainer,
#containersSwitch {
	border: 1px solid #a7a7a7;
	/* position: absolute; */
	background: white;
	padding: 0px;
	user-select: none;
}

#gravityScaleContaine {
	width: 100px;
}

#toolsContainer {
	width: 35px;
	top: 50%;
	transform: translateY(-50%);
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-direction: column;
}

#toolsContainer img {
	border: 1px solid #ffffff;
	padding: 4px;
}

#toolsContainer img:hover {
	background: #cccccc;
}

#toolsContainer img:active {
	background: #5d5d5d;
}

/* Hide all mode-tagged tools by default */
#toolsContainer img[data-modes] {
	display: none;
}


#propertiesContainer {
	width: 100%;
	/* background: lightgreen; */
	overflow-y: auto;
	height: 100%;
	overflow: auto;
	float: left;
	height: 400px;
	margin-top: 34px;
}


#widgetContainer {
	width: 100%;
	float: left;
	display: none;
	height: 400px;
	margin-top: 34px;
}

#sceneManagmentContainer {
	width: 265px;
	height: 41px;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	position: fixed;
}

#sceneManagmentContainer img {
	border: 1px solid #ffffff;
	padding: 4px;
}

#sceneManagmentContainer img:hover {
	background: #cccccc;
}

#sceneManagmentContainer img:active {
	background: #5d5d5d;
}



#filePicker {
	display: none;
}

#modelFilePicker {
	display: none;
}



#inputField {

	width: 40%;

	float: right;

	padding: 1px 4px;
}


#propertyName {
	/* border: 1px solid; */
	float: left;
	margin: 0px;
}

#propertyContainer {

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	align-items: center;

	/* background: lightcoral; */

	margin: 2px 6px;
}

#widgetContainer input {
	/* margin: 5px 13px; */
	/* height: 15px; */
}

#add {
	color: blue;
}



#widgetContainer #effect {
	border: 1px solid;
}

#widgetContainer #title {
	padding: 5px 0px;
	margin-top: 5px;
	background: #f3f3f3;
	padding-left: 6px;
}

#widgetContainer #title p {
	font-size: 15px;
	display: inline;
	font-weight: bold;
	color: #565454;
}

#widgetContainer #title input {
	width: 13px;
	float: right;
	margin-right: 18px;
	margin-top: 2px;
}


#gateContainer #id,
#platformContainer #id,
#rotatorContainer #id,
#coverContainer #id {
	margin-top: 5px;
	/* border: 1px solid; */
	height: 24px;
	margin: 2px 2px;
	/* background: lightblue; */
}

#gateContainer #select {
	margin-top: 5px;
	/* border: 1px solid blue; */
	margin: 2px 2px;
	/* background: lightblue; */
}

#gateContainer #id p,
#platformContainer #id p,
#rotatorContainer #id p,
#coverContainer #id p {
	margin: 0px;
	/* width: 20px; */
	float: left;
	margin-top: 2px;
	padding-left: 5px;
}

#gateContainer #select p {
	margin: 0px;
	width: 133px;
	float: left;
	margin-top: 2px;
	padding-left: 5px;
}

#gateContainer #id input,
#platformContainer #id input,
#rotatorContainer #id input,
#coverContainer #id input {
	margin: 0px;
	float: right;
	border: 1px solid #ccc;
	width: 50%;
}


#gateContainer #select input {
	/* width: 14px; */
	/* float: right; */
	/* margin-left: 109px; */
}

#template {
	/* display: none; */
}


#playFrame {
	width: 100%;
	height: 100vh;
	position: absolute;
	background: white;
	border: 0px;
	z-index: 1;
	display: none;
}

#iframeClose {
	position: absolute;
	padding: 7px;
	z-index: 94;
	border: 1px solid #ff6f6f;
	background: white;
	color: #ff6f6f;
	font-size: 12px;
	border-radius: 5px;
	left: 7px;
	top: 7px;
	cursor: pointer;
	box-shadow: 0px 2px 4px 1px #ccc;
	display: none;
}


#mapSubmissionContainer {
	/* border: 1px solid; */
	background: #ffffff;
	width: 100%;
	position: absolute;
	display: none;
}


#mapSubmissionContainer #title {
	text-align: center;
	padding: 18px 0px;
	background: white;
	margin-bottom: 4px;
}

#cross {
	color: red;
}

#mapSubmissionContainer #cross {
	border: 1px solid;
	text-align: center;
	float: left;
	font-size: 13px;
	padding: 8px 14px;
	margin-top: 11px;
	margin-left: 13px;
	border-radius: 5px;
	cursor: pointer;
	color: red;
}

#mapSubmissionContainer #windowContainer {
	/* border: 1px solid green; */
	width: 100%;
}

#mapSubmissionContainer #windowContainer textarea {
	border: 1px solid blue;
	width: 49%;
	height: 90vh;
	float: left;
	border-radius: 5px;
	font-size: 11px;
	/* color: #060654; */
}

#mapSubmissionContainer #windowContainer iframe {
	border: 1px solid;
	width: 50%;
	float: right;
	height: 90.4vh;
	border-radius: 5px;
}

#containersSwitch {
	text-align: center;
	position: relative;
	float: left;
	width: 100%;
	display: flex;
}

#containersSwitch-properties {

	width: 50%;

	/* background: lightcyan; */

	float: left;

	padding: 5px 0px;

	border: 1px solid white;
}

#containersSwitch-properties:hover {
	background: #ccc
}

#containersSwitch-properties:active {
	background: #5d5d5d
}

#containersSwitch-widgets {

	width: 49%;

	/* background: #e3ffe0; */

	float: right;

	padding: 5px 0px;

	border: 1px solid white;
}

#containersSwitch-widgets:hover {
	background: #ccc
}

#containersSwitch-widgets:active {
	background: #5d5d5d
}


#inspectorBoxesContainer {
	/* background: lightgoldenrodyellow; */
	position: fixed;
	right: 0px;
	width: 250px;
	border: 1px solid #a7a7a7;
	top: 50%;
	transform: translateY(-50%);
}

#inspectionContainerHeader {
	display: flex;
	flex-direction: row;
	align-content: center;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
	position: fixed;
	width: 100%;
	top: 0px;
	right: 0px;
}

.inspectionTitle {
	background: white;
	width: 50%;
	text-align: center;
	height: 23px;
	padding-top: 6px;
}

#containersSwitch-properties {}

#containersSwitch-widgets {}



#inspectorBoxesContainer {
	/* width: 100%; */
	/* float: left; */
	position: fixed;
	/* overflow-x: hidden; */
	display: none;
	animation-fill-mode: backwards;
	max-height: 87%;
}


/* ===== Alert Panel ===== */
#alertPanel {
	position: fixed;
	inset: 0;
	z-index: 200;
	/* Above iframeClose (94) and playFrame (1) */
	display: none;
	/* toggled by TS */
}

#alertPanel .alertPanel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

#alertPanel .alertPanel__card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 280px;
	max-width: 420px;
	background: #fff;
	border: 1px solid #a7a7a7;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	padding: 12px 14px;
	font-family: sans-serif;
}

#alertPanel .alertPanel__title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 6px;
}

#alertPanel .alertPanel__message {
	font-size: 13px;
	color: #333;
	margin-bottom: 12px;
}

#alertPanel .alertPanel__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

#alertPanel .alertPanel__btn {
	border: 1px solid #a7a7a7;
	background: #ffffff;
	padding: 6px 12px;
	font-size: 12px;
	cursor: pointer;
	border-radius: 5px;
}

#alertPanel .alertPanel__btn:hover {
	background: #cccccc;
}

#alertPanel .alertPanel__btn:active {
	background: #5d5d5d;
	color: #fff;
}

#alertPanel .alertPanel__btn--yes {
	border-color: #2b9cff;
}

#alertPanel .alertPanel__btn--yes:hover {
	background: #2b9cff;
	color: #fff;
}

/* Show allowed tools for the active mode (set via body class) */
body.mode-sandbox #toolsContainer img[data-modes~="sandbox"] {
	display: inline-block;
}

body.mode-twoPlayer #toolsContainer img[data-modes~="twoPlayer"] {
	display: inline-block;
}

body.mode-hideAndSeek #toolsContainer img[data-modes~="hideAndSeek"] {
	display: inline-block;
}



@media (max-width: 320px) {}