.zindexDebug {z-index:999;}
.zindexMenu {z-index:12;}
.zindexWizard {z-index:11;}
.zindexColorByTone {z-index:10;}
.zindexExportToolBar {z-index:9;}
.zindexExport {z-index:8;}
.zindexTopSystemBar {z-index:7;}
.zindexTopToolBar {z-index:6;}
.zindexInputBox {z-index:5;}
.zindexPin {z-index:4;}
.zindexZhu {z-index:3;}
.zindexChar {z-index:2;}
.zindexTone {z-index:1;}
.zindexLRPreview {z-index:1;}
.zindexBG {z-index:0;}

html {
    /*overflow: hidden;
    width: 100%;*/
    /*line-height:1.5 !important;*/
    line-height:normal !important;
}

body {
    margin: 0;
    overflow: hidden;
    /*top:0.5px;
    bottom:0.5px;
    height: 100%;
    position: fixed;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;*/
}



.clsWZBtn {
    font-family: Arial, "PingFang TC", "PingFang SC", "微軟正黑體", "Microsoft JhengHei" !important;
    min-width: 120px !important;
    vertical-align: bottom !important;
}

.clsGPSTContainer{
    width: 100%;
    height: 100%;
    position: absolute;  
    top:0px;  
    left:0px;
    overflow: hidden;
    background: linear-gradient(45deg, rgba(48, 48, 48, 0.7) 0%, rgba(32,32,32,0.9) 40%,rgba(48,48,48,0.7) 100%);
}

.clsWizardGPSTRow.clsTop, .clsWizardGPSTRow.clsBottom{
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    
    
}

.clsWizardGPSTRow.clsMiddle{
    width: 100%;
    height:100%;
    overflow-y: scroll;
    overflow-x:hidden;
    padding: 10px 0 10px 0;
    flex-grow: 20;
    position: absolute;
    top:0;
}

.clsWizardGPSTRow.clsTop{
    min-height: 45px;
    position: absolute;
    background: linear-gradient(00deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.9) 100%);
}

.clsWizardGPSTRow.clsBottom{
    min-height: 60px;
    position:absolute;
    bottom:0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.9) 100%);
}

.clsWizardGPSTTopTitle{
    color:#fff;
    text-shadow: 1px 1px 2px #000;
    padding:10px;
    width:100%;
    max-width: 550px;
    text-align: center;
    position: absolute;
}
.clsWizardGPSTConfirmBtn{
    display: inline-block;
    padding: 10px;
    width: min(40%,100px);
    margin-bottom: 10px;
    background: linear-gradient(135deg, #444 0%,#222 40%,#444 100%);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
    font-weight: bold;
    opacity: 0.5;
}
.selected .clsWizardGPSTConfirmBtn{
    opacity: 1;
}

.clsWizardGPSTBtnWraper{
    width:100%;
    max-width: 550px;
    text-align: center;
    
}

.clsWizardGPSTClose{
    padding: 0 30px 0 30px;
    text-align: center;
    color:#000;
    display: inline-block;
    position: absolute;
    right:0;
}
.clsWizardGPSTClose:hover, .clsWizardGPSTNextShow:hover{
    background-color: rgba(255,255,255,0.3);
}

.clsWizardGPSTNextShow{
    padding:20px 0 20px 0;
    width:100%;
    max-width: 550px;
    color:#fff;
    text-shadow: 1px 1px 2px #000;
    display: block;
    font-size: min(24px, 8vw);
    position:fixed;
    bottom:0;
}



.clsWizardGPSTBlockDesc{
    font-size: min(32px,5vmin);
    max-width: 500px;
    padding:5px;
    display: inline-block;
    text-align: left;
}

.clsWizardGPSTBlock{
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    width:90%;

    border:4px solid rgb(172, 172, 172);
    border-radius: 3vmin;
    background-color: #000;
    color:#fff;
    text-align: center;
    opacity: 0.6;
}

.clsWizardGPSTBlock.clsS{
    margin-top: 45px;
}

.clsWizardGPSTBlock.clsST{
    margin-bottom: 140px;
}

.clsWizardGPSTBlock.selected{
    /* max-width: 600px;
    width:90%; */
    opacity: 1;
}

.clsWizardGPSTBlockMiddleSpace{
    width: 5%;
}

.clsgpstimg{
    max-width: min(50%, 150px);
    max-height: 160px;
    margin: 5px 5px 0 0;
    display: inline-block;
    padding-right:5px;
    float:left;
}

.selected .clsgpstimg {
    
}

/* .clsWizardContainer,  */
.clsFontConfigContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #fff;
    position: absolute;
}

/* .clsIntroHide {
    visibility: hidden;
} */

.clsWizardContainer {
    width: 100%;
    /* 20210301 merge intro with blog cache */
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    background-color: #fff;
    position: absolute;
}

.clsIntroBlogContainer{
    flex-grow: 2;
    width: 100%;
    height: 100%;
}

.clsIntroBlogIframe{
    display: none;
    width: 100%;
    height: 100%;
    border:0;
}

/* .clsWizardContainer{
    display: none !important;
} */

.clsWizardGSlideLinkWraper{
    position: relative;
    display:inline-block;
    text-align: center;
}
/* .clsWizardText{
    font-size:1vmin;
} */

.clsWizardTitleImgContainer{
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis:15vh;
    /*background-color: #f00;*/
    display:flex;
    justify-content:center;
    align-items:flex-end;
    flex-direction: row;
    /* cursor:pointer; */
}

.clsWizardImgContainer{
    flex-grow: 1;
    flex-shrink: 0;
    /*background-color: #0f0;*/
    display: flex;
    flex-direction: row;
    justify-content:center;
    padding:10px;
}
/* 
.clsIntroOKContainer{
    flex-grow: 0;
    flex-shrink: 1;
    display:flex;
    justify-content: center;
} */

.clsIntroOKBtnContainer{
    /* white-space: nowrap; */
    text-align: center;
    width: 100%;
    /* background-color: #eee; */
    background: linear-gradient(45deg, rgba(48, 48, 48, 0.7) 0%, rgba(32,32,32,0.9) 40%,rgba(48,48,48,0.7) 100%);
    color:#fff;
    position:fixed;
    bottom:0; 
    font-size: 16px;
}

.clsIntroConcentContainer{
    flex-grow: 0;
    flex-shrink: 1;
    font-size:1em;
    text-align: center;
    /*background-color: #2196F3;*/
}

.clsWizardImg{
    display:none;
    position: relative;
    -webkit-touch-callout : default;
}

.clsIntroBlogLoading{
    text-align: center;
    width: 100vw;
    height: 100vh;
    position:fixed;
    top:0;
}

.clsWizardImgForLoad{
    max-width: 100vw;
    max-height: 40vh;
}

.clsIntroBlogLoadImg {
    display: inline-block;
    max-width: min(90vw, 600px);
    max-height: 10vh;
    margin: 10px;
}

.clsIntroBlogLoadImgWraper > svg{
    width:5vmin !important;
    height: 5vmin !important;
}
.clsIntroBlogLoadImgWraper{
    font-size: min(5vw, 36px) !important;
}
.clsIntroBlogLoadMaxWraper{
    font-size: min(2vw, 18px) !important;
}
/* 
.clsEditorLunch{
    font-family: Arial, PingFang SC, PingFang TC, Microsoft YaHei , Microsoft JhengHei ;
    padding: 0 1em 0 1em;
    font-size: min(4vw, 24px) !important;
	width:100%;
    border-radius: 3vh !important;
    white-space:nowrap;
    text-align: center;
    color: #fff !important;
    position: relative;
    display: inline-block;
}
.clsEditorLunch svg{
    width:min(4vw, 24px) !important;
    height: min(4vw, 24px) !important;
}

.clsEditorLunch.clsLoading{
    text-shadow: 1px 1px 2px rgba(0,0,0,1);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) !important;
	background: linear-gradient(180deg, rgba(64,64,64,0.4) 0%, rgba(92,92,92,0.4) 12%, rgba(160,160,160,0.4) 48%, rgba(30,30,30,0.45) 50%, rgba(30,30,30,0.45) 100%) !important;
}

.clsEditorLunch:not(.clsLoading){    
    text-shadow: 1px 1px 2px #000;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 1) !important;
	background: linear-gradient(180deg, rgba(64,64,64,0.8) 0%, rgba(92,92,92,0.8) 12%, rgba(160,160,160,0.8) 48%, rgba(30,30,30,0.9) 50%, rgba(30,30,30,0.9) 100%) !important;
} */

.clsWizardTitleImg{
    max-width:60%;
    max-height: 100%;
    object-fit: contain;
    -webkit-touch-callout : default;
}

.clsWizardIntro {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width:100vh;
    max-height:100vh;
    height:100%;
}

.clsIntroClose{
    fill:#fff;
    position: absolute;
    right:10px;
    top:10px;
}

.clsIntroOK{
    /* width:80%; */
    /* background-color: #666 !important; */
    background: linear-gradient(180deg, rgba(64,64,64,0.8) 0%, rgba(92,92,92,0.8) 12%, rgba(160,160,160,0.8) 48%, rgba(30,30,30,0.9) 50%, rgba(30,30,30,0.9) 100%) !important;
    color:#fff !important;
    /* font-size: 5vh !important; */
    height: min(12vmin, 72px) !important;
    box-shadow:  2px 2px 5px rgba(0, 0, 0, 1) !important;
    border-radius: 3vh !important;
    text-shadow: 1px 1px 2px #000;
    font-size: min(5vmin, 24px) !important;
    line-height: min(6vmin, 26px) !important;
    margin:10px !important;
    text-transform: none !important;
}

.clsTermWraper{
    display: inline-block;
}

@media print {
    body {
        display:inline-block;
        width:auto !important;
    }
}

.clsLink {
    cursor: pointer;
}

.clsRightAlign {
    text-align:right;
}

.clsLeftAlign {
    text-align:left;
}

.clsCenterAlign {
    text-align:center;
}

.clsSelectFrom {
    /*background-color:#ff0000 !important;*/
}
.clsSelectTo {
    /*background-color: #ffff00 !important;*/
}

.clsNoSelect {
    /*#region disable user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    /*#endregion disable user select*/
}


/* System bar*/
.clsTopSystemBar {
    position:fixed;
    width: 100%;
    /* 工具列高度 32px => .clsTopToolbarItem*/
    /* height: 4rem; */
    background-color: #ffffff;
    outline: 1px solid #cccccc;
    white-space: nowrap;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}

.clsJxMdlDropDownWraper {
    
    background-color: #fff;
    border: 1px solid #c0c0c0;
}
.clsJxMdlDropDown {
    display: inline-block;
    
}
.clsJxMdlDropDown span{
    vertical-align: middle;
}
.clsJxMdlDropDown .clsMenuLabel {
    padding-right:20px;
    font-size:13px !important;
}
.clsJxMdlDropDown .clsJxMdlDropDownIcon {
    font-size: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    width: 16px !important;
}
span.clsJxMdlDropDown {
    font-size: 0.875em;
}

.clsUserIdLabel {
    overflow: hidden;
    text-overflow: ellipsis;
}

.clsDisabled {
    color: #cccccc !important;
    cursor: no-drop !important;
}


/* Tool Box */
.dropdownFontName {
    -webkit-appearance: menulist-button;
}

.clsNaviBar, .clsEditorBar, .clsFabBar {
    position: fixed;

    font-size: 14px;
    text-align: center;
    /*background-color: rgba(200,200,200,0.5);*/
    /*background: rgb(64,64,64);*/
    background: linear-gradient(180deg, rgba(64,64,64,0.8) 0%, rgba(92,92,92,0.8) 12%, rgba(160,160,160,0.8) 25%, rgba(30,30,30,0.9) 27%, rgba(30,30,30,0.9) 100%);
    white-space: nowrap;
    border: solid 2px #000;
    border-radius: 10px;
    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);*/
}

.clsEditorBlock {
    display: inline-block;
    vertical-align: middle;
    /*height: 100%;*/
}


.clsLockZoomBtn{
    width:36px;
    display: inline-block;

}

.clsLockZoomIcon{
    color:#ccc;
}

.clsEditorBtn {
    fill: #fff;
    color: #fff !important;
    height: 40px !important;
    /* background-color: rgba(255,255,255,0) !important; */
    -webkit-filter: drop-shadow( 2px 2px 2px rgba(0, 0, 0, .9));
    filter: drop-shadow( 2px 2px 2px rgba(0, 0, 0, .9));
}

.clsEditorBtn span {
    font-size: 36px !important;
}

.clsNaviBlock {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.clsNaviLeft, .clsNaviRight, .clsNaviZoomRight {
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
}

.clsEditorRow {
    display:flex;
    justify-content:center;
    flex-direction:row;
}

.clsEditorColumn {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.clsNaviSlot{
    display:inline-block;
    /* width:100%; */
}
.clsLayoutTable td {
    padding: 0;
}
.clsNaviBar .clsTopToolbarItem, .clsEditorBar .clsTopToolbarItem {
    background-color: rgba(255,255,255,0.6);
}

/* hide navibar*/
.clsNaviBar{
    opacity:0;
}

.clsToolbarContainer {
    display: inline-block;
}

.clsTopToolBar {
    position: fixed;
    width: 100%;
    /*height:32px;*/
    background-color: #eee;
    outline: 1px solid #cccccc;
    /*white-space:nowrap;*/
    max-height:64px;
}

.clsToolbarGroup {
    /*background-color: rgba(255,255,255,0.8) !important;*/
    border-right: 1px solid #ccc !important;
    font-family: Arial, "PingFang SC", "PingFang TC", "Microsoft JhengHei", "微軟正黑體" !important;
    font-weight: bold !important;
    /*min-width:unset !important;
    width:50px;*/
}

.clsToolbarGroupItem {
    vertical-align: middle;
    height: 36px; /* from mdl-button*/
    line-height: 36px; /* from mdl-button*/
    font-family: Arial, "PingFang SC", "PingFang TC", "Microsoft JhengHei", "微軟正黑體" !important;
    font-weight: bold !important;
}

.clsTopToolbarItem {
    /* 工具列高度 應該要參照 mdl-button 36px ?*/
    /* height: 64px !important; */
    height:32px;
    display: inline-block;
    padding: 1px 10px 1px 10px !important;
    vertical-align: middle;
    white-space: nowrap;
    /*font-family: sans-serif !important;*/
    font-family: Arial, "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei" !important;
    /*font-size: 0.8em !important;*/
    border-right: 1px solid #ccc !important;
    /* overwrite mdl-button min-width 64px in material.css */
    min-width: 50px !important;
}
    .clsTopToolbarItem [lang=zh-Hans] {
        font-family: Arial, "PingFang SC", "PingFang TC", "Microsoft YaHei", "Microsoft JhengHei" !important;
    }
span.clsTopToolbarItem {
    /*border: 1px solid #cccccc;
    border-radius: 6px;*/
    padding: 1px 10px 1px 10px;

    line-height: 32px;
    font-size: 0.875em !important; /*14px;*/
    vertical-align: middle !important;
    display: inline-block;
}

.clsTopToolbarImageItem {
    cursor: pointer;
    height: 26px;
    /*background-color: #dfdfdf;
    border: 1px outset #dddddd;
    border-radius:7px;*/
    
}

.clsCancelSelectBtn {
    position: fixed !important;
    top: 64px; /* material button height 36px */
    right: 2px;
    /*border-radius: 18px !important;*/
    height: 24px !important;
    /*border: 1px solid #0093ff !important;*/ /* color from clsSelected #0093ff*/
    opacity: 0.8;
    cursor:pointer;
}
.clsCancelSelectBtn > svg, .clsCancelSelectBtn > span,
.clsGroupPhraseBtn > svg, .clsGroupPhraseBtn > span,
.clsclsGPMenu > svg
/*, .clsGPMenu > span */
{
    vertical-align: top !important;
    line-height: 24px;
    color: #048 !important;
    fill: #024;
}
/* for animateion dash border */
.clsDashBlue {
    background-image: linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%) !important;
    background-color: #9df !important;
}
.clsDashBlueUp {
    background-image: linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%) !important;
    background-color: #aee !important;
}
.clsDashBlueDown {
    background-image: linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%) !important;
    background-color: #cdf !important;
}
.clsDashGray {
    background-image: linear-gradient(90deg, #aaa 50%, transparent 50%), linear-gradient(90deg, #aaa 50%, transparent 50%), linear-gradient(0deg, #aaa 50%, transparent 50%), linear-gradient(0deg, #aaa 50%, transparent 50%) !important;
}

.clsDashBorder {
    background-image: linear-gradient(90deg, #aaa 50%, transparent 50%), linear-gradient(90deg, #aaa 50%, transparent 50%), linear-gradient(0deg, #aaa 50%, transparent 50%), linear-gradient(0deg, #aaa 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right top;
    animation: border-dance 1s infinite linear;
}
@keyframes border-dance {
    0% {
        background-position: left top, right bottom, left bottom, right top;
    }
    100% {
        background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;
    }
}

.select-editable {
    position:relative;
     display:inline-block;
     background-color:white;
     border:solid #dddddd 1px;
     width:50px;
     height:36px;
 }
 .select-editable select {
     position:absolute;
     font-size:14px;
     border:none;
     width:50px;
     margin:0;
     height:36px;
 }

 .select-editable input, .select-editable label {
     position:absolute;
     width:30px;
     padding:0px;
     font-size:13px;
     border:none;
     height:36px;
 }
 .select-editable label {
     background-color:#ffffff;
     padding: 6px 2px 0px 0px;
     white-space:nowrap;
     left:0px;
     text-align:right;
 }
 .select-editable select:focus, .select-editable input:focus {
     outline:none;
 }
 .select-editable.bigbg, .select-editable.bigbg select {
     width:100px;
 }
.select-editable.bigbg > label {
    width:70px;
}
.clsTopSystembarRight {
    float:right;
    /*width:0px !important;*/
}

.clsTopSystembarLeftTop {
    display:block;
}
.clsTopSystembarLeftTop label{
    font-size:24px;
}

.clsTopSystembarLeftBottom {
    /* hide file menu*/
    display:none;
    /*display:block;*/
}

.clsTopSystembarLeftBottom span {
    padding: 0px 10px 0px 10px;
}

.clsTitleEditor {
    font-size:20px !important;
     min-height:20px;
     min-width:150px;
     max-width:150px;
     font-style:italic;
     font-family:monospace;
     background-color:#eeeeee;
     border:1px solid #aaaaaa;
     display:inline-block;
}

[placeholder]:empty::before {
    content: attr(placeholder);
    color: #bbbbbb;
}

[placeholder]:empty:focus::before {
    content: "";
}

/* printer control*/
.noprint{
    display:none !important;
}
.print {
    /*box-shadow: none !important;
    outline-style: none !important;
    background-color: transparent !important;*/
}
.print:before {
    content:"" !important; /*cancel the .pwrap.po.usermodified:before*/
}
.print.bpm {
    box-shadow: none !important;
}
.print.be {
    background-color: transparent !important;
}
.print .clsCwrapFocus {
    outline: none !important;
}

.jxpanel {
    display: none;
    /*position:relative;
    top:20px;
    right:30px;*/
}

/* menu */
.ui-menu {
    writing-mode: horizontal-tb;
    /*width: 150px;*/
    min-width: 150px;
    background-color: #fff;
    font-size: 16px !important;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}
.ui-widget {
    /*font-family:monospace !important ;*/
    /*Verdana font doesnt work for tǒng, the tone symbol break*/
    font-size: 14px !important;
}
.ui-menu-item {
    display: block;
    /* pinyin menu font. the 'ǎ' is very strang in default font Verenda under Microsoft windows */
    /* from .sans-serif-simplified , replace the english font with Courier New*/
    /*font-family: "Courier New", "PingFang TC", "PingFang SC", "微軟正黑體", "Microsoft JhengHei";*/
    font-family: "Courier New", sans-seirf;
    white-space:nowrap;
}
.ui-menu-item-wrapper{
    padding-left:1.1em !important;
    outline: none;
}

.clsScrollBottom, .clsScrollTop {
    height: 20px !important;
    line-height:20px;
    width:160px;
    border:1px solid #d3d3d3;
    background-color: rgba(255,255,255,0.9) !important;
    text-align: center;
    position: sticky;
    font-size: 30px;
}
.clsScrollBottom {
    top:178px;
}
    .clsScrollTop {
        transform: rotate(180deg);
        top:0;
    }
.clsFontFamilyMenuWraper {
    position: absolute;
    width: 1500vw;
    height: 200px;
    left: 0;
    top: 40px;
    overflow-y: scroll;
    /*background-color:"rgba(255,0,0,0.5)"*/
}

.clsFontFamilyMenu {
    display:table; /* force line break*/
}

/*.clsFontFamilyMenu > .clsJxMdlDropDown > .clsMenuLabel {
    width: 200px;
    display:inline-block;
}*/
    /*.clsMenufontfamilymenu .ui-menu-item-wrapper {
    white-space: nowrap;
}*/
    /*.clsMenufontfamilymenu {
    width: 160px;
    top: 20px !important;
    padding-bottom:20px !important;
}*/
    .clsMenufontfamilymenu .clsSubMenu, .clsMenupzrmenu {
        max-height: 175px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

.clsBtnFull {
    width: 100%;
    height: 3em;
}

.clsBrowseStrok {
    display: inline-block;
    width: -webkit-fill-available;
}
.labelOnDicGroup {
    position: absolute;
    color: #fff;
    /*font-size: 12px;
    transform: scale(1.6, 0.8);
    transform-origin:left;*/
    /*left: 2px;*/
    top:5px;
    text-shadow: 0px 0px 2px #000;
}
.clsIconBookWraper{
    width:30px;
}
.clsIconBook {
    position: relative;
    left: -5px;
    top: -3px;
    filter: drop-shadow(1px 1px 0px #000);
}
.btnDicGroup, .btnFormat {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.btnEnabled {
    background-color: #bbbbbb !important;
    background: none !important;
}
.modalContainer {
    justify-content:center;
    display:flex;
    flex-direction:row;
    align-items:center;
}
.clsProgressLoading {
    justify-content:center;
    display:flex;
    flex-direction:row;
    align-items:center;
    position:absolute;
    width:100%;
    height:100%;
    background-color:#ffffff;
}
.dialogWraper {
    height:min-content;
    display:inline;
    width:100%;
}

/*table.dialogTable td {
    white-space:nowrap;
}*/

svg {
    vertical-align:text-bottom;
}



/*animation */
/*@-webkit-keyframes flash {
    0% {
        background-color:none;
    }
    50% {
        background-color: #77bbee;
    }
    100% {
        background-color: none;
    }
}
.flash {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function: ease-in-out;
}*/  

/* w = c, z, p, t */
.w {
    position:absolute;
    outline-width:1px;
    /* background-color:rgba(255,128,128,0.5); */
}

/* hanzi */
.c {
    z-index:2;
    /* transform: scale(0.4); */
    /* transform-origin: top; */
    /*font-family:DFKai-SB;*/
    /* background-color:rgba(255,128,128,0.5); */
}

/*region hanzi special Quote symbol horizontal and vertical mapping*/
/*["〈","︿"]
,["〉","﹀"]
,["《","︽"] 
,["》","︾"]
,["「","﹁"]
,["」","﹂"]
,["『","﹃"]
,["』","﹄"]
,["【","︻"]
,["】","︼"]
,["〔","︹"]
,["〕","︺"]
,["（","︵"] 
,["）","︶"]
,["﹛","︷"]
,["﹜","︸"]
,["〈","︿"]
,["〉","﹀"]*/
/* .cq[quoteCode="12296"]::after, .cq[quoteCode="65087"]::after{
    content:"〈"
}
.clsverticalrl:not(.clseditorpreview) .cq[quoteCode="12296"]::after, .clsverticalrl:not(.clseditorpreview) .cq[quoteCode="65087"]::after {
    content:"︿" !important
} */
/*endregion hanzi special Quote symbol horizontal and vertical mapping*/

.lightcolor {
    color:#fefefe;
     /* color:#000;  */
    /*position:absolute;
    z-index:9999;*/
}

.clsFontDetec {
    display: inline-block;
    position: absolute;
    top:0;
    z-index: -1;
}

/* to compansate the line break after <canvas> in debugDetectDomWraper*/
.clsFontDetec table td {
    padding:0px 2px 8px 0px;
}

.sans-serif-traditional {
    /*Mac, Windows*/
    /*font-family: Arial, "PingFang TC", "PingFang SC", "微軟正黑體", "Microsoft JhengHei";*/
    font-family: Arial, "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Microsoft Yahei"
}

.sans-serif-simplified {
    /*Mac, Windows*/
    /*font-family: Arial, "PingFang SC", "PingFang TC", "Microsoft JhengHei", "微軟正黑體";*/
    font-family: Arial, "PingFang SC", "PingFang TC", "Microsoft Yahei", "Microsoft JhengHei"
}

.serif-traditional {
    /*Mac, Windows*/
    /*font-family: BiauKai, Kai, "標楷體", DFKai-SB, cwTeXKai;*/
    font-family: Arial, BiauKai, Kai, "標楷體", "FZKai-Z03S", KaiTi
}

.serif-simplified {
    /*Mac, Windows*/
    /*font-family: Kai, BiauKai, DFKai-SB, "標楷體", cwTeXKai;*/
    font-family: Arial, Kai, BiauKai, KaiTi, "FZKai-Z03S", "標楷體"
}

.arial-traditional {
    font-family: sans-serif !important;
}

.arial-simplified {
    font-family: sans-serif !important;
}

.web-serif-traditional {
    font-family: 'cwTeXKai';
}

.web-serif-simplified {
    font-family: FZKai-Z03S;
}



/* wrap c p z t */
/* .clsCwrapFocus, .clsEditorPreviewCenter > .cwrap { */
    /* deprecated due to word spacing*/
/* .clsCwrapFocus {    
    outline: 1px solid rgba(0,0,0,0.1);
} */

.clshorizontaltb  .clsCwrapFocus:not(.clsPageisbeginofarticle):not(.isendofline) >.ccell {
    box-shadow: 1.5px 0px 0 0 rgba(0,0,0,0.4), 0px 1.5px 0 0 #ddd;
    /* blink cursor*/ /* dash line animation for selection*/
    animation: blinkerright 1s linear infinite;
    /*animation: blinkerright 1s linear infinite, bottom-dance 1s infinite linear;*/
}

/* blink cursor at the begin of a horizontal line */
.clsCwrapFocus.clsPageisbeginofarticle,
.clsCwrapFocus.isendofline {
    outline: 1px solid rgba(0,0,0,0);
    animation: blinkerhead 1s linear infinite !important;
}

.clsverticalrl .clsCwrapFocus:not(.clsPageisbeginofarticle):not(.ishalf) >.ccell  {    
    box-shadow: 0px 1.5px 0 0 #000;
    animation: blinkerbottom 1s linear infinite;
}
.clsverticalrl .clsCwrapFocus.ishalf:not(.clsPageisbeginofarticle) >.ccell  {    
    box-shadow: 1.5px 0px 0 0 #000;
    animation: blinkerbottomvert 1s linear infinite;
}

@keyframes blinkerhead {
    50% {
        outline : 1px solid rgba(0,0,0,1);
        
    }
}

@keyframes blinkerright {
    50% {
        box-shadow: 1px 0px 0 0 rgba(0,0,0,0);
    }
}
@keyframes blinkerbottom {
    50% {
        box-shadow: 0px 1px 0 0 rgba(0,0,0,0);
    }
}
@keyframes blinkerbottomvert {
    50% {
        box-shadow: 1px 0px 0 0 rgba(0,0,0,0);
    }
}

.clsHintDownArraw{
    animation: downarrow 0.1s infinite alternate ease-in-out;;
}
@keyframes downarrow {
    0% { transform: translateY(0); opacity: 0.4 }
  100% { transform: translateY(0.4em); opacity: 0.9 }
}

/*
@keyframes blinkfadeout {
    50% {
        opacity: 0.1;
    }
}
*/
.clsEditorCloseBtn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
    fill: #fff !important;
}

.clsEditorPreviewLeftWraper{
    justify-content:flex-end;
}

.clsEditorPreviewLeftWraper, .clsEditorPreviewRightWraper {
    display: flex;
    flex-grow: 2;
}

.clsEditorPreviewCenter, .clsEditorPreviewLeft, .clsEditorPreviewRight {
    cursor:pointer;
    transform: scale(0.6);
}

.clsEditorPreviewCenter, .clsEditorPreviewRight {
    transform-origin: top left;
}
.clsEditorPreviewLeft {
    transform-origin: top right;
}

.clsEditorPreviewInput, .clsEditorPreviewCenter, .clsEditorPreviewLeft, .clsEditorPreviewRight {
    display: inline-block;
}

.clsEditorPreviewInput{
    height:3em;
    position: relative;
    background-color: rgba(0,0,0,0);
}


.clsEditorPreviewCenter {
    min-width: 40px;
    position: absolute;
    left: 12px; /* for scale(0.6), fontsize 12*/
}

.clsEditorPreviewCenterAlignWraper {
    position: absolute;
    width:100%;
}
/* .clsEditorPreviewCenter div {
    background-color: #0f0;
} */

.clsEditorPrevieCenterWraper{
    position:relative;
    background-color: #fff;    
}

/* 20210807 Chrome行為改變, 強制使用者敲input */
/* cwrap width 40 + left padding 8 +  middle of right padding4*/
.clsEditorPrevieCenterInit{
    width: 53px; 
}

.clsEditorPreviewLeft {
    text-align: right;
}

.clsEditorPreviewRight {
    text-align: left;
}

.clsEditorPreviewLeft, .clsEditorPreviewRight {
    min-width: 80px;
}

.clseditorpreview {
    display: flex;
    background-color: #ccc;
}

.clseditorinput{
    background-color:rgba(255,255,255,0) !important;
    
}

.clsfs {
    position: fixed;
    width:100% !important;
    height:100% !important;
    top:0 !important;
    left:0 !important; 
    padding:0 !important;
    margin:0 !important;
    cursor: pointer;
}

/* .clseditorinput[readonly=readonly] {
    background-color: #f88 !important;
} */

.clsLineBreak, .clsPageEnd, .clsPageisbeginofarticle {
    display: inline; /* in order to break new line, use 'inline' instead of 'inline-block'*/
}
.clshorizontaltb .clsPageisbeginofarticle {
    width:0px !important;
}
.clsverticalrl .clsPageisbeginofarticle, .clsverticalrl .isendofline, .clsverticalrl .clsExportLineBreak {
    height:0px !important;
}
.clsPageisbeginofarticle > .c {
    left:  auto !important;
    right: 0px  !important;
}
.clsLineBreak::before {
    content: "\A";
    white-space: pre;
}


/* linebreak height control*/
.clshorizontaltb .isendofline {
    max-width: 0;
}
.clsverticalrl .isendofline {
    max-height: 0;
}

/* 20200625 line height control*/
/* add space in bottom in horizontal mode */
/* add space in left in vertical mode */
/* .clshorizontaltb .cwrap{
    margin: 0px 0px 12px 0px; 
}
.clsverticalrl .cwrap{
    margin: 0px 0px 0px 12px; 
} */

/*.cztopwrap {
    width:100%;
    position:absolute;
    display:inline-block;
}

.czwrap {
    display:inline-block;
    position:initial;
}

.czwrap > .w, .czwrap > .zwrap{
    position: initial !important;
    display:inline-block;
    vertical-align:top;
}

.zwrap > .z {
    display: inline-block;
}

.zwrap > .t {
    position: relative !important;
}*/

.ccell {
    position:absolute;
    display:inline-block;
    text-align:center;
    /* background-color: rgba(255,0,0,0.8); */
}

.gpwrap{
    display: inline-block;
    position: relative;
    white-space: nowrap;
    /* border-bottom: 1px solid black; */
     /* background-color: rgba(255,0,0,0.4);  */
}

.gpwrap.pt_linelv .p, .gpwrap.pt_linelv .gpps{
    vertical-align: bottom !important;

}

/* .gpwrap .cwrap {
    margin-right:0 !important;
} */

.gpps {
    display: inline-block;
    vertical-align: text-top;
    white-space: pre;
}

.cwrap {
    /*margin: 0px 0px 25px 0px;*/ /* this control the line height*/
    /* 20200625 line height currently controlled by html{line-height:1.4} in material.css, this adjust the top space of a .c */
    writing-mode: horizontal-tb;
    /*font-family : do not change font family here. It will fail getDeviceCss*/
    position: relative;
    
    display: inline-block;
    /*vertical-align:top;*/

    color:#000 !important;  /* overwrite the html.color rgba 0,0,0,0.87 in material.css*/
    /* background-color: rgba(255,0,255,0.7); */
}
/* add border to normal char, but not the end of line*/
/*.cwrap:not(.isendofline){
    outline : 1px solid #000000;
    background-color:#ffffff;
}*/

/* Pinyin */
.p {
    writing-mode: horizontal-tb;
    z-index: 2;
    /*opacity:0.5;*/
    font-family: /*serif;*/ 'Courier New'; /*tone stroke is better in Courier New*/ /*sans-serif;*/
    /* font-weight: bold; */
    /*padding: 0px 5px 0px 5px;*/ /* word space related */
    padding: 0px 0px 0px 0px;
    /* background-color:rgba(128,255,255,0.5); */
    display: inline-block;
    vertical-align: text-top;
    position: relative;
    white-space: nowrap;
}

.pwrap{
    position:absolute;
    text-align:center;
    /* background-color: rgba(127,255,0,0.8); */
}

/* .pwrap > .w {
    position: initial !important;
    display: inline-block;
} */

.zwrap {
    position: absolute;
    /* font-family: Arial, "PingFang TC", "PingFang SC", "微軟正黑體", "Microsoft JhengHei" */  /* 注音用黑體 */
    font-family: "BiauKai, Kai", "標楷體", "DFKai-SB"    /* 注音用楷體 */;
    /* background-color: rgba(0,0,255,0.8); */
    transform-origin: left;
}

/*#region Pinyin with border box*/
/* Pinyin with multiple options, auto detected by system*/
.po.highlight {
    /*outline: 2px solid rgba(255, 72, 72, 0.5);*/
    box-shadow: 0 0 2px 2px rgba(255, 72, 72, 0.5);
    background-color: rgba(255, 200, 200, 0.5);
    border-radius: 15px;
}

/* Pinyin with user overide*/
.usermodified.highlight {
    /*outline-color: rgba(240, 240, 0, 0.7);*/
    box-shadow: 0 0 2px 2px rgba(240, 240, 0, 0.7);
    background-color: #eeee88;
    border-radius: 15px;
}
/* Pinyin with multiple options, usermodified modified*/
.po.usermodified.highlight {
    /*outline-color: rgba(64, 160, 64, 0.5);*/
    box-shadow: 0 0 2px 2px rgba(64, 160, 64, 0.5);
    background-color: #eeffee;
}
/* put a ⓥ to pinyin left top corner for usermodified*/
/*.pwrap.po.usermodified:before {*/
.pwrap.usermodified.highlight:before {
    content: "ⓥ";
    font-weight: 900;
    font-size: 80%;
    color: darkgreen;
    width: 100%;
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    overflow: hidden;
    white-space: nowrap;
}
/*#endregion Pinyin with border box*/

/*#region Pinyin with select options, dash underline*/
/*.po:before {
        content: "---------------------------";
        font-size: 0.7em;
        font-weight: 900;
        font-family: Times New Roman, Serif;
        color: red;
        width: 100%;
        position: absolute;
        top:50%;
        left: 0px;
        overflow: hidden;
        white-space:nowrap;
}
.po:after {
        content: "---------------------------";
        font-size: 0.7em;
        font-weight: 900;
        font-family: Times New Roman, Serif;
        color: red;
        width: 100%;
        position: absolute;
        top:54%;
        left: 0px;
        overflow: hidden;
        white-space:nowrap;
}*/
/*#endregion Pinyin with select options, dash underline*/

/* Zhuyin */
.z {
    z-index:2;
    /*opacity:0.5;*/
    /*line-height:80%;*/    /* this was due to the cTopSpace */
    font-weight:800;

    /* zhuyin is always in vertical mode, or else the height calculation will be wrong*/
    /*writing-mode:vertical-lr*/
}

.stc{
    position: absolute;
    color:#666;
}

.clsCPQ:not(.clsCPQX){
    border : 1px solid;
}

.clsCPQ{
    width:94%;
    height:100%;
    position: absolute;
    left:0;
    /* top:-3%; */
    top:0;
}

.clsPPQ, .clsZPQ{
    font-family:Arial;
}

.clsPPQX{
    transform-origin: left;
    /* transform:scaleX(3.5); */
    font-family: Arial;
    left:0;
}

.clsZPQX{
    transform-origin: top;
    transform:scaleY(3.5);
}

.clsCPQX{
    
}

.clsPQ{
    position: absolute;
}

.clsFakeYinInput{
    width:3em;
    font-size:16px !important; /* prevent ios vkeyboard zoom in*/
}
.clsZhuyinVTone{
    position: absolute;
    /* line-height: 7px; */
    /*
    
    right:0px; */
    /* height:7px; */
    display: inline-block;
    /* background-color:rgba(0,255,0,0.5); */
}
.clsZhuyinVTone svg{
    vertical-align: top;
    top:-3px;
    left:-3px;
    position: absolute;

}
.clsZhuyinVWraper{
    /* line-height: 8px !important;
    height:8px; */
    display: inline-block;
    padding-top:3px;
    /* background-color:rgba(255,0,0,0.5); */
}

.clsZhuyinVWraper svg {
    margin-top:-1px;
}

/* Zhuyin tone*/
.t {
    z-index:1;
    /*opacity:0.75;*/
    /*font-family:'Courier New';*/    /* 聲調用跨平台字型 */
    /*font-family: "BiauKai, Kai", "標楷體", "DFKai-SB", "Courier New"*/    /* 注音用楷體 */
    text-align:center;
}

.t svg{ /* for svg tone font */ 
    display:inline-block;
    position: relative;
    vertical-align:top;
}

/* transparent words*/
.wt {
    opacity:0.3;
}
   
/* block editor*/
.be {
    width: 100%; /* iOS outerWidth issue : 100% is unstable for outerWidth during document ready*/
    height: 100%;
    /* center align the block Print*/
    /* justify-content:center;
    flex-direction:column; */
    align-items: center;
    /*display:flex;*/ /* for center stretch mode*/
    background-color: #dddddd;
    overflow: auto;
    /*overflow: hidden;*/
    -webkit-overflow-scrolling : touch;
}

/*Export*/
.bExport {
    position: absolute; 
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    display: flex;
    flex-direction: row;
    overflow:auto;
}

.clsExportTopSpace {
    /* material icon height*/
    /* flex-basis:40px;  */
    /* flex-grow: 1;
    flex-shrink: 0; */
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    
}

.clsExportTipDesc {
    display:inline-block !important;
    font-size:12px;
    line-height:12px;
    padding : 0 0 0 10px;
    /* position:absolute !important;
    left:0;
    bottom:0; 
    white-space:nowrap; */
}

.clsExportCopyBtn {
    display:inline-block !important;
    padding:0 10px 0 10px !important;
    white-space:nowrap;
    vertical-align: bottom !important;
}

.clsexpsizeMenu{
    padding-left:10px;
}

/*.bExport.print {
    overflow: hidden;
    padding:0;
    margin:0;
    border:none;
    width: 210mm !important;
    height: 100% !important;   
}

.bExport:not(.print) {
    justify-content: center;
    overflow:auto;
}*/
.clsExportBtn {
    /* display: inline-flex !important;
    justify-content: center;
    align-items: center;
    font-size: 1.5em !important; */

    text-align: center;
    flex-grow: 1;
    font-size: 0.9em;
    padding: 0 8px 0 8px;
    height:36px;
    position: inherit;
    max-width: 100px;
}

.clsExportCloseBtn {
    flex-shrink: 1;
    flex-grow: 0;
    position: fixed !important;
    right:0;
}

.clsExportCropBtn, .clsExportCharOnlyBtn {
    
}


.clsExportLoading{
    display: flex;
    justify-content: center;
    
    width:100%;
    height:100vh;
    background-color: #fff;
}

.clsExportToolBarConatiner {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    /*flex-basis: 102px;*/ /* material icon height 36 * 2 + 30*/
    /* flex-basis: 82px; */
    display: flex;
    /* border-bottom: 2px solid #888; */
    padding: 0 0 10px 0;
    position:relative;
    background-color: #fff;;
}

.clsExportFlexContainer {
    position: absolute;
    /* border: 1px solid black; */
    display: flex;
    flex-direction:column;
    width:100%;
    height:100%;
}
.clsExportCanvasImg{
    /* width:100%;
    height:100%;
    object-fit: contain; */
    max-width:100%;
    max-height:100%;
    box-shadow: 0px 0px 5px #aaaaaa;
    -webkit-touch-callout:default;
}

.clsExportCanvasContainer {
    display: inline-block;
    background-color: #fff;
    flex-grow: 1;
    overflow: auto;
    /* 595 x 2*/
    /* width: 1190px !important;  */

    /* 842 x 2 */
    /* height: 1684px !important;  */

}

.clsExportCanvas{
    width:100%;
    height:100%;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}



/*.clsExportCanvas.print {
    position:absolute;
    width: 210mm !important;
    height: 297mm !important;
    overflow:hidden;

}
.clsExportCanvas:not(.print) {
    width: 90vw;
    height: 90vh;
    border: 1px solid black;
    box-shadow: 0px 0px 5px #aaaaaa;
}*/

/*block print*/
.bpm {
    /*overflow:hidden;*/
    /*position:absolute;*/ /* for center stretch mode*/
    position: relative;
    background-color: #fff; /* paper backgroup color */
    /*box-shadow: 0px 0px 5px #aaaaaa;*/
    padding: 0px;
    /*padding : 5vh 2vw 5vh 2vw;*/
    /*margin: 20px;*/
    transform-origin: top left;
    /*outline:solid 1px black;*/
    
}

.bp {
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    /*background-color: #ffffff;*/
    padding: 3px 5px 3px 5px; /*input float box border width = 3px*/
    text-align: left;
}

.bpoutline {
    outline: dashed 3px rgba(100,100,100,0.2);
    line-height: 0; /* remove all leave some space between cwrap lines by bp and bpoutline*/
}

.bpmoutline {
    box-shadow: 0px 0px 5px #aaaaaa;
}

/* inputFloatBox*/
.bic {
    position: absolute;
    color: #000000;
    outline:none;
    /*outline: solid;
    outline-color: rgba(0, 128, 255, 0.5);
    background-color: rgba(240, 240, 255, 0.75);*/
    /*border-bottom:solid;*/
    white-space: nowrap;
    text-align: left;
    /*outline-color:rgba(255, 128, 128, 0.25);
    background-color:rgba(255, 160, 160, 0.15);*/
}
        
/* html tag */
.htag{

}

/* selected area with invert color */
/*.clsSelected {
    background-color : #ff7c00;
    filter: invert(100%);
}*/

.clsverticalrl > .clsFirstSelected:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: #0077ff transparent transparent transparent;
    top: 0px;
    left: 2px;
    position: absolute;
}

.clsverticalrl > .clsLastSelected:not(.clsFirstSelected):after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: transparent transparent #0077ff transparent;
    bottom: 0px;
    left: 2px;
    position: absolute;
}

.clshorizontaltb > .clsFirstSelected:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: transparent transparent transparent #0077ff;
    bottom: 0px;
    left: 0;
    position: absolute;
}

.clshorizontaltb > .clsLastSelected:not(.clsFirstSelected):after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: transparent #0077ff transparent transparent;
    bottom: 0px;
    right: 0;
    position: absolute;
}

.clshorizontaltb .clsSelected {
    /*background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);*/
    background-image: linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    /*background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;*/
    background-size: 0px 4px, 15px 4px, 0px 15px, 4px 0px; /* bottom only */
    /*background-position: left top, right bottom, left bottom, right top;*/
    background-position: right top, left bottom, right bottom, left top;
    animation: bottom-dance 1s linear infinite;
}


@keyframes bottom-dance {
    0% {
        /*background-position: left top, right bottom, left bottom, right top;*/
        background-position: right top, left bottom, right bottom, left top;
    }

    100% {
        /*background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;*/
        background-position: right 15px top, left 15px bottom, right bottom 15px, left top 15px;
    }
}

.clsverticalrl .clsSelected {
    /*background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);*/
    background-image: linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(90deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%), linear-gradient(0deg, #0093ff 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 0px 4px, 0px 4px, 0px 15px, 4px 15px; /* left only */
    background-position: right top, left bottom, right bottom, left top;
    animation: left-dance 1s infinite linear;
}

@keyframes left-dance {
    0% {
        background-position: right top, left bottom, right bottom, left top;
    }

    100% {
        background-position: right 15px top, left 15px bottom, right bottom 15px, left top 15px;
    }
}




/* hide border of contenteditable*/
/*[contenteditable]:focus {
    background-color:rgba(255,255,255,0.8);
}*/

[contenteditable] {
    /*Safari Android compatible*/
    -webkit-user-select: text;
    user-select: text;
}

[contenteditable="true"].single-line {
    white-space: nowrap;
    width: 300px;
    overflow: hidden;
}

[contenteditable="true"].single-line br {
    display: none;
}

[contenteditable="true"].single-line * {
    display: inline;
    white-space: nowrap;
}
    


/*#region Custom on off switch*/
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 12px;
    padding: 0;
    vertical-align:middle;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid #888;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: -2px;
    bottom: -4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 12px;
}

.slider.round:before {
    border-radius: 50%;
    border: 1px solid #888;
}
/*#endregion Custom on off switch*/

/*#region filetree*/
.clsTreeItemField{
    max-width:20vw;
    overflow:hidden;
    text-overflow:ellipsis;
    display:inline-block;
    height:auto;
    vertical-align:middle;
}

.clsTreeItem {
    white-space:nowrap;
    cursor:pointer;
}

.clsTreeItem:hover {
    background-color:#dddddd;
}
/*#endregion filetree*/

/* overwrite colorpicker*/
.sp-preview{
    border:none !important;
}
.sp-palette-container{
    width:100px;
}
.clsColorPickReplacer {
    border: none !important;
    outline: 1px solid #aaa;
    vertical-align: initial !important;
    padding: 0 0 0 4px !important;
    background: none !important;
}

.clsColorPickContainer {
    left: 0 !important;
    top: 0 !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 1) !important;
}

.clsHalfSize{
    transform:scale(0.7);
    transform-origin:left;
    display:inline-block;
}

.clsCBTContainer{
    font-size:10px;
    position:absolute;
    padding:0px 0 10px 0;
    max-width:320px;
    width:100%;
    height:170px;
    top:0;
    left:0;
    background-color:#ececec;
}

.clsCBTBtnWraper{
    padding:0 10px 0 10px;
    text-align:right;
}

/*.clsCBTColorPickerWraper{
    padding:10px 0 0 0;
}*/
.clsCBTColorPickerWraper table{
    border-spacing:0px;
}
.clsCBTColorPickerWraper table td{
    padding:0;
}
.clsCBTColorPickerWraper button{
    width:100%;
    font-size:12px;
}

.clsCBTBtnCancel, .clsCBTBtnOK {
    padding-right: 10px;
    font-family: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}

.clsColorLabel {
    /*position:absolute;
    top:0px;
    left:114px;*/
    display: inline-block;
    filter: drop-shadow( 0px 0px 1px rgba(0, 0, 0, 1));
    line-height: normal;
    width: 24px;
    height: 24px;
    position: relative;
}

.clsColorForeBtn, .clsToneByColorBtn, .clsPQBtn { 
    line-height: 24px !important;
    height:32px;
}

.clsFDtable td{
    height: 32px;
}

.clsFDSlotWraper{
    vertical-align: top !important;
    height:64px;
}
.clsToneByColorBtn{
    width:40px;
}

.clsPQBtnText{
    /* border: 1px dotted #888; */
    width:44px;
    height:24px;
    line-height:24px;
    
    display: inline-block;
    text-align: center;
    font-weight: 700;
    font-size:12px;
}

.clsPZRatioText{
    width:30px;
    height:24px;
    line-height:24px;
    
    display: inline-block;
    text-align: center;
}

.clsPZRatioText span{
    position:relative;
    top:3px;
}

.clsPQColorBtn, .clsPTColorBtn {
    display: inline-block;
    width:110%;
    height:100%;
}


.clsTransBG{
    background-color: #ddd;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);
    display :inline-block;
    width:100%;
}


.clsToneColorUnit {
    width: 42px;
    margin-left:4px;
    height: 20px;
    display: inline-block;
    text-align: center;
    color:#fff;
    
}

.clsColorForeBtn {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.clsColorLabelPlate {
    color: #fff;
    /*background: linear-gradient(135deg, #ff0000 0%,#fff600 25%,#ff8c00 65%,#ff0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    position: relative;
}
    .clsColorLabelDotRed, .clsColorLabelDotGreen, .clsColorLabelDotBlue, .clsColorLabelDotYellow {
    position: absolute;
}

.clsColorLabelDotRed {
    background-color: #f00;
    width: 5px;
    height: 5px;
    left: 4px;
    top: 8px;
}

.clsColorLabelDotGreen {
    background-color: #0c0;
    width: 5px;
    height: 5px;
    left: 7px;
    top: 4px;
}

.clsColorLabelDotBlue {
    background-color: #00f;
    width: 4px;
    height: 5px;
    left: 11px;
    top: 4px;
}

.clsColorLabelDotYellow {
    background-color: #f80;
    width: 4.5px;
    height: 4px;
    left: 14px;
    top: 8px;
}

.clsSelectAreaWraper {
    width: 95px;
    white-space: normal;
    line-height: 1;
    /* height: 3em;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 10px !important; */
    height: 60px;
    padding: 2px 0 2px 0 !important; 
}

.clsOverLapBtnText{
    position:absolute;
    left:0px;
}

.clsSelectChar {
    font-size: 2rem;
    height: 32px;
    vertical-align: top;
    padding: 2px 10px 2px 10px;
}
.clsSelectPin, .clsSelectChar{
    width:3rem;
}
.clsSelectPin {
    height: 18px;
    line-height: 1rem;
    padding: 5px 10px 5px 10px;
}
.clsSelectZhu {
    vertical-align: top;
    height: 32px;
    /* line-height: 2rem; */
    font-size:12px;
    line-height: 0.7rem;
    padding: 2px 5px 2px 5px;
}
.clsSelectPin, .clsSelectChar, .clsSelectZhu {
    text-align: center;
    display: inline-block;
    cursor:pointer;
    background-color:#ddd;
}

.btnPinyinlabel, .btnZhuyinlabel {
    min-width: 60px !important;
    width: 60px;
    line-height: 16px !important;
    text-align: left;
    position: relative;
    padding-left:5px !important;
}
.clsSelectPrefixWraper{
    text-align: center;
    display: inline-block;
    cursor:pointer;
    height: 28px;
    width:26px;
    vertical-align: top;
}
.clsSelectPrefix {
    font-size:12px;
    /* transform:rotate(90deg); */
    line-height: 12px;
    padding-top:3px;
    position:relative;
    color:#ccc;
    display:inline-block;
}
.clsSelectPostfix {
    color:#ccc;
}
.clsSelectPrefixP{
    color:#000;
    font-weight:bold;
    position:relative;
    
}

.clszhvtop, .clszhvbottom, .clszhvright, .clszhvleft{
    position: absolute;
}
.clszhvwraper{
    position: relative;
    display: inline-block;
    width: 16px;
    height:24px;
    vertical-align: bottom;
}
.clszhvleft{
    left:-1px;
}
.clszhvright{
    left:3px;
}
.clszhvtop{
    top:-9px;
    left:-4px;
}
.clszhvbottom{
    top:2px;
    left:0px;
}

/* display zhuyin horizontally */
/*.clsZhuyinLabel {
    width: 1em;
    position: absolute;
    white-space: normal;
    line-height: 16px;
    padding-left:5px;
}*/

.clsPinyinSwitch, .clsZhuyinSwitch, .clsWritingModeSwitch, .clsExportSwitch {
    /* vertical-align: bottom; */
    position: relative;
    top:0px;
}


.clsPinyinSwitchWraper, .clsZhuyinSwitchWraper, .clsExportSwitchWraper {
    width: 40px;
    /* height: 36px; */
    line-height:16px;
    top:0;
    text-align: center;
}

.clsYinDropDown{
    position: absolute;
    top:10px;
    right:5px;
}

.clsExportSwitchWraper{
    padding: 1px 10px 1px 10px;
    
}

/* display zhuyin vertically */
.clsPinyinLabel, .clsZhuyinLabel, .clsExportLabel {
    position: relative;
    top: 2px;
    line-height: 0.875em;
    width: 40px;
    text-align: center;
    font-size:12px;
    vertical-align: top;
    display: inline-block;
}

.clsFontDetailBtn {
    min-width: 45px !important;
}
.clsSysExportBtn {
    min-width: 30px !important;
}

.clsFontDetailBtn{
    padding: 4px 8px 0 4px !important;
}
.clsFontDetalLabel {
    position: relative;
    left: -6px;
    color: #444;
}

.clsSubMenu {
    position:fixed !important;
    max-height: 200px;
        overflow-y: scroll;
        overflow-x: hidden;
}

.clsMenuIcon {
    vertical-align: sub;
    font-size: 20px;
}

.clsAutoMark, .clsSpaceMark{
    font-size:12px;
    position:absolute;
    left:3px;
    top:-4px;
}
.clsSpaceMark{
    transform: rotate(90deg) scaleX(-1);
}

.clsLightWeight{
    font-weight: 100;
    border-top:1px solid black;
}

.ptoneex {
    display: inline-block;
    position: absolute;
    top:0;
    left:0;
    width:6px;
    height:6px;
    white-space:nowrap;
}

.toneexWraper {
    display: inline-block;
    position: relative;
}

.toneex {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
}

.toneexmeter{
    visibility:hidden;
}

.clsFontLoadingLabel {
    position: fixed;
    right:3px;
    background-color: #dcd !important;
}

.clsgplabel{
    padding-left: 5px;
    padding-right: 5px;
}

.clsautogplabel{
    font-weight: 200;
}

.yed .c {
    animation: yed-blink 4s infinite; 
}

@keyframes yed-blink {
    0%, 49% {
        background-color: rgba(255,255,255,0);
    }
    75% {
        background-color: rgba(0,128,255,0.3);
    }
    100% {
        background-color: rgba(255,255,255,0);
    }
}

.ued .c {
    animation: fued-blink 4s infinite; 
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(128,128,128,1) 90%);
    background-size: 200% 200%;
}

.fed .c {
    animation: fued-blink 4s infinite; 
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(0,128,255,0.7) 90%);
    background-size: 200% 200%;
}

@keyframes fued-blink {
    0%, 49% {
        background-position:0% 80%;
    }
    75% {
        background-position:0% 50%;
    }
    100% {
        background-position:0% 80%;
    }
}

.clsoff{
    color: #000;
}

.clsautogpt{
    white-space: pre;
}

.clsloadingjs{
    display: none;
}

.clsgpmenutitle, .clsgplabel{
    text-shadow: 1px 1px 2px black;
}

.clsGroupPhraseBtn {
    position: relative !important;
    /* bottom:96px;*/ /* navibox height is 80 + 8 + 8*/
    /*left: 72px; */
    /*border-radius: 18px !important;*/
    height: 22px !important;
    line-height: 24px;
    background-color: #fc0 !important;
    cursor:pointer;
    opacity: 0.8;
}
/* .clsGroupPhraseLabel{
    position: absolute;
    right:8px;
} */
.clsGPMenu {
    line-height: 24px;
    background-color: rgba(0,0,0,0.5) !important;
    border-radius: 5px;
    position: absolute !important;
    top:-28px;
    /* display: none; */
    /*bottom:86px;*/ /* navibox height is 80 + 8 + 8 + scrollbarwidth*/
    left: 2px;
    /*border-radius: 18px !important;*/
    height: 24px !important;
    /* background-color: #fc8 !important; */
    cursor:pointer;
    color:#fff;
    
}

.clsBadge{
    display: inline-block;
    font-size: 12px;
    background-color: #fff;
    color:#000;
    padding: 1px 5px 1px 5px;
    margin:0 5px 5px 0;
    border-radius: 10px;
}

.clsMenugpmenu .ui-state-active{
    background: none !important;
    background-color: rgba(255,255,255,0.7) !important;
}
.clsMenugpmenu .ui-menu-item-wrapper {
    padding: 2px 1em 1.5px 0.4em !important;
}


.clsMenugpmenu{
    background-color: rgba(0,0,0,0.7) !important;
    color:#fff !important;
}

.clsWizardFontConfig{
    padding: 0 20px 0 20px;
    display: flex;
    flex-direction: column;
    max-width : 800px;
    width: 100%;
}

.clsFontConfigNameInputWraper{
    
    padding: 20px 5px 5px 5px;
    text-align: center;
}
.clsFontConfigNameInput{
    width: 60% !important;
    font-size: 1.4em !important;
}
.clsFontConfigHint{
    text-align: center;
    font-size:1em;
}

.clsFontConfigListWraper{
    text-align: left;
}
.clsFontConfigExampleWraper{
    min-height: 3em;
    width: 80%;
    /* width:320px; */
    display: inline-block;
    padding: 1em 1em 1em 1em;
    /* border:1px dashed #888; */
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}

.clsFontConfigExampleChinese{
    font-size:1.5em;
}

.clsFontConfigExampleName{
    display: inline-block;
}


.clsFontConfigListLabel{
    /* min-height: 2em; */
    display: inline-block;
}
.clsFontConfigList{
    background-color: #000;
    color:#fff;
    padding: 10px 10px 100px 10px;
    user-select: text;
    min-height: 5em;
    text-align: left;
}

.clsFontConfigCloseBtn {
    margin-top:10px !important;
    min-height:36px;
    /* bottom:0;
    left:0; */
    background-color: #ccc !important;
    padding: 10px 0 50px 0 !important;
    /* position: absolute !important; */
    /* width: 200px;
    position: relative !important; */
    width:100%;
    /* position: absolute !important;
    top:50px;
    right:0;
    margin: 10px 10px 0 0 !important; */
}

.clsFontConfigAddBtn{
    width:100%;
    display: inline-block;
}


.clsFontConfigWghtLabelWraper{
    white-space: nowrap;
    display: block;
    
}

.clsFontConfigWghtMenu, .clsPinyinEXMenu{
    max-width: 150px;
    display: inline-block;
    padding-left: 5px;
    margin-left: 5px;
    vertical-align: bottom;
}

.clsFontConfigWghtMenuLabel{
    font-family: "Courier New", sans-serif;
    
}

.clsFontConfigExampleListWraper{
    overflow-x: hidden;
    overflow-y:scroll;
    width: 100%;
    text-align: center;
    border:1px solid #ddd;
    background-color: #eee;
}

.clsExampleLoading{
    display: flex;
    justify-content: center;
    
    width:100%;
 
}

.clsFontConfigExamplePinyinTone{
    display: inline-block;
    
}

.clsFontConfigPinyinEXLabel, .clsFontConfigPinyinEX {
    padding-left: 10px;
}

.clsOverlap{
    position: relative;
    left:0;
    display: block;
}

.iconLI{
    display: inline-block;
    height: 20px;
}


.btnWriteMode {
    text-align: center;
    position: relative;
    line-height : 16px !important;
}

.clsAlignMenuLabel{
    padding-right: 5px !important;
}

.clsAlignMenu{
    width: 36px;
    min-width: 36px !important;
}

.clscheckmark{
    height:20px;
    font-size:20px;
    width:20px;
    vertical-align: sub;
    display:inline-block;
}

.clszvyi{
    transform: rotate(90deg) scaleX(-1);
    display: inline-block;
}

.clstogglenounc{
    display: inline-block;
}