/* Demo page styles
-------------------------------------------------------------- */
.index-list{
  position: absolute;
  width: 100%;
  /*bottom: -55%;*/
  top: 0%;
  opacity: 0;
  pointer-events: none;
  left: 0;
  box-shadow: 0px -5px 10px rgba(0,0,0,0.1);
  z-index: 5;
  padding: 15px 30px;
  border-radius: 1px;
  background:
  linear-gradient(rgba(255, 255, 255, 0.973), transparent),
  linear-gradient(to top left, rgb(255, 23, 23), transparent),
  linear-gradient(to top right, rgb(0, 183, 255), transparent);
  background-blend-mode: screen;
  transition: all 0.15s ease-in-out;
  
}
.index-list.show{
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
z-index:202;
}


.box {
background: #ffffff54;
    border-radius: 12px;
    box-shadow: 0 0 50px #ffbc00;
    /* margin: 30px 5%; */
    padding: 5%;
    height: 580px;
    overflow: auto
    
}

@media (min-width: 544px) {
  .box {
    
  }
}

.box::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.box {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* The list style
-------------------------------------------------------------- */

.directory-list ul {
  margin-left: 5px;
  padding-left: 10px;
  border-left: 1px dashed #ddd;
}

.directory-list li {
  list-style: none;
  color: #cc45ff;
  font-size: 24px;
  font-style: italic;
  background: #f0f8ff33;
  white-space: nowrap;
}

.directory-list a {
  border-bottom: 1px solid transparent;
  color: #888;
  text-decoration: none;
  transition: all 0.2s ease;
}

.directory-list a:hover {
  border-color: #eee;
  color: #000;
}

.directory-list .folder,
.directory-list .folder > a {
  color: #884c15;
  font-weight: bold;
  font-size: 20px;
  margin-bottom:10px;
}


/* The icons
-------------------------------------------------------------- */

.directory-list li:before {
  margin-right: 0px;
  content: "";
  height: 15px;
  vertical-align: middle;
  width: 15px;
  background-repeat: no-repeat;
  display: inline-block;
  /* file icon by default */
  /*background-image: url("./s.png");*/
  background-position: center 0px;
  background-size: 68% auto;
}

.directory-list li.folder:before {
  /* folder icon if folder class is specified */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='lightblue' d='M96.429,37.5v39.286c0,3.423-1.228,6.361-3.684,8.817c-2.455,2.455-5.395,3.683-8.816,3.683H16.071 c-3.423,0-6.362-1.228-8.817-3.683c-2.456-2.456-3.683-5.395-3.683-8.817V23.214c0-3.422,1.228-6.362,3.683-8.817 c2.455-2.456,5.394-3.683,8.817-3.683h17.857c3.422,0,6.362,1.228,8.817,3.683c2.455,2.455,3.683,5.395,3.683,8.817V25h37.5 c3.422,0,6.361,1.228,8.816,3.683C95.201,31.138,96.429,34.078,96.429,37.5z' /></svg>");
  background-position: center top;
  background-size: 75% auto;
}