diff --git a/frontend/package.json b/frontend/package.json
index 51cf909c40..57df55eda4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,7 +48,6 @@
     "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
     "@types/node": "^20.11.20",
-    "animate.css": "^4.1.1",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
     "draft-js": "git+https://github.com/penpot/draft-js.git#commit=4a99b2a6020b2af97f6dc5fa1b4275ec16b559a0",
diff --git a/frontend/playwright.config.js b/frontend/playwright.config.js
index 646795fd2e..6196826df5 100644
--- a/frontend/playwright.config.js
+++ b/frontend/playwright.config.js
@@ -48,7 +48,7 @@ export default defineConfig({
       use: { ...devices["Desktop Chrome"] },
       testDir: "./playwright/ui/visual-specs",
       expect: {
-        toHaveScreenshot: { maxDiffPixelRatio: 0.01 },
+        toHaveScreenshot: { maxDiffPixelRatio: 0.005 },
       },
     },
   ],
diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index 8ca76c9cad..f764e045f2 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -4,13 +4,27 @@
 //
 // Copyright (c) KALEIDOS INC
 
+// TODO: Legacy sass vars. We should use DS tokens.
+$color-gray-50: #303236;
+$fs12: 0.75rem;
+$fs14: 0.875rem;
+$fs18: 1.125rem;
+$fs24: 1.5rem;
+$fs34: 2.125rem;
+$fs44: 2.75rem;
+$fw300: 300;
+$fw500: 500;
+$lh-115: 1.15;
+$lh-133: 1.33;
+$size-4: 1rem;
+
 :root {
   --font-family: "worksans", sans-serif;
 }
 
 body {
-  background-color: lighten($color-gray-10, 5%);
-  color: $color-gray-20;
+  background-color: var(--db-primary);
+  color: var(--df-primary);
   display: flex;
   flex-direction: column;
   font-family: var(--font-family);
@@ -29,27 +43,15 @@ body {
 * {
   box-sizing: border-box;
   scrollbar-width: thin;
-  // transition: all .4s ease;
 }
 
+// Firefox-only hack
 @-moz-document url-prefix() {
   * {
     scrollbar-width: auto;
   }
 }
 
-.global-zeroclipboard-container {
-  transition: none;
-
-  #global-zeroclipboard-flash-bridge {
-    transition: none;
-  }
-
-  object {
-    transition: none;
-  }
-}
-
 img {
   height: auto;
   width: 100%;
@@ -79,63 +81,26 @@ p {
   font-size: $fs12;
   margin-bottom: 1rem;
   line-height: $lh-133;
-
-  @include bp(baby-bear) {
-    font-size: $fs16;
-    line-height: $lh-143;
-  }
 }
 
 li {
   line-height: $lh-133;
-
-  @include bp(baby-bear) {
-    line-height: $lh-143;
-  }
 }
 
 ul {
   margin-bottom: 1rem;
 }
 
-strong {
-  font-weight: $fw700;
-}
-
-.relative {
-  position: relative;
-}
-
 h1 {
   font-size: $fs34;
   font-weight: $fw500;
   line-height: $lh-115;
-
-  @include bp(baby-bear) {
-    font-size: $fs38;
-    line-height: $lh-125;
-  }
-
-  &.supertitle {
-    font-size: $fs44;
-    font-weight: $fw300;
-    line-height: $lh-115;
-
-    @include bp(baby-bear) {
-      font-size: $fs44;
-      line-height: $lh-125;
-    }
-  }
 }
+
 h2 {
   font-size: $fs24;
   font-weight: $fw300;
   line-height: $lh-115;
-
-  @include bp(baby-bear) {
-    font-size: $fs32;
-    line-height: $lh-125;
-  }
 }
 
 h3 {
@@ -149,106 +114,8 @@ h4 {
   font-weight: $fw300;
 }
 
-@-webkit-keyframes rotation {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(359deg);
-  }
-}
-
-@-webkit-keyframes rotation-negative {
-  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;
-  }
-}
-
-@keyframes show {
-  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;
-  }
-}
-
-.hide {
-  display: none !important;
-  transition: all 0.5s ease;
-}
-
-.visuallyHidden {
-  opacity: 0 !important;
-  transition: all 0.5s ease;
-}
-
-.show {
-  animation: show 0.4s linear;
-  display: block !important;
-}
-
-.center {
-  margin: 0 auto;
-  text-align: center;
-}
-
-.hidden-input {
-  display: none;
-}
-
-.bold {
-  font-weight: $fw700 !important;
-}
-
-.nopd {
-  padding: 0 !important;
-}
-
-.move-cursor {
-  cursor: move;
-}
-
 hr {
-  border-top: solid 1px $color-gray-60;
+  border-top: solid 1px var(--db-primary);
   border-right: 0;
   border-left: 0;
   border-bottom: 0;
@@ -270,7 +137,22 @@ input[type="number"] {
   user-select: text;
 }
 
-[data-hidden="true"] {
-  display: none;
-  pointer-events: none;
+input,
+select {
+  box-sizing: border-box;
+  font-family: "worksans", sans-serif;
+  font-size: $fs14;
+  margin-bottom: $size-4;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+[draggable] {
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  /* Required to make elements draggable in old WebKit */
+  -khtml-user-drag: element;
+  -webkit-user-drag: element;
 }
diff --git a/frontend/resources/styles/common/dependencies/animations.scss b/frontend/resources/styles/common/dependencies/animations.scss
index 8b9a0fb031..ea30c21e10 100644
--- a/frontend/resources/styles/common/dependencies/animations.scss
+++ b/frontend/resources/styles/common/dependencies/animations.scss
@@ -6,23 +6,6 @@
  * 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;
-
-  -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;
-}
-
 .animated {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
@@ -30,1228 +13,6 @@
   animation-fill-mode: both;
 }
 
-.animated.infinite {
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-
-.animated.hinge {
-  -webkit-animation-duration: 2s;
-  animation-duration: 2s;
-}
-
-.animated.bounceIn,
-.animated.bounceOut {
-  -webkit-animation-duration: 0.75s;
-  animation-duration: 0.75s;
-}
-
-.animated.flipOutX,
-.animated.flipOutY {
-  -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.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.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.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);
-  }
-}
-
-@keyframes bounce {
-  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.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.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);
-  }
-}
-
-.bounce {
-  -webkit-animation-name: bounce;
-  animation-name: bounce;
-  -webkit-transform-origin: center bottom;
-  transform-origin: center bottom;
-}
-
-@-webkit-keyframes flash {
-  0%,
-  50%,
-  100% {
-    opacity: 1;
-  }
-
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-
-@keyframes flash {
-  0%,
-  50%,
-  100% {
-    opacity: 1;
-  }
-
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-
-.flash {
-  -webkit-animation-name: flash;
-  animation-name: flash;
-}
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@-webkit-keyframes pulse {
-  0% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    -webkit-transform: scale3d(1.05, 1.05, 1.05);
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-
-  100% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes pulse {
-  0% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    -webkit-transform: scale3d(1.05, 1.05, 1.05);
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-
-  100% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.pulse {
-  -webkit-animation-name: pulse;
-  animation-name: pulse;
-}
-
-@-webkit-keyframes rubberBand {
-  0% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  30% {
-    -webkit-transform: scale3d(1.25, 0.75, 1);
-    transform: scale3d(1.25, 0.75, 1);
-  }
-
-  40% {
-    -webkit-transform: scale3d(0.75, 1.25, 1);
-    transform: scale3d(0.75, 1.25, 1);
-  }
-
-  50% {
-    -webkit-transform: scale3d(1.15, 0.85, 1);
-    transform: scale3d(1.15, 0.85, 1);
-  }
-
-  65% {
-    -webkit-transform: scale3d(0.95, 1.05, 1);
-    transform: scale3d(0.95, 1.05, 1);
-  }
-
-  75% {
-    -webkit-transform: scale3d(1.05, 0.95, 1);
-    transform: scale3d(1.05, 0.95, 1);
-  }
-
-  100% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes rubberBand {
-  0% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  30% {
-    -webkit-transform: scale3d(1.25, 0.75, 1);
-    transform: scale3d(1.25, 0.75, 1);
-  }
-
-  40% {
-    -webkit-transform: scale3d(0.75, 1.25, 1);
-    transform: scale3d(0.75, 1.25, 1);
-  }
-
-  50% {
-    -webkit-transform: scale3d(1.15, 0.85, 1);
-    transform: scale3d(1.15, 0.85, 1);
-  }
-
-  65% {
-    -webkit-transform: scale3d(0.95, 1.05, 1);
-    transform: scale3d(0.95, 1.05, 1);
-  }
-
-  75% {
-    -webkit-transform: scale3d(1.05, 0.95, 1);
-    transform: scale3d(1.05, 0.95, 1);
-  }
-
-  100% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.rubberBand {
-  -webkit-animation-name: rubberBand;
-  animation-name: rubberBand;
-}
-
-@-webkit-keyframes shake {
-  0%,
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translate3d(-10px, 0, 0);
-    transform: translate3d(-10px, 0, 0);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translate3d(10px, 0, 0);
-    transform: translate3d(10px, 0, 0);
-  }
-}
-
-@keyframes shake {
-  0%,
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translate3d(-10px, 0, 0);
-    transform: translate3d(-10px, 0, 0);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translate3d(10px, 0, 0);
-    transform: translate3d(10px, 0, 0);
-  }
-}
-
-.shake {
-  -webkit-animation-name: shake;
-  animation-name: shake;
-}
-
-@-webkit-keyframes swing {
-  20% {
-    -webkit-transform: rotate3d(0, 0, 1, 15deg);
-    transform: rotate3d(0, 0, 1, 15deg);
-  }
-
-  40% {
-    -webkit-transform: rotate3d(0, 0, 1, -10deg);
-    transform: rotate3d(0, 0, 1, -10deg);
-  }
-
-  60% {
-    -webkit-transform: rotate3d(0, 0, 1, 5deg);
-    transform: rotate3d(0, 0, 1, 5deg);
-  }
-
-  80% {
-    -webkit-transform: rotate3d(0, 0, 1, -5deg);
-    transform: rotate3d(0, 0, 1, -5deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0, 0, 1, 0deg);
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-}
-
-@keyframes swing {
-  20% {
-    -webkit-transform: rotate3d(0, 0, 1, 15deg);
-    transform: rotate3d(0, 0, 1, 15deg);
-  }
-
-  40% {
-    -webkit-transform: rotate3d(0, 0, 1, -10deg);
-    transform: rotate3d(0, 0, 1, -10deg);
-  }
-
-  60% {
-    -webkit-transform: rotate3d(0, 0, 1, 5deg);
-    transform: rotate3d(0, 0, 1, 5deg);
-  }
-
-  80% {
-    -webkit-transform: rotate3d(0, 0, 1, -5deg);
-    transform: rotate3d(0, 0, 1, -5deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0, 0, 1, 0deg);
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-}
-
-.swing {
-  -webkit-transform-origin: top center;
-  transform-origin: top center;
-  -webkit-animation-name: swing;
-  animation-name: swing;
-}
-
-@-webkit-keyframes tada {
-  0% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  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% {
-    -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% {
-    -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);
-  }
-
-  100% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes tada {
-  0% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-
-  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% {
-    -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% {
-    -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);
-  }
-
-  100% {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.tada {
-  -webkit-animation-name: tada;
-  animation-name: tada;
-}
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@-webkit-keyframes wobble {
-  0% {
-    -webkit-transform: none;
-    transform: none;
-  }
-
-  15% {
-    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-  }
-
-  30% {
-    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-  }
-
-  45% {
-    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-  }
-
-  60% {
-    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-  }
-
-  75% {
-    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes wobble {
-  0% {
-    -webkit-transform: none;
-    transform: none;
-  }
-
-  15% {
-    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-  }
-
-  30% {
-    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-  }
-
-  45% {
-    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-  }
-
-  60% {
-    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-  }
-
-  75% {
-    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.wobble {
-  -webkit-animation-name: wobble;
-  animation-name: wobble;
-}
-
-@-webkit-keyframes jello {
-  11.1% {
-    -webkit-transform: none;
-    transform: none;
-  }
-
-  22.2% {
-    -webkit-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);
-  }
-  44.4% {
-    -webkit-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);
-  }
-  66.6% {
-    -webkit-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);
-  }
-  88.8% {
-    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-  }
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes jello {
-  11.1% {
-    -webkit-transform: none;
-    transform: none;
-  }
-
-  22.2% {
-    -webkit-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);
-  }
-  44.4% {
-    -webkit-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);
-  }
-  66.6% {
-    -webkit-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);
-  }
-  88.8% {
-    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-  }
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.jello {
-  -webkit-animation-name: jello;
-  animation-name: jello;
-  -webkit-transform-origin: center;
-
-  transform-origin: center;
-}
-
-@-webkit-keyframes bounceIn {
-  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(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  20% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  40% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.03, 1.03, 1.03);
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-
-  80% {
-    -webkit-transform: scale3d(0.97, 0.97, 0.97);
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes bounceIn {
-  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(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  20% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  40% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.03, 1.03, 1.03);
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-
-  80% {
-    -webkit-transform: scale3d(0.97, 0.97, 0.97);
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.bounceIn {
-  -webkit-animation-name: bounceIn;
-  animation-name: bounceIn;
-}
-
-@-webkit-keyframes bounceInDown {
-  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% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -3000px, 0);
-    transform: translate3d(0, -3000px, 0);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 25px, 0);
-    transform: translate3d(0, 25px, 0);
-  }
-
-  75% {
-    -webkit-transform: translate3d(0, -10px, 0);
-    transform: translate3d(0, -10px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, 5px, 0);
-    transform: translate3d(0, 5px, 0);
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes bounceInDown {
-  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% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -3000px, 0);
-    transform: translate3d(0, -3000px, 0);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 25px, 0);
-    transform: translate3d(0, 25px, 0);
-  }
-
-  75% {
-    -webkit-transform: translate3d(0, -10px, 0);
-    transform: translate3d(0, -10px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, 5px, 0);
-    transform: translate3d(0, 5px, 0);
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.bounceInDown {
-  -webkit-animation-name: bounceInDown;
-  animation-name: bounceInDown;
-}
-
-@-webkit-keyframes bounceInLeft {
-  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% {
-    opacity: 0;
-    -webkit-transform: translate3d(-3000px, 0, 0);
-    transform: translate3d(-3000px, 0, 0);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(25px, 0, 0);
-    transform: translate3d(25px, 0, 0);
-  }
-
-  75% {
-    -webkit-transform: translate3d(-10px, 0, 0);
-    transform: translate3d(-10px, 0, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(5px, 0, 0);
-    transform: translate3d(5px, 0, 0);
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes bounceInLeft {
-  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% {
-    opacity: 0;
-    -webkit-transform: translate3d(-3000px, 0, 0);
-    transform: translate3d(-3000px, 0, 0);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(25px, 0, 0);
-    transform: translate3d(25px, 0, 0);
-  }
-
-  75% {
-    -webkit-transform: translate3d(-10px, 0, 0);
-    transform: translate3d(-10px, 0, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(5px, 0, 0);
-    transform: translate3d(5px, 0, 0);
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.bounceInLeft {
-  -webkit-animation-name: bounceInLeft;
-  animation-name: bounceInLeft;
-}
-
-@-webkit-keyframes bounceInRight {
-  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% {
-    opacity: 0;
-    -webkit-transform: translate3d(3000px, 0, 0);
-    transform: translate3d(3000px, 0, 0);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(-25px, 0, 0);
-    transform: translate3d(-25px, 0, 0);
-  }
-
-  75% {
-    -webkit-transform: translate3d(10px, 0, 0);
-    transform: translate3d(10px, 0, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(-5px, 0, 0);
-    transform: translate3d(-5px, 0, 0);
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes bounceInRight {
-  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% {
-    opacity: 0;
-    -webkit-transform: translate3d(3000px, 0, 0);
-    transform: translate3d(3000px, 0, 0);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(-25px, 0, 0);
-    transform: translate3d(-25px, 0, 0);
-  }
-
-  75% {
-    -webkit-transform: translate3d(10px, 0, 0);
-    transform: translate3d(10px, 0, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(-5px, 0, 0);
-    transform: translate3d(-5px, 0, 0);
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.bounceInRight {
-  -webkit-animation-name: bounceInRight;
-  animation-name: bounceInRight;
-}
-
-@-webkit-keyframes bounceInUp {
-  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% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 3000px, 0);
-    transform: translate3d(0, 3000px, 0);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0);
-    transform: translate3d(0, -20px, 0);
-  }
-
-  75% {
-    -webkit-transform: translate3d(0, 10px, 0);
-    transform: translate3d(0, 10px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -5px, 0);
-    transform: translate3d(0, -5px, 0);
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes bounceInUp {
-  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% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 3000px, 0);
-    transform: translate3d(0, 3000px, 0);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0);
-    transform: translate3d(0, -20px, 0);
-  }
-
-  75% {
-    -webkit-transform: translate3d(0, 10px, 0);
-    transform: translate3d(0, 10px, 0);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -5px, 0);
-    transform: translate3d(0, -5px, 0);
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.bounceInUp {
-  -webkit-animation-name: bounceInUp;
-  animation-name: bounceInUp;
-}
-
-@-webkit-keyframes bounceOut {
-  20% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  50%,
-  55% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-}
-
-@keyframes bounceOut {
-  20% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  50%,
-  55% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-}
-
-.bounceOut {
-  -webkit-animation-name: bounceOut;
-  animation-name: bounceOut;
-}
-
-@-webkit-keyframes bounceOutDown {
-  20% {
-    -webkit-transform: translate3d(0, 10px, 0);
-    transform: translate3d(0, 10px, 0);
-  }
-
-  40%,
-  45% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0);
-    transform: translate3d(0, -20px, 0);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-}
-
-@keyframes bounceOutDown {
-  20% {
-    -webkit-transform: translate3d(0, 10px, 0);
-    transform: translate3d(0, 10px, 0);
-  }
-
-  40%,
-  45% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0);
-    transform: translate3d(0, -20px, 0);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-}
-
-.bounceOutDown {
-  -webkit-animation-name: bounceOutDown;
-  animation-name: bounceOutDown;
-}
-
-@-webkit-keyframes bounceOutLeft {
-  20% {
-    opacity: 1;
-    -webkit-transform: translate3d(20px, 0, 0);
-    transform: translate3d(20px, 0, 0);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-}
-
-@keyframes bounceOutLeft {
-  20% {
-    opacity: 1;
-    -webkit-transform: translate3d(20px, 0, 0);
-    transform: translate3d(20px, 0, 0);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-}
-
-.bounceOutLeft {
-  -webkit-animation-name: bounceOutLeft;
-  animation-name: bounceOutLeft;
-}
-
-@-webkit-keyframes bounceOutRight {
-  20% {
-    opacity: 1;
-    -webkit-transform: translate3d(-20px, 0, 0);
-    transform: translate3d(-20px, 0, 0);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-}
-
-@keyframes bounceOutRight {
-  20% {
-    opacity: 1;
-    -webkit-transform: translate3d(-20px, 0, 0);
-    transform: translate3d(-20px, 0, 0);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-}
-
-.bounceOutRight {
-  -webkit-animation-name: bounceOutRight;
-  animation-name: bounceOutRight;
-}
-
-@-webkit-keyframes bounceOutUp {
-  20% {
-    -webkit-transform: translate3d(0, -10px, 0);
-    transform: translate3d(0, -10px, 0);
-  }
-
-  40%,
-  45% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 20px, 0);
-    transform: translate3d(0, 20px, 0);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-}
-
-@keyframes bounceOutUp {
-  20% {
-    -webkit-transform: translate3d(0, -10px, 0);
-    transform: translate3d(0, -10px, 0);
-  }
-
-  40%,
-  45% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 20px, 0);
-    transform: translate3d(0, 20px, 0);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-}
-
-.bounceOutUp {
-  -webkit-animation-name: bounceOutUp;
-  animation-name: bounceOutUp;
-}
-
 @-webkit-keyframes fadeIn {
   0% {
     opacity: 0;
@@ -1310,2125 +71,19 @@
   animation-name: fadeInDown;
 }
 
-@-webkit-keyframes fadeInDownBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes fadeInDownBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.fadeInDownBig {
-  -webkit-animation-name: fadeInDownBig;
-  animation-name: fadeInDownBig;
-}
-
-@-webkit-keyframes fadeInLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes fadeInLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.fadeInLeft {
-  -webkit-animation-name: fadeInLeft;
-  animation-name: fadeInLeft;
-}
-
-@-webkit-keyframes fadeInLeftBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes fadeInLeftBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.fadeInLeftBig {
-  -webkit-animation-name: fadeInLeftBig;
-  animation-name: fadeInLeftBig;
-}
-
-@-webkit-keyframes fadeInRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes fadeInRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.fadeInRight {
-  -webkit-animation-name: fadeInRight;
-  animation-name: fadeInRight;
-}
-
-@-webkit-keyframes fadeInRightBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes fadeInRightBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.fadeInRightBig {
-  -webkit-animation-name: fadeInRightBig;
-  animation-name: fadeInRightBig;
-}
-
-@-webkit-keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    max-height: 0px;
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.fadeInUp {
-  -webkit-animation-name: fadeInUp;
-  animation-name: fadeInUp;
-}
-
-@-webkit-keyframes fadeInUpBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes fadeInUpBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.fadeInUpBig {
-  -webkit-animation-name: fadeInUpBig;
-  animation-name: fadeInUpBig;
-}
-
-@-webkit-keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.fadeOut {
-  -webkit-animation-name: fadeOut;
-  animation-name: fadeOut;
-}
-
-@-webkit-keyframes fadeOutDown {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-@keyframes fadeOutDown {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    max-height: 0px;
-  }
-}
-
-.fadeOutDown {
-  -webkit-animation-name: fadeOutDown;
-  animation-name: fadeOutDown;
-}
-
-@-webkit-keyframes fadeOutDownBig {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-}
-
-@keyframes fadeOutDownBig {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-}
-
-.fadeOutDownBig {
-  -webkit-animation-name: fadeOutDownBig;
-  animation-name: fadeOutDownBig;
-}
-
-@-webkit-keyframes fadeOutLeft {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-@keyframes fadeOutLeft {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-.fadeOutLeft {
-  -webkit-animation-name: fadeOutLeft;
-  animation-name: fadeOutLeft;
-}
-
-@-webkit-keyframes fadeOutLeftBig {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-}
-
-@keyframes fadeOutLeftBig {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-}
-
-.fadeOutLeftBig {
-  -webkit-animation-name: fadeOutLeftBig;
-  animation-name: fadeOutLeftBig;
-}
-
-@-webkit-keyframes fadeOutRight {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-@keyframes fadeOutRight {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-.fadeOutRight {
-  -webkit-animation-name: fadeOutRight;
-  animation-name: fadeOutRight;
-}
-
-@-webkit-keyframes fadeOutRightBig {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-}
-
-@keyframes fadeOutRightBig {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-}
-
-.fadeOutRightBig {
-  -webkit-animation-name: fadeOutRightBig;
-  animation-name: fadeOutRightBig;
-}
-
-@-webkit-keyframes fadeOutUp {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-@keyframes fadeOutUp {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-.fadeOutUp {
-  -webkit-animation-name: fadeOutUp;
-  animation-name: fadeOutUp;
-}
-
-@-webkit-keyframes fadeOutUpBig {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-}
-
-@keyframes fadeOutUpBig {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-}
-
-.fadeOutUpBig {
-  -webkit-animation-name: fadeOutUpBig;
-  animation-name: fadeOutUpBig;
-}
-
-@-webkit-keyframes flip {
-  0% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-
-  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-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-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-
-  80% {
-    -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;
-  }
-
-  100% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-}
-
-@keyframes flip {
-  0% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-
-  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-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-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-
-  80% {
-    -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;
-  }
-
-  100% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-}
-
-.animated.flip {
-  -webkit-backface-visibility: visible;
-  backface-visibility: visible;
-  -webkit-animation-name: flip;
-  animation-name: flip;
-}
-
-@-webkit-keyframes flipInX {
-  0% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-
-  60% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-
-  100% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-}
-
-@keyframes flipInX {
-  0% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-
-  60% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-
-  100% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-}
-
-.flipInX {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-name: flipInX;
-  animation-name: flipInX;
-}
-
-@-webkit-keyframes flipInY {
-  0% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-
-  60% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-  }
-
-  100% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-}
-
-@keyframes flipInY {
-  0% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-
-  60% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-  }
-
-  100% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-}
-
-.flipInY {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-name: flipInY;
-  animation-name: flipInY;
-}
-
-@-webkit-keyframes flipOutX {
-  0% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-
-  30% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes flipOutX {
-  0% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-
-  30% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    opacity: 0;
-  }
-}
-
-.flipOutX {
-  -webkit-animation-name: flipOutX;
-  animation-name: flipOutX;
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-}
-
-@-webkit-keyframes flipOutY {
-  0% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-
-  30% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes flipOutY {
-  0% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-
-  30% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    opacity: 0;
-  }
-}
-
-.flipOutY {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-name: flipOutY;
-  animation-name: flipOutY;
-}
-
-@-webkit-keyframes lightSpeedIn {
-  0% {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
-    transform: translate3d(100%, 0, 0) skewX(-30deg);
-    opacity: 0;
-  }
-
-  60% {
-    -webkit-transform: skewX(20deg);
-    transform: skewX(20deg);
-    opacity: 1;
-  }
-
-  80% {
-    -webkit-transform: skewX(-5deg);
-    transform: skewX(-5deg);
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-@keyframes lightSpeedIn {
-  0% {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
-    transform: translate3d(100%, 0, 0) skewX(-30deg);
-    opacity: 0;
-  }
-
-  60% {
-    -webkit-transform: skewX(20deg);
-    transform: skewX(20deg);
-    opacity: 1;
-  }
-
-  80% {
-    -webkit-transform: skewX(-5deg);
-    transform: skewX(-5deg);
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.lightSpeedIn {
-  -webkit-animation-name: lightSpeedIn;
-  animation-name: lightSpeedIn;
-  -webkit-animation-timing-function: ease-out;
-  animation-timing-function: ease-out;
-}
-
-@-webkit-keyframes lightSpeedOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
-    transform: translate3d(100%, 0, 0) skewX(30deg);
-    opacity: 0;
-  }
-}
-
-@keyframes lightSpeedOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
-    transform: translate3d(100%, 0, 0) skewX(30deg);
-    opacity: 0;
-  }
-}
-
-.lightSpeedOut {
-  -webkit-animation-name: lightSpeedOut;
-  animation-name: lightSpeedOut;
-  -webkit-animation-timing-function: ease-in;
-  animation-timing-function: ease-in;
-}
-
-@-webkit-keyframes rotateIn {
-  0% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate3d(0, 0, 1, -200deg);
-    transform: rotate3d(0, 0, 1, -200deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-@keyframes rotateIn {
-  0% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate3d(0, 0, 1, -200deg);
-    transform: rotate3d(0, 0, 1, -200deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateIn {
-  -webkit-animation-name: rotateIn;
-  animation-name: rotateIn;
-}
-
-@-webkit-keyframes rotateInDownLeft {
-  0% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: rotate3d(0, 0, 1, -45deg);
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-@keyframes rotateInDownLeft {
-  0% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: rotate3d(0, 0, 1, -45deg);
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateInDownLeft {
-  -webkit-animation-name: rotateInDownLeft;
-  animation-name: rotateInDownLeft;
-}
-
-@-webkit-keyframes rotateInDownRight {
-  0% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate3d(0, 0, 1, 45deg);
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-@keyframes rotateInDownRight {
-  0% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate3d(0, 0, 1, 45deg);
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateInDownRight {
-  -webkit-animation-name: rotateInDownRight;
-  animation-name: rotateInDownRight;
-}
-
-@-webkit-keyframes rotateInUpLeft {
-  0% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: rotate3d(0, 0, 1, 45deg);
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-@keyframes rotateInUpLeft {
-  0% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: rotate3d(0, 0, 1, 45deg);
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateInUpLeft {
-  -webkit-animation-name: rotateInUpLeft;
-  animation-name: rotateInUpLeft;
-}
-
-@-webkit-keyframes rotateInUpRight {
-  0% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate3d(0, 0, 1, -90deg);
-    transform: rotate3d(0, 0, 1, -90deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-@keyframes rotateInUpRight {
-  0% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate3d(0, 0, 1, -90deg);
-    transform: rotate3d(0, 0, 1, -90deg);
-    opacity: 0;
-  }
-
-  100% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: none;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateInUpRight {
-  -webkit-animation-name: rotateInUpRight;
-  animation-name: rotateInUpRight;
-}
-
-@-webkit-keyframes rotateOut {
-  0% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate3d(0, 0, 1, 200deg);
-    transform: rotate3d(0, 0, 1, 200deg);
-    opacity: 0;
-  }
-}
-
-@keyframes rotateOut {
-  0% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate3d(0, 0, 1, 200deg);
-    transform: rotate3d(0, 0, 1, 200deg);
-    opacity: 0;
-  }
-}
-
-.rotateOut {
-  -webkit-animation-name: rotateOut;
-  animation-name: rotateOut;
-}
-
-@-webkit-keyframes rotateOutDownLeft {
-  0% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: rotate3d(0, 0, 1, 45deg);
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-}
-
-@keyframes rotateOutDownLeft {
-  0% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: rotate3d(0, 0, 1, 45deg);
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutDownLeft {
-  -webkit-animation-name: rotateOutDownLeft;
-  animation-name: rotateOutDownLeft;
-}
-
-@-webkit-keyframes rotateOutDownRight {
-  0% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate3d(0, 0, 1, -45deg);
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-}
-
-@keyframes rotateOutDownRight {
-  0% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate3d(0, 0, 1, -45deg);
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutDownRight {
-  -webkit-animation-name: rotateOutDownRight;
-  animation-name: rotateOutDownRight;
-}
-
-@-webkit-keyframes rotateOutUpLeft {
-  0% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: rotate3d(0, 0, 1, -45deg);
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-}
-
-@keyframes rotateOutUpLeft {
-  0% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: left bottom;
-    transform-origin: left bottom;
-    -webkit-transform: rotate3d(0, 0, 1, -45deg);
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutUpLeft {
-  -webkit-animation-name: rotateOutUpLeft;
-  animation-name: rotateOutUpLeft;
-}
-
-@-webkit-keyframes rotateOutUpRight {
-  0% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate3d(0, 0, 1, 90deg);
-    transform: rotate3d(0, 0, 1, 90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes rotateOutUpRight {
-  0% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate3d(0, 0, 1, 90deg);
-    transform: rotate3d(0, 0, 1, 90deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutUpRight {
-  -webkit-animation-name: rotateOutUpRight;
-  animation-name: rotateOutUpRight;
-}
-
-@-webkit-keyframes hinge {
-  0% {
-    -webkit-transform-origin: top left;
-    transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-
-  20%,
-  60% {
-    -webkit-transform: rotate3d(0, 0, 1, 80deg);
-    transform: rotate3d(0, 0, 1, 80deg);
-    -webkit-transform-origin: top left;
-    transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-
-  40%,
-  80% {
-    -webkit-transform: rotate3d(0, 0, 1, 60deg);
-    transform: rotate3d(0, 0, 1, 60deg);
-    -webkit-transform-origin: top left;
-    transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 700px, 0);
-    transform: translate3d(0, 700px, 0);
-    opacity: 0;
-  }
-}
-
-@keyframes hinge {
-  0% {
-    -webkit-transform-origin: top left;
-    transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-
-  20%,
-  60% {
-    -webkit-transform: rotate3d(0, 0, 1, 80deg);
-    transform: rotate3d(0, 0, 1, 80deg);
-    -webkit-transform-origin: top left;
-    transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-
-  40%,
-  80% {
-    -webkit-transform: rotate3d(0, 0, 1, 60deg);
-    transform: rotate3d(0, 0, 1, 60deg);
-    -webkit-transform-origin: top left;
-    transform-origin: top left;
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 700px, 0);
-    transform: translate3d(0, 700px, 0);
-    opacity: 0;
-  }
-}
-
-.hinge {
-  -webkit-animation-name: hinge;
-  animation-name: hinge;
-}
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@-webkit-keyframes rollIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes rollIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-.rollIn {
-  -webkit-animation-name: rollIn;
-  animation-name: rollIn;
-}
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@-webkit-keyframes rollOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-  }
-}
-
-@keyframes rollOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-  }
-}
-
-.rollOut {
-  -webkit-animation-name: rollOut;
-  animation-name: rollOut;
-}
-
-@-webkit-keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-.zoomIn {
-  -webkit-animation-name: zoomIn;
-  animation-name: zoomIn;
-}
-
-@-webkit-keyframes zoomInDown {
-  0% {
-    opacity: 0;
-    -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(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(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(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);
-  }
-}
-
-.zoomInDown {
-  -webkit-animation-name: zoomInDown;
-  animation-name: zoomInDown;
-}
-
-@-webkit-keyframes zoomInLeft {
-  0% {
-    opacity: 0;
-    -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(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(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(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);
-  }
-}
-
-.zoomInLeft {
-  -webkit-animation-name: zoomInLeft;
-  animation-name: zoomInLeft;
-}
-
-@-webkit-keyframes zoomInRight {
-  0% {
-    opacity: 0;
-    -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(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(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(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);
-  }
-}
-
-.zoomInRight {
-  -webkit-animation-name: zoomInRight;
-  animation-name: zoomInRight;
-}
-
-@-webkit-keyframes zoomInUp {
-  0% {
-    opacity: 0;
-    -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(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(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(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);
-  }
-}
-
-.zoomInUp {
-  -webkit-animation-name: zoomInUp;
-  animation-name: zoomInUp;
-}
-
-@-webkit-keyframes zoomOut {
-  0% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes zoomOut {
-  0% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.zoomOut {
-  -webkit-animation-name: zoomOut;
-  animation-name: zoomOut;
-}
-
-@-webkit-keyframes zoomOutDown {
-  40% {
-    opacity: 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.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(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.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-@keyframes zoomOutDown {
-  40% {
-    opacity: 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.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(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.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.zoomOutDown {
-  -webkit-animation-name: zoomOutDown;
-  animation-name: zoomOutDown;
-}
-
-@-webkit-keyframes zoomOutLeft {
-  40% {
-    opacity: 1;
-    -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(0.1) translate3d(-2000px, 0, 0);
-    transform: scale(0.1) translate3d(-2000px, 0, 0);
-    -webkit-transform-origin: left center;
-    transform-origin: left center;
-  }
-}
-
-@keyframes zoomOutLeft {
-  40% {
-    opacity: 1;
-    -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(0.1) translate3d(-2000px, 0, 0);
-    transform: scale(0.1) translate3d(-2000px, 0, 0);
-    -webkit-transform-origin: left center;
-    transform-origin: left center;
-  }
-}
-
-.zoomOutLeft {
-  -webkit-animation-name: zoomOutLeft;
-  animation-name: zoomOutLeft;
-}
-
-@-webkit-keyframes zoomOutRight {
-  40% {
-    opacity: 1;
-    -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(0.1) translate3d(2000px, 0, 0);
-    transform: scale(0.1) translate3d(2000px, 0, 0);
-    -webkit-transform-origin: right center;
-    transform-origin: right center;
-  }
-}
-
-@keyframes zoomOutRight {
-  40% {
-    opacity: 1;
-    -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(0.1) translate3d(2000px, 0, 0);
-    transform: scale(0.1) translate3d(2000px, 0, 0);
-    -webkit-transform-origin: right center;
-    transform-origin: right center;
-  }
-}
-
-.zoomOutRight {
-  -webkit-animation-name: zoomOutRight;
-  animation-name: zoomOutRight;
-}
-
-@-webkit-keyframes zoomOutUp {
-  40% {
-    opacity: 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.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(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.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-@keyframes zoomOutUp {
-  40% {
-    opacity: 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.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(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.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.zoomOutUp {
-  -webkit-animation-name: zoomOutUp;
-  animation-name: zoomOutUp;
-}
-
-@-webkit-keyframes slideInDown {
-  0% {
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideInDown {
-  0% {
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slideInDown {
-  -webkit-animation-name: slideInDown;
-  animation-name: slideInDown;
-}
-
-@-webkit-keyframes slideInLeft {
-  0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideInLeft {
-  0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slideInLeft {
-  -webkit-animation-name: slideInLeft;
-  animation-name: slideInLeft;
-}
-
-@-webkit-keyframes slideInRight {
-  0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideInRight {
-  0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slideInRight {
-  -webkit-animation-name: slideInRight;
-  animation-name: slideInRight;
-}
-
-@-webkit-keyframes slideInUp {
-  0% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideInUp {
-  0% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slideInUp {
-  -webkit-animation-name: slideInUp;
-  animation-name: slideInUp;
-}
-
-@-webkit-keyframes slideOutDown {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    visibility: hidden;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-@keyframes slideOutDown {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    visibility: hidden;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-.slideOutDown {
-  -webkit-animation-name: slideOutDown;
-  animation-name: slideOutDown;
-}
-
-@-webkit-keyframes slideOutLeft {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    visibility: hidden;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-@keyframes slideOutLeft {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    visibility: hidden;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-.slideOutLeft {
-  -webkit-animation-name: slideOutLeft;
-  animation-name: slideOutLeft;
-}
-
-@-webkit-keyframes slideOutRight {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-@keyframes slideOutRight {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-.slideOutRight {
-  -webkit-animation-name: slideOutRight;
-  animation-name: slideOutRight;
-}
-
-@-webkit-keyframes slideOutUp {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    visibility: hidden;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-@keyframes slideOutUp {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    visibility: hidden;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-.slideOutUp {
-  -webkit-animation-name: slideOutUp;
-  animation-name: slideOutUp;
-}
-
-// Loader animation
-@keyframes pen1 {
-  0% {
-    transform: translateY(0px);
-  }
-  15% {
-    transform: translateY(-10px);
-  }
-  30% {
-    transform: translateY(0px);
-  }
-}
-
-@keyframes pen2 {
-  30% {
-    transform: translateY(0px);
-  }
-  45% {
-    transform: translateY(-10px);
-  }
-  60% {
-    transform: translateY(0px);
-  }
-}
-
-@keyframes pen3 {
-  60% {
-    transform: translateY(0px);
-  }
-  75% {
-    transform: translateY(-10px);
-  }
-  90% {
-    transform: translateY(0px);
-  }
-}
-
 @keyframes loaderColor {
   0% {
     fill: #513b56;
   }
+
   33% {
     fill: #348aa7;
   }
+
   66% {
     fill: #5dd39e;
   }
+
   100% {
     fill: #513b56;
   }
@@ -3439,6 +94,7 @@
   0% {
     transform: translateY(0);
   }
+
   100% {
     transform: translateY(-150px);
   }
diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss
deleted file mode 100644
index 34bd2dccbb..0000000000
--- a/frontend/resources/styles/common/dependencies/colors.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-// New UI colors
-$db-primary: #18181a;
-$db-secondary: #000000;
-$db-tertiary: #212426;
-$db-quaternary: #2e3434;
-
-$df-primary: #ffffff;
-$df-secondary: #8f9da3;
-
-$da-primary: #7efff5;
-$da-primary-muted: rgba(126, 255, 245, 0.3);
-$da-secondary: #bb97d8;
-$da-tertiary: #00d1b8;
-
-$d-shadow: rgba(0, 0, 0, 0.6);
-
-// Colors
-$color-white: #ffffff;
-$color-black: #000000;
-$color-canvas: #e8e9ea;
-$color-dashboard: #f6f6f6;
-
-// Main color
-$color-primary: #31efb8;
-
-// Secondary colors
-$color-success: #49d793;
-$color-complete: #a599c6;
-$color-warning: #fc8802;
-$color-danger: #e65244;
-$color-info: #59b9e2;
-
-// Gray scale
-$color-gray-10: #e3e3e3;
-$color-gray-20: #b1b2b5;
-$color-gray-30: #7b7d85;
-$color-gray-40: #64666a;
-$color-gray-50: #303236;
-$color-gray-60: #1f1f1f;
-
-// Mixing Color variable for creating both light and dark colors
-$mix-percentage-dark: 81%;
-$mix-percentage-darker: 60%;
-$mix-percentage-lighter: 20%;
-
-// Lighter colors
-
-$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de
-
-$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1
-
-$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda
-
-// Darker colors
-$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b;
-
-$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-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02;
-
-$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237
-
-$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88;
-
-// bg transparent
-$color-dark-bg: rgba(0, 0, 0, 0.4);
-
-// Transform scss variables into css variables to use them onto cljs files
-:root {
-  // Secondary colors;
-
-  --color-info: #{$color-info};
-  --color-canvas: #e8e9ea;
-
-  // Gray scale;
-
-  --color-gray-20: #{$color-gray-20};
-  --color-gray-60: #{$color-gray-60};
-}
diff --git a/frontend/resources/styles/common/dependencies/fonts.scss b/frontend/resources/styles/common/dependencies/fonts.scss
index 74cd114995..3837591fab 100644
--- a/frontend/resources/styles/common/dependencies/fonts.scss
+++ b/frontend/resources/styles/common/dependencies/fonts.scss
@@ -4,64 +4,18 @@
 //
 // Copyright (c) KALEIDOS INC
 
-// Font sizes
-$fs8: 0.5rem;
-$fs9: 0.5625rem;
-$fs10: 0.625rem;
-$fs11: 0.6875rem;
-$fs12: 0.75rem;
-$fs13: 0.8125rem;
-$fs14: 0.875rem;
-$fs15: 0.9375rem;
-$fs16: 1rem;
-$fs17: 1.0625rem;
-$fs18: 1.125rem;
-$fs19: 1.1875rem;
-$fs20: 1.25rem;
-$fs21: 1.315rem;
-$fs22: 1.375rem;
-$fs23: 1.4375rem;
-$fs24: 1.5rem;
-$fs26: 1.625rem;
-$fs30: 1.875rem;
-$fs32: 2rem;
-$fs34: 2.125rem;
-$fs36: 2.25rem;
-$fs38: 2.375rem;
-$fs40: 2.5rem;
-$fs42: 2.675rem;
-$fs44: 2.75rem;
-$fs80: 5rem;
+@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
+  $filepath: "/fonts/" + $file;
 
-// Font weight
-// Taken from https://fonts.google.com/specimen/Work+Sans
-$fw100: 100; // Thin
-$fw200: 200; // Extra Light
-$fw300: 300; // Light
-$fw400: 400; // Regular (CSS value: 'normal')
-$fw500: 500; // Medium
-$fw600: 600; // Semi Bold
-$fw700: 700; // Bold (CSS value: 'bold')
-$fw800: 800; // Extra Bold
-$fw900: 900; // Black
-
-// Line height
-// Value are predefined as unitless (ratio to font size in %), because that is the best approach for browsers according to https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values
-$lh-normal: normal; // line-height depends of font-family, font-size, your browser, maybe your OS http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
-$lh-088: 0.88;
-$lh-100: 1;
-$lh-115: 1.15; // original $title-lh-sm
-$lh-125: 1.25; // original $title-lh
-$lh-128: 1.28;
-$lh-133: 1.33; // original $base-lh-sm
-$lh-143: 1.43; // original $base-lh
-$lh-145: 1.45;
-$lh-150: 1.5;
-$lh-188: 1.88;
-$lh-192: 1.92;
-$lh-200: 2;
-$lh-236: 2.36;
-$lh-500: 5;
+  @font-face {
+    font-family: "#{$style-name}";
+    src:
+      url($filepath + ".woff2") format("woff2"),
+      url($filepath + ".ttf") format("truetype");
+    font-weight: unquote($weight);
+    font-style: unquote($style);
+  }
+}
 
 // Work Sans
 @include font-face("worksans", "WorkSans-Thin", "100");
@@ -105,3 +59,6 @@ $lh-500: 5;
 @include font-face("vazirmatn", "Vazirmatn-Bold", bold);
 @include font-face("vazirmatn", "Vazirmatn-ExtraBold", "800");
 @include font-face("vazirmatn", "Vazirmatn-Black", "900");
+
+// Space mono
+@include font-face("robotomono", "RobotoMono-Regular", normal);
diff --git a/frontend/resources/styles/common/dependencies/helpers.scss b/frontend/resources/styles/common/dependencies/helpers.scss
deleted file mode 100644
index 005357e6af..0000000000
--- a/frontend/resources/styles/common/dependencies/helpers.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-// Padding & Margin sizes
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-3: 0.75rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-// Border radius
-$br0: 0px;
-$br2: 2px;
-$br3: 3px;
-$br4: 4px;
-$br5: 5px;
-$br6: 6px;
-$br7: 7px;
-$br8: 8px;
-$br10: 10px;
-$br12: 12px;
-$br25: 25px;
-$br50: 50px;
-$br99: 99px;
-$br-circle: 50%; // Need to be investigated, before we can use variable
-
-.row-flex {
-  align-items: center;
-  display: flex;
-  margin-bottom: $size-1;
-
-  &.column {
-    flex-direction: column;
-  }
-
-  &.center {
-    justify-content: center;
-  }
-}
-
-.row-grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
-.column-half {
-  margin-right: $size-2;
-}
-
-// Display
-.hidden {
-  display: none;
-}
-
-.hide {
-  opacity: 0;
-}
-
-.display {
-  opacity: 1 !important;
-}
diff --git a/frontend/resources/styles/common/dependencies/highlightjs-theme.scss b/frontend/resources/styles/common/dependencies/highlightjs-theme.scss
deleted file mode 100644
index 8d8fbd6f99..0000000000
--- a/frontend/resources/styles/common/dependencies/highlightjs-theme.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #23241f;
-}
-
-.hljs,
-.hljs-tag,
-.hljs-subst {
-  color: #f8f8f2;
-}
-
-.hljs-strong,
-.hljs-emphasis {
-  color: #a8a8a2;
-}
-
-.hljs-bullet,
-.hljs-quote,
-.hljs-number,
-.hljs-regexp,
-.hljs-literal,
-.hljs-link {
-  color: #ae81ff;
-}
-
-.hljs-code,
-.hljs-title,
-.hljs-section,
-.hljs-selector-class {
-  color: #a6e22e;
-}
-
-.hljs-strong {
-  font-weight: $fw700;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-name,
-.hljs-attr {
-  color: #f92672;
-}
-
-.hljs-symbol,
-.hljs-attribute {
-  color: #66d9ef;
-}
-
-.hljs-params,
-.hljs-class .hljs-title {
-  color: #f8f8f2;
-}
-
-.hljs-string,
-.hljs-type,
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-selector-id,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-addition,
-.hljs-variable,
-.hljs-template-variable {
-  color: #e6db74;
-}
-
-.hljs-comment,
-.hljs-deletion,
-.hljs-meta {
-  color: #75715e;
-}
diff --git a/frontend/resources/styles/common/dependencies/mixin.scss b/frontend/resources/styles/common/dependencies/mixin.scss
deleted file mode 100644
index e8ec11d408..0000000000
--- a/frontend/resources/styles/common/dependencies/mixin.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-/// This mixin allows you  to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
-/// @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).
-$bp-min-720: "(min-width: 720px)";
-$bp-min-1020: "(min-width: 1020px)";
-$bp-min-1366: "(min-width: 1366px)";
-$bp-max-1366: "(max-width: 1366px)";
-$bp-min-2556: "(min-width: 2556px)";
-
-@mixin bp($point) {
-  @if $point == mobile {
-    @media #{$bp-min-720} {
-      @content;
-    }
-  } @else if $point == tablet {
-    @media #{$bp-min-1020} {
-      @content;
-    }
-  } @else if $point == desktop {
-    @media #{$bp-min-1366} {
-      @content;
-    }
-  }
-}
-
-// Advanced positioning
-// ----------------
-@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) {
-    @warn "Unknown position: #{$type}.";
-  }
-  @each $data in top $top, right $right, bottom $bottom, left $left {
-    #{nth($data, 1)}: nth($data, 2);
-  }
-}
-@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
-) {
-  @include position(relative, $top, $right, $bottom, $left);
-}
-@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%);
-}
-
-/// This mixing allow you to add placeholder colors in all available browsers
-/// @group Mixins
-
-@mixin placeholder {
-  &::-webkit-input-placeholder {
-    @content;
-  }
-
-  &:-moz-placeholder {
-    /* Firefox 18- */
-    @content;
-  }
-
-  &::-moz-placeholder {
-    /* Firefox 19+ */
-    @content;
-  }
-
-  &:-ms-input-placeholder {
-    @content;
-  }
-}
-
-/// Allows you to visually
-/// @group Mixins
-
-@mixin hide-text {
-  font: 0/0 a;
-  color: transparent;
-  text-shadow: none;
-}
-
-@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
-  $filepath: "/fonts/" + $file;
-  @font-face {
-    font-family: "#{$style-name}";
-    src:
-      url($filepath + ".woff2") format("woff2"),
-      url($filepath + ".ttf") format("truetype");
-    font-weight: unquote($weight);
-    font-style: unquote($style);
-  }
-}
-
-@mixin tooltipShow {
-  &:hover {
-    .icon-tooltip {
-      display: block;
-      left: 2rem;
-      animation: tooltipAppear 0.2s linear;
-    }
-  }
-  &.active {
-    .icon-tooltip {
-      display: block;
-      left: 2rem;
-      animation: tooltipAppear 0.2s linear;
-    }
-  }
-}
-
-@mixin text-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-@mixin paragraph-ellipsis {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  position: relative;
-
-  &::after {
-    background-color: $color-gray-50;
-    bottom: -3px;
-    content: "...";
-    padding-left: 10px;
-    position: absolute;
-    right: 2px;
-  }
-}
diff --git a/frontend/resources/styles/common/dependencies/reset.scss b/frontend/resources/styles/common/dependencies/reset.scss
index 6092943ca3..39e198d8d7 100644
--- a/frontend/resources/styles/common/dependencies/reset.scss
+++ b/frontend/resources/styles/common/dependencies/reset.scss
@@ -1,3 +1,7 @@
+// TODO: Legacy sass vars. We should not be using Sass vars here in this
+//       file at all.
+$lh-143: 1.43;
+
 /*
 http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
@@ -97,6 +101,9 @@ video {
   border: 0;
   font: inherit;
   font-size: 100%;
+  // TODO: Changing line-height to 1 (as it should be) makes the visual tests
+  //       fail with a max pixel diff ratio of 0.005.
+  //       We should tackle this later.
   line-height: $lh-143;
   margin: 0;
   padding: 0;
@@ -118,7 +125,7 @@ section {
   display: block;
 }
 body {
-  line-height: $lh-100;
+  line-height: 1;
 }
 
 ol,
diff --git a/frontend/resources/styles/common/dependencies/z-index.scss b/frontend/resources/styles/common/dependencies/z-index.scss
deleted file mode 100644
index 0275fbe3ec..0000000000
--- a/frontend/resources/styles/common/dependencies/z-index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-$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
deleted file mode 100644
index a90e22dbdd..0000000000
--- a/frontend/resources/styles/common/framework.scss
+++ /dev/null
@@ -1,1170 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-// Buttons
-
-%btn {
-  appearance: none;
-  align-items: center;
-  border: none;
-  border-radius: $br3;
-  cursor: pointer;
-  display: flex;
-  font-family: "worksans", sans-serif;
-  font-size: $fs12;
-  height: 30px;
-  justify-content: center;
-  min-width: 25px;
-  padding: 0 1rem;
-  transition: all 0.4s;
-  text-decoration: none !important;
-  svg {
-    height: 16px;
-    width: 16px;
-  }
-  &.btn-large {
-    font-size: $fs14;
-    height: 40px;
-    svg {
-      height: 20px;
-      width: 20px;
-    }
-  }
-  &.btn-small {
-    height: 25px;
-  }
-}
-
-.btn-primary {
-  @extend %btn;
-  background: $color-primary;
-  color: $color-black;
-  &:hover,
-  &:focus {
-    background: $color-black;
-    color: $color-primary;
-  }
-}
-
-.btn-secondary {
-  @extend %btn;
-  background: $color-white;
-  border: 1px solid $color-gray-20;
-  color: $color-black;
-  &:hover {
-    background: $color-primary;
-    border-color: $color-primary;
-    color: $color-black;
-  }
-}
-
-.btn-warning {
-  @extend %btn;
-  background: $color-warning;
-  color: $color-white;
-  &:hover {
-    background: $color-warning-dark;
-    color: $color-white;
-  }
-}
-
-.btn-danger {
-  @extend %btn;
-  background: $color-danger;
-  color: $color-white;
-  &:hover {
-    background: $color-danger-dark;
-    color: $color-white;
-  }
-}
-
-input[type="button"][disabled],
-.btn-disabled {
-  background-color: $color-gray-10;
-  color: $color-gray-40;
-  pointer-events: none;
-}
-
-// Slider dots
-
-ul.slider-dots {
-  align-items: center;
-  display: flex;
-
-  li {
-    background-color: transparent;
-    border-radius: 50%;
-    border: 2px solid $color-white;
-    cursor: pointer;
-    height: 12px;
-    flex-shrink: 0;
-    margin: 6px;
-    width: 12px;
-
-    &.current,
-    &:hover {
-      background-color: $color-gray-10;
-    }
-  }
-
-  &.dots-purple {
-    li {
-      border-color: $color-complete;
-
-      &.current,
-      &:hover {
-        background-color: $color-complete;
-      }
-    }
-  }
-}
-
-// Doted list
-
-.doted-list {
-  li {
-    align-items: center;
-    display: flex;
-    padding: $size-2 0;
-
-    &::before {
-      background-color: $color-complete;
-      border-radius: 50%;
-      content: "";
-      flex-shrink: 0;
-      height: 10px;
-      margin-right: 6px;
-      width: 10px;
-    }
-
-    &.not-included {
-      text-decoration: line-through;
-    }
-  }
-}
-
-// Tags
-
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  .tag {
-    background-color: $color-gray-20;
-    border-radius: $br3;
-    color: $color-white;
-    cursor: pointer;
-    font-size: $fs14;
-    font-weight: $fw700;
-    margin: 0 $size-2 $size-2 0;
-    padding: 4px 8px;
-    text-transform: uppercase;
-
-    &:hover {
-      background-color: $color-gray-40;
-    }
-
-    &.tag-primary {
-      background-color: $color-primary;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-primary-dark;
-      }
-    }
-
-    &.tag-green {
-      background-color: $color-success;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-success-dark;
-      }
-    }
-
-    &.tag-purple {
-      background-color: $color-complete;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-complete-dark;
-      }
-    }
-
-    &.tag-orange {
-      background-color: $color-warning;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-warning-dark;
-      }
-    }
-
-    &.tag-red {
-      background-color: $color-danger;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-danger-dark;
-      }
-    }
-  }
-}
-
-// Input elements
-.input-element {
-  display: flex;
-  flex-shrink: 0;
-  position: relative;
-  width: 75px;
-
-  &::after,
-  .after {
-    color: $color-gray-20;
-    font-size: $fs12;
-    height: 20px;
-    position: absolute;
-    right: $size-2;
-    text-align: right;
-    top: 26%;
-    width: 18px;
-
-    pointer-events: none;
-    max-width: 4rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .after {
-    width: auto;
-    right: 6px;
-  }
-
-  &.mini {
-    width: 43px;
-  }
-
-  &.auto {
-    width: auto;
-  }
-
-  // Input amounts
-
-  &.pixels {
-    & input {
-      padding-right: 20px;
-    }
-
-    &::after {
-      content: "px";
-    }
-  }
-
-  &.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";
-    }
-  }
-
-  &.maxW {
-    &::after {
-      content: attr(alt);
-    }
-  }
-
-  &.minW {
-    &::after {
-      content: attr(alt);
-    }
-  }
-
-  &.maxH {
-    &::after {
-      content: attr(alt);
-    }
-  }
-
-  &.minH {
-    &::after {
-      content: attr(alt);
-    }
-  }
-
-  &.large {
-    min-width: 7rem;
-  }
-}
-
-input,
-select {
-  background-color: $color-white;
-  box-sizing: border-box;
-  color: $color-gray-60;
-  font-family: "worksans", sans-serif;
-  font-size: $fs14;
-  margin-bottom: $size-4;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  box-sizing: border-box;
-  cursor: pointer;
-  line-height: $lh-normal;
-  margin-top: 1px 0 0;
-}
-
-.form-errors {
-  color: $color-danger;
-}
-
-// Input text
-
-.input-text {
-  border: none;
-  border-bottom: 1px solid transparent;
-  background-color: $color-white;
-  box-shadow: none;
-  outline: none;
-  padding: $size-2 $size-5 $size-2 $size-2;
-  position: relative;
-
-  @include placeholder {
-    transition: all 0.3s ease;
-  }
-
-  &:focus {
-    border-color: $color-gray-40;
-    box-shadow: none;
-
-    @include placeholder {
-      opacity: 0;
-      transform: translateY(-20px);
-      transition: all 0.3s ease;
-    }
-  }
-
-  &.success {
-    background-color: $color-success-lighter;
-    border-color: $color-success;
-    color: $color-success-dark;
-  }
-
-  &.error {
-    background-color: $color-danger-lighter;
-    border-color: $color-danger;
-    color: $color-danger-dark;
-  }
-}
-
-// Element-name
-
-input.element-name {
-  background-color: $color-white;
-  border: 1px solid $color-gray-40;
-  border-radius: $br3;
-  color: $color-gray-60;
-  font-size: $fs12;
-  margin: 0px;
-  padding: 3px;
-  width: 100%;
-}
-
-// Input select
-
-.input-select {
-  @extend .input-text;
-  background-image: url("/images/icons/arrow-down-white.svg");
-  background-repeat: no-repeat;
-  background-position: calc(100% - 4px) 48%;
-  background-size: 10px;
-  cursor: pointer;
-
-  &.small {
-    padding: $size-1 $size-5 $size-1 $size-1;
-  }
-}
-
-// Input radio
-
-.input-radio,
-.input-checkbox {
-  align-items: center;
-  color: $color-gray-40;
-  display: flex;
-  margin-bottom: 10px;
-  margin-top: 10px;
-  padding-left: 0px;
-
-  label {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    margin-right: 15px;
-    font-size: $fs12;
-
-    &:before {
-      content: "";
-      width: 20px;
-      height: 20px;
-      margin-right: 10px;
-      background-color: $color-gray-10;
-      border: 1px solid $color-gray-30;
-      box-shadow: inset 0 0 0 0 $color-primary;
-      box-sizing: border-box;
-      flex-shrink: 0;
-    }
-  }
-
-  &.column {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-}
-
-.input-radio {
-  label {
-    margin-bottom: 6px;
-
-    &:before {
-      border-radius: $br99;
-      transition:
-        box-shadow 0.2s linear 0s,
-        color 0.2s linear 0s;
-    }
-  }
-
-  input[type="radio"]:checked {
-    & + label {
-      &:before {
-        box-shadow: inset 0 0 0 5px $color-gray-20;
-      }
-    }
-  }
-
-  input[type="radio"] {
-    display: none;
-  }
-
-  input[type="radio"][disabled] {
-    & + label {
-      opacity: 0.65;
-    }
-  }
-}
-input[type="radio"]:checked + label:before {
-  .input-radio.radio-success & {
-    box-shadow: inset 0 0 0 5px $color-success;
-  }
-
-  .input-radio.radio-primary & {
-    box-shadow: inset 0 0 0 5px $color-primary;
-  }
-
-  .input-radio.radio-info & {
-    box-shadow: inset 0 0 0 5px $color-info;
-  }
-
-  .input-radio.radio-warning & {
-    box-shadow: inset 0 0 0 5px $color-warning;
-  }
-
-  .input-radio.radio-danger & {
-    box-shadow: inset 0 0 0 5px $color-danger;
-  }
-
-  .input-radio.radio-complete & {
-    box-shadow: inset 0 0 0 5px $color-complete;
-  }
-}
-
-// Input checkbox
-
-.input-checkbox {
-  input[type="radio"][disabled] {
-    & + label {
-      &:after {
-        background-color: $color-gray-10;
-      }
-    }
-  }
-
-  label {
-    transition:
-      border 0.2s linear 0s,
-      color 0.2s linear 0s;
-    position: relative;
-
-    &:before {
-      top: 1.4px;
-      border-radius: $br3;
-      transition:
-        border 0.2s linear 0s,
-        color 0.2s linear 0s;
-    }
-
-    &::after {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      position: absolute;
-      left: 3.2px;
-      top: 0;
-      font-size: $fs12;
-      transition:
-        border 0.2s linear 0s,
-        color 0.2s linear 0s;
-    }
-
-    &:after {
-      border-radius: $br3;
-    }
-  }
-
-  input[type="checkbox"] {
-    display: none;
-  }
-
-  &.checkbox-circle {
-    label {
-      &:after {
-        border-radius: $br99;
-      }
-
-      &:before {
-        border-radius: $br99;
-      }
-    }
-  }
-
-  input[type="checkbox"]:checked {
-    & + label {
-      &:before {
-        border-width: 10px;
-      }
-
-      &::after {
-        content: "✓";
-        color: #ffffff;
-        font-size: $fs16;
-      }
-    }
-  }
-
-  input[type="checkbox"][disabled] {
-    & + label {
-      opacity: 0.65;
-
-      &:before {
-        background-color: #eceff3;
-      }
-    }
-  }
-
-  input[type="checkbox"][indeterminate] {
-    & + label {
-      &::after {
-        content: "?";
-        left: 4px;
-      }
-    }
-  }
-
-  &.right {
-    label {
-      margin-right: 35px;
-      padding-left: 0 !important;
-
-      &:before {
-        right: -35px;
-        left: auto;
-      }
-    }
-
-    input[type="checkbox"]:checked {
-      & + label {
-        position: relative;
-
-        &::after {
-          content: "✓";
-          position: absolute;
-          right: -27px;
-          left: auto;
-        }
-      }
-    }
-  }
-}
-
-input[type="checkbox"]:checked + label {
-  .input-checkbox.check-success &:before {
-    border-color: $color-success;
-  }
-
-  .input-checkbox.check-primary &:before {
-    border-color: $color-primary;
-  }
-
-  .input-checkbox.check-complete &:before {
-    border-color: $color-complete;
-  }
-
-  .input-checkbox.check-warning &:before {
-    border-color: $color-warning;
-  }
-
-  .input-checkbox.check-danger &:before {
-    border-color: $color-danger;
-  }
-
-  .input-checkbox.check-info &:before {
-    border-color: $color-info;
-  }
-
-  .input-checkbox.check-success &::after,
-  .input-checkbox.check-primary &::after,
-  .input-checkbox.check-complete &::after,
-  .input-checkbox.check-warning &::after,
-  .input-checkbox.check-danger &::after,
-  .input-checkbox.check-info &::after {
-    color: $color-white;
-  }
-}
-
-// Input slidebar
-
-input[type="range"] {
-  background-color: transparent;
-  -webkit-appearance: none;
-  margin: 10px 0 10px 3px;
-  max-width: 70px;
-  width: 100%;
-}
-input[type="range"]:focus {
-  outline: none;
-}
-input[type="range"]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 6px;
-  cursor: pointer;
-  animate: 0.2s;
-  box-shadow:
-    0px 0px 0px #000000,
-    0px 0px 0px #0d0d0d;
-  background: $color-gray-60;
-  border-radius: $br25;
-  border: 0px solid #000101;
-}
-input[type="range"]::-webkit-slider-thumb {
-  box-shadow:
-    0px 0px 0px #000000,
-    0px 0px 0px #0d0d0d;
-  border: 0px solid #000000;
-  height: 18px;
-  width: 6px;
-  border-radius: $br7;
-  background: $color-gray-20;
-  cursor: pointer;
-  -webkit-appearance: none;
-  margin-top: -6px;
-}
-input[type="range"]:focus::-webkit-slider-runnable-track {
-  background: $color-gray-60;
-}
-input[type="range"]::-moz-range-track {
-  width: 100%;
-  height: 8px;
-  cursor: pointer;
-  animate: 0.2s;
-  box-shadow:
-    0px 0px 0px #000000,
-    0px 0px 0px #0d0d0d;
-  background: $color-gray-60;
-  border-radius: $br25;
-  border: 0px solid #000101;
-}
-input[type="range"]::-moz-range-thumb {
-  box-shadow:
-    0px 0px 0px #000000,
-    0px 0px 0px #0d0d0d;
-  border: 0px solid #000000;
-  height: 24px;
-  width: 8px;
-  border-radius: $br7;
-  background: $color-gray-20;
-  cursor: pointer;
-}
-input[type="range"]::-ms-track {
-  width: 100%;
-  height: 8px;
-  cursor: pointer;
-  animate: 0.2s;
-  background: transparent;
-  border-color: transparent;
-  border-width: 39px 0;
-  color: transparent;
-}
-input[type="range"]::-ms-fill-lower {
-  background: $color-gray-60;
-  border: 0px solid #000101;
-  border-radius: $br50;
-  box-shadow:
-    0px 0px 0px #000000,
-    0px 0px 0px #0d0d0d;
-}
-input[type="range"]::-ms-fill-upper {
-  background: $color-gray-60;
-  border: 0px solid #000101;
-  border-radius: $br50;
-  box-shadow:
-    0px 0px 0px #000000,
-    0px 0px 0px #0d0d0d;
-}
-input[type="range"]::-ms-thumb {
-  box-shadow:
-    0px 0px 0px #000000,
-    0px 0px 0px #0d0d0d;
-  border: 0px solid #000000;
-  height: 24px;
-  width: 8px;
-  border-radius: $br7;
-  background: $color-gray-20;
-  cursor: pointer;
-}
-input[type="range"]:focus::-ms-fill-lower {
-  background: $color-gray-60;
-}
-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;
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: $color-gray-20;
-
-  &:hover {
-    background-color: darken($color-gray-20, 14%);
-    outline: 2px solid $color-primary;
-  }
-}
-
-// Tooltip
-
-.tooltip {
-  position: relative;
-
-  &:hover {
-    &::after {
-      background-color: $color-white;
-      border-radius: $br3;
-      color: $color-gray-60;
-      content: attr(alt);
-      font-size: $fs12;
-      font-weight: $fw700;
-      padding: $size-1;
-      position: absolute;
-      left: 130%;
-      text-align: center;
-      top: 0;
-      white-space: nowrap;
-      z-index: 20;
-      @include animation(0.3s, 0.6s, fadeIn);
-    }
-  }
-
-  // the default is the `right`
-  &.tooltip-bottom {
-    &:hover {
-      &::after {
-        left: 0;
-        top: 130%;
-      }
-    }
-  }
-
-  &.tooltip-expand {
-    &:hover {
-      &::after {
-        min-width: 100%;
-      }
-    }
-  }
-
-  &.tooltip-bottom-left {
-    &:hover {
-      &::after {
-        left: unset;
-        right: 0;
-        top: 130%;
-      }
-    }
-  }
-
-  &.tooltip-top {
-    &:hover {
-      &::after {
-        top: -165%;
-        left: -60%;
-      }
-    }
-  }
-
-  &.tooltip-right {
-    &:hover {
-      &::after {
-        top: 15%;
-        left: 120%;
-      }
-    }
-  }
-
-  &.tooltip-left {
-    &:hover {
-      &::after {
-        left: unset;
-        right: 130%;
-        top: 15%;
-      }
-    }
-  }
-
-  &.tooltip-hover {
-    &:hover {
-      &::after {
-        align-items: center;
-        background-color: $color-white;
-        box-sizing: border-box;
-        border-radius: $br0;
-        color: $color-gray-60;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        left: 0;
-        top: 0;
-        white-space: normal;
-        width: 100%;
-      }
-    }
-  }
-}
-
-// Messages
-
-.banner {
-  position: relative;
-
-  &.error {
-    background-color: $color-danger;
-  }
-
-  &.success {
-    background-color: $color-success;
-  }
-
-  &.warning {
-    background-color: $color-warning;
-  }
-
-  &.info {
-    background-color: $color-info;
-  }
-
-  &.hide {
-    @include animation(0, 0.6s, fadeOutUp);
-  }
-
-  .icon {
-    display: flex;
-
-    svg {
-      fill: $color-white;
-      height: 20px;
-      width: 20px;
-    }
-  }
-
-  .content {
-    &.bottom-actions {
-      flex-direction: column;
-
-      .actions {
-        margin-top: $size-4;
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
-
-    &.inline-actions {
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-
-      .actions {
-        display: flex;
-        justify-content: flex-start;
-
-        .btn-secondary {
-          margin-left: $size-4;
-        }
-      }
-    }
-
-    .link {
-      background: none;
-      border: none;
-      color: $color-info;
-      display: inline;
-      margin: 0;
-      text-decoration: underline;
-    }
-  }
-
-  .btn-close {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    width: 48px;
-    height: 48px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    opacity: 0.35;
-
-    svg {
-      fill: $color-black;
-      height: 18px;
-      width: 18px;
-      transform: rotate(45deg);
-    }
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  &.fixed {
-    border-radius: $br3;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
-    height: 48px;
-    max-width: 1000px;
-    min-width: 500px;
-    position: fixed;
-    padding-left: 16px;
-    top: 16px;
-    right: 16px;
-    z-index: 40;
-
-    display: flex;
-    align-items: center;
-
-    .wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding-right: 64px;
-
-      .icon {
-        margin-right: $size-4;
-      }
-
-      .content {
-        color: $color-white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: $fs14;
-      }
-    }
-  }
-
-  &.floating,
-  &.inline {
-    min-height: 40px;
-
-    .wrapper {
-      display: flex;
-      align-items: center;
-
-      .icon {
-        padding: $size-2;
-        width: 48px;
-        height: 48px;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .content {
-        color: $color-black;
-        display: flex;
-        font-size: $fs14;
-        padding: $size-2;
-        width: 100%;
-        align-items: center;
-
-        padding: 10px 15px;
-        min-height: 48px;
-      }
-    }
-
-    &.error {
-      .content {
-        background-color: lighten($color-danger, 30%);
-      }
-    }
-
-    &.success {
-      .content {
-        background-color: lighten($color-success, 30%);
-      }
-    }
-
-    &.warning {
-      .content {
-        background-color: lighten($color-warning, 30%);
-      }
-    }
-
-    &.info {
-      .content {
-        background-color: lighten($color-info, 30%);
-      }
-    }
-  }
-
-  &.floating {
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.18);
-    position: absolute;
-    top: 70px;
-    left: 0;
-    right: 0;
-    width: 40rem;
-    margin-left: auto;
-    margin-right: auto;
-    z-index: 20;
-
-    &.error {
-      border: 1px solid $color-danger;
-    }
-
-    &.success {
-      border: 1px solid $color-success;
-    }
-
-    &.warning {
-      border: 1px solid $color-warning;
-    }
-
-    &.info {
-      border: 1px solid $color-info;
-    }
-  }
-
-  &.inline {
-    width: 100%;
-  }
-}
-
-.close-bezier {
-  fill: $color-danger;
-  stroke: $color-danger-dark;
-  stroke-width: 2px;
-  cursor: pointer;
-  &:hover {
-    fill: $color-white;
-  }
-}
-
-.message-inline {
-  background-color: $color-info;
-  color: $color-info-darker;
-  margin-bottom: 1.2rem;
-  padding: 0.8rem;
-  text-align: center;
-  p {
-    margin: 0;
-  }
-  .code {
-    font-family: monospace;
-  }
-}
-
-[draggable] {
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  /* Required to make elements draggable in old WebKit */
-  -khtml-user-drag: element;
-  -webkit-user-drag: element;
-}
-
-.dnd-over > .element-list-body {
-  border: 1px solid white !important;
-}
-
-.dnd-over-top {
-  border-top: 1px solid white !important;
-}
-
-.dnd-over-bot {
-  border-bottom: 1px solid white !important;
-}
diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index da1f0d784e..aad5ed19e9 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -13,6 +13,7 @@
   --db-primary-60: #{color.change(#18181a, $alpha: 0.6)};
   --db-secondary: #000000;
   --db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
+  --db-secondary-40: #{color.change(#000000, $alpha: 0.4)};
   --db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
   --db-tertiary: #212426;
   --db-quaternary: #2e3434;
diff --git a/frontend/resources/styles/common/refactor/fonts.scss b/frontend/resources/styles/common/refactor/fonts.scss
index 81a8b5f670..015555225a 100644
--- a/frontend/resources/styles/common/refactor/fonts.scss
+++ b/frontend/resources/styles/common/refactor/fonts.scss
@@ -5,7 +5,6 @@
 // Copyright (c) KALEIDOS INC
 
 @use "sass:math";
-@import "common/dependencies/mixin";
 
 // Typography scale
 $fs-base: 16;
@@ -24,3 +23,6 @@ $fs-36: math.div(36, $fs-base) + rem;
 $fw400: 400; // Regular (CSS value: 'normal')
 $fw500: 500; // Medium
 $fw700: 700; // Bold (CSS value: 'bold')
+
+// Line heights
+$lh-150: 1.5;
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 0f4f8e6217..769e9a6d89 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -4,27 +4,15 @@
 //
 // Copyright (c) KALEIDOS INC
 
-//#################################################
-// Import libraries
-//#################################################
-
-@use "sass:color";
-
 //#################################################
 // MAIN STYLES
 //#################################################
 
-@import "common/dependencies/colors";
-@import "common/dependencies/helpers";
-@import "common/dependencies/mixin";
-@import "common/dependencies/fonts";
 @import "common/dependencies/reset";
-@import "common/dependencies/animations";
-@import "common/dependencies/z-index";
-@import "common/dependencies/highlightjs-theme";
-
-@import "animate";
 @import "common/refactor/color-defs.scss";
+@import "common/dependencies/fonts";
+@import "common/dependencies/animations";
+
 @import "common/refactor/themes.scss";
 @import "common/refactor/design-tokens.scss";
 
@@ -33,20 +21,19 @@
 //#################################################
 
 @import "common/base";
-@import "main/layouts/main-layout";
-@import "main/layouts/not-found";
 
 //#################################################
 // Commons
 //#################################################
 
-@import "common/framework";
+// TODO: remove this stylesheet once the new text editor is in place
+//       https: //tree.taiga.io/project/penpot/us/8165
 @import "main/partials/texts";
 
 //#################################################
 // Partials
 //#################################################
 
-@import "main/partials/debug-icons-preview";
+// TODO: encapsulate pencil loader into its own component
+//       https: //tree.taiga.io/project/penpot/task/8217
 @import "main/partials/loader";
-@import "main/partials/workspace";
diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss
deleted file mode 100644
index fbe768447a..0000000000
--- a/frontend/resources/styles/main/layouts/main-layout.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.main-content {
-  display: flex;
-  height: 100%;
-  position: relative;
-}
-
-.dashboard-layout {
-  background-color: $color-white;
-  display: grid;
-  grid-template-rows: 50px 1fr;
-  grid-template-columns: 40px 256px 1fr;
-  height: 100vh;
-
-  .dashboard-sidebar {
-    grid-row: 1 / span 2;
-    grid-column: 1 / span 2;
-    padding: 1rem;
-  }
-
-  .dashboard-content {
-    grid-row: 1 / span 2;
-    padding: 1rem 1rem 0 0;
-  }
-}
-
-.dashboard-content {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.verify-token {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-
-  svg#loader-pencil {
-    fill: $color-gray-50;
-  }
-}
-
-#screenshot {
-  display: flex;
-  flex-direction: column;
-}
diff --git a/frontend/resources/styles/main/layouts/not-found.scss b/frontend/resources/styles/main/layouts/not-found.scss
deleted file mode 100644
index d9cda82425..0000000000
--- a/frontend/resources/styles/main/layouts/not-found.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-.not-found-layout {
-  display: grid;
-
-  grid-template-rows: 120px auto;
-  grid-template-columns: 1fr;
-}
-
-.not-found-header {
-  grid-column: 1 / span 1;
-  grid-row: 1 / span 1;
-
-  display: flex;
-  align-items: center;
-  padding: 32px;
-
-  svg {
-    height: 55px;
-    width: 170px;
-  }
-}
-
-.not-found-content {
-  grid-column: 1 / span 1;
-  grid-row: 1 / span 2;
-  height: 100vh;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .container {
-    max-width: 600px;
-  }
-
-  .image {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-bottom: 2rem;
-
-    svg {
-      height: 220px;
-      width: 220px;
-    }
-  }
-
-  .main-message {
-    color: $color-black;
-    font-size: $fs80;
-    line-height: $lh-188; // Original value was 150px; 150px/80px = 187.5 % => lh-188 (rounded)
-    text-align: center;
-  }
-
-  .desc-message {
-    color: $color-black;
-    font-size: $fs26;
-    font-weight: $fw300;
-    text-align: center;
-  }
-
-  .sign-info {
-    margin-top: 20px;
-    color: $color-black;
-    font-size: $fs16;
-    font-weight: $fw200;
-    text-align: center;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    b {
-      font-weight: $fw400;
-    }
-
-    .btn-primary {
-      margin-top: 15px;
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/debug-icons-preview.scss b/frontend/resources/styles/main/partials/debug-icons-preview.scss
deleted file mode 100644
index 4b72bd0a7e..0000000000
--- a/frontend/resources/styles/main/partials/debug-icons-preview.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.debug-preview {
-  display: flex;
-  flex-direction: column;
-  overflow: scroll;
-  height: 100%;
-  h1 {
-    color: white;
-    font-size: 24px;
-    display: block;
-    width: 100vw;
-    margin: 12px;
-  }
-}
-
-.debug-icons-preview {
-  display: flex;
-  flex-wrap: wrap;
-  h2 {
-    color: white;
-    font-size: 16px;
-    display: block;
-    width: 100vw;
-    margin: 12px;
-  }
-
-  .subtitle-old {
-    color: #ff3277;
-  }
-
-  .icon-item,
-  .cursor-item,
-  .icon-item-old {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    width: 120px;
-    height: 120px;
-    margin: 10px;
-    align-items: center;
-
-    svg {
-      width: 100%;
-      height: 100%;
-      min-width: 16px;
-      min-height: 16px;
-      fill: none;
-      color: transparent;
-      stroke: #91fadb;
-    }
-
-    span {
-      color: white;
-      max-width: 100px;
-      overflow: hidden;
-      font-size: 12px;
-      margin-top: 4px;
-      word-break: break-word;
-      min-height: 40px;
-    }
-  }
-
-  .cursor-item div,
-  .icon-item-old svg {
-    stroke: #aab5ba;
-  }
-
-  .cursor-item {
-    height: auto;
-  }
-}
diff --git a/frontend/resources/styles/main/partials/loader.scss b/frontend/resources/styles/main/partials/loader.scss
index ce2542d2db..14154849d6 100644
--- a/frontend/resources/styles/main/partials/loader.scss
+++ b/frontend/resources/styles/main/partials/loader.scss
@@ -1,39 +1,6 @@
-// full width BG
-.loader-content {
-  align-items: center;
-  background-color: rgba(255, 255, 255, 0.85);
-  display: flex;
-  height: 100vh;
-  justify-content: center;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 40;
-}
-
-// full with loader CSS
-svg#loader-icon {
-  height: 100px;
-  width: 100px;
-  animation: loaderColor 5s infinite ease;
-}
-
-#loader-pen1 {
-  animation: pen1 2s infinite ease;
-}
-
-#loader-pen2 {
-  animation: pen2 2s infinite ease;
-}
-
-#loader-pen3 {
-  animation: pen3 2s infinite ease;
-}
-
 // btn pencil loader
 svg#loader-pencil {
-  fill: $color-primary-darker;
+  fill: var(--color-accent-tertiary);
   width: 60px;
 }
 
diff --git a/frontend/resources/styles/main/partials/texts.scss b/frontend/resources/styles/main/partials/texts.scss
index ad53796b62..aab38a4966 100644
--- a/frontend/resources/styles/main/partials/texts.scss
+++ b/frontend/resources/styles/main/partials/texts.scss
@@ -1,6 +1,6 @@
 .text-editor,
 .rich-text {
-  color: $color-black;
+  color: var(--app-black);
   height: 100%;
   font-family: sourcesanspro;
 
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
deleted file mode 100644
index 088add9281..0000000000
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ /dev/null
@@ -1,363 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-$width-left-toolbar: 48px;
-
-$width-settings-bar: 256px;
-$width-settings-bar-min: 255px;
-$width-settings-bar-max: 500px;
-
-$height-palette: 79px;
-$height-palette-min: 54px;
-$height-palette-max: 80px;
-
-#workspace {
-  width: 100vw;
-  height: 100%;
-  user-select: none;
-  background-color: $color-canvas;
-  display: grid;
-  grid-template-areas:
-    "header header header header"
-    "toolbar left-sidebar viewport right-sidebar"
-    "toolbar left-sidebar color-palette right-sidebar";
-
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: auto auto 1fr auto;
-
-  .workspace-header {
-    grid-area: header;
-    height: 48px;
-  }
-
-  .left-toolbar {
-    grid-area: toolbar;
-    width: $width-left-toolbar;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .settings-bar.settings-bar-left {
-    min-width: $width-settings-bar;
-    max-width: 500px;
-    width: var(--width, $width-settings-bar);
-    grid-area: left-sidebar;
-  }
-
-  .settings-bar.settings-bar-right {
-    height: 100%;
-    width: var(--width, $width-settings-bar);
-    grid-area: right-sidebar;
-
-    &.not-expand {
-      max-width: $width-settings-bar;
-    }
-  }
-
-  .workspace-content {
-    grid-area: viewport;
-  }
-
-  .color-palette {
-    grid-area: color-palette;
-    max-height: $height-palette-max;
-    height: var(--height, $height-palette);
-  }
-}
-
-.workspace-content {
-  background-color: $color-canvas;
-  display: flex;
-  padding: 0;
-  margin: 0;
-  grid-area: viewport;
-  &.scrolling {
-    cursor: grab;
-  }
-
-  &.no-tool-bar-right {
-    width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
-    right: 0;
-
-    .coordinates {
-      right: 10px;
-    }
-  }
-
-  &.no-tool-bar-left {
-    width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
-
-    &.no-tool-bar-right {
-      width: 100%;
-    }
-  }
-
-  .coordinates {
-    background-color: $color-dark-bg;
-    border-radius: $br3;
-    bottom: 0px;
-    padding-left: 5px;
-    position: fixed;
-    right: calc(#{$width-settings-bar} + 14px);
-    text-align: center;
-    width: 125px;
-    white-space: nowrap;
-    padding-bottom: 2px;
-    transition: bottom 0.5s;
-    z-index: 2;
-
-    &.color-palette-open {
-      bottom: 5rem;
-    }
-
-    span {
-      color: $color-white;
-      font-size: $fs12;
-      padding-right: 5px;
-    }
-  }
-
-  .cursor-tooltip {
-    background-color: $color-dark-bg;
-    border-radius: $br3;
-    color: $color-white;
-    font-size: $fs12;
-    padding: 3px 8px;
-    transition: none;
-    text-align: center;
-  }
-
-  .workspace-viewport {
-    overflow: hidden;
-    transition: none;
-    display: grid;
-    grid-template-rows: 20px 1fr;
-    grid-template-columns: 20px 1fr;
-    flex: 1;
-  }
-
-  .viewport {
-    cursor: none;
-    grid-column: 1 / span 2;
-    grid-row: 1 / span 2;
-    overflow: hidden;
-    position: relative;
-
-    .viewport-overlays {
-      cursor: initial;
-      overflow: hidden;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      z-index: 10;
-
-      .pixel-overlay {
-        left: 0;
-        pointer-events: initial;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-      }
-    }
-
-    .render-shapes {
-      height: 100%;
-      position: absolute;
-      width: 100%;
-    }
-
-    .frame-thumbnail-wrapper {
-      .fills,
-      .frame-clip-def {
-        opacity: 0;
-      }
-    }
-
-    .viewport-controls {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .page-canvas,
-  .page-layout {
-    overflow: visible;
-  }
-
-  /* Rules */
-
-  .empty-rule-square {
-    grid-column: 1 / span 1;
-    grid-row: 1 / span 1;
-  }
-
-  .horizontal-rule {
-    transition: none;
-    pointer-events: none;
-    grid-column: 2 / span 1;
-    grid-row: 1 / span 1;
-    z-index: 13;
-
-    rect {
-      fill: $color-canvas;
-    }
-    path {
-      stroke: $color-gray-20;
-    }
-  }
-
-  .vertical-rule {
-    transition: none;
-    pointer-events: none;
-    grid-column: 1 / span 1;
-    grid-row: 2 / span 1;
-    z-index: 13;
-
-    rect {
-      fill: $color-canvas;
-    }
-    path {
-      stroke: $color-gray-20;
-    }
-  }
-}
-
-.workspace-frame-label {
-  font-size: $fs12;
-}
-
-.multiuser-cursor {
-  z-index: 10000;
-  pointer-events: none;
-}
-
-.profile-name {
-  width: fit-content;
-  font-family: worksans;
-  padding: 2px 12px;
-  border-radius: $br4;
-  display: flex;
-  align-items: center;
-  height: 20px;
-  font-size: $fs12;
-  line-height: $lh-150;
-}
-
-.viewport-actions {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-left: auto;
-  margin-top: 2rem;
-  position: absolute;
-  width: 100%;
-  z-index: 12;
-  pointer-events: none;
-
-  .path-actions,
-  .viewport-actions-container {
-    pointer-events: initial;
-    display: flex;
-    flex-direction: row;
-    background: white;
-    border-radius: $br3;
-    padding: 0.5rem;
-    border: 1px solid $color-gray-20;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-
-  .viewport-actions-container {
-    padding-left: 1rem;
-    gap: 12px;
-    color: var(--color-gray-60);
-    align-items: center;
-    font-size: 12px;
-
-    .btn-primary,
-    .btn-secondary {
-      height: 24px;
-    }
-
-    .viewport-actions-title {
-      margin-right: 2rem;
-    }
-
-    .grid-edit-board-name {
-      font-weight: 600;
-    }
-  }
-
-  .viewport-actions-group {
-    display: flex;
-    flex-direction: row;
-    border-right: 1px solid $color-gray-20;
-  }
-
-  .viewport-actions-entry {
-    width: 28px;
-    height: 28px;
-    margin: 0 0.25rem;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: $br3;
-
-    svg {
-      pointer-events: none;
-      width: 20px;
-      height: 20px;
-    }
-
-    &:hover svg {
-      fill: $color-primary;
-    }
-
-    &.is-disabled {
-      cursor: initial;
-      svg {
-        fill: $color-gray-20;
-      }
-    }
-
-    &.is-toggled {
-      background: $color-black;
-
-      svg {
-        fill: $color-primary;
-      }
-    }
-  }
-
-  .viewport-actions-entry-wide {
-    width: 27px;
-    height: 20px;
-
-    svg {
-      width: 27px;
-      height: 20px;
-    }
-  }
-
-  .path-actions > :first-child .viewport-actions-entry {
-    margin-left: 0;
-  }
-
-  .path-actions > :last-child {
-    border: none;
-  }
-
-  .path-actions > :last-child .viewport-actions-entry {
-    margin-right: 0;
-  }
-}
diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index e725698d51..60803b2ee5 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -10,8 +10,8 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
-   [app.main.ui.cursors :as c]
    [app.main.ui.debug.components-preview :as cm]
+   [app.main.ui.debug.icons-preview :refer [icons-preview]]
    [app.main.ui.frame-preview :as frame-preview]
    [app.main.ui.icons :as i]
    [app.main.ui.messages :as msgs]
@@ -76,11 +76,7 @@
 
        :debug-icons-preview
        (when *assert*
-         [:div.debug-preview
-          [:h1 "Cursors"]
-          [:& c/debug-preview]
-          [:h1 "Icons"]
-          [:& i/debug-icons-preview]])
+         [:& icons-preview])
 
        (:dashboard-search
         :dashboard-projects
diff --git a/frontend/src/app/main/ui/components/button_link.cljs b/frontend/src/app/main/ui/components/button_link.cljs
index fadfbd3478..bac6e8e874 100644
--- a/frontend/src/app/main/ui/components/button_link.cljs
+++ b/frontend/src/app/main/ui/components/button_link.cljs
@@ -5,7 +5,9 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.button-link
+  (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data.macros :as dm]
    [app.util.keyboard :as kbd]
    [rumext.v2 :as mf]))
 
@@ -18,8 +20,8 @@
                        (when (kbd/enter? event)
                          (when (fn? on-click)
                            (on-click event)))))]
-    [:a.btn-primary.btn-large.button-link
-     {:class class
+    [:a
+     {:class (dm/str class " " (stl/css :button))
       :tab-index "0"
       :on-click on-click
       :on-key-down on-key-down}
diff --git a/frontend/src/app/main/ui/components/button_link.scss b/frontend/src/app/main/ui/components/button_link.scss
new file mode 100644
index 0000000000..3096853000
--- /dev/null
+++ b/frontend/src/app/main/ui/components/button_link.scss
@@ -0,0 +1,28 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.button {
+  appearance: none;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  font-family: "worksans", sans-serif;
+  justify-content: center;
+  min-width: 25px;
+  padding: 0 1rem;
+  transition: all 0.4s;
+  text-decoration: none !important;
+
+  height: 40px;
+
+  svg {
+    height: 20px;
+    width: 20px;
+  }
+}
diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs
index 134a01440b..4a1823868a 100644
--- a/frontend/src/app/main/ui/components/numeric_input.cljs
+++ b/frontend/src/app/main/ui/components/numeric_input.cljs
@@ -36,7 +36,7 @@
         title       (unchecked-get props "title")
         default     (unchecked-get props "default")
         nillable?   (unchecked-get props "nillable")
-        class       (d/nilv (unchecked-get props "className") "input-text")
+        class       (d/nilv (unchecked-get props "className") "")
 
         min-value   (d/parse-double min-value)
         max-value   (d/parse-double max-value)
diff --git a/frontend/src/app/main/ui/cursors.cljs b/frontend/src/app/main/ui/cursors.cljs
index 8b41528167..ec76bbd0bd 100644
--- a/frontend/src/app/main/ui/cursors.cljs
+++ b/frontend/src/app/main/ui/cursors.cljs
@@ -5,11 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.cursors
-  (:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn collect-cursors]])
-  (:require
-   [app.util.timers :as ts]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
+  (:require-macros [app.main.ui.cursors :refer [cursor-ref cursor-fn collect-cursors]]))
 
 ;; Static cursors
 (def ^:cursor comments (cursor-ref :comments 0 2 20))
@@ -53,28 +49,3 @@
 (def default
   "A collection of all icons"
   (collect-cursors))
-
-(mf/defc debug-preview
-  {::mf/wrap-props false}
-  []
-  (let [rotation (mf/use-state 0)
-        entries  (->> (seq (js/Object.entries default))
-                      (sort-by first))]
-
-    (mf/with-effect []
-      (ts/interval 100 #(reset! rotation inc)))
-
-    [:section.debug-icons-preview
-     (for [[key value] entries]
-       (let [value (if (fn? value) (value @rotation) value)]
-         [:div.cursor-item {:key key}
-          [:div {:style {:width "100px"
-                         :height "100px"
-                         :background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
-                         :background-size "contain"
-                         :background-repeat "no-repeat"
-                         :background-position "center"
-                         :cursor value}}]
-
-          [:span {:style {:white-space "nowrap"
-                          :margin-right "1rem"}} (pr-str key)]]))]))
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index 72f95e4ec2..3853c71f70 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -6,6 +6,9 @@
 
 @import "refactor/common-refactor.scss";
 
+// TODO: Legacy sass variables. We should remove them in favor of DS tokens.
+$bp-max-1366: "(max-width: 1366px)";
+
 $thumbnail-default-width: $s-252; // Default width
 $thumbnail-default-height: $s-168; // Default width
 
diff --git a/frontend/src/app/main/ui/debug/icons_preview.cljs b/frontend/src/app/main/ui/debug/icons_preview.cljs
new file mode 100644
index 0000000000..9380dc8726
--- /dev/null
+++ b/frontend/src/app/main/ui/debug/icons_preview.cljs
@@ -0,0 +1,54 @@
+(ns app.main.ui.debug.icons-preview
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.ui.cursors :as c]
+   [app.main.ui.icons :as i]
+   [app.util.timers :as ts]
+   [cuerdas.core :as str]
+   [rumext.v2 :as mf]))
+
+(mf/defc icons-gallery
+  {::mf/wrap-props false
+   ::mf/private true}
+  []
+  (let [entries   (->> (seq (js/Object.entries i/default))
+                       (sort-by first))]
+    [:section {:class (stl/css :gallery)}
+     (for [[key val] entries]
+       [:div {:class (stl/css :gallery-item)
+              :key key
+              :title key}
+        val
+        [:span key]])]))
+
+(mf/defc cursors-gallery
+  {::mf/wrap-props false
+   ::mf/private true}
+  []
+  (let [rotation (mf/use-state 0)
+        entries  (->> (seq (js/Object.entries c/default))
+                      (sort-by first))]
+
+    (mf/with-effect []
+      (ts/interval 100 #(reset! rotation inc)))
+
+    [:section {:class (stl/css :gallery)}
+     (for [[key value] entries]
+       (let [value (if (fn? value) (value @rotation) value)]
+         [:div {:key key :class (stl/css :gallery-item)}
+          [:div {:class (stl/css :cursor)
+                 :style {:background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
+                         :cursor value}}]
+
+          [:span (pr-str key)]]))]))
+
+
+(mf/defc icons-preview
+  {::mf/wrap-props false}
+  []
+  [:article {:class (stl/css :container)}
+   [:h2 {:class (stl/css :title)} "Cursors"]
+   [:& cursors-gallery]
+   [:h2 {:class (stl/css :title)} "Icons"]
+   [:& icons-gallery]])
+
diff --git a/frontend/src/app/main/ui/debug/icons_preview.scss b/frontend/src/app/main/ui/debug/icons_preview.scss
new file mode 100644
index 0000000000..673c1b0658
--- /dev/null
+++ b/frontend/src/app/main/ui/debug/icons_preview.scss
@@ -0,0 +1,51 @@
+@use "common/refactor/common-refactor.scss" as *;
+
+.container {
+  display: grid;
+  row-gap: 1rem;
+  height: 100vh;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.title {
+  @include bigTitleTipography;
+  color: var(--color-foreground-primary);
+}
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 120px);
+  grid-template-rows: repeat(auto-fill, 120px);
+  gap: 1rem;
+
+  --cell-size: 64px;
+}
+
+.gallery-item {
+  display: grid;
+  place-items: center;
+  row-gap: 0.5rem;
+  grid-template-rows: var(--cell-size) 1fr;
+  padding: 0.5rem;
+
+  color: var(--color-foreground-primary);
+  word-break: break-word;
+  @include bodySmallTypography;
+
+  svg {
+    width: var(--cell-size);
+    height: var(--cell-size);
+    fill: none;
+    color: transparent;
+    stroke: var(--color-accent-primary);
+  }
+}
+
+.cursor {
+  width: var(--cell-size);
+  height: var(--cell-size);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index 6365f0fe9c..6e22292f96 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -86,8 +86,9 @@
        [:& palette {:layout layout
                     :on-change-palette-size on-resize-palette}])
 
-     [:section.workspace-content
+     [:section
       {:key (dm/str "workspace-" page-id)
+       :class (stl/css :workspace-content)
        :ref node-ref}
 
       [:section {:class (stl/css :workspace-viewport)}
@@ -203,9 +204,9 @@
        [:& (mf/provider ctx/current-page-id) {:value page-id}
         [:& (mf/provider ctx/components-v2) {:value components-v2?}
          [:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
-          [:section#workspace-refactor {:class (stl/css :workspace)
-                                        :style {:background-color background-color
-                                                :touch-action "none"}}
+          [:section {:class (stl/css :workspace)
+                     :style {:background-color background-color
+                             :touch-action "none"}}
            [:& context-menu]
 
            (if ^boolean file-ready?
diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss
index 0cc517eae5..f190164cff 100644
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@@ -6,21 +6,9 @@
 
 @import "refactor/common-refactor.scss";
 
-// Work Sans
-@include font-face("worksans", "WorkSans-Regular", normal);
-@include font-face("worksans", "WorkSans-Medium", "500");
-@include font-face("worksans", "WorkSans-Bold", bold);
-
-// Space mono
-@include font-face("robotomono", "RobotoMono-Regular", normal);
-
-:global(:root) {
-  --s-4: 0.25rem;
-  --layer-indentation-size: calc(var(--s-4) * 6);
-}
-
 .workspace {
   @extend .new-scrollbar;
+  --layer-indentation-size: calc($s-4 * 6);
   width: 100vw;
   height: 100vh;
   max-height: 100vh;
@@ -42,6 +30,10 @@
 }
 
 .workspace-content {
+  background-color: var(--color-canvas);
+  display: flex;
+  padding: 0;
+  margin: 0;
   grid-area: viewport;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/coordinates.cljs b/frontend/src/app/main/ui/workspace/coordinates.cljs
index 89717ef201..5ad5dfc572 100644
--- a/frontend/src/app/main/ui/workspace/coordinates.cljs
+++ b/frontend/src/app/main/ui/workspace/coordinates.cljs
@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.coordinates
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.main.streams :as ms]
    [app.main.ui.hooks :as hooks]
@@ -13,8 +14,9 @@
 (mf/defc coordinates
   [{:keys [colorpalette?]}]
   (let [coords (hooks/use-rxsub ms/mouse-position)]
-    [:ul.coordinates {:class (when colorpalette? "color-palette-open")}
-     [:span {:alt "x"}
+    [:div {:class (stl/css-case :container-color-palette-open colorpalette?
+                                :container true)}
+     [:span {:alt "x" :class (stl/css :coordinate)}
       (str "X: " (:x coords "-"))]
-     [:span {:alt "y"}
+     [:span {:alt "y" :class (stl/css :coordinate)}
       (str "Y: " (:y coords "-"))]]))
diff --git a/frontend/src/app/main/ui/workspace/coordinates.scss b/frontend/src/app/main/ui/workspace/coordinates.scss
new file mode 100644
index 0000000000..f722e15261
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/coordinates.scss
@@ -0,0 +1,33 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+
+$width-settings-bar: 256px;
+
+.container {
+  background-color: var(--db-primary);
+  border-radius: $br-4;
+  bottom: 0px;
+  padding: $s-2 $s-8;
+  position: fixed;
+  right: calc(#{$width-settings-bar} + #{$s-24});
+  text-align: center;
+  white-space: nowrap;
+  transition: bottom 0.5s;
+  z-index: 2;
+  display: flex;
+  column-gap: 0.5rem;
+}
+
+.container-color-palette-open {
+  bottom: $s-64;
+}
+
+.coordinate {
+  color: var(--df-primary);
+  font-size: $fs-12;
+}
diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs
index bf3f262eaf..d643ecb8df 100644
--- a/frontend/src/app/main/ui/workspace/palette.cljs
+++ b/frontend/src/app/main/ui/workspace/palette.cljs
@@ -44,7 +44,7 @@
         calculate-padding-left (+ rulers-width (or left-sidebar-size min-left-sidebar-width) left-padding 1)]
 
     #js {"paddingLeft" (dm/str calculate-padding-left "px")
-         "paddingRight" "calc(var(--s-4) * 70)"}))
+         "paddingRight" "280px"}))
 
 (mf/defc palette
   [{:keys [layout on-change-palette-size]}]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 8b40932b4b..ffec58e41c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -480,7 +480,7 @@
               [:div {:class (stl/css :radius-1)
                      :title (tr "workspace.options.radius")}
                [:span {:class (stl/css :icon)}  i/corner-radius]
-               [:input.input-text
+               [:input
                 {:type "number"
                  :placeholder "Mixed"
                  :min 0
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
index 7c4a5a500f..1d6d009666 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
@@ -36,7 +36,6 @@
         [:span {:class (stl/css :attr-name)} label]
         [:div  {:class (stl/css :attr-input)}
          [:input {:value value
-                  :class "input-text"
                   :on-change handle-change}]]
         [:div  {:class (stl/css :attr-actions)}
          [:button {:class (stl/css :attr-action-btn)
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index 670bd2c4cd..789df3efc6 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.viewport
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.colors :as clr]
    [app.common.data :as d]
@@ -276,9 +277,9 @@
     (hooks/setup-shortcuts node-editing? drawing-path? text-editing? grid-editing?)
     (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
 
-    [:div.viewport {:style #js {"--zoom" zoom} :data-testid "viewport"}
+    [:div {:class (stl/css :viewport) :style #js {"--zoom" zoom} :data-testid "viewport"}
      [:& top-bar/top-bar {:layout layout}]
-     [:div.viewport-overlays
+     [:div {:class (stl/css :viewport-overlays)}
       ;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
       ;; inside a foreign object "dummy" so this awkward behaviour is take into account
       [:svg {:style {:top 0 :left 0 :position "fixed" :width "100%" :height "100%" :opacity (when-not (dbg/enabled? :html-text) 0)}}
@@ -308,8 +309,9 @@
                                          :layout layout
                                          :viewport-ref viewport-ref}])]
 
-     [:svg.render-shapes
+     [:svg
       {:id "render"
+       :class (stl/css :render-shapes)
        :xmlns "http://www.w3.org/2000/svg"
        :xmlnsXlink "http://www.w3.org/1999/xlink"
        :xmlns:penpot "https://penpot.app/xmlns"
@@ -359,7 +361,7 @@
        :key (str "viewport" page-id)
        :view-box (utils/format-viewbox vbox)
        :ref on-viewport-ref
-       :class (dm/str @cursor (when drawing-tool " drawing"))
+       :class (dm/str @cursor (when drawing-tool " drawing") " " (stl/css :viewport-controls))
        :style {:touch-action "none"}
        :fill "none"
 
diff --git a/frontend/src/app/main/ui/workspace/viewport.scss b/frontend/src/app/main/ui/workspace/viewport.scss
new file mode 100644
index 0000000000..647ce88a4b
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/viewport.scss
@@ -0,0 +1,49 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+
+.viewport {
+  cursor: none;
+  grid-column: 1 / span 2;
+  grid-row: 1 / span 2;
+  overflow: hidden;
+  position: relative;
+}
+
+.viewport-controls {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.render-shapes {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.viewport-overlays {
+  cursor: initial;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+
+  .pixel-overlay {
+    left: 0;
+    pointer-events: initial;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+}
diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.cljs b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
index e5d019464f..f2909b239e 100644
--- a/frontend/src/app/main/ui/workspace/viewport/presence.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.viewport.presence
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
    [app.main.refs :as refs]
@@ -40,15 +41,15 @@
                     (dm/str (str/slice fullname 0 12) "...")
                     fullname)]
 
-    [:g.multiuser-cursor {:transform transform}
+    [:g {:class (stl/css :multiuser-cursor) :transform transform}
      [:path {:fill bg-color :d pointer-path}]
      [:g {:transform "translate(17 -10)"}
       [:foreignObject {:x -0.3
                        :y -12.5
                        :width 300
                        :height 120}
-       [:div.profile-name {:style {:background-color bg-color
-                                   :color fg-color}}
+       [:div {:class (stl/css :profile-name)
+              :style {:background-color bg-color :color fg-color}}
         fullname]]]]))
 
 (mf/defc active-cursors
@@ -74,8 +75,3 @@
         :zoom zoom
         :profile (get users (:profile-id session))
         :key (dm/str (:id session))}])))
-
-
-
-
-
diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.scss b/frontend/src/app/main/ui/workspace/viewport/presence.scss
new file mode 100644
index 0000000000..26e607a995
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/viewport/presence.scss
@@ -0,0 +1,18 @@
+@use "refactor/common-refactor.scss" as *;
+
+.profile-name {
+  width: fit-content;
+  font-family: worksans;
+  padding: 2px 12px;
+  border-radius: $br-4;
+  display: flex;
+  align-items: center;
+  height: 20px;
+  font-size: $fs-12;
+  line-height: $lh-150;
+}
+
+.multiuser-cursor {
+  z-index: 10000;
+  pointer-events: none;
+}
diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
index a9da0fd7c0..615ea9db0e 100644
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@@ -40,7 +40,7 @@
                :pattern-units "userSpaceOnUse"}
      [:path {:d "M 1 0 L 0 0 0 1"
              :style {:fill "none"
-                     :stroke (if (dbg/enabled? :pixel-grid) "red" "var(--color-info)")
+                     :stroke (if (dbg/enabled? :pixel-grid) "red" "var(--status-color-info-500)")
                      :stroke-opacity (if (dbg/enabled? :pixel-grid) 1 "0.2")
                      :stroke-width (str (/ 1 zoom))}}]]]
    [:rect {:x (:x vbox)
diff --git a/frontend/src/app/util/forms.cljs b/frontend/src/app/util/forms.cljs
index 940b982596..8cbb792b2f 100644
--- a/frontend/src/app/util/forms.cljs
+++ b/frontend/src/app/util/forms.cljs
@@ -159,7 +159,7 @@
                      (ifn? type) (type (:type error))
                      :else false))]
     (when show?
-      [:ul.form-errors
+      [:ul
        [:li {:key (:code error)} (tr (:message error))]])))
 
 (defn error-class
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index ce42f642a2..d96dca56af 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4417,13 +4417,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"animate.css@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "animate.css@npm:4.1.1"
-  checksum: 10c0/28fcf5a5f502e4c12186846d22aa1cd63b835955160a97116930c78bff8a89135aa5c57f94010252a29456ada7cfc8ed8791cac02521ec6402befaf883937159
-  languageName: node
-  linkType: hard
-
 "ansi-colors@npm:^1.0.1":
   version: 1.1.0
   resolution: "ansi-colors@npm:1.1.0"
@@ -7922,7 +7915,6 @@ __metadata:
     "@storybook/react-vite": "npm:^7.6.17"
     "@storybook/testing-library": "npm:^0.2.2"
     "@types/node": "npm:^20.11.20"
-    animate.css: "npm:^4.1.1"
     autoprefixer: "npm:^10.4.19"
     compression: "npm:^1.7.4"
     concurrently: "npm:^8.2.2"