::-webkit-scrollbar{background:#ddd;width:7px}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:10px}::-webkit-slider-runnable-track{background:#555}::-webkit-slider-thumb{background:#efefef}body{font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.App,body{background:#fff}.App{display:block;-webkit-transition:background .3s,color .3s,-webkit-filter .3s;transition:background .3s,color .3s,-webkit-filter .3s;transition:filter .3s,background .3s,color .3s;transition:filter .3s,background .3s,color .3s,-webkit-filter .3s}h1,h2,h3,h4,h5,h6{display:block;width:100%;text-align:center}a{color:#eee}button{padding:5px 8px;margin:0 2px;font-family:monospace;font-size:1.2em;cursor:pointer;background:rgba(0,0,0,.2);border:0}button:hover{background:rgba(0,0,0,.3)}button:focus{outline:0}.buttons{overflow:hidden;border-radius:0 10px 10px 10px}input{border:0;border-bottom:2px solid #aaa;background:#555;color:#aaa;padding:5px 8px;margin:0 10px 20px}input:focus{outline:0}select{background:hsla(0,0%,100%,.8);border:0;border-bottom:2px solid #222;border-radius:0;padding:3px 5px;margin-left:8px;cursor:pointer;-webkit-transition:border-radius .2s;transition:border-radius .2s}select:focus{outline:0;border-bottom:2px solid #888}select:hover{border-radius:0 5px 0 0}.range-slider{background:rgba(0,0,0,.2);margin-top:1px;width:125px}.range-slider input{width:75px;display:inline-block;margin:3px 0 0 8px;padding:5px 0 1px}.range-slider .label{background:#222;display:inline-block;width:22px;text-align:center;color:#fff;border-radius:0 5px 5px 0;font-family:monospace;padding:4px 5px;font-size:.8em;position:relative;bottom:8px;left:2px}.range-slider .label:hover{opacity:.8;cursor:pointer}#tooltip{background:#fff;color:#777;font-family:monospace;font-size:11px;padding:5px 10px;border:1px solid #999;border-radius:0 10px 10px 10px;pointer-events:none;z-index:999;position:fixed;left:-500px}#tooltip,.center{text-align:center}.center{display:block;width:100%}.hidden{opacity:0;-webkit-transition:opacity .1s;transition:opacity .1s;pointer-events:none}.error{display:block;width:100%;text-align:center;opacity:.5;font-style:italic}.panel{display:inline-block;background:rgba(0,0,0,.1);overflow:auto;width:50%;box-sizing:border-box;padding:10px 0 30px}.panel.emoji-picker{position:absolute;left:0;top:0;height:100%}.panel.layers{top:50%}.panel.display,.panel.layers{position:absolute;right:0;height:50%}.panel.display{background:hsla(0,0%,100%,.8) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAA1SURBVEhL7c2hAQAACIRA9x/2V9BiRztXiFSe+skBcoAcIAfIAart2X7OHCAHyAFygByAZAAHH46mpME+jgAAAABJRU5ErkJggg==);top:0}.fa{pointer-events:none}.fa.hflip{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa.fa-info{position:relative;top:1px}.fa.small{font-size:.5em}.fa.fa-circle.small{position:relative;bottom:1px}.fa.fa-chevron-left,.fa.fa-chevron-right{position:relative;top:2px}.fa.fa-chevron-down,.fa.fa-chevron-up{margin-left:-1px;margin-right:-1px}.fa.fa-random{position:relative;top:2px;left:1px}.fa.fa-bars,.fa.fa-remove,.fa.fa-save,.fa.fa-trash{position:relative;top:1px}.fa.fa-remove{left:1px}.fa.fa-arrows-v,.fa.fa-undo{position:relative;top:1px}.fa.fa-arrows-v{padding:0 3px}.fa.fa-arrows-h{position:relative;top:2px;left:1px;margin:auto -2px}.fa.fa-cloud-download{position:relative;top:2px;margin:auto -1px}.emoji-picker{text-align:center;padding-bottom:70px}.emoji-picker .section{margin:0 0 10px}.emoji-picker .section,.emoji-picker .section.closed{-webkit-transition:max-height .2s;transition:max-height .2s}.emoji-picker .section.closed{max-height:51px;overflow:hidden}.emoji-picker .section .fa{opacity:.3;position:relative;right:35px;float:right}.emoji-picker label{text-align:center;width:100%;display:block}.emoji-picker .buttons.main{position:absolute;top:35px;right:35px}.emoji-picker .emoji-icon{background:#eee;display:inline-block;padding:5px;width:64px;height:64px}.emoji-picker .emoji-icon:hover{background:#fff;cursor:pointer}.emoji-picker .emoji-icon:active{background:#efefef}.emoji-picker .emoji-icon img{width:64px;height:64px}.emoji-picker .emoji-icon span{display:none}.emoji-picker .tooltip{position:fixed;bottom:0;left:0;background:#ccc;color:#999;font-size:1.2em;padding:16px 0 18px;pointer-events:none;width:50%}.emoji-picker .error{margin-top:20px}.layers .buttons.main{position:absolute;top:35px;right:30px}.layers .layer-icon{width:80%;min-width:350px;max-width:400px;background:rgba(0,0,0,.1);border-left:0;margin:5px auto 0;box-sizing:border-box;border-radius:0 10px 10px 0;padding:10px 10px 5px;cursor:pointer;-webkit-transition:border .2s,background .1s,margin .2s;transition:border .2s,background .1s,margin .2s}.layers .layer-icon.active,.layers .layer-icon:hover{background:rgba(0,0,0,.15);-webkit-transition:border .1s,background .1s,margin .1s;transition:border .1s,background .1s,margin .1s}.layers .layer-icon.active{border-left:4px solid #222}.layers .layer-icon.active .icon{margin-left:-4px;-webkit-transition:margin .1s;transition:margin .1s}.layers .layer-icon.active .label{width:190px}.layers .layer-icon .icon{display:inline-block;width:40px;height:40px;overflow:hidden;background:hsla(0,0%,100%,.5);border-radius:5px;-webkit-transition:opacity .1s,background .1s;transition:opacity .1s,background .1s}.layers .layer-icon .icon:hover{opacity:.7;cursor:pointer}.layers .layer-icon .icon.hidden{display:inline-block;background:rgba(0,0,0,.2);pointer-events:all;opacity:.7}.layers .layer-icon .icon img{width:40px}.layers .layer-icon .buttons{float:right}.layers .layer-icon .label{display:inline-block;vertical-align:top;margin-left:10px;line-height:17px;width:190px;position:relative;top:2px;word-break:break-all}.layers .layer-icon .small{font-size:.9em;opacity:.6;font-family:monospace}.display .emoji-display{position:absolute;border-radius:4px;pointer-events:none;-webkit-filter:drop-shadow(0 0 8px transparent);transition:filter .05s,-webkit-filter .05s,opacity .1s}.display .emoji-display img{pointer-events:auto}.display .emoji-display.selected{-webkit-filter:drop-shadow(0 0 8px rgba(0,0,0,.5));-ms-filter:"progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";filter:"progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')"}.display .emoji-display-container{box-shadow:0 0 20px transparent;border:1px dashed #aaa;position:relative;top:30%;-webkit-transition:box-shadow .2s,background .2s;transition:box-shadow .2s,background .2s}.display .emoji-display-container:hover{box-shadow:0 0 20px rgba(0,0,0,.1);background:rgba(0,0,0,.05)}.display .emoji-display-container .grid{z-index:900}.display .emoji-display-container .grid:after,.display .emoji-display-container .grid:before{content:"";width:64px;height:64px;position:absolute;top:-1px;left:-1px;border:1px dashed #aaa}.display .emoji-display-container .grid:after{position:absolute;top:64px;left:64px}.display .options{position:absolute;bottom:31px;left:35px;overflow:hidden;border-radius:0 10px 10px 10px}.display .options .divider{display:block;width:100%;height:0}.display .options button{width:40px;height:40px;margin:1px;text-align:center}.display .options button:active{background:rgba(0,0,0,.5)}.display .options .multiplier{width:100%;display:block;text-align:center;font-family:monospace;padding:2px 0;background:rgba(0,0,0,.15);color:#555}.display .options .multiplier b{color:#fff;margin:0;padding:0 3px;background:#888;font-weight:400}.display .options .multiplier span{margin:0 5px;padding:0 3px}.display .options .fa{width:15px;height:15px;color:#222}.display .options .fa.fa-circle{padding-top:11px}.display .options .fa.fa-arrows-h{padding-right:4px}.display .options .fa.fa-chevron-down,.display .options .fa.fa-chevron-up{padding-right:2px}.display .options .fa.fa-chevron-right{padding-left:2px}.display .options .fa.fa-chevron-left,.display .options .fa.fa-undo.hflip{padding-right:2px}.display .info{position:absolute;bottom:30px;right:35px;text-align:right;font-family:monospace;font-size:1.1em}.display .info span{display:block}.display .buttons.top{position:absolute;top:35px;right:30px;text-align:right}.emoji-display-container{width:128px;height:128px;margin:0 auto;overflow:hidden;position:absolute;top:0;-webkit-transition:box-shadow .2s,background .2s;transition:box-shadow .2s,background .2s}.emoji-display-container .emoji-display,.emoji-display-container img{position:absolute}.overlay{width:100%;height:100%;z-index:100;background:rgba(0,0,0,.5);overflow:hidden;position:fixed;top:0;left:0;-webkit-transition:opacity .2s,height .2s;transition:opacity .2s,height .2s}.overlay.hidden{height:0}.overlay .overlay-inner{width:75%;max-width:800px;background:#222;color:#ddd;border-radius:10px;margin:10% auto 0;box-sizing:border-box;padding:25px}.overlay label{font-size:.8em}.overlay button{color:#ddd;background:#555}.overlay button:hover{background:#444}.overlay .header{font-size:2.5em;padding:0 0 10px 10px;border-bottom:1px solid #ddd}.overlay .body{display:block;font-size:1.3em;color:#aaa;overflow:auto;max-height:50%;padding:20px 10px}.overlay .footer{text-align:right;padding-top:10px;border-top:1px solid #555}.overlay .footer a{background:hsla(0,0%,100%,.2);padding:5px 8px;margin:0 2px 0 3px;cursor:pointer;font-size:1.2em;font-family:monospace}.overlay .footer a:hover{background:hsla(0,0%,100%,.15)}.loading{text-align:center;font-size:1.7em;z-index:999;color:#eee;position:absolute;top:0;left:0;-webkit-transition:opacity .1s,height 0s;transition:opacity .1s,height 0s}#save-overlay canvas{width:128px;height:128px;background:#fff}.canvas-container{margin-right:10px;display:inline-block}.canvas-container canvas{border:1px solid #444}.canvas-container span{display:block;font-size:.7em;font-family:monospace;color:#666}.overlay.load .body{text-align:center}.overlay.load .saved-emoji{display:inline-block;width:128px;overflow:hidden;margin:5px;position:relative;top:0}.overlay.load .saved-emoji .emoji-display-container{border:1px solid #444;position:absolute;top:0;width:128px;height:128px;margin:0;padding:0;cursor:pointer}.overlay.load .saved-emoji .buttons{position:relative;top:1px;left:1px;width:121px;height:128px;background:rgba(0,0,0,.5);border-radius:0;font-size:.8em;padding-left:6px;z-index:999;opacity:0;-webkit-transition:opacity .1s;transition:opacity .1s}.overlay.load .saved-emoji .buttons button{position:relative;top:52px;right:3px}.overlay.load .saved-emoji:hover .buttons{opacity:1}.overlay.load .saved-emoji .label{font-size:.9em;font-family:monospace;margin:2px 0 5px 5px}.save-overlay .body{text-align:center}.save-overlay .body button{font-size:.9em;margin:0;position:relative;right:7px}.save-overlay .fake-canvas{height:150px;width:128px;display:block;margin:0 auto;position:relative;top:0}.welcome-page{background:hsla(0,0%,100%,.9)}.welcome-page .overlay-inner{background:#eee;max-width:400px;text-align:center;border-radius:0 25px 25px 25px}.welcome-page h1{margin:-4px auto 20px;color:#ccc}.welcome-page .welcome-option{display:inline-block;margin:0 20px;padding:10px 25px;border-radius:0 15px 15px 15px;cursor:pointer;-webkit-transition:background .1s;transition:background .1s}.welcome-page .welcome-option:hover{background:rgba(0,0,0,.05)}.welcome-page .welcome-option .icon{font-size:3em;display:block}.welcome-page .welcome-option .label{display:block;margin-top:5px}.App.invert{background:#222;color:#eee;-webkit-transition:background .3s,color .3s;transition:background .3s,color .3s}.App.invert .emoji-picker,.App.invert .layers{background:#222;-webkit-transition:background .3s;transition:background .3s}.App.invert button{background:#555}.App.invert button:hover{background:#444}.App.invert .buttons.options button{background:rgba(0,0,0,.2)}.App.invert .buttons.options button:hover{background:rgba(0,0,0,.3)}.App.invert .buttons.options button .fa{color:#222}.App.invert .fa{color:#eee;-webkit-transition:background .3s;transition:background .3s}.App.invert .emoji-icon{background:#333}.App.invert .emoji-icon:hover{background:#555}.App.invert .tooltip{background:#454545}.App.invert .layer-icon{background:#333}.App.invert .layer-icon.active{border-color:#eee}.App.invert .info{color:#222}.App.invert .welcome-page .fa{color:#aaa}
/*# sourceMappingURL=main.83530134.chunk.css.map */