body, html {
    margin:0px;
    padding:0px;
    background-color:#999999;
    height: 100%;
    overflow-x: hidden;
}
.wrapper.active {
    width: 950px;
    margin: 0 auto;
    transform-origin: top left;
}
td, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
    font-size: 12px;
}

.loginform div { padding:5px;}
.logintitle {	font-size: 24px;	font-weight: bold;	color: #003366;}
.loginhead { background-color:#003366; color:white; text-align:right; padding:3px;}
.loginhead A {color:white;}

.machinetitle { font-size:27px; font-family:Georgia, "Times New Roman", Times, serif; color:white;}

thead td {	font-weight:bold;}
A IMG {border:0px;}
INPUT { margin:1px; }
.cal  {width:60px;}
.time  {width:60px; }
.messagebox { border:1px solid #AAAAAA; background-color:#EEEEEE; padding:10px; margin:5px; width:700px; height:auto;}
.messagebox .messagetitel {display:none;}
.messagebox .messagetext DIV { background-image:url(img/tag.gif); background-position:0px 5px; background-repeat: no-repeat; padding-left:10px; } 
#controltable { background-color:#FFFFFF; border:1px solid #333333; border-bottom:0px; border-right:0px; margin-bottom:4px;}
#controltable .controlrow TD {border:1px solid #333333; border-top:0px; border-left:0px;}
.navi INPUT {width:27px; }
#colortag {width:10px; height:10px; float:left; margin-right:3px; margin-top:2px;}
.daterangeinfo { display:inline-block; width:30px;}
#uhr { position:absolute; left:0px; top:0px; height:auto; border:1px solid #CCCCCC; padding:3px;background-color:#EEEEEE; }
#selector { position:absolute; width:200px; height:7px; z-index:1; left: 0px; top: 0px; overflow:hidden; border:1px solid #AAAAAA; background-color:#66CCFF; 
			filter: alpha(opacity=50); -moz-opacity:0.5; }
.ui-datepicker-trigger { vertical-align:middle; margin-left:3px}

.txt { width:50px;}
.txt1 { width:80px;}
.sel1 {width:250px;}

.tab  TD { border-top:1px solid; border-left:1px solid; }
.tab {border-bottom:1px solid; border-right:1px solid; }
.tab TD, .tab { border-color:#DDDDDD;}

.maschine {  background-color:#FFFFFF; padding:5px; border:1px solid #333333; margin-bottom:10px;}
.maschine IMG  {vertical-align:middle;}
.zoommaschine { background-color:#FFFF66; padding-left:0px;  margin-top:2px;}
.zoommaschine A {margin:5px; text-decoration:none; color:black; border:1px double #003366; background-color:#C6CCDD; padding:5px;}
.zoommaschine IMG {}
.maschine .summary { display:inline; margin-left:15px;}

.teiletabelle { width:100%; border:1px solid #EEEEEE; background-color:#FFFFFF;}
.teiletabelle TD { text-align:right;}
.teiletabelle THEAD TR { background-color:#003366; color:white;}
.teiletabelle TFOOT  TR { background-color:#CCCCCC}
.teiletabelle .c2,.teiletabelle .c1 { width:100px;}
.teiletabelle .rb { border-right:1px solid #003366;}
.teiletabelle .rbleft { border-left:1px solid #003366;}
.teiletabelle .rbl { border-right:1px solid #CCCCCC;}
.teiletabelle .good { background-color:#bcffa8;}
.teiletabelle .bb TD { border-bottom:1px solid #CCCCCC;}
.gray { background-color:#EEEEEE;}
.left { text-align:left; }

.cliperrortag { position:absolute; height:17px; width:44px;  text-align:right; padding:2px; border:1px solid #888; background:rgba(255,255,255,0.75)}
#ce1{ left:81px; top:102px;}
#ce2{ left:81px; top:118px;}
#ce3{ left:13px; top:64px;}
#ce4{ left:13px; top:80px;}
#ce5{ left:115px; top:6px;}
#ce6{ left:115px; top:22px;}
#ce7{ left:178px; top:45px;}
#ce8{ left:178px; top:61px;}

#ce2.labex{ left: 150px; top: 36px;}
#ce4.labex{ left: 46px; top: 106px;}
#ce6.labex{ left: 69px; top: 51px;}
#ce8.labex{ left: 137px; top: 95px;}



/* Allgemein */
.shadow { box-shadow:1px 4px 4px #777 }
.rounded { border-radius:8px; }
.clear { clear: both}

/* Zeitleiste NEU */
.datalog-sheets { position:relative }
.datalog-sheet { position:absolute; border:1px solid #666; width: 913px; background:white; box-shadow:1px 1px 4px darkgray; }
.timeline-timeinfo { position:absolute; bottom:6px; left:0px; border:1px solid darkgray; background-color:#DDD; width:870px; height:16px; padding:4px; display:none }
.timeline { position:relative; }
.hover-highlight { position:absolute; left:100px; top:10px; height:130px; width:1px;border:2px solid rgba(0,0,0,0.30); border-top:0px; border-bottom:0px; display:none; z-index:3}
.hover-highlight .marker {display:none; position:absolute; width: 9px; height: 7px; left:-2px; bottom:-2px; background-image:url(../img/up.png); }
.hover-highlight.ios { border:0px}
.hover-highlight.ios .marker { display:inherit}

.tl-lupe { position:absolute;top:0px; left:50%; margin-left:-34px; margin-top:20px; border:1px solid #555555; cursor:pointer; z-index:5; width: 60px; height:60px}
.tl-selection-overlay { position:absolute; top:9px; left:33%; width:33%; height:130px; background-image:url(../img/alph50.png); background-repeat:repeat;
				text-align:center; display:none; z-index:4 }
.tl-zoom-button { position:absolute; left:50%; padding:7px; top:18px; margin-left:-13px; cursor:pointer; z-index:11; border:1px solid darkgray; border-radius:5px; background-color:rgba(255,255,255,0.7) }
.tl-zoom-cancel { position:absolute; left:50%; padding:8px; bottom:12px; margin-left:-13px; z-index:11; border:1px solid darkgray; border-radius:5px;  background-color:rgba(255,255,255,0.7) }

.tl-slider { position:absolute; top:-3px; cursor:pointer; z-index:10; }
.tl-slider-left { left:-47px; padding-left:30px; padding-right:10px;}
.tl-slider-right { right:-47px; padding-right: 30px; padding-left:10px }
.tl-zoom-timeflag { position:absolute; top:2px; height:16px; border:1px dotted black; width:60px; background-color:darkgray; color:white; text-align: center}
.tl-zoom-timeflag-from { margin-left:-65px}
.tl-zoom-timeflag-from.alt { margin-left:3px;}
.tl-zoom-timeflag-to { right:0px; margin-right:-65px; }

.datalog-sheet .pie { float:left;}
.datalog-sheet .production { float:right; margin:3px; width: 420px}
.datalog-sheet .production.full {float:left; width: 100%}
.datalog-sheet .error-summary {padding-top:15px; clear:both; margin-bottom:25px }

.error-detail-table { margin-left:10px }
.analyze-positions { float:left; border-right:1px dotted gray;  width:30%; padding-left:3px}
.analyze-sequence { float:right; top:0px; width: 69%}

.zoomTimeFlag { position:absolute; border:1px dotted #AAAAAA; padding:2px; background-color:white; display:none;}
#errorDetailFlag { display:none; position:absolute; top:0px; left:0px; width:auto;  border:1px solid #CCCCCC; padding:3px; cursor:crosshair; max-width:200px; background-color:white;}
#errorPointer { display:none; position:absolute; width:9px; height:7px;}
#ui-datepicker-div { z-index:100000;}
.hno { color:#AAAAAA }

.overview { position:relative; border: 1px solid gray; margin:10px; background-color:white; padding:10px; box-shadow:1px 1px 4px black; width:880px}
.overview .searchbox { position:absolute; right:20px; top: 30px;}
.overview .search-hidden { display:none }
.overview TABLE { width:100%; border-collapse:collapse;}
.overview TABLE TH {text-align: left}
.overview TABLE TD { padding:3px; }
.overview .c0 { padding-left:10px; width:16px}
.overview .cc { text-align:right; padding-right:10px; width:30px; color:steelblue}
.overview .incat { display:none}
.overview .incat {}
.overview H1 {font-size:1.7em; color:#555; margin-bottom:0px }
.overview .kunde_header { background:url(../images/sys.png) no-repeat left 4px; padding-left:20px; height:20px; cursor:pointer;
				font-weight: bold; color:#555; padding-top:5px; margin-bottom:6px; margin-top:12px }
.overview .kunde_header.open { border-bottom:1px solid #ccc; }
.overview .category_header { background:url(../images/category.png) no-repeat 8px 4px; padding-left:28px; 
				font-weight: bold; color:#555; padding-top:5px; margin-bottom:6px; margin-top:0px; cursor:pointer }
.overview .c3 I { color:#555}
.overview td.cp {display:none }
.overview td.c3 { width:150px }
.clocklate { vertical-align:middle }
.overview A { text-decoration: none; color:black}
.langselect {
	text-align:left;
	padding-left:10px;
}
.langselect .btnlangselect {
	position:relative;
	border:1px solid #fff;
	padding:3px 8px;
	width:75px;
	border-radius:4px;
	background:#444;
	box-shadow:0px 0px 4px #fff;
	cursor:pointer;
}
.langselect .btnlangselect:hover {
	box-shadow:0px 0px 8px #fff;
}
.langselect .menu {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	border-radius:4px;
	background:#444;
	border:1px solid #fff;
	display:none;
}
.langselect .menu a {
	display:block;
	padding:5px;
	text-decoration:none;
}
.langselect .menu a:hover {background:#555}
.langselect dd {}

.servicebtn { width: 16px}

.jetstatcon {
	width:300px;
	height:150px;
	border:1px solid #888;
	box-shadow:1px 1px 4px #777
}
.ui-datepicker{z-index: 99 !important}

/* Neues Layout Startseite */
.machines-table {
    margin-top: 15px;
    display: block;
}
.div-customer {
    margin-top:5px;
    margin-bottom:10px;
}
.customer-header {
    margin-bottom: 5px;
    font-size:1.2em;
    padding-bottom:3px;
    cursor:pointer;
}
.div-customer.open .customer-header {
    border-bottom:1px solid lightgray;
}
.div-plant {
    margin:10px 0px 15px 20px;
    display:none;
}
.div-customer.open .div-plant {
    display:block;
}
.plant-header {
    font-size:1.2em;
    cursor:pointer;
}
.plant-header img {
    vertical-align: top;
}
.div-machine {
    align-items: center;
    justify-content: flex-start;
    margin: 10px 0px 5px 20px;
    display:none;
}
.div-plant.open .div-machine {
    display:flex;
}
.div-machine .machine-icon {
    width:20px;
}
.div-machine .machine-link {
    min-width:200px;
    flex:1;
}
.div-machine .machine-customer {
    width:120px;
    display: none;
}
.searching .div-machine .machine-customer {
    display:block;
}
.div-machine .machine-plant {
    width:100px;
    display:none;
}
.searching .div-machine .machine-plant {
    display:block;
}
.div-machine .machine-type {
    width:150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}
.div-machine .machine-cycle {
    text-align:right;
    width:70px;
    margin-right:10px;
}
.div-machine .machine-updateinfo {
    width:150px;
    margin-left:auto;
}
.div-machine .machine-service {
    text-align:right;
    width:50px;
    margin-left: auto;
}
.searching .plant-header , .searching .customer-header {
    display:none;
}
.searching .div-plant , .searching .div-customer {
    margin:0;
}