/* diagram_3_HtmlVersion.css */ /* fallback */ @import url("https://fonts.googleapis.com/css2?family=Istok+Web&display=swap"); @font-face { font-family: 'Material Icons'; font-style: normal; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2'); } @font-face { font-family: 'transportsymbolsregular'; src: url('/styles/fonts/transportsymbols-regular-webfont.woff2') format('woff2'), url('/styles/fonts/transportsymbols-regular-webfont.woff') format('woff'); } @font-face { font-family: 'Johnston100-Medium'; src: url("/styles/fonts/Johnston100-Medium.woff2") format("woff2") } @font-face { font-family: 'wales_sans_bodymedium'; src: url('/styles/fonts/wales-sans-body-medium-web-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Johnston100-Regular'; src: url("/styles/fonts/Johnston100-Regular.woff2") format("woff2") } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Nunito; src: url("/jamesNowell/dashboardFrontend/fonts/Nunito-Light.woff2") format("woff2"); font-weight: 300; } @font-face { font-family: Nunito; src: url("/jamesNowell/dashboardFrontend/fonts/Nunito-Regular.woff2") format("woff2"); font-weight: 400; } @font-face { font-family: Nunito; src: url("/jamesNowell/dashboardFrontend/fonts/Nunito-SemiBold.woff2") format("woff2"); font-weight: 600; } @font-face { font-family: Nunito; src: url("/jamesNowell/dashboardFrontend/fonts/Nunito-Bold.woff2") format("woff2"); font-weight: 700; } @font-face { font-family: Nunito; src: url("/jamesNowell/dashboardFrontend/fonts/Nunito-ExtraBold.woff2") format("woff2"); font-weight: 800; } @font-face { font-family: 'lubalin_graphregular'; src: url('/styles/fonts/lubalin_graph_regular-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal; } /* latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyC0ITw.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; src: url("https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyC0ITw.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; src: url("https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyC0ITw.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } multilingual { font-size: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; } .cc-window { color: rgb(170, 204, 204); background-color: rgb(38, 34, 98); opacity: 1; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; } .cc-window.cc-invisible, .cc-invisible { opacity: 0; } .cc-revoke, .cc-window { position: fixed; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Helvetica, Calibri, Arial, sans-serif; font-size: 16px; line-height: 1.5em; display: -webkit-box; display: flex; flex-wrap: nowrap; z-index: 9999; bottom: 0; } @media screen and (min-width: 1100px) { .cc-revoke, .cc-window { bottom: 1em; } } .cc-window.cc-floating { padding: 2em; max-width: 24em; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .cc-btn, .cc-link { cursor: pointer; } .cc-link { color: white; opacity: 0.8; padding: 0.2em; text-decoration: underline; } .cc-link:hover { opacity: 1; } .cc-link:active, .cc-link:visited { color: rgb(170, 204, 204); } .cc-btn { display: block; padding: 0.4em 0.8em; font-size: 0.9em; font-weight: 700; border-width: 2px; border-style: solid; text-align: center; white-space: nowrap; pointer-events: auto; color: rgb(255, 255, 255); background-color: rgb(247, 21, 89); } .cc-floating > .cc-link { margin-bottom: 1em; } .cc-floating .cc-message { display: block; margin-bottom: 1em; } /* journey animation */ @-webkit-keyframes stagger { from { stroke-dasharray: 30; } 50% { stroke-dasharray: 15; } to { stroke-dasharray: 80; } } @keyframes stagger { from { stroke-dasharray: 30; } 50% { stroke-dasharray: 15; } to { stroke-dasharray: 80; } } @-webkit-keyframes bumpUpBig { 50% { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } } @keyframes bumpUpBig { 50% { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } } @keyframes fly { to { transform: translate(120px, -30px); -webkit-transform: translate(120px, -30px); } } .animation_airport_1 { animation: fly 0.4s ease-in-out; -webkit-animation: fly 0.4s ease-in-out; } .animation_journey_1 { -webkit-animation: stagger 0.8s ease-in-out; animation: stagger 0.8s ease-in-out; } .animation_journey_2 { -webkit-animation: bumpUpBig 0.5s ease-in-out; animation: bumpUpBig 0.5s ease-in-out; } .animation_journey_3 { -webkit-animation: bumpUpBig 0.8s ease-in-out; animation: bumpUpBig 0.8s ease-in-out; } /* compensation */ .animation_compensation_1 { transform-origin: center center; animation: bumpUpBig 1.3s ease; -webkit-animation: bumpUpBig 1.3s ease; } @keyframes throw { 75% { transform: rotate(20deg); } to { transform: rotate(0deg); } } .animation_compensation_2 { animation: throw 0.8s ease; -webkit-animation: throw 0.8s ease; transform-origin: center left; } #compensation-red-alert { opacity: 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .compensation-red-alert-active { opacity: 1 !important; } /* events */ .animation_events_1 { -webkit-animation: rotate 0.8s ease; animation: rotate 0.8s ease; transform-origin: 50%; fill: #ff5722; stroke: #ff5722; } .animation_events_2 { -webkit-animation: bloat 0.5s ease; animation: bloat 0.5s ease; transform-origin: 50%; } /* offers */ @-webkit-keyframes bumpUp { 50% { -webkit-transform: translate(0, 5px); transform: translate(0, 5px); } } @keyframes bumpUp { 50% { -webkit-transform: translate(0, 5px); transform: translate(0, 5px); } } @-webkit-keyframes bumpDown { 50% { -webkit-transform: translate(0, -5px); transform: translate(0, -5px); } } @keyframes bumpDown { 50% { -webkit-transform: translate(0, -5px); transform: translate(0, -5px); } } @-webkit-keyframes rotate { 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes rotate { 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .animation_offers_1, .animation_offersmenu_1 { -webkit-animation: bumpDown 1.3s ease; animation: bumpDown 1.3s ease; } .animation_offers_2, .animation_offersmenu_2 { -webkit-animation: bumpUp 1.3s ease; animation: bumpUp 1.3s ease; } .animation_offers_3, .animation_offersmenu_3 { -webkit-animation: rotate 1.3s ease; animation: rotate 1.3s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } /* alterations */ .animation_alterations_1 { animation: throw 0.8s ease; -webkit-animation: throw 0.8s ease; transform-origin: center center; } .animation_alterations_2 { -webkit-animation: rotate 1.3s ease; animation: rotate 1.3s ease; transform-origin: center center; } .alterations-container, .feedback-terms-container { margin-bottom: 30px; padding: 0; } .feedback-terms-container { text-align: left; } .alterations-list, .feedback-terms-list { padding: var(--template-padding); list-style: none; margin: 0; } .alterations-list-group, .feedback-terms-list-group { padding: 0; } .alterations-list-header, .feedback-terms-list-header { background-color: #0a493e; border-bottom: 1px solid #fff; padding: 13px 0; position: relative; cursor: pointer; } .feedback-terms-list-header { background-color: var(--sw); } .TOCSW > .app > .singlefullitem > #panelAlterations > .alterations > .alterations-container > .alterations-list > .alterations-list-group > .alterations-list-header { background-color: var(--sw); } #panelIndustrialaction > .alterations > .alterations-container > .alterations-list > .alterations-list-group > .alterations-list-header { background-color: #f9dc5c; } #panelIndustrialaction > .alterations > .alterations-container > .alterations-list > .alterations-list-group > .alterations-list-header > .alterations-list-headline { color: black; } .alterations-list-headline, .feedback-terms-list-headline { display: block; padding: 0 55px 0 10px; line-height: 24px; color: #fff; width: 100%; } .alterations-icon, .feedback-terms-icon { position: absolute; width: 35px; height: 100%; right: 22px; top: 0; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' stroke='black' stroke-width='2px' d='M33.79,73.82,55.9,52.61a3.65,3.65,0,0,0,0-5.27L33.77,26.18a10.14,10.14,0,0,1,2.47-11.6l33.6,31a5.83,5.83,0,0,1,0,8.55L36.27,85.42S33.79,85.33,33.79,73.82Z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; transform: rotate(90deg); } .alterations-open-content, .feedback-terms-open-content { transform: rotate(270deg); } .alterations-content, .feedback-terms-content { overflow: hidden; font-size: 0; line-height: 0; opacity: 0; height: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .alterations-content > *, .feedback-terms-content > * { margin: 15px 0; padding: revert; } .alterations-content-grow, .feedback-terms-content-grow { opacity: 1; line-height: revert; font-size: revert; display: block; height: auto; } .alterations-more-information { margin-bottom: 50px; } /* pass */ @-webkit-keyframes bloat { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes bloat { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @-webkit-keyframes bloatAlt { 50% { -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } } @keyframes bloatAlt { 50% { -webkit-transform: translate(20px, 0); transform: translate(20px, 0); } } .animation_communications_1, .animation_communicationsAlt_1 { -webkit-animation: bloat 1.3s ease; animation: bloat 1.3s ease; -webkit-transform-origin: 0 70%; transform-origin: 0 70%; } .animation_communications_2 { -webkit-animation: bloatAlt 1.3s ease; animation: bloatAlt 1.3s ease; -webkit-transform-origin: 20% 50%; transform-origin: 20% 50%; } .animation_communicationsAlt_2 { -webkit-animation: rotateCog 1.3s linear; animation: rotateCog 1.3s linear; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-box: fill-box; transform-box: fill-box; } @-webkit-keyframes rotateCog { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotateCog { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animation_wash_1 { -webkit-animation: trickle 0.5s ease-in-out; animation: trickle 0.5s ease-in-out; } .animation_wash_2 { -webkit-animation: trickle 0.8s ease-in-out; animation: trickle 0.8s ease-in-out; } .animation_wash_3 { -webkit-animation: trickle 1.3s ease-in-out; animation: trickle 1.3s ease-in-out; } .animation_wash_4 { -webkit-animation: trickle 1.3s ease-in-out; animation: trickle 1.3s ease-in-out; } /* stations */ @-webkit-keyframes smallCloud { 50% { -webkit-transform: translate(-5px, 3px); transform: translate(-5px, 3px); } } @keyframes smallCloud { 50% { -webkit-transform: translate(-5px, 3px); transform: translate(-5px, 3px); } } @-webkit-keyframes stationCloud { 50% { -webkit-transform: translate(0px, 3px); transform: translate(0px, 3px); } } @keyframes stationCloud { 50% { -webkit-transform: translate(0px, 3px); transform: translate(0px, 3px); } } .animation_station_1 { opacity: 1 !important; -webkit-animation: stationCloud 0.8s ease; animation: stationCloud 0.8s ease; } .animation_station_2 { opacity: 1 !important; -webkit-animation: stationCloud 1.3s ease; animation: stationCloud 1.3s ease; } #icon_industrialaction { padding: 5px; } #icon_station_1, #icon_station_2 { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } /* weather rain */ @-webkit-keyframes raining { to { -webkit-transform: translate(-5px, 5px); transform: translate(-5px, 5px); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } #icon_weather_sub_1 { fill: #fff !important; } #icon_weather_sub_2 { fill: #FFF !important; } #icon_weather_sub_3 { fill: none; stroke: none; transition: all 0.3s ease; } .animation_weather_sub_1 { -webkit-animation: smallCloud .8s ease; animation: smallCloud .8s ease; } .animation_weather_sub_2 { -webkit-animation: smallCloud 1.3s ease; animation: smallCloud 1.3s ease; } .animation_weather_sub_3 { stroke: gold !important; fill: gold !important; } /* lock padlock */ @-webkit-keyframes moveKey { to { -webkit-transform: translate(0, -13px); } } .animation_national_rail_1 { -webkit-animation: wobble 0.8s ease; animation: wobble 0.8s ease; -webkit-transform-origin: 50%; transform-origin: 50%; stroke: red; fill: red; stroke-width: 2px; } @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animation_dish_1 { -webkit-animation: rollIn 0.5s ease; animation: rollIn 0.5s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_dish_2 { -webkit-animation: rollIn 0.8s ease; animation: rollIn 0.8s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_map_1 { -webkit-animation: bumpDown 0.5s ease; animation: bumpDown 0.5s ease; fill: red; stroke: red; } .animation_pin_1 { -webkit-animation: bumpDown 0.5s ease; animation: bumpDown 0.5s ease; } @-webkit-keyframes shrink { 50% { -webkit-transform: scaleX(0.7); transform: scaleX(0.7); } } @keyframes shrink { 50% { -webkit-transform: scaleX(0.7); transform: scaleX(0.7); } } @-webkit-keyframes shrinkMove { 50% { transform: translateX(-8px); } } @keyframes shrinkMove { 50% { transform: translateX(-8px); } } .animation_map_2 { -webkit-animation: shrink 0.5s ease; animation: shrink 0.5s ease; -webkit-transform-origin: 50%; transform-origin: 50%; fill: #ffe4c4; } .animation_map_3 { -webkit-animation: shrink 0.5s ease; animation: shrink 0.5s ease; -webkit-transform-origin: 50%; transform-origin: 50%; fill: #ffe4c4; } /* safe travel */ @-webkit-keyframes trickle { 90% { -webkit-transform: translate(0, 40px); transform: translate(0, 40px); } 100% { -webkit-transform: unset; transform: unset; } } @keyframes trickle { 90% { -webkit-transform: translate(0, 40px); transform: translate(0, 40px); } 100% { -webkit-transform: unset; transform: unset; } } #icon_rentals { height: unset; width: 70%; max-width: var(--sub-menu); } .animation_rentals_1 { -webkit-animation: shrinkMove 0.5s ease; animation: shrinkMove 0.5s ease; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; transition: all 0.5s ease; stroke: red; } .animation_rentals_2 { -webkit-animation: shrink 0.6s ease; animation: shrink 0.6s ease; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; stroke: red; } .animation_rentals_3 { -webkit-animation: shrink 0.8s ease; animation: shrink 0.8s ease; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; stroke: red; } .animation_wash_1 { -webkit-animation: trickle 0.5s ease-in-out; animation: trickle 0.5s ease-in-out; } .animation_wash_2 { -webkit-animation: trickle 0.8s ease-in-out; animation: trickle 0.8s ease-in-out; } .animation_wash_3 { -webkit-animation: trickle 1.3s ease-in-out; animation: trickle 1.3s ease-in-out; } .animation_wash_4 { -webkit-animation: trickle 1.3s ease-in-out; animation: trickle 1.3s ease-in-out; } /* stations */ @-webkit-keyframes smallCloud { 50% { -webkit-transform: translate(-5px, 3px); transform: translate(-5px, 3px); } } @keyframes smallCloud { 50% { -webkit-transform: translate(-5px, 3px); transform: translate(-5px, 3px); } } @-webkit-keyframes stationCloud { 50% { -webkit-transform: translate(0px, 3px); transform: translate(0px, 3px); } } @keyframes stationCloud { 50% { -webkit-transform: translate(0px, 3px); transform: translate(0px, 3px); } } .animation_station_1 { opacity: 1 !important; -webkit-animation: stationCloud 0.8s ease; animation: stationCloud 0.8s ease; } .animation_station_2 { opacity: 1 !important; -webkit-animation: stationCloud 1.3s ease; animation: stationCloud 1.3s ease; } #icon_station_1, #icon_station_2 { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .animation_taxi_1 { -webkit-animation: wobble 0.8s ease; animation: wobble 0.8s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_feedback_beta_1, .animation_feedback_trial_1 { stroke-dasharray: 2000; animation: writeUp 3s reverse; } .animation_feedback_beta_2, .animation_feedback_trial_2 { stroke-dasharray: 2000; animation: writeUp 3s reverse; } .animation_feedback_beta_3, .animation_feedback_trial_3 { animation: slideInUp 0.8s ease; } #icon_faqs { overflow: hidden; } .animation_faqs_1, .animation_faqs_2 { animation: slideInUp 0.8s ease; } @keyframes writeUp { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 2000; } } /* weather rain */ @-webkit-keyframes raining { to { -webkit-transform: translate(-5px, 5px); transform: translate(-5px, 5px); } } @keyframes raining { to { -webkit-transform: translate(-5px, 5px); transform: translate(-5px, 5px); } } .weather_rain { -webkit-animation: raining linear infinite 1s; animation: raining linear infinite 1s; } .weather_rain:nth-of-type(even) { -webkit-animation: raining linear infinite 0.8s; animation: raining linear infinite 0.8s; } /* sub menu icons */ .animation_magnifying_glass_1 { fill: #c1c1fa; stroke: none; -webkit-animation: bloat 1.3s ease; animation: bloat 1.3s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_magnifying_glass_2 { stroke: white; } .animation_magnifying_glass_3 { fill: #e6d295; stroke: #e6d295; -webkit-animation: bloat 1.3s ease; animation: bloat 1.3s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_journey_glass_1 { fill: #c1c1fa; stroke: none; -webkit-animation: bloat 1.3s ease; animation: bloat 1.3s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_journey_glass_2 { stroke: white; } .animation_journey_glass_3 { fill: #e6d295; stroke: #e6d295; -webkit-animation: bloat 1.3s ease; animation: bloat 1.3s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_tram_1 { fill: #78ddcc; stroke: #78ddcc; -webkit-animation: bumpUpBig 0.5s ease-in-out; animation: bumpUpBig 0.5s ease-in-out; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_tram_2, .animation_tram_3 { stroke: white; fill: none; -webkit-animation: wobble 0.8s ease; animation: wobble 0.8s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_tram_4, .animation_tram_5 { stroke-width: 4px; fill: none; stroke: white; -webkit-animation: bumpUpBig 0.5s ease-in-out; animation: bumpUpBig 0.5s ease-in-out; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_tram_6, .animation_tram_7 { stroke: #78ddcc; stroke-width: 4px; fill: none; } .animation_tram_8 { fill: none; stroke: #78ddcc; stroke-width: 4px; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_dlr_1 { stroke: #78ddcc; fill: #78ddcc; -webkit-animation: rollIn 0.5s ease; animation: rollIn 0.5s ease; } .animation_dlr_2 { fill: #fff; stroke: #fff; -webkit-animation: rollIn 0.5s ease; animation: rollIn 0.5s ease; } .animation_dlr_3 { fill: #5e70f7 !important; -webkit-animation: rollIn 0.8s ease; animation: rollIn 0.8s ease; stroke: #5e70f7 !important; } .animation_rainbow_1 { fill: none; stroke-width: 4px; stroke: red; -webkit-animation: stagger 0.8s ease-in-out; animation: stagger 0.8s ease-in-out; } .animation_rainbow_2 { fill: none; stroke-width: 4px; stroke: blue; -webkit-animation: stagger 0.3s ease-in-out; animation: stagger 0.3s ease-in-out; } .animation_rainbow_3 { fill: none; stroke-width: 4px; stroke: yellow; -webkit-animation: stagger 0.5s ease-in-out; animation: stagger 0.5s ease-in-out; } .animation_rainbow_4, .animation_rainbow_5 { fill: #d2d2f8; stroke-width: 4px; stroke: #d2d2f8; } @keyframes bumpRight { 50% { transform: translate(-5px, 0); } } .animation_busstation_1 { animation: bumpRight 0.7s ease; } .animation_busstation_2 { animation: bumpRight 0.9s ease; } .animation_busstation_3 { animation: bumpRight 1s ease; } #icon_live_1 { fill: #dd4b4b; stroke: none; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_live_1 { -webkit-animation: bumpUpBig 1s ease infinite; animation: bumpUpBig 1s ease infinite; } #icon_live_2 { fill: #f8c449; stroke: none; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_live_2 { -webkit-animation: bumpUpBig 1s ease infinite; animation: bumpUpBig 1s ease infinite; } .animation_info_1 { fill: #c2bfe1; stroke: #c2bfe1; -webkit-animation: rollIn 0.8s ease; animation: rollIn 0.8s ease; } .animation_info_2 { fill: white; stroke: none; -webkit-animation: bumpUpBig 0.8s ease-in-out; animation: bumpUpBig 0.8s ease-in-out; } .animation_info_3 { fill: white; stroke: none; -webkit-animation: bumpUpBig 0.5s ease-in-out; animation: bumpUpBig 0.5s ease-in-out; } .animation_journeyInfo_1 { fill: #c2bfe1; stroke: #c2bfe1; -webkit-animation: rollIn 0.8s ease; animation: rollIn 0.8s ease; } .animation_journeyInfo_2 { fill: white; stroke: none; -webkit-animation: bumpUpBig 0.8s ease-in-out; animation: bumpUpBig 0.8s ease-in-out; } .animation_journeyInfo_3 { fill: white; stroke: none; -webkit-animation: bumpUpBig 0.5s ease-in-out; animation: bumpUpBig 0.5s ease-in-out; } .animation_tube_1 { fill: #dd4b4b; stroke: #dd4b4b; -webkit-animation: rollIn 0.5s ease; animation: rollIn 0.5s ease; } .animation_tube_2 { fill: #fff; stroke: #fff; -webkit-animation: rollIn 0.5s ease; animation: rollIn 0.5s ease; } .animation_tube_3 { fill: #5e70f7 !important; stroke: #5e70f7 !important; -webkit-animation: rollIn 0.8s ease; animation: rollIn 0.8s ease; } /* river tfl transport */ .animation_river_1 { fill: none; stroke-width: 5px; stroke: #78ddcc; -webkit-animation: bumpUp 0.5s ease; animation: bumpUp 0.5s ease; } .animation_river_3 { stroke-width: 3px; stroke: #78ddcc; fill: #78ddcc; -webkit-animation: bumpUp 1s ease; animation: bumpUp 1s ease; } .animation_river_2 { stroke-width: 2px; stroke: #78ddcc !important; fill: #fff; -webkit-animation: bumpUp 0.8s ease; animation: bumpUp 0.8s ease; } .animation_river_4 { fill: #0099CB; stroke: #0099CB; -webkit-animation: rollIn 0.5s ease; animation: rollIn 0.5s ease; } .animation_river_5 { fill: #fff; stroke: #fff; -webkit-animation: rollIn 0.5s ease; animation: rollIn 0.5s ease; } .animation_river_6 { fill: #0A259B !important; stroke: #0A259B !important; -webkit-animation: rollIn 0.8s ease; animation: rollIn 0.8s ease; } .animation_walk_1 { fill: #70b2d0; stroke: none; -webkit-animation: bloat 0.5s ease; animation: bloat 0.5s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_super_pin_1 { -webkit-animation: wobble 0.8s ease-in-out; animation: wobble 0.8s ease-in-out; stroke: none; } .animation_super_pin_2 { fill: #dd4b4b; stroke: none; } .animation_pin_1 { -webkit-animation: wobble 0.8s ease-in-out; animation: wobble 0.8s ease-in-out; stroke: none; } .animation_pin_2 { fill: #dd4b4b; stroke: none; } #icon_weather_sub_2 { fill: #FFF !important; } #icon_weather_sub_3 { fill: none; stroke: none; transition: all 0.3s ease; } .animation_weather_sub_1 { -webkit-animation: smallCloud .8s ease; animation: smallCloud .8s ease; fill: #fff; } .animation_weather_sub_2 { -webkit-animation: smallCloud 1.3s ease; animation: smallCloud 1.3s ease; } .animation_weather_sub_3 { stroke: gold !important; fill: gold !important; } /* lock padlock */ @-webkit-keyframes moveKey { to { -webkit-transform: translate(0, -13px); } } @keyframes moveKey { to { -webkit-transform: translate(0, -13px); transform: translate(0, -13px); } } @-webkit-keyframes lock { to { -webkit-transform: translate(0, 7px); } } @keyframes lock { 90% { -webkit-transform: translate(0, 7px); transform: translate(0, 7px); } to { -webkit-transform: translate(0, 0px); transform: translate(0, 0px); } } .element-animation { animation: animationFrames linear 4s; animation-iteration-count: 1; transform-origin: 50% 50%; -webkit-animation: animationFrames linear 4s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -moz-animation: animationFrames linear 4s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -o-animation: animationFrames linear 4s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; } .animation_privacy_1 { animation: lock 0.5s ease; animation-iteration-count: 1; transform-origin: 50%; -webkit-animation: lock 0.5s ease; -webkit-transform-origin: 50%; -webkit-animation-iteration-count: 1; -moz-animation: lock 0.5s ease; -moz-transform-origin: 50%; -moz-animation-iteration-count: 1; } .animation_privacy_2 { /* -webkit-animation: moveKey 0.8s ease; animation: moveKey 0.8s ease; */ transform-origin: 50%; -webkit-transform-origin: 50%; } .animation_privacy_3 { -webkit-animation: bloat 0.8s ease; transform-origin: 50%; animation: bloat 0.8s ease; -webkit-transform-origin: 50%; } /* survey */ .animation_survey_1 { -webkit-animation: bloat 0.8s ease; transform-origin: 50%; animation: bloat 0.8s ease; -webkit-transform-origin: 50%; } .animation_survey_2 { -webkit-animation: stagger 0.8s ease; animation: stagger 0.8s ease; } .animation_survey_3 { -webkit-animation: stagger 1.3s ease; animation: stagger 1.3s ease; } .animation_survey_4 { -webkit-animation: stagger 0.5s ease; animation: stagger 0.5s ease; } .animation_survey_5 { -webkit-animation: stagger 1s ease; animation: stagger 0.8s ease; } @-webkit-keyframes rails { to { -webkit-transform: scale(0.7); transform: scale(0.7); } } @keyframes rails { to { -webkit-transform: scale(0.7); transform: scale(0.7); } } /* train */ .animation_train_3 { -webkit-animation: wobble 0.8s ease; animation: wobble 0.8s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_train_1 { -webkit-animation: rails 0.6s linear; animation: rails 0.6s linear; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_train_2 { -webkit-animation: stagger .8s linear; animation: stagger .8s linear; } /* fadeIn */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .panelSizer { -webkit-animation: fadeIn 0.3s ease; animation: fadeIn 0.3s ease; } /* defaultfont.css */ /* @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap'); */ * { font-family: Nunito, sans-serif; } /* diagram_2_fonts.css */ /* gcrti-flat */ #rti-feed { color: #000000; z-index: 1; display: block; margin: 0 auto; padding: 1em; } .missing-feeds { max-width: 560px; margin: 0 auto; width: 100%; padding: 30px; position: relative; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } /* RTI Embedded */ div.panelForlineDiagram { margin: 0 auto; color: black; max-width: 1100px; } /* div.panelForlineDiagram h1 { padding: var(--template-padding); position: sticky; padding-top: 8px; top: 0px; background: white; margin-top: 8px; z-index: 2000; font-size: 1.6rem; border-top: 1px #d4cbcb solid; } */ /* div.panelForlineDiagram h1 { color: #000; text-align: center; font-size: 16pt; font-weight: bold; } */ div.panelForlineDiagram table tr { background-color: lightblue; } div.panelForlineDiagram { font-family: lubalin_graphregular, serif; } div.panelForlineDiagram table { font-family: Johnston100, sans-serif; } div.panelForlineDiagram .time { display: inline-block; width: 3em; vertical-align: top; } div.panelForlineDiagram .info { color: #AEAFB4; font-size: 14pt; display: block; clear: both; } div.panelForlineDiagram .location { display: inline; font-size: 14pt; vertical-align: top; } div.panelForlineDiagram .keeptogether { display: inline-block; padding-left: 0.5em; vertical-align: top; white-space: pre-wrap; width: 50vw; } @media screen and (min-width: 360px) { div.panelForlineDiagram .keeptogether { width: 62vw; } } div.panelForlineDiagram .station { display: block; position: relative; margin-top: 1em; white-space: nowrap; } div.panelForlineDiagram .nameOfStation { float: left; margin-right: 0.5em; } div.panelForlineDiagram .stopimage { width: 40px; height: 40px; display: inline-block; } div.panelForlineDiagram .nrsymbol { width: 20px; height: 12px !important; margin-left: 0.5em; margin-right: 0.5em; margin-top: 3px; vertical-align: middle; display: -webkit-box; display: flex; background-size: contain; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MiIgaGVpZ2h0PSIzOSI+CjxnIHN0cm9rZT0iI0VEMUMyNCIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik0xLC04LjkgNDYsMTIuNCAxNiwyNi42IDYxLDQ3LjkiIHN0cm9rZS13aWR0aD0iNiIvPgo8cGF0aCBkPSJNMCwxMi40SDYybTAsMTQuMkgwIiBzdHJva2Utd2lkdGg9IjYuNCIvPgo8L2c+Cjwvc3ZnPg=="); float: left; } div.panelForlineDiagram .eurostarsymbol { width: 61px; height: 20px !important; background-size: contain; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABjCAIAAACuZqovAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABF6SURBVHja7Z13dBdVFsf9a4+7lrUsyopK2UhRWESlKCC9996EQOi9QxIUQgcjBqQFoyRSIj1BuhQFKYKAQOghIC0QSOi9mP3uznH2Ob+ZN+9N+ZX87px7DiGZ35v5vXc/r9x7331PZNNFF10+vZ5Q/vlL7vIkJCQ+EYKQhIQgJCEhCAlCEhKCkISEIKS6ICEhCElICEISEhKCUEyeL1C9bquB42K+2bxt794Dx06cOncp8+q9+w+U73Ln7r1z6ZdSDp/AX/uEf16sXBtqZhKC0Bl58/1W/YdNXrtxx63bd6QiEnbuPjQkalq+txtRe5MQhBalx6BosGczOOjK1Rux8UkvhtSgVichCOXw27P/qINxesfTzhQr9xE1PAlBaC4N2w51Fj/2qli/B7U9CUFoKE++UmHClLluh67XaNqXmp+EINQRjFGwanpnC0mT0AjSABKC8E8SPmrG/T88DV64tu06QBpAQhD+X5Z8t8n7+ykjRs8kJSAhCB0g8PiJMwuTN3w6dd7M+GUrv9927959wQ+m/Xb+qVcrkR6QBDuElheBGZevzJ6/smrj3poC3/qg9ajo2YKFtOj0MekBSVBD+NuZCxbwu5x5dcDHU17get5rtxggUtS8xWtJD0iCF0JrA+C3y9b/u7yQw/2Nks1MS0tNO0t6QBKkEFrA7+7d+536jpN6yuARU02L/ccbNUkVSIIOQgsEXsjILF+nm+yDin/Y1rTksrW6kCqQBBeEFgg8cvy3V4vVt/a4q9dv8gvH/gxSBZIggvDWrTuyBO74JcXOE/cdTOWXT3pAEkQQbt+VIksgdui66gLBJinSA5JggXBWQrIsgQ8ePMxduI6rEGK3FOkBSVBA2GvIZxaWgqE9Rtl/9MVLWUblY7cUKQFJUED4TqXQK9duyBIYPnKG/Ue/W7k9DYMkBKGV0NCEb1c58uhhY2ONHoFpKmkASVBAiNHGQhKK/CUaO/L0lMNpRk/xDDolIcmBEBYq3eLs+QxZCNt0jXLk6bEJSUaPQIQ3NT9JUECYkLhKlsAZs5c68mjORgrORPTJVz58Nl+VXAVr5ilav8A7TQqXaYmYm5JVw8rV7lqlYa+3K7TLVbAW6Q1JwEDYLGyYLIH7D6a+XLi2qwQqE9HWXYb3jYgZMyn+y2+Sk1Zt3rpzPzYlXhWzHt28dedo6umNW3bPWbhm/OQ5vYdOatwuHHwCYFIpEj+C8KnXKu3ae1gWwo+6OTARxb5eXx19DDiTV28GmaE9R5Wu1vHZfFWDRJMwX8DeTprk+xeEURO/ktXghUkbbD40b/GG+82C1Lx8nTqd/t3an5A+58O63XOkDr1XpUP01Hk4iYBW2v4FYamqYbdu35VS1tt37uFTdh5ar/Wg9AuXs/34evz48U879k2cMrdBmyG5An//VNMOkYuX/8n5VKZ6J4LKXyCcHLtQVkHtdKJ/zVMhcsxMxLhlB9SVciRt1jfJmLhi83EAKc1bZVvD+7r71yOar9Oq83Aiyl8g/OebdS9czJRSx19Tjj+X3+LyqWWnT3buOZQd4Bfi1Bclb+wXGeO3g8kzeau07T5y6YofHj1+7Pn+RKB/QQhNklVBGBgtPOj9mp2R6iI7x12///77L78emZWQ1KX/BITd+dzi0nXABBhdsLjVfdtr128RgX4Hoex+pcPHTqGXlXoEHAzJq7dkB8eFaTZ2VE77aklY7zFAwm2dwNwYS1ZYkjDonTdbY69evx1GYALJvyCs32awrJINjZouWHjIe00jx8S6bf+8cfM2Dh5FV4IHpV/MfPjokV8xCQsWrDtYdbfrPhIhBEXLtnm1aP2nX68s1Uw48CN3kToIRShTo5OC3JwFqzH83hY2p6FrwMqQEPJHCOPmLpdSKaQ8FPHOw70eN2f59Ru3nFJloIWF6NxFaz8Z92XXARMbtRuKTDMYBP6u59nDnkac+Fu5YS+sP3uHT4INCa7IdMl1r/tw3sXAdejoyW07DyAkSFfQrZw+e9F+Nf6wdU+l+j2JH3+E8OVCtTMuXZFqTrgTOQWig+/cb/z6H3c5oqapJ88mLv2+c//xghkTRdySjdoO9U8m3bvIGejXECIfoWyLhrynb50vWKr5iIlxx1JP29QYnK29fM0WHF5fomI7t2uzyPstYZRavWH7Yz37YQ64MJbS1hN/h3D5mp+kGnX2/BWehVSo1wOGQZxubUddMDFDYCdccJZztNmRp1+rVKflwCmzFiJJXM7AD2YwHNtKwPg7hCLprjVXreb92RJg6U5a9aMdXcnMuoYzYaAusuZW96RExdD+wyYjcs2bp745eC1Ytr5Gs36ESmBA2FF+Lqo69/tGxsDiZ0dXYI2Arr9WrIHf1jXsT807foyNWnDJBAR+8YkrK9TrTpAEEoRzF62RamPYUbH9Z/Rn8XbmbHAnYE6Ls18Cq97hWhg0/AuEyFg7D8fVCzkg0Z1RQuSAhBA8SDU25o2X/xd6b+3CPqmhI6f/692mOWAXAnY2zl+8DsZbYo8gtC5YNnhpZ9CZ9C++XFStSZ8c2R6wFSPLIxK0clLjOHihI8PJqth7nc+hjD4kvoTws+mJrqoLNkYhTLR1lxHP5K0cJG3zbN4q8GfWaz0Y4QGTpiciiGzPvqOZV67bqcaTp9ORRgC+WdiuXipEeTpyFoQr1211Cb8Nm3+B2QbpXqi1FHkxpAaiupuERgz85AvspsXSGhklUUua4BhEOGCVHj1tPhafyFcA/x5lx8nhEO4/5HA8JwpEApjS1Sk4mIQgFNpTW9Gmb129EPyFfa51Ww2itiEhCOW2nNnHb8W6rR37jKVDc0kIQml5t1J7LE4ss4eIfkw7fb51lYQk8CAsWq5Nr6GTYBKwvC/m590Hm4cNozYgIQjlICxSpiV2JKxYu/WejUjITVt2Y3se1T4JiSiEsIljvzwS9W39eb8j1pfEJd9T1ZOQmECIHUDwLGH7Jv+YW2vX5zO+paonIfkThOANY92QqGkIht6+60DW1euuhr8g5tPL3xNGV3QoXsiSREJiEUIvXx16jfHaN3y+QHWc1H3o6KlsgwMJJ48P2bgkj7joRGCXL6n+NSysqNDeyxKloyILKYKfPW9AOeoNHToUrVLrHVZs1olSCFu47jtYKBOC2iCuvA0hMgsh7Y/UR7yz8wgJYDD6pZ06p2aU0r1t05I8D9OeExdd/VP/OnJYQUGVVT+iC5XpW53Y+lLMuBApePCg+Kn5M/e/qFvgnrW5+/cpkivkA9kC8Sa6r7cs/nXPAtG5CHZ2ah+kCr+DE7+TFbyepoNTRbBu0enY7HcsQojUL8hA0XNwNA45wVAjewoSDhLzAn6azEtGyVF8AmGT5sVtQqgKUBRRNdAiUhrgwbuJFLhR+A3ZD6J+pGqblU160xCVbfZOdDTi/Qj/oeib+J0d21LKG+IHdcakNDR/8iIBIRIwY6t1aM/Rnt4FnKYkBSH24HsTv2zuydhqJe5dl9uoU1RFt4u1ACGri6YQ4mdWPBUFM2p+V+05WOHLqgVmeYyNIJZPoNFw6isIPXsEwcHQFEK2ToymCUoh6l+V+wf0LaJWlBCEiu7O+HopcEI8PnbNTItbHDl6Zvteo6s37Qvq4KXglIIc6VIQDh4xzXH8KjXoOTl2gSd+2CnLTxCmKiinjcUb0g0IdZeUKIGFx6iZcScLDD6CD3r26+iwNXhzwE5KeJ2FGequ0U6lt0qYlj9tWy7N++PR0E68g0ZwMwub5w0QI65QpiczeEnZtlM7JuW1dUdFTiHqf5Wno9oxIUc1ikJoE4CYmQukIATtDuLXtlvUuk079XOErdpcuHQL/sdFOlp/g9DzuVBi3XugN6yS8Zd8mkmd7ryU1XiRGhNcL1moQ9a0pn5BtoMQWd/yGwJfFnXCdna67+YJIX6DlwHMeAcvQRgxaoYUhGfOZThh9qzWO/xzzmHAgjlqAxdCiNpn6748C5UpgZ4fQV/u+RH2y2JMc6ontQOhOtTj5dn3F5mRmjaEMv1WOcS8SRBCAKzMOLwEYaN24TaTHUoJQueGT4jjZGTBmfJhfcYKlhbQEPJvY5eC4hY8dmboqcd2aHEDQpY60KKMPPzZoyyE7GAL8ZzMo25Z5WGLUr6XNyBEdiAL2Sxln5K/ROMeg6Ox44mf33rfwVQcGiFebEBDyFnQsgZYo8mq6RLLU481Wi7l0nADQtUko35HdkZq6mYQhFDwNh/vrH8kf3SRYNwMDg8K6z0WxzLjwBPTMpED6iXJJA6sSvFNo5adfi5ByNLiiRnbeYt4HVjB3JWzsmLfDb1A42bFfQUhWwNqNbJjo+mE2QKE9gMb3ILw4JGTFvyNPQZFGxVYqHQL/BVbpa5cE9qzjwGwaftIC28ubiI3aiRfQQjjG0cz2BJkxysWYM/Xw+xLN3LAjs/aGoTqe2JtzP6ev4SzAKFq38oS9kD6AEIMQdb8/mfPZ4A0GFEgKASHtwCnq9dvShViYQAMaAg1zndddwLrmZCtE/b1dJEAb1l6rkILYTd2IFS/o2bEY5e1/K5BBEKXlsHOQ1i2VlefhKFid1Xj0Ag7b+7/EHqGdLEWF6P1HmsXdQMJjL2AXxdFsMFxbTul6Oy0UzMRYNfD/EgG04bAL1XUs/TMxX4EIWSfywfoaq4LGZmOOP2dNcy4AaGRKCE+pt8rU34Gxeo3HwkoJUYhdg3JPld8gmoBQtUko+uXF5yRsg2BjkMTrcpON7Jkvo7PIMR80msExiYkFSrVwpHXDlwI+crKgmFnOiq+LwQ0amJNxDmUhZA1yeiandgZKccuJRhGh9vcGAOdh7BU1TCcyOmFIxOc3YThLISCKmtqbVMhhFprorfYGSBHxVlLvWwXbuez0Hj2DTeK1aoshKpJBpzrmrKxNBXx0IhACAOYf+WY4cuICXEuHpyw5xDOaXC8CnziJ2S1nO+F5zsAMdcy6qExLlkObWFXQRYqBN2KYE9huSOTiiDnTMhZCMEq29mxUwkHY4Nch/BveSoih5rj+CE4BgcGuVQF9iHUOBtF7lctKxrbugiEGheC0Y4HdsJmaqk3WhBKefmNlFvESyk1pdfEuIqIEdicdYGFrsQvIPxvPx0acffefceS4R9MxVIzd+E67vVDjkAoNX8TCbzmQ4jRj+2njbScXRcJ9uUo2Vqwm80QUykI2ah0QTHaVMFfnLOTDgfDg1yHEFK5Qc9jJ07bYe9y1rWv532HtDde2IAvu/nFtG/mtxb+xOqQkcLxIdR4zDHd0l1YarzqptM8zVZdOxUiG+clDiH7pUy/EWso0m0U0/dku1e+t8O/IFTiPCfNSHzw4KEUexmXr6zZsKPbwE9febOu1zJ8sPM60029nKwH7NCEwQS5W3RVjSWQo+WmEGoUyMj+wa4MITC7c3amsu+mbMPxBEAkMgY3sGs2kQFEHEJ1eBfx2pmaeU0hxCNYkmUDAH0JoSKlq3XsFxkzZ8HqlCOGR17u3HNoatxipH7yVSZ82YkNx3nt6blmPewaWwJ/b5EIhBpPhtGLsZNSpYNAd4OAT9aQyEbAcXxiKipKnBoKYbskJV+LJo2N4OghCCG7qV9kvcoPRrcQMZPpgr/eXQhZeSGkBna4f1CzM/IOvlGyWZ636j1XoJo/5LpyCkKlyXXd1rqZGvhtKQihhnwjNdKMh6YxAEZjnXgyCNlltiCE7LRfcL3KtojnLMZCAPdGG7YDH0Pot6KmWhHkx9QJAUXhFIUHiUxpBCEU91hA/0wDAJTkF/x5Zpawb0AqzFIQQnXCLB6Lx3fVsHTxu0X3PBYEoVsCpYcyqU4nNBv+Kz6TgbqLp/Fks7bwN9oocS1swihAhZ8xtRNf7eBOTDKNkMbv8QjZ/T4iEEqZZARdNSyEpi3ikseCICSxJWzeTvcCu2w+i7MplO0oRXof06xTBCEJSeAJQUhCQhCSkBCEBCEJCUFIQkIQUl2QkBCEJCQEIQkJCUFIQkIQkpCQeFn+A1NMkqKpFlvmAAAAAElFTkSuQmCC "); } @media (max-width: 300px) { div.panelForlineDiagram .eurostarsymbol { display: block; /* vertical-align: middle; */ } } @media (min-width: 300px) { div.panelForlineDiagram .eurostarsymbol { display: inline-block; vertical-align: middle; } } div.panelForlineDiagram .aircraft { width: 20px; height: 20px !important; display: inline-block; background-size: contain; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8IS0tIENyZWF0b3I6IENvcmVsRFJBVyBIb21lICYgU3R1ZGVudCBYOCAtLT4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMjEwbW0iIGhlaWdodD0iMjEwbW0iIHZlcnNpb249IjEuMSIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGltYWdlLXJlbmRlcmluZz0ib3B0aW1pemVRdWFsaXR5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCINCnZpZXdCb3g9IjAgMCAyMTAwMCAyMTAwMCINCiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogPGcgaWQ9IkxheWVyX3gwMDIwXzEiPg0KICA8bWV0YWRhdGEgaWQ9IkNvcmVsQ29ycElEXzBDb3JlbC1MYXllciIvPg0KICA8cGF0aCBmaWxsPSIjMkYzRDhBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xMDQ0MCA5MjhjNzU3LDAgMTAxMiwxMjQzIDEwMTIsMTk1Nmw2NiA1MDc2IDY5MjYgNTIyNmMyNDUsMTQ5IDExMDQsNzc2IDEyNjQsOTg1IDIzMSwyNTggMTc2LDc2MCAxNzYsMTA1NWwwIDUxNiAtNjc4NSAtMjcwOGMtMzIyLC04MSAtNjcwLC0xNzkgLTk3OSwtMTc5IC03ODUsMCAtNjc5LDk4NSAtNzE5LDE1MjJsOCAyNjc2IDIyOTAgMTY3OSAyMTQgMTM0MCAtMzEyOCAtODc0IC01NzAgMCAtMzEzNCA4NzQgMjE1IC0xMzQwIDIyNDkgLTE2NzkgOCAtMjY3NmMwLC01MjkgMTA5LC0xNTIyIC02NzMsLTE1MjIgLTMyOCwwIC02NzAsOTggLTk4NywxNzlsLTY3NzggMjcwOCAwIC01MTZjMCwtMjk1IC01NywtNzk3IDE4MiwtMTA1NSAxMzIsLTIwOSAxMDE0LC04MzYgMTIzMSwtOTg1bDY5NDEgLTUyMjYgNzYgLTUwNzZjMCwtNzEzIDIzMSwtMTk1NiA5ODcsLTE5NTZsLTkyIDB6Ii8+DQogPC9nPg0KPC9zdmc+DQo="); } div.panelForlineDiagram .red { color: red; } div.panelForlineDiagram { vertical-align: top; background-color: white; } div.panelForlineDiagram s { color: red; text-decoration: line-through; } .black { color: black; } div.panelForlineDiagram .TOCLO { font-family: Johnston100-Medium, sans-serif; font-size: 14pt !important; } div.panelForlineDiagram .TOCXR { font-family: Johnston100-Medium, sans-serif; font-size: 14pt !important; } .hiddenTable { visibility: hidden; } .supersuper { background-color: white; } ul#MarkerTarget { -webkit-padding-start: 2vw; padding-inline-start: 2vw; padding: 0 var(--template-padding); } #showDebugTable { font-size: smaller; } div.panelForlineDiagram .lastUpdatedMessage { color: #AEAFB4; } div.panelForlineDiagram .classDebugLocation { /* padding-top: 50px; */ padding-top: 0; } /* div.panelForlineDiagram .errorMessage { display: block; color: #000000; z-index: 1; margin: 0 auto; padding: 1em; border: black 4px solid; background: #fff0bf; } */ #ErrorMessage:empty { display: none; } #ErrorMessageDelay:empty { display: none; } #ErrorMessageDelay, #compensation_dismiss { display: none; opacity: 0; height: auto; /* max-height: 80px; */ padding: 10px 5px; /* bottom: -38px; */ border: 1px black solid; border-left: none; border-right: none; /* width: calc(100% - var(--template-padding)*2); */ width: 100%; background: white; box-shadow: none; /* -webkit-box-shadow: 2px 2px 2px 0px #333; box-shadow: 0px 0px 4px 1px #333; */ grid-template-columns:3fr 8fr 1fr; grid-auto-rows: 100%; column-gap: 10px; grid-template-areas:"logo message close"; align-content: center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; max-width: 1100px; /* Z-index changed to sit above h1 at 2000 */ z-index: 2001; position: sticky; top: 0; } .ErrorMessageDelayEntries { grid-template-columns:1fr 8fr 1fr !important; } #icon_greggs { width: 100%; } @media screen and (min-width: 1100px) { #ErrorMessageDelay, #compensation_dismiss { bottom: var(--footer-height); border-top: 1px black solid; border-left: none; border-right: none; border-radius: 5px 5px 0 0; box-shadow: none; } } .tell-us-loader { height: var(--panel-sub-menu-active); position: absolute; top: 0; background: white; display: none !important; } .tell-us-loader-display { display: flex !important; } .btp-icon { width: 110px; } .btp-logo-send-button { display: flex; justify-content: space-between; align-items: center; width: 100%; } .btp-logo { width: 89px; margin-top: var(--template-padding); } .btp-logo:hover { cursor: pointer; } /* .btp-alert { width: 100%; border-radius: 5px; background: rgb(136, 197, 199); position: relative; margin-top: 21px; padding: var(--template-padding); font-size: 1.1rem; display: grid; grid-template-columns:89px auto 30px; grid-template-areas:"text text close"; column-gap: 8px; align-items: center; } */ .btp-alert svg:last-of-type { grid-area: close; justify-self: end; } /* .btp-icon { grid-area:icon; justify-self:start; } */ .btp-text { grid-area: text; justify-self: start; } /* .btp-alert::before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 10px solid transparent; border-right: 10px solid rgb(136, 197, 199); border-top: 10px solid rgb(136, 197, 199); border-bottom: 10px solid transparent; transform: rotate(-45deg); top: -8px; left: 5px; } */ .btp-alert-hide { display: none; } .selected-feedback-icon { animation: bloat 0.8s ease; -webkit-filter: drop-shadow(0px 0px 5px rgb(255 0 0)); } .delay-active { display: grid !important; opacity: 1 !important; } .delay-compensation-message { grid-area: message; display: flex; align-items: center; justify-content: Center; color: #000; } .delay-compensation-message div { font-size: 1.3rem; font-weight: 700; } .delay-compensation-svg { grid-area: logo; display: flex; flex-direction: column; align-items: center; justify-content: Center; } .delay-thank-you { padding: var(--template-padding); margin: auto; background: #FFF; position: absolute; height: var(--panel-sub-menu-active); width: 100%; transition: all 0.3s ease; display: grid; grid-template-rows: 0.75fr min-content min-content 1fr; grid-template-areas: "." "svg" "text" "."; top: 0; left: 0; opacity: 0; visibility: hidden; } .delay-thank-you div { grid-area: text; text-align: center; place-self: center; font-size: 1.5rem; font-weight: 600; } .delay-thank-you svg { grid-area: svg; place-self: center; width: 125px; } .delay-thank-you-display { opacity: 1; visibility: visible; } .tell-us-loader { height: var(--panel-sub-menu-active); position: absolute; top: 0; background: white; display: none !important; } .tell-us-loader-display { display: flex !important; } .btp-icon { width: 110px; } .btp-logo-send-button { display: flex; justify-content: space-between; align-items: center; width: 100%; } .btp-logo { width: 89px; margin-top: var(--template-padding); } .btp-logo:hover { cursor: pointer; } .btp-alert { width: 100%; /* border-radius: 5px; */ background: rgb(136, 197, 199); position: relative; /* margin-top: 21px; */ padding: var(--template-padding); font-size: 1.1rem; display: grid; grid-template-columns:89px auto 30px; grid-template-areas:"text text close"; column-gap: 8px; align-items: center; position: absolute; } .btp-alert svg:last-of-type { grid-area: close; justify-self: end; } /* .btp-icon { grid-area:icon; justify-self:start; } */ .btp-text { grid-area: text; justify-self: start; } /* .btp-alert::before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 10px solid transparent; border-right: 10px solid rgb(136, 197, 199); border-top: 10px solid rgb(136, 197, 199); border-bottom: 10px solid transparent; transform: rotate(-45deg); top: -8px; left: 5px; } */ .btp-alert-hide { display: none; } .selected-feedback-icon { animation: bloat 0.8s ease; -webkit-filter: drop-shadow(0px 0px 5px rgb(255 0 0)); } .delay-active { display: grid !important; opacity: 1 !important; } .delay-thank-you { padding: var(--template-padding); margin: auto; background: #FFF; position: absolute; height: var(--panel-sub-menu-active); width: 100%; transition: all 0.3s ease; display: grid; grid-template-rows: 0.75fr min-content min-content 1fr; grid-template-areas: "." "svg" "text" "."; top: 0; left: 0; opacity: 0; visibility: hidden; } .delay-thank-you div { grid-area: text; text-align: center; place-self: center; font-size: 1.5rem; font-weight: 600; } .delay-thank-you svg { grid-area: svg; place-self: center; width: 125px; } .delay-thank-you-display { opacity: 1; visibility: visible; } .delay-active-reply { grid-area: message; align-self: center; font-size: 1.3rem; font-weight: 700; } .delay-active { display: grid !important; opacity: 1 !important; } .delay-active-message { grid-area: message; align-self: Center; font-size: 1.3rem; font-weight: 700; color: red; } .delay-active-message:hover { cursor: pointer; } .delay-active-logo { grid-area: logo; /* height: 81% !important; */ overflow: unset; display: block !important; place-self: center; } .delay-active-close { grid-area: close; /* height: 34% !important; */ width: 20px !important; max-width: 30px; display: block !important; overflow: unset; place-self: center; stroke: black; stroke-width: 13px; } .delay-active-close-compensation-container { grid-area: close; width: 20px !important; max-width: 30px; display: block !important; overflow: unset; place-self: center; } .delay-active-close-compensation { stroke: black; stroke-width: 13px; width: 100%; } div.panelForlineDiagram s { -webkit-text-decoration-color: red; text-decoration-color: red; color: black; } div.panelForlineDiagram ul.rainbowBoard li { display: -webkit-box; display: flex; } .station:before { height: auto; position: absolute; left: 68px; top: 0; bottom: -25px; content: " "; display: block; width: 10px; background: #000; background-size: 2px; z-index: 1; } .station svg:first-of-type { position: relative; z-index: 1; /* top: -25px; */ } .station:last-of-type:before { bottom: 100%; } .TOCGC .trainMakerStyle svg circle { fill: #f08300; } body { background-image: none; max-width: 1200px; /* background-color:var(--colorTheme);} */ } @media only screen and (min-width: 1200px) { body { border-right: 1px solid black; border-left: 1px solid black; -webkit-box-shadow: 0 2px 2px 0 #333; box-shadow: 0 2px 2px 0 #333; } } /*noinspection CssUnknownTarget*/ .test { font-family: 'lubalin_graphregular', serif; } body { font-family: 'Johnston100-Regular', sans-serif; } /*noinspection ALL*/ div.TOCAW { font-family: 'wales_sans_bodymedium', sans-serif; } /*noinspection ALL*/ .welshname { /*display: none;*/ color: #30c5b8; font-size: 100% !important; /*padding-right: 8px;*/ } /*noinspection ALL*/ div.TOCGC { font-family: 'Raleway', sans-serif; font-weight: 700; } /*noinspection ALL*/ div.TOCLO { font-family: 'Johnston100-Regular', sans-serif; font-weight: 500; } /*noinspection ALL*/ div.TOCLT { font-family: 'Johnston100-Regular', sans-serif; font-weight: 500; } /*noinspection ALL*/ div.TOCXR { font-family: 'Johnston100-Regular', sans-serif; font-weight: 500; } /*noinspection ALL*/ .carbonbox { border: 2px solid #EA7400; width: 694px; height: 113px; color: #EA7400; font-size: 26px; } /*noinspection ALL*/ #homeList { font-size: 20px; width: 500px; margin: 0 auto; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.36); box-shadow: 0 0 4px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.36); /*padding: 2px;*/ font-family: 'Raleway', sans-serif; font-weight: 700; background-color: white; } #homeList a { text-decoration: none; padding-left: 4px; } #homeList li { display: block; } #homeList h1 span { width: 100%; display: block; } /*noinspection ALL*/ #homeList .CarbonTitle { background-color: black; color: white; } /*noinspection ALL*/ DIV.TOCSR { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCNT { font-family: 'Istok Web', sans-serif; } /*noinspection ALL*/ DIV.TOCSS { font-family: 'Istok Web', sans-serif; } /*noinspection ALL*/ DIV.TOCSW { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCSN { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCLE { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCGW { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCLM { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCTL { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCME { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCEM { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCXC { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCVT { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCTP { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCGN { font-family: Arial, sans-serif; } DIV.TOCCH { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCGR { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCCC { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCTW { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCHX { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCIL { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCSJ { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCES { font-family: Arial, sans-serif; } DIV.TOCHT { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCWR { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCZZ { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCCS { font-family: Arial, sans-serif; } /*noinspection ALL*/ DIV.TOCSE .carbonbox { font-size: 19px; } /*noinspection ALL*/ .material-icons { font-family: 'Material Icons', monospace; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } div.panelForlineDiagram { margin: 0 auto; } /* div.panelForlineDiagram h1 { color: #000; padding: var(--template-padding); text-align: left; font-size: 1.5rem; border-bottom: 1px black solid; position: -webkit-sticky; position: sticky; top: -1px; background-color: white; z-index: 50; } */ div.panelForlineDiagram table tr { background-color: lightblue; } div.panelForlineDiagram { font-family: lubalin_graphregular, serif } div.panelForlineDiagram table { font-family: Johnston100, sans-serif; } div.panelForlineDiagram .time { display: inline-block; width: 4em; vertical-align: top; } div.panelForlineDiagram .info { color: #AEAFB4; font-size: 1rem; display: block; } div.panelForlineDiagram .location { display: inline; font-size: 14pt; vertical-align: top; } /*noinspection ALL*/ div.panelForlineDiagram .keeptogether { display: inline-block; padding-left: 1.5em; vertical-align: top; } div.panelForlineDiagram .station { display: block; position: relative; margin-top: 1em } /*noinspection ALL*/ div.panelForlineDiagram .stopimage { width: 40px; height: 40px; display: inline-block; } /*noinspection ALL*/ /* div.panelForlineDiagram .imgSTOP { } */ /*noinspection ALL*/ /* div.panelForlineDiagram .imgSTART { } */ /*noinspection ALL*/ /* div.panelForlineDiagram .imgEND { } */ /*noinspection ALL*/ div.panelForlineDiagram .nrsymbol { width: 20px; height: 12px !important; margin-left: 0.5em; display: inline-block; background-size: contain; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MiIgaGVpZ2h0PSIzOSI+CjxnIHN0cm9rZT0iI0VEMUMyNCIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik0xLC04LjkgNDYsMTIuNCAxNiwyNi42IDYxLDQ3LjkiIHN0cm9rZS13aWR0aD0iNiIvPgo8cGF0aCBkPSJNMCwxMi40SDYybTAsMTQuMkgwIiBzdHJva2Utd2lkdGg9IjYuNCIvPgo8L2c+Cjwvc3ZnPg=='); } div.panelForlineDiagram .whsmith-euston-thumbnail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176.16 200.4'%3E%3Cg%3E%3Cpath fill='%23004184' d='M0 0h176.16v200.4H0z' /%3E%3Cpath fill='%23fff' d='M127.94 43h-2.08a4.29 4.29 0 0 1-2.23-1.55c0-.18 0-.36-.08-.55a2.6 2.6 0 0 0 0-.39c-.08-4.31-.21-8.63-.22-12.94 0-4.49.09-9 .15-13.47l.09-.54A3.56 3.56 0 0 1 127 12h.53c.4 0 .75-.16.65-.6 0-.21-.37-.4-.61-.51a1.75 1.75 0 0 0-.65 0H114.5c-.43 0-.87 0-1.36.07 0 .38.06.67.08.81l4.35.77.55.79a.17.17 0 0 0 0 .23 25.09 25.09 0 0 1 .35 2.86c.07 2.76 0 5.52.07 8.28 0 .53-.12.95-.7 1.1h-16.2a5 5 0 0 1-.26-1.11v-9.66a2.8 2.8 0 0 1 3-3h1.86v-1.09c-.42 0-.76-.07-1.11-.07H84.86a2.21 2.21 0 0 0-.78.06c-.12 0-.13.33-.19.51v.26c.06.1.12.27.19.28a3.75 3.75 0 0 1 3 2.09v2.41c-.47 1.78-1.08 3.52-1.56 5.36-.44 1.59-.8 3.2-1.24 4.8-.51 1.85-1.06 3.7-1.6 5.55-.43 1.44-.88 2.87-1.39 4.53a5.65 5.65 0 0 1-.73-.87 6.1 6.1 0 0 1-.23-.89c-.65-1.73-1.34-3.45-2-5.19-.44-1.26-.83-2.55-1.33-3.77-.9-2.45-1.82-4.9-2.72-7.36-.34-.79-.68-1.59-1-2.39v-.27l-.5-1.31v-.28l-.51-1.25v-.34a16.36 16.36 0 0 0-.56-1.67c-.06-.13-.44-.11-.68-.16s-.8-.34-.87.34l-.47 1.25c0 .18-.07.36-.11.54L69 14.35l-.09.54c-.16.35-.32.7-.49 1l-.06.53c-.14.35-.28.71-.41 1.06l-.11.53c-.37 1-.78 2-1.12 3-.44 1.36-.81 2.75-1.25 4.11-.69 2.16-1.41 4.31-2.13 6.46-.56 1.68-1.13 3.36-1.75 5.21-.4-.78-.68-1.34-1-1.91l-.06-.48-.53-1.46a4 4 0 0 0-.09-.78c-.48-1.49-1-3-1.46-4.45-.72-2.33-1.4-4.68-2.1-7-.58-1.93-1.16-3.85-1.73-5.78a1.81 1.81 0 0 1 1.5-2.51c.59-.14 1.17-.34 1.79-.53V11H45.74v.88a1.8 1.8 0 0 0 .37.15 4.21 4.21 0 0 1 3.64 3.14c.64 2.09 1.36 4.15 2 6.24s1.15 4.1 1.78 6.14 1.38 4.11 2 6.18c.84 2.72 1.64 5.45 2.45 8.17a10.18 10.18 0 0 0 .58 1.87c.23.41.24 1.11.94 1.14.47 0 .93-.58 1.06-1.33a3 3 0 0 0 0-.52 1 1 0 0 0 .47-1.11l.06-.47c.35-1 .69-2 1-3l.06-.42c.2-.43.45-.84.61-1.28.28-.83.5-1.68.76-2.51.68-2.11 1.35-4.21 2-6.31.45-1.4 1-2.78 1.39-4.19s.81-2.74 1.21-4.11c0-.16 0-.32.05-.48.35-.33.54-1.11 1.24-.42 0 .12 0 .24.07.37.15.4.31.8.47 1.2 0 .13.05.26.08.39l.48 1.13.1.47.42.85c0 .16.06.32.08.47.16.37.31.74.47 1.1a2 2 0 0 0 0-.49 2 2 0 0 1 0 .49c0 .16 0 .33.08.49.15.35.31.7.47 1.06a1.8 1.8 0 0 0 0 .52q1.33 3.8 2.71 7.57C76 37 77 39.61 77.93 42.22a22.71 22.71 0 0 0 .91 2.15c.33.66.7.7 1.22.16a2 2 0 0 0 .4-.77c.27-.92.48-1.86.75-2.78.51-1.77 1.05-3.52 1.57-5.29.6-2.06 1.17-4.12 1.78-6.18.45-1.54 1-3.06 1.43-4.6.53-1.75 1.05-3.5 1.54-5.26.25-.88.42-1.78.62-2.67a.16.16 0 0 0 0-.22c.4-.82.85-1.61 1.18-2.46.76-2 3.47-2.6 5-2.16a2.45 2.45 0 0 1 1.92 1.93c.07.33.21.66.31 1a4.66 4.66 0 0 0-.08.64v21.13c0 .83 0 1.67.07 2.5a3.39 3.39 0 0 0-.21.61 3.22 3.22 0 0 1-2.16 3h-2.63c0 .42 0 .7.08 1.07h2.44l11.59-.02c.47.11.8 0 .77-.56s-.41-.46-.76-.42h-2l-1.12-.51-1-1.64V29.03c0-.52.09-1 .13-1.57h16.7a6.1 6.1 0 0 1 .32 1.36c0 4.22.24 8.45-.43 12.64a.17.17 0 0 0 0 .21l-1.9 1.35h-2.32c-.4-.06-.78-.11-.77.49s.36.58.78.5h13.79a.62.62 0 0 0 .24-.1c.28-.3.36-.59-.15-.91Zm-26-.59.53.52Z' /%3E%3Cpath fill='%23eff3f7' d='M49 145.7h3.76c1.63 5 3.08 9.91 4.79 14.71 3.6 10.06 10.17 17.8 19.95 22a30 30 0 0 0 21.82 1.06c6-2 11.12-5.15 14.33-10.41 6.95-11.4 4.38-23.17-6.58-31.27-4.66-3.44-10.13-5.89-15.43-8.36C82 128.89 72 125.22 63.35 118.7a34.32 34.32 0 0 1-12.67-19c-3.24-11.55-.41-21.14 7.19-29.56a28.13 28.13 0 0 1 21.36-9.62c4.91 0 9.76-.33 14.72 1.36a42.06 42.06 0 0 1 15.15 9.42 6.06 6.06 0 0 1 1 1.69c4.24-2.55 4.64-6.51 6.06-10.17h3.52v32.4l-3.26.36c-1.53-3.6-3-7.21-4.59-10.73-3.49-7.55-8.7-13.52-16.33-17.12-7.89-3.73-16-4.28-23.82-.25C61.16 72.87 58 86.76 67.24 97.14c4.6 5.15 10.55 8.32 16.64 11.25 9.66 4.65 19.49 9 28.92 14 10.66 5.71 16.71 14.83 17.45 27.1a59.73 59.73 0 0 1 0 8.46c-1 12.87-7.65 21.66-19.17 27.42-9.21 4.6-18.89 4.83-28.5 3.41a35.66 35.66 0 0 1-18.73-8.85c-1.81-1.65-3.69-3.22-6-5.27-1 1.76-1.92 3.22-2.64 4.78s-1.17 3.46-2 5a3 3 0 0 1-2.21 1.49 3.59 3.59 0 0 1-2.2-1.63 4.39 4.39 0 0 1-.47-2.39q0-16.69.08-33.39a15.48 15.48 0 0 1 .59-2.82Z' /%3E%3C/g%3E%3C/svg%3E"); width: 20px; height: 20px !important; background-repeat: no-repeat; background-size: auto; } /*noinspection ALL*/ div.panelForlineDiagram .eurostarsymbol { width: 61px; height: 20px !important; display: inline-block; background-size: contain; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABjCAIAAACuZqovAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABF6SURBVHja7Z13dBdVFsf9a4+7lrUsyopK2UhRWESlKCC9996EQOi9QxIUQgcjBqQFoyRSIj1BuhQFKYKAQOghIC0QSOi9mP3uznH2Ob+ZN+9N+ZX87px7DiGZ35v5vXc/r9x7331PZNNFF10+vZ5Q/vlL7vIkJCQ+EYKQhIQgJCEhCAlCEhKCkISEIKS6ICEhCElICEISEhKCUEyeL1C9bquB42K+2bxt794Dx06cOncp8+q9+w+U73Ln7r1z6ZdSDp/AX/uEf16sXBtqZhKC0Bl58/1W/YdNXrtxx63bd6QiEnbuPjQkalq+txtRe5MQhBalx6BosGczOOjK1Rux8UkvhtSgVichCOXw27P/qINxesfTzhQr9xE1PAlBaC4N2w51Fj/2qli/B7U9CUFoKE++UmHClLluh67XaNqXmp+EINQRjFGwanpnC0mT0AjSABKC8E8SPmrG/T88DV64tu06QBpAQhD+X5Z8t8n7+ykjRs8kJSAhCB0g8PiJMwuTN3w6dd7M+GUrv9927959wQ+m/Xb+qVcrkR6QBDuElheBGZevzJ6/smrj3poC3/qg9ajo2YKFtOj0MekBSVBD+NuZCxbwu5x5dcDHU17get5rtxggUtS8xWtJD0iCF0JrA+C3y9b/u7yQw/2Nks1MS0tNO0t6QBKkEFrA7+7d+536jpN6yuARU02L/ccbNUkVSIIOQgsEXsjILF+nm+yDin/Y1rTksrW6kCqQBBeEFgg8cvy3V4vVt/a4q9dv8gvH/gxSBZIggvDWrTuyBO74JcXOE/cdTOWXT3pAEkQQbt+VIksgdui66gLBJinSA5JggXBWQrIsgQ8ePMxduI6rEGK3FOkBSVBA2GvIZxaWgqE9Rtl/9MVLWUblY7cUKQFJUED4TqXQK9duyBIYPnKG/Ue/W7k9DYMkBKGV0NCEb1c58uhhY2ONHoFpKmkASVBAiNHGQhKK/CUaO/L0lMNpRk/xDDolIcmBEBYq3eLs+QxZCNt0jXLk6bEJSUaPQIQ3NT9JUECYkLhKlsAZs5c68mjORgrORPTJVz58Nl+VXAVr5ilav8A7TQqXaYmYm5JVw8rV7lqlYa+3K7TLVbAW6Q1JwEDYLGyYLIH7D6a+XLi2qwQqE9HWXYb3jYgZMyn+y2+Sk1Zt3rpzPzYlXhWzHt28dedo6umNW3bPWbhm/OQ5vYdOatwuHHwCYFIpEj+C8KnXKu3ae1gWwo+6OTARxb5eXx19DDiTV28GmaE9R5Wu1vHZfFWDRJMwX8DeTprk+xeEURO/ktXghUkbbD40b/GG+82C1Lx8nTqd/t3an5A+58O63XOkDr1XpUP01Hk4iYBW2v4FYamqYbdu35VS1tt37uFTdh5ar/Wg9AuXs/34evz48U879k2cMrdBmyG5An//VNMOkYuX/8n5VKZ6J4LKXyCcHLtQVkHtdKJ/zVMhcsxMxLhlB9SVciRt1jfJmLhi83EAKc1bZVvD+7r71yOar9Oq83Aiyl8g/OebdS9czJRSx19Tjj+X3+LyqWWnT3buOZQd4Bfi1Bclb+wXGeO3g8kzeau07T5y6YofHj1+7Pn+RKB/QQhNklVBGBgtPOj9mp2R6iI7x12///77L78emZWQ1KX/BITd+dzi0nXABBhdsLjVfdtr128RgX4Hoex+pcPHTqGXlXoEHAzJq7dkB8eFaTZ2VE77aklY7zFAwm2dwNwYS1ZYkjDonTdbY69evx1GYALJvyCs32awrJINjZouWHjIe00jx8S6bf+8cfM2Dh5FV4IHpV/MfPjokV8xCQsWrDtYdbfrPhIhBEXLtnm1aP2nX68s1Uw48CN3kToIRShTo5OC3JwFqzH83hY2p6FrwMqQEPJHCOPmLpdSKaQ8FPHOw70eN2f59Ru3nFJloIWF6NxFaz8Z92XXARMbtRuKTDMYBP6u59nDnkac+Fu5YS+sP3uHT4INCa7IdMl1r/tw3sXAdejoyW07DyAkSFfQrZw+e9F+Nf6wdU+l+j2JH3+E8OVCtTMuXZFqTrgTOQWig+/cb/z6H3c5oqapJ88mLv2+c//xghkTRdySjdoO9U8m3bvIGejXECIfoWyLhrynb50vWKr5iIlxx1JP29QYnK29fM0WHF5fomI7t2uzyPstYZRavWH7Yz37YQ64MJbS1hN/h3D5mp+kGnX2/BWehVSo1wOGQZxubUddMDFDYCdccJZztNmRp1+rVKflwCmzFiJJXM7AD2YwHNtKwPg7hCLprjVXreb92RJg6U5a9aMdXcnMuoYzYaAusuZW96RExdD+wyYjcs2bp745eC1Ytr5Gs36ESmBA2FF+Lqo69/tGxsDiZ0dXYI2Arr9WrIHf1jXsT807foyNWnDJBAR+8YkrK9TrTpAEEoRzF62RamPYUbH9Z/Rn8XbmbHAnYE6Ls18Cq97hWhg0/AuEyFg7D8fVCzkg0Z1RQuSAhBA8SDU25o2X/xd6b+3CPqmhI6f/692mOWAXAnY2zl+8DsZbYo8gtC5YNnhpZ9CZ9C++XFStSZ8c2R6wFSPLIxK0clLjOHihI8PJqth7nc+hjD4kvoTws+mJrqoLNkYhTLR1lxHP5K0cJG3zbN4q8GfWaz0Y4QGTpiciiGzPvqOZV67bqcaTp9ORRgC+WdiuXipEeTpyFoQr1211Cb8Nm3+B2QbpXqi1FHkxpAaiupuERgz85AvspsXSGhklUUua4BhEOGCVHj1tPhafyFcA/x5lx8nhEO4/5HA8JwpEApjS1Sk4mIQgFNpTW9Gmb129EPyFfa51Ww2itiEhCOW2nNnHb8W6rR37jKVDc0kIQml5t1J7LE4ss4eIfkw7fb51lYQk8CAsWq5Nr6GTYBKwvC/m590Hm4cNozYgIQjlICxSpiV2JKxYu/WejUjITVt2Y3se1T4JiSiEsIljvzwS9W39eb8j1pfEJd9T1ZOQmECIHUDwLGH7Jv+YW2vX5zO+paonIfkThOANY92QqGkIht6+60DW1euuhr8g5tPL3xNGV3QoXsiSREJiEUIvXx16jfHaN3y+QHWc1H3o6KlsgwMJJ48P2bgkj7joRGCXL6n+NSysqNDeyxKloyILKYKfPW9AOeoNHToUrVLrHVZs1olSCFu47jtYKBOC2iCuvA0hMgsh7Y/UR7yz8wgJYDD6pZ06p2aU0r1t05I8D9OeExdd/VP/OnJYQUGVVT+iC5XpW53Y+lLMuBApePCg+Kn5M/e/qFvgnrW5+/cpkivkA9kC8Sa6r7cs/nXPAtG5CHZ2ah+kCr+DE7+TFbyepoNTRbBu0enY7HcsQojUL8hA0XNwNA45wVAjewoSDhLzAn6azEtGyVF8AmGT5sVtQqgKUBRRNdAiUhrgwbuJFLhR+A3ZD6J+pGqblU160xCVbfZOdDTi/Qj/oeib+J0d21LKG+IHdcakNDR/8iIBIRIwY6t1aM/Rnt4FnKYkBSH24HsTv2zuydhqJe5dl9uoU1RFt4u1ACGri6YQ4mdWPBUFM2p+V+05WOHLqgVmeYyNIJZPoNFw6isIPXsEwcHQFEK2ToymCUoh6l+V+wf0LaJWlBCEiu7O+HopcEI8PnbNTItbHDl6Zvteo6s37Qvq4KXglIIc6VIQDh4xzXH8KjXoOTl2gSd+2CnLTxCmKiinjcUb0g0IdZeUKIGFx6iZcScLDD6CD3r26+iwNXhzwE5KeJ2FGequ0U6lt0qYlj9tWy7N++PR0E68g0ZwMwub5w0QI65QpiczeEnZtlM7JuW1dUdFTiHqf5Wno9oxIUc1ikJoE4CYmQukIATtDuLXtlvUuk079XOErdpcuHQL/sdFOlp/g9DzuVBi3XugN6yS8Zd8mkmd7ryU1XiRGhNcL1moQ9a0pn5BtoMQWd/yGwJfFnXCdna67+YJIX6DlwHMeAcvQRgxaoYUhGfOZThh9qzWO/xzzmHAgjlqAxdCiNpn6748C5UpgZ4fQV/u+RH2y2JMc6ontQOhOtTj5dn3F5mRmjaEMv1WOcS8SRBCAKzMOLwEYaN24TaTHUoJQueGT4jjZGTBmfJhfcYKlhbQEPJvY5eC4hY8dmboqcd2aHEDQpY60KKMPPzZoyyE7GAL8ZzMo25Z5WGLUr6XNyBEdiAL2Sxln5K/ROMeg6Ox44mf33rfwVQcGiFebEBDyFnQsgZYo8mq6RLLU481Wi7l0nADQtUko35HdkZq6mYQhFDwNh/vrH8kf3SRYNwMDg8K6z0WxzLjwBPTMpED6iXJJA6sSvFNo5adfi5ByNLiiRnbeYt4HVjB3JWzsmLfDb1A42bFfQUhWwNqNbJjo+mE2QKE9gMb3ILw4JGTFvyNPQZFGxVYqHQL/BVbpa5cE9qzjwGwaftIC28ubiI3aiRfQQjjG0cz2BJkxysWYM/Xw+xLN3LAjs/aGoTqe2JtzP6ev4SzAKFq38oS9kD6AEIMQdb8/mfPZ4A0GFEgKASHtwCnq9dvShViYQAMaAg1zndddwLrmZCtE/b1dJEAb1l6rkILYTd2IFS/o2bEY5e1/K5BBEKXlsHOQ1i2VlefhKFid1Xj0Ag7b+7/EHqGdLEWF6P1HmsXdQMJjL2AXxdFsMFxbTul6Oy0UzMRYNfD/EgG04bAL1XUs/TMxX4EIWSfywfoaq4LGZmOOP2dNcy4AaGRKCE+pt8rU34Gxeo3HwkoJUYhdg3JPld8gmoBQtUko+uXF5yRsg2BjkMTrcpON7Jkvo7PIMR80msExiYkFSrVwpHXDlwI+crKgmFnOiq+LwQ0amJNxDmUhZA1yeiandgZKccuJRhGh9vcGAOdh7BU1TCcyOmFIxOc3YThLISCKmtqbVMhhFprorfYGSBHxVlLvWwXbuez0Hj2DTeK1aoshKpJBpzrmrKxNBXx0IhACAOYf+WY4cuICXEuHpyw5xDOaXC8CnziJ2S1nO+F5zsAMdcy6qExLlkObWFXQRYqBN2KYE9huSOTiiDnTMhZCMEq29mxUwkHY4Nch/BveSoih5rj+CE4BgcGuVQF9iHUOBtF7lctKxrbugiEGheC0Y4HdsJmaqk3WhBKefmNlFvESyk1pdfEuIqIEdicdYGFrsQvIPxvPx0acffefceS4R9MxVIzd+E67vVDjkAoNX8TCbzmQ4jRj+2njbScXRcJ9uUo2Vqwm80QUykI2ah0QTHaVMFfnLOTDgfDg1yHEFK5Qc9jJ07bYe9y1rWv532HtDde2IAvu/nFtG/mtxb+xOqQkcLxIdR4zDHd0l1YarzqptM8zVZdOxUiG+clDiH7pUy/EWso0m0U0/dku1e+t8O/IFTiPCfNSHzw4KEUexmXr6zZsKPbwE9febOu1zJ8sPM60029nKwH7NCEwQS5W3RVjSWQo+WmEGoUyMj+wa4MITC7c3amsu+mbMPxBEAkMgY3sGs2kQFEHEJ1eBfx2pmaeU0hxCNYkmUDAH0JoSKlq3XsFxkzZ8HqlCOGR17u3HNoatxipH7yVSZ82YkNx3nt6blmPewaWwJ/b5EIhBpPhtGLsZNSpYNAd4OAT9aQyEbAcXxiKipKnBoKYbskJV+LJo2N4OghCCG7qV9kvcoPRrcQMZPpgr/eXQhZeSGkBna4f1CzM/IOvlGyWZ636j1XoJo/5LpyCkKlyXXd1rqZGvhtKQihhnwjNdKMh6YxAEZjnXgyCNlltiCE7LRfcL3KtojnLMZCAPdGG7YDH0Pot6KmWhHkx9QJAUXhFIUHiUxpBCEU91hA/0wDAJTkF/x5Zpawb0AqzFIQQnXCLB6Lx3fVsHTxu0X3PBYEoVsCpYcyqU4nNBv+Kz6TgbqLp/Fks7bwN9oocS1swihAhZ8xtRNf7eBOTDKNkMbv8QjZ/T4iEEqZZARdNSyEpi3ikseCICSxJWzeTvcCu2w+i7MplO0oRXof06xTBCEJSeAJQUhCQhCSkBCEBCEJCUFIQkIQUl2QkBCEJCQEIQkJCUFIQkIQkpCQeFn+A1NMkqKpFlvmAAAAAElFTkSuQmCC '); } /*noinspection ALL*/ div.panelForlineDiagram .aircraft { width: 20px; height: 20px !important; display: inline-block; background-size: contain; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8IS0tIENyZWF0b3I6IENvcmVsRFJBVyBIb21lICYgU3R1ZGVudCBYOCAtLT4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMjEwbW0iIGhlaWdodD0iMjEwbW0iIHZlcnNpb249IjEuMSIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGltYWdlLXJlbmRlcmluZz0ib3B0aW1pemVRdWFsaXR5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCINCnZpZXdCb3g9IjAgMCAyMTAwMCAyMTAwMCINCiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogPGcgaWQ9IkxheWVyX3gwMDIwXzEiPg0KICA8bWV0YWRhdGEgaWQ9IkNvcmVsQ29ycElEXzBDb3JlbC1MYXllciIvPg0KICA8cGF0aCBmaWxsPSIjMkYzRDhBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xMDQ0MCA5MjhjNzU3LDAgMTAxMiwxMjQzIDEwMTIsMTk1Nmw2NiA1MDc2IDY5MjYgNTIyNmMyNDUsMTQ5IDExMDQsNzc2IDEyNjQsOTg1IDIzMSwyNTggMTc2LDc2MCAxNzYsMTA1NWwwIDUxNiAtNjc4NSAtMjcwOGMtMzIyLC04MSAtNjcwLC0xNzkgLTk3OSwtMTc5IC03ODUsMCAtNjc5LDk4NSAtNzE5LDE1MjJsOCAyNjc2IDIyOTAgMTY3OSAyMTQgMTM0MCAtMzEyOCAtODc0IC01NzAgMCAtMzEzNCA4NzQgMjE1IC0xMzQwIDIyNDkgLTE2NzkgOCAtMjY3NmMwLC01MjkgMTA5LC0xNTIyIC02NzMsLTE1MjIgLTMyOCwwIC02NzAsOTggLTk4NywxNzlsLTY3NzggMjcwOCAwIC01MTZjMCwtMjk1IC01NywtNzk3IDE4MiwtMTA1NSAxMzIsLTIwOSAxMDE0LC04MzYgMTIzMSwtOTg1bDY5NDEgLTUyMjYgNzYgLTUwNzZjMCwtNzEzIDIzMSwtMTk1NiA5ODcsLTE5NTZsLTkyIDB6Ii8+DQogPC9nPg0KPC9zdmc+DQo='); } div.panelForlineDiagram .red { color: red; } div.panelForlineDiagram { vertical-align: top; background-color: white; } div.panelForlineDiagram s { color: red; text-decoration: line-through } .black { color: black; } /*noinspection ALL*/ /* div.panelForlineDiagram .TOCLO { font-family: Johnston100-Medium, sans-serif; font-size: 14pt !important; } */ /*noinspection ALL*/ /* div.panelForlineDiagram .TOCXR { font-family: Johnston100-Medium, sans-serif; font-size: 14pt !important; } */ .hiddenTable { visibility: hidden } /*noinspection ALL*/ .supersuper { background-color: white; } /* TFL Codes from http://content.tfl.gov.uk/tfl-colour-standards-issue04.pdf */ /*noinspection ALL*/ .rainbowBoard { margin-top: 10px; color: #fff; font-family: Johnston100, sans-serif; left: 0; position: relative; font-size: 14px; -webkit-padding-start: 0; padding-inline-start: 0; } .rainbowBoard td { padding: 8px 15px 8px 15px } .rainbowBoard tr > td:nth-child(1) { width: 50% } /* .rainbowBoard tr > td:nth-child(2) { } */ .black { color: #000 !important } /*noinspection ALL*/ .partClosure, .severeDelays { background: #faf5e1 } .tflStatus { color: #0019A8; padding-left: 0.5em; align-self: center; width: 30vw } .tflLineName { width: 30vw; max-width: 210px; display: table; text-align: center; white-space: pre-wrap } #showDebugTable { font-size: smaller } div.panelForlineDiagram { position: relative } #headingone { display: none; } /*noinspection ALL*/ div.panelForlineDiagram .lastUpdatedMessage { color: #AEAFB4; } /*noinspection ALL*/ div.panelForlineDiagram .classDebugLocation { /* padding-top: 50px */ padding-top: 0px; } /* div.panelForlineDiagram .errorMessage { color: #A1A5A7; background-color: white; } */ div.panelForlineDiagram s { -webkit-text-decoration-color: red; text-decoration-color: red; color: black } div.panelForlineDiagram ul.rainbowBoard li { display: -webkit-box; display: flex; } .station:before { height: auto; position: absolute; left: 84px; top: 0; bottom: -25px; content: " "; display: block; width: 10px; background: #000; background-size: 2px; z-index: 1; } /* overwrite for buses here */ /* #DC241F */ #panelBusstops .panelForlineDiagram .classDebugLocation ul .station:before { background: #DC241F; } #panelBusstops .panelForlineDiagram h1 { display: none; } #panelBusstops .panelForlineDiagram .main_header h1 { display: unset; padding: 0; } .station svg:first-of-type { position: relative; z-index: 1; /* top: -25px; */ } .station:last-of-type:before { bottom: 100%; } /* .station:first-of-type:before { top: 90%; } */ /*noinspection ALL*/ div.panelForlineDiagram .nameOfStation { display: inline; font-size: 1.3rem; width: 60%; } .dynamic { /*border: 1px dotted black;*/ visibility: hidden; display: none; width: 400px; -webkit-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; /*border: 6px solid #b7007c;*/ /*border-radius: 4px;*/ height: auto; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.36); box-shadow: 0 0 4px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.36); } /*noinspection ALL*/ div.panelForlineDiagram .infobutton { width: 20px; height: 20px !important; margin-left: 0.5em; display: inline-block; background-size: contain; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgo8cGF0aCBkPSJNNTAuNDMzLDAuODkyYy0yNy4xMTksMC00OS4xMDIsMjEuOTgzLTQ5LjEwMiw0OS4xMDJzMjEuOTgzLDQ5LjEwMyw0OS4xMDIsNDkuMTAzczQ5LjEwMS0yMS45ODQsNDkuMTAxLTQ5LjEwM1M3Ny41NTIsMC44OTIsNTAuNDMzLDAuODkyeiBNNTksNzkuMDMxQzU5LDgzLjQzMyw1NS4xOTQsODcsNTAuNSw4N1M0Miw4My40MzMsNDIsNzkuMDMxVjQyLjQ2OWMwLTQuNDAxLDMuODA2LTcuOTY5LDguNS03Ljk2OXM4LjUsMy41NjgsOC41LDcuOTY5Vjc5LjAzMXogTTUwLjQzMywzMS4yMTRjLTUuMDQ4LDAtOS4xNDEtNC4wOTItOS4xNDEtOS4xNDJjMC01LjA0OSw0LjA5Mi05LjE0MSw5LjE0MS05LjE0MWM1LjA1LDAsOS4xNDIsNC4wOTIsOS4xNDIsOS4xNDFDNTkuNTc0LDI3LjEyMiw1NS40ODIsMzEuMjE0LDUwLjQzMywzMS4yMTR6Ii8+Cjwvc3ZnPg==") } #overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.80); z-index: 2; cursor: pointer; } #overlayOverlay { display: none; visibility: hidden; background-color: rgba(255, 255, 255, 0.80); width: 600px; height: 80%; /*top: 25px;*/ /*left: 25px;*/ /*position: relative;*/ /*border: 6px solid #b7007c;*/ /*border-radius: 4px;*/ -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.36); box-shadow: 0 0 4px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.36); padding: 4px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: black; /*background: #666666;*/ opacity: .8; z-index: 10000; font-family: Roboto, sans-serif; overflow: hidden; } * { -webkit-box-sizing: border-box; box-sizing: border-box } /* Set height of body and the document to 100% */ body, html { height: 100%; margin: 0; font-family: Arial, sans-serif; } /* Style tab links */ .tablink { background-color: #fff; color: #6200ee; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; /*font-size: 17px;*/ width: 25%; text-transform: uppercase; font-size: .875rem; line-height: 2.25rem; font-weight: 500; letter-spacing: .0892857143em; text-decoration: none; } .tablink:hover { background-color: #6200ee;; color: white; } /* Style the tab content (and add height:100% for full page content) */ .tabcontent { color: white; display: none; /*padding: 100px 20px;*/ height: 100%; background-color: rgba(255, 255, 255, 1); /*overflow-x: hidden;*/ overflow-x: auto; width: 100%; padding: 0; } /*noinspection ALL*/ #Departures { background-color: white; color: black;; } /*noinspection ALL*/ #Interchange { background-color: white; color: black;; } #Facilities { background-color: white; color: black;; } /*noinspection ALL*/ #Rainbows { background-color: white; color: black;; } /*noinspection ALL*/ .onehundredpercent { width: 100%; } /*noinspection ALL*/ .onehundredpercent2 { width: 100%; } .onehundredpercent2 td { border-bottom: 1px solid white; } /*noinspection ALL*/ .fiftypercent { width: 50%; vertical-align: top; font-size: 14px; } .displayblock { display: block; padding: 2px } .formatRainbowBoards { border: 1px solid #cccccc; margin-top: 10px; background-color: white; /*box-shadow: 0 0 4px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.36);*/ -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28); box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28); } .statusSeverityDescription { color: black; } .FormatNationalRailArray { -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28); box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.28); background-color: white; color: black;; } .otherstatusback { background: #faf5e1; display: block; padding: 2px; color: #2070b0; } #overlayOverlay s { color: red; text-decoration: line-through } .FormatNationalRailArray a { color: black } /*noinspection ALL*/ .hiddentoStart { display: none; } .closebutton { color: #32BEF0; float: right; } .closebutton a:hover { color: #32BEF0; } .closebutton a:link { color: #32BEF0; } .FNAlink { color: black !important; } .pressme { background: #00BD19; color: white; font-family: 'Johnston100-Regular', sans-serif; padding: 8px; display: none; } .x { char: 🖼; } div.panelForlineDiagram .lastUpdatedMessage { margin-left: var(--template-padding); } @media only screen and (min-width: 768px) { div.panelForlineDiagram .nameOfStation { width: unset; } } /* journey media query overrides for desktop */ @media only screen and (min-width: 1100px) { div.panelForlineDiagram .nameOfStation { width: unset; } div.panelForlineDiagram .keeptogether { width: unset; max-width: 790px; } ul#MarkerTarget { max-width: 500px; margin-left: 300px; } div.panelForlineDiagram .lastUpdatedMessage { max-width: 500px; margin-left: 300px; } .singlefullitem { min-height: calc(100vh - var(--header-height) - var(--footer-height) - 1rem); } } .station:hover { cursor: pointer; } /* footer.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ footer { position: fixed; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; height: var(--footer-height); width: 100vw; bottom: 0; left: 0; background-color: white; border-top: 1px black solid; z-index: 100; -webkit-box-shadow: 0 3px 8px 0 #333; box-shadow: 0 3px 8px 0 #333; transition: all 0.2s ease; /* padding:5px 0 8px 0; */ } footer nav { width: 100%; height: 90%; position: absolute; scrollbar-width: none; } /*#panelFeedback {*/ /* overflow-y: hidden;*/ /*}*/ footer nav::-webkit-scrollbar { -webkit-appearance: none; width: 0; display: none; height: 0; } footer nav ul { overflow-y: hidden; top: 0; left: 0; scroll-snap-type: x proximity; height: 100%; /* display:inline-block; */ -webkit-box-align: center; align-items: center; margin: 0; position: relative; overflow-x: scroll; white-space: nowrap; padding: 0; width: 100%; scrollbar-width: none; /* margin-left:-10%; */ } #moreFooter > ul > li > a > svg { max-height: 60px; } @media screen and (min-width: 1100px) { #moreFooter > ul > li { height: auto; width: 100%; min-height: 7.5em; min-width: 200px; } #moreFooter > ul { overflow: scroll; } } footer nav::-webkit-scrollbar { display: none; -webkit-appearance: none; width: 0; height: 0; } footer nav ul::-webkit-scrollbar { display: none; -webkit-appearance: none; width: 0; height: 0; } footer nav ul li { list-style-type: none; scroll-snap-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; display: inline-block; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; min-width: 23%; overflow-y: hidden; border-radius: 5px; padding: 0 10px; height: 95%; border: 1px transparent solid; } footer nav ul li:first-of-type { margin-left: 10%; } footer nav ul li:last-of-type { margin-right: 10%; } footer nav ul li a { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; width: 100%; height: 100%; -webkit-box-pack: justify; justify-content: space-between; } @media only screen and (min-width: 1100px) { footer nav ul li a { justify-content: center; } } footer nav ul li p { color: black; } footer nav ul li svg { height: 70%; } footer nav:first-of-type { z-index: 90; background-color: #FFF; } footer nav div img { height: 70%; } footer nav ul li p { text-align: center; font-size: 1rem; } footer nav ul li p multilingual { text-align: center; font-size: 1rem; } .footer_icon_active { border: 1px black solid; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } .footer_icon_active a svg { filter: drop-shadow(1px, 1 p) } #arrow-left, #arrow-language-left { position: absolute; left: 0; top: 0; height: 100%; width: 10%; z-index: 10; -webkit-box-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } #arrow-right, #arrow-language-right { position: absolute; right: 0; width: 10%; -webkit-box-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; top: 0; height: 100%; z-index: 11; } #arrow-left, #arrow-right { display: -webkit-box; display: flex; } #arrow-language-left { right: 170px; left: unset; width: 25px; } #arrow-language-right { width: 25px; } #arrow-language-right, #arrow-language-left { transition: all 0.3s ease; } #arrow-right svg, #arrow-left svg { height: 60%; opacity: 0.6; } #arrow-right:hover, #arrow-language-right:hover { cursor: pointer; } #arrow-left:hover, #arrow-language-left:hover { cursor: pointer; } .arrow-language-hide { opacity: 0; visibility: hidden; } @media only screen and (min-width: 675px) { footer nav ul li a p { font-size: 1.3rem; white-space: break-spaces; } } @media only screen and (min-width: 1100px) { footer { grid-column-end: 6; grid-column-start: 1; position: relative; -webkit-box-shadow: unset; box-shadow: unset; /* don't know why this works but it does */ /* height:100%; */ } } /* global.css */ * { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 12px; font-family: Nunito; } html { overflow: -moz-scrollbars-none; scroll-behavior: smooth; } a { text-decoration: none; } p { margin: 0; font-weight: 600; font-size: 14px; } input, select, textarea { font-size: var(--text-input); } @media only screen and (min-width: 1100px) { * { font-size: 15px; } p { font-size: 1.2rem; } } h1 { font-size: 1.5rem; margin: 0; } h2 { font-size: 1.5rem; margin: 0; } h3 { font-size: 1.3rem; margin: 0; } a:visited { border: none; } a:active { border: none; } body { margin: 0 auto; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; scrollbar-width: none; min-height: 100vh; } :root { --max-width: 1100px; --grid-gap: 8px; --padding: 5px; --header-gap: 10px; --template-padding: 13px; --text-input: 16px; /* footer needs a pixel height // firefox doesnt like the vh value when sub menu is appended*/ --footer-height: 60px; --header-height: 70px; --journey-headings: "departure departure station"; --inactive-journey-grid: .75fr minmax(50px, auto) 5fr; --active-journey-grid: .75fr minmax(50px, auto) 5fr; --journey-grid-areas: "departure infographic station"; --sub-menu: calc(calc(var(--footer-height) / 10) * 7); /* --panel: calc(100vh - calc(var(--footer-height) + 0.5rem + var(--header-height))); */ --panel: calc(100vh - var(--header-height) - var(--footer-height)); /* --panel-sub-menu-active: calc(100vh - calc(var(--footer-height) + 0.5rem + var(--sub-menu) + var(--header-height))); */ --panel-sub-menu-active: calc(100vh - var(--footer-height) - var(--sub-menu) - var(--header-height)); --panel-no-footer: calc(var(--panel-sub-menu-active) + var(--footer-height)); --colorTheme: var(--northern); --gwr: #0a493e; --gwr-secondary: #6ccb99; --lner: #b83b37; --northern: #262262; --gc: #ef7d17; --gc-secondary: #323132; --great-northern: #43165c; --nr: #F07E26; --nr-secondary: #004D71; --tfw: #ae1c0f; --es: #005172; --es-secondary: #ABD0D9; --sw: #0092cc; --ht: #e50071; --inner-panel: calc(100% - var(--sub-menu) - .5rem); --lang-height: 40px; --panel: calc(100vh - var(--header-height) - var(--lang-height) - var(--footer-height)); --panel-sub-menu-active: calc(100vh - var(--footer-height) - var(--sub-menu) - var(--header-height) - var(--lang-height)); } .app { min-height: 100vh; max-width: var(--max-width); /* height:calc(100vh - calc(var(--footer-height) + var(--sub-menu))); */ overflow: visible; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* Three columns, one three times as wide as the others */ grid-template-rows:-webkit-min-content auto var(--footer-height); grid-template-rows:min-content auto var(--footer-height); /* grid-template-rows: minmax(auto, calc(var(--header-height) + var(--header-gap))) auto var(--footer-height); */ background: #FFF; /* grid-template-rows:minmax(auto, calc(var(--header-height) + var(--header-gap))) auto minmax(auto, var(--footer-height)); */ /* grid-row-gap:var(--grid-gap); Three rows, two with explicit widths */ grid-template-areas: "header header header header header" "main main main main main"; overflow-y: hidden; /* DAS-949 overrides */ grid-template-rows:-webkit-min-content -webkit-min-content auto var(--footer-height); grid-template-rows: min-content min-content auto var(--footer-height); grid-template-areas: "lang lang lang lang lang" "header header header header header" "main main main main main"; } /* .TOCGW .app { */ /* DAS-949 overrides */ /* grid-template-rows:-webkit-min-content -webkit-min-content auto var(--footer-height); grid-template-rows: min-content min-content auto var(--footer-height); grid-template-areas: "lang lang lang lang lang" "header header header header header" "main main main main main"; */ /* } */ @media only screen and (min-width: 375px) { :root { --header-height: 70px; --footer-height: 70px; } } @media only screen and (min-width: 768px) { :root { --footer-height: 90px; } } @media only screen and (min-width: 1100px) { .app { grid-template-rows:-webkit-max-content auto auto; grid-template-rows:max-content auto auto; /* border-right:1px black solid; border-left: 1px black solid; */ /* DAS-949 overrides */ grid-template-rows: min-content min-content auto auto; } :root { --template-padding: 21px; } /* h1 { font-size:2.1rem; } */ h2 { font-size: 1.3rem; } } header, main, footer { width: 100%; } /* original header settings */ header { -ms-grid-row: 1; -ms-grid-column: 1; grid-row: 1; grid-column: 1; -ms-grid-column-span: 5; grid-area: header; display: -ms-grid; display: grid; -ms-grid-columns: 25% 50% 25%; grid-template-columns:25% 50% 25%; -ms-grid-rows: -webkit-min-content; grid-template-rows: -webkit-min-content; -ms-grid-rows: min-content; grid-template-rows: min-content; row-gap: var(--header-gap); grid-template-areas: "weather logo seat"; background-color: white; height: var(--header-height); padding-top: 1rem; transition: all 0.2s ease; opacity: 1; visibility: visible; } .header-hide { opacity: 0; display: none; visibility: hidden; } .header_weather, .header_logo, .header_seat { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: center; align-self: center; justify-self: center; /* max-height: calc(var(--header-height) - var(--header-gap) - 25px); */ } .header_weather svg, .header_logo svg, .header_seat svg { /* height: var(--header-height); max-width: 80%; */ width: 100%; } .header_weather svg { filter: drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.4)); } .header_weather_info { -ms-grid-row: 3; grid-row: 3; grid-column: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: weather-info; -ms-grid-row-align: center; align-self: center; padding: 0 0 0 var(--template-padding); display: none; } .header_weather p, .header_logo p, .header_seat p { margin: 5px 0 0 0; } .header_logo { -ms-grid-row: 1; -ms-grid-column: 2; grid-row: 1; grid-column: 2; grid-area: logo; } #back-end-weather { display: none; } #back-end-stop { display: none; } .header_seat h2 { width: 100%; text-align: center; font-size: 1rem; padding-left: var(--template-padding); } /* psuedo flag stuff for mobile */ .header_seat { position: relative; } .header_seat:hover { cursor: pointer; } @media only screen and (min-width: 1100px) { .header_seat h2 { font-size: 1.3rem; } } /* nav { grid-area:nav; } */ /* header.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ /* cube styling */ .header-cube-config { display: none; } .header-cube-header { grid-area: header; background-color: white; transition: all 0.2s ease; opacity: 1; visibility: visible; width: 100%; perspective-origin: 50% 50%; /* override previously set properties */ /* -ms-grid-row: unset; -ms-grid-column: unset; grid-row: unset; grid-column: unset; */ -ms-grid-column-span: unset; display: unset; -ms-grid-columns: unset; grid-template-columns:unset; -ms-grid-rows: unset; grid-template-rows: unset; -ms-grid-rows: unset; grid-template-rows: unset; row-gap: unset; grid-template-areas:unset; background-color: unset; padding-top: unset; opacity: unset; visibility: unset; } @media screen and (min-width: 1100px) { .header-cube-header { height: calc(1rem + var(--header-height) + var(--header-gap)); } } .header_inner { position: relative; width: 100%; height: 100%; transition: transform 0.5s ease; -webkit-transition: transform 0.5s ease; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .header-cube-default { display: -ms-grid; display: grid; transform: rotateX(0deg) translateZ(60px); -webkit-transform: rotateX(0deg) translateZ(60px); -moz-transform: rotateX(0deg) translateZ(60px); -ms-transform: rotateX(0deg) translateZ(60px); -ms-grid-columns: 1fr 3fr 1fr; grid-template-columns:1fr 3fr 1fr; row-gap: 8px; grid-template-areas: "weather logo seat"; background-color: white; transition: all 0.2s ease; opacity: 1; visibility: visible; } .header_second { display: flex; flex-direction: column; align-items: center; justify-content: Center; padding: 2px 5px; background-color: white; transition: all 0.2s ease; opacity: 1; visibility: visible; height: 100%; } .header-cube-1 { /* background: red; */ transform: rotateX(90deg) translateZ(60px); } .header-cube-2 { transform: translateZ(100px) rotateX(-180deg); /* background: green; */ transform: translateZ(-60px) rotateX(180deg); } .header-cube-3 { transform: rotateX(270deg) translateZ(60px); /* background: blue; */ /*transform-origin: bottom center;*/ } .strike-container-text, .promotion-text { font-weight: 700; font-size: 50px; display: block; text-align: center; } .strike-container-text-top, .strike-container-text-middle { color: #000; font-size: 85px; word-break: break-word; } .promotion-text { font-weight: 500; } .strike-container-text-top, .promotion-text { color: #fff; } .strike-container-text-bottom { color: #fd501f; font-size: 45px; } .network-rail-anchor, .plan-events-anchor, .promotions-anchor, .industrialaction-anchor { display: flex; flex-direction: column; align-items: center; justify-content: center; } .industrialaction-anchor { height: 100%; background-color: #f9dc5c; flex-direction: row; gap: 10px; padding: 5px; display: grid; grid-template-areas: "svg bannercontent"; } .industrialaction-anchor > svg { height: auto; grid-area: svg; max-height: 50px; width: 100%; } .industrialaction-anchor > div { height: 100%; color: white; display: flex; flex-direction: column; align-items: center; grid-area: bannercontent; } .industrialaction-anchor > div > p { height: auto; color: black; text-align: center; } .industrialaction-anchor > div > p > multilingual, .industrialaction-anchor > div > button > multilingual { font-size: 14px; } @media screen and (min-width: 475px) { .industrialaction-anchor > div > p > multilingual, .industrialaction-anchor > div > button > multilingual { font-size: 1.5rem; } .industrialaction-anchor > div { gap: 5px; } } .industrialaction-anchor > div > button { border: 3px solid black; border-radius: 15px; cursor: pointer; padding: 0px 10px; background: #403F4C; color: white; } .promotions-anchor { background-color: #0d1c2b; } .network-rail-mobile-delay-notice, .strike-banner-mobile, .promotion-banner-mobile { height: 100%; max-height: var(--header-height); } .network-rail-ipad-delay-notice, .strike-banner-tablet, .promotion-banner-tablet { display: none; max-height: 70px; } .network-rail-desktop-delay-notice, .strike-banner-desktop, .promotion-banner-desktop { display: none; max-height: 95px; } @media screen and (min-width: 700px) { .network-rail-mobile-delay-notice, .strike-banner-mobile, .promotion-banner-mobile { display: none; } .network-rail-ipad-delay-notice, .strike-banner-tablet, .promotion-banner-tablet { display: block; } } @media screen and (min-width: 1100px) { .network-rail-ipad-delay-notice, .strike-banner-tablet, .promotion-banner-tablet { display: none; } .network-rail-desktop-delay-notice, .strike-banner-desktop, .promotion-banner-desktop { display: block; } } .header-cube-default, .header_second { position: absolute; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .header_alert { display: flex; } .header_alert_active { display: flex; } @keyframes card0 { 50% { transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -moz-transform: scale(0.9); } 90% { transform: scale(0.9) rotate3d(1, 0, 0, 0deg); -webkit-transform: scale(0.9) rotate3d(1, 0, 0, 0deg); -ms-transform: scale(0.9) rotate3d(1, 0, 0, 0deg); -moz-transform: scale(0.9) rotate3d(1, 0, 0, 0deg); } to { transform: translateZ(60px) rotate3d(1, 0, 0, 0deg) scale(1); -webkit-transform: translateZ(60px) rotate3d(1, 0, 0, 0deg) scale(1); -ms-transform: translateZ(60px) rotate3d(1, 0, 0, 0deg) scale(1); -moz-transform: translateZ(60px) rotate3d(1, 0, 0, 0deg) scale(1); } } @keyframes scaleCard { 50% { width: 90%; margin-left: 5%; height: 90%; } } @keyframes card1 { 50% { transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -moz-transform: scale(0.9); } 90% { transform: scale(0.9) rotate3d(1, 0, 0, -90deg); -webkit-transform: scale(0.9) rotate3d(1, 0, 0, -90deg); -ms-transform: scale(0.9) rotate3d(1, 0, 0, -90deg); -moz-transform: scale(0.9) rotate3d(1, 0, 0, -90deg); } to { transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -90deg); -webkit-transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -90deg); -ms-transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -90deg); -moz-transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -90deg); } } @keyframes card2 { 50% { transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -moz-transform: scale(0.9); } 90% { transform: scale(0.9) rotate3d(1, 0, 0, -180deg); -webkit-transform: scale(0.9) rotate3d(1, 0, 0, -180deg); -ms-transform: scale(0.9) rotate3d(1, 0, 0, -180deg); -moz-transform: scale(0.9) rotate3d(1, 0, 0, -180deg); } to { transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -180deg); -webkit-transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -180deg); -ms-transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -180deg); -moz-transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -180deg); } } @keyframes card3 { 50% { transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -moz-transform: scale(0.9); } 90% { transform: scale(0.9) rotate3d(1, 0, 0, -270deg); -webkit-transform: scale(0.9) rotate3d(1, 0, 0, -270deg); -ms-transform: scale(0.9) rotate3d(1, 0, 0, -270deg); -moz-transform: scale(0.9) rotate3d(1, 0, 0, -270deg); } to { transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -270deg); -webkit-transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -270deg); -ms-transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -270deg); -moz-transform: translateZ(60px) scale(1) rotate3d(1, 0, 0, -270deg); } } .card_rotate-0 { /*transform:rotate3d(1, 0, 0, 0deg);*/ /*-webkit-transform:rotate3d(1, 0, 0, 0deg);*/ /*-ms-transform:rotate3d(1, 0, 0, 0deg);*/ /*-moz-transform:rotate3d(1, 0, 0, 0deg);*/ transition: all 0.8s ease; /*transform: unset;*/ /*transform: translateZ(0px);*/ } .card_rotate-1 { transform: rotate3d(1, 0, 0, -90deg); -webkit-transform: rotate3d(1, 0, 0, -90deg); -ms-transform: rotate3d(1, 0, 0, -90deg); -moz-transform: rotate3d(1, 0, 0, -90deg); transition: all 0.8s ease; } .card_rotate-2 { transform: rotate3d(1, 0, 0, -180deg); -webkit-transform: rotate3d(1, 0, 0, -180deg); -ms-transform: rotate3d(1, 0, 0, -180deg); -moz-transform: rotate3d(1, 0, 0, -180deg); transition: all 0.8s ease; } .card_rotate-3 { transform: rotate3d(1, 0, 0, -270deg); -webkit-transform: rotate3d(1, 0, 0, -270deg); -ms-transform: rotate3d(1, 0, 0, -270deg); -moz-transform: rotate3d(1, 0, 0, -270deg); transition: all 0.8s ease; } .header-hide { opacity: 0; display: none; visibility: hidden; } .header_weather, .header_logo, .header_seat { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; align-self: center; justify-self: center; /* max-height: calc(var(--header-height) - var(--header-gap) - 25px); */ max-height: 75px; } .header_weather { grid-area: weather; /* order: 1; width: 25%; */ } .header_logo { grid-area: logo; padding: 5px; /* order: 2; width: 50%; */ } .header_seat { grid-area: seat; padding: 5px; /* order: 3; width: 25%; */ } .header_weather svg, .header_logo svg, .header_seat svg { height: var(--header-height); max-width: 80%; } .header_weather svg { filter: drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.4)); } .header_weather_info { grid-row: 3; grid-column: 1; grid-area: weather-info; align-self: center; padding: 0 0 0 var(--template-padding); /* width: 100%; order: 4; */ } @media screen and (min-width: 768px) { .header_weather_info { text-align: left; } /* .header_first, .header_second { padding-top:1rem; } */ } .header_weather p, .header_logo p, .header_seat p { margin: 5px 0 0 0; } .header_logo { grid-row: 1; grid-column: 2; grid-area: logo; } #back-end-weather { display: none; } #back-end-stop { display: none; } .header_seat h2 { width: 100%; text-align: center; font-size: 1rem; padding-left: var(--template-padding); } /* psuedo flag stuff for mobile */ .header_seat { position: relative; /* width:100%; height:100%; */ /* background:var(--colorTheme); color:#FFF; */ } .header_seat:hover { cursor: pointer; } /* .header_seat::before { content:''; width:5%; left:-1px; top:0; position:absolute; border-left: calc(var(--header-height) / 8) solid white; border-top:calc(var(--header-height) / 2.8) solid transparent; border-bottom: calc(var(--header-height) / 2.8) solid transparent; } */ @media only screen and (min-width: 1100px) { /* .header_seat { position:relative; height:100%; background:var(--colorTheme); color:white; } .header_seat::before { content:''; width:25px; left:-2px; top:0; position:absolute; border-left: 30px solid white; border-top: 45px solid transparent; border-bottom: 45px solid transparent; } */ .header_seat h2 { font-size: 1.3rem; } } /* info.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ .main_item_info { /* display:grid; */ grid-template-areas:"facility deets deets deets deets"; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; width: 100%; grid-template-rows: -webkit-min-content; grid-template-rows: min-content; place-items: flex-start; align-items: center; height: -webkit-min-content; height: -moz-min-content; height: min-content; padding: var(--template-padding); /* border-top:1px #333 solid; */ } .main_item_info:nth-of-type(1) p:nth-of-type(2) { grid-row: 1; grid-column: 3; grid-area: deets; place-self: start; } .main_item_info svg { width: 50%; max-width: 60px; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4)); } .main_item_info_status_symbol { display: none !important; } .main_info { grid-area: content; width: 100%; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: start; justify-content: flex-start; flex-wrap: wrap; } /* .main_item_info:nth-of-type(even) { background:rgba(224, 224, 224, 0.6); } */ .main_item_dropdown { grid-row: 1; grid-column: 3; width: 100%; display: block; grid-area: deets; padding-right: var(--template-padding); word-wrap: break-word; } .main_item_dropdown p { text-align: center; /* font-size:1rem; */ } main { grid-area: main; } .view { display: block; } #icon_oyster { width: 70%; } .main_item_info { display: none; } .visible_item { display: grid; } .background { background: rgba(224, 224, 224, 0.6); } .filter_active { display: block; } .filter_inactive { display: none; } .main_info_filters { grid-area: heading; /* display:-webkit-box; display:flex; */ display: none; width: 100%; justify-content: space-around; -webkit-box-align: center; align-items: center; position: -webkit-sticky; position: sticky; top: 0; padding: var(--template-padding); background-color: #fff; } .main_info_filters button { width: 25%; } .main_info_filters button { -webkit-appearance: none; background-size: 400% 400%; border: none; padding: var(--template-padding) calc(var(--template-padding) / 2); border-radius: 3px; /* -webkit-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); */ color: #000; background: none; width: 30%; cursor: pointer; font-size: 1.3rem; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } /* nodata css*/ .noData { display: flex; justify-content: center; align-items: center; flex-direction: column; height: var(--inner-panel); } .noData svg { width: 25%; max-width: 100px; } .noData p { margin-top: var(--template-padding); padding: var(--template-padding); } /* journey_loader.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ .lds-roller_container { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; height: var(--panel); } .small { height: unset !important; margin-top: var(--template-padding); } .lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-roller div { -webkit-animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; -webkit-transform-origin: 40px 40px; transform-origin: 40px 40px; } .lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: black; margin: -4px 0 0 -4px; } .lds-roller div:nth-child(1) { -webkit-animation-delay: -0.036s; animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 63px; left: 63px; } .lds-roller div:nth-child(2) { -webkit-animation-delay: -0.072s; animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 68px; left: 56px; } .lds-roller div:nth-child(3) { -webkit-animation-delay: -0.108s; animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 71px; left: 48px; } .lds-roller div:nth-child(4) { -webkit-animation-delay: -0.144s; animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 72px; left: 40px; } .lds-roller div:nth-child(5) { -webkit-animation-delay: -0.18s; animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 71px; left: 32px; } .lds-roller div:nth-child(6) { -webkit-animation-delay: -0.216s; animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 68px; left: 24px; } .lds-roller div:nth-child(7) { -webkit-animation-delay: -0.252s; animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 63px; left: 17px; } .lds-roller div:nth-child(8) { -webkit-animation-delay: -0.288s; animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 56px; left: 12px; } @-webkit-keyframes lds-roller { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes lds-roller { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* journey-no-info.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ .index_default_container { width: 100%; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; grid-area: content; padding: var(--template-padding); height: 100%; padding-top: 0; } .index_default_container svg { width: 75px; } .default_item_pointer g { animation: bumpUpBig 1.3s infinite ease; -webkit-animation: bumpUpBig 1.3s infinite ease; } .default_item { /* padding:var(--template-padding); */ padding: 0 var(--template-padding); display: grid; grid-auto-rows: 1fr 1fr 1fr; place-items: center; justify-items: center; } .default_item:last-of-type { height: calc(var(--panel) / 2); } .default_item svg:first-of-type { width: 125px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); } .default_item svg:nth-of-type(2) { filter: drop-shadow(3px -2px 1px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(3px -2px 1px rgba(0, 0, 0, 0.4)); } .default_item p { margin-right: 13px; text-align: center; font-size: 1.4rem; line-height: 2; font-weight: 300; } .default_item p multilingual { margin-right: 13px; text-align: center; font-size: 1.4rem; line-height: 2; font-weight: 300; } .deafult_item:first-of-type { margin-top: var(--template-padding); } @media only screen and (min-width: 440px) { .default_item { width: 80%; } } @media only screen and (min-width: 1100px) { .index_default_container svg { display: none; } .default_item svg { display: block; } .default_item:last-of-type { height: auto; } .index_default_container { /* height: var(--panel); */ height: auto; justify-content: center; padding: 0 var(--template-padding); } .default_item { height: auto; grid-template-columns: min-content auto; } .default_item_pointer { display: none !important; } .default_item p { text-align: left; place-self: Start; align-self: center; } } .default_item_pointer:hover { cursor: pointer; } /* journey.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ @-webkit-keyframes ticker-tape-scrolling { 0% { left: 0 } 50% { left: 0; } 100% { left: -75% } } @keyframes ticker-tape-scrolling { 0% { left: 0 } 50% { left: 0; } 100% { left: -75% } } .main_journey { width: 100%; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; grid-area: content; font-size: 12px; padding: var(--template-padding) 0; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .main_journey_item { display: grid; grid-template-columns:var(--inactive-journey-grid); -webkit-column-gap: var(--grid-gap); -moz-column-gap: var(--grid-gap); column-gap: var(--grid-gap); font-size: 18px !important; grid-template-areas: var(--journey-grid-areas); opacity: 1; } .main_journey_item:nth-of-type(1) { /* padding: 0 0 var(--template-padding) 0 ; */ font-size: 18px; margin: 0 0 var(--template-padding) 0; display: grid; grid-template-areas:var(--journey-headings); /* grid-template-columns:var(--active-journey-grid) !important; */ } .main_journey_item_fac_grid { grid-template-columns:var(--active-journey-grid); } .main_journey_item_fac_active svg { display: initial !important; } .main_journey_item_headings_departure { grid-area: departure; word-break: break-all; } .main_journey_item_headings_departure h3 { width: 200%; } .main_journey_item_headings_station { grid-area: station; word-break: break-all; } .main_journey_item_headings_facilities { grid-area: station; word-break: break-all; display: -webkit-box; display: flex; -webkit-box-align: start; align-items: flex-start; } /* .main_journey_item_facilities_gradient { ; } */ .main_journey_item_headings_facilities h3 { margin: 0 var(--template-padding) 0 0; } .main_journey_item_headings_facilities svg { height: 20px; stroke: #000; stroke-width: 1px; } .main_journey_item_departure { grid-area: departure; } .main_journey_item_station { grid-area: station; display: grid; grid-template-columns: 4fr 2fr 4fr 4fr; grid-template-areas: "name name name name" "preview preview interchange interchange" "facilities facilities facilities facilities"; } .main_journey_item_station_preview { grid-row: 2; grid-column: 1; display: none; grid-area: preview; padding: var(--template-padding) var(--template-padding) var(--template-padding) 0; } .tube { width: 100%; height: 25px; } .tube:nth-of-type(1) { background-color: red; } .tube:nth-of-type(2) { background-color: blue; } .tube:nth-of-type(3) { background-color: brown; } .tube:nth-of-type(4) { background-color: yellow; } .tube:nth-of-type(5) { background-color: orange; } .main_journey_item_station_interchange { grid-row: 2; grid-column: 3; grid-area: interchange; margin: -8px 0 0 0; padding-bottom: var(--template-padding); } .main_journey_item_station_interchange svg { height: 35px; margin: 0 var(--template-padding) 0 0; } .main_journey_item_station p { grid-row: 1; grid-column: 1; grid-area: name; } .main_journey_item_station_facilities { grid-row: 3; grid-column: 1; grid-area: facilities; height: 35px; position: relative; overflow: hidden; -webkit-transition: height 0.2s ease; -o-transition: height 0.2s ease; transition: height 0.2s ease; margin-bottom: var(--template-padding); } .main_journey_item_station_facilities_active { height: auto; } .main_journey_item_station_facilities_active div { display: none; } .main_journey_item_station_facilities_gradient { position: absolute; width: 100%; height: 35px; background: -o-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 1)); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 1))); background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 1)); } .main_journey_item_station_facilities svg { height: 35px; width: auto; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; margin: 0 8px 0 0; } .main_journey_item_infographic { grid-area: infographic; position: relative; } .main_journey_item_infographic_rect { width: 10px; background-color: #2c3838; height: 100%; position: absolute; margin: 0 0 0 20px; top: 0; z-index: -100; } /* .main_journey_item_infographic svg rect { x:10; height:100%; } .main_journey_item_infographic svg circle { cx:15; } */ .main_journey_item_facilities { grid-row: 3; grid-column: 1; grid-area: facilities; position: relative; } .main_journey_item_facilities_gradient { position: absolute; width: 100%; height: 80%; background: -o-linear-gradient(rgba(255, 255, 255, 0.6), rgb(255, 255, 255)); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6)), to(rgb(255, 255, 255))); background: linear-gradient(rgba(255, 255, 255, 0.6), rgb(255, 255, 255)); } /* .main_journey_item_departure, .main_journey_item_station, .main_journey_item_infographic, .main_journey_item_facilities { word-break: break-word; } */ .main_journey_item_facilities svg { display: none; } .main_journey_item_facilities svg:nth-child(2), .main_journey_item_facilities svg:nth-child(3) { display: initial; } .clickSvg { stroke: violet !important; } .opacity { opacity: 0; } /* logo.css */ .logo_northern { fill: var(--northern); } .logo_gwr { fill: var(--gwr); } .logo_lner { fill: var(--lner); } /* main.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ main { grid-area: main; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: var(--grid-gap); /* grid-template-rows:50px auto; */ grid-template-rows: -webkit-min-content auto; grid-template-rows: min-content auto; overflow-y: scroll; grid-template-areas: "heading heading heading heading" "content content content content"; } .main_header { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; height: auto; /* border-bottom: 1px black solid; */ position: -webkit-sticky; position: sticky; top: 0; background: #fff; padding: 5px 0; z-index: 50; -webkit-box-shadow: 0 2px 2px 0 #333; box-shadow: 0 2px 2px 0 #333; flex-wrap: wrap; scrollbar-width: none; } .main_header::-webkit-scrollbar { -webkit-appearance: none; width: 0; display: none; height: 0; } .main_header div:first-of-type { /* white-space:nowrap; */ padding: 0 var(--template-padding) 0 0; } .main_header p, .main_info p { text-align: left; font-size: 1.2rem; line-height: 1.8; } @media only screen and (min-width: 1100px) { .main_info p { text-align: left; } } .main_header { grid-row: 1; grid-column: 1; grid-area: heading; /* padding: var(--template-padding); */ padding: calc(var(--template-padding) / 2) var(--template-padding); display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; } /* .main_info { grid-area:info; } */ .main_content { grid-row: 2; grid-column: 1; grid-area: content; display: grid; grid-template-rows: minmax(60px, auto); grid-template-columns: 100%; overflow-y: scroll; } .main_content > *:nth-child(1) { grid-row: 1; grid-column: 1; } .main_item_container { grid-row: 2; grid-column: 1; grid-area: content; } @media screen and (max-width: 350px) { .main_item_container { text-align: center; } } .main_item { display: grid; place-items: center; grid-template-columns: 15% 30% auto 15%; padding: var(--template-padding); grid-template-areas: "departure station route platform" ". stations stations ."; } .main_item_stationInfomation{ display: flex; flex-wrap: wrap; grid-area: stations; text-align: left; margin-right: auto; flex-direction: column; border-radius: 12px; padding: 0.5rem; width: 100%; background: white; cursor: pointer; margin-top: 10px; } .main_item_stationInfomation_single-trip{ cursor: default; } .main_item_stationInfomation-closed{ display: none; } .main_item_stationInfomation_selector{ display: flex;flex-direction:row;gap: 10px;justify-content: space-between; } .main_item_stationInfomation_svg{ transition: all .3s ease;transform: rotate(90deg);height: 20px; } .main_item_stationInfomation_svg-open{ transform: rotate(270deg); } .TOCGW > .app > .singlefullitem > #panelNationalrail > div > .main_item_container > .main_item > .main_item_stationInfomation, .TOCGW > .app > .singlefullitem > #panelOsi > div > .main_item_container > .main_item > .main_item_stationInfomation{ border: solid 2px var(--gwr); } .TOCAW > .app > .singlefullitem > #panelNationalrail > div > .main_item_container > .main_item > .main_item_stationInfomation, .TOCAW > .app > .singlefullitem > #panelOsi > div > .main_item_container > .main_item > .main_item_stationInfomation{ border: solid 2px var(--tfw); } .TOCSW > .app > .singlefullitem > #panelNationalrail > div > .main_item_container > .main_item > .main_item_stationInfomation, .TOCSW > .app > .singlefullitem > #panelOsi > div > .main_item_container > .main_item > .main_item_stationInfomation{ border: solid 2px var(--sw); } .TOCNT > .app > .singlefullitem > #panelNationalrail > div > .main_item_container > .main_item > .main_item_stationInfomation, .TOCNT > .app > .singlefullitem > #panelOsi > div > .main_item_container > .main_item > .main_item_stationInfomation{ border: solid 2px var(--northern); } .TOCGC > .app > .singlefullitem > #panelNationalrail > div > .main_item_container > .main_item > .main_item_stationInfomation, .TOCGC > .app > .singlefullitem > #panelOsi > div > .main_item_container > .main_item > .main_item_stationInfomation{ border: solid 2px var(--gc); } .TOCRT > .app > .singlefullitem > #panelNationalrail > div > .main_item_container > .main_item > .main_item_stationInfomation, .TOCRT > .app > .singlefullitem > #panelOsi > div > .main_item_container > .main_item > .main_item_stationInfomation{ border: solid 2px var(--nr); } .TOCGR > .app > .singlefullitem > #panelNationalrail > div > .main_item_container > .main_item > .main_item_stationInfomation, .TOCGR > .app > .singlefullitem > #panelOsi > div > .main_item_container > .main_item > .main_item_stationInfomation{ border: solid 2px var(--lner); } .main_item:nth-of-type(even) { background-color: rgba(224, 224, 224, 0.6); } .main_item_departure { grid-row: 1; grid-column: 1; grid-area: departure; } .main_item_station { grid-row: 1; grid-column: 2; grid-area: station; } .main_item_station-click { cursor: pointer; } .main_item_line { grid-row: 1; grid-column: 3; grid-area: route; padding: 3px; } .main_item_platform { grid-row: 1; grid-column: 4; grid-area: platform; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; } .main_item_departure { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; } .main_item_departure p:nth-of-type(2) { justify-self: flex-end; } .main_item_departure p, .main_item_station p, .main_item_line p, .main_item_platform p { word-wrap: break-word; padding: var(--padding) 0; font-size: 1rem; } @media screen and (min-width: 350px) { .main_item_departure p, .main_item_station p, .main_item_line p, .main_item_platform p { font-size: 1.2rem; } } .main_item_platform p { display: flex; align-items: center; flex-direction: column; } @media screen and (min-width: 768px) { .main_item_platform p { flex-direction: row; } } .main_item_departure, .main_item_station, .main_item_line, .main_item_platform { width: 100%; align-self: center; position: relative; } @media only screen and (min-width: 1100px) { .main_item_line { width: 70%; } .main_item { text-align: center; } } .main_item_station p { padding: 0 var(--padding); } .main_item_line p { text-align: center; border-radius: 3px; } .main_item_departure s { color: red; } /* interchange icons */ #panelNationalrail .main_item { grid-template-columns: 15% 37% 32% 16%; } /* Interchange icon psuedo stuff on national rail panel #panelNationalrail .main_item .main_item_station { padding-left: 30px; position: relative; } #panelNationalrail .main_item .main_item_station::before { content: ""; height: 20px; position: absolute; left: -5px; width: 40px; background-image: url("data:image/svg+xml,%3Csvg id='icon_interchange' class='icon_svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke-width='4px' stroke='black' class='icon_group cls-1'%3E%3Ccircle cx='19.43' cy='29.41' r='7.64' /%3E%3Ccircle cx='77.27' cy='37.43' r='12.36' /%3E%3Ccircle cx='49.52' cy='70.34' r='9.89' /%3E%3Cline x1='23.23' y1='36.04' x2='41.76' y2='64.21' /%3E%3Cline x1='55.56' y1='62.51' x2='69.06' y2='46.67' /%3E%3Cline x1='64.91' y1='37.43' x2='26.84' y2='31.27' /%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } #panelNationalrail .main_item:first-of-type .main_item_station::before { background-image: none; } */ /* Could do with a separate stylesheet: inputs & buttons (stations search route)*/ #whooshStations { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; padding: 0 var(--template-padding); } .autocomplete { margin-bottom: var(--template-padding); width: 300px; position: relative; } .autocomplete input { height: 3rem; border-radius: 5px; font-size: var(--text-input); padding-left: 3rem; border: none; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); -webkit-appearance: none; width: 300px; } .autocomplete input:focus { border: 1px none solid; outline-color: transparent; outline-style: none; } #whooshStations button { -webkit-appearance: none; background-size: 400% 400%; border: none; border-radius: 5px; color: #000; background: none; cursor: pointer; font-size: 1.3rem; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 5rem; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 80%; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); } /*.buttonforlocation-ppTo,*/ /*.buttonforlocation-jfTo{*/ /* display: none;*/ /*}*/ .buttonforlocation, #whooshStations .buttonforlocation { width: 35px; height: 40px; z-index: 1; position: absolute; background: none; box-shadow: none; margin-right: 265px; border: none; cursor: pointer; padding: 0 8px; } #whooshStations form { margin-top: var(--template-padding); display: flex; justify-content: center; position: relative; } #whooshStations form .planner-form-location, .planner-form > .planner-form-location { height: 3em; margin: 0 calc(var(--template-padding) / 3); position: absolute; top: 3px; left: 3px; width: 20px; } #whooshStations form + button { background: var(--colorTheme); border-radius: 21px; color: #fff; max-width: 400px; font-weight: 700; } #whooshStations li { list-style-type: none; width: 80%; } #whooshStations li::before { display: none; } #whooshStations li button { list-style-type: none; border-radius: 5px; margin: 1rem 0; color: black; text-align: center; background: none; -webkit-animation: none; animation: none; width: 100%; } @media screen and (min-width: 1100px) { #whooshStations .buttonforlocation, .buttonforlocation { height: 50px; } } #getAlreadyUsingButtons { width: 80%; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } #getAlreadyUsingButtons ul { width: 100%; padding: 0; margin: 0; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } #getAlreadyUsingButtons ul li { max-width: 400px; display: flex; width: calc(100% + 30px); margin-left: 15px; } #getAlreadyUsingButtons ul button { width: 100%; margin: var(--template-padding) 0; max-width: 400px; } .autocomplete-items { width: 100%; padding: 0 var(--template-padding); max-height: 200px; overflow-y: scroll; margin-top: 0; padding-top: 6px; border-radius: 0 0 8px 8px; border-top: none; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); } .autocomplete-items div { font-size: 1.3rem; margin: 13px 0; } .autocomplete-items div strong { font-size: 1.3rem; } .autocomplete-items div:hover { cursor: pointer; } img[alt="map of loca area"] { margin: 0 auto; display: block; width: unset !important; height: unset !important; } /* rainbow panel styling mobile */ @media screen and (max-width: 500px) { #panelRainbows div .main_item_container .main_item { width: 100%; grid-template-columns: 25% 25% 25% 25%; grid-row-gap: 2rem; grid-template-areas: "departure departure station station" "route route platform platform"; } #panelRainbows div .main_item_container .main_item_line { padding: 0; } #panelRainbows div .main_item_container .main_item_line p { border-radius: 3px; text-align: center; } #panelRainbows div .main_item_container .main_item_departure p { border-radius: 3px; text-align: center; } #panelRainbows div .main_item_container .main_item_station { text-align: center; } #panelRainbows div .main_item_container .main_item:nth-of-type(even) { background: none; } #panelRainbows div .main_item_container .main_item > .main_item_departure { grid-row: 1; grid-column: 1; } #panelRainbows div .main_item_container .main_item > .main_item_station { grid-row: 1; grid-column: 3; } #panelRainbows div .main_item_container .main_item > .main_item_line { grid-row: 3; grid-column: 1; } #panelRainbows div .main_item_container .main_item > .main_item_platform { grid-row: 3; grid-column: 3; } } #panelTram div .main_item { grid-template-columns: 20% 30% 30% auto; } #panelBuses div .main_item { grid-template-columns: 25% 33% 20% auto; } #panelBuses div .main_item .main_item_departure multilingual { font-size: 1rem; } #panelBuses div .main_item .main_item_platform p { /* align-self:start; */ padding-left: 0.5rem; /*width: 100%;*/ text-align: center; } #panelBuses div .main_item .main_item_platform { text-align: center; max-width: 150px; align-items: center; word-break: break-word; } #panelBuses div .main_item .main_item_platform::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg id='icon_pin' class='icon_svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Ctitle%3EBus stop location on the map%3C/title%3E %3Cg class='icon_group cls-1'%3E%3Cpath fill='%23dd4b4b' d='M29.27,45.18,50,86.37,70.73,45.18S80.43,17.35,50,13.63C19.57,17.35,29.27,45.18,29.27,45.18Z' /%3E%3Ccircle fill='white' cx='50' cy='35.28' r='9.56' /%3E%3C/g%3E%3C/svg%3E"); position: absolute; background-repeat: no-repeat; background-position: center; bottom: 0; height: 100%; right: -12px; width: 30px; max-height: 20px; } #panelBuses div .main_item:first-of-type .main_item_platform::before { display: none; } @media only screen and (min-width: 1100px) { #panelBuses div .main_item .main_item_platform::before { right: -20px; max-height: 24px; } } #panelBuses div .main_item .main_item_no_platform::before { content: none; } #panelBuses div .main_item .main_item_platform p:empty { display: none; } #icon_scroll { position: fixed; bottom: calc( var(--footer-height) + var(--sub-menu) + var(--template-padding) ); right: var(--template-padding); z-index: 100; } .logo_northern { fill: var(--northern); } .logo_gwr { fill: var(--gwr); } .logo_lner { fill: var(--lner); } /* overrides.css */ .carbonbox { display: none; } .station::before { left: calc(4em + 20px); box-shadow: 0 2px 2px #484848; -webkit-box-shadow: 0 2px 2px #484848; } .hugeiconSub { filter: drop-shadow(0px 0px .5px #484848); -webkit-filter: drop-shadow(0px 0px .5px #484848); } .hideMePlease { display: none !important; visibility: hidden !important; /*background-color: indianred;*/ /*border-color: orange;*/ } #panelStations { width: 4px !important; height: 4px !important; } /* panel.css */ .panelSizer { width: 100%; background-color: white; height: var(--panel); overflow-y: scroll; transition: height 0.2s ease; } /* .TOCGW .app .singlefullitem .panelSizer { height:var(--panelLang); } */ .panel_sub_menu_active { height: var(--panel-sub-menu-active) !important; } section { grid-column: 2; grid-column-start: 2; grid-column-end: 6; } .singlefullitem { grid-area: main; z-index: 1; } #panelNationalrail { /*background-color: #ffcdd2;*/ height: var(--panel-sub-menu-active); } #panelRentals { /*background-color: #ffcdd2;*/ height: var(--panel-sub-menu-active); } #panelRiver { /*background-color: #ffcdd2;*/ height: var(--panel-sub-menu-active); } .TOCRT .app .singlefullitem #panelOffersmenu, .TOCRT .app .singlefullitem #panelFreenowoffer, .TOCRT .app .singlefullitem #panelOffers, .TOCRT .app .singlefullitem #panelWhsmithoffer, .TOCRT .app .singlefullitem #panelUppercrustoffer { height: var(--panel-sub-menu-active); } #panelOsi { height: var(--panel-sub-menu-active); /*background-color: #f8bbd0;*/ } #panelMap { /*background-color: #e1bee7;*/ height: var(--panel-sub-menu-active); } #panelWeather { height: var(--panel-sub-menu-active); } #panelTube { /*background-color: #d1c4e9;*/ height: var(--panel-sub-menu-active); } #panelBuses { /*background-color: #bbdefb;*/ height: var(--panel-sub-menu-active); } #panelRainbows { /*background-color: #b3e5fc;*/ height: var(--panel-sub-menu-active); } #panelTram { /*background-color: #b2ebf2*/ height: var(--panel-sub-menu-active); } #panelDlr { /*background-color: #b2dfdb;*/ height: var(--panel-sub-menu-active); } #panelSuper { position: relative; /* height: calc(100vh - var(--footer-height) - var(--sub-menu)); */ height: var(--panel-sub-menu-active); max-width: 1100px; } #panelSuper::-webkit-scrollbar { -webkit-appearance: none; width: 0; height: 0; display: none; } #panelEvents { height: var(--panel-sub-menu-active); } #panelStations { /*background-color: #f0f4c3;*/ height: var(--panel-sub-menu-active); display: none !important; visibility: hidden !important; } #panelPicker { height: var(--panel-sub-menu-active); } .app .singlefullitem #panelJourney { height: var(--panel-sub-menu-active); } /* .TOCGW .app .singlefullitem #panelJourney, .TOCZY .app .singlefullitem #panelJourney { height: var(--panel-sub-menu-activeLang); } */ #panelOnboard { /*background-color: #ffe0b2;*/ height: var(--panel-sub-menu-active); } #panelInfo { /*background-color: #d7ccc8;*/ height: var(--panel-sub-menu-active); } /* DAS-949 */ /* .TOCGW .app .singlefullitem #panelInfo, .TOCGW .app .singlefullitem #panelOnboard, .TOCGW .app .singlefullitem #panelPicker, .TOCGW .app .singlefullitem #panelStations, .TOCGW .app .singlefullitem #panelEvents, .TOCGW .app .singlefullitem #panelSuper, .TOCGW .app .singlefullitem #panelDlr, .TOCGW .app .singlefullitem #panelTram, .TOCGW .app .singlefullitem #panelRainbows, .TOCGW .app .singlefullitem #panelBuses, .TOCGW .app .singlefullitem #panelTube, .TOCGW .app .singlefullitem #panelWeather, .TOCGW .app .singlefullitem #panelMap, .TOCGW .app .singlefullitem #panelOsi, .TOCGW .app .singlefullitem #panelRentals, .TOCGW .app .singlefullitem #panelNationalrail, .TOCGW .app .singlefullitem #panelOffersmenu, .TOCGW .app .singlefullitem #panelFreenowoffer, .TOCGW .app .singlefullitem #panelOffers, .TOCGW .app .singlefullitem #panelWhsmithoffer, .TOCGW .app .singlefullitem #panelUppercrustoffer, .TOCGW .app .singlefullitem #panelJourney { height:var(--panel-sub-menu-activeLang); } */ .statusSeverityDescription { color: black !important; } .statusSeverityDescription { color: black !important; } .panelSizer2 { -webkit-animation-name: fadeForPanel; animation-name: fadeForPanel; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-direction: alternate; animation-direction: alternate; } #panelJourney { transition: all 0.3s ease; } @media only screen and (min-width: 1100px) { #panelOnboard { margin-bottom: var(--sub-menu); } #panelJourney { height: 100%; } #panelRentals { margin-bottom: var(--sub-menu); } #panelNationalrail { /*background-color: #ffcdd2;*/ margin-bottom: var(--sub-menu); } .TOCRT .app .singlefullitem #panelOffersmenu, .TOCRT .app .singlefullitem #panelFreenowoffer, .TOCRT .app .singlefullitem #panelOffers, .TOCRT .app .singlefullitem #panelWhsmithoffer, .TOCRT .app .singlefullitem #panelUppercrustoffer { margin-bottom: var(--sub-menu); } #panelOsi { margin-bottom: var(--sub-menu); /*background-color: #f8bbd0;*/ } #panelMap { /*background-color: #e1bee7;*/ margin-bottom: var(--sub-menu); } #panelWeather { margin-bottom: var(--sub-menu); } #panelTube { /*background-color: #d1c4e9;*/ margin-bottom: var(--sub-menu); } #panelBuses { /*background-color: #bbdefb;*/ margin-bottom: var(--sub-menu); } #panelRainbows { /*background-color: #b3e5fc;*/ margin-bottom: var(--sub-menu); } #panelTram { /*background-color: #b2ebf2*/ margin-bottom: var(--sub-menu); } #panelDlr { /*background-color: #b2dfdb;*/ margin-bottom: var(--sub-menu); } #panelStations { /*background-color: #f0f4c3;*/ margin-bottom: var(--sub-menu); } #panelPicker { margin-bottom: var(--sub-menu); } #panelOnboard { /*background-color: #ffe0b2;*/ margin-bottom: var(--sub-menu); } #panelInfo { margin-bottom: var(--sub-menu); } /* DAS-949 */ /* .TOCGW .app .singlefullitem #panelInfo, .TOCGW .app .singlefullitem #panelOnboard, .TOCGW .app .singlefullitem #panelPicker, .TOCGW .app .singlefullitem #panelStations, .TOCGW .app .singlefullitem #panelEvents, .TOCGW .app .singlefullitem #panelSuper, .TOCGW .app .singlefullitem #panelDlr, .TOCGW .app .singlefullitem #panelTram, .TOCGW .app .singlefullitem #panelRainbows, .TOCGW .app .singlefullitem #panelBuses, .TOCGW .app .singlefullitem #panelTube, .TOCGW .app .singlefullitem #panelWeather, .TOCGW .app .singlefullitem #panelMap, .TOCGW .app .singlefullitem #panelOsi, .TOCGW .app .singlefullitem #panelRentals, .TOCGW .app .singlefullitem #panelNationalrail, .TOCGW .app .singlefullitem #panelOffersmenu, .TOCGW .app .singlefullitem #panelFreenowoffer, .TOCGW .app .singlefullitem #panelOffers, .TOCGW .app .singlefullitem #panelWhsmithoffer, .TOCGW .app .singlefullitem #panelUppercrustoffer, .TOCGW .app .singlefullitem #panelJourney { margin-bottom: var(--sub-menu); height: calc(100% - var(--sub-menu)); } */ } @-webkit-keyframes fadeForPanel { 0% { opacity: 1; } 25% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } @keyframes fadeForPanel { 0% { opacity: 1; } 25% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } #panelForlineDiagram1 .linesymbol { left: 20px } /* remove this for now DAS-227 */ /* .panelForlineDiagram h1:first-of-type::before { content:""; position:absolute; height:100%; top:100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255,255,255,0))); background: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255,255,255,0)); background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255,255,255,0)); width: calc(100% - var(--template-padding)*2); } */ .main_header div:first-of-type h1::before { display: none; } /* privacy-policy.css */ .privacy_policy_container { grid-area: content; padding: var(--template-padding); } .privacy_policy_container p, .main_faq p { margin: var(--template-padding) 0 calc(var(--template-padding) * 2) 0; font-size: 1.4rem; font-weight: 300; line-height: 2; /* padding:0 var(--template-padding); */ } .privacy_policy_container p multilingual, .main_faq p multilingual { margin: var(--template-padding) 0 calc(var(--template-padding) * 2) 0; font-size: 1.4rem; font-weight: 300; line-height: 2; /* padding:0 var(--template-padding); */ } @media screen and (min-width: 768px) { .privacy_policy_container p, .main_faq p { line-height: 1.8; } .privacy_policy_container p multilingual, .main_faq p multilingual { line-height: 1.8; } } .privacy_policy_container h2 { text-align: left; } .privacy_policy_container h2, .main_faq h2, multilingual { text-align: left; font-size: 1.5rem; } /* rainbow.css */ .main_rainbow { grid-area: content; width: 100%; } /* .main_rainbow div p { text-align:center; margin: var(--template-padding) 0 0 var(--template-padding); } */ .main_rainbow div ul { margin: 0; padding: 0 var(--template-padding); list-style-type: none; } .main_rainbow div ul li { width: 100%; display: -webkit-box; display: flex; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center; border-radius: 3px; margin: var(--template-padding) 0; } .main_rainbow div ul li p { width: 50%; text-align: center; margin: 0; } .main_rainbow_heading { font-size: 1.5rem; margin: 0; padding: var(--template-padding); position: -webkit-sticky; position: sticky; top: -1px; -webkit-box-shadow: 0 2px 2px 0 #333; box-shadow: 0 2px 2px 0 #333; background-color: #FFF; } .main_rainbow_key { border-radius: 3px; padding: var(--template-padding); } /* safe.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ .safe_message, .onboard-food, .alterations { padding: 0 var(--template-padding); line-height: 1.5; } .safe_message p { font-size: 1.4rem; font-weight: 300; line-height: 2; } .safe_message p multilingual { font-size: 1.4rem; font-weight: 300; line-height: 2; } .nr_safe_seg, .alterations { margin-bottom: var(--template-padding); } .nr_safe_seg h2, .onboard-food h2, .alterations h2 { text-align: center; margin: 0; margin: var(--template-padding) 0; font-size: 1.5rem; } .nr_safe_seg h2 multilingual, .onboard-food h2 multilingual, .alterations h2 multilingual { text-align: center; margin: var(--template-padding) 0; font-size: 1.5rem; } .nr_safe_seg a, .alterations a { font-size: unset; /*text-decoration: underline;*/ color: #000; } .nr_safe_seg a multilingual, .alterations a multilingual { font-size: unset; text-decoration: underline; color: #000; } .nr_safe_seg ul li { font-size: 1.4rem; font-weight: 600; } .nr_safe_seg ul li multilingual { font-size: 1.4rem; font-weight: 600; } .nr_safe_seg ul { padding: var(--template-padding); margin: 0; } .safe_container { margin-bottom: var(--template-padding); } @media only screen and (min-width: 1100px) { .safe_message { text-align: left; line-height: 1.8; margin-left: calc(24% + var(--template-padding)); } .safe_message p, .safe_message a { line-height: 1.8; } .safe_message p multilingual, .safe_message a multilingual { line-height: 1.8; } .nr_safe_seg h2 { text-align: left; } .nr_safe_seg h2 multilingual { text-align: left; } .nr_safe_seg { margin-left: var(--templte-padding); } } .safe_item { text-align: center; width: 100%; display: grid; place-items: center; grid-template-rows: 3fr -webkit-min-content; grid-template-rows: 3fr min-content; } .safe_item a { font-size: 1.4rem; text-decoration: none; line-height: 2; } .safe_item a multilingual { font-size: 1.4rem; text-decoration: none; line-height: 2; } .safe_item p { margin: 1rem 0; /*text-align: left;*/ padding: 0 var(--template-padding); font-size: 1.4rem; font-weight: 300; line-height: 2; } .safe_item p multilingual { margin: 1rem 0; text-align: left; padding: 0 var(--template-padding); font-size: 1.4rem; font-weight: 300; line-height: 2; } .nr_safe_item p { text-align: left; } .nr_safe_item p multilingual { padding: 0; } .safe_container { display: -webkit-box; display: flex; width: 100%; -webkit-box-align: start; align-items: flex-start; justify-content: space-around; flex-wrap: wrap; } .safe_item svg { width: 40%; margin: 1rem 0; padding: 0 var(--template-padding); max-width: 100px; filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.4)); } .safe_video { width: 100%; height: 250px; } .safe_container_video { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; width: 100%; } @media screen and (min-width: 768px) { .safe_item p, .safe_item a { line-height: 1.8; } .safe_item p multilingual, .safe_item a multilingual { line-height: 1.8; } } @media only screen and (min-width: 1100px) { .safe_item { grid-template-rows:unset; grid-template-columns:25% auto; margin: var(--template-padding); } .safe_item svg { width: 60%; } .TOCRT .app .singlefullitem #panelSafetravel .main_journey .safe_item { place-items: start; grid-template-columns: 15% auto; } } .main_faq { line-height: 1.8; padding: var(--template-padding); } .main_faq p a multilingual { font-weight: 700; } /* sub_menu.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .journey_sub_nav, .station_sub_nav, .buses_sub_nav, .offers_sub_nav { position: absolute; border-top: 1px black solid; border-bottom: 1px black solid; width: 100%; height: var(--sub-menu); overflow-x: scroll; left: 0; list-style-type: none; display: none; white-space: nowrap; margin: 0; overflow-x: scroll; top: 0; padding: 0; background-color: #fff; z-index: 85; -webkit-box-shadow: 0 -5px 4px -5px #333; box-shadow: 0 -5px 4px -5px #333; } .journey_sub_menu, .buses_sub_menu, .station_sub_menu, .offers_sub_menu { width: 100%; height: 100%; overflow-x: scroll; list-style-type: none; white-space: nowrap; overflow-x: scroll; align-content: center; display: -webkit-inline-box; display: inline-flex; position: absolute; margin-left: 0; background-color: #fff; scrollbar-width: none; } .station_sub_nav_right, .buses_sub_nav_right, .offers_sub_nav_right { position: absolute; display: none; width: 45px; height: var(--sub-menu); right: 5px; top: 0; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='black' stroke-width='2px' d='M33.79,73.82,55.9,52.61a3.65,3.65,0,0,0,0-5.27L33.77,26.18a10.14,10.14,0,0,1,2.47-11.6l33.6,31a5.83,5.83,0,0,1,0,8.55L36.27,85.42S33.79,85.33,33.79,73.82Z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; z-index: 90; } .station_sub_nav_left, .buses_sub_nav_left, .offers_sub_nav_left { position: absolute; display: none; width: 45px; height: var(--sub-menu); left: 5px; top: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath stroke='black' fill='none' stroke-width='2px' d='M68.39,74.19,46.28,53a3.64,3.64,0,0,1,0-5.27L68.41,26.55a10.17,10.17,0,0,0-2.47-11.61l-33.61,31a5.83,5.83,0,0,0,0,8.55l33.6,31.32S68.39,85.69,68.39,74.19Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; z-index: 100; } .journey_sub_menu::-webkit-scrollbar, .station_sub_menu::-webkit-scrollbar, .buses_sub_menu::-webkit-scrollbar, .offers_sub_menu::-webkit-scrollbar { -webkit-appearance: none; width: 0; height: 0; display: none; } .journey_sub_menu li, .station_sub_menu li, .buses_sub_menu li, .offers_sub_menu li { height: 85%; display: -webkit-inline-box; display: inline-flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; min-width: 17%; width: unset; margin: 0 1px; padding: 0; border-radius: 5px; border: none; -webkit-animation: slideInUp 0.2s ease-in-out; animation: slideInUp 0.2s ease-in-out; overflow: hidden; } .journey_sub_menu li:first-of-type, .station_sub_menu li:first-of-type, .buses_sub_menu li:first-of-type, .offers_sub_menu li:first-of-type { margin-left: 5px; } .journey_sub_menu li:last-of-type, .station_sub_menu li:last-of-type, .buses_sub_menu li:last-of-type, .offers_sub_menu li:last-of-type { margin-right: unset; } .journey_sub_menu li a, .station_sub_menu li a, .buses_sub_menu li a, .offers_sub_menu li a { height: 100%; width: 100%; -webkit-box-pack: center; justify-content: center; } .journey_sub_menu svg, .station_sub_menu svg, .buses_sub_menu svg, .offers_sub_menu svg { height: 100%; } .journey_sub_menu_active, .station_sub_menu_active, .buses_sub_menu_active, .offers_sub_menu_active { top: calc(var(--sub-menu) * -1); display: block; } .sub_menu_icon_active { border: 1px black solid; } @media only screen and (min-width: 1100px) { .station_sub_nav_left, .offers_sub_nav_left { display: block; } .station_sub_nav_right, .offers_sub_nav_right { display: block; } .station_sub_nav_left:hover, .station_sub_nav_right:hover, .offers_sub_nav_right:hover { cursor: pointer; } } /* svgs.css */ .cls-1 { fill: none; stroke-width: 3px; } .icon_svg { overflow: visible; max-width: 250px; } #plan-events_banner { overflow: visible; width: 100%; max-width: 600px; } .plan-events_banner-path { fill: #fff; } .icon_capacity { width: 40px; margin-left: 5px; } .loadingmessage { border: none !important; } .cls-1, .solid-fill { stroke: #000; stroke-linecap: round; stroke-linejoin: round; } .solid-fill { fill: #fff !important; } .no-fill { fill: none; } /* #icon_journey, #icon_communications, #icon_map,#icon_dish { stroke:#fd0000 !important; } */ .cross { fill: none; stroke: red; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; } .tick { fill: none; stroke: #00ad00; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; } /* survey icon styling (header) */ .surveyDefault { stroke: #FFF !important; } #surveyDefault:hover { cursor: pointer; } .checkbox { fill: none; stroke-width: 2px; stroke: #FFF; stroke-linecap: round; stroke-linejoin: round; } .surveyDefault_circle_big { display: block; /* fill:var(--colorTheme); */ } .surveyDefault_circle_small { display: block; /* fill:var(--colorTheme); */ } .surveyDefault_circle_big { display: none; } .icon_survey_status { fill: red; stroke: none; display: none; } #surveyDefault { max-width: 60%; filter: drop-shadow(0 0 3px #000); -webkit-filter: drop-shadow(0 0 3px #000); } @media only screen and (min-width: 768px) { .surveyDefault_circle_small { display: block; } .surveyDefault_circle_big { display: none; } } /* tellus.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ .main_item_tell input { width: 100%; height: 3rem; margin-top: var(--template-padding); border-radius: 5px; font-size: var(--text-input); padding: 0 var(--template-padding); border: none; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); } .main_item_tell input:focus { border: 1px none solid; outline-color: transparent; outline-style: none; } /* .main_item_tell input:invalid { background:var(--colorTheme); opacity: 0.8; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } */ .main_item_tell button { -webkit-appearance: none; background-size: 400% 400%; border: none; border-radius: 5px; /* -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); */ color: #000; background: none; cursor: pointer; font-size: 1.3rem; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 5rem; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 80%; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); } .main_item_tell { width: 100%; padding: 0 var(--template-padding); /* padding: 0 var(--template-padding); margin-top: var(--template-padding); */ display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; position: relative; } /* .main_item_tell_form { height: 45vh; } */ #feedback { min-height: 150px; resize: none; border-radius: 5px; font-size: var(--text-input); padding: var(--template-padding); width: 100%; margin-top: var(--template-padding); border: none; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); } #feedback:focus { border: 1px none solid; outline-color: transparent; outline-style: none; } #feedback:invalid { background: rgba(255, 0, 0, 0.6); } #icon_send { height: 60px; } @keyframes flyPlane { to { transform: translate(155px, -155px); -webkit-transform: translate(155px, -155px); } } .send-animation { animation: flyPlane 1.3s ease; } .main_item_icons { padding: var(--template-padding) 0 0 0; width: 100%; display: grid; grid-template-areas: "subs send"; grid-template-columns: auto -webkit-min-content; grid-template-columns: auto min-content; /* justify-content:flex-end; */ } .main_item_icons svg { grid-row: 1; grid-column: 2; justify-self: flex-end; grid-area: send; /* height:55px; */ } .main_item_icons-sub { grid-row: 1; grid-column: 1; display: -webkit-box; display: flex; width: auto; flex-wrap: wrap; grid-area: subs; } .main_item_icons-sub svg { width: 50px; margin: calc(var(--template-padding) / 2); } .main_item_icons-sub svg:hover { cursor: pointer; } #feedback_counter { display: none; padding: var(--template-padding); padding-left: 5px; font-size: 1rem; height: 3rem; } .warning { color: red; } /* to prevent safari mobile users from zooming into input on focus */ /* input, select, textarea { font-size: 16px; } */ /* or : Disable page zooming, by adding maximum-scale=1.0 and/or user-scalable=no to the tag.*/ /* weather.css */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v7.0.29, * Autoprefixer: v9.7.6 * Browsers: last 4 version */ .main_weather { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; width: 100%; grid-area: content; } .main_weather svg:first-of-type { width: 30%; padding: var(--template-padding); } .main_weather p { padding: 0 var(--template-padding); text-align: center; } #main_weather_description { margin: 0 0 var(--template-padding) 0; font-size: 1.3rem; } .main_item_weather { display: grid; grid-template-areas:"type res"; grid-template-columns: 1fr 1fr; width: 100%; grid-template-rows: -webkit-min-content; grid-template-rows: min-content; place-items: center; height: -webkit-min-content; height: -moz-min-content; height: min-content; padding: var(--template-padding); text-align: center; } .main_item_weather p:first-of-type, .main_item_weather p:first-of-type multilingual { grid-column: 1; grid-row: 1; grid-area: type; } .main_item_weather p:last-of-type, .main_item_weather p:last-of-type multilingual { grid-row: 1; grid-column: 2; grid-area: res; } .main_item_weather p multilingual { font-size: 1.2rem; } .main_item_weather:nth-of-type(even) { background: rgba(224, 224, 224, 0.6); } .main_weather_controls { position: relative; width: 100%; padding: 0 var(--template-padding); display: none; /* height:1.3rem; */ } /* .main_weather_controls ul { list-style:none; margin:0; display:inline-flex; box-sizing:border-box; overflow-x:scroll; width:100%; scrollbar-width: none; padding:0; scroll-snap-type: x mandatory; border:1px black solid; } */ /* .main_weather_controls ul li { width:100%; scroll-snap-align: center; box-sizing: border-box; padding:0 45%; display:block; font-size:1.3rem; text-align:center; font-weight:600; } */ .main_weather_controls_list { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; width: 100%; overflow-x: scroll; padding: var(--template-padding) 0; scrollbar-width: none; } .main_weather_controls_list::-webkit-scrollbar { -webkit-appearance: none; width: 0; height: 0; display: none; } /* .main_weather_controls_list div { width:100%; padding: 0 var(--template-padding); margin:0 var(--template-padding); border:1px transparent solid; } */ .main_weather_controls_list_inner { width: 100%; padding: 0; margin: 0; } .main_weather_controls_list_inner li { list-style-type: none; width: 100%; display: inline-block; padding: 0 var(--template-padding); } .main_weather_controls ul li:last-child { padding-right: 25%; } .main_weather_controls ul { scrollbar-width: none; } .main_weather_controls ul::-webkit-scrollbar { -webkit-appearance: none; width: 0; height: 0; display: none; } #main_weather_controls_arrow { width: 15%; height: 100%; position: absolute; right: 0; top: 0; } .time_active { border: 1px black solid !important; border-radius: 3px; } /* .main_weather_controls_list { padding: var(--template-padding) 0; } */ .main_weather_controls_list div { -webkit-appearance: none; background-size: 400% 400%; border: none; /* padding: calc(var(--template-padding) / 2) var(--template-padding); */ border-radius: 3px; /* -webkit-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); */ color: #000; background: none; width: 30%; cursor: pointer; margin: 0 var(--template-padding); text-align: center; /* font-size: 1.3rem; */ font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } .main_weather_controls_list div:first-child { margin-left: 0; } @media only screen and (min-width: 1100px) { .main_weather { justify-content: center; flex-direction: row; } .main_weather svg:first-of-type { width: 20%; } #main_weather_description { text-align: left; width: 50%; } } /*Feedback Icon brand */ .TOCSW .app footer #moreFooter ul #footerButtonfeedback #aforfooterButtonfeedback svg #icon_feedback_trial_2 path { fill: var(--sw); } .TOCGC .app footer #moreFooter ul #footerButtonfeedback #aforfooterButtonfeedback svg .icon_group path:last-child { fill: var(--gc); } .TOCES .app footer #moreFooter ul #footerButtonfeedback #aforfooterButtonfeedback svg .icon_group path:last-child { fill: var(--es); } .TOCRT .app footer #moreFooter ul #footerButtonfeedback #aforfooterButtonfeedback svg .icon_group path:last-child { fill: var(--nr); } /*gc */ .TOCGC { background-image: none; /*!*background-color: var(--gc) !important;*!*/ } .TOCGC .app .singlefullitem #panelPicker #whooshStations form + button { background: var(--gc) !important; color: #000; /* background:var(--gc-secondary) !important; */ } .TOCGC .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCGC .app header .header_seat .icon_svg .surveyDefault_circle_big { /* fill:var(--gc) !important; */ fill: var(--gc) !important; } .TOCSW .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCSW .app header .header_seat .icon_svg .surveyDefault_circle_big { /* fill:var(--gc) !important; */ fill: var(--sw) !important; } .TOCES .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCES .app header .header_seat .icon_svg .surveyDefault_circle_big { /* fill:var(--gc) !important; */ fill: var(--es) !important; } .TOCGC .app header .header_weather .icon_svg .geolocation path:nth-of-type(3) { fill: var(--gc) !important; } /*es */ .TOCES { background-image: none; /*!*background-color: var(--gc) !important;*!*/ } .TOCES .app .singlefullitem #panelPicker #whooshStations form + button { background: var(--es) !important; } .TOCES .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCES .app header .header_seat .icon_svg .surveyDefault_circle_big { fill: var(--es) !important; } .TOCES .app header .header_weather .icon_svg .geolocation path:nth-of-type(3) { fill: var(--es) !important; } /*northern */ .TOCNT { background-image: none; /*background-color: var(--northern) !important;*/ } .TOCNT .app .singlefullitem #panelPicker #whooshStations form + button { background: var(--northern) !important; } .TOCNT .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCNT .app header .header_seat .icon_svg .surveyDefault_circle_big { fill: var(--northern) !important; } .TOCNT .app header .header_weather .icon_svg .geolocation path:nth-of-type(3) { fill: var(--northern) !important; } /* NETWORK RAIL */ .TOCRT { background-image: none; /*background-color: var(--nr) !important;*/ } .TOCRT .app .singlefullitem #panelPicker #whooshStations form + button { background: var(--nr) !important; } .TOCRT .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCRT .app header .header_seat .icon_svg .surveyDefault_circle_big { fill: var(--nr) !important; } .TOCRT .app header .header_weather .icon_svg .geolocation path:nth-of-type(3) { fill: var(--nr) !important; } /* Custom */ /*northern */ .TOCSS { background-image: none; /*background-color: var(--northern) !important;*/ } .TOCSS .app .singlefullitem #panelPicker #whooshStations form + button { background: var(--northern) !important; } .TOCSS .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCSS .app header .header_seat .icon_svg .surveyDefault_circle_big { fill: var(--northern) !important; } .TOCSS .app header .header_weather .icon_svg .geolocation path:nth-of-type(3) { fill: var(--northern) !important; } /*lner */ .TOCGR { background-image: none; /*background-color: var(--lner) !important;*/ } .TOCGR .app .singlefullitem #panelPicker #whooshStations form + button { background: var(--lner) !important; } .TOCAW .app .singlefullitem #panelPicker #whooshStations form + button { background: var(--tfw) !important; } .TOCGR .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCGR .app header .header_seat .icon_svg .surveyDefault_circle_big { fill: var(--lner) !important; } .TOCGR .app header .header_weather .icon_svg .geolocation path:nth-of-type(3) { fill: var(--lner) !important; } /* hull trains */ .TOCHT { background-image: none; /*background-color: var(--ht) !important;*/ } .TOCHT .app .singlefullitem #panelPicker #whooshStations form + button { background: var(--ht) !important; } .TOCHT .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCHT .app header .header_seat .icon_svg .surveyDefault_circle_big { fill: var(--ht) !important; } .TOCHT .app header .header_weather .icon_svg .geolocation path:nth-of-type(3) { fill: var(--ht) !important; } /* rti2-demo */ .TOCRT { background-image: none; /*background-color: var(--northern) !important;*/ } .TOCRT .app .singlefullitem #panelPicker #whooshStations form + button { background: var(--northern) !important; } .TOCRT .app header .header_seat .icon_svg .surveyDefault_circle_small, .TOCRT .app header .header_seat .icon_svg .surveyDefault_circle_big { fill: var(--northern) !important; } .TOCRT .app header .header_weather .icon_svg .geolocation path:nth-of-type(3) { fill: var(--northern) !important; } /* survey header icon */ #surveyDefault .foodDefault { display: none; } .TOCGC .app header .header_seat #surveyDefault .surveyDefault { display: none; } .TOCGC .app header .header_seat #surveyDefault .foodDefault { display: block; stroke: var(--gc-secondary); } @media screen and (min-width: 768px) { .TOCGC .app header .header_seat #surveyDefault .foodDefault path:nth-of-type(1) { fill: var(--gc); } } .TOCGC .app header .header_seat #surveyDefault .icon_survey_status { display: none !important; } /* GPS toggle icon */ .geolocation:hover { cursor: pointer; } .geolocationAlertBox { z-index: 100; width: 80vw; position: absolute; top: 35vh; height: 30vh; display: flex; flex-direction: column; justify-content: space-around; padding: var(--template-padding); text-align: center; align-items: center; /* border:1px black solid; */ background: white; border-radius: 5px; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } @media screen and (min-width: 1100px) { .geolocationAlertBox { width: 60vw; } } .geolocationAlertBox button { -webkit-appearance: none; background-size: 400% 400%; border: none; padding: var(--template-padding) calc(var(--template-padding) / 2); border-radius: 3px; /* -webkit-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);*/ color: #000; background: none; width: 30%; cursor: pointer; font-size: 1.3rem; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } #geolocationStrikeThrough { opacity: 1; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } /* #panelOnboard { position: absolute; top: 0; max-width: 1100px; height: calc(100vh - var(--footer-height)); }*/ /*#panelOnboard iframe {*/ /*border: none;*/ /*max-width: 1100px;*/ /*height: 100%;*/ /*}*/ @media only screen and (min-width: 1100px) { iframe { height: calc(100% - var(--footer-height) + 0.5rem); } } .onboardMenu { position: fixed; top: 0; } @media screen and (min-width: 1100px) { .onboardMenu { max-width: 959px; } } .autocomplete label { display: none; } /* panelBuses styling */ #panelBuses .main_item_container .main_item_station, #panelBuses .main_item_container .main_item_platform { font-weight: 600; } #panelBuses .main_item_container .main_item_departure, #panelBuses .main_item_container .main_item_station, #panelBuses .main_item_container .main_item_line, #panelBuses .main_item_container .main_item_platform { word-wrap: break-word; padding: 0 var(--padding); font-size: 1.2rem; } #panelBuses .main_item_container .main_item_departure { font-size: 1rem; display: block; } #panelBuses .main_item_container .main_item_departure p, #panelBuses .main_item_container .main_item_station p, #panelBuses .main_item_container .main_item_line p, #panelBuses .main_item_container .main_item_platform p { padding: 0; } #panelRiver .main_item_departure { display: inline; font-size: 12px; } #panelRiver multilingual { font-size: 12px; } /* activate */ .animation_activate_1 { animation: bumpDown 0.3s ease; -webkit-animation: bumpDown 0.3s ease; transform-origin: 50%; } .animation_activate_2 { animation: bumpUpBig 0.2s ease; -webkit-animation: bumpUpBig 0.2s ease; transform-origin: 50%; } .animation_activate_3 { animation: bumpUpBig 0.3s ease; -webkit-animation: bumpUpBig 0.3s ease; transform-origin: 50%; } #panelBuses button { background: none; border: none; } #panelBuses button:hover { cursor: pointer; } /* offers css */ .offers_landing { display: flex; flex-direction: column; align-items: center; padding: var(--template-padding); line-height: 3rem; } .offers_landing:nth-of-type(odd) { background: #E5E5E5; } .offers_landing > a { /*pointer-events: none;*/ color: black; } .offers_landing:hover { cursor: pointer; } .offers_landing_img { max-width: 1100px; display: flex; margin: 13px auto; justify-content: center; } .offers_landing_img > svg { width: 60%; height: auto; max-width: 300px; max-height: 200px; } .offers_landing h3, .offers_landing a { font-weight: 400; line-height: 2; text-align: center; } .offers_landing .offers_landing_info h3 { font-weight: bold; } .offers_title { text-align: center; display: none; } .offers_container { grid-area: content; padding: var(--template-padding); margin-bottom: 50px; } .offers_img_icon { /*border: 1px black solid;*/ border-radius: 10px; max-width: 70px; grid-area: offIcon; } .offers_container_svg { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-area: offSVG; align-items: center; grid-template-areas: "offIcon offLogo offLogo" "offVoucher offVoucher offVoucher"; } @media screen and (min-width: 768px) { .offers_container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; grid-template-areas: "offSVG offTitle offTitle" "offSVG offTerms offTerms" ". button button" "conditions conditions conditions"; } .offers_container_svg { grid-area: offSVG; } .offers_title { display: block; grid-column-start: 2; place-self: start; } .offers_img { grid-area: offImg; margin-left: unset; place-self: center; grid-row-start: 2; grid-row-end: 3; } .offers_voucherInfo { grid-area: offTerms; margin: unset; } .offers_voucherInfo_title { place-self: start; } .offers_voucherInfo_terms { height: auto; } .offers_terms-gradient { display: none; } .offers_voucherInfo_validTo { place-self: start; } .offers_voucherInfo_code { place-self: start } .offers_voucherInfo_offer { grid-column-start: unset; grid-column-end: unset; place-self: unset; margin-top: var(--template-padding); } .offers_voucherInfo_offer a { font-size: 1.4rem; text-decoration: none; text-align: center; } } .offers_container p { margin: var(--template-padding) 0; font-size: 1.4rem; line-height: 2; } .offers_img { max-width: 1100px; grid-area: offLogo; } .offers_img svg { width: 60%; margin-left: 5%; height: auto; max-height: 200px; } .offers_voucherInfo { margin: 5%; grid-area: offVoucher; } .offers_voucherInfo_offer { margin-top: var(--template-padding); } .offers_voucherInfo_offer a { font-size: 1.4rem; text-decoration: none; text-align: center; color: #000; font-weight: 600; } .offers_voucherInfo_code { font-size: 1.4rem; font-weight: 700; margin: calc(var(--template-padding) / 2) 0; } .offers_voucherInfo_title { font-size: 1.4rem; font-weight: 700; place-self: center; } .offers_voucherInfo_validDates { border-radius: 5px; margin: 10px auto auto auto; padding: 2px 4px; text-align: center; } @media screen and (max-width: 768px) { .offers_voucherInfo_validDates > a { text-align: center; } } .offer_conditions { grid-area: conditions; } .offers_voucherInfo_validTo { font-size: 1.4rem; font-weight: bold; margin: calc(var(--template-padding) / 2) 0; } .offers_voucherInfo_terms { margin-top: var(--template-padding); font-size: 1.4rem; line-height: 2; position: relative; height: 100px; overflow: hidden; transition: all 0.3s ease; font-weight: 300; grid-area: offTerms; } /* freenow css */ .freenow_title { text-align: center; display: none; } .freenow_container { grid-area: content; padding: var(--template-padding); } @media screen and (min-width: 768px) { .freenow_container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: min-content auto auto; grid-template-areas: "fnTitle fnTitle fnTitle" "fnImg fnTerms fnTerms" "fnImg fnTerms fnTerms"; } .freenow_title { display: block; grid-column-start: 2; place-self: start; } .freenow_img { grid-area: fnImg; margin-left: unset !important; place-self: center; grid-row-start: 2; grid-row-end: 3; } .freenow_voucherInfo { grid-area: fnTerms; margin: unset !important; } .freenow_voucherInfo_title { place-self: start !important; } .freenow_voucherInfo_terms { height: auto !important; } .freenow_terms-gradient { display: none; } .freenow_voucherInfo_validFrom { place-self: start !important; } .freenow_voucherInfo_validTo { place-self: start !important; } .freenow_voucherInfo_code { place-self: start !important; } .freenow_voucherInfo_offer { grid-column-start: unset !important; grid-column-end: unset !important; place-self: unset !important; margin-top: var(--template-padding); } .freenow_voucherInfo_offer a { font-size: 1.4rem; text-decoration: none; text-align: center; } } .freenow_container p { margin: var(--template-padding) 0; font-size: 1.4rem; line-height: 2; } .freenow_img { /* width: 40%; */ max-width: 1100px; display: flex; /* margin-left: 30%; */ } .freenow_img svg { width: 60%; margin-left: 20%; } .freenow_terms-gradient { position: absolute; bottom: 0; width: 100%; left: 0; height: 75px; transition: all 0.3s ease; opacity: 1; visibility: visible; background: linear-gradient(rgba(250, 250, 250, 0.3), rgba(250, 250, 250, 1)); /* linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */ } .hide-gradient { opacity: 0 !important; visibility: hidden; } @media only screen and (min-width: 768px) { .freenow_img { height: 40vh; object-position: center; object-fit: cover; } } .freenow_voucherInfo { display: grid; margin-top: var(--template-padding); grid-template-columns: auto auto; grid-template-rows: min-content; } .freenow_voucherInfo_offer { grid-column-start: 1; grid-column-end: 3; place-self: center; margin-top: var(--template-padding); } .freenow_voucherInfo_offer a { font-size: 1.4rem; text-decoration: none; text-align: center; color: #000; font-weight: 600; } .freenow_voucherInfo_code { font-size: 1.4rem; font-weight: 700; place-self: center; grid-column-end: 3; grid-column-start: 1; margin: calc(var(--template-padding) / 2) 0; } .freenow_voucherInfo_title { grid-column-end: 3; grid-column-start: 1; font-size: 1.4rem; font-weight: 700; place-self: center; } .freenow_voucherInfo_validFrom { place-self: start; } .freenow_voucherInfo_validTo { place-self: end; } .freenow_voucherInfo_validFrom, .freenow_voucherInfo_validTo { margin-top: var(--template-padding); font-size: 1.2rem; } .freenow_voucherInfo_terms { grid-column-start: 1; grid-column-end: 3; margin: var(--template-padding) 0; font-size: 1.4rem; line-height: 2; position: relative; height: 100px; overflow: hidden; transition: all 0.3s ease; font-weight: 300; } /* uppercrust css */ .uppercrust_title { text-align: center; display: none; } .uppercrust_container { grid-area: content; padding: var(--template-padding); } @media screen and (min-width: 768px) { .uppercrust_container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: min-content auto auto; grid-template-areas: "fnTitle fnTitle fnTitle" "fnImg fnTerms fnTerms" "fnImg fnTerms fnTerms"; } .uppercrust_title { display: block; grid-column-start: 2; place-self: start; } .uppercrust_img { grid-area: fnImg; margin-left: unset !important; place-self: center; grid-row-start: 2; grid-row-end: 3; } .uppercrust_voucherInfo { grid-area: fnTerms; margin: unset !important; } .uppercrust_voucherInfo_title { place-self: start !important; } .uppercrust_voucherInfo_terms { height: auto !important; } .uppercrust_terms-gradient { display: none; } .uppercrust_voucherInfo_validFrom { place-self: start !important; } .uppercrust_voucherInfo_validTo { place-self: start !important; } .uppercrust_voucherInfo_code { place-self: start !important; } .uppercrust_voucherInfo_offer { grid-column-start: unset !important; grid-column-end: unset !important; place-self: unset !important; margin-top: var(--template-padding); } .uppercrust_voucherInfo_offer a { font-size: 1.4rem; text-decoration: none; text-align: center; } } .uppercrust_container p { margin: var(--template-padding) 0; font-size: 1.4rem; line-height: 2; } .uppercrust_img { /* width: 40%; */ max-width: 1100px; display: flex; /* margin-left: 30%; */ } .uppercrust_img svg { width: 60%; margin: 10% 20%; height: auto; } .uppercrust_terms-gradient { position: absolute; bottom: 0; width: 100%; left: 0; height: 75px; transition: all 0.3s ease; opacity: 1; visibility: visible; background: linear-gradient(rgba(250, 250, 250, 0.3), rgba(250, 250, 250, 1)); /* linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */ } .hide-gradient { opacity: 0 !important; visibility: hidden; } @media only screen and (min-width: 768px) { .uppercrust_img { height: 40vh; object-position: center; object-fit: cover; } } .uppercrust_voucherInfo { display: flex; margin-top: var(--template-padding); flex-direction: column; text-align: justify; } .uppercrust_voucherInfo_hr { width: 156px; border: none; height: 1px; background-color: black; } .uppercrust_voucherInfo_offer { grid-column-start: 1; grid-column-end: 3; place-self: center; margin-top: var(--template-padding); } .uppercrust_voucherInfo_offer a { font-size: 1.4rem; text-decoration: none; text-align: center; color: #000; font-weight: 600; } .uppercrust_voucherInfo_code { font-size: 1.4rem; font-weight: 700; place-self: center; grid-column-end: 3; grid-column-start: 1; margin: calc(var(--template-padding) / 2) 0; } .uppercrust_voucherInfo_title { grid-column-end: 3; grid-column-start: 1; font-size: 1.4rem; font-weight: 700; place-self: center; } .uppercrust_voucherInfo_validDates { display: flex; flex-direction: column; align-items: center; align-content: center; flex-wrap: wrap; border-radius: 5px; margin: 10px auto auto auto; padding: 2px 4px; } .uppercrust_voucherInfo_validFrom { place-self: start; } .uppercrust_voucherInfo_validTo { place-self: end; } .uppercrust_voucherInfo_validFrom, .uppercrust_voucherInfo_validTo { margin: var(--template-padding); font-size: 1.2rem; } .uppercrust_voucherInfo_terms { grid-column-start: 1; grid-column-end: 3; margin: var(--template-padding) 0; font-size: 1.4rem; line-height: 2; position: relative; height: 100px; overflow: hidden; transition: all 0.3s ease; font-weight: 300; } .terms-active { height: unset; overflow: visible; } #email_fieldset, #prod_fieldset { width: 100%; border: none; padding: 10px 0; margin: 0 auto; max-width: 550px; transition: all 0.3s ease; grid-area: message; animation: fadeIn 0.3s linear; } #email_form, #prod_form { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; width: 100%; grid-row-gap: 8px; padding-left: 8px; } #termsLabel, #sausageLabel { color: #000; grid-column-end: 6; grid-column-start: 2; font-size: 1.2rem; width: 100%; padding-left: 5px; align-self: center; } label#termsLabel a, label#sausageLabel a { color: black; font-size: 1.2rem; } #privacyLabel, #drinkLabel { grid-row-start: 2; color: #000; grid-column-start: 2; grid-column-end: 6; font-size: 1.2rem; padding-left: 8px; width: 100%; align-self: center; } label#privacyLabel a, label#drinkLabel a { color: black; font-size: 1.2rem; } #termsSwitch, #sausageSwitch { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; justify-self: start; } #privacySwitch, #drinkSwitch { grid-column-start: 1; justify-self: start; grid-column-end: 2; grid-row-start: 2; } #privacyPolicyCheckbox { grid-row-start: 2; } #email_input, #prod_input { width: 100%; border: none; border-top: 1px black solid; border-bottom: 1px black solid; border-left: 1px black solid; border-radius: 25px 0 0 25px; height: 3.4rem; padding-left: 10px; font-size: 1.3rem; grid-column-start: 1; grid-column-end: 4; } #email_input:focus, #prod_input:focus { /* border-radius:25px 0 0 25px; */ outline: 0; } #email_input::placeholder, #prod_input::placeholder { padding-left: 10px; } #email_submit, #prod_submit { width: 100%; border: none; background: none; border-top: 1px black solid; border-right: 1px black solid; border-bottom: 1px black solid; border-radius: 0 25px 25px 0; border-left: 1px black solid; font-size: 1.1rem; font-weight: 700; border-left: 1px black solid; grid-column-start: 4; grid-column-end: 6; background-color: red; transition: all 0.2s ease; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; width: 64px; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; /* border: 1px black solid; */ max-width: 95%; } .slider:before { position: absolute; content: ""; height: calc(100% - 8px); width: 25px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(95%); transform: translateX(95%); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .delay-back { display: none; place-self: center; width: 100%; } .delay-back-active { display: block; grid-area: logo; } .delay-active-email, .delay-active-prod { display: none; grid-column-start: 1; grid-column-end: 3; padding: 0 !important; align-self: center; font-size: 1.3rem; font-weight: 700; color: red; grid-area: message; } .delay-active-email-show, .delay-active-prod-show { display: block; } .delay-active-message-hide { display: none !important; } /* events css styling taken from northern overrides */ .events_container { grid-area: content; padding: var(--template-padding); } .events_container_placeholder { grid-area: content; padding: var(--template-padding); height: calc(100% - var(--sub-menu)); display: flex; flex-direction: column; align-items: center; justify-content: center; } .events-placeholder-circle { height: 200px; width: 200px; border-radius: 50%; border: 1px black solid; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; background-color: var(--colorTheme); -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } @media screen and (min-width: 768px) { .events-placeholder-circle { height: 400px; width: 400px; } } .events-placeholder-circle p { font-size: 1.3rem; text-align: center; padding: var(--template-padding); font-weight: 700; color: #FFF; } .events-placeholder-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; } .event { display: grid; grid-template-areas: "image image image image image" "name name name name station" "venue venue venue venue venue" "address address address address address" "date date date date date" "website website website website website" "tags tags tags tags tags"; grid-template-columns: minmax(22.27%, 1.5fr) 1fr 1fr 1fr 1fr; /* grid-auto-rows: min-content; */ grid-auto-rows: min-content; grid-column-gap: 10px; row-gap: 8px; /* height: auto; */ /* min-height: 100px; */ /* max-height: 150px; */ margin-bottom: var(--template-padding); background-color: var(--northern); color: #fff; padding: 0 var(--template-padding); position: relative; border-radius: 5px; filter: drop-shadow(0px 3px 3px #000); -webkit-filter: drop-shadow(0px 3px 3px #000); } .event_img { grid-area: image; /* height: 100%; */ border-radius: 5px 5px 0 0; width: calc(100% + calc(var(--template-padding) * 2)); /* height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; */ max-height: 200px; margin-left: calc(var(--template-padding) * -1); object-fit: cover; object-position: center; /* contain: size; */ } .event_img_big { display: none; grid-area: image; width: 100%; border-radius: 5px 0 0 5px; object-fit: cover; object-position: center; } /* @media screen and (min-width:768px) { .event_img { display:none; } .event_img_big { display:block; } } */ .event_img_default { width: 100%; border-radius: 5px 5px 0 0; } .event p { margin: 0; } .event h1, .event h2 { margin: 0; padding: 0; } .event_heading { grid-area: name; padding-top: 8px !important; /* color: #ff5722; */ } .event_venue { grid-area: venue; /* color: #ff5722; */ padding: 0; } .event_station { grid-area: station; text-align: right; padding-top: 10px; /* width: 100%; */ } .event_tags { grid-area: tags; justify-self: start; padding-bottom: 10px; } .event_date span, .event_station span { font-size: 1.4rem; /* overflow: visible; */ } .event_date { align-self: flex-end; grid-area: date; /* padding-bottom: 10px; */ font-size: 1.4rem; } .event_address { grid-area: address; font-size: 1.4rem; font-weight: 700; } .event_website { grid-area: website; width: 100%; font-size: 1.2rem; text-decoration: none; color: #fff; } .event_name, .event_town, .event_content, .event_email { display: none; } /* @media only screen and (min-width: 321px) { .event_tags { white-space: nowrap; } } */ .event_alternate { display: grid; grid-template-areas: "image name name name station" "image venue venue venue venue" "image date date tags tags"; grid-template-columns: minmax(22.27%, 1.5fr) 1fr 1fr 1fr 1fr; /* grid-auto-rows: min-content; */ /* grid-template-rows: min-content min-content min-content; */ grid-column-gap: 10px; height: auto; /* max-height: 150px; */ /* margin-bottom: var(--template-padding); */ /* background-color:var(--northern); */ color: #000; padding-right: var(--template-padding); position: relative; margin-bottom: calc(var(--template-padding) * 2); } .event_alternate:before { content: ""; position: absolute; /* width: calc(85% - 30px - var(--template-padding)); */ /* width:calc(100% - calc(var(--template-padding) * 2) - 40px); */ width: calc(72.7272727273% + 1px + var(--template-padding)); right: 0; height: 110%; top: -5%; border: 3px var(--northern) solid; /* border-left-width: 5px; */ } .event_alternate img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .event_alternate_img { grid-area: image; width: 100%; height: 100%; contain: size; } .event_alternate h1, .event_alternate h2 { margin: 0; padding: 0; } .event_alternate_name { grid-area: name; } .event_alternate_venue { grid-area: venue; } .event_alternate_station { grid-area: station; text-align: right; /* width: 100%; */ } .event_alternate_tags { grid-area: tags; align-self: flex-end; justify-self: flex-end; text-align: right; } .event_alternate_date span, .event_alternate_station span { font-size: 1.2rem; /* overflow: visible; */ } .event_alternate_date { align-self: flex-end; grid-area: date; } @media only screen and (min-width: 768px) { .event { display: grid; grid-template-areas: "image name name venue venue" "image address address address address" "image date date tags tags" "image website website website website"; grid-template-columns: 150px 1fr 1fr 1fr 1fr; /* grid-auto-rows: min-content; */ grid-template-rows: 1fr; grid-column-gap: 10px; height: auto; /* min-height: 150px; */ /* max-height: 150px; */ margin-bottom: var(--template-padding); background-color: var(--northern); color: #fff; padding: unset; padding-right: var(--template-padding); position: relative; filter: drop-shadow(0px 3px 5px #000); -webkit-filter: drop-shadow(0px 3px 5px #000); } .event_venue { padding-top: 8px !important; justify-self: end; } .event_tags { font-size: 1.2rem; justify-self: end; padding-bottom: 0; } .event_img { width: 100%; margin-left: unset; border-radius: 5px 0 0 5px; height: 100%; } .event_alternate { grid-template-columns: 150px 1fr 1fr 1fr 1fr; min-height: 100px; margin-bottom: calc(var(--template-padding) * 3); } .event_alternate:before { width: calc(100% - 150px - var(--template-padding) + 10px); height: 120%; top: -10%; } } #food-menu { visibility: hidden; opacity: 0; transition: all 1.2s ease-in-out; } .food-menu-visible { opacity: 1 !important; visibility: visible !important; } .closeButtonStation { stroke: #fff; stroke-width: 13px; width: 15px; height: 15px; align-self: center; right: -10px !important; overflow: visible; filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.5)); -webkit-filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.5)); } .TOCGC .app .singlefullitem .closeButtonStation circle { fill: var(--gc); } .TOCNT .app .singlefullitem .closeButtonStation circle { fill: var(--northern); } .TOCGW .app .singlefullitem .closeButtonStation circle { fill: var(--gwr); } .TOCAW .app .singlefullitem .closeButtonStation circle { fill: var(--tfw); } .TOCSW .app .singlefullitem .closeButtonStation circle { fill: var(--sw); } .TOCRT .app .singlefullitem .closeButtonStation circle { fill: var(--nr); } .TOCGR .app .singlefullitem .closeButtonStation circle { fill: var(--lner); } .TOCES .app .singlefullitem .closeButtonStation circle { fill: var(--es); } .greggs_offer { position: absolute; /* height: 100px; */ bottom: -61px; /* border-top: none; */ /* height: 100px; */ /* bottom: 0; */ height: auto; background: #fff; border: 1px black solid; width: 100%; margin-left: calc(var(--template-padding) * -1); /* border-radius: 0 0 5px 5px; */ padding: var(--template-padding); display: grid; grid-template-columns: 2fr 5fr 1fr; grid-auto-rows: min-content; border-top: none; border-right: none; place-items: center; border-left: none; } .greggs_offer svg { width: 100%; height: 100%; } .greggs_offer div:first-of-type { padding: 0 var(--template-padding); } .greggs_offer_close { stroke: black; stroke-width: 13px; height: 20px; } .icon_activate-button { background: none; border: none; padding: 0; } /* #icon_activate { height: 35px; } */ .icon_activate { height: 35px; } .bus-table-controller-text { font-size: 1.3rem; font-weight: 600; line-height: 1.8; padding-left: 8px; } .bus-table-controller-container { padding: var(--template-padding); display: flex; align-items: center; justify-content: flex-end; flex-direction: row-reverse; } #icon_activate_sched_1 { opacity: 0; } .animation_activate_sched_1 { opacity: 1; } /* landscape mode mobile */ @media screen and (min-aspect-ratio: 13/9) and (max-width: 896px) { .header-cube-header { display: none; } div.journey-v2-heading { position: relative; } footer { display: none; } .panelSizer { height: 100% !important; } .app { overflow-y: scroll; grid-template-rows:min-content auto; } } /* victoria supermap */ .vic-level-menu, .manchester-level-menu, .manchester-upstairs-level-menu, .euston-level-menu, .euston-mezzanine-level-menu, .liverpool-level-menu, .new-street-level-menu { position: absolute; /* border: 1px black solid; */ top: calc(50% - 120px); height: 280px; width: 32px; right: 0; display: flex; background: #FFF; box-shadow: -1px 1px 3px grey; flex-direction: column; justify-content: space-around; z-index: 1; align-items: center; } .vic-level-inactive, .manchester-level-inactive, .manchester-upstairs-level-inactive .euston-level-inactive, .euston-mezzanine-level-inactive, .liverpool-level-inactive, .new-street-level-inactive { opacity: 0.6; } .vic-level-active, .euston-level-active, .euston-mezzanine-level-active, .manchester-level-active, .manchester-upstairs-level-active, .liverpool-level-active, .new-street-level-active { color: red; text-shadow: 0 0 black; } .vic-level-selection, .manchester-level-selection, .manchester-upstairs-level-selection, .euston-level-selection, .euston-mezzanine-level-selection, .liverpool-level-selection, .new-street-level-selection { transform: rotate(-90deg); font-size: 12px; width: 85px; height: 16px; text-align: center; } .vic-level-selection:hover, .manchester-level-selection:hover, .manchester-upstairs-level-selection:hover, .liverpool-level-selection:hover, .euston-level-selection:hover, .euston-mezzanine-level-selection:hover, .new-street-level-selection:hover { transform: rotate(-90deg); cursor: pointer; } #vic-level-faqs { display: none; } .displayNone { opacity: 0; } .vic-faq-container, .manchester-faq-container, .manchester-upstairs-faq-container, .vic-faq-container, .euston-faq-container, .euston-mezzanine-faq-container, .liverpool-faq-container, .new-street-faq-container { width: calc(100vw); } .vic-faq-tile, .manchester-faq-tile, .manchester-upstairs-faq-tile, .euston-faq-tile, .euston-mezzanine-faq-tile, .liverpool-faq-tile, .new-street-faq-tile { padding: var(--template-padding); } .vic-faq-tile:hover, .manchester-faq-tile:hover, .manchester-upstairs-faq-tile:hover, .euston-faq-tile:hover, .euston-mezzanine-faq-tile:hover, .liverpool-faq-tile:hover, .new-street-faq-tile:hover { cursor: pointer; } .vic-faq-tile:nth-of-type(even), .manchester-faq-tile:nth-of-type(even), .manchester-upstairs-faq-tile:nth-of-type(even), .liverpool-faq-tile:nth-of-type(even), .euston-faq-tile:nth-of-type(even), .euston-mezzanine-faq-tile:nth-of-type(even), .new-street-faq-tile:nth-of-type(even) { background-color: rgba(224, 224, 224, 0.6); } .vic-faq-tile div, .manchester-faq-tile div, .manchester-upstairs-faq-tile div, .euston-faq-tile div, .euston-mezzanine-faq-tile div, .liverpool-faq-tile div, .new-street-faq-tile div, .vic-faq-tile multilingual, .manchester-faq-tile multilingual, .manchester-upstairs-faq-tile multilingual, .euston-faq-tile multilingual, .euston-mezzanine-faq-tile multilingual, .liverpool-faq-tile multilingual, .new-street-faq-tile multilingual { width: calc(100vw); font-weight: 600; font-size: 1.3rem; line-height: 2; width: calc(100% - calc(20px + var(--template-padding))); } .vic-faq-question, .manchester-faq-question, .manchester-upstairs-faq-question, .euston-faq-question, .euston-mezzanine-faq-question, .liverpool-faq-question, .new-street-faq-question { display: grid; grid-template-columns:min-content auto; grid-gap: 8px; } .vic-faq-question div, .manchester-faq-question div, .manchester-upstairs-faq-question div, .euston-faq-question div, .euston-mezzanine-faq-question div, .liverpool-faq-question div, .new-street-faq-question div, .vic-faq-question multilingual, .manchester-faq-question multilingual, .manchester-upstairs-faq-question multilingual, .euston-faq-question multilingual, .euston-mezzanine-faq-question multilingual, .liverpool-faq-question multilingual, .new-street-faq-question multilingual { font-weight: 600; font-size: 1.3rem; line-height: 2; } @media screen and (min-width: 1100px) { .vic-faq-tile div, .manchester-faq-tile div, .manchester-upstairs-faq-tile div, .euston-faq-tile div, .euston-mezzanine-faq-tile div, .liverpool-faq-tile div, .new-street-faq-tile div, .vic-faq-tile multilingual, .manchester-faq-tile multilingual, .manchester-upstairs-faq-tile multilingual, .euston-faq-tile multilingual, .euston-mezzanine-faq-tile multilingual, .liverpool-faq-tile multilingual, .new-street-faq-tile multilingual { width: calc(80% - calc(20px + var(--template-padding))); } } .vic-faq-toggle, .manchester-faq-toggle, .manchester-upstairs-faq-toggle, .euston-faq-toggle, .euston-mezzanine-faq-toggle, .liverpool-faq-toggle, .new-street-faq-toggle { width: 20px; place-self: center; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transform-origin: center center; -webkit-transform-origin: center center; -moz-transform-origin: center center; } .vic-faq-toggle-turn, .manchester-faq-toggle-turn, .manchester-upstairs-faq-toggle-turn, .euston-faq-toggle-turn, .euston-mezzanine-faq-toggle-turn, .liverpool-faq-toggle-turn, .new-street-faq-toggle-turn { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); } .vic-map-hide, .manchester-map-hide, .manchester-upstairs-map-hide, .euston-map-hide, .euston-mezzanine-map-hide, .liverpool-map-hide, .new-street-map-hide { display: none !important; } .vic-faq-answer, .manchester-faq-answer, .manchester-upstairs-faq-answer, .euston-faq-answer, .euston-mezzanine-faq-answer, .liverpool-faq-answer, .new-street-faq-answer { /* display: none !important; */ display: none; font-weight: unset; padding-left: 28px; color: var(--colorTheme); } .vic-faq-show-answer, .manchester-faq-show-answer, .manchester-upstairs-faq-show-answer, .euston-faq-show-answer, .euston-mezzanine-faq-show-answer, .liverpool-faq-show-answer, .new-street-faq-show-answer { display: block; } .hide { opacity: 0.4; } .vic-unit, .manchester-unit, .manchester-upstairs-unit, .euston-unit, .euston-mezzanine-unit, .liverpool-unit, .new-street-unit { -webkit-transform-origin: center center; transform-origin: center center; transform-box: fill-box; z-index: 1000; } .active-button-anim { -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); } .active-unit-anim { fill: rgb(246, 111, 124) !important; stroke: rgb(246, 111, 124) !important; -webkit-filter: drop-shadow(0 0 3px rgb(246, 111, 124)); filter: drop-shadow(0 0 3px rgb(246, 111, 124)); animation: fadeIn 0.8s ease alternate-reverse infinite; } .vic-platform-active, .manchester-platform-active, .manchester-upstairs-platform-active, .euston-platform-active, .euston-mezzanine-platform-active, .liverpool-platform-active, .new-street-platform-active { stroke: #c40 !important; } .vic-platform-number, .manchester-platform-number, .manchester-upstairs-platform-number, .euston-platform-number, .euston-mezzanine-platform-number, .liverpool-platform-number, .new-street-platform-number { stroke: #c40 !important; opacity: 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transform-origin: 50%; transform-box: fill-box; -webkit-transform-origin: 50%; } .vic-platform-number-active, .manchester-platform-number-active, .manchester-upstairs-platform-number-active, .euston-platform-number-active, .euston-mezzanine-platform-number-active, .liverpool-platform-number-active { transform: scale(2); -webkit-transform: scale(1); opacity: 1; } .new-street-platform-number-active { opacity: 1; transform: scale(3); -webkit-transform: scale(1); } .controls-container { overflow-y: scroll; margin: auto; background-color: white; width: 100%; padding: 8px; font-size: 1.3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; line-height: 1.8; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; place-items: center; z-index: -2; /* -webkit-box-shadow: 0px 2px 2px 0px #333; box-shadow: 0px 2px 2px 0px #333; */ } @media screen and (min-width: 340px) { .controls-container { padding: var(--template-padding); } } .controls-container-hidden { display: none; } .controls-container-hidden { display: none; } .controls-container-hidden { display: none; } .controls-container-hidden { display: none; } .vic-instructions-message, .manchester-instructions-message, .manchester-upstairs-instructions-message, .euston-instructions-message, .euston-mezzanine-instructions-message, .liverpool-instructions-message, .new-street-instructions-message { padding: var(--template-padding); line-height: 1.8; display: grid; grid-template-columns:3fr min-content; column-gap: 10px; grid-template-areas:"vic-message vic-close"; position: absolute; bottom: calc(var(--sub-menu)); border-radius: 5px; background: #FFF; box-shadow: 1px 2px 5px grey; width: 70%; max-width: 500px; margin-left: 5%; } /* .vic-instructions-message::before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 10px solid transparent; border-right: 10px solid var(--colorTheme); border-top: 10px solid var( --colorTheme); border-bottom: 10px solid transparent; transform: rotate( 135deg); -webkit-transform: rotate( 135deg); bottom: -10px; left: 8px; } */ .vic-instructions-hide, .manchester-instructions-hide, .euston-instructions-hide, .euston-mezzanine-instructions-hide, .liverpool-instructions-hide, .new-street-instructions-hide { display: none; } .vic-instructions-message h2, .manchester-instructions-message h2, .euston-instructions-message h2, .euston-mezzanine-instructions-message h2, .liverpool-instructions-message h2, .new-street-instructions-message h2, .vic-instructions-message > h2 > multilingual, .manchester-instructions-message > h2 > multilingual, .euston-instructions-message > h2 > multilingual, .euston-mezzanine-instructions-message > h2 > multilingual, .liverpool-instructions-message > h2 > multilingual, .new-street-instructions-message > h2 > multilingual { grid-area: vic-message; align-self: center; font-size: 1.2rem; } .vic-instructions-close, .manchester-instructions-close, .euston-instructions-close, .euston-mezzanine-instructions-close, .liverpool-instructions-close, .new-street-instructions-close { grid-area: vic-close; width: 25px; align-self: start; } .vic-instructions-close:hover, .manchester-instructions-close:hover, .euston-instructions-close:hover, .euston-mezzanine-instructions-close:hover, .liverpool-instructions-close:hover, .new-street-instructions-close:hover { cursor: pointer; } .controls-container-hide { display: none; } .controls-container-sub { position: relative; /* height:25vh; */ flex-wrap: wrap; /* justify-content: space-evenly; */ /* transition: all 0.2s ease; */ place-items: center; width: 100%; /* padding: 13px; */ overflow: scroll; display: none; /* padding-top: 34px; */ background: #fff; place-items: center; padding: 8px 0 3px; flex-direction: row; align-items: center; overflow-x: scroll; transition: all 0.3s ease; justify-content: space-around; opacity: 0; /* -webkit-box-shadow: 0px 2px 2px 0px #333; box-shadow: 0px 2px 2px 0px #333; */ /* padding-bottom:75px; */ } .vic-choose-unit, .manchester-choose-unit, .euston-choose-unit, .euston-mezzanine-choose-unit, .liverpool-choose-unit, .new-street-choose-unit { display: none; font-size: 1.6rem; font-weight: 600; margin: 0 auto; } .vic-choose-unit-active, .manchester-choose-unit-active, .euston-choose-unit-active, .euston-mezzanine-choose-unit-active, .liverpool-choose-unit-active, .new-street-choose-unit-active { display: block; } @media screen and (min-width: 1100px) { .controls-container-sub { overflow: visible; } } .controls-container-sub-gradient { position: fixed; bottom: 0; width: 100%; display: none; left: 0; height: 75px; background: linear-gradient(rgba(250, 250, 250, 0.3), rgba(250, 250, 250, 1)); /* linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */ } .controls-container-sub-active { /* bottom: 0; */ display: flex; opacity: 1; } .controls-container-sub-close { position: absolute; top: 0; right: 10px; width: 13px; stroke-width: 21px; stroke: #000; stroke-linecap: round; stroke-linejoin: round; fill: #fff; display: none; } @media screen and (min-width: 768px) { .controls-container-sub-close { right: 21px; width: 21px; } } @media screen and (min-width: 1100px) { .controls-container-sub-close { left: 21px; } } .controls-container-sub-close:hover { cursor: pointer; } .filter-button { display: flex; flex-direction: column; align-items: center; justify-content: space-between; border: 1px transparent solid; } .control-title, .control-title > multilingual { font-size: 1rem; padding: 0; margin: 0; color: #000; white-space: nowrap; pointer-events: none; } .control-title-active { color: red; } #toggle-menu { display: none; position: fixed; top: 10px; right: 10px; background: none; border: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 1.3rem; opacity: 1; transition: opacity 0.2s ease; } #toggle-menu:hover { cursor: pointer; } .filter-button { /* overrides */ border-radius: 5px; color: #fff; max-width: 400px; /* min-height: 4rem; */ /* padding: 0 13px; */ font-size: 1rem; min-width: 70px; font-weight: 700; background: none; transition: border 0.2s ease; padding: 5px; /* background-color: navy; */ } @media screen and (min-width: 340px) { .filter-button { padding: 13px; } } .filter-button-active { border: 1px black solid !important; } .filter-button:hover { cursor: pointer; } .filter-button-sub { background: #FFF; font-size: 1.3rem; -webkit-appearance: none; color: #000; cursor: pointer; width: 100%; min-height: 80px; margin: 8px 0; font-weight: 600; width: 30%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; display: inline-block; max-width: 125px; border: 5px transparent solid; border-radius: 13px; } /* .filter-button-sub:last-of-type { margin-right:21%; } */ .filter-button-sub svg { width: 70%; } .filter-button-sub:hover { cursor: pointer; } @media screen and (min-width: 768px) { .filter-button-sub { font-size: 1.1rem; height: 100%; padding: 0; } .filter-button-sub:last-of-type { margin-right: 15%; } .controls-container { justify-content: space-around; } } .vic-map-container, .manchester-map-container, .manchester-upstairs-map-container, .euston-map-container, .euston-mezzanine-map-container, .liverpool-map-container, .new-street-map-container { height: 150px; overflow: scroll; } .vic-map-overflow, .manchester-map-overflow, .manchester-upstairs-map-overflow, .euston-map-overflow, .euston-mezzanine-map-overflow, .liverpool-map-overflow, .new-street-map-overflow { height: unset; overflow: auto; } #vic-map, #manchester-map, #manchester-upstairs-map, #euston-map, #euston-mezzanine-map, #liverpool-map, #new-street-map { height: 100%; display: block; margin: auto; max-width: 800px; /* position: fixed; */ bottom: calc(var(--footer-height) + var(--sub-menu) + 5px); right: 0; transition: all 0.2s ease; } #vic-map:hover, #manchester-map:hover, #manchester-upstairs-map:hover, #euston-map:hover, #euston-mezzanine-map:hover, #liverpool-map:hover, #new-street-map:hover { cursor: pointer; } .bigg { width: 100% !important; opacity: 1 !important; background: #FFF; height: 100%; display: block; margin: auto; max-width: 800px; transition: all 0.2s ease; } @media screen and (min-width: 768px) { #vic-map, #vic-upstairs-map, #euston-map, #euston-mezzanine-map, #liverpool-map, #new-street-map { width: 15%; } .bigg { width: auto !important; height: var(--panel) !important; position: relative !important; bottom: unset !important; } } @media screen and (min-width: 1100px) { #vic-map, #manchester-map, #manchester-upstairs-map, #euston-map, #euston-mezzanine-map, #liverpool-map, #new-street-map { bottom: var(--sub-menu); } } .cls-1 { fill: none; stroke-width: 3px; } .bus-sub-item { stroke-linecap: round; stroke-linejoin: round; } .control svg { width: 34px; height: 34px; overflow: visible; pointer-events: none; } .cls-1, .solid-fill { stroke: #000; stroke-linecap: round; stroke-linejoin: round; } .cls-2 { fill: var(--gc) } .solid-fill { fill: #fff !important; } .no-fill { fill: none; } .vic-ground, .manchester-ground, .manchester-upstairs-ground, .euston-ground, .euston-mezzanine-ground, .liverpool-ground, .new-street-ground { fill: #a5c6c4; } .vic-unit-background, .manchester-unit-background, .manchester-upstairs-unit-background, .euston-unit-background, .euston-mezzanine-unit-background, .liverpool-unit-background, .new-street-unit-background { fill: #5757e5; stroke: #5757e5; stroke-width: 1px; } .vic-unit, .manchester-unit, .manchester-upstairs-unit, .euston-unit, .euston-mezzanine-unit, .liverpool-unit, .new-street-unit { fill: #eef; stroke: #eef; stroke-width: 1px; opacity: 1; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; } .vic-platform-background, .manchester-platform-background, .euston-platform-background, .euston-mezzanine-platform-background, .liverpool-platform-background, .new-street-platform-background { fill: #c40; } .vic-platform-text, .manchester-platform-text, .euston-platform-text, .euston-mezzanine-platform-text, .liverpool-platform-text, .new-street-platform-text { fill: #fff; font-family: Nunito-Bold, Nunito; font-size: 28px; font-weight: 700; } .vic-outline, .vic-trainline, .manchester-outline, .manchester-trainline, .manchester-upstairs-outline, .manchester-upstairs-trainline, .euston-outline, .euston-trainline, .euston-mezzanine-outline, .euston-mezzanine-trainline, .liverpool-outline, .liverpool-trainline, .new-street-outline, .new-street-trainline { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5px; } .vic-outline, .manchester-outline, .manchester-upstairs-outline, .euston-outline, .euston-mezzanine-outline, .liverpool-outline, .new-street-outline { stroke-width: 8px; } .vic-wrapper, .vic-container, .manchester-wrapper, .manchester-container, .manchester-upstairs-wrapper, .manchester-upstairs-container, .euston-container, .euston-wrapper, .euston-mezzanine-container, .euston-mezzanine-wrapper, .liverpool-container, .liverpool-wrapper, .new-street-container, .new-street-wrapper { opacity: 1; transition: opacity 0.2s ease; -webkit-transition: opacity 0.2s ease; } .closed { display: none; } .stationCheckClosed { opacity: 0; visibility: hidden; line-height: 0; height:0; width: 0; } .stationCheckOpen{ transition: all .3s ease; display: flex; flex-direction: row; flex-wrap: wrap; } .sub-svg { pointer-events: none; } .filter-button-sub-active { border-bottom: 5px blue solid; } /* @media screen */ @keyframes activateUnit { 20% { transform: scale(1.2); } 40% { transform: scale(0.9); } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); } 100% { transform: scale(1.2); } } .weather-active { display: unset !important; } .active { fill: orange !important; stroke: orange; -webkit-filter: drop-shadow(2px 4px 6px black); filter: drop-shadow(2px 4px 6px black); /* animation: activateUnit 1s ease; */ /* transform: scale(1.2); -webkit-transform: scale(1.2); -webkit-transform-origin:center center; transform-origin: center center; transform-box: fill-box; animation-duration: 1s; animation-name: activateUnit; animation-iteration-count:initial; animation-timing-function: ease; */ } .header-offer-popup-wrapper, .offer-popup-wrapper { width: 92%; max-width: 450px; border: 1px black solid; margin: auto; border-radius: 5px; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); -webkit-appearance: none; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 8px var(--template-padding); } .header-offer-popup, .offer-popup { width: 100%; max-width: 1100px; height: auto; position: fixed; bottom: calc(var(--footer-height) + var(--sub-menu) + 13px); opacity: 0; visibility: hidden; transition: all 0.3 ease; -webkit-transition: all 0.3s ease; } .header-offer-popup { position: relative; bottom: unset; max-width: unset; opacity: 1; visibility: visible; margin-top: 2px; } .header-offer-popup-wrapper { width: 95%; height: calc(var(--header-height) - var(--template-padding)); max-width: 750px; } .alteration-popup-svg { height: 50px; } .header-offer-popup-message, .offer-popup-message { align-self: Center; font-size: 1.3rem; font-weight: 700; width: 100%; } .header-offer-popup-message:hover, .offer-popup-message:hover { cursor: pointer; } .header-offer-popup-message a, .offer-popup-message a { text-decoration: none; font-size: 1.3rem; font-weight: 700; color: #000; padding: 0; margin: 0; } @media screen and (max-width: 768px) { .header-offer-popup-message a, .offer-popup-message a { font-size: 0.9rem; } } @media screen and (min-width: 1100px) { .offer-popup-wrapper { margin-left: var(--template-padding); max-width: 550px; } .offer-popup { bottom: calc(var(--template-padding) + var(--sub-menu)); } } #header-icon_freenow, #header-icon_freenow-offer, #icon_freenow-offer { width: 75px; place-self: center; padding-right: 8px; } #icon_uppercrust-offer { width: 75px; place-self: center; padding-right: 8px; } .header-offer-popup-close, .offer-popup-close { place-self: center; stroke: #000; stroke-width: 13px; width: 25px; } .header-offer-popup-close:hover, .offer-popup-close:hover { cursor: pointer; } .header-offer-popup-active, .offer-popup-active { opacity: 1; visibility: visible; z-index: 6000; } .header-offer-anchors, .offer_anchors { font-size: 1.4rem; } .woolwich-ferry { background-color: #f7931d; color: black } .thames-river-services { background-color: rgb(42, 46, 152); color: white } .city-cruises { background: #ec3717; color: white; } .rb1 { background-color: #2d3039; color: white; } .rb2 { background-color: #0072bc; color: white } .rb4 { background-color: rgb(97, 194, 157); color: black } .rb6 { background-color: rgb(223, 100, 176); color: white } .rb6c { background-color: rgb(223, 100, 176); color: white } .loadingmessage { font-variant: small-caps; border: 1px solid black; padding-left: 2px; padding-right: 2px; } #icon_bus1, #icon_bus3, #icon_bus4, #icon_bus2, #icon_bus5, #icon_bus6, #icon_bus7 { height: 100%; position: absolute; } #aforfooterButtonbusstops0 p, #aforfooterButtonbusstops1 p, #aforfooterButtonbusstops2 p, #aforfooterButtonbusstops3 p, #aforfooterButtonbusstops4 p, #aforfooterButtonbusstops5 p, #aforfooterButtonbusstops6 p, #aforfooterButtonbusstops7 p { /* margin-right:10px; */ color: #000; position: absolute; } #aforfooterButtonbusstops0 p { color: white } /* .bus-sign-1, .bus-sign-2, .bus-sign-3, .bus-sign-4, .bus-sign-5, .bus-sign-6, .bus-sign-7 { fill:#C52C2D; } */ /* > tablet styling rearranged layout */ @media screen and (min-width: 940px) { #panelSuper { display: grid; grid-template-areas: "heading heading heading heading" "svg svg svg menu" "svg svg svg menu" "svg svg svg menu"; grid-template-columns:1fr 1fr 1fr 3fr; grid-template-rows: var(--header-height) var(--header-height) auto auto; } .controls-container-sub-active { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-evenly; height: auto; } .filter-button-sub { height: 100px !important; width: 100px !important; margin-right: 34px; } #vic-map { display: block; grid-area: svg; } .controls-container { width: 100% !important; } } @media screen and (min-width: 1100px) { .app { grid-template-areas: "lang lang lang lang lang" "footer header header header header" "footer main main main main" "footer main main main main"; max-width: unset; } /* .TOCGW .app { grid-template-areas: "lang lang lang lang lang" "footer header header header header" "footer main main main main" "footer main main main main"; } */ div.panelForlineDiagram { max-width: unset; } #ErrorMessageDelay { max-width: unset; } #compensation_dismiss { max-width: 500px; border: 1px black solid; margin-left: var(--template-padding); border-radius: 5px; } footer { top: 0; width: 100%; height: 100% !important; position: relative; bottom: unset; grid-column-end: 2; grid-row-start: 2; grid-row-end: 5; border-right: 1px black solid; border-top: 1px black solid; /* border-top: none; */ } footer nav:first-of-type { height: 100%; } .above-header-slot-container { grid-column-start: 2; grid-column-end: auto; grid-row-start: 1; grid-row-end: 2; } #arrow-left, #arrow-right { display: none; } footer nav:first-of-type ul { display: flex; flex-direction: column; padding: var(--template-padding); } footer nav ul li { height: auto; width: 100%; } footer nav ul li:first-of-type { margin-left: 0; } footer nav ul li:last-of-type { margin-right: 0; } .journey_sub_menu_active, .station_sub_menu_active, .buses_sub_menu_active, .offers_sub_menu_active { bottom: 0; width: calc(100% * 4); margin-left: 100%; top: unset; border-bottom: none; /* border-right:1px black solid; */ } .panelSizer { height: 100%; } .TOCGW .app .singlefullitem .panelSizer { height: 100%; } #panelSuper { position: relative !important; max-width: unset; grid-template-rows: min-content var(--header-height) auto auto; } .app .singlefullitem #panelJourney { height: calc(100% - var(--sub-menu)); } .TOCRT .app .singlefullitem #panelOffersmenu, .TOCRT .app .singlefullitem #panelFreenowoffer, .TOCRT .app .singlefullitem #panelOffers, .TOCRT .app .singlefullitem #panelWhsmithoffer, .TOCRT .app .singlefullitem #panelUppercrustoffer { height: calc(100% - var(--sub-menu)); } #panelRentals, #panelNationalrail, #panelEvents, #panelPicker, #panelTube, #panelBuses, #panelRiver, #panelTram, #panelDlr, #panelOsi, #panelMap, #panelInfo, #panelWeather, #panelRainbows, #panelSuper { height: calc(100% - var(--sub-menu)); } } .journey-finder-container { height: 100%; } .journey-finder-wrapper { display: flex; flex-direction: column; /*height: 100%;*/ width: 80%; margin: auto; align-items: center; } .journey-finder-wrapper form { display: flex; flex-direction: column; align-items: center; margin: calc(var(--template-padding) * 2) 0 var(--template-padding) 0; position: relative; } .journey-finder-wrapper form:nth-of-type(2) { margin-top: 0; } .jf-input-from, .jf-input-to { -webkit-appearance: none; background-size: 400% 400%; border: none; border-radius: 5px; /* -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); */ color: #000; background: none; cursor: pointer; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 3rem; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); font-size: var(--text-input); padding-left: 1rem; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .TOCGR .app .singlefullitem .jf-input-submit { background: var(--lner); } .TOCAW .app .singlefullitem .jf-input-submit { background: var(--tfw); } .jf-input-submit { -webkit-appearance: none; background-size: 400% 400%; border: none; background: none; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 5rem; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 80%; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); background: var(--colorTheme); border-radius: 21px; color: #fff; max-width: 400px; font-weight: 700; margin: var(--template-padding) auto; font-size: 1.3rem; display: block !important; } .TOCES .app .singlefullitem #panelPlan .panelHalf .jf-input-submit { background: var(--es); } .jf-input-to { margin-top: calc(var(--template-padding) * 2); } .jf-local-station { display: none; } .possible-journeys-container { width: 100%; } .possible-journey { display: grid; grid-template-columns:55px auto 34px; grid-auto-rows: min-content; column-gap: 8px; padding: 21px var(--template-padding); grid-template-areas: "stations stations ." "stations stations ." "stations stations svg"; margin: var(--template-padding) auto 0 auto; } /* .possible-journey:nth-of-type(odd) { background: #F07E26; } */ .possible-journey-time { grid-area: time; font-size: 1.2rem; font-weight: 600; place-self: start; } .possible-journey-station { grid-area: stations; } .possible-sub-station { display: grid; column-gap: 8px; height: 50px; grid-template-columns:40px 25px auto; grid-template-areas:"time sub-svg sub-name"; align-items: center; } .possible-sub-station-time { grid-area: time; font-size: 1.2rem; font-weight: 700; } .possible-sub-station-name { grid-area: sub-name; font-size: 1.3rem; align-self: center; justify-self: start; } .possible-sub-stations-hide { display: none; } .possible-sub-stations-display { display: block; } .possible-sub-station-svg { grid-area: sub-svg; position: relative; height: 100%; display: flex; } .possible-sub-station-svg::after { content: ""; position: absolute; width: 5px; left: calc(50% - 2.5px); height: 100%; background-color: #000; } .possible-journey-station .possible-sub-station:first-of-type .possible-sub-station-svg::after { content: ""; position: absolute; bottom: 0; height: 25%; width: 5px; left: calc(50% - 2.5px); background-color: #000; } .possible-journey-station .possible-sub-station:last-of-type .possible-sub-station-svg::after { content: ""; position: absolute; top: 0; height: 25%; width: 5px; left: calc(50% - 2.5px); background-color: #000; } .possible-journey-station .possible-sub-stations-all .possible-sub-station .calling-point-svg::after { content: ""; position: absolute; width: 5px; left: calc(50% - 2.5px); height: 100%; background-color: #000; } .possible-journey-svg svg line { transform-origin: center center; -webkit-transform-origin: center center; transition: 0.3s ease; -webkit-transition: 0.3s ease; } .possible-journey-svg-circle { fill: white; stroke: var(--colorTheme); stroke-width: 12px; } .possible-journey-svg svg { width: 100%; overflow: visible; } .possible-journey-svg svg:hover { cursor: pointer; } .possible-journey-svg-close { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .possible-journey-svg { grid-area: svg; place-self: center; margin-right: 8px; } .journey-finder-close-button { width: 50px; overflow: visible; filter: drop-shadow(0px 0px 3px #000); -webkit-filter: drop-shadow(0px 0px 3px #000); } .journey-finder-close-button:hover { cursor: pointer; } #icon_super_pin_2 { fill: red; } .journey-finder-close-parent { float: right; background: none; fill: none; border: none; margin: 0 0 13px 0; position: fixed; bottom: calc(var(--footer-height) + var(--sub-menu)); right: 13px; width: 36px; } .journey-finder-close-parent svg { width: 100%; overflow: visible; } .journey-finder-close-parent svg line { transform-origin: center center; -webkit-transform-origin: center center; transition: 0.3s ease; -webkit-transition: 0.3s ease; } @media screen and (min-width: 500px) { .journey-finder-close-parent { right: 17%; width: 40px; margin-bottom: 21px; } } @media screen and (min-width: 768px) { .journey-finder-close-parent { right: calc(50% - 20px); } } @media screen and (min-width: 1100px) { .journey-finder-close-parent { right: calc(40% - 20px); bottom: var(--sub-menu); } } .journey-picker-error { width: 80%; margin: var(--template-padding) auto; text-align: center; font-size: 1.3rem; font-weight: 600; color: red; display: none; } .journey-picker-error-active { display: block; } .possible-journey-svg-colour-2 { fill: #F69602; } .possible-journey-svg-colour-3 { fill: #3B8990; } .possible-journey-svg-colour-4 { fill: #410D7C; } .possible-journey-svg-colour-5 { fill: #DC143C; } .possible-journey-svg-colour-6 { fill: #2A338F; } .possible-journey-svg-colour-7 { fill: #2A338F; } .loadingmessage { visibility: hidden !important; display: none !important; } /* show capacity on northern */ /* .TOCNT .app .singlefullitem #panelNationalrail .loadingmessage { visibility:visible !important; display: unset !important; } */ .loadingmessage-display { visibility: visible !important; display: unset !important; } #footerButtonairport { visibility: hidden !important; display: none !important; } .badJourneyContainer { padding: var(--template-padding); height: 100%; } .badJourneyWrapper { display: grid; grid-auto-rows: auto; row-gap: var(--template-padding); place-items: center; height: calc(100vh - calc(var(--footer-height) + var(--header-height)) - var(--template-padding)); } #badJourneyTrain { width: 80%; stroke-width: 21px; } .badJourneyWrapper p { text-align: center; font-size: 1.8rem; line-height: 2; } /* journey nav items */ .icon_customJourney { /*display:none;*/ text-align: center; font-size: 1.8rem; line-height: 2; } #panelJourneyFinder { height: 100%; } #panelJourneyInfo { height: 100%; } .trainMakerStyle { z-index: 3; position: absolute; -webkit-transition: top 0.8s ease-in-out; -o-transition: top 0.8s ease-in-out; transition: top 0.8s ease-in-out; display: none; width: 50px; height: 50px; } @media only screen and (max-width: 1100px) { .trainMakerStyle { /*max-width: 500px;*/ /*margin-left: 312px;*/ left: 38px !important; padding-top: 18px; } } @media only screen and (min-width: 1100px) { .trainMakerStyle { left: 46px !important; padding-top: 21px; } } .hugeNoticonSubv2 { display: none !important; } .hugeIconIsPickedv2 { border: 1px black solid !important; } .late_train { grid-area: train; } .not-yet-running { position: fixed; display: grid; grid-template-rows: 3fr 1fr; grid-template-areas: "train" "message"; row-gap: var(--template-padding); width: 100px; padding: 100px; height: 100px; top: calc(50% - 100px); right: calc(50% - 100px); border: 1px black solid; z-index: 5000; border-radius: 50%; background-color: var(--colorTheme); } /* rentals */ .bike_map_pin { width: 25px; } .bike_tile { display: grid; grid-template-columns:minmax(60px, min-content) auto min-content; grid-auto-rows: min-content; grid-template-areas: "icon title toggle" "symbol p p" "symbol link link"; width: 100%; /* place-items: center; */ align-items: center; grid-gap: 8px; padding: var(--template-padding); } .bike_tile:nth-of-type(odd) { background-color: #eee; } .bike_tile_icon { place-self: start; grid-area: icon; justify-self: center; width: 60px; } .bike_tile_icon_infowindow { display: flex; margin: auto; width: 60px; } .rental_tile_icon_symbol { grid-area: symbol; place-self: start; width: 60px; display: none; justify-self: center; } .rental_tile_icon_symbol_infowindow { width: 60px; } .bike_tile_toggle { grid-area: toggle; place-self: end; width: 30px; transform-origin: center center; -webkit-transform-origin: center center; -moz-transform-origin: center center; place-self: center; transition: 0.3s ease; -webkit-transition: 0.3s ease; } .bike_tile_togger:hover { cursor: pointer; } .bike_tile_toggle_rotate { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); } .bike_tile_title { grid-area: title; font-size: 1.3rem; } .bike_tile_content { grid-area: p; display: none; /* height:50px; */ } .bike_tile_content div { font-size: 1.3rem; line-height: 2; } .rental_tile_anchor { color: black; text-decoration: none; grid-area: link; display: none; max-width: 400px; } .bike_tile_content_display { display: block; } .rental_tile_button { -webkit-appearance: none; background-size: 400% 400%; border: none; border-radius: 5px; color: #000; background: #FFF; cursor: pointer; font-size: 1.3rem; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 5rem; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin: var(--template-padding) 0; width: 80%; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } .rental_tile_button div { font-size: 1.4rem; font-weight: 700; } .scooter-icon { width: 50px; } /*Break things for amsterdam .header_weather { display: none !important; grid-area: weather; } .header_seat { display: none; grid-area: seat; } .TOCNT .app header .header_seat { display: flex; } */ .key-wrapper { display: grid; grid-area: keys; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; column-gap: var(--template-padding); row-gap: 8px; } .key-title { grid-area: title; padding: var(--template-padding) 0; } .key-container { padding-bottom: var(--template-padding); /* padding-top:var(--template-padding); */ padding-left: var(--template-padding); padding-right: var(--template-padding); display: grid; row-gap: 8px; grid-template-areas:"title title" "keys keys"; margin: var(--template-padding); /* border: 1px black solid; border-radius: 21px; */ } .key-container .key-wrapper { border-radius: 20px; border: 1px black solid; padding: var(--template-padding); line-height: 2; } .key-container .key-title { padding-bottom: 0; } .key-item { display: none; grid-template-columns:1fr 1fr; column-gap: 5px; align-items: center; } .key-container .key-item { display: grid; } .journey-key-item { display: grid; grid-template-columns:1fr 1fr; column-gap: 5px; align-items: center; } .key-item .icon_capacity { width: 50px; margin-left: unset; } .journey-key-icon { width: 50px; } .key-item div, .journey-key-item div { font-size: 1.3rem; font-weight: 600; } .key-container-journey { display: none; padding-bottom: var(--template-padding); padding-left: var(--template-padding); padding-right: var(--template-padding); display: none; row-gap: 8px; grid-template-areas:"title title" "keys keys"; margin: var(--template-padding); border: 1px black solid; border-radius: 21px; } .key-active { display: grid; } .TOCGR .app .scroll-to-top { background-color: var(--lner); } .scroll-to-top { width: 100px; margin: var(--template-padding) auto 0; border-radius: 50px 50px 0 0; background-color: var(--colorTheme); display: flex; flex-direction: column; justify-items: center; align-items: center; } .scroll-to-top:hover { cursor: pointer; } .scroll-to-top-hide { display: none; } .scroll-to-top-svg { width: 50%; } .scroll-to-top-paths { stroke: #FFF; } .track-button { background: none; border: none; display: flex; align-items: center; justify-content: center; } .track-svg, .cancelled-track-svg { width: 25px; } .track-svg:hover { cursor: pointer; } .cancelled-track-svg:hover { cursor: default; } .TOCGW .app .singlefullitem #panelNationalrail .track-svg path, .TOCGW .app .singlefullitem #panelOsi .track-svg path, .TOCGW .app .singlefullitem #panelRiver .track-svg path, .TOCGW .app .singlefullitem #panelTram .track-svg path, .TOCGW .app .singlefullitem #panelDlr .track-svg path, .TOCGW .app .singlefullitem #panelBuses .track-svg path, .TOCGW .app .singlefullitem #panelTube .track-svg path { fill: var(--gwr); } .TOCAW .app .singlefullitem #panelNationalrail .track-svg path, .TOCAW .app .singlefullitem #panelOsi .track-svg path, .TOCAW .app .singlefullitem #panelRiver .track-svg path, .TOCAW .app .singlefullitem #panelTram .track-svg path, .TOCAW .app .singlefullitem #panelDlr .track-svg path, .TOCAW .app .singlefullitem #panelBuses .track-svg path, .TOCAW .app .singlefullitem #panelTube .track-svg path { fill: var(--tfw); } .TOCNT .app .singlefullitem #panelNationalrail .track-svg path, .TOCNT .app .singlefullitem #panelOsi .track-svg path, .TOCNT .app .singlefullitem #panelRiver .track-svg path, .TOCNT .app .singlefullitem #panelTram .track-svg path, .TOCNT .app .singlefullitem #panelDlr .track-svg path, .TOCNT .app .singlefullitem #panelBuses .track-svg path, .TOCNT .app .singlefullitem #panelTube .track-svg path { fill: var(--northern); } .TOCGC .app .singlefullitem #panelNationalrail .track-svg path, .TOCGC .app .singlefullitem #panelOsi .track-svg path, .TOCGC .app .singlefullitem #panelRiver .track-svg path, .TOCGC .app .singlefullitem #panelTram .track-svg path, .TOCGC .app .singlefullitem #panelDlr .track-svg path, .TOCGC .app .singlefullitem #panelBuses .track-svg path, .TOCGC .app .singlefullitem #panelTube .track-svg path { fill: var(--gc); } .TOCSW .app .singlefullitem #panelNationalrail .track-svg path, .TOCSW .app .singlefullitem #panelOsi .track-svg path, .TOCSW .app .singlefullitem #panelRiver .track-svg path, .TOCSW .app .singlefullitem #panelTram .track-svg path, .TOCSW .app .singlefullitem #panelDlr .track-svg path, .TOCSW .app .singlefullitem #panelBuses .track-svg path, .TOCSW .app .singlefullitem #panelTube .track-svg path { fill: var(--sw); } .TOCES .app .singlefullitem #panelNationalrail .track-svg path, .TOCES .app .singlefullitem #panelOsi .track-svg path, .TOCES .app .singlefullitem #panelRiver .track-svg path, .TOCES .app .singlefullitem #panelTram .track-svg path, .TOCES .app .singlefullitem #panelDlr .track-svg path, .TOCES .app .singlefullitem #panelBuses .track-svg path, .TOCES .app .singlefullitem #panelTube .track-svg path { fill: var(--es); } .TOCRT .app .singlefullitem #panelNationalrail .track-svg path, .TOCRT .app .singlefullitem #panelOsi .track-svg path, .TOCRT .app .singlefullitem #panelRiver .track-svg path, .TOCRT .app .singlefullitem #panelTram .track-svg path, .TOCRT .app .singlefullitem #panelDlr .track-svg path, .TOCRT .app .singlefullitem #panelBuses .track-svg path, .TOCRT .app .singlefullitem #panelTube .track-svg path { fill: var(--nr); } .TOCGR .app .singlefullitem #panelNationalrail .track-svg path, .TOCGR .app .singlefullitem #panelOsi .track-svg path, .TOCGR .app .singlefullitem #panelRiver .track-svg path, .TOCGR .app .singlefullitem #panelTram .track-svg path, .TOCGR .app .singlefullitem #panelDlr .track-svg path, .TOCGR .app .singlefullitem #panelBuses .track-svg path, .TOCGR .app .singlefullitem #panelTube .track-svg path { fill: var(--lner); } .data-source-provider-wrapper { padding: 0 var(--template-padding); margin: var(--template-padding); } .data-source-provider-container { padding: var(--template-padding); margin: auto; align-items: center; justify-content: center; display: flex; border-radius: 5px; box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); font-size: 1.3rem; } .data-source-provider-container p:nth-of-type(2) { display: flex; height: unset; align-items: Center; } .data-source-provider-container svg { max-height: 20px; height: 20px; margin-left: var(--template-padding); } .data-source-provider-container p svg { max-height: 30px; height: 30px; margin-left: var(--template-padding); } .data-source-provider-svg { max-height: 30px; height: 30px; margin-left: var(--template-padding); } .national-rail-enquires { width: 20px; height: unset !important; max-height: unset !important; } @media screen and (min-width: 1100px) { .national-rail-enquires { width: 30px; } } .introduction-container { /* padding: var(--template-padding) 0; */ margin-top: var(--template-padding); font-size: 1.4rem; padding-bottom: 0; } .introduction-container p { font-size: 1.3rem; line-height: 2; text-align: center; } .uk-introduction-container { /* padding: var(--template-padding) 0; */ /* margin-top: var(--template-padding); */ font-size: 1.4rem; padding-bottom: 0; padding: var(--template-padding); } .uk-introduction-container p { font-size: 1.3rem; line-height: 2; } .uk-introduction-container h2 { margin-bottom: var(--template-padding); } .uk-introduction-container p:first-of-type { margin-bottom: var(--template-padding); } .feedback-multi-step-container, .feedback-multi-step-survey-container { height: 100%; } select { box-shadow: none; border-radius: 1rem; padding-top: 0.25rem; padding-bottom: 0.25rem; padding-right: 1rem; padding-left: 0.5rem; border: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat, repeat; background-position: right .7em top 50%; background-size: .65em auto; background: none; } .compensation-file-upload::-webkit-file-upload-button { visibility: hidden; } .compensation-file-upload::before { content: 'Upload ticket'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px 8px; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; text-shadow: 1px 1px #fff; font-weight: 700; font-size: 10pt; } .compensation-file-upload:hover::before { border-color: black; } .compensation-file-upload:active::before { background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); } .feedback-outer-wrapper, .feedback-survey-outer-wrapper { position: relative; height: 90%; width: 100vw; overflow-x: hidden; transition: all 0.2s ease-in-out; } .feedback-compensation-outer-wrapper, .feedback-survey-outer-wrapper { height: 100%; } .feedback-wrapper, .feedback-survey-wrapper, .feedback-container-wrapper { height: 100%; width: 700vw; position: relative; overflow-x: hidden; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .feedback-container-wrapper { width: unset; display: flex; flex-direction: column; } @media screen and (min-width: 750px) { .feedback-outer-wrapper { height: 65%; } .feedback-compensation-outer-wrapper, .feedback-survey-outer-wrapper { height: 100%; } } @media screen and (min-width: 1100px) { .feedback-outer-wrapper, .feedback-survey-outer-wrapper { width: 80vw; } .feedback-wrapper { width: calc(100% * 7); } .feedback-outer-wrapper, .feedback-survey-outer-wrapper { width: 100%; } } .feedback-step, .feedback-step-survey, .feedback-question { height: 80%; grid-template-rows: 40% 22% 10%; align-items: center; width: calc(100% / 7); position: relative; display: inline-grid; padding: var(--template-padding); transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .feedback-input { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; justify-content: space-around; } .feedback-survey-emoji-state, .feedback-emoji-state { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; } .feedback-survey-emoji-circle-fill, .feedback-emoji-circle-fill { fill: #f07e26; } .TOCSW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-slider-svg > .feedback-emoji-face > .feedback-emoji-circle-fill { fill: var(--sw) } .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-slider-svg > .feedback-emoji-face > .feedback-emoji-circle-fill { fill: var(--es) } .TOCGW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-slider-svg > .feedback-emoji-face > .feedback-emoji-circle-fill { fill: var(--gwr-secondary) } .feedback-survey-emoji-eyes, .feedback-emoji-eyes { fill: #fff; } .feedback-survey-emoji-item, .feedback-emoji-item { transition: 0.2s ease-in-out; } .feedback-survey-emoji-item-hidden, .feedback-emoji-item-hidden { visibility: hidden; opacity: 0; } .feedback-survey-face, .feedback-slider-svg { width: 75px; margin: 40px; } .feedback-survey-satisfaction, .feedback-slider-response { margin-top: 3rem; } .icon_survey-form-send, .feedback-form-send { height: 10rem; top: 17rem; width: 100vw; fill: none; stroke: var(--gc); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5px; position: absolute; } .TOCSW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form-container > .feedback-form-send { stroke: var(--sw) } .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form-container > .feedback-form-send { stroke: var(--es) } .TOCGW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form-container > .feedback-form-send { stroke: var(--gwr-secondary) } .TOCAW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form-container > .feedback-form-send { stroke: var(--tfw) } .feedback-form-send { top: 0; position: relative; width: 100%; } #feedback-search-input{ height: fit-content; width: 100%; position: relative; background: white; display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; padding: 50px 0px 0px; } @media screen and (min-width: 1100px) { .icon_survey-form-send { width: 100%; top: 12rem; } } .icon_survey-form-send-email, .feedback-form-send-email { display: none; } .email-build { display: block; stroke: var(--gc); stroke-width: 3px; stroke-dasharray: 3000; animation-name: emailBuild; animation-duration: 1.5s; } .TOCSW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form-container > .feedback-form-send > .email-build { stroke: var(--sw); } .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form-container > .feedback-form-send > .email-build { stroke: var(--es); } .TOCGW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form-container > .feedback-form-send > .email-build { stroke: var(--gwr-secondary); } .TOCAW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form-container > .feedback-form-send > .email-build { stroke: var(--tfw); } .send-item-succeed { /*display: block;*/ animation-name: sendItemSucceed; animation-duration: 3s; } .send-item-failure { animation: sendItemFail 2s ease; } @keyframes emailBuild { 0% { stroke-dashoffset: -2000; } 50% { stroke-dashoffset: -2000; } } @keyframes sendItemSucceed { 0% { left: 0; } 50% { left: -20px; } 80% { left: calc(100% - 100px) } } @keyframes sendItemFail { 0%, 7% { transform: rotateZ(0); } 15% { transform: rotateZ(-20deg); } 20% { transform: rotateZ(15deg); } 25% { transform: rotateZ(-15deg); } 30% { transform: rotateZ(11deg); } 35% { transform: rotateZ(-9deg); } 40%, 100% { transform: rotateZ(0); } } @media screen and (min-width: 400px) { .feedback-step, .feedback-step-survey { height: 90%; } } .feedback-multi-step-6 { grid-template-rows: 20% 30% min-content; } @media screen and (min-width: 1100px) { /* allow overflow through height of page for text-area multi-step */ .feedback-multi-step-6 { overflow-y: visible; } .feedback-wrapper { overflow-y: visible; } .feedback-outer-wrapper, .feedback-survey-outer-wrapper { overflow-y: visible; } } .feedback-multi-step-input-text-area, .feedback-input-text-area { height: 100%; display: flex; justify-content: center; align-items: center; width: 100%; flex-direction: column; min-height: 100px; } .feedback-multi-step-input-text-area-counter { justify-self: flex-start; font-size: 1.3rem; color: red; transition: all 0.2s ease; margin-top: var(--template-padding); padding: 0 var(--template-padding); display: none; } .feedback-multi-step-input-text-area-counter-visible { display: block; } .feedback-multi-step-input-text-area-counter-legit { color: #000; } .feedback-multi-step-input-text-area textarea, .feedback-input-text-area textarea { width: 100%; height: 100%; resize: none; overflow: auto; max-width: 750px; font-size: var(--text-input); transition: all 0.2s ease; border: 1px black solid; border-radius: 5px; margin-top: 10px; padding: 5px; } .feedback-question .feedback-question-container h4 multilingual { text-align: center; } .feedback-error-messaging { padding: var(--template-padding); color: red; font-size: 1.3rem; font-weight: 600; display: none; } .feedback-error-messaging-active { display: block; } .multi-step-submit { place-self: center; width: 70px; background: none; bordeR: none; margin: 0; } .feedback-multi-step-6-submit { place-self: center; background: none; bordeR: none; -webkit-tap-highlight-color: transparent; padding-bottom: 50px; } .feedback-multi-step-question { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .feedback-multi-step-labels, .feedback-labels { display: flex; width: 100%; flex-direction: row; justify-content: space-between; align-self: start; max-width: 750px; margin: auto; } .feedback-multi-step-labels span, .feedback-labels span { font-size: 1.3rem; font-weight: 700; } .feedback-multi-step-labels span:first-of-type, .feedback-labels span:first-of-type { margin-left: var(--template-padding); } .feedback-multi-step-labels span:last-of-type, .feedback-labels span:last-of-type { margin-right: var(--template-padding); } .feedback-ease, .feedback-useful { display: none; } .feedback-form-container { height: 10rem; width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; } .feedback-multi-step-form-survey-response, .feedback-multi-step-form-response, .feedback-form-response { border: 1px solid var(--gc); display: block; border-radius: 15px; padding: 10px; transition: 1s; margin-bottom: 20px; } .TOCSW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form > .feedback-input > .feedback-form-response { border: 1px solid var(--sw); } .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form > .feedback-input > .feedback-form-response { border: 1px solid var(--es); } .feedback-form-response { width: 215px; min-height: 75px; margin-bottom: 0; } .feedback-multi-step-input-slider, .feedback-input-slider { width: 100%; position: relative; margin: auto; max-width: 750px; } .feedback-multi-step-input-slider input, .feedback-input-slider input { width: 100%; } .feedback-multi-step-input-slider input[type=range], .feedback-input-slider input[type=range] { width: 100%; margin: 11.3px 0; background-color: transparent; -webkit-appearance: none; } .feedback-multi-step-input-slider input[type=range]:focus, .feedback-input-slider input[type=range]:focus { outline: none; } .feedback-multi-step-input-slider input[type=range]::-webkit-slider-runnable-track, .feedback-input-slider input[type=range]::-webkit-slider-runnable-track { background: #000; border: 0.2px solid #010101; border-radius: 10px; width: 100%; height: 8px; cursor: pointer; } .feedback-multi-step-input-slider input[type=range]::-webkit-slider-thumb, .feedback-input-slider input[type=range]::-webkit-slider-thumb { margin-top: -14px; width: 34px; height: 34px; background: var(--nr); border: none; border-radius: 35px; cursor: pointer; -webkit-appearance: none; } .TOCSW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-form > .feedback-multi-step-input-slider > input[type=range]::-webkit-slider-thumb, .TOCSW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-form > .feedback-input-slider > input[type=range]::-webkit-slider-thumb { background: var(--sw); } .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-form > .feedback-multi-step-input-slider > input[type=range]::-webkit-slider-thumb, .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-form > .feedback-input-slider > input[type=range]::-webkit-slider-thumb { background: var(--es); } .TOCGW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-form > .feedback-multi-step-input-slider > input[type=range]::-webkit-slider-thumb, .TOCGW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-form > .feedback-input-slider > input[type=range]::-webkit-slider-thumb { background: var(--gwr-secondary); } .TOCAW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-form > .feedback-multi-step-input-slider > input[type=range]::-webkit-slider-thumb, .TOCAW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-form > .feedback-input-slider > input[type=range]::-webkit-slider-thumb { background: var(--tfw); } .feedback-multi-step-input-slider input[type=range]:focus::-webkit-slider-runnable-track, .feedback-input-slider input[type=range]:focus::-webkit-slider-runnable-track { background: #000; } .feedback-multi-step-input-slider input[type=range]::-moz-range-track, .feedback-input-slider input[type=range]::-moz-range-track { background: #000; border: none; border-radius: 10px; width: 100%; height: 8px; cursor: pointer; } .feedback-multi-step-input-slider input[type=range]::-moz-range-thumb, .feedback-input-slider input[type=range]::-moz-range-thumb { width: 34px; height: 34px; background: var(--nr); border: 1.8px solid #00001e; border-radius: 35px; cursor: pointer; } .feedback-multi-step-input-slider input[type=range]::-ms-track, .feedback-input-slider input[type=range]::-ms-track { background: transparent; border-color: transparent; border-width: 12.2px 0; border: none; color: transparent; width: 100%; height: 8px; cursor: pointer; } .feedback-multi-step-input-slider input[type=range]::-ms-fill-lower, .feedback-input-slider input[type=range]::-ms-fill-lower { background: #000; border: 0.2px solid #010101; border: none; border-radius: 2.6px; } .feedback-multi-step-input-slider input[type=range]::-ms-fill-upper, .feedback-input-slider input[type=range]::-ms-fill-upper { background: #000; border: 0.2px solid #010101; border: none; border-radius: 2.6px; } .feedback-multi-step-input-slider input[type=range]::-ms-thumb, .feedback-input-slider input[type=range]::-ms-thumb { width: 34px; height: 34px; background: var(--nr); border: 1.8px solid #00001e; border-radius: 35px; cursor: pointer; margin-top: 0; /*Needed to keep the Edge thumb centred*/ } .feedback-multi-step-input-slider input[type=range]:focus::-ms-fill-lower, .feedback-input-slider input[type=range]:focus::-ms-fill-lower { background: #000; } .feedback-multi-step-input-slider input[type=range]:focus::-ms-fill-upper, .feedback-input-slider input[type=range]:focus::-ms-fill-upper { background: #000; } .feedback-multi-step-input-button { display: flex; align-items: center; justify-content: space-around; margin: unset; width: 100%; } .feedback-multi-step-input-button button { -webkit-appearance: none; background-size: 400% 400%; border: none; border-radius: 5px; color: #000; background: none; cursor: pointer; font-size: 1.3rem; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 5rem; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 45%; -webkit-tap-highlight-color: transparent; max-width: 300px; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } #feedback-multi-step-input-button-4 > button > multilingual, #feedback-multi-step-input-button-5 > button > multilingual { pointer-events: none; } /* @media screen and (min-width:1100px) { .feedback-multi-step-input-button button { margin-right: 100px; } } */ .feedback-underlay { position: absolute; width: 100%; height: 100%; top: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; display: none; } .feedback-breakpoint { height: 60%; border: 3px black solid; border-radius: 2px; } .feedback-button-container, .feedback-button-survey-container, .feedback-buttons-container { position: fixed; bottom: var(--footer-height); right: 0; width: 100%; max-width: 750px; height: 89px; transition: all 0.2s ease-in-out; display: flex; align-items: center; padding: 0 var(--template-padding); justify-content: space-between; margin: auto; flex-direction: row-reverse; transition: all 0.2s ease; pointer-events: none; } .feedback-forward-button, .feedback-backward-button, .feedback-forward-survey-button, .feedback-backward-survey-button, .feedback-button-forward, .feedback-button-backward { width: 89px; height: 100%; display: flex; flex-direction: column; align-items: center; -webkit-tap-highlight-color: transparent; justify-content: center; } .feedback-forward-button:hover, .feedback-backward-button:hover, .feedback-forward-survey-button:hover, .feedback-backward-survey-button:hover, .feedback-button-forward:hover, .feedback-button-backward:hover { cursor: pointer; } .feedback-forward-button svg:hover, .feedback-backward-button svg:hover, .feedback-forward-survey-button svg:hover, .feedback-backward-survey-button svg:hover, .feedback-button-forward svg:hover, .feedback-button-backward svg:hover { cursor: pointer; } @media screen and (min-width: 750px) { .feedback-button-container { bottom: unset; position: unset; right: unset; padding: unset; } .feedback-button-compensation-container, .feedback-button-survey-container, .feedback-buttons-container { position: fixed; bottom: var(--footer-height); right: 0; padding: 0 var(--template-padding); } } .feedback-button-survey-container, .feedback-buttons-container { left: 0; } .feedback-backward-button { right: unset; left: 0; } @media screen and (min-width: 1100px) { .feedback-backward-button { left: 20vw; } .feedback-form-response { width: 250px; } } .feedback-hide-button { opacity: 1; visibility: hidden; } .survey-hide-button { opacity: 1; visibility: hidden; display: none; } .feedback-button, .survey-button { width: 100%; padding: 0; margin: 0; background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; pointer-events: auto; } .feedback-button:hover, .survey-button:hover { cursor: pointer; } .feedback-button svg, .survey-button svg { width: 50%; pointer-events: none; max-height: 50px; -webkit-tap-highlight-color: transparent; } .feedback-button-circle, .survey-button-circle { display: none; fill: var(--gc); stroke: white; stroke-width: 2px; } .TOCSW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-buttons-container > .feedback-buttons > .feedback-button > svg > .feedback-button-circle { fill: var(--sw); } .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-buttons-container > .feedback-buttons > .feedback-button > svg > .feedback-button-circle { fill: var(--es); } .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-multi-step-container > .feedback-button-container > .feedback-forward-button > .feedback-button > svg > .feedback-button-circle, .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-multi-step-container > .feedback-button-container > .feedback-backward-button > .feedback-button > svg > .feedback-button-circle { fill: var(--es); } .TOCGW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-buttons-container > .feedback-buttons > .feedback-button > svg > .feedback-button-circle { fill: var(--gwr-secondary); } .TOCAW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-buttons-container > .feedback-buttons > .feedback-button > svg > .feedback-button-circle { fill: var(--tfw); } .TOCSW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-buttons-container > .feedback-buttons > .feedback-button > svg > path { fill: var(--sw); } .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-buttons-container > .feedback-buttons > .feedback-button > svg > path { fill: var(--es); } .TOCGW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-buttons-container > .feedback-buttons > .feedback-button > svg > path { fill: var(--gwr-secondary); } .TOCAW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-buttons-container > .feedback-buttons > .feedback-button > svg > path { fill: var(--tfw); } @media screen and (min-width: 1100px) { .feedback-button, .survey-button { height: 100%; width: unset; margin: unset; } .feedback-button svg, .survey-button svg { width: unset; height: 100%; overflow: visible; } .feedback-button-circle, .survey-button-circle { display: unset; } } .feedback-button-circle { display: none; fill: var(--gc); } @media screen and (min-width: 1100px) { .feedback-button, .survey-button { height: 100%; width: unset; margin: unset; } .feedback-button svg.survey-button svg { width: unset; height: 100%; overflow: visible; } .feedback-button-circle, .survey-button-circle { display: unset; } } .feedback-alert-container, .feedback-survey-alert-container, .feedback-container-alert { display: none; position: absolute; width: 100%; background: white; top: 0; z-index: 9; } .feedback-container-alert { height: 100%; position: relative; margin: 25px 0 0 0; } @media screen and (min-width: 1200px) { .feedback-container-alert { margin: 100px 0 0 0; } } .feedback-alert-container { height: 90%; } .feedback-success, .feedback-error, .feedback-survey-success, .feedback-survey-error { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 var(--template-padding); } .feedback-survey-success, .feedback-survey-error { flex-direction: column; } .feedback-multi-step-error, .feedback-send-error { padding: 1em; opacity: 0; text-align: center; transition: .2s ease; visibility: hidden; } .feedback-multi-step-error-message, .feedback-send-error-message { opacity: 1; visibility: visible; } .feedback-survey-complete, .feedback-complete { position: relative; /*height: 70vh;*/ display: flex; flex-direction: column; align-items: center; justify-content: center; } .feedback-success span, .feedback-error span, .feedback-survey-success span, .feedback-survey-error span, .feedback-survey-complete span, .feedback-complete span { font-weight: 700; font-size: 1.3rem; text-align: center; } .feedback-multi-step-submit-title { font-size: 1.3rem; font-weight: 600; } .feedback-alert-show { display: flex; } .feedback-stage-0 { margin-left: 0; } .feedback-stage-1 { margin-left: -100vw; } .feedback-stage-2 { margin-left: -200vw; } .feedback-stage-3 { margin-left: -300vw; } .feedback-stage-4 { margin-left: -400vw; } .feedback-stage-5 { margin-left: -500vw; } .feedback-stage-6 { margin-left: -600vw; } .feedback-stage-7 { margin-left: -700vw; } .feedback-stage-8 { margin-left: -800vw; } .feedback-stage-9 { margin-left: -900vw; } .feedback-stage-10 { margin-left: -1000vw; } .feedback-stage-11 { margin-left: -1100vw; } .feedback-stage-12 { margin-left: -1200vw; } .feedback-stage-13 { margin-left: -1300vw; } .feedback-stage-14 { margin-left: -1400vw; } .feedback-stage-15 { margin-left: -1500vw; } .feedback-stage-16 { margin-left: -1600vw; } .feedback-stage-17 { margin-left: -1700vw; } @media screen and (min-width: 1100px) { .feedback-stage-0 { margin-left: 0; } .feedback-stage-1 { margin-left: -80vw; } .feedback-stage-2 { margin-left: -160vw; } .feedback-stage-3 { margin-left: -240vw; } .feedback-stage-4 { margin-left: -320vw; } .feedback-stage-5 { margin-left: -400vw; } .feedback-stage-6 { margin-left: -480vw; } .feedback-stage-7 { margin-left: -560vw; } .feedback-stage-8 { margin-left: -640vw; } .feedback-stage-9 { margin-left: -720vw; } .feedback-stage-10 { margin-left: -800vw; } .feedback-stage-11 { margin-left: -880vw; } .feedback-stage-12 { margin-left: -960vw; } .feedback-stage-13 { margin-left: -1040vw; } .feedback-stage-14 { margin-left: -1120vw; } .feedback-stage-15 { margin-left: -1200vw; } .feedback-stage-16 { margin-left: -1280vw; } .feedback-stage-17 { margin-left: -1360vw; } } @media screen and (min-width: 1200px) { .feedback-stage-0 { margin-left: 0; } .feedback-stage-1 { margin-left: -100%; } .feedback-stage-2 { margin-left: -200%; } .feedback-stage-3 { margin-left: -300%; } .feedback-stage-4 { margin-left: -400%; } .feedback-stage-5 { margin-left: -500%;; } .feedback-stage-6 { margin-left: -600%; } .feedback-stage-7 { margin-left: -700%; } .feedback-stage-8 { margin-left: -800%; } .feedback-stage-9 { margin-left: -900%; } .feedback-stage-10 { margin-left: -1000%; } .feedback-stage-11 { margin-left: -1100%; } .feedback-stage-12 { margin-left: -1200%; } .feedback-stage-13 { margin-left: -1300%; } .feedback-stage-14 { margin-left: -1400%; } .feedback-stage-15 { margin-left: -1500%; } .feedback-stage-16 { margin-left: -1600%; } .feedback-stage-17 { margin-left: -1700%; } } /* compensation overrides */ .feedback-multi-step-question { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } /* .feedback-multi-step-compensation-container { height:unset; } */ .feedback-step-compensation, .feedback-step-survey, .feedback-question { height: 100%; display: inline-flex; flex-direction: column; align-items: center; padding-top: 0; margin-top: 0; grid-template-rows: unset; } .feedback-question { margin: 25px 0; width: 100%; } @media screen and (min-width: 1100px) { .feedback-question { margin: 100px 0 0 0; } } .feedback-question-hide { display: none; } .feedback-multi-step-form, .feedback-form { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 550px; } .feedback-multi-step-form label, .feedback-form label { font-weight: 600; font-size: 1.5rem; line-height: 2; margin-top: var(--template-padding); min-width: 200px; } .feedback-compensation-wrapper { width: 900vw; } .feedback-survey-wrapper { width: 1000vw; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .feedback-compensation-wrapper .feedback-step { width: calc(100% / 9); } .feedback-step-survey { width: calc(100% / 10); } .feedback-compensation-outer-wrapper, .feedback-survey-outer-wrapper { height: 100%; } .feedback-multi-step-survey-questions, .feedback-multi-step-questions, .feedback-question-container { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; max-width: 550px; } .feedback-multi-step-survey-questions > h2, .feedback-multi-step-questions > h2, .feedback-question-container > h2 { text-align: center; } .feedback-multi-step-survey-questions > h3, .feedback-multi-step-questions > h3, .feedback-survey-complete > h3, .feedback-complete > h3, .feedback-survey-success > h3, .feedback-question-container > h3 { text-align: center; padding-top: 15px; } .feedback-response { text-align: center; width: 100%; } .feedback-response > textarea { width: 100%; max-width: 550px; } .feedback-response-negative-hide { display: none; visibility: hidden; opacity: 0; } .feedback-response-negative-show { display: unset; visibility: visible; opacity: 1; } .feedback-multi-step-input-labels { display: flex; width: 100%; flex-direction: row; justify-content: center; gap: 10px; } #feedback-multi-step-form-survey-0, #feedback-multi-step-form-survey-1 { padding-top: 1rem; } .feedback-multi-step-form-survey-questions { padding-bottom: 5rem; } @media screen and (min-width: 1100px) { .feedback-compensation-wrapper { width: calc(100% * 9); height: unset; } .feedback-survey-wrapper { width: calc(100% * 10); height: unset; } .feedback-survey-wrapper, .feedback-survey-alert-container { padding-top: 2vh; } .feedback-compensation-outer-wrapper, .feedback-survey-outer-wrapper { height: 100%; } } .feedback-compensation-wrapper { padding-bottom: 100px; } .feedback-multi-step-compensation-heading { margin-top: var(--template-padding); } .feedback-multi-step-input-text-compensation, .feedback-multi-step-input-text-survey { width: 100%; padding: var(--template-padding); margin: 0; font-size: 1.3rem; border-radius: 5px; outline: none; border: 1px black solid; } .form-input-invalid { border: 1px red solid; } .feedback-multi-step-person-item, .feedback-multi-step-person-item-survey { margin-top: var(--template-padding); display: none; flex-direction: column; align-items: center; width: 100%; } .feedback-multi-step-person-item-active { display: flex; } .feedback-step-error, .feedback-error { display: none; padding: var(--template-padding); margin: 0; font-size: 1.3rem; line-height: 2; color: red; font-weight: 600; } .feedback-step-error-active, .feedback-error-active { display: block; } .feedback-hide-panel { opacity: 1; visibility: hidden; display: none; } #feedback-multi-step-form-compensation-7-submit, #feedback-multi-step-form-survey-9-submit { margin-top: calc(var(--template-padding) * 2); line-height: 2; background: none; } #feedback-multi-step-form-survey-6 > textarea, #feedback-multi-step-form-survey-3-free, #feedback-multi-step-form-survey-8-free { margin: 1rem; width: 100%; /*height: 100%;*/ resize: none; overflow: auto; max-width: 750px; font-size: var(--text-input); transition: all 0.2s ease; border: 1px black solid; border-radius: 5px; } #feedback-multi-step-form-survey-3-free, #feedback-multi-step-form-survey-8-free { margin: 1rem 0; width: 75%; height: 150px; } /* .compensation-required:after { content:" *"; color: red; } */ select[required], input[required] { background-image: radial-gradient(red 15%, transparent 16%); background-size: 2rem 2rem; background-position: top right; background-repeat: no-repeat; } .feedback-button-compensation-container { pointer-events: none; } .feedback-upload-instructions { margin-top: var(--template-padding); font-size: 1.3rem; line-height: 2; } .feedback-upload-instructions-list { list-style-type: none; padding: 0; } .feedback-upload-instructions-list li { font-size: 1.3rem; font-weight: 600; } .feedback-hide-absolute { display: none; } .feedback-compensation-side-message { font-size: 1.3rem; line-height: 2; margin-top: var(--template-padding); max-width: 550px; margin-left: auto; margin-right: auto; } .feedback-compensation-side-message a { text-decoration: none; color: #000; font-size: 1.3rem; font-weight: 600; } .compensation-intro { line-height: 2; max-width: 550px; margin: auto; } /* override settings for NT */ .TOCNT .app .singlefullitem #panelSurvey .feedback-wrapper { height: unset; width: unset; } .TOCNT .app .singlefullitem #panelSurvey .feedback-wrapper .feedback-step { height: unset; display: block; width: 100%; } @media screen and (min-width: 1100px) { .feedback-button-compensation-container, .feedback-button-survey-container, .feedback-buttons-container { position: fixed; bottom: calc(50vh - var(--header-height)); width: 80vw; max-width: unset; padding: 0 var(--template-padding); } .feedback-button-compensation-container, .feedback-button-survey-container, .feedback-buttons-container { left: 240px; right: 0; bottom: calc(25vh - var(--header-height)); max-width: 850px; } } #feedback-page-tracker { display: none; } #feedback-notice { text-align: center; margin: 5%; } .survey-response-highlighted, .feedback-response-highlighted { background-color: var(--gc); } .TOCSW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form > .feedback-input > .feedback-response-highlighted { background-color: var(--sw); } .TOCES > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form > .feedback-input > .feedback-response-highlighted { background-color: var(--es); } .TOCGW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form > .feedback-input > .feedback-response-highlighted { background-color: var(--gwr-secondary); } .TOCAW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form > .feedback-input > .feedback-response-highlighted { background-color: var(--tfw); } .TOCGW > .app > .singlefullitem > #panelFeedback > .feedback-container > .feedback-container-wrapper > .feedback-question > .feedback-question-container > .feedback-form > .feedback-input > .feedback-form-response { border: 1px solid var(--gwr-secondary); } .feedback-page-number-current { display: flex; height: 40px; width: 65px; border: 1px solid var(--gc); background-color: var(--gc); align-items: center; justify-content: center; border-radius: 0 0 0 10px; } .feedback-iframe { height: 100%; width: 100%; } /* uk-map styling svg */ .uk-map-station { fill: #144e63; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; } .uk-map-station:hover { cursor: pointer; } .uk-map-mainland { fill: #ff751e; } .uk-map-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--template-padding) 0; } .uk-map-svg { height: 65vh; } .uk-map-dashboard-line { stroke: #144e63; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; fill: none; } .uk-map-dashboard-clouds { stroke: #144e63; stroke-miterlimit: 10; stroke-width: 3; fill: none; } .uk-map-dashboard-fill { fill: #ff751e; } .uk-map-station-active { fill: #3184AE; } .uk-map-input-container { display: flex; justify-content: space-between; width: 100%; align-items: center; padding: var(--template-padding); } .uk-map-input-wrapper { width: 80%; position: relative; max-width: 500px; } .uk-map-input-wrapper:hover { cursor: pointer; } .uk-map-input:hover { cursor: pointer; } .uk-map-input { border-radius: 12px; background: #144e63; border: none; width: 100%; height: 3.8rem; font-size: 1.3rem; padding-left: 1rem; color: #FFF; font-weight: 700; display: flex; align-items: center; } .uk-map-input > multilingual { font-size: 1.3rem; } .uk-map-input:focus { outline: none; } .uk-map-input::placeholder { color: #FFF; } .uk-map-button { padding: 0; margin: 0; background: none; width: 15%; border: none; visibility: hidden; opacity: 0; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; } .uk-map-button-visible { visibility: visible; opacity: 1; } .uk-map-input-stations-list { display: none; width: 100%; position: absolute; top: calc(3rem * -4); background: #144e63; color: #FFF; /* padding-bottom: 0.8rem; */ padding-top: 0.8rem; border-radius: 12px 12px 0 0; } .uk-map-input-stations-list div { display: flex; align-items: center; height: 3rem; } .uk-map-input-stations-list div:hover { cursor: pointer; } .uk-map-input-stations-list span { font-size: 1.3rem; font-weight: 700; padding-left: var(--template-padding); height: 3rem; pointer-events: none; } .display-list { display: block; } .uk-map-text { padding: var(--template-padding); font-size: 1.3rem; font-weight: 600; line-height: 2; } .uk-map-dashboard-svg { max-width: 80px; } .uk-map-dashboard-svg:hover { cursor: pointer; } .buses_sub_menu_active { top: calc(var(--sub-menu) * -1); display: block !important; } .delayrepayplease { background-color: yellow; } .delayrepaypicked { border: 2px solid red; } .download-button-container { display: none; margin-bottom: calc(var(--template-padding) * 2); width: 100%; max-width: 250px; margin-left: auto; margin-right: auto; align-items: center; justify-content: center; height: 75px; border-radius: 3px; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } /* .TOCPP .app .singlefullitem #panelOffers, .TOCRT .app .singlefullitem #panelOffers, .TOCPP .app .singlefullitem #panelOffersmenu, .TOCRT .app .singlefullitem #panelOffersmenu, .TOCPP .app .singlefullitem #panelFreenowoffer, .TOCRT .app .singlefullitem #panelFreenowoffer, .TOCPP .app .singlefullitem #panelUppercrustoffer, .TOCRT .app .singlefullitem #panelUppercrustoffer, .TOCPP .app .singlefullitem #panelWhsmithoffer, .TOCRT .app .singlefullitem #panelWhsmithoffer, .TOCGC .app .singlefullitem #panelWhsmithoffer, .TOCGC .app .singlefullitem #panelOffers, .TOCGC .app .singlefullitem #panelOffersmenu, .TOCGC .app .singlefullitem #panelFreenowoffer, .TOCGC .app .singlefullitem #panelUppercrustoffer { height:var(--panel-sub-menu-active); } */ /* @media screen and (min-width:1100px) { .TOCPP .app .singlefullitem #panelOffers, .TOCRT .app .singlefullitem #panelOffers, .TOCPP .app .singlefullitem #panelOffersmenu, .TOCRT .app .singlefullitem #panelOffersmenu, .TOCPP .app .singlefullitem #panelFreenowoffer, .TOCRT .app .singlefullitem #panelFreenowoffer, .TOCPP .app .singlefullitem #panelUppercrustoffer, .TOCRT .app .singlefullitem #panelUppercrustoffer, .TOCPP .app .singlefullitem #panelWhsmithoffer, .TOCRT .app .singlefullitem #panelWhsmithoffer, .TOCGC .app .singlefullitem #panelWhsmithoffer, .TOCGC .app .singlefullitem #panelOffers, .TOCGC .app .singlefullitem #panelOffersmenu, .TOCGC .app .singlefullitem #panelFreenowoffer, .TOCGC .app .singlefullitem #panelUppercrustoffer { margin-bottom:var(--sub-menu); } } */ .TOCRT .app .singlefullitem #panelOffers .download-button-container, .TOCES .app .singlefullitem #panelOffers .download-button-container, .TOCGC .app .singlefullitem #panelOffers .download-button-container, .TOCPP .app .singlefullitem #panelOffers .download-button-container { display: flex; grid-area: button; margin-top: var(--template-padding); display: flex; } .download-button-anchor { text-align: center; width: 100%; font-size: 1.3rem; font-weight: 700; color: #000; } .offer-panel { display: none; } .offer-panel-active { display: block; margin-bottom: 50px; } .animation_plan_1 { -webkit-animation: bumpUp 0.8s ease; animation: bumpUp 0.8s ease; } .animation_plan_2 { -webkit-animation: slideInUp 0.8s ease; animation: slideInUp 0.8s ease; } div.panelForlineDiagram .planfromhere { width: 20px; height: 20px !important; margin-left: 0.5em; margin-right: 0.5em; margin-top: 3px; vertical-align: middle; display: -webkit-box; display: flex; background-size: contain; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAABC1BMVEUAAACdnZ2dnZ12dnaUlJRJSUmZmZlOTk4+Pj5DQ0MzMzMAAAACAgImJiYsLCwpKSkrKyszMzMtLS0/Pz9NTU1iYmJbW1thYWFlZWVubm6AgICWlpaYmJiXl5eDg4NPT0/////w/u7+/v/z/vH+//7Pz8+e+o6qqqqxsbG7u7u8/LK9/LK+/LTD/LrG/L3HlOJmZmbT09PV/c/WserXserYtOvb/dXcu+3ev+7fwe7h/tzi4uLj/t/ky/HkzPHmzvLn0PLr2vXt3fbu/uv3//aY+oj6//n9+/7+/f+dnZ2d+o3//v+enp77//r8+v7OoebOzs7Po+b0/vLIyMjv/u3w4vfw4/d0dHTJmeOHBbwQAAAAIHRSTlMABgcMDhMVHikwNz09Skp7gIemvM3k5eXl7vDy8vj7/GrKkOAAAACnSURBVHhefcvVDsJAFEXR4u7uh7a4u7u7y/9/CQUywITAfrpZOZf5l0onpJfQaI4JXZSfJDK6IRSyqN9mcGVzjyIBq4ygHdHZo2XjoCXoABdMAd3OCSHNGwfhIdhapUUhMMY9CpvJBNhdpkDhKs0Dk/WEQvDl7/f6KI/p5lqkEHt8L4fHOBb93pnC4JwDWy21P9CJV9sXmvwe7zOfTcGQ5OSQiplf3QDwBB6/PW7LAQAAAABJRU5ErkJggg=='); float: left; } div.panelHalf { display: flex; flex-direction: column; align-items: center; /* perspective: 500px; */ /* max-width: 750px; */ margin: auto; /* height:100%; */ } .planner-wrapper { position: relative; transform-style: preserve-3d; transition: all 0.3s ease; width: 100%; height: var(--panel); overflow-x: hidden; } @keyframes plannerRotate { from { transform: translateZ(0px) rotate3d(0, 1, 0, 0deg); } 50% { transform: translateZ(-250px) rotate3d(0, 1, 0, 45deg); } 100% { transform: rotate3d(0, 1, 0, 90deg); } } .planner-wrapper-switch { /* transform: rotate3d(0, 1, 0, 90deg); */ animation: plannerRotate 0.3s linear forwards; } .planner-form-intro { margin: var(--template-padding); line-height: 2; font-size: 1.3rem; } .planner-form { /* width: 80%; */ position: relative; } .planner-form-wrapper form { width: 250px; } .planner-form > input { padding-left: 3rem; } .planner-form-wrapper { display: flex; justify-content: center; width: 100%; align-items: center; flex-direction: column; position: relative; } .planinputcolor { color: red; font-weight: bold; } /* #panelPlanOutput { background-color: #B3E5FC; } */ /* TAXI CONTENT */ .taxis, .onboard-food { display: flex; flex-direction: column; align-items: center; } .onboard-hide { display: none; } .taxis-button, .onboard-button { width: 30vw; } div.voi-link { display: flex; justify-content: center; } div.voi-link a svg { width: 100px; } div.voi-link button { -webkit-appearance: none; background-size: 400% 400%; border: none; border-radius: 5px; color: #000; background: #FFF; cursor: pointer; font-size: 1.3rem; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 55px; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin: var(--template-padding) 0; width: 90%; margin-left: 5%; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } div.voi-link button:focus, div.voi-link a:focus div.voi-link:focus { border: none; outline: none; } div.voi-link a { text-decoration: none; outline: none; } .gm-style .gm-style-iw-d div { font-family: Nunito; font-size: 1.4rem; line-height: 1.5; font-weight: 400; } .gm-style .gm-style-iw-c { box-shadow: 0 1px 3px 1px #e2e2e2; } /* .gm-style-iw gm-style-iw-c button span { width:25px; height:25px; } */ .taxi-button-anchor, .onboard-button-anchor { width: 100%; display: flex; margin-top: var(--template-padding); } svg.whsmith-offer-logo { width: 100%; margin-left: unset; } .event-schedule-container { display: flex; margin-top: 20px; } .event-schedule-wrapper { /* grid-area: wrapper; */ width: 100%; overflow-x: scroll; display: flex; row-gap: 8px; column-gap: 8px; position: relative; flex-direction: column; align-items: center; } .event-schedule-matches { grid-area: titles; display: flex; row-gap: 8px; grid-row-start: 2; flex-direction: column; padding: 133px 0 0 0; row-gap: 8px; align-items: center; } .event-schedule-matches div { display: flex; justify-content: center; align-items: center; flex-direction: column; } .event-schedule-matches div { padding: 8px; height: 100px; width: 100px; margin: 13px 10px 7px; } .event-schedule-grid { display: flex; } .event-schedule-grid div { /* width:80px; height:80px; */ /* border:1px black solid; */ /* padding:8px; */ /* margin: 0 10px; */ /* height: 50px; */ /* width: 50px; */ } .event-schedule-event-wrapper { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; margin-left: 1vw; align-content: center; flex-wrap: wrap; } .event-schedule-event { width: 100px; height: 100px; padding: 8px; border-radius: 8px; display: block; } .event-schedule-no-event { width: 80px; height: 80px; padding: 5px; border-radius: 8px; display: block; } .event-schedule-active-start { border-radius: 3px 0 0 3px; padding: 13px 0 13px 13px; } .event-schedule-active-middle { padding: 13px 0; } .event-schedule-active-end { border-radius: 0 3px 3px 0; padding: 13px 13px 13px 0; } .event-schedule-date { display: flex; /* flex-direction: column; */ /* width: 80px; */ /* height: 80px; */ justify-content: center; align-items: center; } .event-schedule-date-wrapper, .event-schedule-month-wrapper { border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #004d71; border: none; padding: unset; margin: 0 10px; height: 60px; width: 60px; } .event-schedule-month-wrapper { border-radius: 0; width: 150px; background: #004d71; color: white; height: 25px; padding: 0; } .event-schedule-date-text, .event-schedule-month-text { width: auto; height: auto; color: #FFF; font-weight: 700; } .event-schedule-calendar, .event-schedule-months { place-items: center; position: sticky; align-self: start; top: 0; transition: all 0.2s ease; FONT-WEIGHT: 100; } .event-schedule-months { height: 25px; } div.event-schedule-grid .event-schedule-date { width: 100px; height: 100px; font-size: 14px; FONT-WEIGHT: 100; margin-left: 1vw; } .event-schedule-round { clip-path: polygon(0 0, 100% 0%, calc(100% - 2.5rem) 100%, 0% 100%); margin-left: 1rem; padding-left: 1rem; width: 150px; background: #004d71; color: white; height: 25px; } @media screen and (min-width: 768px) { .event-schedule-round { width: 220px; } } .event-schedule-row, .event-schedule-row-round { position: relative; align-self: start; margin: 10px 0; /* margin: 0 10px; */ } .event-schedule-row-round { margin-top: 43px; } .event-schedule-title-venue { position: absolute; /* width:100%; */ background-color: #FFF; bottom: 0; height: auto; display: none; padding: 0 var(--template-padding); border: #004d71 3px solid; max-width: 300px; /* display:flex; */ } .event-schedule-title-venue-visible, .event-schedule-title-venue-popin { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; animation: addPopin .3s; width: 150px; text-align: center; /* position: sticky; left: 0; */ } @media screen and (min-width: 375px) { .event-schedule-title-venue-visible, .event-schedule-title-venue-popin { width: 215px; } } @media screen and (min-width: 768px) { .event-schedule-title-venue-visible, .event-schedule-title-venue-popin { width: 300px; } } .event-schedule-button-popin { display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; } .event-schedule-button-popin > button { width: 120px; height: 22px; margin: 2px 0; -webkit-appearance: none; border: none; background: none; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); border-radius: 21px; background: var(--colorTheme); color: white; max-width: 400px; font-weight: 700; pointer-events: all; } .TOCGW > .app > .singlefullitem > #panelUpcomingevents > #upcoming-events-list > .upcoming-events-container > .upcoming-events-events > .upcoming-events-popin > .event-schedule-button-popin > button { background-color: var(--gwr); } .TOCGW > .app > .singlefullitem > #panelUpcomingevents > #upcoming-events-list > .upcoming-events-container > .upcoming-events-events > .upcoming-events-popin { border: var(--gwr) 3px solid; } .event-schedule-title { font-size: 1rem; font-weight: 600; /* align-self:center; */ } .event-schedule-venue { font-size: 1rem; margin-top: 2px; /* align-self: center; */ } @media screen and (min-width: 375px) { .event-schedule-title { font-size: 1.3rem; } .event-schedule-venue { font-size: 1.1rem; margin-top: 4px; } } .event-schedule-matches div svg { pointer-events: none; } .event-schedule-scroll { position: fixed; right: var(--template-padding); width: 60px; height: 60px; border-radius: 30px; background-color: white; padding: 5px; opacity: 0.4; transition: all 0.2s ease; } @media screen and (min-width: 1200px) { .event-schedule-scroll { position: absolute; left: 275px; } } .event-schedule-scroll svg { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); pointer-events: none; } #panelCommonwealthgames { position: relative; width: 100vw; } @media screen and (min-width: 1100px) { #panelCommonwealthgames { position: relative; width: 80vw; } } @keyframes spinPlay { 50% { width: 70%; } 100% { transform: rotateY(360deg); } } @keyframes jello { from, 11.1%, to { transform: translate3d(0, 0, 0); } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .animation_commonwealthgames_1, .animation_upcomingevents_1 { transform-origin: center center; animation: jello 0.9s; -webkit-animation: jello 0.9s; } .animation_commonwealthgames_2, .animation_upcomingevents_2 { animation: bloat 0.6s ease; -webkit-animation: bloat 0.6s ease; transform-origin: center center; } #event-schedule-scroll-forward:hover { cursor: pointer; } #event-schedule-scroll-back:hover { cursor: pointer; } #event-schedule-scroll-back { left: var(--template-padding); } #event-schedule-scroll-back svg { transform: rotate(90deg); } .event-schedule-scroll-hide { /* display:none; */ opacity: 0; visibility: hidden; } .event-schedule-close { display: none; } .event-schedule-introduction { position: relative; width: 100%; padding: 8px var(--template-padding); } .event-schedule-intro-text { font-size: 1.3rem; line-height: 2; pointer-events: none; } .event-schedule-bottom { bottom: var(--footer-height); } .event-schedule-calendar-hide { visibility: hidden; opacity: 0; } .event-schedule-introduction:hover { cursor: pointer; } .event-schedule-arrow-container { height: 100px; position: fixed; display: flex; align-items: center; justify-content: space-between; z-index: 6; } @media screen and (min-width: 1100px) { #event-schedule-scroll-back { left: calc(20vw + var(--template-padding)); } } @media screen and (min-width: 1200px) { #event-schedule-scroll-back { left: -575px; } } div.leg-slice { display: flex; align-items: center; flex-direction: column; } /* div.leg-slice div { font-size: 1.3rem; line-height: 2; border-radius: 5px; background-color: #95ddfb; padding: 0 var(--template-padding); width: auto; margin: var(--template-padding); } */ div.planner-convo { font-size: 1.3rem; line-height: 2; border-radius: 5px; /* background-color: #95ddfb; */ padding-right: var(--template-padding); padding-top: var(--template-padding); padding-bottom: var(--template-padding); width: auto; margin: var(--template-padding); display: grid; grid-template-columns: auto; align-items: center; column-gap: 8px; margin-top: 5px; /* display:none; */ box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } div.planner-convo-txt, div.planner-convo-url { font-size: 1.3rem; line-height: 2; padding-left: var(--template-padding); } div.planner-convo-url { display: flex; flex-direction: column; align-items: center; padding: var(--template-padding); } .planner-convo-url > h4 { text-align: center; } div.planner-convo-url h4 { line-height: 2; font-size: 1.3rem; font-weight: 500; } div.planner-convo-url h4 a { line-height: 2; font-size: 1.3rem; font-weight: 500; text-decoration: none; color: #000; } svg.leg-status-icon { width: 100%; } .planner_container { width: 100%; /* position: absolute; */ position: relative; /* max-width: 750px; */ margin: auto; /* transform: translateZ(-230px); transform: translateZ(0px); */ transition: all 0.3s ease; background-color: #FFF; overflow-y: visible; /* height:var(--panel); */ } .planner-container-hide { display: none; } .planner_container-switch { transform: translateZ(250px); /* transform: translateZ(-100px) translateX(50%) rotate3d(0, 1, 0, -90deg); */ } .planner_modal_container { /* transform: translateX(50%) rotate3d(0, 1, 0, -90deg); */ /* transform: translateZ(300px) translateX(50%) rotate3d(0, 1, 0, 90deg); */ /* transform: translateZ(0) translateX(0%) rotate3d(0, 1, 0, 90deg); */ transition: all 0.3s ease; background-color: #FFF; min-height: var(--panel); left: 100vw; position: absolute; top: 0; width: 100%; } .planner_modal_container-switch { transform: translateX(0%) rotate3d(0, 1, 0, -90deg); } .planner_modal_slide { left: 0; } svg.planner-info-symbol-parent { width: 50px; margin-top: 13px; display: none; } circle.planner-info-symbol-circle { fill: #95ddfb; pointer-events: none; } .planner-item { display: grid; grid-template-columns: 1fr 1fr 80px 80px; place-items: start; align-items: start; padding: 0 var(--template-padding); column-gap: 8px; } @media screen and (min-width: 767px) { .planner-item { grid-template-columns: 1fr 1fr 120px 120px; } } .planner-item div { font-size: 1.3rem; line-height: 2; } .planner-section { padding: var(--template-padding) 0; width: 100%; display: flex; flex-direction: column; align-items: center; } /* .planner-section:nth-of-type(odd) { background:#E5E5E5; } */ div.planner-hide { display: none; } div.planner-inputs { display: flex; padding-left: calc(var(--template-padding) / 2); padding-right: var(--template-padding); align-items: center; border-bottom: 1px #c5c2c2 solid; background: white; top: -1px; z-index: 5; position: sticky; } div.planner-inputs:hover { cursor: pointer; } div.planner-input-txt { font-size: 1.3rem; line-height: 2; margin-left: var(--template-padding); } .planner-input-svg { width: 38px; } div.planner-preview { display: grid; grid-template-columns: 1fr 1fr 80px 80px; place-items: start; align-items: start; padding: 0 var(--template-padding); column-gap: 8px; width: auto; margin: 0 var(--template-padding); } div.planner-item div { font-size: 1.3rem; line-height: 2; border-radius: unset; background-color: unset; padding: unset; width: unset; margin: unset; } div.planner-preview div:first-of-type { display: none; } .planner-item { background-color: none; } .planner-item div:first-of-type { display: none; } .planner-info-symbol { width: 30px; } .planner-journey-item { border-top: 3px transparent dotted; border-bottom: 3px transparent dotted; box-sizing: border-box; } .active-leg-slice { /* background-color:#95ddfb; */ /* background-color:#FD7720; */ /* padding-bottom: var(--template-padding); */ padding-bottom: calc(var(--template-padding) * 2); border-bottom: 3px #c3bbbb dotted; border-top: 3px #c3bbbb dotted; } /* div.planner-section, div.planner-convo { display:none; } */ div.planner-journey-item div.leg-slice:first-of-type div.planner-section { display: flex !important; } div.show-preview-grid { display: grid; /* border-bottom: 2px #878484 dotted; */ } div.planner-changes { place-self: start; padding: 0 var(--template-padding); font-size: 1.3rem; line-height: 2; background-color: #fa6f6f; /* background-color: #95ddfb; */ border-radius: 3px; box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } div.planner-addons { display: flex; width: 100%; margin-top: var(--template-padding); padding: 0 var(--template-padding); } div.planner-details { font-size: 1.3rem; line-height: 2; } .planner-then { width: 70px; height: 70px; display: none; justify-content: center; flex-direction: column; align-items: center; border-radius: 35px; background-color: #95ddfb; position: relative; margin-top: var(--template-padding); margin-bottom: var(--template-padding); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } .planner-then div { font-size: 1.2rem; z-index: 3; } .planner-then:after { content: ""; height: 140px; top: -30px; /* z-index: 2; */ position: absolute; width: 10px; background-color: #95ddfb; display: none; } div.planner-details { margin-left: var(--template-padding); } div.show-preview { display: flex; } div.planner-headings { background-color: white; position: sticky; top: -1px; z-index: 4; } .planner-chevron { /* transform:rotate(-90deg); */ transform-origin: center center; height: 30px; /* margin-left:var(--template-padding); */ transition: all 0.3s ease; } .anim-chevron { transform: rotate(90deg); } div.planner-error-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: var(--panel); padding: 0 var(--template-padding); } div.planner-error-message { font-size: 1.3rem; line-height: 2; text-align: center; } svg.planner-reverse-fields-button, .planner-form-location { width: 30px; cursor: pointer; } svg.planner-reverse-fields-button { margin: 37px 0; position: absolute; right: 5px; } @media screen and (min-width: 400px) { svg.planner-reverse-fields-button { right: calc(50vw - 195px); } } @media screen and (min-width: 1100px) { svg.planner-reverse-fields-button { right: calc(50% - 195px); } } svg.planner-reverse-anim { animation: stagger 0.3s ease; transform-origin: center center; } div.planner-bubble { padding: var(--template-padding); } div.planner-item-bubble { box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); background-color: #95ddfb; border-radius: 3px; padding: var(--template-padding) calc(var(--template-padding)); } /* enhanced */ .journey-planner-preview-enhanced { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; column-gap: 8px; grid-template-rows:1fr min-content 1fr; row-gap: 13px; grid-template-areas: "info info departure arrival" "connections connections changes changes" "operator operator status status"; border-bottom: 3px #c5c2c2 dashed; margin: 8px var(--template-padding); margin-bottom: 0; padding-bottom: 21px; } div.jp-modal-item-container:last-of-type .planner-journey-item.journey-planner-preview-enhanced { border-bottom: none; padding: var(--template-padding) 0; padding-bottom: 21px; } .jp-grid-details { font-size: 1.3rem; line-height: 2; } .jp-grid-info { grid-area: info; align-self: center; display: flex; /* justify-content: space-around; */ align-items: center; } .jp-grid-info:hover { cursor: pointer; } .jp-grid-info svg { margin-left: 8px; } .jp-grid-arrival { grid-area: arrival; place-self: center; justify-self: start; } .jp-grid-departure { grid-area: departure; place-self: center; justify-self: start; } .jp-grid-connections { grid-area: connections; place-self: start; align-self: center; display: flex; align-items: center; } .jp-grid-changes { grid-area: changes; place-self: center; justify-self: start; } .jp-modal-content { display: none; /* max-width: 750px; */ margin: auto; /* margin-bottom: 55px; */ } .jp-modal-preview { display: grid; grid-template-columns: 50% 1fr 1fr; grid-template-areas:"plat plat plat" "dep time arrival" "operator status ."; grid-template-rows: min-content auto; row-gap: 8px; column-gap: 8px; padding: var(--template-padding); } @media screen and (max-width: 425px) { .jp-modal-preview { grid-template-areas:"plat plat plat" "dep time arrival" "operator status status"; } .jp-grid-status { width: 100% } .jp-modal-preview-status { width: 100%; } } .jp-modal-preview-origin { grid-area: dep; place-self: start; } .jp-modal-preview-departure { grid-area: time; justify-self: center; } .jp-modal-preview-arrival { grid-area: arrival; justify-self: center; } .jp-modal-preview-platform { grid-area: plat; place-self: start; } .jp-modal-preview-operator, .jp-modal-preview-status { grid-area: operator; place-self: start; padding: 1px var(--template-padding); border-radius: 3px; /* background-color: #fe761e; */ text-align: center; box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); } .jp-modal-preview-operator { align-self: center; display: flex; align-items: center; } .jp-modal-preview-status { grid-area: status; justify-self: center; align-self: center; box-shadow: none; padding: 0; padding-left: 8px; padding-top: 8px; } .active-leg { display: block; } .journey-info-svg { height: 25px; margin-right: 8px; margin-left: 8px; pointer-events: none; filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 0.2)); } .jp-grid-mode-icon { width: 25px; margin-left: 8px; border-bottom: 3px transparent solid; display: inline-flex; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); } .planner-connections { display: flex; align-items: center; justify-content: Center; width: 100%; /* margin: 34px 0; margin-bottom: 8px; */ height: 55px; } .planner-connections hr { /* margin: var(--template-padding); */ width: 100%; } .planner-connections .jp-grid-mode-icon { filter: none; } .jp-mode-icon-enhanced { position: absolute; background: white; } div.jp-grid-mode-icon:first-of-type { margin-left: 0; } .jp-grid-headings { display: grid; /* max-width: 750px; */ margin: auto; grid-template-columns: 2fr 1fr 1fr 1fr; margin: 0 var(--template-padding); column-gap: 8px; grid-template-areas: "date date departure arrival"; padding: var(--template-padding) 0; } .jp-grid-station { grid-area: station; place-self: center; justify-self: start; } /*.jp-modal-item-container:last-of-type .planner-journey-item .journey-planner-preview-enhanced {*/ /* border-bottom: none;*/ /*}*/ .jp-cancelled .jp-modal-preview-departure, .jp-cancelled .jp-modal-preview-origin, .jp-cancelled .jp-modal-preview-arrival { text-decoration: line-through; color: red; } .jp-grid-details.jp-grid-departure.jp-cancelled, .jp-grid-details.jp-grid-arrival.jp-cancelled { text-decoration: line-through; color: red; } .planner_modal_container .jp-grid-headings { grid-template-columns:50% 1fr 1fr; grid-template-areas: "station departure arrival"; } .planner_modal_container .jp-grid-headings .jp-grid-departure, .planner_modal_container .jp-grid-headings .jp-grid-arrival { justify-self: center; } .planner_container::-webkit-scrollbar, .planner_modal_container::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .planner_container, .planner_modal_container { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } @media screen and (min-width: 1100px) { .planner-wrapper { height: 100%; } .planner_container, .planner_modal_container { height: auto; } #panelPlanOutput { height: 100%; } .active-leg { padding-bottom: 3px; } } /* .active-leg div:last-of-type .planner-connections { margin-bottom:55px; } */ .jp-mode-svg { /* width:100%; */ height: 25px; pointer-events: none; } .planner-form-datetime { /* width: 80%; */ border: none; height: 50px; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); padding: var(--template-padding); /* margin-top: calc(var(--template-padding) * 2); */ border-radius: 5px; font-family: 'Nunito'; width: 250px; } .jp-grid-date { grid-area: date; align-self: center; justify-self: start; padding: 1px 13px; border-radius: 5px; font-weight: 600; background-color: #000; color: #fff; } .jp-grid-operator, .jp-grid-status { grid-area: operator; align-self: center; justify-self: start; /* width:100%; */ border-radius: 3px; padding: 1px var(--template-padding); margin-top: calc(var(--template-padding) / 2); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); text-align: center; font-size: 1.3rem; } .jp-grid-operator { display: flex; align-items: center; } .jp-grid-status { grid-area: status; box-shadow: none; padding: 8px 0; } .jp-time-override { display: flex; align-items: center; } .jp-time-svg { height: 25px; filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 0.2)); } .jp-time-override div { margin-left: 8px; font-size: 1.3rem; font-weight: 500; } .jp-icon-active { /* border-bottom:3px #fe761e solid; */ position: relative; } .jp-icon-active:after { content: ""; position: absolute; bottom: -7px; width: 3px; margin-left: calc(50% - 0.5px); height: 5px; left: 0; height: 4px; /* background-color: #fe761e; */ } .jp-icon-active:after { bottom: 0; margin-left: calc(50% - 10px); width: 100%; background-repeat: no-repeat; opacity: 0.3; height: 20px; bottom: -20px; background-image: url("data:image/svg+xml,%3Csvg data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M80 31.37 54.16 57.85a4.42 4.42 0 0 1-6.37-.06L22.46 30.88s-7.25-3.79-14 2.87L45.5 74.62a7 7 0 0 0 10.32.11L94 34.48s-.14-3-14-3.11Z' style='fill:none%3Bstroke:%23000%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-width:5px'/%3E%3C/svg%3E"); } .jp-bulletins-container { padding: 8px var(--template-padding); font-size: 1.1rem; line-height: 2; border-bottom: 1px #c5c2c2 solid; } .jp-bulletin-wrapper { display: grid; grid-template-columns: min-content auto; grid-column-gap: 13px; place-items: center; justify-items: start; } .jp-bulletins-item { font-size: 1.1rem; line-height: 2; } .jp-bulletins-item a { font-size: 1.1rem; line-height: 2; text-decoration: underline; color: #000; } .data-source-provider-text-jp { font-size: 14px; margin: 0; line-height: 1; } #planevents-interface { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: 50px; } @media only screen and (min-width: 1400px) { #planevents-interface { width: 100%; } } .upcoming-events-header-container { position: sticky; top: 0; background: white; z-index: 1; display: grid; -webkit-box-shadow: 0 2px 2px 0 #333; box-shadow: 0 2px 2px 0 #333; padding: calc(var(--template-padding) / 2) var(--template-padding); } @media only screen and (min-width: 500px) { .upcoming-events-header-container { grid-template-columns: 1fr 2fr; } } .events-header { border-bottom: 3px solid var(--colorTheme); } .dropdown-container { display: grid; grid-template-columns: 6fr 1fr; max-width: 400px; min-width: 300px; height: 40px; align-items: center; justify-items: start; position: relative; border-radius: 20px; border: 1px solid black; cursor: pointer; transition: all .1s ease; } .dropdown-border { border-radius: 20px 20px 0 0; border-bottom: 1px solid transparent; } .dropdown-menu, .dropdown-menu > svg { height: 20px; padding: 0 5px; } .dropdown-path { fill: white; stroke: black; stroke-width: 25px; transition: all .3s ease; } .dropdown-border > .dropdown-menu > svg > path { fill: silver; } .dropdown-menu { display: flex; align-items: center; flex-direction: row; justify-content: flex-start; width: 100%; } .location-svg-hide { visibility: hidden; opacity: 0; } .dropdown-container .dropdown-container-button { font-weight: bold; font-size: 22px; cursor: pointer; display: flex; right: initial; position: relative; height: 100%; align-items: center; top: revert; width: 100%; justify-content: center; transition: all .3s ease; visibility: hidden; opacity: 0; } .dropdown-items { width: calc(100% + 2px); left: -1px; top: 37px; padding-bottom: 0.8rem; position: absolute; background-color: white; min-width: 160px; overflow: auto; z-index: 1; max-height: 0; overflow-y: scroll; overflow-x: hidden; margin: 0; border: 1px solid black; border-top: 0; visibility: hidden; opacity: 0; transition: all .1s ease; } .dropdown-items > div { padding: var(--template-padding) 0 0 var(--template-padding); } .dropdown-container .dropdown-selector-visible { visibility: visible; opacity: 1; max-height: 300px; border-radius: 0 0 20px 20px; } .events-header { margin: 15px; } .events-container, .upcoming-events-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .plan-events-event_one-svg, .plan-events-event_two-svg { display: grid; padding: 20px; grid-template-columns: 120px 40px 120px; grid-row-gap: 15px; grid-template-areas: "svg line info" "venue venue venue" "start middle end"; justify-items: center; } .plan-events-event_two-svg { grid-template-areas: "home line away" "info info info" "venue venue venue" ". start ." } .upcoming-events-two, .upcoming-events-one { display: grid; padding: 15px; min-height: 280px; grid-template-columns: 115px 30px 115px; grid-template-rows: 2fr 1fr 1fr; grid-row-gap: 10px; justify-items: center; grid-template-areas: "svg svg svg" "info info info" "date date date"; } .upcoming-events-two { grid-template-areas: "home line away" "info info info" "date date date"; } .upcoming-events-events { position: relative; display: flex; align-items: center; justify-content: center; } .upcoming-events-popin { background-color: #FFF; height: 265px; display: none; padding: 0 var(--template-padding); border: var(--colorTheme) 3px solid; max-width: 300px; flex-direction: column; align-items: center; justify-content: center; position: absolute; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; animation: addPopin .3s forwards; width: 280px; text-align: center; border-radius: 5px; } .upcoming-events-popin-add { display: flex; } .upcoming-events-popin-remove { animation: removePopin 1s forwards; } .plan-events-event_one-svg > *, .plan-events-event_two-svg > *, .upcoming-events-one > *, .upcoming-events-two > * { pointer-events: none; } .plan-events-event_one-svg > svg, .plan-events-event_two-svg > svg, .upcoming-events-one > svg, .upcoming-events-two > svg { grid-area: svg; max-width: 115px; } .plan-events-event_two-svg > svg, .upcoming-events-two > svg { grid-area: auto; height: 110px; } .plan-events-start, .upcoming-events-start { grid-area: start; } .plan-events-middle { grid-area: middle; } .upcoming-events-start { display: flex; } .upcoming-events-date { grid-area: date; display: flex; } .plan-events-end, .upcoming-events-end { grid-area: end; } .plan-events-info { grid-area: info; display: flex; flex-direction: column; justify-content: center; text-align: center; } .plan-events-border { grid-area: line; border-left: 3px solid var(--colorTheme); } .plan-events-venue { grid-area: venue; text-align: center; } .dropdown-closebtn { font-weight: bold; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; position: absolute; right: 10px; top: 5px; } .event-selected { padding: 17px; border: 3px solid var(--colorTheme); border-radius: 5px; } #icon_autumn-rugby, #icon_bowls, #icon_gymnasticsArtistic, #icon_volleyball, #icon_wrestling { overflow: visible; } .animation_industrialaction_1, .animation_industrialaction_2 { animation: industrialaction1 0.8s ease; transform-origin: center; } .animation_industrialaction_3 { animation: industrialaction2 0.8s ease; transform-origin: center; } @keyframes industrialaction1 { 0% { transform: scale(0.9); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } @keyframes industrialaction2 { 0% { transform: scale(0.9); } 50% { transform: scale(1.30); } 100% { transform: scale(1); } } .animation_athletics_1, .animation_paraathletics_1 { animation: trackRun 1.3s ease; transform-origin: center; } @keyframes trackRun { 30% { transform: rotate(-30deg) } 60% { transform: translate3d(125%, 0, 0) rotate(0deg) } 100% { transform: translate3d(125%, 0, 0) rotate(0deg) } } .animation_badminton_1 { animation: spinOffRight 1.3s linear; transform-origin: center; } @keyframes spinOffRight { 30% { transform: translate3d(0%, 0%, 0); } 45% { transform: translate3d(10%, -20%, 0) rotateZ(-40deg); } 65% { transform: translate3d(10%, 10%, 0) rotateZ(-60deg); } 90% { transform: translate3d(200%, 20%, 0) rotateZ(200deg); } 100% { transform: translate3d(200%, 20%, 0) rotateZ(200deg); } } .animation_basketball_1 { animation: commonwealthBasketball .8s linear; transform-origin: center; transform-box: fill-box; } @keyframes commonwealthBasketball { 0% { transform: translate(0, -100px); } 20% { transform: translate(-30px, -10px) rotateZ(-150deg); } 40% { transform: translate(-35px, 70px) rotateZ(-300deg); } 60% { transform: translate(-40px, 90px) rotateZ(-300deg); } 100% { transform: translate(-40px, 90px) rotateZ(-300deg); } } .animation_bowls_1 { animation: rotate 1.3s linear; transform-origin: center; transform-box: fill-box; } @keyframes rotate { 0% { transform: translate3d(-40%, 0, 0) rotateZ(0deg); } 100% { transform: translate3d(0%, 0, 0) rotateZ(359deg); } } .animation_boxing_1 { animation: punchLeft 1.3s; transform-origin: center; } @keyframes punchLeft { 0% { transform: translate3d(0, 0, 0); } 30% { transform: translate3d(-10%, 10%, 0); } 45% { transform: translate3d(12%, 0, 0); } 80% { transform: translate3d(0, 0, 0); } } .animation_cricket_1 { animation: wicketHitRight 1.3s; transform-origin: center; } @keyframes wicketHitRight { 20% { transform: translate3d(0, -10%, 0) rotateZ(-130deg); } 30% { transform: translate3d(10%, -10%, 0) rotateZ(-130deg); } 40% { transform: translate3d(0, 0, 0) rotateZ(-10deg); } } .animation_cricket_2 { animation: cricketBowl 1.3s; transform-origin: center; } @keyframes cricketBowl { 3% { transform: translate3d(0, -10%, 0); } 90% { transform: translate3d(150%, 170%, 0); } 100% { transform: translate3d(200%, 200%, 0); } } .animation_trackcycling_1 { animation: cycling 1.3s; } .animation_mountainbiking_1 { animation: cycling 1.3s; } .animation_timetrial_1 { animation: cycling 1.3s; } .animation_roadcycling_1 { animation: cycling 1.3s; } @keyframes cycling { 0% { transform: translateX(-60%); } 20% { transform: translateX(-60%); } 50% { transform: translateX(0%); } 100% { transform: translateX(0%); } } .animation_diving_1 { animation: dive 1.3s; transform-origin: center; transform-box: fill-box; } @keyframes dive { 0% { transform: translate3d(0%, -50%, 0) rotate(-85deg); } 50% { transform: translate3d(0%, 300%, 0) rotate(-85deg); } 100% { transform: translate3d(0%, 300%, 0) rotate(-85deg); } } @keyframes wave { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(5%, -5%, 0); } 100% { transform: translate3d(0, 0, 0); } } .animation_gymnasticsArtistic_1 { animation: commonwealthGymnasticsArt 1.3s ease; transform-origin: center; transform-box: fill-box; } @keyframes commonwealthGymnasticsArt { 0% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } 60% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } } .animation_gymnasticsRhythmic_1 { animation: Rhythmic .8s linear; transform-origin: center; transform-box: fill-box; } @keyframes Rhythmic { 0% { transform: translate(0px, 0%); } 20% { transform: translate(-40%, 0%) rotateZ(-180deg); } 60% { transform: translate(20%, 0%) rotateZ(-360deg); } 100% { transform: translate(20%, 0%) rotateZ(-360deg); } } .animation_hockey_2 { animation: hockeyStick 1.3s; transform-origin: center; } @keyframes hockeyStick { 20% { transform: translate3d(0px, 0px, 0); } 30% { transform: translate3d(15px, 5px, 0); } } .animation_hockey_1 { animation: hockeyBall 1.3s; transform-origin: center; } @keyframes hockeyBall { 30% { transform: translate3d(0, 0, 0); } 80% { transform: translate3d(150px, 100px, 0); } 100% { transform: translate3d(150px, 100px, 0); } } .animation_judo_1 { animation: judoThrow .8s linear; transform-origin: center; transform-box: fill-box; } @keyframes judoThrow { 0% { transform: scale(1) } 60% { transform: scale(0.5) } 100% { transform: scale(1) } } .animation_netball_1 { animation: netball 0.8s ease; transform-origin: center; } @keyframes netball { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0%, 10%, 0) rotateZ(15deg); } } .animation_powerlifting_1 { animation: powerlifting 0.8s ease; transform-origin: center; } @keyframes powerlifting { 1% { transform: translate3d(0, 20%, 0); } 70% { transform: translate3d(0, -15%, 0); } 90% { transform: translate3d(0, 0, 0); } } .animation_autumn-rugby_1 { animation: animation_rugby 1.3s linear; transform-origin: center; transform-box: fill-box; } @keyframes animation_rugby { 40% { transform: translate3d(0, -10%, 0) rotateZ(-180deg); } 60% { transform: translate3d(0, -20%, 0) rotateZ(-360deg); } 80% { transform: translate3d(0, 0, 0) rotateZ(-360deg); } 100% { transform: translate3d(0, 0, 0) rotateZ(-360deg); } } .animation_squash_1 { animation: squashCourt 1.3s; transform-origin: center; } @keyframes squashCourt { 0% { transform: translate3d(-20%, 30%, 0); } 30% { transform: translate3d(-50%, 0, 0); } 100% { transform: translate3d(5%, 10%, 0); } } #icon_squash { padding: 10%; } .animation_swimming_1 { animation: swimming1 1.3s ease; transform-origin: center; } @keyframes swimming1 { 0% { transform: translate3d(0, 0, 0); } 30% { transform: translate3d(0, -5%, 0); } 80% { transform: translate3d(0, 8%, 0); } 100% { transform: translate3d(0, 0, 0); } } .animation_swimming_2 { animation: swimming2 1.3s ease; transform-origin: center; } @keyframes swimming2 { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -3%, 0); } 100% { transform: translate3d(0, 0, 0); } } .animation_tableTennis_1 { animation: tableTennisBat 1.3s; transform-origin: center; } .animation_tableTennis_2 { animation: tableTennisBall 1.3s; transform-origin: center; } @keyframes tableTennisBat { 0% { transform: translate3d(0, 0, 0); } 30% { transform: translate3d(-40%, -5%, 0); } 60% { transform: translate3d(30%, 40%, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes tableTennisBall { 0% { transform: translate3d(200%, 0, 0); } 40% { transform: translate3d(-15%, -10%, 0); } 60% { transform: translate3d(200%, -15%, 0); } 100% { transform: translate3d(200%, -15%, 0); } } .animation_triathalon_1 { animation: triathalon 1.3s; } @keyframes triathalon { 0% { transform: translateX(-30%); } 20% { transform: translateX(-30%); } 50% { transform: translateX(0%); } } .animation_volleyball_1 { animation: volleyball .8s linear; transform-origin: center; transform-box: fill-box; } @keyframes volleyball { 0% { transform: translate(0px, 0%); } 20% { transform: translate(0px, -30%) rotateZ(-150deg); } 60% { transform: translate(0px, 20%) rotateZ(-400deg); } 100% { transform: translate(0px, 20%) rotateZ(-400deg); } } .animation_weightlifting_1 { animation: commonwealthLifting 0.8s ease; transform-origin: center; } @keyframes commonwealthLifting { 0% { transform: translate3d(0, 100%, 0) rotate(45deg); } 70% { transform: translate3d(0, -15%, 0) rotate(45deg); } 90% { transform: translate3d(0, 0, 0); } } .animation_wheelchairBasketball_6 { animation: commonwealthBasketball 0.8s ease; transform-origin: center; } .animation_wrestling_1, .animation_wrestling_2, .animation_wrestling_3, .animation_wrestling_4, .animation_wrestling_5 { animation: commonwealthWrestling 1.3s linear; transform-origin: center; } @keyframes commonwealthWrestling { 20% { transform: rotateZ(0deg) translate3d(5%, 0, 0); } 40% { transform: rotateZ(-20deg) translate3d(5%, 0, 0); } 60% { transform: rotateZ(-20deg) translate3d(-15%, 20%, 0); } } .event-schedule-title-venue-popin { animation: visiblePopin 2.2s; } @keyframes visiblePopin { 0% { transform: translateX(-200%); } 10% { transform: translateX(-200%); } 20% { transform: translateX(0%); } 50% { transform: translateX(0%); } 70% { transform: translateX(0%); } 90% { transform: translateX(-200%); } 100% { transform: translateX(-200%); } } @keyframes addPopin { 0% { transform: translateX(-300%); } 10% { transform: translateX(-300%); } 100% { transform: translateX(0%); } } @keyframes removePopin { 0% { transform: translateX(0%); } 90% { transform: translateX(-500%); } 100% { transform: translateX(-500%); } } @media only screen and (min-width: 1100px) { .event-schedule-title-venue { max-width: 400px; } } .jp-shuttle-bus-svg { width: 20px; margin-left: 8px; } .TOCGW .app #panelPicker #whooshStations form + button { background: var(--gwr); } /* .TOCGW .app header .header_seat, */ .TOCGR .app header .header_seat { display: none; } .TOCAW .app header .header_seat { display: none; } .TOCGW .app header .header_seat .icon_svg .surveyDefault_circle_big, .TOCGW .app header .header_seat .icon_svg .surveyDefault_circle_small { fill: var(--gwr); } .language-toggle-container { display: none; } /* init testing for toggle ui */ .TOCGW .app .above-header-slot-container .language-toggle-container, .TOCNT .app .above-header-slot-container .language-toggle-container, .TOCGC .app .above-header-slot-container .language-toggle-container, .TOCRT .app .above-header-slot-container .language-toggle-container, .TOCES .app .above-header-slot-container .language-toggle-container, .TOCSW .app .above-header-slot-container .language-toggle-container, .TOCAW .app .above-header-slot-container .language-toggle-container { /* height: var(--lang-height); */ overflow-x: scroll; width: 155px; height: 100%; /* bordeR: 1px black solid; border-radius: 30px; */ text-align: center; display: flex; position: relative; flex-direction: row-reverse; /* flex-direction: column; */ /* align-items: center; */ z-index: 55; /* justify-content: center; */ margin-top: 0; margin-right: 20px; align-self: start; padding: 0 5px; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ /* -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); */ } .TOCGW .app .above-header-slot-container .language-toggle-container-no-scroll, .TOCNT .app .above-header-slot-container .language-toggle-container-no-scroll, .TOCGC .app .above-header-slot-container .language-toggle-container-no-scroll, .TOCRT .app .above-header-slot-container .language-toggle-container-no-scroll, .TOCSW .app .above-header-slot-container .language-toggle-container-no-scroll, .TOCES .app .above-header-slot-container .language-toggle-container-no-scroll, .TOCAW .app .above-header-slot-container .language-toggle-container-no-scroll { width: 100%; } .TOCGW .app .above-header-slot-container .language-toggle-container-scroll, .TOCNT .app .above-header-slot-container .language-toggle-container-scroll, .TOCGC .app .above-header-slot-container .language-toggle-container-scroll, .TOCRT .app .above-header-slot-container .language-toggle-container-scroll, .TOCSW .app .above-header-slot-container .language-toggle-container-scroll, .TOCES .app .above-header-slot-container .language-toggle-container-scroll, .TOCAW .app .above-header-slot-container .language-toggle-container-scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent 100%); } .arrow-language, #arrow-language-right.arrow-language-remove, #arrow-language-left.arrow-language-remove { display: none; } .TOCGW .app .above-header-slot-container .arrow-language, .TOCRT .app .above-header-slot-container .arrow-language, .TOCSW .app .above-header-slot-container .arrow-language, .TOCES .app .above-header-slot-container .arrow-language, .TOCAW .app .above-header-slot-container .arrow-language { display: flex; } .language-toggle-container::-webkit-scrollbar { display: none; } .language-toggle-dropdown { display: none; } .TOCGW .app .above-header-slot-container .language-toggle-dropdown, .TOCRT .app .above-header-slot-container .language-toggle-dropdown, .TOCES .app .above-header-slot-container .language-toggle-dropdown, .TOCSW .app .above-header-slot-container .language-toggle-dropdown, .TOCAW .app .above-header-slot-container .language-toggle-dropdown { /* position: absolute; */ display: flex; opacity: 1; visibility: visible; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; align-items: center; /* left: 100px; */ flex-direction: row; height: 100%; overflow-x: visible; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* margin-right: 8px; */ /* width: calc(100vw - 100px); */ } @media screen and (min-width: 1100px) { .TOCGW .app .above-header-slot-container .language-toggle-dropdown, .TOCRT .app .above-header-slot-container .language-toggle-dropdown, .TOCES .app .above-header-slot-container .language-toggle-dropdown, .TOCSW .app .above-header-slot-container .language-toggle-dropdown, .TOCAW .app .above-header-slot-container .language-toggle-dropdown { overflow-x: unset; } } .language-toggle-dropdown::-webkit-scrollbar, .language-toggle-dropdown::-ms-scrollbar, .language-toggle-display::-webkit-scrollbar, .language-toggle-display::-ms-scrollbar { display: none; } .language-toggle-dropdown:hover { cursor: pointer; } .language-toggle-dropdown div { padding: 0 var(--template-padding); display: flex; height: 100%; border: 1px black solid; flex-direction: column; align-items: center; justify-content: Center; margin-left: 8px; height: 30px; width: 30px; border-radius: 30px; background-color: white; /* -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); */ } /* .language-toggle-dropdown div { padding: var(--template-padding) 0; width: 100%; } */ /* .language-toggle-dropdown div:first-of-type { margin-top: 8px; border-bottom: 1px black solid; } */ .language-toggle-selection { display: flex; align-items: center; /* width: 100%; */ height: var(--lang-height); width: var(--lang-height); /* max-width: 100px; */ border: 1px black solid; align-self: start; border-radius: var(--lang-height); /* -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); */ /* DAS-949 */ background-color: #f65656; display: none; } .language-toggle-selection:hover { cursor: pointer; } .language-toggle-selection div { padding-left: 8px; padding-right: 8px; font-size: 12px; } .language-toggle-svg { /* width: 30px; */ height: 85%; margin-left: 8px; } .language-toggle-svg { display: none; } .language-toggle-svg circle, .language-toggle-svg path { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; } .language-toggle-display { opacity: 1; visibility: visible; fill: var(--gwr); -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; } .multilingual { display: inline; font-size: 100%; } .mlcontent { /*width: 100%;*/ /*background-color: palegreen;*/ /*border: 1px solid red;*/ /*display: none;*/ /*visibility: hidden;*/ } #panelFeedback mlcontent { height: 100%; } .strInteral { display: none; visibility: hidden; } .above-header-slot-container { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100vw; padding: 3px 0; /* border-radius: 0 0 8px 8px; */ grid-area: lang; height: var(--lang-height); z-index: 1; background: white; } /* DAS-949 activate toggle for GWR */ /* .TOCGW .app .above-header-slot-container { display:flex; } */ .above-header-date { margin-left: 8px; margin-top: 3px; white-space: nowrap; } .above-header-date-hide { display: none; } .language-toggle-dropdown > .active-lang-selection { background-color: var(--gwr); color: #FFF; } /* .TOCRT > .app > .above-header-slot-container > .language-toggle-container > .language-toggle-dropdown > .active-lang-selection { background-color: var(--colorTheme); } */ /* .TOCSW > .app > .above-header-slot-container > .language-toggle-container > .language-toggle-dropdown > .active-lang-selection { background-color: #0092cb; } */ .main_header div h1 multilingual, .main_header div h2 multilingual { font-size: 1.5rem; margin: 0; } @media screen and (min-width: 1100px) { .above-header-slot-container { width: unset; /* border-bottom:1px black solid; */ } } .departures-cancelled { display: none; color: red; } .departures-cancelled-break { display: none; } /* #panelNationalrail div .main_item_container .main_item .main_item_station p .departures-cancelled, #panelNationalrail div .main_item_container .main_item .main_item_station p .departures-cancelled-break, */ #panelNationalrail .departures-cancelled, #panelNationalrail .departures-cancelled-break, #panelOsi .departures-cancelled, #panelOsi .departures-cancelled-break, #panelTube .departures-cancelled, #panelTube .departures-cancelled-break, #panelTram .departures-cancelled, #panelTram .departures-cancelled-break, #panelRiver .departures-cancelled, #panelRiver .departures-cancelled-break, #panelBuses .departures-cancelled, #panelBuses .departures-cancelled-break, #panelDlr .departures-cancelled, #panelDlr .departures-cancelled-break { display: unset; } .rental-no-data { display: none; } .gc-feedback-banner-container, .sw-feedback-banner-container, .gw-offers-banner-container, .coronation-banner-container { background-color: var(--gc); width: 100%; height: 100%; border-radius: 3px; display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; } .sw-feedback-banner-container { background-color: var(--sw); } .gw-offers-banner-container, .coronation-banner-container { background-color: var(--gwr); display: grid; grid-template-areas: "text button"; justify-content: center; } .coronation-banner-container { background-color: var(--nr); } .gc-feedback-anchor, .sw-feedback-anchor, .gw-offers-anchor, .coronation-anchor { height: 100%; width: 100%; } .gc-feedback-banner-container p, .sw-feedback-banner-container p, .gw-offers-banner-container p, .coronation-banner-container p { color: #FFF; } .sw-feedback-banner-container p, .gw-offers-banner-container p, .coronation-banner-container p { text-align: center; } .gw-offers-banner-container p, .coronation-banner-container p { padding: 2px; } .sw-feedback-banner-container p multilingual, .gw-offers-banner-container p multilingual, .coronation-banner-container p multilingual { font-size: 14px; } .sw-feedback-banner-top, .gw-offers-banner-top, .coronation-banner-top { display: flex; flex-direction: row; align-items: center; } .gw-offers-banner-top, .coronation-banner-top { grid-area: text; max-width: 300px; } .gc-feedback-banner-bottom, .sw-feedback-banner-bottom, .gw-offers-banner-bottom, .coronation-banner-bottom { background: #000; border-radius: 30px; color: #FFF; padding: 3px calc(var(--template-padding) * 2); display: flex; align-items: center; } .coronation-banner-bottom { background: unset; } .sw-feedback-banner-bottom, .gw-offers-banner-bottom, .coronation-banner-bottom { justify-content: center; line-height: 12px; width: 90%; max-width: 450px; } .gw-offers-banner-bottom, .coronation-banner-bottom { grid-area: button; } @media screen and (min-width: 415px) { .sw-feedback-banner-bottom, .gw-offers-banner-bottom, .coronation-banner-bottom { width: 100%; line-height: revert; } } .gc-feedback-banner-svg, .sw-feedback-banner-svg { height: 25px; margin-right: 8px; } .sw-feedback-banner-svg { grid-area: svg; margin: 0; } .sw-feedback-banner-svg > path { fill: white; } @media screen and (min-width: 1100px) { .gw-offers-banner-container p multilingual, .coronation-banner-container p multilingual { font-size: 20px; } } @keyframes scaleTablet { 0% { transform: scale(3); } 100% { transform: translate3d(0, -9.5vh, 0) scale(1); } } @-webkit-keyframes scaleTablet { 0% { transform: scale(3); } 100% { transform: translate3d(0, -9.5vh, 0) scale(1); } } @keyframes scaleMob { 0% { transform: scale(3); } 100% { transform: translate3d(0, -9.5vh, 0) scale(0.9); } } @-webkit-keyframes scaleMob { 0% { transform: scale(3); } 100% { transform: translate3d(0, -9.5vh, 0) scale(0.9); } } @-webkit-keyframes scaleDesktop { 0% { transform: scale(3); } 100% { transform: translate3d(8.5em, -9.5vh, 0) scale(0.8); } } @keyframes scaleDesktop { 0% { transform: scale(3); } 100% { transform: translate3d(8.5em, -9.5vh, 0) scale(0.8); } } .header_logo svg.svg-scale { top: 10vh; position: fixed; transform: scale(3); height: 70px; max-width: 30%; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; } @keyframes fadeOutUp { 0% { opacity: 1; } 80% { opacity: 0.7; transform: translate3d(0, calc(-50vh + 70px), 0) scale(0.5); } 100% { opacity: 0; transform: translate3d(0, calc(-50vh + 70px), 0) scale(0.5); } } @keyframes fadeOutUpDesktop { 0% { opacity: 1; } 80% { opacity: 0.7; transform: translate3d(120px, calc(-50vh + 70px), 0) scale(0.5); } 100% { opacity: 0; transform: translate3d(120px, calc(-50vh + 70px), 0) scale(0.5); } } @media screen and (min-width: 1200px) { .header_logo svg.svg-scale { left: 0; margin: auto; right: 17em; } .svg-scale-down { -webkit-animation: scaleDesktop 1.3s ease forwards; animation: scaleDesktop 1.3s ease forwards; } } /* RTIV2 STYLING */ .journey-calling-point-container { /* display:flex; flex-wrap: nowrap; padding: 0 var(--template-padding); display:grid; grid-template-columns: min-content min-content auto; */ list-style-type: none; } .journey-calling-point-inner { display: flex; flex-wrap: nowrap; /* align-items:flex-start; */ padding: var(--template-padding) 0; margin: 0 var(--template-padding); display: grid; grid-template-columns: min-content min-content auto; border-bottom: 1px #d4cbcb solid; } .journey-calling-point-container:last-of-type .journey-calling-point-inner { border-bottom: none; } .journey-calling-point-info { display: flex; align-items: center; flex-direction: column; justify-content: flex-start; width: 25px; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transform-origin: center center; -webkit-transform-origin: center center; } .journey-calling-point-info { cursor: pointer; } .journey-calling-point-station-svg { position: relative; margin-top: 3px; } .journey-calling-point-station-svg svg { filter: drop-shadow(0px 2px 2px #878080); } .journey-line-background { height: calc(100% + 3px + var(--template-padding)); width: 10px; left: 20px; position: absolute; box-shadow: 0 0 4px #878080; /* top:0; */ top: 20px; } @media screen and (min-width: 1100px) { .journey-line-background { height: calc(100% + 6px + var(--template-padding)); } } .journey-calling-point-container:last-of-type .journey-calling-point-station-svg .journey-line-background { opacity: 0; } .journey-calling-point-details { display: grid; grid-template-columns:2fr 1fr 1fr min-content; grid-template-rows:min-content min-content auto; grid-template-areas:"station station station time" "status status status ." "stationinfo stationinfo stationinfo stationinfo" "ehc ehc ehc ehc"; row-gap: 5px; column-gap: 3px; align-items: start; flex-grow: 1; } @media only screen and (min-width: 767px) { .journey-calling-point-details { grid-template-areas: "station ehc ehc time" "status ehc ehc ." "stationinfo ehc ehc ." "stationinfo ehc ehc ."; grid-template-columns: 2fr 1fr 2fr min-content; } } .journey-calling-point-status { padding: 3px 0; } .journey-calling-point-station-name { grid-area: station; font-size: 1.6rem; font-weight: 600; } .journey-calling-point-station-name:hover { cursor: pointer; } .journey-calling-point-station-arrival { grid-area: time; height: 15px; font-size: 1.8rem; font-weight: 600; } .journey-calling-point-station-arrival s { font-size: 1.8rem; font-weight: 600; } .journey-calling-point-station-arrival span { font-size: 1.8rem; font-weight: 600; } .journey-calling-point-station-info { grid-area: status; } .journey-calling-point-enhanced-info { /* display: none; */ grid-area: ehc; max-width: 400px; } .journey-calling-point-enhanced-display { display: block; /* padding-bottom: 8px; */ } @media only screen and (min-width: 767px) { .journey-calling-point-enhanced-info { display: block; } .journey-calling-point-enhanced-display { padding-bottom: 0; } } .journey-top-container { display: inline-flex; flex-wrap: wrap; padding: 0 var(--template-padding); justify-content: space-between; width: 100%; align-items: center; display: none; } .journey-close-journey { display: flex; align-items: center; } .journey-close-journey span { margin-right: 8px; } .rtiv2-close-journey { width: 25px; } /* .journey-last-updated { margin-bottom: 5px; } */ .journey-share-container { display: none; } .journey-next-stop { width: 100%; font-size: 1.1rem; font-weight: 600; padding-top: 7px; padding-bottom: 8px; } .journey-calling-point-dropdown { display: none; padding: 0; margin: 0; list-style-type: none; } .journey-calling-point-dropdown:hover { cursor: pointer; } .journey-calling-point-dropdown li { font-size: 1.2rem; font-weight: 500; padding: 3px 2px; border-radius: 3px; padding-left: 8px; margin-top: 8px; display: flex; align-items: center; } .journey-cp-icon { height: 20px; margin-right: 8px; } .journey-select-form-display { display: block; border-radius: 3px; border: 1px var(--gwr) solid; border-top: none; margin-top: -40px; padding-top: 40px; box-shadow: 0 1px 3px #878080; padding-bottom: 5px; } .journey-calling-point-connections { display: none; } .journey-calling-point-select { font-size: 1.2rem; font-weight: 500; border: 1px var(--gwr) solid; padding: 3px 2px 3px 8px; border-radius: 3px; margin-top: 8px; display: flex; align-items: center; justify-content: flex-start; height: 40px; box-shadow: 0 1px 3px #878080; position: relative; } .journey-calling-point-select:hover { cursor: pointer; } .journey-option-hide { display: none; } .journey-rtiv2-button { display: none; padding: 13px 8px; font-size: 1.3rem; font-weight: 300; text-align: center; background: none; border: none; width: 100%; margin-top: 13px; /* border: 1px var(--gwr) solid; */ box-shadow: 0 1px 3px #878080; border-radius: 5px; color: #FFF; } .TOCGW .app #panelJourney .panelForlineDiagram .journey-rtiv2-button { background: var(--gwr); } .TOCNT .app #panelJourney .panelForlineDiagram .journey-rtiv2-button { background: var(--northern); } .TOCGC .app #panelJourney .panelForlineDiagram .journey-rtiv2-button { background: var(--gc); } .TOCRT .app #panelJourney .panelForlineDiagram .journey-rtiv2-button { background: var(--nr); } .TOCSW .app #panelJourney .panelForlineDiagram .journey-rtiv2-button { background: var(--nr); } .TOCES .app #panelJourney .panelForlineDiagram .journey-rtiv2-button { background: var(--es); } .TOCAW .app #panelJourney .panelForlineDiagram .journey-rtiv2-button { background: var(--tfw); } .journey-rtiv2-button:hover { cursor: pointer; } .journey-option-visible { display: block; } .journey-calling-point-connection-toc { display: flex; align-items: center; /* color: white; */ margin-top: 13px; /* flex-wrap: wrap; */ width: auto; max-width: unset; } .journey-calling-point-connection-toc div { padding: 3px 5px; } .journey-calling-point-connection-toc-name { font-size: 1.2rem; font-weight: 600; border-radius: 3px; box-shadow: 0 1px 3px #878080; display: block; } .journey-calling-point-connection-status { font-size: 1rem; font-weight: 300; } .journey-calling-point-station-status { grid-area: status; border-bottom: 1px #d4cbcb dotted; } .journey-calling-point-station-status div { padding-bottom: 7px; font-weight: 300; align-items: center; display: flex; /* width:100%; */ } .rtiv2-platform-icon { border-radius: 5px; min-height: 20px; min-width: 20px; display: flex; align-items: center; font-size: 1.1rem; background-color: black; color: white; margin-right: 8px; padding-bottom: unset !important; justify-content: center; flex-basis: fit-content; padding: 0 0.5em 0 0.5em; } .journey-calling-point-station-status .rtiv2-platform-text { padding-bottom: 0; } /* TODO DIRTY FIX (SS) */ .journey-calling-point-station-status-HIDE { display: none; } .rtiv2-platform-container, .divide-announcement { display: flex; align-items: center; } div.divide-announcement { width: 100%; display: grid; grid-template-columns: max-content auto max-content; align-items: center; max-width: fit-content; border: solid 2px; padding-bottom: 0px; border-radius: 12px; padding: 8px 0; } .divide-announcement-svg { width: 20px; margin-right: 8px; margin-left: 8px; } svg.rtiv2-time-svg { height: 20px; margin-right: 8px; filter: drop-shadow(0px 0px 0.5px #878080); } .rtiv2-chevron-down { height: 20px; margin-right: 8px; position: absolute; right: 0; } div.panelForlineDiagram .rtiv2-eurostarsymbol { width: 170px !important; height: 56px !important; margin-top: 13px; display: block; background-size: cover; margin-left: 27px; border-radius: 8px; } .journey-calling-point-preview-info { grid-area: stationinfo; width: 100%; } .journey-calling-point-preview-info-facilities, .journey-calling-point-preview-info-addOn { width: 100%; display: grid; grid-template-columns: max-content auto max-content; align-items: center; max-width: fit-content; } .journey-calling-point-preview-info-facilities { border: solid 2px; border-radius: 12px; padding: 0.5rem; } .station-information-div { margin-top: 10px !important; } .journey-calling-point-preview-info-facilities:hover { cursor: pointer; } .journey-calling-point-preview-info-addOn { margin-top: 5px; font-weight: 300; } .journey-calling-point-preview-info-addOn div { padding-right: 8px; } .journey-three-columns { grid-template-columns: max-content max-content auto max-content; position: relative; } .journey-four-columns { grid-template-columns: 25px min-content min-content auto; } .journey-calling-point-preview-info-facilities div { font-weight: 300; margin-right: 8px; } .journey-calling-point-preview-info-facilities { margin-top: 5px; } .journey-calling-point-preview-info-facilities:first-of-type { margin-top: 0; } .rtiv2-mini-icon { grid-area: unset; width: 20px; margin-right: 8px; filter: drop-shadow(0px 0px 0.5px #878080); } @media screen and (min-width: 767px) { .journey-calling-point-connections, .journey-rtiv2-button { display: block; } .journey-calling-point-select { display: none; } .journey-select-form-display { display: none; } /* .journey-calling-point-details { grid-template-rows: min-content 30px auto auto; } */ } .journey-calling-point-connections-displayAll { display: block; } .connections-hover:hover { cursor: pointer; } @media screen and (min-width: 767px) { .connections-hover { display: none; } } .icon_customJourney g { transition: opacity 0.2s ease; -webkit-transition: opacity 0.2s ease; } .journey-selected-close-submenu { opacity: 0; } /* .journey-inner-icon-hide { opacity: 0; } */ .journey-inner-icon-display { opacity: 1; } div.journey-v2-heading { position: sticky; padding-top: 8px; padding-left: var(--template-padding); padding-right: var(--template-padding); top: 0; background: white; z-index: 2000; border-top: 1px #d4cbcb solid; } div.journey-v2-heading h1 { /* padding: var(--template-padding); margin-top: 8px; */ font-size: 1.6rem; } .journey-last-updated { margin-top: 8px; padding-bottom: 8px; } .journey-calling-point-container:first-of-type .journey-calling-point-inner { padding-top: 8px; } @media screen and (min-width: 1100px) { .journey-calling-point-connection-toc:first-of-type { margin-top: 0; } } .loading-page__container > svg { max-width: 200px; } .loading-page__container { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; background-color: white; z-index: 1000; display: flex; flex-direction: column; } .use-local-station { display: none !important; } .journey-selected-close-submenu line { stroke-width: 3px; stroke: black; stroke-linecap: round; } #journey-selected-close-1 line, #journey-selected-close-3 line, #journey-selected-close-4 line, #journey-selected-close-5 line, #journey-selected-close-6 line { stroke: #fff; } .single-bad-connection { display: none; } .rtiv2-toggle-icon { filter: drop-shadow(0px 2px 1px grey); -webkit-filter: drop-shadow(0px 2px 1px grey); } .rtiv2-toggle-icon circle { transform-origin: center center; transition: all 0.5s ease; } .TOCGW .app #panelJourney .rtiv2-toggle-icon path { fill: var(--gwr); } .TOCGC .app #panelJourney .rtiv2-toggle-icon path { fill: var(--gc); } .TOCRT .app #panelJourney .rtiv2-toggle-icon path { fill: var(--nr); } .TOCNT .app #panelJourney .rtiv2-toggle-icon path { fill: var(--northern); } .TOCSW .app #panelJourney .rtiv2-toggle-icon path { fill: var(--sw); } .TOCES .app #panelJourney .rtiv2-toggle-icon path { fill: var(--es); } .TOCAW .app #panelJourney .rtiv2-toggle-icon path { fill: var(--tfw); } .TOCGW .app #panelJourney .rtiv2-toggle-icon circle:first-of-type { stroke: var(--gwr); } .TOCGC .app #panelJourney .rtiv2-toggle-icon circle:first-of-type { stroke: var(--gc); } .TOCRT .app #panelJourney .rtiv2-toggle-icon circle:first-of-type { stroke: var(--nr); } .TOCNT .app #panelJourney .rtiv2-toggle-icon circle:first-of-type { stroke: var(--northern); } .TOCSW .app #panelJourney .rtiv2-toggle-icon circle:first-of-type { stroke: var(--sw); } .TOCES .app #panelJourney .rtiv2-toggle-icon circle:first-of-type { stroke: var(--es); } .TOCAW .app #panelJourney .rtiv2-toggle-icon circle:first-of-type { stroke: var(--tfw); } /* .TOCGW .app #panelJourney .rtiv2-toggle-icon circle:last-of-type { fill:var(--gwr); } .TOCGC .app #panelJourney .rtiv2-toggle-icon circle:last-of-type { fill:var(--gc); } .TOCRT .app #panelJourney .rtiv2-toggle-icon circle:last-of-type { fill:var(--nr); } .TOCNT .app #panelJourney .rtiv2-toggle-icon circle:last-of-type { fill:var(--northern); } .TOCSW .app #panelJourney .rtiv2-toggle-icon circle:last-of-type { fill:var(--sw); } */ @media screen and (min-width: 767px) { .single-bad-connection { display: flex; } .preview-connection-bad { display: none; } /* .rtiv2-toggle-icon { opacity: 0; } */ } .journey-v2-connection-flip { transform: rotate(180deg); -webkit-transform: rotate(180deg); filter: drop-shadow(0px -2px 1px grey); -webkit-filter: drop-shadow(0px -2px 1px grey); } @keyframes scatterEffect { from { stroke-dasharray: 20; } to { stroke-dasharray: unset; transform: scale(0.2); } } @keyframes scatterEffectCircle { from { stroke-dasharray: 20; transform: scale(1); } 50% { transform: scale(0.8); } to { stroke-dasharray: 1; transform: scale(1); } } .journey-v2-connection-flip circle { animation: scatterEffectCircle 0.5s linear forwards; } /* .journey-v2-connection-flip circle:first-of-type { animation:scatterEffect 0.5s linear forwards; } */ /* .journey-v2-connection-flip circle:last-of-type { transform:scale(2); } */ .app #panelTube div .main_item_container .main_item .main_item_station p .icon_capacity { display: none; } .lumo { color: #fff; background-color: #1e00f8; } .grn { color: #000; background-color: #ffb300; } .rtiv2-capacity-pie { height: 20px; width: 20px; border: 1px black solid; margin-right: 8px; border-radius: 20px; overflow: hidden; position: relative; } .hideFooter { transition-timing-function: linear; animation: moveFooter .8s ease; -webkit-animation: moveFooter .8s ease; transform-origin: center; animation-fill-mode: forwards; } .returnFooter { transition-timing-function: linear; animation: returnFooter .8s ease; -webkit-animation: returnFooter .8s ease; transform-origin: center; animation-fill-mode: forwards; } .mobileApp { grid-template-rows: 0 0 auto auto; } .mobileApp > .singlefullitem { overflow: auto; } .mobileApp > .singlefullitem > #panelPlan, .mobileApp > .singlefullitem > #panelCompensation, .mobileApp > .singlefullitem > #panelPicker, .mobileApp > .singlefullitem > #panelTellus, .mobileApp > .singlefullitem > #panelFeedback { height: auto; } .mobileApp .singlefullitem #panelJourney { height: 100%; } .mobileApp > .singlefullitem > .panelSizer > #whooshStations, .mobileApp > .singlefullitem > .panelSizer > #panelPlanInput, .mobileApp > .singlefullitem > .panelSizer > #panelJourneypicker, .mobileApp > .singlefullitem > .panelSizer > .main_item_tell, .mobileApp > .singlefullitem > .panelSizer > #feedback-multi-step-survey-container, .mobileApp > .singlefullitem > .panelSizer > #feedback-multi-step-container { margin-bottom: 150px; } .mobileApp > .above-header-slot-container { display: none; } .mobileApp .singlefullitem #panelTellus .tell-us-v2-feedback-container .tell-us-v2-introduction { display: none; } @keyframes moveFooter { 60% { transform: translate3d(0, 200%, 0); } 100% { transform: translate3d(0, 200%, 0); } } @-webkit-keyframes moveFooter { 60% { transform: translate3d(0, 200%, 0); } 100% { transform: translate3d(0, 200%, 0); } } @keyframes returnFooter { 0% { transform: translate3d(0, 200%, 0); } 60% { transform: translate3d(0, 0%, 0); } 100% { transform: translate3d(0, 0%, 0); } } @-webkit-keyframes returnFooter { 0% { transform: translate3d(0, 200%, 0); } 60% { transform: translate3d(0, 0%, 0); } 100% { transform: translate3d(0, 0%, 0); } } .taxis-button multilingual { color: #fff; text-decoration: none; } .nr_safe_seg a .taxis-button multilingual { color: #fff; text-decoration: none; } .tell-us-v2-top-section { transition: all 0.3s ease; } .tell-us-v2-introduction { font-size: 1.3rem; line-height: 1.5; padding: var(--template-padding); } .tell-us-v2-buttons-container { display: flex; flex-direction: column; align-items: center; } .tell-us-v2-buttons-container button { margin-top: calc(var(--template-padding) * 2); padding: 8px 21px; width: 75%; font-size: 1.4rem; border-radius: 5px; line-height: 2; border: none; box-shadow: 0 0 5px #a19797; } .TOCGW .app .singlefullitem #panelTellus .tell-us-v2-buttons-container button { background: var(--gwr); color: #fff; } .TOCAW .app .singlefullitem #panelTellus .tell-us-v2-buttons-container button { background: var(--tfw); color: #fff; } .TOCSW .app .singlefullitem #panelTellus .tell-us-v2-buttons-container button { background: var(--sw); color: #fff; } .TOCES .app .singlefullitem #panelTellus .tell-us-v2-buttons-container button { background: var(--es); color: #fff; } .TOCNT .app .singlefullitem #panelTellus .tell-us-v2-buttons-container button { background: var(--northern); color: #fff; } .TOCRT .app .singlefullitem #panelTellus .tell-us-v2-buttons-container button { background: var(--nr); color: #fff; } .TOCGC .app .singlefullitem #panelTellus .tell-us-v2-buttons-container button { background: var(--nr); color: #000; } .tell-us-v2-buttons-container button:first-of-type { margin-top: var(--template-padding); } .autocomplete-tell-us { display: flex; justify-content: center; width: 90%; margin-left: 5%; flex-direction: column; align-items: center; margin-top: var(--template-padding); margin-bottom: calc(var(--template-padding) * 2); } .tell-us-v2-search-station { height: 3rem; border-radius: 5px; font-size: var(--text-input); /* width: 90%; */ padding-left: 1rem; width: 100%; border: none; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); -webkit-appearance: none; } .lds-ellipsis-container { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } .lds-ellipsis-container-small, .feedback-ellipsis-container-small { height: 50px; } .lds-ellipsis, .feedback-ellipsis { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-ellipsis div, .feedback-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: var(--gwr); animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds-ellipsis div:nth-child(1), .feedback-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; } .lds-ellipsis div:nth-child(2), .feedback-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(3), .feedback-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(4), .feedback-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } } .autcomplete-tell-us-button { width: 80%; margin-left: 10%; height: 3rem; margin-top: var(--template-padding); border-radius: 5px; font-size: var(--text-input); padding-left: 1rem; border: none; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); -webkit-appearance: none; } .tell-us-v2-form, .feedback-complete-form { display: flex; flex-direction: column; align-items: center; } .feedback-complete-form { margin-bottom: 50px; } .tell-us-v2-input, .feedback-complete-input { width: 90%; margin-top: calc(var(--template-padding) * 2); line-height: 2; padding: 5px 3px; background: none; border: 1px #aba4a4 solid; box-shadow: 0 0 3px #aba4a4; color: #000; } .tell-us-v2-form .tell-us-v2-input:first-of-type, .feedback-complete-form .feedback-complete-input:first-of-type { margin-top: var(--template-padding); } .tell-us-v2-textarea { margin-top: calc(var(--template-padding) * 2); width: 90%; line-height: 2; padding: 5px 3px; background: none; border: 1px #aba4a4 solid; color: #000; box-shadow: 0 0 3px #aba4a4; min-height: 150px; } #tell-us-v2-textarea { background-repeat: no-repeat; background-size: 30px; background-position-y: 5px; background-position-x: 5px; transition: all 0.3s ease; padding-left: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 2' viewBox='0 0 100 100'%3E%3Cpath d='M69.67 19.27h10.24a4.37 4.37 0 0 1 4.63 4l.13 66.6A4.37 4.37 0 0 1 80.05 94l-57.62.08a4.37 4.37 0 0 1-4.64-4l-.13-66.6a4.38 4.38 0 0 1 4.62-4.07h10.24' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px'/%3E%3Cpath d='M69.73 12.37H59.61S58.84 5.93 51 5.94h.34c-7.87 0-8.61 6.47-8.61 6.47H32.61v11.83l37.14-.06ZM42.36 38.26H73.3M42.36 76.11H73.3M42.36 63.49H73.3M42.36 50.88H73.3' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px'/%3E%3Cpath d='M26.6 48.11h6.32v5.54H26.6zM26.6 61.37h6.32v5.54H26.6zM26.6 73.34h6.32v5.54H26.6zM26.6 35.49h6.32v5.54H26.6z' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3C/svg%3E"); } #tell-us-v2-input-name, #feedback-complete-input-name { background-repeat: no-repeat; background-size: 30px; background-position-y: center; background-position-x: 5px; padding-left: 38px; transition: all 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 2' viewBox='0 0 100 100'%3E%3Cpath d='M51.05 58.37c-39.18 0-36.79 16.27-36.79 16.27a12.78 12.78 0 0 0 12.79 12.79H75A12.82 12.82 0 0 0 87.83 74.6s2.39-16.23-36.78-16.23Z' style='fill:none;stroke:%231d1d1b;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px'/%3E%3Ccircle cx='51.05' cy='29.58' r='20.17' style='fill:none;stroke:%231d1d1b;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px'/%3E%3C/svg%3E"); } #tell-us-v2-input-email, #feedback-complete-input-email { background-repeat: no-repeat; background-size: 30px; background-position-x: 5px; background-position-y: center; padding-left: 38px; transition: all 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 2' viewBox='0 0 100 100'%3E%3Cpath d='M5.82 41.72v-8.28c0-5.34 4.06-9.67 9.06-9.67h70.24c5 0 9.06 4.33 9.06 9.67V67.3c0 5.34-4.06 9.67-9.06 9.67H14.88c-5 0-9.06-4.33-9.06-9.67V57.12M50 56.28 14.85 34.64M85.15 34.65 50 56.28M22.98 66.1l16.27-16.28M60.69 50.43 78.1 65.49' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px'/%3E%3C/svg%3E"); } .tell-us-v2-feedback-container { padding-bottom: calc(var(--template-padding) * 2); } .active-tell-us-input { background-size: 18px !important; background-position-x: 5px !important; background-position-x: 5px !important; padding-left: 26px !important; } .active-tell-us-input-textarea { background-position-y: 11px !important; } .tell-us-v2-dropdown-options-container { display: none; } .tell-us-v2-toggle-active { display: block; } .tell-us-v2-dropdown-topics-select { display: flex; align-items: center; font-size: 1.3rem; margin-top: calc(var(--template-padding) * 2); line-height: 2; /* border-radius:3px; */ border: 1px #aba4a4 solid; box-shadow: 0 0 3px #aba4a4; padding: calc(var(--template-padding) / 2); padding-left: 7px; } .tell-us-v2-dropdown-topics-select svg { width: 25px; margin-right: 8px; transform-origin: center center; -webkit-transform: center center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .tell-us-v2-dropdown-topics-select:hover { cursor: pointer; } .tell-us-v2-dropdown-topics-container { width: 90%; } .tell-us-v2-dropdown-options-container { border-right: 1px #aba4a4 solid; border-left: 1px #aba4a4 solid; border-bottom: 1px #aba4a4 solid; } .tell-us-v2-dropdown-topics-container div { font-size: 1.3rem; color: grey; flex-grow: 1; } .tell-us-v2-dropdown-option { padding: var(--template-padding); line-height: 2; border-bottom: 1px #aba4a4 solid; display: flex; align-items: center; } .tell-us-v2-dropdown-option:hover { cursor: pointer; } .tell-us-v2-dropdown-option svg { width: 30px; margin-right: 8px; } .tell-us-v2-dropdown-option:last-of-type { border-bottom: none; } .tell-us-v2-send, .feedback-complete-send { margin-top: var(--template-padding); min-width: 200px; padding: var(--template-padding); font-size: 1.3rem; border-radius: 3px; box-shadow: 0 0 3px #aba4a4; border: none; } .tell-us-v2-send:hover, .feedback-complete-send:hover { cursor: pointer; } .TOCGW .app .singlefullitem #panelTellus .tell-us-v2-send { background: var(--gwr); color: #fff; } .TOCAW .app .singlefullitem #panelTellus .tell-us-v2-send { background: var(--tfw); color: #fff; } .TOCSW .app .singlefullitem #panelTellus .tell-us-v2-send, .TOCSW .app .singlefullitem #panelFeedback #feedback-container #feedback-container-alert #feedback-success span form .feedback-complete-send, .TOCSW .app .singlefullitem #panelFeedback #feedback-container #feedback-container-wrapper #feedback-question-1 .feedback-complete form .feedback-complete-send { background: var(--sw); color: #fff; } .TOCES .app .singlefullitem #panelTellus .tell-us-v2-send, .TOCES .app .singlefullitem #panelFeedback #feedback-container #feedback-container-alert #feedback-success span form .feedback-complete-send, .TOCES .app .singlefullitem #panelFeedback #feedback-container #feedback-container-wrapper #feedback-question-1 .feedback-complete form .feedback-complete-send { background: var(--es); color: #fff; } .TOCRT .app .singlefullitem #panelTellus .tell-us-v2-send { background: var(--nr); color: #fff; } .TOCNT .app .singlefullitem #panelTellus .tell-us-v2-send { background: var(--northern); color: #fff; } .TOCGC .app .singlefullitem #panelTellus .tell-us-v2-send { background: var(--gc); color: #000; } .TOCAW .app .singlefullitem #panelTellus .tell-us-v2-send { background: var(--tfw); color: #fff; } .tell-us-v2-status-message, .feedback-complete-status-message { margin-top: var(--template-padding); font-size: 1.3rem; color: var(--gwr); /* color: #fff; */ text-align: center; line-height: 2; text-decoration: none; width: 90%; } .tell-us-v2-back-menu-chevron, .offers-return-back-menu-chevron, .feedback-return-back-menu-chevron{ width: 30px; margin-right: 8px; transform-origin: center center; -webkit-transform: center center; transform: rotate(90deg); -webkit-transform: rotate(90deg); } .tell-us-v2-notice { color: var(--gwr); font-size: 1.5rem; line-height: 2; text-align: center; transition: all 0.3s ease; } .tell-us-v2-notice-gone { opacity: 0; } .tell-us-v2-hide { display: none !important; } .tell-us-v2-chevron-rotate { transform: rotate(180deg); } .tell-us-v2-return-to-menu, .offers-return, .feedback-return-to-menu{ padding: var(--template-padding); border-bottom: 1px grey solid; font-size: 1.3rem; position: sticky; display: flex; align-items: center; top: 0; background-color: #FFF; } .feedback-return-to-menu{ border-bottom: none; position: relative; } .tell-us-v2-return-to-menu { z-index: 21; } .offers-return { z-index: 1; cursor: pointer; } .tuberouteTitle { padding: 2px; } .tubestationnameleft { vertical-align: top; text-align: left; min-width: calc(45% - 30px); max-width: calc(45% - 30px); padding-right: 5px; overflow: hidden; /*height: 35px;*/ min-height: 35px; max-height: 800px; padding-bottom: 20px; } .tubestationbanner { text-align: center; padding-left: 2px; padding-right: 2px; min-width: 100px } .tubestationnameright { vertical-align: top; text-align: left; min-width: 35%; /*max-width: 45%;*/ /*width: 65%;*/ overflow: hidden; /*height: 35px;*/ position: relative; /*z-index: 1;*/ min-height: 35px; max-height: 800px; padding-bottom: 20px; } @media screen and (max-width: 600px) { .tubestationnameleft { max-width: 0; width: 0; display: none } .tubestationnameright { max-width: 100%; } } .tubeSpecialNotices { color: rgb(220, 36, 31); } .firststation { font-weight: bold; color: black; /*background-color: #0A259B;*/ text-align: right !important; } .tuberow { display: flex; min-height: 35px; max-height: 800px; } /*.indentstationname {*/ /* padding-left: 20px;*/ /*}*/ .destinationtube { font-weight: bolder; color: white; background-color: #0019A8; padding: 1px; } .tubenationalrail { /*background-color: red;*/ /*color: white;*/ vertical-align: middle; } .tubeverysmall { font-size: 6pt; } .tubeosi { /*border: dotted 1px blue;*/ font-weight: bolder; } .thameslink { background-color: #d386a9; color: white; } .tell-us-v2-from, .tell-us-v2-to { -webkit-appearance: none; background-size: 400% 400%; border: none; border-radius: 5px; color: #000; background: none; cursor: pointer; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 3rem; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 90%; margin-left: 5%; -webkit-box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 3.3px rgb(0 0 0 / 5%), 0 2.5px 1px rgb(0 0 0 / 6%), 0 4.3px 7.9px rgb(0 0 0 / 7%), 0 1.8px 3.4px rgb(0 0 0 / 9%), 0 7px 10px rgb(0 0 0 / 12%); font-size: var(--text-input); padding-left: 1rem; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; margin-top: var(--template-padding); } .tell-us-v2-to { margin-top: calc(var(--template-padding) * 2); margin-bottom: calc(var(--template-padding) * 1); } .tell-us-v2-bad-form, .feedback-complete-bad-form { border: 1px red solid; } #tell-us-v2-fromfinder-autocomplete-list, #tell-us-v2-tofinder-autocomplete-list { width: 90%; margin-left: 5%; } .tell-us-v2-send-success, .tell-us-v2-send-error, .feedback-complete-send-success, .feedback-complete-send-error { width: 50px; } #tell-us-v2-to, #tell-us-v2-from, #tell-us-v2-search-station { border-radius: 2px; border: 1px #aba4a4 solid; box-shadow: 0 0 3px #aba4a4; width: 90%; } .tell-us-v2-buttons-container .tell-us-v2-button-choice:last-of-type { margin-bottom: var(--template-padding); } .tell-us-v2-date-time { margin-left: 5%; margin-top: var(--template-padding); margin-bottom: var(--template-padding); } .tell-us-v2-terms, .tell-us-v2-terms a, .feedback-complete-terms { font-size: 1.3rem; line-height: 2; padding: var(--template-padding); text-align: center; } .tell-us-v2-terms:hover, .feedback-complete-terms:hover { cursor: pointer; } .tell-us-v2-terms a { font-size: 1.3rem; line-height: 2; } .tubeontop { /*width: 100%;*/ /*height: 100%;*/ position: absolute; top: 0; left: 0; opacity: 0.8; /* for demo purpose */ /*z-index: 0;*/ margin: 0; /* for demo purpose */ } .tell-us-v2-multiple-stations { padding: var(--template-padding); display: flex; align-items: center; justify-content: space-around; padding-top: calc(var(--template-padding) / 2); } .tell-us-v2-station-option { padding: var(--template-padding); font-size: 1.3rem; border-radius: 3px; border: none; min-width: 150px; box-shadow: 0 0 3px #aba4a4; } .TOCGW .app .singlefullitem #panelTellus .tell-us-v2-station-option { background: var(--gwr); color: #fff; } .TOCAW .app .singlefullitem #panelTellus .tell-us-v2-station-option { background: var(--tfw); color: #fff; } .TOCSW .app .singlefullitem #panelTellus .tell-us-v2-station-option { background: var(--sw); color: #fff; } .TOCES .app .singlefullitem #panelTellus .tell-us-v2-station-option { background: var(--es); color: #fff; } .TOCRT .app .singlefullitem #panelTellus .tell-us-v2-station-option { background: var(--nr); color: #fff; } .TOCNT .app .singlefullitem #panelTellus .tell-us-v2-station-option { background: var(--northern); color: #fff; } .TOCGC .app .singlefullitem #panelTellus .tell-us-v2-station-option { background: var(--gc); color: #000; } .cancelled-station-rtiv2 { color: red; text-decoration: line-through; } .rtiv2-display-none { display: none !important; } .tubezoneAll { width: 30px; vertical-align: middle; text-align: center; } .tubezone1 { color: white; background-color: blue; } .tubezone3, .tubezone5, .tubezone7, .tubezone9 { color: #E7E7E8; background-color: white; border: 1px solid #E7E7E8; } .tubezoneT { color: #0019A8; background-color: #E7E7E8; } .tubezone2, .tubezone4, .tubezone6, .tubezone8 { color: white; background-color: #E7E7E8; } .tubezone23 { color: white; background-color: #DCDDDE; border: solid 1px white; } .google-maps-filter-button { background-color: #fff; /* border:2px solid #fff; */ border-radius: 3px; /* box-shadow: 0 2px 6px rgba(0,0,0,.3); */ cursor: pointer; margin: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; font-size: 1rem; height: 40px; box-shadow: rgb(0 0 0 / 30%) 0 1px 4px -1px; border: 4px transparent; box-sizing: border-box; } .rtiv2-bus-replacement-notice { padding: var(--template-padding); border-radius: 5px; background-color: #edd81f; display: flex; align-items: center; justify-content: center; flex-direction: column; width: calc(100% - calc(var(--template-padding) * 2)); text-align: center; margin: auto; margin-bottom: 8px; font-size: 1.1rem; } .rtiv2-bus-hide { display: none; } .rtiv2-bus-replacement-last-updated { font-size: 1.1rem; text-align: center; border-radius: 5px; color: White; background: black; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-bottom: 0; padding: 8px; margin-bottom: 8px; width: 100%; } .google-maps-filters-container { display: flex; align-items: center; flex-direction: row-reverse; } .google-maps-filters-company-container { flex-direction: column; } .rental-filter-button { width: 100%; } .rental-filter-button path, .rental-filter-button line { stroke-width: 2px; } .tell-us-option-hide { display: none; } .platform-ferry { width: 30px; } .platform-ferry path { stroke-width: 2px; } .TOCGC .app .singlefullitem #panelMap .google-maps-filters-container .google-maps-filter-button-active { /* background-color:var(--gc); */ border: 4px var(--gc) solid; border-top: none; border-left: none; border-right: none; } .TOCRT .app .singlefullitem #panelMap .google-maps-filters-container .google-maps-filter-button-active { border: 4px var(--nr) solid; border-top: none; border-left: none; border-right: none; } .TOCNT .app .singlefullitem #panelMap .google-maps-filters-container .google-maps-filter-button-active { /* background-color:#8e5eeb; */ border: 4px #8e5eeb solid; border-top: none; border-left: none; border-right: none; } .TOCGW .app .singlefullitem #panelMap .google-maps-filters-container .google-maps-filter-button-active { /* background-color:#6dcb99; */ border: 4px #6dcb99 solid; border-top: none; border-left: none; border-right: none; } .TOCSW .app .singlefullitem #panelMap .google-maps-filters-container .google-maps-filter-button-active { /* background-color:#0092cb; */ border: 4px #0092cb solid; border-top: none; border-left: none; border-right: none; } .TOCAW .app .singlefullitem #panelMap .google-maps-filters-container .google-maps-filter-button-active { /* background-color:#0092cb; */ border: 4px var(--tfw) solid; border-top: none; border-left: none; border-right: none; } .TOCES .app .singlefullitem #panelMap .google-maps-filters-container .google-maps-filter-button-active { /* background-color:#0092cb; */ border: 4px var(--es) solid; border-top: none; border-left: none; border-right: none; } .TOCGR .app .singlefullitem #panelMap .google-maps-filters-container .google-maps-filter-button-active { /* background-color:#0092cb; */ border: 4px var(--lner) solid; border-top: none; border-left: none; border-right: none; } .live-buses-container .main_item .main_item_platform::before { display: none; } div.tuberow { border-bottom: 1px #d4cbcb solid; } hr.tubespace { border-bottom: 1px #d4cbcb dotted; } .share-container { display: flex; height: 100%; align-items: center; padding: 0 1px; } .share-container:hover { cursor: pointer; } .share-container span { font-size: 1.3rem; font-weight: 600; margin-left: 8px; color: #FFF; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } .share-svg-top-header { height: 80%; } .TOCGW .app .above-header-slot-container .share-container .share-svg-top-header circle, .TOCGW .app .above-header-slot-container .share-container .share-svg-top-header line, .TOCAW .app .above-header-slot-container .share-container .share-svg-top-header circle, .TOCAW .app .above-header-slot-container .share-container .share-svg-top-header line { stroke: #FFF; fill: #FFF; } .TOCGW .app .above-header-slot-container .language-toggle-dropdown div { background-color: var(--gwr); border: #FFF 1px solid; color: #FFF; } .TOCGW .app .above-header-slot-container .language-toggle-dropdown > .active-lang-selection { background-color: #FFF; color: var(--gwr); } .TOCAW .app .above-header-slot-container .language-toggle-dropdown div { background-color: var(--tfw); border: #FFF 1px solid; color: #FFF; } .TOCAW .app .above-header-slot-container .language-toggle-dropdown > .active-lang-selection { background-color: #FFF; color: var(--tfw); } .TOCSW .app .above-header-slot-container .share-container .share-svg-top-header circle, .TOCSW .app .above-header-slot-container .share-container .share-svg-top-header line { stroke: #FFF; } .TOCSW .app .above-header-slot-container .share-container .share-svg-top-header circle { stroke: #FFF; fill: #FFF; } .TOCGR .app .above-header-slot-container .share-container .share-svg-top-header circle, .TOCGR .app .above-header-slot-container .share-container .share-svg-top-header line { stroke: #FFF; fill: #FFF; } .TOCSW .app .above-header-slot-container .language-toggle-dropdown div { background-color: var(--sw); border: #FFF 1px solid; color: #FFF; } .TOCSW .app .above-header-slot-container .language-toggle-dropdown > .active-lang-selection { background-color: #FFF; color: var(--sw); } .TOCRT .app .above-header-slot-container .share-container .share-svg-top-header circle, .TOCRT .app .above-header-slot-container .share-container .share-svg-top-header line, .TOCES .app .above-header-slot-container .share-container .share-svg-top-header circle, .TOCES .app .above-header-slot-container .share-container .share-svg-top-header line { stroke: #FFF; } .TOCRT .app .above-header-slot-container .share-container .share-svg-top-header circle, .TOCES .app .above-header-slot-container .share-container .share-svg-top-header circle { stroke: #FFF; fill: #FFF; } .TOCRT .app .above-header-slot-container .language-toggle-dropdown div { background-color: var(--nr); border: #FFF 1px solid; color: #FFF; } .TOCES .app .above-header-slot-container .language-toggle-dropdown div { background-color: var(--es); border: #FFF 1px solid; color: #FFF; } .TOCRT .app .above-header-slot-container .language-toggle-dropdown > .active-lang-selection { background-color: #FFF; color: var(--nr); } .TOCES .app .above-header-slot-container .language-toggle-dropdown > .active-lang-selection { background-color: #FFF; color: var(--es); } .TOCGC .app .above-header-slot-container .share-container .share-svg-top-header circle, .TOCGC .app .above-header-slot-container .share-container .share-svg-top-header line { stroke: var(--gc-secondary); } .TOCGC .app .above-header-slot-container .share-container .share-svg-top-header circle { stroke: var(--gc-secondary); fill: var(--gc-secondary); } .TOCGC .app .above-header-slot-container .share-container span, .TOCGC .app .above-header-slot-container .language-toggle-dropdown div { color: var(--gc-secondary); } .TOCGC .app .above-header-slot-container .language-toggle-dropdown div { background-color: var(--gc); border: #FFF 1px solid; color: #FFF; } .TOCGC .app .above-header-slot-container .language-toggle-dropdown > .active-lang-selection { background-color: #FFF; color: var(--gc); } .TOCNT .app .above-header-slot-container .share-container .share-svg-top-header circle, .TOCNT .app .above-header-slot-container .share-container .share-svg-top-header line { stroke: #FFF; } .TOCNT .app .above-header-slot-container .share-container .share-svg-top-header circle { stroke: #FFF; fill: #FFF; } .TOCNT .app .above-header-slot-container .share-container span, .TOCNT .app .above-header-slot-container .language-toggle-dropdown div { color: #FFF; } .TOCNT .app .above-header-slot-container .language-toggle-dropdown div { background-color: var(--northern); border: #FFF 1px solid; color: #FFF; } .TOCNT .app .above-header-slot-container .language-toggle-dropdown > .active-lang-selection { background-color: #FFF; color: var(--northern); } .TOCGC .app .above-header-slot-container { background-color: var(--gc); } .TOCNT .app .above-header-slot-container { background-color: var(--northern); } .TOCRT .app .above-header-slot-container { background-color: var(--nr); } .TOCES .app .above-header-slot-container { background-color: var(--es); } .TOCGW .app .above-header-slot-container { background-color: var(--gwr); } .TOCAW .app .above-header-slot-container { background-color: var(--tfw); } .TOCSW .app .above-header-slot-container { background-color: var(--sw); } .TOCAW .app .above-header-slot-container { background-color: var(--tfw); } .TOCGR .app .above-header-slot-container { background-color: var(--lner); } .share-svg-top-header circle { stroke-width: 4px; } .share-svg-top-header line { stroke-width: 8px; } /* .rtiv2-toggle-icon path, .rtiv2-toggle-icon path, .rtiv2-toggle-icon circle, .rtiv2-toggle-icon line { stroke-width: 4px !important; } stroke-width:4px !important; } */ .TOCGW .app .singlefullitem #panelNationalrail .track-svg .departures-svg-cancelled, .TOCGW .app .singlefullitem #panelOsi .track-svg .departures-svg-cancelled, .TOCGW .app .singlefullitem #panelTube .track-svg .departures-svg-cancelled, .TOCGW .app .singlefullitem #panelTram .track-svg .departures-svg-cancelled, .TOCGW .app .singlefullitem #panelRiver .track-svg .departures-svg-cancelled, .TOCGW .app .singlefullitem #panelDlr .track-svg .departures-svg-cancelled, .TOCGW .app .singlefullitem #panelBuses .track-svg .departures-svg-cancelled, .TOCNT .app .singlefullitem #panelNationalrail .track-svg .departures-svg-cancelled, .TOCNT .app .singlefullitem #panelOsi .track-svg .departures-svg-cancelled, .TOCNT .app .singlefullitem #panelTube .track-svg .departures-svg-cancelled, .TOCNT .app .singlefullitem #panelTram .track-svg .departures-svg-cancelled, .TOCNT .app .singlefullitem #panelRiver .track-svg .departures-svg-cancelled, .TOCNT .app .singlefullitem #panelDlr .track-svg .departures-svg-cancelled, .TOCNT .app .singlefullitem #panelBuses .track-svg .departures-svg-cancelled, .TOCGC .app .singlefullitem #panelNationalrail .track-svg .departures-svg-cancelled, .TOCGC .app .singlefullitem #panelOsi .track-svg .departures-svg-cancelled, .TOCGC .app .singlefullitem #panelTube .track-svg .departures-svg-cancelled, .TOCGC .app .singlefullitem #panelTram .track-svg .departures-svg-cancelled, .TOCGC .app .singlefullitem #panelRiver .track-svg .departures-svg-cancelled, .TOCGC .app .singlefullitem #panelDlr .track-svg .departures-svg-cancelled, .TOCGC .app .singlefullitem #panelBuses .track-svg .departures-svg-cancelled, .TOCSW .app .singlefullitem #panelNationalrail .track-svg .departures-svg-cancelled, .TOCSW .app .singlefullitem #panelOsi .track-svg .departures-svg-cancelled, .TOCSW .app .singlefullitem #panelTube .track-svg .departures-svg-cancelled, .TOCSW .app .singlefullitem #panelTram .track-svg .departures-svg-cancelled, .TOCSW .app .singlefullitem #panelRiver .track-svg .departures-svg-cancelled, .TOCSW .app .singlefullitem #panelDlr .track-svg .departures-svg-cancelled, .TOCSW .app .singlefullitem #panelBuses .track-svg .departures-svg-cancelled, .TOCRT .app .singlefullitem #panelNationalrail .track-svg .departures-svg-cancelled, .TOCRT .app .singlefullitem #panelOsi .track-svg .departures-svg-cancelled, .TOCRT .app .singlefullitem #panelTube .track-svg .departures-svg-cancelled, .TOCRT .app .singlefullitem #panelTram .track-svg .departures-svg-cancelled, .TOCRT .app .singlefullitem #panelRiver .track-svg .departures-svg-cancelled, .TOCRT .app .singlefullitem #panelDlr .track-svg .departures-svg-cancelled, .TOCRT .app .singlefullitem #panelBuses .track-svg .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelNationalrail .track-svg .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelOsi .track-svg .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelTube .track-svg .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelTram .track-svg .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelRiver .track-svg .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelDlr .track-svg .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelBuses .track-svg .departures-svg-cancelled, .TOCAW .app .singlefullitem #panelNationalrail .track-svg .departures-svg-cancelled, .TOCAW .app .singlefullitem #panelOsi .track-svg .departures-svg-cancelled, .TOCAW .app .singlefullitem #panelTube .track-svg .departures-svg-cancelled, .TOCAW .app .singlefullitem #panelTram .track-svg .departures-svg-cancelled, .TOCAW .app .singlefullitem #panelRiver .track-svg .departures-svg-cancelled, .TOCAW .app .singlefullitem #panelDlr .track-svg .departures-svg-cancelled, .TOCAW .app .singlefullitem #panelBuses .track-svg .departures-svg-cancelled, .TOCES .app .singlefullitem #panelNationalrail .track-svg .departures-svg-cancelled, .TOCES .app .singlefullitem #panelOsi .track-svg .departures-svg-cancelled, .TOCES .app .singlefullitem #panelTube .track-svg .departures-svg-cancelled, .TOCES .app .singlefullitem #panelTram .track-svg .departures-svg-cancelled, .TOCES .app .singlefullitem #panelRiver .track-svg .departures-svg-cancelled, .TOCES .app .singlefullitem #panelDlr .track-svg .departures-svg-cancelled, .TOCES .app .singlefullitem #panelBuses .track-svg .departures-svg-cancelled { fill: red; } .TOCGR .app .singlefullitem #panelNationalrail .track-button .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelOsi .track-button .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelTube .track-button .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelBuses .track-button .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelTram .track-button .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelDlr .track-button .departures-svg-cancelled, .TOCGR .app .singlefullitem #panelRiver .track-button .departures-svg-cancelled { fill: red; } .lifts-and-escalators-details { padding: 8px 0; /* margin-left: 55px; */ display: none; font-weight: 300; } .journey-details-show { display: block; } .lifts-and-escalators-vertical { position: absolute; margin-left: calc(50% + 10px); width: 2px; height: 50%; background-color: black; } .lifts-and-escalators-horizontal { position: absolute; top: calc(50% - 1px); height: 2px; width: 52%; margin-left: calc(50% + 10px); background-color: black; } .lifts-and-escalators-vertical::after { content: ""; position: absolute; width: 52px; height: 20px; background: black; top: 0; left: -38px; top: -2px; height: 2px; border-radius: 3px; } .lifts-and-escalators-graphic { /* position: relative; */ width: 55px; position: absolute; /* height: 5px; */ height: 100%; } .lifts-and-escalators-string { margin-left: 55px; background: black; color: white; border-radius: 3px; padding: 8px; filter: drop-shadow(0px 2px 1px grey); -webkit-filter: drop-shadow(0px 2px 1px grey); -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } .lifts-and-escalators-wrapper { width: 100%; height: 100%; position: relative; margin-top: 4px; } .lifts-and-escalators-wrapper:first-of-type { margin-top: 0; } .le-graphic-hide { display: none; } .details-toggle-icon { transform-origin: center center; width: 20px; align-self: start; transition: all 0.3s ease; filter: drop-shadow(0px 2px 1px grey); -webkit-filter: drop-shadow(0px 2px 1px grey); } .details-toggle-icon:hover { cursor: pointer; } .details-toggle-icon-svg-hide { display: none; } .tell-us-v2-chevron-rotate { filter: drop-shadow(0px -2px 1px grey); -webkit-filter: drop-shadow(0px -2px 1px grey); } .TOCGW .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-horizontal, .TOCGW .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical { background-color: var(--gwr); } .TOCAW .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-horizontal, .TOCAW .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical { background-color: var(--tfw); } .TOCGW .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical::after { background-color: var(--gwr); } .TOCAW .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical::after { background-color: var(--tfw); } .TOCGW .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-string { background: var(--gwr); color: #FFF; } .TOCAW .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-string { background: var(--tfw); color: #FFF; } .TOCGC .app .singlefullitem #panelJourney .lifts-and-escalators-horizontal, .TOCGC .app .singlefullitem #panelJourney .lifts-and-escalators-vertical { background-color: var(--gc); } .TOCGC .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical::after { background-color: var(--gc); } .TOCGC .app .singlefullitem #panelJourney .lifts-and-escalators-string { background: var(--gc); color: var(--gc-secondary); } .TOCNT .app .singlefullitem #panelJourney .lifts-and-escalators-horizontal, .TOCNT .app .singlefullitem #panelJourney .lifts-and-escalators-vertical { background-color: var(--northern); } .TOCNT .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical::after { background-color: var(--northern); } .TOCNT .app .singlefullitem #panelJourney .lifts-and-escalators-string { background: var(--northern); color: #FFF; } .TOCRT .app .singlefullitem #panelJourney .lifts-and-escalators-horizontal, .TOCRT .app .singlefullitem #panelJourney .lifts-and-escalators-vertical { background-color: var(--nr); } .TOCRT .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical::after { background-color: var(--nr); } .TOCRT .app .singlefullitem #panelJourney .lifts-and-escalators-string { background: var(--nr); color: #FFF; } .TOCSW .app .singlefullitem #panelJourney .lifts-and-escalators-horizontal, .TOCSW .app .singlefullitem #panelJourney .lifts-and-escalators-vertical { background-color: var(--sw); } .TOCSW .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical::after { background-color: var(--sw); } .TOCSW .app .singlefullitem #panelJourney .lifts-and-escalators-string { background: var(--sw); color: #FFF; } .TOCES .app .singlefullitem #panelJourney .lifts-and-escalators-horizontal, .TOCES .app .singlefullitem #panelJourney .lifts-and-escalators-vertical { background-color: var(--es); } .TOCES .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical::after { background-color: var(--es); } .TOCES .app .singlefullitem #panelJourney .lifts-and-escalators-string { background: var(--es); color: #FFF; } .TOCGR .app .singlefullitem #panelJourney .panelForlineDiagram .classDebugLocation ul li div .lifts-and-escalators-vertical::after { background-color: var(--lner) !important; } .journey-calling-point-hide { display: none; } .journey-calling-point-details-succinct { grid-template-rows: min-content; grid-template-areas: "station station station time"; } .journey-calling-point-station-svg-hide { width: 50px; } .journey-calling-point-station-svg-hide svg { height: 23px; } .TOCGR .app .singlefullitem #panelJourney .lifts-and-escalators-string, .TOCGR .app .singlefullitem #panelJourney .lifts-and-escalators-horizontal, .TOCGR .app .singlefullitem #panelJourney .lifts-and-escalators-vertical { background-color: var(--lner); } .transportsymbols { font-family: 'transportsymbolsregular'; font-size: 19.5px; letter-spacing: 4px; } .exhaustive { margin-bottom: var(--template-padding); /* min-width: 388px; */ position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; width: 100%; } .exhaustive input { height: 3rem; border-radius: 5px; font-size: var(--text-input); padding-left: 3rem; border: none; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); -webkit-appearance: none; /*width: 300px;*/ width: 100%; } @media screen and (min-width: 375px) { .planner-form-datetime, .planner-form-wrapper form { width: 300px; } } .exhaustive input:focus { border: 1px none solid; outline-color: transparent; outline-style: none; } .exhaustive #jfFromresult, .exhaustive #jfToresult, .exhaustive #feedbackSearchresult, .exhaustive #myInput1result, .exhaustive #ppFromresult, .exhaustive #ppToresult { width: 300px; } .exhaustive #tell-us-v2-search-stationresult { width: 90%; } .exhaustive-items { /*border: 4px solid deeppink;*/ width: 100%; padding: 0 var(--template-padding); max-height: 200px; overflow-y: scroll; margin-top: 0; padding-top: 6px; border-radius: 0 0 8px 8px; border-top: none; -webkit-box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 3.3px rgba(0, 0, 0, 0.048), 0 2.5px 1px rgba(0, 0, 0, 0.06), 0 4.3px 7.9px rgba(0, 0, 0, 0.072), 0 1.8px 3.4px rgba(0, 0, 0, 0.086), 0 7px 10px rgba(0, 0, 0, 0.12); } .exhaustive-items div { font-size: 1.3rem; margin: 13px 0; } .exhaustive-items div strong { font-size: 1.3rem; } .exhaustive-items div:hover { cursor: pointer; } .exhaustive-tell-us div form { display: flex; justify-content: center; position: relative; } .exhaustive-tell-us div form button { margin-right: 0; left: 5.5%; } .exhaustive label { display: none; } .animation_bus_1 { fill: #dd4b4b; stroke: none; -webkit-animation: bloat 0.5s ease; animation: bloat 0.5s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .animation_bus_2 { fill: #f8c449; stroke: none; -webkit-animation: wobble 0.8s ease; animation: wobble 0.8s ease; -webkit-transform-origin: 50%; transform-origin: 50%; } .departures-guidance { background-color: #fafad2; /*display: flex;*/ } .departures-guidance p { margin: 0; font-weight: 500; font-size: 13px; padding: 10px; text-align: center; } .rawf58220 { background-color: #f58220; color: white; } /* No new line at end of file */ /* Auto inserted by whooshmedia\application\routecss from view\whooshDiagram\TrainLineColours */ .rawef7b10 {background-color: #ef7b10; color: #ffffff} .raw061b2b {background-color: #061b2b; color: #ffffff} .raw1e467d {background-color: #1e467d; color: #ffffff} .raw00bfff {background-color: #00bfff; color: #000000} .rawb26300 {background-color: #b26300; color: #000000} .raw713563 {background-color: #713563; color: #ffffff} .raw0a493e {background-color: #0a493e; color: #ffffff} .raw09a4ec {background-color: #09a4ec; color: #ffffff} .raw0f0d78 {background-color: #0f0d78; color: #ffffff} .raw8cc63e {background-color: #8cc63e; color: #ffffff} .raw389cff {background-color: #389cff; color: #ffffff} .raw532e63 {background-color: #532e63; color: #ffffff} .rawff8200 {background-color: #ff8200; color: #ffffff} .rawffd700 {background-color: #ffd700; color: #ffffff} .rawfcb828 {background-color: #fcb828; color: #000000} .rawff0000 {background-color: #ff0000; color: #ffffff} .rawff4713 {background-color: #ff4713; color: #ffffff} .rawfff200 {background-color: #fff200; color: #000000} .rawd70428 {background-color: #d70428; color: #ffffff} .raw6950a1 {background-color: #6950a1; color: #ffffff} .raw660f21 {background-color: #660f21; color: #ffffff} .raw1d1d1b {background-color: #1d1d1b; color: #ffffff} .rawff5aa4 {background-color: #ff5aa4; color: #ffffff} .rawce0e2d {background-color: #ce0e2d; color: #ffffff} .rawb7007c {background-color: #b7007c; color: #ffffff} .rawde005c {background-color: #de005c; color: #ffffff} .raw800000 {background-color: #800000; color: #ffffff} .rawcc0033 {background-color: #cc0033; color: #ffffff} .rawdc0a1e {background-color: #dc0a1e; color: #ffffff} .raw1d2e35 {background-color: #1d2e35; color: #ffffff} .raw0450a1 {background-color: #0450a1; color: #ffffff} .rawff9800 {background-color: #ff9800; color: #000000} .raw1e90ff {background-color: #1e90ff; color: #ffffff} .raw7f7f7f {background-color: #7f7f7f; color: #ffffff} .raw6c2d7e {background-color: #6c2d7e; color: #ffffff} .rawffffff {background-color: #ffffff; color: #000000} .raw1476bd {background-color: #1476bd; color: #ffffff} .rawdc241f {background-color: #dc241f; color: #ffffff} .raw000000 {background-color: #000000; color: #ffffff} .rawf07e25 {background-color: #f07e25; color: #000000} .raw0000f2 {background-color: #0000f2; color: #ffffff} .raw2bfc9f {background-color: #2bfc9f; color: #000000} .raw007a3a {background-color: #007a3a; color: #ffffff} .bakerloo {background-color: #b26313; color: #fff} .central {background-color: #dc241f; color: #fff} .circle {background-color: #ffd329; color: #0019A8} .district {background-color: #007d32; color: #fff} .hammersmithandcity {background-color: #f4a9be; color: #0019a8} .jubilee {background-color: #a1a5a7; color: #fff} .metropolitan {background-color: #9b0058; color: #fff} .northern {background-color: #000; color: #fff} .piccadilly {background-color: #0019a8; color: #fff} .victoria {background-color: #0098d8; color: #fff} .waterlooandcity {background-color: #93ceba; color: #0019a8} .dlr {background-color: #00afad; color: #fff} .overground {background-color: #ef7b10; color: #fff} .tflrail {background-color: #0019a8; color: #fff} .londontrams {background-color: #00bd19; color: #fff} .elizabeth {background-color: #6950a1; color: #fff} .LMLN {background-color: #007a3a; color: #004c45} .LMWM {background-color: #f58220; color: #fff} .waterloo-city {background-color: #93ceba; color: #0019a8} .hammersmith-city {background-color: #f4a9be; color: #0019a8} .london-overground {background-color: #ef7b10; color: #fff} .tram {background-color: #00bd19; color: #fff} .hammersmithcity {background-color: #f4a9be; color: #0019a8}