/* PROJECT STYLES */

:root {
  --menu-width: 200px;
  --footer-height: 50px;
  --col-active: rgb(207, 255, 255);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  :root {
    --menu-width: 100px;
    --footer-height: 40px;
  }
}

body,
html {
  height: 100%;
  width: 100%;
  position: relative;
  font-family: sans-serif;
  background-color: rgb(245, 244, 255);
}

.layoutBox {
  position: absolute;
  margin: 0px;
  padding: 5px;

}

#noteListBox {
  top: 0px;
  left: 0px;
  height: calc(100% - var(--footer-height));
  width: var(--menu-width);
  font-size:0.8em;
  /* background-color: red; */
}

#mainBody {

  top: 0px;
  left: var(--menu-width);
  height: calc(100% - var(--footer-height));
  right: 0px;
  /* background-color: rgb(0, 255, 132); */
  z-index: 999;
}

#listFoot {

  bottom: 0px;
  left: 0px;
  height: var(--footer-height);
  width: var(--menu-width);
  /* background-color: rgb(0, 30, 255); */
}

#bodyFoot {

  bottom: 0px;
  left: var(--menu-width);
  height: var(--footer-height);
  right: 0px;
  /* background-color: rgb(242, 255, 0); */
}

/* sub-items */
.ql-container {
  /* height:88%; */
  /* bottom: 100px; */
  background-color: white;
}

#templates {
  display: none;
}

#noteTitle {
  width: 100%;
  margin: 5px 0;
  font-size: 1.3em;
}

.note {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 0.4fr;
  margin-top: 0.3em;
}

.note.active>div {
  background-color: var(--col-active);
  font-weight: bold;
}

.list-foot,
.body-foot {
  z-index: 99;
}

.ql-editor .task-list {
  position: relative;
}

#noteListBox ol {
  padding-left:0px;
}
#noteList ol{
  padding-left:10px;
}
#noteList li{
  padding-left:0px;
}

.ui-sortable-helper{
  /* background-color: red; */
}

.ui-sortable-placeholder{
  background-color: #eee;
  visibility: visible !important;
}