/* The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element
/* ------------------------------------------------------------------------ */
/* These styles make the body full-height */
html,
body {
  height: 100%;
}
/* These styles disable body scrolling if you are using <ScrollView> */
body {
  overflow: hidden;
}
/* These styles make the root element full-height */
#root {
  display: flex;
  height: 100%;
  flex: 1;
}

/* oula */
/* ------------------------------------------------------------------------ */
body:before {
  background-image: url(https://dmuksnoz4vo8.cloudfront.net/assets/images/chat-background.png);
  background-repeat: repeat;
  background-size: 300px;
  content: " ";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0.2;
  position: absolute;
  top: 0;
  width: 100%;
}

textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  resize: none;
}

@media (min-width: 768px) {
  * {
    scrollbar-width: thin;
  }

  body {
    background-color: antiquewhite;
  }

  body {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  #root {
    position: relative;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid transparent;
    height: 95vh;
    max-height: 1200px;
    max-width: 450px;
    box-shadow: 0 17px 50px 0 rgba(11, 20, 26, 0.19),
      0 12px 15px 0 rgba(11, 20, 26, 0.24);
  }

  div[role="dialog"] {
    max-width: 450px;
    margin: 0 auto;
  }
}

/* loader */
/* ------------------------------------------------------------------------ */
.loader-container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.loader {
  position: relative;
  font-size: 40px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.loader:before {
  content: "Loading Solito";
  color: #3d3d40;
}
.loader:after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #ff6600;
  border-radius: 50%;
  position: absolute;
  inset: 0;
  margin: auto;
  top: -70px;
  animation: motion 3s ease-in-out infinite;
}

@keyframes motion {
  0%,
  50%,
  100% {
    transform: translateX(0) scale(1);
  }
  25% {
    transform: translateX(-35vw) scale(0.3);
  }
  75% {
    transform: translateX(35vw) scale(0.3);
  }
}