div.file-box-wrapper {
  border: 2px solid #8c8c8c;
  border-radius: 3px;
  margin-top: 15px;

  &.not-available {
    height: 150px;
    text-align: center;
    padding-top: 40px;
    color: #494949;
  }
}

.content-wrapper {
  min-height: 200px;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;

  .empty-text {
    flex: 1;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #666;
  }
}

.folders, .files {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .item {
    display: flex;
    flex-direction: row;
    background: #dddddd;
    padding: 10px;
    margin: 10px;
    border-radius: 3px;
    transition: all 0.2s linear;

    &:hover {
      cursor: pointer;
      background: #d0d0d0;
    }

    .icon {
      margin-right: 10px;

      &.document {
        color: #4269a5;
      }

      &.spreadsheet {
        color: #39825a;
      }

      &.presentation {
        color: #dc6141;
      }

      &.image {
        color: #cf9f20;
      }

      &.pdf {
        color: #d32f2f;
      }

      &.video {
        color: #8049c0;
      }

      &.code {
        color: #ff4500;
      }

      &.text {
        color: #444444;
      }

      &.folder {
        color: #ac9379;
      }
    }
  }
}

.file-box-wrapper.dark {
  .content-wrapper {
    background: #222;

    .empty-text {
      color: #ccc;
    }
  }

  .item {
    background: #393939;

    &:hover {
      background: #424242;
    }

    .icon {
      &.text {
        color: #cccccc;
      }

      &.image {
        color: #ffbf50;
      }

      &.folder {
        color: #ecd3a9;
      }
    }
  }
}