/*
 * Beautiful Color
 */
*
{
    box-sizing: border-box;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td
{
    margin: 0;
    padding: 0;
}

a,
a:hover,
a:active,
a:focus,
input,
input:hover,
input:active,
input:focus
{
    outline: none;
}

ul,
ol
{
    list-style: none;
}

/*
 * Beautiful Color
 */
.range-component
{
    position: relative;

    width: 120px;
    height: 4px;

    -webkit-user-select: none;
            user-select: none; 

    border-radius: 15px;
    background-color: rgba(255, 255, 255, .86);
}
.range-component .range-dot
{
    position: absolute;
    z-index: 9;
    top: -4px;
    left: 0;

    width: 12px;
    height: 12px;

    -webkit-user-select: none;
            user-select: none; 

    border-radius: 50%;
    background-color: #f1c40f;
}

html
{
    font-family: 'Segoe UI', 'Microsoft Yahei', Helvetica, Arial;
}

body
{
    overflow: hidden; 

    background-color: #3498db;
}

*
{
    -webkit-user-select: none;
            user-select: none;
}

.hide
{
    overflow: hidden; 

    width: 0;
    height: 0;

    opacity: 0;
}

.canvas-wrap
{
    position: relative;

    display: -webkit-box;
    display: flex; 
    overflow: auto;

    width: 100vw;
    height: calc(100vh - 50px);

    border: 10px solid #798f9a;
    background-color: #34495e;
}
.canvas-wrap canvas
{
    position: absolute;
    top: 0; 
    left: 0;
}
.canvas-wrap canvas.full
{
    width: 100%;
    height: 100%;
}

.control
{
    display: -webkit-box;
    display: flex;

    height: 50px;

    color: #fff; 

    -webkit-box-align: center;
    align-items: center;
}
.control .control-item
{
    display: -webkit-inline-box;
    display: inline-flex; 

    margin-left: 20px;
}
.control .control-item .iconfont
{
    font-size: 24px;

    text-shadow: 1px 1px 2px rgba(255, 255, 255, .86), -1px -1px 2px rgba(255, 255, 255, .86);
}
.control .control-item.size
{
    display: -webkit-box;
    display: flex;

    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.control .control-item.size span
{
    font-size: 18px; 

    margin-left: 10px;
}
.control .footer
{
    display: -webkit-box;
    display: flex;

    margin-right: 20px; 

    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-pack: end;
    justify-content: flex-end;
}
.control .footer button
{
    font-family: 'Segoe UI', 'Microsoft Yahei', Helvetica, Arial; 
    font-size: 18px;

    margin-left: 50px;

    color: #fff;
    border: none;
    background-color: transparent;
}
.control > .iconfont
{
    font-size: 24px;

    margin-left: 10px;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguY3NzIiwic291cmNlcyI6WyJpbmRleC5zY3NzIiwiX3V0aWwuc2NzcyIsIl9yZXNldC5zY3NzIiwicmFuZ2UtY29tcG9uZW50LnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCAnLi91dGlsJztcclxuQGltcG9ydCAnLi9yZXNldCc7XHJcbkBpbXBvcnQgJy4vcmFuZ2UtY29tcG9uZW50JztcclxuXHJcbiRjb250cm9sLWhlaWdodDogNTBweDtcclxuJGljb24tc2l6ZTogMjRweDtcclxuXHJcbmh0bWwge1xyXG4gICAgZm9udC1mYW1pbHk6IFwiU2Vnb2UgVUlcIiwgJ01pY3Jvc29mdCBZYWhlaScsIEhlbHZldGljYSwgQXJpYWw7XHJcbn1cclxuXHJcbmJvZHkge1xyXG5cdGJhY2tncm91bmQtY29sb3I6ICRibHVlO1xyXG5cdG92ZXJmbG93OiBoaWRkZW47XHJcbn1cclxuXHJcbioge1xyXG5cdHVzZXItc2VsZWN0OiBub25lO1xyXG59XHJcblxyXG4uaGlkZSB7XHJcblx0b3BhY2l0eTogMDtcclxuXHR3aWR0aDogMDtcclxuXHRoZWlnaHQ6IDA7XHJcblx0b3ZlcmZsb3c6IGhpZGRlbjtcclxufVxyXG5cclxuLmNhbnZhcy13cmFwIHtcclxuXHR3aWR0aDogMTAwdnc7XHJcblx0aGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skY29udHJvbC1oZWlnaHR9KTtcclxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XHJcblx0YmFja2dyb3VuZC1jb2xvcjogJGRlZmF1bHQ7XHJcblx0Ym9yZGVyOiAxMHB4IHNvbGlkICRtYXNzdG9uZTtcclxuXHRvdmVyZmxvdzogYXV0bztcclxuXHRkaXNwbGF5OiBmbGV4O1xyXG5cclxuXHRjYW52YXMge1xyXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xyXG5cdFx0bGVmdDogMDtcclxuXHRcdHRvcDogMDtcclxuXHJcblx0XHQmLmZ1bGwge1xyXG5cdFx0XHR3aWR0aDogMTAwJTtcclxuXHRcdFx0aGVpZ2h0OiAxMDAlO1xyXG5cdFx0fVxyXG5cdFx0Ly8gJi5jYW52YXMtbWFzayB7XHJcblx0XHQvLyBcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuXHRcdC8vIFx0bGVmdDogMDtcclxuXHRcdC8vIFx0dG9wOiAwO1xyXG5cdFx0Ly8gfVxyXG5cdH1cclxufVxyXG5cclxuLmNvbnRyb2wge1xyXG5cdGhlaWdodDogJGNvbnRyb2wtaGVpZ2h0O1xyXG5cdEBpbmNsdWRlIGZsZXgtdi1jZW50ZXI7XHJcblx0Y29sb3I6ICR3aGl0ZTtcclxuXHJcblx0LmNvbnRyb2wtaXRlbSB7XHJcblx0XHRtYXJnaW4tbGVmdDogMjBweDtcclxuXHRcdGRpc3BsYXk6IGlubGluZS1mbGV4O1xyXG5cclxuXHRcdC5pY29uZm9udCB7XHJcblx0XHRcdGZvbnQtc2l6ZTogJGljb24tc2l6ZTtcclxuXHRcdFx0dGV4dC1zaGFkb3c6IDFweCAxcHggMnB4IHJnYmEoMjU1LDI1NSwyNTUsLjg2KSwgLTFweCAtMXB4IDJweCByZ2JhKDI1NSwyNTUsMjU1LC44Nik7XHJcblx0XHR9XHJcblxyXG5cdFx0Ji5zaXplIHtcclxuXHRcdFx0QGluY2x1ZGUgZmxleC1jZW50ZXI7XHJcblxyXG5cdFx0XHRzcGFuIHtcclxuXHRcdFx0XHRtYXJnaW4tbGVmdDogMTBweDtcclxuXHRcdFx0XHRmb250LXNpemU6IDE4cHg7XHJcblx0XHRcdH1cclxuXHRcdH1cclxuXHR9XHJcblxyXG5cdC5mb290ZXJ7XHJcblx0XHRmbGV4OiAxO1xyXG5cdFx0ZGlzcGxheTogZmxleDtcclxuXHRcdGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XHJcblx0XHRtYXJnaW4tcmlnaHQ6IDIwcHg7XHJcblxyXG5cdFx0YnV0dG9uIHtcclxuXHRcdFx0Ym9yZGVyOiBub25lO1xyXG5cdFx0XHRjb2xvcjogJHdoaXRlO1xyXG5cdFx0XHRmb250LXNpemU6IDE4cHg7XHJcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR0cjtcclxuXHRcdFx0bWFyZ2luLWxlZnQ6IDUwcHg7XHJcbiAgIFx0XHRcdGZvbnQtZmFtaWx5OiBcIlNlZ29lIFVJXCIsICdNaWNyb3NvZnQgWWFoZWknLCBIZWx2ZXRpY2EsIEFyaWFsO1xyXG5cdFx0fVxyXG5cdH1cclxuXHJcblx0Pi5pY29uZm9udCB7XHJcblx0XHRmb250LXNpemU6ICRpY29uLXNpemU7XHJcblx0XHRtYXJnaW4tbGVmdDogMTBweDtcclxuXHR9XHJcbn0iLCIvKlxyXG4gKiBCZWF1dGlmdWwgQ29sb3JcclxuICovXHJcbiRyZWQ6ICNFNzRDM0M7XHJcbiRkYXJrLXJlZDogI0MwMzkyQjtcclxuJGJsdWU6ICMzNDk4REI7XHJcbiRkYXJrLWJsdWU6ICMyOTgwQjk7XHJcbiR5ZWxsb3c6ICNGMUM0MEY7XHJcbiRkYXJrLXllbGxvdzogI0YzOUMxMjtcclxuJGdyZWVuOiAjMkVDQzcxO1xyXG4kZGFyay1ncmVlbjogIzI3QUU2MDtcclxuJG9yYW5nZTogI0U2N0UyMjtcclxuJGRhcmstb3JhbmdlOiAjRDM1NDAwO1xyXG4kcHVycGxlOiAjOUI1OUI2O1xyXG4kZGFyay1wdXJwbGU6ICM4RTQ0QUQ7XHJcbiRkZWZhdWx0OiAjMzQ0OTVFO1xyXG4kZGFyay1kZWZhdWx0OiAjMkMzRTUwO1xyXG4kbWFzc3RvbmU6ICM3OThmOWE7XHJcbiRncmF5OiAjOTVBNUE2O1xyXG4kZGFyay1ncmF5OiAjN0Y4QzhEO1xyXG4kYmxhY2s6ICMwMDA7XHJcbiR3aGl0ZTogI0ZGRjtcclxuJHRyOiB0cmFuc3BhcmVudDtcclxuJGNvbG9yczogKCRyZWQ6ICNFNzRDM0MsICRibHVlOiAjMzQ5OERCLCAkeWVsbG93OiAjRjFDNDBGLCAkZ3JlZW46ICMyRUNDNzEsICRvcmFuZ2U6ICNFNjdFMjIsICRwdXJwbGU6ICM5QjU5QjYpO1xyXG5cclxuJG5hdi1oZWlnaHQ6IDUwcHg7XHJcblxyXG4vLyoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXHJcbi8vICAgICAgICAgZmxleOWxheS4rVxyXG4vLyoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqXHJcbkBtaXhpbiBmbGV4LWNlbnRlcigkZGlzcGxheTogZmxleCkge1xyXG4gICAgZGlzcGxheTogJGRpc3BsYXk7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbn1cclxuQG1peGluIGZsZXgtdi1jZW50ZXIoJGRpc3BsYXk6IGZsZXgpIHtcclxuICAgIGRpc3BsYXk6ICRkaXNwbGF5O1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxufVxyXG5AbWl4aW4gZmxleC1oLWNlbnRlcigkZGlzcGxheTogZmxleCkge1xyXG4gICAgZGlzcGxheTogJGRpc3BsYXk7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxufSIsIioge1xyXG4gICAgLXdlYmtpdC1ib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG4gICAgLW1vei1ib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcclxufVxyXG5cclxuYm9keSwgZGl2LCBkbCwgZHQsIGRkLCB1bCwgb2wsIGxpLFxyXG5oMSwgaDIsIGgzLCBoNCwgaDUsIGg2LCBwcmUsIGNvZGUsXHJcbmZvcm0sIGZpZWxkc2V0LCBsZWdlbmQsIGlucHV0LCBidXR0b24sXHJcbnRleHRhcmVhLCBwLCBibG9ja3F1b3RlLCB0aCwgdGQge1xyXG5cdG1hcmdpbjogMDtcclxuXHRwYWRkaW5nOiAwO1xyXG59XHJcblxyXG5hLGE6aG92ZXIsYTphY3RpdmUsYTpmb2N1cyxpbnB1dCxpbnB1dDpob3ZlcixpbnB1dDphY3RpdmUsaW5wdXQ6Zm9jdXN7XHJcblx0b3V0bGluZTpub25lO1xyXG59XHJcblxyXG51bCwgb2wge1xyXG5cdGxpc3Qtc3R5bGU6IG5vbmU7XHJcbn0iLCJAaW1wb3J0ICcuL3V0aWwnO1xyXG5cclxuJHJhbmdlLWhlaWdodDogNHB4O1xyXG4kZG90LXNpemU6IDEycHg7XHJcblxyXG4ucmFuZ2UtY29tcG9uZW50IHtcclxuXHR3aWR0aDogMTIwcHg7XHJcblx0aGVpZ2h0OiAkcmFuZ2UtaGVpZ2h0O1xyXG5cdGJvcmRlci1yYWRpdXM6IDE1cHg7XHJcblx0cG9zaXRpb246IHJlbGF0aXZlO1xyXG5cdGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC44Nik7XHJcblx0dXNlci1zZWxlY3Q6IG5vbmU7XHJcblxyXG5cdC5yYW5nZS1kb3Qge1xyXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xyXG5cdFx0bGVmdDogMDtcclxuXHRcdHRvcDogLSgkZG90LXNpemUgLSAkcmFuZ2UtaGVpZ2h0KSAvIDI7XHJcblx0XHR3aWR0aDogJGRvdC1zaXplO1xyXG5cdFx0aGVpZ2h0OiAkZG90LXNpemU7XHJcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeWVsbG93O1xyXG5cdFx0Ym9yZGVyLXJhZGl1czogNTAlO1xyXG5cdFx0ei1pbmRleDogOTtcclxuXHRcdHVzZXItc2VsZWN0OiBub25lO1xyXG5cdH1cclxufSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUNBQTs7R0FFRztBQ0ZILEFBQUEsQ0FBQyxDQUFDO0VBQ0Usa0JBQWtCLEVBQUUsVUFBVTtFQUM5QixlQUFlLEVBQUUsVUFBVTtFQUMzQixVQUFVLEVBQUUsVUFBVSxHQUN6Qjs7QUFFRCxBQUFBLElBQUksRUFBRSxBQUFBLEdBQUcsRUFBRSxBQUFBLEVBQUUsRUFBRSxBQUFBLEVBQUUsRUFBRSxBQUFBLEVBQUUsRUFBRSxBQUFBLEVBQUUsRUFBRSxBQUFBLEVBQUUsRUFBRSxBQUFBLEVBQUU7QUFDakMsQUFBQSxFQUFFLEVBQUUsQUFBQSxFQUFFLEVBQUUsQUFBQSxFQUFFLEVBQUUsQUFBQSxFQUFFLEVBQUUsQUFBQSxFQUFFLEVBQUUsQUFBQSxFQUFFLEVBQUUsQUFBQSxHQUFHLEVBQUUsQUFBQSxJQUFJO0FBQ2pDLEFBQUEsSUFBSSxFQUFFLEFBQUEsUUFB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 */