.nav{margin:30px 0}.nav ul{-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;height:36px;margin:30px;padding-left:0;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 1px hsla(0,0%,39%,.5);background:#fff}.nav li,.nav ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.nav li{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:50%;padding:1px 10px 2px;font-size:16px;font-weight:700;cursor:pointer;list-style:none;text-align:center;color:#999;background:#ccc}.nav li:hover{background:hsla(0,0%,78%,.5)}.nav li.active{color:#444;background:transparent}.panels{margin:30px}.panels,.panels .panel{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.control,.panels .panel{width:100%}.control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:4px;margin-bottom:10px}.control input[type=checkbox]{display:none}.control input[type=checkbox]:not(:checked)+label{color:#ccc}.control label{font-size:14px}.control .input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;height:100%;cursor:pointer;border:1px solid #ccc;border-radius:4px;background:#fff;box-shadow:0 0 1px hsla(0,0%,39%,.3)}.control .input input[type=number]{height:20px;width:30px;border:none;margin:0;padding:6px 5px 6px 10px;font-size:14px;font-family:Helvetica,sans-serif;background:none;text-align:center;-moz-appearance:textfield}.control .input input[type=number]::-webkit-inner-spin-button,.control .input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.control .input input[type=number]:focus{outline:none}.control .input .separator{width:1px;margin:1px;background:#ccc}.control .input input[type=color]{display:none}.control .input .color-zone,.control .input .color-zone .alpha-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.control .input .color-zone .alpha-container{height:6px;width:100px;margin:10px 13px;border:1px solid #ccc;border-radius:8px;background:#fff url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9Ja6LSf8AkHxfj/M0f2Ta/wDPL/x4/wCNZ13dy2Nw8ED7IlxhcA4yM9/rQBu0Vzv9rXX/AD1/8dH+FFAHRVzurf8AIQl/D+QoooAp0UUUAf/Z") repeat 50% 50%}.control .input .color-zone .alpha-container .color-stripe{width:100%;height:100%;border-radius:8px}.control .input input[type=checkbox]{opacity:0}.control .input input[type=checkbox]+label{cursor:pointer}.control .input input[type=checkbox]+label:after{display:-webkit-box;display:-ms-flexbox;display:flex;content:"";width:20px;height:20px;margin:7px 10px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE4MS4yIDI3MyAxNyAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxODEuMiAyNzMgMTcgMTYiPjxwYXRoIGQ9Ik0tMzA2LjMgNTEuMmwtMTEzLTExM2MtOC42LTguNi0yNC04LjYtMzQuMyAwbC01MDYuOSA1MDYuOS0yMTIuNC0yMTIuNGMtOC42LTguNi0yNC04LjYtMzQuMyAwbC0xMTMgMTEzYy04LjYgOC42LTguNiAyNCAwIDM0LjNsMjMxLjIgMjMxLjIgMTEzIDExM2M4LjYgOC42IDI0IDguNiAzNC4zIDBsMTEzLTExMyA1MjQtNTI0YzctMTAuMyA3LTI1LjctMS42LTM2eiIvPjxwYXRoIGZpbGw9IiMzNzM3MzciIGQ9Ik0xOTcuNiAyNzcuMmwtMS42LTEuNmMtLjEtLjEtLjMtLjEtLjUgMGwtNy40IDcuNC0zLjEtMy4xYy0uMS0uMS0uMy0uMS0uNSAwbC0xLjYgMS42Yy0uMS4xLS4xLjMgMCAuNWwzLjMgMy4zIDEuNiAxLjZjLjEuMS4zLjEuNSAwbDEuNi0xLjYgNy42LTcuNmMuMy0uMS4zLS4zLjEtLjV6Ii8+PHBhdGggZD0iTTExODcuMSAxNDMuN2wtNTYuNS01Ni41Yy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTI1My41IDI1My41LTEwNi4yLTEwNi4yYy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTU2LjUgNTYuNWMtNS4xIDUuMS01LjEgMTIgMCAxNy4xbDExNC43IDExNC43IDU2LjUgNTYuNWM1LjEgNS4xIDEyIDUuMSAxNy4xIDBsNTYuNS01Ni41IDI2Mi0yNjJjNS4yLTMuNCA1LjItMTIgLjEtMTcuMXpNMTYzNC4xIDE2OS40bC0zNy43LTM3LjdjLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0xNjkuNSAxNjkuNS03MC4yLTcxLjljLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0zNy43IDM3LjdjLTMuNCAzLjQtMy40IDguNiAwIDEybDc3LjEgNzcuMSAzNy43IDM3LjdjMy40IDMuNCA4LjYgMy40IDEyIDBsMzcuNy0zNy43IDE3NC43LTE3Ni40YzEuNi0xLjcgMS42LTYuOS0uMS0xMC4zeiIvPjwvc3ZnPg==") no-repeat 50%;opacity:.1}.control .input input[type=checkbox]:checked+label:after{opacity:1}.control .input select{border:none;background:none;height:32px;width:176px;padding-left:10px;font-size:14px;font-family:Helvetica,sans-serif;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.control .input select:focus{outline:none}.control .input select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.control .input select option{padding:2px 0 2px 10px}.color-picker-control{border:none;box-shadow:none}.color-picker-h{border:none}.color-picker .alpha-picker{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:2px;background:#fff url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9Ja6LSf8AkHxfj/M0f2Ta/wDPL/x4/wCNZ13dy2Nw8ED7IlxhcA4yM9/rQBu0Vzv9rXX/AD1/8dH+FFAHRVzurf8AIQl/D+QoooAp0UUUAf/Z") repeat 50% 50%}.color-picker .alpha-picker input[type=range]{margin:0;padding:0;width:100%;height:20px;cursor:ew-resize;-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-picker .alpha-picker input[type=range]::-moz-range-track{background:transparent}.color-picker .alpha-picker input[type=range]::-moz-range-thumb{width:0;height:14px;border-radius:0;background:transparent;border:3px solid #000;border-left-color:transparent;border-right-color:transparent}.color-picker .alpha-picker input[type=range]::-moz-focus-outer{border:none}.color-picker .alpha-picker input[type=range]::-webkit-slider-runnable-track{background:transparent}.color-picker .alpha-picker input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:20px;border-radius:0;background:transparent;border:3px solid #000;border-left-color:transparent;border-right-color:transparent}.color-picker .alpha-picker input[type=range]:focus{outline:none}.arrow_box{background:#fff;padding:20px;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 6px hsla(0,0%,39%,.3);width:214px;height:214px;z-index:2000}.arrow_box:after,.arrow_box:before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.arrow_box:after{border-color:hsla(0,0%,100%,0);border-right-color:#fff;border-width:12px;margin-top:-12px}.arrow_box:before{border-color:hsla(0,0%,80%,0);border-right-color:#ccc;border-width:13px;margin-top:-13px}.pointer{cursor:pointer}.info{padding:6px 8px;font-size:14px;background:#fff;background:hsla(0,0%,100%,.8);box-shadow:0 0 15px rgba(0,0,0,.2);border-radius:5px}.info h4{margin:0 0 5px;color:#777}.legend{line-height:18px;color:#555}.legend i{width:18px;height:18px;float:left;margin-right:8px;opacity:.7}