beyond-date-range {
  .date-range-param-wrapper {
    .md-caption {
      transform: translate3d(0, 6px, 0);
      color: #A7A9AC;
    }

    md-datepicker {
      margin-right: 0;
      padding-right: 0;
    }

    @media (min-width: 667px) {
      .from-date,
      md-input-container {
        padding-right: 20px;
      }
      .layout-gt-xs-row > .flex-gt-xs-50 {
        flex: 1 1 50%;
      }
    }

  }

  md-datepicker {
    height: 38px;
    margin-top: 24px;
    margin-bottom: 14px;

    .md-datepicker-input-container {
      border-bottom: none;
      display: flex;
      height: 36px;
      margin-left: 0;
      width: 100%;

      .md-datepicker-input {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        color: #58595B;
        font-size: 16px;
        height: 30px;
        margin-top: 2px;
        padding: 0;
        min-width: 100px;
        max-width: 100%;
        width: 100%;
      }

      .md-datepicker-expand-triangle {
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #58595B;
        left: 50%;
        top: 50%;
      }

      .md-datepicker-triangle-button {
        height: 36px;
        width: 36px;

        &.md-button.md-icon-button {
          margin-top: 10px;
          margin-right: 10px !important;
        }
      }
    }

    @media only screen and (min-width: 600px) and (max-width: 1024px) {
      .md-datepicker-button {
        display: none;
      }
    }

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
      .md-datepicker-button {
        display: none;
      }
    }
  }

  md-input-container {

    md-input-container {
      margin: 0;
    }

    label {
      order: 0;
      transform: translate3d(0, 6px, 0) scale(0.75);
      color: #A7A9AC;

      &:not(.md-no-float):not(.md-container-ignore) {
        transform: translate3d(0, 6px, 0) scale(0.75);
      }
    }

    .md-select-value {

      .md-select-icon {
        color: #58595B;

        &:after {
          font-size: 20px;
        }
      }
    }
  }

  .report-param-wrapper {

    .md-caption {
      transform: translate3d(0, 6px, 0);
      color: #A7A9AC;
    }
  }

  .report-single-date-wrapper {

    md-datepicker {
      margin-top: 8px;
    }
  }

  @media (min-width: 415px) {
    .date-range-param-wrapper {
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;

      md-datepicker {
        margin-top: 18px;
      }
    }

    .layout-gt-xs-row > .flex-gt-xs-50 {
      flex: 1 1 50%;
    }
  }
}
