.flag-icon,.flag-icon-background{background-repeat:no-repeat;background-size:contain;background-position:50%}.flag-icon{position:relative;display:inline-block;width:1.33333333em;line-height:1em}.flag-icon:before{content:"\00a0"}.flag-icon.flag-icon-squared{width:1em}.flag-icon-ad{background-image:url(../flags/4x3/ad.svg)}.flag-icon-ad.flag-icon-squared{background-image:url(../flags/1x1/ad.svg)}.flag-icon-ae{background-image:url(../flags/4x3/ae.svg)}.flag-icon-ae.flag-icon-squared{background-image:url(../flags/1x1/ae.svg)}.flag-icon-af{background-image:url(../flags/4x3/af.svg)}.flag-icon-af.flag-icon-squared{background-image:url(../flags/1x1/af.svg)}.flag-icon-ag{background-image:url(../flags/4x3/ag.svg)}.flag-icon-ag.flag-icon-squared{background-image:url(../flags/1x1/ag.svg)}.flag-icon-ai{background-image:url(../flags/4x3/ai.svg)}.flag-icon-ai.flag-icon-squared{background-image:url(../flags/1x1/ai.svg)}.flag-icon-al{background-image:url(../flags/4x3/al.svg)}.flag-icon-al.flag-icon-squared{background-image:url(../flags/1x1/al.svg)}.flag-icon-am{background-image:url(../flags/4x3/am.svg)}.flag-icon-am.flag-icon-squared{background-image:url(../flags/1x1/am.svg)}.flag-icon-ao{background-image:url(../flags/4x3/ao.svg)}.flag-icon-ao.flag-icon-squared{background-image:url(../flags/1x1/ao.svg)}.flag-icon-aq{background-image:url(../flags/4x3/aq.svg)}.flag-icon-aq.flag-icon-squared{background-image:url(../flags/1x1/aq.svg)}.flag-icon-ar{background-image:url(../flags/4x3/ar.svg)}.flag-icon-ar.flag-icon-squared{background-image:url(../flags/1x1/ar.svg)}.flag-icon-as{background-image:url(../flags/4x3/as.svg)}.flag-icon-as.flag-icon-squared{background-image:url(../flags/1x1/as.svg)}.flag-icon-at{background-image:url(../flags/4x3/at.svg)}.flag-icon-at.flag-icon-squared{background-image:url(../flags/1x1/at.svg)}.flag-icon-au{background-image:url(../flags/4x3/au.svg)}.flag-icon-au.flag-icon-squared{background-image:url(../flags/1x1/au.svg)}.flag-icon-aw{background-image:url(../flags/4x3/aw.svg)}.flag-icon-aw.flag-icon-squared{background-image:url(../flags/1x1/aw.svg)}.flag-icon-ax{background-image:url(../flags/4x3/ax.svg)}.flag-icon-ax.flag-icon-squared{background-image:url(../flags/1x1/ax.svg)}.flag-icon-az{background-image:url(../flags/4x3/az.svg)}.flag-icon-az.flag-icon-squared{background-image:url(../flags/1x1/az.svg)}.flag-icon-ba{background-image:url(../flags/4x3/ba.svg)}.flag-icon-ba.flag-icon-squared{background-image:url(../flags/1x1/ba.svg)}.flag-icon-bb{background-image:url(../flags/4x3/bb.svg)}.flag-icon-bb.flag-icon-squared{background-image:url(../flags/1x1/bb.svg)}.flag-icon-bd{background-image:url(../flags/4x3/bd.svg)}.flag-icon-bd.flag-icon-squared{background-image:url(../flags/1x1/bd.svg)}.flag-icon-be{background-image:url(../flags/4x3/be.svg)}.flag-icon-be.flag-icon-squared{background-image:url(../flags/1x1/be.svg)}.flag-icon-bf{background-image:url(../flags/4x3/bf.svg)}.flag-icon-bf.flag-icon-squared{background-image:url(../flags/1x1/bf.svg)}.flag-icon-bg{background-image:url(../flags/4x3/bg.svg)}.flag-icon-bg.flag-icon-squared{background-image:url(../flags/1x1/bg.svg)}.flag-icon-bh{background-image:url(../flags/4x3/bh.svg)}.flag-icon-bh.flag-icon-squared{background-image:url(../flags/1x1/bh.svg)}.flag-icon-bi{background-image:url(../flags/4x3/bi.svg)}.flag-icon-bi.flag-icon-squared{background-image:url(../flags/1x1/bi.svg)}.flag-icon-bj{background-image:url(../flags/4x3/bj.svg)}.flag-icon-bj.flag-icon-squared{background-image:url(../flags/1x1/bj.svg)}.flag-icon-bl{background-image:url(../flags/4x3/bl.svg)}.flag-icon-bl.flag-icon-squared{background-image:url(../flags/1x1/bl.svg)}.flag-icon-bm{background-image:url(../flags/4x3/bm.svg)}.flag-icon-bm.flag-icon-squared{background-image:url(../flags/1x1/bm.svg)}.flag-icon-bn{background-image:url(../flags/4x3/bn.svg)}.flag-icon-bn.flag-icon-squared{background-image:url(../flags/1x1/bn.svg)}.flag-icon-bo{background-image:url(../flags/4x3/bo.svg)}.flag-icon-bo.flag-icon-squared{background-image:url(../flags/1x1/bo.svg)}.flag-icon-bq{background-image:url(../flags/4x3/bq.svg)}.flag-icon-bq.flag-icon-squared{background-image:url(../flags/1x1/bq.svg)}.flag-icon-br{background-image:url(../flags/4x3/br.svg)}.flag-icon-br.flag-icon-squared{background-image:url(../flags/1x1/br.svg)}.flag-icon-bs{background-image:url(../flags/4x3/bs.svg)}.flag-icon-bs.flag-icon-squared{background-image:url(../flags/1x1/bs.svg)}.flag-icon-bt{background-image:url(../flags/4x3/bt.svg)}.flag-icon-bt.flag-icon-squared{background-image:url(../flags/1x1/bt.svg)}.flag-icon-bv{background-image:url(../flags/4x3/bv.svg)}.flag-icon-bv.flag-icon-squared{background-image:url(../flags/1x1/bv.svg)}.flag-icon-bw{background-image:url(../flags/4x3/bw.svg)}.flag-icon-bw.flag-icon-squared{background-image:url(../flags/1x1/bw.svg)}.flag-icon-by{background-image:url(../flags/4x3/by.svg)}.flag-icon-by.flag-icon-squared{background-image:url(../flags/1x1/by.svg)}.flag-icon-bz{background-image:url(../flags/4x3/bz.svg)}.flag-icon-bz.flag-icon-squared{background-image:url(../flags/1x1/bz.svg)}.flag-icon-ca{background-image:url(../flags/4x3/ca.svg)}.flag-icon-ca.flag-icon-squared{background-image:url(../flags/1x1/ca.svg)}.flag-icon-cc{background-image:url(../flags/4x3/cc.svg)}.flag-icon-cc.flag-icon-squared{background-image:url(../flags/1x1/cc.svg)}.flag-icon-cd{background-image:url(../flags/4x3/cd.svg)}.flag-icon-cd.flag-icon-squared{background-image:url(../flags/1x1/cd.svg)}.flag-icon-cf{background-image:url(../flags/4x3/cf.svg)}.flag-icon-cf.flag-icon-squared{background-image:url(../flags/1x1/cf.svg)}.flag-icon-cg{background-image:url(../flags/4x3/cg.svg)}.flag-icon-cg.flag-icon-squared{background-image:url(../flags/1x1/cg.svg)}.flag-icon-ch{background-image:url(../flags/4x3/ch.svg)}.flag-icon-ch.flag-icon-squared{background-image:url(../flags/1x1/ch.svg)}.flag-icon-ci{background-image:url(../flags/4x3/ci.svg)}.flag-icon-ci.flag-icon-squared{background-image:url(../flags/1x1/ci.svg)}.flag-icon-ck{background-image:url(../flags/4x3/ck.svg)}.flag-icon-ck.flag-icon-squared{background-image:url(../flags/1x1/ck.svg)}.flag-icon-cl{background-image:url(../flags/4x3/cl.svg)}.flag-icon-cl.flag-icon-squared{background-image:url(../flags/1x1/cl.svg)}.flag-icon-cm{background-image:url(../flags/4x3/cm.svg)}.flag-icon-cm.flag-icon-squared{background-image:url(../flags/1x1/cm.svg)}.flag-icon-cn{background-image:url(../flags/4x3/cn.svg)}.flag-icon-cn.flag-icon-squared{background-image:url(../flags/1x1/cn.svg)}.flag-icon-co{background-image:url(../flags/4x3/co.svg)}.flag-icon-co.flag-icon-squared{background-image:url(../flags/1x1/co.svg)}.flag-icon-cr{background-image:url(../flags/4x3/cr.svg)}.flag-icon-cr.flag-icon-squared{background-image:url(../flags/1x1/cr.svg)}.flag-icon-cu{background-image:url(../flags/4x3/cu.svg)}.flag-icon-cu.flag-icon-squared{background-image:url(../flags/1x1/cu.svg)}.flag-icon-cv{background-image:url(../flags/4x3/cv.svg)}.flag-icon-cv.flag-icon-squared{background-image:url(../flags/1x1/cv.svg)}.flag-icon-cw{background-image:url(../flags/4x3/cw.svg)}.flag-icon-cw.flag-icon-squared{background-image:url(../flags/1x1/cw.svg)}.flag-icon-cx{background-image:url(../flags/4x3/cx.svg)}.flag-icon-cx.flag-icon-squared{background-image:url(../flags/1x1/cx.svg)}.flag-icon-cy{background-image:url(../flags/4x3/cy.svg)}.flag-icon-cy.flag-icon-squared{background-image:url(../flags/1x1/cy.svg)}.flag-icon-cz{background-image:url(../flags/4x3/cz.svg)}.flag-icon-cz.flag-icon-squared{background-image:url(../flags/1x1/cz.svg)}.flag-icon-de{background-image:url(../flags/4x3/de.svg)}.flag-icon-de.flag-icon-squared{background-image:url(../flags/1x1/de.svg)}.flag-icon-dj{background-image:url(../flags/4x3/dj.svg)}.flag-icon-dj.flag-icon-squared{background-image:url(../flags/1x1/dj.svg)}.flag-icon-dk{background-image:url(../flags/4x3/dk.svg)}.flag-icon-dk.flag-icon-squared{background-image:url(../flags/1x1/dk.svg)}.flag-icon-dm{background-image:url(../flags/4x3/dm.svg)}.flag-icon-dm.flag-icon-squared{background-image:url(../flags/1x1/dm.svg)}.flag-icon-do{background-image:url(../flags/4x3/do.svg)}.flag-icon-do.flag-icon-squared{background-image:url(../flags/1x1/do.svg)}.flag-icon-dz{background-image:url(../flags/4x3/dz.svg)}.flag-icon-dz.flag-icon-squared{background-image:url(../flags/1x1/dz.svg)}.flag-icon-ec{background-image:url(../flags/4x3/ec.svg)}.flag-icon-ec.flag-icon-squared{background-image:url(../flags/1x1/ec.svg)}.flag-icon-ee{background-image:url(../flags/4x3/ee.svg)}.flag-icon-ee.flag-icon-squared{background-image:url(../flags/1x1/ee.svg)}.flag-icon-eg{background-image:url(../flags/4x3/eg.svg)}.flag-icon-eg.flag-icon-squared{background-image:url(../flags/1x1/eg.svg)}.flag-icon-eh{background-image:url(../flags/4x3/eh.svg)}.flag-icon-eh.flag-icon-squared{background-image:url(../flags/1x1/eh.svg)}.flag-icon-er{background-image:url(../flags/4x3/er.svg)}.flag-icon-er.flag-icon-squared{background-image:url(../flags/1x1/er.svg)}.flag-icon-es{background-image:url(../flags/4x3/es.svg)}.flag-icon-es.flag-icon-squared{background-image:url(../flags/1x1/es.svg)}.flag-icon-et{background-image:url(../flags/4x3/et.svg)}.flag-icon-et.flag-icon-squared{background-image:url(../flags/1x1/et.svg)}.flag-icon-fi{background-image:url(../flags/4x3/fi.svg)}.flag-icon-fi.flag-icon-squared{background-image:url(../flags/1x1/fi.svg)}.flag-icon-fj{background-image:url(../flags/4x3/fj.svg)}.flag-icon-fj.flag-icon-squared{background-image:url(../flags/1x1/fj.svg)}.flag-icon-fk{background-image:url(../flags/4x3/fk.svg)}.flag-icon-fk.flag-icon-squared{background-image:url(../flags/1x1/fk.svg)}.flag-icon-fm{background-image:url(../flags/4x3/fm.svg)}.flag-icon-fm.flag-icon-squared{background-image:url(../flags/1x1/fm.svg)}.flag-icon-fo{background-image:url(../flags/4x3/fo.svg)}.flag-icon-fo.flag-icon-squared{background-image:url(../flags/1x1/fo.svg)}.flag-icon-fr{background-image:url(../flags/4x3/fr.svg)}.flag-icon-fr.flag-icon-squared{background-image:url(../flags/1x1/fr.svg)}.flag-icon-ga{background-image:url(../flags/4x3/ga.svg)}.flag-icon-ga.flag-icon-squared{background-image:url(../flags/1x1/ga.svg)}.flag-icon-gb{background-image:url(../flags/4x3/gb.svg)}.flag-icon-gb.flag-icon-squared{background-image:url(../flags/1x1/gb.svg)}.flag-icon-gd{background-image:url(../flags/4x3/gd.svg)}.flag-icon-gd.flag-icon-squared{background-image:url(../flags/1x1/gd.svg)}.flag-icon-ge{background-image:url(../flags/4x3/ge.svg)}.flag-icon-ge.flag-icon-squared{background-image:url(../flags/1x1/ge.svg)}.flag-icon-gf{background-image:url(../flags/4x3/gf.svg)}.flag-icon-gf.flag-icon-squared{background-image:url(../flags/1x1/gf.svg)}.flag-icon-gg{background-image:url(../flags/4x3/gg.svg)}.flag-icon-gg.flag-icon-squared{background-image:url(../flags/1x1/gg.svg)}.flag-icon-gh{background-image:url(../flags/4x3/gh.svg)}.flag-icon-gh.flag-icon-squared{background-image:url(../flags/1x1/gh.svg)}.flag-icon-gi{background-image:url(../flags/4x3/gi.svg)}.flag-icon-gi.flag-icon-squared{background-image:url(../flags/1x1/gi.svg)}.flag-icon-gl{background-image:url(../flags/4x3/gl.svg)}.flag-icon-gl.flag-icon-squared{background-image:url(../flags/1x1/gl.svg)}.flag-icon-gm{background-image:url(../flags/4x3/gm.svg)}.flag-icon-gm.flag-icon-squared{background-image:url(../flags/1x1/gm.svg)}.flag-icon-gn{background-image:url(../flags/4x3/gn.svg)}.flag-icon-gn.flag-icon-squared{background-image:url(../flags/1x1/gn.svg)}.flag-icon-gp{background-image:url(../flags/4x3/gp.svg)}.flag-icon-gp.flag-icon-squared{background-image:url(../flags/1x1/gp.svg)}.flag-icon-gq{background-image:url(../flags/4x3/gq.svg)}.flag-icon-gq.flag-icon-squared{background-image:url(../flags/1x1/gq.svg)}.flag-icon-gr{background-image:url(../flags/4x3/gr.svg)}.flag-icon-gr.flag-icon-squared{background-image:url(../flags/1x1/gr.svg)}.flag-icon-gs{background-image:url(../flags/4x3/gs.svg)}.flag-icon-gs.flag-icon-squared{background-image:url(../flags/1x1/gs.svg)}.flag-icon-gt{background-image:url(../flags/4x3/gt.svg)}.flag-icon-gt.flag-icon-squared{background-image:url(../flags/1x1/gt.svg)}.flag-icon-gu{background-image:url(../flags/4x3/gu.svg)}.flag-icon-gu.flag-icon-squared{background-image:url(../flags/1x1/gu.svg)}.flag-icon-gw{background-image:url(../flags/4x3/gw.svg)}.flag-icon-gw.flag-icon-squared{background-image:url(../flags/1x1/gw.svg)}.flag-icon-gy{background-image:url(../flags/4x3/gy.svg)}.flag-icon-gy.flag-icon-squared{background-image:url(../flags/1x1/gy.svg)}.flag-icon-hk{background-image:url(../flags/4x3/hk.svg)}.flag-icon-hk.flag-icon-squared{background-image:url(../flags/1x1/hk.svg)}.flag-icon-hm{background-image:url(../flags/4x3/hm.svg)}.flag-icon-hm.flag-icon-squared{background-image:url(../flags/1x1/hm.svg)}.flag-icon-hn{background-image:url(../flags/4x3/hn.svg)}.flag-icon-hn.flag-icon-squared{background-image:url(../flags/1x1/hn.svg)}.flag-icon-hr{background-image:url(../flags/4x3/hr.svg)}.flag-icon-hr.flag-icon-squared{background-image:url(../flags/1x1/hr.svg)}.flag-icon-ht{background-image:url(../flags/4x3/ht.svg)}.flag-icon-ht.flag-icon-squared{background-image:url(../flags/1x1/ht.svg)}.flag-icon-hu{background-image:url(../flags/4x3/hu.svg)}.flag-icon-hu.flag-icon-squared{background-image:url(../flags/1x1/hu.svg)}.flag-icon-id{background-image:url(../flags/4x3/id.svg)}.flag-icon-id.flag-icon-squared{background-image:url(../flags/1x1/id.svg)}.flag-icon-ie{background-image:url(../flags/4x3/ie.svg)}.flag-icon-ie.flag-icon-squared{background-image:url(../flags/1x1/ie.svg)}.flag-icon-il{background-image:url(../flags/4x3/il.svg)}.flag-icon-il.flag-icon-squared{background-image:url(../flags/1x1/il.svg)}.flag-icon-im{background-image:url(../flags/4x3/im.svg)}.flag-icon-im.flag-icon-squared{background-image:url(../flags/1x1/im.svg)}.flag-icon-in{background-image:url(../flags/4x3/in.svg)}.flag-icon-in.flag-icon-squared{background-image:url(../flags/1x1/in.svg)}.flag-icon-io{background-image:url(../flags/4x3/io.svg)}.flag-icon-io.flag-icon-squared{background-image:url(../flags/1x1/io.svg)}.flag-icon-iq{background-image:url(../flags/4x3/iq.svg)}.flag-icon-iq.flag-icon-squared{background-image:url(../flags/1x1/iq.svg)}.flag-icon-ir{background-image:url(../flags/4x3/ir.svg)}.flag-icon-ir.flag-icon-squared{background-image:url(../flags/1x1/ir.svg)}.flag-icon-is{background-image:url(../flags/4x3/is.svg)}.flag-icon-is.flag-icon-squared{background-image:url(../flags/1x1/is.svg)}.flag-icon-it{background-image:url(../flags/4x3/it.svg)}.flag-icon-it.flag-icon-squared{background-image:url(../flags/1x1/it.svg)}.flag-icon-je{background-image:url(../flags/4x3/je.svg)}.flag-icon-je.flag-icon-squared{background-image:url(../flags/1x1/je.svg)}.flag-icon-jm{background-image:url(../flags/4x3/jm.svg)}.flag-icon-jm.flag-icon-squared{background-image:url(../flags/1x1/jm.svg)}.flag-icon-jo{background-image:url(../flags/4x3/jo.svg)}.flag-icon-jo.flag-icon-squared{background-image:url(../flags/1x1/jo.svg)}.flag-icon-jp{background-image:url(../flags/4x3/jp.svg)}.flag-icon-jp.flag-icon-squared{background-image:url(../flags/1x1/jp.svg)}.flag-icon-ke{background-image:url(../flags/4x3/ke.svg)}.flag-icon-ke.flag-icon-squared{background-image:url(../flags/1x1/ke.svg)}.flag-icon-kg{background-image:url(../flags/4x3/kg.svg)}.flag-icon-kg.flag-icon-squared{background-image:url(../flags/1x1/kg.svg)}.flag-icon-kh{background-image:url(../flags/4x3/kh.svg)}.flag-icon-kh.flag-icon-squared{background-image:url(../flags/1x1/kh.svg)}.flag-icon-ki{background-image:url(../flags/4x3/ki.svg)}.flag-icon-ki.flag-icon-squared{background-image:url(../flags/1x1/ki.svg)}.flag-icon-km{background-image:url(../flags/4x3/km.svg)}.flag-icon-km.flag-icon-squared{background-image:url(../flags/1x1/km.svg)}.flag-icon-kn{background-image:url(../flags/4x3/kn.svg)}.flag-icon-kn.flag-icon-squared{background-image:url(../flags/1x1/kn.svg)}.flag-icon-kp{background-image:url(../flags/4x3/kp.svg)}.flag-icon-kp.flag-icon-squared{background-image:url(../flags/1x1/kp.svg)}.flag-icon-kr{background-image:url(../flags/4x3/kr.svg)}.flag-icon-kr.flag-icon-squared{background-image:url(../flags/1x1/kr.svg)}.flag-icon-kw{background-image:url(../flags/4x3/kw.svg)}.flag-icon-kw.flag-icon-squared{background-image:url(../flags/1x1/kw.svg)}.flag-icon-ky{background-image:url(../flags/4x3/ky.svg)}.flag-icon-ky.flag-icon-squared{background-image:url(../flags/1x1/ky.svg)}.flag-icon-kz{background-image:url(../flags/4x3/kz.svg)}.flag-icon-kz.flag-icon-squared{background-image:url(../flags/1x1/kz.svg)}.flag-icon-la{background-image:url(../flags/4x3/la.svg)}.flag-icon-la.flag-icon-squared{background-image:url(../flags/1x1/la.svg)}.flag-icon-lb{background-image:url(../flags/4x3/lb.svg)}.flag-icon-lb.flag-icon-squared{background-image:url(../flags/1x1/lb.svg)}.flag-icon-lc{background-image:url(../flags/4x3/lc.svg)}.flag-icon-lc.flag-icon-squared{background-image:url(../flags/1x1/lc.svg)}.flag-icon-li{background-image:url(../flags/4x3/li.svg)}.flag-icon-li.flag-icon-squared{background-image:url(../flags/1x1/li.svg)}.flag-icon-lk{background-image:url(../flags/4x3/lk.svg)}.flag-icon-lk.flag-icon-squared{background-image:url(../flags/1x1/lk.svg)}.flag-icon-lr{background-image:url(../flags/4x3/lr.svg)}.flag-icon-lr.flag-icon-squared{background-image:url(../flags/1x1/lr.svg)}.flag-icon-ls{background-image:url(../flags/4x3/ls.svg)}.flag-icon-ls.flag-icon-squared{background-image:url(../flags/1x1/ls.svg)}.flag-icon-lt{background-image:url(../flags/4x3/lt.svg)}.flag-icon-lt.flag-icon-squared{background-image:url(../flags/1x1/lt.svg)}.flag-icon-lu{background-image:url(../flags/4x3/lu.svg)}.flag-icon-lu.flag-icon-squared{background-image:url(../flags/1x1/lu.svg)}.flag-icon-lv{background-image:url(../flags/4x3/lv.svg)}.flag-icon-lv.flag-icon-squared{background-image:url(../flags/1x1/lv.svg)}.flag-icon-ly{background-image:url(../flags/4x3/ly.svg)}.flag-icon-ly.flag-icon-squared{background-image:url(../flags/1x1/ly.svg)}.flag-icon-ma{background-image:url(../flags/4x3/ma.svg)}.flag-icon-ma.flag-icon-squared{background-image:url(../flags/1x1/ma.svg)}.flag-icon-mc{background-image:url(../flags/4x3/mc.svg)}.flag-icon-mc.flag-icon-squared{background-image:url(../flags/1x1/mc.svg)}.flag-icon-md{background-image:url(../flags/4x3/md.svg)}.flag-icon-md.flag-icon-squared{background-image:url(../flags/1x1/md.svg)}.flag-icon-me{background-image:url(../flags/4x3/me.svg)}.flag-icon-me.flag-icon-squared{background-image:url(../flags/1x1/me.svg)}.flag-icon-mf{background-image:url(../flags/4x3/mf.svg)}.flag-icon-mf.flag-icon-squared{background-image:url(../flags/1x1/mf.svg)}.flag-icon-mg{background-image:url(../flags/4x3/mg.svg)}.flag-icon-mg.flag-icon-squared{background-image:url(../flags/1x1/mg.svg)}.flag-icon-mh{background-image:url(../flags/4x3/mh.svg)}.flag-icon-mh.flag-icon-squared{background-image:url(../flags/1x1/mh.svg)}.flag-icon-mk{background-image:url(../flags/4x3/mk.svg)}.flag-icon-mk.flag-icon-squared{background-image:url(../flags/1x1/mk.svg)}.flag-icon-ml{background-image:url(../flags/4x3/ml.svg)}.flag-icon-ml.flag-icon-squared{background-image:url(../flags/1x1/ml.svg)}.flag-icon-mm{background-image:url(../flags/4x3/mm.svg)}.flag-icon-mm.flag-icon-squared{background-image:url(../flags/1x1/mm.svg)}.flag-icon-mn{background-image:url(../flags/4x3/mn.svg)}.flag-icon-mn.flag-icon-squared{background-image:url(../flags/1x1/mn.svg)}.flag-icon-mo{background-image:url(../flags/4x3/mo.svg)}.flag-icon-mo.flag-icon-squared{background-image:url(../flags/1x1/mo.svg)}.flag-icon-mp{background-image:url(../flags/4x3/mp.svg)}.flag-icon-mp.flag-icon-squared{background-image:url(../flags/1x1/mp.svg)}.flag-icon-mq{background-image:url(../flags/4x3/mq.svg)}.flag-icon-mq.flag-icon-squared{background-image:url(../flags/1x1/mq.svg)}.flag-icon-mr{background-image:url(../flags/4x3/mr.svg)}.flag-icon-mr.flag-icon-squared{background-image:url(../flags/1x1/mr.svg)}.flag-icon-ms{background-image:url(../flags/4x3/ms.svg)}.flag-icon-ms.flag-icon-squared{background-image:url(../flags/1x1/ms.svg)}.flag-icon-mt{background-image:url(../flags/4x3/mt.svg)}.flag-icon-mt.flag-icon-squared{background-image:url(../flags/1x1/mt.svg)}.flag-icon-mu{background-image:url(../flags/4x3/mu.svg)}.flag-icon-mu.flag-icon-squared{background-image:url(../flags/1x1/mu.svg)}.flag-icon-mv{background-image:url(../flags/4x3/mv.svg)}.flag-icon-mv.flag-icon-squared{background-image:url(../flags/1x1/mv.svg)}.flag-icon-mw{background-image:url(../flags/4x3/mw.svg)}.flag-icon-mw.flag-icon-squared{background-image:url(../flags/1x1/mw.svg)}.flag-icon-mx{background-image:url(../flags/4x3/mx.svg)}.flag-icon-mx.flag-icon-squared{background-image:url(../flags/1x1/mx.svg)}.flag-icon-my{background-image:url(../flags/4x3/my.svg)}.flag-icon-my.flag-icon-squared{background-image:url(../flags/1x1/my.svg)}.flag-icon-mz{background-image:url(../flags/4x3/mz.svg)}.flag-icon-mz.flag-icon-squared{background-image:url(../flags/1x1/mz.svg)}.flag-icon-na{background-image:url(../flags/4x3/na.svg)}.flag-icon-na.flag-icon-squared{background-image:url(../flags/1x1/na.svg)}.flag-icon-nc{background-image:url(../flags/4x3/nc.svg)}.flag-icon-nc.flag-icon-squared{background-image:url(../flags/1x1/nc.svg)}.flag-icon-ne{background-image:url(../flags/4x3/ne.svg)}.flag-icon-ne.flag-icon-squared{background-image:url(../flags/1x1/ne.svg)}.flag-icon-nf{background-image:url(../flags/4x3/nf.svg)}.flag-icon-nf.flag-icon-squared{background-image:url(../flags/1x1/nf.svg)}.flag-icon-ng{background-image:url(../flags/4x3/ng.svg)}.flag-icon-ng.flag-icon-squared{background-image:url(../flags/1x1/ng.svg)}.flag-icon-ni{background-image:url(../flags/4x3/ni.svg)}.flag-icon-ni.flag-icon-squared{background-image:url(../flags/1x1/ni.svg)}.flag-icon-nl{background-image:url(../flags/4x3/nl.svg)}.flag-icon-nl.flag-icon-squared{background-image:url(../flags/1x1/nl.svg)}.flag-icon-no{background-image:url(../flags/4x3/no.svg)}.flag-icon-no.flag-icon-squared{background-image:url(../flags/1x1/no.svg)}.flag-icon-np{background-image:url(../flags/4x3/np.svg)}.flag-icon-np.flag-icon-squared{background-image:url(../flags/1x1/np.svg)}.flag-icon-nr{background-image:url(../flags/4x3/nr.svg)}.flag-icon-nr.flag-icon-squared{background-image:url(../flags/1x1/nr.svg)}.flag-icon-nu{background-image:url(../flags/4x3/nu.svg)}.flag-icon-nu.flag-icon-squared{background-image:url(../flags/1x1/nu.svg)}.flag-icon-nz{background-image:url(../flags/4x3/nz.svg)}.flag-icon-nz.flag-icon-squared{background-image:url(../flags/1x1/nz.svg)}.flag-icon-om{background-image:url(../flags/4x3/om.svg)}.flag-icon-om.flag-icon-squared{background-image:url(../flags/1x1/om.svg)}.flag-icon-pa{background-image:url(../flags/4x3/pa.svg)}.flag-icon-pa.flag-icon-squared{background-image:url(../flags/1x1/pa.svg)}.flag-icon-pe{background-image:url(../flags/4x3/pe.svg)}.flag-icon-pe.flag-icon-squared{background-image:url(../flags/1x1/pe.svg)}.flag-icon-pf{background-image:url(../flags/4x3/pf.svg)}.flag-icon-pf.flag-icon-squared{background-image:url(../flags/1x1/pf.svg)}.flag-icon-pg{background-image:url(../flags/4x3/pg.svg)}.flag-icon-pg.flag-icon-squared{background-image:url(../flags/1x1/pg.svg)}.flag-icon-ph{background-image:url(../flags/4x3/ph.svg)}.flag-icon-ph.flag-icon-squared{background-image:url(../flags/1x1/ph.svg)}.flag-icon-pk{background-image:url(../flags/4x3/pk.svg)}.flag-icon-pk.flag-icon-squared{background-image:url(../flags/1x1/pk.svg)}.flag-icon-pl{background-image:url(../flags/4x3/pl.svg)}.flag-icon-pl.flag-icon-squared{background-image:url(../flags/1x1/pl.svg)}.flag-icon-pm{background-image:url(../flags/4x3/pm.svg)}.flag-icon-pm.flag-icon-squared{background-image:url(../flags/1x1/pm.svg)}.flag-icon-pn{background-image:url(../flags/4x3/pn.svg)}.flag-icon-pn.flag-icon-squared{background-image:url(../flags/1x1/pn.svg)}.flag-icon-pr{background-image:url(../flags/4x3/pr.svg)}.flag-icon-pr.flag-icon-squared{background-image:url(../flags/1x1/pr.svg)}.flag-icon-ps{background-image:url(../flags/4x3/ps.svg)}.flag-icon-ps.flag-icon-squared{background-image:url(../flags/1x1/ps.svg)}.flag-icon-pt{background-image:url(../flags/4x3/pt.svg)}.flag-icon-pt.flag-icon-squared{background-image:url(../flags/1x1/pt.svg)}.flag-icon-pw{background-image:url(../flags/4x3/pw.svg)}.flag-icon-pw.flag-icon-squared{background-image:url(../flags/1x1/pw.svg)}.flag-icon-py{background-image:url(../flags/4x3/py.svg)}.flag-icon-py.flag-icon-squared{background-image:url(../flags/1x1/py.svg)}.flag-icon-qa{background-image:url(../flags/4x3/qa.svg)}.flag-icon-qa.flag-icon-squared{background-image:url(../flags/1x1/qa.svg)}.flag-icon-re{background-image:url(../flags/4x3/re.svg)}.flag-icon-re.flag-icon-squared{background-image:url(../flags/1x1/re.svg)}.flag-icon-ro{background-image:url(../flags/4x3/ro.svg)}.flag-icon-ro.flag-icon-squared{background-image:url(../flags/1x1/ro.svg)}.flag-icon-rs{background-image:url(../flags/4x3/rs.svg)}.flag-icon-rs.flag-icon-squared{background-image:url(../flags/1x1/rs.svg)}.flag-icon-ru{background-image:url(../flags/4x3/ru.svg)}.flag-icon-ru.flag-icon-squared{background-image:url(../flags/1x1/ru.svg)}.flag-icon-rw{background-image:url(../flags/4x3/rw.svg)}.flag-icon-rw.flag-icon-squared{background-image:url(../flags/1x1/rw.svg)}.flag-icon-sa{background-image:url(../flags/4x3/sa.svg)}.flag-icon-sa.flag-icon-squared{background-image:url(../flags/1x1/sa.svg)}.flag-icon-sb{background-image:url(../flags/4x3/sb.svg)}.flag-icon-sb.flag-icon-squared{background-image:url(../flags/1x1/sb.svg)}.flag-icon-sc{background-image:url(../flags/4x3/sc.svg)}.flag-icon-sc.flag-icon-squared{background-image:url(../flags/1x1/sc.svg)}.flag-icon-sd{background-image:url(../flags/4x3/sd.svg)}.flag-icon-sd.flag-icon-squared{background-image:url(../flags/1x1/sd.svg)}.flag-icon-se{background-image:url(../flags/4x3/se.svg)}.flag-icon-se.flag-icon-squared{background-image:url(../flags/1x1/se.svg)}.flag-icon-sg{background-image:url(../flags/4x3/sg.svg)}.flag-icon-sg.flag-icon-squared{background-image:url(../flags/1x1/sg.svg)}.flag-icon-sh{background-image:url(../flags/4x3/sh.svg)}.flag-icon-sh.flag-icon-squared{background-image:url(../flags/1x1/sh.svg)}.flag-icon-si{background-image:url(../flags/4x3/si.svg)}.flag-icon-si.flag-icon-squared{background-image:url(../flags/1x1/si.svg)}.flag-icon-sj{background-image:url(../flags/4x3/sj.svg)}.flag-icon-sj.flag-icon-squared{background-image:url(../flags/1x1/sj.svg)}.flag-icon-sk{background-image:url(../flags/4x3/sk.svg)}.flag-icon-sk.flag-icon-squared{background-image:url(../flags/1x1/sk.svg)}.flag-icon-sl{background-image:url(../flags/4x3/sl.svg)}.flag-icon-sl.flag-icon-squared{background-image:url(../flags/1x1/sl.svg)}.flag-icon-sm{background-image:url(../flags/4x3/sm.svg)}.flag-icon-sm.flag-icon-squared{background-image:url(../flags/1x1/sm.svg)}.flag-icon-sn{background-image:url(../flags/4x3/sn.svg)}.flag-icon-sn.flag-icon-squared{background-image:url(../flags/1x1/sn.svg)}.flag-icon-so{background-image:url(../flags/4x3/so.svg)}.flag-icon-so.flag-icon-squared{background-image:url(../flags/1x1/so.svg)}.flag-icon-sr{background-image:url(../flags/4x3/sr.svg)}.flag-icon-sr.flag-icon-squared{background-image:url(../flags/1x1/sr.svg)}.flag-icon-ss{background-image:url(../flags/4x3/ss.svg)}.flag-icon-ss.flag-icon-squared{background-image:url(../flags/1x1/ss.svg)}.flag-icon-st{background-image:url(../flags/4x3/st.svg)}.flag-icon-st.flag-icon-squared{background-image:url(../flags/1x1/st.svg)}.flag-icon-sv{background-image:url(../flags/4x3/sv.svg)}.flag-icon-sv.flag-icon-squared{background-image:url(../flags/1x1/sv.svg)}.flag-icon-sx{background-image:url(../flags/4x3/sx.svg)}.flag-icon-sx.flag-icon-squared{background-image:url(../flags/1x1/sx.svg)}.flag-icon-sy{background-image:url(../flags/4x3/sy.svg)}.flag-icon-sy.flag-icon-squared{background-image:url(../flags/1x1/sy.svg)}.flag-icon-sz{background-image:url(../flags/4x3/sz.svg)}.flag-icon-sz.flag-icon-squared{background-image:url(../flags/1x1/sz.svg)}.flag-icon-tc{background-image:url(../flags/4x3/tc.svg)}.flag-icon-tc.flag-icon-squared{background-image:url(../flags/1x1/tc.svg)}.flag-icon-td{background-image:url(../flags/4x3/td.svg)}.flag-icon-td.flag-icon-squared{background-image:url(../flags/1x1/td.svg)}.flag-icon-tf{background-image:url(../flags/4x3/tf.svg)}.flag-icon-tf.flag-icon-squared{background-image:url(../flags/1x1/tf.svg)}.flag-icon-tg{background-image:url(../flags/4x3/tg.svg)}.flag-icon-tg.flag-icon-squared{background-image:url(../flags/1x1/tg.svg)}.flag-icon-th{background-image:url(../flags/4x3/th.svg)}.flag-icon-th.flag-icon-squared{background-image:url(../flags/1x1/th.svg)}.flag-icon-tj{background-image:url(../flags/4x3/tj.svg)}.flag-icon-tj.flag-icon-squared{background-image:url(../flags/1x1/tj.svg)}.flag-icon-tk{background-image:url(../flags/4x3/tk.svg)}.flag-icon-tk.flag-icon-squared{background-image:url(../flags/1x1/tk.svg)}.flag-icon-tl{background-image:url(../flags/4x3/tl.svg)}.flag-icon-tl.flag-icon-squared{background-image:url(../flags/1x1/tl.svg)}.flag-icon-tm{background-image:url(../flags/4x3/tm.svg)}.flag-icon-tm.flag-icon-squared{background-image:url(../flags/1x1/tm.svg)}.flag-icon-tn{background-image:url(../flags/4x3/tn.svg)}.flag-icon-tn.flag-icon-squared{background-image:url(../flags/1x1/tn.svg)}.flag-icon-to{background-image:url(../flags/4x3/to.svg)}.flag-icon-to.flag-icon-squared{background-image:url(../flags/1x1/to.svg)}.flag-icon-tr{background-image:url(../flags/4x3/tr.svg)}.flag-icon-tr.flag-icon-squared{background-image:url(../flags/1x1/tr.svg)}.flag-icon-tt{background-image:url(../flags/4x3/tt.svg)}.flag-icon-tt.flag-icon-squared{background-image:url(../flags/1x1/tt.svg)}.flag-icon-tv{background-image:url(../flags/4x3/tv.svg)}.flag-icon-tv.flag-icon-squared{background-image:url(../flags/1x1/tv.svg)}.flag-icon-tw{background-image:url(../flags/4x3/tw.svg)}.flag-icon-tw.flag-icon-squared{background-image:url(../flags/1x1/tw.svg)}.flag-icon-tz{background-image:url(../flags/4x3/tz.svg)}.flag-icon-tz.flag-icon-squared{background-image:url(../flags/1x1/tz.svg)}.flag-icon-ua{background-image:url(../flags/4x3/ua.svg)}.flag-icon-ua.flag-icon-squared{background-image:url(../flags/1x1/ua.svg)}.flag-icon-ug{background-image:url(../flags/4x3/ug.svg)}.flag-icon-ug.flag-icon-squared{background-image:url(../flags/1x1/ug.svg)}.flag-icon-um{background-image:url(../flags/4x3/um.svg)}.flag-icon-um.flag-icon-squared{background-image:url(../flags/1x1/um.svg)}.flag-icon-us{background-image:url(../flags/4x3/us.svg)}.flag-icon-us.flag-icon-squared{background-image:url(../flags/1x1/us.svg)}.flag-icon-uy{background-image:url(../flags/4x3/uy.svg)}.flag-icon-uy.flag-icon-squared{background-image:url(../flags/1x1/uy.svg)}.flag-icon-uz{background-image:url(../flags/4x3/uz.svg)}.flag-icon-uz.flag-icon-squared{background-image:url(../flags/1x1/uz.svg)}.flag-icon-va{background-image:url(../flags/4x3/va.svg)}.flag-icon-va.flag-icon-squared{background-image:url(../flags/1x1/va.svg)}.flag-icon-vc{background-image:url(../flags/4x3/vc.svg)}.flag-icon-vc.flag-icon-squared{background-image:url(../flags/1x1/vc.svg)}.flag-icon-ve{background-image:url(../flags/4x3/ve.svg)}.flag-icon-ve.flag-icon-squared{background-image:url(../flags/1x1/ve.svg)}.flag-icon-vg{background-image:url(../flags/4x3/vg.svg)}.flag-icon-vg.flag-icon-squared{background-image:url(../flags/1x1/vg.svg)}.flag-icon-vi{background-image:url(../flags/4x3/vi.svg)}.flag-icon-vi.flag-icon-squared{background-image:url(../flags/1x1/vi.svg)}.flag-icon-vn{background-image:url(../flags/4x3/vn.svg)}.flag-icon-vn.flag-icon-squared{background-image:url(../flags/1x1/vn.svg)}.flag-icon-vu{background-image:url(../flags/4x3/vu.svg)}.flag-icon-vu.flag-icon-squared{background-image:url(../flags/1x1/vu.svg)}.flag-icon-wf{background-image:url(../flags/4x3/wf.svg)}.flag-icon-wf.flag-icon-squared{background-image:url(../flags/1x1/wf.svg)}.flag-icon-ws{background-image:url(../flags/4x3/ws.svg)}.flag-icon-ws.flag-icon-squared{background-image:url(../flags/1x1/ws.svg)}.flag-icon-ye{background-image:url(../flags/4x3/ye.svg)}.flag-icon-ye.flag-icon-squared{background-image:url(../flags/1x1/ye.svg)}.flag-icon-yt{background-image:url(../flags/4x3/yt.svg)}.flag-icon-yt.flag-icon-squared{background-image:url(../flags/1x1/yt.svg)}.flag-icon-za{background-image:url(../flags/4x3/za.svg)}.flag-icon-za.flag-icon-squared{background-image:url(../flags/1x1/za.svg)}.flag-icon-zm{background-image:url(../flags/4x3/zm.svg)}.flag-icon-zm.flag-icon-squared{background-image:url(../flags/1x1/zm.svg)}.flag-icon-zw{background-image:url(../flags/4x3/zw.svg)}.flag-icon-zw.flag-icon-squared{background-image:url(../flags/1x1/zw.svg)} /*! * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) */.flag{display:inline-block;width:32px;height:32px;background:url('/images/flags1.png') no-repeat}.flag.flag-bh{background-position:-192px -32px}.flag.flag-la{background-position:-352px -224px}.flag.flag-lc{background-position:-416px -224px}.flag.flag-am{background-position:-192px 0}.flag.flag-ws{background-position:-320px -448px}.flag.flag-mq{background-position:-96px -288px}.flag.flag-ht{background-position:-416px -160px}.flag.flag-ge{background-position:-320px -128px}.flag.flag-ro{background-position:-256px -352px}.flag.flag-tc{background-position:-448px -384px}.flag.flag-by{background-position:-32px -64px}.flag.flag-mm{background-position:0 -288px}.flag.flag-es{background-position:0 -128px}.flag.flag-hn{background-position:-352px -160px}.flag.flag-do{background-position:-256px -96px}.flag.flag-mk{background-position:-416px -256px}.flag.flag-ps{background-position:-64px -352px}.flag.flag-dk{background-position:-192px -96px}.flag.flag-tl{background-position:-128px -416px}.flag.flag-se{background-position:-32px -384px}.flag.flag-al{background-position:-160px 0}.flag.flag-cd{background-position:-128px -64px}.flag.flag-nl{background-position:-96px -320px}.flag.flag-cn{background-position:-384px -64px}.flag.flag-bm{background-position:-288px -32px}.flag.flag-nr{background-position:-192px -320px}.flag.flag-so{background-position:-256px -384px}.flag.flag-km{background-position:-128px -224px}.flag.flag-uy{background-position:-32px -448px}.flag.flag-si{background-position:-96px -384px}.flag.flag-ru{background-position:-320px -352px}.flag.flag-ly{background-position:-192px -256px}.flag.flag-et{background-position:-32px -128px}.flag.flag-ar{background-position:-288px 0}.flag.flag-ck{background-position:-288px -64px}.flag.flag-sl{background-position:-160px -384px}.flag.flag-bt{background-position:-448px -32px}.flag.flag-ec{background-position:-320px -96px}.flag.flag-ag{background-position:-96px 0}.flag.flag-sn{background-position:-224px -384px}.flag.flag-vg{background-position:-192px -448px}.flag.flag-md{background-position:-288px -256px}.flag.flag-mt{background-position:-192px -288px}.flag.flag-tt{background-position:-288px -416px}.flag.flag-jm{background-position:-384px -192px}.flag.flag-cg{background-position:-192px -64px}.flag.flag-ir{background-position:-224px -192px}.flag.flag-lr{background-position:-32px -256px}.flag.flag-gh{background-position:-416px -128px}.flag.flag-je{background-position:-352px -192px}.flag.flag-ba{background-position:0 -32px}.flag.flag-ky{background-position:-288px -224px}.flag.flag-bi{background-position:-224px -32px}.flag.flag-fr{background-position:-192px -128px}.flag.flag-ng{background-position:-32px -320px}.flag.flag-cf{background-position:-160px -64px}.flag.flag-vn{background-position:-256px -448px}.flag.flag-mg{background-position:-352px -256px}.flag.flag-aw{background-position:-416px 0}.flag.flag-gn{background-position:-64px -160px}.flag.flag-na{background-position:-416px -288px}.flag.flag-mc{background-position:-256px -256px}.flag.flag-th{background-position:-64px -416px}.flag.flag-bd{background-position:-64px -32px}.flag.flag-ve{background-position:-160px -448px}.flag.flag-st{background-position:-320px -384px}.flag.flag-cz{background-position:-96px -96px}.flag.flag-lk{background-position:0 -256px}.flag.flag-pe{background-position:-320px -320px}.flag.flag-af{background-position:-64px 0}.flag.flag-cu{background-position:0 -96px}.flag.flag-mo{background-position:-64px -288px}.flag.flag-ni{background-position:-64px -320px}.flag.flag-ml{background-position:-448px -256px}.flag.flag-us{background-position:0 -448px}.flag.flag-kg{background-position:-32px -224px}.flag.flag-kr{background-position:-224px -224px}.flag.flag-tg{background-position:-32px -416px}.flag.flag-eg{background-position:-384px -96px}.flag.flag-sy{background-position:-384px -384px}.flag.flag-bo{background-position:-352px -32px}.flag.flag-ke{background-position:0 -224px}.flag.flag-sr{background-position:-288px -384px}.flag.flag-tz{background-position:-384px -416px}.flag.flag-nc{background-position:-448px -288px}.flag.flag-im{background-position:-128px -192px}.flag.flag-kw{background-position:-256px -224px}.flag.flag-re{background-position:-224px -352px}.flag.flag-dz{background-position:-288px -96px}.flag.flag-ch{background-position:-224px -64px}.flag.flag-cy{background-position:-64px -96px}.flag.flag-pr{background-position:-32px -352px}.flag.flag-tv{background-position:-320px -416px}.flag.flag-ph{background-position:-416px -320px}.flag.flag-an{background-position:-224px 0}.flag.flag-ai{background-position:-128px 0}.flag.flag-sb{background-position:-416px -352px}.flag.flag-bj{background-position:-256px -32px}.flag.flag-as{background-position:-320px 0}.flag.flag-sv{background-position:-352px -384px}.flag.flag-no{background-position:-128px -320px}.flag.flag-za{background-position:-384px -448px}.flag.flag-in{background-position:-160px -192px}.flag.flag-py{background-position:-160px -352px}.flag.flag-pk{background-position:-448px -320px}.flag.flag-ee{background-position:-352px -96px}.flag.flag-mn{background-position:-32px -288px}.flag.flag-me{background-position:-320px -256px}.flag.flag-be{background-position:-96px -32px}.flag.flag-fi{background-position:-64px -128px}.flag.flag-lv{background-position:-160px -256px}.flag.flag-eh{background-position:-416px -96px}.flag.flag-co{background-position:-416px -64px}.flag.flag-at{background-position:-352px 0}.flag.flag-hu{background-position:-448px -160px}.flag.flag-ma{background-position:-224px -256px}.flag.flag-gb{background-position:-256px -128px}.flag.flag-tw{background-position:-352px -416px}.flag.flag-br{background-position:-384px -32px}.flag.flag-hr{background-position:-384px -160px}.flag.flag-pa{background-position:-288px -320px}.flag.flag-lb{background-position:-384px -224px}.flag.flag-mw{background-position:-288px -288px}.flag.flag-to{background-position:-224px -416px}.flag.flag-gd{background-position:-288px -128px}.flag.flag-rw{background-position:-352px -352px}.flag.flag-bb{background-position:-32px -32px}.flag.flag-gg{background-position:-384px -128px}.flag.flag-jp{background-position:-448px -192px}.flag.flag-mx{background-position:-320px -288px}.flag.flag-ne{background-position:0 -320px}.flag.flag-ls{background-position:-64px -256px}.flag.flag-sm{background-position:-192px -384px}.flag.flag-om{background-position:-256px -320px}.flag.flag-ao{background-position:-256px 0}.flag.flag-pl{background-position:0 -352px}.flag.flag-dj{background-position:-160px -96px}.flag.flag-gy{background-position:-288px -160px}.flag.flag-sc{background-position:-448px -352px}.flag.flag-ms{background-position:-160px -288px}.flag.flag-kp{background-position:-192px -224px}.flag.flag-ad{background-position:0 0}.flag.flag-mv{background-position:-256px -288px}.flag.flag-pt{background-position:-96px -352px}.flag.flag-kz{background-position:-320px -224px}.flag.flag-tj{background-position:-96px -416px}.flag.flag-gu{background-position:-224px -160px}.flag.flag-ye{background-position:-352px -448px}.flag.flag-my{background-position:-352px -288px}.flag.flag-lt{background-position:-96px -256px}.flag.flag-gl{background-position:0 -160px}.flag.flag-kn{background-position:-160px -224px}.flag.flag-ae{background-position:-32px 0}.flag.flag-gi{background-position:-448px -128px}.flag.flag-bs{background-position:-416px -32px}.flag.flag-hk{background-position:-320px -160px}.flag.flag-cm{background-position:-352px -64px}.flag.flag-cv{background-position:-32px -96px}.flag.flag-tr{background-position:-256px -416px}.flag.flag-au{background-position:-384px 0}.flag.flag-vc{background-position:-128px -448px}.flag.flag-de{background-position:-128px -96px}.flag.flag-mh{background-position:-384px -256px}.flag.flag-ie{background-position:-32px -192px}.flag.flag-sd{background-position:0 -384px}.flag.flag-td{background-position:0 -416px}.flag.flag-jo{background-position:-416px -192px}.flag.flag-fo{background-position:-160px -128px}.flag.flag-lu{background-position:-128px -256px}.flag.flag-np{background-position:-160px -320px}.flag.flag-ug{background-position:-448px -416px}.flag.flag-gr{background-position:-160px -160px}.flag.flag-bw{background-position:0 -64px}.flag.flag-uz{background-position:-64px -448px}.flag.flag-zw{background-position:-448px -448px}.flag.flag-zm{background-position:-416px -448px}.flag.flag-sz{background-position:-416px -384px}.flag.flag-rs{background-position:-288px -352px}.flag.flag-pg{background-position:-384px -320px}.flag.flag-ci{background-position:-256px -64px}.flag.flag-cr{background-position:-448px -64px}.flag.flag-sg{background-position:-64px -384px}.flag.flag-sk{background-position:-128px -384px}.flag.flag-vi{background-position:-224px -448px}.flag.flag-il{background-position:-64px -192px}.flag.flag-gq{background-position:-128px -160px}.flag.flag-is{background-position:-256px -192px}.flag.flag-fj{background-position:-96px -128px}.flag.flag-ki{background-position:-96px -224px}.flag.flag-iq{background-position:-192px -192px}.flag.flag-bz{background-position:-64px -64px}.flag.flag-mz{background-position:-384px -288px}.flag.flag-mu{background-position:-224px -288px}.flag.flag-pf{background-position:-352px -320px}.flag.flag-gw{background-position:-256px -160px}.flag.flag-sa{background-position:-384px -352px}.flag.flag-pw{background-position:-128px -352px}.flag.flag-bg{background-position:-160px -32px}.flag.flag-bf{background-position:-128px -32px}.flag.flag-vu{background-position:-288px -448px}.flag.flag-az{background-position:-448px 0}.flag.flag-er{background-position:-448px -96px}.flag.flag-tn{background-position:-192px -416px}.flag.flag-kh{background-position:-64px -224px}.flag.flag-bn{background-position:-320px -32px}.flag.flag-cl{background-position:-320px -64px}.flag.flag-ca{background-position:-96px -64px}.flag.flag-gt{background-position:-192px -160px}.flag.flag-nz{background-position:-224px -320px}.flag.flag-li{background-position:-448px -224px}.flag.flag-va{background-position:-96px -448px}.flag.flag-dm{background-position:-224px -96px}.flag.flag-ua{background-position:-416px -416px}.flag.flag-tm{background-position:-160px -416px}.flag.flag-qa{background-position:-192px -352px}.flag.flag-id{background-position:0 -192px}.flag.flag-gm{background-position:-32px -160px}.flag.flag-gp{background-position:-96px -160px}.flag.flag-it{background-position:-288px -192px}.flag.flag-ga{background-position:-224px -128px}.flag.flag-mr{background-position:-128px -288px}.flag.flag-fm{background-position:-128px -128px} /* .flag_-0_Shield_NoGroup { background-position: -5px -5px !important; } .flag_-Shield_Canada { background-position: -115px -5px !important; } .flag_-Shield_Clover { background-position: -225px -5px !important; } .flag_-Shield_Diamond { background-position: -335px -5px !important; } .flag_-Shield_Georgia { background-position: -5px -115px !important; } .flag_-Shield_Germany { background-position: -115px -115px !important; } .flag_-Shield_Greece { background-position: -225px -115px !important; } .flag_-Shield_Heart { background-position: -335px -115px !important; } .flag_-Shield_Iran { background-position: -5px -225px !important; } .flag_-Shield_Iraq { background-position: -115px -225px !important; } .flag_-Shield_Israel { background-position: -225px -225px !important; } .flag_-Shield_LeafBlue { background-position: -335px -225px !important; } .flag_-Shield_LeafGreen { background-position: -5px -335px !important; } .flag_-Shield_LeafGreen02 { background-position: -115px -335px !important; } .flag_-Shield_LeafPurple01 { background-position: -225px -335px !important; } .flag_-Shield_LeafPurple02 { background-position: -335px -335px !important; } .flag_-Shield_LeafPurple03 { background-position: -445px -5px !important; } .flag_-Shield_LeafYellow { background-position: -445px -115px !important; } .flag_-Shield_LeafYellow02 { background-position: -445px -225px !important; } .flag_-Shield_Pik { background-position: -445px -335px !important; } .flag_-Shield_Romania { background-position: -5px -445px !important; } .flag_-Shield_Russia { background-position: -115px -445px !important; } .flag_-Shield_Turkey { background-position: -225px -445px !important; } .flag_-Shield_USA { background-position: -335px -445px !important; } */ .team_shield_no_team{ background: url(../images/new/team/flag_no_team.png); } .team_shield_animal_crab_blue { background-position: -0 -0 !important; } .team_shield_animal_crab_red { background-position: -100px -0 !important; } .team_shield_animal_crab_yellow { background-position: -0 -100px !important; } .team_shield_animal_dragonfly_blue { background-position: -100px -100px !important; } .team_shield_animal_dragonfly_red { background-position: -200px -0 !important; } .team_shield_animal_dragonfly_yellow { background-position: -200px -100px !important; } .team_shield_animal_horse_blue { background-position: -0 -200px !important; } .team_shield_animal_eagle1_blue { background-position: -100px -200px !important; } .team_shield_animal_eagle2_yellow { background-position: -200px -200px !important; } .team_shield_animal_eagle1_red { background-position: -300px -0 !important; } .team_shield_animal_horse2_red { background-position: -300px -100px !important; } .team_shield_animal_horse2_yellow { background-position: -300px -200px !important; } .team_shield_animal_lion_blue { background-position: -0 -300px !important; } .team_shield_animal_eagle1_yellow { background-position: -100px -300px !important; } .team_shield_animal_eagle2_red { background-position: -200px -300px !important; } .team_shield_animal_eagle2_blue { background-position: -300px -300px !important; } .team_shield_animal_horse_yellow { background-position: -400px -0 !important; } .team_shield_animal_horse_red { background-position: -400px -100px !important; } .team_shield_animal_horse2_blue { background-position: -400px -200px !important; } .team_shield_animal_lion_yellow { background-position: -400px -300px !important; } .team_shield_animal_lion_red { background-position: -0 -400px !important; } .team_shield_animal_scorpion_blue { background-position: -100px -400px !important; } .team_shield_animal_scorpion_red { background-position: -200px -400px !important; } .team_shield_animal_scorpion_yellow { background-position: -300px -400px !important; } .team_shield_animal_shark_blue { background-position: -400px -400px !important; } .team_shield_animal_shark_red { background-position: -500px -0 !important; } .team_shield_animal_shark_yellow { background-position: -500px -100px !important; } .team_shield_animal_tiger1_blue { background-position: -500px -200px !important; } .team_shield_animal_tiger1_red { background-position: -500px -300px !important; } .team_shield_animal_tiger1_yellow { background-position: -500px -400px !important; } .team_shield_animal_unicorn_blue { background-position: -0 -500px !important; } .team_shield_animal_unicorn_red { background-position: -100px -500px !important; } .team_shield_animal_unicorn_yellow { background-position: -200px -500px !important; } .team_shield_animal_butterfly_blue { background-position: -300px -500px !important; } .team_shield_animal_butterfly_red { background-position: -400px -500px !important; } .team_shield_animal_butterfly_yellow { background-position: -500px -500px !important; } .country-select .flag{width:16px;height:11px;background:url(/images/flags.png)}.country-select .zw{background-position:0 0}.country-select .zm{background-position:-16px 0}.country-select .za{background-position:0 -11px}.country-select .yt{background-position:-16px -11px}.country-select .ye{background-position:-32px 0}.country-select .ws{background-position:-32px -11px}.country-select .wf{background-position:0 -22px}.country-select .vu{background-position:-32px -22px}.country-select .vn{background-position:0 -33px}.country-select .vi{background-position:-16px -33px}.country-select .vg{background-position:-32px -33px}.country-select .ve{background-position:-48px 0}.country-select .vc{background-position:-48px -11px}.country-select .va{background-position:-48px -22px}.country-select .uz{background-position:-48px -33px}.country-select .uy{background-position:0 -44px}.country-select .um,.country-select .us{background-position:-16px -44px}.country-select .ug{background-position:-32px -44px}.country-select .ua{background-position:-48px -44px}.country-select .tz{background-position:-64px 0}.country-select .tw{background-position:-64px -11px}.country-select .tv{background-position:-64px -22px}.country-select .tt{background-position:-64px -33px}.country-select .tr{background-position:-64px -44px}.country-select .to{background-position:0 -55px}.country-select .tn{background-position:-16px -55px}.country-select .tm{background-position:-32px -55px}.country-select .tl{background-position:-48px -55px}.country-select .tk{background-position:-64px -55px}.country-select .tj{background-position:0 -66px}.country-select .th{background-position:-16px -66px}.country-select .tg{background-position:-32px -66px}.country-select .tf{background-position:-48px -66px}.country-select .td{background-position:-64px -66px}.country-select .tc{background-position:-80px 0}.country-select .sz{background-position:-80px -11px}.country-select .sy{background-position:-80px -22px}.country-select .sx{background-position:-80px -33px}.country-select .sv{background-position:-80px -44px}.country-select .st{background-position:-80px -55px}.country-select .ss{background-position:-80px -66px}.country-select .sr{background-position:0 -77px}.country-select .so{background-position:-16px -77px}.country-select .sn{background-position:-32px -77px}.country-select .sm{background-position:-48px -77px}.country-select .sl{background-position:-64px -77px}.country-select .sk{background-position:-80px -77px}.country-select .si{background-position:-96px 0}.country-select .sh{background-position:-96px -11px}.country-select .sg{background-position:-96px -22px}.country-select .se{background-position:-96px -33px}.country-select .sd{background-position:-96px -44px}.country-select .sc{background-position:-96px -66px}.country-select .sb{background-position:-96px -77px}.country-select .sa{background-position:0 -88px}.country-select .rw{background-position:-16px -88px}.country-select .ru{background-position:-32px -88px}.country-select .rs{background-position:-48px -88px}.country-select .ro{background-position:-64px -88px}.country-select .qa{background-position:-80px -88px}.country-select .py{background-position:-96px -88px}.country-select .pw{background-position:0 -99px}.country-select .pt{background-position:-16px -99px}.country-select .ps{background-position:-32px -99px}.country-select .pr{background-position:-48px -99px}.country-select .pn{background-position:-64px -99px}.country-select .pm{background-position:-80px -99px}.country-select .pl{background-position:-96px -99px}.country-select .pk{background-position:-112px 0}.country-select .ph{background-position:-112px -11px}.country-select .pg{background-position:-112px -22px}.country-select .pf{background-position:-112px -33px}.country-select .pe{background-position:-112px -44px}.country-select .pa{background-position:-112px -55px}.country-select .om{background-position:-112px -66px}.country-select .nz{background-position:-112px -77px}.country-select .nu{background-position:-112px -88px}.country-select .nr{background-position:-112px -99px}.country-select .bv,.country-select .no,.country-select .sj{background-position:0 -110px}.country-select .nl{background-position:-16px -110px}.country-select .ni{background-position:-32px -110px}.country-select .ng{background-position:-48px -110px}.country-select .nf{background-position:-64px -110px}.country-select .ne{background-position:-80px -110px}.country-select .nc{background-position:-96px -110px}.country-select .na{background-position:-112px -110px}.country-select .mz{background-position:-128px 0}.country-select .my{background-position:-128px -11px}.country-select .mx{background-position:-128px -22px}.country-select .mw{background-position:-128px -33px}.country-select .mv{background-position:-128px -44px}.country-select .mu{background-position:-128px -55px}.country-select .mt{background-position:-128px -66px}.country-select .ms{background-position:-128px -77px}.country-select .mr{background-position:-128px -88px}.country-select .mq{background-position:-128px -99px}.country-select .mp{background-position:-128px -110px}.country-select .mo{background-position:0 -121px}.country-select .mn{background-position:-16px -121px}.country-select .mm{background-position:-32px -121px}.country-select .ml{background-position:-48px -121px}.country-select .mk{background-position:-64px -121px}.country-select .mh{background-position:-80px -121px}.country-select .mg{background-position:-96px -121px}.country-select .me{background-position:0 -132px;height:12px}.country-select .md{background-position:-112px -121px}.country-select .mc{background-position:-128px -121px}.country-select .ma{background-position:-16px -132px}.country-select .ly{background-position:-32px -132px}.country-select .lv{background-position:-48px -132px}.country-select .lu{background-position:-64px -132px}.country-select .lt{background-position:-80px -132px}.country-select .ls{background-position:-96px -132px}.country-select .lr{background-position:-112px -132px}.country-select .lk{background-position:-128px -132px}.country-select .li{background-position:-144px 0}.country-select .lc{background-position:-144px -11px}.country-select .lb{background-position:-144px -22px}.country-select .la{background-position:-144px -33px}.country-select .kz{background-position:-144px -44px}.country-select .ky{background-position:-144px -55px}.country-select .kw{background-position:-144px -66px}.country-select .kr{background-position:-144px -77px}.country-select .kp{background-position:-144px -88px}.country-select .kn{background-position:-144px -99px}.country-select .km{background-position:-144px -110px}.country-select .ki{background-position:-144px -121px}.country-select .kh{background-position:-144px -132px}.country-select .kg{background-position:0 -144px}.country-select .ke{background-position:-16px -144px}.country-select .jp{background-position:-32px -144px}.country-select .jo{background-position:-48px -144px}.country-select .jm{background-position:-64px -144px}.country-select .je{background-position:-80px -144px}.country-select .it{background-position:-96px -144px}.country-select .is{background-position:-112px -144px}.country-select .ir{background-position:-128px -144px}.country-select .iq{background-position:-144px -144px}.country-select .io{background-position:-160px 0}.country-select .in{background-position:-160px -11px}.country-select .im{background-position:-160px -22px;height:9px}.country-select .il{background-position:-160px -31px}.country-select .ie{background-position:-160px -42px}.country-select .id{background-position:-160px -53px}.country-select .hu{background-position:-160px -64px}.country-select .ht{background-position:-160px -75px}.country-select .hr{background-position:-160px -86px}.country-select .hn{background-position:-160px -97px}.country-select .hk{background-position:-160px -108px}.country-select .gy{background-position:-160px -119px}.country-select .gw{background-position:-160px -130px}.country-select .gu{background-position:-160px -141px}.country-select .gt{background-position:0 -155px}.country-select .gs{background-position:-16px -155px}.country-select .gr{background-position:-32px -155px}.country-select .gq{background-position:-48px -155px}.country-select .gp{background-position:-64px -155px}.country-select .gn{background-position:-80px -155px}.country-select .gm{background-position:-96px -155px}.country-select .gl{background-position:-112px -155px}.country-select .gi{background-position:-128px -155px}.country-select .gh{background-position:-144px -155px}.country-select .gg{background-position:-160px -155px}.country-select .ge{background-position:-176px 0}.country-select .gd{background-position:-176px -11px}.country-select .gb{background-position:-176px -22px}.country-select .ga{background-position:-176px -33px}.country-select .bl,.country-select .fr,.country-select .gf,.country-select .mf,.country-select .re{background-position:-176px -44px}.country-select .fo{background-position:-176px -55px}.country-select .fm{background-position:-176px -66px}.country-select .fk{background-position:-176px -77px}.country-select .fj{background-position:-176px -88px}.country-select .fi{background-position:-176px -99px}.country-select .eu{background-position:-176px -121px}.country-select .et{background-position:-176px -132px}.country-select .es{background-position:-176px -143px}.country-select .er{background-position:-176px -154px}.country-select .eh{background-position:-16px -166px}.country-select .eg{background-position:-32px -166px}.country-select .ee{background-position:-48px -166px}.country-select .ec{background-position:-64px -166px}.country-select .dz{background-position:-80px -166px}.country-select .do{background-position:-96px -166px}.country-select .dm{background-position:-112px -166px}.country-select .dk{background-position:-128px -166px}.country-select .dj{background-position:-144px -166px}.country-select .de{background-position:-160px -166px}.country-select .cz{background-position:-176px -166px}.country-select .cy{background-position:0 -177px}.country-select .cx{background-position:-16px -177px}.country-select .cw{background-position:-32px -177px}.country-select .cv{background-position:-48px -177px}.country-select .cu{background-position:-64px -177px}.country-select .cs{background-position:-80px -177px}.country-select .cr{background-position:-96px -177px}.country-select .co{background-position:-112px -177px}.country-select .cn{background-position:-128px -177px}.country-select .cm{background-position:-144px -177px}.country-select .cl{background-position:-160px -177px}.country-select .ck{background-position:-176px -177px}.country-select .ci{background-position:-192px 0}.country-select .cg{background-position:-192px -11px}.country-select .cf{background-position:-192px -22px}.country-select .cd{background-position:-192px -33px}.country-select .cc{background-position:-192px -44px}.country-select .ca{background-position:-192px -66px}.country-select .bz{background-position:-192px -77px}.country-select .by{background-position:-192px -88px}.country-select .bw{background-position:-192px -99px}.country-select .bt{background-position:-192px -110px}.country-select .bs{background-position:-192px -121px}.country-select .br{background-position:-192px -132px}.country-select .bq{background-position:-192px -143px}.country-select .bo{background-position:-192px -154px}.country-select .bn{background-position:-192px -165px}.country-select .bm{background-position:-192px -176px}.country-select .bj{background-position:0 -188px}.country-select .bi{background-position:-16px -188px}.country-select .bh{background-position:-32px -188px}.country-select .bg{background-position:-48px -188px}.country-select .bf{background-position:-64px -188px}.country-select .be{background-position:-80px -188px}.country-select .bd{background-position:-96px -188px}.country-select .bb{background-position:-112px -188px}.country-select .ba{background-position:-128px -188px}.country-select .az{background-position:-144px -188px}.country-select .ax{background-position:-160px -188px}.country-select .aw{background-position:-176px -188px}.country-select .au,.country-select .hm{background-position:-192px -188px}.country-select .at{background-position:-208px 0}.country-select .as{background-position:-208px -11px}.country-select .ar{background-position:-208px -22px}.country-select .ao{background-position:-208px -33px}.country-select .an{background-position:-208px -44px}.country-select .am{background-position:-208px -55px}.country-select .al{background-position:-208px -66px}.country-select .ai{background-position:-208px -77px}.country-select .ag{background-position:-208px -88px}.country-select .af{background-position:-208px -99px}.country-select .ae{background-position:-208px -110px}.country-select .ad{background-position:-208px -121px}.country-select .np{background-position:-208px -132px}.country-select .ch{background-position:-208px -143px}.country-select{position:relative;display:inline-block}.country-select *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.country-select .hide{display:none}.country-select .v-hide{visibility:hidden}.country-select input{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-left:44px}.country-select .flag-dropdown{position:absolute;top:0;bottom:0}.country-select .flag-dropdown:hover{cursor:pointer}.country-select .flag-dropdown:hover .selected-flag{background-color:#000;background-color:rgba(0,0,0,.05)}.country-select input[disabled]+.flag-dropdown:hover{cursor:default}.country-select input[disabled]+.flag-dropdown:hover .selected-flag{background-color:transparent}.country-select .selected-flag{z-index:1;position:relative;width:38px;height:100%;padding:0 0 0 8px}.country-select .selected-flag .flag{position:absolute;top:50%;margin-top:-5px}.country-select .selected-flag .arrow{position:relative;top:50%;margin-top:-2px;left:20px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.country-select .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.country-select .country-list{list-style:none;position:absolute;z-index:2;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0,0,0,.2);background-color:#fff;border:1px solid #ccc;width:430px;max-height:200px;overflow-y:scroll}.country-select .country-list .flag{display:inline-block}.country-select .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.country-select .country-list .country{line-height:11px;padding:7px 10px}.country-select .country-list .country .dial-code{color:#999}.country-select .country-list .country.highlight{background-color:#000;background-color:rgba(0,0,0,.05)}.country-select .country-list .country-name,.country-select .country-list .flag{margin-right:6px}.country-select.inside .flag-dropdown{padding:1px}.country-select.inside input[type=text],.country-select.inside input[type=tel]{padding-left:44px;margin-left:0}.country-select.outside input[type=text],.country-select.outside input[type=tel]{border:none;margin-left:38px} /*! ======================================================= VERSION 11.0.3 ========================================================= */ /*! ========================================================= * bootstrap-slider.js * * Maintainers: * Kyle Kemp * - Twitter: @seiyria * - Github: seiyria * Rohit Kalkur * - Twitter: @Rovolutionary * - Github: rovolution * * ========================================================= * * bootstrap-slider is released under the MIT License * Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors * * Permission is hereby granted, free of charge, to any person * obtaining a copy of this software and associated documentation * files (the "Software"), to deal in the Software without * restriction, including without limitation the rights to use, * copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following * conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR * OTHER DEALINGS IN THE SOFTWARE. * * ========================================================= */.slider{display:inline-block;vertical-align:middle;position:relative}.slider.slider-horizontal{width:210px;height:20px}.slider.slider-horizontal .slider-track{height:10px;width:100%;margin-top:-5px;top:50%;left:0}.slider.slider-horizontal .slider-selection,.slider.slider-horizontal .slider-track-low,.slider.slider-horizontal .slider-track-high{height:100%;top:0;bottom:0}.slider.slider-horizontal .slider-tick,.slider.slider-horizontal .slider-handle{margin-left:-10px}.slider.slider-horizontal .slider-tick.triangle,.slider.slider-horizontal .slider-handle.triangle{position:relative;top:50%;transform:translateY(-50%);border-width:0 10px 10px 10px;width:0;height:0;border-bottom-color:#036fa5;margin-top:0}.slider.slider-horizontal .slider-tick-container{white-space:nowrap;position:absolute;top:0;left:0;width:100%}.slider.slider-horizontal .slider-tick-label-container{white-space:nowrap;margin-top:20px}.slider.slider-horizontal .slider-tick-label-container .slider-tick-label{display:inline-block;text-align:center}.slider.slider-horizontal.slider-rtl .slider-track{left:initial;right:0}.slider.slider-horizontal.slider-rtl .slider-tick,.slider.slider-horizontal.slider-rtl .slider-handle{margin-left:initial;margin-right:-10px}.slider.slider-horizontal.slider-rtl .slider-tick-container{left:initial;right:0}.slider.slider-vertical{height:210px;width:20px}.slider.slider-vertical .slider-track{width:10px;height:100%;left:25%;top:0}.slider.slider-vertical .slider-selection{width:100%;left:0;top:0;bottom:0}.slider.slider-vertical .slider-track-low,.slider.slider-vertical .slider-track-high{width:100%;left:0;right:0}.slider.slider-vertical .slider-tick,.slider.slider-vertical .slider-handle{margin-top:-10px}.slider.slider-vertical .slider-tick.triangle,.slider.slider-vertical .slider-handle.triangle{border-width:10px 0 10px 10px;width:1px;height:1px;border-left-color:#036fa5;margin-left:0}.slider.slider-vertical .slider-tick-label-container{white-space:nowrap}.slider.slider-vertical .slider-tick-label-container .slider-tick-label{padding-left:4px}.slider.slider-vertical.slider-rtl .slider-track{left:initial;right:25%}.slider.slider-vertical.slider-rtl .slider-selection{left:initial;right:0}.slider.slider-vertical.slider-rtl .slider-tick.triangle,.slider.slider-vertical.slider-rtl .slider-handle.triangle{border-width:10px 10px 10px 0}.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label{padding-left:initial;padding-right:4px}.slider.slider-disabled .slider-handle{background-color:#cfcfcf;background-image:linear-gradient(to bottom, #DFDFDF, #BEBEBE);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFDFDF', endColorstr='#BEBEBE', GradientType=0)}.slider.slider-disabled .slider-track{background-color:#e7e7e7;background-image:linear-gradient(to bottom, #E5E5E5, #E9E9E9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E5E5', endColorstr='#E9E9E9', GradientType=0);cursor:not-allowed}.slider input{display:none}.slider .tooltip-inner{white-space:nowrap;max-width:none}.slider .bs-tooltip-top .tooltip-inner,.slider .bs-tooltip-bottom .tooltip-inner{position:relative;left:-50%}.slider.bs-tooltip-left .tooltip-inner,.slider.bs-tooltip-right .tooltip-inner{position:relative;top:-100%}.slider .tooltip{pointer-events:none}.slider .tooltip.bs-tooltip-top .arrow,.slider .tooltip.bs-tooltip-bottom .arrow{left:-.4rem}.slider .tooltip.bs-tooltip-top{margin-top:-44px}.slider .tooltip.bs-tooltip-bottom{margin-top:2px}.slider .tooltip.bs-tooltip-left,.slider .tooltip.bs-tooltip-right{margin-top:-14px}.slider .tooltip.bs-tooltip-left .arrow,.slider .tooltip.bs-tooltip-right .arrow{top:8px}.slider .hide{display:none}.slider-track{background-color:#f7f7f7;background-image:linear-gradient(to bottom, #f5f5f5, #F9F9F9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#F9F9F9', GradientType=0);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);border-radius:4px;position:absolute;cursor:pointer}.slider-selection{background-color:#f7f7f7;background-image:linear-gradient(to bottom, #F9F9F9, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#f5f5f5', GradientType=0);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-sizing:border-box;border-radius:4px;position:absolute}.slider-selection.tick-slider-selection{background-color:#46c1fe;background-image:linear-gradient(to bottom, #52c5ff, #3abcfd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#52c5ff', endColorstr='#3abcfd', GradientType=0)}.slider-track-low,.slider-track-high{box-sizing:border-box;border-radius:4px;position:absolute;background:transparent}.slider-handle{background-color:#0478b2;background-image:linear-gradient(to bottom, #0480BE, #036fa5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0480BE', endColorstr='#036fa5', GradientType=0);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);position:absolute;top:0;width:20px;height:20px;background-color:#0480BE;border:0px solid transparent}.slider-handle:hover{cursor:pointer}.slider-handle.round{border-radius:20px}.slider-handle.triangle{background:transparent none}.slider-handle.custom{background:transparent none}.slider-handle.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick{background-color:#f7f7f7;background-image:linear-gradient(to bottom, #f5f5f5, #F9F9F9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#F9F9F9', GradientType=0);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-sizing:border-box;position:absolute;cursor:pointer;width:20px;height:20px;filter:none;opacity:0.8;border:0px solid transparent}.slider-tick.round{border-radius:50%}.slider-tick.triangle{background:transparent none}.slider-tick.custom{background:transparent none}.slider-tick.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick.in-selection{background-color:#46c1fe;background-image:linear-gradient(to bottom, #52c5ff, #3abcfd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#52c5ff', endColorstr='#3abcfd', GradientType=0);opacity:1} /*# sourceMappingURL=bootstrap-slider.min.css.map */ .LoadingSpinnerUI .lds-ring { width: 55px !important; height: 55px !important; } .LoadingSpinnerUI .lds-ring div { border: 6px solid #c21a44; border-color: #c21a44 transparent transparent transparent; } .LoadingSpinnerUI .LoadingLabel { color: #c21a44; text-shadow: 1px 1px 2px #00000050; } .BannerTemplate * { font-family: 'Montserrat', sans-serif !important; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; line-height: 1 !important; /*font-family: 'Montserrat', sans-serif;*/ } .w-100 { width: 100% !important; } .b-d-none { width: 100% !important; } .BannerTemplate .BlackHalfTransparent{ background: rgba(0,0,0,0.5); } .BannerTopLevelElement{ position: absolute; top: 0; left: 0; } .BannerTemplate .CustomHook, .BannerTemplate .CustomTextHook { position: absolute; top: 0; left: 0; } .BannerTemplate .IOSAnimationWrapper { transform: translate(0, 0); -webkit-transform: translate(0, 0); position: absolute; top: 0; left: 0; } .BannerTemplateApp .CustomHook, .BannerTemplateApp .CustomTextHook { pointer-events: none; } .BannerTemplate .CustomTextHook { font-size: 24px; font-weight: bold; color: white; } .BannerTemplate .Background { height: 720px; width: 1280px; background-size: cover; position: absolute; } .BannerTemplate .CloseButton { position: absolute; top: 50px; right: 70px; width: 34px; height: 34px; } .BannerTemplate .ButtonShine { overflow: hidden; border-radius: 40px; /*border-radius: 10px;*/ } .InviteFriendsBannerUIAdapter .ShareButton { width: 57px; height: 57px; } .InviteFriendsBannerUIAdapter .ShareBarContainer { position: absolute; top: 500px; width: 500px; /*border-radius: 10px;*/ } .BannerTemplate .ButtonShine:after { animation: BannerButtonShineAnimation 10s ease-in-out infinite; animation-delay: 1s; animation-fill-mode: forwards; content: ""; position: absolute; top: -350%; left: -210%; width: 200%; height: 250%; opacity: 1; transform: rotate(30deg); background: rgba(255, 255, 255, 0); background: linear-gradient( to right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.45) 92%, rgba(255, 255, 255, 0.0) 100% ); } @keyframes BannerButtonShineAnimation{ 13% { opacity: 1; top: -30%; left: -30%; transition-property: left, top, opacity; transition-duration: 0.7s, 0.7s, 0.15s; transition-timing-function: ease; } 100% { opacity: 0; top: -35%; left: -35%; transition-property: left, top, opacity; } } .BannerTemplate .GlowAnimation { animation: GlowAnimation 3s ease-in-out infinite; animation-delay: 1s; } .textglow { font-size: 80px; color: #571537; text-align: center; animation: glow 5s ease-in-out infinite alternate; } @keyframes glow { 0% { /*filter: brightness(1);*/ transform: scale(1); color: #571537; /*text-shadow: 0 0 10px #00000000;*/ } 50% { /*filter: brightness(1.1);*/ transform: scale(1.01); color: #cc0f73; /*text-shadow: 5px 5px 25px rgba(252, 176, 208, 0.31);*/ } 100% { /*filter: brightness(1);*/ transform: scale(1); color: #571537; /*text-shadow: 0 0 10px #00000000;*/ } } /* .BuyButtonText{ position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; font-size: 36px; letter-spacing: 5px; font-weight: 800; background-image: linear-gradient( to right, #462523 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100% ); color:transparent; -webkit-background-clip:text; }*/ @keyframes GlowAnimation { 0% { filter: blur(0); filter: brightness(1); transform: scale(1); /*filter: contrast(100%);*/ /*filter: saturate(100%);*/ /*filter: drop-shadow(4px 4px 20px rgba(0,0,0,0));*/ } 50% { filter: blur(0px); filter: brightness(1.5); transform: scale(1.01); /*filter: drop-shadow(4px 4px 20px #edff2d);*/ /*filter: contrast(300%);*/ /*filter: saturate(200%);*/ } 100% { transform: scale(1); /*filter: drop-shadow(4px 4px 20px rgba(0,0,0,0));*/ filter: blur(0); filter: brightness(1); /*filter: contrast(100%);*/ /*filter: saturate(100%);*/ } } .BannerTemplate.ExternalOutline { /*margin-top: 30px;*/ border: #3699ff 2px dashed; } .BannerTemplate .BannerButtonNoHover { cursor: pointer; } .BannerTemplate .BannerButton { cursor: pointer; } .BannerTemplate .BannerButton:hover { -webkit-filter: brightness(1.1); filter: brightness(1.1); } .BannerTemplate .BannerButton:active .BannerButton.fake-active{ -webkit-filter: brightness(0.8); filter: brightness(0.8); } @supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) { .TextGradientTemplate { display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position:relative; } /* .TextShadowTemplateParent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }*/ .TextShadowTemplate { content: attr(data-text); left: 0; top: 0; position: absolute; z-index: -1; text-shadow: 1px 1px 3px rgba(0,0,0, 0.9); } .BannerShadowParent{ position: relative; z-index: 0; } .ExtraValueGradientShadow:after { content: attr(data-text); left: 0; position: absolute; text-shadow: 1px 1px 3px rgba(0,0,0, 0.9); top: 0; z-index: -1; } .BannerGoldenGradient2{ display: inline-block; /* background: linear-gradient(#F9C045 10%, #FFFFD0 20%, #F9C045); */ background-image: linear-gradient(#FFFFD0, #eebd2e); /* background: linear-gradient(white, white, yellow); */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .ExtraValueGradientShadow:after { content: attr(data-text); left: 0; position: absolute; text-shadow: 1px 1px 3px rgba(0,0,0, 0.9); top: 0; z-index: -1; } .DiscountLightShadow:after { content: attr(data-text); left: 0; position: absolute; text-shadow: -1px 2px 4px rgba(0,0,0,0.75); top: 0; z-index: -1; } .CoinsGoldenGradient{ display: inline-block; /* background-image: linear-gradient( #fed54a 0%, #EEC746 20%, #fffbc5 35%, #fff7bb 50%, #ffec86 65%, #EEC746 80%, #ebb225 100%);*/ background-image: linear-gradient( #f6cf43 0%, #EEC746 20%, #f8eeac 33%, #f8eeac 47%, #fdd676 60%, #fdc63d 75%, #bd7c13 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #ffff5b20; letter-spacing: 1px; position: relative; } .CoinsGoldenGradient:after { content: attr(data-text); left: 0; position: absolute; text-shadow: 1px 4px 0px #bd7c13, 2px 10px 22px rgba(0,0,0, 1); top: 0; z-index: -1; } } @keyframes flipInX_banner { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); opacity: 1; } } .flipInX_banner { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInX_banner; } @keyframes lightSpeedInLeft_banner { from { transform: translate3d(-1000px, 0, 0) skewX(30deg); opacity: 0; } 60% { transform: skewX(-20deg); opacity: 1; } 80% { transform: skewX(5deg); } to { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes lightSpeedInRight_banner { from { transform: translate3d(1000px, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); } to { transform: translate3d(0, 0, 0); opacity: 1; } } .lightSpeedInRight_banner { animation-name: lightSpeedInRight_banner; animation-timing-function: ease-out; } .lightSpeedInLeft_banner { animation-name: lightSpeedInLeft_banner; animation-timing-function: ease-out; } @keyframes lightSpeedOutRight_banner { from { opacity: 1; } to { transform: translate3d(1000px, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOutRight_banner { animation-name: lightSpeedOutRight_banner; animation-timing-function: ease-in; } @keyframes lightSpeedOutLeft_banner { from { opacity: 1; } to { transform: translate3d(-1000px, 0, 0) skewX(-30deg); opacity: 0; } } .lightSpeedOutLeft_banner { animation-name: lightSpeedOutLeft_banner; animation-timing-function: ease-in; } @keyframes flipInY_banner { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); opacity: 1; } to { transform: perspective(400px); opacity: 1; } } .flipInY_banner { backface-visibility: visible !important; animation-name: flipInY_banner; } .SpecialDealTemplate1UIAdapter .Background { height: 720px; width: 1280px; background-size: cover; } .SpecialDealTemplate1UIAdapter .CloseButton { position: absolute; z-index: 1; top: 50px; right: 70px; width: 34px; height: 34px; } .SpecialDealTemplate1UIAdapter .CoinsPanel { position: absolute; /*left: 0;*/ top: 280px; /*width: 100%;*/ width: 650px; height: 150px; /* background-color: #0b2e13d0; */ } .SpecialDealTemplate1UIAdapter .FirstPurchaseBadge { position: absolute; z-index: 2; left: 75px; top: 230px; width: 146px; height: 146px; transform: rotate(-5deg); } .SpecialDealTemplate1UIAdapter .ExtraValueBadge { position: absolute; z-index: 2; left: 1080px; top: 120px; width: 129px; height: 129px; /*transform: rotate(15deg);*/ } .SpecialDealTemplate1UIAdapter .ExtraMultiplierSmallLabel { font-size: 48px !important; } .SpecialDealTemplate1UIAdapter .ValueLabelPercentage { margin-top: 0 !important; font-size: 22px !important; } .SpecialDealTemplate1UIAdapter .ExtraMultiplierExtraSmallLabel { font-size: 28px !important; font-weight: 900 !important; margin-bottom: 1px; } .SpecialDealTemplate1UIAdapter .ExtraMultiplierLabel { margin-top: -5px; margin-top: -5px; font-size: 56px; font-weight: 800; /* font-variant-numeric: tabular-nums; */ } .SpecialDealTemplate1UIAdapter .ValueLabel { margin-top: -3px; font-size: 18px; font-weight: 900; } .SpecialDealTemplate1UIAdapter .Coins { /* margin-left: 55px; */ font-size: 80px; font-weight: 800; margin-bottom: 5px; } .SpecialDealTemplate1UIAdapter .OldCoins { margin-top: -48px; margin-left: 40px; font-size: 48px; font-weight: 600; color: #777777; text-decoration: line-through; } .SpecialDealTemplate1UIAdapter .CoinWithParticle { width: 253px; height: 186px; /* margin-top: 15px; */ margin-left: -120px; } .SpecialDealTemplate1UIAdapter .DiscountBadge { position: absolute; right: -141px; top: -71px; width: 147px; height: 86px; transform: rotate(-26deg); } .SpecialDealTemplate1UIAdapter .DiscountBadgeText { margin-left: 12px; } .SpecialDealTemplate1UIAdapter .PercentageLabel { color: #ffe080; font-size: 36px; font-weight: 700; } .SpecialDealTemplate1UIAdapter .OffLabel { margin-top: 2px; color: #ffe080; font-size: 20px; font-weight: 600; } .SpecialDealTemplate1UIAdapter .OriginalPrice { position: absolute; top: -40px; color: #a66900; font-size: 32px; font-weight: 600; text-decoration: line-through; text-underline-offset: 200px; } .SpecialDealTemplate1UIAdapter .BuyButtonContainer { position: relative; width: 206px; height: 74px; } .SpecialDealTemplate1UIAdapter .BuyButton { position: absolute; /* top: 0; */ width: 100%; height: 100%; } .SpecialDealTemplate1UIAdapter .Body { position: absolute; width: 100%; height: 100%; left: 0; top: 0; /*background-color: #0b2e13d0;*/ } .SpecialDealTemplate1UIAdapter .Footer { position: absolute; top: 600px; /* background-color: #0b2e13d0; */ } .SpecialDealTemplate1UIAdapter .BuyButtonText { color: #571537; font-weight: 800; font-size: 36px; margin-bottom: 6px; } .SpecialDealTemplate1UIAdapter .LimitedOfferBadge { position: absolute; z-index: 2; bottom: 65px; left: 932px; width: 260px; height: 110px; } .SpecialDealTemplate1UIAdapter .LightBadgeText { color: #830a35; font-size: 28px; font-weight: 700; } .SpecialDealTemplate1UIAdapter .DarkBadgeText { color: #f9f084; font-size: 28px; font-weight: 700; } .SpecialDealTemplate1UIAdapter .Countdown{ font-variant-numeric: tabular-nums; } .SpecialDealTemplate2UIAdapter .Background { height: 720px; width: 1280px; background-size: cover; } .SpecialDealTemplate2UIAdapter .CloseButton { position: absolute; top: 84px; right: 105px; width: 34px; height: 34px; } .SpecialDealTemplate2UIAdapter .CoinsPanel { /* position: absolute; */ /* left: 0; */ /* top: 280px; */ /* width: 100%; */ height: 150px; /* background-color: #0b2e13d0; */ } .SpecialDealTemplate2UIAdapter .FirstPurchaseBadge { position: absolute; z-index: 2; left: 1120px; top: 176px; width: 146px; height: 146px; transform: rotate(15deg); } .SpecialDealTemplate2UIAdapter .ExtraValueBadge { position: absolute; z-index: 2; left: 60px; top: 404px; width: 135px; height: 135px; transform: rotate(-20deg); } .SpecialDealTemplate2UIAdapter .ExtraMultiplierSmallLabel { font-size: 42px !important; } .SpecialDealTemplate2UIAdapter .ValueLabelPercentage { margin-top: 0 !important; font-size: 22px !important; } .SpecialDealTemplate2UIAdapter .ExtraMultiplierExtraSmallLabel { font-size: 28px !important; font-weight: 900 !important; } .SpecialDealTemplate2UIAdapter .ExtraMultiplierLabel { margin-top: -5px; font-size: 56px; font-weight: 800; } .SpecialDealTemplate2UIAdapter .ValueLabel { margin-top: -3px; font-size: 18px; font-weight: 900; } .SpecialDealTemplate2UIAdapter .Coins { /* margin-left: 120px; */ font-size: 64px; font-weight: 800; margin-bottom: 5px; } .SpecialDealTemplate2UIAdapter .OldCoins { margin-top: -36px; margin-left: 40px; font-size: 36px; font-weight: 600; color: #777777; text-decoration: line-through; } .SpecialDealTemplate2UIAdapter .CoinWithParticle { width: 253px; height: 186px; margin-top: 15px; margin-left: -120px; /*transform: scale(0.6);*/ } .SpecialDealTemplate2UIAdapter .DiscountBadge { position: absolute; right: -141px; top: -71px; width: 147px; height: 86px; transform: rotate(-26deg); } .SpecialDealTemplate2UIAdapter .DiscountBadgeText { margin-left: 12px; } .SpecialDealTemplate2UIAdapter .PercentageLabel { color: #ffe080; font-size: 36px; font-weight: 700; } .SpecialDealTemplate2UIAdapter .OffLabel { margin-top: 2px; color: #ffe080; font-size: 20px; font-weight: 600; } .SpecialDealTemplate2UIAdapter .OriginalPrice { position: absolute; top: -40px; color: #a66900; font-size: 32px; font-weight: 600; text-decoration: line-through; text-underline-offset: 200px; } .SpecialDealTemplate2UIAdapter .BuyButtonContainer { position: relative; /* overflow: hidden; */ /* width: 206px; */ /* height: 74px; */ } .SpecialDealTemplate2UIAdapter .BuyButton { width: 100%; height: 100%; } .SpecialDealTemplate2UIAdapter .FooterContainer { width: 100%; height: 100%; } .SpecialDealTemplate2UIAdapter .Footer { position: absolute; top: 491px; width: 1120px; height: 185px; /* background-color: #c4107c50; */ } .SpecialDealTemplate2UIAdapter .BuyButtonText { color: #571537; font-weight: 800; font-size: 36px; } .SpecialDealTemplate2UIAdapter .FooterItem { margin-left: 20px; margin-right: 20px; } .SpecialDealTemplate2UIAdapter .LimitedOfferBadge { position: absolute; z-index: 2; top: 231px; width: 482px; height: 75px; } .SpecialDealTemplate2UIAdapter .LimitedOfferBadgeContainer { /* width: 100%; */ } .SpecialDealTemplate2UIAdapter .ClockComponentContainer { margin-left: 10px; } .SpecialDealTemplate2UIAdapter .ForOnlyBadge { color: #ffe080; font-size: 28px; font-weight: 600; font-style: italic; font-family: Serif, sans-serif !important; } .SpecialDealTemplate2UIAdapter .LightBadgeText { color: #830a35; font-size: 28px; font-weight: 700; } .SpecialDealTemplate2UIAdapter .DarkBadgeText { color: #f9f084; font-size: 28px; font-weight: 700; } .SpecialDealTemplate2UIAdapter .Countdown{ font-variant-numeric: tabular-nums; } .WatchAdUIAdapter .WatchAdTemplateButton { position: absolute; top: 0; left: 0; } .WatchAdUIAdapter .PromoText { position: absolute; z-index: 1; top: 0; left: 0; } .AuthConnectUIAdapter .ConnectBar { position: absolute; top: 540px; min-width: 500px; /* width: 100%; */ height: 150px; /* background-color: red; */ min-width: 500px; } .AuthConnectUIAdapter .Profile { z-index: 1; } .AuthConnectUIAdapter .ProfileLevel { position: relative; background-size: cover; width: 95px; height: 95px; left: -10px; top: 50px; } .AuthConnectUIAdapter .ProfileLevelText { color: #67140b; font-size: 18px; font-weight: 800; } .AuthConnectUIAdapter .ProfilePicture { position: relative; top: -9px; left: 0px; width: 170px; height: 170px; border-radius: 85px; background-size: cover; } .AuthConnectUIAdapter .ProfileName { position: relative; top: 15px; color: #fee080; font-size: 28px; font-weight: 600; } .AuthConnectUIAdapter .ProfileCoins { position: relative; top: -55px; font-size: 32px; font-weight: 700; color: #ffe180; } .AuthConnectUIAdapter .ConnectButton { position: relative; } .AuthConnectUIAdapter .ConnectButtonText{ position: absolute; top: 0; left: 0; } .InviteFriendsBannerUIAdapter .BannerProfile { z-index: 1; } .InviteFriendsBannerUIAdapter .BannerProfileLevel { position: relative; background-size: cover; width: 95px; height: 95px; left: -10px; top: 50px; } .InviteFriendsBannerUIAdapter .BannerProfileLevelText { color: #67140b; font-size: 18px; font-weight: 800; } .InviteFriendsBannerUIAdapter .BannerProfilePicture { position: relative; top: -9px; left: 0px; width: 170px; height: 170px; border-radius: 85px; background-size: cover; } .InviteFriendsBannerUIAdapter .BannerProfileName { position: relative; /* top: 15px; */ color: #fee080; font-size: 28px; font-weight: 600; } .InviteFriendsBannerUIAdapter .BannerProfileCoins { position: relative; top: -55px; font-size: 32px; font-weight: 700; color: #ffe180; } .AnimatedClock { width: 98px; height: 98px; background: url(/images/clock/clock.png); background-size: cover; } .AnimatedClockPin { animation: 4s move-clock-pins infinite ease-in-out; width: 60px; height: 60px; transform: rotate(0deg); -webkit-transform: rotate(0deg); background: url(/images/clock/clock_pin.png); background-size: cover; } @keyframes move-clock-pins { 0% {transform: rotate(0deg); -webkit-transform: rotate(0deg)} 5% {transform: rotate(91deg); -webkit-transform: rotate(97deg)} 7% {transform: rotate(80deg); -webkit-transform: rotate(86deg)} 9% {transform: rotate(90deg); -webkit-transform: rotate(90deg)} 25% {transform: rotate(90deg); -webkit-transform: rotate(90deg)} 30% {transform: rotate(180deg); -webkit-transform: rotate(187deg)} 32% {transform: rotate(173deg); -webkit-transform: rotate(176deg)} 34% {transform: rotate(180deg); -webkit-transform: rotate(180deg)} 50% {transform: rotate(180deg); -webkit-transform: rotate(180deg)} 55% {transform: rotate(270deg); -webkit-transform: rotate(277deg)} 57% {transform: rotate(263deg); -webkit-transform: rotate(266deg)} 59% {transform: rotate(270deg); -webkit-transform: rotate(270deg)} 75% {transform: rotate(270deg); -webkit-transform: rotate(270deg)} 80% {transform: rotate(360deg); -webkit-transform: rotate(367deg)} 82% {transform: rotate(353deg); -webkit-transform: rotate(356deg)} 84% {transform: rotate(360deg); -webkit-transform: rotate(360deg)} 100% {transform: rotate(360deg); -webkit-transform: rotate(360deg)} } th.dt-center, td.dt-center { text-align: center; } .country-select { display: block !important; } @media only screen and (max-width: 600px) { .country-select { width: 140px; } .card-header { padding-right: 1.25rem; padding-left: 1.25rem; } } .ToolbarItem{ padding-left: 10px; padding-right: 10px; } .user-display { margin-bottom: 0; } .user-display-bg { height: 160px; width: 100%; max-height: 300px; overflow: hidden; } .UserProfileFlag{ /*width: 44px;*/ /*height: 33px;*/ /*transform: scale(1.2);*/ } .UserProfileTopBar{ width: 100%; height: 50px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 50px; justify-items: stretch; align-items: center; /*background-color: rgba(86,61,124,.85);*/ /*background-color: rgba(150,150,150,.9);*/ /* background-color: rgba(0,0,0,.5); */ } .UserProfileBarButton{ /*background-color: red;*/ /*color: white;*/ text-transform: uppercase; font-size: 1.2rem; border-right: 1px solid rgba(19,29,40,.125); border-left: 1px solid rgba(19,29,40,.125); /*color: #404040 !important;*/ color: #9f9f9f !important; /*justify-self: center;*/ } .UserProfileMuteButton{ justify-self: flex-end; } .UserProfileBlockButton{ justify-self: flex-start; } .UserProfileMenu{ justify-self: flex-end; } .UserProfileMenuIcon{ font-size: 1.923rem;; color: white; } .UserMessageForm{ justify-self: flex-start; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "title . expiration expiration" "message message message message" ; } .UserMessageForm .Title{ grid-area: title; } .UserMessageForm .Expiration{ grid-area: expiration; } .UserMessageForm .Message{ grid-area: message; } .GeneralMessageForm{ justify-self: flex-start; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); grid-template-areas: "title title maxVer" "expiration expiration ." "message message message" ; } .GeneralMessageForm .Title{ grid-area: title; } .GeneralMessageForm .MaxVersion{ grid-area: maxVer; } .GeneralMessageForm .Expiration{ grid-area: expiration; } .GeneralMessageForm .Message{ grid-area: message; } #ProfileTabContent{ width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20px; } .card-profile{ background-color: rgba(200, 200, 200, 0.2); } .HighlightStats { color: #0c0e18; height: 300px; border-radius: 15px; } .HighlightStats.sm { height: 200px !important; } .HighlightStats.md { height: 240px !important; } .HighlightStats .Value{ color: inherit; } .HighlightStats .ValueHover:hover{ color: rgb(0, 112, 201); cursor: pointer; } .HighlightStats .SubValue{ color: #535f64 !important; } .HighlightStats .InfoText{ font-size: 15px; } .HighlightStats a { text-decoration: none; color: inherit; } .HighlightStats .Pie { position: absolute; top: 0px; left: 0; width: 0; height: 200px; /*background-color: #0c5460;*/ } .HighlightStats .Venn { position: absolute; top: 0px; right: 10px; /*width: 250px;*/ /*height: 250px;*/ /*background-color: #0c5460;*/ } .HighlightStats .Line { position: absolute; top: 105px; left: 10px; width: 92%; height: 220px; /*background-color: #0c5460;*/ } .HighlightStats .Delta { font-size: 15px; } .HighlightStats .SubValueMutedSmall { font-size: 13px; margin-top: -8px; } .HighlightStats .DeltaPositive { color: #42b72a; } .HighlightStats .DeltaNegative { color: #fa3e3e; } .HighlightStats a:hover { color: #0c57d3; } .select2-results__options { max-height: 500px !important; } .lds-ring { display: inline-block; position: relative; width: 64px; height: 64px; } .lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 51px; height: 51px; margin: 6px; border: 6px solid #ffff43; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #ffff43 transparent transparent transparent; /* color: #ffff43; */ /* font-weight: bold; */ /* text-shadow: 2px 3px 2px #000000; */ } .lds-ring div:nth-child(1) { animation-delay: -0.45s; } .lds-ring div:nth-child(2) { animation-delay: -0.3s; } .lds-ring div:nth-child(3) { animation-delay: -0.15s; } @keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Animated Sprite Modal - Preview */ .sf-json-preview { max-height: 160px; overflow: auto; background: #f8f9fa; border: 1px solid #eee; border-radius: 4px; padding: 8px; font-size: 11px; line-height: 1.4; margin: 0; white-space: pre-wrap; word-break: break-word; } /*body{ !*font-family: sans-serif !important;*! }*/ #MobileOverviewStats { margin-top: 15px; } @media only screen and (max-width: 600px) { th,td { font-size: 0.8rem !important; padding: 0.5rem 0.5rem !important; } .gutter-b { margin-bottom: 15px; } .MobileHighlights .card { height: 60px !important; } .MobileHighlights h3 { font-size: .75rem !important; text-align: center; } .MobileHighlights .display-3 { font-size: 0.7rem !important; text-align: center; } .MobileHighlights .mt-5,.mt-6 { margin-top: 0.6rem !important; text-align: center; } .MobileHighlights { padding-left: 7.5px; padding-right: 7.5px; } .MobileHighlights .col-4 { padding-left: 4px; padding-right: 4px; } .card.card-custom>.card-body { padding: 0.6rem; } } .blockUI{ z-index: 9011 !important; } .Logo{ /*width: 60%;*/ /*height: 60%;*/ } .country-select-input .flag {background-image: url("/images/flags.png");} .country-select .flag-dropdown { /*left: 0;*/ } .country-select .flag.xx{ width: 0; } /* .country-select .selected-flag .arrow{ right: 20px; } .country-select.inside input[type=text], .country-select.inside input[type=tel] { padding-left: 5px; padding-right: 44px; } .country-select .selected-flag { padding: 0 8px 0 0; } .country-select .country-list { width: 250px; }*/ .btn-margin5 { margin: 5px; } .btn-margin10 { margin: 10px; } .RetentionTable th { font-size: 1rem !important; padding: 3px !important; text-align: center; } .RetentionTable th:nth-child(1) { text-align: start; width: 80px !important; } .RetentionTable th:nth-child(2) { width: 80px !important; } .RetentionTable td { border: 0 !important; font-size: 1rem !important; padding: 3px !important; height: 32px; text-align: center; } /* .RetentionTable td:nth-child(1) { text-align: start; width: 80px !important; } */ .tt-suggestion strong { font-weight: bolder !important; background-color: #ffff00; /*color: red !important;*/ } .tt-menu { max-height: 400px; overflow-y: auto; background-color: red; } .ThumbsUp, .ThumbsDown { margin: 5px; font-size: 20px; } .venntooltip { position: absolute; /*text-align: center;*/ width: 120px; height: 55px; /*background: #ebedf3;*/ background: #fff; /*color: #ddd;*/ /*-webkit-box-shadow: 0px 15px 30px 0px rgba(82, 63, 105, 0.1);*/ box-shadow: 0px 10px 15px 0px rgba(82, 63, 105, 0.15); /*box-shadow: 5px 5px 15px 5px rgba(82, 63, 105, 0.05);*/ padding: 2px; border: 0px; border-radius: 8px; opacity: 1; } .timeline.timeline-6:before { left: 100.5px !important; } .timeline.timeline-6 .timeline-item .timeline-label { width: 100px !important; } table.NoSpacing { border-spacing:0 !important; /* Removes the cell spacing via CSS */ border-collapse: collapse !important; /* Optional - if you don't want to have double border where cells touch */ } table.NoSpacing td { padding: 0 !important; } #FinishResponseWindow .modal-dialog{ overflow-y: initial !important } #FinishResponseWindow .modal-body{ height: 80vh; overflow-y: auto; } .font-weight-500 { font-weight: 500; } .font-weight-600 { font-weight: 600; } .font-weight-700 { font-weight: 700; } .font-weight-800 { font-weight: 800; } .font-weight-900 { font-weight: 900; } .SmallRectNicheBg{ width: 79px; height: 79px; } .ShareWhatsappIcon{ width: 57px; height: 57px; } .ShareSmsIcon{ width: 57px; height: 57px; } .ShareGmailIcon{ width: 57px; height: 57px; } .ShareOtherIcon{ width: 57px; height: 57px; } .ShareFacebookIcon{ width: 57px; height: 57px; } .TeamName { font-size: 1.5rem; font-weight: 600; color: #464457; /*margin-bottom: 10px;*/ } .TeamId { font-weight: 500; color: #b2afc6; } #SaveNewsModal .NewsItem{ width: 640px; /*background: linear-gradient(to bottom, #800000, #ff0000) border-box;*/ box-shadow: 0px 0px 15px 2px #000000; background: linear-gradient(#B60000, #450000); /* border: solid 2px #2f0000; */ /*background-color: #0d5bdd;*/ padding: 15px; margin-bottom: 20px; border-radius: 15px; /* border-width: 30px; border-style: solid; border-image: linear-gradient( to bottom, red, rgba(0, 0, 0, 0) ) 1 100%; */ } #SaveNewsModal .MoreDetailsNewsContent { margin-top: 10px; margin-left: auto; margin-right: auto; width: 665px; } #SaveNewsModal .ImageWithText{ position: relative; } #SaveNewsModal .InlineText{ width: 500px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; font-weight: bold; text-align: center; /* background-color: yellow; */ } #SaveNewsModal .ImagePlaceHolder{ position: absolute; } #SaveNewsModal .NewsItemImage{ /*display: block;*/ /*margin-left: auto;*/ /*margin-right: auto;*/ border-radius: 10px; border: solid 1px #2f0000; width: 100%; height: 350px; max-width:100%; max-height:100%; /*border: solid 2px #800000;*/ } #SaveNewsModal .BottomBarBG{ display: block; position: relative; top: -6px; background: url(../images/new/news/bottom_bar_bg.png); width: 609px; height: 55px; opacity: 0; } #SaveNewsModal .BottomBar{ position: relative; top:0; /* background-color: #0c57d3; */ margin-top: -36px; } #SaveNewsModal .NewsTitleContainer{ margin-left: 25px; /*background-color: rebeccapurple;*/ } #SaveNewsModal .NewsItemTitle{ color: #f9c44f; font-size: 24px; font-weight: bold; } #SaveNewsModal .NewsItemDate{ color: #d3a667; font-size: 18px; margin-top: 5px; } #SaveNewsModal .MoreDetailsNewsContent hr { background-color: #8c0101; color: #8c0101; font-size: 20px; font-weight: bold; height: 2px; border: none; } #SaveNewsModal .MoreDetailsNewsContent h1{ display: block; color: #ffe080; font-size: 40px; margin-top: 0.25em; margin-bottom: 0.25em; margin-left: 0; margin-right: 0; font-weight: bold; } #SaveNewsModal .MoreDetailsNewsContent h2{ display: block; color: #ffd042; font-size: 32px; margin-top: 0.25em; margin-bottom: 0.25em; margin-left: 0; margin-right: 0; font-weight: bold; line-height: 44px; } #SaveNewsModal .MoreDetailsNewsContent h3{ display: block; color: #ffe080; font-size: 28px; margin-top: 0.25em; margin-bottom: 0.25em; margin-left: 0; margin-right: 0; line-height: 45px; font-weight: bold; } #SaveNewsModal .MoreDetailsNewsContent h4 { display: block; color: #ffe080; font-size: 24px; line-height: 35px; /* margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0;*/ font-weight: bold; } #SaveNewsModal .MoreDetailsNewsContent h5 { display: block; font-size: 20px; /* margin-top: 1.67em; margin-bottom: 1.67em;*/ margin-left: 0; margin-right: 0; font-weight: bold; } #SaveNewsModal .MoreDetailsNewsContent h6 { display: block; font-size: 18px; /* margin-top: 2.33em; margin-bottom: 2.33em;*/ margin-left: 0; margin-right: 0; font-weight: bold; } #SaveNewsModal .MoreDetailsNewsContent p, h1, h2, h3, h4, h5, h6, li, a { } #SaveNewsModal .MoreDetailsNewsContent p { color: #dca03d; display: block; font-size: 30px; line-height: 36px; width: 680px; /* margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;*/ /*font-size: 1em;*/ } #SaveNewsModal .MoreDetailsNewsContentWindow { background: linear-gradient(#520000, #820000); border: solid 3px #f3d775; border-radius: 10px; padding-left: 40px; padding-top: 10px; } #SaveNewsModal .MoreDetailsNewsContent { margin-top: 10px; margin-left: auto; margin-right: auto; width: 665px; overflow: scroll; overflow-x: hidden; height: 565px; } #SaveNewsModal .MoreDetailsNewsContent a { color: #f1ca74; font-size: 30px; line-height: 40px; } #SaveNewsModal .MoreDetailsNewsContent iframe{ border-radius: 10px; box-shadow: 0px 0px 25px #400400; margin-bottom: 1em; } #SaveNewsModal .MoreDetailsNewsContent .MoreDetails img { max-width:100%; max-height:100%; border-radius: 10px; box-shadow: 0px 0px 25px #400400; margin-top: 1em; margin-bottom: 1em; } #SaveNewsModal .MoreDetailsNewsContent ul { display: block; color: #dca03d; font-size: 30px; list-style-type: disc; margin-top: 0.6em; margin-bottom: 0.6em; margin-left: 0; margin-right: 0; padding-left: 40px; } #SaveNewsModal .MoreDetailsNewsContent li { display: list-item; margin-bottom: 0.5em; font-size: 30px; color: #dca03d; } @charset "UTF-8";/*!Animate.css - http://daneden.me/animate Licensed under the MIT license -http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s}.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{11.1%{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}100%{-webkit-transform:none;transform:none}}@keyframes jello{11.1%{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}100%{-webkit-transform:none;transform:none}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,60%,75%,90%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} /* UI Builder - All styles under .UIBuilderRoot namespace */ /* ─── Inline SVG Icons ─── */ .UIBuilderRoot .ub-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .UIBuilderRoot .ub-icon-spin { animation: ub-icon-spin 1s linear infinite; } @keyframes ub-icon-spin { to { transform: rotate(360deg); } } .UIBuilderRoot { display: flex; height: calc(100vh - 65px); width: 100%; overflow: hidden; font-family: 'Poppins', sans-serif; background: #f0f0f0; color: #444; } /* ─── Left Panel: Tree ─── */ .UIBuilderRoot .ub-tree-panel { width: 260px; min-width: 260px; background: #fafafa; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; overflow: hidden; } .UIBuilderRoot .ub-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #999; border-bottom: 1px solid #e8e8e8; flex-shrink: 0; background: #fff; } .UIBuilderRoot .ub-tree-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .UIBuilderRoot .ub-tree-container > div { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .UIBuilderRoot .ub-tree-content { flex: 1; overflow-y: auto; padding: 8px 0; } .UIBuilderRoot .ub-tree-node { display: flex; align-items: center; padding: 4px 8px; cursor: pointer; user-select: none; font-size: 12px; height: 28px; transition: background 0.1s; } .UIBuilderRoot .ub-tree-node:hover { background: rgba(0,0,0,0.04); } .UIBuilderRoot .ub-tree-node.selected { background: rgba(62, 151, 255, 0.12); color: #2b7de9; } .UIBuilderRoot .ub-tree-node .ub-tree-caret { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: #999; flex-shrink: 0; transition: transform 0.15s; } .UIBuilderRoot .ub-tree-node .ub-tree-caret.expanded { transform: rotate(90deg); } .UIBuilderRoot .ub-tree-node .ub-tree-icon { width: 16px; height: 16px; margin-right: 6px; display: flex; align-items: center; justify-content: center; color: #999; flex-shrink: 0; } .UIBuilderRoot .ub-tree-node .ub-tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .UIBuilderRoot .ub-tree-node .ub-tree-name-input { flex: 1; background: #fff; border: 1px solid #3e97ff; color: #333; padding: 1px 4px; font-size: 12px; outline: none; border-radius: 2px; } .UIBuilderRoot .ub-tree-node .ub-tree-visibility { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #999; opacity: 0; cursor: pointer; flex-shrink: 0; } .UIBuilderRoot .ub-tree-node:hover .ub-tree-visibility, .UIBuilderRoot .ub-tree-node .ub-tree-visibility.hidden-element { opacity: 1; } .UIBuilderRoot .ub-tree-node .ub-tree-visibility.hidden-element { color: #f0a030; } .UIBuilderRoot .ub-tree-node .ub-tree-visibility.hidden-runtime { color: #e04060; } /* ─── Tree Drag Handle ─── */ .UIBuilderRoot .ub-tree-node .ub-tree-drag-handle { width: 16px; display: flex; align-items: center; justify-content: center; color: #bbb; cursor: grab; flex-shrink: 0; opacity: 0.35; transition: opacity 0.15s, color 0.15s; padding: 0 2px; } .UIBuilderRoot .ub-tree-node:hover .ub-tree-drag-handle { opacity: 0.7; color: #999; } .UIBuilderRoot .ub-tree-node .ub-tree-drag-handle:hover { opacity: 1; color: #555; } .UIBuilderRoot .ub-tree-node .ub-tree-drag-handle:active { cursor: grabbing; color: #3e97ff; } /* ─── Tree Sortable ─── */ .UIBuilderRoot .ub-tree-item-placeholder { height: 2px; background: #3e97ff; margin: 1px 0; border-radius: 1px; position: relative; box-shadow: 0 0 0 1px rgba(62, 151, 255, 0.25); } .UIBuilderRoot .ub-tree-item-placeholder::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.25); } .UIBuilderRoot .ub-tree-item.ui-sortable-helper { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.1); border-radius: 4px; z-index: 100; border-left: 3px solid #3e97ff; opacity: 0.95; } .UIBuilderRoot .ub-tree-children.ui-sortable-hover { background: rgba(62, 151, 255, 0.06); border-left: 2px solid rgba(62, 151, 255, 0.4); border-radius: 0 4px 4px 0; } .UIBuilderRoot .ub-tree-children-empty { min-height: 8px; transition: min-height 0.15s; } .UIBuilderRoot .ub-tree-children-empty.ui-sortable-hover { min-height: 24px; background: rgba(62, 151, 255, 0.08); border: 1px dashed rgba(62, 151, 255, 0.4); border-radius: 4px; margin: 2px 8px; } /* parent node highlight when dragging into a container */ .UIBuilderRoot .ub-tree-node.ub-tree-drop-target { background: rgba(62, 151, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(62, 151, 255, 0.35); border-radius: 4px; } .UIBuilderRoot .ub-tree-node.ub-tree-drop-target .ub-tree-name { color: #2b7de9; font-weight: 600; } /* dim non-dragged items slightly during drag for focus */ .UIBuilderRoot .ub-tree-content.ub-tree-dragging .ub-tree-item:not(.ui-sortable-helper) > .ub-tree-node { opacity: 0.7; } .UIBuilderRoot .ub-tree-content.ub-tree-dragging .ub-tree-node.ub-tree-drop-target { opacity: 1; } /* ─── Center Panel: Canvas ─── */ .UIBuilderRoot .ub-canvas-panel { flex: 1; display: flex; flex-direction: column; position: relative; background: #e0e0e0; overflow: hidden; } .UIBuilderRoot .ub-canvas-container { flex: 1; position: relative; overflow: hidden; background-color: #f8f9fa; background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px); background-size: 20px 20px; } .UIBuilderRoot .ub-canvas-container canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ─── Inline Text Editor ─── */ .UIBuilderRoot .ub-inline-text-editor { position: absolute; z-index: 15; background: rgba(20, 20, 30, 0.75); border: 1.5px solid #3e97ff; border-radius: 3px; padding: 2px 4px; margin: 0; resize: none; outline: none; overflow: hidden; box-sizing: border-box; caret-color: #5cb3ff; white-space: pre-wrap; word-break: break-word; } .UIBuilderRoot .ub-inline-text-editor::selection { background: rgba(62, 151, 255, 0.4); } /* ─── Loading Overlay ─── */ .ub-loading-overlay { position: absolute; inset: 0; background: rgba(224, 224, 224, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10; } .ub-loading-spinner { width: 36px; height: 36px; border: 3px solid #ccc; border-top-color: #3699ff; border-radius: 50%; animation: ub-spin 0.7s linear infinite; } @keyframes ub-spin { to { transform: rotate(360deg); } } /* ─── Canvas Top Bar ─── */ .UIBuilderRoot .ub-canvas-topbar { display: flex; align-items: center; justify-content: center; padding: 8px 12px; gap: 12px; flex-shrink: 0; z-index: 10; } /* ─── Toolbar ─── */ .UIBuilderRoot .ub-toolbar { display: flex; gap: 2px; background: #fff; border: 1px solid #d0d0d0; border-radius: 8px; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .UIBuilderRoot .ub-toolbar-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #666; border-radius: 6px; cursor: pointer; transition: all 0.15s; position: relative; padding: 0; } .UIBuilderRoot .ub-toolbar-btn:hover { background: rgba(0,0,0,0.06); color: #333; } .UIBuilderRoot .ub-toolbar-btn.active { background: #3e97ff; color: #fff; } .UIBuilderRoot .ub-toolbar-btn .ub-shortcut { position: absolute; bottom: -1px; right: 2px; font-size: 7px; color: #aaa; pointer-events: none; } .UIBuilderRoot .ub-toolbar-btn.active .ub-shortcut { color: rgba(255,255,255,0.5); } .UIBuilderRoot .ub-toolbar-sep { width: 1px; background: #d0d0d0; margin: 4px 2px; } /* ─── Toolbar Dropdown (custom elements) ─── */ .UIBuilderRoot .ub-toolbar-dropdown { position: relative; } .UIBuilderRoot .ub-toolbar-more-btn { gap: 1px; } .UIBuilderRoot .ub-toolbar-more-btn .ub-icon:last-child { transform: rotate(90deg); opacity: 0.5; margin-left: -2px; } .UIBuilderRoot .ub-toolbar-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; padding: 4px 0; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 100; } .UIBuilderRoot .ub-toolbar-dropdown.open .ub-toolbar-menu { display: block; } .UIBuilderRoot .ub-toolbar-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: none; background: none; font-size: 12px; color: #444; cursor: pointer; white-space: nowrap; text-align: left; } .UIBuilderRoot .ub-toolbar-menu-item:hover { background: rgba(0,0,0,0.05); color: #222; } .UIBuilderRoot .ub-toolbar-menu-item.active { background: #3e97ff; color: #fff; } .UIBuilderRoot .ub-toolbar-menu-label { flex: 1; } .UIBuilderRoot .ub-toolbar-menu-shortcut { font-size: 10px; color: #999; margin-left: 8px; } .UIBuilderRoot .ub-toolbar-menu-item.active .ub-toolbar-menu-shortcut { color: rgba(255,255,255,0.5); } /* ─── Undo / Redo Controls ─── */ .UIBuilderRoot .ub-undo-redo-controls { display: flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; padding: 4px 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .UIBuilderRoot .ub-undo-redo-controls button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #555; border-radius: 4px; cursor: pointer; transition: background 0.15s, color 0.15s; } .UIBuilderRoot .ub-undo-redo-controls button:hover:not(:disabled) { background: #e8e8e8; color: #222; } .UIBuilderRoot .ub-undo-redo-controls button:disabled { color: #ccc; cursor: default; } /* ─── Zoom Controls ─── */ .UIBuilderRoot .ub-zoom-controls { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #555; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .UIBuilderRoot .ub-zoom-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #666; border-radius: 4px; cursor: pointer; font-size: 12px; } .UIBuilderRoot .ub-zoom-btn:hover { background: rgba(0,0,0,0.06); color: #333; } .UIBuilderRoot .ub-zoom-label { min-width: 36px; text-align: center; font-size: 11px; } /* ─── Preview Controls ─── */ .UIBuilderRoot .ub-preview-controls { display: flex; align-items: center; gap: 4px; } .UIBuilderRoot .ub-preview-btn { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #d0d0d0; border-radius: 6px; background: #fff; color: #333; font-size: 12px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: background 0.15s, color 0.15s; } .UIBuilderRoot .ub-preview-btn:hover { background: #f0f6ff; color: #1a6dff; } .UIBuilderRoot .ub-preview-stop-btn { background: #ff4d4d; color: #fff; border-color: #ff4d4d; } .UIBuilderRoot .ub-preview-stop-btn:hover { background: #e63e3e; color: #fff; } /* ─── Save Panel ─── */ .UIBuilderRoot .ub-save-panel { display: flex; align-items: center; padding: 4px 10px; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); margin-left: auto; } .UIBuilderRoot .ub-auto-save-label { font-size: 12px; font-weight: 500; color: #3f4254; margin-right: 6px; white-space: nowrap; } .UIBuilderRoot .ub-toggle-switch { position: relative; display: inline-block; width: 34px; height: 18px; margin: 0; vertical-align: middle; } .UIBuilderRoot .ub-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .UIBuilderRoot .ub-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.3s; border-radius: 18px; } .UIBuilderRoot .ub-toggle-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .UIBuilderRoot .ub-toggle-switch input:checked + .ub-toggle-slider { background-color: #1bc5bd; } .UIBuilderRoot .ub-toggle-switch input:checked + .ub-toggle-slider:before { transform: translateX(16px); } .UIBuilderRoot .ub-save-separator { width: 1px; height: 20px; background: #e4e6ef; margin: 0 10px; } .UIBuilderRoot .ub-save-panel .SaveBannerBtn { font-weight: 500; font-size: 12px; } .UIBuilderRoot .ub-save-indicator { margin-left: 8px; display: inline-flex; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .UIBuilderRoot .ub-save-indicator .ub-icon { color: #1bc5bd !important; } .UIBuilderRoot .ub-save-indicator.show { opacity: 1; } .UIBuilderRoot .ub-save-indicator.fade-out { opacity: 0; } /* ─── Right Panel: Properties ─── */ .UIBuilderRoot .ub-properties-panel { width: 300px; min-width: 300px; background: #fafafa; border-left: 1px solid #e0e0e0; display: flex; flex-direction: column; overflow: hidden; } .UIBuilderRoot .ub-properties-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .UIBuilderRoot .ub-properties-container > div { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .UIBuilderRoot .ub-properties-content { flex: 1; overflow-y: auto; padding: 0 0 80px; } .UIBuilderRoot .ub-properties-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #b0b0b0; font-size: 12px; gap: 8px; } .UIBuilderRoot .ub-properties-empty .ub-icon { width: 28px; height: 28px; color: #d0d0d0; } /* ─── Element Header ─── */ .UIBuilderRoot .ub-prop-element-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border-bottom: 1px solid #e8e8e8; } .UIBuilderRoot .ub-prop-element-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .UIBuilderRoot .ub-prop-element-icon.type-frame { background: #eef4ff; color: #5b8def; } .UIBuilderRoot .ub-prop-element-icon.type-text { background: #fef4ee; color: #e08740; } .UIBuilderRoot .ub-prop-element-icon.type-image { background: #eefef4; color: #40b080; } .UIBuilderRoot .ub-prop-element-icon.type-group { background: #f4eefe; color: #8b5be0; } .UIBuilderRoot .ub-prop-element-icon.type-animated-sprite { background: #fff4ee; color: #d2691e; } .UIBuilderRoot .ub-prop-element-icon.type-particle { background: #fef0f5; color: #d14d72; } .UIBuilderRoot .ub-prop-element-info { flex: 1; min-width: 0; } .UIBuilderRoot .ub-prop-element-name { width: 100%; height: 24px; background: transparent; border: 1px dashed transparent; border-bottom: 1px dashed #d8d8d8; border-radius: 4px; padding: 0 6px; color: #333; font-size: 13px; font-weight: 600; outline: none; transition: all 0.15s; } .UIBuilderRoot .ub-prop-element-name:hover { background: #f5f5f5; border-color: #e0e0e0; } .UIBuilderRoot .ub-prop-element-name:focus { background: #fff; border-color: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.12); } .UIBuilderRoot .ub-prop-element-type { font-size: 10px; color: #a0a0a0; padding-left: 7px; margin-top: 1px; } /* ─── Element ID Row ─── */ .UIBuilderRoot .ub-prop-element-id-row { display: flex; align-items: center; flex-wrap: wrap; padding: 8px 14px; gap: 4px; border-bottom: 1px solid #e2e2e2; } .UIBuilderRoot .ub-prop-element-id-row .ub-prop-label { width: 66px; min-width: 66px; } .UIBuilderRoot .ub-prop-element-id-row .ub-prop-input { flex: 1; min-width: 0; } .UIBuilderRoot .ub-prop-element-id-row .ub-element-id-error { width: 100%; padding-left: 70px; } /* ─── Collapsible Sections ─── */ .UIBuilderRoot .ub-prop-collapse { border-bottom: 1px solid #e2e2e2; } .UIBuilderRoot .ub-prop-collapse-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: default; user-select: none; } .UIBuilderRoot .ub-prop-collapse-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #777; } .UIBuilderRoot .ub-prop-collapse-toggle { position: relative; display: inline-block; width: 32px; height: 16px; margin: 0; cursor: pointer; flex-shrink: 0; } .UIBuilderRoot .ub-prop-collapse-toggle .ub-collapse-checkbox { opacity: 0; width: 0; height: 0; position: absolute; } .UIBuilderRoot .ub-collapse-toggle-track { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #d8d8d8; border-radius: 16px; transition: background 0.2s; } .UIBuilderRoot .ub-collapse-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: transform 0.2s; } .UIBuilderRoot .ub-collapse-checkbox:checked + .ub-collapse-toggle-track { background: #3e97ff; } .UIBuilderRoot .ub-collapse-checkbox:checked + .ub-collapse-toggle-track .ub-collapse-toggle-thumb { transform: translateX(16px); } .UIBuilderRoot .ub-prop-collapse-body { padding: 0 14px 12px; } .UIBuilderRoot .ub-prop-collapse-body .ub-prop-row { margin-bottom: 5px; } .UIBuilderRoot .ub-prop-collapse-body .ub-grad-stops-container { padding-left: 66px; } /* ─── Property Editors ─── */ .UIBuilderRoot .ub-prop-section { border-bottom: 1px solid #e2e2e2; padding: 12px 14px 14px; } .UIBuilderRoot .ub-prop-section-title { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #777; margin-bottom: 10px; padding-bottom: 0; border-bottom: none; } .UIBuilderRoot .ub-prop-row { display: flex; align-items: center; margin-bottom: 5px; padding: 1px 2px; border-radius: 4px; transition: background 0.1s; } .UIBuilderRoot .ub-prop-row:hover { background: rgba(0, 0, 0, 0.02); } .UIBuilderRoot .ub-prop-section > .ub-prop-row:nth-child(even) { background: rgba(0, 0, 0, 0.012); } .UIBuilderRoot .ub-prop-section > .ub-prop-row:nth-child(even):hover { background: rgba(0, 0, 0, 0.03); } .UIBuilderRoot .ub-prop-label { width: 66px; min-width: 66px; font-size: 11px; color: #808080; user-select: none; } .UIBuilderRoot .ub-prop-input { flex: 1; height: 28px; background: #fff; border: 1px solid #dcdcdc; border-radius: 6px; padding: 0 8px; color: #333; font-size: 11px; outline: none; transition: all 0.15s; } .UIBuilderRoot .ub-prop-input:hover { border-color: #c0c0c0; } .UIBuilderRoot .ub-prop-input:focus { border-color: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.1); } .UIBuilderRoot .ub-prop-reset-btn { width: 26px; height: 26px; margin-left: 4px; border: 1px solid #e0e0e0; border-radius: 6px; background: #f8f8f8; color: #888; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .UIBuilderRoot .ub-prop-reset-btn:hover { background: #eee; color: #333; border-color: #c0c0c0; } .UIBuilderRoot .ub-scale-link-btn { width: 24px; height: 24px; margin: 0 2px; border: 1px solid #e0e0e0; border-radius: 6px; background: #f8f8f8; color: #bbb; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .UIBuilderRoot .ub-scale-link-btn:hover { background: #eee; border-color: #c0c0c0; color: #888; } .UIBuilderRoot .ub-scale-link-btn.active { background: #e8f0fe; border-color: #3e97ff; color: #3e97ff; } .UIBuilderRoot .ub-align-btn-group { display: flex; gap: 2px; } .UIBuilderRoot .ub-align-btn { width: 28px; height: 28px; border: 1px solid #dcdcdc; border-radius: 6px; background: #fff; color: #888; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all 0.15s; } .UIBuilderRoot .ub-align-btn:hover { background: #f0f0f0; border-color: #c0c0c0; color: #333; } .UIBuilderRoot .ub-align-btn.active { background: #e8f0fe; border-color: #3e97ff; color: #3e97ff; } .UIBuilderRoot .ub-prop-input[type="color"] { padding: 3px; cursor: pointer; width: 28px; min-width: 28px; height: 28px; border-radius: 6px; background: #fff; } .UIBuilderRoot .ub-prop-input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .UIBuilderRoot .ub-prop-input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; } .UIBuilderRoot .ub-rgba-input { font-family: 'Courier New', monospace; font-size: 10px; min-width: 0; } .UIBuilderRoot .ub-prop-input-small { width: 60px; min-width: 60px; flex: none; } .UIBuilderRoot .ub-prop-textarea { width: 100%; min-height: 52px; background: #fff; border: 1px solid #dcdcdc; border-radius: 6px; padding: 6px 8px; color: #333; font-size: 11px; outline: none; resize: vertical; font-family: inherit; transition: all 0.15s; } .UIBuilderRoot .ub-prop-textarea:hover { border-color: #c0c0c0; } .UIBuilderRoot .ub-prop-textarea:focus { border-color: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.1); } .UIBuilderRoot .ub-prop-select { flex: 1; height: 28px; background: #fff; border: 1px solid #dcdcdc; border-radius: 6px; padding: 0 6px; color: #333; font-size: 11px; outline: none; cursor: pointer; transition: all 0.15s; } .UIBuilderRoot .ub-prop-select:hover { border-color: #c0c0c0; } .UIBuilderRoot .ub-prop-select:focus { border-color: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.1); } .UIBuilderRoot .ub-prop-checkbox { width: 14px; height: 14px; cursor: pointer; accent-color: #3e97ff; } /* ─── Property Toggle Switch ─── */ .UIBuilderRoot .ub-prop-toggle-row { justify-content: space-between; } .UIBuilderRoot .ub-prop-toggle-label { cursor: pointer; flex: 1; } .UIBuilderRoot .ub-prop-toggle-switch { position: relative; display: inline-block; width: 32px; height: 16px; margin: 0; cursor: pointer; flex-shrink: 0; } .UIBuilderRoot .ub-prop-toggle-switch .ub-prop-toggle-input { opacity: 0; width: 0; height: 0; position: absolute; } .UIBuilderRoot .ub-prop-toggle-track { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #d8d8d8; border-radius: 16px; transition: background 0.2s; } .UIBuilderRoot .ub-prop-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: transform 0.2s; } .UIBuilderRoot .ub-prop-toggle-input:checked + .ub-prop-toggle-track { background: #3e97ff; } .UIBuilderRoot .ub-prop-toggle-input:checked + .ub-prop-toggle-track .ub-prop-toggle-thumb { transform: translateX(16px); } /* ─── Gradient Stops ─── */ .UIBuilderRoot .ub-grad-stops-container { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 4px 0 4px 66px; } .UIBuilderRoot .ub-grad-stop { display: flex; align-items: center; gap: 4px; } .UIBuilderRoot .ub-grad-offset { width: 48px; height: 26px; background: #fff; border: 1px solid #dcdcdc; border-radius: 5px; padding: 0 4px; font-size: 11px; color: #333; outline: none; text-align: center; transition: all 0.15s; } .UIBuilderRoot .ub-grad-offset:hover { border-color: #c0c0c0; } .UIBuilderRoot .ub-grad-offset:focus { border-color: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.1); } .UIBuilderRoot .ub-grad-color { width: 26px; min-width: 26px; height: 26px; padding: 3px; border: 1px solid #dcdcdc; border-radius: 6px; cursor: pointer; background: #fff; } .UIBuilderRoot .ub-grad-color::-webkit-color-swatch-wrapper { padding: 0; } .UIBuilderRoot .ub-grad-color::-webkit-color-swatch { border: none; border-radius: 3px; } .UIBuilderRoot .ub-grad-color-text { flex: 1; height: 26px; background: #fff; border: 1px solid #dcdcdc; border-radius: 5px; padding: 0 6px; font-size: 11px; color: #333; outline: none; transition: all 0.15s; } .UIBuilderRoot .ub-grad-color-text:hover { border-color: #c0c0c0; } .UIBuilderRoot .ub-grad-color-text:focus { border-color: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.1); } .UIBuilderRoot .ub-grad-remove { width: 22px; height: 22px; border: none; background: none; color: #c0c0c0; cursor: pointer; font-size: 14px; padding: 0; line-height: 22px; text-align: center; border-radius: 4px; transition: all 0.15s; } .UIBuilderRoot .ub-grad-remove:hover { background: #fef0f0; color: #e04040; } .UIBuilderRoot .ub-grad-add { align-self: flex-start; border: 1px dashed #d0d0d0; background: none; color: #999; font-size: 10px; font-weight: 500; padding: 3px 12px; border-radius: 5px; cursor: pointer; transition: all 0.15s; } .UIBuilderRoot .ub-grad-add:hover { background: #f0f7ff; border-color: #3e97ff; color: #3e97ff; } /* ─── Shadow Layers ─── */ .UIBuilderRoot .ub-shadow-layers-container { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; } .UIBuilderRoot .ub-shadow-layer { border: 1px solid #e8e8e8; border-radius: 6px; padding: 6px 8px; background: #fafafa; } .UIBuilderRoot .ub-shadow-layer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .UIBuilderRoot .ub-shadow-layer-label { font-size: 10px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.3px; } .UIBuilderRoot .ub-shadow-layer-fields { display: flex; flex-direction: column; gap: 4px; } .UIBuilderRoot .ub-shadow-field { display: flex; align-items: center; gap: 4px; } .UIBuilderRoot .ub-shadow-field-group { display: flex; align-items: center; gap: 6px; } .UIBuilderRoot .ub-shadow-field-label { font-size: 10px; color: #999; min-width: 14px; } .UIBuilderRoot .ub-shadow-color { width: 26px; min-width: 26px; height: 26px; padding: 3px; border: 1px solid #dcdcdc; border-radius: 6px; cursor: pointer; background: #fff; } .UIBuilderRoot .ub-shadow-color::-webkit-color-swatch-wrapper { padding: 0; } .UIBuilderRoot .ub-shadow-color::-webkit-color-swatch { border: none; border-radius: 3px; } .UIBuilderRoot .ub-shadow-color-text { flex: 1; height: 26px; background: #fff; border: 1px solid #dcdcdc; border-radius: 5px; padding: 0 6px; font-size: 11px; color: #333; outline: none; transition: all 0.15s; } .UIBuilderRoot .ub-shadow-color-text:hover { border-color: #c0c0c0; } .UIBuilderRoot .ub-shadow-color-text:focus { border-color: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.1); } .UIBuilderRoot .ub-shadow-rgba-text { flex: 1; height: 26px; background: #fff; border: 1px solid #dcdcdc; border-radius: 5px; padding: 0 6px; font-family: 'Courier New', monospace; font-size: 10px; color: #333; outline: none; transition: all 0.15s; } .UIBuilderRoot .ub-shadow-rgba-text:hover { border-color: #c0c0c0; } .UIBuilderRoot .ub-shadow-rgba-text:focus { border-color: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.1); } .UIBuilderRoot .ub-shadow-alpha-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .UIBuilderRoot .ub-shadow-alpha { flex: 1; height: 4px; -webkit-appearance: none; background: #e0e0e0; border-radius: 2px; outline: none; cursor: pointer; } .UIBuilderRoot .ub-shadow-alpha::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #3e97ff; cursor: pointer; box-shadow: 0 1px 3px rgba(62, 151, 255, 0.3); transition: box-shadow 0.15s; } .UIBuilderRoot .ub-shadow-alpha::-webkit-slider-thumb:hover { box-shadow: 0 1px 6px rgba(62, 151, 255, 0.5); } .UIBuilderRoot .ub-shadow-alpha-value { min-width: 38px; text-align: right; font-size: 11px; color: #666; font-weight: 500; font-variant-numeric: tabular-nums; flex-shrink: 0; } .UIBuilderRoot .ub-shadow-offsetX, .UIBuilderRoot .ub-shadow-offsetY, .UIBuilderRoot .ub-shadow-blur { width: 44px; height: 26px; background: #fff; border: 1px solid #dcdcdc; border-radius: 5px; padding: 0 4px; font-size: 11px; color: #333; outline: none; text-align: center; transition: all 0.15s; } .UIBuilderRoot .ub-shadow-offsetX:hover, .UIBuilderRoot .ub-shadow-offsetY:hover, .UIBuilderRoot .ub-shadow-blur:hover { border-color: #c0c0c0; } .UIBuilderRoot .ub-shadow-offsetX:focus, .UIBuilderRoot .ub-shadow-offsetY:focus, .UIBuilderRoot .ub-shadow-blur:focus { border-color: #3e97ff; box-shadow: 0 0 0 2px rgba(62, 151, 255, 0.1); } .UIBuilderRoot .ub-shadow-remove { width: 22px; height: 22px; border: none; background: none; color: #c0c0c0; cursor: pointer; font-size: 14px; padding: 0; line-height: 22px; text-align: center; border-radius: 4px; transition: all 0.15s; } .UIBuilderRoot .ub-shadow-remove:hover { background: #fef0f0; color: #e04040; } .UIBuilderRoot .ub-shadow-add { align-self: flex-start; border: 1px dashed #d0d0d0; background: none; color: #999; font-size: 10px; font-weight: 500; padding: 3px 12px; border-radius: 5px; cursor: pointer; transition: all 0.15s; } .UIBuilderRoot .ub-shadow-add:hover { background: #f0f7ff; border-color: #3e97ff; color: #3e97ff; } /* ─── Slider ─── */ .UIBuilderRoot .ub-prop-slider { flex: 1; height: 4px; -webkit-appearance: none; background: #e0e0e0; border-radius: 2px; outline: none; cursor: pointer; } .UIBuilderRoot .ub-prop-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #3e97ff; cursor: pointer; box-shadow: 0 1px 3px rgba(62, 151, 255, 0.3); transition: box-shadow 0.15s; } .UIBuilderRoot .ub-prop-slider::-webkit-slider-thumb:hover { box-shadow: 0 1px 6px rgba(62, 151, 255, 0.5); } .UIBuilderRoot .ub-prop-slider-value { min-width: 38px; text-align: right; font-size: 11px; color: #666; font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 6px; flex-shrink: 0; } .UIBuilderRoot .ub-prop-inline-group { display: flex; gap: 6px; flex: 1; } .UIBuilderRoot .ub-prop-inline-item { display: flex; align-items: center; gap: 4px; flex: 1 1 0%; min-width: 0; } .UIBuilderRoot .ub-prop-inline-item .ub-prop-input { width: 0; min-width: 0; } .UIBuilderRoot .ub-prop-inline-label { font-size: 10px; color: #999; min-width: 14px; font-weight: 500; flex-shrink: 0; } /* ─── Image Drop Zone ─── */ .UIBuilderRoot .ub-image-dropzone { width: 100%; height: 80px; border: 2px dashed #dcdcdc; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; font-size: 11px; color: #b0b0b0; margin-top: 6px; overflow: hidden; background: #fff; } .UIBuilderRoot .ub-image-dropzone:hover { border-color: #c0c0c0; background: #f8f8f8; } .UIBuilderRoot .ub-image-dropzone.dragover { border-color: #3e97ff; background: #f0f7ff; } .UIBuilderRoot .ub-image-dropzone img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ─── Context Menu ─── */ .UIBuilderRoot .ub-context-menu { position: fixed; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 4px; min-width: 180px; z-index: 1000; box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08); } .UIBuilderRoot .ub-context-menu-item { padding: 6px 12px; font-size: 12px; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: space-between; border-radius: 5px; transition: background 0.1s; } .UIBuilderRoot .ub-context-menu-item:hover { background: #7c3aed; color: #fff; } .UIBuilderRoot .ub-context-menu-item .ub-shortcut-hint { font-size: 10px; color: #aaa; margin-left: 24px; font-weight: 400; } .UIBuilderRoot .ub-context-menu-item:hover .ub-shortcut-hint { color: rgba(255,255,255,0.65); } .UIBuilderRoot .ub-context-menu-sep { height: 1px; background: #eee; margin: 4px 8px; } /* ─── Dimension Prompt Modal ─── */ .UIBuilderRoot .ub-dimension-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 2000; } .UIBuilderRoot .ub-dimension-modal { background: #fff; border: 1px solid #d0d0d0; border-radius: 12px; padding: 24px; width: 320px; box-shadow: 0 16px 48px rgba(0,0,0,0.2); } .UIBuilderRoot .ub-dimension-modal h3 { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: #333; } .UIBuilderRoot .ub-dimension-modal .ub-dim-row { display: flex; align-items: center; margin-bottom: 12px; } .UIBuilderRoot .ub-dimension-modal .ub-dim-label { width: 60px; font-size: 12px; color: #666; } .UIBuilderRoot .ub-dimension-modal .ub-dim-input { flex: 1; height: 34px; background: #f5f5f5; border: 1px solid #d0d0d0; border-radius: 6px; padding: 0 12px; color: #333; font-size: 13px; outline: none; } .UIBuilderRoot .ub-dimension-modal .ub-dim-input:focus { border-color: #3e97ff; } .UIBuilderRoot .ub-dimension-modal .ub-dim-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .UIBuilderRoot .ub-dimension-modal .ub-dim-btn { padding: 8px 20px; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; } .UIBuilderRoot .ub-dimension-modal .ub-dim-btn-primary { background: #3e97ff; color: #fff; } .UIBuilderRoot .ub-dimension-modal .ub-dim-btn-primary:hover { background: #5aa8ff; } /* ─── Scrollbar Styles ─── */ .UIBuilderRoot ::-webkit-scrollbar { width: 6px; } .UIBuilderRoot ::-webkit-scrollbar-track { background: transparent; } .UIBuilderRoot ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } .UIBuilderRoot ::-webkit-scrollbar-thumb:hover { background: #aaa; } /* ─── Animation Section (Properties Panel) ─── */ .UIBuilderRoot .ub-anim-section { margin-top: 0; } .UIBuilderRoot .ub-anim-collapse-header { cursor: pointer; } .UIBuilderRoot .ub-anim-collapse-chevron { display: inline-flex; align-items: center; transition: transform 0.15s ease; margin-right: 2px; } .UIBuilderRoot .ub-anim-collapse-chevron.ub-anim-chevron-open { transform: rotate(90deg); } .UIBuilderRoot .ub-anim-active-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e88b25; margin-left: 5px; vertical-align: middle; animation: ub-anim-dot-pulse 2s ease-in-out infinite; } .UIBuilderRoot .ub-anim-active-dot.ub-anim-dot-hidden { display: none; } @keyframes ub-anim-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .UIBuilderRoot .ub-anim-header-actions { display: flex; gap: 4px; } .UIBuilderRoot .ub-anim-preview-btn, .UIBuilderRoot .ub-anim-edit-btn { width: 28px; height: 28px; border: 1px solid #d0d0d0; border-radius: 6px; background: #fff; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all 0.15s; } .UIBuilderRoot .ub-anim-preview-btn:hover, .UIBuilderRoot .ub-anim-edit-btn:hover { background: #f0f0f0; color: #333; border-color: #bbb; } .UIBuilderRoot .ub-anim-tree-container { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; max-height: 200px; overflow-y: auto; cursor: pointer; } .UIBuilderRoot .ub-anim-tree-container:hover { border-color: #c0c0c0; } .UIBuilderRoot .ub-anim-empty { padding: 12px; text-align: center; font-size: 11px; color: #bbb; } .UIBuilderRoot .ub-anim-tree-node { display: flex; align-items: center; padding: 4px 6px; font-size: 11px; color: #555; cursor: pointer; border-bottom: 1px solid #f0f0f0; position: relative; } .UIBuilderRoot .ub-anim-tree-node:last-child { border-bottom: none; } .UIBuilderRoot .ub-anim-node-icon { width: 18px; text-align: center; font-size: 10px; margin-right: 4px; opacity: 0.7; } .UIBuilderRoot .ub-anim-node-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .UIBuilderRoot .ub-anim-node-duration { font-size: 9px; color: #999; background: #f0f0f0; padding: 1px 5px; border-radius: 3px; margin-left: 4px; white-space: nowrap; } /* ─── Inline Checkbox Label ─── */ .UIBuilderRoot .ub-anim-checkbox-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #666; cursor: pointer; user-select: none; } .UIBuilderRoot .ub-anim-checkbox-label input[type="checkbox"] { accent-color: #3e97ff; cursor: pointer; } /* ─── Animation Editor Modal ─── */ .UIBuilderRoot .ub-anim-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 2000; } .UIBuilderRoot .ub-anim-modal { background: #fff; border: 1px solid #d0d0d0; border-radius: 12px; width: 1200px; height: 800px; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,0.2); } .UIBuilderRoot .ub-anim-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid #e8e8e8; cursor: grab; user-select: none; } .UIBuilderRoot .ub-anim-modal-header:active { cursor: grabbing; } .UIBuilderRoot .ub-anim-modal.ub-anim-modal-dragged { position: fixed; margin: 0; } .UIBuilderRoot .ub-anim-modal-title { font-size: 16px; font-weight: 600; color: #333; } .UIBuilderRoot .ub-anim-modal-title .ub-icon { margin-right: 6px; color: #888; } .UIBuilderRoot .ub-anim-modal-header-actions { display: flex; align-items: center; gap: 6px; } .UIBuilderRoot .ub-anim-modal-close-btn { width: 32px; height: 32px; border: none; background: none; color: #999; cursor: pointer; font-size: 20px; line-height: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .UIBuilderRoot .ub-anim-modal-close-btn:hover { background: #f0f0f0; color: #333; } .UIBuilderRoot .ub-anim-modal-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } .UIBuilderRoot .ub-anim-modal-left { width: 55%; display: flex; flex-direction: column; border-right: 1px solid #e8e8e8; padding: 18px; } .UIBuilderRoot .ub-anim-modal-right { width: 45%; padding: 18px; overflow-y: auto; } /* modal tree */ .UIBuilderRoot .ub-anim-modal-tree-container { flex: 1; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 6px; overflow-y: auto; margin-bottom: 10px; min-height: 0; } .UIBuilderRoot .ub-anim-modal-tree-container .ub-anim-tree-node { transition: background 0.1s; font-size: 13px; padding: 5px 8px; } .UIBuilderRoot .ub-anim-modal-tree-container .ub-anim-node-icon { font-size: 12px; } .UIBuilderRoot .ub-anim-modal-tree-container .ub-anim-tree-node:hover { background: #f0f4ff; } .UIBuilderRoot .ub-anim-modal-tree-container .ub-anim-tree-node.selected { background: #e0ecff; color: #2a6cd6; } /* drag handle */ .UIBuilderRoot .ub-anim-drag-handle { width: 14px; text-align: center; font-size: 8px; color: #ccc; cursor: grab; margin-right: 2px; flex-shrink: 0; } .UIBuilderRoot .ub-anim-drag-handle:hover { color: #888; } /* nested children container */ .UIBuilderRoot .ub-anim-tree-children { min-height: 22px; padding-left: 6px; border-left: 1px dashed transparent; transition: border-color 0.15s, background 0.15s; } .UIBuilderRoot .ub-anim-tree-children:empty::before { content: 'drop here'; display: block; padding: 3px 8px; font-size: 9px; color: #ccc; font-style: italic; } .UIBuilderRoot .ub-anim-tree-children.ui-sortable-hover { border-left-color: #3e97ff; background: rgba(62, 151, 255, 0.04); } /* sortable placeholder */ .UIBuilderRoot .ub-anim-tree-placeholder { height: 2px; background: #3e97ff; margin: 2px 8px; border-radius: 1px; } /* drag helper (item being dragged) */ .UIBuilderRoot .ub-anim-tree-item.ui-sortable-helper { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 4px; opacity: 0.9; z-index: 100; } .UIBuilderRoot .ub-anim-tree-item.ui-sortable-helper .ub-anim-drag-handle { cursor: grabbing; } /* remove button (modal only) */ .UIBuilderRoot .ub-anim-node-remove { width: 18px; height: 18px; border: none; background: none; color: #ccc; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; margin-left: 2px; border-radius: 3px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; } .UIBuilderRoot .ub-anim-tree-node:hover .ub-anim-node-remove { opacity: 1; } .UIBuilderRoot .ub-anim-node-remove:hover { color: #e55; background: rgba(255,0,0,0.06); } /* add bar */ .UIBuilderRoot .ub-anim-add-bar { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; max-height: 280px; flex-shrink: 0; padding: 10px; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 6px; } .UIBuilderRoot .ub-anim-add-search { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-shrink: 0; } .UIBuilderRoot .ub-anim-add-search input { flex: 1; height: 28px; border: 1px solid #dcdcdc; border-radius: 5px; padding: 0 8px 0 28px; font-size: 12px; color: #333; background: #fff; outline: none; transition: border-color 0.15s; } .UIBuilderRoot .ub-anim-add-search input:focus { border-color: #3e97ff; } .UIBuilderRoot .ub-anim-add-search input::placeholder { color: #bbb; } .UIBuilderRoot .ub-anim-add-search-icon { position: absolute; left: 8px; font-size: 11px; color: #bbb; pointer-events: none; } .UIBuilderRoot .ub-anim-add-search-wrap { position: relative; flex: 1; display: flex; align-items: center; } .UIBuilderRoot .ub-anim-add-group.ub-anim-hidden { display: none; } .UIBuilderRoot .ub-anim-add-btn.ub-anim-hidden { display: none; } .UIBuilderRoot .ub-anim-add-group { display: flex; align-items: flex-start; gap: 6px; } .UIBuilderRoot .ub-anim-add-group-label { width: 74px; flex-shrink: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #aaa; padding-top: 5px; line-height: 1; } .UIBuilderRoot .ub-anim-add-group-items { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; min-width: 0; } .UIBuilderRoot .ub-anim-add-btn { padding: 5px 9px; border: 1px solid #e2e2e2; border-radius: 4px; background: #fff; color: #666; font-size: 12px; cursor: pointer; transition: all 0.15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .UIBuilderRoot .ub-anim-add-btn i { font-size: 11px; opacity: 0.6; } .UIBuilderRoot .ub-anim-add-btn:hover { border-color: #3e97ff; color: #3e97ff; background: #f5f9ff; } .UIBuilderRoot .ub-anim-add-btn:hover i { opacity: 1; } .UIBuilderRoot .ub-anim-preset-btn { border-color: #c8d8f0; color: #4a7bbf; background: #f4f8ff; } .UIBuilderRoot .ub-anim-preset-btn:hover { border-color: #3e97ff; color: #3e97ff; background: #e0edff; } .UIBuilderRoot .ub-anim-group-btn { border-color: #d4e0d4; color: #5a8a5a; background: #f5faf5; } .UIBuilderRoot .ub-anim-group-btn:hover { border-color: #4caf50; color: #4caf50; background: #edf7ed; } /* node properties (modal right panel) */ .UIBuilderRoot .ub-anim-node-props { padding: 0; } .UIBuilderRoot .ub-anim-node-props .ub-prop-row { margin-bottom: 10px; } .UIBuilderRoot .ub-anim-node-props .ub-prop-label { font-size: 13px; width: 76px; min-width: 76px; } .UIBuilderRoot .ub-anim-node-props .ub-prop-input { font-size: 13px; height: 30px; } .UIBuilderRoot .ub-anim-props-title { font-size: 14px; font-weight: 600; color: #555; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e8e8e8; } .UIBuilderRoot .ub-anim-props-empty { text-align: center; font-size: 13px; color: #bbb; padding: 24px 12px; } /* ─── Keyframe Editor ─── */ .UIBuilderRoot .ub-anim-kf-list { margin-top: 8px; margin-bottom: 10px; padding: 8px; background: #fafafa; border: 1px solid #e8e8e8; border-radius: 6px; } .UIBuilderRoot .ub-anim-kf-label { font-size: 10px; font-weight: 600; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; } .UIBuilderRoot .ub-anim-kf-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } .UIBuilderRoot .ub-anim-kf-time { width: 44px; height: 26px; border: 1px solid #d8d8d8; border-radius: 4px; padding: 0 4px; font-size: 11px; color: #555; text-align: right; background: #fff; outline: none; } .UIBuilderRoot .ub-anim-kf-time:focus { border-color: #3e97ff; } .UIBuilderRoot .ub-anim-kf-pct { font-size: 9px; color: #aaa; flex-shrink: 0; } .UIBuilderRoot .ub-anim-kf-value { flex: 1; height: 26px; border: 1px solid #d8d8d8; border-radius: 4px; padding: 0 6px; font-size: 11px; color: #555; background: #fff; outline: none; min-width: 0; } .UIBuilderRoot .ub-anim-kf-value:focus { border-color: #3e97ff; } .UIBuilderRoot .ub-anim-kf-remove { width: 20px; height: 20px; border: none; background: none; color: #ccc; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .UIBuilderRoot .ub-anim-kf-remove:hover { color: #e55; background: rgba(255,0,0,0.06); } .UIBuilderRoot .ub-anim-kf-add { width: 100%; padding: 3px 0; margin-top: 4px; border: 1px dashed #d0d0d0; border-radius: 4px; background: none; color: #999; font-size: 10px; cursor: pointer; transition: all 0.15s; } .UIBuilderRoot .ub-anim-kf-add:hover { border-color: #3e97ff; color: #3e97ff; } .UIBuilderRoot .ub-anim-repeat-inf-label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #ccc; white-space: nowrap; cursor: pointer; } .UIBuilderRoot .ub-anim-repeat-input:disabled { opacity: 0.4; } .UIBuilderRoot .ub-anim-uniform-label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #888; white-space: nowrap; cursor: pointer; } /* ─── Panel Header Import Button ─── */ .UIBuilderRoot .ub-import-btn, .UIBuilderRoot .ub-share-btn, .UIBuilderRoot .ub-clear-btn { background: none; border: 1px solid transparent; border-radius: 4px; color: #aaa; cursor: pointer; padding: 2px 5px; line-height: 1; display: inline-flex; align-items: center; transition: color 0.15s, border-color 0.15s; } .UIBuilderRoot .ub-import-btn:hover, .UIBuilderRoot .ub-share-btn:hover, .UIBuilderRoot .ub-clear-btn:hover { color: #555; border-color: #ddd; } .UIBuilderRoot .ub-clear-btn:hover { color: #e04060; border-color: #e04060; } /* ─── Property Section Actions ─── */ .UIBuilderRoot .ub-prop-section-actions { display: flex; gap: 2px; } .UIBuilderRoot .ub-prop-section-actions .ub-share-btn, .UIBuilderRoot .ub-prop-section-actions .ub-import-btn, .UIBuilderRoot .ub-prop-section-actions .ub-clear-btn { padding: 1px 4px; } /* ─── Share Component Modal ─── */ .UIBuilderRoot .ub-share-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 2100; } .UIBuilderRoot .ub-share-modal { background: #fff; border-radius: 12px; width: 400px; box-shadow: 0 16px 48px rgba(0,0,0,0.2); display: flex; flex-direction: column; } .UIBuilderRoot .ub-share-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; } .UIBuilderRoot .ub-share-modal-title { font-size: 14px; font-weight: 600; color: #333; } .UIBuilderRoot .ub-share-modal-title .ub-icon { margin-right: 8px; color: #7c3aed; } .UIBuilderRoot .ub-share-modal-close-btn { background: none; border: none; font-size: 22px; color: #999; cursor: pointer; line-height: 1; } .UIBuilderRoot .ub-share-modal-close-btn:hover { color: #333; } .UIBuilderRoot .ub-share-modal-body { padding: 20px; } .UIBuilderRoot .ub-share-field { display: flex; flex-direction: column; gap: 6px; } .UIBuilderRoot .ub-share-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #888; } .UIBuilderRoot .ub-share-name-input { width: 100%; padding: 8px 12px; font-size: 13px; border: 1px solid #ddd; border-radius: 6px; outline: none; box-sizing: border-box; } .UIBuilderRoot .ub-share-name-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.15); } .UIBuilderRoot .ub-share-name-input.ub-input-error { border-color: #e53e3e; } .UIBuilderRoot .ub-share-category-input { width: 100%; padding: 8px 12px; font-size: 13px; border: 1px solid #ddd; border-radius: 6px; outline: none; box-sizing: border-box; } .UIBuilderRoot .ub-share-category-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.15); } .UIBuilderRoot .ub-share-tags-container { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #ddd; border-radius: 6px; min-height: 36px; cursor: text; box-sizing: border-box; } .UIBuilderRoot .ub-share-tags-container:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.15); } .UIBuilderRoot .ub-share-tag { display: inline-flex; align-items: center; gap: 4px; background: #f0ebff; color: #7c3aed; font-size: 12px; padding: 2px 8px; border-radius: 12px; white-space: nowrap; } .UIBuilderRoot .ub-share-tag-remove { cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.6; } .UIBuilderRoot .ub-share-tag-remove:hover { opacity: 1; } .UIBuilderRoot .ub-share-tags-input { border: none; outline: none; font-size: 13px; flex: 1; min-width: 80px; padding: 4px 0; background: transparent; } .UIBuilderRoot .ub-share-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #eee; } .UIBuilderRoot .ub-share-cancel-btn { background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px; padding: 7px 16px; font-size: 12px; cursor: pointer; color: #666; } .UIBuilderRoot .ub-share-cancel-btn:hover { background: #eee; } .UIBuilderRoot .ub-share-save-btn { background: #7c3aed; border: none; border-radius: 6px; padding: 7px 16px; font-size: 12px; cursor: pointer; color: #fff; font-weight: 600; } .UIBuilderRoot .ub-share-save-btn:hover { background: #6d28d9; } .UIBuilderRoot .ub-share-save-btn .ub-icon { margin-right: 4px; } /* ─── Component Library Modal ─── */ .UIBuilderRoot .ub-lib-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 2100; } .ub-lib-swal-container { z-index: 2200 !important; } .swal-no-scroll { overflow: visible !important; } .UIBuilderRoot .ub-lib-modal { background: #fff; border-radius: 12px; width: 90vw; max-width: 1200px; height: 80vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,0.2); } .UIBuilderRoot .ub-lib-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; } .UIBuilderRoot .ub-lib-modal-title { font-size: 14px; font-weight: 600; color: #333; } .UIBuilderRoot .ub-lib-modal-title .ub-icon { margin-right: 8px; color: #7c3aed; } .UIBuilderRoot .ub-lib-modal-close-btn { background: none; border: none; font-size: 22px; color: #999; cursor: pointer; line-height: 1; } .UIBuilderRoot .ub-lib-modal-close-btn:hover { color: #333; } .UIBuilderRoot .ub-lib-modal-body { display: flex; flex: 1; overflow: hidden; } .UIBuilderRoot .ub-lib-sidebar { width: 160px; border-right: 1px solid #eee; padding: 12px 0; flex-shrink: 0; overflow-y: auto; } .UIBuilderRoot .ub-lib-tab { padding: 8px 16px; font-size: 12px; color: #888; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s; } .UIBuilderRoot .ub-lib-tab:hover { background: #f5f5f5; color: #555; } .UIBuilderRoot .ub-lib-tab.active { background: #f0ebff; color: #7c3aed; font-weight: 600; } .UIBuilderRoot .ub-lib-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .UIBuilderRoot .ub-lib-search-bar { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; } .UIBuilderRoot .ub-lib-search-icon { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: #bbb; display: flex; align-items: center; } .UIBuilderRoot .ub-lib-search-input { width: 100%; padding: 8px 12px 8px 32px; font-size: 12px; border: 1px solid #ddd; border-radius: 6px; outline: none; box-sizing: border-box; } .UIBuilderRoot .ub-lib-search-input:focus { border-color: #7c3aed; } .UIBuilderRoot .ub-lib-grid { flex: 1; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-content: start; } .UIBuilderRoot .ub-lib-loading, .UIBuilderRoot .ub-lib-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: #bbb; font-size: 13px; } .UIBuilderRoot .ub-lib-loading .ub-icon, .UIBuilderRoot .ub-lib-empty .ub-icon { display: block; margin-bottom: 8px; } .UIBuilderRoot .ub-lib-card { border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; display: flex; flex-direction: column; transition: box-shadow 0.15s, border-color 0.15s; } .UIBuilderRoot .ub-lib-card:hover { border-color: #d0d0d0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .UIBuilderRoot .ub-lib-card-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 0; } .UIBuilderRoot .ub-lib-card-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; } .UIBuilderRoot .ub-lib-type-component { background: #e8e0ff; color: #7c3aed; } .UIBuilderRoot .ub-lib-type-text { background: #e0f0ff; color: #2563eb; } .UIBuilderRoot .ub-lib-type-image { background: #fef3c7; color: #d97706; } .UIBuilderRoot .ub-lib-type-animation { background: #d1fae5; color: #059669; } .UIBuilderRoot .ub-lib-card-actions { display: flex; gap: 4px; } .UIBuilderRoot .ub-lib-card-actions button { background: none; border: none; color: #ccc; cursor: pointer; padding: 2px 4px; border-radius: 3px; display: flex; align-items: center; transition: color 0.15s, background 0.15s; } .UIBuilderRoot .ub-lib-card-delete-btn:hover { color: #e53e3e; background: #fee; } .UIBuilderRoot .ub-lib-card-optimized-badge { color: #27ae60; display: flex; align-items: center; padding: 2px 4px; } .UIBuilderRoot .ub-lib-card-optimize-btn:hover { color: #1abc9c; background: #eafaf6; } .UIBuilderRoot .ub-lib-card-duplicate-btn:hover, .UIBuilderRoot .ub-lib-card-rename-btn:hover, .UIBuilderRoot .ub-lib-card-download-btn:hover { color: #555; background: #f0f0f0; } .UIBuilderRoot .ub-lib-card-body { padding: 12px 10px; text-align: center; } .UIBuilderRoot .ub-lib-card-icon { color: #ccc; margin-bottom: 8px; display: flex; justify-content: center; } .UIBuilderRoot .ub-lib-card-preview { height: 80px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; border-radius: 4px; background: #f8f8f8; } .UIBuilderRoot .ub-lib-preview-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; } .UIBuilderRoot .ub-lib-preview-text { padding: 4px 8px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; paint-order: stroke fill; } .UIBuilderRoot .ub-lib-preview-component { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: #888; align-items: center; } .UIBuilderRoot .ub-lib-preview-comp-item { display: flex; align-items: center; gap: 4px; } .UIBuilderRoot .ub-lib-preview-anim { display: flex; flex-direction: column; align-items: center; gap: 2px; } .UIBuilderRoot .ub-lib-preview-anim-node { font-size: 11px; font-weight: 600; color: #059669; } .UIBuilderRoot .ub-lib-preview-anim-detail { font-size: 10px; color: #999; } .UIBuilderRoot .ub-lib-card-name { font-size: 12px; font-weight: 600; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .UIBuilderRoot .ub-lib-card-category { font-size: 10px; color: #7c3aed; margin-top: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .UIBuilderRoot .ub-lib-card-category:hover { text-decoration: underline; } .UIBuilderRoot .ub-lib-card-date { font-size: 10px; color: #bbb; margin-top: 2px; } .UIBuilderRoot .ub-lib-card-footer { padding: 0 10px 10px; } .UIBuilderRoot .ub-lib-card-import-btn { width: 100%; background: #7c3aed; border: none; border-radius: 5px; padding: 6px; font-size: 11px; color: #fff; cursor: pointer; font-weight: 600; transition: background 0.15s; } .UIBuilderRoot .ub-lib-card-import-btn:hover { background: #6d28d9; } .UIBuilderRoot .ub-lib-card-import-btn .ub-icon { margin-right: 4px; } .UIBuilderRoot .ub-lib-sidebar-heading { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #999; margin: 16px 0 6px; padding: 0 8px; } .UIBuilderRoot .ub-lib-cat-list { display: flex; flex-direction: column; gap: 1px; } .UIBuilderRoot .ub-lib-cat-item { padding: 5px 12px; font-size: 12px; color: #666; cursor: pointer; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: space-between; } .UIBuilderRoot .ub-lib-cat-label { overflow: hidden; text-overflow: ellipsis; } .UIBuilderRoot .ub-lib-cat-rename-input { width: 100%; font-size: 12px; padding: 0 2px; border: 1px solid #7c3aed; border-radius: 3px; outline: none; background: #fff; color: #333; font-family: inherit; } .UIBuilderRoot .ub-lib-cat-delete-btn { display: none; background: none; border: none; color: #999; cursor: pointer; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; line-height: 1; } .UIBuilderRoot .ub-lib-cat-item:hover .ub-lib-cat-delete-btn { display: inline-flex; } .UIBuilderRoot .ub-lib-cat-delete-btn:hover { color: #d33; background: rgba(211, 51, 51, 0.1); } .UIBuilderRoot .ub-lib-cat-item:hover { background: #f5f5f5; color: #333; } .UIBuilderRoot .ub-lib-cat-item.active { background: #f0ebff; color: #7c3aed; font-weight: 600; } .UIBuilderRoot .ub-lib-card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .UIBuilderRoot .ub-lib-card-tag { display: inline-block; font-size: 9px; padding: 1px 6px; background: #f0f0f0; color: #777; border-radius: 8px; white-space: nowrap; } /* ─── Text Parameters ─── */ .UIBuilderRoot .ub-text-params-header { font-size: 10px; font-weight: 600; text-transform: uppercase; color: #888; letter-spacing: 0.5px; margin: 8px 0 4px; } .UIBuilderRoot .ub-text-param-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .UIBuilderRoot .ub-text-param-label { font-family: 'Courier New', monospace; font-size: 11px; color: #7c3aed; background: #f3f0ff; padding: 2px 6px; border-radius: 3px; white-space: nowrap; min-width: 60px; } .UIBuilderRoot .ub-text-param-input { flex: 1; } /* ─── Flex Layout ─── */ .UIBuilderRoot .ub-flex-settings { padding-left: 8px; border-left: 2px solid #3e97ff; margin-left: 4px; margin-top: 4px; } .UIBuilderRoot .ub-prop-section-hint { font-weight: 400; font-size: 10px; color: #aaa; margin-left: 4px; } .UIBuilderRoot .ub-flex-disabled input, .UIBuilderRoot .ub-flex-disabled button { opacity: 0.4; pointer-events: none; } .UIBuilderRoot .ub-tree-flex-badge { font-size: 9px; color: #3e97ff; margin-left: 4px; opacity: 0.7; } .UIBuilderRoot .ub-tree-mask-badge { font-size: 9px; color: #e05eff; margin-left: 4px; opacity: 0.7; } .UIBuilderRoot .ub-tree-anim-badge { display: inline-flex; align-items: center; margin-left: 4px; color: #e88b25; opacity: 0.8; animation: ub-anim-badge-pulse 2s ease-in-out infinite; } @keyframes ub-anim-badge-pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.4; } } /* ─── Root Frame ─── */ .UIBuilderRoot .ub-tree-root-frame > .ub-tree-node .ub-tree-drag-handle { visibility: hidden; } .UIBuilderRoot .ub-tree-name-locked { opacity: 0.6; font-style: italic; } .UIBuilderRoot .ub-root-frame-transform { opacity: 0.5; pointer-events: none; } /* ─── Banner Set Panel ─── */ .UIBuilderRoot .ub-bannerset-container { max-height: 200px; overflow-y: auto; border-bottom: 1px solid #e8e8e8; flex-shrink: 0; } .UIBuilderRoot .ub-bannerset-empty { padding: 16px; text-align: center; font-size: 11px; color: #aaa; } .UIBuilderRoot .ub-bannerset-item { display: flex; align-items: center; padding: 6px 12px; cursor: pointer; font-size: 12px; gap: 8px; transition: background 0.1s; border-bottom: 1px solid #f0f0f0; } .UIBuilderRoot .ub-bannerset-item:hover { background: rgba(0,0,0,0.03); } .UIBuilderRoot .ub-bannerset-item.active { background: rgba(62, 151, 255, 0.10); } .UIBuilderRoot .ub-bannerset-type-badge { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; } .UIBuilderRoot .ub-bannerset-type-badge.ub-type-popup { background: #e8f0fe; color: #3e7bfa; } .UIBuilderRoot .ub-bannerset-type-badge.ub-type-embedded { background: #e6f7ed; color: #1a9e4a; } .UIBuilderRoot .ub-bannerset-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #444; } .UIBuilderRoot .ub-bannerset-dims { font-size: 10px; color: #aaa; flex-shrink: 0; } .UIBuilderRoot .ub-add-banner-btn { background: none; border: 1px solid transparent; border-radius: 4px; color: #aaa; cursor: pointer; padding: 0 6px; font-size: 16px; font-weight: 400; line-height: 1; transition: color 0.15s, border-color 0.15s; } .UIBuilderRoot .ub-add-banner-btn:hover { color: #555; border-color: #ddd; } .UIBuilderRoot .ub-dim-btn-cancel { background: #f0f0f0; color: #666; } .UIBuilderRoot .ub-dim-btn-cancel:hover { background: #e0e0e0; } /* ─── Banner Set Title (editable) ─── */ .UIBuilderRoot .ub-bannerset-title { flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .UIBuilderRoot .ub-bannerset-title:hover { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 2px; } .UIBuilderRoot .ub-bannerset-title-input { flex: 1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #555; background: #fff; border: 1px solid #3e97ff; border-radius: 3px; padding: 2px 6px; outline: none; min-width: 0; } /* ─── Banner Name Inline Edit ─── */ .UIBuilderRoot .ub-bannerset-name-input { flex: 1; font-size: 12px; color: #333; background: #fff; border: 1px solid #3e97ff; border-radius: 3px; padding: 1px 6px; outline: none; min-width: 0; } /* ─── Particle System Page ─── */ .sf-particle-section { background: #fff; border: 1px solid #ebedf3; border-radius: 8px; padding: 24px; margin-bottom: 24px; } .sf-particle-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .sf-particle-section-title { font-size: 15px; font-weight: 600; color: #181c32; margin: 0; } .sf-particle-section-count { font-size: 12px; color: #b5b5c3; font-weight: 400; margin-left: 6px; } .sf-particle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .sf-particle-card { background: #fff; border: 1px solid #ebedf3; border-radius: 10px; overflow: hidden; transition: all 0.2s ease; } .sf-particle-card:hover { border-color: #c5c5d8; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09); transform: translateY(-2px); } .sf-particle-card-preview { background: #1e1e2d; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .sf-particle-card-preview img { max-width: 75%; max-height: 75%; object-fit: contain; } .sf-particle-card-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease; z-index: 2; } .sf-particle-card:hover .sf-particle-card-overlay { opacity: 1; } .sf-particle-card-overlay .btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); border: none; color: #333; font-size: 16px; transition: all 0.15s; padding: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .sf-particle-card-overlay .btn:hover { background: #fff; transform: scale(1.12); } .sf-particle-card-body { padding: 10px 12px 8px; } .sf-particle-card-name { font-size: 13px; font-weight: 600; color: #181c32; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .sf-particle-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; font-size: 10.5px; color: #b5b5c3; } .sf-particle-card-meta .CopyId { cursor: pointer; transition: color 0.15s; } .sf-particle-card-meta .CopyId:hover { color: #3699ff; } .sf-sprite-card-actions { display: flex; gap: 0; margin-top: 6px; padding-top: 6px; border-top: 1px solid #f1f1f4; justify-content: center; } .sf-sprite-action-btn { background: none; border: none; color: #c0c0cc; font-size: 12px; padding: 4px 7px; border-radius: 5px; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; } .sf-sprite-action-btn:hover { color: #3699ff; background: #f0f4ff; } .sf-sprite-action-btn.sf-sprite-action-danger:hover { color: #f64e60; background: #fff0f2; } .sf-sprite-action-btn.sf-sprite-action-optimize:hover { color: #1abc9c; background: #eafaf6; } .sf-sprite-action-btn.sf-sprite-optimized-badge { color: #27ae60; cursor: default; } .sf-sprite-action-btn.sf-sprite-optimized-badge:hover { color: #27ae60; background: none; } .sf-particle-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; color: #b5b5c3; text-align: center; } .sf-particle-empty i { font-size: 44px; margin-bottom: 14px; color: #d8d8e5; } .sf-particle-empty-title { font-size: 14px; font-weight: 500; color: #7e8299; } .sf-particle-empty-sub { font-size: 12px; margin-top: 4px; color: #b5b5c3; } .sf-particle-search { max-width: 260px; margin-bottom: 14px; border-radius: 8px; border: 1px solid #e0e0e0; padding: 6px 12px; font-size: 13px; transition: border-color 0.15s; } .sf-particle-search:focus { border-color: #3699ff; outline: none; box-shadow: 0 0 0 3px rgba(54, 153, 255, 0.1); } .sf-particle-section .ParticleAnimsTable td { vertical-align: middle; } /* ─── Animated Sprites Tab ─── */ .sf-sprite-section { background: #fff; border: 1px solid #ebedf3; border-radius: 8px; padding: 24px; } .sf-sprite-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .sf-sprite-section-title { font-size: 15px; font-weight: 600; color: #181c32; margin: 0; } .sf-sprite-section-count { font-size: 12px; color: #b5b5c3; font-weight: 400; margin-left: 6px; } .sf-sprite-card-preview { background: repeating-conic-gradient(#eaeaea 0% 25%, #f6f6f6 0% 50%) 50% / 14px 14px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid #f0f0f3; } .sf-sprite-card-preview img { max-width: 85%; max-height: 85%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08)); } .sf-sprite-card-badges { position: absolute; bottom: 8px; left: 8px; display: flex; gap: 4px; pointer-events: none; } .sf-sprite-badge { background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; line-height: 1.4; backdrop-filter: blur(4px); } .sf-sprite-badge-css { background: rgba(30, 136, 229, 0.85); font-weight: 600; } .sf-sprite-play-container { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1; } .sf-sprite-play-container.active { display: flex; } .sf-sprite-play-container canvas, .sf-sprite-play-container > div { max-width: 90%; max-height: 90%; image-rendering: pixelated; } /* ─── Sprite Folder Sidebar ─── */ .sf-sprite-layout { display: flex; gap: 0; min-height: 300px; } .sf-sprite-folder-sidebar { width: 180px; min-width: 180px; border-right: 1px solid #eee; padding: 8px 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; background: #fafbfc; } .sf-sprite-folder-sidebar:empty { display: none; } .sf-sprite-folder-sidebar:empty + .sf-sprite-main-content { width: 100%; } .sf-sprite-main-content { flex: 1; min-width: 0; padding: 0 0 0 16px; } .sf-sprite-folder-item { padding: 6px 10px; font-size: 12.5px; color: #555; cursor: pointer; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: space-between; gap: 4px; } .sf-sprite-folder-item:hover { background: #eef0f3; color: #333; } .sf-sprite-folder-item.active { background: #e3f2fd; color: #1976d2; font-weight: 600; } .sf-sprite-folder-label { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .sf-sprite-folder-count { font-size: 10px; color: #999; background: #f0f0f0; border-radius: 8px; padding: 1px 6px; flex-shrink: 0; } .sf-sprite-folder-item.active .sf-sprite-folder-count { background: #bbdefb; color: #1565c0; } .sf-sprite-folder-hover-actions { display: none; gap: 2px; flex-shrink: 0; } .sf-sprite-folder-item:hover .sf-sprite-folder-hover-actions { display: flex; } .sf-sprite-folder-item:hover .sf-sprite-folder-count { display: none; } .sf-sprite-folder-hover-actions button { background: none; border: none; color: #999; cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 1; font-size: 10px; display: inline-flex; align-items: center; transition: all 0.15s; } .sf-sprite-folder-rename-btn:hover { color: #1976d2; background: rgba(25, 118, 210, 0.1); } .sf-sprite-folder-delete-btn:hover { color: #d33; background: rgba(211, 51, 51, 0.1); } .sf-sprite-folder-rename-input { width: 100%; font-size: 12px; padding: 1px 4px; border: 1px solid #1976d2; border-radius: 4px; outline: none; background: #fff; color: #333; font-family: inherit; } .sf-sprite-folder-item.sf-sprite-drop-target { background: #e3f2fd; outline: 2px dashed #1976d2; outline-offset: -2px; } .sf-sprite-folder-new-btn { padding: 6px 10px; font-size: 12px; color: #888; cursor: pointer; border-radius: 6px; margin-top: 4px; border: 1px dashed #d0d0d0; text-align: center; transition: all 0.15s; } .sf-sprite-folder-new-btn:hover { color: #1976d2; border-color: #1976d2; background: #e3f2fd; } .sf-particle-card.sf-sprite-dragging { opacity: 0.4; } .sf-particle-card[draggable="true"] { cursor: grab; } .sf-particle-card[draggable="true"]:active { cursor: grabbing; } /* ─── Sprite Sheet Packer ─── */ .sf-sprite-packer { display: flex; flex-direction: column; height: calc(100vh - 65px); width: 100%; overflow: hidden; font-family: 'Poppins', sans-serif; background: #f0f0f0; } .sf-sp-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: #fff; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; } .sf-sp-toolbar-left, .sf-sp-toolbar-right { display: flex; align-items: center; } .sf-sp-title { font-size: 15px; font-weight: 600; color: #333; } .sf-sp-body { display: flex; flex: 1; overflow: hidden; } .sf-sp-left-panel { width: 320px; min-width: 320px; background: #fafafa; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; overflow-y: auto; } .sf-sp-right-panel { flex: 1; overflow-y: auto; padding: 16px; } .sf-sp-section { padding: 12px 16px; border-bottom: 1px solid #eee; } .sf-sp-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 6px; display: block; } /* Drop zone */ .sf-sp-dropzone { border: 2px dashed #ccc; border-radius: 8px; padding: 24px 16px; text-align: center; cursor: pointer; color: #888; transition: border-color 0.2s, background 0.2s; } .sf-sp-dropzone:hover, .sf-sp-dropzone-hover { border-color: #3699ff; background: #f0f7ff; color: #3699ff; } /* Frame list */ .sf-sp-frames-section { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .sf-sp-frame-list { overflow-y: auto; flex: 1; min-height: 0; } .sf-sp-frame-item { display: flex; align-items: center; padding: 6px 8px; background: #fff; border: 1px solid #eee; border-radius: 4px; margin-bottom: 2px; cursor: grab; transition: box-shadow 0.15s; } .sf-sp-frame-item:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .sf-sp-frame-dragging { opacity: 0.4; } .sf-sp-frame-handle { color: #ccc; margin-right: 8px; font-size: 12px; cursor: grab; } .sf-sp-frame-thumb { width: 32px; height: 32px; object-fit: contain; border-radius: 3px; background: #f5f5f5; margin-right: 8px; flex-shrink: 0; } .sf-sp-frame-name { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; } .sf-sp-frame-size { font-size: 10px; color: #bbb; margin-right: 8px; flex-shrink: 0; } /* Pack button row */ .sf-sp-pack-row { margin-bottom: 16px; } /* Preview canvases */ .sf-sp-packed-canvas-wrap, .sf-sp-anim-canvas-wrap { background: #2a2a2a; border-radius: 6px; padding: 12px; min-height: 120px; display: flex; align-items: center; justify-content: center; } .sf-sp-sheet-canvas { text-align: center; } .sf-sp-sheet-canvas canvas { image-rendering: pixelated; } .sf-sp-sheet-info { font-size: 11px; color: #aaa; margin-top: 6px; text-align: center; } .sf-sp-sheet-tabs { margin-bottom: 8px; } .sf-sp-sheet-tabs .btn { margin-right: 4px; } .sf-sp-empty-state { color: #666; font-size: 13px; text-align: center; } /* Animation controls */ .sf-sp-anim-section { margin-top: 16px; } .sf-sp-anim-controls { display: flex; align-items: center; margin-top: 8px; gap: 6px; } .sf-sp-inline-label { font-size: 12px; color: #666; margin-bottom: 0; white-space: nowrap; display: flex; align-items: center; } .sf-sp-fps-input { width: 60px !important; } .sf-sp-num-input { width: 80px !important; } /* Settings */ .sf-sp-settings-section { margin-top: 16px; } .sf-sp-settings-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .sf-sp-preview-section { margin-bottom: 16px; } /* Export format toggle */ .sf-sp-export-toggle { display: flex; align-items: center; } .sf-sp-toggle-option { font-size: 12px; color: #555; margin-bottom: 0; white-space: nowrap; display: flex; align-items: center; gap: 3px; cursor: pointer; } /* CSS Strip controls (inside preview section) */ .sf-sp-css-strip-controls { display: flex; align-items: center; } .sf-sp-css-strip-info { font-size: 11px; color: #888; } /* ─── Image Optimization ─── */ .UIBuilderRoot .ub-optimize-btn { background: none; border: 1px solid transparent; border-radius: 4px; color: #aaa; cursor: pointer; padding: 1px 4px; display: inline-flex; align-items: center; transition: color 0.15s, border-color 0.15s; } .UIBuilderRoot .ub-optimize-btn:hover { color: #1abc9c; border-color: #1abc9c; } .UIBuilderRoot .ub-optimized-badge { display: inline-flex; align-items: center; color: #27ae60; padding: 1px 4px; } /* ─── Image Optimize Comparison Modal ─── */ .image-optimize-modal-body { max-height: 70vh; overflow-y: auto; } .image-optimize-summary { background: #f4f6f9; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; text-align: center; } .image-optimize-reduction { color: #27ae60; font-weight: 600; } .image-optimize-item { border: 1px solid #eee; border-radius: 6px; padding: 12px; margin-bottom: 12px; } .image-optimize-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; } .image-optimize-item-label { font-weight: 600; color: #333; } .image-optimize-item-sizes { color: #666; } .image-optimize-comparison { display: flex; gap: 16px; } .image-optimize-side { flex: 1; min-width: 0; } .image-optimize-side-label { font-size: 11px; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .image-optimize-side-img { background: repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px; text-align: center; min-height: 100px; display: flex; align-items: center; justify-content: center; } .image-optimize-side-img img { max-width: 100%; max-height: 300px; border-radius: 2px; cursor: pointer; transition: opacity 0.15s; } .image-optimize-side-img img:hover { opacity: 0.85; } .image-optimize-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid #eee; } .image-optimize-items { max-height: 50vh; overflow-y: auto; } /* Per-item action buttons */ .image-optimize-item-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #eee; } .image-optimize-item-actions .btn.active { pointer-events: none; } .image-optimize-item-actions .btn-outline-secondary.active { background: #6c757d; color: #fff; border-color: #6c757d; } .image-optimize-item-actions .btn-outline-success.active { background: #28a745; color: #fff; border-color: #28a745; } .image-optimize-item-decision { margin-left: 8px; font-size: 12px; font-weight: 600; } /* Checkbox + select-all */ .image-optimize-item-check { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; } .image-optimize-item-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .image-optimize-batch-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 8px 12px; background: #f8f9fa; border-radius: 4px; } .image-optimize-select-all-label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; cursor: pointer; } .image-optimize-select-all-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } /* Native-size detail overlay */ .image-optimize-detail-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.85); z-index: 10600; display: flex; flex-direction: column; } .image-optimize-detail-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; color: #fff; flex-shrink: 0; } .image-optimize-detail-title { font-size: 14px; } .image-optimize-detail-dims { margin-left: 12px; color: #aaa; font-size: 12px; } .image-optimize-detail-close { background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; padding: 0 8px; line-height: 1; opacity: 0.7; transition: opacity 0.15s; } .image-optimize-detail-close:hover { opacity: 1; } .image-optimize-detail-body { flex: 1; display: flex; gap: 2px; padding: 0 24px 24px; min-height: 0; overflow: auto; } .image-optimize-detail-side { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .image-optimize-detail-side-label { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; flex-shrink: 0; } .image-optimize-detail-side.active .image-optimize-detail-side-label { color: #4fc3f7; } .image-optimize-detail-side-img { flex: 1; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#2a2a2a 0% 25%, #333 0% 50%) 50% / 16px 16px; border-radius: 4px; padding: 8px; overflow: auto; min-height: 0; } .image-optimize-detail-side-img img { max-width: 90vw; max-height: calc(100vh - 100px); image-rendering: auto; } .image-optimize-detail-side-img canvas.SpriteAnimCanvas { border-radius: 2px; image-rendering: pixelated; }