/* ************************************************************************ */
/*                                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;
    }
  }
}