tav-ui/theme-chalk/src/components/file.less

Tav UI

@import '../var/index.less';

@component-name: ~'@{namespace}-file';

.aspect-ratio {
  position: relative !important;
  display: block !important;
  margin-right: auto;
  margin-left: auto;

  &-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
  }

  &--1-1 {
    padding-bottom: 100% !important;
  }

  &--4-3 {
    padding-bottom: 75% !important;
  }

  &--3-4 {
    padding-bottom: 133% !important;
  }

  &--16-9 {
    padding-bottom: 56% !important;
  }

  &--4-3 image,
  &--1-1 image,
  &--3-4 image,
  &--16-9 image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transform: translate(-50%, -50%) !important;
  }
}

.@{namespace} {
  &-file {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    &-header {
      display: flex;
      flex-direction: column;

      &-actions {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
      }

      &-actions-extra {
        margin-bottom: 16px;

        .ta-basic-form .ant-form-item:not(.ant-form-item-with-help) {
          margin-bottom: 0px;
        }
      }
    }
    &-title {
      margin-bottom: 8px;
    }
    &-main {
      flex: 1;
      width: 100%;
      height: 100%;
    }
  }
  &-file-type-select {
    .ant-select {
      width: 200px;
    }
  }
  &-file-actions {
    section + section {
      .ant-btn {
        border-left: 1px solid transparent;

        &:hover,
        &:focus {
          border-left: 1px solid #4f8dff;
          z-index: 1;
        }
      }
    }
  }
  &-file-action-upload {
    .ant-btn > .ant-btn-loading-icon .anticon svg {
      font-size: 16px;
    }
  }
  &-file-action-upload-link {
    &-form {
    }
  }
  &-file-table {
    width: 100%;
    height: 100%;

    // .vxe-grid {
    //   height: 100%;
    // }

    .vxe-header--column .vxe-cell--edit-icon,
    .vxe-header--column .vxe-cell-title-prefix-icon,
    .vxe-header--column .vxe-cell-title-suffix-icon {
      margin-top: 0.1em;
    }

    .ta-file-action-upload {
      position: absolute;
      overflow: hidden;
      border: 0;
      width: 0;
      height: 0;
    }

    &-wrapper {
      width: 100%;
      height: 100%;
    }

    &-row-editor {
      &-form {
        .ta-form-item {
          margin-bottom: 0 !important;
        }
      }
    }

    &-filter-form-file-type-tree-select {
      .child--type-module-node {
        .ant-select-tree-node-content-wrapper {
          .ant-select-tree-iconEle {
            display: inline-block !important;
            background: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNzIyNTA5Mjk1MTEyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0ODMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODkzLjk5OCA3NjcuNDJjLTMxLjA1NCAwLTU4LjQ5MyAxMi40NzMtODAuNTY2IDMwLjgwM0w2MTguNzQ5IDY1OS4yOTFjMTIuMzQ3LTI1LjQ0MyAxOS44My01My4zNzkgMTkuODMtODMuNDM1IDAtNDEuMjgzLTEzLjQ2OS03OS40NDQtMzUuNjctMTEwLjYyNWwyMjcuNzMyLTIyNy44NTRjMTguOTU2IDExLjA5OSAzOS43ODQgMTkuMjA2IDYzLjM1NyAxOS4yMDYgNzAuNTkgMCAxMjcuNzA4LTU3LjEyMiAxMjcuNzA4LTEyNy43MVM5NjQuNTg3IDEuMTYyIDg5My45OTggMS4xNjJjLTcwLjU5IDAtMTI3LjcwOSA1Ny4xMi0xMjcuNzA5IDEyNy43MDggMCAyMy41NzEgOC4xMDUgNDQuNCAxOS4yMDYgNjMuMzU3TDU1Ny43NjIgNDIwLjA4NWMtMzEuNDMtMjIuNDQ5LTY5LjM0Mi0zNS43OTQtMTEwLjc0OC0zNS43OTQtNzMuMDg0IDAtMTM1Ljk0IDQxLjUzLTE2OC4yNDIgMTAxLjg5NEwxMjQuOTk3IDQzNC44MDFjLTYuMjM2LTI4LjY4NS0zMC41NTctNTAuNTEtNjEuMTQyLTUwLjUxLTM1LjI5NiAwLTYzLjg1NSAyOC41Ni02My44NTUgNjMuODU2IDAgMzUuMjkzIDI4LjU2IDYzLjg1MyA2My44NTUgNjMuODUzIDE2LjEyIDAgMzAuNDYxLTYuNDg1IDQxLjY4Ni0xNi4zMzZsMTUyLjkwMyA1MS4wMWMtMS40OTggOS42MDItMi45OTQgMTkuMjA2LTIuOTk0IDI5LjE4MiAwIDEwNS43NTkgODUuODA0IDE5MS41NjQgMTkxLjU2NCAxOTEuNTY0IDUyLjYzIDAgMTAwLjM5OC0yMS4zMjYgMTM1LjA2OS01NS43NDhsMTkzLjQzMyAxMzguMDZjLTUuNDg3IDE0LjIxNy05LjIyOCAyOS4zMDktOS4yMjggNDUuMzk4IDAgNzAuNDY0IDU3LjEyIDEyNy43MDggMTI3LjcxIDEyNy43MDggNzAuNTg4IDAgMTI3LjcwNy01Ny4yNDQgMTI3LjcwNy0xMjcuNzA4IDAtNzAuNDY2LTU3LjExOC0xMjcuNzEtMTI3LjcwNy0xMjcuNzF6IiBmaWxsPSIjMTI5NmRiIiBwLWlkPSIxNDg0Ij48L3BhdGg+PC9zdmc+)
              left center no-repeat;
            background-size: 14px 14px;
          }
        }
      }

      // .child--type-normal-node {
      //   .ant-select-tree-node-content-wrapper {
      //     .ant-select-tree-iconEle {
      //       display: inline-block !important;
      //       background: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNzIyNTA5MzQyODI4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIyNDciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNTEyIDUxMm0tNDE2IDBhNDE2IDQxNiAwIDEgMCA4MzIgMCA0MTYgNDE2IDAgMSAwLTgzMiAwWiIgZmlsbD0iI0U2RkJGRiIgcC1pZD0iMjI0OCI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgOTU0Yy01OS43IDAtMTE3LjUtMTEuNy0xNzIuMS0zNC43LTUyLjYtMjIuMy05OS45LTU0LjEtMTQwLjUtOTQuNy00MC42LTQwLjYtNzIuNC04Ny44LTk0LjctMTQwLjVDODEuNyA2MjkuNSA3MCA1NzEuNyA3MCA1MTJjMC01OS43IDExLjctMTE3LjUgMzQuNy0xNzIuMSAyMi4zLTUyLjYgNTQuMS05OS45IDk0LjctMTQwLjUgNDAuNi00MC42IDg3LjgtNzIuNCAxNDAuNS05NC43QzM5NC41IDgxLjcgNDUyLjMgNzAgNTEyIDcwYzU5LjcgMCAxMTcuNSAxMS43IDE3Mi4xIDM0LjcgNTIuNiAyMi4zIDk5LjkgNTQuMSAxNDAuNSA5NC43IDQwLjYgNDAuNiA3Mi40IDg3LjggOTQuNyAxNDAuNSAyMyA1NC42IDM0LjcgMTEyLjQgMzQuNyAxNzIuMSAwIDU5LjctMTEuNyAxMTcuNS0zNC43IDE3Mi4xLTIyLjMgNTIuNi01NC4xIDk5LjktOTQuNyAxNDAuNS00MC42IDQwLjYtODcuOCA3Mi40LTE0MC41IDk0LjctNTQuNiAyMy0xMTIuNCAzNC43LTE3Mi4xIDM0Ljd6IG0wLTgzMmMtMjE1IDAtMzkwIDE3NS0zOTAgMzkwczE3NSAzOTAgMzkwIDM5MCAzOTAtMTc1IDM5MC0zOTAtMTc1LTM5MC0zOTAtMzkweiIgZmlsbD0iIzQzQ0FGRiIgcC1pZD0iMjI0OSI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNzcyYy0xNDMuNCAwLTI2MC0xMTYuNi0yNjAtMjYwczExNi42LTI2MCAyNjAtMjYwIDI2MCAxMTYuNiAyNjAgMjYwLTExNi42IDI2MC0yNjAgMjYweiIgZmlsbD0iIzQzQ0FGRiIgcC1pZD0iMjI1MCI+PC9wYXRoPjwvc3ZnPg==)
      //       left center no-repeat;
      //       background-size: 14px 14px;
      //     }
      //   }
      // }

      .ant-select-tree-list-holder-inner {
        display: block !important;

        .child--deep-node {
          display: inline-flex !important;
        }
      }

      &-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
  &-file-version {
    &-modal {
      .scrollbar__view > div {
        position: relative;
      }

      .scroll-container {
        padding-bottom: 32px !important;
      }

      .ant-modal-title {
        width: calc(100% - 50px);
      }

      &-body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
  &-file-preview, &-file-upload-preview {
    &-modal {
      z-index: 100000 !important;

      &-body {
        width: 100%;
        height: 100%;

        .ant-image-preview-mask {
          display: none;
        }

        .ant-image-preview-wrap {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }

        .ant-image-preview-operations {
          top: unset;
          right: unset;
          width: auto;
          bottom: 0;
          left: 50%;
          transform: translate(-50%);
          border-radius: 6px;

          &-operation:first-child {
            display: none;
          }
        }

        .ant-image-preview-img-wrapper {
          height: calc(100% - 60px);
        }
      }

      .ant-modal {
        top: 0 !important;
        padding: 0;
        margin: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;

        &-content {
          height: 100vh;
          border-radius: 0;
          display: flex;
          flex-direction: column;

          .ant-modal-close {
            display: none;
          }

          .ant-modal-header {
            padding-left: 8px;
            padding-right: 8px;
            border-radius: 0;
            border-bottom: none;

            .ant-modal-title {
              height: 44px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #fff;
              font-size: 14px;
              font-weight: 400;

              .line {
                border-right: 1px solid #dee0e3;
                margin-left: 8px;
                margin-right: 16px;
                height: 36px;
              }
            }
          }

          .ant-modal-body {
            border-top: 1px solid #dee0e3;
            flex: 1;
            max-height: 100%;
            overflow: hidden;

            .scroll-container {
              padding: 0;
            }

            .scrollbar__view {
              width: 100%;
              height: 100%;

              & > div {
                width: 100%;
                height: 100%;
                max-height: 100% !important;
              }

              .ant-spin {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .ant-spin-text {
                  margin-left: 16px;
                }
              }
            }

            .file-view-content {
              position: relative;
              background: #fff;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;
              top: 0;
              left: 0;
              width: 100%;
              height: calc(100% - 60px);
            }

            .ant-spin-container {
              width: 100%;
              height: 100%;
            }

            iframe {
              border: none;
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      &.hide-modal-header {
        .ant-modal-header {
          height: 0;
          padding: 0;
        }
        .file-view-close-btn {
          position: absolute;
          top: 16px;
          left: 8px;
          z-index: 1;
        }
        .file-view-content {
          display: flex !important;
          height: 100% !important;
        }
      }

      .file-view-close-btn {
        max-width: 90px;
        display: flex;
        align-items: center;
        color: rgb(82 82 82 / 1);

        &:hover {
          background-color: rgb(0 0 0 / 0.08);
        }

        .anticon-close {
          font-size: 16px;
        }
      }

      .file-view-title {
        display: flex;
        align-items: center;
        flex: 1;
        max-width: calc(100% - 100px);
        max-height: 40px;

        svg {
          font-size: 32px;
        }
      }

      .file-view-title-content {
        flex: 1;
        margin-left: 12px;

        .main {
          font-size: 16px !important;
          color: #525252;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
          white-space: nowrap;
          margin-right: 8px;
        }

        .other {
          font-size: 12px !important;
          color: #a3a3a3;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
          white-space: nowrap;
          margin-right: 8px;
        }
      }
    }
  }
  &-file-log {
    &-modal {
      .scrollbar__view > div {
        position: relative;
      }

      .ant-modal-title {
        width: calc(100% - 50px);
      }

      &-body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
  &-file-cards {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;

    &-main {
      flex: 1;
      position: relative;
      // min-width: 300px;

      & > .ant-spin {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .ant-spin-dot {
          margin-bottom: 12px;
        }
      }

      & > .ant-spin-nested-loading {
        width: 100%;
        height: 100%;

        .ant-spin-container {
          width: 100%;
          height: 100%;
          padding: 1px;
        }
      }

      &--waterfall {
        width: calc(100% - 40px);
        height: calc(100% - 20px);
        margin: 10px 20px;

        .@{namespace} {
          &-file-card {
            margin: 10px 0;
          }
        }
      }

      .@{namespace} {
        &-file-card {
          & + & {
            margin-top: 20px;
          }
        }
      }
    }
  }
  &-file-card {
    background: #ffffff;
    box-shadow: 0px 0px 0.5px 0.5px #e5e6e8;

    & + & {
      margin-top: 20px;
    }

    &--required {
      .@{namespace} {
        &-file-card {
          &-meta {
            &__label-required {
              display: inline-block;
              position: absolute;
              top: 5px;
              left: -12px;
              display: inline-block;
              margin-left: 2px;
              color: #ff4d4f;
              font-size: 14px;
              line-height: 1;
            }
          }
        }
      }
    }

    &--uploaded {
      .@{namespace} {
        &-file-card {
          &-header {
            position: relative;

            &:after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 20px;
              width: calc(100% - 40px);
              height: 1px;
              background-color: #e5e6e8;
              opacity: 0.5;
            }
          }
          &-meta {
            &__upload-status {
              color: rgba(44, 200, 178, 1);
            }
          }
        }
      }
    }

    &--validated-error {
      border: 1px solid #ff4d4f;
      box-shadow: none;
    }

    &-error-message {
      padding: 0 20px 14px;
      color: #ff4d4f;
    }

    &-header {
      display: flex;
      align-items: center;
      padding: 14px 20px;

      &-extra {
        padding: 0 20px;

        .ta-file-header-actions-extra {
          margin-top: 14px;
          margin-bottom: 0;
        }
      }
    }

    &-meta {
      position: relative;
      width: calc(100% - 146px); // 64 * 2 + 8 + 10 = 146

      &__label {
        &-wrapper {
          display: flex;
          align-items: center;
        }

        display: inline-block;
        max-width: 150px;
        overflow: hidden;
        font-size: 14px;
        // line-height: 1;
        font-weight: 600;
        color: #222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &__label-required {
        display: none;
      }

      // .ant-divider {
      //   margin: 0 10px;
      //   border-left: 1px solid rgba(134, 144, 156, 0.2);
      // }

      // &__upload-status {
      //   font-size: 12px;
      //   line-height: 18px;
      //   color: rgba(134, 144, 156, 0.6);
      // }
    }

    &-actions {
      flex: 1;
      text-align: right;
      padding-left: 10px;

      .ta-file-action-upload-link {
        margin-right: 8px;

        .ant-btn {
          border: none;
          background-color: rgba(242, 243, 245, 1);
        }
      }

      .ant-btn {
        font-size: 12px;
        border-radius: 0px;
        padding: 0 8px;
        height: 24px;
        line-height: 1;
        min-width: auto;
      }
    }

    &-main {
      .ant-spin-container {
        padding: 0 !important;
      }

      .ta-file-action-upload {
        position: absolute;
        overflow: hidden;
        border: 0;
        width: 0;
        height: 0;
      }
    }

    // &-footer {
    //   padding: 0 20px 20px;
    // }

    &-list {
      padding-bottom: 10px !important;

      &-item {
        padding: 10px 20px !important;
        border-bottom: none !important;

        &:first-child {
          margin-top: 10px;
        }

        &:hover {
          background: #f7f8fa;
        }

        &-actions {
          display: flex;
          align-items: center;
          width: 100%;
        }

        &-avator {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 36px;
          margin-right: 10px;
        }

        &-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;
          width: calc(100% - 46px - 90px); // 36 + 10 = 46; 80 + 10 = 90
        }

        // &-description-1 {
        //   position: relative;
        //   margin-bottom: 4px;
        //   display: flex;
        //   align-items: center;
        //   gap: 16px;
        // }

        // &-description-2 {
        &-fullName,
        &-description {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 2px 6px;
          line-height: 1.2;
        }

        &-description {
          font-size: 12px;
          color: rgba(134, 144, 156, 0.6);
        }

        &-createByName {
          max-width: 30%;
        }

        &-updateTime {
          max-width: calc(70% - 10px);
        }

        &-action {
          display: flex;
          align-items: center;
          width: 80px;
          margin-left: 10px;

          .action-divider {
            display: table;
          }

          .ant-popover {
            top: 30px !important;

            .ant-popover-arrow {
              // bottom: auto !important;
              // top: 6px !important;
              display: none !important;
            }
          }

          &.left {
            justify-content: flex-start;
          }

          &.center {
            justify-content: center;
          }

          &.right {
            justify-content: flex-end;
          }

          button {
            display: flex;
            align-items: center;

            padding-left: 0 !important;
            padding-right: 0 !important;
            font-size: 12px;
            border: none;
            min-width: auto;

            span {
              margin-left: 0 !important;
            }

            color: rgba(134, 144, 156, 0.6);
            &:hover,
            &:focus {
              color: #4f8dff;
              border-color: #4f8dff;
            }
          }

          &-dropdown {
            .ant-dropdown-menu-item {
              &:last-child {
                border-top: 1px solid #f0f0f0;
              }

              .ant-btn {
                color: #555555;

                &:hover,
                &:focus {
                  color: #4f8dff;
                  border-color: #4f8dff;
                }
              }
            }
            .ant-menu-item-divider {
              border-width: 0;
            }
          }

          button.ant-btn-circle {
            span {
              margin: auto !important;
            }
          }

          .ant-divider,
          .ant-divider-vertical {
            margin: 0 8px;
          }

          .icon-more {
            width: 16px;
            height: 16px;
            transform: rotate(90deg);

            svg {
              font-size: 1.1em;
              font-weight: 700;
            }
          }
        }
      }
    }

    &-row-editor {
      width: 100%;

      .ta-basic-form .ant-form-item:not(.ant-form-item-with-help) {
        margin-bottom: 12px;
      }
      .ant-row .ant-form-item-with-help .ant-form-item-explain {
        font-size: 12px;
        min-height: 12px;
      }
    }
  }

  &-file-upload {
    &-content {
      &.has-files {
        .@{namespace} {
          &-file-upload {
            &-upload {
              display: none;
            }
            &-files {
              margin-top: 0;
            }
          }
        }
      }

      .ant-upload-select {
        width: 100px;
        height: 100px;
      }
    }

    &-files {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 10px;
    }

    &-file {
      position: relative;
      width: 100px;
      height: 100px;
      padding: 6px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 4px;

      &-icon {
        width: 55px;
        height: 55px;
        background-size: 100% 100%;
        display: inline-block;
        flex: 1;
        margin: 0 auto;
        object-fit: cover;
      }

      .icon {
        &--doc {
          background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDM4IDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTEsIC0zMzYpIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMSwgMzM2KSI+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNOS41LDI0IEwzOCwyNCBMMzgsMzAgQzM4LDMxLjEwNDU2OTUgMzcuMDU0ODIzNCwzMiAzNS44ODg4ODg5LDMyIEwxMS42MTExMTExLDMyIEMxMC40NDUxNzY2LDMyIDkuNSwzMS4xMDQ1Njk1IDkuNSwzMCBMOS41LDI0IFoiCiAgICAgICAgICAgIGZpbGw9IiMxRTNFOEMiCiAgICAgICAgICA+PC9wYXRoPgogICAgICAgICAgPHBvbHlnb24gZmlsbD0iIzJDNTlCNyIgcG9pbnRzPSI5LjUgMTYgMzggMTYgMzggMjQgOS41IDI0Ij48L3BvbHlnb24+CiAgICAgICAgICA8cG9seWdvbiBmaWxsPSIjNDM3QUNEIiBwb2ludHM9IjkuNSA4IDM4IDggMzggMTYgOS41IDE2Ij48L3BvbHlnb24+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNMTEuNjExMTExMSwwIEwzNS44ODg4ODg5LDAgQzM3LjA1NDgyMzQsMCAzOCwwLjg5NTQzMDUgMzgsMiBMMzgsOCBMOS41LDggTDkuNSwyIEM5LjUsMC44OTU0MzA1IDEwLjQ0NTE3NjYsMCAxMS42MTExMTExLDAgWiIKICAgICAgICAgICAgZmlsbD0iIzVEQTNFOCIKICAgICAgICAgID48L3BhdGg+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNMi4xMTExMTExMSw3IEwxNi44ODg4ODg5LDcgQzE4LjI5NjI5NjMsNyAxOSw3LjY2NjY2NjY3IDE5LDkgTDE5LDIzIEMxOSwyNC4zMzMzMzMzIDE4LjI5NjI5NjMsMjUgMTYuODg4ODg4OSwyNSBMMi4xMTExMTExMSwyNSBDMC43MDM3MDM3MDQsMjUgMCwyNC4zMzMzMzMzIDAsMjMgTDAsOSBDMCw3LjY2NjY2NjY3IDAuNzAzNzAzNzA0LDcgMi4xMTExMTExMSw3IFoiCiAgICAgICAgICAgIGZpbGw9IiMzMzY0QkYiCiAgICAgICAgICA+PC9wYXRoPgogICAgICAgICAgPHBvbHlnb24KICAgICAgICAgICAgZmlsbD0iI0ZGRkZGRiIKICAgICAgICAgICAgcG9pbnRzPSIyLjY3NTMwNTU2IDExLjA2OSA1LjQzMjQxNjY3IDIwLjkzMTUgNy40OTA3NSAyMC45MzE1IDkuNDM5MzA1NTYgMTQuMjkgOS41NTMzMDU1NiAxNC4yOSAxMS41MjI0NDQ0IDIwLjkzMTUgMTMuNTY2NTI3OCAyMC45MzE1IDE2LjMyNjgwNTYgMTEuMDY5IDE0LjA3NTMwNTYgMTEuMDY5IDEyLjQ2ODIyMjIgMTguMTE2NSAxMi4zNDk0NzIyIDE4LjExNjUgMTAuNDE2MjIyMiAxMS4wNjkgOC41NzU4NjExMSAxMS4wNjkgNi42NzkwMjc3OCAxOC4xMTY1IDYuNTYzNDQ0NDQgMTguMTE2NSA0Ljk0MzE2NjY3IDExLjA2OSIKICAgICAgICAgID48L3BvbHlnb24+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9zdmc+');
        }
        &--image {
          background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGgKICAgICAgZD0iTTMgM2EyIDIgMCAwIDEgMi0yaDkuNTg2YTEgMSAwIDAgMSAuNzA3LjI5M2w1LjQxNCA1LjQxNGExIDEgMCAwIDEgLjI5My43MDdWMjFhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWM1oiCiAgICAgIGZpbGw9IiNGRkM2MEEiCiAgICA+PC9wYXRoPgogICAgPHBhdGgKICAgICAgb3BhY2l0eT0iMC44IgogICAgICBkPSJNMTUgMS40ODNhLjIuMiAwIDAgMSAuMzQxLS4xNDJMMjAuNjYgNi42NmEuMi4yIDAgMCAxLS4xNDIuMzQxSDE3YTIgMiAwIDAgMS0yLTJWMS40ODNaIgogICAgICBmaWxsPSIjRDk5OTA0IgogICAgPjwvcGF0aD4KICAgIDxwYXRoCiAgICAgIGQ9Ik04LjM3MiAxMGExIDEgMCAwIDAtMSAxdi4xODJhMSAxIDAgMCAwIDEgMWguMTgxYTEgMSAwIDAgMCAxLTFWMTFhMSAxIDAgMCAwLTEtMWgtLjE4MVptOC4zMjMgMi43NmEuNi42IDAgMCAxIDEuMDQuNDA4VjE4LjVhLjUuNSAwIDAgMS0uNS41SDcuNDAxYS40LjQgMCAwIDEtLjMwNy0uNjU3bDIuOTI2LTMuNDlhMSAxIDAgMCAxIDEuNTMyIDBsMS41MjMgMS44MTYgMy42Mi0zLjkxWiIKICAgICAgZmlsbD0iI2ZmZiIKICAgID48L3BhdGg+CiAgPC9zdmc+');
        }
        &--pdf {
          background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDM4IDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGc+CiAgICAgIDxnPgogICAgICAgIDxwYXRoCiAgICAgICAgICBkPSJNMzAgMEwxMC42MTE3IDBDMTAuMTg0NiAtMi4wMjA1NmUtMDcgOS43NzQ4NSAwLjE2MDQyNiA5LjQ3MjY0IDAuNDQ2MDI5QzkuMTcwNDIgMC43MzE2MzMgOS4wMDA0MyAxLjExOTA1IDkgMS41MjMxNlY4SDM4TDMwIDBaIgogICAgICAgICAgZmlsbD0iI0ZFMzM0MyIKICAgICAgICAvPgogICAgICAgIDxwYXRoCiAgICAgICAgICBvcGFjaXR5PSIwLjgiCiAgICAgICAgICBkPSJNMzAgMEwzOCA4SDMzLjJDMzIuMDc5OSA4IDMxLjUxOTggOCAzMS4wOTIgNy43ODIwMUMzMC43MTU3IDcuNTkwMjcgMzAuNDA5NyA3LjI4NDMxIDMwLjIxOCA2LjkwNzk4QzMwIDYuNDgwMTYgMzAgNS45MjAxMSAzMCA0LjhWMFoiCiAgICAgICAgICBmaWxsPSJ3aGl0ZSIKICAgICAgICAvPgogICAgICAgIDxwYXRoIGQ9Ik0zOCA4SDlWMTZIMzhWOFoiIGZpbGw9IiNFRTFBMkIiIC8+CiAgICAgICAgPHBhdGggZD0iTTM4IDE2SDlWMjRIMzhWMTZaIiBmaWxsPSIjREQwMDEyIiAvPgogICAgICAgIDxwYXRoCiAgICAgICAgICBkPSJNMzggMjRIOVYzMC40NzcxQzkuMDAwNDMgMzAuODgwOSA5LjE3MDIxIDMxLjI2OCA5LjQ3MjA5IDMxLjU1MzVDOS43NzM5NyAzMS44MzkgMTAuMTgzMyAzMS45OTk2IDEwLjYxMDIgMzJIMzYuMzg4MkMzNi44MTU3IDMyIDM3LjIyNTYgMzEuODM5NCAzNy41Mjc5IDMxLjU1MzVDMzcuODMwMiAzMS4yNjc2IDM4IDMwLjg3OTkgMzggMzAuNDc1NlYyNFoiCiAgICAgICAgICBmaWxsPSIjQ0IwMDExIgogICAgICAgIC8+CiAgICAgICAgPHBhdGgKICAgICAgICAgIG9wYWNpdHk9IjAuMiIKICAgICAgICAgIGQ9Ik0xNy4zMzI4IDcuMDAxNDlIOVYyNkgxNy4zMzI4QzE3Ljc3NDQgMjUuOTk5MiAxOC4xOTc3IDI1Ljg0MjEgMTguNTEwMSAyNS41NjNDMTguODIyNSAyNS4yODM5IDE4Ljk5ODcgMjQuOTA1NiAxOSAyNC41MTA3VjguNDkwNzhDMTguOTk5MSA4LjA5NTY0IDE4LjgyMzIgNy43MTY5MSAxOC41MTA3IDcuNDM3NTFDMTguMTk4MiA3LjE1ODEgMTcuNzc0NyA3LjAwMDc5IDE3LjMzMjggN1Y3LjAwMTQ5WiIKICAgICAgICAgIGZpbGw9ImJsYWNrIgogICAgICAgIC8+CiAgICAgICAgPHBhdGgKICAgICAgICAgIGQ9Ik0xLjUwMDUgNy4wMDE1SDE2LjQ5OTVDMTYuODk3MiA3LjAwMTUgMTcuMjc4NiA3LjE1OTM4IDE3LjU2IDcuNDQwNDZDMTcuODQxMyA3LjcyMTUzIDE3Ljk5OTYgOC4xMDI4IDE4IDguNTAwNVYyMy40OTk1QzE4IDIzLjg5NzUgMTcuODQxOSAyNC4yNzkxIDE3LjU2MDUgMjQuNTYwNUMxNy4yNzkxIDI0Ljg0MTkgMTYuODk3NSAyNSAxNi40OTk1IDI1SDEuNDk5QzEuMTAxMyAyNC45OTk2IDAuNzIwMDMgMjQuODQxMyAwLjQzODk1NiAyNC41NkMwLjE1Nzg4MiAyNC4yNzg2IC0xLjg5NTMxZS0wNyAyMy44OTcyIDAgMjMuNDk5NUwwIDguNTAwNUMwIDguMTAyNTQgMC4xNTgwODggNy43MjA4OCAwLjQzOTQ4NiA3LjQzOTQ5QzAuNzIwODg1IDcuMTU4MDkgMS4xMDI1NCA3IDEuNTAwNSA3VjcuMDAxNVoiCiAgICAgICAgICBmaWxsPSIjREQwMDEyIgogICAgICAgIC8+CiAgICAgICAgPHBhdGgKICAgICAgICAgIGQ9Ik0xMy43MjY4IDE5LjE4OTVDMTIuNzUwMiAxOS4xMDgzIDExLjgxNDcgMTguNzYyOSAxMS4wNDE4IDE4LjExMjRDOS41NjU1OSAxOC40NDA0IDguMTIyNTMgMTguOTAyOCA2LjczMDczIDE5LjQ5MzdDNS42MTIwNyAyMS40ODQ1IDQuNTU0MTUgMjIuNSAzLjY1OTc4IDIyLjVDMy40NzY2MSAyMi41IDMuMjUyMzIgMjIuNDU4OSAzLjExMDI3IDIyLjM1ODFDMi43MDM3MyAyMi4xNzUyIDIuNSAyMS43NjkyIDIuNSAyMS4zODI4QzIuNSAyMS4wNTggMi41ODEzMSAyMC4xNDQzIDYuMDE4NiAxOC42NjEyQzYuODA1NTYgMTcuMjMyOCA3LjQ0NjE3IDE1LjcyODcgNy45MzA3IDE0LjE3MThDNy41MDM2MSAxMy4yOTkyIDYuNTQ3NTYgMTEuMTY2NSA3LjE5ODAxIDEwLjA4OTRDNy40MjIzIDkuNjgzNDIgNy44NDkzOSA5LjQ4MDg5IDguMzE2NjcgOS41MDE0MkM4LjY4MzAyIDkuNTAxNDIgOS4wNDkzNiA5LjY4MzQyIDkuMjUyMTYgOS45NjgwOUM5LjcxOTQ0IDEwLjYxNzcgOS42NzkyNSAxMS45OTkgOS4wNjg5OSAxNC4wM0M5LjY1NTEzIDE1LjExMSAxMC40MTA0IDE2LjA5MTUgMTEuMzA2MyAxNi45MzQ1QzEyLjA1ODYgMTYuNzkyNiAxMi44MzE1IDE2LjY5MTggMTMuNTgzOCAxNi42OTE4QzE1LjI5MjIgMTYuNzMyIDE1LjUzNyAxNy41MjM0IDE1LjQ5NTkgMTcuOTkxQzE1LjUzNjEgMTkuMTg5NSAxNC4zMzcxIDE5LjE4OTUgMTMuNzI2OCAxOS4xODk1Wk0zLjU3NzU0IDIxLjQ0MzVMMy42ODAzNCAyMS40MDMzQzQuMTg4NzQgMjEuMjIwNCA0LjU5NTI3IDIwLjg1NDUgNC44NzkzOCAyMC4zODc5QzQuMzMwNzkgMjAuNjExOSAzLjkwMzcgMjAuOTU3MiAzLjU3ODQ4IDIxLjQ0MzVIMy41Nzc1NFpNOC4zOTc5OCAxMC41Nzc2SDguMjk2MTFDOC4yNTU5MyAxMC41Nzc2IDguMTk0MjUgMTAuNTc3NiA4LjE1NDA2IDEwLjYxNzdDOC4wMTIwMSAxMS4yMjcyIDguMTEyOTQgMTEuODc3NyA4LjM3ODM1IDEyLjQ2NTdDOC41Nzc3NyAxMS44NTMxIDguNTg0NjIgMTEuMTk0MiA4LjM5Nzk4IDEwLjU3NzZaTTguNjQxOSAxNS44MTczTDguNjAxNzEgMTUuODk4NUw4LjU2MDU5IDE1Ljg1ODRDOC4yMzQ2MiAxNi42OTE3IDcuODc1MTUgMTcuNTExNSA3LjQ4MzA1IDE4LjMxNTlMNy41NjQzNiAxOC4yNzU3VjE4LjM1NjlDOC4zNyAxOC4wNjY1IDkuMTkxNTYgMTcuODIyMiAxMC4wMjUgMTcuNjI1Mkw5Ljk4NDg1IDE3LjU4NUgxMC4wODU4QzkuNTQ0MjQgMTcuMDQ3NiA5LjA2MDMyIDE2LjQ1NTEgOC42NDE5IDE1LjgxNzNaTTEzLjU4MzggMTcuNzQ3NEMxMy4yNTg2IDE3Ljc0NzQgMTIuOTc0NSAxNy43NDc0IDEyLjY0OTMgMTcuODI4NkMxMy4wMTQ3IDE4LjAxMTYgMTMuMzgxIDE4LjA3MTMgMTMuNzI2OCAxOC4xMTI0QzEzLjk2OTggMTguMTUzNSAxNC4yMzUyIDE4LjExMjQgMTQuNDU4NiAxOC4wMzEyQzE0LjQ1ODYgMTcuOTMwNCAxNC4zMTY1IDE3Ljc0NzQgMTMuNTgzOCAxNy43NDc0WiIKICAgICAgICAgIGZpbGw9IndoaXRlIgogICAgICAgIC8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L3N2Zz4=');
        }
        &--ppt {
          background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDM4IDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTEsIC00MDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMSwgNDAwKSI+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNMzgsMTYgTDIxLjUsMTYgTDIxLjUsMCBDMjUuODc2MDcyMSwwIDMwLjA3MjkxMTYsMS42ODU3MDk0NSAzMy4xNjcyNjE5LDQuNjg2MjkxNSBDMzYuMjYxNjEyMSw3LjY4Njg3MzU2IDM4LDExLjc1NjUzNjIgMzgsMTYgTDM4LDE2IFoiCiAgICAgICAgICAgIGZpbGw9IiNGMDk1NzMiCiAgICAgICAgICA+PC9wYXRoPgogICAgICAgICAgPHBhdGgKICAgICAgICAgICAgZD0iTTIxLjUsMCBMMjEuNSwxNiBMNSwxNiBDNSw3LjE2MzQ0NCAxMi4zODczMDE2LDAgMjEuNSwwIEwyMS41LDAgWiIKICAgICAgICAgICAgZmlsbD0iI0RENzQ1MSIKICAgICAgICAgID48L3BhdGg+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNMzgsMTYgQzM4LDI0LjgzNjU1NiAzMC42MTI2OTg0LDMyIDIxLjUsMzIgQzEyLjM4NzMwMTYsMzIgNSwyNC44MzY1NTYgNSwxNiBMMzgsMTYgWiIKICAgICAgICAgICAgZmlsbD0iI0M0NUEzQiIKICAgICAgICAgID48L3BhdGg+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNMiw3LjI3MjcyNzI3IEwxNiw3LjI3MjcyNzI3IEMxNy4zMzMzMzMzLDcuMjcyNzI3MjcgMTgsNy45MTkxOTE5MiAxOCw5LjIxMjEyMTIxIEwxOCwyMi43ODc4Nzg4IEMxOCwyNC4wODA4MDgxIDE3LjMzMzMzMzMsMjQuNzI3MjcyNyAxNiwyNC43MjcyNzI3IEwyLDI0LjcyNzI3MjcgQzAuNjY2NjY2NjY3LDI0LjcyNzI3MjcgMCwyNC4wODA4MDgxIDAsMjIuNzg3ODc4OCBMMCw5LjIxMjEyMTIxIEMwLDcuOTE5MTkxOTIgMC42NjY2NjY2NjcsNy4yNzI3MjcyNyAyLDcuMjcyNzI3MjcgWiIKICAgICAgICAgICAgZmlsbD0iI0I3NEEyQiIKICAgICAgICAgID48L3BhdGg+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNNi43NTksMjEuMDg1MDkwOSBMNC42OTM1LDIxLjA4NTA5MDkgTDQuNzAyLDExLjUxNTYyNjIgTDguODk1LDExLjUxNTYyNjIgQzkuNzEyODMwMTIsMTEuNTEzNzAxMSAxMC41MDU1Mzc3LDExLjc4OTU0MjkgMTEuMTM1NSwxMi4yOTUyNzI3IEMxMS44Njk2MzkyLDEyLjkyMDA0MzkgMTIuMjczODE5MSwxMy44MzI3MTEyIDEyLjIzNTUsMTQuNzc5MTUxNSBDMTIuMjczNDEzMywxNS43MjE0MzIxIDExLjg4MTg5NzksMTYuNjMyMTY5NSAxMS4xNjUsMTcuMjY5MzMzMyBDMTAuNTU3NjI5NiwxNy43OTAwMDY2IDkuNzc1Njc4NTksMTguMDc4NjYwNyA4Ljk2NSwxOC4wODE0NTQ1IEw2Ljc1OTUsMTguMDgxNDU0NSBMNi43NTk1LDIxLjA4NzUxNTIgTDYuNzU5LDIxLjA4NTA5MDkgWiBNNi43NTksMTMuMTA3ODc4OCBMNi43NTksMTYuNTA5MDkwOSBMOC40MzYsMTYuNTA5MDkwOSBDOC43NDg4NjM3OCwxNi41MDE5OTczIDkuMDU1ODIyNzQsMTYuNDI1MDExMyA5LjMzMywxNi4yODQxMjEyIEM5Ljg3NjA1ODIsMTUuOTg2NjQwNyAxMC4xOTAzODY5LDE1LjQwOTQyNzIgMTAuMTM3NSwxNC44MDY3ODc5IEMxMC4xOTAxMzA4LDE0LjIwNjYwNjUgOS44Nzc3MzM5MiwxMy42MzE2MDcgOS4zMzc1LDEzLjMzNDMwMyBDOS4wNTk5NjYzMywxMy4xOTE0ODQzIDguNzUxNjM3MDksMTMuMTE0MDgwMiA4LjQzNzUsMTMuMTA4MzYzNiBMNi43NTg1LDEzLjEwODM2MzYgTDYuNzU5LDEzLjEwNzg3ODggWiIKICAgICAgICAgICAgZmlsbD0iI0ZGRkZGRiIKICAgICAgICAgID48L3BhdGg+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9zdmc+');
        }
        &--xls {
          background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDM4IDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTEsIC00NjQpIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMSwgNDY0KSI+CiAgICAgICAgICA8cG9seWdvbiBmaWxsPSIjMkQ1QjNBIiBwb2ludHM9IjkuNSAxNiAyMy43NSAxNiAyMy43NSAyNCA5LjUgMjQiPjwvcG9seWdvbj4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik0yMy43NSwxNiBMMzgsMTYgTDM4LDI0IEwyMy43NSwyNCBMMjMuNzUsMTYgWiBNOS41LDggTDIzLjc1LDggTDIzLjc1LDE2IEw5LjUsMTYgTDkuNSw4IFoiCiAgICAgICAgICAgIGZpbGw9IiMzODdBNDciCiAgICAgICAgICA+PC9wYXRoPgogICAgICAgICAgPHBvbHlnb24gZmlsbD0iIzRGQTE2QiIgcG9pbnRzPSIyMy43NSA4IDM4IDggMzggMTYgMjMuNzUgMTYiPjwvcG9seWdvbj4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik05LjUsMjQgTDM4LDI0IEwzOCwzMCBDMzgsMzEuMTA0NTY5NSAzNy4wNTQ4MjM0LDMyIDM1Ljg4ODg4ODksMzIgTDExLjYxMTExMTEsMzIgQzEwLjQ0NTE3NjYsMzIgOS41LDMxLjEwNDU2OTUgOS41LDMwIEw5LjUsMjQgWiIKICAgICAgICAgICAgZmlsbD0iIzJENUIzQSIKICAgICAgICAgID48L3BhdGg+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNMTEuNjExMTExMSwwIEwyMy43NSwwIEwyMy43NSw4IEw5LjUsOCBMOS41LDIgQzkuNSwwLjg5NTQzMDUgMTAuNDQ1MTc2NiwwIDExLjYxMTExMTEsMCBaIgogICAgICAgICAgICBmaWxsPSIjNEZBMTZCIgogICAgICAgICAgPjwvcGF0aD4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik0yLjExMTExMTExLDcgTDE2Ljg4ODg4ODksNyBDMTguMjk2Mjk2Myw3IDE5LDcuNjY2NjY2NjcgMTksOSBMMTksMjMgQzE5LDI0LjMzMzMzMzMgMTguMjk2Mjk2MywyNSAxNi44ODg4ODg5LDI1IEwyLjExMTExMTExLDI1IEMwLjcwMzcwMzcwNCwyNSAwLDI0LjMzMzMzMzMgMCwyMyBMMCw5IEMwLDcuNjY2NjY2NjcgMC43MDM3MDM3MDQsNyAyLjExMTExMTExLDcgWiIKICAgICAgICAgICAgZmlsbD0iIzM1NzU0MSIKICAgICAgICAgID48L3BhdGg+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNMjMuNzUsMCBMMzUuODg4ODg4OSwwIEMzNy4wNTQ4MjM0LDAgMzgsMC44OTU0MzA1IDM4LDIgTDM4LDggTDIzLjc1LDggTDIzLjc1LDAgWiIKICAgICAgICAgICAgZmlsbD0iIzYzQzE4NyIKICAgICAgICAgID48L3BhdGg+CiAgICAgICAgICA8cG9seWdvbgogICAgICAgICAgICBmaWxsPSIjRkZGRkZGIgogICAgICAgICAgICBwb2ludHM9IjQuNzU0NzUgMTEuMDYzIDguMDUwMTk0NDQgMTUuOTQ4NSA0LjczNjI3Nzc4IDIwLjkzNyA3LjA5NTQ0NDQ0IDIwLjkzNyA5LjM2NDg4ODg5IDE3LjQ4MSA5LjQzOTMwNTU2IDE3LjQ4MSAxMS43MjYxNjY3IDIwLjkzNyAxNC4yMDY3MjIyIDIwLjkzNyAxMC44MzM2OTQ0IDE1Ljk0ODUgMTQuMjY0MjUgMTEuMDYzIDExLjgxOTU4MzMgMTEuMDYzIDkuNjIzNSAxNC42MTYgOS41Mjk1NTU1NiAxNC42MTYgNy4zMjIzODg4OSAxMS4wNjMiCiAgICAgICAgICA+PC9wb2x5Z29uPgogICAgICAgIDwvZz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvc3ZnPg==');
        }
        &--link {
          background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDM4IDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTEsIC0yNzIpIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMSwgMjcyKSI+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNOS4xODcxMTU0NSw3LjM2MjcxMTkgTDkuMTg3MTE1NDUsNC44MjcxMTg2OSBDOS4xODY5MTIzMyw0LjY5NzQ0NjIzIDkuMjg5NTk1OTksNC41OTAyNTQ3NyA5LjQyMDkxOTI5LDQuNTgzMDUwODkgTDM1Ljg1NDUwNiw0LjU4MzA1MDg5IEMzNS45OTEyMjc5LDQuNTgzMDUwODkgMzYuMTAyMDYzLDQuNjkyMzIzNzcgMzYuMTAyMDYzLDQuODI3MTE4NjkgTDM2LjEwMjA2MywyMi4zMDUwODQ4IEMzNi4xMDIwNjMsMjIuNDMwOTUwMiAzNi4wNTEzNDgzLDIyLjU1MTY2MDUgMzUuOTYxMDc1NiwyMi42NDA2NjA5IEMzNS44NzA4MDMsMjIuNzI5NjYxMiAzNS43NDgzNjcsMjIuNzc5NjYxIDM1LjYyMDcwMjEsMjIuNzc5NjYxIEwzMC41NzMyODk5LDIyLjc3OTY2MSBMMzAuNTczMjg5OSwyNC42Nzc5NjYxIEwzNi4wNzQ1NTY2LDI0LjY3Nzk2NjEgQzM3LjEzNzk0OTYsMjQuNjc3OTY2MSAzOCwyMy44MjgwNjYgMzgsMjIuNzc5NjYxIEwzOCwxLjg5ODMwNTEzIEMzOCwwLjg0OTkwMDE4NiAzNy4xMzc5NDk2LDAgMzYuMDc0NTU2NiwwIEw5LjE4NzExNTQ1LDAgQzguMTM5NjI5MSwwIDcuMjg0MTE4MiwwLjgyNTE0MTc3NiA3LjI2MTY3MjEsMS44NTc2MjcxNyBMNy4yNjE2NzIxLDcuMzYyNzExOSBMOS4xODcxMTU0NSw3LjM2MjcxMTkgWiBNMzIuMDQ0ODc4OCwxLjU1OTMyMjA4IEMzMi4yMzIxNDIxLDEuMzg4MTEzNTkgMzIuNDc3MTY5OCwxLjI5MTQ4Mzk0IDMyLjczMjUzNzEsMS4yODgxMzU2MyBDMzIuOTg0NTEyNywxLjI4ODA5OTQzIDMzLjIyNjQ1OTcsMS4zODU0NjE0MSAzMy40MDY0NDIzLDEuNTU5MzIyMDggQzMzLjU4OTkxMTMsMS43Mzg3MzE1NiAzMy42OTM3Njg0LDEuOTgyNTI0OTUgMzMuNjk1MjU4OCwyLjIzNzI4ODE4IEMzMy42ODA4NTA0LDIuNzU1NDkyNTkgMzMuMjU4MTQ5OCwzLjE3MjIzNTQyIDMyLjczMjUzNzEsMy4xODY0NDA3MiBDMzIuMjAwODQwNiwzLjE4NjQ0MDcyIDMxLjc2OTgxNTQsMi43NjE0OTA2NiAzMS43Njk4MTU0LDIuMjM3Mjg4MTggQzMxLjc3MzIxMTYsMS45ODU1MjAxNiAzMS44NzEyMjI3LDEuNzQzOTQ2MDMgMzIuMDQ0ODc4OCwxLjU1OTMyMjA4IEwzMi4wNDQ4Nzg4LDEuNTU5MzIyMDggWiBNMjguMTkzOTkyLDEuNTU5MzIyMDggQzI4LjM4MTI1NTQsMS4zODgxMTM1OSAyOC42MjYyODMxLDEuMjkxNDgzOTQgMjguODgxNjUwNCwxLjI4ODEzNTYzIEMyOS4xMzM2MjYsMS4yODgwOTk0MyAyOS4zNzU1NzMsMS4zODU0NjE0MSAyOS41NTU1NTU2LDEuNTU5MzIyMDggQzI5LjczOTAyNDYsMS43Mzg3MzE1NiAyOS44NDI4ODE2LDEuOTgyNTI0OTUgMjkuODQ0MzcyMSwyLjIzNzI4ODE4IEMyOS44Mjk5NjM3LDIuNzU1NDkyNTkgMjkuNDA3MjYzMSwzLjE3MjIzNTQyIDI4Ljg4MTY1MDQsMy4xODY0NDA3MiBDMjguNjI2MzIwNywzLjE4NjQ0MDcyIDI4LjM4MTQ0ODcsMy4wODY0NDEwMSAyOC4yMDA5MDM0LDIuOTA4NDQwMzggQzI4LjAyMDM1OCwyLjczMDQzOTc1IDI3LjkxODkyODcsMi40ODkwMTkwOSAyNy45MTg5Mjg3LDIuMjM3Mjg4MTggQzI3LjkyMjMyNDksMS45ODU1MjAxNiAyOC4wMjAzMzU5LDEuNzQzOTQ2MDMgMjguMTkzOTkyLDEuNTU5MzIyMDggTDI4LjE5Mzk5MiwxLjU1OTMyMjA4IFogTTI0LjM0MzEwNTMsMS41NTkzMjIwOCBDMjQuNTMwMzY4NywxLjM4ODExMzU5IDI0Ljc3NTM5NjMsMS4yOTE0ODM5NCAyNS4wMzA3NjM3LDEuMjg4MTM1NjMgQzI1LjI4MjczOTMsMS4yODgwOTk0MyAyNS41MjQ2ODYzLDEuMzg1NDYxNDEgMjUuNzA0NjY4OCwxLjU1OTMyMjA4IEMyNS44ODgxMzc5LDEuNzM4NzMxNTYgMjUuOTkxOTk0OSwxLjk4MjUyNDk1IDI1Ljk5MzQ4NTMsMi4yMzcyODgxOCBDMjUuOTc5MDc3LDIuNzU1NDkyNTkgMjUuNTU2Mzc2NCwzLjE3MjIzNTQyIDI1LjAzMDc2MzcsMy4xODY0NDA3MiBDMjQuNDk5MDY3MiwzLjE4NjQ0MDcyIDI0LjA2ODA0MiwyLjc2MTQ5MDY2IDI0LjA2ODA0MiwyLjIzNzI4ODE4IEMyNC4wNjM4NjY3LDEuOTg5MDg1MzcgMjQuMTUxOTE3MSwxLjc0Nzk0ODAzIDI0LjMxNTU5OSwxLjU1OTMyMjA4IEwyNC4zNDMxMDUzLDEuNTU5MzIyMDggWiIKICAgICAgICAgICAgZmlsbD0iIzI3NkRGRiIKICAgICAgICAgICAgb3BhY2l0eT0iMC42IgogICAgICAgICAgPjwvcGF0aD4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik0yNS42MDgzOTY3LDEzLjY0MDY3NzcgTDUuMjEyNDUwMjQsMTMuNjQwNjc3NyBDNC43OTc4NTYwMywxMy42NDA0MTI1IDQuNDAwOTgzMzgsMTMuODA2NDA2OSA0LjExMzA1NDc2LDE0LjEwMDUwNjkgQzMuODI1MTI2MTMsMTQuMzk0NjA2OCAzLjY3MDkwODI5LDE0Ljc5MTUxNDcgMy42ODU4NDg3MiwxNS4yIEwzLjY4NTg0ODcyLDI2Ljc5MzIyMDMgQzMuNjgyMTc5NTgsMjcuMTk0NzM3OCAzLjg0MTM5NjI1LDI3LjU4MTA1NDYgNC4xMjgwODgyMiwyNy44NjYyNTIyIEM0LjQxNDc4MDE5LDI4LjE1MTQ0OTggNC44MDUxNzYxNSwyOC4zMTE4NjQ0IDUuMjEyNDUwMjQsMjguMzExODY0NCBMMjUuNjA4Mzk2NywyOC4zMTE4NjQ0IEMyNi40NTM3MzUyLDI4LjMwNDQyMjggMjcuMTM1MDMxOSwyNy42MjY2Nzc1IDI3LjEzNDk5ODIsMjYuNzkzMjIwMyBMMjcuMTM0OTk4MiwxNS4yIEMyNy4xNDYwODY2LDE0Ljc5MjU3MTMgMjYuOTkwNTk3OCwxNC4zOTc4NDgzIDI2LjcwMzQ5NzIsMTQuMTA0NTk0MSBDMjYuNDE2Mzk2NSwxMy44MTEzMzk4IDI2LjAyMTc4MzYsMTMuNjQ0MTcwNCAyNS42MDgzOTY3LDEzLjY0MDY3NzcgTDI1LjYwODM5NjcsMTMuNjQwNjc3NyBaIgogICAgICAgICAgICBmaWxsPSIjRDBFMEZGIgogICAgICAgICAgPjwvcGF0aD4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik0yOC44ODE2NTA0LDcuMzIyMDMzNzggTDEuOTI1NDQzMzYsNy4zMjIwMzM3OCBDMC44ODMxNjg4NjUsNy4zMjE2MTQ0MyAwLjAyOTc3OTE4NjksOC4xMzg5MzcwNiAwLDkuMTY2MTAxNzMgTDAsMzAuMTQyMzcyOSBDMC4wMjk2MDkxNzcxLDMxLjE3MTc4NDIgMC44ODA5MTkxOCwzMS45OTMxMTAxIDEuOTI1NDQzMzYsMzIgTDI4Ljg4MTY1MDQsMzIgQzI5Ljk0NTA0MzQsMzIgMzAuODA3MDkzNywzMS4xNTAwOTk5IDMwLjgwNzA5MzcsMzAuMTAxNjk0OSBMMzAuODA3MDkzNyw5LjIyMDMzOTAyIEMzMC44MDcwOTM3LDguMTcxOTM0MDcgMjkuOTQ1MDQzNCw3LjMyMjAzMzc4IDI4Ljg4MTY1MDQsNy4zMjIwMzM3OCBaIE0yNC44MjQ0NjYyLDguODgxMzU1OTcgQzI1LjAwNjQ0MDUsOC43MDA0NzI4NSAyNS4yNTM3MTkyLDguNTk4MDc5NjIgMjUuNTEyMTI0NSw4LjU5NjYxMDIxIEMyNi4wNDM4MjEsOC41OTY2MTAyMSAyNi40NzQ4NDYyLDkuMDIxNTYwMjcgMjYuNDc0ODQ2Miw5LjU0NTc2Mjc1IEMyNi40NzQ4NDYyLDEwLjA2OTk2NTIgMjYuMDQzODIxLDEwLjQ5NDkxNTMgMjUuNTEyMTI0NSwxMC40OTQ5MTUzIEMyNC45ODA0MjgsMTAuNDk0OTE1MyAyNC41NDk0MDI4LDEwLjA2OTk2NTIgMjQuNTQ5NDAyOCw5LjU0NTc2Mjc1IEMyNC41NDkzNjYxLDkuMjk3MzM4NjMgMjQuNjQ4MTIsOS4wNTg4MDE3NyAyNC44MjQ0NjYyLDguODgxMzU1OTcgTDI0LjgyNDQ2NjIsOC44ODEzNTU5NyBaIE0yMC45ODczMzI2LDguODgxMzU1OTcgQzIxLjI5NDY5Myw4LjU5MzM2NTM0IDIxLjc1ODU0MDQsOC41NDEzNTU0MyAyMi4xMjM2NDU3LDguNzUzOTQ0MzYgQzIyLjQ4ODc1MSw4Ljk2NjUzMzMgMjIuNjY2NDk5Myw5LjM5MjEyMzUzIDIyLjU1OTA4NTgsOS43OTY1MzY3MSBDMjIuNDUxNjcyMiwxMC4yMDA5NDk5IDIyLjA4NTE2NzIsMTAuNDg2MDMwNyAyMS42NjEyMzc4LDEwLjQ5NDkxNTMgQzIxLjEyOTU0MTMsMTAuNDk0OTE1MyAyMC42OTg1MDc3LDEwLjA2OTk2NTIgMjAuNjk4NTA3Nyw5LjU0NTc2Mjc1IEMyMC42OTc0MjgsOS4yOTQ0NDEzIDIwLjgwMTk4OTEsOS4wNTM5MDQzIDIwLjk4NzMzMjYsOC44ODEzNTU5NyBMMjAuOTg3MzMyNiw4Ljg4MTM1NTk3IFogTTE3LjEzNjQ0NTksOC44ODEzNTU5NyBDMTcuNDQzODA2Myw4LjU5MzM2NTM0IDE3LjkwNzY1MzcsOC41NDEzNTU0MyAxOC4yNzI3NTksOC43NTM5NDQzNiBDMTguNjM3ODY0Myw4Ljk2NjUzMzMgMTguODE1NjEyNiw5LjM5MjEyMzUzIDE4LjcwODE5OSw5Ljc5NjUzNjcxIEMxOC42MDA3ODU1LDEwLjIwMDk0OTkgMTguMjM0MjgwNSwxMC40ODYwMzA3IDE3LjgxMDM1MTEsMTAuNDk0OTE1MyBDMTcuMjc4NjU0NiwxMC40OTQ5MTUzIDE2Ljg0NzYyMSwxMC4wNjk5NjUyIDE2Ljg0NzYyMSw5LjU0NTc2Mjc1IEMxNi44NDY1NDEzLDkuMjk0NDQxMyAxNi45NTExMDI0LDkuMDUzOTA0MyAxNy4xMzY0NDU5LDguODgxMzU1OTcgTDE3LjEzNjQ0NTksOC44ODEzNTU5NyBaIE0yOC44ODE2NTA0LDI0LjY1MDg0NzUgTDI4Ljg4MTY1MDQsMjkuNjI3MTE4NiBDMjguODgxNjUwNCwyOS44ODkyMTk5IDI4LjY2NjEzNzgsMzAuMTAxNjk0OSAyOC40MDAyODk1LDMwLjEwMTY5NDkgTDIuNDA2ODA0MiwzMC4xMDE2OTQ5IEMyLjI3OTEzOTM3LDMwLjEwMTY5NDkgMi4xNTY3MDMzNSwzMC4wNTE2OTUxIDIuMDY2NDMwNjgsMjkuOTYyNjk0NyBDMS45NzYxNTgwMiwyOS44NzM2OTQ0IDEuOTI1NDQzMDYsMjkuNzUyOTg0MSAxLjkyNTQ0MzA2LDI5LjYyNzExODYgTDEuOTI1NDQzMDYsMTIuMTM1NTkzMyBDMS45MjU0NDMwNiwxMi4wMDU5MjA4IDIuMDI3OTIzOSwxMS44OTg3MjkzIDIuMTU5MjQ3MiwxMS44OTE1MjU1IEwyOC42MzQwOTM0LDExLjg5MTUyNTUgQzI4Ljc3MDgxNTMsMTEuODkxNTI1NSAyOC44ODE2NTA0LDEyLjAwMDc5ODMgMjguODgxNjUwNCwxMi4xMzU1OTMzIEwyOC44ODE2NTA0LDI0LjY1MDg0NzUgTDI4Ljg4MTY1MDQsMjQuNjUwODQ3NSBaIgogICAgICAgICAgICBmaWxsPSIjMjc2REZGIgogICAgICAgICAgPjwvcGF0aD4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik0xNS44OTg2NjA5LDE4LjAwNjc3OTcgTDE1Ljg5ODY2MDksMTYuMzUyNTQyNCBDMTYuMDQ5OTQ1NywxNS42NDc0NTc3IDE2LjY0MTMzMTksMTYuMDgxMzU2IDE2LjY0MTMzMTksMTYuMDgxMzU2IEwyMC43NjcyODE5LDE5LjU2NjEwMTcgQzIxLjY3NDk5MSwyMC4xNzYyNzEyIDIwLjgzNjA0NzgsMjAuNjM3Mjg4MiAyMC44MzYwNDc4LDIwLjYzNzI4ODIgTDE2LjgwNjM2OTksMjQuMDk0OTE1MyBDMTUuOTk0OTMzLDI0LjY3Nzk2NjEgMTUuOTM5OTIwNCwyMy43ODMwNTA5IDE1LjkzOTkyMDQsMjMuNzgzMDUwOSBMMTUuOTM5OTIwNCwyMi4xNjk0OTE1IEMxMS44MTM5NzAzLDIwLjkwODQ3NDYgMTAuMTc3MzQzNSwyNS45NjYxMDE3IDEwLjE3NzM0MzUsMjUuOTY2MTAxNyBDMTAuMDEyMzA1NSwyNi4yMzcyODgxIDkuOTI5Nzg2NDYsMjUuOTY2MTAxNyA5LjkyOTc4NjQ2LDI1Ljk2NjEwMTcgQzguMzQ4MTcyMjgsMTguMzg2NDQwNyAxNS45Mzk5MjA0LDE4LjAwNjc3OTcgMTUuOTM5OTIwNCwxOC4wMDY3Nzk3IEwxNS44OTg2NjA5LDE4LjAwNjc3OTcgWiIKICAgICAgICAgICAgZmlsbD0iIzI3NkRGRiIKICAgICAgICAgICAgb3BhY2l0eT0iMC42IgogICAgICAgICAgPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L3N2Zz4=');
        }
        &--unknown {
          background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgIDxwYXRoCiAgICAgICAgZD0iTTEuNSAwaDE0LjA4NmExIDEgMCAwMS43MDcuMjkzbDUuNDE0IDUuNDE0YTEgMSAwIDAxLjI5My43MDdWMjYuNWExLjUgMS41IDAgMDEtMS41IDEuNWgtMTlBMS41IDEuNSAwIDAxMCAyNi41di0yNUExLjUgMS41IDAgMDExLjUgMHoiCiAgICAgICAgaWQ9Imljb25fZmlsZV91bmtub3dfbm9yX3N2Z19fYSIKICAgICAgPjwvcGF0aD4KICAgICAgPHBhdGgKICAgICAgICBkPSJNMTYuMjkzLjI5M2w1LjQxNCA1LjQxNEExIDEgMCAwMTIxLjkxIDZIMTcuNUExLjUgMS41IDAgMDExNiA0LjVWLjA5YTEgMSAwIDAxLjI5My4yMDN6IgogICAgICAgIGlkPSJpY29uX2ZpbGVfdW5rbm93X25vcl9zdmdfX2IiCiAgICAgID48L3BhdGg+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1IDIpIj4KICAgICAgICA8dXNlIGZpbGw9IiM5Q0EzQUQiIHhsaW5rSHJlZj0iI2ljb25fZmlsZV91bmtub3dfbm9yX3N2Z19fYSI+PC91c2U+CiAgICAgICAgPHVzZSBmaWxsPSIjNjQ2QTczIiB4bGlua0hyZWY9IiNpY29uX2ZpbGVfdW5rbm93X25vcl9zdmdfX2IiPjwvdXNlPgogICAgICA8L2c+CiAgICAgIDxwYXRoIGQ9Ik03LjY0OSAxMC43MDNoMTYuNjQ4VjI3LjM1SDcuNjV6Ij48L3BhdGg+CiAgICAgIDxwYXRoCiAgICAgICAgZD0iTTE2LjE2IDEyLjIxNmMxLjIzNiAwIDIuMjMuMzU2IDIuOTg3IDEuMDczLjcyLjY4MSAxLjA4MSAxLjYwMiAxLjA4MSAyLjc0OWEzLjY2IDMuNjYgMCAwMS0uNzYgMi4yNTVjLS4yMDkuMjY2LS42NzYuNzItMS41MTggMS40ODItLjQyLjM2Ny0uNjYxLjYxOC0uODQ5LjkzNy0uMjUuNDMtLjM3MS44Ny0uMzcxIDEuMzYxdi41NDlhLjE5LjE5IDAgMDEtLjE5LjE4OWgtMS4xNTRhLjE5LjE5IDAgMDEtLjE4OS0uMTl2LS41NDhjMC0uNTguMTIxLTEuMTIuMzU5LTEuNTk0LjI4OC0uNjE4LjgzNS0xLjI0NyAxLjcyLTIuMDIuNTYtLjU2LjczMy0uNzQuODU0LS44OTEuMzgtLjQ4OC41NjYtLjk3OC41NjYtMS40OTIgMC0uNzU0LS4yMjEtMS4zNTUtLjY0NS0xLjc5Ni0uNDQ0LS40NDUtMS4wODgtLjY2NC0xLjk0Ny0uNjY0LS45NjMgMC0xLjY2NC4zMTQtMi4xNDIuOTUtLjM3OC40NzQtLjU5LjktLjYzIDEuNzEzYTkuNDI1IDkuNDI1IDAgMDAtLjAwNi4yOS4xOS4xOSAwIDAxLS4xOS4xODhoLTEuMTM1YS4xOS4xOSAwIDAxLS4xODktLjE5MWMuMDAxLS4xNS4wMDMtLjI0OC4wMDUtLjI5Ni4wNTItMS4xNzcuNDExLTEuOTIzIDEuMDgtMi43MDIuNzg3LS45MDcgMS44NzUtMS4zNTIgMy4yNjMtMS4zNTJ6bS0uNzU1IDEyLjEwOGgxLjEzNmEuMTkuMTkgMCAwMS4xODkuMTl2MS4xMzVhLjE5LjE5IDAgMDEtLjE5LjE4OWgtMS4xMzVhLjE5LjE5IDAgMDEtLjE4OS0uMTl2LTEuMTM0YS4xOS4xOSAwIDAxLjE5LS4xOXoiCiAgICAgICAgZmlsbD0iI2NjYyIKICAgICAgICBmaWxsLXJ1bGU9Im5vbnplcm8iCiAgICAgID48L3BhdGg+CiAgICA8L2c+CiAgPC9zdmc+');
        }
      }

      &-thumbnail {
        width: 100%;
        height: 100%;
      }

      &-title {
        width: 95%;
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
      }

      &-info {
        position: relative;
        flex: 1;
      }

      &:before {
        position: absolute;
        z-index: 1;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        background-color: #00000080;
        transition: all 0.3s;
        content: ' ';
        opacity: 0;
        top: 6px;
        left: 6px;
      }

      &-actions {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        white-space: nowrap;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: all 0.3s;

        .anticon {
          width: 16px;
          margin: 0 4px;
          color: #ffffffd9;
          font-size: 16px;
          cursor: pointer;
          transition: all 0.3s;
        }
      }

      &:hover {
        &:before {
          opacity: 1;
        }
        .@{namespace} {
          &-file-upload {
            &-file {
              &-actions {
                opacity: 1;
              }
            }
          }
        }
      }
    }

    &-preview {
      
    }
  }
}