:root {
  --jas-link-color: #1e293b;

  /* Brands color */
  --facebook: #3B5997;
  --facebook-rgb: 59,89,151;
  --whatsapp: #2AB318;
  --whatsapp-rgb: 42,179,24;
  --twitter: #00ACEE;
  --twitter-rgb: 0, 172, 238;
  --linkedin: #007BB6;
  --linkedin-rgb: 0, 123, 182;
  --reddit: #FF4400;
  --reddit-rgb: 255, 68, 0;
  --tumblr: #001833;
  --tumblr-rgb: 0, 24, 51;
  --intagram: #25A3E1;
  --intagram-rgb: 182, 14, 173;
  --messenger: #4287F7;
  --messenger-rgb: 66, 135, 247;
  --line: #132518;
  --line-rgb: 19, 37, 24;
  --email: #475569;
  --email-rgb: 59, 130, 246;
  --telegram: #46A7E7;
  --telegram-rgb: 70, 167, 231;
  --livejournal: #00b0ea;
  --livejournal-rgb: 0, 176, 234;
  --flipboard: #e12828;
  --flipboard-rgb: 225, 40, 40;
  --instapaper: #000000;
  --instapaper-rgb: 0, 0, 0;
  --getpocket: #ef4056;
  --getpocket-rgb: 239, 64, 86;
  --hackernew: #ff4000;
  --hackernew-rgb: 255, 60, 0;
  --kooapp: #FACD00;
  --kooapp-rgb: 250, 205, 0;
  --skype: #00aff0;
  --skype-rgb: 0, 175, 240;
  --yahoo: #720e9e;
  --yahoo-rgb: 114, 14, 158;

  /* Button size */
  --btn-share-small:  30px;
  --btn-share-medium: 36px;
  --btn-share-large:  48px;
  --btn-share-extra:  60px;
}

.total-share {
  font-size: 12px;
  text-transform: uppercase;
}

.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-text {
  display: flex;
  align-items: center;
  height: var(--btn-share-medium);
}

.button-facebook { background: var(--facebook); color: #fff; }
.button-facebook .service-text { background: var(--facebook); }
[class*=" style-outline-"] .button-facebook { color: var(--facebook); }
[class*=" style-outline-"] .button-facebook:hover,
[class*=" style-outline-"] .button-facebook:focus { background: var(--facebook); }
[class*=" style-outline-"] .button-facebook svg { fill: var(--facebook); }

.button-whatsapp { background: var(--whatsapp); color: #fff; }
.button-whatsapp .service-text { background: var(--whatsapp); }
[class*=" style-outline-"] .button-whatsapp { color: var(--whatsapp); }
[class*=" style-outline-"] .button-whatsapp:hover,
[class*=" style-outline-"] .button-whatsapp:focus { background: var(--whatsapp); }
[class*=" style-outline-"] .button-whatsapp svg { fill: var(--whatsapp); }

.button-twitter { background: var(--twitter); color: #fff; }
.button-twitter .service-text { background: var(--twitter); }
[class*=" style-outline-"] .button-twitter { color: var(--twitter); }
[class*=" style-outline-"] .button-twitter:hover,
[class*=" style-outline-"] .button-twitter:focus { background: var(--twitter); }
[class*=" style-outline-"] .button-twitter svg { fill: var(--twitter); }

.button-linkedin { background: var(--linkedin); color: #fff; }
.button-linkedin .service-text { background: var(--linkedin); }
[class*=" style-outline-"] .button-linkedin { color: var(--linkedin); }
[class*=" style-outline-"] .button-linkedin:hover,
[class*=" style-outline-"] .button-linkedin:focus { background: var(--linkedin); }
[class*=" style-outline-"] .button-linkedin svg { fill: var(--linkedin); }

.button-reddit { background: var(--reddit); color: #fff; }
.button-reddit .service-text { background: var(--reddit); }
[class*=" style-outline-"] .button-reddit { color: var(--reddit); }
[class*=" style-outline-"] .button-reddit:hover,
[class*=" style-outline-"] .button-reddit:focus { background: var(--reddit); }
[class*=" style-outline-"] .button-reddit svg { fill: var(--reddit); }

.button-tumblr { background: var(--tumblr); color: #fff; }
.button-tumblr .service-text { background: var(--tumblr); }
[class*=" style-outline-"] .button-tumblr { color: var(--tumblr); }
[class*=" style-outline-"] .button-tumblr:hover,
[class*=" style-outline-"] .button-tumblr:focus { background: var(--tumblr); }
[class*=" style-outline-"] .button-tumblr svg { fill: var(--tumblr); }

.button-intagram { background: var(--intagram); color: #fff; }
.button-intagram .service-text { background: var(--intagram); }
[class*=" style-outline-"] .button-intagram { color: var(--intagram); }
[class*=" style-outline-"] .button-intagram:hover,
[class*=" style-outline-"] .button-intagram:focus { background: var(--intagram); }
[class*=" style-outline-"] .button-intagram svg { fill: var(--intagram); }

.button-messenger { background: var(--messenger); color: #fff; }
.button-messenger .service-text { background: var(--messenger); }
[class*=" style-outline-"] .button-messenger { color: var(--messenger); }
[class*=" style-outline-"] .button-messenger:hover,
[class*=" style-outline-"] .button-messenger:focus { background: var(--messenger); }
[class*=" style-outline-"] .button-messenger svg { fill: var(--messenger); }

.button-line { background: var(--line); color: #fff; }
.button-line .service-text { background: var(--line); }
[class*=" style-outline-"] .button-line { color: var(--line); }
[class*=" style-outline-"] .button-line:hover,
[class*=" style-outline-"] .button-line:focus { background: var(--line); }
[class*=" style-outline-"] .button-line svg { fill: var(--line); }

.button-telegram { background: var(--telegram); color: #fff; }
.button-telegram .service-text { background: var(--telegram); }
[class*=" style-outline-"] .button-telegram { color: var(--telegram); }
[class*=" style-outline-"] .button-telegram:hover,
[class*=" style-outline-"] .button-telegram:focus { background: var(--telegram); }
[class*=" style-outline-"] .button-telegram svg { fill: var(--telegram); }

.button-email { background: var(--email); color: #fff; }
.button-email .service-text { background: var(--email); }
[class*=" style-outline-"] .button-email { color: var(--email); }
[class*=" style-outline-"] .button-email:hover,
[class*=" style-outline-"] .button-email:focus { background: var(--email); }
[class*=" style-outline-"] .button-email svg { fill: var(--email); }

.button-livejournal { background: var(--livejournal); color: #fff; }
.button-livejournal .service-text { background: var(--livejournal); }
[class*=" style-outline-"] .button-livejournal { color: var(--livejournal); }
[class*=" style-outline-"] .button-livejournal:hover,
[class*=" style-outline-"] .button-livejournal:focus { background: var(--livejournal); }
[class*=" style-outline-"] .button-livejournal svg { fill: var(--livejournal); }

.button-flipboard { background: var(--flipboard); color: #fff; }
.button-flipboard .service-text { background: var(--flipboard); }
[class*=" style-outline-"] .button-flipboard { color: var(--flipboard); }
[class*=" style-outline-"] .button-flipboard:hover,
[class*=" style-outline-"] .button-flipboard:focus { background: var(--flipboard); }
[class*=" style-outline-"] .button-flipboard svg { fill: var(--flipboard); }

.button-instapaper { background: var(--instapaper); color: #fff; }
.button-instapaper .service-text { background: var(--instapaper); }
[class*=" style-outline-"] .button-instapaper { color: var(--instapaper); }
[class*=" style-outline-"] .button-instapaper:hover,
[class*=" style-outline-"] .button-instapaper:focus { background: var(--instapaper); }
[class*=" style-outline-"] .button-instapaper svg { fill: var(--instapaper); }

.button-getpocket { background: var(--getpocket); color: #fff; }
.button-getpocket .service-text { background: var(--getpocket); }
[class*=" style-outline-"] .button-getpocket { color: var(--getpocket); }
[class*=" style-outline-"] .button-getpocket:hover,
[class*=" style-outline-"] .button-getpocket:hover { background: var(--getpocket); }
[class*=" style-outline-"] .button-getpocket svg { fill: var(--getpocket); }

.button-hackernew { background: var(--hackernew); color: #fff; }
.button-hackernew .service-text { background: var(--hackernew); }
[class*=" style-outline-"] .button-hackernew { color: var(--hackernew); }
[class*=" style-outline-"] .button-hackernew:hover,
[class*=" style-outline-"] .button-hackernew:hover { background: var(--hackernew); }
[class*=" style-outline-"] .button-hackernew svg { fill: var(--hackernew); }

.button-kooapp { background: var(--kooapp); color: #fff; }
.button-kooapp .service-text { background: var(--kooapp); }
[class*=" style-outline-"] .button-kooapp { color: var(--kooapp); }
[class*=" style-outline-"] .button-kooapp:hover,
[class*=" style-outline-"] .button-kooapp:hover { background: var(--kooapp); }
[class*=" style-outline-"] .button-kooapp svg { fill: var(--kooapp); }

.button-yahoo { background: var(--yahoo); color: #fff; }
.button-yahoo .service-text { background: var(--yahoo); }
[class*=" style-outline-"] .button-yahoo { color: var(--yahoo); }
[class*=" style-outline-"] .button-yahoo:hover,
[class*=" style-outline-"] .button-yahoo:hover { background: var(--yahoo); }
[class*=" style-outline-"] .button-yahoo svg { fill: var(--yahoo); }

[class*=" style-outline-"] a .service-text {  background: transparent; }

.sticky .size-small svg   { width: var(--btn-share-small); }
.sticky .size-medium svg  { width: var(--btn-share-medium); }
.sticky .size-large svg   { width: var(--btn-share-large); }
.sticky .size-extra svg   { width: var(--btn-share-extra); }

.ja-social-share-inner {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 16px;
}

.ja-button-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
}

.ja-button-list a {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  height: var(--btn-share-medium);
  min-width: var(--btn-share-medium);
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}

[class*=" style-outline-"] a {
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.1);
}

.ja-button-list a:hover,
.ja-button-list a:focus,
.ja-button-list a:active {
  color: #fff;
}

.ja-button-list svg {
  fill: #fff;
}

.ja-button-list a:hover svg,
.ja-button-list a:focus svg,
.ja-button-list a:active svg {
  fill: #fff;
}

.show-text a {
  font-size: 14px;
  padding-left: 12px;
  padding-right: 12px;
}

.show-text.size-small a {
  padding-left: 8px;
  padding-right: 8px;
  font-size: 12px;
}

.show-text.size-large a {
  padding-left: 16px;
  padding-right: 16px;
  font-size: 16px;
}

.show-text.size-extra a {
  padding-left: 16px;
  padding-right: 16px;
  font-size: 18px;
}

/* Button size */
.ja-button-list.size-small a {
  height: var(--btn-share-small);
  min-width: var(--btn-share-small);
  font-size: 14px;
}

.ja-button-list.size-small a svg {
  height: 14px;
}

.ja-button-list.size-small .service-text {
  height: var(--btn-share-small);
}

.ja-button-list.size-large a {
  height: var(--btn-share-large);
  min-width: var(--btn-share-large);
}

.ja-button-list.size-large a svg {
  height: 24px;
}

.ja-button-list.size-large .service-text {
  height: var(--btn-share-large);
}

.ja-button-list.size-extra a {
  height: var(--btn-share-extra);
  min-width: var(--btn-share-extra);
}

.ja-button-list.size-extra a svg {
  height: 30px;
}

.ja-button-list.size-extra .service-text {
  height: var(--btn-share-extra);
}

/* Button style */
.ja-button-list .style-outline-square a,
.ja-button-list .style-outline-rounded a,
.ja-button-list .style-outline-circle a {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
}

.ja-button-list.style-rounded a,
.ja-button-list.style-outline-rounded a {
  border-radius: 6px;
}

.ja-button-list.style-rounded.size-small a {
  border-radius: 4px;
}

.ja-button-list.style-circle a,
.ja-button-list.style-outline-circle a {
  border-radius: 50%;
}

.ja-button-list.show-text.style-circle a,
.ja-button-list.show-text.style-outline-circle a {
  border-radius: 6px;
}


/* STICKY
-------------------------------------- */
/* Sticky left */
.sticky {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.sticky.sticky-left {
  left: 0;
}

.sticky .ja-social-share-inner {
  gap: 0;
  width: var(--btn-share-medium);
}

.sticky .ja-social-share-inner.size-large {
  width: var(--btn-share-large);
}

.sticky .ja-social-share-inner.size-extra {
  width: var(--btn-share-extra);
}

.sticky .ja-social-share-inner .total-share {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 36px;
}

.sticky .ja-social-share-inner .total-share span {
  background: #fff;
}

.sticky .ja-social-share-inner .total-share.size-small {
  width: var(--btn-share-small);
}

.sticky .ja-social-share-inner .total-share.size-large {
  width: var(--btn-share-large);
}

.sticky .ja-social-share-inner .total-share.size-large span {
  display: flex;
  align-items: center;
  height: 48px;
  padding-left: 12px;
  padding-right: 12px;
}

.sticky .ja-social-share-inner .total-share.size-extra {
  width: var(--btn-share-extra);
}

.sticky .ja-social-share-inner .total-share span {
  display: block;
  white-space: nowrap;
  transform: rotate(-90deg);
  padding-left: 8px;
}

.sticky .ja-button-list {
  flex-direction: column;
  gap: 0;
}

.sticky .ja-button-share a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 36px;
}

.sticky .ja-button-share a:hover,
.sticky .ja-button-share a:focus,
.sticky .ja-button-share a:active {
  overflow: visible;
}

.sticky .service-icon {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0;
}

.sticky .service-text {
  position: absolute;
  left: 100%;
  top: 0;
  opacity: 0;
  padding-right: 8px;
  padding-left: 8px;
  transition: all 0.25s ease-in-out;
}

.sticky .size-small .service-text {
  padding-right: 6px;
  padding-left: 6px;
}

.sticky .size-large .service-text {
  padding-right: 12px;
  padding-left: 12px;
}

.sticky .size-extra .service-text {
  padding-right: 16px;
  padding-left: 16px;
}

.sticky .ja-button-share a:hover .service-text,
.sticky .ja-button-share a:focus .service-text,
.sticky .ja-button-share a:active .service-text {
  opacity: 1;
}

.sticky.sticky-right {
  right: 0;
}

.sticky-right .service-text {
  right: 100%;
  left: auto;
}