.modal-support {
  max-width: 697px;
  z-index: 50;
}

.modal-support + .modal__bg {
  z-index: 49;
}

.support {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  /* width: 100%; */
}

.support-add-file {
  background-color: transparent;
  border-color: transparent;
  display: flex;
  align-items: center;
  padding: 4px 0;
  width: 100%;
  margin-top: 8px;
  gap: 6px;
  color: var(--text-info);
}

.support__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.support__list .support__item:first-child {
  margin-top: 8px;
}

.support__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.support__item-name {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  max-width: min(70vw, 630px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support__item-name::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6641 2.5V5.83333C11.6641 6.05435 11.7519 6.26631 11.9081 6.42259C12.0644 6.57887 12.2764 6.66667 12.4974 6.66667H15.8307' stroke='%238B8C94' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.1641 17.5H5.83073C5.3887 17.5 4.96478 17.3244 4.65222 17.0118C4.33966 16.6993 4.16406 16.2754 4.16406 15.8333V4.16667C4.16406 3.72464 4.33966 3.30072 4.65222 2.98816C4.96478 2.67559 5.3887 2.5 5.83073 2.5H11.6641L15.8307 6.66667V15.8333C15.8307 16.2754 15.6551 16.6993 15.3426 17.0118C15.03 17.3244 14.6061 17.5 14.1641 17.5Z' stroke='%238B8C94' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.support__item-cross {
  display: block;
  background-color: transparent;
  border-color: transparent;
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 6L6 14M6 6L14 14" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.pickup_file_cont{
    display: flex;
    align-items: center;
    justify-content:  flex-start;
    gap: 4px;
}

.support_file_info_img{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 6H8.00667M2 8C2 8.78793 2.15519 9.56815 2.45672 10.2961C2.75825 11.0241 3.20021 11.6855 3.75736 12.2426C4.31451 12.7998 4.97595 13.2417 5.7039 13.5433C6.43185 13.8448 7.21207 14 8 14C8.78793 14 9.56815 13.8448 10.2961 13.5433C11.0241 13.2417 11.6855 12.7998 12.2426 12.2426C12.7998 11.6855 13.2417 11.0241 13.5433 10.2961C13.8448 9.56815 14 8.78793 14 8C14 6.4087 13.3679 4.88258 12.2426 3.75736C11.1174 2.63214 9.5913 2 8 2C6.4087 2 4.88258 2.63214 3.75736 3.75736C2.63214 4.88258 2 6.4087 2 8Z' stroke='%238B8C94' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M7.33325 8H7.99992V10.6667H8.66659' stroke='%238B8C94' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
    width: 16px;
    height: 16px;
    position: relative;
}

.support_file_info_popup {
    display: none;
    position: absolute;
    bottom: 25px;
    left: -90px;
    width: 220px;
    height: 66px;
    border-radius: 10px;
    padding: 6px;
    gap: 4px;
    background-color: #FFFFFF;

    font-weight: 400;
    font-size: 12px;
    line-height: 18px;

}

.support_file_info_img.active .support_file_info_popup{
    display: block !important;
}

.support_file_info_popup-grey{
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #8B8C94;
}

.support_file_info_img:hover .support_file_info_popup{
    display: block;
}

.support_file_info_popup::before{
    content: "";
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0L4 4L0 0L8 0Z' fill='white'/%3e%3c/svg%3e ");
    width: 8px;
    height: 4px;
    position: absolute;
    bottom: -4px;
    left: 94px;
}



@media (max-width: 1024px) {
  .support {
    display: grid;
    grid-template-columns: 1fr;
  }

  .support .textarea {
    max-height: 90px;
  }
  .support_file_info_img:hover .support_file_info_popup{
    display: none;
  }
}