/*
=========================================================
 CITY LIVE — READER SUITE TRANSLATOR ACTION BAR
 Version : 1.1.0
 Scope   : #clCityLivePremiumTranslator only
=========================================================
*/

#clCityLivePremiumTranslator
.cl-translator-publication-action-bar{

    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:12px !important;

    width:100% !important;

    margin:
        14px 0
        20px !important;

    padding:
        8px 10px 8px 13px !important;

    background:
        #f3f5f8 !important;

    border:
        1px solid #dce3eb !important;

    border-radius:
        8px !important;

    box-shadow:
        0 1px 2px
        rgba(25,42,63,.04) !important;

    box-sizing:
        border-box !important;

    font-family:
        inherit !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-meta{

    display:flex !important;

    align-items:center !important;

    flex:
        1 1 auto !important;

    min-width:0 !important;

    gap:8px !important;

    color:
        #5c6b7c !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        1.35 !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-divider{

    flex:
        0 0 auto !important;

    color:
        #aeb7c3 !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-tools{

    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;

    gap:
        6px !important;

    flex:
        0 0 auto !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-btn{

    appearance:none !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    min-width:
        42px !important;

    min-height:
        31px !important;

    padding:
        0 9px !important;

    border:
        1px solid #d4dce6 !important;

    border-radius:
        7px !important;

    background:
        #ffffff !important;

    color:
        #233f5f !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    white-space:
        nowrap !important;

    cursor:
        pointer !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        opacity .18s ease !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-btn:hover{

    border-color:
        #8ba5c2 !important;

    box-shadow:
        0 4px 12px
        rgba(22,44,70,.08) !important;

    transform:
        translateY(-1px) !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-btn:focus-visible{

    outline:
        3px solid
        rgba(36,89,179,.16) !important;

    outline-offset:
        1px !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-btn:disabled,
#clCityLivePremiumTranslator
.cl-translator-publication-btn[data-citylive-busy="1"]{

    opacity:
        .62 !important;

    cursor:
        wait !important;

    transform:
        none !important;

    box-shadow:
        none !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-print{

    min-width:
        72px !important;
}

@media(max-width:768px){

    #clCityLivePremiumTranslator
    .cl-translator-publication-action-bar{

        align-items:
            stretch !important;

        flex-direction:
            column !important;

        gap:
            8px !important;

        padding:
            9px !important;

        margin:
            10px 0 18px !important;
    }

    #clCityLivePremiumTranslator
    .cl-translator-publication-meta{

        width:
            100% !important;

        overflow-x:
            auto !important;

        text-overflow:
            clip !important;

        scrollbar-width:
            thin !important;

        -webkit-overflow-scrolling:
            touch !important;

        padding-bottom:
            1px !important;
    }

    #clCityLivePremiumTranslator
    .cl-translator-publication-tools{

        width:
            100% !important;

        justify-content:
            flex-start !important;

        overflow-x:
            auto !important;

        scrollbar-width:
            thin !important;

        -webkit-overflow-scrolling:
            touch !important;

        padding-bottom:
            1px !important;
    }

    #clCityLivePremiumTranslator
    .cl-translator-publication-btn{

        flex:
            0 0 auto !important;

        min-height:
            34px !important;

        font-size:
            12px !important;
    }
}

/* v1.1.0 — master publication action bar */
#clCityLivePremiumTranslator
.cl-translator-publication-action-bar{
    background:#f3f5f8 !important;
    border-color:#dce3eb !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-btn{
    background:#ffffff !important;
    border-color:#d1dae5 !important;
    color:#233f5f !important;
}

#clCityLivePremiumTranslator
.cl-translator-publication-print{
    border-color:#b9c8d8 !important;
}