html, body {
	font-family: "Avenir Next", Helvetica, Tahoma, sans-serif;
	font-size: 11pt;
	background-color: #FFF;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	-ms-touch-action: none; 
	touch-action: none; /* Direct all pointer events to JavaScript code, MS Edge */
}

.header {
	height: 5em;
	text-align: left;
	padding-left: 0.5em;
	background: linear-gradient(to bottom, #e8e8e8 0%,#ffffff 10%,#f6f6f6 50%,#e1e1e1 90%,#e8e8e8 100%);
	display: table;
}

.header>div {
	display: table-cell;
	vertical-align: middle;
}

.navigationbar {
	height: 3em;
	background-color: #d8d8d8;
	display: table;
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.navigationbar > div {
	display: table-cell;
	vertical-align: middle;
	height: 3em !important;
	white-space: nowrap;
}
.navigationbar > div:last-of-type {
	padding-right: 1.5em;
	width: 100% !important;
}

.button-control-group, .button-control {
	height: 28px;
	margin-left: 1.5em;
	white-space: nowrap;
}
.button-control-group.disabled, .button-control.disabled {
	/*opacity: 0.4;*/
	color: #aaa;
}

.button-control-group > div {
	display: inline-block;
	border: 1px solid #f8f8f8;
	border-right-width: 0;
	transition: all 0.3s;
}
.button-control-group > div:first-child {
	border-top-left-radius: 7px;
	border-bottom-left-radius: 7px;
}
.button-control-group > div:last-child {
	border-right-width: 1px;
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
}
.button-control-group span {
	display: block;
	cursor: default;
	min-width: 58px;
	height: 28px;
	font-size: 28px;
	line-height: 28px;
	background-repeat: no-repeat;
	background-position: center;
}
.button-control-group > div:hover {
	background-color: #C8E8ff;
	color: #367ebd;
	text-shadow: 0px 0px 4px #367ebd;
}
.button-control-group > div.disabled {
	color: #aaa;
}
.button-control-group > div.disabled:hover {
	color: #aaa;
	background-color: transparent;
	text-shadow: none;
}
.button-control-group > div.selected.disabled:hover {
	color: #aaa;
	background-color: #e8e8e8;
	text-shadow: none;
}

.button-control > div {
	min-width: 44px;
	height: 28px;
	border-radius: 7px;
	border: 1px solid #f8f8f8;
	background-color: #e8e8e8;
	padding: 0 0.5em;
	transition: all 0.3s;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.button-control {
	cursor: default;
	text-align: center;
	line-height: 30px; 
}

.button-control.lefttext {
	text-align: left;
}

.button-control span {
	line-height: 28px;
	height: 28px;
	background-repeat: no-repeat;
	background-position: center;
}
.button-control.disabled span {
	opacity: 0.4;
}


.button-control-group > div:hover, .button-control-group > div.selected:hover,
.button-control > div:hover, .button-control.selected > div {
	background-color: #c8e8ff;
}

.button-control-group > div.selected, .button-control-group .disabled > div.selected:hover,
.button-control.disabled > div:hover, .button-control.disabled.selected > div {
	background-color: #e8e8e8;
}
.button-control-group.disabled > div:hover {
	background-color: transparent;
}


.pretty-split-pane-frame {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: #CCC;
}

.pretty-split-pane-frame > .split-pane > .split-pane-divider.dragged.touch {
	background: blue;
	opacity: 0.25;
}

.pretty-split-pane-component-inner {
	background: white;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.clear {
	clear: both;
}

.no-transition {
	transition: none !important;
}

.blurred {
    -webkit-filter: blur(4px) grayscale();
    -moz-filter: blur(4px) grayscale();
    -ms-filter: blur(4px) grayscale();
    filter: blur(4px) grayscale();
}

#tiramisu-load-overlay {  
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	cursor: progress;
	text-align: center;
}

#tiramisu-load-overlay div.frame {
	position: absolute;
	top: 40%;
	left: 50%;
	margin-left: -7.5em;
	margin-top: -0.5em;
	width: 15em;
	height: 4em;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(200, 200, 200, 0.8);
	border-radius: 1em;
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px 2px;
	font-size: 24pt;
	vertical-align: middle;
	line-height: 4em;
	transition: transform 0.3s, opacity 0.3s;
	transform: scale(0.1);
	opacity: 0;
}
#tiramisu-load-overlay.presented div {
	transform: scale(1);
	opacity: 1;
}

#tiramisu-load-overlay span {
	line-height: inherit;
	font-size: 48pt;
	padding-right: 6pt;
}

#tiramisu-panel-group {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
	overflow: hidden;
	visibility: hidden;
}
.tiramisu-panel {
	position: absolute; 
	box-sizing: border-box;
	overflow: hidden; 
	pointer-events: none;
	font-family: serif;
	font-size: 10pt;
	padding: 0;
	margin: 0;
	border-style: solid;
}
.tiramisu-panel p {
	margin: 0;
	padding: 0;
}
.tiramisu-panel-measure {
	position: absolute; 
	font-family: serif;
	font-size: 10pt;
	visibility: hidden;
	padding: 0;
	margin: 0;
	left: 0;
	top: 0;
}

/* AlertService */
#tiramisu-alert-overlay {  
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	visibility: hidden;
}
#tiramisu-alert-overlay > article {
	position: absolute;
	top: 40%;
	left: 50%;
	margin-left: -20em;
	width: 40em;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid white;
	border-radius: 1em;
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px 2px;
	font-size: 11pt;
	vertical-align: middle;
	padding: 3em 2em 2em 2em;
	transition: transform 0.3s, opacity 0.3s;
	transform: scale(0.1);
	opacity: 0;
}
#tiramisu-alert-overlay.presented > article {
	transform: scale(1);
	opacity: 1;
}
#tiramisu-alert-overlay > article > div:first-child {
	display: table-row;
}
#tiramisu-alert-body {
	display: table-cell;
	width: 34em;
}
#tiramisu-alert-body > div {
	max-height: 25em;
	overflow: auto;
}
#tiramisu-alert-caption {
	background-color: rgb(54,126,189); 
	color: white;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	border-radius: 1em 1em 0 0;
	text-align: center;
	line-height: 2em;
	height: 2em;
}
#tiramisu-alert-caption.red {
	background-color: rgb(192,30,30); 
}
#tiramisu-alert-caption > span {
	font-size: 1.25em;	
}
#tiramisu-alert-icon {
	display: table-cell;
	width: 5.5em;
	vertical-align: middle;
}
#tiramisu-alert-icon > span {
	font-size: 4em;
	color: rgb(54,126,189);
}
#tiramisu-alert-icon > span.red {
	color: rgb(192,30,30);
}
#button-dismiss-alert {
	width: 8em;
	margin: 1em auto 0 auto;
}
#button-dismiss-alert > div {
	font-size: 1.25em;
}

.activity-indicator {
	height: 40px;
	width: 40px;
	background-color: rgb(235, 235, 235);
	border-left: 4px solid rgb(235, 235, 235);
	border-right: 4px solid rgb(235, 235, 235);
	border-bottom: 4px solid rgb(235, 235, 235);
	border-top: 4px solid rgb(120, 120, 120);
	border-radius: 100%;
	-webkit-animation: activity-animation .8s linear infinite;
	-moz-animation: activity-animation .8s linear infinite;
	-o-animation: activity-animation .8s linear infinite;
	animation: activity-animation 0.8s linear infinite;
}
.activity-indicator div {
	height: 32px;
	width: 32px;
	background-color: #89c3eb;
	border-left: 4px solid rgb(235, 235, 235);
	border-right: 4px solid rgb(235, 235, 235);
	border-bottom: 4px solid rgb(235, 235, 235);
	border-top: 4px solid rgb(120, 120, 120);
	border-radius: 100%;
	-webkit-animation: activity-animation-inner .6s linear infinite;
	-moz-animation: activity-animation-inner .6s linear infinite;
	-o-animation: activity-animation-inner .6s linear infinite;
	animation: activity-animation-inner 0.6s linear infinite;
}

@-webkit-keyframes activity-animation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes activity-animation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}
@-o-keyframes activity-animation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(360deg);}
}
@keyframes activity-animation {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
@-webkit-keyframes activity-animation-inner {
	from {-webkit-transform: rotate(360deg);}
	to {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes activity-animation-inner {
	from {-moz-transform: rotate(360deg);}
	to {-moz-transform: rotate(0deg);}
}
@-o-keyframes activity-animation-inner {
	from {-o-transform: rotate(360deg);}
	to {-o-transform: rotate(0deg);}
}
@keyframes activity-animation-inner {
	from {transform: rotate(360deg);}
	to {transform: rotate(0deg);}
}

div.powered-by-emscripten {
	width: 16em;
	height: 5em;
    background: url(powered_by_emscripten.svg) center no-repeat;
    background-size: auto 160%;
}