@charset "UTF-8";
/**
 * Contains variables that may be used across SCSS files for Draft Sharks
 */
.qb,
.tqb {
  background: #333;
}

.rb {
  background: #a41c1f;
}

.wr {
  background: #043173;
}

.te {
  background: #86a2cb;
}

.k,
.tk {
  background: #c87779;
}

.def,
.s,
.de,
.dl,
.dt,
.lb,
.olb,
.cb,
.db {
  background: #888;
}

.hc {
  background: #582325;
}

/**
 * Export position colors for use in JS
 * This does not work, as text/css mime types are not supported.
 * But would be great if we could easily import these color values.
 */
:export {
  totalColor: #3d74c7;
  qbColor: #333333;
  rbColor: #a41c1f;
  wrColor: #043173;
  teColor: #86a2cb;
  pickColor: #687087;
  defColor: #888;
  kickerColor: #c87779;
  tqbColor: #000;
  hcColor: #000;
  tkColor: #000;
  lbColor: #000;
  dbColor: #000;
  qrwtColor: #ffff00;
  rwtColor: #f78439;
  rwColor: #00ff00;
  wtColor: #800080;
  dldColor: #663399;
}

/**
 * These mixins have been taken from the figma so we can apply font
 * stuff as wel like to certain elements
 */
.collapse-container {
  margin-bottom: 20px;
}
.collapse-container .above-the-fold {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.collapse-container .video-slot > div {
  float: inherit;
}
.collapse-container .collapse-content {
  position: relative;
  overflow: hidden;
  max-height: 4.5em;
  transition: max-height 0.3s ease;
}
.collapse-container .collapse-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 1.5em;
  background: linear-gradient(to bottom, transparent, white);
}
.collapse-container .collapse-button {
  display: none;
}
.collapse-container .collapse-button-label {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #c8c8c8;
  cursor: pointer;
  margin-top: 0.5em;
  font-size: 0.8em;
}
.collapse-container .collapse-button:checked ~ .collapse-content {
  max-height: 1000px;
  overflow: unset;
}
.collapse-container .collapse-button:checked ~ .collapse-content::after {
  display: none;
}
.collapse-container .collapse-button:checked ~ .collapse-button-label::before {
  content: "▲";
}
.collapse-container .collapse-button-label::before {
  content: "▼";
}

@media only screen and (min-width: 992px) {
  .collapse-container .above-the-fold {
    flex-direction: row;
  }
  .collapse-container .collapse-content {
    max-height: none;
    overflow: visible;
  }
  .collapse-container .collapse-content::after {
    display: none;
  }
  .collapse-container .collapse-button-label {
    display: none;
  }
}

/*# sourceMappingURL=collapse-header.css.map */