/**
 * ████████╗ ██████╗ ██╗     ██╗███╗   ██╗ ██████╗
 * ╚══██╔══╝██╔═══██╗██║     ██║████╗  ██║██╔═══██╗
 *    ██║   ██║   ██║██║     ██║██╔██╗ ██║██║   ██║
 *    ██║   ██║   ██║██║     ██║██║╚██╗██║██║   ██║
 *    ██║   ╚██████╔╝███████╗██║██║ ╚████║╚██████╔╝
 *    ╚═╝    ╚═════╝ ╚══════╝╚═╝╚═╝  ╚═══╝ ╚═════╝
 *
 * (c) Copyright 2021-present Rakuten Kobo Inc. (https://www.kobo.com)
 *
 */

/** ----------------------------------------------------------------------------
    Global styles
    ------------------------------------------------------------------------- */

/* Apply a natural box layout model to all elements
   http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  border: none;
  outline: 0;
}

/* A11y */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid black;
}
[role="listitem"]:focus-visible {
  outline-offset: -2px;
}

/* A11y: For the Dark and Charcoal modes, the focus ring should be white */
body.theme-tolino-dark :focus-visible,
body.theme-tolino-charcoal  :focus-visible,

body.theme-kobo-dark :focus-visible,
body.theme-kobo-charcoal :focus-visible,

body.theme-kobojp-dark  :focus-visible,
body.theme-kobojp-charcoal :focus-visible {
  outline: 2px solid white;
}

html,
body {
  /* We set a fixed font size to easier caluclate relative sizes, e.g. rem */
  font-size: 10px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  height: 100vh;
  /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  min-width: 320px;
  overflow: hidden;
  user-select: none;
  transition: background .2s ease-in-out;
  width: 100%;
  max-height: 100vh;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  touch-action: none;
  zoom: 1;
}

.cls-1 {
  fill: #bf2026;
}
@media (prefers-color-scheme: dark) {
  body {
    /* See theme colors for color definition */
    background-color: rgb(0, 0, 0);
  }
}

@media (hover: none) {
  body {
    /*
    By default, every element has a `position: static`.
    Here we're just trying to hack it to avoid issues like KWA-14852
  */
    position: relative;
  }
}
/* Helper classes to prevent flickering of the background if a theme is
   selected. See theme colors for color definitions. */
body.theme-tolino-light,
body.theme-kobo-light,
body.theme-kobojp-light {
  background-color: rgb(255, 255, 255);
}
body.theme-tolino-dark,
body.theme-kobo-dark,
body.theme-kobojp-dark {
  background-color: rgb( 0, 0, 0);
}
body.theme-tolino-sepia,
body.theme-kobo-sepia,
body.theme-kobojp-sepia {
  background-color: rgb(234, 221, 199);
}
body.theme-tolino-charcoal {
  background-color: rgb(72, 72, 74);
}
body.theme-kobo-charcoal,
body.theme-kobojp-charcoal {
  background-color: rgb(51, 51, 51);
}

#root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 320px;
  overflow: hidden;
  width: 100%;
}


#splash-screen {
  align-items: center;
  /* TODO: Theme handling */
  background-color: white;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}


#splash-screen.invisible {
  opacity: 0;
  z-index: -1;
}

#splash-screen>svg {
  height: 20vh;
  max-height: 80px;
  max-width: 80%;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}


/** ----------------------------------------------------------------------------
    Animations
    ------------------------------------------------------------------------- */

@keyframes rotate360 {
  100% { transform: rotate(360deg); }
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  70% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: scale(1.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
/** ----------------------------------------------------------------------------
    RX
    ------------------------------------------------------------------------- */

.rx-layout-center {
  left: 0;
  width: 100vw;
  height: 100%;
}

.rx-layout-left {
  left: 0;
  width: 50vw;
  height: 100%;
}

.rx-layout-right {
  left: 50vw;
  width: 50vw;
  height: 100%;
}

/* workaround to style images embedded into ToC entries */
.RXTableOfContents_container img,
.RXFooter_metaInfoChapterTitleHTML img {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  width: auto;
  height: 1em;
}


/** ----------------------------------------------------------------------------
    UR
    ------------------------------------------------------------------------- */

#BookView { }

ReadingOrderView {
  display: flex;
  flex: 0 0 auto;
/* margin-bottom: 8px;
  margin-top: 8px;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
*/
  overflow: hidden;
  position: relative;
  height: 100%;
  width: fit-content;
}

ReadingItem {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  height: 100%;
}

/**
* Activity Indicator for UR
* Moved icon indicator to a base64-encoded URI bg image [KWA-14402]
*/

.ActivityIndicator_container {
  display: none;
  height: 100%;
  left: 0px;
  top: 0px;
  width: 100%;
}

.ActivityIndicator_iconContainer .ActivityIconEl {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy4xMjEzIDExLjg3OUMyMi43MzAyIDExLjQ4OCAyMi4wOTgzIDExLjQ4OCAyMS43MDczIDExLjg3OUwyMC45NTIyIDEyLjYzNEMyMC45NjcyIDEyLjQyMyAyMS4wMDAyIDEyLjIxNCAyMS4wMDAyIDEyQzIxLjAwMDIgNy4wMzggMTYuOTYyMiAzIDEyLjAwMDIgM0M5LjU5NjI1IDMgNy4zMzYyNSAzLjkzNiA1LjYzNjI1IDUuNjM2QzUuMjQ2MjUgNi4wMjcgNS4yNDYyNSA2LjY2IDUuNjM2MjUgNy4wNUM2LjAyNzI1IDcuNDQxIDYuNjYwMjUgNy40NDEgNy4wNTAyNSA3LjA1QzguMzcyMjUgNS43MjggMTAuMTMwMiA1IDEyLjAwMDIgNUMxNS44NjAyIDUgMTkuMDAwMiA4LjE0IDE5LjAwMDIgMTJDMTkuMDAwMiAxMi4xODUgMTguOTc5MiAxMi4zNjYgMTguOTYxMyAxMi41NDdMMTguMjkzMyAxMS44NzlDMTcuOTAyMyAxMS40ODggMTcuMjY5MiAxMS40ODggMTYuODc5MiAxMS44NzlDMTYuNDg4MiAxMi4yNyAxNi40ODgyIDEyLjkwMiAxNi44NzkyIDEzLjI5M0wxOS4yOTMzIDE1LjcwN0MxOS40ODgzIDE1LjkwMiAxOS43NDQyIDE2IDIwLjAwMDIgMTZDMjAuMjU2MyAxNiAyMC41MTIyIDE1LjkwMiAyMC43MDcyIDE1LjcwN0wyMy4xMjEzIDEzLjI5M0MyMy41MTIzIDEyLjkwMiAyMy41MTIzIDEyLjI3IDIzLjEyMTMgMTEuODc5WiIgLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE2Ljk0OTkgMTYuOTQ5N0MxNS42Mjc5IDE4LjI3MTcgMTMuODY5OSAxOC45OTk3IDExLjk5OTkgMTguOTk5N0M4LjEzOTkzIDE4Ljk5OTcgNC45OTk5MyAxNS44NTk3IDQuOTk5OTMgMTEuOTk5N0M0Ljk5OTkzIDExLjgxNDcgNS4wMTc5MyAxMS42MzI3IDUuMDM1OTMgMTEuNDQ5N0w1LjcwNjkzIDEyLjEyMDdDNS45MDI5MyAxMi4zMTY3IDYuMTU3OTMgMTIuNDEzNyA2LjQxMzkzIDEyLjQxMzdDNi42Njk5MyAxMi40MTM3IDYuOTI1OTMgMTIuMzE2NyA3LjEyMDkzIDEyLjEyMDdDNy41MTE5MyAxMS43MzA3IDcuNTExOTMgMTEuMDk3NyA3LjEyMDkzIDEwLjcwNjdMNC43MDY5MyA4LjI5Mjc0QzQuMzE2OTMgNy45MDI3NCAzLjY4MzkzIDcuOTAyNzQgMy4yOTI5MyA4LjI5Mjc0TDAuODc4OTI2IDEwLjcwNjdDMC40ODg5MjYgMTEuMDk3NyAwLjQ4ODkyNiAxMS43MzA3IDAuODc4OTI2IDEyLjEyMDdDMS4yNjk5MyAxMi41MTE3IDEuOTAyOTMgMTIuNTExNyAyLjI5MjkzIDEyLjEyMDdMMy4wNDU5MyAxMS4zNjc3QzMuMDI4OTMgMTEuNTc3NyAyLjk5OTkzIDExLjc4NjcgMi45OTk5MyAxMS45OTk3QzIuOTk5OTMgMTYuOTYyNyA3LjAzNzkzIDIwLjk5OTcgMTEuOTk5OSAyMC45OTk3QzE0LjQwMzkgMjAuOTk5NyAxNi42NjM5IDIwLjA2MzcgMTguMzYzOSAxOC4zNjM3QzE4Ljc1NDkgMTcuOTcyNyAxOC43NTQ5IDE3LjM0MDcgMTguMzYzOSAxNi45NDk3QzE3Ljk3MjkgMTYuNTU4NyAxNy4zNDA5IDE2LjU1ODcgMTYuOTQ5OSAxNi45NDk3WiIgLz48L3N2Zz4K");
}


/** ----------------------------------------------------------------------------
    Misc.
    ------------------------------------------------------------------------- */

/*
 * To prevent users from printing images or exporting them as PDFs, we hide
 * everything when print styles are requested.
 * Tickets: KWA-14724
 */
@media print {
  html,
  body {
    display: none;
  }
}