div.images {
    h3 {
        clear: both;
    }

    img.svg {
        float: left;
        border: none;
    }

}

div.images.object-detail-view {
  display: block;

  img.graphiteImg {
    width: 100%;
    display: block;
  }
}

.timerangepicker-container {
  display: flex;
  padding: .25em 0;

  .button-link {
    line-height: 1.75;
    width: 2.25em;

    i {
      display: inline-block;
      width: 100%;
      text-align: center;
    }

    i:before {
      margin-right: 0;
    }
  }
}

form[name=form_timerangepickercommon_graphite] {
  display: inline-flex;
  flex: 1 1 auto;
  width: 0;
  max-width: 43.25em;

  &:not(:last-child) {
    margin-right: .25em;
  }

  select {
    min-width: 3.5em;
    max-width: 7em;
    flex: 1 1 auto;
    width: auto;

    &:not(:last-of-type) {
      margin-right: .25em;
    }
  }
}

form[name=form_timerangepickercustom_graphite] {
  min-width: 21em;

  .control-label-group {
    text-align: left;
  }

  input[type=date] {
    min-width: 11em;
  }

  input[type=time] {
    min-width: 5em;
  }
}

.flyover[id^="graphite-customrange-"] {
  display: inline-block;
}

.grid {
  margin-right: -1em;
  margin-bottom: -1em;

  .empty-state {
    .rounded-corners();
    background-color: @gray-lightest;
    margin-right: 1em;
    padding: 1em;
    text-align: center;
  }
}

.grid-item {
  display: inline-block;
  border-radius: .25em;
  border: 1px solid @gray-lighter;
  min-width: 302px;
  vertical-align: top;
  margin-right: 1em;
  margin-bottom: 1em;
}

.grid-item  h2 {
  margin-top: 0;
  background: @gray-lightest;
  border-bottom: 1px solid @gray-lighter;
  padding:.25em .5em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-item > .images:not(:last-child) {
  margin-right: 1em;
  display: inline-block;
}

.grid-item .graphiteImg {
  margin-right: 1px;
}

.grid-item > p {
  padding: .5em;
  margin-bottom: 0;
}

p.load-more {
  margin-right: 1em;
  text-align: right;
}

// TODO: Remove once ipl-web v0.7.0 is required
.controls:not(.default-layout) {
  .box-shadow(0, 0, 0, 1px, @gray-lighter);

  .pagination-control {
    float: left;
  }

  .sort-control,
  .limit-control {
    float: right;
    margin-left: .5em;
  }

  .sort-control {
    display: flex;
    justify-content: flex-end;

    :not(.form-element) > label {
      margin-right: 0;
    }

    .control-button {
      margin: 0;
    }
  }

  > :not(:only-child) {
    margin-bottom: 0.5em;
  }

  .search-suggestions {
    margin-bottom: 2.5em;
  }

  .search-controls,
  .filter {
    clear: both;
    display: flex;
    min-width: 100%;

    .search-bar {
      flex: 1 1 auto;

      & ~ .control-button:last-child {
        margin-right: -.5em;
      }

      & ~ .control-button {
        margin-left: .5em;
      }
    }
  }
}

/* Graph colors */

@graphite-graph-bg-color: @body-bg-color;
@graphite-graph-fg-color: @text-color;
@graphite-graph-major-grid-color: @gray-light;
@graphite-graph-minor-grid-color: @graphite-graph-bg-color;

@light-mode: {
  --graphite-graph-bg-color: var(--body-bg-color);
  --graphite-graph-fg-color: var(--text-color);
  --graphite-graph-major-grid-color: var(--gray-light);
  --graphite-graph-minor-grid-color: var(--graphite-graph-bg-color);
};

.graphite-graph-color-registry {
  display: none;

  background-color: @graphite-graph-bg-color;
  color: @graphite-graph-fg-color;
  border-top-color: @graphite-graph-major-grid-color;
  border-bottom-color: @graphite-graph-minor-grid-color;
}