//colors calendar
@calendarHeaderBackground: @theme-color-background-contrast;
@calendarHeaderColor: #999;
@calendarCurrentStateHover: #f5f5f5;
@calendarBorder: #ccc;

.ui-datepicker {
  th,
  th.ui-datepicker-week-end {
    background: @calendarHeaderBackground !important;
    color: @calendarHeaderColor !important;
  }

  .ui-state-default {
    border-color: @calendarBorder !important;
  }

  .ui-datepicker-header {
    background: @calendarHeaderBackground !important;
    border-color: @color-gray;
    border-bottom-width: 0;
  }

  .ui-datepicker-calendar {
    border: 1px solid @color-gray;

    thead {
      border-bottom: 1px solid @color-gray;
    }
  }

  .ui-datepicker-title select {
    font-size: 11px;
  }

  .ui-datepicker-month,
  .ui-datepicker-year {
    min-height: 0;
    background-position: 140%;
    padding-left: 5px;
    display: inline-block;
    color: #666;
    border: 0;
    height: 19px;
    line-height: 19px;
  }
}

.ui-datepicker td.ui-datepicker-current-period a.ui-state-default,
 td .ui-state-active,
 .ui-datepicker td.ui-datepicker-current-period a.ui-state-active,
 .ui-datepicker td.ui-datepicker-week-end .ui-state-active,
 .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period,
.ui-datepicker td .ui-state-default.ui-state-active:hover {
  background: @theme-color-text !important;
}

.ui-datepicker td.ui-datepicker-current-period a.ui-state-default,
 td .ui-state-active,
 .ui-datepicker td.ui-datepicker-current-period a.ui-state-active,
 .ui-datepicker td.ui-datepicker-week-end .ui-state-active,
 .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period {
  background: @calendarCurrentStateHover;
}

.segment-element {
  background: @color-white;
  border-color: @color-silver-l80;
  line-height: 1.33;
  box-shadow: 4px 7px 25px rgba(0, 0, 0, 0.3);

  .segment-add-row {
    .border-radius(5px);
  }

  .custom_select_search {
    input {
      margin-top: 4px;
    }
  }

  .segment-content {
    h3 {
      font-weight: normal;
      .font-default(13px, 15px);

      color: @theme-color-text;
    }

    .segment-add-row > div a span,
    .segment-add-or > div a span {
      color: @theme-color-brand;
      text-shadow: none;
    }

    .segment-input {
      select,
 input {
        .font-default(12px, 14px);

        color: @theme-color-text;
        font-weight: 600;
        margin: 0;
        height: 32px;
      }
    }
  }

  .segment-top {
    .font-default(10px, 12px);

    color: @theme-color-text-light;
    text-transform: uppercase;

    h4 {
      color: @color-silver-l30;
      text-transform: uppercase;
      .font-default(10px, 12px);

      a.dropdown {
        color: @color-silver-l30;
        text-transform: uppercase;
        .font-default(10px, 12px);
      }
    }

    a.dropdown {
      display: inline;
      color: @theme-color-text;
      background: url('plugins/Morpheus/images/sort_subtable_desc.png') 100% -2px no-repeat;

      &.ui-autocomplete-input {
        background-position: 100% -2px;
      }
      .font-default(10px, 12px);
    }
  }

  .segment-footer {
    background: @color-white;

    a.delete {
      color: @theme-color-brand;
    }
  }
}

.available_segments a.dropdown {
  color: @theme-color-text !important;
  text-transform: uppercase;
  .font-default(10px, 12px);
}

#periodString {
  label.selected-period-label {
    text-decoration: none !important;
  }

  h6 {
    .font-default(13px, 16px);

    font-weight: normal;
    color: @theme-color-text;
  }

  #periodMore {
    .period-range {
      .ui-datepicker-header {
        background: red;
      }
    }
  }
}

#header_message {
  height: auto;
  .border-radius(0);

  &.isPiwikDemo {
    text-align: right;
    position: absolute;
    right: 16px;
    top: 8px;

    .dropdown {
      min-width: 280px;
    }
  }
}

.ui-menu {
  .ui-menu-item {
    > .ui-menu-item-wrapper {
      color: @color-silver-l20;
      .font-default(10px, 18px);
      margin: 0;
      padding: 2px;
    }
  }
}

.loadingPiwikBelow,
.loadingPiwik {
  .font-default(13px, 13px);

  color: @color-silver-l60;
  font-weight: normal;
}

.annotations {
  table {
    td {
      .font-default(12px, 14px) !important;

      color: @theme-color-text;
      padding: 6px 5px;
    }
  }
}

//reports box
.reports {
  border: 1px solid @color-gray;
  .border-radius(6px);

  h2 {
    background: @theme-color-background-tinyContrast;
    border-bottom: 1px solid @color-gray;
    padding: 11px 15px 10px;
  }
}

.jqplot-seriespicker-popover {
  box-shadow: none;
}

// transition box
#Transitions_Container {
  #Transitions_CenterBox {
    border: 1px solid @color-gray;
    box-shadow: none;
    .border-radius(6px);

    margin: 27px 0 0 319px;
    width: 258px;
    min-height: 400px;
    background: @theme-color-background-contrast;

    h2 {
      color: #1e93d1;
      border-bottom: 1px solid @color-gray;
      font-weight: normal;
      padding: 15px;
      background: #f5f5f5;
      .border-radius(6px 6px 0 0);
    }

    .Transitions_CenterBoxMetrics {
      padding: 0;

      p.Transitions_Margin {
        text-align: left;
        .font-default(15px, 20px);

        border-bottom: 1px solid @color-gray;
        padding: 13px;

        .Transitions_Metric {
          font-weight: normal;
        }
      }

      .Transitions_IncomingTraffic {
        padding: 0 15px;

        h3 {
          font-weight: normal;
          color: #000;
          .font-default(15px, 20px);

          margin-bottom: 10px;
        }
      }

      .Transitions_OutgoingTraffic {
        padding: 0 15px 10px;

        h3 {
          font-weight: normal;
          color: #000;
          .font-default(15px, 20px);

          margin-bottom: 10px;
        }
      }
    }
  }

  .Transitions_TitleOfOpenGroup {
    color: #000;
    .font-default(15px, 20px);

    font-weight: normal;
    margin-top: -4px;
  }
}

table.dataTable tr td .dataTableRowActions {
  a.rightmost,
 a {
    margin: 6px 0 6px 0;
    padding: 0 4px 0 0;
  }
}

table.dataTable th .columnDocumentation {
  color: @color-silver-l90;
}