* {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  font: normal 12px Arial, Helvetica, sans-serif;
}

body {
	/*font: normal 10pt Tahoma, Arial, Helvetica, sans-serif;*/
	color: black;
	width: 100%;
	height: 100%;
	background-color: #C3C3C3;
	cursor:default;
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
  overflow: hidden;
}


/*
*    Schmale Linie oben... 
*/

header {
  position: absolute;
	top:0px;
	width:100%;
	height:4px;
	background:#F60 linear-gradient(#ff6d15, #FF6000, #f15b00 95%, #dd5401);
	box-shadow:2px 2px 5px black;
  z-index: 100;
}

/*
*    Anzeige der Zustände oben links
*/

#config {
  position: absolute;
  right: 0px;
  top: 7px;
  width: 700px;
  z-index: 10;
}

#config header {
  position: relative;
  display: block;
  height: 60px;
  box-shadow: none;
}

#config header div.left {
  width: 450px;
  height: 100%;
  padding: 5px 5px;
  float: left
}

#config header div.right {
  width: 240px;
  height: 100%;
  float: left;
}

#config header div.right table {
	height: 100%;
}

#config header div.right table td div,
#inputs div.inp-bottom table td div {
  line-height: 45px;
  text-align: center;
  background:#F60 linear-gradient(#ff6d15, #FF6000, #f15b00 95%, #dd5401);
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.4), -1px -1px rgba(255,255,255,0.4);
  cursor: pointer;
}

#inputs div.inp-bottom table td div {
  width: 80px;
}

#config header div.right table td div.btn,
#inputs div.inp-bottom table td div.btn {
  height: 45px;
  background-repeat: no-repeat;
  background-position: center;
}

#config header div.right table td div.select {
  background-color: #FF9758;
  box-shadow: -1px -1px rgba(0,0,0,0.4), 1px 1px rgba(255,255,255,0.4);
}

#config header label {
  color: black;
  display: inline-block;
  width: 120px;
  font-size: 16px;
}

#config section {
  display: block;

}

#config input {
  color: black;
}

#config input,
#config select option {
  color: black;
}

#config input.fehler,
#config select.fehler {
  color: red;
}


#sconfig,
#nconfig {
  height: 25px;
  text-align: center;
  font: normal 18px Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}

#config div.right #btn_back {
	background-image: url("img/ef_back_pic.png");
}

#config div.right #btn_bottom {
	background-image: url("img/ef_bottom_pic.png");
}

#config div.right #btn_exit {
	background-image: url("img/ef_exit_pic.png");
}

#inputs div.inp-bottom #btn_set {
	background-image: url("img/ef_config_pic.png");
}

#inputs div.inp-top,
#inputs div.inp-middle {
  width: 100%;
  height: auto;
  padding: 8px 0px 8px;
  float: left;
}

#inputs div.inp-top {
  border-bottom: 2px groove #FF6600;
}

#inputs div.inp-bottom {
  width: 100%;
  /*display: block;*/
  height: 60px;
  /*box-shadow: none;*/
  border-top: 2px groove #FF6600;
}

#inputs div.inp-top-left,
#inputs div.inp-top-center,
#inputs div.inp-top-right,
#inputs div.inp-col1,
#inputs div.inp-col2,
#inputs div.inp-col3,
#inputs div.inp-col4 {
  width: 25%;
  height: 100%;
  padding: 3px 3px 3px;
  float: left;
}

#inputs div.inp-top-left {
  width: 18%;
}
#inputs div.inp-top-center,
#inputs div.inp-top-right {
  width: 38%;
}

#inputs div.inp-left {
  border-right: 2px groove #FF6600;
}

#inputs div label {
  clear: both;
  width: 60px;
  display: block;
  float: left;
  padding: 3px;
  margin-bottom: 2px;
}

#inputs div.inp-top-left label {  width: 40px;  }
#inputs div.inp-top-center label {  width: 70px;  }

#inputs div input,
#inputs div select {
  display: block;
  float: left;
  padding: 1px;
}

#inputs div.inp-top input,
#inputs div.inp-middle input,
#inputs div.inp-bottom input {
  width: 60px;
}

#inputs div.inp-top select {
  width: 180px;
}

#inputs div.inp-left select,
#inputs div.inp-right select {
  width: 60px;
}

#inputs div input:focus, 
#inputs div textarea:focus,
#inputs div select:focus {
    background-color: #FF9758;
}

#inputs div.inp-bottom table {
  width: 100%;
  height: 100%;
  font: normal 16px Arial, Helvetica, sans-serif;
}

#inputs div.inp-bottom table td {
  width: 43.5%;
  text-align: center;
  font: normal 16px Arial, Helvetica, sans-serif;
}





/*
*    Anzeigebereich Grafik
*/

.view {
  position: absolute;
  left: 0px;
  top: 200px;
	width: 100%;
	height: calc(100% - 200px);
}

.view .station,
.view #img_euro {
	position: absolute;
	width: 100%;
	height: 100%;
  
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	background-clip: content-box;
}

.view #img_euro {
	background-image: url("img/ef_back.png");
}

.view svg {
  position: absolute;
	width: 100%;
	height: 100%;
  fill: rgba(0,0,0,0.0);
  stroke: #00ff34; /*#00ffff;*/
  stroke-width: 1.5;
  stroke-miterlimit: 10;
}

svg .hotspot {
  cursor: pointer;
}

svg .select {
  stroke: #FF0000;
}


.popup {
  z-index: 50;
  
  background-color: #222222;
  border: 3px solid #FF6600;
  color: white;box-shadow:2px 2px 5px black;
}

.popup h1 {
  height: 36px;
  font-size: 12pt;
  font-weight: bold;
  text-align: center;
  color: black;
  padding: 10px 0px;
  background:#F60 linear-gradient(#ff6d15, #FF6000, #f15b00 95%, #dd5401);
}

.popup div {
  height: calc(100% - 30px);
  overflow-y: hidden;
}

#current {
  position: absolute;
  top: 7px;
  left: 0px;
  width: 700px;
  height: auto;
  min-height: 0px;
}

#current table {
  width: 100%;
  border-collapse: separate;
}

#current th {
  height: 30px;
  color: black;
  font-weight: bold;
  background:#F60 linear-gradient(#ff6d15, #FF6000, #f15b00 95%, #dd5401);
}

#current table tr select {
  width: 100%;
  background: none;
  color: white;
  border: none;
}

#current table tr select option {
  background: #aaaaaa;
  color: black;
}

#current table tr.fehler select {
    color: red;
}

#current td:nth-child(3),
#current td:nth-child(4) {
  padding-left: 5px;
}

#current td:nth-child(1),
#current td:nth-child(2) {
  width: 30px;
  text-align: center;
}

#current td:nth-child(3) {
  width: auto;
  text-align: left;
}

#current td:nth-child(4) {
  width: 90px;
  text-align: left;
}

#current td:nth-child(5),
#current td:nth-child(6) {
  width: 150px;
  text-align: left;
}

#current td:nth-child(7) {
  width: 15px;
  background-color: #FF9758;
  /*background:#F60 linear-gradient(#ff6d15, #FF6000, #f15b00 95%, #dd5401);*/
  border-radius: 2px;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.4), -1px -1px rgba(255,255,255,0.4);
  cursor: pointer;
}

#current td:nth-child(7):hover {
  background:#F60 linear-gradient(#ff6d15, #FF6000, #f15b00 95%, #dd5401);
}

#current input {
  width: 150px;
  background: #BBBBBB;
  border: none;
  padding-left: 5px;
  text-align: center;
}

#current tr td {
  cursor: pointer;
}

#current tr:nth-child(odd) {
  background-color: #333333;
}

#current tr.fehler,
#current tr.fehler input {
    color: red;
}

#current tr.fehler input {
    background: #ffa3a3;
}

#current table tr.select {
  background-color: rgba(255,96,0,0.5);
}



#protokol {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 700px;
  height: 100px;
  min-height: 100px;
  overflow-y: scroll;
}

#protokol .popup {
  height: 100%;
}

#protokoltext {
  height: auto;
}

.hide {
  display: none;
}

.hide2 {
  display: none;
  visibility: hidden;
  line-height: 0px;
}