/****************************************
  ==== RESETS
****************************************/
html,body,div,canvas { margin: 0; padding: 0; }
/* ::-moz-selection { color: #333; text-shadow: none; }
::selection {  color: #333; text-shadow: none; } */
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear { display: inline-table; clear: both; }
a:focus { outline:0; }
/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */

/****************************************
  ==== LAYOUT
****************************************/

html, body { width: 100%; height: 100%; overflow: hidden; }
#canvas { position: absolute; top: 0; left: 0; margin: 0; z-index: 1; cursor: cell; }

[data-notify="progressbar"] {
	margin-bottom: 0px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 3px;
}

.breadcrumbs2>li:last-child a{
	background-color: #1BA1E2;
	color: #FFF !important;
	cursor: default;
}
.breadcrumbs2>li:last-child a::before {
    border-color: #1BA1E2 #1BA1E2 #1BA1E2 transparent;
}
.breadcrumbs2>li:last-child a::after {
    border-color: transparent transparent transparent #1BA1E2;
}
.breadcrumbs2.compact>li a {
	padding: 0.3em 0.4em 0.3em 0.725em;
}
.breadcrumbs2>li a {
	background-color: #B2B2B2;
	color: #333; font-weight: 600;
}
.breadcrumbs2>li a::after {
    border-color: transparent transparent transparent #B2B2B2;
}

.listview-outlook .list-image {
	float: left;
	height: 2rem; width: 3rem;
	margin: 0.2rem -0.725rem 0.2rem 0.325rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.listview-outlook .list-content {
	display: inline-block;
}

.compact-button {
	height: 1.7rem;
	padding: 0 0.425rem;
	min-width: 1.625rem;
}

.alert {
	opacity: 0.8;
	cursor: default;
	text-shadow: none;
}

.alert-help {
	color: #2c3e50;
	background-color: #ecf0f1;
	border-color: #2c3e50;
}

.gui {
	position: fixed;
	z-index: 3;
	cursor: default;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
a {
	cursor: pointer;
}

nav {
	z-index: 99 !important;
}

fieldset {
	border: 1px solid #88B9E3;
	padding: 0.325rem 0.725rem;
	overflow: hidden;
}
legend {
	padding: 0 0.5rem;
}
.input-control.checkbox input[type="checkbox"]:disabled ~ .check, .input-control.radio input[type="checkbox"]:disabled ~ .check, .input-control.checkbox input[type="radio"]:disabled ~ .check, .input-control.radio input[type="radio"]:disabled ~ .check {
    opacity: 0.5;
}

.text-outline {
	text-shadow: -1px 0px 0px #222, 0px 1px 0px #222, 1px 0px 0px #222, 0px -1px 0px #222;
	color: #eee !important;
}
.text-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#console_input {
	width: 500px;
	font-family: monospace;
	color: #eee;
	background: #333;
}

#toolbar {
	left: 0.725rem;
	top: 4rem;
}
#toolbar .btn-group-vertical {
	margin-bottom: 8px;
}

#toolpanel-camera {
	left: 0.725rem;
	bottom: 10rem;
}

.colorpicker {
	right: 20rem; top: 6.425rem;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.colorbtn>span {
	height: 1.7rem;
	padding: 0.325rem 0.525rem;
}
.colorbtn>.place-right {
	width: 6.725rem;
}
.colorbtn>.place-left {
	opacity: 0;
}
.material-panel button:hover .colorbtn, .material-panel button:focus .colorbtn {
	border-color: #787878;
}
.material-panel button:hover .colorbtn>.place-left, .material-panel button:focus .colorbtn>.place-left {
	opacity: 1;
}
.material-panel button>label {
	line-height: 1.7rem;
	font-size: 90%;
}
.material-panel button[disabled] {
	opacity: 0.33;
	background: none !important;
}
.material-panel .row {
	margin-bottom: 2.12765% !important;
}

#inspector, #environment {
	z-index: 5;
	right: 0;
	top: 3rem;
	width: 20.725rem;
	overflow-y: auto;
}
#inspector .command-button {
	display: block;
	width: 99%;
	font-size: 1.225rem;
	line-height: 1.25;
	margin: 0.325rem 0;
}
#inspector .simple-list li, #inspector .numeric-list li {
    color: #EEE;
}

#bottom-panel {
	bottom: 0;
}
#bottom-panel .frame {
	padding: 0.625rem;
}
#bottom-panel .shortcut-button {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 0.825rem;
}

#intro {
	z-index: 9;
	background: transparent url("../img/brand/IntroScreen.png") no-repeat scroll 50% 1rem / 35rem auto;
	top: 3.125rem;
	width: 100%;
	bottom: 0;
	margin: 0;
}
#intro>div>hr {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin-top: 1.075em;
}
#intro>div>hr:before {
	display: inline-block;
	position: relative;
	top: -0.6725rem;
	content: "?";
	border-radius: 2rem;
	padding: 0.225rem 0.5rem;
	background: crimson;
	color: #fff;
	font-weight: bold;
}
#intro>div>div {
	display: inline-block;
	border-left: 1.5pt solid;
	padding: 0.5rem; 
}
#intro>div>div>b {
	display: block;
	margin-bottom: 0.5em;
}
#intro>.helpbox-left>hr, #intro>.helpbox-left>div {
	text-align: right;
	border-left: none;
	border-right: 1.5pt solid;
}

@media screen and (max-height:640px) and (min-width: 1400px) {
	html {
		font-size:100%
	}
}
@media screen and (min-width:1641px) and (min-height:690px) { 
	html {
		font-size:120%
	}
}
@media screen and (max-width:1640px) and (min-height:640px) { 
	html {
		font-size:110%
	}
}
@media screen and (max-width:1400px) {
	html {
		font-size:100%
	}
}
@media screen and (max-width:768px) {
	html {
		font-size:90%
	}
}
@media screen and (max-width:640px) {
	html {
		font-size:80%
	}
}
@media screen and (max-width:320px) {
	html {
		font-size:75%
	}
}

@media (max-width: 1075px) { 
	#tip1 { right: 22.125rem !important; }
	#tip2 {	right: 22.125rem !important; }
	#tip3 { right: 18.625rem !important; }
	#tip4 {	left: 13rem !important;	}
	#tip5 {	left: 18.125rem !important;	}
}

@media (max-width: 1115px) { 
	#bottom-panel:hover {
		z-index:5;
	}
}
@media (min-height: 880px) { 
	#bottom-panel {
		z-index:5;
	}
}