.user-dashboard {
  &.agent-reports {
    .reportTypes {
      text-align: center;

      button {
        margin-bottom: 5px;
      }
    }

    .reportOptions {
      .el-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .datePickerWrapper {
          display: inline-block;
          width: 100%;

          .vpd-input-group {
            @include borderRadius(3px);
            overflow: hidden;

            input {
              &::placeholder {
                color: rgba(#000, 0.4);
              }
            }
          }
          .vpd-icon-btn {
            padding: 12px 10px !important;
          }
        }

        .seprator {
          flex-basis: 100%;
          background: rgba($theme, 0.1);
          padding: 2px 8px;
          @include borderRadius(10px);
          text-align: center;

          p {
            color: rgba(#000, 0.3);
            @extend %userSelect;
          }
        }

        .el-form-item {
          display: block;
          flex-basis: 33%;

          @media (max-width: 768px) {
            flex-basis: 100% !important;
          }

          .el-form-item__content {
            display: block;
            width: 100%;
            margin-left: 0 !important;
            margin-right: 0 !important;
          }

          .el-form-item__label {
            float: none !important;
            padding-right: 0;
          }
        }

        &.inbox {
          .selectedItem {
            flex-basis: 100%;
          }
        }

        &.pr {
          .fromItemReceptionTransDate {
            flex-basis: 49.75%;
          }
          .toItemReceptionTransDate {
            flex-basis: 49.75%;
          }
        }

        &.opr {
          .selectedItem {
            flex-basis: 49.75%;
          }
          .pieceId {
            flex-basis: 49.75%;
          }
          .fromItemReceptionTransDate {
            flex-basis: 49.75%;
          }
          .toItemReceptionTransDate {
            flex-basis: 49.75%;
          }
        }

        &.br {
          .selectedItem {
            flex-basis: 100%;
          }
        }

        &.gr {
          .fromDate {
            flex-basis: 49.75%;
          }
          .toDate {
            flex-basis: 49.75%;
          }

          .selectedItem {
            flex-basis: 100%;
          }

          .fromRecieveDate {
            flex-basis: 49.75%;
          }
          .toRecieveDate {
            flex-basis: 49.75%;
          }
          .fromDeliverDate {
            flex-basis: 49.75%;
          }
          .toDeliverDate {
            flex-basis: 49.75%;
          }
        }
      }

      .btnRow {
        margin-top: 30px;
        text-align: center;
      }
    }

    .reportResult {
      margin-top: 50px;

      .infoCharts {
        text-align: center;

        .c-tooltip-header {
          margin-bottom: 2px;
        }
        .c-tooltip-body-item {
          span {
            color: #fff;
            margin-right: 5px;
            margin-left: 5px;
          }
        }
      }

      .resultList {
        .showDetailsBtn {
          background: transparent;
          border: 1px solid rgba(#000, 0.2);
          @include borderRadius(4px);
          padding: 4px 16px;
          cursor: pointer;
          @extend %defaultTransition;

          i {
            @extend %defaultTransition;
            color: rgba(#000, 0.5);
          }

          &:hover {
            background: $theme;
            border-color: $theme;

            i {
              color: #fff;
            }
          }
        }
      }
    }
  }
}