.fb-cont { overflow: visible; position: relative; margin: 0px auto; max-width: 500px; margin-bottom: 40px; } .fb-cont__inner { position: relative; display: flex; justify-content: space-between; } .fb-cont__inner:before { content: ""; position: absolute; left: 50%; top: 50%; width: 90%; height: 4px; margin-top: -2px; background: rgba(200, 206, 211, 0.5); border-radius: 2px; transform: translateX(-50%); } .fb-cont__drag-cont { z-index: 2; position: absolute; left: 50%; top: 0; width: 574px; height: 100%; margin-left: -287px; pointer-events: none; transform: translate3d(50%, 0, 0); } .fb-heading { margin: 0 auto 60px; font-size: 30px; text-align: center; color: #737b7b; } .fb-emote { z-index: 1; position: relative; display: flex; flex-wrap: wrap; justify-content: center; width: 46px; height: 46px; cursor: pointer; } .fb-emote svg { display: block; margin-bottom: 15px; width: 100%; height: 100%; background: #c8ced3; border-radius: 50%; transition: transform 0.5s; } 
    .fb-emote.s--active svg { transform: scale(1.1); } .fb-emote__caption { text-align: center; font-size: 26px; font-weight: 700; color: #c8ced3; transition: all 0.5s; } .fb-emote.s--active .fb-emote__caption { color: #655e53; transform: translateY(15px); } .fb-emote__eye { stroke: none; fill: #fff; } 
    .fb-emote__smile { stroke: #fff; stroke-width: 10; stroke-linecap: round; fill: none; } .fb-active-emote { position: absolute; left: 0; top: 50%; width: 110px; height: 110px; margin-left: -55px; margin-top: -55px; background: #ffd68c; border-radius: 50%; } .fb-active-emote svg { width: 100%; height: 100%; } .fb-active-emote__eye { stroke: none; fill: #655e53; } .fb-active-emote__smile { stroke: #655e53; stroke-width: 10; stroke-linecap: round; fill: none; } .icon-link { position: absolute; left: 5px; bottom: 5px; width: 32px; } .icon-link img { width: 100%; vertical-align: top; } .icon-link--twitter { left: auto; right: 5px; }
    p.fb-emote__caption { font-size: 12px; padding: 0; margin: 0; display: contents;text-wrap-mode: nowrap; }
    .rtl .fb-cont__inner { flex-direction: row-reverse; }
    .fb-cont__inner:before { display:none}
    
    .fb-emote.s--active[data-emote="terrible"] > svg , 
    .fb-emote[data-emote="terrible"]:hover > svg { 
        background: linear-gradient(135deg, #f42525, #da0b73); 
    }
    
    .fb-emote.s--active[data-emote="bad"] > svg , 
    .fb-emote[data-emote="bad"]:hover > svg { 
        background: linear-gradient(135deg, #f49a25, #da190b); 
    }
    
    .fb-emote.s--active[data-emote="okay"] > svg , 
    .fb-emote[data-emote="okay"]:hover > svg { 
        background: linear-gradient(135deg, #f4f425, #da730b); 
    }
    
    .fb-emote.s--active[data-emote="good"] > svg , 
    .fb-emote[data-emote="good"]:hover > svg { 
        background: linear-gradient(135deg, #90f425, #dad70b); 
    }
    
    .fb-emote.s--active[data-emote="great"] > svg ,
    .fb-emote[data-emote="great"]:hover > svg { 
        background: linear-gradient(135deg, #25f425, #73da0b); 
    }