.marvel-device{display:inline-block;position:relative;box-sizing:content-box !important}.marvel-device .screen{width:100%;position:relative;height:100%;color:white;z-index:2;text-align:center;display:block;-webkit-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 0 0 3px #111;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{height:3px;background:black;width:100%;display:block}.marvel-device .middle-bar{width:3px;height:4px;top:0px;left:90px;background:black;position:absolute}.marvel-device.iphone6{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;-webkit-border-radius:56px;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone6:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;-webkit-border-radius:50px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone6:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;-webkit-border-radius:48px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone6 .home{-webkit-border-radius:100%;border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:22px;z-index:3;background:#303233;background:-moz-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);background:-webkit-gradient(linear, left top, right bottom, color-stop(0%, #303233), color-stop(50%, #b5b7b9), color-stop(69%, #f0f2f2), color-stop(100%, #303233));background:-webkit-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);background:-o-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);background:-ms-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#303233', endColorstr='#303233',GradientType=1 )}.marvel-device.iphone6 .home:before{background:#f8f8f8;position:absolute;content:'';-webkit-border-radius:100%;border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone6 .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone6 .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone6 .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;-webkit-border-radius:0px 2px 2px 0px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone6 .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone6 .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone6 .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone6 .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:24px;left:50%;margin-left:-6px;-webkit-border-radius:100%;border-radius:100%;z-index:3}.marvel-device.iphone6 .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:49px;left:134px;z-index:3;-webkit-border-radius:100%;border-radius:100%}.marvel-device.iphone6 .speaker{background:#292728;width:70px;height:6px;position:absolute;top:54px;left:50%;margin-left:-35px;-webkit-border-radius:6px;border-radius:6px;z-index:3}.marvel-device.iphone6.gold{background:#f9e7d3}.marvel-device.iphone6.gold .top-bar,.marvel-device.iphone6.gold .bottom-bar{background:white}.marvel-device.iphone6.gold .sleep,.marvel-device.iphone6.gold .volume{background:#f9e7d3}.marvel-device.iphone6.gold .home{background:#cebba9;background:-moz-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);background:-webkit-gradient(linear, left top, right bottom, color-stop(0%, #cebba9), color-stop(50%, #f9e7d3), color-stop(100%, #cebba9));background:-webkit-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);background:-o-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);background:-ms-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cebba9', endColorstr='#cebba9',GradientType=1 )}.marvel-device.iphone6.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone6.black:before{background:#080808}.marvel-device.iphone6.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone6.black .top-bar,.marvel-device.iphone6.black .bottom-bar{background:#212121}.marvel-device.iphone6.black .volume,.marvel-device.iphone6.black .sleep{background:#464646}.marvel-device.iphone6.black .camera{background:#080808}.marvel-device.iphone6.black .home{background:#080808;background:-moz-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);background:-webkit-gradient(linear, left top, right bottom, color-stop(0%, #080808), color-stop(50%, #464646), color-stop(100%, #080808));background:-webkit-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);background:-o-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);background:-ms-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#080808', endColorstr='#080808',GradientType=1 )}.marvel-device.iphone6.black .home:before{background:#080808}.marvel-device.iphone6.landscape{padding:24px 105px;height:375px;width:667px}.marvel-device.iphone6.landscape .sleep{top:100%;-webkit-border-radius:0px 0px 2px 2px;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone6.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone6.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone6.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone6.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px -  14px);top:0}.marvel-device.iphone6.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone6.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:22px}.marvel-device.iphone6.landscape .sensor{top:134px;left:calc(100% - 49px - 16px)}.marvel-device.iphone6.landscape .speaker{height:70px;width:6px;left:calc(100% - 54px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone6.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone6plus{width:414px;height:736px;padding:112px 26px;background:#d9dbdc;-webkit-border-radius:56px;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone6plus:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;-webkit-border-radius:50px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone6plus:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;-webkit-border-radius:48px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone6plus .home{-webkit-border-radius:100%;border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:24px;z-index:3;background:#303233;background:-moz-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);background:-webkit-gradient(linear, left top, right bottom, color-stop(0%, #303233), color-stop(50%, #b5b7b9), color-stop(69%, #f0f2f2), color-stop(100%, #303233));background:-webkit-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);background:-o-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);background:-ms-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#303233', endColorstr='#303233',GradientType=1 )}.marvel-device.iphone6plus .home:before{background:#f8f8f8;position:absolute;content:'';-webkit-border-radius:100%;border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone6plus .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone6plus .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone6plus .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;-webkit-border-radius:0px 2px 2px 0px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone6plus .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone6plus .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone6plus .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone6plus .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:29px;left:50%;margin-left:-6px;-webkit-border-radius:100%;border-radius:100%;z-index:3}.marvel-device.iphone6plus .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:54px;left:154px;z-index:3;-webkit-border-radius:100%;border-radius:100%}.marvel-device.iphone6plus .speaker{background:#292728;width:70px;height:6px;position:absolute;top:59px;left:50%;margin-left:-35px;-webkit-border-radius:6px;border-radius:6px;z-index:3}.marvel-device.iphone6plus.gold{background:#f9e7d3}.marvel-device.iphone6plus.gold .top-bar,.marvel-device.iphone6plus.gold .bottom-bar{background:white}.marvel-device.iphone6plus.gold .sleep,.marvel-device.iphone6plus.gold .volume{background:#f9e7d3}.marvel-device.iphone6plus.gold .home{background:#cebba9;background:-moz-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);background:-webkit-gradient(linear, left top, right bottom, color-stop(0%, #cebba9), color-stop(50%, #f9e7d3), color-stop(100%, #cebba9));background:-webkit-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);background:-o-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);background:-ms-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cebba9', endColorstr='#cebba9',GradientType=1 )}.marvel-device.iphone6plus.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone6plus.black:before{background:#080808}.marvel-device.iphone6plus.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone6plus.black .top-bar,.marvel-device.iphone6plus.black .bottom-bar{background:#212121}.marvel-device.iphone6plus.black .volume,.marvel-device.iphone6plus.black .sleep{background:#464646}.marvel-device.iphone6plus.black .camera{background:#080808}.marvel-device.iphone6plus.black .home{background:#080808;background:-moz-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);background:-webkit-gradient(linear, left top, right bottom, color-stop(0%, #080808), color-stop(50%, #464646), color-stop(100%, #080808));background:-webkit-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);background:-o-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);background:-ms-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#080808', endColorstr='#080808',GradientType=1 )}.marvel-device.iphone6plus.black .home:before{background:#080808}.marvel-device.iphone6plus.landscape{padding:26px 112px;height:414px;width:736px}.marvel-device.iphone6plus.landscape .sleep{top:100%;-webkit-border-radius:0px 0px 2px 2px;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone6plus.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone6plus.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone6plus.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone6plus.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px -  14px);top:0}.marvel-device.iphone6plus.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone6plus.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:24px}.marvel-device.iphone6plus.landscape .sensor{top:154px;left:calc(100% - 54px - 16px)}.marvel-device.iphone6plus.landscape .speaker{height:70px;width:6px;left:calc(100% - 59px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone6plus.landscape .camera{left:calc(100% - 29px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s,.marvel-device.iphone5c{padding:105px 22px;background:#2c2b2c;width:320px;height:568px;-webkit-border-radius:50px;border-radius:50px}.marvel-device.iphone5s:before,.marvel-device.iphone5c:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;content:'';left:4px;-webkit-border-radius:46px;border-radius:46px;background:#1e1e1e;z-index:1}.marvel-device.iphone5s .sleep,.marvel-device.iphone5c .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px;background:#282727}.marvel-device.iphone5s .volume,.marvel-device.iphone5c .volume{position:absolute;left:-4px;top:180px;z-index:0;height:27px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:#282727}.marvel-device.iphone5s .volume:before,.marvel-device.iphone5c .volume:before{position:absolute;left:0px;top:-75px;height:35px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .volume:after,.marvel-device.iphone5c .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .camera,.marvel-device.iphone5c .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:32px;left:50%;margin-left:-5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;z-index:3}.marvel-device.iphone5s .sensor,.marvel-device.iphone5c .sensor{background:#3c3d3d;width:10px;height:10px;position:absolute;top:60px;left:160px;z-index:3;margin-left:-32px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.marvel-device.iphone5s .speaker,.marvel-device.iphone5c .speaker{background:#292728;width:64px;height:10px;position:absolute;top:60px;left:50%;margin-left:-32px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;z-index:3}.marvel-device.iphone5s.landscape,.marvel-device.iphone5c.landscape{padding:22px 105px;height:320px;width:568px}.marvel-device.iphone5s.landscape .sleep,.marvel-device.iphone5c.landscape .sleep{right:-4px;top:calc(100% - 120px);height:60px;width:4px;-webkit-border-radius:0px 2px 2px 0px;border-radius:0px 2px 2px 0px}.marvel-device.iphone5s.landscape .volume,.marvel-device.iphone5c.landscape .volume{width:27px;height:4px;top:-4px;left:calc(100% - 180px);-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:before,.marvel-device.iphone5c.landscape .volume:before{width:35px;height:4px;top:0px;right:-75px;left:auto;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:after,.marvel-device.iphone5c.landscape .volume:after{bottom:0px;left:-64px;z-index:999;height:4px;width:27px;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .sensor,.marvel-device.iphone5c.landscape .sensor{top:160px;left:calc(100% - 60px);margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .speaker,.marvel-device.iphone5c.landscape .speaker{height:64px;width:10px;left:calc(100% - 60px);top:50%;margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .camera,.marvel-device.iphone5c.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s .home{-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;width:68px;-webkit-box-shadow:inset 0 0 0 4px #2c2b2c;box-shadow:inset 0 0 0 4px #2c2b2c;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:19px;z-index:3}.marvel-device.iphone5s .top-bar{top:70px;position:absolute;left:0}.marvel-device.iphone5s .bottom-bar{bottom:70px;position:absolute;left:0}.marvel-device.iphone5s.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5s.landscape .top-bar{left:70px;top:0px;width:3px;height:100%}.marvel-device.iphone5s.landscape .bottom-bar{right:70px;left:auto;bottom:0px;width:3px;height:100%}.marvel-device.iphone5s.silver{background:#bcbcbc}.marvel-device.iphone5s.silver:before{background:#fcfcfc}.marvel-device.iphone5s.silver .volume,.marvel-device.iphone5s.silver .sleep{background:#d6d6d6}.marvel-device.iphone5s.silver .top-bar,.marvel-device.iphone5s.silver .bottom-bar{background:#eaebec}.marvel-device.iphone5s.silver .home{-webkit-box-shadow:inset 0 0 0 4px #bcbcbc;box-shadow:inset 0 0 0 4px #bcbcbc}.marvel-device.iphone5s.gold{background:#f9e7d3}.marvel-device.iphone5s.gold:before{background:#fcfcfc}.marvel-device.iphone5s.gold .volume,.marvel-device.iphone5s.gold .sleep{background:#f9e7d3}.marvel-device.iphone5s.gold .top-bar,.marvel-device.iphone5s.gold .bottom-bar{background:white}.marvel-device.iphone5s.gold .home{-webkit-box-shadow:inset 0 0 0 4px #f9e7d3;box-shadow:inset 0 0 0 4px #f9e7d3}.marvel-device.iphone5c{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.iphone5c .top-bar,.marvel-device.iphone5c .bottom-bar{display:none}.marvel-device.iphone5c .home{background:#242324;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;width:68px;height:68px;z-index:3;position:absolute;left:50%;margin-left:-34px;bottom:19px}.marvel-device.iphone5c .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone5c.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5c .volume,.marvel-device.iphone5c .sleep{background:#dddddd}.marvel-device.iphone5c.red{background:#f96b6c}.marvel-device.iphone5c.red .volume,.marvel-device.iphone5c.red .sleep{background:#ed5758}.marvel-device.iphone5c.yellow{background:#f2dc60}.marvel-device.iphone5c.yellow .volume,.marvel-device.iphone5c.yellow .sleep{background:#e5ce4c}.marvel-device.iphone5c.green{background:#97e563}.marvel-device.iphone5c.green .volume,.marvel-device.iphone5c.green .sleep{background:#85d94d}.marvel-device.iphone5c.blue{background:#33a2db}.marvel-device.iphone5c.blue .volume,.marvel-device.iphone5c.blue .sleep{background:#2694cd}.marvel-device.iphone4s{padding:129px 27px;width:320px;height:480px;background:#686868;-webkit-border-radius:54px;border-radius:54px}.marvel-device.iphone4s:before{content:'';width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;z-index:1;-webkit-border-radius:50px;border-radius:50px;background:#1e1e1e}.marvel-device.iphone4s .top-bar{top:60px;position:absolute;left:0}.marvel-device.iphone4s .bottom-bar{bottom:90px;position:absolute;left:0}.marvel-device.iphone4s .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:72px;left:134px;z-index:3;margin-left:-5px;-webkit-border-radius:100%;border-radius:100%}.marvel-device.iphone4s .speaker{background:#292728;width:64px;height:10px;position:absolute;top:72px;left:50%;z-index:3;margin-left:-32px;-webkit-border-radius:5px;border-radius:5px}.marvel-device.iphone4s .sensor{background:#292728;width:40px;height:10px;position:absolute;top:36px;left:50%;z-index:3;margin-left:-20px;-webkit-border-radius:5px;border-radius:5px}.marvel-device.iphone4s .home{background:#242324;-webkit-border-radius:100%;border-radius:100%;width:72px;height:72px;z-index:3;position:absolute;left:50%;margin-left:-36px;bottom:30px}.marvel-device.iphone4s .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);-webkit-border-radius:4px;border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone4s .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px;background:#4D4D4D}.marvel-device.iphone4s .volume{position:absolute;left:-4px;top:160px;height:27px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:#4D4D4D}.marvel-device.iphone4s .volume:before{position:absolute;left:0px;top:-70px;height:35px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s.landscape{padding:27px 129px;height:320px;width:480px}.marvel-device.iphone4s.landscape .bottom-bar{left:90px;bottom:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .top-bar{left:calc(100% - 60px);top:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .camera{top:134px;left:calc(100% - 72px);margin-left:0}.marvel-device.iphone4s.landscape .speaker{top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 72px);width:10px;height:64px}.marvel-device.iphone4s.landscape .sensor{height:40px;width:10px;left:calc(100% - 36px);top:50%;margin-left:0;margin-top:-20px}.marvel-device.iphone4s.landscape .home{left:30px;bottom:50%;margin-left:0;margin-bottom:-36px}.marvel-device.iphone4s.landscape .sleep{height:60px;width:4px;right:-4px;top:calc(100% - 120px);-webkit-border-radius:0px 2px 2px 0px;border-radius:0px 2px 2px 0px}.marvel-device.iphone4s.landscape .volume{top:-4px;left:calc(100% - 187px);height:4px;width:27px;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:before{right:-70px;left:auto;top:0px;width:35px;height:4px;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:after{width:27px;height:4px;bottom:0px;left:-64px;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.silver{background:#bcbcbc}.marvel-device.iphone4s.silver:before{background:#fcfcfc}.marvel-device.iphone4s.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.iphone4s.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.iphone4s.silver .volume,.marvel-device.iphone4s.silver .sleep{background:#d6d6d6}.marvel-device.nexus5{padding:50px 15px 50px 15px;width:320px;height:568px;background:#1e1e1e;-webkit-border-radius:20px;border-radius:20px}.marvel-device.nexus5:before{-webkit-border-radius:600px / 50px;border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.1%;width:calc(100% - 26px);top:50%;left:50%;-moz-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .top-bar{width:calc(100% - 8px);height:calc(100% - 6px);position:absolute;top:3px;left:4px;-webkit-border-radius:20px;border-radius:20px;background:#181818}.marvel-device.nexus5 .top-bar:before{-webkit-border-radius:600px / 50px;border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.0%;width:calc(100% - 26px);top:50%;left:50%;-moz-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .bottom-bar{display:none}.marvel-device.nexus5 .sleep{width:3px;position:absolute;left:-3px;top:110px;height:100px;background:inherit;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px}.marvel-device.nexus5 .volume{width:3px;position:absolute;right:-3px;top:70px;height:45px;background:inherit;-webkit-border-radius:0px 2px 2px 0px;border-radius:0px 2px 2px 0px}.marvel-device.nexus5 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:18px;left:50%;z-index:3;margin-left:-5px;-webkit-border-radius:100%;border-radius:100%}.marvel-device.nexus5 .camera:before{background:#3c3d3d;width:6px;height:6px;content:'';display:block;position:absolute;top:2px;left:-100px;z-index:3;-webkit-border-radius:100%;border-radius:100%}.marvel-device.nexus5.landscape{padding:15px 50px 15px 50px;height:320px;width:568px}.marvel-device.nexus5.landscape:before{width:103.1%;height:calc(100% - 26px);-webkit-border-radius:50px / 600px;border-radius:50px / 600px}.marvel-device.nexus5.landscape .top-bar{left:3px;top:4px;height:calc(100% - 8px);width:calc(100% - 6px)}.marvel-device.nexus5.landscape .top-bar:before{width:103%;height:calc(100% - 26px);-webkit-border-radius:50px / 600px;border-radius:50px / 600px}.marvel-device.nexus5.landscape .sleep{height:3px;width:100px;left:calc(100% - 210px);top:-3px;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.nexus5.landscape .volume{height:3px;width:45px;right:70px;top:100%;-webkit-border-radius:0px 0px 2px 2px;border-radius:0px 0px 2px 2px}.marvel-device.nexus5.landscape .camera{top:50%;left:calc(100% - 18px);margin-left:0;margin-top:-5px}.marvel-device.nexus5.landscape .camera:before{top:-100px;left:2px}.marvel-device.s5{padding:60px 18px;-webkit-border-radius:42px;border-radius:42px;width:320px;height:568px;background:#bcbcbc}.marvel-device.s5:before,.marvel-device.s5:after{width:calc(100% - 52px);content:'';display:block;height:26px;background:inherit;position:absolute;-webkit-border-radius:500px / 40px;border-radius:500px / 40px;left:50%;-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5:before{top:-7px}.marvel-device.s5:after{bottom:-7px}.marvel-device.s5 .bottom-bar{display:none}.marvel-device.s5 .top-bar{-webkit-border-radius:37px;border-radius:37px;width:calc(100% - 10px);height:calc(100% - 10px);top:5px;left:5px;background:radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 3px 3px;background-color:white;background-size:4px 4px;background-position:center;z-index:2;position:absolute}.marvel-device.s5 .top-bar:before,.marvel-device.s5 .top-bar:after{width:calc(100% - 48px);content:'';display:block;height:26px;background:inherit;position:absolute;-webkit-border-radius:500px / 40px;border-radius:500px / 40px;left:50%;-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5 .top-bar:before{top:-7px}.marvel-device.s5 .top-bar:after{bottom:-7px}.marvel-device.s5 .sleep{width:3px;position:absolute;left:-3px;top:100px;height:100px;background:#cecece;-webkit-border-radius:2px 0px 0px 2px;border-radius:2px 0px 0px 2px}.marvel-device.s5 .speaker{width:68px;height:8px;position:absolute;top:20px;display:block;z-index:3;left:50%;margin-left:-34px;background-color:#bcbcbc;background-position:top left;-webkit-border-radius:4px;border-radius:4px}.marvel-device.s5 .sensor{display:block;position:absolute;top:20px;right:110px;background:#3c3d3d;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .camera{display:block;position:absolute;top:24px;right:42px;background:black;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;width:10px;height:10px;z-index:3}.marvel-device.s5 .camera:before{width:4px;height:4px;background:#3c3d3d;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-2px;margin-left:-2px}.marvel-device.s5 .home{position:absolute;z-index:3;bottom:17px;left:50%;width:70px;height:20px;background:white;-webkit-border-radius:18px;border-radius:18px;display:block;margin-left:-35px;border:2px solid black}.marvel-device.s5.landscape{padding:18px 60px;height:320px;width:568px}.marvel-device.s5.landscape:before,.marvel-device.s5.landscape:after{height:calc(100% - 52px);width:26px;-webkit-border-radius:40px / 500px;border-radius:40px / 500px;-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape:before{top:50%;left:-7px}.marvel-device.s5.landscape:after{top:50%;left:auto;right:-7px}.marvel-device.s5.landscape .top-bar:before,.marvel-device.s5.landscape .top-bar:after{width:26px;height:calc(100% - 48px);-webkit-border-radius:40px / 500px;border-radius:40px / 500px;-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape .top-bar:before{right:-7px;top:50%;left:auto}.marvel-device.s5.landscape .top-bar:after{left:-7px;top:50%;right:auto}.marvel-device.s5.landscape .sleep{height:3px;width:100px;left:calc(100% - 200px);top:-3px;-webkit-border-radius:2px 2px 0px 0px;border-radius:2px 2px 0px 0px}.marvel-device.s5.landscape .speaker{height:68px;width:8px;left:calc(100% - 20px);top:50%;margin-left:0;margin-top:-34px}.marvel-device.s5.landscape .sensor{right:20px;top:calc(100% - 110px)}.marvel-device.s5.landscape .sensor:after{left:-12px;right:0px}.marvel-device.s5.landscape .camera{top:calc(100% - 42px);right:24px}.marvel-device.s5.landscape .home{width:20px;height:70px;bottom:50%;margin-bottom:-35px;margin-left:0;left:17px}.marvel-device.s5.black{background:#1e1e1e}.marvel-device.s5.black .speaker{background:black}.marvel-device.s5.black .sleep{background:#1e1e1e}.marvel-device.s5.black .top-bar{background:radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 3px 3px;background-color:#2c2b2c;background-size:4px 4px}.marvel-device.s5.black .home{background:#2c2b2c}.marvel-device.lumia920{padding:80px 35px 125px 35px;background:#ffdd00;width:320px;height:533px;-moz-border-radius:40px / 3px;-webkit-border-radius:40px / 3px;border-radius:40px / 3px}.marvel-device.lumia920 .bottom-bar{display:none}.marvel-device.lumia920 .top-bar{width:calc(100% - 24px);height:calc(100% - 32px);position:absolute;top:16px;left:12px;-moz-border-radius:24px;-webkit-border-radius:24px;border-radius:24px;background:black;z-index:1}.marvel-device.lumia920 .top-bar:before{background:#1e1e1e;display:block;content:'';width:calc(100% - 4px);height:calc(100% - 4px);top:2px;left:2px;position:absolute;-moz-border-radius:22px;-webkit-border-radius:22px;border-radius:22px}.marvel-device.lumia920 .volume{width:3px;position:absolute;top:130px;height:100px;background:#1e1e1e;right:-3px;-webkit-border-radius:0px 2px 2px 0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:before{width:3px;position:absolute;top:190px;content:'';display:block;height:50px;background:inherit;right:0px;-webkit-border-radius:0px 2px 2px 0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:after{width:3px;position:absolute;top:460px;content:'';display:block;height:50px;background:inherit;right:0px;-webkit-border-radius:0px 2px 2px 0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:34px;right:130px;z-index:5;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.marvel-device.lumia920 .speaker{background:#292728;width:64px;height:10px;position:absolute;top:38px;left:50%;margin-left:-32px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;z-index:3}.marvel-device.lumia920.landscape{padding:35px 80px 35px 125px;height:320px;width:568px;-moz-border-radius:2px / 100px;-webkit-border-radius:2px / 100px;border-radius:2px / 100px}.marvel-device.lumia920.landscape .top-bar{height:calc(100% - 24px);width:calc(100% - 32px);left:16px;top:12px}.marvel-device.lumia920.landscape .volume{height:3px;right:130px;width:100px;top:100%;-webkit-border-radius:0px 0px 2px 2px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:before{height:3px;right:190px;top:0px;width:50px;-webkit-border-radius:0px 0px 2px 2px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:after{height:3px;right:430px;top:0px;width:50px;-webkit-border-radius:0px 0px 2px 2px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .camera{right:30px;top:calc(100% - 140px)}.marvel-device.lumia920.landscape .speaker{width:10px;height:64px;top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 48px)}.marvel-device.lumia920.black{background:black}.marvel-device.lumia920.white{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.lumia920.blue{background:#00acdd}.marvel-device.lumia920.red{background:#CC3E32}.marvel-device.htc-one{padding:72px 25px 100px 25px;width:320px;height:568px;background:#bebebe;-webkit-border-radius:34px;border-radius:34px}.marvel-device.htc-one:before{content:'';display:block;width:calc(100% - 4px);height:calc(100% - 4px);position:absolute;top:2px;left:2px;background:#adadad;-webkit-border-radius:32px;border-radius:32px}.marvel-device.htc-one:after{content:'';display:block;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;background:#eeeeee;-webkit-border-radius:30px;border-radius:30px}.marvel-device.htc-one .top-bar{width:calc(100% - 4px);height:635px;position:absolute;background:#424242;top:50px;z-index:1;left:2px}.marvel-device.htc-one .top-bar:before{content:'';position:absolute;width:calc(100% - 4px);height:100%;position:absolute;background:black;top:0px;z-index:1;left:2px}.marvel-device.htc-one .bottom-bar{display:none}.marvel-device.htc-one .speaker{height:16px;width:216px;display:block;position:absolute;top:22px;z-index:2;left:50%;margin-left:-108px;background:radial-gradient(#343434 25%, transparent 50%) 0 0,radial-gradient(#343434 25%, transparent 50%) 4px 4px;background-size:4px 4px;background-position:top left}.marvel-device.htc-one .speaker:after{content:'';height:16px;width:216px;display:block;position:absolute;top:676px;z-index:2;left:50%;margin-left:-108px;background:inherit}.marvel-device.htc-one .camera{display:block;position:absolute;top:18px;right:38px;background:#3c3d3d;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;width:24px;height:24px;z-index:3}.marvel-device.htc-one .camera:before{width:8px;height:8px;background:black;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-4px;margin-left:-4px}.marvel-device.htc-one .sensor{display:block;position:absolute;top:29px;left:60px;background:#3c3d3d;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one.landscape{padding:25px 72px 25px 100px;height:320px;width:568px}.marvel-device.htc-one.landscape .top-bar{height:calc(100% - 4px);width:635px;left:calc(100% - 685px);top:2px}.marvel-device.htc-one.landscape .speaker{width:16px;height:216px;left:calc(100% - 38px);top:50%;margin-left:0px;margin-top:-108px}.marvel-device.htc-one.landscape .speaker:after{width:16px;height:216px;left:calc(100% - 692px);top:50%;margin-left:0;margin-top:-108px}.marvel-device.htc-one.landscape .camera{right:18px;top:calc(100% - 38px)}.marvel-device.htc-one.landscape .sensor{left:calc(100% - 29px);top:60px}.marvel-device.htc-one.landscape .sensor :after{right:0;top:-12px}.marvel-device.ipad{width:576px;height:768px;padding:90px 25px;background:#242324;-webkit-border-radius:44px;border-radius:44px}.marvel-device.ipad:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;-webkit-border-radius:40px;border-radius:40px;background:#1e1e1e}.marvel-device.ipad .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:44px;left:50%;margin-left:-5px;-webkit-border-radius:100%;border-radius:100%}.marvel-device.ipad .top-bar,.marvel-device.ipad .bottom-bar{display:none}.marvel-device.ipad .home{background:#242324;-webkit-border-radius:36px;border-radius:36px;width:50px;height:50px;position:absolute;left:50%;margin-left:-25px;bottom:22px}.marvel-device.ipad .home:after{width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:1px solid rgba(255,255,255,0.1);-webkit-border-radius:4px;border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%}.marvel-device.ipad.landscape{height:576px;width:768px;padding:25px 90px}.marvel-device.ipad.landscape .camera{left:calc(100% - 44px);top:50%;margin-left:0;margin-top:-5px}.marvel-device.ipad.landscape .home{top:50%;left:22px;margin-left:0;margin-top:-25px}.marvel-device.ipad.silver{background:#bcbcbc}.marvel-device.ipad.silver:before{background:#fcfcfc}.marvel-device.ipad.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.ipad.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.macbook{width:960px;height:600px;padding:44px 44px 76px;margin:0 auto;background:#bebebe;-webkit-border-radius:34px;border-radius:34px}.marvel-device.macbook:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;-webkit-border-radius:30px;border-radius:30px;background:#1e1e1e}.marvel-device.macbook .top-bar{width:calc(100% + 2 * 70px);height:40px;position:absolute;content:'';display:block;top:680px;left:-70px;border-bottom-left-radius:90px 18px;border-bottom-right-radius:90px 18px;background:#bebebe;-webkit-box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6);-moz-box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6);box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6)}.marvel-device.macbook .top-bar:before{width:100%;height:24px;content:'';display:block;top:0;left:0;background:#f0f0f0;border-bottom:2px solid #aaa;-webkit-border-radius:5px;border-radius:5px;position:relative}.marvel-device.macbook .top-bar:after{width:16%;height:14px;content:'';display:block;top:0;background:#ddd;position:absolute;margin-left:auto;margin-right:auto;left:0;right:0;-webkit-border-radius:0 0 20px 20px;border-radius:0 0 20px 20px;-webkit-box-shadow:inset 0px -3px 10px #999;-moz-box-shadow:inset 0px -3px 10px #999;box-shadow:inset 0px -3px 10px #999}.marvel-device.macbook .bottom-bar{background:transparent;width:calc(100% + 2 * 70px);height:26px;position:absolute;content:'';display:block;top:680px;left:-70px}.marvel-device.macbook .bottom-bar:before,.marvel-device.macbook .bottom-bar:after{height:calc(100% - 2px);width:80px;content:'';display:block;top:0;position:absolute}.marvel-device.macbook .bottom-bar:before{left:0;background:#f0f0f0;background:-moz-linear-gradient(left, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, #747474), color-stop(5%, #c3c3c3), color-stop(14%, #ebebeb), color-stop(41%, #979797), color-stop(80%, #f0f0f0), color-stop(100%, #f0f0f0), color-stop(100%, #f0f0f0));background:-webkit-linear-gradient(left, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);background:-o-linear-gradient(left, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);background:-ms-linear-gradient(left, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);background:linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#747474', endColorstr='#f0f0f0', GradientType=1)}.marvel-device.macbook .bottom-bar:after{right:0;background:#f0f0f0;background:-moz-linear-gradient(left, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, #f0f0f0), color-stop(0%, #f0f0f0), color-stop(20%, #f0f0f0), color-stop(59%, #979797), color-stop(86%, #ebebeb), color-stop(95%, #c3c3c3), color-stop(100%, #747474));background:-webkit-linear-gradient(left, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);background:-o-linear-gradient(left, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);background:-ms-linear-gradient(left, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);background:linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#747474', GradientType=1)}.marvel-device.macbook .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:20px;left:50%;margin-left:-5px;-webkit-border-radius:100%;border-radius:100%}.marvel-device.macbook .home{display:none}
.marvel-device.nexus5:before {
    display: none;
}

.marvel-device{
}

@text-color: #8F8F8F;
@smartface-blue: #3399CC;
@smartface-dark-blue: darken(@smartface-blue, 20%);
@smartface-light-blue: lighten(@smartface-blue, 20%);
@dark-theme-outer-border: #4e4e4e;
@light-theme-outer-border: rgb(208, 208, 208);
@dark-background: rgb(48, 49, 48);
@light-background: #FBFBFB;
@dark-theme-text-color: #f2f3f0;
@light-theme-text-color: rgb(143, 143, 143);

/******************** FRAMES ********************/

@frame-iphone6s-white: url("@{image-path}/frames/Apple iPhone 6s/Device/Apple iPhone 6s Silver.png");
@frame-iphone6s-black: url("@{image-path}/frames/Apple iPhone 6s/Device/Apple iPhone 6s Space Gray.png");
@frame-iphone6splus-white: url("@{image-path}/frames/Apple iPhone 6s Plus/Device/Apple iPhone 6s Plus Silver.png");
@frame-iphone6splus-black: url("@{image-path}/frames/Apple iPhone 6s Plus/Device/Apple iPhone 6s Plus Space Gray.png");
@frame-iphonese-white: url("@{image-path}/frames/Apple iPhone SE/Device/Apple iPhone SE Silver.png");
@frame-iphonese-black: url("@{image-path}/frames/Apple iPhone SE/Device/Apple iPhone SE Space Gray.png");
@frame-iphone7-white: url("@{image-path}/frames/Apple iPhone 7/Device/Apple iPhone 7 Silver.png");
@frame-iphone7-black: url("@{image-path}/frames/Apple iPhone 7/Device/Apple iPhone 7 Matte Black.png");
@frame-iphone7plus-white: url("@{image-path}/frames/Apple iPhone 7 Plus/Device/Apple iPhone 7 Plus Silver.png");
@frame-iphone7plus-black: url("@{image-path}/frames/Apple iPhone 7 Plus/Device/Apple iPhone 7 Plus Matte Black.png");
@frame-iphone8-white: url("@{image-path}/frames/Apple iPhone 8/Device with Shadow/Apple iPhone 8 Silver.png");
@frame-iphone8-black: url("@{image-path}/frames/Apple iPhone 8/Device with Shadow/Apple iPhone 8 Space Grey.png");
@frame-iphone8plus-white: url("@{image-path}/frames/Apple iPhone 8 Plus/Device with Shadow/Apple iPhone 8 Plus Silver.png");
@frame-iphone8plus-black: url("@{image-path}/frames/Apple iPhone 8 Plus/Device with Shadow/Apple iPhone 8 Plus Space Grey.png");
@frame-iphonex-white: url("@{image-path}/frames/Apple iPhone X/Device/Apple iPhone X Silver.png");
@frame-iphonex-black: url("@{image-path}/frames/Apple iPhone X/Device/Apple iPhone X Space Grey.png");
@frame-iphonexr-black: url("@{image-path}/frames/Apple iPhone XR/Device/Apple iPhone XR Space Grey.png");
@frame-iphonexr-white: url("@{image-path}/frames/Apple iPhone XR/Device/Apple iPhone XR Silver.png");
@frame-iphonexs-black: url("@{image-path}/frames/Apple iPhone XS/Device with Shadow/Apple iPhone XS Space Grey.png");
@frame-iphonexs-white: url("@{image-path}/frames/Apple iPhone XS/Device with Shadow/Apple iPhone XS Silver.png");
@frame-iphonexsmax-black: url("@{image-path}/frames/Apple iPhone XS Max/Device with Shadow/Apple iPhone XS Max Space Grey.png");
@frame-iphonexsmax-white: url("@{image-path}/frames/Apple iPhone XS Max/Device with Shadow/Apple iPhone XS Max Silver.png");
@frame-ipadmini4-white: url("@{image-path}/frames/Apple iPad Mini 4/Device/Apple iPad Mini 4 Silver.png");
@frame-ipadmini4-black: url("@{image-path}/frames/Apple iPad Mini 4/Device/Apple iPad Mini 4 Space Gray.png");
@frame-ipadpro-black: url("@{image-path}/frames/Apple iPad Pro 12.9 inch/Device/iPad Pro 12.9 inch.png");
@frame-nexus5x-white: url("@{image-path}/frames/Nexus 5X/Device/Nexus 5x.png");
@frame-nexus5x-black: url("@{image-path}/frames/Nexus 5X/Device/Nexus 5x.png");
@frame-nexus9-black: url("@{image-path}/frames/Nexus 9/Device with Shadow/Nexus 9.png");
@frame-galaxys5-white: url("@{image-path}/frames/Samsung Galaxy S5/Device/Samsung Galaxy S5 White.png");
@frame-galaxys5-black: url("@{image-path}/frames/Samsung Galaxy S5/Device/Samsung Galaxy S5 Black.png");
@frame-galaxys7-white: url("@{image-path}/frames/Samsung Galaxy S7/Device/Samsung Galaxy S7 White.png");
@frame-galaxys7-black: url("@{image-path}/frames/Samsung Galaxy S7/Device/Samsung Galaxy S7 Black.png");
@frame-galaxys8-white: url("@{image-path}/frames/Samsung Galaxy S8/Device/Samsung Galaxy S8 Arctic Silver.png");
@frame-galaxys8-black: url("@{image-path}/frames/Samsung Galaxy S8/Device/Samsung Galaxy S8 Midnight Black.png");
@frame-galaxys9-black: url("@{image-path}/frames/Samsung Galaxy S9/Device with Shadow/Samsung Galaxy S9 Midnight Black.png");
@frame-galaxys9-white: url("@{image-path}/frames/Samsung Galaxy S9/Device with Shadow/Samsung Galaxy S9 Titanium Gray.png");
@frame-galaxynote5-white: url("@{image-path}/frames/Samsung Galaxy Note 5/Device with Shadow/Samsung Galaxy Note 5 White.png");
@frame-galaxynote5-black: url("@{image-path}/frames/Samsung Galaxy Note 5/Device with Shadow/Samsung Galaxy Note 5 Black.png");
@frame-googlepixel3xl-black: url("@{image-path}/frames/Google Pixel 3 XL/Device with Shadow/Google Pixel 3 XL - Just Black.png");
@frame-googlepixel3xl-white: url("@{image-path}/frames/Google Pixel 3 XL/Device with Shadow/Google Pixel 3 XL - Clearly White.png");
@frame-googlepixel3-black: url("@{image-path}/frames/Google Pixel 3/Device with Shadow/Google Pixel 3 - Just Black.png");
@frame-googlepixel3-white: url("@{image-path}/frames/Google Pixel 3/Device with Shadow/Google Pixel 3 - Clearly White.png");

/******************** DEVICE SOFTBUTTONS ********************/

@softbutton-nexus9: url("@{image-path}/softbuttons/nexus9.svg");
@softbutton-nexus5x: url("@{image-path}/softbuttons/nexus5x.svg");
@softbutton-samsunggalaxys9: url("@{image-path}/softbuttons/samsunggalaxys9.svg");
@softbutton-googlepixel: url("@{image-path}/softbuttons/googlepixel.png");

/******************** COMPONENT PREVIEWS ********************/
@componentIcon-activityindicator: url("@{icon-path}/components/activityindicator.svg");
@componentIcon-button: url("@{icon-path}/components/button.svg");
@componentIcon-flexlayout: url("@{icon-path}/components/flexlayout.svg");
@componentIcon-gifimageview: url("@{icon-path}/components/gifimageview.svg");
@componentIcon-gridview: url("@{icon-path}/components/gridview.svg");
@componentIcon-gridviewitem: url("@{icon-path}/components/gridviewitem.svg");
@componentIcon-imageview: url("@{icon-path}/components/imageview.svg");
@componentIcon-label: url("@{icon-path}/components/label.svg");
@componentIcon-listview: url("@{icon-path}/components/listview.svg");
@componentIcon-listviewitem: url("@{icon-path}/components/listviewitem.svg");
@componentIcon-mapview: url("@{icon-path}/components/mapview.svg");
@componentIcon-scrollview: url("@{icon-path}/components/scrollview.svg");
@componentIcon-searchview: url("@{icon-path}/components/searchview.svg");
@componentIcon-shimmerflexlayout: url("@{icon-path}/components/shimmerflexlayout.svg");
@componentIcon-slider: url("@{icon-path}/components/slider.svg");
@componentIcon-switch: url("@{icon-path}/components/switch.svg");
@componentIcon-textarea: url("@{icon-path}/components/textarea.svg");
@componentIcon-textbox: url("@{icon-path}/components/textbox.svg");
@componentIcon-textview: url("@{icon-path}/components/textview.svg");
@componentIcon-videoview: url("@{icon-path}/components/videoview.svg");
@componentIcon-view: url("@{icon-path}/components/view.svg");
@componentIcon-webview: url("@{icon-path}/components/webview.svg");

@frames: @frame-iphone6s-white,
@frame-iphone6s-black,
@frame-iphone6splus-white,
@frame-iphone6splus-black,
@frame-iphonese-white,
@frame-iphonese-black,
@frame-iphone7-white,
@frame-iphone7-black,
@frame-iphone7plus-white,
@frame-iphone7plus-black,
@frame-iphone8plus-black,
@frame-iphone8plus-white,
@frame-iphone8-white,
@frame-iphone8-black,
@frame-iphonex-white,
@frame-iphonex-black,
@frame-iphonexr-black,
@frame-iphonexr-white,
@frame-iphonexs-black,
@frame-iphonexs-white,
@frame-iphonexsmax-black,
@frame-iphonexsmax-white,
@frame-ipadmini4-white,
@frame-ipadmini4-black,
@frame-ipadpro-black,
@frame-nexus5x-white,
@frame-nexus5x-black,
@frame-nexus9-black,
@frame-galaxys5-white,
@frame-galaxys5-black,
@frame-galaxys7-white,
@frame-galaxys7-black,
@frame-galaxys8-white,
@frame-galaxys8-black,
@frame-galaxys9-black,
@frame-galaxys9-white,
@frame-galaxynote5-white,
@frame-galaxynote5-black,
@frame-googlepixel3xl-black,
@frame-googlepixel3xl-white,
@frame-googlepixel3-black,
@frame-googlepixel3-white,
@softbutton-nexus9,
@softbutton-nexus5x,
@softbutton-googlepixel,
@softbutton-samsunggalaxys9,
@componentIcon-activityindicator,
@componentIcon-button,
@componentIcon-flexlayout,
@componentIcon-gifimageview,
@componentIcon-gridview,
@componentIcon-gridviewitem,
@componentIcon-imageview,
@componentIcon-label,
@componentIcon-listview,
@componentIcon-listviewitem,
@componentIcon-mapview,
@componentIcon-scrollview,
@componentIcon-searchview,
@componentIcon-shimmerflexlayout,
@componentIcon-slider,
@componentIcon-switch,
@componentIcon-textarea,
@componentIcon-textbox,
@componentIcon-textview,
@componentIcon-videoview,
@componentIcon-view,
@componentIcon-webview;

/******************** PRELOAD FRAMES & SOFTBUTTONS ********************/

.smf-ui-editor-designer-preload {
    width: 0;
    height: 0;
    visibility: hidden;
}

.preload(length(@frames),
"");
.preload(@i,
@device-frame-before-content) when (@i >0) {
    @current-frame : extract(@frames, @i);
    @temp: "@{device-frame-before-content} @{current-frame}";
    & when (@i =1) {
        .smf-ui-editor-designer-preload:before {
            content: e(@temp);
        }
    }
    .preload(@i - 1,
    @temp);
}


.smf-ui-editor-device-softbutton{
    &-nexus9{
        background-image: @softbutton-nexus9;
    }
    &-nexus5x{
        background-image: @softbutton-nexus5x;
    }
    &-samsunggalaxys9{
        background-image: @softbutton-samsunggalaxys9;
    }
    &-googlepixel{
        background-image: @softbutton-googlepixel;
    }
}

.smf-ui-editor-designer .contents {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: #FFFFFF;
    z-index: 1;
}

.smf-ui-editor-designer-content-loader {
    position: absolute;
    width: 25%;
    height: 25%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.react-grid-layout {
    overflow: hidden;
    transition: none !important;
}

.imgeditor:after {
    height: 170px !important;
}

.smf-ui-editor-editor {
    height: ~"calc(100% - 30px)";
    display: flex;
    align-items: stretch;
    .noanim {
        transition: none !important;
    }
    &>.smf-ui-editor-designer{
        position: relative; 
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        width: 100%;
        height: 100%;
        flex-grow: 1;
    }
}

.smf-ui-editor-editor-bar {
    display: flex;
    align-items: stretch;
    &>.smf-ui-editor-designer{
        position: relative; 
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        width: 100%;
        height: 100%;
        flex-grow: 1;
    }
}

.editor_tab .session_page {
    padding-top: 0px !important;
}

.fakehbox.padding3>* {
    margin-left: 3px;
}

.smf-ui-editor-designer-toolbar {
    position: absolute;
    padding-left: 5px;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    height: 30px;
}

.smf-ui-editor-designer-add-device-wrapper {
    background-image: url("@{icon-path}/new-device.svg");
    height: 11px;
    height: 11px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: all;
    .smf-ui-editor-designer-add-device-btn {
        opacity: 0;
        width: 25px;
        height: 25px;
        right: 10px;
        bottom: 10px;
    }
}

.smf-ui-editor-designer-rotate-wrapper {
    @vertical-icon: "@{icon-path}/rotate-from-vertical.svg";
    @horizontal-icon: "@{icon-path}/rotate-from-horizontal.svg";
    position: relative;
    top: 3px;
    right: 8px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    pointer-events: all;
    background-image: url(@vertical-icon);
    & when (@preferences-flat) {
        right: 23px;
    }
    &.horizontal {
        background-image: url(@horizontal-icon);
    }
    &.locked {
        opacity: 0.5;
        pointer-events: none;
    }
    &:before {
        content: url(@horizontal-icon);
        position: absolute;
        width: 0px;
        height: 0px;
        visibility: hidden;
    }
    .smf-ui-editor-designer-rotate-btn {
        opacity: 0;
        width: 20px !important;
        height: 20px !important;
    }
}

.smf-ui-editor-designer-toolbar-resolution {
    min-height: 0 !important;
}

.smf-ui-editor-designer-toolbar-right {
    position: absolute;
    right: -24px;
    width: 200px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
    transition-duration: 0.1s;
}

.smf-ui-editor-designer-toolbar-right-sliding-left {
    right: 5px;
}

.smf-ui-editor-designer-toolbar-outline-wrapper {
    width: 80px;
    height: 17px;
    position: relative;
    float: right;
    top: 3px;
    right: 19px;
    .smf-ui-editor-designer-toolbar-outline {
        & when (@preferences-flat) {
            background-image: url("@{icon-path}/switch_part2.svg"),
            url("@{icon-path}/switch_part1_white.svg");
        }
        & when not (@preferences-flat) {
            background-image: url("@{icon-path}/switch_part2.svg"),
            url("@{icon-path}/switch_part1.svg");
        }
        background-repeat: no-repeat;
        background-position-x: 0px,
        0px;
        width: 29px;
        height: 13px;
        float: left;
        top: 2px;
        position: relative;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.175,
        0.665,
        0.320,
        1),
        linear;
        transition-duration: 0.1s;
        +.outline-label {
            line-height: 11px;
            user-select: none;
            & when (@preferences-flat) {
                top: 2px;
            }
            position: relative;
            color: #8f8f8f;
        }
    }
    .outline-checked {
        background-position-x: 16px, 0px;
        +.outline-label {
            & when (@preferences-flat) {
                color: @smartface-blue;
            }
            & when not (@preferences-flat) {
                color: white;
            }
        }
    }
}

.smf-ui-editor-designer-toolbar-zoomSelection {
    float: right;
    right: 25px;
    & when not (@preferences-flat) {
        top: 1px;
    }
}

.smf-ui-editor-designer .device-frame {
    //-webkit-transition: all 0.8s ease-out;
    //-moz-transition: all 0.8s ease-out;
    //-o-transition: all 0.8s ease-out;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    z-index: 1;
    pointer-events: none;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.smf-ui-editor-designer-div .device-frame {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.smf-ui-editor-designer .designer-wrapper-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
    & when (@preferences-flat) {
        background: #FBFBFB;
    }
    & when not (@preferences-flat) {
        background: #303130;
    }
}

.smf-ui-editor-designer-div .designer-wrapper-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
}

.smf-ui-editor-designer .designer-wrapper-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-height: 100%;
    flex-grow: 1;
}

.smf-ui-editor-designer-div .designer-wrapper-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-height: 100%;
    flex-grow: 1;
}

.smf-ui-editor-notificationRoot {
    height: 100%;
    width: 25px;
    margin-right: 7px;
    z-Index: 10000000;
    pointer-events: none;
    top: 0;
}

.smf-ui-editor-notificationRoot-icon-wrapper {
    position: relative;
    pointer-events: auto;
    width: 30px;
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    color: #989898;
    opacity: 0.7;
    user-select: none;
    & when (@preferences-flat) {
        top: 7px;
    }
    & when not (@preferences-flat) {
        top: -2px;
    }
    &:hover {
        opacity: 1;
    }
}

.smf-ui-editor-notificationRoot-icon-svg {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.smf-ui-editor-notificationRoot-bubble-icon-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    font-size: 10px;
    background: #ffffff;
    color: @smartface-dark-blue;
    min-width: 10px;
    min-height: 10px;
    padding: 2px;
    text-align: center;
    font-weight: bold;
    line-height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 1px #333;
    cursor: default;
}

.smf-ui-editor-notificationRoot-bubble-content {
    height: 100%;
    pointer-events: auto;
    position: relative;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    border: none;
    top: 35px;
    margin: auto;
    background-color: transparent;
    
   
    
    &-button {
      -webkit-appearance: none;
      padding: 0px;
      right: 4px;
      cursor: pointer;
      background: 0px 0px;
      border: none;
      textShadow: 0 1px 0 #fff;
      opacity: 0.2;
      textTransform: none;
      fontSize: 12px;
      fontWeight: 700;
      lineHeight: 1;
      margin: auto;
      position: absolute;
      
      &:hover {
          opacity: 1;
      }
    }
    
     &-action_button {
      opacity: 0.8;
      margin: 3px;
      position: relative;
      right: 0px;    
      &:hover {
          text-decoration: underline;
      }
    }
    
     &-close_button {
                
    }
}

.smf-ui-editor-notificationRoot-bubble-list {
    pointer-events: auto;
    position: fixed;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-end;
    border: 1px solid #4C87B0;
    right: 36px;
    bottom: 0px;
    max-height: 300px;
    & when (@preferences-flat) {
        background-color: #f1f1f1;
        top: 39px;
    }
    & when not (@preferences-flat) {
        background-color: #2b2b2b;
        top: 31px;
    }
    width: 345px;
    z-index: 9999999;
}

.smf-ui-editor-notificationRoot-bubble-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
    min-height: 31px;
    border-bottom: 1px solid rgb(56, 56, 56);
    & when (@preferences-flat) {
        border-bottom-color: #dedede;
    }
    div {
        height: 1px;
        width: 100%;
        & when (@preferences-flat) {
            background: #a9a9a9;
        }
        & when not (@preferences-flat) {
            background: #252525;
        }
    }
    button {
        margin-top: 2px;
        margin-bottom: 2px;
        opacity: 0.5;
        & when (@preferences-flat) {
            color: #373737;
        }
        & when not (@preferences-flat) {
            color: white;
        }
        border: none;
        background: transparent;
        max-height: 17px;
        &:hover {
            opacity: 1;
            text-decoration: underline;
            border: none;
        }
    }
}

.notificationIcon {
    use[stroke]:not([stroke=none]),
    g[stroke]:not([stroke=none]),
    path[stroke]:not([stroke=none]),
    rect[stroke]:not([stroke=none]) {
        stroke: #848382
    }
    path[fill]:not([fill=none]),
    g[fill]:not([fill=none]),
    rect[fill]:not([fill=none]) {
        fill: #848382
    }
    text {
        fill: #848382;
    }
}

.notificationIconHover {
    use[stroke]:not([stroke=none]),
    g[stroke]:not([stroke=none]),
    path[stroke]:not([stroke=none]),
    rect[stroke]:not([stroke=none]) {
        stroke: #4999C9;
    }
    path[fill]:not([fill=none]),
    g[fill]:not([fill=none]),
    rect[fill]:not([fill=none]) {
        fill: #4999C9;
    }
    text {
        fill: #4999C9;
    }
}

.smf-ui-editor-notificationRoot-bubble-list-item {
    background-color: transparent;
    color: #848382;
    fill: #848382;
    stroke: #848382;
    border-bottom: 1px solid #616261;
    padding-bottom: 3px;
    user-select: none;
    .notificationIcon;
    &:hover {
        color: #4999C9;
        .notificationIconHover;
    }
    div {
        display: flex;
        justify-content: center;
        flex-flow: wrap column;
    }
    .smf-ui-editor-notificationRoot-bubble-list-item-leftDiv {
        float: left;
        align-self: flex-start;
        align-content: flex-start;
        svg {
            align-self: flex-start;
            margin-left: 5px;
        }
        pre {
            white-space: pre;
            text-align: center;
            margin: 3px;
            font: inherit;
            overflow: hidden;
            text-overflow: ellipsis;
            align-self: flex-start;
        }
    }
    .smf-ui-editor-notificationRoot-bubble-list-item-rightDiv {
        float: right;
        align-self: flex-end;
        align-content: flex-end;
        button {
            color: inherit;
            -webkit-appearance: none;
            padding: 0;
            right: 0;
            cursor: pointer;
            background: 0 0;
            border: 0;
            opacity: 0.7;
            text-transform: none;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            margin: 5px;
            align-self: flex-end;
            &:hover {
                opacity: 1;
                text-decoration: underline;
                border: none;
            }
        }
        button:nth-child(1) {}
        button:nth-child(1) {}
    }
}

.smf-ui-editor-toolbar-divider {
    &.rotate-zoom {
        float: right;
        right: 29px;
        margin-left: 7px !important;
    }
    &.zoom-outline {
        float: right;
        right: 24px;
        margin-left: 7px !important;
        margin-right: 7px !important;
    }
    &.start {
        margin-left: 7px !important;
        visibility: hidden;
    }
    &.outline-notification {
        position: relative;
        float: right;
        & when not (@preferences-flat) {
            right: 27px;
        }
        & when (@preferences-flat) {
            right: 26px;
        }
    }
}

.smf-ui-editor-designer_fontPanel {
    position: relative;
    flex-direction: row;
    display: flex;
    flex-grow: 1;
    z-index: 100;
    align-items: center;
    justify-content: center;
    cursor: default;
    background-color: @dark-background;
    border: 1px solid @dark-theme-outer-border;
    color: @dark-theme-text-color;
    
    &>div {
        position: relative;
        border: 1px solid rgb(70, 70, 70);
        height: 16px;
        margin: 0px 2px 0px 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }
    
    &_selectInput {
        flex-grow: 6;
        select {
            min-width: 29px;
            width: 100%;
            outline: none;
            font-size: 10px;
            color: @dark-theme-text-color;
            background-color: @dark-background;
            margin-left: 2px;
            
            option {
                color: @dark-theme-text-color;
                background-color: @dark-background;
                outline: none;
                margin-left: 2px;
            }
        }
        i {
            right: 3px;
            position: absolute;
            z-index: -2;
        }
    }
    &_textInput {
        flex-grow: 1;
        max-width: 30px;
        input {
            width: 100%;
            font-size: 10px;
            color: inherit;
            text-align: center;
            user-select: none;
        }
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }
    &_buttonInput {
        flex-grow: 1;
        max-width: 20px;
        font-size: 10px;
        font-weight: bold;
        text-align: center;
        user-select: none;
        &>div {
            height: 12px;
            width: 12px;
            user-select: none;
            &>div {
                display: flex;
                justify-content: center;
                user-select: none;
            }
        }
        &_active {
            color: #3399cc;
        }
    }
}

.smf-ui-editor-designer_richTextToolbar{
    .smf-ui-editor-designer_fontPanel;
}

[contenteditable]::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: transparent;
}

[contenteditable]::-webkit-scrollbar-thumb {
    background: @dark-theme-outer-border;
    border-radius: 10px;
}

// Backward 
.single-line {
    div, br {
        display: none;
    }
    * {
        display:inline;
        white-space:nowrap;
    }
}
.editable_rich_text {
    &_single_line {
        * {
            white-space: pre !important;
        }
    }
    &_middle_ellipsis {
        * {
            white-space: nowrap !important;
        }  
    }
}

.smf-ui-editor-inputDiv  {
    div {
        user-select: auto !important;
        cursor: default !important;
    }
}

/******************** IOS ********************/

.smf-ui-editor-device-iphone6s {
    & when (@preferences-flat) {
        background-image: @frame-iphone6s-white;
        height: 1024.5px;
        width: 493px;
        top: 33px;
        &.horizontal {
            transform: rotate(-90deg);
            height: 964.5px;
            width: 494px;
            top: 1px;
        }
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphone6s-black;
        height: 973px;
        width: 494px;
        top: 5px;
        &.horizontal {
            transform: rotate(-90deg);
            width: 496px;
            height: 965px;
            top: 0px;
        }
    }
}

.smf-ui-editor-device-iphone6splus {
    & when (@preferences-flat) {
        background-image: @frame-iphone6splus-white;
        height: 979.3px;
        width: 480.3px;
        top: -1px;
        &.horizontal {
            transform: rotate(-90deg);
            height: 979.3px;
            width: 482.3px;
            top: 0px;
            left: -3px;
        }
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphone6splus-black;
        height: 980.67px;
        width: 482px;
        top: -1.5px;
        &.horizontal {
            transform: rotate(-90deg);
            width: 479px;
            height: 982px;
            top: 1px;
        }
    }
}

.smf-ui-editor-device-iphonese {
    & when (@preferences-flat) {
        background-image: @frame-iphonese-white;
        height: 845px;
        width: 421px;
        right: -1px;
        top: 2px;
        &.horizontal {
            transform: rotate(-90deg);
            height: 843px;
            width: 423px;
            right: 0px;
        }
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphonese-black;
        height: 850px;
        width: 428px;
        left: 3px;
        top: 2px;
        &.horizontal {
            transform: rotate(-90deg);
            height: 840px;
            width: 419px;
        }
    }
}

.smf-ui-editor-device-iphone7 {
    & when (@preferences-flat) {
        background-image: @frame-iphone7-white;
        height: 1012px;
        width: 492px;
        top: 27px;
        &.horizontal {
            transform: rotate(-90deg);
            height: 962px;
            width: 500px;
            top: 0px;
        }
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphone7-black;
        height: 967px;
        width: 495px;
        top: 1px;
        &.horizontal {
            transform: rotate(-90deg);
            width: 496px;
            height: 965px;
        }
    }
}

.smf-ui-editor-device-iphone7plus {
    & when (@preferences-flat) {
        background-image: @frame-iphone7plus-white;
        height: 1129px;
        width: 611px;
        &.horizontal {
            transform: rotate(-90deg);
            height: 1134px;
            width: 620px;
        }
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphone7plus-black;
        height: 1125px;
        width: 610px;
        &.horizontal {
            transform: rotate(-90deg);
            height: 1127px;
            width: 611px;
            top: 3px;
        }
    }
}

.smf-ui-editor-device-iphone8 {
    height: 946px;
    width: 475px;
    &.horizontal {
        transform: rotate(-90deg);
    }
    & when (@preferences-flat) {
        background-image: @frame-iphone8-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphone8-black;
    }
}

.smf-ui-editor-device-iphone8plus {
    height: 1002px;
    width: 547px;
    &.horizontal {
        transform: rotate(-90deg);
    }
    & when (@preferences-flat) {
        background-image: @frame-iphone8plus-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphone8plus-black;
    }
}

.smf-ui-editor-device-iphonex {
    top: 2px;
    height: 932px;
    width: 468px;
    &.horizontal {
        transform: rotate(-90deg);
    }
    & when (@preferences-flat) {
        background-image: @frame-iphonex-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphonex-black;
    }
}

.smf-ui-editor-device-iphonexr {
    height: 1013px;
    width: 524px;
    background-position: center 3px;
    &.horizontal {
        transform: rotate(-90deg);
    }
    & when (@preferences-flat) {
        background-image: @frame-iphonexr-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphonexr-black;
    }
}

.smf-ui-editor-device-iphonexs {
    height: 892px;
    width: 461px;
    &.horizontal {
        transform: rotate(-90deg);
    }
    & when (@preferences-flat) {
        background-image: @frame-iphonexs-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphonexs-black;
    }
}

.smf-ui-editor-device-iphonexsmax {
    height: 989px;
    width: 507px;
    &.horizontal {
        transform: rotate(-90deg);
    }
    & when (@preferences-flat) {
        background-image: @frame-iphonexsmax-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-iphonexsmax-black;
    }
}

.smf-ui-editor-device-ipadmini4 {
    & when (@preferences-flat) {
        background-image: @frame-ipadmini4-white;
        height: 1531px;
        width: 1104px;
        &.horizontal {
            transform: rotate(-90deg);
        }
    }
    & when not (@preferences-flat) {
        background-image: @frame-ipadmini4-black;
        height: 1533px;
        width: 1108px;
        &.horizontal {
            transform: rotate(-90deg);
        }
    }
}


.smf-ui-editor-device-ipadpro {
    height: 1462px;
    width: 1124px;
    background-position: 2px center;
    & when (@preferences-flat) {
        background-image: @frame-ipadpro-black;
    }
    & when not (@preferences-flat) {
        background-image: @frame-ipadpro-black;
    }
    &.horizontal {
        transform: rotate(-90deg);
    }
}


/******************** ANDROID ********************/

.smf-ui-editor-device-nexus5x {
    height: 944px;
    width: 458px;
    background-position: 1px 15px;
    & when (@preferences-flat) {
        background-image: @frame-nexus5x-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-nexus5x-black;
    }
    &.horizontal {
        transform: rotate(-90deg);
    }
}

.smf-ui-editor-device-nexus9 {
    height: 1324px;
    width: 948px;
    & when (@preferences-flat) {
        background-image: @frame-nexus9-black;
    }
    & when not (@preferences-flat) {
        background-image: @frame-nexus9-black;
    }
    &.horizontal {
        transform: rotate(-90deg);
    }
}

.smf-ui-editor-device-galaxys5 {
    height: 834px;
    width: 438px;
    & when (@preferences-flat) {
        background-image: @frame-galaxys5-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-galaxys5-black;
    }
    &.horizontal {
        transform: rotate(-90deg);
    }
}

.smf-ui-editor-device-galaxys7 {
    height: 840px;
    width: 430px;
    & when (@preferences-flat) {
        top: 1px;
        background-image: @frame-galaxys7-white;
        &.horizontal {
            transform: rotate(-90deg);
        }
    }
    & when not (@preferences-flat) {
        background-image: @frame-galaxys7-black;
        &.horizontal {
            transform: rotate(-90deg);
        }
    }
}

.smf-ui-editor-device-galaxys8 {
    height: 900px;
    width: 409px;
    & when (@preferences-flat) {
        background-image: @frame-galaxys8-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-galaxys8-black;
    }
    &.horizontal {
        transform: rotate(-90deg);
    }
}

.smf-ui-editor-device-galaxys9 {
    height: 860px;
    width: 409px;
    & when (@preferences-flat) {
        background-image: @frame-galaxys9-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-galaxys9-black;
    }
    &.horizontal {
        transform: rotate(-90deg);
    }
}

.smf-ui-editor-device-galaxynote5 {
    height: 1056px;
    width: 526px;
    background-position: center 6px;
    & when (@preferences-flat) {
        background-image: @frame-galaxynote5-white;
    }
    & when not (@preferences-flat) {
        background-image: @frame-galaxynote5-black;
        
    }
    &.horizontal {
        transform: rotate(-90deg);
    }
}

.smf-ui-editor-device-googlepixel3xl {
    height: 974px;
    width: 497px;
    background-position: center 21px;
    & when (@preferences-flat) {
        background-image: @frame-googlepixel3xl-white;
        &.horizontal {
            transform: rotate(-90deg);
        }
    }
    & when not (@preferences-flat) {
        background-image: @frame-googlepixel3xl-black;
        &.horizontal {
            transform: rotate(-90deg);
        }
    }
}


.smf-ui-editor-device-googlepixel3 {
    height: 1015px;
    width: 492px;
    & when (@preferences-flat) {
        background-image: @frame-googlepixel3-white;
        &.horizontal {
            transform: rotate(-90deg);
        }
    }
    & when not (@preferences-flat) {
        background-image: @frame-googlepixel3-black;
        &.horizontal {
            transform: rotate(-90deg);
        }
    }
}
/******************** TOOLBAR ********************/

.smf-ui-editor-toolbar {
    .black_dropdown {
        border: none;
        background: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        .button {
            border-left: none;
            background-image: url("@{image-path}/dropdown_arrow.svg");
            background-position: 0;
            left: 0px;
            top: 5px;
            height: 9px !important;
            width: 9px !important;
            background-repeat: no-repeat;
            background-size: contain;
        }
        .lbl {
            border: none !important;
            margin: 0 !important;
            color: @text-color !important;
            padding-left: 16px !important;
        }
    }
}

/******************** STATUSBAR ********************/

.statusbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: inherit;
    height: 100%;
    background-repeat: no-repeat;
    background-size: auto 80%;
    .part1 {
        align-self: flex-start;
        background-position: left;
        margin-left: 2%;
        &.ios {
            &.dark {
                background-image: url("@{image-path}/statusbar/ios/common/dark/part1.svg");
            }
            &.light {
                background-image: url("@{image-path}/statusbar/ios/common/light/part1.svg");
            }
        }
        &.android {
            background-image: url("@{image-path}/statusbar/android/part1.svg");
        }
    }
    .part2 {
        align-self: center;
        background-position: center;
        &.ios {
            &.dark {
                background-image: url("@{image-path}/statusbar/ios/common/dark/part2.svg");
            }
            &.light {
                background-image: url("@{image-path}/statusbar/ios/common/light/part2.svg");
            }
        }
        &.android {
            background-image: url("@{image-path}/statusbar/android/part2.svg");
        }
    }
    .part3 {
        align-self: flex-end;
        background-position: right;
        margin-right: 2%;
        &.ios {
            &.dark {
                background-image: url("@{image-path}/statusbar/ios/common/dark/part3.svg");
            }
            &.light {
                background-image: url("@{image-path}/statusbar/ios/common/light/part3.svg");
            }
        }
        &.android {
            background-image: url("@{image-path}/statusbar/android/part3.svg");
        }
    }
    &-iphonex {
        &-part1 {
            background-position: center;
            background-size: 30%;
            background-repeat: no-repeat;
            flex-grow: 1;
            &.dark {
                background-image: url("@{image-path}/statusbar/ios/iPhoneX/dark/part1.svg");
            }
            &.light {
                background-image: url("@{image-path}/statusbar/ios/iPhoneX/light/part1.svg");
            }
        }
        &-part2 {
            flex-grow: 2;
        }
        &-part3 {
            background-position: center;
            background-size: 70%;
            background-repeat: no-repeat;
            flex-grow: 1;
            &.dark {
                background-image: url("@{image-path}/statusbar/ios/iPhoneX/dark/part3.svg");
            }
            &.light {
                background-image: url("@{image-path}/statusbar/ios/iPhoneX/light/part3.svg");
            }
        }
    }
    .dark {.statusbar-home{
        fill: black;
    }}
    .light{ .statusbar-home{
        fill: white;
    }}
    &-android{
            align-items: center;
        svg{
            margin-left: 3%;
            margin-right: 3%;
        }
    }
    &-ios{
        align-items: center;
        &-time {
             position: absolute;
             margin: auto;
             text-align: center;
             left: 0;
             right :0;
        }
        svg{
            margin-left: 2%;
            margin-right: 2%;
        }
        .svg-dark{
            path, rect, g {
            fill: black;
            }
        }
        .svg-light{
             path, rect, g {
            fill: white;
             }
        }
    }
}
/******************** OTHER ********************/

.uiEditor-designer-container {
  overflow: hidden;
}

div.uiEditor-designer-container * {
  box-sizing: border-box;
  user-select: none;
}

.layoutJSON {
  background: #ddd;
  border: 1px solid black;
  margin-top: 10px;
  padding: 10px;
}

.columns {
  -moz-columns: 120px;
  -webkit-columns: 120px;
  columns: 120px;
}

.react-grid-item {
  box-sizing: border-box;
}

.react-grid-item:not(.react-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}

.react-grid-item.resizing {
  opacity: 0.9;
}

.react-grid-item.static {
  background: #cce;
}

.react-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 24px;
}

.react-grid-item .minMax {
  font-size: 12px;
}

.react-grid-item .add {
  cursor: pointer;
}

.react-grid-dragHandleExample {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.react-resizable {
  position: relative;
}

.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
  background-position: bottom right;
  padding: 0 3px 3px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: se-resize;
}

.uiEditor-designer-container {
  position: relative;
}

.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top;
}

.react-grid-item.cssTransforms {
  transition-property: transform;
}

.react-grid-item.resizing {
  z-index: 1;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item>.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
  background-position: bottom right;
  padding: 0 3px 3px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: se-resize;
}

.comPlainTextContentEditable {
  -webkit-user-modify: read-write-plaintext-only;
  -webkit-line-break: after-white-space;
  word-wrap: break-word;
  cursor: text;
}

.comPlainTextContentEditable--has-placeholder::before {
  content: attr(placeholder);
  opacity: 0.5;
  color: inherit;
  cursor: text;
}

.smf-ui-editor-designer-updaterprogess {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10000000000000000;
    background-color: rgba(0,0,0, 0.5);
    display: flex;
    justify-content: center;
    rect {
        fill: #b0b1aa;
    }
    pre {
        position: absolute;
        right: 0;
        top: 15%;
        left: 0;
        bottom: 0;
        margin: auto;
        height: 0px;
        color: #848484;
        text-align: center;
        font-family: sans-serif;
        font-size: 15px;
        user-select: none;
    }
    &.wrapper {
        position: relative;
        width: 400px;
        height: 200px;
        align-self: center;
        background-color: #eaeeef;
        border-radius: 6px;
    }
}

.smf-ui-editor-designer-preview {
    background-color: rgba(210,210,210,0.7);
    background-position: center center;
    background-size: 30% 30%;
    background-repeat: no-repeat;
    &-flexlayout{
        background-image: @componentIcon-flexlayout;
    }
    &-gifimageview {
        background-image: @componentIcon-gifimageview;
    }
    &-gridview{
        background-image: @componentIcon-gridview;
    }
    &-gridviewitem{
        background-image: @componentIcon-gridviewitem;
    }
    &-imageview {
        background-image: @componentIcon-imageview;
    }
    &-listview{
        background-image: @componentIcon-listview;
    }
    &-listviewitem{
        background-image: @componentIcon-listviewitem;
    }
    &-mapview {
        background-image: @componentIcon-mapview;
    }
    &-scrollview{
        background-image: @componentIcon-scrollview;
    }
    &-shimmerflexlayout{
        background-image: @componentIcon-shimmerflexlayout;
    }
    &-view{
        background-image: @componentIcon-view;
    }
    &-videoview {
        background-image: @componentIcon-videoview;
    }
    &-webview{
        background-image: @componentIcon-webview;
    }
}

// Make last color option transparent / ColorPicker
#prop-ColorPicker>div>div:nth-child(4) :nth-child(16) :last-child :last-child {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAIAAAC3LO29AAAABGdBTUEAA1teXP8meAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMzQDW3oAAAEfSURBVHhe7dixCQAxEMRAl+b+e3r4RA0IFJmdAsRteud2vg7FwhYaXFegWNhCg+sKFAtbaHBdgWJhCw2uK1AsbKHBdQWKhS00uK5AsbCFBtcVKBa20OC6AsXCFhpcV6BY2EKD6woUC1tocF2BYmELDa4rUCwckgWSBYqFLTS4rkCxsIUG1xUoFrbQ4LoCxcIWGlxXoFjYQoPrChQLW2hwXYFiYQsNritQLGyhwXUFioUtNLiuQLGwhQbXFSgWttDgugLFwhYaXFegWNhX3+C6AsXCFhpcV6BY2EKD6woUC1tocF2BYmELDa4rUCxsocF1BYqFLTS4rkCxsIUG1xUoFrbQ4LoCxcIWGlxXoFjYQoPrChQLW2hwXYFi4fWF9/5+5B4XCR0NSgAAAABJRU5ErkJggg==') !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    opacity: 0.5 !important;
}


.smf-ui-editor-designer-headerbar-tranclucent::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: blur(20px);
    z-index: -1;
}


@keyframes shimmer-right {
    0% {
        background-position: -1200px 0;
    }
    100% {
        background-position: 1200px 0;
    }
}


@keyframes shimmer-left {
    0% {
        background-position: 1200px 0;
    }
    100% {
        background-position: -1200px 0;
    }
}

@keyframes shimmer-top {
    0% {
        background-position: 0 1200px;
    }
    100% {
        background-position: 0 -1200px;
    }
}

@keyframes shimmer-bottom {
    0% {
        background-position: 0 1200px;
    }
    100% {
        background-position: 0 -1200px;
    }
}
  
 
 /*
    //shimmer props.
    
    background: linear-gradient(to right, rgb(74, 74, 74) 4%, rgb(74, 74, 74, 0.8) 14%, rgba(74, 74, 74,0.5) 19% ,rgb(74, 74, 74, 0.8) 24%, rgb(74, 74, 74) 30%);
    background-size: 1200px 100%;
    animation-duration: 2.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer-right;
    animation-timing-function: linear;
 
 */