.files {
  height: calc(100vh - var(--header-height) - 38px) !important;
  .card {
    --bs-card-border-radius: 1.6rem;
    --bs-border-color-translucent: #dee2e6;
    height: 100%;
    overflow: hidden;
    &-body {
      // height: calc(100% - 55px);
      height: calc(100% - 102px);
      overflow: auto;
    }
  }
  &__grid {
    display: flex;
    .flex-grow-1 {
      width: 100%;
    }
    .alert {
      position: fixed;
      bottom: 10px;
      left: 10px;
    }
  }
  &__header {
    border-bottom: 1px solid #e6e6e6;
    padding: 15px 15px 12px;
  }
  .sidebar {
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    background-color: #dee2e6;
    height: 100%;
    width: 290px;
    max-width: 100%;
    flex-shrink: 0;
    &__link {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      padding: 10px 15px;
      margin-bottom: 4px;
      border-radius: 10em;
      svg {
        margin-bottom: 3px;
      }
      &.active {
        color: #fff;
        background-color: var(--bs-primary);
        svg {
          fill: currentColor;
        }
      }
      &:hover {
        background-color: #ffffff;
        color: inherit;
        svg {
          fill: currentColor;
        }
      }
    }
  }
  .favoritesBtn {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    right: 4px;
    background-image: url('data:image/svg+xml,<svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style=" fill: transparent; stroke: %23999999;"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center;
    cursor: pointer;
    &:hover {
      background-image: url('data:image/svg+xml,<svg width="20" height="20" fill="%23c8262d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>');
    }
  }
  .favorite {
    .favoritesBtn {
      background-image: url('data:image/svg+xml,<svg width="20" height="20" fill="%23c8262d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>');
    }
  }
  form h4 {
    margin-top: -4px;
  }
  form {
    button {
      width: 200px;
      max-width: 100%;
    }
  }
  .downloadBtn {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: auto;
    right: 32px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center;
    cursor: pointer;
    svg {
      width: 100%;
      fill: #999999;
    }
    &:hover svg {
      fill: var(--bs-primary);
    }
  }
  .checkboxBtn {
    position: absolute;
    top: 5px;
    left: 10px;
  }
}

.applications {
  .btn {
    font-size: 14px;
    color: #333;
  }
  &__imgBox {
    background-color: #f8f8f8;
    transition: all 0.2s;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 5px;
      left: -5px;
      z-index: 1;
      width: calc(100% + 5px);
      height: 100%;
      background-color: var(--bs-primary);
      mix-blend-mode: multiply;
      clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
      transition: all 0.3s ease-in-out;
    }
    img {
      width: 100%;
      transition: all 0.2s;
    }
  }
  &__box {
    position: relative;
    margin-bottom: 8px;
    h3 {
      font-size: 16px;
      color: #333;
      margin: 0;
      padding: 10px 0;
      span {
        display: block;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    &:hover {
      .applications__imgBox {
        background-color: #ebebeb;
        &::before {
          clip-path: polygon(0 72%, 100% 90%, 100% 100%, 0% 100%);
        }
      }
      img {
        filter: brightness(0.8);
      }
    }
    &.lock {
      h3,
      img,
      .btn {
        opacity: 0.6;
      }
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/icons/lock.svg);
        background-position: top 42% center;
        background-repeat: no-repeat;
        background-size: 25px;
        pointer-events: none;
      }
    }
  }
}

.viewToggleBtn {
  .gridView {
    display: none;
  }
  &.list {
    .listView {
      display: none;
    }
    .gridView {
      display: inline-block;
    }
  }
}

.files {
  .filesGrid.list {
    .top_check_header {
      padding-left: 15px !important;
    }
    .applications__imgBox {
      width: 50px;
      margin-right: 15px;
    }
    .applications__box h3 span {
      max-width: none;
    }
    .applications__box.lock::after {
      left: 16px;
      background-position: left top 16px;
      background-size: 18px;
    }
    .applications__list {
      .col-6 {
        width: 100% !important;
        &:not(:last-child) {
          .applications__box {
            padding-bottom: 8px;
            border-bottom: 1px solid rgb(240, 240, 240);
          }
        }
        a {
          display: flex;
          align-items: center;
        }
        .applications__box {
          padding-left: 28px;
        }
        .checkboxBtn {
          top: 12px;
          left: 0;
        }
      }
    }
  }
}
