@import './error.css';
@import './icomoon.css';
@import './player.css';
@import './playerVideo.css';
@import './progressbar.css';
@import './smalltalk.css';
@import './tippy.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

#app {
  z-index: 1;
  background-color: black;
  overflow: visible;
  /* needed on mobile IOS when the top bar disappear  */
  /* done dynmically by viewer.jsx if in scrollable mode */
  /* position: fixed; */
}
#offscreen-container {
  position: absolute;
  z-index: 0;
  height: 0;
  overflow: hidden;
}
body {
  font-family: 'Roboto', sans-serif;
}
.disabled {
  opacity: 0.25;
  pointer-events: none;
}
.loading-container .sk-double-bounce {
  width: 50px;
  height: 50px;
  color: #fff;
}
.pub_300x250 {
  font-size: 0;
  height: 0;
  overflow: hidden;
}
svg {
  overflow: visible;
  display: block;
}
/* vector effect non scaling is used to render fabric paths as svg but an object can be deformed by scaleX/Y unproportionaly. 
This vector effect ensure even if obj is deformed the stroke stay undeformed.
Still we have to avoid it for the ludus vox circular progress bar */
path {
  vector-effect: non-scaling-stroke;
}
circle {
  vector-effect: non-scaling-stroke;
}
rect {
  vector-effect: non-scaling-stroke;
}
ellipse {
  vector-effect: non-scaling-stroke;
}

polyline {
  vector-effect: non-scaling-stroke;
}
polygon {
  vector-effect: non-scaling-stroke;
}
.nonScalingStroke * {
  vector-effect: none;
}

.path-group *,
.CircularProgressbar path,
.lottie-loader path,
.lottie * {
  vector-effect: none;
}
.lottie-android svg {
  transform: none !important;
}
/* .transitioning svg { will-change: transform; } */
/* .transitioning img { will-change: transform; }*/
*/ .react-draggable-dragging {
  transition: transform 0s !important;
}
.svg-link {
  fill: inherit;
  cursor: pointer;
}
.tippy-popper[x-placement='top'] .tippy-tooltip {
  padding: 0;
  overflow: visible;
  background: transparent;
}

.scrollable-light::-webkit-scrollbar {
  width: 7px;
}

.scrollable-light::-webkit-scrollbar-track {
  background-color: transparent;
}

.scrollable-light::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 50px;
}
.scrollable-light::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.scrollable-dark::-webkit-scrollbar {
  width: 7px;
}

.scrollable-dark::-webkit-scrollbar-track {
  background-color: transparent;
}

.scrollable-dark::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50px;
}
.scrollable-dark::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
/* keep these 2 empty media rules to make sure window.matchMedia() calls can match something */
@media (orientation: portrait) {
  body {
  }
}
@media (orientation: landscape) {
  body {
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and (min--moz-device-pixel-ratio: 1.25),
  only screen and (-o-min-device-pixel-ratio: 1.25/1),
  only screen and (min-device-pixel-ratio: 1.25),
  only screen and (min-resolution: 200dpi),
  only screen and (min-resolution: 1.25dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}