/*
* Custom scrollbars
*/
::-webkit-scrollbar {
	width: 16px;
	height: 16px
}

::-webkit-scrollbar-track {
	background-color: rgba(0, 0, 0, 0.4); 
	border-radius: 16px
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.4); 
	border-radius: 16px
}

::-webkit-scrollbar-button {
	height: 0px;
	width: 0px
}

#spawnTabs::-webkit-scrollbar {
	height: 8px
}

#optionsMenu::-webkit-scrollbar-track, #updatesMenu::-webkit-scrollbar-track, #mapScreen::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0.1); 
	border-radius: 16px
}

#optionsMenu::-webkit-scrollbar-thumb, #updatesMenu::-webkit-scrollbar-thumb, #mapScreen::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.3); 
	border-radius: 16px
}

/*
* Resizable UI
*/
.ui-resizable { position: relative }
.ui-resizable-handle { position: absolute; font-size: 0.1px; display: block }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0 }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0 }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100% }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100% }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px }

/*
* Screen styles
*/
#tipBar {
	display: table-cell;
	vertical-align: bottom;
	position: absolute;
	width: 512px;
	bottom: 10%;
	right: 0%
}

#loginScreen {
	display: none;
	position: fixed;
	left: 0px;
	top: 25%;
	height: 50%;
	width: 100%
}

#mapScreen {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.55);
	overflow: auto;
	display: none
}

#loadingScreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: fixed;
	width: 100%;
	height: 100%;
	margin-top: -20px
}

#pauseMenu {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.55);
	visibility: hidden
}

#optionsMenu {
	position: absolute;
	left: 40%;
	width: calc(60% - 32px);
	top: 0px;
	height: calc(100% - 16px);
	background-color: rgba(0, 0, 0, 0.4);
	padding-left: 32px;
	padding-top: 16px;
	overflow-y: auto;
	visibility: hidden
}

#spawnMenu {
	position: absolute;
	width: 100%;
	height: 100%;
	visibility: hidden
}

/*
*
*/
body {
	margin: 0px;
	overflow: hidden;
	background-color: black
}
p, h1, input {
	font-family: "Calibri", sans-serif;
	letter-spacing: 2px;
	margin: 0px 0px 0px 0px
}
p, h1 {
	cursor: default;
	color: white
}
img, p, h1 {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
textarea:focus, input:focus{
    outline: 0
}
.field_auth {
	width: 192px;
	margin-right: 8px;
	padding-left: 4px;
	background-color: rgba(255, 255, 255, 0.8);
	border: 0px solid
}
.button_small_circle {
	display: inline;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 16px
}
#updatesMenu ul {
	padding: 0px 32px 0px 16px;
	list-style: none
}
#optionsMenu input {
	margin-left: 8px;
	vertical-align: middle
}
#optionsMenu p {
	margin-top: 16px !important
}
#optionsMenu h1:first-child {
	margin-top: 6px;
	margin-bottom: 6px
}
#optionsMenu h1:not(:first-child) {
	margin-top: 64px
}
#optionsMenu h1 {
	font-size: 38px;
	font-weight: normal
}
#optionsMenu div:last-child {
	margin-bottom: 32px
}
#spawnMenu h1 {
	margin: 18px 0px 6px 16px;
	font-size: 32px;
	font-weight: normal;
	border-bottom: 4px solid rgba(226, 189, 0, 0.4);
	letter-spacing: 4px;
	width: 320px
}
.editorTriCell {
	display: table-cell;
    width: 25%
}
.tipAlert {
	display: none;
	margin-top: 8px;
	vertical-align: middle;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 8px 0px 0px 8px
}
#logAdd, #logImprovement, #logFix, #logWarning {
	float: left; 
	padding: 2px 8px;
	margin: 0px 8px 0px 0px !important;
	display: block;
	border-radius: 8px;
	width: 68px;
	text-align: center
}
#logAdd {
	background: rgba(161, 211, 114, 0.8)
}
#logImprovement {
	background: rgba(126, 167, 216, 0.8)
}
#logFix {
	background: rgba(235, 72, 69, 0.8)
}
#logWarning {
	background: rgba(255, 179, 71, 0.8)
}
#chatMessageSendBox {
	position: absolute; 
	width: 672px; 
	height: 21px;
	float: right;
	left: 10px;
	bottom: 270px;
	padding-left: 4px;
	visibility: hidden;
	z-index: 1;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: rgba(0, 0, 0, 0.2);
	font-family: Calibri;
	border-radius: 14px
}
#chatMessageSendBox input {
	color: white
}
#chatBox {
	position: absolute; 
	width: 672px; 
	bottom: 10px; 
	left: 10px;
	visibility: hidden;
	z-index: 1;
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: hidden;
	font-family: Calibri;
	text-shadow: 1px 1px 4px #000000;
	font-size: 16px; 
	line-height:16px;
	height:256px;
	word-wrap: break-word;
	margin-right: -20px;
	border-radius: 14px
}
#chatBox p {
	margin-left: 4px;
	margin-top: 4px
}
#spawnMenuItem {
	height: 140px;
	width: 140px;
	/*background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0) 65%)*/
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 14px
}
#spawnMenuItem p {
	margin-top: 16px
}
#mapMenuItem {
	height: 172px;
	width: 128px;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 14px
}
#mapMenuItem p {
	padding-top: 12px
}
#spawnMenuItem, #mapMenuItem {
	display: inline-block;
	margin-top: 16px;
	margin-left: 16px;
}
#spawnMenuItem, #mapMenuItem p {
	text-align: center;
	font-size: 18px;
}
#spawnMenuItem img {
	cursor: pointer;
	margin-top: 16px;
	width: 64px;
	height: 64px
}
#mapMenuItem img {
	cursor: pointer;
	margin-top: 12px
}
.menuTab {
	height: 64px;
	cursor: pointer;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 0px 0px 14px 14px
}
#editTab {
	height: 24px;
	width: 128px;
	padding-top: 4px;
	margin-left: -8px;
	margin-top: -8px;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.6);
	text-align: center;
	border-radius: 4px 4px 4px 4px
}
#IDE, #editor {
	position: fixed;
	right: 16px;
	height: calc(100% - 32px);
	width: 512px;
	top: 16px;
	border-radius: 4px
}
#editor {
	background-color: rgba(0, 0, 0, 0.5)
}
#IDEResize {
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.5)
}
#ExitButton {
	right: 4px; 
	background-color: rgba(255, 51, 51, 0.5)
}
#SwitchIDE {
	right: 32px; 
	background-color: rgba(102, 255, 102, 0.5)
}
#ExitButton, #SwitchIDE {
	position: absolute; 
	top: 4px;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	text-align: center
}
#SwitchIDE p {
	letter-spacing: 0px;
	font-size: 13px;
	margin-top: 4px
}
#pauseMenu p {
	margin-top: 6px;
	margin-bottom: 6px
}
#transformControls {
	position: absolute;
	top: 32px;
	right: 32px;
	width: 80px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 4px
}
#transformControls img {
	position: absolute;
	cursor: pointer;
	left: 16px
}
#transformControls p {
	position: absolute;
	width: 100%;
	text-align: center
}
#objectContextMenu {
	position: absolute;
	height: 80px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 4px
}
#objectContextMenu img {
	position: absolute;
	cursor: pointer;
	top: 16px
}
.blockly_gui_div_dialogue, .blockly_gui_div_window {
	position: absolute;
	top: 40%;
	left: 40%;
	height: 20%;
	width: 20%;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 4px
}
.blockly_gui_div_window {
	padding: 16px
}
.colorPicker {
	margin-left: calc(50% - 98px)
}

/*
* Loading text dots
*/
@keyframes blink {
    0% {
      opacity: .2
    }

    20% {
      opacity: 1
    }

    100% {
      opacity: .2
    }
}

#loadingText span {
    animation-name: blink;

    animation-duration: 1.4s;

    animation-iteration-count: infinite;

    animation-fill-mode: both
}

#loadingText span:nth-child(2) {
    animation-delay: .2s
}

#loadingText span:nth-child(3) {
    animation-delay: .4s
}

/*
* Rotation animation
*/
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}