body {
  margin: 0;
  padding: 0;
}

.map_container {
  position: relative;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* margin-left: -0.65rem; */
}

.map {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

/* Reset */

.map_container {
  font-size: initial;
  line-height: initial;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.map_container * {
  line-height: initial;
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  box-sizing: initial;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.map_container label {
  margin-bottom: initial;
  font-weight: initial;
  display: inline;
}

.map_container input,
.map_container button,
.map_container select,
.map_container textarea {
  font-weight: initial;
  margin: initial;
  padding: initial;
}

.map_container h1,
.map_container h2,
.map_container h3,
.map_container h4 {
  font-size: initial;
  margin: initial;
  font-weight: initial;
  line-height: initial;
}

.map_container table {
  border-collapse: initial;
  border-spacing: initial;
  margin: initial;
}

.map_container td,
.map_container th {
  padding: initial;
}

/* General styling */

/* @font-face {
  font-family: "Plus Jakarta Sans", sans-serif;
  src: url("fonts/Karla-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  src: url("fonts/Karla-Italic-VariableFont_wght.ttf");
} */

.map_container h1,
.map_container h2,
.map_container h3,
.map_container h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
}

.map_container p {
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.3em;
}

.map_container hr {
  border: 3px solid orange;
}

.map_container hr.minor {
  border: 1px dotted #ccc;
}

a {
  color: #000000;
  /* #009fda */
}

/* Sidepanel positioning and control adjustments */

.maplibregl-ctrl-attrib {
  background-color: rgba(255, 255, 255, 0.85) !important;
  text-align: right;
}

.maplibregl-ctrl-attrib-inner {
  font-size: 11px !important;
}

/* .maplibregl-ctrl-top-left,
.maplibregl-ctrl-bottom-left {
  left: 305px;

} */

.wide_sidepanel .maplibregl-ctrl-top-left,
.wide_sidepanel .maplibregl-ctrl-bottom-left {
  left: 445px;
}

.maplibregl-ctrl-bottom-right {
  right: 182px;
}

.filters_button {
  display: none !important;
}

.map_button_bar {
  right: 190px;
  z-index: 1;
  /* appear above shadow */
}

.filter_panel_hidden .map_button_bar,
.filter_panel_closed .map_button_bar {
  right: 13px !important;
}

.filter_panel_hidden .filters_button {
  display: none;
}

.filter_panel_closed .filters_button {
  display: inline-flex !important;
}

.filter_panel_hidden .maplibregl-ctrl-bottom-right,
.filter_panel_closed .maplibregl-ctrl-bottom-right {
  right: 10px;
}

.filter_panel_hidden .autocomplete,
.filter_panel_closed .autocomplete {
  right: 12px;
}

.sidepanel_closed .maplibregl-ctrl-top-left,
.sidepanel_hidden .maplibregl-ctrl-top-left {
  left: 10px !important;
}

.sidepanel_closed .maplibregl-ctrl-bottom-left,
.sidepanel_hidden .maplibregl-ctrl-bottom-left {
  left: 10px !important;
}

.sidepanel_closed .leap_button,
.sidepanel_hidden .leap_button {
  left: 60px !important;
}

.bottom_buttons {
  display: none;
}

/* Map UI */

.map_button_bar {
  position: absolute;
  top: 10px;
  height: 40px;
  padding: 0;
  /*  background-color: rgba(255,0,0,0.3);*/
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  line-height: 20px;
  padding-left: 5px;
  transition: left 0.15s;
  text-align: right;
}

.map_button_bar div {
  display: flex;
  gap: 10px;
}

.map_button_bar .checkbox_button,
.map_button_bar .radio_button,
.map_button_bar .button,
.map_button_bar .open_button,
.map_button_bar .search_button,
.map_button_bar .collapse_button {
  background-color: white;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  cursor: pointer;
  margin-right: inherit;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  margin: 0;
  height: 36px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #cdcdce;
  -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
}

.map_button_bar .checkbox_button:hover,
.map_button_bar .search_button:hover,
.map_button_bar .radio_button:hover,
.map_button_bar .button:hover,
.map_button_bar .open_button:hover,
.map_button_bar .search_button:hover,
.map_button_bar .collapse_button:hover {
  background-color: #009fda;
  color: white;
}

.map_button_bar .open_button::after {
  font-size: x-small;
  padding-left: 4px;
  content: "▼";
  color: #888;
  line-height: 1em;
}

.map_button_bar .collapse_button::after {
  font-size: x-small;
  padding-left: 4px;
  content: "▶";
  color: #888;
  line-height: 1em;
}

.map_button_bar .radio_button::before {
  padding-right: 4px;
  content: "ⵔ";
  color: #aaa;
}

.map_button_bar .radio_button.selected::before {
  content: "ⵙ";
  color: #000;
}

.map_button_bar .checkbox_button::before {
  padding-right: 4px;
  content: "▢";
  font-size: small;
}

.map_button_bar .checkbox_button.selected::before {
  content: "☑";
  font-size: large;
  color: #000;
}

/* Button bar icons */

.map_button_bar .search_button:before,
.map_button_bar .open_button:before,
.map_button_bar .open_button:after,
.map_button_bar .filters_button:before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  font-size: 16px;
  color: #009fda;
  line-height: 16px;
  margin-right: 5px;
}

.map_button_bar .checkbox_button:hover:before,
.map_button_bar .radio_button:hover:before,
.map_button_bar .open_button:hover:after,
.map_button_bar .open_button:hover:before,
.map_button_bar .filters_button:hover:before,
.map_button_bar .search_button:hover:before {
  color: #ffffff;
}

.map_button_bar .search_button:before {
  content: "\f002";
}

.map_button_bar .open_button:before {
  content: "\f672";
}

.map_button_bar .filters_button:before {
  content: "\f1de";
}

.map_button_bar .open_button:after {
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  font-size: 16px;
  color: #009fda;
  line-height: 16px;
  margin-left: 5px;
  margin-right: 0;
  padding: 0;
  position: relative;
  top: -3px;
  content: "\f0dd";
}

/* Map popups */

/* AAM - 25 February 2025
 * Adjust typography to use Karla at 14px
 */

.map_popup .maplibregl-popup-content {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 5px 10px 8px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 3px solid #009fda;
  -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
}

.maplibregl-popup-tip {
  border-top-color: #009fda !important;
}

.map_popup .maplibregl-popup-content ul {
  padding-inline-start: 0;
  list-style-type: none;
  margin-block-end: 0;
}

.map_popup img {
  max-width: 100%;
}

.map_popup h3 {
  margin: 0 0 3px 0;
}

.popup_multiple .map_popup_item {
  padding-bottom: 12px;
}

.popup_multiple .map_popup_item:last-child {
  padding-bottom: 0;
}

button.maplibregl-popup-close-button:focus {
  outline: none !important;
}

/*
.map_popup {
  font-size: 16px;
  font-weight: 300;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #cdcdce;
  -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
}

.map_popup .maplibregl-popup-content {
  margin: 0;
  padding: 0;
  border: none;
  background-color: inherit;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
*/

.leap_button {
  display: none;
  position: absolute;
  bottom: 8px;
  left: 355px;
  border-radius: 15px;
  border: 1.5px solid black;
  background-color: white;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  vertical-align: middle;
  padding: 2px 10px 2px 10px;
  cursor: pointer;
}

.wide_sidepanel .leap_button {
  left: 525px;
  /* sidepanel width */
}

/* Autocomplete (see also .search_button) */

.autocomplete {
  position: absolute;
  width: 290px;
  top: 10px;
  right: 190px;
  z-index: 51;
}

.aa-Panel {
  z-index: 51;
}

/* make sure autocomplete dropdown appears above map controls */
.aa-LoadingIndicator {
  display: none;
}

:root {
  /* see https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic/ */
  --aa-font-family: "Plus Jakarta Sans", sans-serif;
}

.autocomplete form.aa-Form {
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  border: 1px solid #cdcdce;
  -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
}

/* Forms */

.form_popup:empty {
  display: none;
}

.form_popup {
  font-family: "Plus Jakarta Sans", sans-serif;
  position: absolute;
  background-color: white;
  top: 50px;
  left: 315px;
  /* sidepanel size */
  padding: 5px;
  border: 1px solid black;
  border-radius: 15px;
}

.wide_sidepanel .form_popup {
  left: 485px;
  /* sidepanel size */
}

.ideas_form_popup {
  position: absolute;
  top: 55px;
  width: 140px;
  display: none;
  font-size: 16px;
  font-weight: 300;
  padding: 10px 15px;
  border: 1px solid #cdcdce;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
}

.ideas_form_popup > div > div {
  margin: 5px 0;
}

/* Controls container */

.controls_container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.controls_container > * {
  pointer-events: auto;
}

/* Centred modal */

.map_modal {
  background-color: white;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  z-index: 5000;
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 300px;
  min-width: 250px;
  text-align: justify;
}

.map_modal h2 {
  text-align: center;
  font-size: 1.2em;
}

.map_modal button {
  display: block;
  width: calc(100% - 20px);
}

.map_hide_all {
  z-index: 4999;
  position: absolute;
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Routeplanner */

.place_search > div {
  display: inline-block;
}

.place_search > div:first-child {
  width: 50px;
}

.place_search .aa-InputWrapperPrefix {
  display: none !important;
}

.place_search .aa-InputWrapper {
  padding-left: 5px;
}

.place_search .aa-Form {
  height: 30px;
  min-width: 200px;
}

.route_planner_indent {
  margin-left: 52px;
}

.planner_controls {
  margin-top: 1.5rem;
  border-top: 1px solid #007fae;
  padding-top: 1.5rem;
}

.planner_summary {
  margin-bottom: 1.5rem;
}

.planner_popup .maplibregl-popup-close-button {
  font-size: large;
  padding: 2px 5px 0 0;
}

.planner_popup .set_from,
.planner_popup .set_to {
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border: 1px solid #f6b331;
  border-radius: 10px;
  color: #000;
  font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  width: 95px;
  font-size: 15px;
  line-height: 34px;
  font-weight: 400;
  text-decoration: none !important;
  padding: 0 18px;
  cursor: pointer;
  text-align: center;
  margin-top: 6px;
}

.planner_popup .set_from:hover,
.planner_popup .set_to:hover {
  color: white;
  background-color: #f6b331;
}

.offroad_warning {
  display: none;
}

.offroad_warning h2 {
  font-size: 1.4em !important;
  margin: 5px !important;
}

.route_planner {
  padding: 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.route_planner .place_search {
  padding-bottom: 8px;
}

.route_planner .engine_choice div:first-child {
  vertical-align: top;
  margin-top: 6px;
}

.engine_dropdown {
  padding: 1px;
  margin: 0;
  border: 1px solid #ccc;
  width: 120px;
  border-radius: 3px;
  overflow: hidden;
  background-color: #fff;
  background: #fff;
  position: relative;

  min-width: 200px;
  margin-left: 4px;
}

.engine_dropdown select {
  font-size: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  padding: 7px 8px 7px 4px;
  width: 130%;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.engine_dropdown:after {
  top: 50%;
  right: 5px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(0, 0, 0, 0);
  border-top-color: #000000;
  border-width: 5px;
  margin-top: -2px;
  z-index: 1;
}

.engine_dropdown select:focus {
  outline: none;
}

/* Side-panel */

.sidepanel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 440px;
  /* sidepanel size */
  left: 0px;
  background-color: rgba(255, 255, 255, 0.90);
  visibility: visible;
  transition: visibility 0.15s, left 0.15s;
  border-right: 1px solid #cdcdce;
  box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.25);
  /*box-shadow: inset 0 0 0 1px #cdcdce;*/
}

/* .wide_sidepanel .sidepanel {
  width: 470px;
} */

.sidepanel.transition_disabled {
  transition: none !important;
}

.sidepanel_hidden .sidepanel {
  display: none;
}

.sidepanel_controls {
  width: calc(100% - 20px);
  /* background-color: #f3f3f3; */
  padding: 10px 10px 5px 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.sidepanel_order {
  padding-left: 10px;
  font-size: small;
  margin-top: 2px;
}

.sidepanel_order select {
  margin-left: 4px;
}

.sidepanel_refresh {
  float: right;
}

.sidepanel_refresh button {
  all: unset;
  cursor: pointer;
  border-radius: 15px;
  padding: 1px 3px;
}

.sidepanel_refresh button:hover {
  background-color: #009fda !important;
  color: white;
}

.sidepanel_refresh {
  color: #bbb;
}

.sidepanel_refresh.enabled {
  color: #009fda;
}

.sidepanel_single .sidepanel_controls {
  display: none !important;
}

.no_sorting .sidepanel_controls {
  /* background-color: white; */
}

.lhpanel_toggle {
  font-family: Hiragino Sans, sans-serif;
  position: relative;
  float: right;
  right: -12px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #cdcdce;
  left: 20px; /* 13px*/
  height: 40px;
  top: calc(50% - 20px);
  width: 32px; /*20px*/
}

.lhpanel_toggle > span {
  display: inline-block;
  color: #365269; /* #009fda */
  margin-top: 11px;
  margin-left: 10px;
  font-size: 14px;
}

.sidepanel_back {
  margin: 0 0 15px 0;
  color: black;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  text-transform: none;
  display: none;
  font-size: 13px;
  line-height: 13px;
}

.sidepanel_back img {
  padding-right: 3px;
  height: 13px;
  vertical-align: bottom;
}

.sidepanel_inside {
  overflow-y: scroll;
  margin: 5%;
  width: 90%;
  font-size: inherit;
  max-height: calc(100% - 20px);
}

.sorting_enabled .sidepanel_inside {
  max-height: calc(100% - 60px);
}

.sidepanel_close,
.elevation_close {
  display: none;
}

/* overridden by responsive.css */

.sidepanel_closed .sidepanel_content {
  visibility: hidden;
}

.sidepanel_content h1,
.sidepanel h3 {
  font-size: 22px;
  color: black;
  margin: 0 0 1rem 0;
  font-weight: 700;
}

.sidepanel_content hr {
  border: inherit;
  background-color: #cdcdce;
  height: 1px;
  margin: 10px 0;
}

.sidepanel_order {
  display: none;
}

.sidepanel.sorting_enabled .sidepanel_order {
  display: block;
  padding-bottom: 8px;
}

.sidepanel_single .sidepanel_order {
  display: none !important;
}

/* RH filter panel */

.filter_panel {
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.3em;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0px;
  visibility: visible;
  transition: visibility 0.15s, right 0.15s;
  width: 180px;
  background-color: rgba(255, 255, 255, 1);
  border-left: 1px solid #cdcdce;
  box-shadow: -10px 0 10px 0 rgba(0, 0, 0, 0.25);
}

/* AAM - 25 February 2025
 * Adjust right-hand sidebar header components to be neater without adjusting the sidebar width
 * STARTS
 */

.filter_panel h2.section_header {
  display: flex;
  gap: 5px;
  align-items: start;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size: 16px !important;
}

.filter_panel h2.section_header img {
  width: 16px;
  position: relative;
  top: -4px;
  float: inherit;
  margin: 0;
}

/* ENDS */

.filter_panel_toggle {
  font-family: Hiragino Sans, sans-serif;
  position: relative;
  float: left;
  border-radius: 5px;
  cursor: pointer;
  z-index: 10;
  background-color: white;
  border: 1px solid #cdcdce;
  left: -20px;
  height: 40px;
  top: calc(50% - 20px);
  width: 32px;
}

.filter_panel_toggle > span::before {
  content: "▶";
}

.filter_panel_toggle > span {
  display: inline-block;
  font-size: 14px;
  color: #365269;
  margin-top: 11px;
  margin-left: 10px;
}

.filter_panel_hidden .filter_panel {
  display: none;
}

.filter_panel_closed .filter_panel {
  right: -170px;
}

.filter_panel_closed .filter_panel_content {
  visibility: hidden;
}

.filter_panel_closed .filter_panel_toggle > span::before {
  content: "◀";
}

.filter_panel_content {
  margin-top: 10px;
}

.filter_panel_inside {
  overflow-y: scroll;
  margin: 5px 10px 5px 20px;
  font-size: 16px;
  font-weight: 300;
  max-height: calc(100% - 10px);
}

.filter_panel .map_credit {
  display: none;
}

.icon_filters,
.icon_ideas {
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
}

.filter_section {
  margin-bottom: 15px;
  border-bottom: 1px solid #cdcdce;
  padding-bottom: 15px;
}

.filter_section > div > div > div {
  margin: 5px 0;
}

.input_header {
  display: block;
  font-weight: 600;
  margin: 15px 0 5px 0;
}

h2.section_header {
  font-size: 22px;
  color: black;
  margin-bottom: 10px;
}

.section_header input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
}

.section_header img {
  width: 16px;
  float: right;
  cursor: pointer;
  margin-top: 5px;
  margin-right: 15px;
}

.slider_subtitle {
  font-size: 13px;
}

.routes_filter input[type="range"] {
  width: 100px;
}

.inline_help_link {
  margin-left: 6px;
  text-decoration: none;
  color: #007faf;
  vertical-align: middle;
}

/* Elevation panel
   enabled by setting elevation_visible class */

.elevation {
  position: absolute;
  background-color: white;
  display: none;
  height: 100px;
  bottom: 10px;
  left: 310px;
  /* sidepanel size */
  right: 190px;
}

.wide_sidepanel .elevation {
  left: 480px;
  /* sidepanel size */
}

.elevation_inside {
  width: 100%;
  height: 100px;
}

.sidepanel_closed .elevation {
  left: 20px;
}

.sidepanel_hidden .elevation {
  left: 10px;
}

.filter_panel_closed .elevation {
  right: 20px;
}

.filter_panel_hidden .elevation {
  right: 10px;
}

.elevation_visible .elevation {
  display: block;
}

.elevation_visible .maplibregl-ctrl-bottom-left {
  bottom: 118px;
}

.elevation_visible .leap_button {
  bottom: 118px;
}

.elevation_visible .bottom_buttons {
  bottom: 118px !important;
}

.elevation_control button {
  font-size: large;
}

.elevation_close {
  /* note this is the same as sidepanel_close, but that's mobile-only */
  position: absolute;
  left: -8px;
  top: -17px;
  /* higher to avoid clashing with Y axis label */
  border-radius: 15px;
  width: 30px;
  height: 30px;
  background-color: #ddd;
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
  line-height: 22px;
  cursor: pointer;
  display: block;
}

.elevation_tooltip {
  pointer-events: none;
  position: absolute;
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.7);
  display: none;
}

/* Route content */

img.route_thumbnail,
.route_image img,
.poi_image img {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  max-width: 100%;
  margin: 10px 0 10px 0;
}

.sidepanel_content button:not(.aa-Autocomplete *),
.sidepanel_content a.buttonish,
.cuk_button {
  background-color: #fc5c1f;
  color: #ffffff;
  display: inline-block;
  border-radius: 10px;
  min-width: 140px;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none !important;
  padding: 0 0.95rem;
  height: 44px;
  line-height: 41px;
  cursor: pointer;
  text-align: center;
  margin-top: 1.5rem;
  border-width: 0px;
}

.sidepanel_content button:not(.aa-Autocomplete *):hover,
.sidepanel_content a.buttonish:hover,
.cuk_button:hover {
  background-color: #365269;
  color: #ffffff;
  text-decoration: none;
}

/*
.sidepanel_content button:not(.aa-Autocomplete *):after,
.sidepanel_content a.buttonish:after,
.cuk_button:after {
  content: " >";
}
*/

.sidepanel_content button:not(.aa-Autocomplete *):disabled,
.cuk_button:disabled {
  background-color: #ddd;
  color: white;
}

.sidepanel_content button:not(.aa-Autocomplete *):disabled:hover,
.cuk_button:disabled:hover {
  background-color: #ddd;
  color: white;
}

/* .sidepanel_content button:hover,
.sidepanel_content a.buttonish:hover,
.sidepanel_refresh button:hover,
.cuk_button:hover {
  color: white;
  background-color: #365269;
} */

.cuk_button.smaller {
  line-height: 43px;
  min-width: initial;
  padding: 0 14px;
  font-size: 16px;
  font-weight: bold;
}

.small_right_margin {
  margin-right: 10px !important;
}

/* Common list item styling */

.sidepanel_list_item img {
  max-width: 100%;
  max-height: 200px;
}

.sidepanel_list_item h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
  letter-spacing: -0.6px;
  margin: 8px 0 5px 0;
  font-size: 20px;
  color: #365269;
}

.sidepanel_list_item h4 {
  text-transform: none;
  font-weight: 400;
  font-size: 12px;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  color: #444;
}

.sidepanel_list_item,
.multiple_sidepanel > div {
  /*border-bottom: 1px solid #cdcdce;*/
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin-bottom: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.sidepanel_list_item:hover,
.multiple_sidepanel > div:hover {
  background-color: #e9ecef;
  border-radius: 7px;
}

.additional {
  margin-bottom: 10px;
}



/* Route content */

/*.route_metadata td { vertical-align: top; font-family: "Plus Jakarta Sans",sans-serif; padding-bottom: 8px; }
.route_metadata h4 { margin-top: 4px; margin-bottom: 4px; }*/

.route_metadata td:first-child {
  text-align: center;
  padding: 3px 10px 3px 0;
}

.route_metadata td:first-child img {
  max-height: 20px;
  max-width: 30px;
}

.route_metadata td {
  font-family: "Karla", sans-serif;
  padding-top: 3px;
  vertical-align: top;
}

/* .route_list_item:hover { background-color: #F3F3F3; transition: background-color 500ms linear; } */
.route_description {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 10pt;
  line-height: 1.4em;
}

.route_description > p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  margin: 0 0 10px 0;
}

.route_description > p > br {
  display: block;
  content: "";
  margin: 0 0 10px 0;
}

.route_description img {
  margin-bottom: 10px;
}

.route_description .field--name-field-media-oembed-video {
  display: none;
}

/* embedded video */

.route_list_stats {
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-bottom: 10px;
  line-height: 1.4em;
}

.route_list_stats img {
  height: 12px;
}

.route_list_stats span {
  margin-right: 10px;
  display: inline-block;
}

.route_list_content {
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
}

.route_list_content > p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  margin: 0 0 12px 0;
  margin-bottom: 12px !important;
}

/* POI content */

.poi_list_item {
  padding-top: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  cursor: pointer;
  border-radius: 10px;
  /* border: 2px solid #f3f3f3; */
}

.poi_list_item img {
  width: 100px;
  padding-right: 10px;
  float: left;
  display: inline-block;
}

.poi_list_item:hover {
  /*background-color: #F3F3F3;*/
  transition: background-color 500ms linear;
}

.poi_list_content {
  font-size: 16px;
  font-weight: 300;
}

.poi_list_content > p {
  font-size: 14px;
  font-weight: 300;
  margin: 0 0 5px 0;
}

.poi_list_content:after {
  clear: both;
  content: "";
  display: table;
  padding-bottom: 10px;
}

.cfp_logo {
  float: right !important;
  height: 50px;
  width: 50px !important;
  padding-left: 10px;
}

.cyclists_welcome_logo {
  float: right !important;
  height: 80px;
  width: 80px !important;
  padding-left: 10px;
}

.sidepanel_content {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.poi_sidepanel .poi_metadata {
  margin: 15px 0 15px 0 !important;
}

.poi_metadata tr td {
  padding-bottom: 3px;
}

.poi_metadata tr td:first-child {
  padding-right: 10px;
}

.accredited {
  background: #dfd8e9;
  border-radius: 7px;
  border-width: 0;
}

.accreditation {
  background: #8064a9;
  color: white;
  text-transform: none;
  float: right;
  height: 18px;
  font-size: 14px;
  border-radius: 18px;
  padding: 2px 10px;
}

/* POI redesign */

.round_button {
  background: #fbb040;
  display: inline-block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  height: 18px;
  text-transform: none;
  padding: 6px 24px 6px 24px;
  border-radius: 18px;
}

.round_button:hover {
  background-color: #009fda;
  color: white;
}

.social_media_button {
  background: #f3f3f3;
  color: black;
  display: inline-block;
  height: 18px;
  width: 18px;
  text-align: center;
  padding: 6px;
  border-radius: 18px;
  margin-right: 10px;
}

.accredited .social_media_button {
  background: #8064a9;
  color: white;
}

.social_media_button:hover {
  background-color: #009fda;
  color: white;
}

.poi_list_buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  margin-bottom: 10px;
}

.poi_list_amenities {
  column-count: 2;
  column-gap: 10px;
  font-size: 14px;
  margin-bottom: 10px;
}

.poi_list_content:empty {
  display: none;
}

.poi_list_amenities:empty {
  display: none;
}

/* Group content */

.group_activities {
  padding-bottom: 10px;
  line-height: 20px;
}

.group_activities span {
  line-height: 18px;
  display: inline-block;
  font-size: small;
  margin-right: 10px;
}

.group_activities span::before,
.additional > div::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  margin-right: 3px;
  background-color: #fbb040;
}

/* uPlot */

.uplot,
.uplot *,
.uplot *::before,
.uplot *::after {
  box-sizing: border-box;
}

.uplot {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  width: min-content;
}

.u-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.u-wrap {
  position: relative;
  user-select: none;
}

.u-over,
.u-under {
  position: absolute;
}

.u-under {
  overflow: hidden;
}

.uplot canvas {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.u-axis {
  position: absolute;
}

.u-legend {
  font-size: 14px;
  margin: auto;
  text-align: center;
}

.u-inline {
  display: block;
}

.u-inline * {
  display: inline-block;
}

.u-inline tr {
  margin-right: 16px;
}

.u-legend th {
  font-weight: 600;
}

.u-legend th > * {
  vertical-align: middle;
  display: inline-block;
}

.u-legend .u-marker {
  width: 1em;
  height: 1em;
  margin-right: 4px;
  background-clip: padding-box !important;
}

.u-inline.u-live th::after {
  content: ":";
  vertical-align: middle;
}

.u-inline:not(.u-live) .u-value {
  display: none;
}

.u-series > * {
  padding: 4px;
}

.u-series th {
  cursor: pointer;
}

.u-legend .u-off > * {
  opacity: 0.3;
}

.u-select {
  background: rgba(0, 0, 0, 0.07);
  position: absolute;
  pointer-events: none;
}

.u-cursor-x,
.u-cursor-y {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
  z-index: 100;
}

.u-hz .u-cursor-x,
.u-vt .u-cursor-y {
  height: 100%;
  border-right: 1px dashed #607d8b;
}

.u-hz .u-cursor-y,
.u-vt .u-cursor-x {
  width: 100%;
  border-bottom: 1px dashed #607d8b;
}

.u-cursor-pt {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 0 solid;
  pointer-events: none;
  will-change: transform;
  z-index: 100;
  /*this has to be !important since we set inline "background" shorthand */
  background-clip: padding-box !important;
}

.u-axis.u-off,
.u-select.u-off,
.u-cursor-x.u-off,
.u-cursor-y.u-off,
.u-cursor-pt.u-off {
  display: none;
}

/* Below is specific to embedding on the cycling uk D7 site */

.paragraphs-item-map-embed .planner_controls {
  margin-top: 0;
}

.paragraphs-item-map-embed {
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 60px;
}

.mapframe:not(.mapframe.route-node):not(.route-landing-map) {
  height: 95vh;
  display: block;
  border-top: 1px solid #fc5c1f;
  border-bottom: 1px solid #fc5c1f;
  margin-right: -0.6rem;
  margin-left: -0.6rem;
}

/* .paragraphs-item-map-embed .sidepanel_content button:not(.aa-Autocomplete *),
.paragraphs-item-map-embed .sidepanel_content a.buttonish,
.paragraphs-item-map-embed .cuk_button {
  background-color: #fff;
  color: #000;
  display: inline-block;
  margin-top: 3px;
  margin-bottom: 20px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 16px;
  line-height: 34px;
  text-transform: none;
  text-decoration: none !important;
  padding: 0 18px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
} */

/* .paragraphs-item-map-embed .sidepanel_content button:hover,
.paragraphs-item-map-embed .sidepanel_content a.buttonish:hover,
.paragraphs-item-map-embed .sidepanel_refresh button:hover,
.paragraphs-item-map-embed .cuk_button:hover {
  background-color: #fbb040;
  border-color: #fbb040;
  color: #fff;
  box-shadow: inherit;
} */

.paragraphs-item-map-embed .cuk_button.smaller {
  line-height: 32px !important;
  min-width: initial;
  padding: 0 14px !important;
  font-size: 15px !important;
}

.paragraphs-item-map-embed
  .sidepanel_content
  button:not(.aa-Autocomplete *):disabled,
.paragraphs-item-map-embed .cuk_button:disabled {
  background-color: #ddd !important;
  border-color: #ddd !important;
  color: white;
}

@media (min-width: 768px) {
  .paragraphs-item-map-embed .mapframe {
    height: 600px;
  }

  .paragraphs-item-map-embed .cuk_button {
    margin-top: 2px;
    margin-bottom: 16px;
  }
}

/* end cycling uk d7 site embed tweaks */