html, body, svg {
	padding:0;
	margin:0;
	font-family: Liberation sans, sans-serif;
	
}

#canvas {
	transform-origin: 0 0;
	
}

#overlay {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0); /* Black background with opacity */
	z-index: 99; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
  }

#loadingMessage {
	font-size: 1.5em;
	background: #eee linear-gradient( #eee, #ccc);
	padding: 20px;
	width: 40%;
	line-height: 50px;
	text-align: center;
	border-radius: 10px;
	position:fixed;
	top: 40%;
	left: 30%;
	z-index: 1;
	box-shadow: 0 0 2px #333;
	transition: 1s;
}

#loadingMessage.hidden {
	display:none;
	opacity: 0;
	z-index: -1;
}

#loadingMessage::after {
	content: "...";
}

/* Hide scrollbar for Chrome, Safari and Opera */
.menu::-webkit-scrollbar {
    display: none;
}

#menu {
	-ms-overflow-style: none;
	scrollbar-width: none;
	font-size: 16px;
	border-radius:0;
	overflow-y: scroll;
	position:fixed;
	margin-bottom:30px;
	left:0;
	top:0;
	color:black;
	height:100%;
	/*width:300px;*/
	transition-duration:1s;
	padding: 10px;
	z-index:98;
}

#menu.closed {
	border-radius:3px;
	left:10px;
	top:10px;
	background-color:rgba(100,200,255,0.7);
	width:6vw;
	height:2em;
	transition-duration:1s;
}

.menu {
	cursor:default;

}

.menu h2{ /*Menu title ("Menu")*/
	display: none;
	font-size:4vh;
	text-align: center;
	letter-spacing:.5vw;
	text-shadow: 0px 0px 5px white;
	color:black;
	padding:0;
	margin:0;
}

.menu .tools {
	list-style-type:none;
	padding:0;
}

@keyframes minimize {
	to {max-width:100%}
}

.menu .tool {
	 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
	pointer-events: auto;
	white-space: nowrap;
	list-style-position:inside;
	border:1px solid #eeeeee;
	text-decoration:none;
	cursor:pointer;
	background: #FFF;
	margin-top: 10px;
	height: 40px;
	line-height: 40px;
	border-radius: 3px;
	max-width: 40px;
	transition-duration: .2s;
	overflow: hidden;
	width: max-content;
	box-shadow: 0 0 3px #7FB2CC;
	/*box-shadow: inset 0 0 3px #8FA2BC;*/
}

.menu .tool:focus-within,
.menu  #settings .tool:hover {
	max-width:100%;
}

.menu .tool-popout {
	 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
	pointer-events: auto;
	white-space: nowrap;
	list-style-position:inside;
	border:1px solid #eeeeee;
	text-decoration:none;
	cursor:pointer;
	background: #FFF;
	margin-top: 10px;
	height: 40px;
	line-height: 40px;
	border-radius: 3px;
	max-width: 40px;
	transition-duration: .2s;
	overflow: hidden;
	width: max-content;
	box-shadow: 0 0 3px #7FB2CC;
	/*box-shadow: inset 0 0 3px #8FA2BC;*/
}

.menu .tool-popout:focus-within,
.menu  #settings .tool-popout:hover {
	max-width:100%;
}


.menu .tool:hover, .menu .tool--popout:hover{
	color:black;
	/*
	animation-name: minimize;
	animation-duration: 1.2s;
	animation-iteration-count: 2;
	animation-timing-function: cubic-bezier(.08,.82,.17,1);
	animation-direction: alternate;
	*/
}

.menu .tool-extra {
	margin:0px 3px 0px 5px;
	width:39px;
	display:inline-block
}

.menu .oneTouch:active {
	border-radius: 3px;
	background-color:#eeeeff;
  }

.menu .tool:active {
	box-shadow: inset 0 0 1px #ddeeff;
	background-color:#eeeeff;
	/*box-shadow: inset 0 0 3px #7FB2CC, 0 0 5px #0064d9;*/
  }


.menu .tool.curTool, .menu .tool-extra.curTool {
  box-shadow: 0 0 5px #0064d9;
  /*background: linear-gradient(#96E1FF, #36A2FF);*/
}

.menu .tool-icon {
	display: inline-block;
	text-align:center;
	font-size:24px;
	width: 30px;
	margin-left: 5px;
	margin-right: 26px;
	height: 30px;
	max-height: 24px;
	height: 100%;
	margin: 0px 26px auto 4px;
	font-family: mono;
}

.menu .tool-icon > * {
	display: block;
	margin: auto;
}

.menu .tool-icon-popout {
	display: inline-block;
	text-align:center;
	font-size:24px;
	width: 30px;
	height: 30px;
	max-height: 24px;
	height: 100%;
	margin: 0px 0px auto 4px;
	font-family: mono;
}

.menu .tool-icon-popout > * {
	display: block;
	margin: auto;
}

.popover.menu {
	border:1px solid #dddddd;
	box-shadow: 0 0 3px #7FB2CC;
}

.popover .popover-body {
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
	cursor:pointer;
	padding: 5px 5px 5px 5px;
}

.popover .tool-extra {
	cursor:pointer;
	margin: 0px 0px 0px 0px;
}

.popover .tool-icon {
	margin: 0px 4px 0px 4px;
}

.menu .tool-name {
	text-align: center;
	font-size: .9em;
	margin-right: 30px;
}
.menu .tool-name.slider {
	display: inline-block;
    width: 150px;
    height: 30px;
    font-size: .9em;
    line-height: 15px;
    vertical-align: top;
    padding: 6px;

}

#shape-lock {
	position:fixed;
	bottom:60px;
	right:15px;
	display:none;
	width:24px;
	height:24px;
	color:gray;
}

#shape-lock.locked {
	color:red;
}


#compass {
	position:fixed;
	bottom:10px;
	right:3px;
	display:none;
	width:52px;
	height:40px;
}

#compass .direction {
	position:absolute;
	width:16px;
	height:16px;
}

#compass #north{
	left:16px;
	top:0px;
}

#compass #east{
	left:36px;
	top:12px;
}

#usercount{
	position:fixed;
	bottom:20px;
	right:20px;
	width:25px;
	height:16px;
	text-align:center;
	font-size:.75rem;
	color:gray;
}

#compass #south{
	left:16px;
	top:24px;
}

#compass #west{
	left:0px;
	top:12px;
}

#canvas input {
	font-size:16px;
}

.window-focused {
	z-index:8;
}

.window-icon-button{
	margin-top:-1.6px;
}

.window-unfocused{
	z-index:7;
}

button.close.window-button{
	padding-left:10px;
}

.window-button:focus{
	outline: none;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: #008ec3;
}



.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
    border-right-color: #008ec3;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: #008ec3;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
    border-left-color: #008ec3;
}



.tooltip .tooltip-inner {
    background-color: #008ec3;
}
#chooseColor {
	width:100%;
	height:100%;
line-height:30x;
	border:0px solid black;
	border-radius:0px;
	color:black;
	text-shadow: 0 0 0px white;
	display: block;
	width: 100%;
	margin: 0px;
	padding:0px;
}


.rangeChooser {
	display: block;
	border: 0;
	width: 100%;
	margin: 0;
	background: transparent;
}