From d5583df1748bc2f71ea9b6f818c10325a431a038 Mon Sep 17 00:00:00 2001
From: Jesse <jesse@opencart.com>
Date: Thu, 29 Mar 2018 12:25:58 +0800
Subject: [PATCH 1/3] store front css updated, btn-default -> btn-light and
 color fixed

---
 .../theme/default/stylesheet/_stylesheet.scss |  16 +-
 .../theme/default/stylesheet/bootstrap.css    | 424 +++++++++---------
 .../default/stylesheet/scss/_variables.scss   |   8 +-
 .../theme/default/stylesheet/stylesheet.css   |  14 +-
 .../template/account/address_form.twig        |  10 +-
 .../template/account/address_list.twig        |   2 +-
 .../default/template/account/affiliate.twig   |   8 +-
 .../theme/default/template/account/edit.twig  |  10 +-
 .../default/template/account/forgotten.twig   |   2 +-
 .../default/template/account/newsletter.twig  |   2 +-
 .../default/template/account/password.twig    |   2 +-
 .../default/template/account/register.twig    |   8 +-
 .../theme/default/template/account/reset.twig |   2 +-
 .../default/template/account/return_form.twig |   4 +-
 .../default/template/affiliate/register.twig  |  16 +-
 .../theme/default/template/checkout/cart.twig |   2 +-
 .../default/template/checkout/guest.twig      |  16 +-
 .../template/checkout/guest_shipping.twig     |   8 +-
 .../template/checkout/payment_address.twig    |   8 +-
 .../default/template/checkout/register.twig   |  16 +-
 .../template/checkout/shipping_address.twig   |   8 +-
 .../theme/default/template/common/search.twig |   2 +-
 .../credit_card/sagepay_direct_form.twig      |   2 +-
 .../credit_card/sagepay_direct_list.twig      |   2 +-
 .../credit_card/sagepay_server_list.twig      |   2 +-
 .../extension/credit_card/squareup.twig       |   2 +-
 .../template/extension/total/shipping.twig    |   2 +-
 .../default/template/product/category.twig    |   4 +-
 .../default/template/product/compare.twig     |   2 +-
 .../template/product/manufacturer_info.twig   |   4 +-
 .../default/template/product/product.twig     |  12 +-
 .../default/template/product/search.twig      |   4 +-
 .../default/template/product/special.twig     |   4 +-
 33 files changed, 306 insertions(+), 322 deletions(-)

diff --git a/upload/catalog/view/theme/default/stylesheet/_stylesheet.scss b/upload/catalog/view/theme/default/stylesheet/_stylesheet.scss
index d5e2b7711a5..f11dbd835ed 100644
--- a/upload/catalog/view/theme/default/stylesheet/_stylesheet.scss
+++ b/upload/catalog/view/theme/default/stylesheet/_stylesheet.scss
@@ -569,11 +569,7 @@ div.required .col-form-label:before {
   }
 }
 
-
-.btn-group {
-
-}
-.btn-default {
+.btn-light {
 	color: #777;
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 	background-color: #e7e7e7;
@@ -589,13 +585,12 @@ div.required .col-form-label:before {
     color: #333;
     background-color: #e6e6e6;
     border-color: #adadad;
-    background-position: 0 -15px;
+    background-position: 0;
   }
 }
 .btn-primary {
 	color: #ffffff;
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-	background-color: #229ac8;
 	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
 	background-repeat: repeat-x;
 	border-color: #1f90bb #1f90bb #145e7a;
@@ -605,14 +600,12 @@ div.required .col-form-label:before {
   &.active,
   &.disabled,
   &[disabled] {
-    background-color: #1f90bb;
-  	background-position: 0 -15px;
+  	background-position: 0;
   }
 }
 .btn-warning {
 	color: #ffffff;
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-	background-color: #faa732;
 	background-image: linear-gradient(to bottom, #fbb450, #f89406);
 	background-repeat: repeat-x;
 	border-color: #f89406 #f89406 #ad6704;
@@ -628,7 +621,6 @@ div.required .col-form-label:before {
 .btn-danger {
 	color: #ffffff;
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-	background-color: #da4f49;
 	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
 	background-repeat: repeat-x;
 	border-color: #bd362f #bd362f #802420;
@@ -644,7 +636,6 @@ div.required .col-form-label:before {
 .btn-success {
 	color: #ffffff;
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-	background-color: #5bb75b;
 	background-image: linear-gradient(to bottom, #62c462, #51a351);
 	background-repeat: repeat-x;
 	border-color: #51a351 #51a351 #387038;
@@ -660,7 +651,6 @@ div.required .col-form-label:before {
 .btn-info {
 	color: #ffffff;
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-	background-color: #df5c39;
 	background-image: linear-gradient(to bottom, #e06342, #dc512c);
 	background-repeat: repeat-x;
 	border-color: #dc512c #dc512c #a2371a;
diff --git a/upload/catalog/view/theme/default/stylesheet/bootstrap.css b/upload/catalog/view/theme/default/stylesheet/bootstrap.css
index ef2070dbc0d..faf973b4afa 100644
--- a/upload/catalog/view/theme/default/stylesheet/bootstrap.css
+++ b/upload/catalog/view/theme/default/stylesheet/bootstrap.css
@@ -5,26 +5,26 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 :root {
-  --blue: #007bff;
+  --blue: #229ac8;
   --indigo: #6610f2;
   --purple: #6f42c1;
   --pink: #e83e8c;
-  --red: #dc3545;
+  --red: #da4f49;
   --orange: #fd7e14;
-  --yellow: #ffc107;
+  --yellow: #faa732;
   --green: #28a745;
   --teal: #20c997;
   --cyan: #17a2b8;
   --white: #fff;
   --gray: #6c757d;
   --gray-dark: #343a40;
-  --primary: #007bff;
+  --primary: #229ac8;
   --secondary: #6c757d;
   --success: #28a745;
   --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
+  --warning: #faa732;
+  --danger: #da4f49;
+  --light: #e7e7e7;
   --dark: #343a40;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
@@ -126,12 +126,12 @@ sup {
   top: -0.5em; }
 
 a {
-  color: #007bff;
+  color: #229ac8;
   text-decoration: none;
   background-color: transparent;
   -webkit-text-decoration-skip: objects; }
   a:hover {
-    color: #0056b3;
+    color: #176887;
     text-decoration: underline; }
 
 a:not([href]):not([tabindex]) {
@@ -1139,11 +1139,11 @@ pre {
 .table-hover tbody tr:hover {
   background-color: rgba(0, 0, 0, .075); }
   .table-primary, .table-primary > th, .table-primary > td {
-    background-color: #b8daff; }
+    background-color: #c1e3f0; }
   .table-hover .table-primary:hover {
-    background-color: #9ecdff; }
+    background-color: #add9eb; }
     .table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th {
-      background-color: #9ecdff; }
+      background-color: #add9eb; }
   .table-secondary, .table-secondary > th, .table-secondary > td {
     background-color: #d6d8db; }
   .table-hover .table-secondary:hover {
@@ -1163,23 +1163,23 @@ pre {
     .table-hover .table-info:hover > td, .table-hover .table-info:hover > th {
       background-color: #abdde5; }
   .table-warning, .table-warning > th, .table-warning > td {
-    background-color: #ffeeba; }
+    background-color: #fee6c6; }
   .table-hover .table-warning:hover {
-    background-color: #ffe7a0; }
+    background-color: #fddcad; }
     .table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th {
-      background-color: #ffe7a0; }
+      background-color: #fddcad; }
   .table-danger, .table-danger > th, .table-danger > td {
-    background-color: #f5c6cb; }
+    background-color: #f5cecc; }
   .table-hover .table-danger:hover {
-    background-color: #f1b1b7; }
+    background-color: #f0b9b7; }
     .table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th {
-      background-color: #f1b1b7; }
+      background-color: #f0b9b7; }
   .table-light, .table-light > th, .table-light > td {
-    background-color: #fdfdfe; }
+    background-color: #f8f8f8; }
   .table-hover .table-light:hover {
-    background-color: #f1f1f1; }
+    background-color: #ececec; }
     .table-hover .table-light:hover > td, .table-hover .table-light:hover > th {
-      background-color: #f1f1f1; }
+      background-color: #ececec; }
   .table-dark, .table-dark > th, .table-dark > td {
     background-color: #c6c8ca; }
   .table-hover .table-dark:hover {
@@ -1279,9 +1279,9 @@ pre {
   .form-control:focus {
     color: #495057;
     background-color: #fff;
-    border-color: #80bdff;
+    border-color: #80cce9;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    box-shadow: 0 0 0 0.2rem rgba(34, 154, 200, .25); }
   .form-control::placeholder {
     color: #6c757d;
     opacity: 1; }
@@ -1451,7 +1451,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   width: 100%;
   margin-top: 0.25rem;
   font-size: 80%;
-  color: #dc3545; }
+  color: #da4f49; }
 
 .invalid-tooltip {
   position: absolute;
@@ -1464,41 +1464,41 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   font-size: 0.875rem;
   line-height: 1;
   color: #fff;
-  background-color: rgba(220, 53, 69, .8);
+  background-color: rgba(218, 79, 73, .8);
   border-radius: 0.2rem; }
 
 .was-validated .form-control:invalid, .was-validated .custom-select:invalid, .form-control.is-invalid, .custom-select.is-invalid {
-  border-color: #dc3545; }
+  border-color: #da4f49; }
   .was-validated .form-control:invalid:focus, .was-validated .custom-select:invalid:focus, .form-control.is-invalid:focus, .custom-select.is-invalid:focus {
-    border-color: #dc3545;
-    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25); }
+    border-color: #da4f49;
+    box-shadow: 0 0 0 0.2rem rgba(218, 79, 73, .25); }
   .was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .custom-select:invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-feedback, .custom-select.is-invalid ~ .invalid-feedback, .was-validated .form-control:invalid ~ .invalid-tooltip, .was-validated .custom-select:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-tooltip {
     display: block; }
 
 .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
-  color: #dc3545; }
+  color: #da4f49; }
   .was-validated .form-check-input:invalid ~ .invalid-feedback, .form-check-input.is-invalid ~ .invalid-feedback, .was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-tooltip {
     display: block; }
 
 .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
-  color: #dc3545; }
+  color: #da4f49; }
   .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
-    background-color: #efa2a9; }
+    background-color: #f0b5b3; }
   .was-validated .custom-control-input:invalid ~ .invalid-feedback, .custom-control-input.is-invalid ~ .invalid-feedback, .was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-tooltip {
     display: block; }
   .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
-    background-color: #e4606d; }
+    background-color: #e37873; }
   .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(220, 53, 69, .25); }
+    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(218, 79, 73, .25); }
 
 .was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
-  border-color: #dc3545; }
+  border-color: #da4f49; }
   .was-validated .custom-file-input:invalid ~ .custom-file-label::before, .custom-file-input.is-invalid ~ .custom-file-label::before {
     border-color: inherit; }
   .was-validated .custom-file-input:invalid ~ .invalid-feedback, .custom-file-input.is-invalid ~ .invalid-feedback, .was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-tooltip {
     display: block; }
   .was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
-    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25); }
+    box-shadow: 0 0 0 0.2rem rgba(218, 79, 73, .25); }
 
 .form-inline {
   display: flex;
@@ -1567,7 +1567,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
     text-decoration: none; }
   .btn:focus, .btn.focus {
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    box-shadow: 0 0 0 0.2rem rgba(34, 154, 200, .25); }
   .btn.disabled, .btn:disabled {
     opacity: 0.65; }
   .btn:not(:disabled):not(.disabled) {
@@ -1578,24 +1578,24 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
     pointer-events: none; }
   .btn-primary {
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #229ac8;
+    border-color: #229ac8; }
   .btn-primary:hover {
     color: #fff;
-    background-color: #0069d9;
-    border-color: #0062cc; }
+    background-color: #1c81a7;
+    border-color: #1b789c; }
   .btn-primary:focus, .btn-primary.focus {
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(34, 154, 200, .5); }
   .btn-primary.disabled, .btn-primary:disabled {
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #229ac8;
+    border-color: #229ac8; }
   .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
     color: #fff;
-    background-color: #0062cc;
-    border-color: #005cbf; }
+    background-color: #1b789c;
+    border-color: #197092; }
   .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(34, 154, 200, .5); }
   .btn-secondary {
     color: #fff;
     background-color: #6c757d;
@@ -1658,64 +1658,64 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
     box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, .5); }
   .btn-warning {
     color: #212529;
-    background-color: #ffc107;
-    border-color: #ffc107; }
+    background-color: #faa732;
+    border-color: #faa732; }
   .btn-warning:hover {
     color: #212529;
-    background-color: #e0a800;
-    border-color: #d39e00; }
+    background-color: #f9970d;
+    border-color: #f39106; }
   .btn-warning:focus, .btn-warning.focus {
-    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(250, 167, 50, .5); }
   .btn-warning.disabled, .btn-warning:disabled {
     color: #212529;
-    background-color: #ffc107;
-    border-color: #ffc107; }
+    background-color: #faa732;
+    border-color: #faa732; }
   .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle {
     color: #212529;
-    background-color: #d39e00;
-    border-color: #c69500; }
+    background-color: #f39106;
+    border-color: #e78906; }
   .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(250, 167, 50, .5); }
   .btn-danger {
     color: #fff;
-    background-color: #dc3545;
-    border-color: #dc3545; }
+    background-color: #da4f49;
+    border-color: #da4f49; }
   .btn-danger:hover {
     color: #fff;
-    background-color: #c82333;
-    border-color: #bd2130; }
+    background-color: #d2322b;
+    border-color: #c72f29; }
   .btn-danger:focus, .btn-danger.focus {
-    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(218, 79, 73, .5); }
   .btn-danger.disabled, .btn-danger:disabled {
     color: #fff;
-    background-color: #dc3545;
-    border-color: #dc3545; }
+    background-color: #da4f49;
+    border-color: #da4f49; }
   .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle {
     color: #fff;
-    background-color: #bd2130;
-    border-color: #b21f2d; }
+    background-color: #c72f29;
+    border-color: #bd2d26; }
   .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(218, 79, 73, .5); }
   .btn-light {
     color: #212529;
-    background-color: #f8f9fa;
-    border-color: #f8f9fa; }
+    background-color: #e7e7e7;
+    border-color: #e7e7e7; }
   .btn-light:hover {
     color: #212529;
-    background-color: #e2e6ea;
-    border-color: #dae0e5; }
+    background-color: #d4d4d4;
+    border-color: #cecece; }
   .btn-light:focus, .btn-light.focus {
-    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(231, 231, 231, .5); }
   .btn-light.disabled, .btn-light:disabled {
     color: #212529;
-    background-color: #f8f9fa;
-    border-color: #f8f9fa; }
+    background-color: #e7e7e7;
+    border-color: #e7e7e7; }
   .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle {
     color: #212529;
-    background-color: #dae0e5;
-    border-color: #d3d9df; }
+    background-color: #cecece;
+    border-color: #c7c7c7; }
   .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(231, 231, 231, .5); }
   .btn-dark {
     color: #fff;
     background-color: #343a40;
@@ -1737,25 +1737,25 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus {
     box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, .5); }
   .btn-outline-primary {
-    color: #007bff;
+    color: #229ac8;
     background-color: transparent;
     background-image: none;
-    border-color: #007bff; }
+    border-color: #229ac8; }
   .btn-outline-primary:hover {
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #229ac8;
+    border-color: #229ac8; }
   .btn-outline-primary:focus, .btn-outline-primary.focus {
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(34, 154, 200, .5); }
   .btn-outline-primary.disabled, .btn-outline-primary:disabled {
-    color: #007bff;
+    color: #229ac8;
     background-color: transparent; }
   .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #229ac8;
+    border-color: #229ac8; }
   .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(34, 154, 200, .5); }
   .btn-outline-secondary {
     color: #6c757d;
     background-color: transparent;
@@ -1817,65 +1817,65 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus {
     box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, .5); }
   .btn-outline-warning {
-    color: #ffc107;
+    color: #faa732;
     background-color: transparent;
     background-image: none;
-    border-color: #ffc107; }
+    border-color: #faa732; }
   .btn-outline-warning:hover {
     color: #212529;
-    background-color: #ffc107;
-    border-color: #ffc107; }
+    background-color: #faa732;
+    border-color: #faa732; }
   .btn-outline-warning:focus, .btn-outline-warning.focus {
-    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(250, 167, 50, .5); }
   .btn-outline-warning.disabled, .btn-outline-warning:disabled {
-    color: #ffc107;
+    color: #faa732;
     background-color: transparent; }
   .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle {
     color: #212529;
-    background-color: #ffc107;
-    border-color: #ffc107; }
+    background-color: #faa732;
+    border-color: #faa732; }
   .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(250, 167, 50, .5); }
   .btn-outline-danger {
-    color: #dc3545;
+    color: #da4f49;
     background-color: transparent;
     background-image: none;
-    border-color: #dc3545; }
+    border-color: #da4f49; }
   .btn-outline-danger:hover {
     color: #fff;
-    background-color: #dc3545;
-    border-color: #dc3545; }
+    background-color: #da4f49;
+    border-color: #da4f49; }
   .btn-outline-danger:focus, .btn-outline-danger.focus {
-    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(218, 79, 73, .5); }
   .btn-outline-danger.disabled, .btn-outline-danger:disabled {
-    color: #dc3545;
+    color: #da4f49;
     background-color: transparent; }
   .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle {
     color: #fff;
-    background-color: #dc3545;
-    border-color: #dc3545; }
+    background-color: #da4f49;
+    border-color: #da4f49; }
   .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(218, 79, 73, .5); }
   .btn-outline-light {
-    color: #f8f9fa;
+    color: #e7e7e7;
     background-color: transparent;
     background-image: none;
-    border-color: #f8f9fa; }
+    border-color: #e7e7e7; }
   .btn-outline-light:hover {
     color: #212529;
-    background-color: #f8f9fa;
-    border-color: #f8f9fa; }
+    background-color: #e7e7e7;
+    border-color: #e7e7e7; }
   .btn-outline-light:focus, .btn-outline-light.focus {
-    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(231, 231, 231, .5); }
   .btn-outline-light.disabled, .btn-outline-light:disabled {
-    color: #f8f9fa;
+    color: #e7e7e7;
     background-color: transparent; }
   .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle {
     color: #212529;
-    background-color: #f8f9fa;
-    border-color: #f8f9fa; }
+    background-color: #e7e7e7;
+    border-color: #e7e7e7; }
   .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(231, 231, 231, .5); }
   .btn-outline-dark {
     color: #343a40;
     background-color: transparent;
@@ -1899,10 +1899,10 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
 
 .btn-link {
   font-weight: 400;
-  color: #007bff;
+  color: #229ac8;
   background-color: transparent; }
   .btn-link:hover {
-    color: #0056b3;
+    color: #176887;
     text-decoration: underline;
     background-color: transparent;
     border-color: transparent; }
@@ -2075,11 +2075,11 @@ tbody.collapse.show {
   .dropdown-item:hover, .dropdown-item:focus {
     color: #16181b;
     text-decoration: none;
-    background-color: #f8f9fa; }
+    background-color: #e7e7e7; }
   .dropdown-item.active, .dropdown-item:active {
     color: #fff;
     text-decoration: none;
-    background-color: #007bff; }
+    background-color: #229ac8; }
   .dropdown-item.disabled, .dropdown-item:disabled {
     color: #6c757d;
     background-color: transparent; }
@@ -2248,12 +2248,12 @@ tbody.collapse.show {
   opacity: 0; }
   .custom-control-input:checked ~ .custom-control-label::before {
     color: #fff;
-    background-color: #007bff; }
+    background-color: #229ac8; }
   .custom-control-input:focus ~ .custom-control-label::before {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(34, 154, 200, .25); }
   .custom-control-input:active ~ .custom-control-label::before {
     color: #fff;
-    background-color: #b3d7ff; }
+    background-color: #acdef1; }
   .custom-control-input:disabled ~ .custom-control-label {
     color: #6c757d; }
   .custom-control-input:disabled ~ .custom-control-label::before {
@@ -2287,26 +2287,26 @@ tbody.collapse.show {
 .custom-checkbox .custom-control-label::before {
   border-radius: 0.25rem; }
   .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
-    background-color: #007bff; }
+    background-color: #229ac8; }
   .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); }
   .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
-    background-color: #007bff; }
+    background-color: #229ac8; }
   .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E"); }
   .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
-    background-color: rgba(0, 123, 255, .5); }
+    background-color: rgba(34, 154, 200, .5); }
   .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
-    background-color: rgba(0, 123, 255, .5); }
+    background-color: rgba(34, 154, 200, .5); }
 
 .custom-radio .custom-control-label::before {
   border-radius: 50%; }
   .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
-    background-color: #007bff; }
+    background-color: #229ac8; }
   .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
   .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
-    background-color: rgba(0, 123, 255, .5); }
+    background-color: rgba(34, 154, 200, .5); }
 
 .custom-select {
   display: inline-block;
@@ -2322,9 +2322,9 @@ tbody.collapse.show {
   border-radius: 0.25rem;
   appearance: none; }
   .custom-select:focus {
-    border-color: #80bdff;
+    border-color: #80cce9;
     outline: 0;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(128, 189, 255, .5); }
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(128, 204, 233, .5); }
   .custom-select:focus::-ms-value {
     color: #495057;
     background-color: #fff; }
@@ -2365,10 +2365,10 @@ tbody.collapse.show {
   margin: 0;
   opacity: 0; }
   .custom-file-input:focus ~ .custom-file-control {
-    border-color: #80bdff;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    border-color: #80cce9;
+    box-shadow: 0 0 0 0.2rem rgba(34, 154, 200, .25); }
   .custom-file-input:focus ~ .custom-file-control::before {
-    border-color: #80bdff; }
+    border-color: #80cce9; }
   .custom-file-input:lang(en) ~ .custom-file-label::after {
     content: "Browse"; }
 
@@ -2443,7 +2443,7 @@ tbody.collapse.show {
   border-radius: 0.25rem; }
   .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
     color: #fff;
-    background-color: #007bff; }
+    background-color: #229ac8; }
 
 .nav-fill .nav-item {
   flex: 1 1 auto;
@@ -2905,18 +2905,18 @@ tbody.collapse.show {
   padding: 0.5rem 0.75rem;
   margin-left: -1px;
   line-height: 1.25;
-  color: #007bff;
+  color: #229ac8;
   background-color: #fff;
   border: 1px solid #dee2e6; }
   .page-link:hover {
-    color: #0056b3;
+    color: #176887;
     text-decoration: none;
     background-color: #e9ecef;
     border-color: #dee2e6; }
   .page-link:focus {
     z-index: 2;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    box-shadow: 0 0 0 0.2rem rgba(34, 154, 200, .25); }
   .page-link:not(:disabled):not(.disabled) {
     cursor: pointer; }
 
@@ -2930,8 +2930,8 @@ tbody.collapse.show {
   .page-item.active .page-link {
     z-index: 1;
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #229ac8;
+    border-color: #229ac8; }
   .page-item.disabled .page-link {
     color: #6c757d;
     pointer-events: none;
@@ -2984,11 +2984,11 @@ tbody.collapse.show {
   border-radius: 10rem; }
   .badge-primary {
     color: #fff;
-    background-color: #007bff; }
+    background-color: #229ac8; }
   .badge-primary[href]:hover, .badge-primary[href]:focus {
     color: #fff;
     text-decoration: none;
-    background-color: #0062cc; }
+    background-color: #1b789c; }
   .badge-secondary {
     color: #fff;
     background-color: #6c757d; }
@@ -3012,25 +3012,25 @@ tbody.collapse.show {
     background-color: #117a8b; }
   .badge-warning {
     color: #212529;
-    background-color: #ffc107; }
+    background-color: #faa732; }
   .badge-warning[href]:hover, .badge-warning[href]:focus {
     color: #212529;
     text-decoration: none;
-    background-color: #d39e00; }
+    background-color: #f39106; }
   .badge-danger {
     color: #fff;
-    background-color: #dc3545; }
+    background-color: #da4f49; }
   .badge-danger[href]:hover, .badge-danger[href]:focus {
     color: #fff;
     text-decoration: none;
-    background-color: #bd2130; }
+    background-color: #c72f29; }
   .badge-light {
     color: #212529;
-    background-color: #f8f9fa; }
+    background-color: #e7e7e7; }
   .badge-light[href]:hover, .badge-light[href]:focus {
     color: #212529;
     text-decoration: none;
-    background-color: #dae0e5; }
+    background-color: #cecece; }
   .badge-dark {
     color: #fff;
     background-color: #343a40; }
@@ -3075,13 +3075,13 @@ tbody.collapse.show {
     padding: 0.75rem 1.25rem;
     color: inherit; }
   .alert-primary {
-    color: #004085;
-    background-color: #cce5ff;
-    border-color: #b8daff; }
+    color: #125068;
+    background-color: #d3ebf4;
+    border-color: #c1e3f0; }
   .alert-primary hr {
-    border-top-color: #9ecdff; }
+    border-top-color: #add9eb; }
   .alert-primary .alert-link {
-    color: #002752; }
+    color: #0a2f3c; }
   .alert-secondary {
     color: #383d41;
     background-color: #e2e3e5;
@@ -3107,29 +3107,29 @@ tbody.collapse.show {
   .alert-info .alert-link {
     color: #062c32; }
   .alert-warning {
-    color: #856404;
-    background-color: #fff3cd;
-    border-color: #ffeeba; }
+    color: #82571a;
+    background-color: #feedd6;
+    border-color: #fee6c6; }
   .alert-warning hr {
-    border-top-color: #ffe7a0; }
+    border-top-color: #fddcad; }
   .alert-warning .alert-link {
-    color: #533f02; }
+    color: #583a12; }
   .alert-danger {
-    color: #721c24;
-    background-color: #f8d7da;
-    border-color: #f5c6cb; }
+    color: #712926;
+    background-color: #f8dcdb;
+    border-color: #f5cecc; }
   .alert-danger hr {
-    border-top-color: #f1b1b7; }
+    border-top-color: #f0b9b7; }
   .alert-danger .alert-link {
-    color: #491217; }
+    color: #4b1b19; }
   .alert-light {
-    color: #818182;
-    background-color: #fefefe;
-    border-color: #fdfdfe; }
+    color: #787878;
+    background-color: #fafafa;
+    border-color: #f8f8f8; }
   .alert-light hr {
-    border-top-color: #f1f1f1; }
+    border-top-color: #ececec; }
   .alert-light .alert-link {
-    color: #686868; }
+    color: #5f5f5f; }
   .alert-dark {
     color: #1b1e21;
     background-color: #d6d8d9;
@@ -3160,7 +3160,7 @@ tbody.collapse.show {
   justify-content: center;
   color: #fff;
   text-align: center;
-  background-color: #007bff;
+  background-color: #229ac8;
   transition: width 0.6s ease; }
 
 .progress-bar-striped {
@@ -3190,7 +3190,7 @@ tbody.collapse.show {
   .list-group-item-action:hover, .list-group-item-action:focus {
     color: #495057;
     text-decoration: none;
-    background-color: #f8f9fa; }
+    background-color: #e7e7e7; }
   .list-group-item-action:active {
     color: #212529;
     background-color: #e9ecef; }
@@ -3218,8 +3218,8 @@ tbody.collapse.show {
   .list-group-item.active {
     z-index: 2;
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #229ac8;
+    border-color: #229ac8; }
 
 .list-group-flush .list-group-item {
   border-right: 0;
@@ -3230,15 +3230,15 @@ tbody.collapse.show {
   .list-group-flush:last-child .list-group-item:last-child {
     border-bottom: 0; }
   .list-group-item-primary {
-    color: #004085;
-    background-color: #b8daff; }
+    color: #125068;
+    background-color: #c1e3f0; }
   .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
-    color: #004085;
-    background-color: #9ecdff; }
+    color: #125068;
+    background-color: #add9eb; }
   .list-group-item-primary.list-group-item-action.active {
     color: #fff;
-    background-color: #004085;
-    border-color: #004085; }
+    background-color: #125068;
+    border-color: #125068; }
   .list-group-item-secondary {
     color: #383d41;
     background-color: #d6d8db; }
@@ -3270,35 +3270,35 @@ tbody.collapse.show {
     background-color: #0c5460;
     border-color: #0c5460; }
   .list-group-item-warning {
-    color: #856404;
-    background-color: #ffeeba; }
+    color: #82571a;
+    background-color: #fee6c6; }
   .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
-    color: #856404;
-    background-color: #ffe7a0; }
+    color: #82571a;
+    background-color: #fddcad; }
   .list-group-item-warning.list-group-item-action.active {
     color: #fff;
-    background-color: #856404;
-    border-color: #856404; }
+    background-color: #82571a;
+    border-color: #82571a; }
   .list-group-item-danger {
-    color: #721c24;
-    background-color: #f5c6cb; }
+    color: #712926;
+    background-color: #f5cecc; }
   .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
-    color: #721c24;
-    background-color: #f1b1b7; }
+    color: #712926;
+    background-color: #f0b9b7; }
   .list-group-item-danger.list-group-item-action.active {
     color: #fff;
-    background-color: #721c24;
-    border-color: #721c24; }
+    background-color: #712926;
+    border-color: #712926; }
   .list-group-item-light {
-    color: #818182;
-    background-color: #fdfdfe; }
+    color: #787878;
+    background-color: #f8f8f8; }
   .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
-    color: #818182;
-    background-color: #f1f1f1; }
+    color: #787878;
+    background-color: #ececec; }
   .list-group-item-light.list-group-item-action.active {
     color: #fff;
-    background-color: #818182;
-    border-color: #818182; }
+    background-color: #787878;
+    border-color: #787878; }
   .list-group-item-dark {
     color: #1b1e21;
     background-color: #c6c8ca; }
@@ -3791,9 +3791,9 @@ button.close {
 .align-text-top {
   vertical-align: text-top !important; }
   .bg-primary {
-    background-color: #007bff !important; }
+    background-color: #229ac8 !important; }
   a.bg-primary:hover, button.bg-primary:hover, a.bg-primary:focus, button.bg-primary:focus {
-    background-color: #0062cc !important; }
+    background-color: #1b789c !important; }
   .bg-secondary {
     background-color: #6c757d !important; }
   a.bg-secondary:hover, button.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:focus {
@@ -3807,17 +3807,17 @@ button.close {
   a.bg-info:hover, button.bg-info:hover, a.bg-info:focus, button.bg-info:focus {
     background-color: #117a8b !important; }
   .bg-warning {
-    background-color: #ffc107 !important; }
+    background-color: #faa732 !important; }
   a.bg-warning:hover, button.bg-warning:hover, a.bg-warning:focus, button.bg-warning:focus {
-    background-color: #d39e00 !important; }
+    background-color: #f39106 !important; }
   .bg-danger {
-    background-color: #dc3545 !important; }
+    background-color: #da4f49 !important; }
   a.bg-danger:hover, button.bg-danger:hover, a.bg-danger:focus, button.bg-danger:focus {
-    background-color: #bd2130 !important; }
+    background-color: #c72f29 !important; }
   .bg-light {
-    background-color: #f8f9fa !important; }
+    background-color: #e7e7e7 !important; }
   a.bg-light:hover, button.bg-light:hover, a.bg-light:focus, button.bg-light:focus {
-    background-color: #dae0e5 !important; }
+    background-color: #cecece !important; }
   .bg-dark {
     background-color: #343a40 !important; }
   a.bg-dark:hover, button.bg-dark:hover, a.bg-dark:focus, button.bg-dark:focus {
@@ -3859,7 +3859,7 @@ button.close {
 .border-left-0 {
   border-left: 0 !important; }
   .border-primary {
-    border-color: #007bff !important; }
+    border-color: #229ac8 !important; }
   .border-secondary {
     border-color: #6c757d !important; }
   .border-success {
@@ -3867,11 +3867,11 @@ button.close {
   .border-info {
     border-color: #17a2b8 !important; }
   .border-warning {
-    border-color: #ffc107 !important; }
+    border-color: #faa732 !important; }
   .border-danger {
-    border-color: #dc3545 !important; }
+    border-color: #da4f49 !important; }
   .border-light {
-    border-color: #f8f9fa !important; }
+    border-color: #e7e7e7 !important; }
   .border-dark {
     border-color: #343a40 !important; }
 
@@ -5578,9 +5578,9 @@ button.close {
 .text-white {
   color: #fff !important; }
   .text-primary {
-    color: #007bff !important; }
+    color: #229ac8 !important; }
   a.text-primary:hover, a.text-primary:focus {
-    color: #0062cc !important; }
+    color: #1b789c !important; }
   .text-secondary {
     color: #6c757d !important; }
   a.text-secondary:hover, a.text-secondary:focus {
@@ -5594,17 +5594,17 @@ button.close {
   a.text-info:hover, a.text-info:focus {
     color: #117a8b !important; }
   .text-warning {
-    color: #ffc107 !important; }
+    color: #faa732 !important; }
   a.text-warning:hover, a.text-warning:focus {
-    color: #d39e00 !important; }
+    color: #f39106 !important; }
   .text-danger {
-    color: #dc3545 !important; }
+    color: #da4f49 !important; }
   a.text-danger:hover, a.text-danger:focus {
-    color: #bd2130 !important; }
+    color: #c72f29 !important; }
   .text-light {
-    color: #f8f9fa !important; }
+    color: #e7e7e7 !important; }
   a.text-light:hover, a.text-light:focus {
-    color: #dae0e5 !important; }
+    color: #cecece !important; }
   .text-dark {
     color: #343a40 !important; }
   a.text-dark:hover, a.text-dark:focus {
diff --git a/upload/catalog/view/theme/default/stylesheet/scss/_variables.scss b/upload/catalog/view/theme/default/stylesheet/scss/_variables.scss
index be580deb334..89fb2b321d5 100644
--- a/upload/catalog/view/theme/default/stylesheet/scss/_variables.scss
+++ b/upload/catalog/view/theme/default/stylesheet/scss/_variables.scss
@@ -10,7 +10,7 @@
 
 // stylelint-disable
 $white:    #fff !default;
-$gray-100: #f8f9fa !default;
+$gray-100: #e7e7e7 !default; // #f8f9fa
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
 $gray-400: #ced4da !default;
@@ -34,13 +34,13 @@ $grays: map-merge((
   "900": $gray-900
 ), $grays);
 
-$blue:    #007bff !default;
+$blue:    #229ac8 !default; // #007bff
 $indigo:  #6610f2 !default;
 $purple:  #6f42c1 !default;
 $pink:    #e83e8c !default;
-$red:     #dc3545 !default;
+$red:     #da4f49 !default; // #dc3545
 $orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
+$yellow:  #faa732 !default; // #ffc107
 $green:   #28a745 !default;
 $teal:    #20c997 !default;
 $cyan:    #17a2b8 !default;
diff --git a/upload/catalog/view/theme/default/stylesheet/stylesheet.css b/upload/catalog/view/theme/default/stylesheet/stylesheet.css
index 95333871878..8fc492f7de7 100644
--- a/upload/catalog/view/theme/default/stylesheet/stylesheet.css
+++ b/upload/catalog/view/theme/default/stylesheet/stylesheet.css
@@ -364,34 +364,31 @@ div.required .col-form-label:before {
   .btn.active {
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }
 
-.btn-default {
+.btn-light {
   color: #777;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   background-color: #e7e7e7;
   background-image: linear-gradient(to bottom, #eee, #ddd);
   background-repeat: repeat-x;
   border-color: #ddd #ddd #b3b3b3 #b7b7b7; }
-  .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .btn-default.disabled, .btn-default[disabled] {
+  .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active, .btn-light.disabled, .btn-light[disabled] {
     color: #333;
     background-color: #e6e6e6;
     border-color: #adadad;
-    background-position: 0 -15px; }
+    background-position: 0; }
 
 .btn-primary {
   color: #fff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #229ac8;
   background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
   background-repeat: repeat-x;
   border-color: #1f90bb #1f90bb #145e7a; }
   .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
-    background-color: #1f90bb;
-    background-position: 0 -15px; }
+    background-position: 0; }
 
 .btn-warning {
   color: #fff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #faa732;
   background-image: linear-gradient(to bottom, #fbb450, #f89406);
   background-repeat: repeat-x;
   border-color: #f89406 #f89406 #ad6704; }
@@ -401,7 +398,6 @@ div.required .col-form-label:before {
 .btn-danger {
   color: #fff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #da4f49;
   background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
   background-repeat: repeat-x;
   border-color: #bd362f #bd362f #802420; }
@@ -411,7 +407,6 @@ div.required .col-form-label:before {
 .btn-success {
   color: #fff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #5bb75b;
   background-image: linear-gradient(to bottom, #62c462, #51a351);
   background-repeat: repeat-x;
   border-color: #51a351 #51a351 #387038; }
@@ -421,7 +416,6 @@ div.required .col-form-label:before {
 .btn-info {
   color: #fff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #df5c39;
   background-image: linear-gradient(to bottom, #e06342, #dc512c);
   background-repeat: repeat-x;
   border-color: #dc512c #dc512c #a2371a; }
diff --git a/upload/catalog/view/theme/default/template/account/address_form.twig b/upload/catalog/view/theme/default/template/account/address_form.twig
index 475bb00731f..7afcb476ab4 100644
--- a/upload/catalog/view/theme/default/template/account/address_form.twig
+++ b/upload/catalog/view/theme/default/template/account/address_form.twig
@@ -201,7 +201,7 @@
           <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
             <label class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
             <div class="col-sm-10">
-              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
               <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if address_custom_field[custom_field.custom_field_id] %}  {{ address_custom_field[custom_field.custom_field_id] }} {% endif %}" />
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -215,7 +215,7 @@
               <div class="input-group date">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -229,7 +229,7 @@
               <div class="input-group time">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -243,7 +243,7 @@
               <div class="input-group datetime">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -281,7 +281,7 @@
           </div>
         </fieldset>
         <div class="buttons clearfix">
-          <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+          <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
           <div class="float-right">
             <input type="submit" value="{{ button_continue }}" class="btn btn-primary" />
           </div>
diff --git a/upload/catalog/view/theme/default/template/account/address_list.twig b/upload/catalog/view/theme/default/template/account/address_list.twig
index d144d218091..6036617428f 100644
--- a/upload/catalog/view/theme/default/template/account/address_list.twig
+++ b/upload/catalog/view/theme/default/template/account/address_list.twig
@@ -40,7 +40,7 @@
       </div>
       {% endif %}
       <div class="buttons clearfix">
-        <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+        <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
         <div class="float-right"><a href="{{ add }}" class="btn btn-primary">{{ button_new_address }}</a></div>
       </div>
       {{ content_bottom }}</div>
diff --git a/upload/catalog/view/theme/default/template/account/affiliate.twig b/upload/catalog/view/theme/default/template/account/affiliate.twig
index 5f80ac67727..0bdf5093601 100644
--- a/upload/catalog/view/theme/default/template/account/affiliate.twig
+++ b/upload/catalog/view/theme/default/template/account/affiliate.twig
@@ -225,7 +225,7 @@
           <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
             <label class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
             <div class="col-sm-10">
-              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
               <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_custom_field[custom_field.custom_field_id] }} {% endif %}" />
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -240,7 +240,7 @@
               <div class="input-group date">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -255,7 +255,7 @@
               <div class="input-group time">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -270,7 +270,7 @@
               <div class="input-group datetime">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
diff --git a/upload/catalog/view/theme/default/template/account/edit.twig b/upload/catalog/view/theme/default/template/account/edit.twig
index edeaee4e173..c76f2b94471 100644
--- a/upload/catalog/view/theme/default/template/account/edit.twig
+++ b/upload/catalog/view/theme/default/template/account/edit.twig
@@ -154,7 +154,7 @@
           <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
             <label class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
             <div class="col-sm-10">
-              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
               <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if account_custom_field[custom_field.custom_field_id] %}{{ account_custom_field[custom_field.custom_field_id] }} {% endif %}" />
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -169,7 +169,7 @@
               <div class="input-group date">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if account_custom_field[custom_field.custom_field_id] %}{{ account_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -184,7 +184,7 @@
               <div class="input-group time">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if account_custom_field[custom_field.custom_field_id] %}{{ account_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -199,7 +199,7 @@
               <div class="input-group datetime">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if account_custom_field[custom_field.custom_field_id] %}{{ account_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -210,7 +210,7 @@
           {% endfor %}
         </fieldset>
         <div class="buttons clearfix">
-          <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+          <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
           <div class="float-right">
             <input type="submit" value="{{ button_continue }}" class="btn btn-primary" />
           </div>
diff --git a/upload/catalog/view/theme/default/template/account/forgotten.twig b/upload/catalog/view/theme/default/template/account/forgotten.twig
index 44d4b5d8dab..fa646c563b4 100644
--- a/upload/catalog/view/theme/default/template/account/forgotten.twig
+++ b/upload/catalog/view/theme/default/template/account/forgotten.twig
@@ -30,7 +30,7 @@
           </div>
         </fieldset>
         <div class="buttons clearfix">
-          <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+          <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
           <div class="float-right">
             <input type="submit" value="{{ button_continue }}" class="btn btn-primary" />
           </div>
diff --git a/upload/catalog/view/theme/default/template/account/newsletter.twig b/upload/catalog/view/theme/default/template/account/newsletter.twig
index d9993aacdb3..ce95d54eb2d 100644
--- a/upload/catalog/view/theme/default/template/account/newsletter.twig
+++ b/upload/catalog/view/theme/default/template/account/newsletter.twig
@@ -55,7 +55,7 @@
               </div>
             </div>
             <div class="buttons clearfix">
-              <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+              <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
               <div class="float-right">
                 <input type="submit" value="{{ button_continue }}" class="btn btn-primary" />
               </div>
diff --git a/upload/catalog/view/theme/default/template/account/password.twig b/upload/catalog/view/theme/default/template/account/password.twig
index 95950aa47f0..063a87a9db5 100644
--- a/upload/catalog/view/theme/default/template/account/password.twig
+++ b/upload/catalog/view/theme/default/template/account/password.twig
@@ -38,7 +38,7 @@
           </div>
         </fieldset>
         <div class="buttons clearfix">
-          <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+          <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
           <div class="float-right">
             <input type="submit" value="{{ button_continue }}" class="btn btn-primary" />
           </div>
diff --git a/upload/catalog/view/theme/default/template/account/register.twig b/upload/catalog/view/theme/default/template/account/register.twig
index 7313b293562..ca8b708d727 100644
--- a/upload/catalog/view/theme/default/template/account/register.twig
+++ b/upload/catalog/view/theme/default/template/account/register.twig
@@ -185,7 +185,7 @@
           <div id="custom-field{{ custom_field.custom_field_id }}" class="form-group row custom-field" data-sort="{{ custom_field.sort_order }}">
             <label class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
             <div class="col-sm-10">
-              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
               <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}  {{ register_custom_field[custom_field.custom_field_id] }} {% endif %}" />
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -199,7 +199,7 @@
               <div class="input-group date">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -213,7 +213,7 @@
               <div class="input-group time">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -227,7 +227,7 @@
               <div class="input-group datetime">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
diff --git a/upload/catalog/view/theme/default/template/account/reset.twig b/upload/catalog/view/theme/default/template/account/reset.twig
index f17334661e1..0021d26f735 100644
--- a/upload/catalog/view/theme/default/template/account/reset.twig
+++ b/upload/catalog/view/theme/default/template/account/reset.twig
@@ -36,7 +36,7 @@
           </div>
         </fieldset>
         <div class="buttons clearfix">
-          <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+          <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
           <div class="float-right">
             <button type="submit" class="btn btn-primary">{{ button_continue }}</button>
           </div>
diff --git a/upload/catalog/view/theme/default/template/account/return_form.twig b/upload/catalog/view/theme/default/template/account/return_form.twig
index ac6ee871988..698f1e64702 100644
--- a/upload/catalog/view/theme/default/template/account/return_form.twig
+++ b/upload/catalog/view/theme/default/template/account/return_form.twig
@@ -68,7 +68,7 @@
               <div class="input-group date">
                 <input type="text" name="date_ordered" value="{{ date_ordered }}" placeholder="{{ entry_date_ordered }}" data-date-format="YYYY-MM-DD" id="input-date-ordered" class="form-control" />
                 <div class="input-group-append">
-                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                  <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </div>
 
               </div>
@@ -164,7 +164,7 @@
         </div>
         {% else %}
         <div class="buttons clearfix">
-          <div class="float-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+          <div class="float-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
           <div class="float-right">
             <input type="submit" value="{{ button_submit }}" class="btn btn-primary" />
           </div>
diff --git a/upload/catalog/view/theme/default/template/affiliate/register.twig b/upload/catalog/view/theme/default/template/affiliate/register.twig
index a5adf55a097..3ab6deae7fd 100644
--- a/upload/catalog/view/theme/default/template/affiliate/register.twig
+++ b/upload/catalog/view/theme/default/template/affiliate/register.twig
@@ -193,7 +193,7 @@
           <div id="custom-field{{ custom_field.custom_field_id }}" class="form-group row custom-field" data-sort="{{ custom_field.sort_order }}">
             <label class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
             <div class="col-sm-10">
-              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+              <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
               <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}  {{ register_custom_field[custom_field.custom_field_id] }} {% endif %}" />
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -207,7 +207,7 @@
               <div class="input-group date">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -221,7 +221,7 @@
               <div class="input-group time">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -235,7 +235,7 @@
               <div class="input-group datetime">
                 <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                 <span class="input-group-btn">
-                <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </span></div>
               {% if error_custom_field[custom_field.custom_field_id] %}
               <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -471,7 +471,7 @@
             <div id="custom-field{{ custom_field.custom_field_id }}" class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
               <label class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
               <div class="col-sm-10">
-                <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+                <button type="button" id="button-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
                 <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}  {{ register_custom_field[custom_field.custom_field_id] }} {% endif %}" />
                 {% if error_custom_field[custom_field.custom_field_id] %}
                 <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -485,7 +485,7 @@
                 <div class="input-group date">
                   <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                   <span class="input-group-btn">
-                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                  <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                   </span></div>
                 {% if error_custom_field[custom_field.custom_field_id] %}
                 <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -499,7 +499,7 @@
                 <div class="input-group time">
                   <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                   <span class="input-group-btn">
-                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                  <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                   </span></div>
                 {% if error_custom_field[custom_field.custom_field_id] %}
                 <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
@@ -513,7 +513,7 @@
                 <div class="input-group datetime">
                   <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if register_custom_field[custom_field.custom_field_id] %}{{ register_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
                   <span class="input-group-btn">
-                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                  <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                   </span></div>
                 {% if error_custom_field[custom_field.custom_field_id] %}
                 <div class="text-danger">{{ error_custom_field[custom_field.custom_field_id] }}</div>
diff --git a/upload/catalog/view/theme/default/template/checkout/cart.twig b/upload/catalog/view/theme/default/template/checkout/cart.twig
index 1ef0bd02054..decd2e16d35 100644
--- a/upload/catalog/view/theme/default/template/checkout/cart.twig
+++ b/upload/catalog/view/theme/default/template/checkout/cart.twig
@@ -111,7 +111,7 @@
         </div>
       </div>
       <div class="buttons clearfix">
-        <div class="pull-left"><a href="{{ continue }}" class="btn btn-default">{{ button_shopping }}</a></div>
+        <div class="pull-left"><a href="{{ continue }}" class="btn btn-light">{{ button_shopping }}</a></div>
         <div class="float-right"><a href="{{ checkout }}" class="btn btn-primary">{{ button_checkout }}</a></div>
       </div>
       {{ content_bottom }}</div>
diff --git a/upload/catalog/view/theme/default/template/checkout/guest.twig b/upload/catalog/view/theme/default/template/checkout/guest.twig
index 8831059655e..8c404965acb 100644
--- a/upload/catalog/view/theme/default/template/checkout/guest.twig
+++ b/upload/catalog/view/theme/default/template/checkout/guest.twig
@@ -110,7 +110,7 @@
       <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
         <label class="col-form-label">{{ custom_field.name }}</label>
         <br />
-        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
         <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if guest_custom_field[custom_field.custom_field_id] %} {{ guest_custom_field[custom_field.custom_field_id] }} {% endif %}" id="input-payment-custom-field{{ custom_field.custom_field_id }}" />
       </div>
       {% endif %}
@@ -120,7 +120,7 @@
         <div class="input-group date">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if guest_custom_field[custom_field.custom_field_id] %} {{ guest_custom_field[custom_field.custom_field_id] }} {% else %} {{ custom_field.value }} {% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -130,7 +130,7 @@
         <div class="input-group time">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if guest_custom_field[custom_field.custom_field_id] %} {{ guest_custom_field[custom_field.custom_field_id] }} {% else %} {{ custom_field.value }} {% endif %}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -140,7 +140,7 @@
         <div class="input-group datetime">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if guest_custom_field[custom_field.custom_field_id] %} {{ guest_custom_field[custom_field.custom_field_id] }} {% else %} {{ custom_field.value }} {% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -276,7 +276,7 @@
       <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
         <label class="col-form-label">{{ custom_field.name }}</label>
         <br />
-        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
         <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if guest_custom_field[custom_field.custom_field_id] %} {{ guest_custom_field[custom_field.custom_field_id] }} {% endif %}" id="input-payment-custom-field{{ custom_field.custom_field_id }}" />
       </div>
       {% endif %}
@@ -286,7 +286,7 @@
         <div class="input-group date">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if guest_custom_field[custom_field.custom_field_id] %} {{ guest_custom_field[custom_field.custom_field_id] }} {% else %} {{ custom_field.value }} {% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -296,7 +296,7 @@
         <div class="input-group time">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if guest_custom_field[custom_field.custom_field_id] %} {{ guest_custom_field[custom_field.custom_field_id] }} {% else %} {{ custom_field.value }} {% endif %}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -306,7 +306,7 @@
         <div class="input-group datetime">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if guest_custom_field[custom_field.custom_field_id] %} {{ guest_custom_field[custom_field.custom_field_id] }} {% else %} {{ custom_field.value }} {% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
diff --git a/upload/catalog/view/theme/default/template/checkout/guest_shipping.twig b/upload/catalog/view/theme/default/template/checkout/guest_shipping.twig
index a323098d19d..37c0aa5f502 100644
--- a/upload/catalog/view/theme/default/template/checkout/guest_shipping.twig
+++ b/upload/catalog/view/theme/default/template/checkout/guest_shipping.twig
@@ -150,7 +150,7 @@
   <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
     <label class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
     <div class="col-sm-10">
-      <button type="button" id="button-shipping-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+      <button type="button" id="button-shipping-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
       <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if address_custom_field[custom_field.custom_field_id] %}  {{ address_custom_field[custom_field.custom_field_id] }} {% endif %}" />
     </div>
   </div>
@@ -162,7 +162,7 @@
       <div class="input-group date">
         <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-shipping-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
         <span class="input-group-btn">
-        <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+        <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
         </span></div>
     </div>
   </div>
@@ -174,7 +174,7 @@
       <div class="input-group time">
         <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-shipping-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
         <span class="input-group-btn">
-        <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+        <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
         </span></div>
     </div>
   </div>
@@ -186,7 +186,7 @@
       <div class="input-group datetime">
         <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-shipping-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
         <span class="input-group-btn">
-        <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+        <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
         </span></div>
     </div>
   </div>
diff --git a/upload/catalog/view/theme/default/template/checkout/payment_address.twig b/upload/catalog/view/theme/default/template/checkout/payment_address.twig
index d64cef72b20..364f6b6c1ee 100644
--- a/upload/catalog/view/theme/default/template/checkout/payment_address.twig
+++ b/upload/catalog/view/theme/default/template/checkout/payment_address.twig
@@ -158,7 +158,7 @@
     <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
       <label class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
       <div class="col-sm-10">
-        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
         <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="" id="input-payment-custom-field{{ custom_field.custom_field_id }}" />
       </div>
     </div>
@@ -170,7 +170,7 @@
         <div class="input-group date">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
     </div>
@@ -182,7 +182,7 @@
         <div class="input-group time">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
     </div>
@@ -194,7 +194,7 @@
         <div class="input-group datetime">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
     </div>
diff --git a/upload/catalog/view/theme/default/template/checkout/register.twig b/upload/catalog/view/theme/default/template/checkout/register.twig
index ff840cb665d..0d4ff47f44f 100644
--- a/upload/catalog/view/theme/default/template/checkout/register.twig
+++ b/upload/catalog/view/theme/default/template/checkout/register.twig
@@ -107,7 +107,7 @@
       <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
         <label class="col-form-label">{{ custom_field.name }}</label>
         <br />
-        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
         <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="" id="input-payment-custom-field{{ custom_field.custom_field_id }}" />
       </div>
       {% endif %}
@@ -118,7 +118,7 @@
         <div class="input-group date">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -129,7 +129,7 @@
         <div class="input-group time">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -140,7 +140,7 @@
         <div class="input-group datetime">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -292,7 +292,7 @@
       <div id="payment-custom-field{{ custom_field.custom_field_id }}" class="form-group custom-field" data-sort="{{ custom_field.sort_order }}">
         <label class="col-form-label">{{ custom_field.name }}</label>
         <br />
-        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+        <button type="button" id="button-payment-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
         <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="" id="input-payment-custom-field{{ custom_field.custom_field_id }}" />
       </div>
       {% endif %}
@@ -303,7 +303,7 @@
         <div class="input-group date">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -314,7 +314,7 @@
         <div class="input-group time">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
@@ -325,7 +325,7 @@
         <div class="input-group datetime">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-payment-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
       {% endif %}
diff --git a/upload/catalog/view/theme/default/template/checkout/shipping_address.twig b/upload/catalog/view/theme/default/template/checkout/shipping_address.twig
index e44fed40d37..41dda50cb33 100644
--- a/upload/catalog/view/theme/default/template/checkout/shipping_address.twig
+++ b/upload/catalog/view/theme/default/template/checkout/shipping_address.twig
@@ -160,7 +160,7 @@
     <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
       <label class="col-sm-2 col-form-label">{{ custom_field.name }}</label>
       <div class="col-sm-10">
-        <button type="button" id="button-shipping-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+        <button type="button" id="button-shipping-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light"><i class="fa fa-upload"></i> {{ button_upload }}</button>
         <input type="hidden" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="" id="input-shipping-custom-field{{ custom_field.custom_field_id }}" />
       </div>
     </div>
@@ -172,7 +172,7 @@
         <div class="input-group date">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD" id="input-shipping-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
     </div>
@@ -184,7 +184,7 @@
         <div class="input-group time">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-shipping-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
     </div>
@@ -196,7 +196,7 @@
         <div class="input-group datetime">
           <input type="text" name="custom_field[{{ custom_field.location }}][{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-shipping-custom-field{{ custom_field.custom_field_id }}" class="form-control" />
           <span class="input-group-btn">
-          <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+          <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
           </span></div>
       </div>
     </div>
diff --git a/upload/catalog/view/theme/default/template/common/search.twig b/upload/catalog/view/theme/default/template/common/search.twig
index 91ba923927d..fb27a1a6556 100644
--- a/upload/catalog/view/theme/default/template/common/search.twig
+++ b/upload/catalog/view/theme/default/template/common/search.twig
@@ -2,6 +2,6 @@
 <div id="search" class="input-group mb-3">
   <input type="text" name="search" value="{{ search }}" placeholder="{{ text_search }}" class="form-control" aria-label="search">
   <div class="input-group-append">
-    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
+    <button type="button" class="btn btn-light btn-lg"><i class="fa fa-search"></i></button>
   </div>
 </div>
diff --git a/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_direct_form.twig b/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_direct_form.twig
index ffb84af5a53..53e11913f42 100644
--- a/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_direct_form.twig
+++ b/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_direct_form.twig
@@ -65,7 +65,7 @@
             </div>
           </div>
           <div class="buttons clearfix">
-            <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+            <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
             <div class="float-right">
               <input type="submit" value="{{ button_add_card }}" class="btn btn-primary" />
             </div>
diff --git a/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_direct_list.twig b/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_direct_list.twig
index 7da8af353b1..6b9484310a5 100644
--- a/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_direct_list.twig
+++ b/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_direct_list.twig
@@ -55,7 +55,7 @@
         <div class="col-sm-6 text-right">{{ results }}</div>
       </div>
       <div class="buttons clearfix">
-        <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+        <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
         <div class="float-right"><a href="{{ add }}" class="btn btn-primary">{{ button_new_card }}</a></div>
       </div>
       {{ content_bottom }}</div>
diff --git a/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_server_list.twig b/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_server_list.twig
index 629734a9447..dddad80568c 100644
--- a/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_server_list.twig
+++ b/upload/catalog/view/theme/default/template/extension/credit_card/sagepay_server_list.twig
@@ -54,7 +54,7 @@
         <div class="col-sm-6 text-right">{{ results }}</div>
       </div>
       <div class="buttons clearfix">
-        <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
+        <div class="pull-left"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
         <div class="float-right">
           <input type="button" value="{{ button_new_card }}" id="button-add-card" data-loading-text="{{ text_loading }}" class="btn btn-primary" />
         </div>
diff --git a/upload/catalog/view/theme/default/template/extension/credit_card/squareup.twig b/upload/catalog/view/theme/default/template/extension/credit_card/squareup.twig
index 0a6df545d78..08f8f75423a 100644
--- a/upload/catalog/view/theme/default/template/extension/credit_card/squareup.twig
+++ b/upload/catalog/view/theme/default/template/extension/credit_card/squareup.twig
@@ -40,7 +40,7 @@
         {% endif %}
 
         <div class="buttons">
-            <a class="btn btn-default" href="{{ back }}">{{ text_back }}</a>
+            <a class="btn btn-light" href="{{ back }}">{{ text_back }}</a>
         </div>
       {{ content_bottom }}</div>
     {{ column_right }}</div>
diff --git a/upload/catalog/view/theme/default/template/extension/total/shipping.twig b/upload/catalog/view/theme/default/template/extension/total/shipping.twig
index e52e8d60ef3..bc3ac6eb673 100644
--- a/upload/catalog/view/theme/default/template/extension/total/shipping.twig
+++ b/upload/catalog/view/theme/default/template/extension/total/shipping.twig
@@ -115,7 +115,7 @@
 
                 html += '      </div>';
                 html += '      <div class="modal-footer">';
-                html += '        <button type="button" class="btn btn-default" data-dismiss="modal">{{ button_cancel }}</button>';
+                html += '        <button type="button" class="btn btn-light" data-dismiss="modal">{{ button_cancel }}</button>';
 
                 {% if shipping_method %}
                 html += '        <input type="button" value="{{ button_shipping }}" id="button-shipping" data-loading-text="{{ text_loading }}" class="btn btn-primary" />';
diff --git a/upload/catalog/view/theme/default/template/product/category.twig b/upload/catalog/view/theme/default/template/product/category.twig
index 8707f153018..4377c954652 100644
--- a/upload/catalog/view/theme/default/template/product/category.twig
+++ b/upload/catalog/view/theme/default/template/product/category.twig
@@ -54,8 +54,8 @@
       <div id="display-control" class="row">
         <div class="col-md-1 d-none d-sm-none d-md-block">
           <div class="btn-group btn-group-sm">
-            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
-            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
+            <button type="button" id="list-view" class="btn btn-light" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
+            <button type="button" id="grid-view" class="btn btn-light" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
           </div>
         </div>
         <div class="col-md-3">
diff --git a/upload/catalog/view/theme/default/template/product/compare.twig b/upload/catalog/view/theme/default/template/product/compare.twig
index 5991cd6f0bc..7f4db9a55b7 100644
--- a/upload/catalog/view/theme/default/template/product/compare.twig
+++ b/upload/catalog/view/theme/default/template/product/compare.twig
@@ -121,7 +121,7 @@
       {% else %}
       <p>{{ text_empty }}</p>
       <div class="buttons">
-        <div class="float-right"><a href="{{ continue }}" class="btn btn-default">{{ button_continue }}</a></div>
+        <div class="float-right"><a href="{{ continue }}" class="btn btn-light">{{ button_continue }}</a></div>
       </div>
       {% endif %}
       {{ content_bottom }}</div>
diff --git a/upload/catalog/view/theme/default/template/product/manufacturer_info.twig b/upload/catalog/view/theme/default/template/product/manufacturer_info.twig
index 2e0f72094e6..07cfcba7f26 100644
--- a/upload/catalog/view/theme/default/template/product/manufacturer_info.twig
+++ b/upload/catalog/view/theme/default/template/product/manufacturer_info.twig
@@ -21,8 +21,8 @@
       <div id="display-control" class="row">
         <div class="col-md-1 d-none d-sm-none d-md-block">
           <div class="btn-group btn-group-sm">
-            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
-            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
+            <button type="button" id="list-view" class="btn btn-light" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
+            <button type="button" id="grid-view" class="btn btn-light" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
           </div>
         </div>
         <div class="col-md-3">
diff --git a/upload/catalog/view/theme/default/template/product/product.twig b/upload/catalog/view/theme/default/template/product/product.twig
index 91f672e3129..945a0d2d485 100644
--- a/upload/catalog/view/theme/default/template/product/product.twig
+++ b/upload/catalog/view/theme/default/template/product/product.twig
@@ -131,8 +131,8 @@
         {% endif %}
         <div class="{{ class }}">
           <div class="btn-group">
-            <button type="button" data-toggle="tooltip" class="btn btn-default" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product_id }}');"><i class="fa fa-heart"></i></button>
-            <button type="button" data-toggle="tooltip" class="btn btn-default" title="{{ button_compare }}" onclick="compare.add('{{ product_id }}');"><i class="fa fa-exchange"></i></button>
+            <button type="button" data-toggle="tooltip" class="btn btn-light" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product_id }}');"><i class="fa fa-heart"></i></button>
+            <button type="button" data-toggle="tooltip" class="btn btn-light" title="{{ button_compare }}" onclick="compare.add('{{ product_id }}');"><i class="fa fa-exchange"></i></button>
           </div>
           <h1>{{ heading_title }}</h1>
           <ul class="list-unstyled">
@@ -238,7 +238,7 @@
             {% if option.type == 'file' %}
             <div class="form-group{% if option.required %} required {% endif %}">
               <label class="col-form-label">{{ option.name }}</label>
-              <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
+              <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-light btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
               <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}" />
             </div>
             {% endif %}
@@ -248,7 +248,7 @@
               <div class="input-group date">
                 <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" id="input-option{{ option.product_option_id }}" class="form-control" />
                 <div class="input-group-append">
-                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
+                <button class="btn btn-light" type="button"><i class="fa fa-calendar"></i></button>
                 </div>
               </div>
             </div>
@@ -259,7 +259,7 @@
               <div class="input-group datetime">
                 <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
                 <div class="input-group-append">
-                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                  <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </div>
               </div>
             </div>
@@ -270,7 +270,7 @@
               <div class="input-group time">
                 <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
                 <div class="input-group-append">
-                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
+                  <button type="button" class="btn btn-light"><i class="fa fa-calendar"></i></button>
                 </div>
               </div>
             </div>
diff --git a/upload/catalog/view/theme/default/template/product/search.twig b/upload/catalog/view/theme/default/template/product/search.twig
index eaacdbb8ede..82a8b29d038 100644
--- a/upload/catalog/view/theme/default/template/product/search.twig
+++ b/upload/catalog/view/theme/default/template/product/search.twig
@@ -79,8 +79,8 @@
       <div id="display-control" class="row">
         <div class="col-md-1 d-none d-sm-none d-md-block">
           <div class="btn-group btn-group-sm">
-            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
-            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
+            <button type="button" id="list-view" class="btn btn-light" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
+            <button type="button" id="grid-view" class="btn btn-light" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
           </div>
         </div>
         <div class="col-md-3">
diff --git a/upload/catalog/view/theme/default/template/product/special.twig b/upload/catalog/view/theme/default/template/product/special.twig
index c2a595d8f5b..d4f77f37ac4 100644
--- a/upload/catalog/view/theme/default/template/product/special.twig
+++ b/upload/catalog/view/theme/default/template/product/special.twig
@@ -19,8 +19,8 @@
       <div id="display-control" class="row">
         <div class="col-md-1 d-none d-sm-none d-md-block">
           <div class="btn-group btn-group-sm">
-            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
-            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
+            <button type="button" id="list-view" class="btn btn-light" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
+            <button type="button" id="grid-view" class="btn btn-light" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
           </div>
         </div>
         <div class="col-md-3">

From 0fa12908e06d0f186fe2ee52a47c46e03c963b83 Mon Sep 17 00:00:00 2001
From: Jesse <jesse@opencart.com>
Date: Thu, 29 Mar 2018 14:52:09 +0800
Subject: [PATCH 2/3] Seo Url %2F fixed '/'

---
 upload/catalog/controller/startup/seo_url.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/upload/catalog/controller/startup/seo_url.php b/upload/catalog/controller/startup/seo_url.php
index 921370ec393..613cdc80529 100644
--- a/upload/catalog/controller/startup/seo_url.php
+++ b/upload/catalog/controller/startup/seo_url.php
@@ -85,7 +85,7 @@ public function rewrite($link) {
 				}
 
 				if ($query) {
-					$query = '?' . str_replace('&', '&amp;', trim($query, '&'));
+					$query = '?' . str_replace('&', '&amp;', trim(str_replace('%2F', '/', $query), '&'));
 				}
 			}
 
@@ -94,4 +94,4 @@ public function rewrite($link) {
 			return $link;
 		}
 	}
-}
\ No newline at end of file
+}

From 46a167e65ef443c971a46e5e9b8cb6c960705e4a Mon Sep 17 00:00:00 2001
From: Jesse <jesse@opencart.com>
Date: Mon, 9 Apr 2018 10:09:42 +0800
Subject: [PATCH 3/3] re-upload the updated

---
 upload/admin/view/stylesheet/bootstrap.css    | 149 +++++++++---------
 .../view/stylesheet/scss/_breadcrumb.scss     |   2 +-
 .../view/stylesheet/scss/_variables.scss      |   2 +-
 upload/admin/view/stylesheet/stylesheet.css   |  36 +++++
 4 files changed, 112 insertions(+), 77 deletions(-)

diff --git a/upload/admin/view/stylesheet/bootstrap.css b/upload/admin/view/stylesheet/bootstrap.css
index ef2070dbc0d..bc1c7a9f4de 100644
--- a/upload/admin/view/stylesheet/bootstrap.css
+++ b/upload/admin/view/stylesheet/bootstrap.css
@@ -5,7 +5,7 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 :root {
-  --blue: #007bff;
+  --blue: #1e91cf;
   --indigo: #6610f2;
   --purple: #6f42c1;
   --pink: #e83e8c;
@@ -18,7 +18,7 @@
   --white: #fff;
   --gray: #6c757d;
   --gray-dark: #343a40;
-  --primary: #007bff;
+  --primary: #1e91cf;
   --secondary: #6c757d;
   --success: #28a745;
   --info: #17a2b8;
@@ -126,12 +126,12 @@ sup {
   top: -0.5em; }
 
 a {
-  color: #007bff;
+  color: #1e91cf;
   text-decoration: none;
   background-color: transparent;
   -webkit-text-decoration-skip: objects; }
   a:hover {
-    color: #0056b3;
+    color: #14628c;
     text-decoration: underline; }
 
 a:not([href]):not([tabindex]) {
@@ -1139,11 +1139,11 @@ pre {
 .table-hover tbody tr:hover {
   background-color: rgba(0, 0, 0, .075); }
   .table-primary, .table-primary > th, .table-primary > td {
-    background-color: #b8daff; }
+    background-color: #c0e0f2; }
   .table-hover .table-primary:hover {
-    background-color: #9ecdff; }
+    background-color: #abd6ed; }
     .table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th {
-      background-color: #9ecdff; }
+      background-color: #abd6ed; }
   .table-secondary, .table-secondary > th, .table-secondary > td {
     background-color: #d6d8db; }
   .table-hover .table-secondary:hover {
@@ -1279,9 +1279,9 @@ pre {
   .form-control:focus {
     color: #495057;
     background-color: #fff;
-    border-color: #80bdff;
+    border-color: #80c7ed;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    box-shadow: 0 0 0 0.2rem rgba(30, 145, 207, .25); }
   .form-control::placeholder {
     color: #6c757d;
     opacity: 1; }
@@ -1567,7 +1567,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
     text-decoration: none; }
   .btn:focus, .btn.focus {
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    box-shadow: 0 0 0 0.2rem rgba(30, 145, 207, .25); }
   .btn.disabled, .btn:disabled {
     opacity: 0.65; }
   .btn:not(:disabled):not(.disabled) {
@@ -1578,24 +1578,24 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
     pointer-events: none; }
   .btn-primary {
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #1e91cf;
+    border-color: #1e91cf; }
   .btn-primary:hover {
     color: #fff;
-    background-color: #0069d9;
-    border-color: #0062cc; }
+    background-color: #197aae;
+    border-color: #1872a2; }
   .btn-primary:focus, .btn-primary.focus {
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(30, 145, 207, .5); }
   .btn-primary.disabled, .btn-primary:disabled {
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #1e91cf;
+    border-color: #1e91cf; }
   .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
     color: #fff;
-    background-color: #0062cc;
-    border-color: #005cbf; }
+    background-color: #1872a2;
+    border-color: #166a97; }
   .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(30, 145, 207, .5); }
   .btn-secondary {
     color: #fff;
     background-color: #6c757d;
@@ -1737,25 +1737,25 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus {
     box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, .5); }
   .btn-outline-primary {
-    color: #007bff;
+    color: #1e91cf;
     background-color: transparent;
     background-image: none;
-    border-color: #007bff; }
+    border-color: #1e91cf; }
   .btn-outline-primary:hover {
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #1e91cf;
+    border-color: #1e91cf; }
   .btn-outline-primary:focus, .btn-outline-primary.focus {
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(30, 145, 207, .5); }
   .btn-outline-primary.disabled, .btn-outline-primary:disabled {
-    color: #007bff;
+    color: #1e91cf;
     background-color: transparent; }
   .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #1e91cf;
+    border-color: #1e91cf; }
   .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5); }
+    box-shadow: 0 0 0 0.2rem rgba(30, 145, 207, .5); }
   .btn-outline-secondary {
     color: #6c757d;
     background-color: transparent;
@@ -1899,10 +1899,10 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
 
 .btn-link {
   font-weight: 400;
-  color: #007bff;
+  color: #1e91cf;
   background-color: transparent; }
   .btn-link:hover {
-    color: #0056b3;
+    color: #14628c;
     text-decoration: underline;
     background-color: transparent;
     border-color: transparent; }
@@ -2079,7 +2079,7 @@ tbody.collapse.show {
   .dropdown-item.active, .dropdown-item:active {
     color: #fff;
     text-decoration: none;
-    background-color: #007bff; }
+    background-color: #1e91cf; }
   .dropdown-item.disabled, .dropdown-item:disabled {
     color: #6c757d;
     background-color: transparent; }
@@ -2248,12 +2248,12 @@ tbody.collapse.show {
   opacity: 0; }
   .custom-control-input:checked ~ .custom-control-label::before {
     color: #fff;
-    background-color: #007bff; }
+    background-color: #1e91cf; }
   .custom-control-input:focus ~ .custom-control-label::before {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(30, 145, 207, .25); }
   .custom-control-input:active ~ .custom-control-label::before {
     color: #fff;
-    background-color: #b3d7ff; }
+    background-color: #acdaf3; }
   .custom-control-input:disabled ~ .custom-control-label {
     color: #6c757d; }
   .custom-control-input:disabled ~ .custom-control-label::before {
@@ -2287,26 +2287,26 @@ tbody.collapse.show {
 .custom-checkbox .custom-control-label::before {
   border-radius: 0.25rem; }
   .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
-    background-color: #007bff; }
+    background-color: #1e91cf; }
   .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); }
   .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
-    background-color: #007bff; }
+    background-color: #1e91cf; }
   .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E"); }
   .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
-    background-color: rgba(0, 123, 255, .5); }
+    background-color: rgba(30, 145, 207, .5); }
   .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
-    background-color: rgba(0, 123, 255, .5); }
+    background-color: rgba(30, 145, 207, .5); }
 
 .custom-radio .custom-control-label::before {
   border-radius: 50%; }
   .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
-    background-color: #007bff; }
+    background-color: #1e91cf; }
   .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
   .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
-    background-color: rgba(0, 123, 255, .5); }
+    background-color: rgba(30, 145, 207, .5); }
 
 .custom-select {
   display: inline-block;
@@ -2322,9 +2322,9 @@ tbody.collapse.show {
   border-radius: 0.25rem;
   appearance: none; }
   .custom-select:focus {
-    border-color: #80bdff;
+    border-color: #80c7ed;
     outline: 0;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(128, 189, 255, .5); }
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(128, 199, 237, .5); }
   .custom-select:focus::-ms-value {
     color: #495057;
     background-color: #fff; }
@@ -2365,10 +2365,10 @@ tbody.collapse.show {
   margin: 0;
   opacity: 0; }
   .custom-file-input:focus ~ .custom-file-control {
-    border-color: #80bdff;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    border-color: #80c7ed;
+    box-shadow: 0 0 0 0.2rem rgba(30, 145, 207, .25); }
   .custom-file-input:focus ~ .custom-file-control::before {
-    border-color: #80bdff; }
+    border-color: #80c7ed; }
   .custom-file-input:lang(en) ~ .custom-file-label::after {
     content: "Browse"; }
 
@@ -2443,7 +2443,7 @@ tbody.collapse.show {
   border-radius: 0.25rem; }
   .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
     color: #fff;
-    background-color: #007bff; }
+    background-color: #1e91cf; }
 
 .nav-fill .nav-item {
   flex: 1 1 auto;
@@ -2884,8 +2884,7 @@ tbody.collapse.show {
   display: inline-block;
   padding-right: 0.5rem;
   padding-left: 0.5rem;
-  color: #6c757d;
-  content: "/"; }
+  color: #6c757d; }
   .breadcrumb-item + .breadcrumb-item:hover::before {
     text-decoration: underline; }
   .breadcrumb-item + .breadcrumb-item:hover::before {
@@ -2905,18 +2904,18 @@ tbody.collapse.show {
   padding: 0.5rem 0.75rem;
   margin-left: -1px;
   line-height: 1.25;
-  color: #007bff;
+  color: #1e91cf;
   background-color: #fff;
   border: 1px solid #dee2e6; }
   .page-link:hover {
-    color: #0056b3;
+    color: #14628c;
     text-decoration: none;
     background-color: #e9ecef;
     border-color: #dee2e6; }
   .page-link:focus {
     z-index: 2;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); }
+    box-shadow: 0 0 0 0.2rem rgba(30, 145, 207, .25); }
   .page-link:not(:disabled):not(.disabled) {
     cursor: pointer; }
 
@@ -2930,8 +2929,8 @@ tbody.collapse.show {
   .page-item.active .page-link {
     z-index: 1;
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #1e91cf;
+    border-color: #1e91cf; }
   .page-item.disabled .page-link {
     color: #6c757d;
     pointer-events: none;
@@ -2984,11 +2983,11 @@ tbody.collapse.show {
   border-radius: 10rem; }
   .badge-primary {
     color: #fff;
-    background-color: #007bff; }
+    background-color: #1e91cf; }
   .badge-primary[href]:hover, .badge-primary[href]:focus {
     color: #fff;
     text-decoration: none;
-    background-color: #0062cc; }
+    background-color: #1872a2; }
   .badge-secondary {
     color: #fff;
     background-color: #6c757d; }
@@ -3075,13 +3074,13 @@ tbody.collapse.show {
     padding: 0.75rem 1.25rem;
     color: inherit; }
   .alert-primary {
-    color: #004085;
-    background-color: #cce5ff;
-    border-color: #b8daff; }
+    color: #104b6c;
+    background-color: #d2e9f5;
+    border-color: #c0e0f2; }
   .alert-primary hr {
-    border-top-color: #9ecdff; }
+    border-top-color: #abd6ed; }
   .alert-primary .alert-link {
-    color: #002752; }
+    color: #092c3f; }
   .alert-secondary {
     color: #383d41;
     background-color: #e2e3e5;
@@ -3160,7 +3159,7 @@ tbody.collapse.show {
   justify-content: center;
   color: #fff;
   text-align: center;
-  background-color: #007bff;
+  background-color: #1e91cf;
   transition: width 0.6s ease; }
 
 .progress-bar-striped {
@@ -3218,8 +3217,8 @@ tbody.collapse.show {
   .list-group-item.active {
     z-index: 2;
     color: #fff;
-    background-color: #007bff;
-    border-color: #007bff; }
+    background-color: #1e91cf;
+    border-color: #1e91cf; }
 
 .list-group-flush .list-group-item {
   border-right: 0;
@@ -3230,15 +3229,15 @@ tbody.collapse.show {
   .list-group-flush:last-child .list-group-item:last-child {
     border-bottom: 0; }
   .list-group-item-primary {
-    color: #004085;
-    background-color: #b8daff; }
+    color: #104b6c;
+    background-color: #c0e0f2; }
   .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
-    color: #004085;
-    background-color: #9ecdff; }
+    color: #104b6c;
+    background-color: #abd6ed; }
   .list-group-item-primary.list-group-item-action.active {
     color: #fff;
-    background-color: #004085;
-    border-color: #004085; }
+    background-color: #104b6c;
+    border-color: #104b6c; }
   .list-group-item-secondary {
     color: #383d41;
     background-color: #d6d8db; }
@@ -3791,9 +3790,9 @@ button.close {
 .align-text-top {
   vertical-align: text-top !important; }
   .bg-primary {
-    background-color: #007bff !important; }
+    background-color: #1e91cf !important; }
   a.bg-primary:hover, button.bg-primary:hover, a.bg-primary:focus, button.bg-primary:focus {
-    background-color: #0062cc !important; }
+    background-color: #1872a2 !important; }
   .bg-secondary {
     background-color: #6c757d !important; }
   a.bg-secondary:hover, button.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:focus {
@@ -3859,7 +3858,7 @@ button.close {
 .border-left-0 {
   border-left: 0 !important; }
   .border-primary {
-    border-color: #007bff !important; }
+    border-color: #1e91cf !important; }
   .border-secondary {
     border-color: #6c757d !important; }
   .border-success {
@@ -5578,9 +5577,9 @@ button.close {
 .text-white {
   color: #fff !important; }
   .text-primary {
-    color: #007bff !important; }
+    color: #1e91cf !important; }
   a.text-primary:hover, a.text-primary:focus {
-    color: #0062cc !important; }
+    color: #1872a2 !important; }
   .text-secondary {
     color: #6c757d !important; }
   a.text-secondary:hover, a.text-secondary:focus {
diff --git a/upload/admin/view/stylesheet/scss/_breadcrumb.scss b/upload/admin/view/stylesheet/scss/_breadcrumb.scss
index 25b9d85a128..60708da7af4 100644
--- a/upload/admin/view/stylesheet/scss/_breadcrumb.scss
+++ b/upload/admin/view/stylesheet/scss/_breadcrumb.scss
@@ -15,7 +15,7 @@
     padding-right: $breadcrumb-item-padding;
     padding-left: $breadcrumb-item-padding;
     color: $breadcrumb-divider-color;
-    content: "#{$breadcrumb-divider}";
+    //content: "#{$breadcrumb-divider}";
   }
 
   // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
diff --git a/upload/admin/view/stylesheet/scss/_variables.scss b/upload/admin/view/stylesheet/scss/_variables.scss
index be580deb334..100898098b4 100644
--- a/upload/admin/view/stylesheet/scss/_variables.scss
+++ b/upload/admin/view/stylesheet/scss/_variables.scss
@@ -34,7 +34,7 @@ $grays: map-merge((
   "900": $gray-900
 ), $grays);
 
-$blue:    #007bff !default;
+$blue:    #1e91cf !default; //#007bff 
 $indigo:  #6610f2 !default;
 $purple:  #6f42c1 !default;
 $pink:    #e83e8c !default;
diff --git a/upload/admin/view/stylesheet/stylesheet.css b/upload/admin/view/stylesheet/stylesheet.css
index c4eb25c79da..e9b78794e7d 100644
--- a/upload/admin/view/stylesheet/stylesheet.css
+++ b/upload/admin/view/stylesheet/stylesheet.css
@@ -27,6 +27,7 @@ legend {
   margin-bottom: 20px;
 }
 
+
 .page-header {
     vertical-align: middle;
     margin: 20px 0 15px 0;
@@ -44,6 +45,41 @@ legend {
     text-shadow: 0 1px #fff;
 }
 
+.page-header nav {
+  display: contents;
+}
+.page-header nav .breadcrumb {
+  width: 50%;
+  display: inline-block;
+  background: none;
+  margin: 8px 0 19px 0;
+  padding: 0 10px;
+  border-radius: 0;
+}
+
+.page-header nav .breadcrumb li {
+  display: inline-block;
+}
+
+.breadcrumb li + li:before {
+    content: "\f105";
+    font-family: 'FontAwesome';
+    color: #BBBBBB;
+    padding: 0 5px;
+    font-size: 10px;
+}
+
+.breadcrumb li a {
+    color: #999999;
+    font-size: 14px;
+    padding: 0px;
+    margin: 0px;
+}
+
+.breadcrumb > li:last-child a {
+    color: #1e91cf;
+}
+
 a:hover, a:focus {
     text-decoration: none;
 }