.forecast-social-bar{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:18px;
    padding:9px 10px;
    border:1px solid #e2edf4;
    border-radius:16px;
    background:#f8fbfd;
    color:#526575;
}

.forecast-social-item,
.forecast-social-action{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:7px 10px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:inherit;
    font:inherit;
    font-size:13px;
    line-height:1;
    white-space:nowrap;
}

.forecast-social-item{
    cursor:default;
}

.forecast-social-action{
    cursor:pointer;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.forecast-social-action:hover{
    background:#edf5fa;
    color:#0a5278;
}

.forecast-social-action:active{
    transform:scale(.97);
}

.forecast-social-bar svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.forecast-social-bar strong{
    font-size:13px;
    font-weight:700;
    color:#173d55;
}

.forecast-social-like.is-liked{
    color:#d4485f;
}

.forecast-social-like.is-liked svg{
    fill:currentColor;
}

.forecast-social-like.is-liked strong{
    color:#d4485f;
}

.forecast-social-share{
    margin-left:auto;
    color:#176b91;
}

.forecast-social-note{
    max-height:0;
    overflow:hidden;
    opacity:0;
    margin:0;
    color:#637786;
    font-size:12px;
    line-height:1.45;
    transition:
        opacity .2s ease,
        max-height .2s ease,
        margin .2s ease;
}

.forecast-social-note.is-visible{
    max-height:70px;
    opacity:1;
    margin-top:8px;
}

.forecast-social-bar.is-compact{
    margin-top:14px;
    padding:6px 8px;
    border-radius:14px;
}

.forecast-social-bar.is-compact
.forecast-social-item,
.forecast-social-bar.is-compact
.forecast-social-action{
    min-height:36px;
    padding:5px 8px;
}

@media (max-width:640px){
    .forecast-social-bar{
        width:100%;
        gap:2px;
        padding:7px 6px;
    }

    .forecast-social-item,
    .forecast-social-action{
        flex:1 1 auto;
        padding:6px 5px;
        font-size:12px;
    }

    .forecast-social-share{
        margin-left:0;
    }

    .forecast-social-label{
        display:none;
    }

    .forecast-social-bar svg{
        width:17px;
        height:17px;
        flex-basis:17px;
    }
}