@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800|Raleway:400,400i,500,500i,600,600i,700,700i,800';.control-panel{display:block;height:360px;width:280px;border:1px solid rgba(0, 0, 0, 0.2);background:#fff;padding:30px;position:fixed;top:150px;right:-280px;z-index:99;transition:all 0.3s linear;}
.control-panel .panel-opener{height:40px;width:40px;background:#fff;border:1px solid rgba(0, 0, 0, 0.2);border-right:none;position:absolute;left:-40px;text-align:center;cursor:pointer;font-family:'Caveat', cursive;}
.control-panel .panel-opener .icon-cross{display:none;}
.control-panel .panel-opener .icon-setting{display:block;}
.control-panel .panel-opener .icon-cross{font-size:30px;height:32px;line-height:30px;width:32px;position:absolute;left:4px;top:4px;}
.control-panel .panel-opener .icon-setting{font-size:30px;height:32px;line-height:30px;width:32px;position:absolute;left:4px;top:4px;-webkit-transition:transform 0.8s ease-in-out;-moz-transition:transform 0.8s ease-in-out;-ms-transition:transform 0.8s ease-in-out;-o-transition:transform 0.8s ease-in-out;transition:transform 0.8s ease-in-out;}
.control-panel .panel-opener:hover .icon-setting{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
.control-panel.show{right:-1px;}
.control-panel.show .help{display:none !important;}
.control-panel.show .icon-cross{display:block;}
.control-panel.show .icon-setting{display:none;}
.control-panel .form-control{width:100%;clear:both;margin-bottom:10px;}
.control-panel label span{font-size:.8em;font-style:italic;}
.colpick.colpick_hex{position:fixed !important;z-index:1000000 !important;top:165px !important;border-radius:0px;background:#fafafa;border:1px solid #dddddd;}
#primary-color,
#base-color{padding:10px;border-right-width:34px;border-style:solid;}
#hexchange,
#hexrefresh{float:left;height:34px;line-height:32px;padding:0 5px;margin-left:5px;}
.cssshowbtn{float:right;height:34px;line-height:34px;padding:0px 15px;font-size:1em;}
.download-mold{font-family:'Open Sans', sans-serif;font-weight:normal;width:100%;margin-top:20px;padding:10px 0;font-size:1em;}
.download-text{font-size:.8em;color:#666;margin:5px 0 0;text-align:center;clear:both;}
#cssresult{width:100%;}
@media (max-width:768px){.control-panel{display:none;}
}
.helpcursor{position:relative;}
.helpcursor .help{position:absolute;top:5px;width:180px;font-size:24px;line-height:1.2;height:auto;text-align:right;color:#eee !important;text-shadow:0 0 5px #222;font-style:italic;}
.helpcursor .help span{font-size:30px;position:absolute;top:0px;}
.helpcursor .help.left{left:-230px;}
.helpcursor .help.left span{right:-40px;}
.helpcursor .help.right{right:-220px;}
.helpcursor .help.right span{left:-30px;}