diff --git a/src/styles/button.less b/src/styles/button.less
index 8cbc2ad..a5b6336 100644
--- a/src/styles/button.less
+++ b/src/styles/button.less
@@ -1,70 +1,72 @@
-.button {
-  background: #444444;
-  padding: 4px 16px;
-  height: 18px;
-  line-height: 1em;
-  border-radius: @button_radius;
-  font-family: inherit;
-  font-size: 1em;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
-  color: white;
-  font-weight: 400;
-  border: none;
-  position: relative;
-
-  &.outline {
-    box-shadow: inset #444444 0 0 0 1px;
-    background: transparent;
-  }
-
-  &.primary {
-    background: #3c78db;
-    color: white;
-  }
-
-  &.danger {
-    background: #ed2f3b;
-    color: white;
-  }
-
-  &.success {
-    background: #17bf6d;
-    color: white;
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    touch-action: none;
-    pointer-events: none;
-  }
-
-  input[type="file"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-  }
-}
-
-.button-group {
-  display: flex;
-
+:global {
   .button {
-    border-radius: 0;
-    margin: 0;
+    background: #444444;
+    padding: 4px 16px;
+    height: 18px;
+    line-height: 1em;
+    border-radius: @button_radius;
+    font-family: inherit;
+    font-size: 1em;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    box-shadow: inset rgba(100, 100, 100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
+    color: white;
+    font-weight: 400;
+    border: none;
+    position: relative;
 
-    &:first-child {
-      border-radius: @button_radius 0 0 @button_radius;
+    &.outline {
+      box-shadow: inset #444444 0 0 0 1px;
+      background: transparent;
     }
 
-    &:last-child {
-      border-radius: 0 @button_radius @button_radius 0;
+    &.primary {
+      background: #3c78db;
+      color: white;
+    }
+
+    &.danger {
+      background: #ed2f3b;
+      color: white;
+    }
+
+    &.success {
+      background: #17bf6d;
+      color: white;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      touch-action: none;
+      pointer-events: none;
+    }
+
+    input[type="file"] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+  }
+
+  .button-group {
+    display: flex;
+
+    .button {
+      border-radius: 0;
+      margin: 0;
+
+      &:first-child {
+        border-radius: @button_radius 0 0 @button_radius;
+      }
+
+      &:last-child {
+        border-radius: 0 @button_radius @button_radius 0;
+      }
     }
   }
 }
diff --git a/src/styles/dialogs.less b/src/styles/dialogs.less
index 0fcad20..e85efa9 100644
--- a/src/styles/dialogs.less
+++ b/src/styles/dialogs.less
@@ -1,541 +1,544 @@
-.dialog {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 360px;
-  height: 100%;
-  z-index: 5;
-  display: flex;
-  flex-direction: column;
-
-  padding: 10px 10px 68px 10px;
-  box-sizing: border-box;
-
-  transform: translate3d(-100%, 0, 0);
-  pointer-events: none;
-  transition: transform 500ms, background-color 500ms 500ms;
-
-  &.active {
-    transform: translate3d(0, 0, 0);
-    pointer-events: all;
-    transition: transform 500ms 250ms, background-color 250ms;
-
-    .dialog-close-button {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-    }
-  }
-
-  @media (max-width: @mobile_breakpoint) {
-    width: 100%;
-    z-index: 6;
-    transform: translate3d(0, 100%, 0);
-    padding: 0 0 68px 0;
-
-    &.active {
-      background: rgba(19, 45, 53, 0.95);
-    }
-  }
-}
-
-.dialog-close-button {
-  position: absolute;
-  right: -38px;
-  bottom: 68px;
-  background: @red_secondary;
-  width: 48px;
-  height: 48px;
-  transform: translate3d(-48px, 0, 0);
-  border-radius: 0 @panel_radius @panel_radius 0;
-  opacity: 0;
-
-  transition: all 250ms 250ms;
-  z-index: -1;
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    fill: white;
-    width: 40px;
-    height: 40px;
-  }
-
-  @media (max-width: @mobile_breakpoint) {
-    border-radius: @panel_radius;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: 68px;
-    background: @dialog_background;
-  }
-}
-
-.dialog-content {
-  background: @dialog_background;
-  overflow: hidden;
-  position: relative;
-  border-radius: @panel_radius @panel_radius 0 @panel_radius;
-  box-shadow: @dialog_shadow;
-
-  display: flex;
-  flex-direction: column;
-
-  a {
-    color: white;
-    opacity: 0.8;
-  }
-
-  &.full {
-    flex: 1;
-  }
-}
-
-.dialog-flex-scroll {
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  // height: 100%;
-}
-
-.nominatim-dialog-content {
-  padding-bottom: 48px;
-  min-height: 25vh;
-}
-
-.nominatim-list-item {
-  padding: 10px;
-  color: white;
-  cursor: pointer;
-  transition: background-color 0.25s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  // padding-bottom: 200px;
-  
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  .title  {
-    text-overflow: hidden;
-    font-size: 12px;
-    -webkit-line-clamp: 2;
-  }
-}
-
-.dialog-shader {
-  &::before,
-  &::after {
-    content: ' ';
-    height: 40px;
-    width: 100%;
+:global {
+  .dialog {
+    position: fixed;
     left: 0;
     top: 0;
-    background: linear-gradient(180deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
-    position: absolute;
-    z-index: 5;
-    pointer-events: none;
-  }
-
-  &::after {
-    top: auto;
-    bottom: 0;
-    background: linear-gradient(0deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
-  }
-}
-
-.dialog-maplist {
-  box-sizing: border-box;
-  padding: 10px 0 0 0;
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.dialog-maplist-pulse {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 10;
-  background: linear-gradient(fade(@loading_shade, 0%), @loading_shade 70%);
-  height: 100px;
-  pointer-events: none;
-  transition: opacity 100ms;
-  opacity: 0;
-
-  &.active {
-    opacity: 1;
-    animation: pulse 500ms 250ms infinite alternate;
-  }
-}
-
-.dialog-maplist-loader {
-  display: flex;
-  margin-bottom: 10px;
-  text-transform: uppercase;
-  color: white;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  opacity: 0.1;
-
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  padding-top: 200px;
-  box-sizing: border-box;
-  font-weight: 600;
-  font-size: 20px;
-  text-align: center;
-
-  .spin {
-    animation: spin infinite reverse 2s linear;
-  }
-  .dialog-maplist-icon {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -100px;
-    margin-top: -100px;
-
-    svg {
-      width: 200px;
-      height: 200px;
-      fill: white;
-    }
-  }
-}
-
-.route-row-wrapper {
-  padding: 0 10px;
-  position: relative;
-  margin-bottom: 10px;
-  transition: all 500ms;
-  display: flex;
-  flex-direction: column;
-
-  &.has_edit {
-    //transform: translateY(-2px);
-    .route-row {
-      background: fade(@green_secondary, 30%);
-    }
-  }
-
-  &.is_menu_target {
-    .route-row,
-    .route-row-fav {
-      transform: translateX(-120px);
-    }
-
-    .route-row-edit-menu {
-      width: 120px;
-    }
-  }
-}
-
-.route-row-editor {
-  color: white;
-  padding: 5px 0 5px;
-}
-
-.route-row-buttons {
-  flex: 1;
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-}
-
-.route-row-view {
-  overflow: hidden;
-  transition: height 500ms;
-  position: relative;
-  display: flex;
-
-  &.has_menu {
-    padding-right: 32px;
-  }
-}
-
-.route-row-edit {
-  background: fade(@green_secondary, 30%);
-}
-
-.route-row-drop {
-  background: fade(@red_secondary, 20%);
-
-  .route-row {
-    align-items: center;
-  }
-}
-
-.route-row {
-  background: rgba(255, 255, 255, 0.05);
-  padding: 10px 10px 5px 10px;
-  color: white;
-  user-select: none;
-  cursor: pointer;
-  transition: background 250ms, transform 500ms;
-  position: relative;
-  flex: 1;
-  min-height: 64px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: stretch;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-
-    .route-row-panel {
-      transform: scaleY(1);
-      pointer-events: all;
-      touch-action: initial;
-    }
-  }
-}
-
-.route-row-edit-button {
-  width: 32px;
-  background: rgba(255, 255, 255, 0.08);
-  fill: rgba(255, 255, 255, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 250ms;
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-}
-
-.route-row-fav {
-  width: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  fill: fade(white, 30%);
-  background: fade(white, 8%);
-  cursor: pointer;
-  transition: background 250ms, transform 500ms;
-
-  &:hover {
-    background: fade(white, 10%);
-  }
-}
-
-.route-row-edit-menu {
-  width: 0;
-  height: 100%;
-  right: 32px;
-  bottom: 0;
-  position: absolute;
-  background: rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  transition: all 500ms;
-  display: flex;
-  fill: fade(white, 30%);
-
-  div {
-    width: 60px;
+    width: 360px;
     height: 100%;
+    z-index: 5;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
 
-    &:first-child {
-      box-shadow: fade(black, 30%) 1px 0;
+    padding: 10px 10px 68px 10px;
+    box-sizing: border-box;
+
+    transform: translate3d(-100%, 0, 0);
+    pointer-events: none;
+    transition: transform 500ms, background-color 500ms 500ms;
+
+    &.active {
+      transform: translate3d(0, 0, 0);
+      pointer-events: all;
+      transition: transform 500ms 250ms, background-color 250ms;
+
+      .dialog-close-button {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
     }
 
-    &:hover {
-      background: fade(@red_secondary, 30%);
-    }
+    @media (max-width: @mobile_breakpoint) {
+      width: 100%;
+      z-index: 6;
+      transform: translate3d(0, 100%, 0);
+      padding: 0 0 68px 0;
 
-    &.modify-button {
-      &:hover {
-        background: fade(@green_secondary, 30%);
+      &.active {
+        background: rgba(19, 45, 53, 0.95);
       }
     }
   }
-}
 
-.route-title {
-  margin-bottom: 5px;
-  font-weight: bold;
+  .dialog-close-button {
+    position: absolute;
+    right: -38px;
+    bottom: 68px;
+    background: @red_secondary;
+    width: 48px;
+    height: 48px;
+    transform: translate3d(-48px, 0, 0);
+    border-radius: 0 @panel_radius @panel_radius 0;
+    opacity: 0;
 
-  text-overflow: ellipsis;
-  overflow: hidden;
-  position: relative;
-  max-height: 2.4em;
-  word-break: break-word;
-  display: flex;
+    transition: all 250ms 250ms;
+    z-index: -1;
+    cursor: pointer;
 
-  .route-row-corner {
-    svg {
-      fill: fade(white, 50%);
-      margin-right: 2px;
-      flex-shrink: 0;
-    }
-  }
-}
-
-.route-description {
-  font-size: 0.9em;
-  opacity: 0.3;
-  margin-bottom: 5px;
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-
-  svg {
-    width: 20px;
-    height: 20px;
-    fill: white;
-    vertical-align: text-bottom;
-    margin-bottom: -2px;
-  }
-
-  span {
-    padding-right: 10px;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-}
-
-.dialog-head {
-  background: rgba(255, 255, 255, 0.1);
-  padding: 10px;
-  color: white;
-}
-
-.dialog-tabs {
-  background: rgba(255, 255, 255, 0);
-  border-radius: @panel_radius @panel_radius 0 0;
-  height: 32px;
-  user-select: none;
-  flex-direction: row;
-  display: flex;
-
-  .dialog-tab {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
+
+    svg {
+      fill: white;
+      width: 40px;
+      height: 40px;
+    }
+
+    @media (max-width: @mobile_breakpoint) {
+      border-radius: @panel_radius;
+      bottom: 0;
+      right: 0;
+      width: 100%;
+      height: 68px;
+      background: @dialog_background;
+    }
+  }
+
+  .dialog-content {
+    background: @dialog_background;
+    overflow: hidden;
+    position: relative;
+    border-radius: @panel_radius @panel_radius 0 @panel_radius;
+    box-shadow: @dialog_shadow;
+
+    display: flex;
+    flex-direction: column;
+
+    a {
+      color: white;
+      opacity: 0.8;
+    }
+
+    &.full {
+      flex: 1;
+    }
+  }
+
+  .dialog-flex-scroll {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    // height: 100%;
+  }
+
+  .nominatim-dialog-content {
+    padding-bottom: 48px;
+    min-height: 25vh;
+  }
+
+  .nominatim-list-item {
+    padding: 10px;
     color: white;
-    padding: 0 20px;
     cursor: pointer;
-    border-radius: @panel_radius @panel_radius 0 0;
-    flex: 1;
-    height: 32px;
+    transition: background-color 0.25s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // padding-bottom: 200px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .title {
+      text-overflow: hidden;
+      font-size: 12px;
+      -webkit-line-clamp: 2;
+    }
+  }
+
+  .dialog-shader {
+    &::before,
+    &::after {
+      content: ' ';
+      height: 40px;
+      width: 100%;
+      left: 0;
+      top: 0;
+      background: linear-gradient(180deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
+      position: absolute;
+      z-index: 5;
+      pointer-events: none;
+    }
+
+    &::after {
+      top: auto;
+      bottom: 0;
+      background: linear-gradient(0deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
+    }
+  }
+
+  .dialog-maplist {
+    box-sizing: border-box;
+    padding: 10px 0 0 0;
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .dialog-maplist-pulse {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+    background: linear-gradient(fade(@loading_shade, 0%), @loading_shade 70%);
+    height: 100px;
+    pointer-events: none;
+    transition: opacity 100ms;
+    opacity: 0;
 
     &.active {
+      opacity: 1;
+      animation: pulse 500ms 250ms infinite alternate;
+    }
+  }
+
+  .dialog-maplist-loader {
+    display: flex;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    color: white;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    opacity: 0.1;
+
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    padding-top: 200px;
+    box-sizing: border-box;
+    font-weight: 600;
+    font-size: 20px;
+    text-align: center;
+
+    .spin {
+      animation: spin infinite reverse 2s linear;
+    }
+
+    .dialog-maplist-icon {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -100px;
+      margin-top: -100px;
+
+      svg {
+        width: 200px;
+        height: 200px;
+        fill: white;
+      }
+    }
+  }
+
+  .route-row-wrapper {
+    padding: 0 10px;
+    position: relative;
+    margin-bottom: 10px;
+    transition: all 500ms;
+    display: flex;
+    flex-direction: column;
+
+    &.has_edit {
+      //transform: translateY(-2px);
+      .route-row {
+        background: fade(@green_secondary, 30%);
+      }
+    }
+
+    &.is_menu_target {
+      .route-row,
+      .route-row-fav {
+        transform: translateX(-120px);
+      }
+
+      .route-row-edit-menu {
+        width: 120px;
+      }
+    }
+  }
+
+  .route-row-editor {
+    color: white;
+    padding: 5px 0 5px;
+  }
+
+  .route-row-buttons {
+    flex: 1;
+    flex-direction: row;
+    display: flex;
+    align-items: center;
+  }
+
+  .route-row-view {
+    overflow: hidden;
+    transition: height 500ms;
+    position: relative;
+    display: flex;
+
+    &.has_menu {
+      padding-right: 32px;
+    }
+  }
+
+  .route-row-edit {
+    background: fade(@green_secondary, 30%);
+  }
+
+  .route-row-drop {
+    background: fade(@red_secondary, 20%);
+
+    .route-row {
+      align-items: center;
+    }
+  }
+
+  .route-row {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 10px 10px 5px 10px;
+    color: white;
+    user-select: none;
+    cursor: pointer;
+    transition: background 250ms, transform 500ms;
+    position: relative;
+    flex: 1;
+    min-height: 64px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+
+      .route-row-panel {
+        transform: scaleY(1);
+        pointer-events: all;
+        touch-action: initial;
+      }
+    }
+  }
+
+  .route-row-edit-button {
+    width: 32px;
+    background: rgba(255, 255, 255, 0.08);
+    fill: rgba(255, 255, 255, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 250ms;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+
+    &:hover {
       background: rgba(255, 255, 255, 0.1);
     }
   }
 
-  @media (max-width: @mobile_breakpoint) {
-    height: 48px;
+  .route-row-fav {
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    fill: fade(white, 30%);
+    background: fade(white, 8%);
+    cursor: pointer;
+    transition: background 250ms, transform 500ms;
+
+    &:hover {
+      background: fade(white, 10%);
+    }
+  }
+
+  .route-row-edit-menu {
+    width: 0;
+    height: 100%;
+    right: 32px;
+    bottom: 0;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: all 500ms;
+    display: flex;
+    fill: fade(white, 30%);
+
+    div {
+      width: 60px;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:first-child {
+        box-shadow: fade(black, 30%) 1px 0;
+      }
+
+      &:hover {
+        background: fade(@red_secondary, 30%);
+      }
+
+      &.modify-button {
+        &:hover {
+          background: fade(@green_secondary, 30%);
+        }
+      }
+    }
+  }
+
+  .route-title {
+    margin-bottom: 5px;
+    font-weight: bold;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    position: relative;
+    max-height: 2.4em;
+    word-break: break-word;
+    display: flex;
+
+    .route-row-corner {
+      svg {
+        fill: fade(white, 50%);
+        margin-right: 2px;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  .route-description {
+    font-size: 0.9em;
+    opacity: 0.3;
+    margin-bottom: 5px;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: white;
+      vertical-align: text-bottom;
+      margin-bottom: -2px;
+    }
+
+    span {
+      padding-right: 10px;
+
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  .dialog-head {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 10px;
+    color: white;
+  }
+
+  .dialog-tabs {
+    background: rgba(255, 255, 255, 0);
+    border-radius: @panel_radius @panel_radius 0 0;
+    height: 32px;
+    user-select: none;
+    flex-direction: row;
+    display: flex;
 
     .dialog-tab {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      padding: 0 20px;
+      cursor: pointer;
+      border-radius: @panel_radius @panel_radius 0 0;
+      flex: 1;
+      height: 32px;
+
+      &.active {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    @media (max-width: @mobile_breakpoint) {
       height: 48px;
+
+      .dialog-tab {
+        height: 48px;
+      }
+    }
+  }
+
+  .dialog-head-title {
+    font-size: 20px;
+    text-transform: uppercase;
+  }
+
+  .app-info-changelog {
+    color: white;
+    padding: 10px;
+    font-size: 0.8em;
+    user-select: none;
+
+    div {
+      opacity: 0.8;
+    }
+  }
+
+  .app-info-number {
+    width: 16px;
+  }
+
+  .app-info-changelog-item {
+    text-transform: uppercase;
+    display: flex;
+    flex: 1;
+
+    .app-info-current {
+      font-size: 0.9em;
+      opacity: 0.3;
+      display: inline;
+      padding-left: 10px;
+    }
+  }
+
+  .app-info-version {
+    padding-bottom: 5px;
+    flex: 1;
+    flex-direction: column-reverse;
+  }
+
+  .app-info-release {
+    padding-bottom: 5px;
+    display: flex;
+    flex: 1;
+  }
+
+  .app-info-build {
+    padding-bottom: 5px;
+    display: flex;
+    flex-direction: column-reverse;
+    flex: 1;
+  }
+
+  .app-info-change {
+    display: flex;
+    flex-direction: row;
+    padding-bottom: 5px;
+
+    .app-info-number {
+      width: 20px;
+    }
+
+    span {
+      flex: 1;
+    }
+  }
+
+  .app-info-list {
+    padding: 5px 0;
+
+    div {
+      padding: 5px 0;
     }
   }
 }
-
-.dialog-head-title {
-  font-size: 20px;
-  text-transform: uppercase;
-}
-
-.app-info-changelog {
-  color: white;
-  padding: 10px;
-  font-size: 0.8em;
-  user-select: none;
-
-  div {
-    opacity: 0.8;
-  }
-}
-
-.app-info-number {
-  width: 16px;
-}
-
-.app-info-changelog-item {
-  text-transform: uppercase;
-  display: flex;
-  flex: 1;
-
-  .app-info-current {
-    font-size: 0.9em;
-    opacity: 0.3;
-    display: inline;
-    padding-left: 10px;
-  }
-}
-
-.app-info-version {
-  padding-bottom: 5px;
-  flex: 1;
-  flex-direction: column-reverse;
-}
-
-.app-info-release {
-  padding-bottom: 5px;
-  display: flex;
-  flex: 1;
-}
-
-.app-info-build {
-  padding-bottom: 5px;
-  display: flex;
-  flex-direction: column-reverse;
-  flex: 1;
-}
-
-.app-info-change {
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 5px;
-
-  .app-info-number {
-    width: 20px;
-  }
-
-  span {
-    flex: 1;
-  }
-}
-
-.app-info-list {
-  padding: 5px 0;
-
-  div {
-    padding: 5px 0;
-  }
-}
diff --git a/src/styles/gpx.less b/src/styles/gpx.less
index 82b9f2c..695c73d 100644
--- a/src/styles/gpx.less
+++ b/src/styles/gpx.less
@@ -1,99 +1,101 @@
-.gpx-title {
-  display: flex;
-  flex-direction: row;
-  padding: 10px;
-}
-
-.gpx-row {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: row;
-  padding: 5px 10px;
-  min-width: 0;
-
-  &_disabled {
-    opacity: 0.5;
+:global {
+  .gpx-title {
+    display: flex;
+    flex-direction: row;
+    padding: 10px;
   }
 
-  &__title {
-    flex: 1;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    margin: 0 10px;
-    cursor: pointer;
-  }
-
-  &__buttons {
+  .gpx-row {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
+    flex-direction: row;
+    padding: 5px 10px;
+    min-width: 0;
 
-    svg {
-      fill: white;
+    &_disabled {
+      opacity: 0.5;
     }
 
-    > div {
-      padding: 0 5px;
+    &__title {
+      flex: 1;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin: 0 10px;
+      cursor: pointer;
+    }
+
+    &__buttons {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        fill: white;
+      }
+
+      > div {
+        padding: 0 5px;
+        cursor: pointer;
+
+        &:last-child {
+          padding-right: 0;
+        }
+
+        &:first-child {
+          padding-left: 0;
+        }
+      }
+    }
+
+    &__color {
+      width: 8px;
+      height: 8px;
+      border-radius: 100%;
       cursor: pointer;
 
+      // span {
+
+      // }
+    }
+  }
+
+  .gpx-buttons {
+    padding: 10px;
+
+    & > * {
+      margin: 2.5px 0;
+
       &:last-child {
-        padding-right: 0;
+        margin-bottom: 0;
       }
 
       &:first-child {
-        padding-left: 0;
+        margin-top: 0;
       }
     }
-  }
 
-  &__color {
-    width: 8px;
-    height: 8px;
-    border-radius: 100%;
-    cursor: pointer;
-
-    // span {
-
-    // }
-  }
-}
-
-.gpx-buttons {
-  padding: 10px;
-
-  & > * {
-    margin: 2.5px 0;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    &:first-child {
-      margin-top: 0;
+    & > .button {
+      width: 100%;
+      box-sizing: border-box;
+      position: relative;
+      height: 32px;
+      align-items: center;
+      justify-content: center;
     }
   }
 
-  & > .button {
-    width: 100%;
+  .gpx-confirm {
+    position: absolute;
+    bottom: 5%;
+    left: 5%;
+    z-index: 5;
+    width: 90%;
+    padding: 10px;
+    border-radius: @panel_radius;
     box-sizing: border-box;
-    position: relative;
-    height: 32px;
-    align-items: center;
-    justify-content: center;
+    background: lighten(@bar_background, 10%);
+    box-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px 10px;
   }
 }
-
-.gpx-confirm {
-  position: absolute;
-  bottom: 5%;
-  left: 5%;
-  z-index: 5;
-  width: 90%;
-  padding: 10px;
-  border-radius: @panel_radius;
-  box-sizing: border-box;
-  background: lighten(@bar_background, 10%);
-  box-shadow: rgba(0,0,0,0.5) 0 5px 5px 10px;
-}
\ No newline at end of file
diff --git a/src/styles/logo.less b/src/styles/logo.less
index e6fdfa0..8d9272e 100644
--- a/src/styles/logo.less
+++ b/src/styles/logo.less
@@ -1,24 +1,24 @@
-.logo-preview {
-  position: fixed;
-  right: 0;
-  bottom: 58px;
+:global {
+  .logo-preview {
+    position: fixed;
+    right: 0;
+    bottom: 58px;
 
-  width: 400px;
-  height: 100%;
+    width: 400px;
+    height: 100%;
 
-  opacity: 0.5;
-  pointer-events: none;
-  z-index: 2;
-  background: 100% 100% no-repeat;
+    opacity: 0.5;
+    pointer-events: none;
+    z-index: 2;
+    background: 100% 100% no-repeat;
 
-  &.top {
-    background-position: 100% 0;
-  }
+    &.top {
+      background-position: 100% 0;
+    }
 
-  @media (max-width: @mobile_breakpoint) {
-    transform: scale(0.5);
-    transform-origin: 100% 100%;
+    @media (max-width: @mobile_breakpoint) {
+      transform: scale(0.5);
+      transform-origin: 100% 100%;
+    }
   }
 }
-
-
diff --git a/src/styles/main.less b/src/styles/main.less
index 2e79d9e..70e6c95 100644
--- a/src/styles/main.less
+++ b/src/styles/main.less
@@ -15,153 +15,159 @@
 @import 'switch.less';
 @import 'gpx.less';
 
-body {
-  font-family: 'Rubik', sans-serif;
-  font-size: 15px;
-  // letter-spacing: 0.4px;
-  padding: 0;
-  font-weight: 400;
-  -webkit-font-smoothing: antialiased;
-}
+:global {
+  body {
+    font-family: 'Rubik', sans-serif;
+    font-size: 15px;
+    // letter-spacing: 0.4px;
+    padding: 0;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+  }
 
-.gray {
-  opacity: 0.5;
-}
+  .gray {
+    opacity: 0.5;
+  }
 
-.big {
-  font-size: 1em;
-  font-weight: 500;
-}
+  .big {
+    font-size: 1em;
+    font-weight: 500;
+  }
 
-.upper {
-  text-transform: uppercase;
-}
+  .upper {
+    text-transform: uppercase;
+  }
 
-.small {
-  font-size: 0.9em;
-}
+  .small {
+    font-size: 0.9em;
+  }
 
-.white {
-  color: white;
-}
+  .white {
+    color: white;
+  }
 
-.success {
-  color: @color_success;
-}
+  .success {
+    color: @color_success;
+  }
 
-.primary {
-  color: @color_primary;
-}
+  .primary {
+    color: @color_primary;
+  }
 
-.danger {
-  color: @color_danger;
-}
+  .danger {
+    color: @color_danger;
+  }
 
-.cursor-tooltip {
-  position: fixed;
-  top: 4px;
-  left: 4px;
-  width: 10px;
-  height: 10px;
-  z-index: 1;
-  pointer-events: none;
+  .cursor-tooltip {
+    position: fixed;
+    top: 4px;
+    left: 4px;
+    width: 10px;
+    height: 10px;
+    z-index: 1;
+    pointer-events: none;
 
-  svg {
+    svg {
+      width: 20px;
+      height: 20px;
+      stroke-width: 4;
+      fill: black;
+    }
+
+    @media (hover: none) {
+      display: none;
+    }
+  }
+
+  .cursor-icon-sticker {
     width: 20px;
     height: 20px;
-    stroke-width: 4;
-    fill: black;
-  }
-
-  @media(hover: none) {
-    display: none;
-  }
-}
-
-.cursor-icon-sticker {
-  width: 20px;
-  height: 20px;
-  background-size: cover;
-  background-position: 0 50%;
-  position: absolute;
-  top: -30px;
-}
-
-.track-vertical {
-  position: absolute;
-  right: 0;
-  height: 100%;
-  width: 10px !important;
-}
-
-.thumb-vertical {
-  position: absolute;
-  width: 20px !important;
-  left: -10px;
-  border-radius: 4px 0 0 4px;
-  transition: background 250ms;
-  cursor: grab;
-
-  &:hover, &:active {
-    background: rgba(255, 255, 255, 0.3);
-  }
-
-  &::after {
-    content: ' ';
-    width: 5px;
-    height: 100%;
-    display: block;
-    right: 0;
+    background-size: cover;
+    background-position: 0 50%;
     position: absolute;
+    top: -30px;
+  }
+
+  .track-vertical {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    width: 10px !important;
+  }
+
+  .thumb-vertical {
+    position: absolute;
+    width: 20px !important;
+    left: -10px;
     border-radius: 4px 0 0 4px;
-    background: rgba(255, 255, 255, 0.5);
+    transition: background 250ms;
+    cursor: grab;
+
+    &:hover, &:active {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    &::after {
+      content: ' ';
+      width: 5px;
+      height: 100%;
+      display: block;
+      right: 0;
+      position: absolute;
+      border-radius: 4px 0 0 4px;
+      background: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+
+  @media (max-width: @mobile_breakpoint) {
+    .desktop-only {
+      display: none;
+    }
+  }
+
+  @media (min-width: @mobile_breakpoint) {
+    .mobile-only {
+      display: none;
+    }
+  }
+
+  h2 {
+    font: inherit;
+    font-size: 18px;
+    font-weight: 400;
+    text-transform: uppercase;
+    margin: 10px 0;
+  }
+
+  hr {
+    border: none;
+    height: 2px;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  input {
+    width: 100%;
+    padding: 5px 10px 5px 10px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: @panel_radius;
+    border: none;
+    outline: none;
+    color: white;
+
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 200;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
   }
 }
-
-.pointer {
-  cursor: pointer;
-}
-
-@media (max-width: @mobile_breakpoint) {
-  .desktop-only { display: none; }
-}
-
-@media (min-width: @mobile_breakpoint) {
-  .mobile-only { display: none; }
-}
-
-h2 {
-  font: inherit;
-  font-size: 18px;
-  font-weight: 400;
-  text-transform: uppercase;
-  margin: 10px 0;
-}
-
-hr {
-  border: none;
-  height: 2px;
-  background: rgba(0, 0, 0, 0.3);
-}
-
-input {
-  width: 100%;
-  padding: 5px 10px 5px 10px;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: @panel_radius;
-  border: none;
-  outline: none;
-  color: white;
-
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: 200;
-}
-
-.relative {
-  position: relative;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
diff --git a/src/styles/map.less b/src/styles/map.less
index 08a1cb3..69ada45 100644
--- a/src/styles/map.less
+++ b/src/styles/map.less
@@ -1,366 +1,367 @@
-#map {
-  width: 50% !important;
-  height: 100%;
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  top: 0;
-
-  cursor: crosshair;
-}
-
-.leaflet-control-zoom {
-  display: none;
-}
-
-.leaflet-touch .leaflet-bar a {
-  border-radius: @panel_radius !important;
-}
-
-@keyframes vertex_spin {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(1.2);
-  }
-}
-
-.leaflet-vertex-drag-helper {
-  pointer-events: none !important;
-  background: fade(red, 50%);
-  border-radius: 12px;
-
-  &::after {
-    content: ' ';
-    width: 24px;
-    height: 24px;
-    border: 2px solid @red_secondary;
-    border-radius: 24px;
+:global {
+  #map {
+    width: 50% !important;
+    height: 100%;
     position: absolute;
-    top: -9px;
-    left: -9px;
-    animation: vertex_spin 500ms infinite linear alternate;
-  }
-}
-
-.vertex-icon-mixin(@left, @right) {
-  &::after {
-    content: ' ';
-    position: absolute;
-    top: 4px;
-    left: @left;
-    right: @right;
-    width: 8px;
-    height: 8px;
-    background: white;
-    border-radius: 8px;
-    transform: scale(1);
-    transition: transform 150ms;
-  }
-}
-
-.leaflet-vertex-icon {
-  outline: none !important;
-  border-radius: 10px;
-  opacity: 1;
-  border: none;
-  width: 16px !important;
-  height: 16px !important;
-  margin-left: -8px !important;
-  margin-top: -8px !important;
-  background: transparent;
-  position: absolute;
-  cursor: grab;
-
-  &::before {
-    width: 24px;
-    height: 24px;
-    background: none;
-    content: ' ';
-    position: absolute;
-    transform: translate(-4px, -4px);
-    border-radius: 16px;
-    top: 0;
+    z-index: 1;
     left: 0;
+    top: 0;
+
+    cursor: crosshair;
   }
 
-  @media (max-width: @mobile_breakpoint) {
-    &::before {
-      width: 32px;
-      height: 32px;
-      transform: translate(-8px, -8px);
-      background: rgba(255, 50, 0, 0.3);
+  .leaflet-control-zoom {
+    display: none;
+  }
+
+  .leaflet-touch .leaflet-bar a {
+    border-radius: @panel_radius !important;
+  }
+
+  @keyframes vertex_spin {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(1.2);
     }
   }
 
-  .vertex-icon-mixin(4px, auto);
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.leaflet-arrow {
-  position: absolute;
-  left: -18px;
-  top: -18px;
-  width: 48px;
-  height: 48px;
-  pointer-events: none;
-}
-
-.leaflet-arrow-icon {
-  pointer-events: none !important;
-}
-
-.leaflet-km-marker,
-.leaflet-km-marker-2 {
-  position: absolute;
-  z-index: 0 !important;
-
-  .leaflet-km-dist {
-    background: @red_secondary;
-    color: white;
-    border-radius: 8px;
-    font-size: 12px;
-    text-align: center;
-    height: 14px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    top: 50%;
-    left: 50%;
-    font-weight: bold;
-    padding: 0 2px;
-
-    svg {
-      position: absolute;
-      top: -16px;
-      left: 50%;
-      transform: translate(-50%, 0);
-    }
-
-    &.reverse {
-      svg {
-        transform: translate(-50%, 0) rotate(180deg);
-      }
-    }
-  }
-}
-
-.start-marker {
-  svg {
-    position: absolute;
-    left: -4px;
-    top: -4px;
-  }
-}
-
-.end-marker {
-  .leaflet-km-dist {
-    left: auto;
-    right: -3px;
-    top: -2px;
-    position: absolute;
-    z-index: -10;
-    padding: 1px 15px 1px 6px;
-    border-radius: 10px;
+  .leaflet-vertex-drag-helper {
+    pointer-events: none !important;
+    background: fade(red, 50%);
+    border-radius: 12px;
 
     &::after {
       content: ' ';
-      width: 8px;
-      height: 8px;
-      border-radius: 4px;
-      background: white;
+      width: 24px;
+      height: 24px;
+      border: 2px solid @red_secondary;
+      border-radius: 24px;
       position: absolute;
-      right: 4px;
-      top: 4px;
+      top: -9px;
+      left: -9px;
+      animation: vertex_spin 500ms infinite linear alternate;
     }
   }
 
-  &.right {
-    .leaflet-km-dist {
-      padding: 2px 4px 2px 16px;
-      left: -3px;
-      right: auto;
+  .vertex-icon-mixin(@left, @right) {
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 4px;
+      left: @left;
+      right: @right;
+      width: 8px;
+      height: 8px;
+      background: white;
+      border-radius: 8px;
+      transform: scale(1);
+      transition: transform 150ms;
+    }
+  }
 
-      &::after {
-        left: 5px;
-        right: auto;
+  .leaflet-vertex-icon {
+    outline: none !important;
+    border-radius: 10px;
+    opacity: 1;
+    border: none;
+    width: 16px !important;
+    height: 16px !important;
+    margin-left: -8px !important;
+    margin-top: -8px !important;
+    background: transparent;
+    position: absolute;
+    cursor: grab;
+
+    &::before {
+      width: 24px;
+      height: 24px;
+      background: none;
+      content: ' ';
+      position: absolute;
+      transform: translate(-4px, -4px);
+      border-radius: 16px;
+      top: 0;
+      left: 0;
+    }
+
+    @media (max-width: @mobile_breakpoint) {
+      &::before {
+        width: 32px;
+        height: 32px;
+        transform: translate(-8px, -8px);
+        background: rgba(255, 50, 0, 0.3);
+      }
+    }
+
+    .vertex-icon-mixin(4px, auto);
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .leaflet-arrow {
+    position: absolute;
+    left: -18px;
+    top: -18px;
+    width: 48px;
+    height: 48px;
+    pointer-events: none;
+  }
+
+  .leaflet-arrow-icon {
+    pointer-events: none !important;
+  }
+
+  .leaflet-km-marker,
+  .leaflet-km-marker-2 {
+    position: absolute;
+    z-index: 0 !important;
+
+    .leaflet-km-dist {
+      background: @red_secondary;
+      color: white;
+      border-radius: 8px;
+      font-size: 12px;
+      text-align: center;
+      height: 14px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      top: 50%;
+      left: 50%;
+      font-weight: bold;
+      padding: 0 2px;
+
+      svg {
+        position: absolute;
+        top: -16px;
+        left: 50%;
+        transform: translate(-50%, 0);
+      }
+
+      &.reverse {
+        svg {
+          transform: translate(-50%, 0) rotate(180deg);
+        }
       }
     }
   }
-}
 
-.router-marker {
-  div {
-    background: @router_line;
-    color: white;
-    left: auto;
-    right: 15px;
-    // transform: translate(50%, 0);
-    top: -3px;
-    position: absolute;
-    z-index: -10;
-    padding: 0 6px 0 6px;
-    border-radius: 12px;
-    font-weight: bold;
-  }
-
-  &.right {
-    div {
-      right: auto;
-      left: 15px;
+  .start-marker {
+    svg {
+      position: absolute;
+      left: -4px;
+      top: -4px;
     }
   }
-}
 
-.leaflet-km-marker-2 {
-  .leaflet-km-dist {
-    background: green;
+  .end-marker {
+    .leaflet-km-dist {
+      left: auto;
+      right: -3px;
+      top: -2px;
+      position: absolute;
+      z-index: -10;
+      padding: 1px 15px 1px 6px;
+      border-radius: 10px;
+
+      &::after {
+        content: ' ';
+        width: 8px;
+        height: 8px;
+        border-radius: 4px;
+        background: white;
+        position: absolute;
+        right: 4px;
+        top: 4px;
+      }
+    }
+
+    &.right {
+      .leaflet-km-dist {
+        padding: 2px 4px 2px 16px;
+        left: -3px;
+        right: auto;
+
+        &::after {
+          left: 5px;
+          right: auto;
+        }
+      }
+    }
   }
-}
 
-.touch-hinter-poly {
-  stroke: rgba(255, 50, 0, 0.1);
-  cursor: grab;
+  .router-marker {
+    div {
+      background: @router_line;
+      color: white;
+      left: auto;
+      right: 15px;
+      // transform: translate(50%, 0);
+      top: -3px;
+      position: absolute;
+      z-index: -10;
+      padding: 0 6px 0 6px;
+      border-radius: 12px;
+      font-weight: bold;
+    }
 
-  @media (max-width: @mobile_breakpoint) {
-    stroke: rgba(255, 50, 0, 0.2);
+    &.right {
+      div {
+        right: auto;
+        left: 15px;
+      }
+    }
   }
-}
 
-.leaflet-control-container .leaflet-routing-container-hide {
-  display: none;
-}
+  .leaflet-km-marker-2 {
+    .leaflet-km-dist {
+      background: green;
+    }
+  }
 
-.leaflet-bar {
-  box-shadow: @bar_shadow !important;
-  border: none !important;
-}
+  .touch-hinter-poly {
+    stroke: rgba(255, 50, 0, 0.1);
+    cursor: grab;
 
-.leaflet-bar a {
-  background: @bar_background;
-  color: white;
-  text-shadow: none;
-  user-select: none;
-  border-bottom: none;
+    @media (max-width: @mobile_breakpoint) {
+      stroke: rgba(255, 50, 0, 0.2);
+    }
+  }
 
-  &:hover {
+  .leaflet-control-container .leaflet-routing-container-hide {
+    display: none;
+  }
+
+  .leaflet-bar {
+    box-shadow: @bar_shadow !important;
+    border: none !important;
+  }
+
+  .leaflet-bar a {
     background: @bar_background;
     color: white;
+    text-shadow: none;
+    user-select: none;
     border-bottom: none;
-  }
-}
 
-.location-marker {
-  width: 20px;
-  height: 3px;
-  margin-left: -10px;
-  margin-top: -2px;
-  outline: none;
-  z-index: 10001;
-  background: @red_secondary;
-
-  &:after {
-    content: ' ';
-    box-shadow: 0 0 0 3px @red_secondary;
-    background: white;
-    border-radius: 8px;
-    width: 8px;
-    height: 8px;
-    position: absolute;
-    left: 6px;
-    top: -3px;
+    &:hover {
+      background: @bar_background;
+      color: white;
+      border-bottom: none;
+    }
   }
 
-  &:before {
-    content: ' ';
-    display: block;
-    width: 3px;
-    height: 20px;
-    background: @red_secondary;
-    left: 8.5px;
-    top: -9px;
-    position: absolute;
-  }
-}
-
-.leaflet-top {
-  top: 42px;
-}
-
-.leaflet-div-icon {
-  background: none !important;
-  border: none !important;
-}
-
-.custom-marker-cluster {
-  width: 24px;
-  height: 24px;
-  background: @cluster_small;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  box-shadow: fade(@cluster_small, 70%) 0 0 0 5px;
-  font-weight: bold;
-  font-size: 13px;
-  transform: translate(-12px, -12px);
-  transition: box-shadow 250ms;
-  position: relative;
-  outline: none;
-
-  &:hover {
-    box-shadow: fade(@cluster_small, 70%) 0 0 0 7px;
-  }
-
-  span {
+  .location-marker {
+    width: 20px;
+    height: 3px;
+    margin-left: -10px;
+    margin-top: -2px;
     outline: none;
-    position: absolute;
-    right: -7px;
-    bottom: 11px;
+    z-index: 10001;
+    background: @red_secondary;
+
+    &:after {
+      content: ' ';
+      box-shadow: 0 0 0 3px @red_secondary;
+      background: white;
+      border-radius: 8px;
+      width: 8px;
+      height: 8px;
+      position: absolute;
+      left: 6px;
+      top: -3px;
+    }
+
+    &:before {
+      content: ' ';
+      display: block;
+      width: 3px;
+      height: 20px;
+      background: @red_secondary;
+      left: 8.5px;
+      top: -9px;
+      position: absolute;
+    }
+  }
+
+  .leaflet-top {
+    top: 42px;
+  }
+
+  .leaflet-div-icon {
+    background: none !important;
+    border: none !important;
+  }
+
+  .custom-marker-cluster {
+    width: 24px;
+    height: 24px;
     background: @cluster_small;
-    width: 16px;
-    height: 16px;
+    border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 8px;
-    font-size: 11px;
+    color: white;
+    box-shadow: fade(@cluster_small, 70%) 0 0 0 5px;
+    font-weight: bold;
+    font-size: 13px;
+    transform: translate(-12px, -12px);
+    transition: box-shadow 250ms;
+    position: relative;
+    outline: none;
+
+    &:hover {
+      box-shadow: fade(@cluster_small, 70%) 0 0 0 7px;
+    }
+
+    span {
+      outline: none;
+      position: absolute;
+      right: -7px;
+      bottom: 11px;
+      background: @cluster_small;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      font-size: 11px;
+    }
+  }
+
+  #canvas {
+    background: #eeeeee;
+    z-index: 0;
+
+    > div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .leaflet-pane {
+    user-select: none;
+  }
+
+  .current-location {
+    width: 0;
+    height: 0;
+    position: relative;
+
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      fill: @bar_background;
+      stroke: white;
+      stroke-width: 0.2px;
+    }
   }
 }
-
-#canvas {
-  background: #eeeeee;
-  z-index: 0;
-
-  > div {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.leaflet-pane {
-  user-select: none;
-}
-
-.current-location {
-  width: 0;
-  height: 0;
-  position: relative;
-
-  svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    fill: @bar_background;
-    stroke: white;
-    stroke-width: 0.2px;
-  }
-}
- 
\ No newline at end of file
diff --git a/src/styles/panel.less b/src/styles/panel.less
index 20f47f0..5c8c4f9 100644
--- a/src/styles/panel.less
+++ b/src/styles/panel.less
@@ -1,794 +1,796 @@
-.control-bar {
-  background: @bar_background;
-  border-radius: @panel_radius;
-  display: flex;
-  box-shadow: @bar_shadow;
-  align-items: center;
-  justify-content: center;
-
-  @media (max-width: @mobile_breakpoint) {
-    box-shadow: none;
-  }
-}
-
-.control-bar-padded {
-  padding: 0 5px;
-}
-
-.control-sep {
-  height: 36px;
-  background: #222222;
-  width: 4px;
-
-  @media (max-width: @mobile_breakpoint) {
-    margin-left: -1px;
-    margin-right: -1px;
-    width: 6px;
-  }
-}
-
-.secondary-bar {
-  background: #222222;
-  margin: 0 -1px;
-  padding: 0 1px;
-
-  &:first-child {
-    border-radius: @panel_radius 0 0 @panel_radius;
-  }
-
-  .panel & button {
-    height: 40px;
-    padding: 4px;
-  }
-
-  &__undo {
-    opacity: 0;
-    transform: translate(50px, 0);
-    pointer-events: none;
-    touch-action: none;
-    transition: transform 0.25s, opacity 0.25s;
-    z-index: -1;
-
-    &.active {
-      opacity: 1;
-      transform: translate(0, 0);
-      pointer-events: all;
-      touch-action: initial;
-    }
-  }
-}
-
-.panel {
-  position: fixed;
-  left: 10px;
-  bottom: 10px;
-  z-index: 6;
-  color: white;
-  display: flex;
-  align-items: center;
-  transform: translateY(100px);
-  transition: transform 500ms;
-
-  &.active {
-    transform: translateY(0);
-  }
-
-  &.right {
-    left: auto;
-    right: 10px;
-  }
-
-  &.center {
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-  }
-
-  button {
-    border: none;
-    background: transparent;
-    padding: 8px;
-    outline: none;
-    cursor: pointer;
-    display: inline-flex;
-    color: white;
+:global {
+  .control-bar {
+    background: @bar_background;
+    border-radius: @panel_radius;
+    display: flex;
+    box-shadow: @bar_shadow;
     align-items: center;
-    transition: background-color 500ms;
-    height: 48px;
-    box-sizing: border-box;
-    user-select: none;
-    position: relative;
+    justify-content: center;
 
-    &:hover {
-      background: rgba(100, 100, 100, 0.2);
+    @media (max-width: @mobile_breakpoint) {
+      box-shadow: none;
     }
+  }
 
-    span {
-      margin-right: 8px;
-      font-size: 14px;
-      font-weight: 500;
-      margin-left: 8px;
-      text-transform: uppercase;
+  .control-bar-padded {
+    padding: 0 5px;
+  }
+
+  .control-sep {
+    height: 36px;
+    background: #222222;
+    width: 4px;
+
+    @media (max-width: @mobile_breakpoint) {
+      margin-left: -1px;
+      margin-right: -1px;
+      width: 6px;
     }
+  }
+
+  .secondary-bar {
+    background: #222222;
+    margin: 0 -1px;
+    padding: 0 1px;
 
     &:first-child {
       border-radius: @panel_radius 0 0 @panel_radius;
     }
 
-    &:last-child {
-      border-radius: 0 @panel_radius @panel_radius 0;
+    .panel & button {
+      height: 40px;
+      padding: 4px;
+    }
+
+    &__undo {
+      opacity: 0;
+      transform: translate(50px, 0);
+      pointer-events: none;
+      touch-action: none;
+      transition: transform 0.25s, opacity 0.25s;
+      z-index: -1;
+
+      &.active {
+        opacity: 1;
+        transform: translate(0, 0);
+        pointer-events: all;
+        touch-action: initial;
+      }
+    }
+  }
+
+  .panel {
+    position: fixed;
+    left: 10px;
+    bottom: 10px;
+    z-index: 6;
+    color: white;
+    display: flex;
+    align-items: center;
+    transform: translateY(100px);
+    transition: transform 500ms;
+
+    &.active {
+      transform: translateY(0);
+    }
+
+    &.right {
+      left: auto;
+      right: 10px;
+    }
+
+    &.center {
+      left: 50%;
+      right: auto;
+      transform: translateX(-50%);
+    }
+
+    button {
+      border: none;
+      background: transparent;
+      padding: 8px;
+      outline: none;
+      cursor: pointer;
+      display: inline-flex;
+      color: white;
+      align-items: center;
+      transition: background-color 500ms;
+      height: 48px;
+      box-sizing: border-box;
+      user-select: none;
+      position: relative;
+
+      &:hover {
+        background: rgba(100, 100, 100, 0.2);
+      }
+
+      span {
+        margin-right: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        margin-left: 8px;
+        text-transform: uppercase;
+      }
+
+      &:first-child {
+        border-radius: @panel_radius 0 0 @panel_radius;
+      }
+
+      &:last-child {
+        border-radius: 0 @panel_radius @panel_radius 0;
+      }
+
+      &.active {
+        svg {
+          fill: url(#activeButtonGradient);
+          stroke: url(#activeButtonGradient);
+        }
+      }
+
+      &.disabled,
+      &.inactive {
+        color: #999999;
+
+        svg {
+          fill: #999999;
+        }
+      }
+
+      &.disabled {
+        pointer-events: none;
+      }
+
+      &.highlighted {
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      &.cancel {
+        // background: linear-gradient(270deg, #0f5871, #444444 60%);
+      }
+
+      &.primary {
+        background: linear-gradient(150deg, @blue_primary, @blue_secondary) 50% 50% no-repeat;
+        background-size: 100% 100%;
+      }
+
+      &.success {
+        background: linear-gradient(150deg, @green_primary, @green_secondary) 50% 50% no-repeat;
+        background-size: 100% 100%;
+      }
+
+      &.danger {
+        background: linear-gradient(150deg, @red_primary, @red_secondary) 50% 50% no-repeat;
+        background-size: 100% 100%;
+      }
+
+      &.single {
+        border-radius: @panel_radius;
+      }
+
+      svg {
+        fill: white;
+        stroke: white;
+        display: inline;
+        fill-rule: evenodd;
+        stroke-linecap: butt;
+        stroke-linejoin: miter;
+        stroke-miterlimit: 4;
+        stroke-dasharray: none;
+        stroke-width: 3;
+      }
+    }
+  }
+
+  .panel-tooltip {
+    position: absolute;
+    bottom: 58px;
+    left: 50%;
+    background: @tooltip_background;
+    padding: 10px;
+    transform: translate(-50%, -10px);
+    border-radius: @panel_radius;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 250ms;
+    font-size: 13px;
+    color: white;
+
+    @media (max-width: @mobile_breakpoint) {
+      display: none;
+    }
+
+    &::after {
+      content: ' ';
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      background: @tooltip_background;
+      bottom: 0;
+      transform: translate(-50%, 5px) rotate(45deg);
+      left: 50%;
+    }
+
+    &.top {
+      bottom: auto;
+      top: 43px;
+      transform: translate(-50%, 10px);
+
+      &::after {
+        bottom: auto;
+        top: 0;
+        transform: translate(-50%, -5px) rotate(45deg);
+      }
+    }
+  }
+
+  .panel button,
+  .tooltip-container {
+    position: relative;
+
+    &:hover .panel-tooltip {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+  }
+
+  .control-bar-counter {
+    color: white;
+    min-width: 12px;
+    height: 12px;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 10px;
+    position: absolute;
+    bottom: 50%;
+    right: 50%;
+    box-sizing: border-box;
+    transform: translate(50%, 50%);
+    line-height: 12px;
+  }
+
+  .panel-separator {
+    height: 48px;
+    width: 4px;
+    background: #222222;
+  }
+
+  .panel-user {
+    @media (max-width: @mobile_breakpoint) {
+      z-index: 3;
+      flex-direction: column-reverse;
+      align-items: flex-start;
+
+      .control-sep {
+        opacity: 0;
+        height: 10px;
+      }
+    }
+
+    @media (max-width: @micro_breakpoint) {
+      bottom: 68px;
+    }
+  }
+
+  .control-dialog {
+    position: absolute;
+    right: 10px;
+    bottom: 68px;
+    z-index: 3;
+    color: white;
+    box-sizing: border-box;
+    // padding-bottom: 48px;
+    box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px;
+    background: #222222;
+    border-radius: @panel_radius;
+
+    &.bottom.right {
+      width: 100%;
+      max-width: 500px;
+    }
+
+    &.top {
+      bottom: auto;
+      top: 52px;
+    }
+
+    &.left,
+    &__left {
+      right: auto;
+      left: 10px;
+
+      @media (max-width: @micro_breakpoint) {
+        left: 68px;
+      }
+    }
+
+    .helper:first-child {
+      border-radius: @panel_radius @panel_radius 0 0;
+    }
+
+    .helper:last-child {
+      border-radius: 0 0 @panel_radius @panel_radius;
+    }
+
+    .helper:only-child {
+      border-radius: @panel_radius;
+    }
+
+    &__big {
+      width: calc(100% - 20px);
+      max-width: 620px;
+
+      @media (max-width: @micro_breakpoint) {
+        width: calc(100% - 78px);
+      }
+    }
+
+    &__medium {
+      width: calc(100% - 20px);
+      max-width: 417px;
+
+      @media (max-width: @micro_breakpoint) {
+        width: calc(100% - 78px);
+      }
+    }
+
+    &__small {
+      width: calc(100% - 20px);
+      max-width: 324px;
+
+      @media (max-width: @micro_breakpoint) {
+        width: calc(100% - 78px);
+      }
+    }
+  }
+
+  .control-dialog-provider {
+    width: 500px;
+
+    @media (max-width: @mobile_breakpoint) {
+      width: 100%;
+      left: 0;
+      padding: 0 10px;
+    }
+  }
+
+  .helper {
+    // width: 500px;
+    padding: 12px;
+    font-weight: 200;
+    font-size: 1em;
+    display: flex;
+
+    //background: #222222;
+    //border-radius: @panel_radius;
+    box-shadow: @bar_shadow;
+
+    @media (max-width: @mobile_breakpoint) {
+      box-shadow: none;
+    }
+  }
+
+  .helper-prefetch {
+    flex-direction: column;
+  }
+
+  .helper__text {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    svg {
+      fill: white;
+      width: 24px;
+      height: 24px;
+      margin-right: 6px;
+    }
+
+    &.success {
+      color: @color_success;
+
+      svg {
+        fill: @color_success;
+      }
+    }
+
+    &.primary {
+      color: @color_danger;
+
+      svg {
+        fill: @color_danger;
+      }
+    }
+
+    &.danger {
+      color: @color_danger;
+
+      svg {
+        fill: @color_danger;
+      }
+    }
+  }
+
+  .flex_1 {
+    flex: 1;
+  }
+
+  .helper__icon_button {
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+
+    svg {
+      margin-right: 0;
+    }
+
+    &.inactive {
+      opacity: 0.5;
     }
 
     &.active {
       svg {
         fill: url(#activeButtonGradient);
-        stroke: url(#activeButtonGradient);
       }
     }
+  }
 
-    &.disabled,
-    &.inactive {
-      color: #999999;
+  .helper__buttons {
+    display: flex;
+    align-items: center;
+    user-select: none;
 
-      svg {
-        fill: #999999;
-      }
-    }
-
-    &.disabled {
-      pointer-events: none;
-    }
-
-    &.highlighted {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    &.cancel {
-      // background: linear-gradient(270deg, #0f5871, #444444 60%);
-    }
-
-    &.primary {
-      background: linear-gradient(150deg, @blue_primary, @blue_secondary) 50% 50% no-repeat;
-      background-size: 100% 100%;
-    }
-
-    &.success {
-      background: linear-gradient(150deg, @green_primary, @green_secondary) 50% 50% no-repeat;
-      background-size: 100% 100%;
-    }
-
-    &.danger {
-      background: linear-gradient(150deg, @red_primary, @red_secondary) 50% 50% no-repeat;
-      background-size: 100% 100%;
-    }
-
-    &.single {
-      border-radius: @panel_radius;
+    .button {
+      margin-left: 10px;
     }
 
     svg {
       fill: white;
       stroke: white;
-      display: inline;
-      fill-rule: evenodd;
-      stroke-linecap: butt;
-      stroke-linejoin: miter;
-      stroke-miterlimit: 4;
-      stroke-dasharray: none;
-      stroke-width: 3;
+
+      cursor: pointer;
+      opacity: 0.5;
+      transition: opacity 250ms;
     }
-  }
-}
 
-.panel-tooltip {
-  position: absolute;
-  bottom: 58px;
-  left: 50%;
-  background: @tooltip_background;
-  padding: 10px;
-  transform: translate(-50%, -10px);
-  border-radius: @panel_radius;
-  opacity: 0;
-  pointer-events: none;
-  transition: all 250ms;
-  font-size: 13px;
-  color: white;
-
-  @media (max-width: @mobile_breakpoint) {
-    display: none;
-  }
-
-  &::after {
-    content: ' ';
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    background: @tooltip_background;
-    bottom: 0;
-    transform: translate(-50%, 5px) rotate(45deg);
-    left: 50%;
-  }
-
-  &.top {
-    bottom: auto;
-    top: 43px;
-    transform: translate(-50%, 10px);
-
-    &::after {
-      bottom: auto;
-      top: 0;
-      transform: translate(-50%, -5px) rotate(45deg);
-    }
-  }
-}
-
-.panel button,
-.tooltip-container {
-  position: relative;
-
-  &:hover .panel-tooltip {
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-}
-
-.control-bar-counter {
-  color: white;
-  min-width: 12px;
-  height: 12px;
-  border-radius: 10px;
-  font-weight: 600;
-  font-size: 10px;
-  position: absolute;
-  bottom: 50%;
-  right: 50%;
-  box-sizing: border-box;
-  transform: translate(50%, 50%);
-  line-height: 12px;
-}
-
-.panel-separator {
-  height: 48px;
-  width: 4px;
-  background: #222222;
-}
-
-.panel-user {
-  @media (max-width: @mobile_breakpoint) {
-    z-index: 3;
-    flex-direction: column-reverse;
-    align-items: flex-start;
-
-    .control-sep {
-      opacity: 0;
-      height: 10px;
-    }
-  }
-
-  @media (max-width: @micro_breakpoint) {
-    bottom: 68px;
-  }
-}
-
-.control-dialog {
-  position: absolute;
-  right: 10px;
-  bottom: 68px;
-  z-index: 3;
-  color: white;
-  box-sizing: border-box;
-  // padding-bottom: 48px;
-  box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px;
-  background: #222222;
-  border-radius: @panel_radius;
-
-  &.bottom.right {
-    width: 100%;
-    max-width: 500px;
-  }
-
-  &.top {
-    bottom: auto;
-    top: 52px;
-  }
-
-  &.left,
-  &__left {
-    right: auto;
-    left: 10px;
-
-    @media (max-width: @micro_breakpoint) {
-      left: 68px;
-    }
-  }
-
-  .helper:first-child {
-    border-radius: @panel_radius @panel_radius 0 0;
-  }
-
-  .helper:last-child {
-    border-radius: 0 0 @panel_radius @panel_radius;
-  }
-
-  .helper:only-child {
-    border-radius: @panel_radius;
-  }
-
-  &__big {
-    width: calc(100% - 20px);
-    max-width: 620px;
-
-    @media (max-width: @micro_breakpoint) {
-      width: calc(100% - 78px);
-    }
-  }
-
-  &__medium {
-    width: calc(100% - 20px);
-    max-width: 417px;
-
-    @media (max-width: @micro_breakpoint) {
-      width: calc(100% - 78px);
-    }
-  }
-
-  &__small {
-    width: calc(100% - 20px);
-    max-width: 324px;
-
-    @media (max-width: @micro_breakpoint) {
-      width: calc(100% - 78px);
-    }
-  }
-}
-
-.control-dialog-provider {
-  width: 500px;
-
-  @media (max-width: @mobile_breakpoint) {
-    width: 100%;
-    left: 0;
-    padding: 0 10px;
-  }
-}
-
-.helper {
-  // width: 500px;
-  padding: 12px;
-  font-weight: 200;
-  font-size: 1em;
-  display: flex;
-
-  //background: #222222;
-  //border-radius: @panel_radius;
-  box-shadow: @bar_shadow;
-
-  @media (max-width: @mobile_breakpoint) {
-    box-shadow: none;
-  }
-}
-
-.helper-prefetch {
-  flex-direction: column;
-}
-
-.helper__text {
-  width: 100%;
-  display: flex;
-  align-items: center;
-
-  svg {
-    fill: white;
-    width: 24px;
-    height: 24px;
-    margin-right: 6px;
-  }
-
-  &.success {
-    color: @color_success;
-
-    svg {
-      fill: @color_success;
-    }
-  }
-
-  &.primary {
-    color: @color_danger;
-
-    svg {
-      fill: @color_danger;
-    }
-  }
-
-  &.danger {
-    color: @color_danger;
-
-    svg {
-      fill: @color_danger;
-    }
-  }
-}
-
-.flex_1 {
-  flex: 1;
-}
-
-.helper__icon_button {
-  width: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: none;
-  border: none;
-  outline: none;
-  cursor: pointer;
-
-  svg {
-    margin-right: 0;
-  }
-
-  &.inactive {
-    opacity: 0.5;
-  }
-
-  &.active {
-    svg {
-      fill: url(#activeButtonGradient);
-    }
-  }
-}
-
-.helper__buttons {
-  display: flex;
-  align-items: center;
-  user-select: none;
-
-  .button {
-    margin-left: 10px;
-  }
-
-  svg {
-    fill: white;
-    stroke: white;
-
-    cursor: pointer;
-    opacity: 0.5;
-    transition: opacity 250ms;
-  }
-
-  &:hover svg {
-    opacity: 1;
-  }
-}
-
-.trash-buttons {
-  @media (max-width: @mobile_breakpoint) {
-    flex-direction: column;
-
-    .button-group {
-      margin-bottom: 10px;
-    }
-  }
-}
-
-.logo-helper {
-  width: 200px;
-  flex-direction: column;
-  padding: 16px 0 16px 0;
-  position: relative;
-  overflow: hidden;
-}
-
-.helper-back {
-  width: 200px;
-  height: 200px;
-  z-index: -1;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-
-  svg {
-    fill: @bar_background;
-  }
-}
-
-.helper-menu-item {
-  padding: 8px 20px;
-  user-select: none;
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  &.active {
-    &::after {
-      content: ' ';
-      width: 16px;
-      height: 4px;
-      left: 0;
-      top: 14px;
-      position: absolute;
-      background: white;
-    }
-  }
-}
-
-.provider-helper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
-
-  .provider-helper-thumb {
-    height: 100px;
-    background: #333333;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    background: 50% 50% no-repeat;
-    border-radius: @panel_radius;
-    cursor: pointer;
-    position: relative;
-  }
-
-  .provider-helper-check {
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    bottom: 50%;
-    right: 50%;
-    background: rgba(0, 0, 0, 0.7);
-    border-radius: 20px;
-    transform: translate(50%, 50%);
-
-    svg {
-      fill: white;
-      padding: 4px;
-    }
-  }
-}
-
-.status-panel {
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  height: 32px;
-  z-index: 5;
-  display: flex;
-
-  &.bottom {
-    top: auto;
-    bottom: 68px;
-  }
-
-  &.right {
-    left: auto;
-    right: 10px;
-
-    .status-bar {
-      margin-right: 0;
-      margin-left: 10px;
-    }
-  }
-}
-
-.status-bar {
-  background: #222222;
-  display: flex;
-  font-weight: 200;
-  color: #cccccc;
-  user-select: none;
-  border-radius: @panel_radius;
-  margin-right: 10px;
-  align-items: center;
-  justify-content: center;
-  box-shadow: @bar_shadow;
-  outline: none;
-  position: relative;
-
-  @media (max-width: @mobile_breakpoint) {
-    box-shadow: none;
-  }
-
-  span {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
-    text-transform: uppercase;
-    font-size: 0.9em;
-  }
-
-  &.square {
-    width: 32px;
-  }
-
-  &.padded {
-    padding: 0 10px;
-  }
-
-  &.warning {
-    background-color: shade(@red_secondary, 10%);
-
-    svg {
-      //fill: @red_secondary;
-      fill: black;
-    }
-  }
-
-  &.icon-only {
-    padding: 0 10px 0 15px;
-  }
-
-  &.top-control {
-    justify-content: flex-start;
-  }
-
-  svg {
-    fill: #cccccc;
-    margin-left: -5px;
-  }
-
-  &:hover {
-    .status-bar-tip {
+    &:hover svg {
       opacity: 1;
     }
   }
-}
 
-.status-bar-tip {
-  position: absolute;
-  background: @bar_background;
-  top: 100%;
-  padding: 10px;
-  margin-top: 10px;
-  right: 0;
-  border-radius: @panel_radius;
-  touch-action: none;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 250ms;
-}
+  .trash-buttons {
+    @media (max-width: @mobile_breakpoint) {
+      flex-direction: column;
 
-.status-bar-sep {
-  height: 24px;
-  width: 1px;
-  background: rgba(255, 255, 255, 0.2);
-  margin: 0 8px 0 5px;
-}
-
-.dialog-prefetch-stage {
-  font-size: 1em;
-  text-transform: uppercase;
-  opacity: 0.7;
-}
-
-.dialog-prefetch-progress {
-  padding: 10px 0 5px;
-}
-
-.speed-helper {
-  width: 300px;
-  padding: 0 20px;
-
-  .rc-slider {
-    width: 100%;
-  }
-}
-
-.title-dialog-wrapper {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 360px;
-  height: 100%;
-  background: transparent;
-  z-index: 2;
-  padding: 10px 10px 58px 10px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: flex-end;
-  pointer-events: none;
-  touch-action: none;
-}
-
-.title-dialog-sizer {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: flex-end;
-}
-
-.title-dialog {
-  z-index: 2;
-  transition: opacity 500ms, transform 1s;
-  transform: translate(0, 68px);
-  user-select: none;
-  pointer-events: all;
-  touch-action: auto;
-  display: flex;
-  flex-direction: column;
-  opacity: 0;
-  align-items: flex-start;
-
-  @media (max-width: @mobile_breakpoint) {
-    display: none;
-  }
-
-  &.active {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-
-  .title-dialog-pane {
-    margin-bottom: 10px;
-    padding: 10px;
-    background: @title_dialog_color;
-    color: fade(white, 50%);
-    font-size: 13px;
-    box-sizing: border-box;
-    border-radius: @panel_radius;
-
-    h2 {
-      margin: 0;
-      padding: 0 5px 0 0;
-      font-weight: 400;
-      font-size: 1.6em;
-      color: white;
+      .button-group {
+        margin-bottom: 10px;
+      }
     }
   }
 
-  .title-dialog-text {
-    overflow: hidden;
-    transition: height 500ms;
-    line-height: 14px;
-    padding: 0;
+  .logo-helper {
+    width: 200px;
+    flex-direction: column;
+    padding: 16px 0 16px 0;
     position: relative;
-    color: white;
+    overflow: hidden;
+  }
 
-    > div {
-      margin: 10px;
-      white-space: pre-line;
+  .helper-back {
+    width: 200px;
+    height: 200px;
+    z-index: -1;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    svg {
+      fill: @bar_background;
+    }
+  }
+
+  .helper-menu-item {
+    padding: 8px 20px;
+    user-select: none;
+    cursor: pointer;
+    position: relative;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
     }
 
-    &.has_shade {
-      ::after {
+    &.active {
+      &::after {
         content: ' ';
-        width: 100%;
-        height: 40px;
-        background: linear-gradient(fade(@title_dialog_color, 0), @title_dialog_color);
-        position: absolute;
-        bottom: 0;
+        width: 16px;
+        height: 4px;
         left: 0;
-        transition: opacity 250ms;
-        pointer-events: none;
-        touch-action: none;
+        top: 14px;
+        position: absolute;
+        background: white;
+      }
+    }
+  }
+
+  .provider-helper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+
+    .provider-helper-thumb {
+      height: 100px;
+      background: #333333;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      background: 50% 50% no-repeat;
+      border-radius: @panel_radius;
+      cursor: pointer;
+      position: relative;
+    }
+
+    .provider-helper-check {
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      bottom: 50%;
+      right: 50%;
+      background: rgba(0, 0, 0, 0.7);
+      border-radius: 20px;
+      transform: translate(50%, 50%);
+
+      svg {
+        fill: white;
+        padding: 4px;
+      }
+    }
+  }
+
+  .status-panel {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    height: 32px;
+    z-index: 5;
+    display: flex;
+
+    &.bottom {
+      top: auto;
+      bottom: 68px;
+    }
+
+    &.right {
+      left: auto;
+      right: 10px;
+
+      .status-bar {
+        margin-right: 0;
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .status-bar {
+    background: #222222;
+    display: flex;
+    font-weight: 200;
+    color: #cccccc;
+    user-select: none;
+    border-radius: @panel_radius;
+    margin-right: 10px;
+    align-items: center;
+    justify-content: center;
+    box-shadow: @bar_shadow;
+    outline: none;
+    position: relative;
+
+    @media (max-width: @mobile_breakpoint) {
+      box-shadow: none;
+    }
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      text-transform: uppercase;
+      font-size: 0.9em;
+    }
+
+    &.square {
+      width: 32px;
+    }
+
+    &.padded {
+      padding: 0 10px;
+    }
+
+    &.warning {
+      background-color: shade(@red_secondary, 10%);
+
+      svg {
+        //fill: @red_secondary;
+        fill: black;
+      }
+    }
+
+    &.icon-only {
+      padding: 0 10px 0 15px;
+    }
+
+    &.top-control {
+      justify-content: flex-start;
+    }
+
+    svg {
+      fill: #cccccc;
+      margin-left: -5px;
+    }
+
+    &:hover {
+      .status-bar-tip {
+        opacity: 1;
+      }
+    }
+  }
+
+  .status-bar-tip {
+    position: absolute;
+    background: @bar_background;
+    top: 100%;
+    padding: 10px;
+    margin-top: 10px;
+    right: 0;
+    border-radius: @panel_radius;
+    touch-action: none;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 250ms;
+  }
+
+  .status-bar-sep {
+    height: 24px;
+    width: 1px;
+    background: rgba(255, 255, 255, 0.2);
+    margin: 0 8px 0 5px;
+  }
+
+  .dialog-prefetch-stage {
+    font-size: 1em;
+    text-transform: uppercase;
+    opacity: 0.7;
+  }
+
+  .dialog-prefetch-progress {
+    padding: 10px 0 5px;
+  }
+
+  .speed-helper {
+    width: 300px;
+    padding: 0 20px;
+
+    .rc-slider {
+      width: 100%;
+    }
+  }
+
+  .title-dialog-wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 360px;
+    height: 100%;
+    background: transparent;
+    z-index: 2;
+    padding: 10px 10px 58px 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-end;
+    pointer-events: none;
+    touch-action: none;
+  }
+
+  .title-dialog-sizer {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .title-dialog {
+    z-index: 2;
+    transition: opacity 500ms, transform 1s;
+    transform: translate(0, 68px);
+    user-select: none;
+    pointer-events: all;
+    touch-action: auto;
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    align-items: flex-start;
+
+    @media (max-width: @mobile_breakpoint) {
+      display: none;
+    }
+
+    &.active {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+
+    .title-dialog-pane {
+      margin-bottom: 10px;
+      padding: 10px;
+      background: @title_dialog_color;
+      color: fade(white, 50%);
+      font-size: 13px;
+      box-sizing: border-box;
+      border-radius: @panel_radius;
+
+      h2 {
+        margin: 0;
+        padding: 0 5px 0 0;
+        font-weight: 400;
+        font-size: 1.6em;
+        color: white;
+      }
+    }
+
+    .title-dialog-text {
+      overflow: hidden;
+      transition: height 500ms;
+      line-height: 14px;
+      padding: 0;
+      position: relative;
+      color: white;
+
+      > div {
+        margin: 10px;
+        white-space: pre-line;
       }
 
-      &:hover {
+      &.has_shade {
         ::after {
-          opacity: 0;
+          content: ' ';
+          width: 100%;
+          height: 40px;
+          background: linear-gradient(fade(@title_dialog_color, 0), @title_dialog_color);
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          transition: opacity 250ms;
+          pointer-events: none;
+          touch-action: none;
+        }
+
+        &:hover {
+          ::after {
+            opacity: 0;
+          }
         }
       }
     }
   }
-}
 
-.location-bar {
-  width: 32px;
-}
+  .location-bar {
+    width: 32px;
+  }
 
-.nominatim-panel {
-  position: fixed;
-  bottom: 53px;
-  left: 10px;
-  width: 272px;
-}
+  .nominatim-panel {
+    position: fixed;
+    bottom: 53px;
+    left: 10px;
+    width: 272px;
+  }
 
-.nominatim-search-input {
-  padding-left: 10px;
-  flex: 1;
+  .nominatim-search-input {
+    padding-left: 10px;
+    flex: 1;
+  }
 }
diff --git a/src/styles/progress.less b/src/styles/progress.less
index 9e0314d..a9506a5 100644
--- a/src/styles/progress.less
+++ b/src/styles/progress.less
@@ -1,16 +1,18 @@
-.progress {
-  width: 100%;
-  position: relative;
-  height: 5px;
-  background: #111111;
-  border-radius: @panel_radius;
-  box-sizing: border-box;
-
-  .bar {
-    width: 30%;
-    background: linear-gradient(270deg, @blue_primary, @blue_secondary);
-    height: 100%;
+:global {
+  .progress {
+    width: 100%;
+    position: relative;
+    height: 5px;
+    background: #111111;
     border-radius: @panel_radius;
-    transition: width 500ms;
+    box-sizing: border-box;
+
+    .bar {
+      width: 30%;
+      background: linear-gradient(270deg, @blue_primary, @blue_secondary);
+      height: 100%;
+      border-radius: @panel_radius;
+      transition: width 500ms;
+    }
   }
 }
diff --git a/src/styles/renderer.less b/src/styles/renderer.less
index bbe84d5..eeb1cba 100644
--- a/src/styles/renderer.less
+++ b/src/styles/renderer.less
@@ -1,53 +1,55 @@
-.renderer-shade {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 80px;
-  box-sizing: border-box;
-
-  > div {
+:global {
+  .renderer-shade {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.9);
     display: flex;
     align-items: center;
     justify-content: center;
-    position: relative;
-    transition: opacity 250ms;
+    padding-bottom: 80px;
+    box-sizing: border-box;
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      transition: opacity 250ms;
+    }
+
+    img#rendererOutput {
+      width: 300px;
+      height: 300px;
+    }
+
+    .croppr-region {
+      box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 6px, rgba(0, 0, 0, 0.3) 0 0 0 1px;
+      border: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      overflow: hidden;
+    }
+
+    .croppr-handle {
+      width: 12px;
+      height: 12px;
+      border-radius: 8px;
+      border: none;
+      box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
+    }
   }
 
-  img#rendererOutput {
-    width: 300px;
-    height: 300px;
-  }
-
-  .croppr-region {
-    box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 6px, rgba(0, 0, 0, 0.3) 0 0 0 1px;
-    border: none;
+  .renderer-logo {
     position: absolute;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-  }
+    bottom: 0;
+    right: 0;
+    pointer-events: none;
 
-  .croppr-handle {
-    width: 12px;
-    height: 12px;
-    border-radius: 8px;
-    border: none;
-    box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
+    transform-origin: 100% 100%;
   }
 }
-
-.renderer-logo {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  pointer-events: none;
-
-  transform-origin: 100% 100%;
-}
diff --git a/src/styles/router.less b/src/styles/router.less
index 1f16eee..e9bd686 100644
--- a/src/styles/router.less
+++ b/src/styles/router.less
@@ -1,41 +1,43 @@
-.router-waypoint {
-  width: 40px;
-  height: 40px;
-  margin-left: -20px;
-  margin-top: -20px;
-  outline: none;
-  z-index: 10001;
+:global {
+  .router-waypoint {
+    width: 40px;
+    height: 40px;
+    margin-left: -20px;
+    margin-top: -20px;
+    outline: none;
+    z-index: 10001;
+
+    &:after {
+      content: ' ';
+      display: block;
+      width: 20px;
+      height: 20px;
+      border-radius: 10px;
+      box-shadow: 0 0 0 2px @router_line;
+      position: absolute;
+      left: 10px;
+      top: 10px;
+    }
+
+    &:before {
+      content: ' ';
+      display: block;
+      width: 5px;
+      height: 5px;
+      border-radius: 10px;
+      box-shadow: 0 0 0 2px @router_line;
+      background: @router_line;
+      position: absolute;
+      left: 18px;
+      top: 18px;
+    }
 
-  &:after {
-    content: ' ';
-    display: block;
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 0 2px @router_line;
-    position: absolute;
-    left: 10px;
-    top: 10px;
   }
 
-  &:before {
-    content: ' ';
-    display: block;
-    width: 5px;
-    height: 5px;
-    border-radius: 10px;
-    box-shadow: 0 0 0 2px @router_line;
-    background: @router_line;
-    position: absolute;
-    left: 18px;
-    top: 18px;
+  .router-helper {
   }
 
-}
-
-.router-helper {
-}
-
-.router-helper__button {
-  white-space: nowrap;
+  .router-helper__button {
+    white-space: nowrap;
+  }
 }
diff --git a/src/styles/save.less b/src/styles/save.less
index 33179cd..226c7cd 100644
--- a/src/styles/save.less
+++ b/src/styles/save.less
@@ -1,173 +1,185 @@
-.save-helper {
-  padding: 0;
-  flex-direction: column;
-}
-
-.save-title {
-  padding: 10px;
-  width: 100%;
-  background: linear-gradient(175deg, #abc837 -50%, #009c80 150%);
-  flex-direction: column;
-  border-radius: @panel_radius @panel_radius 0 0;
-  font-weight: 200;
-  box-sizing: border-box;
-}
-
-@keyframes jump {
-  0% { transform: translate3d(0, 0, 0) scale(0.5); }
-  100% { transform: translate3d(0, -20px, 0) scale(1); }
-}
-
-.save-loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: @loading_shade;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 250ms;
-  opacity: 0;
-  touch-action: none;
-  pointer-events: none;
-  text-transform: uppercase;
-  font-size: 1.2em;
-  color: fade(white, 70%);
-
-  svg {
-    fill: white;
-
-    &:nth-child(2) { animation-delay: 200ms; }
-    &:nth-child(3) { animation-delay: 400ms; }
+:global {
+  .save-helper {
+    padding: 0;
+    flex-direction: column;
   }
 
-  &.active {
-    opacity: 1;
-    touch-action: auto;
-    pointer-events: all;
+  .save-title {
+    padding: 10px;
+    width: 100%;
+    background: linear-gradient(175deg, #abc837 -50%, #009c80 150%);
+    flex-direction: column;
+    border-radius: @panel_radius @panel_radius 0 0;
+    font-weight: 200;
+    box-sizing: border-box;
+  }
 
-    svg {
-      animation: jump infinite alternate 600ms;
+  @keyframes jump {
+    0% {
+      transform: translate3d(0, 0, 0) scale(0.5);
+    }
+    100% {
+      transform: translate3d(0, -20px, 0) scale(1);
     }
   }
-}
 
-.save-description {
-  padding: 5px 10px;
-}
-
-.save-title-input {
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: @panel_radius;
-  display: flex;
-
-  input {
+  .save-loader {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    padding: 5px;
-    background: transparent;
-    border: none;
-    outline: none;
-    color: white;
+    height: 100%;
+    background: @loading_shade;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 250ms;
+    opacity: 0;
+    touch-action: none;
+    pointer-events: none;
+    text-transform: uppercase;
+    font-size: 1.2em;
+    color: fade(white, 70%);
 
-    font-family: inherit;
-    font-size: 14px;
-    font-weight: 200;
-  }
-}
+    svg {
+      fill: white;
 
-.save-title-label {
-  display: flex;
-  padding: 5px 10px;
-  background: rgba(0,0,0,0.1);
-  height: 100%;
-}
+      &:nth-child(2) {
+        animation-delay: 200ms;
+      }
 
-.save-address-input {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
-  display: flex;
-  margin-bottom: 5px;
+      &:nth-child(3) {
+        animation-delay: 400ms;
+      }
+    }
 
-  input {
-    padding: 5px 5px 5px 2px;
-    background: transparent;
-  }
-}
+    &.active {
+      opacity: 1;
+      touch-action: auto;
+      pointer-events: all;
 
-.save-address-label {
-  display: flex;
-  padding: 5px 0 5px 10px;
-  height: 100%;
-  opacity: 0.5;
-  white-space: nowrap;
-}
-
-.save-address-copy {
-  background: rgba(255, 255, 255, 0.1);
-  padding: 0 5px;
-  border-radius: 0 @panel_radius @panel_radius 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 250ms;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.2);
+      svg {
+        animation: jump infinite alternate 600ms;
+      }
+    }
   }
 
-  svg {
-    fill: white;
-  }
-}
-.save-text {
-  padding: 10px;
-  line-height: 1.1em;
-  min-height: 2.2em;
-  font-size: 0.9em;
-}
-
-.save-buttons {
-  display: flex;
-  padding: 0px;
-  margin-top: 20px;
-  margin-bottom: 5px;
-
-  .button {
-    margin-left: 10px;
-  }
-}
-
-.save-buttons-text {
-  flex: 1;
-  padding: 0 10px 2px 10px;
-  align-items: center;
-  display: flex;
-
-  .switch {
-    margin-right: 0.5em;
-  }
-}
-
-.save-description {
-  textarea {
-    background: rgba(0,0,0,0.3);
-    outline: none;
-    border: none;
-    border-radius: 3px;
-    width: 100%;
-    resize: none;
-    color: inherit;
-    font: inherit;
+  .save-description {
     padding: 5px 10px;
-    font-size: 14px;
+  }
+
+  .save-title-input {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: @panel_radius;
+    display: flex;
+
+    input {
+      width: 100%;
+      padding: 5px;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: white;
+
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 200;
+    }
+  }
+
+  .save-title-label {
+    display: flex;
+    padding: 5px 10px;
+    background: rgba(0, 0, 0, 0.1);
+    height: 100%;
+  }
+
+  .save-address-input {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    display: flex;
+    margin-bottom: 5px;
+
+    input {
+      padding: 5px 5px 5px 2px;
+      background: transparent;
+    }
+  }
+
+  .save-address-label {
+    display: flex;
+    padding: 5px 0 5px 10px;
+    height: 100%;
+    opacity: 0.5;
+    white-space: nowrap;
+  }
+
+  .save-address-copy {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0 5px;
+    border-radius: 0 @panel_radius @panel_radius 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 250ms;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    svg {
+      fill: white;
+    }
+  }
+
+  .save-text {
+    padding: 10px;
+    line-height: 1.1em;
+    min-height: 2.2em;
+    font-size: 0.9em;
+  }
+
+  .save-buttons {
+    display: flex;
+    padding: 0px;
+    margin-top: 20px;
+    margin-bottom: 5px;
+
+    .button {
+      margin-left: 10px;
+    }
+  }
+
+  .save-buttons-text {
+    flex: 1;
+    padding: 0 10px 2px 10px;
+    align-items: center;
+    display: flex;
+
+    .switch {
+      margin-right: 0.5em;
+    }
+  }
+
+  .save-description {
+    textarea {
+      background: rgba(0, 0, 0, 0.3);
+      outline: none;
+      border: none;
+      border-radius: 3px;
+      width: 100%;
+      resize: none;
+      color: inherit;
+      font: inherit;
+      padding: 5px 10px;
+      font-size: 14px;
+    }
+  }
+
+  .save-controls {
+    padding: 5px 10px;
+    user-select: none;
   }
 }
-
-.save-controls {
-  padding: 5px 10px;
-  user-select: none;
-}
diff --git a/src/styles/slider.less b/src/styles/slider.less
index 243e8be..7241e58 100644
--- a/src/styles/slider.less
+++ b/src/styles/slider.less
@@ -11,329 +11,334 @@
 @ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
 @ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
 
-.borderBox() {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
-
-  * {
+:global {
+  .borderBox() {
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
-  }
-}
 
-.@{prefixClass} {
-  position: relative;
-  height: 40px;
-  padding: 15px 0;
-  // width: 100%;
-  margin: 8px;
-  border-radius: @border-radius-base;
-  touch-action: none;
-
-  .borderBox();
-
-  &-rail {
-    position: absolute;
-    width: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-    height: 4px;
-    border-radius: @border-radius-base;
-    pointer-events: none;
-  }
-
-  &-track {
-    position: absolute;
-    left: 0;
-    height: 4px;
-    border-radius: @border-radius-base;
-    background: linear-gradient(270deg, @red_secondary, @blue_secondary);
-    // background-size: 320px 100px;
-  }
-
-  &-handle {
-    position: absolute;
-    margin-left: -7px;
-    margin-top: -5px;
-    width: 14px;
-    height: 14px;
-    cursor: pointer;
-    cursor: -webkit-grab;
-    cursor: grab;
-    border-radius: 50%;
-    border: solid 2px tint(@primary-color, 50%);
-    background-color: #fff;
-    touch-action: pan-x;
-
-    &::after {
-      content: '';
-      display: block;
-      width: 40px;
-      height: 50px;
-      position: absolute;
-      left: -15px;
-      top: -16px;
-      border-radius: 4px;
-      background: black;
-      opacity: 0.2;
-    }
-
-    &:focus {
-      // border-color: tint(@primary-color, 20%);
-      box-shadow: 0 0 0 4px tint(@primary-color, 50%);
-      outline: none;
-    }
-
-    &-click-focused:focus {
-      // border-color: tint(@primary-color, 50%);
-      box-shadow: unset;
-    }
-
-    &:hover {
-      border-color: tint(@primary-color, 20%);
-    }
-
-    &:active {
-      border-color: tint(@primary-color, 20%);
-      box-shadow: 0 0 5px tint(@primary-color, 20%);
-      cursor: -webkit-grabbing;
-      cursor: grabbing;
+    * {
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
     }
   }
 
-  &-mark {
-    position: absolute;
-    top: 18px;
-    left: 0;
-    width: 100%;
-    font-size: 12px;
-    pointer-events: none;
-  }
-
-  &-mark-text {
-    position: absolute;
-    display: inline-block;
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-    color: rgba(255, 255, 255, 0.3);
-    padding-top: 10px;
-  }
-
-  &-step {
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    background: transparent;
-  }
-
-  &-dot {
-    position: absolute;
-    bottom: -2;
-    margin-left: -0.5px;
-    width: 1px;
-    height: 12px;
-    // border: 2px solid #e9e9e9;
-    background-color: black;
-    opacity: 0.2;
-    cursor: pointer;
-    border-radius: 50%;
-    vertical-align: middle;
-    &-active {
-      // border-color: tint(@primary-color, 50%);
-      background-color: white;
-      opacity: 0.2;
-    }
-  }
-
-  &-disabled {
-    .@{prefixClass}-track {
-      background-color: @disabledColor;
-    }
-
-    .@{prefixClass}-handle, .@{prefixClass}-dot {
-      border-color: @disabledColor;
-      box-shadow: none;
-      background-color: #fff;
-      cursor: not-allowed;
-      opacity: 0;
-    }
-
-    .@{prefixClass}-mark-text, .@{prefixClass}-dot, .@{prefixClass}-track {
-      cursor: not-allowed!important;
-      opacity: 0;
-    }
-  }
-}
-
-.@{prefixClass}-vertical {
-  width: 14px;
-  height: 100%;
-  padding: 0 5px;
-
   .@{prefixClass} {
+    position: relative;
+    height: 40px;
+    padding: 15px 0;
+    // width: 100%;
+    margin: 8px;
+    border-radius: @border-radius-base;
+    touch-action: none;
+
+    .borderBox();
+
     &-rail {
-      height: 100%;
-      width: 4px;
+      position: absolute;
+      width: 100%;
+      background-color: rgba(0, 0, 0, 0.3);
+      height: 4px;
+      border-radius: @border-radius-base;
+      pointer-events: none;
     }
 
     &-track {
-      left: 5px;
-      bottom: 0;
-      width: 4px;
+      position: absolute;
+      left: 0;
+      height: 4px;
+      border-radius: @border-radius-base;
+      background: linear-gradient(270deg, @red_secondary, @blue_secondary);
+      // background-size: 320px 100px;
     }
 
     &-handle {
-      margin-left: -5px;
-      margin-bottom: -7px;
-      touch-action: pan-y;
+      position: absolute;
+      margin-left: -7px;
+      margin-top: -5px;
+      width: 14px;
+      height: 14px;
+      cursor: pointer;
+      cursor: -webkit-grab;
+      cursor: grab;
+      border-radius: 50%;
+      border: solid 2px tint(@primary-color, 50%);
+      background-color: #fff;
+      touch-action: pan-x;
 
-      position: relative;
+      &::after {
+        content: '';
+        display: block;
+        width: 40px;
+        height: 50px;
+        position: absolute;
+        left: -15px;
+        top: -16px;
+        border-radius: 4px;
+        background: black;
+        opacity: 0.2;
+      }
+
+      &:focus {
+        // border-color: tint(@primary-color, 20%);
+        box-shadow: 0 0 0 4px tint(@primary-color, 50%);
+        outline: none;
+      }
+
+      &-click-focused:focus {
+        // border-color: tint(@primary-color, 50%);
+        box-shadow: unset;
+      }
+
+      &:hover {
+        border-color: tint(@primary-color, 20%);
+      }
+
+      &:active {
+        border-color: tint(@primary-color, 20%);
+        box-shadow: 0 0 5px tint(@primary-color, 20%);
+        cursor: -webkit-grabbing;
+        cursor: grabbing;
+      }
     }
 
     &-mark {
-      top: 0;
-      left: 18px;
-      height: 100%;
+      position: absolute;
+      top: 18px;
+      left: 0;
+      width: 100%;
+      font-size: 12px;
+      pointer-events: none;
+    }
+
+    &-mark-text {
+      position: absolute;
+      display: inline-block;
+      vertical-align: middle;
+      text-align: center;
+      cursor: pointer;
+      color: rgba(255, 255, 255, 0.3);
+      padding-top: 10px;
     }
 
     &-step {
-      height: 100%;
-      width: 4px;
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      background: transparent;
     }
 
     &-dot {
-      left: 2px;
-      margin-bottom: -4px;
-      &:first-child {
-        margin-bottom: -4px;
+      position: absolute;
+      bottom: -2;
+      margin-left: -0.5px;
+      width: 1px;
+      height: 12px;
+      // border: 2px solid #e9e9e9;
+      background-color: black;
+      opacity: 0.2;
+      cursor: pointer;
+      border-radius: 50%;
+      vertical-align: middle;
+
+      &-active {
+        // border-color: tint(@primary-color, 50%);
+        background-color: white;
+        opacity: 0.2;
       }
-      &:last-child {
-        margin-bottom: -4px;
+    }
+
+    &-disabled {
+      .@{prefixClass}-track {
+        background-color: @disabledColor;
+      }
+
+      .@{prefixClass}-handle, .@{prefixClass}-dot {
+        border-color: @disabledColor;
+        box-shadow: none;
+        background-color: #fff;
+        cursor: not-allowed;
+        opacity: 0;
+      }
+
+      .@{prefixClass}-mark-text, .@{prefixClass}-dot, .@{prefixClass}-track {
+        cursor: not-allowed !important;
+        opacity: 0;
       }
     }
   }
-}
 
-.motion-common() {
-  animation-duration: .3s;
-  animation-fill-mode: both;
-  display: block !important;
-}
+  .@{prefixClass}-vertical {
+    width: 14px;
+    height: 100%;
+    padding: 0 5px;
 
-.make-motion(@className, @keyframeName) {
-  .@{className}-enter, .@{className}-appear {
-    .motion-common();
-    animation-play-state: paused;
-  }
-  .@{className}-leave {
-    .motion-common();
-    animation-play-state: paused;
-  }
-  .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
-    animation-name: ~"@{keyframeName}In";
-    animation-play-state: running;
-  }
-  .@{className}-leave.@{className}-leave-active {
-    animation-name: ~"@{keyframeName}Out";
-    animation-play-state: running;
-  }
-}
-.zoom-motion(@className, @keyframeName) {
-  .make-motion(@className, @keyframeName);
-  .@{className}-enter, .@{className}-appear {
-    transform: scale(0, 0); // need this by yiminghe
-    animation-timing-function: @ease-out-quint;
-  }
-  .@{className}-leave {
-    animation-timing-function: @ease-in-quint;
-  }
-}
-.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
+    .@{prefixClass} {
+      &-rail {
+        height: 100%;
+        width: 4px;
+      }
 
-@keyframes rcSliderTooltipZoomDownIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 100%;
-    transform: scale(0, 0);
-  }
-  100% {
-    transform-origin: 50% 100%;
-    transform: scale(1, 1);
-  }
-}
+      &-track {
+        left: 5px;
+        bottom: 0;
+        width: 4px;
+      }
 
-@keyframes rcSliderTooltipZoomDownOut {
-  0% {
-    transform-origin: 50% 100%;
-    transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 50% 100%;
-    transform: scale(0, 0);
-  }
-}
+      &-handle {
+        margin-left: -5px;
+        margin-bottom: -7px;
+        touch-action: pan-y;
 
-.@{prefixClass}-tooltip {
-  position: absolute;
-  left: -9999px;
-  top: -9999px;
-  visibility: visible;
+        position: relative;
+      }
 
-  .borderBox();
+      &-mark {
+        top: 0;
+        left: 18px;
+        height: 100%;
+      }
 
-  &-hidden {
-    display: none;
+      &-step {
+        height: 100%;
+        width: 4px;
+      }
+
+      &-dot {
+        left: 2px;
+        margin-bottom: -4px;
+
+        &:first-child {
+          margin-bottom: -4px;
+        }
+
+        &:last-child {
+          margin-bottom: -4px;
+        }
+      }
+    }
   }
 
-  &-placement-top {
-    padding: @tooltip-arrow-width 0 @tooltip-distance 0;
+  .motion-common() {
+    animation-duration: .3s;
+    animation-fill-mode: both;
+    display: block !important;
   }
 
-  &-inner {
-    padding: 6px 2px;
-    min-width: 24px;
-    height: 24px;
-    font-size: 12px;
-    line-height: 1;
-    color: @tooltip-color;
-    text-align: center;
-    text-decoration: none;
-    background-color: @tooltip-bg;
-    border-radius: @border-radius-base;
-    box-shadow: 0 0 4px #d9d9d9;
+  .make-motion(@className, @keyframeName) {
+    .@{className}-enter, .@{className}-appear {
+      .motion-common();
+      animation-play-state: paused;
+    }
+    .@{className}-leave {
+      .motion-common();
+      animation-play-state: paused;
+    }
+    .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
+      animation-name: ~"@{keyframeName}In";
+      animation-play-state: running;
+    }
+    .@{className}-leave.@{className}-leave-active {
+      animation-name: ~"@{keyframeName}Out";
+      animation-play-state: running;
+    }
+  }
+  .zoom-motion(@className, @keyframeName) {
+    .make-motion(@className, @keyframeName);
+    .@{className}-enter, .@{className}-appear {
+      transform: scale(0, 0); // need this by yiminghe
+      animation-timing-function: @ease-out-quint;
+    }
+    .@{className}-leave {
+      animation-timing-function: @ease-in-quint;
+    }
+  }
+  .zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
+
+  @keyframes rcSliderTooltipZoomDownIn {
+    0% {
+      opacity: 0;
+      transform-origin: 50% 100%;
+      transform: scale(0, 0);
+    }
+    100% {
+      transform-origin: 50% 100%;
+      transform: scale(1, 1);
+    }
   }
 
-  &-arrow {
+  @keyframes rcSliderTooltipZoomDownOut {
+    0% {
+      transform-origin: 50% 100%;
+      transform: scale(1, 1);
+    }
+    100% {
+      opacity: 0;
+      transform-origin: 50% 100%;
+      transform: scale(0, 0);
+    }
+  }
+
+  .@{prefixClass}-tooltip {
     position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
+    left: -9999px;
+    top: -9999px;
+    visibility: visible;
+
+    .borderBox();
+
+    &-hidden {
+      display: none;
+    }
+
+    &-placement-top {
+      padding: @tooltip-arrow-width 0 @tooltip-distance 0;
+    }
+
+    &-inner {
+      padding: 6px 2px;
+      min-width: 24px;
+      height: 24px;
+      font-size: 12px;
+      line-height: 1;
+      color: @tooltip-color;
+      text-align: center;
+      text-decoration: none;
+      background-color: @tooltip-bg;
+      border-radius: @border-radius-base;
+      box-shadow: 0 0 4px #d9d9d9;
+    }
+
+    &-arrow {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+    }
+
+    &-placement-top &-arrow {
+      bottom: @tooltip-distance - @tooltip-arrow-width;
+      left: 50%;
+      margin-left: -@tooltip-arrow-width;
+      border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+      border-top-color: @tooltip-arrow-color;
+    }
   }
 
-  &-placement-top &-arrow {
-    bottom: @tooltip-distance - @tooltip-arrow-width;
-    left: 50%;
-    margin-left: -@tooltip-arrow-width;
-    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
-    border-top-color: @tooltip-arrow-color;
-  }
-}
-
-.range-placeholder {
-  height: 40px;
-  padding: 15px 0;
-  box-sizing: border-box;
-  margin: 8px;
-
-  &::after {
-    content: ' ';
-    display: block;
-    width: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-    height: 4px;
-    border-radius: 6px;
-    pointer-events: none;
+  .range-placeholder {
+    height: 40px;
+    padding: 15px 0;
+    box-sizing: border-box;
+    margin: 8px;
+
+    &::after {
+      content: ' ';
+      display: block;
+      width: 100%;
+      background-color: rgba(0, 0, 0, 0.3);
+      height: 4px;
+      border-radius: 6px;
+      pointer-events: none;
+    }
   }
 }
diff --git a/src/styles/stickers.less b/src/styles/stickers.less
index b676bd3..29efd5a 100644
--- a/src/styles/stickers.less
+++ b/src/styles/stickers.less
@@ -1,263 +1,265 @@
-.leaflet-dragging .sticker-container {
-  transition: none !important;
-}
-
-.sticker-container {
-  outline: none;
-  position: relative;
-  transition: transform 250ms;
-  cursor: pointer;
-  z-index: 10;
-
-  &.leaflet-drag-target {
+:global {
+  .leaflet-dragging .sticker-container {
     transition: none !important;
   }
 
-  &:before {
-    content: ' ';
-    background: @red_secondary;
+  .sticker-container {
+    outline: none;
+    position: relative;
+    transition: transform 250ms;
+    cursor: pointer;
+    z-index: 10;
+
+    &.leaflet-drag-target {
+      transition: none !important;
+    }
+
+    &:before {
+      content: ' ';
+      background: @red_secondary;
+      width: 48px;
+      height: 48px;
+      left: -24px;
+      top: -24px;
+      position: absolute;
+      border-radius: 40px;
+      opacity: 0.25;
+      transform: scale(0.5);
+      transition: opacity 250ms, transform 500ms;
+    }
+
+    &:active {
+      transition: transform 250ms;
+
+      .sticker-delete {
+        pointer-events: none;
+      }
+    }
+
+    &:hover, &:active {
+      &:before {
+        opacity: 0.3;
+        transform: scale(1);
+      }
+    }
+
+    &.inactive {
+      pointer-events: none;
+      transition: transform 250ms;
+
+      .sticker-delete {
+        display: none;
+      }
+
+      .sticker-desc.is_empty {
+        display: none;
+      }
+    }
+
+    @media (hover: hover) {
+      transition: none;
+    }
+  }
+
+  .sticker-label {
     width: 48px;
     height: 48px;
-    left: -24px;
-    top: -24px;
     position: absolute;
-    border-radius: 40px;
-    opacity: 0.25;
-    transform: scale(0.5);
-    transition: opacity 250ms, transform 500ms;
+    //background: white;
+    //border-radius: 32px;
+    left: 0;
+    top: 0;
+    outline: none;
+
+    //&:after {
+    //  content: ' ';
+    //  box-shadow: 0 0 0 1px #ff3344;
+    //  width: 80px;
+    //  height: 80px;
+    //  left: -16px;
+    //  top: -16px;
+    //  position: absolute;
+    //  border-radius: 40px;
+    //  pointer-events: none;
+    //  opacity: 0;
+    //}
+
+    svg {
+      left: -8px;
+      top: -8px;
+      position: relative;
+      z-index: 0;
+    }
+
+    .sticker-image {
+      width: 72px;
+      height: 72px;
+      left: -12px;
+      top: -12px;
+      position: relative;
+      z-index: 0;
+      background-size: cover;
+    }
+
+    &.left {
+      .sticker-desc {
+        padding: 10px 36px 10px 10px;
+        left: auto;
+        right: 24px;
+      }
+    }
   }
 
-  &:active {
+  .sticker-wrapper {
+    will-change: transform;
     transition: transform 250ms;
 
-    .sticker-delete {
-      pointer-events: none;
+    @media (hover: hover) {
+      transition: transform 0ms;
     }
   }
 
-  &:hover, &:active {
-    &:before {
-      opacity: 0.3;
-      transform: scale(1);
-    }
-  }
-
-  &.inactive {
-    pointer-events: none;
-    transition: transform 250ms;
-
-    .sticker-delete {
-      display: none;
-    }
-
-    .sticker-desc.is_empty {
-      display: none;
-    }
-  }
-
-  @media(hover: hover) {
-    transition: none;
-  }
-}
-
-.sticker-label {
-  width: 48px;
-  height: 48px;
-  position: absolute;
-  //background: white;
-  //border-radius: 32px;
-  left: 0;
-  top: 0;
-  outline: none;
-
-  //&:after {
-  //  content: ' ';
-  //  box-shadow: 0 0 0 1px #ff3344;
-  //  width: 80px;
-  //  height: 80px;
-  //  left: -16px;
-  //  top: -16px;
-  //  position: absolute;
-  //  border-radius: 40px;
-  //  pointer-events: none;
-  //  opacity: 0;
-  //}
-
-  svg {
-    left: -8px;
-    top: -8px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .sticker-image {
-    width: 72px;
-    height: 72px;
-    left: -12px;
-    top: -12px;
-    position: relative;
-    z-index: 0;
-    background-size: cover;
-  }
-
-  &.left {
-    .sticker-desc {
-      padding: 10px 36px 10px 10px;
-      left: auto;
-      right: 24px;
-    }
-  }
-}
-
-.sticker-wrapper {
-  will-change: transform;
-  transition: transform 250ms;
-
-  @media (hover: hover) {
-    transition: transform 0ms;
-  }
-}
-
-.sticker-arrow {
-  position: absolute;
-  transform-origin: 0 0;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-
-  &:after {
-    content: ' ';
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 38,20 38,38 20,38' style='fill:%23ff3344;' /%3E%3C/svg%3E") no-repeat;
-    width: 50px;
-    height: 50px;
+  .sticker-arrow {
+    position: absolute;
     transform-origin: 0 0;
-    transform: rotate(-45deg);
     left: 0;
     top: 0;
+    pointer-events: none;
+
+    &:after {
+      content: ' ';
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 38,20 38,38 20,38' style='fill:%23ff3344;' /%3E%3C/svg%3E") no-repeat;
+      width: 50px;
+      height: 50px;
+      transform-origin: 0 0;
+      transform: rotate(-45deg);
+      left: 0;
+      top: 0;
+      position: absolute;
+    }
+  }
+
+  .sticker-delete {
     position: absolute;
-  }
-}
+    width: 24px;
+    height: 24px;
+    background: red;
+    border-radius: 24px;
+    transition: transform 500ms;
+    transform: scale(1);
+    opacity: 1;
+    pointer-events: all;
+    left: 28px;
+    top: -16px;
+    z-index: 20;
 
-.sticker-delete {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  background: red;
-  border-radius: 24px;
-  transition: transform 500ms;
-  transform: scale(1);
-  opacity: 1;
-  pointer-events: all;
-  left: 28px;
-  top: -16px;
-  z-index: 20;
+    &:hover {
+      transform: scale(1.2) !important;
+    }
 
-  &:hover {
-    transform: scale(1.2) !important;
+    &::before, &::after {
+      content: ' ';
+      position: absolute;
+      left: 11px;
+      top: 6px;
+      width: 2px;
+      height: 12px;
+      background: white;
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
   }
 
-  &::before, &::after {
-    content: ' ';
+  .leaflet-control-container .leaflet-routing-container-hide {
+    display: none;
+  }
+
+  .stickers-helper {
+    flex-direction: column;
+    padding-top: 0;
+  }
+
+  .stickers-grid {
+    // display: grid;
+    // grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) );
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .stickers-set-title {
+    opacity: 0.3;
+    font-size: 0.8em;
+    padding: 10px 0;
+    display: flex;
+    align-items: center;
+    text-transform: uppercase;
+
+    &::after {
+      content: ' ';
+      height: 1px;
+      flex: 1;
+      background-color: #666666;
+      margin-left: 10px;
+    }
+  }
+
+  .sticker-preview {
+    float: left;
+    cursor: pointer;
+    transform: scale(1);
+    transition: transform 250ms;
+    width: 48px;
+    height: 48px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 0 50%;
+    position: relative;
+
+    &:hover {
+      transform: scale(1.5);
+      z-index: 2;
+    }
+  }
+
+  .sticker-desc {
+    min-width: 60px;
+    z-index: -1;
+    height: auto;
+    background: #222222;
     position: absolute;
-    left: 11px;
-    top: 6px;
-    width: 2px;
-    height: 12px;
-    background: white;
-    transform: rotate(45deg);
+    top: 50%;
+    left: 24px;
+    transform: translate3d(0, -50%, 0);
+    color: white;
+    box-sizing: border-box;
+    padding: 10px 10px 10px 36px;
   }
 
-  &::after {
-    transform: rotate(-45deg);
-  }
-}
-
-.leaflet-control-container .leaflet-routing-container-hide {
-  display: none;
-}
-
-.stickers-helper {
-  flex-direction: column;
-  padding-top: 0;
-}
-
-.stickers-grid {
-  // display: grid;
-  // grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) );
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.stickers-set-title {
-  opacity: 0.3;
-  font-size: 0.8em;
-  padding: 10px 0;
-  display: flex;
-  align-items: center;
-  text-transform: uppercase;
-
-  &::after {
-    content: ' ';
-    height: 1px;
-    flex: 1;
-    background-color: #666666;
-    margin-left: 10px;
-  }
-}
-
-.sticker-preview {
-  float: left;
-  cursor: pointer;
-  transform: scale(1);
-  transition: transform 250ms;
-  width: 48px;
-  height: 48px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: 0 50%;
-  position: relative;
-
-  &:hover {
-    transform: scale(1.5);
-    z-index: 2;
-  }
-}
-
-.sticker-desc {
-  min-width: 60px;
-  z-index: -1;
-  height: auto;
-  background: #222222;
-  position: absolute;
-  top: 50%;
-  left: 24px;
-  transform: translate3d(0, -50%, 0);
-  color: white;
-  box-sizing: border-box;
-  padding: 10px 10px 10px 36px;
-}
-
-.sticker-desc-sizer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  color: rgba(0,0,0,0);
-  white-space: nowrap;
-  padding: 1px;
-
-  textarea {
-    position: absolute;
-    left: 0;
-    top: 0;
+  .sticker-desc-sizer {
+    position: relative;
     width: 100%;
     height: 100%;
-    font: inherit;
-    padding: 0;
-    border: none;
-    background: none;
-    color: white;
-    resize: none;
-    outline: none;
-    overflow: hidden;
+    color: rgba(0, 0, 0, 0);
+    white-space: nowrap;
+    padding: 1px;
+
+    textarea {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      font: inherit;
+      padding: 0;
+      border: none;
+      background: none;
+      color: white;
+      resize: none;
+      outline: none;
+      overflow: hidden;
+    }
   }
 }
diff --git a/src/styles/switch.less b/src/styles/switch.less
index 8895b4c..445efdf 100644
--- a/src/styles/switch.less
+++ b/src/styles/switch.less
@@ -1,32 +1,34 @@
-.switch {
-  height: 1em;
-  width: 2em;
-  border-radius: 0.5em;
-  box-shadow: inset white 0 0 0 0.1em;
-  display: inline-flex;
-  vertical-align: text-top;
-  position: relative;
-  top: 0.05em;
-  transition: all 500ms;
-
-  &::after {
-    content: ' ';
-    position: absolute;
-    left: 0.2em;
-    top: 0.2em;
-    width: 0.6em;
-    height: 0.6em;
-    border-radius: 0.3em;
-    background: white;
+:global {
+  .switch {
+    height: 1em;
+    width: 2em;
+    border-radius: 0.5em;
+    box-shadow: inset white 0 0 0 0.1em;
+    display: inline-flex;
+    vertical-align: text-top;
+    position: relative;
+    top: 0.05em;
     transition: all 500ms;
-  }
-
-  &.active {
-    background: white;
 
     &::after {
-      left: 1.2em;
-      background: #333333;
+      content: ' ';
+      position: absolute;
+      left: 0.2em;
+      top: 0.2em;
+      width: 0.6em;
+      height: 0.6em;
+      border-radius: 0.3em;
+      background: white;
+      transition: all 500ms;
+    }
+
+    &.active {
+      background: white;
+
+      &::after {
+        left: 1.2em;
+        background: #333333;
+      }
     }
   }
 }
diff --git a/src/styles/user-button.less b/src/styles/user-button.less
index 378ba24..f2d2866 100644
--- a/src/styles/user-button.less
+++ b/src/styles/user-button.less
@@ -1,156 +1,160 @@
-.user-bar {
-  // width: 160px;
+:global {
+  .user-bar {
+    // width: 160px;
 
-  .button {
-    width: 100%;
-  }
-}
-.user-bar-guest {
-  // width: 168px;
-  @media (min-width: @mobile_breakpoint) {
-    width: 158px;
-  }
-}
-
-.user-button {
-  width: 120px;
-  padding-left: 48px;
-  height: 48px;
-  display: flex;
-
-  user-select: none;
-  cursor: pointer;
-
-  @media (max-width: @mobile_breakpoint) {
-    width: 0;
-
-    .user-button-fields {
-      display: none;
+    .button {
+      width: 100%;
     }
   }
-}
 
-.user-button-picture {
-  width: 48px;
-  height: 48px;
-  background-size: cover;
-  background: rgba(0, 0, 0, 0.3) 50% 50%;
-  border-radius: 3px 0 0 3px;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.user-button-fields {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0 10px 0 10px;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  div {
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-
-.user-button-name {
-  font-size: 14px;
-}
-
-.user-button-text {
-  font-size: 12px;
-  opacity: 0.5;
-  padding-top: 2px;
-  font-weight: 500;
-}
-
-
-.user-panel {
-  position: relative;
-}
-
-.user-panel-menu {
-  position: absolute;
-  bottom: 58px;
-  left: 0;
-  width: 219px;
-  background: @dialog_background;
-  border-radius: @panel_radius;
-  padding: 0;
-  box-sizing: border-box;
-  z-index: -1;
-
-  @media (max-width: @mobile_breakpoint) {
-    left: 0;
-    z-index: 4;
-  }
-}
-.user-panel-title {
-  font-size: 20px;
-  padding: 10px;
-
-  background: rgba(0,0,0, 0.5);
-  box-shadow: inset rgba(255,255,255,0.1) 0 -1px;
-  border-radius: @panel_radius @panel_radius 0 0;
-  user-select: none;
-}
-
-.user-panel-ver {
-  font-size: 12px;
-  vertical-align: text-top;
-  opacity: 0.5;
-  padding-left: 3px;
-  position: relative;
-  top: 3px;
-}
-
-.user-panel-item {
-  padding: 10px 10px;
-  position: relative;
-  cursor: pointer;
-  width: 100%;
-  transition: all 250ms;
-  color: white;
-  box-sizing: border-box;
-  user-select: none;
-  display: block;
-  border-bottom: 1px solid rgba(255,255,255,0.1);
-  text-decoration: none;
-
-  &:first-child::after {
-    border-radius: 3px 3px 0 0;
+  .user-bar-guest {
+    // width: 168px;
+    @media (min-width: @mobile_breakpoint) {
+      width: 158px;
+    }
   }
 
-  &::after {
-    content: ' ';
+  .user-button {
+    width: 120px;
+    padding-left: 48px;
+    height: 48px;
+    display: flex;
+
+    user-select: none;
+    cursor: pointer;
+
+    @media (max-width: @mobile_breakpoint) {
+      width: 0;
+
+      .user-button-fields {
+        display: none;
+      }
+    }
+  }
+
+  .user-button-picture {
+    width: 48px;
+    height: 48px;
+    background-size: cover;
+    background: rgba(0, 0, 0, 0.3) 50% 50%;
+    border-radius: 3px 0 0 3px;
     position: absolute;
     left: 0;
     top: 0;
-    width: 100%;
+  }
+
+  .user-button-fields {
     height: 100%;
-    background: linear-gradient(150deg, @blue_primary, @blue_secondary);
-    opacity: 0;
-    transition: opacity 0.3s;
-    z-index: -1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 10px 0 10px;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    div {
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
-  &:hover::after {
+  .user-button-name {
+    font-size: 14px;
+  }
+
+  .user-button-text {
+    font-size: 12px;
     opacity: 0.5;
-  }
-}
-
-.user-panel-text {
-  padding: 10px;
-  opacity: 0.5;
-  font-weight: 200;
-  border-bottom: 1px solid rgba(255,255,255,0.1);
-
-  div {
-    padding-top: 5px;
+    padding-top: 2px;
+    font-weight: 500;
+  }
+
+
+  .user-panel {
+    position: relative;
+  }
+
+  .user-panel-menu {
+    position: absolute;
+    bottom: 58px;
+    left: 0;
+    width: 219px;
+    background: @dialog_background;
+    border-radius: @panel_radius;
+    padding: 0;
+    box-sizing: border-box;
+    z-index: -1;
+
+    @media (max-width: @mobile_breakpoint) {
+      left: 0;
+      z-index: 4;
+    }
+  }
+
+  .user-panel-title {
+    font-size: 20px;
+    padding: 10px;
+
+    background: rgba(0, 0, 0, 0.5);
+    box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px;
+    border-radius: @panel_radius @panel_radius 0 0;
+    user-select: none;
+  }
+
+  .user-panel-ver {
+    font-size: 12px;
+    vertical-align: text-top;
+    opacity: 0.5;
+    padding-left: 3px;
+    position: relative;
+    top: 3px;
+  }
+
+  .user-panel-item {
+    padding: 10px 10px;
+    position: relative;
+    cursor: pointer;
+    width: 100%;
+    transition: all 250ms;
+    color: white;
+    box-sizing: border-box;
+    user-select: none;
+    display: block;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    text-decoration: none;
+
+    &:first-child::after {
+      border-radius: 3px 3px 0 0;
+    }
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(150deg, @blue_primary, @blue_secondary);
+      opacity: 0;
+      transition: opacity 0.3s;
+      z-index: -1;
+    }
+
+    &:hover::after {
+      opacity: 0.5;
+    }
+  }
+
+  .user-panel-text {
+    padding: 10px;
+    opacity: 0.5;
+    font-weight: 200;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+    div {
+      padding-top: 5px;
+    }
   }
 }