.labelstudio-project-list .card,
.repositories-list .card {
  height: 100%;
  box-shadow: 0 1px 3px 0 #efefef, 0 0 0 1px #eaeaea;
}

.labelstudio-project-list .card:hover,
.repositories-list .card:hover {
  box-shadow: 2px 3px 1px 0 #efefef, 0 0 0 1px #eaeaea;
}

.labelstudio-project-list .card > .content,
.repositories-list .card > .content {
  display: flex;
  flex-direction: column;
}

.labelstudio-project-list .card > .content > .header,
.repositories-list .card > .content > .header {
  height: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FAFAFA;
  border-bottom: 1px solid rgba(34,36,38,.15);
  margin: -1rem -1rem 0 -1rem !important;
  padding: 1rem;
  border-radius: var(--roundness) var(--roundness) 0  0;
  background-image: linear-gradient(180deg,var(--tw-gradient-stops))
}

.labelstudio-project-list .card > .content > .header.project {
  --tw-gradient-from: #f6f6f6;
  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(254,242,242,0));
  --tw-gradient-to: #f8f8f8;
}

.repositories-list .card > .content > .header.repo {
  --tw-gradient-from: #f6f6f6;
  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(254,242,242,0));
  --tw-gradient-to: #f8f8f8;
}

.labelstudio-project-list .card > .content:hover > .header.project,
.repositories-list .card > .content:hover > .header.repo {
  --tw-gradient-to: #dcdbdb;
}

.repositories-list .card > .content > .header.model {
  --tw-gradient-from: #f7e3f4;
  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(254,242,242,0));
  --tw-gradient-to: #f7e3f4;
}

.repositories-list .card > .content:hover > .header.model {
  --tw-gradient-to: #eacdf5;
}

.repositories-list .card > .content > .header.dataset {
  --tw-gradient-from: #eef2ff;
  --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(238,242,255,0));
  --tw-gradient-to: #eef2ff;
}
.repositories-list .card > .content:hover > .header.dataset {
  --tw-gradient-to: #e0e7ff;
}

.repositories-list .card > .content > .header.model > .icon {
  filter: invert(88%) sepia(0%) saturate(847%) hue-rotate(127deg) brightness(37%) contrast(80%);
  height: 30px;
  width: 30px;
  margin-right: 5px;
}

.repositories-list .card > .content > .header.dataset > .fa-hdd {
  color: #666666;
}

.repositories-list .card > .content > .header > .repo-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70%;
}

.labelstudio-project-list .card > .content > .header > .project-title {
  white-space: nowrap;
  width: 100%;
}

.labelstudio-project-list .card > .content > .header > .project-title > .name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.labelstudio-project-list .card > .content > .header > .project-title > .name > a {
  overflow: hidden;
  text-overflow: ellipsis;
}

.labelstudio-project-list .card > .content > .header > .project-title > .name i {
  cursor: pointer;
  margin-left: 1rem;
  color: rgba(0,0,0,.5);
}

.labelstudio-project-list .card > .content > .header.dataset > .repo-name,
.repositories-list .card > .content > .header.dataset > .repo-name {
  margin-left: 10px;
}

.repositories-list .card > .content > .header.model > .repo-name,
.repositories-list .card > .content > .header.dataset > .repo-name{
  width: 67%;
}

.labelstudio-project-list .card > .content > .header.model > .repo-name > a,
.repositories-list .card > .content > .header.model > .repo-name > a {
  color: #b533b1
}

.labelstudio-project-list .card > .content > .header.dataset > .repo-name > a,
.repositories-list .card > .content > .header.dataset > .repo-name > a {
  color: #5971ca;
}

.labelstudio-project-list .card > .content > .header > .labeled.button > .button,
.repositories-list .card > .content > .header > .labeled.button > .button {
  padding: 10px 7px 10px 10px;
}

.labelstudio-project-list .card > .content > .description,
.repositories-list .card > .content > .description {
  flex-grow: 2;
}

.labelstudio-project-list .card > .content > .description > p > .name:not(:last-child):after,
.repositories-list .card > .content > .description > p > .name:not(:last-child):after {
  content: " - ";
}

.labelstudio-project-list .card > .content > .description > .project-details,
.repositories-list .card > .content > .description > .repo-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
}
.repositories-list .card > .content > .description > .repo-description {
  white-space: pre-line;
}

.labelstudio-project-list .card > .content > .description > .topics,
.repositories-list .card > .content > .description > .topics {
  display: flex;
  flex-wrap: wrap;
}

.labelstudio-project-list .card > .content > .header > .project-title > .time,
.repositories-list .card > .content > .header > .repo-name > .time {
  font-size: 12px;
  font-weight: 400;
  color: #808080;
  opacity: 0.6;
}

.labelstudio-project-list .card > .content > .stats,
.repositories-list .card > .content > .stats {
  display: flex;
  justify-content: space-evenly;
  margin-top: 10px;
  font-size: 1rem;
  cursor: default;
}

.labelstudio-project-list .card > .content > .description > .disabled,
.repositories-list .card > .content > .description > .disabled {
  opacity: 0.4;
}

.labelstudio-project-list .card #repo-avatar,
.repositories-list .card #repo-avatar {
  margin-right: 5px;
}

#add-project-card .content {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-sign-color);
}

@media only screen and (min-width : 320px) and (max-width : 480px) {
  .labelstudio-project-list .card > .content > .header > .repo-name,
  .repositories-list .card > .content > .header > .repo-name {
    word-break: break-word;
    overflow: unset;
    text-overflow: unset;
    white-space: unset;
  }

  .labelstudio-project-list .card .star.icon,
  .repositories-list .card .star.icon {
    display: none !important;
  }

  .labelstudio-project-list .card .repo-topic,
  .repositories-list .card .repo-topic {
    margin: 5px 2px !important;
  }
}