c8y-measurements-icon-bar {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.measurements-time-control,
.c8y-datetime-picker {
  .clearfix();
  .form-group {
    margin: 0;
    padding: 0;
    height: auto;
    &.input-sm {
      padding: 0;
      input {
        .input-sm();
      }
    }
  }
  .uib-time {
    .form-control {
      width: 50px;
    }
  }
  .input-sm {
    .uib-time .form-control {
      padding: 5px !important;
      width: 30px;

      .input-sm();
    }
  }
  .measurements-date-to {
    margin-left: 10px;
  }
  @media (max-width: 550px) {
    width: 100%;
    .measurements-date-from,
    .measurements-date-to {
      display: flex;
      align-items: center;
      flex-flow: row wrap;
      width: 100%;
      .date-time-picker {
        margin-left: auto;
      }
    }
    .measurements-date-to {
      margin-top: 5px;
    }
  }
}

.measurements-time-control {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  .measurements-date-from,
  .measurements-date-to {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    .date-time-picker {
      margin-left: auto;
    }
    .uib-datepicker-popup {
      z-index: 1036;
    }
  }
}

.card-dashboard {
  .measurements-time-control {
    width: 100%;
    .measurements-date-from,
    .measurements-date-to {
      padding-top: @margin-4;
    }
    .measurements-date-to {
      margin-left: auto;
    }
  }
}

[data-gs-width] {
  .card-dashboard {
    .measurements-time-control {
      .measurements-date-from,
      .measurements-date-to {
        width: 100%;
      }
    }
    .top-chart-bar {
      &.showtime + hr + .chart-container {
        top: 100px !important;
      }
    }
  }
}

@media (min-width: 460px) and (max-width: @screen-sm-min) {
  [data-gs-width] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      .top-chart-bar {
        &.showtime + hr + .chart-container {
          top: 65px !important;
        }
      }
    }
  }
}

@media (min-width: @screen-sm) {
  [data-gs-width] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: 100%;
        }
      }
      .top-chart-bar {
        &.showtime + hr + .chart-container {
          top: 100px !important;
        }
      }
    }
  }
  [data-gs-width='12'],
  [data-gs-width='11'],
  [data-gs-width='10'],
  [data-gs-width='9'],
  [data-gs-width='8'],
  [data-gs-width='7'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      .top-chart-bar {
        &.showtime + hr + .chart-container {
          top: 65px !important;
        }
      }
    }
  }
}

@media (min-width: @screen-md-min) {
  [data-gs-width='6'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      .top-chart-bar {
        &.showtime + hr + .chart-container {
          top: 65px !important;
        }
      }
    }
  }
}

@media (min-width: @grid-float-breakpoint) and (max-width: 1350px) {
  [data-gs-width='5'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      .top-chart-bar {
        &.showtime + hr + .chart-container {
          top: 65px !important;
        }
      }
    }
  }
  .open [data-gs-width='5'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: 100%;
        }
      }
      .top-chart-bar {
        &.showtime + hr + .chart-container {
          top: 100px !important;
        }
      }
    }
  }
}

@media (min-width: 1351px) {
  [data-gs-width='4'],
  [data-gs-width='5'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      .top-chart-bar {
        &.showtime + hr + .chart-container {
          top: 65px !important;
        }
      }
    }
  }
  .open [data-gs-width='4'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: 100%;
        }
      }
      .top-chart-bar {
        &.showtime + hr + .chart-container {
          top: 100px !important;
        }
      }
    }
  }
}

@media (min-width: 1620px) {
  [data-gs-width='4'],
  .open [data-gs-width='4'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      .top-chart-bar {
        &.showtime + hr + .chart-container {
          top: 65px !important;
        }
      }
    }
  }
}