@charset "utf-8";
/* CSS Document */

html { 
	font-size: 1em;
	height: 100%;
}

BODY {
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
	background-color:#003867;
	box-sizing: border-box;
	height:100%;
}


@media ( orientation:landscape ) {
	html { 
		font-size: 2.2vmax;
	}
}
@media ( min-width: 680px ) {
	html { 
		font-size: 1.7vmax;
	}
}
@media screen and (min-width: 1024px) {
	html { 
		font-size: 1.4vmax;
	}
}

@media all and (display-mode: standalone) {
  body {
    /* border:2px solid #dc0037; */
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230c5884' fill-opacity='0.58' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  }
}


IMG, A IMG {
		border:0;
} 

FORM {
	margin: 0;
}

BUTTON {
	border: none;
	color: white;
	padding: 0.5vh;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	background-color: #003876;
	font-size: 0.6em;
}

BUTTON:hover {
	background-color:#11558e;
}

BUTTON.fail {
  background-color: lightgrey;
}

.start {
		text-align:center;
		height: 100%;
		justify-content: center;
		display: flex;
		align-items: center;
}

.clearing, #admin {
	max-width: 350px;
	min-width: 30vw;
	margin: 0 auto 5em auto;
	margin-top: 2vw;
	border: 0.2vw solid #fff;
	padding: 1vw;
}
.clearing {
	background-color:beige;
}

.clearing div.transfered {
	font-size: .8em;
}

#admin button {
	width: 60%;
	margin: 1em;
	background-color: #dc003f;
	font-size: 1em;
}

#admin button:hover {
	background-color: #dc333f;
}

.kopf_clearing {
	margin: 1vw;
}

td.ticket_symbols {
	color: #003867;
	text-align: right;
}

td.train_symbols {
	color: #003867;
	font-weight: bold;
	font-size: 1em;
	font-family:monospace;
	border-top: 1px solid #00387699;
	text-align: right;
}

td.ticket_symbols svg.ticket_symbols, td.train_symbols svg.ticket_symbols {
		width:24px;
		height:24px;
		vertical-align:middle;
		float:none;
}

td.train_symbols svg.ticket_symbols {
		color: #00386799;
}

td.ticket_symbols svg.ticket_symbols {
		color: #003867;
}
td.ticket_symbols svg.ticket_symbols.alert {
  color: #dc003f;
}
td.travelinfo {
  background-color: white;
  padding: 0.5em;
  font-size: 0.6em;
  text-align: center;
}

table.ticketbox, table.ticketbox2 {
	width: 100%;
	display: table !important;
}

table.ticketbox span.ui-accordion-header-icon {
	display: none;
}

/*Loginbox*/
.loginbox.tabelle {
	border: 1em solid #eeeef440;
	display: block;
	background-color: darkgrey;
	padding: 1em;
	margin-bottom: 20vh;
}

.loginbox.tabelle div.drumrum {
	text-align:center;
	padding: 0.1rem 0.5rem;
	white-space: nowrap;
}

.loginbox.tabelle div.undlos {
	text-align:right;
	padding: 0.1rem 0.5rem;
}

div.drumrum input[type="text"], div.drumrum input[type="password"] {
	padding: 0.1rem 0.5rem;
	width: 16em;
}

div.undlos input[type="submit"] {
	padding: 0.2rem 0.5rem;
}

.login svg.ticket_symbols {
	width: 2em;
	height: 2em;
	color: #fff;
	vertical-align: middle;
	display: table-cell;
	float: right;
}

.login {
	background-color: #dc003f;
	padding: 0.5em 1em;
	color: #fff;
	line-height: 2em;
	font-size: 2vh;
}

div.kopf_clearing td input {
	margin: 0 0.2em;
	border: 1px solid;
	font-size: 1em;
}

div.kopf_clearing td button {
	margin: 0 0.2em;
	border: 1px solid;
	width: 5em;
	height: 5em;
}

#ticketsliste_checkin input[type="checkbox"]+label table, #ticketsliste_checkout input[type="checkbox"]+label table, #ticketsliste_edit table.ticketbox2 { 
	background-color: white;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
	border-radius: 3px;
}

#ticketsliste_checkin input[type="checkbox"]:checked+label table { 
	font-weight: bold;
	background-color: #33ff99;
}

#ticketsliste_checkout input[type="checkbox"]:checked+label table { 
	font-weight: bold;
	background-color: lightpink;
}

#ticketsliste_checkin input[type="checkbox"], #ticketsliste_checkout input[type="checkbox"] {
	display: none;
}

#ticketsliste_checkin table.ticketbox.checked, 
#ticketsliste_checkout table.ticketbox.checked, 
#ticketsliste_checkin table.ticketbox2.checked, 
#ticketsliste_checkout table.ticketbox2.checked, 
#ticketsliste_edit table.ticketbox.checked,
#ticketsliste_edit table.ticketbox2.checked {
	background-color: #99ffcc;
}

#adminmenu svg {
	height: 3vh;
	border: 2px solid;
	padding: 0.5vh;
	max-height: 5vw;
}

#adminmenu svg.aktiv {
	color: green;
	background-color: #fff;
}

#adminmenu {
	position: fixed;
	bottom: 0;
	background-color: #dc003f;
	width: 100%;
	text-align: left;
	display: table;
	left: 0;
	padding: 1vh;
	box-sizing:border-box;
}

#adminmenu div.left button {
  margin-right: 0.5em;
}

#adminmenu div.right button {
  margin-left: 0.5em;
}

#adminmenu div.right {
  float: right;
}

#adminmenu div.left {
  float: left;
}

div.fuss_clearing div{
	text-align: right;
	margin-top: 0.5em;
	font-size: .6em;
}

.fuss_clearing .ticket_symbols {
	height: 100%;
}

div.fuss_clearing button {
	width: 50%;
	height: 5em;
	border: 8px solid #fff0;
	border-top: none;
}


#info img {
	width: 8em;
}

#info, #admin {
	text-align: center;
	color: #fff;
}

#info svg.ticket_symbols {
  width: 1.5em;
  height: auto;
  vertical-align: middle;
}

#info {
  margin-bottom: 4em;
}
#info g {
  display: inline-block;
}
#info p.legende {
  background-color: #ccc;
  display: block;
  color: #003867;
  font-size: 0.8em;
  padding: 1em;
}

#ticketsliste_checkout {
  background-color: lightblue;
  padding: 0.3em;
}

#ticketsliste_checkin {
  background-color: #99ffcc;  
  padding: 0.3em;
}

#output {
  border: 2px solid #dc003f;
  margin: 1em 0;
  background-color: #fff;
  font-family: monospace;
  font-size: 1.5em;
  color: #000;
}

#output h5 {
  margin: 0;
  padding: 0.5em;
  display: block;
  width: auto;
  background-color: #dc003f;
  color: white;
}

#output p {
  padding: 0.2em;
  margin: 0 0 0 0.5em;
}

#ticketsliste_edit div {
  padding: 0.5vw;
}
#ticketsliste_edit table {
  width: 100%;
}
#ticketsliste_edit input[type="text"], #ticketsliste_edit input[type="email"], #ticketsliste_edit input[type="submit"] {
  width: 100%;
  box-sizing: border-box;
}
button#zumzugplan {
  width: 10em;
  border-radius: 1em;
  background-color: #dc0037;
  font-size: 1.2em;
}
div.kopf_clearing td button.alert {
	color: red;
	border: 2px solid red;
	background-color: #fff;
	margin-right: 0.5em;
	margin-left: 0;
}


/* In Webseite enthaltenes Stil-Dokument #3 | https://clearing.fvlpz.de/customer/index2.php?id=YYo4FirWGR1VmkEwx930UdDGQA8Wsp2FMu4%2FUSQNiR3BlsqDE2lHwgJYbfRzXjyTapJVR6zbqCdsCmmVk7wlN4a0FGpzGq1StWzs529yTee2mccsj80Y8e9OJUf0eZDVB5FfrZfay9aNNviQ%2BuPV1g%3D%3D */

#qr_code {
  float: left;
  padding: 0 0.5vw 0.5vw 0;
}

#qr_code img {
  width: 90px;
  height: auto;
}

.kopf_clearing_customer {
  margin: 1vw 0vw;
}

#logo {
	background-image: url(/inc/images/logo_clearing.png);
	display: block;
	height: 4vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position-x: right;
	margin-left: 95px;
	min-height: 50px;
}

div.login div.matchday {
  font-size: .7em;
  text-align: center;
  color: black;
  margin-top: 0.7em;
  line-height: 1.7em;
}

div.login div.matchday select{
	background-color: beige;
	width: 100%;
	text-align:center;
	border: 0;
}

div.login div.matchday tr, div.matchday td {
  padding: 0;
  margin: 0;
}

div.login div.matchday table {
  width: 100%;
  padding: 0;
  margin: 0;
}

div.login div.matchday BUTTON {
	background-color:transparent;
}

div.login div.matchday BUTTON:hover svg {
	stroke: beige;
	stroke-width: 2px;
}

td.train_symbols div.platzinfo {
  font-size: 0.7em;
  float: right;
  width: 85%;
  font-weight: normal;
}

td.train_symbols svg.ticket_symbols.noplace {
	width: 10%;
	height: auto;
}

td.ticket_symbols svg.ticket_symbols.ticket_assigned {
  color: green;
}


/* In Webseite enthaltenes Stil-Dokument #2 | https://clearing.fvlpz.de/index.php */