.jeg_share_button.share-float.jeg_sticky_share.clearfix.share-monocrhome {
    z-index: 2;
}

.visually-hidden {
    display: none !important;
}

div.jeg_meta_zoom,
div.cn_sidebar_option,
div.show_on_hover {
    display: none;
}

#cn_sticky_share_bar {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
}

#cn_sticky_share_bar.jeg_sharelist > a:not([class^="jeg_btn"]):first-child {
    display: inline-block !important;
}

#cn_sticky_share_bar > div,
#cn_sticky_share_bar > a {
    cursor: pointer;
    background-color: var(--neutral-100);
    margin: auto auto;
    display: inline-flex;
    border-radius: 4px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px;
    height: 52px;
    width: 60px;
}

#cn_sticky_share_bar > div svg,
#cn_sticky_share_bar > a svg {
    height: 20px;
    width: 20px;
}

.jeg_share_button #cn_sticky_share_bar > a:hover {
    opacity: 1 !important;
}

#cn_sticky_share_bar .email_share > svg {
    fill: var(--neutral-100);
}

body.jnews-dark-mode #cn_sticky_share_bar .email_share svg path {
    fill: var(--neutral-700) !important;
    stroke: var(--neutral-50);
}


#cn_sticky_share_bar > div:hover,
#cn_sticky_share_bar > a:hover {
    background-color: var(--neutral-300);
}

#cn_sticky_share_bar > a.email_share:hover > svg {
    fill: var(--neutral-300);
}

#cn_sticky_share_bar .zoom_text,
#cn_sticky_share_bar .zoom_text svg {
    cursor: pointer;
}

#cn_sticky_share_bar .cn_sidebar_option.jeg_meta_zoom button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

body.jnews-dark-mode #cn_sticky_share_bar .cn_sidebar_option.jeg_meta_zoom span {
    color: var(--neutral-50) !important;
}

#cn_sticky_share_bar .cn_sidebar_option.jeg_meta_zoom button.zoom-out {
    font-size: 0.75rem;
}

#cn_sticky_share_bar .cn_sidebar_option.jeg_meta_zoom button.zoom-in {
    font-size: 1rem;
}

@media screen and (min-width: 1024px) {
    #cn_sticky_share_bar > div:not(.zoom_text):hover div.show_on_hover ,
    #cn_sticky_share_bar > div.zoom_text:hover:not(:has(input[type="checkbox"]:checked)) div.show_on_hover,
    #cn_sticky_share_bar > div.zoom_text:has(input[type="checkbox"]:checked) div.jeg_meta_zoom ,
    #cn_sticky_share_bar > a:hover div.show_on_hover {
        display: inline-flex;
        justify-content: center;    
        align-items: center;
        position: absolute;
        left: 70px;
        z-index: 19;
        background-color: var(--neutral-300);
        padding: 10px;
        border-radius: 8px;
        font-family: 'Open Sans';
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 24px;
        text-align: center;
        color: var(--neutral-900);
        height: 52px;
        width: 100%;
        min-width: max-content !important;
    }
}


body.jnews-dark-mode #cn_sticky_share_bar > div:hover div.show_on_hover ,
body.jnews-dark-mode #cn_sticky_share_bar > a:hover div.show_on_hover,
body.jnews-dark-mode #cn_sticky_share_bar div.zoom_text:hover div.toggle_zoom.show_on_hover,
body.jnews-dark-mode #cn_sticky_share_bar .visually-hidden:checked ~ div.jeg_meta_zoom,
body.jnews-dark-mode #cn_sticky_share_bar > div.zoom_text:has(input[type="checkbox"]:checked) div.jeg_meta_zoom,
body.jnews-dark-mode #cn_sticky_share_bar > div.zoom_text:hover:not(:has(input[type="checkbox"]:checked)) div.show_on_hover {
    background-color: var(--neutral-700) ;
    color: var(--neutral-50) !important;
}

body.jnews-dark-mode #cn_sticky_share_bar > div.zoom_text:has(input[type="checkbox"]:checked) div.jeg_meta_zoom span {
    color: var(--neutral-50);
}


body.jnews-dark-mode #cn_sticky_share_bar > div,
body.jnews-dark-mode #cn_sticky_share_bar > a {
    background-color: var(--neutral-700) !important;
}

body.jnews-dark-mode #cn_sticky_share_bar .jeg_btn-twitter svg {
    fill: black;
}

#cn_sticky_share_bar .mail_share_button svg > path {
    fill: var(--neutral-100);
}

body.jnews-dark-mode #cn_sticky_share_bar svg,
body.jnews-dark-mode #cn_sticky_share_bar svg path {
    fill: var(--neutral-50);
}

body.jnews-dark-mode #cn_sticky_share_bar .mail_share_button svg > path  {
    fill: var(--neutral-700);
    stroke: var(--neutral-50);
}

#cn_sticky_share_bar svg.hover-share-arrow {
    position: absolute;
    pointer-events: none;
    right: calc(100% - 2px);
    transform: rotate(90deg);
    top: 16px;
    height: 20px;
    fill: var(--neutral-300);
    width: 20px;
}

body.jnews-dark-mode #cn_sticky_share_bar svg.hover-share-arrow path,
body.jnews-dark-mode #cn_sticky_share_bar svg.hover-share-arrow {
    fill: var(--neutral-700) !important;
    stroke: var(--neutral-700) !important;
}

@media screen and (max-width: 1024px) {
    #cn_sticky_share_bar {
        flex-direction: row !important;
        justify-content: space-between;
        display: none !important;
    }

    div#cn_sticky_share_bar  > div,
    div#cn_sticky_share_bar  > a {
        flex-grow: 1 !important;
    }

    #cn_sticky_share_bar > div.zoom_text:has(input[type="checkbox"]:checked) div.jeg_meta_zoom {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 5px;
        top: 64px;
        z-index: 19;
        background-color: var(--neutral-300);
        padding: 10px;
        border-radius: 8px;
        font-family: 'Open Sans';
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 24px;
        text-align: center;
        color: var(--neutral-900);
        height: 52px;
        width: fit-content;
        min-width: max-content !important;
    }

    #cn_sticky_share_bar svg.hover-share-arrow {
        position: absolute;
        pointer-events: none;
        right: calc(100% - 2px);
        transform: rotate(180deg) !important;
        top: -16px;
        height: 20px;
        fill: var(--neutral-300);
        width: 20px;
        left: 15%;
    }
}