re-structure to monorepo.

packages/webapp/src/style/App.scss

@@ -0,0 +1,297 @@
+@import './normalize.scss';
+
+@import './Base.scss';
+
+// Blueprint framework.
+@import '@blueprintjs/core/src/blueprint.scss';
+@import '@blueprintjs/datetime/src/blueprint-datetime.scss';
+@import '@blueprintjs/popover2/src/blueprint-popover2.scss';
+
+@import 'basscss';
+
+// Objects
+@import 'objects/form';
+@import 'objects/switch';
+@import 'objects/typography';
+@import 'objects/buttons';
+@import 'objects/Bigcapital';
+
+// Components
+@import 'components/CustomScrollbar';
+@import 'components/dragzone';
+@import 'components/resizer';
+@import 'components/CloudSpinner';
+@import 'components/Alert';
+@import 'components/Toast';
+@import 'components/PageForm';
+@import 'components/Tooltip';
+@import 'components/Postbox';
+@import 'components/Overlay';
+@import 'components/Menu';
+@import 'components/SidebarOverlay';
+@import 'components/UniversalSearch';
+
+// Pages
+@import 'pages/view-form';
+@import 'pages/register-organizaton';
+
+// Views
+@import 'views/filter-dropdown';
+
+// fonts
+@import 'pages/fonts';
+
+.App {
+  min-width: 960px;
+}
+
+// =======
+
+body.hide-scrollbar .Pane2 {
+  overflow: hidden;
+}
+
+.bp3-fill {
+  .bp3-popover-wrapper,
+  .bp3-popover-target {
+    display: block;
+    width: 100%;
+  }
+
+  .bp3-button {
+    width: 100%;
+    justify-content: start;
+  }
+}
+
+.bp3-datepicker-caption .bp3-html-select::after {
+  margin-right: 6px;
+}
+
+.bp3-select-popover .bp3-menu {
+  max-height: 300px;
+  max-width: 400px;
+  overflow: auto;
+}
+
+.bp3-form-group .bp3-label {
+  .hint {
+    .bp3-popover-wrapper {
+      display: inline;
+    }
+  }
+
+  &:not(.bp3-inline) .hint .bp3-popover-target {
+    display: inline;
+    margin-left: 0;
+  }
+}
+
+.bp3-popover.bp3-tooltip {
+  max-width: 300px;
+}
+
+.bp3-timezone-picker {
+  .bp3-button {
+    [icon='caret-down'] {
+      display: none;
+    }
+  }
+}
+
+.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter {
+  background-color: #0066ff;
+}
+
+.ReactVirtualized__Collection {
+}
+
+.ReactVirtualized__Collection__innerScrollContainer {
+}
+
+/* Grid default theme */
+
+.ReactVirtualized__Grid {
+}
+
+.ReactVirtualized__Grid__innerScrollContainer {
+}
+
+/* Table default theme */
+
+.ReactVirtualized__Table {
+}
+
+.ReactVirtualized__Table__Grid {
+}
+
+.ReactVirtualized__Table__headerRow {
+  font-weight: 700;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ReactVirtualized__Table__row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ReactVirtualized__Table__headerTruncatedText {
+  display: inline-block;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ReactVirtualized__Table__headerColumn,
+.ReactVirtualized__Table__rowColumn {
+  margin-right: 10px;
+  min-width: 0px;
+}
+
+.ReactVirtualized__Table__rowColumn {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ReactVirtualized__Table__headerColumn:first-of-type,
+.ReactVirtualized__Table__rowColumn:first-of-type {
+  margin-left: 10px;
+}
+
+.ReactVirtualized__Table__sortableHeaderColumn {
+  cursor: pointer;
+}
+
+.ReactVirtualized__Table__sortableHeaderIconContainer {
+  display: flex;
+  align-items: center;
+}
+
+.ReactVirtualized__Table__sortableHeaderIcon {
+  flex: 0 0 24px;
+  height: 1em;
+  width: 1em;
+  fill: currentColor;
+}
+
+.ReactVirtualized__Grid,
+.ReactVirtualized__List {
+  direction: inherit !important;
+}
+
+/* List default theme */
+
+.ReactVirtualized__List {
+}
+
+.bp3-drawer {
+  box-shadow: 0 0 0;
+  background-color: #fbfbfb;
+
+  .dashboard__loading-indicator {
+    margin: auto;
+  }
+}
+
+// RTL Icons.
+html[dir='rtl'] {
+  .bp3-icon-caret-right {
+    transform: scaleX(-1);
+  }
+}
+
+html[lang^='ar'] {
+  body {
+    letter-spacing: -0.01rem;
+  }
+}
+
+.bp3-popover2 {
+  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22, 26, 0.1),
+    0 8px 24px rgba(16, 22, 26, 0.1);
+}
+
+.bp3-tooltip2 .bp3-popover2-arrow:before {
+  box-shadow: 0 0 0;
+}
+
+.dialog--pdf-preview-dialog {
+  width: 1000px;
+  max-height: 800px;
+  margin: 10px 0;
+  overflow: hidden;
+  align-self: flex-start;
+  padding-bottom: 0;
+  position: relative;
+
+  .dialog__header-actions {
+    position: absolute;
+    right: 50px;
+    top: 0;
+    z-index: 9999999;
+    margin: 6px;
+
+    .bp3-button {
+      border-color: rgba(0, 0, 0, 0.25);
+      color: rgb(25, 32, 37);
+      min-height: 30px;
+      padding-left: 14px;
+      padding-right: 14px;
+
+      & + .bp3-button {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .bp3-dialog {
+    &-body {
+      &:not(.loading) {
+        margin: 0;
+      }
+
+      > .bp3-spinner {
+        margin: 20px 0;
+      }
+    }
+  }
+}
+
+.bp3-drawer {
+  border-left: 1px solid #00115e;
+}
+
+.drawer-portal {
+  .bp3-overlay-backdrop {
+    background: rgba(0, 10, 30, 0.05);
+  }
+}
+
+.big-number {
+  font-size: 28px;
+  color: #c06361;
+  margin: 6px 0;
+  font-weight: 600;
+  margin-bottom: 0;
+}
+
+.align-right {
+  text-align: right;
+}
+.align-center {
+  text-align: center;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+
+span.table-tooltip-overview-target{
+  display: inline;
+}

packages/webapp/src/style/Base.scss

@@ -0,0 +1,3 @@
+
+@import 'variables';
+@import 'functions';

packages/webapp/src/style/components/Alert.scss

@@ -0,0 +1,7 @@
+.bp3-alert{
+  .bp3-alert-footer{
+    .bp3-button{
+      min-width: 70px;
+    }
+  }
+}

packages/webapp/src/style/components/BigAmount.scss

@@ -0,0 +1,21 @@
+
+.big-amount{
+  text-align: right;
+
+  &__label{
+    color: #5d6f90;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+  }
+  &__number{
+    margin: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+    margin-top: 6px;
+    color: #343463;
+    line-height: 1;
+    font-size: 34px;
+  }
+}

packages/webapp/src/style/components/BigcapitalLoading.scss

@@ -0,0 +1,21 @@
+.bigcapital-loading {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  display: flex;
+  background: #fff;
+  z-index: 999999;
+
+  .center {
+    width: auto;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .text {
+    margin-top: 12px;
+    opacity: 0.85;
+    display: none;
+  }
+}

packages/webapp/src/style/components/CloudSpinner.scss

@@ -0,0 +1,28 @@
+
+
+.cloud-spinner{
+  position: relative;
+
+  &.is-loading:before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 999;
+  }
+
+  .bp3-spinner{
+    position: absolute;
+    z-index: 999999;
+    left: 50%;
+    top: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+  }
+  &:not(.is-loading) .bp3-spinner{
+    display: none;
+  }
+}

packages/webapp/src/style/components/CustomScrollbar.scss

@@ -0,0 +1,53 @@
+.ScrollbarsCustom {
+  position: 'relative';
+  width: 100%;
+  height: 100%;
+}
+.ScrollbarsCustom-Wrapper {
+  position: 'absolute';
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.ScrollbarsCustom-Content {
+  box-sizing: 'border-box';
+}
+
+.ScrollbarsCustom-Track {
+  &.ScrollbarsCustom-TrackY,
+  &.ScrollbarsCustom-TrackX {
+    position: absolute;
+    overflow: hidden;
+    border-radius: 4px;
+    user-select: none;
+  }
+  &.ScrollbarsCustom-TrackX {
+    height: 10px;
+    width: calc(100% - 10px);
+    bottom: 0;
+    left: 5px;
+  }
+  &.ScrollbarsCustom-TrackY {
+    width: 10px;
+    height: calc(100% - 10px);
+    top: 5px;
+    right: 2px;
+  }
+}
+.ScrollbarsCustom-Thumb {
+  &.ScrollbarsCustom-ThumbX,
+  &.ScrollbarsCustom-ThumbY {
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  &.ScrollbarsCustom-ThumbX {
+    height: 100%;
+    width: 0px;
+  }
+  &.ScrollbarsCustom-ThumbY {
+    height: 100%;
+    width: 8px;
+  }
+}

packages/webapp/src/style/components/DataTable/DataTable.scss

@@ -0,0 +1,404 @@
+@import 'src/style/Base.scss';
+
+.bigcapital-datatable {
+  display: block;
+
+  .table {
+    text-align: left;
+    border-spacing: 0;
+    min-width: 100%;
+    display: block;
+
+    .thead .thead-inner,
+    .tbody .tbody-inner{
+      min-width: fit-content;
+    }
+
+    .thead {
+      overflow: hidden;
+
+      .th {
+        padding: 0.68rem 0.5rem;
+        background: #f5f5f5;
+        font-size: 14px;
+        color: #4E5B6F;
+        font-weight: 400;
+        border-bottom: 1px solid #d2dde2;
+
+        >div {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .sort-icon {
+        width: 0;
+        height: 0;
+        position: relative;
+        top: -2px;
+        display: inline-block;
+        margin-left: 5px;
+
+        &--desc {
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-bottom: 6px solid #666;
+        }
+
+        &--asc {
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 6px solid #666;
+        }
+      }
+    }
+
+    .tr {
+      display: flex;
+      flex: 1 0 auto;
+
+      &:last-child {
+        .td {
+          border-bottom: 0;
+        }
+      }
+
+      .bp3-context-menu-popover-target {
+        z-index: 100;
+      }
+
+      .tr-context {
+        display: flex;
+        flex: 1 0 auto;
+      }
+
+      &:hover .td.clickable {
+        cursor: pointer;
+      }
+    }
+
+    .th,
+    .td {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      justify-content: flex-start;
+      align-items: flex-start;
+      display: flex;
+      margin: 0;
+      padding: 0.5rem;
+
+      .cell-inner {
+        flex: 1 0 0;
+      }
+
+      &:last-child {
+        border-right: 0;
+      }
+
+      .bp3-control {
+        margin-bottom: 0;
+      }
+
+      .resizer {
+        display: inline-block;
+        background: transparent;
+        width: 10px;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translateX(50%);
+        z-index: 1;
+        touch-action: none;
+
+        .inner-resizer {
+          height: 100%;
+          width: 1px;
+          border-left: 1px solid #e6e6e6;
+          margin: 0 auto;
+        }
+
+        &.isResizing .inner-resizer {
+          background: #1183da;
+        }
+      }
+
+      .bp3-control.bp3-checkbox .bp3-control-indicator {
+        cursor: auto;
+
+        &,
+        &:hover {
+          height: 15px;
+          width: 15px;
+        }
+      }
+
+      .bp3-control.bp3-checkbox {
+
+        input:checked~.bp3-control-indicator,
+        input:indeterminate~.bp3-control-indicator {
+          border-color: #0052ff;
+        }
+      }
+
+      .skeleton {
+        animation: skeleton-fade-in 0.3s linear forwards,
+          skeleton-glow 1s linear infinite alternate;
+
+        animation-delay: 0s, 0.3s;
+        height: 8px;
+        opacity: 1;
+        width: 65%;
+        margin: 10px 0;
+      }
+
+      &.align-right {
+        .skeleton {
+          margin-left: auto;
+        }
+      }
+
+      &.align-center {
+        .skeleton {
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
+    }
+
+    .th {
+      .skeleton {
+        margin: 5px 0;
+      }
+    }
+
+    .tbody {
+      width: 100%;
+      overflow: auto;
+
+      .tbody-inner {
+        >.loading {
+          padding-top: 40px;
+        }
+      }
+
+      .tr .td {
+        border-bottom: 1px solid #e0e0e0;
+        align-items: center;
+        color: #101219;
+
+        .placeholder {
+          color: #a0a0a0;
+        }
+
+        .text-overview {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .bp3-form-group {
+          width: 100%;
+        }
+
+        &.is-text-overview {
+          .expend-padding {
+            display: flex;
+            width: 100%;
+          }
+        }
+      }
+
+      .tr:hover .td {
+        background: #f3f7fc;
+      }
+
+      .tr.is-context-menu-active .td {
+        background: #f3fafc;
+      }
+
+      .td.actions .#{$ns}-button {
+        background: #e6effb;
+        border: 0;
+        box-shadow: none;
+        padding: 5px 15px;
+        border-radius: 8px;
+
+        &:hover,
+        &:focus {
+          background-color: #cfdcee;
+        }
+
+        svg {
+          color: #425361;
+        }
+
+        .bp3-icon-more-h-16 {
+          margin-top: 2px;
+        }
+      }
+
+      .tr.no-results {
+        .td {
+          flex-direction: column;
+          padding: 18px 20px;
+          color: #777;
+          align-items: center;
+          font-size: 14px;
+          border-bottom: 0;
+
+          &:hover {
+            background: transparent;
+          }
+        }
+      }
+
+      >.loading {
+        padding-top: 50px;
+      }
+    }
+
+    .tr .th,
+    .tr .td {
+      .expand-toggle {
+        cursor: auto;
+        display: inline-block;
+        padding: 4px 8px;
+        padding-left: 0;
+        margin: auto 0;
+        margin-left: 4px;
+        vertical-align: top;
+
+        .expand-arrow {
+          width: 0;
+          height: 0;
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-left: 8px solid #acacac;
+          display: block;
+          transition: all 0.1s cubic-bezier(.4, 1, .75, .9);
+
+          &.is-expanded {
+            transform: rotate(90deg);
+          }
+        }
+
+        &:hover {
+          .expand-arrow {
+            border-left-color: #7d8593;
+          }
+        }
+      }
+    }
+
+    .tr-inner {
+      display: flex;
+      width: 100%;
+    }
+
+    &-size {
+
+      &--medium {
+        .tbody .tr {
+          background-size: red;
+          min-height: 46px;
+        }
+      }
+
+      &--small {
+        .tbody .tr {
+          min-height: 40px;
+        }
+      }
+    }
+  }
+
+  .no-results {
+    color: #666;
+
+    .td {
+      padding-top: 20px;
+      padding-bottom: 20px;
+      width: 100%;
+    }
+  }
+
+  &.has-sticky-header {
+    .thead {
+      .tr .th {
+        position: sticky;
+      }
+    }
+  }
+
+  &.has-sticky {
+
+    .thead,
+    .tfoot {
+      position: sticky;
+      z-index: 1;
+    }
+
+    .thead {
+      top: 0;
+    }
+
+    .tfoot {
+      bottom: 0;
+    }
+
+    .tbody {
+      position: relative;
+      z-index: 0;
+    }
+
+    [data-sticky-td] {
+      position: sticky;
+    }
+
+    [data-sticky-last-left-td] {
+
+    }
+
+    [data-sticky-first-right-td] {
+
+    }
+  }
+
+  &.has-virtualized-rows {
+    .tbody {
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+  }
+
+  .ReactVirtualized__Grid {
+    will-change: auto !important;
+  }
+}
+
+.table-constrant,
+.table--constrant {
+  .table {
+    .thead {
+      .tr:first-of-type .th {
+        border-top: 1px solid #000000;
+      }
+    }
+
+    .thead .th {
+      background: #fff;
+      color: #000;
+      border-bottom: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: #fff;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+      color: #000;
+    }
+  }
+}

packages/webapp/src/style/components/DataTable/DataTableEditable.scss

@@ -0,0 +1,249 @@
+.datatable-editor {
+  
+  .bp3-form-group {
+    margin-bottom: 0;
+  }
+  .table {
+    border: 1px solid #d2dce2;
+    border-left: transparent;
+    background-color: #FFF;
+
+    .th,
+    .td {
+      border-left: 1px solid #e2e2e2;
+
+      &.index {
+        text-align: center;
+
+        span {
+          width: 100%;
+          font-weight: 500;
+        }
+      }
+      &:first-child {
+        border-left: 1px solid #d2dce2;
+      }
+    }
+
+    .thead {
+      .tr .th {
+        padding: 10px 10px;
+        background-color: #f0f2f8;
+        font-size: 14px;
+        color: #415060;
+        border-bottom: 1px solid #d2dce2;
+
+        &.index > div {
+          width: 100%;
+        }
+      }
+    }
+
+    .tbody {
+      .tr .td {
+        padding: 4px;
+        border-bottom: 0;
+        border-top: 1px solid #d8d8d8;
+        min-height: 40px;
+
+        &.index {
+          background-color: #f0f2f8;
+          color: #718294;
+
+          > span {
+            margin-top: auto;
+            margin-bottom: auto;
+          }
+        }
+
+        &.landed-cost{
+          
+          .bp3-control{
+            margin-top: 0;
+            margin-left: 34px;
+          }
+          .bp3-control-indicator{
+            height: 18px;
+            width: 18px;
+            border-color: #dbdbdb;
+          }
+        }
+      }
+      .tr {
+        .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
+        .form-group--select-list .bp3-button {
+          border-color: #ffffff;
+          color: #222;
+          border-radius: 3px;
+        }
+        .bp3-form-group:not(.bp3-intent-danger) .bp3-input {
+          border-radius: 2px;
+          padding-left: 4px;
+          padding-right: 4px;
+
+          &:focus {
+            box-shadow: 0 0 0 2px #116cd0;
+          }
+        }
+        .form-group--select-list .bp3-button {
+          padding-left: 6px;
+          padding-right: 6px;
+
+          &:after {
+            display: none;
+          }
+        }
+        .form-group--select-list,
+        .bp3-form-group {
+          &.bp3-intent-danger {
+            .bp3-button:not(.bp3-minimal),
+            .bp3-input {
+              border-color: #f7b6b6;
+            }
+          }
+        }
+
+        &:first-of-type {
+          .td {
+            border-top: 0;
+          }
+        }
+
+        .td.actions {
+          .bp3-button {
+            background-color: transparent;
+            color: #e66d6d;
+
+            &:hover {
+              color: #c23030;
+            }
+
+            svg {
+              color: inherit;
+            }
+          }
+        }
+        &.row--total {
+          .account.td,
+          .debit.td,
+          .credit.td {
+            > span {
+              padding-top: 2px;
+            }
+          }
+
+        }
+        .td {
+          &.note {
+            .bp3-form-group {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    .tfooter{
+      .td{
+        min-height: 38px;
+      }
+    }
+    .th {
+      color: #444;
+      font-weight: 600;
+      border-bottom: 1px dotted #666;
+    }
+
+    .td {
+      border-bottom: 1px dotted #999;
+    }
+
+    .actions.td {
+      .bp3-button {
+        background: transparent;
+        margin: 0;
+      }
+    }
+
+
+    .tbody,
+    .thead,
+    .tfooter{
+
+      // .total,
+      .quantity,
+      .rate,
+      .discount,
+      .total{
+
+        &,
+        input{
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .table {
+    .tbody {
+      .tr .td.actions .bp3-button {
+        background-color: transparent;
+        color: #e66d6d;
+
+        svg {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  &__actions {
+    margin-top: 12px;
+
+    .bp3-button {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
+    .button--clear-lines {
+      &.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+        background-color: #fcefef;
+
+        &:hover{
+          background-color: #f8e4e4;
+        }
+      }
+    }
+  }
+
+  .tfooter{
+    .debit.td,
+    .credit.td {
+      > span {
+        font-weight: 600;
+        color: #444;
+      }
+    }
+    .td {
+      border-top-width: 2px;
+      border-top-color: #e9e9ef;
+      border-top-style: solid;
+      min-height: 40px;
+      font-weight: 500;
+
+
+      &:not(.index) {
+        background-color: #fcfcfd;
+      }
+
+      &:first-of-type{
+        background-color: #f0f2f8;
+      }
+
+
+      &.index span {
+        display: none;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss

@@ -0,0 +1,39 @@
+.root {
+  max-width: 500px;
+  width: 100%;
+  margin: auto;
+  padding-bottom: 40px;
+  text-align: center;
+
+  &_title {
+    font-size: 20px;
+    color: #2c3a5d;
+    font-weight: 600;
+    margin-left: auto;
+    margin-bottom: 10px;
+    margin-right: auto;
+    margin-top: 0;
+    line-height: 1.4;
+
+    html[lang='ar'] & {
+      font-size: 22px;
+    }
+  }
+  &_desc {
+    font-size: 16px;
+    color: #1f3255;
+    opacity: 0.8;
+    line-height: 1.6;
+  }
+  &_actions {
+    margin-top: 26px;
+
+    :global .bp3-button {
+      min-height: 36px;
+
+      & + .bp3-button {
+        margin-left: 10px;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/DataTable/Pagination.scss

@@ -0,0 +1,118 @@
+
+.pagination{
+  display: flex;
+  padding: 20px 14px;
+  font-size: 13px;
+
+  .bp3-button{
+    background: transparent;
+    padding: 5px;
+  }
+
+  &__item{
+    min-width: 24px;
+    min-height: 24px;
+
+    &:not([class*="bp3-intent-"]){
+      color: #666666; 
+      border-radius: 5px;
+
+      &:hover{
+        background-color: #E6EFFB;
+      }
+    }
+
+    .bp3-icon{
+      margin-right: 4px;
+      color: #666666;
+    }
+
+    .pagination .pagination__buttons-group .bp3-button-group &{
+      border-radius: 5px;
+    }
+    &--next,
+    &--previous{
+
+      &.bp3-button{
+        padding-left: 10px;
+        padding-right: 10px;
+
+        .bp3-icon {
+
+          [dir="rtl"] & {
+            transform: scale(-1);
+          }
+        }
+
+      }
+    }
+
+    &.is-active{
+      &.bp3-intent-primary:disabled,
+      &.bp3-intent-primary.bp3-disabled{
+        background-color: #E6EFFB;
+      }
+
+      &:not([class*="bp3-intent-"]) {
+      }
+      .bp3-button-text{        
+        color: #000;
+      }
+    }
+
+    &--next{
+
+      .bp3-icon{
+        order: 1;
+        margin-right: 0;
+        margin-left: 4px;
+      }
+    }
+  }
+
+  &__info{
+    color: #888;
+    margin-left: 12px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__controls{
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+
+    .bp3-html-select{
+      margin-left: 6px;
+
+      select{
+        height: 24px;
+        width: auto;
+        padding: 0;
+        padding-right: 0px;
+        border: 1px solid #e8e8e8;
+        font-size: 13px;
+        border-radius: 3px;
+        color: #666;
+        padding-right: 14px;
+        padding-left: 8px;
+      }
+
+      &::after{
+        border-left-width: 3px;
+        border-right-width: 3px;
+        border-top-width: 4px;
+        margin-right: 6px;
+      }
+    } 
+  }
+
+  &__goto-control{
+    display: none;
+  }
+
+  &__pagesize-control{
+    margin-left: 12px;
+    color: #888;
+  }
+}

packages/webapp/src/style/components/Details.scss

@@ -0,0 +1,56 @@
+.details-menu {
+
+  &--vertical {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    .detail-item{
+      flex-direction: column;
+      flex-grow: 1;
+
+      &__content{
+        margin: 2px 0;
+      }
+    }
+  }
+
+  &--horizantal {
+    display: flex;
+    flex-direction: column;
+
+    .detail-item{
+      flex-direction: row;
+
+      &:not(:first-of-type){
+        margin-top: 12px;
+      }
+
+      &__label{
+        padding-right: 10px;
+      }
+
+      &__content{
+        width: 100%;
+      }
+    }
+  }
+
+  .detail-item {
+    line-height: 1.3rem;
+    display: flex;
+
+    &__label {
+      color: #727983;
+      font-weight: 500;
+    }
+
+    &__content {
+      text-transform: capitalize;
+    }
+  }
+
+  + .details-menu{
+    margin-top: 18px;
+  }
+}

packages/webapp/src/style/components/Dialog/Dialog.scss

@@ -0,0 +1,19 @@
+@import '../../Base.scss';
+
+// Dialog
+.#{$ns}-dialog{
+  background: #fff;
+
+  &-header{
+    background: #ebf1f5;
+  }
+
+  &-body{
+    &.is-loading{
+      .bp3-spinner{
+        padding-top: 10px;
+        margin-bottom: -10px;
+      } 
+    }
+  }
+}

packages/webapp/src/style/components/Drawer.scss

@@ -0,0 +1,67 @@
+@import '../Base.scss';
+
+.bp3-drawer {
+  .bp3-drawer-header {
+    margin-bottom: 2px;
+    background-color: #FFF;
+
+    .bp3-heading {
+      font-weight: 500;
+    }
+
+    .bp3-heading,
+    .bp3-icon {
+      color: #354152;
+    }
+  }
+}
+
+.drawer{
+  &__insider{
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    background-color: #fbfbfb;
+  }
+
+  &__main-tabs{
+    .bp3-tabs {
+      .bp3-tab-list {
+        position: relative;
+        background-color: #fff;
+  
+        &:before {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          height: 2px;
+          background: #e1e2e8;
+        }
+  
+        > *:not(:last-child) {
+          margin-right: 25px;
+        }
+  
+        &.bp3-large > .bp3-tab {
+          font-size: 15px;
+          color: #555;
+          margin: 0 0.8rem;
+  
+          &[aria-selected='true'],
+          &:not([aria-disabled='true']):hover {
+            color: $pt-link-color;
+          }
+        }
+      }
+  
+      .bp3-tab-panel {
+        margin-top: 0;
+  
+        .card {
+          margin: 15px;
+        }
+      }
+    }  
+  }
+}

packages/webapp/src/style/components/Drawers/AccountDrawer.scss

@@ -0,0 +1,37 @@
+
+
+.account-drawer {
+  
+  .card-header{
+    margin: 15px;
+    padding: 22px 15px;
+  }
+
+  &__content-header {
+    
+    .detail-item{
+      flex-grow: 1;
+
+      .big-number {
+        font-size: 28px;
+        color: #c06361;
+        margin: 6px 0;
+        font-weight: 600;
+        margin-bottom: 0;
+      }
+
+      &--account-normal{
+
+        .bp3-icon{
+          position: relative;
+          top: -2px;
+          margin-left: 2px;
+  
+          svg{
+            fill: #6a7994;
+          }
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/BillDrawer.module.scss

@@ -0,0 +1,57 @@
+.root {}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+  }
+  &_header {}
+
+  &_table {
+    margin-top: 30px;
+
+    :global .bigcapital-datatable {
+      .thead,
+      .tbody {
+        .quantity,
+        .rate,
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+
+    :global .total_lines {
+      margin-left: auto;
+
+      &_line {
+        .amount,
+        .title {
+          width: 180px;
+        }
+        .amount {
+          text-align: right;
+        }
+        .title{
+          padding-left: 0;
+        }
+      }
+    }
+
+    .total_line {
+      &_subtotal {
+        border-bottom: 1px solid #000;
+      }
+      &_total {
+        border-bottom: 3px double #000;
+        font-weight: 600;
+      }
+      &_dueAmount {
+        font-weight: 600;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/CashflowTransactionDrawer.scss

@@ -0,0 +1,99 @@
+.cashflow-drawer {
+  .card {
+    margin: 15px;
+    padding: 25px 15px 35px;
+  }
+
+  .card {
+    .amount {
+      font-size: 28px;
+      color: #c06361;
+      margin: 6px 0;
+      font-weight: 600;
+    }
+  }
+
+  .table {
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      border-top: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: transparent;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+    }
+
+    .tbody .tr:last-child .td {
+      border-bottom: 1px solid #d2dce2;
+    }
+
+    .thead,
+    .tbody {
+      .tr .td,
+      .tr .th {
+        &.credit,
+        &.debit {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &__content {
+    &-header {
+      margin-bottom: 35px;
+
+      .detail-item {
+        flex-grow: 1;
+
+        &--amount {
+          width: 20%;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+
+      .total-lines {
+        margin-left: auto;
+      }
+    }
+  }
+  .total-lines {
+    &__line {
+      display: flex;
+
+      > div {
+        padding: 7px 8px;
+      }
+
+      .title {
+        width: 220px;
+        font-weight: 600;
+      }
+
+      .credit,
+      .debit {
+        font-weight: 600;
+        width: 155px;
+      }
+
+      &--subtotal {
+        border-bottom: 1px solid #000;
+      }
+      &--total {
+        border-bottom: 3px double #000;
+      }
+      &--subtotal,
+      &--total {
+        text-align: right;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/DrawerTemplate.scss

@@ -0,0 +1,138 @@
+#page-size {
+  margin: 0 auto;
+  background-color: transparent;
+  width: 680px;
+  // width: 21cm;
+  // height: 29.7cm;
+  padding-bottom: 20px;
+}
+
+.template {
+  background-color: transparent;
+  margin: 25px 20px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0px 35px 20px 5px;
+    &--title h1 {
+      font-weight: 600;
+      color: #1c4587;
+      margin: 0;
+    }
+    &--title p {
+      color: #666666;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-wrap: wrap;
+    border-bottom: 2px solid #1155cc;
+    padding: 2px 2px 30px;
+    &__info {
+      flex: 0 1 22%;
+      padding-left: 5px;
+      color: #999999;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 1.6rem;
+      margin-bottom: 10px;
+
+      .info-paragraph-amount {
+        margin-top: 8px;
+        color: #123163;
+        font-size: 26px;
+        font-weight: 500;
+      }
+
+      .info-paragraph {
+        font-size: 15px;
+        color: #000;
+      }
+    }
+  }
+
+  &__table {
+    display: flex;
+    flex-direction: column;
+    padding: 0px 5px;
+    margin: 5px 0px 20px 0px;
+
+    .bigcapital-datatable {
+      .table {
+        font-size: 15px;
+        color: #000;
+
+        .thead .tr .th .resizer {
+          display: none;
+        }
+        .thead .th,
+        .tbody .tr .td {
+          margin-bottom: 15px;
+          background: transparent;
+        }
+        .thead .th {
+          font-size: 16px;
+          font-weight: 400;
+          border-bottom: none;
+          color: #1155cc;
+          // padding-left: 1px;
+        }
+        .tbody .tr .td {
+          font-size: 15px;
+          padding: 10px;
+          // padding-left: 1px;
+          border-bottom: 1px solid #cecbcb;
+        }
+      }
+    }
+  }
+
+  &__terms {
+    padding: 0px 5px;
+    &__title h4 {
+      font-size: 16px;
+      font-weight: 400;
+      color: #666666;
+      margin-bottom: 5px;
+    }
+
+    ul {
+      list-style: none;
+    }
+    ul li {
+      color: #000;
+      font-size: 14px;
+    }
+    ul li::before {
+      content: '•';
+      color: #b7b7b7;
+      display: inline-block;
+      width: 1em;
+      margin-left: 0.7em;
+    }
+  }
+}
+
+.bp3-drawer.bp3-position-right {
+  bottom: 0;
+  right: 0;
+  top: 0;
+  overflow: auto;
+  height: 100%;
+
+  .bp3-drawer-header .bp3-heading {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+    flex: 1 1 auto;
+    line-height: inherit;
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #0d244a;
+  }
+}

packages/webapp/src/style/components/Drawers/EstimateDetails.module.scss

@@ -0,0 +1,69 @@
+
+.root{}
+
+.detail_panel {
+
+  :global .card {
+    padding: 22px 15px;
+    margin: 15px;
+  } 
+
+  &_table{
+    :global .bigcapital-datatable {
+      margin-top: 30px;
+  
+      .thead,
+      .tbody {
+        .quantity,
+        .rate,
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer{
+    :global .total_lines {
+      margin-left: auto;
+  
+      &_line {
+        .title{
+          padding-left: 0;
+        }
+        .amount,
+        .title {
+          width: 180px;
+        }
+        .amount{
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  .total_line{
+    &_subtotal {
+      
+    }
+
+    &_total {
+      
+    }
+    &_dueAmount {
+      
+    }
+  }
+
+  &_note{
+
+    b{
+      color: #727983;
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ExpenseDrawer.scss

@@ -0,0 +1,107 @@
+.expense-drawer {
+  .card {
+    margin: 15px;
+    padding: 25px 15px 35px;
+
+    .amount {}
+  }
+
+  &__content-header {
+    margin-bottom: 30px;
+
+    .detail-item {
+      flex-grow: 1;
+
+      &--amount {
+        width: 20%;
+      }
+
+      .big-number {
+        font-size: 28px;
+        color: #c06361;
+        margin: 6px 0;
+        font-weight: 600;
+      }
+    }
+
+    .details-menu+.details-menu {
+      margin-top: 14px;
+    }
+
+    .details-menu--horizantal {
+
+      .detail-item {
+
+        &__label {
+          min-width: 120px;
+        }
+      }
+    }
+  }
+
+  &__content-footer {
+    display: flex;
+
+    .total-lines {
+      margin-left: auto;
+    }
+  }
+
+
+  .table {
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      border-top: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: transparent;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+    }
+
+    .tbody .tr:last-child .td {
+      border-bottom: 1px solid #d2dce2;
+    }
+  }
+
+
+  .total-lines {
+
+    &__line {
+      display: flex;
+
+      >div {
+        padding: 7px 8px;
+      }
+
+      .title {
+        width: 220px;
+        font-weight: 600;
+      }
+
+      .amount {
+        font-weight: 600;
+        width: 260px;
+      }
+
+      &--subtotal,
+      &--total {
+        text-align: right;
+      }
+
+      &--subtotal {
+        border-bottom: 1px solid #000;
+      }
+
+      &--total {
+        border-bottom: 3px double #000;
+      }
+    }
+
+  }
+
+}

packages/webapp/src/style/components/Drawers/InventoryAdjustmentDrawer.module.scss

@@ -0,0 +1,24 @@
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+    margin: 15px;
+  }
+
+  &_header {
+    margin-bottom: 30px;
+  }
+
+  &_table {
+    :global .bigcapital-datatable {
+      margin-top: 30px;
+      .thead,
+      .tbody {
+        .quantity,
+        .cost,
+        .value {
+          text-align: right;
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ItemDrawer.scss

@@ -0,0 +1,41 @@
+.item-drawer {
+  .card {
+    margin: 15px;
+    padding: 22px 15px;
+  }
+
+  &__content {
+    .detail-item--name {
+      width: 30%;
+
+      .detail-item__content {
+        font-weight: 600;
+      }
+    }
+
+    .detail-item--quantity {
+      .detail-item__content {
+        font-weight: 600;
+
+        .mines {
+          color: #c23030;
+        }
+      }
+    }
+
+    .details-menu--vertical {
+      padding-bottom: 15px;
+      border-bottom: 1px solid #e2e2e2;
+    }
+
+    .details-menu--horizantal {
+      .detail-item:not(:first-of-type) {
+        margin-top: 16px;
+      }
+
+      .detail-item__label {
+        min-width: 180px;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ManualJournalDrawer.scss

@@ -0,0 +1,113 @@
+.journal-drawer {
+
+  .card {
+    margin: 15px;
+    padding: 25px 15px 35px;
+  }
+
+  .card {
+
+    .amount {
+      font-size: 28px;
+      color: #c06361;
+      margin: 6px 0;
+      font-weight: 600;
+    }
+  }
+
+  .table {
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      border-top: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: transparent;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+    }
+
+    .tbody .tr:last-child .td {
+      border-bottom: 1px solid #d2dce2;
+    }
+
+    .thead,
+    .tbody{
+      .tr .td,
+      .tr .th{
+        &.credit,
+        &.debit{
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &__content {
+
+    &-header {
+      margin-bottom: 35px;
+
+      .detail-item {
+        flex-grow: 1;
+
+        &--amount {
+          width: 20%;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+
+      .total-lines {
+        margin-left: auto;
+      }
+    }
+
+    &-description {
+      margin-top: 20px;
+
+      .title {
+        color: #727983;
+      }
+    }
+  }
+
+
+  .total-lines {
+
+    &__line {
+      display: flex;
+
+      >div {
+        padding: 7px 8px;
+      }
+
+      .title {
+        width: 220px;
+        font-weight: 600;
+      }
+
+      .credit,
+      .debit {
+        font-weight: 600;
+        width: 155px;
+      }
+
+      &--subtotal {
+        border-bottom: 1px solid #000;
+      }
+      &--total {
+        border-bottom: 3px double #000;
+      }
+      &--subtotal,
+      &--total{
+        text-align: right;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ReceiptDrawer.module.scss

@@ -0,0 +1,62 @@
+.root {}
+
+.detail_panel {
+    :global .card {
+        padding: 22px 15px;
+    }
+
+    &_header {}
+
+    &_table {
+        margin-top: 30px;
+
+        :global .bigcapital-datatable {
+
+            .thead,
+            .tbody {
+
+                .quantity,
+                .rate,
+                .amount {
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    &_footer {
+        display: flex;
+
+        :global .total_lines {
+            margin-left: auto;
+
+            &_line {
+
+                .amount,
+                .title {
+                    width: 180px;
+                }
+
+                .amount {
+                    text-align: right;
+                }
+            }
+        }
+
+        .total_line {
+            &_subtotal {
+                border-bottom: 1px solid #000;
+            }
+
+            &_total {
+                border-bottom: 3px double #000;
+                font-weight: 600;
+            }
+
+            &_dueAmount {
+                font-weight: 600;
+            }
+        }
+
+    }
+}

packages/webapp/src/style/components/Drawers/VendorCreditDetail.module.scss

@@ -0,0 +1,68 @@
+.root {
+}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+    margin: 15px;
+  }
+
+  &_table {
+    :global .bigcapital-datatable {
+      margin-top: 30px;
+
+      .thead,
+      .tbody {
+        .quantity,
+        .rate,
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    :global .total_lines {
+      margin-left: auto;
+
+      &_line {
+        .title {
+          padding-left: 0;
+        }
+        .amount,
+        .title {
+          width: 180px;
+        }
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  .total_line {
+    &_subtotal {
+      border-bottom: 1px solid #000;
+    }
+
+    &_total {
+      border-bottom: 3px double #000;
+      font-weight: 600;
+    }
+    &_dueAmount {
+      font-weight: 600;
+    }
+  }
+
+  &_note {
+    b {
+      color: #727983;
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss

@@ -0,0 +1,68 @@
+@import '../../../Base.scss';
+
+.view-detail-drawer {
+  .bp3-tabs {
+    .bp3-tab-list {
+      position: relative;
+      background-color: #fff;
+
+      &:before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background: #e1e2e8;
+      }
+
+      > *:not(:last-child) {
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        color: #555;
+        margin: 0 0.8rem;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: $pt-link-color;
+        }
+      }
+    }
+
+    .bp3-tab-panel {
+      margin-top: 0;
+
+      .card {
+        margin: 15px;
+      }
+    }
+  }
+
+  .datatable--landed-cost-transactions {
+    .table {
+      .tbody,
+      .tbody-inner {
+        height: auto;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+      .tbody {
+        .tr .td {
+          padding: 0.6rem;
+
+          &.amount {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+
+  .card {
+    margin: 15px;
+  }
+}

packages/webapp/src/style/components/Hint.scss

@@ -0,0 +1,16 @@
+.hint {
+  margin-left: 6px;
+  position: relative;
+  top: -1px;
+
+  .bp3-icon {
+    color: #a1b2c5;
+  }
+
+  .bp3-popover-target:hover .bp3-icon {
+    color: #90a1b5;
+  }
+  .bp3-icon {
+    vertical-align: middle;
+  }
+}

packages/webapp/src/style/components/MaterialProgressBar.scss

@@ -0,0 +1,149 @@
+// IONIC DEFAULT THEME COLORS
+$colors: (primary: #387ef5,
+  secondary: #32db64,
+  danger: #f53d3d,
+  light: #f4f4f4,
+  dark: #222);
+
+.progress,
+progress[value] {
+  width: 100%;
+  border: none;
+  margin: 5px 0;
+  height: 5px;
+  display: block;
+  appearance: none;
+  -webkit-appearance: none;
+
+  &::-webkit-progress-bar {
+    background-color: lighten(map-get($colors, primary), 35%);
+  }
+
+  &::-webkit-progress-value {
+    background-color: map-get($colors, primary);
+  }
+}
+
+.progress-materializecss {
+  position: absolute;
+  top: -1px;
+  height: 2px;
+  display: block;
+  width: 100%;
+  background-color: transparent;
+  margin: 0;
+  overflow: hidden;
+
+  .indeterminate {
+    background-color: #002fff;
+
+    &:before {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      animation: indeterminate-left 3.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      will-change: left, right;
+
+      [dir="rtl"] & {
+        animation: indeterminate-right 3.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      }
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      animation: indeterminate-short-left 3.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      animation-delay: 2.15s;
+
+      [dir="rtl"] & {
+        animation: indeterminate-short-right 3.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      }
+    }
+  }
+}
+
+@keyframes indeterminate-left {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes indeterminate-short-left {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+
+@keyframes indeterminate-right {
+  0% {
+    right: -35%;
+    left: 100%;
+  }
+
+  60% {
+    right: 100%;
+    left: -90%;
+  }
+
+  100% {
+    right: 100%;
+    left: -90%;
+  }
+}
+
+@keyframes indeterminate-short-right {
+  0% {
+    right: -200%;
+    left: 100%;
+  }
+
+  60% {
+    right: 107%;
+    left: -8%;
+  }
+
+  100% {
+    right: 107%;
+    left: -8%;
+  }
+}
+
+.progress-container {
+  width: 100%;
+  position: relative;
+
+}
+
+//  IRRELEVANTS STYLES  //
+/////////////////////////

packages/webapp/src/style/components/Menu.scss

@@ -0,0 +1,7 @@
+.bp3-menu-item {
+
+    .menu-item-space {
+        width: 6px;
+        display: inline-block;
+    }
+}

packages/webapp/src/style/components/Overlay.scss

@@ -0,0 +1,6 @@
+
+
+
+.bp3-overlay-backdrop {
+    background-color: rgba(0, 10, 30, 0.7);
+  }

packages/webapp/src/style/components/PageForm.scss

@@ -0,0 +1,69 @@
+// .page-form
+//   > .page-form__header
+//   > .page-form__content
+//   > .page-form__floating-actions
+.page-form {
+  $self: '.page-form';
+  padding-bottom: 20px;
+
+  &__floating-actions {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    padding: 14px 18px;
+    border-top: 1px solid rgb(210, 221, 226);
+    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+
+    .bp3-button-group{
+      
+      .bp3-button{
+        &:not(:last-child),
+        &.bp3-popover-wrapper:not(:last-child) {
+          border-right: 1px solid rgba(92, 112, 127, 0.3);
+          margin-right: 0;
+
+          &.bp3-intent-primary{
+            border-right: 1px solid rgba(255, 255, 255, 0.3);
+          }
+        }
+      }
+    }
+  }
+  &--strip {
+    #{$self}__header-fields {
+      width: 85%;
+
+      .bp3-form-group{
+        margin-bottom: 16px;
+      }
+
+      > .bp3-form-group:last-of-type{
+        margin-bottom: 0;
+      }
+    }
+    #{$self}__header {
+      background-color: #FFF;
+      padding: 25px 32px;
+      border-bottom: 1px solid #d2dce2;
+
+      .bp3-form-group.bp3-inline label.bp3-label {
+        font-weight: 500;
+      }
+    }
+
+    #{$self}__body {
+      padding: 18px 32px 0;
+    }
+
+    #{$self}__footer {
+      margin: 20px 0 0 0;
+      padding-left: 32px;
+      padding-right: 32px;
+
+      label.bp3-label{
+        font-weight: 500;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Postbox.scss

@@ -0,0 +1,48 @@
+.postbox {
+    border: 1px solid #d2dce2;
+    background: #FFF;
+
+    &__header {
+        border-bottom: 1px solid #d2dde2;
+        height: 38px;
+        padding-left: 18px;
+        align-items: center;
+        display: flex;
+    }
+
+    &__title {
+        vertical-align: middle;
+        font-weight: 600;
+        font-size: 14px;
+    }
+
+    &.is-toggable .postbox__header {
+        cursor: pointer;
+    }
+
+    &__toggle-indicator {
+        margin-left: auto;
+        width: 40px;
+        text-align: center;
+        display: flex;
+
+        &:before {
+            content: "";
+            width: 0;
+            height: 0;
+            border-left: 4px solid transparent;
+            border-right: 4px solid transparent;
+            border-bottom: 6px solid #8ca0b3;
+            margin: auto;
+        }
+    }
+
+    &__title {}
+
+    &__content {
+
+        &-inner {
+            padding: 20px;
+        }
+    }
+}

packages/webapp/src/style/components/SidebarOverlay.scss

@@ -0,0 +1,132 @@
+.sidebar-overlay {
+  background: #fff;
+  height: 100%;
+  width: 225px;
+  outline: 0;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+  z-index: 15;
+
+  &__scroll-wrapper {
+    height: 100%
+  }
+
+  .ScrollbarsCustom-Track {
+
+    &.ScrollbarsCustom-TrackY,
+    &.ScrollbarsCustom-TrackX {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+
+  .ScrollbarsCustom-Thumb {
+
+    &.ScrollbarsCustom-ThumbX,
+    &.ScrollbarsCustom-ThumbY {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+
+  .ScrollbarsCustom-Content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &:hover {
+    .ScrollbarsCustom-Thumb {
+
+      &.ScrollbarsCustom-ThumbX,
+      &.ScrollbarsCustom-ThumbY {
+        background: rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+
+  &__menu {
+    margin: 16px 0;
+  }
+
+  &__item {
+    font-size: 15px;
+    color: #00102b;
+
+    a {
+      color: inherit;
+      display: block;
+      padding: 10px 22px;
+      text-decoration: none;
+
+      &:hover,
+      &:focus {
+        background: #f3f3f3;
+      }
+    }
+  }
+
+  &__divider {
+    height: 1px;
+    margin: 6px 0;
+    background: #e2e5ec;
+  }
+
+  &__label {
+    text-transform: uppercase;
+    font-size: 12px;
+    padding: 14px 20px 10px;
+    letter-spacing: 1px;
+    color: #707a85;
+    border-bottom: 1px solid #e2e5ec;
+    margin-bottom: 6px;
+
+    html[lang^="ar"] & {
+      font-size: 13px;
+      letter-spacing: 0;
+      font-weight: 500;
+    }
+  }
+
+  &__label+.sidebar-overlay__divider {
+    margin-top: 0;
+  }
+}
+
+.sidebar-overlay-transition {
+  transform: translateX(-100%);
+
+  &.bp3-overlay {
+
+    &-appear,
+    &-enter {
+      transform: translateX(-100%)
+    }
+
+    &-appear-active,
+    &-enter-active {
+      transform: translateX(0) !important;
+      transition: all 100ms ease-in-out;
+    }
+
+    &-appear-done,
+    &-enter-done {
+      transform: translateX(0) !important;
+    }
+
+    &-exit {
+      transform: translateX(0) !important;
+    }
+
+    &-exit-active {
+      transform: translateX(-100%) !important;
+      transition: all 100ms ease-in-out;
+    }
+
+    &-exit-done {
+      transform: translateX(-100%) !important;
+    }
+  }
+}
+
+.sidebar-overlay-backdrop {
+  background-color: rgba(0, 10, 30, 0.15);
+  z-index: 14;
+}

packages/webapp/src/style/components/Skeleton.scss

@@ -0,0 +1,26 @@
+
+
+@keyframes skeleton-glow {
+  0% {
+    background: rgba(206,217,224,.3);
+    border-color: rgba(206,217,224,.3);
+  }
+  to {
+    background: rgba(92,112,128,.3);
+    border-color: rgba(92,112,128,.3);
+  }
+}
+
+.skeleton{
+  animation: skeleton-glow 1s linear infinite alternate;
+  background: rgba(206,217,224,.3);
+  background-clip: padding-box;
+  border-color: rgba(206,217,224,.3);
+  border-radius: 2px;
+
+  box-shadow: none;
+  color: transparent;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+}

packages/webapp/src/style/components/Toast.scss

@@ -0,0 +1,3 @@
+.bp3-toast {
+  box-shadow: none;
+}

packages/webapp/src/style/components/Tooltip.scss

@@ -0,0 +1,11 @@
+
+
+.pt-tooltip {
+  .pt-popover-content {
+    max-width: 100px;
+  }
+}
+
+.#{$ns}-tooltip {
+  box-shadow: none;
+}

packages/webapp/src/style/components/UniversalSearch.scss

@@ -0,0 +1,207 @@
+.universal-search {
+  position: fixed;
+  filter: blur(0);
+  opacity: 1;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
+    0 18px 46px 6px rgba(16, 22, 26, 0.2);
+  left: calc(50% - 250px);
+  top: 20vh;
+  width: 500px;
+  z-index: 20;
+
+  &.bp3-overlay-appear,
+  &.bp3-overlay-enter {
+    filter: blur(20px);
+    opacity: 0.2;
+  }
+
+  &.bp3-overlay-appear-active,
+  &.bp3-overlay-enter-active {
+    filter: blur(0);
+    opacity: 1;
+    transition-delay: 0;
+    transition-duration: 0.2s;
+    transition-property: filter, opacity;
+    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
+  }
+
+  &.bp3-overlay-exit {
+    filter: blur(0);
+    opacity: 1;
+  }
+
+  &.bp3-overlay-exit-active {
+    filter: blur(20px);
+    opacity: 0.2;
+    transition-delay: 0;
+    transition-duration: 0.2s;
+    transition-property: filter, opacity;
+    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
+  }
+
+  &__omnibar {
+    .bp3-input-group {
+      .bp3-icon {
+        svg {
+          stroke: currentColor;
+          fill: none;
+          fill-rule: evenodd;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      }
+    }
+
+    .bp3-input-group .bp3-input {
+      border: 0;
+      box-shadow: 0 0 0 0;
+      height: 50px;
+      line-height: 50px;
+      font-size: 20px;
+    }
+
+    .bp3-input-group.bp3-large .bp3-input:not(:first-child) {
+      padding-left: 50px !important;
+    }
+    .bp3-input-group.bp3-large .bp3-input:not(:last-child) {
+      padding-right: 130px !important;
+    }
+
+    .bp3-input-group {
+      .bp3-icon {
+        margin: 16px;
+        color: #5c707f;
+
+        svg {
+          stroke-width: 2;
+          --text-opacity: 1;
+        }
+      }
+    }
+
+    .bp3-menu {
+      border-top: 1px solid #d3dce2;
+      max-height: calc(60vh - 20px);
+      overflow: auto;
+
+      .bp3-menu-item {
+        .bp3-text-muted {
+          font-size: 12px;
+
+          .bp3-icon {
+            color: #8499a7;
+          }
+        }
+        &.bp3-intent-primary {
+          &.bp3-active {
+            background-color: rgb(235, 241, 246);
+            color: #252b30;
+
+            .bp3-menu-item-label {
+              color: #5c7080;
+            }
+          }
+        }
+
+        &-label {
+          flex-direction: row;
+          text-align: right;
+        }
+      }
+    }
+
+    .bp3-input-action {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &__type-select-overlay {
+    .bp3-button {
+      margin: 0 !important;
+    }
+  }
+
+  &__footer {
+    padding: 12px 12px;
+    border-top: 1px solid #d3dce2;
+  }
+
+  &__actions {
+    display: flex;
+  }
+
+  &__action {
+    &:not(:first-of-type) {
+      margin-left: 14px;
+    }
+
+    .bp3-tag {
+      background: #708392;
+    }
+
+    &--arrows {
+      .bp3-tag {
+        padding: 0;
+        text-align: center;
+        line-height: 16px;
+        margin-left: 4px;
+
+        svg {
+          fill: #fff;
+          height: 100%;
+          display: block;
+          width: 100%;
+          padding: 2px;
+        }
+      }
+    }
+
+    .text {
+      margin-left: 6px;
+    }
+  }
+
+  &__footer {
+  }
+
+  &-input-right-elements {
+    display: flex;
+    margin: 10px;
+
+    .bp3-spinner {
+      margin-right: 6px;
+    }
+  }
+
+  &__item {
+    &--invoice,
+    &--estimate,
+    &--bill,
+    &--receipt {
+      .amount {
+        color: #252b30;
+      }
+
+      .status {
+        font-size: 13px;
+
+        &.status-warning {
+          color: rgb(236, 91, 10);
+        }
+
+        &.status-success {
+          color: #249017;
+        }
+      }
+    }
+  }
+}
+
+.universal-search-overlay .bp3-overlay-backdrop {
+  background: rgba(0, 10, 30, 0.3);
+}

packages/webapp/src/style/components/dragzone.scss

@@ -0,0 +1,77 @@
+.dropzone {
+  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 18px;
+  border-width: 1px;
+  border-color: #afafaf;
+  border-style: dashed;
+  color: #999;
+  outline: none;
+  transition: border 0.24s ease-in-out;
+  font-size: 14px;
+
+  p {
+    margin: auto;
+  }
+}
+
+.dropzone-container {
+  max-width: 250px;
+  margin-left: auto;
+}
+.dropzone-thumbs {
+  display: flex;
+  flex-direction: row;
+  margin-top: 15px;
+}
+
+.dropzone-thumb {
+  position: relative;
+  display: inline-block;
+  border-radius: 2px;
+  border: 1px solid #eaeaea;
+  margin-bottom: 8px;
+  margin-right: 8px;
+  width: 100px;
+  padding: 2px;
+
+  img {
+    display: block;
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+  }
+
+  button {
+    height: 16px;
+    width: 16px;
+    color: #fff;
+    background: #db3737;
+    border: 0;
+    border-radius: 15px;
+    display: inline-block;
+    padding: 0;
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    visibility: hidden;
+
+    .bp3-icon {
+      position: relative;
+      top: -3px;
+      left: 0px;
+    }
+  }
+
+  &:hover button {
+    visibility: visible;
+  }
+}
+
+.dropzone-hint {
+  font-size: 12px;
+  margin-bottom: 6px;
+  color: #777;
+}

packages/webapp/src/style/components/resizer.scss

@@ -0,0 +1,52 @@
+
+.Pane.Pane2 {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.Resizer {
+  background: #000;
+  z-index: 1;
+  box-sizing: border-box;
+  background-clip: padding-box;
+  position: relative;
+  z-index: 999;
+
+  &:hover {
+    transition: all 0.3s ease;
+  }
+
+  &.horizontal {
+    height: 4px;
+    margin: -2px 0;
+    opacity: 0;
+    border-top: 2px solid #1d9bd1;
+    border-bottom: 2px solid #1d9bd1;
+    cursor: row-resize;
+    width: 100%;
+
+    &:hover {
+      opacity: 1;      
+    }
+  }
+
+  &.vertical {
+    width: 4px;
+    margin: 0 -2px;
+    opacity: 0;
+    border-left: 2px solid #1d9bd1;
+    border-right: 2px solid #1d9bd1;
+    cursor: col-resize;
+
+    &:hover{
+      opacity: 1;      
+    }
+  }
+
+  &.disabled {    
+    &:hover{
+      border-color: transparent;
+    }
+  }
+}

packages/webapp/src/style/components/tabs.scss

@@ -0,0 +1,8 @@
+// Tabs component.
+.#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator{
+  height: 2px;
+}
+.#{$ns}-large > .#{$ns}-tab{
+  line-height: 50px;
+  font-size: 15px;
+}

packages/webapp/src/style/containers/Dashboard/Sidebar.scss

@@ -0,0 +1,368 @@
+@import 'src/style/Base.scss';
+
+.sidebar {
+  background: $sidebar-background;
+  width: $sidebar-width;
+  color: $sidebar-text-color;
+  height: 100%;
+  z-index: $sidebar-zindex;
+  position: relative;
+
+  .ScrollbarsCustom-Track {
+
+    &.ScrollbarsCustom-TrackY,
+    &.ScrollbarsCustom-TrackX {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+
+  .ScrollbarsCustom-Thumb {
+
+    &.ScrollbarsCustom-ThumbX,
+    &.ScrollbarsCustom-ThumbY {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+
+  .ScrollbarsCustom-Content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &:hover {
+    .ScrollbarsCustom-Thumb {
+
+      &.ScrollbarsCustom-ThumbX,
+      &.ScrollbarsCustom-ThumbY {
+        background: rgba(255, 255, 255, 0.25);
+      }
+    }
+  }
+
+  &__head {
+    padding: 20px 20px;
+
+    &-logo {
+      position: absolute;
+      top: 16px;
+      left: 12px;
+      opacity: 0;
+      visibility: hidden;
+
+      svg {
+        opacity: $sidebar-logo-opacity;
+      }
+    }
+
+    &-organization {
+      .title {
+        background: transparent;
+        padding: 0;
+        min-height: auto;
+        min-width: auto;
+        max-width: 100%;
+        font-weight: 600;
+        outline: 0;
+        font-size: 15px;
+
+        &:not([class*="bp3-intent-"]):not(.bp3-minimal) {
+          color: rgb(255, 255, 255);
+        }
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.bp3-active {
+          background: transparent;
+        }
+
+        .bp3-button-text {
+          margin-right: 4px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          display: block;
+        }
+
+        svg {
+          fill: rgba(255, 255, 255, 0.3);
+        }
+      }
+
+      .bp3-popover-wrapper,
+      .bp3-popover-target {
+        max-width: 100%;
+        display: inline-block;
+      }
+
+      .subtitle {
+        display: block;
+        font-size: 12px;
+        margin-top: 8px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+    }
+
+    .sidebar__head-logo {
+      transition: transform 0.05s ease-in-out;
+    }
+
+    .is-subscription-inactive:not(.sidebar--mini-sidebar) & {
+      opacity: 0.6;
+    }
+  }
+
+  &__scroll-wrapper {
+    height: 100%;
+  }
+
+  &__version {
+    margin-top: auto;
+    padding: 0 20px 20px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  &__inner {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-menu {
+    background: transparent;
+    padding: 0;
+    min-width: $sidebar-width;
+    border-radius: 0;
+    padding-bottom: 2rem;
+
+    .#{$ns}-menu-item {
+      color: $sidebar-menu-item-color;
+      border-radius: 0;
+      padding: 8px 20px;
+      font-size: 15px;
+      font-weight: 400;
+
+      &:hover,
+      &.bp3-active {
+        background: $sidebar-submenu-item-bg-color;
+        color: $sidebar-menu-item-color-active;
+      }
+
+      &:focus,
+      &:active {
+        background: #01143e;
+      }
+
+      >.#{$ns}-icon {
+        color: #767b9b;
+        margin-right: 16px;
+        margin-top: 0;
+      }
+
+      >.#{$ns}-icon-caret-right {
+        margin-right: -4px;
+        margin-top: 3px;
+        color: rgba(255, 255, 255, 0.25);
+      }
+
+      &-labeler {
+        display: block;
+        color: $sidebar-menu-label-color;
+        font-size: 11px;
+        padding: 8px 20px;
+        margin-top: 4px;
+        text-transform: uppercase;
+        font-weight: 500;
+        letter-spacing: 1px;
+
+        html[lang^="ar"] & {
+          font-size: 12px;
+          letter-spacing: 0;
+        }
+      }
+
+      &:hover .bp3-button.menu-item__add-btn {
+        display: inline-block;
+      }
+    }
+
+    .#{$ns}-submenu {
+      .#{$ns}-collapse {
+        &-body {
+          background-color: rgba(255, 255, 255, 0.03);
+          padding-bottom: 6px;
+          padding-top: 6px;
+        }
+
+        .#{$ns}-menu-item {
+          padding: 8px 20px;
+          font-size: 15px;
+          color: $sidebar-submenu-item-color;
+
+          &:hover,
+          &.bp3-active {
+            background: transparent;
+            color: $sidebar-submenu-item-hover-color;
+          }
+
+          &.bp3-active {
+            font-weight: 500;
+          }
+        }
+      }
+
+      .#{$ns}-popover {
+        padding: 0;
+
+        &-content {
+          box-shadow: 0 0 0;
+        }
+      }
+    }
+
+    .#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item {
+      color: $sidebar-menu-item-color;
+    }
+
+    .#{$ns}-menu-divider {
+      border-top-color: rgba(255, 255, 255, 0.1);
+      color: #6b708c;
+      margin: 4px 0;
+    }
+
+    .#{$ns}-menu-spacer {
+      margin: 4px 0;
+      height: 1px;
+    }
+  }
+
+  &--mini-sidebar {
+    position: fixed;
+    white-space: nowrap;
+    width: 50px;
+
+    .sidebar__head {
+      .sidebar__head-logo {
+        transition: opacity 0.3s ease-in-out;
+        transition-delay: 0.15s;
+        opacity: 1;
+        visibility: visible;
+      }
+
+      // Hide text of bigcapital logo.
+      &-logo {}
+
+      &-organization {
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+      }
+    }
+
+    .sidebar__menu,
+    .sidebar__version {
+      transition: opacity 0.3s ease-in-out;
+      opacity: 0;
+    }
+
+    .sidebar__scroll-wrapper {
+      background: $sidebar-background;
+      transition: min-width 0.15s ease-in-out;
+      min-width: 50px;
+
+      .ScrollbarsCustom-Scroller {
+        overflow: hidden !important;
+      }
+
+      &:hover {
+        min-width: 190px;
+
+        .sidebar__head-logo {
+          opacity: 0;
+          transition-delay: 0s;
+        }
+
+        .sidebar__head-organization,
+        .sidebar__menu,
+        .sidebar__version {
+          opacity: 1;
+        }
+
+        .ScrollbarsCustom-Scroller {
+          overflow: scroll !important;
+        }
+      }
+    }
+  }
+
+  .bp3-button.menu-item__add-btn {
+    width: auto;
+    padding: 2px;
+    margin-right: 0px;
+    position: relative;
+    top: 1px;
+    border-radius: 3px;
+    display: none;
+    vertical-align: top;
+
+    &:not([class*='bp3-intent-']):not(.bp3-minimal):not(:disabled) {
+      .bp3-icon {
+        color: rgba(255, 255, 255, 0.4);
+      }
+
+      &,
+      &:hover {
+        min-height: auto;
+        min-width: auto;
+        outline: 0;
+        background-color: transparent;
+      }
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.12);
+
+        .bp3-icon {
+          color: rgba(255, 255, 255, 0.6);
+        }
+      }
+    }
+
+    .bp3-icon {
+      margin: 0;
+      display: block;
+    }
+  }
+}
+
+.menu--dashboard-organization {
+  padding: 10px;
+
+  .org-item {
+    display: flex;
+    align-items: center;
+
+    &__logo {
+      height: 40px;
+      width: 40px;
+      line-height: 40px;
+      border-radius: 3px;
+      background-color: #CB22E5;
+      text-align: center;
+      font-weight: 400;
+      font-size: 16px;
+      color: #fff;
+    }
+
+    &__name {
+      margin-left: 12px;
+      font-weight: 600;
+    }
+
+    &__divider {
+      margin: 4px 0;
+      height: 1px;
+      background: #ebebeb;
+    }
+  }
+}

packages/webapp/src/style/containers/FinancialStatements/DrawerHeader.scss

@@ -0,0 +1,113 @@
+//
+// Financial sheet - Drawer header.
+// --------------------
+.financial-header-drawer {
+  padding: 25px 26px 25px;
+  position: absolute;
+  top: 101px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+
+  &.is-hidden {
+    visibility: hidden;
+  }
+  .bp3-drawer {
+    box-shadow: 0 0 0 transparent;
+    max-height: 550px;
+    height: 100%;
+    padding-bottom: 49px;
+    background-color: #fff;
+
+    > form {
+      display: flex;
+      flex-direction: column;
+      flex: 1 0 0;
+      height: 100%;
+    }
+    .bp3-drawer-backdrop {
+      background-color: rgba(2, 9, 19, 0.65);
+    }
+  }
+
+  .bp3-button.button--submit-filter {
+    min-height: 34px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .radio-group---accounting-basis {
+    .bp3-label {
+      margin-bottom: 12px;
+    }
+  }
+
+  .bp3-tabs {
+    height: 100%;
+
+    &.bp3-vertical > .bp3-tab-panel {
+      flex: 1 0 0;
+      border-top: 24px solid transparent;
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-bottom: 24px;
+      overflow: auto;
+    }
+  }
+
+  .bp3-tabs.bp3-vertical {
+    flex: 1 0 0;
+
+    .bp3-tab-list {
+      width: 220px;
+      border-right: 1px solid #c3cdd5;
+      padding-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 0;
+      }
+      .bp3-tab-indicator-wrapper {
+        width: 100%;
+
+        .bp3-tab-indicator {
+          border-left: 3px solid #0350f8;
+          background-color: #edf5ff;
+          border-radius: 0;
+        }
+      }
+
+      .bp3-tab {
+        color: #333;
+        line-height: 45px;
+        border-radius: 0;
+        padding-left: 14px;
+        padding-right: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  &__footer {
+    background-color: #ecf0f3;
+    border-top: 1px solid #c3cdd5;
+    padding: 8px;
+    padding-left: 230px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+  .row {
+    margin-left: -0.85rem;
+    margin-right: -0.85rem;
+
+    .col {
+      padding-left: 0.85rem;
+      padding-right: 0.85rem;
+    }
+  }
+  .bp3-popover-target {
+    .bp3-tag-input {
+      height: auto;
+    }
+  }
+}

packages/webapp/src/style/functions.scss

@@ -0,0 +1,40 @@
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<","%3c"),
+  (">","%3e"),
+  ("#","%23"),
+  ("(","%28"),
+  (")","%29"),
+) !default;
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  @return $string;
+}
+
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+    
+      @if str-index($string, "url(") == 1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+  @return $string;
+}

packages/webapp/src/style/normalize.scss

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

packages/webapp/src/style/objects/Bigcapital.scss

@@ -0,0 +1,19 @@
+[data-icon='bigcapital'] {
+  path {
+    fill: #004dd0;
+  }
+  .path-1,
+  .path-13 {
+    fill: #2d95fd;
+  }
+}
+
+.bigcapital--alt {
+  svg {
+    path,
+    .path-13,
+    .path-1 {
+      fill: #fff;
+    }
+  }
+}

packages/webapp/src/style/objects/buttons.scss

@@ -0,0 +1,41 @@
+
+
+.bp3-button {
+  min-width: 32px;
+  min-height: 32px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.bp3-button:not([class*='bp3-intent-']) {
+  color: #33304a;
+}
+
+.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+  color: #555555;
+  box-shadow: 0 0 0 transparent;
+
+  &.bp3-small {
+    font-size: 13px;
+    min-height: 29px;
+  }
+}
+
+.bp3-button-group.bp3-minimal .bp3-button {
+  background-color: transparent;
+}
+
+.bp3-button {
+  &.bp3-intent-primary,
+  &.bp3-intent-success,
+  &.bp3-intent-danger,
+  &.bp3-intent-warning {
+    &,
+    &:hover {
+      box-shadow: 0 0 0 transparent;
+    }
+  }
+}
+
+.button--secondary {
+}

packages/webapp/src/style/objects/form.scss

@@ -0,0 +1,511 @@
+.form {
+  &__floating-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    padding: 14px 18px;
+    border-top: 1px solid #ececec;
+
+    .has-mini-sidebar & {
+      left: 50px;
+    }
+  }
+}
+
+// Form form.
+label.bp3-label {
+  color: #353535;
+  font-weight: 400;
+
+  .required {
+    color: red;
+  }
+
+  .bp3-form-group.bp3-inline & {
+    margin: 0 10px 0 0;
+    line-height: 1.6;
+    padding-top: calc(0.3rem + 1px);
+    padding-bottom: calc(0.3rem + 1px);
+  }
+}
+
+// Form input.
+.#{$ns}-input {
+  box-shadow: 0 0 0 transparent;
+  border: 1px solid #ced4da;
+  border-radius: 2px;
+  height: 32px;
+  line-height: 32px;
+  color: #333;
+
+  &:focus,
+  &.bp3-active {
+    box-shadow: 0 0 0 1px #116cd0;
+    border-color: #116cd0;
+  }
+
+  &.bp3-disabled,
+  &:disabled {
+    background: #e9ecef;
+  }
+
+  &.bp3-intent-danger {
+    box-shadow: 0 0 0 transparent;
+    border-color: #db3737;
+
+    &:focus,
+    &.bp3-active {
+      box-shadow: 0 0 0 1px #db3737;
+      border-color: #db3737;
+    }
+  }
+}
+
+.bp3-input-group{
+
+  &.bp3-intent-danger{
+    
+    .bp3-input{
+      box-shadow: 0 0 0 transparent;
+      border-color: #db3737;
+
+      &:focus,
+      &.bp3-active {
+        box-shadow: 0 0 0 1px #db3737;
+        border-color: #db3737;
+      }
+    }
+  }
+}
+
+.#{$ns}-form-group {
+  margin-bottom: 20px;
+
+  &.#{$ns}-intent-danger {
+    select {
+      box-shadow: 0 0 0 0 rgba(228, 226, 226, 0), 0 0 0 0 rgba(2, 2, 2, 0),
+        inset 0 0 0 1px #db3737, inset 0 0 0 1px rgba(16, 22, 26, 0.15),
+        inset 0 1px 1px rgba(16, 22, 26, 0.2);
+    }
+  }
+
+  .#{$ns}-label {
+    margin-bottom: 6px;
+  }
+}
+
+.#{$ns}-button:not([class*='.#{$ns}-intent-']) {
+  background-image: none;
+}
+
+.#{$ns}-html-select select,
+.#{$ns}-select select {
+  background-image: none;
+  border-radius: 2px;
+
+  &,
+  &:hover {
+    background: #fff;
+    box-shadow: none;
+    border: 1px solid #ced4da;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+    border-color: #80bdff;
+  }
+}
+
+.input-group-prepend {
+  .input-group-text {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    margin-bottom: 0;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    text-align: center;
+    white-space: nowrap;
+    background-color: #e9ecef;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    height: 100%;
+
+    .bp3-form-group & {
+      padding: 0.25rem 0.5rem;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      border-radius: 0.2rem;
+    }
+  }
+}
+
+.bp3-form-group {
+  .bp3-input-group {
+    flex: 1 1 auto;
+  }
+
+  .bp3-control-group {
+    >.input-group-prepend:first-child .input-group-text {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+.#{$ns}-html-select {
+  .bp3-icon-double-caret-vertical {
+    display: none;
+  }
+}
+
+.bp3-datepicker-caption select {
+
+  &,
+  &:hover {
+    border-color: transparent;
+  }
+}
+
+// Dropdown arrow to html select and select list.
+.#{$ns}-html-select::after,
+.form-group--select-list .#{$ns}-button::after {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid #8d8d8d;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  margin-top: -2px;
+  margin-right: 12px;
+  border-radius: 1px;
+}
+
+.form-group--select-list {
+
+  .form-group--select-list.bp3-intent-danger & {
+    & {
+      border-color: #db3737;
+    }
+  }
+
+  .#{$ns}-button {
+    color: #8d8d8d;
+    position: relative;
+    padding-right: 25px;
+    justify-content: start;
+
+    &:not([class*="bp3-intent-"]):not(.bp3-minimal) {
+
+      &,
+      &:hover {
+        outline: none;
+        box-shadow: 0 0 0 transparent;
+        border: 1px solid #ced4da;
+
+        &:not(:disabled) {
+          background: #fff;
+        }
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 1px #116cd0;
+        border-color: #116cd0;
+      }
+    }
+  }
+
+  &.bp3-fill {
+    width: 100%;
+  }
+
+  .bp3-popover-target.bp3-popover-open {
+
+    .#{$ns}-button {
+
+      &:not([class*="bp3-intent-"]):not(.bp3-minimal):not(:disabled),
+      &:not([class*="bp3-intent-"]):not(.bp3-minimal):hover:not(:disabled) {
+        background-color: #fafafa;
+      }
+    }
+  }
+
+  .bp3-popover-target {
+    .bp3-icon {
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 7px;
+
+      +.bp3-button-text {
+        padding-left: 20px;
+      }
+    }
+
+    .bp3-button {
+      padding-left: 10px;
+      color: #333;
+    }
+  }
+
+  &.bp3-intent-danger {
+    .bp3-button:not(.bp3-minimal) {
+      border-color: #db3737;
+    }
+  }
+}
+
+.select-list--fill-popover {
+  position: relative;
+
+  .bp3-transition-container,
+  .bp3-popover {
+    min-width: 100%;
+  }
+}
+
+.select-list--tooltip-items .bp3-popover-target {
+  display: block;
+}
+
+@mixin control-checked-colors($selector: ':checked') {
+  input#{$selector}~.#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: $control-checked-background-color;
+    color: $white;
+  }
+
+  &:hover input#{$selector}~.#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: $control-checked-background-color-hover;
+    border-color: $control-checked-background-color-active;
+  }
+
+  input:not(:disabled):active#{$selector}~.#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: $control-checked-background-color-active;
+    border-color: $control-checked-background-color-active;
+  }
+
+  input:disabled#{$selector}~.#{$ns}-control-indicator {
+    box-shadow: none;
+    background: rgba($control-checked-background-color, 0.5);
+  }
+}
+
+///@extend
+.#{$ns}-control {
+  input:checked~.#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: transparent;
+    background-image: none;
+  }
+
+  &:hover input:checked~.#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  input:not(:disabled):active:checked~.#{$ns}-control-indicator {
+    box-shadow: none;
+    background: transparent;
+  }
+
+  input:disabled:checked~.#{$ns}-control-indicator {
+    box-shadow: none;
+    background: transparent;
+  }
+
+  &.#{$ns}-disabled {
+    cursor: not-allowed;
+    color: $pt-text-color-disabled;
+  }
+
+  &.#{$ns}-inline {
+    display: inline-block;
+    margin-right: $pt-grid-size * 2;
+  }
+
+  .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-clip: padding-box;
+    background-color: transparent;
+    background-image: none;
+    width: 18px;
+    height: 18px;
+
+    &::before {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &.bp3-large .#{$ns}-control-indicator {
+    width: 20px;
+    height: 20px;
+
+    &::before {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &:hover .#{$ns}-control-indicator {
+    background-color: transparent;
+  }
+
+  input:not(:disabled):active~.#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background: transparent;
+  }
+
+  /*
+    Checkbox
+
+    Markup:
+    <label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
+      <input type="checkbox" {{:modifier}} />
+      <span class="#{$ns}-control-indicator"></span>
+      Checkbox
+    </label>
+
+    :checked  - Checked
+    :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+    :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
+                     <code>input.indeterminate = true</code>.
+    .#{$ns}-align-right - Right-aligned indicator
+    .#{$ns}-large - Large
+
+    Styleguide checkbox
+  */
+  &.#{$ns}-checkbox {
+    &:hover input:indeterminate~.#{$ns}-control-indicator {
+      // box-shadow: 0 0 0 transparent;
+    }
+
+    @mixin indicator-inline-icon($icon) {
+      &::before {
+        // embed SVG icon image as backgroud-image above gradient.
+        // the SVG image content is inlined into the CSS, so use this sparingly.
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+    @include control-checked-colors(':checked');
+
+    // make :indeterminate look like :checked _for Checkbox only_
+    @include control-checked-colors(':indeterminate');
+
+    .#{$ns}-control-indicator {
+      border: 1px solid #c6c6c6;
+      border-radius: $pt-border-radius;
+      background-color: #fff;
+    }
+
+    input:checked~.#{$ns}-control-indicator {
+      background-image: escape-svg($form-check-input-checked-bg-image);
+      border-color: $form-check-input-checked-bg-color;
+      background-color: $form-check-input-checked-bg-color;
+    }
+
+    input:indeterminate~.#{$ns}-control-indicator {
+      background-image: escape-svg($form-check-input-indeterminate-bg-image);
+      border-color: $form-check-input-checked-bg-color;
+      background-color: $form-check-input-checked-bg-color;
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  /*
+    Radio
+
+    Markup:
+    <label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
+      <input type="radio" name="docs-radio-regular" {{:modifier}} />
+      <span class="#{$ns}-control-indicator"></span>
+      Radio
+    </label>
+
+    :checked  - Selected
+    :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+    .#{$ns}-align-right - Right-aligned indicator
+    .#{$ns}-large - Large
+
+    Styleguide radio
+  */
+  &.#{$ns}-radio {
+    .#{$ns}-control-indicator {
+      border: 2px solid #cecece;
+      background-color: #fff;
+
+      &::before {
+        height: 14px;
+        width: 14px;
+      }
+    }
+
+    input:checked~.#{$ns}-control-indicator {
+      border-color: $form-check-input-checked-bg-color;
+
+      &::before {
+        background-image: radial-gradient($form-check-input-checked-bg-color 40%,
+            transparent 40%);
+      }
+    }
+
+    input:checked:disabled~.#{$ns}-control-indicator::before {
+      opacity: 0.5;
+    }
+
+    input:focus~.#{$ns}-control-indicator {
+      -moz-outline-radius: $control-indicator-size;
+    }
+  }
+}
+
+.bp3-menu-item::before,
+.bp3-menu-item>.bp3-icon {
+  color: #4b5d6b;
+}
+
+.bp3-control-group {
+  .input-prepend {
+    &:not(.bp3-fixed) {
+      flex: 0;
+    }
+
+    &__text,
+    &__button {
+      display: flex;
+      align-items: center;
+      padding: 0.375rem 0.75rem;
+      margin: 0;
+      height: 32px;
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.5;
+      color: #495057;
+      text-align: center;
+      white-space: nowrap;
+      background-color: #e9ecef;
+      border: 1px solid #ced4da;
+      border-radius: 0 3px 3px 0;
+
+      .bp3-icon {
+        color: #848da0;
+      }
+    }
+  }
+}
+
+.bp3-control.bp3-checkbox .bp3-control-indicator{
+  border-color: #666;
+}

packages/webapp/src/style/objects/switch.scss

@@ -0,0 +1,8 @@
+.bp3-control.bp3-switch {
+  .bp3-control-indicator {
+
+    &:before {
+      box-shadow: none;
+    }
+  }
+}

packages/webapp/src/style/objects/typography.scss

@@ -0,0 +1,36 @@
+
+
+body{
+  color: #1f3255;
+
+  [lang='ar'] &{
+    font-size: 15px;
+  }
+}
+
+.#{$ns}-heading{
+  font-weight: 400;
+}
+
+.divider{
+  border-top: 1px solid #e8e8e8;
+  height: 1px;
+}
+
+.paragraph{
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+ul.list{
+  margin-bottom: 10px;
+  padding-left: 25px;
+
+  li{
+    margin-bottom: 10px;
+
+    &::marker{
+      color: #666;
+    }
+  }
+}

packages/webapp/src/style/pages/Accounts/AccountFormDialog.scss

@@ -0,0 +1,51 @@
+@import '../../Base.scss';
+
+// Account Form Dialog.
+// ----------------------------
+.dialog--account-form {
+  &:not(.dialog--loading) .bp3-dialog-body {
+    margin-bottom: 30px;
+  }
+
+  .bp3-dialog-body {
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 140px;
+      }
+      .bp3-form-content {
+        width: 250px;
+      }
+
+      &.form-group--description {
+        .bp3-form-content {
+          width: 280px;
+        }
+        textarea {
+          min-width: 100%;
+          max-width: 100%;
+          width: 100%;
+          min-height: 60px;
+        }
+      }
+    }
+
+    .form-group--account-code {
+      margin-bottom: 16px;
+    }
+    .form-group--subaccount {
+      margin-bottom: 16px;
+
+      .bp3-icon-info-circle {
+        color: #a1b2c5;
+        position: relative;
+        top: -2px;
+        margin-left: 2px;
+      }
+    }
+    .form-group--description {
+      textarea {
+        padding: 6px;
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/Accounts/List.scss

@@ -0,0 +1,71 @@
+@import '../../Base.scss';
+
+.dashboard__insider--accounts-chart {
+  .bigcapital-datatable {
+    .normal {
+      .#{$ns}-icon {
+        color: #7f91a2;
+        padding-left: 15px;
+      }
+    }
+
+    .table {
+      .tbody {
+        .tr:not(.no-results) .td {
+          padding-top: 0.3rem;
+          padding-bottom: 0.3rem;
+        }
+
+        .account_name {
+          .bp3-popover-wrapper--inactive-semafro {
+            margin-left: 8px;
+            margin-right: 6px;
+            float: right;
+            border: 0;
+          }
+          .bp3-popover-wrapper--account-desc {
+            border-bottom-color: #bbb;
+          }
+          .inactive-semafro {
+            height: 7px;
+            width: 7px;
+            background: #bbb;
+            display: inline-block;
+            border-radius: 8px;
+          }
+        }
+        .account-desc {
+          font-size: 11px;
+          color: hsl(0, 0%, 50%);
+          margin-top: 2px;
+          line-height: 1.25;
+          padding-bottom: 2px;
+          display: block;
+        }
+        .normal {
+          .bp3-popover-wrapper {
+            width: 100%;
+          }
+          .bp3-tooltip-indicator {
+            cursor: initial;
+            border-bottom: 0;
+          }
+        }
+        .actions {
+          padding-right: 18px;
+          justify-content: right;
+        }
+      }
+    }
+    .table-size--small {
+      .tbody .tr {
+        .normal {
+          svg {
+            width: 14px;
+            height: 14px;
+          }
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss

@@ -0,0 +1,63 @@
+// Allocate Landed Cost Form.
+.dialog--allocate-landed-cost-form {
+  width: 700px;
+
+  .bp3-dialog-body {
+    .bp3-form-group{
+      margin-bottom: 18px;
+    }
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 165px;
+      }
+      .bp3-form-content {
+        width: 300px;
+      }
+
+      &:not(.dialog--loading) .bp3-dialog-body {
+        margin-bottom: 30px;
+      }
+    }
+  }
+
+  .bp3-dialog-footer{
+    padding-top: 10px;
+  }
+
+  .bigcapital-datatable {
+    .table {
+      // max-height: 300px;
+      border: 1px solid #d1dee2;
+      min-width: auto;
+
+      .tbody,
+      .tbody-inner {
+        height: auto;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+      .tbody {
+        .tr .td {
+          padding: 0.4rem;
+          margin-left: -1px;
+          border-left: 1px solid #ececec;
+        }
+
+        .bp3-form-group{
+          margin-bottom: 0;
+
+          &:not(.bp3-intent-danger) .bp3-input{
+            border: 1px solid #d0dfe2;
+
+            &:focus{
+              box-shadow: 0 0 0 1px #116cd0;
+              border-color: #116cd0;
+            }
+          }
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/AllocateLandedCost/List.scss

@@ -0,0 +1,22 @@
+.datatable--landed-cost-transactions {
+  padding: 12px;
+  .table {
+    .tbody,
+    .thead {
+      .tr .th {
+        padding: 8px 8px;
+        background-color: #fff;
+        font-size: 14px;
+        border-bottom: 1px solid #000;
+        border-top: 1px solid #000;
+      }
+    }
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/Authentication/Auth.scss

@@ -0,0 +1,224 @@
+
+body.authentication {
+  background-color: #fcfdff;
+}
+
+.authentication-insider {
+  width: 384px;
+  margin: 0 auto;
+  margin-bottom: 40px;
+  padding-top: 80px;
+
+  &__logo-section {
+    text-align: center;
+    margin-bottom: 60px;
+  }
+
+  &__content {
+    position: relative;
+  }
+
+  &__footer {
+    .auth-copyright {
+      text-align: center;
+      font-size: 12px;
+      color: #666;
+
+      .bp3-icon-bigcapital {
+        margin-top: 9px;
+
+        svg {
+          path {
+            fill: #a3a3a3;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.authTransition{
+
+  &-enter {
+    opacity: 0;
+  }
+  
+  &-enter-active {
+    opacity: 1;
+    transition: opacity 250ms ease-in-out;
+  }
+  
+  &-enter-done {
+    opacity: 1;
+  }
+  
+  &-exit {
+    opacity: 1;
+  }
+  
+  &-exit-active {
+    opacity: 0.5;
+    transition: opacity 250ms ease-in-out;
+  }
+  &-exit-active {
+    opacity: 0;
+    display: none;
+  }
+ 
+}
+ 
+
+.authentication-page {
+  &__goto-bigcapital {
+    position: fixed;
+    margin-top: 30px;
+    margin-left: 30px;
+    color: #777;
+  }
+
+  .bp3-input {
+    min-height: 40px;
+  }
+  .bp3-form-group {
+    margin-bottom: 25px;
+  }
+
+  .bp3-form-group.has-password-revealer {
+    .bp3-label {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .password-revealer {
+      .text {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .bp3-button.bp3-fill.bp3-intent-primary {
+    font-size: 16px;
+  }
+
+  &__label-section {
+    margin-bottom: 30px;
+    color: #555;
+
+    h3 {
+      font-weight: 500;
+      font-size: 22px;
+      color: #2d2b43;
+      margin: 0 0 12px;
+    }
+
+    a {
+      text-decoration: underline;
+      color: #0040bd;
+    }
+  }
+
+  &__form-wrapper {
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  &__footer-links {
+    padding: 9px;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    text-align: center;
+    margin-bottom: 1.2rem;
+
+    a {
+      color: #0052cc;
+    }
+  }
+
+  &__loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(252, 253, 255, 0.5);
+    display: flex;
+    justify-content: center;
+  }
+
+  &__submit-button-wrap {
+    margin: 0px 0px 24px 0px;
+
+    .bp3-button {
+      background-color: #0052cc;
+      min-height: 45px;
+    }
+  }
+
+  // Login Form
+  // ------------------------------
+  .login-form {
+    // width: 690px;
+    // margin: 0px auto;
+    // padding: 85px 50px;
+
+    .checkbox {
+      &--remember-me {
+        margin: -6px 0 26px 0px;
+        font-size: 14px;
+      }
+    }
+  }
+
+  // Register form
+  // ----------------------------
+  .register-form {
+
+    &__agreement-section {
+      margin-top: -10px;
+
+      p {
+        font-size: 13px;
+        margin-top: -10px;
+        margin-bottom: 24px;
+        line-height: 1.65;
+      }
+    }
+
+    &__submit-button-wrap {
+      margin: 25px 0px 25px 0px;
+
+      .bp3-button {
+        min-height: 45px;
+        background-color: #0052cc;
+      }
+    }
+  }
+
+  // Send reset password
+  // ----------------------------
+  .send-reset-password {
+    .form-group--crediential {
+      margin-bottom: 36px;
+    }
+  }
+
+  // Invite form.
+  // ----------------
+  .invite-form {
+
+    &__statement-section {
+      margin-top: -10px;
+
+      p {
+        font-size: 14px;
+        margin-bottom: 20px;
+        line-height: 1.65;
+      }
+    }
+
+    .authentication-page__loading-overlay {
+      background: rgba(252, 253, 255, 0.9);
+    }
+  }
+}

packages/webapp/src/style/pages/BadDebt/BadDebtDialog.scss

@@ -0,0 +1,34 @@
+.dialog--bad-debt {
+  max-width: 400px;
+
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 15px;
+      margin-top: 15px;
+
+      label.bp3-label {
+        margin-bottom: 3px;
+        font-size: 13px;
+      }
+    }
+
+    .bp3-callout {
+      font-size: 13px;
+    }
+    .form-group {
+      &--reason {
+        .bp3-form-content {
+          textarea {
+            width: 100%;
+            min-width: 100%;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}

packages/webapp/src/style/pages/Billing/BillingPage.scss

@@ -0,0 +1,26 @@
+
+
+.billing-page{
+  padding: 0 60px;
+  margin-top: 40px;
+  max-width: 820px;
+
+  .bp3-tab-list{
+    border-bottom: 2px solid #d7e1e7;
+
+    .bp3-tab[aria-disabled="true"]{
+      color: rgba(92, 112, 128, 0.7);
+    }
+  }
+  .plan-radio,
+  .period-radio{
+    background: #fff;
+    border-color: #bbcad4;
+
+    &.is-selected{
+      background: #fff;
+      border-color: #0269ff
+    }
+  }
+
+}

packages/webapp/src/style/pages/Bills/List.scss

@@ -0,0 +1,59 @@
+.dashboard__insider--bills {
+  .bigcapital-datatable {
+    .tbody {
+      .td.amount {
+        .cell-inner {
+          > span {
+            font-weight: 600;
+          }
+        }
+      }
+      .status.td {
+        .overdue-status,
+        .due-status {
+          display: block;
+          font-size: 13.5px;
+          line-height: 1.4;
+
+          + .partial-paid {
+            margin-top: 2px;
+          }
+        }
+        .overdue-status {
+          color: #ec5b0a;
+        }
+        .due-status {
+          color: #1652c8;
+        }
+        .partial-paid {
+          font-size: 12px;
+          line-height: 1;
+          display: block;
+          margin-bottom: 6px;
+          opacity: 0.7;
+        }
+        .fully-paid-icon {
+          width: 18px;
+          height: 18px;
+          margin-right: 8px;
+
+          svg {
+            fill: #2ba01d;
+          }
+        }
+        .fully-paid-text {
+          font-size: 13.5px;
+        }
+        .bp3-progress-bar {
+          height: 3px;
+          max-width: 180px;
+
+          &,
+          .bp3-progress-meter {
+            border-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/Bills/PageForm.scss

@@ -0,0 +1,68 @@
+
+body.page-bill-new,
+body.page-bill-edit{
+
+  .dashboard__footer{
+    display: none;
+  }
+}
+
+.dashboard__insider--bill-form{
+  padding-bottom: 64px;
+}
+
+.page-form--bill{
+  $self: '.page-form';
+
+  #{$self}__header{
+    display: flex;
+
+    &-fields{
+      flex: 1 0 0;
+    }
+    .bp3-form-group{
+      margin-bottom: 18px;
+    }
+    .bp3-label{
+      min-width: 140px;
+    }
+    .bp3-form-content{
+      width: 100%;
+    }
+
+    .bp3-form-group{
+      &.bp3-inline{
+        max-width: 440px; 
+      }
+
+      &.form-group{
+
+        &--expiration-date{
+          max-width: 340px;
+
+          .bp3-label{
+            min-width: 120px;
+          }
+        }
+      }
+    }
+    .row--bill-date{
+
+      .col:first-of-type{
+        max-width: 435px;
+      }
+    }
+  }
+
+  #{$self}__footer{
+    .form-group--note{
+      max-width: 450px;
+      width: 100%;
+
+      textarea{
+        width: 100%;
+        min-height: 60px;
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/Branches/BranchFormDialog.scss

@@ -0,0 +1,40 @@
+.dialog--branch-form {
+  width: 650px;
+
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 15px;
+    }
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        font-size: 13px;
+        margin-bottom: 3px;
+        min-width: 150px;
+      }
+      .bp3-form-content {
+        width: 278px;
+      }
+      .bp3-control-group > * {
+        flex-shrink: unset;
+        padding-right: 5px;
+        padding-left: 5px;
+
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+
+      &.form-group--branch_address {
+        .bp3-form-content {
+          width: 388px;
+        }
+      }
+    }
+  }
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}

packages/webapp/src/style/pages/CashFlow/AccountTransactions/List.scss

@@ -0,0 +1,8 @@
+.dashboard__insider--account-transactions {
+  .bigcapital-datatable {
+    position: relative;
+    top: -1px;
+
+    .tbody {}
+  }
+}

packages/webapp/src/style/pages/CashFlow/CashFlowAccounts/List.scss

@@ -0,0 +1,38 @@
+.dashboard__insider--cashflow-accounts {
+  .bigcapital-datatable {
+    
+
+    .table {
+      .tbody {
+        .td.balance {
+          .cell-inner {
+            >span {
+              font-weight: 600;
+            }
+          }
+        }
+
+        .account_name {
+          .bp3-popover-wrapper--inactive-semafro {
+            margin-left: 8px;
+            margin-right: 6px;
+            float: right;
+            border: 0;
+          }
+
+          .bp3-popover-wrapper--account-desc {
+            border-bottom-color: #bbb;
+          }
+
+          .inactive-semafro {
+            height: 7px;
+            width: 7px;
+            background: #bbb;
+            display: inline-block;
+            border-radius: 8px;
+          }
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss

@@ -0,0 +1,37 @@
+.dialog--money-in,
+.dialog--money-out {
+  .bp3-form-group {
+    margin-bottom: 15px;
+
+    label.bp3-label {
+      font-size: 13px;
+      margin-bottom: 3px;
+    }
+  }
+  .form-group {
+    &--description {
+      .bp3-form-content {
+        textarea {
+          width: 100%;
+          min-width: 100%;
+          font-size: 14px;
+        }
+      }
+    }
+    &--reference-no,
+    &--amount,
+    &--credit_account_id {
+      max-width: 380px;
+    }
+  }
+
+  .trasnaction-type-fileds {
+    margin-bottom: 18px;
+    padding: 16px 0px 12px 0px;
+    border-bottom: 2px solid #e9e9e9;
+  }
+
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}

packages/webapp/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss

@@ -0,0 +1,24 @@
+.dialog--contact-duplicate {
+  .bp3-dialog-body {
+    > .paragraph {
+      margin-bottom: 1rem;
+    }
+    .bp3-form-group {
+      margin-bottom: 1.4rem;
+
+      .bp3-label {
+        font-size: 13px;
+      }
+    }
+    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+      width: 260px;
+    }
+  }
+
+  .bp3-dialog-footer {
+    .bp3-dialog-footer-actions .bp3-button {
+      margin-left: 8px;
+      min-width: 65px;
+    }
+  }
+}

packages/webapp/src/style/pages/CreditNote/List.scss

@@ -0,0 +1,20 @@
+.dashboard__insider--credit-note-list {
+  .bigcapital-datatable {
+    .tbody {
+      .amount.td {
+        .cell-inner {
+          > span {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+    .table-size--small {
+      .status.td {
+        .bp3-progress-bar {
+          height: 3px;
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/CreditNote/PageForm.scss

@@ -0,0 +1,50 @@
+body.page-credit-note-new,
+body.page-credit-note-edit {
+  .dashboard__footer {
+    display: none;
+  }
+}
+
+.dashboard__insider--credit-note-form {
+  padding-bottom: 64px;
+}
+
+.page-form--credit-note {
+  $self: '.page-form';
+
+  #{$self}__header {
+    display: flex;
+
+    &-fields {
+      flex: 1 0 0;
+    }
+
+    .bp3-label {
+      min-width: 150px;
+    }
+    .bp3-form-content {
+      width: 100%;
+    }
+
+    .bp3-form-group {
+      &.bp3-inline {
+        max-width: 450px;
+      }
+    }
+    .col--credit-note-date {
+      max-width: 435px;
+    }
+  }
+  #{$self}__footer {
+    .form-group--note,
+    .form-group--terms_conditions {
+      max-width: 450px;
+      width: 100%;
+
+      textarea {
+        width: 100%;
+        min-height: 60px;
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/Currency/CurrencyFormDialog.scss

@@ -0,0 +1,23 @@
+.dialog--currency-form {
+  .bp3-dialog-body {
+    margin-bottom: 30px;
+
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 140px;
+      }
+      .bp3-form-content {
+        width: 250px;
+      }
+    }
+    .bp3-dialog-header {
+      height: 170px;
+    }
+  }
+
+  .bp3-dialog-footer{
+    .bp3-button{
+      min-width: 75px;
+    }
+  }
+}

packages/webapp/src/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss

@@ -0,0 +1,19 @@
+.dialog--customer-opening-balance {
+  max-width: 400px;
+
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 15px;
+      margin-top: 15px;
+
+      label.bp3-label {
+        margin-bottom: px;
+        font-size: 13px;
+      }
+    }
+  }
+
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}

packages/webapp/src/style/pages/Customers/Form.scss

@@ -0,0 +1,157 @@
+@import '../../Base.scss';
+
+.page-form--customer {
+  $self: '.page-form';
+  padding: 20px;
+
+  #{$self}__header {
+    padding: 0;
+  }
+  #{$self}__primary-section {
+    padding: 10px 0 0;
+    margin: 0 0 20px;
+    overflow: hidden;
+    border-bottom: 1px solid #e4e4e4;
+    max-width: 1000px;
+  }
+
+  .bp3-form-group {
+    max-width: 500px;
+
+    .bp3-control {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+
+    &.bp3-inline {
+      .bp3-label {
+        min-width: 150px;
+      }
+    }
+    .bp3-form-content {
+      width: 100%;
+    }
+  }
+
+  .form-group--contact_name {
+    max-width: 600px;
+
+    .bp3-control-group > * {
+      flex-shrink: unset;
+
+      &:not(:last-child) {
+        padding-right: 10px;
+      }
+      &.input-group--salutation-list {
+        width: 25%;
+      }
+      &.input-group--first-name,
+      &.input-group--last-name {
+        width: 37%;
+      }
+    }
+  }
+
+  .bp3-form-group {
+    margin-bottom: 14px;
+  }
+
+  .bp3-tab-panel {
+    margin-top: 26px;
+  }
+
+  .form-group--phone-number {
+    .bp3-control-group > * {
+      flex-shrink: unset;
+      padding-right: 5px;
+      padding-left: 5px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+
+  #{$self}__tabs {
+    margin-top: 20px;
+    max-width: 1000px;
+
+    h4 {
+      font-weight: 500;
+      color: #888;
+      margin-bottom: 1.2rem;
+      font-size: 14px;
+    }
+    // Tab panels.
+    .tab-panel {
+      &--address {
+        .bp3-form-group {
+          max-width: 440px;
+
+          &.bp3-inline {
+            .bp3-label {
+              min-width: 145px;
+            }
+          }
+
+          .bp3-form-content {
+            width: 100%;
+          }
+
+          textarea.bp3-input {
+            max-width: 100%;
+            width: 100%;
+            min-height: 50px;
+          }
+        }
+      }
+      &--note {
+        .form-group--note {
+          .bp3-form-group {
+            max-width: 600px;
+          }
+          textarea {
+            width: 100%;
+            min-height: 100px;
+          }
+        }
+      }
+    }
+
+    .dropzone-container {
+      max-width: 600px;
+    }
+  }
+
+  .bp3-tabs {
+    .bp3-tab-list {
+      position: relative;
+
+      &:before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background: #f0f0f0;
+      }
+
+      > *:not(:last-child) {
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        color: #555;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: $pt-link-color;
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/Customers/List.scss

@@ -0,0 +1,34 @@
+.dashboard__insider--customers-list {
+  .bigcapital-datatable {
+    .tbody {
+      .tr .td {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+      }
+
+      .avatar.td {
+        .avatar {
+          display: inline-block;
+          background: #adbcc9;
+          border-radius: 50%;
+          text-align: center;
+          font-weight: 400;
+          color: #fff;
+
+          &[data-size='medium'] {
+            height: 30px;
+            width: 30px;
+            line-height: 30px;
+            font-size: 14px;
+          }
+          &[data-size='small'] {
+            height: 25px;
+            width: 25px;
+            line-height: 25px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/Dashboard/Dashboard.scss

@@ -0,0 +1,593 @@
+@import '../../Base.scss';
+$dashboard-views-bar-height: 44px;
+
+.dashboard {
+  display: flex;
+  height: 100vh;
+
+  &__topbar {
+    width: 100%;
+    min-height: 60px;
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+    border-bottom: 1px solid #c7d5db;
+
+    &-right,
+    &-left {
+      display: flex;
+    }
+
+    &-actions {}
+
+    &-sidebar-toggle {
+      display: flex;
+      align-items: center;
+      margin-left: 2px;
+
+      .#{$ns}-button {
+        color: #6b8193;
+
+        &,
+        &:hover,
+        &:focus {
+          border-radius: 0;
+          box-shadow: none;
+          background-color: transparent;
+          border: 0;
+        }
+      }
+    }
+
+    &-navbar {
+      display: flex;
+      align-items: center;
+      margin-right: 4px;
+
+      .#{$ns}-button {
+        color: #1552c8;
+        font-weight: 5000;
+        font-size: 14px;
+
+        &:hover,
+        &:focus {
+          background-color: rgba(178, 220, 253, 0.15);
+        }
+
+        .#{$ns}-icon {
+          color: #1552c8;
+        }
+      }
+
+      .bp3-navbar-divider {
+        margin: 0 8px;
+      }
+
+      .form-group-quick-new-downDrop {
+        .bp3-popover-target .bp3-button {
+          color: #1552c8;
+        }
+
+        .bp3-button::after {
+          content: none;
+        }
+      }
+    }
+
+    &-user {
+      display: flex;
+      align-items: center;
+      margin-right: 14px;
+
+      .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+        padding: 0;
+        background-size: contain;
+        border-radius: 50%;
+        height: 32px;
+        width: 32px;
+
+        .user-text {
+          font-size: 12px;
+          color: #fff;
+        }
+
+        &,
+        &:hover,
+        &:focus {
+          background-color: #cb20e5;
+          border: 0;
+          box-shadow: none;
+        }
+      }
+    }
+
+    &-subscription-msg {
+      display: flex;
+      flex-direction: row;
+      padding-right: 6px;
+      font-size: 12px;
+
+      span {
+        margin: auto;
+      }
+    }
+  }
+
+  &__breadcrumbs {
+    display: flex;
+    margin-left: 16px;
+    align-items: center;
+
+    // Breadcrumbs component.
+    .#{$ns}-breadcrumbs-collapsed {
+      background: $light-gray3;
+
+      &:hover {
+        background: $light-gray2;
+      }
+
+      &::before {
+        background: escape-svg($breadcrumbs-collapsed-icon) center center;
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+
+  &__back-link {
+    margin-left: 20px;
+    display: flex;
+
+    a {
+      margin: auto 0;
+      /*!rtl:ignore*/
+      direction: ltr;
+    }
+  }
+
+  &__organization-name {
+    font-size: 14px;
+    font-weight: 400;
+    color: #818ca9;
+    margin: 0 0 0 15px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__actions-bar {
+    border-bottom: 2px solid #e1e2e8;
+
+    .bp3-navbar-divider {
+      border-left-color: rgb(199, 214, 219);
+    }
+
+    .#{$ns}-navbar {
+      box-shadow: none;
+      padding-left: 12px;
+      padding-right: 12px;
+
+      &,
+      &-group {
+        height: 40px;
+      }
+
+      .#{$ns}-navbar-divider {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .#{$ns}-button {
+        color: #32304a;
+        padding: 8px 12px;
+
+        &:hover {
+          background: rgba(167, 182, 194, 0.12);
+          color: #32304a;
+        }
+
+        &.bp3-minimal:active,
+        &.bp3-minimal.bp3-active {
+          background: #a7b6c21f;
+          color: #32304a;
+        }
+
+        &.has-active-filters {
+
+          &,
+          &.bp3-active,
+          &:active {
+            background: #eafbe4;
+          }
+        }
+
+        .#{$ns}-icon {
+          color: #32304a;
+        }
+
+        &.#{$ns}-minimal.#{$ns}-intent-danger {
+          color: #c23030;
+
+          &:hover,
+          &:focus {
+            background: rgba(219, 55, 55, 0.1);
+          }
+        }
+
+        &.button--blue-highlight {
+          background-color: #ebfaff;
+
+          &:hover,
+          &:focus {
+            background-color: darken(#ebfaff, 2.5%);
+          }
+        }
+
+        &.button--gray-highlight {
+          background-color: rgba(127, 189, 255, 0.1);
+        }
+      }
+
+      .button--table-views {
+        .#{$ns}-icon {
+          color: #1183da;
+        }
+
+        .#{$ns}-button-text {
+          margin-right: 2px;
+        }
+
+        .#{$ns}-icon-caret-down {
+          margin-right: 0;
+        }
+      }
+
+      .bp3-control.bp3-switch {
+        margin-bottom: 0;
+        margin-left: 8px;
+        color: #3d3b53;
+
+        .bp3-control-indicator {
+          height: 16px;
+          min-width: 1.8em;
+        }
+
+        .bp3-control-indicator::before {
+          box-shadow: 0 0 0;
+        }
+
+        input~.bp3-control-indicator {
+          background: rgba(167, 182, 194, 0.55);
+        }
+
+        input:checked~.bp3-control-indicator {
+          background: #0069ff;
+        }
+      }
+    }
+  }
+
+  &__breadcrumbs {
+    display: flex;
+    align-items: center;
+    margin-left: 1rem;
+  }
+
+  &__title {
+    align-items: center;
+    display: flex;
+    margin-left: 2px;
+
+    h1 {
+      font-size: 22px;
+      color: #48485c;
+      font-weight: 500;
+      margin: 0;
+    }
+
+    h3 {}
+
+    .button--view-edit {
+      svg {
+        color: #929699;
+      }
+
+      &:hover,
+      &:focus {
+        svg {
+          color: #5c7080;
+        }
+      }
+    }
+  }
+
+  &__hint {
+    display: inline-block;
+    margin-top: 4px;
+    margin-left: 4px;
+  }
+
+  &__subtitle {}
+
+  &__insider {}
+
+  &__offline-badge {
+    display: flex;
+    align-items: center;
+    padding: 0px 6px;
+    height: 24px;
+    border-radius: 4px;
+    margin-right: 18px;
+    white-space: nowrap;
+    font-size: 14px;
+    color: rgba(22, 12, 12, 0.6);
+    border: 1px solid rgba(0, 0, 0, 0.16);
+    margin: auto;
+    margin-left: 12px;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 850px;
+
+    .sidebar--mini-sidebar+& {
+      margin-left: 50px;
+      width: calc(100% - 50px);
+    }
+  }
+
+  &__insider {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    background-color: #fbfbfb;
+
+    >.dashboard__loading-indicator {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+
+  &__page {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+  }
+
+  &__fallback-loading {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: #fbfbfb;
+
+    .bp3-spinner {
+      margin: auto;
+    }
+  }
+
+  &__page-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+
+    .bigcapital-datatable {
+      .table {
+
+        .thead,
+        .tbody {
+
+          .th.selection,
+          .td.selection {
+            padding-left: 16px;
+          }
+        }
+      }
+    }
+
+    .dashboard__loading-indicator {
+      padding-top: 150px;
+    }
+  }
+
+  &__centered-empty-status {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    margin: auto;
+
+    .datatable-empty-status {
+      margin: auto;
+      padding-bottom: 40px;
+    }
+  }
+
+  &__datatable {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    background: #fff;
+    margin: 22px 32px;
+    border: 1px solid #d2dce2;
+
+    .bigcapital-datatable {
+      display: flex;
+      flex-direction: column;
+      flex: 1 0 0;
+
+      .pagination {
+        margin-top: auto;
+      }
+
+      &:not(.has-pagination) {
+        padding-bottom: 30px;
+      }
+    }
+
+    .datatable-empty-status {
+      margin-top: auto;
+      margin-bottom: auto;
+      padding-bottom: 20px;
+    }
+  }
+
+  &__preferences-topbar {}
+
+  &__footer {
+    margin-top: auto;
+    padding: 8px 0;
+    border-top: 1px solid #d2dce2;
+
+    .footer-links {
+      text-align: center;
+
+      >div {
+        font-size: 12px;
+        margin-right: 20px;
+        display: inline;
+
+        a {
+          color: #8c8c8c;
+
+          &:hover {
+            color: $blue2;
+          }
+        }
+      }
+    }
+  }
+
+  &__card {
+    border: 1px solid #d2dce2;
+    background: #fff;
+
+    &--page {
+      flex: 1 0 0;
+      margin: 20px;
+    }
+  }
+
+  &__error-boundary {
+    text-align: center;
+    margin-top: auto;
+    margin-bottom: auto;
+
+    h1 {
+      font-size: 26px;
+      font-weight: 600;
+      margin: 0px 0 10px;
+      color: #2c3a5d;
+    }
+
+    p {
+      font-size: 16px;
+      color: #1f3255;
+      opacity: 0.8;
+    }
+
+    .bp3-icon {
+      margin-top: 6px;
+
+      path {
+        fill: #a1afca;
+      }
+    }
+  }
+}
+
+.tabs--dashboard-views {
+  user-select: none;
+
+  .#{$ns}-tab {
+    color: #646a7d;
+    font-size: 14px;
+    line-height: $dashboard-views-bar-height - 2px;
+    font-weight: 400;
+    padding: 0;
+    margin-right: 0;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 2px;
+
+    &[aria-selected='true'] {
+      color: #0052cc;
+      font-weight: 600;
+    }
+  }
+
+  .#{$ns}-tab-indicator-wrapper {
+    .#{$ns}-tab-indicator {
+      height: 2px;
+    }
+  }
+
+  .button--new-view {
+    margin: 0;
+    height: $dashboard-views-bar-height;
+    min-width: 35px;
+    padding-left: 5px;
+    padding-right: 5px;
+
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      background: transparent;
+      border: 0;
+      box-shadow: 0 0 0;
+    }
+
+    .#{$ns}-icon {
+      color: #a7a7a7;
+    }
+  }
+}
+
+.navbar--dashboard-views {
+  box-shadow: 0 0 0;
+  border-bottom: 1px solid #d2dce2;
+  height: $dashboard-views-bar-height;
+  padding: 0 20px;
+
+  .bp3-navbar-group {
+    height: $dashboard-views-bar-height;
+  }
+
+  .bp3-tab[aria-selected='true'] {
+    box-shadow: inset 0 -2px 0 #0052cc;
+  }
+
+  .bp3-button {
+    &:hover {
+      background: rgba(167, 182, 194, 0.12);
+      color: #32304a;
+    }
+  }
+}
+
+.navbar--omnibar {
+  -webkit-filter: blur(0);
+  filter: blur(0);
+  opacity: 1;
+  top: 20vh;
+  left: calc(50% - 250px);
+  z-index: 21;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
+    0 18px 46px 6px rgba(16, 22, 26, 0.2);
+  background-color: #fff;
+  width: 600px;
+
+  .bp3-input {
+    padding-left: 40px !important;
+  }
+}
+
+.menu--logged-user-dropdown {
+  .menu-item--profile {
+    .org {
+      font-size: 12px;
+      color: #777;
+    }
+  }
+}

packages/webapp/src/style/pages/ExchangeRate/ExchangeRateDialog.scss

@@ -0,0 +1,14 @@
+
+.dialog--exchangeRate-form {
+
+  .bp3-dialog-body {
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 140px;
+      }
+      .bp3-form-content {
+        width: 250px;
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/Expense/List.scss

@@ -0,0 +1,16 @@
+// Blueprint framework.
+// @import '@blueprintjs/core/src/blueprint.scss';
+
+.dashboard__insider--expenses {
+  .bigcapital-datatable {
+    .table {
+      .tbody {
+        .td.amount {
+          span {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/Expense/PageForm.scss

@@ -0,0 +1,77 @@
+.dashboard__insider--expense-form {
+  padding-bottom: 64px;
+  .bigcapital-datatable {
+
+    .tbody {
+      .tr .td.total_amount {
+        span {
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}
+
+.page-form--expense {
+  $self: '.page-form';
+
+  #{$self}__header {
+    display: flex;
+
+    &-fields {
+      flex: 1 0 0;
+    }
+
+    .bp3-label {
+      min-width: 140px;
+    }
+
+    .bp3-form-content {
+      width: 100%;
+    }
+
+    .bp3-form-group {
+      margin-bottom: 18px;
+
+      &.bp3-inline {
+        max-width: 440px;
+      }
+    }
+  }
+
+  .datatable-editor--expense-form {
+
+
+    .table {
+
+      .tbody {
+        .tr .td {
+
+
+          &.landed-cost {
+
+            .bp3-control {
+              margin-top: 0;
+              margin-left: 34px;
+            }
+
+            .bp3-control-indicator {
+              height: 18px;
+              width: 18px;
+              border-color: #e0e0e0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .form-group--description {
+    max-width: 500px;
+
+    textarea {
+      min-height: 60px;
+      width: 100%;
+    }
+  }
+}

packages/webapp/src/style/pages/FinancialStatements/APAgingSummary.scss

@@ -0,0 +1,39 @@
+
+.financial-sheet{
+  &--payable-aging-summary{
+
+    .financial-sheet__table{
+
+      .bigcapital-datatable{
+        .tbody,
+        .thead{
+          .tr .td.vendor_name ~ .td,
+          .tr .th.vendor_name ~ .th{
+            text-align: right;
+          }
+        }
+        .tbody{
+          .tr:not(.no-results) {
+            .td{
+              border-bottom: 0;
+              padding-top: 0.4rem;
+              padding-bottom: 0.4rem;
+            }
+            &:not(:first-child) .td{
+              border-top: 1px solid transparent;
+            }
+            &.row-type--total{
+              font-weight: 500;
+              
+              .td{
+                border-top: 1px solid #BBB;
+                border-bottom: 3px double #333;
+              }
+            }
+            
+          }
+        }
+      }
+    }    
+  }
+}

packages/webapp/src/style/pages/FinancialStatements/CashFlowStatement.scss

@@ -0,0 +1,15 @@
+.financial-sheet {
+  &--cash-flow-statement {
+    .financial-sheet__table {
+      
+    }
+  }
+}
+
+.financial-statement--cash-flow {
+  .financial-header-drawer {
+    .bp3-drawer {
+      max-height: 450px;
+    }
+  }
+}

packages/webapp/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss

@@ -0,0 +1,45 @@
+.financial-sheet {
+
+  &--customers-balance-summary,
+  &--vendors-balance-summary {
+    .financial-sheet__table {
+
+      .thead,
+      .tbody {
+
+        .tr .td.customer_name~.td,
+        .tr .th.customer_name~.th {
+          text-align: right;
+        }
+      }
+
+      .tbody {
+        .tr:not(.no-results) {
+          .td {
+            border-bottom: 0;
+            padding-top: 0.4rem;
+            padding-bottom: 0.4rem;
+          }
+
+          &.row-type--TOTAL {
+            font-weight: 500;
+
+            .td {
+              border-top: 1px solid #bbb;
+              border-bottom: 3px double #333;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.financial-statement--balance-summary {
+  .financial-header-drawer {
+    .bp3-drawer {
+      // max-height: 350px;
+      max-height: 415px;
+    }
+  }
+}

packages/webapp/src/style/pages/FinancialStatements/FinancialReportPage.scss

@@ -0,0 +1,11 @@
+
+
+
+.dashboard__insider--financial-report{
+
+  .alert-compute-running{
+    
+  }
+
+  
+}

packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss

@@ -0,0 +1,38 @@
+.financial-reports {
+  padding: 20px 32px;
+
+  .section-title {
+    font-weight: 600;
+    margin-bottom: 1.4rem;
+    font-size: 18px;
+    color: rgb(31, 50, 85);
+    margin-top: 10px;
+  }
+
+  &__list {
+    display: flex;
+    flex-flow: wrap;
+    margin-left: -20px;
+  }
+  &__item {
+    width: 250px;
+    min-height: 140px;
+    margin-bottom: 16px;
+    margin-left: 16px;
+    border: 1px solid #d1dee2;
+    border-top: 3px solid #d1dee2;
+    background: #fff;
+    padding: 18px;
+
+    .title {
+      font-size: 16px;
+    }
+
+    .desc {
+      color: rgb(31, 50, 85);
+      line-height: 1.55;
+      margin-top: 8px;
+      margin-bottom: 0;
+    }
+  }
+}

packages/webapp/src/style/pages/FinancialStatements/InventoryItemDetails.scss

@@ -0,0 +1,40 @@
+.financial-sheet {
+  &--inventory-item-details {
+    width: 100%;
+
+    .financial-sheet__table {
+
+      .tbody,
+      .thead {
+
+        .tr .td.transaction_id~.td,
+        .tr .th.transaction_id~.th {
+          text-align: right;
+        }
+      }
+
+      .tbody {
+       
+    }
+  }
+}
+
+.number-format-dropdown {
+  .toggles-fields {
+    .bp3-form-group:first-child {
+      display: none;
+    }
+  }
+
+  .form-group--money-format {
+    display: none;
+  }
+}
+
+.financial-statement--inventory-details {
+  .financial-header-drawer {
+    .bp3-drawer {
+      max-height: 350px;
+    }
+  }
+}

packages/webapp/src/style/pages/FinancialStatements/Journal.scss

@@ -0,0 +1,9 @@
+
+.financial-statement--journal{
+
+  .financial-header-drawer{
+    .bp3-drawer{
+      max-height: 350px;
+    }
+  }
+}

packages/webapp/src/style/pages/FinancialStatements/NumberFormatDropdown.scss

@@ -0,0 +1,43 @@
+
+
+.number-format-dropdown{
+  width: 300px;
+  padding: 15px;
+
+  .bp3-form-group{
+    margin-bottom: 6px;
+
+    label.bp3-label{
+      font-size: 13px;
+      margin-bottom: 4px;
+      font-weight: 500;
+    }
+    .bp3-button{
+      min-height: 28px;
+      min-width: 28px;
+    }
+  }
+  .bp3-control.bp3-inline{
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+  .toggles-fields{
+    margin-top: 14px;
+  }
+  &__footer{
+    text-align: right;  
+    padding-top: 10px;
+
+    .bp3-button.bp3-small,
+    .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal).bp3-small{
+      min-width: 65px;
+      height: 26px;
+      min-height: 26px;
+    }
+  }
+
+  .bp3-control .bp3-control-indicator{
+    height: 16px;
+    width: 16px;
+  }
+}

packages/webapp/src/style/pages/FinancialStatements/SalesAndPurchasesSheet.scss

@@ -0,0 +1,36 @@
+.financial-sheet {
+  &--sales-by-items,
+  &--purchases-by-items,
+  &--inventory-valuation {
+    min-width: 800px;
+
+    .financial-sheet__table {
+      .thead,
+      .tbody {
+        .tr .td:not(:first-child),
+        .tr .th:not(:first-child) {
+          text-align: right;
+        }
+      }
+      
+    }
+  }
+}
+
+.financial-statement--sales-by-items,
+.financial-statement--purchases-by-items {
+  .financial-header-drawer {
+    .bp3-drawer {
+      // max-height: 400px;
+      max-height: 450px;
+    }
+  }
+}
+
+.financial-statement--inventory-valuation {
+  .financial-header-drawer {
+    .bp3-drawer {
+      max-height: 400px;
+    }
+  }
+}

packages/webapp/src/style/pages/HomePage/HomePage.scss

@@ -0,0 +1,112 @@
+.homepage {
+  &__container {
+    display: flex;
+    
+    margin: 22px 32px;
+    background-color: transparent;
+    align-items: flex-start;
+
+    .shortcut-boxes {
+      flex: 2;
+      display: flex;
+      flex-wrap: wrap;
+      background-color: #fff;
+      border-bottom: 1px solid #d2dce2;
+      border-right: 1px solid #d2dce2;
+      max-width: 800px;
+
+      .shortcut-box {
+        width: 50%;
+        padding: 16px;
+        border-left: 1px solid #d2dce2;
+        border-top: 1px solid #d2dce2;
+        background-color: transparent;
+        transition: 0.2s;
+
+        a{
+          text-decoration: none;
+        }
+
+        &__header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 14px;
+
+          span {
+            color: #d6d6e0;
+          }
+          .header--icon {
+            width: 38px;
+            height: 32px;
+            // background-color:#F3FEFA;
+          }
+        }
+
+        &__title {
+          font-size: 16px;
+          color: #48485c;
+          font-weight: 500;
+          line-height: 1.6rem;
+          margin-bottom: 10px;
+        }
+        &__description {
+          font-size: 14px;
+          font-weight: 400;
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    .announcements-list {
+      flex: 1;
+      flex-shrink: 0;
+      background-color: #fff;
+      border: 1px solid #d2dce2;
+      margin-left: 24px;
+      display: flex;
+      flex-direction: column;
+      padding-bottom: 32px;
+      max-width: 400px;
+
+      &__title {
+        font-size: 16px;
+        font-weight: 400;
+        margin: 16px;
+      }
+
+      .announcement-box {
+        padding: 16px;
+        width: 100%;
+        // margin-bottom: 20px;
+
+        &__title {
+          font-size: 14px;
+          font-weight: 500;
+          margin-bottom: 10px;
+        }
+        &____description {
+        }
+
+        &.announcement-box:not(:last-child) {
+          // border-top: 1px solid #d2dce2;
+          border-bottom: 1px solid #d2dce2;
+        }
+      }
+      .btn-view-all {
+        display: flex;
+        border-radius: 12px;
+        background: transparent;
+        padding: 5px;
+        margin: 20px;
+        vertical-align: middle;
+        text-align: center;
+        cursor: pointer;
+        text-decoration: none;
+        border: 1px solid;
+        justify-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/InventoryAdjustments/List.scss

@@ -0,0 +1,15 @@
+
+// Blueprint framework.
+// @import '@blueprintjs/core/src/blueprint.scss';
+
+.dashboard__insider--inventory_adjustments {
+  .bigcapital-datatable {
+    .table {
+      .tbody {
+        .tr{
+          min-height: 46px;
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/pages/ItemCategory/ItemCategoryDialog.scss

@@ -0,0 +1,37 @@
+
+
+.dialog--category-form{
+
+  .bp3-dialog-body{    
+    .bp3-form-group.bp3-inline{
+
+      .bp3-label{
+        min-width: 140px;
+      }
+      .bp3-form-content{
+        width: 250px;
+      }
+
+      &.form-group--description{
+
+        .bp3-form-content{
+          width: 280px;
+
+          textarea{
+            min-width: 100%;
+            max-width: 100%;
+            width: 100%;
+            max-height: 120px;
+          }
+        }
+      }
+    }
+  }
+  .bp3-dialog-footer{
+    margin-top: 30px;
+
+    .bp3-button{
+      min-width: 75px;
+    }
+  }
+}

packages/webapp/src/style/pages/Items/Form.scss

@@ -0,0 +1,89 @@
+
+.page-form--item {
+  $self: '.page-form';
+  padding: 20px;
+
+  #{$self}__header {
+    padding: 0;
+  }
+  #{$self}__primary-section {
+    overflow: hidden;
+    padding-top: 5px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #eaeaea;
+    padding-bottom: 5px;
+    max-width: 1000px;
+  }
+
+  #{$self}__body {
+    .bp3-form-group {
+      max-width: 500px;
+      margin-bottom: 14px;
+
+      &.bp3-inline {
+        .bp3-label {
+          min-width: 140px;
+        }
+      }
+      .bp3-form-content {
+        width: 100%;
+      }
+    }
+
+    h3 {
+      font-weight: 500;
+      font-size: 14px;
+      margin-bottom: 1.4rem;
+    }
+
+    .bp3-control {
+      h3 {
+        display: inline;
+        margin-bottom: 0;
+      }
+    }
+
+    .form-group--sellable,
+    .form-group--purchasable {
+      margin-bottom: 1rem;
+    }
+
+    .form-group--purchase-description,
+    .form-group--sell-description{
+      
+      textarea{
+        width: 100%;
+      }
+    }
+  }
+
+  #{$self}__section {
+    max-width: 850px;
+    margin-bottom: 1rem;
+
+    .bp3-form-group {
+      max-width: 400px;
+    }
+
+    &--selling-cost {
+      border-bottom: 1px solid #eaeaea;
+      margin-bottom: 1.25rem;
+      padding-bottom: 0.25rem;
+    }
+  }
+
+  #{$self}__floating-actions {
+    // margin-left: -40px;
+    // margin-right: -40px;
+
+    .form-group--active {
+      display: inline-block;
+      margin: 0;
+      margin-left: 40px;
+    }
+  }
+
+  .bp3-tooltip-indicator {
+    border-bottom: 1px dashed #d0d0d0;
+  }
+}

packages/webapp/src/style/pages/Items/ItemAdjustmentDialog.scss

@@ -0,0 +1,79 @@
+.dialog--adjustment-item {
+  .bp3-form-group {
+    margin-bottom: 15px;
+
+    label.bp3-label {
+      font-size: 13px;
+      margin-bottom: 3px;
+    }
+  }
+  .form-group {
+    &--adjustment-reasons {
+      .bp3-form-content {
+        textarea {
+          width: 100%;
+          min-width: 100%;
+          font-size: 14px;
+        }
+      }
+    }
+    &--reference-no,
+    &--adjustment-account {
+      max-width: 270px;
+    }
+  }
+  .adjustment-fields {
+    padding-top: 16px;
+    border-top: 2px solid #e9e9e9;
+    margin-bottom: 18px;
+    padding-bottom: 12px;
+    border-bottom: 2px solid #e9e9e9;
+    
+    .bp3-input-group{
+
+      .bp3-input{
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    } 
+
+    .row {
+      display: flex;
+      flex-wrap: nowrap;
+      margin-left: -0.3rem;
+      margin-right: -0.3rem;
+
+      .col {
+        padding-left: 0.3rem;
+        padding-right: 0.3rem;
+
+        .bp3-form-group {
+          margin-bottom: 0;
+        }
+        &--quantity-on-hand,
+        &--quantity  {
+          width: 120px;
+        }
+        &--sign {
+          display: flex;
+  
+          span {
+            margin-top: auto;
+            margin-bottom: 12px;
+          }
+        }
+        &--decrement,
+        &--increment {
+          width: 100px;
+        }
+        &--cost {
+          width: 95px;
+        }
+      }
+    }
+  }
+
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}

packages/webapp/src/style/pages/Items/List.scss

@@ -0,0 +1,26 @@
+
+// Blueprint framework.
+// @import '@blueprintjs/core/src/blueprint.scss';
+
+.dashboard__insider--items-list {
+  .bigcapital-datatable {
+    .table {
+      .tbody {
+        .item_type.td {
+          .bp3-tag {
+            font-size: 13px;
+          }
+        }
+        .tr.inactive .td {
+
+          &.normal .bp3-icon {
+            color: #9eaab6;
+          }
+        }
+        .quantity_on_hand {
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}