/**
 * ------------------------------------------------------------------------
 * 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;
--lokta-inkedin-rgb: 0, 123, 182;
--okta-reddit: #FF4400;
--okta-reddit-rgb: 255, 68, 0;
--okta-tumblr: #001833;
--okta-tumblr-rgb: 0, 24, 51;
--okta-intagram: #25A3E1;
--okta-intagram-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-intagram { background: var(--okta-intagram); color: var(--okta-white-color); }
.button-intagram .share-text { background: var(--okta-intagram); }
[class*=" style-outline-"] .button-intagram { color: var(--okta-intagram); }
[class*=" style-outline-"] .button-intagram:hover,
[class*=" style-outline-"] .button-intagram:focus { background: var(--okta-intagram); }
[class*=" style-outline-"] .button-intagram svg { fill: var(--okta-intagram); }

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