:root {
  --widget-button-size: 48px;
}

.lsn-widget-blur {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  background: rgba(33, 51, 86, 0.5);
  webkit-backdrop-filter: blur(7px);
  transform: translate3d(0, 0, 0);
  backdrop-filter: blur(7px);
  z-index: 2147483644;
}

.lsn-widget-blur.hidden {
  display: none;
}

.lsn-widget-button {
  position: fixed;
  right: var(--right_position_mobile, 20px);
  bottom: var(--bottom_position_mobile, 20px);
  border: none;
  background: none;
  width: var(--widget-button-size);
  height: var(--widget-button-size);
  cursor: pointer;
  border-radius: 50%;
  outline: none;
  z-index: 2147483646;
  padding: 0;
  box-shadow: 0px 4px 50px 0px #57575733;
}

.lsn-widget-button > span {
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 24px;
  height: 24px;
  text-align: center;
  font-size: 11px;
  line-height: 1;
  padding: 7px 5px;
  color: #fff;
  background: #ff3738;
  border-radius: 50%;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .lsn-widget-button {
    right: var(--right_position_tablet, 20px);
    bottom: var(--bottom_position_tablet, 20px);
  }
}

@media (min-width: 1200px) {
  .lsn-widget-button {
    right: var(--right_position_desktop, 20px);
    bottom: var(--bottom_position_desktop, 20px);
  }
}

.lsn-widget-button img {
  max-width: 100%;
}

.lsn-widget-content {
  position: fixed;
  right: var(--right_position_mobile, 20px);
  bottom: calc(
    20px + var(--widget-button-size) + var(--bottom_position_mobile, 20px)
  );
  width: 324px;
  z-index: 2147483647;
  box-sizing: content-box;
  transition: 0.2s;
  user-select: none;
}

@media (min-width: 640px) {
  .lsn-widget-content {
    right: var(--right_position_tablet, 20px);
    bottom: calc(
      20px + var(--widget-button-size) + var(--bottom_position_tablet, 20px)
    );
  }
}

@media (min-width: 1200px) {
  .lsn-widget-content {
    right: var(--right_position_desktop, 20px);
    bottom: calc(
      20px + var(--widget-button-size) + var(--bottom_position_desktop, 20px)
    );
  }
}

.lsn-widget-content::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  border-radius: 5px;
}

.lsn-widget-content::-webkit-scrollbar-track {
  background: black;
}

.lsn-widget-content::-webkit-scrollbar-thumb {
  background: grey;
}

.lsn-widget-content__text {
  font-size: 0;
  max-height: 540px;
}

.lsn-widget-content__text > iframe {
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  box-shadow: 0px 4px 50px 0px #57575733;
  transition: 0.3s;
}

.lsn-widget-content__close {
  position: absolute;
  right: 20px;
  bottom: calc(100% + 3px);
  width: 26px;
  height: 26px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.36377' y='14.506' width='20' height='2' rx='1' transform='rotate(-45 0.36377 14.506)' fill='%23838A99'/%3E%3Crect x='14.5059' y='15.9203' width='20' height='2' rx='1' transform='rotate(-135 14.5059 15.9203)' fill='%23838A99'/%3E%3C/svg%3E%0A")
    center no-repeat;
  transition: 0.2s;
}

.lsn-widget-content__resize {
  position: absolute;
  left: 5;
  bottom: calc(100% + 3px);
  width: 26px;
  height: 26px;
  cursor: nwse-resize;
  background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.88955 9.94387C0.34065 9.88282 -0.0548322 9.38836 0.00621643 8.83946C0.523125 4.19184 4.19193 0.523036 8.83955 0.00612697C9.38845 -0.0549216 9.88291 0.34056 9.94396 0.88946C10.005 1.43836 9.60953 1.93282 9.06063 1.99387C5.34253 2.4074 2.40749 5.34244 1.99396 9.06054C1.93291 9.60944 1.43845 10.0049 0.88955 9.94387ZM4.85026 9.92983C4.30911 9.81947 3.95989 9.29131 4.07026 8.75017C4.55098 6.39302 6.39311 4.55089 8.75026 4.07017C9.2914 3.9598 9.81956 4.30902 9.92992 4.85017C10.0403 5.39131 9.69106 5.91947 9.14992 6.02983C7.57849 6.35031 6.3504 7.5784 6.02992 9.14983C5.91956 9.69097 5.3914 10.0402 4.85026 9.92983Z' fill='%23838A99'/%3E%3C/svg%3E%0A")
    center no-repeat;
  transition: 0.2s;
}

.lsn-widget-content__close:before {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  content: attr(text);
  font-size: 16px;
  line-height: 1;
  padding: 2px 0;
  color: #838a99;
  pointer-events: none;
  width: 0;
  overflow: hidden;
  transition: 0.4s;
  text-align: right;
  white-space: nowrap;
}

.lsn-widget-content__close:hover:before {
  width: 160px;
  padding-right: 10px;
}

.lsn-widget-content__close:hover + .lsn-widget-content__link {
  opacity: 0;
  visibility: hidden;
}

.lsn-widget-content__link {
  position: absolute;
  right: calc(26px + 8px + 20px);
  bottom: calc(100% + 3px);
  width: 26px;
  height: 26px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 11.7692L15 12.8462C15 13.4174 14.7731 13.9652 14.3692 14.3692C13.9652 14.7731 13.4174 15 12.8462 15L3.15385 15C2.58261 15 2.03477 14.7731 1.63085 14.3692C1.22692 13.9652 1 13.4174 1 12.8462L0.999999 3.15384C0.999999 2.58261 1.22692 2.03477 1.63085 1.63085C2.03477 1.22692 2.58261 0.999998 3.15385 0.999998L4.23077 0.999998' stroke='%23838A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 9L15 1' stroke='%23838A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.875 1H15V7.125' stroke='%23838A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
    center no-repeat;
  transition: 0.2s;
}

.lsn-widget-content__link:before {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  content: attr(text);
  font-size: 16px;
  line-height: 1;
  padding: 2px 0;
  color: #838a99;
  white-space: nowrap;
  overflow: hidden;
  transition: 0.4s;
  text-align: right;
  width: 0;
}

.lsn-widget-content__text + .lsn-widget-content__link {
  right: 20px;
}

.lsn-widget-content__link:hover:before {
  width: 160px;
  padding-right: 10px;
}

.lsn-widget-content:before {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 32px;
  background: #f9fafc;
  content: "";
  border-radius: 12px 12px 0 0;
}

@media (max-width: 480px), (orientation: landscape) and (max-width: 1023px) {
  html,
  body {
    margin: 0;
    min-height: 100%;
  }

  .lsn-widget-content {
    right: 0;
    bottom: 0;
    width: 100%;
  }

  .lsn-widget-content__text {
    max-height: none;
  }

  #lsn-widget {
    width: 100% !important;
    border-radius: 0;
    height: calc(calc(var(--vh) * 100) - 32px) !important;
    max-height: calc(calc(var(--vh) * 100) - 32px) !important;
  }

  .lsn-widget-content:before {
    height: 400px;
    border-radius: 0;
  }

  .lsn-widget-content__close {
    right: 15px;
  }

  .lsn-widget-content__link {
    right: calc(32px + 10px + 10px);
  }

  .lsn-widget-open {
    /* overflow: hidden; */
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}