/*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */
/* Document (https://html.spec.whatwg.org/multipage/semantics.html#semantics)
========================================================================== */
/**
 * 1. Remove repeating backgrounds in all browsers (opinionated).
 * 2. Add box sizing inheritence in all browsers (opinionated).
 */
*,
::before,
::after {
  background-repeat: no-repeat;
  /* 1 */
  box-sizing: inherit;
  /* 2 */ }

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritence in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit;
  /* 1 */
  vertical-align: inherit;
  /* 2 */ }

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Add the default cursor in all browsers (opinionated).
 * 3. Prevent font size adjustments after orientation changes in IE and iOS.
 */
html {
  box-sizing: border-box;
  /* 1 */
  cursor: default;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */ }

/* Sections (https://html.spec.whatwg.org/multipage/semantics.html#sections)
========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: .67em 0; }

/* Grouping content (https://html.spec.whatwg.org/multipage/semantics.html#grouping-content)
========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
nav ol,
nav ul {
  list-style: none; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics (https://html.spec.whatwg.org/multipage/semantics.html#text-level-semantics)
========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ffff00;
  color: #000000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

/*
 * Remove the text shadow on text selections (opinionated).
 * 1. Restore the coloring undone by defining the text shadow (opinionated).
 */
::-moz-selection {
  background-color: #b3d4fc;
  /* 1 */
  color: #000000;
  /* 1 */
  text-shadow: none; }

::selection {
  background-color: #b3d4fc;
  /* 1 */
  color: #000000;
  /* 1 */
  text-shadow: none; }

/* Embedded content (https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content)
========================================================================== */
/*
 * Change the alignment on media elements in all browers (opinionated).
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
svg {
  fill: currentColor; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Tabular data (https://html.spec.whatwg.org/multipage/tables.html#tables)
========================================================================== */
/**
 * Collapse border spacing
 */
table {
  border-collapse: collapse; }

/* Forms (https://html.spec.whatwg.org/multipage/forms.html#forms)
========================================================================== */
/**
 * Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  margin: 0; }

/**
 * Inherit styling in all browsers (opinionated).
 */
button,
input,
select,
textarea {
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit; }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * 1. Remove the default vertical scrollbar in IE.
 * 2. Change the resize direction on textareas in all browsers (opinionated).
 */
textarea {
  overflow: auto;
  /* 1 */
  resize: vertical;
  /* 2 */ }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive elements (https://html.spec.whatwg.org/multipage/forms.html#interactive-elements)
========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Scripting (https://html.spec.whatwg.org/multipage/scripting.html#scripting-3)
========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

/* User interaction (https://html.spec.whatwg.org/multipage/interaction.html#editing)
========================================================================== */
/*
 * Remove the tapping delay on clickable elements (opinionated).
 * 1. Remove the tapping delay in IE 10.
 */
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  /* 1 */
  touch-action: manipulation; }

/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none; }

/* ARIA (https://w3c.github.io/html-aria/)
========================================================================== */
/**
 * Change the cursor on busy elements (opinionated).
 */
[aria-busy="true"] {
  cursor: progress; }

/*
 * Change the cursor on control elements (opinionated).
 */
[aria-controls] {
  cursor: pointer; }

/*
 * Change the display on visually hidden accessible elements (opinionated).
 */
[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute; }

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements (opinionated).
 */
[aria-disabled] {
  cursor: default; }

@font-face {
  font-family: 'AlteDIN1451Mittel';
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/din1451alt.ttf") format("truetype"); }

@font-face {
  font-family: Inter-UI;
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/Inter-UI-Regular.woff2") format("woff2"), url("../../fonts/Inter-UI-Regular.woff") format("woff"), url("../../fonts/Inter-UI-Regular.ttf") format("truetype"); }

h1 {
  margin: 0;
  font-family: "AlteDIN1451Mittel", sans-serif;
  font-weight: 400;
  color: #fff; }

h2 {
  margin: 0;
  font-family: "AlteDIN1451Mittel", sans-serif;
  font-weight: 400;
  color: #fff; }

h3 {
  margin: 0;
  font-family: "AlteDIN1451Mittel", sans-serif;
  font-weight: 400;
  color: #fff; }

h4 {
  margin: 0;
  font-family: "AlteDIN1451Mittel", sans-serif;
  font-weight: 400;
  color: #fff; }

h5 {
  margin: 0;
  font-family: "AlteDIN1451Mittel", sans-serif;
  font-weight: 400;
  color: #fff; }

h6 {
  margin: 0;
  font-family: "AlteDIN1451Mittel", sans-serif;
  font-weight: 400;
  color: #fff; }

.link__label, .link__content, .link__text, .picker__title, .picker__action, .preview__label, .sidebar__label, .sharing__label, .depiction__label, .depiction__hint, .depiction__buy, .search__text {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase; }

* {
  font-family: sans-serif; }

h1 {
  font-size: 32px; }
  @media only screen and (min-width: 1160px) {
    h1 {
      font-size: 48px; } }

h2 {
  font-size: 28px; }
  @media only screen and (min-width: 1160px) {
    h2 {
      font-size: 32px; } }

h3 {
  font-size: 20px; }

p {
  font-family: "Inter-UI", sans-serif;
  font-size: 16px; }

.preview__image-content, .thumbnail__image-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover; }

.modal__wrapper .modal__container, .sidebar__body, .sharing__code {
  overflow: scroll;
  -ms-overflow-style: none; }

.action {
  padding: 0;
  background: #909293;
  border: none;
  border-radius: 3px;
  outline: none; }
  .action__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px; }
  .action__tooltip {
    position: absolute;
    top: calc(-25px - 10px);
    left: calc((100% - 60px) / 2);
    z-index: 3;
    display: inline-block;
    width: 60px;
    height: 25px;
    padding: 0.5em;
    font-size: .6rem;
    line-height: 1.8;
    color: #1e2325;
    text-align: center;
    background-color: #fff;
    border-radius: 3px;
    visibility: hidden;
    transform: translateY(-8px);
    transition: visibility .1s ease-in-out .2s, transform .3s ease-in-out .2s; }
    .action__tooltip:before {
      position: absolute;
      bottom: -3px;
      left: calc((100% - 6px) / 2);
      width: 6px;
      height: 6px;
      background-color: #fff;
      content: '';
      transform: rotate(45deg); }
  .action__link {
    position: absolute;
    width: 100%;
    height: 100%; }
  .action:hover, .action:active {
    outline: none; }
    .action:hover .action__tooltip, .action:active .action__tooltip {
      visibility: visible;
      transform: translateY(0); }
  .action:active {
    z-index: 1;
    transform: translateY(2px); }
  .action + .action {
    margin-left: 0.5em; }

.burger, .burger__label {
  display: none; }

@media only screen and (max-width: 1160px) {
  .burger__label {
    position: absolute;
    top: 32px;
    right: 1.2em;
    z-index: 2;
    display: initial;
    width: 1.5rem;
    height: 1.5rem;
    transform: translate(0, -50%); }
  .burger__icon {
    width: 100%;
    height: 100%; }
  .burger__bar {
    transition: transform .2s;
    fill: #fcc439;
    transform-origin: 0.75rem 0.75rem 0; }
    .burger__bar--top {
      transform: translate(0, -0.495rem); }
    .burger__bar--bottom {
      transform: translate(0, 0.495rem); }
  .burger:checked + .burger__label {
    position: fixed; }
    .burger:checked + .burger__label .burger__bar--top {
      transform: translate(0.0825rem, -0.0825rem) rotate(45deg); }
    .burger:checked + .burger__label .burger__bar--middle {
      transform: scaleX(0); }
    .burger:checked + .burger__label .burger__bar--bottom {
      transform: translate(-0.0825rem, 0.0825rem) rotate(-45deg); } }

.button {
  position: relative;
  display: inline-block;
  padding: 0;
  overflow: hidden;
  font-family: "AlteDIN1451Mittel", sans-serif;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  outline: none; }
  .button:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 2px;
    content: '';
    opacity: 0;
    transition: opacity 0.3s, color 0.3s; }
  .button:hover:before {
    opacity: .1; }
  .button:active {
    transform: translateY(2px); }
  .button__inner {
    position: relative;
    padding: 16px 21px;
    overflow: hidden;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 1px;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .button--primary {
    background: linear-gradient(90deg, #3dc564, #2d954b); }
    .button--primary:disabled {
      color: rgba(113, 127, 134, 0.4);
      pointer-events: none;
      background: rgba(113, 127, 134, 0.2); }
  .button--secondary {
    color: #d8d8d8;
    background: #f7f7f7;
    transition: background 0.3s, color 0.3s; }
    .button--secondary:hover {
      color: #383f43;
      background: #d8d8d8; }
      .button--secondary:hover:before {
        opacity: 0; }
  .button--success {
    color: #d8d8d8;
    background: linear-gradient(90deg, #3dc564, #2d954b); }
    .button--success:before {
      top: 1px;
      left: 1px;
      width: calc(100% - 2 * 1px);
      height: calc(100% - 2 * 1px);
      background-color: #262c2f;
      opacity: 1; }
    .button--success:hover {
      color: #fff; }
      .button--success:hover:before {
        opacity: 0; }
    .button--success:disabled {
      color: rgba(113, 127, 134, 0.4);
      pointer-events: none;
      background: rgba(113, 127, 134, 0.4); }
  .button--danger {
    background: #ee5565; }
  .button--info {
    background: #383f43; }
    .button--info:disabled {
      pointer-events: none;
      opacity: .5; }
  .button--light {
    color: #d8d8d8;
    background: rgba(113, 127, 134, 0.2); }
    .button--light .button__inner {
      padding: 10px;
      font-size: 12px; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1159px) {
    .button--full-width {
      width: 100%; }
    .button--small .button__inner {
      padding: 14px;
      font-size: 13px;
      line-height: 13px; } }
  @media only screen and (min-width: 768px) {
    .button__inner {
      padding: 12px 21px; }
    .button--small .button__inner {
      padding: 12px;
      font-size: 13px;
      line-height: 13px; } }

.flash {
  position: fixed;
  top: calc(10px + 65px);
  right: 10px;
  z-index: 999;
  display: flex;
  align-items: center;
  height: 45px;
  max-width: 100%;
  min-width: auto;
  padding: 0 1em;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  border-radius: 2px;
  transition: top .3s ease; }
  .flash, .flash__message {
    font-family: "AlteDIN1451Mittel", sans-serif;
    font-size: 14px; }
  .flash__message {
    margin: 0; }
  .flash--success {
    background: linear-gradient(90deg, #3dc564, #2d954b); }
  .flash--info {
    background: #869399; }
  .flash--danger {
    background: #ee5565; }
  .flash:nth-child(2) {
    top: calc(45px * 1 + 65px + 5px * 3); }
  .flash:nth-child(3) {
    top: calc(45px * 2 + 65px + 5px * 4); }
  .flash:nth-child(4) {
    top: calc(45px * 3 + 65px + 5px * 5); }
  .flash:nth-child(5) {
    top: calc(45px * 4 + 65px + 5px * 6); }
  .flash:nth-child(6) {
    top: calc(45px * 5 + 65px + 5px * 7); }
  .flash:nth-child(7) {
    top: calc(45px * 6 + 65px + 5px * 8); }
  .flash:nth-child(8) {
    top: calc(45px * 7 + 65px + 5px * 9); }
  .flash:nth-child(9) {
    top: calc(45px * 8 + 65px + 5px * 10); }
  .flash:nth-child(10) {
    top: calc(45px * 9 + 65px + 5px * 11); }
  @media only screen and (min-width: 768px) {
    .flash--info, .flash--success, .flash--danger {
      padding-left: calc((20px * 2) + 1em); }
      .flash--info:after, .flash--info:before, .flash--success:after, .flash--success:before, .flash--danger:after, .flash--danger:before {
        position: absolute;
        content: ''; }
      .flash--info:before, .flash--success:before, .flash--danger:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 100%; }
      .flash--info:after, .flash--success:after, .flash--danger:after {
        top: calc((100% - 20px) / 2);
        left: 10px;
        width: 20px;
        height: 20px;
        color: #fff;
        background-size: 100%; }
    .flash--success:after, .flash--info:after {
      background-image: url("../../../svgs/success.svg"); }
    .flash--success:before {
      background-color: #2d954b; }
    .flash--info:before {
      background-color: #717f86; }
    .flash--danger:before {
      background-color: #ed4758; }
    .flash--danger:after {
      background-image: url("../../../svgs/error.svg"); } }

.page-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  background-color: #262c2f;
  border-bottom: 1px solid rgba(144, 146, 147, 0.2); }
  .page-header, .page-header__nav {
    display: flex;
    align-items: center; }
  .page-header__nav {
    width: 100%;
    height: 64px;
    margin: 0 auto;
    padding: 0 1.2em; }
  .page-header__logo {
    margin-right: 10px; }
  .page-header__action {
    flex-shrink: 0;
    margin-left: 10px; }
    .page-header__action .button__inner {
      padding: 9px 16px; }
  .page-header__link {
    color: inherit; }
  .page-header__avatar {
    position: relative;
    display: none;
    width: 32px;
    height: 32px;
    margin: 0 0 0 auto;
    overflow: hidden;
    background-color: #909293;
    border-radius: 3px; }
  .page-header__login, .page-header__logout {
    min-width: 0;
    margin-left: auto; }
  .page-header__logout {
    display: none; }
  @media only screen and (min-width: 1160px) {
    .page-header__avatar, .page-header__action, .page-header__logout {
      display: block; }
    .page-header__action {
      margin-left: 1em; }
      .page-header__action .button__inner {
        padding: 16px 21px; } }

.heading {
  display: flex;
  align-items: center;
  text-transform: capitalize; }
  .heading__icon {
    flex-shrink: 0;
    margin-right: 1em; }

.input {
  width: 100%;
  height: 40px;
  padding: 15px;
  font-size: 16px;
  border: none;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box; }
  .input::placeholder {
    text-align: center; }
  .input__label {
    display: flex;
    margin-bottom: 10px;
    font-family: "AlteDIN1451Mittel", sans-serif;
    font-size: 13px;
    color: #717f86;
    text-align: left; }
  .input--primary {
    color: #fff;
    background-color: #383f43; }
    .input--primary::-webkit-input-placeholder {
      color: #717f86; }
    .input--primary::-moz-placeholder {
      color: #717f86; }
    .input--primary:-moz-placeholder {
      color: #717f86; }
    .input--primary:-ms-input-placeholder {
      color: #717f86; }
  .input--secondary {
    background-color: #fff; }
    .input--secondary::-webkit-input-placeholder {
      color: #d8d8d8; }
    .input--secondary::-moz-placeholder {
      color: #d8d8d8; }
    .input--secondary:-moz-placeholder {
      color: #d8d8d8; }
    .input--secondary:-ms-input-placeholder {
      color: #d8d8d8; }
  @media only screen and (min-width: 768px) {
    .input {
      padding-top: 11px;
      padding-bottom: 11px; } }
  @media only screen and (min-width: 1160px) {
    .input::placeholder {
      text-align: left; } }

.link {
  width: 100%;
  padding: 0;
  cursor: pointer;
  background-color: #1e2325;
  border: none;
  border-radius: 3px; }
  .link__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; }
  .link__label {
    max-width: 80%;
    margin: 0;
    overflow: hidden;
    font-family: "AlteDIN1451Mittel", sans-serif;
    color: #717f86;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .link__icon-add {
    position: relative;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: .5em; }
    .link__icon-add:before, .link__icon-add:after {
      position: absolute;
      top: calc((100% - 1px) / 2);
      left: 0;
      width: 100%;
      height: 1px;
      background: #d8d8d8;
      content: '';
      transition: background .3s ease-in-out; }
    .link__icon-add:after {
      transform: rotate(90deg); }
    .link__icon-add--active:before, .link__icon-add--active:after {
      background: #2d954b; }
  .link--flat .link__icon-add:before, .link--flat .link__icon-add:after {
    background: #2d954b; }
  .link__content, .link__text {
    display: flex;
    align-items: center;
    justify-content: center; }
  .link__text {
    height: 19px;
    margin: 0 0 0 1em;
    padding: 0;
    color: #2d954b;
    transition: opacity .3s ease-in-out; }
  .link__content {
    width: 100%;
    height: 57px;
    margin: 0;
    padding: 1em;
    color: #d8d8d8;
    text-align: center;
    border: 1px solid rgba(216, 216, 216, 0.6);
    border-style: dashed;
    border-radius: 3px;
    transition: color .3s ease-in-out; }
  .link:hover, .link:active, .link:focus {
    outline: none; }
    .link:hover .link__content, .link:active .link__content, .link:focus .link__content {
      color: #2d954b; }
    .link:hover .link__icon-add:before,
    .link:hover .link__icon-add:after, .link:active .link__icon-add:before,
    .link:active .link__icon-add:after, .link:focus .link__icon-add:before,
    .link:focus .link__icon-add:after {
      background: #2d954b; }
  .link--disabled {
    pointer-events: none;
    opacity: .5; }
  .link--flat {
    padding: 0.5em 1em;
    transition: background .3s ease-in-out; }
    .link--flat .link__label {
      color: rgba(255, 255, 255, 0.7); }
  @media only screen and (min-width: 1160px) {
    .link--flat {
      height: auto; }
      .link--flat .link__wrapper {
        justify-content: flex-start; }
      .link--flat .link__text {
        opacity: 0; }
      .link--flat:hover, .link--flat:active {
        background: #262c2f; }
        .link--flat:hover .link__text, .link--flat:active .link__text {
          opacity: 1; } }

.modal {
  position: relative; }
  .modal__overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.5); }
  .modal__wrapper .modal__container {
    position: relative;
    width: 100%;
    max-height: 100%;
    margin: 0 auto;
    padding: 28px;
    text-align: center;
    background-color: #262c2f;
    border-radius: 2px; }
  .modal__button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 16px;
    color: #fff;
    border: none;
    outline: none;
    transition: color .2s; }
    .modal__button:hover {
      color: #909293; }
  .modal__header, .modal__content {
    margin-top: 16px; }
  .modal__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 56px; }
  .modal__buttons {
    margin-top: 32px; }
  .modal__sharing {
    margin-top: 32px; }
    .modal__sharing-header {
      margin-bottom: .8em;
      text-align: left; }
  @media only screen and (min-width: 768px) {
    .modal__wrapper .modal__container {
      max-width: 500px;
      min-width: initial; } }

.modal__container.ember-modal-dialog.ember-modal-dialog-target-attachment-center.emd-target-attachment-center.ember-view {
  top: auto;
  left: auto;
  transform: translate(0, 0); }

.loader {
  position: relative;
  width: 8em;
  height: 8em;
  margin: 50px auto;
  font-size: 10px;
  text-indent: -9999em;
  background: linear-gradient(to right, #fff 10%, rgba(255, 255, 255, 0) 42%);
  border-radius: 50%;
  transform: translateZ(0);
  animation: spin 1.4s infinite linear; }
  .loader:before, .loader:after {
    position: absolute;
    top: 0;
    left: 0;
    content: ''; }
  .loader:before {
    width: 50%;
    height: 50%;
    background: #fff;
    border-radius: 100% 0 0 0; }
  .loader:after {
    right: 0;
    bottom: 0;
    width: 75%;
    height: 75%;
    margin: auto;
    background: #262c2f;
    border-radius: 50%; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.picker {
  max-width: 370px; }
  .picker__title {
    margin-bottom: 1em;
    font-family: "AlteDIN1451Mittel", sans-serif;
    font-size: 13px;
    color: #717f86; }
  .picker__action {
    display: flex;
    align-items: center;
    padding: 1em 0;
    font-family: "AlteDIN1451Mittel", sans-serif;
    color: #2d954b;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    outline: none; }
  .picker__list {
    position: relative;
    display: none;
    margin-top: 28.5px;
    padding-left: 40px;
    list-style: none;
    visibility: hidden; }
  .picker__item {
    position: relative; }
    .picker__item:before {
      position: absolute;
      top: calc((100% - 1px) / 2);
      left: -20px;
      width: 10px;
      height: 1px;
      background-color: #383f43;
      content: ''; }
    .picker__item:after {
      position: absolute;
      top: calc((-100% - 1px - 1em) / 2);
      left: -20px;
      width: 1px;
      height: calc(100% + 1em / 2);
      background-color: #383f43;
      content: ''; }
    .picker__item--bordered {
      background-color: transparent;
      border: 1px solid #d8d8d8;
      border-style: dashed; }
  .picker__item + .picker__item {
    margin-top: 0.5em; }
  .picker__arrow {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 0.5em;
    transform: rotate(180deg); }
    .picker__arrow:before, .picker__arrow:after {
      position: absolute;
      top: 6px;
      width: 8px;
      height: 2px;
      background: #717f86;
      border-radius: 2px;
      content: '';
      transition: all .3s ease-in-out; }
    .picker__arrow:before {
      left: 4px;
      transform: rotate(45deg); }
    .picker__arrow:after {
      right: 4px;
      transform: rotate(-45deg); }
  .picker--flat .picker__list {
    margin-top: 0;
    padding-left: 20px; }
  .picker--flat .picker__item + .picker__item {
    margin-top: 1em; }
  .picker--flat .picker__item:before {
    left: -3px;
    z-index: 1;
    width: 5px; }
  .picker--flat .picker__item:after {
    top: 0;
    left: -3px;
    width: 1px;
    height: calc(100% + 1em); }
  .picker--flat .picker__item:last-child:after {
    height: 50%; }
  .picker--small + .picker--small {
    margin-top: 5px; }
  .picker--small .picker__action,
  .picker--small .picker__title {
    display: none; }
  .picker--is-open .picker--flat {
    margin-top: 20px; }
  .picker--is-open .picker__list {
    display: block;
    visibility: visible; }
  .picker--is-open .picker__arrow:before {
    transform: rotate(-45deg); }
  .picker--is-open .picker__arrow:after {
    transform: rotate(45deg); }

.preview {
  transition: background-color 0.3s cubic-bezier(0, 0.54, 0.25, 0.98);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 57px;
  padding: 0 0.8em;
  cursor: pointer;
  background-color: #1e2325;
  border-radius: 3px; }
  .preview__label {
    max-width: 130px;
    margin: 0;
    margin-right: 0.8em;
    font-family: "AlteDIN1451Mittel", sans-serif;
    color: #717f86;
    white-space: nowrap; }
    .preview__label--small {
      display: block;
      font-size: 10px;
      text-align: start; }
  .preview__title {
    max-width: 100%;
    overflow: hidden; }
  .preview__text {
    transition: color 0.3s cubic-bezier(0, 0.54, 0.25, 0.98);
    display: block;
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
    color: #d8d8d8;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .preview__image {
    position: relative;
    flex-shrink: 0;
    width: 57px;
    height: 57px;
    margin: 0;
    margin-right: 0.8em;
    margin-left: -0.8em;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 3px; }
  .preview__actions {
    transition: background 0.3s cubic-bezier(0, 0.54, 0.25, 0.98);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    height: 100%;
    padding-right: 0.8em;
    background: #1e2325;
    border-radius: 3px;
    visibility: hidden; }
    .preview__actions:before {
      background-image: linear-gradient(to right, rgba(30, 35, 37, 0.2) 0%, #1e2325 90%);
      position: absolute;
      top: 0;
      left: -40px;
      width: 40px;
      height: 100%;
      content: ''; }
  .preview__price {
    margin: 0;
    padding-left: 0.8em;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #fcc439;
    white-space: nowrap; }
  .preview--active .preview__actions {
    visibility: visible; }
  .preview--flat {
    transition: background 0.3s cubic-bezier(0, 0.54, 0.25, 0.98);
    align-items: flex-start;
    flex-direction: column;
    height: auto;
    padding: 0.4em 0.8em;
    border: none; }
    .preview--flat .preview__title,
    .preview--flat .preview__label {
      max-width: 80%; }
    .preview--flat .preview__title {
      max-height: 2.4em;
      overflow: hidden;
      line-height: 1.2em;
      max-width: 80%;
      margin-top: 0.4em;
      margin-right: 0.8em; }
    .preview--flat .preview__text {
      display: inline;
      white-space: normal; }
    .preview--flat:hover,
    .preview--flat:hover .preview__actions {
      background: #262c2f; }
      .preview--flat:hover:before,
      .preview--flat:hover .preview__actions:before {
        background-image: linear-gradient(to right, rgba(38, 44, 47, 0.2) 0%, #262c2f 90%); }
  .preview:hover .preview__text {
    color: #2d954b; }
  @media only screen and (max-width: 1160px) {
    .preview--flat .preview__title {
      margin: 0.4em 0; }
    .preview--flat .preview__price {
      padding-left: 0; } }
  @media only screen and (min-width: 1160px) {
    .preview__actions {
      transition: opacity 0.3s cubic-bezier(0, 0.54, 0.25, 0.98);
      opacity: 0; }
    .preview__price {
      margin-left: auto; }
    .preview--flat .preview__label {
      flex-shrink: 0;
      margin-right: 10px;
      line-height: 1.5;
      white-space: normal; }
    .preview--flat .preview__price {
      position: absolute;
      top: calc((100% - 13px) / 2);
      right: 0.8em; }
    .preview:hover .preview__actions {
      opacity: 1;
      visibility: visible; } }

.sidebar {
  display: flex;
  flex-direction: column;
  height: auto;
  background-color: #1e2325; }
  .sidebar__body {
    position: relative;
    flex-grow: 3;
    background-color: #1e2325; }
  .sidebar__content, .sidebar__header-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.2em; }
  .sidebar__header {
    position: relative;
    margin-top: 1.2em;
    border-bottom: 1px solid rgba(144, 146, 147, 0.2); }
  .sidebar__summary {
    z-index: 2;
    flex-grow: 1;
    background-color: #1e2325;
    border-top: 1px solid rgba(144, 146, 147, 0.2);
    box-shadow: 10px 0 30px 0 rgba(0, 0, 0, 0.2); }
  .sidebar__closeIcon {
    color: #fff;
    transition: color .3s ease-in-out; }
  .sidebar__close {
    position: absolute;
    top: 0;
    right: 1.2em;
    z-index: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    border: none; }
  .sidebar__label {
    margin: 0;
    font-family: "AlteDIN1451Mittel", sans-serif;
    color: #717f86; }
  .sidebar__title {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: .8rem; }
  .sidebar__edit {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: -6px;
    cursor: pointer; }
  .sidebar__edit-icon {
    transition: fill .3s ease-in-out;
    fill: #909293; }
  .sidebar__name, .sidebar__description {
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: none;
    outline: none; }
  .sidebar__name {
    max-width: calc(100% - 24px);
    font-family: "AlteDIN1451Mittel", sans-serif;
    font-size: 24px; }
    .sidebar__name:focus + .sidebar__edit,
    .sidebar__name:disabled + .sidebar__edit {
      opacity: 0;
      visibility: hidden; }
    .sidebar__name:focus {
      width: 100%; }
    .sidebar__name:hover + .sidebar__edit .sidebar__edit-icon {
      fill: #fff; }
  .sidebar__description {
    width: 100%;
    font-size: 13px; }
  .sidebar__section {
    color: #fff; }
  .sidebar__section + .sidebar__section {
    margin-top: 2em; }
  .sidebar__heading {
    margin-bottom: .8em;
    font-size: 16px;
    color: #717f86;
    text-transform: uppercase; }
  @media only screen and (max-width: 1160px) {
    .sidebar {
      bottom: 0;
      width: 100%; }
      .sidebar__body {
        position: fixed;
        top: 100%;
        left: 0;
        z-index: calc(10 + 1);
        width: 100%;
        padding-bottom: 120px;
        transition: transform 0.3s cubic-bezier(0, 0.4, 0.26, 0.91); }
      .sidebar__summary {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: calc(10 + 2);
        width: 100%;
        max-height: 120px; }
      .sidebar--open .sidebar__body {
        height: 100vh;
        transform: translateY(-100%); } }
  @media only screen and (min-width: 1160px) {
    .sidebar {
      position: fixed;
      right: 0;
      bottom: 0;
      width: 400px;
      height: calc(100vh - 64px); }
      .sidebar__header {
        margin-top: 0; }
      .sidebar__summary {
        max-height: fit-content; }
      .sidebar__close {
        display: none; } }

.is-hidden {
  display: none; }

.summary {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  background-color: #1e2325; }
  .summary__header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1.2em;
    cursor: pointer; }
  .summary__title, .summary__price {
    font-family: "AlteDIN1451Mittel", sans-serif;
    font-size: 14px; }
  .summary__title {
    flex-shrink: 1;
    margin: 0 10px;
    text-transform: uppercase; }
  .summary__price {
    margin: 0;
    margin-left: auto;
    color: #fcc439;
    white-space: nowrap; }
  .summary__open {
    width: 0;
    height: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-right: 6px solid transparent;
    border-bottom: 9px solid #fcc439;
    border-left: 6px solid transparent;
    outline: none;
    transition: border .3s ease-in-out; }
    .summary__open--active {
      border-top: 9px solid #fcc439;
      border-bottom: none; }
  .summary__actions {
    display: flex;
    justify-content: flex-start;
    padding: 0 1.2em 1.2em; }
  .summary__action {
    flex: 0 0 calc(50% - 5px); }
    .summary__action--dark:before {
      background-color: #1e2325; }
  .summary__action + .summary__action {
    margin-left: 10px; }
  @media only screen and (min-width: 1160px) {
    .summary__header {
      pointer-events: none;
      cursor: auto; }
    .summary__title, .summary__price {
      font-size: 16px; }
    .summary__title {
      margin-left: 0; }
    .summary__open {
      display: none; } }

.sharing {
  width: 100%; }
  .sharing__header {
    margin-bottom: 1em; }
  .sharing__title, .sharing__label, .sharing__text {
    text-align: left; }
  .sharing__title {
    margin-bottom: 1em;
    font-family: "AlteDIN1451Mittel", sans-serif;
    font-size: 24px; }
  .sharing__label {
    margin: 0;
    margin-bottom: .8em;
    font-family: "AlteDIN1451Mittel", sans-serif;
    font-size: 13px;
    color: #717f86; }
  .sharing__panel {
    position: relative;
    font-family: "AlteDIN1451Mittel", sans-serif;
    font-size: 13px;
    color: #d8d8d8;
    background-color: rgba(216, 216, 216, 0.06);
    border-radius: 3px; }
  .sharing__item + .sharing__item {
    margin-top: 2em; }
  .sharing__action {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    font-size: 10px; }
  .sharing__text {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1em;
    padding-right: calc(1em + 100px);
    overflow: hidden;
    font-family: "AlteDIN1451Mittel", sans-serif;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: none;
    outline: none; }
  .sharing__body {
    position: relative;
    padding-top: 1em; }
    .sharing__body:before {
      position: absolute;
      bottom: -28px;
      left: calc((100% - (100% + 2 * 28px)) / 2);
      width: calc(100% + 2 * 28px);
      height: calc(100% + 28px);
      background-color: rgba(56, 63, 67, 0.35);
      content: ''; }
  .sharing__tabs {
    display: flex;
    justify-content: space-between;
    margin: 1em 0 0; }
  .sharing__tab {
    position: relative;
    z-index: 10;
    flex: 0 1 auto;
    width: 100%;
    padding: 1em;
    font-size: 13px;
    color: #717f86;
    cursor: pointer; }
    .sharing__tab:before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: transparent;
      border-radius: 3px;
      content: '';
      transform: scaleY(0);
      transition: transform .3s ease-in-out;
      transform-origin: 100% 100%; }
    .sharing__tab--active {
      color: #d8d8d8; }
      .sharing__tab--active:before {
        background: linear-gradient(90deg, #3dc564, #2d954b);
        transform: scaleY(1); }
  .sharing__content, .sharing__code {
    border-radius: 3px; }
  .sharing__content {
    position: relative;
    font-size: 13px;
    line-height: 1.5;
    color: #717f86;
    text-align: left; }
  .sharing__code {
    width: 100%;
    height: 150px;
    margin-bottom: 1em;
    padding: 1em;
    font-family: Courier, Arial, Helvetica, sans-serif;
    background-color: rgba(216, 216, 216, 0.06);
    border: none;
    outline: none;
    resize: none; }

.thumbnail {
  position: relative;
  height: 57px;
  max-width: 100%;
  margin-right: auto;
  padding-right: 0.5em;
  padding-left: calc(57px + 0.5em);
  color: #fff; }
  .thumbnail__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 57px;
    height: 57px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 3px; }
  .thumbnail__price {
    margin: 0;
    font-size: 13px;
    color: #fcc439;
    text-align: left;
    white-space: nowrap; }
  .thumbnail__title {
    max-height: 2.4em;
    overflow: hidden;
    line-height: 1.2em;
    margin: 0 0 0.5em 0;
    font-family: "Inter-UI", sans-serif;
    font-size: 13px;
    line-height: 1.2;
    text-align: left; }
  .thumbnail--large {
    margin: 2em 0; }
  @media only screen and (min-width: 768px) {
    .thumbnail--large {
      height: 114px;
      padding-left: calc(114px + 0.5em); }
      .thumbnail--large .thumbnail__image {
        width: 114px;
        height: 114px; }
      .thumbnail--large .thumbnail__title {
        max-height: 4.5em;
        overflow: hidden;
        line-height: 1.5em;
        line-height: 1.5; } }

.depiction {
  width: 100%;
  color: #fff; }
  .depiction__details + .depiction__details {
    margin-top: 2em; }
  .depiction__label {
    margin-bottom: 1em;
    font-size: 13px;
    color: #717f86;
    text-align: left; }
  .depiction__list {
    margin: 0;
    padding: 0;
    list-style: none; }
  .depiction__iconSelected {
    position: absolute;
    top: calc((100% - 15px - 5px) / 2);
    left: 0.5em;
    width: 15px;
    color: #383f43; }
    .depiction__iconSelected .selected-icon {
      opacity: 0; }
  .depiction__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.5em;
    padding-left: calc(1.5em + 15px);
    cursor: pointer;
    border: 1px solid #383f43;
    border-style: dashed;
    border-radius: 3px; }
    .depiction__item:active {
      transform: translateY(2px); }
  .depiction__item + .depiction__item {
    margin-top: 0.5em; }
  .depiction__item--selected {
    background-color: #383f43; }
    .depiction__item--selected .depiction__iconSelected {
      color: #2d954b;
      opacity: 1;
      stroke-dasharray: 0; }
      .depiction__item--selected .depiction__iconSelected .selected-icon {
        opacity: 1; }
  .depiction__text, .depiction__link {
    margin: 0;
    font-size: 13px;
    color: #fff;
    text-align: left; }
  .depiction__link {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
    font-family: inherit;
    color: inherit; }
    .depiction__link:hover {
      text-decoration: underline; }
  .depiction__icon {
    flex-shrink: 0;
    width: 15px;
    margin: 0;
    margin-bottom: 2px;
    margin-left: .7em; }
  .depiction__text--color {
    color: #fcc439; }
  .depiction__text--broken {
    line-height: 1.7; }
  .depiction__price {
    display: flex;
    align-items: center;
    margin: 0; }
  .depiction__hint {
    order: 1;
    margin: 0;
    margin-left: 1em;
    padding: .7em .7em .6em;
    font-size: .55em;
    color: #717f86;
    background-color: rgba(30, 35, 37, 0.4);
    border-radius: 3px; }
  .depiction__buy {
    margin-right: 1em;
    padding: .7em .7em .6em;
    font-size: .55em;
    color: #fff;
    background-color: #3dc564;
    border-radius: 3px; }
  @media only screen and (min-width: 768px) {
    .depiction__item {
      align-items: center;
      flex-direction: row; }
    .depiction__link {
      flex: 0 0 auto;
      margin-bottom: 0;
      line-height: 1.4; }
    .depiction__text--broken {
      column-count: 2;
      column-fill: balance;
      column-gap: 30px;
      column-rule: 1px solid #383f43; }
    .depiction__hint {
      order: initial;
      margin-right: 1em; } }

.dropdown {
  position: relative;
  min-width: 80px; }
  .dropdown__button {
    position: relative;
    width: 100%;
    padding-right: 16px;
    border: 1px solid transparent;
    border-bottom: 0; }
  .dropdown__menu {
    position: absolute;
    width: 100%;
    margin: 0;
    overflow: hidden;
    text-align: center;
    list-style: none;
    border: 1px solid transparent;
    border-top: 0;
    border-radius: 0 0 2px 2px;
    visibility: hidden; }
  .dropdown__item {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 1px;
    color: #d8d8d8;
    background: #262c2f; }
    @media only screen and (min-width: 1160px) {
      .dropdown__item-builder {
        display: none; } }
  .dropdown__link {
    color: #d8d8d8; }
  .dropdown__arrow {
    position: absolute;
    top: 0;
    right: 8px;
    display: block;
    width: 16px;
    height: 100%; }
    .dropdown__arrow:before, .dropdown__arrow:after {
      position: absolute;
      top: 50%;
      width: 8px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      content: '';
      transition: all .3s ease-in-out; }
    .dropdown__arrow:before {
      right: calc(50% - 1.414px);
      transform: rotate(45deg); }
    .dropdown__arrow:after {
      left: calc(50% - 1.414px);
      transform: rotate(-45deg); }
  .dropdown__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: 0;
    visibility: hidden; }
  .dropdown--open .dropdown__overlay {
    visibility: visible; }
  .dropdown--open .dropdown__menu {
    border-color: rgba(144, 146, 147, 0.2);
    visibility: visible; }
  .dropdown--open .dropdown__button {
    border-color: rgba(144, 146, 147, 0.2); }
  .dropdown--open .dropdown__arrow:before {
    transform: rotate(-45deg); }
  .dropdown--open .dropdown__arrow:after {
    transform: rotate(45deg); }

.logo--desktop {
  display: none; }

@media only screen and (min-width: 1160px) {
  .logo--desktop {
    display: block; }
  .logo--mobile {
    display: none; } }

.footer--builder__links {
  padding: 24px 0;
  background-color: #262c2f; }
  .footer--builder__links-wrapper {
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    max-width: 1160px;
    padding: 0; }
    .footer--builder__links-wrapper:before, .footer--builder__links-wrapper:after {
      display: table;
      content: ' '; }
    .footer--builder__links-wrapper:after {
      clear: both; }

.footer--builder__link {
  margin-right: 15px;
  margin-bottom: 5px;
  color: #909293; }

.footer--builder__copyright {
  width: 100%;
  margin-top: 5px;
  color: #909293; }

@media only screen and (min-width: 768px) {
  .footer--builder {
    padding-top: 32px; }
    .footer--builder__link {
      margin-bottom: 0; }
    .footer--builder__copyright {
      width: auto;
      margin-top: 0;
      margin-left: auto; } }

.auth-page {
  position: relative;
  max-width: 100%;
  padding: 0 16px;
  text-align: center; }
  .auth-page__bg {
    position: relative;
    display: none;
    min-height: calc(100vh - 64px);
    background-image: url("../../../images/login-be579c677374bdd6c5ea8c501b477a2e.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }
  .auth-page__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    max-width: 480px; }
  .auth-page__contact {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 60px 0; }
  .auth-page__contact-button {
    margin-top: 12px; }
  .auth-page__contact-text {
    font-size: 20px;
    color: #d8d8d8; }
  .auth-page__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-top: 16px; }
  @media only screen and (min-width: 768px) {
    .auth-page {
      margin-right: 0;
      margin-left: 0;
      padding-right: 0;
      padding-left: 0;
      overflow: hidden; }
      .auth-page__contact {
        flex-direction: row; }
      .auth-page__contact-button {
        margin-top: 0;
        margin-left: 12px; }
      .auth-page__wrapper {
        overflow: hidden; }
        .auth-page__wrapper:before, .auth-page__wrapper:after {
          position: absolute;
          bottom: 0;
          display: block;
          transform: scale(0.5); }
        .auth-page__wrapper:before {
          left: 0;
          content: url("/images/parts_left-bb06c1e9b7f9a19844234a6694161346.png");
          transform-origin: bottom left; }
        .auth-page__wrapper:after {
          right: -36px;
          content: url("/images/parts_right-8508189d88e93f7f0e56d925408fdc03.png");
          transform-origin: bottom right; } }
  @media only screen and (min-width: 1160px) {
    .auth-page {
      margin-right: -24px;
      margin-left: -24px;
      display: flex;
      flex-flow: row wrap;
      margin-right: 0;
      margin-left: 0;
      padding-top: 64px;
      padding-right: 0;
      padding-left: 0; }
      .auth-page__title {
        margin-top: 0; }
      .auth-page__bg {
        padding-right: 24px;
        padding-left: 24px;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
        display: block; }
      .auth-page__wrapper {
        padding-right: 24px;
        padding-left: 24px;
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
        align-self: center;
        min-height: calc(100vh - 64px); }
      .auth-page__content {
        padding-top: 64px; } }

.replace-modal__icon {
  padding: 10px 0;
  color: #909293;
  transform: rotate(-90deg); }

.build {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 1440px;
  margin: 64px auto 0; }
  .build__content {
    flex-grow: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 1.2em; }
  .build__heading {
    padding-bottom: 1.8em; }
  .build__section {
    color: #fff; }
  .build__section + .build__section {
    margin-top: 5em; }
  .build__flex-list {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -10px;
    margin-bottom: -10px;
    padding: 0;
    list-style: none; }
    @media only screen and (min-width: 1px) {
      .build__flex-list {
        align-items: stretch;
        flex-flow: row wrap;
        justify-content: flex-start;
        margin-right: -10px;
        margin-left: -10px; } }
  .build__item {
    flex: 0 0 calc((100% - 1 * 20px) / 1);
    width: 100%;
    max-width: calc((100% - 1 * 20px) / 1);
    margin: 20px 10px; }
  @media only screen and (min-width: 768px) {
    .build__item {
      flex: 0 0 calc((100% - 2 * 20px) / 2);
      width: 100%;
      max-width: calc((100% - 2 * 20px) / 2);
      margin: 20px 10px; }
      .build__item--solo {
        flex: 0 0 calc((100% - 1 * 20px) / 1);
        width: 100%;
        max-width: calc((100% - 1 * 20px) / 1);
        margin: 20px 10px; } }
  @media only screen and (max-width: 1160px) {
    .build__content {
      padding-bottom: calc(1.2em + 120px); } }
  @media only screen and (min-width: 1160px) {
    .build {
      padding-right: 400px; } }

.search__link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 30px;
  font-size: 14px;
  color: #717f86;
  letter-spacing: .5px;
  cursor: pointer;
  transition: color .3s ease-in-out; }
  .search__link:hover {
    color: #2d954b; }
    .search__link:hover .search__arrowIcon,
    .search__link:hover .search__arrowIcon:before,
    .search__link:hover .search__arrowIcon:after {
      background-color: #2d954b; }

.search__arrowIcon {
  position: relative;
  display: inline-block;
  width: 16px;
  margin-right: 5px;
  margin-left: 2px; }
  .search__arrowIcon, .search__arrowIcon:before, .search__arrowIcon:after {
    background-color: #717f86;
    height: 1px;
    transition: background-color .3s ease-in-out; }
  .search__arrowIcon:before, .search__arrowIcon:after {
    position: absolute;
    left: -2px;
    width: 10px;
    background-color: #717f86;
    content: ''; }
  .search__arrowIcon:before {
    transform: rotate(45deg);
    top: 3px; }
  .search__arrowIcon:after {
    transform: rotate(-45deg);
    top: -3px; }

.search__title, .search__categoryName {
  font-size: 24px;
  color: #d8d8d8; }

.search__categoryName {
  font-family: inherit;
  text-transform: capitalize; }

.search__field {
  position: relative;
  margin: 20px 0; }
  .search__field--failed .search__input > input {
    border: 1px solid rgba(238, 85, 101, 0.5);
    background-color: rgba(238, 85, 101, 0.06); }

.search__input > input {
  padding-left: 40px;
  border: 1px solid transparent;
  transition: border-color .2s ease-in-out; }

.search__label {
  position: absolute;
  top: calc((40px - 30px) / 2);
  left: calc((40px - 30px) / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px; }

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

.search__item + .search__item {
  margin-top: 10px; }

.search__failed {
  padding-top: 40px;
  text-align: center; }

.search__text {
  padding: 10px 0;
  color: #717f86;
  font-weight: 400; }

.collapsible {
  color: #fff;
  border-radius: 3px;
  transition: background-color .4s ease; }
  .collapsible__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5em;
    cursor: pointer; }
  .collapsible__preview {
    max-width: 85%;
    flex-shrink: 1; }
  .collapsible__button {
    display: none;
    visibility: hidden; }
  .collapsible__arrow {
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: 1em;
    padding: 0;
    cursor: pointer;
    border: none;
    outline: none; }
  .collapsible__icon {
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    border-top: 9px solid #909293;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    outline: none;
    transition: border .3s ease-in-out; }
  .collapsible__body {
    height: 0;
    overflow: hidden;
    transition: height .3s ease-in-out; }
  .collapsible__body-content {
    padding: 1em;
    padding-left: calc(1em + 57px); }
  .collapsible__action {
    margin-top: 2em; }
    .collapsible__action a {
      color: inherit; }
  .collapsible:hover,
  .collapsible:hover .collapsible__button:before {
    background-color: #2f3538; }
  .collapsible--is-open {
    background-color: #2f3538;
    box-shadow: 0 20px 30px 0 rgba(30, 35, 37, 0.8); }
    .collapsible--is-open .collapsible__icon {
      border-top: none;
      border-bottom: 9px solid #909293; }
    .collapsible--is-open .collapsible__button {
      visibility: hidden;
      opacity: 0; }
    .collapsible--is-open .collapsible__action:before {
      background-color: #2f3538; }
  .collapsible + .collapsible {
    margin-top: 0.5em; }
  @media only screen and (min-width: 768px) {
    .collapsible__preview {
      max-width: 70%; }
    .collapsible__body-content {
      padding-right: calc(1em + 57px); }
    .collapsible__button {
      display: block;
      visibility: visible;
      flex-shrink: 0;
      transition: visibility .1s ease-in-out, opacity .1s ease-in-out; }
    .collapsible__actions {
      flex-direction: row; } }

.login__title {
  margin-top: calc(64px + 48px); }

.login__text {
  margin-top: 16px;
  color: #717f86; }

.login__form, .login__button {
  margin: 48px auto; }

.login__form {
  width: 100%; }

.login__link {
  display: block;
  width: 100%;
  color: #717f86; }
  .login__link--register {
    text-align: center; }
  .login__link--forgot {
    margin-top: 16px;
    text-align: right; }

.login__input + .login__input {
  margin-top: 24px; }

@media only screen and (min-width: 768px) {
  .login__form {
    max-width: 480px; } }

@media only screen and (min-width: 1160px) {
  .login__title {
    margin-top: 0; } }

.register__error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 51px; }

.register__error {
  color: #ee5565; }

.register__success {
  color: #3dc564; }

.register__title {
  margin-top: calc(64px + 48px); }

.register__text {
  margin-top: 16px;
  color: #717f86; }

.register__form, .register__button {
  margin: 48px auto; }

.register__form {
  width: 100%; }

.register__input + .register__input {
  margin-top: 24px; }

@media only screen and (min-width: 768px) {
  .register__form {
    max-width: 480px; } }

@media only screen and (min-width: 1160px) {
  .register__title {
    margin-top: 0; } }

.reset__error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 51px; }

.reset__error {
  color: #ee5565; }

.reset__success {
  color: #3dc564; }

.reset__title {
  margin-top: calc(64px + 48px); }

.reset__text {
  margin-top: 16px;
  color: #717f86; }

.reset__error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 51px; }

.reset__form, .reset__button {
  margin: 48px auto; }

.reset__form {
  width: 100%; }

.reset__input + .reset__input {
  margin-top: 24px; }

@media only screen and (min-width: 768px) {
  .reset__form {
    max-width: 480px; } }

@media only screen and (min-width: 1160px) {
  .reset__title {
    margin-top: 0; } }

.confirm__error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 51px; }

.confirm__error {
  color: #ee5565; }

.confirm__success {
  color: #3dc564; }

.confirm__title {
  margin-top: calc(64px + 48px); }

.confirm__container, .confirm__button {
  margin: 48px auto; }

.confirm__container {
  width: 100%; }

@media only screen and (min-width: 768px) {
  .confirm__container {
    max-width: 480px; } }

@media only screen and (min-width: 1160px) {
  .confirm__title {
    margin-top: 0; } }

.profile__wrapper {
  padding-right: 24px;
  padding-left: 24px;
  flex: 0 0 100%;
  max-width: 100%;
  margin: auto; }

@media only screen and (min-width: 768px) {
  .profile__wrapper {
    padding-right: 24px;
    padding-left: 24px;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; } }

.profile__form {
  display: flex;
  flex-wrap: wrap; }

.profile__input {
  flex: 100%;
  padding: 12px; }
  @media only screen and (min-width: 768px) {
    .profile__input {
      flex: 50%; } }

.profile__title {
  margin-top: 80px; }

.features {
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1160px;
  margin-top: 50px; }
  .features:before, .features:after {
    display: table;
    content: ' '; }
  .features:after {
    clear: both; }
  .features__title {
    text-align: center; }
  .features__row {
    margin-right: -24px;
    margin-left: -24px;
    display: flex;
    flex-flow: row wrap; }
  .features__column {
    padding-right: 24px;
    padding-left: 24px;
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 50px; }
  @media only screen and (min-width: 768px) {
    .features__column {
      padding-right: 24px;
      padding-left: 24px;
      flex: 0 0 50%;
      max-width: 50%; } }
  @media only screen and (min-width: 1160px) {
    .features {
      margin-top: 120px; } }

.footer {
  margin-top: 50px;
  padding-top: 24px;
  background: linear-gradient(90deg, #3dc564, #2d954b); }
  .footer__title {
    text-align: center; }
  .footer__container {
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    padding-bottom: 24px; }
    .footer__container:before, .footer__container:after {
      display: table;
      content: ' '; }
    .footer__container:after {
      clear: both; }
  .footer__input {
    margin-top: 24px; }
  .footer__input + .footer__button {
    margin-top: 16px; }
  .footer__links {
    padding: 24px 0;
    background-color: #262c2f; }
    .footer__links-wrapper {
      padding-right: 24px;
      padding-left: 24px;
      margin-right: auto;
      margin-left: auto;
      display: flex;
      flex-wrap: wrap;
      max-width: 1160px; }
      .footer__links-wrapper:before, .footer__links-wrapper:after {
        display: table;
        content: ' '; }
      .footer__links-wrapper:after {
        clear: both; }
  .footer__link {
    margin-right: 15px;
    margin-bottom: 5px;
    color: #909293; }
  .footer__copyright {
    width: 100%;
    margin-top: 5px;
    color: #909293; }
  @media only screen and (min-width: 768px) {
    .footer {
      padding-top: 32px; }
      .footer__title {
        flex: 1 0 100%; }
      .footer__container {
        align-items: center;
        flex-flow: row wrap;
        justify-content: center;
        padding-bottom: 32px; }
      .footer__input {
        flex: 0 0 30%; }
      .footer__input + .footer__button {
        margin-top: 24px;
        margin-left: 8px; }
      .footer__link {
        margin-bottom: 0; }
      .footer__copyright {
        width: auto;
        margin-top: 0;
        margin-left: auto; } }

.hero {
  position: relative;
  padding-top: 100px;
  padding-bottom: 50px;
  overflow: hidden;
  text-align: center; }
  .hero__content {
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto; }
    .hero__content:before, .hero__content:after {
      display: table;
      content: ' '; }
    .hero__content:after {
      clear: both; }
  .hero__bg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    transform: translate(35%, 28%) rotate(-14deg) scale(0.4); }
  .hero__text {
    color: #fff; }
  .hero__picture {
    display: flex;
    justify-content: center;
    margin-top: 30px; }
  .hero__img {
    width: 100%;
    height: 100%; }
  .hero__label {
    margin-top: 24px;
    font-family: "Inter-UI", sans-serif;
    font-size: 14px;
    color: #909293;
    text-align: center; }
  .hero__form {
    display: flex;
    flex-direction: column;
    max-width: 1440px; }
  .hero__input {
    margin-top: 24px; }
  .hero__input + .hero__button {
    margin-top: 16px; }
  @media only screen and (min-width: 768px) {
    .hero {
      padding-bottom: 0; }
      .hero__content {
        flex-shrink: 0;
        max-width: 420px; }
      .hero__bg {
        transform: translate(25%, 15%) rotate(-14deg) scale(0.6); } }
  @media only screen and (min-width: 768px) and (max-width: 1159px) {
    .hero__picture {
      padding: 100px; } }
  @media only screen and (min-width: 1160px) {
    .hero {
      display: flex;
      align-items: center;
      text-align: left; }
      .hero__bg {
        top: 0;
        bottom: auto;
        transform: translate(15%, -35%) rotate(-14deg); }
      .hero__content {
        margin-left: 150px; }
      .hero__picture {
        margin-top: 0; }
      .hero__img {
        width: 800px; }
      .hero__label {
        text-align: left; }
      .hero__form {
        align-items: center;
        flex-flow: row wrap;
        justify-content: flex-start; }
      .hero__input + .hero__button {
        margin-top: 24px;
        margin-left: 8px; } }
  @media only screen and (min-width: 1440px) {
    .hero {
      padding-right: 24px;
      padding-left: 24px;
      margin-right: auto;
      margin-left: auto;
      justify-content: center;
      max-width: 1440px; }
      .hero:before, .hero:after {
        display: table;
        content: ' '; }
      .hero:after {
        clear: both; }
      .hero__bg {
        transform: translate(0, -35%) rotate(-14deg); } }

.nav {
  position: absolute;
  z-index: 2;
  width: 100%; }
  .nav__container {
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    max-width: 1440px;
    padding: 18px; }
    .nav__container:before, .nav__container:after {
      display: table;
      content: ' '; }
    .nav__container:after {
      clear: both; }
  .nav__link {
    display: flex;
    align-items: center;
    max-width: 200px;
    margin-left: auto;
    font-family: "Inter-UI", sans-serif;
    font-size: 14px;
    color: #fff; }
    .nav__link:hover {
      color: #909293; }
  .nav__link-text {
    margin-left: 5px; }
  @media only screen and (min-width: 768px) {
    .nav__link {
      max-width: initial; } }

.product-card {
  text-align: center; }
  .product-card__figure {
    margin: 0; }
  .product-card__content {
    max-width: 320px;
    margin: 16px auto 0 auto; }
  .product-card__text {
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
    color: #909293; }
  @media only screen and (min-width: 1160px) {
    .product-card {
      display: flex;
      text-align: initial; }
      .product-card__content {
        max-width: 400px;
        margin: 24px auto 0 24px; } }

.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px; }
  .error__title, .error__text {
    text-align: center; }
  .error__text {
    margin-bottom: 3em;
    color: #fff; }
  .error__image {
    position: relative;
    margin-top: -20px; }
  .error__image-text {
    font-size: calc(230px + (450 - 230) * ((100vw - 500px) / (1440 - 500)));
    margin: 0;
    font-family: "AlteDIN1451Mittel", sans-serif;
    background: linear-gradient(to right, rgba(45, 149, 75, 0.05), rgba(45, 149, 75, 0.25) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
    opacity: .25;
    letter-spacing: 5px;
    animation-name: lightbulb;
    animation-duration: 2.3s;
    animation-fill-mode: forwards;
    animation-delay: 1s; }
  .error__icon {
    position: absolute;
    top: calc((100% - 70%) / 2);
    left: calc((100% - 80%) / 2);
    width: 100%;
    max-width: 80%; }
  @media only screen and (min-width: 768px) {
    .error__image {
      margin-top: -5em;
      margin-bottom: -2em; } }

@keyframes lightbulb {
  0% {
    opacity: .9; }
  5% {
    opacity: .5; }
  20% {
    opacity: 1; }
  40% {
    opacity: .5; }
  60% {
    opacity: .7; }
  100% {
    opacity: 1; } }

.list__wrapper {
  flex-grow: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 1.2em; }
  .list__wrapper--title {
    overflow: hidden;
    text-overflow: ellipsis; }
    @media only screen and (min-width: 1px) {
      .list__wrapper--title {
        padding-right: 24px;
        padding-left: 24px;
        flex: 0 0 66.66667%;
        max-width: 66.66667%; } }
    @media only screen and (min-width: 768px) {
      .list__wrapper--title {
        padding-right: 24px;
        padding-left: 24px;
        flex: 0 0 58.33333%;
        max-width: 58.33333%; } }
  @media only screen and (min-width: 1px) {
    .list__wrapper--date {
      padding-right: 24px;
      padding-left: 24px;
      flex: 0 0 33.33333%;
      max-width: 33.33333%;
      text-align: right; } }
  @media only screen and (min-width: 768px) {
    .list__wrapper--date {
      padding-right: 24px;
      padding-left: 24px;
      flex: 0 0 16.66667%;
      max-width: 16.66667%;
      text-align: left; } }
  @media only screen and (min-width: 1px) {
    .list__wrapper--action {
      padding-right: 24px;
      padding-left: 24px;
      flex: 0 0 100%;
      max-width: 100%; } }
  @media only screen and (min-width: 768px) {
    .list__wrapper--action {
      padding-right: 24px;
      padding-left: 24px;
      flex: 0 0 25%;
      max-width: 25%; } }

.list__title {
  margin-top: 80px; }

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

.list__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 16px;
  padding: 19px 0;
  color: #717f86;
  background-color: #383f43;
  border-radius: 4px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); }
  .list__item-title {
    font-size: 16px;
    color: #f7f7f7;
    cursor: pointer; }
  .list__item-info {
    font-size: 13px; }
  .list__item-button {
    color: #717f86;
    background: none; }
    .list__item-button:hover {
      color: #fff; }
  .list__item-action {
    display: flex;
    align-items: center;
    justify-content: flex-end; }

.list__empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 40px); }
  .list__empty-title {
    margin-top: 40px;
    margin-bottom: 20px; }

.page {
  margin-top: 90px;
  margin-bottom: 90px;
  line-height: 1.5;
  color: #d8d8d8; }
  .page a {
    color: #308be6;
    text-decoration: none; }
  .page__wrapper {
    padding-right: 24px;
    padding-left: 24px;
    flex: 0 0 100%;
    max-width: 100%;
    margin: auto; }
  @media only screen and (min-width: 768px) {
    .page__wrapper {
      padding-right: 24px;
      padding-left: 24px;
      flex: 0 0 66.66667%;
      max-width: 66.66667%; } }

.ember-modal-dialog {
  z-index: 51;
  position: fixed; }
  .ember-modal-dialog.emd-in-place {
    position: static; }

.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center .ember-modal-dialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center; }

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center .ember-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center; }

.ember-modal-wrapper.emd-animatable .ember-modal-dialog {
  position: relative; }

.ember-modal-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50; }

.ember-modal-dialog {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 10px #222;
  padding: 10px; }

.ember-modal-overlay.translucent {
  background-color: rgba(128, 128, 128, 0.77); }

a {
  text-decoration: none; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #262c2f; }

.container {
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1440px; }
  .container:before, .container:after {
    display: table;
    content: ' '; }
  .container:after {
    clear: both; }

.no-scroll {
  max-height: 100vh;
  overflow: hidden; }

@keyframes spinner {
  to {
    transform: rotate(360deg); } }

.is-loading {
  color: transparent;
  user-select: none; }
  .is-loading:after {
    position: absolute;
    top: calc((100% - 20px) / 2);
    left: calc((100% - 20px) / 2);
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-top-color: #262c2f;
    border-radius: 50%;
    content: '';
    animation: spinner .6s linear infinite; }
  .is-loading:hover {
    color: transparent; }

.sidebar__body::-webkit-scrollbar {
  display: none; }