/* 
 * HTML5 - Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html, body{ height:100%; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; position:relative;}

body { margin: 0; font-size: 13px; line-height: 1.2em;}

body, button, input, select, textarea { font-family: verdana, arial, helvetica, sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

/*
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/
::-moz-selection { background: #666; color: #fff; text-shadow: none; } 
::selection { background: #666; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 4.166666666666666%; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 4.166666666666666%; }

dd { margin: 0 0 0 4.166666666666666%; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

.image-wrapper
{
	position: relative;
}

.scale-image
{
	display: block;
	width: auto;
	max-width: 100%;
}

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; overflow:hidden;}
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; font-family: verdana, arial, helvetica, sans-serif;}

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

/*input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }*/
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: Dirk Doering // sky-netconcept.de
   ========================================================================== */

body{
    background: #000;
	background-size:100%;
    color:#444;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    background: url(../img/bg.jpg) repeat-y;
    /*background: #eee;*/
    background-size: cover;
}

a, a:visited {
    color: #00458C;
    text-decoration: none;
}

a:hover{
    color:#00458C;
    text-decoration:underline;
}

h1{
    color: #fff;
    font-size:16px;
    clear:both;
    width: 96%;
    background: #00458C;
    padding: 6px 2% 6px 2%;
    font-weight: normal;
    text-transform: uppercase;
    margin:0 0 20px 0;
}
.h1nowrap{
    font-size:18px;
	font-weight: bold;
    border-bottom:1px solid #f0f0f0;
    clear:both;
	margin: 5px 0 0 10px;
	padding: 0;	
}

h2{
    color: #555;
    font-size:14px;
    clear:both;
    width: 96%;
    background: #e5e5e5;
    padding: 6px 2% 6px 2%;
    font-weight: normal;
    text-transform: uppercase;
    /*margin:0 0 20px 0;*/
    margin:0 0 10px 0;
}

footer{
    background:none;
    /*position:fixed;*/
    bottom:0;
    clear:both;
    width:100%;
    max-width: 1300px;
    margin: 40px auto 0 auto;
	padding-left: 10px;
}

#footer{    
    clear:both;
    color: #00458C;
    border-top: 2px solid #fff;
    margin: 0;
    text-transform: uppercase;
}

#footer a{    
    color: #00458C;
    text-decoration:none;
}

#footer a:hover{
    text-decoration: underline;
}

.tffLoginBody {    
    color: #FFFFFF;
}
.tffLoginBody #footer{    
    margin-top:10.833333333333336%;
}


/*
 * Login Form
 *
 */

.logo{
    margin:0 0 10%;
}

.loginForm{
    background:#fff;
    padding:5.208333333333334%;
    margin:10% auto 0;
    overflow:hidden;
	min-height:280px;
    /* width:240px; */
	min-width:240px;
    border: 1px solid #ccc;
}

.loginForm label{
    clear:both;
    display:block;
    font-size:1.4em;
    font-weight:bold;
    font-style:italic;
    color:#3b6b90;
    line-height:120%;	
}

.logincountrytable	{
    padding:2%;
	width:200px; 
	margin-bottom:20px; 
	border-collapse:separate;
    background:#f3f3f3;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:3px solid #e8e8e8;
}

.logincountrylabel	{
    font-size:1.4em;
    font-weight:bold;
    font-style:italic;
    color:#3b6b90;
    line-height:120%;	
	min-width:150px;
}

.loginForm input{
    background: #fff;;
    border: 1px solid #ccc;
    font-size:18px;
    margin:0 20px 20px 0;
    padding: 6px 2% 6px 2%;
    width: calc(96% - 2px);
}

.loginForm input.submit{
    background: #00458C;
    color:#fff;
    font-weight:bold;
    margin: 10px 0 10px 0;
    padding: 4px 25px 4px 25px;
}

.loginForm input.submit:hover{
    background:#45678b;
}

.infotext{
    clear:both;
    color:#a3a3a3;
}

/*
 * Content Pages
 *
 */
 
header{
    position: relative;
    background:#fff;
    width:100%;
	height: auto;
    margin: 20px 0 0 0;
    text-align: center;
}

#header{
    position: relative;
	width: 100%;
	height: auto;
    max-width: 1300px;
    padding: 20px 5px 5px 5px;
    margin: 0px auto;	
    display: inline-block;
    text-align: left;
    }

#tvfflogo	{
    background:url(../img/GGmedia_Logo.png) no-repeat;
	margin-left:10px;
	margin-top:1px;
	margin-bottom:1px;
	width: 250px;
	height: 54px;
}
#tvffservuslogo	{
    background:url(../img/GGmedia_Logo.png) no-repeat;
	margin-left:10px;
	margin-top:1px;
	margin-bottom:5px;
	width: 250px;
	height: 54px;
}

.menu1	{
    float: left;
	background:#fff;
	vertical-align: bottom; 
}
.menu2	{
    float: right;
    margin: 15px 0 0 0;
	background:#fff;
	text-align: left;
    width: 100%;
}

.gg_tvffLogo{
    /*margin:2.083333333333333% 0;*/
}
.ggLogo{
}

#landumschalter	{
	position:absolute;
	left:300px;
	top:30px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid #fefefe;
}

#mainNav {
    float: left;
    list-style: none;
    width: 100%;
    margin: 0px 0px 0px 10px;
    padding: 0;
}

#mainNav li{
    float: left;
    margin: 0 5px 0 5px;
}

#mainNav li a{
    color:#888;
    font-size:15px;
    font-weight:normal;
    text-decoration:none;
	padding-right: 10px;
    text-transform: uppercase;
}

#mainNav li a:hover,
#mainNav li a.act{
    color:#00458C ;
	font-weight: bold;
    /*text-decoration:underline;*/
}

#container{

}
#logincontainer{
	margin: 0 auto 1%;
	padding-top:0px;
	padding-left:5px; 
	padding-right:5px;
    overflow:hidden;
	min-width:270px;
	max-width: 98%;
}

#subNav{
    padding: 0;
}

#subNav li{
	float: left;
    margin: 0px 10px 10px 0;
    list-style:none;
}

#subNav li a{
    color: #00458C;
    font-size:12px;
    font-weight:normal;
    text-decoration:none;
    position:relative;
    text-transform: uppercase;
}

#subNav li a:hover {
    text-decoration: underline;
}

#subNav li a.act{
    color: #00458C;
   font-weight: bold;
}

/*
#subNav li a.act:before,
#subNav li a:hover:before{
    border-color: transparent transparent #fff transparent ;
    border-style: solid;
    border-width: 10px;
    bottom: -21px;
    content: " ";
    height: 0;
    left: 10px;
    position: absolute;
    width: 0;
}
*/

.subNavli a.act:before,
.subNavli a:hover:before{
}

#subNavMenu	{
    /*width: 100%;*/
	/*width: 1300px;*/
    /*max-width: 1300px;*/
    margin: 0px auto;
	/*padding-left: 15px;*/
}
.flagicon	{
	margin: 0 1px 0 1px; 
	border:	thin solid #EEEEEE;
}
.flagiconhilite	{
	margin: 0 1px 0 1px; 
	border:	thin solid #000000;
}

#lgMenu	{
	width: 100%;
    max-width: 1300px;
    margin: 0px auto !important;
}

#lgMenu ul {

    width: 100%;
    margin: 0;
    padding: 0;
}

#lgMenu_li {
    text-align: right;
    list-style:none;
	margin-bottom:0;
	padding-bottom:0;
    font-size: 14px;
}

#bereichsueberschrift 	{
	float: none;
}
#bereichsueberschrift h1	{
	margin: 5px 0 0 10px;
	padding: 0;
}

.content{
    background:#fff;
    clear:both;
    overflow:auto;
    width:100%;
    max-width: 1300px;
	position: relative;
    padding: 10px 2px 10px 2px;
    /*margin: 20px auto 20px auto;*/
    margin: 5px auto;
}

.cfchartcontent{
    background:#fff;
    clear:both;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    float:left;
    margin:0 0 3.125% 0;
    width:100%;
}

.news{
    background:#fff;
    overflow:auto;
    width:98%;
    padding: 20px;
    max-width: 1300px;
    margin: 10px auto 40px auto;
	position: relative;
}


#loginField {
	display: block;
	vertical-align: top;
}
#loginField_footer	{
	display: block;
}


.loginName{
    font-weight:bold;
}
#eingeloggt	{
	display: table-cell;
	vertical-align: middle;
	font-size:8pt;
}


/*
 * Boxes
 *
 */
 
.auswahlformular	{
	float: left;
	width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0;
}
 
.formbox{
    background: none repeat scroll 0 0 #F0F0F0;
    border: 1px solid #E0E0E0;
    /*margin: 5px auto 5px;*/
    margin: 5px 5px 5px 0px;
    padding: 10px 10px 10px 10px;
    height: auto;
} 

.formboxmin80{
	min-height: 80px;
} 
.formboxmin100{
	min-height: 100px;
} 
.formboxmin125{
	min-height: 125px;
} 

.formboxm{
    background: none repeat scroll 0 0 #F0F0F0;
    border: 1px solid #E0E0E0;
    border-radius: 2px 2px 2px 2px;
    margin: 0px 5px 5px 0px;
    padding: 2px 10px 2px 10px;
    height: 75px;
} 

.formbox300{
    height:31.25%;
} 
.formbox7{
} 

/* Auswahlboxen: horizontal enger */
.formbox {
  margin-right: 6px;
  margin-bottom: 8px;
}

.col50,
.col60,
.col70,
.col80,
.col90,
.col100,
.col110,
.col120,
.inputbutton,
.col130,
.col140,
.col160,
.col180,
.col200,
.col220,
.col230,
.col240,
.col250,
.sendungtitel,
.col8,
.col16{
    float: none;
	min-width: 85%;
}

.col50{
    width:50px;
}

.col60{
    width:60px;
}

.col70{
    width:70px;
}

.col80{
    width:80px;
}

.col90{
    width:90px;
}

.col100{
    width:100px;
}

.col110{
    width:110px;
}

.col120{
    width:120px;
}

.inputbutton{
	margin: 15px auto 10px;	
	float: none;	
	text-align: center;
}

.col130{
    width:130px;
}

.col140{
    width:140px;
}

.col160{
    width:160px;
}
.col180{
    width:180px;
}

.col200{
    width:200px;
}

.col8{
    width:460px;
}

.col220 {
	width:220px;
}
.col230 {
	width:230px;
}
.col240 {
	width:240px;
}
.sendungtitel {
	width:240px;
}

.col250 {
	width:250px;
}

#welcome	{
	width:100%;
	overflow: hidden;
}

.welcome {
	width: 88%;
	height: 300px;
	min-width: 250px;
	margin: 0 20px 30px 10px;
	padding: 10px 10px 10px 10px;
	float: left;
	display:block;
}

.col550prozent {
	/*width:60%;*/
	min-width: 275px;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
	overflow:hidden;
}

.pdfdownloads	{
	width: 300px;
	min-height: 275px;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
	float: right;
}

.pdfdownloadsleft	{
	width: 275px;
	min-height: 275px;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
}

.schema {
	width: 95%;
	min-width: 250px;
	margin: 0px 10px 30px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
	display:block;
}

.service	{
	width:40%;
	min-width: 350px;
	padding: 10px;
	margin: 0 10px 10px 10px;
	display: inline-block;
}


.col16{
    /* width:940px; */
	width: auto;
}


.formbox select,
.formbox input.txt{
    width: 100%;
	margin: auto;
}

.smallselect	{
	font-size:75%;
}
/*.smallselect option:hover	{
	background-color: #0a246A;
	color: white;
}*/

.width50 {max-width:50px;}
.width75 {max-width:75px;}

/*  https://github.com/nathansmith/formalize/blob/master/assets/css/formalize.css#l-256-271  */

/*
  select,
  select[size="0"],
  select[size="1"] {
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 0px;
  }
*/

/*.startbox{
    background:#f0f0f0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #e0e0e0;
    margin:0 1.0416666666666665% 1.0416666666666665%;
    padding:0 1.0416666666666665% 1.0416666666666665%;
    width:91.875%;
}*/

.inputWrap{
    clear:both;
    margin:0 0 1.0416666666666665%;
}

input.submit{
    background: #00458C;
    color: #FFFFFF;
    font-size: 12px;
    border: none;
    letter-spacing:0.11em;
    margin: auto;
    padding: 5px 25px 5px 5px;
    width: auto;
	text-align: center;
}


.ie7 input.submit,
.ie8 input.submit{
    font-weight:bold;
}

/*
 * Tables
 *
 */

table{
	width: auto;
}

.datatable	{
	white-space:nowrap;
}


.datatable th	{
	/*font-size: 0.9em;*/
	font-size: 10px;
	vertical-align: middle;
	text-align: center;
}
.datatable td	{
	/*font-size: 0.9em;*/
	font-size: 10px;
	vertical-align: middle;
	text-align: center;
}

.table100{
	width: 100%;
}

table.tableResult{
	overflow:scroll;
	margin: 10px 10px 20px 10px;
	width: 98%;
}
table.quelle{
	margin-bottom: 15px;
}

table.ergebnisse {
	width: 99%;
    margin:0 0 0 0;
	clear:both;
}
table.middle {
	clear:both;
	margin-left:auto; 
    margin-right:auto;
	margin-top: 0;
	margin-bottom: 0;
	text-align:center; 
	border-spacing:0;
	border-collapse:collapse;	
}
thead{
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #00458C;
    font-size: 1.1em;
    font-weight: bold;
}

tr.even{
    background:#f0f0f0;
}
tr.odd{
    background:#ffffff;
}

th, td{
    padding:1px 2px;

	/*padding:0.1em 0.2em;
    font-size: 1.0em;*/
}
td.ergebnisse	{
    padding:0 0 0 0;
} 
td.ergebnisausgabe	{
    padding:0 0 0 0;
	display: none;
} 

td.middle	{
    padding: 1.0em;
} 
td.options	{
    padding: 1.0em;
	border: thin solid gray;
} 

.tagesliste {
	margin-left:0;
}

table.korb	{
	background-color:white;
}

th.korbheader {
	margin:5px;
	padding:5px;
	background-color:#DDDDDD;
	color:black;
	font-weight: bold;
	font-size: 1em;
	font-family: verdana, arial, helvetica, sans-serif;	
}
th.korb {
	margin:5px;
	padding:5px;
	color:white;
	border-left: 1px solid white;
	font-weight: normal;
	font-size: 0.9em;
	font-family: verdana, arial, helvetica, sans-serif;	
}
td.korb {
	margin:5px;
	padding:5px;
	color:black;
	border-left: 1px solid #dddddd;
	border-top: 1px solid #dddddd;
	font-weight: normal;
	font-size: 0.9em;
	font-family: verdana, arial, helvetica, sans-serif;	
}
td.korb2 {
	margin:5px;
	padding:5px;
	color:black;
	border-left: 1px solid #dddddd;
	font-weight: normal;
	font-size: 0.9em;
	font-family: verdana, arial, helvetica, sans-serif;	
}

.cfchart	{
}

.cfchart table{
	width: 180px;
	z-index:100;
} 


/* -------------------------- */
/* -- Detailinfo ------------ */
/* -------------------------- */

#detail_info,
#detail_info:link,
#detail_info:visited,
#detail_info:active {
	position: relative;
}

#detail_info:hover {
	background: transparent;
	z-index: 100;
	text-decoration: none;
}

#detail_info span {
	display: none;
	text-decoration: none;
}

#detail_info:hover span {
	display: block;
	position: absolute;
	top: -150px;
	left: 0px;
	width: 225px;
	z-index: 100;
	color: #000000;
	border-bottom: 4px solid #D8D8D8;
	border-right: 4px solid #D8D8D8;
	border-top: 4px solid #F8F0F0;
	border-left: 4px solid #F8F0F0;
	padding: 2px 10px 2px 10px;
	background: #fff;
	font-style: Normal;
	text-align: left;
	line-height: 1.6em
}

/* == CHART HEIGHT BUG FOR IE == */
/*.oldie .chart{
	position:relative;
}*/


/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.clear {
    clear: both;
}

#auswahlfelderanzeigen	{
}

#auswahlfelderausblenden	{
	/*  auf kleineren bildschirmen:  auswahlbereich ausblenden, wenn die ergebnisse angezeigt werden  */
	display: none;
}

#eingabenzusammenfassung	{
	display: inline;
	margin: 0 10px 0 5px;
}



/*

=================================================================================================================
=================================================================================================================
=================================================================================================================
=================================================================================================================
=================================================================================================================
=================================================================================================================
=================================================================================================================
=================================================================================================================
=================================================================================================================

/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

/*@media only screen and (min-width: 500px) and (max-width: 768px)  {*/
@media only screen and (min-width: 600px) and (max-width: 1024px)  {
  /* Style adjustments for viewports 480px and over go here */
  
	.loginForm{
	    width:400px;
		/* height:250px; */
	}  
  
	.content,
    .news{
        width: 100%;
        padding: 20px 5px 20px 5px;
    	background:#fff;
	}

	#container{
        width: 90%;
		padding: 0 5% 0 5%;
	}

    header {
        margin: 0;
    }

	#header{
		/*display: inline;*/
        width: 90%;
        padding: 20px 5% 20px 5%;
	}
	
	.menu1	{
		width: 100%;
		display: inline;
	}

	.gg_tvffLogo{
    	width: 320px;
	}
	#tvfflogo	{
	    background:url(../img/GGmedia_Logo.png) no-repeat;
		margin-left:1px;
		margin-top:1px;
		margin-bottom:1px;
		width: 250px;
		height: 54px;
	}	
	
	#mainNav {
		border:none;		
	}	

	#mainNav li {
	    margin:0 10px 0 10px;
	}
	
	#mainNav li a {
		padding-right: 0px;
	}

	#subNav li a{
	    font-size:15px;
	}
	
	#subNav1	{
		float: left;
	}	
	.flagicon	{
		margin: 0 1px 0 1px; 
		border:	thin solid #EEEEEE;
	}
	.flagiconhilite	{
		margin: 0 1px 0 1px; 
		border:	thin solid #000000;
	}
	#lgMenu	{
        /*float: left;*/
		margin: 10px 0 0 0;
	}

	.formbox{
	    /*padding: 1% 1.0416666666666665% 10px 1.0416666666666665%;*/
	    padding: 10px 10px 10px 10px;
		margin: 3% auto;
	    height: auto;
		text-align: top;
	} 
	.formboxmin100{
		min-height: 100px;
	} 
	.formboxmin125{
		min-height: 125px;
	} 

	.formbox7{
	    /*height: 170px;*/
	    height: auto;
	} 
	
	#sendungsliste .auswahlformular,
	#timeslots .auswahlformular,
	#timeslotsd .auswahlformular,
	#marktanteile .auswahlformular,
	#streaming .auswahlformular {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		margin: 5px 0px 0px 0px;
		padding: 0px 0px 0px 4px;
		/*top-margin: 25px;*/
	}

	#sendungsliste .auswahlformular .formbox,
	#timeslots .auswahlformular .formbox,
	#timeslotsd .auswahlformular .formbox,
	#marktanteile .auswahlformular .formbox,
	#streaming .auswahlformular .formbox {
		float: none;
		width: calc(50% - 10px);
		flex: 0 0 calc(50% - 10px);
		max-width: calc(50% - 10px);
		min-width: 0;
		box-sizing: border-box;
	}

	.col50,
	.col60,
	.col70,
	.col80,
	.col90,
	.col100,
	.col110,
	.col120,
	.col130,
	.col140,
	.col160,
	.col180,
	.col200,
	.col220,
	.col230,
	.col240,
	.col250,
	.col8,
	.col16{
	    float:left;
		min-width:150px;
		width: 45%;
	    /*margin:0 0px 2.083333333333333% 1.0416666666666665%;*/
		margin: 3px 5px 3px 0px;
	}
	.sendungtitel{
	    float:left;
		min-width:310px;
		/*width: 94%;*/
	    /*margin:0 0px 2.083333333333333% 1.0416666666666665%;*/
		margin: 3px 5px 3px 0px;
	}	

	table.tableResult{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	table.ergebnisse {
	    font-family: Verdana, Arial, Helvetica, sans-serif;
	}	
	th, td{
	    padding: 0.2em 0.2em;
	}
	.tagesliste {
		margin-left:0;
	}
	
	
  /* Auswahlfelder dichter, mehr Inhalt sichtbar */
  .formbox {
    margin: 4px 4px 6px 0;
  }

  .col50,
  .col60,
  .col70,
  .col80,
  .col90,
  .col100,
  .col110,
  .col120,
  .col130,
  .col140,
  .col160,
  .col180,
  .col200,
  .col220,
  .col230,
  .col240,
  .col250,
  .col8,
  .col16 {
    width: 48%;
    min-width: 180px;
  }
	
  .auswahlformular {
    flex-wrap: wrap;
  }

  .auswahlformular .formbox {
    width: calc(50% - 10px);
  }

  .sendungtitel {
    width: 100%;
  }


}



/*
=================================================================================================================
=================================================================================================================
=================================================================================================================
*/

/*@media only screen and (min-width: 769px) {*/
@media only screen and (min-width: 1025px) {
  /* Style adjustments for viewports 768px and over go here */

	.loginForm{
	    width:400px;
		/* height:240px; */
	}  
/*
	body .tvff {
	    background:url(#basehref#img/tffBg.jpg) top center fixed ##000; 
		background-size:100%;
	}
	body .servustv {
	    background:url(#basehref#img/servusbg.gif) top center fixed ##fff; 
		background-size:100%;
	}
*/	
	body .test	{background: none;}
  

	#logincontainer{
	    margin: -100px 15px 0 15px;
		background: none;
		padding-top:20px;
	}
	

	.content{
    	background:#fff;
    	margin: 20px auto 20px auto;
	    padding: 20px;
	}

	#header{
	    padding: 20px 0 15px 0;
	}

	.menu1	{
		float: left;
		width:250px;
	}	
	.menu2	{
		text-align: center;
		width: auto;
	}	

	#tvfflogo	{
	    background:url(../img/GGmedia_Logo.png) no-repeat;
		margin-left:1px;
		margin-top:1px;
		margin-bottom:1px;
		width: 250px;
		height: 54px;
	}	
	
	#main	{
		padding-top: 20px;
        position: relative;
	}
	
	#mainNav {
		border:none;		
	    float: left;
	    list-style: none;
	    width: 100%;
	    margin: 0;
	    padding: 0;
	}	
	
	#mainNav li{
	    float: left;
	    margin: 0 0 0 25px;
	}
	
	#mainNav li a{
	    font-size:18px;	
		padding-right: 0px;
		/*margin-left: -10px;
		margin-right: -10px;*/
	}
	
	#subNav li{
		float: left;
	    margin:0 25px 10px 0;
	    list-style:none;
	}
	
	.subNavli a.act:before,
	.subNavli a:hover:before{
	    border-color: transparent transparent #fff transparent ;
	    border-style: solid;
	    border-width: 10px;
	    bottom: -22px;
	    content: " ";
	    height: 0;
	    left: 10px;
	    position: absolute;
	    width: 0;
	}	

	.flagicon	{
		margin: 0 10px 0 10px; 
		border:	thin solid #EEEEEE;
	}
	.flagiconhilite	{
		margin: 0 10px 0 10px; 
		border:	thin solid #000000;
	}

	#subNav li a{
	    font-size:16px;
	}

	#subNav1	{
		float: left;
	}
	
	td.ergebnisausgabe	{
		display: inline;
	} 
	
	#auswahlfelderausblenden	{
		/*  auf grossen bildschirmen:  auswahlbereich immer anzeigen  */
		display: inline;
	}
	
	#eingabenzusammenfassung	{
		display: none;
	}
	
	#loginmain {
		padding-top:90px;
	}
	
	#loginField{

	}
	#loginField_footer	{
		display: none;
	}
	#lgMenu	{
		padding-bottom: 0px;
	}

	
	#bereichsueberschrift h1	{
		float: left;
	}

	.formbox{
	    margin: 5px 10px 20px 0px;
	    padding: 100 1.0416666666666665% 100 1.0416666666666665%;
		height: 155px;
	} 	
	.formboxmin80{
	} 
	.formboxmin100{
	} 
	.formboxmin125{
	} 
	.formbox7{
		/*height: 180px;*/
		height: 190px;
	} 	
	.formbox h2{
		margin-bottom:10px;
	}

	.col50,
	.col60,
	.col70,
	.col80,
	.col90,
	.col100,
	.col110,
	.col120,
	.col130,
	.col140,
	.col160,
	.col180,
	.col200,
	.col220,
	.col230,
	.col240,
	.col250,
	.sendungtitel,
	.col8,
	.col16 {
		min-width: 0px;
		float: left;
	    margin: 0 0 20 0;
		padding: 0 2 0 0;
	}

	.inputbutton	{
		margin: 5px 0 10px 5px;	
		min-width: 0px;
		float: left;
		padding: 0 2 0 0;
		border: none;
	}
	
	#footer {    
	    /* margin: 0 auto; */
	}

	#footer p{    
	    float:left;
	}
	
	#footer .links{    
	    color:#000;
		float: right;
		margin-right: 10px;
	}
	
	#detail_info:hover span {
		display: block;
		position: absolute;
		top: -150px;
		/*right: 700px;*/
		left: -200px;
		width: 225px;
		z-index: 100;
		color: #000000;
		border-bottom: 4px solid #D8D8D8;
		border-right: 4px solid #D8D8D8;
		border-top: 4px solid #F8F0F0;
		border-left: 4px solid #F8F0F0;
		padding: 2px 1px 2px 10px;
		background: #fff;
		font-style: Normal;
		text-align: left;
		line-height: 1.6em
	}	

	table.tableResult{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	table.ergebnisse {
	    font-family: Verdana, Arial, Helvetica, sans-serif;
	}		
	th, td{
	    padding: 0.2em 0.5em;
	}

	.datatable th	{
    	font-size: 12px;
	}
	.datatable td	{
    	font-size: 12px;
	}

	.tagesliste {
		margin-left:-10px;
	}

	
input.submit{
    font-size: 16px;
    height: 39px;
    letter-spacing:0.15em;
    padding: 0 20px;
}

  /* Desktop: saubere horizontale Ausrichtung */
  .formbox {
    margin-right: 10px;
    margin-bottom: 15px;
  }

@media only screen and (min-width: 1025px) {

  .auswahlformular {
    flex-wrap: nowrap; /* alles in einer Zeile */
  }

  .formbox.col90  { width: 90px; }
  .formbox.col120 { width: 120px; }
  .formbox.col140 { width: 140px; }
  .formbox.col160 { width: 160px; }
  .formbox.col180 { width: 180px; }
  .formbox.col200 { width: 200px; }
  .formbox.col220 { width: 220px; }
  .formbox.col240 { width: 240px; }
  .formbox.col250 { width: 250px; }

  .sendungtitel {
    width: 240px;
  }

}
  
	
}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

.datum1 {
	background-color: #FFFFFF;
	font-family: verdana, arial, helvetica, sans-serif;
	text-align: center;
	margin:0 0 0 0; 
	padding-left:1px; padding-right:1px;
	padding-top: 3px; padding-bottom: 3px;
	width:17px;

	color:#222222;
    font-size: 100%;
	line-height: normal;
	
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-left:1px solid #E2E3EA;	
    border-right:1px solid #E2E3EA;	
    border-top:1px solid #ABADB3;	
    border-bottom:1px solid #E3E9EF;	
}
.datum1::selection {
	background: #3399FF; /* Safari */
	}
.datum1::-moz-selection {
	background: #3399FF; /* Firefox */
}
.datum2 {
	background-color: #FFFFFF;
	font-family: verdana, arial, helvetica, sans-serif;
	text-align: center;
	margin:0 0 0 0; 
	padding-left:1px; padding-right:1px;
	padding-top: 3px; padding-bottom: 3px;
	width:34px;

	color:#222222;
    font-size: 100%;
	line-height: normal;
	
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-left:1px solid #E2E3EA;	
    border-right:1px solid #E2E3EA;	
    border-top:1px solid #ABADB3;	
    border-bottom:1px solid #E3E9EF;	
}
.datum2::selection {
	background: #3399FF; /* Safari */
	}
.datum2::-moz-selection {
	background: #3399FF; /* Firefox */
}


/* ============================================================================================================================ */
div.ui-datepicker{
 font-size:12px;
}

/*--- http://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations ---*/
.blink {
  animation: blink 1s steps(5, start) infinite;
  -webkit-animation: blink 1s steps(5, start) infinite;
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink {
  to {
    visibility: hidden;
  }
}


/*
@media only screen and (max-width: 500px)  {
    
    header {
        margin: 0;
    }
 
    .content {
        width: 90%;
        padding: 20px 5% 20px 5%;
    }
    
    #subNavMenu {
        float: left;
        width: 90%;
        padding: 0 5% 0 5%;
    }
    
    #subNavMenu li {
        margin: 10px 5 0 0;
    }
    
    .news {
        width: 90%;
        padding: 20px 5% 20px 5%;
    }
    
    #lgMenu	{
        float: left;
		margin: 10px 5% 0 0;
	}
    
    #footer {
        width: 90%;
        padding: 0 5% 0 5%;
    }
    
}
*/

/* https://forum.jquery.com/topic/datepicker-leaves-little-white-box-on-bottom-of-screen */
#ui-datepicker-div { display: none; }


/* rheinline dev styling */

#dev {
  text-align: center;
  height: 15px !important;
  padding: 15px;
  color: #fff;
  font-size: 20px;
}

#datenbank {
  text-align: center;
  padding: 15px;
  color: #fff;
  font-size: 20px;
}

/* rheinline tvff css styling */

#subNavMenu {
    /* width: 100%; */
    /* width: 1300px; */
    max-width: 1300px;
    margin: 0px auto;
    /* padding-left: 15px; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#subNav {
    /*height: 50px;*/
    /*padding: 30px;*/
    width: 100%;
    background-color: #eee;
    /*display: flex; */
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-right: 10%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#subNav li {
    margin: 0;
    padding: 15px 25px;
    /* border: 2px solid #003d7f; */
    /*border-radius: 5px; */
    text-align: center;
}

#subNav li:hover {
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#subNav li a.act {
	color: #fff;
}

#subNav li a.act,
#subNav li a.act:hover {
	background-color: #003d7f;
}

#subNav li:has(a.act) {
	background-color: #003d7f;
	border-color: #003d7f;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

#subNav li:has(a.act) a {
  color: #fff;
}

#subNav {
	border-bottom: 1px solid #003d7f;
}

#subNav li.act {
    color: #fff;
    background: #003d7f;
} 

#lgMenu {
    position: relative;
    z-index: 20;
    height: 0px;
}

#lgMenu_li {
    height: 0px;
}

#subNavMenu {
    position: relative;
    z-index: 10;
    margin-top: -27px;
}


@media only screen and (min-width: 600px) and (max-width: 1024px) {
    #lgMenu {
        /* float: left; */
        margin: 10px 0 0 0;
    }
}

.subNavli a.act:before, .subNavli a:hover:before {
    display: none;
}

ul#subNav a:hover {
    text-decoration: none;
}

/*li#lgMenu_li a:hover {
    text-decoration: none;
}*/

.content {
    padding: 0px;
    margin: auto;
    margin-top: -15px;
}

.schema {
    padding-left: 20px;
}

.content h2 {
    background: none;
    font-weight: bold;
    color: #003d7f;
    padding-top: 25px;
}

.formbox h2 {
    padding-top: 5px;
    margin-top: -10px;
}

.auswahlformular {
    padding: 20px;
    width: 97%;
}

#sendungsliste .auswahlformular {
	padding: 0 0 0 16px;
	width: 100%;
	box-sizing: border-box;
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
	#sendungsliste .auswahlformular {
		padding: 0 0 0 4px;
	}
}

.formbox {
    background: none;
    border: none;
    /* margin-left: -6px; */
}

#sendungsliste .formbox,
#timeslots .formbox,
#timeslotsd .formbox,
#marktanteile .formbox,
#streaming .formbox{
	background: #FAFAFA;
	border: 1px solid #E0E0E0;
	padding: 10px 10px 10px 10px;
	margin: 5px 5px 5px 0px;
}

#timeslots .formbox,
#timeslotsd .formbox,
#marktanteile .formbox,
#streaming .formbox {
	padding: 8px 10px 8px 10px;
}

#timeslots .formbox h2,
#timeslotsd .formbox h2,
#marktanteile .formbox h2,
#streaming .formbox h2 {
	margin-bottom: 5px;
}

#timeslots .datepicker-line,
#timeslots .timepicker-line,
#timeslotsd .datepicker-line,
#timeslotsd .timepicker-line,
#marktanteile .datepicker-line,
#marktanteile .timepicker-line,
#streaming .datepicker-line,
#streaming .timepicker-line {
	margin-bottom: 0;
}

#sendungsliste .formbox select,
#sendungsliste .formbox input.txt,
#sendungsliste .formbox input[type="text"]{
	border-radius: 0 !important;
}

#sendungsliste .formbox select[multiple],
#sendungsliste .formbox select[size]:not([size="1"]) {
	border-radius: 0 !important;
}

#container {
    margin-top: 30px;
}

input.submit {
    border: 2px solid #003d7f;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

input.submit:hover {
    background: #fff;
    color: #003d7f;
    border: 2px solid #003d7f;
}

.loginForm input.submit:hover {
    background: none;
}

.formbox h2 {
    border-bottom: 1px solid #003d7f;
}

#lgMenu_li a span {
    font-weight: bold;
}

#table_sendungsliste_wrapper {
    padding-left: 20px;
}

table.quelle {
  margin-left: 20px;
}

#mainNav li a:hover, #mainNav li a.act {
  color: #003d7f;
}

/* TEST */

.formbox select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 0;
  /* font-size: 1rem; */
  line-height: 1.5;
  border: 1px solid #ccc;
  /* border-radius: 0.5rem; */
  background-color: #fff;
  color: #333;

  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="16" viewBox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M5 7l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}


#sendungsliste .formbox select[multiple],
#sendungsliste .formbox select[size]:not([size="1"]) {
	appearance: listbox;
	-webkit-appearance: listbox;
	-moz-appearance: listbox;
	background-image: none;
	padding-right: 0;
}

.formbox select:focus {
  outline: none;
  border-color: #003d7f;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

#sendungsliste .formbox select[multiple]:not([size="1"]) {
  background-image: none;
  height: auto;
  min-height: 8rem;
  padding-right: 1rem;
  cursor: pointer;
}

#sendungsliste .formbox select[multiple][size="1"] {
  min-height: 0;
}

/*.formbox select {
  background-image: none;
  height: auto;
  min-height: 8rem;
  padding-right: 1rem;
  cursor: pointer;
} */

.formbox select[multiple] {
  scrollbar-width: thin;
}

/*.formbox select {
  scrollbar-width: thin;
} */

.formbox select[multiple] option:checked {
  background: #003d7f;
  color: #fff;
  width: 100%;
  font-weight: bold;
}

/*.formbox select option:checked {
  background: #003d7f;
  color: #fff;
  width: 111%;
  font-weight: bold;
} */

.formbox select:focus  {
  border-color: #003d7f;
  box-shadow: none;
}

.formbox select[multiple] option:checked {
  background-color: #003d7f;
  color: #fff;
}

/*.formbox select option:checked {
  background-color: #003d7f;
  color: #fff;
} */

.formbox select[multiple] option:hover {
  background-color: #003d7f;
  color: #fff;
  width: 100%;
}

/*.formbox select option:hover {
  background-color: #003d7f;
  color: #fff;
  width: 111%;
} */

.formbox select[multiple] option:checked:hover {
  background-color: #003d7f;
  color: #fff;
  width: 100%;  
}

/*.formbox select option:checked:hover {
  background-color: #003d7f;
  color: #fff;
  width: 100%;  
} */

input[type="checkbox"] {
  accent-color: #003d7f;
  height: 20px;
  width: 18px;
}

input[type="radio"] {
  accent-color: #003d7f;
  height: 20px;
  width: 18px;
}

input.submit {
	background: #003d7f;
}

/*.datum1 {
	width: 25px;
	height: 20px;
}

.datum2 {
	width: 50px;
	height: 20px;	
} */

.auswahlformular {
/*  display: flex;*/
  flex-wrap: wrap;
  align-items: flex-start;
/*  gap: 10px; /* gleichmäßiger Abstand */*/
}

/*
.auswahlformular .formbox {
  flex: 0 0 auto;        /* NICHT wachsen */
  min-width: 0;          /* ganz wichtig */
}
*/

.auswahlformular .inputbutton {
  flex: 0 0 100% !important;
  text-align: center !important;
  margin-top: 1rem !important;
}

footer p a {
  color: #fff !important;
}

footer p {
  color: #fff;
}

/* TEST */

.alter-box {
  border: 2px solid #003d7f;
  background: #003d7f;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 5px;
}

.alter-box a {
  color: #fff;
}

.alert-success {
  border-color: #1ba101;
  background: #21c900;
  display: flex;
  justify-content: center;
}

.alert-warning {
  border-color: #a70000;
  background: #c70404;
  display: flex;
  justify-content: center;
}

.alert-info {
  border-color: #df9000;
  background: #edad39;
  display: flex;
  justify-content: center;
}

.ui-timepicker-table .ui-timepicker-title {
  font-size: 12px !important;
  background: #003d7f !important;
  color: #fff !important;
}

.ui-timepicker-table td {
  padding: 5px !important;
}



.ui-timepicker-table .ui-state-default,
.ui-timepicker-table .ui-widget-content .ui-state-default,
.ui-timepicker-table .ui-widget-header .ui-state-default {
  border: 1px solid #003d7f !important;
  color: #003d7f !important;
  font-size: 12px !important;
  background: #fff !important;
}

.ui-timepicker-table .ui-state-active,
.ui-timepicker-table .ui-widget-content .ui-state-active,
.ui-timepicker-table .ui-widget-header .ui-state-active {
  border: 1px solid #003d7f !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #003d7f !important;
}

.ui-datepicker {
  width: auto !important;
  padding: 5px !important;
}

.ui-datepicker .ui-datepicker-title {
  background: #003d7f !important;
  color: #fff !important;
}

.ui-datepicker .ui-datepicker-header {
  background: #003d7f !important;
  position: relative !important;
  padding: 0.4em 0 !important;
  border-radius: 0px !important;
  border-top-right-radius: 5px !important;
  border-top-left-radius: 5px !important;
}

.ui-datepicker .ui-datepicker-next {
  margin-right: 7px !important;
}

.ui-datepicker .ui-datepicker-prev {
  margin-left: 7px !important;
}

.ui-datepicker td {
  padding: 5px !important;
}

.ui-datepicker-calendar thead {
  background: #003d7f !important;
  color: #fff !important;
}

.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default {
  border: 1px solid #003d7f !important;
  color: #003d7f !important;
  font-size: 12px !important;
  background: #fff !important;
  padding: 0.2em 0.3em 0.2em 0.5em !important;
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-widget-content .ui-state-active,
.ui-datepicker .ui-widget-header .ui-state-active {
  border: 1px solid #003d7f !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #003d7f !important;
}

.datum1, .datum2 {
  color: #003d7f;
  font-weight: bold;
}

/* Removed percentage-based min-width - using fixed pixel widths instead (see lines 2413-2479) */
/*.datum1 {
  min-width: 13%;
}

.datum2 {
  min-width: 25%;
}*/

/* Datepicker & Timepicker etwas größer & lesbarer */
.ui-datepicker,
.ui-timepicker-table {
  font-size: 13px;
}

.ui-timepicker-table td {
  padding: 6px;
}

/* kleine Eingabefelder vergrößern */
.datum1 {
  width: 22px;
}

.datum2 {
  width: 44px;
}

/* Datepicker- & Timepicker-Gruppen niemals umbrechen */
.datepicker-group,
.timepicker-group,
.formbox span,
.formbox .timefield-wrapper {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.formbox button,
.formbox img {
  flex-shrink: 0;
}

@media only screen and (max-width: 599px) {

  .formbox span {
    white-space: nowrap;
  }

}
@media only screen and (min-width: 1025px) {

  .formbox span {
    white-space: nowrap;
  }

}




/* =========================================================
   FIX: Datum- & Zeitfelder (Datepicker/Timepicker) NICHT umbrechen
   - KEIN width:auto (macht bei Flex/Block oft "ganz breit")
   - feste Breiten + inline-block + nowrap nur für diese Controls
   ========================================================= */

/* 1) Datum: kleine Felder inline halten */
.formbox input.datum1,
.formbox input.datum2 {
  display: inline-block !important;
  vertical-align: middle !important;

  /* WICHTIG: keine Prozent-/min-width-Spielchen */
  min-width: 0 !important;
  max-width: none !important;

  /* feste Breiten wie früher */
  width: 26px !important;   /* Tag/Monat */
  box-sizing: content-box !important;
}

/* Jahr-Feld (datum2 ist bei dir oft das Jahr) */
.formbox input.datum2 {
  width: 46px !important;   /* Jahr */
}

/* Datepicker-Icon inline halten (jQuery UI Trigger) */
.formbox .ui-datepicker-trigger,
.formbox img.ui-datepicker-trigger,
.formbox input[type="image"] {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 4px 0 0 !important;
}

/* 2) Zeit: zwei kleine Felder + Uhr inline halten */
.formbox input.timefield,
.formbox input[name*="time"],
.formbox input[id*="time"] {
  display: inline-block !important;
  vertical-align: middle !important;

  min-width: 0 !important;
  max-width: none !important;
  width: 26px !important;          /* hh / mm */
  box-sizing: content-box !important;

  /* falls im Flex: nicht wachsen */
  flex: 0 0 auto !important;
}

/* Uhr-Button (dein Clock-Icon) */
.formbox .timepicker-btn,
.formbox .timepicker-btn img,
.formbox img[src*="clock"],
.formbox img[src*="time"] {
  display: inline-block !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
}

/* 3) Der eigentliche "kein Umbruch": nur dort, wo Datum/Zeit vorkommt
   -> Wir können die Textnodes (":" / "bis") nicht selektieren,
      aber wir verhindern Umbrüche, indem wir in der Formbox
      nur die Controls zusammen "inline" machen und zusätzlich
      die Box NICHT zwingend nowrap setzen (sonst wird alles eng).
   Wenn es trotzdem bricht, ist irgendwo ein <br> im HTML.
*/

/* Optional (sanft): verhindert, dass diese kleinen Controls durch Flex umbrechen */
.formbox input.datum1,
.formbox input.datum2,
.formbox input.timefield,
.formbox .ui-datepicker-trigger,
.formbox .timepicker-btn {
  white-space: nowrap !important;
}


/* === verhindert Umbrüche bei Datum & Zeit === */

.datepicker-line,
.timepicker-line {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.datepicker-line input,
.timepicker-line input {
  flex: 0 0 auto;
}

.timepicker-line input[type="image"] {
  margin-left: 4px;
  padding-left: 4px;
  vertical-align: middle;
}

.timepicker-master {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.timepicker-btn {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
}
.timepicker-btn img {
  display: block;
}


.datepicker-line {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
  gap: 4px;  
}

/* Datepicker Button – fixes invisible button */
.datepicker-btn {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background-image: url("../images/ggmedia_tvfastfacts_icon_kalender.gif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: pointer;
  vertical-align: middle;
}

.datepicker-line input,
.datepicker-line button{
  flex: 0 0 auto;
}

.datepicker-line input {
  flex-shrink: 0;
}

.password-container {
    position: relative;
    /*display: inline-block;*/
}

.password-show-toggle {
    padding-right: 30px;
    height: 30px;
}

.toggle-icon {
    position: absolute;
    right: 8px;
    top: 35%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    font-size: 1.5rem;
    color: #00458c;	
}