html, body {
  max-width: 100%;
  overflow-x: hidden;
}

#root,
#root > div,
#root main,
#root article,
#root aside,
#root section,
#root div {
  box-sizing: border-box;
}

#root,
#root > div,
#root main {
  max-width: 100%;
}

#root .scripture-text {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#root .scripture-text > span,
#root .scripture-text .verse-content,
#root .scripture-text .verse-content > span {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#root .scripture-text > span {
  display: inline !important;
}

#root main,
#root main > div,
#root article {
  min-width: 0;
}

@media (max-width: 1023px) {
  #root aside {
    max-width: 100vw;
  }
}

@media (max-width: 767px) {
  #root > div > header {
    align-items: stretch;
  }

  #root > div > header form {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #root > div > header > div:last-child {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

#root .scripture-text.font-serif {
  font-family: var(--font-serif) !important;
}

#root .scripture-text.font-sans {
  font-family: var(--font-sans) !important;
}

#root .scripture-text.font-mono {
  font-family: var(--font-mono) !important;
}

#root .scripture-text.font-slab {
  font-family: var(--font-slab) !important;
}

#root .scripture-text > span {
  display: block !important;
  padding-top: 0.95em;
}

#root .scripture-text > span:first-child {
  padding-top: 0 !important;
}

#root .scripture-text .verse-content {
  display: inline !important;
}

#root .scripture-text .verse-content > span {
  display: inline !important;
}



@media (max-width: 767px) {
  #root > div > header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px !important;
  }

  #root > div > header form {
    order: 2;
    flex: 0 0 100%;
  }

  #root > div > header > div:last-child {
    order: 3;
    flex: 0 0 100%;
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  #root > div > header > div:last-child > div,
  #root > div > header > div:last-child select,
  #root > div > header > div:last-child button {
    min-width: 0;
  }

  #root > div > header > div:last-child > div:first-child {
    flex: 1 1 100%;
    width: 100%;
  }

  #root > div > header > div:last-child > div:first-child select {
    width: 100%;
  }

  #root > div > header > div:last-child > button {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    white-space: nowrap;
  }
}


@media (max-width: 900px) {
  #root > div > header {
    flex-wrap: wrap !important;
    gap: 10px;
    align-items: stretch !important;
  }

  #root > div > header form {
    order: 2;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #root > div > header > div:last-child {
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  #root > div > header > div:last-child > div {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0 !important;
  }

  #root > div > header > div:last-child > div select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12px !important;
  }

  #root > div > header > div:last-child > button {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
  }
}


@media (max-width: 767px) {
  #root > div > header {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto;
    align-items: center !important;
    gap: 10px;
    padding: 12px 14px !important;
  }

  #root > div > header > div:first-child {
    grid-column: 1 / 3;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #root > div > header > div:first-child > button {
    padding: 8px !important;
  }

  #root > div > header > div:first-child > div {
    gap: 10px !important;
  }

  #root > div > header form {
    grid-column: 3;
    width: 92px !important;
    max-width: 92px !important;
    min-width: 92px;
    margin: 0 !important;
    justify-self: center;
    transition: width 0.2s ease, max-width 0.2s ease;
  }

  #root > div > header form > div {
    position: relative;
  }

  #root > div > header form input {
    height: 50px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: -9999px;
    color: transparent !important;
    caret-color: transparent;
  }

  #root > div > header form input::placeholder {
    color: transparent !important;
  }

  #root > div > header form svg {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  #root > div > header form:focus-within {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }

  #root > div > header form:focus-within input {
    padding-left: 44px !important;
    padding-right: 16px !important;
    text-indent: 0;
    color: inherit !important;
    caret-color: auto;
  }

  #root > div > header form:focus-within input::placeholder {
    color: var(--color-gray-400, #9ca3af) !important;
  }

  #root > div > header form:focus-within svg {
    left: 16px !important;
    transform: translateY(-50%) !important;
  }

  #root > div > header > div:last-child {
    display: contents !important;
  }

  #root > div > header > div:last-child > button:first-child {
    grid-column: 4;
    white-space: nowrap;
    min-width: max-content;
    padding: 12px 16px !important;
    border-radius: 9999px;
    justify-content: center;
  }

  #root > div > header > div:last-child > div {
    grid-column: 1 / -1;
    width: 100% !important;
    margin-top: 2px;
    padding: 10px 14px !important;
    border-radius: 9999px;
  }

  #root > div > header > div:last-child > div select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12px !important;
  }

  #root > div > header > div:last-child > button:last-child {
    display: none !important;
  }
}