.multiple-facet-form-container {
  position: relative;
  float: right;
  top: -10px;
  z-index: 1;
}

@media (max-width: 767px) {
  .multiple-facet-form-container {
    width: fit-content;
    float: none;
    top: unset;
    bottom: -4rem;
    margin-bottom: 5rem;
  }
}

.multiple-facet-form {
  position: absolute;
  right: 0;
}

@media (max-width: 767px) {
  .multiple-facet-form {
    background: var(--star-dust);
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
  }

  .toolbar-vertical .multiple-facet-form {
    top: 39px;
  }
}

@media (max-width: 767px) {
  .multiple-facet-form .filter-title-wrapper {
    border-bottom: 1px solid var(--hazy-grey);
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
  }
}

.multiple-facet-form form {
  margin-top: 10px;
  width: 288px;
  background: var(--star-dust);
  border: solid 1px var(--moon-grey);
  padding: 35px;
}

@media (max-width: 767px) {
  .multiple-facet-form form {
    border: none;
    height: 100vh;
    margin-top: 0;
    width: 100vw;
  }
}

.multiple-facet-form legend {
  color: var(--bt-blue);
  text-transform: uppercase;
  font-size: 18px;
}

.multiple-facet-form-container .filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.multiple-facet-form-container .filter,
.multiple-facet-form-container .filter:active,
.multiple-facet-form-container .filter:hover,
.multiple-facet-form-container .filter:focus {
  background: var(--space-aqua);
}

.multiple-facet-form-container .filter .filter-text {
  padding-right: 7px;
}

.multiple-facet-form-container .filter .glyphicon {
  margin: 0;
}

@media (max-width: 767px) {
  .region-content .multiple-facet-form .form-actions {
    padding-bottom: 4rem;
    width: 100%;
  }
}

.region-content .multiple-facet-form .form-actions > * {
  margin: 10px 0 0;
  width: 220px;
}

@media (max-width: 767px) {
  .region-content .multiple-facet-form .form-actions > * {
    width: 100%;
  }
}

article.resource article.group--voyager-training div.verify-tile-image div.field--name-field-image,
form#node-resource-edit-form div.form-type-managed-file div.preview,
form#node-resource-form div.form-type-managed-file div.preview,
form#group-voyager-training-add-form  div.field--type-image div.preview,
form#group-voyager-training-edit-form  div.field--type-image div.preview {
  max-width: 320px;
  height: 170px !important;
}

article.resource article.group--voyager-training div.verify-tile-image div.field--name-field-image,
form#node-resource-edit-form div.form-type-managed-file div.preview,
form#node-resource-form div.form-type-managed-file div.preview,
form#group-voyager-training-edit-form div.field--type-image div.preview,
form#group-voyager-training-add-form div.field--type-image div.preview,form#group-voyager-training-edit-form  div.field--type-image div.preview,
.view-id-my_courses .field.field--name-field-image.field--type-image.field--label-hidden.field--item,
.view-id-training_catalog .field.field--name-field-image.field--type-image.field--label-hidden.field--item {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--hazy-grey);
}

.field--name-field-snap-ed-related-trainings article.verify-tile div.field--name-field-image .img-responsive,
.view-id-my_courses article.verify-tile div.verify-tile-image .img-responsive,
.view-id-training_catalog article.verify-tile div.verify-tile-image .img-responsive {
  height: auto;
  width: initial;
}

/* Live courses page */
.view-voyager-live-courses .view-content {
  display: grid;
  grid-gap: 40px 30px;
  grid-template-columns: repeat(auto-fill, 322px);
  justify-content: space-between;
}

/* For each element in the view that isn't a div, make it a new row for grouping. */
.view-content .new-row,
div.view-voyager-live-courses .view-content > :not(div) {
  grid-column-start: 1;
}
/* And for each div that follows, make it a new row. */
div.view-voyager-live-courses .view-content > div.views-row + :not(div.views-row),
div.view-voyager-live-courses .view-content > :not(div) + div.views-row {
  grid-column-start: 1;
}

div.view-voyager-live-courses .view-content > h3 {
  grid-column: 1 / 4;
}

