
@media print {
	table.menu, .noprint {
		display: none;
	}
	
	.page-break    { display: block; page-break-before: always; }
}

/***********************************************************************
 ** Angaben für Tabellenelemente für scrollbare Tabellen
 *  muss wegen @media am Anfang stehen
 */
@media screen {
	div.thfix {
		clear: both;
		height: 550px;/*TODO*/
		overflow: auto;
	}

	div.thfix tbody {
		height: 500px;/*TODO*/
		overflow: auto;
	}

	div.thfix tbody tr {
		height: auto;
		overflow: visible;
	}

	div.thfix thead tr {
		position: relative;
	}
	
	div.thfix table {
		width: 97%;
	}
	
	html > body div.thfix th.last { /* nur für Browser, die overflow bei tbody unterstützen */
		display: table-cell;
	}
}


h1.anmeldetext {
    color: #9900FF;	
}

div.thfix {
	width: 100%;
}

div.thfix thead {
	display: table-header-group;
}

div.thfix tbody {
	display: table-row-group;
}

div.thfix tfoot {
	display: table-footer-group;
}

div.thfix th.last {
	display: none;
	visibility: hidden;
	width: 13px;
}

/************************************************************************
 ** Allgemein
 */

body {
	background-color: #CCCCFF;
	
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
	text-align: left;
}

/************************************************************************
 ** Angaben für Links
 */
a {
	font-weight: bolder;
	font-variant: normal;
	text-decoration: none;
    color: #333333;
}

a:link {
    color: #000080;
}

a:visited {
    color: #000080;
}

a:hover {
    color: #8000ee;
}

a:focus {
    color: #000080;
}

dl.red {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bolder;
	font-variant: normal;
	text-transform: none;
	color: #333333;
	text-decoration: none;
	background-color: #CC3366;
}
dl.altbg {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bolder;
	font-variant: normal;
	text-transform: none;
	color: #333333;
	text-decoration: none;
	background-color: #AAAAFF;
}

/************************************************************************
 ** Angaben für Tabellen
 */
table {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
	text-align: left;
}

/***********************************************************************
 ** Angaben für Tabellenüberschriften <th>
 */
th {
	color: #FFFFFF;
	background-color: #669999;
	text-align: left;
}

th.turn {
	text-align: right;
}

th.mid, td.mid {
	text-align: center;
}

th.right {
	text-align: right;
}

th.route {
	color: #FFFFFF;
	background-color: #99cc66;
	text-align: left;
}

th.gruen {
	color: #FFFFFF;
	background-color:  #008000;
}

th.rot {
	color: #FFFFFF;
	background-color:  #ff0000;
} 

th.gelb {
	color: #FFFFFF;
	background-color:  #aa8000;
} 

th.blue {
	color: #FFFFFF;
	background-color: #6A8FC6;
	text-align: left;
}

/***********************************************************************
 ** Angaben für Tabellenzeilen <tr>
 */

tr.even, tr.evenSelectable {
	background-color: #D7D8FF;
}

td.even, td.evenSelectable {
	background-color: #D7D8FF;
}

tr.evenSelectable:hover {
    background-color: #9999CC;
    cursor: pointer;
}

tr.evenOver, tr.even.over:hover {
	background-color: #9999CC;
}

tr.odd, tr.oddSelectable {
	background-color: #bbbbbb;
}

tr.oddSelectable:hover {
    background-color: #666666;
    cursor: pointer;
}

tr.oddOver, tr.odd.over:hover {
	background-color: #888888;
}

tr.greyed {
    color: #aaaaaa;
}

tr.fahrtwunsch_fremdfahrt {
    color: #777777;
}

tr.fahrtwunsch_tdimofahrt {
    color: red;
}

tr.gruen {
	color: #008000;
}

tr.bggruen {
	background-color: #00A000;
}

tr.bgrot {
	background-color: #C00000;
}

tr.gelb {
	color: #aa8000;
}

/***********************************************************************
 ** Angaben für Tabellenspalten <td>
 */
td.red {
	color: #ff0000;
}

td.green {
	color: #008000;
}

td.blue {
	color: #000080;
}

td.black {
	color: #000000;
}

td.noSel {
	background-color: #C2C2FF;
}

td.sel {
	background-color: #bb0000;
}

td.bggelb {
	background-color:#FFFF66;
}

td.bgred {
	background-color:#FFB299;
}

tbody tr td.register_selected {
	background-color: #888888;
	border-top-right-radius: 100px;
}

tbody tr td.register_deselected {
    background-color: #cccccc;
    border-top-right-radius: 100px;
}

/***********************************************************************
 ** Angaben für Tabellenelemente für Menüs <table class="menu">
 */
table.menu {
	margin-top: 2ex;
	margin-bottom: 2ex;
}

table.menu tr {
	height: 30px;
}

table.menu td {
	cursor: pointer;
	width: 120px;
	text-align: center;
}

table.menu td.false {
	background-color: #bbbbbb;
}

table.menu td.true {
	background-color: #777777;
}

tbody tr td.menuitemabmelden {background: #CC3366;}

/************************************************************************
 ** Allgemeine Angaben
 */
 
.error, ul.errorMessage, div.errorMessage {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12px;
	color: #ffffff;
	font-weight: bold;
	background-color: #cc3366;
}

.info, ul.actionMessage, div.actionMessage {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12px;
	color: #cc3366;
	font-weight: bold;
}

ul.errorMessage, ul.actionMessage {
	padding-top: 1ex;
	padding-bottom: 1ex;
}

input.button {
	background-color:#b4dcdc;
	color:#000;
	padding: 0px 4px 0px 4px;
	margin-left:3px;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
	border-radius: 4px;
}

input.button[disabled] {
	color:#909090;
}

input[readonly] {
	color:#909090;
}

input.fieldError , div.fieldError , select.fieldError {
	background-color:#ff0000;
	color:#000000;
}

.vertical {
	writing-mode: tb-rl;
	filter: flipv fliph;
}

.text {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
}

.annotation {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 75%;
	font-weight: bold;
}

.FontStyle {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	color: #000000;
	font-weight: bold;
}
/*
Font.wochenende {
	color: #669999;
}*/

img {
	border-style: none;
}


#footer
{
    background:#E1E2FF;
}


#data_container
{
    margin-left:4px;
    padding-top:4em;
}
        
/* #data_container_fixed
{
    position:fixed;
	top:3.8em;
    left:0px;
    right:0px;
    width:100%;
    // min-height:4em;
	// background-color: green;
} */

#header_container
{
    position:fixed;
	top:0px;
    left:0px;
    right:0px;
    width:100%;
}

#header
{
    text-align:center;
    width:100%;
    background:white;
}

/************************
 * Für die Zeitselektoren in FW_Erfassung
 ********/
table.zeitdaten tr td { /* Nicht auswählbare Daten für Werkages, sowie Monatsbeschriftung */
    color: #575656;
}

table.zeitdaten tr td.we { /* Nicht auswählbare Daten für WE-Tage */
    color: #575656;
    background: #C2C2FF;
}

table.zeitdaten tr td.cal_selectable { /* Selektierbare Werktage & Tageszeiten */
    color: #000080;
    background: #C2C2FF;
}

table.zeitdaten tr td.cal_selectable_we { /* Selektierbare WE-Tage */
    background: #C2C2FF;
    color: #669999;
}

table.zeitdaten tr td.sel { /* Selektierte Werktage / Uhrzeiten */
    background-color: #bb0000;
    color: #000080;
}

table.zeitdaten tr td.sel_we { /* Selektierte WE-Tage */
    background-color: #bb0000;
    color: #669999;
}

.filter_headline {
	white-space: nowrap;
	position: relative;
	white-space: nowrap;
}

.filter_div {
	display: none;
	position: absolute;
	border: 3px solid #B2314D;
	min-width: 100px;
	padding:4px;
	margin:0px;
	border-radius: 8px;
	background: #D9D5D5;
	box-shadow:10px 10px 6px #656565; 
}

.filter_div_arrow {
	position: relative;
	top: -14px;
	display: block;
	margin: 0 auto
}

.tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
    visibility: hidden;
    /* width: 120px; */
    background-color: #666;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px 5px 5px;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
/*
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}*/

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


@media only screen and (min-width: 200px) and (max-width: 600px) {
 
	body {
  		padding-left: 5px;
	}
   
	.betreiberlogo img{
		width: 65%;
    	margin-left: auto;
    	margin-right: auto;
    	display: block;
   }
   
   .canceledRouteTable {
   		width: 100%;
   		font-size: initial;
   }
  
  .input_label {
  	font-size:20px;
  }
  .input_submit {
  	width:100%
  }
  
  #deleteRoute_cause {
  	width: 70%;
  }
  
  #deleteRoute_go {
  	    width: 25%;
  }
}

