/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.PageFrame {
  position: relative;
  min-width: 320px;
  max-width: 1312px;
  padding: 0 32px;
  margin: 0 auto;
  padding-top: 66px; }
  @media only screen and (min-width: 1028px) and (max-width: 1311px) {
    .PageFrame {
      max-width: 1028px; } }
  @media only screen and (min-width: 456px) and (max-width: 671px) {
    .PageFrame {
      padding: 0 24px; } }
  @media only screen and (max-width: 455px) {
    .PageFrame {
      padding: 0 16px; } }
  @media only screen and (max-width: 1311px) {
    .PageFrame {
      padding-top: 116px; } }
  .PageFrame--webView {
    padding-top: 16px; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
@media only screen and (max-width: 671px) {
  .HeaderPrimaryNav {
    width: 100%; } }

.HeaderPrimaryNav__dropDown {
  position: relative; }
  .HeaderPrimaryNav__dropDown:focus-within .HeaderNavDropdown {
    display: block; }
    .HeaderPrimaryNav__dropDown:focus-within .HeaderNavDropdown--browse {
      display: flex; }

.HeaderPrimaryNav__list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0; }
  @media only screen and (max-width: 671px) {
    .HeaderPrimaryNav__list {
      width: 100%;
      display: flex; } }
  @media only screen and (max-width: 671px) {
    .HeaderPrimaryNav__list > li {
      position: static;
      flex: 1 1 auto; } }
  .HeaderPrimaryNav__list > li > a {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    height: 50px;
    text-decoration: none;
    line-height: 50px;
    padding: 0 16px; }
    @media only screen and (max-width: 671px) {
      .HeaderPrimaryNav__list > li > a {
        padding: 0;
        white-space: nowrap; } }
    @media only screen and (min-width: 672px) and (max-width: 1311px) {
      .HeaderPrimaryNav__list > li > a {
        padding: 0 32px; } }
  .HeaderPrimaryNav__list > li > a:hover,
  .HeaderPrimaryNav__list > li > a:focus,
  .HeaderPrimaryNav__list > li:hover > a,
  .HeaderPrimaryNav__list > li:focus-within > a {
    color: var(--color-background-body-base);
    background: #382110;
    outline: none; }
  .HeaderPrimaryNav__list ul {
    width: 160px;
    margin: 0; }
    @media only screen and (max-width: 671px) {
      .HeaderPrimaryNav__list ul {
        width: 100%; } }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Spotlight {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-left: 1px solid #d8d8d8;
  background: #f6f6f6;
  padding: 8px 0; }
  @media only screen and (max-width: 671px) {
    .Spotlight {
      display: none; } }
  .Spotlight__loadingState {
    background: #f6f6f6;
    width: 410px; }
  .Spotlight__listTitle {
    color: var(--color-text-heading-base);
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 16px;
    display: block;
    width: 100%;
    line-height: 2.4;
    padding: 0 16px; }
  .Spotlight__basicGenresList.Spotlight__basicGenresList {
    width: 410px;
    columns: 3;
    column-gap: 0; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SpotlightPane {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #f6f6f6;
  border-left: 1px solid #d8d8d8;
  padding: 8px 0;
  width: 600px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 455px) {
    .SpotlightPane {
      justify-content: center; } }
  .SpotlightPane__title {
    font-size: 1.6rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 8px; }
  .SpotlightPane__description {
    font-size: 1.4rem;
    color: #181818;
    margin-bottom: 8px; }
  .SpotlightPane__browseGenres {
    font-size: 1.4rem;
    color: #333;
    text-decoration: none;
    margin-top: 8px; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.LoadingCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px; }
  .LoadingCard > * {
    margin-bottom: 12px; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSecondaryNav {
  position: absolute;
  right: 0;
  /* stylelint-disable selector-no-qualifying-type */ }
  .HeaderSecondaryNav__list {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .HeaderSecondaryNav__list > li {
      position: relative; }
    .HeaderSecondaryNav__list--signedOut a {
      display: flex;
      justify-content: center;
      height: 50px;
      text-decoration: none;
      font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #382110;
      font-size: 1.6rem;
      line-height: 50px;
      padding: 0 16px; }
      .HeaderSecondaryNav__list--signedOut a:hover, .HeaderSecondaryNav__list--signedOut a:focus {
        background: #382110;
        color: #fff;
        outline: none; }
      @media only screen and (max-width: 671px) {
        .HeaderSecondaryNav__list--signedOut a {
          display: inline;
          padding: 8px 12px;
          font-size: 1.4rem;
          margin: 0 8px 0 0;
          background-color: #382110;
          border: 1px solid #382110;
          border-radius: 3px;
          color: #fff; }
          .HeaderSecondaryNav__list--signedOut a:hover {
            background-color: #58371f; } }
    .HeaderSecondaryNav__list > li {
      position: relative; }
      .HeaderSecondaryNav__list > li:hover .HeaderNavDropdown,
      .HeaderSecondaryNav__list > li:focus-within .HeaderNavDropdown {
        display: block; }
  .HeaderSecondaryNav__topDivider {
    border-top: 1px solid #ebebeb;
    margin-top: 4px;
    padding-top: 4px; }
  @media only screen and (min-width: 672px) {
    .HeaderSecondaryNav__desktopNotification.HeaderSecondaryNav__desktopNotification {
      display: inline-block; } }
  .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks {
    display: inline-block; }
    .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks > li {
      position: relative;
      display: inline-block; }
      .HeaderSecondaryNav__mobileNotificationLinks.HeaderSecondaryNav__mobileNotificationLinks > li > a {
        padding: 0 8px; }
  .HeaderSecondaryNav li.HeaderSecondaryNav__buttons {
    display: none; }
    @media only screen and (max-width: 671px) {
      .HeaderSecondaryNav li.HeaderSecondaryNav__buttons {
        display: flex;
        justify-content: flex-start; }
        .HeaderSecondaryNav li.HeaderSecondaryNav__buttons a {
          width: auto;
          display: flex; } }
  @media only screen and (max-width: 1311px) {
    .HeaderSecondaryNav {
      position: relative;
      right: auto; }
      .HeaderSecondaryNav__list > li {
        display: none; }
      .HeaderSecondaryNav__list > li:last-child {
        display: block; }
      .HeaderSecondaryNav__list--signedOut > li {
        display: flex; } }
  @media only screen and (max-width: 671px) {
    .HeaderSecondaryNav__list--signedOut > li {
      display: none; }
    .HeaderSecondaryNav__list--signedOut > li:last-child {
      display: block; } }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ToggleEditViewInput {
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 12px 8px;
  height: 16px;
  border: 1.5px solid var(--color-background-body-base); }
  .ToggleEditViewInput:hover {
    cursor: pointer; }
  .ToggleEditViewInput:focus-within {
    border: 1.5px solid var(--color-border-primary); }
  .ToggleEditViewInput__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%); }
  .ToggleEditViewInput__checkmark {
    border-radius: 3px;
    display: inline-block;
    height: 12px;
    width: 12px;
    border: 1.5px solid var(--color-background-rating-container-selected-base);
    margin-right: 12px; }
    :hover > .ToggleEditViewInput__checkmark {
      border: 1.5px solid var(--color-border-primary); }
    .ToggleEditViewInput__checkmark::after {
      content: "";
      position: absolute;
      display: none;
      left: 12.5px;
      top: 8.5px;
      width: 3px;
      height: 6px;
      border: solid var(--color-border-primary);
      border-width: 0 1.5px 1.5px 0;
      transform: rotate(45deg); }
  .ToggleEditViewInput__input:checked ~ .ToggleEditViewInput__checkmark {
    border: 1.5px solid var(--color-border-primary); }
    .ToggleEditViewInput__input:checked ~ .ToggleEditViewInput__checkmark::after {
      display: block; }
  .ToggleEditViewInput__input:focus ~ .ToggleEditViewInput__checkmark {
    border: 1.5px solid var(--color-border-primary); }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.HeaderNavDropdown {
  background-color: var(--color-background-body-base);
  display: none;
  opacity: 0;
  animation: 0.3s ease-out 0s 1 normal forwards fadeIn;
  position: absolute;
  top: 50px;
  list-style-type: none;
  padding: 8px 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); }
  @media only screen and (max-width: 671px) {
    .HeaderNavDropdown {
      position: absolute;
      left: 0;
      width: 100%; } }
  .HeaderNavDropdown li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .HeaderNavDropdown li a, .HeaderNavDropdown li__heading {
      color: var(--color-text-heading-base);
      font-size: 1.4rem;
      display: block;
      width: 100%;
      line-height: 2.4;
      text-decoration: none;
      padding: 0 16px; }
    .HeaderNavDropdown li a:hover, .HeaderNavDropdown li a:focus {
      text-decoration: underline; }
  .HeaderNavDropdown__heading {
    font-weight: bold;
    text-transform: uppercase; }
  .HeaderNavDropdown__profileLink {
    font: 1.4rem/2.28571 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .HeaderNavDropdown__profileLink a {
      font-weight: bold;
      padding: 12px 12px 0 16px;
      display: block;
      color: #333;
      line-height: 1.3;
      padding-bottom: 16px; }
  .HeaderNavDropdown__avatar.HeaderNavDropdown__avatar {
    width: 100px;
    padding-right: 0; }
    @media only screen and (min-width: 672px) {
      .HeaderNavDropdown__avatar.HeaderNavDropdown__avatar {
        display: none; } }
  .HeaderNavDropdown__toggleEditView {
    padding-left: 8px;
    padding-bottom: 8px; }
  .HeaderNavDropdown--browse {
    padding: 0; }
    .HeaderNavDropdown--browse > ul {
      padding: 8px 0; }
    @media only screen and (max-width: 1027px) {
      .HeaderNavDropdown--browse {
        position: fixed;
        left: 50%;
        top: 100px;
        transform: translateX(-50%); } }
    @media only screen and (max-width: 671px) {
      .HeaderNavDropdown--browse {
        top: 100px; } }
  .HeaderNavDropdown--pinToRight {
    left: auto;
    right: 0;
    width: 320px; }
    @media only screen and (min-width: 672px) {
      .HeaderNavDropdown--pinToRight {
        width: 250px; } }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSecondaryNavButton {
  display: block;
  height: 50px;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 8px;
  display: flex;
  align-items: center; }
  .HeaderSecondaryNavButton:hover, .HeaderSecondaryNavButton:focus,
  li:not(.HeaderSecondaryNav__buttons):hover > .HeaderSecondaryNavButton,
  li:not(.HeaderSecondaryNav__buttons):focus-within > .HeaderSecondaryNavButton, .HeaderSecondaryNavButton--highlight {
    background: #382110;
    color: #fff;
    outline: none; }
  .HeaderSecondaryNavButton__icon {
    border-radius: 50%;
    display: block;
    height: 30px;
    width: 30px;
    background: #c1b8a6; }
    .HeaderSecondaryNavButton__icon path {
      fill: var(--color-background-body-base); }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.NotificationsBadge {
  background-color: var(--color-background-notif-badge-base);
  color: var(--color-text-notif-badge-base);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  min-width: 14px;
  top: 3px;
  right: 3px;
  height: 20px;
  padding: 1px 3px 0;
  font-size: 1.2rem; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.NotificationsTray {
  background-color: var(--color-background-body-base);
  position: absolute;
  top: 50px;
  right: 0;
  width: 330px;
  opacity: 0;
  animation: 0.15s ease-out 0s 1 normal forwards fadeIn;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); }
  .NotificationsTray__loading {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center; }
    .NotificationsTray__loading > i {
      width: 50px; }
  .NotificationsTray__header {
    padding: 16px;
    border-bottom: 1px solid var(--color-background-divider); }
  .NotificationsTray__title {
    color: var(--color-text-heading-base);
    font-size: 1.4rem;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 16px;
    text-align: left;
    width: 100%;
    line-height: 1.4;
    padding: 0 16px;
    text-decoration: none; }
  .NotificationsTray__allNotificationsLinkBox {
    text-decoration: none; }
  .NotificationsTray__allNotificationsLink {
    color: var(--color-text-subdued);
    font-size: 1.4rem;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 16px; }
  .NotificationsTray__allNotificationsLinkBox:hover .NotificationsTray__allNotificationsLink {
    color: var(--color-text-action-secondary-hover);
    text-decoration: underline; }
  .NotificationsTray__notifications {
    max-height: 380px;
    overflow-y: scroll; }
    .NotificationsTray__notifications::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 7px; }
    .NotificationsTray__notifications::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: var(--color-background-notif-scrollbar-thumb); }
  .NotificationsTray__notification {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-background-divider); }
    .NotificationsTray__notification:last-child {
      border: 0; }
  .NotificationsTray__notificationAvatar {
    padding: 0 12px 0 0; }
  .NotificationsTray__actorLink {
    font-weight: 700;
    text-decoration: none; }
    .NotificationsTray__actorLink:hover {
      text-decoration: underline; }
  .NotificationsTray__notificationMessage {
    color: var(--color-text-body-standard);
    font-size: 1.4rem; }
  .NotificationsTray__notificationMessageBox {
    padding: 0 0 4px; }
  .NotificationsTray__notificationResourceLink {
    color: var(--color-text-action-secondary-base);
    text-decoration: none; }
    .NotificationsTray__notificationResourceLink:hover {
      color: var(--color-text-action-secondary-hover);
      text-decoration: underline; }
  .NotificationsTray__notificationTimeBox {
    color: var(--color-text-subdued); }
  .NotificationsTray__notificationAlertText {
    color: var(--color-text-warning);
    padding: 0 8px 12px 0; }
  .NotificationsTray__notificationHistoryText {
    color: var(--color-text-notif-history);
    font-size: 1.4rem;
    display: block;
    font-style: italic; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearch {
  position: relative;
  height: 32px;
  width: 392px;
  padding: 0 16px; }
  .HeaderSearch form {
    height: 100%;
    width: 100%; }
  .HeaderSearch__label, .HeaderSearch__input {
    display: block;
    font-size: 1.4rem;
    height: 32px;
    width: 100%;
    padding: 4px 24px 4px 8px; }
  .HeaderSearch__label {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 26px;
    opacity: 0.5;
    padding-left: 12px;
    transition: opacity 0.25s ease-in-out; }
    .HeaderSearch__label--hidden {
      opacity: 0; }
  .HeaderSearch__input {
    background-color: var(--color-background-body-base);
    border-radius: 3px;
    border: 1px solid #dcd6cc;
    line-height: 32px; }
    .HeaderSearch__input:focus {
      outline: none;
      box-shadow: 0 0 4px rgba(185, 173, 153, 0.5); }
  .HeaderSearch__button {
    display: block;
    position: absolute;
    top: 0;
    right: 16px;
    height: 100%;
    width: 32px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    display: flex;
    justify-content: center;
    align-content: center; }
    .HeaderSearch__button .Icon {
      height: 80%;
      width: 80%;
      margin-top: 10%; }
      .HeaderSearch__button .Icon path {
        fill: #707070; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchBookItem {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid #d8d8d8; }
  .HeaderSearchBookItem__link, .HeaderSearchBookItem__link--selected {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    position: relative;
    width: 100%;
    height: 58px;
    padding: 8px 8px 8px 66px;
    text-decoration: none;
    word-wrap: break-word;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #333;
    font-weight: 600; }
  .HeaderSearchBookItem__link--selected {
    background: #f4f1ea; }
    .HeaderSearchBookItem__link--selected::after {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
    .HeaderSearchBookItem__link--selected::after {
      content: "";
      display: block;
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 1px;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      transition: box-shadow 0.2s ease-out; }
  .HeaderSearchBookItem__image {
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    width: 50px;
    border: 0; }
  .HeaderSearchBookItem__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden; }
  .HeaderSearchBookItem__author {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-family: Merriweather, Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6; }
    .HeaderSearchBookItem__author .Icon {
      height: 14px;
      width: 14px; }
      .HeaderSearchBookItem__author .Icon path {
        fill: var(--color-text-author-base); }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchList {
  background-color: var(--color-background-body-base);
  display: block;
  border: 1px solid #d8d8d8;
  border-width: 0 1px; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchSeeMore {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid #d8d8d8; }
  .HeaderSearchSeeMore__link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    position: relative;
    width: 100%;
    text-decoration: none;
    word-wrap: break-word;
    text-align: center;
    padding: 8px;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #016661; }
    .HeaderSearchSeeMore__link:hover {
      text-decoration: underline; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.HeaderSearchListTray {
  background-color: var(--color-background-body-base);
  display: block;
  position: relative;
  border: 1px solid #d8d8d8;
  border-width: 0 1px;
  z-index: 100; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  width: 100%;
  background: #f4f1ea;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  z-index: 100; }
  @media only screen and (max-width: 1311px) {
    .Header::after {
      content: "";
      pointer-events: none;
      user-select: none;
      position: absolute;
      top: 0;
      left: 0;
      height: 50px;
      width: 100%;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } }
  .Header__contents {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1312px;
    margin: 0 auto; }
    @media only screen and (max-width: 1311px) {
      .Header__contents {
        justify-content: space-between;
        background-color: #f4f1ea; } }
  .Header__logo {
    display: block;
    height: 50px;
    text-decoration: none;
    padding: 0 4px;
    width: 140px;
    margin: 0 10px;
    box-sizing: content-box;
    display: flex; }
    @media only screen and (max-width: 671px) {
      .Header__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%); } }
  @media only screen and (max-width: 1311px) {
    .Header__primaryNavContainer {
      display: block;
      height: 50px;
      background: #f4f1ea;
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
      transition: all 0.2s ease-out;
      z-index: -1; } }
  @media only screen and (max-width: 1311px) {
    .Header__primaryNavContainer--hide {
      transform: translateY(-100%); } }
  @media only screen and (max-width: 1311px) {
    .Header__searchContainer {
      flex: 1 1 auto; } }
  @media only screen and (max-width: 671px) {
    .Header__searchContainer {
      display: none;
      align-items: center;
      justify-content: center;
      height: 50px;
      background: #f4f1ea;
      position: absolute;
      top: 50px;
      left: 0;
      right: 0; } }
  .Header__searchContainer--open {
    display: flex; }
  .Header__toggleSearchContainer {
    display: none;
    height: 100%;
    width: 50px;
    background: none;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center; }
    @media only screen and (max-width: 671px) {
      .Header__toggleSearchContainer {
        display: flex; } }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.Footer {
  width: 100%;
  min-width: 320px;
  background: #f4f1ea;
  padding: 32px 0; }
  .Footer__contents {
    position: relative;
    display: flex;
    max-width: 1312px;
    margin: 0 auto;
    padding: 0 12px; }
    @media only screen and (max-width: 671px) {
      .Footer__contents {
        flex-direction: column; }
        .Footer__contents > * {
          margin-bottom: 24px; } }
  .Footer__column {
    width: 200px; }
  .Footer__heading {
    text-transform: uppercase;
    font: bold 1.4rem/2 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--color-text-body-standard); }
  .Footer__list a {
    text-decoration: none;
    color: #382110;
    font: normal 1.4rem/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }
    .Footer__list a:hover {
      text-decoration: underline; }
  .Footer__list--inline {
    display: flex; }
    .Footer__list--inline a {
      border-radius: 50%;
      display: block;
      height: 30px;
      width: 30px;
      background: #767676;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 8px; }
    .Footer__list--inline .Icon {
      height: 16px;
      width: 16px; }
      .Footer__list--inline .Icon path {
        color: #f4f1ea; }
  .Footer__right {
    position: absolute;
    top: 0;
    right: 16px; }
  .Footer__badge {
    display: inline-block;
    width: 135px;
    margin-right: 4px; }
    @media only screen and (max-width: 1027px) {
      .Footer__badge {
        display: block; } }
    .Footer__badge svg {
      display: block;
      width: 100%; }
  .Footer__copy {
    margin-top: 12px;
    font: normal 1.4rem/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.LoginInterstitial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  .LoginInterstitial__img {
    width: 100%;
    height: auto; }
  .LoginInterstitial__buttonWrap {
    padding: 8px 0;
    width: 100%; }
  .LoginInterstitial__buttonArea {
    width: 100%;
    max-width: 300px; }
  .LoginInterstitial__text {
    text-align: center;
    padding: 16px 0; }
  .LoginInterstitial__finePrint {
    text-align: center;
    padding: 8px 0 0; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.DataSourceButton {
  display: inline-block;
  position: fixed;
  bottom: 5%;
  right: calc(5% + 100px); }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ThemeToggleButton {
  display: inline-block;
  position: fixed;
  left: 5%;
  z-index: 50;
  bottom: 5%; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.SupportedErrorCodes__link {
  color: var(--color-text-action-secondary-base);
  text-decoration: none; }
  .SupportedErrorCodes__link:hover {
    color: var(--color-text-action-secondary-hover);
    text-decoration: underline; }

/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
  Do not edit directly
  Generated on Thu, 09 Sep 2021 18:49:24 GMT
*/
/*
These mixins and functions use the semantic tokens generated by StyleDictionary
and output errors about incorrect usage.

These maps are imported automatically in every stylesheet thanks to our
webpack config/sass-resources-loader.
*/
/**
	weblit-line-clamp only works if display is set to -webkit-box and webkit-box-orient is set to vertical
	because this feature was built on -webkit-box display. 
	This hack is approved by CSSWG and recommended by multiple sources
	* https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
	* https://css-tricks.com/line-clampin/#weird-webkit-flexbox-way
*/
/*
  Function for converting px font-size values to rem.

  FMI:
  https://dev.to/cogoo/sizing-units-in-css-rem-and-em-4ea2
  https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/
*/
/*

This mixin uses the $tokens map generated by StyleDictionary, which is
imported automatically in every stylesheet thanks to our webpack config/
sass-resources-loader.
 
*/
.ErrorPage__top {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 32px !important;
  padding-top: 24px;
  min-height: 400px;
  padding-bottom: 40px;
  max-width: 1028px;
  margin: 0 auto; }
  @media only screen and (min-width: 456px) and (max-width: 671px) {
    .ErrorPage__top {
      grid-gap: 24px !important; } }
  @media only screen and (max-width: 455px) {
    .ErrorPage__top {
      grid-gap: 16px !important; } }
  @supports (display: -ms-grid) {
    .ErrorPage__top {
      display: -ms-grid !important;
      -ms-grid-columns: 1fr [12]; } }

.ErrorPage__leftColumn {
  grid-column: span 6; }
  @media only screen and (max-width: 671px) {
    .ErrorPage__leftColumn {
      grid-column: span 12; } }

.ErrorPage__rightColumn {
  grid-column: span 6; }
  @media only screen and (max-width: 671px) {
    .ErrorPage__rightColumn {
      grid-column: span 12;
      padding-bottom: 40px; } }

.ErrorPage__title {
  margin-bottom: 16px; }

.ErrorPage__goBackButton {
  margin-top: 16px; }