.card {
  margin-bottom: 2rem;
  border: none;

  .card-body {
    padding: 2rem;
  }

  &.card-float {
    width: 30%;
  }

  &[role="main"] > .card-body {
    @include media-breakpoint-down(xs) {
      padding: 2rem 2.5rem;
    }

    padding: 3.375rem 4.25rem;
  }

  &.transparent {
    background-color: transparent;
    border: none;
    padding-top: 1rem;

    & > .row {
      padding-bottom: 3rem;
    }
  }

  li:first-child { border-top: none; }

  &.card-highlight {
    box-shadow: 0 0.125rem 0.5rem 0 $shadow-darker;

    .highlight {
      margin-bottom: 0;
    }
  }
}

.card-links, .dropdown-menu-footer-links {
  display: flex;
  border-top: 1px solid $border-color;
  background-color: $white;

  a {
    text-align: center;
    width: 50%;
    text-decoration: none;
    padding: 1rem 0;

    &:hover {
      background-color: $gray-50;
    }

    &:first-child {
      border-right: 1px solid $gray-150;
    }

    &:last-child {
      border: none;
    }

    &.secondary {
      color: $gray-600;

      &:hover {
        color: $gray-600;
      }

    }
  }
}

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.card-scroll-container {
  max-height: 17.5rem;
  overflow-y: auto;

  &.overflowing > div:last-child {
    margin-bottom: 2rem;
    border-bottom: none;
  }

  &.overflowing::after {
    $start: rgba($white, 0);
    $end: rgba($white, 1);
    content: " ";
    display: block;
    height: 2rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, $start 0%, $end 100%);
  }
}

.card-chart-grid {
  .col {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.col .card .plot-inset {
  padding-left: 0.75rem;
  padding-bottom: 0.75rem;
}

form .card .card-body .list-group-flush .list-group-item {
  padding-left: 2.8125rem !important;
  padding-right: 2.8125rem !important;
}

section.floating > .col:first-child {
  padding-left: 2.75rem;
  margin-bottom: 1rem;

  @include media-min("md") {
    margin-bottom: 0;
  }

  @include media-min("xxl") {
    padding-left: 6rem;
  }
}

hr.card-divider {
  margin-right: -2rem;
  margin-left: -2rem;
}

.card-gallery {
  @include media-breakpoint-down("xs") {
    card {
      width: 100%;
    }
  }

  @include media-breakpoint-between("sm", "lg") {
    card {
      width: 50%;
    }
  }

  @include media-breakpoint-between("xl", "xxl") {
    card {
      width: 33%;
    }
  }

  @include media-breakpoint-up("max") {
    card {
      width: 25%;
    }
  }

  width: 100%;
  display: flex;
  flex-wrap: wrap;

  card {
    display: inline-block;
    min-height: 200px;

    .card {
      margin: 1rem;
      min-height: 200px;
    }
  }
}
