html,
body,
#app {
  overflow: hidden;
  font-family: Barlow, sans-serif;
  height: 100%;
  color: white;
  /* min-height: 100vh;
  min-height: -webkit-fill-available; */
  /* background-color: #192c38; */
  /* background-color: #1b2a3b; */
}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  /* Fix for body overscroll interfering with drag actions  */

  @media (min-device-height: 700px) and (max-device-width: 800px) {
    .mobile-nav {
      height: 4rem !important;
      padding-bottom: 0.5rem !important;
    }
    .app-wrapper {
      margin-bottom: 4rem !important;
    }
  }

  @media (max-device-width: 800px) {
    body {
      height: 100% !important;
      touch-action: none;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      -ms-scroll-chaining: none;
          overscroll-behavior: none;
    }

    :root {
      font-size: 110%;
    }
  }

  .message-body-inner span {
    vertical-align: bottom;
  }
  .message-body-inner svg {
    vertical-align: bottom;
    margin-bottom: 0.2rem;
  }
}

html[mobile],
html[mobile] body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}

html[mobile] [contenteditable='true'] {
  -webkit-tap-highlight-color: unset;
  -webkit-touch-callout: auto;
  -ms-scroll-chaining: chained;
      overscroll-behavior: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
   -ms-user-select: auto;
       user-select: auto;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}

html[mobile] *:focus {
  outline: none;
}

@media (orientation: landscape) {
  html[ios] .sticky-player {
    height: 100vh !important;
  }
}

svg.czlogo > path:last-child {
  transition: transform 400ms;
  transform-origin: right;
}
svg.czlogo:hover > path:last-child {
  transform: translate3d(10px, 6px, 0);
}

/* svg.czlogo g:last-child {
  transition: all 200ms;
}
.group:hover svg.czlogo g:last-child {
  transform: rotateZ(1deg);
} */

/* .group:hover svg.czlogo path:nth-child(7) {
  animation: freeze 80ms linear infinite;
} */

@-webkit-keyframes freeze {
  33% {
    transform: translateX(-8px);
  }
  66% {
    transform: translateX(8px);
  }
}

@keyframes freeze {
  33% {
    transform: translateX(-8px);
  }
  66% {
    transform: translateX(8px);
  }
}

.card-shadow {
  box-shadow: rgb(0 0 0 / 20%) 0px 4px 6px -1px, rgb(0 0 0 / 12%) 0px 2px 4px -1px;
}

.cz_sidebar {
  box-shadow: rgb(0 0 0 / 20%) 0px 4px 6px -1px, rgb(0 0 0 / 12%) 0px 2px 4px -1px;
}

.nav-shadow {
  box-shadow: rgb(0 0 0 / 10%) 0px 3px 0px -1px, rgb(0 0 0 / 12%) 0px 2px 0px -1px;
}

.title-overlay {
  transition: opacity 300ms;
  background-image: linear-gradient(0deg, black, transparent);
  height: 100%;
  /* height: 300px; */
  position: absolute;
  bottom: -5px;
  width: 100%;
  pointer-events: none;
}
.title-overlay-gray-800 {
  transition: opacity 300ms;
  background-image: linear-gradient(0deg, hsl(228, 22%, 18%), transparent);
  height: 100px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  pointer-events: none;
}
.title-overlay-top-gray-800 {
  transition: opacity 300ms;
  background-image: linear-gradient(180deg, hsl(228, 22%, 18%), transparent);
  height: 10px;
  position: absolute;
  top: 0px;
  width: 100%;
  pointer-events: none;
}

.thumbdot {
  transform: scale(0);
  transition: transform 250ms;
}
.thumbdot.big {
  transform: scale(1);
}

.player-mobile .thumbdot.big {
  transform: scale(1.2);
}

.desktop .thumbdot.big {
  transform: scale(0.75);
}

.desktop .thumbtrack:hover .trackdisplay {
  transform: none;
}

.tapped .thumbdot {
  transform: scale(0.5);
}

video {
  transition: all 300ms;
}

.desktop .trackdisplay {
  height: 5px;
  transform: scaleY(0.6);
  transition: all 250ms;
}
.trackdisplay {
  height: 2px;
}

@media (orientation: portrait) {
  .player-mobile.vjs-fullscreen {
    padding-bottom: 60px;
  }
}

/* .tapped video {
  opacity: 0.4;
} */

.desktop .trackdisplay {
  opacity: 0;
}

.desktop .thumbtrack {
  cursor: pointer;
  pointer-events: none;
}

.desktop.hover .thumbtrack {
  pointer-events: unset;
}

.thumbtrack {
  display: none;
}
.is-vod .thumbtrack {
  display: unset;
}

.desktop {
  overflow: hidden;
}

.desktop.hover .trackdisplay,
.desktop.paused .trackdisplay {
  opacity: 1;
}

.hover .hover-overlay,
.paused .hover-overlay {
  opacity: 1;
}
.hover-overlay {
  opacity: 0;
  transition: opacity 200ms;
  background-image: linear-gradient(0deg, #2a3046da, transparent);
  height: 140px;
  position: absolute;
  bottom: -10px;
  width: 100%;
  pointer-events: none;
}

.desktop.hover .control,
.desktop.paused .control {
  opacity: 1;
  pointer-events: unset;
}

.desktop .control {
  opacity: 0;
  pointer-events: none;
  transition: 300ms;
}

.scrubtime {
  transform: scale(0.95) translateY(3px);
  opacity: 0;
  transition: 300ms;
}

.progress {
  transform: scaleX(0);
}

.seeking.scrubtime {
  transform: none;
  opacity: 1;
}
.has-hover .hovertime {
  opacity: 1;
}
.thumbtrack:active .hovertime {
  opacity: 1;
}
.hovertime {
  opacity: 0;
}

.icon-ff-filled path {
  stroke: none;
  fill: currentColor;
}
.icon-ff-outline path {
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
}

* {
  box-sizing: border-box;
}

.volume-control .volume-control-slider {
  opacity: 0;
  transition: all 150ms;
}

.volume-control:hover .volume-control-slider,
.volume-control:active .volume-control-slider {
  opacity: 1;
}

.volume-control:hover + .control-time,
.volume-control:active + .control-time {
  transform: translateX(74px);
}
.control-time {
  transition: 300ms;
  pointer-events: none;
}

.icon-vol path {
  stroke-width: 1.5;
}

.control {
  transition: all 300ms;
}

.control.active .control-item {
  pointer-events: all;
}

.player-mobile .control {
  background-color: #000000a0;
}

.video-js {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  /* background-color: transparent; */
}

.video-js video {
  width: 100%;
  height: 100%;
  background-color: black;
  margin: '0 auto';
}

.vjs-loading-spinner,
.vjs-text-track-display,
.vjs-poster,
.vjs-modal-dialog,
.vjs-error-display,
.vjs-big-play-button,
.vjs-control-bar {
  display: none !important;
}

.video-js {
  outline: none !important;
}

.animation-enter-scale {
  -webkit-animation: enter-scale-fade 800ms ease-out;
          animation: enter-scale-fade 800ms ease-out;
}
.animation-enter-scale.backward svg {
  transform: scaleX(-1);
  position: relative;
  right: '50%';
}

@-webkit-keyframes enter-scale-fade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes enter-scale-fade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.animate-enter-fade {
  animation: enter-fade 800ms linear alternate-reverse infinite;
}
@-webkit-keyframes enter-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes enter-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.cursor-none {
  cursor: none;
}

.rmc-pull-to-refresh-content {
  transform-origin: left top 0px;
}
.rmc-pull-to-refresh-content-wrapper {
  overflow: hidden;
}
.rmc-pull-to-refresh-transition {
  transition: transform 0.3s;
}
.rmc-pull-to-refresh-indicator {
  color: grey;
  text-align: center;
  height: 25px;
  line-height: 25px;
}
.rmc-pull-to-refresh-down .rmc-pull-to-refresh-indicator {
  margin-top: -25px;
}
.rmc-pull-to-refresh-up .rmc-pull-to-refresh-indicator {
  margin-bottom: -25px;
}

.slick-arrow {
  z-index: 10;
}

.slick-next {
  right: calc(50% - 320px);
  /* right: 255px; */
}

.slick-prev {
  left: calc(50% - 320px);
  /* left: 255px; */
}

.slick-slide > div {
  cursor: pointer;
}
.slick-slide > div > div {
  pointer-events: none;
}
.slick-slide.slick-current > div > div {
  pointer-events: unset;
}

.cz_slide .slick-slide {
  /* padding: 0px 0.35em; */
  /* opacity: 0.6; */
  /* transition: opacity 500ms ease-out 0s; */
  transform: scale(0.9);
  transition: transform 500ms ease-out 0s;
}
.cz_slide .slick-slide > div > div {
  box-shadow: rgb(0 0 0 / 20%) 0px 4px 6px -1px, rgb(0 0 0 / 12%) 0px 2px 4px -1px;
}
.cz_slide .slick-slide.slick-current,
.cz_slide .slick-slide.slick-center {
  opacity: 1;
  transform: none;
}

/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;

  position: absolute;
  top: 50%;

  display: block;

  width: 24px;
  height: 24px;
  padding: 0;

  cursor: pointer;

  border: none;
  outline: none;
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;

  display: block;

  width: 100%;
  padding: 0;
  margin: 0;

  list-style: none;

  text-align: center;
}
.slick-dots li {
  position: relative;

  display: inline-block;

  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;

  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;

  display: block;

  width: 20px;
  height: 20px;
  padding: 5px;

  cursor: pointer;

  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;

  position: absolute;
  top: 0;
  left: 0;

  width: 20px;
  height: 20px;

  content: '•';
  text-align: center;

  opacity: 0.25;
  color: black;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: black;
}

/** slick.css **/

/* Slider */
.slick-slider {
  position: relative;

  display: block;
  box-sizing: border-box;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;

  display: block;
  overflow: hidden;

  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;

  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before,
.slick-track:after {
  display: table;

  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;

  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;

  height: auto;

  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}