From 6413c9dddd7e105c44cc83088af2127c0274b4cc Mon Sep 17 00:00:00 2001
From: Alejandro Alonso <alejandroalonsofernandez@gmail.com>
Date: Wed, 12 Jan 2022 11:27:43 +0100
Subject: [PATCH] :sparkles: Apply prettier to resources styles

---
 frontend/resources/styles/common/base.scss    |  96 ++-
 .../common/dependencies/animations.scss       | 683 ++++++++++--------
 .../styles/common/dependencies/colors.scss    | 294 +++++---
 .../styles/common/dependencies/fonts.scss     |  68 +-
 .../styles/common/dependencies/helpers.scss   |  16 +-
 .../styles/common/dependencies/mixin.scss     | 112 +--
 .../styles/common/dependencies/reset.scss     |  33 +-
 .../styles/common/dependencies/z-index.scss   |   2 +-
 .../resources/styles/common/framework.scss    | 223 ++----
 frontend/resources/styles/main-default.scss   |   1 -
 .../resources/styles/main/layouts/login.scss  |   7 +-
 .../styles/main/layouts/not-found.scss        |   3 -
 .../resources/styles/main/layouts/viewer.scss |   3 -
 .../styles/main/partials/activity-bar.scss    |   2 -
 .../main/partials/af-signup-questions.scss    |  37 +-
 .../styles/main/partials/color-bullet.scss    |   9 +-
 .../styles/main/partials/color-palette.scss   | 139 ++--
 .../styles/main/partials/colorpicker.scss     |  69 +-
 .../styles/main/partials/comments.scss        |  23 +-
 .../styles/main/partials/context-menu.scss    | 137 ++--
 .../styles/main/partials/dashboard-grid.scss  |  17 +-
 .../main/partials/dashboard-header.scss       |   5 +-
 .../main/partials/dashboard-settings.scss     |   9 +-
 .../main/partials/dashboard-sidebar.scss      |   8 +-
 .../styles/main/partials/dashboard-team.scss  |   9 +-
 .../styles/main/partials/dashboard.scss       |   5 +-
 .../main/partials/debug-icons-preview.scss    |  11 +-
 .../styles/main/partials/dropdown.scss        |   5 +-
 .../styles/main/partials/editable-label.scss  |  40 +-
 .../styles/main/partials/exception-page.scss  |   3 -
 .../resources/styles/main/partials/forms.scss |   6 +-
 .../styles/main/partials/handoff.scss         |   3 +-
 .../styles/main/partials/left-toolbar.scss    |   6 -
 .../styles/main/partials/loader.scss          |   4 +-
 .../resources/styles/main/partials/modal.scss |  80 +-
 .../styles/main/partials/project-bar.scss     |  12 +-
 .../styles/main/partials/share-link.scss      |   6 +-
 .../styles/main/partials/sidebar-assets.scss  |  90 +--
 .../partials/sidebar-element-options.scss     | 282 ++++----
 .../styles/main/partials/sidebar-icons.scss   |   3 -
 .../main/partials/sidebar-interactions.scss   |   3 +-
 .../styles/main/partials/sidebar-layers.scss  |  16 +-
 .../styles/main/partials/sidebar-sitemap.scss |  16 -
 .../styles/main/partials/sidebar-tools.scss   |   2 -
 .../styles/main/partials/sidebar.scss         |  41 +-
 .../styles/main/partials/tab-container.scss   |  60 +-
 .../resources/styles/main/partials/texts.scss |   4 +-
 .../styles/main/partials/tool-bar.scss        |   8 -
 .../styles/main/partials/user-settings.scss   |  11 +-
 .../styles/main/partials/viewer-header.scss   |   5 +-
 .../main/partials/viewer-thumbnails.scss      |   2 +-
 .../main/partials/workspace-header.scss       |  40 +-
 .../styles/main/partials/workspace.scss       |   9 +-
 .../styles/main/partials/zoom-widget.scss     |   1 -
 54 files changed, 1437 insertions(+), 1342 deletions(-)

diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index 54032cad6..34ff9c232 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -10,7 +10,7 @@ body {
   color: $color-gray-20;
   display: flex;
   flex-direction: column;
-  font-family: 'worksans', sans-serif;
+  font-family: "worksans", sans-serif;
   height: 100vh;
   overflow: hidden;
 }
@@ -30,7 +30,6 @@ body {
   object {
     transition: none;
   }
-
 }
 
 img {
@@ -39,11 +38,9 @@ img {
 }
 
 svg {
-
   * {
     transition: none;
   }
-
 }
 
 *:focus {
@@ -51,7 +48,6 @@ svg {
   box-shadow: 0;
 }
 
-
 a {
   cursor: pointer;
   color: $color-primary-dark;
@@ -59,7 +55,6 @@ a {
   &:hover {
     color: $color-primary;
   }
-
 }
 
 p {
@@ -71,16 +66,14 @@ p {
     font-size: $fs16;
     line-height: $base-lh;
   }
-
 }
 
 li {
   line-height: $base-lh-sm;
 
   @include bp(baby-bear) {
-    line-height: $base-lh
+    line-height: $base-lh;
   }
-
 }
 
 ul {
@@ -114,9 +107,7 @@ h1 {
       font-size: $fs44;
       line-height: $title-lh;
     }
-
   }
-
 }
 h2 {
   font-size: $fs24;
@@ -127,13 +118,12 @@ h2 {
     font-size: $fs32;
     line-height: $title-lh;
   }
-
 }
 
 h3 {
   font-size: $fs24;
   font-weight: 300;
-  padding: .5rem 0;
+  padding: 0.5rem 0;
 }
 
 h4 {
@@ -142,33 +132,65 @@ h4 {
 }
 
 @-webkit-keyframes rotation {
-    from {-webkit-transform: rotate(0deg);}
-    to   {-webkit-transform: rotate(359deg);}
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+  }
 }
 
 @-webkit-keyframes rotation-negative {
-    from {-webkit-transform: rotate(0deg);}
-    to   {-webkit-transform: rotate(-359deg);}
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(-359deg);
+  }
 }
 
-
 @keyframes tooltipAppear {
-  0%   {opacity: 0; display: none;}
-  1% {display: block; opacity: 0; left: 3rem}
-  100% {opacity: 1; left: 2rem}
+  0% {
+    opacity: 0;
+    display: none;
+  }
+  1% {
+    display: block;
+    opacity: 0;
+    left: 3rem;
+  }
+  100% {
+    opacity: 1;
+    left: 2rem;
+  }
 }
 
-
 @keyframes show {
-  0%   {opacity: 0; display: none;}
-  1% {display: block; opacity: 0;}
-  100% {opacity: 1;}
+  0% {
+    opacity: 0;
+    display: none;
+  }
+  1% {
+    display: block;
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes hide {
-  0%   {opacity: 1; display: block;}
-  99% {opacity: 0; display: block}
-  100% {display: none;}
+  0% {
+    opacity: 1;
+    display: block;
+  }
+  99% {
+    opacity: 0;
+    display: block;
+  }
+  100% {
+    display: none;
+  }
 }
 
 .hide {
@@ -182,7 +204,7 @@ h4 {
 }
 
 .show {
-  animation: show .4s linear ;
+  animation: show 0.4s linear;
   display: block !important;
 }
 
@@ -191,7 +213,7 @@ h4 {
   text-align: center;
 }
 
-.hidden-input  {
+.hidden-input {
   display: none;
 }
 
@@ -215,17 +237,17 @@ hr {
   margin: 1rem 0;
 }
 
-input[type=number]::-webkit-inner-spin-button,
-    input[type=number]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-     margin: 0;
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
-input[type=number] {
+input[type="number"] {
   -moz-appearance: textfield;
 }
 
 [contenteditable] {
-    -webkit-user-select: text;
-    user-select: text;
+  -webkit-user-select: text;
+  user-select: text;
 }
diff --git a/frontend/resources/styles/common/dependencies/animations.scss b/frontend/resources/styles/common/dependencies/animations.scss
index 6184af1ba..00b09bf21 100644
--- a/frontend/resources/styles/common/dependencies/animations.scss
+++ b/frontend/resources/styles/common/dependencies/animations.scss
@@ -6,21 +6,21 @@
  * Copyright (c) 2016 Daniel Eden
  */
 
-@mixin animation ($delay, $duration, $animation) {
-    -webkit-animation-delay: $delay;
-    -webkit-animation-duration: $duration;
-    -webkit-animation-name: $animation;
-    -webkit-animation-fill-mode: both;
+@mixin animation($delay, $duration, $animation) {
+  -webkit-animation-delay: $delay;
+  -webkit-animation-duration: $duration;
+  -webkit-animation-name: $animation;
+  -webkit-animation-fill-mode: both;
 
-    -moz-animation-delay: $delay;
-    -moz-animation-duration: $duration;
-    -moz-animation-name: $animation;
-    -moz-animation-fill-mode: both;
+  -moz-animation-delay: $delay;
+  -moz-animation-duration: $duration;
+  -moz-animation-name: $animation;
+  -moz-animation-fill-mode: both;
 
-    animation-delay: $delay;
-    animation-duration: $duration;
-    animation-name: $animation;
-    animation-fill-mode: both;
+  animation-delay: $delay;
+  animation-duration: $duration;
+  animation-name: $animation;
+  animation-fill-mode: both;
 }
 
 .animated {
@@ -42,69 +42,79 @@
 
 .animated.bounceIn,
 .animated.bounceOut {
-  -webkit-animation-duration: .75s;
-  animation-duration: .75s;
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
 }
 
 .animated.flipOutX,
 .animated.flipOutY {
-  -webkit-animation-duration: .75s;
-  animation-duration: .75s;
+  -webkit-animation-duration: 0.75s;
+  animation-duration: 0.75s;
 }
 
 @-webkit-keyframes bounce {
-  0%, 20%, 53%, 80%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    -webkit-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+  40%,
+  43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     -webkit-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     -webkit-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0,-4px,0);
-    transform: translate3d(0,-4px,0);
+    -webkit-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
   }
 }
 
 @keyframes bounce {
-  0%, 20%, 53%, 80%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    -webkit-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 
-  40%, 43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+  40%,
+  43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     -webkit-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
   }
 
   70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     -webkit-transform: translate3d(0, -15px, 0);
     transform: translate3d(0, -15px, 0);
   }
 
   90% {
-    -webkit-transform: translate3d(0,-4px,0);
-    transform: translate3d(0,-4px,0);
+    -webkit-transform: translate3d(0, -4px, 0);
+    transform: translate3d(0, -4px, 0);
   }
 }
 
@@ -116,21 +126,27 @@
 }
 
 @-webkit-keyframes flash {
-  0%, 50%, 100% {
+  0%,
+  50%,
+  100% {
     opacity: 1;
   }
 
-  25%, 75% {
+  25%,
+  75% {
     opacity: 0;
   }
 }
 
 @keyframes flash {
-  0%, 50%, 100% {
+  0%,
+  50%,
+  100% {
     opacity: 1;
   }
 
-  25%, 75% {
+  25%,
+  75% {
     opacity: 0;
   }
 }
@@ -203,13 +219,13 @@
   }
 
   65% {
-    -webkit-transform: scale3d(.95, 1.05, 1);
-    transform: scale3d(.95, 1.05, 1);
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
   }
 
   75% {
-    -webkit-transform: scale3d(1.05, .95, 1);
-    transform: scale3d(1.05, .95, 1);
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
   }
 
   100% {
@@ -240,13 +256,13 @@
   }
 
   65% {
-    -webkit-transform: scale3d(.95, 1.05, 1);
-    transform: scale3d(.95, 1.05, 1);
+    -webkit-transform: scale3d(0.95, 1.05, 1);
+    transform: scale3d(0.95, 1.05, 1);
   }
 
   75% {
-    -webkit-transform: scale3d(1.05, .95, 1);
-    transform: scale3d(1.05, .95, 1);
+    -webkit-transform: scale3d(1.05, 0.95, 1);
+    transform: scale3d(1.05, 0.95, 1);
   }
 
   100% {
@@ -261,34 +277,50 @@
 }
 
 @-webkit-keyframes shake {
-  0%, 100% {
+  0%,
+  100% {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
-  10%, 30%, 50%, 70%, 90% {
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
     -webkit-transform: translate3d(-10px, 0, 0);
     transform: translate3d(-10px, 0, 0);
   }
 
-  20%, 40%, 60%, 80% {
+  20%,
+  40%,
+  60%,
+  80% {
     -webkit-transform: translate3d(10px, 0, 0);
     transform: translate3d(10px, 0, 0);
   }
 }
 
 @keyframes shake {
-  0%, 100% {
+  0%,
+  100% {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 
-  10%, 30%, 50%, 70%, 90% {
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
     -webkit-transform: translate3d(-10px, 0, 0);
     transform: translate3d(-10px, 0, 0);
   }
 
-  20%, 40%, 60%, 80% {
+  20%,
+  40%,
+  60%,
+  80% {
     -webkit-transform: translate3d(10px, 0, 0);
     transform: translate3d(10px, 0, 0);
   }
@@ -366,17 +398,23 @@
     transform: scale3d(1, 1, 1);
   }
 
-  10%, 20% {
-    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
-    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  10%,
+  20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
   }
 
-  30%, 50%, 70%, 90% {
+  30%,
+  50%,
+  70%,
+  90% {
     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
   }
 
-  40%, 60%, 80% {
+  40%,
+  60%,
+  80% {
     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
   }
@@ -393,17 +431,23 @@
     transform: scale3d(1, 1, 1);
   }
 
-  10%, 20% {
-    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
-    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  10%,
+  20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
   }
 
-  30%, 50%, 70%, 90% {
+  30%,
+  50%,
+  70%,
+  90% {
     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
   }
 
-  40%, 60%, 80% {
+  40%,
+  60%,
+  80% {
     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
   }
@@ -503,104 +547,106 @@
 @-webkit-keyframes jello {
   11.1% {
     -webkit-transform: none;
-            transform: none
+    transform: none;
   }
 
   22.2% {
     -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
-            transform: skewX(-12.5deg) skewY(-12.5deg)
+    transform: skewX(-12.5deg) skewY(-12.5deg);
   }
   33.3% {
     -webkit-transform: skewX(6.25deg) skewY(6.25deg);
-            transform: skewX(6.25deg) skewY(6.25deg)
+    transform: skewX(6.25deg) skewY(6.25deg);
   }
   44.4% {
     -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
-            transform: skewX(-3.125deg) skewY(-3.125deg)
+    transform: skewX(-3.125deg) skewY(-3.125deg);
   }
   55.5% {
     -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
-            transform: skewX(1.5625deg) skewY(1.5625deg)
+    transform: skewX(1.5625deg) skewY(1.5625deg);
   }
   66.6% {
     -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
-            transform: skewX(-0.78125deg) skewY(-0.78125deg)
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
   }
   77.7% {
     -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
-            transform: skewX(0.390625deg) skewY(0.390625deg)
+    transform: skewX(0.390625deg) skewY(0.390625deg);
   }
   88.8% {
     -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-            transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
   }
   100% {
     -webkit-transform: none;
-            transform: none
+    transform: none;
   }
 }
 
 @keyframes jello {
   11.1% {
     -webkit-transform: none;
-            transform: none
+    transform: none;
   }
 
   22.2% {
-
     -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
-            transform: skewX(-12.5deg) skewY(-12.5deg)
+    transform: skewX(-12.5deg) skewY(-12.5deg);
   }
   33.3% {
     -webkit-transform: skewX(6.25deg) skewY(6.25deg);
-            transform: skewX(6.25deg) skewY(6.25deg)
+    transform: skewX(6.25deg) skewY(6.25deg);
   }
   44.4% {
     -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
-            transform: skewX(-3.125deg) skewY(-3.125deg)
+    transform: skewX(-3.125deg) skewY(-3.125deg);
   }
   55.5% {
     -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
-            transform: skewX(1.5625deg) skewY(1.5625deg)
+    transform: skewX(1.5625deg) skewY(1.5625deg);
   }
   66.6% {
     -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
-            transform: skewX(-0.78125deg) skewY(-0.78125deg)
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
   }
   77.7% {
     -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
-            transform: skewX(0.390625deg) skewY(0.390625deg)
+    transform: skewX(0.390625deg) skewY(0.390625deg);
   }
   88.8% {
     -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-            transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
   }
   100% {
     -webkit-transform: none;
-            transform: none
+    transform: none;
   }
 }
 
+.jello {
+  -webkit-animation-name: jello;
+  animation-name: jello;
+  -webkit-transform-origin: center;
 
-
-.jello{
-    -webkit-animation-name:jello;
-            animation-name:jello;
-    -webkit-transform-origin: center;
-
-            transform-origin: center
+  transform-origin: center;
 }
 
 @-webkit-keyframes bounceIn {
-  0%, 20%, 40%, 60%, 80%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  20%,
+  40%,
+  60%,
+  80%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3);
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
   }
 
   20% {
@@ -609,8 +655,8 @@
   }
 
   40% {
-    -webkit-transform: scale3d(.9, .9, .9);
-    transform: scale3d(.9, .9, .9);
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
   }
 
   60% {
@@ -620,8 +666,8 @@
   }
 
   80% {
-    -webkit-transform: scale3d(.97, .97, .97);
-    transform: scale3d(.97, .97, .97);
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
   }
 
   100% {
@@ -632,15 +678,20 @@
 }
 
 @keyframes bounceIn {
-  0%, 20%, 40%, 60%, 80%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  20%,
+  40%,
+  60%,
+  80%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3);
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
   }
 
   20% {
@@ -649,8 +700,8 @@
   }
 
   40% {
-    -webkit-transform: scale3d(.9, .9, .9);
-    transform: scale3d(.9, .9, .9);
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
   }
 
   60% {
@@ -660,8 +711,8 @@
   }
 
   80% {
-    -webkit-transform: scale3d(.97, .97, .97);
-    transform: scale3d(.97, .97, .97);
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
   }
 
   100% {
@@ -677,9 +728,13 @@
 }
 
 @-webkit-keyframes bounceInDown {
-  0%, 60%, 75%, 90%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
@@ -711,9 +766,13 @@
 }
 
 @keyframes bounceInDown {
-  0%, 60%, 75%, 90%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
@@ -750,9 +809,13 @@
 }
 
 @-webkit-keyframes bounceInLeft {
-  0%, 60%, 75%, 90%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
@@ -784,9 +847,13 @@
 }
 
 @keyframes bounceInLeft {
-  0%, 60%, 75%, 90%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
@@ -823,9 +890,13 @@
 }
 
 @-webkit-keyframes bounceInRight {
-  0%, 60%, 75%, 90%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
@@ -857,9 +928,13 @@
 }
 
 @keyframes bounceInRight {
-  0%, 60%, 75%, 90%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
@@ -896,9 +971,13 @@
 }
 
 @-webkit-keyframes bounceInUp {
-  0%, 60%, 75%, 90%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
@@ -930,9 +1009,13 @@
 }
 
 @keyframes bounceInUp {
-  0%, 60%, 75%, 90%, 100% {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   0% {
@@ -970,11 +1053,12 @@
 
 @-webkit-keyframes bounceOut {
   20% {
-    -webkit-transform: scale3d(.9, .9, .9);
-    transform: scale3d(.9, .9, .9);
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
   }
 
-  50%, 55% {
+  50%,
+  55% {
     opacity: 1;
     -webkit-transform: scale3d(1.1, 1.1, 1.1);
     transform: scale3d(1.1, 1.1, 1.1);
@@ -982,18 +1066,19 @@
 
   100% {
     opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3);
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
   }
 }
 
 @keyframes bounceOut {
   20% {
-    -webkit-transform: scale3d(.9, .9, .9);
-    transform: scale3d(.9, .9, .9);
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
   }
 
-  50%, 55% {
+  50%,
+  55% {
     opacity: 1;
     -webkit-transform: scale3d(1.1, 1.1, 1.1);
     transform: scale3d(1.1, 1.1, 1.1);
@@ -1001,8 +1086,8 @@
 
   100% {
     opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3);
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
   }
 }
 
@@ -1017,7 +1102,8 @@
     transform: translate3d(0, 10px, 0);
   }
 
-  40%, 45% {
+  40%,
+  45% {
     opacity: 1;
     -webkit-transform: translate3d(0, -20px, 0);
     transform: translate3d(0, -20px, 0);
@@ -1036,7 +1122,8 @@
     transform: translate3d(0, 10px, 0);
   }
 
-  40%, 45% {
+  40%,
+  45% {
     opacity: 1;
     -webkit-transform: translate3d(0, -20px, 0);
     transform: translate3d(0, -20px, 0);
@@ -1126,7 +1213,8 @@
     transform: translate3d(0, -10px, 0);
   }
 
-  40%, 45% {
+  40%,
+  45% {
     opacity: 1;
     -webkit-transform: translate3d(0, 20px, 0);
     transform: translate3d(0, 20px, 0);
@@ -1145,7 +1233,8 @@
     transform: translate3d(0, -10px, 0);
   }
 
-  40%, 45% {
+  40%,
+  45% {
     opacity: 1;
     -webkit-transform: translate3d(0, 20px, 0);
     transform: translate3d(0, 20px, 0);
@@ -1718,22 +1807,26 @@
   }
 
   40% {
-    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
     -webkit-animation-timing-function: ease-out;
     animation-timing-function: ease-out;
   }
 
   50% {
-    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
     -webkit-animation-timing-function: ease-in;
     animation-timing-function: ease-in;
   }
 
   80% {
-    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
-    transform: perspective(400px) scale3d(.95, .95, .95);
+    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
     -webkit-animation-timing-function: ease-in;
     animation-timing-function: ease-in;
   }
@@ -1755,22 +1848,26 @@
   }
 
   40% {
-    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -190deg);
     -webkit-animation-timing-function: ease-out;
     animation-timing-function: ease-out;
   }
 
   50% {
-    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) translate3d(0, 0, 150px)
+      rotate3d(0, 1, 0, -170deg);
     -webkit-animation-timing-function: ease-in;
     animation-timing-function: ease-in;
   }
 
   80% {
-    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
-    transform: perspective(400px) scale3d(.95, .95, .95);
+    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
     -webkit-animation-timing-function: ease-in;
     animation-timing-function: ease-in;
   }
@@ -2514,7 +2611,8 @@
     animation-timing-function: ease-in-out;
   }
 
-  20%, 60% {
+  20%,
+  60% {
     -webkit-transform: rotate3d(0, 0, 1, 80deg);
     transform: rotate3d(0, 0, 1, 80deg);
     -webkit-transform-origin: top left;
@@ -2523,7 +2621,8 @@
     animation-timing-function: ease-in-out;
   }
 
-  40%, 80% {
+  40%,
+  80% {
     -webkit-transform: rotate3d(0, 0, 1, 60deg);
     transform: rotate3d(0, 0, 1, 60deg);
     -webkit-transform-origin: top left;
@@ -2548,7 +2647,8 @@
     animation-timing-function: ease-in-out;
   }
 
-  20%, 60% {
+  20%,
+  60% {
     -webkit-transform: rotate3d(0, 0, 1, 80deg);
     transform: rotate3d(0, 0, 1, 80deg);
     -webkit-transform-origin: top left;
@@ -2557,7 +2657,8 @@
     animation-timing-function: ease-in-out;
   }
 
-  40%, 80% {
+  40%,
+  80% {
     -webkit-transform: rotate3d(0, 0, 1, 60deg);
     transform: rotate3d(0, 0, 1, 60deg);
     -webkit-transform-origin: top left;
@@ -2648,8 +2749,8 @@
 @-webkit-keyframes zoomIn {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3);
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
   }
 
   50% {
@@ -2660,8 +2761,8 @@
 @keyframes zoomIn {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3);
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
   }
 
   50% {
@@ -2677,36 +2778,36 @@
 @-webkit-keyframes zoomInDown {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   60% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
 @keyframes zoomInDown {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   60% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
@@ -2718,36 +2819,36 @@
 @-webkit-keyframes zoomInLeft {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   60% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
 @keyframes zoomInLeft {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   60% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
@@ -2759,36 +2860,36 @@
 @-webkit-keyframes zoomInRight {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   60% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
 @keyframes zoomInRight {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   60% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
@@ -2800,36 +2901,36 @@
 @-webkit-keyframes zoomInUp {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   60% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
 @keyframes zoomInUp {
   0% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   60% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
@@ -2845,8 +2946,8 @@
 
   50% {
     opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3);
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
   }
 
   100% {
@@ -2861,8 +2962,8 @@
 
   50% {
     opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-    transform: scale3d(.3, .3, .3);
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
   }
 
   100% {
@@ -2878,40 +2979,40 @@
 @-webkit-keyframes zoomOutDown {
   40% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   100% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom;
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
 @keyframes zoomOutDown {
   40% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   100% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom;
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
@@ -2923,14 +3024,14 @@
 @-webkit-keyframes zoomOutLeft {
   40% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
-    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
   }
 
   100% {
     opacity: 0;
-    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
-    transform: scale(.1) translate3d(-2000px, 0, 0);
+    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+    transform: scale(0.1) translate3d(-2000px, 0, 0);
     -webkit-transform-origin: left center;
     transform-origin: left center;
   }
@@ -2939,14 +3040,14 @@
 @keyframes zoomOutLeft {
   40% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
-    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
   }
 
   100% {
     opacity: 0;
-    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
-    transform: scale(.1) translate3d(-2000px, 0, 0);
+    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+    transform: scale(0.1) translate3d(-2000px, 0, 0);
     -webkit-transform-origin: left center;
     transform-origin: left center;
   }
@@ -2960,14 +3061,14 @@
 @-webkit-keyframes zoomOutRight {
   40% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
-    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
   }
 
   100% {
     opacity: 0;
-    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
-    transform: scale(.1) translate3d(2000px, 0, 0);
+    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+    transform: scale(0.1) translate3d(2000px, 0, 0);
     -webkit-transform-origin: right center;
     transform-origin: right center;
   }
@@ -2976,14 +3077,14 @@
 @keyframes zoomOutRight {
   40% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
-    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
   }
 
   100% {
     opacity: 0;
-    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
-    transform: scale(.1) translate3d(2000px, 0, 0);
+    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+    transform: scale(0.1) translate3d(2000px, 0, 0);
     -webkit-transform-origin: right center;
     transform-origin: right center;
   }
@@ -2997,40 +3098,40 @@
 @-webkit-keyframes zoomOutUp {
   40% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   100% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom;
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
 @keyframes zoomOutUp {
   40% {
     opacity: 1;
-    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
   }
 
   100% {
     opacity: 0;
-    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom;
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
   }
 }
 
@@ -3326,16 +3427,16 @@
 
 @keyframes loaderColor {
   0% {
-    fill: #513B56;
+    fill: #513b56;
   }
   33% {
-    fill: #348AA7;
+    fill: #348aa7;
   }
   66% {
-    fill: #5DD39E;
+    fill: #5dd39e;
   }
   100% {
-    fill: #513B56;
+    fill: #513b56;
   }
 }
 
diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss
index 5083f2296..57b538061 100644
--- a/frontend/resources/styles/common/dependencies/colors.scss
+++ b/frontend/resources/styles/common/dependencies/colors.scss
@@ -8,35 +8,35 @@
 // Colors
 $color-white: #ffffff;
 $color-black: #000000;
-$color-canvas: #E8E9EA;
-$color-dashboard: #F6F6F6;
+$color-canvas: #e8e9ea;
+$color-dashboard: #f6f6f6;
 
 // Main color
-$color-primary: #31EFB8;
+$color-primary: #31efb8;
 
 // Secondary colors
-$color-success: #58C35C;
-$color-complete : #a599c6;
-$color-warning: #FC8802;
-$color-danger: #E65244;
+$color-success: #58c35c;
+$color-complete: #a599c6;
+$color-warning: #fc8802;
+$color-danger: #e65244;
 $color-info: #59b9e2;
 $color-ocean: #4285f4;
-$color-component: #76B0B8;
+$color-component: #76b0b8;
 $color-component-highlight: #1890ff;
 $color-pink: #feecfc;
 
 // Gray scale
-$color-gray-10: #E3E3E3;
+$color-gray-10: #e3e3e3;
 $color-gray-20: #b1b2b5;
-$color-gray-30: #7B7D85;
-$color-gray-40: #64666A;
+$color-gray-30: #7b7d85;
+$color-gray-40: #64666a;
 $color-gray-50: #303236;
-$color-gray-60: #1F1F1F;
+$color-gray-60: #1f1f1f;
 
 // UI colors
-$color-select: #1FDEA7;
-$color-distance: #DB00FF;
-$color-snap: #D383DA;
+$color-select: #1fdea7;
+$color-distance: #db00ff;
+$color-snap: #d383da;
 
 // Mixing Color variable for creating both light and dark colors
 $mix-percentage-dark: 81%;
@@ -46,121 +46,217 @@ $mix-percentage-lighter: 20%;
 $mix-percentage-lightest: 10%;
 
 // Lighter colors
-$color-success-light: mix($color-success, $color-white, $mix-percentage-light); //#79cf7d
-$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de
+$color-success-light: mix(
+  $color-success,
+  $color-white,
+  $mix-percentage-light
+); //#79cf7d
+$color-success-lighter: mix(
+  $color-success,
+  $color-white,
+  $mix-percentage-lighter
+); //#def3de
 
-$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light); //#b7add1
-$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter); //#edebf4
+$color-complete-light: mix(
+  $color-complete,
+  $color-white,
+  $mix-percentage-light
+); //#b7add1
+$color-complete-lighter: mix(
+  $color-complete,
+  $color-white,
+  $mix-percentage-lighter
+); //#edebf4
 
-$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light); //#5af2c6
-$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1
+$color-primary-light: mix(
+  $color-primary,
+  $color-white,
+  $mix-percentage-light
+); //#5af2c6
+$color-primary-lighter: mix(
+  $color-primary,
+  $color-white,
+  $mix-percentage-lighter
+); //#d6fcf1
 
-$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light); //#fda035
-$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter); //#fee7cc;
+$color-warning-light: mix(
+  $color-warning,
+  $color-white,
+  $mix-percentage-light
+); //#fda035
+$color-warning-lighter: mix(
+  $color-warning,
+  $color-white,
+  $mix-percentage-lighter
+); //#fee7cc;
 
-$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light); //#eb7569
-$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda
+$color-danger-light: mix(
+  $color-danger,
+  $color-white,
+  $mix-percentage-light
+); //#eb7569
+$color-danger-lighter: mix(
+  $color-danger,
+  $color-white,
+  $mix-percentage-lighter
+); //#fadcda
 
-$color-info-light: mix($color-info, $color-white, $mix-percentage-light); //#7ac7e8
-$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter); //#def1f9;
+$color-info-light: mix(
+  $color-info,
+  $color-white,
+  $mix-percentage-light
+); //#7ac7e8
+$color-info-lighter: mix(
+  $color-info,
+  $color-white,
+  $mix-percentage-lighter
+); //#def1f9;
 
 // Darker colors
-$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b;
-$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker); // #357537;
+$color-success-dark: mix(
+  $color-success,
+  $color-black,
+  $mix-percentage-dark
+); //#479e4b;
+$color-success-darker: mix(
+  $color-success,
+  $color-black,
+  $mix-percentage-darker
+); // #357537;
 
-$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0
-$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77
+$color-complete-dark: mix(
+  $color-complete,
+  $color-black,
+  $mix-percentage-dark
+); //#867ca0
+$color-complete-darker: mix(
+  $color-complete,
+  $color-black,
+  $mix-percentage-darker
+); //#635c77
 
-$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); //#28c295;
-$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e
+$color-primary-dark: mix(
+  $color-primary,
+  $color-black,
+  $mix-percentage-dark
+); //#28c295;
+$color-primary-darker: mix(
+  $color-primary,
+  $color-black,
+  $mix-percentage-darker
+); // #1d8f6e
 
-$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02;
-$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker); //#975201
+$color-warning-dark: mix(
+  $color-warning,
+  $color-black,
+  $mix-percentage-dark
+); // #cc6e02;
+$color-warning-darker: mix(
+  $color-warning,
+  $color-black,
+  $mix-percentage-darker
+); //#975201
 
-$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237
-$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker);// #8a3129;
+$color-danger-dark: mix(
+  $color-danger,
+  $color-black,
+  $mix-percentage-dark
+); //#ba4237
+$color-danger-darker: mix(
+  $color-danger,
+  $color-black,
+  $mix-percentage-darker
+); // #8a3129;
 
-$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark);// #4896b7
-$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88;
+$color-info-dark: mix(
+  $color-info,
+  $color-black,
+  $mix-percentage-dark
+); // #4896b7
+$color-info-darker: mix(
+  $color-info,
+  $color-black,
+  $mix-percentage-darker
+); // #356f88;
 
 // bg transparent
-$color-dark-bg: rgba(0,0,0,.4);
-$color-light-bg: rgba(255,255,255,.6);
+$color-dark-bg: rgba(0, 0, 0, 0.4);
+$color-light-bg: rgba(255, 255, 255, 0.6);
 
 // Transform scss variables into css variables to use them onto cljs files
 :root {
-    // Colors
-    --color-white: #{$color-white};
-    --color-black: #{$color-black};
-    --color-canvas: #{$color-canvas};
-    --color-dashboard: #{$color-dashboard};
+  // Colors
+  --color-white: #{$color-white};
+  --color-black: #{$color-black};
+  --color-canvas: #{$color-canvas};
+  --color-dashboard: #{$color-dashboard};
 
-    // Main color;
-    --color-primary: #{$color-primary};
+  // Main color;
+  --color-primary: #{$color-primary};
 
-    // Secondary colors;
-    --color-success: #{$color-success};
-    --color-complete: #{$color-complete};
-    --color-warning: #{$color-warning};
-    --color-danger: #{$color-danger};
-    --color-info: #{$color-info};
-    --color-ocean: #{$color-ocean};
-    --color-component: #{$color-component};
-    --color-component-highlight: #{$color-component-highlight};
-    --color-pink: #{$color-pink};
+  // Secondary colors;
+  --color-success: #{$color-success};
+  --color-complete: #{$color-complete};
+  --color-warning: #{$color-warning};
+  --color-danger: #{$color-danger};
+  --color-info: #{$color-info};
+  --color-ocean: #{$color-ocean};
+  --color-component: #{$color-component};
+  --color-component-highlight: #{$color-component-highlight};
+  --color-pink: #{$color-pink};
 
-    // Gray scale;
-    --color-gray-10: #{$color-gray-10};
-    --color-gray-20: #{$color-gray-20};
-    --color-gray-30: #{$color-gray-30};
-    --color-gray-40: #{$color-gray-40};
-    --color-gray-50: #{$color-gray-50};
-    --color-gray-60: #{$color-gray-60};
+  // Gray scale;
+  --color-gray-10: #{$color-gray-10};
+  --color-gray-20: #{$color-gray-20};
+  --color-gray-30: #{$color-gray-30};
+  --color-gray-40: #{$color-gray-40};
+  --color-gray-50: #{$color-gray-50};
+  --color-gray-60: #{$color-gray-60};
 
-    // UI colors
-    --color-distance: #{$color-distance};
-    --color-select: #{$color-select};
-    --color-snap: #{$color-snap};
+  // UI colors
+  --color-distance: #{$color-distance};
+  --color-select: #{$color-select};
+  --color-snap: #{$color-snap};
 
-    // Lighter colors
-    --color-success-light : #{$color-success-light};
-    --color-success-lighter : #{$color-success-lighter};
+  // Lighter colors
+  --color-success-light: #{$color-success-light};
+  --color-success-lighter: #{$color-success-lighter};
 
-    --color-complete-light : #{$color-complete-light};
-    --color-complete-lighter : #{$color-complete-lighter};
+  --color-complete-light: #{$color-complete-light};
+  --color-complete-lighter: #{$color-complete-lighter};
 
-    --color-primary-light: #{$color-primary-light};
-    --color-primary-lighter : #{$color-primary-lighter};
+  --color-primary-light: #{$color-primary-light};
+  --color-primary-lighter: #{$color-primary-lighter};
 
-    --color-warning-light : #{$color-warning-light};
-    --color-warning-lighter : #{$color-warning-lighter};
+  --color-warning-light: #{$color-warning-light};
+  --color-warning-lighter: #{$color-warning-lighter};
 
-    --color-danger-light : #{$color-danger-light};
-    --color-danger-lighter : #{$color-danger-lighter};
+  --color-danger-light: #{$color-danger-light};
+  --color-danger-lighter: #{$color-danger-lighter};
 
-    --color-info-light : #{$color-info-light};
-    --color-info-lighter : #{$color-info-lighter};
+  --color-info-light: #{$color-info-light};
+  --color-info-lighter: #{$color-info-lighter};
 
-    // Darker colors
-    --color-success-dark : #{$color-success-dark};
-    --color-success-darker : #{$color-success-darker};
+  // Darker colors
+  --color-success-dark: #{$color-success-dark};
+  --color-success-darker: #{$color-success-darker};
 
-    --color-complete-dark : #{$color-complete-dark};
-    --color-complete-darker : #{$color-complete-darker};
+  --color-complete-dark: #{$color-complete-dark};
+  --color-complete-darker: #{$color-complete-darker};
 
-    --color-primary-dark : #{$color-primary-dark};
-    --color-primary-darker : #{$color-primary-darker};
+  --color-primary-dark: #{$color-primary-dark};
+  --color-primary-darker: #{$color-primary-darker};
 
-    --color-warning-dark : #{$color-warning-dark};
-    --color-warning-darker : #{$color-warning-darker};
+  --color-warning-dark: #{$color-warning-dark};
+  --color-warning-darker: #{$color-warning-darker};
 
-    --color-danger-dark : #{$color-danger-dark};
-    --color-danger-darker : #{$color-danger-darker};
+  --color-danger-dark: #{$color-danger-dark};
+  --color-danger-darker: #{$color-danger-darker};
 
-    --color-info-dark : #{$color-info-dark};
-    --color-info-darker : #{$color-info-darker};
+  --color-info-dark: #{$color-info-dark};
+  --color-info-darker: #{$color-info-darker};
 
-    // bg transparent
-    --color-dark-bg : #{$color-dark-bg};
-    --color-light-bg : #{$color-light-bg};
-  }
+  // bg transparent
+  --color-dark-bg: #{$color-dark-bg};
+  --color-light-bg: #{$color-light-bg};
+}
diff --git a/frontend/resources/styles/common/dependencies/fonts.scss b/frontend/resources/styles/common/dependencies/fonts.scss
index 75eb65c1f..316c531fe 100644
--- a/frontend/resources/styles/common/dependencies/fonts.scss
+++ b/frontend/resources/styles/common/dependencies/fonts.scss
@@ -13,7 +13,7 @@ $fs12: 0.75rem;
 $fs13: 0.8125rem;
 $fs14: 0.875rem;
 $fs15: 0.9375rem;
-$fs16: 1rem ;
+$fs16: 1rem;
 $fs18: 1.125rem;
 $fs19: 1.1875rem;
 $fs20: 1.25rem;
@@ -40,33 +40,43 @@ $title-lh: 1.25;
 $title-lh-sm: 1.15;
 
 // Work Sans
-@include font-face("worksans","WorkSans-Thin", "100");
-@include font-face("worksans","WorkSans-ThinItalic", "100", italic);
-@include font-face("worksans","WorkSans-ExtraLight", "200");
-@include font-face("worksans","WorkSans-ExtraLightitalic", "200", italic);
-@include font-face("worksans","WorkSans-Light", "300");
-@include font-face("worksans","WorkSans-LightItalic", "300", italic);
-@include font-face("worksans","WorkSans-Regular", normal);
-@include font-face("worksans","WorkSans-Italic", normal, italic);
-@include font-face("worksans","WorkSans-Medium", "500");
-@include font-face("worksans","WorkSans-MediumItalic", "500", italic);
-@include font-face("worksans","WorkSans-SemiBold", "600");
-@include font-face("worksans","WorkSans-SemiBoldItalic", "600", italic);
-@include font-face("worksans","WorkSans-Bold", bold);
-@include font-face("worksans","WorkSans-BoldItalic", bold, italic);
-@include font-face("worksans","WorkSans-Black", "900");
-@include font-face("worksans","WorkSans-BlackItalic","900", italic);
+@include font-face("worksans", "WorkSans-Thin", "100");
+@include font-face("worksans", "WorkSans-ThinItalic", "100", italic);
+@include font-face("worksans", "WorkSans-ExtraLight", "200");
+@include font-face("worksans", "WorkSans-ExtraLightitalic", "200", italic);
+@include font-face("worksans", "WorkSans-Light", "300");
+@include font-face("worksans", "WorkSans-LightItalic", "300", italic);
+@include font-face("worksans", "WorkSans-Regular", normal);
+@include font-face("worksans", "WorkSans-Italic", normal, italic);
+@include font-face("worksans", "WorkSans-Medium", "500");
+@include font-face("worksans", "WorkSans-MediumItalic", "500", italic);
+@include font-face("worksans", "WorkSans-SemiBold", "600");
+@include font-face("worksans", "WorkSans-SemiBoldItalic", "600", italic);
+@include font-face("worksans", "WorkSans-Bold", bold);
+@include font-face("worksans", "WorkSans-BoldItalic", bold, italic);
+@include font-face("worksans", "WorkSans-Black", "900");
+@include font-face("worksans", "WorkSans-BlackItalic", "900", italic);
 
 // Source Sans Pro
-@include font-face("sourcesanspro","sourcesanspro-extralight", "200");
-@include font-face("sourcesanspro","sourcesanspro-extralightitalic", "200", italic);
-@include font-face("sourcesanspro","sourcesanspro-light", "300");
-@include font-face("sourcesanspro","sourcesanspro-lightitalic", "300", italic);
-@include font-face("sourcesanspro","sourcesanspro-regular", normal);
-@include font-face("sourcesanspro","sourcesanspro-italic", normal, italic);
-@include font-face("sourcesanspro","sourcesanspro-semibold", "600");
-@include font-face("sourcesanspro","sourcesanspro-semibolditalic", "600", italic);
-@include font-face("sourcesanspro","sourcesanspro-bold", bold);
-@include font-face("sourcesanspro","sourcesanspro-bolditalic", bold, italic);
-@include font-face("sourcesanspro","sourcesanspro-black", "900");
-@include font-face("sourcesanspro","sourcesanspro-blackitalic", "900", italic);
+@include font-face("sourcesanspro", "sourcesanspro-extralight", "200");
+@include font-face(
+  "sourcesanspro",
+  "sourcesanspro-extralightitalic",
+  "200",
+  italic
+);
+@include font-face("sourcesanspro", "sourcesanspro-light", "300");
+@include font-face("sourcesanspro", "sourcesanspro-lightitalic", "300", italic);
+@include font-face("sourcesanspro", "sourcesanspro-regular", normal);
+@include font-face("sourcesanspro", "sourcesanspro-italic", normal, italic);
+@include font-face("sourcesanspro", "sourcesanspro-semibold", "600");
+@include font-face(
+  "sourcesanspro",
+  "sourcesanspro-semibolditalic",
+  "600",
+  italic
+);
+@include font-face("sourcesanspro", "sourcesanspro-bold", bold);
+@include font-face("sourcesanspro", "sourcesanspro-bolditalic", bold, italic);
+@include font-face("sourcesanspro", "sourcesanspro-black", "900");
+@include font-face("sourcesanspro", "sourcesanspro-blackitalic", "900", italic);
diff --git a/frontend/resources/styles/common/dependencies/helpers.scss b/frontend/resources/styles/common/dependencies/helpers.scss
index 3562e9370..0027118f8 100644
--- a/frontend/resources/styles/common/dependencies/helpers.scss
+++ b/frontend/resources/styles/common/dependencies/helpers.scss
@@ -21,11 +21,11 @@ $br-huge: 12px;
 
 // Alignments
 .text-left {
-    text-align: left;
+  text-align: left;
 }
 
 .text-right {
-    text-align: right;
+  text-align: right;
 }
 
 .row-flex {
@@ -43,12 +43,12 @@ $br-huge: 12px;
 }
 
 .row-grid-2 {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
 }
 
 .flex-grow {
- flex-grow: 1;
+  flex-grow: 1;
 }
 
 .column-half {
@@ -57,13 +57,13 @@ $br-huge: 12px;
 
 // Display
 .hidden {
-    display: none;
+  display: none;
 }
 
 .hide {
-    opacity: 0;
+  opacity: 0;
 }
 
 .display {
-    opacity: 1 !important;
+  opacity: 1 !important;
 }
diff --git a/frontend/resources/styles/common/dependencies/mixin.scss b/frontend/resources/styles/common/dependencies/mixin.scss
index fa7948845..c4e19f916 100644
--- a/frontend/resources/styles/common/dependencies/mixin.scss
+++ b/frontend/resources/styles/common/dependencies/mixin.scss
@@ -9,31 +9,34 @@
 /// @group Mixins
 /// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
 @mixin bp($point) {
-
   $bp-mobile: "(min-width: 720px)";
   $bp-tablet: "(min-width: 1020px)";
   $bp-desktop: "(min-width: 1366px)";
 
   @if $point == mobile {
-    @media #{$bp-desktop} { @content; }
+    @media #{$bp-desktop} {
+      @content;
+    }
+  } @else if $point == tablet {
+    @media #{$bp-tablet} {
+      @content;
+    }
+  } @else if $point == desktop {
+    @media #{$bp-mobile} {
+      @content;
+    }
   }
-  @else if $point == tablet {
-    @media #{$bp-tablet} { @content; }
-  }
-  @else if $point == desktop {
-    @media #{$bp-mobile}  { @content; }
-  }
-
 }
 
-
 // Advanced positioning
 // ----------------
-@mixin position($type,
-                $top: $position-default,
-                $right: $position-default,
-                $bottom: $position-default,
-                $left: $position-default) {
+@mixin position(
+  $type,
+  $top: $position-default,
+  $right: $position-default,
+  $bottom: $position-default,
+  $left: $position-default
+) {
   position: $type;
   $allowed_types: absolute relative fixed;
   @if not index($allowed_types, $type) {
@@ -43,45 +46,59 @@
     #{nth($data, 1)}: nth($data, 2);
   }
 }
-@mixin absolute($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) {
+@mixin absolute(
+  $top: $position-default,
+  $right: $position-default,
+  $bottom: $position-default,
+  $left: $position-default
+) {
   @include position(absolute, $top, $right, $bottom, $left);
 }
-@mixin relative($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) {
+@mixin relative(
+  $top: $position-default,
+  $right: $position-default,
+  $bottom: $position-default,
+  $left: $position-default
+) {
   @include position(relative, $top, $right, $bottom, $left);
 }
-@mixin fixed($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) {
+@mixin fixed(
+  $top: $position-default,
+  $right: $position-default,
+  $bottom: $position-default,
+  $left: $position-default
+) {
   @include position(fixed, $top, $right, $bottom, $left);
 }
 
-
 /// Center an element vertically and horizontally with an absolute position.
 /// @group Mixins
 
 @mixin centerer {
-  @include absolute(50%,null,null,50%);
-  transform: translate(-50%,-50%);
+  @include absolute(50%, null, null, 50%);
+  transform: translate(-50%, -50%);
 }
 
-
-
 /// This mixing allow you to add placeholder colors in all available browsers
 /// @group Mixins
 
 @mixin placeholder {
   &::-webkit-input-placeholder {
-      @content;
+    @content;
   }
 
-  &:-moz-placeholder { /* Firefox 18- */
-      @content;
+  &:-moz-placeholder {
+    /* Firefox 18- */
+    @content;
   }
 
-  &::-moz-placeholder {  /* Firefox 19+ */
-      @content;
+  &::-moz-placeholder {
+    /* Firefox 19+ */
+    @content;
   }
 
   &:-ms-input-placeholder {
-      @content;
+    @content;
   }
 }
 
@@ -89,9 +106,9 @@
 /// @group Mixins
 
 @mixin hide-text {
-	font: 0/0 a;
-	color: transparent;
-	text-shadow: none;
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
 }
 
 /// Shortcut mixin to add new font-face compatible with all browser. To work you need to add the follow formats of font:".eot", ".woff", ".ttf" and "svg".
@@ -101,15 +118,23 @@
 /// @parameter $weight [normal] - With this variable you can add how much weight you want to add to this specific font. EX: Bold
 /// @parameter $style [normal] - With this variable you can add a font style to this specific font. EX: Italic
 
-@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal") ) {
-    $filepath: "/fonts/" + $file;
-    @font-face {
-        font-family: "#{$style-name}";
-        src: url($filepath + ".eot");
-        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
-        font-weight: unquote($weight);
-        font-style: unquote($style);
-    }
+@mixin font-face(
+  $style-name,
+  $file,
+  $weight: unquote("normal"),
+  $style: unquote("normal")
+) {
+  $filepath: "/fonts/" + $file;
+  @font-face {
+    font-family: "#{$style-name}";
+    src: url($filepath + ".eot");
+    src: url($filepath + ".eot?#iefix") format("embedded-opentype"),
+      url($filepath + ".woff") format("woff"),
+      url($filepath + ".ttf") format("truetype"),
+      url($filepath + ".svg#" + $style-name + "") format("svg");
+    font-weight: unquote($weight);
+    font-style: unquote($style);
+  }
 }
 
 @mixin tooltipShow {
@@ -117,14 +142,14 @@
     .icon-tooltip {
       display: block;
       left: 2rem;
-      animation: tooltipAppear .2s linear ;
+      animation: tooltipAppear 0.2s linear;
     }
   }
   &.active {
     .icon-tooltip {
       display: block;
       left: 2rem;
-      animation: tooltipAppear .2s linear ;
+      animation: tooltipAppear 0.2s linear;
     }
   }
 }
@@ -148,5 +173,4 @@
     position: absolute;
     right: 2px;
   }
-
 }
diff --git a/frontend/resources/styles/common/dependencies/reset.scss b/frontend/resources/styles/common/dependencies/reset.scss
index cb6bb8429..1fc96a150 100644
--- a/frontend/resources/styles/common/dependencies/reset.scss
+++ b/frontend/resources/styles/common/dependencies/reset.scss
@@ -11,7 +11,6 @@ img {
   display: block;
 }
 
-
 // #Reset & Basics (Inspired by E. Meyers)
 //==================================================
 a,
@@ -95,14 +94,14 @@ u,
 ul,
 var,
 video {
-    border: 0;
-    font: inherit;
-    font-size: 100%;
-    line-height: $base-lh;
-    margin: 0;
-    padding: 0;
-    text-decoration: none;
-    vertical-align: baseline;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  line-height: $base-lh;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  vertical-align: baseline;
 }
 
 article,
@@ -116,34 +115,34 @@ hgroup,
 menu,
 nav,
 section {
-    display: block;
+  display: block;
 }
 body {
-    line-height: 1;
+  line-height: 1;
 }
 
 ol,
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 blockquote,
 q {
-    quotes: none;
+  quotes: none;
 }
 
 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-    content: '';
+  content: "";
 }
 
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 select {
-  -webkit-appearance:none
+  -webkit-appearance: none;
 }
diff --git a/frontend/resources/styles/common/dependencies/z-index.scss b/frontend/resources/styles/common/dependencies/z-index.scss
index 68bf198ca..6324aa112 100644
--- a/frontend/resources/styles/common/dependencies/z-index.scss
+++ b/frontend/resources/styles/common/dependencies/z-index.scss
@@ -5,7 +5,7 @@
 // Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
-$autocomplete:30000;
+$autocomplete: 30000;
 $index-lightbox-shadow: 60000;
 $index-lightbox: 60001;
 $index-lightbox-close-x: 200;
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index f60fcaa3a..5d0fe7387 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -19,7 +19,7 @@
   justify-content: center;
   min-width: 25px;
   padding: 0 1rem;
-  transition: all .4s;
+  transition: all 0.4s;
   text-decoration: none !important;
   svg {
     height: 16px;
@@ -76,7 +76,7 @@
   color: $color-primary-dark;
   flex-shrink: 0;
   &:hover {
-    background: rgba(49,239,184,.12);
+    background: rgba(49, 239, 184, 0.12);
   }
 }
 
@@ -148,7 +148,6 @@
   }
 }
 
-
 .btn-gray {
   @extend %btn;
   background: $color-gray-30;
@@ -171,7 +170,7 @@
 .btn-option {
   display: flex;
   a {
-    margin-right: .5rem;
+    margin-right: 0.5rem;
     &:last-child {
       margin-right: 0;
     }
@@ -179,7 +178,7 @@
   &.column {
     flex-direction: column;
     a {
-      margin-bottom: .5rem;
+      margin-bottom: 0.5rem;
       &:last-child {
         margin-bottom: 0;
       }
@@ -193,11 +192,11 @@
     max-width: 400px;
   }
   &.mb {
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
 }
 
-input[type=button][disabled],
+input[type="button"][disabled],
 .btn-disabled {
   background-color: $color-gray-10;
   color: $color-gray-40;
@@ -254,11 +253,9 @@ ul.slider-dots {
     &:hover {
       background-color: $color-gray-10;
     }
-
   }
 
   &.dots-purple {
-
     li {
       border-color: $color-complete;
 
@@ -266,17 +263,13 @@ ul.slider-dots {
       &:hover {
         background-color: $color-complete;
       }
-
     }
-
   }
-
 }
 
 // Doted list
 
 .doted-list {
-
   li {
     align-items: center;
     display: flex;
@@ -295,9 +288,7 @@ ul.slider-dots {
     &.not-included {
       text-decoration: line-through;
     }
-
   }
-
 }
 
 // Tags
@@ -310,7 +301,7 @@ ul.slider-dots {
     margin-right: 0;
   }
 
-  .tag  {
+  .tag {
     background-color: $color-gray-20;
     border-radius: 3px;
     color: $color-white;
@@ -332,7 +323,6 @@ ul.slider-dots {
       &:hover {
         background-color: $color-primary-dark;
       }
-
     }
 
     &.tag-green {
@@ -342,7 +332,6 @@ ul.slider-dots {
       &:hover {
         background-color: $color-success-dark;
       }
-
     }
 
     &.tag-purple {
@@ -352,7 +341,6 @@ ul.slider-dots {
       &:hover {
         background-color: $color-complete-dark;
       }
-
     }
 
     &.tag-orange {
@@ -362,7 +350,6 @@ ul.slider-dots {
       &:hover {
         background-color: $color-warning-dark;
       }
-
     }
 
     &.tag-red {
@@ -372,11 +359,8 @@ ul.slider-dots {
       &:hover {
         background-color: $color-danger-dark;
       }
-
     }
-
   }
-
 }
 
 // Input elements
@@ -404,8 +388,8 @@ ul.slider-dots {
   }
 
   .after {
-      width: auto;
-      right: 6px;
+    width: auto;
+    right: 6px;
   }
 
   &.mini {
@@ -425,49 +409,42 @@ ul.slider-dots {
   }
 
   &.percentail {
-
     &::after {
       content: "%";
     }
   }
 
   &.milliseconds {
-
     &::after {
       content: "ms";
     }
   }
 
   &.degrees {
-
     &::after {
       content: "dg";
     }
   }
 
   &.height {
-
     &::after {
       content: "H";
     }
   }
 
   &.width {
-
     &::after {
       content: "W";
     }
   }
 
   &.Xaxis {
-
     &::after {
       content: "X";
     }
   }
 
   &.Yaxis {
-
     &::after {
       content: "Y";
     }
@@ -524,7 +501,7 @@ input[type="checkbox"]:focus {
   position: relative;
 
   @include placeholder {
-    transition: all .3s ease;
+    transition: all 0.3s ease;
   }
 
   &:focus {
@@ -534,9 +511,8 @@ input[type="checkbox"]:focus {
     @include placeholder {
       opacity: 0;
       transform: translateY(-20px);
-      transition: all .3s ease;
+      transition: all 0.3s ease;
     }
-
   }
 
   &.success {
@@ -550,7 +526,6 @@ input[type="checkbox"]:focus {
     border-color: $color-danger;
     color: $color-danger-dark;
   }
-
 }
 
 // Element-name
@@ -579,10 +554,8 @@ input.element-name {
   &.small {
     padding: $size-1 $size-5 $size-1 $size-1;
   }
-
 }
 
-
 // Input radio
 
 .input-radio,
@@ -594,15 +567,15 @@ input.element-name {
   margin-top: 10px;
   padding-left: 0px;
 
-  label{
+  label {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: 15px;
     font-size: $fs12;
 
-    &:before{
-      content:"";
+    &:before {
+      content: "";
       width: 20px;
       height: 20px;
       margin-right: 10px;
@@ -618,11 +591,9 @@ input.element-name {
     align-items: flex-start;
     flex-direction: column;
   }
-
 }
 
 .input-radio {
-
   label {
     margin-bottom: 6px;
 
@@ -630,76 +601,61 @@ input.element-name {
       border-radius: 99px;
       transition: box-shadow 0.2s linear 0s, color 0.2s linear 0s;
     }
-
   }
 
-  input[type=radio]:checked {
-
+  input[type="radio"]:checked {
     & + label {
-
       &:before {
-        box-shadow: inset 0 0 0 5px $color-gray-20 ;
+        box-shadow: inset 0 0 0 5px $color-gray-20;
       }
-
     }
-
   }
 
-  input[type=radio] {
+  input[type="radio"] {
     display: none;
   }
 
-  input[type=radio][disabled] {
-
+  input[type="radio"][disabled] {
     & + label {
       opacity: 0.65;
     }
-
   }
-
 }
-input[type=radio]:checked + label:before{
-
-  .input-radio.radio-success &{
+input[type="radio"]:checked + label:before {
+  .input-radio.radio-success & {
     box-shadow: inset 0 0 0 5px $color-success;
   }
 
-  .input-radio.radio-primary &{
+  .input-radio.radio-primary & {
     box-shadow: inset 0 0 0 5px $color-primary;
   }
 
-  .input-radio.radio-info &{
+  .input-radio.radio-info & {
     box-shadow: inset 0 0 0 5px $color-info;
   }
 
-  .input-radio.radio-warning &{
+  .input-radio.radio-warning & {
     box-shadow: inset 0 0 0 5px $color-warning;
   }
 
-  .input-radio.radio-danger &{
+  .input-radio.radio-danger & {
     box-shadow: inset 0 0 0 5px $color-danger;
   }
 
-  .input-radio.radio-complete &{
+  .input-radio.radio-complete & {
     box-shadow: inset 0 0 0 5px $color-complete;
   }
-
 }
 
 // Input checkbox
 
 .input-checkbox {
-
-  input[type=radio][disabled] {
-
+  input[type="radio"][disabled] {
     & + label {
-
       &:after {
         background-color: $color-gray-10;
       }
-
     }
-
   }
 
   label {
@@ -726,17 +682,14 @@ input[type=radio]:checked + label:before{
     &:after {
       border-radius: 3px;
     }
-
   }
 
-  input[type=checkbox] {
+  input[type="checkbox"] {
     display: none;
   }
 
   &.checkbox-circle {
-
     label {
-
       &:after {
         border-radius: 99px;
       }
@@ -744,98 +697,81 @@ input[type=radio]:checked + label:before{
       &:before {
         border-radius: 99px;
       }
-
     }
-
   }
 
-  input[type=checkbox]:checked {
-
+  input[type="checkbox"]:checked {
     & + label {
-
       &:before {
         border-width: 10px;
       }
 
       &::after {
-        content:"✓";
+        content: "✓";
         color: #ffffff;
         font-size: $fs16;
       }
-
     }
-
   }
 
-  input[type=checkbox][disabled] {
-
+  input[type="checkbox"][disabled] {
     & + label {
       opacity: 0.65;
 
       &:before {
         background-color: #eceff3;
       }
-
     }
-
   }
 
   &.right {
-
     label {
       margin-right: 35px;
-      padding-left:0 !important;
+      padding-left: 0 !important;
 
       &:before {
-        right:-35px;
-        left:auto;
+        right: -35px;
+        left: auto;
       }
-
     }
 
-    input[type=checkbox]:checked {
-
+    input[type="checkbox"]:checked {
       & + label {
         position: relative;
 
         &::after {
-          content:"✓";
+          content: "✓";
           position: absolute;
           right: -27px;
           left: auto;
         }
-
       }
-
     }
-
   }
-
 }
 
-input[type=checkbox]:checked + label{
-
-  .input-checkbox.check-success &:before{
+input[type="checkbox"]:checked + label {
+  .input-checkbox.check-success &:before {
     border-color: $color-success;
   }
 
-  .input-checkbox.check-primary &:before{
+  .input-checkbox.check-primary &:before {
     border-color: $color-primary;
   }
 
-  .input-checkbox.check-complete &:before{
+  .input-checkbox.check-complete &:before {
     border-color: $color-complete;
   }
 
-  .input-checkbox.check-warning &:before{
+  .input-checkbox.check-warning &:before {
     border-color: $color-warning;
   }
 
-  .input-checkbox.check-danger &:before{
+  .input-checkbox.check-danger &:before {
     border-color: $color-danger;
   }
 
-  .input-checkbox.check-info &:before{
+  .input-checkbox.check-info &:before {
     border-color: $color-info;
   }
 
@@ -847,22 +783,21 @@ input[type=checkbox]:checked + label{
   .input-checkbox.check-info &::after {
     color: $color-white;
   }
-
 }
 
 // Input slidebar
 
-input[type=range] {
+input[type="range"] {
   background-color: transparent;
   -webkit-appearance: none;
   margin: 10px 0 10px 3px;
   max-width: 70px;
   width: 100%;
 }
-input[type=range]:focus {
+input[type="range"]:focus {
   outline: none;
 }
-input[type=range]::-webkit-slider-runnable-track {
+input[type="range"]::-webkit-slider-runnable-track {
   width: 100%;
   height: 6px;
   cursor: pointer;
@@ -872,7 +807,7 @@ input[type=range]::-webkit-slider-runnable-track {
   border-radius: 25px;
   border: 0px solid #000101;
 }
-input[type=range]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   border: 0px solid #000000;
   height: 18px;
@@ -883,10 +818,10 @@ input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   margin-top: -6px;
 }
-input[type=range]:focus::-webkit-slider-runnable-track {
+input[type="range"]:focus::-webkit-slider-runnable-track {
   background: $color-gray-60;
 }
-input[type=range]::-moz-range-track {
+input[type="range"]::-moz-range-track {
   width: 100%;
   height: 8px;
   cursor: pointer;
@@ -896,7 +831,7 @@ input[type=range]::-moz-range-track {
   border-radius: 25px;
   border: 0px solid #000101;
 }
-input[type=range]::-moz-range-thumb {
+input[type="range"]::-moz-range-thumb {
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   border: 0px solid #000000;
   height: 24px;
@@ -905,7 +840,7 @@ input[type=range]::-moz-range-thumb {
   background: $color-gray-20;
   cursor: pointer;
 }
-input[type=range]::-ms-track {
+input[type="range"]::-ms-track {
   width: 100%;
   height: 8px;
   cursor: pointer;
@@ -915,19 +850,19 @@ input[type=range]::-ms-track {
   border-width: 39px 0;
   color: transparent;
 }
-input[type=range]::-ms-fill-lower {
+input[type="range"]::-ms-fill-lower {
   background: $color-gray-60;
   border: 0px solid #000101;
   border-radius: 50px;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
 }
-input[type=range]::-ms-fill-upper {
+input[type="range"]::-ms-fill-upper {
   background: $color-gray-60;
   border: 0px solid #000101;
   border-radius: 50px;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
 }
-input[type=range]::-ms-thumb {
+input[type="range"]::-ms-thumb {
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   border: 0px solid #000000;
   height: 24px;
@@ -936,32 +871,31 @@ input[type=range]::-ms-thumb {
   background: $color-gray-20;
   cursor: pointer;
 }
-input[type=range]:focus::-ms-fill-lower {
+input[type="range"]:focus::-ms-fill-lower {
   background: $color-gray-60;
 }
-input[type=range]:focus::-ms-fill-upper {
+input[type="range"]:focus::-ms-fill-upper {
   background: $color-gray-60;
 }
 
 // Scroll bar (chrome)
 
 ::-webkit-scrollbar {
-    background-color: transparent;
-    cursor: pointer;
-    height: 8px;
-    width: 8px;
+  background-color: transparent;
+  cursor: pointer;
+  height: 8px;
+  width: 8px;
 }
 ::-webkit-scrollbar-track {
-    background-color: transparent;
+  background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
-    background-color: $color-gray-20;
-
-    &:hover {
-      background-color: darken($color-gray-20, 14%);
-      outline: 2px solid $color-primary;
-    }
+  background-color: $color-gray-20;
 
+  &:hover {
+    background-color: darken($color-gray-20, 14%);
+    outline: 2px solid $color-primary;
+  }
 }
 
 // Tooltip
@@ -984,7 +918,7 @@ input[type=range]:focus::-ms-fill-upper {
       top: 0;
       white-space: nowrap;
       z-index: 20;
-      @include animation(.3s,.6s,fadeIn);
+      @include animation(0.3s, 0.6s, fadeIn);
     }
   }
 
@@ -1025,7 +959,7 @@ input[type=range]:focus::-ms-fill-upper {
     }
   }
 
- &.tooltip-right {
+  &.tooltip-right {
     &:hover {
       &::after {
         top: 15%;
@@ -1034,7 +968,7 @@ input[type=range]:focus::-ms-fill-upper {
     }
   }
 
- &.tooltip-left {
+  &.tooltip-left {
     &:hover {
       &::after {
         left: unset;
@@ -1086,7 +1020,7 @@ input[type=range]:focus::-ms-fill-upper {
   }
 
   &.hide {
-    @include animation(0, .6s, fadeOutUp);
+    @include animation(0, 0.6s, fadeOutUp);
   }
 
   .icon {
@@ -1137,7 +1071,7 @@ input[type=range]:focus::-ms-fill-upper {
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    opacity: .35;
+    opacity: 0.35;
 
     svg {
       fill: $color-black;
@@ -1147,13 +1081,13 @@ input[type=range]:focus::-ms-fill-upper {
     }
 
     &:hover {
-      opacity: .8;
+      opacity: 0.8;
     }
   }
 
   &.fixed {
     border-radius: $br-small;
-    box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
     height: 48px;
     max-width: 1000px;
     min-width: 500px;
@@ -1186,7 +1120,8 @@ input[type=range]:focus::-ms-fill-upper {
     }
   }
 
-  &.floating, &.inline {
+  &.floating,
+  &.inline {
     min-height: 40px;
 
     .wrapper {
@@ -1212,25 +1147,25 @@ input[type=range]:focus::-ms-fill-upper {
 
     &.error {
       .content {
-        background-color: lighten($color-danger,30%);
+        background-color: lighten($color-danger, 30%);
       }
     }
 
     &.success {
       .content {
-        background-color: lighten($color-success,30%);
+        background-color: lighten($color-success, 30%);
       }
     }
 
     &.warning {
       .content {
-        background-color: lighten($color-warning,30%);
+        background-color: lighten($color-warning, 30%);
       }
     }
 
     &.info {
       .content {
-        background-color: lighten($color-info,30%);
+        background-color: lighten($color-info, 30%);
       }
     }
   }
@@ -1282,7 +1217,7 @@ input[type=range]:focus::-ms-fill-upper {
   background-color: $color-info;
   color: $color-info-darker;
   margin-bottom: 1.2rem;
-  padding: .8rem;
+  padding: 0.8rem;
   text-align: center;
   p {
     margin: 0;
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 53d0baedf..ca1c5c61b 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -4,7 +4,6 @@
 //
 // Copyright (c) UXBOX Labs SL
 
-
 //#################################################
 // Import libraries
 //#################################################
diff --git a/frontend/resources/styles/main/layouts/login.scss b/frontend/resources/styles/main/layouts/login.scss
index 627753cf0..fa79a3995 100644
--- a/frontend/resources/styles/main/layouts/login.scss
+++ b/frontend/resources/styles/main/layouts/login.scss
@@ -22,7 +22,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  background-color:#FEECFD;
+  background-color: #feecfd;
   background-image: url("/images/login-pink.svg");
   background-position: center;
   background-size: 96%;
@@ -33,12 +33,12 @@
     width: 280px;
     font-size: $fs18;
     margin-top: 2vh;
-    color: #2C233E;
+    color: #2c233e;
   }
 
   .logo {
     svg {
-      fill: #2C233E;
+      fill: #2c233e;
       max-width: 11vw;
       height: 80px;
     }
@@ -122,7 +122,6 @@
     margin-top: $size-4;
     margin-bottom: $size-4;
 
-
     &.demo {
       justify-content: center;
       margin-top: $size-5;
diff --git a/frontend/resources/styles/main/layouts/not-found.scss b/frontend/resources/styles/main/layouts/not-found.scss
index fbecd5910..99060839d 100644
--- a/frontend/resources/styles/main/layouts/not-found.scss
+++ b/frontend/resources/styles/main/layouts/not-found.scss
@@ -17,7 +17,6 @@
     height: 55px;
     width: 170px;
   }
-
 }
 
 .not-found-content {
@@ -29,7 +28,6 @@
   justify-content: center;
   align-items: center;
 
-
   .container {
     max-width: 600px;
   }
@@ -80,4 +78,3 @@
     }
   }
 }
-
diff --git a/frontend/resources/styles/main/layouts/viewer.scss b/frontend/resources/styles/main/layouts/viewer.scss
index 296322332..f935a0f8d 100644
--- a/frontend/resources/styles/main/layouts/viewer.scss
+++ b/frontend/resources/styles/main/layouts/viewer.scss
@@ -31,7 +31,6 @@
       left: 0;
       top: 48px;
     }
-
   }
 
   & .viewer-header:hover {
@@ -57,5 +56,3 @@
     background-color: rgb(0, 0, 0, 0.2);
   }
 }
-
-
diff --git a/frontend/resources/styles/main/partials/activity-bar.scss b/frontend/resources/styles/main/partials/activity-bar.scss
index 7e116fae1..75ca3ec58 100644
--- a/frontend/resources/styles/main/partials/activity-bar.scss
+++ b/frontend/resources/styles/main/partials/activity-bar.scss
@@ -65,7 +65,6 @@
           font-weight: bold;
           margin: 0 3px;
         }
-
       }
 
       .activity-time {
@@ -75,5 +74,4 @@
       }
     }
   }
-
 }
diff --git a/frontend/resources/styles/main/partials/af-signup-questions.scss b/frontend/resources/styles/main/partials/af-signup-questions.scss
index 6f963ec88..bb5017818 100644
--- a/frontend/resources/styles/main/partials/af-signup-questions.scss
+++ b/frontend/resources/styles/main/partials/af-signup-questions.scss
@@ -12,9 +12,10 @@
   padding: 3rem;
   width: 100% !important;
 
-  h1, h3 {
-    font-family: 'worksans', sans-serif !important;
-    margin-bottom: .8rem;
+  h1,
+  h3 {
+    font-family: "worksans", sans-serif !important;
+    margin-bottom: 0.8rem;
     font-weight: 500 !important;
   }
 
@@ -26,8 +27,9 @@
     font-weight: 500;
   }
 
-  p, label {
-    font-family: 'worksans', sans-serif !important;
+  p,
+  label {
+    font-family: "worksans", sans-serif !important;
     font-size: $fs14;
   }
 
@@ -37,7 +39,7 @@
   }
 
   button {
-    font-family: 'worksans', sans-serif !important;
+    font-family: "worksans", sans-serif !important;
   }
 
   .af-choice,
@@ -51,7 +53,7 @@
     width: 100%;
 
     label {
-      font-family: 'worksans', sans-serif !important;
+      font-family: "worksans", sans-serif !important;
       font-size: $fs14;
       padding-left: 0;
     }
@@ -76,7 +78,7 @@
 
   .af-dropdown-text,
   .text {
-    font-family: 'worksans', sans-serif !important;
+    font-family: "worksans", sans-serif !important;
   }
 
   .af-step-next {
@@ -109,13 +111,13 @@
     border-color: #c5c6c9 !important;
   }
 
-  .af-choice-option input:checked+label:before,
-  .af-legal input:checked+label:before {
+  .af-choice-option input:checked + label:before,
+  .af-legal input:checked + label:before {
     background-color: $color-primary;
   }
 
-  .af-field-use_of_penpot .af-choice-option input:checked+label,
-  .af-field-previous_design_tool .af-choice-option input:checked+label {
+  .af-field-use_of_penpot .af-choice-option input:checked + label,
+  .af-field-previous_design_tool .af-choice-option input:checked + label {
     &::before {
       background-color: transparent;
       border: 2px solid $color-primary !important;
@@ -156,7 +158,7 @@
 
     &:hover {
       background-color: transparent;
-      box-shadow: 0px 10px 20px rgba(0,0,0,.2);
+      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
     }
 
     &::before {
@@ -177,7 +179,6 @@
 
   .af-field-previous_design_tool .af-choice-option:nth-child(1) label {
     background-image: url("../images/form/figma.png");
-
   }
 
   .af-field-previous_design_tool .af-choice-option:nth-child(2) label {
@@ -242,9 +243,11 @@
     }
   }
 
-  .af-field-previous_design_tool .af-choice-option:nth-child(7) input:checked+label,
-  .af-field-use_of_penpot .af-choice-option:nth-child(5) input:checked+label {
-
+  .af-field-previous_design_tool
+    .af-choice-option:nth-child(7)
+    input:checked
+    + label,
+  .af-field-use_of_penpot .af-choice-option:nth-child(5) input:checked + label {
     &::before {
       background-color: $color-primary;
     }
diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss
index 952261776..6ed5815e6 100644
--- a/frontend/resources/styles/main/partials/color-bullet.scss
+++ b/frontend/resources/styles/main/partials/color-bullet.scss
@@ -31,7 +31,6 @@
     width: 50px;
     height: 50px;
   }
-
 }
 
 .color-cell.current {
@@ -56,7 +55,7 @@ ul.palette-menu .color-bullet {
   display: flex;
   justify-content: center;
   margin-bottom: 1rem;
-  padding: .6rem;
+  padding: 0.6rem;
 
   svg {
     fill: $color-gray-10;
@@ -95,7 +94,8 @@ ul.palette-menu .color-bullet {
   flex-direction: row;
   overflow: hidden;
 
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+    left center;
   background-color: $color-white;
 
   & > * {
@@ -108,7 +108,7 @@ ul.palette-menu .color-bullet {
   background: transparent;
 
   &::before {
-    content: "?"
+    content: "?";
   }
 }
 
@@ -151,7 +151,6 @@ ul.palette-menu .color-bullet {
       svg {
         fill: $color-primary;
       }
-
     }
   }
 }
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index 5cb587d05..fb42b2418 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -5,7 +5,7 @@
 // Copyright (c) UXBOX Labs SL
 
 .color-palette {
-  @include animation(0,.5s,fadeInUp);
+  @include animation(0, 0.5s, fadeInUp);
   align-items: center;
   background-color: $color-gray-50;
   border-top: 1px solid $color-gray-60;
@@ -18,12 +18,12 @@
 
   & .right-arrow,
   & .left-arrow {
-      cursor: pointer;
+    cursor: pointer;
 
     svg {
       fill: $color-gray-20;
       height: 1rem;
-      margin: 0 .5rem;
+      margin: 0 0.5rem;
       width: 1rem;
     }
 
@@ -37,53 +37,52 @@
     }
   }
 
-
   .left-arrow {
-      transform: rotate(180deg);
-      padding-top: 10px;
+    transform: rotate(180deg);
+    padding-top: 10px;
   }
 
   &.fade-out-down {
-    @include animation(0,.5s,fadeOutDown);
+    @include animation(0, 0.5s, fadeOutDown);
   }
 
   &.left-sidebar-open {
-      left: 303px;
-      width: calc(100% - 303px);
+    left: 303px;
+    width: calc(100% - 303px);
   }
 
   & .context-menu-items {
-      bottom: 1.5rem;
-      top: initial;
-      min-width: 10rem;
+    bottom: 1.5rem;
+    top: initial;
+    min-width: 10rem;
   }
 }
 
 .color-palette-actions {
-    align-self: stretch;
-    border: 1px solid #1F1F1F;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    justify-content: center;
-    margin-right: .5rem;
-    padding: 0.5rem;
+  align-self: stretch;
+  border: 1px solid #1f1f1f;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: center;
+  margin-right: 0.5rem;
+  padding: 0.5rem;
 
-    .color-palette-buttons {
-        align-items: center;
-        display: flex;
-        justify-content: space-around;
-    }
+  .color-palette-buttons {
+    align-items: center;
+    display: flex;
+    justify-content: space-around;
+  }
 }
 
 .color-palette-actions-button {
-    cursor: pointer;
-    & svg {
-        width: 1rem;
-        height: 1rem;
-        fill: #AFB2BF;
-    }
+  cursor: pointer;
+  & svg {
+    width: 1rem;
+    height: 1rem;
+    fill: #afb2bf;
+  }
 }
 
 .btn-palette {
@@ -94,7 +93,7 @@
   display: flex;
   flex-shrink: 0;
   justify-content: center;
-  padding: .6rem;
+  padding: 0.6rem;
   svg {
     fill: $color-gray-10;
     height: 20px;
@@ -124,7 +123,7 @@
   padding: 0.25rem;
 
   &.size-small {
-      height: 3.5rem;
+    height: 3.5rem;
   }
 }
 
@@ -132,7 +131,7 @@
   position: relative;
   align-items: center;
   display: flex;
-  transition: all .6s ease;
+  transition: all 0.6s ease;
   width: 100%;
   scroll-behavior: smooth;
 }
@@ -146,11 +145,11 @@
   position: relative;
 
   &.cell-big {
-      flex-basis: 66px;
+    flex-basis: 66px;
   }
 
   &.cell-small {
-      flex-basis: 52px;
+    flex-basis: 52px;
   }
 
   .color-text {
@@ -232,7 +231,7 @@
     position: relative;
     .input-text {
       font-size: $fs12;
-      margin: 0 .5rem;
+      margin: 0 0.5rem;
       max-width: 100px;
     }
     &::after {
@@ -251,43 +250,41 @@
 }
 
 ul.palette-menu {
-    left: 8px;
-    top: auto;
-    bottom: 4.5rem;
-    color: $color-black;
+  left: 8px;
+  top: auto;
+  bottom: 4.5rem;
+  color: $color-black;
 
-    li {
-        position: relative;
-        padding: 5px 1.5rem;
-    }
+  li {
+    position: relative;
+    padding: 5px 1.5rem;
+  }
 
-    hr {
-        margin: 0.5rem 0;
-    }
+  hr {
+    margin: 0.5rem 0;
+  }
 
-    svg {
-        width: 9px;
-        height: 9px;
-        position: absolute;
-        left: 0.5rem;
-        top: 10px;
-    }
+  svg {
+    width: 9px;
+    height: 9px;
+    position: absolute;
+    left: 0.5rem;
+    top: 10px;
+  }
 
-    hr {
-        border-color: $color-gray-20;
-    }
+  hr {
+    border-color: $color-gray-20;
+  }
 
-    .palette-library {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .color-sample {
-        display: flex;
-        flex-direction: row;
-        margin-top: 0.5rem;
-    }
+  .palette-library {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
 
+  .color-sample {
+    display: flex;
+    flex-direction: row;
+    margin-top: 0.5rem;
+  }
 }
-
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index f5e8afb3f..4247ee30f 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -76,7 +76,8 @@
       height: 100%;
       width: 100%;
       border: 1px solid $color-gray-10;
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+        left center;
     }
 
     .gradient-background {
@@ -102,7 +103,8 @@
       margin-left: -7px;
       box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
 
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+        left center;
       background-color: $color-white;
 
       &.active {
@@ -142,7 +144,11 @@
 
     border: 1px solid $color-gray-10;
 
-    background: linear-gradient(var(--gradient-direction), rgba(var(--color), 0) 0%, rgba(var(--color), 1.0) 100%);
+    background: linear-gradient(
+      var(--gradient-direction),
+      rgba(var(--color), 0) 0%,
+      rgba(var(--color), 1) 100%
+    );
     align-self: center;
     position: relative;
     cursor: pointer;
@@ -157,9 +163,15 @@
 
     &.hue {
       background: linear-gradient(
-        var(--gradient-direction), 
-        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, 
-        #00f 67%, #f0f 83%, #f00 100%);
+        var(--gradient-direction),
+        #f00 0%,
+        #ff0 17%,
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        #f00 100%
+      );
     }
 
     &.saturation {
@@ -167,29 +179,36 @@
         var(--gradient-direction),
         var(--saturation-grad-from) 0%,
         var(--saturation-grad-to) 100%
-      )
+      );
     }
 
     &.opacity {
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") var(--background-repeat) center;
+      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+        var(--background-repeat) center;
 
       &::after {
         content: "";
         position: absolute;
         width: 100%;
         height: 100%;
-        background: linear-gradient(var(--gradient-direction), rgba(var(--color), 0) 0%, rgba(var(--color), 1.0) 100%);
+        background: linear-gradient(
+          var(--gradient-direction),
+          rgba(var(--color), 0) 0%,
+          rgba(var(--color), 1) 100%
+        );
       }
-
     }
 
     &.value {
-      background: linear-gradient(var(--gradient-direction), #FFF 0%, #000 100%);
+      background: linear-gradient(
+        var(--gradient-direction),
+        #fff 0%,
+        #000 100%
+      );
     }
 
-
     .handler {
-      background-color: $color-white;;
+      background-color: $color-white;
       box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
       transform: translate(-6px, -2px);
       left: 50%;
@@ -218,7 +237,8 @@
       border-radius: 6px;
       z-index: 1;
       border: 1px solid $color-white;
-      box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
+      box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset,
+        rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
       transform: translate(-6px, -6px);
       left: 50%;
       top: 50%;
@@ -229,7 +249,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      background: linear-gradient(to right, #fff, rgba(255,255,255,0));
+      background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
     }
 
     &::after {
@@ -237,7 +257,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      background: linear-gradient(to top, #000, rgba(0,0,0,0));
+      background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
     }
   }
 
@@ -245,8 +265,9 @@
     display: grid;
     justify-items: center;
     align-items: center;
-    grid-template-areas: "color hue"
-                         "color opacity";
+    grid-template-areas:
+      "color hue"
+      "color opacity";
     grid-template-columns: 2.5rem 1fr;
     height: 3.5rem;
     grid-row-gap: 0.5rem;
@@ -296,7 +317,7 @@
     padding-top: 0.5rem;
     margin-top: 0.25rem;
     width: 200px;
-    
+
     select {
       background-image: url(/images/icons/arrow-down.svg);
       background-repeat: no-repeat;
@@ -327,7 +348,6 @@
       max-height: 5.5rem;
     }
 
-    
     .selected-colors::after {
       content: "";
       flex: auto;
@@ -367,7 +387,8 @@
         border-radius: 6px;
         z-index: 1;
         border: 1px solid $color-white;
-        box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
+        box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset,
+          rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
         transform: translate(-6px, -6px);
         left: 50%;
         top: 50%;
@@ -431,7 +452,6 @@
   }
 
   .inputs-area {
-
     .input-text {
       color: $color-gray-60;
       font-size: $fs12;
@@ -439,7 +459,6 @@
       padding: 5px;
       width: 100%;
     }
-
   }
 
   .colorpicker-tabs {
@@ -473,7 +492,6 @@
     :hover svg {
       fill: $color-primary;
     }
-
   }
 }
 
@@ -517,7 +535,7 @@
     }
   }
 
-  ::placeholder{
+  ::placeholder {
     color: $color-gray-10;
   }
 
@@ -535,4 +553,3 @@
     height: 10px;
   }
 }
-
diff --git a/frontend/resources/styles/main/partials/comments.scss b/frontend/resources/styles/main/partials/comments.scss
index 04fcc4583..e5e865d13 100644
--- a/frontend/resources/styles/main/partials/comments.scss
+++ b/frontend/resources/styles/main/partials/comments.scss
@@ -8,7 +8,7 @@
     pointer-events: auto;
     background-color: $color-gray-10;
     color: $color-gray-60;
-    border: 1px solid #B1B2B5;
+    border: 1px solid #b1b2b5;
     box-sizing: border-box;
     box-shadow: 0px 4px 4px rgba($color-black, 0.25);
 
@@ -124,7 +124,6 @@
 
           @include text-ellipsis;
           width: 174px;
-
         }
         .timeago {
           margin-top: -2px;
@@ -178,7 +177,6 @@
             fill: $color-black;
           }
         }
-
       }
     }
 
@@ -194,13 +192,12 @@
     }
   }
 
-
   .comment-options-dropdown {
     top: 7px;
     right: 7px;
     width: 150px;
 
-    border: 1px solid #B1B2B5;
+    border: 1px solid #b1b2b5;
   }
 }
 
@@ -241,13 +238,10 @@
   }
 }
 
-
-
 .comment-threads-section {
   pointer-events: auto;
 
   .thread-groups {
-
     hr {
       border: 0;
       height: 1px;
@@ -332,7 +326,6 @@
   }
 }
 
-
 .viewer-comments-container {
   width: 100%;
   height: 100%;
@@ -345,8 +338,8 @@
 .workspace-comments-container {
   width: 100%;
   height: 100%;
-  grid-column: 1/span 2;
-  grid-row: 1/span 2;
+  grid-column: 1 / span 2;
+  grid-row: 1 / span 2;
   z-index: 1000;
   pointer-events: none;
   overflow: hidden;
@@ -389,7 +382,9 @@
 
     &.open {
       background-color: $color-black;
-      svg { fill: $color-primary; }
+      svg {
+        fill: $color-primary;
+      }
     }
   }
 
@@ -419,7 +414,6 @@
       align-items: center;
     }
 
-
     svg {
       width: 15px;
       height: 15px;
@@ -439,7 +433,7 @@
   .thread-group .section-title {
     color: $color-black;
   }
-  
+
   .comment {
     .author .name .fullname {
       color: $color-gray-40;
@@ -465,4 +459,3 @@
     width: 24px;
   }
 }
-
diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss
index ce19531bc..37adaa41e 100644
--- a/frontend/resources/styles/main/partials/context-menu.scss
+++ b/frontend/resources/styles/main/partials/context-menu.scss
@@ -5,99 +5,98 @@
 // Copyright (c) UXBOX Labs SL
 
 .context-menu {
-    position: relative;
-    visibility: hidden;
-    opacity: 0;
-    z-index: 100;
+  position: relative;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 100;
 }
 
 .context-menu.is-open {
-    position: relative;
-    display: block;
-    opacity: 1;
-    visibility: visible;
+  position: relative;
+  display: block;
+  opacity: 1;
+  visibility: visible;
 }
 
 .context-menu.fixed {
-    position: fixed;
+  position: fixed;
 }
 
 .context-menu-items {
-    background: $color-white;
-    border-radius: $br-small;
-    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-    left: -$size-4;
-    max-height: 30rem;
-    min-width: 7rem;
-    overflow: auto;
-    position: absolute;
-    top: $size-3;
+  background: $color-white;
+  border-radius: $br-small;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+  left: -$size-4;
+  max-height: 30rem;
+  min-width: 7rem;
+  overflow: auto;
+  position: absolute;
+  top: $size-3;
 
-    & .separator {
-      border-top: 1px solid $color-gray-10;
-      padding: 0px;
-      margin: 2px;
-    }
+  & .separator {
+    border-top: 1px solid $color-gray-10;
+    padding: 0px;
+    margin: 2px;
+  }
 
-    &.min-width {
-      min-width: 13rem;
-    }
+  &.min-width {
+    min-width: 13rem;
+  }
 }
 
 .context-menu-action {
+  color: $color-black;
+  display: block;
+  font-size: $fs14;
+  padding: $size-2 $size-4;
+  text-align: left;
+  white-space: nowrap;
+
+  &:hover {
     color: $color-black;
-    display: block;
-    font-size: $fs14;
-    padding: $size-2 $size-4;
-    text-align: left;
-    white-space: nowrap;
+    background-color: $color-primary-lighter;
+  }
 
-    &:hover {
-        color: $color-black;
-        background-color: $color-primary-lighter;
+  &.submenu {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & span {
+      margin-left: 0.5rem;
     }
 
-    &.submenu {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      & span {
-        margin-left: 0.5rem;
-      }
-
-      & svg {
-        height: 10px;
-        width: 10px;
-      }
+    & svg {
+      height: 10px;
+      width: 10px;
     }
+  }
 
-    &.submenu-back {
-      color: $color-black;
-      display: flex;
-      font-weight: bold;
-      align-items: center;
+  &.submenu-back {
+    color: $color-black;
+    display: flex;
+    font-weight: bold;
+    align-items: center;
 
-      & svg {
-        height: 10px;
-        width: 10px;
-        transform: rotate(180deg);
-        margin-right: $size-2;
-      }
+    & svg {
+      height: 10px;
+      width: 10px;
+      transform: rotate(180deg);
+      margin-right: $size-2;
     }
+  }
 }
 
 .context-menu.is-selectable {
-    & .context-menu-action {
-        padding-left: 1.5rem;
-    }
+  & .context-menu-action {
+    padding-left: 1.5rem;
+  }
 
-    & .context-menu-item.is-selected .context-menu-action {
-        background-image: url(/images/icons/tick.svg);
-        background-repeat: no-repeat;
-        background-position: 5% 48%;
-        background-size: 10px;
-        font-weight: bold;
-    }
+  & .context-menu-item.is-selected .context-menu-action {
+    background-image: url(/images/icons/tick.svg);
+    background-repeat: no-repeat;
+    background-position: 5% 48%;
+    background-size: 10px;
+    font-weight: bold;
+  }
 }
-
diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss
index 31a7a0fdb..a39028c70 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid.scss
@@ -63,7 +63,6 @@
       .placeholder-label {
         font-size: $fs14;
       }
-
     }
 
     &.overlay {
@@ -90,8 +89,8 @@
     }
 
     .grid-item-icon {
-      width:90px;
-      height:90px;
+      width: 90px;
+      height: 90px;
     }
 
     .item-info {
@@ -133,7 +132,6 @@
           font-weight: 400;
         }
       }
-
     }
 
     .item-badge {
@@ -170,7 +168,6 @@
         background-color: $color-white;
         border: 2px solid $color-primary;
       }
-
     }
 
     // PROJECTS, ELEMENTS & ICONS GRID
@@ -225,13 +222,9 @@
               > svg {
                 fill: $color-primary-dark;
               }
-
             }
-
           }
-
         }
-
       }
 
       .project-th-actions.force-display {
@@ -247,11 +240,9 @@
       &:hover {
         border-color: $color-primary;
       }
-
     }
 
     .grid-item-image {
-
       svg {
         max-height: 100px;
         max-width: 100px;
@@ -259,7 +250,6 @@
         min-width: 40px;
         width: 8vw;
       }
-
     }
 
     .color-swatch {
@@ -291,7 +281,6 @@
       justify-content: center;
       align-items: center;
     }
-
   }
 
   // STYLES FOR LIBRARIES
@@ -355,7 +344,6 @@
     }
   }
 
-
   svg {
     width: 36px;
     height: 36px;
@@ -373,4 +361,3 @@
     margin-right: calc(100% - 148px);
   }
 }
-
diff --git a/frontend/resources/styles/main/partials/dashboard-header.scss b/frontend/resources/styles/main/partials/dashboard-header.scss
index b9e7a44f7..251cbe1c9 100644
--- a/frontend/resources/styles/main/partials/dashboard-header.scss
+++ b/frontend/resources/styles/main/partials/dashboard-header.scss
@@ -58,7 +58,6 @@
         &:hover {
           color: $color-black;
         }
-
       }
 
       &.active {
@@ -115,7 +114,9 @@
     }
 
     &.active {
-      svg { fill: $color-gray-50; }
+      svg {
+        fill: $color-gray-50;
+      }
     }
   }
 }
diff --git a/frontend/resources/styles/main/partials/dashboard-settings.scss b/frontend/resources/styles/main/partials/dashboard-settings.scss
index 8515c28cc..c5c19597b 100644
--- a/frontend/resources/styles/main/partials/dashboard-settings.scss
+++ b/frontend/resources/styles/main/partials/dashboard-settings.scss
@@ -5,7 +5,6 @@
 //
 // Copyright (c) UXBOX Labs SL
 
-
 .dashboard-sidebar {
   &.settings {
     .back-to-dashboard {
@@ -34,7 +33,6 @@
   }
 }
 
-
 .dashboard-settings {
   display: flex;
   width: 100%;
@@ -88,7 +86,7 @@
         z-index: 14;
       }
 
-      input[type=file] {
+      input[type="file"] {
         width: 120px;
         height: 120px;
         position: absolute;
@@ -99,7 +97,9 @@
       }
 
       &:hover {
-        .update-overlay {opacity: 0.8};
+        .update-overlay {
+          opacity: 0.8;
+        }
       }
     }
   }
@@ -118,5 +118,4 @@
       margin-bottom: 20px;
     }
   }
-
 }
diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
index 3a68e1ac4..0003951f4 100644
--- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss
+++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
@@ -278,7 +278,8 @@
       border-color: $color-black;
     }
 
-    .search, .clear-search {
+    .search,
+    .clear-search {
       align-items: center;
       cursor: pointer;
       display: flex;
@@ -354,12 +355,11 @@
     justify-content: center;
   }
 
-  input[type=submit] {
+  input[type="submit"] {
     margin-bottom: 0px;
   }
 }
 
-
 .profile-section {
   align-items: center;
   cursor: pointer;
@@ -400,7 +400,7 @@
     bottom: 45px;
     min-width: 189px;
 
-    @include animation(0,.2s,fadeInUp);
+    @include animation(0, 0.2s, fadeInUp);
 
     li {
       height: 40px;
diff --git a/frontend/resources/styles/main/partials/dashboard-team.scss b/frontend/resources/styles/main/partials/dashboard-team.scss
index 6efc6f178..19c163cdf 100644
--- a/frontend/resources/styles/main/partials/dashboard-team.scss
+++ b/frontend/resources/styles/main/partials/dashboard-team.scss
@@ -1,4 +1,3 @@
-
 .dashboard-invite-modal {
   top: 65px;
   right: 13px;
@@ -31,7 +30,7 @@
   .action-buttons {
     display: flex;
     justify-content: center;
-    input[type=submit] {
+    input[type="submit"] {
       margin-bottom: 0px;
     }
   }
@@ -98,11 +97,9 @@
       }
     }
   }
-
 }
 
 .dashboard-team-settings {
-
   .team-settings {
     display: flex;
     justify-content: center;
@@ -173,7 +170,9 @@
           background: $color-primary-dark;
           z-index: 14;
 
-          svg { fill: $color-white; }
+          svg {
+            fill: $color-white;
+          }
         }
 
         &:hover {
diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss
index 3a8c0deb5..6c786b828 100644
--- a/frontend/resources/styles/main/partials/dashboard.scss
+++ b/frontend/resources/styles/main/partials/dashboard.scss
@@ -71,7 +71,9 @@
       }
 
       &.active {
-        svg { fill: $color-gray-50; }
+        svg {
+          fill: $color-gray-50;
+        }
       }
     }
   }
@@ -133,7 +135,6 @@
   }
 }
 
-
 .edit-wrapper {
   border: 1px solid $color-gray-10;
   border-radius: $br-small;
diff --git a/frontend/resources/styles/main/partials/debug-icons-preview.scss b/frontend/resources/styles/main/partials/debug-icons-preview.scss
index 7a4940eec..8ddba1688 100644
--- a/frontend/resources/styles/main/partials/debug-icons-preview.scss
+++ b/frontend/resources/styles/main/partials/debug-icons-preview.scss
@@ -1,13 +1,14 @@
 .debug-preview {
-    display: flex;
-    flex-direction: column;
-    overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  overflow: scroll;
 }
 .debug-icons-preview {
   display: flex;
   flex-wrap: wrap;
 
-  .icon-item, .cursor-item {
+  .icon-item,
+  .cursor-item {
     padding: 10px;
     display: flex;
     flex-direction: column;
@@ -22,6 +23,6 @@
     }
   }
   .cursor-item {
-      height: auto;
+    height: auto;
   }
 }
diff --git a/frontend/resources/styles/main/partials/dropdown.scss b/frontend/resources/styles/main/partials/dropdown.scss
index 27500670a..3e480de70 100644
--- a/frontend/resources/styles/main/partials/dropdown.scss
+++ b/frontend/resources/styles/main/partials/dropdown.scss
@@ -36,14 +36,15 @@
     }
   }
 
-
   &.with-check {
     > li {
       padding: 5px 10px;
     }
 
     > li:not(.selected) {
-      svg { display: none; }
+      svg {
+        display: none;
+      }
     }
 
     svg {
diff --git a/frontend/resources/styles/main/partials/editable-label.scss b/frontend/resources/styles/main/partials/editable-label.scss
index 66e50ac07..db2d42a89 100644
--- a/frontend/resources/styles/main/partials/editable-label.scss
+++ b/frontend/resources/styles/main/partials/editable-label.scss
@@ -1,30 +1,30 @@
 .editable-label {
-    display: flex;
+  display: flex;
 
-    &.is-hidden {
-        display: none;
-    }
+  &.is-hidden {
+    display: none;
+  }
 }
 
 .editable-label-input {
-    border: 0;
-    height: 30px;
-    padding: 5px;
-    margin: 0;
-    width: 100%;
-    background-color: $color-white;
+  border: 0;
+  height: 30px;
+  padding: 5px;
+  margin: 0;
+  width: 100%;
+  background-color: $color-white;
 }
 
 .editable-label-close {
-    background-color: $color-white;
-    cursor: pointer;
-    padding: 3px 5px;
+  background-color: $color-white;
+  cursor: pointer;
+  padding: 3px 5px;
 
-    & svg {
-        fill: $color-gray-30;
-        height: 15px;
-        transform: rotate(45deg) translateY(7px);
-        width: 15px;
-        margin: 0;
-    }
+  & svg {
+    fill: $color-gray-30;
+    height: 15px;
+    transform: rotate(45deg) translateY(7px);
+    width: 15px;
+    margin: 0;
+  }
 }
diff --git a/frontend/resources/styles/main/partials/exception-page.scss b/frontend/resources/styles/main/partials/exception-page.scss
index f0815818b..59610ad65 100644
--- a/frontend/resources/styles/main/partials/exception-page.scss
+++ b/frontend/resources/styles/main/partials/exception-page.scss
@@ -20,7 +20,6 @@
     height: 55px;
     width: 170px;
   }
-
 }
 
 .exception-content {
@@ -32,7 +31,6 @@
   justify-content: center;
   align-items: center;
 
-
   .container {
     max-width: 600px;
   }
@@ -83,4 +81,3 @@
     }
   }
 }
-
diff --git a/frontend/resources/styles/main/partials/forms.scss b/frontend/resources/styles/main/partials/forms.scss
index 2c780c91c..d3f52b61e 100644
--- a/frontend/resources/styles/main/partials/forms.scss
+++ b/frontend/resources/styles/main/partials/forms.scss
@@ -51,13 +51,13 @@ textarea {
 
   h1 {
     font-size: $fs36;
-    color: #2C233E;
+    color: #2c233e;
     margin-bottom: 20px;
   }
 
   .subtitle {
     font-size: $fs24;
-    color: #2C233E;
+    color: #2c233e;
     margin-bottom: 20px;
   }
 
@@ -261,7 +261,6 @@ textarea {
     padding-top: 6px;
     padding-bottom: 6px;
     padding-left: 15px;
-
   }
 
   .input-container {
@@ -319,4 +318,3 @@ textarea {
     }
   }
 }
-
diff --git a/frontend/resources/styles/main/partials/handoff.scss b/frontend/resources/styles/main/partials/handoff.scss
index fab38c7af..c666f03cd 100644
--- a/frontend/resources/styles/main/partials/handoff.scss
+++ b/frontend/resources/styles/main/partials/handoff.scss
@@ -59,7 +59,7 @@
     border-bottom: 1px solid $color-gray-60;
   }
 
-  & :last-child{
+  & :last-child {
     border-bottom: none;
   }
 
@@ -272,7 +272,6 @@
     .typography-sample {
       font-size: $fs16;
     }
-
   }
 
   .download-button {
diff --git a/frontend/resources/styles/main/partials/left-toolbar.scss b/frontend/resources/styles/main/partials/left-toolbar.scss
index 1385bfc92..9b5cf562e 100644
--- a/frontend/resources/styles/main/partials/left-toolbar.scss
+++ b/frontend/resources/styles/main/partials/left-toolbar.scss
@@ -57,7 +57,6 @@ $width-left-toolbar: 48px;
       svg {
         fill: $color-gray-50;
       }
-
     }
 
     &.selected {
@@ -66,15 +65,10 @@ $width-left-toolbar: 48px;
       svg {
         fill: $color-primary;
       }
-
     }
-
   }
 
   &.panels {
     margin-top: auto;
   }
-
 }
-
-    
diff --git a/frontend/resources/styles/main/partials/loader.scss b/frontend/resources/styles/main/partials/loader.scss
index d29443d7f..f42675aaf 100644
--- a/frontend/resources/styles/main/partials/loader.scss
+++ b/frontend/resources/styles/main/partials/loader.scss
@@ -1,7 +1,7 @@
 // full width BG
 .loader-content {
   align-items: center;
-  background-color: rgba(255,255,255, .85);
+  background-color: rgba(255, 255, 255, 0.85);
   display: flex;
   height: 100vh;
   justify-content: center;
@@ -38,5 +38,5 @@ svg#loader-pencil {
 }
 
 #loader-line {
-  animation: linePencil .8s infinite linear;
+  animation: linePencil 0.8s infinite linear;
 }
diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss
index e767a2c21..d852fbd0e 100644
--- a/frontend/resources/styles/main/partials/modal.scss
+++ b/frontend/resources/styles/main/partials/modal.scss
@@ -1,4 +1,5 @@
-.modal-wrapper {}
+.modal-wrapper {
+}
 
 .modal-overlay {
   align-items: center;
@@ -13,7 +14,7 @@
   z-index: 1000;
 
   &.transparent {
-    background-color: rgba($color-white, 0)
+    background-color: rgba($color-white, 0);
   }
 }
 
@@ -134,7 +135,6 @@
         margin-bottom: 0px;
       }
     }
-
   }
 
   .btn-disabled {
@@ -144,7 +144,7 @@
 
 .change-email-modal {
   h2 {
-    font-size: $fs18
+    font-size: $fs18;
   }
 
   h3 {
@@ -230,7 +230,8 @@
     font-size: $fs12;
   }
 
-  .detail, .explain {
+  .detail,
+  .explain {
     padding: 0 1rem;
   }
 
@@ -256,7 +257,7 @@
     padding: 0.3rem 1.25rem;
 
     &[disabled] {
-      border: 1px solid #E3E3E3;
+      border: 1px solid #e3e3e3;
     }
 
     &:hover {
@@ -352,7 +353,7 @@
         width: 14px;
         fill: $color-gray-20;
         margin-left: 0.5rem;
-        padding-top: 1px
+        padding-top: 1px;
       }
     }
 
@@ -424,7 +425,8 @@
     flex-wrap: wrap;
     margin-left: 2rem;
 
-    .icon-chain, .icon-unchain {
+    .icon-chain,
+    .icon-unchain {
       width: 10px;
       height: 10px;
       margin-right: 2px;
@@ -481,7 +483,8 @@
       font-weight: 700;
     }
 
-    h3, p {
+    h3,
+    p {
       font-size: $fs12;
       line-height: 1.5;
       margin: 0;
@@ -716,7 +719,7 @@
 //- ONBOARDING
 .onboarding {
   background-color: $color-white;
-  box-shadow: 0 10px 10px rgba(0,0,0,.2);
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
   display: flex;
   min-height: 420px;
   flex-direction: row;
@@ -850,19 +853,18 @@
       align-items: center;
 
       h1 {
-        font-family: 'worksans', sans-serif;
+        font-family: "worksans", sans-serif;
         font-weight: 700;
         font-size: 27px;
         margin-bottom: $size-3;
         text-align: center;
       }
       p {
-        font-family: 'worksans', sans-serif;
+        font-family: "worksans", sans-serif;
         font-weight: 500;
         font-size: $fs18;
         text-align: center;
       }
-
     }
 
     .modal-columns {
@@ -895,7 +897,7 @@
       .modal-left {
         background-repeat: no-repeat;
         border-radius: $br-medium;
-        transition: all ease .3s;
+        transition: all ease 0.3s;
         &:hover {
           background-color: $color-primary;
         }
@@ -991,7 +993,8 @@
     background-color: $color-white;
     flex-grow: 1;
 
-    p, h3 {
+    p,
+    h3 {
       color: $color-gray-60;
       text-align: center;
     }
@@ -1005,7 +1008,6 @@
       font-size: $fs16;
     }
 
-
     .templates {
       display: flex;
       flex-direction: column;
@@ -1057,12 +1059,10 @@
         justify-content: flex-end;
         margin-top: $size-2;
       }
-
     }
   }
 }
 
-
 .onboarding-team {
   display: flex;
   min-width: 620px;
@@ -1104,8 +1104,10 @@
         margin-right: 13px;
       }
 
-      input { margin-bottom: unset; }
-      input[type=submit] {
+      input {
+        margin-bottom: unset;
+      }
+      input[type="submit"] {
       }
 
       .btn-primary {
@@ -1147,19 +1149,17 @@
         cursor: pointer;
       }
     }
-
   }
 }
 
-
-
 .questions-form {
   .modal-overlay {
     z-index: 2001;
   }
 
   .modal-container {
-    background-image: url("../images/deco-left.png"), url("../images/deco-right.png");
+    background-image: url("../images/deco-left.png"),
+      url("../images/deco-right.png");
     background-repeat: no-repeat;
     background-position: 10% 50px, 90% 50px;
     background-size: 65px;
@@ -1170,13 +1170,13 @@
     width: 100vw;
 
     .af-form {
-      --primary-color: #00C38B;
+      --primary-color: #00c38b;
       --input-background-color: #ffffff;
       --label-font-size: $fs16;
-      --field-error-font-color: #E65244;
-      --message-success-font-color: #49D793;
-      --message-fail-font-color: #E65244;
-      --invalid-field-border-color: #E65244;
+      --field-error-font-color: #e65244;
+      --message-success-font-color: #49d793;
+      --message-fail-font-color: #e65244;
+      --invalid-field-border-color: #e65244;
       --dropdown-background-color: #ffffff;
       --primary-font-color: #000;
       --input-border-color: rgb(224, 230, 240);
@@ -1184,15 +1184,25 @@
       --button-border-radius: 3px;
       --message-border-radius: 3px;
       --checkbox-border-radius: 3px;
-      --dropdown-option-background-color: rgba(0,195,139,1);
-      --dropdown-option-active-background-color: rgba(0,138,98,1);
-      --invalid-field-background-color: rgba(238.51780000000002,205.7178,204.11780000000002,1);
-      --message-fail-background-color: rgba(238.51780000000002,205.7178,204.11780000000002,1);
-      --message-success-background-color: rgba(171,232,197,1);
+      --dropdown-option-background-color: rgba(0, 195, 139, 1);
+      --dropdown-option-active-background-color: rgba(0, 138, 98, 1);
+      --invalid-field-background-color: rgba(
+        238.51780000000002,
+        205.7178,
+        204.11780000000002,
+        1
+      );
+      --message-fail-background-color: rgba(
+        238.51780000000002,
+        205.7178,
+        204.11780000000002,
+        1
+      );
+      --message-success-background-color: rgba(171, 232, 197, 1);
     }
   }
 
   .modal-overlay {
-    background-color: rgba(0,0,0,0.9);
+    background-color: rgba(0, 0, 0, 0.9);
   }
 }
diff --git a/frontend/resources/styles/main/partials/project-bar.scss b/frontend/resources/styles/main/partials/project-bar.scss
index 908dc03f9..e59d43c16 100644
--- a/frontend/resources/styles/main/partials/project-bar.scss
+++ b/frontend/resources/styles/main/partials/project-bar.scss
@@ -16,7 +16,7 @@
   z-index: 9;
 
   &.toggle {
-    left:-201px;
+    left: -201px;
   }
 
   .project-bar-inside {
@@ -37,13 +37,11 @@
     .btn-primary,
     .btn-warning {
       font-size: $fs12;
-      margin-bottom: .5rem;
+      margin-bottom: 0.5rem;
       padding: 8px $size-2;
       width: 90%;
     }
-
   }
-
 }
 
 .tree-view {
@@ -69,11 +67,9 @@
 
     &:hover,
     &.current {
-
       span {
         color: $color-primary;
       }
-
     }
 
     .options {
@@ -92,11 +88,7 @@
         &:hover {
           fill: $color-gray-40;
         }
-
       }
-
     }
-
   }
-
 }
diff --git a/frontend/resources/styles/main/partials/share-link.scss b/frontend/resources/styles/main/partials/share-link.scss
index bd59474e9..1dd9a5415 100644
--- a/frontend/resources/styles/main/partials/share-link.scss
+++ b/frontend/resources/styles/main/partials/share-link.scss
@@ -29,7 +29,6 @@
         font-size: $fs14;
 
         margin-bottom: 16px;
-
       }
       .actions {
         display: flex;
@@ -38,7 +37,6 @@
     }
   }
 
-
   .modal-content {
     padding: 26px;
 
@@ -60,7 +58,6 @@
       }
     }
 
-
     .share-link-section {
       margin-top: 12px;
       label {
@@ -93,7 +90,8 @@
         padding-left: 20px;
         display: flex;
 
-        > .input-checkbox, > .input-radio {
+        > .input-checkbox,
+        > .input-radio {
           display: flex;
           user-select: none;
 
diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss
index 7fdacb37b..eed7e64b3 100644
--- a/frontend/resources/styles/main/partials/sidebar-assets.scss
+++ b/frontend/resources/styles/main/partials/sidebar-assets.scss
@@ -217,11 +217,11 @@
       & svg {
         width: 0.7rem;
         height: 0.7rem;
-        fill: #F0F0F0;
+        fill: #f0f0f0;
       }
 
       &:hover svg {
-          fill: $color-primary;
+        fill: $color-primary;
       }
     }
 
@@ -359,8 +359,7 @@
       }
 
       .enum-item:hover,
-      .enum-item.selected,
-      {
+      .enum-item.selected {
         color: $color-primary;
       }
     }
@@ -405,7 +404,9 @@
       border-color: $color-black;
       background-color: $color-gray-60;
 
-      .input-text, .input-select, .adv-typography-name {
+      .input-text,
+      .input-select,
+      .adv-typography-name {
         background-color: $color-gray-60;
       }
     }
@@ -413,58 +414,57 @@
 }
 
 .modal-create-color {
-    position: relative;
-    background-color: $color-white;
-    padding: 4rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  position: relative;
+  background-color: $color-white;
+  padding: 4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-    & .sketch-picker, .chrome-picker {
-        box-shadow: none !important;
-        border: 1px solid $color-gray-10 !important;
-        border-radius: 0 !important;
+  & .sketch-picker,
+  .chrome-picker {
+    box-shadow: none !important;
+    border: 1px solid $color-gray-10 !important;
+    border-radius: 0 !important;
 
-        & input {
-            background-color: $color-white;
-        }
+    & input {
+      background-color: $color-white;
     }
+  }
 
-    & .close {
-        position: absolute;
-        right: 1rem;
-        transform: rotate(45deg);
-        top: 1rem;
+  & .close {
+    position: absolute;
+    right: 1rem;
+    transform: rotate(45deg);
+    top: 1rem;
 
-        svg {
-            fill: $color-black;
-            height: 20px;
-            width: 20px;
+    svg {
+      fill: $color-black;
+      height: 20px;
+      width: 20px;
 
-            &:hover {
-                fill: $color-danger;
-            }
-
-        }
+      &:hover {
+        fill: $color-danger;
+      }
     }
+  }
 
-    & .btn-primary {
-        width: 10rem;
-        padding: 0.5rem;
-        margin-top: 1rem;
-    }
+  & .btn-primary {
+    width: 10rem;
+    padding: 0.5rem;
+    margin-top: 1rem;
+  }
 }
 
 .modal-create-color-title {
-    color: $color-black;
-    font-size: 24px;
-    font-weight: normal;
+  color: $color-black;
+  font-size: 24px;
+  font-weight: normal;
 }
 
-
 .libraries-wrapper {
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 316c59e43..95dd6ef0c 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -34,11 +34,9 @@
       }
 
       &:hover {
-
         svg {
           fill: $color-primary;
         }
-
       }
 
       &.selected {
@@ -47,15 +45,12 @@
         svg {
           fill: $color-white;
         }
-
       }
 
       &:last-child {
         border: none;
       }
-
     }
-
   }
 
   .element-set {
@@ -85,14 +80,12 @@
       width: 100%;
 
       .list-icon {
-
         svg {
           fill: $color-gray-30;
           height: 15px;
           margin-right: $size-1;
           width: 15px;
         }
-
       }
 
       span {
@@ -111,7 +104,6 @@
         margin-left: auto;
 
         a {
-
           svg {
             fill: $color-gray-60;
             height: 15px;
@@ -121,59 +113,43 @@
             &:hover {
               fill: $color-gray-20;
             }
-
           }
-
         }
-
       }
 
       &:hover {
-
         .list-icon {
-
           svg {
             fill: $color-primary;
           }
-
         }
 
         span {
           color: $color-primary;
         }
-
       }
 
       &.selected {
-
         .list-icon {
-
           svg {
             fill: $color-primary;
           }
-
         }
 
         span {
           color: $color-primary;
           font-weight: bold;
         }
-
       }
-
     }
 
     &:hover {
-
       .list-actions {
         display: flex;
-        @include animation(0s,.3s,fadeIn);
+        @include animation(0s, 0.3s, fadeIn);
       }
-
     }
-
   }
-
 }
 
 .element-set-content {
@@ -272,7 +248,6 @@
       &:hover {
         fill: $color-primary;
       }
-
     }
 
     &.selected {
@@ -325,7 +300,6 @@
     &:hover {
       border: 1px solid $color-gray-20;
     }
-
   }
 
   .custom-select-dropdown {
@@ -426,8 +400,8 @@
     }
 
     input.input-text {
-        border: none;
-        background: none;
+      border: none;
+      background: none;
     }
 
     .input-select {
@@ -458,12 +432,11 @@
       height: 100%;
       display: flex;
       align-items: center;
-
     }
 
     &.input-option {
       height: 26px;
-      border-bottom: 1px solid #64666A;
+      border-bottom: 1px solid #64666a;
       width: 100%;
       margin-left: 0.25rem;
 
@@ -488,7 +461,7 @@
   }
 }
 
-.element-set-content .grid-option-main  {
+.element-set-content .grid-option-main {
   .editable-select {
     height: 2rem;
   }
@@ -598,20 +571,15 @@
 
     &:hover,
     &.current {
-
       svg {
         fill: $color-primary;
       }
-
     }
 
     &:last-child {
       margin-right: 0;
     }
-
   }
-
-
 }
 
 .element-color-picker {
@@ -640,9 +608,7 @@
       transition: none;
       top: 30%;
     }
-
   }
-
 }
 
 .radius-options {
@@ -751,7 +717,8 @@
     fill: $color-gray-20;
   }
 
-  &:hover svg, &.is-active svg {
+  &:hover svg,
+  &.is-active svg {
     fill: $color-primary;
   }
 }
@@ -797,7 +764,6 @@
   &:hover {
     background: $color-gray-60;
 
-
     .custom-select,
     .editable-select,
     input {
@@ -809,7 +775,7 @@
     min-width: 4.75rem;
     height: 2rem;
     border-color: transparent;
-    border-bottom: 1px solid #65666A;
+    border-bottom: 1px solid #65666a;
     max-height: 30px;
 
     &:hover {
@@ -898,7 +864,6 @@
   }
 }
 
-
 .element-set-options-group {
   display: flex;
   padding: 3px;
@@ -906,7 +871,7 @@
   border-radius: 4px;
 
   &:hover {
-    background: #1F1F1F;
+    background: #1f1f1f;
   }
 
   &.selected {
@@ -978,34 +943,34 @@
 }
 
 .shadow-options .color-row-wrap {
-    margin-left: 6px;
-    margin-top: 0.5rem;
+  margin-left: 6px;
+  margin-top: 0.5rem;
 }
 
 .element-set-actions-button {
-    display: flex;
-    min-width: 30px;
-    min-height: 30px;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    svg {
-        width: 12px;
-        height: 12px;
-        fill: $color-gray-20;
-        stroke: $color-gray-20;
-    }
+  display: flex;
+  min-width: 30px;
+  min-height: 30px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  svg {
+    width: 12px;
+    height: 12px;
+    fill: $color-gray-20;
+    stroke: $color-gray-20;
+  }
 
-    &:hover svg,
-    &.active svg {
-        fill: $color-primary;
-        stroke: $color-primary;
-    }
+  &:hover svg,
+  &.active svg {
+    fill: $color-primary;
+    stroke: $color-primary;
+  }
 
-    &.actions-inside {
-      position: absolute;
-      right: 0;
-    }
+  &.actions-inside {
+    position: absolute;
+    right: 0;
+  }
 }
 
 .element-set-label {
@@ -1015,8 +980,8 @@
 }
 
 .element-set-actions {
-    display: flex;
-    visibility: hidden;
+  display: flex;
+  visibility: hidden;
 }
 
 .row-flex-removable:hover .element-set-actions,
@@ -1029,44 +994,44 @@
 }
 
 .typography-entry {
-    margin: 0.5rem 0.3rem;
+  margin: 0.5rem 0.3rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .typography-selection-wrapper {
     display: flex;
     flex-direction: row;
     align-items: center;
+    flex: 1;
+    height: 100%;
 
-    .typography-selection-wrapper {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        flex: 1;
-        height: 100%;
-
-        &.is-selectable {
-            cursor: pointer;
-        }
+    &.is-selectable {
+      cursor: pointer;
     }
+  }
 
-    .typography-sample {
-        font-size: 17px;
-        color: $color-white;
-        margin: 0 0.5rem;
+  .typography-sample {
+    font-size: 17px;
+    color: $color-white;
+    margin: 0 0.5rem;
 
-        font-family: sourcesanspro;
-        font-style: normal;
-        font-weight: normal;
-    }
+    font-family: sourcesanspro;
+    font-style: normal;
+    font-weight: normal;
+  }
 
-    .typography-name {
-        flex-grow: 1;
-        font-size: 11px;
-        margin-top: 4px;
-        white-space: nowrap;
-    }
+  .typography-name {
+    flex-grow: 1;
+    font-size: 11px;
+    margin-top: 4px;
+    white-space: nowrap;
+  }
 
-    .element-set-actions-button svg {
-        width: 10px;
-        height: 10px;
-    }
+  .element-set-actions-button svg {
+    width: 10px;
+    height: 10px;
+  }
 }
 
 .spacing-options {
@@ -1075,75 +1040,75 @@
 }
 
 .asset-section {
-    .typography-entry {
-        margin: 0.25rem 0;
-    }
+  .typography-entry {
+    margin: 0.25rem 0;
+  }
 
-    .element-set-content .font-option,
-    .element-set-content .size-option {
-        margin: 0.5rem 0;
-    }
-    .element-set-content .variant-option {
-        margin-left: 0.5rem;
-    }
+  .element-set-content .font-option,
+  .element-set-content .size-option {
+    margin: 0.5rem 0;
+  }
+  .element-set-content .variant-option {
+    margin-left: 0.5rem;
+  }
 }
 
 .row-flex input.adv-typography-name {
-    font-size: 14px;
-    color: $color-gray-10;
-    width: 100%;
-    max-width: none;
-    margin: 0;
-    background-color: #303236;
-    border-top: none;
-    border-left: none;
-    border-right: none;
+  font-size: 14px;
+  color: $color-gray-10;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  background-color: #303236;
+  border-top: none;
+  border-left: none;
+  border-right: none;
 }
 
 .size-option .custom-select-dropdown {
-    cursor: pointer;
-    max-height: 16rem;
-    min-width: 6rem;
-    left: initial;
-    top: 0;
+  cursor: pointer;
+  max-height: 16rem;
+  min-width: 6rem;
+  left: initial;
+  top: 0;
 }
 
 .typography-read-only-data {
-    font-size: 12px;
-    color: $color-white;
+  font-size: 12px;
+  color: $color-white;
 
-    .typography-name {
-        font-size: 14px;
+  .typography-name {
+    font-size: 14px;
+  }
+
+  .row-flex {
+    padding: 0.5rem 0;
+  }
+
+  .label {
+    color: $color-gray-30;
+
+    &::after {
+      content: ":";
+      margin-right: 0.25rem;
     }
+  }
 
-    .row-flex {
-        padding: 0.5rem 0;
-    }
-
-    .label {
-        color: $color-gray-30;
-
-        &::after {
-            content: ':';
-            margin-right: 0.25rem;
-        }
-    }
-
-    .go-to-lib-button {
-        transition: border 0.3s, color 0.3s;
-        text-align: center;
-        background: $color-gray-50;
-        padding: 0.5rem;
-        border-radius: 2px;
-        cursor: pointer;
-        font-size: 14px;
-        margin-top: 1rem;
-
-        &:hover {
-            background: $color-primary;
-            color: $color-black;
-        }
+  .go-to-lib-button {
+    transition: border 0.3s, color 0.3s;
+    text-align: center;
+    background: $color-gray-50;
+    padding: 0.5rem;
+    border-radius: 2px;
+    cursor: pointer;
+    font-size: 14px;
+    margin-top: 1rem;
+
+    &:hover {
+      background: $color-primary;
+      color: $color-black;
     }
+  }
 }
 
 .multiple-typography {
@@ -1249,7 +1214,6 @@
           }
         }
       }
-
     }
 
     input {
@@ -1275,7 +1239,7 @@
       svg {
         width: 16px;
         height: 16px;
-        fill: $color-gray-20
+        fill: $color-gray-20;
       }
 
       &.active {
@@ -1315,7 +1279,9 @@
       background-color: $color-black;
       color: $color-primary;
 
-      .icon svg {fill: $color-primary;}
+      .icon svg {
+        fill: $color-primary;
+      }
     }
 
     &:hover {
@@ -1328,7 +1294,7 @@
       // justify-content: center;
       align-items: center;
       // border: 1px solid red;
-      width: $size-5
+      width: $size-5;
     }
 
     .label {
@@ -1371,7 +1337,7 @@
     align-items: center;
 
     &::after {
-      content: ' ';
+      content: " ";
       background-color: $color-gray-30;
     }
 
diff --git a/frontend/resources/styles/main/partials/sidebar-icons.scss b/frontend/resources/styles/main/partials/sidebar-icons.scss
index 8af2365f6..524064f82 100644
--- a/frontend/resources/styles/main/partials/sidebar-icons.scss
+++ b/frontend/resources/styles/main/partials/sidebar-icons.scss
@@ -14,7 +14,6 @@
     width: 100%;
     margin-bottom: 0;
   }
-
 }
 
 .figure-btn {
@@ -47,7 +46,5 @@
     svg {
       fill: $color-white;
     }
-
   }
-
 }
diff --git a/frontend/resources/styles/main/partials/sidebar-interactions.scss b/frontend/resources/styles/main/partials/sidebar-interactions.scss
index 7a4dcabf7..7a1dc3d93 100644
--- a/frontend/resources/styles/main/partials/sidebar-interactions.scss
+++ b/frontend/resources/styles/main/partials/sidebar-interactions.scss
@@ -95,7 +95,7 @@
       }
     }
 
-    & input[type=radio]:checked {
+    & input[type="radio"]:checked {
       & + label {
         &:before {
           background-color: $color-primary;
@@ -212,4 +212,3 @@
     }
   }
 }
-
diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss
index 19442c608..ce99e4633 100644
--- a/frontend/resources/styles/main/partials/sidebar-layers.scss
+++ b/frontend/resources/styles/main/partials/sidebar-layers.scss
@@ -42,7 +42,6 @@
 
     .element-icon,
     .element-actions {
-
       svg {
         fill: $color-gray-60;
       }
@@ -110,7 +109,6 @@
 }
 
 .element-list li.component {
-
   .element-list-body {
     span.element-name {
       color: $color-component;
@@ -228,9 +226,9 @@ span.element-name {
     &.selected {
       display: flex;
 
-        svg {
-          fill: $color-gray-20;
-        }
+      svg {
+        fill: $color-gray-20;
+      }
     }
   }
 }
@@ -254,7 +252,9 @@ span.element-name {
   }
 
   &.inverse {
-    svg { transform: rotate(270deg); }
+    svg {
+      transform: rotate(270deg);
+    }
   }
 
   &:hover {
@@ -265,8 +265,8 @@ span.element-name {
 }
 
 .icon-layer {
-    > svg {
-    background-color: rgba(255,255,255,.6);
+  > svg {
+    background-color: rgba(255, 255, 255, 0.6);
     border-radius: $br-small;
     flex-shrink: 0;
     fill: $color-black !important;
diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
index 57d82086d..3a14879f9 100644
--- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss
+++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
@@ -9,7 +9,6 @@
   flex: none !important;
 
   .element-list {
-
     li {
       align-items: center;
       display: flex;
@@ -17,14 +16,12 @@
       width: 100%;
 
       .page-icon {
-
         svg {
           fill: $color-gray-30;
           height: 13px;
           margin-right: $size-1;
           width: 13px;
         }
-
       }
 
       span {
@@ -42,23 +39,19 @@
         margin-left: auto;
 
         a {
-
           svg {
             fill: $color-gray-60;
             height: 15px;
             margin-left: $size-1;
             width: 15px;
           }
-
         }
-
       }
 
       &:hover {
         background-color: $color-primary;
 
         .page-icon {
-
           svg {
             fill: $color-gray-60;
           }
@@ -66,35 +59,27 @@
           span {
             color: $color-gray-60;
           }
-
         }
 
         .page-actions {
           display: flex;
         }
-
       }
 
       &.selected {
-
         .page-icon {
-
           svg {
             fill: $color-primary;
           }
-
         }
 
         span {
           color: $color-primary;
         }
-
       }
 
       &:hover {
-
         .page-icon {
-
           svg {
             fill: $color-gray-60;
           }
@@ -104,7 +89,6 @@
           color: $color-gray-60;
         }
       }
-
     }
 
     .element-list-body {
diff --git a/frontend/resources/styles/main/partials/sidebar-tools.scss b/frontend/resources/styles/main/partials/sidebar-tools.scss
index 2254f240b..c2c881790 100644
--- a/frontend/resources/styles/main/partials/sidebar-tools.scss
+++ b/frontend/resources/styles/main/partials/sidebar-tools.scss
@@ -37,7 +37,5 @@
     svg {
       fill: $color-white;
     }
-
   }
-
 }
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 17a3ef6fb..1de3a5264 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 $width-settings-bar: 16rem;
-  // This width is also used in update-viewport-size at frontend/src/app/main/data/workspace.cljs
+// This width is also used in update-viewport-size at frontend/src/app/main/data/workspace.cljs
 
 .settings-bar {
   background-color: $color-gray-50;
@@ -35,35 +35,34 @@ $width-settings-bar: 16rem;
     display: grid;
     grid-template-columns: 100%;
 
-    &[data-layout*='sitemap-pages'] {
-        grid-template-rows: auto;
+    &[data-layout*="sitemap-pages"] {
+      grid-template-rows: auto;
     }
 
-    &[data-layout*='layers'] {
-        grid-template-rows: auto 1fr;
+    &[data-layout*="layers"] {
+      grid-template-rows: auto 1fr;
     }
 
-    &[data-layout*='libraries'] {
-        grid-template-rows: auto 1fr;
+    &[data-layout*="libraries"] {
+      grid-template-rows: auto 1fr;
     }
 
-    &[data-layout*='layers'][data-layout*='sitemap-pages'] {
-        grid-template-rows: 11.5rem 1fr;
+    &[data-layout*="layers"][data-layout*="sitemap-pages"] {
+      grid-template-rows: 11.5rem 1fr;
     }
 
-    &[data-layout*='libraries'][data-layout*='sitemap-pages'] {
-        grid-template-rows: 11.5rem 1fr;
+    &[data-layout*="libraries"][data-layout*="sitemap-pages"] {
+      grid-template-rows: 11.5rem 1fr;
     }
 
-    &[data-layout*='layers'][data-layout*='libraries'] {
-        grid-template-rows: auto 30% 1fr;
+    &[data-layout*="layers"][data-layout*="libraries"] {
+      grid-template-rows: auto 30% 1fr;
     }
 
-    &[data-layout*='layers'][data-layout*='libraries'][data-layout*='sitemap-pages'] {
-        grid-template-rows: 11.5rem 25% 1fr;
+    &[data-layout*="layers"][data-layout*="libraries"][data-layout*="sitemap-pages"] {
+      grid-template-rows: 11.5rem 25% 1fr;
     }
 
-
     flex-direction: column;
     padding-top: 48px;
     height: 100%;
@@ -151,20 +150,17 @@ $width-settings-bar: 16rem;
           transform: rotate(45deg);
 
           &:hover {
-
             svg {
               fill: $color-danger;
             }
-
           }
-
         }
       }
     }
 
     .assets-bar .tool-window {
-        flex: none;
-        height: auto;
+      flex: none;
+      height: auto;
     }
   }
 }
@@ -199,11 +195,8 @@ $width-settings-bar: 16rem;
     padding-bottom: 1px;
 
     &.open {
-
       ul {
-
         li {
-
           .element-list-body {
             border-style: dashed;
           }
diff --git a/frontend/resources/styles/main/partials/tab-container.scss b/frontend/resources/styles/main/partials/tab-container.scss
index 1fd32a557..76417795a 100644
--- a/frontend/resources/styles/main/partials/tab-container.scss
+++ b/frontend/resources/styles/main/partials/tab-container.scss
@@ -1,44 +1,44 @@
-
 .tab-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
 
 .tab-container-tabs {
-    background: $color-gray-60;
-    cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    font-size: 12px;
-    height: 2.5rem;
-    padding: 0 0.25rem;
+  background: $color-gray-60;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: 12px;
+  height: 2.5rem;
+  padding: 0 0.25rem;
 }
 
 .tab-container-tab-title {
-    align-items: center;
-    background: $color-gray-60;
-    border-radius: 2px 2px 0px 0px;
-    color: $color-white;
-    display: flex;
-    justify-content: center;
-    margin: 0.5rem 0.25rem 0 0.25rem ;
-    width: 100%;
+  align-items: center;
+  background: $color-gray-60;
+  border-radius: 2px 2px 0px 0px;
+  color: $color-white;
+  display: flex;
+  justify-content: center;
+  margin: 0.5rem 0.25rem 0 0.25rem;
+  width: 100%;
 
-    &.current{
-        background: $color-gray-50;
-    }
+  &.current {
+    background: $color-gray-50;
+  }
 }
 
 .tab-container-content {
-    flex: 1;
-    height: 100%;
-    max-height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
+  flex: 1;
+  height: 100%;
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-.tab-element, .tab-element-content {
-    height: 100%;
+.tab-element,
+.tab-element-content {
+  height: 100%;
 }
diff --git a/frontend/resources/styles/main/partials/texts.scss b/frontend/resources/styles/main/partials/texts.scss
index a67fa3ea6..4b4a2f711 100644
--- a/frontend/resources/styles/main/partials/texts.scss
+++ b/frontend/resources/styles/main/partials/texts.scss
@@ -1,5 +1,6 @@
 foreignObject {
-  .text-editor, .rich-text {
+  .text-editor,
+  .rich-text {
     color: $color-black;
     height: 100%;
     white-space: pre-wrap;
@@ -59,4 +60,3 @@ foreignObject {
     }
   }
 }
-
diff --git a/frontend/resources/styles/main/partials/tool-bar.scss b/frontend/resources/styles/main/partials/tool-bar.scss
index a95de8606..e502d2168 100644
--- a/frontend/resources/styles/main/partials/tool-bar.scss
+++ b/frontend/resources/styles/main/partials/tool-bar.scss
@@ -33,25 +33,17 @@
         }
 
         &:hover {
-
           svg {
             fill: $color-white;
           }
-
         }
 
         &.current {
-
           svg {
             fill: $color-primary;
           }
-
         }
-
       }
-
     }
-
   }
-
 }
diff --git a/frontend/resources/styles/main/partials/user-settings.scss b/frontend/resources/styles/main/partials/user-settings.scss
index 1927291db..f7cdbfb29 100644
--- a/frontend/resources/styles/main/partials/user-settings.scss
+++ b/frontend/resources/styles/main/partials/user-settings.scss
@@ -93,7 +93,6 @@
     }
   }
 
-
   .settings-profile {
     .forms-container {
       margin-top: 80px;
@@ -126,7 +125,7 @@
         z-index: 14;
       }
 
-      input[type=file] {
+      input[type="file"] {
         width: 120px;
         height: 120px;
         position: absolute;
@@ -137,8 +136,12 @@
       }
 
       &:hover {
-        img {display: none;}
-        .update-overlay {opacity: 1};
+        img {
+          display: none;
+        }
+        .update-overlay {
+          opacity: 1;
+        }
       }
     }
   }
diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss
index 3a2b6a684..8f494fd43 100644
--- a/frontend/resources/styles/main/partials/viewer-header.scss
+++ b/frontend/resources/styles/main/partials/viewer-header.scss
@@ -1,7 +1,7 @@
 .viewer-header {
   align-items: center;
   background-color: $color-gray-50;
-  border-bottom: 1px solid  $color-gray-60;
+  border-bottom: 1px solid $color-gray-60;
   display: flex;
   height: 48px;
   padding: 0 $size-4 0 55px;
@@ -115,7 +115,8 @@
       }
     }
 
-    .breadcrumb, .current-frame {
+    .breadcrumb,
+    .current-frame {
       display: flex;
       position: relative;
 
diff --git a/frontend/resources/styles/main/partials/viewer-thumbnails.scss b/frontend/resources/styles/main/partials/viewer-thumbnails.scss
index d37c05bfd..29c7441c9 100644
--- a/frontend/resources/styles/main/partials/viewer-thumbnails.scss
+++ b/frontend/resources/styles/main/partials/viewer-thumbnails.scss
@@ -1,6 +1,6 @@
 .viewer-thumbnails {
   grid-row: 1 / span 1;
-  grid-column:  1 / span 1;
+  grid-column: 1 / span 1;
 
   background-color: $color-gray-50;
   overflow: hidden;
diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss
index 2b3034974..1e0c48f41 100644
--- a/frontend/resources/styles/main/partials/workspace-header.scss
+++ b/frontend/resources/styles/main/partials/workspace-header.scss
@@ -7,7 +7,7 @@
 .workspace-header {
   align-items: center;
   background-color: $color-gray-50;
-  border-bottom: 1px solid  $color-gray-60;
+  border-bottom: 1px solid $color-gray-60;
   display: flex;
   height: 48px;
   padding: $size-1 $size-4 $size-1 55px;
@@ -35,17 +35,13 @@
         fill: $color-gray-30;
         height: 30px;
         width: 28px;
-
       }
 
       &:hover {
-
         svg {
           fill: $color-primary;
         }
-
       }
-
     }
   }
 
@@ -116,19 +112,19 @@
         cursor: pointer;
 
         &:hover {
-            color: $color-primary;
+          color: $color-primary;
         }
       }
     }
 
     .file-name {
-        margin: 0;
-        padding: 0;
-        border: none;
-        border-bottom: 1px solid $color-gray-10;
-        background: $color-gray-50;
-        color: $color-gray-10;
-        margin-bottom: -1px;
+      margin: 0;
+      padding: 0;
+      border: none;
+      border-bottom: 1px solid $color-gray-10;
+      background: $color-gray-50;
+      color: $color-gray-10;
+      margin-bottom: -1px;
     }
   }
 
@@ -138,7 +134,7 @@
     left: 40px;
     width: 270px;
     z-index: 12;
-    @include animation(0,.2s,fadeInDown);
+    @include animation(0, 0.2s, fadeInDown);
 
     background-color: $color-white;
     border-radius: $br-small;
@@ -208,13 +204,21 @@
     display: flex;
 
     &.error {
-      .label { color: $color-danger; }
-      .icon svg { fill: $color-danger; }
+      .label {
+        color: $color-danger;
+      }
+      .icon svg {
+        fill: $color-danger;
+      }
     }
 
     &.pending {
-      .label { color: $color-warning; }
-      .icon svg { fill: $color-warning; }
+      .label {
+        color: $color-warning;
+      }
+      .icon svg {
+        fill: $color-warning;
+      }
     }
   }
 
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index a86ee3c4a..561be4c62 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -56,7 +56,6 @@
         height: 10px;
       }
     }
-
   }
 }
 
@@ -181,10 +180,10 @@
     .viewport-controls {
       position: absolute;
     }
-
   }
 
-  .page-canvas, .page-layout {
+  .page-canvas,
+  .page-layout {
     overflow: visible;
   }
 
@@ -224,7 +223,6 @@
       stroke: $color-gray-20;
     }
   }
-
 }
 
 .workspace-frame-label {
@@ -242,7 +240,7 @@
   font-family: worksans;
   padding: 2px 12px;
   border-radius: 4px;
-  display:flex;
+  display: flex;
   align-items: center;
   height: 20px;
   font-size: 12px;
@@ -335,4 +333,3 @@
     margin-right: 0;
   }
 }
-
diff --git a/frontend/resources/styles/main/partials/zoom-widget.scss b/frontend/resources/styles/main/partials/zoom-widget.scss
index 7aa2a646a..be6d3a704 100644
--- a/frontend/resources/styles/main/partials/zoom-widget.scss
+++ b/frontend/resources/styles/main/partials/zoom-widget.scss
@@ -42,7 +42,6 @@
       &:hover {
         background-color: $color-primary-lighter;
       }
-
     }
   }
 }