/**
* Extend the react-native-web reset:
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
*/
html,
body {
  width: 100%;
  /* To smooth any scrolling behavior */
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  /* Allows content to fill the viewport and go beyond the bottom */
  min-height: 100%;
  background-color: rgb(245, 245, 244);
}

#refreshBrowser {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-bottom: 1px solid #000;
  font-weight: semi-bold;
  font-size: 20px;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#refreshBrowser div {
  display: flex;
  align-items: center;
  justify-content: center;
}
#refreshBrowser div span {
  margin-right: 10px;
}

#refreshBrowser button {
  font-size: 18px;
  background: blue;
  color: white;
  border-radius: 8px;
  padding: 8px;
  font-weight: bolder;
  cursor: pointer;
}

#root {
  display: flex;
  flex: 1;
  max-width: 2048px;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
  /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
  -webkit-text-size-adjust: 100%;
  height: calc(100% + env(safe-area-inset-top));
}

body {
  display: flex;
  /* Allows you to scroll below the viewport; default value is visible */
  overflow-y: auto;
  overscroll-behavior-y: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: scrollbar;
}

/* Enable for apps that support dark-theme */
/* Printer-friendly styles for AIChat */
@media print {
  [data-testid="ChatBeginState"],
  [data-testid="ChatContinueState"] {
    display: none !important;
  }
  [data-testid="MessageRating"] {
    display: none !important;
  }
  [data-testid="MessageText"] {
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 1.5px solid #000 !important;
    border-radius: 18px !important;
    padding: 8px 14px !important;
    background: none !important;
  }
}
/*@media (prefers-color-scheme: dark) {
    body {
      background-color: black;
    }
  }*/

#skip {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: white;
  height: 30px;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
  z-index: 1000;
  border: 1px solid #000;
}

#skip:focus {
  transform: translateY(0%);
}

noscript form {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

noscript div {
  font-size: 18px;
  font-family: Helvetica, sans-serif;
  line-height: 24px;
  margin: 10%;
  width: 80%;
}

noscript p {
  margin: 20px 0;
}

noscript button {
  background-color: #4630eb;
  border-radius: 100px;
  border: none;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  line-height: 20px;
  padding: 6px 16px;
}

#loading-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#loading-indicator {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loading-indicator span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  border-radius: 50%;
  background-color: #000;
  animation: dot-pulse 1s infinite;
}

#incompatible {
  display: block; /* will be hidden via [hidden] initially */
  padding: 20px;
  font-size: 25px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

[hidden] {
  display: none !important;
}

#sorry {
  font-size: 25px;
  margin-right: 5px;
}
#appstores {
  text-align: center;
}
.inlinelogo {
  display: block;
  margin-bottom: 36px;
  max-height: 250px;
  max-width: 350px;
}

img.appstore,
img.googleplay {
  height: 50px;
}

@keyframes dot-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Print-friendly styles: hide navigation and sidebar, expand content */
@media print {
  /* Break out of react-native-web's flex/viewport-locked layout.
     Every View renders as a flex div with height constraints that
     prevent content from flowing across print pages. */
  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #root,
  #root * {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  /* Hide the left drawer navigation */
  [data-testid="desktop-navigation-drawer"] {
    display: none !important;
  }

  /* Hide the right plan information sidebar */
  [data-testid="sidebar"] {
    display: none !important;
  }

  /* Let the main content fill the full width */
  #root {
    max-width: 100%;
  }

  /* Hide any other non-essential UI elements */
  [data-testid="PrintPageButton-container"],
  [data-testid="ChatButtonContainer"],
  [data-testid="OtcProductsMiniContainer"],
  [data-testid="IDCardMiniContainer"],
  [data-testid="ProvidersMiniContainer"] {
    display: none !important;
  }
}