/* Allgemein */

@media print {
  .menu {
    display: none;
  }
}

@media print {
  .header {
    display: none;
  }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background-color: #f4f4f4;
  max-width:100%;
  background-image: url(../images/steel_bg.jpg);
  background-repeat: repeat;
}

a {
  color: #000;
}




.ichbins {
  color: red;
}
/* Tooltip*/

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Kreis */
#kreis {
    background-color: gray;
    position: relative;
    width: 12px;
    height: 12px;
    border: 1px solid #333;
    text-align:center;
    border-radius: 4px;
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.5);
    margin: 2px;
}
/* header */


.header {
  background-color: slategray;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li a {
  display: block;
  color: white;
  padding: 8px 12px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
  text-align:right;
}

.header li.selected {
  background: darkgray;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: gray;
}

.header .logo {
  display: block;
  float: left;
  color: white;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
  /* vertical-align:middle; */
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  /* float: right; */
  padding: 28px 10px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: none;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 1000px) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 7px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}


.main {
    padding-top:59px;
}


.table-top {
	display: table;
	border: 1px solid silver;
	border-collapse:collapse;
	width: 100%;
	background:#777;
}

.table-top-row {
	display: table-row;
}

.table-top-cell {
	font-weight: bold;
	display:    table-cell;
	padding: 15px;
	color:#e9e9e9;
}

/* http://css3buttongenerator.com/ */
.table-top-cell a{
	/* display: inline-block; */
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .3em .5em .35em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
    margin: 2px;
	color: #e9e9e9;
	border: solid 1px #555;
	background: #c4c4c4;
	background: -webkit-gradient(linear, left top, left bottom, from(#c4c4c4), to(#616161));
	background: -moz-linear-gradient(top, #c4c4c4,  #616161);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4c4c4', endColorstr='#616161');
}

.table-top-cell a:hover{
	text-decoration: none;
}

.table-top-cell a:active{
	position: relative;
	top: 1px;
}


.table-uebersicht {
	display: table;
	border: 1px solid silver;
	border-collapse:collapse;
	width: 1000px;
	margin: 0 auto;
    /* height: -webkit-fill-available */
}
.table-uebersicht-top-row {
	display: table-row;
	border: 1px solid silver;
	background: #777
}

.table-uebersicht-top-cell {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	width:25px;
	text-align:center;
	vertical-align:middle;
	color:#e9e9e9;
}

.table-uebersicht-top-cell-5 {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	width:5%;
	text-align:center;
	vertical-align:middle;
	color:#e9e9e9;
}

.table-uebersicht-top-cell-10 {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	width:10%;
	text-align:center;
	vertical-align:middle;
	color:#e9e9e9;
}

.table-uebersicht-top-cell-20 {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	width:20%;
	text-align:center;
	vertical-align:middle;
	color:#e9e9e9;
}



.table-uebersicht-row {
	display: table-row;
	border: 1px solid silver;

}

.table-uebersicht-cell-5 {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	width: 5%;
	text-align:left;
	vertical-align:middle;
  background-color: #D4D5D4;
}


.table-uebersicht-cell-10 {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	width: 10%;
	text-align:left;
	vertical-align:middle;
  background-color: #D4D5D4;
}

.table-uebersicht-cell-20 {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	width: 20%;
	text-align:left;
	vertical-align:middle;
  background-color: #D4D5D4;
}

.table-uebersicht-cell-30 {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	width: 30%;
	text-align:left;
  vertical-align:middle;
  background-color: #D4D5D4;
}

.table-uebersicht-cell-name {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	min-width:200px;
	text-align:left;
	vertical-align:middle;
}

.table-uebersicht-cell-tag {
	display: table-cell;
	border: 1px solid silver;
	padding: 1px;
	width:25px;
	text-align:center;
	vertical-align:middle;
}


.table-einzel{
	display: table;
	border: 1px solid silver;
	border-collapse:collapse;
	width: 100%;
    /* height: -webkit-fill-available */
}

.table-einzel-row {
	display: table-row;
	border: 1px solid silver;
}

.table-einzel-cell {
	display: table-cell;
	border: 1px solid silver;
	padding: 5px;
	width:14%;
	text-align:center;
	vertical-align:middle;
}



.table {
	display: table;
	border: 1px solid silver;
	border-collapse:collapse;
	width: 100%;
}

.table-row {
	display: table-row;
	border: 1px solid silver;
}

.table-cell {
	display: table-cell;
	border: 1px solid silver;
	padding: 5px;
	width:14%;
}

/* Tabellenzelle Kalender*/
.table-cell .datum{
  background-color: #c4c4c4;
  text-align:center;
  font-weight:bold;
  padding:2px;
}

.table-cell .ma-verfuegbar{
  color:green;
  margin-top: 1px;
  text-align:center;
  font-size: 0.8em;
  background-color: #c4c4c4;
  padding:2px;
  line-height:1.5em;
  display:block;
}

.table-cell .ma-anzahl{
  color:royalblue;
  margin-top: 1px;
  text-align:center;
  background-color: #c4c4c4;
  padding:2px;
  word-wrap: break-word; 
  word-break: break-all;
}


.table-cell .ma-freie{
  color:green;
  margin-top: 1px;
  background-color: #c4c4c4;
  padding:2px;
  word-wrap: break-word; 
  word-break: break-all;
}

.buttonline{
  background-color: #777;
  text-align:center;
}

.table-cell .va{
  background-color: #d4d4d4;
  margin-top: 2px;
  padding:2px;
  font-size: 12px;
}

.table-cell .keinekst{
  background-color: LightSteelBlue;
  margin-top: 2px;
  padding:2px;
  font-size: 12px;
}


.table-cell .va .personal{
  margin-top: 2px;
  padding:2px;
}

main.main-planung{
    padding-top:59px;
    width:600px;
	font-size:1em;
	margin:auto;     
}

.planung{
  font-size: 1em;
}

span.dropzone{
  color: white;
  width: 12px;
  height: 12px;
  border: 1px solid #333;
  text-align:center;
  border-radius: 4px;
  /* box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.5); */
  margin: 2px;
  padding: 0px 10px;
  background-color:#515b65;
}


.table-cell .va .titel{
  font-weight:bold;
  word-wrap: break-word; 
  word-break: break-all;
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}


.thead {
	font-weight: bold;
	background:#eee;
	text-align:center;
}

/* http://www.color-hex.com/color/708090 */

.form-form{
  max-width:600px;
  margin:0px auto;
  border-radius: 5px;
  /* background-color: #f2f2f2; */
  padding: 1px;
}

.form-container{
  display: table;
  width:100%;
  border-spacing:2px;
}

.form-row{
	display: table-row;
	border: 1px solid silver;
}

.form-25{
    width:25%;
	display: table-cell;
	padding: 5px;
    vertical-align: top;
    background-color: #7e8d9b;
    color:white;
    font-weight:bold;
}

.form-20{
    width:20%;
	display: table-cell;
	padding: 5px;
    background-color: #eee;
}

.form-40{
    width:40%;
	display: table-cell;
	padding: 5px;
    background-color: #eee;
}


.form-33{
    width:33%;
	display: table-cell;
	padding: 5px;
    background-color: #eee;
}


.form-75{
    width:75%;
	display: table-cell;
	padding: 5px;
    background-color: #7e8d9b;
}

.form-100{
    width:100%;
	display: table-cell;
	padding: 5px;
	text-align: center;
    background-color: #7e8d9b;
}

.va_verfuegbar{
    color:#b30000;
    font-size:8px;
}

.form-label{
  font-size: 14px;
}

.form-input{
  font-size: 14px;
  width:-webkit-fill-available;
}

.form-select{
  font-size: 14px;
  width:-webkit-fill-available;
  margin: 3px;
}

.form-textarea{
  font-size: 14px;
  width:98%;
  height:7em;
}

.form-button{
/*    font-size: 0.9em;
    margin: 5px 10px;
    border-radius: 5px;
    background-color: gray;
    padding: 10px 30px;
    box-shadow: 4px 4px 7px 1px rgba(0,0,0,0.5)
*/

	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	margin: 3px 5px;
	width: 110px;
}

.form-button:hover{
	text-decoration: none;
}

.form-button:active{
	position: relative;
	top: 1px;
}

/* Breiten */
.select_halb {
	width: 45%;
}


.select_voll {
	width: 93%;
}

/* Dartellung der Mitarbeiter Kuerzel */

span.ma00 {
    color: white;
    border-radius: 4px;
    background: #004f00;
    margin: 1px;
    padding: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    cursor:grab;
    }

span.ma01 {
    color: white;
    border-radius: 4px;
    background: #993333;
    margin: 1px;
    padding: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    cursor:grab;
    }

/* Farben gray */
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #c4c4c4;
	background: -webkit-gradient(linear, left top, left bottom, from(#c4c4c4), to(#616161));
	background: -moz-linear-gradient(top, #c4c4c4,  #616161);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4c4c4', endColorstr='#616161');
}
.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}


.login-main{
  font-size: 0.9em;
}

.login-form{
  font-size: 0.9em;
  border:1px;
}

.login-container{
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #182730), color-stop(1, #1770bd) );  
  border-radius: 8px;
  padding: 20px;
  position:absolute;
  width:200px;
  height:200px;
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-100px;
  font-size: 0.9em;
}

.login-row{
  font-size: 0.9em;
}

.login-logo{
  text-align:center;
  display:block;
  font-size: 0.9em;
}

.login-button{
  text-align:center;
  display:block;
  font-size: 0.9em;
  padding:15px;
}

.login-label{
    color: ghostwhite;
    margin-top: 15px;
    display: block;
    font-size: 1.1em;
}

.login-input{
  margin-top:2px;
  display:block;
  font-size: 1.5em;
  width:100%;
}


 @media only screen and (max-width: 767px) {
	.table {border:none;}
	
	.table-row,
	.table-cell {
		display: block;
		border: 1px solid silver;
		width:auto;
	}
	
	.table-row { border:none; }
	.thead {display: none; }
	.leer {display: none; }
	
	.form-25 {
	    display: block;
	    width: AUTO;
	    padding: 3px 5px 0px 5px;
	    font-size: 0.7em;
	}    

	.form-75 {
	    display: block;
	    width: auto;
	    padding: 0px 5px 1px 5px;
	}

}