h3.file-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--gray-900);
  margin-bottom: 24px;
}

.file {
  &-wrap{
    gap: 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    @include max(1500px) {
      grid-template-columns: repeat(4, 1fr);
    }
    @include max(1400px) {
      grid-template-columns: repeat(3, 1fr);
    }

    @include max(767px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @include max(399px) {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  &-item {
    padding: 20px;
    background: white;
    box-sizing: border-box;
    border-radius: 4px;
    transition: all 0.4s;
    border: 1px solid var(--primary-100);
    &:hover {
      background-color: var(--primary-50);
    }
  }
  &-icon {
    margin-bottom: 18px;
  }
  &-data {
    h4 {
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 5px;
      color: var(--gray-900);
    }
    p {
      font-size: 14px;
      line-height: 20px;
      color: var(--gray-500);
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.remove-class {
  .file-item {
    width: 204px;
  }
}

// file table
.recent-file-list {
  border-radius: 0 0 8px 8px;
  background-color: white;
  overflow: hidden;
  @include max(1550px) {
    overflow-x: scroll;
  }
  table {
    width: 100%;
    thead {
      th {
        font-size: 12px;
        width: 120px;
        padding: 12px 24px 12px;
        white-space: nowrap;
        font-weight: 500;
        border-width: 0;
        box-shadow: none;
        color: var(--gray-700);
        text-transform: uppercase;
        background-color: #f5f6f7;
        @include breakpoint(lg) {
          width: auto;
        }
        &:first-child {
          padding-left: 65px;
          border-radius: 0;
        }
        &:last-child {
          border-radius: 0;
        }
      }
    }
    tbody {
      vertical-align: middle;
      border: 0;
      tr {
        transition: all 0.4s;
        &:hover {
          background-color: var(--primary-50);
        }
        &:hover .button-icon {
          path {
            stroke: var(--gray-900);
          }
        }
        &:hover .start-icon {
          path {
            stroke: var(--warning-500);
          }
        }
        &:hover .folder-name {
          path {
            fill: var(--gray-900);
          }
        }
        &:hover td {
          color: var(--gray-900);
        }
        &:hover td a {
          color: var(--gray-900);
        }
        &:hover .button-icon {
          path {
            stroke: var(--gray-900);
          }
        }
        td {
          font-size: 14px;
          width: 120px;
          white-space: nowrap;
          color: var(--gray-700);
          border-width: 0;
          line-height: 1;
          padding: 0;
          a {
            color: var(--gray-700);
            padding: 12px 24px;
            display: block;
          }
          @include breakpoint(lg) {
            width: auto;
          }
          &:first-child {
            border-radius: 7px 0px 0px 7px;
          }
          &:last-child {
            border-radius: 0px 7px 7px 0px;
          }
        }
      }
    }
    .start-icon {
      margin-right: 25px;
      path {
        transition: all 0.4s;
      }
    }
    .folder-name {
      font-weight: 500;
      display: flex;
      align-items: center;
      svg {
        margin-right: 9px;
      }
      path {
        transition: all 0.4s;
      }
    }

    .recent-file-wrap {
      display: flex;
      align-items: center;
    }
    .dropdown-wrap {
      padding-right: 24px;
    }
    td.large-width {
      width: 700px;
      @include breakpoint(lg) {
        width: 400px;
      }
      @include breakpoint(md) {
        width: auto;
      }
    }
    .link-wrap {
      margin-left: -48px;
      @include breakpoint(md) {
        margin: 0;
      }
      img {
        margin-right: 24px;
        @include breakpoint(md) {
          display: none;
        }
      }
    }
  }
}

.table > :not(:first-child) {
  border-top: 0;
}
td.extra-padding {
  padding-top: 10px !important;
}

.button-icon {
  border: none;
  padding: 0;
  background-color: transparent;
  path {
    transition: all 0.4s;
    stroke: var(--gray-400);
  }
}
