/* fira-sans-regular - latin */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/Fira-Sans/fira-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/Fira-Sans/fira-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
  }
  
  /* fira-sans-500 - latin */
  @font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/Fira-Sans/fira-sans-v15-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/Fira-Sans/fira-sans-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-500.woff') format('woff'), /* Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-500.svg#FiraSans') format('svg'); /* Legacy iOS */
  }
  
  /* fira-sans-600 - latin */
  @font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 600;
    src: url('./fonts/Fira-Sans/fira-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/Fira-Sans/fira-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-600.svg#FiraSans') format('svg'); /* Legacy iOS */
  }
  
  /* fira-sans-700 - latin */
  @font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/Fira-Sans/fira-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/Fira-Sans/fira-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-700.svg#FiraSans') format('svg'); /* Legacy iOS */
  }
  
  /* fira-sans-800 - latin */
  @font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 800;
    src: url('./fonts/Fira-Sans/fira-sans-v15-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/Fira-Sans/fira-sans-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-800.woff') format('woff'), /* Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-800.svg#FiraSans') format('svg'); /* Legacy iOS */
  }
  
  /* fira-sans-900 - latin */
  @font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 900;
    src: url('./fonts/Fira-Sans/fira-sans-v15-latin-900.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/Fira-Sans/fira-sans-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-900.woff') format('woff'), /* Modern Browsers */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/Fira-Sans/fira-sans-v15-latin-900.svg#FiraSans') format('svg'); /* Legacy iOS */
  }
html {
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font: 'Fira Sans', 'sans-serif';
}
.header, .provider {
 
    font-family: 'Fira Sans';
}
html,
body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    border: none;
}

.h-100 {
    max-width: 100%;
}

#preload-wrapper {
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 99999999999999999;
    position: absolute;
}

#preload-wrapper .loadingio-spinner-spin-23koiscywvn,
#fallback .loadingio-spinner-spin-23koiscywvn {
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#fallbackTable {
    height: initial!important;
}

@keyframes ldio-sphskhpw0v {
    0% {
        opacity: 1;
        backface-visibility: hidden;
        transform: translateZ(0) scale(1.5, 1.5);
    }
    100% {
        opacity: 0;
        backface-visibility: hidden;
        transform: translateZ(0) scale(1, 1);
    }
}

.ldio-sphskhpw0v div > div {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d3650;
    animation: ldio-sphskhpw0v 0.7407407407407407s linear infinite;
}

.ldio-sphskhpw0v div:nth-child(1) > div {
    left: 136px;
    top: 96px;
    animation-delay: -0.6790123456790123s;
}

.ldio-sphskhpw0v > div:nth-child(1) {
    transform: rotate(0deg);
    transform-origin: 140px 100px;
}

.ldio-sphskhpw0v div:nth-child(2) > div {
    left: 131px;
    top: 116px;
    animation-delay: -0.6172839506172838s;
}

.ldio-sphskhpw0v > div:nth-child(2) {
    transform: rotate(30deg);
    transform-origin: 135px 120px;
}

.ldio-sphskhpw0v div:nth-child(3) > div {
    left: 116px;
    top: 131px;
    animation-delay: -0.5555555555555555s;
}

.ldio-sphskhpw0v > div:nth-child(3) {
    transform: rotate(60deg);
    transform-origin: 120px 135px;
}

.ldio-sphskhpw0v div:nth-child(4) > div {
    left: 96px;
    top: 136px;
    animation-delay: -0.4938271604938271s;
}

.ldio-sphskhpw0v > div:nth-child(4) {
    transform: rotate(90deg);
    transform-origin: 100px 140px;
}

.ldio-sphskhpw0v div:nth-child(5) > div {
    left: 76px;
    top: 131px;
    animation-delay: -0.4320987654320987s;
}

.ldio-sphskhpw0v > div:nth-child(5) {
    transform: rotate(120deg);
    transform-origin: 80px 135px;
}

.ldio-sphskhpw0v div:nth-child(6) > div {
    left: 61px;
    top: 116px;
    animation-delay: -0.3703703703703703s;
}

.ldio-sphskhpw0v > div:nth-child(6) {
    transform: rotate(150deg);
    transform-origin: 65px 120px;
}

.ldio-sphskhpw0v div:nth-child(7) > div {
    left: 56px;
    top: 96px;
    animation-delay: -0.3086419753086419s;
}

.ldio-sphskhpw0v > div:nth-child(7) {
    transform: rotate(180deg);
    transform-origin: 60px 100px;
}

.ldio-sphskhpw0v div:nth-child(8) > div {
    left: 61px;
    top: 76px;
    animation-delay: -0.24691358024691354s;
}

.ldio-sphskhpw0v > div:nth-child(8) {
    transform: rotate(210deg);
    transform-origin: 65px 80px;
}

.ldio-sphskhpw0v div:nth-child(9) > div {
    left: 76px;
    top: 61px;
    animation-delay: -0.18518518518518515s;
}

.ldio-sphskhpw0v > div:nth-child(9) {
    transform: rotate(240deg);
    transform-origin: 80px 65px;
}

.ldio-sphskhpw0v div:nth-child(10) > div {
    left: 96px;
    top: 56px;
    animation-delay: -0.12345679012345677s;
}

.ldio-sphskhpw0v > div:nth-child(10) {
    transform: rotate(270deg);
    transform-origin: 100px 60px;
}

.ldio-sphskhpw0v div:nth-child(11) > div {
    left: 116px;
    top: 61px;
    animation-delay: -0.061728395061728385s;
}

.ldio-sphskhpw0v > div:nth-child(11) {
    transform: rotate(300deg);
    transform-origin: 120px 65px;
}

.ldio-sphskhpw0v div:nth-child(12) > div {
    left: 131px;
    top: 76px;
    animation-delay: 0s;
}

.ldio-sphskhpw0v > div:nth-child(12) {
    transform: rotate(330deg);
    transform-origin: 135px 80px;
}

.loadingio-spinner-spin-23koiscywvn {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background: none;
}

.ldio-sphskhpw0v {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.ldio-sphskhpw0v div {
    box-sizing: content-box;
}

#preload-wrapper.loaded {
    visibility: hidden;
}

#lizenz {
    text-align: center;
    font-size: 1.5vh;
    font-size: min(1.5vh, 12pt);
    padding-top: 1%;
    padding-bottom: 0.5%;
}

#time-date {
    flex: 0;
    font-size: 4vh;
    font-size: min(4vh, 26pt);
    font-weight: 600;
    float: right;
    text-align: right;
    margin-right: 35px;
    width: 100%;
}

.header {
    height: 3vh;
    height: min(3vh, 5%);
    width: 100%;
    border: none;
    padding: 2vh;
    padding: max(2vh, 25px) 0;
    display: flex;
    align-items: center;
}

#logo-nvbw,
#zusatzlogo,
#providerlogo,
#lizenzlogo {
    height: 4vh;
    height: min(4vh, 80px);
}

#headerlogo {
    max-width: 100%;
    height: auto;
    height: 4vh;
}

.img-box,
#img-box-lizenz,
#privider-box,
#img-box-zusatz,
#provider-box {
    flex: 1 0;
    padding: 0 10px 0 10px;
}

#img-box-provider,
#img-box-lizenz,
#img-box-zusatz,
#provider-box {
    flex: 0;
}

#img-box {
    border-right: 2px solid #fff;
}

#slogan {
    text-align: center;
    flex: 1 50%;
    font-weight: 700;
    font-size: 2.5vh;
    font-size: min(2.5vh, 28pt);
}

#provider-box {
    text-align: right;
    padding-right: 1vh;
    padding-right: min(1vh, 25px);
}

#titel {
    flex: 1;
    font-size: 2.3vh;
    font-size: min(2.3vh, 26pt);
    text-align: left;
    /*padding: 25px 0;*/
    line-height: 128%;
    margin-left: 1.3vh;
    margin-left: min(1.3vh, 35px);
    justify-content: center;
}

#titel-img {
    /*flex: 1;*/
    /*padding: 25px 0;*/
    margin-left: 1.3vh;
    margin-left: min(1.3vh, 35px);
    /*overflow: hidden;*/
    max-width: 50%;
    max-height: 4vh;
}

#titel-marker {
    flex: 1;
    font-size: 2.5vh;
    font-size: min(2vh, 26pt);
    padding: 5px 10px;
    text-align: center;
    line-height: 2.5vh;
    line-height: max(25pt, 2.5vh);
}

a,
a:visited {
    color: inherit;
    text-decoration: none;
}

.departure {
    display: block;
    width: 100%;
    border: none;
    overflow-x: hidden;
    overflow-y: hidden;
}

#ontime {
    color: green;
}

#delay {
    color: darkorange;
}

#majordelay {
    color: red;
}

table {
    width: 100%;
    height: 100%;
    font-size: 1.5vh;
    font-size: min(1.5vh, 12pt);
    border: none;
    border-collapse: collapse;
}

table tr {
    padding-top: 0.5vh;
    padding-top: min(0.5vh, 5px);
    padding-bottom: 0.5vh;
    padding-bottom: min(0.5vh, 5px);
}

table td {
    height: 2vh;
    height: min(2vh, 20px);
}
table, .trip, #trip_list {
			
    font-family: 'Fira Sans', sans-serif;
    
}
.thead {
    display: table-row;
    border: none;
    font-size: 2vh;
    font-size: min(2vh, 18pt);
    text-align: center;
}

.thead-data {
    height: 2%;
    padding: 1vh;
    padding: min(1vh, 5px) 0;
}

.row {
    display: table-row;
}

.gleis {
    font-size: 2.5vh;
    font-size: min(2.5vh, 22pt);
    font-weight: 700;
    text-align: center;
}

.linie {
    font-size: 2.5vh;
    font-size: min(2.5vh, 22pt);
    font-weight: 700;
    
}

.ziel,
.abfahrt {
    font-size: 2vh;
    font-size: min(2vh, 18pt);
    font-weight: 700;
}

.ziel, .ics {
    padding-left: 2%;
    padding-right: 1%;
}

#ziel-einzeilig {
    font-size: 2vh;
    font-size: min(2.5vh, 22pt);
}

.ics,
.verspätung {
    font-size: 1.5vh;
    font-size: min(1.5vh, 12pt);
    ;
}

.marquee-ics {
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}

.marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    bottom: 0px;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee linear infinite;
    bottom: 0px;
}

.ics-bottom .marquee span, .ics-bottom .no-marquee span {
    font-weight: 700;
}


/* Make it move */

@keyframes marquee {
    0% {
        transform: translate(0%, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

.verspätung {
    text-align: center;
}

.abfahrt {
    width: 10%;
    padding: 1vh;
    padding: min(1vh, 10px);
    text-align: center;
}

 .symbol {
    display: flex;
    justify-content: center; 
align-items: center;
}
.linie .symbol {
    justify-content: initial;
    float: left;
    white-space: nowrap;
    overflow: hidden;
}

.material-icons {
    font-size: 2.3vh;
    font-size: min(2.3vh, 27pt);
    /* Preferred icon size */
}

.linie {
   /*width: 10%;*/
   width: 0;
    padding-left: 1%;
    white-space: nowrap;
}

.gleis {
    max-width: 5%;
    /*width: 5%;*/
}

.haltestelle {
    width: 10%;
    font-size: 1.8vh;
    font-size: min(1.8vh, 14pt);
    padding-left: 1%;
}

.icon {
    margin: 0 80%;
    width: 0;
    padding-left: 1%;
}

.info-main {
    height: 2.5%;
    /*text-overflow: ellipsis;*/
    overflow: hidden;
}

.info-sub {
    height: 1%;
    /*text-overflow: ellipsis;*/
    overflow: hidden;
}

.provider {
    width: 100%;
    /*	font-size: 17pt;*/
    bottom: 0;
    position: absolute;
}

#flex-img {
    padding: 0 2.3%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.ics-bottom {
    font-size: 1.8vh;
    font-size: min(1.8vh, 17pt);
    text-align: center;
    padding-top: 0.75%;
    padding-bottom: 0.75%;
    margin-bottom: 1%;
    overflow: hidden;
}

#fallback {
    text-align: center;
    font-size: 5vh;
    font-size: min(5vh, 50pt);
    font-weight: 700;
    line-height: 150%;
    width: 100%;
    height: 100%;
}

#trip_list_col_fallback {
    grid-area: 1/1/span 2/span 4;
}

#error-code {
    text-align: center!important;
    font-size: 10pt!important;
    background-color: #fff;
}

#verbindung {
    text-align: center!important;
}



.symbol-pic {
    height: 2.5vh;
    height: min(2.5vh, 25pt);
    display: table-cell;
    
}

#lizenz-error {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: absolute;
    color: #fff;
    background-color: red;
    text-align: center;
    font-size: min(5vh, 48pt);
    top: 0;
    padding-top: 50%;
}

#img-box-provider {
    border-right: 2px solid #fff;
}

.trip .thead-data {
    height: 10px;
}

#circle {
    width: 2px;
    background-color: #000;
}

.trip .ziel::before {
    content: "";
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-color: #000;
    border-radius: 50%;
    border-width: 1px;
    display: inline-block;
    border-style: solid;
    margin-left: -8px;
}

.trip #titel {
    text-align: center;
    padding: 5px 0;
    line-height: initial!important;
    margin-left: initial!important;
    font-size: 20pt;
}

.trip .ics {
    padding-left: 10px;
}

.trip table {
    height: initial!important;
}

.trip .haltestelle {
    width: 100%!important;
}

.trip .icon {
    padding-right: 10px;
}

.trip #fallback_row {
    background-color: lightcoral;
    text-align: center;
    font-size: 12pt;
    padding: 5px;
}

.grid-container {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto auto;
}

.grid-item {
    border: 4px solid #fff;
}
@media screen and (min-width: 1920px) { /*Großanzeiger*/
	#titel-marker {
		flex: 1;
		font-size: 5vh;
		font-size: min(5vh, 28pt);
		padding: 5px 10px;
		text-align: center;
		line-height: 2.5vh;
		line-height: max(25pt, 2.5vh);
	}
	#slogan {
		text-align: center;
		flex: 1 50%;
		font-weight: 700;
		font-size: 5vh;
		font-size: min(5vh, 28pt);
	}
	#lizenz {
		text-align: center;
		font-size: 2.5vh;
		font-size: min(2.5vh, 12pt);
		padding-top: 1%;
		padding-bottom: 0.5%;
	}
	#time-date {
		flex: 0;
		font-size: 5vh;
		font-size: min(5vh, 26pt);
		font-weight: 600;
		float: right;
		text-align: right;
		margin-right: 35px;
		width: 100%;
	}
	#logo-nvbw, #zusatzlogo, #providerlogo, #lizenzlogo {
   		height: 6vh;
   		height: min(6vh, 80px);
	}

	#titel-img {
		max-height: 5vh;
  	}
  
  	#headerlogo {
		height: 5vh;
	  }

      .ziel {
          width: 85%;
      }
  .linie {
      width: initial;
  }

}
@media screen and (max-width: 700px) {
    .linie {
       /* width: 20%;*/
       width: initial;
    }
}
@media screen and (max-height: 600px) {
   
	
/* style_hst.css | https://hst.abfahrtsmonitor.net/design/style_hst.css */

.img-linienkachel {
  /* max-height: min(3vh, 28pt); */
  max-height: min(6vh, 28pt)!important;
}

/* style.css | https://hst.abfahrtsmonitor.net/misc/style.css */
}
@media screen and (max-height: 600px) {
  


	#lizenz {
        text-align: center;
        font-size: 8pt;
        padding-top: 1%;
    }
    #time-date {
        flex: 0;
        font-size: 26pt;
        font-weight: 600;
        float: right;
        text-align: right;
        margin-right: 35px;
        width: 100%;
    }
    .header {
        height: min(3vh, 5%);
        width: 100%;
        border: none;
        padding: max(2vh, 25px) 0;
        display: flex;
        align-items: center;
    }
    #slogan {
        text-align: center;
        flex: 1 50%;
        font-weight: 700;
        font-size: 5vh;
        font-size: min(5vh, 28pt);
    }
    #logo-nvbw,
    #zusatzlogo,
    #providerlogo,
    #lizenzlogo {
        height: 4vh;
        height: min(8vh, 80px);
    }
    #headerlogo {
        max-width: 100%;
        height: auto;
        height: 20pt;
    }
    #titel-img {
        /*flex: 1;*/
        /*padding: 25px 0;*/
        margin-left: 1.3vh;
        margin-left: min(1.3vh, 35px);
        overflow: hidden;
        max-width: 50%;
        max-height: 20pt;;
    }
    #provider-box {
        text-align: right;
        padding-right: min(1vh, 25px);
    }
    #titel {
        flex: 1;
        font-size: min(2.3vh, 26pt);
        text-align: center;
        /*padding: 25px 0;*/
        line-height: 128%;
        margin-left: min(1.3vh, 35px);
        justify-content: center;
    }
    #titel-img {
        /*padding: 25px 0;*/
        margin-left: min(1.3vh, 35px);
    }
    #titel-marker {
        flex: 1;
        font-size: min(4vh, 26pt);
        padding: 5px 10px;
        text-align: center;
        line-height: max(25pt, 2.5vh);
    }
    .departure {
        display: block;
        width: 100%;
        border: none;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    table {
        width: 100%;
        height: 100%;
        font-size: min(1.5vh, 12pt);
        border: none;
        border-collapse: collapse;
    }
    table tr {
        padding-top: min(0.5vh, 5px);
        padding-bottom: min(0.5vh, 5px);
    }
    table td {
        height: min(3vh, 20px);
    }
    .thead {
        display: table-row;
        border: none;
        font-size: min(3vh, 18pt);
        text-align: center;
    }
    .thead-data {
        height: 2%;
        padding: min(1vh, 5px) 0;
    }
    .row {
        display: table-row;
    }
    .gleis {
        font-size: 18pt;
        font-weight: 700;
        text-align: center;
    }
    .linie {
        font-size: 22pt;
        font-weight: 700;
      
    }
    .ziel,
    .abfahrt {
        font-size: 18pt;
        font-weight: 700;
    }
    #ziel-einzeilig {
        font-size: 18pt;
    }
    .ics,
    .verspätung {
        font-size: 10pt;
    }
	
  

    .marquee-ics {
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
    }
    .marquee {
        width: 100%;
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        bottom: 0px;
    }
    .marquee span {
        display: inline-block;
        padding-left: 100%;
        text-indent: 0;
        animation: marquee linear infinite;
        bottom: 0px;
    }
    .abfahrt {
        width: 5%;
        padding: 10px;
        text-align: center;
    }
    .icon {
        width: 1%;
    }
    .material-icons {
        font-size: 27pt;
        /* Preferred icon size */
    }
   
    .gleis {
        width: 5%;
    }
    .haltestelle {
        width: 25%;
        font-size: 16pt;
    }
    .icon {
        margin: 0 80%;
    }
    .info-main {
        height: 2.5%;
        /*text-overflow: ellipsis;*/
        overflow: hidden;
    }
    .info-sub {
        height: 1%;
        /*text-overflow: ellipsis;*/
        /*overflow: hidden;*/
    }
    .linie {
        /*text-overflow: ellipsis;*/
        /*overflow: hidden;*/
    }
    .provider {
        width: 100%;
        /*	font-size: 17pt;*/
        bottom: 0;
        position: absolute;
        padding-bottom: 0.5%;
    }
    #flex-img {
        padding: 0 2.3%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .ics-bottom {
        font-size: 10pt;
        text-align: center;
        padding-top: 0.75%;
        padding-bottom: 0.75%;
        margin-bottom: 1%;
        overflow: hidden;
    }
    #fallback {
        text-align: center;
        font-size: 20pt;
        font-weight: 700;
        line-height: 150%;
        width: 100%;
        height: 100%;
    }
    #trip_list_col_fallback {
        grid-area: 1/1/span 2/span 4;
    }
    #error-code {
        text-align: center!important;
        font-size: 10pt!important;
        background-color: #fff;
    }
    #verbindung {
        text-align: center!important;
    }
    .symbol {
        display: flex;
        /*justify-content: center;*/
        align-items: center;
    }
    .symbol-pic {
        height: 18pt;
        display: table-cell;
        padding-left: 5%;
    }
    #lizenz-error {
        width: 100%;
        height: 100%;
        z-index: 999;
        position: absolute;
        color: #fff;
        background-color: red;
        text-align: center;
        font-size: 48pt;
        top: 0;
        padding-top: 50%;
    }
    #img-box-provider {
        border-right: 2px solid #fff;
    }
    .trip .thead-data {
        height: 10px;
    }
    #circle {
        width: 2px;
        background-color: #000;
    }
    .trip .ziel::before {
        content: "";
        height: 10px;
        width: 10px;
        background-color: #fff;
        border-color: #000;
        border-radius: 50%;
        border-width: 1px;
        display: inline-block;
        border-style: solid;
        margin-left: -8px;
    }
    .trip #titel {
        text-align: center;
        padding: 5px 0;
        line-height: initial!important;
        margin-left: initial!important;
        font-size: 20pt;
    }
    .trip .ics {
        padding-left: 10px;
    }
    .trip table {
        height: initial!important;
    }
    .trip .haltestelle {
        width: 100%!important;
    }
    .trip .icon {
        padding-right: 10px;
    }
    .trip #fallback_row {
        background-color: lightcoral;
        text-align: center;
        font-size: 12pt;
        padding: 5px;
    }
    .grid-container {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: auto auto;
    }
    .grid-item {
        border: 4px solid #fff;
    }
    #titel-marker {
       
        font-size: 20pt;
        font-weight: 700;
    }
    #slogan {
        font-weight: 700;
        text-align: center;
        margin-left: 6%;
        font-size: 16pt !important;
    }
}
    @media screen and (max-width: 1080px) {
        .grid-container {
            grid-template-columns: 50% 50%;
            grid-template-rows: auto auto auto auto;
        }
    }
    @media screen and (max-width: 960px) {
        .grid-container {
            grid-template-columns: 100%;
            grid-template-rows: auto auto auto auto;
        }
        .trip-sub {
            display: none;
        }
     
        #titel {
            line-height: 1;
        }

		.haltestelle {
			white-space: normal;
		}
		#titel-img {
			margin-left: 10px;
		}
        #time-date,
        #provider-box {
            display: none;
        }
    }