html{-webkit-user-select:none;-moz-user-select:none;overflow-y:auto;}
body{margin:0px;margin-left:180px;font-family:Verdana,Geneva,'微軟正黑體','新細明體',sans-serif;font-size:15px;cursor:default;overflow-y:auto;}
a{color:#000000;text-decoration:underline;}
input[type='color']{width:24px;}
/* scrollbar */
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-button{width:0px;height:0px;}
::-webkit-scrollbar-thumb{background:#444444;border:0px none #c0c0c0;}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active{background:#444444;}
::-webkit-scrollbar-track{background:#c0c0c0;border:0px none #c0c0c0;}
::-webkit-scrollbar-corner{background:transparent;}
/* editable text setting */
.editable-text{white-space:pre;}
.editable-text br{display:none;}
.editable-text *{display:inline;white-space:nowrap;}
/* cursor setting */
.move-cursor{cursor:move;}
/* ad */
.ad{width:160px;height:100%;padding:10px;position:fixed;top:0px;left:0px;}
.ad>.ad-mark{font-size:0.8em;color:#888888;margin-bottom:5px;text-align:center;}


/* entry */
.entry{width:100%;max-width:1400px;margin:0px auto;}
/* entry>head */
.head{box-sizing:border-box;padding:15px;text-align:left;background-color:#fff;border-left:1px solid #ccc;border-right:1px solid #ccc;margin:0px auto;}
.head>.title{font-size:1.4em;font-weight:bold;color:#003344;}
.head>.description{font-size:0.9em;color:#6699aa;margin-left:10px;}
.head>.user{float:right;position:relative;z-index:1;width:280px;}
.head>.user>.user-detail{position:absolute;width:100%;text-align:right;}
.head>.user>.user-detail>.user-name{font-weight:bold;padding:5px 10px;}
.head>.user>.user-detail>.user-name:after{content:" ▼"}
.head>.user>.user-detail>.user-menu{display:none;margin-top:5px;line-height:25px;font-size:0.85em;text-align:left;}
.head>.user>.user-detail>.user-menu>.user-item{padding:3px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.head>.user>.user-detail>.user-menu>.user-item:hover{background-color:#e0e0e0;}
.head>.user>.user-detail>.user-menu>.user-update{text-align:right;font-size:0.8em;background-color:#444444;color:#ffffff;}
.head>.user>.user-detail>.user-menu>.user-update:hover{background-color:#444444;}
.head>.user>.user-detail>.user-menu>.user-update>.item{cursor:default;}
.head>.user>.user-detail>.user-menu>.user-update>.item:hover{text-decoration:underline;}
.head>.user:hover>.user-detail{background-color:#ffffff;box-shadow:0px 0px 5px #000000;}
.head>.user:hover>.user-detail>.user-menu{display:block;}
@media (max-width:1100px){
  .head>.description{display:none;}
}
/* entry>starter */
.starter{box-sizing:border-box;padding:15px;background-color:#f8f8f8;border:1px solid #ccc;border-bottom-width:3px;margin:0px auto;}
.starter>.title{font-size:1.2em;margin-left:5px;}
.starter>.title>.language{font-size:0.8em;margin-left:10px;}
.starter>.separator{height:0px;border-top:1px solid #e8e8e8;margin:15px 0px;}
.starter>.srcs{display:flex;flex-direction:row;}
.starter>.srcs>.src{flex:auto;margin:5px 10px;padding:10px 0px;text-align:center;border:1px dashed #888888;height:210px;line-height:40px;}
.starter>.srcs>.src:hover{background-color:#e0e0e0;}
.starter>.srcs>.src input[type='number']{width:50px;}
.starter>.srcs>.src .start{padding:5px;width:100px;height:40px;font-size:1.1em;}
.starter>.full-version{border:1px solid #99bbcc;background-color:#e8f0ff;padding:10px 20px;line-height:30px;}
.starter>.full-version>.full-version-description>.learn-more{font-size:0.8em;}
.starter>.full-version>.full-version-features{padding:5px 10px;width:50%;display:inline-block;vertical-align:middle;}
.starter>.full-version>.full-version-status{padding:5px 10px;text-align:center;width:40%;display:inline-block;vertical-align:middle;}
.starter>.full-version>.full-version-status>.full-version-checking{margin-top:40px;color:#888888;}
.starter>.full-version>.full-version-status>.full-version-ok{margin-top:20px;display:none;}
.starter>.full-version>.full-version-status>.full-version-subscribe{margin-top:10px;display:none;}
.starter>.full-version>.full-version-status>.full-version-subscribe>.subscribe-tips{color:#888888;font-size:13px;line-height:20px;margin-top:10px;}
/* entry>bottom */
.bottom{margin:10px auto;padding:10px 0px;text-align:center;font-size:0.9em;line-height:30px;}


/* tooltip */
.tooltip{position:absolute;line-height:30px;min-height:30px;padding:0px 5px;background-color:#000;color:#fff;font-size:0.85em;border-radius:3px;opacity:0.5;}
/* ground */
.ground{width:100%;background-color:#f8f8f8;display:none;touch-action:none;}
.ground>.toolbar{width:100%;height:40px;overflow:hidden;overflow-x:auto;background-color:#e0e0e0;border-left:1px solid #888888;box-shadow:0px 1px 3px #000000;font-size:0.85em;white-space:nowrap;touch-action:none;}
.ground>.toolbar .tool *{white-space:normal;}
.ground>.toolbox{position:absolute;width:40px;border-right:1px solid #888888;border-left:1px solid #888888;background-color:#e0e0e0;touch-action:none;}
/* ground filebar */
.ground>.filebar{position:absolute;height:25px;overflow:hidden;background-color:#aaaaaa;border-top:1px solid #888888;border-bottom:1px solid #888888;touch-action:none;}
.ground>.filebar>.filetabs{width:100%;height:25px;overflow:hidden;white-space:nowrap;}
.ground>.filebar>.filetabs>.position-mark{display:inline-block;height:25px;line-height:25px;background-color:#444444;width:2px;}
.ground>.filebar>.filetabs>.filetab{display:inline-block;height:25px;line-height:25px;font-size:0.8em;background-color:#aaaaaa;border-right:1px solid #888888;overflow:hidden;cursor:pointer;}
.ground>.filebar>.filetabs>.filetab:hover,.ground>.filebar>.filetabs>.filetab:active{background-color:#bbbbbb;}
.ground>.filebar>.filetabs>.filetab-current{background-color:#ffffff;}
.ground>.filebar>.filetabs>.filetab-current:hover,.ground>.filebar>.filetabs>.filetab-current:active{background-color:#ffffff;}
.ground>.filebar>.filetabs>.filetab-moving{position:relative;opacity:0.75;}
.ground>.filebar>.filetabs>.filetab>.text{display:inline-block;vertical-align:middle;padding-left:5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ground>.filebar>.filetabs>.filetab>.zoom{display:inline-block;vertical-align:middle;padding-left:2px;}
.ground>.filebar>.filetabs>.filetab>.icon{display:inline-block;vertical-align:text-bottom;width:14px;height:14px;padding-left:2px;}
.ground>.filebar>.filetabs>.filetab>.close{display:inline-block;vertical-align:middle;padding:0px 5px;color:#888888;}
.ground>.filebar>.filetabs>.filetab>.close:hover,.ground>.filebar>.filetabs>.filetab>.close:active{color:#000000;}
.ground>.filebar>.filetabs>.filetab:last-child{margin-right:20px;}
.ground>.filebar>.controls{position:absolute;right:0px;top:0px;height:25px;background-color:#444444;display:none;}
.ground>.filebar>.controls>.scroll{display:inline-block;width:10px;height:25px;line-height:25px;font-size:0.8em;color:#bbbbbb;border-left:1px solid #888888;cursor:default;}
.ground>.filebar>.controls>.scroll:hover,.ground>.filebar>.controls>.scroll:active{color:#ffffff;}
.ground>.filebar>.controls>.scroll-active{background-color:#888888;}
/* ground desktop */
.ground>.desktop{position:absolute;overflow:hidden;touch-action:none;}
.ground>.desktop>.viewer{position:absolute;background-image:url('images/transparent-bg.png');box-shadow:0px 0px 5px #000000;margin-bottom:100px;}
.ground>.desktop>.viewer-right-padding{position:absolute;background-color:transparent;width:100px;height:1px;}
.ground>.desktop>.viewer>.layer-stack{isolation:isolate;}
.ground>.desktop>.viewer>.layer-stack>.image{z-index:10;position:absolute;}
.ground>.desktop>.viewer>.layer-stack>.text{z-index:10;position:absolute;min-width:5px;transform-origin:50% 50%;-webkit-user-select:auto;}
.ground>.desktop>.hand{z-index:101;position:absolute;top:-9999px;width:20px;height:20px;}
.ground>.desktop>.selection{z-index:101;position:absolute;cursor:move;}
.ground>.desktop>.selection-lock{z-index:100;cursor:inherit;}
.ground>.desktop>.transform-move{z-index:101;position:absolute;cursor:move;transform-origin:50% 50%;}
.ground>.desktop>.transform-rotate{z-index:102;position:absolute;width:10px;height:10px;background-color:#cc9900;border:1px solid #ffffff;border-radius:6px;cursor:crosshair;}
.ground>.desktop>.transform-resize{z-index:102;position:absolute;width:9px;height:9px;border:1px solid #ffffff;background-color:#000000;}
.ground>.desktop>.paint{z-index:101;position:absolute;top:-9999px;}
.ground>.desktop>.eyedropper{z-index:101;position:absolute;top:-9999px;width:15px;height:15px;}
.ground>.desktop>.floodfill{z-index:101;position:absolute;top:-9999px;width:15px;height:15px;}
.ground>.desktop>svg.lasso{z-index:100;position:absolute;-webkit-filter:drop-shadow(0px 0px 1px #ffffff);}
.ground>.desktop>svg.gradient{z-index:100;position:absolute;-webkit-filter:drop-shadow(0px 0px 1px #ffffff);}
.ground>.desktop>img.pen{z-index:101;position:absolute;top:-9999px;width:20px;height:20px;pointer-events:none;}
.ground>.desktop>svg.pen{z-index:100;position:absolute;-webkit-filter:drop-shadow(0px 0px 1px #ffffff);}
.ground>.sidebar{position:absolute;width:260px;border-left:1px solid #888888;background-color:#e0e0e0;overflow-x:hidden;overflow-y:auto;touch-action:none;}
.ground>.sidebar>.box{font-size:0.85em;border-top:1px solid #888888;}
.ground>.sidebar>.box>.box-head{font-weight:bold;background-color:#444444;padding:5px;}
.ground>.sidebar>.box>.box-head>.head-tab{margin-right:10px;color:#bbbbbb;cursor:pointer;}
.ground>.sidebar>.box>.box-head>.current{color:#ffffff;text-decoration:underline;}
.ground>.sidebar>.box>.box-head>.head-switcher{padding:0px 5px;color:#ffffff;float:right;cursor:pointer;}
.ground>.sidebar>.box>.box-content>.content-block{display:none;}
.ground>.sidebar>.box>.box-content>.current{display:block;}
/* toolbar */
.toolbar>.toolbox{display:none;}
.toolbar .tool{height:40px;line-height:40px;display:inline-block;margin:0px 3px;vertical-align:top;text-align:center;}
.toolbar .tool>img{vertical-align:-7px;}
.toolbar .tool>button{font-weight:bold;padding:2px;}
.toolbar .tool>button.transformed-first{width:24px;height:24px;}
.toolbar .tool>select{padding:1px;padding-right:18px;background-image:url('images/dropdown-bg.png');background-repeat:no-repeat;background-position:right center;appearance:none;-webkit-appearance:none;-moz-appearance:none;}
.toolbar .tool-separator{height:30px;margin-top:5px;margin-bottom:5px;width:0px;border-left:1px dashed #aaaaaa;}
.toolbar .tools-separator{height:30px;margin-top:5px;margin-bottom:5px;width:2px;border-right:1px solid #888888;border-left:1px solid #888888;}
/* toolbar menu */
.toolbar .menu{margin:0px;padding:0px 4px;border:1px solid transparent;box-sizing:border-box;}
.toolbar .menu:hover,.toolbar .menu:focus{background-color:#ffffff;}
.toolbar .opened{border:1px inset #ffffff;background-color:#ffffff;}
.toolbar .first-menu{padding-left:8px;}
.toolbar .menu>.menu-title{cursor:default;}
.toolbar .menu>.menu-box{z-index:200;display:none;position:absolute;transform:translate(-4px, -2px);background-color:#ffffff;box-shadow:0px 0px 5px #666666;line-height:30px;text-align:left;}
/* toolbar menu item list and sub-list */
.toolbar .menu>.menu-box>.item{padding:0px 10px;}
.toolbar .menu>.menu-box>.item:hover{background-color:#e0e0e0;cursor:default;}
.toolbar .menu>.menu-box>.item-separator{margin:5px 0px;height:0px;border-top:1px solid #aaaaaa;}
.toolbar .menu>.menu-box>.item-disabled{color:#888888;}
.toolbar .menu>.menu-box>.save-disabled{color:#888888;}
.toolbar .menu>.menu-box>.item>.submenu:after{content:" ►"}
.toolbar .menu>.menu-box>.item>.submenu-list{z-index:201;display:none;position:absolute;background-color:#ffffff;box-shadow:0px 0px 5px #666666;line-height:30px;text-align:left;width:130px;}
.toolbar .menu>.menu-box>.item>.submenu-list>.item{padding:0px 10px;}
.toolbar .menu>.menu-box>.item>.submenu-list>.item:hover{background-color:#e0e0e0;cursor:default;}
.toolbar .menu>.menu-box>.item>.submenu-list>.item-disabled{color:#888888;}
.toolbar .menu>.menu-box>.item .shortcut{float:right;font-size:0.8em;color:#888888;margin-left:30px;}
/* toolbar sub-list for sticker */
.toolbar .menu>.menu-box>.item>.submenu>img.sticker-tiny{width:16px;height:16px;margin-right:5px;vertical-align:middle;object-fit:contain;}
.toolbar .menu>.menu-box>.item>.sticker-list{text-align:center;width:215px;max-height:350px;overflow-y:auto;}
.toolbar .menu>.menu-box>.item>.sticker-list>img.sticker-small{width:32px;height:32px;padding:8px;vertical-align:middle;object-fit:contain;}
.toolbar .menu>.menu-box>.item>.sticker-list>img.sticker-small:hover{background-color:#e0e0e0;cursor:default;}
/* toolbar input */
.toolbar input[type='range']{vertical-align:middle;width:60px;}
.toolbar input[type='color']{vertical-align:middle;width:25px;}
.toolbar input[type='text'].tiny{width:32px;}
/* toolbar menu switch */
.toolbar .switch{width:50px;padding:0px;}
.toolbar .switch:after{content:"▼"}
/* toolbar img */
.toolbar img.border{border:1px solid transparent;}
.toolbar img.inset{border:1px inset #ffffff;}
/* toolbox */
.toolbox>.toolbox-head{background-color:#444444;color:#ffffff;height:8px;}
.toolbox>.toolbox-group{width:40px;height:40px;text-align:center;box-sizing:border-box;background-image:url('images/toolbox/group.png');background-size:6px 6px;background-position:right bottom;background-repeat:no-repeat;}
.toolbox>.toolbox-group:hover{background-color:#ffffff;}
.toolbox>.toolbox-group-single{background-image:none;}
.toolbox>.toolbox-group>img{width:24px;height:24px;margin-top:8px;}
.toolbox>.toolbox-group-selected{box-shadow:0px 0px 10px #888888 inset;}
.toolbox>.toolbox-group>.group-menu{z-index:200;display:none;position:absolute;background-color:#e0e0e0;border:2px ridge #ffffff;box-shadow:0px 0px 5px #666666;width:210px;}
.toolbox>.toolbox-group>.group-menu>.group-item{text-align:left;height:30px;line-height:30px;padding:0px 5px;font-size:0.85em;}
.toolbox>.toolbox-group>.group-menu>.group-item:hover{background-color:#ffffff;}
.toolbox>.toolbox-group>.group-menu>.group-item>img{width:20px;height:20px;vertical-align:middle;}
.toolbox>.toolbox-group>.group-menu>.group-item>span{cursor:default;}
.toolbox>.toolbox-separator{margin:5px 0px;height:0px;border-top:1px solid #aaaaaa;}
.toolbox>.toolbox-colors{width:40px;text-align:center;}
/* sidebar info: file and selection */
.box-content>.content-block>.info{margin:5px;}
.box-content>.content-block>.info>.half{display:inline-block;width:120px;}
.box-content>.content-block>.info img{vertical-align:middle;height:15px;}
/* sidebar info: view */
.box-content>.content-block>.surround{position:relative;outline:1px solid #888888;background-color:#eeeeee;margin:10px auto;}
.box-content>.content-block>.surround>.editable{position:absolute;outline:1px solid #aaaaaa;background-color:#ffffff;}
.box-content>.content-block>.surround>.viewable{position:absolute;outline:1px solid #880000;background-color:#ffeeee;opacity:0.5;}
/* sidebar layer */
.box-content>.content-block>.layer-settings{padding:6px;padding-bottom:0px;border-bottom:1px solid #888888;}
.box-content>.content-block>.layer-settings>.layer-setting{padding-bottom:6px;}
.box-content>.content-block>.layer-settings input[type='range']{width:140px;vertical-align:middle;}
.box-content>.content-block>.layer-settings input[type='range']::-webkit-slider-runnable-track{background-color:#ffffff;border:1px inset #ffffff;}
.box-content>.content-block>.layer-settings input[type='number']{width:40px;}
.box-content>.content-block>.layer-settings input[type='text'].tiny{width:32px;}
.box-content>.content-block>.layer-settings #layer-shadow-color-input.item-disabled{opacity:0.2;}
.box-content>.content-block>.layer-list{height:270px;max-height:270px;overflow-y:auto;touch-action:pan-y;}
.box-content>.content-block>.layer-list>.layer{margin:0px;padding:5px;height:30px;display:flex;}
.box-content>.content-block>.layer-list>.selected{background-color:#c0c0c0;}
.box-content>.content-block>.layer-list>.move{position:relative;opacity:0.5;}
.box-content>.content-block>.layer-list>.layer>.visibility{flex:0 0 20px;height:20px;margin-top:5px;}
.box-content>.content-block>.layer-list>.layer>.icon{flex:0 0 30px;margin-left:5px;text-align:center;height:30px;line-height:30px;}
.box-content>.content-block>.layer-list>.layer>.icon>canvas{display:inline-block;vertical-align:middle;position:relative;top:-2px;outline:1px solid #000000;background-image:url('images/transparent-bg-small.png');}
.box-content>.content-block>.layer-list>.layer>.icon-text{flex:0 0 30px;background:transparent url('images/text-layer.png') no-repeat scroll 50% 50%;}
.box-content>.content-block>.layer-list>.layer>.text{flex:0 1 100%;margin-left:5px;height:30px;line-height:30px;overflow:hidden;cursor:text;-webkit-user-select:auto;}
.box-content>.content-block>.layer-list>.layer>input.text{height:20px;line-height:20px;}
.box-content>.content-block>.layer-list>.layer>.styles{flex:0 0 15px;margin:0px 5px;background-image:url('images/layer-styles.png');}
.box-content>.content-block>.layer-list>.layer>.move{flex:0 0 30px;background:#aaaaaa url('images/layer-move.png') no-repeat scroll 50% 50%;cursor:move;touch-action:none;}
.box-content>.content-block>.layer-list>.inter-layer{width:100%;height:2px;background-color:#000000;}
.box-content>.content-block>.layer-side-menu{border-top:1px solid #888888;text-align:right;padding:5px 0px;font-size:0.9em;}
.box-content>.content-block>.layer-side-menu>.menu-item{padding:3px;margin:0px 2px;cursor:pointer;}
.box-content>.content-block>.layer-side-menu>.menu-item:hover{text-shadow:0px 0px 2px #888888;}
.box-content>.content-block>.layer-side-menu>.item-disabled{color:#888888;}
.box-content>.content-block>.layer-side-menu>.item-disabled:hover{text-shadow:none;}
.box-content>.content-block>.layer-side-menu>.menu-item>.menu-img{width:16px;height:16px;vertical-align:middle;}
/* sidebar path group */
.box-content>.content-block>.path-list{height:300px;max-height:300px;overflow-y:auto;}
.box-content>.content-block>.path-list>.group{margin:0px;padding:5px;height:30px;}
.box-content>.content-block>.path-list>.selected{background-color:#c0c0c0;}
.box-content>.content-block>.path-list>.group>.icon{display:inline-block;vertical-align:middle;margin-left:5px;text-align:center;width:30px;height:30px;line-height:30px;}
.box-content>.content-block>.path-list>.group>.icon>canvas{display:inline-block;vertical-align:middle;position:relative;top:-2px;outline:1px solid #000000;}
.box-content>.content-block>.path-list>.group>.text{display:inline-block;vertical-align:middle;margin-left:5px;min-width:30px;max-width:160px;height:30px;line-height:30px;overflow:hidden;cursor:text;-webkit-user-select:auto;}
.box-content>.content-block>.path-list>.group>input.text{height:20px;line-height:20px;}
.box-content>.content-block>.path-side-menu{border-top:1px solid #888888;text-align:right;padding:5px 0px;font-size:0.9em;}
.box-content>.content-block>.path-side-menu>.menu-item{padding:3px;margin:0px 2px;cursor:pointer;}
.box-content>.content-block>.path-side-menu>.menu-item:hover{text-shadow:0px 0px 2px #888888;}
.box-content>.content-block>.path-side-menu>.item-disabled{color:#888888;}
.box-content>.content-block>.path-side-menu>.item-disabled:hover{text-shadow:none;}
.box-content>.content-block>.path-side-menu>.menu-item>.menu-img{width:16px;height:16px;vertical-align:middle;}
/* helper */
.helper{z-index:500;max-width:150px;min-height:30px;padding:5px;font-size:0.75em;position:absolute;display:none;border:1px solid #886600;background-color:#c0a040;color:#000000;opacity:0;touch-action:none;}
.helper>.helper-title{font-weight:bold;}
.helper-fadeout{animation:helper-fadeout 3s;}
@keyframes helper-fadeout{
0%{opacity:1} 50%{opacity:1} 100%{opacity:0}
}
/* interactive mask */
.interactive-mask{z-index:400;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#ffffff;opacity:0;display:none;touch-action:none;}
/* general dialog */
.dialog{z-index:301;position:absolute;top:30px;width:500px;max-height:550px;background-color:#e0e0e0;border:1px solid #888888;border-radius:5px;box-shadow:0px 0px 10px #000000;display:none;touch-action:none;}
.dialog-full{width:950px;}
.dialog-wide{width:650px;}
.dialog-narrow{width:350px;}
.dialog-mask{z-index:300;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#ffffff;opacity:0;display:none;touch-action:none;}
.dialog>.dialog-close{position:absolute;top:7px;right:7px;width:16px;height:16px;border-radius:8px;background-color:#880000;}
.dialog>.dialog-close:hover{background-color:#bb0000;}
.dialog>.dialog-head{font-weight:bold;box-sizing:border-box;width:100%;padding:6px;}
.dialog>.dialog-content{background-color:#ffffff;border-top:1px solid #888888;box-sizing:border-box;width:100%;padding:6px;line-height:30px;font-size:0.85em;}
.dialog>.dialog-content .dialog-separator{width:100%;margin:5px 0px;height:0px;border-bottom:1px solid #aaaaaa;}
.dialog>.dialog-bottom{box-sizing:border-box;width:100%;padding:6px;text-align:center;}
.dialog>.dialog-full-version{color:#000000;text-align:center;position:absolute;top:0px;left:0px;width:100%;height:100%;border-radius:5px;background-color:rgba(232,240,255,0.9);border:1px solid #99bbcc;display:none;}
.dialog>.dialog-full-version>.full-version-unlock{margin:15px 0px;margin-top:20px;}
.dialog>.dialog-full-version>.full-version-tips{margin-top:15px;}
.dialog>.dialog-full-version>.full-version-tips>a{color:#667788;cursor:pointer;}
.dialog>.dialog-full-version>.full-version-countdown{margin-top:10px;font-size:0.75em;}
/* alert dialog */
.dialog-alert{z-index:701;top:100px;width:300px;display:none;touch-action:none;}
.dialog-alert-mask{z-index:700;touch-action:none;}
/* loading dialog */
.dialog-loading{
    z-index:601;position:absolute;top:100px;width:450px;height:60px;line-height:60px;color:#000000;
    text-align:center;font-size:1.2em;font-weight:bold;display:none;border-radius:50%;
    background-color:transparent;background:radial-gradient(ellipse, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%);
    touch-action:none;
}
.dialog-loading-mask{z-index:600;background-color:transparent;}
/* common use in general dialog content */
.dialog-content fieldset{border:1px solid #888888;}
.dialog-content fieldset>legend{font-weight:bold;}
.dialog-content input[type='text'].tiny{width:30px;}
.dialog-content input[type='text']{width:50px;}
.dialog-content input[type='text'].large{width:150px;}
.dialog-content input[type='text']:read-only{border-width:0px;}
.dialog-content .row{width:100%;}
.dialog-content .row>.col-title{display:inline-block;margin-right:5px;width:35%;text-align:right;}
.dialog-content .row>.col{display:inline-block;}
/* brush type manager dialog */
.dialog-content .file-brush-type-items{width:90%;max-height:250px;overflow:auto;margin:10px auto;}
.dialog-content .file-brush-type-items>.item{width:50%;display:inline-block;vertical-align:top;text-align:center;}
.dialog-content .file-brush-type-items>.item:hover{background-color:#e0e0e0;}
.dialog-content .file-brush-type-items>.item>.item-preview{display:inline-block;vertical-align:top;width:25%;overflow:hidden;}
.dialog-content .file-brush-type-items>.item>.item-diameter{display:inline-block;vertical-align:top;width:20%;overflow:hidden;}
.dialog-content .file-brush-type-items>.item>.item-remove{display:inline-block;vertical-align:top;width:50%;}
/* brush type setting dialog */
.dialog-content .brush-type-preview{line-height:normal;text-align:center;padding:5px 0px;border:1px inset #eeeeee;background-color:#ffffff;margin-top:10px;}
/* font manager dialog */
.dialog-content .file-font-items{width:90%;max-height:250px;overflow:auto;margin:10px auto;}
.dialog-content .file-font-items>.item{width:100%;}
.dialog-content .file-font-items>.item:hover{background-color:#e0e0e0;}
.dialog-content .file-font-items>.item>.item-name{display:inline-block;vertical-align:top;width:60%;margin:0px 5px;overflow:hidden;}
.dialog-content .file-font-items>.item>.item-sample{display:inline-block;vertical-align:top;width:15%;margin:0px 5px;overflow:hidden;}
.dialog-content .file-font-items>.item>.item-remove{display:inline-block;vertical-align:top;width:20%;text-align:right;}
/* gradient manager dialog */
.dialog-content .file-gradient-items{width:100%;margin-bottom:10px;text-align:center;}
.dialog-content .file-gradient-items>.item{display:inline-block;vertical-align:top;width:30px;height:30px;outline:1px solid #cccccc;margin-left:4px;margin-top:4px;background-image:url('images/transparent-bg-small.png');}
.dialog-content .file-gradient-items>.item:hover{outline:1px solid #888888;}
.dialog-content .file-gradient-items>.item-selected{box-shadow:0px 0px 10px #000000;}
.dialog-content .file-gradient-items>.item>.preview{width:100%;height:100%;}
.dialog-content .file-gradient-panel{width:400px;height:65px;margin:10px auto;}
.dialog-content .file-gradient-panel>.alpha-stops{height:15px;cursor:pointer;}
.dialog-content .file-gradient-panel>.alpha-stops>.stop{width:10px;height:15px;position:absolute;cursor:default;}
.dialog-content .file-gradient-panel>.alpha-stops>.stop>.stop-color{width:8px;height:8px;border:1px solid #ffffff;outline:1px solid #000000;background-color:#000000;}
.dialog-content .file-gradient-panel>.alpha-stops>.stop>.stop-color-current{outline:2px solid #000000;}
.dialog-content .file-gradient-panel>.alpha-stops>.stop>.stop-arrow{width:0px;height:0px;border-style:solid;border-width:5px 5px 0px 5px;border-color:#000000 transparent transparent transparent;}
.dialog-content .file-gradient-panel>.alpha-stops>.stop-middle{width:5px;height:5px;margin-top:7px;transform:rotate(45deg);border:1px solid #000000;position:absolute;cursor:default;display:none;}
.dialog-content .file-gradient-panel>.alpha-stops>.stop-middle-current{background-color:#000000;}
.dialog-content .file-gradient-panel>.gradient-spectrum-bg{height:23px;border:1px solid #888888;background-image:url('images/transparent-bg-small.png');}
.dialog-content .file-gradient-panel>.gradient-spectrum-bg>div{width:100%;height:100%;}
.dialog-content .file-gradient-panel>.color-stops{height:15px;cursor:pointer;}
.dialog-content .file-gradient-panel>.color-stops>.stop{width:10px;height:15px;position:absolute;cursor:default;}
.dialog-content .file-gradient-panel>.color-stops>.stop>.stop-arrow{width:0px;height:0px;border-style:solid;border-width:0px 5px 5px 5px;border-color:transparent transparent #000000 transparent;}
.dialog-content .file-gradient-panel>.color-stops>.stop>.stop-color{width:8px;height:8px;border:1px solid #ffffff;outline:1px solid #000000;background-color:#000000;}
.dialog-content .file-gradient-panel>.color-stops>.stop>.stop-color-current{outline:2px solid #000000;}
.dialog-content .file-gradient-panel>.color-stops>.stop-middle{width:5px;height:5px;margin-top:1px;transform:rotate(45deg);border:1px solid #000000;position:absolute;cursor:default;display:none;}
.dialog-content .file-gradient-panel>.color-stops>.stop-middle-current{background-color:#000000;}
.dialog-content .file-gradient-inputs{text-align:center;}
.dialog-content .file-gradient-inputs>input[type='number']{width:40px;}
/* image levels dialog */
.dialog-content .image-level-block{margin-left:10px;}
.dialog-content .image-level-block>canvas{border:1px solid #000000;}
.dialog-content .image-level-block>.level-spectrum{width:256px;height:10px;background:linear-gradient(to right,#000000 0%,#ffffff 100%);border:1px solid #888888;}
.dialog-content .image-level-block>.level-arrows{width:256px;height:15px;margin-left:1px;border-top:1px solid #888888;}
.dialog-content .image-level-block>.level-arrows-out{border-top-width:0px;}
.dialog-content .image-level-block>.level-arrows>.arrow{width:10px;height:10px;position:absolute;}
.dialog-content .image-level-block>.level-arrows>.black{margin-left:-5px;background-image:url('images/arrow/black.png')}
.dialog-content .image-level-block>.level-arrows>.gamma{margin-left:122px;background-image:url('images/arrow/grey.png')}
.dialog-content .image-level-block>.level-arrows>.white{margin-left:250px;background-image:url('images/arrow/white.png')}
.dialog-content .image-level-block>.level-inputs{width:256px;height:25px;}
.dialog-content .image-level-block>.level-inputs>input[type='text']{position:absolute;}
.dialog-content .image-level-block>.level-inputs>.black{margin-left:-10px;}
.dialog-content .image-level-block>.level-inputs>.gamma{margin-left:112px;}
.dialog-content .image-level-block>.level-inputs>.white{margin-left:236px;}
/* image curves dialog */
.dialog-content .image-curves-cvses{height:270px;line-height:10px;}
.dialog-content .image-curves-cvses>.output-spectrum{display:inline-block;width:10px;height:256px;background:linear-gradient(to top,#000000 0%,#ffffff 100%);border:1px solid #888888;}
.dialog-content .image-curves-cvses>.input-spectrum{width:256px;height:10px;margin-left:12px;background:linear-gradient(to right,#000000 0%,#ffffff 100%);border:1px solid #888888;}
.dialog-content .image-curves-cvses>canvas,.dialog-content .image-curves-cvses>svg{border:1px solid #000000;position:absolute;}
/* resize canvas dialog */
.dialog-content .resize-canvas-anchor{display:inline-block;width:25px;height:25px;line-height:25px;text-align:center;border:1px outset #eeeeee;}
.dialog-content .current-anchor{border:1px inset #eeeeee;background-color:#eeeeee;}
/* filter dialog */
.dialog-content .filter-layout{display:flex;}
.dialog-content .filter-layout>.filter-list{flex:none;width:180px;padding-right:10px;border-right:1px solid #888888;margin-right:10px;}
.dialog-content .filter-layout>.filter-list>.item{padding:0px 5px;cursor:pointer;}
.dialog-content .filter-layout>.filter-list>.current{background-color:#e0e0e0;}
.dialog-content .filter-layout>.filter-main{flex:auto;}
.dialog-content .filter-layout>.filter-main>.filter-preview{text-align:center;}
.dialog-content .filter-layout>.filter-main>.filter-controllers{text-align:center;}
.dialog-content .filter-layout>.filter-main>.filter-controllers>.controller{margin:5px 0px;}
.dialog-content .filter-layout>.filter-main>.filter-controllers>.controller>.title{display:inline-block;vertical-align:top;width:100px;margin-right:5px;}
.dialog-content .filter-layout>.filter-main>.filter-controllers>.controller>input[type='range']{width:175px;margin-right:5px;height:15px;vertical-align:text-top;}
.dialog-content .filter-layout>.filter-main>.filter-controllers>.controller>.display{display:inline-block;vertical-align:top;width:20px;}
/* fill and stroke dialog */
.dialog-content input[type='number']{width:50px;}
/* save as dialog */
.dialog-content input[type='range']{width:200px;margin:0px 10px;vertical-align:middle;}
.dialog-content .file-folder{max-width:100px;word-break:keep-all;overflow:hidden;}
/* layer advanced styles dialog */
.dialog-content .layer-styles-list{display:inline-block;vertical-align:top;width:150px;font-size:0.85em;}
.dialog-content .layer-styles-list>.style-item:first-child{text-indent:15px;font-weight:bold;border-bottom:1px solid #000000;}
.dialog-content .layer-styles-list>.current-item{background-color:#e0e0e0;}
.dialog-content .layer-styles{display:inline-block;vertical-align:top;border-left:1px solid #888888;padding-left:10px;width:300px;min-height:200px;}
.dialog-content .layer-styles>.layer-styles-mask{position:absolute;background-color:#ffffff;opacity:0.5;}
.dialog-content .layer-styles>.layer-styles-message{color:#880000;}
/* contextmenu */
.contextmenu{z-index:302;position:fixed;display:none;background-color:#ffffff;box-shadow:0px 0px 5px #666666;font-size:0.8em;min-width:150px;touch-action:none;}
.contextmenu>.menu-box{line-height:25px;}
.contextmenu>.menu-box>.item{padding:0px 10px;}
.contextmenu>.menu-box>.item:hover{background-color:#e0e0e0;cursor:default;}
.contextmenu>.menu-box>.item-separator{margin:5px 0px;height:0px;border-top:1px solid #aaaaaa;}
.contextmenu>.menu-box>.item-disabled{color:#888888;}
/* common use: brush type input */
.brush-type{display:inline-block;width:26px;height:26px;outline:1px solid #cccccc;vertical-align:-7px;}
.brush-type:hover{outline:1px solid #888888;}
.brush-type>.preview{font-size:0.8em;width:26px;height:26px;background-position:center center;background-repeat:no-repeat;}
.brush-type>.type-chooser{z-index:302;position:absolute;width:300px;padding:5px;background-color:#ffffff;box-shadow:0px 0px 5px #666666;line-height:normal;text-align:left;display:none;}
.brush-type>.type-chooser:focus{outline-width:0px;}
.brush-type>.type-chooser>.adjust-panel{width:300px;padding-bottom:10px;border-bottom:1px solid #aaaaaa;}
.brush-type>.type-chooser>.adjust-panel>.adjust{width:100%;height:30px;line-height:30px;}
.brush-type>.type-chooser>.adjust-panel>.adjust>.adjust-title{width:70px;margin-right:10px;text-align:center;display:inline-block;}
.brush-type>.type-chooser>.adjust-panel>.adjust>.adjust-range{width:160px;display:inline-block;vertical-align:middle;}
.brush-type>.type-chooser>.adjust-panel>.adjust>.adjust-input{width:35px;margin-left:10px;text-align:center;display:inline-block;}
.brush-type>.type-chooser>.adjust-panel>.adjust>input[type='checkbox']{vertical-align:middle;}
.brush-type>.type-chooser>.type-panel{width:280px;height:105px;margin:10px auto;border:1px inset #eeeeee;overflow-x:hidden;overflow-y:auto;}
.brush-type>.type-chooser>.type-panel>.preview{width:30px;height:30px;vertical-align:top;font-size:0.8em;background-position:center center;background-repeat:no-repeat;display:inline-block;}
.brush-type>.type-chooser>.type-panel>.preview:hover{background-color:#eeeeee;}
.brush-type>.type-chooser>.type-panel>.preview-current{outline:1px solid #aaaaaa;}
.brush-type>.type-chooser>.type-links>.left-link{float:left;}
.brush-type>.type-chooser>.type-links>.right-link{float:right;}
.brush-type>.type-chooser>.type-links>.item-disabled{color:#888888;}
/* conmmon use: font family input */
.font-family-input{display:inline-block;width:125px;height:20px;background-color:#ffffff;outline:1px solid #cccccc;vertical-align:-6px;font-size:0.85em;}
.font-family-input:hover{outline:1px solid #888888;}
.font-family-input>.family-display{width:120px;padding-left:3px;padding-right:2px;height:20px;line-height:20px;overflow:hidden;}
.font-family-input>.family-chooser{z-index:302;position:absolute;width:200px;height:400px;overflow-y:auto;overflow-x:hidden;background-color:#ffffff;box-shadow:0px 0px 5px #666666;text-align:left;display:none;}
.font-family-input>.family-chooser .item{width:195px;padding-left:5px;line-height:25px;height:25px;}
.font-family-input>.family-chooser .item:hover{background-color:#e0e0e0;cursor:default;}
.font-family-input>.family-chooser .item>.family-name{float:left;width:120px;overflow:hidden;}
.font-family-input>.family-chooser .item>.family-sample{float:right;width:60px;margin-right:10px;overflow:hidden;}
.font-family-input>.family-chooser .item-separator{margin:5px 0px;height:0px;border-top:1px solid #aaaaaa;}
/* common use: switch input */
.switch-input{display:inline-block;width:21px;height:21px;vertical-align:-7px;background-position:center center;background-size:100% 100%;background-repeat:no-repeat;}
/* common use: range input */
.range-input{display:inline-block;}
.range-input>input[type='text']{width:32px;}
.range-input>.range-trigger{padding:2px;cursor:default;}
.range-input>.range-trigger:hover{background-color:#ffffff;}
.range-input>.range-div{z-index:302;position:absolute;width:120px;background-color:#ffffff;box-shadow:0px 0px 5px #666666;line-height:35px;display:none;}
.range-input>.range-div>input[type='range']{width:100px;vertical-align:middle;}
.range-input>.range-div>input[type='range']:focus{outline-width:0px;}
/* common use: color input */
.color-input{display:inline-block;width:24px;height:20px;background-color:#000000;outline:1px solid #cccccc;vertical-align:-6px;}
.color-input:hover{outline:1px solid #888888;}
/* common use: color chooser */
.color-input>.color-chooser{z-index:302;position:absolute;width:150px;background-color:#ffffff;box-shadow:0px 0px 5px #666666;line-height:30px;text-align:left;display:none;}
.color-input>.color-chooser>.color-src{height:30px;padding:0px 10px;}
.color-input>.color-chooser>.color-src:hover{background-color:#e0e0e0;}
.color-input>.color-chooser>.color-src>.src-color{float:left;width:20px;height:14px;border:1px solid #888888;margin:7px 0px;}
.color-input>.color-chooser>.color-src>.src-title{float:left;margin-left:5px;width:100px;height:30px;line-height:30px;overflow:hidden;}
.color-input>.color-chooser>.color-src>.palette{border-width:0px;background-size:20px 16px;height:16px;margin:6px 0px;background-image:url('images/color-palette.png');}
/* common use: gradient color input */
.gradient-input{display:inline-block;width:64px;height:20px;outline:1px solid #cccccc;vertical-align:-6px;background-image:url('images/transparent-bg-small.png');background-size:6px 6px;}
.gradient-input:hover{outline:1px solid #888888;}
.gradient-input>.preview{width:100%;height:100%;}
.gradient-input>.color-chooser{z-index:302;position:absolute;width:180px;padding-bottom:5px;background-color:#ffffff;box-shadow:0px 0px 5px #666666;line-height:normal;text-align:left;display:none;}
.gradient-input>.color-chooser>.item{display:inline-block;vertical-align:top;width:30px;height:30px;outline:1px solid #cccccc;margin-left:5px;margin-top:5px;background-image:url('images/transparent-bg-small.png');}
.gradient-input>.color-chooser>.item:hover{outline:1px solid #888888;}
.gradient-input>.color-chooser>.item>.preview{width:100%;height:100%;}
.gradient-input>.color-chooser>.editor{padding:5px;margin-top:5px;}
.gradient-input>.color-chooser>.editor:hover{background-color:#e0e0e0;}
/* common use: angle input */
.angle-input>svg{width:36px;height:36px;vertical-align:middle;border:2px solid #336699;border-radius:18px;margin-right:5px;}
/* common use */
.stable-dom-structure{display:none;}
.center{text-align:center;}
.noscroll{overflow:hidden;}
.clickable{cursor:pointer;}
.fadeout{opacity:0.2;}
.bold{font-weight:bold;}
.hide{display:none;}
.hidden{visibility:hidden;}
.out-of-screen{position:absolute;top:-9999px;left:-9999px;}
.text-top{vertical-align:text-top;}
.text-bottom{vertical-align:text-bottom;}
.middle{vertical-align:middle;}
.clear{clear:both;}