:root {
	--zcolor-text: #444;
	--zcolor-btnface: #fce94f;
	--zcolor-caption: red;
	
	--color-body: #ffffff;
	--color-text: #555753;
	--color-link: #3465a4;
	--color-title: #8f5902;
	
	--color-btnface: rgb(244, 243, 239);
	--color-btntext: #444444;
	--color-itemface: #efefef;
	--color-itemtext: #444444;
	--color-invface: #a40000;
	--color-invtext: #eeeeec;
	
	--color-control-border: #cccccc;
	--color-gray: #ccc;
	--color-textcanvas: #ffffff;
	--color-caption: #204a87;
	--color-input: #ffffff;
	--color-seperator: #ffffff;

	--color-transparent: rgba(0, 0, 0, 0);
	--color-focused: #dddddd;
	--color-hover: #edd400;
	--color-active: #f57900;
	--color-selected: #8ae234;
	--color-disabled: #cde4fc;
	--color-readonly: #ffffff;
	
	--color-scrollbar-thumb: #888a85;
	--color-scrollbar-hover: #2e3436;
	--color-scrollbar-track: #ffffff;
	
	--layer-top: 10000 !important; 
	--layer-combo: 9999 !important; 
	--layer-menu: 9999 !important; 
	--layer-sticky: 99 !important; 
	
	--layer-dialog: 500 !important; 
	--layer-1: 100 !important; 
	--layer-2: 500 !important; 
	--layer-3: 1000 !important; 
	--height-button: 28px; 
	
	--border-input: 1px solid var(--color-control-border);
	--border-corner-dialog: 5px;
	--border-corner-button: .4em;
	--border-corner-token: 6px;
	--border-corner-tabs: 6px;
	
	--inline-height: 2em;
}

/************ USEFULL THINDS ( themeable ) **************/

.bgRed { color:black; background-color: red !important }
.bgGreen { color:black; background-color: green !important }
.bgBlue { color:black; background-color: blue !important }
.bgOrange { color:black; background-color: orange !important }
.bgYellow { color:black; background-color: yellow !important }
.bgWhite { color:black; background-color: white !important }
.bgGray { color:black; background-color: gray !important }

.coRed { color:red !important }
.coGreen { color:green !important }
.coBlue { color:blue !important }
.coOrange { color:orange !important }
.coYellow { color:yellow !important }
.coWhite { color:white !important }
.coGray { color:gray !important }

.hidden { display:none;}

@font-face {
  font-family: 'PublicSans';
	src: url('/bolero/kernel/fonts/PublicSans-Black.otf');  
	src: url('/bolero/kernel/fonts/PublicSans-Medium.otf');  
	src: url('/bolero/kernel/fonts/PublicSans-Regular.otf');  
}

body {
	font-family: PublicSans;
	font-size: 12px;
	}
	
#getready { display:none}

#modalback {
	display: none;  
	position: fixed;  
	z-index: 10000;  
	left: 0; top: 0;
	width: 100%;  height: 100%;  
	overflow: hidden; 
	background-color: rgba(0,0,0,0.5);  
}


::selection {
  color: var(--color-btntext);
  background: var(--color-selected);
}


.hidden{display:none !important;}
.visible{display:block !important;}
.bordered{border:1px solid #ccc}

.link {
	cursor:pointer;
	color:navy;
}
 
/************** ICONS ***************/

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #8f54a0 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 8px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #8f54a0;
    border-radius: 10px;
    border: 3px none #ffffff;
  }
  
  
.resizable {
  min-height: 30px;
  min-width: 30px;
  resize: both;
  overflow: auto;
  zmax-height: fit-content;
  zmax-width: fit-content;
}


.inline { 
	vertical-align: bottom;
	height: var(--inline-height);
	border-radius: var(--border-corner-button);
    border: 1px solid gray;
	display: inline-block;
	box-sizing: border-box;
	font-size: 1em;
	margin: .2em .2em;
}

.inline .icon {
    margin-top: .3em;
	vertical-align: bottom;
} 

.inline:focus {
	background-color:var(--color-hover);
	outline: none;
	border: 1px solid rgb(46, 194, 126) ;
}

component {
	display:inline-block;
	height:16px;  
	border: rgb(220, 138, 221) 1px solid;
}

.component{
	width: fit-content;
	padding:0px;
	margin:.1em .3em;;
	display:inline-block;
	vertical-align: bottom;
	box-sizing: border-box;
	}


.component .label{
    pointer-events: none;
    font-size: .8em;
    }

    
.caption{
    pointer-events: none;
    }

.hr{
	background-color: blue;
    height: 1px;
    margin: 5px 0px;
    }