$border-color: rgba(255,255,255,.4); // 边框颜色
$bgc-color: transparent; // 背景颜色
page-dashboard-view {
  display: block;
  margin: -8px -16px;
  padding: 8px 16px;
  min-height: calc(100% + 16px);

  ng-echarts {
    padding: 1px;
  }

  .add-widget {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: move;

    > button {
      background: transparent;
      border: none;
      color: #696969;

      > i {
        color: #00C8C1;
        font-size: 16px;
        margin-right: 12px;
      }
    }
  }

  .del-time-spanner {
    position: absolute;
    top: -10px;
    right: -6px;
    color: #bfbfbf;
    display: none;
  }

  .time-spanner {
    position: relative;
  }

  .time-spanner:hover {
    .del-time-spanner {
      display: block;
    }
  }

  .color-type {
    display: flex;
    width: 56px;
    height: 20px;
    position: absolute;
    right: -68px;
    top: 0;

    button {
      flex: 1;
      text-align: center;
      line-height: 20px;
      border: 1px solid #00C8C1;
      color: #00C8C1;
      background: $bgc-color;

      &:first-child {
        border-radius: 4px 0 0 4px;
      }
      &:last-child {
        border-radius: 0 4px 4px 0;
        font-size: .8em;
      }

      &.active {
        background: #00C8C1;
        color: white;
      }
    }
  }

  .dashboard-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;

    input:focus, button:focus {
      outline: none;
    }

    &-left {
      position: relative;

      &-top {
        margin-bottom: 2px;
        display: flex;
        align-items: center;
      }

      &-bottom {
        position: relative;

        .desc {
          position: absolute;
          min-width: 36px;
          white-space: nowrap;
        }
      }

      input {
        border: none;
        background: transparent;
        border-bottom: 1px solid #EBF1F1;
        position: absolute;
        left: 0;
        width: 100%;
      }

      .hideInput {
        opacity: 0;
      }

      .titleInput {
        top: -3px;
        font-size: 15px;
        color: #575757;
        margin: 0;
        font-weight: 600;
      }

      .desInput {
        top: 0;
        font-size: 12px;
        color: #979797;
      }

      h1 {
        font-size: 15px;
        color: #575757;
        margin: 0;
        font-weight: 600;
      }

      .desc {
        font-size: 12px;
        color: #979797;
      }
    }

    &-right {
      border: 0;

      ng-transclude {
        border: 0 !important;
      }
    }
  }

  .controls {
    margin-bottom: 20px;
  }

  .page-header {
    padding: 0;
    margin: 20px 0 15px;
    display: flex;
    justify-content: flex-end;

    .btn {
      margin-right: 5px;
    }
  }

  dashboard-inputs {
    margin-bottom: 12px;

    .inputbox-panel {
      button {
        width: 113px;
        height: 30px;
        border-radius: 3px;
        background: #00C8C1;
        border-color: #00C8C1;
        color: white;
        font-size: 14px;
      }
    }

    .add-filter-input, .go-search {
      cursor: move;
    }

    form {
      margin: 23px 15px 15px 15px;
        > a {
          position: absolute;
          right: -8px;
          color: #bfbfbf;
          top: -8px;
          background: transparent;
          z-index: 10;
        }
    }

    .box-content {
      .box-header{
        position: absolute;
        top: 21px;
        left: 26px;
        height: 15px;
        background-color: #fbfbfb;
        z-index: 1;
        padding: 0 4px 0 4px;
        cursor: move;
        display: flex;
        align-items: center;

        > .box-header-btns{
          margin-left: 3px;
        }

        h3 {
          font-size: 12px;
        }
      }

      .xbox-list {
        margin-top: 24px;
      }

      > input {
        background-color: $bgc-color;
        color: #bfbfbf;
        border: 1px solid rgba(0, 0, 0, .15);
      }
    }

    sharp-selector {
      background-color: $bgc-color;

       .input-label {
        > .text-input {
          border: 1px solid rgba(0,0,0, .15);
          border-radius: 3px;
          color: #bfbfbf;
        }

        >.form-control {
          padding: 6px 8px;
          width: 100%;
          height: 34px;
        }

        .not-disabled {
          background-color: $bgc-color !important;
        }
      }
    }
    .add-filter-input {
      height: 100%;
      background: #FBFBFB;
      border: 1px solid #EBF1F1;
      padding: 28px 20px 20px 20px;

      > div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 34px;
        border: 1px dashed #00C8C1;
        border-radius: 3px;

        button {
          display: flex;
          justify-content: center;
          align-items: center;
          background: transparent;
          border: none;
          color: #696969;
          width: 100%;
          height: 100%;
          cursor: pointer;

          > i {
            color: #00C8C1;
            font-size: 16px;
            margin-right: 12px;
          }
        }
      }
    }
  }

  .view-hr {
    margin-top: 20px;
    margin-bottom: 16px;
    border-top: 1px solid  #E2E2E2;
    width: calc(100% + 30px);
    transform: translateX(-15px);
  }

  form {
    margin-bottom: 0;
  }

  report-panel {
    height: calc(100% - 24px);
  }

  .report-config {
    padding: 4px;
    margin: 0;

    &-component {
      margin-left: 0;

      .btn-pill {
        padding: 0 4px;
      }

      .report-config-text, .fa-caret-down {
        display: none;
      }
    }
  }

  @media (max-width: 1024px) {
    .report-config-text {
      display: none;
    }

    .report-config-component {
      margin: 0;
    }
  }

  &[color-type=moon] {
    background: #001226;
    --content-overflow-color: #314756;

    .dashboard-header-left {
      h1 {
        color: rgba(255,255,255,.85);
      }
      input {
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }
    }

    .titleInput {
      color: rgba(255,255,255,.85);
    }

    hr {
      border-top: 1px solid rgba(255, 255, 255, .2)
    }

    .btn-ok {
      color: rgba(255, 255, 255, .85);
    }

    .main-content {
      background: rgba(255,255,255,0.08);
    }
  }
}