mno-enterprise-frontend 2.0.0

data/lib/assets/stylesheets/impac-angular.less

@@ -0,0 +1,2352 @@
+/* ************************************************************************ */
+/*                                LESS VARIABLES
+**                This stylesheet should only contain variables.
+/* ************************************************************************ */
+
+/*-----------------------------------------------------------------------*/
+/*                          Color palette                                */
+/*-----------------------------------------------------------------------*/
+@mgreen:                          #dae173;
+@morange:                         #d6782b;
+@mdarkblue:                       #232528;
+@mgrey:                           #cccccc;
+@mlightgrey:                      #999999;
+@mdarkbg:                         #16161B;
+@mblue:                           #358fdc;
+@darkerblue:                      #16252c;
+@darkblue:                        #17262d;
+@darkerblue:                      darken(@darkblue,4%);
+@darkblue2:                       #25333a;
+@mediumblue:                      #626d6d;
+@lightblue:                       #abc4c6;
+@pink:                            #ed1e79;
+
+@fluroblue:                       #00e5f0;
+@fluroorange:                     #ff7300;
+@flureoyellow:                    #fbd925;
+@flurogreen:                      #47ff00;
+@fluropink:                       #e01f74;
+
+@darkgreen:                       #33d375;
+@green:                           #d1e55c;
+@purple:                          #977bf0;
+@lightgray:                       #e6edee;
+@bluegray:                        #abc4c6;
+@bluegray2:                       #35464c;
+
+@brand-success:                  @fluroblue;
+@brand-warning:                  @purple;
+@brand-info:                     @fluroblue;
+@brand-danger:                   @fluropink;
+@brand-primary:                  @fluroblue;
+
+@impac-positive:                 green;
+@impac-negative:                 @pink;
+@impac-positive2:                #3fc4ff;     // lighter colors used for payables-receivables
+@impac-negative2:                #1de9b6;     // lighter colorsused for payables-receivables
+
+// Dashboard
+//--------------------------------------
+@impac-dashboard-padding-top:                   50px;
+@impac-dashboard-margin-left:                   100px;
+
+// Title
+@impac-dashboard-title-color:                   @purple;
+@impac-dashboard-title-label-color:             @darkblue;
+@impac-dashboard-title-label-create-color:      white;
+@impac-dashboard-source-color:                  @impac-dashboard-title-label-color;
+@impac-dashboard-buttons-border-radius:         4px;
+
+// Dashboard Selector
+  // Tabs
+@impac-dashboard-selector-border:               1px solid @lightblue;
+@impac-dashboard-selector-tabs-margin:          0 2px 0 0;
+@impac-dashboard-selector-tabs-padding:         10px 8px 10px 15px;
+@impac-dashboard-selector-tabs-background-color: transparent;
+@impac-dashboard-selector-tabs-active-background-color: #ffffff;
+@impac-dashboard-selector-tabs-color:           black;
+@impac-dashboard-selector-tabs-active-color:    @purple;
+
+// Widget selector
+@impac-dashboard-widget-selector-bg:            #233845;
+@impac-dashboard-widget-selector-text-color:    white;
+
+// Widgets container
+@impac-placeholder-border:                      2px dashed @lightblue;
+@impac-widgets-container-side-padding:          0px;
+@impac-padding-between-widgets:                 12px;
+@impac-minimum-widget-size:                     250px;
+@impac-big-widget-size:                         565px;
+
+// Buttons
+@impac-btn-shadded-bg:                         @darkblue;
+@impac-btn-shadded-color:                      @mediumblue;
+
+// Dashboard Modals
+@impac-dashboard-loading-spinner:               white;
+
+// Widgets
+//--------------------------------------
+// Global
+@impac-widget-link-color:                      @purple;
+@impac-widget-buttons-color:                   @impac-widget-link-color;
+@impac-widget-tile-selected-color:             @impac-widget-link-color;
+@impac-widget-background-color:                white;
+@impac-widget-border:                          solid 1px darken(@lightgray,10%);
+@impac-widget-text-color:                      #5B6667;
+@impac-widget-text-color-medium:               lighten(@impac-widget-text-color,25%);
+@impac-widget-text-color-light:                lighten(@impac-widget-text-color,40%); //#acb0b1
+@impac-widget-borders-color:                   lighten(@impac-widget-text-color-light,10%); //#f3f4f4
+@impac-widget-scrollbar-color:                 #233845;
+@impac-widget-loading-spinner:                 #67BBE9;
+
+// Title
+@impac-widget-title-text-color:                darken(@impac-widget-text-color,5%);
+@impac-widget-title-bg:                        @impac-widget-background-color;
+@impac-widget-title-border:                    solid 1px @impac-widget-borders-color;
+@impac-widget-title-text-transform:            uppercase;
+@impac-widget-title-text-size:                 12px;
+@impac-widget-title-border-radius:             5px 5px 0px 0px;
+@impac-widget-top-buttons-color:               @impac-widget-text-color-light;
+
+// Content
+@impac-widget-content-border-radius:           0px 0px 5px 5px;
+@impac-widget-lines-container-max-height:      200px;
+
+// Settings
+// Param selector
+@impac-widget-param-selector-color:            @impac-widget-link-color;
+// Hist Mode Choser
+@impac-widget-hist-text-transform:             uppercase;
+@impac-widget-hist-text-size:                  12px;
+@impac-widget-hist-text-color:                 @impac-widget-text-color-light;
+// Params picker
+@impac-widget-params-picker-bg:                #1E303B;
+@impac-widget-params-picker-unchecked-bg:      #c2c4c4;
+// Limit emtries
+@impac-widget-limit-entries-color:             #1E303B;
+
+// Globals and Mixins
+@impac-widget-selectable-color:                @impac-widget-link-color;
+
+// Edit settings
+@impac-widget-sub-bg-color:                    darken(@impac-widget-background-color,10%);
+@impac-widget-sub-bg-color-light:              lighten(@impac-widget-sub-bg-color,5%); //f3f4f4
+
+// Accounts Comparison
+@impac-widget-accounts-comparison-lines-container-max-height: 220px;
+
+// Sales break-even
+@impac-widget-sales-break-even-bg:             rgb(25,40,49);
+@impac-widget-sales-break-even-text-color:     #1de9b6;
+
+.font(@size,@weight,@color) {
+  font-weight:@weight;
+  font-size:@size;
+  color:@color;
+}
+
+.center-bold (@margin-top: 30px) {
+  .font(22px, 900, @impac-widget-text-color);
+  text-align: center;
+  margin-top: @margin-top;
+}
+
+.center-thin () {
+  .font(16px, 300, @impac-widget-text-color);
+  text-align: center;
+}
+
+.center-small () {
+  .font(12px, 300, @impac-widget-text-color);
+  text-align: center;
+}
+
+.left-thin (@margin-top: 0px) {
+  .font(14px, 300, @impac-widget-text-color);
+  text-align: left;
+  margin-top: @margin-top;
+}
+
+.widget-height (@height: @impac-minimum-widget-size) {
+  min-height: @height;
+  @media (min-width: @screen-md-min) {
+    height: @height;
+    .chart-container {
+      max-width: @height + 20px;
+      max-height: @height - 125px;
+      margin: auto;
+    }
+  }
+}
+
+.short-widget () {
+  .widget-height();
+  .edit {
+    max-height: @impac-minimum-widget-size - 20px;
+  }
+}
+
+.tall-widget () {
+  .widget-height(@impac-big-widget-size);
+  .edit {
+    max-height: @impac-big-widget-size - 20px;
+    .widget-lines-container {
+      .scrollable(hidden);
+    }
+  }
+}
+
+.scrollable (@scroll-mode: auto) {
+  overflow-y: @scroll-mode;
+  overflow-x: hidden;
+}
+
+.selectable () {
+  cursor: pointer;
+  :hover, &:hover {
+    color: @impac-widget-selectable-color;
+  }
+  .selected {
+    border: solid 1px @impac-widget-selectable-color;
+    background-color: lighten(@impac-widget-selectable-color, 22%)
+  }
+}
+
+.alternate-bg (@even-color: @impac-widget-sub-bg-color) {
+  &:nth-child(even) {
+    background-color: @even-color;
+  }
+  &:nth-child(odd) {
+    background-color: @impac-widget-background-color;
+  }
+}
+
+.edit-panel-style() {
+  .scrollable();
+  color: @impac-widget-text-color;
+  padding: 2px;
+  font-size: 12px;
+
+  .bottom-buttons {
+    .btn {
+      border-radius: 2px;
+      margin-right: 5px;
+      padding: 3px 13px;
+      text-transform: uppercase;
+      font-size: 12px;
+
+      &.btn-default {
+        background-color: #c2c4c4;
+        border: solid 1px darken(#c2c4c4,10%);
+        color: white;
+        &:hover {
+          border: solid 1px darken(#c2c4c4,20%);
+          background-color: darken(#c2c4c4,10%);
+        }
+      }
+    }
+  }
+
+  h4 {
+    margin: 0;
+    margin-bottom: 8px;
+    text-align: left;
+    .font(12px,normal,@impac-widget-text-color-light);
+  }
+
+  .part {
+    margin-bottom: 8px;
+    padding: 10px 0px;
+    background-color: @impac-widget-sub-bg-color-light;
+    // color: #626d6d;
+    border: solid 1px @impac-widget-borders-color;
+
+    h5 {
+      display: block;
+      margin: 0;
+      margin-bottom: 10px;
+      padding: 0px 15px;
+      text-transform: uppercase;
+      .font(12px,normal,@impac-widget-text-color-light);
+    }
+
+    label {
+      font-weight: normal;
+    }
+
+    select.form-control {
+      margin: 0px;
+      border: solid 1px #acb0b1;
+      outline: none;
+      -webkit-box-shadow: none;
+      font-size: 13px;
+      color: #72728b;
+    }
+  }
+}
+
+.loader-style(@color: @impac-widget-loading-spinner) {
+  color: @color;
+}
+
+/* ************************************************************************ */
+/*                                GLOBAL STYLES
+**        This stylesheet should only contain styles applied global or in
+**                            2 or more components.
+/* ************************************************************************ */
+
+// Not ideal: intends to force a scrollbar on the window (not on the body),
+// so that the tooltips appended to body are not making the screen flickering.
+// (see when there is only 1 invoices list widget on the dashboard)
+// It is better if the tooltips can be appended to body because otherwise it's
+// messing the alternate-bg() mixing (by adding a child to the parent element)
+body {
+  height: 101% !important;
+}
+
+.analytics {
+
+  // ---------------------------------------------------------------------------
+  // --- Titles
+  // ---------------------------------------------------------------------------
+
+  h2 {
+    margin-top: 2px;
+    font-size: 14px;
+    color: @impac-widget-text-color;
+  }
+
+  h3 {
+    margin: 0px;
+    .left-thin();
+  }
+
+  h4 {
+    color: @impac-widget-text-color;
+    font-size: 16px;
+  }
+
+  // ---------------------------------------------------------------------------
+  // --- Colors
+  // ---------------------------------------------------------------------------
+
+  .positive,.green {
+    color: @impac-positive !important;
+  }
+
+  .negative,.red {
+    color: @impac-negative !important;
+  }
+
+  .positive2 {
+    color: @impac-positive2 !important;
+  }
+
+  .negative2 {
+    color: @impac-negative2 !important;
+  }
+
+  // ---------------------------------------------------------------------------
+  // --- Base elements
+  // ---------------------------------------------------------------------------
+
+  a {
+    font-weight: bold;
+    color: @impac-widget-link-color;
+    cursor: pointer;
+  }
+
+  .input-group {
+    width: 100%;
+  }
+
+  select {
+    margin-top: 5px;
+    background-color: @impac-widget-background-color;
+    height: 32px;
+  }
+
+  pre {
+    font-size: 12px;
+    padding: 0px;
+    margin: 1px 0px 8px 0px;
+    border: none;
+  }
+
+  .widget-item .content, kpis-bar .kpi {
+
+    ::-webkit-scrollbar {
+      width: 6px;
+      background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: lighten(@impac-widget-scrollbar-color,35%);
+      border-radius: 10px;
+      &:hover {
+        background-color: lighten(@impac-widget-scrollbar-color,40%);
+      }
+    }
+  }
+
+
+  // ---------------------------------------------------------------------------
+  // --- Custom elements
+  // ---------------------------------------------------------------------------
+
+  .btn.btn-shaded {
+    background-color: @impac-btn-shadded-bg;
+    border: solid 1px darken(@impac-btn-shadded-bg,5%);
+    color: @impac-btn-shadded-color;
+    font-weight: 400;
+
+    &:hover {
+      color: lighten(@impac-btn-shadded-color,5%);
+      background-color: lighten(@impac-btn-shadded-bg,5%);
+    }
+  }
+
+  .price {
+    .center-bold();
+  }
+
+  .currency {
+    .center-thin();
+    color: @impac-widget-text-color-medium;
+  }
+
+  .legend {
+    .center-small();
+    .scrollable();
+    color: @impac-widget-text-color-light;
+  }
+
+  .loader {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i {
+      .loader-style();
+    }
+    p {
+      margin-top: 10px;
+    }
+  }
+
+  .right-panel {
+    border-left: solid 1px #e6e6e6;
+  }
+
+  .selector {
+    text-transform: uppercase;
+    font-size: 12px;
+    color: @mediumblue;
+    text-align: center
+  }
+
+  .tile {
+    background-color: rgb(247,247,247);
+    box-shadow: 0px 7px 10px -7px #17262d;
+    height: 45px;
+    margin-bottom: 10px;
+    white-space: nowrap;
+    cursor: pointer;
+    &:hover {
+      background-color: darken(#F1F9FF, 3%);
+    }
+    .colored-area {
+      background-color: #3FC4FF;
+      height: 100%;
+      float: right;
+      color: white;
+      text-align: right;
+      padding: 5px 10px;
+      min-width: 8%;
+      &.selected {
+        background-color: @impac-widget-tile-selected-color;
+      }
+    }
+    .main-text {
+      color: @impac-widget-text-color;
+      padding: 20px 0px 0px 5px;
+      height: 100%;
+      font-style: italic;
+      font-weight: bold;
+    }
+  }
+
+  .widget-lines-container {
+    .scrollable();
+    max-height: @impac-widget-lines-container-max-height;
+    text-align: left;
+    font-size: 12px;
+
+    .widget-line {
+      margin: 0px;
+      padding: 5px;
+      color: @mediumblue;
+
+      &.header {
+        .font(12px,500,@impac-widget-text-color-medium);
+        text-transform: uppercase;
+      }
+      &.small-row {
+        margin: inherit;
+        margin-left: -3px;
+        margin-right: -3px;
+        padding: 2px;
+
+        & > [class*='col-'] {
+          padding-left: 3px;
+          padding-right: 3px;
+        }
+      }
+      &.total {
+        padding: 0px;
+        border-top: solid 1px @lightgray;
+      }
+
+      .dashed {
+        border-bottom: dashed 1px @impac-widget-borders-color;
+      }
+    }
+  }
+}
+
+.vertical-scroll {
+  overflow-y: scroll;
+}
+
+.horizontal-scroll {
+  overflow-x: scroll;
+}
+
+// The tooltips should be append to body
+.tooltip.impac-widgets-tooltip .tooltip-inner.ng-binding {
+  text-align: left;
+  background-color: @mdarkblue;
+  max-width: 100%;
+  white-space: nowrap;
+  strong {
+    color: @mgreen;
+  }
+}
+
+// --- Reusable widget style mixins
+
+// Payroll-Summary - Profit-and-Loss
+.drill-down-widget () {
+  .tall-widget();
+
+  .widget-lines-container {
+    .scrollable(scroll);
+    max-height: 540px;
+    margin-right: 10px;
+
+    .widget-line.total {
+      .selectable();
+    }
+  }
+
+  .right-panel {
+    .widget-lines-container {
+      .scrollable(auto);
+      max-height: 235px;
+    }
+  }
+
+  .no-element {
+    .center-thin();
+  }
+}
+
+// Top customers summary - Sales cycle...
+.simple-summary-widget() {
+  .chart-container {
+    max-width: 410px;
+  }
+  .legend {
+    max-height: 28px;
+  }
+}
+
+// Invoices list - sales list
+.simple-list-widget() {
+  .widget-lines-container {
+    max-height: 230px;
+    .widget-line {
+      .alternate-bg();
+      &.header {
+        background-color: @impac-widget-background-color;
+      }
+    }
+  }
+}
+
+// Workforce-Summary - Salaries-Summary
+.expandable-filterable-widget() {
+  h3.left {
+    margin-top: 69px;
+    text-align: center;
+  }
+  h3.right {
+    margin-bottom: 10px;
+    text-align: center;
+  }
+  .price {
+    margin-top: 0;
+  }
+  .widget-lines-container {
+    max-height: 75px;
+    .widget-line {
+      font-size: 11px;
+    }
+  }
+}
+
+// Leads funnel - Opportunities funnel
+.funnel-widget() {
+  .tall-widget();
+  .funnel-container {
+    width: 95%;
+    margin: auto;
+    margin-top: 15px;
+    padding-right: 10px;
+    max-height: @impac-big-widget-size - 60px;
+    overflow: auto;
+  }
+  .right-panel {
+    .widget-lines-container {
+      max-height: @impac-big-widget-size - 20px;
+      margin-right: 10px;
+      .widget-line {
+        cursor: default;
+      }
+    }
+  }
+}
+.analytics {
+
+  &.show-dhb {
+    transition: opacity 1s;
+    opacity: 1;
+  }
+  &.hide-dhb {
+    opacity: 0;
+  }
+
+
+  padding-top: @impac-dashboard-padding-top;
+  margin-left: @impac-dashboard-margin-left;
+
+  #head-title {
+    // contains customisable impac logo, and heading text.
+    #dashboard-heading {
+      img {
+      float: left;
+      margin-right: 15px;
+      }
+      h2 {
+        padding-top: 12px;
+        height: 48px;
+        font-size: 30px;
+        color: #67bbe9;
+      }
+    }
+  }
+
+  #sub-menu {
+    margin-top: 15px;
+    h3 {
+      font-size: 26px;
+      font-weight: normal;
+      margin-bottom: 10px;
+      color: #233845;
+    }
+
+    .fa.fa-times {
+      margin: 6px;
+      color: lighten(#233845, 15%);
+      cursor: pointer;
+      float: right;
+    }
+  }
+
+  #widget-selector {
+    background-color: @impac-dashboard-widget-selector-bg;
+    color: @impac-dashboard-widget-selector-text-color;
+    padding: 0px 45px 10px 45px;
+    margin: 10px -45px;
+
+    -webkit-user-select: none; /* Chrome/Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+ */
+    /* Rules below not implemented in browsers yet */
+    -o-user-select: none;
+    user-select: none;
+
+    .badge.confirmation {
+      float: right;
+      margin-right: 10px;
+      opacity: 0;
+    }
+
+    .title {
+      padding: 15px 0px;
+      border-bottom: solid 1px lighten(@impac-dashboard-widget-selector-bg,6%);
+      i.fa.fa-times-circle {
+        float: right;
+        cursor: pointer;
+        margin-right: -35px;
+        margin-top: -6px;
+        font-size: 20px;
+        &:hover {
+          color: @mlightgrey;
+        }
+      }
+    }
+
+    .top-container {
+      margin: 15px 0px;
+      background-color: transparent;
+      border-radius: 3px;
+
+      .categories {
+        background-color: darken(@impac-dashboard-widget-selector-bg,6%);
+        padding-bottom: 15px;
+        .row.lines {
+          p:hover {
+            background-color: darken(@impac-dashboard-widget-selector-bg,3%);
+          }
+          p.selected {
+            background-color: @impac-widget-link-color;
+            font-weight: bold;
+            .box-shadow(-2px 2px 10px -4px black);
+          }
+        }
+        .arrow {
+          position: absolute;
+          top: 33px;
+          right: -11px;
+          z-index: 1;
+          .square {
+            width: 50px;
+            height: 30px;
+            position: absolute;
+            top: 10px;
+            right: 17px;
+            background-color: @impac-widget-link-color;
+          }
+          i.fa.fa-caret-right {
+            font-size: 52px;
+            color: @impac-widget-link-color;
+            float: right;
+            position: absolute;
+            top: -1px;
+            right: 0px;
+          }
+        }
+      }
+
+      .widgets {
+        background-color: darken(@impac-dashboard-widget-selector-bg,3%);
+        padding-bottom: 15px;
+        .row.header {
+          text-transform: uppercase;
+          font-size: 12px;
+          color: @impac-widget-link-color;
+        }
+        .row.lines {
+          padding: 3px 0px;
+          p:hover {
+            background-color: darken(@impac-dashboard-widget-selector-bg,6%);
+            font-weight: normal;
+          }
+          .fa.fa-plus-circle {
+            float: right;
+            margin-top: 3px;
+          }
+        }
+      }
+
+      .row.header {
+        padding: 10px 20px;
+        font-weight: bold;
+        min-height: 40px;
+      }
+
+      .row.lines {
+        overflow-x: hidden;
+        overflow-y: scroll;
+        height: 200px;
+        margin-right: -10px;
+        margin-left: 0px;
+        .box-shadow(inset 0px 0px 10px -4px black);
+        p {
+          padding: 5px;
+          margin: 0px;
+          border-bottom: solid 1px @impac-dashboard-widget-selector-bg;
+          cursor: pointer;
+          &:hover, &.selected {& > div {
+      display: inline-block;
+      margin-left: 10px;
+    }
+    select {
+      margin: 0;
+    }
+    .btn {
+      height: 32px;
+      padding-top: 5px;
+    }
+            color: @impac-dashboard-widget-selector-text-color;
+          }
+        }
+
+        &::-webkit-scrollbar {
+          width: 6px;
+          background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: lighten(@impac-dashboard-widget-selector-bg,3%);
+          border-radius: 10px;
+          &:hover {
+            background-color: lighten(@impac-dashboard-widget-selector-bg,6%);
+          }
+        }
+      }
+    }
+
+    .bottom {
+      height: 20px;
+      .suggestion {
+        float: right;
+        opacity: 0.7;
+        a {
+          cursor: pointer;
+          &:hover {
+            color: @fluroblue;
+          }
+        }
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  #dashboard-settings-panel {
+    position: relative;
+    margin: 0px 2px;
+    & > * {
+    }
+    & > div {
+      display: inline-block;
+      margin-left: 5px;
+      margin-top: 5px;
+    }
+    select {
+      margin: 0;
+    }
+    .btn {
+      height: 32px;
+      padding-top: 5px;
+    }
+  }
+
+  // no widgets - empty dashboard.
+  #no-widgets-container {
+    position: relative;
+    min-height: 150px;
+
+    // background image asset
+    img.bg {
+      left: 0;
+      top: 0;
+      min-width: 100%;
+      min-height: 100%;
+    }
+
+    // no widgets message that sits above image asset
+    .impac-info-message {
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+  }
+
+  // parent div section for widgets to be housed.
+  #widgets-section {
+    padding-left: @impac-widgets-container-side-padding;
+    padding-right: @impac-widgets-container-side-padding;
+
+    // container for widgets
+    #widgets-container {
+      // Quick-fix to avoid screen flockering when tooltips are appended to body:
+      // min-height will force a scrollbar to appear...
+      min-height: 700px;
+    }
+
+    .placeHolderBox {
+      margin: @impac-padding-between-widgets;
+      height: 267px;
+      width: 300px;
+      float: left;
+      border: @impac-placeholder-border;
+      background: none;
+    }
+
+    // individual widget
+    .widget-item {
+      padding: @impac-padding-between-widgets;
+    }
+  }
+}
+
+// Tooltips are append to body
+.tooltip.impac-widget-selector-tooltip .tooltip-inner.ng-binding {
+  font-size: 14px;
+}
+
+.impac-widget-suggestion .modal-body {
+  input,textarea {
+    width: 100%;
+    color: black;
+  }
+  textarea {
+    height: 150px;
+  }
+  .thanks-message {
+    color: @mgreen;
+  }
+}
+
+// This style applies to dashboard modals, and also the
+// `accounts-custom-calculation/formula.modal.html` modal.
+.modal-footer .loader {
+  .loader-style(@impac-dashboard-loading-spinner)
+}
+
+#module__dashboard-selector {
+  a {
+    font-weight: normal;
+  }
+  // dashboard selector template wrapper div
+  & > div:first-child {
+    border-bottom: @impac-dashboard-selector-border;
+  }
+
+  .buttons-bar-row {
+    margin-top: 54px;
+  }
+
+  // container for dashboard selector 'dropdown' template
+  .buttons-bar {
+    padding: 0;
+    padding-bottom: 5px;
+
+    .btn {
+      float: right;
+      margin: 3px;
+      border-radius: @impac-dashboard-buttons-border-radius;
+    }
+
+    .dropdown-container {
+
+      .dashboard-title {
+        color: @impac-dashboard-title-color;
+        display: inline;
+        cursor: pointer;
+        &:hover {
+          color: darken(@impac-dashboard-title-color,10%);
+        }
+        i.fa.fa-pencil {
+          margin-left: 20px;
+          font-size: 14px;
+          &:hover {
+            color: @mgreen;
+          }
+        }
+      }
+
+      .dashboard-select {
+        margin: 5px 0px 10px 30px;
+        height: auto;
+        border-left: 1px solid @impac-dashboard-title-color;
+        border-bottom: 1px solid @impac-dashboard-title-color;
+        width: 300px;
+        background-color: @lightgray;
+        cursor: pointer;
+        .option {
+          color: @impac-dashboard-title-label-color;
+          white-space: nowrap;
+          &:hover {
+            background-color: @impac-widget-background-color;
+          }
+          &.create {
+            background-color: @impac-dashboard-title-color;
+            color: @impac-dashboard-title-label-create-color;
+            height: 30px;
+            padding: 5px 10px 5px 10px;
+            &:hover {
+              background-color: darken(@impac-dashboard-title-color,10%);
+            }
+          }
+          i.fa.fa-pencil {
+            float: right;
+            padding-top: 7px;
+            text-align: center;
+            width: 15%;
+            height: 30px;
+            &:hover {
+              color: darken(@impac-dashboard-title-color,10%);
+            }
+          }
+          span.name {
+            width: 85%;
+            height: 30px;
+            display: inline-block;
+            padding: 5px 10px 5px 10px;
+          }
+        }
+      }
+
+      .change-name {
+        position: absolute;
+        top: 30px;
+        left: 20px;
+        width: 60%;
+        background-color: rgb(23, 38, 45);
+        color: white;
+        padding: 10px;
+        border-radius: 4px;
+        text-align: center;
+        .box-shadow(0px 0px 25px 4px black);
+        z-index: 50;
+        border: solid 1px @impac-widget-background-color;
+
+        .form-control {
+          height: 25px;
+          margin-bottom: 10px;
+        }
+      }
+
+      .data-source-label {
+        color: @impac-dashboard-source-color;
+        padding-left: 3px;
+        margin: 0px;
+      }
+    }
+
+    .loader-container {
+      padding-left: 10px;
+      .loading-spinner {
+        .loader-style();
+        font-size: 40px;
+      }
+    }
+  }
+
+  // angular bootstrap tabs & pills
+  .nav-tabs {
+    border-bottom: 0;
+  }
+  .nav.nav-tabs,
+  .nav.nav-pills {
+
+    // add new tab
+    li:last-child > a {
+      padding-right: 15px;
+      tab-heading a {
+        position: static;
+      }
+    }
+  }
+
+  // TABS
+  .nav.nav-tabs {
+    // tab
+    li > a {
+      padding: @impac-dashboard-selector-tabs-padding;
+      margin: @impac-dashboard-selector-tabs-margin;
+      background-color: @impac-dashboard-selector-tabs-background-color;
+      border: @impac-dashboard-selector-border;
+      color: @impac-dashboard-selector-tabs-color;
+    }
+    // active tab
+    li.active > a {
+      background-color: @impac-dashboard-selector-tabs-active-background-color;
+      color: @impac-dashboard-selector-tabs-active-color;
+    }
+    // add new tab
+    li:last-child > a {
+      // padding-left: 5px;
+    }
+    li:last-child.active > a {
+      background-color: @impac-dashboard-selector-tabs-background-color;
+    }
+  }
+
+  // PILLS
+  // TODO: Add less variables for customisation.
+  .nav.nav-pills {
+    // tab
+    li > a {
+      min-width: 0px;
+      padding-right: 8px;
+    }
+    // add a new tab
+    li:last-child tab-heading a {
+      margin-left: 2px;
+    }
+    // add a new tab
+    li:last-child.active > a {
+      background-color: #f4f4f4;
+    }
+  }
+  // tab icons
+  tab-heading a.close-link {
+    border-bottom: 0px solid;
+    margin-left: 12px;
+    position: relative;
+    top: -9px;
+    right: 1px;
+    color: @impac-dashboard-selector-tabs-color;
+  }
+  ////////
+}
+
+impac-kpi .kpi {
+  .scrollable();
+  text-align: center;
+  max-width: 160px;
+  min-height: 135px;
+  padding: 10px 3px;
+  border-radius: 3px;
+  background-color: white;
+  box-shadow: 0px 4px 12px -7px #17262d;
+
+  &.static {
+    .kpi-value {
+      display: block;
+      font-size: 14px;
+      font-weight: 700;
+    }
+  }
+
+  .kpi-show {
+    white-space: normal;
+
+    .kpi-title {
+      .text-uppercase();
+      font-size: 12px;
+      font-weight: 600;
+      color: @impac-widget-text-color-medium;
+      border-bottom-color: @impac-widget-text-color-medium;
+
+      &:hover {
+        color: @impac-widget-text-color;
+        border-bottom-color: @impac-widget-text-color;
+      }
+    }
+
+    .editable-wrap .editable-controls {
+      & > input {
+        width: 65%;
+        height: 25px;
+        line-height: 25px;
+      }
+
+      .editable-buttons {
+        button {
+          margin: 0px 0px 0px 1px;
+          height: 25px;
+          padding: 0px 4px;
+        }
+      }
+    }
+
+    .kpi-watch {
+      font-size: 11px;
+    }
+
+    .kpi-value {
+      position: absolute;
+      top: 75px;
+      left: 0;
+      right: 0;
+      font-size: 20px;
+      font-weight: 700;
+    }
+
+    .kpi-alert {
+      .text-uppercase();
+      font-size: 11px;
+      font-weight: 700;
+      background-color: white;
+      border: 1px solid @brand-danger;
+      border-radius: 4px;
+      color: @brand-danger;
+      padding: 2px 5px;
+
+      position: absolute;
+      bottom: 15px;
+      left: 15%;
+      width: 70%;
+
+      &.kpi-close {
+        bottom: auto;
+        right: 20px;
+        top: 5px;
+        border-radius: 10px;
+        width: 21px;
+        left: auto;
+      }
+
+      &:hover {
+        color: darken(@brand-danger, 10%);
+        border-color: darken(@brand-danger, 10%);
+      }
+
+      &.static {
+        position: static;
+        margin: 5px 20px;
+      }
+    }
+  }
+
+  .kpi-edit {
+    .param-name {
+      .small();
+    }
+
+    .edit-limit {
+      .input-limit-value, .select-limit-mode {
+        margin-top: 0;
+        width: 50%;
+
+        .form-control-feedback {
+          color: @impac-widget-text-color-medium;
+          .small();
+          line-height: 24px;
+        }
+      }
+    }
+
+    .form-control.input-sm {
+      margin-top: 0;
+      height: 24px;
+      line-height: 24px;
+    }
+
+    .form-group {
+      margin-bottom: 0;
+    }
+
+    .btn.btn-xs {
+      margin-top: 4px;
+    }
+  }
+}
+
+.analytics kpis-bar > .key-stats .kpi {
+  min-height: 80px;
+}
+
+.analytics kpis-bar > .kpis {
+  padding: 10px 0px;
+  min-height: 145px;
+  overflow: hidden;
+
+  .available-kpis-container {
+    text-align: left;
+    position: absolute;
+    z-index: 15;
+    background-color: @impac-widget-background-color;
+    width: 500px;
+    max-height: 115px;
+    box-shadow: 0px 3px 12px -4px;
+
+    .scrollable();
+
+    .available-kpi {
+      border-bottom: solid 1px #D8DBDB;
+      padding: 4px;
+      padding-left: 8px;
+      height: 38px;
+
+      span.kpi-name {
+        padding-top: 5px;
+        display: inline-block;
+      }
+
+      .form-control-static, .btn.btn-sm.btn-info {
+        float: right;
+        min-height: 30px;
+        height: 30px;
+        float: right;
+        margin-left: 3px;
+        margin-top: 0px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .title-actions {
+    .title {
+      margin-top: 10px;
+      font-weight: 700;
+    }
+  }
+
+  .kpi-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 135px;
+  }
+}
+
+.analytics kpis-bar > .key-stats {
+  background-color: white;
+  // color: @light-black;
+  padding: 5px 0px;
+}
+
+.widget-item .top-line {
+  position: relative;
+  cursor: move;
+  background-color: @impac-widget-title-bg;
+  padding: 9px 9px 0px 9px;
+  border-radius: @impac-widget-title-border-radius;
+  border: @impac-widget-border;
+  border-bottom: none;
+  min-height: 41px;
+  .box-shadow(0px 1px 8px -4px);
+}
+
+.widget-item .content {
+  padding: 9px;
+  border-radius: @impac-widget-content-border-radius;
+  border: @impac-widget-border;
+  border-top: none;
+  background-color: @impac-widget-background-color;
+
+  vertical-align: top;
+  .box-shadow(0px 1px 8px -4px);
+  .short-widget();
+
+  .edit {
+    .edit-panel-style();
+  }
+
+  &.accessible {
+    height: auto !important;
+    min-height: 250px !important;
+    max-height: auto !important;
+  }
+}
+
+.analytics .dashboard-settings.currency {
+  text-align: right;
+  select {
+    margin-top: 4px;
+  }
+}
+
+.analytics .dashboard-settings.sync-apps {
+  span {
+    margin-right: 5px;
+    color: @impac-widget-text-color-medium;
+  }
+}
+
+.analytics .widget-item .content .data-not-found {
+  text-align: center;
+  font-size: 18px;
+  color: @impac-widget-text-color;
+  img {
+    opacity: 0.8;
+    -webkit-filter: blur(2px);
+    -moz-filter: blur(2px);
+    -o-filter: blur(2px);
+    -ms-filter: blur(2px);
+    filter: blur(2px);
+    // fix for mobile, prevents images from extended the width of the widget.
+    max-width: 100%;
+  }
+  .message {
+    position: absolute;
+    top: 90px;
+    width: 70%;
+    left: 15%;
+    background-color: rgb(244, 248, 249);
+    padding: 10px 0px;
+    border-radius: 4px;
+    border: solid 1px @impac-widget-borders-color;
+    a {
+      color: @impac-widget-link-color;
+      display: block;
+      font-size: 16px;
+      font-weight: normal;
+    }
+  }
+}
+.analytics .widget-item {
+  .title-wrapper {
+    width: 100%;
+    padding: 0px 10px 10px 10px;
+    white-space: nowrap;
+
+    .title {
+      display: inline;
+      text-transform: @impac-widget-title-text-transform;
+      .font(@impac-widget-title-text-size,600,@impac-widget-title-text-color);
+      text-align: left;
+      cursor: text;
+
+      &.editable-hide {
+        display: none;
+      }
+    }
+
+    .editable-wrap {
+      position: relative;
+      height: 20px;
+      min-width: 100%;
+      // otherwise, white-space is overriden in mno-enterprise
+      white-space: nowrap;
+
+      .editable-controls {
+        min-width: 100%;
+
+        .editable-input {
+          height: 20px;
+          font-size: 12px;
+          text-transform: @impac-widget-title-text-transform;
+          // 55px is .editable-buttons width
+          width: ~"calc(100% - 55px)";
+          padding: 0px 3px;
+        }
+
+        .editable-buttons {
+          background-color: @impac-widget-title-bg;
+          button {
+            margin: 0px 0px 0px 5px;
+            height: 20px;
+            padding: 0px 5px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.analytics .widget-item .top-line #module__top-buttons {
+
+  i.fa {
+    margin-top: 3px;
+  }
+
+  .top-buttons-wrapper {
+    position: absolute;
+    right: 9px;
+    top: 7px;
+
+    .top-button {
+      background: transparent;
+      border: none;
+      color: @impac-widget-top-buttons-color;
+      padding: 1px;
+      margin-left: 3px;
+      outline: none;
+
+      &:active, &:focus {
+        -webkit-box-shadow: none;
+      }
+
+      &.btn-refresh {
+        font-size: 17px;
+        margin-top: -1px;
+        &:hover {
+          color: @mblue;
+        }
+      }
+      &.btn-edit {
+        font-size: 14px;
+        &:hover, &.edit-mode {
+          color: darken(@mgreen,10%);
+        }
+      }
+      &.btn-close {
+        &:hover {
+          color: @pink
+        }
+      }
+
+    }
+  }
+
+  .confirm-delete-popover {
+    position: absolute;
+    top: 90px;
+    left: 15%;
+    width: 70%;
+    background-color: #17262d;
+    padding: 10px;
+    border-radius: 4px;
+    z-index: 50;
+    color: white;
+    text-align: center;
+    cursor: default;
+    .box-shadow(0px 0px 25px 4px black);
+    border: solid 1px @impac-widget-background-color;
+
+    h4 {
+      color: @impac-widget-top-buttons-color;
+      font-weight: bold;
+    }
+
+    .loader i.fa.fa-spinner {
+      font-size: 26px;
+    }
+  }
+
+}
+
+.analytics .widget-item .content.accounts-accounting-values {
+  // Nothing particular yet for this template...
+}
+.analytics .widget-item .content.accounts-assets-liability-summary {
+  .param-selector {
+    text-align: center;
+  }
+  .legend {
+    text-align: left;
+    max-height: 97px;
+
+    .title {
+      text-align: center;
+      border-bottom: dashed 1px @impac-widget-borders-color;
+    }
+  }
+  p {
+    font-weight: bold;
+  }
+}
+
+.analytics .widget-item .content.accounts-assets-summary {
+  .legend {
+    text-align: left;
+    max-height: 115px;
+
+    .title {
+      text-align: center;
+      border-bottom: dashed 1px @impac-widget-borders-color;
+    }
+  }
+}
+
+
+.analytics .widget-item .content.accounts-balance {
+  h3 {
+    .left-thin(30px);
+    text-align: center;
+  }
+  
+  .price {
+    .center-bold(0px);
+  }
+}
+.analytics .widget-item .content.accounts-balance-sheet {
+  .tall-widget();
+  .widget-lines-container {
+    .scrollable(scroll);
+    max-height: 540px;
+  }
+
+  .no-data-block {
+    .center-thin();
+  }
+}
+.analytics .widget-item .content.accounts-cash-summary {
+  .drill-down-widget();
+  .right-panel > .widget-lines-container {
+    max-height: 215px;
+  }
+
+  .row.widget-line.total.cash {
+    border-top: solid 1px;
+    border-bottom: double;
+  }
+}
+.analytics .widget-item .content.accounts-class-comparison {
+  .param-selector {
+    text-align: center;
+  }
+  .widget-lines-container {
+    max-height: 94px;
+    color: #626d6d;
+  }
+}
+
+.analytics .widget-item .content.accounts-comparison {
+  .tall-widget();
+
+  .add-account {
+    position: absolute;
+    right: 40px;
+    bottom: 30px;
+    width: 160px;
+    select {
+      font-size: 13px;
+      background-color: @impac-widget-link-color;
+      color: @impac-widget-background-color;
+      outline: none;
+      border: none;
+      cursor: pointer;
+      &[disabled] {
+        cursor: not-allowed;
+        background-color: lighten(@impac-widget-link-color,10%);
+        &:hover {
+          background-color: lighten(@impac-widget-link-color,10%);
+        }
+      }
+      &:hover {
+        background-color: darken(@impac-widget-link-color,10%);
+      }
+      option {
+        background-color: @impac-widget-background-color;
+        color: lighten(@impac-widget-text-color,40%);
+        &[disabled] {
+          color: @impac-widget-background-color;
+        }
+      }
+    }
+  }
+  button.close {
+    font-size: 15px;
+  }
+  .legend {
+    text-align: left;
+    max-height: 103px;
+  }
+  .row {
+    margin: 0;
+  }
+  .widget-lines-container {
+    font-size: 11px;
+    max-height: @impac-widget-accounts-comparison-lines-container-max-height;
+  }
+
+  .settings.params-checkboxes {
+    margin-left: 13px;
+  }
+
+  .comparable-error h5 {
+    margin-left: 13px;
+    color: @impac-negative;
+  }
+}
+
+.analytics .widget-item .content.accounts-custom-calculation {
+  h3 {
+    margin-top: 85px;
+    text-align: center;
+    font-weight: bold;
+  }
+
+  .price {
+    .center-bold(75px);
+  }
+
+  .legend {
+    max-height: 125px;
+  }
+}
+
+.analytics.modal-custom-calculation {
+  margin: 0px;
+  padding: 0px;
+}
+
+.analytics.modal-custom-calculation .modal-body {
+  .edit {
+    .edit-panel-style();
+    padding: 5px;
+    .part {
+      width: 49%;
+    }
+  }
+}
+.analytics .widget-item .content.accounts-detailed-classifications {
+  .tall-widget();
+  .widget-lines-container {
+    .scrollable(scroll);
+    max-height: 540px;
+  }
+  // single entity selected class title
+  .account-class-title {
+    margin-bottom: 8px;
+    margin-left: 11px;
+  }
+  // .no-data-block {
+  //   .center-thin();
+  // }
+}
+
+
+
+.analytics .widget-item .content.accounts-expense-weight {
+  .legend {
+    text-align: left;
+    max-height: 115px;
+
+    .title {
+      text-align: center;
+      border-bottom: dashed 1px @impac-widget-borders-color;
+    }
+  }
+}
+.analytics .widget-item .content.accounts-expenses-revenue {
+  .legend {
+    font-weight: bold;
+  }
+
+  .settings.params-checkboxes {
+    margin-left: 0px;
+    margin-top: 15px;
+    text-align: center;
+  }
+}
+.analytics .widget-item .content.accounts-payable-receivable {
+  h3 {
+    text-align: center;
+  }
+  .legend {
+    font-weight: bold;
+  }
+  .payable {
+    margin-top: 15px;
+  }
+  .price {
+    .center-bold(0px);
+  }
+}
+.analytics .widget-item .content.accounts-profit-and-loss {
+  .drill-down-widget();
+
+  .row.widget-line.total.profit {
+    border-top: solid 1px;
+    border-bottom: double;
+  }
+}
+.analytics .widget-item .content.hr-employee-details {
+  font-size: 12px;
+  .details-container {
+    padding: 0px;
+    max-height: 200px;
+    .scrollable();
+  }
+  pre {
+    font-size: 12px;
+    padding: 0px;
+    margin: 1px 0px 8px 0px;
+    border: none;
+  }
+  .right-panel {
+    .details-container {
+      max-height: 208px;
+    }
+    .legend {
+      margin-bottom: 5px;
+    }
+  }
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+}
+.analytics .widget-item .content.hr-employees-list {
+  .legend {
+    margin-bottom: 9px;
+  }
+  .widget-lines-container {
+    text-align: center;
+    .widget-line {
+      .alternate-bg();
+    }
+  }
+  .edit {
+    .widget-lines-container {
+      text-align: left;
+    }
+  }
+}
+.analytics .widget-item .content.hr-leaves-balance{
+  .employee-name {
+    text-align: center;
+  }
+  .balance {
+    .center-bold(0px);
+  }
+  h3 {
+    margin-top: 33px;
+    text-align: center;
+  }
+}
+.analytics .widget-item .content.hr-leaves-schedule{
+  .fc-button {
+    height: 22px;
+    font-size: 12px;
+    color: @impac-widget-buttons-color;
+    background: white;
+    outline: none;
+    &:hover {
+      color: white;
+      background: @impac-widget-buttons-color;
+    }
+  }
+  .fc-toolbar {
+    margin-bottom: 5px;
+  }
+  .fc-day-grid,.fc-widget-header {
+    font-size: 12px;
+    color: @impac-widget-text-color;
+  }
+}
+.analytics .widget-item .content.hr-payroll-summary {
+  .drill-down-widget();
+  .right-panel .widget-lines-container {
+      max-height: 175px;
+  }
+  .no-element p {
+    // corrects alignment issues with the container, which caused text to overflow beyond parents.
+    max-width: 90% !important;
+    margin: auto !important;
+  }
+}
+
+.analytics .widget-item .content.hr-payroll-taxes {
+  // Nothing special yet for this template
+}
+.analytics .widget-item .content.hr-salaries-summary {
+  .expandable-filterable-widget();
+}
+.analytics .widget-item .content.hr-superannuation-accruals {
+  h3 {
+    margin-top: 63px;
+    text-align: center;
+  }
+  .legend {
+    margin-top: 23px;
+  }
+  .currency {
+    font-size: 14px;
+  }
+  .price {
+    .center-bold(0px);
+  }
+}
+.analytics .widget-item .content.hr-timesheets {
+  .currency {
+    font-size: 14px;
+  }
+  .widget-lines-container {
+    max-height: 210px;
+  }
+}
+.analytics .widget-item .content.hr-workforce-summary {
+  .expandable-filterable-widget();
+}
+.analytics .widget-item .content.invoices-aged-payables-receivables {
+  .drill-down-widget();
+
+  .astericks-info {
+    text-align: left;
+    padding-left: 15px;
+  }
+}
+
+.analytics .widget-item .content.invoices-list {
+  .simple-list-widget();
+}
+.analytics .widget-item .content.invoices-summary {
+  .simple-summary-widget();
+}
+.analytics .widget-item .content.sales-aged {
+  .tall-widget();
+
+  .widget-lines-container {
+    max-height: 260px;
+  }
+}
+.analytics .widget-item .content.sales-break-even {
+  .price {
+    .center-bold(0px);
+  }
+  .block {
+    margin: 5px;
+    padding: 0px 10px 5px 10px;
+    text-align: left;
+    box-shadow: 0px 7px 10px -7px #17262d;
+    font-size: 12px;
+    form.editable-wrap .editable-controls input {
+      margin-top: 5px;
+      width: 100px;
+    }
+    &.to-date {
+      background-color: @impac-widget-sub-bg-color;
+      color: @impac-widget-text-color;
+    }
+    &.to-breakeven {
+      margin-top: 10px;
+      background-color: @impac-widget-sales-break-even-bg;
+      color: @impac-widget-sales-break-even-text-color;
+      .title {
+        border-bottom: solid 1px lighten(@impac-widget-sales-break-even-bg, 10%);
+      }
+      .define-text {
+        .center-thin();
+        padding-top: 5px;
+        color: @impac-widget-sales-break-even-text-color;
+      }
+      .price {
+        color: @impac-widget-sales-break-even-text-color;
+      }
+    }
+
+    .title {
+      font-size: 13px;
+      text-align: center;
+      font-variant: small-caps;
+      border-bottom: solid 1px @lightgray;
+      font-weight: 300;
+    }
+  }
+}
+.analytics .widget-item .content.sales-comparison {
+  .drill-down-widget();
+  .right-panel .widget-lines-container {
+    max-height: 270px;
+  }
+}
+.analytics .widget-item .content.sales-customer-details {
+  .loader {
+    font-size: 14px;
+  }
+  font-size: 12px;
+  .details-container {
+    padding: 0px;
+    max-height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .right-panel {
+    .details-container {
+      max-height: 208px;
+    }
+    .legend {
+      margin-bottom: 5px;
+    }
+  }
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+}
+.analytics .widget-item .content.sales-cycle {
+  .simple-summary-widget();
+}
+.analytics .widget-item .content.sales-forecast {
+  .tall-widget();
+  .widget-lines-container .widget-line.main {
+    .selectable();
+  }
+}
+.analytics .widget-item .content.sales-growth {
+  .price {
+    .center-bold(0px);
+  }
+  .legend {
+    max-height: 49px;
+    font-size: 14px;
+  }
+}
+.analytics .widget-item .content.sales-leads-funnel {
+  .funnel-widget();
+}
+
+.analytics .widget-item .content.sales-leads-list {
+  .simple-list-widget();
+  .widget-lines-container {
+    .scrollable(scroll);
+  }
+}
+.analytics .widget-item .content.sales-list {
+  .simple-list-widget();
+  .widget-lines-container {
+    .scrollable(scroll);
+    max-height: 210px;
+  }
+  .selector {
+    margin-bottom: 4px;
+  }
+}
+.analytics .widget-item .content.sales-margin {
+  // Nothing special yet for this template
+}
+.analytics .widget-item .content.sales-number-of-leads {
+  .stats {
+    margin-top: 35px;
+    font-size: 18px;
+    .stat {
+      margin: 15px 0px 10px 0px;
+      border-bottom: solid 1px @lightgray;
+      span.title {
+        font-weight: bold;
+      }
+      span.nominal {
+        float: right;
+        text-align: right;
+        font-weight: 300;
+      }
+      span.variation {
+        float: right;
+        width: 50px;
+        text-align: right;
+        font-style: italic;
+        font-size: 14px;
+        font-weight: 300;
+        margin-top: 2px;
+      }
+    }
+  }
+}
+.analytics .widget-item .content.sales-opportunities-funnel {
+  .funnel-widget();
+}
+
+.analytics .widget-item .content.sales-performance {
+  .drill-down-widget();
+  .right-panel > .widget-lines-container {
+    max-height: 215px;
+  }
+  // .simple-list-widget();
+  // .widget-lines-container {
+  //   .scrollable(scroll);
+  //   max-height: 210px;
+  //   .widget-line.total {
+  //     .selectable();
+  //   }
+  // }
+  // .selector {
+  //   margin-bottom: 4px;
+  // }
+}
+.analytics .widget-item .content.sales-segmented-turnover {
+  h3.right {
+    margin-top: 55px;
+    text-align: center;
+  }
+  .selector {
+    margin-bottom: 10px;
+  }
+  .analysis {
+    .center-bold(0px);
+  }
+  .widget-lines-container {
+    max-height: 75px;
+    .widget-line {
+      font-size: 11px;
+    }
+  }
+}
+.analytics .widget-item .content.sales-summary {
+  .simple-summary-widget();
+  .selector {
+    margin-bottom: 5px;
+  }
+}
+.analytics .widget-item .content.sales-top-opportunities {
+  .opps-container {
+    max-height: 195px;
+    margin-top: 10px;
+    padding-right: 10px;
+    .scrollable();
+    .tile {
+      height: 40px;
+      font-size: 13px;
+      font-weight: 300;
+      .colored-area {
+        width: 10%;
+        text-align: center;
+        font-size: 20px;
+      }
+      .main-text {
+        color: @impac-widget-text-color;
+        padding: 3px 0px 0px 10px;
+      }
+      &.first {
+        height: 55px;
+        font-size: 15px;
+        font-weight: bold;
+        .colored-area {
+          font-size: 26px;
+          padding-top: 10px;
+          background-color: rgb(255, 110, 65);
+        }
+        .main-text {
+          padding-top: 8px;
+        }
+      }
+      &.second {
+        height: 55px;
+        font-size: 15px;
+        font-weight: 500;
+        .colored-area {
+          font-size: 26px;
+          padding-top: 10px;
+          background-color: #1de9b6;
+        }
+        .main-text {
+          padding-top: 8px;
+        }
+      }
+    }
+  }
+}
+.analytics .widget-item .content .settings.select-account {
+  padding: 0px 5px;
+}
+.analytics .widget-item .content .settings.chart-filters {
+  .row {
+    margin: 0px;
+  }
+  input[type="radio"] {
+    margin: 0;
+    margin-right: 3px;
+    padding: 0;
+    width: 13px;
+    height: 13px;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+    outline: none;
+  }
+  input[type="range"] {
+    height: 20px;
+  }
+}
+.analytics .settings.dates-picker {
+  h5 { display: none; }
+
+  .buttons {
+    margin-left: 5px;
+    button.btn.btn-sm {
+      line-height: 1;
+      &.btn-danger {
+        display: none;
+      }
+      &.btn-info {
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .tooltip-inner {
+    text-transform: none;
+  }
+}
+
+.analytics .widget-item .content .settings.hist-mode-choser {
+  .options {
+    width: 150px;
+    margin: auto;
+    padding-bottom: 8px;
+    border-bottom: solid 1px #e6e6e6;
+    .font(@impac-widget-hist-text-size,500,@impac-widget-hist-text-color);
+    a {
+      .font(@impac-widget-hist-text-size,500,@impac-widget-hist-text-color);
+      text-transform: @impac-widget-hist-text-transform;
+      &.active {
+        color: @impac-widget-link-color;
+      }
+    }
+  }
+  .arrow-container {
+    width: 28px;
+    height: 28px;
+    position: relative;
+    top: -14px;
+    margin: auto;
+    &.right {
+      left: 30px;
+    }
+    &.left {
+      left: -30px;
+    }
+    .arrow-border {
+      border-top: 14px solid #e6e6e6;
+      border-left: 14px solid transparent;
+      border-right: 14px solid transparent;
+      width: 0px;
+      height: 0px;
+    }
+    .arrow {
+      border-top: 14px solid @impac-widget-background-color;
+      border-left: 14px solid transparent;
+      border-right: 14px solid transparent;
+      position: relative;
+      top: 12px;
+      width: 0px;
+      height: 0px;
+    }
+  }
+}
+.analytics .settings.limit-entries {
+  color: @impac-widget-limit-entries-color;
+  text-transform: uppercase;
+  text-align: center;
+  border-bottom: dashed 1px #E6E6E6;
+  padding-bottom: 8px;
+
+  a.option {
+    &.badge {
+      color: white;
+      background-color: @impac-widget-limit-entries-color;
+    }
+  }
+
+}
+
+.analytics .settings.organizations {
+  .widget-lines-container {
+    .widget-line {
+      padding: 5px 10px 5px 18px;
+      .alternate-bg(#f3f4f4);
+      .fa {
+        float: right;
+        font-size: 20px;
+        cursor: pointer;
+        &.fa-toggle-on {
+          color: @impac-widget-link-color;
+        }
+        &.fa-toggle-off {
+          color: @impac-widget-text-color-medium;
+        }
+      }
+    }
+  }
+}
+.analytics .widget-item .content .settings.param-selector {
+  display: inline-block;
+  a {
+    font-weight: normal;
+    color: @impac-widget-param-selector-color;
+    white-space: nowrap;
+  }
+  .options-container {
+    position: absolute;
+    background-color: white;
+    text-align: left;
+    min-width: 150px;
+    max-height: 200px;
+    z-index: 999;
+    overflow-y: auto;
+    overflow-x: hidden;
+    .box-shadow(rgb(0, 0, 0) 0px 3px 15px -3px);
+
+    div {
+      padding: 3px 5px;
+    }
+    div:hover {
+      cursor: pointer;
+      background-color: @impac-widget-param-selector-color;
+      color: white;
+    }
+
+    &::-webkit-scrollbar {
+      width: 8px;
+      background-color: darken(@lightgray,5%);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: @impac-widget-param-selector-color;
+      &:hover {
+        background-color: lighten(@impac-widget-param-selector-color,5%);
+      }
+    }
+  }
+}
+.analytics .settings.params-checkboxes {
+  padding: 2px 0px;
+  input {
+    height: inherit;
+  }
+  span {
+    margin-left: 5px;
+  }
+}
+.analytics .widget-item .content .settings.params-picker {
+  padding: 0px 10px;
+  .parameter {
+    margin: 0px 3px 3px 0px;
+    padding: 3px 5px;
+    background-color: @impac-widget-params-picker-bg;
+    color: white;
+    border: solid 1px @impac-widget-params-picker-bg;
+    border-radius: 4px;
+    cursor: move;
+    font-weight: bold;
+    white-space: nowrap;
+    float: left;
+    input[type="checkbox"] {
+      margin: 0px -3px 0px 3px;
+      vertical-align: middle;
+      height: inherit;
+      outline: none;
+      cursor: pointer;
+    }
+    .badge {
+      margin-right: 3px;
+      font-size: 10px;
+      background-color: darken(@impac-widget-background-color, 5%);
+      color: @impac-widget-params-picker-bg;
+      padding: 2px 6px;
+    }
+
+    &.unchecked {
+      background-color: inherit;
+      font-weight: normal;
+      color: inherit;
+      border-color: @impac-widget-params-picker-unchecked-bg;
+      .badge {
+        background-color: @impac-widget-params-picker-unchecked-bg;
+        color: white;
+      }
+    }
+  }
+}
+.analytics .widget-item .content .settings.time-range {
+  padding: 0px 5px;
+}
+.analytics .widget-item .content .settings.width {
+  float: right;
+  font-size: 14px;
+  i {
+    color: silver;
+    cursor: pointer;
+    &.reduce {
+      margin-right: -10px;
+    }
+    &.expand {
+      margin-right: -3px;
+    }
+  }
+}