From 40ec04f63497d09b3aeebf027b94f277a6f9b983 Mon Sep 17 00:00:00 2001
From: Raghavendra Kamath <raghu@raghukamath.com>
Date: Tue, 27 Feb 2018 19:25:40 +0530
Subject: [PATCH] Tweak some styles and change get-started page

---
 .../templates/service_provider.html           |    2 -
 foundation/public/css/base.css                |   63 -
 foundation/public/css/erpnext-org-theme.css   |   95 +-
 foundation/public/css/indicator.css           |   71 -
 foundation/public/css/report.min.css          | 2192 -----------------
 foundation/public/css/variables.css           |    0
 foundation/public/less/base.less              |   70 +-
 foundation/public/less/erpnext-org-theme.less | 1014 ++++----
 foundation/public/less/indicator.less         |   52 +-
 .../templates/includes/footer/footer.html     |    4 +-
 .../templates/includes/navbar/navbar.html     |    6 +-
 foundation/www/get-started.html               |    8 +-
 12 files changed, 681 insertions(+), 2896 deletions(-)
 delete mode 100644 foundation/public/css/base.css
 delete mode 100644 foundation/public/css/indicator.css
 delete mode 100644 foundation/public/css/report.min.css
 delete mode 100644 foundation/public/css/variables.css

diff --git a/foundation/erpnext_foundation/doctype/service_provider/templates/service_provider.html b/foundation/erpnext_foundation/doctype/service_provider/templates/service_provider.html
index 7090aee4..e312e5ce 100644
--- a/foundation/erpnext_foundation/doctype/service_provider/templates/service_provider.html
+++ b/foundation/erpnext_foundation/doctype/service_provider/templates/service_provider.html
@@ -1,7 +1,6 @@
 {% extends "templates/web.html" %}
 
 {% from "foundation/templates/includes/macros.html" import media %}
-
 {% block page_content %}
 <h1 class="media-heading">{{ title }}</h1>
 {% if membership_type %}
@@ -50,5 +49,4 @@
 <section>
 <p><a class='btn-primary btn' href="mailto:{{ email }}">Contact {{ title }}</a></p>
 </section>
-
 {% endblock %}
diff --git a/foundation/public/css/base.css b/foundation/public/css/base.css
deleted file mode 100644
index ddce297b..00000000
--- a/foundation/public/css/base.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/*utilities*/
-.align-items-center {
-  align-items: center;
-}
-.hide,
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-.top-zero {
-  margin-top: 0;
-}
-.bottom-zero {
-  margin-bottom: 0;
-}
-.top-spacer {
-  margin-top: 2.5rem;
-}
-.bottom-spacer {
-  margin-bottom: 2.5rem;
-}
-.bottom-spacer-4 {
-  margin-bottom: 4rem;
-}
-.gray-bg {
-  background-color: #fafbfc;
-}
-.dark-bg {
-  background-color: #2E3338;
-}
-.left-aligned {
-  text-align: left;
-}
-.right-aligned {
-  text-align: right;
-}
-.text-center {
-  text-align: center;
-}
-.text-muted {
-  color: #8D99A6;
-}
-.text-light {
-  color: #6c7680;
-}
-.text-white {
-  color: #fff;
-}
-.centered {
-  margin: 0 auto;
-}
-.bold {
-  font-weight: bold;
-}
-.list-unstyled {
-  padding: 0;
-}
-.list-unstyled li {
-  list-style: none;
-}
-.list-circle {
-  list-style: circle;
-}
diff --git a/foundation/public/css/erpnext-org-theme.css b/foundation/public/css/erpnext-org-theme.css
index 680a8aed..afa7ae15 100644
--- a/foundation/public/css/erpnext-org-theme.css
+++ b/foundation/public/css/erpnext-org-theme.css
@@ -1,6 +1,5 @@
 /*utilities*/
 @import "reset.css";
-@import "indicator.css";
 .align-items-center {
   align-items: center;
 }
@@ -21,6 +20,9 @@
 .bottom-spacer {
   margin-bottom: 2.5rem;
 }
+.top-spacer-4 {
+  margin-top: 4rem;
+}
 .bottom-spacer-4 {
   margin-bottom: 4rem;
 }
@@ -72,12 +74,86 @@
 .border {
   border: 1px solid #d1d8dd;
 }
+.border-top {
+  border-top: 1px solid #d1d8dd;
+}
 .saturate {
   filter: grayscale(100%);
 }
 .saturate:hover {
   filter: grayscale(0%);
 }
+.indicator,
+.indicator-right {
+  background: none;
+  font-size: 12px;
+  vertical-align: middle;
+  font-weight: bold;
+  color: #6c7680;
+}
+.indicator::before,
+.indicator-right::after {
+  content: "";
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: 8px;
+}
+.indicator::before {
+  margin: 0 4px 0 0;
+}
+.indicator-right::after {
+  margin: 0 0 0 4px;
+}
+.indicator.grey::before,
+.indicator-right.grey::after {
+  background: #F0F4F7;
+}
+.indicator.blue::before,
+.indicator-right.blue::after {
+  background: #5e64ff;
+}
+.indicator.red::before,
+.indicator-right.red::after {
+  background: #ff5858;
+}
+.indicator.green::before,
+.indicator-right.green::after {
+  background: #98d85b;
+}
+.indicator.orange::before,
+.indicator-right.orange::after {
+  background: #ffa00a;
+}
+.indicator.purple::before,
+.indicator-right.purple::after {
+  background: #743ee2;
+}
+.indicator.darkgrey::before,
+.indicator-right.darkgrey::after {
+  background: #b8c2cc;
+}
+.indicator.black::before,
+.indicator-right.black::after {
+  background: #36414C;
+}
+.indicator.yellow::before,
+.indicator-right.yellow::after {
+  background: #FEEF72;
+}
+.indicator.light-blue::before,
+.indicator-right.light-blue::after {
+  background: #7CD6FD;
+}
+.indicator.lightblue::before,
+.indicator-right.lightblue::after {
+  background: #7CD6FD;
+}
+.modal-header .indicator {
+  float: left;
+  margin-top: 7.5px;
+  margin-right: 3px;
+}
 a {
   color: #7575ff;
   text-decoration: none;
@@ -107,6 +183,7 @@ a:visited {
 .navbar {
   padding: 1rem;
   background-color: #fff;
+  box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
 }
 @media screen and (min-width: 767px) {
   .navbar {
@@ -151,12 +228,14 @@ a:visited {
 .menu-links:hover {
   text-decoration: none;
 }
-.container {
+.container,
+.page-content-wrapper {
   max-width: 100%;
   margin: 0 auto;
 }
 @media screen and (min-width: 1199px) {
-  .container {
+  .container,
+  .page-content-wrapper {
     max-width: 1199px;
   }
 }
@@ -175,6 +254,11 @@ a:visited {
   padding: 0 1rem;
   border-top: 1px solid #EBEFF2;
 }
+@media screen and (min-width: 767px) {
+  .page {
+    padding: 0 2.5rem;
+  }
+}
 .hero-illustration {
   width: 100%;
   max-width: 800px;
@@ -426,7 +510,7 @@ hr {
 }
 @media screen and (min-width: 767px) {
   .footer-end {
-    padding-top: 1.5rem;
+    padding-top: 2.5rem;
     margin-top: 1.5rem;
   }
 }
@@ -451,6 +535,9 @@ hr {
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
+.progress-bar {
+  height: inherit;
+}
 .progress-bar-success {
   background-color: #98d85b;
 }
diff --git a/foundation/public/css/indicator.css b/foundation/public/css/indicator.css
deleted file mode 100644
index bd283dd6..00000000
--- a/foundation/public/css/indicator.css
+++ /dev/null
@@ -1,71 +0,0 @@
-.indicator,
-.indicator-right {
-  background: none;
-  font-size: 12px;
-  vertical-align: middle;
-  font-weight: bold;
-  color: #6c7680;
-}
-.indicator::before,
-.indicator-right::after {
-  content: '';
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  border-radius: 8px;
-}
-.indicator::before {
-  margin: 0 4px 0 0px;
-}
-.indicator-right::after {
-  margin: 0 0 0 4px;
-}
-.indicator.grey::before,
-.indicator-right.grey::after {
-  background: #F0F4F7;
-}
-.indicator.blue::before,
-.indicator-right.blue::after {
-  background: #5e64ff;
-}
-.indicator.red::before,
-.indicator-right.red::after {
-  background: #ff5858;
-}
-.indicator.green::before,
-.indicator-right.green::after {
-  background: #98d85b;
-}
-.indicator.orange::before,
-.indicator-right.orange::after {
-  background: #ffa00a;
-}
-.indicator.purple::before,
-.indicator-right.purple::after {
-  background: #743ee2;
-}
-.indicator.darkgrey::before,
-.indicator-right.darkgrey::after {
-  background: #b8c2cc;
-}
-.indicator.black::before,
-.indicator-right.black::after {
-  background: #36414C;
-}
-.indicator.yellow::before,
-.indicator-right.yellow::after {
-  background: #FEEF72;
-}
-.indicator.light-blue::before,
-.indicator-right.light-blue::after {
-  background: #7CD6FD;
-}
-.indicator.lightblue::before,
-.indicator-right.lightblue::after {
-  background: #7CD6FD;
-}
-.modal-header .indicator {
-  float: left;
-  margin-top: 7.5px;
-  margin-right: 3px;
-}
diff --git a/foundation/public/css/report.min.css b/foundation/public/css/report.min.css
deleted file mode 100644
index 85394609..00000000
--- a/foundation/public/css/report.min.css
+++ /dev/null
@@ -1,2192 +0,0 @@
-/* variables */
-.data-table {
-  /* styling */
-  width: 100%;
-  position: relative;
-  overflow: auto;
-}
-/* resets */
-.data-table *,
-.data-table *::after,
-.data-table *::before {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.data-table button,
-.data-table input {
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-}
-.data-table *,
-.data-table *:focus {
-  outline: none;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.data-table table {
-  border-collapse: collapse;
-}
-.data-table table td {
-  padding: 0;
-  border: 1px solid #d1d8dd;
-}
-.data-table thead td {
-  border-bottom-width: 1px;
-}
-.data-table .freeze-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #f5f7fa;
-  opacity: 0.5;
-  font-size: 2em;
-}
-.data-table .freeze-container span {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.data-table .trash-container {
-  position: absolute;
-  bottom: 0;
-  left: 30%;
-  right: 30%;
-  height: 70px;
-  background: palevioletred;
-  opacity: 0.5;
-}
-.body-scrollable {
-  max-height: 500px;
-  overflow: auto;
-  border-bottom: 1px solid #d1d8dd;
-}
-.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
-  background-color: #f5f7fa;
-}
-.data-table-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: white;
-  font-weight: bold;
-}
-.data-table-header .content span:not(.column-resizer) {
-  cursor: pointer;
-}
-.data-table-header .column-resizer {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 4px;
-  width: 0.25rem;
-  height: 100%;
-  background-color: #5292f7;
-  cursor: col-resize;
-}
-.data-table-header .data-table-dropdown {
-  position: absolute;
-  right: 10px;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: top;
-  text-align: left;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
-  display: block;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-header .data-table-dropdown-toggle {
-  display: none;
-  background-color: transparent;
-  border: none;
-}
-.data-table-header .data-table-dropdown-list {
-  display: none;
-  font-weight: normal;
-  position: absolute;
-  min-width: 128px;
-  min-width: 8rem;
-  top: 100%;
-  right: 0;
-  z-index: 1;
-  background-color: white;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  padding-bottom: 8px;
-  padding-bottom: 0.5rem;
-  padding-top: 8px;
-  padding-top: 0.5rem;
-}
-.data-table-header .data-table-dropdown-list > div {
-  padding: 8px 16px;
-  padding: 0.5rem 1rem;
-}
-.data-table-header .data-table-dropdown-list > div:hover {
-  background-color: #f5f7fa;
-}
-.data-table-header .data-table-col.remove-column {
-  background-color: #FD8B8B;
-  -webkit-transition: 300ms background-color ease-in-out;
-  transition: 300ms background-color ease-in-out;
-}
-.data-table-header .data-table-col.sortable-chosen {
-  background-color: #f5f7fa;
-}
-.data-table-col {
-  position: relative;
-}
-.data-table-col .content {
-  padding: 8px;
-  padding: 0.5rem;
-  border: 2px solid transparent;
-}
-.data-table-col .content.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.data-table-col .edit-cell {
-  display: none;
-  padding: 8px;
-  padding: 0.5rem;
-  background: #fff;
-  z-index: 1;
-  height: 100%;
-}
-.data-table-col .edit-cell input {
-  outline: none;
-  width: 100%;
-  border: none;
-}
-.data-table-col.selected .content {
-  border: 2px solid #5292f7;
-}
-.data-table-col.editing .content {
-  display: none;
-}
-.data-table-col.editing .edit-cell {
-  border: 2px solid #5292f7;
-  display: block;
-}
-.data-table-col.highlight {
-  background-color: #f5f7fa;
-}
-.data-table-col:hover .column-resizer {
-  display: inline-block;
-}
-.data-table-col:hover .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-row.row-highlight {
-  background-color: #f5f7fa;
-}
-.noselect {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-body.data-table-resize {
-  cursor: col-resize;
-}
-.data-table {
-  margin-left: -1px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.data-table .data-table-col .edit-cell {
-  padding: 0;
-}
-.data-table .data-table-col .edit-cell input {
-  font-size: inherit;
-  height: 27px;
-}
-.data-table .data-table-col .content {
-  padding: 0.5rem;
-}
-.data-table .frappe-control {
-  margin: 0;
-}
-.data-table .form-group {
-  margin: 0;
-}
-.data-table .form-control {
-  border-radius: 0px;
-  border: none;
-}
-.data-table .link-btn {
-  top: 6px;
-}
-.data-table select {
-  height: 27px;
-}
-.data-table .checkbox {
-  margin: 7px 0 7px 8px;
-}
-.data-table [data-fieldtype="Color"] .control-input {
-  overflow: hidden;
-}
-.data-table .body-scrollable::-webkit-scrollbar {
-  display: none;
-}
-.data-table .data-table-header {
-  background-color: #F7FAFC;
-  color: #8D99A6;
-}
-.data-table .data-table-row.row-update {
-  animation: 500ms breathe forwards;
-}
-.data-table .data-table-row.row-highlight {
-  background-color: #fffdf4;
-}
-@keyframes breathe {
-  0% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: #fffdf4;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-/* variables */
-.data-table {
-  /* styling */
-  width: 100%;
-  position: relative;
-  overflow: auto;
-}
-/* resets */
-.data-table *,
-.data-table *::after,
-.data-table *::before {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.data-table button,
-.data-table input {
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-}
-.data-table *,
-.data-table *:focus {
-  outline: none;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.data-table table {
-  border-collapse: collapse;
-}
-.data-table table td {
-  padding: 0;
-  border: 1px solid #d1d8dd;
-}
-.data-table thead td {
-  border-bottom-width: 1px;
-}
-.data-table .freeze-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #f5f7fa;
-  opacity: 0.5;
-  font-size: 2em;
-}
-.data-table .freeze-container span {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.data-table .trash-container {
-  position: absolute;
-  bottom: 0;
-  left: 30%;
-  right: 30%;
-  height: 70px;
-  background: palevioletred;
-  opacity: 0.5;
-}
-.body-scrollable {
-  max-height: 500px;
-  overflow: auto;
-  border-bottom: 1px solid #d1d8dd;
-}
-.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
-  background-color: #f5f7fa;
-}
-.data-table-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: white;
-  font-weight: bold;
-}
-.data-table-header .content span:not(.column-resizer) {
-  cursor: pointer;
-}
-.data-table-header .column-resizer {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 4px;
-  width: 0.25rem;
-  height: 100%;
-  background-color: #5292f7;
-  cursor: col-resize;
-}
-.data-table-header .data-table-dropdown {
-  position: absolute;
-  right: 10px;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: top;
-  text-align: left;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
-  display: block;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-header .data-table-dropdown-toggle {
-  display: none;
-  background-color: transparent;
-  border: none;
-}
-.data-table-header .data-table-dropdown-list {
-  display: none;
-  font-weight: normal;
-  position: absolute;
-  min-width: 128px;
-  min-width: 8rem;
-  top: 100%;
-  right: 0;
-  z-index: 1;
-  background-color: white;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  padding-bottom: 8px;
-  padding-bottom: 0.5rem;
-  padding-top: 8px;
-  padding-top: 0.5rem;
-}
-.data-table-header .data-table-dropdown-list > div {
-  padding: 8px 16px;
-  padding: 0.5rem 1rem;
-}
-.data-table-header .data-table-dropdown-list > div:hover {
-  background-color: #f5f7fa;
-}
-.data-table-header .data-table-col.remove-column {
-  background-color: #FD8B8B;
-  -webkit-transition: 300ms background-color ease-in-out;
-  transition: 300ms background-color ease-in-out;
-}
-.data-table-header .data-table-col.sortable-chosen {
-  background-color: #f5f7fa;
-}
-.data-table-col {
-  position: relative;
-}
-.data-table-col .content {
-  padding: 8px;
-  padding: 0.5rem;
-  border: 2px solid transparent;
-}
-.data-table-col .content.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.data-table-col .edit-cell {
-  display: none;
-  padding: 8px;
-  padding: 0.5rem;
-  background: #fff;
-  z-index: 1;
-  height: 100%;
-}
-.data-table-col .edit-cell input {
-  outline: none;
-  width: 100%;
-  border: none;
-}
-.data-table-col.selected .content {
-  border: 2px solid #5292f7;
-}
-.data-table-col.editing .content {
-  display: none;
-}
-.data-table-col.editing .edit-cell {
-  border: 2px solid #5292f7;
-  display: block;
-}
-.data-table-col.highlight {
-  background-color: #f5f7fa;
-}
-.data-table-col:hover .column-resizer {
-  display: inline-block;
-}
-.data-table-col:hover .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-row.row-highlight {
-  background-color: #f5f7fa;
-}
-.noselect {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-body.data-table-resize {
-  cursor: col-resize;
-}
-.data-table {
-  margin-left: -1px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.data-table .data-table-col .edit-cell {
-  padding: 0;
-}
-.data-table .data-table-col .edit-cell input {
-  font-size: inherit;
-  height: 27px;
-}
-.data-table .data-table-col .content {
-  padding: 0.5rem;
-}
-.data-table .frappe-control {
-  margin: 0;
-}
-.data-table .form-group {
-  margin: 0;
-}
-.data-table .form-control {
-  border-radius: 0px;
-  border: none;
-}
-.data-table .link-btn {
-  top: 6px;
-}
-.data-table select {
-  height: 27px;
-}
-.data-table .checkbox {
-  margin: 7px 0 7px 8px;
-}
-.data-table [data-fieldtype="Color"] .control-input {
-  overflow: hidden;
-}
-.data-table .body-scrollable::-webkit-scrollbar {
-  display: none;
-}
-.data-table .data-table-header {
-  background-color: #F7FAFC;
-  color: #8D99A6;
-}
-.data-table .data-table-row.row-update {
-  animation: 500ms breathe forwards;
-}
-.data-table .data-table-row.row-highlight {
-  background-color: #fffdf4;
-}
-@keyframes breathe {
-  0% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: #fffdf4;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-/* variables */
-.data-table {
-  /* styling */
-  width: 100%;
-  position: relative;
-  overflow: auto;
-}
-/* resets */
-.data-table *,
-.data-table *::after,
-.data-table *::before {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.data-table button,
-.data-table input {
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-}
-.data-table *,
-.data-table *:focus {
-  outline: none;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.data-table table {
-  border-collapse: collapse;
-}
-.data-table table td {
-  padding: 0;
-  border: 1px solid #d1d8dd;
-}
-.data-table thead td {
-  border-bottom-width: 1px;
-}
-.data-table .freeze-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #f5f7fa;
-  opacity: 0.5;
-  font-size: 2em;
-}
-.data-table .freeze-container span {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.data-table .trash-container {
-  position: absolute;
-  bottom: 0;
-  left: 30%;
-  right: 30%;
-  height: 70px;
-  background: palevioletred;
-  opacity: 0.5;
-}
-.body-scrollable {
-  max-height: 500px;
-  overflow: auto;
-  border-bottom: 1px solid #d1d8dd;
-}
-.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
-  background-color: #f5f7fa;
-}
-.data-table-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: white;
-  font-weight: bold;
-}
-.data-table-header .content span:not(.column-resizer) {
-  cursor: pointer;
-}
-.data-table-header .column-resizer {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 4px;
-  width: 0.25rem;
-  height: 100%;
-  background-color: #5292f7;
-  cursor: col-resize;
-}
-.data-table-header .data-table-dropdown {
-  position: absolute;
-  right: 10px;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: top;
-  text-align: left;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
-  display: block;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-header .data-table-dropdown-toggle {
-  display: none;
-  background-color: transparent;
-  border: none;
-}
-.data-table-header .data-table-dropdown-list {
-  display: none;
-  font-weight: normal;
-  position: absolute;
-  min-width: 128px;
-  min-width: 8rem;
-  top: 100%;
-  right: 0;
-  z-index: 1;
-  background-color: white;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  padding-bottom: 8px;
-  padding-bottom: 0.5rem;
-  padding-top: 8px;
-  padding-top: 0.5rem;
-}
-.data-table-header .data-table-dropdown-list > div {
-  padding: 8px 16px;
-  padding: 0.5rem 1rem;
-}
-.data-table-header .data-table-dropdown-list > div:hover {
-  background-color: #f5f7fa;
-}
-.data-table-header .data-table-col.remove-column {
-  background-color: #FD8B8B;
-  -webkit-transition: 300ms background-color ease-in-out;
-  transition: 300ms background-color ease-in-out;
-}
-.data-table-header .data-table-col.sortable-chosen {
-  background-color: #f5f7fa;
-}
-.data-table-col {
-  position: relative;
-}
-.data-table-col .content {
-  padding: 8px;
-  padding: 0.5rem;
-  border: 2px solid transparent;
-}
-.data-table-col .content.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.data-table-col .edit-cell {
-  display: none;
-  padding: 8px;
-  padding: 0.5rem;
-  background: #fff;
-  z-index: 1;
-  height: 100%;
-}
-.data-table-col .edit-cell input {
-  outline: none;
-  width: 100%;
-  border: none;
-}
-.data-table-col.selected .content {
-  border: 2px solid #5292f7;
-}
-.data-table-col.editing .content {
-  display: none;
-}
-.data-table-col.editing .edit-cell {
-  border: 2px solid #5292f7;
-  display: block;
-}
-.data-table-col.highlight {
-  background-color: #f5f7fa;
-}
-.data-table-col:hover .column-resizer {
-  display: inline-block;
-}
-.data-table-col:hover .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-row.row-highlight {
-  background-color: #f5f7fa;
-}
-.noselect {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-body.data-table-resize {
-  cursor: col-resize;
-}
-.data-table {
-  margin-left: -1px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.data-table .data-table-col .edit-cell {
-  padding: 0;
-}
-.data-table .data-table-col .edit-cell input {
-  font-size: inherit;
-  height: 27px;
-}
-.data-table .data-table-col .content {
-  padding: 0.5rem;
-}
-.data-table .frappe-control {
-  margin: 0;
-}
-.data-table .form-group {
-  margin: 0;
-}
-.data-table .form-control {
-  border-radius: 0px;
-  border: none;
-}
-.data-table .link-btn {
-  top: 6px;
-}
-.data-table select {
-  height: 27px;
-}
-.data-table .checkbox {
-  margin: 7px 0 7px 8px;
-}
-.data-table [data-fieldtype="Color"] .control-input {
-  overflow: hidden;
-}
-.data-table .body-scrollable::-webkit-scrollbar {
-  display: none;
-}
-.data-table .data-table-header {
-  background-color: #F7FAFC;
-  color: #8D99A6;
-}
-.data-table .data-table-row.row-update {
-  animation: 500ms breathe forwards;
-}
-.data-table .data-table-row.row-highlight {
-  background-color: #fffdf4;
-}
-@keyframes breathe {
-  0% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: #fffdf4;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-/* variables */
-.data-table {
-  /* styling */
-  width: 100%;
-  position: relative;
-  overflow: auto;
-}
-/* resets */
-.data-table *,
-.data-table *::after,
-.data-table *::before {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.data-table button,
-.data-table input {
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-}
-.data-table *,
-.data-table *:focus {
-  outline: none;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.data-table table {
-  border-collapse: collapse;
-}
-.data-table table td {
-  padding: 0;
-  border: 1px solid #d1d8dd;
-}
-.data-table thead td {
-  border-bottom-width: 1px;
-}
-.data-table .freeze-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #f5f7fa;
-  opacity: 0.5;
-  font-size: 2em;
-}
-.data-table .freeze-container span {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.data-table .trash-container {
-  position: absolute;
-  bottom: 0;
-  left: 30%;
-  right: 30%;
-  height: 70px;
-  background: palevioletred;
-  opacity: 0.5;
-}
-.body-scrollable {
-  max-height: 500px;
-  overflow: auto;
-  border-bottom: 1px solid #d1d8dd;
-}
-.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
-  background-color: #f5f7fa;
-}
-.data-table-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: white;
-  font-weight: bold;
-}
-.data-table-header .content span:not(.column-resizer) {
-  cursor: pointer;
-}
-.data-table-header .column-resizer {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 4px;
-  width: 0.25rem;
-  height: 100%;
-  background-color: #5292f7;
-  cursor: col-resize;
-}
-.data-table-header .data-table-dropdown {
-  position: absolute;
-  right: 10px;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: top;
-  text-align: left;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
-  display: block;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-header .data-table-dropdown-toggle {
-  display: none;
-  background-color: transparent;
-  border: none;
-}
-.data-table-header .data-table-dropdown-list {
-  display: none;
-  font-weight: normal;
-  position: absolute;
-  min-width: 128px;
-  min-width: 8rem;
-  top: 100%;
-  right: 0;
-  z-index: 1;
-  background-color: white;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  padding-bottom: 8px;
-  padding-bottom: 0.5rem;
-  padding-top: 8px;
-  padding-top: 0.5rem;
-}
-.data-table-header .data-table-dropdown-list > div {
-  padding: 8px 16px;
-  padding: 0.5rem 1rem;
-}
-.data-table-header .data-table-dropdown-list > div:hover {
-  background-color: #f5f7fa;
-}
-.data-table-header .data-table-col.remove-column {
-  background-color: #FD8B8B;
-  -webkit-transition: 300ms background-color ease-in-out;
-  transition: 300ms background-color ease-in-out;
-}
-.data-table-header .data-table-col.sortable-chosen {
-  background-color: #f5f7fa;
-}
-.data-table-col {
-  position: relative;
-}
-.data-table-col .content {
-  padding: 8px;
-  padding: 0.5rem;
-  border: 2px solid transparent;
-}
-.data-table-col .content.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.data-table-col .edit-cell {
-  display: none;
-  padding: 8px;
-  padding: 0.5rem;
-  background: #fff;
-  z-index: 1;
-  height: 100%;
-}
-.data-table-col .edit-cell input {
-  outline: none;
-  width: 100%;
-  border: none;
-}
-.data-table-col.selected .content {
-  border: 2px solid #5292f7;
-}
-.data-table-col.editing .content {
-  display: none;
-}
-.data-table-col.editing .edit-cell {
-  border: 2px solid #5292f7;
-  display: block;
-}
-.data-table-col.highlight {
-  background-color: #f5f7fa;
-}
-.data-table-col:hover .column-resizer {
-  display: inline-block;
-}
-.data-table-col:hover .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-row.row-highlight {
-  background-color: #f5f7fa;
-}
-.noselect {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-body.data-table-resize {
-  cursor: col-resize;
-}
-.data-table {
-  margin-left: -1px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.data-table .data-table-col .edit-cell {
-  padding: 0;
-}
-.data-table .data-table-col .edit-cell input {
-  font-size: inherit;
-  height: 27px;
-}
-.data-table .data-table-col .content {
-  padding: 0.5rem;
-}
-.data-table .frappe-control {
-  margin: 0;
-}
-.data-table .form-group {
-  margin: 0;
-}
-.data-table .form-control {
-  border-radius: 0px;
-  border: none;
-}
-.data-table .link-btn {
-  top: 6px;
-}
-.data-table select {
-  height: 27px;
-}
-.data-table .checkbox {
-  margin: 7px 0 7px 8px;
-}
-.data-table [data-fieldtype="Color"] .control-input {
-  overflow: hidden;
-}
-.data-table .body-scrollable::-webkit-scrollbar {
-  display: none;
-}
-.data-table .data-table-header {
-  background-color: #F7FAFC;
-  color: #8D99A6;
-}
-.data-table .data-table-row.row-update {
-  animation: 500ms breathe forwards;
-}
-.data-table .data-table-row.row-highlight {
-  background-color: #fffdf4;
-}
-@keyframes breathe {
-  0% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: #fffdf4;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-/* variables */
-.data-table {
-  /* styling */
-  width: 100%;
-  position: relative;
-  overflow: auto;
-}
-/* resets */
-.data-table *,
-.data-table *::after,
-.data-table *::before {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.data-table button,
-.data-table input {
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-}
-.data-table *,
-.data-table *:focus {
-  outline: none;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.data-table table {
-  border-collapse: collapse;
-}
-.data-table table td {
-  padding: 0;
-  border: 1px solid #d1d8dd;
-}
-.data-table thead td {
-  border-bottom-width: 1px;
-}
-.data-table .freeze-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #f5f7fa;
-  opacity: 0.5;
-  font-size: 2em;
-}
-.data-table .freeze-container span {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.data-table .trash-container {
-  position: absolute;
-  bottom: 0;
-  left: 30%;
-  right: 30%;
-  height: 70px;
-  background: palevioletred;
-  opacity: 0.5;
-}
-.body-scrollable {
-  max-height: 500px;
-  overflow: auto;
-  border-bottom: 1px solid #d1d8dd;
-}
-.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
-  background-color: #f5f7fa;
-}
-.data-table-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: white;
-  font-weight: bold;
-}
-.data-table-header .content span:not(.column-resizer) {
-  cursor: pointer;
-}
-.data-table-header .column-resizer {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 4px;
-  width: 0.25rem;
-  height: 100%;
-  background-color: #5292f7;
-  cursor: col-resize;
-}
-.data-table-header .data-table-dropdown {
-  position: absolute;
-  right: 10px;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: top;
-  text-align: left;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
-  display: block;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-header .data-table-dropdown-toggle {
-  display: none;
-  background-color: transparent;
-  border: none;
-}
-.data-table-header .data-table-dropdown-list {
-  display: none;
-  font-weight: normal;
-  position: absolute;
-  min-width: 128px;
-  min-width: 8rem;
-  top: 100%;
-  right: 0;
-  z-index: 1;
-  background-color: white;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  padding-bottom: 8px;
-  padding-bottom: 0.5rem;
-  padding-top: 8px;
-  padding-top: 0.5rem;
-}
-.data-table-header .data-table-dropdown-list > div {
-  padding: 8px 16px;
-  padding: 0.5rem 1rem;
-}
-.data-table-header .data-table-dropdown-list > div:hover {
-  background-color: #f5f7fa;
-}
-.data-table-header .data-table-col.remove-column {
-  background-color: #FD8B8B;
-  -webkit-transition: 300ms background-color ease-in-out;
-  transition: 300ms background-color ease-in-out;
-}
-.data-table-header .data-table-col.sortable-chosen {
-  background-color: #f5f7fa;
-}
-.data-table-col {
-  position: relative;
-}
-.data-table-col .content {
-  padding: 8px;
-  padding: 0.5rem;
-  border: 2px solid transparent;
-}
-.data-table-col .content.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.data-table-col .edit-cell {
-  display: none;
-  padding: 8px;
-  padding: 0.5rem;
-  background: #fff;
-  z-index: 1;
-  height: 100%;
-}
-.data-table-col .edit-cell input {
-  outline: none;
-  width: 100%;
-  border: none;
-}
-.data-table-col.selected .content {
-  border: 2px solid #5292f7;
-}
-.data-table-col.editing .content {
-  display: none;
-}
-.data-table-col.editing .edit-cell {
-  border: 2px solid #5292f7;
-  display: block;
-}
-.data-table-col.highlight {
-  background-color: #f5f7fa;
-}
-.data-table-col:hover .column-resizer {
-  display: inline-block;
-}
-.data-table-col:hover .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-row.row-highlight {
-  background-color: #f5f7fa;
-}
-.noselect {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-body.data-table-resize {
-  cursor: col-resize;
-}
-.data-table {
-  margin-left: -1px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.data-table .data-table-col .edit-cell {
-  padding: 0;
-}
-.data-table .data-table-col .edit-cell input {
-  font-size: inherit;
-  height: 27px;
-}
-.data-table .data-table-col .content {
-  padding: 0.5rem;
-}
-.data-table .frappe-control {
-  margin: 0;
-}
-.data-table .form-group {
-  margin: 0;
-}
-.data-table .form-control {
-  border-radius: 0px;
-  border: none;
-}
-.data-table .link-btn {
-  top: 6px;
-}
-.data-table select {
-  height: 27px;
-}
-.data-table .checkbox {
-  margin: 7px 0 7px 8px;
-}
-.data-table [data-fieldtype="Color"] .control-input {
-  overflow: hidden;
-}
-.data-table .body-scrollable::-webkit-scrollbar {
-  display: none;
-}
-.data-table .data-table-header {
-  background-color: #F7FAFC;
-  color: #8D99A6;
-}
-.data-table .data-table-row.row-update {
-  animation: 500ms breathe forwards;
-}
-.data-table .data-table-row.row-highlight {
-  background-color: #fffdf4;
-}
-@keyframes breathe {
-  0% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: #fffdf4;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-/* variables */
-.data-table {
-  /* styling */
-  width: 100%;
-  position: relative;
-  overflow: auto;
-}
-/* resets */
-.data-table *,
-.data-table *::after,
-.data-table *::before {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.data-table button,
-.data-table input {
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-}
-.data-table *,
-.data-table *:focus {
-  outline: none;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.data-table table {
-  border-collapse: collapse;
-}
-.data-table table td {
-  padding: 0;
-  border: 1px solid #d1d8dd;
-}
-.data-table thead td {
-  border-bottom-width: 1px;
-}
-.data-table .freeze-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #f5f7fa;
-  opacity: 0.5;
-  font-size: 2em;
-}
-.data-table .freeze-container span {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.data-table .trash-container {
-  position: absolute;
-  bottom: 0;
-  left: 30%;
-  right: 30%;
-  height: 70px;
-  background: palevioletred;
-  opacity: 0.5;
-}
-.body-scrollable {
-  max-height: 500px;
-  overflow: auto;
-  border-bottom: 1px solid #d1d8dd;
-}
-.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
-  background-color: #f5f7fa;
-}
-.data-table-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: white;
-  font-weight: bold;
-}
-.data-table-header .content span:not(.column-resizer) {
-  cursor: pointer;
-}
-.data-table-header .column-resizer {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 4px;
-  width: 0.25rem;
-  height: 100%;
-  background-color: #5292f7;
-  cursor: col-resize;
-}
-.data-table-header .data-table-dropdown {
-  position: absolute;
-  right: 10px;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: top;
-  text-align: left;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
-  display: block;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-header .data-table-dropdown-toggle {
-  display: none;
-  background-color: transparent;
-  border: none;
-}
-.data-table-header .data-table-dropdown-list {
-  display: none;
-  font-weight: normal;
-  position: absolute;
-  min-width: 128px;
-  min-width: 8rem;
-  top: 100%;
-  right: 0;
-  z-index: 1;
-  background-color: white;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  padding-bottom: 8px;
-  padding-bottom: 0.5rem;
-  padding-top: 8px;
-  padding-top: 0.5rem;
-}
-.data-table-header .data-table-dropdown-list > div {
-  padding: 8px 16px;
-  padding: 0.5rem 1rem;
-}
-.data-table-header .data-table-dropdown-list > div:hover {
-  background-color: #f5f7fa;
-}
-.data-table-header .data-table-col.remove-column {
-  background-color: #FD8B8B;
-  -webkit-transition: 300ms background-color ease-in-out;
-  transition: 300ms background-color ease-in-out;
-}
-.data-table-header .data-table-col.sortable-chosen {
-  background-color: #f5f7fa;
-}
-.data-table-col {
-  position: relative;
-}
-.data-table-col .content {
-  padding: 8px;
-  padding: 0.5rem;
-  border: 2px solid transparent;
-}
-.data-table-col .content.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.data-table-col .edit-cell {
-  display: none;
-  padding: 8px;
-  padding: 0.5rem;
-  background: #fff;
-  z-index: 1;
-  height: 100%;
-}
-.data-table-col .edit-cell input {
-  outline: none;
-  width: 100%;
-  border: none;
-}
-.data-table-col.selected .content {
-  border: 2px solid #5292f7;
-}
-.data-table-col.editing .content {
-  display: none;
-}
-.data-table-col.editing .edit-cell {
-  border: 2px solid #5292f7;
-  display: block;
-}
-.data-table-col.highlight {
-  background-color: #f5f7fa;
-}
-.data-table-col:hover .column-resizer {
-  display: inline-block;
-}
-.data-table-col:hover .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-row.row-highlight {
-  background-color: #f5f7fa;
-}
-.noselect {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-body.data-table-resize {
-  cursor: col-resize;
-}
-.data-table {
-  margin-left: -1px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.data-table .data-table-col .edit-cell {
-  padding: 0;
-}
-.data-table .data-table-col .edit-cell input {
-  font-size: inherit;
-  height: 27px;
-}
-.data-table .data-table-col .content {
-  padding: 0.5rem;
-}
-.data-table .frappe-control {
-  margin: 0;
-}
-.data-table .form-group {
-  margin: 0;
-}
-.data-table .form-control {
-  border-radius: 0px;
-  border: none;
-}
-.data-table .link-btn {
-  top: 6px;
-}
-.data-table select {
-  height: 27px;
-}
-.data-table .checkbox {
-  margin: 7px 0 7px 8px;
-}
-.data-table [data-fieldtype="Color"] .control-input {
-  overflow: hidden;
-}
-.data-table .body-scrollable::-webkit-scrollbar {
-  display: none;
-}
-.data-table .data-table-header {
-  background-color: #F7FAFC;
-  color: #8D99A6;
-}
-.data-table .data-table-row.row-update {
-  animation: 500ms breathe forwards;
-}
-.data-table .data-table-row.row-highlight {
-  background-color: #fffdf4;
-}
-@keyframes breathe {
-  0% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: #fffdf4;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-/* variables */
-.data-table {
-  /* styling */
-  width: 100%;
-  position: relative;
-  overflow: auto;
-}
-/* resets */
-.data-table *,
-.data-table *::after,
-.data-table *::before {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.data-table button,
-.data-table input {
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-}
-.data-table *,
-.data-table *:focus {
-  outline: none;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.data-table table {
-  border-collapse: collapse;
-}
-.data-table table td {
-  padding: 0;
-  border: 1px solid #d1d8dd;
-}
-.data-table thead td {
-  border-bottom-width: 1px;
-}
-.data-table .freeze-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #f5f7fa;
-  opacity: 0.5;
-  font-size: 2em;
-}
-.data-table .freeze-container span {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.data-table .trash-container {
-  position: absolute;
-  bottom: 0;
-  left: 30%;
-  right: 30%;
-  height: 70px;
-  background: palevioletred;
-  opacity: 0.5;
-}
-.body-scrollable {
-  max-height: 500px;
-  overflow: auto;
-  border-bottom: 1px solid #d1d8dd;
-}
-.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
-  background-color: #f5f7fa;
-}
-.data-table-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: white;
-  font-weight: bold;
-}
-.data-table-header .content span:not(.column-resizer) {
-  cursor: pointer;
-}
-.data-table-header .column-resizer {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 4px;
-  width: 0.25rem;
-  height: 100%;
-  background-color: #5292f7;
-  cursor: col-resize;
-}
-.data-table-header .data-table-dropdown {
-  position: absolute;
-  right: 10px;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: top;
-  text-align: left;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
-  display: block;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-header .data-table-dropdown-toggle {
-  display: none;
-  background-color: transparent;
-  border: none;
-}
-.data-table-header .data-table-dropdown-list {
-  display: none;
-  font-weight: normal;
-  position: absolute;
-  min-width: 128px;
-  min-width: 8rem;
-  top: 100%;
-  right: 0;
-  z-index: 1;
-  background-color: white;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  padding-bottom: 8px;
-  padding-bottom: 0.5rem;
-  padding-top: 8px;
-  padding-top: 0.5rem;
-}
-.data-table-header .data-table-dropdown-list > div {
-  padding: 8px 16px;
-  padding: 0.5rem 1rem;
-}
-.data-table-header .data-table-dropdown-list > div:hover {
-  background-color: #f5f7fa;
-}
-.data-table-header .data-table-col.remove-column {
-  background-color: #FD8B8B;
-  -webkit-transition: 300ms background-color ease-in-out;
-  transition: 300ms background-color ease-in-out;
-}
-.data-table-header .data-table-col.sortable-chosen {
-  background-color: #f5f7fa;
-}
-.data-table-col {
-  position: relative;
-}
-.data-table-col .content {
-  padding: 8px;
-  padding: 0.5rem;
-  border: 2px solid transparent;
-}
-.data-table-col .content.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.data-table-col .edit-cell {
-  display: none;
-  padding: 8px;
-  padding: 0.5rem;
-  background: #fff;
-  z-index: 1;
-  height: 100%;
-}
-.data-table-col .edit-cell input {
-  outline: none;
-  width: 100%;
-  border: none;
-}
-.data-table-col.selected .content {
-  border: 2px solid #5292f7;
-}
-.data-table-col.editing .content {
-  display: none;
-}
-.data-table-col.editing .edit-cell {
-  border: 2px solid #5292f7;
-  display: block;
-}
-.data-table-col.highlight {
-  background-color: #f5f7fa;
-}
-.data-table-col:hover .column-resizer {
-  display: inline-block;
-}
-.data-table-col:hover .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-row.row-highlight {
-  background-color: #f5f7fa;
-}
-.noselect {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-body.data-table-resize {
-  cursor: col-resize;
-}
-.data-table {
-  margin-left: -1px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.data-table .data-table-col .edit-cell {
-  padding: 0;
-}
-.data-table .data-table-col .edit-cell input {
-  font-size: inherit;
-  height: 27px;
-}
-.data-table .data-table-col .content {
-  padding: 0.5rem;
-}
-.data-table .frappe-control {
-  margin: 0;
-}
-.data-table .form-group {
-  margin: 0;
-}
-.data-table .form-control {
-  border-radius: 0px;
-  border: none;
-}
-.data-table .link-btn {
-  top: 6px;
-}
-.data-table select {
-  height: 27px;
-}
-.data-table .checkbox {
-  margin: 7px 0 7px 8px;
-}
-.data-table [data-fieldtype="Color"] .control-input {
-  overflow: hidden;
-}
-.data-table .body-scrollable::-webkit-scrollbar {
-  display: none;
-}
-.data-table .data-table-header {
-  background-color: #F7FAFC;
-  color: #8D99A6;
-}
-.data-table .data-table-row.row-update {
-  animation: 500ms breathe forwards;
-}
-.data-table .data-table-row.row-highlight {
-  background-color: #fffdf4;
-}
-@keyframes breathe {
-  0% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: #fffdf4;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-/* variables */
-.data-table {
-  /* styling */
-  width: 100%;
-  position: relative;
-  overflow: auto;
-}
-/* resets */
-.data-table *,
-.data-table *::after,
-.data-table *::before {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.data-table button,
-.data-table input {
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-}
-.data-table *,
-.data-table *:focus {
-  outline: none;
-  border-radius: 0px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.data-table table {
-  border-collapse: collapse;
-}
-.data-table table td {
-  padding: 0;
-  border: 1px solid #d1d8dd;
-}
-.data-table thead td {
-  border-bottom-width: 1px;
-}
-.data-table .freeze-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #f5f7fa;
-  opacity: 0.5;
-  font-size: 2em;
-}
-.data-table .freeze-container span {
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-.data-table .trash-container {
-  position: absolute;
-  bottom: 0;
-  left: 30%;
-  right: 30%;
-  height: 70px;
-  background: palevioletred;
-  opacity: 0.5;
-}
-.body-scrollable {
-  max-height: 500px;
-  overflow: auto;
-  border-bottom: 1px solid #d1d8dd;
-}
-.body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {
-  background-color: #f5f7fa;
-}
-.data-table-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: white;
-  font-weight: bold;
-}
-.data-table-header .content span:not(.column-resizer) {
-  cursor: pointer;
-}
-.data-table-header .column-resizer {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 4px;
-  width: 0.25rem;
-  height: 100%;
-  background-color: #5292f7;
-  cursor: col-resize;
-}
-.data-table-header .data-table-dropdown {
-  position: absolute;
-  right: 10px;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: top;
-  text-align: left;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {
-  display: block;
-}
-.data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-header .data-table-dropdown-toggle {
-  display: none;
-  background-color: transparent;
-  border: none;
-}
-.data-table-header .data-table-dropdown-list {
-  display: none;
-  font-weight: normal;
-  position: absolute;
-  min-width: 128px;
-  min-width: 8rem;
-  top: 100%;
-  right: 0;
-  z-index: 1;
-  background-color: white;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  padding-bottom: 8px;
-  padding-bottom: 0.5rem;
-  padding-top: 8px;
-  padding-top: 0.5rem;
-}
-.data-table-header .data-table-dropdown-list > div {
-  padding: 8px 16px;
-  padding: 0.5rem 1rem;
-}
-.data-table-header .data-table-dropdown-list > div:hover {
-  background-color: #f5f7fa;
-}
-.data-table-header .data-table-col.remove-column {
-  background-color: #FD8B8B;
-  -webkit-transition: 300ms background-color ease-in-out;
-  transition: 300ms background-color ease-in-out;
-}
-.data-table-header .data-table-col.sortable-chosen {
-  background-color: #f5f7fa;
-}
-.data-table-col {
-  position: relative;
-}
-.data-table-col .content {
-  padding: 8px;
-  padding: 0.5rem;
-  border: 2px solid transparent;
-}
-.data-table-col .content.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.data-table-col .edit-cell {
-  display: none;
-  padding: 8px;
-  padding: 0.5rem;
-  background: #fff;
-  z-index: 1;
-  height: 100%;
-}
-.data-table-col .edit-cell input {
-  outline: none;
-  width: 100%;
-  border: none;
-}
-.data-table-col.selected .content {
-  border: 2px solid #5292f7;
-}
-.data-table-col.editing .content {
-  display: none;
-}
-.data-table-col.editing .edit-cell {
-  border: 2px solid #5292f7;
-  display: block;
-}
-.data-table-col.highlight {
-  background-color: #f5f7fa;
-}
-.data-table-col:hover .column-resizer {
-  display: inline-block;
-}
-.data-table-col:hover .data-table-dropdown-toggle {
-  display: block;
-}
-.data-table-row.row-highlight {
-  background-color: #f5f7fa;
-}
-.noselect {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-body.data-table-resize {
-  cursor: col-resize;
-}
-.data-table {
-  margin-left: -1px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.data-table .data-table-col .edit-cell {
-  padding: 0;
-}
-.data-table .data-table-col .edit-cell input {
-  font-size: inherit;
-  height: 27px;
-}
-.data-table .data-table-col .content {
-  padding: 0.5rem;
-}
-.data-table .frappe-control {
-  margin: 0;
-}
-.data-table .form-group {
-  margin: 0;
-}
-.data-table .form-control {
-  border-radius: 0px;
-  border: none;
-}
-.data-table .link-btn {
-  top: 6px;
-}
-.data-table select {
-  height: 27px;
-}
-.data-table .checkbox {
-  margin: 7px 0 7px 8px;
-}
-.data-table [data-fieldtype="Color"] .control-input {
-  overflow: hidden;
-}
-.data-table .body-scrollable::-webkit-scrollbar {
-  display: none;
-}
-.data-table .data-table-header {
-  background-color: #F7FAFC;
-  color: #8D99A6;
-}
-.data-table .data-table-row.row-update {
-  animation: 500ms breathe forwards;
-}
-.data-table .data-table-row.row-highlight {
-  background-color: #fffdf4;
-}
-@keyframes breathe {
-  0% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: #fffdf4;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
diff --git a/foundation/public/css/variables.css b/foundation/public/css/variables.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/foundation/public/less/base.less b/foundation/public/less/base.less
index 888e1410..485d6af7 100644
--- a/foundation/public/less/base.less
+++ b/foundation/public/less/base.less
@@ -1,104 +1,110 @@
-@import "variables.less";
-
 /*utilities*/
 .align-items-center {
-  align-items: center;
+	align-items: center;
 }
 
 .hide,
 .hidden {
-  display: none;
-  visibility: hidden;
+	display: none;
+	visibility: hidden;
 }
 
 .top-zero {
-  margin-top: 0;
+	margin-top: 0;
 }
 
 .bottom-zero {
-  margin-bottom: 0;
+	margin-bottom: 0;
 }
 
 .top-spacer {
-  margin-top: 2.5rem;
+	margin-top: 2.5rem;
 }
 
 .bottom-spacer {
-  margin-bottom: 2.5rem;
+	margin-bottom: 2.5rem;
+}
+
+.top-spacer-4 {
+	margin-top: 4rem;
 }
 
 .bottom-spacer-4 {
-  margin-bottom: 4rem;
+	margin-bottom: 4rem;
 }
 
 .gray-bg {
-  background-color: @light-bg;
+	background-color: @light-bg;
 }
 
 .dark-bg {
-  background-color: @text-dark;
+	background-color: @text-dark;
 }
 
 .left-aligned {
-  text-align: left;
+	text-align: left;
 }
 
 .right-aligned {
-  text-align: right;
+	text-align: right;
 }
 
 .text-center {
-  text-align: center;
+	text-align: center;
 }
 
 .text-muted {
-  color: @text-muted;
+	color: @text-muted;
 }
 
 .text-light {
-  color: @text-light;
+	color: @text-light;
 }
 
 .text-white {
-  color: #fff;
+	color: #fff;
 }
 
 .text-medium {
-  font-size: 1.5rem;
+	font-size: 1.5rem;
 }
 
 .text-small {
-  font-size: 0.5rem;
+	font-size: 0.5rem;
 }
 
 .centered {
-  margin: 0 auto;
+	margin: 0 auto;
 }
 
 .bold {
-  font-weight: bold;
+	font-weight: bold;
 }
 
 .list-unstyled {
-  padding: 0;
+	padding: 0;
 
-  li {
-    list-style: none;
-  }
+	li {
+		list-style: none;
+	}
 }
 
 .list-circle {
-  list-style: circle;
+	list-style: circle;
 }
 
 .border {
-  border: 1px solid @border-color;
+	border: @border;
+}
+
+.border-top {
+	border-top: @border;
 }
 
 .saturate {
-  filter: grayscale(100%);
+	filter: grayscale(100%);
 
-  &:hover {
-    filter: grayscale(0%);
-  }
+	&:hover {
+		filter: grayscale(0%);
+	}
 }
diff --git a/foundation/public/less/erpnext-org-theme.less b/foundation/public/less/erpnext-org-theme.less
index bab714f8..a95ea490 100644
--- a/foundation/public/less/erpnext-org-theme.less
+++ b/foundation/public/less/erpnext-org-theme.less
@@ -1,721 +1,731 @@
 @import "variables.less";
 @import "base.less";
 @import (css) "reset.css";
-@import (css) "indicator.css";
+@import "indicator.less";
 
 a {
-  color: @brand-primary;
-  text-decoration: none;
-  transition: color @transition;
+	color: @brand-primary;
+	text-decoration: none;
+	transition: color @transition;
 
-  &:hover {
-    color: @text-dark;
-    text-decoration: underline;
-  }
+	&:hover {
+		color: @text-dark;
+		text-decoration: underline;
+	}
 
-  &:focus,
-  &:visited {
-    outline: 0;
-    background-color: transparent;
-  }
+	&:focus,
+	&:visited {
+		outline: 0;
+		background-color: transparent;
+	}
 }
 
 .header1 {
-  font-size: 2.5rem;
-  line-height: 1.025;
+	font-size: 2.5rem;
+	line-height: 1.025;
 }
 
 .header2 {
-  font-size: 1.5rem;
-  line-height: 1.025;
+	font-size: 1.5rem;
+	line-height: 1.025;
 }
 
 .header3 {
-  font-size: 1rem;
-  line-height: 1.025;
+	font-size: 1rem;
+	line-height: 1.025;
 }
 
 .navbar {
-  padding: 1rem;
-  background-color: #fff;
+	padding: 1rem;
+	background-color: #fff;
+	box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
 
-  @media screen and (min-width: @screen-xs) {
-    padding: 1rem 2.5rem;
-  }
+	@media screen and (min-width: @screen-xs) {
+		padding: 1rem 2.5rem;
+	}
 }
 
 .navbar-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
 .navbar-icon {
-  width: 1.5rem;
-  margin-right: 0.5rem;
-  padding-bottom: 0.07rem;
+	width: 1.5rem;
+	margin-right: 0.5rem;
+	padding-bottom: 0.07rem;
 }
 
 .navbar-brand {
-  font-size: 1rem;
-  font-weight: bold;
-  letter-spacing: 0.005em;
-  text-decoration: none;
-  color: @text-color;
+	font-size: 1rem;
+	font-weight: bold;
+	letter-spacing: 0.005em;
+	text-decoration: none;
+	color: @text-color;
 
-  &:hover {
-    text-decoration: none;
-    color: @text-dark;
-  }
+	&:hover {
+		text-decoration: none;
+		color: @text-dark;
+	}
 }
 
 .navbar-brand:visited {
-  color: @text-color;
+	color: @text-color;
 }
 
 .menu {
-  display: flex;
-  margin: 0;
+	display: flex;
+	margin: 0;
 }
 
 .menu-items {
-  padding-left: 1.5rem;
+	padding-left: 1.5rem;
 }
 
 .menu-links {
-  color: @text-light;
-  text-decoration: none;
+	color: @text-light;
+	text-decoration: none;
 
-  &:hover {
-    text-decoration: none;
-  }
+	&:hover {
+		text-decoration: none;
+	}
 }
 
-.container {
-  max-width: 100%;
-  margin: 0 auto;
+.container,
+.page-content-wrapper {
+	max-width: 100%;
+	margin: 0 auto;
 
-  @media screen and (min-width: @screen-md) {
-    max-width: @screen-md;
-  }
+	@media screen and (min-width: @screen-md) {
+		max-width: @screen-md;
+	}
 }
 
 .feature,
 .footer {
-  padding: 4rem 1rem;
-  border-top: 1px solid @light-border-color;
+	padding: 4rem 1rem;
+	border-top: 1px solid @light-border-color;
 
-  @media screen and (min-width: @screen-xs) {
-    padding: 8rem 2.5rem;
-  }
+	@media screen and (min-width: @screen-xs) {
+		padding: 8rem 2.5rem;
+	}
 }
 
 .page {
-  padding: 0 1rem;
-  border-top: 1px solid @light-border-color;
+	padding: 0 1rem;
+	border-top: 1px solid @light-border-color;
+
+	@media screen and (min-width: @screen-xs) {
+		padding: 0 2.5rem;
+	}
 }
 
 .hero-illustration {
-  width: 100%;
-  max-width: 800px;
+	width: 100%;
+	max-width: 800px;
 }
 
 .list-items {
-  text-align: center;
-  border-radius: 0.5rem;
-  background-color: #fff;
-  min-width: 200px;
-  transition: all @transition;
+	text-align: center;
+	border-radius: 0.5rem;
+	background-color: #fff;
+	min-width: 200px;
+	transition: all @transition;
 
-  &:hover {
-    box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
-  }
+	&:hover {
+		box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
+	}
 }
 
 .grid-of-four,
 .grid-of-three {
-  grid-gap: 2.5rem;
-  display: grid;
+	grid-gap: 2.5rem;
+	display: grid;
 }
 
 .grid-of-four {
-  grid-template-columns: repeat(1, 1fr);
+	grid-template-columns: repeat(1, 1fr);
 
-  @media screen and (min-width: @screen-palm) {
-    grid-template-columns: repeat(2, 1fr);
-  }
+	@media screen and (min-width: @screen-palm) {
+		grid-template-columns: repeat(2, 1fr);
+	}
 
-  @media screen and (min-width: @screen-xs) {
-    grid-template-columns: repeat(3, 1fr);
-  }
+	@media screen and (min-width: @screen-xs) {
+		grid-template-columns: repeat(3, 1fr);
+	}
 
-  @media screen and (min-width: @screen-sm) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+	@media screen and (min-width: @screen-sm) {
+		grid-template-columns: repeat(4, 1fr);
+	}
 }
 
 .grid-of-three {
-  grid-template-columns: repeat(1, 1fr);
+	grid-template-columns: repeat(1, 1fr);
 
-  @media screen and (min-width: @screen-palm) {
-    grid-template-columns: repeat(2, 1fr);
-  }
+	@media screen and (min-width: @screen-palm) {
+		grid-template-columns: repeat(2, 1fr);
+	}
 
-  @media screen and (min-width: @screen-xs) {
-    grid-template-columns: repeat(3, 1fr);
-  }
+	@media screen and (min-width: @screen-xs) {
+		grid-template-columns: repeat(3, 1fr);
+	}
 }
 
 .two-column,
 .three-column,
 .four-column {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
 
-  @media screen and (min-width: @screen-xs) {
-    flex-direction: row;
-  }
+	@media screen and (min-width: @screen-xs) {
+		flex-direction: row;
+	}
 }
 
 .contact-content {
-  max-width: 90%;
+	max-width: 90%;
 
-  @media screen and (min-width: @screen-palm) {
-    max-width: 50%;
-  }
+	@media screen and (min-width: @screen-palm) {
+		max-width: 50%;
+	}
 }
 
 .columns {
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
 
-  @media screen and (min-width: @screen-xs) {
-    margin: 0;
-  }
+	@media screen and (min-width: @screen-xs) {
+		margin: 0;
+	}
 }
 
 .countries {
-  max-width: 100%;
+	max-width: 100%;
 
-  @media screen and (min-width: @screen-palm) {
-    max-width: 50%;
-    min-width: 50%;
-  }
+	@media screen and (min-width: @screen-palm) {
+		max-width: 50%;
+		min-width: 50%;
+	}
 
-  @media screen and (min-width: @screen-xs) {
-    max-width: 25%;
-    min-width: 25%;
-  }
+	@media screen and (min-width: @screen-xs) {
+		max-width: 25%;
+		min-width: 25%;
+	}
 }
 
 .flex-wrap {
-  flex-wrap: wrap;
-  justify-content: flex-start;
+	flex-wrap: wrap;
+	justify-content: flex-start;
 }
 
 .intro-copy {
-  max-width: @screen-md/2;
-  margin: 0 auto 1.5rem auto;
+	max-width: @screen-md/2;
+	margin: 0 auto 1.5rem auto;
 }
 
 .primary-links {
-  color: @text-light;
-  transition: all @transition;
+	color: @text-light;
+	transition: all @transition;
 
-  &:hover {
-    color: @text-dark;
-    text-decoration: none;
-  }
+	&:hover {
+		color: @text-dark;
+		text-decoration: none;
+	}
 }
 
 .button {
-  padding: 1rem 1.5rem;
-  border-radius: 0.25em;
-  cursor: pointer;
-  transition: all @transition;
-  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
-  text-decoration: none;
+	padding: 1rem 1.5rem;
+	border-radius: 0.25em;
+	cursor: pointer;
+	transition: all @transition;
+	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
+	text-decoration: none;
 
-  &:hover {
-    text-decoration: none;
-  }
+	&:hover {
+		text-decoration: none;
+	}
 }
 
 .button-primary {
-  font-size: 1.5em;
-  color: #fff;
-  background: @brand-primary;
-  border-right: 0;
-  border-left: 0;
-  border-top: 0;
-  line-height: 3;
+	font-size: 1.5em;
+	color: #fff;
+	background: @brand-primary;
+	border-right: 0;
+	border-left: 0;
+	border-top: 0;
+	line-height: 3;
 
-  &:hover {
-    background: @button-primary-hover;
-    color: #fff;
-  }
+	&:hover {
+		background: @button-primary-hover;
+		color: #fff;
+	}
 }
 
 .button-secondary {
-  font-size: 1.5em;
-  color: @text-light;
-  background: @btn-bg;
-  border-right: 0;
-  border-left: 0;
-  border-top: 0;
-  line-height: 3;
+	font-size: 1.5em;
+	color: @text-light;
+	background: @btn-bg;
+	border-right: 0;
+	border-left: 0;
+	border-top: 0;
+	line-height: 3;
 
-  &:hover {
-    background: @button-secondary-hover;
-    color: @text-dark;
-  }
+	&:hover {
+		background: @button-secondary-hover;
+		color: @text-dark;
+	}
 }
 
 .secondary-link {
-  color: @text-light;
-  transition: color @transition;
+	color: @text-light;
+	transition: color @transition;
 
-  &:hover {
-    color: @text-dark;
-  }
+	&:hover {
+		color: @text-dark;
+	}
 }
 
 .bulleted-list {
-  margin: 0;
-  padding-left: 1em;
+	margin: 0;
+	padding-left: 1em;
 
-  li {
-    padding-bottom: 1em;
-  }
+	li {
+		padding-bottom: 1em;
+	}
 }
 
 .footer-list {
-  padding-left: 0;
+	padding-left: 0;
 }
 
 .page_content li,
 .sidebar-item,
 .footer-list li {
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
 }
 
 .page-container {
-  display: flex;
-  max-width: @screen-md;
-  margin: 0 auto;
-  flex-direction: column-reverse;
+	display: flex;
+	max-width: @screen-md;
+	margin: 0 auto;
+	flex-direction: column-reverse;
 
-  @media screen and (min-width: @screen-xs) {
-    flex-direction: row;
-  }
+	@media screen and (min-width: @screen-xs) {
+		flex-direction: row;
+	}
 }
 
 .page-content {
-  width: 100%;
-  padding: 4rem 0;
+	width: 100%;
+	padding: 4rem 0;
 
-  h1:first-child {
-    margin-top: 0;
-  }
+	h1:first-child {
+		margin-top: 0;
+	}
 }
 
 .breadcrumb {
-  padding: 0;
-  margin-bottom: 1.5rem;
+	padding: 0;
+	margin-bottom: 1.5rem;
 
-  a {
-    background-color: transparent;
-    color: @text-muted;
+	a {
+		background-color: transparent;
+		color: @text-muted;
 
-    &:focus,
-    &:visited {
-      background-color: transparent;
-      color: @text-muted;
-    }
+		&:focus,
+		&:visited {
+			background-color: transparent;
+			color: @text-muted;
+		}
 
-    &:hover {
-      color: @text-dark;
-      transition: color @transition;
-    }
-  }
+		&:hover {
+			color: @text-dark;
+			transition: color @transition;
+		}
+	}
 }
 
 .breadcrumb > li {
-  display: inline-block;
+	display: inline-block;
 }
 
 .breadcrumb > li + li::before {
-  padding: 0 5px;
-  color: @text-muted;
-  content: "/\00a0";
+	padding: 0 5px;
+	color: @text-muted;
+	content: "/\00a0";
 }
 
 .sidebar-block {
-  padding: 4rem 0;
-  min-width: 200px;
-  border-top: 1px solid @light-border-color;
+	padding: 4rem 0;
+	min-width: 200px;
+	border-top: 1px solid @light-border-color;
 
-  @media screen and (min-width: @screen-xs) {
-    border-right: 1px solid @light-border-color;
-    border-top: 0;
-  }
+	@media screen and (min-width: @screen-xs) {
+		border-right: 1px solid @light-border-color;
+		border-top: 0;
+	}
 }
 
 .blog-page {
-  padding: 4rem 0;
-  max-width: 700px;
-  margin: 0 auto;
+	padding: 4rem 0;
+	max-width: 700px;
+	margin: 0 auto;
 }
 
 .page-content.with-sidebar {
-  @media screen and (min-width: @screen-xs) {
-    padding: 4rem 0 4rem 2.5rem;
-  }
+	@media screen and (min-width: @screen-xs) {
+		padding: 4rem 0 4rem 2.5rem;
+	}
 
-  padding: 1rem;
+	padding: 1rem;
 }
 
 hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border: 0;
-  border-top: 1px solid @light-border-color;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	border: 0;
+	border-top: 1px solid @light-border-color;
 }
 
 .footer-end {
-  border-top: 1px solid @dark-border-color;
-  padding-top: 1rem;
-  margin-top: 1rem;
-  font-size: 0.75rem;
+	border-top: 1px solid @dark-border-color;
+	padding-top: 1rem;
+	margin-top: 1rem;
+	font-size: 0.75rem;
 
-  @media screen and (min-width: @screen-xs) {
-    padding-top: 1.5rem;
-    margin-top: 1.5rem;
-  }
+	@media screen and (min-width: @screen-xs) {
+		padding-top: 2.5rem;
+		margin-top: 1.5rem;
+	}
 }
 
 .footer a {
-  color: @text-muted;
+	color: @text-muted;
 
-  &:hover {
-    color: #fff;
-  }
+	&:hover {
+		color: #fff;
+	}
 }
 
 .footer-icon {
-  width: 1.5rem;
-  margin-right: 0.5em;
+	width: 1.5rem;
+	margin-right: 0.5em;
 }
 
 /* loaned from bootstrap need to cleanup*/
 
 /*progress bar*/
 .progress {
-  height: 1.5rem;
-  margin-bottom: 1.5rem;
-  overflow: hidden;
-  background-color: #f5f5f5;
-  border-radius: 0.25rem;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+	height: 1.5rem;
+	margin-bottom: 1.5rem;
+	overflow: hidden;
+	background-color: #f5f5f5;
+	border-radius: 0.25rem;
+	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.progress-bar {
+	height: inherit;
 }
 
 .progress-bar-success {
-  background-color: #98d85b;
+	background-color: #98d85b;
 }
 
 .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
 }
 
 /*progress bar*/
 .clickable a {
-  color: @text-color;
+	color: @text-color;
 }
 
 .clickable a:focus {
-  outline: 0;
+	outline: 0;
 }
 
 .fade.in {
-  opacity: 1;
+	opacity: 1;
 }
 
 caption {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  color: @text-muted;
-  text-align: left;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	color: @text-muted;
+	text-align: left;
 }
 
 th {
-  text-align: left;
+	text-align: left;
 }
 
 .btn-group,
 .btn-group-vertical {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
 }
 
 .note-popover .popover-content > .btn-group,
 .panel-heading.note-toolbar > .btn-group {
-  margin-top: 5px;
-  margin-right: 5px;
-  margin-left: 0;
+	margin-top: 5px;
+	margin-right: 5px;
+	margin-left: 0;
 }
 
 .note-popover .popover-content,
 .panel-heading.note-toolbar {
-  padding: 0 0 5px 5px;
-  margin: 0;
+	padding: 0 0 5px 5px;
+	margin: 0;
 }
 
 .panel-heading {
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid transparent;
-  border-top-left-radius: 0.25em;
-  border-top-right-radius: 0.25em;
+	padding: 0.5rem 1rem;
+	border-bottom: 1px solid transparent;
+	border-top-left-radius: 0.25em;
+	border-top-right-radius: 0.25em;
 }
 
 .panel-default > .panel-heading {
-  color: #333;
-  background-color: #f7fafc;
-  border-color: @border-color;
+	color: #333;
+	background-color: #f7fafc;
+	border-color: @border-color;
 }
 
 .panel-body {
-  padding-left: 1rem;
+	padding-left: 1rem;
 }
 
 .modal {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1040;
-  display: none;
-  overflow: hidden;
-  outline: 0;
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1040;
+	display: none;
+	overflow: hidden;
+	outline: 0;
 }
 
 .modal-open .modal {
-  overflow-x: hidden;
-  overflow-y: auto;
+	overflow-x: hidden;
+	overflow-y: auto;
 }
 
 .modal-backdrop.in {
-  filter: alpha(opacity=50);
-  opacity: 0.5;
+	filter: alpha(opacity=50);
+	opacity: 0.5;
 }
 
 .modal-backdrop {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  background-color: #334143;
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	background-color: #334143;
 }
 
 .modal-dialog {
-  width: 600px;
-  margin: 2rem auto;
+	width: 600px;
+	margin: 2rem auto;
 }
 
 .modal.in .modal-dialog {
-  transform: translate(0, 0);
+	transform: translate(0, 0);
 }
 
 .modal-content {
-  position: relative;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #d1d8dd;
-  border-radius: 0.25rem;
-  outline: 0;
-  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+	position: relative;
+	background-color: #fff;
+	background-clip: padding-box;
+	border: 1px solid #d1d8dd;
+	border-radius: 0.25rem;
+	outline: 0;
+	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
 }
 
 .modal-header {
-  min-height: 1rem;
-  padding: 1rem;
-  border-bottom: 1px solid #d1d8dd;
+	min-height: 1rem;
+	padding: 1rem;
+	border-bottom: 1px solid #d1d8dd;
 }
 
 .modal-title {
-  margin: 0;
-  line-height: 1.42857143;
+	margin: 0;
+	line-height: 1.42857143;
 }
 
 .modal-body {
-  position: relative;
-  padding: 1rem;
+	position: relative;
+	padding: 1rem;
 }
 
 .close {
-  float: right;
-  font-size: 1.5rem;
-  font-weight: bold;
-  line-height: 1;
-  color: #000;
-  text-shadow: 0 1px 0 #fff;
-  filter: alpha(opacity=20);
-  opacity: 0.2;
+	float: right;
+	font-size: 1.5rem;
+	font-weight: bold;
+	line-height: 1;
+	color: #000;
+	text-shadow: 0 1px 0 #fff;
+	filter: alpha(opacity=20);
+	opacity: 0.2;
 }
 
 .modal-header .close {
-  margin-top: -2px;
+	margin-top: -2px;
 }
 
 .close:hover,
 .close:focus {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer;
-  filter: alpha(opacity=50);
-  opacity: 0.5;
+	color: #000;
+	text-decoration: none;
+	cursor: pointer;
+	filter: alpha(opacity=50);
+	opacity: 0.5;
 }
 
 .btn-default {
-  color: inherit;
-  background-color: #f0f4f7;
-  border-color: transparent;
+	color: inherit;
+	background-color: #f0f4f7;
+	border-color: transparent;
 }
 
 .btn {
-  display: inline-block;
-  padding: 0.25em 0.75em;
-  margin-bottom: 0;
-  font-size: 1em;
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  background-image: none;
-  border: 1px solid transparent;
-  border-radius: 0.25em;
+	display: inline-block;
+	padding: 0.25em 0.75em;
+	margin-bottom: 0;
+	font-size: 1em;
+	font-weight: normal;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+	cursor: pointer;
+	user-select: none;
+	background-image: none;
+	border: 1px solid transparent;
+	border-radius: 0.25em;
 }
 
 .btn-block {
-  background-image: none;
-  border: 1px solid transparent;
-  border-radius: 0.25em;
-  display: block;
-  width: 100%;
+	background-image: none;
+	border: 1px solid transparent;
+	border-radius: 0.25em;
+	display: block;
+	width: 100%;
 }
 
 .form-control {
-  display: block;
-  width: 100%;
-  height: 2em;
-  padding: 0.5em;
-  color: #2e3338;
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #d1d8dd;
-  border-radius: 0.25em;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  transition: border-color ease-out 0.15s, box-shadow ease-out 0.15s;
+	display: block;
+	width: 100%;
+	height: 2em;
+	padding: 0.5em;
+	color: #2e3338;
+	background-color: #fff;
+	background-image: none;
+	border: 1px solid #d1d8dd;
+	border-radius: 0.25em;
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	transition: border-color ease-out 0.15s, box-shadow ease-out 0.15s;
 }
 
 .form-signin .form-control {
-  position: relative;
-  height: auto;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 0.5rem;
-  margin-bottom: 0.5rem;
+	position: relative;
+	height: auto;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	padding: 0.5rem;
+	margin-bottom: 0.5rem;
 }
 
 code {
-  color: #fc4f51;
-  background: #fff5f5;
-  padding: 0.25em;
-  border-radius: 0.25em;
-  font-size: 0.85em;
+	color: #fc4f51;
+	background: #fff5f5;
+	padding: 0.25em;
+	border-radius: 0.25em;
+	font-size: 0.85em;
 }
 
 /*loaned from frappe*/
 textarea.form-control {
-  height: auto;
+	height: auto;
 }
 
 .col-sm-6 {
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
 }
 
 .col-sm-8 {
-  @media screen and (min-width: @screen-xs) {
-    width: 66.66%;
-  }
+	@media screen and (min-width: @screen-xs) {
+		width: 66.66%;
+	}
 }
 
 .comment-view {
-  padding-bottom: 2.5rem;
+	padding-bottom: 2.5rem;
 }
 
 .no-results {
-  text-align: center;
-  padding: 10rem 0;
+	text-align: center;
+	padding: 10rem 0;
 }
 
 .add-comment-section {
-  padding-bottom: 2rem;
+	padding-bottom: 2rem;
 }
 
 .comment-header {
-  border-bottom: @border;
-  padding: 2rem 0 1rem;
+	border-bottom: @border;
+	padding: 2rem 0 1rem;
 }
 
 .comment-row {
-  margin: 0 1rem;
-  padding: 1rem;
+	margin: 0 1rem;
+	padding: 1rem;
 }
 
 .comment-row:last-child {
-  margin-bottom: 2rem;
-  border-bottom: 0;
+	margin-bottom: 2rem;
+	border-bottom: 0;
 }
 
 .page-card {
-  max-width: 360px;
-  padding: 1em;
-  margin: 8rem auto;
-  border: @border;
-  border-radius: 0.25em;
-  background-color: #fff;
-  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+	max-width: 360px;
+	padding: 1em;
+	margin: 8rem auto;
+	border: @border;
+	border-radius: 0.25em;
+	background-color: #fff;
+	box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
 }
 
 .page-card .page-card-head {
-  padding: 0.75em 1em;
-  margin: -1em;
-  margin-bottom: 1em;
-  border-bottom: @border;
+	padding: 0.75em 1em;
+	margin: -1em;
+	margin-bottom: 1em;
+	border-bottom: @border;
 }
 
 .login-content .btn {
-  margin-top: 3rem;
+	margin-top: 3rem;
 }
 
 .btn-primary {
-  background-color: @brand-primary;
-  border-color: @brand-primary;
-  color: #fff;
-  transition: background-color 0.3s ease-in;
+	background-color: @brand-primary;
+	border-color: @brand-primary;
+	color: #fff;
+	transition: background-color 0.3s ease-in;
 }
 
 .btn-primary:hover,
@@ -724,28 +734,28 @@ textarea.form-control {
 .btn-primary:active,
 .btn-primary.active,
 .open > .dropdown-toggle.btn-primary {
-  color: #fff;
-  background-color: @button-primary-hover;
-  border-color: @button-primary-hover;
-  text-decoration: none;
+	color: #fff;
+	background-color: @button-primary-hover;
+	border-color: @button-primary-hover;
+	text-decoration: none;
 }
 
 .screenshot,
 .img-responsive {
-  max-width: 800px;
-  margin: auto;
-  width: auto;
+	max-width: 800px;
+	margin: auto;
+	width: auto;
 }
 
 img.blog-cover-image,
 .blog-text img,
 .screenshot {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid #d1d8dd;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+	border: 1px solid #d1d8dd;
 }
 
 .btn-next-wrapper {
-  margin-top: 4rem;
+	margin-top: 4rem;
 }
 
 /*blog*/
@@ -753,204 +763,204 @@ img.blog-cover-image,
 /*TODO Needs refactor in frappe to use utilities.less*/
 
 .blog-list-content {
-  border: 0;
-  background: transparent;
+	border: 0;
+	background: transparent;
 }
 
 .blog-list-item {
-  padding-bottom: 4rem;
-  border-bottom: 1px solid @navbar-default-border;
+	padding-bottom: 4rem;
+	border-bottom: 1px solid @navbar-default-border;
 
-  &:last-child {
-    border-bottom: 0;
-  }
+	&:last-child {
+		border-bottom: 0;
+	}
 
-  a {
-    color: @text-color;
-  }
+	a {
+		color: @text-color;
+	}
 
-  h1{
-    margin-top: 0;
-  }
+	h1{
+		margin-top: 0;
+	}
 }
 
 .blog-list-item:not(:first-child) {
-  padding-top: 4rem;
+	padding-top: 4rem;
 }
 
 .blogpost-cover-img {
-  width: 75%;
-  margin-bottom: 0.5rem;
+	width: 75%;
+	margin-bottom: 0.5rem;
 }
 
 .blog-header {
-  font-size: 2.5rem;
+	font-size: 2.5rem;
 }
 
 .blog-container img {
-  margin-bottom: 1.5rem;
+	margin-bottom: 1.5rem;
 }
 
 .blog-comments {
-  position: relative;
-  border-top: @border;
+	position: relative;
+	border-top: @border;
 }
 
 .blog-info {
-  margin: 2.5rem 0;
+	margin: 2.5rem 0;
 }
 
 .blog-text {
-  font-size: 1.15em;
-  line-height: 1.62;
+	font-size: 1.15em;
+	line-height: 1.62;
 }
 
 .blog-content {
-  margin-bottom: 2.5rem;
+	margin-bottom: 2.5rem;
 }
 
 .blogger {
-  padding-top: 0;
-  padding-bottom: 2.5rem;
+	padding-top: 0;
+	padding-bottom: 2.5rem;
 }
 
 .blogger-name {
-  margin-top: 0.25em;
-  font-weight: normal;
-  font-size: 1rem;
+	margin-top: 0.25em;
+	font-weight: normal;
+	font-size: 1rem;
 
-  a {
-    color: @text-color;
-  }
+	a {
+		color: @text-color;
+	}
 }
 
 .avatar {
-  display: inline-block;
-  width: 3rem;
-  height: 3rem;
-  margin-right: 1rem;
+	display: inline-block;
+	width: 3rem;
+	height: 3rem;
+	margin-right: 1rem;
 }
 
 .blog-list-item .avatar {
-  margin-right: 1em;
+	margin-right: 1em;
 }
 
 .avatar img {
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: 0.25em;
+	max-width: 100%;
+	max-height: 100%;
+	border-radius: 0.25em;
 }
 
 .avatar-medium {
-  margin-right: 0.25em;
-  width: 2rem;
-  height: 2rem;
+	margin-right: 0.25em;
+	width: 2rem;
+	height: 2rem;
 }
 
 .inline-block {
-  display: inline-block;
+	display: inline-block;
 }
 
 .blog-container,
 .max-width-medium {
-  max-width: 700px;
+	max-width: 700px;
 }
 
 .media {
-  display: flex;
-  background: @light-bg;
-  margin-bottom: 1.5rem;
-  border-radius: 0.25em;
-  padding: 1.5rem;
+	display: flex;
+	background: @light-bg;
+	margin-bottom: 1.5rem;
+	border-radius: 0.25em;
+	padding: 1.5rem;
 }
 
 .media-left {
-  width: 10%;
-  margin-right: 2.5rem;
+	width: 10%;
+	margin-right: 2.5rem;
 }
 
 .media-heading {
-  margin-top: 0;
+	margin-top: 0;
 }
 
 .with-border {
-  border-radius: 0.25em;
-  padding: 1rem;
-  margin-bottom: 2rem;
-  border: 1px solid @border-color;
+	border-radius: 0.25em;
+	padding: 1rem;
+	margin-bottom: 2rem;
+	border: 1px solid @border-color;
 
-  a {
-    text-decoration: none;
-    color: @text-color;
+	a {
+		text-decoration: none;
+		color: @text-color;
 
-    &:hover {
-      text-decoration: none;
-      color: @text-dark;
-    }
-  }
+		&:hover {
+			text-decoration: none;
+			color: @text-dark;
+		}
+	}
 
-  &:hover {
-    background-color: @light-bg;
-  }
+	&:hover {
+		background-color: @light-bg;
+	}
 }
 
 /* individual elements */
 
 .gold-member {
-  display: flex;
-  padding: 2.5rem 0;
-  transition: background-color @transition;
-  border-bottom: 1px solid @border-color;
+	display: flex;
+	padding: 2.5rem 0;
+	transition: background-color @transition;
+	border-bottom: 1px solid @border-color;
 
-  &:hover {
-    background-color: @light-bg;
-  }
+	&:hover {
+		background-color: @light-bg;
+	}
 }
 
 .individual-member {
-  border-bottom: 1px solid @border-color;
-  padding-bottom: 2.5rem;
+	border-bottom: 1px solid @border-color;
+	padding-bottom: 2.5rem;
 }
 
 .box {
-  padding: 1.5rem;
-  border: 1px solid @border-color;
-  border-radius: 0.25em;
-  transition: background-color @transition;
+	padding: 1.5rem;
+	border: 1px solid @border-color;
+	border-radius: 0.25em;
+	transition: background-color @transition;
 
-  &:hover {
-    background-color: @light-bg;
-  }
+	&:hover {
+		background-color: @light-bg;
+	}
 }
 
 .grid-boxes {
-  font-size: 1.5rem;
-  display: block;
-  padding: 1.5rem;
+	font-size: 1.5rem;
+	display: block;
+	padding: 1.5rem;
 
-  span {
-    display: block;
-  }
+	span {
+		display: block;
+	}
 }
 
 .thumb-small {
-  width: 100px;
+	width: 100px;
 }
 
 .grid-images {
-  width: 150px;
-  padding-bottom: 1.5rem;
+	width: 150px;
+	padding-bottom: 1.5rem;
 }
 
 .community-bg {
-  background-image: linear-gradient(to bottom, rgba(117, 116, 254, 0.52), rgb(117, 116, 254)), url("/assets/foundation/img/community-2016.jpg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: fixed;
+	background-image: linear-gradient(to bottom, rgba(117, 116, 254, 0.52), rgb(117, 116, 254)), url("/assets/foundation/img/community-2016.jpg");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-attachment: fixed;
 }
 
 .community-bg .intro-copy,
 .about .intro-copy {
-  max-width: 800px;
+	max-width: 800px;
 }
diff --git a/foundation/public/less/indicator.less b/foundation/public/less/indicator.less
index 7288b89d..42f9feeb 100644
--- a/foundation/public/less/indicator.less
+++ b/foundation/public/less/indicator.less
@@ -2,77 +2,83 @@
 
 .indicator,
 .indicator-right {
-    background:none;
-    font-size:12px;
-    vertical-align:middle;
-    font-weight:bold;
-    color:#6c7680;
+	background: none;
+	font-size: 12px;
+	vertical-align: middle;
+	font-weight: bold;
+	color: #6c7680;
 }
 
 .indicator::before,
 .indicator-right::after {
-    content:'';
-    display:inline-block;
-    height:8px;
-    width:8px;
-    border-radius:8px;
+	content: "";
+	display: inline-block;
+	height: 8px;
+	width: 8px;
+	border-radius: 8px;
 }
 
 .indicator::before {
-	margin:0 4px 0 0px;
+	margin: 0 4px 0 0;
 }
 
 .indicator-right::after {
-	margin:0 0 0 4px;
+	margin: 0 0 0 4px;
 }
 
 .indicator.grey::before,
 .indicator-right.grey::after {
-    background: @btn-bg;
+	background: @btn-bg;
 }
+
 .indicator.blue::before,
 .indicator-right.blue::after {
-    background: @indicator-blue;
+	background: @indicator-blue;
 }
+
 .indicator.red::before,
 .indicator-right.red::after {
-    background: @indicator-red;
+	background: @indicator-red;
 }
+
 .indicator.green::before,
 .indicator-right.green::after {
-    background: @indicator-green;
+	background: @indicator-green;
 }
+
 .indicator.orange::before,
 .indicator-right.orange::after {
-    background: @indicator-orange;
+	background: @indicator-orange;
 }
+
 .indicator.purple::before,
 .indicator-right.purple::after {
-    background: @indicator-purple;
+	background: @indicator-purple;
 }
+
 .indicator.darkgrey::before,
 .indicator-right.darkgrey::after {
-    background: @indicator-darkgrey;
+	background: @indicator-darkgrey;
 }
 
 .indicator.black::before,
 .indicator-right.black::after {
-    background: @text-color;
+	background: @text-color;
 }
 
 .indicator.yellow::before,
 .indicator-right.yellow::after {
-    background: @indicator-yellow;
+	background: @indicator-yellow;
 }
 
 .indicator.light-blue::before,
 .indicator-right.light-blue::after {
-    background: @indicator-light-blue;
+	background: @indicator-light-blue;
 }
 
 .indicator.lightblue::before,
 .indicator-right.lightblue::after {
-    background: @indicator-light-blue;
+	background: @indicator-light-blue;
 }
 
 .modal-header .indicator {
diff --git a/foundation/templates/includes/footer/footer.html b/foundation/templates/includes/footer/footer.html
index 751f7078..c57ded3d 100644
--- a/foundation/templates/includes/footer/footer.html
+++ b/foundation/templates/includes/footer/footer.html
@@ -118,10 +118,10 @@
         <div class="container">
             <div class="align-iten-center three-column">
                 <div class="columns">
-                <p><img class="footer-icon" src="/assets/foundation/img/erpnext-logo.svg">
+                <p><img class="footer-icon" src="/assets/foundation/img/erpnext-logo.svg" alt="ERPnext Icon">
                     &copy; <span id="year"></span> ERPNext Open Source Software Foundation.</p>
                 </div>
-                <div class="columns>
+                <div class="columns">
                     <p>Find us on
                         <a class="secondary-link" href="https://twitter.com/erpnext" target="_blank">Twitter</a>,
                         <a class="secondary-link" href="https://www.facebook.com/ERPNext/" target="_blank">Facebook</a> &
diff --git a/foundation/templates/includes/navbar/navbar.html b/foundation/templates/includes/navbar/navbar.html
index b52b08e1..11b7d491 100644
--- a/foundation/templates/includes/navbar/navbar.html
+++ b/foundation/templates/includes/navbar/navbar.html
@@ -2,13 +2,15 @@
     <div class="container">
         <div class="navbar-header">
             <div class="left">
-                <a class="navbar-brand"
-                        href="{{ url_prefix }}{{ home_page or "/"}}">
+                <a class="navbar-brand" href="{{ url_prefix }}{{ home_page or "/"}}">
                     <span>{{ brand_html or (frappe.get_hooks("brand_html") or ["Home"])[0] }}</span>
                 </a>
             </div>
             <div class="right">
                 <ul class="menu list-unstyled">
+                    <li class="menu-items">
+                        <a href="/service-providers" class="menu-links">Service providers</a>
+                    </li>
                     <li class="menu-items">
                         <a href="/blog" class="menu-links">Blog</a>
                     </li>
diff --git a/foundation/www/get-started.html b/foundation/www/get-started.html
index 5297f652..e610d3b6 100644
--- a/foundation/www/get-started.html
+++ b/foundation/www/get-started.html
@@ -1,10 +1,10 @@
 {% extends "foundation/templates/base.html" %}
 {% block title %} Get Started - ERPNext Foundation{% endblock %}
 {% block content %}
-<section class="feature text-center">
+<section class="feature">
     <div class="container">
-        <h1 class="header1">Virtual Machine Images</h1>
-        <p class='text-medium text-light bottom-spacer-4'>Download a pre-installed Virtual Box Images</p>
+        <h1 class="header1 text-center">Virtual Machine Images</h1>
+        <p class='text-medium text-light text-center bottom-spacer-4'>Download a pre-installed Virtual Box Images</p>
         <ul class="list-unstyled grid-of-three">
             <li class="list-items border grid-items">
                 <a class="primary-links grid-boxes saturate" href="http://build.erpnext.com/ERPNext-Production.ova">
@@ -30,6 +30,8 @@
                 </p>
             </li>
         </ul>
+        <p class="text-center top-spacer-4"><a class="secondary-link" href="https://github.com/frappe/frappe/wiki/The-Hitchhiker%27s-Guide-to-Installing-Frapp%C3%A9-on-Linux-OS">Read more in the wiki for manually installing ERPNext on your
+            machine</a></p>
     </div>
 </section>
 {% endblock %}