html {
    background: var( --bkg-color );
    color: var( --txt-color );
    font-family: var( --font-family );
    font-size: var( --font-size );
}


.hidden{
    display: none!important;
}

*[onclick]{  cursor:pointer; }


button{
    background-color: var( --button-bkg-color );
    color: black; border: 1px solid var( --button-border-color );
    border-radius:6px;
    line-height: 26px;
    cursor:pointer;
    font-size: 12px;
}

button:hover{
    background: var( --button-bkg-color-hover );
    color: var( --button-txt-color-hover );
}


textarea{ font-family: inherit; font-size: inherit;  }


select{ background-color: var( --input-bkg-color ); color:var( --input-txt-color ); border-color:var( --input-border-color );  border-radius:6px;  }
input,textarea{  background-color: var( --input-bkg-color ); color:var( --input-txt-color ); border: 1px solid var( --input-border-color ); }


::-webkit-scrollbar { -webkit-appearance:none; }
::-webkit-scrollbar-track { background-color:transparent; }
::-webkit-scrollbar-thumb { border-radius:12px;   border:4px solid rgba(255,255,255,0);   background-clip:content-box;   background-color: rgba(0, 0, 0, 0.2);    }
::-webkit-scrollbar-thumb:hover {  border-radius:12px;   border:4px solid rgba(255,255,255,0);   background-clip:content-box;   background-color:#A0A0A0; }
::-webkit-scrollbar-corner { background-color: transparent; }


.icon > svg.no-filter { filter:none; }

.dropShadow  { -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,.5); -moz-box-shadow: 2px 2px 6px rgba(0,0,0,.5); box-shadow: 2px 2px 6px rgba(0,0,0,.5);	}

.showable-children>*:not(.showed){ display:none; }

.divisor-h { border-radius: 0; width: 100%!important; height: 1px!important; background-color:var( --border-color ); margin-top: 4px; margin-bottom: 4px; padding:0!important; pointer-events:none; }
.divisor-v { vertical-align: top; border-radius: 0; width: 1px!important; height: 100%!important; background-color:var( --border-color ); margin-left: 4px; margin-right: 4px; padding:0!important; pointer-events:none; }

.grid-columns-2{ display:grid; grid-template-columns: 48% 48%; grid-gap: 4%; }
.grid-columns-3{ display:grid; grid-template-columns: 32% 32% 32%; grid-gap: 2%; }

#PANELS{ z-index: 200; display: block; position:absolute; top:0;left:0;  }
#PANELS.locked{ width:100%; height:100%; }
#DIALOGS{ z-index: 300;   }
#MENUS{ z-index: 400; display: block; position:absolute; top:0;left:0;  }
#MENUS.locked{ width:100%; height:100%; }
@keyframes fade-in { 0% {opacity: 0;} 100% {opacity: 1;} }

.button-bar::-webkit-scrollbar { display: none; }
.button-bar.active > * { z-index:201;}

.button-bar > * { display:inline-block;  cursor: pointer; border-radius:21px; }
.button-bar > *:hover {  background-color:var( --button-bar-item-bkg-color-hover );   }
.button-bar > *:active {  background-color:var( --button-bar-item-bkg-color-active );  }
.button-bar > *.highlighted {  background-color:var( --button-bar-item-bkg-color-highlighted );  }
.button-bar > *.selected { background-color:var( --button-bar-item-bkg-color-selected );  }


.button-bar > * > svg { filter:invert( var( --svg-icon-invert ) ); pointer-events: none; vertical-align: top; }
.button-bar > *.selected > svg { filter:invert( var( --svg-icon-invert-selected ) );}
.button-bar > *:hover > svg { filter: invert( var( --svg-icon-invert-hover ));  }

.menu-bar{line-height: 28px;}
.menu-bar::-webkit-scrollbar { display: none; }
.menu-bar > * { vertical-align: top; cursor:default; display:inline-block; padding:0 10px 0 10px; font-size: 12px;  }
.menu-bar > *:hover { background-color: var( --popup-menu-item-bkg-color-hover ); color:var( --popup-menu-item-txt-color-hover ); background-clip: border-box; }
.menu-bar > * > .icon > svg { filter: invert(50%);  }
.menu-bar > *:hover > .icon > svg { filter: invert(100%);  }
.menu-bar > *.selected { background-color: var( --popup-menu-item-bkg-color-selected ); color:var( --popup-menu-item-txt-color-selected ); text-shadow:none;  background-clip: border-box; }
.menu-bar > *.highlighted { background-color: var( --popup-menu-item-bkg-color-highlighted ); color:var( --popup-menu-item-txt-color-highlighted ); text-shadow:none;  background-clip: border-box; }
.menu-bar.active{ position:absolute; z-index:401;  }


.tab-bar{ background-color:var( --tab-bar-bkg-color );  white-space: nowrap;display: flex;text-align: center; font-size:12px; overflow: hidden; cursor: pointer; border-radius: 6px; }
.tab-bar>div{width: 100%; padding:6px; color:var( --tab-bar-item-txt-color ); }
.tab-bar>div>*{pointer-events: none;}
.tab-bar>div>div{padding: 5px;line-height: 13px;}
.tab-bar>div.selected{background-color: var( --tab-bar-item-bkg-color-selected );  color:white;}
.tab-bar>div> svg { width:22px; height:22px; }
.tab-bar>div.selected > svg { filter: invert( 100% ); }


.popup-menu{ opacity: 0; position:absolute;  padding: 5px 0 5px 0; background-color:var( --popup-menu-bkg-color ); color:var( --popup-menu-text-color );  font-size: 13px; border-radius: 4px; min-width: 194px; text-align:left; line-height: normal;}
.popup-menu.showed { animation: fade-in .25s forwards;}
.popup-menu > .title { font-weight: bold;  pointer-events:none;  }
.popup-menu > * > * {pointer-events: none;  }
.popup-menu > * {padding: 13px 20px 13px 30px; position:relative; white-space: nowrap;  }
.popup-menu > *:hover  {  background-color: var( --popup-menu-item-bkg-color-hover );  color: var( --popup-menu-item-txt-color-hover );  }
.popup-menu > *.selected { background-color: var( --popup-menu-item-bkg-color-selected );  color: var( --popup-menu-item-txt-color-selected ); }
.popup-menu > *.checked .checkbox {position: absolute;width: 5px;height: 12px;border: solid var( --popup-menu-text-color ); border-width: 0 2px 2px 0;transform: rotate(45deg);top: 3px;left: 13px;}
.popup-menu > *:hover .checkbox {border-color: var( --popup-menu-item-txt-color-hover );}
.popup-menu > * [data-shortcut-key]{ display: inline-block;float: right;margin-left: 30px; }
.popup-menu > * .icon {    width: 18px;height: 18px;vertical-align: middle;margin-right: 8px;display: inline-block;}


.popup-menu > * > .icon > svg { filter: invert(50%); }
.popup-menu > *:hover > .icon > svg { filter: invert(100%);; }
.popup-menu > *[data-menu-activator] {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px" ><path fill="gray" d="M0,0 L8,5 L0,10 z"/> </svg>'); background-repeat: no-repeat;background-position: right 60% ;}
.popup-menu.scrollable{top:27px; bottom:2px; overflow: scroll; overflow-x:hidden;  overflow-y:auto;  -webkit-overflow-scrolling:touch; }

html[data-platform="MacIntel"] .popup-menu [data-shortcut-modifiers~="cmd"]:after {  content: "⌘" attr(data-shortcut-key);  }
html[data-platform="MacIntel"] .popup-menu [data-shortcut-modifiers~="cmd-shift"]:after {  content: "⌘⇧" attr(data-shortcut-key);  }
html[data-platform="MacIntel"] .popup-menu [data-shortcut-modifiers~="cmd-alt"]:after {  content: "⌘⌥" attr(data-shortcut-key);  }
html[data-platform="MacIntel"] .popup-menu [data-shortcut-modifiers~="cmd-alt-shift"]:after {  content: "⌘⌥⇧" attr(data-shortcut-key);  }

html:not([data-platform="MacIntel"]) .popup-menu [data-shortcut-modifiers~="cmd"]:after {  content: "Ctrl" "+" attr(data-shortcut-key);  }
html:not([data-platform="MacIntel"]) .popup-menu [data-shortcut-modifiers~="cmd-shift"]:after {  content: "Ctrl+Shift" "+" attr(data-shortcut-key);  }
html:not([data-platform="MacIntel"]) .popup-menu [data-shortcut-modifiers~="cmd-alt"]:after {  content: "Ctrl+Alt" "+" attr(data-shortcut-key);  }
html:not([data-platform="MacIntel"]) .popup-menu [data-shortcut-modifiers~="cmd-alt-shift"]:after {  content: "Ctrl+Alt+Shift" "+" attr(data-shortcut-key);  }



.popup-panel{ position:absolute;   padding: 30px 20px 20px 20px; border-radius: 4px; background-color:var( --popup-panel-bkg-color ); }
.popup-panel { opacity: 0;}
.popup-panel.showed {animation: fade-in .25s forwards;}
.popup-panel.scrollable{top:27px; bottom:2px; overflow: scroll; overflow-x:hidden;  overflow-y:auto;  -webkit-overflow-scrolling:touch; }

.popup-panel .title{ font-size: 14px; margin-bottom: 12px; font-weight: bold; pointer-events:none; }
.popup-panel.fixed {display:block;}


.popup-panel.disabled > *{ opacity:.4; pointer-events:none; }

.popup-panel.float-mode
{
    display:block!important;
    opacity:1!important;
}


.popup-panel > .close-button  , .popup-panel > .resize-button{ display:none;  }
.popup-panel.float-mode > .close-button , .popup-panel.float-mode > .resize-button { display:block; }

  
.popup-panel > .close-button{
    right: 0;
    position: absolute;
    top: 4px;
    width: 20px;
    height: 20px;
    padding: 4px;
    text-align: center;
    cursor:pointer;
}

.popup-panel > .resize-button{
    right: 0;
    position: absolute;
    bottom: 4px;
    width: 20px;
    height: 20px;
    padding: 4px;
    text-align: center;
    cursor:pointer;
    font-size: 13px;
}



.popup-panel.height-auto{  height:auto !important; }
   
    



.dialog.showed { justify-content: center; display: flex; width: 100%; height: 100%; position: absolute; z-index: 301;  }
.dialog > .content{ align-self: center;  min-width:200px; max-width:400px;  border-radius: 4px; text-align: left;  padding: 20px; background-color: var( --bkg-color ); }
.dialog > .content>.icon {  display: inline-block; }
.dialog > .content .info {  display: inline-block; padding:10px; text-align: left; vertical-align: top; }
.dialog > .content .title { font-size: 14px; font-weight: bold; overflow: hidden;  margin-bottom: 10px;}
.dialog > .content .description { font-size: 12px; overflow: hidden; }
.dialog > .content .buttons  { width:100%; text-align: right; margin-top: 10px; }
.dialog > .content .buttons button { min-width:100px; max-width:120px; margin:4px;  }
.dialog > .content .prompt-value { width: 99%; padding:4px; font-size: 13px; outline: none; font-family: inherit; margin-top: 10px;  }

.dialog .close-button { cursor: pointer; opacity: .3; position:absolute; 	top:3px; 	right:4px; 	width: 20px; 	height: 20px; background-position: -40px 0px; }
.dialog .close-button:hover {  opacity: 1;}

.dialog.service > .content{ padding: 20px 35px; margin:0; position:absolute; left:10%; right:10%; top:10%; bottom:10%; width:auto; height: 80vh; max-width: 80vw; }



.input-property{ position:relative; display: inline-block; text-align:left; width: 100%; vertical-align: top; margin-bottom: 10px; }
.input-property>.label{  font-size: 11px; color:var( --text-color );   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  max-width: 100%;  margin-bottom: 5px; }
.input-property select{  width: 100%;  height: 28px; font-size: 12px; padding: 0 6px; }
.input-property button {margin: 5px 0 2px 0 ;width: 100%; }
.input-property input{ padding: 0 6px; width: 100%; height: 28px; box-sizing: border-box; font-size: 12px;}
.input-property input[disabled]{  cursor: not-allowed; }
.input-property input[type="checkbox"]{width: 10px;  vertical-align: middle; height: unset; }
.input-property .color { margin: 2px; box-sizing: border-box; cursor:pointer; position: relative; border-radius:4px; height: 28px; overflow: hidden; border: 1px solid var( --input-border-color );}
.input-property .color>.bkg { border-radius: 4px; position:absolute; width:100%; height:100%; background-image:var( --alpha-bkg-pattern ); pointer-events: none;}
.input-property .color>.rgba { position:absolute; width:100%; height:100%; background-color:rgba(1,1,1,.5); pointer-events: none;}
.input-property textarea{width: 100%; box-sizing: border-box; resize: none; font-family: inherit; font-size: 12px;  }
.input-property .value  {width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap ;}
.input-property input[type="range"]+input[type="text"]{width:50px; margin-left:4px; text-align: center;}
.input-property>.inline-label{ position:absolute; color:var( --text-color ); left:-16px; bottom:10px; font-size: 10px; width: 12px; text-align: right; }
.input-property>.inline-label.pre{ left:-16px;  }
.input-property>.inline-label.post{ left: unset; right:5px;  }
.input-property>.icon{ position:absolute; left:-30px; display:inline-block; width: 32px; height:32px; }
.input-property>.icon > svg { filter:invert(80%); pointer-events: none; vertical-align: top; }


color-picker .color-values .input-property .label, color-picker .color-values .input-property input{ text-align:center!important; }
color-picker #HUE_PANEL{ position:relative; width:100%; height:21px; margin-top:10px; background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);}
color-picker #ALPHA_PANEL{ position:relative; width:100%; height:21px; margin-top:10px; background-image:var( --alpha-bkg-pattern );}
color-picker #ALPHA_PANEL .alpha-to-color-gradient{ pointer-events: none; position:absolute; left:0; top:0; width:100%; height:100%;  background: linear-gradient( to right, rgba( 0 , 0 , 0 , 0), darkolivegreen ); }
color-picker #SATURATION_PANEL{ position:relative; width:100%; height:150px;  background-color:darkolivegreen; /*border: 5px solid #f5f5f5; margin: -5px;*/}
color-picker #SATURATION_PANEL .white-gradient{ pointer-events: none; position:absolute; left:0; top:0; width:100%; height:100%;  background: linear-gradient( to right, white, rgba( 255 , 255 , 255 , 0));}
color-picker #SATURATION_PANEL .black-gradient{ pointer-events: none; position:absolute; left:0; top:0; width:100%; height:100%;  background: linear-gradient( to top, black, rgba( 0 , 0 , 0 , 0)); }
color-picker .saturation-point, color-picker .hue-point, color-picker .alpha-point{ border-radius: 4px; pointer-events: none; position:absolute; margin-top:-4px; margin-left:-4px; width:4px; height:4px; left:0; top:10px; border:2px solid black; background-color: rgba( 255 , 255 , 255 , .5)  }