/****************************************
  ==== RESETS
****************************************/
html,body,div,canvas { margin: 0; padding: 0; }
var { font-style: normal }
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear { display: inline-table; clear: both; }
a:focus { outline:0; }

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

body,h1,h2,h3,h4,h5,button { font-family: AzoSans-Light,"Segoe UI","Open Sans",sans-serif !important; }

html, body { width: 100%; height: 100%; overflow: hidden; }
#webgl { background: #41587C; }
#canvas { position: absolute; top: 0; left: 0; margin: 0; z-index: 1; cursor: cell; }
#guru { color:#fff; text-align:center; display:table; text-shadow:3px 3px 1px rgb(0, 0, 0); height:100%; }
#guru>div { display: table-cell; vertical-align: middle; padding:1rem; }
#guru img { filter: drop-shadow(3px 3px 1px #000); padding: 0 1rem; margin-bottom:1rem; max-width:75%; }

.bg-transparent{ background:0 0!important }
.p { display:block; margin:0.925rem 0; }

.notify[data-notify-position="top-center"] {
	min-width: 250px;
	max-width: 22rem;
}
.notify.help {
	max-width: 33rem !important;
}
.notify [data-notify="progressbar"] {
	margin-bottom: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
}
.hint, .hint2, .notify, #busy {
	z-index: 10000 !important;
}
.image-overlay {
	z-index: 3;
}

#busy {
	position: fixed;
	top: 0; left: 0;
	height: 100%; width: 100%;
	text-align: center;
	padding: 6.25rem;
	display: none;
	cursor: wait;
}

#dialog {
	background: rgba(255, 255, 255, 0.95);
	height: 440px !important;
	margin-top:-1rem;
}
#dialog > .grid {
	max-width: 1200px;
	margin: 0 auto;
	width: 99%;
}
#dialog section {
	height: 400px;
	overflow: auto;
}
#dialog menu {
	height: 400px;
	padding-right: 2.12765%;
	border-right: 2px solid rgb(0, 106, 179);
	margin-left: -1rem;
	overflow: hidden;
}
#dialog menu .button {
	width: 74%;
	min-width: 260px;
	font-size:17px;
	height: 37.5px;
}
#dialog menu .button {
	width: 74%;
	min-width: 264px;
	font-size:17px;
	height: 37.5px;
}
#dialog menu .button > .icon {
	font-size: inherit;
	width: 37.5px;
	padding: 10px;
}
#dialog menu > img {
	position: absolute; left: 1em; max-height: 150px; max-width:33.3%;
}
#dialog menu > .group-of-buttons { 
	margin-top: 176px;
}
#dialog menu > .credit {
	position:absolute;
	width: 10rem; height: 2rem;
	left: -3rem; bottom: 4.3rem;
	font-size: 80%;
}
#dialog .resume, #dialog .firststart {
	display:none;
}
#dialog .tile-container>a {
	float: none;
	overflow: hidden;
	color: #fff;
	display: inline-block;
	margin: 1rem;
}
#dialog .tile-label {
	left:0 !important;
	right:0 !important;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 6px 0;
	color: #000;
	font-size: 17px;
}
#dialog .element-selected .tile-label {
	margin-bottom: 8px;
	padding: 2px 0;
}
#dialog .slide>.image-format-square>.frame>div {
	width: auto; height: 80%;
	background-size: cover; background-position: center;
}
#dialog .slide-over {
	background-color: rgba(0, 114, 198, 0.75);
	font-size: 15px;
}

#selected-preset {
	float: none;
	display: inline-block;
	margin-left: 1rem;
	pointer-events: none;
}
#preset_h {
	width: 18rem;
	margin: auto;
}

.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;
}

.t-menu > li.active > a {
    background-color: #1ba1e2;
    color: #fff;
}
nav .d-menu > li.toolbar {
	height: 2.5rem;
	padding-top: 1px;
}
nav .d-menu > li > a {
	min-width: 13.5rem;
}
.d-menu > li > a[data-hotkey]::after {
	right: 0.8rem;
}

dl.brand-address {
	display: inline-block;
}
dl.brand-address > dt {
	width: 4rem;
}
dl.brand-address > dd {
	margin-left: 5.5rem;
}
dl.brand-address > dt.company {
	height: 2rem;
	width: 100%;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
	margin: 0;
}

.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: auto 100%;
}
.listview-outlook .list-content {
	display: inline-block;
}
.listview-outlook .list-title {
	font-size: 0.875rem;
}
.dataTable thead th {
	background: none !important;
}
.dataTable tbody td:last-child {
	padding: 0 0 0 0.625rem;
}

.compact-button {
	height: 1.7rem;
	padding: 0 0.425rem;
	min-width: 2.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;
}

.text-outline {
	text-shadow: -1px 0px 0px #222, 0px 1px 0px #222, 1px 0px 0px #222, 0px -1px 0px #222;
	color: #eee !important;
}
.text-mono {
	font-family: monospace !important;
}

.hidedisabled button:disabled,
.checkbox.hidedisabled input:disabled,
.checkbox.hidedisabled input:disabled + .check,
.checkbox.hidedisabled input:disabled + .check + .caption {
	display: none;
}

.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;
}
.input-control select {
	-moz-appearance:listbox;
	-webkit-appearance:listbox;
	appearance:listbox;
}

.input-control.number>button {
	padding: 0;
	height: 1.0625rem;
	width: 1.25rem;
	font-size: 0.6rem;
}
.input-control.number>button.mif-minus {
	bottom: 0; top: auto;
}
.input-control.number>input {
	-moz-appearance: textfield;
}
.input-control.number>input:disabled ~ button {
	display:none;
}

.input-control > small {
	position: absolute;
	top: -1rem;
	right: 0;
}
.input-control.textarea > small {
	top: 0;
}
.input-control.radio {
	margin: 0;
	padding-right: 0.5rem;
}
        
label.cell {
	line-height: 2;
}

#menu-logo {
	width: 3.525rem;
	background-image: url('/img/menulogo.png');
	background-repeat: no-repeat;
	background-size: 75%;
	background-position: 45%;
}
.tile-small .iconic > .tile-label {
	width: 100%;
	left: 0;
	bottom: -3px;
	color: #fff;
	font-size: 10px;
	text-align: center;
}
.tile-small .iconic > .tile-label + .icon {
	margin-top: -20px;
} 

#console {
	position: absolute;
	z-index: 9;
	right: 20rem;
}
#console_input {
	font-family: monospace;
	color: #eee;
	background: #333;
	width: 25rem;
	padding: 6px;
}

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

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

#Colorpicker .row .button.active {
	color: #000;
	box-shadow: 0px 0px 3px 2px #0CF;
}

#project-list td>div {
	word-wrap: break-word;
	width: 12.5rem;
}
#project-list td:last-child, #project-list th:last-child {
	padding: 0.325rem;
	text-align:center;
}

#inspector-tools {
	position: absolute;
	left: -3.9rem;
}
#inspector-close {
	margin-top: -3em;
	margin-right: -10px;
}

#inspector, #environment {
	z-index: 5;
	right: 0;
	top: 3.125rem;
	bottom: 0;
	width: 20.725rem;
	visibility: visible !important;
}

#inspector>div {
	overflow-y: auto;
	height: 100%;
	padding: 1rem 1.25rem 0 1.25rem;
}
#inspector .command-button {
	display: block;
	width: 100%;
	font-size: 1.225rem;
	line-height: 1.25;
	margin: 0.325rem 0;
	padding-right: 0;
}
#inspector .simple-list li, #inspector .numeric-list li {
    color: #EEE;
}
#base_components button.cell {
	padding: 0;
	text-align: left;
	margin-top: 0.275rem;
	font-size: 1rem;
	line-height: 2;
}
#base_components button.cell > img {
	height: 100%;
    margin: -0.225rem 0.25rem 0 0.075rem;
}
#base_components button.cell > .mif-menu {
	font-size: 178%;
	margin: -0.325rem 0.275rem 0
}
#base_components button.cell > .mif-loop {
	font-size: 145%;
	margin: -0.325rem 0.425rem 0;
}

#overlay {
	position: absolute;
	z-index: 5;
	overflow: auto;
	width: 100%;
	top: 3.125rem;
	bottom: 0;
}

.dialog-overlay.default {
	background-color: rgba(240,240,244, 0.7);
	z-index: 1000;
}

#page-preview {
	position: relative;
	right: 10.5rem;
	width: 208mm;
	min-height: 120mm;
	margin: 20px auto 50px;
	padding: 18mm;
	border: 1px solid #ccc;
	background-color: #FFF;
	-webkit-box-shadow: 7px 7px 4px 0px rgba(127, 127, 127, 1);
	-moz-box-shadow: 7px 7px 4px 0px rgba(127, 127, 127, 1);
	box-shadow: 7px 7px 4px 0px rgba(127, 127, 127, 1);
}
#page-preview, #page-preview table {
	font-size: 3.8mm;
}
#page-preview thead, #page-preview tfoot {
	font-size: 4mm
}
#page-preview h2 {
	font-size: 5.6mm;
}

#stocklist .pageheader {
	min-height: 56mm;
}
#stocklist .pageheader.compact {
	min-height: 40mm;
}
#stocklist .fancyimgbtn {
	position: absolute;
	right: 19mm; top: 27.5mm;
	width: 50mm;
}
#stocklist .compact .fancyimgbtn {
	top: 10mm;
}
#stocklist .compact h4 {
	padding-right: 55mm;
}

#stocklist .pagefooter {
	min-height: 50mm;
}
#stocklist .pagefooter .stock-logo {
	position: absolute;
    right: 20mm;
    bottom: 20mm;
	max-height: 48mm;
	max-width: 80mm;
}

#stocklist tbody td, #stocklist th {
	padding: 6px 0 6px 12px;
}
#stocklist tbody td:last-child, #stocklist th:last-child {
	text-align: right;
	padding-right: 12px;
	padding-left: 0;
}
#stocklist tbody tr.base {
	border-top: 1px solid #888;
}
#stocklist tfoot td:last-child {
	text-align: right;
}
#stocklist .sum-rabatt {
	display: inline-block;
	font-weight:normal;
	line-height: 1.75;
	border-bottom: 1px solid;
	margin-bottom: 0.425em;
}
#stocklist table li {
	line-height: 1.5;
}

#stocklist tbody td.promo {
	height:16rem;
	background:url('/img/stocklist_bg.jpg');
	font-size: 120%;
	line-height: 1.5;
	text-align:center;
	padding-left: 12px;
}

#watermark {
	position:fixed; bottom:0.5em; left:0.5em;
	z-index:3; max-height:4.425rem; width:auto;
	opacity:0.6; pointer-events:none;
}

/* OVERRIDES ANIMATIONS - do not hide */
@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}


/* ------------------- THEKEN -------------------- */
#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: rgba(255,255,255,0.66) no-repeat scroll 50% 1rem / 35rem auto;
	top: 3.125rem;
	width: 100%;
	bottom: 0;
	margin: 0;
}
#intro>div {
	position: relative;
}
#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 (max-width: 1075px) { 
	#tip1 { right: 22.125rem !important; }
	#tip2 {	right: 22.125rem !important; }
	#tip3 { right: 20.125rem !important; }
	#tip4 {	left: 18.125rem !important;	}
	#tip5 {	left: 18.125rem !important;	}
}

@media (max-width: 1315px) { 
	#bottom-panel:hover {
		z-index:5;
	}
}