.sociallists {
  display: none;
  border-radius: 50px;
  width: 300px;
  height: 450px;
  background-color: var(--popup-modal);
  z-index: 5;
  overflow-x: hidden;
  overflow-y: auto;
}
.sociallists::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.sociallists {
  scrollbar-width: none;
}



.social-overlay {
  display: none;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-color: #00000054;
  position: fixed;
  justify-content: center;
  align-items: center;
}



.socials-untap .sociallists .close-socials {
  position: fixed;
  transform: translateX(223px);
}
.socials-untap .sociallists .close-socials .close-socials-close-bounce {
  display: flex;
  margin-left: auto;
  margin-top: 10px;
  margin-right: 10px;
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
}
.socials-untap .sociallists .close-socials .close-socials-close-bounce .close-socials-close {
  display: flex;
  width: 60px;
  height: 60px;
  border: 1px solid #fff;
  border-radius: 50px;
  background-color: var(--popup-modal-close);
  cursor: pointer;
  transition-duration: .2s;
  transition-timing-function: ease-out;
  align-items: center;
  justify-content: center;
}
.socials-untap .sociallists .close-socials .close-socials-close-bounce:hover .close-socials-close:hover {
  background-color: var(--popup-modal-close-hover);
}
.socials-untap .sociallists .close-socials .close-socials-close-bounce:active .close-socials-close:active {
  background-color: var(--popup-modal-close-hover);
  transform: scale(.8);
}
.socials-untap .sociallists .close-socials .close-socials-close-bounce .close-socials-close .close {
  width: 20px;
  height: 20px;
}
.socials-untap .sociallists .close-socials .close-socials-close-bounce .close-socials-close .close img {
  width: 20px;
  height: 20px;
}





.socials-untap .sociallists .list {
  display: flex;
  margin-top: 80px;
  width: 100%;
  margin-bottom: 30px;
  min-height: 320px;
  flex-direction: row;
}



.socials-untap .sociallists .list .tap {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: flex-end;
}

.socials-untap .sociallists .list .tap.noqr {
  padding-right: 15px;
}


.socials-untap .sociallists .list .tap .main {
  width: 95%;
  min-height: 70px;
  border-radius: 20px;
  overflow: hidden;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
.socials-untap .sociallists .list .tap .main:hover {
  background-color: var(--interact-hover);
}
.socials-untap .sociallists .list .tap .main:active {
  background-color: var(--interact-active);
  transform: scale(.9);
}

.socials-untap .sociallists .list .tap .main a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 5px;
  justify-content: flex-start;
  align-items: center;
}

.socials-untap .sociallists .list .tap .main a img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-left: 5px;
}

.socials-untap .sociallists .list .tap .main a h3 {
  white-space: nowrap;
}
.socials-untap .sociallists .list .tap.withqr .main a h3 {
  max-width: 136.11px;
}


.socials-untap .sociallists .list .tap .thread {
  width: 90%;
  min-height: 50px;
  border-radius: 15px;
  overflow: hidden;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
.socials-untap .sociallists .list .tap .thread:hover {
  background-color: var(--interact-hover);
}
.socials-untap .sociallists .list .tap .thread:active {
  background-color: var(--interact-active);
  transform: scale(.95);
}

.socials-untap .sociallists .list .tap .thread a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 5px;
  justify-content: flex-start;
  align-items: center;
}

.socials-untap .sociallists .list .tap .thread a img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  margin-left: 5px;
}

.socials-untap .sociallists .list .tap .thread a h3 {
  white-space: nowrap;
}



.socials-untap .sociallists .list .qrimg {
  display: flex;
  width: 35%;
  max-width: 77.775px;
  height: auto;
  padding-right: 10px;
  flex-direction: column;
  align-items: flex-end;
}


.socials-untap .sociallists .list .qrimg .main {
  width: 100%;
  height: 70px;
  border-radius: 20px;
  overflow: hidden;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
.socials-untap .sociallists .list .qrimg .main:hover {
  background-color: var(--interact-hover);
}
.socials-untap .sociallists .list .qrimg .main:active {
  background-color: var(--interact-active);
  transform: scale(.8);
}

.socials-untap .sociallists .list .qrimg .main a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 5px;
  justify-content: center;
  align-items: center;
}

.socials-untap .sociallists .list .qrimg .main a img {
  width: 40px;
  height: 40px;
}


.socials-untap .sociallists .list .qrimg .thread {
  width: 73%;
  height: 50px;
  border-radius: 15px;
  overflow: hidden;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
.socials-untap .sociallists .list .qrimg .thread:hover {
  background-color: var(--interact-hover);
}
.socials-untap .sociallists .list .qrimg .thread:active {
  background-color: var(--interact-active);
  transform: scale(.9);
}

.socials-untap .sociallists .list .qrimg .thread a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 5px;
  justify-content: center;
  align-items: center;
}

.socials-untap .sociallists .list .qrimg .thread a img {
  width: 30px;
  height: 30px;
}