@charset "UTF-8";
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1);
  }
  40% {
    -webkit-transform: scale3d(.75, 1.25, 1);
    transform: scale3d(.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1);
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1);
  }
  40% {
    -webkit-transform: scale3d(.75, 1.25, 1);
    transform: scale3d(.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1);
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  0%, 11.1%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
    transform: skewX(-.78125deg) skewY(-.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(.390625deg) skewY(.390625deg);
    transform: skewX(.390625deg) skewY(.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
    transform: skewX(-.1953125deg) skewY(-.1953125deg);
  }
}
@keyframes jello {
  0%, 11.1%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
    transform: skewX(-.78125deg) skewY(-.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(.390625deg) skewY(.390625deg);
    transform: skewX(.390625deg) skewY(.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
    transform: skewX(-.1953125deg) skewY(-.1953125deg);
  }
}
.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.bounceIn {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInDown {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInUp {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}
.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) rotate(30deg);
    transform: scale(.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) rotate(30deg);
    transform: scale(.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
}

.animated.faster {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (prefers-reduced-motion:reduce), (print) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}
@-webkit-keyframes pulsePlaceholder {
  0% {
    background-color: var(--sptbl-quoted-spout-bg);
  }
  50% {
    background-color: var(--sptbl-skeleton-bg);
  }
  100% {
    background-color: var(--sptbl-quoted-spout-bg);
  }
}
@keyframes pulsePlaceholder {
  0% {
    background-color: var(--sptbl-quoted-spout-bg);
  }
  50% {
    background-color: var(--sptbl-skeleton-bg);
  }
  100% {
    background-color: var(--sptbl-quoted-spout-bg);
  }
}
@-webkit-keyframes jiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}
@keyframes jiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}
/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
:root {
  --sptbl-danger-color: #ff4265;
  --sptbl-danger-color-lighten-5: #fa2a67;
  --sptbl-success-color: #35c85f;
  --sptbl-warning-color: #ffa500;
  --sptbl-rating-text-color: #ffffff;
  --sptbl-a-rating-bg-color: #45c3ad;
  --sptbl-b-rating-bg-color: #6e8fd9;
  --sptbl-c-rating-bg-color: #fad068;
  --sptbl-d-rating-bg-color: #fd728a;
  --sptbl-normal-rating-bg-color: #45c3ad;
  --sptbl-satisfactory-rating-bg-color: #6e8fd9;
  --sptbl-disruptive-rating-bg-color: #fad068;
  --sptbl-problematic-rating-bg-color: #fd728a;
  --sptbl-notification-color: #ff4a6c;
  --sptbl-notification-color-lighten: #ff748e;
  --sptbl-thread-summary-button: #c067d5;
  --sptbl-primary-border-radius: 10px;
  --sptbl-secondary-border-radius: 5px;
  --sptbl-tertiary-border-radius: 2px;
  --sptbl-field-border-radius: 16px;
  --sptbl-field-focus-ring-width: 2px;
  --sptbl-primary-avatar-size: 52px;
  --sptbl-primary-offset-size: 15px;
  --sptbl-primary-name-size: 16px;
  --sptbl-primary-username-size: 14px;
  --sptbl-leave-chat-btn-bg: #ed8655;
  --sptbl-leave-chat-btn-bg-secondary: #d16c3c;
  --sptbl-leave-chat-btn-tint: rgba(237, 134, 85, 0.13);
  --sptbl-leave-chat-btn-border: rgba(237, 134, 85, 0.38);
  --sptbl-chat-bubble-out-color: #ffffff;
  --sptbl-pods-host-color: #ff8b10;
  --sptbl-pods-moderator-color: #d39be4;
  --sptbl-pods-speaker-color: #93d7a8;
  --sptbl-pods-listener-color: #8fc8e0;
  --sptbl-minimized-pod-color: #ff963c;
  --sptbl-end-pod-color: #ff963c;
  --sptbl-raise-hand-color: #e3b552;
  --sptbl-success-color-darken-5: #2aab58;
  --sptbl-pod-chat-bg: rgba(255, 255, 255, .9);
  --sptbl-quoted-spout-bg: #f3f7fb;
  --sptbl-skeleton-bg: #f6f9fc;
  --sptbl-bundle-profile-card-bg: #f3f7fb;
  font-size: 16px;
}
@media (max-width: 767.98px) {
  :root {
    --sptbl-primary-avatar-size: 46px;
    --sptbl-primary-offset-size: 10px;
    --sptbl-primary-name-size: 14px;
    --sptbl-primary-username-size: 14px;
  }
}

body[data-skin=default] {
  --sptbl-primary-color: #64a0e4;
  --sptbl-primary-color-darken-5: #4a8bd8;
  --sptbl-primary-link-color: #64a0e4;
  --sptbl-primary-button-color: #64a0e4;
}

body[data-skin=green] {
  --sptbl-primary-color: #2fbf63;
  --sptbl-primary-color-darken-5: #2aab58;
  --sptbl-primary-link-color: #0aa943;
}

body[data-skin=yellow] {
  --sptbl-primary-color: #fdad1f;
  --sptbl-primary-color-darken-5: #fda406;
  --sptbl-primary-link-color: #fdad1f;
}

body[data-skin=pink] {
  --sptbl-primary-color: #e0245e;
  --sptbl-primary-color-darken-5: #cd1d53;
  --sptbl-primary-link-color: #e0245e;
}

body[data-skin=purple] {
  --sptbl-primary-color: #794bc4;
  --sptbl-primary-color-darken-5: #6c3db9;
  --sptbl-primary-link-color: #794bc4;
}

body[data-skin=orange] {
  --sptbl-primary-color: #f45d22;
  --sptbl-primary-color-darken-5: #f14c0c;
  --sptbl-primary-link-color: #f45d22;
}

body[data-bg=default] {
  background-color: #ecf2f9;
  --sptbl-primary-bg-color: #ecf2f9;
  --sptbl-secondary-bg-color: #e7eef6;
  /* animated sound bars in the live pods carousel */
  --sptbl-pod-wave-color: #64a0e4;
  /* "Start your own Pod" hero banner (PodsPage.vue) */
  --sptbl-pod-hero-bg-color: #64a0e4;
  --sptbl-pod-hero-text-color: #ffffff;
  --sptbl-pod-hero-icon-bg: rgba(255, 255, 255, 0.2);
  --sptbl-pod-hero-ornament-color: rgba(255, 255, 255, 0.1);
  --sptbl-pod-hero-button-bg-color: #ffffff;
  --sptbl-pod-hero-button-text-color: #64a0e4;
  /* Role glyphs in the pod card's sliding participants row (PodCard.vue).
     NOT the brand blue: this is the only theme with a white card, and #64a0e4
     lands at 2.73:1 there — under the 3:1 WCAG bar for meaningful graphics.
     #3e7bb6 is the Frost palette's deep blue and reads at 4.46:1. The same
     rule held before the revamp, when this token was #1b95e0 (3.27:1). */
  --sptbl-pod-role-icon-color: #3e7bb6;
  --sptbl-primary-border-color: #e7eef6;
  --sptbl-secondary-border-color: #d8e2ee;
  --sptbl-navbar-border-color: #e7eef6;
  --sptbl-primary-text-color: #16283c;
  --sptbl-secondary-text-color: #51637a;
  --sptbl-tertiary-text-color: #405a74;
  --sptbl-register-headline-text-color: #16283c;
  --sptbl-navbar-text-color: #405a74;
  /* Metadata ink. 2.70:1 on the white card, so still under AA — but it is an
     improvement on the #a0b3d4 this carried before (2.12:1), and #8aa0b5 is the
     value 1a paints all timeline meta and action glyphs in. Same applies to
     --sptbl-action-buttons-svg-color and the three *-primary-svg-color tokens
     below. Worth a follow-up if the timeline meta row is ever audited. */
  --sptbl-reply-text-color: #8aa0b5;
  /* Placeholder ink stays paired with --sptbl-secondary-text-color, exactly as
     it was before the revamp (both were #5b7083). 1a paints placeholders in the
     #8aa0b5 meta grey, but that measures 2.51:1 on the field fill against the
     4.58:1 this control has today - the one rule applied throughout this file
     is that a role which currently passes WCAG does not get regressed for the
     sake of the mockup. #51637a reads 5.71:1 on the field. */
  --sptbl-input-placeholder-color: #51637a;
  --sptbl-input-bg-color: #f3f7fb;
  /* Field boundary: #e7eef6, the same value as --sptbl-primary-border-color,
     so fields share the hairline the cards and column edges already use.
     Contrast note, carried over from the pre-revamp palette and still true:
     this is 1.09:1 against the field fill and 1.17:1 against white — far below
     the 3:1 WCAG 1.4.11 asks of a boundary that is the ONLY thing identifying
     a control. It is the familiar light-hairline-on-white look (Stripe, GitHub
     et al sit in the same band). It reads because the field fill differs from
     the surface as well, not because the border alone carries it — so do not
     remove the fill difference on Day without revisiting this. */
  --sptbl-input-border-color: #e7eef6;
  /* Band behind the "UPDATE YOUR NAME" style heading on settings screens
     (div.profile-settings__title). The heading ink --sptbl-primary-text-color
     (#16283c) measures 13.30:1 on this, so the band stays readable. */
  --sptbl-settings-title-bg: #edf2f8;
  --sptbl-chat-pane-bg: #ffffff;
  --sptbl-chat-composer-bar-bg: #ffffff;
  --sptbl-leave-chat-btn-bg: #64a0e4;
  --sptbl-leave-chat-btn-bg-secondary: #4a8bd8;
  --sptbl-leave-chat-btn-tint: rgba(100, 160, 228, 0.13);
  --sptbl-leave-chat-btn-border: rgba(100, 160, 228, 0.38);
  /* Elevation ink follows the palette: rgba(22, 40, 60) rather than pure
     black, at a slightly lower alpha so dropdowns and modals sit on the icy
     ground the way the mockup's cards do. Geometry is unchanged. */
  --sptbl-primary-box-shadow: rgba(22, 40, 60, 0.16) 0px 10px 30px 0px;
  --sptbl-secondary-box-shadow: rgba(22, 40, 60, 0.10) 0px 10px 30px 0px;
  --sptbl-modal-backdrop: rgba(22, 40, 60, 0.65);
  --sptbl-event-hover-bg: #f3f7fb;
  --sptbl-timeline-header-bg-color: #ffffff;
  --sptbl-header-bg-color: #ffffff;
  --sptbl-profile-bg-color: #ffffff;
  --sptbl-homepage-bg-color: #ffffff;
  --sptbl-timeline-navbar-bg-color: #ffffff;
  --sptbl-timeline-navbar-item-bg-color: #ffffff;
  --sptbl-post-bg-color: #ffffff;
  --sptbl-sidebar-searchbar-bg-color: #ffffff;
  --sptbl-timeline-searchbar-bg-color: #ffffff;
  --sptbl-sidebar-nav-group-bg-color: #ffffff;
  --sptbl-sidebar-content-bg-color: #ffffff;
  --sptbl-white-button-bg-color: #ffffff;
  --sptbl-menu-bg-color: #f3f7fb;
  --sptbl-action-buttons-bg-color: #ffffff;
  --sptbl-action-buttons-svg-color: #8aa0b5;
  --sptbl-reply-primary-bg-color: #ffffff;
  --sptbl-reply-secondary-bg-color: #64a0e4;
  --sptbl-reply-primary-svg-color: #8aa0b5;
  --sptbl-reply-secondary-svg-color: #64a0e4;
  --sptbl-repost-primary-bg-color: #ffffff;
  --sptbl-repost-secondary-bg-color: #2e9e8f;
  --sptbl-repost-primary-svg-color: #8aa0b5;
  --sptbl-repost-secondary-svg-color: #2e9e8f;
  --sptbl-like-primary-bg-color: #ffffff;
  --sptbl-like-secondary-bg-color: #f0475c;
  --sptbl-like-primary-svg-color: #8aa0b5;
  --sptbl-like-secondary-svg-color: #f0475c;
  --sptbl-navbar-bg-color: #ecf2f9;
  --sptbl-embedded-content-bg-color: #f3f7fb;
  --sptbl-embedded-content-border-color: #edf2f8;
  --sptbl-timeline-placeholder-bg-color: #ffffff;
  --sptbl-list-item-bg-color: #ffffff;
  --sptbl-timeline-header-before-bg-color: #ecf2f9;
  --sptbl-timeline-header-after-bg-color: #ffffff;
  --sptbl-sidebar-button-text-color: #405a74;
  --sptbl-sidebar-button-bg-color: #ffffff;
  --sptbl-image-alt-button-bg-color: #64a0e4;
  --sptbl-suggested-bg-color: #ffffff;
  --sptbl-splashback-color: #2e9e8f;
  /* Shared brand orange, identical in all four backgrounds — left at the live
     value on purpose so Day does not drift away from Night/Dawn/Midnight. */
  --sptbl-news-color: #ff8b10;
  --sptbl-summary-text-color: #ecfafa;
  /* Same no-regression rule as the placeholder: this glyph is at 3.32:1 today
     (#868e95 on white) and 1a's #8aa0b5 would drop it to 2.70:1, under the 3:1
     WCAG bar for meaningful graphics. #68809a is the palette's muted ink and
     holds 4.08:1. */
  --sptbl-avatar-follow-icon-color: #68809a;
  --sptbl-avatar-follow-icon-border-color: #e7eef6;
}

body[data-bg=dark] {
  background-color: #2f3b50;
  --sptbl-primary-bg-color: #2f3b50;
  --sptbl-secondary-bg-color: #434f64;
  /* animated sound bars in the live pods carousel */
  --sptbl-pod-wave-color: #7495b9;
  /* "Start your own Pod" hero banner (PodsPage.vue) */
  --sptbl-pod-hero-bg-color: #7495b9;
  --sptbl-pod-hero-text-color: #ffffff;
  --sptbl-pod-hero-icon-bg: rgba(255, 255, 255, 0.2);
  --sptbl-pod-hero-ornament-color: rgba(255, 255, 255, 0.1);
  --sptbl-pod-hero-button-bg-color: #ffffff;
  --sptbl-pod-hero-button-text-color: #7495b9;
  /* Role glyphs in the pod card's sliding participants row (PodCard.vue).
     The accent ink this theme already uses for links and buttons — Night's
     slate #7495b9, which on the #202836 card reads at 4.75:1. Still well above
     the 3:1 WCAG bar for meaningful graphics. Dawn (7.80:1) and Midnight
     (7.15:1) keep their own accents. */
  --sptbl-pod-role-icon-color: #7495b9;
  --sptbl-primary-border-color: #283143;
  --sptbl-secondary-border-color: #3c485d;
  --sptbl-navbar-border-color: #202835;
  --sptbl-primary-text-color: #ecfafa;
  --sptbl-register-headline-text-color: #ecfafa;
  --sptbl-secondary-text-color: #9195a8;
  --sptbl-tertiary-text-color: #4c5e6e;
  --sptbl-navbar-text-color: #ecfafa;
  --sptbl-reply-text-color: #a0b3d4;
  --sptbl-input-placeholder-color: #5b7083;
  --sptbl-input-bg-color: #a0b3d4;
  /* Field boundary. Night was NOT failing: its fill is 5.31:1 against the page,
     so the fill already describes the shape and WCAG 1.4.11 is satisfied
     without any border. This exists for consistency with Day (which does need
     one) and so the boundary is an explicit decision rather than a side effect
     of which surface happens to contrast.
     Because the border is not load-bearing here it takes the SOFTEST value
     that still clears the 3:1 bar - #4a5876 = 3.36:1 on the fill - so it
     defines the edge without competing with it. */
  --sptbl-input-border-color: #4a5876;
  /* Night has the same trap Dawn does: its field fill (#a0b3d4) is LIGHT while
     its page ink (--sptbl-primary-text-color, #ecfafa) is light too - 1.98:1,
     and the placeholder was worse at 1.40:1.
     It went unnoticed longer than Dawn's because the one control that looked
     right - the SelectWithSearch dropdown - was accidentally readable: it was
     never skinned at all, so it kept Bootstrap's #212529-on-#fff. Skinning it
     properly made this pairing bite, so the ink is fixed here rather than
     shipping a field that reads worse than the unstyled one did.
     #202836 is Night's own --sptbl-menu-bg-color, so it is guaranteed in
     palette, and lands at 6.98:1 on the fill. The placeholder #374356 sits at
     4.71:1 - passes AA, clearly softer than the value ink. */
  --sptbl-input-text-color: #202836;
  --sptbl-input-placeholder-text-color: #374356;
  /* Settings heading band (div.profile-settings__title). Was
     --sptbl-secondary-bg-color (#434f64). The heading ink
     --sptbl-primary-text-color (#ecfafa) measures 4.96:1 on this - passes AA
     for the uppercase 0.8125rem heading, though with less headroom than the
     other two themes, so it is worth re-checking if that ink ever changes. */
  --sptbl-settings-title-bg: #5e6c85;
  --sptbl-chat-pane-bg: #202836;
  --sptbl-chat-composer-bar-bg: #202836;
  --sptbl-leave-chat-btn-bg: #7495b9;
  --sptbl-leave-chat-btn-bg-secondary: #557eaa;
  --sptbl-leave-chat-btn-tint: rgba(116, 149, 185, 0.13);
  --sptbl-leave-chat-btn-border: rgba(116, 149, 185, 0.38);
  --sptbl-primary-box-shadow: rgba(0, 0, 0, 0.20) 0px 10px 30px 0px;
  --sptbl-secondary-box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 30px 0px;
  --sptbl-modal-backdrop: rgba(0, 0, 0, 0.65);
  --sptbl-event-hover-bg: #273143;
  --sptbl-timeline-header-bg-color: #202836;
  --sptbl-header-bg-color: #202836;
  --sptbl-profile-bg-color: #202836;
  --sptbl-homepage-bg-color: #202836;
  --sptbl-timeline-navbar-bg-color: #202836;
  --sptbl-timeline-navbar-item-bg-color: #202836;
  --sptbl-post-bg-color: #202836;
  --sptbl-sidebar-searchbar-bg-color: #202836;
  --sptbl-timeline-searchbar-bg-color: #202836;
  --sptbl-sidebar-nav-group-bg-color: #202836;
  --sptbl-sidebar-content-bg-color: #202836;
  --sptbl-white-button-bg-color: #ffffff;
  --sptbl-menu-bg-color: #202836;
  --sptbl-action-buttons-bg-color: #ffffff;
  --sptbl-action-buttons-svg-color: #a0b3d4;
  --sptbl-reply-primary-bg-color: #ffffff;
  --sptbl-reply-secondary-bg-color: #7495b9;
  --sptbl-reply-primary-svg-color: #a0b3d4;
  --sptbl-reply-secondary-svg-color: #7495b9;
  --sptbl-repost-primary-bg-color: #ffffff;
  --sptbl-repost-secondary-bg-color: #2aad7f;
  --sptbl-repost-primary-svg-color: #a0b3d4;
  --sptbl-repost-secondary-svg-color: #2aad7f;
  --sptbl-like-primary-bg-color: #ffffff;
  --sptbl-like-secondary-bg-color: #f84062;
  --sptbl-like-primary-svg-color: #a0b3d4;
  --sptbl-like-secondary-svg-color: #f84062;
  --sptbl-navbar-bg-color: #2f3b50;
  --sptbl-embedded-content-bg-color: #161b25;
  --sptbl-embedded-content-border-color: #161b25;
  --sptbl-timeline-placeholder-bg-color: #202836;
  --sptbl-list-item-bg-color: #202836;
  --sptbl-timeline-header-before-bg-color: #2f3b50;
  --sptbl-timeline-header-after-bg-color: #202836;
  --sptbl-sidebar-button-text-color: #7495b9;
  --sptbl-sidebar-button-bg-color: #202836;
  --sptbl-image-alt-button-bg-color: #7495b9;
  --sptbl-suggested-bg-color: #202836;
  --sptbl-splashback-color: #4af29d;
  --sptbl-news-color: #ff8b10;
  --sptbl-summary-text-color: #ecfafa;
  --sptbl-quoted-spout-bg: #2b3442;
  --sptbl-skeleton-bg: #374355;
  --sptbl-bundle-profile-card-bg: #2f3b50;
  --sptbl-avatar-follow-icon-border-color: #5b687f;
  --sptbl-avatar-follow-icon-color: #868e95;
  --sptbl-pod-chat-bg: rgba(0, 0, 0, .9);
}

/* Night accent — slate rather than the Day brand blue, chosen by the product
   owner.

   Scoped to the DEFAULT colour scheme on purpose, which is what makes this
   selector different in shape from the Dawn and Midnight accent overrides.
   The five alternate schemes (green / yellow / pink / purple / orange) each
   set --sptbl-primary-color at `body[data-skin=X]` — the same (0,1,1)
   specificity as a bare `body[data-bg=dark]`, and EARLIER in source order
   because skins/_skins.scss imports the colour schemes before the
   backgrounds. A bare override here would therefore win and quietly repaint
   a Night+green user's accent slate. Adding [data-skin="default"] takes this
   to (0,2,1) and confines it to the users who were actually seeing the blue.
   (Dawn and Midnight do clobber every scheme; that is deliberate there —
   a blue or pink accent fights their palettes — and is left as it is.)

   darken-5 is the hover/active fill for .btn-custom.main-inline and
   .main-outline, which set `color: #fff` — so unlike Dawn and Midnight (whose
   button ink is dark, letting them LIGHTEN here) Night has to go DARKER or
   white text falls apart on hover. #557eaa carries white at 4.24:1, up from
   3.51:1 when this inherited Day's #4a8bd8, and sits a visible 1.36:1 step
   off the resting #7495b9.

   Contrast: #7495b9 reads 4.75:1 on the #202836 card (was 5.42:1 with
   #64a0e4) and white-on-accent improves to 3.11:1 from 2.73:1. */
body[data-bg=dark][data-skin=default] {
  --sptbl-primary-color: #7495b9;
  --sptbl-primary-color-darken-5: #557eaa;
  --sptbl-primary-link-color: #7495b9;
  --sptbl-primary-button-color: #7495b9;
}

/* Dawn - warm twilight theme. The page background (colors and gradient stack)
   is ported from the design reference at "Theme Example/css/theme.css"
   [data-theme="dusk"], minus the reference's faint panel grid (dropped by
   request). The gradient lives on a fixed ::before layer (not
   background-attachment: fixed) so iOS Safari renders it viewport-fixed, and
   the app canvas containers below are made transparent so it shows through
   between cards. */
body[data-bg=dawn] {
  background-color: #1a1410;
  --sptbl-dawn-page-bg-image:
    radial-gradient(1400px 900px at 85% 10%, rgba(218, 165, 118, 0.22) 0%, transparent 55%),
    radial-gradient(1100px 700px at 10% 95%, rgba(141, 92, 68, 0.18) 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(94, 184, 201, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #1a1410 0%, #14100c 100%);
  --sptbl-primary-bg-color: #251c14;
  --sptbl-secondary-bg-color: #3a2b20;
  /* animated sound bars in the live pods carousel */
  --sptbl-pod-wave-color: #e8a878;
  /* "Start your own Pod" hero banner (PodsPage.vue) — warm dark-brown banner
     with cream text/icon; the white Go Live pill keeps the dawn dark ink */
  --sptbl-pod-hero-bg-color: #3d2e23;
  --sptbl-pod-hero-text-color: #f6ecdc;
  --sptbl-pod-hero-icon-bg: rgba(246, 236, 220, 0.14);
  --sptbl-pod-hero-ornament-color: rgba(246, 236, 220, 0.1);
  --sptbl-pod-hero-button-bg-color: #f6ecdc;
  --sptbl-pod-hero-button-text-color: #372a20;
  /* Role glyphs in the pod card's sliding participants row (PodCard.vue).
     Copper, which is the colour the card hard-coded for every theme before
     this token existed — Dawn is the one theme whose icons do not change. */
  --sptbl-pod-role-icon-color: #e8a878;
  /* Dawn accent - copper (theme-example accent / accent-2) replaces the skin
     blues for highlights, hyperlinks and primary buttons. darken-5 doubles as
     the primary-button hover, which in this theme LIGHTENS to accent-2 like
     the example's .btn.primary:hover. Verified checkmarks are unaffected by
     the accent - the badge SVG path carries its own baked-in fill, which the
     Frost revamp moved from #67c1f4 to the new brand blue #64a0e4 so the old
     accent survives nowhere. Still 5.82:1 on this card, was 7.95:1. */
  --sptbl-primary-color: #e8a878;
  --sptbl-primary-color-darken-5: #f0c79c;
  --sptbl-primary-link-color: #e8a878;
  --sptbl-primary-button-color: #e8a878;
  --sptbl-primary-border-color: rgba(255, 236, 210, 0.12);
  --sptbl-secondary-border-color: rgba(255, 236, 210, 0.2);
  --sptbl-navbar-border-color: rgba(255, 236, 210, 0.1);
  --sptbl-primary-text-color: #f6ecdc;
  --sptbl-register-headline-text-color: #f6ecdc;
  --sptbl-secondary-text-color: #b3a48f;
  --sptbl-tertiary-text-color: #6b5c4d;
  --sptbl-navbar-text-color: #f6ecdc;
  --sptbl-reply-text-color: #a0b3d4;
  --sptbl-input-placeholder-color: #8a7a67;
  --sptbl-input-bg-color: #d4c3ab;
  /* Field boundary. Like Night, Dawn was not failing - its tan fill is 9.72:1
     against the dark page, the highest of the three, so the shape reads on
     fill alone. The old underline composited to #ddcbb3 = 1.09:1 on the fill,
     i.e. it was decorative and did nothing.
     Softest passing value: #7a6a55 = 3.03:1 on the fill. Deliberately the
     lightest of the three borders, because Dawn's fill does the most work. */
  --sptbl-input-border-color: #7a6a55;
  /* Ink for text typed into a field. Dawn is the only theme whose input fill
     (#d4c3ab) is LIGHT while its page ink (--sptbl-primary-text-color,
     #f6ecdc) is also light - that pairing measures 1.47:1, i.e. the value you
     type is effectively invisible. This is the same trap already documented
     for the chat composer below, solved there by darkening the field instead.
     Fields that must keep the tan fill take dark ink instead: #372a20 on
     #d4c3ab is ~9.4:1.
     Consumed as `var(--sptbl-input-text-color, var(--sptbl-primary-text-color))`
     so Day and Night, whose page ink already contrasts with their own fill,
     are untouched. */
  --sptbl-input-text-color: #372a20;
  /* Placeholder ink for those same light-filled fields. NOTE this is a
     different token from --sptbl-input-placeholder-color above: that one is
     shared with fields whose background is DARK on Dawn - the right-sidebar
     search (#2b2017) and the spout card's transparent composer - where #8a7a67
     is a deliberate ~3.8:1. Reusing it on the tan fill gives 2.41:1, and the
     --sptbl-secondary-text-color the form/modal rules used before was worse
     still at 1.41:1 (an empty field looked blank).
     #5c4e3f is 4.66:1 on #d4c3ab - passes AA, while staying clearly softer
     than the 8.05:1 value ink so a hint still reads as a hint. It sits between
     --sptbl-tertiary-text-color (#6b5c4d) and the value ink in the palette.
     Consumed with a per-site fallback to whatever that site used before, so
     Day and Night are untouched. */
  --sptbl-input-placeholder-text-color: #5c4e3f;
  --sptbl-chat-bubble-out-color: #251c14;
  --sptbl-chat-composer-bg: #3d2e23;
  --sptbl-chat-composer-placeholder: #b3a48f;
  --sptbl-chat-composer-bar-bg: #2b2017;
  --sptbl-primary-box-shadow: rgba(0, 0, 0, 0.20) 0px 10px 30px 0px;
  --sptbl-secondary-box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 30px 0px;
  --sptbl-modal-backdrop: rgba(0, 0, 0, 0.65);
  --sptbl-event-hover-bg: #33261b;
  --sptbl-timeline-header-bg-color: #2b2017;
  --sptbl-header-bg-color: #2b2017;
  --sptbl-profile-bg-color: #2b2017;
  --sptbl-homepage-bg-color: #2b2017;
  --sptbl-timeline-navbar-bg-color: #2b2017;
  --sptbl-timeline-navbar-item-bg-color: #2b2017;
  --sptbl-post-bg-color: #2b2017;
  --sptbl-sidebar-searchbar-bg-color: #2b2017;
  --sptbl-timeline-searchbar-bg-color: #2b2017;
  --sptbl-sidebar-nav-group-bg-color: #2b2017;
  --sptbl-sidebar-content-bg-color: #2b2017;
  --sptbl-white-button-bg-color: #ffffff;
  --sptbl-menu-bg-color: #2b2017;
  --sptbl-action-buttons-bg-color: #ffffff;
  --sptbl-action-buttons-svg-color: #a0b3d4;
  --sptbl-reply-primary-bg-color: #ffffff;
  --sptbl-reply-secondary-bg-color: #4ca8dd;
  --sptbl-reply-primary-svg-color: #a0b3d4;
  --sptbl-reply-secondary-svg-color: #4ca8dd;
  --sptbl-repost-primary-bg-color: #ffffff;
  --sptbl-repost-secondary-bg-color: #2aad7f;
  --sptbl-repost-primary-svg-color: #a0b3d4;
  --sptbl-repost-secondary-svg-color: #2aad7f;
  --sptbl-like-primary-bg-color: #ffffff;
  --sptbl-like-secondary-bg-color: #f84062;
  --sptbl-like-primary-svg-color: #a0b3d4;
  --sptbl-like-secondary-svg-color: #f84062;
  --sptbl-navbar-bg-color: rgba(26, 20, 16, 0.85);
  --sptbl-embedded-content-bg-color: #14100c;
  --sptbl-embedded-content-border-color: #14100c;
  --sptbl-timeline-placeholder-bg-color: #2b2017;
  --sptbl-list-item-bg-color: #2b2017;
  /* Opaque base for the sticky-header mask strip (.timeline-header:before).
     It must stay opaque so content scrolling behind the header cannot show
     through the gap above it; the override further down layers the page
     gradient on top so the strip still matches the background. */
  --sptbl-timeline-header-before-bg-color: #1a1410;
  --sptbl-timeline-header-after-bg-color: #2b2017;
  --sptbl-sidebar-button-text-color: #e8a878;
  --sptbl-sidebar-button-bg-color: #2b2017;
  /* Not Dawn's copper accent — this badge was already a stray Spoutible
     blue before the Frost revamp (#44a7e0); it just follows the new brand
     blue so the old value survives nowhere in the app. */
  --sptbl-image-alt-button-bg-color: #64a0e4;
  --sptbl-suggested-bg-color: #2b2017;
  --sptbl-splashback-color: #4af29d;
  --sptbl-news-color: #ff8b10;
  --sptbl-summary-text-color: #ecfafa;
  --sptbl-quoted-spout-bg: #33261b;
  --sptbl-skeleton-bg: #3a2c20;
  --sptbl-bundle-profile-card-bg: #2b2017;
  --sptbl-avatar-follow-icon-border-color: #6b5a49;
  --sptbl-avatar-follow-icon-color: #868e95;
  --sptbl-pod-chat-bg: rgba(20, 14, 10, 0.9);
}

body[data-bg=dawn]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #1a1410;
  background-image: var(--sptbl-dawn-page-bg-image);
  background-repeat: no-repeat;
}

/* Let the fixed dawn gradient show through the app canvas; cards and other
   surfaces keep their own opaque --sptbl-* backgrounds on top of it. */
body[data-bg=dawn] main.main-content-container,
body[data-bg=dawn] main.main-content-container div.main-content-container-inner div.left-sb-container,
body[data-bg=dawn] main.main-content-container div.main-content-container-inner div.right-sb-container {
  background: transparent;
}

/* The strip above the sticky header masks content scrolling underneath. In
   day/night it is simply the flat page color, but dawn's background is a
   gradient, so the strip paints that SAME gradient anchored to the viewport
   (background-attachment: fixed) - identical to the page's fixed ::before
   layer - so it stays opaque AND invisible at every viewport size.
   Do NOT use backdrop-filter here: it applies to the backdrop even when the
   background is transparent, and saturate() re-tints the gradient inside the
   strip's box, painting a visible warm band. */
body[data-bg=dawn] .timeline-header:before {
  background-image: var(--sptbl-dawn-page-bg-image);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* The header's compositing hints (transform/will-change/preserve-3d) create a
   containing block, which downgrades the strip's background-attachment: fixed
   to scroll-attached - the gradient then renders against the strip's own 50px
   box instead of the viewport, which is why it did not line up. Dawn opts out
   of them so the gradient anchors to the viewport. They are only paint hints
   for the sticky header; day/night keep them untouched. */
body[data-bg=dawn] div.timeline-container-inner div.timeline-container div.timeline-header {
  will-change: auto;
  transform: none;
  -webkit-transform-style: flat;
  transform-style: flat;
}

/* The fixed mobile bottom navbar uses a translucent dawn background; blur
   what scrolls beneath it so it reads as glass over the gradient instead of
   ghosting content. */
body[data-bg=dawn] div.mobile-bottom-navbar {
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* The dawn look for the live pods carousel / mini player is NOT a blanket
   override - it is the selectable pod color .pod-bg-5 (see the .pod-bg-N
   block), so switching pod component colors keeps working in dawn. */
/* The mobile New Spout FAB bakes a blue-tinted glow into its !important
   box-shadow; re-tint it copper for dawn. */
body[data-bg=dawn] .m-postBtn {
  color: #372a20;
  box-shadow: 0 14px 26px -12px rgba(232, 168, 120, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(232, 168, 120, .2) !important;
}

/* Dawn copper buttons carry dark warm text and icons (#372a20) instead of
   the white used on the blue buttons in the other themes.

   `:not(.btn-danger)` because the destructive variant is NOT copper — it keeps
   Bootstrap's red #dc3545 fill on every theme. Dark warm ink on that red
   measures 3.06:1, against 4.53:1 for the white the other two themes use, so
   without this exclusion Dawn's red buttons are the worst-contrast text on the
   screen. Affects the 2FA "Remove Two Factor" and "Previous" buttons, and any
   other destructive .btn-custom.main-inline. */
body[data-bg=dawn] button.btn-custom.main-inline:not(.btn-danger),
body[data-bg=dawn] a.btn-custom.main-inline:not(.btn-danger),
body[data-bg=dawn] div.btn-custom.main-inline:not(.btn-danger) {
  color: #372a20;
}

body[data-bg=dawn] main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__button button span.btn-icon svg {
  fill: #372a20;
}

body[data-bg=dawn] .m-postBtn svg {
  fill: #372a20;
}

body[data-bg=dawn] .post-action-v2 .post-action-button .ctrls-item.ci-b .ctrls-item__icon svg {
  fill: #372a20 !important;
}

body[data-bg=dawn] .thread-reply-button {
  color: #372a20;
}

body[data-bg=dawn] .cookie-toast {
  color: #372a20;
}

body[data-bg=dawn] .cookie-toast svg {
  fill: #372a20;
}

/* Icons sitting directly on accent-colored surfaces (copper in dawn) also
   flip from white to the dark warm ink. Icons on media overlays, brand-color
   circles (success/warning/danger), and red buttons keep their white fill. */
body[data-bg=dawn] .pods-create-pod-div button svg {
  fill: #372a20;
}

body[data-bg=dawn] .btn-custom.main-inline.btn-custom-small svg {
  fill: #372a20 !important;
}

body[data-bg=dawn] .share-post-modal div.raw-link div.link-input button.clip-board-copy svg {
  fill: #372a20;
}

body[data-bg=dawn] form div.form-group div.form-paymethods div.form-paymethods__item div.form-paymethods__item-checkmark svg {
  fill: #372a20;
}

body[data-bg=dawn] main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert.timeline-alert_info div.timeline-alert__icon svg {
  fill: #372a20;
}

body[data-bg=dawn] div.timeline-spoutcard button.delete-preview svg {
  fill: #372a20;
}

body[data-bg=midnight] {
  background-color: #1d1e1f;
  --sptbl-primary-bg-color: #1d1e1f;
  --sptbl-secondary-bg-color: #2d2e30;
  /* Midnight accent - a desaturated blue-grey that reads as part of the neutral
     ladder instead of punching through it. As ink it is 7.07:1 on the card
     (#171718), 6.59:1 on the page (#1d1e1f) and 5.46:1 on the chip (#2d2e30),
     i.e. better than the #1b95e0 it replaces at 5.44/5.06.
     darken-5 is a MISNOMER inherited from the base scheme: it is the hover
     value, and on a dark theme hover must LIGHTEN, so this is one step UP the
     same hue (hsl(213,33%,66%) -> 76%). Dawn does exactly the same thing.
     Every surface that gets FILLED with either value takes #0f1011 ink - see
     the override block at the bottom of this file. */
  --sptbl-primary-color: #8ca6c5;
  --sptbl-primary-color-darken-5: #aec0d6;
  --sptbl-primary-link-color: #8ca6c5;
  --sptbl-primary-button-color: #8ca6c5;
  /* Ink inside the outgoing DM bubble, which is filled with the raw accent.
     Token-level fix, so no selector needed - same shape as _dawn.scss:90. */
  --sptbl-chat-bubble-out-color: #0f1011;
  /* animated sound bars in the live pods carousel */
  --sptbl-pod-wave-color: #8ca6c5;
  /* "Start your own Pod" hero banner (PodsPage.vue). The reference renders the
     promo card as the raised neutral step (#2d2e30 on a #444649 edge) with a
     RECESSED pill on it - background #171718, ink #d6d8da - i.e. the opposite
     of the white-pill-on-blue-banner every other theme uses. */
  --sptbl-pod-hero-bg-color: #2d2e30;
  --sptbl-pod-hero-text-color: #d6d8da;
  --sptbl-pod-hero-icon-bg: rgba(214, 216, 218, 0.1);
  --sptbl-pod-hero-ornament-color: rgba(214, 216, 218, 0.06);
  --sptbl-pod-hero-button-bg-color: #171718;
  --sptbl-pod-hero-button-text-color: #d6d8da;
  /* Role glyphs in the pod card's sliding participants row (PodCard.vue) —
     the same desaturated accent as the rest of the theme, 7.15:1 on the card. */
  --sptbl-pod-role-icon-color: #8ca6c5;
  --sptbl-primary-border-color: #2d2e30;
  --sptbl-secondary-border-color: #444649;
  --sptbl-navbar-border-color: #2d2e30;
  --sptbl-primary-text-color: #d6d8da;
  --sptbl-register-headline-text-color: #d6d8da;
  --sptbl-secondary-text-color: #8a8c8f;
  --sptbl-tertiary-text-color: #6a6c6f;
  --sptbl-navbar-text-color: #d6d8da;
  /* The "Replying to @x" line. Day, Night and Dawn all leave this at the shared
     #a0b3d4 - a light blue-grey - and get away with it because their accent is
     a different hue. Midnight's accent is in the SAME family: #a0b3d4 against
     #8ca6c5 is 1.19:1, so the label and the @handle link inside it would be one
     colour on one line. Dropped onto the theme's own meta rung instead
     (= --sptbl-secondary-text-color, 5.31:1 on the card). The same reasoning
     moves the four action-row tokens further down. */
  --sptbl-reply-text-color: #8a8c8f;
  /* Placeholder ink for fields whose fill is the CARD rather than
     --sptbl-input-bg-color - the right-sidebar search and the spout card's
     transparent composer. #8a8c8f is 5.31:1 on #171718. The reference uses
     #6a6c6f here (3.40:1), one step softer than AA allows for a 15px hint, so
     this is lifted one rung on the same ladder. */
  --sptbl-input-placeholder-color: #8a8c8f;
  --sptbl-input-bg-color: #2d2e30;
  /* Field boundary. Midnight is the theme where this matters MOST, because it
     is the only one whose field fill barely differs from the surface it sits
     on: #2d2e30 on the #171718 card is 1.32:1, so unlike Day / Night / Dawn
     the fill does not describe the control's shape on its own and the border
     is genuinely load-bearing for WCAG 1.4.11.
     The reference's own border (#444649) measures 1.44:1 on the fill - it is
     decorative, not a boundary. #7e8083 is the SOFTEST value on the palette's
     ladder that clears 3:1 (it lands at 3.32:1); the next rung down, #76787b,
     misses at 2.97:1. Same "softest passing value" rule Night (#4a5876,
     3.36:1) and Dawn (#7a6a55, 3.03:1) were chosen by. */
  --sptbl-input-border-color: #7e8083;
  /* NOTE there is deliberately no --sptbl-input-text-color here. Night and
     Dawn need one because their field fill is LIGHT while their page ink is
     light too; Midnight's fill is dark, so the fallback to
     --sptbl-primary-text-color (#d6d8da) is already correct at 9.51:1.
     The placeholder DOES need its own value: the fallback
     --sptbl-input-placeholder-color (#8a8c8f, tuned for the card above) is
     only 4.03:1 on the #2d2e30 fill. #9a9c9f is 4.94:1 - passes AA while
     staying clearly softer than the 9.51:1 value ink. */
  --sptbl-input-placeholder-text-color: #9a9c9f;
  /* Band behind the "UPDATE YOUR NAME" style heading on settings screens
     (div.profile-settings__title). The raised neutral step, same as every
     other chip in the theme; the heading ink #d6d8da measures 9.51:1 on it. */
  --sptbl-settings-title-bg: #2d2e30;
  --sptbl-chat-pane-bg: #171718;
  --sptbl-chat-composer-bar-bg: #171718;
  --sptbl-chat-composer-placeholder: #9a9c9f;
  --sptbl-leave-chat-btn-bg: #8ca6c5;
  --sptbl-leave-chat-btn-bg-secondary: #aec0d6;
  --sptbl-leave-chat-btn-tint: rgba(140, 166, 197, 0.13);
  --sptbl-leave-chat-btn-border: rgba(140, 166, 197, 0.38);
  --sptbl-primary-box-shadow: rgba(0, 0, 0, 0.20) 0px 10px 30px 0px;
  --sptbl-secondary-box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 30px 0px;
  --sptbl-modal-backdrop: rgba(0, 0, 0, 0.65);
  /* The reference's hover surface. It must differ from BOTH the card and the
     page or the card dissolves under the cursor - the failure documented in
     _dark.scss. #2d2e30 is 1.32:1 above the card and 1.23:1 above the page,
     and the ink lifts with it (see the nav / main-grey hover rules), so the
     highlight reads against either. */
  --sptbl-event-hover-bg: #2d2e30;
  --sptbl-timeline-header-bg-color: #171718;
  --sptbl-header-bg-color: #171718;
  --sptbl-profile-bg-color: #171718;
  --sptbl-homepage-bg-color: #171718;
  --sptbl-timeline-navbar-bg-color: #171718;
  --sptbl-timeline-navbar-item-bg-color: #171718;
  --sptbl-post-bg-color: #171718;
  --sptbl-sidebar-searchbar-bg-color: #171718;
  --sptbl-timeline-searchbar-bg-color: #171718;
  --sptbl-sidebar-nav-group-bg-color: #171718;
  --sptbl-sidebar-content-bg-color: #171718;
  --sptbl-white-button-bg-color: #ffffff;
  --sptbl-menu-bg-color: #171718;
  --sptbl-action-buttons-bg-color: #ffffff;
  /* RESTING ink for the post action row - counts, glyphs, PostEcho, pod action
     icons. Same 1.19:1 collision as --sptbl-reply-text-color above: at the
     shared #a0b3d4 these sit inches from accent-coloured links and the
     accent-filled bookmark chip and read as the same colour. On the theme's
     meta rung they are unambiguously not-the-accent (5.31:1 on the card, and a
     clear rung below the 7.07:1 accent). The -secondary- siblings below are NOT
     touched: reply-blue / repost-green / like-red is a semantic triad that is
     byte-identical in all four themes. */
  --sptbl-action-buttons-svg-color: #8a8c8f;
  --sptbl-reply-primary-bg-color: #ffffff;
  --sptbl-reply-secondary-bg-color: #4ca8dd;
  --sptbl-reply-primary-svg-color: #8a8c8f;
  --sptbl-reply-secondary-svg-color: #4ca8dd;
  --sptbl-repost-primary-bg-color: #ffffff;
  --sptbl-repost-secondary-bg-color: #2aad7f;
  --sptbl-repost-primary-svg-color: #8a8c8f;
  --sptbl-repost-secondary-svg-color: #2aad7f;
  --sptbl-like-primary-bg-color: #ffffff;
  --sptbl-like-secondary-bg-color: #f84062;
  --sptbl-like-primary-svg-color: #8a8c8f;
  --sptbl-like-secondary-svg-color: #f84062;
  --sptbl-navbar-bg-color: #1d1e1f;
  /* Link-preview / embed block. The reference paints media placeholders as a
     #202021 / #232324 stripe pair; #202021 is the flat equivalent. */
  --sptbl-embedded-content-bg-color: #202021;
  --sptbl-embedded-content-border-color: #202021;
  --sptbl-timeline-placeholder-bg-color: #171718;
  --sptbl-list-item-bg-color: #171718;
  --sptbl-timeline-header-before-bg-color: #1d1e1f;
  --sptbl-timeline-header-after-bg-color: #171718;
  /* SHOW MORE (button.btn-custom.main-grey, RightSidebar.vue) - the reference's
     neutral chip: #9a9c9f ink on the #2d2e30 raised step, at 4.94:1. Its
     border reads as --sptbl-secondary-bg-color, which is the same #2d2e30, so
     the chip is edgeless exactly as drawn. These two tokens are ALSO what the
     New Spout button borrows at the bottom of this file. */
  --sptbl-sidebar-button-text-color: #9a9c9f;
  --sptbl-sidebar-button-bg-color: #2d2e30;
  --sptbl-image-alt-button-bg-color: #8ca6c5;
  --sptbl-suggested-bg-color: #171718;
  --sptbl-splashback-color: #4af29d;
  --sptbl-news-color: #ff8b10;
  --sptbl-summary-text-color: #ecfafa;
  /* Quoted spout re-uses the PAGE colour so it lifts out of the card it is
     nested in - the reference's inverted-nesting rule. */
  --sptbl-quoted-spout-bg: #1d1e1f;
  --sptbl-skeleton-bg: #232324;
  --sptbl-bundle-profile-card-bg: #1d1e1f;
  --sptbl-avatar-follow-icon-border-color: #444649;
  --sptbl-avatar-follow-icon-color: #868e95;
  --sptbl-pod-chat-bg: rgba(0, 0, 0, .9);
}

/* The unchecked Bootstrap switch knob is a data-URI SVG, which cannot read a
   CSS variable, so _forms.scss ships ONE dark knob for every theme. That works
   because the unchecked track is --sptbl-input-bg-color and that fill is LIGHT
   on Day (#F0F2F5), Night (#a0b3d4) and Dawn (#d4c3ab). Midnight is the first
   theme with a DARK fill (#2d2e30), where a near-black knob is invisible and
   every switch in the app reads as empty. Same geometry, light knob.

   `:not(:checked)` is load-bearing, not decoration. Without it this selector is
   (0,3,1), which outranks Bootstrap's `.form-switch .form-check-input:checked`
   at (0,3,0) - so the light knob would replace the WHITE one on the accent-
   filled ON track too, and Midnight would be the only theme whose switches look
   the same on and off. With it the rule is (0,4,1): still ahead of the base
   dark knob (0,2,0) and Bootstrap's :focus knob (0,3,0) in the off state, and
   out of the way in the on state. The pairing also makes a separate
   `:focus:not(:checked)` rule unnecessary, so there isn't one. */
body[data-bg=midnight] .form-switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28214,216,218,0.85%29'/%3e%3c/svg%3e");
}

/* ==== INK ON THE ACCENT ===================================================
   #8ca6c5 is light, so every surface FILLED with it (or with the #aec0d6 hover
   tint) needs dark ink. White measures 2.51:1 on the accent and 1.86:1 on the
   hover; #0f1011 - the floor of the reference palette - measures 7.51:1 and
   10.23:1. Each rule below states why its selector is the length it is: the
   skin block compiles ~line 3800 while the app partials land at 8000-22000, so
   an equal-specificity override LOSES on source order. Sites where the accent
   is INK, a border, an underline, a focus ring, a scrollbar thumb or a spinner
   need nothing - a light accent on a dark surface is the improving direction.
   ------------------------------------------------------------------------ */
/* The primary button family - every SAVE / FOLLOW / SUBMIT / confirm button.
   The hover rule in _buttons.scss changes only `background`, so this single
   declaration governs both states. `:not(.btn-danger)` is copied from Dawn and
   is load-bearing: the destructive variant keeps Bootstrap's #dc3545 fill on
   every theme, where #0f1011 is 4.21:1 against 4.53:1 for the white it has now.
   (0,4,2) beats the base (0,2,2), and sits BELOW the New Spout rule's (0,4,3)
   further down - so New Spout keeps its neutral chip. */
body[data-bg=midnight] button.btn-custom.main-inline:not(.btn-danger),
body[data-bg=midnight] a.btn-custom.main-inline:not(.btn-danger),
body[data-bg=midnight] div.btn-custom.main-inline:not(.btn-danger) {
  color: #0f1011;
}

/* The outline variant is transparent with accent ink at rest - fine - but its
   hover FILLS with the lighter tint and re-inks to #fff on its own line, so the
   rule above cannot reach it. Dawn never covered this and ships it at ~1.9:1.
   Base is (0,4,2); this is (0,5,2). Also covers .thread-reply-button, which
   carries `btn-custom main-outline` in ThreadPage.vue - its own
   `.thread-reply-button` rule is dead code at (0,1,0), so do NOT port Dawn's
   override of it. */
body[data-bg=midnight] button.btn-custom.main-outline:not([disabled]):hover,
body[data-bg=midnight] button.btn-custom.main-outline:not([disabled]):active,
body[data-bg=midnight] button.btn-custom.main-outline:not([disabled]):focus,
body[data-bg=midnight] a.btn-custom.main-outline:not([disabled]):hover,
body[data-bg=midnight] a.btn-custom.main-outline:not([disabled]):active,
body[data-bg=midnight] a.btn-custom.main-outline:not([disabled]):focus,
body[data-bg=midnight] div.btn-custom.main-outline:not([disabled]):hover,
body[data-bg=midnight] div.btn-custom.main-outline:not([disabled]):active,
body[data-bg=midnight] div.btn-custom.main-outline:not([disabled]):focus {
  color: #0f1011;
}

/* Icons sitting on accent-filled buttons. These are separate sibling rules from
   the `color` above, so the button fix does not reach them. */
body[data-bg=midnight] .btn-custom.main-inline.btn-custom-small svg {
  fill: #0f1011 !important;
}

body[data-bg=midnight] .pods-create-pod-div button svg {
  fill: #0f1011;
}

body[data-bg=midnight] #create-timeline-list .btn-custom.main-inline svg {
  fill: #0f1011;
}

/* The pod "Stream video" modal's per-thumbnail Download button. It carries
   `btn-custom main-inline`, so the label rule above re-inks it, but its icon
   fill comes from `.pod-video-download svg` (0,1,1) in BasePod.vue's UNSCOPED
   <style> block - which vite injects into <head> at RUNTIME, after
   master.styles.css, so an equal-specificity rule would lose on source order.
   (0,2,2) wins on both axes, and covers the #aec0d6 hover fill as well since
   only `background` changes there. */
body[data-bg=midnight] .pod-video-download svg {
  fill: #0f1011;
}

body[data-bg=midnight] .post-action-v2 .post-action-button .ctrls-item.ci-b .ctrls-item__icon svg {
  fill: #0f1011 !important;
}

body[data-bg=midnight] .share-post-modal div.raw-link div.link-input button.clip-board-copy svg {
  fill: #0f1011;
}

body[data-bg=midnight] form div.form-group div.form-paymethods div.form-paymethods__item div.form-paymethods__item-checkmark svg {
  fill: #0f1011;
}

body[data-bg=midnight] main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert.timeline-alert_info div.timeline-alert__icon svg {
  fill: #0f1011;
}

body[data-bg=midnight] div.timeline-spoutcard button.delete-preview svg {
  fill: #0f1011;
}

body[data-bg=midnight] div.startup div.startup__body div.startup-avatar div.startup-avatar__image button.upload-avatar svg {
  fill: #0f1011;
}

body[data-bg=midnight] .display-settings__options-list div.options-li span.active-color svg {
  fill: #0f1011;
}

/* Accent-filled chips whose white comes from --sptbl-rating-text-color, a :root
   constant shared with the eight rating badges - so a grep for "#fff" misses
   them, which is why Dawn does too. Re-inked per selector rather than by
   re-pointing the token, because the token legitimately wants white on those
   rating badges. */
body[data-bg=midnight] .form-tag {
  color: #0f1011;
}

body[data-bg=midnight] .tfa-list li:before {
  color: #0f1011;
}

/* The app-wide toast, in both of its duplicated declarations. */
body[data-bg=midnight] div.timeline-bs-notifs div.timeline-bs-notifs__item.primary,
body[data-bg=midnight] .modal-header div.timeline-bs-notifs__item.primary {
  color: #0f1011;
}

/* The live MM:SS badge above the mic while recording audio in the composer. */
body[data-bg=midnight] div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-topline button.ctrl-item.audio-recording span.record-timer {
  color: #0f1011;
}

/* The ALT badge on a media attachment. Its fill follows the accent (see
   --sptbl-image-alt-button-bg-color) and its ink is a `#fff` spread across FIVE
   selectors of differing weight, so each needs its own prefix. Four are the
   comma group in _spoutcard.scss; the fifth, `.slider-alt-button`, is a
   byte-identical copy living in _utilities.scss under a different class name -
   it is what MediaSlider.vue renders for a multi-image spout, and it sits
   OUTSIDE the .swiper as a sibling, so `.media-slider .image-alt-inline` does
   not reach it. Missing it would give single-image posts a dark badge and
   multi-image posts a white one.
   Its `border: 0.5pt solid` omits a colour and falls back to currentColor, so
   this one declaration re-inks the ring too. Worth noting the pairing was
   already sub-AA on every theme (2.73:1 white on the #64a0e4 brand blue); at
   #0f1011 on the
   accent it becomes 6.98:1. */
body[data-bg=midnight] div.timeline-spoutcard button.image-alt,
body[data-bg=midnight] div.post-data-layout__content div.spout-image + .image-alt-inline,
body[data-bg=midnight] .media-slider .image-alt-inline,
body[data-bg=midnight] .swiper .image-alt-inline,
body[data-bg=midnight] .slider-alt-button {
  color: #0f1011;
}

/* The leave-conversation chip's SOLID states. At rest it is accent ink on a 13%
   tint, which is fine; hover and active fill with the accent and hardcode
   #ffffff. The glyph is `fill: currentColor`, so it follows. */
body[data-bg=midnight] .chat-item-delete-btn:hover,
body[data-bg=midnight] .chat-item-delete-btn:focus,
body[data-bg=midnight] .chat-item-delete-btn:active {
  color: #0f1011;
}

/* Unread-count badge on a chat avatar. Not accent-driven - it fills with
   --sptbl-action-buttons-svg-color and inks with --sptbl-primary-text-color -
   but that pairing is 1.13:1 on Midnight and only reaches 1.79:1 after this
   file moves the fill onto the meta rung, so it is fixed here rather than left
   as a light-on-light stripe. #0f1011 on #8a8c8f is 5.60:1. The chain matches
   the compiled base at (0,6,8); the attribute on `body` makes this (0,7,8).
   NOTE the same badge is ~1.9:1 on Night today - pre-existing, separate fix. */
body[data-bg=midnight].sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__avatar span {
  color: #0f1011;
}

/* Bootstrap's CHECKED checkbox / radio / switch glyphs. The surface is
   `.form-check-input:checked`, which fills with --sptbl-primary-color, and the
   glyph is a data-URI SVG with its ink baked in as a literal - a data-URI
   cannot read a CSS variable, so the whole background-image is re-declared with
   #0f1011 URL-encoded, geometry byte-identical to the Bootstrap original.
   Dawn ships all three white on its light copper at ~2:1; this is the half of
   the pair that the `:not(:checked)` knob rule above deliberately leaves open.
   Bases are (0,3,0) in css-libs.css, which also loads first, so these (0,4,1)
   rules win on both specificity and order. */
body[data-bg=midnight] .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg role='img' xmlns='http://www.w3.org/2000/svg' width='48px' height='48px' viewBox='0 0 24 24' stroke='%230f1011' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter' fill='none' color='%230f1011'%3e%3cpolyline points='4 13 9 18 20 7'/%3e %3c/svg%3e");
}

body[data-bg=midnight] .form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230f1011'/%3e%3c/svg%3e");
}

body[data-bg=midnight] .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230f1011'/%3e%3c/svg%3e");
}

/* The Display Settings page's own hand-rolled toggle (not a Bootstrap switch).
   Its ON track is --sptbl-primary-color and its knob is a `#ffffff` ::after
   from a SCOPED SFC block - which vite injects into <head> at RUNTIME, after
   master.styles.css, so a tie would lose. (0,2,2) against the scoped
   `.sptbl-toggle[data-v-x]::after` at (0,2,1). */
body[data-bg=midnight] .sptbl-toggle--on::after {
  background: #0f1011;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* The cookie consent bar - accent-filled, and the one place Dawn's list is
   provably incomplete: its two-rule patch re-inks the bar and its glyph but not
   the "Learn more" link or the "Got it" chip, both of which declare `color:
   #fff` on themselves in an UNSCOPED SFC block and so out-specify inheritance.
   All four are covered here. The chip additionally sits on a 20%-black wash
   over the accent (#70859e), where white is 3.79:1 and #0f1011 is 5.02:1. */
body[data-bg=midnight] .cookie-toast,
body[data-bg=midnight] .cookie-toast a,
body[data-bg=midnight] .cookie-toast button {
  color: #0f1011;
}

body[data-bg=midnight] .cookie-toast svg {
  fill: #0f1011;
}

/* ---- New Spout, Midnight only -------------------------------------------
   On every other theme New Spout is the one solid accent-filled block on the
   page (--sptbl-primary-button-color, white ink). Midnight takes the Trending
   Splashtags SHOW MORE treatment instead: the same neutral chip tokens
   (--sptbl-sidebar-button-text-color on --sptbl-sidebar-button-bg-color, edged
   with --sptbl-secondary-bg-color) that button.btn-custom.main-grey reads in
   _buttons.scss, so the two stay in lockstep if the tokens above ever move.
   Written as token references rather than hexes for exactly that reason.

   Scoped to div.sidebar__button so the rest of the theme's
   .btn-custom.main-inline buttons - modals, settings, register - keep the
   accent fill. */
body[data-bg=midnight] div.sidebar__button button.btn-custom.main-inline {
  color: var(--sptbl-sidebar-button-text-color);
  background: var(--sptbl-sidebar-button-bg-color);
  border: 1px solid var(--sptbl-secondary-bg-color);
  box-shadow: none;
}

/* The resting rule above is (0,4,3) and the base hover in _buttons.scss is
   only (0,4,2) - `:not([disabled])` carries attribute weight - so without an
   explicit hover here the button would simply lose its hover state. Values
   follow the reference's SHOW MORE hover, which lifts BOTH the fill and the
   ink (#9a9c9f on #444649 is 3.44:1, under AA for the 0.625rem uppercase
   label; #d6d8da on #444649 is 6.62:1). */
body[data-bg=midnight] div.sidebar__button button.btn-custom.main-inline:not([disabled]):hover,
body[data-bg=midnight] div.sidebar__button button.btn-custom.main-inline:not([disabled]):active,
body[data-bg=midnight] div.sidebar__button button.btn-custom.main-inline:not([disabled]):focus {
  background: #444649;
  color: #d6d8da;
}

/* The sidebar icon's `fill: #ffffff` is set by an 8-element selector at
   (0,6,8) in _left.scss, so beating it needs the full chain plus the body
   prefix - the same shape _dawn.scss uses. A short `.sidebar__button svg`
   would lose and the droplet would stay white. This matters most between
   768px and 1255px, where _misc_overrides.scss collapses the button to the
   icon alone. */
body[data-bg=midnight] main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__button button span.btn-icon svg {
  fill: var(--sptbl-sidebar-button-text-color);
}

body[data-bg=midnight] main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__button button:not([disabled]):hover span.btn-icon svg,
body[data-bg=midnight] main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__button button:not([disabled]):active span.btn-icon svg,
body[data-bg=midnight] main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__button button:not([disabled]):focus span.btn-icon svg {
  fill: #d6d8da;
}

/* The mobile New Spout FAB. Both `background` and `box-shadow` are declared
   !important on the base .m-postBtn rule, so both have to be re-declared that
   way; the blue-tinted glow baked into that shadow goes neutral black here.
   Note .m-postBtn is shared by the Chats, Pods and Bundles floating buttons -
   this re-tints those too, which is what _dawn.scss does as well and is the
   coherent result: no accent-filled circles anywhere in Midnight. */
body[data-bg=midnight] .m-postBtn {
  color: var(--sptbl-sidebar-button-text-color);
  border: 1px solid var(--sptbl-secondary-bg-color);
  background: var(--sptbl-sidebar-button-bg-color) !important;
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .5), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .3) !important;
}

body[data-bg=midnight] .m-postBtn svg {
  fill: var(--sptbl-sidebar-button-text-color);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Inter/Inter-Light.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Inter/Inter-Regular.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Inter/Inter-Semibold.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Inter/Inter-Semibold.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Inter/Inter-Bold.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/Inter/Inter-Black.woff") format("woff");
}
/* Sora — display face for the signup flow's headings only (body copy stays
   Inter). Self-hosted rather than pulled from Google Fonts so the auth pages
   make no third-party request. One variable woff2 per subset covers the whole
   600-800 range the design uses, which is why the weight descriptor is a
   range and not a single value. Sora is SIL OFL 1.1. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/Sora/Sora-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/Sora/Sora-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ===================================================== */
/* ===================================================== */
html {
  scroll-behavior: smooth;
  font-family: "Inter", sans-serif;
  scrollbar-gutter: stable;
  overscroll-behavior: none;
}

hr {
  border: 1px solid var(--sptbl-secondary-border-color);
}

body {
  font-family: inherit !important;
  overflow-x: hidden;
  overflow-y: scroll;
}
body.ov-h {
  overflow: hidden;
}
body.modal-open, body.sptbl-modal-open {
  overflow-y: hidden;
  padding: 0px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* IE and Edge */
}
body.modal-open::-webkit-scrollbar, body.modal-open::-webkit-scrollbar {
  display: none;
}
body main.main-content-container {
  background: var(--sptbl-primary-bg-color);
  min-width: 320px;
}
body main.main-content-container div.main-content-container-inner {
  width: 100%;
  max-width: 1220px !important;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper {
  flex-flow: column wrap;
  flex: 2;
  max-width: 600px;
  min-width: 600px;
  min-height: 100vh;
  position: relative;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
}
div.timeline-bs-notifs {
  position: absolute;
  top: 0;
  z-index: 9999;
  width: -webkit-fill-available;
  width: 100%;
  transform: translateY(calc(-100% - 10px));
  -webkit-transform: translateY(calc(-100% - 10px));
  -moz-transform: translateY(calc(-100% - 10px));
  -o-transform: translateY(calc(-100% - 10px));
  transition: all 0.5s;
  visibility: hidden;
}
div.timeline-bs-notifs.show {
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -o-transform: translateY(0);
  visibility: visible;
  transition: all 0.5s;
}
div.timeline-bs-notifs div.timeline-bs-notifs__item {
  display: block;
  border-radius: 15px;
  width: 100%;
  padding: var(--sptbl-primary-offset-size);
  line-height: 1;
  color: #ffffff;
  font-size: 1rem;
  text-align: center;
  animation-duration: 0.5s;
}
div.timeline-bs-notifs div.timeline-bs-notifs__item.primary {
  background-color: var(--sptbl-primary-color);
}
div.timeline-bs-notifs div.timeline-bs-notifs__item.danger {
  background-color: var(--sptbl-danger-color);
}

div.timeline-container-inner div.timeline-container div.timeline-header {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  margin-top: 10px;
  z-index: 700;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 2px 5px 0px;
  will-change: transform;
  transform: translateZ(0);
  background-color: var(--sptbl-timeline-header-bg-color);
  border: 1px solid var(--sptbl-primary-border-color);
  border-width: 1px 1px 0px 1px;
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15px;
  position: relative;
  z-index: 50;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.lp {
  max-width: calc(50% - 30px);
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.lp.lp__avatar {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.lp.lp__avatar div.nav-link-avatar {
  width: 35px;
  flex-shrink: 0;
  margin-right: 7px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.lp.lp__avatar div.nav-link-avatar a {
  display: block;
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.lp.lp__avatar div.nav-link-avatar a img {
  width: 35px;
  height: 35px;
  border-radius: 100%;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.lp.lp__avatar div.nav-link-avatar svg {
  fill: var(--sptbl-primary-color);
  width: 100%;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.lp.lp__avatar div.nav-link-avatar a.online {
  position: relative;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.lp.lp__avatar div.nav-link-avatar a.online:after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 10em;
  background: var(--sptbl-success-color);
  right: 0px;
  top: 0px;
  border: 1px solid var(--sptbl-secondary-bg-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.lp div.nav-link-holder a {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 16px;
  font-weight: 500;
  color: var(--sptbl-primary-text-color);
  text-decoration: none;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.sptbl {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  visibility: hidden;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.sptbl {
    visibility: visible;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.sptbl a {
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.sptbl a img {
  height: 36px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder a.go-forward {
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder span.go-back, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder a.go-forward, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder div.dropdown-toggle.go-options__icon {
  padding: 0;
  margin: 0;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder span.go-back::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder a.go-forward::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder div.dropdown-toggle.go-options__icon::before {
  background: var(--sptbl-secondary-bg-color);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  border-radius: 100%;
  opacity: 0.7;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder span.go-back svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder a.go-forward svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder div.dropdown-toggle.go-options__icon svg {
  width: 20px;
  height: 20px;
  fill: var(--sptbl-secondary-text-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder span.go-back:hover::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder span.go-back:active::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder a.go-forward:hover::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder a.go-forward:active::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options:hover::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options:active::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder div.dropdown-toggle.go-options__icon:hover::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder div.dropdown-toggle.go-options__icon:active::before {
  opacity: 1;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder span.go-back:hover > svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder span.go-back:active > svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder a.go-forward:hover > svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder a.go-forward:active > svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options:hover > svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options:active > svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder div.dropdown-toggle.go-options__icon:hover > svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder div.dropdown-toggle.go-options__icon:active > svg {
  fill: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options div.dropdown-toggle.go-options__icon::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options div.dropdown-toggle.go-options__icon::after {
  display: none;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options div.dropdown-toggle.go-options__icon svg {
  width: 26px;
  height: 26px;
  opacity: 0.7;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options div.dropdown-toggle.go-options__icon:hover svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options div.dropdown-toggle.go-options__icon:active svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-header div.timeline-header__botline div.rp div.nav-link-holder button.go-options div.dropdown-toggle.go-options__icon:focus svg {
  opacity: 1;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container.no-affix {
  padding-top: 0px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container.no-affix div.timeline-header {
  position: relative;
  left: unset;
  top: unset;
  box-shadow: none;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar {
  padding: var(--sptbl-primary-offset-size);
  background-color: var(--sptbl-timeline-searchbar-bg-color);
  border: 1px solid var(--sptbl-primary-border-color);
  border-width: 0px 1px 0px 1px;
  padding-bottom: 0;
  padding-top: 0;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form {
  padding: var(--sptbl-primary-offset-size);
  border-bottom: 1px solid var(--sptbl-primary-border-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input {
  position: relative;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input) {
  border: 2px solid transparent;
  background: var(--sptbl-input-bg-color);
  border-radius: var(--sptbl-tertiary-border-radius);
  padding: 0px 48px;
  margin: 0px;
  height: 48px;
  display: block;
  width: 100%;
  font-size: 0.9375rem;
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input)::placeholder {
  color: var(--sptbl-input-placeholder-text-color, var(--sptbl-input-placeholder-color));
  font-size: 0.9375rem;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input):active, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input):hover, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input):focus {
  box-shadow: none;
  outline: none;
  border: 2px solid var(--sptbl-primary-color);
  /* The fill deliberately does NOT change here.
     This used to swap to --sptbl-primary-bg-color (the PAGE
     colour). That reads as a no-op on Day, where the field
     fill #f3f7fb and the page #ecf2f9 are near-identical -
     which is how it survived - but on the dark themes it
     swaps a light field for a dark page while the ink stays
     the dark field ink:
       Night  #202836 on #2f3b50 = 1.31:1
       Dawn   #372a20 on #251c14 = 1.21:1
     i.e. the search box went blank the moment you clicked
     into it. Keeping --sptbl-input-bg-color holds Night at
     6.98:1 and Dawn at 8.05:1; the 2px accent border above is
     already the focus affordance. */
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input):active + span.keyword-input__left-icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input):hover + span.keyword-input__left-icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input):focus + span.keyword-input__left-icon svg {
  fill: var(--sptbl-primary-color);
  opacity: 1;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input) {
    height: 42px;
    padding: 0px 42px;
  }
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input)::placeholder {
    font-size: 0.8125rem;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__left-icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-spinner, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-icon {
  position: absolute;
  top: 0px;
  text-decoration: none;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__left-icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-spinner svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-icon svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__left-icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-spinner, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-icon {
    width: 42px;
    height: 42px;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__left-icon {
  left: 0px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__left-icon svg {
  fill: var(--sptbl-secondary-text-color);
  opacity: 0.8;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-spinner {
  right: 0px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-spinner svg {
  width: 28px;
  height: 28px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-icon {
  right: 0px;
  cursor: pointer;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-icon svg {
  fill: var(--sptbl-secondary-text-color);
  opacity: 0.8;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-icon:active svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-icon:hover svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input span.keyword-input__right-icon:focus svg {
  fill: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item {
  margin-top: 10px !important;
  transition: all 0.27s ease-in-out;
  padding: var(--sptbl-primary-offset-size);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
  background-color: var(--sptbl-post-bg-color);
  padding-bottom: 10px;
  cursor: pointer;
  color: var(--sptbl-reply-text-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__header,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__header {
  display: flex;
  margin-bottom: 10px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__header div.spout-repost,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__header div.spout-repost {
  padding: 0px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__header div.spout-repost svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__header div.spout-repost svg {
  width: 18px;
  height: 18px;
  fill: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__header div.spout-repost a,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__header div.spout-repost a {
  font-size: 0.6875rem;
  color: var(--sptbl-primary-color);
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__header,
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__header {
    padding-left: 0px;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data {
  display: block;
  flex-direction: row;
  flex-wrap: nowrap;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar {
  flex-basis: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar div.avatar-holder,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar div.avatar-holder {
  overflow: hidden;
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  background: var(--sptbl-primary-border-color);
  margin-right: var(--sptbl-primary-offset-size);
  border-radius: 100%;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar div.avatar-holder img,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar div.avatar-holder img {
  width: 100%;
  height: 100%;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar div.avatar-holder img:not([data-loaded]),
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar div.avatar-holder img:not([data-loaded]) {
  visibility: hidden;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar a,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar a {
  height: 100%;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content {
  flex: 1;
  /*overflow: hidden;*/
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
div.user-handle a {
  margin-top: 0px;
  text-transform: lowercase;
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
  font-size: 0.9375rem;
}

div.user-handle {
  margin-top: 0px;
  text-transform: lowercase;
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
  font-size: 0.9375rem;
}

div.rating-a, div.rating-b, div.rating-c, div.rating-d {
  color: var(--sptbl-rating-text-color);
  font-weight: 500;
  font-size: 0.6875rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 1px 5px 1px 5px;
  display: inline-block;
}

div.rating-a, div.profile-rating-a {
  background-color: var(--sptbl-a-rating-bg-color);
}

div.rating-b, div.profile-rating-b {
  background-color: var(--sptbl-b-rating-bg-color);
}

div.rating-c, div.profile-rating-c {
  background-color: var(--sptbl-c-rating-bg-color);
}

div.rating-d, div.profile-rating-d {
  background-color: var(--sptbl-d-rating-bg-color);
}

div.profile-rating-a, div.profile-rating-b, div.profile-rating-c, div.profile-rating-d {
  color: var(--sptbl-rating-text-color);
  font-weight: 500;
  font-size: 0.6875rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 0px 5px 0px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  display: inline-block;
}

div.rating-normal, div.rating-satisfactory, div.rating-disruptive, div.rating-problematic {
  color: var(--sptbl-rating-text-color);
  font-weight: 500;
  font-size: 0.6875rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 1px 5px 1px 5px;
  display: inline-block;
}

div.rating-normal, div.profile-rating-normal {
  background-color: var(--sptbl-normal-rating-bg-color);
}

div.rating-satisfactory, div.profile-rating-satisfactory {
  background-color: var(--sptbl-satisfactory-rating-bg-color);
}

div.rating-disruptive, div.profile-rating-disruptive {
  background-color: var(--sptbl-disruptive-rating-bg-color);
}

div.rating-problematic, div.profile-rating-problematic {
  background-color: var(--sptbl-problematic-rating-bg-color);
}

div.profile-rating-normal, div.profile-rating-satisfactory, div.profile-rating-disruptive, div.profile-rating-problematic {
  color: var(--sptbl-rating-text-color);
  font-weight: 500;
  font-size: 0.6875rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 0px 5px 0px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  display: inline-block;
}

@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher,
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher {
    align-items: flex-start;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username {
  flex: 1;
  line-height: 1;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a {
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span.user-name-holder,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span.user-name-holder {
  font-size: var(--sptbl-primary-name-size);
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span.user-name-holder:hover, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span.user-name-holder:focus, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span.user-name-holder:active,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span.user-name-holder:hover,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span.user-name-holder:focus,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span.user-name-holder:active {
  color: var(--sptbl-primary-link-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a div.user-handle, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a div.user-handle a,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a div.user-handle,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a div.user-handle a {
  margin-top: -10px;
  text-transform: lowercase;
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
  font-size: 0.9375rem;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span,
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username a span {
    display: block;
  }
}
div.post-time {
  color: var(--sptbl-secondary-text-color);
  font-size: 0.8125rem;
  line-height: 1;
  margin-top: 10px;
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-time,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-time {
  color: var(--sptbl-secondary-text-color);
  font-size: 0.8125rem;
  line-height: 1;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-time,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-time {
  color: var(--sptbl-secondary-text-color);
  font-size: 0.8125rem;
  line-height: 1;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-time span,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-time span {
  margin-left: 5px;
  cursor: help;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-time,
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-time {
    font-size: 0.6875rem;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__target div.post-reply span,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__target div.post-reply span {
  font-size: 0.875rem;
  color: var(--sptbl-secondary-text-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__target div.post-reply span a,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__target div.post-reply span a {
  color: var(--sptbl-primary-link-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content {
  margin-top: 10px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-text,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-text {
  overflow: hidden;
  margin-bottom: 10px;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--sptbl-primary-text-color);
  word-break: break-word;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-text a.inline-link,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-text a.inline-link {
  display: inline;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-text,
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-text {
    font-size: 0.9375rem;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.lozad-media,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.lozad-media {
  width: 100%;
  display: block;
  position: relative;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image {
  border: 1px solid var(--sptbl-primary-border-color);
  border-radius: var(--sptbl-secondary-border-radius);
  overflow: hidden;
  background: #e7eef6;
  position: relative;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image img.lozad,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image img.lozad {
  width: 100%;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image img.lozad:not([data-loaded]),
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image img.lozad:not([data-loaded]) {
  visibility: hidden;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media {
  position: relative;
  display: block;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button {
  position: absolute;
  left: calc(50% - 33px);
  top: calc(50% - 33px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 500;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button span.video-play-button__arrow,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button span.video-play-button__arrow {
  width: 66px;
  height: 66px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10em;
  padding: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 10px 0px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button span.video-play-button__arrow svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button span.video-play-button__arrow svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button:hover span.video-play-button__arrow, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button:active span.video-play-button__arrow,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button:hover span.video-play-button__arrow,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-image a.fbox-media div.video-play-button:active span.video-play-button__arrow {
  background: rgba(0, 0, 0, 0.7);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-images-collage,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-images-collage {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-images-collage > div,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-images-collage > div {
  width: calc(20% - 5px);
  min-width: calc(15% - 5px);
  margin-right: 5px;
  margin-bottom: 5px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-images-collage div.image-collage-item,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-images-collage div.image-collage-item {
  display: block;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-images-collage div.image-collage-item div.spout-image,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-images-collage div.image-collage-item div.spout-image {
  border-radius: var(--sptbl-secondary-border-radius);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-audio audio,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-audio audio {
  width: 100%;
  outline: 0;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og, .sptbl-modal-container div.spout-og {
  margin-bottom: 10px;
  background: var(--sptbl-embedded-content-bg-color);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-embedded-content-border-color);
  position: relative;
  word-break: break-all;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner, .sptbl-modal-container div.spout-og div.spout-og__inner {
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe, .sptbl-modal-container div.spout-og div.spout-og__inner.embedded-iframe {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image, .sptbl-modal-container div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image {
  width: 100%;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a, .sptbl-modal-container div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a {
  display: block;
  width: 100%;
  position: relative;
  text-decoration: none;
  line-height: 0;
  min-height: 200px;
  max-height: 300px;
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a img, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a img, .sptbl-modal-container div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a img {
  width: 100%;
  display: block;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button, .sptbl-modal-container div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button {
  position: absolute;
  left: calc(50% - 33px);
  top: calc(50% - 33px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 500;
  /* NOTE: the "__arro" (sans "w") in the first selector reproduces a typo in the live hand-maintained CSS */
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button span.video-play-button__arrow, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button span.video-play-button__arrow, .sptbl-modal-container div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button span.video-play-button__arrow {
  width: 66px;
  height: 66px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10em;
  padding: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 10px 0px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button span.video-play-button__arrow svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button span.video-play-button__arrow svg, .sptbl-modal-container div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button span.video-play-button__arrow svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button:hover span.video-play-button__arro, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button:hover span.video-play-button__arrow, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button:active span.video-play-button__arrow, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__image a div.video-play-button:active span.video-play-button__arrow {
  background: rgba(0, 0, 0, 0.7);
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__description p, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__description p, .sptbl-modal-container div.spout-og div.spout-og__inner.embedded-iframe div.spout-og__description p {
  margin-bottom: 0px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.link, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.link, .sptbl-modal-container div.spout-og div.spout-og__inner.link {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.link div.spout-og__image, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.link div.spout-og__image, .sptbl-modal-container div.spout-og div.spout-og__inner.link div.spout-og__image {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  background: var(--sptbl-event-hover-bg);
  position: relative;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__domain, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__domain {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, .7);
  color: #FFF;
  border-radius: 15px;
  padding: 2px 20px;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: bold;
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.link div.spout-og__image img, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner.link div.spout-og__image img, .sptbl-modal-container div.spout-og div.spout-og__inner.link div.spout-og__image img {
  width: 100%;
  display: block;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description, .sptbl-modal-container div.spout-og div.spout-og__inner div.spout-og__description {
  padding: var(--sptbl-primary-offset-size);
  /* NOTE: the "h" (sans "5") and the bare description selector reproduce typos in the live hand-maintained CSS */
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description h, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description h5, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description p, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description a, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description a {
  width: 100%;
  display: block;
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description h5, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description h5, .sptbl-modal-container div.spout-og div.spout-og__inner div.spout-og__description h5 {
  padding: 0;
  margin: 0 0 5px 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--sptbl-primary-text-color);
  word-break: keep-all;
  font-weight: 700;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description p, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description p, .sptbl-modal-container div.spout-og div.spout-og__inner div.spout-og__description p {
  font-size: 1rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 1.4;
  padding: 0;
  margin: 0 0 15px 0;
  word-break: keep-all;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description a, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-og div.spout-og__inner div.spout-og__description a, .sptbl-modal-container div.spout-og div.spout-og__inner div.spout-og__description a {
  font-size: 0.875rem;
  line-height: 18px;
  color: var(--sptbl-primary-color);
  padding: 0;
  margin: 0;
  word-break: keep-all;
}

div.spout-poll div.spout-poll__inner div.spout-poll__option {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 30px;
  padding: 20px 15px;
  background: rgba(29, 161, 242, 0.1);
  margin-bottom: 10px;
  border-radius: 0px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
div.spout-poll div.spout-poll__inner div.spout-poll__option div.bar-icon {
  width: 22px;
  height: 22px;
  line-height: 0;
  min-height: 20px;
  min-width: 20px;
}
div.spout-poll div.spout-poll__inner div.spout-poll__option div.bar-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-primary-color);
}
div.spout-poll div.spout-poll__inner div.spout-poll__option div.bar-text {
  flex-grow: 1;
  padding-left: 15px;
  padding-right: 15px;
  overflow: hidden;
}
div.spout-poll div.spout-poll__inner div.spout-poll__option div.bar-text p {
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 14px;
  color: var(--sptbl-primary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.spout-poll div.spout-poll__inner div.spout-poll__option div.bar-num b {
  font-size: 0.875rem;
  line-height: 14px;
  color: var(--sptbl-primary-color);
}
div.spout-poll div.spout-poll__inner div.spout-poll__option:last-child {
  margin-bottom: 0px;
}
div.spout-poll div.spout-poll__inner div.spout-poll__option span.bar-slider {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(29, 161, 242, 0.2);
  max-width: 100%;
  min-width: 10px;
  border-radius: 0px;
  z-index: 3;
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-poll[data-status="1"] div.spout-poll-data-inner div.poll-option-bar,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__content div.spout-poll[data-status="1"] div.spout-poll-data-inner div.poll-option-bar {
  cursor: default;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 15px;
  margin-left: -10px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
button.ctrls-item {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item a.ctrls-item__inner-link,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item a.ctrls-item__inner-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  color: inherit;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item div.ctrls-item__icon,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item div.ctrls-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0px 5px 0px 0px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 100%;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item div.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item div.ctrls-item__icon svg {
  width: 20px;
  height: 20px;
  fill: var(--sptbl-secondary-text-color);
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item div.ctrls-item__icon,
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon,
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item div.ctrls-item__icon {
    width: 20px;
    height: 20px;
  }
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item div.ctrls-item__icon svg,
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon svg,
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item div.ctrls-item__icon svg {
    width: 20px;
    height: 20px;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.num,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.num {
  font-size: 0.875rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 1;
  margin-left: 2px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover span.ctrls-item__icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover div.ctrls-item__icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active span.ctrls-item__icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active div.ctrls-item__icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus span.ctrls-item__icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus div.ctrls-item__icon,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover span.ctrls-item__icon,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover div.ctrls-item__icon,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active span.ctrls-item__icon,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active div.ctrls-item__icon,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus span.ctrls-item__icon,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus div.ctrls-item__icon {
  background: var(--sptbl-secondary-bg-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover span.ctrls-item__icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover div.ctrls-item__icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active span.ctrls-item__icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active div.ctrls-item__icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus span.ctrls-item__icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus div.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover span.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover div.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active span.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active div.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus span.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus div.ctrls-item__icon svg {
  fill: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover span.num, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active span.num, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus span.num,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:hover span.num,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:active span.num,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:focus span.num {
  color: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.liked span.ctrls-item__icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.liked a.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.liked span.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.liked a.ctrls-item__icon svg {
  fill: var(--sptbl-primary-color) !important;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.liked span.num,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.liked span.num {
  color: var(--sptbl-primary-color) !important;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.reposted span.ctrls-item__icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.reposted a.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.reposted span.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.reposted a.ctrls-item__icon svg {
  fill: var(--sptbl-primary-color) !important;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.reposted span.num,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.reposted span.num {
  color: var(--sptbl-primary-color) !important;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon svg {
  width: 26px;
  height: 26px;
  opacity: 0.7;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon::before, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon::after,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon::before,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon::after {
  display: none;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon:hover svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon:active svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon:focus svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon:hover svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon:active svg,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item.dropleft div.dropdown-toggle.ctrls-item__icon:focus svg {
  opacity: 1;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden div.soft-hidden-post,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden div.soft-hidden-post {
  border: 2px solid var(--sptbl-primary-border-color);
  padding: 12px 15px;
  border-radius: var(--sptbl-secondary-border-radius);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden div.soft-hidden-post p,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden div.soft-hidden-post p {
  color: var(--sptbl-secondary-text-color);
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-right: var(--sptbl-primary-offset-size);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden div.soft-hidden-post button.btn-custom,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden div.soft-hidden-post button.btn-custom {
  font-size: 0.6875rem;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden + div.post-data__content-inner,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden + div.post-data__content-inner {
  display: none;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden.show + div.post-data__content-inner,
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.pulse-timeline__card div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-hidden.show + div.post-data__content-inner {
  display: block !important;
}
div.post-placeholder {
  width: 100%;
  display: block;
  border: 2px solid var(--sptbl-primary-border-color);
  padding: 12px 15px;
  border-radius: var(--sptbl-secondary-border-radius);
}
div.post-placeholder div.icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  margin-right: 15px;
}
div.post-placeholder div.icon svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-secondary-text-color);
}
div.post-placeholder p {
  color: var(--sptbl-secondary-text-color);
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-right: 15px;
}
div.post-placeholder p a {
  color: var(--sptbl-primary-link-color);
  font-weight: 500;
}
div.post-placeholder p a:hover, div.post-placeholder p a:active {
  color: var(--sptbl-primary-link-color);
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder {
  margin-top: 10px;
  padding: 60px 30px;
  border: 1px solid var(--sptbl-primary-border-color);
  border-radius: 0.8rem;
  background-color: var(--sptbl-timeline-placeholder-bg-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg {
  background: var(--sptbl-secondary-bg-color);
  width: 100px;
  height: 100px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg svg {
  width: 50px;
  height: 50px;
  fill: var(--sptbl-primary-color);
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg {
    width: 70px;
    height: 70px;
  }
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg svg {
    width: 30px;
    height: 30px;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg.icon__bg_success {
  background: var(--sptbl-success-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg.icon__bg_success svg {
  fill: #ffffff;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg.icon__bg_warning {
  background: var(--sptbl-warning-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg.icon__bg_warning svg {
  fill: #ffffff;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg.icon__bg_danger {
  background: var(--sptbl-danger-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.icon div.icon__bg.icon__bg_danger svg {
  fill: #ffffff;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.pl-message {
  margin-bottom: 50px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.pl-message h4 {
  font-size: 20px;
  padding: 0;
  margin: 0 0 15px 0;
  line-height: 20px;
  color: var(--sptbl-primary-text-color);
  font-weight: 700;
  text-align: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.pl-message p {
  font-size: 1rem;
  line-height: 1.6;
  padding: 0;
  margin: 0;
  color: var(--sptbl-secondary-text-color);
  text-align: center;
  overflow-wrap: break-word;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.pl-message p a {
  font-weight: 500;
  color: var(--sptbl-primary-link-color);
  text-decoration: underline;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.pl-message p span.inline-icon {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.pl-message p span.inline-icon svg {
  width: 15px;
  height: 15px;
  fill: var(--sptbl-primary-color);
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.pl-message h4 {
    font-size: 18px;
  }
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.pl-message p {
    font-size: 0.875rem;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.c2action-single {
  text-align: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-placeholder div.c2action-single button {
  padding-left: 40px;
  padding-right: 40px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  background: var(--sptbl-timeline-navbar-bg-color);
  border: 1px solid var(--sptbl-primary-border-color);
  border-width: 0px 1px 0px 1px;
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  z-index: 10;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item {
  flex: 1;
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item a {
  display: block;
  text-decoration: none;
  outline: 0;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn {
  background: transparent;
  color: var(--sptbl-secondary-text-color);
  box-shadow: none;
  border: none;
  padding: 17px var(--sptbl-primary-offset-size) 20px var(--sptbl-primary-offset-size);
  margin: 0px;
  cursor: pointer;
  display: block;
  width: 100%;
  outline: 0;
  position: relative;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn {
    padding: 15px 4px;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn span.btn-flex-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
  line-height: 1;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn span.btn-flex-inner span.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-left: 5px;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn span.btn-flex-inner span.text {
    font-size: 0.6875rem;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn span.btn-flex-inner span.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  line-height: 0px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn span.btn-flex-inner span.icon svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-secondary-text-color);
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn span.btn-flex-inner span.icon {
    width: 15px;
    height: 15px;
  }
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 3px;
  background: var(--sptbl-primary-border-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn.active {
  background: var(--sptbl-timeline-navbar-item-bg-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn.active::after {
  background: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn.active span.btn-flex-inner span.text {
  color: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn.active span.btn-flex-inner span.icon svg {
  fill: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item a.router-link-exact-active button.timeline-navbar__item-btn {
  background: var(--sptbl-timeline-navbar-item-bg-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item a.router-link-exact-active button.timeline-navbar__item-btn::after {
  background: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item a.router-link-exact-active button.timeline-navbar__item-btn span.btn-flex-inner span.text {
  color: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item a.router-link-exact-active button.timeline-navbar__item-btn span.btn-flex-inner span.icon svg {
  fill: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn:hover, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn:active, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-navbar div.timeline-navbar__item .timeline-navbar__item-btn:focus {
  background: var(--sptbl-event-hover-bg);
}
.user-card-item.user-list-item {
  margin-top: 10px !important;
  transition: all .27s ease-in-out;
  padding: var(--sptbl-primary-offset-size);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
  background-color: var(--sptbl-suggested-bg-color);
  padding-bottom: 10px;
}
.user-card-item.user-list-item div.user-list-item__avatar {
  width: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
}
.user-card-item.user-list-item div.user-list-item__avatar a div.user-avatar {
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  border-radius: 100%;
  overflow: hidden;
}
.user-card-item.user-list-item div.user-list-item__avatar a div.user-avatar img {
  width: 100%;
  height: 100%;
}
.user-card-item.user-list-item div.user-list-item__data {
  flex: 1;
  padding-left: var(--sptbl-primary-offset-size);
}
.user-card-item.user-list-item div.user-list-item__data div.user-data {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body {
  flex: 1;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline {
  display: flex;
  justify-content: space-between;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left {
  flex: 1;
  margin-right: var(--sptbl-primary-offset-size);
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a {
  text-decoration: none;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span {
  font-size: var(--sptbl-primary-name-size);
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:last-child {
  text-transform: lowercase;
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:hover, .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:focus, .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:active {
  color: var(--sptbl-primary-link-color);
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  line-height: 0px;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.icon svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-secondary-text-color);
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.text {
  padding: 0px 5px;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--sptbl-secondary-text-color);
}
@media (max-width: 767.98px) {
  .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.text {
    font-size: 0.8125rem;
  }
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.text a {
  color: var(--sptbl-primary-link-color);
  text-decoration: underline;
  font-size: inherit;
  line-height: inherit;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.banner {
  height: 15px;
  line-height: 1;
  overflow: hidden;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.banner svg {
  height: 100%;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 100%;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon svg {
  width: 26px;
  height: 26px;
  fill: var(--sptbl-secondary-text-color);
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon::before, .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon::after {
  display: none;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:hover a.icon, .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:active a.icon, .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:focus a.icon {
  background: var(--sptbl-secondary-bg-color);
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:hover a.icon svg, .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:active a.icon svg, .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:focus a.icon svg {
  fill: var(--sptbl-primary-color);
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats {
  margin-top: 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats {
    margin-top: 12px;
  }
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats .stats-item {
  margin-right: var(--sptbl-primary-offset-size);
  text-decoration: none;
  display: block;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats .stats-item:hover span {
  color: var(--sptbl-primary-color) !important;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats .stats-item span {
  font-size: 1rem;
  color: var(--sptbl-secondary-text-color);
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats .stats-item span:first-child {
  font-weight: 700;
  color: var(--sptbl-primary-text-color);
}
@media (max-width: 767.98px) {
  .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats .stats-item span {
    font-size: 0.875rem;
  }
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__about {
  color: var(--sptbl-primary-text-color);
  font-size: 0.9375rem;
  margin-top: 12px;
  line-height: 1.4;
  overflow: hidden;
  word-break: break-word;
}
@media (max-width: 767.98px) {
  .user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__about {
    font-size: 0.8125rem;
    margin-top: 8px;
  }
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common {
  margin-top: 20px;
  overflow: hidden;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__title {
  font-size: 0.875rem;
  color: var(--sptbl-primary-color);
  margin-bottom: 5px;
  font-weight: 500;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 7px;
  align-items: center;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item {
  flex-basis: 32px;
  flex-shrink: 0;
  margin-left: -7px;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item a {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  text-decoration: none;
  border: 1px solid var(--sptbl-primary-border-color);
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item a img {
  width: 100%;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item.common-follows__item_total {
  margin-left: 10px;
}
.user-card-item.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item.common-follows__item_total span {
  font-size: 1rem;
  color: var(--sptbl-primary-color);
  line-height: 1;
  font-weight: 700;
}

div.timeline-hashtags-container {
  margin-top: 10px;
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
  background-color: var(--sptbl-list-item-bg-color);
}

div.hashtag-list-item {
  margin-top: 10px;
  margin-bottom: 20px;
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item {
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  transition: all 0.27s ease-in-out;
  padding: 20px var(--sptbl-primary-offset-size);
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  background-color: var(--sptbl-list-item-bg-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item div.hashtag-data {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item div.hashtag-data div.hashtag-data__left-icon, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item div.hashtag-data div.hashtag-data__right-icon {
  flex-shrink: 0;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item div.hashtag-data div.hashtag-data__left-icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item div.hashtag-data div.hashtag-data__right-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--sptbl-secondary-text-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item div.hashtag-data div.hashtag-data__body {
  flex: 1;
  padding: 0px var(--sptbl-primary-offset-size);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item div.hashtag-data div.hashtag-data__body span:first-child {
  font-size: var(--sptbl-primary-name-size);
  font-weight: 700;
  color: var(--sptbl-primary-text-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item div.hashtag-data div.hashtag-data__body span:last-child {
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
  font-size: 0.875rem;
  margin-left: 5px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item:hover, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item:active {
  background: var(--sptbl-event-hover-bg);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item:hover div.hashtag-data div.hashtag-data__right-icon svg, body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item:active div.hashtag-data div.hashtag-data__right-icon svg {
  fill: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-data-loader {
  padding: var(--sptbl-primary-offset-size);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-data-loader button {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: var(--sptbl-primary-offset-size);
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  position: relative;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert.timeline-alert_align-center {
  align-items: center;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert div.timeline-alert__icon {
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert div.timeline-alert__icon svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert div.timeline-alert__text {
  flex: 1;
  overflow: hidden;
  font-size: 1rem;
  color: var(--sptbl-secondary-text-color);
  margin-left: var(--sptbl-primary-offset-size);
  position: relative;
  z-index: 2;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert div.timeline-alert__text a {
  color: var(--sptbl-primary-link-color);
  font-weight: 500;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert.timeline-alert_info div.timeline-alert__icon {
  background: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert.timeline-alert_info div.timeline-alert__text {
  color: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-alert-container div.timeline-alert.timeline-alert_info::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: var(--sptbl-primary-color);
  opacity: 0.07;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.spa-preloader {
  position: absolute;
  display: block;
  left: 0;
  top: 65px;
  bottom: 0;
  right: 0;
  width: 100%;
  background: var(--sptbl-primary-bg-color);
  z-index: 5000;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.spa-preloader.d-none {
  display: none;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.spa-preloader div.spa-preloader-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 100px 50px;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.spa-preloader div.spa-preloader-inner span.spinner-icon {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.spa-preloader div.spa-preloader-inner span.spinner-icon svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border-right: none;
    border-left: none;
  }
}
body main.main-content-container div.main-content-container-inner div.left-sb-container {
  width: 260px;
  min-width: 260px;
  flex-basis: 260px;
  background: var(--sptbl-primary-bg-color);
  -moz-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  z-index: 1000;
  will-change: transform;
  transform: translateZ(0);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  backface-visibility: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
  /* scrollbar */
}
body main.main-content-container div.main-content-container-inner div.left-sb-container::-webkit-scrollbar {
  width: 0;
  background: transparent;
  display: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container::-webkit-scrollbar-track {
  width: 0;
  background: transparent;
  display: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container::-webkit-scrollbar-thumb {
  width: 0;
  background: transparent;
  display: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container::-webkit-scrollbar-thumb:hover {
  width: 0;
  background: transparent;
  display: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner {
  padding: var(--sptbl-primary-offset-size) 20px var(--sptbl-primary-offset-size) 0px;
  padding-top: 10px;
  /* transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  will-change: position, transform; */
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp {
  width: 100%;
  overflow: hidden;
  display: block;
  margin-bottom: 20px;
  padding: var(--sptbl-primary-offset-size);
  border: 1px solid var(--sptbl-primary-border-color);
  border-radius: var(--sptbl-tertiary-border-radius);
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-title {
  display: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group div.form-check label.form-check-label {
  font-size: 0.8125rem;
  color: var(--sptbl-secondary-text-color);
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group div.form-cta-link {
  text-align: center;
  line-height: 1.4;
  color: var(--sptbl-secondary-text-color);
  font-size: 0.8125rem;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group div.form-cta-link a {
  color: var(--sptbl-primary-link-color);
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group div.login-or-signup {
  display: flex;
  justify-content: center;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group div.login-or-signup span {
  font-size: 0.8125rem;
  line-height: 13px;
  position: relative;
  color: var(--sptbl-secondary-text-color);
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group div.login-or-signup span:before {
  content: "";
  height: 2px;
  background: var(--sptbl-primary-border-color);
  position: absolute;
  top: 4px;
  left: -45px;
  width: 30px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group div.login-or-signup span:after {
  content: "";
  height: 2px;
  background: var(--sptbl-primary-border-color);
  position: absolute;
  top: 4px;
  right: -45px;
  width: 30px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group div.tos-agree label a {
  color: var(--sptbl-primary-link-color);
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group.oauth-login-providers {
  display: block;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group.oauth-login-providers a.social-login-btn {
  margin-bottom: 20px;
  display: block;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group.oauth-login-providers a.social-login-btn button {
  border: none;
  text-transform: none;
  font-size: 0.6875rem;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group.oauth-login-providers a.social-login-btn button span.btn-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  fill: #fff;
  margin-right: 15px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group.oauth-login-providers a.social-login-btn button span.btn-icon svg {
  width: 100%;
  height: 100%;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group.oauth-login-providers a.social-login-btn.twitter button {
  background: #64ccf2;
  color: #fff;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group.oauth-login-providers a.social-login-btn.facebook button {
  background: #507cc0;
  color: #fff;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group.oauth-login-providers a.social-login-btn.google button {
  box-shadow: none;
  background: #fff;
  border: 1px solid var(--sptbl-primary-border-color);
  color: var(--sptbl-primary-text-color);
  color: #111;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.welcome-page__rp div.form-group.oauth-login-providers a.social-login-btn:last-child {
  margin-bottom: 0px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group {
  padding: var(--sptbl-primary-offset-size);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
  background-color: var(--sptbl-sidebar-nav-group-bg-color);
  margin-bottom: 10px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item-divider {
  margin-left: 37px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 43px;
  align-items: center;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.icon {
  line-height: 1;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.icon svg {
  width: 24px;
  height: 24px;
  transition: all 0.27s ease;
  opacity: 1;
  fill: var(--sptbl-secondary-text-color);
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.icon.avatar {
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 100%;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.icon.avatar img {
  width: 100%;
  height: 100%;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.text {
  margin-left: 15px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .text a {
  font-size: 0.9375rem;
  color: var(--sptbl-secondary-text-color);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.27s ease;
  line-height: 18px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.text.dropdown-toggle::after {
  display: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.text b.wallet {
  color: green;
  font-weight: 500;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.info-indicators {
  display: inline-block;
  background: var(--sptbl-notification-color);
  color: #ffffff;
  text-align: center;
  padding: 0 5px;
  border-radius: 10px;
  background-clip: padding-box;
  font-size: 0.6875rem;
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: 18px;
  vertical-align: middle;
  min-height: 13px;
  min-width: 20px;
  font-weight: 400;
  position: relative;
  margin-left: 4px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.info-indicators::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  content: "";
  border-radius: 5em;
  box-shadow: 0 0 0 0 var(--sptbl-notification-color-lighten);
  transform: scale(1);
  animation: pulse 3s infinite;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.info-indicators:empty {
  display: none;
  visibility: hidden;
  opacity: 0;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item:hover, body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item:hover a, body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item:active, body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item.active a {
  color: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item:hover span.icon svg, body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item:active span.icon svg, body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item.active span.icon svg {
  fill: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group.sidebar__nav-group_collapse {
  max-height: 0;
  overflow: hidden;
  transition: all .4s, visibility 0s linear 0.4s;
  visibility: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group.sidebar__nav-group_collapse.open {
  visibility: visible;
  padding-top: var(--sptbl-primary-offset-size);
  padding-bottom: var(--sptbl-primary-offset-size);
  transition: all 0.4s, visibility 0s;
  margin-bottom: 10px;
  max-height: 500px;
  /* This will be overridden dynamically */
  /* transition: max-height .4s ease-out; */
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group.sidebar__nav-group_toggle {
  opacity: 1;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group.sidebar__nav-group_toggle:hover, body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group.sidebar__nav-group_toggle:active {
  opacity: 1;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group div.sptbl-left-sidebar a {
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group div.sptbl-left-sidebar a img {
  height: 36px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer {
  display: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer {
  width: 100%;
  display: block;
  margin-bottom: 0px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item {
  margin-right: 10px;
  margin-bottom: 7px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item > a, body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown {
  font-size: 0.8125rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 16px;
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown {
  cursor: pointer;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown div.dropdown-toggle {
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown div.dropdown-toggle span.language-banner {
  line-height: 11px;
  margin-right: 5px;
  overflow: hidden;
  border-radius: 2px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown div.dropdown-toggle span.language-banner svg {
  width: 15px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown div.dropdown-toggle span.language-name {
  line-height: 11px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown div.dropdown-menu {
  min-width: 220px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown div.dropdown-menu a.dropdown-item {
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer div.footer-nav-get-apps {
  display: flex;
  width: 100%;
  margin-top: 5px;
  align-items: flex-start;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer div.footer-nav-get-apps a {
  margin-right: 5px;
  text-decoration: none;
  color: var(--sptbl-secondary-text-color);
  opacity: 0.5;
  transition: all 0.27s ease;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer div.footer-nav-get-apps a svg {
  width: 25px;
  height: 25px;
  transition: all 0.27s ease;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer div.footer-nav-get-apps a:hover, body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer div.main-footer div.footer-nav-get-apps a:active {
  opacity: 0.9;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__button {
  padding-top: 0px;
  margin-bottom: 20px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__button button span.btn-icon {
  /* 24x20 is the box icons/spout-logo.svg is pixel-snapped
     for; change one and recompute the other. */
  width: 24px;
  height: 20px;
  margin-right: 5px;
}
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__button button span.btn-icon svg {
  width: 24px;
  height: 20px;
  fill: #ffffff;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner {
    position: relative;
    width: 100%;
    overflow-x: hidden;
  }
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.left-sb-container {
    height: 100vh;
    height: 100svh;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-330px);
    border-right: none;
    z-index: 9999999999;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--sptbl-primary-offset-size);
  }
  body main.main-content-container div.main-content-container-inner div.left-sb-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  body main.main-content-container div.main-content-container-inner div.left-sb-container::-webkit-scrollbar {
    display: none;
  }
  body main.main-content-container div.main-content-container-inner div.left-sb-container.show {
    transform: translateX(0);
    width: 250px;
  }
  body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner {
    padding: 0px;
  }
  body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__footer {
    display: block;
    margin-top: 15px;
  }
  body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__button {
    display: none;
  }
}
body main.main-content-container div.main-content-container-inner div.right-sb-container {
  flex: 1;
  background: var(--sptbl-primary-bg-color);
  min-width: 320px;
  width: 320px;
  height: 100vh;
  height: 100svh;
  /* -moz-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out; */
  will-change: transform;
  transform: translateZ(0);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner {
  padding: var(--sptbl-primary-offset-size) 0px var(--sptbl-primary-offset-size) 20px;
  padding-top: var(--sptbl-primary-offset-size) 0px var(--sptbl-primary-offset-size) 10px;
  /* transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform; */
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header {
  margin-bottom: 10px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar {
  position: relative;
  width: 100%;
  margin-top: 10px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input {
  position: relative;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input input {
  padding: 0px 48px;
  height: 48px;
  font-size: 0.875rem;
  background-color: var(--sptbl-sidebar-searchbar-bg-color);
  color: var(--sptbl-primary-text-color);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input input::placeholder {
  color: var(--sptbl-input-placeholder-color);
  font-size: 0.875rem;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input input:active, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input input:hover, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input input:focus {
  box-shadow: none;
  outline: none;
  border: 2px solid var(--sptbl-primary-color);
  background: var(--sptbl-primary-bg-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input input:active + span.keyword-input__left-icon svg, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input input:hover + span.keyword-input__left-icon svg, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input input:focus + span.keyword-input__left-icon svg {
  fill: var(--sptbl-primary-color);
  opacity: 1;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__left-icon, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-spinner, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-icon {
  position: absolute;
  top: 0px;
  text-decoration: none;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__left-icon svg, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-spinner svg, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-icon svg {
  width: 22px;
  height: 22px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__left-icon {
  left: 0px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__left-icon svg {
  fill: var(--sptbl-secondary-text-color);
  opacity: 0.8;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-spinner {
  right: 0px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-spinner svg {
  width: 28px;
  height: 28px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-icon {
  right: 0px;
  cursor: pointer;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-icon svg {
  fill: var(--sptbl-secondary-text-color);
  opacity: 0.8;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-icon:active svg, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-icon:hover svg, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__input span.keyword-input__right-icon:focus svg {
  fill: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result {
  width: 100%;
  border-radius: var(--sptbl-secondary-border-radius);
  box-shadow: var(--sptbl-primary-box-shadow);
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50px;
  z-index: 10;
  background: var(--sptbl-primary-bg-color);
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 250px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item {
  padding: var(--sptbl-primary-offset-size);
  border-bottom: 1px solid var(--sptbl-primary-border-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item a {
  width: 100%;
  display: block;
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item a div.result-item-data {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item a div.result-item-data div.result-item-data__data {
  overflow: hidden;
  flex: 1;
  margin-left: var(--sptbl-primary-offset-size);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item a div.result-item-data div.result-item-data__data div.result-item-data__topline {
  font-size: var(--sptbl-primary-name-size);
  color: var(--sptbl-primary-text-color);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item a div.result-item-data div.result-item-data__data div.result-item-data__botline {
  font-size: 0.875rem;
  line-height: 1;
  color: var(--sptbl-secondary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item.search-result__list-item_htag a div.result-item-data div.result-item-data__icon {
  flex-shrink: 0;
  flex-basis: 40px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item.search-result__list-item_htag a div.result-item-data div.result-item-data__icon div.icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--sptbl-primary-border-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item.search-result__list-item_htag a div.result-item-data div.result-item-data__icon div.icon svg {
  width: 22px;
  height: 22px;
  fill: var(--sptbl-secondary-text-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item.search-result__list-item_user a div.result-item-data div.result-item-data__avatar {
  flex-shrink: 0;
  flex-basis: 40px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item.search-result__list-item_user a div.result-item-data div.result-item-data__avatar div.avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--sptbl-primary-border-color);
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item.search-result__list-item_user a div.result-item-data div.result-item-data__avatar div.avatar img {
  width: 100%;
  height: 100%;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item:hover, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item:active {
  background: var(--sptbl-event-hover-bg);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__body div.search-result__list div.search-result__list-item:last-child {
  border-bottom: none;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__footer {
  padding: var(--sptbl-primary-offset-size);
  border-top: 1px solid var(--sptbl-primary-border-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__footer.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__header form.sidebar-searchbar div.sidebar-searchbar__result div.search-result div.search-result__footer.disabled a {
  cursor: default;
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content,
.timeline-container[data-app=thread] div.sidebar-content {
  margin-top: 10px !important;
  padding: var(--sptbl-primary-offset-size);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
  background-color: var(--sptbl-sidebar-content-bg-color);
  padding-bottom: 10px;
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__header,
.timeline-container[data-app=thread] div.sidebar-content div.sidebar-content__header {
  font-size: 0.875rem;
  color: var(--sptbl-primary-text-color);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 20px;
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item,
.timeline-container[data-app=thread] div.sidebar-content div.sidebar-users div.sidebar-users__item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  text-decoration: none;
  margin-bottom: 20px;
  overflow: hidden;
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-avatar,
.timeline-container[data-app=thread] div.sidebar-content div.sidebar-users div.sidebar-users__item div.sidebar-users__item-avatar {
  flex-basis: 45px;
  flex-shrink: 0;
  line-height: 1;
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-avatar img,
.timeline-container[data-app=thread] div.sidebar-content div.sidebar-users div.sidebar-users__item div.sidebar-users__item-avatar img {
  width: 45px;
  height: 45px;
  border-radius: 100%;
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data,
.timeline-container[data-app=thread] div.sidebar-content div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data {
  flex: 1;
  overflow: hidden;
  padding: 0px var(--sptbl-primary-offset-size);
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-name span,
.timeline-container[data-app=thread] div.sidebar-content div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-name span {
  font-size: var(--sptbl-primary-name-size);
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1;
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-name span:hover,
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-name span:focus,
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-name span:active,
.timeline-container[data-app=thread] div.sidebar-content div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-name span:hover,
.timeline-container[data-app=thread] div.sidebar-content div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-name span:focus,
.timeline-container[data-app=thread] div.sidebar-content div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-name span:active {
  color: var(--sptbl-primary-link-color);
}

body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-followers {
  font-size: 0.875rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item div.sidebar-users__item-data div.sidebar-users__item-followers span {
  font-weight: 500;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-users div.sidebar-users__item:last-child {
  margin-bottom: 0px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-hashtags {
  flex-wrap: wrap;
  margin-right: -10px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-hashtags div.sidebar-hashtags__item {
  margin-bottom: 10px;
  margin-right: 10px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-hashtags div.sidebar-hashtags__item a.sidebar-hashtags__item-data {
  text-decoration: none;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-hashtags div.sidebar-hashtags__item a.sidebar-hashtags__item-data span.icon {
  width: 18px;
  height: 18px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-hashtags div.sidebar-hashtags__item a.sidebar-hashtags__item-data span.icon svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-secondary-text-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-hashtags div.sidebar-hashtags__item a.sidebar-hashtags__item-data span.text {
  font-size: var(--sptbl-primary-name-size);
  font-weight: 400;
  color: var(--sptbl-secondary-text-color);
  position: relative;
  z-index: 2;
  margin-left: 3px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-hashtags div.sidebar-hashtags__item a.sidebar-hashtags__item-data:hover, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-hashtags div.sidebar-hashtags__item a.sidebar-hashtags__item-data:active {
  border-color: var(--sptbl-primary-color);
  color: var(--sptbl-primary-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__body div.sidebar-content-empty {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sptbl-secondary-text-color);
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__body div.sidebar-content div.sidebar-content__footer {
  margin-top: 20px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer ul.footer-nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item {
  margin-right: 10px;
  margin-bottom: 3px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item > a, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item div.dropdown-toggle {
  font-size: 0.875rem;
  color: var(--sptbl-secondary-text-color);
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown {
  cursor: pointer;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown div.dropdown-toggle span.language-banner {
  line-height: 11px;
  margin-right: 5px;
  overflow: hidden;
  border-radius: 2px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown div.dropdown-toggle span.language-banner svg {
  width: 15px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown div.dropdown-toggle span.language-name {
  line-height: 11px;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer ul.footer-nav li.footer-nav-item.dropdown a.dropdown-item {
  text-decoration: none;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer div.footer-nav-get-apps {
  display: flex;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer div.footer-nav-get-apps a {
  margin-right: 5px;
  text-decoration: none;
  color: var(--sptbl-secondary-text-color);
  opacity: 0.5;
  transition: all 0.27s ease;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer div.footer-nav-get-apps a svg {
  width: 25px;
  height: 25px;
  transition: all 0.27s ease;
}
body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer div.footer-nav-get-apps a:hover, body main.main-content-container div.main-content-container-inner div.right-sb-container div.sidebar__inner div.right-sidebar div.right-sidebar__footer div.main-footer div.footer-nav-get-apps a:active {
  opacity: 0.9;
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.right-sb-container {
    display: none;
  }
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner div.left-sb-container {
    position: fixed;
  }
}
@media (max-width: 767.98px) {
  body main.main-content-container div.main-content-container-inner {
    padding-bottom: 54px;
    max-width: 100% !important;
    /* overflow: hidden; */
  }
}
body main.main-content-container.start-mode div.main-content-container-inner div.left-sb-container {
  width: 320px;
  min-width: 320px;
}
body div.mobile-bottom-navbar {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  border-top: 2px solid var(--sptbl-navbar-border-color);
  background: var(--sptbl-navbar-bg-color);
  z-index: 1000;
  height: 55px;
  display: none;
}
body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .navbar-ctrl, body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .sidebar__nav-item {
  height: 100%;
  margin: 0;
  line-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: 0;
  cursor: pointer;
  padding: 0 5px;
  position: relative;
  display: flex;
  align-items: center;
}
body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .navbar-ctrl svg, body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .sidebar__nav-item svg {
  width: 25px;
  height: 25px;
  fill: var(--sptbl-navbar-text-color);
}
body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .navbar-ctrl span.info-indicators, body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .sidebar__nav-item span.info-indicators {
  position: absolute;
  top: 10px;
  left: 5px;
  background: var(--sptbl-notification-color);
  color: #fff;
  text-align: center;
  padding: 4px;
  border-radius: 10em;
  z-index: 10;
  background-clip: padding-box;
  display: inline-block;
  font-size: 0.5625rem;
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: 1.3;
  min-height: 13px;
  min-width: 20px;
}
body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .navbar-ctrl span.info-indicators::before, body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .sidebar__nav-item span.info-indicators::before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  content: "";
  border-radius: 5em;
  box-shadow: 0 0 0 0 var(--sptbl-notification-color-lighten);
  transform: scale(1);
  animation: pulse 3s infinite;
}
body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .navbar-ctrl span.info-indicators:empty, body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .sidebar__nav-item span.info-indicators:empty {
  display: none;
  visibility: hidden;
  opacity: 0;
}
body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .navbar-ctrl .router-link-active:after, body div.mobile-bottom-navbar div.mobile-bottom-navbar-inner .sidebar__nav-item .router-link-active:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: var(--sptbl-primary-color);
  left: 0;
  bottom: 0;
  right: 0;
}
body form div.form-group {
  margin-bottom: 20px;
  /* Baseline skin for ANY element carrying `.form-control`.
     Bootstrap (statics/css/css-libs.css, loaded before this sheet by
     public/index.html) hardcodes
       .form-control { background:#fff; color:#212529;
                       border:1px solid #ced4da; border-radius:.25rem }
     Every app-level field rule was element-qualified
     (`input.form-control`, `select.form-control`, `textarea.form-control`),
     so anything else carrying the class kept Bootstrap's white on all
     three themes - most visibly the `div` root of
     components/atoms/inputs/SelectWithSearch.vue, which is what the
     Account Privacy dropdowns are built from, plus the same control in
     DateTimePicker, PasswordInput, CreatePod, CreateBundle,
     EditProfileModal and BasePod.
     Unqualified on purpose: it only has to outrank Bootstrap's own
     unqualified rule (same specificity, later sheet wins). The
     element-qualified rules below are far more specific and keep their
     own metrics. */
  /* Focus affordance for the field types that have no rule of their own
     (`select.form-control`, and the `div` root of SelectWithSearch).
     Without this they fall to Bootstrap's `.form-control:focus`
     (css-libs.css:57) which paints an off-brand #86b7fe border and a
     rgba(13,110,253,.25) ring - Bootstrap blue, unrelated to the active
     skin - and only loses to app rules that out-specify its (0,2,0).
     The accent is skin-scoped (`body[data-skin=...]`, 6 values), so it
     carries the default-skin literal as a fallback: with an unset
     `--sptbl-primary-color` the shorthand would be colourless and the
     whole ring would silently disappear. */
  /* Checkboxes, radios and switches. The vendored Bootstrap was only
     PARTIALLY themed: its border already reads --sptbl-secondary-text-color
     and `:checked` already reads --sptbl-primary-color
     (libs/bootstrap/_variables.scss:742/:749), but the UNCHECKED fill was
     left as the literal `$white` (_variables.scss:741 -> css-libs.css:277).
     Nothing overrode it, so every one of the ~55 checkboxes/radios/switches
     in the app sat as a white chip on all three themes. Same unqualified
     trick as `.form-control` above: equal specificity, later sheet wins. */
  /* `select` needs the ring spelled out on the SAME ancestor chain as its
     base rule. The generic `.form-control:focus` above is (0,2,0) while
     `body form div.form-group select.form-control` - which carries
     `box-shadow: none` - is (0,2,4): equal class count, more elements, so
     the resting rule wins and the ring never paints. `input` and
     `textarea` escape this because their own focus rules already out-
     specify it. Measured: without this, selects were the one field type
     with no focus affordance on any theme. */
  /* The switch knob is a data-URI SVG, which cannot read a CSS variable.
     Bootstrap ships three: unchecked rgba(0,0,0,.25) (css-libs.css:328),
     focus %2386b7fe (:339, Bootstrap blue) and checked %23fff (:343).
     Only the checked one is defensible - it sits on the accent-filled
     track. The other two now use one dark knob, which works because after
     the rule above the unchecked track is --sptbl-input-bg-color, and that
     is a LIGHT fill in all three themes (#f3f7fb Day, #a0b3d4 Night,
     #d4c3ab Dawn). One literal is correct everywhere; a per-theme knob
     would need three background-image overrides for no visual gain. */
  /* vue-datepicker-next (components/molecules/DateTimePicker.vue, used by
     CreatePod). Its stylesheet is imported by the component, so it is
     bundled into the JS and injected into <head> at RUNTIME - after both
     <link> sheets. `.mx-input` is (0,1,0), exactly like the `.form-control`
     baseline above, so source order hands the win to the vendor and the
     field stayed #555-on-#fff with a #ccc border on every theme. Beating
     it needs more than one class; `body` prefix does it. */
  /* ...and the calendar panel it opens, which is a floating surface on the
     card rather than a field, so it takes the page ink. */
  /* The TIME column is a sibling surface inside that panel, not a child
     of its background - `.mx-time{background:#fff}` paints itself white
     regardless of what the panel above is set to. Theming only the panel
     therefore fixed the calendar half and left the clock half white,
     while the light `--sptbl-primary-text-color` it inherits stayed
     inherited. Result on every DARK theme (dawn, dark, midnight): cream
     text on white, effectively invisible. Reported on dawn while creating
     a Pod; the default white theme hid it because its ink is dark. */
  /* Its internal rules (the header underline and the hour/minute/AM-PM
     column dividers) are the same #e8e8e8 seams as the calendar side. */
  /* Vendor hardcodes #73879c on the header controls (month/year labels and
     the prev/next chevrons, whose arrows are drawn with `currentColor`),
     which is a mid slate picked for a white panel. */
  /* Hover/selection fills are #f3f9fe and #dbedfb - near-white washes that
     read as blank gaps on a dark panel, and drag the ink back to #73879c
     with them. */
  /* Selection is the accent as INK on a neutral chip, not white ink on an
     accent fill.

     The fill-with-accent form is the app's primary-button convention
     (`var(--sptbl-primary-btn-text-color, #fff)` a few rules below), but
     that variable is never actually declared, so it is always the #fff
     fallback - and white on the accent measured 1.88:1 (yellow skin) to
     4.58:1 (pink), failing 20 of the 24 bg x skin combinations. Dawn and
     midnight redefine --sptbl-primary-color themselves, so they sit at a
     flat 2.04:1 / 2.51:1 no matter which skin is chosen.

     Inverting it (accent as ink on a neutral chip) does not work either -
     measured 1.42:1 on dark+purple and 1.68:1 on default+yellow, because
     nothing guarantees the accent differs in LUMINANCE from the surface;
     the skins are picked to be distinguishable in hue, on a surface of
     the designer's choosing.

     So the accent carries no text at all. The ink is the panel's own
     --sptbl-primary-text-color, which is the one value measured legible on
     every theme (12.5-21:1), and selection is signalled by a neutral chip,
     bold weight, and an accent ring. A ring is a UI component rather than
     text, so it does not owe 4.5:1 - and the reading of the date never
     depends on it. */
  /* `today` is vendor #2a90e9, which ignores the theme accent entirely.
     Recolouring it to the accent is the obvious fix and the wrong one for
     the same reason as the selected cell: the yellow skin on the white
     panel measured 1.88:1. Underline it in the accent instead and leave
     the digit in the panel's own ink, so the marker is decorative and the
     date stays readable on every skin. (When today is also the selected
     day, the `.active` ring wins the box-shadow on specificity - correct,
     selection is the stronger signal.) */
  /* Leading/trailing days from the neighbouring month. Vendor #ccc is
     invisible on a dark panel, and dimming with opacity measured
     1.87-2.43:1 at 0.45 - de-emphasised past the point of being readable,
     which matters because these cells are clickable (they navigate).
     The theme's own secondary ink is already the "less important text"
     value and needs no extra dimming. */
  /* Disabled cells and time items are #ccc on #f3f3f3 - a near-white block
     that on a dark panel looks like a rendering artifact rather than a
     greyed-out option. Dim the panel's own ink instead of painting a fill. */
  /* Internal dividers are #e8e8e8, which on a dark panel is a bright seam. */
}
body form div.form-group.no-mb {
  margin-bottom: 0px !important;
}
body form div.form-group.mt-20 {
  margin-top: 20px;
}
body form div.form-group.mb-10 {
  margin-bottom: 10px;
}
body form div.form-group label {
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--sptbl-secondary-text-color);
  margin-bottom: 7px;
  font-weight: 500;
}
.form-control {
  background: var(--sptbl-input-bg-color);
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
  border: 1px solid var(--sptbl-input-border-color, var(--sptbl-secondary-border-color));
  border-radius: var(--sptbl-field-border-radius);
  box-shadow: none;
}

.form-control:focus {
  background: var(--sptbl-input-bg-color);
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
  border-color: var(--sptbl-primary-color, #64a0e4);
  outline: 0;
  box-shadow: 0 0 0 var(--sptbl-field-focus-ring-width) var(--sptbl-primary-color, #64a0e4);
}

body form div.form-group select.form-control:focus,
body.sptbl-app-settings form div.form-group select.form-control:focus {
  border-color: var(--sptbl-primary-color, #64a0e4);
  box-shadow: 0 0 0 var(--sptbl-field-focus-ring-width) var(--sptbl-primary-color, #64a0e4);
}

.form-check-input {
  background-color: var(--sptbl-input-bg-color);
  border-color: var(--sptbl-secondary-border-color);
}

.form-check-input:focus {
  border-color: var(--sptbl-primary-color, #64a0e4);
  box-shadow: 0 0 0 var(--sptbl-field-focus-ring-width) var(--sptbl-primary-color, #64a0e4);
}

.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,0.55%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,0.55%29'/%3e%3c/svg%3e");
}

body .mx-input {
  background-color: var(--sptbl-input-bg-color);
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
  border: 1px solid var(--sptbl-input-border-color, var(--sptbl-secondary-border-color));
  border-radius: var(--sptbl-field-border-radius);
  box-shadow: none;
}

body .mx-input::placeholder {
  color: var(--sptbl-input-placeholder-text-color, var(--sptbl-input-placeholder-color));
}

body .mx-datepicker-main {
  background-color: var(--sptbl-list-item-bg-color);
  color: var(--sptbl-primary-text-color);
  border: 1px solid var(--sptbl-secondary-border-color);
  border-radius: var(--sptbl-field-border-radius);
}

body .mx-time {
  background: var(--sptbl-list-item-bg-color);
  /* Set explicitly rather than inherited from `.mx-datepicker-main`:
     when the clock replaces the calendar it is positioned absolute
     over the panel, and matching the date surface is the whole ask. */
  color: var(--sptbl-primary-text-color);
  border-left-color: var(--sptbl-secondary-border-color);
}

body .mx-time-header {
  border-bottom-color: var(--sptbl-secondary-border-color);
}

body .mx-time-column {
  border-left-color: var(--sptbl-secondary-border-color);
}

body .mx-datepicker-main .mx-btn {
  color: var(--sptbl-primary-text-color);
}

body .mx-datepicker-main .mx-btn:hover {
  color: var(--sptbl-primary-color);
  border-color: var(--sptbl-primary-color);
}

body .mx-calendar-content .cell:hover,
body .mx-time-column .mx-time-item:hover,
body .mx-time-option:hover {
  background-color: var(--sptbl-secondary-bg-color);
  color: var(--sptbl-primary-text-color);
}

body .mx-calendar-content .cell.active,
body .mx-time-column .mx-time-item.active,
body .mx-time-option.active {
  background-color: var(--sptbl-secondary-bg-color);
  color: var(--sptbl-primary-text-color);
  font-weight: 700;
  /* inset so it cannot shift layout in a table cell */
  box-shadow: inset 0 0 0 2px var(--sptbl-primary-color);
}

body .mx-table-date .today {
  color: var(--sptbl-primary-text-color);
  box-shadow: inset 0 -2px 0 var(--sptbl-primary-color);
}

body .mx-table-date .cell.not-current-month {
  color: var(--sptbl-secondary-text-color, var(--sptbl-primary-text-color));
}

body .mx-calendar-content .cell.disabled,
body .mx-time-column .mx-time-item.disabled,
body .mx-time-option.disabled {
  background-color: transparent;
  color: var(--sptbl-primary-text-color);
  opacity: 0.35;
}

body .mx-calendar + .mx-calendar,
body .mx-datepicker-content {
  border-left-color: var(--sptbl-secondary-border-color);
}

body form div.form-group input.form-control,
body form div.form-group select.form-control,
body.sptbl-app-settings form div.form-group select.form-control {
  height: 52px;
  border-radius: var(--sptbl-field-border-radius);
  background: var(--sptbl-input-bg-color);
  border: 1px solid var(--sptbl-input-border-color, var(--sptbl-secondary-border-color));
  box-shadow: none;
  outline: 0;
  font-size: 0.9375rem;
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
}

body form div.form-group input.form-control::placeholder {
  font-size: 0.875rem;
  color: var(--sptbl-input-placeholder-text-color, var(--sptbl-secondary-text-color));
}
body form div.form-group input.form-control:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
body form div.form-group input.form-control:not(:disabled) {
  /* Hover tints the existing 1px edge; focus adds a ring.
     Previously both states swapped the bottom border 1px -> 3px,
     which re-laid-out the field's contents by 2px on every
     hover. Ring + colour change keeps the box metrics stable. */
}
body form div.form-group input.form-control:not(:disabled):hover, body form div.form-group input.form-control:not(:disabled):active {
  border-color: var(--sptbl-primary-color);
  background: var(--sptbl-input-bg-color);
}
body form div.form-group input.form-control:not(:disabled):focus {
  border-color: var(--sptbl-primary-color);
  background: var(--sptbl-input-bg-color);
  /* Follows --sptbl-primary-color rather than a fixed hex:
     the accent is set by the COLOUR SCHEME axis (6 of them:
     default #64a0e4, green, orange, pink, purple, yellow) and
     overridden again by the Dawn background theme (#e8a878),
     so any literal here would be wrong for most users. */
  box-shadow: 0 0 0 var(--sptbl-field-focus-ring-width) var(--sptbl-primary-color);
}
body form div.form-group input.form-control.is-invalid {
  border-color: var(--sptbl-danger-color);
  box-shadow: none;
}
body form div.form-group input.form-control.is-invalid::placeholder {
  color: var(--sptbl-danger-color);
}
@media (max-width: 767.98px) {
  body form div.form-group input.form-control {
    height: 44px;
    font-size: 0.875rem;
  }
}
body form div.form-group div.password-ctrl {
  position: relative;
}
body form div.form-group div.password-ctrl button.password-ctrl {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0px;
  background: transparent;
  outline: 0;
  box-shadow: none;
  line-height: 0;
  display: inline-block;
  width: 22px;
  height: 22px;
  position: absolute;
  right: 15px;
  top: calc(50% - 10px);
  cursor: pointer;
}
body form div.form-group div.password-ctrl button.password-ctrl span {
  display: inline-block;
  width: 100%;
  height: 100%;
}
body form div.form-group div.password-ctrl button.password-ctrl span svg {
  width: 100%;
  fill: var(--sptbl-secondary-text-color);
  transition: all 0.50s ease;
}
body form div.form-group div.password-ctrl button.password-ctrl:hover span svg, body form div.form-group div.password-ctrl button.password-ctrl:active span svg {
  fill: var(--sptbl-primary-color);
}
body form div.form-group div.vue-dropdown-select {
  height: 52px;
  border: none;
  border-radius: 0px;
  background: var(--sptbl-event-hover-bg);
  box-shadow: none;
  outline: 0;
}
@media (max-width: 767.98px) {
  body form div.form-group div.vue-dropdown-select {
    height: 44px;
  }
}
body form div.form-group div.vue-dropdown-select button.dropdown-toggle {
  height: 52px !important;
  border: none !important;
  border-radius: 0px !important;
  border-bottom: 3px solid var(--sptbl-secondary-border-color) !important;
  outline: 0 !important;
  background: transparent;
  font-size: 0.8125rem;
  line-height: 13px;
  color: var(--sptbl-secondary-text-color);
  box-shadow: none !important;
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
}
body form div.form-group div.vue-dropdown-select button.dropdown-toggle::after {
  position: absolute;
  right: 20px;
  top: calc(50% - 3px);
  border: none;
  border-left: 2px solid var(--sptbl-secondary-border-color);
  border-bottom: 2px solid var(--sptbl-secondary-border-color);
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  transform: rotate(-45deg);
  transition: all 0.27s ease;
}
body form div.form-group div.vue-dropdown-select button.dropdown-toggle:hover, body form div.form-group div.vue-dropdown-select button.dropdown-toggle:focus, body form div.form-group div.vue-dropdown-select button.dropdown-toggle:active {
  border-bottom: 3px solid var(--sptbl-primary-color) !important;
  color: var(--sptbl-secondary-text-color);
}
body form div.form-group div.vue-dropdown-select button.dropdown-toggle:hover::after, body form div.form-group div.vue-dropdown-select button.dropdown-toggle:focus::after, body form div.form-group div.vue-dropdown-select button.dropdown-toggle:active::after {
  border-color: var(--sptbl-primary-color);
}
@media (max-width: 767.98px) {
  body form div.form-group div.vue-dropdown-select button.dropdown-toggle {
    height: 44px !important;
  }
}
body form div.form-group div.vue-dropdown-select.show button.dropdown-toggle::after {
  transform: rotate(-225deg);
}
body form div.form-group div.vue-dropdown-select .dropdown-menu {
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  max-width: 100%;
}
body form div.form-group div.vue-dropdown-select .dropdown-menu a.dropdown-item b.select-check-mark {
  font-size: 1rem;
  font-weight: 500;
  color: var(--sptbl-primary-color);
  line-height: 16px;
  display: inline-block;
}
body form div.form-group textarea.form-control {
  resize: vertical;
  /* Was a hard 0px - the only square field in the app. */
  border-radius: var(--sptbl-field-border-radius);
  background: var(--sptbl-input-bg-color);
  border: 1px solid var(--sptbl-input-border-color, var(--sptbl-secondary-border-color));
  box-shadow: none;
  outline: 0;
  font-size: 0.9375rem;
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
}
body form div.form-group textarea.form-control::placeholder {
  font-size: 0.875rem;
  color: var(--sptbl-input-placeholder-text-color, var(--sptbl-secondary-text-color));
}
body form div.form-group textarea.form-control:hover, body form div.form-group textarea.form-control:active {
  border-color: var(--sptbl-primary-color);
}
body form div.form-group textarea.form-control:focus {
  border-color: var(--sptbl-primary-color);
  box-shadow: 0 0 0 var(--sptbl-field-focus-ring-width) var(--sptbl-primary-color);
}
body form div.form-group textarea.form-control:active {
  cursor: ns-resize;
}
@media (max-width: 767.98px) {
  body form div.form-group textarea.form-control {
    font-size: 0.875rem;
  }
}
body form div.form-group div.form-paymethods {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
body form div.form-group div.form-paymethods div.row {
  margin-left: -5px !important;
  margin-right: -5px !important;
}
body form div.form-group div.form-paymethods div.row div.col-xxl-3 {
  padding-left: 5px;
  padding-right: 5px;
}
body form div.form-group div.form-paymethods div.form-paymethods__item {
  border: 2px solid var(--sptbl-secondary-border-color);
  border-radius: var(--sptbl-tertiary-border-radius);
  position: relative;
  transition: border 0.27s ease;
  cursor: pointer;
  margin-bottom: 20px;
}
body form div.form-group div.form-paymethods div.form-paymethods__item img {
  display: block;
  width: 100%;
}
body form div.form-group div.form-paymethods div.form-paymethods__item div.form-paymethods__item-checkmark {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background: var(--sptbl-primary-color);
  top: -7px;
  right: -7px;
  display: none;
}
body form div.form-group div.form-paymethods div.form-paymethods__item div.form-paymethods__item-checkmark svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
}
body form div.form-group div.form-paymethods div.form-paymethods__item:hover, body form div.form-group div.form-paymethods div.form-paymethods__item:active, body form div.form-group div.form-paymethods div.form-paymethods__item.active {
  border-color: var(--sptbl-primary-color);
}
body form div.form-group div.form-paymethods div.form-paymethods__item.active div.form-paymethods__item-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body form div.form-group div.form-paymethods div.form-paymethods__item.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
body form div.form-group div.form-paymethods div.form-paymethods__item.disabled:hover, body form div.form-group div.form-paymethods div.form-paymethods__item.disabled:active {
  border-color: var(--sptbl-danger-color);
}
body form div.form-group div.form-dropzone {
  border: 3px dashed var(--sptbl-secondary-border-color);
  transition: all 0.27s;
  cursor: pointer;
}
body form div.form-group div.form-dropzone div.form-dropzone__image {
  overflow: hidden;
}
body form div.form-group div.form-dropzone div.form-dropzone__image img {
  width: 100%;
  display: block;
}
body form div.form-group div.form-dropzone div.form-dropzone__text {
  padding: 35px var(--sptbl-primary-offset-size);
  text-align: center;
  font-weight: 500;
  color: var(--sptbl-primary-text-color);
  font-size: 1rem;
}
body form div.form-group div.form-dropzone div.form-dropzone__empty {
  padding: 35px var(--sptbl-primary-offset-size);
}
body form div.form-group div.form-dropzone div.form-dropzone__empty div.form-dropzone__header {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sptbl-primary-offset-size);
}
body form div.form-group div.form-dropzone div.form-dropzone__empty div.form-dropzone__header div.form-dropzone__icon {
  background: var(--sptbl-secondary-bg-color);
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 100%;
  overflow: hidden;
}
body form div.form-group div.form-dropzone div.form-dropzone__empty div.form-dropzone__header div.form-dropzone__icon svg {
  width: 24px;
  height: 24px;
  fill: var(--sptbl-primary-color);
}
body form div.form-group div.form-dropzone div.form-dropzone__empty div.form-dropzone__body {
  margin-bottom: 20px;
  text-align: center;
  font-size: 1rem;
  color: var(--sptbl-secondary-text-color);
}
body form div.form-group div.form-dropzone div.form-dropzone__empty div.form-dropzone__footer {
  display: flex;
  justify-content: center;
}
body form div.form-group div.form-dropzone div.form-dropzone__empty div.form-dropzone__footer button.btn {
  padding-left: 30px;
  padding-right: 30px;
}
body form div.form-group div.form-dropzone:hover, body form div.form-group div.form-dropzone:active {
  border-color: var(--sptbl-primary-color);
}
body form div.form-group div.form-toggle {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  padding: var(--sptbl-primary-offset-size);
}
body form div.form-group div.form-toggle div.form-toggle__lp {
  line-height: 1;
  flex-shrink: 0;
}
body form div.form-group div.form-toggle div.form-toggle__lp svg {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  fill: var(--sptbl-secondary-text-color);
}
@media (max-width: 767.98px) {
  body form div.form-group div.form-toggle div.form-toggle__lp svg {
    width: 20px;
    height: 20px;
  }
}
body form div.form-group div.form-toggle div.form-toggle__mp {
  flex: 1;
  margin: 0px var(--sptbl-primary-offset-size);
  line-height: 1;
  overflow: hidden;
}
body form div.form-group div.form-toggle div.form-toggle__mp span.form-toggle__title {
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
  color: var(--sptbl-primary-text-color);
  display: block;
  margin-bottom: 7px;
}
@media (max-width: 767.98px) {
  body form div.form-group div.form-toggle div.form-toggle__mp span.form-toggle__title {
    font-size: 0.8125rem;
  }
}
.form-toggle__desc {
  color: var(--sptbl-primary-text-color);
}

body form div.form-group div.form-toggle div.form-toggle__mp span.form-toggle__desc {
  font-size: 0.875rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
  body form div.form-group div.form-toggle div.form-toggle__mp span.form-toggle__desc {
    font-size: 0.75rem;
  }
}
body form div.form-group div.form-toggle div.form-toggle__rp div.form-check {
  padding: 0px;
  min-height: auto;
  line-height: 1;
}
body form div.form-group div.form-toggle div.form-toggle__rp div.form-check input.form-check-input {
  margin: 0px;
  cursor: pointer;
  opacity: 1;
  float: none;
}
body form div.form-group div.form-toggle:hover, body form div.form-group div.form-toggle:active {
  background: var(--sptbl-event-hover-bg);
}
body form div.form-group div.form-tos div.form-check {
  min-height: auto;
  padding: 0px;
  display: flex;
  align-items: flex-start;
  user-select: none;
}
body form div.form-group div.form-tos div.form-check input.form-check-input {
  min-height: auto;
  float: none;
  margin: 0px;
  padding: 0px;
  flex-shrink: 0;
}
body form div.form-group div.form-tos div.form-check label.form-check-label {
  margin-left: var(--sptbl-primary-offset-size);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.875rem;
}
body form div.form-group div.form-tos div.form-check label.form-check-label a {
  text-decoration: none;
  color: var(--sptbl-primary-link-color);
}
@media (max-width: 767.98px) {
  body form div.form-group div.form-tos div.form-check label.form-check-label {
    font-size: 0.75rem;
  }
}
body form div.form-group div.form-info-label {
  font-size: 0.8125rem;
  color: var(--sptbl-primary-color);
  line-height: 1.6;
  margin-top: 5px;
}
@media (max-width: 767.98px) {
  body form div.form-group div.form-info-label {
    font-size: 0.6875rem;
  }
}
body form div.invalid-main-feedback {
  font-size: 0.8125rem;
  color: var(--sptbl-danger-color);
  line-height: 1.6;
  margin-top: 5px;
}
body form div.invalid-main-feedback.mb-20 {
  margin-bottom: 20px;
}
@media (max-width: 767.98px) {
  body form div.invalid-main-feedback {
    font-size: 0.6875rem;
  }
}
body form div.valid-main-feedback {
  font-size: 0.8125rem;
  color: var(--sptbl-primary-color);
  line-height: 1.6;
  margin-top: 5px;
}
body form div.valid-main-feedback.mb-20 {
  margin-bottom: 20px;
}
@media (max-width: 767.98px) {
  body form div.valid-main-feedback {
    font-size: 0.6875rem;
  }
}
body div.main-preloader-holder {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--sptbl-primary-bg-color);
  z-index: 6000;
}
body div.main-preloader-holder div.main-preloader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
body div.main-preloader-holder div.main-preloader div.loading {
  flex-basis: auto;
  text-align: center;
}
body div.main-preloader-holder div.main-preloader div.lds-ellipsis {
  display: inline-block;
  position: relative;
  line-height: 14px;
  width: 62px;
  height: 14px;
}
body div.main-preloader-holder div.main-preloader div.lds-ellipsis div {
  position: absolute;
  top: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sptbl-primary-color);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
body div.main-preloader-holder div.main-preloader div.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
body div.main-preloader-holder div.main-preloader div.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
body div.main-preloader-holder div.main-preloader div.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
body div.main-preloader-holder div.main-preloader div.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 var(--sptbl-notification-color-lighten);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
body .d-flex {
  width: 100%;
}
body .d-flex .flex-nw, body .d-flex .flex-wn {
  flex-wrap: nowrap;
}
body .d-flex .flex-grow-1 {
  flex: 1;
}
body .of-hide {
  overflow: hidden;
}
body .hidden, body .d-none {
  display: none !important;
}
body div.row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}
body .d-flex {
  display: flex;
}
body .d-inline-flex {
  display: inline-flex;
}
body .align-items-center {
  align-items: center;
}
body .align-items-start {
  align-items: flex-start;
}
body .align-items-end {
  align-items: flex-end;
}
body .justify-content-center {
  justify-content: center;
}
body .justify-content-start {
  justify-content: flex-start;
}
body .justify-content-end {
  justify-content: flex-end;
}
body .justify-content-between {
  justify-content: space-between;
}
body .flex-wn, body .flex-nw {
  flex-wrap: nowrap;
}
body div.col-lg-1,
body div.col-lg-2,
body div.col-lg-3,
body div.col-lg-4,
body div.col-lg-5,
body div.col-lg-6,
body div.col-lg-7,
body div.col-lg-8,
body div.col-lg-9,
body div.col-lg-10,
body div.col-lg-11,
body div.col-lg-12 {
  padding: 0px 10px;
}
body div.col-md-1,
body div.col-md-2,
body div.col-md-3,
body div.col-md-4,
body div.col-md-5,
body div.col-md-6,
body div.col-md-7,
body div.col-md-8,
body div.col-md-9,
body div.col-md-10,
body div.col-md-11,
body div.col-md-12 {
  padding: 0px 10px;
}
body div.col-sm-1,
body div.col-sm-2,
body div.col-sm-3,
body div.col-sm-4,
body div.col-sm-5,
body div.col-sm-6,
body div.col-sm-7,
body div.col-sm-8,
body div.col-sm-9,
body div.col-sm-10,
body div.col-sm-11,
body div.col-sm-12 {
  padding: 0px 10px;
}
body div.col-xs-1,
body div.col-xs-2,
body div.col-xs-3,
body div.col-xs-4,
body div.col-xs-5,
body div.col-xs-6,
body div.col-xs-7,
body div.col-xs-8,
body div.col-xs-9,
body div.col-xs-10,
body div.col-xs-11,
body div.col-xs-12 {
  padding: 0px 10px;
}
body div.col-xxl-1,
body div.col-xxl-2,
body div.col-xxl-3,
body div.col-xxl-4,
body div.col-xxl-5,
body div.col-xxl-6,
body div.col-xxl-7,
body div.col-xxl-8,
body div.col-xxl-9,
body div.col-xxl-10,
body div.col-xxl-11,
body div.col-xxl-12 {
  padding: 0px 10px;
}
body a.block-link {
  text-decoration: none;
  display: block;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
body a.inline-link {
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--sptbl-primary-link-color) !important;
  text-decoration: none;
  font-weight: 400;
  word-break: break-all;
}
body .col-red {
  color: var(--sptbl-danger-color) !important;
}
body .col-grey {
  color: var(--sptbl-secondary-text-color) !important;
}
body .col-blue {
  color: var(--sptbl-primary-color) !important;
}
body .ov-h {
  overflow: hidden;
}
body .ml-auto {
  margin-left: auto;
}
body .fw-400 {
  font-weight: 400 !important;
}
body svg[stroke-width="1.8"] {
  stroke-width: 1.6;
}
body video {
  max-height: 100%;
}
body [data-href] {
  cursor: pointer;
}
body span.user-name-holder {
  font-size: inherit;
  color: inherit;
  line-height: 1;
  display: inline-flex !important;
  justify-content: flex-start !important;
  overflow: hidden;
  flex-wrap: nowrap;
  align-items: center;
  width: auto !important;
  font-weight: inherit;
  max-width: 100%;
  text-wrap: nowrap;
}
.user-card-item .user-handle {
  text-overflow: ellipsis;
  overflow: hidden;
}

span.user-name-holder__name {
  white-space: nowrap;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
}

body span.user-name-holder span.user-name-holder__badge {
  width: 16px;
  height: 16px;
  line-height: 0;
  margin-left: 4px;
}
body span.user-name-holder span.user-name-holder__badge svg {
  width: 16px;
  height: 16px;
  fill: var(--sptbl-primary-color);
}
body a.image-wrapper.fbox-media {
  display: inherit !important;
  line-height: 0;
  text-decoration: none;
}
body a.fbox-media[data-href] > button.lozad {
  display: block;
}
body span.spinner-icon svg {
  fill: var(--sptbl-primary-color);
}
body div.bootstrap-bp-display {
  position: fixed;
  top: 90%;
  left: 50%;
  z-index: 10000;
  transform: translate(-50%, -50%);
  background: red;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  color: #fff;
}
body div.modal {
  z-index: 7000;
}
body div.modal {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body div.modal::-webkit-scrollbar {
  display: none;
}
body div.modal.vh-center.show {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
}
body div.modal.vh-center.show div.modal-dialog {
  flex: 1;
}
body div.modal div.modal-content {
  background: var(--sptbl-primary-bg-color);
  border: none;
  box-shadow: var(--sptbl-primary-box-shadow);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
}
body div.modal div.modal-content div.modal-header {
  padding: var(--sptbl-primary-offset-size) 20px;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
}
body div.modal div.modal-content div.modal-header div.modal-header__inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
body div.modal div.modal-content div.modal-header div.modal-header__inner h5 {
  font-size: 1rem;
  line-height: 1;
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
  text-transform: uppercase;
}
body div.modal div.modal-content div.modal-header div.modal-header__inner span.dismiss-modal {
  padding: 0;
  margin: 0;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 100%;
}
body div.modal div.modal-content div.modal-header div.modal-header__inner span.dismiss-modal svg {
  width: 20px;
  height: 20px;
  fill: var(--sptbl-secondary-text-color);
}
body div.modal div.modal-content div.modal-header div.modal-header__inner span.dismiss-modal:hover, body div.modal div.modal-content div.modal-header div.modal-header__inner span.dismiss-modal:active {
  background: var(--sptbl-secondary-bg-color);
}
body div.modal div.modal-content div.modal-header div.modal-header__inner span.dismiss-modal:hover svg, body div.modal div.modal-content div.modal-header div.modal-header__inner span.dismiss-modal:active svg {
  fill: var(--sptbl-primary-color);
}
body div.modal div.modal-content div.modal-body {
  padding: var(--sptbl-primary-offset-size) 20px;
}
body div.modal div.modal-content div.modal-body.no-padding {
  padding: 0px;
}
.post-likes-modal div.timeline-user-ls div.user-list-item {
  border-radius: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--sptbl-primary-border-color) !important;
  transition: all 0.27s ease-in-out;
  padding: var(--sptbl-primary-offset-size);
  border-bottom: 1px solid var(--sptbl-primary-border-color) !important;
}
.post-likes-modal div.timeline-user-ls div.user-list-item:last-child {
  border-bottom: none !important;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__avatar {
  width: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__avatar a div.user-avatar {
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  border-radius: 100%;
  overflow: hidden;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__avatar a div.user-avatar img {
  width: 100%;
  height: 100%;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body {
  flex: 1;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline {
  display: flex;
  justify-content: space-between;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left {
  flex: 1;
  margin-right: var(--sptbl-primary-offset-size);
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a {
  text-decoration: none;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span {
  font-size: var(--sptbl-primary-name-size);
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:last-child {
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:hover, .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:focus, .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:active {
  color: var(--sptbl-primary-link-color);
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  line-height: 0px;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.icon svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-secondary-text-color);
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.text {
  padding: 0px 5px;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--sptbl-secondary-text-color);
}
@media (max-width: 767.98px) {
  .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.text {
    font-size: 0.8125rem;
  }
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.text a {
  color: var(--sptbl-primary-link-color);
  text-decoration: underline;
  font-size: inherit;
  line-height: inherit;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.banner {
  height: 15px;
  line-height: 1;
  overflow: hidden;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.banner svg {
  height: 100%;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 100%;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon svg {
  width: 26px;
  height: 26px;
  fill: var(--sptbl-secondary-text-color);
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon::before, .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon::after {
  display: none;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:hover a.icon, .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:active a.icon, .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:focus a.icon {
  background: var(--sptbl-secondary-bg-color);
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:hover a.icon svg, .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:active a.icon svg, .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:focus a.icon svg {
  fill: var(--sptbl-primary-color);
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats {
  margin-top: 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats {
    margin-top: 8px;
  }
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats a.stats-item {
  margin-right: var(--sptbl-primary-offset-size);
  text-decoration: none;
  display: block;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats a.stats-item:hover span {
  color: var(--sptbl-primary-color) !important;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats a.stats-item span {
  font-size: 1rem;
  color: var(--sptbl-secondary-text-color);
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats a.stats-item span:first-child {
  font-weight: 700;
  color: var(--sptbl-primary-text-color);
}
@media (max-width: 767.98px) {
  .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats a.stats-item span {
    font-size: 0.875rem;
  }
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__about {
  color: var(--sptbl-primary-text-color);
  font-size: 0.9375rem;
  margin-top: 12px;
  line-height: 1.4;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__about {
    font-size: 0.8125rem;
    margin-top: 8px;
  }
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common {
  margin-top: 20px;
  overflow: hidden;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__title {
  font-size: 0.875rem;
  color: var(--sptbl-primary-color);
  margin-bottom: 5px;
  font-weight: 500;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 7px;
  align-items: center;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item {
  flex-basis: 32px;
  flex-shrink: 0;
  margin-left: -7px;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item a {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  text-decoration: none;
  border: 1px solid var(--sptbl-primary-border-color);
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item a img {
  width: 100%;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item.common-follows__item_total {
  margin-left: 10px;
}
.post-likes-modal div.timeline-user-ls div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item.common-follows__item_total span {
  font-size: 1rem;
  color: var(--sptbl-primary-color);
  line-height: 1;
  font-weight: 700;
}

body div.modal div.modal-content div.modal-body div.post-likes div.timeline-data-loader {
  padding: var(--sptbl-primary-offset-size);
  display: flex;
  justify-content: center;
}
body div.modal div.modal-content div.modal-body div.post-likes div.timeline-data-loader button {
  display: block;
  width: 100%;
}
body div.modal div.modal-content div.modal-footer {
  border-top: 1px solid var(--sptbl-primary-border-color);
  padding: var(--sptbl-primary-offset-size) 20px;
}
body div.modal.confirm-actions-modal div.modal-dialog {
  width: 350px;
}
body div.modal.confirm-actions-modal div.modal-dialog div.modal-body h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  padding: 0;
  margin: 0 0 10px 0;
  color: var(--sptbl-primary-text-color);
}
body div.modal.confirm-actions-modal div.modal-dialog div.modal-body p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sptbl-secondary-text-color);
  padding: 0;
  margin: 0;
}
body div.modal.confirm-actions-modal div.modal-dialog div.modal-footer {
  border-top: none;
}
body div.modal.confirm-actions-modal div.modal-dialog div.modal-footer button {
  display: block;
  width: 100%;
  margin: 0;
}
body div.modal.confirm-actions-modal div.modal-dialog div.modal-footer button.main-red {
  margin-bottom: 10px;
}
body div.modal.info-popup-modal div.modal-dialog {
  width: 100%;
  padding: 15px;
  margin: 0;
}
@media (min-width: 420px) {
  body div.modal.info-popup-modal div.modal-dialog {
    width: 350px;
    padding: 0;
    margin: 0.5rem auto;
  }
  #pod-shared-data div.modal-dialog {
    width: auto;
  }
}
@media (min-width: 567px) {
  #phone-verification-modal div.modal-dialog {
    width: 480px;
  }
}
body div.modal.info-popup-modal div.modal-dialog div.modal-body h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  padding: 0;
  margin: 0 0 10px 0;
  color: var(--sptbl-primary-text-color);
}
body div.modal.info-popup-modal div.modal-dialog div.modal-body p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sptbl-secondary-text-color);
  padding: 0;
  margin: 0;
}
body div.modal.info-popup-modal div.modal-dialog div.modal-footer {
  border-top: none;
}
.share-post-modal div.social-media-links {
  display: flex;
  width: 100%;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.share-post-modal div.social-media-links a.link-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 2px;
  border: 1px solid var(--sptbl-primary-border-color);
  margin: 0px 5px;
}
.share-post-modal div.social-media-links a.link-item svg {
  width: 25px;
  height: 25px;
}
.share-post-modal div.social-media-links a.link-item.twitter svg {
  fill: var(--sptbl-primary-color);
}
.share-post-modal div.social-media-links a.link-item.twitter svg * {
  stroke: var(--sptbl-primary-color);
}
.share-post-modal div.social-media-links a.link-item.facebook svg {
  fill: #3b5899;
}
.share-post-modal div.social-media-links a.link-item.facebook svg * {
  stroke: #3b5899;
}
.share-post-modal div.social-media-links a.link-item.linkedin svg {
  fill: #2770af;
}
.share-post-modal div.social-media-links a.link-item.linkedin svg * {
  stroke: #2770af;
}
.share-post-modal div.social-media-links a.link-item.pinterest svg {
  fill: #c62327;
}
.share-post-modal div.social-media-links a.link-item.pinterest svg * {
  stroke: #c62327;
}
.share-post-modal div.social-media-links a.link-item.reddit svg {
  fill: var(--sptbl-secondary-text-color);
}
.share-post-modal div.social-media-links a.link-item.reddit svg * {
  stroke: var(--sptbl-secondary-text-color);
}
.share-post-modal div.social-media-links a.link-item.whatsapp svg {
  fill: #29a71a;
}
.share-post-modal div.social-media-links a.link-item.whatsapp svg * {
  stroke: #29a71a;
}
@media (max-width: 767.98px) {
  .share-post-modal div.social-media-links a.link-item {
    width: 40px;
    height: 40px;
    margin-bottom: 7px;
  }
  .share-post-modal div.social-media-links a.link-item svg {
    width: 18px;
    height: 18px;
  }
  .share-post-modal div.social-media-links a.link-item:nth-child(6) {
    margin-bottom: 0px;
  }
  .share-post-modal div.social-media-links a.link-item:nth-child(7) {
    margin-bottom: 0px;
  }
}
.share-post-modal div.raw-link {
  padding-top: 15px;
  padding-bottom: 15px;
}
.share-post-modal div.raw-link p {
  font-size: 0.8125rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 13px;
  text-align: center;
  padding: 0;
  margin: 0 0 15px 0;
  text-transform: uppercase;
  font-weight: 500;
}
.share-post-modal div.raw-link div.link-input {
  position: relative;
}
.share-post-modal div.raw-link div.link-input input {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--sptbl-tertiary-border-radius);
  background: var(--sptbl-input-bg-color);
  border: 2px solid var(--sptbl-primary-color);
  box-shadow: none;
  outline: 0;
  font-size: 0.9375rem;
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
  padding: 0px 20px;
}
.share-post-modal div.raw-link div.link-input input::placeholder {
  font-size: 0.9375rem;
  color: var(--sptbl-input-placeholder-text-color, var(--sptbl-secondary-text-color));
}
.share-post-modal div.raw-link div.link-input input:hover, .share-post-modal div.raw-link div.link-input input:focus, .share-post-modal div.raw-link div.link-input input:active {
  border-bottom: 2px solid var(--sptbl-primary-color);
  background: var(--sptbl-input-bg-color);
}
.share-post-modal div.raw-link div.link-input button.clip-board-copy {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: 0;
  background: var(--sptbl-primary-color);
  padding: 0 15px;
  margin: 0;
  box-shadow: none;
  border-radius: var(--sptbl-tertiary-border-radius);
  cursor: pointer;
}
.share-post-modal div.raw-link div.link-input button.clip-board-copy svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
}

body div.modal.modal-spoutcard.vis-hidden {
  visibility: hidden !important;
}
body div.modal.modal-spoutcard.vis-hidden * {
  visibility: hidden !important;
}
body div.modal.report-modal div.modal-content div.modal-body div.form-group div.report-reasons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
body div.modal.report-modal div.modal-content div.modal-body div.form-group div.report-reasons button.btn {
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: left;
  text-transform: none;
  font-weight: normal;
  font-size: 0.875rem;
}
body div.modal.report-modal div.modal-content div.modal-footer button {
  margin: 0;
}
body div.modal.cookie-alert-modal div.modal-content div.modal-header {
  border-bottom: none;
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
  padding-top: 30px;
}
body div.modal.cookie-alert-modal div.modal-content div.modal-header span {
  width: 60px;
  height: 60px;
  display: block;
}
body div.modal.cookie-alert-modal div.modal-content div.modal-header span svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-primary-color);
  stroke-width: 1;
}
body div.modal.cookie-alert-modal div.modal-content div.modal-body {
  text-align: center;
}
body div.modal.cookie-alert-modal div.modal-content div.modal-body h4 {
  font-size: 22px;
  padding: 0;
  margin: 0 0 20px 0;
  font-weight: 500;
  color: var(--sptbl-primary-text-color);
}
body div.modal.cookie-alert-modal div.modal-content div.modal-body p {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sptbl-secondary-text-color);
}
body div.modal.cookie-alert-modal div.modal-content div.modal-body p a {
  color: var(--sptbl-primary-link-color);
}
body div.modal.cookie-alert-modal div.modal-content div.modal-footer {
  border-top: none;
}
body div.modal.cookie-alert-modal div.modal-content div.modal-footer button {
  display: block;
  width: 100%;
}
body div.modal.display-settings-modal div.display-settings div.display-settings__header {
  margin-bottom: 40px;
  text-align: center;
}
body div.modal.display-settings-modal div.display-settings div.display-settings__header h4 {
  font-size: 22px;
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
  line-height: 1.4;
}
body div.modal.display-settings-modal div.display-settings div.display-settings__header p {
  font-size: 0.9375rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 1.4;
  padding: 0px 20px;
}
body .display-settings-modal div.display-settings div.display-settings__body div.display-settings__group {
  margin-bottom: 20px;
}
body .display-settings-modal div.display-settings div.display-settings__body div.display-settings__group div.display-settings__group-title {
  font-size: 0.8125rem;
  color: var(--sptbl-secondary-text-color);
  font-weight: 500;
  margin-bottom: 5px;
}

.display-settings__options-list {
  background: var(--sptbl-secondary-bg-color);
  padding-bottom: 0px;
  border-radius: var(--sptbl-tertiary-border-radius);
  padding-top: 15px;
  padding: 15px 7px 0px 7px;
}
.display-settings__options-list div.row {
  margin-left: -7px;
  margin-right: -7px;
  align-items: flex-end;
}
.display-settings__options-list div.row div.col-sm-4, .display-settings__options-list div.row div.col-sm-3 {
  padding-left: 7px;
  padding-right: 7px;
}
.display-settings__options-list div.options-li {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border-radius: var(--sptbl-secondary-border-radius);
  padding: 0px;
  cursor: pointer;
  align-items: center;
  margin-bottom: 15px;
  border: 2px solid transparent;
  /* Theme-color thumbnails for the background (Day / Dawn / Night /
     Midnight) tiles. Each is a miniature of its theme: page background,
     two text bars, and an accent dot. Rendered by AuthStartUp.vue.
     (DisplaySettingsPage.vue draws its own larger .theme-preview
     mockups in a scoped style block, not these.) */
  /* Miniature of the Day theme: icy page, dark Frost ink,
     brand-blue dot. Keep in sync with _white.scss. */
  /* Like its siblings the dot is the theme accent — Midnight's
     desaturated #8ca6c5, which is what separates this tile from
     Night's saturated blue at 52x34. */
}
.display-settings__options-list div.options-li span.active-color {
  width: 20px;
  height: 20px;
  line-height: 0;
  display: inline-block;
  padding: 3px;
  background: var(--sptbl-primary-color);
  border-radius: 30px;
  margin-bottom: 5px;
}
.display-settings__options-list div.options-li span.active-color svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.6);
  stroke-width: 2;
}
.display-settings__options-list div.options-li div.icon {
  width: 35px;
  height: 35px;
  min-width: 35px;
  border-radius: 35px;
  margin-bottom: 5px;
}
.display-settings__options-list div.options-li div.icon span.emoji-icon {
  width: 100%;
  height: 100%;
}
.display-settings__options-list div.options-li div.icon span.emoji-icon svg {
  width: 35px;
  height: 35px;
}
.display-settings__options-list div.options-li span.theme-thumb {
  display: block;
  position: relative;
  width: 52px;
  height: 34px;
  min-width: 52px;
  border-radius: 8px;
  margin-bottom: 5px;
  overflow: hidden;
  border: 1px solid transparent;
}
.display-settings__options-list div.options-li span.theme-thumb span.theme-thumb__bar {
  position: absolute;
  left: 7px;
  top: 8px;
  width: 26px;
  height: 4px;
  border-radius: 4px;
}
.display-settings__options-list div.options-li span.theme-thumb span.theme-thumb__bar--short {
  top: 16px;
  width: 17px;
}
.display-settings__options-list div.options-li span.theme-thumb span.theme-thumb__dot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
}
.display-settings__options-list div.options-li span.theme-thumb--default {
  background: linear-gradient(135deg, #ffffff 0%, #ecf2f9 100%);
  border-color: #d8e2ee;
}
.display-settings__options-list div.options-li span.theme-thumb--default span.theme-thumb__bar {
  background: #16283c;
}
.display-settings__options-list div.options-li span.theme-thumb--default span.theme-thumb__bar--short {
  background: #51637a;
}
.display-settings__options-list div.options-li span.theme-thumb--default span.theme-thumb__dot {
  background: #64a0e4;
}
.display-settings__options-list div.options-li span.theme-thumb--dawn {
  background: radial-gradient(40px 26px at 82% 12%, rgba(218, 165, 118, 0.55) 0%, transparent 60%), radial-gradient(32px 20px at 12% 92%, rgba(141, 92, 68, 0.45) 0%, transparent 60%), linear-gradient(180deg, #1a1410 0%, #14100c 100%);
  border-color: rgba(232, 168, 120, 0.45);
}
.display-settings__options-list div.options-li span.theme-thumb--dawn span.theme-thumb__bar {
  background: #f6ecdc;
}
.display-settings__options-list div.options-li span.theme-thumb--dawn span.theme-thumb__bar--short {
  background: rgba(246, 236, 220, 0.55);
}
.display-settings__options-list div.options-li span.theme-thumb--dawn span.theme-thumb__dot {
  background: #e8a878;
}
.display-settings__options-list div.options-li span.theme-thumb--dark {
  background: linear-gradient(135deg, #2f3b50 0%, #202836 100%);
  border-color: #3c485d;
}
.display-settings__options-list div.options-li span.theme-thumb--dark span.theme-thumb__bar {
  background: #ecfafa;
}
.display-settings__options-list div.options-li span.theme-thumb--dark span.theme-thumb__bar--short {
  background: #9195a8;
}
.display-settings__options-list div.options-li span.theme-thumb--dark span.theme-thumb__dot {
  background: #7495b9;
}
.display-settings__options-list div.options-li span.theme-thumb--midnight {
  background: linear-gradient(135deg, #1d1e1f 0%, #171718 100%);
  border-color: #2d2e30;
}
.display-settings__options-list div.options-li span.theme-thumb--midnight span.theme-thumb__bar {
  background: #d6d8da;
}
.display-settings__options-list div.options-li span.theme-thumb--midnight span.theme-thumb__bar--short {
  background: #8a8c8f;
}
.display-settings__options-list div.options-li span.theme-thumb--midnight span.theme-thumb__dot {
  background: #8ca6c5;
}
.display-settings__options-list div.options-li div.name b {
  display: block;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--sptbl-secondary-text-color);
}

body .display-settings-modal div.display-settings div.display-settings__body div.display-settings__group:last-child {
  margin-bottom: 0px;
}

body div.modal-backdrop {
  opacity: 1 !important;
  background-color: var(--sptbl-modal-backdrop);
}
body .dropdown div.dropdown-menu, body div.dropdown-menu, body .dropright div.dropdown-menu, body .dropup div.dropdown-menu {
  border: none;
  box-shadow: var(--sptbl-primary-box-shadow);
  padding: 5px 0px;
  z-index: 1600;
  /* position: absolute; */
  /* min-width: 290px; */
  max-width: 290px;
  border-radius: var(--sptbl-secondary-border-radius);
  background: var(--sptbl-menu-bg-color);
}
body .dropdown div.dropdown-menu a.dropdown-item, body div.dropdown-menu a.dropdown-item, body .dropright div.dropdown-menu a.dropdown-item, body .dropup div.dropdown-menu a.dropdown-item {
  font-size: 0.9375rem;
  line-height: 15px;
  color: var(--sptbl-primary-text-color);
  padding: 10px 20px;
  overflow: hidden;
  font-weight: 400;
}
body .dropdown div.dropdown-menu a.dropdown-item:hover, body .dropdown div.dropdown-menu a.dropdown-item:active, body .dropdown div.dropdown-menu a.dropdown-item.active, body div.dropdown-menu a.dropdown-item:hover, body div.dropdown-menu a.dropdown-item:active, body div.dropdown-menu a.dropdown-item.active, body .dropright div.dropdown-menu a.dropdown-item:hover, body .dropright div.dropdown-menu a.dropdown-item:active, body .dropright div.dropdown-menu a.dropdown-item.active, body .dropup div.dropdown-menu a.dropdown-item:hover, body .dropup div.dropdown-menu a.dropdown-item:active, body .dropup div.dropdown-menu a.dropdown-item.active {
  background: var(--sptbl-event-hover-bg) !important;
}
body .dropdown div.dropdown-menu div.dropdown-divider, body div.dropdown-menu div.dropdown-divider, body .dropright div.dropdown-menu div.dropdown-divider, body .dropup div.dropdown-menu div.dropdown-divider {
  padding: 0;
  margin: 2px 0;
  border-color: var(--sptbl-primary-border-color);
}
body .dropdown div.dropdown-menu.dropdown-icons a.dropdown-item, body div.dropdown-menu.dropdown-icons a.dropdown-item, body .dropright div.dropdown-menu.dropdown-icons a.dropdown-item, body .dropup div.dropdown-menu.dropdown-icons a.dropdown-item, body .dropup div.dropdown-menu.dropdown-icons a.dropdown-item span {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
body .dropdown div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item:not(.dropdown-item-icon), body div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item:not(.dropdown-item-icon), body .dropright div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item:not(.dropdown-item-icon), body .dropup div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item:not(.dropdown-item-icon) {
  flex: 1;
  max-width: calc(100% - 45px);
  overflow: hidden;
  line-height: 1;
  white-space: normal;
}
body .dropdown div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon, body div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon, body .dropright div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon, body .dropup div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: 12px;
  line-height: 1.2;
}
body .dropdown div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon svg, body div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon svg, body .dropright div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon svg, body .dropup div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon svg {
  fill: var(--sptbl-secondary-text-color);
  width: 24px;
  height: 24px;
}
body .dropdown div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon.dropdown-item-icon_adinfo, body div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon.dropdown-item-icon_adinfo, body .dropright div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon.dropdown-item-icon_adinfo, body .dropup div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon.dropdown-item-icon_adinfo {
  margin-right: 0px;
  margin-left: 12px;
  width: 20px;
  height: 20px;
}
body .dropdown div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon.dropdown-item-icon_adinfo svg, body div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon.dropdown-item-icon_adinfo svg, body .dropright div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon.dropdown-item-icon_adinfo svg, body .dropup div.dropdown-menu.dropdown-icons a.dropdown-item span.flex-item.dropdown-item-icon.dropdown-item-icon_adinfo svg {
  fill: var(--sptbl-secondary-text-color);
  width: 20px;
  height: 20px;
}
body .dropdown div.dropdown-menu.dropdown-icons a.dropdown-item.col-red span.flex-item, body div.dropdown-menu.dropdown-icons a.dropdown-item.col-red span.flex-item, body .dropright div.dropdown-menu.dropdown-icons a.dropdown-item.col-red span.flex-item, body .dropup div.dropdown-menu.dropdown-icons a.dropdown-item.col-red span.flex-item {
  color: var(--sptbl-danger-color);
}
body .dropdown div.dropdown-menu.dropdown-icons a.dropdown-item.col-red span.flex-item.dropdown-item-icon svg, body div.dropdown-menu.dropdown-icons a.dropdown-item.col-red span.flex-item.dropdown-item-icon svg, body .dropright div.dropdown-menu.dropdown-icons a.dropdown-item.col-red span.flex-item.dropdown-item-icon svg, body .dropup div.dropdown-menu.dropdown-icons a.dropdown-item.col-red span.flex-item.dropdown-item-icon svg {
  fill: var(--sptbl-danger-color);
}
body button.btn-custom, body div.btn-custom, body a.btn-custom {
  text-transform: uppercase;
  border-radius: var(--sptbl-tertiary-border-radius);
  font-weight: 700;
  line-height: 1;
}
body button.btn-custom.main-inline, body a.btn-custom.main-inline, body div.btn-custom.main-inline {
  color: #fff;
  background: var(--sptbl-primary-button-color);
  border: 1px solid transparent;
  border-radius: 0.7rem;
  outline: 0;
}
body button.btn-custom.btn-success, body a.btn-custom.btn-success, body div.btn-custom.btn-success {
  color: #fff;
  background: var(--sptbl-success-color);
  border: 1px solid transparent;
  border-radius: 0.7rem;
  outline: 0;
}
body button.btn-custom.main-inline:not([disabled]):hover, body button.btn-custom.main-inline:not([disabled]):active, body button.btn-custom.main-inline:not([disabled]):focus, body a.btn-custom.main-inline:not([disabled]):hover, body a.btn-custom.main-inline:not([disabled]):active, body a.btn-custom.main-inline:not([disabled]):focus, body div.btn-custom.main-inline:not([disabled]):hover, body div.btn-custom.main-inline:not([disabled]):active, body div.btn-custom.main-inline:not([disabled]):focus {
  background: var(--sptbl-primary-color-darken-5);
}
body button.btn-custom.btn-success:not([disabled]):hover, body button.btn-custom.btn-success:not([disabled]):active, body button.btn-custom.btn-success:not([disabled]):focus, body a.btn-custom.btn-success:not([disabled]):hover, body a.btn-custom.btn-success:not([disabled]):active, body a.btn-custom.btn-success:not([disabled]):focus, body div.btn-custom.btn-success:not([disabled]):hover, body div.btn-custom.btn-success:not([disabled]):active, body div.btn-custom.btn-success:not([disabled]):focus {
  background: var(--sptbl-success-color-darken-5);
}
body button.btn-custom.main-outline, body div.btn-custom.main-outline, body a.btn-custom.main-outline {
  color: var(--sptbl-primary-color);
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--sptbl-primary-color);
  border-radius: 0.7rem;
  outline: 0;
  outline: 0;
}
body button.btn-custom.main-outline:not([disabled]):hover, body button.btn-custom.main-outline:not([disabled]):active, body button.btn-custom.main-outline:not([disabled]):focus, body a.btn-custom.main-outline:not([disabled]):hover, body a.btn-custom.main-outline:not([disabled]):active, body a.btn-custom.main-outline:not([disabled]):focus, body div.btn-custom.main-outline:not([disabled]):hover, body div.btn-custom.main-outline:not([disabled]):active, body div.btn-custom.main-outline:not([disabled]):focus {
  background: var(--sptbl-primary-color-darken-5);
  color: #fff;
}
body button.btn-custom.lg, body div.btn-custom.lg, body a.btn-custom.lg {
  padding: 15px 15px;
  font-size: 0.75rem;
  line-height: 1;
}
@media (min-width: 768px) {
  body button.btn-custom.lg, body div.btn-custom.lg, body a.btn-custom.lg {
    font-size: 0.8125rem;
  }
}
body button.btn-custom.md, body div.btn-custom.md, body a.btn-custom.md {
  padding: 5px 10px;
  font-size: 0.625rem;
}
body button.btn-custom.sm, body div.btn-custom.sm, body a.btn-custom.sm {
  padding: 8px 15px;
  font-size: 0.6875rem;
}
body button.btn-custom.main-red, body a.btn-custom.main-red, body div.btn-custom.main-red {
  color: #ffffff;
  background: var(--sptbl-danger-color);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-danger-color);
  outline: 0;
}
body button.btn-custom.main-red-outline, body a.btn-custom.main-red-outline, body div.btn-custom.main-red-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--sptbl-primary-text-color);
  background: transparent;
  box-shadow: none;
  border: 1px solid rgba(255, 66, 101, 0.45);
  border-radius: 0.7rem;
  outline: 0;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
body button.btn-custom.main-red-outline:not([disabled]):hover, body button.btn-custom.main-red-outline:not([disabled]):active, body button.btn-custom.main-red-outline:not([disabled]):focus, body a.btn-custom.main-red-outline:not([disabled]):hover, body a.btn-custom.main-red-outline:not([disabled]):active, body a.btn-custom.main-red-outline:not([disabled]):focus, body div.btn-custom.main-red-outline:not([disabled]):hover, body div.btn-custom.main-red-outline:not([disabled]):active, body div.btn-custom.main-red-outline:not([disabled]):focus {
  color: #ffffff;
  background: var(--sptbl-danger-color);
  border-color: var(--sptbl-danger-color);
}
body button.btn-custom.main-red-outline:not([disabled]):hover svg, body button.btn-custom.main-red-outline:not([disabled]):active svg, body button.btn-custom.main-red-outline:not([disabled]):focus svg, body a.btn-custom.main-red-outline:not([disabled]):hover svg, body a.btn-custom.main-red-outline:not([disabled]):active svg, body a.btn-custom.main-red-outline:not([disabled]):focus svg, body div.btn-custom.main-red-outline:not([disabled]):hover svg, body div.btn-custom.main-red-outline:not([disabled]):active svg, body div.btn-custom.main-red-outline:not([disabled]):focus svg {
  stroke: currentColor;
}
body button.btn-custom.main-red-outline svg, body a.btn-custom.main-red-outline svg, body div.btn-custom.main-red-outline svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--sptbl-danger-color);
}
@media (prefers-reduced-motion: reduce) {
  body button.btn-custom.main-red-outline, body a.btn-custom.main-red-outline, body div.btn-custom.main-red-outline {
    transition: none;
  }
}
body button.btn-custom.main-grey, body a.btn-custom.main-grey, body div.btn-custom.main-grey {
  color: var(--sptbl-sidebar-button-text-color);
  background-color: var(--sptbl-sidebar-button-bg-color);
  box-shadow: none;
  border: 1px solid var(--sptbl-secondary-bg-color);
  border-radius: 0.7rem;
  outline: 0;
}
body button.btn-custom.btn-block, body a.btn-custom.btn-block, body div.btn-custom.btn-block {
  width: 100%;
}
body button.btn-custom:hover, body button.btn-custom:active, body button.btn-custom:focus, body a.btn-custom:hover, body a.btn-custom:active, body a.btn-custom:focus, body div.btn-custom:hover, body div.btn-custom:active, body div.btn-custom:focus {
  box-shadow: none;
}
@media (max-width: 767.98px) {
  body button.btn-custom.md, body button.btn-custom.lg, body a.btn-custom.md, body a.btn-custom.lg, body div.btn-custom.md, body div.btn-custom.lg {
    padding: 8px 12px;
    font-size: 0.6875rem;
  }
  body button.btn-custom.sm, body a.btn-custom.sm, body div.btn-custom.sm {
    padding: 6px 10px;
    font-size: 0.625rem;
  }
}
body button.btn-custom-icon, body a.btn-custom-icon, body div.btn-custom-icon {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  padding: 0px;
  margin: 0px;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: 0;
  cursor: pointer;
  line-height: 1;
}
body button.btn-custom-icon svg, body div.btn-custom-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--sptbl-secondary-text-color);
}
body button.btn-custom-icon:hover, body button.btn-custom-icon:active, body button.btn-custom-icon:focus, body div.btn-custom-icon:hover, body div.btn-custom-icon:active, body div.btn-custom-icon:focus {
  background: var(--sptbl-secondary-bg-color);
}
body button.btn-custom-icon:hover svg, body button.btn-custom-icon:active svg, body button.btn-custom-icon:focus svg, body div.btn-custom-icon:hover svg, body div.btn-custom-icon:active svg, body div.btn-custom-icon:focus svg {
  fill: var(--sptbl-secondary-text-color);
}
body button.btn-custom-icon.col-red:hover svg, body button.btn-custom-icon.col-red:active svg, body button.btn-custom-icon.col-red:focus svg, body div.btn-custom-icon.col-red:hover svg, body div.btn-custom-icon.col-red:active svg, body div.btn-custom-icon.col-red:focus svg {
  fill: var(--sptbl-danger-color);
}
div.timeline-spoutcard button.delete-preview {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-color: var(--sptbl-primary-color);
  border-radius: 3px;
  border: none;
  box-shadow: none;
  outline: 0;
  padding: 3px;
  z-index: 20;
  line-height: 1;
}

div.timeline-spoutcard button.image-alt, body div.post-data-layout__content div.spout-image + .image-alt-inline, .media-slider .image-alt-inline, .swiper .image-alt-inline {
  background: none;
  color: #fff;
  position: absolute;
  left: 7px;
  bottom: 7px;
  font-size: 12px;
  display: flex;
  align-items: center;
  border: 0.5pt solid;
  border-radius: 4px;
  padding: 1px 6px 1px 3px;
  z-index: 99;
  background-color: var(--sptbl-image-alt-button-bg-color);
}

body div.post-data-layout__content div.spout-image + .image-alt-inline, .media-slider .image-alt-inline, .swiper .image-alt-inline {
  padding: 0 4px;
  text-transform: uppercase;
  user-select: none;
}

div.timeline-spoutcard button.image-alt:hover svg {
  transform: scale(1.1);
}

div.timeline-spoutcard button.image-alt svg {
  height: 14px;
  width: 14px;
  fill: currentColor;
  margin-right: 3px;
  vertical-align: text-top;
}

div.timeline-spoutcard button.delete-preview:disabled {
  cursor: wait !important;
}

div.timeline-spoutcard button.delete-preview svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
}

div.timeline-spoutcard button.delete-preview:hover svg, div.timeline-spoutcard button.delete-preview:active svg {
  transform: scale(1.2);
}

div.timeline-spoutcard div.timeline-spoutcard__header {
  margin-bottom: 20px;
}

div.timeline-spoutcard div.timeline-spoutcard__header div.timeline-spoutcard__textinput {
  display: flex;
  flex-wrap: nowrap;
}

div.timeline-spoutcard div.timeline-spoutcard__header div.timeline-spoutcard__textinput div.spoutcard-avatar {
  width: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
}

div.timeline-spoutcard div.timeline-spoutcard__header div.timeline-spoutcard__textinput div.spoutcard-avatar img {
  width: 100%;
  border-radius: 100%;
}

div.timeline-spoutcard div.timeline-spoutcard__header div.timeline-spoutcard__textinput div.spoutcard-input {
  flex: 1;
  margin-bottom: 10px;
  margin-left: var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard div.timeline-spoutcard__header div.timeline-spoutcard__textinput div.spoutcard-input textarea {
  display: block;
  width: 100%;
  min-height: 40px;
  max-height: 400px;
  resize: none;
  font-size: 1rem;
  color: var(--sptbl-primary-text-color);
  line-height: 1.4;
  border: none;
  border-radius: 0px;
  outline: 0;
  background: transparent;
}

div.timeline-spoutcard div.timeline-spoutcard__header div.timeline-spoutcard__textinput div.spoutcard-input textarea::placeholder {
  color: var(--sptbl-input-placeholder-color);
  font-size: 18px;
  font-weight: normal;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  div.timeline-spoutcard div.timeline-spoutcard__header div.timeline-spoutcard__textinput div.spoutcard-input textarea {
    font-size: 0.875rem;
  }
  div.timeline-spoutcard div.timeline-spoutcard__header div.timeline-spoutcard__textinput div.spoutcard-input textarea::placeholder {
    font-size: 1rem;
  }
}
div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete {
  position: relative;
  margin-bottom: 20px;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags {
  width: 300px;
  box-shadow: var(--sptbl-primary-box-shadow);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  background: var(--sptbl-primary-bg-color);
  overflow: hidden;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list::-webkit-scrollbar, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list::-webkit-scrollbar {
  width: 5px;
  background: var(--sptbl-primary-border-color);
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list::-webkit-scrollbar-thumb, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list::-webkit-scrollbar-thumb {
  background-color: var(--sptbl-primary-color);
  outline: 0;
  border-radius: 5px;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list div.username-list-item, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list div.username-list-item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  cursor: pointer;
  padding: var(--sptbl-primary-offset-size);
  overflow: hidden;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__avatar, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__avatar {
  flex-basis: 38px;
  height: 38px;
  flex-shrink: 0;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__avatar img, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__username, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__username {
  padding-left: var(--sptbl-primary-offset-size);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__username span.user-name-holder, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__username span.user-name-holder {
  max-width: calc(100% - 20px);
  font-weight: 600;
  color: var(--sptbl-primary-text-color);
  font-size: var(--sptbl-primary-name-size);
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__username span.username, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list div.username-list-item div.username-list-item__username span.username {
  color: var(--sptbl-secondary-text-color);
  font-size: var(--sptbl-primary-name-size);
  flex-basis: 100%;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list div.username-list-item:last-child, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list div.username-list-item:last-child {
  border-bottom: none;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list div.username-list-item:hover, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__usernames-list div.username-list-item:focus, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list div.username-list-item:hover, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__usernames-list div.username-list-item:focus {
  background: var(--sptbl-event-hover-bg);
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__hashtags-list, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__hashtags-list {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__hashtags-list::-webkit-scrollbar, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__hashtags-list::-webkit-scrollbar {
  width: 5px;
  background: var(--sptbl-primary-border-color);
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__hashtags-list::-webkit-scrollbar-thumb, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__hashtags-list::-webkit-scrollbar-thumb {
  background-color: var(--sptbl-primary-color);
  outline: 0;
  border-radius: 5px;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item {
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  padding: var(--sptbl-primary-offset-size);
  cursor: pointer;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item div.hashtag-list-item__hashtag, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item div.hashtag-list-item__hashtag {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
  word-break: keep-all;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item div.hashtag-list-item__hashtag span, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item div.hashtag-list-item__hashtag span {
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item:last-child, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item:last-child {
  border-bottom: none;
}

div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item:hover, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__usernames div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item:focus, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item:hover, div.timeline-spoutcard__autocomplete div.spoutcard-autocomplete div.spoutcard-autocomplete__hashtags div.spoutcard-autocomplete__hashtags-list div.hashtag-list-item:focus {
  background: var(--sptbl-event-hover-bg);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons {
  margin-bottom: 20px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons {
  border: 2px solid var(--sptbl-primary-border-color);
  margin-bottom: 20px;
  border-radius: var(--sptbl-secondary-border-radius);
  overflow: hidden;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__type-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-bottom: 2px solid var(--sptbl-primary-border-color);
  overflow: hidden;
  padding: 0px var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__type-nav span.spoutcard-emoticons__type-nav-item {
  height: 45px;
  width: 45px;
  min-width: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__type-nav span.spoutcard-emoticons__type-nav-item span.emoji_group_icon {
  font-size: 0.9375rem;
  line-height: 15px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__type-nav span.spoutcard-emoticons__type-nav-item span.emoji_group_icon svg {
  width: 22px;
  height: 22px;
  filter: grayscale(100%);
  opacity: 0.5;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__type-nav span.spoutcard-emoticons__type-nav-item.active {
  border-bottom: 3px solid var(--sptbl-primary-color);
  border-bottom-style: inset;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__type-nav span.spoutcard-emoticons__type-nav-item.active span.emoji_group_icon svg {
  filter: unset;
  opacity: 1;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__list {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__list div.spoutcard-emoticons__list-group {
  width: 100%;
  display: block;
  line-height: 20px;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  padding: 15px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__list div.spoutcard-emoticons__list-group span {
  font-size: 22px;
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
  padding: 3px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__list div.spoutcard-emoticons__list-group:last-child {
  border-bottom: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__list::-webkit-scrollbar {
  width: 5px;
  background: var(--sptbl-primary-border-color);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__emoticons div.spoutcard-emoticons div.spoutcard-emoticons__list::-webkit-scrollbar-thumb {
  background-color: var(--sptbl-primary-color);
  outline: 0;
  border-radius: 5px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__open-graph {
  margin-bottom: 20px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__open-graph div.spoutcard-open-graph {
  margin-bottom: 10px;
  background: var(--sptbl-embedded-content-bg-color);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-embedded-content-border-color);
  position: relative;
  overflow: hidden;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__open-graph div.spoutcard-open-graph div.spoutcard-open-graph__data div.spoutcard-open-graph__image {
  overflow: hidden;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  background: var(--sptbl-event-hover-bg);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__open-graph div.spoutcard-open-graph div.spoutcard-open-graph__data div.spoutcard-open-graph__image img {
  width: 100%;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__open-graph div.spoutcard-open-graph div.spoutcard-open-graph__data div.spoutcard-open-graph__description {
  padding: var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__open-graph div.spoutcard-open-graph div.spoutcard-open-graph__data div.spoutcard-open-graph__description h5 {
  padding: 0;
  margin: 0 0 5px 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--sptbl-primary-text-color);
  word-break: keep-all;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__open-graph div.spoutcard-open-graph div.spoutcard-open-graph__data div.spoutcard-open-graph__description p {
  font-size: 0.875rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 1.4;
  padding: 0;
  margin: 0 0 5px 0;
  word-break: keep-all;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__open-graph div.spoutcard-open-graph div.spoutcard-open-graph__data div.spoutcard-open-graph__description a {
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--sptbl-primary-color);
  text-decoration: none;
  display: block;
  word-break: keep-all;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__images {
  margin-bottom: 20px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__images div.spoutcard-images div.spoutcard-images__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
  margin-left: -5px;
  margin-right: -5px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__images div.spoutcard-images div.spoutcard-images__list div.spoutcard-images__list-item {
  width: 25%;
  max-width: 25%;
  min-width: 25%;
  flex-basis: 25%;
  padding: 5px;
  border-radius: var(--sptbl-secondary-border-radius);
  border: 1px solid var(--sptbl-primary-border-color);
  overflow: hidden;
  position: relative;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__images div.spoutcard-images div.spoutcard-images__list div.spoutcard-images__list-item img {
  width: 100%;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__video {
  margin-bottom: 20px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__video div.spoutcard-video {
  position: relative;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__video div.spoutcard-video div.spoutcard-video__player a {
  display: block;
  text-decoration: none;
  border-radius: var(--sptbl-secondary-border-radius);
  border: 2px solid var(--sptbl-primary-border-color);
  overflow: hidden;
  position: relative;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__video div.spoutcard-video div.spoutcard-video__player a img {
  width: 100%;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__video div.spoutcard-video div.spoutcard-video__player a div.video-play-button {
  position: absolute;
  left: calc(50% - 33px);
  top: calc(50% - 33px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 500;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__video div.spoutcard-video div.spoutcard-video__player a div.video-play-button span.video-play-button__arrow {
  width: 66px;
  height: 66px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10em;
  padding: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 10px 0px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__video div.spoutcard-video div.spoutcard-video__player a div.video-play-button span.video-play-button__arrow svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__video div.spoutcard-video div.spoutcard-video__player a div.video-play-button:hover span.video-play-button__arrow, div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__video div.spoutcard-video div.spoutcard-video__player a div.video-play-button:active span.video-play-button__arrow {
  background: rgba(0, 0, 0, 0.7);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__audio {
  margin-bottom: 20px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__audio div.spoutcard-audio {
  display: flex;
  overflow: hidden;
  align-items: center;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__audio div.spoutcard-audio div.spoutcard-audio__player {
  flex: 1;
  margin-right: var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__audio div.spoutcard-audio div.spoutcard-audio__player audio {
  display: block;
  width: 100%;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__audio div.spoutcard-audio div.spoutcard-audio__ctrl button.delete-preview {
  position: static;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs {
  margin-bottom: 20px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__preview {
  position: relative;
  border-radius: var(--sptbl-secondary-border-radius);
  border: 2px solid var(--sptbl-primary-border-color);
  overflow: hidden;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__preview img {
  width: 100%;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__preview div.gif-preloader {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  background: var(--sptbl-primary-bg-color);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-radius: var(--sptbl-primary-border-radius);
  z-index: 10;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__preview div.gif-preloader span.spinner-icon {
  width: 35px;
  height: 35px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__preview div.gif-preloader span.spinner-icon svg {
  width: 100%;
  height: 100%;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__preview.loading {
  height: 150px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__preview.loading img {
  padding: 20px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader {
  background: var(--sptbl-primary-bg-color);
  border-radius: var(--sptbl-secondary-border-radius);
  border: 2px solid var(--sptbl-primary-border-color);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar {
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  position: relative;
  margin-bottom: 4px;
  padding: var(--sptbl-primary-offset-size);
  display: flex;
  align-items: center;
  overflow: hidden;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input {
  position: relative;
  flex: 1;
  margin-right: var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input input {
  border: 2px solid transparent;
  background: var(--sptbl-input-bg-color);
  border-radius: var(--sptbl-tertiary-border-radius);
  padding: 0px 48px;
  height: 48px;
  font-size: 0.875rem;
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
  box-shadow: none;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input input::placeholder {
  color: var(--sptbl-input-placeholder-text-color, var(--sptbl-input-placeholder-color));
  font-size: 0.875rem;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input input:active, div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input input:hover, div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input input:focus {
  border: 2px solid var(--sptbl-primary-color);
  /* Fill intentionally unchanged - same bug as the timeline search bar
     (apps/common/parts/_searchbar.scss): swapping to the page colour on
     focus put the dark field ink on a dark page surface (Night 1.31:1,
     Dawn 1.21:1) and blanked the GIF search box on click. The 2px accent
     border is the focus affordance. */
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input input:active + span.searchbar-input__icon svg, div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input input:hover + span.searchbar-input__icon svg, div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input input:focus + span.searchbar-input__icon svg {
  fill: var(--sptbl-primary-color);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input span.searchbar-input__icon {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-input span.searchbar-input__icon svg {
  width: 22px;
  height: 22px;
  fill: var(--sptbl-secondary-text-color);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar img.searchbar-klipy-logo {
  height: 28px;
  flex-shrink: 0;
  margin-right: var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-ctrl {
  flex-basis: 48px;
  flex-shrink: 0;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-ctrl button {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: none;
  box-shadow: none;
  outline: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-ctrl button svg {
  width: 24px;
  height: 24px;
  fill: var(--sptbl-secondary-text-color);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-ctrl button:hover, div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-ctrl button:active {
  background: var(--sptbl-secondary-bg-color);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-ctrl button:hover svg, div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-searchbar div.searchbar-ctrl button:active svg {
  fill: var(--sptbl-primary-color);
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: 100px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-list div.row-column {
  flex-basis: calc(50% - 3px);
  flex-shrink: 0;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-list div.row-column div.row-column__item {
  margin-bottom: 5px;
  position: relative;
  background: var(--sptbl-primary-bg-color);
  z-index: 5;
  overflow: hidden;
  width: 100%;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-list div.row-column div.row-column__item.loading {
  height: 150px;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-list div.row-column div.row-column__item img {
  width: 100%;
  cursor: pointer;
}

div.timeline-spoutcard div.timeline-spoutcard__body div.timeline-spoutcard__gifs div.spoutcard-gifs div.spoutcard-gifs__loader div.spoutcard-gifs__loader-list div.row-column div.row-column__item div.gif-preloader {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  background: var(--sptbl-secondary-bg-color);
  z-index: 10;
}

div.timeline-spoutcard__poll {
  margin-bottom: 20px;
}

div.timeline-spoutcard__poll div.spoutcard-poll {
  overflow: hidden;
  background: var(--sptbl-primary-bg-color);
  border-radius: var(--sptbl-secondary-border-radius);
  border: 2px solid var(--sptbl-primary-border-color);
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__header {
  padding: var(--sptbl-primary-offset-size);
  padding-bottom: 0px;
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__header h4 {
  font-size: 0.8125rem;
  padding: 0;
  margin: 0;
  color: var(--sptbl-secondary-text-color);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

div.timeline-spoutcard p {
  font-size: 0.8125rem;
  color: var(--sptbl-secondary-text-color);
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body {
  padding: var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body div.spoutcard-poll__inputs div.spoutcard-poll__input-item {
  margin-bottom: 20px;
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body div.spoutcard-poll__inputs div.spoutcard-poll__input-item div.form-group {
  position: relative;
  margin-bottom: 0px;
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body div.spoutcard-poll__inputs div.spoutcard-poll__input-item div.form-group small {
  position: absolute;
  top: 0px;
  right: 10px;
  bottom: 0px;
  color: var(--sptbl-secondary-text-color);
  font-size: 0.8125rem;
  text-transform: uppercase;
  line-height: 52px;
  display: none;
  font-weight: 500;
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body div.spoutcard-poll__inputs div.spoutcard-poll__input-item div.form-group small:hover, div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body div.spoutcard-poll__inputs div.spoutcard-poll__input-item div.form-group small:active {
  display: inline-block;
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body div.spoutcard-poll__inputs div.spoutcard-poll__input-item div.form-group:hover small, div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body div.spoutcard-poll__inputs div.spoutcard-poll__input-item div.form-group:focus small, div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body div.spoutcard-poll__inputs div.spoutcard-poll__input-item div.form-group:active small {
  display: inline-block;
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__body div.spoutcard-poll__inputs div.spoutcard-poll__input-item:last-child {
  margin-bottom: 0px;
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__footer {
  padding: var(--sptbl-primary-offset-size);
  border-top: 1px solid var(--sptbl-primary-border-color);
  display: flex;
  justify-content: flex-end;
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__footer button.btn:last-child {
  margin-left: var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__footer:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-topline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 10px;
  margin-left: -7px;
}

button.ctrl-item {
  background: none;
  border: none;
  outline: none;
  padding: 0px;
  margin: 0 3px 0 0;
  box-shadow: none;
  width: 35px;
  height: 35px;
  border-radius: 10em;
  position: relative;
  cursor: pointer;
  transition: all 0.10s ease-in-out;
}

button.ctrl-item svg {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  fill: var(--sptbl-primary-color);
}

button.ctrl-item:hover::after, button.ctrl-item:active::after, button.ctrl-item:focus::after {
  width: 35px;
  height: 35px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #0074b01f;
  content: "";
  border-radius: 5em;
}

.text-length {
  text-align: center;
  border: none;
  padding: 0px;
  width: auto;
  margin-right: 0;
  margin-left: auto;
  margin-right: 10px;
}

.text-length:hover, .text-length:active, .text-length:focus {
  background: transparent;
}

.text-length:hover:after, .text-length:active:after, .text-length:focus:after {
  display: none;
}

.text-length small {
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
  font-size: 0.8125rem;
  line-height: 1;
  vertical-align: middle;
}

.text-length small.len-error {
  color: var(--sptbl-danger-color);
  font-weight: bold;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-topline button.ctrl-item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-topline button.ctrl-item.audio-recording {
  position: relative;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-topline button.ctrl-item.audio-recording svg {
  fill: var(--sptbl-danger-color);
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-topline button.ctrl-item.audio-recording::before {
  width: 35px;
  height: 35px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  content: "";
  border-radius: 5em;
  box-shadow: 0 0 0 0 var(--sptbl-danger-color-lighten-5);
  transform: scale(1);
  animation: pulse 3s infinite;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-topline button.ctrl-item.audio-recording span.record-timer {
  width: 50px;
  position: absolute;
  top: -18px;
  left: calc(50% - 25px);
  color: #ffffff;
  background: var(--sptbl-primary-color);
  font-size: 0.8125rem;
  border-radius: 2px;
  padding: 3px 5px;
  line-height: 1;
  box-shadow: var(--sptbl-primary-box-shadow);
  font-weight: 500;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-topline button.ctrl-item.audio-recording span.record-timer:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-color: var(--sptbl-primary-color) transparent transparent transparent;
  border-style: solid;
  border-width: 6px;
  left: calc(50% - 6px);
  top: 100%;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  border-top: 1px solid var(--sptbl-primary-border-color);
  padding-top: var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy {
  margin-right: var(--sptbl-primary-offset-size);
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings {
  background: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  border: none;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings div.dropdown-toggle {
  padding: 0;
  margin: 0;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings div.dropdown-toggle:after, div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings div.dropdown-toggle:before {
  display: none;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings div.dropdown-toggle span.d-inline-flex {
  height: 30px;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings div.dropdown-toggle span.d-inline-flex span.flex-item.icon svg {
  width: 22px;
  height: 22px;
  fill: var(--sptbl-primary-color);
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings div.dropdown-toggle span.d-inline-flex span.flex-item.label {
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--sptbl-primary-color);
  margin-left: 8px;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings div.dropdown-toggle span.d-inline-flex span.flex-item.label {
    display: flex;
  }
}
div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings:hover, div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-privacy .privacy-settings:active {
  background: none;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-spout {
  margin-left: auto;
  justify-content: flex-end;
}

div.timeline-spoutcard div.timeline-spoutcard__footer div.timeline-spoutcard__footer-botline div.post-spout button.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

body div.popover {
  padding: 0;
  max-width: 100%;
  border: none;
  box-shadow: none;
  outline: 0;
  border-radius: 0px;
  background: transparent;
  overflow: visible;
  z-index: 3000;
}
body .user-infobox {
  width: 340px;
  background: var(--sptbl-primary-bg-color);
  box-shadow: var(--sptbl-primary-box-shadow);
  border-radius: var(--sptbl-tertiary-border-radius);
  overflow: hidden;
  position: fixed;
  top: 40%;
  left: 40%;
}
body .user-infobox div.user-infobox__header div.cover {
  background: var(--sptbl-primary-bg-color);
}
body .user-infobox div.user-infobox__header div.cover img {
  width: 100%;
}
body .user-infobox div.user-infobox__header div.avatar {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 100%;
  border: 3px solid var(--sptbl-primary-bg-color);
  background: var(--sptbl-primary-bg-color);
  margin-left: var(--sptbl-primary-offset-size);
  margin-top: -40px;
  position: relative;
  z-index: 2;
}
body .user-infobox div.user-infobox__header div.avatar img {
  width: 100%;
  height: 100%;
}
body .user-infobox div.user-infobox__body {
  padding: var(--sptbl-primary-offset-size);
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__name {
  margin-bottom: var(--sptbl-primary-offset-size);
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__name a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__name a span {
  display: inherit;
  width: auto;
  color: var(--sptbl-secondary-text-color);
  font-size: 1rem;
  line-height: 1;
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__name a span:first-child {
  color: var(--sptbl-primary-text-color);
  font-size: 20px;
  font-weight: 500;
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__name a span:first-child::after {
  width: 20px;
  height: 20px;
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__counter {
  display: flex;
  align-items: center;
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__counter div.counter-item {
  margin-right: var(--sptbl-primary-offset-size);
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__counter div.counter-item a {
  display: block;
  text-decoration: none;
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__counter div.counter-item span {
  font-size: 1rem;
  color: var(--sptbl-secondary-text-color);
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__counter div.counter-item span:first-child {
  font-weight: 700;
  color: var(--sptbl-primary-text-color);
}
body .user-infobox div.user-infobox__body div.user-data div.user-data__bio {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sptbl-primary-text-color);
}
body .user-infobox div.user-infobox__footer {
  border-top: 1px solid var(--sptbl-primary-border-color);
  padding: var(--sptbl-primary-offset-size);
}
body .user-infobox div.user-infobox__footer a {
  display: block;
  text-decoration: none;
}
body.waitme-on {
  overflow: hidden !important;
}
body.waitme-on div.sptbl-waitme {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.55);
  z-index: 99999999;
}
body.waitme-on div.sptbl-waitme div.sptbl-waitme__content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0px !important;
  transform: unset !important;
  height: 100vh !important;
  padding: 7vw;
}
body.waitme-on div.sptbl-waitme div.sptbl-waitme__content div.sptbl-waitme__spinner {
  width: 45px;
  height: 45px;
  border-radius: 100%;
  border-width: 5px;
  border-style: solid;
  border-left-color: var(--sptbl-primary-border-color);
  border-right-color: var(--sptbl-primary-border-color);
  border-bottom-color: var(--sptbl-primary-border-color);
  border-top-color: var(--sptbl-primary-color);
  animation: rotation 0.55s infinite linear;
}
@media (max-width: 767.98px) {
  body div.mobile-bottom-navbar {
    display: block;
  }
  body.mobile-sb-open {
    overflow: hidden;
  }
  body.mobile-sb-open div.sb-open-overlay {
    cursor: pointer;
    -moz-transition: right 0.5s;
    -o-transition: right 0.5s;
    -webkit-transition: right 0.5s;
    transition: right 0.5s;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 5002;
  }
}
body[data-bg=default] button.btn-custom.main-grey:hover, body[data-bg=default] button.btn-custom.main-grey:active, body[data-bg=default] button.btn-custom.main-grey:focus, body[data-bg=default] div.btn-custom.main-grey:hover, body[data-bg=default] div.btn-custom.main-grey:active, body[data-bg=default] div.btn-custom.main-grey:focus {
  background-color: #dfe7f1;
}
body[data-bg=dark] button.btn-custom.main-grey:hover, body[data-bg=dark] button.btn-custom.main-grey:active, body[data-bg=dark] button.btn-custom.main-grey:focus, body[data-bg=dark] div.btn-custom.main-grey:hover, body[data-bg=dark] div.btn-custom.main-grey:active, body[data-bg=dark] div.btn-custom.main-grey:focus {
  background-color: #1f3646;
}
body[data-bg=dawn] button.btn-custom.main-grey:hover, body[data-bg=dawn] button.btn-custom.main-grey:active, body[data-bg=dawn] button.btn-custom.main-grey:focus, body[data-bg=dawn] div.btn-custom.main-grey:hover, body[data-bg=dawn] div.btn-custom.main-grey:active, body[data-bg=dawn] div.btn-custom.main-grey:focus {
  background-color: #3d2e21;
}
body[data-bg=midnight] button.btn-custom.main-grey:hover, body[data-bg=midnight] button.btn-custom.main-grey:active, body[data-bg=midnight] button.btn-custom.main-grey:focus, body[data-bg=midnight] div.btn-custom.main-grey:hover, body[data-bg=midnight] div.btn-custom.main-grey:active, body[data-bg=midnight] div.btn-custom.main-grey:focus {
  background-color: #444649;
  color: #d6d8da;
}

/* ===================================================== */
body.sptbl-app-confirm_email div.confirm-email div.timeline-placeholder {
  padding-bottom: 0px !important;
}
body.sptbl-app-confirm_email div.confirm-email div.timeline-placeholder div.pl-message {
  margin-bottom: 0px !important;
}
body.sptbl-app-confirm_email div.confirm-email form.form {
  padding: var(--sptbl-primary-offset-size);
}

/* ===================================================== */
body.sptbl-app-confirm_reg div.confirm-registration div.timeline-placeholder {
  padding-bottom: 0px !important;
}
body.sptbl-app-confirm_reg div.confirm-registration div.timeline-placeholder div.pl-message {
  margin-bottom: 50px !important;
}
body.sptbl-app-confirm_reg div.confirm-registration form.form {
  padding: var(--sptbl-primary-offset-size);
}

/* ===================================================== */
/* ===================================================== */
body.sptbl-app-conversation div.conversation {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
}
@media (min-width: 768px) {
  body.sptbl-app-conversation div.conversation {
    padding-bottom: 0;
  }
}
body.sptbl-app-conversation div.conversation div.conversation__body {
  flex: 1;
  min-height: 132px;
  position: relative;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages {
  width: 100%;
  height: 100%;
  background: var(--sptbl-chat-pane-bg, var(--sptbl-primary-bg-color));
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--sptbl-primary-offset-size);
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item {
  margin-bottom: var(--sptbl-primary-offset-size);
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 7px;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__body {
  flex-basis: auto;
  max-width: 55%;
  min-width: 0px;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__body div.message-text {
  padding: 10px 14px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--sptbl-primary-text-color);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
  body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__body div.message-text {
    font-size: 0.8125rem;
  }
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__body div.message-media a.image-wrapper {
  display: inline-block;
  width: auto;
  overflow: hidden;
  border-radius: var(--sptbl-secondary-border-radius);
  border: 3px solid var(--sptbl-primary-border-color);
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__body div.message-media a.image-wrapper img {
  width: 100%;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__ctrls {
  visibility: hidden;
  flex-shrink: 0;
  flex-basis: 35px;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__ctrls button.dropdown {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__ctrls button.dropdown div.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border-radius: 100%;
  background: var(--sptbl-secondary-bg-color);
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__ctrls button.dropdown div.dropdown-toggle::before, body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__ctrls button.dropdown div.dropdown-toggle::after {
  display: none;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__ctrls button.dropdown div.dropdown-toggle svg {
  width: 26px;
  height: 26px;
  fill: var(--sptbl-secondary-text-color);
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__ctrls button.dropdown div.dropdown-toggle:hover svg, body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__ctrls button.dropdown div.dropdown-toggle:active svg, body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data div.message-data__ctrls button.dropdown div.dropdown-toggle:focus svg {
  fill: var(--sptbl-primary-color);
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data:hover div.message-data__ctrls, body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-data:active div.message-data__ctrls {
  visibility: visible;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-time {
  font-size: 0.75rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 1;
}
@media (max-width: 767.98px) {
  body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item div.message-time {
    font-size: 0.6875rem;
  }
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item.right div.message-data {
  flex-direction: row-reverse;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item.right div.message-data div.message-data__body div.message-text {
  background: var(--sptbl-primary-color);
  color: var(--sptbl-chat-bubble-out-color);
  border-bottom-right-radius: 5px;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item.right div.message-data div.message-data__body div.message-text a.inline-link {
  color: var(--sptbl-chat-bubble-out-color) !important;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item.right div.message-data div.message-data__body div.message-text a.inline-link:hover, body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item.right div.message-data div.message-data__body div.message-text a.inline-link:active {
  text-decoration: underline;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item.right div.message-data div.message-data__ctrls {
  margin-right: var(--sptbl-primary-offset-size);
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item.right div.message-time {
  text-align: right;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item.left div.message-data div.message-data__body div.message-text {
  background: var(--sptbl-secondary-bg-color);
  border-bottom-left-radius: 5px;
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item.left div.message-data div.message-data__ctrls {
  margin-left: var(--sptbl-primary-offset-size);
}
body.sptbl-app-conversation div.conversation div.conversation__body div.conversation-messages div.conversation-messages__item:last-child {
  margin-bottom: 0px;
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form {
  padding: var(--sptbl-primary-offset-size);
  background: var(--sptbl-chat-composer-bar-bg, var(--sptbl-primary-bg-color));
  border-top: 1px solid var(--sptbl-primary-border-color);
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input {
  display: flex;
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field {
  flex: 1;
  margin: 0px var(--sptbl-primary-offset-size);
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field input, body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field textarea {
  border: 2px solid transparent;
  background: var(--sptbl-chat-composer-bg, var(--sptbl-input-bg-color));
  border-radius: 1.1rem;
  padding: 12px var(--sptbl-primary-offset-size);
  margin: 0px;
  display: block;
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--sptbl-primary-text-color);
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field input::placeholder, body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field textarea::placeholder {
  color: var(--sptbl-chat-composer-placeholder, var(--sptbl-input-placeholder-color));
  font-size: 0.9375rem;
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field input:active, body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field input:hover, body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field input:focus, body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field textarea:active, body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field textarea:hover, body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field textarea:focus {
  box-shadow: none;
  outline: none;
  border: 2px solid var(--sptbl-primary-color);
  background: var(--sptbl-chat-composer-bg, var(--sptbl-input-bg-color));
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field input {
  height: 48px;
  padding: 0px var(--sptbl-primary-offset-size);
}
@media (max-width: 767.98px) {
  body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field input {
    height: 44px;
  }
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field textarea {
  min-height: 48px;
  max-height: 132px;
  resize: none;
  overflow-y: auto;
}
@media (max-width: 767.98px) {
  body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input div.message-input__field textarea {
    min-height: 44px;
  }
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input button.message-input__ctrl {
  padding: 0;
  background: transparent;
  height: 48px;
  width: 26px;
  border: none;
  box-shadow: none;
  outline: 0;
  position: relative;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input button.message-input__ctrl:disabled {
  cursor: default;
  opacity: 0.5;
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input button.message-input__ctrl svg {
  width: 24px;
  height: 24px;
  fill: var(--sptbl-secondary-text-color);
}
body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input button.message-input__ctrl:hover svg, body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input button.message-input__ctrl:active svg, body.sptbl-app-conversation div.conversation div.conversation__footer form.form div.message-input button.message-input__ctrl:focus svg {
  fill: var(--sptbl-primary-color);
}
body.sptbl-app-conversation div.conversation div.conversation__footer div.ghost-form {
  font-size: 0.875rem;
  color: #ffffff;
  text-align: center;
  padding: var(--sptbl-primary-offset-size);
  background: var(--sptbl-danger-color);
  font-weight: 500;
}
body.sptbl-app-conversation div.right-sb-container, body.sptbl-app-conversation div.left-sb-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
body.sptbl-app-conversation div.right-sb-container, body.sptbl-app-conversation div.left-sb-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body.sptbl-app-conversation div.right-sb-container::-webkit-scrollbar, body.sptbl-app-conversation div.left-sb-container::-webkit-scrollbar {
  display: none;
}
body.sptbl-app-conversation main.main-content-container div.main-content-container-inner {
  padding-bottom: 0px;
}

/* --- Conversation column chrome ---------------------------------------
   The whole column - header, message list and composer - reads as ONE
   rounded card, the same shape the pods and messages listings use.

   The border is split between two elements that are siblings at the same
   width, so the edges line up seamlessly:

     .timeline-header:after   top edge + rounded top + sides
                              (data-app="conversation" is in the
                              half-rounded list in _misc_overrides, which
                              squares its bottom corners and drops the
                              bottom border)
     .conversation            sides + bottom edge + rounded bottom

   The border deliberately does NOT go on .timeline-container: that element
   wraps the header, so its sides would run alongside the header's own
   side borders and paint a 2px-thick edge across the top region. */
body.sptbl-app-conversation div.timeline-container[data-app=conversation] div.conversation {
  border: 1px solid var(--sptbl-primary-border-color);
  border-width: 0 1px 1px 1px;
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  overflow: hidden;
}

/* ===================================================== */
body.sptbl-app-start {
  background: var(--sptbl-primary-bg-color);
  overflow-y: auto;
}
body.sptbl-app-start div.welcome-page {
  position: relative;
  z-index: 100;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
body.sptbl-app-start div.welcome-page::before {
  position: absolute;
  content: "";
  width: 1500px;
  height: 1500px;
  border-radius: 1500px;
  background: #02020d;
  top: -400px;
  left: -350px;
}
body.sptbl-app-start div.welcome-page::after {
  position: absolute;
  content: "";
  width: 500px;
  height: 500px;
  border-radius: 500px;
  border: 90px solid #02020d;
  top: calc(50% - 250px);
  right: -350px;
}
@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page {
    background: #02020d;
  }
  body.sptbl-app-start div.welcome-page::before, body.sptbl-app-start div.welcome-page::after {
    display: none;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__body {
  padding-top: 70px;
  padding-bottom: 20px;
  flex: 1;
  position: relative;
  z-index: 20;
}
@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__body {
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp {
  min-height: calc(100vh - 195px);
  padding-right: 180px;
  margin-bottom: 50px;
}
@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp {
    min-height: auto;
    margin-bottom: 0px;
    padding-right: 0px;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-header {
  margin-bottom: 80px;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-header div.welcome-logo {
  height: 45px;
  margin-bottom: var(--sptbl-primary-offset-size);
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-header div.welcome-logo img {
  height: 100%;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-header div.welcome-title {
  font-size: 44px;
  color: #e7e6f2;
  line-height: 1;
  font-weight: 900;
  margin-bottom: 15px;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-header div.welcome-text {
  font-size: 22px;
  color: #8f94a8;
  line-height: 1.4;
  font-weight: bold;
}
@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-header {
    margin-bottom: 50px;
  }
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-header div.welcome-title {
    font-size: 34px;
    text-align: center;
  }
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-header div.welcome-text {
    font-size: 18px;
    text-align: center;
  }
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-header div.welcome-logo {
    display: flex;
    justify-content: center;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features {
  margin-bottom: 80px;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li {
  margin-bottom: 45px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  height: 100%;
  border: 4px solid var(--sptbl-primary-color);
  margin: 0 5px;
  box-shadow: var(--sptbl-secondary-box-shadow);
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li div.icon {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  margin-bottom: var(--sptbl-primary-offset-size);
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li div.icon img {
  width: 100%;
  height: 100%;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li div.text h4 {
  font-weight: 900;
  font-size: 1rem;
  padding: 0px;
  margin: 0px 0px 10px 0px;
  color: #e7e6f2;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li div.text p {
  font-size: 1rem;
  line-height: 1.2;
  color: #8f94a8;
  padding: 0;
  margin: 0;
  text-align: center;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li.welcome-features__li_1 {
  transform: rotate(-5deg);
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li.welcome-features__li_2 {
  margin-top: -10px;
  animation-delay: 0.20s;
  background: #e7e6f2;
  border: none;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li.welcome-features__li_2 div.text h4 {
  color: #02020d;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li.welcome-features__li_2 div.text p {
  color: #02020d;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features div.welcome-features__li.welcome-features__li_3 {
  transform: rotate(5deg);
  animation-delay: 0.40s;
}
@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-features {
    display: none;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-members {
  margin-bottom: 80px;
}
@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-members {
    display: none;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-members div.welcome-members__title {
  font-size: 18px;
  color: #8f94a8;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: var(--sptbl-primary-offset-size);
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-members div.welcome-members__title b {
  font-weight: 900;
  font-size: 18px;
  color: var(--sptbl-success-color);
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-members div.welcome-members__list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: 10px;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-members div.welcome-members__list div.welcome-members__list-item {
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
  border-radius: 45px;
  overflow: hidden;
  margin-left: -10px;
  border: 1px solid #8f94a8;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__lp div.welcome-page__lp-body div.welcome-members div.welcome-members__list div.welcome-members__list-item img {
  width: 100%;
  height: 100%;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner {
  display: flex;
  justify-content: flex-end;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form {
  box-shadow: var(--sptbl-secondary-box-shadow);
  padding: 25px;
  background: var(--sptbl-primary-bg-color);
  max-width: 400px;
  min-width: 320px;
  flex: 1;
  margin: 0 auto;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-title {
  margin-bottom: 20px;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-title h2 {
  color: var(--sptbl-primary-text-color);
  font-size: 28px;
  line-height: 1;
  padding: 0;
  margin: 0;
  font-weight: 700;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-title p {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--sptbl-secondary-text-color);
  margin: 10px 0 0 0;
  padding: 0;
}
@media (max-width: 991.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-title h2 {
    font-size: 27px;
    margin-bottom: 0px;
  }
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-title p {
    font-size: 0.8125rem;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group.oauth-login-providers a.social-login-btn {
  margin-bottom: 20px;
  display: block;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group.oauth-login-providers a.social-login-btn button {
  border: none;
  text-transform: none;
  font-size: 0.875rem;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group.oauth-login-providers a.social-login-btn button span.btn-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  fill: #fff;
  margin-right: 15px;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group.oauth-login-providers a.social-login-btn button span.btn-icon svg {
  width: 100%;
  height: 100%;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group.oauth-login-providers a.social-login-btn.twitter button {
  background: #64ccf2;
  color: #fff;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group.oauth-login-providers a.social-login-btn.facebook button {
  background: #507cc0;
  color: #fff;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group.oauth-login-providers a.social-login-btn.google button {
  box-shadow: none;
  background: #fff;
  border: 1px solid var(--sptbl-primary-border-color);
  color: var(--sptbl-primary-text-color);
  color: #111;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group.oauth-login-providers a.social-login-btn:last-child {
  margin-bottom: 0px;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group div.form-cta-link {
  text-align: center;
  line-height: 1.4;
  color: var(--sptbl-secondary-text-color);
  font-size: 0.875rem;
  font-weight: bold;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group div.form-cta-link a {
  color: var(--sptbl-primary-link-color);
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group div.login-or-signup {
  display: flex;
  justify-content: center;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group div.login-or-signup span {
  font-size: 0.8125rem;
  line-height: 13px;
  position: relative;
  color: var(--sptbl-secondary-text-color);
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group div.login-or-signup span:before {
  content: "";
  height: 2px;
  background: var(--sptbl-primary-border-color);
  position: absolute;
  top: 4px;
  left: -70px;
  width: 50px;
}
body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form div.welcome-page-form__body div.auth-form div.auth-form-holder form.form div.form-group div.login-or-signup span:after {
  content: "";
  height: 2px;
  background: var(--sptbl-primary-border-color);
  position: absolute;
  top: 4px;
  right: -70px;
  width: 50px;
}
@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner {
    display: block;
  }
  body.sptbl-app-start div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form {
    min-width: 280px;
    max-width: 100%;
    width: 550px;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer {
  padding-top: 20px;
  background: #02020d;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}
@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer {
  display: flex;
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer ul.footer-nav {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer ul.footer-nav li.footer-nav-item {
  margin-right: 20px;
  margin-bottom: 20px;
  line-height: 1;
  font-weight: 500;
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer ul.footer-nav li.footer-nav-item > a {
  font-size: 0.8125rem;
  color: #8f94a8;
  line-height: 20px;
  text-decoration: none;
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer ul.footer-nav li.footer-nav-item.dropdown > div.dropdown-toggle {
  font-size: 0.8125rem;
  color: #8f94a8;
  line-height: 20px;
  cursor: pointer;
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer ul.footer-nav li.footer-nav-item.dropdown a.dropdown-item {
  text-decoration: none;
}
@media (max-width: 991.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer ul.footer-nav li.footer-nav-item {
    margin-bottom: 5px;
  }
  body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer ul.footer-nav li.footer-nav-item:last-child {
    margin-left: 0px;
  }
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer div.footer-nav-get-apps {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer div.footer-nav-get-apps a {
  margin-left: 5px;
  text-decoration: none;
  color: #8f94a8;
  opacity: 1;
  transition: all 0.27s ease;
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer div.footer-nav-get-apps a svg {
  width: 25px;
  height: 25px;
  transition: all 0.27s ease;
}
body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer div.footer-nav-get-apps a:hover, body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer div.footer-nav-get-apps a:active {
  opacity: 1;
}
@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page div.welcome-page__footer div.welcome-page__bp div.main-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
body.sptbl-app-start[data-bg=dark] div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form, body.sptbl-app-start[data-bg=dawn] div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form, body.sptbl-app-start[data-bg=midnight] div.welcome-page div.welcome-page__body div.welcome-page__rp div.welcome-page__rp-inner div.welcome-page-form {
  border: 2px solid var(--sptbl-primary-border-color);
}

/* ===================================================== */
/* ===================================================== */
body.sptbl-app-home div.homepage,
body.sptbl-app-home div.homepage {
  background-color: var(--sptbl-homepage-bg-color);
  border: 1px solid var(--sptbl-primary-border-color);
  border-width: 0px 1px 1px 1px;
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
}

.timeline-options-container {
  background-color: var(--sptbl-homepage-bg-color);
  overflow: hidden;
  border: 1px solid var(--sptbl-primary-border-color);
  border-radius: 0.8rem;
  margin-top: 10px;
}

.timeline-options-container hr {
  margin: 0;
}

.timeline-options {
  padding: 10px 15px;
  justify-content: space-between;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
}

.timeline-options-container .timeline-navbar {
  border: none !important;
}

.timeline-options .form-switch,
.spoutcard-options .form-switch {
  display: flex;
  align-items: center;
}

.timeline-options label,
.spoutcard-options label {
  font-size: 0.8125rem !important;
  line-height: 2 !important;
  color: var(--sptbl-primary-color) !important;
  font-weight: 600 !important;
}

.spoutcard-options label {
  margin-left: 0 !important;
  line-height: 20px !important;
  vertical-align: top !important;
}

/* ==========================================================================
   Timeline layout switcher — Classic / Pulse / Magazine
   ========================================================================== */
/* Segmented pill, sitting in .timeline-options between the list <select> and
   the settings buttons. .timeline-options is `justify-content: space-between`,
   so this lands in the middle of the bar on its own. */
.timeline-layout-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--sptbl-primary-bg-color);
  border: 1px solid var(--sptbl-primary-border-color);
}

.timeline-layout-tabs__btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--sptbl-secondary-text-color);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  /* The raised "thumb". A filled card on the track is what makes a segmented
     control read as one control with a selection, rather than three buttons. */
}
.timeline-layout-tabs__btn:hover:not(.is-active) {
  color: var(--sptbl-primary-text-color);
}
.timeline-layout-tabs__btn.is-active {
  background: var(--sptbl-list-item-bg-color);
  color: var(--sptbl-primary-text-color);
  box-shadow: 0 1px 2px rgba(16, 32, 56, 0.12);
}
@media (max-width: 767.98px) {
  .timeline-layout-tabs__btn {
    padding: 5px 10px;
    font-size: 0.6875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-layout-tabs__btn {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .timeline-select-input {
    width: 124px;
  }
  .timeline-options {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}
/* ==========================================================================
   Pulse — the Chronicle Spine. Time lives on the spine, colour codes the
   source, cards alternate sides.

   Written mobile-first: the folded single-column form is the BASE, and the
   alternating two-column spine is a `media-breakpoint-up(md)` enhancement.
   That ordering matters. The coloured edge has to be set on `div.post-list-item`
   with `!important` (the card's own border comes from an 8-element selector in
   _spout.scss that nothing shorter can reach), and two `!important` rules of
   equal specificity are settled by source order — so the desktop form has to
   come second, not be undone by a later `@media (max-width)` block.
   ========================================================================== */
.pulse-timeline {
  /* Source bands. `spout` follows the user's chosen accent so the common case
     matches the rest of their app; the other three are fixed hues that stay
     legible on all four themes, in the same spirit as the :root status
     colours. They are only ever used as a 4px edge and a 13px dot — never as
     text — so the small-text contrast floor does not apply. */
  --pulse-spout: var(--sptbl-primary-color);
  --pulse-news: #c9556b;
  --pulse-echo: #3f9c85;
  --pulse-ad: var(--sptbl-secondary-text-color);
  --pulse-gutter: 34px;
  --pulse-accent: var(--pulse-spout);
}

.pulse-timeline__daybar {
  display: flex;
  align-items: center;
  margin: 18px 0 6px;
}

.pulse-timeline__date {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sptbl-primary-text-color);
}

.pulse-timeline__track {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 18px;
  /* One continuous dashed rule behind every row of the day. */
}
.pulse-timeline__track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pulse-gutter) / 2 - 1px);
  width: 2px;
  background: repeating-linear-gradient(currentColor 0 4px, transparent 4px 9px);
  /* currentColor + opacity rather than a border token: the border tokens
     sit within ~1.05:1 of the page on Day, so a dashed rule drawn in one
     is invisible. This tracks the theme and keeps the spine a clear step
     off the page on all four. */
  color: var(--sptbl-secondary-text-color);
  opacity: 0.4;
  pointer-events: none;
}

.pulse-timeline__row {
  display: grid;
  grid-template-columns: var(--pulse-gutter) 1fr;
  align-items: start;
  /* Folded, every card sits to the RIGHT of the spine, so every edge faces
     left. `!important` overrides the post card's own border, which is set by
     an 8-element selector chain in _spout.scss. */
}
.pulse-timeline__row--spout {
  --pulse-accent: var(--pulse-spout);
}
.pulse-timeline__row--news {
  --pulse-accent: var(--pulse-news);
}
.pulse-timeline__row--echo {
  --pulse-accent: var(--pulse-echo);
}
.pulse-timeline__row--ad {
  --pulse-accent: var(--pulse-ad);
}
.pulse-timeline__row .pulse-timeline__card {
  grid-column: 2;
}
.pulse-timeline__row .pulse-timeline__card div.post-list-item {
  border-left: 4px solid var(--pulse-accent) !important;
}
.pulse-timeline__row .pulse-timeline__connector {
  left: 50%;
  width: 14px;
}

.pulse-timeline__card {
  grid-row: 1;
  min-width: 0;
  /* The card keeps its own background, radius and border — this layout only
     reframes it. Its stock 10px top margin goes, because the track's row-gap
     owns vertical rhythm here and the two would compound. */
}
.pulse-timeline__card div.post-list-item {
  margin-top: 0 !important;
}

.pulse-timeline__node {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

/* Short rule from the spine out to the card, in the source colour. */
.pulse-timeline__connector {
  position: absolute;
  top: 26px;
  height: 2px;
  background: var(--pulse-accent);
}

.pulse-timeline__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--pulse-accent);
  /* The ring is the PAGE colour, not white: it is what punches the dot out of
     the dashed spine running behind it, so it has to match whatever the spine
     sits on in each theme. */
  border: 3px solid var(--sptbl-primary-bg-color);
  box-shadow: 0 0 0 1px var(--pulse-accent);
}

.pulse-timeline__time {
  margin-top: 7px;
  text-align: center;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--sptbl-primary-text-color);
  white-space: nowrap;
}

.pulse-timeline__meridiem {
  display: block;
  font-weight: 400;
  color: var(--sptbl-secondary-text-color);
}

/* A hole in the day. */
.pulse-timeline__gap {
  display: flex;
  padding: 4px 0 4px calc(var(--pulse-gutter) + 8px);
}

.pulse-timeline__gap-pill {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--sptbl-secondary-bg-color);
  color: var(--sptbl-secondary-text-color);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* From md up there is room for the real thing: a centred spine with the cards
   alternating either side of it. */
@media (min-width: 768px) {
  .pulse-timeline {
    --pulse-gutter: 96px;
  }
  .pulse-timeline__track::before {
    left: calc(50% - 1px);
  }
  .pulse-timeline__row {
    grid-template-columns: 1fr var(--pulse-gutter) 1fr;
  }
  .pulse-timeline__row--left .pulse-timeline__card {
    grid-column: 1;
  }
  .pulse-timeline__row--left .pulse-timeline__card div.post-list-item {
    border-left: 1px solid var(--sptbl-primary-border-color) !important;
    border-right: 4px solid var(--pulse-accent) !important;
  }
  .pulse-timeline__row--left .pulse-timeline__connector {
    right: 50%;
    left: auto;
  }
  .pulse-timeline__row--right .pulse-timeline__card {
    grid-column: 3;
  }
  .pulse-timeline__node {
    grid-column: 2;
    padding-top: 26px;
  }
  .pulse-timeline__connector {
    top: 32px;
    width: 40px;
  }
  .pulse-timeline__time {
    font-size: 0.6875rem;
  }
  .pulse-timeline__gap {
    justify-content: center;
    padding-left: 0;
  }
}
/* ==========================================================================
   Magazine — editorial treatment of the same card: the picture leads, the
   text is set larger, and the chrome gets out of the way.
   ========================================================================== */
.timeline-posts-ls--magazine {
  /* `display: contents` dissolves the content wrapper so its children become
     siblings of the publisher row — which is the only way to lift the media
     ABOVE the author without restructuring BasePost, a 1,183-line component
     shared by every post surface in the app. Everything the wrapper was
     contributing as a box (its top margin) is reapplied below. */
  /* The hero. Full-bleed to the card edges — the card's own padding is the
     only inset between it and the border, so one negative margin per side
     reaches the edge exactly. */
  /* Quote cards, accuracy alerts and the action bar keep document order after
     the body copy. */
}
.timeline-posts-ls--magazine div.post-list-item {
  overflow: hidden;
  padding-top: 0;
}
.timeline-posts-ls--magazine div.post-data-layout {
  display: flex;
  flex-direction: column;
}
.timeline-posts-ls--magazine div.post-data-layout__content {
  display: contents;
}
.timeline-posts-ls--magazine div.post-data-layout__publisher {
  order: 1;
  margin-bottom: 10px;
}
.timeline-posts-ls--magazine div.post-media {
  order: 0;
  margin: 0 calc(var(--sptbl-primary-offset-size) * -1) 14px;
}
.timeline-posts-ls--magazine div.post-media div.spout-image,
.timeline-posts-ls--magazine div.post-media div.lozad-media {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.timeline-posts-ls--magazine div.post-media img,
.timeline-posts-ls--magazine div.post-media video {
  width: 100%;
}
.timeline-posts-ls--magazine div.spout-text {
  order: 2;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.timeline-posts-ls--magazine div.thread-number {
  order: 2;
}
.timeline-posts-ls--magazine div.post-quote,
.timeline-posts-ls--magazine div.post-fact-check {
  order: 3;
}
.timeline-posts-ls--magazine div.post-data-layout__controls {
  order: 4;
}
.timeline-posts-ls--magazine div.post-data-layout__target {
  order: 1;
}

body.sptbl-app-home div.homepage div.homepage__spoutcard,
body.sptbl-app-home div.homepage div.homepage__spoutcard {
  padding: var(--sptbl-primary-offset-size);
}

/* ===================================================== */
/* ===================================================== */
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item {
  margin-top: 10px;
  padding: var(--sptbl-primary-offset-size);
  border: 1px solid var(--sptbl-primary-border-color);
  border-radius: 0.8rem;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--sptbl-post-bg-color);
  display: flex;
  justify-content: space-between;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item:hover, body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item:active {
  background: var(--sptbl-event-hover-bg);
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a {
  text-decoration: none;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__avatar {
  width: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__avatar span {
  display: flex;
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background-color: var(--sptbl-action-buttons-svg-color);
  color: var(--sptbl-primary-text-color);
  font-size: .9rem;
  text-align: text;
  align-items: center;
  justify-content: center;
  bottom: 0;
  right: 0;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__avatar img {
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  border-radius: 100%;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__avatar svg {
  fill: var(--sptbl-primary-color);
  width: 100%;
  height: 100%;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body {
  flex: 1;
  overflow: hidden;
  padding-left: var(--sptbl-primary-offset-size);
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-topline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 3px;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-topline div.flex-item-left {
  flex: 1;
  margin-right: var(--sptbl-primary-offset-size);
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-topline div.flex-item-left span {
  font-size: var(--sptbl-primary-name-size);
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-topline div.flex-item-left span:last-child {
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-topline div.flex-item-left span:hover, body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-topline div.flex-item-left span:focus, body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-topline div.flex-item-left span:active {
  color: var(--sptbl-primary-link-color);
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-topline div.flex-item-right {
  color: var(--sptbl-secondary-text-color);
  font-size: 0.8125rem;
}
@media (max-width: 767.98px) {
  body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-topline div.flex-item-right {
    font-size: 0.6875rem;
  }
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-midline {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-midline div.last-message {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--sptbl-primary-text-color);
  flex: 1;
  margin-right: var(--sptbl-primary-offset-size);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-midline div.last-message.unseen-message {
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
}
@media (max-width: 767.98px) {
  body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-midline div.last-message {
    font-size: 0.8125rem;
  }
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-midline div.new-message {
  line-height: 1;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item a div.contact-data div.contact-data__body div.contact-data__body-midline div.new-message span.badge {
  display: inline-block;
  background: var(--sptbl-danger-color);
  color: #ffffff;
  text-align: center;
  padding: 0 5px;
  border-radius: 10px;
  background-clip: padding-box;
  font-size: 0.6875rem;
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: 18px;
  vertical-align: middle;
  min-height: 13px;
  min-width: 20px;
  font-weight: 400;
}
body.sptbl-app-chat div.chats div.chat-contacts div.contacts-list__item.hidden {
  display: none !important;
}

/* Search bar closes the header card: the header supplies the rounded top and
   has no bottom border, so the search bar draws the sides plus a rounded
   bottom edge - the same way the pods navbar closes that page's header card.
   Selector matches the base rule's full descendant chain so it actually wins. */
body.sptbl-app-chat main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar {
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
}

body.sptbl-app-chat main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form {
  /* the container draws the bottom edge now */
  border-bottom: none;
}

/* Rounder search field, scoped to messages so pods / bundles / search keep
   their current square-ish input. Full chain so it beats the base rule. */
body.sptbl-app-chat main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-searchbar form.timeline-searchbar__form div.keyword-input input:not(.form-check-input) {
  border-radius: 999px;
}

/* ===================================================== */
/* ===================================================== */
div.notifications {
  margin-top: 10px;
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
  background-color: var(--sptbl-list-item-bg-color);
}

div.notifications-list {
  margin-top: 10px;
  margin-bottom: 20px;
}

body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item {
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  transition: all 0.27s ease-in-out;
  padding: var(--sptbl-primary-offset-size);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  background-color: var(--sptbl-list-item-bg-color);
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-avatar {
  width: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-avatar a div.user-avatar {
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  border-radius: 100%;
  overflow: hidden;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-avatar a div.user-avatar img {
  width: 100%;
  height: 100%;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data {
  flex: 1;
  padding-left: var(--sptbl-primary-offset-size);
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__body {
  flex: 1;
  margin-right: var(--sptbl-primary-offset-size);
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__body div.notifications-data__topline a {
  text-decoration: none;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__body div.notifications-data__topline a span {
  font-size: var(--sptbl-primary-name-size);
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__body div.notifications-data__topline a span:last-child {
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__body div.notifications-data__topline a span.user-name-holder:hover, body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__body div.notifications-data__topline a span.user-name-holder:focus, body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__body div.notifications-data__topline a span.user-name-holder:active {
  color: var(--sptbl-primary-link-color);
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__body a span.notif-time {
  color: var(--sptbl-secondary-text-color) !important;
  font-weight: normal !important;
  font-size: 0.8125rem !important;
  display: block;
  margin-bottom: 0 !important;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__body div.notifications-data__midline a span:not(.quoted-spout span) {
  font-size: 0.875rem;
  display: block;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--sptbl-secondary-text-color);
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls {
  display: flex;
  flex-wrap: nowrap;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__delete {
  margin-right: 20px;
  visibility: hidden;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__delete button.btn-custom-icon {
  background: var(--sptbl-secondary-bg-color);
  opacity: 0.7;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__delete button.btn-custom-icon:hover, body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__delete button.btn-custom-icon:active {
  opacity: 1;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__navnext {
  width: 24px;
  flex-shrink: 0;
  line-height: 1;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__navnext a {
  display: flex;
  align-items: center;
  height: 100%;
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__navnext a svg {
  width: 24px;
  height: 24px;
  fill: var(--sptbl-secondary-text-color);
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__navnext a:hover svg, body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__navnext a:active svg {
  fill: var(--sptbl-primary-color);
}
body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item:hover div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__delete, body.sptbl-app-notifications div.notifications div.notifications-list div.notifications-list__item:active div.notifications-list__item-data div.notifications-data div.notifications-data__ctrls div.notif-ctrls div.notif-ctrls__delete {
  visibility: visible;
}

/* ===================================================== */
/* ===================================================== */
body.sptbl-app-profile {
  /* The page header is `position: sticky; top: 10px`, and sticky is bounded
     by the PARENT's box - it can only travel as far as that box extends.
     Profile is the only page that wraps <PageHeader> in a grouping div (for
     the v-if="profile" / v-show="!loading" guards); every other page makes it
     a direct child of .timeline-container. That wrapper spans only the header
     plus the profile card (~620px) while the post list is a SIBLING below it,
     so the header un-stuck and scrolled away after ~620px.

     display: contents removes the wrapper's box without touching the DOM, so
     the header's layout parent becomes .timeline-container (full column
     height) and it stays anchored for the whole page, like everywhere else.
     v-show still hides it correctly: its inline display:none wins over this. */
}
body.sptbl-app-profile div.profile-shell {
  display: contents;
}
body.sptbl-app-profile div.user-profile {
  background-color: var(--sptbl-profile-bg-color);
  position: relative;
  border: 1px solid var(--sptbl-primary-border-color);
  border-width: 0px 1px 0px 1px;
}
body.sptbl-app-profile div.user-profile div.user-profile__header {
  position: relative;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover {
  background: var(--sptbl-secondary-bg-color);
  position: relative;
  z-index: 10;
  min-height: 100px;
  overflow: hidden;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover img:not(.btn-loader) {
  width: 100%;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover img.viewable {
  cursor: pointer;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover img.original-cover:active {
  cursor: ns-resize;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover div.cover-corrector {
  width: auto;
  display: inline-block;
  height: 45px;
  z-index: 20;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.1s linear;
  opacity: 0.55;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover div.cover-corrector div.cover-corrector__body {
  padding: 0px 6px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover div.cover-corrector div.cover-corrector__body button.cover-corrector__btn {
  width: 45px;
  height: 45px;
  border: none;
  background: transparent;
  padding: 0px;
  margin: 0px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: 0;
  cursor: pointer;
  line-height: 1;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover div.cover-corrector div.cover-corrector__body button.cover-corrector__btn svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover div.cover-corrector div.cover-corrector__body button.cover-corrector__btn:disabled {
  cursor: wait !important;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover:hover div.cover-corrector, body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-cover:active div.cover-corrector {
  opacity: 1;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar {
  display: inline-block;
  padding: 0px var(--sptbl-primary-offset-size);
  position: absolute;
  z-index: 10;
  left: 0px;
  bottom: -60px;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar div.profile-avatar {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 100%;
  border: 5px solid var(--sptbl-primary-bg-color);
  overflow: hidden;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar div.profile-avatar img:not(.btn-loader) {
  width: 100%;
  height: 100%;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar div.profile-avatar button.upload-avatar {
  width: 100%;
  height: 100%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  padding: 0px;
  margin: 0px;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: 0;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.1s linear;
  position: absolute;
  bottom: 0px;
  right: 0px;
  top: 0px;
  left: 0px;
  opacity: 0.55;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar div.profile-avatar button.upload-avatar svg {
  width: 26px;
  height: 26px;
  fill: #ffffff;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar div.profile-avatar button.upload-avatar:disabled {
  cursor: wait !important;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar div.profile-avatar:hover button.upload-avatar, body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar div.profile-avatar:active button.upload-avatar {
  opacity: 1;
}
@media (max-width: 767.98px) {
  body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar {
    bottom: -50px;
  }
  body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__header-avatar div.profile-avatar {
    width: 100px;
    height: 100px;
  }
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__inputs {
  display: none;
}
body.sptbl-app-profile div.user-profile div.user-profile__header div.user-profile__inputs input {
  display: none;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  padding: var(--sptbl-primary-offset-size);
  margin-bottom: 10px;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item.ml-offset {
  margin-left: 20px;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item {
  cursor: pointer;
  background: transparent;
  border: none;
  outline: 0;
  padding: 0px;
  box-shadow: none;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.ctrl-single-btn, body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.dropdown-toggle {
  width: 26px;
  height: 26px;
  display: inline-block;
  outline: 0;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.ctrl-single-btn svg, body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.dropdown-toggle svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-primary-color);
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.ctrl-single-btn:after, body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.ctrl-single-btn:before, body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.dropdown-toggle:after, body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.dropdown-toggle:before {
  display: none;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.dropdown-toggle svg {
  fill: var(--sptbl-secondary-text-color);
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.dropdown-toggle:hover svg, body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls div.user-profile__controls-item div.dropdown-toggle:active svg {
  fill: var(--sptbl-primary-color);
}
@media (max-width: 767.98px) {
  body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__controls {
    margin-bottom: 0px;
  }
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__name {
  padding: 0px var(--sptbl-primary-offset-size);
  margin-bottom: var(--sptbl-primary-offset-size);
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__name h4 {
  font-size: 22px;
  line-height: 1.2;
  color: var(--sptbl-primary-text-color);
  padding: 0;
  margin: 0;
  font-weight: 700;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__name a {
  display: block;
  color: var(--sptbl-secondary-text-color);
  font-size: var(--sptbl-primary-name-size);
  line-height: 1;
  text-decoration: none;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__counter {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0px var(--sptbl-primary-offset-size);
  margin-bottom: var(--sptbl-primary-offset-size);
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__counter a.counter-item {
  text-decoration: none;
  margin-right: var(--sptbl-primary-offset-size);
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__counter a.counter-item span {
  font-size: 1rem;
  color: var(--sptbl-secondary-text-color);
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__counter a.counter-item span:first-child {
  font-weight: 700;
  color: var(--sptbl-primary-text-color);
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__counter a.counter-item:hover span, body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__counter a.counter-item:active span {
  color: var(--sptbl-primary-color);
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__bio {
  padding: 0px var(--sptbl-primary-offset-size);
  margin-bottom: var(--sptbl-primary-offset-size);
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__bio div.user-profile__bio-topline {
  font-size: 1rem;
  color: var(--sptbl-primary-text-color);
  font-weight: 400;
  line-height: 1.4;
  word-break: keep-all;
  word-wrap: break-word;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__bio div.user-profile__bio-botline a {
  color: var(--sptbl-primary-link-color);
  font-size: 1rem;
  text-decoration: none;
}
body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__bio div.user-profile__bio-botline a:hover, body.sptbl-app-profile div.user-profile div.user-profile__body div.user-profile__bio div.user-profile__bio-botline a:active {
  text-decoration: underline;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer {
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  padding: 0px var(--sptbl-primary-offset-size);
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-shortinfo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-shortinfo div.profile-shortinfo__item {
  margin-right: var(--sptbl-primary-offset-size);
  margin-bottom: var(--sptbl-primary-offset-size);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-shortinfo div.profile-shortinfo__item span.banner svg {
  width: 22px;
  height: 13px;
  vertical-align: middle;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-shortinfo div.profile-shortinfo__item span.icon {
  width: 22px;
  height: 22px;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-shortinfo div.profile-shortinfo__item span.icon svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-secondary-text-color);
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-shortinfo div.profile-shortinfo__item span.text {
  font-size: 0.875rem;
  color: var(--sptbl-secondary-text-color);
  padding: 0px 3px;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-shortinfo div.profile-shortinfo__item:last-child {
  margin-right: 0px;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-myfollower {
  margin-bottom: var(--sptbl-primary-offset-size);
  color: var(--sptbl-secondary-text-color);
  font-size: 0.875rem;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-common-follows {
  margin-bottom: var(--sptbl-primary-offset-size);
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-common-follows div.common-follows div.common-follows__title {
  font-size: 0.9375rem;
  color: var(--sptbl-secondary-text-color);
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-common-follows div.common-follows div.common-follows__title strong {
  font-weight: 500;
  color: var(--sptbl-primary-text-color);
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-common-follows div.common-follows div.common-follows__list {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 7px;
  align-items: center;
  margin-top: 5px;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-common-follows div.common-follows div.common-follows__list div.common-follows__item {
  flex-basis: 32px;
  flex-shrink: 0;
  margin-left: -7px;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-common-follows div.common-follows div.common-follows__list div.common-follows__item a {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  text-decoration: none;
  border: 1px solid var(--sptbl-primary-border-color);
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-common-follows div.common-follows div.common-follows__list div.common-follows__item a img {
  width: 100%;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-common-follows div.common-follows div.common-follows__list div.common-follows__item.common-follows__item_total {
  margin-left: 10px;
}
body.sptbl-app-profile div.user-profile div.user-profile__footer div.profile-common-follows div.common-follows div.common-follows__list div.common-follows__item.common-follows__item_total span {
  font-size: 1rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 1;
  font-weight: 700;
}

/* ===================================================== */
body.sptbl-app-search[data-page-tab=htags] div.right-sb-container div.sidebar-content_hashtags {
  display: none;
}
body.sptbl-app-search[data-page-tab=people] div.right-sb-container div.sidebar-content_users {
  display: none;
}

/* ===================================================== */
body.sptbl-app-settings div.profile-settings {
  background: var(--sptbl-list-item-bg-color);
  border: 1px solid var(--sptbl-primary-border-color);
  border-width: 0 1px 1px 1px;
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  overflow: hidden;
}
body.sptbl-app-settings div.profile-settings:has(.settings-form) {
  overflow: visible;
}
body.sptbl-app-settings div.profile-settings .user-card-item.user-list-item {
  margin-top: 0 !important;
  border: none;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  border-radius: 0;
  background-color: transparent;
}
body.sptbl-app-settings div.profile-settings .user-card-item.user-list-item:last-child {
  border-bottom: none;
}
body.sptbl-app-settings div.profile-settings div.profile-settings__title {
  overflow: hidden;
  padding: var(--sptbl-primary-offset-size);
  background: var(--sptbl-settings-title-bg, var(--sptbl-secondary-bg-color));
  border-bottom: 1px solid var(--sptbl-primary-border-color);
}
body.sptbl-app-settings div.profile-settings div.profile-settings__title h4 {
  font-size: 0.8125rem;
  color: var(--sptbl-primary-text-color);
  padding: 0;
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link {
  text-decoration: none;
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--sptbl-primary-offset-size);
  background-color: var(--sptbl-list-item-bg-color);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.mp {
  flex: 1;
  margin: 0px var(--sptbl-primary-offset-size);
  line-height: 1;
  overflow: hidden;
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.mp span.preview-label {
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
  color: var(--sptbl-primary-text-color);
  display: block;
  margin-bottom: 7px;
}
@media (max-width: 767.98px) {
  body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.mp span.preview-label {
    font-size: 0.8125rem;
  }
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.mp span.preview-value {
  font-size: 0.875rem;
  color: var(--sptbl-secondary-text-color);
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
  body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.mp span.preview-value {
    font-size: 0.75rem;
  }
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.rp, body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.lp {
  line-height: 1;
  flex-shrink: 0;
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.rp svg, body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.lp svg {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  fill: var(--sptbl-secondary-text-color);
}
@media (max-width: 767.98px) {
  body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.rp svg, body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.lp svg {
    width: 20px;
    height: 20px;
  }
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item div.lp {
  align-self: flex-start;
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item:hover, body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item:active, body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item:focus {
  background: var(--sptbl-event-hover-bg);
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item:hover b, body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item:active b, body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item:focus b {
  color: var(--sptbl-primary-color);
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item.nav-list-item-delete {
  background: var(--sptbl-danger-color);
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item.nav-list-item-delete div.mp span.preview-label {
  color: #ffffff;
  font-weight: 500;
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item.nav-list-item-delete div.mp span.preview-value {
  color: #ffffff;
  opacity: 0.9;
}
body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item.nav-list-item-delete div.rp svg, body.sptbl-app-settings div.profile-settings a.profile-settings__link div.nav-list-item.nav-list-item-delete div.lp svg {
  fill: #ffffff;
}
body.sptbl-app-settings div.profile-settings div.profile-settings__content {
  padding: var(--sptbl-primary-offset-size);
}
body.sptbl-app-settings div.profile-settings div.profile-settings__content div.settings-form form.form div.form-group.padding-x-offset {
  padding: 0px var(--sptbl-primary-offset-size);
}
body.sptbl-app-settings div.profile-settings div.profile-settings__content.profile-settings__content_no-padding {
  padding: 0px;
}

/* ===================================================== */
/* ===================================================== */
div.startup div.startup__header div.timeline-placeholder {
  padding-bottom: 0px !important;
}
div.startup div.startup__body {
  margin-bottom: 20px;
}
div.startup div.startup__body.no-mb {
  margin-bottom: 0px;
}
div.startup div.startup__body div.startup-avatar {
  display: flex;
  align-items: center;
  flex-direction: column;
}
div.startup div.startup__body div.startup-avatar div.startup-avatar__image {
  width: 120px;
  height: 120px;
  position: relative;
  margin: 20px 0 20px 0;
}
div.startup div.startup__body div.startup-avatar div.startup-avatar__image img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
div.startup div.startup__body div.startup-avatar div.startup-avatar__image button.upload-avatar {
  background-color: var(--sptbl-primary-color);
  border: none;
  padding: 0px;
  margin: 0px;
  width: 44px;
  height: 44px;
  position: absolute;
  top: -5px;
  right: -5px;
  border-radius: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition: all 0.27s ease;
  box-shadow: var(--sptbl-primary-box-shadow);
  outline: 0;
}
div.startup div.startup__body div.startup-avatar div.startup-avatar__image button.upload-avatar svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
  transition: inherit;
}
div.startup div.startup__body div.startup-avatar div.startup-avatar__image button.upload-avatar:disabled {
  cursor: wait !important;
}
div.startup div.startup__body div.startup-avatar div.startup-avatar__image button.upload-avatar:hover, div.startup div.startup__body div.startup-avatar div.startup-avatar__image button.upload-avatar:active {
  transform: scale(1.1);
}
div.startup div.startup__body div.startup-avatar div.startup-avatar__desc {
  font-size: 1rem;
  color: var(--sptbl-primary-color);
  text-align: center;
  font-weight: 500;
}
div.startup div.startup__body div.startup__form {
  padding: 0px var(--sptbl-primary-offset-size);
}
div.startup div.startup__body div.startup-suggested {
  border-top: 1px solid var(--sptbl-primary-border-color);
}
div.startup div.startup__body div.startup-suggested div.startup-suggested__skip {
  padding: var(--sptbl-primary-offset-size) 0;
}
div.startup div.startup__body div.startup-suggested div.startup-suggested__skip button.btn {
  margin-bottom: var(--sptbl-primary-offset-size);
}
div.startup div.startup__body div.startup-suggested div.startup-suggested__skip button.btn:last-child {
  margin-bottom: 0px;
}
div.startup div.startup__footer {
  padding: var(--sptbl-primary-offset-size);
}

/* ===================================================== */
body.sptbl-app-stat_pages div.stat-page-content {
  padding: var(--sptbl-primary-offset-size);
  color: var(--sptbl-primary-text-color);
}

/* ===================================================== */
body.sptbl-app-suggested div.right-sb-container div.sidebar-content_users {
  display: none;
}

/* ===================================================== */
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-chain div.post-list-item {
  border-bottom: none;
  position: relative;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-chain div.post-list-item:after {
  position: absolute;
  bottom: 0px;
  left: 80px;
  right: var(--sptbl-primary-offset-size);
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  content: "";
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-chain div.post-list-item:hover, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-chain div.post-list-item:active {
  background: inherit !important;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-chain div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar {
  position: relative;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-chain div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar::before {
  display: none;
  position: absolute;
  content: "";
  top: var(--sptbl-primary-avatar-size);
  bottom: -25px;
  left: 24px;
  width: 4px;
  background: var(--sptbl-primary-color);
  border-radius: 5px;
}
@media (max-width: 767.98px) {
  body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-chain div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar::before {
    left: 14px;
    top: 30px;
    bottom: -20px;
  }
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data {
  border-bottom: 3px solid var(--sptbl-primary-color);
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar {
  display: none;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content {
  padding-left: 0px;
}
div.post-avatar {
  flex-basis: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
  margin-right: var(--sptbl-primary-offset-size);
}
div.post-avatar div.avatar-holder {
  overflow: hidden;
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  background: var(--sptbl-primary-border-color);
  border-radius: 100%;
}
div.post-avatar div.avatar-holder img {
  width: 100%;
  height: 100%;
}
div.post-avatar div.avatar-holder img:not([data-loaded]) {
  visibility: hidden;
}

body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-date {
  font-size: 0.8125rem;
  color: var(--sptbl-secondary-text-color);
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-date span {
  margin-left: 5px;
  cursor: help;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-target {
  margin-left: 15px;
  position: relative;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-target div.post-reply {
  width: 100%;
  display: block;
  line-height: 0;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-target div.post-reply span {
  font-size: 0.8125rem;
  line-height: 16px;
  color: var(--sptbl-secondary-text-color);
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-target div.post-reply span a {
  color: var(--sptbl-primary-link-color);
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-target:before {
  position: absolute;
  content: "";
  width: 4px;
  height: 4px;
  background: var(--sptbl-secondary-text-color);
  left: -10px;
  top: 7px;
  border-radius: 5px;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy {
  margin-left: auto;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy button.privacy-settings {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  line-height: 1;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy button.privacy-settings div.dropdown-toggle {
  padding: 0;
  margin: 0;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy button.privacy-settings div.dropdown-toggle:after, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy button.privacy-settings div.dropdown-toggle:before {
  display: none;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy button.privacy-settings div.dropdown-toggle span.d-inline-flex {
  height: 30px;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy button.privacy-settings div.dropdown-toggle span.d-inline-flex span.flex-item.icon svg {
  width: 16px;
  height: 16px;
  fill: var(--sptbl-primary-color);
  stroke-width: 2;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy button.privacy-settings div.dropdown-toggle span.d-inline-flex span.flex-item.label {
  font-size: 0.8125rem;
  line-height: 13px;
  color: var(--sptbl-primary-color);
  margin-left: 5px;
  font-weight: 500;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy button.privacy-settings:hover, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__date div.spout-privacy button.privacy-settings:active {
  background: none;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls {
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 10px;
  justify-content: space-around;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon svg, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item a.ctrls-item__icon svg {
  width: 26px;
  height: 26px;
}
@media (max-width: 767.98px) {
  body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item a.ctrls-item__icon {
    width: 20px;
    height: 20px;
  }
  body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item span.ctrls-item__icon svg, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item a.ctrls-item__icon svg {
    width: 20px;
    height: 20px;
  }
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-data div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__controls button.ctrls-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group {
  border-top: 2px solid var(--sptbl-primary-border-color);
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group:hover, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group:active {
  background: var(--sptbl-event-hover-bg);
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group:first-child {
  border-top: none;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.timeline-posts-ls-group-inner div.post-list-item {
  position: relative;
  border-bottom: none;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.timeline-posts-ls-group-inner div.post-list-item:hover, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.timeline-posts-ls-group-inner div.post-list-item:active {
  background: inherit !important;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.timeline-posts-ls-group-inner div.post-list-item::after {
  position: absolute;
  bottom: 0px;
  left: 80px;
  right: var(--sptbl-primary-offset-size);
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  content: "";
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.timeline-posts-ls-group-inner div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar {
  position: relative;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.timeline-posts-ls-group-inner div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar::before {
  display: none;
  position: absolute;
  content: "";
  top: var(--sptbl-primary-avatar-size);
  bottom: -25px;
  left: 24px;
  width: 4px;
  background: var(--sptbl-primary-color);
  border-radius: 5px;
}
@media (max-width: 767.98px) {
  body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.timeline-posts-ls-group-inner div.post-list-item div.post-list-item__content div.post-data div.post-data__avatar:before {
    left: 14px;
    top: 30px;
  }
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.timeline-posts-ls-group-inner div.post-list-item:last-child div.post-list-item__content div.post-data div.post-data__avatar::before {
  display: none;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.timeline-posts-ls-group-inner div.post-list-item:last-child::after {
  display: none;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.show-thread {
  border-top: 1px solid var(--sptbl-primary-border-color);
  background: var(--sptbl-primary-border-color);
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.show-thread a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  height: 32px;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.show-thread a span.text {
  font-size: 0.8125rem;
  color: var(--sptbl-secondary-text-color);
  text-transform: uppercase;
  line-height: 1;
  font-weight: 500;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.show-thread a span.icon {
  margin-left: 5px;
  line-height: 1;
  transition: all 0.27s ease;
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.show-thread a span.icon svg {
  width: 22px;
  height: 22px;
  fill: var(--sptbl-secondary-text-color);
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.show-thread:hover span.text, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.show-thread:active span.text {
  color: var(--sptbl-primary-color);
}
body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.show-thread:hover span.icon svg, body.sptbl-app-thread main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container div.timeline-posts-container div.timeline-posts-ls.thread-replys div.timeline-posts-ls-group div.show-thread:active span.icon svg {
  fill: var(--sptbl-primary-color);
}

/* ===================================================== */
div.post-data__content-inner div.post-data-layout div.post-data-layout__content p.content_thread_author_deletion_notice {
  background: #f8f2f2;
  border: 1px solid #f4ebeb;
  color: #bd8685;
  padding: 5px 7px;
  font-weight: 600;
  border-radius: 4px;
}

body[data-embed-thread] .modal-backdrop,
body[data-embed-thread] .cookie-alert-modal,
body[data-embed-thread] .m-postBtn,
body.sptbl-app-chat .m-postBtn,
body.sptbl-app-conversation .m-postBtn,
body.sptbl-app-pods .m-postBtn,
body.sptbl-app-pod .m-postBtn,
body.sptbl-app-bundles .m-postBtn {
  display: none !important;
}

body[data-embed-thread] main.main-content-container {
  background: transparent;
}

body[data-embed-thread] [data-el=timeline-container-wrapper] {
  min-height: auto;
  padding: 0 !important;
}

body[data-embed-thread] .timeline-posts-container .post-list-item,
body[data-embed-thread] .timeline-posts-container #post-list-item--embed {
  margin-top: 0 !important;
}

div.post-data__content .post-data-layout__controls {
  display: flex !important;
  align-items: center;
  margin-top: 17px;
}

div.post-data__content .post-data-layout__controls > div:last-child {
  flex: 1;
}

div.post-data__content .inline-top-likes {
  align-items: center;
  margin-top: 15px;
  cursor: pointer;
  padding: 3px 1px;
}

div.post-data__content .inline-top-likes:hover {
  background-color: var(--sptbl-secondary-bg-color);
}

div.post-data__content .inline-top-likes > div:first-child {
  display: flex;
  padding-right: 10px;
}

div.post-data__content .inline-top-likes > div:first-child > img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 2px solid white;
  margin-right: -10px;
}

.quoted-spout {
  border: none !important;
  border-radius: 15px;
  padding: 15px;
  background: var(--sptbl-quoted-spout-bg);
}

body.sptbl-app-notifications .quoted-spout {
  cursor: pointer;
}

.quoted-spout .quote-header {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
}

.quoted-spout .quote-header img {
  border-radius: 50%;
  -webkit-border-radius: 100%;
  margin-right: 4px;
}

.quoted-spout .quote-header .quote-uname {
  margin-right: 2px;
  margin-left: 4px;
}

.quoted-spout .quote-header .quote-uuname {
  margin-left: 2px;
  display: block;
}

.quoted-spout .quote-header .quote-uuname,
.quoted-spout .quote-date {
  color: var(--sptbl-secondary-text-color);
  font-size: 0.8125rem;
}

.quoted-spout .quote-header .user-name-holder__badge svg {
  height: 14px;
  width: 14px;
}

.quoted-spout .spout-text {
  margin-top: 7px !important;
  margin-bottom: 0 !important;
  padding-bottom: 2px;
  color: var(--sptbl-primary-text-color);
}

/* Quoted-spout media (single image, gallery, video, gif, OG card) is
   rendered by `PostMedia.vue` and inherits the styling that the timeline
   path already applies. Outside the timeline (notifications card,
   embed modal, ...) the deeply-anchored `body main.main-content-container
   ... .post-list-item ... .spout-image` selectors at master.styles.css:4760-4837
   don't reach, so an embedded image was rendering at its natural pixel
   size and breaking out of the notification card. Scope the same width
   constraints to the `.quoted-spout` wrapper so embeds fit wherever the
   PostQuote component is mounted. */
.quoted-spout .lozad-media,
.quoted-spout .spout-image,
.quoted-spout .spout-images-collage {
  width: 100%;
  display: block;
  position: relative;
  margin-top: 8px;
}

.quoted-spout .spout-image {
  border: 1px solid var(--sptbl-primary-border-color);
  border-radius: var(--sptbl-secondary-border-radius);
  overflow: hidden;
  background: #e7eef6;
}

.quoted-spout .spout-image > a,
.quoted-spout .spout-image a.fbox-media {
  display: block;
  width: 100%;
}

.quoted-spout .spout-image img,
.quoted-spout .spout-image img.lozad,
.quoted-spout .spout-images-collage img,
.quoted-spout .spout-images-collage img.lozad {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.quoted-spout .spout-images-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.quoted-spout .spout-images-collage .image-collage-item,
.quoted-spout .spout-images-collage .spout-image {
  width: 100%;
  height: 100%;
  margin-top: 0;
}

.quoted-spout .spout-images-collage .spout-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.quoted-spout video,
.quoted-spout .spout-og img,
.quoted-spout .spout-og .lozad-media img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Non-image quoted media. `_spout.scss` styles the poll option rows and the
   OG card body at `@at-root`, but the OG *wrapper* is anchored to
   `div.post-data-layout__content` (timeline) and `.sptbl-modal-container`
   (modals) only — a quoted spout on the notifications page reaches neither.
   Re-declare the wrapper-level bits against `.quoted-spout` so the preview
   reads the same wherever PostQuote mounts. */
.quoted-spout .spout-poll,
.quoted-spout .spout-audio,
.quoted-spout .spout-og,
.quoted-spout .spout-video {
  margin-top: 8px;
}

.quoted-spout .spout-og {
  background: var(--sptbl-embedded-content-bg-color);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-embedded-content-border-color);
  position: relative;
  overflow: hidden;
  word-break: break-all;
}

.quoted-spout .spout-audio audio {
  width: 100%;
  outline: 0;
}

/* Read-only poll (composer preview): the bars still render, but there is
   nothing to click, so drop the affordance. Specificity has to clear
   `div.spout-poll div.spout-poll__inner div.spout-poll__option`. */
div.spout-poll.spout-poll--readonly div.spout-poll__inner div.spout-poll__option {
  cursor: default;
}

/* Composer preview of the spout being quoted — illustrative only, so the card
   is not a link into the thread. */
.quoted-spout--preview {
  cursor: default;
}

.spoutcard-quote-preview {
  margin-top: 10px;
}

.spoutcard-quote-preview .quoted-spout {
  margin-top: 4px;
  padding: 12px;
}

.post-data__content .echo-mini-popup {
  padding: 0;
  margin-top: 5px;
  box-shadow: 0 0 6px var(--sptbl-secondary-border-color);
  border: none;
}

.post-data__content .echo-mini-popup .item-count {
  margin-top: 0;
  display: flex;
  align-items: center;
}

.post-data__content .echo-mini-popup .item-count > svg + span {
  flex: 1;
  margin-left: 4px;
}

.post-data__content .echo-mini-popup > div {
  padding: 6px 7px;
  margin-top: 0;
}

.post-data__content .echo-mini-popup > div:hover {
  background-color: var(--sptbl-secondary-border-color);
}

#sptbl-phone-settings-vue-app .otp-form-group .intl-tel-input .flag-container {
  display: none;
}

#sptbl-phone-settings-vue-app .otp-form-group .intl-tel-input [name=otp] {
  padding: 0.375rem 0.75rem;
}

.post-data__content [data-pinned=true] .action--pin {
  display: none;
}

.post-data__content [data-pinned=false] .action--unpin {
  display: none;
}

/* ===================================================== */
body.sptbl-app-trending div.right-sb-container div.sidebar-content_hashtags {
  display: none;
}

/* ===================================================== */
/* Misc overrides - hand-appended section reverse-ported verbatim from
   live master.styles.css lines 13164-13899. Declaration values are wrapped
   in interpolation so dart-sass emits them byte-for-byte (leading-dot
   decimals, duplicate fallbacks, rgba(#hex, a) keyframe values, etc.).
   Do not "clean up" values here. */
.spout-text {
  padding-bottom: 15px;
}

.post-action-v2 {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.post-action-v2 .post-action-button {
  position: relative;
  text-align: right;
  margin-top: 15px;
  padding-right: 10px;
  display: flex;
  justify-content: end;
}

.post-action-v2 .post-action-button > div {
  margin-left: 12px;
  position: relative;
  animation: none !important;
}

.post-action-v2 .post-action-button > div > div {
  animation: none !important;
}

.post-action-v2 .item-action {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 25px;
}

.post-action-v2 .post-action-button .ctrls-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  color: var(--sptbl-action-buttons-svg-color);
  opacity: 1;
  transition: all .3s;
}

.post-action-v2 .post-action-button .ctrls-item.ci-b .ctrls-item__icon svg {
  fill: #fff !important;
}

.post-action-v2 .post-action-button .ctrls-item.btn-a {
  background: transparent !important;
}

.post-action-v2 .post-action-button .ctrls-item.btn-a svg {
  fill: var(--sptbl-reply-primary-svg-color) !important;
}

.post-action-v2 .post-action-button .reposted .ctrls-item.btn-a {
  background: transparent !important;
}

.post-action-v2 .post-action-button .reposted .ctrls-item.btn-a svg {
  fill: var(--sptbl-reply-secondary-svg-color) !important;
}

.post-action-v2 .post-action-button .ctrls-item.btn-b {
  background: transparent !important;
}

.post-action-v2 .post-action-button .ctrls-item.btn-b svg {
  fill: var(--sptbl-repost-primary-svg-color) !important;
}

.post-action-v2 .post-action-button .reposted .ctrls-item.btn-b {
  background: transparent !important;
}

.post-action-v2 .post-action-button .reposted .item-count svg {
  fill: var(--sptbl-repost-secondary-svg-color) !important;
}

.post-action-v2 .post-action-button .ctrls-item.btn-c {
  background: transparent !important;
}

.post-action-v2 .post-action-button .ctrls-item.btn-c svg {
  fill: var(--sptbl-like-primary-svg-color) !important;
}

.post-action-v2 .post-action-button .liked .ctrls-item.btn-c {
  background: transparent !important;
}

.post-action-v2 .post-action-button .liked .item-count svg {
  fill: var(--sptbl-like-secondary-svg-color) !important;
}

.post-action-v2 .post-action-button .ctrls-item.ci-b {
  background: var(--sptbl-primary-button-color) !important;
}

.post-action-v2 .post-action-button .ctrls-item .ctrls-item__icon {
  margin: 0 !important;
  background: none !important;
}

.post-action-v2 .post-time {
  position: absolute;
  left: 0;
  bottom: 3px;
}

.post-action-v2 .post-action-button-count {
  text-align: right;
  padding-right: 9px;
}

.post-action-v2 .post-action-button-count a {
  text-decoration: none;
  color: var(--sptbl-action-buttons-svg-color);
}

.post-action-v2 .post-action-button-count > div {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--sptbl-action-buttons-svg-color);
  margin-right: 6px;
  padding-top: 6px;
}

.post-action-v2 .post-action-button-count svg {
  width: 18px;
  fill: var(--sptbl-action-buttons-svg-color);
  margin-right: 2px;
}

.item-count {
  display: block;
  font-size: 0.875rem;
  color: var(--sptbl-action-buttons-svg-color);
  margin-top: 7px;
  cursor: pointer;
}

.item-count svg {
  width: 20px;
  height: 20px;
  fill: var(--sptbl-action-buttons-svg-color);
  margin-right: 2px;
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post-meta span {
  display: block;
}

.post-meta svg {
  margin-right: 5.6px;
  display: block;
}

.post-action-v2 .post-action-button .animated .item-count {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.post-action-v2 .post-action-button .animated .item-count {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

.timeline-header {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.timeline-header:before {
  content: "";
  background: var(--sptbl-timeline-header-before-bg-color);
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 50px;
  margin-bottom: -15px;
}

.timeline-header:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: rgb(0 0 0 / 2%) 0px 2px 5px 0px;
  background-color: var(--sptbl-timeline-header-after-bg-color);
  border: 1px solid var(--sptbl-primary-border-color);
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  border-width: 1px;
}

.stickyhead .timeline-header:after {
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  border-width: 1px;
}

.timeline-container[data-app=homepage] .timeline-header:after, .timeline-container[data-app=profile] .timeline-header:after, .timeline-container[data-app=notifications] .timeline-header:after, .timeline-container[data-app=search] .timeline-header:after, .timeline-container[data-app=trending] .timeline-header:after, .timeline-container[data-app=bookmarks] .timeline-header:after, .timeline-container[data-app=settings] .timeline-header:after, .timeline-container[data-app=chat] .timeline-header:after, .timeline-container[data-app=conversation] .timeline-header:after, body.sptbl-app-pods .timeline-container .timeline-header:after, .timeline-container .timeline-header.half-rounded:after {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-width: 1px 1px 0px 1px;
}

.stickyhead .timeline-container[data-app=homepage] .timeline-header:after, .stickyhead .timeline-container[data-app=profile] .timeline-header:after, .stickyhead .timeline-container[data-app=search] .timeline-header:after, .stickyhead .timeline-container[data-app=trending] .timeline-header:after, .stickyhead .timeline-container[data-app=chat] .timeline-header:after, .stickyhead .timeline-container[data-app=settings] .timeline-header:after, .stickyhead .timeline-container[data-app=bookmarks] .timeline-header:after, .stickyhead .timeline-container .timeline-header.half-rounded:after {
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  border-width: 1px;
}

.quote-hint {
  color: var(--sptbl-primary-text-color);
}

.m-postBtn {
  position: fixed;
  right: 15px;
  bottom: 95px;
  background: var(--sptbl-primary-button-color) !important;
  color: #fff;
  border: 0;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fcfcfc;
  opacity: 1;
  transition: all .3s;
  box-shadow: 0 14px 26px -12px rgba(85, 150, 230, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(85, 150, 230, .2) !important;
  z-index: 4000;
}

.m-postBtn svg {
  fill: #fff;
  width: 20px;
  height: 20px;
}

/* 24x20 is the box icons/spout-logo.svg is pixel-snapped for; change one and
   recompute the other. */
.m-postBtn.spout-floating-button svg {
  width: 24px;
}

.error_v2 {
  position: relative;
}

.error_v2 .ev_back {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100%;
}

.error_v2 .ev_back img {
  width: 100%;
}

.error_v2 .ev_front {
  position: relative;
  z-index: 2;
  text-align: center;
  top: -20px;
}

.error_v2 .ev_front img {
  width: 80%;
}

.error_section_v2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: var(--sptbl-primary-bg-color);
}

.error_wrapper_v2 {
  max-width: 640px;
  margin: 0 auto;
}

.thread-data {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.welcome-page.shapeDisabled:after, .welcome-page.shapeDisabled:before {
  display: none;
}

.welcome-page-v2 .welcome-title span {
  font-size: 17px;
  color: #81b0ce;
}

.welcome-page-v2 .welcome-text span {
  font-size: 0.9375rem;
}

.welcome-page-v2 .welcome-page__lp {
  padding-right: 0 !important;
  min-height: auto !important;
}

.welcome-page-v2 .welcome-page__lp-body {
  padding-top: 20px !important;
}

.welcome-page-v2 .welcome-page__lp-body img {
  width: 100% !important;
}

.welcome-page-v2 .welcome-page__rp-inner {
  justify-content: center !important;
}

.welcome-page-v2 .welcome-page__lp-header {
  margin-bottom: 20px !important;
}

@media (max-width: 767.98px) {
  body.sptbl-app-start div.welcome-page.welcome-page-v2 {
    background: transparent !important;
  }
  .user-list-item__data .user-list-item__avatar {
    margin-top: 6px !important;
  }
}
.pageloader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: -webkit-opacity .35s ease-out;
  transition: opacity .35s ease-out;
  will-change: opacity;
  pointer-events: none;
}

.pageloader.is-active {
  opacity: 1;
}

.pageloader::after, .pageloader::before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: 100%;
  content: "";
  z-index: 999999;
}

.pageloader::after {
  margin-top: -100px;
  margin-left: -100px;
  width: 200px;
  height: 200px;
  background-color: rgba(61, 112, 178, .5);
  border: 3px solid rgba(61, 112, 178, .75);
  animation: page-loader-inner 1.5s infinite ease-out;
}

.pageloader::before {
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background-color: #3d70b2;
  animation: page-loader-outer 1.5s infinite ease-in;
}

@keyframes page-loader-inner {
  0%, 40% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes page-loader-outer {
  0% {
    transform: scale(1);
  }
  100%, 40% {
    transform: scale(0);
    opacity: 0;
  }
}
svg {
  height: 20px;
  width: 20px;
}

.icon--more-vertical {
  height: 28px;
  width: 28px;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Status alerts. These were Bootstrap 4's literals (#155724 on #d4edda etc.)
   with no theme override anywhere, so a success or error banner rendered as a
   pale pastel block on Night and Dawn regardless of skin.

   The fill is an rgba of the status accent rather than a flat hex, and the ink
   is the page text colour rather than the accent:

   - rgba composites correctly over EVERY surface an alert actually appears on
     (the settings card, a modal, the timeline, the page), so one value covers
     all three themes without three overrides. Same reasoning already recorded
     for --sptbl-leave-chat-btn-tint in skins/_skins.scss.
   - the accent CANNOT be the text. Measured against its own 12% tint it is
     1.99:1 (success) / 2.90:1 (danger) / 1.81:1 (warning) on Day - the classic
     bright-green-on-pale-green that is unreadable. The page ink measures
     7.80:1 to 13.66:1 across every theme/surface combination, so the tint and
     border carry the meaning and the text stays legible.

   Channel values are the literal rgb of --sptbl-success-color (#35c85f),
   --sptbl-danger-color (#ff4265) and --sptbl-warning-color (#ffa500). Those
   three are :root constants that do not vary per theme; if one is ever
   retuned, update the matching rgba here too. */
.alert-success {
  color: var(--sptbl-primary-text-color);
  background-color: rgba(53, 200, 95, 0.12);
  border-color: rgba(53, 200, 95, 0.38);
}

.alert-danger {
  color: var(--sptbl-primary-text-color);
  background-color: rgba(255, 66, 101, 0.12);
  border-color: rgba(255, 66, 101, 0.38);
}

.btn-custom.btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

/*--------------- 2fa ---------------- */
.tfa-card {
  border: 1px solid var(--sptbl-primary-border-color);
  border-radius: var(--sptbl-field-border-radius);
  /* Was the literal `white` - the two-factor card was the last unskinned
     surface in settings, rendering as a white block on Night and Dawn. Same
     card token the rest of the settings column uses. */
  background: var(--sptbl-list-item-bg-color);
  /* ...and the ink. Without this the whole card inherited Bootstrap's
     `body { color: #212529 }` (css-libs.css), which measured 1.04:1 on Night
     and 1.03:1 on Dawn - the text was simply invisible. Even on Day it was
     wrong rather than broken: #212529 is Bootstrap's near-black, not the
     app's #0d4769, so this card read as a different typeface family from
     every other settings screen. */
  color: var(--sptbl-primary-text-color);
  margin-top: 20px;
  overflow: hidden;
}

.tfa-card-content {
  padding: calc(var(--sptbl-primary-offset-size) * 1.6);
}

/* Type scale. The h2 was rendering at Bootstrap's default 26.96px, roughly
   double the app's heading size, with default UA list bullets and indent. */
.tfa-step__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--sptbl-primary-text-color);
}

.tfa-step__lead {
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--sptbl-secondary-text-color);
}

.tfa-list {
  list-style: none;
  counter-reset: tfa;
  margin: 0 0 20px;
  padding: 0;
}

.tfa-list li {
  counter-increment: tfa;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Numbered chips instead of UA bullets - this is a sequence of actions. */
.tfa-list li:before {
  content: counter(tfa);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sptbl-primary-color);
  color: var(--sptbl-rating-text-color);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* White plate on every theme: the QR PNG is black modules on white and
   scanners need that polarity, so it must NOT pick up the card surface.
   The padding is the spec's quiet zone, which a bare <img> loses. */
.tfa-qr {
  display: inline-block;
  background: #ffffff;
  padding: 12px;
  border-radius: var(--sptbl-field-border-radius);
  line-height: 0;
  margin-bottom: 20px;
}

.tfa-step__hint {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0 0 4px;
  color: var(--sptbl-secondary-text-color);
}

/* The shared secret was inline body text - hard to read and hard to select.
   Monospace with letter-spacing makes character-by-character transcription
   into an authenticator app practical. */
.tfa-secret {
  display: block;
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--sptbl-input-bg-color);
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
  border-radius: var(--sptbl-field-border-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  word-break: break-all;
  user-select: all;
}

.tfa-step--center {
  text-align: center;
}

/* The backup code is shown exactly once and has to be transcribed, so it gets
   more presence than the setup secret: bigger, centred, wider tracking. */
.tfa-secret--lg {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-align: center;
  padding: 18px 14px;
  /* letter-spacing adds a trailing gap after the last glyph, which throws the
     centring off by half a character without this. */
  text-indent: 0.26em;
}

.tfa-warning {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.tfa-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--sptbl-primary-border-color);
}

.tfa-card__footer {
  justify-content: space-between;
  align-items: center;
  /* Was --sptbl-input-bg-color: the FIELD fill, which on Dawn and Night is a
     LIGHT colour, so the footer read as a bright band welded to the bottom of
     a dark card. A footer is not a field; it takes the page tone with a
     divider, like every other card footer in the app. */
  background: var(--sptbl-primary-bg-color);
  border-top: 1px solid var(--sptbl-primary-border-color);
  padding: calc(var(--sptbl-primary-offset-size) * 0.8) var(--sptbl-primary-offset-size);
}

.tfa-steps {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tfa-steps__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sptbl-secondary-border-color);
  transition: background-color .2s ease-in-out, width .2s ease-in-out;
}

.tfa-steps__dot.is-active {
  width: 22px;
  border-radius: 10em;
  background: var(--sptbl-primary-color);
}

.form__group--error.form__pincode > input {
  background-color: #eb3b3b;
}

.form__group--error.form__pincode > input[disabled] {
  background-color: #eb3b3b;
  color: #fff;
  opacity: 1;
}

.form__group--success.form__pincode > input {
  background-color: #32c832;
}

.form__group--success.form__pincode > input[disabled] {
  background-color: #32c832;
  color: #fff;
  opacity: 1;
}

.form__pincode {
  display: block;
  width: 100%;
  margin: 10px auto 20px;
  padding: 0;
}

.form__pincode:before, .form__pincode:after {
  display: table;
  content: '';
}

.form__pincode:after {
  clear: both;
}

.form__pincode > label {
  display: block;
  text-align: center;
  margin: 10px 0;
}

.form__pincode > input[type=number] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.form__pincode > input {
  display: inline-block;
  /* float: left; */
  width: 15%;
  height: 50px;
  line-height: 48px;
  text-align: center;
  font-size: 2em;
  /* Duplicates of PinCodeInput.vue's scoped styles, and they were the same
     hardcoded #181819 on an rgba(0,0,0,0.3) underline - invisible on Night
     and Dawn, whose card surface is dark. Fixing only the scoped copy left
     this global one still winning on the 2FA screen, where the inputs sit
     inside .form__pincode. */
  color: var(--sptbl-primary-text-color);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--sptbl-secondary-border-color);
  border-radius: var(--sptbl-secondary-border-radius) var(--sptbl-secondary-border-radius) 0 0;
  transition: background-color 0.3s, color 0.3s, opacity 0.3s;
  cursor: default;
  user-select: none;
  margin: 0;
  margin-top: 10px;
  margin-right: 2%;
  padding: 0;
}

.form__pincode > input:focus {
  outline: 0;
  border-color: var(--sptbl-primary-color, #64a0e4);
  box-shadow: 0 2px 0 0 var(--sptbl-primary-color, #64a0e4);
  -webkit-tap-highlight-color: transparent;
}

.form__pincode > input:last-child {
  margin-right: 0;
}

.form__pincode > input[disabled] {
  background: var(--sptbl-input-bg-color);
  opacity: 0.65;
}

@keyframes border-pulsate {
  0% {
    border-color: var(--sptbl-primary-color, #64a0e4);
  }
  50% {
    border-color: var(--sptbl-secondary-border-color);
  }
  100% {
    border-color: var(--sptbl-primary-color, #64a0e4);
  }
}
/** tablet layout **/
/* The tablet ceiling is 1254.98px, not 1179.98px. The logged-out desktop row
   is 320 + 600 + 320 = 1240px, plus Chrome's 15px scrollbar, and below that it
   overflowed with the left column pushed off-screen. The logged-in row
   (260 + 600 + 320 = 1180px) fits sooner, but both switch here so the two
   states change layout at the same width. `.sidebar-with-login` and
   `.sptbl-modal-holder` (_utilities.scss) switch at this width too. */
@media (min-width: 576px) and (max-width: 1254.98px) {
  .right-sb-container {
    display: none;
  }
  .sidebar__nav-item .text {
    display: none;
  }
  body .secondary-logo {
    display: block !important;
  }
  .primary-logo {
    display: none;
  }
  body main.main-content-container div.main-content-container-inner div.left-sb-container.left-sb-container {
    width: 100px;
    min-width: 100px;
    flex-basis: 100px;
    text-align: center;
  }
  .left-sb-container .sidebar__nav-item {
    justify-content: center;
  }
  .sidebar__button .text {
    display: none;
  }
  .sidebar__button .btn-icon {
    margin-right: 0 !important;
  }
  body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item span.info-indicators {
    position: absolute;
    top: 5px;
    right: 0;
    margin-left: 0;
  }
  body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group .sidebar__nav-item {
    position: relative;
  }
}
@media (min-width: 980.98px) and (max-width: 1254.98px) {
  body main.main-content-container div.main-content-container-inner div.right-sb-container {
    width: 280px;
    min-width: 280px;
    flex: unset;
  }
  .right-sb-container {
    display: block;
  }
}
[v-cloak] {
  display: none;
}

.cog-icon svg {
  fill: #ff4a6c;
}

.modal-body .user-profile {
  margin: -15px -20px;
}

.form-edit-profile-modal {
  margin-top: 70px;
}

.text-center {
  text-align: center;
}

.inner-wrapper-sticky {
  width: inherit !important;
}

.modal-header__inner {
  position: relative;
}

.modal-header div.timeline-bs-notifs__item {
  display: block;
  border-radius: 15px;
  margin-bottom: 20px;
  width: 100%;
  padding: var(--sptbl-primary-offset-size);
  line-height: 1;
  color: #ffffff;
  font-size: 1rem;
  text-align: center;
  animation-duration: 0.5s;
}

.modal-header div.timeline-bs-notifs__item.primary {
  background-color: var(--sptbl-primary-color);
}

.modal-header div.timeline-bs-notifs__item.danger {
  background-color: var(--sptbl-danger-color);
}

/* ===================================================== */
/* Register / auth pages - hand-appended section reverse-ported verbatim from
   live master.styles.css lines 13901-14750. Declaration values are wrapped
   in interpolation so dart-sass emits them byte-for-byte (leading-dot
   decimals, duplicate fallbacks, rgba(#hex, a) keyframe values, etc.).
   Do not "clean up" values here. */
.sptbl-container {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--sptbl-navbar-text-color);
}

.sptbl-container h1, .sptbl-container h2, .sptbl-container h3, .sptbl-container h4, .sptbl-container h5, .sptbl-container h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
  color: inherit;
}

.sptbl-container input::-webkit-input-placeholder, .sptbl-container .form-control::-webkit-input-placeholder {
  color: var(--sptbl-navbar-text-color);
}

.sptbl-container input:-moz-placeholder, .sptbl-container .form-control:-moz-placeholder {
  color: var(--sptbl-navbar-text-color);
}

.sptbl-container input::-moz-placeholder, .sptbl-container .form-control::-moz-placeholder {
  color: var(--sptbl-navbar-text-color);
}

.sptbl-container input:-ms-input-placeholder, .sptbl-container .form-control:-ms-input-placeholder {
  color: var(--sptbl-navbar-text-color);
}

.sptbl-container button, .sptbl-container .btn {
  border: 0;
  background: transparent;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.sptbl-container-wrap {
  min-height: 100vh;
  padding: 100px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sptbl-container-wrap .sptbl-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
  background: var(--sptbl-sidebar-nav-group-bg-color);
}

.sptbl-container-wrap .sptbl-container .sptbl-content, .sptbl-container-wrap .sptbl-container .sptbl-bg {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  padding: 50px 50px;
}

.sptbl-content .logo {
  margin-bottom: 30px;
}

.sptbl-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sptbl-register-headline-text-color);
  font-family: "Roboto", sans-serif;
  margin-bottom: 10px;
}

.sptbl-content h3 svg {
  fill: var(--sptbl-register-headline-text-color);
}

.sptbl-content p {
  font-size: .95rem;
  color: var(--sptbl-secondary-text-color);
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  margin-bottom: 20px;
}

.sptbl-content .steps {
  margin-bottom: 30px;
}

.sptbl-content .steps .step {
  display: inline-block;
  height: 12px;
  width: 12px;
  border-radius: 6px;
  margin-right: 5px;
  background: #d9d9d9;
}

.sptbl-content .steps .step.processing {
  width: 25px;
  background: #22d187;
}

.sptbl-content form .form-group {
  position: relative;
  margin-bottom: 25px;
}

.sptbl-content form .form-group.check-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 15px;
}

.sptbl-content form .form-group.check-flex .custom-checkbox {
  margin-bottom: 10px;
}

.sptbl-content form .form-group.check-flex .custom-checkbox .custom-control-input {
  height: 18px;
  width: 18px;
  border-radius: 3px;
  border: 3px solid rgba(0, 0, 0, 0.08);
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.sptbl-content form .form-group.check-flex .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background: #0a8bfe;
}

.sptbl-content form .form-group.check-flex .custom-checkbox .custom-control-label {
  width: auto;
  text-align: left;
  position: static;
  top: auto;
  left: auto;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  padding-left: 30px;
  cursor: default;
}

.sptbl-content form .form-group.check-flex .custom-checkbox .custom-control-label:before {
  top: 2px;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 3px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}

.sptbl-content form .form-group.check-flex .custom-checkbox .custom-control-label:after {
  top: 2px;
  left: 0;
  height: 18px;
  width: 18px;
}

.sptbl-content form .form-group.check-flex .custom-checkbox .custom-control-label a {
  color: #0a8bfe;
}

.sptbl-content form .form-group.check-flex a {
  color: var(--sptbl-navbar-text-color);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-bottom: 10px;
}

.sptbl-content form .form-group.check-flex a:hover {
  color: #0a8bfe;
}

.sptbl-content form .form-group.pass-block .pass-toggler-btn {
  position: absolute;
  top: 29px;
  right: 15px;
  font-size: 1.8rem;
}

.sptbl-content form .form-group.pass-block .pass-toggler-btn i {
  cursor: pointer;
  color: var(--sptbl-navbar-text-color);
}

.sptbl-content form .form-group.pass-block .pass-toggler-btn #eye-slash {
  display: none;
}

.sptbl-content form .form-group.pass-block .error-block {
  position: absolute;
  top: 9px;
  right: 15px;
}

.sptbl-content form .form-group.pass-block .error-block:hover .validation-requirement {
  visibility: visible;
  opacity: 1;
}

.sptbl-content form .form-group.pass-block .error-block .icon.incomplete-pass i {
  color: #fa7474;
}

.sptbl-content form .form-group.pass-block .error-block .icon i {
  font-size: 1.4rem;
}

.sptbl-content form .form-group.pass-block .error-block .validation-requirement {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  z-index: 9;
  position: absolute;
  top: -10px;
  left: calc(100% + 10px);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);
  min-width: 260px;
  border-radius: 5px;
}

.sptbl-content form .form-group.pass-block .error-block .validation-requirement:before {
  position: absolute;
  top: 10px;
  left: -8px;
  content: '';
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  -webkit-box-shadow: 0px -5px -30px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px -5px -30px 0px rgba(0, 0, 0, 0.1);
  border-right: 8px solid #ffffff;
}

.sptbl-content form .form-group.pass-block .error-block .validation-requirement ul {
  padding: 20px 30px;
  margin: 0;
  list-style: none;
}

.sptbl-content form .form-group.pass-block .error-block .validation-requirement ul li {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--sptbl-navbar-text-color);
  font-family: "Roboto", sans-serif;
  position: relative;
  padding-left: 25px;
}

.sptbl-content form .form-group.pass-block .error-block .validation-requirement ul li + li {
  margin-top: 5px;
}

.sptbl-content form .form-group.pass-block .error-block .validation-requirement ul li.incomplete-item:before {
  color: #d3d3d3;
  content: url(../images/check-grey.svg);
}

.sptbl-content form .form-group.pass-block .error-block .validation-requirement ul li:before {
  content: url(../images/check-green.svg);
  margin-right: 10px;
  height: 18px;
  width: 18px;
  position: absolute;
  top: 3px;
  left: 0;
}

.sptbl-content form .form-group .form-control {
  height: 65px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 25px 15px 0;
  font-size: .9rem;
  font-weight: 400;
  color: #546274;
  outline: none;
  box-shadow: none;
  background: white;
}

.sptbl-content .terms span {
  padding-bottom: 5px;
}

.sptbl-content form .form-group .form-control::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #b2becc;
}

.sptbl-content form .form-group .form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: #b2becc;
}

.sptbl-content form .form-group .form-control:-ms-input-placeholder {
  /* IE 10+ */
  color: #b2becc;
}

.sptbl-content form .form-group .form-control:-moz-placeholder {
  /* Firefox 18- */
  color: #b2becc;
}

.sptbl-content form .form-group label:not(.form-check-label) {
  top: 7px;
  font-size: .75rem;
  color: #1c2437;
  position: absolute;
  margin-bottom: 0;
  left: 17px;
  z-index: 2;
  font-weight: 400;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  text-transform: uppercase;
  line-height: 1.85;
}

.sptbl-content form .form-group label.form-check-label {
  line-height: 1;
}

.sptbl-content form .terms {
  margin-top: 20px;
  font-size: 1.3rem;
  font-family: "Roboto", sans-serif;
  display: block;
  font-weight: 400;
  color: var(--sptbl-navbar-text-color);
  line-height: 1.8;
}

.sptbl-content form .terms span {
  display: block;
}

.sptbl-content form .terms a {
  color: #0a8bfe;
}

.sptbl-content form .btn {
  height: 65px;
  width: 200px;
  text-align: center;
  display: block;
  background: #0a8bfe;
  font-size: .95rem;
  font-weight: 700;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  border-radius: 5px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.sptbl-content .another-option {
  font-size: 1.3rem;
  font-family: "Roboto", sans-serif;
  display: block;
  margin-top: 40px;
  font-weight: 400;
  color: #0a8bfe;
}

.sptbl-content .alternet-access.mt40 {
  margin-top: 40px;
}

.sptbl-content .alternet-access p {
  font-size: .9rem;
  color: #546274;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  margin-bottom: 0;
}

.sptbl-content .alternet-access p a {
  color: #0a8bfe;
}

.forget-pass {
  font-size: .9rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #546274;
  margin-top: 40px;
}

.forget-pass:hover {
  color: #0a8bfe;
}

.forget-pass + .another-option {
  margin-top: 0;
}

.sptbl-bg.bg-1 {
  background: url(../img/register/bg/theme-10-bg-1.jpg) no-repeat center bottom;
  background-size: cover;
}

.sptbl-bg.bg-2 {
  background: url(../img/register/bg/theme-10-bg-2.jpg) no-repeat center bottom;
  background-size: cover;
}

.sptbl-bg.bg-3 {
  background: url(../img/register/bg/theme-10-bg-3.jpg) no-repeat center bottom;
  background-size: cover;
}

.sptbl-bg.bg-4 {
  background: url(../img/register/bg/theme-10-bg-4.jpg) no-repeat center bottom;
  background-size: cover;
}

.sptbl-container.complete-notification {
  display: block;
  text-align: center;
}

.sptbl-container.complete-notification h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1c2437;
  font-family: "Roboto", sans-serif;
  margin-top: 35px;
  margin-bottom: 10px;
}

.sptbl-container.complete-notification p {
  color: #546274;
  font-size: .9rem;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}

.sptbl-container.complete-notification .btn {
  width: 200px;
  text-align: center;
  background: #0a8bfe;
  color: #ffffff;
  font-size: 1rem;
  height: 65px;
  padding: 0;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  border-radius: 0;
  border: 0;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  line-height: 65px;
  border-radius: 3px;
  margin-top: 40px;
}

@media all and (max-width: 991px) {
  .sptbl-container-wrap {
    min-height: auto;
    display: block;
  }
  .sptbl-container-wrap .sptbl-container {
    display: block;
  }
  .sptbl-container-wrap .sptbl-container .sptbl-bg {
    display: none;
  }
}
.sptbl-registeration-form .sptbl-content {
  position: relative;
}

.sptbl-registeration-form div.timeline-bs-notifs {
  position: static;
}

.sptbl-registeration-form .sptbl-registeration-form-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media all and (max-width: 575px) {
  .sptbl-container-wrap .sptbl-container .sptbl-content, .sptbl-container-wrap .sptbl-container .sptbl-form {
    padding: 30px;
  }
}
@media (min-width: 576px) {
  .sptbl-registeration-form .sptbl-registeration-form-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .sptbl-registeration-form .sptbl-registeration-form-container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .sptbl-registeration-form .sptbl-registeration-form-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .sptbl-registeration-form .sptbl-registeration-form-container {
    max-width: 1140px;
  }
}
.sptbl-registeration-form .row {
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

.sptbl-registeration-form .vue-dropdown-select {
  padding-top: 20px;
}

.sptbl-registeration-form div.user-list-item {
  margin-top: 10px !important;
  transition: all .27s ease-in-out;
  padding: var(--sptbl-primary-offset-size);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
  background-color: var(--sptbl-suggested-bg-color);
  padding-bottom: 10px;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__avatar {
  width: var(--sptbl-primary-avatar-size);
  flex-shrink: 0;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__avatar a div.user-avatar {
  width: var(--sptbl-primary-avatar-size);
  height: var(--sptbl-primary-avatar-size);
  border-radius: 100%;
  overflow: hidden;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__avatar a div.user-avatar img {
  width: 100%;
  height: 100%;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data {
  flex: 1;
  padding-left: var(--sptbl-primary-offset-size);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body {
  flex: 1;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline {
  display: flex;
  justify-content: space-between;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left {
  flex: 1;
  margin-right: var(--sptbl-primary-offset-size);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a {
  text-decoration: none;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span {
  font-size: var(--sptbl-primary-name-size);
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:last-child {
  text-transform: lowercase;
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:hover, .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:focus, .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__name a > span:active {
  color: var(--sptbl-primary-link-color);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  line-height: 0px;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.icon svg {
  width: 100%;
  height: 100%;
  fill: var(--sptbl-secondary-text-color);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.text {
  padding: 0px 5px;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--sptbl-secondary-text-color);
}

@media (max-width: 767.98px) {
  .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.text {
    font-size: 0.8125rem;
  }
}
.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.text a {
  color: var(--sptbl-primary-link-color);
  text-decoration: underline;
  font-size: inherit;
  line-height: inherit;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.banner {
  height: 15px;
  line-height: 1;
  overflow: hidden;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-left div.user-data__country span.banner svg {
  height: 100%;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 100%;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon svg {
  width: 26px;
  height: 26px;
  fill: var(--sptbl-secondary-text-color);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon::before, .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder a.icon::after {
  display: none;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:hover a.icon, .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:active a.icon, .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:focus a.icon {
  background: var(--sptbl-secondary-bg-color);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:hover a.icon svg, .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:active a.icon svg, .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__body-topline div.flex-item-right div.user-data__ctrls div.dropdown-menu-holder:focus a.icon svg {
  fill: var(--sptbl-primary-color);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats {
  margin-top: 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats {
    margin-top: 12px;
  }
}
.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats div.stats-item {
  margin-right: var(--sptbl-primary-offset-size);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats div.stats-item span {
  font-size: 1rem;
  color: var(--sptbl-secondary-text-color);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats div.stats-item span:first-child {
  font-weight: 700;
  color: var(--sptbl-primary-text-color);
}

@media (max-width: 767.98px) {
  .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__stats div.stats-item span {
    font-size: 0.875rem;
  }
}
.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__about {
  color: var(--sptbl-primary-text-color);
  font-size: 0.9375rem;
  margin-top: 12px;
  line-height: 1.4;
  overflow: hidden;
  max-width: 314px;
  word-wrap: break-word;
}

@media (max-width: 767.98px) {
  .sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__about {
    font-size: 0.8125rem;
    margin-top: 8px;
  }
}
.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common {
  margin-top: 20px;
  overflow: hidden;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__title {
  font-size: 0.875rem;
  color: var(--sptbl-primary-color);
  margin-bottom: 5px;
  font-weight: 500;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 7px;
  align-items: center;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item {
  flex-basis: 32px;
  flex-shrink: 0;
  margin-left: -7px;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item a {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  text-decoration: none;
  border: 1px solid var(--sptbl-primary-border-color);
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item a img {
  width: 100%;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item.common-follows__item_total {
  margin-left: 10px;
}

.sptbl-registeration-form div.user-list-item div.user-list-item__data div.user-data div.user-data__body div.user-data__common div.common-follows div.common-follows__list div.common-follows__item.common-follows__item_total span {
  font-size: 1rem;
  color: var(--sptbl-primary-color);
  line-height: 1;
  font-weight: 700;
}

/* ===================================================== */
/* Utilities and small components - hand-appended section reverse-ported verbatim from
  live master.styles.css lines 14752-16472. Declaration values are wrapped
  in interpolation so dart-sass emits them byte-for-byte (leading-dot
  decimals, duplicate fallbacks, rgba(#hex, a) keyframe values, etc.).
  Do not "clean up" values here. */
.replies-buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.replies-buttons > * + * {
  margin-left: 20px;
}

.thread-number {
  vertical-align: bottom;
  margin-bottom: 15px;
  color: var(--sptbl-primary-text-color);
}

.post-spout-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.post-spout-footer .form-check {
  width: 100%;
}

.post-spout-footer .label {
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--sptbl-primary-color);
  margin-left: 8px;
  font-weight: 600;
}

.spoutcard-thread {
  overflow: visible !important;
}

.form-tag {
  background-color: var(--sptbl-primary-color);
  color: var(--sptbl-rating-text-color);
  border-radius: 10px;
  padding: 5px 10px;
  display: inline-block;
}

.form-tag svg {
  width: 15px;
  fill: red;
  cursor: pointer;
}

/* Sibling of .alert-success / .alert-danger (apps/overrides/_misc_overrides.scss)
   - see the rationale recorded there. Same defect: Bootstrap 4 literals with no
   theme override, so this rendered as a pale yellow block on Night and Dawn.
   rgb channels are --sptbl-warning-color (#ffa500). */
.alert-warning {
  color: var(--sptbl-primary-text-color);
  background-color: rgba(255, 165, 0, 0.12);
  border-color: rgba(255, 165, 0, 0.38);
}

.underline {
  text-decoration: underline;
}

.pointer {
  cursor: pointer;
}

.welcome-page__row {
  padding: 0 25px;
}

.welcome-page__lp-body {
  display: none;
}

@media (min-width: 1180px) {
  .welcome-page__row {
    padding: 0;
  }
  .welcome-page__lp-body {
    display: block;
  }
}
.sidebar-with-login {
  display: none;
}

/* Swaps at the tablet ceiling (apps/overrides/_misc_overrides.scss): below it
   the sign-in card's 320px column does not fit beside the timeline and the
   right sidebar. */
@media (min-width: 1255px) {
  .sidebar-with-login {
    display: block;
  }
  .tablet-sidebar {
    display: none;
  }
}
.dark-logo {
  display: none;
}

body[data-bg=dark] .light-logo, body[data-bg=dawn] .light-logo, body[data-bg=midnight] .light-logo {
  display: none;
}

body[data-bg=dark] .dark-logo, body[data-bg=dawn] .dark-logo, body[data-bg=midnight] .dark-logo {
  display: block;
}

@media (max-width: 1179.98px) {
  .sptbl-container-wrap {
    padding: 15px 0;
  }
}
#chat_websocket_error {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

@media (min-width: 768px) {
  .m-postBtn {
    display: none;
  }
}
.sticky-toggle {
  cursor: pointer;
  fill: var(--sptbl-secondary-text-color) !important;
}

.sticky-toggle:hover {
  opacity: .8;
}

.sticky-toggle.active {
  fill: var(--sptbl-primary-color) !important;
}

.sticky-header {
  background-color: var(--sptbl-primary-bg-color);
  position: sticky;
  /* `position: sticky` does NOTHING without an inset - the spec needs at least
     one of top/right/bottom/left to build the sticky constraint rectangle.
     While this was commented out the homepage paperclip toggle applied the
     class and lit the icon, but the spout box / word cloud still scrolled away.

     70px is not arbitrary: .timeline-header is `position: sticky; top: 10px`
     (apps/common/parts/_header.scss:5) and its .timeline-header__botline is
     60px tall, so the header's stuck bottom edge sits at exactly 10 + 60 =
     70px at every breakpoint. Measured, not guessed - this lands the block
     flush under the header with a 0px gap. */
  top: 70px;
  z-index: 999;
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  overflow: hidden;
}

.spout-splashback {
  font-size: 0.6875rem;
  color: var(--sptbl-splashback-color);
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
}

.spout-splashback svg {
  fill: var(--sptbl-splashback-color);
}

.spout-news {
  font-size: 0.6875rem;
  color: var(--sptbl-news-color);
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
}

.spout-news svg {
  fill: var(--sptbl-news-color);
}

.advanced-search {
  padding-top: 10px;
}

.advanced-search a {
  color: var(--sptbl-secondary-text-color);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.advanced-search input {
  padding: 0 10px !important;
}

.advanced-search label {
  margin-top: 10px;
  display: block;
  flex: 1;
  margin-right: 3px !important;
  font-size: 0.625rem;
  color: var(--sptbl-secondary-text-color);
  width: 33.33333333%;
}

.advanced-search input:last-child {
  margin-right: 0 !important;
}

emoji-picker {
  --num-columns: 8;
  --background: var(--sptbl-primary-bg-color);
  --border-color: var(--sptbl-primary-border-color);
  width: 100%;
}

#trending-topics-cloud {
  width: 100%;
  height: 200px;
  padding: 2px;
  overflow: hidden;
}

#trending-topics-cloud span:hover {
  opacity: .7;
  cursor: pointer;
}

.mvp-player-wrap img.mvp-media {
  width: auto !important;
}

input.font-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 10px;
  background: var(--sptbl-secondary-border-color);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.font-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sptbl-primary-button-color);
  cursor: pointer;
}

.font-slider::-moz-range-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sptbl-primary-button-color);
  cursor: pointer;
}

.btn-custom.main-inline.btn-xs.btn-custom-xs {
  font-size: 10px;
  /* don't change to rem, button will be too big */
  padding: 5px 10px;
}

.text-right {
  text-align: right;
}

.mvp-player-loader {
  background-color: var(--sptbl-primary-color);
}

@media (max-width: 400px) {
  emoji-picker {
    --emoji-size: 18px;
    --category-emoji-padding: 5px;
  }
}
.post-action-button-bordered div {
  border: 1px solid var(--sptbl-secondary-border-color);
  border-radius: 10px;
  font-size: 0.875rem;
  text-transform: uppercase;
  padding: 3px 10px;
  color: var(--sptbl-action-buttons-svg-color);
}

.post-action-button-bordered span {
  vertical-align: text-bottom;
}

.post-action-button-bordered div svg {
  fill: var(--sptbl-action-buttons-svg-color);
}

.post-action-button-bordered div:hover {
  background-color: var(--sptbl-primary-bg-color);
}

div.news_category {
  margin-top: 0px;
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
  font-size: 0.9375rem;
}

.settings-paragraph {
  color: var(--sptbl-secondary-text-color);
  font-weight: normal;
  font-size: 0.9375rem;
}

.search-selector {
  border: 2px solid transparent;
  background: var(--sptbl-input-bg-color);
  border-radius: var(--sptbl-tertiary-border-radius);
  padding: 0px 10px;
  margin: 0px;
  height: 48px;
  display: block;
  width: 100%;
  font-size: 0.9375rem;
  color: var(--sptbl-input-text-color, var(--sptbl-primary-text-color));
  width: 55%;
  margin-left: 3px;
}

@media (max-width: 767.98px) {
  .search-selector {
    height: 42px;
  }
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.post-action-v3 .post-action-button {
  padding: 0;
  margin: 0;
  margin-bottom: 6px;
}

.group-chat-users-count {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--sptbl-primary-color);
  font-weight: 600;
  margin-left: 15px;
  width: 70px;
  justify-content: flex-end;
}

.group-chat-users-count svg {
  fill: var(--sptbl-primary-color);
  margin-left: 10px;
}

.chats-options-buttons a {
  fill: var(--sptbl-primary-color);
  margin-left: 10px;
}

.chat_user_names {
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
}

.chat-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  margin-top: 7px;
  margin-right: 10px;
}

.chat-message-username {
  font-size: .8rem;
  color: var(--sptbl-secondary-text-color);
}

.conversation-messages__item.right .chat-message {
  flex-direction: row-reverse;
}

.conversation-messages__item.right .chat-message .chat-message-avatar {
  margin-left: 10px;
  margin-right: 0;
}

#chat-group-modal .modal-body .form-group {
  margin-bottom: 15px;
}

#chat-group-modal .modal-body .form-group label {
  color: var(--sptbl-secondary-text-color);
  font-weight: 500;
  font-size: .9rem;
}

#vue-conversation-app.group-chat .lp__avatar {
  overflow: visible;
}

#vue-conversation-app.group-chat .lp__avatar .group-chat-users-title {
  overflow: hidden;
}

/* The participants modal used to render a flat run of member divs, which this
   laid out as a two-column grid at >=676px, and styled through the generic
   `.user-name-holder__name` / `.user-list-item__avatar` classes.
   `ConversationPage.vue` now owns that modal's markup (`.participants`, a
   single wrapper) and styles it in its own scoped block. Left as a grid, the
   wrapper became one grid item and occupied a single column, so the panel
   rendered at HALF the modal width. Nothing else targets these selectors. */
body.sptbl-app-chat .m-postBtn.group-chat-floating-btn, body.sptbl-app-pods .pods-floating-button, body.sptbl-app-bundles .bundles-floating-button {
  display: block !important;
}

#vue-conversation-app.group-chat .lp__avatar .group-chat-users-title {
  width: 70px;
}

@media (min-width: 768px) {
  body.sptbl-app-chat .m-postBtn.group-chat-floating-btn, body.sptbl-app-pods .pods-floating-button, body.sptbl-app-bundles .bundles-floating-button {
    display: none !important;
  }
  #vue-conversation-app.group-chat .lp__avatar .group-chat-users-title {
    width: 100%;
  }
}
.read-summary-btn {
  background-color: var(--sptbl-thread-summary-button);
  color: var(--sptbl-summary-text-color);
  font-weight: 500;
  font-size: 0.6875rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 1px 5px 1px 5px;
  display: inline-block;
  line-height: 1;
}

.read-summary-btn.profile-summary-btn {
  background-color: var(--sptbl-a-rating-bg-color);
}

#thread-summary-modal .modal-body {
  color: var(--sptbl-primary-text-color);
}

#thread-summary-modal .modal-body img {
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

#thread-summary-modal .modal-body .loading {
  text-align: center;
  min-height: 159px;
}

.quoted-spout {
  margin-top: 15px;
  margin-bottom: 0;
}

/* Leave-conversation chip on each chat row.
   A soft tinted chip instead of the old hard outline, which drew a full
   strength orange border on EVERY row and read as an error badge next to
   the card border introduced alongside the pod-style list. Resting state is
   a low-opacity wash of the accent plus a LIGHT translucent edge of the same
   hue, so the chip has a defined shape without shouting; hover commits to
   the solid accent for both fill and border. Icon + label sit on one line
   and the chip never wraps. */
.chat-item-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  white-space: nowrap;
  line-height: 1.2;
  background-color: var(--sptbl-leave-chat-btn-tint);
  color: var(--sptbl-leave-chat-btn-bg);
  border: 1px solid var(--sptbl-leave-chat-btn-border);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

/* The exit glyph inherits the chip's colour through both states. */
.chat-item-delete-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: currentColor;
}

.chat-item-delete-btn:hover,
.chat-item-delete-btn:focus {
  background-color: var(--sptbl-leave-chat-btn-bg);
  border-color: var(--sptbl-leave-chat-btn-bg);
  color: #ffffff;
}

.chat-item-delete-btn:active {
  background-color: var(--sptbl-leave-chat-btn-bg-secondary);
  border-color: var(--sptbl-leave-chat-btn-bg-secondary);
  color: #ffffff;
}

.chat-item-date {
  color: var(--sptbl-secondary-text-color);
  font-size: 0.8125rem;
}

.contacts-list__item a {
  width: 60%;
}

.chat-item-btn-container {
  text-align: right;
}

.chain-thread-btn {
  height: 26px;
  width: 26px;
  margin-right: 10px;
  color: var(--sptbl-primary-color);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chain-thread-btn span {
  line-height: 1;
}

.chain-thread-btn svg {
  fill: var(--sptbl-primary-color);
  height: 100%;
  width: 100%;
}

.spoutcard-thread-input {
  position: relative;
}

.spoutcard-thread-input button {
  position: absolute;
  right: 4px;
  top: 0;
  border: none;
  background: transparent;
}

.spoutcard-thread-input button svg {
  width: 16px;
  height: 16px;
}

.spoutcard-thread-input svg {
  fill: var(--sptbl-primary-color);
}

.spoutcard-thread-input textarea.disabled {
  color: var(--sptbl-secondary-text-color) !important;
}

.align-middle {
  vertical-align: middle;
}

textarea.text-danger, textarea.text-danger.disabled {
  color: var(--sptbl-danger-color) !important;
}

#phone-verification-modal h6 {
  color: var(--sptbl-secondary-text-color);
}

#phone-verification-modal p {
  color: var(--sptbl-primary-text-color);
}

.timeline-select-input {
  width: 150px;
  max-width: 100%;
  text-overflow: ellipsis;
  background-color: var(--sptbl-homepage-bg-color);
  border-color: var(--sptbl-primary-border-color);
  color: var(--sptbl-secondary-text-color);
  font-weight: 400;
  outline: none;
  box-shadow: none;
}

.timeline-select-input:focus {
  background-color: var(--sptbl-homepage-bg-color);
  border-color: var(--sptbl-primary-border-color);
  color: var(--sptbl-secondary-text-color);
  outline: none;
  box-shadow: none;
}

.btn-custom-secondary {
  padding: 0;
}

.btn-custom-secondary svg {
  fill: var(--sptbl-secondary-text-color) !important;
}

.btn-custom-secondary:hover {
  background-color: var(--sptbl-event-hover-bg) !important;
}

.btn-custom-primary svg {
  fill: var(--sptbl-primary-color) !important;
}

.btn-custom-primary:hover {
  background-color: var(--sptbl-event-hover-bg) !important;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-center {
  justify-content: center !important;
}

.items-center {
  align-items: center;
}

#create-timeline-list, .timeline-lists-modal {
  color: var(--sptbl-primary-color);
  fill: var(--sptbl-primary-color);
}

#create-timeline-list label, #create-timeline-list input {
  color: var(--sptbl-secondary-text-color);
}

.mr-4 {
  margin-right: 1rem !important;
}

.mr-2 {
  margin-right: .5rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.mt-1 {
  margin-top: .25rem !important;
}

.mt-2 {
  margin-top: .5rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mb-6 {
  margin-bottom: 1.5rem !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-2 {
  padding-bottom: .5rem;
}

#create-timeline-list .btn-customized {
  width: 170px;
  height: 26px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px;
}

#create-timeline-list .btn-customized.btn-green {
  min-width: 100px;
  width: auto;
}

.align-text-bottom {
  vertical-align: text-bottom;
}

.mt-primary {
  margin-top: var(--sptbl-primary-offset-size);
}

.mb-primary {
  margin-bottom: var(--sptbl-primary-offset-size);
}

.mb-0 {
  margin-bottom: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sptbl-secondary-text-color) !important;
  font-size: 0.875rem !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #ced4da !important;
}

#create-timeline-list .btn-green {
  background-color: #9bdfaf;
  color: #fff;
}

.jiggle, .jiggle svg {
  animation: jiggle 0.3s ease-out infinite;
}

.liked-icon svg, .echoes-action-btn svg {
  transition: transform 0.3s ease-out;
}

.post-action-button .liked .item-count {
  color: var(--sptbl-like-secondary-svg-color);
}

.post-action-button .reposted .item-count {
  color: var(--sptbl-repost-secondary-bg-color);
}

.investor_badge {
  color: var(--sptbl-action-buttons-svg-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  height: 28px;
  justify-content: center;
  align-items: center;
}

.investor_badge:hover {
  color: var(--sptbl-action-buttons-svg-color);
}

.investor_badge svg {
  fill: var(--sptbl-action-buttons-svg-color);
}

.profile-shortinfo__item.investor_badge a {
  color: var(--sptbl-secondary-text-color);
  text-decoration: none;
}

.profile-shortinfo__item.investor_badge {
  color: var(--sptbl-secondary-text-color);
  font-size: 0.875rem;
  font-weight: normal;
  text-decoration: none;
}

.profile-shortinfo__item.investor_badge svg {
  fill: var(--sptbl-secondary-text-color);
}

.profile-shortinfo__item.investor_badge svg, .profile-shortinfo__item.investor_badge .icon, .profile-shortinfo__item.investor_badge .icon a {
  width: 17px !important;
  height: 17px !important;
}

.post-data__content-inner .investor_badge {
  margin-right: -3px;
}

.quoted-spout .investor_badge {
  margin-right: 0;
}

.post-data__content .post-username {
  overflow: hidden;
  padding-right: 15px;
}

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper div.timeline-container-inner div.timeline-container div.timeline-posts-container div.timeline-posts-ls div.post-list-item div.post-list-item__content div.post-data div.post-data__content div.post-data__content-inner div.post-data-layout div.post-data-layout__publisher div.post-username .user-name-holder__badge {
  width: 16px;
  height: 16px;
}

.bg-secondary {
  background-color: var(--sptbl-primary-border-color);
}

.rounded-lg {
  border-radius: 15px;
}

.p-4 {
  padding: 1rem;
}

.p-2 {
  padding: .5rem !important;
}

.mb-2 {
  margin-bottom: .5rem;
}

.mb-0 {
  margin-bottom: 0;
}

.color-success {
  color: var(--sptbl-success-color);
}

.color-danger {
  color: var(--sptbl-danger-color);
}

.media-menu {
  position: absolute;
  background-color: var(--sptbl-homepage-bg-color);
  border: 1px solid var(--sptbl-primary-border-color);
  z-index: 99;
  border-radius: 10px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12);
  overflow: hidden;
  min-width: auto !important;
}

.media-menu button {
  color: var(--sptbl-primary-color);
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 15px;
  border-radius: 0;
  margin: 0;
  text-wrap: nowrap;
}

.media-menu button svg {
  position: static;
}

.media-menu button:hover {
  background-color: #0074b01f;
}

.media-menu button:hover::after, .media-menu button:active::after, .media-menu button:focus::after {
  display: none;
}

div.timeline-spoutcard__poll div.spoutcard-poll div.spoutcard-poll__footer button {
  min-width: 65px;
  border: none;
}

.spoutcard-publish-btn {
  height: 22px;
  display: flex;
  align-items: center;
}

.border-b {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.border-primary {
  border-color: var(--sptbl-primary-border-color);
}

.whitespace-nowrap {
  white-space: nowrap;
}

.px-4 {
  padding-right: 1rem;
  padding-left: 1rem;
}

.absolute {
  position: absolute;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  bottom: 0;
}

.text-white {
  color: #fff;
}

.pods-container .user-role svg {
  height: 16px;
  width: auto;
}

.relative {
  position: relative;
}

.scale-up-center {
  -webkit-animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-center 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.user-infobox-vue {
  left: 50% !important;
  right: unset !important;
  width: 250px !important;
  transform: translateX(-50%);
  position: absolute !important;
  top: unset !important;
  bottom: unset !important;
  z-index: 6000 !important;
  margin-top: 60px;
}

.pod-is-floating .m-postBtn {
  bottom: 115px;
}

.pods-listing .main-outline span svg {
  width: auto;
  height: 14px;
  vertical-align: bottom;
}

.text-danger {
  color: var(--sptbl-danger-color) !important;
}

.text-success {
  color: var(--sptbl-success-color);
}

.bold {
  font-weight: bold;
}

.text-primary {
  color: var(--sptbl-primary-text-color);
}

.password-rules {
  font-size: 14px;
}

.mx-datepicker-popup {
  z-index: 7001 !important;
}

.mx-datepicker {
  width: 100% !important;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.w-full {
  width: 100%;
}

body.hap-sticky-player-open .main-content-container {
  padding-bottom: 60px;
}

.hap-sticky-player-open {
  margin-bottom: 20px;
}

.flex-column {
  flex-direction: column;
}

.uppercase {
  text-transform: uppercase;
}

.pod-is-floating .conversation__footer {
  margin-bottom: 65px;
}

.spout-accuracy-alert h2 {
  color: var(--sptbl-danger-color);
  font-size: 1.3rem;
}

.spout-accuracy-alert {
  background-color: var(--sptbl-embedded-content-border-color);
  color: var(--sptbl-secondary-text-color);
  border-radius: 15px;
  padding: 15px;
  margin-top: 15px;
  font-size: .9rem;
}

.element-at-start {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.overflow-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.shrink-0 {
  flex-shrink: 0;
}

.notifications .quote-uname {
  color: var(--sptbl-reply-text-color);
}

.notifications .quote-uuname {
  color: var(--sptbl-secondary-text-color);
}

input[type=date] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.break-all {
  word-break: break-all;
}

.text-wrap {
  word-wrap: break-word;
  word-break: break-word;
}

.image-accuracy-alert-icon {
  position: absolute;
  right: 0;
  top: 0;
  fill: white;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: pointer;
}

.image-accuracy-alert-icon svg {
  transform: rotate(45deg);
}

.image-accuracy-alert-icon::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-top: 50px solid rgba(0, 0, 0, .7);
  z-index: -1;
  cursor: pointer;
}

.accuracy-alert-active {
  top: 31px;
}

.image-accuracy-alert-warning {
  color: white;
  font-size: 14px;
  padding: 5px;
  background-color: var(--sptbl-danger-color);
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  font-weight: bold;
  height: 32px;
  position: relative;
  z-index: 100;
}

.fbox-media {
  text-decoration: none;
}

.border-radius-top-none {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.swiper {
  overflow: hidden;
  border-radius: 10px;
}

.swiper-slide img {
  width: 100%;
  object-fit: contain;
}

.swiper-lazy-preloader {
  border-color: var(--sptbl-primary-bg-color) !important;
  border-top-color: transparent !important;
}

.thumbnail-slider-container {
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  width: 100%;
  z-index: 10;
}

.thumbnail-slider {
  padding: 10px !important;
}

.thumbnail-slider .swiper-slide {
  width: 25px !important;
  height: 25px !important;
  border: 1px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 5px;
}

@media (min-width: 420px) {
  .thumbnail-slider .swiper-slide {
    width: 32px !important;
    height: 32px !important;
    margin-right: 10px;
  }
}
@media (min-width: 768px) {
  .thumbnail-slider .swiper-slide {
    width: 40px !important;
    height: 40px !important;
  }
}
.thumbnail-slider-container .swiper-wrapper .swiper-slide-thumb-active {
  border: 2px solid #fff;
  scale: 1.2 !important;
}

.thumbnail-slider .swiper-slide:last-child {
  margin-right: 0 !important;
}

.thumbnail-slider-container .swiper-wrapper {
  justify-content: center;
}

.thumbnail-slider-container .swiper-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image-accuracy-alert-warning-active {
  top: 32px;
}

.main-slider {
  margin-bottom: 35px;
}

a:focus-visible, a:focus {
  outline: none;
}

.thread-reply-button {
  display: table;
  background: var(--sptbl-primary-button-color);
  color: var(--sptbl-rating-text-color);
  border: none;
}

.has-replies-bar {
  border-bottom: 3px solid var(--sptbl-primary-color);
  border-radius: 20px;
}

.fancybox-content {
  background: none !important;
}

.font-small {
  font-size: small;
}

/* spoutcard modal */
.sptbl-modal-mask {
  z-index: 6999;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  outline: 0;
  scrollbar-gutter: stable;
}

.sptbl-modal-holder {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .sptbl-modal-holder {
    width: 700px;
    padding-left: 100px;
    /* memic the left sidebar */
  }
}
@media (min-width: 981px) {
  .sptbl-modal-holder {
    width: 980px;
    padding-right: 280px;
    /* memic the right sidebar */
  }
}
@media (min-width: 1255px) {
  .sptbl-modal-holder {
    width: 1220px;
    padding-right: 360px;
    /* memic the right sidebar */
    padding-left: 260px;
    /* memic the left sidebar */
  }
}
.sptbl-modal-container {
  background-color: var(--sptbl-primary-bg-color);
  border-radius: 0.8rem;
  box-shadow: var(--sptbl-primary-box-shadow);
  max-width: 100%;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}

.sptbl-modal-transition {
  transition: all 0.3s ease;
}

@media (min-width: 425px) {
  .sptbl-modal-sm {
    width: 350px;
    margin: 20px auto;
  }
}
@media (min-width: 768px) {
  .sptbl-modal-md {
    width: 450px;
    margin: 20px auto;
  }
}
@media (min-width: 768px) {
  .sptbl-modal-lg {
    width: 550px;
    margin: 20px auto;
  }
}
.sptbl-fixed-modal {
  position: fixed;
}

.sptbl-modal-header {
  font-size: 1rem;
  height: 65px;
  padding: 20px;
  border-bottom: 1px solid var(--sptbl-primary-border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sptbl-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--sptbl-primary-text-color);
  font-weight: 500;
  text-transform: uppercase;
}

.sptbl-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  border-top: 1px solid var(--sptbl-primary-border-color);
  justify-content: space-between;
}

.sptbl-modal-footer button, .sptbl-modal-footer a {
  font-size: 14px;
}

.sptbl-modal-body {
  padding: 20px;
  overflow-y: auto;
  color: var(--sptbl-primary-text-color);
  position: relative;
  overflow-x: hidden;
}

.sptbl-modal-body .timeline-bs-notifs {
  position: absolute;
  top: 0;
  z-index: 9999;
  width: auto;
  margin-right: 20px;
  margin-left: 20px;
  left: 0;
  right: 0;
}

.sptbl-close-modal-button {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 100%;
}

.sptbl-close-modal-button svg {
  width: 20px;
  height: 20px;
  fill: var(--sptbl-secondary-text-color);
}

.has-extra-buttons button {
  width: auto;
}

/* end spoutcard modal */
/* search page */
.advanced-search input.form-check-input {
  width: 30px;
}

.advanced-search .form-switch {
  margin-top: 10px;
}

.advanced-search .form-switch label {
  margin-top: 0;
}

/* end search page */
/* pods page */
.pods-create-pod-div {
  padding: 15px !important;
}

.pods-create-pod-div span {
  vertical-align: middle;
}

.pods-create-pod-div button svg {
  fill: #fff;
  height: 16px;
  width: 20px;
}

/* end pods page */
.sidebar__nav-item a.router-link-active {
  color: var(--sptbl-primary-color) !important;
}

.sidebar__nav-item .router-link-active svg {
  fill: var(--sptbl-primary-color) !important;
}

.mr-1 {
  margin-right: 5px !important;
}

.ml-1 {
  margin-left: 5px !important;
}

.slider-alt-button {
  background: none;
  color: #fff;
  position: absolute;
  left: 7px;
  bottom: 7px;
  font-size: 12px;
  display: flex;
  align-items: center;
  border: 0.5pt solid;
  border-radius: 4px;
  padding: 1px 6px 1px 3px;
  z-index: 99;
  background-color: var(--sptbl-image-alt-button-bg-color);
}

/* placeholders */
.loading-placeholder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--sptbl-primary-offset-size);
  background-color: var(--sptbl-sidebar-content-bg-color);
  border-radius: 0.8rem;
  border: 1px solid var(--sptbl-primary-border-color);
}

.placeholder-gap {
  gap: 12px;
  display: flex;
  flex-direction: column;
}

.placeholder-page-container {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.loading-placeholder .avatar-placeholder {
  width: 50px;
  height: 50px;
  background-color: var(--sptbl-quoted-spout-bg);
  border-radius: 50%;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .text-line-placeholder {
  height: 12px;
  background-color: var(--sptbl-quoted-spout-bg);
  border-radius: 4px;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .text-line-placeholder.short-placeholder {
  width: 15%;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .text-line-placeholder.short-placeholder {
  width: 30%;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .text-line-placeholder.medium-placeholder {
  width: 50%;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .text-line-placeholder.long-placeholder {
  width: 80%;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .input-placeholder {
  height: 48px;
  background-color: var(--sptbl-quoted-spout-bg);
  width: 100%;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .input-placeholder-medium {
  height: 48px;
  background-color: var(--sptbl-quoted-spout-bg);
  width: 50%;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .image-placeholder {
  height: 0;
  width: 100%;
  padding-top: 56.25%;
  background-color: var(--sptbl-quoted-spout-bg);
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .input-placeholder-short {
  height: 48px;
  background-color: var(--sptbl-quoted-spout-bg);
  width: 50%;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .small-button-placeholder {
  height: 25px;
  background-color: var(--sptbl-quoted-spout-bg);
  width: 90px;
  border-radius: 15px;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .box-placeholder {
  width: 12px;
  height: 12px;
  background-color: var(--sptbl-quoted-spout-bg);
  border-radius: 4px;
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .box-placeholder.medium-placeholder {
  height: 25px;
  width: 40%;
}

.loading-placeholder .line-placeholder {
  height: 1px;
  background-color: var(--sptbl-quoted-spout-bg);
  border-radius: 4px;
}

.loading-placeholder .full-width-placeholder {
  width: 100%;
  height: 100px;
  background-color: var(--sptbl-quoted-spout-bg);
  border-radius: 4px;
}

.wide-button-placeholder {
  width: 70px;
  height: 12px;
  border-radius: 10px;
  background-color: var(--sptbl-quoted-spout-bg);
  animation: pulsePlaceholder 2.2s infinite ease-in-out;
}

.loading-placeholder .user-meta-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 15px;
}

.loading-placeholder .user-meta-placeholder-small {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 15px;
  flex: 0;
}

.loading-placeholder .text-center-placeholder {
  margin: 0 auto;
}

/* end placeholders */
.mt-16 {
  margin-top: 4rem;
}

.mt-10px {
  margin-top: 10px;
}

.self-center {
  align-self: center;
}

.capitalized {
  text-transform: capitalize;
}

.fancybox__container {
  z-index: 9999999999999 !important;
}

.pod-bg-1 {
  background-color: #7495b9 !important;
}

.pod-bg-2 {
  background-color: #64a0e4 !important;
}

.pod-bg-3 {
  background-color: #c867dc !important;
}

.pod-bg-4 {
  background-color: #ff8b10 !important;
}

/* "Dawn" pod color -- solid equivalent of the theme-example pod-chip surface
   (rgba(67,49,36,0.72) composited over the dawn card background). Selectable
   in every theme; it is the default pod color when the Dawn theme is chosen
   (see DisplaySettings.changeBgColor). */
.pod-bg-5 {
  background-color: #3c2c20 !important;
}

.live-pods-carousel-item.pod-bg-5 {
  border: 1px solid rgba(255, 236, 210, 0.12);
}

.live-pods-carousel-item.pod-bg-5 .live-pod-title {
  color: #f0c79c;
}

.live-pods-carousel-item.pod-bg-5 .live-pod-listeners {
  color: rgba(246, 236, 220, 0.7);
}

/* Cream ring so the dark swatch stays visible on dark option-list surfaces. */
.pod-icon-preview.pod-bg-5 {
  border: 1px solid rgba(255, 236, 210, 0.4);
}

/* "Midnight" pod color -- the raised neutral step (#2d2e30) the midnight design
   reference uses for its pod cards. Same structure as the dawn color above:
   selectable in every theme, and the default pod color when the Midnight theme
   is chosen (see DisplaySettings.changeBgColor). */
.pod-bg-6 {
  background-color: #2d2e30 !important;
}

.live-pods-carousel-item.pod-bg-6 {
  border: 1px solid rgba(214, 216, 218, 0.14);
}

.live-pods-carousel-item.pod-bg-6 .live-pod-title {
  color: #d6d8da;
}

.live-pods-carousel-item.pod-bg-6 .live-pod-listeners {
  color: rgba(214, 216, 218, 0.7);
}

/* Light ring so the dark swatch stays visible on dark option-list surfaces. */
.pod-icon-preview.pod-bg-6 {
  border: 1px solid rgba(214, 216, 218, 0.4);
}

.pod-component-bg-1 .live-pods-carousel-item {
  background-color: #7495b9 !important;
}

.pod-component-bg-2 .live-pods-carousel-item {
  background-color: #64a0e4 !important;
}

.pod-component-bg-3 .live-pods-carousel-item {
  background-color: #c867dc !important;
}

.pod-component-bg-4 .live-pods-carousel-item {
  background-color: #ff8b10 !important;
}

.pod-mini-player-bg-1 .minimized-pod {
  background-color: #7495b9 !important;
}

.pod-mini-player-bg-2 .minimized-pod {
  background-color: #64a0e4 !important;
}

.pod-mini-player-bg-3 .minimized-pod {
  background-color: #c867dc !important;
}

.pod-mini-player-bg-4 .minimized-pod {
  background-color: #ff8b10 !important;
}

.pod-icon-preview {
  width: 32px;
  height: 32px;
  border-radius: 100%;
}

.p-0 {
  padding: 0 !important;
}

.pointer-events-none {
  pointer-events: none;
}

/* ===================================================== */
/* MVP video player - hand-appended section reverse-ported verbatim from
   live master.styles.css lines 16474-23494. Declaration values are wrapped
   in interpolation so dart-sass emits them byte-for-byte (leading-dot
   decimals, rgb slash syntax, etc.). Do not "clean up" values here. */
/* video player */
.mvp-btn-reset {
  color: inherit;
  background-color: transparent;
  padding: 0;
  margin: 0;
  float: none;
  line-height: 1em;
  list-style: none;
  text-transform: none;
  vertical-align: baseline;
  border: 0;
  font-variant: inherit;
  font-stretch: inherit;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  font-weight: normal;
  letter-spacing: normal;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
}

.mvp-btn-reset:hover {
  text-decoration: none;
}

.mvp-player a {
  box-shadow: none !important;
}

.mvp-playlist-description,
.mvp-playlist-title,
.mvp-playlist-published-date,
.mvp-playlist-play-count {
  margin: 0;
  padding: 0;
  border: 0;
}

.mvp-logo {
  position: absolute;
  top: 20px;
  left: 20px;
}

.mvp-video-title {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 20px;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  padding: 2px;
  background: rgb(3 3 3 / 10%);
}

.mvp-player {
  position: relative;
  width: 100%;
  /*min-width: 350px;*/
  margin: 0 auto;
  /*z-index: 1;*/
  min-height: 200px;
  display: none;
}

@supports (container-type: inline-size) {
  .mvp-player-wrap {
    container: mvp_player_query / inline-size;
  }
}
.mvp-player-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

.mvp-media-holder {
  background: #111;
}

.mvp-vrb .mvp-player-holder,
.mvp-hb .mvp-player-holder,
.mvp-vb .mvp-player-holder {
  background: #111;
}

/* icons */
.mvp-btn {
  display: none;
  height: 100%;
}

.mvp-icon-wrap {
  height: 100%;
}

.mvp-contr-btn svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: currentColor;
  transition: all .1s ease-out;
}

@media (hover: hover) {
  .mvp-big-play:hover svg,
  .mvp-contr-btn:hover svg {
    transform: translate(-50%, -50%) scale(1.2);
  }
}
.mvp-player-controls {
  opacity: 0;
  transition: opacity .3s ease-out;
  display: none;
}

.mvp-player-controls-visible {
  opacity: 1;
}

.mvp-player-controls-bottom {
  direction: ltr;
}

.mvp-settings-menu {
  display: none;
}

.mvp-settings-toggle {
  cursor: pointer;
}

.mvp-settings-holder {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: none;
  text-align: left;
  white-space: nowrap;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  cursor: default;
}

.mvp-settings-holder-scrollable {
  overflow-y: auto;
}

.mvp-settings-holder::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.mvp-settings-holder::-webkit-scrollbar-thumb {
  background: #999;
}

.mvp-settings-holder::-webkit-scrollbar-track {
  background: #eee;
}

.mvp-settings-holder ul {
  margin: 0 !important;
  padding: 0 !important;
}

.mvp-menu-item {
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -moz-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  position: relative;
  white-space: nowrap;
  height: auto;
  text-align: center;
  list-style-type: none;
  margin: 0;
  line-height: 1 !important;
  user-select: none;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}

.mvp-menu-active {
  cursor: default !important;
}

.mvp-settings-menu-item-title {
  margin-right: 20px;
  font-weight: bold;
}

.mvp-audio-language-menu,
.mvp-subtitle-menu,
.mvp-quality-menu,
.mvp-playback-rate-menu {
  display: flex;
  flex-direction: column;
}

.mvp-playback-rate-menu-compact,
.mvp-quality-menu-compact,
.mvp-audio-language-menu-compact,
.mvp-subtitle-menu-compact,
.mvp-transcript-language-menu-compact,
.mvp-chapter-menu-compact {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
}

.mvp-settings-holder .mvp-menu-header {
  font-size: 13px;
  line-height: 1;
  padding: 12px 30px 12px 15px;
  background-image: url('../data/svg/left-arrow.svg');
  background-position: 12px center;
  background-repeat: no-repeat;
  background-size: 11px;
  transition: all 0.3s ease-out;
  margin-bottom: 1px;
  cursor: pointer;
  width: 100%;
}

@media (hover: hover) {
  .mvp-settings-holder .mvp-menu-header:hover {
    background-position: 8px center;
  }
}
.mvp-settings-holder .mvp-menu-header span {
  padding-left: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* subtitles */
.mvp-subtitles {
  display: none;
}

.mvp-subtitle-holder-inner {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 10px;
  transition: margin-bottom .3s ease-out;
  font-size: 20px;
}

.mvp-subtitle {
  display: inline-block;
  padding: 5px;
  box-sizing: border-box;
  line-height: normal !important;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.3) !important;
  white-space: pre-wrap;
}

.mvp-subtitle i {
  font-style: italic;
}

.mvp-subtitle-raised {
  margin-bottom: 50px !important;
}

.mvp-share-inner .mvp-share-item {
  width: 40px !important;
  height: 40px !important;
  position: relative !important;
  flex-shrink: 0;
}

/* coming next */
.mvp-comingnext-holder {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  display: none;
  z-index: 50;
}

.mvp-slide .mvp-comingnext-holder {
  transition: top 0.4s ease-out;
  top: -100%;
}

.mvp-alpha .mvp-comingnext-holder {
  top: 0;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.mvp-comingnext-poster-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
}

.mvp-comingnext-poster-holder-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.mvp-comingnext-inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.mvp-comingnext-data {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  scrollbar-width: thin;
}

.mvp-comingnext-data {
  max-height: none;
}

.mvp-comingnext-data-header {
  font-size: 14px;
  color: #ccc;
}

.mvp-comingnext-data-title {
  font-size: 24px;
  color: #fff;
  margin-top: 3px;
  text-align: center;
}

.mvp-comingnext-duration {
  font-size: 13px;
  font-style: italic;
}

.mvp-comingnext-timer-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  cursor: pointer;
  margin: 20px 0;
}

.mvp-comingnext-timer-circle {
  transform: rotate(-90deg);
  /*start from top*/
  position: absolute;
  top: 0;
  left: 0;
}

.mvp-comingnext-timer-circle-stroke {
  stroke-dasharray: 169;
  /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 169;
  transition: stroke-dashoffset 1s linear;
}

.mvp-comingnext-timer-play svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: currentColor;
  transition: color .1s ease-out;
  color: #fff;
  height: 20px;
}

.mvp-comingnext-cancel {
  font-size: 14px;
  color: #efefef;
  border-radius: 1px;
  cursor: pointer;
  padding: 5px 10px;
  transition: background-color .3s ease-out;
}

@media (hover: hover) {
  .mvp-comingnext-cancel:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.mvp-ph-hidden {
  width: 0 !important;
}

.mvp-keyboard-holder,
.mvp-inline-ads-holder,
.mvp-embed-holder,
.mvp-info-holder,
.mvp-share-holder,
.mvp-resume-holder,
.mvp-redirect-login-holder {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
  z-index: 50;
  background: rgba(0, 0, 0, 0.7);
}

.mvp-slide .mvp-keyboard-holder,
.mvp-slide .mvp-inline-ads-holder,
.mvp-slide .mvp-embed-holder,
.mvp-slide .mvp-info-holder,
.mvp-slide .mvp-share-holder,
.mvp-slide .mvp-resume-holder,
.mvp-slide .mvp-redirect-login-holder {
  transition: top 0.4s ease-out;
  top: -100%;
}

.mvp-alpha .mvp-keyboard-holder,
.mvp-alpha .mvp-inline-ads-holder,
.mvp-alpha .mvp-embed-holder,
.mvp-alpha .mvp-info-holder,
.mvp-alpha .mvp-share-holder,
.mvp-alpha .mvp-resume-holder,
.mvp-alpha .mvp-redirect-login-holder {
  top: 0;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.mvp-keyboard-holder-inner,
.mvp-inline-ads-holder-inner,
.mvp-embed-holder-inner,
.mvp-info-holder-inner,
.mvp-share-holder-inner,
.mvp-resume-holder-inner,
.mvp-redirect-login-holder-inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.mvp-keyboard-inner,
.mvp-embed-inner,
.mvp-info-inner,
.mvp-share-inner,
.mvp-resume-inner,
.mvp-redirect-login-inner {
  position: relative;
  padding: 20px 40px 20px 20px;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 1.2;
  direction: ltr;
}

.mvp-share-container {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  margin-bottom: 10px;
}

.mvp-redirect-login-holder-watch .mvp-redirect-login-inner {
  /*no close btn*/
  padding: 20px;
}

.mvp-keyboard-data,
.mvp-embed-data,
.mvp-info-data,
.mvp-share-data,
.mvp-resume-data,
.mvp-redirect-login-data {
  position: relative;
  max-width: 70%;
  max-height: 70%;
  overflow: auto;
  scrollbar-width: thin;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.mvp-keyboard-data {
  max-width: 90%;
  max-height: 90%;
}

.mvp-embed-data {
  flex: 1;
}

.mvp-contr-btn.mvp-keyboard-close,
.mvp-contr-btn.mvp-embed-close,
.mvp-contr-btn.mvp-info-close,
.mvp-contr-btn.mvp-share-close,
.mvp-contr-btn.mvp-redirect-login-close {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  background: none !important;
  z-index: 333;
  height: 40px !important;
  width: 40px !important;
}

/*
iphone not working
@media (max-width: 500px){
  .mvp-contr-btn.mvp-embed-close,
  .mvp-contr-btn.mvp-info-close,
  .mvp-contr-btn.mvp-share-close,
  .mvp-contr-btn.mvp-redirect-login-close{
      position: fixed!important;
  }
}
@container mvp_player_query (max-width: 500px){
  .mvp-contr-btn.mvp-embed-close,
  .mvp-contr-btn.mvp-info-close,
  .mvp-contr-btn.mvp-share-close,
  .mvp-contr-btn.mvp-redirect-login-close{
      position: fixed!important;
  }
}*/
.mvp-contr-btn.mvp-upnext-close {
  height: 40px;
}

.mvp-embed-close svg,
.mvp-info-close svg,
.mvp-share-close svg,
.mvp-redirect-login-close svg,
.mvp-chapter-menu-close svg {
  height: 16px !important;
}

.mvp-redirect-login-inner {
  text-align: center;
}

.mvp-redirect-login-title {
  font-size: 14px;
  color: #ccc !important;
}

.mvp-redirect-login-enter a {
  color: #555 !important;
}

.mvp-redirect-login-action {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  align-items: center;
  justify-content: space-evenly;
}

.mvp-redirect-login-btn {
  text-decoration: none !important;
}

.mvp-dialog-btn {
  transition: opacity 0.3s ease-out;
}

@media (hover: hover) {
  .mvp-dialog-btn:hover {
    opacity: 0.7;
  }
}
@media (max-width: 800px) {
  .mvp-keyboard-data,
  .mvp-embed-data,
  .mvp-info-data,
  .mvp-share-data,
  .mvp-resume-data,
  .mvp-redirect-login-data,
  .mvp-comingnext-data {
    max-width: 100%;
    max-height: 100%;
  }
  .mvp-redirect-login-title {
    font-size: 18px;
  }
  .mvp-comingnext-data-title {
    font-size: 20px;
  }
  .mvp-comingnext-timer-wrap {
    margin: 10px 0;
  }
}
@container mvp_player_query (max-width: 800px) {
  .mvp-keyboard-data,
  .mvp-embed-data,
  .mvp-info-data,
  .mvp-share-data,
  .mvp-resume-data,
  .mvp-redirect-login-data,
  .mvp-comingnext-data {
    max-width: 100%;
    max-height: 100%;
  }
  .mvp-redirect-login-title {
    font-size: 18px;
  }
  .mvp-comingnext-data-title {
    font-size: 20px;
  }
  .mvp-comingnext-timer-wrap {
    margin: 10px 0;
  }
}
/* inline ads */
.mvp-inline-ads-holder-inner {
  display: flex;
  flex-direction: column;
  color: #ccc;
}

.mvp-inline-ads-title {
  margin-bottom: 15px;
}

@media (hover: hover) {
  .mvp-inline-ads-title:hover {
    color: #eee;
  }
}
.mvp-inline-ads-title a {
  color: inherit;
}

/* resume confirm */
.mvp-resume-action-container,
.mvp-dialog-btn {
  padding: 10px 10px;
  background: #fff;
  text-align: center;
  align-items: center;
  max-width: 230px;
  width: 100%;
  margin-bottom: 10px;
  color: #555;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1.2;
}

.mvp-dialog-btn-horizontal {
  padding: 10px 10px;
  background: #fff;
  text-align: center;
  align-items: center;
  max-width: 100px;
  width: 100%;
  margin-bottom: 10px;
  color: #555;
  border-radius: 3px;
  font-size: 16px;
}

.mvp-dialog-btn-horizontal {
  transition: opacity 0.3s ease-out;
}

@media (hover: hover) {
  .mvp-dialog-btn-horizontal:hover {
    opacity: 0.7;
  }
}
.mvp-resume-inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.mvp-resume-action-container {
  transition: opacity 0.3s ease-out;
}

@media (hover: hover) {
  .mvp-resume-action-container:hover {
    opacity: 0.7;
  }
}
.mvp-resume-action-container-separator {
  height: 1px;
  background: #777;
  width: 100%;
}

.mvp-resume-header {
  font-size: 22px;
  margin-bottom: 10px;
  text-align: center;
  display: inline-block;
  color: #efefef;
}

.mvp-resume-action-container .mvp-contr-btn svg {
  color: #fff !important;
}

.mvp-player-title {
  font-size: 15px;
  line-height: normal;
}

.mvp-player-title {
  color: #fff;
}

.mvp-player-desc {
  margin-top: 10px;
  font-size: 14px;
  white-space: pre-wrap;
  line-height: normal;
}

.mvp-player-desc:empty {
  margin-top: 0;
}

.mvp-player-desc {
  color: #bbb;
}

.mvp-big-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  margin-left: -37px;
  margin-top: -37px;
  display: none;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 500px) {
  .mvp-big-play {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
  }
}
@container mvp_player_query (max-width: 500px) {
  .mvp-big-play {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
  }
}
.mvp-big-play svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 26px;
  fill: currentColor;
  transition: all .1s ease-out;
}

.mvp-player-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -24px;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: mvp_rotation 1s linear infinite;
}

@keyframes mvp_rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.mvp-player-casting .mvp-player-loader {
  display: none !important;
}

.mvp-player-casting .mvp-subtitle-holder {
  display: none !important;
}

/* image loader */
.mvp-player-loader-img,
.mvp-big-play-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 40;
  margin: 0;
}

.mvp-player-loader-img img,
.mvp-big-play-img img {
  display: block;
  width: 100%;
}

.mvp-grid .mvp-player-spinner {
  position: relative;
  left: 50%;
  margin-left: -20px;
}

.mvp-vr-info {
  position: absolute;
  height: auto;
  display: block;
  top: 50px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  pointer-events: none;
  opacity: 0;
  display: none;
  transition: opacity 1s;
}

.mvp-preview-seek-wrap {
  position: absolute;
  pointer-events: none;
  display: none;
  z-index: 22;
  max-width: 125px;
}

.mvp-preview-seek-inner {
  position: relative;
  top: 0;
  border: 2px solid #ddd;
  margin: 0 auto;
  left: 0;
  height: 68px;
  box-sizing: content-box;
  width: 120px;
  background-repeat: no-repeat;
  background: #ddd;
  box-shadow: 0 0 5px rgba(120, 120, 120, 0.7);
  overflow: hidden;
}

.mvp-preview-seek-canvas {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
}

.mvp-preview-seek-info {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  line-height: normal;
  padding: 1px 2px;
  color: #fff;
}

.mvp-preview-seek-chapter-title {
  text-align: center;
  margin-top: 1px;
  text-shadow: 0 0 5px rgb(0 0 0 / 75%), 0 0 2px rgb(0 0 0 / 75%);
  position: relative;
  margin-top: 5px;
  font-size: 15px;
}

.mvp-preview-seek-chapter-time {
  text-align: center;
  text-shadow: 0 0 5px rgb(0 0 0 / 75%), 0 0 2px rgb(0 0 0 / 75%);
  position: relative;
  margin-top: 3px;
  font-size: 13px;
}

/* keyboard */
.mvp-keyboard-data {
  color: #fff;
}

.mvp-keyboard-data-header {
  font-size: 22px;
  margin-bottom: 10px;
}

.mvp-keyboard-table tr {
  color: #ccc;
  font-size: 14px;
  transition: color 0.1s;
}

@media (hover: hover) {
  .mvp-keyboard-table tr:hover {
    color: #fff;
  }
}
/* age verify */
.mvp-age-verify-holder {
  height: 100%;
  width: 100%;
  display: none;
  z-index: 60;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
}

.mvp-slide .mvp-age-verify-holder {
  transition: top 0.4s ease-out;
  top: -100%;
}

.mvp-alpha .mvp-age-verify-holder {
  top: 0;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.mvp-age-verify-holder-inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.mvp-age-verify-data {
  position: relative;
  max-width: 70%;
  width: 100%;
  overflow-y: auto;
  padding: 30px;
  box-sizing: border-box;
  text-align: center;
  background: #fff;
}

.mvp-age-verify-header {
  color: #9e9e9e;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.mvp-age-verify-title {
  font-size: 19px;
  margin: 10px 0;
  color: #ccc;
  line-height: normal;
}

.mvp-age-verify-btn {
  padding: 10px 14px !important;
  font-size: 24px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  transition: opacity 0.3s ease-out;
}

@media (hover: hover) {
  .mvp-age-verify-btn:hover {
    opacity: 0.9;
  }
}
.mvp-age-verify-enter {
  background-color: #54A984;
}

.mvp-age-verify-exit {
  background-color: #e36e3a;
}

@media (max-width: 500px) {
  .mvp-age-verify-data {
    max-width: 90%;
    max-height: 90%;
  }
}
@container mvp_player_query (max-width: 500px) {
  .mvp-age-verify-data {
    max-width: 90%;
    max-height: 90%;
  }
}
/* pwd */
.mvp-pwd-holder {
  height: 100%;
  width: 100%;
  display: none;
  z-index: 60;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
}

.mvp-slide .mvp-pwd-holder {
  transition: top 0.4s ease-out;
  top: -100%;
}

.mvp-alpha .mvp-pwd-holder {
  top: 0;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.mvp-pwd-holder-inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.mvp-pwd-data {
  position: relative;
  max-width: 350px;
  width: 100%;
  overflow: auto;
  scrollbar-width: thin;
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .mvp-pwd-data {
    max-width: 90%;
  }
}
@container mvp_player_query (max-width: 400px) {
  .mvp-pwd-data {
    max-width: 90%;
  }
}
.mvp-pwd-inner {
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

.mvp-embed-box,
.mvp-pwd-box {
  display: flex;
}

.mvp-embed-field-wrap {
  position: relative;
  margin: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  font-size: 12px;
  padding: 5px;
  color: #d7e6eb;
  border-radius: 3px;
  border: 1px solid #e6e6e6;
}

.mvp-embed-field-wrap-selected {
  background: #6f6f6f;
}

.mvp-pwd-field-wrap {
  position: relative;
  margin: 0;
  line-height: 1.2;
  word-wrap: break-word;
  width: 100%;
}

.mvp-input-field.mvp-pwd-field {
  background: rgba(0, 0, 0, 0) !important;
  border-radius: 3px !important;
  border: 1px solid #e6e6e6 !important;
  margin: 0 !important;
  width: 100% !important;
  position: absolute;
  left: 0;
  top: 0;
  height: 100% !important;
  padding: 0 0 0 5px !important;
  font-size: 13px !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  box-sizing: border-box;
  -webkit-text-security: disc;
}

.mvp-pwd-title,
.mvp-dialog-title {
  font-size: 22px;
  color: #efefef;
}

.mvp-embed-title {
  font-size: 18px;
  margin: 10px 0;
  color: #777;
}

.mvp-pwd-info {
  font-size: 11px;
  margin: 5px;
  display: flex;
  color: #aaa;
}

.mvp-share-copy,
.mvp-embed-copy,
.mvp-pwd-confirm {
  display: inline-block;
  padding: 8px 14px !important;
  font-size: 14px;
  cursor: pointer;
  /* float: right; */
  align-self: flex-start;
  margin-left: 5px;
  margin-right: 5px;
  white-space: nowrap;
  line-height: 1.2;
  color: #555;
  background: #fff;
  border-radius: 3px;
  transition: opacity 0.3s ease-out;
}

@media (hover: hover) {
  .mvp-pwd-confirm:hover {
    opacity: 0.7;
  }
}
.mvp-context-menu {
  position: absolute;
  padding: 10px;
  font-size: 12px;
  white-space: nowrap;
  text-align: left;
  z-index: 2147483646 !important;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  display: none;
}

.mvp-context-btn {
  line-height: 1.4 !important;
  list-style: none !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 5px !important;
  font-size: 12px !important;
  cursor: pointer;
  width: 100%;
  display: block;
  box-sizing: border-box;
  text-align: left;
}

.mvp-context-btn {
  border-bottom: 1px solid #666 !important;
  color: #eee !important;
}

.mvp-context-menu .mvp-context-btn:last-child {
  border-bottom: none !important;
}

.mvp-context-link span {
  background-color: #9e9e9e !important;
}

.mvp-context-link span a {
  color: #E5E5E5 !important;
}

@media (hover: hover) {
  .mvp-context-btn:hover {
    opacity: 0.5;
  }
}
.mvp-context-fullscreen-exit {
  display: none;
}

.mvp-tooltip {
  position: absolute;
  text-align: center;
  z-index: 2147483646 !important;
  pointer-events: none;
  display: none;
  font-size: 13px !important;
  padding: 2px 8px !important;
  line-height: 20px !important;
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.mvp-unmute-toggle {
  color: #222;
  background: #fff;
  position: absolute;
  top: 70px;
  left: -300px;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.mvp-unmute-toggle svg {
  color: #333;
  margin-right: 8px;
  height: 16px;
  fill: currentColor;
}

@media (hover: hover) {
  .mvp-unmute-toggle:hover {
    opacity: 0.9;
  }
}
.mvp-unmute-toggle-visible {
  left: 20px;
}

.mvp-player-holder,
.mvp-media-holder,
.mvp-offline-holder,
.mvp-media-end-image-holder,
.mvp-slideshow-holder,
.mvp-video-holder,
.mvp-ima-holder,
.mvp-image-holder,
.mvp-poster-holder,
.mvp-youtube-holder,
.mvp-vimeo-holder-default,
.mvp-vimeo-holder-chromeless,
.mvp-canvas-video,
.mvp-canvas-image,
.mvp-canvas-audio,
.mvp-custom-holder,
.mvp-custom-end-holder,
.mvp-iframe-blocker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mvp-media-end-image-holder {
  transition: opacity 400ms ease-out;
  cursor: pointer;
}

.mvp-media-end-image-holder:hover {
  opacity: 0.9;
}

.mvp-ima-holder {
  position: relative;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.mvp-w0 {
  width: 0 !important;
  height: 0 !important;
}

.mvp-player-holder {
  z-index: 1;
  background: #111;
}

.mvp-media-holder iframe,
.mvp-emiframe,
.mvp-media .fb-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

.mvp-media {
  position: absolute;
  user-select: none;
  visibility: visible;
  opacity: 0;
  top: 0;
  left: 0;
  max-width: none !important;
  transition: opacity 500ms ease-out;
  width: 100%;
  height: 100%;
}

.mvp-media-img {
  object-fit: contain;
}

.mvp-force-hide {
  display: none !important;
}

.mvp-layout-100 {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  z-index: 99999999;
  margin: 0 !important;
  padding: 0 !important;
}

.mvp-fs {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483647 !important;
  overflow: hidden !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}

.mvp-fs-overflow {
  overflow: hidden !important;
}

.mvp-download-toggle a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* minimize on scroll */
.mvp-minimize-bl {
  top: auto !important;
  position: fixed !important;
  z-index: 2147483648;
  bottom: 20px !important;
  left: 20px !important;
  margin: 0 !important;
  max-width: 70%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.mvp-minimize-br {
  top: auto !important;
  position: fixed !important;
  z-index: 2147483648;
  bottom: 20px !important;
  left: auto !important;
  right: 20px !important;
  margin: 0 !important;
  max-width: 70%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.mvp-minimize-tl {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  bottom: auto !important;
  position: fixed !important;
  max-width: 70%;
  z-index: 2147483648;
  top: 20px !important;
  left: 20px !important;
  margin: 0 !important;
}

.mvp-minimize-tr {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  bottom: auto !important;
  position: fixed !important;
  max-width: 70%;
  z-index: 2147483648;
  top: 20px !important;
  right: 20px !important;
  margin: 0 !important;
}

.mvp-minimize-close {
  position: absolute !important;
  width: 40px !important;
  height: 40px !important;
  display: none;
}

.mvp-minimize-bl .mvp-minimize-close {
  display: block;
  left: 0;
  top: -40px;
}

.mvp-minimize-br .mvp-minimize-close {
  display: block;
  right: 0;
  top: -40px;
}

.mvp-minimize-tl .mvp-minimize-close {
  display: block;
  left: 0;
  top: 100%;
}

.mvp-minimize-tr .mvp-minimize-close {
  display: block;
  right: 0;
  top: 100%;
}

@media (max-width: 500px) {
  .mvp-minimize-tl,
  .mvp-minimize-bl {
    left: 0 !important;
    max-width: 100%;
  }
  .mvp-minimize-tr,
  .mvp-minimize-br {
    right: 0 !important;
    max-width: 100%;
  }
}
@container mvp_player_query (max-width: 500px) {
  .mvp-minimize-tl,
  .mvp-minimize-bl {
    left: 0 !important;
  }
  .mvp-minimize-tr,
  .mvp-minimize-br {
    right: 0 !important;
  }
}
.mvp-btn-disabled {
  opacity: 0.5 !important;
}

.mvp-skin-aviva .mvp-cc-toggle svg,
.mvp-skin-pollux .mvp-cc-toggle svg {
  height: 18px !important;
}

.mvp-skin-sirius .mvp-cc-toggle svg {
  height: 16px !important;
}

.mvp-skin-aviva .mvp-airplay-toggle svg,
.mvp-skin-pollux .mvp-airplay-toggle svg {
  height: 17px !important;
}

.mvp-skin-sirius .mvp-airplay-toggle svg {
  height: 16px !important;
}

/* info scroll */
.mvp-info-data::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.mvp-info-data::-webkit-scrollbar-thumb {
  background: #999;
}

.mvp-info-data::-webkit-scrollbar-track {
  background: #eee;
}

/* playlist */
.mvp-chapters-holder,
.mvp-transcript-holder {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: none;
}

.mvp-slide .mvp-chapters-holder,
.mvp-slide .mvp-transcript-holder {
  left: 100%;
  transition: left 0.4s ease-in-out;
}

.mvp-alpha .mvp-chapters-holder,
.mvp-alpha .mvp-transcript-holder {
  left: 0;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.mvp-slide .mvp-chapters-holder-opened {
  left: 0;
}

.mvp-alpha .mvp-chapters-holder-opened {
  opacity: 1;
}

.mvp-chapters-holder-inner,
.mvp-transcript-holder-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.mvp-playlist-selector-content,
.mvp-chapters-content,
.mvp-transcript-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mvp-transcript-header-icon,
.mvp-playlist-selector-header-icon {
  transition: transform 0.3s;
}

.mvp-playlist-selector-header-inner-opened {
  transform: rotate(180deg);
}

.mvp-playlist-selector-header-inner-icon,
.mvp-transcript-header-inner-icon {
  margin-left: 5px;
}

.mvp-transcript-language-selector-wrap,
.mvp-transcript-container-wrap,
.mvp-chapters-container-wrap,
.mvp-playlist-selector-container-wrap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.mvp-vrb .mvp-transcript-language-selector-wrap,
.mvp-vrb .mvp-transcript-container-wrap,
.mvp-vrb .mvp-chapters-container-wrap,
.mvp-vrb .mvp-playlist-selector-container-wrap,
.mvp-vb .mvp-transcript-language-selector-wrap,
.mvp-vb .mvp-transcript-container-wrap,
.mvp-vb .mvp-chapters-container-wrap,
.mvp-vb .mvp-playlist-selector-container-wrap {
  overflow-y: auto;
}

.mvp-hb .mvp-transcript-language-selector-wrap,
.mvp-hb .mvp-transcript-container-wrap,
.mvp-hb .mvp-chapters-container-wrap,
.mvp-hb .mvp-playlist-selector-container-wrap {
  overflow-x: auto;
}

.mvp-transcript-language-selector-wrap {
  opacity: 0;
  transition: opacity .3s ease-out;
  display: none;
}

.mvp-transcript-language-menu ul {
  margin: 0 !important;
  padding: 0 !important;
}

.mvp-transcript-language-menu .mvp-menu-item {
  padding: 12px 30px;
}

.mvp-playlist-selector-header,
.mvp-playlist-selector-footer,
.mvp-chapters-header,
.mvp-chapters-footer,
.mvp-transcript-header,
.mvp-transcript-footer {
  height: 50px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.mvp-transcript-header {
  direction: ltr;
}

.mvp-playlist-selector-footer,
.mvp-chapters-footer,
.mvp-transcript-footer {
  justify-content: center;
}

.mvp-playlist-selector-header-inner,
.mvp-chapters-header-inner,
.mvp-transcript-header-inner {
  display: flex;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  height: 100%;
}

.mvp-transcript-header-inner {
  margin-left: 15px;
  position: relative;
}

.mvp-chapters-header-inner {
  flex: 1;
}

.mvp-playlist-selector-close,
.mvp-chapters-close,
.mvp-transcript-close {
  margin-left: auto;
}

.mvp-playlist-selector-header-title,
.mvp-chapters-header-title,
.mvp-transcript-header-title {
  display: inline-flex;
  flex: 1;
  margin-left: 10px;
  color: #ddd;
  user-select: none;
}

.mvp-transcript-item {
  display: flex;
  flex-direction: row;
  color: #111;
  font-size: 13px;
  padding: 10px 16px 10px 3px;
  line-height: 1.2rem;
  align-items: baseline;
  cursor: pointer;
  transition: 0.2s all ease;
}

.mvp-transcript-item-time {
  margin: 0 16px 0 12px;
  white-space: nowrap;
}

.mvp-transcript-item-text {
  margin-left: 12px;
  overflow: hidden;
  overflow-wrap: break-word;
}

.mvp-playlist-selector-item,
.mvp-chapter-item {
  display: flex;
  flex-direction: row;
  padding: 5px;
  cursor: pointer;
  transition: 0.2s all ease;
  min-height: 50px;
  align-items: center;
}

.mvp-hb .mvp-playlist-selector-item,
.mvp-hb .mvp-chapter-item {
  width: 300px;
  float: left;
}

.mvp-chapter-item-button {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}

.mvp-chapter-is-active .mvp-chapter-item-button {
  opacity: 1;
  pointer-events: auto;
}

.mvp-chapter-item-button svg {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: currentColor;
  color: #fff;
}

.mvp-skin-aviva .mvp-chapter-item-button svg,
.mvp-skin-pollux .mvp-chapter-item-button svg {
  height: 18px;
}

.mvp-skin-sirius .mvp-chapter-item-button svg {
  height: 16px;
}

.mvp-chapter-item-repeat-active svg {
  color: #ffeb3b !important;
}

.mvp-playlist-selector-item-thumb,
.mvp-chapter-item-thumb {
  max-width: 100px;
  flex-shrink: 0;
}

.mvp-playlist-selector-item-thumb-img,
.mvp-chapter-item-thumb-img {
  display: block;
  width: 100%;
}

.mvp-playlist-selector-item-info,
.mvp-chapter-item-info {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
  flex: 1;
}

.mvp-chapter-item-text {
  font-size: 15px;
}

.mvp-chapter-item-time {
  font-size: 13px;
  margin-top: 5px;
}

.mvp-playlist-selector-item-title {
  font-size: 15px;
}

.mvp-playlist-selector-item-description {
  font-size: 13px;
}

/* aviva */
@media (hover: hover) {
  .mvp-skin-aviva .mvp-playlist-selector-item:hover,
  .mvp-skin-aviva .mvp-chapter-item:hover {
    background: #d7e6eb;
    color: #fff;
  }
}
.mvp-skin-aviva .mvp-playlist-selector-item-active,
.mvp-skin-aviva .mvp-chapter-item-active {
  background: #d7e6eb;
  color: #fff;
}

.mvp-skin-aviva .mvp-playlist-selector-item-title,
.mvp-skin-aviva .mvp-chapter-item {
  color: #fff;
}

.mvp-skin-aviva .mvp-chapter-item-time,
.mvp-skin-aviva .mvp-playlist-selector-item-description {
  color: #ccc;
}

/* pollux */
@media (hover: hover) {
  .mvp-skin-pollux .mvp-playlist-selector-item:hover,
  .mvp-skin-pollux .mvp-chapter-item:hover {
    background: #eee;
    color: #fff;
  }
}
.mvp-skin-pollux .mvp-playlist-selector-item-active,
.mvp-skin-pollux .mvp-chapter-item-active {
  background: #eee;
  color: #fff;
}

.mvp-skin-pollux .mvp-playlist-selector-item-title,
.mvp-skin-pollux .mvp-chapter-item {
  color: #fff;
}

.mvp-skin-pollux .mvp-playlist-selector-item-description,
.mvp-skin-pollux .mvp-chapter-item-time {
  color: #ccc;
}

.mvp-skin-pollux .mvp-player-controls-bottom-right .mvp-prev-chapter-toggle,
.mvp-skin-pollux .mvp-player-controls-bottom-right .mvp-next-chapter-toggle {
  display: none !important;
}

.mvp-skin-pollux .mvp-chapter-menu-controls .mvp-contr-btn {
  width: 40px;
}

/* sirius */
@media (hover: hover) {
  .mvp-skin-sirius .mvp-playlist-selector-item:hover,
  .mvp-skin-sirius .mvp-chapter-item:hover {
    background: #3a3a3a;
    color: #fff;
  }
}
.mvp-skin-sirius .mvp-playlist-selector-item-active,
.mvp-skin-sirius .mvp-chapter-item-active {
  background: #3a3a3a;
  color: #fff;
}

.mvp-skin-sirius .mvp-playlist-selector-item-title,
.mvp-skin-sirius .mvp-chapter-item {
  color: #fff;
}

.mvp-skin-sirius .mvp-playlist-selector-item-description,
.mvp-skin-sirius .mvp-chapter-item-time {
  color: #ccc;
}

.mvp-skin-sirius .mvp-chapters-header,
.mvp-skin-sirius .mvp-chapters-footer {
  height: 40px;
}

/* aviva */
.mvp-skin-aviva .mvp-transcript-header-inner {
  color: #d7e6eb;
}

.mvp-skin-aviva .mvp-playlist-selector-search-input,
.mvp-skin-aviva .mvp-transcript-search-input,
.mvp-skin-aviva .mvp-chapters-search-input {
  background: #d7e6eb;
}

.mvp-skin-aviva .mvp-transcript-language-selector-wrap,
.mvp-skin-aviva .mvp-transcript-container-wrap,
.mvp-skin-aviva .mvp-chapters-container-wrap,
.mvp-skin-aviva .mvp-playlist-selector-container-wrap {
  background: #505663;
}

.mvp-skin-aviva .mvp-transcript-item {
  color: #fff;
}

@media (hover: hover) {
  .mvp-skin-aviva .mvp-transcript-item:hover {
    background: #d1e3e7;
    color: #737373;
  }
}
.mvp-skin-aviva .mvp-transcript-item-active {
  background: #d1e3e7;
  color: #737373;
}

.mvp-skin-aviva .mvp-chapters-header-title,
.mvp-skin-aviva .mvp-transcript-header-title {
  color: #d7e6eb;
}

/* pollux */
.mvp-skin-pollux .mvp-transcript-header-inner {
  color: #ccc;
}

.mvp-skin-pollux .mvp-playlist-selector-search-input,
.mvp-skin-pollux .mvp-transcript-search-input,
.mvp-skin-pollux .mvp-chapters-search-input {
  background: #eee;
}

.mvp-skin-pollux .mvp-transcript-language-selector-wrap,
.mvp-skin-pollux .mvp-transcript-container-wrap {
  background: #484e56;
}

.mvp-skin-pollux .mvp-transcript-item {
  color: #fff;
}

@media (hover: hover) {
  .mvp-skin-pollux .mvp-transcript-item:hover {
    background: #eee;
    color: #737373;
  }
}
.mvp-skin-pollux .mvp-transcript-item-active {
  background: #eee;
  color: #737373;
}

.mvp-skin-pollux .mvp-transcript-close {
  width: 40px !important;
}

/* sirius */
.mvp-skin-sirius .mvp-transcript-header-inner {
  color: #fff;
}

.mvp-skin-sirius .mvp-playlist-selector-search-input,
.mvp-skin-sirius .mvp-transcript-search-input,
.mvp-skin-sirius .mvp-chapters-search-input {
  background: #eee;
}

.mvp-skin-sirius .mvp-transcript-language-selector-wrap,
.mvp-skin-sirius .mvp-transcript-container-wrap {
  background: #363636;
}

.mvp-skin-sirius .mvp-transcript-item {
  color: #fff;
}

@media (hover: hover) {
  .mvp-skin-sirius .mvp-transcript-item:hover {
    background: #adadad;
    color: #fff;
  }
}
.mvp-skin-sirius .mvp-transcript-item-active {
  background: #adadad;
  color: #fff;
}

.mvp-skin-sirius .mvp-transcript-close {
  width: 40px !important;
}

.mvp-playlist-inner-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mvp-vrb .mvp-playlist-holder {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 320px;
  overflow: hidden;
}

.mvp-vrb.mvp-skin-aviva .mvp-playlist-holder,
.mvp-vb.mvp-skin-aviva .mvp-playlist-holder,
.mvp-hb.mvp-skin-aviva .mvp-playlist-holder {
  background: #353b49;
}

.mvp-vrb.mvp-skin-sirius .mvp-playlist-holder,
.mvp-vb.mvp-skin-sirius .mvp-playlist-holder,
.mvp-hb.mvp-skin-sirius .mvp-playlist-holder {
  background: #111;
}

.mvp-vrb.mvp-skin-pollux .mvp-playlist-holder,
.mvp-vb.mvp-skin-pollux .mvp-playlist-holder,
.mvp-hb.mvp-skin-pollux .mvp-playlist-holder {
  background: #323a45;
}

.mvp-vrb .mvp-playlist-holder {
  right: 0;
}

.mvp-vb .mvp-playlist-holder {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.mvp-hb .mvp-playlist-holder {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

/* drot scroll hb */
.mvp-hb.mvp-nt-scroll.mvp-ps-drot .mvp-playlist-holder {
  height: 96px;
}

.mvp-has-search-bar.mvp-hb.mvp-nt-scroll.mvp-ps-drot .mvp-playlist-holder {
  height: 146px;
}

.mvp-playlist-selector.mvp-hb.mvp-nt-scroll.mvp-ps-drot .mvp-playlist-holder {
  height: 146px;
}

.mvp-has-search-bar.mvp-playlist-selector.mvp-hb.mvp-nt-scroll.mvp-ps-drot .mvp-playlist-holder {
  height: 196px;
}

.mvp-has-chapters-holder.mvp-hb.mvp-nt-scroll.mvp-ps-drot .mvp-playlist-holder {
  height: 146px;
}

.mvp-has-chapters-holder.mvp-has-search-bar.mvp-hb.mvp-nt-scroll.mvp-ps-drot .mvp-playlist-holder {
  height: 171px;
}

.mvp-has-chapters-holder.mvp-has-search-bar.mvp-playlist-selector.mvp-hb.mvp-nt-scroll.mvp-ps-drot .mvp-playlist-holder {
  height: 221px;
}

/* dot scroll hb */
.mvp-hb.mvp-nt-scroll.mvp-ps-dot .mvp-playlist-holder {
  height: 184px;
}

.mvp-playlist-selector.mvp-hb.mvp-nt-scroll.mvp-ps-dot .mvp-playlist-holder {
  height: 234px;
}

.mvp-has-search-bar.mvp-hb.mvp-nt-scroll.mvp-ps-dot .mvp-playlist-holder {
  height: 234px;
}

.mvp-has-search-bar.mvp-playlist-selector.mvp-hb.mvp-nt-scroll.mvp-ps-dot .mvp-playlist-holder {
  height: 284px;
}

.mvp-has-chapters-holder.mvp-hb.mvp-nt-scroll.mvp-ps-dot .mvp-playlist-holder {
  height: 234px;
}

.mvp-has-chapters-holder.mvp-playlist-selector.mvp-hb.mvp-nt-scroll.mvp-ps-dot .mvp-playlist-holder {
  height: 259px;
}

.mvp-has-chapters-holder.mvp-has-search-bar.mvp-hb.mvp-nt-scroll.mvp-ps-dot .mvp-playlist-holder {
  height: 259px;
}

.mvp-has-chapters-holder.mvp-has-search-bar.mvp-playlist-selector.mvp-hb.mvp-nt-scroll.mvp-ps-dot .mvp-playlist-holder {
  height: 309px;
}

.mvp-playlist-switcher {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex: 1;
  overflow: hidden;
}

/*.mvp-playlist-selector-holder,*/
.mvp-vrb .mvp-playlist-inner,
.mvp-vb .mvp-playlist-inner,
.mvp-hb .mvp-playlist-inner {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.mvp-playlist-selector-holder {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: none;
}

.mvp-slide .mvp-playlist-selector-holder {
  transition: left 0.4s ease-in-out;
  left: 100%;
}

.mvp-alpha .mvp-playlist-selector-holder {
  left: 0;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.mvp-slide .mvp-playlist-selector-opened {
  left: 0;
}

.mvp-alpha .mvp-playlist-selector-opened {
  opacity: 1;
}

.mvp-hb .mvp-playlist-selector-container,
.mvp-hb .mvp-chapters-container,
.mvp-hb .mvp-playlist-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.mvp-hb .mvp-playlist-selector-item,
.mvp-hb .mvp-chapter-item,
.mvp-hb .mvp-playlist-item {
  flex-shrink: 0;
}

.mvp-vb .mvp-playlist-item,
.mvp-vrb .mvp-playlist-item {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.mvp-vb.mvp-ps-drot .mvp-playlist-item,
.mvp-vrb.mvp-ps-drot .mvp-playlist-item {
  margin-bottom: 1px;
}

.mvp-vb.mvp-ps-drot .mvp-playlist-item:last-child,
.mvp-vrb.mvp-ps-drot .mvp-playlist-item:last-child {
  margin-bottom: 0;
}

.mvp-hb .mvp-playlist-item {
  position: relative;
  top: 0;
  left: 0;
  width: 300px;
  overflow: hidden;
  cursor: pointer;
}

.mvp-hb.mvp-ps-drot .mvp-playlist-item {
  margin-right: 1px;
}

.mvp-hb.mvp-ps-drot .mvp-playlist-item:last-child {
  margin-right: 0;
}

.mvp-vrb.mvp-ps-drot .mvp-playlist-item,
.mvp-vb.mvp-ps-drot .mvp-playlist-item {
  min-height: 80px;
}

.mvp-hb.mvp-ps-drot .mvp-playlist-item {
  height: 100%;
}

.mvp-hb.mvp-ps-dot .mvp-playlist-item {
  height: 168px;
}

.mvp-playlist-item-selected {
  transition: background-color 0.3s ease-out;
}

.mvp-skin-aviva.mvp-ps-gdbt .mvp-playlist-item,
.mvp-skin-aviva.mvp-ps-gdrot .mvp-playlist-item {
  background: #353b49;
}

.mvp-skin-aviva.mvp-ps-drot .mvp-playlist-item-selected,
.mvp-skin-aviva.mvp-ps-gdbt .mvp-playlist-item-selected,
.mvp-skin-aviva.mvp-ps-gdrot .mvp-playlist-item-selected {
  background: #d7e6eb;
}

.mvp-skin-sirius.mvp-ps-gdbt .mvp-playlist-item,
.mvp-skin-sirius.mvp-ps-gdrot .mvp-playlist-item {
  background: #282828;
}

.mvp-skin-sirius.mvp-ps-drot .mvp-playlist-item-selected,
.mvp-skin-sirius.mvp-ps-gdbt .mvp-playlist-item-selected,
.mvp-skin-sirius.mvp-ps-gdrot .mvp-playlist-item-selected {
  background: #3a3a3a;
}

.mvp-skin-pollux.mvp-ps-gdbt .mvp-playlist-item,
.mvp-skin-pollux.mvp-ps-gdrot .mvp-playlist-item {
  background: #323a45;
}

.mvp-skin-pollux.mvp-ps-drot .mvp-playlist-item-selected,
.mvp-skin-pollux.mvp-ps-gdbt .mvp-playlist-item-selected,
.mvp-skin-pollux.mvp-ps-gdrot .mvp-playlist-item-selected {
  background: #eee;
}

.mvp-media-watched-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #909090;
  pointer-events: none;
}

.mvp-media-watched-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #ff0000;
}

.mvp-fav-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: 0.6;
}

.mvp-fav-indicator svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  color: #FFEB3B;
  fill: currentColor;
}

.mvp-context-add-to-fav-hidden {
  display: none;
}

.mvp-ps-drot .mvp-playlist-thumb {
  position: relative;
  margin: 5px;
  max-width: 100px;
  height: 70px;
  float: left;
  overflow: hidden;
}

.mvp-ps-dot .mvp-playlist-thumb {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mvp-ps-drot .mvp-thumbimg {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  /*width: 100%;*/
  height: 100%;
  object-fit: cover;
  min-width: 100%;
  max-width: none !important;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mvp-ps-dot .mvp-thumbimg {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: none !important;
  min-height: 100%;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mvp-vb.mvp-ps-dot .mvp-thumbimg {
  width: auto;
}

.mvp-ps-gdot .mvp-thumbimg,
.mvp-ps-gdbt .mvp-thumbimg {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: none !important;
  min-height: 100%;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mvp-ps-gdrot .mvp-thumbimg {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 100%;
  max-width: none !important;
  min-height: 100%;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mvp-playlist-thumb-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}

.mvp-playlist-thumb-preview-visible {
  opacity: 1;
}

.mvp-playlist-thumb-preview-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: visible !important;
  max-width: none !important;
  object-fit: contain;
}

.mvp-vb.mvp-ps-dot .mvp-thumbimg,
.mvp-ps-dot .mvp-playlist-holder-bottom .mvp-thumbimg {
  min-width: auto;
}

.mvp-playlist-duration {
  position: absolute;
  right: 3px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 2px;
  font-size: 12px;
  line-height: normal;
}

.mvp-playlist-info {
  display: flex;
  flex-direction: row;
}

.mvp-playlist-info-wrap {
  flex: 1;
}

.mvp-ps-drot .mvp-playlist-duration,
.mvp-ps-gdbt .mvp-playlist-duration,
.mvp-ps-gdrot .mvp-playlist-duration {
  bottom: 3px;
}

.mvp-ps-dot .mvp-playlist-duration,
.mvp-ps-gdot .mvp-playlist-duration {
  top: 3px;
}

.mvp-ps-drot .mvp-playlist-info {
  position: relative;
  margin: 5px;
  line-height: normal;
  min-height: 70px;
  overflow: hidden;
  text-align: left;
}

.mvp-ps-dot .mvp-playlist-info,
.mvp-ps-gdot .mvp-playlist-info {
  position: absolute;
  left: 0;
  padding: 10px;
  top: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  line-height: normal;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* z-index: 10;*/
}

.mvp-ps-dot .mvp-playlist-info,
.mvp-ps-gdot .mvp-playlist-info {
  top: 100%;
  height: auto;
  transition: transform 0.2s ease-out;
}

@media (hover: hover) {
  .mvp-ps-dot .mvp-playlist-item:hover .mvp-playlist-info,
  .mvp-ps-gdot .mvp-playlist-item:hover .mvp-playlist-info {
    transform: translateY(-99%);
  }
}
.mvp-ps-dot .mvp-playlist-item-selected .mvp-playlist-info,
.mvp-ps-gdot .mvp-playlist-item-selected .mvp-playlist-info {
  transform: translateY(-99%);
}

.mvp-skin-aviva.mvp-ps-dot .mvp-playlist-info,
.mvp-skin-aviva.mvp-ps-gdot .mvp-playlist-info {
  background: #353b49;
}

.mvp-skin-pollux.mvp-ps-dot .mvp-playlist-info,
.mvp-skin-pollux.mvp-ps-gdot .mvp-playlist-info {
  background: #323a45;
}

.mvp-skin-sirius.mvp-ps-dot .mvp-playlist-info,
.mvp-skin-sirius.mvp-ps-gdot .mvp-playlist-info {
  background: rgba(0, 0, 0, 0.5);
}

.mvp-ps-drot .mvp-playlist-title,
.mvp-ps-dot .mvp-playlist-title {
  font-size: 15px;
  line-height: normal;
}

.mvp-skin-aviva .mvp-playlist-title {
  color: #fff;
}

.mvp-skin-sirius .mvp-playlist-title {
  color: #fff;
}

.mvp-skin-pollux .mvp-playlist-title {
  color: #fff;
}

.mvp-playlist-play-count {
  display: inline-flex;
  font-size: 13px;
  padding: 0;
  margin: 0 10px 0 0;
  color: #bbb;
}

.mvp-playlist-published-date {
  display: inline-flex;
  font-size: 13px;
  padding: 0;
  margin: 0;
}

.mvp-playlist-published-date {
  color: #bbb;
}

.mvp-ps-drot .mvp-playlist-description,
.mvp-ps-dot .mvp-playlist-description {
  font-size: 11px;
  display: block;
  margin-top: 5px;
}

.mvp-skin-aviva .mvp-playlist-description {
  color: #999;
}

.mvp-skin-sirius .mvp-playlist-description {
  color: #777;
}

.mvp-skin-pollux .mvp-playlist-description {
  color: #666;
}

/* outer */
.mvp-outer {
  position: relative;
  left: 0;
  top: 0;
}

.mvp-outer .mvp-player-wrap {
  overflow: hidden;
}

.mvp-outer .mvp-player-holder {
  position: relative !important;
}

.mvp-outer .mvp-playlist-holder,
.mvp-outer .mvp-playlist-content {
  position: relative;
  overflow: hidden;
}

/* display grid */
.mvp-grid1 .mvp-playlist-content {
  display: grid;
  grid-gap: 1rem;
  justify-items: center;
}

.mvp-grid1.mvp-outer .mvp-playlist-content {
  grid-gap: 0;
}

@media (min-width: 600px) {
  .mvp-grid1 .mvp-playlist-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .mvp-grid1 .mvp-playlist-content {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* column count*/
.mvp-grid2 .mvp-playlist-content {
  column-count: 1;
  column-gap: 20px;
  position: relative;
}

@media (min-width: 600px) {
  .mvp-grid2 .mvp-playlist-content {
    column-count: 2;
  }
}
@media (min-width: 900px) {
  .mvp-grid2 .mvp-playlist-content {
    column-count: 3;
  }
}
.mvp-grid2 .mvp-playlist-item {
  break-inside: avoid;
}

/* display grid */
.mvp-grid3 .mvp-playlist-content {
  display: grid;
  grid-gap: 1rem;
  justify-items: center;
}

.mvp-grid3.mvp-outer .mvp-playlist-content {
  grid-gap: 0;
}

@media (min-width: 600px) {
  .mvp-grid3 .mvp-playlist-content {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 900px) {
  .mvp-grid3 .mvp-playlist-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* gdot */
.mvp-ps-gdot .mvp-playlist-item {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  float: left;
  overflow: hidden;
  cursor: pointer;
}

.mvp-ps-gdot .mvp-playlist-title {
  font-size: 16px;
}

.mvp-ps-gdot .mvp-playlist-description {
  font-size: 13px;
  display: block;
  margin-top: 5px;
}

/* gdbt */
.mvp-ps-gdbt .mvp-playlist-item {
  position: relative;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.mvp-ps-gdbt .mvp-playlist-thumb {
  position: relative;
  top: 0;
  margin: 10px 10px 0 10px;
  left: 0;
  /*padding-top: 56%;*/
  overflow: hidden;
}

.mvp-ps-gdot .mvp-playlist-thumb:after,
.mvp-ps-gdbt .mvp-playlist-thumb:after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 40px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .3);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

@media (hover: hover) {
  .mvp-ps-gdot .mvp-playlist-item:hover .mvp-playlist-thumb:after,
  .mvp-ps-gdbt .mvp-playlist-item:hover .mvp-playlist-thumb:after {
    border-color: transparent transparent transparent rgba(255, 255, 255, .8);
    transition: all .2s ease-in;
  }
  .mvp-ps-gdbt .mvp-playlist-item:hover .mvp-thumbimg {
    transform: scale(1.1);
    transition: all .2s ease-in;
  }
}
.mvp-ps-gdbt .mvp-playlist-info {
  position: relative;
  left: 0;
  top: 0;
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  line-height: normal;
  margin-bottom: 10px;
}

.mvp-ps-gdbt .mvp-playlist-title {
  font-size: 16px;
}

.mvp-ps-gdbt .mvp-playlist-description {
  font-size: 13px;
  display: block;
  margin-top: 5px;
}

/* gdrot */
.mvp-ps-gdrot .mvp-playlist-item {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.mvp-ps-gdrot .mvp-playlist-thumb {
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  max-width: 40%;
  flex-shrink: 0;
}

.mvp-ps-gdrot .mvp-playlist-thumb:after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 40px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .3);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

@media (hover: hover) {
  .mvp-ps-gdrot .mvp-playlist-item:hover .mvp-playlist-thumb:after {
    border-color: transparent transparent transparent rgba(255, 255, 255, .8);
    transition: all .2s ease-in;
  }
  .mvp-ps-gdrot .mvp-playlist-item:hover .mvp-thumbimg {
    transform: scale(1.1);
    transition: all .2s ease-in;
  }
}
.mvp-ps-gdrot .mvp-playlist-info {
  position: relative;
  left: 0;
  top: 0;
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  line-height: normal;
  margin-bottom: 10px;
}

.mvp-ps-gdrot .mvp-playlist-title {
  font-size: 16px;
}

.mvp-ps-gdrot .mvp-playlist-description {
  font-size: 13px;
  display: block;
  margin-top: 5px;
}

/* lightbox */
.mvp-lightbox-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2147483640 !important;
  opacity: 0;
  display: none;
  transition: opacity .3s ease-out;
}

.mvp-lightbox {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.mvp-lightbox-center {
  top: 50%;
  transform: translateY(-50%);
}

.mvp-lightbox-inner {
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1220px;
}

.mvp-lightbox-content-inner {
  position: relative;
  background: #fff;
  padding: 10px;
}

.mvp-lightbox-close {
  position: absolute;
  top: 0;
  right: -40px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
}

.mvp-lightbox-prev {
  position: absolute;
  top: 50%;
  left: -40px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
}

.mvp-lightbox-next {
  position: absolute;
  top: 50%;
  right: -40px;
  width: 40px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 40px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
}

.mvp-lightbox-close svg,
.mvp-lightbox-prev svg,
.mvp-lightbox-next svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #aaa;
  fill: currentColor;
}

@media (max-width: 1200px) {
  .mvp-lightbox-content-inner {
    margin-top: 50px;
  }
  .mvp-lightbox-close {
    right: auto;
    top: -50px;
    left: 50%;
    margin-top: 5px;
    margin-left: -20px;
  }
  .mvp-lightbox-prev {
    top: -50px;
    margin-top: 5px;
    left: 50%;
    margin-left: -100px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .mvp-lightbox-next {
    top: -50px;
    left: 50%;
    right: auto;
    margin-top: 5px;
    margin-left: 60px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
@container mvp_player_query (max-width: 1200px) {
  .mvp-lightbox-content-inner {
    margin-top: 50px;
  }
  .mvp-lightbox-close {
    right: auto;
    top: -50px;
    left: 50%;
    margin-top: 5px;
    margin-left: -20px;
  }
  .mvp-lightbox-prev {
    top: -50px;
    margin-top: 5px;
    left: 50%;
    margin-left: -100px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .mvp-lightbox-next {
    top: -50px;
    left: 50%;
    right: auto;
    margin-top: 5px;
    margin-left: 60px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
.mvp-wall {
  position: relative;
  left: 0;
  top: 0;
}

.mvp-wall .mvp-player-holder {
  position: relative !important;
}

.mvp-wall .mvp-playlist-holder,
.mvp-wall .mvp-playlist-content {
  overflow: hidden;
}

/* load more button */
.mvp-load-more-btn {
  display: inline-block;
  padding: 10px 50px;
  font-size: 15px;
  position: relative;
  text-align: center;
  margin: 10px 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  opacity: 0;
  transition: all .3s ease-out;
  text-transform: uppercase;
  align-self: flex-start;
}

@media (hover: hover) {
  .mvp-load-more-btn:hover {
    background-color: #565e72;
  }
}
.mvp-skin-aviva .mvp-load-more-btn {
  background: #353b49;
  color: #eee;
}

@media (hover: hover) {
  .mvp-skin-aviva .mvp-load-more-btn:hover {
    background: #5f687d;
  }
}
.mvp-skin-pollux .mvp-load-more-btn {
  background: #323a45;
  color: #eee;
}

@media (hover: hover) {
  .mvp-skin-pollux .mvp-load-more-btn:hover {
    background: #596370;
  }
}
.mvp-skin-sirius .mvp-load-more-btn {
  background: #282828;
  color: #eee;
}

@media (hover: hover) {
  .mvp-skin-sirius .mvp-load-more-btn:hover {
    background: #3a3a3a;
    color: #fff;
  }
}
/* up next */
.mvp-upnext-wrap {
  position: absolute;
  bottom: 60px;
  right: -340px;
  transition: all 0.3s ease-in-out;
  direction: ltr;
}

.mvp-upnext-wrap2 {
  position: absolute;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  direction: ltr;
}

.mvp-upnext-wrap2-visible {
  opacity: 1;
}

.mvp-upnext-wrap.mvp-upnext-visible {
  right: 10px;
}

.mvp-upnext-inner {
  display: flex;
  position: relative;
  height: 62px;
  max-width: 330px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.mvp-upnext-thumb-wrap {
  width: 100px;
  flex: 0 0 auto;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.mvp-upnext-thumb {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
}

.mvp-upnext-duration {
  position: absolute;
  right: 3px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 2px;
  font-size: 12px;
  bottom: 3px;
  line-height: normal;
}

.mvp-upnext-info {
  font-size: 14px;
  line-height: 1.35;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 12px 40px 5px 15px;
  display: flex;
  flex-flow: column wrap;
  transition: color .1s ease-out;
}

.mvp-skin-aviva .mvp-upnext-info,
.mvp-skin-sirius .mvp-upnext-info,
.mvp-skin-pollux .mvp-upnext-info {
  color: #eee;
}

@media (hover: hover) {
  .mvp-skin-aviva .mvp-upnext-info:hover,
  .mvp-skin-sirius .mvp-upnext-info:hover,
  .mvp-skin-pollux .mvp-upnext-info:hover {
    color: #fff;
  }
}
.mvp-upnext-header {
  font-weight: bold;
}

.mvp-upnext-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.mvp-upnext-close {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 40px !important;
  width: 40px !important;
}

/* chapters highlight make visible */
.mvp-seekbar.mvp-seekbar-chapters {
  overflow: visible !important;
}

.mvp-seekbar.mvp-seekbar-chapters .mvp-progress-bg {
  overflow: visible !important;
}

.mvp-chapter-indicator {
  position: absolute;
  box-sizing: border-box;
}

.mvp-skin-aviva .mvp-seekbar .mvp-chapter-indicator {
  top: 22px;
  height: 5px;
}

.mvp-skin-aviva .mvp-solo-seekbar .mvp-chapter-indicator {
  top: 0;
  height: 5px;
}

.mvp-skin-pollux .mvp-seekbar .mvp-chapter-indicator {
  top: 3px;
  height: 7px;
}

.mvp-skin-pollux .mvp-solo-seekbar .mvp-chapter-indicator {
  top: 0;
  height: 7px;
}

.mvp-skin-sirius .mvp-seekbar .mvp-chapter-indicator {
  top: 25px;
  height: 1px;
}

.mvp-skin-sirius .mvp-solo-seekbar .mvp-chapter-indicator {
  top: 0;
  height: 1px;
}

.mvp-chapter-menu-item-title {
  display: block;
}

.mvp-chapter-menu-item-start {
  margin-top: 3px;
  display: block;
  font-size: 13px;
  color: #aaa;
}

.mvp-chapter-indicator {
  border-right: 2px solid #ffff00;
  pointer-events: none;
}

.mvp-chapter-indicator:last-child {
  border-right: none !important;
}

.mvp-chapter-indicator-highlight {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 0;
  padding-top: 2px;
}

.mvp-skin-aviva .mvp-chapter-indicator-highlight-visible,
.mvp-skin-pollux .mvp-chapter-indicator-highlight-visible {
  border-top: 2px solid transparent;
}

.mvp-skin-sirius .mvp-chapter-indicator-highlight-visible {
  border-top: 1px solid transparent;
}

.mvp-skin-aviva .mvp-chapter-indicator-highlight-visible,
.mvp-skin-sirius .mvp-chapter-indicator-highlight-visible,
.mvp-skin-pollux .mvp-chapter-indicator-highlight-visible {
  border-top-color: rgba(255, 255, 255, 0.8);
}

/* chapters menu*/
.mvp-chapter-menu-holder {
  display: none;
  z-index: 50;
  opacity: 0;
  transition: opacity .3s ease-out;
}

.mvp-chapter-menu-wrap {
  position: absolute;
  z-index: 50;
  padding: 0px 15px 10px 10px;
  box-sizing: border-box;
  right: 10px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

.mvp-chapter-menu-controls {
  display: flex;
  flex-direction: row;
}

.mvp-chapter-menu-controls .mvp-contr-btn {
  width: 40px !important;
  height: 40px !important;
}

.mvp-skin-aviva .mvp-chapter-menu-wrap {
  bottom: 60px;
  max-height: calc(100% - 60px);
}

.mvp-skin-pollux .mvp-chapter-menu-wrap {
  bottom: 60px;
  max-height: calc(100% - 60px);
}

.mvp-skin-sirius .mvp-chapter-menu-wrap {
  bottom: 60px;
  max-height: calc(100% - 60px);
}

.mvp-chapter-menu-header {
  display: flex;
}

.mvp-chapter-menu-header-title {
  font-size: 15px;
  padding-left: 10px;
  color: #ccc;
  flex: 1;
  display: flex;
  align-items: center;
}

.mvp-chapter-menu {
  overflow: auto;
  padding: 0 10px 0 0 !important;
  margin: 0 !important;
  scrollbar-width: thin;
}

.mvp-chapter-menu::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.mvp-chapter-menu::-webkit-scrollbar-thumb {
  background: #999;
}

.mvp-chapter-menu::-webkit-scrollbar-track {
  background: #eee;
}

.mvp-chapter-menu-item {
  font-size: 16px;
  padding: 6px;
  cursor: pointer;
  list-style-type: none;
  margin: 0;
  line-height: 1 !important;
  user-select: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.mvp-chapter-menu-item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-right: 10px;
}

.mvp-chapter-toggle.mvp-contr-btn svg {
  height: 16px;
}

.mvp-skin-aviva .mvp-chapter-menu-item {
  color: #eee;
}

.mvp-skin-aviva .mvp-chapter-menu-item-active {
  background: #fff;
  color: #555;
}

.mvp-skin-aviva .mvp-chapter-menu-item-active .mvp-chapter-item-button svg {
  color: #aaa;
}

.mvp-skin-pollux .mvp-chapter-menu-item {
  color: #eee;
}

.mvp-skin-pollux .mvp-chapter-menu-item-active {
  background: #fff;
  color: #555;
}

.mvp-skin-pollux .mvp-chapter-menu-item-active .mvp-chapter-item-button svg {
  color: #aaa;
}

.mvp-skin-sirius .mvp-chapter-menu-item {
  color: #eee;
  font-size: 13px;
}

.mvp-skin-sirius .mvp-chapter-menu-item-active {
  background: #fff;
  color: #555;
}

.mvp-skin-sirius .mvp-chapter-menu-item-active .mvp-chapter-item-button svg {
  color: #aaa;
}

/* solo seekbar */
.mvp-solo-seekbar {
  position: absolute;
  height: 5px;
  touch-action: none;
  left: 0;
  bottom: 0;
  width: 100%;
  display: none;
}

.mvp-skin-sirius .mvp-solo-seekbar {
  height: 1px;
}

.mvp-solo-seekbar-visible {
  display: block;
}

.mvp-solo-progress-level {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  /*background: 0 0;*/
  border: 0;
  height: 5px;
  left: 0;
  padding: 0;
}

.mvp-skin-aviva .mvp-solo-progress-level::-webkit-progress-bar {
  background-color: #ccc;
}

.mvp-skin-aviva .mvp-solo-progress-level::-webkit-progress-value {
  background-color: #62768f;
}

.mvp-skin-aviva .mvp-solo-progress-level::-moz-progress-bar {
  background-color: #62768f;
}

.mvp-skin-pollux .mvp-solo-progress-level::-webkit-progress-bar {
  background-color: #6e7782;
}

.mvp-skin-pollux .mvp-solo-progress-level::-webkit-progress-value {
  background-color: #de5362;
}

.mvp-skin-pollux .mvp-solo-progress-level::-moz-progress-bar {
  background-color: #de5362;
}

.mvp-skin-sirius .mvp-solo-progress-level::-webkit-progress-bar {
  background-color: #bbb;
}

.mvp-skin-sirius .mvp-solo-progress-level::-webkit-progress-value {
  background-color: #f0f;
}

.mvp-skin-sirius .mvp-solo-progress-level::-moz-progress-bar {
  background-color: #f0f;
}

/* ad seekbar */
.mvp-ad-seekbar {
  position: absolute;
  touch-action: none;
  left: 0;
  bottom: 0;
  width: 100%;
  display: none;
  opacity: 0;
}

.mvp-skin-aviva .mvp-ad-seekbar,
.mvp-skin-pollux .mvp-ad-seekbar {
  height: 5px;
}

.mvp-skin-sirius .mvp-ad-seekbar {
  height: 1px;
}

.mvp-ad-progress-level {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  /*background: 0 0;*/
  border: 0;
  left: 0;
  padding: 0;
}

.mvp-skin-aviva .mvp-ad-progress-level,
.mvp-skin-pollux .mvp-ad-progress-level {
  height: 5px;
}

.mvp-skin-sirius .mvp-ad-progress-level {
  height: 1px;
}

.mvp-ad-progress-level::-webkit-progress-bar {
  background-color: #ccc;
}

.mvp-ad-progress-level::-webkit-progress-value {
  background-color: #ff0;
}

.mvp-ad-progress-level::-moz-progress-bar {
  background-color: #ff0;
}

.mvp-ad-info {
  position: absolute;
  color: #fff;
  user-select: none;
  padding: 5px 8px;
  margin: 0;
  right: 5px;
  bottom: 10px;
  white-space: nowrap;
  font-size: 12px;
  direction: ltr !important;
  background: rgba(0, 0, 0, 0.3);
  line-height: normal;
}

.mvp-ad-info-title,
.mvp-ad-info-time {
  display: inline-block;
}

.mvp-ad-info-start {
  position: absolute;
  color: #fff;
  user-select: none;
  padding: 5px 8px;
  margin: 0;
  right: -200px;
  bottom: 0;
  margin-bottom: 10px;
  white-space: nowrap;
  font-size: 12px;
  direction: ltr !important;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
}

.mvp-ad-info-start-title,
.mvp-ad-info-start-time {
  display: inline-block;
}

.mvp-ad-info-start-visible {
  right: 5px;
}

.mvp-ad-info-start-controls-align {
  margin-bottom: 60px;
}

/* advert */
.mvp-ad-skip-btn {
  position: absolute;
  width: 220px;
  height: 60px;
  left: -300px;
  bottom: 30px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
}

.mvp-ad-skip-btn-visible {
  left: 20px;
}

.mvp-ad-skip-msg {
  position: absolute;
  font-size: 13px;
  left: 0px;
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mvp-ad-skip-msg-hidden {
  display: none !important;
}

.mvp-ad-skip-no-thumb .mvp-ad-skip-msg {
  width: 100% !important;
  font-size: 16px !important;
}

.mvp-skin-aviva .mvp-ad-skip-msg,
.mvp-skin-aviva .mvp-ad-skip-msg-end,
.mvp-skin-sirius .mvp-ad-skip-msg,
.mvp-skin-sirius .mvp-ad-skip-msg-end,
.mvp-skin-pollux .mvp-ad-skip-msg,
.mvp-skin-pollux .mvp-ad-skip-msg-end {
  color: #eee;
}

@media (hover: hover) {
  .mvp-skin-aviva .mvp-ad-skip-msg:hover,
  .mvp-skin-aviva .mvp-ad-skip-msg-end:hover,
  .mvp-skin-sirius .mvp-ad-skip-msg:hover,
  .mvp-skin-sirius .mvp-ad-skip-msg-end:hover,
  .mvp-skin-pollux .mvp-ad-skip-msg:hover,
  .mvp-skin-pollux .mvp-ad-skip-msg-end:hover {
    color: #fff;
  }
}
.mvp-ad-skip-msg .mvp-ad-skip-msg-text {
  color: inherit !important;
  text-align: center !important;
  line-height: 1.4 !important;
  padding: 5px !important;
  margin: 0 !important;
}

.mvp-ad-skip-thumb {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  overflow: hidden;
  height: 100%;
}

.mvp-ad-skip-thumb img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  width: 100%;
}

.mvp-ad-skip-msg-end {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  font-size: 22px !important;
  text-align: center !important;
  line-height: 60px !important;
  direction: ltr !important;
}

@media (max-width: 400px) {
  .mvp-ad-skip-btn {
    width: 180px;
    height: 50px;
  }
  .mvp-ad-skip-msg-end {
    line-height: 50px !important;
  }
}
@container mvp_player_query (max-width: 500px) {
  .mvp-ad-skip-btn {
    width: 180px;
    height: 50px;
  }
  .mvp-ad-skip-msg-end {
    line-height: 50px !important;
  }
}
/* ad markers */
.mvp-ad-indicator {
  position: absolute;
  width: 2px;
  background: yellow;
  pointer-events: none;
}

.mvp-skin-aviva .mvp-seekbar .mvp-ad-indicator {
  height: 5px;
  top: 22px;
}

.mvp-skin-aviva .mvp-solo-seekbar .mvp-ad-indicator {
  height: 5px;
  top: 0;
}

.mvp-skin-pollux .mvp-seekbar .mvp-ad-indicator {
  height: 7px;
  top: 3px;
}

.mvp-skin-pollux .mvp-solo-seekbar .mvp-ad-indicator {
  height: 7px;
  top: 0;
}

.mvp-skin-sirius .mvp-seekbar .mvp-ad-indicator {
  height: 1px;
  top: 25px;
}

.mvp-skin-sirius .mvp-solo-seekbar .mvp-ad-indicator {
  height: 1px;
  top: 0;
}

/* ad controls */
.mvp-ad-controls {
  position: absolute;
  right: 0;
  top: 0;
  margin: 5px;
  height: 40px;
  display: none;
  opacity: 0;
}

.mvp-ad-controls .mvp-contr-btn {
  margin-left: 1px;
  width: 40px !important;
  height: 40px !important;
}

.mvp-ad-controls .mvp-contr-btn svg {
  height: 16px;
}

.mvp-btn.mvp-btn-volume-up {
  display: block;
}

/*annotations */
.mvp-annotation {
  position: absolute;
  display: none;
  opacity: 0;
  max-width: 100%;
  transition: opacity 300ms ease-out;
}

.mvp-annotation-visible {
  opacity: 1;
}

.mvp-annotation .adsbygoogle {
  vertical-align: top;
}

.mvp-annotation-close {
  width: 20px;
  height: 20px;
  position: absolute;
  cursor: pointer;
  padding: 5px;
  background: rgba(0, 0, 0, 0.6);
  box-sizing: content-box;
}

.mvp-annotation-close svg {
  color: #fff;
  fill: currentColor;
}

@media (hover: hover) {
  .mvp-annotation-close:hover {
    opacity: 0.9;
  }
}
.mvp-annotation-close-tl {
  top: 0;
  left: 0;
}

.mvp-annotation-close-tr {
  top: 0;
  right: 0;
}

.mvp-annotation-close-bl {
  bottom: 0;
  left: 0;
}

.mvp-annotation-close-br {
  bottom: 0;
  right: 0;
}

.mvp-annotation-close svg {
  display: block;
  height: 100%;
  margin: 0 auto;
}

.mvp-annotation-position-bc {
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.mvp-annotation-position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* img */
.mvp-annotation img {
  max-width: 100vw;
  display: block;
  margin: auto;
}

.mvp-annotation {
  z-index: 99;
}

/* popup ads */
.mvp-popup-holder {
  display: none;
  height: 100%;
  overflow-y: auto;
  z-index: 999;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
}

.mvp-popup-holder-visible {
  display: flex;
}

.mvp-popup-close {
  width: 20px;
  height: 20px;
  position: absolute;
  cursor: pointer;
  padding: 5px;
  background: rgba(0, 0, 0, 0.6);
  box-sizing: content-box;
  top: 0;
  right: 0;
  z-index: 1000;
}

.mvp-popup-close-global-hidden {
  display: none;
}

.mvp-popup-close svg {
  fill: currentColor;
  color: #fff;
}

@media (hover: hover) {
  .mvp-popup-close:hover {
    opacity: 0.9;
  }
}
.mvp-popup-close svg {
  display: block;
  height: 100%;
  margin: 0 auto;
}

.mvp-popup {
  display: none;
  transition: opacity 300ms ease-out;
  opacity: 0;
}

.mvp-popup-visible {
  opacity: 1;
}

.mvp-annotation-img,
.mvp-popup-img {
  display: block;
  max-width: 100%;
}

.mvp-popup-iframe {
  max-width: 80%;
  width: 100%;
  max-height: 400px;
  height: 100%;
}

.mvp-popup-iframe iframe {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 700px) {
  .mvp-popup-close {
    width: 30px;
    height: 30px;
    /*position: fixed;*/
  }
  .mvp-popup-holder {
    align-items: flex-start;
  }
  .mvp-popup-iframe {
    max-width: 100%;
  }
}
/* vast */
.mvp-annotation-non-linear {
  display: block;
}

.mvp-vast-nonlinear {
  display: block;
}

.mvp-hidden {
  display: none !important;
}

.mvp-visible {
  opacity: 1 !important;
  transition: opacity 500ms ease-out;
}

.mvp-visible-fast {
  opacity: 1 !important;
  transition: opacity 150ms ease-out;
}

.mvp-holder-visible {
  opacity: 1 !important;
}

.mvp-holder-visible-top {
  top: 100% !important;
}

.mvp-slideshow-visible {
  opacity: 1 !important;
  transition: opacity 1300ms ease-out;
}

#mvp-playlist-list {
  display: none;
}

/* shadows */
.mvp-shadow-effect1 {
  box-shadow: 0 10px 6px -6px #777;
}

.mvp-shadow-effect2:after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 1px;
  z-index: -1;
  transform: scale(.9);
  box-shadow: 0 4px 30px 5px #000000;
}

.mvp-shadow-effect3:before,
.mvp-shadow-effect3:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.mvp-shadow-effect3:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.mvp-shadow-effect4 {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.mvp-shadow-effect4:before,
.mvp-shadow-effect4:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  top: 50%;
  bottom: 0;
  left: 10px;
  right: 10px;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
}

.mvp-shadow-effect4:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}

.mvp-shadow-effect5 {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.mvp-shadow-effect5:before,
.mvp-shadow-effect5:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  top: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
}

.mvp-shadow-effect5:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}

.mvp-shadow-effect6 {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.mvp-shadow-effect6:before,
.mvp-shadow-effect6:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
}

.mvp-shadow-effect6:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}

.mvp-theater {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mvp-force-playlist-show {
  position: absolute !important;
  opacity: 0 !important;
  left: -10000px !important;
  display: block !important;
}

/* search bar */
.mvp-playlist-bar {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 50px;
}

.mvp-input-field {
  display: inline-block;
  position: relative;
  height: 28px !important;
  padding: 0 5px !important;
  box-sizing: border-box;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #999 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  user-select: text;
  font-size: 13px !important;
  width: 170px !important;
  letter-spacing: normal;
}

.mvp-pwd-field.mvp-input-field {
  height: auto;
}

.mvp-input-field::placeholder {
  color: inherit !important;
}

.mvp-skin-aviva .mvp-search-field {
  background: #d7e6eb !important;
}

.mvp-skin-pollux .mvp-search-field {
  background: #eee !important;
}

.mvp-skin-sirius .mvp-search-field {
  background: #eee !important;
}

.mvp-vrb .mvp-playlist-filter-msg,
.mvp-hb .mvp-playlist-filter-msg,
.mvp-vb .mvp-playlist-filter-msg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  pointer-events: none;
}

.mvp-outer .mvp-playlist-filter-msg,
.mvp-wall .mvp-playlist-filter-msg,
.mvp-grid .mvp-playlist-filter-msg {
  position: relative;
  text-align: center;
  margin: 50px;
  display: none;
}

.mvp-playlist-filter::placeholder {
  color: inherit !important;
}

.mvp-vrb .mvp-playlist-filter-msg span,
.mvp-hb .mvp-playlist-filter-msg span,
.mvp-vb .mvp-playlist-filter-msg span {
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

.mvp-outer .mvp-playlist-filter-msg span,
.mvp-wall .mvp-playlist-filter-msg span,
.mvp-grid .mvp-playlist-filter-msg span {
  position: relative;
  font-size: 22px;
  text-transform: uppercase;
}

.mvp-skin-aviva .mvp-playlist-filter-msg span {
  color: #d7e6eb;
}

.mvp-skin-pollux .mvp-playlist-filter-msg span {
  color: #eee;
}

.mvp-skin-sirius .mvp-playlist-filter-msg span {
  color: #eee;
}

/* live stream note */
.mvp-live-note {
  position: relative;
  float: left;
  margin: 0 10px;
  height: 100%;
  display: none;
}

.mvp-live-note-inner {
  display: flex;
  height: 100%;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.mvp-live-note-icon {
  width: 8px;
  height: 8px;
  background: #ff0000;
  border-radius: 100%;
}

.mvp-live-note-title {
  font-size: 13px !important;
  color: #fff;
  margin-left: 5px;
}

.mvp-skin-aviva .mvp-live-note {
  height: 50px;
}

.mvp-skin-pollux .mvp-live-note {
  height: 25px;
}

.mvp-skin-pollux .mvp-live-note-icon {
  background: #de5362;
}

/* share colors */
.mvp-share-item[data-type=facebook]:hover svg {
  color: #3b5998 !important;
}

.mvp-share-item[data-type=twitter]:hover svg {
  color: #00aced !important;
}

.mvp-share-item[data-type=tumblr]:hover svg {
  color: #34526f !important;
}

.mvp-share-item[data-type=whatsapp]:hover svg {
  color: #25D366 !important;
}

.mvp-share-item[data-type=linkedin]:hover svg {
  color: #007bb6 !important;
}

.mvp-share-item[data-type=reddit]:hover svg {
  color: #FF4301 !important;
}

.mvp-share-item[data-type=digg]:hover svg {
  color: #005be2 !important;
}

.mvp-share-item[data-type=pinterest]:hover svg {
  color: #cb2027 !important;
}

/* rel pagination */
.mvp-rel-holder {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #222;
  display: none;
  z-index: 50;
}

.mvp-slide .mvp-rel-holder {
  transition: top 0.4s ease-out;
  top: -100%;
}

.mvp-alpha .mvp-rel-holder {
  top: 0;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.mvp-rel-playlist-holder {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 50px;
  overflow: hidden;
}

.mvp-rel-playlist-inner {
  overflow: hidden;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  transition: height ease-out 0.3s;
}

.mvp-rel-playlist-content {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: none;
  opacity: 0;
  transition-property: transform;
  transition-timing-function: ease-out;
  transition-duration: 0.4s;
}

.mvp-rel-cont {
  position: relative;
  height: 100%;
  float: left;
}

.mvp-rel-box {
  position: relative;
  float: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: opacity 200ms ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #1b1b1b;
  opacity: 0.8;
}

.mvp-rel-box-mobile {
  opacity: 1;
}

@media (hover: hover) {
  .mvp-rel-box:hover {
    opacity: 1;
  }
}
.mvp-rel-thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mvp-rel-thumbimg {
  position: absolute;
  width: 100%;
  width: calc(100% + 2px);
  min-height: 100%;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 500ms ease-in;
  opacity: 0;
}

.mvp-rel-title {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  padding: 5px;
  font-size: 15px;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}

.mvp-rel-duration {
  position: absolute;
  right: 3px;
  top: 3px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px;
  font-size: 12px;
  line-height: normal;
}

/* nav */
.mvp-rel-prev,
.mvp-rel-next,
.mvp-rel-close {
  position: absolute;
  transition: background-color 100ms ease-out;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 100%;
  line-height: 50px;
  cursor: pointer;
  display: none;
  user-select: none;
}

.mvp-rel-close {
  display: block;
}

.mvp-rel-prev,
.mvp-rel-next {
  top: 50%;
  transform: translateY(-50%);
}

.mvp-rel-prev {
  left: 0;
}

.mvp-rel-next {
  right: 0;
}

.mvp-rel-close {
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.mvp-rel-prev svg,
.mvp-rel-next svg,
.mvp-rel-close svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: currentColor;
  color: #e9e9e9;
}

@media (hover: hover) {
  .mvp-rel-prev:hover svg,
  .mvp-rel-next:hover svg,
  .mvp-rel-close:hover svg {
    color: #fff;
  }
}
.mvp-rel-prev svg,
.mvp-rel-next svg {
  height: 50px;
}

.mvp-rel-close svg {
  height: 30px;
}

@media (max-width: 500px) {
  .mvp-rel-title {
    font-size: 13px;
  }
}
@container mvp_player_query (max-width: 500px) {
  .mvp-rel-title {
    font-size: 13px;
  }
}
/*pagination */
.mvp-pagination-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.mvp-pagination-container {
  position: relative;
  padding: 10px 0;
  display: inline-flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.mvp-pagination-page {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  margin-left: 10px;
  cursor: pointer;
  box-sizing: border-box;
  background-color: #efefef;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: bold;
  color: #616872;
  border-radius: 4px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.mvp-pagination-currentpage {
  cursor: default !important;
}

.mvp-pagination-dots {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  margin-left: 10px;
  box-sizing: border-box;
}

.mvp-pagination-next,
.mvp-pagination-prev {
  text-transform: uppercase;
}

@media (hover: hover) {
  .mvp-pagination-page:hover {
    background-color: #518acb;
    color: #fff;
  }
}
.mvp-pagination-currentpage {
  background-color: #518acb;
  color: #fff;
}

.mvp-pagination-hidden {
  display: none !important;
}

.mvp-playlist-description-clamp {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.mvp-progress-sizing {
  transition: none !important;
  opacity: 0 !important;
}

.mvp-search-hide {
  transition: opacity 0.3s ease-out;
  opacity: 0;
}

.mvp-yt-quota {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 20px;
  background: #fff;
  color: #333;
}

.mvp-cast-message-wrap {
  position: absolute;
  top: 10px;
  left: -500px;
  transition: left 0.3s ease-in-out;
}

.mvp-cast-message-wrap-visible {
  left: 10px;
}

.mvp-cast-message {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: 10px 12px;
  max-width: none;
  max-height: none;
  border: none;
  line-height: 1;
  backface-visibility: visible;
  font-size: 12px;
  text-align: left;
  background: #353b49;
  color: #ccc;
  white-space: nowrap;
  border-radius: 3px;
}

.mvp-cast-message svg {
  height: 25px;
  fill: currentColor;
  color: #fff;
}

.mvp-cast-message-inner {
  margin-top: 5px;
}

.mvp-cast-message-connect {
  font-size: 16px;
}

.mvp-cast-message-state {
  display: none;
}

.mvp-cast-toggle svg {
  height: 17px !important;
}

.mvp-cast-state {
  font-size: 20px;
  margin-bottom: 15px;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #00f 25%, red 25%, red 50%, #ff0 50%, #ff0 75%, green 75%) 5;
}

.mvp-cast-title {
  font-size: 20px;
}

.mvp-cast-subtitle {
  font-size: 16px;
  margin-top: 5px;
}

/*  playlist display frontend */
.mvp-playlist-display-header {
  font-size: 28px;
  text-align: center;
}

.mvp-playlist-display-wrap-inner {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.mvp-playlist-display-item {
  position: relative;
  overflow: hidden;
  margin: 3px;
  text-align: center;
  max-width: 300px;
  background: #fff;
  width: 230px;
}

.mvp-playlist-display-item-inner {
  position: relative;
}

.mvp-playlist-display-item-thumb {
  display: block;
  margin: 0 auto;
  cursor: pointer;
  min-width: 100%;
}

.mvp-playlist-display-item-inner:after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 40px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .3);
  transform: translateX(-50%) translateY(-50%);
}

@media (hover: hover) {
  .mvp-playlist-display-item:hover .mvp-playlist-display-item-inner:after {
    border-color: transparent transparent transparent rgba(255, 255, 255, .8);
    transition: all .2s ease-in;
  }
}
.mvp-playlist-display-item-active .mvp-playlist-display-item-inner:after {
  border-color: transparent transparent transparent rgba(255, 255, 255, .8);
  transition: all .2s ease-in;
}

.mvp-playlist-display-item-playing {
  position: absolute;
  bottom: 1px;
  right: 1px;
  color: #fff;
  font-size: 13px;
  padding: 0px 5px;
  background: #00bcd4;
  display: none;
}

.mvp-playlist-display-item-active .mvp-playlist-display-item-playing {
  display: block;
}

.mvp-playlist-display-item-title {
  color: #666;
  text-align: center;
  font-size: 20px;
}

.mvp-playlist-display-item-description {
  margin: 10px;
  color: #999;
  font-size: 14px;
}

.mvp-scroll-content {
  scrollbar-width: thin;
}

.mvp-scroll-content::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.mvp-scroll-content::-webkit-scrollbar-thumb {
  background: #999;
}

.mvp-scroll-content::-webkit-scrollbar-track {
  background: #eee;
}

.mvp-scrollable-y {
  overflow-y: auto !important;
}

.mvp-scrollable-x {
  overflow-x: auto !important;
}

/* zoom */
.mvp-zoom-menu {
  height: 160px;
  position: relative;
}

.mvp-zoom-control-wrap {
  position: absolute;
  top: 5px;
  left: 31px;
  width: 34px;
  height: 120px;
  cursor: pointer;
  touch-action: none;
}

.mvp-zoom-reset-btn {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 40px;
  cursor: pointer;
}

.mvp-zoom-reset-btn {
  color: #d7e6eb;
  transition: all 0.3s;
}

@media (hover: hover) {
  .mvp-zoom-reset-btn:hover {
    background: #fff;
    color: #555;
  }
}
.mvp-zoom-bg {
  position: absolute;
  height: 100px;
  top: 10px;
  left: 14px;
  width: 5px;
  background: #d1e3e7;
}

.mvp-zoom-level {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #62768f;
}

.mvp-zoom-control {
  position: absolute;
  width: 100px;
  top: 1px;
  left: 10px;
  height: 100%;
  appearance: none;
  background: 0 0;
  border: 0;
  cursor: pointer;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.mvp-skin-aviva .mvp-zoom-control {
  color: #62768f;
}

.mvp-skin-pollux .mvp-zoom-control {
  color: #de5362;
}

.mvp-skin-sirius .mvp-zoom-control {
  color: #f0f;
}

.mvp-zoom-control::-webkit-slider-runnable-track {
  background-color: #fff;
  background-image: linear-gradient(to right, currentColor var(--mvp_zoom_value, 0), transparent var(--mvp_zoom_value, 0));
  border: 0;
  width: 100px;
  -webkit-user-select: none;
  user-select: none;
}

.mvp-skin-aviva .mvp-zoom-control::-webkit-slider-runnable-track,
.mvp-skin-pollux .mvp-zoom-control::-webkit-slider-runnable-track {
  height: 5px;
}

.mvp-skin-sirius .mvp-zoom-control::-webkit-slider-runnable-track {
  height: 1px;
}

.mvp-zoom-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  width: 0;
  height: 0;
}

.mvp-zoom-control::-moz-range-track {
  background-color: #fff;
  border: 0;
  background-image: linear-gradient(to right, currentColor var(--mvp_zoom_value, 0), transparent var(--mvp_zoom_value, 0));
}

.mvp-zoom-control::-moz-range-progress {
  background: currentColor;
}

.mvp-skin-aviva .mvp-zoom-control::-moz-range-track,
.mvp-skin-pollux .mvp-zoom-control::-moz-range-track,
.mvp-skin-aviva .mvp-zoom-control::-moz-range-progress,
.mvp-skin-pollux .mvp-zoom-control::-moz-range-progress {
  height: 5px;
}

.mvp-skin-sirius .mvp-zoom-control::-moz-range-track,
.mvp-skin-sirius .mvp-zoom-control::-moz-range-progress {
  height: 1px;
}

.mvp-zoom-control::-moz-range-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  height: 0;
  width: 0;
}

.mvp-zoom-data-holder {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  display: none;
}

.mvp-skin-aviva .mvp-zoom-data-holder {
  color: #d7e6eb;
}

.mvp-skin-pollux .mvp-zoom-data-holder {
  color: #eee;
}

.mvp-skin-sirius .mvp-zoom-data-holder {
  color: #eee;
}

.mvp-zoom-data-inner {
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 100%;
}

.mvp-zoom-data-value {
  display: block;
  margin: 0 10px;
}

.mvp-is-zoom.mvp-media-holder {
  cursor: grab;
  touch-action: none;
}

.mvp-is-zoom.mvp-media-holder > div {
  pointer-events: none;
}

/* transform */
.mvp-transform-controls-wrap {
  position: absolute;
  left: 10px;
  bottom: 60px;
  display: inline-flex;
}

.mvp-transform-controls-inner {
  display: inline;
  overflow: hidden;
}

.mvp-transform-controls-hidden {
  display: none;
}

.mvp-transform-controls .mvp-contr-btn {
  height: 40px !important;
  margin-right: 1px;
  margin-bottom: 1px;
}

.mvp-transform-toggle {
  flex-shrink: 0;
}

.mvp-transform-reset {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  user-select: none;
}

.mvp-skin-aviva .mvp-transform-controls {
  bottom: 60px;
}

.mvp-skin-aviva .mvp-transform-controls .mvp-contr-btn {
  background: #353b49;
  color: #d7e6eb;
}

.mvp-skin-aviva .mvp-transform-controls .mvp-contr-btn svg {
  color: #d7e6eb !important;
}

.mvp-skin-pollux .mvp-transform-controls {
  bottom: 70px;
}

.mvp-skin-pollux .mvp-transform-controls .mvp-contr-btn {
  background: #353b49;
  color: #eee;
  width: 40px;
}

.mvp-skin-pollux .mvp-transform-controls .mvp-contr-btn svg {
  color: #eee !important;
}

.mvp-skin-sirius .mvp-transform-reset {
  font-size: 13px;
}

.mvp-skin-sirius .mvp-transform-controls .mvp-contr-btn {
  background: rgba(0, 0, 0, 0.5);
  color: #ddd;
}

.mvp-skin-sirius .mvp-transform-controls .mvp-contr-btn svg {
  color: #ddd !important;
}

/* playlist icons */
.mvp-playlist-action-menu {
  position: relative;
  width: 40px;
  flex-shrink: 0;
}

.mvp-playlist-action-btn {
  color: #fff;
}

.mvp-skin-aviva .mvp-playlist-item-selected .mvp-playlist-action-btn svg {
  color: #999;
}

.mvp-skin-pollux .mvp-playlist-item-selected .mvp-playlist-action-btn svg {
  color: #6e7782;
}

.mvp-playlist-action-btn svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: currentColor;
}

/* menu popup */
.mvp-menu-popup-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
}

.mvp-menu-popup {
  position: fixed;
  z-index: 999999;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  box-sizing: border-box;
  max-height: 100%;
  overflow-y: auto;
  max-width: 300px;
  opacity: 0;
}

.mvp-menu-popup-inner {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}

.mvp-menu-popup-item {
  display: flex;
  flex-direction: row;
  padding: 10px 40px 10px 20px;
  color: #666;
  cursor: pointer;
  align-items: center;
}

@media (hover: hover) {
  .mvp-menu-popup-item:hover {
    background: #eee;
  }
}
.mvp-menu-popup-item-url {
  display: flex;
  flex-direction: row;
  color: inherit;
  text-decoration: none;
}

.mvp-menu-popup-item-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: currentColor;
  height: 20px;
}

.mvp-playlist-icon {
  text-align: center;
  min-width: 20px;
  min-height: 20px;
  margin-right: 10px;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  text-decoration: none;
}

.mvp-playlist-icon {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Regular', 'Font Awesome 5 Brands', 'Arial';
  font-size: 18px;
  font-weight: 900;
  min-width: 20px;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.mvp-playlist-description-full {
  display: none;
}

/*############################################*/
/* pollux */
/*############################################*/
.mvp-skin-pollux .mvp-player-controls-bottom,
.mvp-skin-pollux .mvp-settings-holder,
.mvp-skin-pollux .mvp-player-controls-top .mvp-contr-btn,
.mvp-skin-pollux .mvp-share-data,
.mvp-skin-pollux .mvp-info-data,
.mvp-skin-pollux .mvp-context-menu,
.mvp-skin-pollux .mvp-big-play,
.mvp-skin-pollux .mvp-pwd-data,
.mvp-skin-pollux .mvp-upnext-inner,
.mvp-skin-pollux .mvp-chapter-title,
.mvp-skin-pollux .mvp-chapter-menu-wrap,
.mvp-skin-pollux .mvp-ad-skip-btn,
.mvp-skin-pollux .mvp-embed-data,
.mvp-skin-pollux .mvp-redirect-login-data,
.mvp-skin-pollux .mvp-ad-controls .mvp-contr-btn,
.mvp-skin-pollux .mvp-nav-forward,
.mvp-skin-pollux .mvp-nav-backward,
.mvp-skin-pollux .mvp-minimize-close,
.mvp-skin-pollux .mvp-transcript-holder,
.mvp-skin-pollux .mvp-chapters-holder,
.mvp-skin-pollux .mvp-zoom-data-holder,
.mvp-skin-pollux .mvp-playlist-selector-holder {
  background: #323a45;
}

.mvp-skin-pollux .mvp-contr-btn {
  width: 40px;
  height: 100%;
  float: left;
  position: relative;
  cursor: pointer;
}

.mvp-skin-pollux .mvp-contr-btn svg {
  color: #eee;
  height: 16px;
}

@media (hover: hover) {
  .mvp-skin-pollux .mvp-contr-btn svg:hover {
    color: #fff !important;
  }
}
.mvp-skin-pollux .mvp-player-controls-bottom {
  position: absolute;
  height: 50px;
  bottom: 0;
  left: 0;
  width: 100%;
}

.mvp-skin-pollux .mvp-player-controls-bottom-left {
  position: absolute;
  height: 50px;
  left: 20px;
  bottom: 0;
}

.mvp-skin-pollux .mvp-player-controls-bottom-middle {
  position: absolute;
  top: 12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.mvp-skin-pollux .mvp-player-controls-bottom-right {
  position: absolute;
  height: 50px;
  right: 0;
  bottom: 0;
}

.mvp-skin-pollux .mvp-media-time-current,
.mvp-skin-pollux .mvp-media-time-separator,
.mvp-skin-pollux .mvp-media-time-total {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  text-align: center;
  float: left;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  display: none;
  user-select: none;
  line-height: normal;
}

.mvp-skin-pollux .mvp-media-time-current {
  color: #ccc;
}

.mvp-skin-pollux .mvp-media-time-separator,
.mvp-skin-pollux .mvp-media-time-total {
  color: #666;
}

.mvp-skin-pollux .mvp-previous-toggle,
.mvp-skin-pollux .mvp-next-toggle {
  height: 25px;
  width: 25px;
}

.mvp-skin-pollux .mvp-playback-toggle {
  height: 34px;
  width: 34px;
  bottom: 4px;
}

.mvp-skin-pollux .mvp-playback-toggle svg {
  height: 17px;
}

.mvp-skin-pollux .mvp-rewind-toggle svg,
.mvp-skin-pollux .mvp-skip-backward-toggle svg,
.mvp-skin-pollux .mvp-skip-forward-toggle svg,
.mvp-skin-pollux .mvp-previous-toggle svg,
.mvp-skin-pollux .mvp-next-toggle svg {
  height: 13px;
}

.mvp-skin-pollux .mvp-rewind-toggle,
.mvp-skin-pollux .mvp-skip-backward-toggle,
.mvp-skin-pollux .mvp-skip-forward-toggle,
.mvp-skin-pollux .mvp-previous-toggle,
.mvp-skin-pollux .mvp-playback-toggle,
.mvp-skin-pollux .mvp-next-toggle {
  border-radius: 100%;
  background: #de5362;
}

.mvp-skin-pollux .mvp-previous-toggle {
  margin-right: 10px;
}

.mvp-skin-pollux .mvp-next-toggle {
  margin-left: 10px;
}

.mvp-skin-pollux .mvp-player-controls-top {
  position: absolute;
  width: 40px;
  top: 10px;
  right: 10px;
}

.mvp-skin-pollux .mvp-player-controls-top .mvp-contr-btn {
  height: 40px;
  width: 40px;
  margin-bottom: 5px;
  border-radius: 3px;
  overflow: hidden;
}

.mvp-skin-pollux .mvp-player-controls-top .mvp-contr-btn svg {
  height: 16px;
}

.mvp-skin-pollux .mvp-player-controls-top .mvp-contr-btn:hover {
  background: #de5362;
}

.mvp-skin-aviva.mvp-mobile-controls-top .mvp-player-controls-top,
.mvp-skin-pollux.mvp-mobile-controls-top .mvp-player-controls-top {
  width: auto;
}

.mvp-skin-aviva.mvp-mobile-controls-top .mvp-player-controls-top .mvp-contr-btn,
.mvp-skin-pollux.mvp-mobile-controls-top .mvp-player-controls-top .mvp-contr-btn {
  margin-left: 5px;
}

.mvp-skin-pollux .mvp-seekbar {
  position: absolute;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  top: -10px;
  height: 13px;
}

.mvp-skin-pollux .mvp-seekbar-wrap {
  position: relative;
  height: 100%;
}

.mvp-skin-pollux .mvp-progress-bg {
  position: absolute;
  width: 100%;
  top: 3px;
  height: 7px;
  overflow: hidden;
}

.mvp-skin-pollux .mvp-progress-bg {
  background: #6e7782;
}

.mvp-skin-pollux .mvp-progress-level {
  position: absolute;
  top: 3px;
  height: 100%;
}

.mvp-skin-pollux .mvp-progress-level-pointer {
  position: relative;
  top: 0;
  width: 4px;
  height: 100%;
  background: #fff;
  float: right;
  margin-right: -2px;
}

.mvp-skin-pollux .mvp-load-level {
  position: absolute;
  top: 3px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  height: 7px;
  left: 0;
  padding: 0;
}

.mvp-skin-pollux .mvp-load-level::-webkit-progress-bar {
  background: none;
}

.mvp-skin-pollux .mvp-load-level::-webkit-progress-value {
  background-color: #858c93;
}

.mvp-skin-pollux .mvp-load-level::-moz-progress-bar {
  background-color: #858c93;
}

.mvp-skin-pollux .mvp-input-progress {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  color: #de5362;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.mvp-skin-pollux .mvp-input-progress::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, currentColor var(--mvp_progress_value, 0), transparent var(--mvp_progress_value, 0));
  border: 0;
  height: 7px;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  width: 100%;
  top: 3px;
}

.mvp-skin-pollux .mvp-input-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 0;
  height: 100%;
  width: 4px;
}

.mvp-skin-pollux .mvp-input-progress::-moz-range-track {
  height: 7px;
  border: 0;
  background-image: linear-gradient(to right, currentColor var(--mvp_progress_value, 0), transparent var(--mvp_progress_value, 0));
}

.mvp-skin-pollux .mvp-input-progress::-moz-range-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  height: 7px;
  width: 4px;
  border-radius: 0;
}

.mvp-skin-pollux .mvp-volume-wrapper {
  position: relative;
  float: left;
  height: 100%;
}

.mvp-skin-pollux .mvp-volume-seekbar {
  position: relative;
  top: 0;
  margin-left: 40px;
  width: 100px;
  margin-right: 10px;
  height: 100%;
  cursor: pointer;
  touch-action: none;
}

.mvp-skin-pollux .mvp-input-volume {
  position: absolute;
  width: 80px;
  left: 10px;
  top: 0;
  height: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  color: #de5362;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.mvp-skin-pollux .mvp-input-volume::-webkit-slider-runnable-track {
  background-color: #6e7782;
  background-image: linear-gradient(to right, currentColor var(--mvp_volume_value, 0), transparent var(--mvp_volume_value, 0));
  border: 0;
  height: 6px;
  -webkit-user-select: none;
  user-select: none;
}

.mvp-skin-pollux .mvp-input-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: #fff;
  height: 6px;
  width: 2px;
}

.mvp-skin-pollux .mvp-input-volume::-moz-range-track {
  background-color: #6e7782;
  height: 6px;
  border: 0;
  background-image: linear-gradient(to right, currentColor var(--mvp_volume_value, 0), transparent var(--mvp_volume_value, 0));
}

.mvp-skin-pollux .mvp-input-volume::-moz-range-progress {
  background: currentColor;
  height: 5px;
}

.mvp-skin-pollux .mvp-input-volume::-moz-range-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  height: 6px;
  width: 2px;
  border-radius: 0;
}

.mvp-skin-pollux .mvp-menu-item {
  font-size: 14px;
  color: #eee;
}

.mvp-skin-pollux .mvp-settings-menu-item-value {
  color: #888;
}

.mvp-skin-pollux .mvp-menu-header {
  background-color: #fff;
  color: #555;
}

.mvp-skin-pollux .mvp-menu-active,
.mvp-skin-pollux .mvp-menu-item:hover {
  background: #fff;
  color: #555;
}

.mvp-skin-pollux .mvp-big-play svg {
  color: #eee;
}

.mvp-skin-pollux .mvp-big-play:hover svg {
  color: #fff !important;
}

.mvp-skin-pollux .mvp-tooltip {
  background: #de5362;
  color: #fff !important;
}

/*############################################*/
/* aviva */
/*############################################*/
.mvp-skin-aviva .mvp-settings-holder,
.mvp-skin-aviva .mvp-player-controls-bottom,
.mvp-skin-aviva .mvp-player-controls-top .mvp-contr-btn,
.mvp-skin-aviva .mvp-share-data,
.mvp-skin-aviva .mvp-info-data,
.mvp-skin-aviva .mvp-keyboard-data,
.mvp-skin-aviva .mvp-embed-data,
.mvp-skin-aviva .mvp-redirect-login-data,
.mvp-skin-aviva .mvp-context-menu,
.mvp-skin-aviva .mvp-pwd-data,
.mvp-skin-aviva .mvp-big-play,
.mvp-skin-aviva .mvp-upnext-inner,
.mvp-skin-aviva .mvp-chapter-menu-wrap,
.mvp-skin-aviva .mvp-ad-skip-btn,
.mvp-skin-aviva .mvp-ad-controls .mvp-contr-btn,
.mvp-skin-aviva .mvp-nav-forward,
.mvp-skin-aviva .mvp-nav-backward,
.mvp-skin-aviva .mvp-minimize-close,
.mvp-skin-aviva .mvp-tooltip,
.mvp-skin-aviva .mvp-transcript-holder,
.mvp-skin-aviva .mvp-chapters-holder,
.mvp-skin-aviva .mvp-chapters-footer,
.mvp-skin-aviva .mvp-zoom-data-holder,
.mvp-skin-aviva .mvp-playlist-selector-holder {
  background: #353b49;
}

.mvp-skin-aviva .mvp-contr-btn {
  width: 40px;
  height: 100%;
  float: left;
  position: relative;
  cursor: pointer;
}

.mvp-skin-aviva .mvp-contr-btn svg {
  color: #d7e6eb;
  height: 14px;
}

@media (hover: hover) {
  .mvp-skin-aviva .mvp-contr-btn:hover svg {
    color: #fff;
  }
}
.mvp-skin-aviva .mvp-player-controls-bottom {
  position: absolute;
  height: 50px;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
}

.mvp-skin-aviva .mvp-player-controls-top {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
}

.mvp-skin-aviva .mvp-player-controls-top .mvp-contr-btn {
  height: 40px;
  width: 40px;
  margin-bottom: 5px;
  border-radius: 3px;
  overflow: hidden;
}

.mvp-skin-aviva .mvp-player-controls-top .mvp-contr-btn svg {
  height: 17px;
}

.mvp-skin-aviva .mvp-player-controls-bottom-right {
  position: relative;
  margin-left: auto;
}

.mvp-skin-aviva .mvp-media-time-current,
.mvp-skin-aviva .mvp-media-time-separator,
.mvp-skin-aviva .mvp-media-time-total {
  position: relative;
  top: 50%;
  left: 0px;
  text-align: center;
  float: left;
  margin: 0 !important;
  font-size: 12px !important;
  transform: translateY(-50%);
  line-height: normal;
}

.mvp-skin-aviva .mvp-media-time-current {
  padding-left: 10px;
}

.mvp-skin-aviva .mvp-media-time-total {
  padding-right: 5px;
}

.mvp-skin-aviva .mvp-media-time-current {
  color: #62768f;
}

.mvp-skin-aviva .mvp-media-time-separator,
.mvp-skin-aviva .mvp-media-time-total {
  color: #d7e6eb;
}

.mvp-skin-aviva .mvp-seekbar-wrap {
  position: relative;
  margin: 0 10px;
  height: 100%;
  /*overflow: hidden;*/
}

.mvp-skin-aviva .mvp-seekbar {
  overflow: hidden;
  height: 100%;
  cursor: pointer;
  flex: 1;
  touch-action: none;
}

.mvp-skin-aviva .mvp-progress-bg {
  position: relative;
  width: 100%;
  top: 22px;
  height: 5px;
  overflow: hidden;
}

.mvp-skin-aviva .mvp-progress-bg {
  background: #d1e3e7;
}

.mvp-skin-aviva .mvp-load-level {
  position: absolute;
  top: 22px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  height: 5px;
  left: 0;
  padding: 0;
}

.mvp-skin-aviva .mvp-load-level::-webkit-progress-bar {
  background: none;
}

.mvp-skin-aviva .mvp-load-level::-webkit-progress-value {
  background-color: #d1e3e7;
}

.mvp-skin-aviva .mvp-load-level::-moz-progress-bar {
  background-color: #d1e3e7;
}

.mvp-skin-aviva .mvp-input-progress {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 49px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  color: #62768f;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.mvp-skin-aviva .mvp-input-progress::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, currentColor var(--mvp_progress_value, 0), transparent var(--mvp_progress_value, 0));
  border: 0;
  height: 5px;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  top: 22px;
  width: 100%;
  /*margin-top: 1px;*/
}

.mvp-skin-aviva .mvp-input-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  width: 0;
  height: 0;
}

.mvp-skin-aviva .mvp-input-progress::-moz-range-track {
  height: 5px;
  border: 0;
  position: absolute;
  top: 22px;
  width: 100%;
  background-image: linear-gradient(to right, currentColor var(--mvp_progress_value, 0), transparent var(--mvp_progress_value, 0));
}

.mvp-skin-aviva .mvp-input-progress::-moz-range-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  height: 0;
  width: 0;
}

/* mobile seekbar */
.mvp-skin-aviva.mvp-mobile-seekbar .mvp-seekbar {
  position: absolute;
  left: 0;
  top: -10px;
  width: 100%;
  height: 15px;
  z-index: 10;
}

.mvp-skin-aviva.mvp-mobile-seekbar .mvp-seekbar-wrap {
  margin: 0;
  height: 15px;
}

.mvp-skin-aviva.mvp-mobile-seekbar .mvp-progress-bg {
  top: 5px;
}

.mvp-skin-aviva.mvp-mobile-seekbar .mvp-load-level {
  top: 5px;
}

.mvp-skin-aviva.mvp-mobile-seekbar .mvp-input-progress {
  height: 15px;
}

.mvp-skin-aviva.mvp-mobile-seekbar .mvp-input-progress::-webkit-slider-runnable-track {
  top: 5px;
}

.mvp-skin-aviva.mvp-mobile-seekbar .mvp-seekbar .mvp-ad-indicator,
.mvp-skin-aviva.mvp-mobile-seekbar .mvp-seekbar .mvp-chapter-indicator {
  top: 5px;
}

.mvp-skin-aviva .mvp-volume-wrapper {
  position: relative;
  float: left;
  height: 100%;
}

.mvp-skin-aviva .mvp-volume-toggle {
  position: relative;
  left: 0;
  top: 0;
  width: 40px;
  height: 100%;
}

.mvp-skin-aviva .mvp-volume-seekbar {
  position: relative;
  top: 0;
  margin-left: 30px;
  width: 90px;
  height: 100%;
  touch-action: none;
}

.mvp-skin-aviva .mvp-input-volume {
  position: absolute;
  width: 70px;
  left: 10px;
  top: 0;
  height: 49px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  color: #62768f;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.mvp-skin-aviva .mvp-input-volume::-webkit-slider-runnable-track {
  background-color: #d1e3e7;
  background-image: linear-gradient(to right, currentColor var(--mvp_volume_value, 0), transparent var(--mvp_volume_value, 0));
  border: 0;
  height: 5px;
  -webkit-user-select: none;
  user-select: none;
}

.mvp-skin-aviva .mvp-input-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  width: 0;
  height: 0;
}

.mvp-skin-aviva .mvp-input-volume::-moz-range-track {
  background-color: #d1e3e7;
  height: 5px;
  border: 0;
  background-image: linear-gradient(to right, currentColor var(--mvp_volume_value, 0), transparent var(--mvp_volume_value, 0));
}

.mvp-skin-aviva .mvp-input-volume::-moz-range-progress {
  background: currentColor;
  height: 5px;
}

.mvp-skin-aviva .mvp-input-volume::-moz-range-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  height: 0;
  width: 0;
}

.mvp-skin-aviva .mvp-settings-holder,
.mvp-skin-pollux .mvp-settings-holder {
  margin-bottom: 10px;
}

.mvp-skin-aviva .mvp-menu-item {
  font-size: 12px;
}

.mvp-skin-aviva .mvp-settings-menu-item-value {
  color: #999;
}

.mvp-skin-aviva .mvp-menu-header {
  background-color: #fff;
  color: #555;
}

.mvp-skin-aviva .mvp-menu-item {
  color: #eee;
}

.mvp-skin-aviva .mvp-menu-active,
.mvp-skin-aviva .mvp-menu-item:hover {
  background: #fff;
  color: #555;
}

.mvp-skin-aviva .mvp-big-play svg {
  color: #d7e6eb;
}

.mvp-skin-aviva .mvp-big-play:hover svg {
  color: #fff !important;
}

.mvp-skin-aviva .mvp-player-title {
  color: #fff;
}

.mvp-skin-aviva .mvp-player-desc {
  color: #bbb;
}

.mvp-skin-aviva .mvp-tooltip {
  color: #fff !important;
}

/*############################################*/
/* sirius */
/*############################################*/
.mvp-skin-sirius .mvp-settings-holder,
.mvp-skin-sirius .mvp-share-data,
.mvp-skin-sirius .mvp-info-data,
.mvp-skin-sirius .mvp-context-menu,
.mvp-skin-sirius .mvp-volume-seekbar,
.mvp-skin-sirius .mvp-pwd-data,
.mvp-skin-sirius .mvp-upnext-inner,
.mvp-skin-sirius .mvp-chapter-title,
.mvp-skin-sirius .mvp-chapter-menu-wrap,
.mvp-skin-sirius .mvp-ad-skip-btn,
.mvp-skin-sirius .mvp-ad-controls .mvp-contr-btn,
.mvp-skin-sirius .mvp-nav-forward,
.mvp-skin-sirius .mvp-embed-data,
.mvp-skin-sirius .mvp-redirect-login-data,
.mvp-skin-sirius .mvp-nav-backward,
.mvp-skin-sirius .mvp-zoom-data-holder,
.mvp-skin-sirius .mvp-minimize-close {
  background: rgba(0, 0, 0, 0.5);
}

.mvp-skin-sirius .mvp-playlist-selector-holder,
.mvp-skin-sirius .mvp-transcript-holder,
.mvp-skin-sirius .mvp-chapters-holder {
  background: #282828;
}

.mvp-skin-sirius .mvp-contr-btn {
  width: 40px;
  height: 100%;
  float: left;
  position: relative;
  cursor: pointer;
}

.mvp-skin-sirius .mvp-contr-btn svg {
  color: #ddd;
  height: 14px;
}

@media (hover: hover) {
  .mvp-skin-sirius .mvp-contr-btn:hover svg {
    color: #f0f;
  }
}
.mvp-skin-sirius .mvp-previous-toggle {
  position: absolute;
  top: 50%;
  left: 12px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 50px;
}

.mvp-skin-sirius .mvp-next-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 50px;
}

.mvp-skin-sirius .mvp-previous-toggle svg,
.mvp-skin-sirius .mvp-next-toggle svg {
  height: 18px;
}

.mvp-skin-sirius .mvp-player-controls-top {
  position: absolute;
  top: 5px;
  right: 15px;
  height: 40px;
  z-index: 1;
}

.mvp-skin-sirius .mvp-player-controls-bottom {
  position: absolute;
  height: 50px;
  bottom: 0;
  left: 15px;
  right: 15px;
  display: flex;
}

.mvp-skin-sirius .mvp-player-controls-bottom-right {
  position: relative;
  margin-left: auto;
}

.mvp-skin-sirius .mvp-media-time-current,
.mvp-skin-sirius .mvp-media-time-total {
  position: relative;
  top: 50%;
  left: 0px;
  text-align: center;
  float: left;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #eee;
  line-height: normal;
}

.mvp-skin-sirius .mvp-media-time-current,
.mvp-skin-sirius .mvp-media-time-total {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.mvp-skin-sirius .mvp-seekbar-wrap {
  position: relative;
  margin: 0 10px;
  height: 100%;
  /*overflow: hidden;*/
}

.mvp-skin-sirius .mvp-seekbar {
  overflow: hidden;
  height: 100%;
  cursor: pointer;
  touch-action: none;
  flex: 1;
}

.mvp-skin-sirius .mvp-progress-bg {
  position: relative;
  width: 100%;
  top: 25px;
  height: 1px;
}

.mvp-skin-sirius .mvp-progress-bg {
  background: #fff;
}

.mvp-skin-sirius .mvp-load-level {
  position: absolute;
  top: 0;
  height: 100%;
}

.mvp-skin-sirius .mvp-load-level {
  position: absolute;
  top: 25px;
  height: 1px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  left: 0;
  padding: 0;
}

.mvp-skin-sirius .mvp-load-level::-webkit-progress-bar {
  background: none;
}

.mvp-skin-sirius .mvp-load-level::-webkit-progress-value {
  background-color: #eee;
}

.mvp-skin-sirius .mvp-load-level::-moz-progress-bar {
  background-color: #eee;
}

.mvp-skin-sirius .mvp-input-progress {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 49px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  color: #f0f;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.mvp-skin-sirius .mvp-input-progress::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, currentColor var(--mvp_progress_value, 0), transparent var(--mvp_progress_value, 0));
  border: 0;
  height: 1px;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  width: 100%;
  top: 25px;
}

.mvp-skin-sirius .mvp-input-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  width: 0;
  height: 0;
}

.mvp-skin-sirius .mvp-input-progress::-moz-range-track {
  height: 1px;
  border: 0;
  background-image: linear-gradient(to right, currentColor var(--mvp_progress_value, 0), transparent var(--mvp_progress_value, 0));
}

.mvp-skin-sirius .mvp-input-progress::-moz-range-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  height: 0;
  width: 0;
}

/* mobile seekbar */
.mvp-skin-sirius.mvp-mobile-seekbar .mvp-seekbar {
  position: absolute;
  left: 0;
  top: -10px;
  width: 100%;
  height: 15px;
  z-index: 10;
}

.mvp-skin-sirius.mvp-mobile-seekbar .mvp-seekbar-wrap {
  margin: 0;
  height: 15px;
  top: 0;
}

.mvp-skin-sirius.mvp-mobile-seekbar .mvp-progress-bg {
  top: 6px;
}

.mvp-skin-sirius.mvp-mobile-seekbar .mvp-load-level {
  top: 6px;
}

.mvp-skin-sirius.mvp-mobile-seekbar .mvp-input-progress {
  height: 15px;
}

.mvp-skin-sirius.mvp-mobile-seekbar .mvp-input-progress::-webkit-slider-runnable-track {
  top: 6px;
}

.mvp-skin-sirius.mvp-mobile-seekbar .mvp-chapter-indicator {
  top: 0;
}

.mvp-skin-sirius.mvp-mobile-seekbar .mvp-seekbar .mvp-ad-indicator,
.mvp-skin-sirius.mvp-mobile-seekbar .mvp-seekbar .mvp-chapter-indicator {
  top: 6px;
}

.mvp-skin-sirius .mvp-volume-toggle {
  position: relative;
}

.mvp-skin-sirius .mvp-volume-seekbar {
  position: absolute;
  top: -67px;
  left: -33px;
  width: 100px;
  height: 34px;
  display: none;
  cursor: pointer;
  touch-action: none;
  transform: rotate(270deg);
}

.mvp-skin-sirius .mvp-volume-wrapper {
  z-index: 16;
}

.mvp-skin-sirius .mvp-volume-wrapper:hover .mvp-volume-seekbar {
  display: block;
}

.mvp-skin-sirius .mvp-input-volume {
  position: absolute;
  width: 80px;
  top: 1px;
  left: 10px;
  height: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: 0 0;
  border: 0;
  color: #f0f;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.mvp-skin-sirius .mvp-input-volume::-webkit-slider-runnable-track {
  background-color: #fff;
  background-image: linear-gradient(to right, currentColor var(--mvp_volume_value, 0), transparent var(--mvp_volume_value, 0));
  border: 0;
  width: 80px;
  height: 1px;
  -webkit-user-select: none;
  user-select: none;
}

.mvp-skin-sirius .mvp-input-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  width: 0;
  height: 0;
}

.mvp-skin-sirius .mvp-input-volume::-moz-range-track {
  background-color: #fff;
  height: 1px;
  border: 0;
  background-image: linear-gradient(to right, currentColor var(--mvp_volume_value, 0), transparent var(--mvp_volume_value, 0));
}

.mvp-skin-sirius .mvp-input-volume::-moz-range-progress {
  background: currentColor;
  height: 1px;
}

.mvp-skin-sirius .mvp-input-volume::-moz-range-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  height: 0;
  width: 0;
}

.mvp-skin-sirius .mvp-settings-holder {
  margin-bottom: 10px;
}

.mvp-skin-sirius .mvp-menu-item {
  font-size: 12px;
}

.mvp-skin-sirius .mvp-settings-menu-item-value {
  color: #888;
}

.mvp-skin-sirius .mvp-menu-header {
  background-color: #fff;
  color: #555;
}

.mvp-skin-sirius .mvp-menu-item {
  color: #eee;
}

.mvp-skin-sirius .mvp-menu-active,
.mvp-skin-sirius .mvp-menu-item:hover {
  background: #fff;
  color: #555;
}

.mvp-skin-sirius .mvp-big-play svg {
  color: #ddd;
}

.mvp-skin-sirius .mvp-big-play:hover svg {
  color: #fff !important;
}

.mvp-skin-sirius .mvp-pwd-data {
  background: #111;
  border: 1px solid #222;
}

.mvp-skin-sirius input.mvp-pwd-field {
  border: 1px solid #333 !important;
}

.mvp-skin-sirius .mvp-tooltip {
  background: #fff;
  color: #333 !important;
}

.mvp-skin-sirius .mvp-player-controls-gradient {
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
}

/* compact playlist */
.mvp-compact-playlist-container {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.5s;
  display: none;
  z-index: 999999999;
}

.mvp-compact-playlist-inner-scroll {
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mvp-compact-playlist-inner {
  padding: 100px;
  display: grid;
  grid-gap: 1rem;
  justify-items: center;
}

@media (max-width: 700px) {
  .mvp-compact-playlist-inner {
    padding: 100px 30px;
  }
}
@media (min-width: 600px) {
  .mvp-compact-playlist-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .mvp-compact-playlist-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  .mvp-compact-playlist-inner {
    grid-template-columns: repeat(4, 1fr);
  }
}
.mvp-compact-playlist-inner .mvp-playlist-item {
  position: relative;
  overflow: hidden;
  font-size: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background: #fbfbfb;
  box-sizing: border-box;
  max-width: 400px;
  width: 100%;
  box-shadow: 0px -1px 12px #2f2f2f30;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.mvp-compact-playlist-item-shown {
  opacity: 1 !important;
}

.mvp-compact-playlist-inner .mvp-playlist-thumb {
  position: relative;
  top: 0px;
  left: 0px;
  height: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid #555;
  overflow: hidden;
  display: block;
  transition: opacity 300ms ease-out;
  max-width: none;
}

.mvp-compact-playlist-inner .mvp-playlist-thumb img {
  position: relative;
  top: 0px;
  left: 0px;
  display: block;
  width: 100%;
  max-width: none !important;
  opacity: 1;
}

.mvp-compact-playlist-inner .mvp-playlist-info {
  margin-top: 10px;
  height: 100%;
  position: relative;
  top: auto;
  padding: 0;
  transform: none !important;
  background-color: transparent !important;
}

.mvp-compact-playlist-inner .mvp-playlist-title {
  font-weight: 700;
  color: #333;
  font-size: 20px;
}

.mvp-compact-playlist-inner .mvp-playlist-description {
  font-size: 14px;
  color: #888 !important;
}

.mvp-compact-playlist-inner .mvp-playlist-item-selected {
  background-color: #607d8b;
  cursor: default;
}

.mvp-compact-playlist-inner .mvp-playlist-thumb:after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 40px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .3);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.mvp-compact-playlist-inner .mvp-playlist-item-selected .mvp-playlist-title {
  color: #fff;
}

.mvp-compact-playlist-inner .mvp-playlist-item-selected .mvp-playlist-description {
  color: #ddd;
}

.mvp-compact-playlist-header {
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  background: #333;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mvp-compact-playlist-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0.9;
}

.mvp-compact-playlist-close svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 35px;
  fill: currentColor;
  transition: color .3s ease-out;
  color: #fff;
}

.mvp-compact-playlist-search {
  position: absolute;
  width: 200px !important;
  left: 50%;
  height: 25px !important;
  margin: 0 0 0 -100px !important;
  padding: 0 2px !important;
  border: 0 !important;
  -moz-border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  border-radius: 3px !important;
  background: #eee !important;
  color: #646464 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  outline: none;
}

.mvp-compact-playlist-filter-msg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  color: #fff;
}

.mvp-compact-playlist-filter::placeholder {
  color: inherit !important;
}

.mvp-compact-playlist-filter-msg span {
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
}

.mvp-compact-playlist-container .mvp-filter-hidden {
  position: absolute !important;
  opacity: 0;
}

.mvp-body-overflow {
  overflow: hidden !important;
}

.mvp-filter-hidden {
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  transition: all 0.3s;
  padding: 0 !important;
  margin: 0 !important;
}

.mvp-grid .mvp-filter-hidden {
  position: absolute !important;
}

.mvp-measure-size {
  opacity: 0 !important;
  position: absolute !important;
  left: -10000px !important;
  display: block !important;
}

.mvp-global-playlist-data {
  display: none;
}

.mvp-slide .mvp-data-holder-visible {
  top: 0 !important;
}

.mvp-alpha .mvp-data-holder-visible {
  opacity: 1 !important;
}

iframe.mvp-yt-clean {
  height: 200% !important;
  top: -50% !important;
}

/* ---------- end video player ------- */
/* ===================================================== */
/* Tail - hand-appended section reverse-ported verbatim from
   live master.styles.css lines 23496-23634 (end of file). Declaration values are wrapped
   in interpolation so dart-sass emits them byte-for-byte (leading-dot
   decimals, duplicate fallbacks, rgba(#hex, a) keyframe values, etc.).
   Do not "clean up" values here. */
.sptbl-registeration-form .sptbl-content {
  padding: 20px !important;
}

.sptbl-registeration-form .sptbl-content .logo, .sptbl-registeration-form .sptbl-content .form-group, .sptbl-registeration-form .sptbl-content .ul {
  margin-bottom: 12px !important;
}

.sptbl-registeration-form .sptbl-content p, .sptbl-registeration-form .sptbl-content .steps {
  margin-bottom: 10px !important;
}

.sptbl-registeration-form .sptbl-content .terms {
  margin-top: 0 !important;
}

.hide-dropdown-arrow::after {
  display: none !important;
}

.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.m-2 {
  margin: 10px;
}

.sptbl-modal-body .user-card-item .user-card-item__mid-data {
  max-width: 200px !important;
}

.gap-4 {
  gap: 1rem;
}

.btn-custom-small {
  text-transform: unset !important;
  font-size: .7rem !important;
  border-radius: 25px !important;
}

.btn-custom-small svg {
  fill: white !important;
  width: 16px;
  height: 16px;
}

.text-justify {
  text-align: justify;
}

.justify-end {
  justify-content: flex-end;
}

.flex-1 {
  flex: 1;
}

.flex-0 {
  flex: 0;
}

.font-bold {
  font-weight: bold;
}

.border-none {
  border: none !important;
}

.form-check-input[type=radio] {
  border-radius: 50%;
}

.report-reasons .form-check {
  display: flex;
  align-items: center;
}

.report-message {
  background: #fafafa;
  padding: 10px;
  word-break: break-all;
  margin-bottom: 10px;
}

.v-bottom {
  vertical-align: bottom;
}

.gifffer-play-button {
  background-color: rgba(255, 255, 255, .8);
}

.post-list-item .avatar-container {
  position: relative;
}

.post-list-item .avatar-container .avatar-follow-icon {
  width: 18px;
  height: 18px;
  bottom: -2px;
  right: 10px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sptbl-quoted-spout-bg);
  position: absolute;
  border: 1px solid var(--sptbl-avatar-follow-icon-border-color);
  color: var(--sptbl-avatar-follow-icon-color);
  font-size: 18px;
  line-height: unset;
}

.post-list-item .avatar-container .avatar-follow-icon svg {
  fill: var(--sptbl-avatar-follow-icon-color);
  width: 14px;
  height: 14px;
}

@media (min-width: 768px) {
  .post-list-item .avatar-container .avatar-follow-icon {
    right: 12px;
    width: 20px;
    height: 20px;
  }
  .post-list-item .avatar-container .avatar-follow-icon svg {
    width: 16px;
    height: 16px;
  }
}
/* ===================================================== */
/* Signup flow redesign. Imported last so its `.su-*` rules win over the
   legacy `.welcome-page` / `.sptbl-registeration-form` cascade that the
   overrides partials above still carry for the old markup. */
:root {
  --sptbl-su-page-bg: #ecf2f9;
  --sptbl-su-card-bg: #ffffff;
  --sptbl-su-card-border: transparent;
  --sptbl-su-card-shadow: 0 24px 60px rgba(22, 40, 60, 0.12);
  --sptbl-su-divider: #edf2f8;
  --sptbl-su-heading: #16283c;
  --sptbl-su-body: #405a74;
  --sptbl-su-muted: #68809a;
  --sptbl-su-label: #51637a;
  --sptbl-su-accent: #64a0e4;
  --sptbl-su-accent-hover: #4a8bd8;
  --sptbl-su-accent-soft: #ecf4fc;
  --sptbl-su-accent-soft-hover: #ddeaf9;
  --sptbl-su-accent-ink: #3e7bb6;
  --sptbl-su-accent-shadow: 0 10px 24px rgba(100, 160, 228, 0.32);
  --sptbl-su-disabled: #b9cfea;
  --sptbl-su-field-bg: #f3f7fb;
  --sptbl-su-field-border: #d8e2ee;
  --sptbl-su-field-ink: #16283c;
  --sptbl-su-field-placeholder: #51637a;
  --sptbl-su-danger: #e86a6a;
  --sptbl-su-success-bg: #e2f7ec;
  --sptbl-su-success-ink: #128a52;
  --sptbl-su-dot: #d8e2ee;
  --sptbl-su-dot-done: #64a0e4;
  --sptbl-su-hover-tint: rgba(22, 40, 60, 0.06);
  --sptbl-su-hover-tint-strong: rgba(22, 40, 60, 0.14);
  --sptbl-su-deco-1: linear-gradient(90deg, #64a0e4, #8ecceb);
  --sptbl-su-deco-1-opacity: 0.1;
  --sptbl-su-deco-2: #64a0e4;
  --sptbl-su-deco-2-opacity: 0.14;
  --sptbl-su-card-radius: 24px;
  --sptbl-su-field-radius: 14px;
  --sptbl-su-control-height: 50px;
  --sptbl-su-cta-height: 54px;
}

body[data-bg=dark] {
  --sptbl-su-page-bg: #1a2432;
  --sptbl-su-card-bg: #2f3b50;
  --sptbl-su-card-border: #283143;
  --sptbl-su-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  --sptbl-su-divider: #3c4a61;
  --sptbl-su-heading: #ecfafa;
  --sptbl-su-body: #c3ccdb;
  --sptbl-su-muted: #9195a8;
  --sptbl-su-label: #9aa6bd;
  --sptbl-su-accent-soft: #23405b;
  --sptbl-su-accent-soft-hover: #2b4e6e;
  --sptbl-su-accent-ink: #7fd0f5;
  --sptbl-su-accent: #7495b9;
  --sptbl-su-accent-hover: #557eaa;
  --sptbl-su-accent-shadow: 0 10px 24px rgba(116, 149, 185, 0.32);
  --sptbl-su-disabled: #4a5876;
  --sptbl-su-field-bg: #263143;
  --sptbl-su-field-border: #4a5876;
  --sptbl-su-field-ink: #ecfafa;
  --sptbl-su-field-placeholder: #8592ab;
  --sptbl-su-success-bg: #1c4436;
  --sptbl-su-success-ink: #6fe0ac;
  --sptbl-su-dot: #46536b;
  --sptbl-su-dot-done: #7495b9;
  --sptbl-su-hover-tint: rgba(236, 250, 250, 0.08);
  --sptbl-su-hover-tint-strong: rgba(236, 250, 250, 0.18);
  --sptbl-su-deco-1: linear-gradient(90deg, #7495b9, #9db4ce);
  --sptbl-su-deco-1-opacity: 0.16;
  --sptbl-su-deco-2: #7fd0f5;
  --sptbl-su-deco-2-opacity: 0.05;
}

body[data-bg=dawn] {
  --sptbl-su-page-bg: #1e1710;
  --sptbl-su-card-bg: #251c14;
  --sptbl-su-card-border: rgba(255, 236, 210, 0.12);
  --sptbl-su-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --sptbl-su-divider: rgba(255, 236, 210, 0.14);
  --sptbl-su-heading: #f6ecdc;
  --sptbl-su-body: #d8c9b4;
  --sptbl-su-muted: #b3a48f;
  --sptbl-su-label: #b3a48f;
  --sptbl-su-accent-soft: #3a2b20;
  --sptbl-su-accent-soft-hover: #4a382a;
  --sptbl-su-accent-ink: #7fd0f5;
  --sptbl-su-disabled: #5c4835;
  --sptbl-su-field-bg: #2f2318;
  --sptbl-su-field-border: #7a6a55;
  --sptbl-su-field-ink: #f6ecdc;
  --sptbl-su-field-placeholder: #a3927b;
  --sptbl-su-success-bg: #234032;
  --sptbl-su-success-ink: #7fe3b0;
  --sptbl-su-dot: #5c4835;
  --sptbl-su-hover-tint: rgba(246, 236, 220, 0.08);
  --sptbl-su-hover-tint-strong: rgba(246, 236, 220, 0.18);
  --sptbl-su-deco-1-opacity: 0.14;
  --sptbl-su-deco-2: #f6ecdc;
  --sptbl-su-deco-2-opacity: 0.04;
}

body[data-bg=midnight] {
  --sptbl-su-page-bg: #141516;
  --sptbl-su-card-bg: #1d1e1f;
  --sptbl-su-card-border: #2d2e30;
  --sptbl-su-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --sptbl-su-divider: #2d2e30;
  --sptbl-su-heading: #d6d8da;
  --sptbl-su-body: #b0b2b5;
  --sptbl-su-muted: #8a8c8f;
  --sptbl-su-label: #8a8c8f;
  --sptbl-su-accent-soft: #26292b;
  --sptbl-su-accent-soft-hover: #303436;
  --sptbl-su-accent-ink: #7fd0f5;
  --sptbl-su-disabled: #3d3f41;
  --sptbl-su-field-bg: #2d2e30;
  --sptbl-su-field-border: #7e8083;
  --sptbl-su-field-ink: #d6d8da;
  --sptbl-su-field-placeholder: #8a8c8f;
  --sptbl-su-success-bg: #23302a;
  --sptbl-su-success-ink: #74d6a4;
  --sptbl-su-dot: #3d3f41;
  --sptbl-su-hover-tint: rgba(214, 216, 218, 0.08);
  --sptbl-su-hover-tint-strong: rgba(214, 216, 218, 0.18);
  --sptbl-su-deco-1-opacity: 0.12;
  --sptbl-su-deco-2: #d6d8da;
  --sptbl-su-deco-2-opacity: 0.03;
}

@keyframes su-drift {
  0% {
    transform: rotate(-14deg) translateX(0);
  }
  50% {
    transform: rotate(-14deg) translateX(60px);
  }
  100% {
    transform: rotate(-14deg) translateX(0);
  }
}
@keyframes su-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes su-ringgrow {
  0% {
    transform: scale(0.4);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
@keyframes su-echo {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.3);
    opacity: 0;
  }
}
@keyframes su-rise {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes su-bob {
  0%, 100% {
    transform: translateY(0) rotate(-45deg);
  }
  50% {
    transform: translateY(-10px) rotate(-45deg);
  }
}
.su-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: clip;
  background: var(--sptbl-su-page-bg);
  color: var(--sptbl-su-body);
  font-family: "Inter", sans-serif;
}
.su-flow a:not(.su-btn) {
  color: var(--sptbl-su-accent-ink);
  text-decoration: none;
}
.su-flow a:not(.su-btn):hover {
  color: var(--sptbl-su-accent-hover);
  text-decoration: underline;
}

.su-flow__deco {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
.su-flow__deco span {
  position: absolute;
  display: block;
  width: 150%;
  border-radius: 999px;
  transform: rotate(-14deg);
}
.su-flow__deco span:first-child {
  top: -30%;
  right: -25%;
  height: 34%;
  background: var(--sptbl-su-deco-1);
  opacity: var(--sptbl-su-deco-1-opacity);
  animation: su-drift 16s ease-in-out infinite;
}
.su-flow__deco span:last-child {
  bottom: -26%;
  left: -30%;
  height: 30%;
  background: var(--sptbl-su-deco-2);
  opacity: var(--sptbl-su-deco-2-opacity);
  animation: su-drift 22s ease-in-out infinite reverse;
}

.su-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: min(640px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 32px) 64px;
}

.su-shell--wide {
  width: min(860px, 100%);
}

.su-shell--hero {
  width: min(820px, 100%);
}

.su-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: none;
}
.su-brand img {
  display: block;
  height: 60px;
  width: auto;
}

.su-steps {
  display: flex;
  align-items: center;
  gap: 12px;
}

.su-steps__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sptbl-su-muted);
  white-space: nowrap;
}

.su-steps__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.su-steps__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sptbl-su-dot);
  transition: all 0.35s;
}
.su-steps__dot.is-done {
  background: var(--sptbl-su-dot-done);
}
.su-steps__dot.is-current {
  width: 26px;
  background: var(--sptbl-su-accent);
}

.su-card-steps {
  justify-content: center;
  margin-bottom: 22px;
}

.su-card {
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 44px);
  background: var(--sptbl-su-card-bg);
  border: 1px solid var(--sptbl-su-card-border);
  border-radius: var(--sptbl-su-card-radius);
  box-shadow: var(--sptbl-su-card-shadow);
  animation: su-rise 0.5s ease both;
}

.su-card--center {
  text-align: center;
}

.su-title {
  margin: 0 0 6px;
  font-family: "Sora", "Inter", sans-serif;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--sptbl-su-heading);
}

.su-sub {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sptbl-su-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

.su-card--center .su-sub {
  margin-left: auto;
  margin-right: auto;
}

.su-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.su-card-head {
  text-align: center;
}
.su-card-head .su-sub {
  margin-left: auto;
  margin-right: auto;
}

.su-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 4px auto 22px;
  border-radius: 28px;
  color: var(--sptbl-su-accent-ink);
  background: var(--sptbl-su-accent-soft);
}
.su-art img,
.su-art svg {
  width: 44px;
  height: 44px;
  animation: su-bob-soft 2.4s ease-in-out infinite;
}
.su-art svg {
  fill: currentColor;
}

@keyframes su-bob-soft {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
.su-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.su-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sptbl-su-label);
}
.su-label small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sptbl-su-muted);
}

.su-input,
.su-select,
.su-textarea {
  box-sizing: border-box;
  width: 100%;
  height: var(--sptbl-su-control-height);
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--sptbl-su-field-ink);
  background: var(--sptbl-su-field-bg);
  border: 1.5px solid var(--sptbl-su-field-border);
  border-radius: var(--sptbl-su-field-radius);
}
.su-input::placeholder,
.su-select::placeholder,
.su-textarea::placeholder {
  color: var(--sptbl-su-field-placeholder);
}
.su-input:focus,
.su-select:focus,
.su-textarea:focus {
  outline: none;
  border-color: var(--sptbl-su-accent);
  box-shadow: 0 0 0 4px rgba(30, 155, 240, 0.15);
}

.su-textarea {
  height: auto;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}

.su-select {
  cursor: pointer;
  padding: 0 12px;
}

.su-input.is-invalid,
.su-select.is-invalid {
  border-color: var(--sptbl-su-danger);
}

.su-flow .su-select-search .select-container {
  box-sizing: border-box;
  min-height: var(--sptbl-su-control-height);
  padding: 0 12px 0 16px;
  color: var(--sptbl-su-field-ink);
  background: var(--sptbl-su-field-bg);
  border: 1.5px solid var(--sptbl-su-field-border);
  border-radius: var(--sptbl-su-field-radius);
  font-size: 15px;
}
.su-flow .su-select-search .select-container svg {
  fill: var(--sptbl-su-muted);
}
.su-flow .su-select-search .dropdown {
  color: var(--sptbl-su-field-ink);
  background: var(--sptbl-su-card-bg);
  border: 1.5px solid var(--sptbl-su-field-border);
  border-radius: var(--sptbl-su-field-radius);
  box-shadow: var(--sptbl-su-card-shadow);
}
.su-flow .su-select-search .dropdown input {
  color: var(--sptbl-su-field-ink);
  border-bottom: 1px solid var(--sptbl-su-divider);
}
.su-flow .su-select-search .dropdown input::placeholder {
  color: var(--sptbl-su-field-placeholder);
}
.su-flow .su-select-search .dropdown li {
  padding: 8px 16px;
  font-size: 14px;
}
.su-flow .su-select-search .dropdown li:hover {
  background: var(--sptbl-su-accent-soft);
}

.su-field-wrap {
  position: relative;
}

.su-reveal {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sptbl-su-accent-ink);
  background: var(--sptbl-su-accent-soft);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.su-reveal:hover {
  background: var(--sptbl-su-accent-soft-hover);
}

.su-reveal svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.su-input--reveal {
  padding-right: 62px;
}

.su-terms {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sptbl-su-body);
  cursor: pointer;
}
.su-terms input[type=checkbox] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--sptbl-su-accent);
  cursor: pointer;
}

.su-input--code {
  height: 60px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
}

.su-uname {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--sptbl-su-field-bg);
  border: 1.5px solid var(--sptbl-su-field-border);
  border-radius: var(--sptbl-su-field-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.su-uname:focus-within {
  border-color: var(--sptbl-su-accent);
  box-shadow: 0 0 0 4px rgba(30, 155, 240, 0.15);
}
.su-uname.is-available {
  border-color: var(--sptbl-su-success-ink);
}
.su-uname.is-available:focus-within {
  box-shadow: 0 0 0 4px rgba(18, 138, 82, 0.15);
}
.su-uname.is-taken, .su-uname.is-reserved, .su-uname.is-invalid {
  border-color: var(--sptbl-su-danger);
}
.su-uname.is-taken:focus-within, .su-uname.is-reserved:focus-within, .su-uname.is-invalid:focus-within {
  box-shadow: 0 0 0 4px rgba(232, 106, 106, 0.15);
}

.su-uname__at {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sptbl-su-muted);
  background: var(--sptbl-su-accent-soft);
  border-right: 1.5px solid var(--sptbl-su-field-border);
}

.su-uname__input {
  flex: 1;
  min-width: 0;
  height: var(--sptbl-su-control-height);
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--sptbl-su-field-ink);
  background: transparent;
  border: none;
}
.su-uname__input::placeholder {
  color: var(--sptbl-su-field-placeholder);
}
.su-uname__input:focus {
  outline: none;
}

.su-uname__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sptbl-su-muted);
}
.su-uname__status.is-available {
  color: var(--sptbl-su-success-ink);
}
.su-uname__status.is-taken, .su-uname__status.is-reserved, .su-uname__status.is-invalid {
  color: var(--sptbl-su-danger);
}
.su-uname__status svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.su-uname__cross {
  flex: none;
  font-size: 16px;
  line-height: 1;
}

.su-uname__spinner {
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.5;
  animation: su-spin 0.7s linear infinite;
}

@keyframes su-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .su-uname__spinner {
    animation-duration: 2.4s;
  }
}
.su-error {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sptbl-su-danger);
}

.su-hint {
  margin: 0;
  font-size: 14px;
  color: var(--sptbl-su-muted);
}

.su-hint--center {
  text-align: center;
}

.su-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  height: var(--sptbl-su-cta-height);
  padding: 0 26px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: none;
  border-radius: var(--sptbl-su-field-radius);
  cursor: pointer;
  transition: all 0.2s;
}
.su-btn:disabled {
  cursor: not-allowed;
}

.su-btn--block {
  width: 100%;
}

.su-btn--primary {
  color: #fff;
  background: var(--sptbl-su-accent);
  box-shadow: var(--sptbl-su-accent-shadow);
}
.su-btn--primary:hover, .su-btn--primary:focus, .su-btn--primary:active {
  color: #fff;
}
.su-btn--primary:hover:not(:disabled) {
  background: var(--sptbl-su-accent-hover);
}
.su-btn--primary:disabled {
  background: var(--sptbl-su-disabled);
  box-shadow: none;
}

.su-btn--soft {
  color: var(--sptbl-su-accent-ink);
  background: var(--sptbl-su-accent-soft);
}
.su-btn--soft:hover, .su-btn--soft:focus, .su-btn--soft:active {
  color: var(--sptbl-su-accent-ink);
}
.su-btn--soft:hover:not(:disabled) {
  background: var(--sptbl-su-accent-soft-hover);
}

.su-btn--ghost {
  color: var(--sptbl-su-heading);
  background: transparent;
}
.su-btn--ghost:hover, .su-btn--ghost:focus, .su-btn--ghost:active {
  color: var(--sptbl-su-heading);
}
.su-btn--ghost:hover:not(:disabled) {
  background: var(--sptbl-su-accent-soft);
}

.su-btn--pill {
  border-radius: 999px;
}

.su-btn--outline {
  color: var(--sptbl-su-heading);
  background: transparent;
  border: 2px solid var(--sptbl-su-heading);
  height: 44px;
  padding: 0 22px;
  font-size: 14px;
}
.su-btn--outline:hover:not(:disabled) {
  color: var(--sptbl-su-card-bg);
  background: var(--sptbl-su-heading);
}

.su-btn--lg {
  height: 52px;
  padding: 0 30px;
}

a.su-btn,
a.su-btn:hover {
  text-decoration: none;
}

.su-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.su-pill {
  height: 44px;
  padding: 0 18px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--sptbl-su-body);
  background: var(--sptbl-su-card-bg);
  border: 1.5px solid var(--sptbl-su-field-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.su-pill:hover:not(:disabled) {
  transform: translateY(-1px);
}
.su-pill.is-selected {
  color: var(--sptbl-su-accent-ink);
  background: var(--sptbl-su-accent-soft);
  border-color: var(--sptbl-su-accent);
}
.su-pill.is-filled {
  color: #fff;
  background: var(--sptbl-su-accent);
  border-color: var(--sptbl-su-accent);
}

.su-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sptbl-su-accent-soft);
  transition: all 0.3s;
}
.su-count b {
  font-family: "Sora", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--sptbl-su-accent-ink);
}
.su-count span {
  font-size: 13px;
  font-weight: 600;
  color: var(--sptbl-su-accent-ink);
}
.su-count.is-complete {
  background: var(--sptbl-su-success-bg);
}
.su-count.is-complete b, .su-count.is-complete span {
  color: var(--sptbl-su-success-ink);
}

.su-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

@media (min-width: 560px) {
  .su-themes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.su-theme {
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--sptbl-su-card-bg);
  border: 2.5px solid var(--sptbl-su-divider);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.su-theme:hover {
  transform: translateY(-2px);
}
.su-theme.is-selected {
  border-color: var(--sptbl-su-accent);
}

.su-theme__preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 72px;
  padding: 12px;
}

.su-theme__bar {
  height: 7px;
  width: 70%;
  border-radius: 99px;
}
.su-theme__bar--short {
  width: 45%;
  background: var(--sptbl-su-accent);
}

.su-theme__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sptbl-su-heading);
}

.su-theme__ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--sptbl-su-field-border);
  border-radius: 50%;
  background: transparent;
}
.is-selected .su-theme__ring {
  border-color: var(--sptbl-su-accent);
  background: var(--sptbl-su-accent);
}
.su-theme__ring svg {
  width: 10px;
  height: 10px;
  opacity: 0;
  fill: #fff;
}
.is-selected .su-theme__ring svg {
  opacity: 1;
}

.su-avatar {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.su-avatar__img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(13, 36, 54, 0.2);
}

.su-avatar__badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sptbl-su-accent);
  box-shadow: 0 4px 12px rgba(30, 155, 240, 0.4);
}
.su-avatar__badge svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.su-avatar__note {
  margin: 16px 0 30px;
  font-size: 13.5px;
  color: var(--sptbl-su-muted);
}

.su-card-head .su-avatar {
  margin-bottom: 22px;
}

.su-flow .password-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.su-flow .password-rules li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sptbl-su-muted);
}
.su-flow .password-rules li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.4;
  transition: all 0.15s;
}
.su-flow .password-rules li.text-success {
  color: var(--sptbl-su-success-ink);
}
.su-flow .password-rules li.text-success::before {
  background: var(--sptbl-su-success-ink);
  border-color: var(--sptbl-su-success-ink);
  opacity: 1;
}
.su-flow .password-rules li.text-success::after {
  content: "";
  position: absolute;
  top: 6.5px;
  left: 4px;
  width: 6px;
  height: 3px;
  border-bottom: 1.75px solid #fff;
  border-left: 1.75px solid #fff;
  transform: rotate(-45deg);
}
.su-flow .password-rules li.text-danger {
  color: var(--sptbl-su-muted);
}

.su-landing {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 100vh;
}

.su-landing__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 3vw, 28px) clamp(20px, 5vw, 64px);
}

.su-landing__main {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(20px, 4vw, 56px) clamp(20px, 5vw, 64px);
}

.su-hero {
  flex: 1 1 400px;
  max-width: 640px;
  animation: su-rise 0.6s ease both;
}

.su-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sptbl-su-accent-ink);
}
.su-hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sptbl-su-accent);
}

.su-hero__title {
  max-width: 12ch;
  margin: 0 0 20px;
  font-family: "Sora", "Inter", sans-serif;
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--sptbl-su-heading);
}

.su-hero__accent {
  color: var(--sptbl-su-accent);
}

.su-hero__body {
  max-width: 46ch;
  margin: 0 0 28px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--sptbl-su-body);
  text-wrap: pretty;
}

.su-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.su-hero__cta .su-btn {
  height: 52px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
}
.su-hero__cta .su-btn--primary {
  padding: 0 30px;
  box-shadow: 0 5px 14px rgba(30, 155, 240, 0.2);
}
.su-hero__cta .su-btn--primary:hover:not(:disabled) {
  background: var(--sptbl-su-accent-hover);
  transform: translateY(-2px);
}
.su-hero__cta .su-btn--ghost {
  padding: 0 26px;
  background: var(--sptbl-su-hover-tint);
}
.su-hero__cta .su-btn--ghost:hover:not(:disabled) {
  background: var(--sptbl-su-hover-tint-strong);
}

.su-panel {
  flex: 0 1 420px;
  box-sizing: border-box;
  width: min(420px, 100%);
  padding: clamp(24px, 3vw, 36px);
  background: var(--sptbl-su-card-bg);
  border: 1px solid var(--sptbl-su-card-border);
  border-radius: var(--sptbl-su-card-radius);
  box-shadow: var(--sptbl-su-card-shadow);
  animation: su-rise 0.6s 0.1s ease both;
}

.su-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
}
.su-divider::before, .su-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sptbl-su-divider);
}
.su-divider span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sptbl-su-muted);
}

.su-marquee {
  overflow: hidden;
  padding: 18px 0 26px;
}

.su-marquee__track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: su-marquee 40s linear infinite;
}

.su-marquee__item {
  flex: none;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--sptbl-su-body);
  background: var(--sptbl-su-card-bg);
  border: 1px solid var(--sptbl-su-divider);
  border-radius: 999px;
}

.su-appstore {
  display: flex;
  align-items: center;
  gap: 6px;
}
.su-landing__header .su-appstore a,
.su-appstore a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.15s;
}
.su-landing__header .su-appstore a {
  color: var(--sptbl-su-muted);
}
.su-landing__header .su-appstore a:hover, .su-landing__header .su-appstore a:focus, .su-landing__header .su-appstore a:active {
  color: var(--sptbl-su-accent-ink);
  background: var(--sptbl-su-hover-tint);
  text-decoration: none;
}
.su-appstore svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.su-landing__footer {
  position: relative;
  z-index: 1;
  padding: 0 clamp(20px, 5vw, 64px) 28px;
}
.su-landing__footer .main-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.su-landing__footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.su-landing__footer .footer-nav-item {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.5;
}
.su-landing__footer .footer-nav-item a {
  color: var(--sptbl-su-muted);
  text-decoration: none;
}
.su-landing__footer .footer-nav-item a:hover {
  color: var(--sptbl-su-accent-ink);
  text-decoration: none;
}
.su-landing__footer .footer-nav-get-apps {
  display: none;
}

body .su-flow .su-panel .form-title,
body .su-panel.su-panel--sidebar .form-title {
  margin-bottom: 22px;
}
body .su-flow .su-panel .form-title h2,
body .su-panel.su-panel--sidebar .form-title h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--sptbl-su-heading);
}
body .su-flow .su-panel .form-title .su-panel__mark,
body .su-panel.su-panel--sidebar .form-title .su-panel__mark {
  flex: none;
  height: 32px;
  width: auto;
  position: relative;
  top: -3px;
}
body .su-flow .su-panel .form-title p,
body .su-panel.su-panel--sidebar .form-title p {
  margin: 0;
  font-size: 14px;
  color: var(--sptbl-su-muted);
}
body .su-flow .su-panel h5,
body .su-panel.su-panel--sidebar h5 {
  font-family: "Sora", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--sptbl-su-heading);
}
body .su-flow .su-panel .form-group,
body .su-panel.su-panel--sidebar .form-group {
  margin-bottom: 16px;
}
body .su-flow .su-panel .input-label,
body .su-flow .su-panel label:not(.form-check-label),
body .su-panel.su-panel--sidebar .input-label,
body .su-panel.su-panel--sidebar label:not(.form-check-label) {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sptbl-su-label);
}
body .su-flow .su-panel .form-control,
body .su-panel.su-panel--sidebar .form-control {
  box-sizing: border-box;
  width: 100%;
  height: var(--sptbl-su-control-height);
  min-height: var(--sptbl-su-control-height);
  padding: 0 16px;
  font-size: 15px;
  color: var(--sptbl-su-field-ink);
  background: var(--sptbl-su-field-bg);
  border: 1.5px solid var(--sptbl-su-field-border);
  border-radius: var(--sptbl-su-field-radius);
}
body .su-flow .su-panel .form-control::placeholder,
body .su-panel.su-panel--sidebar .form-control::placeholder {
  color: var(--sptbl-su-field-placeholder);
}
body .su-flow .su-panel .form-control:focus,
body .su-panel.su-panel--sidebar .form-control:focus {
  outline: none;
  border-color: var(--sptbl-su-accent);
  box-shadow: 0 0 0 4px rgba(30, 155, 240, 0.15);
}
body .su-flow .su-panel .btn,
body .su-panel.su-panel--sidebar .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--sptbl-su-cta-height);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sptbl-su-card-bg);
  background: var(--sptbl-su-heading);
  border: none;
  border-radius: var(--sptbl-su-field-radius);
}
body .su-flow .su-panel .btn:hover:not(:disabled),
body .su-panel.su-panel--sidebar .btn:hover:not(:disabled) {
  background: var(--sptbl-su-body);
}
body .su-flow .su-panel .btn:disabled,
body .su-panel.su-panel--sidebar .btn:disabled {
  opacity: 0.55;
}
body .su-flow .su-panel .password-ctrl,
body .su-panel.su-panel--sidebar .password-ctrl {
  position: relative;
}
body .su-flow .su-panel .password-ctrl button.password-ctrl,
body .su-panel.su-panel--sidebar .password-ctrl button.password-ctrl {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 34px;
  padding: 0 12px;
  color: var(--sptbl-su-accent-ink);
  background: var(--sptbl-su-accent-soft);
  border: none;
  border-radius: 10px;
}
body .su-flow .su-panel .password-ctrl button.password-ctrl:hover,
body .su-panel.su-panel--sidebar .password-ctrl button.password-ctrl:hover {
  background: var(--sptbl-su-accent-soft-hover);
}
body .su-flow .su-panel .password-ctrl button.password-ctrl svg,
body .su-panel.su-panel--sidebar .password-ctrl button.password-ctrl svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
body .su-flow .su-panel .password-ctrl .form-control,
body .su-panel.su-panel--sidebar .password-ctrl .form-control {
  padding-right: 62px;
}
body .su-flow .su-panel .form-cta-link,
body .su-panel.su-panel--sidebar .form-cta-link {
  font-size: 14px;
  color: var(--sptbl-su-muted);
  text-align: center;
}
body .su-flow .su-panel .invalid-main-feedback,
body .su-panel.su-panel--sidebar .invalid-main-feedback {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sptbl-su-danger);
}

.su-panel.su-panel--sidebar {
  padding: var(--sptbl-primary-offset-size);
  background: var(--sptbl-sidebar-nav-group-bg-color);
  border: 1px solid var(--sptbl-primary-border-color);
  border-radius: 0.8rem;
  box-shadow: none;
  animation: none;
}
.su-panel.su-panel--sidebar a:not(.su-btn) {
  color: var(--sptbl-su-accent-ink);
  text-decoration: none;
}
.su-panel.su-panel--sidebar a:not(.su-btn):hover {
  color: var(--sptbl-su-accent-hover);
  text-decoration: underline;
}

.su-done {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px);
  text-align: center;
  background: linear-gradient(150deg, #16283c 0%, #0e3a5c 55%, #4a8bd8 130%);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(22, 40, 60, 0.35);
  animation: su-rise 0.5s ease both;
}

.su-done__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.su-done__rings span {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border: 1.5px solid rgba(126, 208, 245, 0.5);
  border-radius: 50%;
  animation: su-ringgrow 3s ease-out infinite;
}
.su-done__rings span:nth-child(2) {
  border-color: rgba(126, 208, 245, 0.35);
  animation-delay: 1s;
}
.su-done__rings span:nth-child(3) {
  border-color: rgba(126, 208, 245, 0.2);
  animation-delay: 2s;
}

.su-done__inner {
  position: relative;
}

.su-done .su-steps__label {
  color: #b8d9ef;
}

.su-done .su-steps__dot {
  background: rgba(255, 255, 255, 0.22);
}

.su-done .su-steps__dot.is-done {
  background: #7fd0f5;
}

.su-done .su-steps__dot.is-current {
  background: #fff;
}

.su-done__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 8px auto 26px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
}
.su-done__mark img {
  display: block;
  width: 38px;
  height: auto;
  animation: su-bob-soft 2.4s ease-in-out infinite;
}

.su-done__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #7fd0f5;
}

.su-done__title {
  margin: 0 0 14px;
  font-family: "Sora", "Inter", sans-serif;
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}

.su-done__text {
  margin: 0 auto 30px;
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: #b8d9ef;
  text-wrap: pretty;
}

.su-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
}
.su-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}
.su-toggle span:last-child {
  font-size: 14px;
  font-weight: 600;
  color: #e6f3fc;
}

.su-toggle__track {
  position: relative;
  display: inline-block;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.2s;
}
.su-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s;
}
.su-toggle__track.is-on {
  background: var(--sptbl-su-accent);
}
.su-toggle__track.is-on::after {
  left: 19px;
}

.su-done .su-btn--primary {
  color: #16283c;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.su-done .su-btn--primary:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-2px);
}
.su-done .su-btn--primary:disabled {
  opacity: 0.6;
}

.su-intro__slides {
  display: grid;
}

.su-intro__slide {
  grid-area: 1/1;
  visibility: hidden;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.su-intro__slide.is-before {
  transform: translateX(-28px);
}
.su-intro__slide.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

.su-intro__actions {
  display: flex;
  gap: 10px;
}
.su-intro__actions .su-btn--primary {
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .su-flow__deco span,
  .su-marquee__track,
  .su-done__rings span,
  .su-done__mark img,
  .su-art img,
  .su-art svg {
    animation: none;
  }
  .su-card,
  .su-hero,
  .su-panel,
  .su-done {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .su-intro__slide,
  .su-intro__slide.is-active {
    transition: none;
  }
}
@media (max-width: 999px) {
  .su-landing,
  .su-landing__footer {
    --su-gutter: clamp(20px, 5vw, 64px);
  }
  .su-landing__header,
  .su-landing__footer {
    padding-left: var(--su-gutter);
    padding-right: var(--su-gutter);
  }
  .su-landing__header .su-brand img {
    height: 30px;
  }
  .su-landing__main {
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 12px var(--su-gutter) 32px;
  }
  .su-hero {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    max-width: none;
    text-align: center;
  }
  .su-hero__title {
    position: relative;
    z-index: 1;
    max-width: 11ch;
    margin: 0;
    font-size: clamp(34px, 9.5vw, 44px);
  }
  .su-hero__eyebrow {
    order: 1;
    margin: 18px 0 0;
    font-size: 11.5px;
  }
  .su-halo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    margin-bottom: 40px;
  }
  .su-halo__core {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--sptbl-su-card-bg);
    box-shadow: 0 18px 40px rgba(22, 40, 60, 0.12);
  }
  .su-halo__core img {
    display: block;
    width: 58px;
    height: auto;
  }
  .su-halo__echo {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--sptbl-su-accent);
    border-radius: 50%;
    opacity: 0;
    animation: su-echo 3.6s ease-out infinite;
  }
  .su-halo__echo:nth-child(2) {
    animation-delay: 1.2s;
  }
  .su-halo__echo:nth-child(3) {
    animation-delay: 2.4s;
  }
  .su-sheet {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px var(--su-gutter) calc(22px + env(safe-area-inset-bottom, 0px));
    background: var(--sptbl-su-card-bg);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -14px 40px rgba(22, 40, 60, 0.1);
  }
  .su-sheet__grip {
    align-self: center;
    width: 40px;
    height: 5px;
    margin-bottom: 8px;
    border-radius: 99px;
    background: var(--sptbl-su-dot);
  }
  .su-sheet__title {
    margin: 0 0 6px;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: var(--sptbl-su-heading);
  }
  .su-sheet__link {
    align-self: center;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
  }
  .su-panel--overlay {
    display: none;
  }
  .su-panel--overlay.is-open {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: block;
    width: min(420px, 100vw - 32px);
    height: max-content;
    max-height: calc(100vh - 48px);
    margin: auto;
    overflow-y: auto;
    animation: su-rise 0.25s ease both;
  }
  .su-panel__backdrop {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(13, 36, 54, 0.55);
  }
  .su-panel__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--sptbl-su-muted);
    background: var(--sptbl-su-accent-soft);
    border: none;
    border-radius: 50%;
    cursor: pointer;
  }
  .su-panel__close:hover {
    color: var(--sptbl-su-accent-ink);
  }
  .su-landing__footer {
    padding-top: 24px;
    padding-bottom: 18px;
  }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
  .su-panel--overlay.is-open {
    animation: none;
  }
  .su-halo__echo {
    animation: none;
    opacity: 0.34;
    transform: scale(1.35);
  }
  .su-halo__echo:nth-child(2) {
    opacity: 0.22;
    transform: scale(1.7);
  }
  .su-halo__echo:nth-child(3) {
    opacity: 0.12;
    transform: scale(2.05);
  }
}
/* ===================================================== */