.fixed-container.validations {
  // Validations column goes to the bottom of the page for medium and smaller screens
  @media(max-width: @screen-md-max) {
    position: relative;
    top: 0;
  }
  .sidebar-header {
    margin: 38px 0 0;
  }
}
.validation-list {
  overflow-x: hidden;
  margin-bottom: 0;
}

// Mostly reseting the media query specific styling for List View since it is applicable only when
// List View is used on a element hat spans full viewport width and breaks styling when used in a
// sidebar. In general Flexbox should not be used with media queries.
// https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
.list-group-item.validation {
  @media(min-width: @screen-md-min) {
    align-items: flex-start;
  }

  .list-view-pf-actions {
    margin: 15px 0 15px 15px;
  }
  .list-view-pf-main-info {
    padding: 15px 0;

    @media(min-width: @screen-md-min) {
      align-items: flex-start;
    }

    .list-view-pf-body {
      @media (min-width: @screen-md-min) {
        display: table-cell;
      }

      .list-view-pf-description {
        @media (min-width: @screen-md-min) {
          float: none;
          width: auto;
        }

        .list-group-item-heading {
          font-size: 13px;
          margin-right: 0;
        }
        .list-group-item-text {
          @media (min-width: @screen-md-min) {
            margin: 0 0 10px 0;
          }

          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 0;
        }
      }
      .list-view-pf-additional-info {
        @media (min-width: @screen-md-min) {
          width: auto;
        }

        .list-view-pf-additional-info-item {
          small {
            font-size: 80%;
          }
        }
      }
    }
  }
}

/* https://davidwalsh.name/css-flip */
/* entire container, keeps perspective */
.flip-container {
  display: block;
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 50px;
	height: 50px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

.validation-detail-title {
  display: flex;
  padding-bottom: 10px;
}

.validations-toolbar {
  .toolbar-pf {
    .form-group {
      @media (min-width: @screen-lg-min) {
        border-right: none;
        float: none;
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
  .toolbar-pf-actions {
    @media (min-width: @screen-lg-min) {
      .toolbar-pf-filter {
        padding-left: 0;
        width: 100%;
      }
    }
  }
  .toolbar-pf-results {
    h5, p, ul {
      @media (min-width: @screen-lg-min) {
        line-height: (@grid-gutter-width/1.5);
      }
    }
    .toolbar-pf-active-filters {
      @media (min-width: @screen-lg-min) {
        display: block;
      }
    }
  }
}
