.close-file-picker {
  display: none;
}

.file-picker-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: auto;
}

.file-picker {
  width: 80vw;
  height: 80vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1.2rem;
  -webkit-box-shadow: 3px 2px 19px -4px rgba(0, 0, 0, 0.75);
          box-shadow: 3px 2px 19px -4px rgba(0, 0, 0, 0.75);
  background-color: #f5f6f7;
  min-width: 360px;
}

.address-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-bottom: 0.4rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

.address-field {
  width: calc(80vw * 0.92);
  border: 1px solid #d9d9d9;
  padding: 4px 7px;
  background-color: white;
  color: gray;
  margin-left: 0.3rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.nav-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 0;
  padding: 0;
  width: calc(80vw * 0.06);
}

.nav-button {
  border-collapse: collapse;
  border: none;
  outline: none;
  padding: 4px 7px;
  background-color: inherit;
  width: 22px;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.nav-button:not(.nav-button-inactive):hover {
  color: #007bff;
}

.nav-button.left {
  margin-right: 0.3rem;
}

.nav-button-inactive {
  color: #e0d6d6;
}

.file-list {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 1px solid #d9d9d9;
  height: 92%;
  padding: 0.3rem;
  overflow: auto;
  background-color: white;
}

.dirent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 6px 9px;
  border-bottom: 1px solid #efe9e9;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  cursor: context-menu;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.dirent:not(.dirent-active):hover {
  background-color: #e5f3ff;
}

.dirent svg {
  color: #635c5c;
}

.dirent.dir {
  color: #383aaa;
}

.dirent-dir-icon {
  color: #ffe894 !important;
}

.dirent-file-icon {
  color: #51a0eb !important;
}

.dirent-active {
  background-color: #cce8ff;
}

.action-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.action-button {
  border-collapse: collapse;
  outline: none;
  padding: 7px 14px;
  background-color: white;
}

.action-button.select-button {
  background-color: #007bff;
  color: white;
  border: 1px solid #106aca;
  border-radius: 0.1rem;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.action-button.select-button:hover {
  background-color: #106aca;
  border: 1px solid #007bff;
}

.action-button.close-button {
  background-color: #dc3545;
  color: white;
  border: 1px solid #cc2b3c;
  border-radius: 0.1rem;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.action-button.close-button:hover {
  background-color: #cc2b3c;
  border: 1px solid #dc3545;
}

.mr-3 {
  margin-right: 0.45rem;
}

@media screen and (max-width: 936px) {
  .address-field {
    width: calc(80vw * 0.9);
  }
  .nav-buttons {
    width: calc(80vw * 0.08);
  }
}

@media screen and (max-width: 740px) {
  .address-field {
    width: calc(80vw * 0.85);
  }
  .nav-buttons {
    width: calc(80vw * 0.13);
  }
}

@media screen and (max-width: 450px) {
  .address-field {
    width: calc(80vw * 0.82);
  }
  .nav-buttons {
    width: calc(80vw * 0.15);
  }
}
/*# sourceMappingURL=index.css.map */