/*

    #PANEL

    Standardized themable grouping element

    Markup example:
    <div class="panel"></div>

    .panel.panel--banana.panel--is-clickable


*/

/*
$panel
    margin: 16px 16px 32px 16px
    +bp(min480)
        margin: 16px

$panel-bleed
    margin: 16px 0 48px 0  // content on white gets 64 visual vertical px of white, colored bg needs a little more to look balanced
    +bp(min480)
        margin: 16px

$panel-colored
    padding: 16px
*/

.panel {
  margin: 16px 16px 32px 16px;
}

@media (min-width: 480px) {
  .panel {
    margin: 16px;
  }
}

.panel--bleed {
  margin: 16px 0 48px 0;
}

@media (min-width: 480px) {
  .panel--bleed {
    margin: 16px;
  }
}

.panel--success,
.panel--warning,
.panel--error,
.panel--info,
.panel--tips,
.panel--new {
  padding: 16px;
}

.panel--kill-last-margin *:last-child {
  margin-bottom: 0 !important;
}

.panel {
  display: block;
  word-wrap: break-word;
  border-radius: 8px;
}

.panel--is-clickable:focus,
.panel--is-clickable:hover {
  outline: 2px solid #06befb;
  outline-offset: -2px;
  cursor: pointer;
}

.panel--success {
  background-color: #ccffec;
}

.panel--success:focus.panel--is-clickable,
.panel--success:hover.panel--is-clickable {
  outline-color: #70ffca;
}

.panel--warning {
  background-color: #fff5cb;
}

.panel--warning:focus.panel--is-clickable,
.panel--warning:hover.panel--is-clickable {
  outline-color: #ffe36f;
}

.panel--error {
  background-color: #ffced7;
}

.panel--error:focus.panel--is-clickable,
.panel--error:hover.panel--is-clickable {
  outline-color: #ff728c;
}

.panel--info {
  background-color: #f1f9ff;
}

.panel--info:focus.panel--is-clickable,
.panel--info:hover.panel--is-clickable {
  outline-color: #8eceff;
}

.panel--tips {
  background-color: #b6f0ff;
}

.panel--tips:focus.panel--is-clickable,
.panel--tips:hover.panel--is-clickable {
  outline-color: #5fdeff;
}

.panel--new {
  background-color: #ccffec;
  border: 2px solid #68e2b8;
}

.panel--new:focus.panel--is-clickable,
.panel--new:hover.panel--is-clickable {
  outline-color: #31d79e;
}

.grid:not(.grid--auto-height):before,
.grid:not(.grid--auto-height):after {
  content: " ";
  display: table;
}

.grid:not(.grid--auto-height):after {
  clear: both;
}

.grid__unit {
  float: left;
}

.grid--auto-height {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.grid--auto-height .grid__unit {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

/*


    Usage:
    .col-count{n}from{breakpoint}

    AND

    {n} number of columns
    1, 2, 3

    {breakpoints}
    480, 640, 768, 990



    Space between cols
    .col-gap-small
    .col-gap-medium
    .col-gap-large


*/

.col-count1from990,
.col-count2from990,
.col-count3from990,
.col-count1upto990,
.col-count2upto990,
.col-count3upto990,
.col-count1upto768,
.col-count2upto768,
.col-count3upto768,
.col-count1upto640,
.col-count2upto640,
.col-count3upto640,
.col-count1upto480,
.col-count2upto480,
.col-count3upto480 {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  -webkit-column-gap: 40px;
  column-gap: 40px;
}

.col-gap-small {
  -webkit-column-gap: 8px;
  column-gap: 8px;
}

.col-gap-medium {
  -webkit-column-gap: 16px;
  column-gap: 16px;
}

.col-gap-large {
  -webkit-column-gap: 32px;
  column-gap: 32px;
}

.col-count1 {
  -webkit-column-count: 1;
  column-count: 1;
}

.col-count2 {
  -webkit-column-count: 2;
  column-count: 2;
}

.col-count3 {
  -webkit-column-count: 3;
  column-count: 3;
}

@media (min-width: 990px) {
  .col-count1from990 {
    -webkit-column-count: 1;
    column-count: 1;
  }

  .col-count2from990 {
    -webkit-column-count: 2;
    column-count: 2;
  }

  .col-count3from990 {
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 989px) {
  .col-count1upto990 {
    -webkit-column-count: 1;
    column-count: 1;
  }

  .col-count2upto990 {
    -webkit-column-count: 2;
    column-count: 2;
  }

  .col-count3upto990 {
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 767px) {
  .col-count1upto768 {
    -webkit-column-count: 1;
    column-count: 1;
  }

  .col-count2upto768 {
    -webkit-column-count: 2;
    column-count: 2;
  }

  .col-count3upto768 {
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 639px) {
  .col-count1upto640 {
    -webkit-column-count: 1;
    column-count: 1;
  }

  .col-count2upto640 {
    -webkit-column-count: 2;
    column-count: 2;
  }

  .col-count3upto640 {
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 479px) {
  .col-count1upto480 {
    -webkit-column-count: 1;
    column-count: 1;
  }

  .col-count2upto480 {
    -webkit-column-count: 2;
    column-count: 2;
  }

  .col-count3upto480 {
    -webkit-column-count: 3;
    column-count: 3;
  }
}

/*


        List styles


*/

.list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list--vertical > li {
  position: relative;
}

.list--horizontal > li {
  display: inline;
}

/*


        Link styling & variants


*/

.link,
.link:link,
.link:visited {
  cursor: pointer;
  color: #0063fb;
  text-decoration: none;
}

.link:hover,
.link:focus,
.link:active {
  color: #0063fb;
  text-decoration: underline;
  outline: none;
}

.link--show-history:visited,
.link--show-history a:visited,
.link--show-history:visited:hover,
.link--show-history a:visited:hover {
  color: #767676;
}

.link--block:hover,
.link--block a:hover,
.link--block:active,
.link--block a:active,
.link--block:focus,
.link--block a:focus {
  text-decoration: none;
}

.link--dark,
.link--dark a,
.link--dark:link,
.link--dark a:link,
.link--dark:visited,
.link--dark a:visited,
.link--dark:hover,
.link--dark a:hover,
.link--dark:focus,
.link--dark a:focus,
.link--dark:active,
.link--dark a:active {
  color: #474445;
}

.context-box {
  position: relative;
  padding: 8px 16px;
  background-color: #ccffec;
  border: 2px solid #68e2b8;
  border-radius: 4px;
}

.context-box:before {
  content: '';
  position: absolute;
  display: none;
  width: 16px;
  height: 16px;
  background-color: inherit;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 2px solid #68e2b8;
}

.context-box--up {
  margin-top: 16px;
}

.context-box--up:before {
  display: block;
  top: -11px;
  left: 50%;
  margin: 2px -8px;
  border-width: 2px 0 0 2px;
}

.context-box--down {
  margin-bottom: 16px;
}

.context-box--down:before {
  display: block;
  bottom: -11px;
  left: 50%;
  margin: 2px -8px;
  border-width: 0 2px 2px 0;
}

.context-box--left {
  margin-left: 16px;
}

.context-box--left:before {
  display: block;
  top: 50%;
  left: -1px;
  margin: -8px -8px;
  border-width: 0 0 2px 2px;
}

.context-box--right {
  margin-right: 16px;
}

.context-box--right:before {
  display: block;
  top: 50%;
  right: -1px;
  margin: -8px -8px;
  border-width: 2px 2px 0 0;
}