#library_item_drag { /* Library width drag handle. */
  width: 10px;
  height: 100vh;
  border-right: 2px solid #eff3f8;
  cursor: col-resize;
  z-index: 1100; /* 1100 to stay above 'rn-nav-blocker'. */
}

.lib__scrollup, .lib__scrolldn {
  width: 100%;
  position: absolute;
  z-index: 200;
  /* background-color: rgba(204, 41, 0, .4); */
}
.lib__scrollup {
  height: 410px;
  top: -80px;
}
.lib__scrolldn {
  height: 55px;
  bottom: 0px;
}




.library {
  min-width: 115px; /* User's 'library' drag-shrink limit. */
  position: relative; /* Allows scroll-area divs to strech with 'library',(scrolls container).*/
  background-color: #fff;
}

.lib__head {
  width: calc(100% - 5px); /* Subtracts 1/2 'library_item_drag' width. */
  position: absolute;
  overflow-x: hidden;
  font-size: 1.5rem;
}
.lib__head--divider {
  width: calc(100% - 60px); 
  margin-left: 30px; 
  border-bottom: 2px solid #d9d9d9;
  position: absolute;
}

.libhead__creator {
  width: 100%;
  height: 22.0em; /* Matches '.lib__itemlist's 'margin-top', (set in 'RnLibrary.setLibHeight()'). */
  padding-top: 15px;
  /* background-color: orange; */
}
button.library__toggle {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
  /* border: 1px solid #000; */
}
.library__toggle--icon {
  width: 100%;
  height: 100%;
  background-size: 1.1em;
  background-repeat: no-repeat;
  background-position: 0.8em center;
  background-image: url("../img/caret-left-double.svg");
}

button.creator__btn {
  width: 235px;
  height: 40px;
  padding-left: 18px;
  margin-left: 25px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 6px;
  font-weight: 500;
}
button.creator__btn:hover {
  background-color: #eff3f8;
  cursor: pointer;
}
button.creator__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.creator__btn--icon {
  width: 35px;
  height: 40px;
}
.cbn_flashcard_icon {
  background-size: 1.95em;
  background-repeat: no-repeat;
  background-position: 0.0em center;
  margin-top: -0.1em;
  background-image: url("../img/new-flashcards-icon.svg");
}
.cbn_scheduler_icon {
  background-size: 1.7em;
  background-position: 0.05em center;
  background-repeat: no-repeat;
  background-image: url("../img/clock-regular.svg");
}
.cbn_note_icon {
  background-size: 1.95em;
  background-repeat: no-repeat;
  background-position: 0.0em center;
  margin-top: -0.1em;
  background-image: url("../img/new-note-icon.svg");
}
.cbn_notebook_icon {
  background-size: 2.0em;
  background-repeat: no-repeat;
  background-position: 0.0em center;
  margin-top: -0.1em;
  background-image: url("../img/new-notebook-icon.svg");
}
.cbn_player_icon {
  background-size: 1.8em;
  background-repeat: no-repeat;
  background-position: 0.0em center;
  margin-top: -0.1em;
  background-image: url("../img/assistant-icon.svg");
}
.cbn_more_icon {
  background-size: 1.6em;
  background-position: 0.05em center;
  background-repeat: no-repeat;
  background-image: url("../img/ellipsis-h-light.svg");
}

.lib__itemlist {
  width: 100%;
  padding-right: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  /* background-color: lightblue; */
}
.itemlist__booktree {
  width: 100%;
  padding: 0px 0px 4px 10px;
}
.libitem {
  width: 100%;
  height: 100%; /* Organizer won't show if "pointing" up without this rule!! */
}
.itemlink { /* Where the 'flexin' starts! */
  height: 50px;
  display: flex;
  position: relative;
  align-items: center;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1.5rem;
  white-space: nowrap;
  cursor: pointer;
}
.link_hover:hover {
  background-color: #eff3f8;
}
.link_selected {
  color: #4e61ed;
  background-color: #eff3f8;
}
.item__droparea {
  width: 100%;
  position: absolute;
  margin-top: 43px;
  z-index: 200;
}
.droparea__bookdrag_detect {
  width: 100%;
  height: 6px;
}
.droparea__bookdrop_bar {
  height: 6px;
  background-color: #7482f1;
}
.indent {
  height: inherit;
  display: flex;
}
            
      
.bookcaret__wrap { /* Makes area around caret clickable. */
  width: 25px;
  height: 100%;
  flex: 0 0 auto;
  cursor: pointer;
}
.bookcaret {
  width: 25px;
  height: 50px;
  background-size: 0.9em;
  background-repeat: no-repeat;
  background-position: 0.4em center;
  background-image: url("../img/caret-right.svg");
}


.itemlabel__library,
.itemlabel__wrap {  /* Only draggable items have 'itemlabel__wrap' class,('libitem_0' has 'itemlabel__library'). */
  height: 100%;
  flex: 1 1 auto;
  overflow: hidden;
}
.itemlabel { /* With 'itemlabel__wrap', this makes whole label area clickable. */
  height: 100%;
  display: flex;
  align-items: center;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
}
.libraryicon { /* Need this div to target 'Note's vs 'Notebook's */
  width: 34px;
  min-width: 34px;
  height: 30px;
  background-size: 1.9em;
  background-position: 0.0em center;
  background-repeat: no-repeat;
}
.my_library_icon {
  background-image: url("../img/library-my-icon.svg");
}
.shared_library_icon {
  background-image: url("../img/library-shared-icon.svg");
}

.itemicon,
.itemicon_selected {
  width: 30px;
  min-width: 30px;
  height: 30px;
  background-size: 1.8em;
  background-position: 0.0em center;
  background-repeat: no-repeat;
}
.itemicon {background-image: url("../img/notebook-icon.svg");}
.itemicon_selected {background-image: url("../img/notebook-selected-icon.svg");}
.itemname {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item__menubtn {
  padding: 19px 22px 19px 10px;
  background-size: 0.2em;
  background-repeat: no-repeat;
  background-position: 0.6em center;
  rotate: 90deg;
  margin-top: 10px;
  background-image: url("../img/ellipsis-v-light.svg");
}


.bookgroup {
  width: 100%;
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
}
.bookgroup__sub {width: auto;}