#app-container{background:#0b0c0e;height:100%;width:100%;overflow:hidden;padding-right:0;position:absolute;top:110px}#user-palettes-btn i{transition:transform .5s ease}#user-palettes-btn.active i{transform:rotate(-90deg)}#colors{height:100%;width:100%;position:relative;background:#0b0c0e}.color{cursor:pointer;float:left;height:100%;width:20%;position:absolute;text-align:center;transition:background .1s ease-in-out,box-shadow .1s ease-in-out}.color:nth-child(1){left:0}.color:nth-child(2){left:20%}.color:nth-child(3){left:40%}.color:nth-child(4){left:60%}.color:nth-child(5){left:80%}.color-info{width:100%;position:absolute;bottom:30px;transition:all .1s ease-in-out,opacity .3s ease;color:#1F2D3D;text-transform:uppercase;opacity:0.3;font-weight:500;font-size:11px}.light .color-info{color:#fff}#app-container[data-color-info='off'] .color-info{opacity:0}.color-info div{display:none}#app-container[data-color-info='name'] .color-info-name{display:block}#app-container[data-color-info='rgb'] .color-info-rgb{display:block}#app-container[data-color-info='cmyk'] .color-info-cmyk{display:block}#app-container[data-color-info='hsv'] .color-info-hsv{display:block}#app-container[data-color-info='copic'] .color-info-copic{display:block}#app-container[data-color-info='pantone'] .color-info-pantone{display:block}#app-container[data-color-info='prismacolor'] .color-info-prismacolor{display:block}.hex{width:100%;position:absolute;bottom:60px;transition:opacity .5s ease-in-out,bottom .3s ease}#app-container[data-color-info='off'] .hex{bottom:30px}.hex input{background:none;border:none;color:#1F2D3D;cursor:pointer;font-size:33px;font-weight:500;opacity:0.3;width:100%;text-align:center;text-transform:uppercase;transition:opacity .1s ease,color .1s ease,font-size .5s ease,width .5s ease}.light .hex input{color:#fff}.hex input:hover,.hex input:focus{opacity:0.7!important}.hex input::selection{background:rgba(0,0,0,0.2)}.light .hex input::selection{background:rgba(255,255,255,0.2)}.lock{width:100%;position:absolute;bottom:150px;text-align:center;transition:opacity .5s ease-in-out;color:#3c4859}.lock span{display:inline-block;opacity:0;transition:all .2s ease-in-out,opacity .1s ease-in-out;transform:scale(0.9)}.lock span i{display:inline-block;font-size:30px}.lock span .icon-lock{display:none}.color:not(.active) .lock span:hover{opacity:0.7!important}.light .lock i{color:#fff}.color:hover .lock span{opacity:0.3;transform:scale(0.9)}.color.active .lock span{opacity:0.7!important;transform:scale(1)!important}.color.active .lock .icon-lock{display:block}.color.active .lock .icon-unlock{display:none}.color:not(.active) .hex:hover+.lock i{opacity:0;transform:scale(0)}.drag{width:100%;position:absolute;bottom:310px;text-align:center;color:#3c4859}.drag i{cursor:-webkit-grab;display:inline-block;font-size:30px;opacity:0;transition:all .1s ease-in-out}.light .drag i{color:#fff}.color .drag i:hover{opacity:0.7!important}.color .drag i:active{cursor:-webkit-grabbing}.color:hover .drag i{opacity:0.3}.color .hex:hover~.drag i{opacity:0}.color.notrans{transition:none}.is_dragging .color{transition:transform .2s ease-in-out}.color.isdragging{cursor:-webkit-grabbing;opacity:1;z-index:2;transition:background .1s ease-in-out}.color.dragging-trans{transition:background .1s ease-in-out,transform .2s ease-in-out}.adjust-btn-wrapper{width:100%;position:absolute;bottom:225px;text-align:center;color:#3c4859;padding:10px}.adjust-btn-wrapper i{display:inline-block;font-size:27px;opacity:0;transition:all .1s ease-in-out}.light .adjust-btn-wrapper i{color:#fff}.color .adjust-btn-wrapper i:hover{opacity:0.7!important}.color:hover .adjust-btn-wrapper i{opacity:0.3}.color .hex:hover~.adjust-btn-wrapper i{opacity:0}.color.adjusting .adjust-btn{opacity:0.7}#adjust-container{position:absolute;display:none;height:638px;width:100%;top:0;z-index:4;padding-right:0;transition:padding-right .4s ease-in-out}.sidebar #adjust-container{padding-right:248px}#adjust-wrapper{width:100%;height:100%;position:relative}.adjust{box-shadow:rgba(0,0,0,0.04) 0 0 0 1px,rgba(0,0,0,0.1) 0 2px 10px;position:absolute;width:290px;background:#fff;border-radius:10px;bottom:300px;margin-left:-145px;transform:scale(0.9) translate3d(0,0,0);z-index:5;opacity:0;display:none;transition:opacity .2s ease,transform .2s ease,height 0s ease;transform-origin:50% 100%;padding:0!important}.adjust:hover,.adjust.hover{opacity:1!important}.adjust.visible{transform:scale(1) translate3d(0,0,0);opacity:0.1}.adjust:after{content:'';position:absolute;bottom:-8px;left:50%;margin-left:-8px;border-radius:0 0 5px 0;width:17px;height:17px;background:#fff;transform:rotate(45deg)}.adjust:before{content:'';position:absolute;bottom:-9px;left:50%;margin-left:-8px;border-radius:0 0 5px 0;width:17px;height:17px;opacity:.1;background:#0b0c0e;transform:rotate(45deg)}#adjust-0{margin-left:-50px;transform-origin:20% 100%}#adjust-0:after,#adjust-0:before{margin-left:-103px}#adjust-4{margin-left:-220px;transform-origin:80% 100%}#adjust-4:after,#adjust-4:before{margin-left:67px}.adjust .tabs{padding:20px}.adjust .tabs .range-group:not(:last-child){margin-bottom:3px}.adjust-tab{display:none}.adjust-hsv{display:block}.adjust .input-group-small:not(:last-child){margin-bottom:15px}#adjust-0{left:10%}#adjust-1{left:30%}#adjust-2{left:50%}#adjust-3{left:70%}#adjust-4{left:90%}.adjust .tabs-btns a{font-size:0.85em;padding:0 9px}.adjust label{font-size:13px}.adjust-pick-picker{height:150px;margin-bottom:12px;position:relative;border-radius:5px}.adjust-pick-s{background:-webkit-linear-gradient(right,rgba(255,255,255,0),#fff);position:absolute;width:100%;height:100%;border-radius:4px}.adjust-pick-v{background:-webkit-linear-gradient(top,transparent,#000);position:absolute;width:100%;height:100%;box-shadow:inset rgba(0,0,0,0.05) 0 0 0 1px;border-radius:4px}.adjust-pick-h{margin-top:15px}.adjust-pick-handle{cursor:-webkit-grab;background:#fff;width:20px;height:20px;border-radius:10px;margin:-10px;top:100%;left:0;box-shadow:rgba(84,82,87,0.15) 0 0 0 1px,rgba(84,82,87,0.2) 0 2px 5px;position:absolute}.adjust.adjust-hsv-tab{height:250px}.adjust.adjust-rgb-tab{height:250px}.adjust.adjust-cmyk-tab{height:306px}.adjust.adjust-pms-tab{height:323px}.adjust.adjust-pick-tab{height:273px}.adjust-pms .button{position:absolute;right:8px;top:26px;color:#3c4859;opacity:1;z-index:1;border:none;transition:all .2s ease}.adjust-pms .button.invisible{opacity:0}.adjust-pms .button.light{color:#fff}#colorblind{width:188px;top:115px;right:258px;padding:7px 20px}#colorblind a{border-bottom:1px solid #E8EDF2;height:45px;position:relative;line-height:37px;text-align:center}#colorblind a.active,#colorblind a:active{color:#474D54}#colorblind li:last-child a{border-bottom:none}#refine{width:240px;top:115px;right:166px;padding:7px 20px}#refine>div{border-bottom:1px solid #E8EDF2;height:45px;position:relative}#refine>div:last-child{border-bottom:none}#refine>div a{font-size:.8em;line-height:45px;position:absolute;top:0}#refine>div .right{right:0}#refine>div span{color:#8e98a7;display:block;line-height:45px;text-align:center}.modal.app-settings{width:350px;height:200px;margin:-100px -175px}.active-settings-container{z-index:2;position:absolute;top:21px;left:50%;transform:translateX(-50%);color:#0b0c0e;text-transform:uppercase;font-weight:500;font-size:10px;padding:0 20px;opacity:0;transition:all .3s ease;width:100%}.color.light .active-settings-container{color:#fff}.color .active-settings-container div{display:none;padding:5px 0}.mono .color:nth-child(3) .active-settings-container,.colorblind .color:nth-child(3) .active-settings-container{opacity:.3}.is_dragging .active-settings-container{opacity:0!important}.mono #monochromatic-flag{display:block}.colorblind #colorblind-flag{display:block}body.isolation .color{box-shadow:#000 0 0 0 0px,inset #fff 5px 0,inset #fff -5px 0,inset #fff 0px -10px!important}body.isolation .color:nth-child(1){box-shadow:#000 0 0 0 0px,inset #fff 10px 0,inset #fff -5px 0,inset #fff 0px -10px!important}body.isolation .color:nth-child(5){box-shadow:#000 0 0 0 0px,inset #fff 5px 0,inset #fff -10px 0,inset #fff 0px -10px!important}.modal.image-picker-select{width:350px;height:417px;margin:-209px -175px}#image-picker-select-url{margin-bottom:15px}#image-picker-select-browse-input{opacity:0;cursor:pointer;height:100%;width:100%}.modal.image-picker{width:400px;height:335px;margin:-172px -200px}#image-picker-canvas-container{text-align:center;margin-bottom:10px}#image-picker-canvas-wrapper{display:inline-block;position:relative}#image-picker-canvas{border:1px solid #E8EDF2;border-radius:5px;max-width:640px;max-height:482px}#image-picker-canvas-cursor.dragging{cursor:crosshair}#image-picker-canvas-cursor{position:absolute;top:0px;left:0px;z-index:99999;width:50px;height:50px;box-shadow:rgba(0,0,0,0.02) 0px 0px 0px 1px,rgba(0,0,0,0.05) 0px 2px 5px;cursor:-webkit-grab;overflow:hidden;border-radius:50%;margin:-23px;background:#fff;transition:transform .2s ease}#image-picker-canvas-cursor.transition{transition:left .3s ease,top .3s ease}#image-picker-canvas-cursor div{position:absolute;width:44px;height:44px;top:3px;left:3px;box-shadow:rgba(0,0,0,0.02) 0px 0px 0px 1px inset;overflow:hidden;border-radius:50%}#image-picker-canvas-cursor.transition div{transition:background .3s ease}#image-picker-canvas-cursor.dragging div{background:#fff!important}#image-picker-canvas-cursor img{image-rendering:pixelated;transform-origin:0 0;width:1000px;position:relative;user-select:none;transition:all 0s ease;opacity:0;box-shadow:rgba(0,0,0,0.02) 0px 0px 0px 1px inset}#image-picker-canvas-cursor.dragging{transform:scale(1.8)}#image-picker-canvas-cursor.dragging img{opacity:1}#image-picker-palette{height:50px;border-radius:5px;text-align:center;line-height:53px;overflow:hidden}#image-picker-palette div{cursor:pointer;float:left;width:15%;height:50px;box-shadow:inset rgba(0,0,0,0.1) 0 1px,inset rgba(0,0,0,0.1) 0 -1px;transition:width 0.3s ease;position:relative}#image-picker-palette div:first-child{box-shadow:inset rgba(0,0,0,0.1) 0 1px,inset rgba(0,0,0,0.1) 0 -1px,inset rgba(0,0,0,0.1) 1px 0;border-radius:5px 0 0 5px}#image-picker-palette div:last-child{box-shadow:inset rgba(0,0,0,0.1) 0 1px,inset rgba(0,0,0,0.1) 0 -1px,inset rgba(0,0,0,0.1) -1px 0;border-radius:0 5px 5px 0}#image-picker-palette div.active{width:40%}#image-picker-palette div .image-picker-palette-hex{opacity:0;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0px);text-transform:uppercase;font-weight:500;transition:opacity 0.1s ease-in-out}#image-picker-palette div.light .image-picker-palette-hex{color:#fff}#image-picker-palette div.active .image-picker-palette-hex{opacity:.7}#image-picker-palette div .palette-bullet{width:10px;height:10px;border-radius:50%;background:#1F2D3D;display:block;transform:translate3d(-50%,-50%,0);position:absolute;top:50%;left:50%;opacity:0;transition:all .1s ease-in-out}#image-picker-palette div:not(.active):hover .palette-bullet{opacity:0.3}#image-picker-palette div.light .palette-bullet{background:#fff}#image-picker-buttons{margin-top:15px}#image-picker-buttons button{float:left;width:32%;padding:18px 15px 18px;margin-right:2%}#image-picker-buttons>button:last-child{margin-right:0}#image-picker-browse-area{width:100%;height:137px;border:1px dashed #d3dce6;border-radius:5px;position:relative;color:#d3dce6;cursor:pointer;transition:all .1s ease-in-out}#image-picker-browse-area:hover,#image-picker-browse-area.drop{color:#8e98a7}#image-picker-browse-area>i{position:absolute;top:40px;font-size:40px;left:50%;margin-left:-20px}#image-picker-browse-area .error-i{position:absolute;right:10px;top:10px;display:none;color:#E0356C;z-index:10}#image-picker-browse-area.error .error-i{display:block}#image-picker-browse-area-browse-text,#image-picker-browse-area-drop-text{text-align:center;position:absolute;width:100%;bottom:20px;font-size:13px}#image-picker-browse-area-drop-text{display:none}#image-picker-browse-area.drop #image-picker-browse-area-drop-text{display:block}#image-picker-browse-area.drop #image-picker-browse-area-browse-text{display:none}#image-picker-browse-area.spinning i,#image-picker-browse-area.spinning div{display:none}#image-picker-browse-area .spinner{display:none}#image-picker-browse-area.spinning .spinner{display:block}#tutorial-overlay{width:0;height:0px;position:fixed;z-index:12;top:-100px;left:-100px;border-radius:5px;display:none;transition:all .5s ease;border:2000px solid rgba(31,45,61,0.85);margin:-1000px;box-sizing:content-box;transform:translate3d(-1000px,-1000px,0)}.modal.app-tutorial-begin{width:350px;height:208px;margin:-104px -175px}.modal.app-tutorial-end{width:350px;height:228px;margin:-114px -175px}.modal.app-tutorial{width:350px;height:222px;margin:-111px -175px}#app-tutorial-pages{height:54px;position:relative}#app-tutorial-pages p{display:none;margin:0!important;position:absolute;top:50%;transform:translate3d(0,-50%,0);width:100%;padding:10px}#palette-shades{height:100%;width:100%;position:absolute;z-index:3;display:none;box-shadow:inset #0b0c0e -1px 0}.palette-shades-row{width:100%;height:0%;transform:translate3d(0,0,0);transition:height 0.5s cubic-bezier(0.3,0,0.3,1);cursor:pointer;position:relative;left:-1px}.palette-shades-row.active{height:100%}#palette-shades.visible .palette-shades-row{height:4.7619%}#palette-shades.visible .palette-shades-row.active{height:4.7619%}.palette-shades-col{width:20%;height:100%;float:left;position:relative;transition:background .1s ease-in-out,box-shadow .1s ease-in-out;box-shadow:inset #fff 0 0 0}.palette-shades-col span{background:#3c4859;width:10px;height:10px;display:block;border-radius:50%;position:absolute;top:50%;margin-top:-5px;left:15px;opacity:0}.palette-shades-col.light span{background:#fff}#palette-shades.visible .palette-shades-row.active .palette-shades-col:first-child span{opacity:.3;transition:opacity .3s ease-in-out .5s}.palette-shades-col div{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);font-size:16px;text-transform:uppercase;font-weight:500;opacity:0;transition:all .3s ease,box-shadow .1s ease-in-out;margin-top:1px}#palette-shades.visible .palette-shades-row:hover .palette-shades-col div{opacity:.3}.palette-shades-col.light div{color:#fff}body.isolation #palette-shades{padding-bottom:10px;box-shadow:none}body.isolation .palette-shades-col{box-shadow:inset #fff 5px 0,inset #fff -5px 0}body.isolation .palette-shades-col:first-child{box-shadow:inset #fff 11px 0,inset #fff -5px 0}body.isolation .palette-shades-col:last-child{box-shadow:inset #fff 5px 0,inset #fff -9px 0}#palette-shades-btn i{transition:transform .5s ease-in-out}#palette-shades-btn.active i{transform:rotate(-90deg)}.color .shades{width:100%;position:absolute;bottom:390px;text-align:center;color:#3c4859}.color .shades-btn{cursor:pointer;display:inline-block;font-size:21px;opacity:0;transition:all .1s ease-in-out}.color.light .shades-btn{color:#fff}.color .shades-btn:hover{opacity:0.7!important}.color:hover .shades-btn{opacity:0.3}.color-shades-container{height:100%;width:100%;position:absolute;z-index:3;display:none;left:-1px;transition:padding .5s ease-in-out}.color:nth-child(5) .color-shades-container{box-shadow:#0b0c0e 1px 0}body.isolation .color-shades-container{padding:0px 4px 10px 6px;box-shadow:none}body.isolation .color:nth-child(5) .color-shades-container{padding:0px 9px 10px 6px;box-shadow:#0b0c0e 1px 0}body.isolation .color:nth-child(1) .color-shades-container{padding:0px 4px 10px 10px}.color-shade{width:100%;height:0%;transform:translate3d(0,0,0);transition:height 0.5s cubic-bezier(0.3,0,0.3,1);cursor:pointer}.color-shade.active{height:100%}.color-shades-container.visible .color-shade{height:4.7619%}.color-shades-container.visible .color-shade.active{height:4.7619%}.color-shade span{background:#3c4859;width:10px;height:10px;display:block;border-radius:50%;position:absolute;top:50%;margin-top:-5px;left:15px;opacity:0}.color-shade.light span{background:#fff}.color-shades-container.visible .color-shade.active span{opacity:.3;transition:opacity .3s ease-in-out .5s}.color-shade div{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);font-size:16px;text-transform:uppercase;font-weight:500;opacity:0;transition:all .3s ease,box-shadow .1s ease-in-out;margin-top:0}.color-shades-container.visible .color-shade:hover div{opacity:.3}.color-shade.light div{color:#fff}