body, html {
  margin:0;
  height:100%;
  background: #F5F5F0;
  background-size: 100% 100%;
}

body.embedded,
body.teams,
body.sso,
body.mobile {
  background-color: #fff;
}

@keyframes fade-in-animated-logo {
  0% {
    transform: translateX(-25%) translateY(calc(-50% - 24px)) scale(0.75);
    transform-origin: 50%;
  }
  23% {
    transform: translateX(-25%) translateY(calc(-50% - 24px)) scale(0.75);
    transform-origin: 50%;
  }
  100% {
    transform: translateX(calc(-50% + 2px)) translateY(calc(-50% - 3px)) scale(1.045);
    transform-origin: 50%;
  }
}

@keyframes fade-in-loader {
  0% {
    width: 0%;
  }
  5% {
    width: 60%
  }
  10% {
    width: 80%
  }
  25% {
    width: 83%
  }
  40% {
    width: 85%
  }
  100% {
    width: 99%;
  }
}

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9999;
  animation: 3s ease-out fade-in-animated-logo;
  animation-fill-mode: forwards;
}

#loading video {
  display: block;
  /* Ensure crisp rendering on high-DPI screens */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Prevent any blurriness from scaling */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

body.mobile #loading {
  display: none;
}

#loading-bar {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 4px;
  border-radius: 0 3px 3px 0;
  background-color: #785BBA;
  opacity: 0.5;
  content: '';
  animation: 30s ease-out fade-in-loader;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-fill-mode: none;
  animation-iteration-count: 1;
  transition: 0;
}

#loading .dark {
  display: none;
}

body.in-call #loading,
body.in-call #loading-bar,
body.in-call #line,
body.embedded #loading,
body.embedded #loading-bar,
body.embedded #line,
body.teams #loading,
body.teams #loading-bar,
body.teams #line,
body.sso #loading,
body.sso #loading-bar,
body.sso #line,
body.connectivity-test #loading,
body.connectivity-test #loading-bar,
body.connectivity-test #line {
  display: none;
}

body.in-call iframe {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

input[type=file] {
  opacity: 0 !important;
  pointer-events: none;
}

div#line {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #e5e5e1;
}

flutter-view {
  transition: opacity 0.75s, transform 0.4s ease-out;
  opacity: 1;
  transform: none;
}

body.hide-flutter {
  flutter-view {
    opacity: 0;
  }
}

body.embedded.hide-flutter {
  transform: scale(1);
}

@media (prefers-color-scheme: dark) {
  body:not(.embedded), html:not(.embedded) {
    background: #141415;
  }

  body:not(.embedded) #loading .light {
    display: none;
  }

  body:not(.embedded) #loading .dark {
    display: block;
  }

  body:not(.embedded) #loading-bar {
    opacity: 0.8;
    height: 6px;
  }
}

#loading {
  opacity: 1;
}

#loading.fade-out {
  transition: opacity 250ms;
  opacity: 0;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
}

.contain {
  display:block;
  width:100%; height:100%;
  object-fit: contain;
}

.stretch {
  display:block;
  width:100%; height:100%;
}

.cover {
  display:block;
  width:100%; height:100%;
  object-fit: cover;
}

.flutter-loader {
  display: none;
}