@charset "UTF-8";
particle {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
}

.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
/* Generated with Bounce.js. Edit at http://goo.gl/e0KKqx */
@keyframes bounce {
  0% {
    transform: matrix3d(0.25, 0, 0, 0, 0, 0.25, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.33% {
    transform: matrix3d(0.44279, 0, 0, 0, 0, 0.52903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.66% {
    transform: matrix3d(0.7241, 0, 0, 0, 0, 0.86036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10% {
    transform: matrix3d(0.99478, 0, 0, 0, 0, 1.10839, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.33% {
    transform: matrix3d(1.1686, 0, 0, 0, 0, 1.22026, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  16.66% {
    transform: matrix3d(1.22125, 0, 0, 0, 0, 1.21133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  20% {
    transform: matrix3d(1.18477, 0, 0, 0, 0, 1.13271, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  23.33% {
    transform: matrix3d(1.11144, 0, 0, 0, 0, 1.03935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  26.66% {
    transform: matrix3d(1.04277, 0, 0, 0, 0, 0.96946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  30% {
    transform: matrix3d(0.99829, 0, 0, 0, 0, 0.93794, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  33.33% {
    transform: matrix3d(0.97936, 0, 0, 0, 0, 0.94045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.66% {
    transform: matrix3d(0.97821, 0, 0, 0, 0, 0.96261, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40% {
    transform: matrix3d(0.98527, 0, 0, 0, 0, 0.98891, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.33% {
    transform: matrix3d(0.99324, 0, 0, 0, 0, 1.00861, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  46.66% {
    transform: matrix3d(0.99834, 0, 0, 0, 0, 1.01749, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  50% {
    transform: matrix3d(0.99987, 0, 0, 0, 0, 1.01678, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  53.33% {
    transform: matrix3d(0.99904, 0, 0, 0, 0, 1.01054, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.66% {
    transform: matrix3d(0.99756, 0, 0, 0, 0, 1.00312, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  60% {
    transform: matrix3d(0.99677, 0, 0, 0, 0, 0.99758, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  63.33% {
    transform: matrix3d(0.99714, 0, 0, 0, 0, 0.99507, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  66.66% {
    transform: matrix3d(0.99842, 0, 0, 0, 0, 0.99527, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  70% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.99703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  73.33% {
    transform: matrix3d(1.00127, 0, 0, 0, 0, 0.99912, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  76.66% {
    transform: matrix3d(1.0019, 0, 0, 0, 0, 1.00068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  80% {
    transform: matrix3d(1.00185, 0, 0, 0, 0, 1.00139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  83.33% {
    transform: matrix3d(1.00133, 0, 0, 0, 0, 1.00133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  86.666667% {
    transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  90% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.00025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  93.33% {
    transform: matrix3d(0.99959, 0, 0, 0, 0, 0.99981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  96.66% {
    transform: matrix3d(0.99944, 0, 0, 0, 0, 0.99961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
body {
  --accent-color: #20e4a0;
  --bg-color: #f2f2f2;
  --text-color: #0e0d1f;
  --inactive-color: #888;
  --link-color: #0e0d1f;
  --hover-color: var(--accent-color);
  --card-color: #fff;
}

body.dark {
  --accent-color: #20e4a0;
  --bg-color: #222222;
  --text-color: #fff;
  --inactive-color: #b1b1b9;
  --link-color: #fff;
  --hover-color: var(--accent-color);
  --card-color: #111;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-index-overlay);
  background: var(--text-color);
  background-color: rgba(40, 40, 40, 0.9);
}

.overlay .close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.overlay .close i {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  color: #fff;
  border-radius: 100px;
  transition: var(--transition-fast);
}

.overlay .close:hover i {
  background-color: rgba(0, 0, 0, 0.25);
}

.overlay .close i::after {
  pointer-events: none;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  padding-top: 0;
  transform: translateX(-50%) translateY(-50%);
  width: 40px;
  height: 40px;
  font-weight: 100;
  font-size: 32px;
  font-family: "Helvetica Neue";
  content: "×";
  color: rgba(255, 255, 255, 0.5);
  transition: var(--transition-fast);
}

.overlay .close:hover i::after {
  color: #fff;
}

/*
:root {
  --desktop-sliver: 120px;
    @include mobile {

        --desktop-sliver: 0px;
    }
}
*/
.modal {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out 0s;
}

.modal.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal {
  --card-color: #fff;
  --text-color: #000;
  --modal-padding-vertical: 20px;
  --modal-padding-horizontal: 40px;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-index-modal);
  width: 1000px;
  max-width: calc(100% - 60px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas: "header" "content" "footer";
  background: var(--card-color);
  color: var(--text-color);
  border-radius: 6px;
  padding: 0px;
  max-height: min(700px, calc(100% - 100px));
  margin: 0 auto;
  left: 0;
  right: 0;
  right: var(--desktop-sliver, 0);
  box-shadow: var(--floating-box-shadow);
  /*
  @include mobile {
   --modal-padding-horizontal: 20px;
      top: 0;
   max-height: calc(100%);
   max-width: calc(100% - var(--desktop-sliver, 0));
      grid-template-rows: 60px auto;
      grid-template-areas:
          "header footer"
          //"nav nav"
          "content content";
      border-radius: 0;
  }
  */
}

.modal.large {
  height: calc(100vh - 40px);
  /*
  @include mobile {
   height: calc(100vh + 1px); // magic number
  }
  */
}

.modal .modal-header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: header;
  padding: var(--modal-padding-vertical) var(--modal-padding-horizontal) 10px var(--modal-padding-horizontal);
  xxborder: 1px solid #c00;
  xxborder-radius: 6px 6px 0 0;
}
.modal .modal-header h1 {
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  font-family: "Calibre-Semibold";
  margin: 0;
  margin-right: 10px;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /*
  @include mobile {
      font-size: 20px;
  }
  */
}
.modal .modal-header.has-divider {
  box-shadow: inset 0 -1px 0 #ddd;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .modal .modal-header.has-divider {
    box-shadow: inset 0 -0.5px 0 #ddd;
  }
}

.modal .modal-nav {
  grid-area: nav;
  padding: 10px var(--modal-padding-horizontal);
  box-shadow: inset 0 -1px 0 #ddd;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .modal .modal-nav {
    padding: 0 var(--modal-padding-horizontal);
    box-shadow: inset 0 -0.5px 0 #ddd;
  }
}

.modal .modal-content {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: content;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--modal-padding-vertical) var(--modal-padding-horizontal);
  padding: 20px var(--modal-padding-horizontal) var(--modal-padding-vertical) var(--modal-padding-horizontal);
}

.modal .modal-content h3 {
  font-weight: normal;
  font-size: 18px;
  font-family: "Calibre-Medium";
}

.modal .modal-footer {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: footer;
  display: flex;
  padding: var(--modal-padding-vertical) var(--modal-padding-horizontal);
  box-shadow: inset 0 1px 0 #ddd;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .modal .modal-footer {
    box-shadow: inset 0 0.5px 0 #ddd;
  }
}
.modal .modal-footer a {
  color: #000;
}
.modal .modal-footer .left {
  flex: 1;
}
.modal .modal-footer .right {
  text-align: right;
  flex: 1;
}
.modal .modal-footer .right .button.primary {
  /*
  @include mobile {
    position: relative;
    top: -10px;
    margin-right: -10px;
      font-size: 14px;
      padding: 10px 22px;
  }
  */
}

input.text-field,
textarea.text-field,
.tag-input {
  --padding: 16px;
  --padding-v: 16px;
  --padding-h: 16px;
  --margin-v: 8px;
  --background: rgba(255,255,255,0.1);
  --border-radius: 3px;
  --box-shadow: inset 0 0 0 0 rgba(255,255,255,0.2);
  -webkit-appearance: none;
          appearance: none;
  font-size: var(--font-size-default);
  font-family: var(--font-family-default);
  color: var(--input-text-color);
  background: var(--background);
  border-radius: var(--border-radius);
  border: 0 solid #fff;
  box-shadow: var(--box-shadow);
  margin: var(--margin-v) 0;
  padding: var(--padding-v) var(--padding-h);
  transition: var(--transition-fast);
  width: 100%;
}
input.text-field:focus, input.text-field:focus-within,
textarea.text-field:focus,
textarea.text-field:focus-within,
.tag-input:focus,
.tag-input:focus-within {
  --background: rgba(255,255,255,0.1);
}
input.text-field::placeholder,
textarea.text-field::placeholder,
.tag-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  transition: var(--transition-fast);
}
input.text-field:focus::placeholder,
textarea.text-field:focus::placeholder,
.tag-input:focus::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
input.text-field:-webkit-autofill, input.text-field:-webkit-autofill:hover, input.text-field:-webkit-autofill:focus,
textarea.text-field:-webkit-autofill,
textarea.text-field:-webkit-autofill:hover,
textarea.text-field:-webkit-autofill:focus,
.tag-input:-webkit-autofill,
.tag-input:-webkit-autofill:hover,
.tag-input:-webkit-autofill:focus {
  z-index: 10;
  -webkit-text-fill-color: #fff;
  --box-shadow: inset 0 0 0 50px #292929;
  /* Background color hack */
  --background: rgba(255,255,255,0.1);
}
input.text-field::-webkit-resizer,
textarea.text-field::-webkit-resizer,
.tag-input::-webkit-resizer {
  background: -webkit-linear-gradient(-45deg, transparent, transparent 70%, rgba(255, 255, 255, 0.25) 70%, rgba(255, 255, 255, 0.25) 80%, transparent 80%, transparent 85%, rgba(255, 255, 255, 0.25) 85%, rgba(255, 255, 255, 0.25) 93%, transparent 93%, transparent 98%, rgba(255, 255, 255, 0.25) 98%, rgba(255, 255, 255, 0.25));
  border: 2px solid transparent;
  border-width: 0 2px 2px 0;
}

.form-label-group {
  --padding: 16px;
}
.form-label-group label {
  position: absolute;
  z-index: 2;
  font-size: inherit;
  transform: translateX(16px) translateY(24px);
  transition: var(--transition-smooth);
  transition-delay: 0;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
  color: rgba(255, 255, 255, 0.6);
}
.form-label-group input {
  position: relative;
  z-index: 1;
  transition: var(--transition-fast), padding 0s ease-in-out;
}
.form-label-group input::placeholder {
  opacity: 0;
}
.form-label-group input:-webkit-autofill, .form-label-group input:-webkit-autofill:hover, .form-label-group input:-webkit-autofill:focus {
  position: relative;
  z-index: 10;
}

.form-label-group:focus-within label {
  color: rgba(255, 255, 255, 0.3);
}

.form-label-group.has-value label {
  font-size: 11px;
  transform: translateX(var(--padding)) translateY(calc(var(--padding) - 2px));
  color: rgba(255, 255, 255, 0.6);
}
.form-label-group.has-value input {
  --delta: 8px;
  padding: calc(var(--padding) + var(--delta)) var(--padding) calc(var(--padding) - var(--delta)) var(--padding);
}
.form-label-group.has-value input:-webkit-autofill, .form-label-group.has-value input:-webkit-autofill:hover, .form-label-group.has-value input:-webkit-autofill:focus {
  position: relative;
  z-index: 1;
}

input.text-field.large,
textarea.text-field.large {
  font-size: 30px;
}

textarea.text-field {
  resize: vertical;
  min-height: 49px;
}
textarea.text-field::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}
textarea.text-field::-webkit-scrollbar:horizontal {
  width: 0px;
  height: 0px;
}
textarea.text-field::-webkit-scrollbar-corner {
  background: transparent;
}
textarea.text-field::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.075);
  -webkit-transition: var(--transition-default);
  transition: var(--transition-default);
}
textarea.text-field::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
textarea.text-field::-webkit-scrollbar-thumb:horizontal {
  width: 0px;
  height: 0px;
  background: rgba(0, 0, 0, 0);
}

input[list]::-webkit-calendar-picker-indicator {
  display: none;
}

.error-desc {
  color: var(--destructive-color);
  margin-bottom: 10px;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .checkbox,
.radio {
    --size: 20px;
    --active: var(--accent-color);
    --active-inner: #000;
    --border: #fff;
    --border-hover: var(--accent-color);
    --border-width: 2px;
    --background: transparent;
    --focus: 2px rgba(32, 228, 160, 0.3);
    --disabled: #f6f8ff;
    --disabled-inner: #e1e6f9;
    -webkit-appearance: none;
            appearance: none;
    width: var(--size);
    height: var(--size);
    display: inline-block;
    position: relative;
    vertical-align: top;
    cursor: pointer;
    border: var(--border-width) solid var(--border);
    background: var(--background);
    transition: var(--transition-smooth);
  }
  .checkbox:after,
.radio:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    opacity: 0;
    position: absolute;
    transition: var(--transition-smooth);
  }
  .checkbox:checked,
.radio:checked {
    animation: 0.8s bounce;
  }
  .checkbox:disabled,
.radio:disabled {
    cursor: default;
    filter: grayscale(1);
    opacity: 0.25;
  }
  .checkbox:disabled + label,
.radio:disabled + label {
    opacity: 0.25;
    cursor: default;
  }
  .checkbox:hover:not(:checked):not(:disabled),
.radio:hover:not(:checked):not(:disabled) {
    --border: var(--border-hover);
  }
  .checkbox:focus,
.radio:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .checkbox + label,
.radio + label {
    font-size: 14px;
    line-height: var(--size);
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .checkbox {
    border-radius: 3px;
  }
  .checkbox:after {
    width: 4px;
    height: 8px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 50%;
    top: 50%;
    margin-top: -1px;
    margin-left: 0px;
    transform: translateX(-50%) translateY(-50%) rotate(43deg);
  }
  .checkbox:checked {
    --background: var(--active);
    --border: var(--active);
  }
  .checkbox:checked:after {
    opacity: 1;
  }

  .radio {
    border-radius: 50%;
  }
  .radio:checked {
    --border: var(--active);
  }
  .radio:after {
    --dot-size: 10px;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    background: var(--accent-color);
    opacity: 0;
    transform: translateX(-50%) translateY(-50%);
  }
  .radio:checked:after {
    opacity: 1;
  }
}
body.dark .button {
  --text-color: #000;
  --bg-color: #fff;
}

.button {
  --text-color: #fff;
  --bg-color: #000;
  --bg-image: none;
  --button-padding: 0 40px;
  --height: 40px;
  --border-radius: 2px;
  --icon-size: 24px;
  display: inline-flex;
  height: var(--height);
  line-height: var(--height);
  vertical-align: middle;
  padding: var(--button-padding);
  color: var(--text-color);
  background-color: var(--bg-color);
  background-image: var(--bg-image);
  font-weight: normal;
  font-family: var(--font-family-bold);
  text-decoration: none;
  text-transform: uppercase;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
}
.button:hover {
  color: var(--text-color);
}
.button.small {
  --button-padding: 8px 16px;
  font-size: 12px;
}
.button i {
  position: relative;
  top: -1px;
  width: var(--icon-size);
  height: var(--icon-size);
  vertical-align: middle;
}
.button i svg {
  vertical-align: top;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--text-color);
}

.button {
  border-radius: var(--border-radius);
}
.button:hover {
  filter: brightness(75%);
}
.button:active {
  filter: brightness(150%);
}

body.dark .button[level=primary],
.button[level=primary] {
  --text-color: #000;
  --bg-color: #00d38f;
  --bg-image: -webkit-linear-gradient(-45deg, #4cddbd 0%, #06f286 100%);
}
body.dark .button[level=primary]:hover,
.button[level=primary]:hover {
  --text-color: #000;
  filter: brightness(120%);
}
body.dark .button[level=primary]:active,
.button[level=primary]:active {
  --text-color: #000;
  filter: brightness(150%);
}

body.dark .button[level=danger],
.button[level=danger] {
  --text-color: #000;
  --bg-color: #e24b4f;
  --bg-image: -webkit-linear-gradient(-45deg, #dc3645 0%, #e24b4f 100%);
}
body.dark .button[level=danger]:hover,
.button[level=danger]:hover {
  --text-color: #000;
  filter: brightness(120%);
}
body.dark .button[level=danger]:active,
.button[level=danger]:active {
  --text-color: #000;
  filter: brightness(150%);
}

.button[type=outline] {
  color: var(--bg-color);
  background-color: transparent;
  background: none;
  box-shadow: inset 0 0 0 1px var(--bg-color);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .button[type=outline] {
    box-shadow: inset 0 0 0 0.5px var(--bg-color);
  }
}
.button[type=outline]:hover {
  --text-color: #fff;
}

.button[type=text] {
  color: var(--bg-color);
  background-color: transparent;
  background: none;
}
.button.rounded {
  --border-radius: 100px;
}

.button.full-width {
  display: block;
  text-align: center;
}

.button.brand {
  background: -webkit-linear-gradient(-20deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 50%, transparent 100%), -webkit-linear-gradient(-45deg, #4cddbd 0%, #06f286 100%);
}

body.dark .button[disabled] {
  --text-color: #1a1a1a;
  --bg-color: #3a3a3a;
  --bg-image: none;
  pointer-events: none;
}

.button[disabled] {
  --text-color: #94949f;
  --bg-color: #e7e7e7;
  --bg-image: none;
  pointer-events: none;
}

body.dark .button.button-toggle.active {
  --text-color: #fff;
}

.button.button-toggle {
  --button-padding: 0 20px;
  --icon-size: 10px;
  --min-width: 140px;
  min-width: var(--min-width);
  text-align: center;
  transition: var(--transition-fast), color 0s linear, fill 0s linear;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.button.button-toggle.active {
  --text-color: #000;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--text-color);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .button.button-toggle.active {
    box-shadow: inset 0 0 0 0.5px var(--text-color);
  }
}
.button.button-toggle i {
  vertical-align: middle;
}
.button.button-toggle b {
  vertical-align: middle;
}

.button.button-watch i {
  position: relative;
  margin-top: 1px;
}
.button.button-watch i.icon-check {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  margin-right: 6px;
}
.button.button-watch i.icon-plus {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  display: inline-block;
  margin-right: 2px;
}
.button.button-watch b {
  font-weight: normal;
}
.button.button-watch b::before {
  content: "Watch";
}
.button.button-watch.active i.icon-check {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  display: inline-block;
  margin-right: 6px;
}
.button.button-watch.active i.icon-plus {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  margin-right: 2px;
}
.button.button-watch.active b {
  font-weight: normal;
}
.button.button-watch.active b::before {
  content: "Watching";
}
.button.button-watch.active:hover i.icon-check {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  margin-right: 2px;
}
.button.button-watch.active:hover i.icon-plus {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  display: inline-block;
  margin-right: 6px;
  transform: rotate(45deg);
}

.button.button-join i {
  position: relative;
  margin-top: 1px;
}
.button.button-join i.icon-check {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  margin-right: 6px;
}
.button.button-join i.icon-plus {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  display: inline-block;
  margin-right: 2px;
}
.button.button-join b {
  font-weight: normal;
}
.button.button-join b::before {
  content: "Join";
}
.button.button-join.active i.icon-check {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  display: inline-block;
  margin-right: 6px;
}
.button.button-join.active i.icon-plus {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  margin-right: 2px;
}
.button.button-join.active b {
  font-weight: normal;
}
.button.button-join.active b::before {
  content: "Member";
}
.button.button-join.active:hover i.icon-check {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  margin-right: 2px;
}
.button.button-join.active:hover i.icon-plus {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  display: inline-block;
  margin-right: 6px;
  transform: rotate(45deg);
}

body.dark .button.button-more {
  --text-color: #fff;
}
body.dark .button.button-more.active {
  --text-color: #fff;
}

.button.button-more {
  --button-padding: 0 20px;
  --min-width: 0px;
  --text-color: #000;
  justify-content: center;
  align-items: center;
  align-content: center;
}

/*

	$(document).on('click', '.dropdown .display', function(event) {
		//$('#dropdown-overlay').addClass('active');
		var dropdown = $(this).parents('.dropdown');
		dropdown.addClass('active');
		event.stopPropagation();
	});
	$(document).on('click', '.dropdown .options > a', function(event) {
		var link = $(this);
		var linkData = link.html();
		var options = $(this).parents('.options');
		var dropdown = $(this).parents('.dropdown');
		var display = $('.display', dropdown);
		display.html(linkData);
		$('a', options).removeClass('active');
		link.addClass('active');
		//$('#dropdown-overlay').click();
		$('.dropdown').removeClass('active');
	});


<div class="dropdown active">
    <a href="#" class="display">
        <b>Original Size - 2880 × 1800</b>
    </a>
    <div class="options">
        <a href="#" class="active"><b>Original Size - 2880 × 1800 (Recommended)</b></a>
        <a href="#"><b>Large - 1920 × 1080</b></a>
        <a href="#"><b>Medium - 1600 × 900</b></a>
        <a href="#"><b>Small - 1280 × 720</b></a>
    </div>
</div>
*/
.dropdown {
  --width: 300px;
  --height: 40px;
  --background-color: #fff;
  --font-color: #000;
  --font-size: 14px;
  --font-family: var(--font-family-regular);
  --padding-right: 50px;
  --display-border-radius: 3px;
  --menu-font-color: #000;
  --menu-background-color: #fff;
  --menu-padding: 3px;
  --menu-border-radius: 3px;
  --menu-hover-bg: #eee;
  z-index: 100;
}

.dropdown.active {
  z-index: 1001;
}

.dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 5px;
}

.dropdown .display {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--font-color);
  background-color: var(--background-color);
  height: var(--height);
  border-radius: var(--display-border-radius);
  padding-right: var(--padding-right);
  min-width: var(--width);
  max-width: var(--width);
  -webkit-user-drag: none;
}

.dropdown .display b {
  position: relative;
  top: -1px;
  display: block;
  font-size: var(--font-size);
  font-weight: normal;
  font-family: var(--font-family);
  line-height: var(--height);
}

.dropdown.active .display {
  border-radius: 3px 3px 0 0;
}

.dropdown .options {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
}

.dropdown.active .options {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.dropdown .options {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  max-height: 300px;
  min-width: var(--width);
  max-width: var(--width);
  overflow-y: auto;
  border-radius: var(--menu-border-radius);
  background-color: var(--menu-background-color);
  color: var(--font-color);
  padding: var(--menu-padding);
  box-shadow: 0 12px 24px 6px rgba(0, 0, 0, 0.05), 0 3px 6px 2px rgba(0, 0, 0, 0.05);
}

.dropdown .options a {
  position: relative;
  display: block;
  color: var(--menu-font-color);
  padding-right: 20px;
  padding-left: 20px;
  margin: 0px;
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  text-decoration: none;
}

.dropdown .options a:hover {
  background-color: var(--menu-hover-bg);
  box-shadow: 0 0 0 var(--menu-padding) var(--menu-hover-bg);
}

.dropdown .options a.active::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 2px;
  border: 2px solid var(--menu-font-color);
  border-top-color: transparent;
  border-right-color: transparent;
  transform: rotate(-45deg);
  top: 11px;
  left: 5px;
}

.dropdown .options hr {
  position: relative;
  display: block;
  border: 0 solid #fff;
  border-top: 1px solid var(--menu-font-color);
  opacity: 0.1;
  margin: 8px var(--menu-padding);
}

/* Turn on custom 8px wide scrollbar */
.dropdown .options::-webkit-scrollbar {
  width: 12px;
  /* 1px wider than Lion. */
  /* This is more usable for users trying to click it. */
  background-color: rgba(0, 0, 0, 0);
  -webkit-border-radius: 100px;
}

/* hover effect for both scrollbar area, and scrollbar 'thumb' */
.dropdown .options::-webkit-scrollbar:hover {
  background-color: transparent;
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
.dropdown .options::-webkit-scrollbar-thumb:vertical {
  /* This is the EXACT color of Mac OS scrollbars.
     Yes, I pulled out digital color meter */
  background: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 100px;
  border: 3px solid white;
}

.dropdown .options::-webkit-scrollbar-thumb:vertical:hover {
  background: rgba(0, 0, 0, 0.61);
  /* Some darker color when you click it */
  background: rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 100px;
}

.dropdown .options::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(0, 0, 0, 0.61);
  /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}

/*
===================
*/
.dropdown-form .display::after {
  position: absolute;
  right: 12px;
  top: 50%;
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  pointer-events: none;
  border: 1px solid transparent;
  -webkit-transform: translateY(-50%) rotate(-45deg);
  margin-top: -1px;
  border-bottom-color: #999999;
  border-left-color: #999999;
}

.dropdown-nav {
  --width: auto;
  --height: 40px;
  --background-color: transparent;
  --font-color: #fff;
  --font-size: 14px;
  --font-family: var(--font-family-bold);
  --padding: 0px;
  --padding-right: 30px;
  --display-border-radius: 3px;
  --menu-font-color: #000;
  --menu-background-color: #fff;
  --menu-padding: 3px;
  --menu-border-radius: 3px;
  --menu-hover-bg: #eee;
  z-index: 100;
}

.dropdown-nav .display::after {
  position: absolute;
  content: "∟";
  right: 0px;
  top: 50%;
  -webkit-text-stroke: 0px #fff;
  font-size: 11px;
  width: 14px;
  height: 14px;
  -webkit-transform: translateY(calc(-50% - 4px)) rotate(-45deg);
}

.dropdown-nav .options {
  top: var(--height);
}

/*
.dropdown .display .avatar {
  position: absolute;
  left: 0;
  margin: 2px 0px -2px 2px;
  max-height: 50px;
  max-height: 50px;
}

.dropdown .display .avatar.wide ~ b {
  margin-left: 115px;
}
.dropdown .display .avatar.wide ~ span {
  margin-left: 115px;
}

.dropdown.long .display {
  width: 250px;
}
.dropdown.long .options {
  width: calc(250px - 2px);
}

.dropdown .options a.active:hover {
  xxbackground-color: #fff;
  xxbox-shadow: 0 0 0 0px #05cc47;
}

.dropdown .options a b {
  margin: 0px 0 -6px 0;
  padding-top: 0px;
  margin-left: 20px;
  display: block;
  font-size: var(--font-size);
  font-weight: normal;
  font-family: --var(--font-family-regular);
}
@media (max-width: 768px) {
  .dropdown .options a b {
    font-size: 11px;
  }
}
.dropdown .options a span {
  margin-left: 65px;
  font-size: 13px;
  font-weight: normal;
  font-family: "Calibre-Regular";
}

*/
.dropdown-menu {
  --width: auto;
  --height: 40px;
  --background-color: transparent;
  --font-color: #fff;
  --font-size: 14px;
  --font-family: var(--font-family-bold);
  --padding: 0px;
  --padding-right: 16px;
  --display-border-radius: 3px;
  --menu-font-color: #000;
  --menu-background-color: #fff;
  --menu-padding: 3px;
  --menu-border-radius: 3px;
  --menu-hover-bg: #eee;
  z-index: var(--z-index-menu);
  margin-bottom: 0;
}

.dropdown-menu .display::after {
  display: none;
}

.dropdown-menu .options {
  top: calc(var(--height) + 4px);
  right: 0;
  left: auto;
  text-align: left;
  padding-top: 8px;
  padding-bottom: 8px;
}

.tag-input {
  min-height: 80px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.tag-input input[type=text] {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-appearance: none;
  font-size: var(--font-size-default);
  font-family: var(--font-family-default);
  color: var(--input-text-color);
  background: transparent;
  border: none;
  outline: none;
  padding: 8px 0 8px 5px;
  margin-left: -5px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.tag-input .tag + input[type=text] {
  margin-left: 0px;
}

.tag-input .tag {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: var(--font-size-default);
  line-height: var(--font-size-default);
  background: #f9f9f9;
  background: transparent;
  padding: 8px 12px;
  padding-right: 26px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #b3b3b3;
  text-decoration: none;
  color: inherit;
  margin-right: 5px;
  margin-bottom: 5px;
  white-space: nowrap;
}
.tag-input .tag::after {
  position: absolute;
  font-size: 20px;
  font-weight: normal;
  top: 50%;
  transform: translateY(-50%);
  content: "×";
  margin-left: 7px;
  margin-right: -2px;
}
.tag-input .tag:hover {
  color: inherit;
  text-decoration: none;
  xxbox-shadow: inset 0 0 0 1px #c00;
}
.tag-input .tag:hover::after {
  xxcolor: #c00;
}

.tag-input .tag.dupe {
  background-color: #f9c5c6;
}

.tag {
  color: var(--accent-color);
  transition: var(--transition-default);
  border-radius: 3px;
  padding: 2px 0;
}
.tag::before {
  content: "#";
  opacity: 0.5;
}
.tag .tag b {
  font-weight: normal;
}
.tag.tag:hover b {
  font-weight: normal;
  text-decoration: underline;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .switch.large {
    --knob-size: 22px;
    --knob-offset: 2px;
    --border-width: 2px;
  }

  .switch {
    --knob-size: 16px;
    --knob-offset: 2px;
    --border-width: 1px;
    --height: calc( var(--knob-size) + (var(--knob-offset) * 2) + (var(--border-width) * 2) );
    --border: #fff;
    --background: transparent;
    --focus: 2px rgba(32, 228, 160, 0.3);
    --knob: #fff;
    --x: 0px;
    --transition: all 0.3s cubic-bezier(0.25, 1, 0.25, 1);
    -webkit-appearance: none;
            appearance: none;
    width: calc( (var(--knob-size) * 2) + (var(--knob-offset) * 4) + (var(--border-width) * 2) );
    min-width: calc( (var(--knob-size) * 2) + (var(--knob-offset) * 4) + (var(--border-width) * 2) );
    height: var(--height);
    outline: none;
    display: inline-block;
    position: relative;
    vertical-align: top;
    cursor: pointer;
    border: var(--border-width) solid var(--border);
    background: var(--background);
    transition: var(--transition);
    border-radius: calc( var(--height) / 2);
  }
  .switch:after {
    content: "";
    display: block;
    left: var(--knob-offset);
    top: var(--knob-offset);
    width: var(--knob-size);
    height: var(--knob-size);
    border-radius: 50%;
    position: absolute;
    transition: var(--transition);
    background: var(--knob);
    transform: translateX(var(--x));
  }
  .switch:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .switch:checked {
    --knob: #000;
    --background: var(--accent-color);
    --border: var(--accent-color);
    --x: calc( var(--knob-size) + (var(--knob-offset) * 2) );
  }
  .switch:disabled {
    filter: grayscale(1);
    opacity: 0.25;
  }
  .switch:disabled + label {
    opacity: 0.25;
  }
  .switch + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }

  .form-row-switch {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
  }
  .form-row-switch label {
    margin-right: auto;
  }
}
.spoiler {
  --bg-color: var(--text-color);
  --reveal-color: rgba(0,0,0,0.1);
  background: var(--bg-color);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--bg-color);
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
.spoiler::selection {
  color: #000;
}
.spoiler.revealed {
  color: var(--text-color);
  background: var(--reveal-color);
  transition: background 0.8s ease-in-out;
}

body.dark .spoiler {
  --reveal-color: rgba(255,255,255,0.2);
}

.site-header-nb {
  --header-bg-color: #fffdfd;
  --header-link: #60606f;
  --header-link-active: #0a0917;
  --divider-color: #dbdbe2;
  --logo-color: #000;
}

body.dark .site-header-nb {
  --header-bg-color: #06070c;
  --header-link: #b1b1b9;
  --header-link-active: #f2f2f2;
  --divider-color: #22272b;
  --logo-color: #fff;
}

.site-header-nb {
  --sidebar-width: 72px;
  --height: 54px;
  --font-size: 11px;
  --letter-spacing: 1.3px;
  --text-transform: uppercase;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 700;
  height: var(--height);
  background: var(--header-bg-color);
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.site-header-nb a[href="#main-menu"].link {
  --icon-size: 24px;
  width: var(--sidebar-width);
  padding: 0;
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.site-header-nb a[href="#main-menu"].link i {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}
.site-header-nb a[href="#main-menu"].link i svg {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--header-link-active);
}
.site-header-nb a[href="#main-menu"].link:hover svg {
  fill: var(--accent-color);
}

.site-header-nb h1 {
  display: inline-block;
  vertical-align: top;
}
.site-header-nb h1 a {
  display: block;
  font-size: 0;
  padding: 13px 35px 0 16px;
  height: var(--height);
}
.site-header-nb h1 .logo-mark {
  display: inline-block;
  width: 15px;
  height: 28px;
}
.site-header-nb h1 .logo-mark svg {
  width: 15px;
  height: 28px;
  fill: var(--accent-color);
  transition: fill 0.1s ease-in-out;
}
.site-header-nb h1 .logo-type {
  display: inline-block;
  width: 76px;
  height: 28px;
  margin-left: 2px;
}
.site-header-nb h1 .logo-type svg {
  width: 76px;
  height: 28px;
  fill: var(--logo-color);
}

.site-header-nb .divider {
  display: inline-block;
  width: 1px;
  height: 27px;
  background-color: var(--divider-color);
}

.site-header-nb a.link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0 32px;
  margin-right: -3px;
  height: var(--height);
  font-weight: normal;
  font-size: var(--font-size);
  font-family: var(--font-family-bold);
  font-display: swap;
  line-height: var(--height);
  letter-spacing: var(--letter-spacing);
  text-transform: var(--text-transform);
  color: var(--header-link);
}
.site-header-nb a.link:hover {
  color: var(--header-link-active);
}
.site-header-nb a.link.active {
  color: var(--header-link-active);
}
.site-header-nb a.link.new::after {
  content: "";
  display: inline-block;
  position: relative;
  margin-left: 2px;
  top: -5px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent-color);
}

.site-header-nb .overflow-menu {
  --padding: 24px;
  --font-size: 16px;
  --width: 200px;
  z-index: var(--z-index-menu);
  position: absolute;
  display: inline-block;
  padding: 8px 0;
  margin: 0;
  min-width: var(--width);
  background: #fff;
  color: #000;
  font-size: var(--font-size);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform-origin: 100% 0%;
  transform: scale(0.75) translateY(-20px);
  transition: var(--transition-bounce);
  left: 399px;
  margin-top: -6px;
  transform-origin: 0 0;
  display: none;
}
.site-header-nb .overflow-menu.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.site-header-nb .overflow-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.site-header-nb .overflow-menu ul li {
  padding: 0;
  margin: 0;
}
.site-header-nb .overflow-menu a {
  display: block;
  padding: 10px var(--padding);
  color: #444;
  text-align: left;
}
.site-header-nb .overflow-menu a:hover {
  color: #000;
  background: #f4f4f4;
}
.site-header-nb .overflow-menu hr {
  border: 0 solid transparent;
  border-top: 1px solid #000;
  opacity: 0.25;
  margin: 8px var(--padding);
}

.site-header-nb a.link-search {
  font-weight: normal;
  font-size: var(--font-size);
  font-family: var(--font-family-bold);
  font-display: swap;
  line-height: var(--height);
  letter-spacing: var(--letter-spacing);
  text-transform: var(--text-transform);
  color: var(--header-link);
  margin-right: auto;
}
.site-header-nb a.link-search i {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: 8px;
  margin-right: 16px;
  vertical-align: top;
}
.site-header-nb a.link-search i svg {
  width: 24px;
  height: 24px;
  fill: var(--header-link);
}

.site-header-nb a.link.link-icon-only {
  padding: 0 16px;
}
.site-header-nb a.link.link-icon-only i {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: 8px;
  vertical-align: top;
}
.site-header-nb a.link.link-icon-only i svg {
  width: 24px;
  height: 24px;
  fill: var(--header-link);
}
.site-header-nb a.link.link-icon-only:hover svg {
  fill: var(--header-link-active);
}

.site-header-nb a.link.link-icon-only i {
  display: inline-block;
}
.site-header-nb a.link.link-icon-only i.dark-only {
  display: none;
}

body.dark .site-header-nb a.link.link-icon-only i {
  display: none;
}
body.dark .site-header-nb a.link.link-icon-only i.dark-only {
  display: inline-block;
}

.site-header-nb .userbar {
  padding: 0 32px;
}

.droppy {
  position: relative;
}
.droppy .link-submit::before {
  content: "Submit";
}

.site-header-nb menu.site-header-menu {
  display: none;
}

.site-header-nb a.link-submit {
  display: inline-block;
  color: var(--accent-color);
  min-width: 150px;
  margin: 0;
  text-align: center;
}
.site-header-nb a.link-submit:hover {
  color: #000;
  background: #fff;
}

.site-header-nb a.link-theme {
  opacity: 0.1;
}

/* Mobile */
.navbar-inner.mobile {
  --navbar-height: 56px;
  position: fixed;
  height: var(--navbar-height);
  z-index: 500;
  top: 0;
  left: 0;
  right: 0;
  background: var(--navbar-bg-color);
  transition: var(--transition-smooth);
  opacity: 1;
  display: flex;
  justify-content: space-between;
  /*
  &.navbar-hidden {
      //opacity: 0;
      top: calc( var(--navbar-height) * -1 );
  }
  */
  /*
  .navbar-bg {
      display: none;
  }
  */
}
.navbar-inner.mobile a.link {
  display: flex;
  justify-content: flex-start;
  padding: 0 16px;
  margin: 0;
  height: 56px;
  align-items: center;
  align-content: center;
}
.navbar-inner.mobile a.link.icon-only {
  width: 56px;
  flex-shrink: 0;
}

body.modal-open .navbar {
  opacity: 0;
}

.navbar-inner.mobile .left {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.navbar-inner.mobile .title {
  position: relative;
  flex-shrink: 10;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar-inner.mobile .title a {
  display: block;
  font-size: 0;
  padding: 0 32px;
  height: 54px;
  line-height: 1;
}
.navbar-inner.mobile .title a i {
  position: relative;
  display: inline-block;
  height: 25px;
  top: 50%;
  transform: translateY(-50%);
}
.navbar-inner.mobile .title a .logo-mark {
  width: 15px;
}
.navbar-inner.mobile .title a .logo-mark svg {
  width: 15px;
  height: 25px;
  fill: var(--accent-color);
}
.navbar-inner.mobile .title a .logo-type {
  width: 76px;
  margin-left: 2px;
}
.navbar-inner.mobile .title a .logo-type svg {
  width: 76px;
  height: 25px;
  fill: #fff;
}
.navbar-inner.mobile .right {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.navbar-inner.mobile .right .avatar {
  position: relative;
  left: -4px;
  width: 32px;
  height: 32px;
}

.networkbar + .overlay {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.networkbar.active + .overlay {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.networkbar + .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: var(--transition-smooth);
  position: fixed;
  display: block;
  z-index: 99;
  background: rgba(6, 7, 13, 0.5);
}

.networkbar {
  --sidebar-width: 72px;
  transition: var(--transition-smooth);
}
.networkbar a.link b {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
}
.networkbar .group-avatar {
  margin-left: 4px;
  transition: var(--transition-smooth);
  transition-duration: 0;
  transform: scale(0.75);
}
.networkbar section h2 b {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.networkbar.active {
  --sidebar-width: 288px;
}
.networkbar.active a.link b {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.networkbar.active .group-avatar {
  margin-left: 24px;
  transform: scale(1);
}
.networkbar.active section h2 b {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.networkbar {
  position: fixed;
  top: 54px;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  border-right: 1px solid #292f34;
  background: #06070c;
  z-index: var(--z-index-header);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  align-content: center;
}
.networkbar h2 {
  font-size: 14px;
  margin: 16px 24px 4px 24px;
  color: #f2f2f2;
  letter-spacing: 0.3px;
  font-weight: normal;
  white-space: nowrap;
}
.networkbar h2 i {
  --icon-size: 16px;
  display: inline-block;
  vertical-align: middle;
  width: var(--icon-size);
  height: var(--icon-size);
  margin: 0 6px 0 1px;
}
.networkbar h2 i svg {
  width: var(--icon-size);
  height: var(--icon-size);
}
.networkbar h2 i.icon-group {
  position: relative;
  top: -2px;
}
.networkbar h2 b {
  font-weight: normal;
}
.networkbar a.link {
  position: relative;
  min-height: 48px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  align-content: center;
}
.networkbar a.link i {
  width: 72px;
  position: relative;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin-right: -8px;
}
.networkbar a.link b {
  font-size: 14px;
  color: #b1b1b9;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.3px;
  font-weight: normal;
  white-space: nowrap;
}
.networkbar a.link .group-avatar {
  width: 64px;
  height: 32px;
  margin-right: 16px;
}
.networkbar a.link .group-avatar + b {
  position: relative;
  top: -1px;
}
.networkbar a.link.new i::before {
  position: absolute;
  top: -4px;
  left: 44px;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #f53948;
  border-radius: 50%;
}
.networkbar a.link:hover {
  background: #292f34;
}
.networkbar a.link.active {
  background: #292f34;
}
.networkbar a.link.active i svg {
  fill: var(--accent-color);
}
.networkbar a.link.active b {
  color: var(--text-color);
}
.networkbar section {
  border-top: 1px solid #292f34;
  padding-bottom: 16px;
}

TabBar {
  display: none;
}

.tab-bar {
  --height: 72px;
  --margin-bottom: 32px;
  --underline-height: 2px;
  --underline-color: var(--accent-color);
  --border-height: 0px;
  --border-color: var(--inactive-color);
  --font-size: 12px;
  --letter-spacing: 1.3px;
  --gap: 48px;
  --text-transform: uppercase;
  --background: #15191e;
  --align: center;
  position: relative;
  margin: 0;
  margin: 0 -4px;
  margin-bottom: var(--margin-bottom);
  padding: 0;
  height: calc(var(--height));
  font-size: var(--font-size);
  font-family: var(--font-family-regular);
  text-transform: var(--text-transform);
  letter-spacing: var(--letter-spacing);
  background: var(--background);
}
.tab-bar > ul {
  margin: 0;
  padding: 4px 4px;
  list-style: none;
  white-space: nowrap;
  text-align: var(--align);
  /*
  // No JS
  &:not(.has-js) {
      padding-bottom: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;

      // Scrollbars
          scrollbar-width: thin;
          scrollbar-color: #494c51 #16191e;
          overscroll-behavior: contain;

      &::-webkit-scrollbar {
          width: 0px;
          height: 0px;
          background-color: transparent;
      }
      &::-webkit-scrollbar:horizontal {
          height: 8px;
      }
      &::-webkit-scrollbar-corner {
          background: transparent;
      }
      &::-webkit-scrollbar-thumb {
          width: 0px;
          height: 0px;
          border-radius: 100px;
          background: rgba(0,0,0,0);
      }
      &::-webkit-scrollbar-thumb:horizontal {
          background: rgba(255,255,255,0.2); 
          transition: var(--transition-default);
      }

  }
  */
}
.tab-bar a.demo-disabled {
  cursor: no-allowed;
  pointer-events: none;
}
.tab-bar > ul > li {
  display: inline-block;
  margin-right: var(--gap);
  position: relative;
}
.tab-bar > ul > li > a.link,
.tab-bar > ul > a.link {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: var(--height);
  height: calc(var(--height) - 8px);
  line-height: calc(var(--height) - 8px);
  color: var(--inactive-color);
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.tab-bar > ul > li > a.link:last-of-type,
.tab-bar > ul > a.link:last-of-type {
  margin-right: 0;
}
.tab-bar > ul > li > a.link b,
.tab-bar > ul > a.link b {
  font-weight: normal;
}
.tab-bar > ul > li > a.link i,
.tab-bar > ul > a.link i {
  display: inline-block;
  --size: 12px;
  width: var(--size);
  height: var(--size);
}
.tab-bar > ul > li > a.link i svg,
.tab-bar > ul > a.link i svg {
  width: var(--size);
  height: var(--size);
  fill: var(--link-color);
}
.tab-bar > ul > li > a.link.active,
.tab-bar > ul > a.link.active {
  color: var(--link-color);
}
.tab-bar > ul > li > a.link.focus-visible,
.tab-bar > ul > a.link.focus-visible {
  outline: 1px solid var(--accent-color);
  outline-offset: 3px;
}
.tab-bar::before {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 3px;
  opacity: 0.25;
  border-bottom: var(--border-height) solid var(--border-color);
}
.tab-bar u {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 0;
  height: var(--underline-height);
  width: 1px;
  z-index: 0;
  background-color: var(--underline-color);
  transition: left 0.2s cubic-bezier(0.15, 0.8, 0.3, 1.2) 0s;
}

.tab-bar ul li menu {
  --width: 200px;
  right: 0;
  top: var(--height);
  --padding: 24px;
  --font-size: 16px;
  --width: 200px;
  z-index: var(--z-index-menu);
  position: absolute;
  display: inline-block;
  padding: 8px 0;
  margin: 0;
  min-width: var(--width);
  background: #fff;
  color: #000;
  font-size: var(--font-size);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform-origin: 100% 0%;
  transform: scale(0.75) translateY(-20px);
  transition: var(--transition-bounce);
}
.tab-bar ul li menu.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.tab-bar ul li menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tab-bar ul li menu ul li {
  padding: 0;
  margin: 0;
}
.tab-bar ul li menu a {
  display: block;
  padding: 10px var(--padding);
  color: #444;
  text-align: left;
}
.tab-bar ul li menu a:hover {
  color: #000;
  background: #f4f4f4;
}
.tab-bar ul li menu hr {
  border: 0 solid transparent;
  border-top: 1px solid #000;
  opacity: 0.25;
  margin: 8px var(--padding);
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

li.hidden {
  display: inline-block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute !important;
}
/*
.tab-bar {
    --underline-color: var(--accent-color);
    --underline-image: linear-gradient(45deg,#77dbbd,#6fed92);
    --underline-height: 2px;
    --font-size: 12px;
    --height: 56px;
    --background: linear-gradient(180deg,var(--D2),var(--D1));
    // --bg-color: transparent;
    position: relative;
    top: 54px;

    // position: sticky;


    --D1: #06070d;
    --D2: #161a1f;
    height: var(--height); //48
    padding: 0 32px;
    // background-color: #15191e;
    background: var(--background);


    font-size: var(--font-size);
    font-family: var(--font-family-regular);
    text-transform: uppercase;
    letter-spacing: 1.3px;
// background-color: var(--bg-color);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;

    a.link {
        display: inline-block;
        height: var(--height);
        line-height: var(--height);
        padding: 0 16px;
        min-width: 48px;
        color: #b1b1b9;
        font-smoothing: antialiased;

        -webkit-user-select: none;
        -webkit-user-drag: none;


        &.active {
            color: #fff;
            // &::after {
            //     opacity: 1;
            // }
        }
    }
    u {
        position: absolute;
        bottom: 0px;
        left: 0;
        height: var(--underline-height);
        width: 31px;
        display: inline-block;
        margin-left: 16px; // button padding
        z-index: 2;
        background-color: var(--underline-color);
        background-image: var(--underline-image);
        transition: left 0.2s cubic-bezier(0.15, 0.8, 0.3, 1.2) 0s;
    }

}



.tab-content {
    display: none;
    &.active {
        display: block;
    }
}


*/
.comments {
  --comment-bg: transparent;
  --avatar-offset: 10px;
  --avatar-size: 32px;
  --bubble-color: #fffdfd;
  --bubble-tail-top: 14px;
}
.comments .add-comment {
  --avatar-size: 40px;
  --avatar-offset: 20px;
  --border-color: #ffffff33;
}
.comments .add-comment .add-comment-toolbar {
  --bg-color: #1d2024;
  --border-color: #16191e;
}
.comments .username-link {
  --font-size: 14px;
}
.comments .text {
  --font-size: 14px;
}
.comments footer {
  --font-size: 12px;
}

body.dark .comments {
  --bubble-color: #161718;
}

.comments {
  max-width: 780px;
  margin: auto;
  background: var(--comment-bg);
}

.comments-header {
  display: flex;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 8px;
}
.comments-header h2 {
  height: 40px;
  font-size: 14px;
  font-family: var(--font-family-bold);
  text-transform: uppercase;
}
.comments-header h2 span {
  margin-left: 5px;
  font-family: var(--font-family-regular);
}

.commentlist {
  position: relative;
  padding: var(--padding);
}
.commentlist .view-more {
  display: block;
  height: 40px;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.3px;
}
.commentlist .view-more[data-level="1"] + .add-comment {
  display: none;
}

.comment {
  position: relative;
  padding: 12px 24px 16px 16px;
  margin-left: 52px;
  margin-bottom: 16px;
  margin-bottom: 2px;
  background-color: var(--bubble-color);
}
.comment::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0 12px 16px 0;
  border-right-color: var(--bubble-color);
  width: 0;
  height: 0;
  top: var(--bubble-tail-top);
  left: -12px;
  transition: all 0.1s ease-in-out;
}
.comment .avatar-link {
  position: absolute !important;
  top: 0;
  margin-left: calc( (-1 * var(--avatar-size)) - var(--avatar-size));
  width: var(--avatar-size);
  height: var(--avatar-size);
}
.comment .avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
}
.comment .username-link {
  font-size: var(--font-size);
  font-family: var(--font-family-bold);
  letter-spacing: 0.3px;
  margin-right: 8px;
  color: var(--accent-color);
}
.comment .username-link:hover {
  text-decoration: underline;
}
.comment .text {
  display: inline;
  margin-top: 8px;
  font-size: var(--font-size);
  line-height: 1.4;
  font-family: var(--font-family-light);
}
.comment .more-link {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.comment:hover .more-link {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  opacity: 0.5;
}
.comment .more-link {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 12px;
  opacity: 0.5;
}
.comment .more-link:hover {
  color: inherit;
  opacity: 1;
}
.comment menu.menu-comment {
  --padding: 24px;
  --font-size: 16px;
  --width: 200px;
  z-index: var(--z-index-menu);
  position: absolute;
  display: inline-block;
  padding: 8px 0;
  margin: 0;
  min-width: var(--width);
  background: #fff;
  color: #000;
  font-size: var(--font-size);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform-origin: 100% 0%;
  transform: scale(0.75) translateY(-20px);
  transition: var(--transition-bounce);
  top: 32px;
  right: 0;
}
.comment menu.menu-comment.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.comment menu.menu-comment ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.comment menu.menu-comment ul li {
  padding: 0;
  margin: 0;
}
.comment menu.menu-comment a {
  display: block;
  padding: 10px var(--padding);
  color: #444;
  text-align: left;
}
.comment menu.menu-comment a:hover {
  color: #000;
  background: #f4f4f4;
}
.comment menu.menu-comment hr {
  border: 0 solid transparent;
  border-top: 1px solid #000;
  opacity: 0.25;
  margin: 8px var(--padding);
}
.comment footer {
  display: flex;
  margin-top: 8px;
  font-size: var(--font-size);
  font-family: var(--font-family-light);
}
.comment footer a {
  --padding: 4px;
  display: inline-block;
  color: #ffffff66;
  padding: var(--padding);
  margin: calc( -1 * var(--padding));
  margin-right: 16px;
}
.comment footer a svg {
  --size: 14px;
  position: relative;
  top: -1px;
  width: var(--size);
  height: var(--size);
  vertical-align: middle;
  fill: #5d5d6c;
}
.comment footer a b {
  margin-left: 2px;
}
.comment footer a:hover {
  color: #fff;
}
.comment footer a:hover svg {
  fill: #fff;
}
.comment footer a.active svg {
  fill: var(--accent-color);
}
.comment footer a[href="#reply"] {
  order: 1;
}
.comment footer a[href="#like"] {
  order: 2;
}
.comment footer a[href="#permalink"] {
  order: 3;
}

body.is_anon .add-comment .sisu {
  display: flex;
}
body.is_anon .add-comment .bubble {
  display: none;
}

.add-comment .sisu {
  display: none;
}
.add-comment .bubble {
  display: block;
}

.add-comment {
  margin: 16px 0 32px 0;
}

.add-comment .sisu {
  border: 1px solid #ffffff33;
  padding: 8px 8px 8px 16px;
  align-content: center;
  justify-content: flex-start;
}
.add-comment .sisu .text {
  display: flex;
  flex-grow: 20;
  justify-content: left;
  align-items: center;
  align-content: center;
  margin-left: auto;
}
.add-comment .sisu .button {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-left: 8px;
}

.add-comment .bubble {
  position: relative;
  margin-left: calc(var(--avatar-size) + (var(--avatar-offset) * 2) );
  border: 1px solid var(--border-color);
  background-color: var(--bubble-color);
  min-height: var(--min-height);
}
.add-comment .bubble::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0 14px 18px 0;
  border-right-color: var(--border-color);
  width: 0;
  height: 0;
  top: calc(var(--bubble-tail-top) - 1px);
  left: -14px;
  transition: all 0.1s ease-in-out;
}
.add-comment .bubble::after {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0 12px 16px 0;
  border-right-color: var(--bubble-color);
  width: 0;
  height: 0;
  top: var(--bubble-tail-top);
  left: -12px;
  transition: all 0.1s ease-in-out;
}
.add-comment .bubble .avatar {
  position: absolute;
  left: calc( (var(--avatar-offset) * 2 + var(--avatar-size)) * -1);
  width: var(--avatar-size);
  height: var(--avatar-size);
}

.add-comment {
  --min-height: 42px;
}
.add-comment .bubble.focus {
  --min-height: 84px;
  --border-color: #ffffff66;
}
.add-comment .bubble.focus .add-comment-field {
  height: auto;
  min-height: var(--min-height);
}
.add-comment .add-comment-field {
  padding: 12px 24px 16px 16px;
  font-size: 14px;
  color: var(--color);
  background-color: var(--bubble-color);
  height: var(--min-height);
  min-height: var(--min-height);
  font-family: var(--font-family-regular);
  font-family: var(--font-family-light);
  transition: var(--transition-bounce);
}
.add-comment .add-comment-field:before {
  transition: var(--transition-fast);
}
.add-comment .add-comment-field:empty:before {
  content: attr(data-placeholder);
  opacity: 0.25;
}
.add-comment .add-comment-field:empty:not(:focus):before {
  opacity: 0.5;
}
.add-comment .add-comment-field.focus-visible {
  outline: none;
}

.bubble.focus .add-comment-toolbar {
  display: flex;
}
.bubble .add-comment-toolbar {
  display: none;
}

.add-comment-toolbar {
  --icon-size: 24px;
  --height: 48px;
  position: relative;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  background-color: var(--bg-color);
  border-top: 1px solid var(--border-color);
  height: var(--height);
  margin-top: 0px;
}
.add-comment-toolbar a {
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: var(--height);
  padding: 0 16px;
  text-transform: uppercase;
  font-size: 11px;
  font-family: var(--font-family-bold);
  letter-spacing: 0.3px;
}
.add-comment-toolbar a i {
  height: var(--icon-size);
  width: var(--icon-size);
}
.add-comment-toolbar a i svg {
  height: var(--icon-size);
  width: var(--icon-size);
}
.add-comment-toolbar a.link-icon {
  width: 48px;
}
.add-comment-toolbar a.link-icon:hover svg {
  fill: var(--accent-color);
}
.add-comment-toolbar a.link-icon.last {
  margin-right: auto !important;
}
.add-comment-toolbar a.action:first-of-type {
  margin-left: auto;
}
.add-comment-toolbar a[href="#add-gif"] i {
  position: relative;
  top: -5px;
}
.add-comment-toolbar a.link-submit {
  color: var(--accent-color);
}
.add-comment-toolbar a.disabled {
  color: #fff;
  opacity: 0.25;
  cursor: default;
}
.add-comment-toolbar a[href="#add-emoticon"] i svg {
  position: relative;
  top: 1px;
}
.add-comment-toolbar a[href="#add-gif"] i svg {
  position: relative;
  top: 6px;
  left: 2px;
}

/*
.comments {
    max-width: 780px;
    margin: auto;
}


.comments-header {
    display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    h2 {
        font-size: 14px;
        font-family: var(--font-family-bold);
        text-transform: uppercase;
    }
    margin-top: 48px;
    margin-bottom: 32px;
}


.commentlist {
    position: relative;
    padding: var(--padding);
}

body.dark .comment {
    --bubble-color: #1c2024;
}
.comment {
    --bubble-color: #fffdfd;
    --bubble-tail-top: 10px;
    position: relative;
    padding: 12px 24px 16px 16px;
    margin-left: 52px;
    margin-bottom: 48px;
    background-color: var(--bubble-color);
    &::before {
        position: absolute;
        content: "";
        border-color: transparent;
        border-style: solid;
        border-width: 0 12px 16px 0;
        border-right-color: var(--bubble-color);
        width: 0;
        height: 0;
        top: var(--bubble-tail-top);
        left: -12px;
        transition: all 0.1s ease-in-out;
    }
    .avatar-link {
        position: absolute !important;
        top: 0;
    }
    .avatar {
        margin-left: calc(-32px - 32px);
        width: 32px;
        height: 32px;
    }
    .username-link {
        font-size: 16px;
        font-family: var(--font-family-bold);
        letter-spacing: 0.3px;
    }
    .text {
        margin-top: 8px;
        font-size: 16px;
        line-height: 1.4;
        font-family: var(--font-family-regular);
    }
    footer {
        position: absolute;
        bottom: -28px;
        left: 0;
        font-size: 12px;
        font-family: var(--font-family-regular);
        color: #5d5d6c;
        a {
            color: #5d5d6c;
            margin-right: 16px;
            svg {
                position: relative;
                top: -1px;
                width: 24px;
                height: 24px;
                vertical-align: middle;
                color: #5d5d6c;
                fill: transparent;
            }
        }
    }
}






	.add-comment {
        --padding: 16px;
        --avatar-size: 40px;
        --bubble-tail-top: 10px;
        --bubble-color: #22272b;
        --border-color: #292f34;
        --min-height: 87px;
        margin-bottom: 32px;
        .bubble {
            position: relative;
            margin-left: calc(var(--avatar-size) + (var(--padding) * 2) );
            border: 1px solid #292f34;
            background-color: var(--bubble-color);
            // height: var(--avatar-size);
            min-height: var(--min-height);
            &::before {
                position: absolute;
                content: "";
                border-color: transparent;
                border-style: solid;
                border-width: 0 14px 18px 0;
                border-right-color: var(--border-color);
                width: 0;
                height: 0;
                top: calc(var(--bubble-tail-top) - 1px);
                left: -14px;
                transition: all 0.1s ease-in-out;
            }
            &::after {
                position: absolute;
                content: "";
                border-color: transparent;
                border-style: solid;
                border-width: 0 12px 16px 0;
                border-right-color: var(--bubble-color);
                width: 0;
                height: 0;
                top: var(--bubble-tail-top);
                left: -12px;
                transition: all 0.1s ease-in-out;
            }
            .avatar {
                position: absolute;
                left: calc( (var(--padding) * 2 + var(--avatar-size)) * -1);
                width: var(--avatar-size);
                height: var(--avatar-size);
            }

        }

    }


.add-comment {
    input {
        width: 100%;
        box-shadow: none;
        background: transparent;
        font-size: 16px;
        font-family: var(--font-family-regular);
        &::placeholder {
            color: #838592;
        }
    }
    textarea {
        padding: 12px 24px 16px 16px;
        color: #f2f2f2;
        font-size: 16px;
        background-color: #22272b;
        -webkit-appearance: none;
        border-width: 0;
        width: 100%;
        height: 40px;
        resize: vertical;
        overflow-y: hidden;
        font-size: 16px;
        font-family: var(--font-family-regular);
        // min-height: 86px;
        outline: none;
        &::-webkit-resizer {
            visibility: hidden;
        }

        &::placeholder {
            color: #838591;
        }
    }
        .bubble.focus textarea {
            height: 80px;
        overflow-y: auto;
            // background-color: #23272b;
            transition: var(--transition-bounce);
        }
        textarea {
            scrollbar-width: thin;
            scrollbar-color: transparent transparent;
            overscroll-behavior: contain;
            overflow-x: hidden;
        }
        textarea::-webkit-scrollbar {
            width: 6px;
            background-color: transparent;
        }
        textarea::-webkit-scrollbar:horizontal {
            width: 0;
            height: 0;
            background-color: transparent;
        }
        textarea::-webkit-scrollbar:hover {
        }
        textarea::-webkit-scrollbar-corner {
            background: transparent;
        }
        textarea::-webkit-scrollbar-thumb {
            background-color: rgba(255,255,255,0.1);
            border-radius: 30px;
        }


}
.bubble {
    &.focus .add-comment-toolbar {
        display: flex;
    }
    .add-comment-toolbar {
        display: none;
    }
}
            .add-comment-toolbar {
                position: relative;
                // display: flex;
                align-items: center;
                align-content: center;
                justify-content: space-between;
                background-color: #16191e;
                background-color: #1d2024;
                border-top: 1px solid #16191e;
                    height: 48px;
                    margin-top: -6px;
                // white-space: nowrap;


                a {
                    display: flex;
                    flex-shrink: 1;
                    justify-content: center;
                    align-items: center;
                    align-content: center;
                    height: 48px;
                    // max-width: 48px;
                    padding: 0 16px;
                    text-transform: uppercase;
                    font-size: 11px;
                    font-family: var(--font-family-bold);
                    &.link-icon {
                        width: 48px;
                    }
                    &.link-icon.last {
                        margin-right: auto !important;
                    }
                    &.action:first-of-type {
                        margin-left: auto;
                    }
                    &.link-submit {
                        color: var(--accent-color);
                    }
                    &.disabled {
                        color: #fff;
                        opacity: 0.25;
                    }
                }
                a[href="#add-gif"] i {
                    svg {
                        position: relative;
                        top: 5px;
                        left: 2px;
                    }
                }

            }

*/
.poll-list {
  --height: 32px;
  --padding: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.poll-list li {
  margin: 16px 0;
}
.poll-list li a {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-shrink: 1;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  min-height: var(--height);
  padding: var(--padding);
  background: rgba(255, 255, 255, 0.075);
  word-break: break-word;
  transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.poll-list li a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.poll-list li a i {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: -120px;
  bottom: 0;
  z-index: 0;
  display: inline-block;
  transform: translateX(-500px);
  background-color: var(--accent-color);
  transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  transition-duration: 0.5s;
}
.poll-list li a b.pct {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  display: block;
  right: 15px;
  font-weight: normal;
  font-family: var(--font-family-bold);
  font-size: 18px;
  transition: var(--transition-fast);
  transition-duration: 0;
  transition-delay: 0s;
  color: #fff;
}
.poll-list li a b.pct:after {
  content: "%";
}
.poll-list li a strong {
  position: relative;
  font-weight: normal;
  z-index: 10;
  line-height: 1.6;
  margin-right: 70px;
}
.poll-list li a strong::after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: relative;
  top: -1px;
  font-size: 11px;
  font-weight: bold;
  content: "⅃";
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  padding: 0 6px 6px 0;
  line-height: 1.4;
  color: #1d1d1d;
  background: #fff;
  width: 11px;
  height: 11px;
  text-shadow: none;
  margin-left: 8px;
  transform: rotate(40deg) scale(0.2);
  transition: var(--transition-fast);
}
.poll-list li a strong u:hover {
  color: var(--accent-color);
}
.poll-list li:nth-of-type(1) a .value {
  transition-delay: 0;
}
.poll-list li:nth-of-type(2) a .value {
  transition-delay: 0.1s;
}
.poll-list li:nth-of-type(3) a .value {
  transition-delay: 0.2s;
}
.poll-list li:nth-of-type(4) a .value {
  transition-delay: 0.3s;
}
.poll-list li:nth-of-type(5) a .value {
  transition-delay: 0.4s;
}
.poll-list li:nth-of-type(6) a .value {
  transition-delay: 0.5s;
}
.poll-list li:nth-of-type(7) a .value {
  transition-delay: 0.6s;
}
.poll-list li:nth-of-type(8) a .value {
  transition-delay: 0.7s;
}
.poll-list li:nth-of-type(9) a .value {
  transition-delay: 0.8s;
}
.poll-list li:nth-of-type(10) a .value {
  transition-delay: 0.9s;
}

.poll-list.voted li a {
  background: rgba(255, 255, 255, 0.05);
}
.poll-list.voted li a:hover {
  pointer: default;
}
.poll-list.voted li a i {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  opacity: 0.8;
}
.poll-list.voted li a.active strong::after {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: rotate(40deg) scale(1);
}
.poll-list.voted li a b.pct {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* CSS Flex */
.grid.torpedo {
  --padding: 16px;
  --avatar: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: -3px;
  margin-right: -3px;
  transition: var(--transition-default);
}
.grid.torpedo .item.art,
.grid.torpedo .item.art.portrait {
  position: relative;
  display: block;
  height: 275px;
  margin: 3px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 180px;
  background: #333;
  transition: var(--transition-default);
}
.grid.torpedo .item.art.portrait {
  flex-grow: 0.5;
  flex-shrink: 0.2;
  max-width: 200px;
}
.grid.torpedo .item.art.portrait.tall {
  flex-grow: 0.4;
  flex-shrink: 0.2;
  flex-basis: 150px;
}
.grid.torpedo .item.art.landscape {
  flex-grow: 0.2;
  flex-shrink: 0.2;
  flex-basis: 350px;
}
.grid.torpedo .item.art.landscape.wide {
  flex-grow: 0.5;
  flex-shrink: 0.2;
  flex-basis: 400px;
}
.grid.torpedo .item.art.landscape.wider {
  flex-grow: 0.6;
  flex-shrink: 0.2;
  flex-basis: 500px;
}
.grid.torpedo .item.art.square {
  flex-grow: 0.2;
  flex-shrink: 0.2;
  flex-basis: 275px;
}
.grid.torpedo .item.empty {
  flex: 1 0 200px;
  visibility: hidden;
}
.grid.torpedo .item.full {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}
.grid.torpedo .notice {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
  padding: 16px;
  margin: 16px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.grid.torpedo .item .thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.grid.torpedo .item .thumb img {
  height: 100%;
  width: 100%;
  display: inline-block;
  object-fit: cover;
  object-position: 50% 25%;
}
.grid.torpedo .item .collect {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  padding: 8px;
  margin: 6px;
  background: rgba(255, 255, 255, 0);
  height: 40px;
  text-transform: uppercase;
}
.grid.torpedo .item .collect:hover svg {
  fill: var(--accent-color);
}
.grid.torpedo .item .info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
  padding: var(--padding);
  transition: var(--transition-default);
  transition-delay: 0s;
}
.grid.torpedo .item .info a {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.grid.torpedo .item .info .title {
  display: inline-block;
  margin-right: 100%;
  font-size: 18px;
  font-family: var(--font-family-bold);
  margin-bottom: 16px;
  width: calc(100% - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid.torpedo .item .info .title:hover {
  color: inherit;
}
.grid.torpedo .item .info .artist {
  margin-top: 16px;
  pointer-events: auto;
}
.grid.torpedo .item .info .artist img {
  vertical-align: middle;
  width: var(--avatar);
  height: var(--avatar);
}
.grid.torpedo .item .info .artist b {
  width: calc(100% - 40px - 40px);
  display: inline-block;
  height: var(--avatar);
  line-height: var(--avatar);
  font-size: 14px;
  margin-left: 8px;
  vertical-align: middle;
  transition: var(--transition-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid.torpedo .item .info .artist:hover {
  color: inherit;
}
.grid.torpedo .item .info .artist:hover b {
  opacity: 1;
}
.grid.torpedo .item .info .stats {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: var(--padding);
}
.grid.torpedo .item .info .stats a {
  position: relative;
  display: block;
  text-align: right;
  padding-right: calc(var(--padding) + 12px);
  margin-top: 16px;
  height: 20px;
  line-height: 20px;
}
.grid.torpedo .item .info .stats a:hover i svg {
  fill: var(--accent-color);
}
.grid.torpedo .item .info .stats a:hover b {
  color: var(--link-color);
}
.grid.torpedo .item .info .stats a.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.grid.torpedo .item .info .stats a.active i svg {
  fill: var(--link-color);
}
.grid.torpedo .item .info .stats i {
  position: absolute;
  margin-top: 0px;
  right: 0;
  width: 20px;
  height: 20px;
}
.grid.torpedo .item .info .stats i svg {
  position: relative;
  margin-top: 0px;
  --icon-size: 20px;
  width: var(--icon-size);
  height: var(--icon-size);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
.grid.torpedo .item .info .stats b {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  font-size: 14px;
  font-family: var(--font-family-light);
  transition: var(--transition-fast);
}
.grid.torpedo .item .gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(6, 7, 13, 0.5));
  transition: var(--transition-default);
  transition-delay: 0s;
}
.grid.torpedo .item:hover a,
.grid.torpedo .item:focus-within:not(:focus) a {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.grid.torpedo .item:hover .info,
.grid.torpedo .item:focus-within:not(:focus) .info {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  pointer-events: none;
}
.grid.torpedo .item:hover .info b,
.grid.torpedo .item:focus-within:not(:focus) .info b {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  opacity: 0.75;
}
.grid.torpedo .item:hover .info .stats a.active i svg,
.grid.torpedo .item:focus-within:not(:focus) .info .stats a.active i svg {
  filter: none;
}
.grid.torpedo .item:hover .info .stats a.active:hover i svg,
.grid.torpedo .item:focus-within:not(:focus) .info .stats a.active:hover i svg {
  fill: var(--accent-color);
  filter: none;
}
.grid.torpedo .item:hover .info .stats a:hover b,
.grid.torpedo .item:focus-within:not(:focus) .info .stats a:hover b {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  opacity: 1;
}
.grid.torpedo .item:hover .collect,
.grid.torpedo .item:focus-within:not(:focus) .collect {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.grid.torpedo .item:hover .gradient,
.grid.torpedo .item:focus-within:not(:focus) .gradient {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  pointer-events: none;
}

.grid.torpedo::after {
  content: "";
  flex: 1 0 200px;
  padding: 5px;
  margin-top: 10px;
  margin-right: 5px;
  visibility: hidden;
}

#modal-collect {
  --modal-padding-vertical: 16px;
  --modal-padding-horizontal: 16px;
  width: 400px;
  padding: 0;
}
#modal-collect .link-collection-create {
  display: block;
  color: #000;
  border-radius: 3px;
  margin: 0px;
  padding: 0 0px;
}
#modal-collect .link-collection-create:hover {
  color: var(--accent-color);
}
#modal-collect input {
  -webkit-appearance: none;
  border-width: 0;
  background-color: #f2f3f4;
  padding: 8px 16px;
  font-size: 16px;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
  outline: none;
}
#modal-collect input::placeholder {
  color: #838592;
}
#modal-collect .modal-content {
  padding-top: 0;
}

.list-collections {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-collections li {
  margin: 0 0px;
  padding: 0px;
}
.list-collections li a.link-collection {
  position: relative;
  display: block;
  padding: 8px 8px;
  display: flex;
  border-radius: 3px;
  align-items: center;
  align-content: center;
  justify-content: start;
  /*
  &:hover::before {
      display: block;
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      // color: #;
      // opacity: 0.25;
      opacity: 0.5;
      background: linear-gradient(115deg,#4cddbd66,#06f28666);
      background: #999;
  }
  */
}
.list-collections li a.link-collection:hover {
  background: #eee;
  background: var(--accent-color);
  background: linear-gradient(115deg, #4cddbd66, #06f28666);
  background: linear-gradient(115deg, #daeff9, #d8fdeb);
}
.list-collections li a.link-collection img.folder {
  object-fit: cover;
  object-position: 50% 10%;
  width: 112px;
  height: 48px;
  margin-right: 16px;
}
.list-collections li a.link-collection b {
  display: inline-block;
  color: var(--text-color);
  font-size: 18px;
  font-family: var(--font-family-regular);
}
.list-collections li a.link-collection small {
  display: block;
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.5;
}
.list-collections li a.link-collection i {
  position: relative;
  top: 2px;
  margin-left: 0px;
  display: inline-block;
  --icon-size: 16px;
  width: var(--icon-size);
  height: var(--icon-size);
}
.list-collections li a.link-collection i svg {
  opacity: 0.5;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--text-color);
}

.list-deviant {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-deviant li {
  position: relative;
  margin: 0 -16px;
  padding: 16px;
  display: grid;
  grid-template-columns: 36px 1fr -webkit-min-content;
  grid-template-columns: 36px 1fr min-content;
  grid-template-rows: 1fr -webkit-min-content;
  grid-template-rows: 1fr min-content;
  grid-template-areas: "avatar username follow" "avatar tagline follow";
  grid-gap: 0 2px;
  justify-content: space-between;
  align-items: center;
  color: #000;
  cursor: pointer;
}
.list-deviant li:hover::before {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.25;
  background: linear-gradient(115deg, #4cddbd66, #06f28666);
}
.list-deviant li .link-avatar {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: avatar;
  position: relative;
  top: 2px;
}
.list-deviant li .link-username {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: username;
  font-size: 16px;
  font-family: var(--font-family-bold);
  color: #000;
}
.list-deviant li .tagline {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: tagline;
  align-self: center;
  font-size: 12px;
}
.list-deviant li .link-follow {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 5;
  grid-area: follow;
  justify-self: end;
  align-self: center;
}
.list-deviant li .link-follow {
  margin-right: auto;
  vertical-align: top;
  display: inline-block;
  position: relative;
  font-size: 11px;
  font-family: var(--font-family-bold);
  text-transform: uppercase;
  color: var(--accent-color);
}
.list-deviant li .link-follow.active {
  padding-left: calc(16px);
  color: rgba(0, 0, 0, 0.5);
}
.list-deviant li .link-follow.active::after {
  position: absolute;
  left: 0;
  top: calc(50% + 3px);
  display: block;
  content: "";
  opacity: 0.5;
  width: 6px;
  height: 2px;
  border: 2px solid transparent;
  -webkit-transform: translateY(-50%) rotate(-45deg);
  margin-top: -4px;
  border-bottom-color: #999999;
  border-left-color: #999999;
}

/*
#modal-collect {
    width: 400px;
    form {
        input {
            background: #f4f4f4;
            // border: 2px dashed #ccc;
            color: #999;
            font-size: 16px;
            padding: 10px 16px;
            &::placeholder {
                color: #aaa;
            }
        }
    }
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 10px 0;
            a {
                display: block;
                background: #bbb;
                padding: 16px;
                border-radius: 3px;
                b {
                    font-size: 18px;
                    font-family: var(--font-family-regular);
                }
                span {
                    display: block;
                }
                &:hover {
                    background: #888;
                    b {
                        color: #fff;
                    }
                }
            }
            a.new {
                background-color: #eee;
                border: 2px dashed #ccc;
                color: #999;
            }
        }
    }
}
*/
.feed {
  --width: 640px;
  --background: #161a1f;
  --title-font-size: 28px;
  --title-font-family: var(--font-family-bold);
  --font-size: 16px;
  --avatar: 32px;
  --header-height: 64px;
  --header-bg-color: #161a1f;
  --header-padding: 8px 16px;
  --header-font-size: 16px;
  --more-size: 20px;
  --footer-icon-size: 24px;
  --footer-font-size: 16px;
  margin: auto;
  width: var(--width);
}
.feed .post.journal h1 {
  padding-top: 50px;
}

.feed.small {
  --width: 300px;
  --background: #161616;
  --title-font-size: 18px;
  --title-font-family: var(--font-family-regular);
  --font-size: 14px;
  --avatar: 20px;
  --header-height: 48px;
  --header-bg-color: #161616;
  --header-bg-color: transparent;
  --header-padding: 8px 16px;
  --header-font-size: 11px;
  --more-size: 16px;
  --footer-icon-size: 16px;
  --footer-font-size: 12px;
  margin-top: 60px;
}
.feed.small .post.journal h1 {
  padding-top: 0px;
}

.feed .card.post .actionbar {
  padding-bottom: 66px;
}
.feed .card.post .actionbar::before {
  position: absolute;
  content: "";
  margin-left: 16px;
  margin-top: 104px;
  width: 24px;
  height: 24px;
  display: block;
  background-image: url(../avatars/001.jpg);
  background-size: cover;
}
.feed .card.post .actionbar::after {
  content: "Add a new comment...";
  position: absolute;
  left: 60px;
  right: 16px;
  margin-top: 104px;
  height: 24px;
  display: block;
  color: #838592;
  color: #FFFFFF66;
  padding: 10px 16px 6px 16px;
  border: 1px solid #FFFFFF66;
}

.feed.small .card.post .actionbar {
  padding-bottom: 0;
}
.feed.small .card.post .actionbar::before {
  display: none;
}
.feed.small .card.post .actionbar::after {
  display: none;
}

.card {
  position: relative;
  width: var(--width);
  background: var(--background);
  padding: 16px;
  margin-bottom: 16px;
}
.card .card-header {
  z-index: var(--z-index-card-header);
}
.card h1 {
  position: relative;
  z-index: var(--z-index-card-content);
  font-size: var(--title-font-size);
  font-family: var(--title-font-family);
}
.card .text {
  position: relative;
  z-index: var(--z-index-card-content);
  font-size: var(--font-size);
  opacity: 0.8;
  line-height: 1.4;
}
.card .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  background-size: cover;
  z-index: var(--z-index-card-bg);
}

.card.journal h1,
.card.status-long h1 {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 16px;
}
.card.journal .gradient,
.card.status-long .gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-index-card-gradient);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
}
.card.status-short h1 {
  position: relative;
  z-index: var(--z-index-card-content);
  color: #fff;
  margin-bottom: 0;
  padding-top: 8px;
}
.card.status-short .bg {
  background-image: url(../art/posts/gradient_1.svg);
}

.card.poll h1 .pill {
  margin-left: 2px;
  position: relative;
  top: -1px;
  background: #fff;
  color: #000;
  font-family: var(--font-family-extra-bold);
  font-size: 11px;
  text-transform: uppercase;
  padding: 2px 4px;
  padding-top: 1px;
  border-radius: 3px;
  vertical-align: middle;
}

.card-header {
  margin: -16px;
  margin-bottom: 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  position: relative;
  height: var(--header-height);
  z-index: var(--z-index-card-content);
  background: var(--header-bg-color);
}
.card-header a.link-artist {
  display: flex;
  flex-shrink: 1;
  color: #ffffff99;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: var(--header-height);
  padding: var(--header-padding);
  font-family: var(--font-family-bold);
}
.card-header a.link-artist:hover {
  color: #fff;
}
.card-header a.link-artist .avatar {
  margin-right: 10px;
  vertical-align: middle;
  width: var(--avatar);
  height: var(--avatar);
}
.card-header a.link-artist .username {
  vertical-align: middle;
  font-size: var(--header-font-size);
}
.card-header .link-follow {
  display: inline-block;
  display: none;
  margin-right: auto;
  vertical-align: top;
  position: relative;
  height: 60px;
  padding: var(--header-padding);
  padding-top: 24px;
  margin-left: -16px;
  font-size: 11px;
  letter-spacing: 1.3px;
  font-family: var(--font-family-bold);
  text-transform: uppercase;
  color: var(--accent-color);
}
.card-header .link-follow.active {
  padding-left: calc(16px + 16px);
  color: rgba(255, 255, 255, 0.5);
}
.card-header .link-follow.active::after {
  position: absolute;
  left: calc(16px + 2px);
  top: calc(50% + 3px);
  display: block;
  content: "";
  opacity: 0.5;
  width: 6px;
  height: 2px;
  border: 2px solid transparent;
  -webkit-transform: translateY(-50%) rotate(-45deg);
  margin-top: -4px;
  border-bottom-color: #999999;
  border-left-color: #999999;
}
.card-header time {
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-left: auto;
  height: var(--header-height);
  margin-right: -16px;
  position: relative;
  font-size: var(--header-font-size);
}
.card-header time a {
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: #ffffff99;
  color: #ffffff66;
  padding-left: 16px;
  padding-right: 16px;
  height: var(--header-height);
}
.card-header time a:hover {
  color: #fff;
}
.card-header a.more-link {
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-width: var(--header-height);
  min-height: var(--header-height);
  padding: var(--header-padding);
  padding-left: 8px;
  padding-right: 8px;
}
.card-header a.more-link svg {
  position: relative;
  top: 1px;
  width: var(--more-size);
  height: var(--more-size);
  fill: #ffffff99;
  vertical-align: middle;
}
.card-header a.more-link:hover svg {
  fill: #fff;
}
.card-header a.more:hover svg {
  fill: var(--accent-color);
}

menu.menu-card {
  --padding: 24px;
  --font-size: 16px;
  --width: 200px;
  z-index: var(--z-index-menu);
  position: absolute;
  display: inline-block;
  padding: 8px 0;
  margin: 0;
  min-width: var(--width);
  background: #fff;
  color: #000;
  font-size: var(--font-size);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform-origin: 100% 0%;
  transform: scale(0.75) translateY(-20px);
  transition: var(--transition-bounce);
  top: 48px;
  right: 0;
}
menu.menu-card.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
menu.menu-card ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
menu.menu-card ul li {
  padding: 0;
  margin: 0;
}
menu.menu-card a {
  display: block;
  padding: 10px var(--padding);
  color: #444;
  text-align: left;
}
menu.menu-card a:hover {
  color: #000;
  background: #f4f4f4;
}
menu.menu-card hr {
  border: 0 solid transparent;
  border-top: 1px solid #000;
  opacity: 0.25;
  margin: 8px var(--padding);
}

.actionbar {
  position: relative;
  z-index: var(--z-index-card-content);
  margin: auto;
  margin: -16px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  justify-content: flex-start;
  background: #161616;
  background: transparent;
  /*
  a[href="#like"] svg {
      position: relative;
      top: 3px;
      left: 1px;
      width: 26px;
      height: 26px;
      // border: 1px solid #c00;
      transition: none !important;
  }
  */
}
.actionbar a.link-action {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: start;
  min-height: 48px;
  padding-left: 16px;
  padding-right: 16px;
}
.actionbar a.link-action i {
  display: inline-block;
  width: var(--footer-icon-size);
  height: var(--footer-icon-size);
  pointer-events: none;
}
.actionbar a.link-action i svg {
  display: block;
  width: var(--footer-icon-size);
  height: var(--footer-icon-size);
  fill: #ffffff99;
  vertical-align: middle;
}
.actionbar a.link-action b {
  padding-left: 4px;
  color: #ffffff99;
  font-size: var(--footer-font-size);
}
.actionbar a:hover i svg {
  fill: #fff;
}
.actionbar a:hover b {
  color: #fff;
}
.actionbar a[href="#fave"] {
  margin-right: -8px;
}
.actionbar a[href="#fave"] i {
  -webkit-animation: none;
}
.actionbar a[href="#fave"].active i {
  -webkit-animation: bounce 1000ms linear both 0s;
}
.actionbar a[href="#fave"].active svg {
  fill: var(--accent-color);
}
.actionbar .link-fave i svg {
  position: relative;
  top: 1px;
}
.actionbar a[href="#collect"] {
  display: none;
}
.actionbar .link-comment svg {
  position: relative;
  top: 1px;
  left: 1px;
}
.actionbar .link-share {
  margin-left: auto;
}
.actionbar .link-share b {
  display: none;
}

.post.status .actionbar a.link-fave {
  display: none;
}

.post.poll .actionbar a.link-fave {
  display: none;
}

.post .link-post {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  top: 48px;
  bottom: 48px;
}

.topics.row {
  --height: 70px;
  --outline-offset: 4px;
  height: calc(70px + (var(--outline-offset) * 2));
  margin-left: calc(-1 * (var(--outline-offset) * 1));
  margin-bottom: calc(16px - (var(--outline-offset) * 2));
  margin-top: calc(16px - (var(--outline-offset) * 2));
  padding: var(--outline-offset);
  white-space: nowrap;
  overflow: hidden;
}

Topic {
  opacity: 0;
}

a.topic {
  position: relative;
  display: inline-block;
  width: 170px;
  height: 70px;
  margin-right: 5px;
  overflow: hidden;
}
a.topic b {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
  font-family: var(--font-family-bold);
  font-size: 16px;
  z-index: 5;
}
a.topic .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  z-index: 1;
  transform: scale(1.1);
  transition: var(--transition-default);
}
a.topic .gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: #282828;
  opacity: 0.5;
  transition: var(--transition-default);
  transition-duration: 0.4s;
}
a.topic:hover .bg {
  transform: scale(1);
}
a.topic:hover .gradient {
  background: #323232;
  opacity: 0.8;
}

:root {
  --max-width: 1024px;
  --font-family-light: "Devious Sans Light", -apple-system, SF Pro Text,
      SF UI Text, Roboto, system-ui, Noto, "Helvetica Neue", Helvetica, Arial,
      sans-serif;
  --font-family-regular: "Devious Sans Regular", -apple-system, SF Pro Text,
      SF UI Text, Roboto, system-ui, Noto, "Helvetica Neue", Helvetica, Arial,
      sans-serif;
  --font-family-bold: "Devious Sans Bold", -apple-system, SF Pro Text,
      SF UI Text, Roboto, system-ui, Noto, "Helvetica Neue", Helvetica, Arial,
      sans-serif;
  --font-family-medium: "Devious Sans Medium", -apple-system, SF Pro Text,
      SF UI Text, Roboto, system-ui, Noto, "Helvetica Neue", Helvetica, Arial,
      sans-serif;
  --font-family-extra-bold: "Devious Sans Extra Bold", -apple-system, SF Pro Text,
      SF UI Text, Roboto, system-ui, Noto, "Helvetica Neue", Helvetica, Arial,
      sans-serif;
  --transition-fast: all 0.1s cubic-bezier(0, 0, 0.58, 1);
  --transition-medium: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  --transition-slow: all 0.6s cubic-bezier(0, 0, 0.58, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.28, 1.9, 0.61, 1);
  --transition-smooth: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  /* easeOutSine */
  --transition-default: var(--transition-medium);
  --z-index-modal: 1000;
  --z-index-overlay: 900;
  --z-index-header: 500;
  --z-index-sticky: 400;
  --z-index-menu: 300;
  --z-index-card-header: 100;
  --z-index-card-content: 99;
  --z-index-card-gradient: 98;
  --z-index-card-bg: 97;
}

* {
  box-sizing: border-box;
  outline-offset: 3px;
  transition: background 0.8s ease-in-out, color 0.1s ease-in-out, fill 0.1s ease-in-out, border 0.1s ease-in-out;
}

html {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: var(--font-family-regular);
  background: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
}
body.modal-open {
  height: 100vh;
  overflow-y: hidden;
  padding-right: 15px;
}

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline: 1px solid var(--accent-color);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

a {
  color: var(--link-color);
  transition: var(--transition-fast);
  text-decoration: none;
}
a:hover {
  color: var(--hover-color);
}

svg {
  transition: var(--transition-fast);
}

a[href="#fave"] i {
  -webkit-animation: none;
}

a[href="#fave"].active i {
  -webkit-animation: bounce 1000ms linear both 0s;
}

button {
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid #fff;
}

::selection {
  background-color: var(--accent-color);
}

.text {
  line-height: 1.6;
}
.text b, .text strong {
  font-weight: normal;
  font-family: var(--font-family-bold);
}
.text a {
  text-decoration: underline;
}
.text ul, .text ol {
  margin-left: 0;
  padding-left: 24px;
}
.text ul li, .text ol li {
  margin: 2px 0;
}
.text ul {
  list-style: square;
}
.text mark {
  background-color: var(--accent-color);
}
.text code {
  display: block;
  font-size: 13px;
  padding: 8px 8px;
  background: rgba(255, 255, 255, 0.1);
  font-family: Menlo, Monaco, Consolas, "Courier New", Courier, monospace;
}

.avatar {
  width: 32px;
  height: 32px;
}

svg {
  width: 24px;
  height: 24px;
  fill: #fff;
  color: var(--link-color);
  transition: var(--transition-fast);
}

#hidden,
.hidden {
  display: none;
}

.identity {
  --avatar-size: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 4px;
}
.identity .avatar {
  display: inline-block;
  width: var(--avatar-size);
  height: var(--avatar-size);
  vertical-align: middle;
}
.identity b {
  display: inline-grid;
  place-items: center;
  position: relative;
  height: 24px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: normal;
}

body.has-nb .page {
  margin-left: 72px;
}

.page {
  --side-padding: 40px;
  min-height: 1800px;
  margin: auto;
  margin-top: 54px;
  padding-bottom: 200px;
  background: #06070c;
}

.feed-header {
  position: relative;
  background: #15191e;
  margin-bottom: 32px;
  --first-row-height: calc(72px + 16px);
}
.feed-header .row1 {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #000;
}
.feed-header .row2 .tab-bar {
  background: #1c1f24;
}
.feed-header .page-title {
  display: grid;
  place-items: center;
  height: var(--first-row-height);
  position: absolute;
  z-index: 1;
  margin: 0 0 0 var(--side-padding);
  font-size: 20px;
  font-family: var(--font-family-bold);
}
.feed-header .artist-bar {
  display: block;
  height: calc(var(--first-row-height) + 16px);
  margin-left: 240px;
}
.feed-header .feed-title {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 300px;
  height: 72px;
  margin-left: 40px;
  display: grid;
  place-items: center start;
}
.feed-header .feed-title h2 {
  position: relative;
  top: -2px;
  font-size: 32px;
  font-family: var(--font-family-bold);
}
.feed-header .feed-title h2 span {
  position: relative;
  top: -1px;
  font-size: 14px;
  margin-left: 8px;
  font-family: var(--font-family-light);
}
.feed-header .tab-bar {
  --height: 72px;
  --margin-bottom: 0;
}

.layout {
  margin: 0 40px;
  position: relative;
}

.grid {
  margin-top: 56px;
}
.grid .time-divider {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
  padding: 16px 0 0 0;
  margin: 16px 0;
  color: rgba(255, 255, 255, 0.5);
}
.grid .time-divider:first-of-type {
  margin-top: -16px;
}

body.has-time-divider .grid .time-divider {
  display: block;
}

.grid.stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  grid-gap: 50px 40px;
  padding-top: 20px;
}
.grid.stack .time-divider {
  color: rgba(255, 255, 255, 0.5);
  grid-column: 1/-1;
  margin: 0;
  margin-bottom: -16px;
  margin-top: -16px;
  margin-left: -3px;
}
.grid.stack .item {
  position: relative;
  padding-top: 100%;
}
.grid.stack .item .thumb {
  display: block;
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: #171a1f;
}
.grid.stack .item .thumb img {
  height: 100%;
  width: 100%;
  display: inline-block;
  object-fit: cover;
  object-position: 50% 25%;
}
.grid.stack .item .info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  padding: 16px;
  background: #171a1f;
}
.grid.stack .item .info .title {
  display: none;
}
.grid.stack .item .info .artist {
  --avatar-size: 25px;
}
.grid.stack .item .info .artist img {
  vertical-align: middle;
  width: var(--avatar-size);
  height: var(--avatar-size);
}
.grid.stack .item .info .artist b {
  width: calc(100% - 40px - 40px);
  display: inline-block;
  height: var(--avatar);
  line-height: var(--avatar);
  font-size: 14px;
  margin-left: 8px;
  vertical-align: middle;
  transition: var(--transition-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid.stack .item .info .stats {
  display: none;
}
.grid.stack .item::before {
  --offset: 40px;
  content: "";
  position: absolute;
  top: -20px;
  left: var(--offset);
  right: var(--offset);
  height: 20px;
  z-index: 0;
  background: #23262b;
}
.grid.stack .item::after {
  --offset: 20px;
  content: "";
  position: absolute;
  top: -10px;
  left: var(--offset);
  right: var(--offset);
  height: 20px;
  z-index: 0;
  background: #2a2f33;
}

.grid.feed {
  --width: 640px;
  --header-height: 64px;
  --stats-height: 52px;
  --title-height: 52px;
  --comments-height: 60px;
  --footer-height: calc( var(--stats-height) + var(--title-height) + var(--comments-height));
  max-width: var(--width);
  margin: auto;
  margin-top: 56px;
  padding-top: 20px;
}
.grid.feed .item.art {
  position: relative;
  padding-top: var(--header-height);
  padding-bottom: var(--footer-height);
  margin-bottom: 16px;
}
.grid.feed .item.art a.thumb img {
  max-width: var(--width);
  width: 100%;
  margin-bottom: -3px;
}
.grid.feed .item.art a.collect {
  display: none;
}
.grid.feed .item.art .info a.title {
  position: absolute;
  bottom: calc( var(--stats-height) + var(--comments-height));
  left: 0;
  right: 0;
  background: #161a1f;
  height: var(--title-height);
  display: flex;
  align-items: center;
  padding: 0 16px;
  padding-top: 16px;
  font-size: 28px;
  font-family: var(--font-family-bold);
}
.grid.feed .item.art .info a.artist {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 16px;
  height: var(--header-height);
  display: block;
  display: flex;
  align-items: center;
  background: #161a1f;
}
.grid.feed .item.art .info a.artist .avatar {
  margin-right: 16px;
}
.grid.feed .item.art .info a.artist b {
  position: relative;
  top: -2px;
  font-size: 16px;
  font-family: var(--font-family-bold);
}
.grid.feed .item.art .info .stats {
  position: absolute;
  bottom: calc(var(--comments-height));
  left: 0;
  right: 0;
  padding: 0 16px;
  padding-bottom: 8px;
  height: var(--stats-height);
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  background: #161a1f;
}
.grid.feed .item.art .info .stats a {
  display: inline-flex;
  align-items: center;
  margin: 0 32px 0 0;
}
.grid.feed .item.art .info .stats a i {
  margin-right: 8px;
}
.grid.feed .item.art .info .stats a b {
  position: relative;
  top: -1px;
}
.grid.feed .item.art .gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 16px;
  height: calc( var(--comments-height));
  background: #161a1f;
}
.grid.feed .item.art .gradient::before {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background-image: url(../avatars/001.jpg);
  background-size: cover;
}
.grid.feed .item.art .gradient::after {
  content: "Add a new comment...";
  width: calc(100% - 40px - 16px - 16px);
  height: 24px;
  display: block;
  color: #838592;
  margin-left: 40px;
  padding: 8px 16px;
  border: 1px solid #838591;
}

.grid,
.grid .item,
.grid .item a,
.grid .item .info,
.grid .item .thumb {
  transition-duration: 0s !important;
}

.toggle {
  --icon-size: 32px;
  --size: 40px;
}
.toggle a {
  display: inline-grid !important;
  place-items: center;
  width: var(--size);
  height: var(--size);
}
.toggle a i {
  display: block;
  opacity: 0.3;
  width: var(--icon-size);
  height: var(--icon-size);
}
.toggle a i svg {
  fill: #fff;
  width: var(--icon-size);
  height: var(--icon-size);
}
.toggle a.active i {
  opacity: 1;
}
.toggle a[data-tooltip]::before {
  content: attr(data-tooltip);
  display: block;
  position: absolute;
  min-width: 50px;
  background: #fff;
  color: #000;
  padding: 8px 10px;
  font-size: 12px;
  text-align: center;
  margin-top: -40px;
  margin-left: -14px;
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
}
.toggle a[data-tooltip]:hover::before {
  opacity: 1;
}
.toggle a[data-tooltip]:active::before {
  display: none;
}
.toggle a[data-tooltip]::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #fff;
  border-left-color: #fff;
  margin-top: -12px;
  margin-left: 18px;
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
}
.toggle a[data-tooltip]:hover::after {
  opacity: 1;
}
.toggle a[data-tooltip]:active::after {
  display: none;
}

.layout.view-deviations .col1 {
  display: block;
}
.layout.view-deviations .col1 .options {
  position: absolute;
  top: -60px;
  right: 0;
  z-index: 50;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 200px;
  text-align: right;
}
.layout.view-deviations .col1 .options label {
  position: relative;
  top: 4px;
  margin-right: 4px;
}
.layout.view-deviations .col2 {
  display: none;
}
.layout.view-deviations .col3 {
  display: none;
}

.layout.view-posts .col1 {
  display: none;
}
.layout.view-posts .col2 {
  display: block;
}
.layout.view-posts .col3 {
  display: none;
}

.layout.view-dual {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "grid feed";
  grid-gap: 32px;
  align-items: start;
}
.layout.view-dual .col1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: grid;
}
.layout.view-dual .col1 .options {
  display: none;
}
.layout.view-dual .col2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: feed;
}
.layout.view-dual .col3 {
  display: none;
}

.layout.view-stacked .col1 {
  display: none;
}
.layout.view-stacked .col2 {
  display: none;
}
.layout.view-stacked .col3 {
  display: block;
}
.layout.view-stacked .col3 .options {
  position: absolute;
  right: 0;
  z-index: 10;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 40px;
  top: calc(54px + 72px + 16px);
  background: #16191e;
  width: 200px;
  text-align: right;
}
.layout.view-stacked .col3 .options label {
  position: relative;
  top: 4px;
  margin-right: 4px;
}

#watch-artist {
  display: none;
}

.tab-bar > ul > li > a.link i {
  --size: 20px;
  position: relative;
  top: 9px;
  opacity: 0.5;
}

.tab-bar > ul > li.extra {
  display: none;
}

.row1 .artist-bar .list {
  margin-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  padding-left: 8px;
}

body.has-timedividers .time-divider {
  display: block;
}

body:not(.has-timedividers) .time-divider {
  display: none !important;
}

#watch-artist .options {
  opacity: 0.1;
  transition: var(--transition-default);
}
#watch-artist .options:hover {
  opacity: 1;
}

body.is-inverted .feed-header {
  --first-row-height: 72px;
}
body.is-inverted .feed-title {
  position: absolute;
  top: 190px;
}
body.is-inverted .layout.view-deviations .col1 .options {
  position: absolute;
  top: 100px;
}
body.is-inverted .layout.view-deviations .artist-bar,
body.is-inverted .layout.view-posts .artist-bar {
  --height: 80px;
  --padding-top: 6px;
  margin-left: -10px;
  margin-bottom: 80px;
}
body.is-inverted .artist-bar a.paddle {
  position: relative;
  top: -10px;
}
body.is-inverted .artist-bar a.paddle.next {
  background: linear-gradient(to right, transparent, #05060b 50%);
}

body.is-simple .feed-header h1.page-title {
  display: none;
}
body.is-simple .feed-header .feed-title h2.normal {
  display: none;
}
body.is-simple .feed-header .feed-title h2.simple {
  display: block;
  font-size: 20px;
}
body.is-simple .feed-header .feed-title h2.simple span {
  font-size: 12px;
}
body.is-simple .feed-header .artist-bar {
  margin-left: 29px;
}
body.is-simple .feed-header .artist-bar .list {
  margin-left: 0px;
  border-left: none;
  padding-left: 0px;
}

body:not(.is-simple) .feed-header h1.page-title {
  display: grid;
}
body:not(.is-simple) .feed-header .feed-title h2.normal {
  display: block;
}
body:not(.is-simple) .feed-header .feed-title h2.simple {
  display: none;
}
body:not(.is-simple) .feed-header .artist-bar {
  margin-left: 240px;
}
body:not(.is-simple) .feed-header .artist-bar .list {
  margin-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  padding-left: 8px;
}

.artist-bar {
  --size: 50px;
  --height: 50px;
  --padding-top: 16px;
  --gap: 24px;
  --border-width: 4px;
  position: relative;
  margin-right: 40px;
  padding-top: var(--padding-top);
  white-space: nowrap;
  overflow: hidden;
}
.artist-bar .primary {
  --gap: 16px;
  display: inline-block;
  vertical-align: middle;
  height: var(--height);
}
.artist-bar .primary a {
  position: relative;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  margin-left: var(--gap);
  background: #333;
  text-align: center;
}
.artist-bar .primary a.active {
  box-shadow: 0 0 0 1px #000, 0 0 0 var(--border-width) var(--accent-color);
}
.artist-bar .primary a i {
  position: relative;
  top: 10px;
  --icon-size: 32px;
  display: block;
  margin: auto;
  width: var(--icon-size);
  height: var(--icon-size);
}
.artist-bar .primary a i svg {
  width: var(--icon-size);
  height: var(--icon-size);
}
.artist-bar .primary a b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  font-size: 11px;
  text-align: center;
  margin-left: -5px;
  width: calc(var(--size) + 10px);
}
.artist-bar a.paddle {
  --icon-size: 50px;
  --height: 50px;
  --width: 50px;
  position: absolute !important;
  display: block;
  z-index: 20;
  top: 0;
  bottom: 0;
  width: var(--width);
  background: linear-gradient(to right, transparent, #16191edd 50%);
  display: none;
}
.artist-bar a.paddle.prev {
  left: 70px;
}
.artist-bar a.paddle.next {
  right: -6px;
}
.artist-bar a.paddle.active {
  display: block;
}
.artist-bar a.paddle i {
  position: relative;
  margin-top: 16px;
  margin-left: 15px;
  display: block;
  width: 30px;
  height: var(--icon-size);
}
.artist-bar a.paddle i svg {
  fill: #fff;
  margin-left: -10px;
  width: var(--icon-size);
  height: var(--icon-size);
}
.artist-bar .list {
  display: inline-block;
  vertical-align: middle;
  height: var(--height);
}
.artist-bar .list a {
  position: relative;
  margin-left: var(--gap);
  display: inline-block;
  width: var(--size);
  height: 72px;
}
.artist-bar .list a .avatar-holder {
  width: var(--size);
  height: var(--size);
  transition: var(--transition-fast);
  transform: translateY(0);
  transition-timing-function: ease-out;
  transition-duration: 0.15s;
}
.artist-bar .list a img.avatar {
  width: var(--size);
  height: var(--size);
  box-shadow: 0 0 0 1px #000, 0 0 0 var(--border-width) #fff;
}
.artist-bar .list a b {
  position: absolute;
  left: 0;
  right: 0;
  top: 54px;
  font-size: 11px;
  text-align: center;
  margin-left: -5px;
  width: calc(var(--size) + 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition-fast);
}
.artist-bar .list a:hover .avatar-holder {
  transform: translateY(-4px);
  transition-timing-function: ease-out;
  transition-duration: 0.15s;
}
.artist-bar .list a.old img.avatar {
  box-shadow: none;
  opacity: 0.6;
}
.artist-bar .list a.old b {
  color: #ffffff66;
  transition: var(--transition-fast);
}
.artist-bar .list a.old:hover img.avatar {
  opacity: 1;
}
.artist-bar .list a.old:hover b {
  color: var(--accent-color);
}
.artist-bar .list a.active img.avatar {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 0 1px #000, 0 0 0 var(--border-width) var(--accent-color);
}
.artist-bar .list a.active b {
  color: var(--accent-color);
}

.more-menu {
  --padding: 24px;
  --font-size: 16px;
  --width: 200px;
  z-index: var(--z-index-menu);
  position: absolute;
  display: inline-block;
  padding: 8px 0;
  margin: 0;
  min-width: var(--width);
  background: #fff;
  color: #000;
  font-size: var(--font-size);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform-origin: 100% 0%;
  transform: scale(0.75) translateY(-20px);
  transition: var(--transition-bounce);
  display: inline-block;
  left: auto;
  margin-left: calc( -1 * var(--width));
  margin-top: calc(40px + 2px);
  transform-origin: 100% 0;
}
.more-menu.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.more-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.more-menu ul li {
  padding: 0;
  margin: 0;
}
.more-menu a {
  display: block;
  padding: 10px var(--padding);
  color: #444;
  text-align: left;
}
.more-menu a:hover {
  color: #000;
  background: #f4f4f4;
}
.more-menu hr {
  border: 0 solid transparent;
  border-top: 1px solid #000;
  opacity: 0.25;
  margin: 8px var(--padding);
}

.spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #777;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 {
  animation-delay: -1s;
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}
#demo {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10000;
  width: 270px;
  min-height: 20px;
  padding: 16px;
  padding-bottom: 8px;
  background: #333333dd;
  font-size: 12px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
#demo:hover {
  background: #333333ff;
}
#demo h1 {
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 6px;
}
#demo .form-row-switch {
  margin-bottom: 8px;
  --padding: 6px;
}
#demo .form-row-switch label {
  position: relative;
  top: 6px;
  opacity: 0.75;
}
#demo .form-row-switch .label-left,
#demo .form-row-switch .label-right {
  position: relative;
  top: 4px;
  height: 22px;
  padding-top: 2px;
  vertical-align: middle;
  opacity: 0.75;
  width: 120px;
}
#demo .form-row-switch .label-left {
  text-align: right;
  padding-right: var(--padding);
}
#demo .form-row-switch .label-right {
  text-align: left;
  padding-left: var(--padding);
}

.swipe-bar {
  --size: 50px;
  --height: 50px;
  --padding-top: 16px;
  --gap: 24px;
  --border-width: 4px;
  max-width: 600px;
  border: 1px solid #c00;
  margin: 60px 0;
  padding: 0 0;
  height: 85px;
}
.swipe-bar .swiper-slide {
  width: var(--size);
}
.swipe-bar a {
  position: relative;
  margin-left: var(--gap);
  display: inline-block;
  width: var(--size);
  margin-top: 8px;
}
.swipe-bar a img.avatar {
  width: var(--size);
  height: var(--size);
  box-shadow: 0 0 0 1px #000, 0 0 0 var(--border-width) #fff;
  transform: scale(1);
  transition: var(--transition-fast);
}
.swipe-bar a b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  font-size: 11px;
  text-align: center;
  margin-left: -5px;
  width: calc(var(--size) + 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition-fast);
}
.swipe-bar a:hover img.avatar {
  transform: scale(1.1);
}
.swipe-bar a.old img.avatar {
  box-shadow: none;
  box-shadow: inset 0 0 0 50px #333;
  opacity: 0.6;
}
.swipe-bar a.old b {
  color: #ffffff66;
  transition: var(--transition-fast);
}
.swipe-bar a.old:hover img.avatar {
  opacity: 1;
}
.swipe-bar a.old:hover b {
  color: var(--accent-color);
}
.swipe-bar a.active img.avatar {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 0 1px #000, 0 0 0 var(--border-width) var(--accent-color);
}
.swipe-bar a.active b {
  color: var(--accent-color);
}

/* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bl%3A1%2Cs%3A%5B%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A500%2CD%3A0%2Cf%3A%7Bx%3A1%2Cy%3A0.9%7D%2Ct%3A%7Bx%3A1%2Cy%3A1%7D%2Cs%3A1%2Cb%3A4%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A0%2Cf%3A%7Bx%3A0.9%2Cy%3A1%7D%2Ct%3A%7Bx%3A1%2Cy%3A1%7D%2Cs%3A1%2Cb%3A6%7D%2C%7BT%3A%22t%22%2Ce%3A%22b%22%2Cd%3A500%2CD%3A0%2Cf%3A%7Bx%3A0%2Cy%3A0%7D%2Ct%3A%7Bx%3A0%2Cy%3A-10%7D%2Cs%3A1%2Cb%3A-6%7D%2C%7BT%3A%22t%22%2Ce%3A%22b%22%2Cd%3A500%2CD%3A500%2Cf%3A%7Bx%3A0%2Cy%3A0%7D%2Ct%3A%7Bx%3A0%2Cy%3A10%7D%2Cs%3A1%2Cb%3A0%7D%5D%7D */
@keyframes jelly-bounce {
  0% {
    transform: matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  2% {
    transform: matrix3d(0.921, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, -4.051, 0, 1);
  }
  2.35% {
    transform: matrix3d(0.926, 0, 0, 0, 0, 0.945, 0, 0, 0, 0, 1, 0, 0, -4.907, 0, 1);
  }
  3.4% {
    transform: matrix3d(0.941, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, -7.445, 0, 1);
  }
  3.95% {
    transform: matrix3d(0.949, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, -8.674, 0, 1);
  }
  4.7% {
    transform: matrix3d(0.96, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, -10.149, 0, 1);
  }
  5.96% {
    transform: matrix3d(0.978, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, -11.948, 0, 1);
  }
  6.81% {
    transform: matrix3d(0.989, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, -12.657, 0, 1);
  }
  7.06% {
    transform: matrix3d(0.992, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, -12.788, 0, 1);
  }
  7.91% {
    transform: matrix3d(1.002, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -12.995, 0, 1);
  }
  9.36% {
    transform: matrix3d(1.016, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, -12.663, 0, 1);
  }
  10.21% {
    transform: matrix3d(1.023, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, -12.207, 0, 1);
  }
  12.16% {
    transform: matrix3d(1.031, 0, 0, 0, 0, 1.015, 0, 0, 0, 0, 1, 0, 0, -10.93, 0, 1);
  }
  12.46% {
    transform: matrix3d(1.032, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, -10.741, 0, 1);
  }
  13.61% {
    transform: matrix3d(1.033, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, -10.106, 0, 1);
  }
  14.76% {
    transform: matrix3d(1.032, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, -9.649, 0, 1);
  }
  14.96% {
    transform: matrix3d(1.032, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, -9.59, 0, 1);
  }
  17.02% {
    transform: matrix3d(1.026, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -9.3, 0, 1);
  }
  17.52% {
    transform: matrix3d(1.024, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, -9.305, 0, 1);
  }
  17.77% {
    transform: matrix3d(1.023, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, -9.316, 0, 1);
  }
  20.52% {
    transform: matrix3d(1.01, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, -9.657, 0, 1);
  }
  21.32% {
    transform: matrix3d(1.007, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, -9.78, 0, 1);
  }
  21.57% {
    transform: matrix3d(1.006, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, -9.817, 0, 1);
  }
  25.23% {
    transform: matrix3d(0.994, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -10.15, 0, 1);
  }
  26.08% {
    transform: matrix3d(0.992, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -10.165, 0, 1);
  }
  29.03% {
    transform: matrix3d(0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.104, 0, 1);
  }
  31.63% {
    transform: matrix3d(0.991, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -10.013, 0, 1);
  }
  35.19% {
    transform: matrix3d(0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.96, 0, 1);
  }
  36.74% {
    transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.965, 0, 1);
  }
  42.74% {
    transform: matrix3d(1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.008, 0, 1);
  }
  44.29% {
    transform: matrix3d(1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.01, 0, 1);
  }
  44.44% {
    transform: matrix3d(1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.01, 0, 1);
  }
  49.9% {
    transform: matrix3d(1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1);
  }
  50% {
    transform: matrix3d(1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1);
  }
  53.15% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.162, 0, 1);
  }
  56.26% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.789, 0, 1);
  }
  59.41% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.289, 0, 1);
  }
  59.86% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.128, 0, 1);
  }
  62.51% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.379, 0, 1);
  }
  68.77% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.479, 0, 1);
  }
  75.03% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.157, 0, 1);
  }
  75.28% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.15, 0, 1);
  }
  87.54% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.013, 0, 1);
  }
  90.69% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.006, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
/* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bl%3A1%2Cs%3A%5B%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A0%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A1%2Cy%3A0.5%7D%2Cs%3A1%2Cb%3A4%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A0%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A1%2Cy%3A2%7D%2Cs%3A1%2Cb%3A6%7D%5D%7D */
@keyframes jelly {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.7% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.24, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.81% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.269, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.41% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.21, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.21% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.178, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.61% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.11% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.52% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.887, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.72% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  21.32% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.832, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  24.32% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.833, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25.23% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.839, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.889, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.93% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  35.54% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.74% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  41.04% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  44.44% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  52.15% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  59.86% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  63.26% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  75.28% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  85.49% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  90.69% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
body .link-all {
  border-radius: 4px;
}
body .group-avatar {
  border-radius: 4px;
}
body .avatar {
  border-radius: 4px;
}
body .artist-bar .list a img.avatar {
  --size: 48px;
}
body .artist-bar .list a.old img.avatar {
  box-shadow: none;
  opacity: 1;
}
body .artist-bar .list a.old b {
  color: #ffffff;
}
body .artist-bar .list a img.avatar {
  box-shadow: none;
}
body .artist-bar .list a.active img.avatar {
  box-shadow: 0 0 0 1px #000, 0 0 0 var(--border-width) var(--accent-color);
}

.menu-deviants {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 150px;
  right: 16px;
  background: #fff;
  width: 250px;
  min-height: 200px;
}
.menu-deviants input {
  margin: 16px;
  margin-bottom: 8px;
  display: block;
  width: calc(100% - 16px - 16px);
  padding: 8px 0;
  font-size: 16px;
  border: 1px solid var(--accent-color);
  border-width: 0 0 2px 0;
}
.menu-deviants ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.menu-deviants a {
  width: 100%;
  --avatar-size: 32px;
  gap: 8px;
  padding: 8px 16px;
  color: #000;
}
.menu-deviants a b {
  font-size: 16px;
}

body.has-circle .link-all {
  border-radius: 50%;
}
body.has-circle .group-avatar {
  border-radius: 0;
}
body.has-circle .avatar {
  border-radius: 50%;
}
body.has-circle .artist-bar .list a.old b {
  color: #ffffff;
}
body.has-circle .artist-bar .list a.active img.avatar {
  box-shadow: 0 0 0 1px #000, 0 0 0 var(--border-width) var(--accent-color);
}

body.has-border .artist-bar .list a img.avatar {
  box-shadow: 0 0 0 1px #000, 0 0 0 var(--border-width) #fff;
}
body.has-border .artist-bar .list a.old img.avatar {
  box-shadow: none;
}

body.has-border.has-thinner .link-all,
body.has-thinner .link-all {
  --border-width: 3px;
}
body.has-border.has-thinner .artist-bar .list a img.avatar,
body.has-thinner .artist-bar .list a img.avatar {
  --border-width: 4px;
  box-shadow: 0 0 0 2px #000, 0 0 0 var(--border-width) #838592;
}
body.has-border.has-thinner .artist-bar .list a.old img.avatar,
body.has-thinner .artist-bar .list a.old img.avatar {
  box-shadow: none;
}
body.has-border.has-thinner .artist-bar .list a.active img.avatar,
body.has-thinner .artist-bar .list a.active img.avatar {
  --border-width: 5px;
  box-shadow: 0 0 0 2px #000, 0 0 0 var(--border-width) var(--accent-color);
}
body.has-border.has-thinner .artist-bar .list a.active b,
body.has-thinner .artist-bar .list a.active b {
  --border-width: 5px;
  color: var(--accent-color);
}
body.has-border.has-thinner .artist-bar .primary a.active b,
body.has-thinner .artist-bar .primary a.active b {
  --border-width: 5px;
  color: var(--accent-color);
}

body.has-opacity .artist-bar .list a.old img.avatar {
  opacity: 0.6;
}
body.has-opacity .artist-bar .list a.old.active img.avatar {
  opacity: 1;
}
body.has-opacity .artist-bar .list a.old b {
  color: #ffffff66;
}

body.has-borderwhite .artist-bar .list a img.avatar {
  box-shadow: 0 0 0 2px #000, 0 0 0 var(--border-width) #f2f2f2;
}

/* From Dan Eden's animate.css: http://daneden.me/animate/ */
@keyframes echo {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    opacity: 0;
  }
}
.artist-bar .list a .avatar-holder {
  position: relative;
  display: block;
  transition-timing-function: ease-out;
  transition-duration: 0.15s;
}

.artist-bar .list a .avatar-holder::before {
  position: absolute;
  content: "";
  top: -2px;
  left: -2px;
  bottom: 0px;
  right: 0px;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--accent-color);
  z-index: 5;
  -webkit-transform: scale(1);
  -webkit-transition: all 0.4s ease-out;
  opacity: 0;
}

.artist-bar .list a:focus .avatar-holder::before {
  box-shadow: 0 0 0 2px var(--accent-color);
  -webkit-transition: all 0.4s cubic-bezier(0.28, 1.9, 0.61, 1);
  opacity: 0;
}

body.has-activemicro .artist-bar .list a:focus .avatar-holder::before {
  animation: echo 1s 3;
}

.artist-bar {
  height: 104px;
}

.artist-bar .list a {
  margin-left: 35px;
}

.artist-bar .primary a b,
.artist-bar .list a b {
  font-size: 14px;
  color: #B1B1B9;
  left: -4px;
  right: -4px;
  bottom: -20px;
  display: block;
  width: calc(var(--size) + 16px);
  /* font-family: "Devious Sans Light"; */
  -webkit-font-smoothing: antialiased;
}

.artist-bar .primary a b {
  position: relative;
  bottom: -22px;
}

body .artist-bar .list a.old b {
  color: #B1B1B9;
}

.artist-bar .list a:hover b {
  color: var(--accent-color);
}

body.has-thinner .artist-bar .list a.active img.avatar {
  --border-width: 4px;
}

body.has-borderthick .artist-bar .primary a.active {
  --border-width: 5px ;
}

body.has-borderthick .artist-bar .list a.active img.avatar {
  --border-width: 5px ;
}

body.has-activewhitetext .artist-bar .list a:not(.old) b {
  color: #f2f2f2;
}