/**
 * ------------------------------------------------------------------------
 * Plugin Okta Content Share
 * ------------------------------------------------------------------------
 * Copyright (C) 2024 OktaMedia.com. All rights reserved.
 * @license - GNU/GPL, http://www.gnu.org/licenses/gpl.html
 * Author: OktaMedia.com
 * Websites: http://www.oktamedia.com
 * ------------------------------------------------------------------------
 */

:root {
  --okta-link-color: #1e293b;
  --okta-white-color: #ffffff;

  /* Brands color */
  --okta-facebook: #3b5997;
  --okta-facebook-rgb: 59, 89, 151;
  --okta-whatsapp: #2ab318;
  --okta-whatsapp-rgb: 42, 179, 24;
  --okta-twitter: #00acee;
  --okta-twitter-rgb: 0, 172, 238;
  --okta-pinterest: #e4223e;
  --okta-pinterest-rgb: 255, 68, 0;
  --okta-linkedin: #007bb6;
  --okta-inkedin-rgb: 0, 123, 182;
  --okta-reddit: #ff4400;
  --okta-reddit-rgb: 255, 68, 0;
  --okta-tumblr: #001833;
  --okta-tumblr-rgb: 0, 24, 51;
  --okta-instagram: #c13584;
  --okta-instagram-rgb: 182, 14, 173;
  --okta-messenger: #4287f7;
  --okta-messenger-rgb: 66, 135, 247;
  --okta-line: #132518;
  --okta-line-rgb: 19, 37, 24;
  --okta-email: #475569;
  --okta-email-rgb: 59, 130, 246;
  --okta-telegram: #46a7e7;
  --okta-telegram-rgb: 70, 167, 231;
  --okta-livejournal: #00b0ea;
  --okta-livejournal-rgb: 0, 176, 234;
  --okta-flipboard: #e12828;
  --okta-flipboard-rgb: 225, 40, 40;
  --okta-instapaper: #000000;
  --okta-instapaper-rgb: 0, 0, 0;
  --okta-getpocket: #ef4056;
  --okta-getpocket-rgb: 239, 64, 86;
  --okta-hackernew: #ff4000;
  --okta-hackernew-rgb: 255, 60, 0;
  --okta-kooapp: #facd00;
  --okta-kooapp-rgb: 250, 205, 0;
  --okta-skype: #00aff0;
  --okta-skype-rgb: 0, 175, 240;
  --okta-yahoo: #720e9e;
  --okta-yahoo-rgb: 114, 14, 158;
  --okta-copylink: #e12828;
  --okta-copylink-rgb: 225, 40, 40;

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

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

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

.share-text {
  display: none;
}

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

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

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

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

.button-pinterest {
  background: var(--okta-pinterest);
  color: var(--okta-white-color);
}
.button-pinterest .share-text {
  background: var(--okta-pinterest);
}
[class*=" style-outline-"] .button-pinterest {
  color: var(--okta-pinterest);
}
[class*=" style-outline-"] .button-pinterest:hover,
[class*=" style-outline-"] .button-pinterest:focus {
  background: var(--okta-pinterest);
}
[class*=" style-outline-"] .button-pinterest svg {
  fill: var(--okta-pinterest);
}

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

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

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

.button-instagram {
  background: var(--okta-instagram);
  color: var(--okta-white-color);
}
.button-instagram .share-text {
  background: var(--okta-instagram);
}
[class*=" style-outline-"] .button-instagram {
  color: var(--okta-instagram);
}
[class*=" style-outline-"] .button-instagram:hover,
[class*=" style-outline-"] .button-instagram:focus {
  background: var(--okta-instagram);
}
[class*=" style-outline-"] .button-instagram svg {
  fill: var(--okta-instagram);
}

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

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

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

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

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

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

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

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

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

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

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

.button-copylink {
  background: var(--okta-copylink);
  color: var(--okta-white-color);
}
.button-copylink .share-text {
  background: var(--okta-copylink);
}
[class*=" style-outline-"] .button-copylink {
  color: var(--okta-copylink);
}
[class*=" style-outline-"] .button-copylink:hover,
[class*=" style-outline-"] .button-copylink:focus {
  background: var(--okta-copylink);
}
[class*=" style-outline-"] .button-copylink svg {
  fill: var(--okta-copylink);
}

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

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

.okta-content-share-plugin {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 16px;
}

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

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

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

.okta-button-list a:hover,
.okta-button-list a:focus,
.okta-button-list a:active {
  color: var(--okta-white-color);
}

.okta-button-list svg {
  fill: var(--okta-white-color);
}

.okta-button-list a:hover svg,
.okta-button-list a:focus svg,
.okta-button-list a:active svg {
  fill: var(--okta-white-color);
}

.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;
}

.size-large a .share-icon {
  font-size: 24px;
}

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

.size-extra a .share-icon {
  font-size: 30px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Blog Category
-------------------------------------- */
.view-category .share-text {
  display: none;
  height: 0;
}

.view-category .okta-share-after-title {
  display: none;
}
.view-article .okta-share-after-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  margin-right: auto;
  margin-left: auto;
}

.view-category .okta-share-after-content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.view-category .okta-share-after-content .okta-share-text {
  display: none !important;
}
.view-article .okta-share-after-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  margin-right: auto;
  margin-left: auto;
}

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

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

.okta-sticky-share .okta-content-share-plugin {
  gap: 0;
  width: var(--okta-btn-share-medium);
}

.okta-sticky-share .okta-content-share-plugin.size-large {
  width: var(--okta-btn-share-large);
}

.okta-sticky-share .okta-content-share-plugin.size-extra {
  width: var(--okta-btn-share-extra);
}

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

.okta-sticky-share .okta-content-share-plugin .total-share span {
  background: var(--okta-white-color);
}

.okta-sticky-share .okta-content-share-plugin .total-share.size-small {
  width: var(--okta-btn-share-small);
}

.okta-sticky-share .okta-content-share-plugin .total-share.size-large {
  width: var(--okta-btn-share-large);
}

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

.okta-sticky-share .okta-content-share-plugin .total-share.size-extra {
  width: var(--okta-btn-share-extra);
}

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

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

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

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

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

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

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

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

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

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

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

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

.okta-button-share a #copied {
  top: 52px;
  left: 154px;
  line-height: 150%;
}
.okta-button-share #copied-2.active,
.okta-button-sharea #copied.active {
  opacity: 1;
  display: block;
  animation: 0.5s ease-in-out forwards copyAnimate;
}
.okta-button-share #copied-2 {
  top: 40px;
  left: -45px;
  line-height: 150%;
}
@keyframes copyAnimate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}