/* Typography */
h1 {font-family: 'Ropa Sans', sans-serif;}
h2, h3, h4, h5, h6, body, input, select, textarea, label {font-family: 'Josefin Sans', sans-serif; color: #212322;}
input, select, textarea {font-size: 15px;}

/* Nav */
nav {height: calc(100% - 20px); display: none; width: 70%; max-width: 300px; position: fixed; z-index: 21; padding-top: 20px; top: 0; left: 0; background-color: #2d2e2e; overflow-x: hidden; overflow-y: scroll; opacity: 0.95;}
nav ul {margin: 0 20px; padding: 0; list-style: none;}
nav ul ul {display: none; margin: 0;}
nav ul ul a, nav ul ul li label {color: #c5c2c3;}
nav ul li label {color: #fbf6f8; cursor: pointer;}
nav ul ul li {padding: 10px 0;}
nav ul input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} /* Hide the browser's default checkbox */
nav ul ul li label {font-size: 16px; padding: 12px 0 12px 38px;}
nav li {background: left no-repeat;}
nav li a {font-size: 20px; transition: transform .4s;}
nav li a:hover {transform: scale(1.03);}
nav li.journeyplanner {background-image: url('/images/icon-jp-red.svg');}
nav li.photomap {background-image: url('/images/icon-photomap-red.svg');}
nav li.pois {background-image: url('/images/icon-places-red.svg');}
nav li.data {background-image: url('/images/icon-data-red.svg'); background-position: 0 8px;}
nav li.data a {transform: 1s; background: url('/images/icon-disclosure-red-down.svg') right no-repeat; margin-right: 4px;}
nav ul li ul li label {display: inline-block; width: 212px; padding: 2.5px 0 2.5px 38px; width: calc(100% - 36px);}
nav li.enabled a, nav ul li ul li.enabled label {background: url('/images/icon-view-pass-on-16x16.svg') right no-repeat;}
nav a {padding: 12px 38px; text-decoration: none; color: #fbf6f8; display: block; transition: 0.3s;}
nav a, nav label {transition: 0.3s;}
nav a:hover, nav label:hover {color: #cc5959;}
nav hr {color: #b1afb1; margin-left: 0; width: 50%;}
nav #secondary-menu {padding-bottom: 70px;}
nav #secondary-menu li a {font-size: 16px; color: #c5c2c3; padding-top: 8px; padding-bottom: 8px;}
nav #secondary-menu li a span.emoji {vertical-align: middle; line-height: 16px;}
nav #secondary-menu li a:hover {color: #cc5959;}
nav .badge-row {display: flex;}
nav .text-column {width: 80%;}
nav .badge-column {width: 20%;}
nav .blog-badge {position: relative; margin: 0; padding: 0;}
nav .blog-badge[data-badge]:after {content: attr(data-badge); position: absolute; right: 20px; font-size: .7em; background: #cc5959; color: white; width: 18px; height: 18px; text-align: center; line-height: 18px; border-radius: 50%; box-shadow: 0 0 1px #333;}
nav #nav-footer {position: fixed; bottom: 0; height: 50px; width: calc(70% - 20px); max-width: 280px; padding: 10px; background-color: #212323; color: #b1afb1;}
nav #nav-footer .cyclestreets-logo {float: left; width: 50px; height: 50px;}
nav #nav-footer h6, nav #nav-footer p, nav #nav-footer a {margin: 0 0 0 40px;}
nav #nav-footer .logo-text {padding: 17px 0 5px 40px; color: #e1dde0; font-size: 18px; font-weight: bold; font-variant: small-caps;}
nav #nav-footer .logo-description {padding: 0 0 5px 20px; font-size: 9px; font-weight: lighter;}

/*
 * Main UI
 */

#map {position:absolute; top: 0; bottom: 0; left: 0; width:100%;}

/* Main UI icons and input boxes */
body {user-select: none; -webkit-user-select: none;}
.ui-button {display: block; position: fixed; width: 50px; height: 50px; line-height: 50px; border: 0 solid #f5f5f5; border-radius: 50%; background: #f5f5f5; text-align: center; box-shadow: 0 0 3px gray; transition: transform .2s;}
.ui-button-large {width: 65px; height: 65px; background: #cc5959; transition: transform .2s;}
.ui-button:hover, .ui-button-large:hover {transform: scale(1.1);}
#hamburger-menu {top: 20px; left: 20px; z-index: 2;}
.mainLoadingSpinner {width: 65px; height: 65px; border-radius: 50%; display: none; z-index: 5; position: fixed; top: 20px; left: 20px; background: linear-gradient(0deg, rgba(204, 89, 89, 0.2) 33%, #e1dde0 100%); box-sizing: border-box; animation: rotation 1s linear infinite;}
button.mapboxgl-ctrl-geolocate {display: block; position: fixed; margin: -10px -10px 0 0; width: 50px; height: 50px; line-height: 50px; border: 0 solid #f5f5f5; border-radius: 50%; background: #f5f5f5; text-align: center; box-shadow: 0 0 3px gray; transition: transform .2s; top: 30px; right: 20px; line-height: 64px;}
body .mapboxgl-ctrl-group button.mapboxgl-ctrl-geolocate {border-radius: 50%;}	/* Override library default */
button.mapboxgl-ctrl-geolocate:hover {transform: scale(1.1); background-color: #f5f5f5;}
mapboxgl-control-container {z-index: 2;}
.mapboxgl-ctrl button:not(:disabled):hover {background-color: #f5f5f5;}
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right, .mapboxgl-ctrl-top-left, .mapboxgl-ctrl-top-right {z-index: inherit;}
.mapboxgl-ctrl-top-right {z-index: 2;}
#geolocate-button {display: none; top: 30px; right: 20px; line-height: 64px;}
#geolocate-button img {margin-right: 4px;}
#panning {top: 160px; right: 20px; line-height: 52px; z-index: 2;}
#glasses-icon {top: 95px; right: 20px; line-height: 53px; z-index: 2;}
#browse-search-box {display: none; position: fixed; top: 95px; right: 20px; width: 50px; height: 50px; margin: 0; background: #f5f5f5; z-index: 19;}
#browse-search-box.open {display: block; padding-left: 20px; padding-right: 50px; max-width: 300px; border-radius: 25px; line-height: 20px; box-shadow: 0 0 3px gray;}
#close-browse-box-icon {display: none; top: 95px; right: 20px; z-index: 1; line-height: 60px; box-shadow: none; z-index: 20;}

/* Geocoder autocomplete */
.loader {display: none; z-index: 99; line-height: 60px; width: 48px; height: 48px; border: 5px solid #f5f5f5; border-radius: 50%; border-bottom-color: #cc5959; box-sizing: border-box; animation: rotation 1s linear infinite;}
.geocoder .loader {position: fixed; top: 95px; right: 20px;}
@keyframes rotation {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}} 
.ui-autocomplete-loading + .loader {display: inline-block;}
.ui-autocomplete {background-color: white; width: 200px; list-style: none; margin-left: 0; padding-left: 0; border-radius: 25px;}
.ui-autocomplete li {list-style: none; margin-left: 0; padding-left: 0;}
.ui-autocomplete li:first-child a {padding-top: 9px;}
.ui-autocomplete li a {padding: 5px 15px 3px; display: block; color: #dc4f55;}
.ui-autocomplete li a span {color: gray; font-size: 0.81em;}
.ui-autocomplete li a.ui-state-active {cursor: pointer; background-color: #fbf6f8; border-radius: 25px;}
.ui-autocomplete {z-index: 100}
.ui-helper-hidden-accessible {display: none;}

/*
 * Default panel styling
 */

/* Structural elements */
.panel {display: none; position: fixed; height: auto; bottom: 0; left: 0; z-index: 20; width: calc(100% - 40px); padding: 15px 20px; background-color: #fbf6f8;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); user-select: none;}
.panel::before {content:url('/images/card-handle.svg'); position: absolute; top: -8px; margin: 0 calc((100% - 208px) / 2);}
.panel.red::before {content:url('/images/card-handle-red-fill.svg');}
.hidden {display: none;}
.panel.minimised {height: 20px;}

/* Standard card elements */
a {text-decoration: none; color: #dc4f55;}
a.action {position: absolute; top: 0; margin-top: 12px; padding: 10px; color: #dc4f55; text-decoration: none; border-radius: 20px;}
a.action:hover {background-color: rgba(204, 89, 89, 0.2);}
a.action.back {left: 0; margin-left: 3px;}
a.action.forward {right: 0; margin-right: 3px;}
a.action.forward.white {color: #ffffff;}
h2 {margin: 5px 0 10px 0; text-align: center; font-variant: small-caps;}
ul {margin: 0; padding: 0;}
ul li {list-style-type: none;}
ul li select {display: inline-block; margin: 2px 0; padding: 0 20px; width: calc(100% - 120px); border-radius: 25px; text-align: left; text-decoration: none; background: #dc4f55; color: #f5f5f5;}
textarea {display: inline-block; margin: 2px 0; padding: 10px 20px; height: 50px; width: calc(100% - 160px); border: none; border-radius: 25px; vertical-align: middle;}
input {margin: 3px 0; padding: 0 20px; line-height: 50px; width: calc(100% - 100px); border: none; border-radius: 25px;}
input:focus, select:focus, textarea:focus, button:focus {outline: auto 1px #dc4f55; outline: auto 1px #dc4f55;}
select {-webkit-appearance: none; height: 50px;}
hr {margin-top: 10px; margin-bottom: 10px;}
.disabled {opacity: 0.5;}
.grayscale {filter: grayscale(100%); -webkit-filter: grayscale(100%);}
.zoom {transition: transform .2s;}  
.zoom:hover {transform: scale(1.1);}
.redHover {border-radius: 20px; padding: 10px;}
.redHover:hover {background-color: rgba(204, 89, 89, 0.2);}

/* iOS styled elements */
.switch {position: relative; float: right; width: 60px; height: 34px;}
.switch input {opacity: 0; width: 0; height: 0;}
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
.slider:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider {background-color: #dc4f55;}
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}
.wizard .action.forward {opacity: 0.3;}
.wizard .action.forward.enabled {opacity: 1;}

/*
 * Card specific styles
 */

/*
 * Routing and tracking panels
 */


/* Route search panel */
.panel.journeyplanner.search {height: 38px; padding-top: 12px; padding-bottom: 15px;}
.panel.journeyplanner.search.open {height: auto; max-height: 90%; padding-bottom: 0;}
.panel.journeyplanner.search #start {display: none;}
.panel.journeyplanner.search.open #start {padding-right: 71px; width: calc(100% - 148px);}
.panel.journeyplanner.search #getRoutes {display: none; position: absolute; right: 0; top: 5px; transition: transform .2s;}
.panel.journeyplanner.search #getRoutes.grayscale:hover {transform: scale(1.0);}
.panel.journeyplanner.search #getRoutes:hover {transform: scale(1.1);}

.panel.journeyplanner.search.open .inputDiv {margin-left: 15px;}
.panel.journeyplanner.search input {position: relative; bottom: 5px; height: 45px; width: calc(100% - 40px); padding: 0 20px; border: 0; transition: transform .2s;}
.panel.journeyplanner.search input:hover {transform: scale(1.05);}
.panel.journeyplanner.search .loader {display: none; position: absolute; right: 60px; margin-top: 1px; margin-left: -3px; width: 38px; height: 38px;}
.panel.journeyplanner.search .ui-autocomplete-loading + .loader {display: inline-block;}
.panel.journeyplanner.search a.reorderWaypoint {display: none; position: absolute; left: 49px; margin-top: 10px;}
.panel.journeyplanner.search a.locationTracking {display: none; position: absolute; right: 103px; margin-top: 14px;}
.panel.journeyplanner.search a.removeWaypoint {display: none; position: absolute; right: 63px; margin-top: 4px;}
.panel.journeyplanner.search a.addWaypoint {display: none; position: absolute; margin-top: 28px; left: 7px; transform: scale(-1, 1);}
.panel.journeyplanner.search.open input {width: calc(100% - 122px); padding-left: 43px; padding-right: 44px; transform: scale(1);}
.panel.journeyplanner.search.open .inputDiv:first-of-type input {padding-right: 35px; width: calc(100% - 127px);}
.panel.journeyplanner.search.open a.reorderWaypoint {display: inline-block;}
.panel.journeyplanner.search.open a.removeWaypoint {display: inline-block;}
.panel.journeyplanner.search.open a.addWaypoint {display: inline-block;}
.panel.journeyplanner.search.open a.locationTracking {display: inline-block;}
.panel.journeyplanner.search.open #getRoutes {display: inline-block;}


.panel.journeyplanner.search ul.segmented-control {display: table; margin: 5px auto; padding: 0;}
.panel.journeyplanner.search ul.segmented-control li {display: table-cell; margin: 0; padding: 0; color: #cc5959; list-style-type: none;}
.panel.journeyplanner.search ul.segmented-control li:first-child label {border-top-left-radius: 30px; border-bottom-left-radius: 30px;}
.panel.journeyplanner.search ul.segmented-control li:last-child label {border-top-right-radius: 30px; border-bottom-right-radius: 30px;}
.panel.journeyplanner.search ul.segmented-control li.active label {color: #f5f5f5; background-color: #cc5959;}
.panel.journeyplanner.search ul.segmented-control label {display: block; margin: 0 -1px -1px 0; width: 7em; padding: 9px; border: 1px solid #ddd; text-align: center; cursor: pointer; transition: transform .2s; font-size: 10pt;}
.panel.journeyplanner.search ul.segmented-control label:hover {background: #fafafa; transform: scale(1.05);}
.panel.journeyplanner.search hr {width: calc(100% + 40px); margin: 4px 0 4px -20px;}

.panel.journeyplanner.search ul.recent-journeys, .panel.journeyplanner.search ul.recent-searches {max-height: 111px; overflow-y: scroll; overflow-x: hidden; margin-right: -35px;}
.panel.journeyplanner.search ul.places {max-height: 100px; overflow-x: scroll; margin: 0 -20px;}
.panel.journeyplanner.search ul.recent-journeys a.clearRecentJourneys, .panel.journeyplanner.search ul.recent-searches a.clearRecentSearches {padding-bottom: 10px;}
.panel.journeyplanner.search ul.recent-searches img {height: 30px; padding-right: 15px;}

.panel.journeyplanner.search .recent-items .shortcutHorizontalScroll {display: inline-block; overflow-x: scroll; padding-left: 20px; width: 100%; margin: 0 0 0 -20px;}
.panel.journeyplanner.search .recent-items ul.shortcut-icons {list-style-type: none; width: 450px; padding: 0; margin: 0; display: block; scrollbar-width: none;}
.panel.journeyplanner.search .recent-items ul.shortcut-icons li a {position: relative; float: left; width: 36px; height: 36px; line-height: 48px; margin: 5px; background: #cc5959; color: #f5f5f5;}
.panel.journeyplanner.search .recent-items ul.shortcut-icons li a.poi {opacity: 1; background-color: #fefefe; border-color: #dc4f55; border: 1px solid; border-radius: 50%;}
.panel.journeyplanner.search .recent-items ul.shortcut-icons li a.poi.disabled {opacity: .5; border-color: transparent;}
.panel.journeyplanner.search .recent-items ul.shortcut-icons li a.poi img {width: 56%; height: 56%;}

.panel.journeyplanner.search .recent-items hr {width: 100%; margin-right: -10px;}
.panel.journeyplanner.search .recent-items li {padding-right: 2px 15px 0 0; transition: transform .2s;}
.panel.journeyplanner.search .recent-items li:hover {transform: translate(5px, 0);}
.panel.journeyplanner.search .recent-items li:hover > a {transform: translate(-5px, 0) scale(1.15);}
.panel.journeyplanner.search .recent-items li p {margin: 4px 0;}
.panel.journeyplanner.search .recent-items li p.destination {display: inline; font-size: 16px; line-height: 19px;}
.panel.journeyplanner.search .recent-items li p.address {width: 320px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.panel.journeyplanner.search .recent-items li p.distance {float: right; padding: 0 20px 0 20px; background: left no-repeat; background-image: url('/images/icon-cyclist-small.svg');}
.panel.journeyplanner.search .recent-items ul.recent-journeys li img {padding-right: 15px;}
.panel.journeyplanner.search .recent-items li p.distance, .panel.journeyplanner.search .recent-items p.address {font-size: 14px; line-height: 16px; color: #8e8c8c;}
.panel.journeyplanner.search .recent-items li a {float: right; transition: transform .2s;}

.panel.journeyplanner.search .recent-items ul.recent-searches li a {padding-right: 20px;}
.panel.journeyplanner.search .recent-items ul.recent-searches li p.destination {line-height: 34px;}

/* Route speed select panel */
.panel.journeyplanner.select {height: 300px; transition: 0.5s;}
.panel.journeyplanner.select *:focus {outline: none;}
.panel.journeyplanner.select.minimised {height: 28px;}
.panel.journeyplanner.select a.action {margin-right: -20px;}
.panel.journeyplanner.select p {margin-top: 15px; text-align: center;}
.panel.journeyplanner.select p.location {font-size: 13px; margin: 10px; padding: 0; color: #8e8c8c;}
.panel.journeyplanner.select ul.journeyStats {padding-bottom: 15px;}
.panel.journeyplanner.select ul.journeyStats li a {color: #212322;}
.panel.journeyplanner.select .loader {display: block; margin: 5% auto; width: 38px; height: 38px;}
.panel.journeyplanner.select #resultsTabs {max-height: 350px; padding-left: 20px; margin-top: -9px;}
.panel.journeyplanner.select #itineraries {max-height: 350px; overflow-y: scroll; overflow-x: hidden; width: calc(100% + 40px); margin-left: -30px; margin-right: -20px;}
.panel.journeyplanner.select #itineraries .ui-tabs-panel table.itinerary {width: 100%; margin-bottom: 130px;}
.panel.journeyplanner.select ul.ui-tabs-nav {display: table; margin: 10px auto; padding: 0;}
.panel.journeyplanner.select ul.ui-tabs-nav li {display: table-cell; margin: 0; padding: 0; color: #cc5959; list-style-type: none;}
.panel.journeyplanner.select ul.ui-tabs-nav li:first-child label {border-top-left-radius: 30px; border-bottom-left-radius: 30px;}
.panel.journeyplanner.select ul.ui-tabs-nav li:last-child label {border-top-right-radius: 30px; border-bottom-right-radius: 30px;}
.panel.journeyplanner.select ul.ui-tabs-nav .ui-tabs-active label {color: #f5f5f5; background-color: #cc5959;}
.panel.journeyplanner.select ul.ui-tabs-nav label {display: block; margin: 0 -1px -1px 0; width: 5em; padding: 7px; border: 1px solid #ddd; text-align: center; cursor: pointer;}
.panel.journeyplanner.select ul.ui-tabs-nav .ui-tabs-tab:hover {background: #fafafa;}

.strategypopup {max-width: 150px; width: auto; max-height: 80px; cursor: pointer;}
.strategypopup .details {background-color: #f5f5f5; padding: 5px; opacity: 0.8; border-radius: 10px; border: 2px solid;}
.strategypopup .details:hover {opacity: 1;}
.strategypopup .details p {padding: 0; margin: 0 0 5px; font-family: 'Josefin Sans', sans-serif; color: #212322;}
.strategypopup .details ul li {list-style-type: none; display: block; text-align: left;}
.strategypopup .details ul li img {display: inline-block; margin: 0 5px 0 0; padding: 0;}
.strategypopup .details ul li p {display: inline-block; margin: 0; padding: 0; text-align: left;}
.strategypopup .mapboxgl-popup-content {min-width: auto; border-radius: 10px; padding: 0; background: transparent; box-shadow: none; font-size: 1em;}
.strategypopup .mapboxgl-popup-content p {margin-top: 0 !important;}
.strategypopup .mapboxgl-popup-close-button {display: none;}
.strategypopup .mapboxgl-popup-content-wrapper {padding: 1%;}

.panel.journeyplanner.select .mapboxgl-popup-content .details {opacity: 0.5; border-radius: 10px;}
.panel.journeyplanner.select ul {margin: 15px 0 0 0; padding: 0;}
.panel.journeyplanner.select h2 {text-align: center; font-size: 20px;}
.panel.journeyplanner.select ul li {list-style-type: none; display: inline-block;}
.panel.journeyplanner.select ul li img {display: inline-block; margin: 0 5px 0 15px; padding: 0;}
.panel.journeyplanner.select ul li p {display: inline-block; margin: 0; padding: 0; text-align: left; font-size: 11pt;}
.panel.journeyplanner.select .elevation-chart-container {position: absolute; bottom: 0; left: 0; height: 50px; width: 118%; z-index: 1; background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, 90%,  rgba(255, 255, 255, 0) 100%)}
.panel.journeyplanner.select.minimised .elevation-chart-container, .panel.journeyplanner.select.minimised .elevation-scrubber {display: none;}
.panel.journeyplanner.select span.elevation {position: absolute; display: none; bottom: 342px; right: 4px; padding: 5px; padding-left: 25px; color: #ffffff; opacity: .75; border-radius: 40px; line-height: 20px; z-index: 3; background: url('/images/icon-elevation.svg') no-repeat, #212322; background-position: 7px 50%;}
.panel.journeyplanner.select span img {padding: 0 5px 0 0;}
.panel.journeyplanner.select .elevation-scrubber {position: absolute; bottom: -8px; z-index: 2;}
.cyclistmarker {height: 32px; width: 32px;}

/*
 * Photomap and POI panels
 */

/* Photomap card */
.panel.photomap ul li label {display: inline-block; width: 100px;}
.panel.photomap p {display: inline; line-height: 35px;}
.panel.photomap hr {width: calc(100% + 40px); margin-left: -20px;}
.panel.photomap .photomapFileUploadPreview {max-width: 100%; height: auto; max-height: 280px; overflow: hidden;}
.panel.photomap .photomapFileUploadPreview img {max-width: 100%; height: auto; max-height: 280px; margin: 0 auto 10px; display: block; object-fit: contain;}
.panel.photomap.add-photo input {width: 100%;}
.panel.photomap.add-details ul li label {display: inline-block; width: 100px;}
.panel.photomap.add-details img {border-radius: 25px;}
.panel.photomap.uploading {background-color: #dc4f55;}
.panel.photomap.uploading img {margin-left: 15px; padding: 0 30%; width: 40%;}
.panel.photomap.uploading p {display: inline-block; width: 40%; margin: 10px 30%; color: #fbf6f8; text-align: center;}
.panel.photomap.uploading progress {margin: 10px 30%; width: 40%;}
.panel.photomap.uploading a {display: block; color: #c4c1c2; text-align: center;}
.panel.photomap.uploading span {display: block; margin: auto; margin-bottom: 17px;}
.wizard.photomap p {line-height: inherit;}

/* Places card */
.panel.pois {max-height: 39%;}
.panel.pois .poisScrollableContainer {height: 196px; overflow-y: scroll;}
.panel.pois ul {text-align: center;}
.panel.pois ul li {display: inline-block; height: 90px; width: 80px; margin: 0 7px 15px 0; vertical-align: top;}
.panel.pois ul li input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} /* Hide the browser's default checkbox */
.panel.pois ul li label {display: inline-block; opacity: 0.75; width: 65px; height: 65px; margin: 2px; border: 1px solid transparent; border-radius: 50%; background: #f5f5f5; color: #212322; text-decoration: none; text-align: center; box-shadow: 0 0 3px gray;}
.panel.pois ul li input:checked ~ label {opacity: 1; background-color: #fefefe; border-color: #dc4f55}
.panel.pois ul li label img {display: block; padding: 15px;}
.panel.pois ul li label span {display: inline-block; text-align: center; word-wrap:normal; font-size: 13px; margin-top: 10px;}
@media screen and (max-width: 680px) {.panel.pois {max-height: 24%;}}
@media screen and (max-width: 480px) {.panel.pois {max-height: 50%;}}

/*
 * Popup panels (custom)
 */

/* Vex dialog custom styling */
.vex.vex-theme-plain .vex-content {border-radius: 25px;}
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-primary {border-radius: 10px; background: #cc5959;}
.vex.vex-theme-plain .vex-content {font-family: 'Josefin Sans', sans-serif;}

/* Popup card default styling */
#map .popup {display: block;} 
.popup {display: none; margin: 40% auto 20%; width: 94%; max-width: 400px; z-index: 20;}
.popup a.ui-button.close-button {position: absolute; top: 0; left: 0; margin: 10px; line-height: 60px;}
.mapboxgl-popup.collisions {z-index: 1;}

/* Photomap popup */
.popup.photomap {perspective: 1000px; position: relative; background-color: transparent; height: 500px; margin: 8% auto; z-index: 20;}
.popup.photomap .popup-card {border-radius: 20px; overflow-x: hidden; background-color: #fbf6f8; box-shadow: 0 0 10px gray}
.popup.photomap .loader {display: inline-block; position: fixed; margin: auto; width: 38px; height: 38px;}
.popup.photomap a {position: absolute; bottom: 0; margin: 20px; padding: 0; line-height: 15px; color: #dc4f55; text-decoration: none;}
.popup.photomap a.share {bottom: 0; left: 0;}
.popup.photomap a.flip {margin-left: 70%; right: 0;}
.popup.photomap .flip-card-inner {position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d;}
.popup.photomap .flip-card-inner.flipped {transform: rotateY(180deg);}
.popup.photomap .flip-card-front, .flip-card-back {position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.popup.photomap .flip-card-front img.popup-photo {height: auto; max-height: 74%; min-height: 20%; width: 100%; overflow: hidden; object-fit: cover;}
.popup.photomap .flip-card-front p.key {display: -webkit-box; margin: 6px 0 15px 20px; line-height: 1.2em; max-height: 4.8em; overflow: auto; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.popup.photomap .flip-card-back {transform: rotateY(180deg); background: #212322; text-align: left;}
.popup.photomap .flip-card-back img {margin: 15px;}
.popup.photomap a.get-directions {position: relative; float: right; margin: 0 0 0 5px;}
.popup.photomap .flip-card-back hr {width: calc(100% - 40px);}
.popup.photomap .flip-card-back ul li img {width: 16px; margin: 10px 10px 0 20px;}
.popup.photomap .flip-card-back p {display: inline-block; margin: 0; color: #fbf6f8; font-size: 13px;}
.popup.photomap .flip-card-back p.key {margin: 0 0 15px 20px; color: #c4c1c2; padding-right: 5px;}

/* Places popup */
.popup.places {height: 83%; max-height: 550px; width: 90%; max-width: 300px; margin: 6% 10% 25%; border-radius: 20px; overflow-x: hidden; background-color: #fbf6f8; position: absolute; z-index: 20;}
.popup.places a.ui-button.close-button {left: revert; right: 0;}
.popup.places .place-photo {height: 63%; padding-bottom: 25px; margin: -2px;}
.popup.places .place-photo iframe {height: 100%;}
.popup.places h2 {display: inline-block; width: 70%; font-size: 20px; font-variant: normal; margin: 0 0 0 20px; text-align: left;}
.popup.places img.get-directions {float: right;}
.popup.places a.share {position: absolute; right: 15px; bottom: 15px;}
.popup.places p {width: 90%; margin: 10px 20px;}
.popup.places ul {margin: 10px 20px; padding: 0;}
.popup.places ul li img {display: inline-block; margin: 0; padding: 0; width: 20px;}
.popup.places ul li p {margin: 10px; display: inline-block; width: 200px;}
.popup.places ul li p.phone {color: #dc4f55;}

/* System notification slide-down */
.popup.notification {position: relative; margin: 20px 7.5%; padding: 10px; width: 80%; height: 60px; border-radius: 8px; background-color: #fbf6f8; transition: none; z-index: 99;}
.popup.notification img {height: 30px; width: 30px; background-color: #fefefe; border-radius: 5px; padding: 15px; margin-right: 10px; float: left}
.popup.notification p {display: inline-block; margin: 0 0 0 10px;}
.popup.notification p.direction {width: 180px; margin-top: 10px; font-size: 17px;}
.popup.notification p.time {color: #dc4f55; margin-top: 10px; font-size: 14px;}
.popup.notification p.distance {color: #8e8c8c; font-size: 14px;}

/*
 * Popup panels (generic)
 */

/* Popups (adjustments to emulate Leaflet.js) */
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
.mapboxgl-popup {animation: fadein 0.2s;}
.mapboxgl-popup-content {min-width: 300px; max-width: 300px; border-radius: 12px; padding: 13px 19px; box-shadow: 0 3px 14px rgba(0,0,0,0.4); text-align: left;}
.mapboxgl-popup-close-button {font-size: 16px; font-family: Tahoma, Verdana, sans-serif; color: #c3c3c3; font-weight: bold;}
.mapboxgl-popup-close-button:hover {color: #999; background-color: white; border-top-right-radius: 12px;}
body .mapboxgl-map {line-height: 1.4;}

/* Popups */
#map .mapboxgl-popup-content.autowidth {min-width: 0;}
#map .mapboxgl-popup-content .scrollable {max-height: 200px; overflow-y: auto; margin-top: 0;}
#map .mapboxgl-popup-content .scrollable p:first-child {margin-top: 0;}
#map .mapboxgl-popup-content p {margin: 0.5em 0; padding: 0;}
#map .mapboxgl-popup-content table {border-collapse: collapse; margin: 10px 0 15px;}
#map .mapboxgl-popup-content table td {border-bottom: 1px solid #e9e9e9; padding: 2px 10px 2px 0; vertical-align: top; text-align: left;}
#map .mapboxgl-popup-content table tr:first-child {border-top: 1px solid #e9e9e9;}
#map .mapboxgl-popup-content span.unknown {color: #ccc; font-style: italic;}
#map .mapboxgl-popup-content a.edit {float: right;}
#map .mapboxgl-popup-content a.edit {color: #ccc; text-decoration: none;}
#map .mapboxgl-popup {z-index: 2;}

/* Layer-specific popup styling */
.mapboxgl-popup.trafficcounts .mapboxgl-popup-content {min-width: 500px; max-width: 500px;}
.mapboxgl-popup.trafficcounts table td, #map .mapboxgl-popup.trafficcounts table th {font-size: 0.83em;}
.mapboxgl-popup.trafficcounts table th {text-align: left; line-height: 2em;}
.mapboxgl-popup.trafficcounts table td {text-align: right;}


/*
 * Account management and sign-in
 */

/* Sign-in panel specific styles */
.panel.account .loader {display: none; position: absolute; right: 5px; top: 5px; margin: 10px 10px 0 0; width: 32px; height: 32px;}
.panel.account a.returnHome {left: 0; margin-left: 3px;}
.panel.account input {width: calc(100% - 40px); margin: 5px auto;}
.panel.account h3 {width: 100%; line-height: 30px; text-align: center; margin-bottom: 0;}
.panel.account p {margin: 0 20px; padding: 0; text-align: left;}
.panel.account .showCreateAccount {display: none;}
.panel.account .create-account {position: relative; width: 50%; height: 50px; margin: 10px auto; border-radius: 50px; color: #fbf6f8;}
.panel.account img.showOrHidePassword {display: none; position: absolute; right: 40px; top: 132px;}

/* Create account specific card styles */
.wizard.account input {width: calc(100% - 40px);}
.wizard.account .panel.creating-account {background-color: #dc4f55;}
.wizard.account .panel.creating-account h1, .panel.creating-account h2, .panel.creating-account p {width: 60%; margin: 5px 20%; text-align: center; color: #fbf6f8;}
.wizard.account .panel.creating-account h1 {font-size: 32px;}
.wizard.account .panel.creating-account h2 {font-size: 14px;}
.wizard.account .panel.creating-account img.wheel {margin-left: 15px; padding: 0 30%; width: 40%;}
.wizard.account img.showOrHidePassword {display: none; position: absolute; right: 40px; bottom: 95px;}

/*
 * Settings, about, feedback, map and blog styling panels
 */

/* Settings panel */
.panel.settings h3 {width: 100%; text-align: center; margin: 10px 0;}
.panel.settings hr {width: calc(100% + 40px); margin: 5px 0 10px -20px;}
.panel.settings ul {padding: 10px;}
.panel.settings ul li img {display: inline-block; padding: 10px 0; vertical-align: middle;}
.panel.settings ul li a {display: inline-block; color: #dc4f55; text-decoration: none; overflow: hidden;}
.panel.settings ul li a.ui-button-large {position: relative; width: calc(100% - 80px); margin-left: 20px; padding: 0 15px; height: 40px; border-radius: 50px; color: #fbf6f8; line-height: 40px; text-align: left;}
.panel.settings ul li a.set {color: #212322; background-color: #fbf6f8;}
.panel.settings p {float: left; width: 270px; text-align: left; margin: 10px 0;}
.panel.settings .switch {display: inline-block; float: none;}
.panel.settings img.disclosure {padding: 12.5px; float: right;}
.panel.settings img.cycle-left {display: inline;}
.panel.settings img.cycle-right {display: inline;}
.speed-slider {-webkit-appearance: none; position: relative; width: 50%; height: 2px; border-radius: 5px; background: #d3d3d3; outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.speed-slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #dc4f55; cursor: pointer;}
.speed-slider::-moz-range-thumb {width: 25px; height: 25px; border-radius: 50%; background: #4caf50; cursor: pointer;}
.panel.settings p.speed {display: inline-block; width: 20%; padding-top: 10px; margin: 5px 0 15px 40px;}
.panel.settings p.distance {width: 100px;}
.panel.settings ul.segmented-control {display: inline-table; margin: 0 auto 10px; padding: 0;}
.panel.settings ul.segmented-control li {display: table-cell; margin: 0; padding: 0; color: #cc5959; list-style-type: none; font-size: 12px;}
.panel.settings ul.segmented-control li:first-child label {border-top-left-radius: 30px; border-bottom-left-radius: 30px;}
.panel.settings ul.segmented-control li:last-child label {border-top-right-radius: 30px; border-bottom-right-radius: 30px;}
.panel.settings ul.segmented-control li.active label {color: #f5f5f5; background-color: #cc5959;}
.panel.settings ul.segmented-control label {display: block; margin: 0 -1px -1px 0; padding: 1em .25em; border: 1px solid #ddd; width: 110px; text-align: center; cursor: pointer;}
.panel.settings ul.segmented-control label:hover {background: #fafafa;}
.panel.settings #about-cyclestreets {margin-top: 10px;}

/* About panel */
.panel.about {max-height: 80%; width: calc(100% - 40px); overflow-y: scroll;}
.panel.about::before {display: none;}
.panel.about h3 {width: 100%; text-align: left; margin: 25px 0 0 0;}
.panel.about p {padding: 0; margin: 15px 0 0 0; line-height: 22px;}

/* Map style panel */
.panel.map-style ul {width: calc(100% + 40px); margin: 0 0 0 -20px; padding: 0 0 20px 20px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}
.panel.map-style ul li {display: inline-block;}
.panel.map-style ul li input {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} /* Hide the browser's default style */
.panel.map-style ul li input:checked ~ label img {border-color: #cc5959;}
.panel.map-style ul li label {display: inline-block; vertical-align: top;}
.panel.map-style ul li label img {display: block; width: 140px; height: 140px; margin: 10px; border: 1px solid transparent; border-radius: 15px; -webkit-touch-callout: none;}
.panel.map-style ul li label h3 {font-size: 1em; font-weight: normal; text-overflow: ellipsis; text-align: center; margin: 0 auto 7px;}
.panel.map-style ul li label p {white-space: normal; width: 140px; height: 25px; font-size: 12px; margin: 0 auto; text-align: center;}

/* Feedback panel and sign-up success panel*/
.wizard.feedback .panel.feedback label {display: inline-block; width: 80px; margin-top: 20px;}
.wizard.feedback .panel.feedback input {display: inline-block; width: calc(100% - 120px); height: 18px; line-height: 18px; margin-top: 10px; padding: 10px;}
.wizard.feedback .panel.feedback textarea {display: inline-block; width: calc(100% - 120px); margin-top: 10px; padding: 10px;}
.wizard.feedback .panel.feedback-submit, .panel.logged-in {background-color: #dc4f55;}
.wizard.feedback .panel.feedback-submit h1, .panel.feedback-submit  h2, .panel.feedback-submit p, .panel.logged-in p {width: 60%; margin: 5px 20%; text-align: center; color: #fbf6f8;}
.wizard.feedback .panel.feedback-submit h1 {font-size: 32px;}
.wizard.feedback .panel.feedback-submit h2 {font-size: 14px;}
.wizard.feedback .panel.feedback-submit img.wheel, .panel.logged-in img.wheel {margin: 0 35%; padding: 0; width: 30%;}

/* Blog panel */
.panel.blog, .panel.donate {height: 90%;}
.panel.blog, .panel.donate h2 {padding-bottom: 5px;}
.cyclestreetsExternalView {height: 100%; width: calc(100% + 40px); margin-left: -20px; overflow:auto;}

/* Screen-size specific adjustments */
@media screen and (max-width: 320px) {
    nav li a {font-size: 15px;}
    nav #secondary-menu li a {font-size: 15px;}
    nav ul ul li label {font-size: 13px;}
    input, select, textarea {font-size: 12px;}
    select {height: 40px;}
    .panel.journeyplanner.select ul.ui-tabs-nav label {width: auto;}
    .panel.journeyplanner.search ul.segmented-control label {width: auto;}
    .panel.journeyplanner.select #itineraries .ui-tabs-panel table.itinerary {font-size: 13px;}
    .popup.notification p.direction {font-size: 15px; width: 100px;}
    .panel.journeyplanner.select ul li img {padding: 0; margin-right: 0;}
    .panel.settings ul li a.set {font-size: 14px;}
    .popup.places {margin: 2.5%; height: 82%;}
    .panel.journeyplanner.select ul li p {font-size: 9pt;}
    .panel.journeyplanner.select p.location {margin: 0;}
    .panel.journeyplanner.select {max-height: 239px;}
    .panel.journeyplanner.search .recent-items li p {margin: 0;}
    .popup.photomap {width: 92%; margin: 5% auto; height: 392px;}
    .lines td, .lines th {padding: 0;}
    .mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-in, .mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-out, .mapboxgl-ctrl-group .mapboxgl-ctrl-compass {display: none;}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {background-color: #353433;}
    .panel, .popup.notification, .mapboxgl-popup-content {background-color: #353433;}
    .panel::before {filter: invert(81%);}
    input, textarea {background-color: #454545; color: #f0f0f0;}
    #browse-search-box {color: #353433;}
    ul.segmented-control label, .panel.journeyplanner.select ul.ui-tabs-nav label {border: 1px solid #454545; color: #fff;}
    ul.segmented-control label:hover, .panel.settings ul.segmented-control label:hover, .panel.journeyplanner.search ul.segmented-control label:hover, .panel.journeyplanner.select ul.ui-tabs-nav label:hover {background-color: #7f7f7e;}
    .panel.journeyplanner.select ul.ui-tabs-nav .ui-tabs-tab:hover {background: none;}
    h2, h3, h4, h5, p, .itinerary td, label, .panel.pois span {color: #f0f0f0;}
    .panel.settings img {filter: invert(100%);}
    .panel.journeyplanner.select .elevation-chart-container {background: linear-gradient(to top, rgba(53, 52, 51, 1) 0%, 90%,  rgba(53, 52, 51, 0) 100%);}
    .popup.places, .popup.photomap .popup-card {background-color: #353433;}
    .turnsicons {filter: hue-rotate(-44deg) contrast(200%) invert(100%);}
}