html, body
{
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: absolute; left:0; top:0; width:100%; height:100%;
    touch-action: none;
}

body{  -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none;-ms-user-select: none; user-select: none; }

.application{position: absolute; width: 100%; height: 100%;}
.application>.menu-bar { position: absolute; left: 0; top:0; width:100%; height:28px; overflow:hidden; border-bottom: 1px solid var( --border-color );}
.application>.header { text-align: center; position: absolute; left: 0; top:33px; width:100%; height:50px; overflow:hidden; border-bottom: 1px solid var( --border-color );}
.application>.content { position: absolute; left: 0; top:84px; width:100%; bottom:50px; overflow:hidden;}
.application>.footer { text-align: center; position: absolute; left: 0; bottom:0; width:100%; height:50px; overflow:hidden; border-top: 1px solid var( --border-color ); }

.application>.content>.column-left{ text-align:center; position: absolute; left: 0; top:0; width:50px; bottom:0; border-right: 1px solid var( --border-color ); }
.application>.content>.column-center{ position: absolute; left:51px; top:0; right:51px; bottom:0; }
.application>.content>.column-right{ text-align:center; position: absolute; width:50px; top:0; right:0; bottom:0; border-left: 1px solid var( --border-color );}



.button-bar>div
{      
    /*padding: 6px;*/
    padding: 3px;
    margin: 3px;
}

.button-bar>div>svg{ width:36px; height:36px; }




@media only screen and ( max-height: 800px)
{
    .button-bar>div {
         padding: 2px;
         margin: 2px;
        
    }
}


@media only screen and ( max-height: 750px)
{
    .button-bar>div {
        padding: 1px;
        margin: 1px;
        
    }
}

/*filling-inspector-panel > .title{*/
    
/*    line-height: 26px;*/
/*    margin: 11px 0;*/
/*    text-align: center;*/
/*    font-size: 14px;*/
/*    border: 1px solid #5b5e62;*/
/*    border-radius: 6px;*/
/*    color: white;*/
    
/*}*/


.gradient-display > svg {
    cursor: copy;
}



#GRADIENT_COLOR_LIST .editable-gradient-color {
    stroke: black;
    stroke-width: 1;
    cursor: move;
}


#GRADIENT_COLOR_LIST .editable-gradient-color.selected {
    stroke: #2d81ff;
    stroke-width: 2;
}



   

editor-timeline > .header > .button-bar { text-align:center; }
editor-timeline > .header > .ruler{ position:absolute; left:0;  top:50px; right:0; height:20px; overflow: hidden; padding: 0 20px;}
editor-timeline > .header > .ruler > svg { overflow: visible; }
editor-timeline > .content{ position:absolute; left:0; top:76px; right:0; bottom:0px; overflow:scroll; padding: 0 20px;}
editor-timeline > .content > svg { overflow: visible;  }


editor-timeline > .content > svg.timeline > content > .animation-item.selected rect{  stroke-width: 3px; stroke:#2efdf1; }
editor-timeline > .content > svg.timeline > content > .animation-item.selected text{  fill:#2efdf1; }
/*editor-timeline svg .background{ pointer-events: none;}*/



:root {
    --opacity: #fc6d65;
    --x: #fc8861;
    --y: #ffad65;
    --width: #fecf60;
    --height: #ffff66;
    --fill: #67db6f;
    --stroke: #66a3ae;
    --stroke-width: #6177ff;
    --fill-opacity: #7868c6;
    --stroke-opacity: #8e5fa2;
    --dash-array: #bd82c4;
    --rotation: #efaffa;
}



.animation-item[data-property="opacity"]{ fill: var(--opacity); stroke: var(--opacity); }
.animation-item[data-property="x"]{fill: var(--x); stroke: var(--x); }
.animation-item[data-property="y"]{ fill: var(--y); stroke: var(--y); }
.animation-item[data-property="width"]{fill: var(--width); stroke: var(--width); }
.animation-item[data-property="height"]{ fill: var(--height); stroke: var(--height); }
.animation-item[data-property="fill"]{fill: var(-fill); stroke: var(--fill); }
.animation-item[data-property="stroke"]{fill: var(--stroke); stroke: var(--stroke); }
.animation-item[data-property="stroke-width"]{fill: var(--stroke-width); stroke: var(--stroke-width); }
.animation-item[data-property="fill-opacity"]{fill: var(--fill-opacity); stroke: var(--fill-opacity); }
.animation-item[data-property="stroke-opacity"]{fill: var(--stroke-opacity); stroke: var(--stroke-opacity); }
.animation-item[data-property="dash-array"]{ fill: var(--dash-array); stroke: var(--dash-array); }
.animation-item[data-property="rotation"]{ fill: var(--rotation); stroke: var(--rotation); }


svg *[data-property]>text{stroke:none!important;}




pages-panel{ width:206px; }
pages-panel>.content{overflow-y: auto; overflow-x: hidden; max-height: calc( 100vh - 200px );}


pages-panel>.content>div { text-align: center; overflow: hidden; cursor: pointer; border-radius: 6px; }

pages-panel>.content>div.selected{
   border: 2px solid var( --pages-panel-item-border-color-selected );
}

pages-panel>.content>div.selected.active{
   border: 2px solid var( --pages-panel-item-border-color-active );
   font-weight: bold;
}




pages-panel>.content>div>.label {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px 4px 4px;}
pages-panel>.content>div>.page-preview{  padding: 10px; height: 90px; line-height:90px;  }
pages-panel>.content>div>.page-preview>img{   background-color: #ffffff; max-height: 90px; vertical-align:middle; }



pages-panel.horizontal{
      width: calc(100vw - 45px);
}




pages-panel.horizontal>.content{
    overflow-y: hidden;
    overflow-x: auto;
    height: 150px;
    white-space: nowrap;
}


pages-panel.horizontal>.content>div
{
    display: inline-block;
    height: 130px;
}







layers-panel .header-list.item { border-bottom: 1px solid var( --layers-panel-header-border-color ); padding-bottom: 10px; margin-bottom: 10px; border-radius:0; }
layers-panel .item>.buttons>div>svg{ filter: invert(50%);  }

layers-panel .item{ display:grid; grid-template-columns: auto 90px; padding: 4px 0 4px 10px; border-radius: 6px; margin: 2px 0; }
layers-panel .item>.name{ line-height: 22px; font-size:13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
layers-panel .item>.buttons{ display: grid; grid-template-columns: auto auto auto;  }
layers-panel .item>.buttons>div{ display:inline-block; width: 16px; height: 16px; margin: 2px;  }
layers-panel .content>.item>.buttons>div{  border-radius: 12px; border: 2px solid var( --layers-panel-item-buttons-border-color );  }

layers-panel .content>.item .visibility-state>div{ pointer-events:none; border-radius:4px; width:8px; height:8px; margin:4px; background-color:#3366fe; }
layers-panel .content>.item.not-visible .visibility-state>div{  background-color:unset; }
layers-panel .content>.item.locked .locked-state>div{ pointer-events:none; border-radius:4px;  width:8px; height:8px; margin:4px; background-color:#ff0047; }



layers-panel>.content>.item.selected{ background-color:var( --layers-panel-item-bkg-color-selected ); color:var( --layers-panel-item-txt-color-selected ); }



layers-panel>.content>.item.selected.active{ background-color:var( --layers-panel-item-bkg-color-active ); color:var( --layers-panel-item-txt-color-active ); }




/*.box-pivot-display { text-align:center; width:50%;display: inline-block; margin-right: 2%;}*/
.box-pivot-display .bbox { display:inline-block; position:relative; border:1px solid #b1b1b1; width:40px; height:40px;  margin:10px; }
.box-pivot-display .bbox > * { position:absolute; width:6px; height:6px; background-color: #96A6C3; box-sizing: border-box; }
.box-pivot-display .bbox > *.selected { background-color: #4387dd; }
.box-pivot-display .bbox > #left-top { left:-3px; top:-3px }
.box-pivot-display .bbox > #center-top { left:50%; top:-3px; margin-left:-3px; }
.box-pivot-display .bbox > #right-top { right:-3px; top:-3px }
.box-pivot-display .bbox > #right-center { right:-3px; top:50%; margin-top:-3px; }
.box-pivot-display .bbox > #right-bottom { right:-3px; bottom:-3px; }
.box-pivot-display .bbox > #center-bottom { left:50%; bottom:-3px; margin-left:-3px; }
.box-pivot-display .bbox > #left-bottom { left:-3px; bottom:-3px }
.box-pivot-display .bbox > #left-center { left:-3px;  top:50%; margin-top:-3px; }
.box-pivot-display .bbox > #center-center { left:50%; top:50%; margin-left:-3px; margin-top:-3px; }





.line-pivot-display .bbox { display:inline-block; position:relative; border:1px solid #b1b1b1; width:40px; height:0px; margin:50px 10px; }
.line-pivot-display .bbox > * { position:absolute; width:6px; height:6px; background-color: #96A6C3;  box-sizing: border-box;  }
.line-pivot-display .bbox > *.selected { background-color: #4387dd; }
.line-pivot-display .bbox > #start { left:-3px;  top:50%; margin-top:-3px; }
.line-pivot-display .bbox > #end { right:-3px; top:50%; margin-top:-3px; }
.line-pivot-display .bbox > #center { left:50%; top:50%; margin-left:-3px; margin-top:-3px; }

general-info-panel > span {  margin-right:30px;      line-height: 36px;}



.application>.header>:not( [ data-focused-type="none" ] )  commands-bar{ display:inline-block; height:100%; }

.application>.header[ data-focused-type="path" ] path-sub-tools-bar{ display:inline-block; height:100%; }
.application>.header[ data-focused-type="image" ]  image-sub-tools-bar{ display:inline-block; height:100%; }

.application>.header[ data-focused-type="innerSvgText" ] svg-text-editor-bar,
.application>.header[ data-focused-type="text" ]  svg-text-editor-bar { display:inline-block; height:100%; }
.application>.header[ data-focused-type="innerSvgText" ]  commands-bar{ display:none; }




.markers-display > div  { display:inline-block;text-align: center; }
.markers-display > div > * { pointer-events: none;  }
.markers-display > div > svg { border: 2px solid gainsboro;  width: 50px; height: 40px; display:inline-block; background-color:#f5f5f5;  border-radius: 10px; }
.markers-display > div.selected > svg { border: 2px solid #2c80ff; }
/*.markers-display > div > svg {   }*/
.markers-display > div .label { font-size: 10px; margin-bottom:3px; }


isolate-layer-bar {
    display: none;
    position: absolute;
    left: 0; top: 0;right: 0;height: 36px;
    background-color: var( --isolate-layer-bar-bkg-color );
    text-align: right;
    line-height: 36px;
    border-bottom: 1px solid var( --border-color );
}








.documents-tab-bar{ display: flex; white-space: nowrap; overflow: hidden;  background-color: var( --documents-tab-bar-bkg-color );  border-bottom: 1px solid var( --border-color ); }
.documents-tab-bar > * { border-right: 1px solid var( --border-color ); opacity:.6; cursor: pointer;  display:inline-grid; grid-template-columns: 30px auto 20px; width:100%; max-width: 256px; height: 32px;font-size: 11px;line-height: 32px;text-align: center; padding: 0 8px;  }
.documents-tab-bar > * > .close-button { display: none;  }
.documents-tab-bar > *.selected .close-button{ display: block;}
.documents-tab-bar > * > .label { overflow: hidden; text-align:left; text-overflow: ellipsis; font-size:13px;  }
.documents-tab-bar > * > .icon > svg { vertical-align: middle; margin:2px; pointer-events: none; filter:invert( var( --documents-tab-bar-item-icon-invert ));  }
.documents-tab-bar > *.selected > .icon > svg {  pointer-events: none; filter:invert( var( --documents-tab-bar-item-icon-invert-selected ));  }
.documents-tab-bar > *.selected { background-color: var( --documents-tab-bar-item-bkg-color-selected ); opacity:1; color: var( --documents-tab-bar-item-txt-color ); border-top-left-radius: 10px; border-top-right-radius: 10px; }
.documents-tab-bar > *.changed > .label { text-decoration: underline; text-decoration-style:dotted; }
.documents-tab-bar > *.changed > .close-button { color:red; }

page-origin {   display:block; box-sizing: border-box;  position: absolute; left:0; top:0; width:16px; height:16px;  cursor:pointer;  }

page-ruler {  display:block;  position: absolute;  cursor:pointer; overflow: hidden; }
page-ruler.horizontal { left: 17px;top: 0;right:0; height: 16px;  border-bottom: 1px solid var( --border-color );     }
page-ruler.vertical {   left: 0;top: 17px;bottom: 0; width: 16px; border-right: 1px solid var( --border-color );  }

page-ruler>*{position:absolute;}
page-ruler>.selection-range{background-color:#c9ddfb; }
page-ruler>.pointer-location{background-color: #FF0000; }
page-ruler.horizontal>.pointer-location{ width:1px; height:16px;}
page-ruler.vertical>.pointer-location{ width:16px; height:1px;}
page-ruler.horizontal>.selection-range{  height:16px;}
page-ruler.vertical>.selection-range{ width:16px; }



spread-sheet table {
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  color: black;
}

spread-sheet td, spread-sheet th {
  border: 1px solid #ddd;
  padding: 8px;
  white-space: pre-wrap;
}

spread-sheet tr:nth-child(even){background-color: #f2f2f2;}

spread-sheet tr:hover {background-color: #ddd;}

spread-sheet th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #589ac2;
  color: white;
  position: sticky;
  top: -1px;
  z-index: 2;
}



spread-sheet td input, spread-sheet th input, spread-sheet td textarea, spread-sheet th textarea{
  background-color: transparent;
  border:0;
  padding:0;
  width:100%;
  color:black;
  outline: none;
  resize: none;
  white-space: pre-wrap;
}

spread-sheet.disable-drag {
    
    pointer-events: none;
    
}

spread-sheet.disable-drag input, spread-sheet.disable-drag textarea{
    
    pointer-events: all;
    
}



/*th:first-of-type {*/
/*    left: 0;*/
/*    z-index: 3;*/
/*  }*/

/*tbody tr td:first-of-type {*/
/*  background-color: #eee;*/
/*  position: sticky;*/
/*  left: -1px;*/
/*  z-index: 1;*/
/*}*/


login-dialog .content { display:inline-block;  width:100%; max-width: 310px; position: relative; text-align: center; }
/*login-dialog .icon {  display: inline-block;width: 122px; margin-right: 10px; }*/
login-dialog .options {  font-size: 10px;text-align: center; margin-top:14px;  }
login-dialog .options a {  margin: 2px;  }
login-dialog .credentials {  display: inline-block; font-size: 11px; text-align: left;  width:130px; }
login-dialog a{color:inherit;}

.pages-tab-bar{ position:absolute; top:55px; width:100%; display: flex; white-space: nowrap; overflow: hidden;  border-bottom: 1px solid var( --border-color ); }
.pages-tab-bar > * { border-right: 1px solid var( --border-color ); opacity:.6; cursor: pointer;  display:inline-grid; grid-template-columns: 30px auto ; width:100%; max-width: 256px; height: 32px;font-size: 11px;line-height: 32px;text-align: center; padding: 0 8px;  }
.pages-tab-bar > * > .label { overflow: hidden; text-align:left; text-overflow: ellipsis; font-size:13px;  }
.pages-tab-bar > *.selected { background-color: var( --documents-tab-bar-item-bkg-color-selected ); opacity:1; color: var( --documents-tab-bar-item-txt-color );}
.pages-tab-bar > * > .icon > svg { vertical-align: middle; margin:2px; pointer-events: none; filter:invert( var( --documents-tab-bar-item-icon-invert ));  }
.pages-tab-bar > *.selected > .icon > svg { filter:invert( var( --documents-tab-bar-item-icon-invert-selected ));  }


about-dialog.dialog .content { border-radius: 8px; display:inline-block;  width:100%; max-width: 310px; position: relative; text-align: center; }
about-dialog a{color:inherit;}

about-dialog .versionInfo {font-size: 10px;text-align: right;line-height: 13px;     margin-bottom: 16px;}
about-dialog .logo {   opacity:.9;   display: inline-block;width: 170px; margin-bottom:5px; position: relative;top: 10px; filter:invert( var( --documents-tab-bar-item-icon-invert )); }
about-dialog .copyrightInfo {  font-size: 11px;text-align: center; margin-bottom: 45px; }