*{margin:0; padding: 0;user-select: none;}
body{overflow:hidden}
#drawing-board{background-i: transparent;position:fixed; display: block;cursor: crosshair;}



.tools{position: fixed;bottom: 550px;left:00px;width: 30px;height: 120px;margin-top: 15px; margin-left: 5px;}
.tools button{border-radius: 50%;width: 35px;height: 35px; background-color: rgba(255,255,255,0.7);border: 1px solid #eee;outline: none;cursor: pointer;box-sizing: border-box;margin: 3px 10px;text-align: center;color:#ccc;line-height: 5px;box-shadow:0 0 8px rgba(0,0,0,0.1); transition: 0.3s;}
.tools button.active,.tools button:active{box-shadow: 0 0 15px #00CCFF; color:#00CCFF;}
.tools button i{font-size: 18px;}




.color-group ul{list-style: none;}
.color-group ul li{width: 30px;height: 30px;margin: 5px 0px;border-radius: 50%;box-sizing: border-box;border:3px solid white;box-shadow: 0 0 8px rgba(0,0,0,0.2);cursor: pointer;transition: 0.3s;}
.color-group ul li.active{box-shadow:0 0 15px #00CCFF;}
.color-group{position: fixed;bottom: 150px;left:20px;width: 30px;height: 150px;margin-top: 15px; margin-left: 0px;}




#range-wrap{position: fixed;bottom: 360px;left:20px;width: 30px;height: 100px;margin-top: 15px; margin-left: 5px;}
#range-wrap input{transform: rotate(-90deg);width: 100px;height: 20px;margin: 0;transform-origin: 75px 75px;    border-radius: 15px;-webkit-appearance: none;outline: none;position: relative;}
#range-wrap input::after{display: block;content:"";width:0;height: 0;border:5px solid transparent;
    border-right:100px solid #00CCFF;border-left-width:0;position: absolute;left: 0;top: 5px;border-radius:15px; z-index: 0; }
#range-wrap input[type=range]::-webkit-slider-thumb,#range-wrap input[type=range]::-moz-range-thumb{-webkit-appearance: none;}
#range-wrap input[type=range]::-webkit-slider-runnable-track,#range-wrap input[type=range]::-moz-range-track {height: 10px;border-radius: 10px;box-shadow: none;}
#range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance: none;height: 20px;width: 20px;margin-top: -1px;background: #ffffff;border-radius: 50%;box-shadow: 0 0 8px #00CCFF;position: relative;z-index: 999;}