/*@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&display=swap&subset=latin-ext');*/

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('font/roboto-v20-latin-ext_latin-300.woff2') format('woff2'),
       url('font/roboto-v20-latin-ext_latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'),
       url('font/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'),
       url('font/roboto-v20-latin-ext_latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('font/roboto-v20-latin-ext_latin-700.woff2') format('woff2'),
       url('font/roboto-v20-latin-ext_latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Roboto Black'), local('Roboto-Black'),
       url('font/roboto-v20-latin-ext_latin-900.woff2') format('woff2'),
       url('font/roboto-v20-latin-ext_latin-900.woff') format('woff');
}

@keyframes progress {
    0% { width: 0; }
    98% { width: 100%; }
    100% { width: 0; }
}

@keyframes sp-cubemove {
    25% { transform: translateX(42px) rotate(-90deg) scale(0.5); }
    50% { transform: translateX(42px) translateY(42px) rotate(-180deg); }
    75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
    100% { transform: rotate(-360deg); }
}

body { font-family: 'Roboto',sans-serif; background-color: whitesmoke; scrollbar-color: rgb(183, 187, 14) #313131; overscroll-behavior: none; }
.content { width: 100%; }
#bottom { position: fixed; bottom: 0; right: 0; background-color: gray; color: black; font-size: .45em; padding: 1px; }

#map { width: 100%; height: 100%; position: fixed; }

.popover-inner { max-width: 1200px !important; }
.popover-content { padding: 0 !important; cursor: default; }
.popover { font-family: 'Roboto',sans-serif; max-width: 1200px !important; opacity: .95 !important; padding: 0 !important; }

#spinner { position: fixed; display: block; width: 57px; height: 57px; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 1; visibility: visible; transition: visibility 0.25s, opacity 0.25s; }
#spinner.nospin { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
.cube1, .cube2 { background-color: #88888888; width: 15px; height: 15px; position: absolute; top: 0; left: 0; animation: sp-cubemove 1.8s infinite ease-in-out; }
.cube2 { animation-delay: -0.9s; }

.ol-control button { font-family: 'Roboto',sans-serif; width: 2em; height: 2em; }
.ol-control button:focus { outline: none; }
.ol-attribution { font-size: 0.7em; }
.ol-control.ol-bar.ol-top.ol-left { top: 7em; }
.ol-touch .ol-control.ol-bar.ol-top.ol-left { top: 8em; }
.ol-compass, .ol-geolocation { font-weight: inherit; }
.ol-control button { background-color: rgba(0, 68, 137, .5); }
.ol-control button:hover, .ol-geolocation button.hover { background-color: rgba(0, 68, 137, .7); }
.ol-control.ol-hidden button { background-color: rgba(0, 68, 137, .2); }
.ol-control button { transition: background-color .25s linear; }
.ol-hidden button { cursor: default; }

.route-bus { color: #0078a0; background-color: white; }
.route-busN { color: white; background-color: #0078a0; }
.route-busSub { color: #191919; background-color: white; }
.route-busSubX { color: #191919; background-color: #ffaa1e; }
.route-busSubN { color: white; background-color: #09003e; }
.route-busX { color: #0078a0; background-color: #ffaa1e; }
.route-busXN { color: #ffaa1e; background-color: #0078a0; }
.route-busSpec { color: #8fbc19; background-color: white; }
.route-train { color: #0f1e41; background-color: white; }
.route-ferry { color: #00a4a7; background-color: white; }
.route-tram { color: #780200; background-color: white; }
.route-tramN { color: white; background-color: #780200; }
.route-tramX { color: #780200; background-color: #ffaa1e; }
.route-metroA { color: white; background-color: #00a562; }
.route-metroB { color: black; background-color: #f8b322; }
.route-metroC { color: white; background-color: #cf003d; }
.route-metroD { color: white; background-color: #008cbe; }
.route-funicular { color: #c9d022; background-color: white; }
.route-trolley { color: #80166f; background-color: white; }

#vehicleWindowContent { border-radius: 5px; padding: 5px; margin: -1px; }
#vehicleWindowContent .routeHeader { text-transform: uppercase; font-size: 1.2em; font-weight: 900; color: white; background-color: #323232;
								white-space: nowrap; border-radius: 6px 6px 0 0; padding: 5px; margin: -5px -5px 0 -5px; cursor: pointer; }
#vehicleWindowContent .routeHeader .route { display: inline-block; vertical-align: top; }
#vehicleWindowContent .routeHeader span.routeTypeImg img { height: 1.25em; vertical-align: bottom; margin: 0px 3px 3px; }
#vehicleWindowContent .routeHeader .routeId { border-radius: 5px; font-size: 1.1em; padding: 0 4px; }
#vehicleWindowContent .routeHeader span.headsignImg img { max-height: .8em; vertical-align: middle; margin: 4px 6px 6px; }
#vehicleWindowContent .routeHeader .headsign { line-height: 0.8em; display: inline-block; vertical-align: middle; margin-right: 25px; }
#vehicleWindowContent .routeHeader .nextHeadsign { font-size: 0.6em; line-height: 0.6em; text-transform: none; font-weight: normal; }

#vehicleWindowContent .currentDelay { text-align: center; margin: 0 -5px; }
#vehicleWindowContent .wasUpdated { color: gray; font-size: .75em; white-space: nowrap; }
#vehicleWindowContent .currentDelay span { font-weight: bold; }
#vehicleWindowContent .currentDelay.green { background-color: rgb(183, 187, 14); }
#vehicleWindowContent .currentDelay.inactive { background-color: rgb(150,150,150); }
#vehicleWindowContent .currentDelay.orange { background-color: rgb(242,184,30); }
#vehicleWindowContent .currentDelay.red { background-color: #ff6745; }
#vehicleWindowContent table.vehicleWindowBody { margin: 5px; }
#vehicleWindowContent table.vehicleWindowBody tr td { padding: 1px 3px; white-space: nowrap; max-width: 250px; overflow: hidden; }
#vehicleWindowContent table.vehicleWindowBody tr td:nth-child(1) { text-align: right; font-size: 0.8em; line-height: 1em; }
#vehicleWindowContent table.vehicleWindowBody tr td:nth-child(3) { font-size: 0.9em; line-height: 1em; padding-left: 10px; }
#vehicleWindowContent table.vehicleWindowBody tr td:nth-child(3) sup { font-size: 0.7em; line-height: 1em; }
#vehicleWindowContent table.vehicleWindowBody tr td:nth-child(2) { color: black;  }
#vehicleWindowContent table.vehicleWindowBody tr.nextStop td:nth-child(2) { font-weight: bold; }
#vehicleWindowContent .equipment img { max-height: 1.7em; padding: 1px 2px; }
#vehicleWindowContent table.vehicleWindowBody tr td.operator { font-weight: lighter; }

#vehicleWindowContent div.timetable { margin-top: 10px; text-align: right; }
#vehicleWindowContent div.timetable div { display: inline-block; color: black; background-color: #dfdfdf; padding: 1px 10px; border-radius: 5px; line-height: 2em; cursor: pointer; }
#vehicleWindowContent div.timetable div:hover { text-decoration: underline; }

#vehicleWindowContent div.sa_img { text-align: center; padding: 20px; }

#toggleVehicleWindowClass { position: absolute; top: 0px; right: 5px; max-width: 50px; cursor: pointer; }
#toggleVehicleWindowClass span { display: inline-block; width: 25px; height: 30px; background-image: url('img/o_mini.svg'); background-size: contain; background-repeat: no-repeat; margin-top: 3px; margin-right: -1px; opacity: .5 }
#vehicleWindowContent.minimized #toggleVehicleWindowClass span { display: inline-block; width: 20px; height: 20px; background-image: url('img/o_maxi.svg'); background-size: contain; background-repeat: no-repeat; margin-top: 10px; }


#vehicleWindowContent.minimized { background-color: #323232; }
#vehicleWindowContent.minimized span.headsignImg { display: none; }
#vehicleWindowContent.minimized div.headsign { display: none; }
#vehicleWindowContent.minimized div.route .routeId { margin-right: 30px; }
#vehicleWindowContent.minimized .routeHeader { padding-top: 7px; }
#vehicleWindowContent.minimized .wasUpdated { display: none; }
#vehicleWindowContent.minimized .currentDelay { display: none; }
#vehicleWindowContent.minimized .additional_info_div { display: none; }
#vehicleWindowContent.minimized table.vehicleWindowBody { display: none; }
#vehicleWindowContent.minimized .timetable  { display: none; }

div#stopInfowindowContent { min-width: 300px; }
div#stopInfowindowContent .lin { white-space: nowrap; }

div#stopInfowindowContent h2 { background-color: #313131; color: white; font-size: 1.2em; font-weight: 900;
								white-space: nowrap; border-radius: 6px 6px 0 0; padding: 5px; margin: -5px -1px 0 -1px; text-align: center; }
div#stopInfowindowContent div.hdr3 { background-color: #B5B5B5; text-align: center; margin: -5px -1px 0 -1px; padding: 3px; color: black;  }

div#stopInfowindowContent table.departures { color: white; width: 100%; margin-bottom: 10px; }
div#stopInfowindowContent table.departures tr { background-color: #313131; }
div#stopInfowindowContent table.departures tr:nth-child(odd) { background-color: #181818; }
div#stopInfowindowContent table.departures tr.hdr { font-weight: bold; text-align: center; }
div#stopInfowindowContent table.departures tr td { padding: 0 2px; }
div#stopInfowindowContent table.departures tr.hdr td:first-child { text-align: left; padding-left: 5px; }
div#stopInfowindowContent div.notice { padding: 5px; text-align: center; }

div#stopInfowindowContent table.departures tr td.lin span { text-align: center; font-weight: bold; border-radius: 5px; font-size: 1.1em; padding: 0 4px; display: inline-block; min-width: 2.5em; border: 1px solid #313131; }
div#stopInfowindowContent table.departures tr:nth-child(odd) td.lin span { border-color: #181818; }
div#stopInfowindowContent table.departures tr td.np img { max-height: 16px; max-width: 12px; }
div#stopInfowindowContent table.departures tr td.smer { white-space: nowrap; max-width: 160px; min-width: 120px; overflow-x: hidden; display: block; }
div#stopInfowindowContent table.departures tr td.smer img { max-height: 16px; max-width: 12px; margin-right: 3px; }
div#stopInfowindowContent table.departures tr td.stan { text-align: center; font-weight: bold; }
div#stopInfowindowContent table.departures tr td.cas { text-align: center; }
div#stopInfowindowContent table.departures tr td.zpoz { text-align: right; padding-right: 10px; }
div#stopInfowindowContent table.departures .no_gps { color: #B5B5B5; }

div#stopInfowindowContent div.additioal_info_container { text-align: center; }
div#stopInfowindowContent div.additioal_info_container div { padding-left: 17%; margin-bottom: 10px; }
div#stopInfowindowContent div.additioal_info_container table.additioal_info tr { background-color: white; }
div#stopInfowindowContent div.additioal_info_container table.additioal_info tr td.lefttd { text-align: right; color: gray; }
div#stopInfowindowContent div.additioal_info_container table.additioal_info tr td.righttd { background-color: white; color: black; text-align: left; padding-left: 5px }
div#stopInfowindowContent div.additioal_info_container table.additioal_info tr td.righttd  img { height: 1.3em; }

div#stopInfowindowContent div.bottom_link { text-align: center; padding: 2px; margin-bottom: 10px; }
div#stopInfowindowContent div.bottom_link a { color: black; text-align: center; background-color: #B5B5B5; padding: 2px 10px; border-radius: 5px; }

div.stopInfowindow span.route_outside_pid { font-weight: lighter !important; font-size: .7em !important; border: none !important; }

.lines_list { line-height: 25px; }
.lines_list div { padding: 0px 3px; }
.routeListItem img { max-height: 10px; vertical-align: baseline; }
.routeListItem { white-space: nowrap; background-color: #313131; color: white; font-weight: bold; border-radius: 5px; padding: 0 5px; }



.platform_lines_list { line-height: 20px; }
.platformRouteListItem img { max-height: 10px; }
.platformRouteListItem span.routeName { border: 1px solid; font-weight: bold; border-radius: 5px; padding: 0 5px; display: inline-block; text-align: center; min-width: 2.9em; }
.platformRouteListItem { margin: 3px; font-size: .9em; line-height: 1.3em; color: black; }



#timetableDiv .route_info { background-color: #181818; color: white; font-size: 1.5em; padding: 5px; white-space: nowrap; padding-right: 20px; }
#timetableDiv .route_info img { max-height: 16px; padding: 0 5px; margin-bottom: 4px  }

#timetableDiv { position: absolute; top: 0; left: 0;  font-size: .8em;  padding-top: 1.4em; opacity: 0; z-index: 9999; transition: opacity 0.25s; }
#timetableDiv div.innerTimetable { background-color: transparent; max-height: 250px; }
#timetableDiv div.trip_header {  font-size: 1.15em; font-weight: bold; background-color: #B5B5B5; }
#timetableDiv table.timetable { border: 2px solid gray; border-radius: 10px; font-size: 1.15em; border-collapse: collapse; color: white; width: 100%; }
#timetableDiv table.timetable thead th { text-align: left; padding: 4px 5px 4px 5px; background-color: #313131; color: white; font-size: .85em; }
#timetableDiv table.timetable tr td { border: none; padding: 0 5px; }

#timetableDiv table.timetable thead { display: inherit; width: 100%; background-color: #313131; }
#timetableDiv table.timetable tbody { display: block; overflow-y: auto; overflow-x: hidden; max-height: 45vh; background-color: #313131; }


#timetableDiv table.timetable tr { background-color: #313131; }
#timetableDiv table.timetable tr:nth-child(odd) { background-color: #181818; }

#timetableDiv table.timetable tr td.stopname { min-width: 150px; max-width: 200px; width: 100%; white-space: nowrap; overflow: hidden; }

#timetableDiv span.measuredStop { font-weight: bold; color: rgb(183, 187, 14); vertical-align: bottom; }
#timetableDiv span.unknown { font-weight: normal; color: #B5B5B5; padding-right: 2px; vertical-align: bottom; }

#timetableDiv div.closeButton { font-weight: lighter; position: absolute; top: 0; right: 0; text-align: right; padding: 1px 5px; width: 10em; margin: -7px 0;
                                height: 22px; background-color: black; color: #B5B5B5; border: 1px solid gray; border-radius: 35px 5px 0 0; cursor: pointer; white-space: nowrap; }
#timetableDiv div.closeButton span { font-weight: bold; color: white; border: 1px solid #B5B5B5; padding: 0 5px; border-radius: 50%; font-size: .8em; }

#timetableDiv .notice { font-size: 1.5em; color: rgb(242,184,30); background-color: white; padding: 50px; border: 2px solid #181818; }

#timetableDiv table.timetable .measuredStop.ontime { color: #d2d70f; }
#timetableDiv table.timetable .measuredStop.delayed { color: #f2b81e; }
#timetableDiv table.timetable .measuredStop.big_delay { color: #ff6745; }


#filter { background-color: white; color: black; position: fixed; bottom: 0; padding: 3px 10px; border-radius: 5px; opacity: .8; }
#filter:hover { opacity: 1; }
#filter_lin { font-size: .85em; max-width: 140px; }


#progressbar { z-index: 9999; height: 1px; position: fixed; top: 0; background-color: #004489; filter: blur(3px); animation: progress linear 10s 1; }

div#stopInfowindowContent div.bottom_link_odj_table { text-align: center; padding: 2px; margin-bottom: 10px; }
div#stopInfowindowContent div.bottom_link_odj_table a { background-color: #B5B5B5; color: black; text-align: center; padding: 2px 10px; border-radius: 5px; }


.ol-zoom {
   left: unset;
   right: 10px;
}

.ol-unselectable.ol-control.ol-bar.ol-top.ol-left {
	left: unset;
	right: 10px;
}

div#alert { position: absolute; top: 0px; left: 0px; background-color: yellow; font-weight: bold; opacity: .9; font-size: 1.4em; }

table.timetable tr.block_trip_header {  }
table.timetable tr.block_trip_header td { text-align: left; font-size: 28px; }
table.timetable tr.block_trip_header div.as_next_route { padding: 10px 0px 0px 3px; font-size: 10px; margin-bottom: -8px; }
table.timetable tr.block_trip_header td span { font-size: 18px; }
table.timetable tr.block_trip_header td img {  max-height: 16px; margin-bottom: 4px; padding: 0px 3px }
table.timetable tr.block_trip_header td span.td_route_info { max-height: 18px; padding: 0 2px; margin-bottom: 4px; }
table.timetable tr.block_trip_header td span.td_routeId { font-weight: bold; }
table.timetable tr.block_trip_header td span.td_headsign { font-weight: bold; }
table.timetable tr.block_trip_header td span.td_route_info {  }


table.timetable thead.trip_header tr th.header_stopname { min-width: 120px; }
table.timetable thead.trip_header tr th.w50 { width: 80px; }
table.timetable thead.trip_header tr th.w70 { width: 120px; }

table.timetable thead.trip_header.wider tr th.header_stopname { min-width: 140px; }
table.timetable thead.trip_header.wider tr th.w50 { width: 40px; }
table.timetable thead.trip_header.wider tr th.w70 { width: 70px; }

table.timetable tr td.w50 { width: 50px; }
table.timetable tr td.w70 { width: 90px; }