.sidebar {
  height: 100%;
  z-index: 3;
  color: white;
  display: flex;
  user-select: none;
}
.cont {
  width: 35px;
  height: 100%;
  background-color: var(--bg_gray);
}
.it {
  text-align: center;
  padding: 7px 0;
  cursor: pointer;
}
.it0 {
  color: var(--text_2);
}
.activetab {
  border-left: 1px solid white;
  .it0 {
    color: white;
  }
}
.a {
  width: 250px;
  background-color: var(--bg_gray0);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.a0{
  overflow-y: scroll;
}
.head {
  padding: 12px 20px;
  color: var(--text_0);
  font-size: 12px;
}
.a1 {
  display: flex;
  flex-wrap: wrap;
}
.a10 {
  width: 50%;
  border: 1px solid gray;
  padding: 20px;
  color: var(--text_0);
  font-size: 12px;
  text-align: center;
  cursor: grab;
}
.a10 svg {
  stroke-width: 1;
}
.exp {
  font-size: 12px;
  color: var(--text_0);
  border-bottom: 1px solid gray;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.exp > div{
  display: flex;
  align-items: center;
  justify-content: center;
}
.rlist {
  cursor: pointer;
  overflow-y: scroll;
  padding-bottom: 300px;
}
.rlist {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.rlist::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.rlistitem {
  font-size: 12px;
}
.rliwrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 2px solid transparent;
}
.rli0 {
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text_0);
}
.grdrag {
  display: none;
  margin-left: auto;
  margin-right: 10px;
  cursor: move;
}
.grshow {
  display: flex;
  color: var(--text_0);
}
.rliwrap:hover {
  border: 2px solid var(--text_2);
  .grdrag {
    display: flex;
  }
}
.activeItemClass {
  background-color: var(--bg_gray);
  .rli0 {
    color: white;
  }
}
.dragtop {
  border-color: gray;
  border-top-color: yellow;
}
.dragmiddle {
  border-color: yellow;
}
.dragmiddle.redrag {
  border-color: red !important;
}
.dragbottom {
  border-color: gray;
  border-bottom-color: yellow;
}
.removingitem {
  opacity: 0.3;
  border-color: transparent !important;
}
.dragwrapper {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-100%);
}
.dragimage {
  background-color: yellow;
  color: black;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
}
.newpage{
  cursor: text;
  font-size: 12px;
  display: flex;
  align-items: center;
  color: var(--text_0);
  justify-content: right;
  margin: 10px 5px;
}
.newpage > input {
  all:unset;
  padding: 5px;
  border-bottom: 1px solid gray;
  color: white;
}
.newpage > input:focus{
  border-bottom: 1px solid white;
}
.newpage > div{
  cursor: pointer;
  padding: 5px 7px;
  background-color: var(--pg_bg);
  border-radius: 3px;
}