diff --git a/front/core/components/data-viewer/index.html b/front/core/components/data-viewer/index.html
index dd696fda3a..8c843d8693 100644
--- a/front/core/components/data-viewer/index.html
+++ b/front/core/components/data-viewer/index.html
@@ -2,7 +2,7 @@
     <div ng-transclude></div>
     <vn-pagination
         model="$ctrl.model"
-        pad-medium-top>
+        class="vn-pt-md">
     </vn-pagination>
 </div>
 <div
diff --git a/front/core/components/label-value/style.scss b/front/core/components/label-value/style.scss
index 9737642e52..d512e51d16 100644
--- a/front/core/components/label-value/style.scss
+++ b/front/core/components/label-value/style.scss
@@ -8,9 +8,6 @@ vn-label-value > section {
             content: ':';
         }
     }
-    & > span {
-        color: $color-font;
-    }
     & > vn-icon {
         vertical-align: middle;
         color: $color-font-secondary;
diff --git a/front/core/components/list/style.scss b/front/core/components/list/style.scss
index 3a6d0d6d9e..7560d3288a 100644
--- a/front/core/components/list/style.scss
+++ b/front/core/components/list/style.scss
@@ -14,7 +14,7 @@
         color: inherit;
     
         & > vn-horizontal {
-            padding: $pad-medium;
+            padding: $spacing-md;
     
             & > vn-one {
                 overflow: hidden;
diff --git a/front/core/components/searchbar/style.scss b/front/core/components/searchbar/style.scss
index e663f7cb9c..3915c20890 100644
--- a/front/core/components/searchbar/style.scss
+++ b/front/core/components/searchbar/style.scss
@@ -13,6 +13,6 @@ vn-searchbar {
     max-height: 48em;
 
     & > form {
-        padding: $pad-large;
+        padding: $spacing-lg;
     }
 }
\ No newline at end of file
diff --git a/front/core/components/subtitle/subtitle.html b/front/core/components/subtitle/subtitle.html
index ac00ac0c27..40c244006a 100644
--- a/front/core/components/subtitle/subtitle.html
+++ b/front/core/components/subtitle/subtitle.html
@@ -1,2 +1,2 @@
-<h5 style="margin-top: 0;" class="margin-medium-bottom" ng-transclude>
+<h5 style="margin-top: 0;" class="vn-mb-md" ng-transclude>
 </h5>
\ No newline at end of file
diff --git a/front/core/components/title/title.html b/front/core/components/title/title.html
index 773b400407..cfdad746fa 100644
--- a/front/core/components/title/title.html
+++ b/front/core/components/title/title.html
@@ -1,3 +1,3 @@
-<h3 style="margin-top: 0;" class="margin-medium-bottom" translate>
+<h3 style="margin-top: 0;" class="vn-mb-md" translate>
         <ng-transclude></ng-transclude>
 </h3>
\ No newline at end of file
diff --git a/front/core/directives/uvc.html b/front/core/directives/uvc.html
index 0248aefc12..907ea6f2a2 100644
--- a/front/core/directives/uvc.html
+++ b/front/core/directives/uvc.html
@@ -8,10 +8,10 @@
             class="modal-form"
             vn-id="uvc">
             <tpl-body>
-                <vn-horizontal pad-medium class="header">
+                <vn-horizontal class="vn-pa-md header">
                     <h5><span translate>Fields to show</span></h5>
                 </vn-horizontal>
-                <div pad-medium>
+                <div class="vn-pa-md">
                     <vn-horizontal ng-repeat="field in fields">
                         <vn-check
                             vn-one label="{{titles[field]}}"
diff --git a/front/core/directives/zoom-image.js b/front/core/directives/zoom-image.js
index db7de27be9..c351570052 100644
--- a/front/core/directives/zoom-image.js
+++ b/front/core/directives/zoom-image.js
@@ -1,4 +1,5 @@
 import ngModule from '../module';
+import './zoom-image.scss';
 
 export function directive($timeout) {
     let container;
@@ -24,9 +25,8 @@ export function directive($timeout) {
     }
 
     function onKeyDown(event) {
-        if (event.keyCode === 27) {
+        if (event.keyCode === 27)
             destroyContainers();
-        }
     }
 
     function destroyContainers() {
@@ -47,9 +47,9 @@ export function directive($timeout) {
                 event.preventDefault();
 
                 let src = $attrs.zoomImage || $attrs.src;
-                if (src) {
+                if (src)
                     createContainers(src);
-                } else
+                else
                     throw new Error('No image source detected');
             });
         }
diff --git a/front/core/styles/zoom-image.scss b/front/core/directives/zoom-image.scss
similarity index 100%
rename from front/core/styles/zoom-image.scss
rename to front/core/directives/zoom-image.scss
index ebb38d437b..e075ff3a18 100644
--- a/front/core/styles/zoom-image.scss
+++ b/front/core/directives/zoom-image.scss
@@ -1,6 +1,3 @@
-img[zoom-image]{
-    cursor: zoom-in;
-}
 
 .vn-zoom-image {
     width: 100%;
@@ -27,3 +24,6 @@ img[zoom-image]{
         }
     }
 }
+img[zoom-image]{
+    cursor: zoom-in;
+}
diff --git a/front/salix/styles/background.scss b/front/core/styles/background.scss
similarity index 100%
rename from front/salix/styles/background.scss
rename to front/core/styles/background.scss
diff --git a/front/salix/styles/border.scss b/front/core/styles/border.scss
similarity index 100%
rename from front/salix/styles/border.scss
rename to front/core/styles/border.scss
diff --git a/front/salix/styles/effects.scss b/front/core/styles/effects.scss
similarity index 99%
rename from front/salix/styles/effects.scss
rename to front/core/styles/effects.scss
index a337acce17..92ae84c03d 100644
--- a/front/salix/styles/effects.scss
+++ b/front/core/styles/effects.scss
@@ -1,4 +1,3 @@
-
 @import "./variables";
 
 %clickable {
diff --git a/front/salix/styles/font-family.scss b/front/core/styles/font-family.scss
similarity index 58%
rename from front/salix/styles/font-family.scss
rename to front/core/styles/font-family.scss
index 38a87a3e80..caebc9f998 100644
--- a/front/salix/styles/font-family.scss
+++ b/front/core/styles/font-family.scss
@@ -10,3 +10,9 @@
     font-family: vn-font-bold;
     src: url(./fonts/Roboto-Bold.ttf);
 }
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./icons/Material-Design-Icons.woff2') format('woff2'); 
+}
diff --git a/front/salix/styles/fonts/Roboto-Bold.ttf b/front/core/styles/fonts/Roboto-Bold.ttf
similarity index 100%
rename from front/salix/styles/fonts/Roboto-Bold.ttf
rename to front/core/styles/fonts/Roboto-Bold.ttf
diff --git a/front/salix/styles/fonts/Roboto-Medium.ttf b/front/core/styles/fonts/Roboto-Medium.ttf
similarity index 100%
rename from front/salix/styles/fonts/Roboto-Medium.ttf
rename to front/core/styles/fonts/Roboto-Medium.ttf
diff --git a/front/salix/styles/fonts/Roboto-Regular.ttf b/front/core/styles/fonts/Roboto-Regular.ttf
similarity index 100%
rename from front/salix/styles/fonts/Roboto-Regular.ttf
rename to front/core/styles/fonts/Roboto-Regular.ttf
diff --git a/front/core/styles/Material-Design-Icons.woff2 b/front/core/styles/icons/Material-Design-Icons.woff2
similarity index 100%
rename from front/core/styles/Material-Design-Icons.woff2
rename to front/core/styles/icons/Material-Design-Icons.woff2
diff --git a/front/core/styles/salixfont.css b/front/core/styles/icons/salixfont.css
similarity index 100%
rename from front/core/styles/salixfont.css
rename to front/core/styles/icons/salixfont.css
diff --git a/front/core/styles/salixfont.svg b/front/core/styles/icons/salixfont.svg
similarity index 100%
rename from front/core/styles/salixfont.svg
rename to front/core/styles/icons/salixfont.svg
diff --git a/front/core/styles/salixfont.ttf b/front/core/styles/icons/salixfont.ttf
similarity index 100%
rename from front/core/styles/salixfont.ttf
rename to front/core/styles/icons/salixfont.ttf
diff --git a/front/core/styles/salixfont.woff b/front/core/styles/icons/salixfont.woff
similarity index 100%
rename from front/core/styles/salixfont.woff
rename to front/core/styles/icons/salixfont.woff
diff --git a/front/core/styles/index.js b/front/core/styles/index.js
index 0912fcd202..796d9bfde2 100644
--- a/front/core/styles/index.js
+++ b/front/core/styles/index.js
@@ -1,4 +1,11 @@
+import './effects.scss';
+import './background.scss';
+import './border.scss';
+import './font-family.scss';
+import './icons/salixfont.css';
+import './layout.scss';
 import './mdl-override.scss';
-import './mdi-override.css';
-import './zoom-image.scss';
-import './salixfont.css';
+import './responsive.scss';
+import './spacing.scss';
+import './text.scss';
+import './width.scss';
diff --git a/front/salix/styles/layout.scss b/front/core/styles/layout.scss
similarity index 89%
rename from front/salix/styles/layout.scss
rename to front/core/styles/layout.scss
index 7cf468725b..925526dca5 100644
--- a/front/salix/styles/layout.scss
+++ b/front/core/styles/layout.scss
@@ -23,11 +23,6 @@ html [wrap] {
 html [wrap-reverse] {
     flex-wrap: wrap-reverse;
 }
-html [scrollable] {
-    min-height: 1px;
-    flex: 1;
-    flex-basis: 0.000000001px;
-}
 
 /* Horizontal & vertical childs */
 
diff --git a/front/core/styles/mdi-override.css b/front/core/styles/mdi-override.css
deleted file mode 100644
index b63750edfc..0000000000
--- a/front/core/styles/mdi-override.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url('./Material-Design-Icons.woff2') format('woff2'); 
-}
\ No newline at end of file
diff --git a/front/core/styles/mdl-override.scss b/front/core/styles/mdl-override.scss
index 4c7b295b81..8e6c8509ca 100644
--- a/front/core/styles/mdl-override.scss
+++ b/front/core/styles/mdl-override.scss
@@ -8,41 +8,54 @@ body {
     line-height: initial;
     font-size: 12pt;
 }
+
+// Textfield
+
+.mdl-textfield--floating-label {
+    &.is-focused, 
+    &.is-dirty, 
+    &.has-placeholder {
+        .mdl-textfield__label {
+            color: $color-main !important;
+        }
+    }
+}
+.mdl-textfield__label::after {
+    background-color: $color-main !important;
+}
+fieldset[disabled] .mdl-textfield,
+.mdl-textfield.is-disabled {
+    .mdl-textfield__input {
+        border: none !important;
+        color: inherit !important;
+    }
+    .mdl-textfield__label {
+        color: $color-main !important;
+    }
+}
+
+// Button
+
 .mdl-button {
     font-weight: bolder;
     color: $color-main;
 }
+.mdl-button--fab {
+    color: $color-font-dark !important; 
+    background-color: $color-main !important;
+}
 .mdl-button--colored {
-    color: white !important;
+    color: $color-font-dark !important;
 }
-.mdl-textfield--floating-label.is-focused .mdl-textfield__label, 
-.mdl-textfield--floating-label.is-dirty .mdl-textfield__label, 
-.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
-    color: $color-main !important;
-}
-.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
-    border: 2px solid $color-main;
-}
-fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline, .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
-    border: 2px solid rgba(0,0,0,.26);
-}
-.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
-    background: $color-main;
-}
-.mdl-textfield__label::after{
-    background-color: $color-main !important;
-}
-.mdl-button--colored,
-.mdl-button--colored:focus,
-.mdl-button--colored:active {
-    background-color: $color-main !important;
-}
-.mdl-button--colored:hover,
 .mdl-button--raised:hover {
     background-color: $color-main !important;
 }
-.mdl-button--fab{
-    color: white !important; 
-    background-color: $color-main !important;
+.mdl-button--colored {
+    &,
+    &:focus,
+    &:active,
+    &:hover {
+        background-color: $color-main !important;
+    }
 }
 
diff --git a/front/salix/styles/responsive.scss b/front/core/styles/responsive.scss
similarity index 100%
rename from front/salix/styles/responsive.scss
rename to front/core/styles/responsive.scss
diff --git a/front/core/styles/spacing.scss b/front/core/styles/spacing.scss
new file mode 100644
index 0000000000..96ec47935e
--- /dev/null
+++ b/front/core/styles/spacing.scss
@@ -0,0 +1,355 @@
+@import "./variables";
+
+/**
+ * CSS spacing classes
+ *
+ * vn-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]
+ *         T             D                                     S
+ * 
+ * T - type
+ *     - values: p (padding), m (margin)
+ * 
+ * D - direction
+ *     - values:
+ *             t (top), r (right), b (bottom), l (left),
+ *             a (all), x (both left & right), y (both top & bottom)
+ * 
+ * S - size
+ *     - values:
+ *             none,
+ *             auto (ONLY for specific margins: vn-ml-*, vn-mr-*, vn-mx-*),
+ *             xs (extra small),
+ *             sm (small),
+ *             md (medium),
+ *             lg (large),
+ *             xl (extra large)
+ */
+
+//++++++++++++++++++++++++++++++++++++++++++++++++ Padding
+
+// None
+
+.vn-pa-none {
+    padding: 0;
+}
+.vn-pl-none {
+    padding-left: 0;
+}
+.vn-pr-none {
+    padding-right: 0;
+}
+.vn-pt-none {
+    padding-top: 0;
+}
+.vn-pb-none {
+    padding-bottom: 0;
+}
+.vn-py-none {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.vn-px-none {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+// Extra small
+
+.vn-pa-xs {
+    padding: $spacing-xs;
+}
+.vn-pl-xs {
+    padding-left: $spacing-xs;
+}
+.vn-pr-xs {
+    padding-right: $spacing-xs;
+}
+.vn-pt-xs {
+    padding-top: $spacing-xs;
+}
+.vn-pb-xs {
+    padding-bottom: $spacing-xs;
+}
+.vn-py-xs {
+    padding-top: $spacing-xs;
+    padding-bottom: $spacing-xs;
+}
+.vn-px-xs {
+    padding-left: $spacing-xs;
+    padding-right: $spacing-xs;
+}
+
+// Small
+
+.vn-pa-sm {
+        padding: $spacing-sm;
+}
+.vn-pl-sm {
+    padding-left: $spacing-sm;
+}
+.vn-pr-sm {
+    padding-right: $spacing-sm;
+}
+.vn-pt-sm {
+    padding-top: $spacing-sm;
+}
+.vn-pb-sm {
+    padding-bottom: $spacing-sm;
+}
+.vn-py-sm {
+    padding-top: $spacing-sm;
+    padding-bottom: $spacing-sm;
+}
+.vn-px-sm {
+    padding-left: $spacing-sm;
+    padding-right: $spacing-sm;
+}
+
+// Medium
+
+.vn-pa-md {
+    padding: $spacing-md;
+}
+.vn-pl-md {
+    padding-left: $spacing-md;
+}
+.vn-pr-md {
+    padding-right: $spacing-md;
+}
+.vn-pt-md {
+    padding-top: $spacing-md;
+}
+.vn-pb-md {
+    padding-bottom: $spacing-md;
+}
+.vn-py-md {
+    padding-top: $spacing-md;
+    padding-bottom: $spacing-md;
+}
+.vn-px-md {
+    padding-left: $spacing-md;
+    padding-right: $spacing-md;
+}
+
+// Large
+
+.vn-pa-lg {
+    padding: $spacing-lg;
+}
+.vn-pl-lg {
+    padding-left: $spacing-lg;
+}
+.vn-pr-lg {
+    padding-right: $spacing-lg;
+}
+.vn-pt-lg {
+    padding-top: $spacing-lg;
+}
+.vn-pb-lg {
+    padding-bottom: $spacing-lg;
+}
+.vn-py-lg {
+    padding-top: $spacing-lg;
+    padding-bottom: $spacing-lg;
+}
+.vn-px-lg {
+    padding-left: $spacing-lg;
+    padding-right: $spacing-lg;
+}
+
+// Extra large
+
+.vn-pa-xl {
+    padding: $spacing-xl;
+}
+.vn-pl-xl {
+    padding-left: $spacing-xl;
+}
+.vn-pr-xl {
+    padding-right: $spacing-xl;
+}
+.vn-pt-xl {
+    padding-top: $spacing-xl;
+}
+.vn-pb-xl {
+    padding-bottom: $spacing-xl;
+}
+.vn-py-xl {
+    padding-top: $spacing-xl;
+    padding-bottom: $spacing-xl;
+}
+.vn-px-xl {
+    padding-left: $spacing-xl;
+    padding-right: $spacing-xl;
+}
+
+//++++++++++++++++++++++++++++++++++++++++++++++++ Margin
+
+// None
+
+.vn-ma-none {
+    padding: 0;
+}
+.vn-ml-none {
+    padding-left: 0;
+}
+.vn-mr-none {
+    padding-right: 0;
+}
+.vn-mt-none {
+    padding-top: 0;
+}
+.vn-mb-none {
+    padding-bottom: 0;
+}
+.vn-my-none {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.vn-mx-none {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+// Auto
+
+.vn-ml-none {
+    padding-left: auto;
+}
+.vn-mr-none {
+    padding-right: auto;
+}
+.vn-mx-none {
+    padding-left: auto;
+    padding-right: auto;
+}
+
+// Extra small
+
+.vn-ma-xs {
+    margin: $spacing-xs;
+}
+.vn-mt-xs {
+    margin-top: $spacing-xs;
+}
+.vn-ml-xs {
+    margin-left: $spacing-xs;
+}
+.vn-mr-xs {
+    margin-right: $spacing-xs;
+}
+.vn-mb-xs {
+    margin-bottom: $spacing-xs;
+}
+.vn-my-xs {
+    margin-top: $spacing-xs;
+    margin-bottom: $spacing-xs;
+}
+.vn-mx-xs {
+    margin-left: $spacing-xs;
+    margin-right: $spacing-xs;
+}
+
+// Small
+
+.vn-ma-sm {
+    margin: $spacing-sm;
+}
+.vn-mt-sm {
+    margin-top: $spacing-sm;
+}
+.vn-ml-sm {
+    margin-left: $spacing-sm;
+}
+.vn-mr-sm {
+    margin-right: $spacing-sm;
+}
+.vn-mb-sm {
+    margin-bottom: $spacing-sm;
+}
+.vn-my-sm {
+    margin-top: $spacing-sm;
+    margin-bottom: $spacing-sm;
+}
+.vn-mx-sm {
+    margin-left: $spacing-sm;
+    margin-right: $spacing-sm;
+}
+
+// Medium
+
+.vn-ma-md {
+    margin: $spacing-md;
+}
+.vn-mt-md {
+    margin-top: $spacing-md;
+}
+.vn-ml-md {
+    margin-left: $spacing-md;
+}
+.vn-mr-md {
+    margin-right: $spacing-md;
+}
+.vn-mb-md {
+    margin-bottom: $spacing-md;
+}
+.vn-my-md {
+    margin-top: $spacing-md;
+    margin-bottom: $spacing-md;
+}
+.vn-mx-md {
+    margin-left: $spacing-md;
+    margin-right: $spacing-md;
+}
+
+// Large
+
+.vn-ma-lg {
+    margin: $spacing-lg;
+}
+.vn-mt-lg {
+    margin-top: $spacing-lg;
+}
+.vn-ml-lg {
+    margin-left: $spacing-lg;
+}
+.vn-mr-lg {
+    margin-right: $spacing-lg;
+}
+.vn-mb-lg {
+    margin-bottom: $spacing-lg;
+}
+.vn-my-lg {
+    margin-top: $spacing-lg;
+    margin-bottom: $spacing-lg;
+}
+.vn-mx-lg {
+    margin-left: $spacing-lg;
+    margin-right: $spacing-lg;
+}
+
+/* Huge */
+
+.vn-ma-xl {
+    margin: $spacing-xl;
+}
+.vn-mt-xl {
+    margin-top: $spacing-xl;
+}
+.vn-ml-xl {
+    margin-left: $spacing-xl;
+}
+.vn-mr-xl {
+    margin-right: $spacing-xl;
+}
+.vn-mb-xl {
+    margin-bottom: $spacing-xl;
+}
+.vn-my-xl {
+    margin-top: $spacing-xl;
+    margin-bottom: $spacing-xl;
+}
+.vn-mx-xl {
+    margin-left: $spacing-xl;
+    margin-right: $spacing-xl;
+}
diff --git a/front/salix/styles/text.scss b/front/core/styles/text.scss
similarity index 100%
rename from front/salix/styles/text.scss
rename to front/core/styles/text.scss
diff --git a/front/salix/styles/variables.scss b/front/core/styles/variables.scss
similarity index 92%
rename from front/salix/styles/variables.scss
rename to front/core/styles/variables.scss
index 5b96973f23..648095cf57 100644
--- a/front/salix/styles/variables.scss
+++ b/front/core/styles/variables.scss
@@ -12,20 +12,13 @@ $width-md: 50em;
 $width-lg: 80em;
 $width-xl: 100em;
 
-// Padding
+// Spacing
 
-$pad-none: 0;
-$pad-small: 8px;
-$pad-medium: 16px;
-$pad-large: 32px;
-
-// Margin
-
-$margin-none: 0;
-$margin-small: 8px;
-$margin-medium: 16px;
-$margin-large: 32px;
-$margin-huge: 100px;
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 32px;
+$spacing-xl: 100px;
 
 // Light theme
 
@@ -74,7 +67,7 @@ $color-alert-light: lighten($color-alert, 35%);
 $color-header: #3d3d3d;
 $color-bg: #222;
 $color-bg-dark: #222;
-$color-font: white;
+$color-font: #eee;
 $color-font-light: #aaa;
 $color-font-secondary: #777;
 $color-font-dark: white;
@@ -92,6 +85,7 @@ $color-alert: #f42121;
 $color-spacer: rgba(255, 255, 255, .3);
 $color-spacer-light: rgba(255, 255, 255, .12);
 $color-input-underline: rgba(255, 255, 255, .12);
+$color-input-underline-hover: rgba(255, 255, 255, .6);
 $color-shadow: rgba(0, 0, 0, .2);
 $color-hightlight: rgba(255, 255, 255, .15);
 $color-hover-cd: rgba(255, 255, 255, .1);
diff --git a/front/salix/styles/width.scss b/front/core/styles/width.scss
similarity index 100%
rename from front/salix/styles/width.scss
rename to front/core/styles/width.scss
diff --git a/front/salix/components/app/style.scss b/front/salix/components/app/style.scss
index 0622059781..efeceff89d 100644
--- a/front/salix/components/app/style.scss
+++ b/front/salix/components/app/style.scss
@@ -5,6 +5,7 @@ body {
     overflow: auto;
     height: 100%;
     font-family: vn-font;
+    color: $color-font;
 }
 vn-app {
     height: inherit;
@@ -61,7 +62,7 @@ vn-app {
         }
         .content-block {
             box-sizing: border-box;
-            padding: $pad-medium;
+            padding: $spacing-md;
             height: inherit;
 
             form vn-horizontal {
diff --git a/front/salix/components/descriptor/style.scss b/front/salix/components/descriptor/style.scss
index 782a57e66b..24164da216 100644
--- a/front/salix/components/descriptor/style.scss
+++ b/front/salix/components/descriptor/style.scss
@@ -27,13 +27,13 @@
         }
     }
     & > .body {
-        padding: $pad-small;
+        padding: $spacing-sm;
 
         & > * {
-            padding: $pad-small;
+            padding: $spacing-sm;
         }
         & > .attributes > h5 {
-            padding-bottom: $pad-small;
+            padding-bottom: $spacing-sm;
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
@@ -45,7 +45,7 @@
             padding: 0;
     
             & > vn-icon {
-                padding: $pad-small;
+                padding: $spacing-sm;
                 color: $color-secondary;
                 font-size: 1.5em;
     
@@ -62,7 +62,7 @@
             padding: 0;
             
             & > a {
-                padding: $pad-small;
+                padding: $spacing-sm;
     
                 & > vn-icon {
                     font-size: 1.8em;
diff --git a/front/salix/components/left-menu/left-menu.html b/front/salix/components/left-menu/left-menu.html
index 31dcb7903f..12cea49a3b 100644
--- a/front/salix/components/left-menu/left-menu.html
+++ b/front/salix/components/left-menu/left-menu.html
@@ -1,4 +1,4 @@
-<ul ng-if="::$ctrl.items.length > 0" pad-medium-v>
+<ul ng-if="::$ctrl.items.length > 0" class="vn-py-md">
     <li ng-repeat="item in ::$ctrl.items" name="{{::item.description}}">
         <a ui-sref="{{::item.state}}"
             ng-class="{active: item.active && !item.childs, expanded: item.active, collapsed: !item.active}"
diff --git a/front/salix/components/main-menu/main-menu.html b/front/salix/components/main-menu/main-menu.html
index 2b88da113f..7baea2acf8 100644
--- a/front/salix/components/main-menu/main-menu.html
+++ b/front/salix/components/main-menu/main-menu.html
@@ -19,7 +19,7 @@
     </vn-icon-button>
 </div>
 <vn-menu vn-id="apps-menu">
-    <ul pad-small class="modules-menu">
+    <ul class="modules-menu vn-pa-sm">
         <li ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}">
             <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
             <span translate>{{::mod.name}}</span>
diff --git a/front/salix/components/summary/style.scss b/front/salix/components/summary/style.scss
index fd1e99a222..c9a2b74abe 100644
--- a/front/salix/components/summary/style.scss
+++ b/front/salix/components/summary/style.scss
@@ -6,7 +6,7 @@
 
     & > div {
         & > h5 {
-            padding: $pad-small;
+            padding: $spacing-sm;
             border: none;
             background: $color-main;
             color: $color-font-dark;
@@ -19,10 +19,10 @@
         }
         & > vn-horizontal {
             flex-wrap: wrap;
-            padding: $pad-medium;
+            padding: $spacing-md;
 
             h4 {
-                margin-bottom: $margin-medium;
+                margin-bottom: $spacing-md;
                 text-transform: uppercase;
                 font-size: 15pt;
                 line-height: 1;
@@ -36,7 +36,7 @@
                 text-overflow: ellipsis;
             }
             & > * {
-                margin: $margin-small;
+                margin: $spacing-sm;
                 min-width: 14em;
                 overflow: hidden;
                 padding: 0;
diff --git a/front/salix/components/user-configuration-popover/index.html b/front/salix/components/user-configuration-popover/index.html
index 352a9acb6b..ea3b3d1cda 100644
--- a/front/salix/components/user-configuration-popover/index.html
+++ b/front/salix/components/user-configuration-popover/index.html
@@ -11,10 +11,10 @@
     order="code">
 </vn-crud-model>
 <vn-popover vn-id="popover">
-    <vn-vertical class="user-configuration pad-medium">
-        <div class="profile-card pad-medium-bottom">
+    <vn-vertical class="user-configuration vn-pa-md">
+        <div class="profile-card vn-pb-md">
             <vn-icon icon="person"></vn-icon>
-            <div pad-medium-left>
+            <div class="vn-pl-md">
                 <div class="user">
                     <div class="ellipsize">
                         {{$root.user.nickname}}
diff --git a/front/salix/styles/index.js b/front/salix/styles/index.js
index b6eebb7161..5ea238d2bf 100644
--- a/front/salix/styles/index.js
+++ b/front/salix/styles/index.js
@@ -1,14 +1,4 @@
-import './responsive.scss';
-import './layout.scss';
-import './margin.scss';
-import './padding.scss';
-import './border.scss';
-import './background.scss';
-import './font-family.scss';
-import './text.scss';
 import './misc.scss';
-import './effects.scss';
-import './order-product.scss';
 import './modal-form.scss';
+import './order-product.scss';
 import './photo-list.scss';
-import './width.scss';
diff --git a/front/salix/styles/margin.scss b/front/salix/styles/margin.scss
deleted file mode 100644
index 640bea9ed4..0000000000
--- a/front/salix/styles/margin.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-@import "variables";
-
-/* None */
-
-html [margin-none], .margin-none {
-    margin: $margin-none;
-}
-
-/* Small */
-
-html [margin-small], .margin-small {
-    margin: $margin-small;
-}
-html [margin-small-top], .margin-small-top {
-    margin-top: $margin-small;
-}
-html [margin-small-left], .margin-small-left {
-    margin-left: $margin-small;
-}
-html [margin-small-right], .margin-small-right {
-    margin-right: $margin-small;
-}
-html [margin-small-bottom], .margin-small-bottom {
-    margin-bottom: $margin-small;
-}
-html [margin-small-v], .margin-small-v {
-    margin-top: $margin-small;
-    margin-bottom: $margin-small;
-}
-html [margin-small-h], .margin-small-h {
-    margin-left: $margin-small;
-    margin-right: $margin-small;
-}
-
-/* Medium */
-
-html [margin-medium], .margin-medium {
-    margin: $margin-medium;
-}
-html [margin-medium-top], .margin-medium-top {
-    margin-top: $margin-medium;
-}
-html [margin-medium-left], .margin-medium-left {
-    margin-left: $margin-medium;
-}
-html [margin-medium-right], .margin-medium-right {
-    margin-right: $margin-medium;
-}
-html [margin-medium-bottom], .margin-medium-bottom {
-    margin-bottom: $margin-medium;
-}
-html [margin-medium-v], .margin-medium-v {
-    margin-top: $margin-medium;
-    margin-bottom: $margin-medium;
-}
-html [margin-medium-h], .margin-medium-h {
-    margin-left: $margin-medium;
-    margin-right: $margin-medium;
-}
-
-/* Large */
-
-html [margin-large], .margin-large {
-    margin: $margin-large;
-}
-html [margin-large-top], .margin-large-top {
-    margin-top: $margin-large;
-}
-html [margin-large-left], .margin-large-left {
-    margin-left: $margin-large;
-}
-html [margin-large-right], .margin-large-right {
-    margin-right: $margin-large;
-}
-html [margin-large-bottom], .margin-large-bottom {
-    margin-bottom: $margin-large;
-}
-html [margin-large-v], .margin-large-v {
-    margin-top: $margin-large;
-    margin-bottom: $margin-large;
-}
-html [margin-large-h], .margin-large-h {
-    margin-left: $margin-large;
-    margin-right: $margin-large;
-}
-
-/* Huge */
-
-html [margin-huge], .margin-huge {
-    margin: $margin-huge;
-}
-html [margin-huge-top], .margin-huge-top {
-    margin-top: $margin-huge;
-}
-html [margin-huge-left], .margin-huge-left {
-    margin-left: $margin-huge;
-}
-html [margin-huge-right], .margin-huge-right {
-    margin-right: $margin-huge;
-}
-html [margin-huge-bottom], .margin-huge-bottom {
-    margin-bottom: $margin-huge;
-}
-html [margin-huge-v], .margin-huge-v {
-    margin-top: $margin-huge;
-    margin-bottom: $margin-huge;
-}
-html [margin-huge-h], .margin-huge-h {
-    margin-left: $margin-huge;
-    margin-right: $margin-huge;
-}
-
-
-/* Minus Small */
-
-html [margin--small], .margin--small {
-    margin: -$margin-small;
-}
-html [margin--small-top], .margin--small-top {
-    margin-top: -$margin-small;
-}
-html [margin--small-left], .margin--small-left {
-    margin-left: -$margin-small;
-}
-html [margin--small-right], .margin--small-right {
-    margin-right: -$margin-small;
-}
-html [margin--small-bottom], .margin--small-bottom {
-    margin-bottom: -$margin-small;
-}
-html [margin--small-v], .margin--small-v {
-    margin-top: -$margin-small;
-    margin-bottom: -$margin-small;
-}
-html [margin--small-h], .margin--small-h {
-    margin-left: -$margin-small;
-    margin-right: -$margin-small;
-}
\ No newline at end of file
diff --git a/front/salix/styles/misc.scss b/front/salix/styles/misc.scss
index 5bc3d54dbf..cccb0fc921 100644
--- a/front/salix/styles/misc.scss
+++ b/front/salix/styles/misc.scss
@@ -52,7 +52,7 @@ vn-bg-title {
 .form {
     height: 100%;
     box-sizing: border-box;
-    padding: $pad-large;
+    padding: $spacing-lg;
     max-width: 1000px;
 }
 html [fixed-bottom-right] {
@@ -82,7 +82,7 @@ button {
 }
 vn-button-bar {
     display: block;
-    margin-top: $margin-small;
+    margin-top: $spacing-sm;
 }
 vn-tool-bar {
     display: flex;
@@ -94,23 +94,11 @@ vn-tool-bar {
 input[type="submit"]:disabled, button:disabled {
     opacity: 0.7;
 }
-
-/** START - FORM ELEMENTS DISABLED **/
-
-fieldset[disabled] .mdl-textfield .mdl-textfield__input,
-fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
-.mdl-textfield.is-disabled .mdl-textfield__input, 
-.mdl-checkbox.is-disabled .mdl-checkbox__label {
-    border: none !important;
-    color: inherit !important;
-}	
-fieldset[disabled] .mdl-textfield .mdl-textfield__label,
-.mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
-    color: $color-main !important;
+html [scrollable] {
+    min-height: 1px;
+    flex: 1;
+    flex-basis: 0.000000001px;
 }
-
-/** END - FORM ELEMENTS DISABLED **/
-
 .ellipsize {
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/front/salix/styles/modal-form.scss b/front/salix/styles/modal-form.scss
index f1c1946b82..f633c8e24b 100644
--- a/front/salix/styles/modal-form.scss
+++ b/front/salix/styles/modal-form.scss
@@ -1,10 +1,11 @@
 @import './variables';
 
 vn-dialog.modal-form {
-    vn-horizontal.header{
-        padding: $pad-small;
+    vn-horizontal.header {
+        padding: $spacing-sm;
         background-color: $color-main;
-        h5{
+
+        h5 {
             color: white;
             margin: 0 auto;
         }
@@ -15,23 +16,22 @@ vn-dialog.modal-form {
     table {
         width: 100%
     }
-    & > div{
-        padding: 0!important;
+    & > div {
+        padding: 0 !important;
     }
     vn-textfield {
         width: 100%;
     }
-    .buttons{
-        margin-top: 0!important;
+    .buttons {
+        margin-top: 0 !important;
     }
-
-    p{
+    p {
         display: none;
     }
-    button.close > vn-icon{
-        color: white!important;
+    button.close > vn-icon {
+        color: white !important;
     }
     vn-ticket-sale-edit-discount > div {
-        padding-bottom: 0!important;
+        padding-bottom: 0 !important;
     }
 }
\ No newline at end of file
diff --git a/front/salix/styles/order-product.scss b/front/salix/styles/order-product.scss
index fa00c66397..9c44b30eb6 100644
--- a/front/salix/styles/order-product.scss
+++ b/front/salix/styles/order-product.scss
@@ -7,7 +7,7 @@
 
     & > .product {
         box-sizing: border-box;
-        padding: $pad-small;
+        padding: $spacing-sm;
         width: 28em;
         overflow: hidden;
 
@@ -21,7 +21,7 @@
 
                 img {
                     width: 100%;
-                    height: 100%
+                    height: 100%;
                 }
             }
             .description {
@@ -57,7 +57,7 @@
                     height: 3em;
 
                     & > vn-label-value {
-                        font-size: .8em
+                        font-size: .8em;
                     }
                 }  
             }
@@ -77,7 +77,7 @@
 
                         &:first-child,
                         &:last-child {
-                            font-size: 1.4em
+                            font-size: 1.4em;
                         }
                     }
 
@@ -87,7 +87,7 @@
                 } 
                 & > .priceKg {
                     color: $color-font-secondary;
-                    font-size: .8em
+                    font-size: .8em;
                 }
             }
         }
diff --git a/front/salix/styles/padding.scss b/front/salix/styles/padding.scss
deleted file mode 100644
index 4d0e325272..0000000000
--- a/front/salix/styles/padding.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-@import "./variables";
-
-/* None */
-
-html [pad-none], .pad-none {
-  padding: $pad-none;
-}
-
-/* Small */
-
-html [pad-small], .pad-small {
-    padding: $pad-small;
-}
-html [pad-small-left], .pad-small-left {
-  padding-left: $pad-small;
-}
-html [pad-small-right], .pad-small-right {
-  padding-right: $pad-small;
-}
-html [pad-small-top], .pad-small-top {
-  padding-top: $pad-small;
-}
-html [pad-small-bottom], .pad-small-bottom {
-  padding-bottom: $pad-small;
-}
-html [pad-small-v], .pad-small-v {
-  padding-top: $pad-small;
-  padding-bottom: $pad-small;
-}
-html [pad-small-h], .pad-small-h {
-  padding-left: $pad-small;
-  padding-right: $pad-small;
-}
-
-/* Medium */
-
-html [pad-medium], .pad-medium {
-  padding: $pad-medium;
-}
-html [pad-medium-left], .pad-medium-left {
-  padding-left: $pad-medium;
-}
-html [pad-medium-right], .pad-medium-right {
-  padding-right: $pad-medium;
-}
-html [pad-medium-top], .pad-medium-top {
-  padding-top: $pad-medium;
-}
-html [pad-medium-bottom], .pad-medium-bottom {
-  padding-bottom: $pad-medium;
-}
-html [pad-medium-v], .pad-medium-v {
-  padding-top: $pad-medium;
-  padding-bottom: $pad-medium;
-}
-html [pad-medium-h], .pad-medium-h {
-  padding-left: $pad-medium;
-  padding-right: $pad-medium;
-}
-
-/* Large */
-
-html [pad-large], .pad-large {
-  padding: $pad-large;
-}
-html [pad-large-left], .pad-large-left {
-  padding-left: $pad-large;
-}
-html [pad-large-right], .pad-large-right {
-  padding-right: $pad-large;
-}
-html [pad-large-top], .pad-large-top {
-  padding-top: $pad-large;
-}
-html [pad-large-bottom], .pad-large-bottom {
-  padding-bottom: $pad-large;
-}
-html [pad-large-v], .pad-large-v {
-  padding-top: $pad-large;
-  padding-bottom: $pad-large;
-}
-html [pad-large-h], .pad-large-h {
-  padding-left: $pad-large;
-  padding-right: $pad-large;
-}
diff --git a/front/salix/styles/photo-list.scss b/front/salix/styles/photo-list.scss
index da3e460bad..3737c508a4 100644
--- a/front/salix/styles/photo-list.scss
+++ b/front/salix/styles/photo-list.scss
@@ -9,7 +9,7 @@
     .photo {
         box-sizing: border-box;
         transition: all 0.5s;
-        padding: $pad-small;
+        padding: $spacing-sm;
         position: relative;
         opacity: 0.7;
         width: 28em;
@@ -34,7 +34,6 @@
             top: 1em
         }
     }
-
     .photo:hover {
         opacity: 1
     }
diff --git a/modules/agency/front/basic-data/index.html b/modules/agency/front/basic-data/index.html
index 8e30678773..24d5be8573 100644
--- a/modules/agency/front/basic-data/index.html
+++ b/modules/agency/front/basic-data/index.html
@@ -9,7 +9,7 @@
     name="form"
     ng-submit="$ctrl.onSubmit()"
     class="vn-w-md">
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-textfield
                 label="Name" 
diff --git a/modules/agency/front/calendar/index.html b/modules/agency/front/calendar/index.html
index 6cf5210656..6b07147349 100644
--- a/modules/agency/front/calendar/index.html
+++ b/modules/agency/front/calendar/index.html
@@ -7,7 +7,7 @@
     on-move-next="ndMonth.moveNext(2)"
     on-move-previous="ndMonth.movePrevious(2)"
     vn-acl="deliveryBoss"
-    pad-medium>
+    class="vn-pa-md">
 </vn-calendar>
 <vn-calendar
     vn-id="ndMonth"
@@ -18,5 +18,5 @@
     default-date="$ctrl.ndMonthDate"
     vn-acl="deliveryBoss"
     display-controls="false"
-    pad-medium>
+    class="vn-pa-md">
 </vn-calendar>
\ No newline at end of file
diff --git a/modules/agency/front/create/index.html b/modules/agency/front/create/index.html
index 4618292595..81b1f2bc55 100644
--- a/modules/agency/front/create/index.html
+++ b/modules/agency/front/create/index.html
@@ -7,7 +7,7 @@
 </vn-watcher>
 <div class="content-block">
     <form name="form" vn-http-submit="$ctrl.onSubmit()" compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-two vn-focus
                     label="Name" 
diff --git a/modules/agency/front/delivery-days/index.html b/modules/agency/front/delivery-days/index.html
index bb273afa9c..f14450b364 100644
--- a/modules/agency/front/delivery-days/index.html
+++ b/modules/agency/front/delivery-days/index.html
@@ -1,6 +1,6 @@
 <div style="margin: 0 auto; max-width: 40em;">
     <form ng-submit="$ctrl.onSubmit()">
-        <vn-card pad-medium>
+        <vn-card class="vn-pa-md">
             <vn-vertical>
                 <vn-horizontal>
                     <vn-autocomplete
@@ -38,7 +38,7 @@
             <vn-submit label="Query"></vn-submit>
         </vn-button-bar>
     </form>
-    <vn-card pad-medium margin-medium-top>
+    <vn-card class="vn-pa-md vn-mt-md">
         <vn-zone-calendar
             events="events.events"
             exclusions="events.exclusions">
diff --git a/modules/agency/front/edit/index.html b/modules/agency/front/edit/index.html
index 452c54417e..1d52b98a06 100644
--- a/modules/agency/front/edit/index.html
+++ b/modules/agency/front/edit/index.html
@@ -6,7 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()">
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-textfield vn-two vn-focus
                 label="Name" 
diff --git a/modules/agency/front/events/index.html b/modules/agency/front/events/index.html
index b54ee8f0b3..dc040d0f9f 100644
--- a/modules/agency/front/events/index.html
+++ b/modules/agency/front/events/index.html
@@ -14,12 +14,12 @@
                 <vn-one>
                     <div
                         ng-if="::row.from && !row.to"
-                        margin-small-bottom>
+                        class="vn-mb-sm">
                         {{::row.from | dateTime:'dd/MM/yyyy'}}
                     </div>
                     <div
                         ng-if="::!row.from || row.to"
-                        margin-small-bottom>
+                        class="vn-mb-sm">
                         <span ng-if="row.to">
                             {{::row.from | dateTime:'dd/MM/yyyy'}} - {{::row.to | dateTime:'dd/MM/yyyy'}}
                         </span>
@@ -72,7 +72,7 @@
     on-response="$ctrl.onSave(response)">
     <tpl-body>
         <vn-vertical>
-            <vn-vertical pad-medium-bottom>
+            <vn-vertical class="vn-pb-md">
                 <vn-radio
                     field="$ctrl.eventType"
                     label="One day"
diff --git a/modules/agency/front/events/style.scss b/modules/agency/front/events/style.scss
index 1267208765..4e14aa75c3 100644
--- a/modules/agency/front/events/style.scss
+++ b/modules/agency/front/events/style.scss
@@ -2,8 +2,8 @@
 
 vn-zone-events {
     .week-days {
-        margin-top: $margin-small;
-        margin-bottom: $margin-medium;
+        margin-top: $spacing-sm;
+        margin-bottom: $spacing-md;
         text-align: center;
 
         & > span {
diff --git a/modules/agency/front/index/index.html b/modules/agency/front/index/index.html
index 67a8fffcfe..cfe39c7f17 100644
--- a/modules/agency/front/index/index.html
+++ b/modules/agency/front/index/index.html
@@ -7,7 +7,7 @@
     auto-load="true">
 </vn-crud-model>
 <div>
-    <vn-card class="vn-w-sm pad-medium-h">
+    <vn-card class="vn-w-sm vn-px-md">
         <vn-searchbar
             panel="vn-zone-search-panel"
             model="model"
@@ -18,9 +18,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        class="vn-w-md"
-        margin-medium-top
-        margin-huge-bottom>
+        class="vn-w-md vn-mt-md vn-mb-xl">
         <vn-card>
         <vn-table model="model">
             <vn-thead>
diff --git a/modules/agency/front/location-search-panel/index.html b/modules/agency/front/location-search-panel/index.html
index 9621f8b56f..5b09fd670b 100644
--- a/modules/agency/front/location-search-panel/index.html
+++ b/modules/agency/front/location-search-panel/index.html
@@ -33,7 +33,7 @@
                 value-field="id">
             </vn-autocomplete>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/agency/front/location/index.html b/modules/agency/front/location/index.html
index 63291c6b28..3b30f424a5 100644
--- a/modules/agency/front/location/index.html
+++ b/modules/agency/front/location/index.html
@@ -5,13 +5,13 @@
     auto-load="false">
 </vn-crud-model>
 <div class="vn-w-md">
-    <vn-card pad-large-h>
+    <vn-card class="vn-px-lg">
         <vn-searchbar
             on-search="$ctrl.onSearch($params)"
             vn-focus>
         </vn-searchbar>
     </vn-card>
-    <vn-card pad-large margin-medium-top>
+    <vn-card class="vn-pa-lg vn-mt-md">
         <vn-treeview
             vn-id="treeview"
             model="model"
diff --git a/modules/agency/front/main/style.scss b/modules/agency/front/main/style.scss
index 9374fc05ec..21e4fc40cb 100644
--- a/modules/agency/front/main/style.scss
+++ b/modules/agency/front/main/style.scss
@@ -4,7 +4,7 @@ vn-zone {
     ul.menu {
         list-style-type: none;
         padding: 0;
-        padding-top: $pad-medium;
+        padding-top: $spacing-md;
         margin: 0;
         font-size: inherit;
 
diff --git a/modules/agency/front/search-panel/index.html b/modules/agency/front/search-panel/index.html
index 2cac6dbb53..fa1db17e42 100644
--- a/modules/agency/front/search-panel/index.html
+++ b/modules/agency/front/search-panel/index.html
@@ -26,7 +26,7 @@
                 value-field="id">
             </vn-autocomplete>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/agency/front/summary/index.html b/modules/agency/front/summary/index.html
index f9d221bb63..f6e41abf13 100644
--- a/modules/agency/front/summary/index.html
+++ b/modules/agency/front/summary/index.html
@@ -1,6 +1,6 @@
 <vn-card class="summary">
     <h5>{{$ctrl.summary.name}}</h5>
-    <vn-horizontal pad-medium>
+    <vn-horizontal class="vn-pa-md">
         <vn-one>    
             <vn-label-value label="Id" 
                 value="{{$ctrl.summary.id}}">
diff --git a/modules/claim/front/action/index.html b/modules/claim/front/action/index.html
index 3875b99128..b8393eb470 100644
--- a/modules/claim/front/action/index.html
+++ b/modules/claim/front/action/index.html
@@ -5,7 +5,7 @@
     data="$ctrl.salesClaimed">
 </vn-crud-model>
 <vn-vertical compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal>
                 <div class="totalBox" ng-show="$ctrl.salesClaimed.length > 0">
@@ -15,7 +15,7 @@
                 </div>
             </vn-horizontal>
             <vn-horizontal>
-                <vn-tool-bar margin-medium-bottom>
+                <vn-tool-bar class="vn-mb-md">
                     <vn-button
                         label="Import claim" 
                         disabled="$ctrl.claim.claimStateFk == $ctrl.resolvedState"
@@ -172,7 +172,7 @@
 </vn-crud-model>
 <!-- Transfer Popover -->
 <vn-popover class="lastTicketsPopover" vn-id="lastTicketsPopover">
-    <div class="ticketList" pad-medium>
+    <div class="ticketList vn-pa-md">
         <vn-table model="lastTicketsModel" auto-load="false" class="vn-grid">
             <vn-thead>
                 <vn-tr>
diff --git a/modules/claim/front/basic-data/index.html b/modules/claim/front/basic-data/index.html
index b626f57c74..8588d562a5 100644
--- a/modules/claim/front/basic-data/index.html
+++ b/modules/claim/front/basic-data/index.html
@@ -6,7 +6,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete
                 vn-one
@@ -26,7 +26,7 @@
                 ini-options="{enableTime: true, dateFormat: 'd-m-Y', time_24hr: true}">
             </vn-date-picker>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-autocomplete 
                 vn-one
                 disabled="false"
@@ -49,7 +49,7 @@
             </vn-autocomplete>
             </vn-horizontal>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-textarea
                 vn-three
                 label="Observation" 
diff --git a/modules/claim/front/detail/index.html b/modules/claim/front/detail/index.html
index f4aea32474..768242c06e 100644
--- a/modules/claim/front/detail/index.html
+++ b/modules/claim/front/detail/index.html
@@ -7,7 +7,7 @@
     on-data-change="$ctrl.calculateTotals()">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal>
                 <div class="totalBox">
@@ -80,10 +80,10 @@
 <!-- Add Lines Dialog -->
 <vn-dialog vn-id="add-sales" class="modal-form">
     <tpl-body>
-        <vn-horizontal pad-medium class="header">
+        <vn-horizontal class="header vn-pa-md">
             <h5><span translate>Claimable sales from ticket</span> {{$ctrl.claim.ticketFk}}</h5>
         </vn-horizontal>
-        <vn-horizontal pad-medium>
+        <vn-horizontal class="vn-pa-md">
             <vn-table>
                 <vn-thead>
                     <vn-tr>
@@ -131,10 +131,10 @@
         enable="true">
     </vn-spinner>
     <div ng-if="$ctrl.mana != null">
-        <vn-horizontal pad-medium class="header">
+        <vn-horizontal class="header vn-pa-md">
             <h5>MANÁ: {{$ctrl.mana | currency: 'EUR':0}}</h5>
         </vn-horizontal>
-        <div pad-medium>
+        <div class="vn-pa-md">
             <vn-input-number
                 vn-focus
                 label="Discount"
diff --git a/modules/claim/front/development/index.html b/modules/claim/front/development/index.html
index e3f3684517..23de22b3f4 100644
--- a/modules/claim/front/development/index.html
+++ b/modules/claim/front/development/index.html
@@ -37,7 +37,7 @@
     form="form">
 </vn-watcher>
 <vn-vertical compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <form name="form">
                 <vn-horizontal ng-repeat="claimDevelopment in claimDevelopments">
@@ -90,7 +90,7 @@
                         vn-acl="salesAssistant">
                     </vn-autocomplete>
                     <vn-icon-button
-                        margin-medium-v
+                        class="vn-my-md"
                         vn-tooltip="Remove sale"
                         icon="delete"
                         ng-click="model.remove($index)"
@@ -99,7 +99,7 @@
                     </vn-icon-button>
                 </vn-horizontal>
             </form>
-            <vn-one pad-medium-top>
+            <vn-one class="vn-pt-md">
                 <vn-icon-button
                     vn-bind="+"
                     vn-tooltip="Add sale"
diff --git a/modules/claim/front/dms/index/style.scss b/modules/claim/front/dms/index/style.scss
index 2c8fdb1226..e7e957cd86 100644
--- a/modules/claim/front/dms/index/style.scss
+++ b/modules/claim/front/dms/index/style.scss
@@ -5,7 +5,7 @@ vn-claim-dms-index {
         border: 2px dashed $color-font-secondary;
         color: $color-font-secondary;
         box-sizing: border-box;
-        padding: 2em $pad-medium;
+        padding: 2em $spacing-md;
         border-radius: 0.5em;
         text-align: center;
         font-size: 1.4em;
@@ -17,7 +17,7 @@ vn-claim-dms-index {
 
     .photo-list {
         
-        padding: $pad-medium;
+        padding: $spacing-md;
         min-height: 100%;
 
         .photo {
diff --git a/modules/claim/front/index/index.html b/modules/claim/front/index/index.html
index 46fd577e1f..e72810f6f3 100644
--- a/modules/claim/front/index/index.html
+++ b/modules/claim/front/index/index.html
@@ -7,7 +7,7 @@
     auto-load="true">
 </vn-crud-model>
 <div class="content-block">
-    <vn-card pad-medium-h class="vn-w-sm">
+    <vn-card class="vn-px-md vn-w-sm">
         <vn-searchbar
             panel="vn-claim-search-panel"
             on-search="$ctrl.onSearch($params)"
@@ -17,8 +17,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        class="vn-w-md"
-        margin-medium-v>
+        class="vn-w-md vn-my-md">
         <vn-card>
         <vn-table model="model">
             <vn-thead>
diff --git a/modules/claim/front/search-panel/index.html b/modules/claim/front/search-panel/index.html
index 5540c87c8b..fa9db08857 100644
--- a/modules/claim/front/search-panel/index.html
+++ b/modules/claim/front/search-panel/index.html
@@ -65,7 +65,7 @@
                 model="filter.created">
             </vn-date-picker>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/client/front/address/create/index.html b/modules/client/front/address/create/index.html
index 0240aceb5f..79cf4c94f5 100644
--- a/modules/client/front/address/create/index.html
+++ b/modules/client/front/address/create/index.html
@@ -15,8 +15,8 @@
     auto-load="true">
 </vn-crud-model>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
-        <vn-horizontal pad-small-v>
+    <vn-card class="vn-pa-lg">
+        <vn-horizontal class="vn-py-sm">
             <vn-check vn-one label="Default" field="$ctrl.data.isDefaultAddress"></vn-check> 
         </vn-horizontal>
         <vn-horizontal>
@@ -64,11 +64,15 @@
                 label="Postcode"
                 field="$ctrl.address.postalCode">
             </vn-textfield>
-<!--             <vn-icon-button vn-auto margin-medium-v
+            <!--
+            <vn-icon-button
+                vn-auto
+                class="vn-my-md"
                 icon="add_circle"
                 vn-tooltip="New postcode"
                 ng-click="postcode.open()">
-            </vn-icon-button> -->
+            </vn-icon-button>
+            -->
         </vn-horizontal>
         <vn-horizontal>
             <vn-autocomplete
diff --git a/modules/client/front/address/edit/index.html b/modules/client/front/address/edit/index.html
index 9c4a869c9d..e6aed77077 100644
--- a/modules/client/front/address/edit/index.html
+++ b/modules/client/front/address/edit/index.html
@@ -26,8 +26,8 @@
     auto-load="true">
 </vn-crud-model>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
-        <vn-horizontal pad-small-v>
+    <vn-card class="vn-pa-lg">
+        <vn-horizontal class="vn-py-sm">
             <vn-check vn-one label="Enabled" field="$ctrl.address.isActive"></vn-check>
             <vn-check
                 vn-one label="Is equalizated"
@@ -75,11 +75,15 @@
                 label="Postcode"
                 field="$ctrl.address.postalCode">
             </vn-textfield>
-     <!--        <vn-icon-button vn-auto margin-medium-v
+            <!--
+            <vn-icon-button
+                vn-auto
+                class="vn-my-md"
                 icon="add_circle"
                 vn-tooltip="New postcode"
                 ng-click="postcode.open()">
-            </vn-icon-button> -->
+            </vn-icon-button>
+            -->
         </vn-horizontal>
         <vn-horizontal>
             <vn-autocomplete vn-one
diff --git a/modules/client/front/address/index/index.html b/modules/client/front/address/index/index.html
index 4c0527136d..1e666b36be 100644
--- a/modules/client/front/address/index/index.html
+++ b/modules/client/front/address/index/index.html
@@ -9,18 +9,18 @@
 <vn-data-viewer
     model="model"
     class="vn-w-md">
-    <vn-card pad-medium>
+    <vn-card class="vn-pa-md">
     <div
         ng-repeat="address in $ctrl.addresses"
         class="address">
         <a
             ui-sref="client.card.address.edit({addressId: {{::address.id}}})"
-            class="pad-small border-solid"
+            class="vn-pa-sm border-solid"
             ng-class="{'item-disabled': !address.isActive}"
             translate-attr="{title: 'Edit address'}"
             border-radius>
             <vn-none
-                pad-small-right
+                class="vn-pr-sm"
                 ng-click="$ctrl.onStarClick($event)">
                 <vn-icon-button
                     ng-if="$ctrl.isDefaultAddress(address)"
@@ -53,10 +53,9 @@
                 vn-one
                 ng-if="address.observations.length"
                 border-solid-left
-                pad-medium-h
-                class="vn-hide-narrow"
+                class="vn-hide-narrow vn-px-md"
                 style="height: 6em; overflow: auto;">
-                <vn-one ng-repeat="observation in address.observations track by $index" ng-class="{'pad-small-top': $index}">
+                <vn-one ng-repeat="observation in address.observations track by $index" ng-class="{'vn-pt-sm': $index}">
                     <b>{{::observation.observationType.description}}:</b> 
                     <span>{{::observation.description}}</span>
                 </vn-one>
diff --git a/modules/client/front/address/index/style.scss b/modules/client/front/address/index/style.scss
index 4cf3d142d7..27bd8c40ea 100644
--- a/modules/client/front/address/index/style.scss
+++ b/modules/client/front/address/index/style.scss
@@ -3,7 +3,7 @@
 
 vn-client-address-index {
     .address {
-        padding-bottom: $pad-medium;
+        padding-bottom: $spacing-md;
 
         &:last-child {
             padding-bottom: 0;
diff --git a/modules/client/front/balance/create/index.html b/modules/client/front/balance/create/index.html
index 4cf769d4f7..73ff8ad5fd 100644
--- a/modules/client/front/balance/create/index.html
+++ b/modules/client/front/balance/create/index.html
@@ -6,7 +6,7 @@
         <vn-horizontal class="header">
             <h5><span translate>New payment</span></h5>
         </vn-horizontal>
-        <div pad-medium>
+        <div class="vn-pa-md">
             <vn-horizontal>
                 <vn-date-picker vn-one 
                     label="Date" 
@@ -35,7 +35,7 @@
                 </vn-input-number>
             </vn-horizontal>
         </div>
-        <vn-horizontal margin-medium class="buttons-bar">
+        <vn-horizontal class="vn-ma-md buttons-bar">
             <vn-button vn-one label="Save" ng-click="$ctrl.save()"></vn-button>
             <vn-button vn-one ng-click="$ctrl.hide()" label="Cancel"></vn-button>
         </vn-horizontal>
diff --git a/modules/client/front/balance/index/index.html b/modules/client/front/balance/index/index.html
index 55ad2f6153..cd5f250761 100644
--- a/modules/client/front/balance/index/index.html
+++ b/modules/client/front/balance/index/index.html
@@ -13,7 +13,7 @@
     data="$ctrl.clientRisks">
 </vn-crud-model>
 <div class="vn-w-lg">
-    <vn-card class="pad-medium margin-medium-bottom">
+    <vn-card class="vn-pa-md vn-mb-md">
         <vn-horizontal
             style="align-items: center;">
             <vn-one></vn-one>
diff --git a/modules/client/front/basic-data/index.html b/modules/client/front/basic-data/index.html
index f994d19054..8eab4541c1 100644
--- a/modules/client/front/basic-data/index.html
+++ b/modules/client/front/basic-data/index.html
@@ -7,7 +7,7 @@
 </vn-watcher>
 <form name="form" vn-http-submit="watcher.submit()" compact>
     <fieldset>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield
                     vn-one 
diff --git a/modules/client/front/billing-data/index.html b/modules/client/front/billing-data/index.html
index d923123b74..6f671de022 100644
--- a/modules/client/front/billing-data/index.html
+++ b/modules/client/front/billing-data/index.html
@@ -6,7 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete
                 vn-one
@@ -52,14 +52,16 @@
                     </vn-horizontal>
                 </tpl-item>
             </vn-autocomplete>
-            <vn-icon-button vn-auto margin-medium-v
+            <vn-icon-button
+                vn-auto
+                class="vn-my-md"
                 icon="add_circle"
                 vn-tooltip="New bank entity"
                 vn-dialog="bankEntityDialog"
                 vn-acl="salesAssistant">
             </vn-icon-button>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-one>
                 <vn-check
                     label="Received LCR"
@@ -95,7 +97,7 @@
     on-open="$ctrl.onBankEntityOpen()"
     on-response="$ctrl.onBankEntityResponse(response)">
     <tpl-body>
-        <h5 pad-small-v translate>New bank entity</h5>
+        <h5 class="vn-py-sm" translate>New bank entity</h5>
         <vn-horizontal>
             <vn-textfield vn-one
                 label="Name"
diff --git a/modules/client/front/contact/index.html b/modules/client/front/contact/index.html
index b66eb782e3..06708e5827 100644
--- a/modules/client/front/contact/index.html
+++ b/modules/client/front/contact/index.html
@@ -12,7 +12,7 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal ng-repeat="contact in contacts">
             <vn-textfield
                 vn-one
@@ -29,7 +29,7 @@
             <vn-none>
                 <vn-icon-button
                     pointer
-                    margin-medium-v
+                    class="vn-my-md"
                     vn-tooltip="Remove contact"
                     icon="delete"
                     ng-click="model.remove($index)">
diff --git a/modules/client/front/create/index.html b/modules/client/front/create/index.html
index 0c2e0290ef..dc534b5bd2 100644
--- a/modules/client/front/create/index.html
+++ b/modules/client/front/create/index.html
@@ -7,7 +7,7 @@
 </vn-watcher>
 <div class="content-block">
     <form name="form" vn-http-submit="$ctrl.onSubmit()" compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-two label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield>
                 <vn-autocomplete vn-one
@@ -54,7 +54,8 @@
                     label="City"
                     field="$ctrl.client.city">
                 </vn-textfield>
-                <!-- <vn-autocomplete vn-id="town" vn-one 
+                <!--
+                <vn-autocomplete vn-id="town" vn-one 
                     label="City"
                     url="/api/Towns"
                     fields="['id', 'name']"
@@ -62,12 +63,15 @@
                     show-field="name"
                     value-field="name"
                     field="$ctrl.client.city">
-                </vn-autocomplete> -->
-<!--                 <vn-icon-button vn-auto margin-medium-v
+                </vn-autocomplete>
+                <vn-icon-button
+                    vn-auto
+                    class="vn-my-md"
                     icon="add_circle"
                     vn-tooltip="New postcode"
                     ng-click="postcode.open()">
-                </vn-icon-button> -->
+                </vn-icon-button>
+                -->
                 <vn-textfield vn-one
                     label="Postcode"
                     field="$ctrl.client.postcode">
@@ -102,7 +106,7 @@
                     info="You can save multiple emails">
                 </vn-textfield>
             </vn-horizontal>
-            <vn-horizontal pad-small-v>
+            <vn-horizontal class="vn-py-sm">
                 <vn-check
                     vn-one
                     label="Is equalizated"
diff --git a/modules/client/front/credit-insurance/create/index.html b/modules/client/front/credit-insurance/create/index.html
index c4b7dc35f5..3bfa86e767 100644
--- a/modules/client/front/credit-insurance/create/index.html
+++ b/modules/client/front/credit-insurance/create/index.html
@@ -1,5 +1,5 @@
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-input-number vn-one min="0"
                 label="Credit"
diff --git a/modules/client/front/credit-insurance/index/index.html b/modules/client/front/credit-insurance/index/index.html
index dc7f546aaf..6d7024a6a7 100644
--- a/modules/client/front/credit-insurance/index/index.html
+++ b/modules/client/front/credit-insurance/index/index.html
@@ -1,17 +1,17 @@
 <vn-data-viewer
     data="$ctrl.classifications"
     class="vn-w-md">
-    <vn-card pad-medium>
+    <vn-card class="vn-pa-md">
     <vn-horizontal
         ng-repeat="classification in $ctrl.classifications track by classification.id"
-        class="pad-medium-bottom insurance"
+        class="vn-pb-md insurance"
         style="align-items: center;">
         <vn-one
             border-radius
-            class="pad-small border-solid"
+            class="vn-pa-sm border-solid"
             ng-class="{'item-hightlight': !classification.finished,'item-disabled': classification.finished}">
             <vn-horizontal style="align-items: center;">
-                <vn-none pad-medium-h>
+                <vn-none class="vn-px-md">
                     <vn-icon-button
                         ng-if="!classification.finished"
                         icon="lock"
@@ -23,7 +23,7 @@
                     <div><vn-label translate>Since</vn-label> {{::classification.started | dateTime:'dd/MM/yyyy'}}</div>
                     <div><vn-label translate>To</vn-label> {{classification.finished | dateTime:'dd/MM/yyyy'}}</div>
                 </vn-one>
-                <vn-vertical vn-one pad-medium-h>
+                <vn-vertical vn-one class="vn-px-md">
                     <vn-horizontal ng-repeat="insurance in classification.insurances track by insurance.id">
                         <vn-one>
                             <vn-label-value label="Credit" 
diff --git a/modules/client/front/credit-insurance/insurance/create/index.html b/modules/client/front/credit-insurance/insurance/create/index.html
index f6770b29a4..e75971e5ea 100644
--- a/modules/client/front/credit-insurance/insurance/create/index.html
+++ b/modules/client/front/credit-insurance/insurance/create/index.html
@@ -6,7 +6,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-input-number vn-one min="0"
                 label="Credit"
diff --git a/modules/client/front/credit-insurance/insurance/index/index.html b/modules/client/front/credit-insurance/insurance/index/index.html
index 608f71e914..2e54d749fa 100644
--- a/modules/client/front/credit-insurance/insurance/index/index.html
+++ b/modules/client/front/credit-insurance/insurance/index/index.html
@@ -6,7 +6,7 @@
     data="insurances" auto-load="false">
 </vn-crud-model>
 <vn-vertical compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-table model="model">
                 <vn-thead>
diff --git a/modules/client/front/credit/create/index.html b/modules/client/front/credit/create/index.html
index 02a55a8b71..5476b288dd 100644
--- a/modules/client/front/credit/create/index.html
+++ b/modules/client/front/credit/create/index.html
@@ -6,7 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-input-number vn-one min="0" 
                 label="Credit"
diff --git a/modules/client/front/dms/create/index.html b/modules/client/front/dms/create/index.html
index 4096265788..8e7d8a3291 100644
--- a/modules/client/front/dms/create/index.html
+++ b/modules/client/front/dms/create/index.html
@@ -3,9 +3,13 @@
     vn-id="watcher"
     data="$ctrl.dms">
 </vn-watcher>
-<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium enctype="multipart/form-data">
+<form
+    name="form"
+    ng-submit="$ctrl.onSubmit()"
+    class="vn-ma-md"
+    enctype="multipart/form-data">
     <div compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-one vn-focus
                     label="Reference" 
diff --git a/modules/client/front/dms/edit/index.html b/modules/client/front/dms/edit/index.html
index 8ccff7ab1e..f4f334ddd9 100644
--- a/modules/client/front/dms/edit/index.html
+++ b/modules/client/front/dms/edit/index.html
@@ -2,9 +2,13 @@
     vn-id="watcher"
     data="$ctrl.dms">
 </vn-watcher>
-<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium enctype="multipart/form-data">
+<form
+    name="form"
+    ng-submit="$ctrl.onSubmit()"
+    class="vn-ma-md"
+    enctype="multipart/form-data">
     <div compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-one vn-focus
                     label="Reference" 
diff --git a/modules/client/front/fiscal-data/index.html b/modules/client/front/fiscal-data/index.html
index 62db65f131..1527a9c586 100644
--- a/modules/client/front/fiscal-data/index.html
+++ b/modules/client/front/fiscal-data/index.html
@@ -6,7 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-textfield
                 vn-two
@@ -76,7 +76,7 @@
                 label="Postcode">         
             </vn-autocomplete> -->
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-check
                 vn-one
                 label="Active"
@@ -88,7 +88,7 @@
                 field="$ctrl.client.isFreezed">
             </vn-check>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-check
                 vn-one
                 label="Has to invoice"
@@ -100,7 +100,7 @@
                 field="$ctrl.client.isVies">
             </vn-check>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-check
                 vn-one
                 label="Invoice by mail"
@@ -112,7 +112,7 @@
                 field="$ctrl.client.hasToInvoiceByAddress">
             </vn-check>
         </vn-horizontal>
-        <vn-horizontal pad-small-v>
+        <vn-horizontal class="vn-py-sm">
             <vn-check
                 vn-one
                 label="Is equalizated"
diff --git a/modules/client/front/greuge/create/index.html b/modules/client/front/greuge/create/index.html
index 7a6ea451b3..d3515288fa 100644
--- a/modules/client/front/greuge/create/index.html
+++ b/modules/client/front/greuge/create/index.html
@@ -6,7 +6,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-input-number vn-one vn-focus
                 label="Amount"
diff --git a/modules/client/front/greuge/index/index.html b/modules/client/front/greuge/index/index.html
index 9ce76491c0..5932a66a97 100644
--- a/modules/client/front/greuge/index/index.html
+++ b/modules/client/front/greuge/index/index.html
@@ -17,7 +17,7 @@
     <vn-card
         ng-if="model.data.length > 0"
         style="text-align: right;"
-        class="margin-medium-bottom pad-large">
+        class="vn-mb-md vn-pa-lg">
         <vn-label-value
             label="Total" 
             value="{{edit.model.sumAmount | currency: 'EUR': 2}}">
diff --git a/modules/client/front/index/index.html b/modules/client/front/index/index.html
index ec09a936dd..602ef86007 100644
--- a/modules/client/front/index/index.html
+++ b/modules/client/front/index/index.html
@@ -6,7 +6,7 @@
     data="clients">
 </vn-crud-model>
 <div class="content-block vn-w-sm">
-    <vn-card pad-medium-h>
+    <vn-card class="vn-px-md">
         <vn-searchbar
             panel="vn-client-search-panel"
             model="model"
@@ -17,7 +17,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        margin-medium-v>
+        class="vn-my-md">
         <vn-card>
         <div class="vn-list">
         <a
diff --git a/modules/client/front/note/create/index.html b/modules/client/front/note/create/index.html
index 572c1820b4..b2725f5b25 100644
--- a/modules/client/front/note/create/index.html
+++ b/modules/client/front/note/create/index.html
@@ -7,7 +7,7 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submitGo('client.card.note.index')" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-textarea
                 vn-one
diff --git a/modules/client/front/note/index/index.html b/modules/client/front/note/index/index.html
index a653ef9daa..d7bdca50d1 100644
--- a/modules/client/front/note/index/index.html
+++ b/modules/client/front/note/index/index.html
@@ -9,14 +9,11 @@
 <vn-data-viewer
     model="model"
     class="vn-w-md">
-    <vn-card pad-medium>
+    <vn-card class="vn-pa-md">
         <div class="note"
             ng-repeat="note in notes" 
-            pad-small
-            border-solid
-            border-radius
-            margin-small-bottom>
-            <vn-horizontal margin-small-bottom style="color: #666">
+            class="vn-pa-sm border-solid border-radius vn-mb-sm">
+            <vn-horizontal class="vn-mb-sm" style="color: #666">
                 <vn-one>{{::note.worker.user.nickname}}</vn-one>
                 <vn-auto>{{::note.created | dateTime:'dd/MM/yyyy HH:mm'}}</vn-auto>
             </vn-horizontal>   
diff --git a/modules/client/front/postcode/index.html b/modules/client/front/postcode/index.html
index 5ff80440e2..fb9b91c5ec 100644
--- a/modules/client/front/postcode/index.html
+++ b/modules/client/front/postcode/index.html
@@ -3,7 +3,7 @@
     on-open="$ctrl.onOpen()"
     on-response="$ctrl.onResponse(response)">
     <tpl-body>
-        <h5 pad-small-v translate>New postcode</h5>
+        <h5 class="vn-py-sm" translate>New postcode</h5>
         <p translate>Please, ensure you put the correct data!</p>
         <vn-horizontal>
             <vn-textfield vn-one vn-focus vn-id="postcode"
diff --git a/modules/client/front/recovery/create/index.html b/modules/client/front/recovery/create/index.html
index 74be4f9573..02677fd78b 100644
--- a/modules/client/front/recovery/create/index.html
+++ b/modules/client/front/recovery/create/index.html
@@ -6,7 +6,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-date-picker vn-one 
                 label="Since" 
diff --git a/modules/client/front/sample/create/index.html b/modules/client/front/sample/create/index.html
index e8e56ba6fc..fe6813f6aa 100644
--- a/modules/client/front/sample/create/index.html
+++ b/modules/client/front/sample/create/index.html
@@ -6,7 +6,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete
                 vn-one
diff --git a/modules/client/front/search-panel/index.html b/modules/client/front/search-panel/index.html
index b33d9d7c9f..f92b940060 100644
--- a/modules/client/front/search-panel/index.html
+++ b/modules/client/front/search-panel/index.html
@@ -69,7 +69,7 @@
             model="filter.phone">
         </vn-textfield>
     </vn-horizontal>
-    <vn-horizontal margin-large-top>
+    <vn-horizontal class="vn-mt-lg">
         <vn-submit label="Search"></vn-submit>
     </vn-horizontal>
 </form>
diff --git a/modules/client/front/sms/index.html b/modules/client/front/sms/index.html
index 9d907e5c27..0b742c37da 100644
--- a/modules/client/front/sms/index.html
+++ b/modules/client/front/sms/index.html
@@ -2,7 +2,7 @@
     vn-id="SMSDialog"
     on-response="$ctrl.onResponse(response)">
     <tpl-body>
-        <h5 pad-small-v translate>Send SMS</h5>
+        <h5 class="vn-py-sm" translate>Send SMS</h5>
         <vn-horizontal>
             <vn-textfield vn-one
                 label="Destination"
diff --git a/modules/client/front/web-access/index.html b/modules/client/front/web-access/index.html
index 40f9f77b93..73c7e224c7 100644
--- a/modules/client/front/web-access/index.html
+++ b/modules/client/front/web-access/index.html
@@ -6,8 +6,8 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submit()" compact>
-    <vn-card pad-large>
-        <vn-horizontal pad-small-v>
+    <vn-card class="vn-pa-lg">
+        <vn-horizontal class="vn-py-sm">
             <vn-check
                 vn-one
                 label="Enable web access"
diff --git a/modules/invoiceOut/front/index/index.html b/modules/invoiceOut/front/index/index.html
index ef7bd988f8..2eb08ead19 100644
--- a/modules/invoiceOut/front/index/index.html
+++ b/modules/invoiceOut/front/index/index.html
@@ -7,7 +7,7 @@
 </vn-crud-model>
 <div class="content-block">
     <div class="vn-list">
-        <vn-card pad-medium-h class="vn-w-sm">
+        <vn-card class="vn-px-md vn-w-sm">
             <vn-searchbar
                 panel="vn-invoice-search-panel"
                 on-search="$ctrl.onSearch($params)"
@@ -18,8 +18,7 @@
     </div>
     <vn-data-viewer
         model="model"
-        class="vn-w-md"
-        margin-medium-v>
+        class="vn-w-md vn-my-md">
         <vn-card>
         <vn-table model="model">
             <vn-thead>
diff --git a/modules/invoiceOut/front/search-panel/index.html b/modules/invoiceOut/front/search-panel/index.html
index 1abded45a1..b449bb37ec 100644
--- a/modules/invoiceOut/front/search-panel/index.html
+++ b/modules/invoiceOut/front/search-panel/index.html
@@ -56,7 +56,7 @@
                 model="filter.dued">
             </vn-date-picker>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/item/front/barcode/index.html b/modules/item/front/barcode/index.html
index 14bde170ba..2d09b707d2 100644
--- a/modules/item/front/barcode/index.html
+++ b/modules/item/front/barcode/index.html
@@ -12,7 +12,7 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal ng-repeat="barcode in barcodes track by $index">
             <vn-textfield
                 vn-three
diff --git a/modules/item/front/basic-data/index.html b/modules/item/front/basic-data/index.html
index f33feb2386..39c9dffb67 100644
--- a/modules/item/front/basic-data/index.html
+++ b/modules/item/front/basic-data/index.html
@@ -10,7 +10,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submit()" ng-cloak compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-textfield vn-one label="Name" field="$ctrl.item.name" vn-focus></vn-textfield>
             <vn-textfield 
diff --git a/modules/item/front/botanical/index.html b/modules/item/front/botanical/index.html
index c1b6c32e4c..edaa1b229e 100644
--- a/modules/item/front/botanical/index.html
+++ b/modules/item/front/botanical/index.html
@@ -10,7 +10,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submit()" ng-cloak compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-textfield
                 vn-one
diff --git a/modules/item/front/create/index.html b/modules/item/front/create/index.html
index 7cb96a0243..fb565ee5c9 100644
--- a/modules/item/front/create/index.html
+++ b/modules/item/front/create/index.html
@@ -7,7 +7,7 @@
 </vn-watcher>
 <div class="content-block">
     <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield 
                     vn-one 
diff --git a/modules/item/front/diary/index.html b/modules/item/front/diary/index.html
index 47506eed9c..53710942c9 100644
--- a/modules/item/front/diary/index.html
+++ b/modules/item/front/diary/index.html
@@ -6,7 +6,7 @@
     auto-load="false">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large compact>
+    <vn-card class="vn-pa-lg compact">
     <vn-vertical>
         <vn-horizontal>
             <vn-autocomplete
diff --git a/modules/item/front/index/index.html b/modules/item/front/index/index.html
index d692d61f6e..5ff8e63ab5 100644
--- a/modules/item/front/index/index.html
+++ b/modules/item/front/index/index.html
@@ -6,7 +6,7 @@
     data="items">
 </vn-crud-model>
 <div class="content-block">
-    <vn-card pad-medium-h class="vn-w-sm">
+    <vn-card class="vn-px-md vn-w-sm">
         <vn-horizontal>
             <vn-searchbar
                 vn-three
@@ -29,8 +29,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        margin-medium-v
-        margin-huge-bottom>
+        class="vn-my-md vn-mb-xl">
         <vn-card>
         <vn-table
             model="model"
diff --git a/modules/item/front/last-entries/index.html b/modules/item/front/last-entries/index.html
index f6548079bb..1dc4d02c3a 100644
--- a/modules/item/front/last-entries/index.html
+++ b/modules/item/front/last-entries/index.html
@@ -6,7 +6,7 @@
     auto-load="false">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal>
                 <vn-date-picker
diff --git a/modules/item/front/niche/index.html b/modules/item/front/niche/index.html
index e870345778..52017b4f46 100644
--- a/modules/item/front/niche/index.html
+++ b/modules/item/front/niche/index.html
@@ -12,7 +12,7 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal ng-repeat="niche in niches track by $index">
             <vn-autocomplete
                 url="/item/api/Warehouses"
diff --git a/modules/item/front/request-search-panel/index.html b/modules/item/front/request-search-panel/index.html
index cb17344429..8f9f71632b 100644
--- a/modules/item/front/request-search-panel/index.html
+++ b/modules/item/front/request-search-panel/index.html
@@ -1,5 +1,5 @@
 <div class="search-panel">
-    <form pad-large ng-submit="$ctrl.onSearch()">
+    <form class="vn-pa-lg" ng-submit="$ctrl.onSearch()">
         <vn-horizontal>
             <vn-textfield
                 vn-one
@@ -60,7 +60,7 @@
                 field="filter.isOk">
             </vn-check>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/item/front/request/index.html b/modules/item/front/request/index.html
index e0936f3b7c..3670cd469a 100644
--- a/modules/item/front/request/index.html
+++ b/modules/item/front/request/index.html
@@ -7,8 +7,8 @@
     auto-load="false">
 </vn-crud-model>
 <form name="form">
-    <div margin-medium>
-        <vn-card pad-medium-h class="vn-list">
+    <div class="vn-ma-md">
+        <vn-card class="vn-px-md vn-list">
             <vn-horizontal>
                 <vn-searchbar 
                     auto-load="false"
@@ -20,7 +20,7 @@
                 </vn-searchbar>
             </vn-horizontal>
         </vn-card>
-        <vn-card margin-medium-v>
+        <vn-card class="vn-my-md">
             <vn-table model="model" auto-load="false">
                 <vn-thead>
                     <vn-tr>
@@ -134,12 +134,12 @@
         <vn-horizontal class="header">
             <h5><span translate>Indicate the reasons to deny this request</span></h5>
         </vn-horizontal>
-        <vn-horizontal pad-medium>
+        <vn-horizontal class="vn-pa-md">
             <vn-textarea
                 model="$ctrl.denyObservation">
             </vn-textarea>
         </vn-horizontal>
-        <vn-horizontal pad-medium>
+        <vn-horizontal class="vn-pa-md">
             <vn-button 
                 label="Save" 
                 ng-click="$ctrl.denyRequest()">
diff --git a/modules/item/front/search-panel/index.html b/modules/item/front/search-panel/index.html
index c353b9e643..5b2cc82dbb 100644
--- a/modules/item/front/search-panel/index.html
+++ b/modules/item/front/search-panel/index.html
@@ -92,7 +92,7 @@
                 ng-click="filter.tags.push({})">
             </vn-icon-button>
         </vn-horizontal>
-        <vn-horizontal margin-medium-v>
+        <vn-horizontal class="vn-my-md">
             <span 
                 ng-click="$ctrl.initializeMoreFields()" 
                 vn-one translate 
@@ -133,7 +133,7 @@
                 ng-click="filter.moreFields.push({})">
             </vn-icon-button>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/item/front/tags/index.html b/modules/item/front/tags/index.html
index ad50ebe64c..2041ef0890 100644
--- a/modules/item/front/tags/index.html
+++ b/modules/item/front/tags/index.html
@@ -20,7 +20,7 @@
     auto-load="true">
 </vn-crud-model>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal ng-repeat="itemTag in $ctrl.itemTags">
             <vn-autocomplete
                 vn-one
diff --git a/modules/item/front/tax/index.html b/modules/item/front/tax/index.html
index 8be5adeaeb..e0d58ba1a4 100644
--- a/modules/item/front/tax/index.html
+++ b/modules/item/front/tax/index.html
@@ -10,7 +10,7 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.submit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal ng-repeat="tax in $ctrl.taxes track by $index">
             <vn-textfield vn-one
                 label="Country"
diff --git a/modules/order/front/basic-data/index.html b/modules/order/front/basic-data/index.html
index 7a76d937fd..1a6fcb9dd1 100644
--- a/modules/order/front/basic-data/index.html
+++ b/modules/order/front/basic-data/index.html
@@ -13,7 +13,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="watcher.submit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete
                 vn-one
diff --git a/modules/order/front/catalog-search-panel/index.html b/modules/order/front/catalog-search-panel/index.html
index bb745fde6f..4c3c1989af 100644
--- a/modules/order/front/catalog-search-panel/index.html
+++ b/modules/order/front/catalog-search-panel/index.html
@@ -1,4 +1,4 @@
-<div pad-large style="min-width: 10em">
+<div class="vn-pa-lg" style="min-width: 10em">
     <form ng-submit="$ctrl.onSearch()">
         <vn-horizontal>
             <vn-autocomplete
@@ -18,7 +18,7 @@
                 model="filter.value">
             </vn-textfield>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/order/front/catalog/index.html b/modules/order/front/catalog/index.html
index 118a5cda8e..2f52b73e88 100644
--- a/modules/order/front/catalog/index.html
+++ b/modules/order/front/catalog/index.html
@@ -8,7 +8,7 @@
 </vn-crud-model>
 <div class="main-with-right-menu">
     <vn-card compact>
-        <vn-horizontal class="catalog-header" pad-medium-h>
+        <vn-horizontal class="catalog-header vn-px-md">
             <vn-one>
                 <div ng-if="model.moreRows">
                     <span translate>More than</span> {{model.limit}} <span translate>results</span>
@@ -39,7 +39,7 @@
             </vn-auto>
         </vn-horizontal>
     </vn-card>
-    <vn-card margin-medium-top>
+    <vn-card class="vn-mt-md">
         <vn-empty-rows ng-if="$ctrl.isRefreshing">
             <vn-spinner enable="$ctrl.isRefreshing"></vn-spinner>
         </vn-empty-rows>
@@ -104,7 +104,7 @@
         </vn-card>
         </section>
     </vn-horizontal>
-    <vn-pagination margin-small-v model="model"></vn-pagination>
+    <vn-pagination class="vn-my-sm" model="model"></vn-pagination>
 </div>
 <vn-side-menu side="right">
     <vn-catalog-filter order="$ctrl.order"></vn-catalog-filter>
diff --git a/modules/order/front/catalog/style.scss b/modules/order/front/catalog/style.scss
index 8061cabc4f..18dc51bb0d 100644
--- a/modules/order/front/catalog/style.scss
+++ b/modules/order/front/catalog/style.scss
@@ -3,7 +3,7 @@
 vn-order-catalog {
     .catalog-header {
         border-bottom: $border-thin;
-        padding: $pad-medium;
+        padding: $spacing-md;
         align-items: center;
 
         & > vn-one {
@@ -20,12 +20,12 @@ vn-order-catalog {
             overflow: hidden;
 
             & > * {
-                padding-left: $pad-medium;
+                padding-left: $spacing-md;
             }
         }
     }
     .catalog-list {
-        padding-top: $pad-small;
+        padding-top: $spacing-sm;
     }
 }
 
diff --git a/modules/order/front/create/index.html b/modules/order/front/create/index.html
index 0f52e18ace..d557bd21af 100644
--- a/modules/order/front/create/index.html
+++ b/modules/order/front/create/index.html
@@ -1,6 +1,6 @@
 <div class="content-block">    
     <div compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-order-create-card vn-id="card" on-save=""></vn-order-create-card>
         </vn-card>
         <vn-button-bar>
diff --git a/modules/order/front/filter/style.scss b/modules/order/front/filter/style.scss
index 07a7b1dbd1..52125ace68 100644
--- a/modules/order/front/filter/style.scss
+++ b/modules/order/front/filter/style.scss
@@ -3,25 +3,25 @@
 
 vn-catalog-filter > div {
     & > .input {
-        padding-left: $pad-medium;
-        padding-right: $pad-medium;
+        padding-left: $spacing-md;
+        padding-right: $spacing-md;
         border-color: $color-spacer;
         border-bottom: $border-thin;
     }
     .item-category {
-        padding: $pad-small;
+        padding: $spacing-sm;
         justify-content: flex-start;
         align-items: flex-start;
         flex-wrap: wrap;
 
         & > vn-one {
-            padding: $pad-small;
+            padding: $spacing-sm;
             min-width: 33.33%;
             text-align: center;
             box-sizing: border-box;
 
             & > vn-icon {
-                padding: $pad-small;
+                padding: $spacing-sm;
                 background-color: $color-font-secondary;
                 border-radius: 50%;
                 cursor: pointer;
@@ -40,7 +40,7 @@ vn-catalog-filter > div {
     }
     .chips {
         flex-wrap: wrap;
-        padding: $pad-medium;
+        padding: $spacing-md;
     }
 
     vn-autocomplete[vn-id="type"] .list {
diff --git a/modules/order/front/index/index.html b/modules/order/front/index/index.html
index a22e7501a3..ca7e6ac4e1 100644
--- a/modules/order/front/index/index.html
+++ b/modules/order/front/index/index.html
@@ -6,7 +6,7 @@
     order="landed DESC, clientFk">
 </vn-crud-model>
 <div class="content-block">
-    <vn-card pad-medium-h class="vn-w-sm">
+    <vn-card class="vn-px-md vn-w-sm">
         <vn-searchbar
             panel="vn-order-search-panel"
             on-search="$ctrl.onSearch($params)"
@@ -16,8 +16,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        margin-medium-v
-        margin-huge-bottom>
+        class="vn-my-md vn-mb-xl">
         <vn-card>
         <vn-table model="model">
             <vn-thead>
diff --git a/modules/order/front/line/index.html b/modules/order/front/line/index.html
index bdda0739d4..cbf492dbf4 100644
--- a/modules/order/front/line/index.html
+++ b/modules/order/front/line/index.html
@@ -3,7 +3,7 @@
     data="$ctrl.rows">
 </vn-watcher>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal class="header">
                 <vn-one class="taxes" ng-if="$ctrl.rows.length > 0">
diff --git a/modules/order/front/prices-popover/index.html b/modules/order/front/prices-popover/index.html
index 01edea6e33..971d70a229 100644
--- a/modules/order/front/prices-popover/index.html
+++ b/modules/order/front/prices-popover/index.html
@@ -9,7 +9,7 @@
             </a>
             <vspan></span>
         </div>
-        <div pad-medium>
+        <div class="vn-pa-md">
             <vn-horizontal>
                 <h5>{{$ctrl.item.id}}</h5>
             </vn-horizontal>
diff --git a/modules/order/front/search-panel/index.html b/modules/order/front/search-panel/index.html
index 9535246250..3b8ca238b3 100644
--- a/modules/order/front/search-panel/index.html
+++ b/modules/order/front/search-panel/index.html
@@ -80,7 +80,7 @@
                 field="filter.isConfirmed">
             </vn-check>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/order/front/volume/index.html b/modules/order/front/volume/index.html
index e368e9c1bc..895cb13d11 100644
--- a/modules/order/front/volume/index.html
+++ b/modules/order/front/volume/index.html
@@ -8,7 +8,7 @@
 </vn-crud-model>
 <mg-ajax path="/order/api/Orders/{{$ctrl.$stateParams.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal>
                 <div class="totalBox">
diff --git a/modules/route/front/basic-data/index.html b/modules/route/front/basic-data/index.html
index 5bdcfc1e5d..0292d89dc1 100644
--- a/modules/route/front/basic-data/index.html
+++ b/modules/route/front/basic-data/index.html
@@ -6,7 +6,7 @@
     save="patch">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete 
                 vn-one
diff --git a/modules/route/front/create/index.html b/modules/route/front/create/index.html
index 23f5033a27..b4a45b91e7 100644
--- a/modules/route/front/create/index.html
+++ b/modules/route/front/create/index.html
@@ -7,7 +7,7 @@
 </vn-watcher>
 <div class="content-block">
     <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-autocomplete 
                     vn-one
diff --git a/modules/route/front/index/index.html b/modules/route/front/index/index.html
index 3cb4e13ebe..cd1e2baa2f 100644
--- a/modules/route/front/index/index.html
+++ b/modules/route/front/index/index.html
@@ -7,7 +7,7 @@
     auto-load="true">
 </vn-crud-model>
 <div class="content-block">
-    <vn-card pad-medium-h class="vn-w-sm">
+    <vn-card class="vn-px-md vn-w-sm">
         <vn-searchbar
             filter="$ctrl.filter"
             panel="vn-route-search-panel"
@@ -18,9 +18,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        class="vn-w-lg"
-        margin-medium-v
-        margin-huge-bottom>
+        class="vn-w-lg vn-my-md vn-mb-xl">
         <vn-card class="index">
         <vn-table model="model">
             <vn-thead>
diff --git a/modules/route/front/search-panel/index.html b/modules/route/front/search-panel/index.html
index f19f88ee6f..1b495c640f 100644
--- a/modules/route/front/search-panel/index.html
+++ b/modules/route/front/search-panel/index.html
@@ -69,7 +69,7 @@
                 model="filter.description">
             </vn-textfield>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/route/front/tickets/index.html b/modules/route/front/tickets/index.html
index 6019ebfa2a..560a34cc83 100644
--- a/modules/route/front/tickets/index.html
+++ b/modules/route/front/tickets/index.html
@@ -6,8 +6,8 @@
     auto-load="true">
 </vn-crud-model>
 <form name="form">
-    <vn-card pad-large>
-        <vn-tool-bar margin-small-bottom >
+    <vn-card class="vn-pa-lg">
+        <vn-tool-bar class="vn-mb-sm">
             <vn-button 
                 icon="icon-wand"
                 ng-click="$ctrl.guessPriority()"
diff --git a/modules/ticket/front/basic-data/step-one/index.html b/modules/ticket/front/basic-data/step-one/index.html
index 4e3cf361a6..85cc72bbdd 100644
--- a/modules/ticket/front/basic-data/step-one/index.html
+++ b/modules/ticket/front/basic-data/step-one/index.html
@@ -6,7 +6,7 @@
     auto-load="true">
 </vn-crud-model>
 <form name="form">
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete vn-one
                 vn-id="client"
diff --git a/modules/ticket/front/basic-data/step-three/index.html b/modules/ticket/front/basic-data/step-three/index.html
index 4208aaf8d3..0bd5bdc2a9 100644
--- a/modules/ticket/front/basic-data/step-three/index.html
+++ b/modules/ticket/front/basic-data/step-three/index.html
@@ -1,5 +1,5 @@
 <form name="form">
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete vn-one
                 url="/ticket/api/TicketUpdateActions"
diff --git a/modules/ticket/front/basic-data/step-two/index.html b/modules/ticket/front/basic-data/step-two/index.html
index 1ecd061e2c..7713555ae9 100644
--- a/modules/ticket/front/basic-data/step-two/index.html
+++ b/modules/ticket/front/basic-data/step-two/index.html
@@ -1,5 +1,5 @@
 <form name="form">
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <table class="vn-grid">
                 <thead>
diff --git a/modules/ticket/front/component/index.html b/modules/ticket/front/component/index.html
index 228a0270cb..d79bd524f8 100644
--- a/modules/ticket/front/component/index.html
+++ b/modules/ticket/front/component/index.html
@@ -7,7 +7,7 @@
     auto-load="true">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
     <vn-vertical>
     <table class="vn-grid">
         <thead>
diff --git a/modules/ticket/front/create/index.html b/modules/ticket/front/create/index.html
index 81c04a7b1f..97980d08a1 100644
--- a/modules/ticket/front/create/index.html
+++ b/modules/ticket/front/create/index.html
@@ -1,6 +1,6 @@
 <div class="content-block">    
     <div compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-ticket-create-card vn-id="card" on-save=""></vn-ticket-create-card>
         </vn-card>
         <vn-button-bar>
diff --git a/modules/ticket/front/descriptor/addStowaway.html b/modules/ticket/front/descriptor/addStowaway.html
index 3efaedc8df..b21eaed297 100644
--- a/modules/ticket/front/descriptor/addStowaway.html
+++ b/modules/ticket/front/descriptor/addStowaway.html
@@ -8,10 +8,10 @@
     class="modal-form"
     on-open="model.reload()">
     <tpl-body>
-        <vn-horizontal pad-medium class="header">
+        <vn-horizontal class="header vn-pa-md">
             <h5><span translate>Stowaways to add</span></h5>
         </vn-horizontal>
-        <vn-horizontal pad-medium>
+        <vn-horizontal class="vn-pa-md">
             <vn-table model="model" auto-load="false">
                 <vn-thead>
                     <vn-tr>
diff --git a/modules/ticket/front/descriptor/index.html b/modules/ticket/front/descriptor/index.html
index c377a23b18..88d510e069 100644
--- a/modules/ticket/front/descriptor/index.html
+++ b/modules/ticket/front/descriptor/index.html
@@ -119,7 +119,7 @@
             <h5 style="text-align: center">
                 <span translate>In which day you want to add the ticket?</span>
             </h5>
-            <vn-tool-bar margin-medium-top>
+            <vn-tool-bar class="vn-mt-md">
                 <vn-button
                     label="Monday" 
                     ng-click="$ctrl.addTurn(0)">
diff --git a/modules/ticket/front/descriptor/removeStowaway.html b/modules/ticket/front/descriptor/removeStowaway.html
index 515d6b2cc1..78ac5cf3f7 100644
--- a/modules/ticket/front/descriptor/removeStowaway.html
+++ b/modules/ticket/front/descriptor/removeStowaway.html
@@ -2,10 +2,10 @@
     class="modal-form"
     vn-id="dialog">
     <tpl-body>
-        <vn-horizontal pad-medium class="header">
+        <vn-horizontal class="header vn-pa-md">
             <h5><span translate>Stowaways of the ticket</span> {{$ctrl.ticket.id}}</h5>
         </vn-horizontal>
-        <vn-horizontal pad-medium>
+        <vn-horizontal class="vn-pa-md">
             <vn-table>
                 <vn-thead>
                     <vn-tr>
diff --git a/modules/ticket/front/dms/create/index.html b/modules/ticket/front/dms/create/index.html
index 2ab817c759..a3eae3b4d9 100644
--- a/modules/ticket/front/dms/create/index.html
+++ b/modules/ticket/front/dms/create/index.html
@@ -2,9 +2,13 @@
     vn-id="watcher"
     data="$ctrl.dms">
 </vn-watcher>
-<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium enctype="multipart/form-data">
+<form
+    name="form"
+    ng-submit="$ctrl.onSubmit()"
+    class="vn-ma-md"
+    enctype="multipart/form-data">
     <div compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-one vn-focus
                     label="Reference" 
diff --git a/modules/ticket/front/dms/edit/index.html b/modules/ticket/front/dms/edit/index.html
index 44075615dc..47810fce8b 100644
--- a/modules/ticket/front/dms/edit/index.html
+++ b/modules/ticket/front/dms/edit/index.html
@@ -2,9 +2,13 @@
     vn-id="watcher"
     data="$ctrl.dms">
 </vn-watcher>
-<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium enctype="multipart/form-data">
+<form
+    name="form"
+    ng-submit="$ctrl.onSubmit()"
+    class="vn-ma-md"
+    enctype="multipart/form-data">
     <div compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-one vn-focus
                     label="Reference" 
diff --git a/modules/ticket/front/dms/index/index.html b/modules/ticket/front/dms/index/index.html
index ce0dde2119..527012559d 100644
--- a/modules/ticket/front/dms/index/index.html
+++ b/modules/ticket/front/dms/index/index.html
@@ -7,7 +7,7 @@
     data="$ctrl.ticketDms">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-table model="model">
                 <vn-thead>
diff --git a/modules/ticket/front/expedition/index.html b/modules/ticket/front/expedition/index.html
index eafd318a23..a39c2f9c24 100644
--- a/modules/ticket/front/expedition/index.html
+++ b/modules/ticket/front/expedition/index.html
@@ -7,7 +7,7 @@
     data="expeditions">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-table model="model">
                 <vn-thead>
@@ -26,7 +26,7 @@
                 </vn-thead>
                 <vn-tbody>
                     <vn-tr ng-repeat="expedition in expeditions">
-                        <vn-td pad-medium-h style="width:30px;color:#FFA410;">
+                        <vn-td class="vn-px-md" style="width:30px;color:#FFA410;">
                             <vn-icon-button icon="delete"
                                 ng-click="$ctrl.deleteExpedition(expedition)"
                                 vn-tooltip="Delete expedition">
diff --git a/modules/ticket/front/index/index.html b/modules/ticket/front/index/index.html
index 0f70dea400..41d2f2c770 100644
--- a/modules/ticket/front/index/index.html
+++ b/modules/ticket/front/index/index.html
@@ -7,7 +7,7 @@
     order="shipped DESC, zoneHour ASC, zoneMinute ASC, clientFk">
 </vn-crud-model>
 <div class="content-block">
-    <vn-card pad-medium-h class="vn-w-sm">
+    <vn-card class="vn-px-md vn-w-sm">
         <vn-horizontal>
             <vn-searchbar
                 vn-id="ticketSearchbar"
@@ -29,8 +29,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        margin-medium-v
-        margin-huge-bottom>
+        class="vn-my-md vn-mb-xl">
         <vn-card>
         <vn-table model="model">
             <vn-thead>
diff --git a/modules/ticket/front/note/index.html b/modules/ticket/front/note/index.html
index bc808ce8ea..765cee481f 100644
--- a/modules/ticket/front/note/index.html
+++ b/modules/ticket/front/note/index.html
@@ -17,8 +17,8 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
-        <vn-one margin-medium-top>
+    <vn-card class="vn-pa-lg">
+        <vn-one class="vn-mt-md">
             <vn-horizontal ng-repeat="observation in observations track by $index">
                 <vn-autocomplete
                     ng-attr-disabled="observation.id ? true : false"
@@ -29,12 +29,12 @@
                 </vn-autocomplete>
                 <vn-textfield
                     vn-two
-                    margin-large-right
+                    class="vn-mr-lg"
                     label="Description"
                     model="observation.description"
                     rule="ticketObservation.description">
                 </vn-textfield>
-                <vn-auto pad-medium-top>
+                <vn-auto class="vn-pt-md">
                     <vn-icon-button
                         pointer
                         vn-tooltip="Remove note"
diff --git a/modules/ticket/front/package/index.html b/modules/ticket/front/package/index.html
index e774012c55..42703bd9f6 100644
--- a/modules/ticket/front/package/index.html
+++ b/modules/ticket/front/package/index.html
@@ -12,7 +12,7 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-one>
             <vn-horizontal ng-repeat="package in packages track by $index">
                 <vn-autocomplete vn-one
@@ -37,7 +37,7 @@
                     disabled="true"
                     ng-readonly="true">
                 </vn-textfield>
-                <vn-auto pad-medium-top>
+                <vn-auto class="vn-pt-md">
                     <vn-icon-button
                         pointer
                         vn-tooltip="Remove package"
diff --git a/modules/ticket/front/picture/index.html b/modules/ticket/front/picture/index.html
index 5ab23d6c3b..a089393b50 100644
--- a/modules/ticket/front/picture/index.html
+++ b/modules/ticket/front/picture/index.html
@@ -11,7 +11,7 @@
     <vn-card
         ng-if="!model.data || model.data.length == 0"
         style="text-align: center"
-        pad-medium>
+        class="vn-pa-md">
         <span translate>No results</span>
     </vn-card>
     <vn-horizontal class="catalog-list">
diff --git a/modules/ticket/front/request/create/index.html b/modules/ticket/front/request/create/index.html
index b03e87f6ac..3ff2dc82ee 100644
--- a/modules/ticket/front/request/create/index.html
+++ b/modules/ticket/front/request/create/index.html
@@ -5,9 +5,9 @@
     form="form"
     save="post">
 </vn-watcher>
-<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
+<form name="form" ng-submit="$ctrl.onSubmit()" class="vn-ma-md">
     <div compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-textfield vn-one label="Description" field="$ctrl.ticketRequest.description" vn-focus></vn-textfield>
                 <vn-autocomplete 
diff --git a/modules/ticket/front/request/index/index.html b/modules/ticket/front/request/index/index.html
index 24dcd39f66..f06401bf71 100644
--- a/modules/ticket/front/request/index/index.html
+++ b/modules/ticket/front/request/index/index.html
@@ -14,7 +14,7 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()">
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
     <vn-horizontal>
     <vn-table model="model">
         <vn-thead>
diff --git a/modules/ticket/front/sale-checked/index.html b/modules/ticket/front/sale-checked/index.html
index cc4db0aafa..e55441a02b 100644
--- a/modules/ticket/front/sale-checked/index.html
+++ b/modules/ticket/front/sale-checked/index.html
@@ -7,7 +7,7 @@
     data="sales">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-table model="model">
                     <vn-thead>
diff --git a/modules/ticket/front/sale-tracking/index.html b/modules/ticket/front/sale-tracking/index.html
index c3c918c090..175efbf66d 100644
--- a/modules/ticket/front/sale-tracking/index.html
+++ b/modules/ticket/front/sale-tracking/index.html
@@ -6,7 +6,7 @@
     data="sales">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-table model="model">
                 <vn-thead>
diff --git a/modules/ticket/front/sale/editDiscount.html b/modules/ticket/front/sale/editDiscount.html
index e4c7cf9cd9..ce90f9d998 100644
--- a/modules/ticket/front/sale/editDiscount.html
+++ b/modules/ticket/front/sale/editDiscount.html
@@ -1,7 +1,7 @@
-<vn-horizontal pad-medium class="header">
+<vn-horizontal class="header vn-pa-md">
     <h5>MANÁ: {{$ctrl.mana | currency: 'EUR':0}}</h5>
 </vn-horizontal>
-<div pad-medium>
+<div class="vn-pa-md">
     <vn-input-number
         vn-focus
         label="Discount"
diff --git a/modules/ticket/front/sale/index.html b/modules/ticket/front/sale/index.html
index 1ffde9f16b..679d4e9b43 100644
--- a/modules/ticket/front/sale/index.html
+++ b/modules/ticket/front/sale/index.html
@@ -8,10 +8,10 @@
     data="$ctrl.sales">
 </vn-watcher>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal class="header">
-                <vn-tool-bar margin-medium-bottom>
+                <vn-tool-bar class="vn-mb-md">
                     <vn-button
                         disabled="!$ctrl.isEditable"
                         label="Ok"
@@ -201,10 +201,10 @@
             enable="true">
         </vn-spinner>
         <div ng-if="$ctrl.mana != null">
-            <vn-horizontal pad-medium class="header">
+            <vn-horizontal class="header vn-pa-md">
                 <h5>MANÁ: {{$ctrl.mana | currency: 'EUR':0}}</h5>
             </vn-horizontal>
-            <div pad-medium>
+            <div class="vn-pa-md">
                 <vn-input-number
                     vn-focus
                     label="Price"
@@ -268,7 +268,7 @@
 
     <!-- Transfer Popover -->
     <vn-popover class="transfer" vn-id="transfer">
-        <div pad-medium>
+        <div class="vn-pa-md">
             <vn-horizontal>
                 <vn-one>
                     <h4 translate>Sales to transfer</h4>
@@ -332,7 +332,7 @@
                         </tbody>
                     </table>
 
-                    <vn-horizontal pad-medium-v>
+                    <vn-horizontal class="vn-py-md">
                         <vn-textfield vn-one
                             label="Transfer to ticket"
                             model="$ctrl.transfer.ticketId"
@@ -343,7 +343,7 @@
                             ng-click="$ctrl.transferSales($ctrl.transfer.ticketId)">
                         </vn-icon-button>
                     </vn-horizontal>
-                    <vn-horizontal pad-medium-v>
+                    <vn-horizontal class="vn-py-md">
                         <vn-button
                             label="New ticket"
                             ng-click="$ctrl.transferSales()">
diff --git a/modules/ticket/front/search-panel/index.html b/modules/ticket/front/search-panel/index.html
index 70fa24e63b..da6aac8e30 100644
--- a/modules/ticket/front/search-panel/index.html
+++ b/modules/ticket/front/search-panel/index.html
@@ -109,7 +109,7 @@
                 url="/api/Provinces">
             </vn-autocomplete>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/ticket/front/services/index.html b/modules/ticket/front/services/index.html
index dc7f5b92c3..5b6b2dbef9 100644
--- a/modules/ticket/front/services/index.html
+++ b/modules/ticket/front/services/index.html
@@ -10,7 +10,7 @@
     data="$ctrl.services">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-one>
             <vn-horizontal ng-repeat="service in $ctrl.services track by $index">
                 <vn-autocomplete vn-one
@@ -21,7 +21,9 @@
                     value-field="name"
                     field="service.description">
                 </vn-autocomplete>
-                <vn-icon-button vn-auto margin-medium-v
+                <vn-icon-button
+                    vn-auto
+                    class="vn-my-md"
                     icon="add_circle"
                     vn-tooltip="New service type"
                     ng-click="$ctrl.newServiceTypeDialog($index)"
@@ -43,7 +45,7 @@
                     value-field="id"
                     field="service.taxClassFk">
                 </vn-autocomplete>
-                <vn-auto pad-medium-top>
+                <vn-auto class="vn-pt-md">
                     <vn-icon-button
                         pointer
                         vn-tooltip="Remove service"
@@ -73,7 +75,7 @@
     on-open="$ctrl.onNewServiceTypeOpen()"
     on-response="$ctrl.onNewServiceTypeResponse(response)">
     <tpl-body>
-        <h5 pad-small-v translate>New service type</h5>
+        <h5 class="vn-py-sm" translate>New service type</h5>
         <vn-horizontal>
             <vn-textfield vn-one
                 label="Description"
diff --git a/modules/ticket/front/tracking/edit/index.html b/modules/ticket/front/tracking/edit/index.html
index e7368ba7ae..5df2d33796 100644
--- a/modules/ticket/front/tracking/edit/index.html
+++ b/modules/ticket/front/tracking/edit/index.html
@@ -5,7 +5,7 @@
     form="form">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete
                 vn-one
diff --git a/modules/ticket/front/tracking/index/index.html b/modules/ticket/front/tracking/index/index.html
index 1292c797e3..9b4a9e1eaf 100644
--- a/modules/ticket/front/tracking/index/index.html
+++ b/modules/ticket/front/tracking/index/index.html
@@ -7,7 +7,7 @@
     data="trackings">
 </vn-crud-model>
 <vn-vertical compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-title>Tracking</vn-title>
             <vn-table model="model">
diff --git a/modules/ticket/front/volume/index.html b/modules/ticket/front/volume/index.html
index ef21d8f508..faeb758b6f 100644
--- a/modules/ticket/front/volume/index.html
+++ b/modules/ticket/front/volume/index.html
@@ -12,7 +12,7 @@
 </vn-crud-model>
 <mg-ajax path="/client/api/tickets/{{$ctrl.$stateParams.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
 <vn-vertical>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <div class="totalBox">
                     <vn-label-value label="Total" 
diff --git a/modules/ticket/front/weekly/create/index.html b/modules/ticket/front/weekly/create/index.html
index bedd5f40c0..3263df1421 100644
--- a/modules/ticket/front/weekly/create/index.html
+++ b/modules/ticket/front/weekly/create/index.html
@@ -7,7 +7,7 @@
 </vn-watcher>
 <div class="content-block">
     <form name="form" vn-http-submit="$ctrl.onSubmit()" compact>
-        <vn-card pad-large>
+        <vn-card class="vn-pa-lg">
             <vn-horizontal>
                 <vn-autocomplete vn-one vn-id="ticket"
                     url="/api/tickets"
diff --git a/modules/ticket/front/weekly/index/index.html b/modules/ticket/front/weekly/index/index.html
index 51f40c9eba..43b431650b 100644
--- a/modules/ticket/front/weekly/index/index.html
+++ b/modules/ticket/front/weekly/index/index.html
@@ -9,7 +9,7 @@
 </vn-crud-model>
 <div class="content-block">
     <div class="vn-list">
-        <vn-card pad-medium-h>
+        <vn-card class="vn-px-md">
             <vn-horizontal>
                 <vn-searchbar
                     vn-id="turnSearchbar"
@@ -21,8 +21,8 @@
             </vn-horizontal>
         </vn-card>
     </div>
-    <div margin-medium>
-        <vn-card margin-medium-v pad-medium compact>
+    <div class="vn-ma-md">
+        <vn-card class="vn-my-md vn-pa-md compact">
             <vn-table model="model">
                 <vn-thead>
                     <vn-tr>
diff --git a/modules/travel/front/index/index.html b/modules/travel/front/index/index.html
index faa21144c4..9641f26cae 100644
--- a/modules/travel/front/index/index.html
+++ b/modules/travel/front/index/index.html
@@ -6,7 +6,7 @@
     data="travels">
 </vn-crud-model>
 <div class="content-block">
-    <vn-card pad-medium-h class="vn-w-sm">
+    <vn-card class="vn-px-md vn-w-sm">
         <vn-searchbar
             panel="vn-travel-search-panel"
             model="model"
@@ -17,8 +17,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        class="vn-w-lg"
-        margin-medium-v>
+        class="vn-w-lg vn-my-md">
         <vn-card>
         <vn-table model="model">
             <vn-thead>
diff --git a/modules/travel/front/search-panel/index.html b/modules/travel/front/search-panel/index.html
index 2a763767ef..3c36c419ab 100644
--- a/modules/travel/front/search-panel/index.html
+++ b/modules/travel/front/search-panel/index.html
@@ -63,7 +63,7 @@
                 value-field="id">
             </vn-autocomplete>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/worker/front/account/index.html b/modules/worker/front/account/index.html
new file mode 100644
index 0000000000..8535025d91
--- /dev/null
+++ b/modules/worker/front/account/index.html
@@ -0,0 +1,33 @@
+<mg-ajax
+    path="/api/Accounts/{{$ctrl.worker.userFk}}"
+    actions="user = edit.model"
+    options="mgEdit">
+</mg-ajax>
+<vn-watcher
+    vn-id="watcher"
+    url="/api/Accounts"
+    id-field="id"
+    data="user"
+    form="form">
+</vn-watcher>
+<form name="form" ng-submit="$ctrl.onSubmit()" compact>
+    <vn-card class="vn-pa-lg">
+        <vn-vertical>
+            <vn-horizontal>
+                <vn-field
+                    vn-one
+                    label="Nickname" 
+                    field="user.nickname">
+                </vn-field>
+            </vn-horizontal>
+        </vn-vertical>
+    </vn-card>
+    <vn-button-bar>
+        <vn-submit label="Save"></vn-submit>
+        <vn-button
+            label="Undo changes"
+            ng-if="watcher.dataChanged()"
+            ng-click="watcher.loadOriginalData()">
+        </vn-button>
+    </vn-button-bar>
+</form>
diff --git a/modules/worker/front/basic-data/index.html b/modules/worker/front/basic-data/index.html
index 5c2f4d6cde..1908aab660 100644
--- a/modules/worker/front/basic-data/index.html
+++ b/modules/worker/front/basic-data/index.html
@@ -7,7 +7,7 @@
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal>
                 <vn-textfield
diff --git a/modules/worker/front/calendar/index.html b/modules/worker/front/calendar/index.html
index da43bde55e..d832fa960f 100644
--- a/modules/worker/front/calendar/index.html
+++ b/modules/worker/front/calendar/index.html
@@ -3,7 +3,7 @@
     data="$ctrl.absenceTypes" auto-load="true">
 </vn-crud-model>
 <div class="main-with-right-menu">
-    <vn-card pad-small>
+    <vn-card class="vn-pa-sm">
         <vn-horizontal class="calendar-list">
             <section class="calendar" ng-repeat="month in $ctrl.months">
                 <vn-calendar
@@ -15,7 +15,7 @@
         </vn-horizontal>
     </vn-card>
     <vn-side-menu side="right">
-        <vn-vertical pad-small>
+        <vn-vertical class="vn-pa-sm">
             <vn-vertical class="totalBox">
                 <h6 translate>Holidays</h6>
                 <vn-auto>
diff --git a/modules/worker/front/calendar/style.scss b/modules/worker/front/calendar/style.scss
index 04c1ba3052..cb93174af5 100644
--- a/modules/worker/front/calendar/style.scss
+++ b/modules/worker/front/calendar/style.scss
@@ -12,7 +12,7 @@
 
     .calendar {
         box-sizing: border-box;
-        padding: $pad-medium;
+        padding: $spacing-md;
         overflow: hidden;
         min-width: 18em;
         width: 25%;
diff --git a/modules/worker/front/department/index.html b/modules/worker/front/department/index.html
index 6cf2cd0630..4d1b40beb1 100644
--- a/modules/worker/front/department/index.html
+++ b/modules/worker/front/department/index.html
@@ -6,8 +6,8 @@
 </vn-crud-model>
 
 <form name="form">
-    <div margin-medium>
-        <vn-card margin-medium-v pad-medium>
+    <div class="vn-ma-md">
+        <vn-card class="vn-my-md vn-pa-md">
             <vn-treeview vn-id="treeview" model="model"
                 on-selection="$ctrl.onSelection(item, value)"
                 on-create="$ctrl.onCreate(parent)"
@@ -33,7 +33,7 @@
     on-open="$ctrl.onCreateDialogOpen()"
     on-response="$ctrl.onCreateResponse(response)">
     <tpl-body>
-        <h5 pad-small-v translate>New department</h5>
+        <h5 class="vn-py-sm" translate>New department</h5>
         <vn-horizontal>
             <vn-textfield vn-one
                 label="Name"
diff --git a/modules/worker/front/index/index.html b/modules/worker/front/index/index.html
index ce1a438b50..c27f3aed48 100644
--- a/modules/worker/front/index/index.html
+++ b/modules/worker/front/index/index.html
@@ -6,7 +6,7 @@
     data="workers">
 </vn-crud-model>
 <div class="content-block vn-w-sm">
-    <vn-card pad-medium-h>
+    <vn-card class="vn-px-md">
         <vn-horizontal>
             <vn-searchbar
                 style="width: 100%"
@@ -28,7 +28,7 @@
     </vn-card>
     <vn-data-viewer
         model="model"
-        margin-medium-v>
+        class="vn-my-md">
         <vn-card>
         <div class="vn-list">
         <a 
diff --git a/modules/worker/front/pbx/index.html b/modules/worker/front/pbx/index.html
index 1bb1bb265f..db01a89a10 100644
--- a/modules/worker/front/pbx/index.html
+++ b/modules/worker/front/pbx/index.html
@@ -3,7 +3,7 @@
     data="$ctrl.worker.sip">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" compact>
-    <vn-card pad-large>
+    <vn-card class="vn-pa-lg">
         <vn-vertical>
             <vn-horizontal>
                 <vn-textfield
diff --git a/modules/worker/front/search-panel/index.html b/modules/worker/front/search-panel/index.html
index eda57c540b..4a126cd24c 100644
--- a/modules/worker/front/search-panel/index.html
+++ b/modules/worker/front/search-panel/index.html
@@ -60,7 +60,7 @@
                 model="filter.extension">
             </vn-textfield>
         </vn-horizontal>
-        <vn-horizontal margin-large-top>
+        <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>
     </form>
diff --git a/modules/worker/front/summary/index.html b/modules/worker/front/summary/index.html
index 9dd0a15b6c..e2c93ea48c 100644
--- a/modules/worker/front/summary/index.html
+++ b/modules/worker/front/summary/index.html
@@ -1,6 +1,6 @@
 <vn-card class="summary">
     <h5>{{worker.firstName}} {{worker.lastName}}</h5>
-    <vn-horizontal pad-medium>
+    <vn-horizontal class="vn-pa-md">
         <vn-one>
             <h4 translate>Basic data</h4>
             <vn-label-value label="Id" 
diff --git a/modules/worker/front/time-control/index.html b/modules/worker/front/time-control/index.html
index f8915542be..0483acad1b 100644
--- a/modules/worker/front/time-control/index.html
+++ b/modules/worker/front/time-control/index.html
@@ -5,7 +5,7 @@
     data="$ctrl.hours">
 </vn-crud-model>
 <div class="main-with-right-menu">
-    <vn-card compact pad-large>
+    <vn-card class="compact vn-pa-lg">
         <vn-horizontal>
             <vn-table model="model" auto-load="false" vn-one>
                 <vn-thead>
@@ -21,7 +21,7 @@
                 </vn-thead>
                 <vn-tbody>
                     <vn-tr>
-                        <vn-td ng-repeat="weekday in $ctrl.weekDays" class="hours" pad-none center>
+                        <vn-td ng-repeat="weekday in $ctrl.weekDays" class="hours vn-pa-none" center>
                             <section ng-repeat="hour in weekday.hours" center>
                                 <vn-icon
                                     icon="arrow_{{($index % 2) == 0 ? 'forward' : 'back'}}"
@@ -51,7 +51,7 @@
         </vn-horizontal>
     </vn-card>
     <vn-side-menu side="right">
-        <vn-vertical pad-small>
+        <vn-vertical class="vn-pa-sm">
             <vn-vertical class="totalBox">
                 <h6 translate>Hours</h6>
                 <vn-label-value 
@@ -60,7 +60,7 @@
                 </vn-label-value>
             </vn-vertical>
         </vn-vertical>
-        <vn-calendar pad-small
+        <vn-calendar class="vn-pa-sm"
             data="$ctrl.currentWeek"
             default-date="$ctrl.defaultDate"
             on-selection="$ctrl.onSelection($days)"
diff --git a/webpack.config.js b/webpack.config.js
index f45cdd1083..227c0ada23 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -59,7 +59,7 @@ let baseConfig = {
                             // https://github.com/webpack-contrib/style-loader/issues/303
                             // sourceMap: true,
                             includePaths: [
-                                path.resolve(__dirname, 'front/salix/styles')
+                                path.resolve(__dirname, 'front/core/styles')
                             ]
                         }
                     }