/*
 * R.Sepp Voigt
 * Copyright (C) 1988 rsv.me
 *
 * monitor.css?v=2.0
 *
 */
 
/* RESET
--------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;/*275%*/
    font: inherit;
    vertical-align: baseline;
}

@font-face {
  font-family: 'Neue Helvetica W02';
  src: url("../fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot");
  src: url("../fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot?#iefix") format("eot"), url("../fonts/9a2e4855-380f-477f-950e-d98e8db54eac.woff") format("woff"), url("../fonts/fa82d0ee-4fbd-4cc9-bf9f-226ad1fcbae2.ttf") format("truetype"), url("../fonts/48d599a6-92b5-4d43-a4ac-8959f6971853.svg#48d599a6-92b5-4d43-a4ac-8959f6971853") format("svg");
  font-style: normal;
  font-weight: 300;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    font-family: 'Neue Helvetica W02', Arial, FreeSans, sans-serif;
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
	outline:none;
	text-decoration: none; 
	color: #000;
}

*:focus { outline: none; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
.dp-block {
    display: block;
}
.tal-right {
    text-align: right;
}
body {
    background: #000;
}
body.setup {
    background: #3c3c3c;
}
body .on {
    display: block;
}
body .off {
    display: none;
}
.setup {
    color: #fff;
}
.setup .setupForm {
    margin: 15px;
    background: url(../img/tile.gif);
    border: 30px solid #fdc400;
    border-left: 4px solid #fdc400;
    border-right: 4px solid #fdc400;
    border-top: 0;
}
.setup .setupForm h1 {
    font-size: 40px;
    margin: 0 0 20px;
    padding: 0px 0 15px 10px;
    border-bottom: 18px solid #000;
    vertical-align: middle;
    height: 55px;
    background: #fdc400;
    color: #000;
}
.setup .setupForm h1::before {
    content: "";
    background: url(../img/monitor/stop-circle.svg) no-repeat;
    background-size: 45px 45px;
    display: inline-block;
    width: 45px;
    height: 45px;
    padding: 0;
    margin: 12px 14px -8px 8px;
}
.setup .setupForm div {
    margin: 15px 20px 26px;
    position: relative;
}
.setup .setupForm div:last-child {
    margin-bottom: 26px;
}
.setup label {
    cursor: pointer;
    border: 1px solid rgba(253, 196, 0, 0.5);
    margin: 0 2px;
    padding: 2px 12px;
    display: inline-block;
    border-radius: 25px;
    transition: 0.5s;
	line-height: normal;
}
.setup label > input {
	margin: 8px 8px 8px 0px;
	display: inline;
}
.setup .setupForm label {
    cursor: pointer;
    border: 1px solid rgba(253, 196, 0, 0.5);
    padding: 2px 12px;
    display: inline-block;
    border-radius: 25px;
    transition: 0.5s;
}
.setup label:hover {
    background: rgba(255, 255, 255, 0.15);
}
.setup label.titel,
.setup label.titel-side {
    padding: 0;
    font-size: 20px;
    margin: 10px 0;
    background: none;
    display: block;
    cursor: default;
    border: 0 none;
}
.setup label.titel-side {
    display: inline-block;
}
.setup input {
    display: inline-block;
}
.setup .setupForm input {
    display: inline-block;
}
.setup .setupForm input[type="text"],
.setup .setupForm input[type="number"] {
    border: 1px solid #fdc400;
    background: rgba(96, 56, 1, 0.50);
    font-size: 30px;
    width: 120px;
    padding: 8px;
    color: #fff;
    text-align: center;
    transition: 0.5s;
}
.setup .setupForm input[type="text"]:hover,
.setup .setupForm input[type="number"]:hover {
    background: rgba(96, 56, 1, 1);
}
.setup .setupForm input[name="hst"] {
    width: 100%;
    text-align: left;
}
.setup .setupForm div.in {
    display: inline-block;
}
.setup .setupForm div:nth-child(3) {
    line-height: 20px;
}
.setup .setupForm div:nth-child(3) input {
    margin-left: 10px;
	margin-right: 10px;
}
.setup .setupForm div:nth-child(3) input[type="checkbox"]:nth-child(1) {
    margin-left: 0;
}
.setup .setupReloadT {
    margin: 15px;
}
.setup .setupMonitor {
    margin: 10px 0 40px 15px;
    font-size: 34px;
    padding: 10px 20px;
    background: #fdc400;
    border: 1px solid #000;
    cursor: pointer;
    box-shadow: 0px 12px 11px -4px #00000073;
}
.setup .setupMonitor::before {
    content: "";
    background: url(../img/monitor/stop-circle.svg) no-repeat;
    background-size: 38px 38px;
    display: inline-block;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0 3px 0 0;
    vertical-align: text-top;
}
.setup .livePoints {
    max-height: 190px;
    position: absolute !important;
	top: 104%;
    left: 0;
    right: 0;
    margin: -3px 0 0 0 !important;
    background: rgba(64, 37, 0, 1);
    z-index: 5;
    border: 1px solid #fdc400;
    border-top: 0 none;
    overflow-y: scroll;
}
.setup .livePoints:empty {
	display: none;
}
.setup .livePoints span {
    display: block;
    border-bottom: 1px solid #fdc400;
    padding: 10px;
    cursor: pointer;
}
.setup .livePoints span:hover {
    background: rgba(96, 56, 1, 1);
}
.setup input.stopid {
    display: none;
}
.single {
    margin: 1%;
    position: relative;
    /*background: #fdc400;*/
}
.dual {
    float: left;
    width: 49%;
    margin: 1% 0.5%;
    position: relative;
    /*background: #fdc400;*/
}
.monitorKopf {
    background: #fdc400;
    background: -moz-linear-gradient(#f1d987,#fdc400 29.50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(#f1d987,#fdc400 29.50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(#f1d987,#fdc400 29.50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1d987', endColorstr='#fdc400',GradientType=0 ); /* IE6-9 */
    font-size: 420%;
    display: flex;
    position: relative;
    border-radius: 17px 17px 0 0;
}
.monitorKopf .stvo-h {
    min-height: 70px;
	background: #fff;
    border-radius: 17px 0 50px 0;
    vertical-align: middle;
    padding: 0 23px 0 17px;
    z-index: 99;
    display: inline-flex;
}
.monitorKopf img {
    min-width: 60px;
}
.monitorKopf span {
    margin: auto 20px;
    display: inline-block;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 80px;
	font-weight: 900;
    text-shadow: 1px 1px #cbcbcb;
}
.monitorKopf span.wegzeit {
    position: absolute;
    background: url(../img/fuss.png) 0px 0px no-repeat;
    background-size: contain;
    top: 8px;
    right: 0px;
    padding: 0 0 0 40px;
    line-height: inherit;
    overflow: hidden;
    font-size: 80%;
}
.monitorKopf span.wegzeit:empty {
    display: none;
}
.display {
	width: auto; /* 100% */
    margin: 0 auto;
    background: url(../img/tile.gif);
    position: relative;
    display: table;
    border-left: 1px solid #fdc400;
    border-right: 1px solid #fdc400;
}
.table {
    width: 100%;
	display: table;
}
.frame {
	display: table-row-group;
}
.frameRow {
	display: table-row;
    height: 55px;
}
.display .kopf {
    height: 42px;
    background: #000;
    color: #fff;
    font-size: 140%;
    display: table-header-group;
}
.display .kopf .frameCell {
	padding: 10px 10px;
    border-bottom: 0 none;
    line-height: 19px !important;
    height: 22px;
	font-weight: 900;
}
.frameCell .marquee {
    overflow: hidden;
    animation: marqueee 12s linear infinite;
}
.display .infos {
    font-size: 275%; /*300*/
    color: #f18b02;
}
.display .infos .frameCell {
    border-right: 1px solid rgba(95, 56, 1, 0.80);
}
.display .infos .frameCell:empty {
    content: " ";
}
.display .infos:last-child .frameCell {
    border-bottom: 0 none;
}
.display .infos .frameCell:last-child {
    border-right: 0 none;
}
.frameCell {
	display: table-cell;
	padding: 4px 10px;
    border-bottom: 1px solid #603801; /*#603801*/
    line-height: 2.9rem /*48px*/;
	vertical-align: middle;
    cursor: pointer;
}
.produkt {
    border-right: 0 none !important;
}
.produkt span {
    width: 30px;
    height: 30px;
    margin: 0px 0px;
    display: block;
    opacity: 0.9;
	background-repeat: no-repeat !important;
}
.produkt span.CityBus,
.produkt span.IntercityBus {
    background: url(../img/monitor/transport-bus.svg);
}
.produkt span.PlusBus {
    background: url(../img/monitor/transport-plusbus.svg);
}
.produkt span.Tram {
    background: url(../img/monitor/transport-tram.svg);
}
.produkt span.Train {
    background: url(../img/monitor/transport-train.svg);
}
.produkt span.SuburbanRailway {
    background: url(../img/monitor/transport-metropolitan.svg);
}
.produkt span.Ferry {
    background: url(../img/monitor/transport-ferry.svg);
}
.produkt span.Lift,
.produkt span.Cableway {
    background: url('../img/monitor/transport-lift.svg');
}
.produkt span.Alita,
.produkt span.Taxi,
.produkt span.HailedSharedTaxi {
    background: url('../img/monitor/transport-alita.svg');
}
.produkt span.BusOnRequest {
    background: url(../img/monitor/transport-BusOnRequest.png);
    width: 32px;
    height: 32px;
}
.produkt span.Subway {
    background: url(../img/monitor/transport-u_t.svg);
}
.produkt span.Undefined {
    background: none;
    width: 32px;
    height: 32px;
}
.linie {
    max-width: 82px;
    width: 82px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
	font-weight: 900;
    text-align: right !important;
}
.linie, .ziel {
    text-align: left;
}
.ziel .add {
	margin-left: 10px;
	display: inline-block;
	opacity: 0.8;
	background-repeat: no-repeat !important;
}
.ziel .add[data-name="RouteChanges"] {
	width: 55px;
    height: 35px;
	background: url(../img/monitor/routechanges.svg);
}
.ziel .add.seats {
	width: 30px;
    height: 19px;
	opacity: 0.7;
}
/*1*/
.ziel .add[data-name="ManySeats"] {
	background: url(../img/monitor/occupancy_ManySeats.svg);
}
/*2*/
.ziel .add[data-name="StandingOnly"] {
	background: url(../img/monitor/occupancy_FewSeats.svg);
}
.ziel .add[data-name="FewSeats"] {
	background: url(../img/monitor/occupancy_FewSeats.svg);
}
/*3*/
.ziel .add[data-name="NoSeats"] {
	background: url(../img/monitor/occupancy_NoSeats.svg);
}
.ziel .add[data-name="Full"] {
	background: url(../img/monitor/occupancy_NoSeats.svg);
}
/*no*/
.ziel .add[data-name="Unknown"] {
	background: url(../img/monitor/occupancy_Unknown.svg);
}
.ziel {
    width: 100%;
    max-width: 50px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}
.infos .steig {
    text-align: center;
    color: rgba(241, 139, 2, 0.6);
	/**/
	overflow: hidden;
    white-space: nowrap;
    max-width: 40px;
    width: 40px;
	font-size: 75%;
}
.abfahrtsZeit {
    max-width: 80px;
    width: 80px;
    display: block;
    text-align: right;
}
.abfahrtsZeit.std {
	font-size: 75%;
}
.abfahrtsZeit.std .time[data-name="Std"] {
	margin-left: 4px;
	font-size: 55%;
}
/*
.abfahrtsZeit.Delayed {
    color: rgb(253, 78, 0);
    animation-name: delayBlink;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
*/
.abfahrtsZeit::after {
    content: '+';
    font-size: 1.2rem;
    vertical-align: top;
    margin: 0;
    padding: 0;
    line-height: normal;
    color: #ffffff00;
}
.abfahrtsZeit.Delayed::after {
    color: #f18b02;
}
@keyframes delayBlink {
    from {
        color: rgba(241, 139, 2, 1);
        background: rgba(253, 78, 0, 0.1);
    }
    to {
        color: rgba(253, 78, 0, 1);
        /*background: rgba(241, 139, 2, 0.2);*/
    }
}
.monitorArsch {
    padding: 12px 0;
    background: #fdc400;
    font-size: 80%;
    position: relative;
    border-radius: 0 0 17px 17px;
}
.monitorArsch .endText {
    padding: 0 0 0 20px;
    font-size: 10px;
    font-weight: 100 !important;
}
.monitorArsch .copyright {
    margin: 0 5px 0 0;
    padding: 0 5px 0 0;
    font-size: 8px;
    border-right: 1px solid #000;
}
.monitorArsch i {
    font-size: 14px;
	font-weight: 100;
}
.monitorArsch img {
    position: absolute;
    right: 14px;
    bottom: 13px;
}
.logodeunternehmen {
    display: inline-block;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 9px;
}
.logodeunternehmen span {
    width: 49px;
    height: 20px;
    display: inline-block;
    background: none;
    background-size: contain !important;
    background-position: left !important;
    background-repeat: no-repeat !important;
    padding: 0;
    vertical-align: top;
    font-size: 0.36rem;
    text-align: center;
}
.logodeunternehmen span:nth-child(1) {
    background: url(../img/dvb_logo.svg);
    margin-right: -5px;
}
.logodeunternehmen span:nth-child(2) {
    width: 20px;
    height: auto;
    font-weight: 900 !important;
}
.logodeunternehmen span:nth-child(3) {
    background: url(../img/vvo_logo.svg);
}
.refresh .display .infos,
.err .display .infos {
    opacity: 0.2;
}
.refresh .display::after {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    text-align: center;
    /*content: "... Aktualisierung ...";*/
    color: #fff;
    font-size: 250%;
}
.err .display .infos div {
    text-align: center;
    color: #ff0000;
}
/*.err .display::after {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    text-align: center;
    content: "! Lese-Fehler ! Internet ?";
    color: #ff0000;
    font-size: 250%;
}*/
@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}
.js-marquee-wrapper {
    display: inline-flex;
}

.infos {
    -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
  
  /** Let's transfom in a smooth way **/
	-webkit-transition: -webkit-transform .3s;
	transition: transform .3s;
}
.frameRow {
    -webkit-transform: translateZ(50px) translateY(0px);
            transform: translateZ(30px);
}
.frameRow.neu {
 -webkit-transform: rotateX(-90deg) translateZ(-30px);
        transform: rotateX(-90deg)  translateZ(-30px);;
}
.infos.flip {
  	-webkit-transform: rotateX(90deg) translateZ(0px);
	          transform: rotateX(90deg) translateZ(0px);
}

.preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    visibility: hidden;
}
.refresh .preloader {
	visibility: visible;
}
.preloader:after {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    content: "... Aktualisierung ...";
    color: #fff;
    font-size: 80%;
}
.loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ebff00;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
.loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ffb323;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
.loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #00c900;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@media (max-width:560px) {
	body {
		font-size: 0.6rem;
	}
	.frameCell {
    	display: table-cell !important;
		padding-top: 0px;
		padding-bottom: 0px;
	}
    .produkt span {
        width: 22px;
        height: 22px;
    }
	.ziel {
		width: 82%;
	}
	.abfahrtsZeit {
		width: 18%;
	}
}
@media (max-width:411px) {
    .ziel {
        width: 63%;
    }
    .monitorArsch .endText {
        padding: 0;
        text-align: center;
        display: block;
        margin: 28px 0 0;
    }
	.monitorArsch .logodeunternehmen {
        position: inherit;
        top: 0;
        float: right;
    }
}