*,
*::before,
*::after{
  margin:0;
  padding: 0;
  box-sizing: inherit;
}

* {
    -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

*::-webkit-scrollbar {
  display: none;
}

html {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  box-sizing: border-box;
}

/*Section used for centering process*/
.section {
  width: 100%;
  height: 100vh;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#section-1 .dropdown .dropdown-content ul {
  display:none;
}


#section-1 .dropdown:first-child {float:left;}
#section-1 .dropdown:nth-child(3) {float:right;}

.container {padding:0rem 0rem !important;}

  #section-1 .dropdown .dropbtn, .dropdown-content, #account-dropdown, #myDropdown-2, #myDropdown-3 {
  width:calc(100vw/3);
  height:auto;
}

#lw-area-notes, #lw-area-notes--menu, #lw-area-notes--pad, #lw-area-notes--open-close, #lw-area-notes--wrapper {
  width:100vw !important;
  height:auto;
}


#lw-area-notes--wrapper {overflow-y:scroll;}

#section-1 h3 {
  font-size:1.7rem;
}

@media screen and (min-width:1000px) {
  #section-1 .dropbtn, #section-1 .accordion-link, #lw-area-notes #lw-area-notes--open-close {
    font-size:2rem !important;
  }
  #section-1 .accordion-content, #highlight-selected-verse {
    font-size:1.6rem;
  }
}

#highlighted-verse-wrapper {margin-bottom:1rem;}

.container, #highlight-selected-verse {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}
#lw-area-biblio {
  max-width:80rem;
  margin-left:auto;
  margin-right:auto;
}

.lw-area-biblio--header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  margin-bottom:1.2rem;
  margin-top:1.2rem;
}

#lw-area-biblio--nav-next, #lw-area-biblio--nav-prev {
    border: 0px;
    padding: 1.1rem;
    text-align: center;
    background: #000;
    color: #fff;
}

#lw-area-biblio--nav-next:hover, #lw-area-biblio--nav-prev:hover {
    background: #eee;
    color: #000;
    cursor: pointer;
}

#lw-area-biblio--main-book-chapter {
  font-size:2.5rem;
}

.accordion-item {
  background-color: #000000;
  border-radius: .4rem;
}

#highlight-selected-verse {
  background:#000;
  padding: 1.2rem 2rem;
  color:#fff;
  font-size: 1.2rem;
}

.accordion-item hr{
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.accordion-link{
  font-size: 1.6rem;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  background-color: #000000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.accordion-link h3{
  font-weight:500;
  font-size: 20px;
  padding: 0 2rem;
}

.accordion-link i{
  color: #e7d5ff;
  padding: .5rem;
  
}

.accordion-link ul{
  display:flex;
  align-items: flex-end;
  list-style-type: none;
  margin-left: 25px;
}

.accordion-link li{
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0 0 1px 5px;
}

.accordion-link div{
  display: flex;
}

.accordion-link .ion-md-arrow-down{
  display: none;
}

.accordion-content{
  color:#fff;
  max-height: 0;
  overflow: hidden;
  position: relative;
  background-color: #000;
  transition: max-height 650ms;
  color: #fff;
  font-size: 1.2rem;
  padding: 0 2rem;
}

.accordion-content h2 {
  font-size:1.4rem;
}

#highlighted-book, #highlighted-chapter{
  font-size:1.5rem;
}

.highlighted-phrase {
  color:#fff700;
}



.accordion-item:target .accordion-content{
  max-height: 30rem;
  margin-bottom:1.2rem;
  overflow-y: scroll;
}

.accordion-item:target .accordion-link .ion-md-arrow-forward{
  display: none;
}

.accordion-item:target .accordion-link .ion-md-arrow-down{
  display: block;
}

/* Style The Dropdown Button */
.dropbtn {
  background-color: #000;
  color: white;
  padding: 20px;
  font-size: 20px;
  border: none;
  cursor: pointer;
}


#page-wrapper {
  max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 100%;
  z-index: 1;
  height:70vh;
  overflow-y:scroll;
  max-height: calc(100vh - 50.4px);
}

#lw-area-biblio {
  font-size:1.2rem;
  padding:1.2rem 2rem;
  overflow-y:scroll;
  height:calc(100vh - 63.2px);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  position:absolute;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #eee;
  color: #000;
}

.dropdown:hover .dropbtn img {
  filter: invert(100%);
}

#lw-area-notes {
  bottom:0;
  position:absolute;
  left:auto;
  right:auto;
  width:50vw;
}

#lw-area-notes #lw-area-notes--open-close {
  text-align:center;
  background-color: #000;
  color: white;
  padding: 20px;
  font-size: 20px;
  border: none;
}
#lw-area-notes #lw-area-notes--wrapper {
  height:48px;
  overflow:hidden;
  bottom:0;
  position:absolute;
  display:none;
}

#lw-area-notes #lw-area-notes--wrapper .container {
  padding-bottom:5rem;
}

#lw-area-notes--menu {
  margin-left:7vw;margin-right:7vw;
  margin-bottom:1em;
}
#lw-area-notes--menu .lw-area-notes--menu-button {
  font-size:20px;
  line-height:1.7em;
  width:calc(80vw/3);
  margin-left:1vw;
  margin-right:1vw;
  display:inline-block;
  text-align:center;
  cursor:pointer;
  border:1px solid #000;
  border-radius:8px;
}

#lw-area-notes--pad textarea {
  width:80vw;
  min-height:50vh;
  overflow:hidden;
  margin-left:10vw;
  margin-right:10vw;
  padding:1.2rem;
  font-size:1.2rem;
  overflow-y: scroll;
}

#lw-area-notes--pad {
  max-width:100%;
  max-height:100%;
  overflow:hidden;
}

#register-button {
  margin-top:.3em;
  display:inline-block;
  color:#fff;
}

#register-button:hover {
  filter:opacity(.6);
}


.dropbtn:has(> span.desktop-only) img {margin-left: -12px;}
.dropbtn img {height:20px;width:20px;position: absolute;margin-left:-18px;}

/* Mobile version CSS*/

@media screen and (max-width:730px) {
  .dropbtn:has(> span.desktop-only) img {margin-left:-5px !important;}
  .desktop-only {display:none;}
  #section-1 .ion-md-brush, #section-1 .ion-md-menu {padding:1px;}
#section-1 .dropdown:first-child .dropbtn, #section-1 .dropdown:nth-child(3) .dropbtn {width:50px;}
#section-1 .dropdown:nth-child(2) .dropbtn {width:calc(100vw - 100px);}
#account-dropdown {width:100vw;}
#myDropdown-2 {margin-left:-50px;width:100vw;}
#myDropdown-3 {right:0;width:100vw;}
}

#section-1 {background:#000;}

#lw-area-biblio--main-verses p {font-size:1.8rem;line-height:2rem;word-spacing:.2rem;}

/* Chapter/verses in menu*/
.chapter {
}

.chapter div {display:inline-block;}
.chapter div button {display:block;padding:1rem 0rem;margin:.4rem .4rem;background:#fff;font-size:2.2rem; width:49.44px;text-align:center;}
.chapter div button:hover {border-color:#fff;color:#fff;background:#000;cursor:pointer;}

/* Lightmode button */
.darkmode {filter:invert(1);}
.darkmode span {filter:invert(1); color:#fff;}
.darkmode #lw-area-biblio--main-verses p, .darkmode #lw-area-biblio--main-book-chapter {color:#000;}
.scribe .darkmode #lw-area-biblio--main-verses p .lw-area-biblio--main-phrase:hover {filter:invert(1) !important;color: #fff700;}
.scribe .darkmode #lw-area-biblio--main-verses p:hover {color:#000 !important;}
/* Settings button */

.setting-button {
  margin-top:1em;
  padding:.2rem .5rem;
  margin:.4rem .4rem;
  background:#fff;
  font-size:1.2rem;
}

.setting-button:disabled:hover {
  cursor:none;
}

.setting-button:not(:disabled):hover {
  border-color:#fff;
  color:#fff;
  background:#000;
  cursor:pointer;
}

/* Scribe compare styling */
.accordion-content-right, .accordion-content-left {padding:0 .5rem 2rem .5rem;}
.accordion-content-right h4, .accordion-content-left h4 {padding:0 0rem .5rem 0rem;}

@media screen and (min-width:730px) {
.accordion-content-left {display:inline-block;width:50%;float:left;}
.accordion-content-right {display:inline-block;width:50%;}
}
/* Scribe button styling */

.scribe .dropdown-content, .scribe #account-dropdown, #myDropdown-2, #myDropdown-3 {height:calc(50vh - 55.2px);overflow-y:scroll;}
#scribe-form {margin-top:1em;}
#everywhere {vertical-align: middle;}
.scribe #scribe-button {color:#fff700;background:#000;}
.scribe #scribe-button img {filter: brightness(0) saturate(100%) invert(80%) sepia(100%) saturate(7500%) hue-rotate(356deg) brightness(109%) contrast(102%);}
.scribe #section-2 {height:calc(50vh - 55.2px);overflow-y:scroll;}
.scribe #lw-area-notes {display:block;height:50vh;}
.scribe #lw-area-notes #lw-area-notes--wrapper {display:block;position:relative;height:50vh; background:#000;
    overflow-y: scroll;}
    .scribe #lw-area-biblio--main-verses p:hover {display:block;background:#999;color:#fff;border-radius:2px;}
    .scribe #lw-area-biblio--main-verses p .lw-area-biblio--main-phrase:hover {cursor:pointer;filter: brightness(0) saturate(100%) invert(80%) sepia(100%) saturate(7500%) hue-rotate(356deg) brightness(109%) contrast(102%);}
    #scribe {
    width: calc(100% - 200px);
}
@media screen and (max-width:730px) {
  #scribe {width:100%;}
}

#margin-notes {padding: .2em .4em;
    width: 100%;}

    #section-2 {background:#fff;}


input, textarea {
    font-family: 'DM Sans', sans-serif;
    line-height: 2.2rem;
    padding-left: .5rem;
    padding-right: .5rem;
}