[data-module=storage] {
  height: 100%;
}

[data-module=storage] .main-content {
  display: flex;
}

[data-module=storage] .content {
  flex: 1;
  overflow: auto;
}

[data-module=storage] [data-module=section-header] a.breadcrumb-item {
  cursor: pointer;
}

[data-module=storage] [data-module=section-header] a.breadcrumb-item:hover {
  color: var(--main-highlight-color);
}

[data-module=storage] .new-folder-input-field-container {
  flex: 1;
  margin: 9px 8px 9px 0;
}

[data-module=storage] .new-folder-input-field {
  font-size: 15px;
}

.file-name-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  line-height: 1.8;
}

.file-name {
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;  
  width: auto;
  padding-right: 5px;              
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.file-version-and-extension {
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: bold;
  margin-left: -5px;
}

.file-container.active,
.folder-container.active {
  background: var(--main-selected-cell);
}

.file-link {
  /* margin-left: 8px; */
}

.file-size {
  font-size: 12px;
}

.file-icon-container .file-link,
.folder-icon-container .folder-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
}

.file-icon-container,
.folder-icon-container {
  padding-right: 12px;
}

.file-icon-container img {
  width: auto;
  height: 16px;
}

.folder-icon-container img {
  height: auto;
  width: 16px;
}

[data-module=storage] .file-container,
[data-module=storage] .folder-container {
  display: flex;
  align-items: center;
  padding: 4px;
  /* border-bottom: 1px solid var(--main-key-border-color); */
  height: 50px;
}

[data-module=storage] .file-container:hover,
[data-module=storage] .folder-container:hover {
  background-color: var(--main-hover-cell);
}

[data-module=storage] [class*=-file-btn]:not(.edit-file-btn),
[data-module=storage] [class*=-folder-btn] {
  width: 20px;
  height: 30px;
  background-size: 20px 30px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-size: 20px 30px;
  mask-size: 20px 30px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--main-icon-color);
}

[data-module=storage] #delete-btn-icon {
  mask-type: unset;
  -webkit-mask-size: unset;
}

[data-module=storage] [class*=-file-btn]:not(.edit-file-btn):hover,
[data-module=storage] [class*=-folder-btn]:hover {
  background-color: var(--main-key-color);
}

[data-module=storage] .edit-file-btn {
  color: var(--main-key-color);
  cursor: pointer;
}

[data-module=storage] .delete-file-btn {
  mask: url(/app/common/img/attachmentIcon/remove-icon.svg);
  -webkit-mask: url(/app/common/img/attachmentIcon/remove-icon.svg);
}

[data-module=storage] .download-file-btn {
  mask: url(/app/common/img/attachmentIcon/download-icon.svg);
  -webkit-mask: url(/app/common/img/attachmentIcon/download-icon.svg);
}

[data-module=storage] .retry-upload-file-btn {
  -webkit-mask: url(/app/common/img/attachmentIcon/retry-icon.svg);
  mask: url(/app/common/img/attachmentIcon/retry-icon.svg);
  mask-image: none;
  -webkit-mask-image: none;
  background-color: transparent !important;
  background-image: url(/app/common/img/attachmentIcon/retry-icon.svg);
}

[data-module=storage] .cancel-upload-file-btn {
  -webkit-mask: url(/app/common/img/commonIcon/close-icon.svg);
  mask: url(/app/common/img/commonIcon/close-icon.svg);
}

[data-module=storage] .failed-file-icon {
  background: url(/app/common/img/attachmentIcon/fail-icon.svg);
}

[data-module=storage] .file-icon-container i,
[data-module=storage] .folder-icon-container i,
[data-module=storage] .file-icon-container a,
[data-module=storage] .folder-icon-container a {
  color: var(--main-icon-color);
}

[data-module=storage] .file-icon-container i:hover,
[data-module=storage] .folder-icon-container i:hover,
[data-module=storage] .file-icon-container a:hover,
[data-module=storage] .folder-icon-container a:hover {
  color: var(--main-highlight-color);
}

[data-module=storage] .file-icon-container,
[data-module=storage] .folder-icon-container {
  flex: 0;
  width: auto;
  display: flex;
  align-self: center;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: flex-end;
}

[data-module=storage] .file-util-icon-container,
[data-module=storage] .folder-util-icon-container {
  flex: 1 0 5%;
  max-width: 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

[data-module=storage] .file-link-container,
[data-module=storage] .folder-link-container {
  flex: 1;
  line-height: 1.5;
  line-height: 1.8;
  display: flex;
  align-items: center;
  max-width: calc(100% / 2 - 50px);
  padding-right: 30px;
}


/* for preview with anchor */
/* [data-module=storage] .file-link {
  color: var(--file-link-color);
}

[data-module=storage] .file-link:hover {
  color: var(--main-highlight-color);
} */

[data-module=storage] [class*=-file-list-container] {
  height: 100%;
  width: 100%;
}

[data-module=storage] [data-module*=-file-list] {
  height: 100%;
  width: 100%;
  display: flex;
}

[data-module=storage] .header-label {
  display: flex;
  align-items: center;
  padding: 0;
}

[data-module=storage] .list-header > :first-child,
[data-module=storage] .file-container > :first-child,
[data-module=storage] .folder-container > :first-child {
  margin-right: 10px;
}

[data-module=storage] .folder-container.editing > :first-child ,
[data-module=storage] .file-container.editing > :first-child{
  margin-right: 0;
  cursor: default;
}  

[data-module=storage] .file-link,
[data-module=storage] .file-mod-time,
[data-module=storage] .folder-name,
[data-module=storage] .folder-mod-time {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
}

[data-module=storage] .folder-name {
  font-weight: bold;
}

[data-module=storage] .option-dropdown-icon {
  width: 20px;
}
[data-module=storage] .file-item-option-menu {
  width: 120px;
  padding: 10px 0;
}
[data-module=storage] .task-action-icon {
  margin-left: 10px;
}
[data-module=storage] #discard-icon-container {
  background-color: #96969f;
  border: none;
  margin-right: 0;
}

[data-module=storage] #confirm-icon-container {
  background-color: #5a9854;
  border: none;
}

[data-module=storage]  #confirm-icon-container:hover {
  background-color: #5fce55;
  border: none;

}
[data-module=storage] #discard-icon-container:hover {
  background-color: #b4b4b4;
  border: none;
}

[data-module=storage] #option-container{
  justify-content: flex-end;
}