/* Compiled from job_card_component.scss. Edit this sidecar CSS directly. */
.job-card.card {
  /* Respect maximum width of existing cards */
  max-width: 525px;
  /* Background and extra space around and info banner is essential for scanability,
     to better distinguish from links, which have a very similar color. */
}
.job-card.card .job-fields {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 8px 24px;
  line-height: 24px;
}
.job-card.card .job-fields .material-icons {
  font-size: inherit;
}
.job-card.card .job-fields .field-value > a {
  word-break: break-word;
}
.job-card.card button.field-action {
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  margin-left: 8px;
  vertical-align: bottom;
  cursor: pointer;
}
.job-card.card button.field-action:hover, .job-card.card button.field-action:focus {
  color: var(--blue);
}
.job-card.card .text-info {
  background: rgba(189, 235, 255, 0.3803921569);
  border-radius: 8px;
  padding: 12px 16px;
}
.job-card.card .card-actions {
  column-gap: 10px;
}

/* Accessory class for a container to display a job card */
.responsive-job-card-container {
  display: flex;
  justify-content: center;
  /* Full-width/height on small screens */
}
@media (max-width: 545px) {
  .responsive-job-card-container {
    /* Hack: a negative offset equivalent to .mt-6 on the page container.
    It's required to remove empty space between navbar and card for better mobile experience */
    margin-top: -48px;
  }
  .responsive-job-card-container .card {
    position: absolute;
    left: 0px;
    width: 100%;
    border-radius: 0px;
  }
  .responsive-job-card-container .card .view {
    border-radius: 0px;
  }
}