.view-modal:hover {
    width: fit-content;
  }

  .popup {
    background: rgb(255, 254, 254);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    border-radius: 15px;
    /* top: 50%; */
    /* margin-top: 50%; */
    max-width: 480px;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    /* box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

    transform: translate(-50%, -50%) scale(1.2);
    transition: top 0s 0.2s ease-in-out,
      opacity 0.2s 0s ease-in-out,
      transform 0.2s 0s ease-in-out;
  }

  .popup.show {
    top: 50%;
    left: 50%;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition: top 0s 0s ease-in-out,
      opacity 0.2s 0s ease-in-out,
      transform 0.2s 0s ease-in-out;

  }

  .popup :is(.pop-header, .pop-icons, .field) {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  .popup .pop-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #ebedf9;
  }

  .pop-header span {
    font-size: 21px;
    font-weight: 600;
  }

  .pop-header,
  .pop-icons a {
    display: flex;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    transition: all 0.3s ease-in-out;
  }

  .close {
    margin-left: auto;
    /* color: #878787; */
    font-size: 20px;
    /* background: #f3f3f3; */
    height: 33px;
    width: 33px;
    cursor: pointer;
  }

  .close:hover {
    /* background:black; */
    color: red;
    /* border-radius:calc(50% - 10px);
    width: fit-content;
    height: fit-content; */
  }

  .popup .content {
    margin: 20px 0;
  }

  .popup .pop-icons {
    /* margin: 15px 0 20px 0; */
    /* margin-left: -50px; */
  }

  .content p {
    font-size: 16px;
  }

  .content .pop-icons a {
    height: 50px;
    width: 50px;
    font-size: 20px;
    text-decoration: none;
    border: 1px solid transparent;
    color: black;
    display: block;
  }


  .pop-icons a i {
    transition: transform 0.3s ease-in-out;
  }

  /* .pop-icons a:nth-child(1) {
    color: #1877F2;
    border-color: #b7d4fb;
  }

  .pop-icons a:nth-child(1):hover {
    background: #1877F2;
  }

  .pop-icons a:nth-child(2) {
    color: #46C1F6;
    border-color: #b6e7fc;
  }

  .pop-icons a:nth-child(2):hover {
    background: #46C1F6;
  } */

  /* .pop-icons a:nth-child(3) {
    color: #e1306c;
    border-color: #f5bccf;
  }

  .pop-icons a:nth-child(3):hover {
    background: #e1306c;
  } */

  /* .pop-icons a:nth-child(3) {
    color: #25D366;
    border-color: #bef4d2;
  }

  .pop-icons a:nth-child(3):hover {
    background: #25D366;
  }

  .pop-icons a:nth-child(4) {
    color: #0088cc;
    border-color: #b3e6ff;
  }

  .pop-icons a:nth-child(4):hover {
    background: #0088cc;
  } */

  .pop-icons a:nth-child(5) {
    color: #FF4500;
    /* Reddit color */
    border-color: #ff723e;
    /* Adjust border color as needed */
  }

  .pop-icons a:nth-child(5):hover {
    background: #FF4500;
    /* Reddit color on hover */
  }

  .pop-icons a:hover {
    color: #fff;
    border-color: transparent;
  }

  .pop-icons a:hover i {
    transform: scale(1.2);
  }

  .content .field {
    margin: 12px 0 -5px 0;
    height: 45px;
    border-radius: 4px;
    padding: 0 5px;
    border: 1px solid #757171;
  }

  .field.active {
    border-color: #7d2ae8;
  }

  .field i {
    width: 50px;
    font-size: 18px;
    text-align: center;
  }

  .field.active i {
    color: #7d2ae8;
  }

  .field input {
    width: 100%;
    height: fit-content;
    border: none;
    outline: none;
    font-size: 15px;
  }

  .field button {
    color: #fff;
    padding: 5px 18px;
    background: #7d2ae8;
    border: none;
    border-radius: 5px;
  }

  .field button:hover {
    background: #8d39fa;
    cursor: pointer;
  }

  .action-buttons {
    display: flex;
  }

  .actions {
    margin: 0 auto;
    display: flex;
    gap: 10px;

  }

  .actions button {
    padding: 5px;
    border: 1px solid blue;
    background: white;
    color: #1877F2;
    cursor: pointer;
    border-radius: 5px;
    font-size: 18px;
  }

  .actions #cancelbtn:hover {
    background: #1877F2;
    color: white;
    border: none;
  }

  .actions #deletebtn {
    /* background:whitesmoke; */
    /* color:red; */
  }

  .actions #deletebtn:hover {
    background: red;
    color: white;
    border: none;
  }



  .del-icon,
  .ed-icon {
    text-decoration: none;
    cursor: pointer;
    color: black;
    font-family: sans-serif;
  }

  .del-icon:hover {
    color: red;
  }

  .ed-icon:hover {
    color: #1877F2;
  }


/* mobile view */
  @media (max-width: 480px) {
    .popup {
      background: rgb(255, 254, 254);
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 25px;
      border-radius: 15px;
      /* top: 50%; */
      /* margin-top: 50%; */
      max-width: 380px;
      width: 80%;
      font-size: 15px !important;
      opacity: 0;
      pointer-events: none;
      /* box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); */
      box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

      transform: translate(-50%, -50%) scale(1.2);
      transition: top 0s 0.2s ease-in-out,
        opacity 0.2s 0s ease-in-out,
        transform 0.2s 0s ease-in-out;
    }

    .popup .pop-icons {
      /* margin: 15px 0 20px 0; */
      /* margin-left: -50px; */
      gap:10px
    }
  }




  .popupx {
    background: rgb(255, 254, 254);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    border-radius: 15px;
    /* top: 50%; */
    /* margin-top: 50%; */
    max-width: 380px;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    /* box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

    transform: translate(-50%, -50%) scale(1.2);
    transition: top 0s 0.2s ease-in-out,
      opacity 0.2s 0s ease-in-out,
      transform 0.2s 0s ease-in-out;
  }

  .popupx.show {
    top: 50%;
    left: 50%;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition: top 0s 0s ease-in-out,
      opacity 0.2s 0s ease-in-out,
      transform 0.2s 0s ease-in-out;


  }


  .popupx :is(.pop-header, .pop-icons, .field) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .popupx .pop-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #ebedf9;
  }


  .popupx .content {
    margin: 20px 0;
  }

  .popupx .pop-icons {
    /* margin: 15px 0 20px 0; */
    /* margin-left: -50px; */
  }