@maplat/ui 0.10.4 → 0.10.6

package/less/maplat-specific.less

@@ -1,653 +1,653 @@
-.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)
+.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)
 }