/*------------------- SISSA -------------------*/
/* override phantom scss */
div.it-list-wrapper .it-list .list-item .it-right-zone {
  padding: 0;
}

div.it-list-wrapper .it-list .list-item .it-right-zone svg {
  width: auto;
  height: 32px;
}

div.it-list-wrapper.phantom-attachments
  .it-list
  .list-item
  .it-right-zone
  svg.icon {
  fill: var(--accent-text);
}

div.it-list-wrapper .it-list .list-item {
  border-bottom: 1px solid rgb(0, 0, 0);
}

div.it-list-wrapper.phantom-attachments .it-list .list-item:hover {
  color: #000000;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
  border-bottom: 1px solid #000000;
}


body .it-list-wrapper.phantom-attachments > h2 {
  margin-bottom: 1rem;
}

body .it-list-wrapper.phantom-attachments .it-list .list-item .text {
  font-weight: 500;
}

@media (min-width: 992px) {
  body .it-list-wrapper.phantom-attachments .it-list .list-item .text {
    font-size: 1rem;
    font-weight: 500;
  }
}

@media (min-width: 1200px) {
  div.it-list-wrapper .it-list .list-item .it-right-zone {
    margin-left: 0px;
    margin-right: 0px;
  }
}

/* container */
.phantom-attachments {
  /* attachment item */
  a.list-item {
    border: 1px solid rgb(0, 0, 0);
    position: relative;
    display: block;

    .it-right-zone {
      align-items: stretch !important;
    }

    /* label text */
    .text {
      font-size: 14px;
      line-height: 1.4rem;
      display: flex;
      align-items: center;
      padding: 18px 10px 18px 20px;
    }

    /* icon */
    .icon-container {
      aspect-ratio: 1;
      background-color: var(--accent);
      display: flex;
      align-items: stretch;
      justify-content: center;
      transition: 0.2s ease;
      align-items: center;
      height: 100%;
      max-height: 60px;
      width: auto;
      position: relative;
      min-width: 60px;

      svg {
        margin: 0;
        width: auto;
      }
    }
  }

  /* hover effect */
  a.list-item:hover {
    .it-right-zone {
      /* beige */
      background-color: #f8f8f5;
    }
  }
}

/* hover effect icon */
div.it-list-wrapper.phantom-attachments
  .it-list
  .list-item:hover
  .it-right-zone
  svg.icon {
  fill: #ffffff;
}

body .it-list-wrapper.phantom-attachments .it-list .list-item:hover,
body .it-list-wrapper.phantom-attachments .it-list .list-item:hover .text {
  color: #000;
}