.file-collections-items {
  padding      : 12px;
  border       : 1px solid #d9d9d9;
  border-radius: 4px;
  cursor       : pointer;
  position     : relative;
}

.file-collections-items.selected {
  border-color: var(--primary-color) !important;
}

.file-collections-items.selected .bulk-container {
  display: block;
}

.file-collections-items .bulk-container {
  display : none;
  position: absolute;
  top     : 10px;
  left    : 10px;
  z-index : 2;
}

.file-collections-items .file-items {
  display        : flex;
  justify-content: center;
  align-items    : center;
  width          : 100%;
  height         : 120px;
}

.file-collections-items .file-title-container {
  display    : flex;
  flex-flow  : row nowrap;
  align-items: center;
}

.file-collections-items .file-title-container .file-name {
  flex-grow: 2;
  width    : 0px;
}

.file-collections-items .file-title-container .file-name .name {
  max-width: 100%;
}

.file-collections-items .file-title-container .file-type {
  margin-left     : 10px;
  padding         : 2px 4px 2px 4px;
  border-radius   : 2px;
  background-color: rgb(242, 243, 244);
}

.file-collections-items .file-title-container .file-type .type {
  max-width: 100%;
  color    : rgb(158, 167, 184);
}

.file-collections-items .file-ext-size {
  max-width: 100%;
  color    : #707070;
}

.file-collections-items:hover {
  border-color: #afafaf;
}

.file-collections-items:hover .bulk-container {
  display: block;
}

.file-detail-container .file-description-container {
  padding         : 10px 10px 4px;
  background-color: #f7f7f7;
  border-radius   : 2px;
}

.file-detail-container .file-description-container .ant-typography {
  max-width: 100%;
  font-size: 12px;
  color    : #707070;
}

.file-preview-container {
  display        : flex;
  justify-content: center;
  align-items    : center;
  border-radius  : 2px;
  border         : 1px solid #d9d9d9;
  padding        : 8px;
  width          : 100%;
  height         : 100%;
  max-height     : 400px;
  position       : relative;
}

.file-preview-container .file-actions {
  position: absolute;
  top     : 10px;
  right   : 10px;
}

.image-preview-container {
  display        : flex;
  justify-content: center;
  align-items    : center;  
  padding        : 8px;
  width          : 100%;
  height         : 100%;
  max-height     : 400px;
  position       : relative;
  min-height     : 200px;
}

.image-preview-container .file-actions {
  position: absolute;
  top     : 10px;
  right   : 10px;
}