body {
  margin: 0;
  padding: 0;
  
}
@import url(https://fonts.googleapis.com/css?family=Roboto);
a{
    text-decoration:none!important;
}

h1, h2, h3, h4, h5{
    font-family:Roboto;
}


.end{
    border-bottom: solid 1px #ccc;
    height:40px;
}
/*datepicker*/

div.relative {
    position: relative;
    top: 5px;    
    left: 0;
    width: 100%;
    height: 200px;
    border: 3px solid #8AC007 ;
} 

div.absolute {
    position: absolute;
    top: 210px;
    left: 250px;
    width: 1000px;
    height: 100px;
    border: 3px solid #8AC007;
}
div.absolute1 {
    position: absolute;
    top: 310px;
    right: 600px;
    width: 500px;
    height: 150px;
    border: 3px solid #8AC007;
}


DIV.frame1 {
/*So it scrolls with the other frame*/
    position: fixed;
/*This frame will be set OVER the other.*/
    z-index: 1;
/*Again, static width is suggested.*/
    width: 200;
/*Alternatively, you could set bottom: 0; instead of height: 100%;*/
    height: 100%;
/*The position of this frame is "Top Left"*/
    top: 0;
    left: 0;
/*So the text isn't so crammed off to the left...*/
    padding-left: 10;
/*So this frame can scroll*/
    overflow: auto;
}

DIV.frame2 {
/*This frame does not move.*/
    position: absolute;
/*This frame is set BELOW the other*/
    z-index: 0;
/*This frame is "Top Right"*/
    top: 0;
    right: 0;
/*Using the alternative method to fill the screen.*/
    bottom: 0;
/*This is why you should use a static width.  You may set this to 200, but this offers a little space between your "frames"*/
    left: 212;
/*Overflow is not needed here, unless you plan to scroll horizontally.  Even then, it will simply be cosmetic.*/
}

a.btn-center{
    float: right;
    display: block;
    color: #fff;
    background-color: #DF2464;
    border-color: #DF2464;
    margin:0 5px;
    width:20%;
}


a.btn-reset{
	float: right;
    display: block;
 	color: #DF2464;
    background-color: transparent;
    border-color: #DF2464;
    width:20%;
    margin:0 5px;
}

a.btn-center:hover{
	color: #ffffff!important;
	background-color: #880934!important;
    border-color: #46041b!important;
}


a.btn-reset:hover{
	color: #ffffff!important;
	background-color: #DF2464!important;
    border-color: #DF2464!important;
}

a.btn-center:activ{
	color: #ffffff!important;
    background-color: #DF2464!important;
    border-color: #DF2464!important;
}

a.btn-center:focus{
	color: #ffffff!important;
    background-color: #DF2464!important;
    border-color: #DF2464!important;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
	padding:15px;
}

.table > thead > tr > th{
	border-bottom:none;
}

table.angebot{
	
	    text-align: center;
	    color: #b91a69;
}

table.angebot thead{
	font-weight: 800;
    font-size: 15px;
}

table.angebot tr.tag{
	font-size:12px;
}
table.angebot td,
table.angebot th{
	
	border-right:solid 1px #ededed;
}
table.angebot th{
	text-align:center;
}
table.angebot td:last-child,
table.angebot th:last-child{
	border-right:none;
}
table, td, th {
    
    border-collapse: collapse;
    padding: 0.5em;
}

td.check{
	background: #b91a69;
    color: #fff;
}

td.gelb{background:#ffeb3b; color: #607D8B;}
td.gelbn{background:#b37300; color: #ffb837;}
td.rot{background:#f44336; color:#fff;}
td.grun{background:#8bc34a; color:#fff;}
td.lila{background:#673ab7; color:#fff;}
td.blau{background:#2196f3; color:#fff;}

td:hover{
	-webkit-box-shadow:  0px 0px 5px 1px rgba(0,0,0,0.3);
	-moz-box-shadow:  0px 0px 5px 1px rgba(0,0,0,0.3);
	box-shadow:  0px 0px 5px 1px rgba(0,0,0,0.3);
	z-index: 9999;
    position: relative;
    opacity:0.9;
}

td.selected{
	background:#a6a6a6;
	-webkit-box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.48);
	-moz-box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.48);
	box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.48);
}
/*
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	
	table.angebot, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	table.angebot th{
		text-align:center;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
	
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
	
		position: absolute;
	
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	
	td:nth-of-type(1):before { content: "Aussendienst"; }
	td:nth-of-type(2):before { content: "Innendienst"; }
	td:nth-of-type(3):before { content: "Kundendienst"; }
	td:nth-of-type(4):before { content: "Projektleiter"; }
	td:nth-of-type(5):before { content: "Fachstellen"; }
	
}

/*
 * 

 */

@media (max-device-width:480px) {
  .hide-mobile{
  	display:none!important;	
  }
}

@media (min-device-width:480px) {
  .show-mobile{
  	display:none!important;	
  }
}