d2-ui
Version:
30 lines (26 loc) • 357 kB
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>React Color</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto:500,300,400" rel="stylesheet">
</head>
<body>
<div id="root">
<div style="font-family:Roboto;" data-reactid=".0" data-react-checksum="-322216145"><style data-reactid=".0.0">
html, body {
background: #eee;
overflow-x: hidden;
}
.flexbox-fix {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
</style><div data-reactid=".0.1"><div style="height:580px;background:#ddd url("docs/images/bg-2.jpg");background-position:center center;background-size:cover;" data-reactid=".0.1.0"><div style="max-width:780px;padding:0 20px;margin:0 auto;" data-reactid=".0.1.0.0"><div style="position:relative;" data-reactid=".0.1.0.0.0"><div style="width:auto;position:relative;padding-right:260px;" data-reactid=".0.1.0.0.0.0"><div data-reactid=".0.1.0.0.0.0.0"><div style="padding-top:40px;" data-reactid=".0.1.0.0.0.0.0.0"><div style="width:24px;height:24px;background:url("docs/images/react-color.svg");" data-reactid=".0.1.0.0.0.0.0.0.0"></div></div><div style="padding-top:30px;font-size:52px;color:#253727;" data-reactid=".0.1.0.0.0.0.0.1">React Color</div><div style="font-size:20px;line-height:27px;color:#425655;padding-top:15px;font-weight:300;max-width:320px;" data-reactid=".0.1.0.0.0.0.0.2">A Collection of Color Pickers from Sketch, Photoshop, Chrome & more</div><div style="padding-top:25px;padding-bottom:20px;" data-reactid=".0.1.0.0.0.0.0.3"><iframe src="https://ghbtns.com/github-btn.html?user=casesandberg&repo=react-color&type=star&count=true&size=large" scrolling="0" width="160px" height="30px" frameborder="0" data-reactid=".0.1.0.0.0.0.0.3.0"></iframe></div></div></div><div style="position:absolute;right:0px;top:0px;width:225px;" data-reactid=".0.1.0.0.0.1"><div style="padding-top:50px;position:relative;" data-reactid=".0.1.0.0.0.1.0"><div style="opacity:0;-ms-transform:translateY(10px);-moz-transform:translateY(10px);-o-transform:translateY(10px);-webkit-transform:translateY(10px);transform:translateY(10px);-ms-transition:all 400ms cubic-bezier(.55,0,.1,1);-moz-transition:all 400ms cubic-bezier(.55,0,.1,1);-o-transition:all 400ms cubic-bezier(.55,0,.1,1);-webkit-transition:all 400ms cubic-bezier(.55,0,.1,1);transition:all 400ms cubic-bezier(.55,0,.1,1);" class="foobarbaz" data-reactid=".0.1.0.0.0.1.0.0"><div data-reactid=".0.1.0.0.0.1.0.0.0"><div data-reactid=".0.1.0.0.0.1.0.0.0.0"><div style="background:#fff;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-ms-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);-moz-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);-o-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);-webkit-box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);box-shadow:0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);box-sizing:initial;width:225px;font-family:Menlo;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0"><div style="width:100%;padding-bottom:55%;position:relative;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;overflow:hidden;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:hsl(150,100%, 50%);-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #fff, rgba(255,255,255,0));" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #000, rgba(0,0,0,0));" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0.0.0"></div><div style="position:absolute;top:70%;left:66.66666666666667%;cursor:default;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0.0.1"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-box-shadow:inset 0 0 0 1px #fff;-moz-box-shadow:inset 0 0 0 1px #fff;-o-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px #fff;-ms-transform:translate(-6px, -6px);-moz-transform:translate(-6px, -6px);-o-transform:translate(-6px, -6px);-webkit-transform:translate(-6px, -6px);transform:translate(-6px, -6px);" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.0.0.0.1.0"></div></div></div></div></div><div style="padding:16px 16px 12px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1"><div style="display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0"><div style="width:32px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.0"><div style="margin-top:6px;width:16px;height:16px;-ms-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;position:relative;overflow:hidden;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:2;-ms-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);background:rgba(25, 77, 51, 1);" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.0.0.0"></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.0.0.1"></div></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1"><div style="height:10px;position:relative;margin-bottom:8px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0.0"><div style="margin:0 2px;position:relative;height:100%;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0.0.0"><div style="z-index:2;position:absolute;left:41.666666666666664%;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0.0.0.0"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-transform:translate(-6px, -1px);-moz-transform:translate(-6px, -1px);-o-transform:translate(-6px, -1px);-webkit-transform:translate(-6px, -1px);transform:translate(-6px, -1px);background-color:rgb(248, 248, 248);-ms-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-moz-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-o-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-webkit-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.0.0.0.0.0"></div></div></div></div></div><div style="height:10px;position:relative;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.0.0"></div></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, rgba(25, 77, 51, 0) 0%, rgba(25, 77, 51, 1) 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.1"></div><div style="position:relative;z-index:2;height:100%;margin:0 3px;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.2"><div style="z-index:2;position:absolute;left:100%;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.2.0"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-transform:translate(-6px, -1px);-moz-transform:translate(-6px, -1px);-o-transform:translate(-6px, -1px);-webkit-transform:translate(-6px, -1px);transform:translate(-6px, -1px);background-color:rgb(248, 248, 248);-ms-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-moz-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-o-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);-webkit-box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.37);" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.0.1.1.0.2.0.0"></div></div></div></div></div></div></div><div style="padding-top:16px;display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1"><div style="width:32px;text-align:right;position:relative;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1"><div style="margin-right:-4px;margin-top:12px;cursor:pointer;position:relative;z-index:2;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1.0"><svg style="width:24px;height:24px;" viewBox="0 0 24 24" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1.0.0"><path fill="#333" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1.0.0.0"></path></svg></div><div style="position:absolute;width:24px;height:28px;background:#eee;-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;top:10px;left:12px;display:none;" data-reactid=".0.1.0.0.0.1.0.0.0.0.0.1.1.1.1"></div></div></div></div></div></div><div data-reactid=".0.1.0.0.0.1.0.0.0.1"></div></div><div style="text-align:center;position:absolute;width:100%;color:rgba(255,255,255,.7);font-size:12px;margin-top:10px;" data-reactid=".0.1.0.0.0.1.0.0.1">Chrome</div></div></div></div></div><div style="position:absolute;width:100%;margin-top:40px;" data-reactid=".0.1.0.0.1"><div style="opacity:0;-ms-transform:translateY(10px);-moz-transform:translateY(10px);-o-transform:translateY(10px);-webkit-transform:translateY(10px);transform:translateY(10px);-ms-transition:all 400ms cubic-bezier(.55,0,.1,1);-moz-transition:all 400ms cubic-bezier(.55,0,.1,1);-o-transition:all 400ms cubic-bezier(.55,0,.1,1);-webkit-transition:all 400ms cubic-bezier(.55,0,.1,1);transition:all 400ms cubic-bezier(.55,0,.1,1);" class="foobarbaz" data-reactid=".0.1.0.0.1.0"><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0"><div style="width:220px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.0"><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.0.0"><div data-reactid=".0.1.0.0.1.0.0.0.0.0"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0"><div style="width:200px;padding:10px 10px 0;box-sizing:initial;background:#fff;-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-ms-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-o-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0"><div style="width:100%;padding-bottom:75%;position:relative;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:hsl(150,100%, 50%);-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #fff, rgba(255,255,255,0));" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #000, rgba(0,0,0,0));-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0.0.0"></div><div style="position:absolute;top:70%;left:66.66666666666667%;cursor:default;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0.0.1"><div style="width:4px;height:4px;-ms-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-moz-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-o-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;cursor:hand;-ms-transform:translate(-2px, -2px);-moz-transform:translate(-2px, -2px);-o-transform:translate(-2px, -2px);-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.0.0.0.1.0"></div></div></div></div></div><div style="display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1"><div style="padding:4px 0;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0"><div style="position:relative;height:10px;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0.0"><div style="margin:0 2px;position:relative;height:100%;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0.0.0"><div style="z-index:2;position:absolute;left:41.666666666666664%;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0.0.0.0"><div style="margin-top:1px;width:4px;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;height:8px;-ms-box-shadow:0 0 2px rgba(0, 0, 0, .6);-moz-box-shadow:0 0 2px rgba(0, 0, 0, .6);-o-box-shadow:0 0 2px rgba(0, 0, 0, .6);-webkit-box-shadow:0 0 2px rgba(0, 0, 0, .6);box-shadow:0 0 2px rgba(0, 0, 0, .6);background:#fff;-ms-transform:translateX(-2px);-moz-transform:translateX(-2px);-o-transform:translateX(-2px);-webkit-transform:translateX(-2px);transform:translateX(-2px);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.0.0.0.0.0"></div></div></div></div></div><div style="position:relative;height:10px;margin-top:4px;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.0.0"></div></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, rgba(25, 77, 51, 0) 0%, rgba(25, 77, 51, 1) 100%);-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.1"></div><div style="position:relative;z-index:2;height:100%;margin:0 3px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.2"><div style="z-index:2;position:absolute;left:100%;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.2.0"><div style="width:4px;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;height:8px;-ms-box-shadow:0 0 2px rgba(0, 0, 0, .6);-moz-box-shadow:0 0 2px rgba(0, 0, 0, .6);-o-box-shadow:0 0 2px rgba(0, 0, 0, .6);-webkit-box-shadow:0 0 2px rgba(0, 0, 0, .6);box-shadow:0 0 2px rgba(0, 0, 0, .6);background:#fff;margin-top:1px;-ms-transform:translateX(-2px);-moz-transform:translateX(-2px);-o-transform:translateX(-2px);-webkit-transform:translateX(-2px);transform:translateX(-2px);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.0.1.0.2.0.0"></div></div></div></div></div></div><div style="width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:rgba(25, 77, 51, 1);-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);z-index:2;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.1.0"></div><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQ…Y8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC) center left;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.1.1.1"></div></div></div><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2"><div style="display:flex;padding-top:4px;" class="flexbox-fix" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0"><div style="-webkit-box-flex:2;-moz-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.0"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.0.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="194D33" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.0.0.0"/><span style="display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.0.0.1">hex</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.1"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.1.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="25" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.1.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.1.0.1">r</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.2"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.2.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="77" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.2.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.2.0.1">g</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.3"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.3.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="51" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.3.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.3.0.1">b</span></div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.4"><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.4.0"><input style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px;" value="100" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.4.0.0"/><span style="cursor:ew-resize;display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.2.0.4.0.1">a</span></div></div></div></div><div data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3"><div style="margin-right:-10px;margin-left:-10px;padding-left:10px;padding-top:10px;border-top:1px solid #eee;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0"><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B"><div style="background:#D0021B;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#D0021B.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623"><div style="background:#F5A623;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F5A623.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C"><div style="background:#F8E71C;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#F8E71C.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A"><div style="background:#8B572A;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#8B572A.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321"><div style="background:#7ED321;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#7ED321.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505"><div style="background:#417505;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#417505.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0"><div style="background:#BD10E0;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#BD10E0.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE"><div style="background:#9013FE;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9013FE.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2"><div style="background:#4A90E2;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A90E2.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2"><div style="background:#50E3C2;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#50E3C2.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986"><div style="background:#B8E986;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#B8E986.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000"><div style="background:#000000;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#000000.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A"><div style="background:#4A4A4A;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#4A4A4A.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B"><div style="background:#9B9B9B;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#9B9B9B.0.2"> </span></div></div><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden;position:relative;display:inline-block;margin:0 10px 10px 0;vertical-align:top;cursor:pointer;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF"><div style="background:#FFFFFF;" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF.0"><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF.0.0"> </span><div style="-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:16px;height:16px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);" data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF.0.1"></div><span data-reactid=".0.1.0.0.1.0.0.0.0.0.0.0.3.0.$#FFFFFF.0.2"> </span></div></div></div></div></div></div><div data-reactid=".0.1.0.0.1.0.0.0.0.0.1"></div></div><div style="text-align:center;position:absolute;width:100%;color:rgba(0,0,0,.4);font-size:12px;margin-top:10px;" data-reactid=".0.1.0.0.1.0.0.0.0.1">Sketch</div></div></div><div style="padding-left:267px;" data-reactid=".0.1.0.0.1.0.0.1"><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0"><div data-reactid=".0.1.0.0.1.0.0.1.0.0"><div data-reactid=".0.1.0.0.1.0.0.1.0.0.0"><div style="background:#DCDCDC;-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-ms-box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);-o-box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);box-sizing:initial;width:513px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0"><div style="background-image:linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%);border-bottom:1px solid #B1B1B1;-ms-box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);-moz-box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);-o-box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);-webkit-box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);height:23px;line-height:24px;-ms-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-o-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;font-size:13px;color:#4D4D4D;text-align:center;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.0">Color Picker</div><div style="padding:15px 15px 0;display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1"><div style="width:256px;height:256px;position:relative;border:2px solid #B3B3B3;border-bottom:2px solid #F0F0F0;overflow:hidden;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:hsl(150,100%, 50%);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, #fff, rgba(255,255,255,0));" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0.0"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #000, rgba(0,0,0,0));" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0.0.0"></div><div style="position:absolute;top:70%;left:66.66666666666667%;cursor:default;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0.0.1"><div style="width:12px;height:12px;-ms-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-ms-box-shadow:inset 0 0 0 1px #fff;-moz-box-shadow:inset 0 0 0 1px #fff;-o-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px #fff;-ms-transform:translate(-6px, -6px);-moz-transform:translate(-6px, -6px);-o-transform:translate(-6px, -6px);-webkit-transform:translate(-6px, -6px);transform:translate(-6px, -6px);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.0.0.0.1.0"></div></div></div></div></div><div style="position:relative;height:256px;width:19px;margin-left:10px;border:2px solid #B3B3B3;border-bottom:2px solid #F0F0F0;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1"><div style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0"><div style="margin:0 2px;position:relative;height:100%;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0"><div style="z-index:2;position:absolute;left:0px;top:58.333333333333336%;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0"><div data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0"><div style="width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #555;-ms-transform:translate(-13px, -4px);-moz-transform:translate(-13px, -4px);-o-transform:translate(-13px, -4px);-webkit-transform:translate(-13px, -4px);transform:translate(-13px, -4px);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0.0"><div style="width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff;position:absolute;top:1px;left:1px;-ms-transform:translate(-8px, -5px);-moz-transform:translate(-8px, -5px);-o-transform:translate(-8px, -5px);-webkit-transform:translate(-8px, -5px);transform:translate(-8px, -5px);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0.0.0"></div></div><div style="width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #555;-ms-transform:translate(20px, -14px) rotate(180deg);-moz-transform:translate(20px, -14px) rotate(180deg);-o-transform:translate(20px, -14px) rotate(180deg);-webkit-transform:translate(20px, -14px) rotate(180deg);transform:translate(20px, -14px) rotate(180deg);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0.1"><div style="width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff;position:absolute;top:1px;left:1px;-ms-transform:translate(-8px, -5px);-moz-transform:translate(-8px, -5px);-o-transform:translate(-8px, -5px);-webkit-transform:translate(-8px, -5px);transform:translate(-8px, -5px);" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.1.0.0.0.0.1.0"></div></div></div></div></div></div></div><div style="width:180px;margin-left:10px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2"><div style="display:flex;" class="flexbox-fix" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0"><div style="width:60px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0"><div style="font-size:14px;color:#000;text-align:center;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.0">new</div><div style="border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.1"><div style="height:34px;background:rgb(25, 77, 51);-ms-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;-moz-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;-o-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;-webkit-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.1.0"></div><div style="height:34px;background:#194d33;-ms-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;-moz-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;-o-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;-webkit-box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;box-shadow:inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.1.1"></div></div><div style="font-size:14px;color:#000;text-align:center;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.0.2">current</div></div><div style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:20px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1"><div style="background-image:linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);border:1px solid #878787;border-radius:2px;height:20px;box-shadow:0 0 0 1px #878787;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;-ms-box-shadow:0 0 0 1px #878787;-moz-box-shadow:0 0 0 1px #878787;-o-box-shadow:0 0 0 1px #878787;-webkit-box-shadow:0 0 0 1px #878787;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.0">OK</div><div style="background-image:linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);border:1px solid #878787;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;height:20px;-ms-box-shadow:0 1px 0 0 #EAEAEA;-moz-box-shadow:0 1px 0 0 #EAEAEA;-o-box-shadow:0 1px 0 0 #EAEAEA;-webkit-box-shadow:0 1px 0 0 #EAEAEA;box-shadow:0 1px 0 0 #EAEAEA;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.1">Cancel</div><div style="padding-top:5px;padding-bottom:9px;width:80px;position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2"><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.0"><input style="margin-left:40%;width:40%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:5px;font-size:13px;padding-left:3px;margin-right:10px;" value="150" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.0.0"/><span style="left:0px;width:34px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.0.1">h</span></div><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.1"><input style="margin-left:40%;width:40%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:5px;font-size:13px;padding-left:3px;margin-right:10px;" value="67" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.1.0"/><span style="left:0px;width:34px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.1.1">s</span></div><div style="position:relative;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.2"><input style="margin-left:40%;width:40%;height:18px;border:1px solid #888888;-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;box-shadow:inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;margin-bottom:5px;font-size:13px;padding-left:3px;margin-right:10px;" value="30" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.2.0"/><span style="left:0px;width:34px;text-transform:uppercase;font-size:13px;height:18px;line-height:22px;position:absolute;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.2.1">v</span></div><div style="height:5px;" data-reactid=".0.1.0.0.1.0.0.1.0.0.0.0.1.2.0.1.2.3"></div><div style="position:relative;" data-