*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	font-family: Arial, Helvetica, Garamond;
}

div#header h1{
	color: #777777;
}

img#logo{
	padding: .7em 0;
}


div#dev_info{
	font-size: 10px;
	width: 100%;
	color: red;
}

div#menu_left{
	float: left;
	max-width: 300px;
	width: 30%;
	box-sizing: border-box;
}
div#main_content{
	float: left;
	width: 70%;
	padding: 1em;
	box-sizing: border-box;
}

div#footer{
	text-align: right;
}

.success{
	font-style: italic;
	color: forestgreen;
}

.info{
	font-style: italic;
}

.warnings{
	font-style: italic;
	color: darkorange;
	border: 1 px solid red;
}

.errors{
	font-style: italic;
	color: red;
	font-weight: bold;
	border: 1 px solid red;
}

.status.invisible{
	color: grey;	
}
.status.visible{
	color: green;	
}

.breadcrumb_navigation{
	font-size: 11px;
}

.filter_display_strings {
	font-weight: normal;
	font-size: 11px;
	color: #777777;
}

.symbol_green{
	color: #32CD32;
}

.symbol_red{
	color: #FF3030;
}

.symbol_grey{
	color: #BBBBBB;
}


thead th,
tbody tr:last-child {
    border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
    border-bottom: 1px solid rgba(0,0,0,.1);
}
tbody th,
tbody td {
    border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
    border-bottom: 1px solid rgba(0,0,0,.05);
}
tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: 0;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
    background-color: #eeeeee; /* non-RGBA fallback  */
    background-color: rgba(0,0,0,.04);
}


#central_popup{
	padding: 20px;
	/*max-width: 90%;*/
	font-size: 0.8em;
}

#central_popup h1{
	font-size: 1.4em;
}

#central_popup h3{
	font-weight: normal;
}

#central_popup textarea{
	max-width: 90%;
}


#central_popup .ui-content{
	padding: 0;
}

/* iframe for calendar*/
.iframe_container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/*Loading spinner */
.loading {
	display: inline-block;
	width: 50px;
	height: 50px;
	margin-left: 50%;
	border: 3px solid rgba(100,100,100,.5);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
}

body.currently_loading .modal .loading {
	margin-top: 20%;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/* END Loading spinner */



/* START central loading animation */

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .9 );
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.currently_loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.currently_loading .modal {
    display: block;
}

/* END central loading animation */



/* 
START overwrite jquery style 
*/

.ui-listview .ui-li-static{
	padding: 0px;
} 

.ui-listview li h2{
	margin: 0 !important;
}

.ui-collapsible-content{
	padding: 0 !important;
}

.ui-collapsible-content ul li a{
	padding: 10px 0 10px 40px !important;
}

.ui-filter-inset {
        margin-top: 0;
}


.ui-panel{
	width: 27em;
}

.ui-panel-dismiss-open.ui-panel-dismiss-position-left{
	left: 27em;
}

.ui-panel-dismiss-open.ui-panel-dismiss-position-right{
	right: 27em;
}

.ui-panel .ui-field-contain label{
	width: 38%;
}

.ui-panel .ui-field-contain .ui-controlgroup label{
	width: 100%;
}

.ui-panel .ui-controlgroup-label{
	width: 38%;
}

.ui-panel .ui-field-contain .ui-controlgroup .ui-controlgroup-label legend{
	width: 38%;
}

.ui-panel .ui-controlgroup-controls {
	width: 60%;
}

.ui-panel .ui-field-contain label~[class*=ui-] {
	width: 60%;
}

#feedback_popup {
	min-width: 300px;
}

/*
END overwrite jquery style 
*/

/* Responsive tables */
@media ( min-width: 700px ) {
	/* Show the table header rows and set all cells to display: table-cell */
	.custom_breakpoint td,
	.custom_breakpoint th,
	.custom_breakpoint tbody th,
	.custom_breakpoint tbody td,
	.custom_breakpoint thead td,
	.custom_breakpoint thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */
	.custom_breakpoint td .ui-table-cell-label,
	.custom_breakpoint th .ui-table-cell-label {
		display: none;
	}
}


@media only screen and (max-width:1024px) {
	#menu_left{
		display:none !important;
	}
	div#main_content {
		width: 100%;
	}
	
	img#logo{
		margin-left: 100px;
	}
}

@media only screen and (max-width:700px) {
	body{
		font-size: 0.9em;
	}
	
	a.ui-btn, a.ui-btn.ui-mini{
		font-size: 0.9em;
	}
	
	.ui-btn:after{
		background-size: 12px 12px;
	}
	
	.page_navigation a.ui-btn, .page_navigation  a.ui-btn.ui-mini{
		padding: 5px;
	}
	
	.ui-btn-left, .ui-btn-icon-left {
		padding-left: 25px;
	}
	
	.ui-btn-right, .ui-btn-icon-right{
		padding-left: 25px;
	}
	
	.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after{
		width: 16px;
		height: 16px;
	}
	
	.ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after{
		margin-top: -8px;
	}
	
	img#logo{
		display:none !important;
	}
}

@media only screen and (max-width:560px) {
	body{
		font-size: 0.8em;
	}
	
	a.ui-btn, a.ui-btn.ui-mini{
		font-size: 0.8em;
	}
	
	.ui-btn:after{
		background-size: 10px 10px;
	}
	
	.ui-btn-icon-notext:after  {
		margin-left: -8px;
	}
	
}




/*only for small menue*/
@media only screen and (min-width:1025px) {
	a#small_menu{
		display:none !important;
	}
}div#header{
	text-align: center;
}

div.longtext {
	text-align: left;
}

h1{
	font-size: 12px !important;
}

h1.ui-title {
	margin: 0 10% !important;
}

img#logo {
	width: 300px;
	max-width: 100%;	
}

.clear{
	clear: both;
}

div.no_services{
	font-size: 16px;
	font-weight: bold;
}

div.service_seats.full{
	color: red;	
}

div.service_seats.free{
	color: green;	
}

div.of_seats{
	font-size:10px;	
}

.infotext{
	color: grey;
	font-size: 0.9em;
}


div#dev_info{
	font-size: 10px;
	width: 100%;
	color: red;
}


div.date_headline{
	margin-top: 20px;
	font-size: 20px;
}

div.service_date{
	font-size: 10px;
}

div.service_description{
	font-size: 10px;
	width: 100%;
	line-height: normal;
}

div.info{
	text-align: left;
}

div#info_links{
	color: #ffffff;
	font-size: 0.6em;
	text-align: right;
	text-shadow: none;
}

div#content{
	max-width: 600px;
	text-align: center;
	margin: auto;
}


.form{
	max-width: 600px;
}

.highlight{
	font-weight: bold;
	color: #53838D;
}

div.warnings{
	color: red;
	font-weight: bold;
	border: 1 px solid red;
}

thead th,
tbody tr:last-child {
    border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
    border-bottom: 1px solid rgba(0,0,0,.1);
}
tbody th,
tbody td {
    border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
    border-bottom: 1px solid rgba(0,0,0,.05);
}
tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: 0;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
    background-color: #eeeeee; /* non-RGBA fallback  */
    background-color: rgba(0,0,0,.04);
}


div.date_headline{
	width: 100%;
	text-align: center;
	font-size: 1.0em;
}
div.time_headline{
	width: 100%;
	text-align: center;
	font-size: 2.0em;
}

div.date_headline.small{
	display: none;
}
div.time_headline.small{
	display: none;
}

@media only screen and (min-width:561px) {
	table.service_list{
		width: 100%;
	}
	table.service_list td.first_col{
		width: 70%;
	}
	table.service_list td.second_col{
		width: 10%;
	}
	
	table.service_list td.third_col{
		width: 20%;
	}
}


@media only screen and (max-width:560px) {
	.service_seats, .service_booking, .service_title {
	    text-align: center;
	}
	
	.service_title{
		padding-top: 20px;
	}
	
	div.service_description{
		font-size: 12px;
		width: 100%;
		text-align: center;
	}
	
	.service_booking{
		padding-bottom: 20px;
	}
	
	tbody td .ui-table-cell-label {
		display: none !important;
	}
	
	div.date_headline.small{
		display: block;
		font-size: 0.5em;
	}
	div.time_headline.small{
		display: block;
		font-size: 1.0em;
	}
	
}

@media only screen and (min-width:500px) {
	h1{
		font-size: 16px !important;
	}
}


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

}