From 58b474b6f66a4ca155a2229bcaaa56c77bcd2264 Mon Sep 17 00:00:00 2001
From: Evgeniy Kolesov <ikolesov@ebay.com>
Date: Wed, 18 Feb 2015 12:10:19 +0200
Subject: [PATCH] MAGETWO-32303: New Form

---
 Gruntfile.js                                  |    4 +-
 .../Ui/view/base/templates/form/default.phtml |    7 +-
 .../templates/form/fieldset/default.phtml     |    7 +-
 .../base/templates/layout/group/default.phtml |    6 +-
 .../templates/layout/tabs/nav/default.phtml   |    4 +-
 .../base/web/templates/content/content.html   |    4 +-
 .../base/web/templates/fieldset/fieldset.html |   10 +-
 .../templates/form/components/collection.html |    6 +-
 .../web/templates/form/element/checkbox.html  |   14 +-
 .../base/web/templates/form/element/date.html |    4 +-
 .../web/templates/form/element/email.html     |    4 +-
 .../form/element/helper/tooltip.html          |    6 +-
 .../web/templates/form/element/input.html     |    6 +-
 .../web/templates/form/element/media.html     |    6 +-
 .../templates/form/element/multiselect.html   |    2 +-
 .../web/templates/form/element/price.html     |    8 +-
 .../web/templates/form/element/select.html    |    2 +-
 .../web/templates/form/element/textarea.html  |    2 +-
 .../view/base/web/templates/group/field.html  |   18 +-
 .../view/base/web/templates/group/group.html  |   12 +-
 .../Ui/view/base/web/templates/tab.html       |   12 +-
 .../Magento_Ui/web/css/source/_form.less      |  338 +++
 .../web/css/source/_form/_tooltip.less        |   91 +
 .../Magento_Ui/web/css/source/_module.less    |    4 +-
 .../Magento_Ui/web/css/source/_tabnav.less    |  110 +
 .../Magento_Ui/web/css/source/module.less     |    4 +-
 .../Magento/backend/web/css/override.css      | 2582 ++++++++---------
 .../Magento/backend/web/css/source/_form.less |  283 ++
 .../web/css/source/_form/_abstract.less       |   26 +
 .../backend/web/css/source/_sources.less      |    2 +-
 .../Magento/backend/web/css/styles-new.less   |    8 +
 .../Magento/backend/web/images/arrows-bg.svg  |    5 +
 32 files changed, 2215 insertions(+), 1382 deletions(-)
 create mode 100644 app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less
 create mode 100644 app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less
 create mode 100644 app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_tabnav.less
 create mode 100644 app/design/adminhtml/Magento/backend/web/css/source/_form.less
 create mode 100644 app/design/adminhtml/Magento/backend/web/css/source/_form/_abstract.less
 create mode 100644 app/design/adminhtml/Magento/backend/web/css/styles-new.less
 create mode 100644 app/design/adminhtml/Magento/backend/web/images/arrows-bg.svg

diff --git a/Gruntfile.js b/Gruntfile.js
index 535051c3a14..44963fb6e2d 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -76,8 +76,6 @@ module.exports = function (grunt) {
             files: [
                 'css/styles-old',
                 'css/styles',
-                'css/pages',
-                'css/admin',
                 'css/styles-migration'
             ]
         }
@@ -654,7 +652,7 @@ module.exports = function (grunt) {
 
     //  Tests
     //  ---------------------------------------------
-    
+
     grunt.registerTask('spec', [
         'specRunner:lib',
         'specRunner:backend',
diff --git a/app/code/Magento/Ui/view/base/templates/form/default.phtml b/app/code/Magento/Ui/view/base/templates/form/default.phtml
index b57256a93a8..63ea99c037f 100644
--- a/app/code/Magento/Ui/view/base/templates/form/default.phtml
+++ b/app/code/Magento/Ui/view/base/templates/form/default.phtml
@@ -7,12 +7,15 @@
  * @var \Magento\Ui\Component\Form $block
  */
 ?>
+
 <script data-mage-init='{ "Magento_Ui/js/core/app": "" }' type="application/json">
     <?php echo $block->getRenderContext()->getConfigBuilder()->toJsonNew($block->getRenderContext()->getStorage()); ?>
 </script>
+<div class="admin__scope">
 <div data-role="spinner" data-component="<?php echo $block->getDataScope(); ?>.areas" class="grid-loading-mask">
-    <div class="grid-loader"></div>
+    <div class="spinner"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
 </div>
-<div data-bind="scope: '<?php echo $block->getDataScope(); ?>.areas'" class="entry-edit form-inline">
+</div>
+<div data-bind="scope: '<?php echo $block->getDataScope(); ?>.areas'">
     <!-- ko template: getTemplate() --><!-- /ko -->
 </div>
diff --git a/app/code/Magento/Ui/view/base/templates/form/fieldset/default.phtml b/app/code/Magento/Ui/view/base/templates/form/fieldset/default.phtml
index 772ff693c64..0d814d882b5 100644
--- a/app/code/Magento/Ui/view/base/templates/form/fieldset/default.phtml
+++ b/app/code/Magento/Ui/view/base/templates/form/fieldset/default.phtml
@@ -13,15 +13,14 @@ $children = $block->getChildren();
 $content = $block->getContent();
 $ajaxUrl = $block->getAjaxUrl();
 ?>
-
-<div class="fieldset-wrapper-title" tabindex="3" data-bind="click: onClick, keyboard: { 13: toggle }">
+<div class="admin__fieldset-wrapper-title" tabindex="3" data-bind="click: onClick, keyboard: { 13: toggle }">
     <strong class="title">
         <span data-bind="text: label"><?php echo $block->getData('config/label'); ?></span>
     </strong>
 </div>
 
-<div class="fieldset-wrapper-content">
-    <fieldset id="<?php echo $block->getData('index'); ?>" class="fieldset">
+<div class="admin__fieldset-wrapper-content">
+    <fieldset id="<?php echo $block->getData('index'); ?>" class="admin__fieldset">
         <?php if (!empty($content)): ?>
             <?php echo $content; ?>
         <?php endif; ?>
diff --git a/app/code/Magento/Ui/view/base/templates/layout/group/default.phtml b/app/code/Magento/Ui/view/base/templates/layout/group/default.phtml
index 1f764adc5a3..c3a67828419 100644
--- a/app/code/Magento/Ui/view/base/templates/layout/group/default.phtml
+++ b/app/code/Magento/Ui/view/base/templates/layout/group/default.phtml
@@ -11,11 +11,11 @@
  */
 
 ?>
-<div class="field form__field <?php echo $block->getIsRequired()?>" data-bind="css: {'required': required}">
-    <label class="label" data-bind="attr: { for: <?php echo $block->getData('index')?> }" for="R1WKK">
+<div class="admin__field <?php echo $block->getIsRequired()?>" data-bind="css: {'required': required}">
+    <label class="admin__field-label" data-bind="attr: { for: <?php echo $block->getData('index')?> }" for="R1WKK">
         <span data-bind="text: element.label"><?php echo $block->getData('label')?></span>
     </label>
-    <div class="control">
+    <div class="admin__field-control">
         <?php if ($block->getChildren()): ?>
             <?php foreach ($block->getChildren() as $child): ?>
             <?php echo $block->renderElement($child['dataType'], ['field_config' => $child]); ?>
diff --git a/app/code/Magento/Ui/view/base/templates/layout/tabs/nav/default.phtml b/app/code/Magento/Ui/view/base/templates/layout/tabs/nav/default.phtml
index cc3224cb8de..0efd3666543 100644
--- a/app/code/Magento/Ui/view/base/templates/layout/tabs/nav/default.phtml
+++ b/app/code/Magento/Ui/view/base/templates/layout/tabs/nav/default.phtml
@@ -7,8 +7,10 @@
  * @var \Magento\Ui\Component\Layout\Tabs\Nav $block
  */
 ?>
+<div class="admin__scope">
 <div data-role="spinner" data-component="<?php echo $block->getDataScope(); ?>.sections" class="grid-loading-mask">
-    <div class="grid-loader"></div>
+    <div class="spinner"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
+</div>
 </div>
 <div data-bind="scope: '<?php echo $block->getDataScope(); ?>.sections' " class="ui-tabs">
     <!-- ko template: getTemplate() --><!-- /ko -->
diff --git a/app/code/Magento/Ui/view/base/web/templates/content/content.html b/app/code/Magento/Ui/view/base/web/templates/content/content.html
index 2fd05488003..cc9ae96bf6d 100644
--- a/app/code/Magento/Ui/view/base/web/templates/content/content.html
+++ b/app/code/Magento/Ui/view/base/web/templates/content/content.html
@@ -7,7 +7,9 @@
 <div data-bind="html: content"></div>
 
 <!--ko if: showSpinner -->
+<div class="admin__scope">
 <div data-role="spinner" class="grid-loading-mask" data-bind="visible: loading">
-    <div class="grid-loader"></div>
+    <div class="spinner"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
+</div>
 </div>
 <!-- /ko -->
diff --git a/app/code/Magento/Ui/view/base/web/templates/fieldset/fieldset.html b/app/code/Magento/Ui/view/base/web/templates/fieldset/fieldset.html
index f514147b571..97407fc8c86 100644
--- a/app/code/Magento/Ui/view/base/web/templates/fieldset/fieldset.html
+++ b/app/code/Magento/Ui/view/base/web/templates/fieldset/fieldset.html
@@ -5,18 +5,20 @@
  */
 -->
 <!-- ko if: elems -->
-<div class="fieldset-wrapper" data-bind="css: {'collapsable-wrapper': collapsible, 'opened': opened}">
-    <div class="fieldset-wrapper-title" tabindex="3" data-bind="click: onClick, keyboard: { 13: toggle }">
+<div class="admin__scope">
+<div class="admin__fieldset-wrapper" data-bind="css: {'collapsable-wrapper': collapsible, 'opened': opened}">
+    <div class="admin__fieldset-wrapper-title" tabindex="3" data-bind="click: onClick, keyboard: { 13: toggle }">
         <strong class="title">
             <span data-bind="text: label"></span>
         </strong>
     </div>
-    <div class="fieldset-wrapper-content" data-bind="visible: opened">
-        <fieldset class="fieldset">
+    <div class="admin__fieldset-wrapper-content" data-bind="visible: opened">
+        <fieldset class="admin__fieldset">
         <!-- ko foreach: { data: elems, as: 'element' } -->
             <!-- ko template: element.getTemplate() --><!-- /ko -->
         <!-- /ko -->
         </fieldset>
     </div>
 </div>
+</div>
 <!-- /ko -->
\ No newline at end of file
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/components/collection.html b/app/code/Magento/Ui/view/base/web/templates/form/components/collection.html
index 887031d81c5..70a7666f343 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/components/collection.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/components/collection.html
@@ -11,7 +11,7 @@
             <li class="address-list-item" data-bind="css: { 'ui-state-active': element.active }, click: activate">
                 <div class="address-list-item-actions">
                     <button class="action-delete" type="button" data-bind="attr: { title: $parent.removeLabel }, click: $parent.removeChild(element)">
-                        <span data-bind="text: element.removeLabel"></span>
+                        <span data-bind="text: $parent.removeLabel"></span>
                     </button>
                 </div>
                 <!-- ko template: previewTpl --><!-- /ko -->
@@ -30,8 +30,8 @@
     <!-- ko foreach: { data: element.elems, as: 'element' } -->
     <div class="address-item-edit" data-bind="visible: element.active">
         <div class="address-item-edit-content">
-            <fieldset class="fieldset">
-                <legend style="display: none;" class="legend">
+            <fieldset class="admin__fieldset">
+                <legend class="admin__legend">
                     <span data-bind="text: $parent.label"></span>
                 </legend>
                 <br>
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/checkbox.html b/app/code/Magento/Ui/view/base/web/templates/form/element/checkbox.html
index 49044013d22..1f712a604ab 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/checkbox.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/checkbox.html
@@ -4,10 +4,10 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="form__field choice">
-    <input type="checkbox" class="control-checkbox" data-bind="checked: value, attr: { id: uid, disabled: disabled, name: inputName }, hasFocus: focused">
-    
-    <label class="label" data-bind="checked: value, attr: { for: uid }">
+<div class="admin__field admin__field-option">
+    <input type="checkbox" class="admin__control-checkbox" data-bind="checked: value, attr: { id: uid, disabled: disabled, name: inputName }, hasFocus: focused">
+
+    <label class="admin__field-label" data-bind="checked: value, attr: { for: uid }">
         <!-- ko if: $parent.isSingle() -->
             <span data-bind="text: description"></span>
         <!-- /ko -->
@@ -15,8 +15,8 @@
             <span data-bind="text: description || label"></span>
         <!-- /ko -->
     </label>
-    
+
     <!-- ko if: notice -->
-        <div class="note" data-bind="attr: {id: noticeId}"><span data-bind="text: notice"></span></div>
+        <div class="admin__field-note" data-bind="attr: {id: noticeId}"><span data-bind="text: notice"></span></div>
     <!-- /ko -->
-</div>
\ No newline at end of file
+</div>
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/date.html b/app/code/Magento/Ui/view/base/web/templates/form/element/date.html
index 8afe0982185..2c3f8d14b29 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/date.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/date.html
@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<input class="control-text" type="text" data-bind="
+<input class="admin__control-text" type="text" data-bind="
     hasFocus: focused,
     datepicker: { storage: value, options: options },
     attr: {
@@ -13,4 +13,4 @@
         placeholder: placeholder,
         'aria-describedby': noticeId,
         disabled: disabled
-    }" />
\ No newline at end of file
+    }" />
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/email.html b/app/code/Magento/Ui/view/base/web/templates/form/element/email.html
index 0606cf3016d..2fbef675115 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/email.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/email.html
@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<input class="control-text" type="email" data-bind="
+<input class="admin__control-text" type="email" data-bind="
     hasFocus: focused,
     value: value,
     attr: {
@@ -13,4 +13,4 @@
         'aria-describedby': noticeId,
         id: uid,
         disabled: disabled
-    }"/>
\ No newline at end of file
+    }"/>
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html b/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html
index 48c463acd83..c8fa34985fc 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html
@@ -4,10 +4,10 @@
  * See COPYING.txt for license details.
  */
 -->
- <div class="field-tooltip">
-    <a class="field-tooltip-action action-help" target="_blank" tabindex="1" data-bind="attr: {href: tooltip.link}">
+ <div class="admin__field-tooltip">
+    <a class="admin__field-tooltip-action action-help" target="_blank" tabindex="1" data-bind="attr: {href: tooltip.link}">
     </a>
-    <div class="field-tooltip-content">
+    <div class="admin__field-tooltip-content">
         <!-- ko text: tooltip.description --><!-- /ko -->
     </div>
 </div>
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/input.html b/app/code/Magento/Ui/view/base/web/templates/form/element/input.html
index bf7b144bc94..124b398235c 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/input.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/input.html
@@ -4,13 +4,13 @@
  * See COPYING.txt for license details.
  */
 -->
-<input class="control-text" type="text" data-bind="
+<input class="admin__control-text" type="text" data-bind="
     value: value,
     hasFocus: focused,
     attr: {
         name: inputName,
         placeholder: placeholder,
         'aria-describedby': noticeId,
-        id: uid, 
+        id: uid,
         disabled: disabled
-    }" />
\ No newline at end of file
+    }" />
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/media.html b/app/code/Magento/Ui/view/base/web/templates/form/element/media.html
index 27f3271c402..d9b96ec9ed6 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/media.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/media.html
@@ -4,13 +4,13 @@
  * See COPYING.txt for license details.
  */
 -->
-<input class="control-file" type="file" data-bind="
+<input class="admin__control-file" type="file" data-bind="
     value: value,
     attr: {
         name: inputName,
         id: uid,
         'aria-describedby': noticeId,
-        disabled: disabled 
+        disabled: disabled
     },
     hasFocus: focused"
->
\ No newline at end of file
+/>
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/multiselect.html b/app/code/Magento/Ui/view/base/web/templates/form/element/multiselect.html
index 2d416047095..2697a777b84 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/multiselect.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/multiselect.html
@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<select multiple class="control-select multiselect" data-bind="
+<select multiple class="control-multiselect" data-bind="
     attr: {
         name: inputName,
         id: uid,
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/price.html b/app/code/Magento/Ui/view/base/web/templates/form/element/price.html
index dfbb6de96be..4fe9ac8105e 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/price.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/price.html
@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="control-addon">
-    <input class="control-text" type="text" data-bind="value: value, attr: { id: uid, disabled: disabled, name: inputName }, hasFocus: focused">
-    <label class="control-before" data-bind="attr: { for: uid }"><span data-bind="text: currency_sign"></span></label>
-</div>
\ No newline at end of file
+<div class="admin__control-addon">
+    <input class="admin__control-text" type="text" data-bind="value: value, attr: { id: uid, disabled: disabled, name: inputName }, hasFocus: focused">
+    <label class="admin__addon-prefix" data-bind="attr: { for: uid }"><span data-bind="text: currency_sign"></span></label>
+</div>
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/select.html b/app/code/Magento/Ui/view/base/web/templates/form/element/select.html
index 3a859699aca..31b2c87e5d9 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/select.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/select.html
@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<select class="control-select" data-bind="
+<select class="admin__control-select" data-bind="
     attr: {
         name: inputName,
         id: uid,
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/textarea.html b/app/code/Magento/Ui/view/base/web/templates/form/element/textarea.html
index 99fbe9026d9..8aa979d0658 100644
--- a/app/code/Magento/Ui/view/base/web/templates/form/element/textarea.html
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/textarea.html
@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<textarea class="control-textarea" data-bind="
+<textarea class="admin__control-textarea" data-bind="
     value: value,
     hasFocus: focused,
     attr: {
diff --git a/app/code/Magento/Ui/view/base/web/templates/group/field.html b/app/code/Magento/Ui/view/base/web/templates/group/field.html
index 48d0a28dccf..e01470fa2ae 100644
--- a/app/code/Magento/Ui/view/base/web/templates/group/field.html
+++ b/app/code/Magento/Ui/view/base/web/templates/group/field.html
@@ -4,29 +4,29 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="field form__field" data-bind="css: {'required': element.required, 'field-disabled': element.disabled, 'field-error': element.error}">
+<div class="admin__field" data-bind="css: {'_required': element.required, '_disabled': element.disabled, '_error': element.error}">
 
     <!-- ko if: element.label -->
-    <label class="label" data-bind="attr: { for: element.uid }, css: {'dublicated': element.label === $parent.label}">
+    <label class="admin__field-label" data-bind="attr: { for: element.uid }, css: {'_dublicated': element.label === $parent.label}">
         <span data-bind="text: element.label"></span>
     </label>
     <!-- /ko -->
 
-    <div class="control">
+    <div class="admin__field-control">
         <!-- ko ifnot: element.hasAddons() -->
             <!-- ko template: element.getTemplate() --><!-- /ko -->
         <!-- /ko -->
 
         <!-- ko if: element.hasAddons() -->
-            <div class="control-addon">
+            <div class="admin__control-addon">
                 <!-- ko template: element.getTemplate() --><!-- /ko -->
 
                 <!-- ko if: element.addbefore -->
-                    <label class="control-before" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label>
+                    <label class="admin__addon-prefix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label>
                 <!-- /ko -->
 
                 <!-- ko if: element.addafter -->
-                    <label class="control-after" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label>
+                    <label class="admin__addon-suffix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label>
                 <!-- /ko -->
             </div>
         <!-- /ko -->
@@ -36,13 +36,13 @@
         <!-- /ko -->
 
         <!-- ko if: element.notice -->
-            <div class="note" data-bind="attr: { id: element.noticeId }"><span data-bind="text: element.notice"></span></div>
+            <div class="admin__field-note" data-bind="attr: { id: element.noticeId }"><span data-bind="text: element.notice"></span></div>
         <!-- /ko -->
 
         <!-- ko if: $parent.isSingle() -->
              <!-- ko if: element.error() && !element.hidden() -->
-                <label class="mage-error" data-bind="attr: { for: element.uid }, text: element.error"></label>
+                <label class="admin__field-error" data-bind="attr: { for: element.uid }, text: element.error"></label>
             <!-- /ko -->
         <!-- /ko -->
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/code/Magento/Ui/view/base/web/templates/group/group.html b/app/code/Magento/Ui/view/base/web/templates/group/group.html
index 92de6c1ac5d..519aefbcee9 100644
--- a/app/code/Magento/Ui/view/base/web/templates/group/group.html
+++ b/app/code/Magento/Ui/view/base/web/templates/group/group.html
@@ -6,11 +6,11 @@
 -->
 
 <!-- ko if: element.isMultiple() -->
-<fieldset class="field form__field" data-bind="css: {'required': element.required}">
-    <legend class="label">
+<fieldset class="admin__field" data-bind="css: {'_required': element.required}">
+    <legend class="admin__field-label">
         <span data-bind="text: element.label"></span>
     </legend><br />
-    <div class="control" data-bind="css: {'control-fields': element.breakLine, 'control-grouped': !element.breakLine}">
+    <div class="admin__field-control" data-bind="css: {'admin__control-fields': element.breakLine, 'admin__control-grouped': !element.breakLine}">
         <!-- ko foreach: { data: elems, as: 'element' } -->
 
             <!-- ko ifnot: element.hidden -->
@@ -29,7 +29,7 @@
 
         <!-- ko foreach: { data: elems, as: 'element' } -->
             <!-- ko if: element.error() && !element.hidden() -->
-                <label class="mage-error" data-bind="attr: { for: uid }, text: element.error"></label>
+                <label class="admin__field-error" data-bind="attr: { for: uid }, text: element.error"></label>
             <!-- /ko -->
         <!-- /ko -->
     </div>
@@ -39,9 +39,9 @@
 <!-- ko if: element.isSingle() -->
 
     <!-- ko foreach: { data: elems, as: 'element' } -->
-    
+
         <!-- ko template: $parent.fieldTemplate --><!-- /ko -->
-    
+
     <!-- /ko -->
 
 <!-- /ko -->
\ No newline at end of file
diff --git a/app/code/Magento/Ui/view/base/web/templates/tab.html b/app/code/Magento/Ui/view/base/web/templates/tab.html
index 46aef3d2b6c..f194f87400e 100644
--- a/app/code/Magento/Ui/view/base/web/templates/tab.html
+++ b/app/code/Magento/Ui/view/base/web/templates/tab.html
@@ -4,15 +4,17 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="block tab-nav">
-    <div class="block-title" data-bind="css: { 'ui-accordion-header': collapsible, 'ui-accordion-header-active': opened() && collapsible }, click: toggle, click: onClick, keyboard: { 13: onClick }">
+<div class="admin__scope">
+<div class="admin__section-nav">
+    <div class="admin__section-nav-title" data-bind="css: { '_collapsible': collapsible, '_opened': opened() && collapsible }, click: toggle, click: onClick, keyboard: { 13: onClick }">
         <strong tabindex="1" data-bind="text: label, keyboard: { 13: toggle }"></strong>
     </div>
-    <ul class="tab-nav-items items" data-bind="visible: opened">
+    <ul class="admin__section-nav-items items" data-bind="visible: opened">
         <!-- ko foreach: elems -->
-            <li class="tab-nav-item" tabindex="2" data-bind="css: { 'ui-state-active': active, 'ui-tabs-loading': loading }, click: activate, keyboard: { 13: activate }">
-                <a class="tab-nav-item-link" href="#" data-bind="text: label, css: { changed: changed }, attr: { id: 'tab_' + index }"></a>
+            <li class="admin__section-nav-item" tabindex="2" data-bind="css: { '_active': active, '_loading': loading }, click: activate, keyboard: { 13: activate }">
+                <a class="admin__section-nav-link" href="#" data-bind="text: label, css: { '_changed': changed }, attr: { id: 'tab_' + index }"></a>
             </li>
         <!-- /ko -->
     </ul>
+</div>
 </div>
\ No newline at end of file
diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less
new file mode 100644
index 00000000000..eae45e2dc49
--- /dev/null
+++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less
@@ -0,0 +1,338 @@
+// /**
+//  * Copyright © 2015 Magento. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+
+//
+//  Variables
+//  _____________________________________________
+
+@field-control--border-color: #adadad;
+@field-control_focus--border-color: #007BDB;
+@field-scope--color: #808080;
+@field-label--color: #007BDB;
+@field-divider--color: #ccc;
+@field-label--color: #303030;
+@field-label-disabled--color: #999;
+@field-label_required--color: #EB5202;
+@field-note--color: #303030;
+@field-control--color: #303030;
+@field-control--bg-color: #fff;
+@field-control_disabled--bg-color: #E9E9E9;
+@field-control-addon--color: #858585;
+@field-date-icon--color: #514943;
+@field-error--color: #555;
+@field-error--bg-color: #FFF8D6;
+@field-error--border-color: #E22626;
+
+
+//
+//  Form Fields
+//  _____________________________________________
+
+.mix-grid-width(@_columns-min, @_total:12) {
+    @_gutter: 30px;
+    @_part: @_columns-min/@_total;
+    float: left;
+    width: ~'calc( (100%) * @{_part} - @{_gutter} )';
+    margin-left: @_gutter;
+}
+
+.col-2-left-layout {
+    margin-top: 50px;
+    margin-left: -30px;
+    width: auto;
+    .clearfix();
+    .main-col {
+        .mix-grid-width(9);
+        float: right;
+    }
+    .side-col {
+        .mix-grid-width(3);
+    }
+}
+.admin__fieldset-wrapper-title {
+    padding: 14px 0 16px;
+    margin-bottom: 30px;
+    strong {
+        &:extend(h2);
+    }
+}
+
+//
+//  Form Fields
+//  _____________________________________________
+
+.admin__block {
+    width: 100%;
+    border: 1px solid black;
+}
+.admin__fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
+    > .admin__field {
+        border: 0;
+        padding: 0;
+        margin: 0;
+        .clearfix(); // @todo !abstract
+        margin-left: -30px;
+
+        > .admin__field-control {
+            .mix-grid-width(4,9);
+        }
+        > .admin__field-label {
+            .mix-grid-width(3,9);
+        }
+    }
+}
+
+.admin__field-label {
+    margin: 0;
+    color: @field-label--color;
+    text-align: right;
+
+    & + br {
+        display: none;
+    }
+
+    [class]:not(.admin__field-option) > & {
+        font-family: 'Open Sans', arial, sans-serif;
+        font-size: 14px;
+        font-weight: 600;
+        padding-top: 0;
+        line-height: 33px;
+        white-space: nowrap;
+        &:before {
+            content: ".";
+            visibility: hidden;
+            width: 0;
+            margin-left: -7px;
+            overflow: hidden;
+        }
+        span {
+            white-space: normal;
+            display: inline-block;
+            vertical-align: middle;
+            line-height: 1.2;
+        }
+    }
+
+    ._required > & {
+        span:after {
+            content: "*";
+            color: @field-label_required--color;
+            display: inline;
+            font-weight: 500;
+            font-size: 16px;
+            margin-top: 2px;
+            position: absolute;
+            z-index: 1;
+            margin-left: 10px;
+        }
+    }
+
+    ._disabled > & {
+        color: @field-label-disabled--color;
+    }
+}
+
+
+.admin__field {
+
+    margin-bottom: 0;
+    & + & {
+        margin-top: 15px;
+    }
+    &:not(.admin__field-option) ~ .admin__field-option {
+        margin-left: 20px;
+        margin-top: 5px;
+    }
+    &.admin__field-option ~ .admin__field-option {
+        margin-top: 9px;
+    }
+    & ~ .admin__field-option:last-child {
+        margin-bottom: 8px;
+    }
+
+    .admin__fieldset > & {
+        margin-bottom: 30px;
+        position: relative;
+        z-index: 1;
+        &:hover {
+            z-index: 2;
+        }
+    }
+
+    &[data-config-scope] {
+        &:before {
+            .mix-grid-width(2);
+            position: absolute;
+            right: 0;
+            display: inline-block;
+            content: attr(data-config-scope);
+            float: right;
+            color: @field-scope--color;
+        }
+        .admin__field-control &:nth-child(n+2):before {
+            content: "";
+        }
+    }
+
+    &._error {
+        .admin__field-control [class*="admin__addon-"]:before,
+        .admin__field-control > [class*="admin__control-"] {
+            border-color: @field-error--border-color;
+        }
+    }
+}
+
+.admin__field-error {
+    border: 1px solid @field-error--border-color;
+    display: block;
+    margin: 2px 0 0;
+    padding: 6px 10px 10px;
+    background: @field-error--bg-color;
+    color: @field-error--color;
+    font-size: 12px;
+    font-weight: 500;
+    box-sizing: border-box;
+}
+
+.admin__field-note {
+    color: @field-note--color;
+    padding: 0;
+    margin: 10px 0 0;
+}
+
+.admin__control-fields {
+    .admin__field-label ~ .admin__field-control {
+        width: 100%;
+    }
+}
+
+.admin__field-option {
+    .admin__field-label {
+        text-align: left;
+    }
+    padding-top: 8px;
+    .admin__field-control > & {
+        &:nth-child(1):nth-last-child(2),
+        &:nth-child(2):nth-last-child(1) {
+            display: inline-block;
+            & + .admin__field-option {
+                display: inline-block;
+                margin-left: 41px;
+                margin-top: 0;
+            }
+            & + .admin__field-option:before {
+                content: "";
+                position: absolute;
+                display: inline-block;
+                height: 20px;
+                top: 8px;
+                left: -20px;
+                width: 1px;
+                background: @field-divider--color;
+            }
+        }
+    }
+}
+
+.admin__control-fields {
+    .admin__field:nth-child(n+2):not(.admin__field-option) {
+        > .admin__field-label {
+            .visually-hidden; // @todo !abstract
+        }
+    }
+}
+
+[class*="admin__control-grouped"] {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    box-sizing: border-box;
+    & > .admin__field {
+        display: table-cell;
+        width: 50%;
+        vertical-align: top;
+        > .admin__field-control {
+            width: 100%;
+            float: none;
+        }
+        &:nth-child(n+2) {
+            padding-left: 20px;
+            &:not(.admin__field-option) .admin__field-label {
+                .visually-hidden();
+            }
+        }
+    }
+}
+
+[class*="admin__control-grouped"],
+.admin__control-fields {
+    & > .admin__field:first-child {
+        position: static;
+        & > .admin__field-label {
+
+            position: absolute;
+            left: 0;
+            top: 0;
+            .mix-grid-width(3);
+            opacity: 0;
+            cursor: pointer;
+        }
+    }
+}
+
+// @todo Move to other place:
+.address-item-edit-content {
+    padding: 15px 30px;
+    .admin__field > .admin__field-control,
+    .admin__field > .admin__field-label {
+        text-align: left;
+        float: none;
+    }
+    .admin__field > .admin__field-control {
+        width: ~'calc( 100% - 30px )';
+    }
+    .admin__field-label {
+        margin-top: -16px;
+    }
+    ._required .admin__field-label span {
+        padding-left: 15px;
+        &:after {
+            left: 0;
+            margin-left: 30px;
+        }
+    }
+
+}
+.address-list {
+    list-style-type: none;
+    margin:0;
+    padding: 0;
+    width: 360px;
+    float: left;
+    .address-list-item {
+        margin-bottom: 30px;
+    }
+    .action-delete {
+        background-color: transparent;
+        padding: 0;
+        &:hover {
+            box-shadow: 0;
+            border: 0;
+        }
+    }
+}
+.address-item-edit {
+    margin-left: 359px;
+    .admin__legend {
+        display: none;
+    }
+}
+
+
diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less
new file mode 100644
index 00000000000..29f1ea0cd31
--- /dev/null
+++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less
@@ -0,0 +1,91 @@
+// /**
+//  * Copyright © 2015 Magento. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Variables
+//  _____________________________________________
+@field-tooltip-icon--color: #fff;
+@field-tooltip-icon--bg-color: #514943;
+@field-tooltip-content--bg-color: #fff8d7;
+@field-tooltip-content--border-color: #adadad;
+
+//
+//  Form Fields
+//  _____________________________________________
+
+.admin__field-tooltip {
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 5px;
+    .admin__field-option & {
+        margin-top: 10px
+    }
+    position: relative;
+    &:hover {
+        z-index: 99;
+    }
+    z-index: 1;
+    width:0;
+    overflow: visible;
+    &-action {
+        position: relative;
+        z-index: 2;
+        margin-left: 18px;
+        width: 22px;
+        height: 22px;
+        display: inline-block;
+        cursor: pointer;
+        &:before {
+            content: "?";
+            font-weight: 500;
+            font-size: 18px;
+            display: inline-block;
+            overflow: hidden;
+            height: 22px;
+            border-radius: 11px;
+            line-height: 22px;
+            width: 22px;
+            text-align: center;
+            color: @field-tooltip-icon--color;
+            background-color: @field-tooltip-icon--bg-color;
+        }
+        span {
+            .visually-hidden();
+        }
+    }
+    .admin__control-text:focus + &-content,
+    &:hover &-content {
+        display: block;
+    }
+    &-content {
+        display: none;
+        position: absolute;
+        z-index: 1;
+        width: 320px;
+        background: @field-tooltip-content--bg-color;
+        padding: 15px 25px;
+        right: -66px;
+        border: 1px solid @field-tooltip-content--border-color;
+        border-radius: 1px;
+        bottom: 42px;
+        @_shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
+        .css(box-shadow, @_shadow);
+        &:after,
+        &:before {
+            content: "";
+            display: block;
+            .arrow(down,16px,@field-tooltip-content--border-color);
+            position: absolute;
+            right: 20px;
+            top: 100%;
+            z-index: 3;
+        }
+        &:after {
+            border-top-color: @field-tooltip-content--bg-color;
+            margin-top: -1px;
+            z-index: 4;
+        }
+    }
+}
diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less
index 31d54b3810f..2b1847b0148 100644
--- a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less
+++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less
@@ -3,4 +3,6 @@
 //  * See COPYING.txt for license details.
 //  */
 
-//@import 'formelements';
+@import "_form";
+@import "_tabnav";
+@import '_form/_tooltip';
diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_tabnav.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_tabnav.less
new file mode 100644
index 00000000000..aa53748d74a
--- /dev/null
+++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_tabnav.less
@@ -0,0 +1,110 @@
+// /**
+//  * Copyright © 2015 Magento. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Tab Left Navigation
+//  _____________________________________________
+
+.admin__section-nav {
+    padding-bottom: 1px + 50px;
+}
+.admin__section-nav-title {
+    padding: 0;
+    margin: 0 0 -1px;
+    color: #333333;
+    display: block;
+    padding: 20px 13px;
+    background: #f1f1f1;
+    text-transform: uppercase;
+    border: 1px solid #e3e3e3;
+    line-height: 1.2;
+    &._collapsible {
+        padding-right: 35px;
+        &:after {
+            content: '\e628';
+            font-family: @icons-admin__font-name;
+            -webkit-font-smoothing: antialiased;
+            font-weight: normal;
+            speak: none;
+            position: absolute;
+            right: 18px;
+            top: 22px;
+            font-size: 13px;
+        }
+    }
+    strong {
+        font-weight: 700;
+    }
+}
+.admin__section-nav-items {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+.admin__section-nav-item {
+    padding: 0;
+    border-left: 3px solid transparent;
+    margin: 0 0 -1px;
+    &._active {
+        border-color: #eb5202;
+        .admin__section-nav-link {
+            border-color: #e3e3e3;
+            margin: 0;
+            &:hover {
+                text-decoration: none;
+            }
+        }
+    }
+    &._loading {
+        position: relative;
+        z-index: 1;
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: 2;
+            .url('images/loader-2.gif');
+            background: url("@{url}") no-repeat 50% 50%;
+            background-size: 120px;
+            width: 20px;
+            height: 20px;
+            top: 21px;
+            right: 5px;
+        }
+    }
+}
+.admin__section-nav-link {
+    border: 1px solid transparent;
+    border-width: 1px 0;
+    line-height: 1.2;
+    font-weight: 500;
+    color: #333333;
+    display: block;
+    padding: 20px 30px 20px 10px;
+    &:hover {
+        color: #333333;
+        text-decoration: underline;
+    }
+    &._changed {
+        position: relative;
+        z-index: 1;
+        &:before {
+            content: '\e623';
+            font-family: @icons-admin__font-name;
+            -webkit-font-smoothing: antialiased;
+            font-style: normal;
+            font-weight: normal;
+            speak: none;
+            position: absolute;
+            z-index: 2;
+            font-size: 17px;
+            color: #eb5202;
+            width: 20px;
+            height: 20px;
+            top: 15px;
+            right: 5px;
+        }
+    }
+}
diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less
index d16c342e0e5..0e4f0735167 100644
--- a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less
+++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less
@@ -3,7 +3,7 @@
 //  * See COPYING.txt for license details.
 //  */
 
-@import "formelements.less";
+//@import "formelements.less";
 
 //colors
 
@@ -28,6 +28,8 @@
 @size-l: @size__base;
 @size-xl: @size__base;
 
+@field-date-icon--color: #514943;
+
 [class*="tab-nav-item"]:not(ul):active,
 [class*="tab-nav-item"]:not(ul):focus {
     box-shadow: none;
diff --git a/app/design/adminhtml/Magento/backend/web/css/override.css b/app/design/adminhtml/Magento/backend/web/css/override.css
index faab3a7e010..a0feb7c171c 100644
--- a/app/design/adminhtml/Magento/backend/web/css/override.css
+++ b/app/design/adminhtml/Magento/backend/web/css/override.css
@@ -195,7 +195,9 @@ th {
   box-shadow: none;
   outline: 0;
 }
-.keyfocus *:focus {
+.keyfocus *:focus,
+.keyfocus .admin__control-radio:focus + label,
+.keyfocus .admin__control-checkbox:focus + label {
   box-shadow: 0 0 0 1px #008bdb;
 }
 img,
@@ -250,7 +252,8 @@ h1 {
   line-height: 3.4rem;
   margin: 0 0 2rem;
 }
-h2 {
+h2,
+.admin__fieldset-wrapper-title strong {
   font-size: 2rem;
   color: #41362f;
   font-weight: 400;
@@ -510,6 +513,278 @@ nav ol {
   margin-bottom: 1em;
   margin-left: 20rem;
 }
+.__form-control-styles,
+.admin__control-text,
+.admin__control-select,
+.admin__control-textarea,
+.admin__control-multiselect,
+.admin__control-addon [class*="admin__control-"] + [class*="admin__addon-"]:before {
+  background-color: #ffffff;
+  border-radius: 1px;
+  border: 1px solid #adadad;
+  color: #303030;
+  font-size: 15px;
+  font-weight: 500;
+  height: 33px;
+  max-width: 100%;
+  padding: 0 10px;
+}
+.__form-control-styles:focus,
+.admin__control-text:focus,
+.admin__control-select:focus,
+.admin__control-textarea:focus,
+.admin__control-multiselect:focus,
+.admin__control-addon [class*="admin__control-"]:focus + label:before {
+  border-color: #007bdb;
+  box-shadow: none;
+  outline: 0;
+}
+.__form-control-styles[disabled],
+.admin__control-text[disabled],
+.admin__control-select[disabled],
+.admin__control-textarea[disabled],
+.admin__control-multiselect[disabled],
+.admin__control-addon [class*="admin__control-"][disabled] + [class*="admin__addon-"]:before {
+  background-color: #e9e9e9;
+  border-color: #adadad;
+  color: #303030;
+  opacity: .5;
+}
+.admin__control-text {
+  line-height: normal;
+  width: 100%;
+}
+.admin__control-select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background-repeat: no-repeat;
+  background-image: url('../images/arrows-bg.svg'), linear-gradient(#e3e3e3, #e3e3e3), linear-gradient(#adadad, #adadad);
+  background-position: ~" calc(100% - 12px) -34px, 100%, calc(100% - 33px) 0";
+  background-size: auto, 33px 100%, 1px 100%;
+  padding-right: 44px;
+}
+.admin__control-select:focus {
+  background-image: url('../images/arrows-bg.svg'), linear-gradient(#e3e3e3, #e3e3e3), linear-gradient(#007bdb, #007bdb);
+  background-position: ~" calc(100% - 12px) 13px, 100%, calc(100% - 33px) 0";
+}
+.admin__control-select::-ms-expand {
+  display: none;
+}
+.ie9 .admin__control-select {
+  padding-right: 0;
+}
+option:empty {
+  display: none;
+}
+.admin__control-file {
+  background: transparent;
+  border: 0;
+}
+.admin__control-textarea,
+.admin__control-multiselect {
+  height: ~" calc(6 * 1.2em + 14px)";
+  line-height: 1.2;
+  padding: 6px 10px;
+  width: 100%;
+}
+.admin__control-textarea {
+  line-height: 1.18em;
+  padding-top: 8px;
+}
+.admin__control-radio,
+.admin__control-checkbox {
+  margin: 3px 0 0 0;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  vertical-align: top;
+}
+.admin__control-radio + label,
+.admin__control-checkbox + label {
+  cursor: pointer;
+  display: inline-block;
+  padding-left: 26px;
+}
+.admin__control-radio + label:before,
+.admin__control-checkbox + label:before {
+  background: url('../Magento_Ui/images/choice_bkg.png') no-repeat -100% -100% #ffffff;
+  border-radius: 2px;
+  border: 1px solid #adadad;
+  content: '';
+  float: left;
+  height: 14px;
+  line-height: 14px;
+  margin: 1px 10px 0 -26px;
+  text-align: center;
+  vertical-align: top;
+  width: 14px;
+}
+.admin__control-radio:focus + label:before,
+.admin__control-checkbox:focus + label:before {
+  border-color: #007bdb;
+}
+.admin__control-radio[disabled] + label,
+.admin__control-checkbox[disabled] + label {
+  color: #303030;
+  opacity: .5;
+}
+.admin__control-radio[disabled] + label:before,
+.admin__control-checkbox[disabled] + label:before {
+  background-color: #e9e9e9;
+  border-color: #adadad;
+}
+.admin__control-radio + label:before {
+  border-radius: 8px;
+}
+.admin__control-radio:checked + label:before {
+  background-position: -26px -1px;
+}
+.admin__control-checkbox:checked + label:before {
+  background-position: -1px -1px;
+}
+.admin__control-addon {
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  display: inline-flex;
+  flex-flow: row nowrap;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+.admin__control-addon > * {
+  -webkit-flex-basis: auto;
+  flex-basis: auto;
+  -webkit-flex-grow: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+}
+.admin__control-addon > * {
+  position: relative;
+  z-index: 1;
+}
+.admin__control-addon [class*="admin__control-"] {
+  background-color: transparent;
+  border-color: transparent;
+  order: 1;
+  vertical-align: top;
+  width: auto;
+  appearence: none;
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+}
+.admin__control-addon [class*="admin__control-"] :focus {
+  box-shadow: 0;
+}
+.admin__control-addon [class*="admin__control-"] + [class*="admin__addon-"] {
+  padding-left: 10px;
+  position: static !important;
+  z-index: 0;
+}
+.admin__control-addon [class*="admin__control-"] + [class*="admin__addon-"] > * {
+  position: relative;
+  vertical-align: top;
+  z-index: 2;
+}
+.admin__control-addon [class*="admin__control-"] + [class*="admin__addon-"]:before {
+  bottom: 0;
+  box-sizing: border-box;
+  content: '';
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.admin__addon-suffix,
+.admin__addon-prefix {
+  border: 0;
+  box-sizing: border-box;
+  color: #858585;
+  display: inline-block;
+  font-size: 15px;
+  font-weight: 300;
+  height: 33px;
+  line-height: 33px;
+  padding: 0 3px;
+}
+.admin__addon-suffix {
+  order: 3;
+}
+.admin__addon-suffix:last-child {
+  padding-right: 10px;
+}
+.admin__addon-prefix {
+  order: 0;
+}
+.admin__control-value {
+  display: inline-block;
+  padding: 6px 10px;
+}
+/*! END ._form*/
+.admin__control-text + .ui-datepicker-trigger {
+  background-image: none;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  -moz-box-sizing: content-box;
+  box-shadow: none;
+  text-shadow: none;
+  line-height: inherit;
+  font-weight: 400;
+  text-decoration: none;
+  margin-left: -40px;
+  display: inline-block;
+}
+.admin__control-text + .ui-datepicker-trigger img {
+  display: none;
+}
+.admin__control-text + .ui-datepicker-trigger:focus,
+.admin__control-text + .ui-datepicker-trigger:active {
+  background: none;
+  border: none;
+}
+.admin__control-text + .ui-datepicker-trigger:hover {
+  background: none;
+  border: none;
+}
+.admin__control-text + .ui-datepicker-trigger.disabled,
+.admin__control-text + .ui-datepicker-trigger[disabled],
+fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.5;
+}
+.admin__control-text + .ui-datepicker-trigger > span {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+.admin__control-text + .ui-datepicker-trigger:after {
+  font-family: 'icons-blank-theme';
+  content: '\e612';
+  font-size: 38px;
+  line-height: 33px;
+  color: #514943;
+  overflow: hidden;
+  speak: none;
+  font-weight: normal;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+}
 .action,
 button {
   background: #e3e3e3;
@@ -795,403 +1070,281 @@ button.tertiary:active {
 .actions-split button:hover {
   box-shadow: none;
 }
-.fieldset {
-  padding: 0;
-  margin: 0 0 2rem;
-  border: 0;
-  letter-spacing: -0.31em;
-}
-.fieldset > * {
-  letter-spacing: normal;
+table {
+  color: #303030;
 }
-.fieldset > .legend {
-  margin: 0 0 1.25rem;
-  padding: 0;
-  font-size: 2rem;
-  line-height: 1.2;
-  box-sizing: border-box;
-  float: left;
+table > caption {
+  margin-bottom: .5rem;
 }
-.fieldset > .legend + br {
-  display: block;
-  visibility: hidden;
-  height: 0;
-  overflow: hidden;
-  clear: both;
+table tfoot {
+  background: #f8f8f8;
 }
-fieldset.field [class^='fields-group-'] .field .control {
-  margin: 0 0 0 20px;
-  width: auto;
+table tfoot th,
+table tfoot td {
+  text-align: left;
 }
-.fieldset-wrapper > .fieldset-wrapper-title,
-.fieldset > .legend {
-  border-bottom: 1px solid #cac3b4;
-  box-sizing: border-box;
-  float: left;
-  margin: 0 0 18px;
-  padding: 0;
-  position: static;
-  width: 100%;
+table th {
+  background: transparent;
+  border-bottom: 0.1rem solid #e3e3e3;
+  border-top: 0.1rem solid #e3e3e3;
+  font-weight: 700;
+  padding: 1rem 1.5rem;
+  text-align: left;
 }
-.fieldset-wrapper > .fieldset-wrapper-title {
-  float: none;
+table td {
+  border-bottom: 0.1rem solid #e3e3e3;
+  padding: 1rem 1.5rem;
+  vertical-align: top;
 }
-.form-inline .label,
-.form-inline .control {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  float: left;
+table tbody td:first-child input[type='checkbox'] {
   margin: 0;
-  width: 55%;
-}
-.form-inline .label {
-  padding: 5px 15px 0 0;
-  text-align: right;
-  width: 45%;
-}
-.form-inline .no-label .control {
-  margin-left: 20%;
-  width: 60%;
 }
-.form-inline .field-service {
-  box-sizing: border-box;
-  color: #999;
-  float: left;
-  font-size: 12px;
-  letter-spacing: .05em;
-  padding: 7px 0 0 15px;
-  width: 20%;
+table tbody tr:last-child td {
+  border-bottom-color: transparent;
 }
-.form-inline .field-service .checkbox {
-  margin: 0;
-  vertical-align: middle;
+.messages {
+  margin: 20px 0;
 }
-.form-inline .field-service[value-scope]:before {
-  content: attr(value-scope) !important;
-  display: block;
-  margin-bottom: 5px;
-  white-space: nowrap;
+.messages > .message:last-child {
+  margin-bottom: 0;
 }
-.form-inline .choice {
+.message {
+  background: #fff1ad;
+  color: #333333;
+  margin-bottom: 3.5rem;
+  padding: 1.8rem 4rem 1.8rem 1.9rem;
   position: relative;
-  z-index: 1;
+  text-shadow: none;
 }
-.form-inline .choice .control {
-  left: 45%;
-  margin-top: 4px;
+.message:before {
+  background: none;
+  border: 0;
+  font-family: 'Icons';
+  font-size: 1.9rem;
+  font-style: normal;
+  font-weight: 400;
+  height: auto;
+  left: 1.9rem;
+  line-height: inherit;
+  margin-top: -1.3rem;
   position: absolute;
+  speak: none;
+  text-shadow: none;
+  top: 50%;
   width: auto;
 }
-.form-inline .choice .tooltip {
-  margin-left: 20px;
-  margin-top: 7px;
-  position: relative;
-  z-index: 1;
-}
-.form-inline .with-tooltip:not(.choice) {
-  padding-top: 20px;
-}
-.control *:first-child {
-  margin-bottom: 0;
-}
-.control > input {
-  width: 100%;
-}
-.control > input[type='button'],
-.control > input[type='radio'],
-.control > input[type='checkbox'],
-.control > input[type='file'] {
-  width: auto;
-}
-.control > input.hasDatepicker {
-  width: 160px;
+.message-info,
+.message.info {
+  padding-left: 5rem;
 }
-.control > table {
-  width: 100%;
+.message-info:before,
+.message.info:before {
+  color: #007bdb;
 }
-.control .input-file {
-  margin-top: 4px;
+.message-error,
+.message.error {
+  padding-left: 5rem;
 }
-.control .hasDatepicker + img {
-  margin: -3px 0 0 5px;
-  vertical-align: middle;
+.message-error:before,
+.message.error:before {
+  color: #eb5202;
 }
-.control .control-value {
-  display: inline-block;
-  padding: 6px 0 0;
-  vertical-align: top;
+.message.success {
+  padding-left: 5rem;
 }
-.control .control-value.special {
-  font-weight: bold;
+.message.success:before {
+  color: #79a22e;
 }
-.control .nested {
-  padding: 0;
+.row {
+  margin-left: 0;
+  margin-right: 0;
 }
-.field-tooltip {
-  display: inline-block;
-  margin-top: 5px;
-  overflow: visible;
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.col-xs-1, .col-m-1, .col-l-1, .col-xl-1, .col-xs-2, .col-m-2, .col-l-2, .col-xl-2, .col-xs-3, .col-m-3, .col-l-3, .col-xl-3, .col-xs-4, .col-m-4, .col-l-4, .col-xl-4, .col-xs-5, .col-m-5, .col-l-5, .col-xl-5, .col-xs-6, .col-m-6, .col-l-6, .col-xl-6, .col-xs-7, .col-m-7, .col-l-7, .col-xl-7, .col-xs-8, .col-m-8, .col-l-8, .col-xl-8, .col-xs-9, .col-m-9, .col-l-9, .col-xl-9, .col-xs-10, .col-m-10, .col-l-10, .col-xl-10, .col-xs-11, .col-m-11, .col-l-11, .col-xl-11, .col-xs-12, .col-m-12, .col-l-12, .col-xl-12 {
   position: relative;
-  vertical-align: top;
-  width: 0;
-  z-index: 1;
+  min-height: 1px;
+  padding-left: 0;
+  padding-right: 0;
 }
-.field-choice .field-tooltip {
-  margin-top: 10px;
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
+  float: left;
 }
-.field-tooltip:hover {
-  z-index: 99;
+.col-xs-12 {
+  width: 100%;
 }
-.field-tooltip-action {
-  color: #514943;
-  cursor: pointer;
-  display: inline-block;
-  font-family: 'Icons';
-  margin-left: 18px;
-  margin-top: -6px;
-  position: relative;
-  z-index: 2;
+.col-xs-11 {
+  width: 91.66666667%;
 }
-.field-tooltip-action:hover {
-  color: #514943;
-  text-decoration: none;
+.col-xs-10 {
+  width: 83.33333333%;
 }
-.field-tooltip-action:before {
-  content: '\e633';
-  font-size: 22px;
+.col-xs-9 {
+  width: 75%;
 }
-.field-tooltip-action span {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+.col-xs-8 {
+  width: 66.66666667%;
 }
-.control-text:focus + .field-tooltip-content,
-.field-tooltip:hover .field-tooltip-content {
-  display: block;
+.col-xs-7 {
+  width: 58.33333333%;
 }
-.field-tooltip-content {
-  background: #fff8d6;
-  border: 1px solid #adadad;
-  border-radius: 1px;
-  bottom: 42px;
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
-  display: none;
-  padding: 15px 25px;
-  position: absolute;
-  right: -66px;
-  width: 320px;
-  z-index: 1;
+.col-xs-6 {
+  width: 50%;
 }
-.field-tooltip-content:after,
-.field-tooltip-content:before {
-  border: 16px solid transparent;
-  height: 0;
-  width: 0;
-  border-top-color: #adadad;
-  content: '';
-  display: block;
-  position: absolute;
-  right: 20px;
-  top: 100%;
-  z-index: 3;
+.col-xs-5 {
+  width: 41.66666667%;
 }
-.field-tooltip-content:after {
-  border-top-color: #fff8d6;
-  margin-top: -1px;
-  z-index: 4;
+.col-xs-4 {
+  width: 33.33333333%;
 }
-.form__field {
-  position: relative;
-  z-index: 1;
+.col-xs-3 {
+  width: 25%;
 }
-.form__field:before,
-.form__field:after {
-  content: "";
-  display: table;
+.col-xs-2 {
+  width: 16.66666667%;
 }
-.form__field:after {
-  clear: both;
+.col-xs-1 {
+  width: 8.33333333%;
 }
-.form__field:hover {
-  z-index: 2;
+.col-xs-pull-12 {
+  right: 100%;
 }
-.control .form__field {
-  position: static;
+.col-xs-pull-11 {
+  right: 91.66666667%;
 }
-.form__field.field-error .control [class*='control-'] {
-  border-color: #e22626;
+.col-xs-pull-10 {
+  right: 83.33333333%;
 }
-.form__field.field-error .control [class*='control-']:before {
-  border-color: #e22626;
+.col-xs-pull-9 {
+  right: 75%;
 }
-.form__field .mage-error {
-  background: #fff8d6;
-  border: 1px solid #e22626;
-  box-sizing: border-box;
-  color: #555555;
-  display: block;
-  font-size: 12px;
-  font-weight: 500;
-  margin: 2px 0 0;
-  max-width: 380px;
-  padding: 6px 10px 10px;
+.col-xs-pull-8 {
+  right: 66.66666667%;
 }
-.no-flexbox.no-flexboxlegacy .form__field .control-addon + .mage-error {
-  display: inline-block;
-  width: 100%;
+.col-xs-pull-7 {
+  right: 58.33333333%;
 }
-.form__field[data-config-scope]:before {
-  color: #808080;
-  content: attr(data-config-scope);
-  display: inline-block;
-  position: absolute;
-  right: 0;
-  top: 6px;
+.col-xs-pull-6 {
+  right: 50%;
 }
-.control .form__field[data-config-scope]:nth-child(n+2):before {
-  content: '';
+.col-xs-pull-5 {
+  right: 41.66666667%;
 }
-.form__field.field-disabled > .label {
-  color: #999999;
+.col-xs-pull-4 {
+  right: 33.33333333%;
 }
-.form__field.field-disabled.field .control [class*='control-'][disabled] {
-  background-color: #e9e9e9;
-  border-color: #adadad;
-  color: #303030;
-  opacity: .5;
+.col-xs-pull-3 {
+  right: 25%;
 }
-.control-fields .label ~ .control {
-  width: 100%;
+.col-xs-pull-2 {
+  right: 16.66666667%;
 }
-.form__field {
-  border: 0;
-  padding: 0;
+.col-xs-pull-1 {
+  right: 8.33333333%;
 }
-.form__field .note {
-  color: #303030;
-  margin: 10px 0 0;
-  max-width: 380px;
-  padding: 0;
+.col-xs-pull-0 {
+  right: auto;
 }
-.form__field .note:before {
-  display: none;
+.col-xs-push-12 {
+  left: 100%;
 }
-.form__field.form__field {
-  margin-bottom: 0;
+.col-xs-push-11 {
+  left: 91.66666667%;
 }
-.form__field.form__field + .form__field.form__field {
-  margin-top: 15px;
+.col-xs-push-10 {
+  left: 83.33333333%;
 }
-.form__field.form__field:not(.choice) ~ .choice {
-  margin-left: 20px;
-  margin-top: 5px;
+.col-xs-push-9 {
+  left: 75%;
 }
-.form__field.form__field.choice ~ .choice {
-  margin-top: 9px;
+.col-xs-push-8 {
+  left: 66.66666667%;
 }
-.form__field.form__field ~ .choice:last-child {
-  margin-bottom: 8px;
+.col-xs-push-7 {
+  left: 58.33333333%;
 }
-.fieldset > .form__field {
-  margin-bottom: 30px;
+.col-xs-push-6 {
+  left: 50%;
 }
-.form__field .label {
-  color: #303030;
+.col-xs-push-5 {
+  left: 41.66666667%;
 }
-.form__field:not(.choice) > .label {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 33px;
-  padding-right: 30px;
-  padding-top: 0;
-  white-space: nowrap;
-  width: 30%;
+.col-xs-push-4 {
+  left: 33.33333333%;
 }
-.form__field:not(.choice) > .label:before {
-  content: '.';
-  margin-left: -7px;
-  overflow: hidden;
-  visibility: hidden;
-  width: 0;
+.col-xs-push-3 {
+  left: 25%;
 }
-.form__field:not(.choice) > .label span {
-  display: inline-block;
-  line-height: 1.2;
-  vertical-align: middle;
-  white-space: normal;
+.col-xs-push-2 {
+  left: 16.66666667%;
 }
-.form__field.required > .label span:after {
-  color: #eb5202;
-  content: '*';
-  display: inline;
-  font-size: 16px;
-  font-weight: 500;
-  margin-left: 10px;
-  margin-top: 2px;
-  position: absolute;
-  z-index: 1;
+.col-xs-push-1 {
+  left: 8.33333333%;
 }
-.form__field.required > .label:after {
-  content: '';
-  margin-left: 0;
+.col-xs-push-0 {
+  left: auto;
 }
-.form__field .control-file {
-  margin-top: 6px;
+.col-xs-offset-12 {
+  margin-left: 100%;
 }
-.form__field .control-select {
-  line-height: 33px;
+.col-xs-offset-11 {
+  margin-left: 91.66666667%;
 }
-.form__field .control-select:not([multiple]),
-.form__field .control-text {
-  height: 33px;
-  max-width: 380px;
+.col-xs-offset-10 {
+  margin-left: 83.33333333%;
 }
-.form__field .control-addon {
-  max-width: 380px;
+.col-xs-offset-9 {
+  margin-left: 75%;
 }
-.form__field .control-textarea,
-.form__field .control-select,
-.form__field .control-text {
-  background-color: #ffffff;
-  border: 1px solid #adadad;
-  border-radius: 1px;
-  color: #303030;
-  font-size: 15px;
-  font-weight: 500;
-  min-width: 11em;
-  padding: 0 10px;
+.col-xs-offset-8 {
+  margin-left: 66.66666667%;
 }
-.form__field .control-textarea:focus,
-.form__field .control-select:focus,
-.form__field .control-text:focus {
-  border-color: #007bdb;
-  box-shadow: none;
-  outline: 0;
+.col-xs-offset-7 {
+  margin-left: 58.33333333%;
 }
-.form__field .control-text {
-  line-height: auto;
+.col-xs-offset-6 {
+  margin-left: 50%;
 }
-.form__field .control-textarea {
-  line-height: 1.18em;
-  padding-bottom: 6px;
-  padding-top: 6px;
+.col-xs-offset-5 {
+  margin-left: 41.66666667%;
 }
-.form__field .control-select[multiple],
-.form__field .control-textarea {
-  height: ~" calc(6 * 1.2em + 14px)";
-  width: 100%;
+.col-xs-offset-4 {
+  margin-left: 33.33333333%;
 }
-.form__field .control-value {
-  display: inline-block;
-  padding: 6px 10px;
+.col-xs-offset-3 {
+  margin-left: 25%;
+}
+.col-xs-offset-2 {
+  margin-left: 16.66666667%;
+}
+.col-xs-offset-1 {
+  margin-left: 8.33333333%;
 }
-.form__field .control-fields .form__field:nth-child(n+2):not(.choice) > .label {
+.col-xs-offset-0 {
+  margin-left: 0%;
+}
+.abs-icon,
+[class^='icon-']:before,
+[class*=' icon-']:before,
+.admin__menu .level-0 > a:before {
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  speak: none;
+}
+.validation-symbol:after,
+table th.required:after {
+  content: '*';
+  color: #e22626;
+  font-weight: 400;
+  margin-left: 3px;
+}
+.abs-visually-hidden,
+.dashboard-diagram-switcher .label {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -1201,837 +1354,170 @@ fieldset.field [class^='fields-group-'] .field .control {
   position: absolute;
   width: 1px;
 }
-.form__field .control-select {
-  padding: 0;
+.abs-clearfix:before,
+.abs-clearfix:after,
+.tabs-horiz:before,
+.tabs-horiz:after,
+.dashboard-totals-list:before,
+.dashboard-totals-list:after,
+.dashboard-store-stats .ui-tabs:before,
+.dashboard-store-stats .ui-tabs:after {
+  content: "";
+  display: table;
 }
-.form__field .control-select option {
-  box-sizing: border-box;
-  display: block;
-  padding: 4px 10px;
+.abs-clearfix:after,
+.tabs-horiz:after,
+.dashboard-totals-list:after,
+.dashboard-store-stats .ui-tabs:after {
+  clear: both;
 }
-.form__field .control-select optgroup {
-  display: block;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 33px;
-  list-style: inside;
-  padding: 4px 10px;
+.abs-list-reset-styles,
+.dashboard-totals-list {
+  margin: 0;
+  padding: 0;
+  list-style: none none;
 }
-.form__field .control-range > .form__field:nth-child(2):before {
-  content: '\2014';
-  display: inline-block;
-  float: left;
-  line-height: 33px;
-  margin-left: -25px;
-  text-align: center;
-  width: 20px;
+.tabs-horiz {
+  margin: 0;
+  padding: 0;
 }
-.form__field.choice {
-  padding-left: 26px;
-  padding-right: 0;
-  padding-top: 8px;
-  position: relative;
-  z-index: 1;
+.tabs-horiz .ui-state-default {
+  background: #e3e3e3;
+  border: 0.1rem solid #adadad;
+  float: left;
+  letter-spacing: .0183em;
+  list-style: none;
+  margin-right: .4rem;
 }
-.form__field.choice .label {
-  display: inline;
-  float: none;
-  font-weight: 500;
-  line-height: 18px;
-  padding: 0;
+.tabs-horiz .ui-state-hover {
+  background: #d6d6d6;
 }
-.form__field.choice input {
-  margin-top: 3px !important;
-  position: absolute;
-  top: 8px;
+.tabs-horiz .ui-state-active {
+  background: #ffffff;
+  border-bottom: 0;
+  font-weight: 600;
+  letter-spacing: normal;
+  margin-bottom: -0.1rem;
 }
-.form__field.choice input[disabled] + .label {
-  cursor: not-allowed;
-  opacity: .5;
+.tabs-horiz .ui-state-active .ui-tabs-anchor {
+  border-bottom: 0.1rem solid #ffffff;
+  border-top: 0.4rem solid #eb5202;
+  padding-top: 1.1rem;
 }
-.control > .form__field.choice {
-  max-width: 380px;
+.tabs-horiz .ui-tabs-anchor {
+  color: #41362f;
+  display: block;
+  padding: 1.5rem 1.8rem 1.3rem;
+  text-decoration: none;
 }
-.control > .form__field.choice:nth-child(1):nth-last-child(2),
-.control > .form__field.choice:nth-child(2):nth-last-child(1) {
-  display: inline-block;
+.ui-tabs-panel {
+  border-top: 0.1rem solid #adadad;
+  margin-top: -0.1rem;
+  padding: 2rem;
 }
-.control > .form__field.choice:nth-child(1):nth-last-child(2) + .choice,
-.control > .form__field.choice:nth-child(2):nth-last-child(1) + .choice {
-  margin-left: 41px;
-  margin-top: 0;
+.page-wrapper {
+  padding-left: 8.8rem;
 }
-.control > .form__field.choice:nth-child(1):nth-last-child(2) + .choice:before,
-.control > .form__field.choice:nth-child(2):nth-last-child(1) + .choice:before {
-  background: #cccccc;
-  content: '';
+/**
+ * @category    design
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+.spinner {
   display: inline-block;
-  height: 20px;
-  left: -20px;
-  position: absolute;
-  top: 8px;
-  width: 1px;
+  font-size: 4rem;
+  height: 1em;
+  margin-right: 1.5rem;
+  position: relative;
+  width: 1em;
 }
-.form__field.choice .label {
-  cursor: pointer;
+.spinner > span:nth-child( 1) {
+  -webkit-animation-delay: 0.27s;
+  -moz-animation-delay: 0.27s;
+  -ms-animation-delay: 0.27s;
+  animation-delay: 0.27s;
+  -webkit-transform: rotate(-315deg);
+  -moz-transform: rotate(-315deg);
+  -ms-transform: rotate(-315deg);
+  transform: rotate(-315deg);
 }
-.form__field.choice .label:before {
-  background: url('../Magento_Ui/images/choice_bkg.png') no-repeat -100% -100%;
-  border: 1px solid #adadad;
-  border-radius: 2px;
-  content: '';
-  height: 14px;
-  left: 0;
-  position: absolute;
-  top: 10px;
-  width: 14px;
-  z-index: 1;
+.spinner > span:nth-child( 2) {
+  -webkit-animation-delay: 0.36s;
+  -moz-animation-delay: 0.36s;
+  -ms-animation-delay: 0.36s;
+  animation-delay: 0.36s;
+  -webkit-transform: rotate(-270deg);
+  -moz-transform: rotate(-270deg);
+  -ms-transform: rotate(-270deg);
+  transform: rotate(-270deg);
 }
-.form__field.choice input:focus + .label:before {
-  border-color: #007bdb;
-  outline: 0;
+.spinner > span:nth-child( 3) {
+  -webkit-animation-delay: 0.45s;
+  -moz-animation-delay: 0.45s;
+  -ms-animation-delay: 0.45s;
+  animation-delay: 0.45s;
+  -webkit-transform: rotate(-225deg);
+  -moz-transform: rotate(-225deg);
+  -ms-transform: rotate(-225deg);
+  transform: rotate(-225deg);
 }
-.form__field.choice .control-radio + .label:before {
-  border-radius: 8px;
+.spinner > span:nth-child( 4) {
+  -webkit-animation-delay: 0.54s;
+  -moz-animation-delay: 0.54s;
+  -ms-animation-delay: 0.54s;
+  animation-delay: 0.54s;
+  -webkit-transform: rotate(-180deg);
+  -moz-transform: rotate(-180deg);
+  -ms-transform: rotate(-180deg);
+  transform: rotate(-180deg);
 }
-.form__field.choice .control-radio:checked + .label:before {
-  background-position: -26px -1px;
+.spinner > span:nth-child( 5) {
+  -webkit-animation-delay: 0.63s;
+  -moz-animation-delay: 0.63s;
+  -ms-animation-delay: 0.63s;
+  animation-delay: 0.63s;
+  -webkit-transform: rotate(-135deg);
+  -moz-transform: rotate(-135deg);
+  -ms-transform: rotate(-135deg);
+  transform: rotate(-135deg);
 }
-.form__field.choice .control-checkbox:checked + .label:before {
-  background-position: -1px -1px;
+.spinner > span:nth-child( 6) {
+  -webkit-animation-delay: 0.72s;
+  -moz-animation-delay: 0.72s;
+  -ms-animation-delay: 0.72s;
+  animation-delay: 0.72s;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
 }
-.form__field.choice input {
-  opacity: 0;
+.spinner > span:nth-child( 7) {
+  -webkit-animation-delay: 0.81s;
+  -moz-animation-delay: 0.81s;
+  -ms-animation-delay: 0.81s;
+  animation-delay: 0.81s;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }
-.fieldset > .form__field.choice {
-  margin-left: 30%;
+.spinner > span:nth-child( 8) {
+  -webkit-animation-delay: 0.9;
+  -moz-animation-delay: 0.9;
+  -ms-animation-delay: 0.9;
+  animation-delay: 0.9;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
 }
-.form__field .control-after,
-.form__field .control-before {
-  border: 0;
-  box-sizing: border-box;
-  color: #858585;
-  display: inline-block;
-  font-size: 15px;
-  font-weight: 300;
-  height: 33px;
-  line-height: 33px;
-  padding: 0 3px;
-}
-.no-flexbox.no-flexboxlegacy .form__field .control-before,
-.no-flexbox.no-flexboxlegacy .form__field .control-addon {
-  float: left;
-  white-space: nowrap;
-}
-.form__field .control-addon {
-  display: inline-flex;
-  flex-flow: row nowrap;
-  max-width: 380px;
-  position: relative;
-  width: 100%;
-  z-index: 1;
-}
-.form__field .control-addon > * {
-  position: relative;
-  z-index: 1;
-}
-.form__field .control-addon .control-text[disabled][type],
-.form__field .control-addon .control-select[disabled][type],
-.form__field .control-addon .control-select,
-.form__field .control-addon .control-text {
-  background: transparent!important;
-  border: 0;
-  flex: 1;
-  order: 1;
-  vertical-align: top;
-  width: auto;
-}
-.form__field .control-addon .control-text[disabled][type]:focus,
-.form__field .control-addon .control-select[disabled][type]:focus,
-.form__field .control-addon .control-select:focus,
-.form__field .control-addon .control-text:focus {
-  box-shadow: none;
-}
-.form__field .control-addon .control-text[disabled][type]:focus + label:before,
-.form__field .control-addon .control-select[disabled][type]:focus + label:before,
-.form__field .control-addon .control-select:focus + label:before,
-.form__field .control-addon .control-text:focus + label:before {
-  border-color: #007bdb;
-  outline: 0;
-}
-.form__field .control-addon .control-text[disabled][type] + label,
-.form__field .control-addon .control-select[disabled][type] + label,
-.form__field .control-addon .control-select + label,
-.form__field .control-addon .control-text + label {
-  padding-left: 10px;
-  position: static!important;
-  z-index: 0;
-}
-.form__field .control-addon .control-text[disabled][type] + label > *,
-.form__field .control-addon .control-select[disabled][type] + label > *,
-.form__field .control-addon .control-select + label > *,
-.form__field .control-addon .control-text + label > * {
-  position: relative;
-  vertical-align: top;
-  z-index: 2;
-}
-.form__field .control-addon .control-text[disabled][type] + label:before,
-.form__field .control-addon .control-select[disabled][type] + label:before,
-.form__field .control-addon .control-select + label:before,
-.form__field .control-addon .control-text + label:before {
-  background: #ffffff;
-  border: 1px solid #adadad;
-  border-radius: 1px;
-  box-sizing: border-box;
-  content: '';
-  display: block;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 0;
-}
-.form__field .control-addon .control-text[disabled][type][disabled] + label:before,
-.form__field .control-addon .control-select[disabled][type][disabled] + label:before,
-.form__field .control-addon .control-select[disabled] + label:before,
-.form__field .control-addon .control-text[disabled] + label:before {
-  background: #e9e9e9;
-  opacity: .5;
-}
-.form__field .control-after {
-  order: 3;
-}
-.form__field .control-after:last-child {
-  padding-right: 10px;
-}
-.form__field .control-before {
-  order: 0;
-}
-.form__field .control-some {
-  display: flex;
-}
-.form__field [class*='control-grouped'] {
-  box-sizing: border-box;
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-}
-.form__field [class*='control-grouped'] > .form__field {
-  display: table-cell;
-  vertical-align: top;
-  width: 50%;
-}
-.form__field [class*='control-grouped'] > .form__field > .control {
-  float: none;
-  width: 100%;
-}
-.form__field [class*='control-grouped'] > .form__field:nth-child(n+2) {
-  padding-left: 20px;
-}
-.form__field [class*='control-grouped'] > .form__field:nth-child(n+2):not(.choice) .label {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-.form__field [required] {
-  box-shadow: none;
-}
-fieldset.form__field {
-  position: relative;
-}
-fieldset.form__field [class*='control-grouped'] > .form__field:first-child > .label,
-fieldset.form__field .control-fields > .form__field:first-child > .label {
-  cursor: pointer;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  width: 30%;
-}
-.control-text + .ui-datepicker-trigger {
-  background-image: none;
-  background: none;
-  border: 0;
-  margin: 0;
-  padding: 0;
-  -moz-box-sizing: content-box;
-  box-shadow: none;
-  text-shadow: none;
-  line-height: inherit;
-  font-weight: 400;
-  display: inline-block;
-  text-decoration: none;
-  margin-left: -40px;
-}
-.control-text + .ui-datepicker-trigger:focus,
-.control-text + .ui-datepicker-trigger:active {
-  background: none;
-  border: none;
-}
-.control-text + .ui-datepicker-trigger:hover {
-  background: none;
-  border: none;
-}
-.control-text + .ui-datepicker-trigger.disabled,
-.control-text + .ui-datepicker-trigger[disabled],
-fieldset[disabled] .control-text + .ui-datepicker-trigger {
-  cursor: not-allowed;
-  pointer-events: none;
-  opacity: 0.5;
-}
-.control-text + .ui-datepicker-trigger > span {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-.control-text + .ui-datepicker-trigger:after {
-  font-family: 'icons-blank-theme';
-  content: '\e612';
-  font-size: 38px;
-  line-height: 33px;
-  color: #514943;
-  overflow: hidden;
-  speak: none;
-  font-weight: normal;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  vertical-align: middle;
-  text-align: center;
-}
-.control-text + .ui-datepicker-trigger img {
-  display: none;
-}
-.form-select-label {
-  border: 1px solid #adadad;
-  border-radius: 0;
-  color: #303030;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  position: relative;
-}
-.form-select-label:hover,
-.form-select-label:hover:after {
-  border-color: #949494;
-}
-.form-select-label:focus,
-.form-select-label:focus:after,
-.form-select-label:active,
-.form-select-label:active:after {
-  border-color: #007bdb;
-}
-.form-select-label:after {
-  background: #e3e3e3;
-  border-left: 1px solid #adadad;
-  bottom: 0;
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 2.36em;
-  z-index: -2;
-}
-.ie9 .form-select-label:after {
-  display: none;
-}
-.form-select-label:before {
-  border-color: #514943 transparent transparent transparent;
-  border-style: solid;
-  border-width: 5px 4px 0 4px;
-  content: '';
-  height: 0;
-  margin-right: -4px;
-  margin-top: -2.5px;
-  position: absolute;
-  right: 1.18em;
-  top: 50%;
-  width: 0;
-  z-index: -1;
-}
-.ie9 .form-select-label:before {
-  display: none;
-}
-.form-select-label .form-el-select {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  content: '';
-  display: block;
-  margin: 0;
-  padding: ~" 0.35em calc(2.36em + 10%) 0.35em 0.55em";
-  width: 110%;
-}
-.ie9 .form-select-label .form-el-select {
-  padding-right: 0.55em;
-  width: 100%;
-}
-.form-el-select {
-  background: #ffffff;
-  border: 1px solid #adadad;
-  border-radius: 0;
-  color: #303030;
-  display: block;
-  padding: 0.35em 0.55em;
-}
-table {
-  color: #303030;
-}
-table > caption {
-  margin-bottom: .5rem;
-}
-table tfoot {
-  background: #f8f8f8;
-}
-table tfoot th,
-table tfoot td {
-  text-align: left;
-}
-table th {
-  background: transparent;
-  border-bottom: 0.1rem solid #e3e3e3;
-  border-top: 0.1rem solid #e3e3e3;
-  font-weight: 700;
-  padding: 1rem 1.5rem;
-  text-align: left;
-}
-table td {
-  border-bottom: 0.1rem solid #e3e3e3;
-  padding: 1rem 1.5rem;
-  vertical-align: top;
-}
-table tbody td:first-child input[type='checkbox'] {
-  margin: 0;
-}
-table tbody tr:last-child td {
-  border-bottom-color: transparent;
-}
-.messages {
-  margin: 20px 0;
-}
-.messages > .message:last-child {
-  margin-bottom: 0;
-}
-.message {
-  background: #fff1ad;
-  color: #333333;
-  margin-bottom: 3.5rem;
-  padding: 1.8rem 4rem 1.8rem 1.9rem;
-  position: relative;
-  text-shadow: none;
-}
-.message:before {
-  background: none;
-  border: 0;
-  font-family: 'Icons';
-  font-size: 1.9rem;
-  font-style: normal;
-  font-weight: 400;
-  height: auto;
-  left: 1.9rem;
-  line-height: inherit;
-  margin-top: -1.3rem;
-  position: absolute;
-  speak: none;
-  text-shadow: none;
-  top: 50%;
-  width: auto;
-}
-.message-info,
-.message.info {
-  padding-left: 5rem;
-}
-.message-info:before,
-.message.info:before {
-  color: #007bdb;
-}
-.message-error,
-.message.error {
-  padding-left: 5rem;
-}
-.message-error:before,
-.message.error:before {
-  color: #eb5202;
-}
-.message.success {
-  padding-left: 5rem;
-}
-.message.success:before {
-  color: #79a22e;
-}
-.row {
-  margin-left: 0;
-  margin-right: 0;
-}
-.row:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-.col-xs-1, .col-m-1, .col-l-1, .col-xl-1, .col-xs-2, .col-m-2, .col-l-2, .col-xl-2, .col-xs-3, .col-m-3, .col-l-3, .col-xl-3, .col-xs-4, .col-m-4, .col-l-4, .col-xl-4, .col-xs-5, .col-m-5, .col-l-5, .col-xl-5, .col-xs-6, .col-m-6, .col-l-6, .col-xl-6, .col-xs-7, .col-m-7, .col-l-7, .col-xl-7, .col-xs-8, .col-m-8, .col-l-8, .col-xl-8, .col-xs-9, .col-m-9, .col-l-9, .col-xl-9, .col-xs-10, .col-m-10, .col-l-10, .col-xl-10, .col-xs-11, .col-m-11, .col-l-11, .col-xl-11, .col-xs-12, .col-m-12, .col-l-12, .col-xl-12 {
-  position: relative;
-  min-height: 1px;
-  padding-left: 0;
-  padding-right: 0;
-}
-.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
-  float: left;
-}
-.col-xs-12 {
-  width: 100%;
-}
-.col-xs-11 {
-  width: 91.66666667%;
-}
-.col-xs-10 {
-  width: 83.33333333%;
-}
-.col-xs-9 {
-  width: 75%;
-}
-.col-xs-8 {
-  width: 66.66666667%;
-}
-.col-xs-7 {
-  width: 58.33333333%;
-}
-.col-xs-6 {
-  width: 50%;
-}
-.col-xs-5 {
-  width: 41.66666667%;
-}
-.col-xs-4 {
-  width: 33.33333333%;
-}
-.col-xs-3 {
-  width: 25%;
-}
-.col-xs-2 {
-  width: 16.66666667%;
-}
-.col-xs-1 {
-  width: 8.33333333%;
-}
-.col-xs-pull-12 {
-  right: 100%;
-}
-.col-xs-pull-11 {
-  right: 91.66666667%;
-}
-.col-xs-pull-10 {
-  right: 83.33333333%;
-}
-.col-xs-pull-9 {
-  right: 75%;
-}
-.col-xs-pull-8 {
-  right: 66.66666667%;
-}
-.col-xs-pull-7 {
-  right: 58.33333333%;
-}
-.col-xs-pull-6 {
-  right: 50%;
-}
-.col-xs-pull-5 {
-  right: 41.66666667%;
-}
-.col-xs-pull-4 {
-  right: 33.33333333%;
-}
-.col-xs-pull-3 {
-  right: 25%;
-}
-.col-xs-pull-2 {
-  right: 16.66666667%;
-}
-.col-xs-pull-1 {
-  right: 8.33333333%;
-}
-.col-xs-pull-0 {
-  right: auto;
-}
-.col-xs-push-12 {
-  left: 100%;
-}
-.col-xs-push-11 {
-  left: 91.66666667%;
-}
-.col-xs-push-10 {
-  left: 83.33333333%;
-}
-.col-xs-push-9 {
-  left: 75%;
-}
-.col-xs-push-8 {
-  left: 66.66666667%;
-}
-.col-xs-push-7 {
-  left: 58.33333333%;
-}
-.col-xs-push-6 {
-  left: 50%;
-}
-.col-xs-push-5 {
-  left: 41.66666667%;
-}
-.col-xs-push-4 {
-  left: 33.33333333%;
-}
-.col-xs-push-3 {
-  left: 25%;
-}
-.col-xs-push-2 {
-  left: 16.66666667%;
-}
-.col-xs-push-1 {
-  left: 8.33333333%;
-}
-.col-xs-push-0 {
-  left: auto;
-}
-.col-xs-offset-12 {
-  margin-left: 100%;
-}
-.col-xs-offset-11 {
-  margin-left: 91.66666667%;
-}
-.col-xs-offset-10 {
-  margin-left: 83.33333333%;
-}
-.col-xs-offset-9 {
-  margin-left: 75%;
-}
-.col-xs-offset-8 {
-  margin-left: 66.66666667%;
-}
-.col-xs-offset-7 {
-  margin-left: 58.33333333%;
-}
-.col-xs-offset-6 {
-  margin-left: 50%;
-}
-.col-xs-offset-5 {
-  margin-left: 41.66666667%;
-}
-.col-xs-offset-4 {
-  margin-left: 33.33333333%;
-}
-.col-xs-offset-3 {
-  margin-left: 25%;
-}
-.col-xs-offset-2 {
-  margin-left: 16.66666667%;
-}
-.col-xs-offset-1 {
-  margin-left: 8.33333333%;
-}
-.col-xs-offset-0 {
-  margin-left: 0%;
-}
-.abs-icon,
-[class^='icon-']:before,
-[class*=' icon-']:before,
-.admin__menu .level-0 > a:before {
-  -webkit-font-smoothing: antialiased;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  speak: none;
-}
-.validation-symbol:after,
-table th.required:after {
-  content: '*';
-  color: #e22626;
-  font-weight: 400;
-  margin-left: 3px;
-}
-.abs-visually-hidden,
-.dashboard-diagram-switcher .label {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-.abs-clearfix:before,
-.abs-clearfix:after,
-.tabs-horiz:before,
-.tabs-horiz:after,
-.dashboard-totals-list:before,
-.dashboard-totals-list:after,
-.dashboard-store-stats .ui-tabs:before,
-.dashboard-store-stats .ui-tabs:after {
-  content: "";
-  display: table;
-}
-.abs-clearfix:after,
-.tabs-horiz:after,
-.dashboard-totals-list:after,
-.dashboard-store-stats .ui-tabs:after {
-  clear: both;
-}
-.abs-list-reset-styles,
-.dashboard-totals-list {
-  margin: 0;
-  padding: 0;
-  list-style: none none;
-}
-.tabs-horiz {
-  margin: 0;
-  padding: 0;
-}
-.tabs-horiz .ui-state-default {
-  background: #e3e3e3;
-  border: 0.1rem solid #adadad;
-  float: left;
-  letter-spacing: .0183em;
-  list-style: none;
-  margin-right: .4rem;
-}
-.tabs-horiz .ui-state-hover {
-  background: #d6d6d6;
-}
-.tabs-horiz .ui-state-active {
-  background: #ffffff;
-  border-bottom: 0;
-  font-weight: 600;
-  letter-spacing: normal;
-  margin-bottom: -0.1rem;
-}
-.tabs-horiz .ui-state-active .ui-tabs-anchor {
-  border-bottom: 0.1rem solid #ffffff;
-  border-top: 0.4rem solid #eb5202;
-  padding-top: 1.1rem;
-}
-.tabs-horiz .ui-tabs-anchor {
-  color: #41362f;
-  display: block;
-  padding: 1.5rem 1.8rem 1.3rem;
-  text-decoration: none;
-}
-.ui-tabs-panel {
-  border-top: 0.1rem solid #adadad;
-  margin-top: -0.1rem;
-  padding: 2rem;
-}
-.page-wrapper {
-  padding-left: 8.8rem;
-}
-/**
- * @category    design
- * Copyright © 2015 Magento. All rights reserved.
- * See COPYING.txt for license details.
- */
-.spinner {
-  display: inline-block;
-  font-size: 4rem;
-  height: 1em;
-  margin-right: 1.5rem;
-  position: relative;
-  width: 1em;
-}
-.spinner > span:nth-child( 1) {
-  -webkit-animation-delay: 0.27s;
-  -moz-animation-delay: 0.27s;
-  -ms-animation-delay: 0.27s;
-  animation-delay: 0.27s;
-  -webkit-transform: rotate(-315deg);
-  -moz-transform: rotate(-315deg);
-  -ms-transform: rotate(-315deg);
-  transform: rotate(-315deg);
-}
-.spinner > span:nth-child( 2) {
-  -webkit-animation-delay: 0.36s;
-  -moz-animation-delay: 0.36s;
-  -ms-animation-delay: 0.36s;
-  animation-delay: 0.36s;
-  -webkit-transform: rotate(-270deg);
-  -moz-transform: rotate(-270deg);
-  -ms-transform: rotate(-270deg);
-  transform: rotate(-270deg);
-}
-.spinner > span:nth-child( 3) {
-  -webkit-animation-delay: 0.45s;
-  -moz-animation-delay: 0.45s;
-  -ms-animation-delay: 0.45s;
-  animation-delay: 0.45s;
-  -webkit-transform: rotate(-225deg);
-  -moz-transform: rotate(-225deg);
-  -ms-transform: rotate(-225deg);
-  transform: rotate(-225deg);
-}
-.spinner > span:nth-child( 4) {
-  -webkit-animation-delay: 0.54s;
-  -moz-animation-delay: 0.54s;
-  -ms-animation-delay: 0.54s;
-  animation-delay: 0.54s;
-  -webkit-transform: rotate(-180deg);
-  -moz-transform: rotate(-180deg);
-  -ms-transform: rotate(-180deg);
-  transform: rotate(-180deg);
-}
-.spinner > span:nth-child( 5) {
-  -webkit-animation-delay: 0.63s;
-  -moz-animation-delay: 0.63s;
-  -ms-animation-delay: 0.63s;
-  animation-delay: 0.63s;
-  -webkit-transform: rotate(-135deg);
-  -moz-transform: rotate(-135deg);
-  -ms-transform: rotate(-135deg);
-  transform: rotate(-135deg);
-}
-.spinner > span:nth-child( 6) {
-  -webkit-animation-delay: 0.72s;
-  -moz-animation-delay: 0.72s;
-  -ms-animation-delay: 0.72s;
-  animation-delay: 0.72s;
-  -webkit-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
-  transform: rotate(-90deg);
-}
-.spinner > span:nth-child( 7) {
-  -webkit-animation-delay: 0.81s;
-  -moz-animation-delay: 0.81s;
-  -ms-animation-delay: 0.81s;
-  animation-delay: 0.81s;
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-.spinner > span:nth-child( 8) {
-  -webkit-animation-delay: 0.9;
-  -moz-animation-delay: 0.9;
-  -ms-animation-delay: 0.9;
-  animation-delay: 0.9;
-  -webkit-transform: rotate(0deg);
-  -moz-transform: rotate(0deg);
-  -ms-transform: rotate(0deg);
-  transform: rotate(0deg);
-}
-@-moz-keyframes fade {
-  0% {
-    background-color: #514943;
-  }
-  100% {
-    background-color: #ffffff;
-  }
+@-moz-keyframes fade {
+  0% {
+    background-color: #514943;
+  }
+  100% {
+    background-color: #ffffff;
+  }
 }
 @-webkit-keyframes fade {
   0% {
@@ -2589,242 +2075,716 @@ table th.required:after {
   width: 8.8rem;
   z-index: 700;
 }
-.menu-wrapper .logo {
-  display: block;
-  margin-bottom: 1.8rem;
-  position: relative;
-  text-align: center;
+.menu-wrapper .logo {
+  display: block;
+  margin-bottom: 1.8rem;
+  position: relative;
+  text-align: center;
+}
+.menu-wrapper .logo:hover .logo-img {
+  -webkit-filter: brightness(1.1);
+  filter: brightness(1.1);
+}
+.menu-wrapper .logo:active .logo-img {
+  transform: scale(0.95);
+}
+.menu-wrapper .logo .logo-img {
+  transition: -webkit-filter 0.2s linear, filter 0.2s linear, transform 0.1s linear;
+}
+.admin__menu {
+  position: relative;
+}
+.admin__menu ul > li {
+  display: block;
+  text-align: center;
+}
+.admin__menu .level-0:first-child > a {
+  position: relative;
+}
+.admin__menu .level-0:first-child > a:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #736963;
+  content: '';
+  display: block;
+  height: 1px;
+  width: 68%;
+  margin-left: 16%;
+}
+.admin__menu .level-0:first-child > a.active:after {
+  display: none;
+}
+.admin__menu .level-0 > a {
+  color: #aaa6a0;
+  display: block;
+  font-size: 1rem;
+  min-height: 6.2rem;
+  padding-top: 1.2rem;
+  padding-right: .5rem;
+  padding-left: .5rem;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: background-color 0.1s linear;
+}
+.admin__menu .level-0 > a.active {
+  background-color: #524d49;
+  color: #f7f3eb;
+}
+.admin__menu .level-0 > a.hover,
+.admin__menu .level-0 > a:hover {
+  color: #f7f3eb;
+  background-color: #524d49;
+}
+.admin__menu .level-0 > a:before {
+  content: '\e606';
+  display: block;
+  font-family: 'Icons';
+  font-size: 2.2rem;
+  margin-bottom: .3rem;
+  height: 2.2rem;
+}
+.admin__menu .item-dashboard > a:before {
+  padding-top: 0.4rem;
+  font-size: 1.8rem;
+  content: '\e604';
+}
+.admin__menu .item-sales > a:before {
+  content: '\e60b';
+}
+.admin__menu .item-catalog > a:before {
+  content: '\e608';
+}
+.admin__menu .item-customer > a:before {
+  position: relative;
+  top: -0.4rem;
+  font-size: 2.6rem;
+  content: '\e603';
+}
+.admin__menu .item-marketing > a:before {
+  padding-top: 0.2rem;
+  font-size: 2rem;
+  content: '\e609';
+}
+.admin__menu .item-content > a:before {
+  position: relative;
+  top: -0.2rem;
+  font-size: 2.4rem;
+  content: '\e602';
+}
+.admin__menu .item-report > a:before {
+  content: '\e60a';
+}
+.admin__menu .item-stores > a:before {
+  padding-top: 0.3rem;
+  font-size: 1.9rem;
+  content: '\e60d';
+}
+.admin__menu .item-system > a:before {
+  content: '\e610';
+}
+.dashboard-data {
+  background: #ffffff;
+  font-size: 1.3rem;
+  width: 100%;
+}
+.dashboard-data th,
+.dashboard-data td {
+  padding: 1rem 0 1rem 1rem;
+}
+.dashboard-data th:first-child,
+.dashboard-data td:first-child {
+  padding-left: 0;
+}
+.dashboard-data th {
+  border-top: 0;
+}
+.dashboard-main .dashboard-data th,
+.dashboard-main .dashboard-data td {
+  text-align: right;
+  white-space: nowrap;
+  width: 15%;
+}
+.dashboard-main .dashboard-data .col-name {
+  text-align: left;
+  white-space: normal;
+  width: 55%;
+}
+.dashboard-main .dashboard-data .col-product {
+  width: 70%;
+}
+.dashboard-main .dashboard-data .col-orders_count {
+  text-align: left;
+}
+.dashboard-secondary .dashboard-data .col-popularity,
+.dashboard-secondary .dashboard-data .col-total {
+  text-align: right;
+  width: 21.27659574%;
+}
+.dashboard-secondary .dashboard-data .col-customer,
+.dashboard-secondary .dashboard-data .col-search_query {
+  width: 57.44680851%;
+}
+.dashboard-container .empty-text {
+  background: #ffffff;
+  font-size: 1.3rem;
+}
+.dashboard-diagram-disabled {
+  padding: .5rem 2rem 2rem;
+}
+.dashboard-diagram-switcher {
+  margin-bottom: 2rem;
 }
-.menu-wrapper .logo:hover .logo-img {
-  -webkit-filter: brightness(1.1);
-  filter: brightness(1.1);
+.dashboard-diagram-switcher .form-select-label {
+  display: inline-block;
 }
-.menu-wrapper .logo:active .logo-img {
-  transform: scale(0.95);
+.dashboard-diagram-image {
+  max-width: 100%;
 }
-.menu-wrapper .logo .logo-img {
-  transition: -webkit-filter 0.2s linear, filter 0.2s linear, transform 0.1s linear;
+.dashboard-totals {
+  margin: 1rem 2rem 6rem;
 }
-.admin__menu {
-  position: relative;
+.dashboard-totals-list {
+  display: table;
+  width: 100%;
 }
-.admin__menu ul > li {
+.dashboard-totals-item {
+  display: table-cell;
+  padding: 0 1rem 0 0;
+  width: 25%;
+}
+.dashboard-totals-item:first-child .price {
+  color: #eb5202;
+}
+.dashboard-totals-label {
   display: block;
-  text-align: center;
+  font-size: 1.3rem;
+  font-weight: 700;
 }
-.admin__menu .level-0:first-child > a {
+.dashboard-totals-value {
+  font-size: 2.4rem;
+  font-weight: 600;
+}
+.dashboard-store-stats .ui-tabs {
   position: relative;
 }
-.admin__menu .level-0:first-child > a:after {
+.dashboard-store-stats .ui-tabs:before {
+  background-color: rgba(255, 255, 255, 0);
+  background-repeat: repeat-x;
+  background-image: -webkit-linear-gradient(left, color-stop(rgba(255, 255, 255, 0) 0%), color-stop(#ffffff 100%));
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0)', endColorstr='#ffffff', GradientType=1);
+  content: '';
+  height: 4.8rem;
   position: absolute;
+  right: 0;
   top: 0;
-  left: 0;
-  background-color: #736963;
-  content: '';
-  display: block;
-  height: 1px;
-  width: 68%;
-  margin-left: 16%;
+  width: 2rem;
 }
-.admin__menu .level-0:first-child > a.active:after {
+.dashboard-store-stats .ui-tabs-panel {
+  background: url(../images/ajax-loader-small.gif) no-repeat 50% 50%;
+  min-height: 6rem;
+}
+.dashboard-store-stats .tabs-horiz {
+  border-right: 1px solid #ffffff;
+  float: left;
+  overflow-x: auto;
+  white-space: nowrap;
+  width: 100%;
+}
+.dashboard-store-stats .tabs-horiz .ui-state-default {
+  display: inline-block;
+  float: none;
+  margin-right: .1rem;
+}
+.dashboard-container .dashboard-secondary {
+  padding-right: 3.5rem;
+}
+.dashboard-item {
+  margin-bottom: 3rem;
+}
+.dashboard-item-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+}
+.dashboard-item-primary:first-child .dashboard-sales-value {
+  color: #eb5202;
+}
+.dashboard-sales-value {
+  font-size: 2.4rem;
+  font-weight: 600;
+}
+.col-2-left-layout {
+  margin-top: 50px;
+  margin-left: -30px;
+  width: auto;
+}
+.col-2-left-layout:before,
+.col-2-left-layout:after {
+  content: "";
+  display: table;
+}
+.col-2-left-layout:after {
+  clear: both;
+}
+.col-2-left-layout .main-col {
+  float: left;
+  width: ~" calc( (100%) * 0.75 - 30px )";
+  margin-left: 30px;
+  float: right;
+}
+.col-2-left-layout .side-col {
+  float: left;
+  width: ~" calc( (100%) * 0.25 - 30px )";
+  margin-left: 30px;
+}
+.admin__fieldset-wrapper-title {
+  padding: 14px 0 16px;
+  margin-bottom: 30px;
+}
+.admin__block {
+  width: 100%;
+  border: 1px solid black;
+}
+.admin__fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.admin__fieldset > .admin__field {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  margin-left: -30px;
+}
+.admin__fieldset > .admin__field:before,
+.admin__fieldset > .admin__field:after {
+  content: "";
+  display: table;
+}
+.admin__fieldset > .admin__field:after {
+  clear: both;
+}
+.admin__fieldset > .admin__field > .admin__field-control {
+  float: left;
+  width: ~" calc( (100%) * 0.4444444444444444 - 30px )";
+  margin-left: 30px;
+}
+.admin__fieldset > .admin__field > .admin__field-label {
+  float: left;
+  width: ~" calc( (100%) * 0.3333333333333333 - 30px )";
+  margin-left: 30px;
+}
+.admin__field-label {
+  margin: 0;
+  color: #303030;
+  text-align: right;
+}
+.admin__field-label + br {
   display: none;
 }
-.admin__menu .level-0 > a {
-  color: #aaa6a0;
+[class]:not(.admin__field-option) > .admin__field-label {
+  font-family: 'Open Sans', arial, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  padding-top: 0;
+  line-height: 33px;
+  white-space: nowrap;
+}
+[class]:not(.admin__field-option) > .admin__field-label:before {
+  content: ".";
+  visibility: hidden;
+  width: 0;
+  margin-left: -7px;
+  overflow: hidden;
+}
+[class]:not(.admin__field-option) > .admin__field-label span {
+  white-space: normal;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.2;
+}
+._required > .admin__field-label span:after {
+  content: "*";
+  color: #eb5202;
+  display: inline;
+  font-weight: 500;
+  font-size: 16px;
+  margin-top: 2px;
+  position: absolute;
+  z-index: 1;
+  margin-left: 10px;
+}
+._disabled > .admin__field-label {
+  color: #999999;
+}
+.admin__field {
+  margin-bottom: 0;
+}
+.admin__field + .admin__field {
+  margin-top: 15px;
+}
+.admin__field:not(.admin__field-option) ~ .admin__field-option {
+  margin-left: 20px;
+  margin-top: 5px;
+}
+.admin__field.admin__field-option ~ .admin__field-option {
+  margin-top: 9px;
+}
+.admin__field ~ .admin__field-option:last-child {
+  margin-bottom: 8px;
+}
+.admin__fieldset > .admin__field {
+  margin-bottom: 30px;
+  position: relative;
+  z-index: 1;
+}
+.admin__fieldset > .admin__field:hover {
+  z-index: 2;
+}
+.admin__field[data-config-scope]:before {
+  float: left;
+  width: ~" calc( (100%) * 0.16666666666666666 - 30px )";
+  margin-left: 30px;
+  position: absolute;
+  right: 0;
+  display: inline-block;
+  content: attr(data-config-scope);
+  float: right;
+  color: #808080;
+}
+.admin__field-control .admin__field[data-config-scope]:nth-child(n+2):before {
+  content: "";
+}
+.admin__field._error .admin__field-control [class*="admin__addon-"]:before,
+.admin__field._error .admin__field-control > [class*="admin__control-"] {
+  border-color: #e22626;
+}
+.admin__field-error {
+  border: 1px solid #e22626;
   display: block;
-  font-size: 1rem;
-  min-height: 6.2rem;
-  padding-top: 1.2rem;
-  padding-right: .5rem;
-  padding-left: .5rem;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: background-color 0.1s linear;
+  margin: 2px 0 0;
+  padding: 6px 10px 10px;
+  background: #fff8d6;
+  color: #555555;
+  font-size: 12px;
+  font-weight: 500;
+  box-sizing: border-box;
 }
-.admin__menu .level-0 > a.active {
-  background-color: #524d49;
-  color: #f7f3eb;
+.admin__field-note {
+  color: #303030;
+  padding: 0;
+  margin: 10px 0 0;
 }
-.admin__menu .level-0 > a.hover,
-.admin__menu .level-0 > a:hover {
-  color: #f7f3eb;
-  background-color: #524d49;
+.admin__control-fields .admin__field-label ~ .admin__field-control {
+  width: 100%;
+}
+.admin__field-option {
+  padding-top: 8px;
+}
+.admin__field-option .admin__field-label {
+  text-align: left;
+}
+.admin__field-control > .admin__field-option:nth-child(1):nth-last-child(2),
+.admin__field-control > .admin__field-option:nth-child(2):nth-last-child(1) {
+  display: inline-block;
+}
+.admin__field-control > .admin__field-option:nth-child(1):nth-last-child(2) + .admin__field-option,
+.admin__field-control > .admin__field-option:nth-child(2):nth-last-child(1) + .admin__field-option {
+  display: inline-block;
+  margin-left: 41px;
+  margin-top: 0;
+}
+.admin__field-control > .admin__field-option:nth-child(1):nth-last-child(2) + .admin__field-option:before,
+.admin__field-control > .admin__field-option:nth-child(2):nth-last-child(1) + .admin__field-option:before {
+  content: "";
+  position: absolute;
+  display: inline-block;
+  height: 20px;
+  top: 8px;
+  left: -20px;
+  width: 1px;
+  background: #cccccc;
+}
+.admin__control-fields .admin__field:nth-child(n+2):not(.admin__field-option) > .admin__field-label {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+[class*="admin__control-grouped"] {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  box-sizing: border-box;
+}
+[class*="admin__control-grouped"] > .admin__field {
+  display: table-cell;
+  width: 50%;
+  vertical-align: top;
 }
-.admin__menu .level-0 > a:before {
-  content: '\e606';
-  display: block;
-  font-family: 'Icons';
-  font-size: 2.2rem;
-  margin-bottom: .3rem;
-  height: 2.2rem;
+[class*="admin__control-grouped"] > .admin__field > .admin__field-control {
+  width: 100%;
+  float: none;
 }
-.admin__menu .item-dashboard > a:before {
-  padding-top: 0.4rem;
-  font-size: 1.8rem;
-  content: '\e604';
+[class*="admin__control-grouped"] > .admin__field:nth-child(n+2) {
+  padding-left: 20px;
 }
-.admin__menu .item-sales > a:before {
-  content: '\e60b';
+[class*="admin__control-grouped"] > .admin__field:nth-child(n+2):not(.admin__field-option) .admin__field-label {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
-.admin__menu .item-catalog > a:before {
-  content: '\e608';
+[class*="admin__control-grouped"] > .admin__field:first-child,
+.admin__control-fields > .admin__field:first-child {
+  position: static;
 }
-.admin__menu .item-customer > a:before {
-  position: relative;
-  top: -0.4rem;
-  font-size: 2.6rem;
-  content: '\e603';
+[class*="admin__control-grouped"] > .admin__field:first-child > .admin__field-label,
+.admin__control-fields > .admin__field:first-child > .admin__field-label {
+  position: absolute;
+  left: 0;
+  top: 0;
+  float: left;
+  width: ~" calc( (100%) * 0.25 - 30px )";
+  margin-left: 30px;
+  opacity: 0;
+  cursor: pointer;
 }
-.admin__menu .item-marketing > a:before {
-  padding-top: 0.2rem;
-  font-size: 2rem;
-  content: '\e609';
+.address-item-edit-content {
+  padding: 15px 30px;
 }
-.admin__menu .item-content > a:before {
-  position: relative;
-  top: -0.2rem;
-  font-size: 2.4rem;
-  content: '\e602';
+.address-item-edit-content .admin__field > .admin__field-control,
+.address-item-edit-content .admin__field > .admin__field-label {
+  text-align: left;
+  float: none;
 }
-.admin__menu .item-report > a:before {
-  content: '\e60a';
+.address-item-edit-content .admin__field > .admin__field-control {
+  width: ~" calc( 100% - 30px )";
 }
-.admin__menu .item-stores > a:before {
-  padding-top: 0.3rem;
-  font-size: 1.9rem;
-  content: '\e60d';
+.address-item-edit-content .admin__field-label {
+  margin-top: -16px;
 }
-.admin__menu .item-system > a:before {
-  content: '\e610';
+.address-item-edit-content ._required .admin__field-label span {
+  padding-left: 15px;
 }
-.dashboard-data {
-  background: #ffffff;
-  font-size: 1.3rem;
-  width: 100%;
+.address-item-edit-content ._required .admin__field-label span:after {
+  left: 0;
+  margin-left: 30px;
 }
-.dashboard-data th,
-.dashboard-data td {
-  padding: 1rem 0 1rem 1rem;
+.address-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  width: 360px;
+  float: left;
 }
-.dashboard-data th:first-child,
-.dashboard-data td:first-child {
-  padding-left: 0;
+.address-list .address-list-item {
+  margin-bottom: 30px;
 }
-.dashboard-data th {
-  border-top: 0;
+.address-list .action-delete {
+  background-color: transparent;
+  padding: 0;
 }
-.dashboard-main .dashboard-data th,
-.dashboard-main .dashboard-data td {
-  text-align: right;
-  white-space: nowrap;
-  width: 15%;
+.address-list .action-delete:hover {
+  box-shadow: 0;
+  border: 0;
 }
-.dashboard-main .dashboard-data .col-name {
-  text-align: left;
-  white-space: normal;
-  width: 55%;
+.address-item-edit {
+  margin-left: 359px;
 }
-.dashboard-main .dashboard-data .col-product {
-  width: 70%;
+.address-item-edit .admin__legend {
+  display: none;
 }
-.dashboard-main .dashboard-data .col-orders_count {
-  text-align: left;
+.admin__section-nav {
+  padding-bottom: 51px;
 }
-.dashboard-secondary .dashboard-data .col-popularity,
-.dashboard-secondary .dashboard-data .col-total {
-  text-align: right;
-  width: 21.27659574%;
+.admin__section-nav-title {
+  padding: 0;
+  margin: 0 0 -1px;
+  color: #333333;
+  display: block;
+  padding: 20px 13px;
+  background: #f1f1f1;
+  text-transform: uppercase;
+  border: 1px solid #e3e3e3;
+  line-height: 1.2;
 }
-.dashboard-secondary .dashboard-data .col-customer,
-.dashboard-secondary .dashboard-data .col-search_query {
-  width: 57.44680851%;
+.admin__section-nav-title._collapsible {
+  padding-right: 35px;
 }
-.dashboard-container .empty-text {
-  background: #ffffff;
-  font-size: 1.3rem;
+.admin__section-nav-title._collapsible:after {
+  content: '\e628';
+  font-family: 'Icons';
+  -webkit-font-smoothing: antialiased;
+  font-weight: normal;
+  speak: none;
+  position: absolute;
+  right: 18px;
+  top: 22px;
+  font-size: 13px;
 }
-.dashboard-diagram-disabled {
-  padding: .5rem 2rem 2rem;
+.admin__section-nav-title strong {
+  font-weight: 700;
 }
-.dashboard-diagram-switcher {
-  margin-bottom: 2rem;
+.admin__section-nav-items {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
-.dashboard-diagram-switcher .form-select-label {
-  display: inline-block;
+.admin__section-nav-item {
+  padding: 0;
+  border-left: 3px solid transparent;
+  margin: 0 0 -1px;
 }
-.dashboard-diagram-image {
-  max-width: 100%;
+.admin__section-nav-item._active {
+  border-color: #eb5202;
 }
-.dashboard-totals {
-  margin: 1rem 2rem 6rem;
+.admin__section-nav-item._active .admin__section-nav-link {
+  border-color: #e3e3e3;
+  margin: 0;
 }
-.dashboard-totals-list {
-  display: table;
-  width: 100%;
+.admin__section-nav-item._active .admin__section-nav-link:hover {
+  text-decoration: none;
 }
-.dashboard-totals-item {
-  display: table-cell;
-  padding: 0 1rem 0 0;
-  width: 25%;
+.admin__section-nav-item._loading {
+  position: relative;
+  z-index: 1;
 }
-.dashboard-totals-item:first-child .price {
-  color: #eb5202;
+.admin__section-nav-item._loading:before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 2;
+  background: url("../images/loader-2.gif") no-repeat 50% 50%;
+  background-size: 120px;
+  width: 20px;
+  height: 20px;
+  top: 21px;
+  right: 5px;
 }
-.dashboard-totals-label {
+.admin__section-nav-link {
+  border: 1px solid transparent;
+  border-width: 1px 0;
+  line-height: 1.2;
+  font-weight: 500;
+  color: #333333;
   display: block;
-  font-size: 1.3rem;
-  font-weight: 700;
+  padding: 20px 30px 20px 10px;
 }
-.dashboard-totals-value {
-  font-size: 2.4rem;
-  font-weight: 600;
+.admin__section-nav-link:hover {
+  color: #333333;
+  text-decoration: underline;
 }
-.dashboard-store-stats .ui-tabs {
+.admin__section-nav-link._changed {
   position: relative;
+  z-index: 1;
 }
-.dashboard-store-stats .ui-tabs:before {
-  background-color: rgba(255, 255, 255, 0);
-  background-repeat: repeat-x;
-  background-image: -webkit-linear-gradient(left, color-stop(rgba(255, 255, 255, 0) 0%), color-stop(#ffffff 100%));
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0)', endColorstr='#ffffff', GradientType=1);
-  content: '';
-  height: 4.8rem;
+.admin__section-nav-link._changed:before {
+  content: '\e623';
+  font-family: 'Icons';
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
   position: absolute;
-  right: 0;
-  top: 0;
-  width: 2rem;
+  z-index: 2;
+  font-size: 17px;
+  color: #eb5202;
+  width: 20px;
+  height: 20px;
+  top: 15px;
+  right: 5px;
 }
-.dashboard-store-stats .ui-tabs-panel {
-  background: url(../images/ajax-loader-small.gif) no-repeat 50% 50%;
-  min-height: 6rem;
+.admin__field-tooltip {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 5px;
+  position: relative;
+  z-index: 1;
+  width: 0;
+  overflow: visible;
 }
-.dashboard-store-stats .tabs-horiz {
-  border-right: 1px solid #ffffff;
-  float: left;
-  overflow-x: auto;
-  white-space: nowrap;
-  width: 100%;
+.admin__field-option .admin__field-tooltip {
+  margin-top: 10px;
 }
-.dashboard-store-stats .tabs-horiz .ui-state-default {
+.admin__field-tooltip:hover {
+  z-index: 99;
+}
+.admin__field-tooltip-action {
+  position: relative;
+  z-index: 2;
+  margin-left: 18px;
+  width: 22px;
+  height: 22px;
   display: inline-block;
-  float: none;
-  margin-right: .1rem;
+  cursor: pointer;
 }
-.dashboard-container .dashboard-secondary {
-  padding-right: 3.5rem;
+.admin__field-tooltip-action:before {
+  content: "?";
+  font-weight: 500;
+  font-size: 18px;
+  display: inline-block;
+  overflow: hidden;
+  height: 22px;
+  border-radius: 11px;
+  line-height: 22px;
+  width: 22px;
+  text-align: center;
+  color: #ffffff;
+  background-color: #514943;
 }
-.dashboard-item {
-  margin-bottom: 3rem;
+.admin__field-tooltip-action span {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
-.dashboard-item-title {
-  font-size: 1.8rem;
-  font-weight: 700;
+.admin__control-text:focus + .admin__field-tooltip-content,
+.admin__field-tooltip:hover .admin__field-tooltip-content {
+  display: block;
 }
-.dashboard-item-primary:first-child .dashboard-sales-value {
-  color: #eb5202;
+.admin__field-tooltip-content {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  width: 320px;
+  background: #fff8d7;
+  padding: 15px 25px;
+  right: -66px;
+  border: 1px solid #adadad;
+  border-radius: 1px;
+  bottom: 42px;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
 }
-.dashboard-sales-value {
-  font-size: 2.4rem;
-  font-weight: 600;
+.admin__field-tooltip-content:after,
+.admin__field-tooltip-content:before {
+  content: "";
+  display: block;
+  border: 16px solid transparent;
+  height: 0;
+  width: 0;
+  border-top-color: #adadad;
+  position: absolute;
+  right: 20px;
+  top: 100%;
+  z-index: 3;
+}
+.admin__field-tooltip-content:after {
+  border-top-color: #fff8d7;
+  margin-top: -1px;
+  z-index: 4;
 }
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_form.less b/app/design/adminhtml/Magento/backend/web/css/source/_form.less
new file mode 100644
index 00000000000..9ac94c9555b
--- /dev/null
+++ b/app/design/adminhtml/Magento/backend/web/css/source/_form.less
@@ -0,0 +1,283 @@
+// /**
+//  * Copyright © 2015 Magento. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Variables
+//  _____________________________________________
+
+@import '_form/_abstract';
+
+@field-control__border-color: @color-gray68;
+@field-control__color: @color-very-dark-gray-black;
+@field-control__bg-color: @color-white;
+@field-control-addon__color: @color-gray52;
+
+
+@field-error__color: @color-very-dark-gray2;
+@field-error__bg-color: @color-lazy-sun;
+@field-error__border-color: @color-tomato-brick;
+
+//  States
+@field-control__focus__border-color: @color-pure-blue;
+@field-control__disabled__bg-color: @color-lighter-gray;
+@field-label__required__color: @color-phoenix;
+@field-label__disabled__color: @color-gray60;
+
+//
+//  Basic controls
+//  _____________________________________________
+
+//
+//  Common
+//  ---------------------------------------------
+.__form-control-styles() {
+        background-color: @field-control__bg-color;
+        border-radius: 1px;
+        border: 1px solid @field-control__border-color;
+        color: @field-control__color;
+        font-size: 15px;
+        font-weight: 500;
+        height: 33px;
+        max-width: 100%;
+        padding: 0 10px;
+    }
+.__form-control-styles__focus() {
+        border-color: @field-control__focus__border-color;
+        box-shadow: none;
+        outline: 0;
+    }
+.__form-control-styles__disabled() {
+        background-color: @field-control__disabled__bg-color;
+        border-color: @field-control__border-color;
+        color: @field-control__color;
+        opacity: .5;
+    }
+
+.admin__control-text {
+    .extend__form-control-styles();
+
+    line-height: normal;
+    width: 100%;
+}
+
+.admin__control-select {
+    .extend__form-control-styles();
+    .css(appearance, none, 1);
+
+    background-repeat: no-repeat;
+
+    background-image+: url('../images/arrows-bg.svg');
+    background-position+: ~'calc(100% - 12px)' -34px;
+    background-size+: auto;
+
+    background-image+: linear-gradient(#e3e3e3, #e3e3e3);
+    background-position+: 100%;
+    background-size+: 33px 100%;
+
+    background-image+: linear-gradient(@field-control__border-color,@field-control__border-color);
+    background-position+: ~'calc(100% - 33px)' 0;
+    background-size+: 1px 100%;
+
+    padding-right: 34px+10px;
+
+    &:focus {
+        background-image+: url('../images/arrows-bg.svg');
+        background-position+: ~'calc(100% - 12px)' 13px;
+
+        background-image+: linear-gradient(#e3e3e3, #e3e3e3);
+        background-position+: 100%;
+
+        background-image+: linear-gradient(@field-control__focus__border-color, @field-control__focus__border-color);
+        background-position+: ~'calc(100% - 33px)' 0;
+    }
+    &::-ms-expand {
+        display: none;
+    }
+    .ie9 & {
+        padding-right: 0;
+    }
+}
+
+option:empty {
+    display: none;
+}
+
+.admin__control-file {
+    background: transparent;
+    border: 0;
+}
+
+.admin__control-textarea,
+.admin__control-multiselect {
+    .extend__form-control-styles();
+    height: ~"calc(6 * 1.2em + 14px)";
+    line-height: 1.2;
+    padding: 6px 10px;
+    width: 100%;
+}
+
+.admin__control-textarea {
+    line-height: 1.18em;
+    padding-top: 8px;
+}
+
+.admin__control-radio,
+.admin__control-checkbox {
+    margin: 3px 0 0 0;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    vertical-align: top;
+    + label {
+        cursor: pointer;
+        display: inline-block;
+        padding-left: 26px;
+
+        &:before {
+            .url('images/choice_bkg.png', 'Magento_Ui');
+
+            background: url('@{url}') no-repeat -100% -100% #fff;
+            border-radius: 2px;
+            border: 1px solid @field-control__border-color;
+            content: '';
+            float: left;
+            height: 14px;
+            line-height: 14px;
+            margin: 1px 10px 0 -26px;
+            text-align: center;
+            vertical-align: top;
+            width: 14px;
+        }
+    }
+    &:focus + label {
+        .keyfocus & {
+            &:extend(.keyfocus *:focus);
+        }
+        &:before {
+            border-color: @field-control__focus__border-color;
+        }
+    }
+    &[disabled] + label {
+        &:before {
+            background-color: @field-control__disabled__bg-color;
+            border-color: @field-control__border-color;
+        }
+        color: @field-control__color;
+        opacity: .5;
+    }
+}
+.admin__control-radio + label:before {
+    border-radius: 8px;
+}
+.admin__control-radio:checked + label:before {
+    background-position: -26px -1px;
+}
+.admin__control-checkbox:checked + label:before {
+    background-position: -1px -1px;
+}
+
+
+.admin__control-addon {
+    .vendor-prefix-display(inline-flex);
+    .vendor-prefix-flex-direction(row);
+    & > * {
+        .vendor-prefix-flex-basis(auto);
+        .vendor-prefix-flex-grow(0);
+        .vendor-prefix-flex-shrink(0);
+    }
+    display: inline-flex;
+    flex-flow: row nowrap;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    > * {
+        position: relative;
+        z-index: 1;
+    }
+    [class*="admin__control-"] {
+        background-color: transparent;
+        border-color: transparent;
+        order: 1;
+        vertical-align: top;
+        width: auto;
+        .css(appearence,none);
+        .vendor-prefix-flex-grow(1);
+        :focus {
+            box-shadow: 0;
+        }
+        & + [class*="admin__addon-"] {
+            padding-left: 10px;
+            position: static !important;
+            z-index: 0;
+            > * {
+                position: relative;
+                vertical-align: top;
+                z-index: 2;
+            }
+        }
+        & + [class*="admin__addon-"]:before {
+            &:extend(.__form-control-styles);
+            bottom: 0;
+            box-sizing: border-box;
+            content: '';
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 100%;
+            z-index: 0;
+        }
+        &[disabled] + [class*="admin__addon-"]:before {
+            &:extend(.__form-control-styles[disabled]);
+        }
+        &:focus + label:before {
+            &:extend(.__form-control-styles:focus);
+        }
+    }
+}
+.admin__addon {
+    &-suffix,
+    &-prefix {
+        border: 0;
+        box-sizing: border-box;
+        color: @field-control-addon__color;
+        display: inline-block;
+        font-size: 15px;
+        font-weight: 300;
+        height: 33px;
+        line-height: 33px;
+        padding: 0 3px;
+    }
+    &-suffix {
+        order: 3;
+        &:last-child {
+            padding-right: 10px;
+        }
+    }
+    &-prefix {
+        order: 0;
+    }
+}
+
+.admin__control-value {
+    display: inline-block;
+    padding: 6px 10px;
+}
+
+.admin__control-text + .ui-datepicker-trigger {
+    img {
+        display: none;
+    }
+    .button-reset();
+    .icon-font(
+        @icon-calendar,
+        @_icon-font-size: 38px,
+        @_icon-font-line-height: 33px,
+        @_icon-font-text-hide: true,
+        @_icon-font-position: after,
+        @_icon-font-color: @field-date-icon--color
+    );
+    margin-left: -40px;
+    display: inline-block;
+}
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_form/_abstract.less b/app/design/adminhtml/Magento/backend/web/css/source/_form/_abstract.less
new file mode 100644
index 00000000000..b4935e72704
--- /dev/null
+++ b/app/design/adminhtml/Magento/backend/web/css/source/_form/_abstract.less
@@ -0,0 +1,26 @@
+// /**
+//  * Copyright © 2015 Magento. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+.extend__form-control-styles() {
+    &:extend(.__form-control-styles);
+    &:focus {
+        &:extend(.__form-control-styles:focus);
+    }
+    &[disabled] {
+        &:extend(.__form-control-styles[disabled]);
+    }
+}
+
+.__form-control-styles {
+    .__form-control-styles();
+    &:focus {
+        .__form-control-styles__focus();
+    }
+    &[disabled] {
+        .__form-control-styles__disabled();
+    }
+}
+
+
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_sources.less b/app/design/adminhtml/Magento/backend/web/css/source/_sources.less
index 2ac9bb9472d..0926721e084 100644
--- a/app/design/adminhtml/Magento/backend/web/css/source/_sources.less
+++ b/app/design/adminhtml/Magento/backend/web/css/source/_sources.less
@@ -14,8 +14,8 @@
 @import '_typography';
 @import '_icons';
 @import '_lists';
+@import '_form';
 @import '_buttons';
-@import '_forms';
 @import '_tables';
 @import '_alerts';
 @import '_grid';
diff --git a/app/design/adminhtml/Magento/backend/web/css/styles-new.less b/app/design/adminhtml/Magento/backend/web/css/styles-new.less
new file mode 100644
index 00000000000..05e0980edea
--- /dev/null
+++ b/app/design/adminhtml/Magento/backend/web/css/styles-new.less
@@ -0,0 +1,8 @@
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+#html-body[class][data-container="body"] .admin__scope {
+    @import (less) 'override.css';
+}
diff --git a/app/design/adminhtml/Magento/backend/web/images/arrows-bg.svg b/app/design/adminhtml/Magento/backend/web/images/arrows-bg.svg
new file mode 100644
index 00000000000..322a96ecdab
--- /dev/null
+++ b/app/design/adminhtml/Magento/backend/web/images/arrows-bg.svg
@@ -0,0 +1,5 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="8px" height="53px" viewBox="0 0 8 53" style="enable-background:new 0 0 8 53;" xml:space="preserve">
+<path style="fill:#524A43;" d="M4.028,52.994l-4.003-5.368h8.006L4.028,52.994z"/>
+<path style="fill:#524A43;" d="M4.028,0l4.003,5.368H0.025L4.028,0z"/>
+</svg>
-- 
GitLab