.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;
}

.grid--vertical-center .grid__unit {
  -ms-flex-item-align: center;
  align-self: center;
}

/*


      PAGEHOLDER
      - Basic horizontal positioning of the site inside banners.
      - Responsive behavior.
      - spacing between banner areas and content (panel)


*/

.pageholder {
  background-color: #fff;
  padding: 0;
  margin: 0;
  max-width: 1010px;
}

.pageholder.content-width--liquid,
.content-width--liquid .pageholder {
  max-width: none;
}

.pageholder.content-width--1400,
.content-width--1400 .pageholder {
  max-width: 1400px;
}

.pageholder.content-width--1600,
.content-width--1600 .pageholder {
  max-width: 1600px;
}

@media (min-width: 1300px) {
  .pageholder {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1300px) {
  .pageholder {
    padding: 0 15px;
  }
}

.pageholder:before,
.pageholder:after {
  content: " ";
  display: table;
}

.pageholder:after {
  clear: both;
}

.pageholder--liquid {
  max-width: none;
}

.pageholder--1400 {
  max-width: 1400px;
}

.broadcast {
  margin: 16px 16px 32px 16px;
  padding: 16px;
  word-wrap: break-word;
  border-radius: 8px;
  background-color: #fff5cb;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

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

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

.broadcast--severity3 {
  background-color: #ffced7;
}

.broadcast--severity2 {
  background-color: #fff5cb;
}

.broadcast--severity1 {
  background-color: #ccffec;
}

.broadcast__content {
  min-height: 32px;
  vertical-align: middle;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 5px;
}

.broadcast::before {
  content: ' ';
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KPHBhdGggZmlsbD0iIzc2NzY3NiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTYgMjZjLTUuNTIzIDAtMTAtNC40NzctMTAtMTBTMTAuNDc3IDYgMTYgNnMxMCA0LjQ3NyAxMCAxMC00LjQ3NyAxMC0xMCAxMHptMC0yLjkzYTEuNSAxLjUgMCAxIDAgMC0zIDEuNSAxLjUgMCAwIDAgMCAzek0xNiA4YTEuODEgMS44MSAwIDAgMC0xLjgwMSAxLjk5bC43MDEgNy4wMTVhMS4xMDUgMS4xMDUgMCAwIDAgMi4yIDBMMTcuOCA5Ljk5QTEuODEgMS44MSAwIDAgMCAxNiA4eiIvPgo8L3N2Zz4=');
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.outer {
  outline: 1px solid #eee;
  display: table;
  width: 100%;
}

.outer > p {
  display: table-cell;
  height: 200px;
  vertical-align: middle;
  text-align: center;
}

.skiplink {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0 ;
  background: #fff;
  color: #474445;
  padding: 5px 10px;
  z-index: -1;
}

.skiplink:focus {
  opacity: 1;
  z-index: 500;
}

/*

    This is a very bad example, and not using BEM for now.
    Its done like this to support both spaden and Troika
    styling on the same markup. (The markup is injected via
    common browser bundle js and is common for all pages
    either they run Troika or Spaden)

    This should be rewritten when Spaden is
    out of the picture!

*/

.toast {
  -webkit-transition-property: max-height;
  transition-property: max-height;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  overflow-y: hidden;
}

.toast--success .inner,
.toast--error .inner {
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: 16px;
  padding: 16px 16px 16px 54px;
  background-color: transparent;
}

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

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

.toast--success .toast--action__actionbutton button {
  color: #0063fb;
  background-color: #ccffec;
  border: 0;
}

.toast--success .toast--action__actionbutton button,
.toast--success .toast--action__actionbutton button:hover,
.toast--success .toast--action__actionbutton button:active,
.toast--success .toast--action__actionbutton button:focus {
  text-decoration: none;
}

.toast--success .toast--action__actionbutton button:hover,
.toast--success .toast--action__actionbutton button:focus {
  color: #0063fb;
  background-color: #70ffca;
}

.toast--success .toast--action__actionbutton button:active {
  color: #0063fb;
  background-color: #d6fff0;
}

.toast--success .toast--action__actionbutton button:hover,
.toast--success .toast--action__actionbutton button:focus {
  background-color: #ccffec;
  text-decoration: underline;
}

.toast--error .toast--action__actionbutton button {
  color: #0063fb;
  background-color: #ffced7;
  border: 0;
}

.toast--error .toast--action__actionbutton button,
.toast--error .toast--action__actionbutton button:hover,
.toast--error .toast--action__actionbutton button:active,
.toast--error .toast--action__actionbutton button:focus {
  text-decoration: none;
}

.toast--error .toast--action__actionbutton button:hover,
.toast--error .toast--action__actionbutton button:focus {
  color: #0063fb;
  background-color: #ff728c;
}

.toast--error .toast--action__actionbutton button:active {
  color: #0063fb;
  background-color: #ffd8df;
}

.toast--error .toast--action__actionbutton button:hover,
.toast--error .toast--action__actionbutton button:focus {
  background-color: #ffced7;
  text-decoration: underline;
}

.toast--error .inner {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath fill='%23FF5844' d='M11 22c6 0 11-5 11-11S17 0 11 0 0 5 0 11s5 11 11 11z'/%3E %3Cpath fill='%23FFF' d='M17 10H5v2h12'/%3E %3C/g%3E %3C/svg%3E");
}

.toast--success .inner {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath fill='%2328CD94' d='M11 22c6 0 11-5 11-11S17 0 11 0 0 5 0 11s5 11 11 11z'/%3E %3Cpath fill='%23FFF' d='M6.4 9.6L5 11l4.5 4.5 7-7L15 7l-5.5 5.6'/%3E %3C/g%3E %3C/svg%3E");
}

.toast .container .page {
  background-color: #fff;
  padding: 0;
  margin: 0;
  max-width: 1010px;
  background-color: transparent;
}

.toast .container .page.content-width--liquid,
.content-width--liquid .toast .container .page {
  max-width: none;
}

.toast .container .page.content-width--1400,
.content-width--1400 .toast .container .page {
  max-width: 1400px;
}

.toast .container .page.content-width--1600,
.content-width--1600 .toast .container .page {
  max-width: 1600px;
}

@media (min-width: 1300px) {
  .toast .container .page {
    margin-left: auto;
    margin-right: auto;
  }
}

.toast--action__wrapper {
  position: relative;
}

.toast--action__wrapper:before,
.toast--action__wrapper:after {
  content: " ";
  display: table;
}

.toast--action__wrapper:after {
  clear: both;
}

@media (max-width: 767px) {
  .toast--action__message {
    width: 75%;
  }
}

@media (max-width: 767px) {
  .toast--action__actionbutton {
    width: 25%;
    right: 0;
    position: absolute;
    text-align: right;
  }
}

.toast--action__actionbutton button {
  color: #0063fb;
  background-color: #fff;
  border: 0;
}

.toast--action__actionbutton button,
.toast--action__actionbutton button:hover,
.toast--action__actionbutton button:active,
.toast--action__actionbutton button:focus {
  text-decoration: none;
}

.toast--action__actionbutton button:hover,
.toast--action__actionbutton button:focus {
  color: #0063fb;
  background-color: #ccc;
}

.toast--action__actionbutton button:active {
  color: #0063fb;
  background-color: #fff;
}

.toast--action__actionbutton button:hover,
.toast--action__actionbutton button:focus {
  background-color: #fff;
  text-decoration: underline;
}

.easyad {
    border: 1px solid #DFE4E8;
    border-radius: 4px;
}

.market-frontpage-pageholder {
    min-height: 60vw;
}

/* TODO: Remove after all podlets return their own sections */

/*

    #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,
.panel--bright {
  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:hover,
.panel--is-clickable:focus {
  background-color: #f1f9ff;
  cursor: pointer;
}

@media (min-width: 480px) {
  .panel--is-roomy {
    padding: 64px;
  }
}

.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--bright {
  background-color: #fff;
}

.panel--bright:focus.panel--is-clickable,
.panel--bright:hover.panel--is-clickable {
  outline-color: #ccc;
}

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

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

/*


        List styles


*/

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

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

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

.list--bullets li {
  position: relative;
  padding-left: 16px;
}

.list--bullets li::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 6px;
  background: #06befb;
  height: 8px;
  width: 8px;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .list--cols1to2 {
    -webkit-column-count: 2;
    column-count: 2;
  }
}