:root {
  --main-dark: #252626;
  --gray-25: #3e4041;
  --gray-40: #707273;
  --gray-55: #898b8c;
  --gray-84: #d1d4d6;
  --gray-88: #dcdee0;
  --gray-90: #e4e6e7;
  --gray-94: #ebedf0;
  --gray-95: #edf0f2;
  --beige-4: #eeeddd;
  --red: #fa385c;
  --blue-1: #003569;
  --blue-2: #4099ed;
  --white: #ffffff;

  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

  --font-family: 'Source Sans Pro';
}

body {
  background-color: var(--white);
}

/* Предотвращение скролла контента под модальным окном */
.modal-open {
  height: 100vh;
  overflow: hidden;
}

/* Скрыть элемент */
.hidden {
  display: none !important;
}

/* Визуально скрыть элемент */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}

.share-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: auto;
  background-color: transparent;
}

.share-popup__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.share-popup__wrapper {
  z-index: 5;
  width: 412px;
  height: 616px;
  box-shadow: var(--box-shadow);
}

.share-popup__wrapper.no-buttons {
  height: 346px;
}

.share-popup__wrapper.no-buttons .share-popup__subtitle {
  margin-top: 53px;
}

.share-popup__wrapper.no-buttons .share-popup-main__label.link {
  margin-top: 34px;
}

.share-popup-main {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  border-radius: 20px;
}

.share-popup-main__actions {
  margin-top: auto;
  margin-bottom: auto;
}

.share-popup-main__label {
  display: block;
  margin-right: 40px;
  margin-left: 40px;
  font-weight: 600;
  font-size: 18px;
  line-height: 38px;
  font-family: var(--font-family);
  text-align: center;
  color: var(--main-dark);
  border-radius: 20px;
  border: 1px solid #D0D2D6;
}

.share-popup-main__label.link {
  background-color: transparent;
  margin-top: 72px;
  padding-left: 32px;
  color: #3E99ED;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' fill='none'%3E%3Cpath stroke='%233E99ED' stroke-linecap='round' stroke-width='1.5' d='M11.39 13.086c1.261 1.26 3.368 1.197 4.707-.142l3.333-3.332c1.339-1.34 1.402-3.446.141-4.707-1.26-1.26-3.367-1.197-4.706.142l-2.232 2.231'/%3E%3Cpath stroke='%233E99ED' stroke-linecap='round' stroke-width='1.5' d='M13.562 10.914c-1.26-1.26-3.367-1.197-4.706.142l-3.333 3.333c-1.338 1.338-1.402 3.445-.141 4.706 1.26 1.26 3.367 1.197 4.706-.142l2.232-2.231'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  align-self: center;
  border: none;
}

.share-popup-main__label.link.copied {
  color: #00B749;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%2300B749' fill-rule='evenodd' d='m11.312 13.312 4.872-4.873a1.5 1.5 0 1 1 2.122 2.122l-5.91 5.91c-.051.05-.105.097-.16.14a1.5 1.5 0 0 1-1.988-.12L6.94 13.18a1.5 1.5 0 1 1 2.122-2.12l2.251 2.25Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.share-popup-main__label.friend {
  margin-top: 9px;
}

.share-popup-main__label.group {
  margin-top: 16px;
}

.share-popup-main__actions input:checked + .share-popup-main__label {
  font-weight: 600;
  background-color: var(--gray-95);
}

.share-popup__option-link:visited {
  color: var(--main-dark);
}

.share-popup-main__content {
  width: 320px;
  margin: 0 auto;
}

.share-popup-main__title {
  margin-bottom: 34px;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: var(--main-dark);
}

.share-popup-main__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 9px 40px;
}

.share-popup-main__social.not-alone {
  margin-right: 60px;
  margin-left: 60px;
}

.share-popup-main__social a {
  display: flex;
  width: 48px;
  height: 48px;
}

.share-popup-main__social-vk {
  background: url("/img/skins/ll2019/SVGsprite17.svg") 0 -286px no-repeat;
}

.share-popup-main__social-tg {
  background: url("/img/skins/ll2019/SVGsprite17.svg") 0 -512px no-repeat;
}

.share-popup-main__social-wa {
  background: url("/img/skins/ll2019/SVGsprite17.svg") -50px -512px no-repeat;
}

.share-popup-main__social-ok {
  background: url("/img/skins/ll2019/SVGsprite17.svg") -100px -286px no-repeat;
}

.share-popup-main__social-mr {
  background: url("/img/skins/ll2019/SVGsprite17.svg") -200px -286px no-repeat;
}

.share-popup-main__social-ll-tooltip {
  position: absolute;
  right: 50%;
  bottom: 120%;
  z-index: 10;
  width: 81px;
  margin-left: -75px;
  padding: 5px;
  font-size: 12px;
  line-height: 15px;
  font-family: var(--font-family);
  text-align: center;
  color: var(--white);
  background-color: var(--gray-25);
  border-radius: 6px;
  transform: translateX(50%);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.15s, opacity 0.15s linear;
}

.share-popup-main__social-ll:hover .share-popup-main__social-ll-tooltip {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s;
}

.share-popup-main__social-ll-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.share-popup-main__social-ll-url {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}

.share-popup-main__submit {
  display: block;
  width: calc(100% - 40px * 2);
  margin-right: 40px;
  margin-left: 40px;
  padding: 13px 20px 15px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  font-family: var(--font-family);
  color: var(--white);
  background-color: var(--blue-2);
  border: 1px solid var(--blue-2);
  border-radius: 24px;
  visibility: hidden;
  cursor: pointer;
}

.share-popup-main__submit:hover {
  background-color: #388fe0;
}

.share-popup-group,
.share-popup-friend {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--white);
  border-radius: 20px;
}

.share-popup__textarea {
  box-sizing: border-box;
  width: calc(100% - 40px * 2);
  margin-right: 40px;
  margin-left: 40px;
  padding: 7px 15px 8px;
  font-size: 16px;
  line-height: 20px;
  font-family: var(--font-family);
  color: var(--main-dark);
  border: 1px solid #D0D2D6;
  border-radius: 8px;
  resize: none;
}

.share-popup__textarea::placeholder {
  color: #88898C;
}

.share-popup-group .share-popup__textarea {
  height: 72px;
  margin-bottom: 24px;
  margin-top: 23px;
}

.share-popup .close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  font-size: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.94 12l6.248-6.247-.94-.94L12 11.06 5.753 4.812l-.94.94L11.06 12l-6.248 6.247.941.94L12 12.94l6.247 6.248.941-.94L12.941 12z' fill='%23252626'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
}

.share-popup .back-button {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #6F7073;
  margin-left: 32px;
  margin-top: 15px;
  background-color: transparent;
  border: none;
  font-family: "Source Sans Pro", sans-serif;
  padding-left: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%236F7073' fill-rule='evenodd' d='M9.886 11.929 16.014 5.8l-.943-.942L8 11.928 15.071 19l.943-.943-6.128-6.128Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  cursor: pointer;
}

.share-popup .back-button:hover,
.share-popup .back-button:focus {
  color: #3B91E0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%233B91E0' fill-rule='evenodd' d='M9.886 11.929 16.014 5.8l-.943-.942L8 11.928 15.071 19l.943-.943-6.128-6.128Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.share-popup .back-button:active {
  color: #217DD1;
}

.share-popup__title {
  margin-right: 80px;
  margin-left: 40px;
  font-weight: 600;
  font-size: 26px;
  line-height: 32px;
  color: var(--main-dark);
  margin-bottom: 0;
}

.share-popup-main .share-popup__title {
  margin-right: auto;
  margin-left: auto;
  margin-top: 41px;
}

.share-popup-group .share-popup__title {
  margin-top: 8px;
}

.share-popup-friend .share-popup__title {
  margin-top: 8px;
}

.share-popup__subtitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  margin-top: 91px;
  color: var(--main-dark);
}

.share-popup__search {
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
  font-family: "Source Sans Pro", sans-serif;
}

.share-popup-friend .share-popup__search {
  margin-top: 23px;
}

.share-popup__search-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  padding-left: 47px !important;
  padding-right: 16px !important;
  font-size: 16px;
  line-height: 38px !important;
  color: var(--main-dark) !important;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.584 15.29a7 7 0 11.707-.707l5.615 5.616a.5.5 0 01-.707.707l-5.615-5.615zM17 10a6 6 0 11-12 0 6 6 0 0112 0z' fill='%23252626'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 15px center !important;
  border: 1px solid #D0D2D6 !important;
  border-radius: 19px !important;
  font-family: "Source Sans Pro", sans-serif;
}

.share-popup__search-input:hover {
  border: 2px solid #B2D6F8 !important;
  line-height: 36px !important;
  padding-left: 46px !important;
  padding-right: 15px !important;
  background-position: left 14px center !important;
}

.share-popup__search-input:focus {
  border: 2px solid #3E99ED !important;
  line-height: 36px !important;
  padding-left: 46px !important;
  padding-right: 15px !important;
  background-position: left 14px center !important;
}

.share-popup__search-input::placeholder {
  color: #88898C;
}

.share-popup__body {
  box-sizing: border-box;
  height: calc(616px - 34px - 88px - 62px - 40px - 120px);
  padding-top: 12px;
  overflow: auto;
}

.share-popup__body_group {
  height: calc(616px - 34px - 32px - 30px - 64px - 24px - 60px - 120px);
}

.share-popup__body_friend {
  height: 340px;
}

.share-popup__body_friend-selected {
  height: calc(616px - 34px - 32px - 30px - 60px - 120px);
}

.share-popup-group__list {
  margin-left: 40px;
  width: calc(48px + 12px + 172px + 8px + 92px);
}

.share-popup-group__item:not(:first-child) {
  margin-top: 16px;
}

.share-popup__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  margin-right: 12px;
  overflow: hidden;
  border-radius: 50%;
}

.share-popup__avatar img {
  display: block;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.share-popup-group__item-title,
.share-popup-friend__item-title {
  flex: auto;
  margin-top: auto;
  margin-bottom: auto;
  overflow: hidden;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--main-dark);
  text-overflow: ellipsis;
}

.share-popup-group__item-button {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 12px;
  margin-left: auto;
  font-size: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.007 15.936l7.071-7.071-.942-.943-6.129 6.128L5.88 7.922l-.943.943 7.071 7.07z' fill='%23252626'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
}

.share-popup-group__button,
.share-popup-friend__button {
  flex: none;
  box-sizing: border-box;
  margin-left: 10px;
  width: 92px;
  height: 28px;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background-color: #3E99ED;
  border: 1px solid #3E99ED;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-popup-group__button:hover,
.share-popup-friend__button:hover {
  background-color: #388fe0;
}

.share-popup-group__item input:checked + .share-popup-group__button,
.share-popup-friend__item input:checked + .share-popup-friend__button {
  color: #3E3F40;
  background-color: #fff;
  border-color: #D0D2D6;
}

.share-popup-group__submenu-item input:checked + .share-popup-group__button:hover,
.share-popup-friend__item input:checked + .share-popup-friend__button:hover {
  background-color: rgba(150, 151, 152, 0.07);
}

.share-popup__footer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding-top: 24px;
  background-color: var(--white);
  visibility: hidden;
}

.share-popup__footer.active {
  visibility: visible;
}

.share-popup-friend .share-popup__footer {
  padding-top: 32px;
}

.share-popup__submit {
  width: calc(100% - 40px * 2);
  height: 40px;
  margin-right: 40px;
  margin-left: 40px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  font-family: var(--font-family);
  color: var(--white);
  background-color: var(--blue-2);
  border: 1px solid var(--blue-2);
  border-radius: 24px;
  cursor: pointer;
}

.share-popup__submit:hover {
  background-color: #388fe0;
}

.share-popup-friend__list {
  margin-left: 40px;
  width: calc(48px + 12px + 172px + 8px + 92px);
}

.share-popup-group__item,
.share-popup-friend__item {
  display: flex;
  align-items: center;
}

.share-popup-friend__item:not(:first-child) {
  margin-top: 16px;
}

.share-popup-friend__item:last-child {
  margin-bottom: 24px;
}


/* added */
.share-popup-main__social-ll {
  background: url("/img/skins/ll2019/SVGsprite17.svg") -350px -286px no-repeat;
  position: relative;
}

.share-popup-main__label.link {
  cursor:pointer;
}

.share-popup .back-button {
  text-align:left;
}
