@maplat/ui 0.10.6 → 0.11.0

package/less/maplat-specific.less

@@ -1,653 +1,1039 @@
-.ol-ctx-menu-container li {
-  background-size: auto 20px;
-  background-position: top 0px left 0px;
-}
-
-.ol-ctx-menu-container li:not(.ol-ctx-menu-separator).selected {
-  background-color: #333;
-  color: #eee;
-}
-
-.modal_load_title {
-  font-family: 'Clarendon';
-}
-
-.modal_load .close, .modal_gpsW .close, .temp_no_close.close {
-  display: none;
-}
-
-.modal_poi_content, .modal_map_content, .modal_load_content, .modal_gpsW_content, .modal_gpsD_content,
-.modal_help_content, .modal_title, .modal_load_title, .modal_gpsW_title, .modal_help_title,
-.modal_share_content, .modal_share_title, .modal_hide_marker_content, .modal_hide_marker_title {
-  display: none;
-}
-
-.modal_poi .modal_poi_content, .modal_map .modal_map_content,
-.modal_load .modal_load_content, .modal_help .modal_help_content,
-.modal_gpsW .modal_gpsW_content, .modal_gpsD .modal_gpsD_content,
-.modal_share .modal_share_content, .modal_hide_marker .modal_hide_marker_content {
-  display: block;
-}
-
-.modal_poi .modal_title, .modal_map .modal_title,
-.modal_gpsD .modal_title, .modal_help .modal_help_title,
-.modal_load .modal_load_title, .modal_gpsW .modal_gpsW_title,
-.modal_share .modal_share_title, .modal_hide_marker .modal_hide_marker_title {
-  display: inline;
-}
-
-.modal_cache_content, .modal_share_state, .share_help, .border_help, .hide_marker_help {
-  display: none;
-}
-
-&.enable_cache .modal_cache_content, &.state_url .modal_share_state {
-  display: block;
-}
-
-&.enable_share .share_help, &.enable_border .border_help, &.enable_hide_marker .hide_marker_help {
-  display: inline;
-}
-
-&.ol-touch .ol-zoom {
-  display: none;
-}
-
-.ol-rotate {
-  right: .5em;
-  right: calc(.5em + constant(safe-area-inset-right));
-  right: calc(.5em + env(safe-area-inset-right));
-}
-
-.gps {
-  top: 80px;
-  left: .5em;
-  left: calc(.5em + constant(safe-area-inset-left));
-  left: calc(.5em + env(safe-area-inset-left));
-}
-
-&.ol-touch .gps {
-  top: .5em;
-}
-
-.home {
-  top: 120px;
-  left: .5em;
-  left: calc(.5em + constant(safe-area-inset-left));
-  left: calc(.5em + env(safe-area-inset-left));
-}
-
-&.ol-touch .home {
-  top: calc(.5em + 50px);
-}
-
-.poi_img, .help_img {
-  position: relative;
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-}
-
-.poi_img img, .help_img img {
-  max-width: 100%;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  margin: auto;
-  vertical-align: middle; /*IE7*/
-}
-
-img.markerlist {
-  max-width: 100%;
-  max-height: 100%;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  margin: auto;
-  vertical-align: middle; /*IE7*/
-}
-
-input[type="checkbox"].markerlist {
-  display: none;
-}
-
-input[type="checkbox"].markerlist + label.check {
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  width: 60px;
-  height: 28px;
-  color: #969696;
-  border: 1px solid #a3a3a3;
-  border-radius: 3px;
-  background-color: #ffffff;
-}
-
-input[type="checkbox"].markerlist:checked + label.check {
-  border: 1px solid #4db4e4;
-  background-color: #4db4e4;
-}
-
-input[type="checkbox"].markerlist + label.check::before {
-  content: "OFF";
-  position: absolute;
-  top: 4px;
-  left: auto;
-  right: 6px;
-}
-
-input[type="checkbox"].markerlist:checked + label.check::before {
-  content: "ON";
-  position: absolute;
-  left: 6px;
-  right: auto;
-  color: #ffffff;
-}
-
-input[type="checkbox"].markerlist + label.check > div {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 12px;
-  height: 22px;
-  border: 1px solid #a3a3a3;
-  border-radius: 3px;
-  background-color: #ffffff;
-  transition: 0.2s;
-}
-
-input[type="checkbox"].markerlist:checked + label.check > div {
-  border: 1px solid transparent;
-  left: 44px;
-}
-
-.embed-responsive-60vh {
-  padding-bottom: 60vh;
-}
-
-.poi_data {
-  display: inline-block;
-  width: 100%;
-}
-
-.iframe_poi {
-  width: 99.6% !important;
-}
-
-.map-title {
-  top: .5em;
-  width: 500px;
-  left: calc(50% - 250px);
-  background-color: rgba(32, 32, 32, 0.5);
-  color: white;
-  margin: auto;
-  text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 18px;
-}
-
-@media screen and (max-width: 600px) {
-  .map-title {
-    width: calc(100% - 100px);
-    left: 50px;
-  }
-
-  &.ol-touch .map-title {
-    width: calc(100% - 130px);
-    left: 65px;
-  }
-}
-
-.swiper-container.base-swiper, .swiper-container.overlay-swiper {
-  position: absolute;
-  bottom: .5em;
-  bottom: calc(.5em + constant(safe-area-inset-bottom));
-  bottom: calc(.5em + env(safe-area-inset-bottom));
-  width: 224px;
-  background-color: rgba(32, 32, 32, 0.5);
-  height: 60px;
-}
-
-.swiper-container.poi_img_swiper {
-  position: relative;
-  width: 100%;
-  height: 300px;
-}
-
-.base-swiper {
-  left: calc(50% - 312px);
-}
-
-.overlay-swiper {
-  left: calc(50% + 88px)
-}
-
-@media screen and (max-width: 640px) {
-  .swiper-container.base-swiper, .swiper-container.overlay-swiper {
-    width: 35%;
-  }
-
-  .base-swiper {
-    left: 1.25%;
-  }
-
-  .overlay-swiper {
-    left: 63.75%;
-  }
-}
-
-@media screen and (max-width: 320px) {
-  .swiper-container.base-swiper, .swiper-container.overlay-swiper {
-    width: 112px;
-  }
-
-  .base-swiper {
-    left: 4px;
-  }
-
-  .overlay-swiper {
-    left: 204px;
-  }
-}
-
-.base-swiper .swiper-slide, .overlay-swiper .swiper-slide {
-  text-align: center;
-  font-size: 18px;
-  background-color: rgba(0, 0, 0, 0);
-  width: 80px;
-  height: 60px;
-
-  /* Center slide text vertically */
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
-
-.poi_img_swiper .swiper-slide {
-  width: 100%;
-  height: 100%;
-  text-align: center;
-}
-
-.poi_img_swiper .swiper-slide img {
-  top: 0px;
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: calc(100% - 50px);
-}
-
-.poi_img_swiper .swiper-slide div {
-  bottom: 0px;
-  width: 100%;
-  height: 50px;
-  text-align: center;
-}
-
-.base-swiper .swiper-slide.selected, .overlay-swiper .swiper-slide.selected {
-  background-color: rgba(0, 0, 255, 0.1);
-}
-
-.base-next, .base-prev, .overlay-next, .overlay-prev {
-  margin-top: 0px;
-  top: 15px;
-  bottom: 15px;
-  height: 30px;
-  width: 18px;
-  background-size: 18px 30px;
-}
-
-&.show-border {
-  .swiper-slide.maroon {
-    border-style: dashed;
-    border-color: maroon;
-    border-width: 2px;
-  }
-  .swiper-slide.deeppink {
-    border-style: dashed;
-    border-color: deeppink;
-    border-width: 2px;
-  }
-  .swiper-slide.indigo {
-    border-style: dashed;
-    border-color: indigo;
-    border-width: 2px;
-  }
-  .swiper-slide.olive {
-    border-style: dashed;
-    border-color: olive;
-    border-width: 2px;
-  }
-  .swiper-slide.royalblue {
-    border-style: dashed;
-    border-color: royalblue;
-    border-width: 2px;
-  }
-  .swiper-slide.red {
-    border-style: dashed;
-    border-color: red;
-    border-width: 2px;
-  }
-  .swiper-slide.hotpink {
-    border-style: dashed;
-    border-color: hotpink;
-    border-width: 2px;
-  }
-  .swiper-slide.green {
-    border-style: dashed;
-    border-color: green;
-    border-width: 2px;
-  }
-  .swiper-slide.yellow {
-    border-style: dashed;
-    border-color: yellow;
-    border-width: 2px;
-  }
-  .swiper-slide.navy {
-    border-style: dashed;
-    border-color: navy;
-    border-width: 2px;
-  }
-  .swiper-slide.saddlebrown {
-    border-style: dashed;
-    border-color: saddlebrown;
-    border-width: 2px;
-  }
-  .swiper-slide.fuchsia {
-    border-style: dashed;
-    border-color: fuchsia;
-    border-width: 2px;
-  }
-  .swiper-slide.darkslategray {
-    border-style: dashed;
-    border-color: darkslategray;
-    border-width: 2px;
-  }
-  .swiper-slide.yellowgreen {
-    border-style: dashed;
-    border-color: yellowgreen;
-    border-width: 2px;
-  }
-  .swiper-slide.blue {
-    border-style: dashed;
-    border-color: blue;
-    border-width: 2px;
-  }
-  .swiper-slide.mediumvioletred {
-    border-style: dashed;
-    border-color: mediumvioletred;
-    border-width: 2px;
-  }
-  .swiper-slide.purple {
-    border-style: dashed;
-    border-color: purple;
-    border-width: 2px;
-  }
-  .swiper-slide.lime {
-    border-style: dashed;
-    border-color: lime;
-    border-width: 2px;
-  }
-  .swiper-slide.darkorange {
-    border-style: dashed;
-    border-color: darkorange;
-    border-width: 2px;
-  }
-  .swiper-slide.teal {
-    border-style: dashed;
-    border-color: teal;
-    border-width: 2px;
-  }
-  .swiper-slide.crimson {
-    border-style: dashed;
-    border-color: crimson;
-    border-width: 2px;
-  }
-  .swiper-slide.darkviolet {
-    border-style: dashed;
-    border-color: darkviolet;
-    border-width: 2px;
-  }
-  .swiper-slide.darkolivegreen {
-    border-style: dashed;
-    border-color: darkolivegreen;
-    border-width: 2px;
-  }
-  .swiper-slide.steelblue {
-    border-style: dashed;
-    border-color: steelblue;
-    border-width: 2px;
-  }
-  .swiper-slide.aqua {
-    border-style: dashed;
-    border-color: aqua;
-    border-width: 2px;
-  }
-}
-
-.base-swiper .swiper-slide img, .overlay-swiper .swiper-slide img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  z-index: 0;
-}
-
-.base-swiper .swiper-slide div, .overlay-swiper .swiper-slide div {
-  font-size: 1em;
-  position: absolute;
-  right: 0;
-  bottom: .1em;
-  left: 0;
-  margin: auto;
-  z-index: 1;
-  color: white;
-  background-color: rgba(32, 32, 32, 0.5);
-}
-.base-swiper .swiper-slide div.minimize, .overlay-swiper .swiper-slide div.minimize {
-  font-size: .8em;
-}
-
-.single-map {
-  .swiper-left-icon, .swiper-right-icon {
-    display: none;
-  }
-}
-
-.swiper-left-icon {
-  position: absolute;
-  left: 0px;
-  top: calc(50% - 5px);
-  width: 10px;
-  height: 10px;
-  color: #ffffff;
-  z-index: 10;
-}
-
-.swiper-right-icon {
-  position: absolute;
-  left: calc(100% - 10px);
-  top: calc(50% - 5px);
-  width: 10px;
-  height: 10px;
-  color: #ffffff;
-  z-index: 10;
-}
-
-@media screen and (max-width: 480px) {
-  &.ol-touch .swiper-slide div {
-    font-size: .8em;
-  }
-
-  &.ol-touch .swiper-slide div.minimize {
-    font-size: .6em;
-  }
-}
-
-.ol-share {
-  left: .5em;
-  left: calc(.5em + constant(safe-area-inset-left));
-  left: calc(.5em + env(safe-area-inset-left));
-  bottom: calc(105px + .5em);
-}
-
-&.ol-touch .ol-share {
-  bottom: calc(115px + .5em);
-  bottom: calc(115px + .5em + constant(safe-area-inset-bottom));
-  bottom: calc(115px + .5em + env(safe-area-inset-bottom));
-}
-
-.ol-border, .ol-hide-marker {
-  right: .5em;
-  right: calc(.5em + constant(safe-area-inset-right));
-  right: calc(.5em + env(safe-area-inset-right));
-  bottom: calc(105px + .5em);
-}
-
-&.ol-touch .ol-border, &.ol-touch .ol-hide-marker {
-  bottom: calc(115px + .5em);
-  bottom: calc(115px + .5em + constant(safe-area-inset-bottom));
-  bottom: calc(115px + .5em + env(safe-area-inset-bottom));
-}
-
-&.enable_border .ol-hide-marker {
-  right: .5em;
-  right: calc(.5em + constant(safe-area-inset-right));
-  right: calc(.5em + env(safe-area-inset-right));
-  bottom: calc(145px + .5em);
-}
-
-&.enable_border.ol-touch .ol-hide-marker {
-  bottom: calc(165px + .5em);
-  bottom: calc(165px + .5em + constant(safe-area-inset-bottom));
-  bottom: calc(165px + .5em + env(safe-area-inset-bottom));
-}
-
-.ol-copyright {
-  right: .5em;
-  right: calc(.5em + constant(safe-area-inset-right));
-  right: calc(.5em + env(safe-area-inset-right));
-  bottom: calc(65px + .5em);
-  bottom: calc(65px + .5em + constant(safe-area-inset-bottom));
-  bottom: calc(65px + .5em + env(safe-area-inset-bottom));
-}
-
-.ol-maplat {
-  left: .5em;
-  left: calc(.5em + constant(safe-area-inset-left));
-  left: calc(.5em + env(safe-area-inset-left));
-  bottom: calc(65px + .5em);
-  bottom: calc(65px + .5em + constant(safe-area-inset-bottom));
-  bottom: calc(65px + .5em + env(safe-area-inset-bottom));
-}
-
-.ol-compass-fa {
-  -webkit-transform: rotate(-33deg);
-  -o-transform: rotate(-33deg);
-  transform: rotate(-33deg);
-}
-
-.ol-control {
-  opacity: 1;
-}
-
-.ol-control.fade {
-  display: none;
-}
-
-&.with-opacity .ol-slidercommon.fade {
-  display: none;
-}
-
-&.no_poi .ol-hide-marker {
-  display: none;
-}
-
-.ol-control.disable button,
-&.show-border .ol-control.ol-border button,
-&.hide-marker .ol-control.ol-hide-marker button {
-  color: rgba(255, 255, 255, .7);
-  background-color: rgba(120, 5, 8, .2);
-}
-
-.ol-control.disable button:focus, .ol-control.disable button:hover,
-&.show-border .ol-control.ol-border button:focus, &.show-border .ol-control.ol-border button:hover,
-&.hide-marker .ol-control.ol-hide-marker button:focus, &.hide-marker .ol-control.ol-hide-marker button:hover{
-  color: rgba(255, 255, 255, .7);
-  background-color: rgba(120, 5, 8, .2)
-}
-
-.ol-control button {
-  height: 2.0625em;
-  width: 2.0625em;
-  background-color: rgba(120, 5, 8, .5);
-}
-
-.ol-slidercommon {
-  display: none;
-}
-
-&.with-opacity .ol-slidercommon {
-  display: block;
-  bottom: .5em;
-  bottom: calc(.5em + constant(safe-area-inset-bottom));
-  bottom: calc(.5em + env(safe-area-inset-bottom));
-  left: calc(50% - 80px);
-  width: 160px;
-  height: 25px;
-  padding: 0;
-  border: 2px solid #666666;
-}
-
-@media screen and (max-width: 640px) {
-  &.with-opacity .ol-slidercommon {
-    left: 37.5%;
-    width: 25%;
-  }
-}
-
-@media screen and (max-width: 320px) {
-  &.with-opacity .ol-slidercommon {
-    left: 120px;
-    width: 80px;
-  }
-}
-
-&.with-opacity .ol-slidercommon button {
-  position: relative;
-  width: 20px;
-  height: 25px;
-  margin-left: -2px;
-  margin-right: 2px;
-  margin-top: -2px;
-}
-
-&.with-opacity .ol-slidercommon-thumb {
-  height: 15px;
-  width: 15px;
-  margin: 0;
-  filter: none;
-}
-
-&.with-opacity .ol-slidercommon.disable button {
-  color: rgba(255, 255, 255, .7);
-  background-color: rgba(120, 5, 8, .2);
-}
-
-.ol-control button:focus, .ol-control button:hover {
-  background-color: rgba(120, 5, 8, .7)
+.dli-chevron {
+  display: inline-block;
+  vertical-align: middle;
+  color: #333;
+  line-height: 1;
+  width: 1em;
+  height: 1em;
+  border: 0.1em solid currentColor;
+  border-left: 0;
+  border-bottom: 0;
+  box-sizing: border-box;
+  transform: translateX(-25%) rotate(45deg);
+  margin: 10px;
+}
+
+li:has(+ .open) .dli-chevron {
+  transform: translateY(-25%) rotate(135deg);
+}
+
+.ol-ctx-menu-container li {
+  background-size: auto 20px;
+  background-position: top 0px left 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ol-ctx-menu-container li:not(.ol-ctx-menu-separator).selected {
+  background-color: #333;
+  color: #eee;
+}
+
+.modal_load_title {
+  font-family: 'Clarendon';
+}
+
+.modal_load .close,
+.modal_gpsW .close,
+.temp_no_close.close {
+  display: none;
+}
+
+.close {
+  font-size: 32px;
+}
+
+.modal_poi_content,
+.modal_map_content,
+.modal_load_content,
+.modal_gpsW_content,
+.modal_gpsD_content,
+.modal_help_content,
+.modal_title,
+.modal_load_title,
+.modal_gpsW_title,
+.modal_help_title,
+.modal_share_content,
+.modal_share_title,
+.modal_share_poi,
+.modal_marker_list_content,
+.modal_marker_list_title {
+  display: none;
+}
+
+.modal_poi .modal_poi_content,
+.modal_map .modal_map_content,
+.modal_load .modal_load_content,
+.modal_help .modal_help_content,
+.modal_gpsW .modal_gpsW_content,
+.modal_gpsD .modal_gpsD_content,
+.modal_share .modal_share_content,
+&.state_url .modal_share_poi,
+.modal_marker_list .modal_marker_list_content {
+  display: block;
+}
+
+.modal_poi .modal_title,
+.modal_map .modal_title,
+.modal_gpsD .modal_title,
+.modal_help .modal_help_title,
+.modal_load .modal_load_title,
+.modal_gpsW .modal_gpsW_title,
+.modal_share .modal_share_title,
+.modal_marker_list .modal_marker_list_title {
+  display: inline;
+}
+
+.modal_cache_content,
+.modal_share_pos,
+.share_help,
+.border_help,
+.hide_marker_help,
+.marker_list_help {
+  display: none;
+}
+
+&.enable_cache .modal_cache_content,
+&.state_url .modal_share_pos {
+  display: block;
+}
+
+// Fix POI Iframe Height
+.poi_iframe {
+  width: 100%;
+  height: 100%;
+  min-height: 50vh;
+  border: 0;
+}
+
+.poi_web {
+  width: 100%;
+  height: 100%;
+}
+
+// Fix Context Menu Wrapping
+.ol-ctx-menu-container {
+  width: auto !important;
+  min-width: 170px;
+  max-width: 300px; // Prevent overly wide menu but allow more space
+  z-index: 2000 !important; // Ensure it's above Modal (usually 1050)
+
+  li {
+    white-space: normal !important;
+    height: auto !important;
+    line-height: 1.3 !important;
+    text-overflow: clip !important;
+    overflow: visible !important;
+    padding: 8px 5px 8px 25px !important; // Ensure space for icon
+    background-position: left 5px center !important; // Center icon vertically
+  }
+}
+
+// Legacy-style Modal margins on mobile
+@media (max-width: 767px) {
+  .modal-dialog {
+    margin: 10px !important;
+    width: auto !important;
+  }
+}
+
+&.enable_share .share_help,
+&.enable_border .border_help,
+&.enable_hide_marker .hide_marker_help,
+&.enable_marker_list .marker_list_help {
+  display: inline;
+}
+
+&.ol-touch .ol-zoom {
+  display: none;
+}
+
+.ol-rotate {
+  right: .5em;
+  right: calc(.5em + constant(safe-area-inset-right));
+  right: calc(.5em + env(safe-area-inset-right));
+}
+
+.gps {
+  top: 80px;
+  left: .5em;
+  left: calc(.5em + constant(safe-area-inset-left));
+  left: calc(.5em + env(safe-area-inset-left));
+}
+
+&.ol-touch .gps {
+  top: .5em;
+}
+
+.home {
+  top: 120px;
+  left: .5em;
+  left: calc(.5em + constant(safe-area-inset-left));
+  left: calc(.5em + env(safe-area-inset-left));
+}
+
+&.ol-touch .home {
+  top: calc(.5em + 50px);
+}
+
+.poi_img,
+.help_img {
+  position: relative;
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.poi_img img,
+.help_img img {
+  max-width: 100%;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  margin: auto;
+  vertical-align: middle;
+  /*IE7*/
+}
+
+.list_poiitems_div {
+  padding-inline-start: 15px;
+  display: none;
+}
+
+.list_poiitems_div.open {
+  display: block;
+}
+
+@media (hover: hover) {
+
+  .list-group-item.layer:hover,
+  .list-group-item.poi:hover {
+    cursor: pointer;
+    background-color: #ccc;
+  }
+}
+
+@media (hover: none) {
+
+  .list-group-item.layer:has(.layer_label:active),
+  .list-group-item.poi:active {
+    cursor: pointer;
+    background-color: #ccc;
+  }
+}
+
+.layer_row,
+.poi_row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.layer_label,
+.poi_label {
+  text-align: left;
+  flex-grow: 1;
+}
+
+.layer_onoff {
+  text-align: right;
+  margin-right: 20px;
+  margin-top: 10px;
+}
+
+.list_poicontent_div {
+  padding-inline-start: 0px;
+  display: none;
+}
+
+.list_poicontent_div.open {
+  display: block;
+}
+
+img.markerlist {
+  max-width: 100%;
+  max-height: 100%;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  margin: auto;
+  vertical-align: middle;
+  /*IE7*/
+  display: inline-block;
+  padding: 20px;
+}
+
+input[type="checkbox"].markerlist {
+  display: none;
+}
+
+input[type="checkbox"].markerlist+label.check {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  width: 60px;
+  height: 28px;
+  color: #969696;
+  border: 1px solid #a3a3a3;
+  border-radius: 3px;
+  background-color: #ffffff;
+}
+
+input[type="checkbox"].markerlist:checked+label.check {
+  border: 1px solid #4db4e4;
+  background-color: #4db4e4;
+}
+
+input[type="checkbox"].markerlist+label.check::before {
+  content: "OFF";
+  position: absolute;
+  top: 4px;
+  left: auto;
+  right: 6px;
+}
+
+input[type="checkbox"].markerlist:checked+label.check::before {
+  content: "ON";
+  position: absolute;
+  left: 6px;
+  right: auto;
+  color: #ffffff;
+}
+
+input[type="checkbox"].markerlist+label.check>div {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 22px;
+  border: 1px solid #a3a3a3;
+  border-radius: 3px;
+  background-color: #ffffff;
+  transition: 0.2s;
+}
+
+input[type="checkbox"].markerlist:checked+label.check>div {
+  border: 1px solid transparent;
+  left: 44px;
+}
+
+.embed-responsive-60vh {
+  padding-bottom: 60vh;
+}
+
+.poi_data {
+  display: inline-block;
+  width: 100%;
+}
+
+.iframe_poi {
+  width: 99.6% !important;
+}
+
+.map-title {
+  top: .5em;
+  width: 500px;
+  left: calc(50% - 250px);
+  background-color: rgba(32, 32, 32, 0.5);
+  color: white;
+  margin: auto;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 18px;
+}
+
+@media (max-width: 768px) {
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    margin-top: -40px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .map-title {
+    width: calc(100% - 100px);
+    left: 50px;
+  }
+
+  &.ol-touch .map-title {
+    width: calc(100% - 130px);
+    left: 65px;
+  }
+}
+
+.swiper-container.base-swiper,
+.swiper-container.overlay-swiper {
+  position: absolute;
+  bottom: .5em;
+  bottom: calc(.5em + constant(safe-area-inset-bottom));
+  bottom: calc(.5em + env(safe-area-inset-bottom));
+  width: 224px;
+  background-color: rgba(32, 32, 32, 0.5);
+  height: 60px;
+}
+
+.swiper-container.poi_img_swiper {
+  position: relative;
+  width: 100%;
+  height: 300px;
+}
+
+.base-swiper {
+  left: calc(50% - 312px);
+}
+
+.overlay-swiper {
+  left: calc(50% + 88px)
+}
+
+@media screen and (max-width: 640px) {
+
+  .swiper-container.base-swiper,
+  .swiper-container.overlay-swiper {
+    width: 35%;
+  }
+
+  .base-swiper {
+    left: 1.25%;
+  }
+
+  .overlay-swiper {
+    left: 63.75%;
+  }
+}
+
+@media screen and (max-width: 320px) {
+
+  .swiper-container.base-swiper,
+  .swiper-container.overlay-swiper {
+    width: 112px;
+  }
+
+  .base-swiper {
+    left: 4px;
+  }
+
+  .overlay-swiper {
+    left: 204px;
+  }
+}
+
+.base-swiper .swiper-slide,
+.overlay-swiper .swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background-color: rgba(0, 0, 0, 0);
+  width: 80px;
+  height: 60px;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.poi_img_swiper .swiper-slide {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.poi_img_swiper .swiper-slide img {
+  top: 0px;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: calc(100% - 50px);
+}
+
+.poi_img_swiper .swiper-slide div {
+  bottom: 0px;
+  width: 100%;
+  height: 50px;
+  text-align: center;
+}
+
+.base-swiper .swiper-slide.selected,
+.overlay-swiper .swiper-slide.selected {
+  background-color: rgba(0, 0, 255, 0.1);
+}
+
+.base-next,
+.base-prev,
+.overlay-next,
+.overlay-prev {
+  margin-top: 0px;
+  top: 15px;
+  bottom: 15px;
+  height: 30px;
+  width: 18px;
+  background-size: 18px 30px;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  &:after,
+  &:before {
+    display: none;
+  }
+}
+
+&.show-border {
+  .swiper-slide.maroon {
+    border-style: dashed;
+    border-color: maroon;
+    border-width: 2px;
+  }
+
+  .swiper-slide.deeppink {
+    border-style: dashed;
+    border-color: deeppink;
+    border-width: 2px;
+  }
+
+  .swiper-slide.indigo {
+    border-style: dashed;
+    border-color: indigo;
+    border-width: 2px;
+  }
+
+  .swiper-slide.olive {
+    border-style: dashed;
+    border-color: olive;
+    border-width: 2px;
+  }
+
+  .swiper-slide.royalblue {
+    border-style: dashed;
+    border-color: royalblue;
+    border-width: 2px;
+  }
+
+  .swiper-slide.red {
+    border-style: dashed;
+    border-color: red;
+    border-width: 2px;
+  }
+
+  .swiper-slide.hotpink {
+    border-style: dashed;
+    border-color: hotpink;
+    border-width: 2px;
+  }
+
+  .swiper-slide.green {
+    border-style: dashed;
+    border-color: green;
+    border-width: 2px;
+  }
+
+  .swiper-slide.yellow {
+    border-style: dashed;
+    border-color: yellow;
+    border-width: 2px;
+  }
+
+  .swiper-slide.navy {
+    border-style: dashed;
+    border-color: navy;
+    border-width: 2px;
+  }
+
+  .swiper-slide.saddlebrown {
+    border-style: dashed;
+    border-color: saddlebrown;
+    border-width: 2px;
+  }
+
+  .swiper-slide.fuchsia {
+    border-style: dashed;
+    border-color: fuchsia;
+    border-width: 2px;
+  }
+
+  .swiper-slide.darkslategray {
+    border-style: dashed;
+    border-color: darkslategray;
+    border-width: 2px;
+  }
+
+  .swiper-slide.yellowgreen {
+    border-style: dashed;
+    border-color: yellowgreen;
+    border-width: 2px;
+  }
+
+  .swiper-slide.blue {
+    border-style: dashed;
+    border-color: blue;
+    border-width: 2px;
+  }
+
+  .swiper-slide.mediumvioletred {
+    border-style: dashed;
+    border-color: mediumvioletred;
+    border-width: 2px;
+  }
+
+  .swiper-slide.purple {
+    border-style: dashed;
+    border-color: purple;
+    border-width: 2px;
+  }
+
+  .swiper-slide.lime {
+    border-style: dashed;
+    border-color: lime;
+    border-width: 2px;
+  }
+
+  .swiper-slide.darkorange {
+    border-style: dashed;
+    border-color: darkorange;
+    border-width: 2px;
+  }
+
+  .swiper-slide.teal {
+    border-style: dashed;
+    border-color: teal;
+    border-width: 2px;
+  }
+
+  .swiper-slide.crimson {
+    border-style: dashed;
+    border-color: crimson;
+    border-width: 2px;
+  }
+
+  .swiper-slide.darkviolet {
+    border-style: dashed;
+    border-color: darkviolet;
+    border-width: 2px;
+  }
+
+  .swiper-slide.darkolivegreen {
+    border-style: dashed;
+    border-color: darkolivegreen;
+    border-width: 2px;
+  }
+
+  .swiper-slide.steelblue {
+    border-style: dashed;
+    border-color: steelblue;
+    border-width: 2px;
+  }
+
+  .swiper-slide.aqua {
+    border-style: dashed;
+    border-color: aqua;
+    border-width: 2px;
+  }
+}
+
+.base-swiper .swiper-slide img,
+.overlay-swiper .swiper-slide img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  z-index: 0;
+}
+
+.base-swiper .swiper-slide div,
+.overlay-swiper .swiper-slide div {
+  font-size: 1em;
+  position: absolute;
+  right: 0;
+  bottom: .1em;
+  left: 0;
+  margin: auto;
+  z-index: 1;
+  color: white;
+  background-color: rgba(32, 32, 32, 0.5);
+}
+
+.base-swiper .swiper-slide div.minimize,
+.overlay-swiper .swiper-slide div.minimize {
+  font-size: .8em;
+}
+
+.single-map {
+
+  .swiper-left-icon,
+  .swiper-right-icon {
+    display: none;
+  }
+}
+
+.swiper-left-icon {
+  position: absolute;
+  left: 0px;
+  top: calc(50% - 5px);
+  width: 10px;
+  height: 10px;
+  color: #ffffff;
+  z-index: 10;
+}
+
+.swiper-right-icon {
+  position: absolute;
+  left: calc(100% - 10px);
+  top: calc(50% - 5px);
+  width: 10px;
+  height: 10px;
+  color: #ffffff;
+  z-index: 10;
+}
+
+@media screen and (max-width: 480px) {
+  &.ol-touch .swiper-slide div {
+    font-size: .8em;
+  }
+
+  &.ol-touch .swiper-slide div.minimize {
+    font-size: .6em;
+  }
+}
+
+.ol-share {
+  left: .5em;
+  left: calc(.5em + constant(safe-area-inset-left));
+  left: calc(.5em + env(safe-area-inset-left));
+  bottom: calc(105px + .5em);
+}
+
+&.ol-touch .ol-share {
+  bottom: calc(115px + .5em);
+  bottom: calc(115px + .5em + constant(safe-area-inset-bottom));
+  bottom: calc(115px + .5em + env(safe-area-inset-bottom));
+}
+
+.ol-border,
+.ol-hide-marker,
+.ol-marker-list {
+  right: .5em;
+  right: calc(.5em + constant(safe-area-inset-right));
+  right: calc(.5em + env(safe-area-inset-right));
+  bottom: calc(105px + .5em);
+}
+
+&.ol-touch .ol-border,
+&.ol-touch .ol-hide-marker,
+&.ol-touch .ol-marker-list {
+  bottom: calc(115px + .5em);
+  bottom: calc(115px + .5em + constant(safe-area-inset-bottom));
+  bottom: calc(115px + .5em + env(safe-area-inset-bottom));
+}
+
+&.enable_border .ol-hide-marker,
+&.enable_border .ol-marker-list,
+&.enable_hide_marker .ol-marker-list {
+  right: .5em;
+  right: calc(.5em + constant(safe-area-inset-right));
+  right: calc(.5em + env(safe-area-inset-right));
+  bottom: calc(145px + .5em);
+}
+
+&.enable_border.ol-touch .ol-hide-marker,
+&.enable_border.ol-touch .ol-marker-list,
+&.enable_hide_marker.ol-touch .ol-marker-list {
+  bottom: calc(165px + .5em);
+  bottom: calc(165px + .5em + constant(safe-area-inset-bottom));
+  bottom: calc(165px + .5em + env(safe-area-inset-bottom));
+}
+
+&.enable_border.enable_hide_marker .ol-marker-list {
+  right: .5em;
+  right: calc(.5em + constant(safe-area-inset-right));
+  right: calc(.5em + env(safe-area-inset-right));
+  bottom: calc(185px + .5em);
+}
+
+&.enable_border.enable_hide_marker.ol-touch .ol-marker-list {
+  bottom: calc(215px + .5em);
+  bottom: calc(215px + .5em + constant(safe-area-inset-bottom));
+  bottom: calc(215px + .5em + env(safe-area-inset-bottom));
+}
+
+
+
+
+
+
+.ol-copyright {
+  right: .5em;
+  right: calc(.5em + constant(safe-area-inset-right));
+  right: calc(.5em + env(safe-area-inset-right));
+  bottom: calc(65px + .5em);
+  bottom: calc(65px + .5em + constant(safe-area-inset-bottom));
+  bottom: calc(65px + .5em + env(safe-area-inset-bottom));
+}
+
+.ol-maplat {
+  left: .5em;
+  left: calc(.5em + constant(safe-area-inset-left));
+  left: calc(.5em + env(safe-area-inset-left));
+  bottom: calc(65px + .5em);
+  bottom: calc(65px + .5em + constant(safe-area-inset-bottom));
+  bottom: calc(65px + .5em + env(safe-area-inset-bottom));
+}
+
+.ol-compass-fa {
+  -webkit-transform: rotate(-33deg);
+  -o-transform: rotate(-33deg);
+  transform: rotate(-33deg);
+}
+
+.ol-control {
+  opacity: 1;
+}
+
+.ol-control.fade {
+  display: none;
+}
+
+&.with-opacity .ol-slidercommon.fade {
+  display: none;
+}
+
+&.no_poi .ol-hide-marker,
+&.no_poi .ol-marker-list {
+  display: none;
+}
+
+.ol-control.disable button,
+&.show-border .ol-control.ol-border button,
+&.hide-marker .ol-control.ol-hide-marker button {
+  color: rgba(255, 255, 255, .7);
+  background-color: rgba(120, 5, 8, .2);
+}
+
+@media (hover: hover) {
+
+  .ol-control.disable button:focus,
+  .ol-control.disable button:hover,
+  &.show-border .ol-control.ol-border button:focus,
+  &.show-border .ol-control.ol-border button:hover,
+  &.hide-marker .ol-control.ol-hide-marker button:focus,
+  &.hide-marker .ol-control.ol-hide-marker button:hover {
+    color: rgba(255, 255, 255, .7);
+    background-color: rgba(120, 5, 8, .2)
+  }
+}
+
+@media (hover: none) {
+
+  .ol-control.disable button:focus,
+  .ol-control.disable button:active,
+  &.show-border .ol-control.ol-border button:focus,
+  &.show-border .ol-control.ol-border button:active,
+  &.hide-marker .ol-control.ol-hide-marker button:focus,
+  &.hide-marker .ol-control.ol-hide-marker button:active {
+    color: rgba(255, 255, 255, .7);
+    background-color: rgba(120, 5, 8, .2)
+  }
+}
+
+.ol-control button {
+  height: 2.0625em;
+  width: 2.0625em;
+  color: rgba(255, 255, 255);
+  background-color: rgba(120, 5, 8, .5);
+}
+
+.ol-slidernew {
+  display: none;
+}
+
+&.with-opacity .ol-slidernew {
+  appearance: none;
+  bottom: .5em;
+  bottom: calc(.5em + constant(safe-area-inset-bottom));
+  bottom: calc(.5em + env(safe-area-inset-bottom));
+  left: calc(50% - 80px);
+  width: 160px;
+  height: 25px;
+  background: rgba(255, 255, 255, .5);
+  border: 2px solid #666666;
+  border-radius: 4px;
+
+  &[disabled] {
+    background: rgba(255, 255, 255, .7);
+  }
+}
+
+@media screen and (max-width: 640px) {
+  &.with-opacity .ol-slidernew {
+    left: 37.5%;
+    width: 25%;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  &.with-opacity .ol-slidernew {
+    left: 120px;
+    width: 80px;
+  }
+}
+
+&.with-opacity .ol-slidernew::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 25px;
+  background-color: rgba(120, 5, 8, 0.5);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &[disabled] {
+    background-color: rgba(120, 5, 8, 0.2);
+  }
+}
+
+&.with-opacity .ol-slidernew::-moz-range-thumb {
+  appearance: none;
+  width: 20px;
+  height: 25px;
+  background-color: rgba(120, 5, 8, 0.5);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &[disabled] {
+    background-color: rgba(120, 5, 8, 0.2);
+  }
+}
+
+@media (hover: hover) {
+  &.with-opacity .ol-slidernew:not([disabled])::-webkit-slider-thumb:hover {
+    background-color: rgba(120, 5, 8, 0.7);
+  }
+
+  &.with-opacity .ol-slidernew:not([disabled])::-moz-range-thumb:hover {
+    background-color: rgba(120, 5, 8, 0.7);
+  }
+}
+
+@media (hover: none) {
+  &.with-opacity .ol-slidernew:not([disabled])::-webkit-slider-thumb:active {
+    background-color: rgba(120, 5, 8, 0.7);
+  }
+
+  &.with-opacity .ol-slidernew:not([disabled])::-moz-range-thumb:active {
+    background-color: rgba(120, 5, 8, 0.7);
+  }
+}
+
+/* Scrollable modal support */
+.modal-dialog {
+  height: calc(100% - 60px);
+  margin: 30px auto;
+}
+
+.modal-content {
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-body {
+  overflow-y: auto;
+}
+
+
+/* Share Modal Styles */
+.modal_share .modal-body {
+  text-align: center;
+}
+
+.share_container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.share_section {
+  background: #f9f9f9;
+  padding: 15px;
+  border-radius: 8px;
+}
+
+.share_section h3 {
+  font-size: 1.1em;
+  margin-bottom: 15px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 5px;
+}
+
+.share_buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.share_buttons button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.share_buttons button:hover {
+  background: #f0f0f0;
+}
+
+.qr_code_container {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.qr_code_container canvas,
+.qr_code_container img {
+  border: 1px solid #ddd;
+  padding: 5px;
+  background: white;
+  max-width: 100%;
+}
+
+/* Custom Toast Styles */
+.custom-toast {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 4px;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  pointer-events: none;
+}
+
+.custom-toast.show {
+  opacity: 1;
 }