diff --git a/dist/css/app_SilverShop.Page.CheckoutPageController.css b/dist/css/app_SilverShop.Page.CheckoutPageController.css
index 8e81933..3f8b726 100644
--- a/dist/css/app_SilverShop.Page.CheckoutPageController.css
+++ b/dist/css/app_SilverShop.Page.CheckoutPageController.css
@@ -70,8 +70,8 @@
   padding: 10px 10px 15px;
   border-radius: 3px;
   background: #fff;
-  width: 240px;
-  height: 5rem;
+  min-width: 240px;
+  min-height: 5rem;
   -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
           box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
 }
diff --git a/dist/css/app_SilverShop.Page.CheckoutPageController.css.map b/dist/css/app_SilverShop.Page.CheckoutPageController.css.map
index cd82387..eccdaf3 100644
--- a/dist/css/app_SilverShop.Page.CheckoutPageController.css.map
+++ b/dist/css/app_SilverShop.Page.CheckoutPageController.css.map
@@ -1 +1 @@
-{"version":3,"sources":["webpack:///./src/scss/_variables.scss","webpack:///_ui.map.scss","webpack:///./src/scss/_animations.scss","webpack:///./src/scss/_components/_ui.map.scss"],"names":[],"mappings":"AAyCA;;;ECtCE;;ACDF;EACI;IACI;YAAA;EDKN;;ECFE;IACI;YAAA;EDMN;;ECHE;IACI;YAAA;EDON;AACF;;AClBA;EACI;IACI;YAAA;EDsBN;;ECnBE;IACI;YAAA;EDuBN;;ECpBE;IACI;YAAA;EDwBN;AACF;;AEhCA;EACI;EACA;AFmCJ;;AE/BI;EACI;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;EACA;EACA;AFoCR;;AEjCI;;;EAGI;EAAA;MAAA;UAAA;AFuCR;;AEpCI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AFwCR;;AErCI;EACI;EACA;EACA;EACA;EACA;EACA;AFwCR;;AE9CK;;EAUO;EACA;AFyCZ;;AErCI;EACI;EACA;EACA;EACA;AFwCR;;AErCI;EACI;MAAA;EACA;EACA;AFyCR;;AEtCI;EACI;EACA;EACA;EACA;EACA;EACA;AFyCR;;AE/CK;;;;EAYO;UAAA;AF2CZ","file":"css/app_SilverShop.Page.CheckoutPageController.css","sourcesContent":["@import '_mixings';\n@import '_colors';\n\n$grid-breakpoints: (\n\txs: 0,\n\tsm: 576px,\n\tmd: 768px,\n\tlg: 992px,\n\txl: 1200px,\n\txxl: 1390px,\n\txxxl: 1590px\n) !default;\n$container-max-widths: (\n\tsm: 540px,\n\tmd: 720px,\n\tlg: 960px,\n\txl: 1140px,\n\txxl: 1330px,\n\txxxl: 1560px\n) !default;\n\n$font-family-base: 'Lato', sans-serif !default;\n\n$font-size-base: 1rem !default;\n\n// start font-sizing from h2\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $h1-font-size !default;\n$h3-font-size: $font-size-base * 2 !default;\n$h4-font-size: $font-size-base * 1.75 !default;\n$h5-font-size: $font-size-base * 1.5 !default;\n$h6-font-size: $font-size-base * 1.25 !default;\n\n$grid-gutter-width: 2rem !default;\n$grid-gutter-height: 2rem !default;\n$grid-gutter-xs-width: $grid-gutter-width / 2 !default;\n$grid-gutter-element-height: $grid-gutter-height * 2 !default;\n\n$footer-size: 18.5rem !default;\n$footer-bar-size: 2.5rem !default;\n\n/*\n * bootstrap includes\n * keep it at the end\n */\n\n// bootstrap minify bugfix:\n$navbar-dark-toggler-icon-bg: none !default;\n$navbar-light-toggler-icon-bg: none !default;\n\n// IE > 9\n$enable-flex: true !default;\n\n$enable-responsive-font-sizes: true !default;\n\n@import '~bootstrap/scss/functions';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.8);\n            transform: scale(0.8);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n@keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.8);\n            transform: scale(0.8);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n.mapAPI-map {\n  height: 30rem;\n  margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  font-size: 0.8rem;\n  z-index: 4;\n  line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n  position: relative;\n  pointer-events: auto;\n  padding: 10px 10px 15px;\n  border-radius: 3px;\n  background: #fff;\n  width: 240px;\n  height: 5rem;\n  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 2rem;\n  padding: 0.5rem;\n  border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n  background: #2196f3;\n  color: #fff;\n}\n\n.mapboxgl-popup-tip {\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n  z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-bottom: none;\n  border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n  width: 30px;\n  height: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  text-align: center;\n  color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n  -webkit-animation: pulse 0.8s linear infinite;\n          animation: pulse 0.8s linear infinite;\n}\n\n","// pulse\n\n@keyframes pulse {\n    0% {\n        transform: scale(1);\n    }\n\n    50% {\n        transform: scale(0.8);\n    }\n\n    100% {\n        transform: scale(1);\n    }\n}\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.8);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n.mapAPI-map {\n  height: 30rem;\n  margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  pointer-events: none;\n  font-size: 0.8rem;\n  z-index: 4;\n  line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n  flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n  position: relative;\n  pointer-events: auto;\n  padding: 10px 10px 15px;\n  border-radius: 3px;\n  background: #fff;\n  width: 240px;\n  height: 5rem;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 2rem;\n  padding: 0.5rem;\n  border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n  background: #2196f3;\n  color: #fff;\n}\n\n.mapboxgl-popup-tip {\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n  z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n  align-self: center;\n  border-bottom: none;\n  border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n  width: 30px;\n  height: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  text-align: center;\n  color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n  animation: pulse 0.8s linear infinite;\n}\n\n"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack:///./src/scss/_variables.scss","webpack:///_ui.map.scss","webpack:///./src/scss/_animations.scss","webpack:///./src/scss/_components/_ui.map.scss"],"names":[],"mappings":"AAyCA;;;ECtCE;;ACDF;EACI;IACI;YAAA;EDKN;;ECFE;IACI;YAAA;EDMN;;ECHE;IACI;YAAA;EDON;AACF;;AClBA;EACI;IACI;YAAA;EDsBN;;ECnBE;IACI;YAAA;EDuBN;;ECpBE;IACI;YAAA;EDwBN;AACF;;AEhCA;EACI;EACA;AFmCJ;;AE/BI;EACI;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;EACA;EACA;AFoCR;;AEjCI;;;EAGI;EAAA;MAAA;UAAA;AFuCR;;AEpCI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AFwCR;;AErCI;EACI;EACA;EACA;EACA;EACA;EACA;AFwCR;;AE9CK;;EAUO;EACA;AFyCZ;;AErCI;EACI;EACA;EACA;EACA;AFwCR;;AErCI;EACI;MAAA;EACA;EACA;AFyCR;;AEtCI;EACI;EACA;EACA;EACA;EACA;EACA;AFyCR;;AE/CK;;;;EAYO;UAAA;AF2CZ","file":"css/app_SilverShop.Page.CheckoutPageController.css","sourcesContent":["@import '_mixings';\n@import '_colors';\n\n$grid-breakpoints: (\n\txs: 0,\n\tsm: 576px,\n\tmd: 768px,\n\tlg: 992px,\n\txl: 1200px,\n\txxl: 1390px,\n\txxxl: 1590px\n) !default;\n$container-max-widths: (\n\tsm: 540px,\n\tmd: 720px,\n\tlg: 960px,\n\txl: 1140px,\n\txxl: 1330px,\n\txxxl: 1560px\n) !default;\n\n$font-family-base: 'Lato', sans-serif !default;\n\n$font-size-base: 1rem !default;\n\n// start font-sizing from h2\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $h1-font-size !default;\n$h3-font-size: $font-size-base * 2 !default;\n$h4-font-size: $font-size-base * 1.75 !default;\n$h5-font-size: $font-size-base * 1.5 !default;\n$h6-font-size: $font-size-base * 1.25 !default;\n\n$grid-gutter-width: 2rem !default;\n$grid-gutter-height: 2rem !default;\n$grid-gutter-xs-width: $grid-gutter-width / 2 !default;\n$grid-gutter-element-height: $grid-gutter-height * 2 !default;\n\n$footer-size: 18.5rem !default;\n$footer-bar-size: 2.5rem !default;\n\n/*\n * bootstrap includes\n * keep it at the end\n */\n\n// bootstrap minify bugfix:\n$navbar-dark-toggler-icon-bg: none !default;\n$navbar-light-toggler-icon-bg: none !default;\n\n// IE > 9\n$enable-flex: true !default;\n\n$enable-responsive-font-sizes: true !default;\n\n@import '~bootstrap/scss/functions';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.8);\n            transform: scale(0.8);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n@keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.8);\n            transform: scale(0.8);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n.mapAPI-map {\n  height: 30rem;\n  margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  font-size: 0.8rem;\n  z-index: 4;\n  line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n  position: relative;\n  pointer-events: auto;\n  padding: 10px 10px 15px;\n  border-radius: 3px;\n  background: #fff;\n  min-width: 240px;\n  min-height: 5rem;\n  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 2rem;\n  padding: 0.5rem;\n  border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n  background: #2196f3;\n  color: #fff;\n}\n\n.mapboxgl-popup-tip {\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n  z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-bottom: none;\n  border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n  width: 30px;\n  height: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  text-align: center;\n  color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n  -webkit-animation: pulse 0.8s linear infinite;\n          animation: pulse 0.8s linear infinite;\n}\n\n","// pulse\n\n@keyframes pulse {\n    0% {\n        transform: scale(1);\n    }\n\n    50% {\n        transform: scale(0.8);\n    }\n\n    100% {\n        transform: scale(1);\n    }\n}\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.8);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n.mapAPI-map {\n  height: 30rem;\n  margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  pointer-events: none;\n  font-size: 0.8rem;\n  z-index: 4;\n  line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n  flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n  position: relative;\n  pointer-events: auto;\n  padding: 10px 10px 15px;\n  border-radius: 3px;\n  background: #fff;\n  min-width: 240px;\n  min-height: 5rem;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 2rem;\n  padding: 0.5rem;\n  border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n  background: #2196f3;\n  color: #fff;\n}\n\n.mapboxgl-popup-tip {\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n  z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n  align-self: center;\n  border-bottom: none;\n  border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n  width: 30px;\n  height: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  text-align: center;\n  color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n  animation: pulse 0.8s linear infinite;\n}\n\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/dist/css/app_Site.Controllers.MapElementController.css b/dist/css/app_Site.Controllers.MapElementController.css
index fdce60b..2bed932 100644
--- a/dist/css/app_Site.Controllers.MapElementController.css
+++ b/dist/css/app_Site.Controllers.MapElementController.css
@@ -70,8 +70,8 @@
   padding: 10px 10px 15px;
   border-radius: 3px;
   background: #fff;
-  width: 240px;
-  height: 5rem;
+  min-width: 240px;
+  min-height: 5rem;
   -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
           box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
 }
diff --git a/dist/css/app_Site.Controllers.MapElementController.css.map b/dist/css/app_Site.Controllers.MapElementController.css.map
index 039c2ea..3f88f4a 100644
--- a/dist/css/app_Site.Controllers.MapElementController.css.map
+++ b/dist/css/app_Site.Controllers.MapElementController.css.map
@@ -1 +1 @@
-{"version":3,"sources":["webpack:///./src/scss/_variables.scss","webpack:///_ui.map.scss","webpack:///./src/scss/_animations.scss","webpack:///./src/scss/_components/_ui.map.scss"],"names":[],"mappings":"AAyCA;;;ECtCE;;ACDF;EACI;IACI;YAAA;EDKN;;ECFE;IACI;YAAA;EDMN;;ECHE;IACI;YAAA;EDON;AACF;;AClBA;EACI;IACI;YAAA;EDsBN;;ECnBE;IACI;YAAA;EDuBN;;ECpBE;IACI;YAAA;EDwBN;AACF;;AEhCA;EACI;EACA;AFmCJ;;AE/BI;EACI;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;EACA;EACA;AFoCR;;AEjCI;;;EAGI;EAAA;MAAA;UAAA;AFuCR;;AEpCI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AFwCR;;AErCI;EACI;EACA;EACA;EACA;EACA;EACA;AFwCR;;AE9CK;;EAUO;EACA;AFyCZ;;AErCI;EACI;EACA;EACA;EACA;AFwCR;;AErCI;EACI;MAAA;EACA;EACA;AFyCR;;AEtCI;EACI;EACA;EACA;EACA;EACA;EACA;AFyCR;;AE/CK;;;;EAYO;UAAA;AF2CZ","file":"css/app_Site.Controllers.MapElementController.css","sourcesContent":["@import '_mixings';\n@import '_colors';\n\n$grid-breakpoints: (\n\txs: 0,\n\tsm: 576px,\n\tmd: 768px,\n\tlg: 992px,\n\txl: 1200px,\n\txxl: 1390px,\n\txxxl: 1590px\n) !default;\n$container-max-widths: (\n\tsm: 540px,\n\tmd: 720px,\n\tlg: 960px,\n\txl: 1140px,\n\txxl: 1330px,\n\txxxl: 1560px\n) !default;\n\n$font-family-base: 'Lato', sans-serif !default;\n\n$font-size-base: 1rem !default;\n\n// start font-sizing from h2\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $h1-font-size !default;\n$h3-font-size: $font-size-base * 2 !default;\n$h4-font-size: $font-size-base * 1.75 !default;\n$h5-font-size: $font-size-base * 1.5 !default;\n$h6-font-size: $font-size-base * 1.25 !default;\n\n$grid-gutter-width: 2rem !default;\n$grid-gutter-height: 2rem !default;\n$grid-gutter-xs-width: $grid-gutter-width / 2 !default;\n$grid-gutter-element-height: $grid-gutter-height * 2 !default;\n\n$footer-size: 18.5rem !default;\n$footer-bar-size: 2.5rem !default;\n\n/*\n * bootstrap includes\n * keep it at the end\n */\n\n// bootstrap minify bugfix:\n$navbar-dark-toggler-icon-bg: none !default;\n$navbar-light-toggler-icon-bg: none !default;\n\n// IE > 9\n$enable-flex: true !default;\n\n$enable-responsive-font-sizes: true !default;\n\n@import '~bootstrap/scss/functions';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.8);\n            transform: scale(0.8);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n@keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.8);\n            transform: scale(0.8);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n.mapAPI-map {\n  height: 30rem;\n  margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  font-size: 0.8rem;\n  z-index: 4;\n  line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n  position: relative;\n  pointer-events: auto;\n  padding: 10px 10px 15px;\n  border-radius: 3px;\n  background: #fff;\n  width: 240px;\n  height: 5rem;\n  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 2rem;\n  padding: 0.5rem;\n  border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n  background: #2196f3;\n  color: #fff;\n}\n\n.mapboxgl-popup-tip {\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n  z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-bottom: none;\n  border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n  width: 30px;\n  height: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  text-align: center;\n  color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n  -webkit-animation: pulse 0.8s linear infinite;\n          animation: pulse 0.8s linear infinite;\n}\n\n","// pulse\n\n@keyframes pulse {\n    0% {\n        transform: scale(1);\n    }\n\n    50% {\n        transform: scale(0.8);\n    }\n\n    100% {\n        transform: scale(1);\n    }\n}\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.8);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n.mapAPI-map {\n  height: 30rem;\n  margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  pointer-events: none;\n  font-size: 0.8rem;\n  z-index: 4;\n  line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n  flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n  position: relative;\n  pointer-events: auto;\n  padding: 10px 10px 15px;\n  border-radius: 3px;\n  background: #fff;\n  width: 240px;\n  height: 5rem;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 2rem;\n  padding: 0.5rem;\n  border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n  background: #2196f3;\n  color: #fff;\n}\n\n.mapboxgl-popup-tip {\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n  z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n  align-self: center;\n  border-bottom: none;\n  border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n  width: 30px;\n  height: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  text-align: center;\n  color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n  animation: pulse 0.8s linear infinite;\n}\n\n"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack:///./src/scss/_variables.scss","webpack:///_ui.map.scss","webpack:///./src/scss/_animations.scss","webpack:///./src/scss/_components/_ui.map.scss"],"names":[],"mappings":"AAyCA;;;ECtCE;;ACDF;EACI;IACI;YAAA;EDKN;;ECFE;IACI;YAAA;EDMN;;ECHE;IACI;YAAA;EDON;AACF;;AClBA;EACI;IACI;YAAA;EDsBN;;ECnBE;IACI;YAAA;EDuBN;;ECpBE;IACI;YAAA;EDwBN;AACF;;AEhCA;EACI;EACA;AFmCJ;;AE/BI;EACI;EACA;EACA;EACA;EAAA;EAAA;EACA;EACA;EACA;EACA;AFoCR;;AEjCI;;;EAGI;EAAA;MAAA;UAAA;AFuCR;;AEpCI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AFwCR;;AErCI;EACI;EACA;EACA;EACA;EACA;EACA;AFwCR;;AE9CK;;EAUO;EACA;AFyCZ;;AErCI;EACI;EACA;EACA;EACA;AFwCR;;AErCI;EACI;MAAA;EACA;EACA;AFyCR;;AEtCI;EACI;EACA;EACA;EACA;EACA;EACA;AFyCR;;AE/CK;;;;EAYO;UAAA;AF2CZ","file":"css/app_Site.Controllers.MapElementController.css","sourcesContent":["@import '_mixings';\n@import '_colors';\n\n$grid-breakpoints: (\n\txs: 0,\n\tsm: 576px,\n\tmd: 768px,\n\tlg: 992px,\n\txl: 1200px,\n\txxl: 1390px,\n\txxxl: 1590px\n) !default;\n$container-max-widths: (\n\tsm: 540px,\n\tmd: 720px,\n\tlg: 960px,\n\txl: 1140px,\n\txxl: 1330px,\n\txxxl: 1560px\n) !default;\n\n$font-family-base: 'Lato', sans-serif !default;\n\n$font-size-base: 1rem !default;\n\n// start font-sizing from h2\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $h1-font-size !default;\n$h3-font-size: $font-size-base * 2 !default;\n$h4-font-size: $font-size-base * 1.75 !default;\n$h5-font-size: $font-size-base * 1.5 !default;\n$h6-font-size: $font-size-base * 1.25 !default;\n\n$grid-gutter-width: 2rem !default;\n$grid-gutter-height: 2rem !default;\n$grid-gutter-xs-width: $grid-gutter-width / 2 !default;\n$grid-gutter-element-height: $grid-gutter-height * 2 !default;\n\n$footer-size: 18.5rem !default;\n$footer-bar-size: 2.5rem !default;\n\n/*\n * bootstrap includes\n * keep it at the end\n */\n\n// bootstrap minify bugfix:\n$navbar-dark-toggler-icon-bg: none !default;\n$navbar-light-toggler-icon-bg: none !default;\n\n// IE > 9\n$enable-flex: true !default;\n\n$enable-responsive-font-sizes: true !default;\n\n@import '~bootstrap/scss/functions';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@-webkit-keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.8);\n            transform: scale(0.8);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n@keyframes pulse {\n  0% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n\n  50% {\n    -webkit-transform: scale(0.8);\n            transform: scale(0.8);\n  }\n\n  100% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n.mapAPI-map {\n  height: 30rem;\n  margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  font-size: 0.8rem;\n  z-index: 4;\n  line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n  position: relative;\n  pointer-events: auto;\n  padding: 10px 10px 15px;\n  border-radius: 3px;\n  background: #fff;\n  min-width: 240px;\n  min-height: 5rem;\n  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 2rem;\n  padding: 0.5rem;\n  border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n  background: #2196f3;\n  color: #fff;\n}\n\n.mapboxgl-popup-tip {\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n  z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-bottom: none;\n  border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n  width: 30px;\n  height: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  text-align: center;\n  color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n  -webkit-animation: pulse 0.8s linear infinite;\n          animation: pulse 0.8s linear infinite;\n}\n\n","// pulse\n\n@keyframes pulse {\n    0% {\n        transform: scale(1);\n    }\n\n    50% {\n        transform: scale(0.8);\n    }\n\n    100% {\n        transform: scale(1);\n    }\n}\n","/*\n * bootstrap includes\n * keep it at the end\n */\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.8);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n.mapAPI-map {\n  height: 30rem;\n  margin-bottom: 1rem;\n}\n\n.mapboxgl-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  pointer-events: none;\n  font-size: 0.8rem;\n  z-index: 4;\n  line-height: 20px;\n}\n\n.mapboxgl-popup-anchor-bottom,\n.mapboxgl-popup-anchor-bottom-left,\n.mapboxgl-popup-anchor-bottom-right {\n  flex-direction: column-reverse;\n}\n\n.mapboxgl-popup-content {\n  position: relative;\n  pointer-events: auto;\n  padding: 10px 10px 15px;\n  border-radius: 3px;\n  background: #fff;\n  min-width: 240px;\n  min-height: 5rem;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);\n}\n\n.mapboxgl-popup-close-button {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 2rem;\n  padding: 0.5rem;\n  border-top-right-radius: 3px;\n}\n\n.mapboxgl-popup-close-button:hover,\n.mapboxgl-popup-close-button:focus {\n  background: #2196f3;\n  color: #fff;\n}\n\n.mapboxgl-popup-tip {\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n  z-index: 1;\n}\n\n.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {\n  align-self: center;\n  border-bottom: none;\n  border-top-color: #fff;\n}\n\n.mapboxgl-marker {\n  width: 30px;\n  height: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  text-align: center;\n  color: #2196f3;\n}\n\n.mapboxgl-marker .marker-icon,\n.mapboxgl-marker .fas,\n.mapboxgl-marker .fab,\n.mapboxgl-marker .far {\n  animation: pulse 0.8s linear infinite;\n}\n\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/package.json b/package.json
index 6f5d812..24661d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "author": "Tony Air <tony@twma.pro>",
   "license": "MIT",
   "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
diff --git a/src/js/_components/_ui.map.api.js b/src/js/_components/_ui.map.api.js
index d1aca66..fa83147 100755
--- a/src/js/_components/_ui.map.api.js
+++ b/src/js/_components/_ui.map.api.js
@@ -7,7 +7,7 @@ import '../../scss/_components/_ui.map.scss';
 
 import CONSTS from 'js/_consts';
 
-const MapAPI = (($) => {
+const MapAPI = ($ => {
   // Constants
   const NAME = 'jsMapAPI';
   const DATA_KEY = NAME;
@@ -32,13 +32,17 @@ const MapAPI = (($) => {
         config['lat'] ? config['lat'] : $BODY.data('default-lat'),
       ];
 
+      config['style'] = config['style']
+        ? jQuery.parseJSON(config['style'])
+        : null;
+
       config['font-family'] = $BODY.css('font-family');
 
       console.log(`${NAME}: initializing ${Drv.getName()}...`);
       Drv.init($el, config);
       ui.drv = Drv;
 
-      $el.on(Events.MAPAPILOADED, (e) => {
+      $el.on(Events.MAPAPILOADED, e => {
         ui.map = Drv.getMap();
 
         if (config['geojson']) {
@@ -47,7 +51,7 @@ const MapAPI = (($) => {
         } else if (config['address']) {
           console.log(config['address']);
           console.log(`${NAME}: setting up address marker`);
-          Drv.geocode(config['address'], (result) => {
+          Drv.geocode(config['address'], result => {
             console.log(result);
           });
         } else if (config['lat'] && config['lng']) {
diff --git a/src/js/_components/drivers/_map.google.js b/src/js/_components/drivers/_map.google.js
index 31b3b68..8e3560d 100755
--- a/src/js/_components/drivers/_map.google.js
+++ b/src/js/_components/drivers/_map.google.js
@@ -4,7 +4,7 @@ import $ from 'jquery';
 import Events from '../../_events';
 import MarkerUI from './_map.google.marker';
 
-const GoogleMapsDriver = (($) => {
+const GoogleMapsDriver = ($ => {
   class GoogleMapsDriver {
     getName() {
       return 'GoogleMapsDriver';
@@ -39,13 +39,13 @@ const GoogleMapsDriver = (($) => {
       const zoom = config['mapZoom'] ? config['mapZoom'] : 10;
       const center = config['center']
         ? {
-          lat: config['center'][1],
-          lng: config['center'][0],
-        }
+            lat: config['center'][1],
+            lng: config['center'][0],
+          }
         : {
-          lat: 0,
-          lng: 0,
-        };
+            lat: 0,
+            lng: 0,
+          };
       const style = config['style'] ? config['style'] : null;
 
       console.log(`${ui.getName()}: API is loaded`);
@@ -122,7 +122,7 @@ const GoogleMapsDriver = (($) => {
 
       $popup.find('.mapboxgl-popup-content .html').html(content);
 
-      $popup.find('.mapboxgl-popup-close-button').on('click', (e) => {
+      $popup.find('.mapboxgl-popup-close-button').on('click', e => {
         e.preventDefault();
         ui.hidePopup();
       });
@@ -205,7 +205,7 @@ const GoogleMapsDriver = (($) => {
       const bounds = new google.maps.LatLngBounds();
 
       // add markers to map
-      config['geojson'].features.forEach((marker) => {
+      config['geojson'].features.forEach(marker => {
         const id = marker.id;
         const crds = marker.geometry.coordinates;
         const content = marker.properties.content;
diff --git a/src/js/_components/drivers/_map.google.marker.js b/src/js/_components/drivers/_map.google.marker.js
index a7a7378..258b381 100755
--- a/src/js/_components/drivers/_map.google.marker.js
+++ b/src/js/_components/drivers/_map.google.marker.js
@@ -16,7 +16,7 @@ const Obj = {
         ui.onClick = options.onClick;
         ui.onMouseOver = options.onMouseOver;
 
-        ui.isBoolean = (arg) => {
+        ui.isBoolean = arg => {
           if (typeof arg === 'boolean') {
             return true;
           } else {
@@ -24,7 +24,7 @@ const Obj = {
           }
         };
 
-        ui.isNotUndefined = (arg) => {
+        ui.isNotUndefined = arg => {
           if (typeof arg !== 'undefined') {
             return true;
           } else {
@@ -32,7 +32,7 @@ const Obj = {
           }
         };
 
-        ui.hasContent = (arg) => {
+        ui.hasContent = arg => {
           if (arg.length > 0) {
             return true;
           } else {
@@ -40,7 +40,7 @@ const Obj = {
           }
         };
 
-        ui.isString = (arg) => {
+        ui.isString = arg => {
           if (typeof arg === 'string') {
             return true;
           } else {
@@ -48,7 +48,7 @@ const Obj = {
           }
         };
 
-        ui.isFunction = (arg) => {
+        ui.isFunction = arg => {
           if (typeof arg === 'function') {
             return true;
           } else {
@@ -97,13 +97,13 @@ const Obj = {
         ui.getPanes().overlayMouseTarget.appendChild(ui.div);
 
         // Add listeners to the element.
-        google.maps.event.addDomListener(ui.div, 'click', (event) => {
+        google.maps.event.addDomListener(ui.div, 'click', event => {
           google.maps.event.trigger(ui, 'click');
           if (ui.isFunction(ui.onClick)) ui.onClick();
           event.stopPropagation();
         });
 
-        google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
+        google.maps.event.addDomListener(ui.div, 'mouseover', event => {
           google.maps.event.trigger(ui, 'mouseover');
           if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
           event.stopPropagation();
@@ -131,8 +131,6 @@ const Obj = {
         };
         const divWidth = $div.outerWidth();
         const divHeight = $div.outerHeight();
-        console.log(divWidth);
-        console.log(divHeight);
 
         switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
           case 'left top':
diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss
index 489b37e..fe76460 100755
--- a/src/scss/_components/_ui.main.scss
+++ b/src/scss/_components/_ui.main.scss
@@ -371,3 +371,8 @@ textarea,
         padding-right: $grid-gutter-xs-width / 2;
     }
 }
+
+#ForgotPassword {
+    margin: 1rem 0;
+    width: 100%;
+}