/* ==========================================================================
   Paragraph
   ========================================================================== */
p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Setup
   ========================================================================== */
/**
 * JED wrappers
 *
 * Cover entire viewport width. Make sure a wrapper holds a jed-container to maximize the width of the content
 */
.jed-wrapper,
.jed-cards-wrapper {
  padding-right: 32px;
  padding-left: 32px;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
/**
 * Class name twice to make sure we "win" over the jdotorg template since our styles are loaded first
 */
.breadcrumb.breadcrumb {
  padding: 8px 0;
  margin: 0;
  line-height: 24px;
  border-radius: 0;
}
.breadcrumb.breadcrumb .active {
  display: none;
}

/* ==========================================================================
   Card
   ========================================================================== */
.card {
  background: white;
  box-shadow: 0 0 4px 0 rgba(33, 33, 33, 0.15);
  padding: 16px;
  border-radius: 4px;
}

/* Header */
.card__header {
  margin-bottom: 8px;
}

.card__extension-title {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: #212121;
  /* Cover entire card so clicking the entire card is possible */
}
.card__extension-title::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: block;
  content: " ";
  background: transparent;
}

.card__extension-developer {
  margin-bottom: 4px;
  font-size: 12px;
  color: #525252;
}

/* Description */
.card__description {
  position: relative;
  max-height: 88px;
  overflow: hidden;
  font-size: 15px;
  line-height: 22px;
}
.card__description::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 66px;
  content: " ";
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
}

/* Footer */
.card__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  margin-bottom: -4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

/* Card modifiers
   ========================================================================== */
.card--extension {
  /* For the title link that covers the entire card */
  position: relative;
  /* Hover / focus styling, use focus-within since the link is on the title */
}
.card--extension:hover, .card--extension:focus-within {
  box-shadow: 0 0 8px rgba(33, 33, 33, 0.25);
}
.card--extension {
  /* Pull image back to 3px away from the card side */
}
.card--extension .card__image {
  position: relative;
  margin: -13px -13px 16px;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
}
.card--extension .card__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
}
.card--extension {
  /* Adjusted stars size within cards */
}
.card--extension .stars-wrapper,
.card--extension .star {
  font-size: 12px;
  line-height: 18px;
}
.card--extension .stars-wrapper {
  color: #525252;
}

/* ==========================================================================
   Compatibility labels
   ========================================================================== */
.compatibility-wrapper {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: #525252;
}

[class^=compatible-with]:not(:first-child) {
  margin-left: 16px;
}

/* ==========================================================================
   JED Container
   ========================================================================== */
/**
 * A JED Container follows the width of a jdotorg template container.
 * The reason we've got our own is because we'd like to have some sections spanning the entire viewport
 * We are using a jed-wrapper for that and add a jed-container inside to set the max-width for the content again
 */
.jed-container {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}
.jed-container,
.jed-container *,
.jed-container *::before,
.jed-container *::after {
  box-sizing: border-box;
}
.jed-container [class^=icon-],
.jed-container [class^=icon-]::before,
.jed-container [class*=" icon-"]::before {
  width: 1em;
  height: 1em;
  line-height: 1em;
}

/* ==========================================================================
   Extension page
   ========================================================================== */
.jed-extension-header {
  padding-top: 32px;
  font-size: 18px;
  background: #fff;
  border-top: 1px solid rgba(33, 33, 33, 0.1);
  border-bottom: 1px solid rgba(33, 33, 33, 0.1);
}

@media (min-width: 768px) {
  .jed-extension-header__content {
    display: flex;
    align-items: flex-end;
  }
}
.jed-extension-header__content a:not([class]) {
  color: #18558B;
  text-decoration: underline;
}
.jed-extension-header__content a:not([class]):focus, .jed-extension-header__content a:not([class]):hover {
  text-decoration: none;
}

@media (min-width: 768px) {
  .jed-extension-header__item {
    width: 50%;
  }
}

.jed-extension-header__info {
  display: flex;
  margin-top: -16px;
  margin-bottom: 24px;
  font-size: 16px;
}

.jed-extension-header__buttons {
  display: flex;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .jed-extension-header__buttons {
    justify-content: flex-end;
  }
}
.jed-extension-header__buttons .button:not(:last-child) {
  margin-right: 20px;
}

.jed-extension-header__developer {
  margin-right: 2em;
  color: #18558B;
}

.jed-extension {
  padding-top: 32px;
  margin-bottom: 32px;
}
.jed-extension .jed-container {
  background: white;
  box-shadow: 0 0 4px 0 rgba(33, 33, 33, 0.15);
  padding: 32px;
}

.jed-extension__image {
  margin: -32px -32px 32px;
}

.extension-tags {
  min-height: 40px;
}
.extension-tags [class^=icon-] {
  margin-right: 8px;
}

/* ==========================================================================
   JED Grid
   ========================================================================== */
.jed-grid {
  display: flex;
  flex-wrap: wrap;
}
.jed-grid .jed-grid__item {
  width: 100%;
}

/**
 * A grid that is divided in 2/3 and 1/3 widths
 */
.jed-grid--2-1 .jed-grid__item {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .jed-grid--2-1 .jed-grid__item {
    margin-bottom: 0;
  }
  .jed-grid--2-1 .jed-grid__item:first-child {
    width: calc((100% - 32px) * 0.666);
  }
  .jed-grid--2-1 .jed-grid__item:last-child {
    width: calc((100% - 32px) * 0.333);
    margin-left: 32px;
  }
}

/**
 * A grid that is divided in 1/3 and 2/3 widths
 */
.jed-grid--1-2 .jed-grid__item {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .jed-grid--1-2 .jed-grid__item {
    margin-bottom: 0;
  }
  .jed-grid--1-2 .jed-grid__item:first-child {
    width: calc((100% - 32px) * 0.333);
  }
  .jed-grid--1-2 .jed-grid__item:last-child {
    width: calc((100% - 32px) * 0.666);
    margin-left: 32px;
  }
}

/**
 * A grid that is divided in 1/3, 1/3 and 1/3 widths
 * Possible to add more than 3 children to create a grid
 */
.jed-grid--1-1-1 {
  margin: 0;
  list-style: none;
}
.jed-grid--1-1-1 .jed-grid__item {
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 768px) {
  .jed-grid--1-1-1 .jed-grid__item {
    width: calc((100% - 32px) / 2);
    margin-left: 32px;
    margin-bottom: 32px;
  }
  .jed-grid--1-1-1 .jed-grid__item:nth-child(2n+1) {
    margin-left: 0;
  }
  .jed-grid--1-1-1 .jed-grid__item:nth-child(2n+2) {
    margin-right: -1px;
  }
}
@media (min-width: 1024px) {
  .jed-grid--1-1-1 .jed-grid__item {
    width: calc((100% - 64px) / 3);
    margin-left: 32px;
    margin-bottom: 32px;
  }
  .jed-grid--1-1-1 .jed-grid__item:nth-child(n) {
    margin-left: 32px;
    margin-right: 0;
  }
  .jed-grid--1-1-1 .jed-grid__item:nth-child(3n+1) {
    margin-left: 0;
  }
  .jed-grid--1-1-1 .jed-grid__item:nth-child(3n+3) {
    margin-right: -1px;
  }
}

/* ==========================================================================
   Heading
   ========================================================================== */
.heading {
  margin-bottom: 32px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.2em;
}
.heading:last-child {
  margin-bottom: 0;
}

.heading--xl {
  font-size: 24px;
}
@media screen and (min-width: 600px) {
  .heading--xl {
    font-size: calc-interpolation(600px, 24px, 1200px, 48px);
  }
}
@media screen and (min-width: 1200px) {
  .heading--xl {
    font-size: 48px;
  }
}

.heading--m {
  font-size: 18px;
}
@media screen and (min-width: 600px) {
  .heading--m {
    font-size: calc-interpolation(600px, 18px, 1200px, 24px);
  }
}
@media screen and (min-width: 1200px) {
  .heading--m {
    font-size: 24px;
  }
}

/* ==========================================================================
   List
   ========================================================================== */
.deflist {
  font-size: 16px;
  line-height: 24px;
}
.deflist > div {
  display: flex;
  margin-bottom: 12px;
}
.deflist dd {
  flex: 1 1 auto;
  font-weight: 600;
  text-align: right;
}
.deflist dt {
  flex: 0 0 auto;
  font-weight: 400;
}

/* ==========================================================================
   Search
   ========================================================================== */
.mod_jed_search {
  position: relative;
}
.mod_jed_search form {
  padding-bottom: 16px;
  margin: 0;
}
@media (min-width: 768px) {
  .mod_jed_search form {
    position: absolute;
    top: -50px;
    right: 0;
    padding-bottom: 0;
  }
}
.mod_jed_search input[type=search] {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding-left: 10px;
  font-size: 16px;
  background: #fff;
  border: 1px solid #a7a7a7;
  border-radius: 4px;
  -webkit-appearance: none;
}
@media (min-width: 768px) {
  .mod_jed_search input[type=search] {
    width: 320px;
  }
}
.mod_jed_search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  font-size: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ==========================================================================
   Search Tools
   ========================================================================== */
.js-stools-container-bar {
  padding: 8px 0;
}
.js-stools-container-bar .btn-toolbar {
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
}
.js-stools-container-bar .ordering-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.js-stools-container-filters {
  padding: 10px;
  margin-top: 8px;
  background-color: #f4f6f7;
  border-radius: 4px;
}
.js-stools-container-filters > * {
  margin: 4px 0;
}

.js-stools-field-filter .form-select {
  width: auto;
  min-width: 220px;
}

/* ==========================================================================
   Stars
   ========================================================================== */
.stars {
  display: inline-flex;
  margin-right: 8px;
}

.star {
  font-size: 16px;
  color: #016DCC;
}
.star:not(:first-child) {
  margin-left: 3px;
}

/* ==========================================================================
   Stars
   ========================================================================== */
.tabs {
  display: flex;
  margin: 0 0 -1px;
  list-style: none;
}

.tab {
  padding: 0;
}
.tab a {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  color: #212121;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}
.tab.is-active a {
  background: #f4f6f7;
  border-top: 4px solid #016DCC;
  border-right: 1px solid rgba(33, 33, 33, 0.1);
  border-bottom: 1px solid #f4f6f7;
  border-left: 1px solid rgba(33, 33, 33, 0.1);
}

/* ==========================================================================
   Utilities
   ========================================================================== */
/* Using double classes to have a bigger chance of winning over other elements (specificity)
   without having to use !important */
/* Visibility */
.display-block.display-block {
  display: block;
}

.visually-hidden.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: none;
  backface-visibility: hidden;
}

/* Alignment */
.align-right.align-right {
  text-align: right;
}

.align-boxes.align-boxes {
  display: flex;
  justify-content: space-between;
}

/* Margin */
.margin-bottom.margin-bottom {
  margin-bottom: 64px;
}

/* Font size */
.font-size-xl.font-size-xl {
  font-size: 20px;
  line-height: 32px;
}

.font-size-s.font-size-s {
  font-size: 15px;
  line-height: 22px;
}

/* Placeholders */
.image-placeholder.image-placeholder {
  width: 100%;
  padding-top: 43.75%;
  background: rgb(87.9411764706%, 87.9411764706%, 87.9411764706%);
}

/*# sourceMappingURL=style.css.map */