/*
Object used in each editable field box Only T_,and D_ are visible 
t_ {}   title element
o_ {}  t_ and d_ essential container, necessary to manage rotation and edit scopes
d_ {}  data Element 
src_ {} source feild or srting 
sw_t {} source writable type "W" = writable (FieldName) "N" = not source element not writeable -->
et_ {}  allow title edit Flag.  y = user Can edit  blank and all other values = no edit
ed_ {}  allow data edit Flag.  y = user Can edit  blank and all other values = no edit
d_t {} data type = T (text) I (image) U (URL) 
t_o {} data Old = data Element value beofre change 
d_o {} data Old = data Element value beofre change 
dl_ {} holding element for data LookUp reference fields
dl_c {} For LookUp items, the original code value
dl_t {} LookUp TableName
dl_kf {} LookUp Key field
dl_lf {} look up return field
fn_ formulas  (can be in box oro in t or d or in a f_

REfer example html Structure reference:      e
<box>
<t_><o_>title string</o_></t_>  
<d_><o_>data string</o></d_>  
<src_>SysAndWPc</src_>
<sw_t>W</sw_t>
<et_></e_>   
<ed_>y</e_>  
<d_t>datatypeCode</d_t>  
<t_o>Previous title or blank if no change</t_o>   
<d_o>Previous data or blank if no change</d_o>  
<dl_>
<dl_c>1</dl_c>
<dl_t>fieldotpions</dl_t>
<dl_kf>option_name</dl_kf>
<dl_lf>option_value</dl_lf>
</dl_>
</box>

*/
:root{
  --colorpickheight :14px;
  --colorpickwidth :15px;
  --editmenufontsize:  var(--systemsfontsize);
  /* used for box display in drop menu */
  --editmenuitemswidth: calc(var(--colorpickwidth) * 9 ); 
  /* 9 shades */
  --editmenunameswidth: 160px;
  /* 9 shades + borders, pading etc*/
  --editiconssize: 31px;
  --floatingpanelcolor: #b3ffb3;
  --builderdetailcolor: rgb(254,164,153,0.8);
  --multiselectcolor: rgb(255,0,255,0.6);
  --menuhovercolor: #80d4ff;
  --editiconcolor :  rgba(222,228,224,0.8);
  --tagiconcolor :  rgba(196,167,135,0.8);
  --actioniconcolor :  rgba(114,63,208,0.8);
  --ScaleThisObj:0.5;
  --menuiconsize:18px;
  --rowmenunumcolumns:5;
  --boxmenunumcolumns:5;
  --rowmenuwidth: calc( var(--rowmenunumcolumns) * var(--menuiconsize) );
  --boxmenuwidth: calc( var(--boxmenunumcolumns) * var(--menuiconsize) );

  
  --scrolltop:0;
  --scrolladjust:0;
}      
.MenuDocVarDockingPoint{
  --scrolladjust:18px;
}

.docvardockingpt>.MenuDocVars {
  --scrolladjust:18px;
}

/*rgba(102, 204, 255 , 0.55) pale translucent blue*/
::--webkit-selection{
   background: rgba(155, 155, 155, 0.55);
}
::-moz-selection{
background: rgba(155, 155, 155, 0.55);
}
::selection{
   background: rgba(155, 155, 155, 0.55);
}

.warning:hover, .warning>input, .warning>input[type="checkbox"]:not(:indeterminate):not(:checked){
  background-color:orange;
}
.boxhover {
  /* background-color: rgba(102, 204, 102 , 0.55);*/  /*rgba(102, 204, 255 , 0.55);*/ /*rgba(153, 187, 255,0.55);   a pale green "#d4ffb3" =212, 255, 179; now pale blue*/
    outline-style: dotted;
   outline-color: rgba(102, 204, 102 , 0.55);    /*111, 255, 0*/
   outline-offset:var(--HighLightOutlineOffset);
   outline-width:var(--HighLightOutlineWidth);  
}
.boxcannotedit{
   /*background-color:rgba(255, 165, 0, 0.8); */  /*   "orange";*/
   outline-style: solid;
   outline-color: rgba(255, 165, 0, 0.6);    /*111, 255, 0*/
   outline-offset:var(--HighLightOutlineOffset);
   outline-width:var(--HighLightOutlineWidth);  
}
.relatedobjectiseditable{
   /*background-color: rgba(61, 209, 54, 0.8); */  /*   "darker green";*/
   outline-style: var(--HighLightOutlineStyle);
   outline-color: var(--RelatedHighLightOutlineColor);    /*111, 255, 0*/
   outline-offset:var(--HighLightOutlineOffset);
   outline-width:var(--RelatedHighLightOutlineWidth);
   min-height:15px;
   min-width:15px;
}
.thisobjectiseditable,.blockdrop{ /*blockdroplist when special datasource editor feild ia manually edited
   /*background-color: rgba(63, 255, 7, 0.8);*/   /*   "lighter green";*/
   outline-style: var(--HighLightOutlineStyle);
   outline-color: var(--HighLightOutlineColor);    /*111, 255, 0*/
   outline-offset:var(--HighLightOutlineOffset);
   outline-width:var(--HighLightOutlineWidth);
   min-height:5px;
   /* min-width:5px; */
}
.functionnameapplieshere{  
  background: repeating-linear-gradient(
     15deg,
     rgb(0 225 225) ,
     rgb(0 225 225) 8px,
     rgb(90 225 225) 8px,
     rgb(90 225 225) 12px
   );
}
.functionnameapplieshere,.functionnameapplieshere>d_,.functionnameapplieshere>t_{  
   outline-color:rgb(90 225 225);
   outline-offset:-8px;
   outline-style:dashed;
   outline-width:8px;
}

.highlightoutlineonops::before{
  /*--comment: to put hughlight around function op and datasource op to indicate something is configured there*/
   outline-style: solid;
   outline-color: rgb(75 200 75 / 65%);    /*111, 255, 0*/
   outline-offset: -3px;
   outline-width: 5px; 
}
.oprelated{
   /*background-color: rgba(7, 255, 203, 0.8); */  /*   "cyan";*/
   outline-style: dashed;
   outline-color: rgba(7, 255, 203, 0.6);    /*Cyan*/
   outline-offset:var(--HighLightOutlineOffset);
   outline-width:var(--HighLightOutlineWidth);  
}
.itemisselected{
   /*background-color: rgba(255, 255, 255, 0.9); */   /* white transluscent;*/
   outline-style: solid;
   outline-color: rgba(80,255,80,1);    /*111, 255, 0*/
   outline-offset:1px;
   outline-width:3px;
   outline-offset:var(--HighLightOutlineOffset);
   outline-width:var(--HighLightOutlineWidth);
}
.subitemselected{
   outline-style: dotted;
   outline-color: rgba(0,204,0,0.8);    /*111, 255, 0*/
   outline-offset:1px;
   outline-width:2px;
}
.objectstoselect:not(.itemisselected){
   /* background-color: rgba(41, 169, 34, 0.8);*/
   outline-style: dotted;
   outline-color: rgba(50,50,204,0.8);
   /*--old:111, 255, 0;*/
   outline-offset:-1px;
   outline-width:2px;
}

.userresize{

   border: 0.5px solid blue;
   resize: both;
   overflow: auto; 
}    

/* stripe grey fill to indicate Transparent color in menu items - rgba(0,0,0,0) */
.transparent, .doceditmenu>.coloreditmenu>.colorselect[style*='background-color:rgba(0,0,0,0)'] , #toolbarcentre>div>.coloreditmenu>.colorselect[style*='background: rgba(0, 0, 0, 0)']  {
   background: repeating-linear-gradient(
   45deg,
   #bbbbbb,
   #bbbbbb 10px,
   #999999 10px,
   #999999 20px 
   ) !important
;}

/*doceditmenu<div> editmenuinput/ID-paragraphnameselect<div.input> editmenulist/ID-Paragraphname<div.div>   editmenugrouptitle/<div.div.div> editmenuvalue/paragraphnameId<div.div.div.p>*/

.fontsizeinput{
   background-color: silver;
   border: 1px solid grey;
   text-align:left;
   margin-top:0;
   margin-left:1px;
   margin-right:1px;
   width: var(--editmenuitemswidth);

}      
.fontsizeinput>label{
   vertical-align:middle;
   margin-right:1px;
   margin-left:1px;
   padding-left:2px;
} 
.fontsizeinput>label>input{
   max-width: calc(0.3 * var(--editmenuitemswidth));
} 
.editmenulist, .selectorlist{
   font-size: var(--editmenufontsize);
   background-color: silver;
   border: 1px solid grey;
   max-width: inherit;
   width: inherit;
   margin:auto;
   text-align:left;
   margin-top:0;
   position:absolute;
   z-index:200;
   margin-left:1px;
   margin-right:1px;
   line-height: 195%;
   display:table-cell;
   min-width: calc( 1.0 * var(--editmenunameswidth));
}      

  
.editmenuwidelist {
   max-width: calc( 2 * var(--editmenuitemswidth));
   width: calc( 2 * var(--editmenuitemswidth));
}
.editmenulist>label, .editmenulist>div>label, .fontsizeinput>label, .fontsizeinput>div>label {
   width: auto;
   font-size: var(--editmenufontsize);
   line-height: 175%; /* WHY is 125% not working correctly ?*/
   /* display:inline-block; */
   background-color: lightgray;
   vertical-align:middle;
   border: transparent solid 1px; /* work around on font size label issue */
   /*comment: "Display block is needed for the documentsettings menu";*/
} 

.editmenulist>label>input, .editmenulist>div>label>input, .editmenulist>div>div>label>input {
   width: auto;
   max-width: calc(0.5 * var(--editmenuitemswidth));
   position: absolute;
   right: 1px;
   font-size: var(--editmenufontsize);
   vertical-align:middle;
   margin-right:1px;
} 
.editmenugrouptitle, .selectorgrouptitle {
   font-size: var(--editmenufontsize);
   white-space: normal;
   font-weight: bold;
   background-color: silver;
   text-align:left;
   margin-left:6px;
   /* line-height: 195%; */ /* WHY is 125% not working correctly ?*/
   vertical-align:middle;
   display: block;
   border-bottom: solid #444444 1px;
   margin-top: 4px;
   line-height: 1.25;
}

.editmenugrouptitle > label {
   background-color: lightgray;
   font-size: var(--editmenufontsize);
   line-height: 175%;
   vertical-align:middle;
   display:block;
   width: var(--editmenunameswidth);
}
.editmenugrouptitle > span {  /* + / - inc buttons on fontsize */
    border: 2px solid grey;
    background-color: #b4b6EE;
    font-size: 175%;
    font-style: bold;
    line-height: 150%;
    margin: auto;
    text-align: center;
    border-radius: 5px;
    min-width: calc( 0.25 * var(--editmenuitemswidth));
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
    white-space: normal;
    width: calc(0.35* var(--editmenunameswidth));
}
.editmenuvalue{
   font-weight: normal;
   padding-left:2px;
   margin-left:0;
   text-align:left;
   background-color: white;
   font-size: var(--editmenufontsize);
   line-height: 150%; /* why is 125% not working */
   vertical-align:middle;
}
.editmenuvalue:hover, #boxlayoutname>.editmenuvalue:hover>box  {
   background-color: var(--menuhovercolor) !important;
}
.hoverhighlight:hover  {
   background-color: var(--menuhovercolor) !important;
}
.editmenuselectlayout{
   vertical-align:top;
   padding:5px;
   margin-left:10px;
   background-color: silver;
   font-size: var(--editmenufontsize);
   line-height: 125%;
   vertical-align:middle;
   border: 2px solid grey;
}

.xeditmenuvalue > * {
   font-size:inherit;
}
.xeditmenuvalue > * > * {
   font-size:inherit;
}

.highlightdefaultoption, p.highlightdefaultoption, div>div>div>.highlightdefaultoption{
   background-color: rgba(152, 251, 152); /* 'palegreen'*/
}
.selectionhighlight,.fileselect,.directoryselect,.directorymark{
   background-color: rgba(26, 255, 26, 0.8) !important;/*#1aff1a a bright green*/
}
.datachangehighlight{
   background-color: rgb(160 231 255) !important;/*#1aff1a a bright yellow*/
}

.functionchangehighlight{
   background-color: rgb(255,209,20) !important;/*#1aff1a a bright orange*/
}

.showchangedrecord.todelete{
    background-color: rgba(255, 20, 20, 1) !important;/*RED*/
    
}
box.datachangehighlight:hover:before , f_.datachangehighlight:hover:before  {
    content: '<= Click to undo change';
    display: block;
    position: absolute;
    width: 130px;
    background: #ffaa00;
    z-index: 200;
    left: 16px;
}

.writesuccess{
    background-color:lightgreen !important;
}

.writefailed{
    background-color:red !important;
}
.writefailed:hover:after{
    content: attr(data-error);
    display:block;
    position: absolute;
    top: 10px;
    left: -10px;
    white-space: nowrap;
    background-color: orangered;
    font-weight: bold;
}


.multiboxselect, .select, .selectbox, .multirowselect{
   /* background-color: var(--builderdetailcolor); */
   outline: var(--multiselectcolor) dashed 4px;
   outline-offset: -4px;
}
/*.multirowselect{
   background-color: var(--builderdetailcolor); 
   outline: #bfff97 solid 4px; 
}*/

.fontsizeinput>.editmenuinput{
min-width: calc(0.4 * var(--editmenuitemswidth));
}
.colorselect{
    max-width: var(--editmenuitemswidth);
    border: 1px solid grey;
    text-align: center;
    font-size: var(--editmenufontsize);
    line-height: 140%;
    /*min-height: 16px;*/
    display: inline-block;
    /*min-width: calc(0.7 * var(--editmenuitemswidth));*/
    background: white;
    /*vertical-align: middle;*/
    height: 20px;
}
.editmenuinput{    /*.selectorinput => not used */
    /*max-width: var(--editmenuitemswidth);*/
    border: 0.5px solid grey;
    text-align: center;
    font-size: var(--editmenufontsize);
    line-height: 100%;
    /*min-height: 14px;*/
    display: inline-block;
    min-width: calc(0.8 * var(--editmenuitemswidth));
    background: white;
    /*vertical-align: middle;*/
    min-height: 17px;
    margin-right: 2px;
    margin-left: 2px;
    padding-left: 1px;
    padding-right: 1px;
    bottom: -4px;
    padding-top: 2px;
}
.pagesizeselect>.editmenuinput{
    min-height: 21px;
}
.colorvaluebox {
   line-height:var(--colorpickheight);
   float:left;
   margin-left:1px;
   padding-left:1px;
   text-align:left;
   border:0;

}
.clrpick {
   width:var(--editmenuitemswidth);
   height:var(--colorpickheight);       
   margin:0;
   padding:0;
   border:0;
   white-space: nowrap;
   display:table-cell;
   text-align:center;
}        

.autoheight{
   height: auto !important;
}
.doceditmenu{
    /* font-size: var(--editmenufontsize); */
    padding:0;
    display: inline-block;
    background: rgba(128,128,128,0.2);
    /* height: 22px; */
    /* margin: 1px; */
    vertical-align: middle;
    position: relative;
    /* overflow: visible; */
    /* overflow-x: visible; */
    /* width: calc(1.5 * var(--editmenuitemswidth)); */
    top:0;
}
.doceditmenu>label{
    padding-left: 2px;
    padding-right: 2px;
}
.editbuttonsgroup>.doceditmenu,.editbuttonsgroup>.coloreditmenu{
    border: solid rgba(128,128,128,0.3) 0.5px;
    margin-left: 5px;
}
#editbtngrp2>.doceditmenu, #editbtngrp3>.doceditmenu{
    padding: 0;
    background: 0;
    margin-top: 0;
    margin-bottom: 0;
    border:0;
    padding-left: 2px;
    min-height: var(--editiconssize);
}
.editbuttonsgroup>.doceditmenu>editmenuinput {
   min-width: calc(0.3 * var(--editmenuitemswidth));
}

.coloreditmenu{
   font-size: var(--editmenufontsize);
   padding:2px;
   display:table-cell;
}

.colorvalueselector{
   opacity: .99;
   margin:auto;
   position:relative;
   z-index:150;
}
.colorvalueselector > p {
   opacity: .99;
   margin:auto;
   z-index:150;
   max-width: var(--editmenuitemswidth);
   width: var(--editmenuitemswidth);
}
.brightpastelselector{
   max-width: var(--editmenuitemswidth);
   width: var(--editmenuitemswidth);
   margin:auto;
   background-color: white;
   position:relative; 
}
.brightpastelbuttons {
   width: 1%;
   text-align:center;
   font-size: var(--editmenufontsize);
   border: 1px solid grey;
   margin:0;
   padding:0;
   max-width: calc(0.45 * var(--editmenuitemswidth));
   display:table-cell;
   margin-top:0;
}
.editbuttonsgroup{
   max-width: var(--editmenuitemswidth);
   width: var(--editmenuitemswidth);
   margin-bottom:0;
   /* margin: auto; */
   width: 100%;
   white-space: nowrap;
   display: table;
   margin-left: 10px;
   padding: 0;
}
#editbtngrp3{
 /* padding-top: 8px; */
 }
.editbutton {
 /*min-width: var(--editmenuitemswidth);*/
 /*width: calc( 0.9 * var(--editmenunameswidth));*/
 background-color: #E6EDE6;
 border: 1px solid LightSteelblue;
 border-radius: 5px;
 margin: auto;
 /*margin: 2px;*/
 padding: 1px;
 text-align: center;
 -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
 -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
 box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
 z-index: 100;
 display: block;
 /* table-layout: fixed; */
 font-size: var(--editmenufontsize);
 /* line-height: 175%; */
 vertical-align: middle;
 /*width: 90%;*/
}       
.editbutton:hover , .editiconselect:hover, .editdefaults:hover, .savedefaults:hover, .canceldefaults:hover,  .buildbutton:hover,.showmorebutton:hover { 
   background-color: #1aff1a;  
} 



.dragndropselect{
background-color: var(--builderdetailcolor);
}
.dragndrop:hover:not(.dragndropselect):not(.dragndropdest):not(.dragoverdest),
.dragndrop:hover:not(.dragndropselect):not(.dragndropdest):not(.dragoverdest)>t_,
.dragndrop:hover:not(.dragndropselect):not(.dragndropdest):not(.dragoverdest)>d_,
.dragndrop.dragoverdest:hover>t_,
.dragndrop.dragoverdest:hover>d_
{ 
   background-color: rgba(170,255,26,80%) !important;  
} 

box.dragndropdest:hover, .dragndropdest:hover>box, .dragndropdest:hover>div>box, .dragndropdest:hover>div>div>box
{ 
   background-color: #94ff50;  
} 
div>div>box.dragoverdest, div>div.dragoverdest>box{ 
   background-color: #1aff1a ;  
} 
/*o_[contenteditable="true"]{
    background-color: #1aff1a ;  
}*/
.nofill{
   background-color:none !important;

}
.showmorebutton {
    background-color: #E6EDE6;
    border: 1px solid LightSteelblue;
    border-radius: 5px;
    padding: 1px;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    display: inline;
    position: relative;
    top: -5px;
    left: 46px;
}       

.editiconsgroup{
   /* max-width: var(--editmenuitemswidth); */
   width: var(--editmenuitemswidth);
   margin:auto;
   width: 100%;
   white-space: nowrap;
   display: inline-block;
   background-color: var(--floatingpanelcolor);
}
.editiconsdiv:not(hideme){
   margin:auto;
   padding:0;
   white-space: nowrap;
   display: table-cell;
   /* table-layout: fixed; */
   border:0 solid transparent;
   border-color: var(--floatingpanelcolor);
   background-color: var(--floatingpanelcolor);
   /* min-width: var(--editiconssize); */
}       
.editiconsdiv:hover{
   border:0;
   outline: 3px solid purple;
   outline-offset: -3px;
}
.editicons, .tagicons, .actionicons,.wideicons {
   margin:auto;
   padding:0;
   border: 2px solid  transparent;
   border-color: var(--floatingpanelcolor);
   /*width: var(--editiconssize);*/
   height: var(--editiconssize);
   list-style: none;
   min-width: var(--editiconssize);
}       
.wideicons{
   width: calc(1.25 * var(--editiconssize));
   background: var(--editiconcolor);
}
.editicons {
    width: var(--editiconssize);
   background: var(--editiconcolor);
}
.tagicons {
    width: var(--editiconssize);
   background: var(--tagiconcolor);
}
.actionicons {
    width: var(--editiconssize);
    background: rgb(169 129 245 / 80%);
}
.editicons:hover,.Addicons:hover{
   border:0 ;
}
.editiconsactive,.commentson{
   outline: solid green;
   outline-width: 4px;
   outline-offset:-4px;
}
.locked{
   outline: solid orange;
   outline-width: 8px;
   outline-offset:-4px;
}
.editiconmenu{
   font-size: var(--editmenufontsize);
   background-color: #DDDDDD;
   border: 3px solid grey;
   text-align:left;
   margin-top: -2px;
   position:absolute;
   z-index:200;
   display:table-cell;
   padding: 5px;
   width: 420px;
   line-height: 100%;
}      

.editiconmenu>div{
   padding:0;
   position: relative;
}
.editiconmenu>div>p,.editiconmenu>div>ol,.editiconmenu>div>ul{
   /* line-height:160%; */
   white-space: pre-wrap;
   padding-right: 5px;
}

.editiconselect { 
   display:block;
   background-color:silver;
   font-weight:bold;
   border: 2px solid grey;
   line-height: 120%;
   margin: 5px;
   border-radius: 5px;
}
.editiconselect>ol, .editiconselect>ul {
   font-weight:normal;
}


.editdefaults, .savedefaults, .canceldefaults{
   border: 2px solid grey;
   background-color: #b4b6EE;
   /*font-size: 150%;*/
   /*font-size: calc(var(--Frac18-12) * var(--systemsfontsize));*/
   font-style: bold;
   line-height: 150%;
   margin: auto;
   text-align: center;
   border-radius: 5px;
   min-width: calc( 0.25 * var(--editmenuitemswidth));
   padding-left: 5px;
   padding-right:5px;
   display: inline-block;
   white-space: normal;
}
.editiconvalues {
}
.editiconvaluesblock{
   display: block;
   margin: auto;
}

/* use this in edit menus to place edit blocks side by side*/
.editiconvaluesblock>div{
   display: inline-block;
   margin: auto;
}

.editiconvalues>label {
   display:block;
   white-space: normal;
   /* padding: 2px; */
}
.editiconvalues>label>span {
   min-width: 110px;
   display: inline-block;
   vertical-align: middle;

}
.editiconvalues>label>input, .editiconvalues>div>label>input {
   width:100px;
   vertical-align: middle;
}


.scopemenu {
   border: 2px solid LightSteelblue;
   background-color: var(--floatingpanelcolor);
   border-radius: 8px;
   border-top: none;
   margin: auto;
   vertical-align: middle;
   position: absolute;
   top: -2px;
   left: -6px;
   padding: 2px;
   padding-right:6px;
   z-index:200;
   width: calc( 1.36 * var(--editmenunameswidth));
   max-height: calc(88vh - var(--top));
   overflow-y: auto;
   overflow-x: visible;
}

.scopemenu>div>q  {
   background-color:#EEEEEE;
   border: 1px solid LightSteelblue ;
   border-radius: 5px;
   margin: auto;
   margin-top: 3px;
   padding: 1px;
   padding-left:5px;
   text-align:left;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   white-space: pre-wrap;
   display:block;
   line-height: 120%;
   xxwidth: calc( 1.1 * var(--editmenunameswidth));
}

.scopemenu>div{
   background-color:#dddddd;
   border: 1px solid LightSteelblue;
   border-radius: 5px;
   margin: auto;
   margin-top:0;
   margin-left:1px;
   padding: 1px;
   padding-left:0;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   white-space: pre-wrap;
   display:block;
   line-height: 140%;
   margin-bottom: 3px;
   /*vertical-align: middle;*/
   min-width: calc(0.5 * var(--editmenuitemswidth));
   width: calc(1.40 * var(--editmenuitemswidth));
}
.scopemenu>div>span{
   /*vertical-align: middle;*/
   }

div>div>.scopemenu>div>.scopehighlight{
   /*background-color: rgba(26, 255, 26, 0.8) ;*/    /*#1aff1a a bright green*/
   font-weight: bold;
   font-size: 110%;
   line-height: 200%;
   outline-color: rgba(24, 146, 24, 0.8);
   outline-style: double;
   outline-offset: -6px;
   outline-width: 5px;
}
.scopevalue{
   background-color:#EEEEEE;
   border: 1px solid LightSteelblue;
   border-radius: 5px;
   margin: auto;
   margin-top: 2px;
   padding: 1px;
   padding-left:5px;
   text-align:left;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   /*white-space: pre-wrap;*/
   display:block;
   line-height: 100%;
   /*width: calc( 1.1 * var(--editmenunameswidth));*/
   width:auto;
   overflow: visible;
   white-space: pre;
}
.objspec{
    display:inline-block;
    font-size: calc(var(--Frac10-12) * var(--systemsfontsize));
}
.scopevalue:hover{
   outline-color: rgba(255, 70, 70, 1);
   outline-style: dashed;
   outline-width: 4px;
   outline-offset: -2px;
}

/* area left side of floating menu for builder details - ALT to scope panel and buttons */
/* Contains box Element config variables and record source variables */
.scopemenu>div.builderdetail {
    background-color: var(--builderdetailcolor);
    padding: 2px;
    margin: 0;
    margin-top: 5px;
}
/* div.builderdetail>div */
.rownboxmenu{
   display: inline-block;
   white-space: nowrap;
   border-bottom: 1px solid grey;
   /* width: calc( 1.1 * var(--editmenunameswidth)); */
   width: 100%;
   height: 18px;
   position: relative;
   vertical-align: bottom;
}
.rownboxmenu>input[type="checkbox"]{ /* used only for Checkboxes now*/
    /* width: calc( 0.60 * var(--editmenunameswidth)); */
    /* padding-left: 3px; */
    /* padding-right: 3px; */
    margin-left: 50px;
}
.rownboxmenu>span{
    padding-left: 0px;
    padding-right: 3px;
    white-space: nowrap;
    width: calc( 0.47 * var(--editmenunameswidth));
    display: inline-block;
    /* width: 45%; */
    position: relative;
    height: 17px;
    /* bottom: -2px; */
    vertical-align: top;}
.rownboxmenu>p{
    /*font-weight: bold;*/
    white-space: nowrap;
    /*display: inline-block;*/
    /*width: calc( 1.025 * var(--editmenunameswidth));*/
    /*line-height: 200%;*/
    /*font-size: 115%;*/
}
.rowobjectsmenu,.boxobjectsmenu{
    /* font-weight: bold; */
    white-space: pre-wrap;
    display: inline-block;
    margin-left:40px;
    /* width: calc( 0.35 * var(--editmenunameswidth)); */
    /*line-height: 200%;*/
    /* font-size: 115%; */
}

.rowobjectsmenu>m_>m_sub_>.op,.boxobjectsmenu>m_>m_sub_>.op {
  opacity : 1;
}
box.boxobjectsmenu>m_{
  left: -19px;
  top: -9px;
}

.buildvalue{
   font-weight: normal;
   padding-left:10px;
   margin-left:0;
   text-align:left;
   background-color: white;
   font-size: var(--editmenufontsize);
   line-height: 150%; 
   vertical-align:middle;
}
.buildvalue:hover  {
   background-color: var(--menuhovercolor) ;
}

.builddetailvalueCheck{xx:XX;/* --checkboxsize: 15px; */}



/* note the following classes SHall have NO CSS format, they are ONLY for function calls
   Format shall be applied separately, 
   hence html items with function and format shall have two classes
   eg <p class="togglebutton  Fancygreenbuttons" => togglebutton Class is purely function, Fancygreenbuttons Class is purely layout
   Function ONLY classes:
      Functions for toggleing menu button / expanding lists
      note function classes shall start with f_
         f_toggleset
         f_togglesetbutton
         f_togglebutton
         f_tgroup   
         f_clearbuttongroupselect   => remove class 
         f_selectablelistitem       => toggle class 
      */
div[class^="f_"],span[class^="f_"],label[class^="f_"],p[class^="f_"]
{  NoCSS: "Use for function only do not define format in this class";}

.f_nt{
    NoCSS: "Use sub items in a toggle button to prevent them doing toggle";
}

.f_toggleset,.f_tgroup,.f_togglebutton,.f_togglesetbutton,.f_clearbuttongroupselect,.f_selectablelistitem {
    position: relative; /*needed to ensure sub object positioning if needed*/
    /* display: inline-block; */
}
/* to insert a useful title infront of drop down value lists simple add attribute data-dataname*/
.f_tgroup>p::before {
    content: attr(data-dataname);
    display: block;
    font-weight: bold;
}
.datatoggle.f_togglebutton:before {
    content: attr(datatoggle);
    position: relative;
    font-size: 75%;
    white-space: normal;
    top: -0.2em;
    /* overflow: overlay; */
}

/* area top of floating menu for builder buttons */
/* -----------------------------------------*/
.builderbuttonzone{
  /* min width - prevent colapse when content is hideme */
   min-width: calc( 5 * (var(--editmenunameswidth) + 10px ) ); /* 10px is left margin between bxdefs*/
}
.builderbuttonzone>div>div>p {
   display:inline-block;
}
.buildbuttonsgroup{
    /* margin-bottom: 2px; */
    width: 100%;
    white-space: nowrap;
    display: block;
    background-color: var(--MenuBackground2color);
    /* padding: 1px; */
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.buildbuttonsgroup>div{
    display:block;
   width: 100%;
   margin-left: 1px;
   /* padding-top: 2px; */
   margin: 1px;
   position: relative;
}
.buildbuttonsgroup>div>div>div{
    display:block;
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    table-layout: auto;
    margin-left: 1px;
    background-color: var(--actioniconcolor)--buttons7color;
}
.buildbuttonsgroup>div>div:not(.tempspinner)>div>div:not(.selectorfield ){
 /* display: table-row; */
 border: 0.25px solid silver;
 border-radius: 5px;
 padding:0;
 margin:auto;
}
.buildbuttonsgroup>div>div>div>div.selectorfield{
 display: block;
 border:0.5px solid black;
 padding:0;
 /* margin:auto; */
}
.buildbuttonsgroup>div>div>div>.selectorfield>span,.buildbuttonsgroup>div>div>div>.selectorfield>div{
 display:inline-block;
 /* border:0.5px solid black; */
 padding:0;
 margin:auto;
}
.buildbuttonsgroup>div>div:not(.tempspinner)>div>div:not(.selectorfield )>label,.buildbuttonsgroup>div>div>div>div:not(.selectorfield )>Input{
 display:table-cell;
 border:0.5px solid black;
 padding:0;
 margin:auto;
}
.buildbutton {
   background-color: #E6EDE6;
   border: 1px solid LightSteelblue;
   border-radius: 1px;
   margin: auto;
   margin-left: 4px;
   padding:0;
   text-align:left;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   line-height: 125%;
   margin-top: 3px;
   padding-left: 12px;
}
.button {
   background-color: #E6EDE6;
   border: 2px solid LightSteelblue;
   border-radius: 5px;
   margin: auto;
   padding: 1px;
   text-align:center;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   xline-height: 125%;
   margin-top: 3px;
   xpadding-left: 12px;
}

.buttonbox {
    background-color: lightslategray;
    border: 2px solid LightSteelblue;
    border-radius: 5px;
    margin: auto;
    padding: 1px;
    text-align: left;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    xline-height: 125%;
    /* margin-top: 3px; */
    xpadding-left: 12px;
    padding: 3px;
    padding-bottom: 6px;
}
.buildbutton>input,.buildbutton>a>input {
   width:60px;
   /* position:absolute; */
   /* right: 70px; */
   height:16px;
}
.buildbutton>input[type='checkbox'] {
   /* width:30px; */
   /* position:static; */
   /* height:16px; */
}


.buildtogglebutton{
    /*background-color: #E6EDE6;*/
    /*background-color: #f1d52f;*/
    background-color: var(--buttons3color);
    /*border: 2px solid LightSteelblue;*/
    border-radius: 5px;
    margin: auto;
    padding: 1px;
    text-align: left;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    -webkit-box-snippetshadow: 1px 2px 4px rgba(0, 0, 0, .95);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    /*line-height: 125%;*/
    margin-top: 1px;
    font-weight: bold;
    padding-left: 5px;
    word-break: break-word;
    max-width: 100%;
    width: 100%;
    white-space: normal;
    /* position: relative; */
    /* font-size: calc(0.8 * var(--editmenufontsize)); */
    /* font-family: arial narrow; */
}      
/*.buildtogglebutton>span{ */
.buildtogglebutton>.f_buttongroupselectall,.buildtogglebutton>.f_clearbuttongroupselect{
    background-color: lightsteelblue;
    /* border: 2px solid LightSteelblue; */
    border-radius: 5px;
    /* right: 2px; */
    color: red;
    font-weight: bold;
    /* padding-left: 6px; */
    /* padding-right: 5px; */
    /* position: relative; */
    /* margin-right: 2px; */
    /* margin-top: -2px; */
    margin-left: 3px;
    position: relative;
    top: -5px;
}
   /* report select menu*/
.buildtogglebutton > p {
    display: inline-block;
}
.leftsidebar>div{
    /* padding:2px; */
    margin-top: 2px;
}

.leftsidebarloadpoint{
  min-width:calc( var(--Navbarswidth) - 20px) ;
  min-height: 80px;
}
.leftsidebarloadpoint>.tempspinner{
  top:0;
  left: -30px;
  height: 50px;
}

.leftsidebar>.f_toggleset{
    /*comment: "Breaking rule, f_ should not have format only function - to be fixed"*/;
    background-color:var(--buttonscolor);
    border: black solid 1px;
    border-radius: 5px;
    padding:2px;
    padding-left: 2px;
}
.leftsidebar>.f_toggleset>div>.f_toggleset{
    /*comment: "Breaking rule, f_ should not have format only function - to be fixed"*/;
    background-color: var(--buttons2color);
    border: black solid 1px;
    border-radius: 5px;
    padding:1px;
}

.rptseltogglebutton:hover,.rptgrouptypebutton:hover,.rptset>div>p:hover,.rptbutton:hover,.selectorinput:hover,.f_opensavereportmenu:hover, .fhbox>div>bg_>btn_:hover {
    background-color: #85f090;
}
.fhbox>div>bg_>btn_.redhighlight:hover{
  background-color: #ffaa00;
}
.rptseltogglebutton{
   /* background-color: Skyblue; */ /*#E6EDE6;   */
   /* border: 2px solid LightSteelblue; */
   /* border-radius: 5px; */
   text-align:left;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   /* -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95); */
   /* box-shadow: 1px 2px 4px rgba(0, 0, 0, .95); */
   font-weight:bold;
   margin-left:5px;
   width:inherit;
}   
.rptgrouptypebutton{
   text-align:left;
   font-weight:bold;
}   
.rptgrouptypebutton.buildbuttonsgroup{
   background-color: var(--buttons2color);
   border: 2px solid LightSteelblue;
   border-radius: 5px;
   text-align:left;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   font-weight:bold;
   /* width: 95%; */
}   
.rptselbutton {
   background-color: var(--buttons4color); 
   border: 2px solid LightSteelblue ;
   border-radius: 5px;
   xmargin: auto;
   xpadding: 1px;
   xtext-align:left;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   xline-height: 125%;
   xmargin-top: 3px;
   xpadding-left: 12px;
   white-space: pre-wrap;
   padding-top: 1px;
}
.rptbutton {
   background-color: var(--buttons4color); //#E6EDE6 ;   
   border: 2px solid LightSteelblue ;
   border-radius: 5px;
   xmargin: auto;
   xpadding: 1px;
   xtext-align:left;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   xline-height: 125%;
   xmargin-top: 3px;
   xpadding-left: 12px;
   white-space: pre-wrap;
   padding-top: 1px;
}
   
.rptset {width: auto;border: black solid 1px;padding: 1px;margin: 1px;border-radius: 5px;margin-left: 1px;overflow: hidden;}
  
.rptset>div>p {
   /* the Report set toggle button */
   background-color: var(--buttons6color);
   /* border: 2px solid #84a3ca; */
   /* border-radius: 5px; */
   margin-top:0;
   text-align: left;
   -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
   /* box-shadow: 1px 2px 4px rgba(0, 0, 0, .95); */
   /* font-weight: bold; */
   /* width: 180px; */
   white-space: normal;
   padding-top:0;
   padding-left: 2px;
}
 
.rptset>div>div>p {
   /* the Report set toggle button */
    background-color: var(--buttons5color); 
    border: 2px solid LightSteelblue;
    border-radius: 5px;
    margin-top: 2px;
    text-align: center;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    font-weight: bold;
   /* width: 180px;*/
    white-space: normal;
    padding-top:0;
} 
.reportoptions{
    display:table;
    width: 100%;
}
.reportoptions>div{
    display:table-row;
}
.reportoptions>div>input,.reportoptions>div>label{
    display:table-cell;
    /* max-width: 75%; */
    /* width: 1%; */
}

.selectorfield  {
    margin-top: 4px;
    text-align: left;
    width: 100%;
    display: table;
    border: solid grey 1px;
    padding: 4px;
    margin: 1px;
    white-space: normal;
    word-wrap: break-word;
    -webkit-line-break: after-white-space;
    position:relative;
    /* font-family: arial narrow; */
}
.selectdualselect  {
    margin-top: 4px;
    text-align: left;
    width: 100%;
    /*display: table;*/
    border: solid grey 1px;
    padding: 4px;
    margin: 1px;
    white-space: normal;
    word-wrap: break-word; 
    -webkit-line-break: after-white-space;    
    position:relative;
}
    
.selectorfield>span  { /*:first-child:not(script).selectorLabel*/
    display: inline-block;
    text-align: left;
    width: 45%;
    /* padding-left: 10px; */
    min-width: 45%;
    word-break: break-word;
    font-weight: bold;
}
.selectorinput{
    display: inline-block;
    background: aliceblue;
    /* line-height: 100%; */
    /* margin-top: 2px; */
    margin-right: 2px;
    width: 55%;
    min-width: 55%;
    white-space: normal;
    word-break: break-word;
    min-height: 20px;
    /* height: 20px; */
}    
.selectdualselect>span { /*:first-child:not(script).selectorLabel*/
    display: table-cell;
    text-align: left;
    width: 100px;
    /* padding-left: 10px; */
    min-width: 45%;
    word-break: break-word;
}
.selectdualselect>div {
    display: table-cell;
    background: aliceblue;
    /* line-height: 100%; */
    /* margin-top: 2px; */
    margin-right: 2px;
    width: 55%;
    min-width: 55%;
    white-space: normal;
    word-break: break-word;
}    
.selectorlist  {/*selectorfield>:nth-child(3):not(script),*/
    display: block;
    position:relative;
    
}    
.selectorgrouptitle>div>p  { /*.selectorfield>div>div>div>div>p */
   border: silver solid 1px;
   font-weight: normal;
}
.selectorgrouptitle>div>p {
    
    /* width: 202px; */
}
.selectorgrouptitle>div>p:nth-child(even)   {/*.selectorfield>div>div>div>div>p:nth-child(even) {*/
    background: #dcdff8
}
.selectorgrouptitle>div>p:nth-child(odd)   {/*.selectorfield>div>div>div>div>p:nth-child(odd) {*/
    background: #daecf2
}

.selectbuttongrp {
    margin: auto;
    text-align: center;
}
.selectorgrouptitle>div>span { /*.addgroup*/
    background-color: #E6EDE6;
    border: 2px solid LightSteelblue;
    border-radius: 5px;
    margin: auto;
    padding: 1px;
    text-align: left;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    margin-top: 3px;
    margin-left: 10px;
}

.selectbuttongrp>div {
    min-width: 20px;
    margin: auto;
    margin-top:0;
    border: orange solid 3px;
    text-align: center;
    background: #cfa962;
    border-radius: 5px;
    padding:0;
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
}


.scrollthis {
   overflow-y: auto;
   overflow-x:visible;
}
/* scrollthisleftside must use with a sub container div*/
.scrollthisleftside {
   overflow-y: auto;
   overflow-x: visible;
   direction: rtl;
}
.scrollthisleftside>div {
   direction: ltr;
}

.scrollheight100 {
   max-height:100px;
}
.scrollheight200 {
   max-height:200px;
}
.scrollheight400 {
   max-height:400px;
}
.scrollheight500 {
   max-height:500px;
}
.scrollheight550 {
   max-height:550px;
}
.scrollheight600 {
   max-height:600px;
}
.scrollheight650 {
   max-height:650px;
}
.scrollheight700 {
   max-height:700px;
}
.scrollheight750 {
   max-height:750px;
}
.scrollheight800 {
   max-height:800px;
}
.scrollheight1000 {
   /* max-height:1000px; */
}
.scrollheight1200 {
   max-height:1200px;
}
/*/ fielddisplay is used in menus to show a variables name and its value
this is utilised by function classes f_DocVars (for embedded document variables) and f_srcvars (for data source fields) */
.fielddisplay{
  position: absolute;

}
 .fielddisplay>input,.fielddisplay>p,.fielddisplay>var{
    width: calc(0.75 * var(--editmenuitemswidth));
    /* max-width: calc(0.7 * var(--editmenuitemswidth)); */
    position: absolute;
    right: 1px;
    /* font-size: calc(0.97 * var(--editmenufontsize)); */
    vertical-align: middle;
    /* margin-right: 7px; */
    /* white-space: pre-wrap; */
    display: inline-block;
    background: #ffe9d5;
    line-height: 16px;
    /* top:0; */
    /* margin-top: 2px; */
    overflow: hidden;
    text-align:left;
    /* min-width: 50px; */
    /* margin: 0; */
    /* padding: 0; */
} 

 .fielddisplay.highlightdocvar,.fielddisplay.highlightdocvar>var{
   background-color: var(--filenamecolor);
  }
 .fielddisplay.highlightdocnum,.fielddisplay.highlightdocnum>var{
   background-color: rgb(255 220 150);
  }


.fielddisplay>input:focus{ 
    width: calc(1.61 * var(--editmenuitemswidth));
    display: block;
    position: static;
    margin-right: -10px;
    background-color: palegreen;
}
/*.fielddisplay>input:hover,.fielddisplay>p:hover,*/ 
.fielddisplay>p[contenteditable="true"],.fielddisplay>var[contenteditable="true"]{
    width: calc(3 * var(--editmenuitemswidth));
    display: block;
    position: fixed;
    z-index: 999;
    white-space: pre-wrap;
    max-width: calc(3.0 * var(--editmenuitemswidth));
    margin-top: -19px;
    text-align: left;
    z-index: 3500;
    margin-top: -18px;
    left: calc(var(--menuadj) + var(--left));
    /*left: var(--menuadj);*/
    /* left:25px; */
    border: 1px solid black;
    margin-top: calc( var(--scrolltop) - var(--scrolladjust));
    /* margin-top: -131px; */
} 

.fielddisplay>p[contenteditable="true"]+ay_,.fielddisplay>var[contenteditable="true"]+ay_{
    display: block;
    position: fixed;
    white-space: pre-wrap;
    margin-top: -16px;
    z-index: 3600;
    /*right: 51px;*/
    overflow-y:visible;
    /* top: 37px; */
} 
.fielddisplay>p[contenteditable="true"]+ay_,.fielddisplay>var[contenteditable="true"]+ay_{
  left: calc(var(--menuadj) + var(--left)  + ( 3.0 * var(--editmenuitemswidth) ) - 35px);
}

.fielddisplay>p[contenteditable="true"]+ay_+an_,.fielddisplay>var[contenteditable="true"]+ay_+an_{
    display: block;
    position: fixed;
    white-space: pre-wrap;
    margin-top: -16px;
    z-index: 3600;
    right: 36px;
    overflow-y:visible;
} 
.fielddisplay>p[contenteditable="true"]+ay_+an_,.fielddisplay>var[contenteditable="true"]+ay_+an_{
  left: calc(var(--menuadj) + var(--left)  + ( 3.0 * var(--editmenuitemswidth) ) - 20px );
}
.fielddisplay>p[contenteditable="true"]+x_,.fielddisplay>var[contenteditable="true"]+x_{
    display: block;
    position: fixed;
    white-space: pre-wrap;
    margin-top: -17px;
    z-index: 3600;
    right: 33px;
    overflow-y:visible;
} 


.fielddisplay>p:empty::before,.fielddisplay>var:empty::before{
  background:orange;
  font-size:  calc(var(--Frac10-12) * var(--systemsfontsize));
    content: "none";
    white-space: pre-line;
  Min-width:10px;
}
/*.fielddisplay>p:hover::before*/
.fielddisplay>p[contenteditable="true"]::before,.fielddisplay>var[contenteditable="true"]::before{
/* comment: "Content behind shows through, ..... is a workaround to blocking them"; */
content: attr(data);
background-color: lightgrey;
display: inline-block;
/* padding-left: calc(1. * var(--editmenuitemswidth)); */
white-space: nowrap;
padding-right: 1px;
font-weight: bold;
}

 .fielddisplay{
    background-color: lightgray;
    font-size: calc(var(--Frac10-12) * var(--systemsfontsize));
    line-height: 1.6;
    vertical-align: middle;
    display: block;
    max-width: calc(1.4 * var(--editmenunameswidth) - 20px );
    border: 1px solid grey;
    text-overflow: clip;
    text-align: left;
    overflow-x: hidden;
    position: relative;
    overflow-y: hidden;
    min-width: 200px;
}
 .fielddisplay:hover{
 /* Problem, unset needed to allow the child to display floating BUT 
    then this field can overflow underneath.
    */
    /*text-overflow: unset;*/
    overflow-x: unset;
    /*overflow-y: unset;*/
    /*max-width: unset;*/
    /*font-size:12px;*/ /* just make it smaller to prevent it sticking out from underneath the floating box */
}
.docvardockingpt{
 top:50px;
}
.dircontainer{
 top: 2px;
}
.dirdockingpt{
 top: 5px;
}

.docvardockingpt, .dirdockingpt, .dircontainer{
  /*max-height: 220px;*/
  position: absolute;
  /*min-width: 220px;*/
}




.tgroupsubbox{
    border: 2px solid steelblue;
    /* border-left: 4px solid black; */
    /* border-right: 0.5px solid black; */
    /* background: #af723f; */
    border-radius: 5px;
    /* margin-left: 1px; */
}

.varselected{
   background-color: rgba(26, 255, 26, 0.8) !important;/*#1aff1a a bright green*/
}

.radiobuttonset{
  /* font-size: var(--systemsfontsize); */
  line-height: 80%;
}
.radiobuttonset>div{
  position:relative;
  left: -5px;
}
.radiobuttonset>div>input{
  position:relative;

}
.radiobuttonset>div>label{
  position:relative;
  top: -4px;
}

#datasrchandle {
   position: absolute;
    top: 2px;
    left:0;
}
.datasrcbutton {
    background-color: #baf5ba;
    border: 2px solid #168216;
    border-radius: 5px;
    margin: auto;
    /* padding: 1px; */
    text-align: center;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    line-height: 150%;
    /* margin-top:0; */
    /* padding-left: 12px; */
    max-width: 250px;
    /* font-size: calc(var(--Frac14-12) * var(--systemsfontsize)); */
}
.docsrcmenu {
   /*border: 2px solid silver;*/
   /* border-radius:3px;*/
   margin-bottom: 2px;
   width: auto; /*380px;*/
   display:block;
   white-space: normal;
   max-width: 800px; /* to force wrapping when tet fileds like descriptors are very long*/
   /* overflow-y: auto; */
   /*max-height: 800px;*/
   overflow: auto;
   max-height: calc(87vh - var(--top));
   font-size: var(--systemsfontsize);
}
.docsrcmenu>div {
   border: black solid 1px;
   /* border-radius:3px;*/
   /* margin-bottom: 2px; */
   /* width: auto; */ /*380px;*/
   /* display:block; */
}
.leftsidebar>.tempspinner{
   height: 50px;
   /* width: auto; */
   top:0;
   left: 50px;
   min-width: 150px;
}
.filedisplay>.tempspinner, .directorydisplay>.tempspinner{
   height:0;
   /* width: auto; */
   top: -11px;
   left: -21px;
   /* min-width: 20px; */
   width: 26px;
   transform: matrix(0.75, 0, 0, 0.75, 0, 0);
}.logobox>.tempspinner{
   height:0;
   /* width: auto; */
   top: -11px;
   left: -21px;
   /* min-width: 20px; */
   width: 26px;
   transform: matrix(3, 0, 0, 3, 0, 0);
   border: none;
}
.logobox.popupmenu{
  border:none;
  background:none;
  
}

.filedisplay>.tempspinner>.spinnerbox,.directorydisplay>.tempspinner>.spinnerbox{
  /* width: 44px; */
}
.serverfileloadlist>.tempspinner{
     height: 50px;
     /* width: auto; */
     top:0;
     /* left: 50px; */
     min-width: 282px;
     text-align:center;
}
.loginmessageclass>.tempspinner {
     height: 35px;
     /* width: auto; */
     top:0;
     left: -35px;
     /* min-width: 218px; */
     text-align:center;
}
.onepage>.tempspinner {
     height: 45px;
     /* width: auto; */
     top:0;
     left: -96px;
     min-width: 200px;
     text-align:center;
}

.serverfileloadlist>.tempspinner>.spinnerbox {
  text-align:center;
  left:40px;
}

.filedisplay>.tempspinner>div,.leftsidebar>.tempspinner>div,.loginmessageclass>.tempspinner>div,.serverfileloadlist>.tempspinner>div {
   margin: auto;
}
.filedisplay>.tempspinner>span,.leftsidebar>.tempspinner>span,.loginmessageclass>.tempspinner>span,.serverfileloadlist>.tempspinner>span {
   margin: auto;
}
.serverfileloadlist,.tempspinner>.serverfileloadlist{
  min-width:150px;
  max-height: calc(80vh - var(--top));
  overflow-y:auto;
}

.SVGSpinnerFixedPlate{
  background-color: rgb(210,210,210);
  height: 75px;
  width: 400px;
  margin:auto;
}
.SVGSpinnerFixedPlate>.tempspinner {
  top: 2px;
  left: -32px;
}
.docbodyloader>.tempspinner {
  top:5px;
  left:-20px;
}
x_>.tempspinner {
  /*comment: "Put Spinner Before an x_";*/
  top: -8px;
  left: -70px;
}
.tempspinner {
     height:0;
     width:0;
     display: block;
     position: relative;
     top: -5px;
     margin: auto;
     text-align: center;
     /* right: 30px; */
     left: -36px;
     font-size: 14px;
     line-height:105%
     /* --comment:  To centre either width zero oddset left -36 or must have real width; */
}
d_>o_>div.tempspinner{
  left:0px;
  width:61px;
  padding: 0;
  margin:0;
  top: -2px;
  padding-left: 2px;
  padding-right: 2px;
  /* vertical-align: middle; */
  height: 27px;
  display: inline-block;
}

div.tempspinner>div.spinnerbox>div>div:nth-child(2){
  top: 7px;
}

.tempspinner>.spinnerbox{
     height: 30px;
     width: 60px;
     display: block;
     position: relative;
     margin: auto;
     text-align: center;
     /* left: -150px; */
     border: none;
}
.f_fieldvalue>.tempspinner{
     /*height: 30px;*/
     /* width: 300px; */
     margin: auto;
     text-align: center;
     left: -29px;
     top: -13px;
     z-index: 5000;
}
/*.tempspinner>div */
.tempspinner>.spinnerbox>div{
   position: relative;
   display: block;
   margin: 0;
   vertical-align: middle;
   /* margin-right: -15px; */
   width: 61px;
   /* min-width: 60px; */
   /* max-width: 60px; */
   height: 28px;
   padding: 0;
}
.tempspinner>.spinnerbox>span {
    /* comment:"User Label on Spinner"*/
    /* width: max-content; */
    /* height: max-content; */
    white-space: pre-line;
    font-weight:bold;
    margin: auto;
    /* margin-right: -5px; */
    /* width: 1px; */
    /* min-width: 203px; */
    /* max-width: 60px; */
    /* display:; */
    text-align: center;
    position: relative;
    top: -5px;
    display: block;
    width: 200px;
    left: -70px;
    text-align-last: center;
}
.SVGSpinnerFixedPlate>.tempspinner>.spinnerbox>span {
  width: 400px;
  left: -169px;
}
.tempspinner>.spinnerbox>div>div {
    display: inline-block;
    vertical-align: middle;
    margin-right: -5px;
    /* width: 0; */
    /* margin-left: 9px; */
    height: 30px;
    left: -2px;
    position: relative;
}

.docsrcmenublock, .docsrcfilterblock , .docsrcselectblock {margin-bottom: 2px;width: auto;display: block;border: 1px solid grey;border-radius: 3px;margin: 1px;padding: 1px;font-size: var(--systemsfontsize);}

.docsrcmenu:first-child {
    text-align: center;
    font-size: var(--systemsfontsize);
    font-weight: bold;
}
.datatitle { /*depricated*/
   font-weight:bold;
   
}
.f_ddc_sectiondatasourcedef>div {
   display:inline-block;
}
.f_ddc_sectiondatasourcedef>div:not(:first-child) {
   border: 1px double black;
   padding-left: 5px;
   padding-right: 5px;
   min-width: 100px;
   background: #a0e7ff;
   min-height: 15px;
} 

.datamenu>.popmenuheader {
   border: 1px double black;
   padding-left: 5px;
   padding-right: 5px;
   min-width: 100px;
   background: #38d6b9;
}

.docsrcmenu>.docsrcmenublock>div:first-child {
    font-size: var(--systemsfontsize);
    background: #f77ce8;
}


.docsrcmenublock>.f_ddc_sectiondatasourcedef>.datasourceselectlist {
    /*font-size: calc(var(--Frac14-12) * var(--systemsfontsize));*/
    width: 0;
    position: relative;
    height: 0;
    /* white-space: nowrap; */
    /* display: block; */
    top: 20px;
    left: -100px;
    /* overflow-y: scroll; */
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}
.datasourceselectlist>div {
    position: relative;
    min-height: 12px;
    z-index: 10;
    min-width: 300px;
    top: -10px;
    max-width: 300px;
}
.datasourceselectlist>div>.f_tgroup {
    overflow-y: auto;
    max-height: 500px;
    overflow-x: hidden;
    min-width: 250px;
    /* width: 300px; */
}

div#toggledatasrclists>p {
    white-space: nowrap;
}
.datasourcedefaultsort, .ddcallowcontrol, .datasourcelinking, .reportsectionpermissions {
    font-weight: bold;
    border: grey double 4px;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 3px;
    border-radius: 3px;
}

.ddcallowcontrol>div,.reportsectionpermissions>div {
  display: inline-block;
  left: 0;
  border: grey solid 1px;
  margin: 1px;
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 3px;
  padding-left: 5px;
  Padding-right: 5px;
  font-size: var(--systemsfontsize);
}
.ddcallowcontrol>div>span,.reportsectionpermissions>div>span,.f_pageperrecord  {
   background:lightgreen;
   padding-left: 5px;
   padding-right:5px;
   position: relative;
   top: -1px;
   margin-left: 3px;
}
.ddcallowcontrol>div>span[data-optioncode="0"],.reportsectionpermissions>div>span[data-optioncode="0"],.f_pageperrecord[data-optioncode="0"]  {
   background:orange;
}

.datasourcelinking{
}
.datasourcelinking>label,.datasourcelinking>span,.datasourcelinking>div{
    display: inline-block;
    /* font-size:12px; */
    padding-left: 1px;
    padding-right: 1px;
    border: solid transparent 3px;
    margin: 4px;
    margin-left: 1px;
    margin-right: 1px;
}
.datasourcelinking>div{
    border: solid black 1px;
    margin: 1px;
    padding-bottom: 1px;
    margin-left: 1px;
    margin-right: 1px;
}
.datasourcelinking>div>div{
    display:inline-block;
    border: solid black 1px;
    padding-left: 2px;
    padding-right: 2px;
    margin: 1px;
    background: lightgreen;
}
.datasourcelinking>div>div[data-optioncode=""]{
    background: orange;
}
.datasourcelinking>div>label{
    display:inline-block;
    border: solid transparent 1px;
    margin: 1px;
}

 
.datasourcedefaultsort>span {
    max-width: 380px;
}
.filterconditionset {
   
}
.filterconditionset>:first-child { /* The X for delete */
    padding-left:5px;
    padding-right:5px;
   vertical-align: middle;
}
.filterconditionset>:nth-child(2) { /* The COndition set Label*/
    /*background: #17ff00;*/
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    vertical-align: middle;
    font-size: calc(var(--Frac12-12) * var(--systemsfontsize));
}



.filterconditionset>div {
   display: table-cell;
   border: 3px double black;
}
.filterconditionsetor {
   text-align: center;
   font-weight: bold;
   background: #ff46ff;
   ;
}
.f_dataaddfilterconditionset {
    /* background: #ffaaff; */
}
.datafilters {
   /* font-size:12px; */
   text-align:center;
}
.datafilters>tr:not(:last-child):not(:first-child) {
    background: lightgreen;
    }
.datafilters>tr:first-child, .datafilters>tr:last-child, .qdataconditions:first-child {
    background: #70d8fb;
}
.datafilters>tr:first-child {
font-weight:bold;
width:100px;
}  

.datafilters>tr>td {
    margin-top: 3px;
    margin-left: 3px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    max-width: 150px;
    word-break: break-word;
    /* min-width: 80px; */
}

.datafilters>tr>td:nth-child(1) { /* delete X*/
    max-width: 20px;
    width: 20px;
    min-width: 20px;
    margin-left: 0;
    padding-left: 0;
    /* margin-top:0; */
    /* padding-top: 0; */
    /* position: relative; */
    /* top:0; */
}
.qdatafilters>tr>td:nth-child(2){ /*selector same size and behaviour as in the Report Slect menu*/
    width: 100px;
    max-width:100px;
    min-width: 100px;
    white-space: normal;
}
.datafilters>tr>td:nth-child(4) {
    /*max-width: 30px;*/
    /*width: 30px;*/
    min-width: 30px;
}
.datafilters>tr>td:nth-child(7) { /* 'title' helper message, screen friendly layout for entry */
    max-width: 200px;
    white-space: normal;
}
.datafilters>tr>th {
    padding-left: 5px;
    padding-right: 5px;
    text-align:center;
}

/*.popupmenu>a,  .popupmenu>div>a,*/
/* to depricate, replaced entirely by x_*/
 .datafilters>tr>td>a, .filterconditionset>td>a, .selectdatevals>div>a, .tabdocname>a,.f_delreport>a,.CsvItemBlock>.f_csvitem>a, .snippetobj>a,#snippetcontainer>div>div>div>div>p>a { /* contains the X for delete */
    font-weight: bold;
    background: red;
    cursor: url(Delete.png) 12 12, auto;/* our cursor is a red and black X resulting in the animation of Big Red X appearing over the X delet marker*/
    width: 16px;
    display:  inline-block;
    text-align: center;
    margin: 1px;
    line-height: 16px;
}

.docsection>.popupmenu{
    z-index:1550;
}
.docsection>.popupmenu:hover{
    z-index: 2760;
}
.posfixpopup{ 
   /* Comment: "use to fix popup menu at top left of virtual desk top, otherwise popmenus foloow thier object" ;*/
   /* position: fixed; */
   top: calc(1px + var(--headerfooterheight));
   left: calc(1px + var(--Navbarswidth));
}

.userwarningpopup.popupmenu {
  z-index: 9500;
}
.userwarningpopup.popupmenu>div {

}
.userwarningpopup.popupmenu>div>x_ {
  display:inline-block;
  float: right;
}

.userwarningtitle {
  display:inline-block;
  white-space: pre-wrap;
  color:darkred;
  /* width: 80%; */
}

.userwarningmessage {
  white-space: pre-wrap;
  background:yellow;
  margin: 2px;
}
.userwarningmessage>span {
  display: inline-block;
  white-space: no-wrap;
  margin: 2px;
  padding-top:5px;
  padding-bottom:5px;
margin: 0 auto;/* left: -12px; *//* right: 25px; */position: relative;}
.userwarningmessage>span>div.tempspinner {
  display:inline-block;
  white-space: no-wrap;
  margin: 2px;
  left: 1px;
  top: -14px;
  width: 60px;
  
}


.admintoggle{
  /* display:inline-block; */
  /* float: right; */
  /* top: 4px; */
}
.popupmenu {
    /* direction: ltr; */
    /* display: block; */
    /* width: auto; */
    /* height: auto; */
    position: fixed;
    /* overflow-y: auto; */
    background-color: #a0e7ff;
    padding:0;
    border: 3px solid Steelblue;
    border-radius: 8px;
    z-index: 1600;
    /* margin: 0; */
    /* padding:20px; */
    /* min-width: 340px; */
    white-space: initial;
    text-align: initial;
    /* text-align-last: initial; */
    /* max-width: unset; */
    /* width: unset; */
    font-size: var(--systemsfontsize);
    /* line-height: 130%; */
    /* line-height: normal; */
    color: black;
    font-family: var(--systemsfont);
    /* overflow: overlay; */
}
.popupmenu:not(.dataoptionsfunctionsmenuclass):not(.boxfunctionseditmenu):not(.docsection):not(.fieldeditorcontainer):not(.dirdockingpt) {
    max-height: calc(97vh - var(--top));
    /*Comment: "--top must be set in JS DragObject";*/
    max-width: calc(100% - var(--left));
    min-height: 30px;
    /*overflow:hidden;*/
}
.dockedmenu{
      border: 3px solid Steelblue;
}
.dockedmenu>.f_tgroup{
      max-height: calc(83vh - var(--top));
      /*Comment: "--top must be set in JS DragObject";*/
      /* max-width: calc(100vw - var(--left)); */
      /*Comment: "--top must be set in JS DragObject";*/
      min-height: 30px;
      overflow-y: auto;
}


.popupmenu.dirdockingpt {
    max-height: calc(99vh - var(--top));
    /*Comment: "--top must be set in JS DragObject";*/
    max-width: auto;
    /*Comment: "--top must be set in JS DragObject";*/
    min-height: 30px;
}
.popupmenu.docsection {
    padding:20px;
    max-height: 60vh;
    /* --physicalpagewidth: 10cm; */
    /* --physicalpageheight: 12cm; */
    overflow-y: auto;
    /* overflow-x: visible; */
    width: calc( 1.5cm + var(--physicalpagewidth));
    /* Commentwidth: "need 3cm for m_ display as overflow not showing"; */
}


.popupmenu:not(.docsection)>div {
    /* CommentPopSections: "each section needs to have its own div";*/
    /* display: block; */
    /* padding:1px; */
    /* height: auto; */
    /* vertical-align: middle; */
    /* max-height: 50vh; */
}

.popupmenu>bg_ {
    /*Commentbuttongroup: "generally at end of popmenu";*/
    display: table;
    padding:1px;
    /* margin: auto; */
    /* height: auto; */
}
.popupmenu>bg_>btn_ {
    min-height:20px;
    font-size:calc(var(--Frac14-12) * var(--systemsfontsize));
    padding:3px;
    /* margin:auto; */
    font-weight:bold;
    display:inline-block;
    /* margin-left:5px; */
    margin-bottom: 5px;
}

.savehtmlmenu>.menuboxes>.docvarsdocking{
  max-height: 220px;
}

.menuboxes{
  display:block;
  position: relative;
  font-size: calc(var(--Frac11-12) * var(--systemsfontsize));
}
.menuboxes>div{
  display:inline-block;
}
.menutbl{
}
.menutbl:not(.rowborder)>div{
  display: table-row;
}
.menutbl>div{
  line-height:175%;
}
.menutbl>.docvardockingpt{
max-height: 220px;
}

#filemenurightclickid>.menuboxes>.rowborder{
  display:inline-block;
}
.rowborder>div{
  border: 1px solid #aaaaaa;
  /* padding: 0; */
  /* margin: 0; */
  /* display:inline-block; */
}
.cellborder>div>div,.cellborder>div>span,.cellborder>div>label,.cellborder>div>input{
  border: 1px solid #aaaaaa;
  margin: 0;
  margin-left:3px;
  padding-left: 3px;
}
.savehtmlmenu>div.displayfilename,.savehtmlmenu>div.displayfilenameold{
  /* width:350px; */
  display: block;
}

.savehtmlmenu>div.displayfilename>div,.savehtmlmenu>div.displayfilenameold>div{
  width: 500px;
  display:inline-block;
  position: relative;
  min-height: 32px;
  white-space: pre-wrap;
  border: 1px solid #aaaaaa;
  /* vertical-align: middle; */
  /* margin: auto; */
}
.savehtmlmenu>div.displayfilename>label,.savehtmlmenu>div.displayfilenameold>label{
  display:inline-block;
  position: relative;
  /* height:50px; */
}
.menutbl>div>div,.menutbl>div>span,.menutbl>div>input,.menutbl>div>label {
  display: table-cell;
  /* min-height: 25px; */
  /* line-height: 150%; */
}
.menutbl>div>div,.menutbl>div>input{
  width: 100px;
}
.menutbl>div>label {
  min-width:80px;
}
.menutbl>div>div{
  left:0;
  margin-left:0;
  padding-left:1px;
}
.menutbl>div>div.r5>.tempspinner{
  left: -70PX;
  height:50px;
  top:0;
}
.popupmenu:not(.docsection):not(.snippetcontainer):not(.SVGSpinnerFixedPlate)>div>div:not(.docvardockingpt):not(.docsrcmenu):not(.fieldcommandcontainer):not(.fieldparams):not(.fieldeditoractions):not(.datachangesaveactions)>div:not(.docsrcmenublock):not(.popmenuheader):not(.snippetobj), .popupmenu:not(.docsection)>div>.fieldcommandcontainer>div>div, .popupmenu:not(.docsection)>div>.fieldparams>div>:nth-child(3){
    /* --Comment: Data Slelect lists;*/
    position: relative;
    /* right: 0; */
    /* min-width: 150px; */
    /* min-height: 15px; */
}

.popupmenu>div>div>input ,.popupmenu>div>.fieldcommandcontainer>div>input,.popupmenu>div>.fieldparams>div>input{
   display: table-cell;
   position:relative;
   right:0;
   /* width: 160px; */
   min-width: 180px;
   min-height: 16px;
}
.popupmenu>div>input[type="checkbox"] {
/*--Comment: push check box back to the left side;*/
    /* left: 0;*/
    margin-left: 0;
    width: 30px;
}



.popmenuheader {
    display: table;
    width: 100%;
    font-size: calc(var(--Frac14-12) * var(--systemsfontsize));
    font-weight:bold;
}

.popmenuheader>img {
    /*comment_img: is the handle;*/
    display: inline-block;
    margin-right:10px;
}
.popmenuheader>span {
    /*Comment_span: is the title;*/
    display: table-cell;
    text-align: left;
    min-width: 80px;
    white-space: nowrap;
}
.popmenuheader>bg_ {
    /*Comment_bg_ group: for any buttons at top of menu;*/
    display: table-cell;
    /* margin-left:10px; */
    /* margin-right:10px; */
    text-align:right;
    top: -1px;
    position: relative;
}

.editme[contenteditable] {
    background-color: #1aff1a;
}
.editme:hover:after {
   font-size:calc(var(--Frac10-12) * var(--systemsfontsize));
   content: "  <=Click to Edit";
}
.editme:empty:before {
    content: "No text ....";
}
.snippetcontainer{overflow-y: auto;margin: auto;max-width: 900px;}

/*div:not(.snippetset).scale, .snippetset.scale>*:not(m_) {
transform: matrix(var(--ScaleThisObj), 0, 0, var(--ScaleThisObj), 0, 0);
    
}*/

.scale{
transform: matrix(var(--ScaleThisObj), 0, 0, var(--ScaleThisObj), 0, 0);
}
.scale.snippetobj>bg_,.scale.snippetobj>p{
transform: matrix( calc( 1.0 / var(--ScaleThisObj) ), 0, 0, calc( 1.0 / var(--ScaleThisObj) ), 0, 0);
}
.snippetset.small>* {
   /* --comment: "Use for signatures and use with .snippetset to control viewable size in snippet menu"; */
   /* width: 100px; */
   /* height: 100px; */
   max-width: 150px;
   max-height: 80px;
   margin: 2px;
   font-size:75%;
}

.snippetobj {
    border: 1px solid black;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    padding: 2px;
    margin: 2px;
    background-color: silver;
    position: relative; /*--Comment:need as foundation for abs on sub objects;*/
    display: inline-block;
    /* margin: auto; */
    /* padding-left: 15px; */
    overflow-y: auto;
}
/*--Comment: Snippet delete <a>X</a> needs to be positioned;*/
.snippetobj>a {
   position: absolute;
   right: 20px;
   top: 2px;
}
.snippetcontainer>.popmenuheader{
    min-width:450px;
}
.snippetcontainer>div>div>div{
   display: block;
}
.snippetcontainer>div>div>div>div{
   display: block;
}
.snippetcontainer.snippetprepareformat>div>div>div>div>.snippetobj,.snippetcontainer.snippetprepareformat>div>div>.snippetobj{
   display: block;
}
.snippetcontainer:not(.snippetprepareformat)>div>div>div>div,.snippetcontainer.snippetprepareformat>div>div{
   /* position: relative; */
   /* overflow-x: visible; */
   /* display: table; */
   /* max-height: 120px; */
   /* overflow-y: auto; */
}

.snippetcontainer>div>div>div>div>p>a{
   position: absolute;
   right: 20px;
   top: 8px;
}
/*--Comment: Snioppet title;*/
.snippetobj>p {
    text-align:left;
    font-weight:bold;
    font-size: calc(var(--Frac12-12) * var(--systemsfontsize));
    display:inline;
}
/*--Comment:
.snippetobj>p[contenteditable],.snippetsettosave>div>div>div>p>span[contenteditable] {
    background-color: #1aff1a;
}

.snippetobj>p[contenteditable]:hover:after,.snippetsettosave>div>div>div>p>span:hover:after {
   font-size:calc(var(--Frac10-12) * var(--systemsfontsize));
   content: "  <=Click to Edit";
}
.snippetobj>p:empty:before,.snippetsettosave>div>div>div>p>span:empty:before {
    content: "No text ....";
};*/

/*--Comment:Snippet behaviour menu;*/
.snippetobj>.snippetbehaviour {
    text-align:left;
    font-size: calc(var(--Frac11-12) * var(--systemsfontsize));
    white-space: nowrap;
}
/*--Comment:Snippet container;*/
.snippetobj>.snippetset {
    padding: 1px;
    border: 1px solid black;
    cursor: grab;
    background-color: white;
    width: fit-content;
    margin: auto;
    padding: 5px;
    /* padding-left: 20px; */
    /* padding-top: 10px; */
    /* overflow-y: auto; */
    /*max-width: 300px;*/
    max-height: 120px;
    /* display: table-cell; */
    margin-left: 10px;
    /* padding: 15px; */
    font-size:90%;

}

.snippetobj>.snippetset.small {
    font-size:80%;
    max-width: 150px;
    max-height: 80px;
}
.snippetobj>.snippetset.small>* {
    /*font-size:80%;*/
    width: 100%;
    height: auto;
}
.snippetobj>.snippetset:active:hover {
    cursor: grabbing;
}
/*--Comment: prevent any snipet position information messing up snippet menu display ;*/
/*--Comment:.snippetobj>.snippetset>*,.snippetobj>.snippetset>*>*,.snippetobj>.snippetset>*>*>* {;*/
.snippetobj>.snippetset>:not(canvas):not(m_){
   left: unset !important;
   top: unset !important;
   right: unset !important;
   bottom: unset !important;
   /* position: unset !important;*/
   height: unset !important;
   /* width: 100% !important; */
   margin: 1px !important;
   min-width: 80px;
   min-height: 20px;
   /* text-align: center; */
   background-color: aquamarine;
   display: inline-block;
   transform:unset;
   /* margin: 5px; */
   padding: 3px;
   font-size:100%;
   /* height: 100px; */
}
.snippetobj>.snippetset>*:not(m_)>*{
    background-color: #f0ffe0;
    transform:unset;
    font-size:100%;
    /* margin: auto !important; */
}
.snippetobj>.snippetset>*:not(m_)>*>*,.snippetobj>.snippetset>*:not(m_)>*>*>*,.snippetobj>.snippetset>*:not(m_)>*>*>*>*,.snippetobj>.snippetset>*:not(m_)>*>*>*>*>*{
    transform:unset;
    font-size:100%;
}
/*--Comment:manage the snippets multi level grouping dispaly layouts;*/
.snippetcontainer>.f_toggleset,
 .snippetcontainer>.f_toggleset>.f_tgroup>.f_toggleset,
  .snippetcontainer>.f_toggleset>.f_tgroup>.f_toggleset>.f_tgroup>.f_toggleset{
      background-color: rgba(0,0,255,0.2);
      /* margin-bottom: 10px;*/
      border: solid black 1px;
      border-radius: 7px;
      margin-left: 10px;
      margin-top: 5px;
      margin-bottom: 8px;
      padding: 2px;
      display: block;
}

.button.f_createsnippetgroup {
    margin-left: 100px;
    background-color: palegreen;
}
#snippetcontainer>div>div>p {
    position: relative;
}
#snippetcontainer>div>div>p>button {
    Position:absolute;
    right:20px;
    top:-4px;
    
}


/* droplist management in JS generated drop lists*/
 
.valuedroplist {
   position:relative;
   text-align: left;
}
.valuedroplist>div {
   display:inline-block;
   text-align: left;
   padding-left:2px;
}
.valuedroplist>div>div {
   display:block;
   min-width: 90px;
    min-height: 18px;
    
}
.valuedroplist>div:empty{ /*if no inline title, do not take up space*/
display:none;
width:0;
}
.valueelement, .valuedroplist>div:first-child {
   border: 1px solid silver;
   cursor:pointer;
    margin-top: 1px;
    padding-left: 3px;
    padding-right: 3px;
}
.valueelement {
     background: #68f7fa;  
}
.valuedroplist>div:first-child {
   border:unset;
}
.valueslist, .cellselect {
    display: block;
    position: relative;
    z-index: 100;
    height: 0;
    width: 0;
    overflow-x:visible;
}
.cellselect>div,.valueslist>div {
   background: #aaaaaa;
   border: 1px solid black;
   padding: 3px;
   margin:0;
   /*comment:"must be zero otherwise mouse out happens when heading for the done button"*/
   width: 210px;
   position: relative;
}
.cellselect>div>bg_ {
    width: 100%;
}
.cellselect>p {
  position: relative;
  width: 210px;
  background: #82f1ff;
  border: 1px solid grey;
  min-height: 15px;
}
.cellselect>div>bg_>x_ {
    float: right;
}


/* Date picker panel */
.dateselectcontainer {
    position: relative;
    width: 0;
    height: 0;
    z-index: 600;
    display: block;
    white-space: normal;
    /* right: -13px; */
    margin: auto;
}
.dateselectpanel {
    font-size: var(--editmenufontsize);
    background-color: silver;
    border: 1px solid grey;
    /* max-width: inherit; */
    /* width: inherit; */
    /* margin: auto; */
    text-align: left;
    margin-top:0;
    position: relative;
    z-index: 3400;
    /* margin-left: -94px; */
    /* margin-right: -11px; */
    line-height: 1.95;
    width: 160px;
    /* height: 0; */
    font-family: "Arial Narrow";
    right: 98px;
    /* left: -39px; */
    overflow: visible;
}
.dateselectactions {
    /* display: table; */
    margin-bottom: 5px;
    margin-left: 1px;
    text-align: center;
    position: relative;
    /*width: 231px;*/
}
.daterowresult {
   font-family: "Arial Narrow";
    font-size: calc(var(--Frac13-12) * var(--systemsfontsize));
}
.selectdatevals {
    margin-top: 4px;
    text-align: left;
    width: 100%;
    display: table;
    border: solid grey 1px;
    padding: 3px;
    margin: 1px;
    white-space: normal;
    word-wrap: break-word;
    -webkit-line-break: after-white-space;
    position: relative;
}
.selectdatevals>div:first-child {
    display: inline-block;
    width: 37px;
    /* margin-right: 4px; */
    background-color: transparent;
    border: 2px solid transparent;
    /* border-radius: 5px; */
    /* margin: auto; */
    /* padding-right: 5px; */
    /* padding-left: 5px; */
    text-align: left;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    /* -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95); */
    /* box-shadow: 1px 2px 4px rgba(0, 0, 0, .95); */
    margin-top: 3px;
}

.dateselectcontainer>.dateselectpanel>.selectdatevals>div:nth-child(2) {
    display: inline-block;
    /*position: absolute;*/
    /*right: 10px;*/
    margin-left: -10px;
    margin-top: 3px;
    }
.dateselectcontainer>.dateselectpanel>.selectdatevals>div:nth-child(3) {
      display: block;
    }

.dateselectactions>div, .selectdatevals>div:not(:first-child) {
    display: inline-block;
    margin-right: 4px;
    background-color: #E6EDE6;
    border: 2px solid LightSteelblue;
    border-radius: 5px;
    padding-right: 3px;
    padding-left: 3px;
    text-align: left;
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    margin-top: 1px;
    padding-top: 0;
    line-height: 1.65;
}
.selectdatevals>div { /*.selectorinput*/
    display: table-cell;
    background: aliceblue;
    /* line-height: 100%; */
    /* margin-top: 2px; */
    margin-right: 2px;
    /* width: 50%; */
    /* min-width: 50%; */
    white-space: normal;
    word-break: break-word;
}
.selectdatevals>div>input {
    line-height: 1;
    padding: 0;
    margin: 0;
    border: 0;
    height: 20px;
    width: 140px;
}
.quickset {
    text-align: center;
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    z-index: 250;
    /* background: transparent !important; */
    /* border: transparent !important; */
}
.quickset>div {
    min-width: 100px;
    height: auto;
    background: aliceblue;
    margin-left: -54px;
    margin-top: 5px;
}
.quickset>div>div {
    background-color: #cdd2cd;
    border: 2px solid LightSteelblue;
    border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    height: 22px;
    padding-top: 3px;
    line-height: 1;
}
.quicksetonedate {
   text-align: center;
   display: inline-block;
   position: absolute;
   width: 0;
   height: 0;
   z-index: 220;
}
.quicksetonedate>div {
    min-width: 100px;
    height: auto;
    background: aliceblue;
    margin-left: 19px;
    margin-top: -19px;
    overflow-x: visible;
    position: fixed;
}
.quicksetonedate>div>div {
    background-color: #cdd2cd;
    border: 2px solid LightSteelblue;
    border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    min-height: 23px;
    padding-top: 3px;
    line-height: 1.5;
}
.quicksetonedate>div>div>input {
    width: 45px;
}
.f_firstdayval, .f_nextlast, .f_periodval, .f_datenoffset, .f_dateoffsetperiod   { 
   min-height: 20px;
    border: silver solid 1px;
    background: aliceblue;
}
.dateselectgrp>div, .datebutton {
    width: 90%;
    text-align: center;
    margin: auto;
    background-color: #E6EDE6;
    border: 2px solid LightSteelblue;
    border-radius: 5px;
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .95);
    /* margin-top: 1px; */
    padding-top: 0;
    line-height: 1.4;
}


.criticalalarm, .alarmpriority1{ 
   font-weight:900  ;
   font-style:normal;
   background:rgb(255,0,0);
}
.highalarm, .alarmpriority2{ 
   font-weight:700;
   font-style:normal;
   background:rgb(255,0,0);
}
.mediumalarm, .alarmpriority3{ 
   font-weight:550;
   font-style:normal;
   background:rgb(255,0,0);
}
.lowalarm, .alarmpriority4{ 
   font-weight:400;
   font-style:normal;
   background:rgb(255,0,0);
}
.informationalarm, .alarmpriority5{ 
   font-weight:350;
   font-style:normal;
   font-style:italic;
   background:rgb(255,0,0);
}
.noalarm, .alarmnone{ 
   font-weight:normal;
   font-style:normal;
   background:rgb(255,0,0);
}

.valueslist>p, .cellselect>div>p {
   background: #dedede;
   border: 1px solid grey;
   padding-left: 2px;
   padding-right: 2px;
   min-width: 10px;
   min-height: 18px;
}
.valueslist>p:hover,.cellselect>div>p:hover ,.cellselect>div>div>p:hover ,.cellselect>div>div>div>p:hover  {
   background: rgba(51,255,153,0.9);
}

.cellselect>div>.f_multiselectDone{
background: rgba(51,255,153,0.9);
    font-weight: 800;
    /* min-height: 26px; */
    /* vertical-align: middle; */
    padding: 4px;
    border: 3px solid darkgreen;
    border-radius: 7px;
}


.hidescrollbar ::-webkit-scrollbar { width: 0 !important; }
.hidescrollbar  { 
   overflow: -moz-scrollbars-none; 
   -ms-overflow-style: none; 
}

.builderpanel {
 /* area right side of floating menu for builder panel drag and drop elements */
 position: absolute;
 right: calc( -1.4 * var(--editmenunameswidth) + 4px);
 background-color: var(--floatingpanelcolor);
 padding:0;
 border: 2px solid LightSteelblue;
 border-radius: 8px;
 top:-2px;
 width: calc(1.4* var(--editmenunameswidth));
 max-height: calc(100vh - var(--top));
 overflow-y: auto;
 overflow-x: hidden;
 font-size: var(--editmenufontsize);
 display: initial;
}
.builderpaneltitlegroup {
   text-align:left;
   margin-left:10px;
}
.builderpaneltitlegroup>p {
   background-color: lightgray;
   font-size: var(--editmenufontsize);
   vertical-align:middle;
   display:block;
   width: var(--editmenunameswidth);
}

.builderpaneltitlegroup>box {
   background-color: lightgray;
   font-size: var(--editmenufontsize);
   vertical-align:middle;
   display:block;
   width: var(--editmenunameswidth);
}
.builderpanel>div{
   /*padding:5px;*/
   font-size: var(--editmenufontsize);
   /* line-height: normal; */
   line-height: 100%;
   /* display: block; */
   /* min-height: 20px; */
}
.builderpanel>div>.tempspinner{
  min-height: 50px;
  left: -30px;
  top:0;
}
.f_vars>div>div, .f_vars>div>div>div, .f_vars>div>div>div>div, .f_vars>div>div>div>div>div, .f_vars>div>div>div>div>div>div, .f_vars>div>div>div>div>div>div>div,.f_vars>div>div>div>div>div>div>div>div,.f_vars>div>div>div>div>div>div>div>div>div,.f_vars>div>div>div>div>div>div>div>div>div>div {
    margin-left: 2px;

}
#toolfillerbuilder{
   width:10px;
   top:0;
   right: 2px;
   display:block;
   bottom:0;
   z-index:300;
   background-color: var(--floatingpanelcolor);
   position:absolute;
}

.dragndrop{  /* drag and drop items in menus */
   draggable: true;
}

div:not(.multirowselect)>box.dragndropselect:not(.multiboxselect), p>box.dragndropselect{ 
 /*comment:" p>box is menu items "*/
 /*background-color: var(--builderdetailcolor);*/
}
box.dragndropdest, .dragndropdest>box, .dragndropdest>div>box , .dragndropdest>div>div>box  {
    background-color: dddddd;
    outline-color: #999999;
    outline-style: dashed;
    outline-offset: -6px;
    outline-width: 6px;
    height: 40px;
    text-align: center;
    padding-top: 5px;
    font-size: calc(var(--Frac15-12) * var(--systemsfontsize));
    width: 150px;
}

.docsection:not(.popupmenu)>.c_virtrowspacer{ /* a vitaul row kept at the start of every section - Make Hidden for print and When dragndropdest for virtualrowAbove is present MUST match virtual rowAbove size*/
    height: var(--virtualrowspacerheight);
    padding-top: 5px;
    font-size: calc(var(--Frac15-12) * var(--systemsfontsize));
}

div>div>.scopeLvl1{padding-left:5px; background-color:#EEddcC; font-size:100%;}
div>div>.scopeLvl2{padding-left:10px; background-color:#EDD3BD; font-size:97.5%;}
div>div>.scopeLvl3{padding-left:15px; background-color:#ECC9AE; font-size:95%;}
div>div>.scopeLvl4{padding-left:20px; background-color:#EBBF9F; font-size:92.5%;}
div>div>.scopeLvl5{padding-left:25px; background-color:#EAB590; font-size:90%;}
div>div>.scopeLvl6{padding-left:30px; background-color:#E9AB81; font-size:87.5%;}
div>div>.scopeLvl7{padding-left:35px; background-color:#E8A172; font-size:85%;}
div>div>.scopeLvl8{padding-left:40px; background-color:#E79763; font-size:82.5%;}
div>div>.scopeLvl9{padding-left:45px; background-color:#E68D54; font-size:80%;}
div>div>.scopeLvl10{padding-left:50px; background-color:#E58345; font-size:77.5%;}
div>div>.scopeLvl11{padding-left:55px; background-color:#E47936; font-size:75%;}
div>div>.scopeLvl12{padding-left:60px; background-color:#E36F27; font-size:72.5%;}
div>div>.scopeLvl13{padding-left:65px; background-color:#E26518; font-size:70%;}
div>div>.scopeLvl14{padding-left:70px; background-color:#E15B09; font-size:67.5%;}
div>div>.scopeLvl15{padding-left:75px; background-color:#E05100; font-size:65%;}
div>div>.scopeLvl16{padding-left:80px; background-color:#DF4700; font-size:62.5%;}
div>div>.scopeLvl17{padding-left:85px; background-color:#DE3D00; font-size:60%;}
div>div>.scopeLvl18{padding-left:90px; background-color:#DD3300; font-size:57.5%;}
div>div>.scopeLvl19{padding-left:95px; background-color:#DC2900; font-size:55%;}
div>div>.scopeLvl20{padding-left:100px; background-color:#DB1F00; font-size:52.5%;}


.classindicate::after{
   content: " *";
   color: red;
   font-size: calc(var(--Frac20-12) * var(--systemsfontsize));
   vertical-align: bottom;
   display: inline;
   bottom: -0.2em;
   position: relative;
}        
#scopetoapplydoceditmenu{
   background-color:transparent;
}

p>box{  /* when showing box in the menu , put a grey outline */
       outline: 1px solid grey;
}
#boxlayoutname{
   background-color:#DDDDDD;
}
#boxlayoutname>.editmenuvalue { 
   background-color:silver;
   font-weight:bold;
   font-style: italic;
}
#boxlayoutname>.editmenuvalue>box { 
   background-color:white;
   font-size: var(--editmenufontSmall);
   font-style: normal;
   width: 150px;
   max-height:60px;
}
#boxlayoutname>.editmenuvalue>box>d_ { 
   font-weight:normal;
}
#boxlayoutname>.editmenuvalue>box>d_>o_{ 
   font-weight:normal;
   width: 110px;
   max-height: 60px;
} 
.noedit{
   -webkit-user-select: none; /* Safari */        
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard */
}

.loginmessageclass>.tempspinner{
  /* top:-25px; */
  /* left: 1px; */
}
/*div:empty => hide ???*/
.hideme:not(.lockon),.todelete:not(.showdeleted):not(.showchangedrecord),.showasdisabled>div>.leftsidebar,.showasdisabled>div>.floatingcontrolpanel,.showasdisabled>div>.rightsidebar,var:not(.DocVarValue),src_,sw_t,d_t,d_o,t_o,et_,ed_,e_,dl_,dl_c,dl_t,dl_kf,dl_lf,fn_,t_:empty,d_:empty {
   display:none !important;
   visibility: hidden !important;
   overflow: hidden;
   height:0 !important;
   width:0 !important;
   max-height:0;
   max-width:0;
   line-height:0;
   margin:0 !important;
   padding:0 !important;
   border:0 !important;
   letter-spacing: normal;
   word-spacing: normal;
   text-transform: none;
   text-indent:0;
   text-shadow: none;
}

.showdeleted,.showdeletedbuttonon ,n_.showdeleted>nc_,c_.showdeleted>cc_{
   background:#ff4e2d !important;
}


.grid19x24cm {
   background-image: url(grid19x24cm.png);
   background-size: 19cm 24cm;
}

m_ {   /* box row comment or note  panel container*/
    position: absolute;
    height: 0;
    width: 0;
    font-size: calc(var(--Frac16-12) * var(--systemsfontsize));
    color:black;
    font-weight:normal;
    z-index:2800;
    left:0;
    max-height: 0;
    max-width: 0;
    line-height:100%;
    top: 0;
    text-align: initial;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    
    text-align-last: auto;}
m_>m_sub_{
    --Comment: All In One line;
    display: inline-block;
    margin: auto;
    max-height:0;
    /* background: var(--HoverMenuColor); */
    width: calc( 3 * var(--boxmenuwidth) );
}
.functioncellmarker>m_{
  right: 0;
  /* position: relative; */
  /* width: 45px; */
  font-size: calc(var(--Frac12-12) * var(--systemsfontsize));
  left: unset;
  top: -1px;
  opacity: 1;
}
.functioncellmarker>m_,.functioncellmarker>m_>m_sub_{
 width:auto;
 max-width:unset;
 padding-left: 3px;
}
.functioncellmarker>div:not(.f_insertfunctionref){
 padding-right: 32px;
 min-width: 50px;
 min-height: 12px;
 max-width: 400px;
/* right: 40px; */}
.functioncellmarker>div.f_insertfunctionref{
  /* right: -240px; */
  /* top: -90px; */
  position: absolute;
  display: inline-block;
  /* width: 120%; */
  width: 0;
  right: 50px;
  top: -80px;
}
.functioncellmarker>m_>m_sub_>ay_{
  background:#15ff00;
}
.functioncellmarker>m_>m_sub_>an_{
  background:red;
}
.functioncellmarker>m_>m_sub_>ay_,.functioncellmarker>m_>m_sub_>an_{
  /* padding-left: 0; */
  /* margin-left: 0; */
  opacity:1;
  /* padding-right: 0; */
}
.functioncellmarker>div>.cellselect {
    height: auto;
    width: auto;
    max-height:400px;
    overflow-y: auto;
    overflow-x: visible;
    display: inline-block;
    padding-left: 50px;
      -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.functioncellmarker>div>.formulatitle{
      /* height: 19px; */
      width: 200px;
      display: block;
      /* padding-left: 50px; */
      background-color: #dedede;
      /* padding-left: 50px; */
      font-weight:bold;
      margin-left: 50px;
      border: black 2px solid;
      font-size: calc(var(--Frac16-12) * var(--systemsfontsize));
      line-height: 100%;
}

.functioncellmarker>div>.cellselect>div>bg_ {
  display:none;
}

.f_insertfunctionref,.functionrefclickforinsert{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

fp_:not(.noformulaspace){
  /* comment: "display parts of a formula in a formula box" */
  padding-left:2px;
  padding-right:2px;
  
}
.noformulaspace{
  
}
.formulaerrorclass{
  font-weight:bold;
  background:orange;
}
.dataoptionsmenuelements{
  display:table;
}
.dataoptionsmenuelements>div{
  display:table-row;
}
.dataoptionsmenuelements>div>label,.dataoptionsmenuelements>div>span{
  border: 2px solid silver;
  display:table-cell;
  white-space: nowrap;
}
.dataoptionsmenuelements>div>label{
  /* font-weight:bold; */
}

.dataoptionsmenuelements>div>span{
  background:white;
}

.colorpatch{
  margin-left:5px;
  width:25px;
  height:15px;
  display:inline-block;
}
tr>m_>m_sub_{
    width: 1px;
}
box>m_>m_sub_,nc_>m_>m_sub_,cc_>m_>m_sub_{
    max-width: var(--boxmenuwidth);
    width: var(--boxmenuwidth);
    display: inline-block;
    margin: auto;
    max-height:0;
    /* background: var(--HoverMenuColor); */
}
/*
box>m_>m_sub_>.op:nth-child(1n+5){ 
    top:calc(-2 * var(--menuiconsize));
}
box>m_>m_sub_>.op:nth-child(1n+9){ 
    top:calc(-4 * var(--menuiconsize));
}
box>m_>m_sub_>.op:nth-child(1n+13){ 
    top:calc(-6 * var(--menuiconsize));
}
*/
nc_>m_>m_sub_>.op:nth-child(1n+6){ /*put items second row above not below */
    top:calc(-2 * var(--menuiconsize));
}
nc_>m_>m_sub_>.op:nth-child(1n+11){ /*put items Third row above not below */
    top:calc(-4 * var(--menuiconsize));
}
nc_>m_>m_sub_>.op:nth-child(1n+16){ /*put items fourth row above not below */
    top:calc(-6 * var(--menuiconsize));
}
cc_>m_>m_sub_>.op:nth-child(1n+6){ /*put items second row above not below */
    top:calc(-2 * var(--menuiconsize));
}
cc_>m_>m_sub_>.op:nth-child(1n+11){ /*put items Third row above not below */
    top:calc(-4 * var(--menuiconsize));
}
cc_>m_>m_sub_>.op:nth-child(1n+16){ /*put items fourth row above not below */
    top:calc(-6 * var(--menuiconsize));
}
box>m_>m_sub_>.op:nth-child(1n+6){ /*put items second row above not below */
    top:calc(-2 * var(--menuiconsize));
}
box>m_>m_sub_>.op:nth-child(1n+11){ /*put items Third row above not below */
    top:calc(-4 * var(--menuiconsize));
}
box>m_>m_sub_>:not(span).op:nth-child(1n+16){ /*put items fourth row above not below */
    top:calc(-6 * var(--menuiconsize));
}
/* note these two are NOT square boxes:: leftsizeop, bottomsizeop,*/
m_>m_sub_>:not(span).op:not(leftsizeop):not(bottomsizeop){
   width: var(--menuiconsize);
   height: var(--menuiconsize);
   border: 1px solid silver;
   white-space:nowrap;
   /* background: var(--HoverMenuColor); */
   opacity:0.8;
   text-align: center;
   display: inline-block;
   position:relative;
}
m_>m_sub_>duplicaterowop25.op:not(leftsizeop):not(bottomsizeop){
  width: calc( 2 * var(--menuiconsize) );
}
m_>m_sub_>duplicaterowop100.op:not(leftsizeop):not(bottomsizeop){
  width: calc( 2 * var(--menuiconsize) );
}
m_>m_sub_>deleterowsbelowop.op:not(leftsizeop):not(bottomsizeop){
  width: calc( 2 * var(--menuiconsize) );
}

m_>m_sub_>.op:not(leftsizeop):not(bottomsizeop):before{
   width: var(--menuiconsize);
   height: var(--menuiconsize);

}
/*leftsizeop>div:hover, bottomsizeop>div:hover ??*/
m_>m_sub_>.op:hover { 
   opacity:1; 
   font-weight:bold;
   /*border: 2px solid black;*/
   }

box>m_ {
   top: calc(var(--menuiconsize) * -1);
   --HoverMenuColor:cyan;
   --HoverMenuColorV2:#17ffc2;
   display: block;
   /* background: var(--HoverMenuColor); */
}
nc_>m_ {
   top:-15px;
   --HoverMenuColor:cyan;
   display: block;
}
cc_>m_ {
   top:-15px;
   --HoverMenuColor:cyan;
}

n_>m_,c_>m_ {
   position:relative;
   --HoverMenuColor:cyan;
}

.svgtag>div {
   position:relative;
   width: 60px;
   height: 20px;
 }
.svgtag>div>m_{
   top: 14px;
   left: 20px;
   background: silver;
   white-space: normal;
}
.svgtag>div>svg{ /* note div and svg need size set maually*/
   width: 60px;
    height: 20px;
    }
.svgtag>div>m_>m_sub_>moveop {
   border: unset;
   background: unset;
   top: -12px;
   position: relative;
   width: 25px;
   height: 25px;
   min-width: 45px;
}

box:not(.boxobjectsmenu)>m_>m_sub_>:not(span).op:not(leftsizeop):not(bottomsizeop),nc_>m_>m_sub_>.op:not(leftsizeop):not(bottomsizeop),cc_>m_>m_sub_>.op:not(leftsizeop):not(bottomsizeop) { /*horizontal display of buttons*/
   display: inline-block;
   min-width: var(--menuiconsize);
   /* border-collapse: separate; */
   /*border-spacing: 2px;*/
   /* margin-left: 3px; */
   /* border-left: 3px solid black; */
   /* position: relative; */
   /* left: 4px; */
   /* top:0; */
}

tr>m_, :not(.row):not(box):not(.snippetset)>m_.fortablerow{
    /*--comment: fortablerow is Work around for table row tr object not supporting position=relative;*/
    left:-17px;
    top: -2px;
    --HoverMenuColor:#f27efd;
    display: inline-block;
    width:0;
}
.row>m_ {
   left:calc(-1 * var(--rowmenuwidth) + 1px);
   display:inline-block;
   width:0;
   --HoverMenuColor:#52d7ff;
}
.row>m_>m_sub_{
    max-width: var(--rowmenuwidth);
    width:  var(--rowmenuwidth);
    display: inline-block;
    direction:rtl;
}
m_>m_sub_>.op{
  direction:ltr;
  position:relative;
}
m_>m_sub_>.op::before{
  direction:ltr;
  position:relative;
}
.snippetset>.row>m_ {
   left: -12px;
   display:inline-block;
   width:0;
   --HoverMenuColor:cyan;
   /* top: -2px; */
}
:not(.row):not(box):not(.snippetset):not(tr):not(table):not(thead):not(tfoot):not(tbody):not(div):not(o_)>m_:not(.fortablerow) {
   left: 4px;
   top: -17px;
   --HoverMenuColor:#cb98ff;
   display: block;
   /* width: 200px; */
   /* z-index: 5000; */
}
o_>m_{
    left: 4px;
   top: -14px;
   --HoverMenuColor:#cb98ff;
   display: block;
}
o_>div>m_{
   --comment: beware svg tag in o_ is also div;
   --HoverMenuColor:#cb98ff;
   display: block;
}
tbody>m_ {
    left: 40px;
    top: -17px;
    --HoverMenuColor:#ed34ff;
    display: block;
}
thead>m_ {
    left: 62px;
    top: -17px;
    --HoverMenuColor:#f4aafb;
    display: block;
}
tfoot>m_ {
    left: 62px;
    top: -17px;
    --HoverMenuColor:#f4aafb;
    display: block;
}
table>m_ {
    left: 18px;
    top: -17px;
    --HoverMenuColor:#e800ff;
    display: block;
}
:not(.row):not(box):not(.snippetset)>m_:not(.fortablerow)>.op {
display: table-cell;
    min-width: var(--menuiconsize);
    width:var(--menuiconsize);
}
.row>m_>m_sub_>.op:not(leftsizeop):not(bottomsizeop),tr>m_,:not(.row):not(box):not(.snippetset)>m_.fortablerow  {  /*vertical display of buttons*/
   /* display:block; */
}

.snippetset>m_{
    top: -2px;
    left:0;
    font-size: calc(var(--Frac19-12) * var(--systemsfontsize));
    /* overflow: hidden; */
    z-index: 3500;
    position: absolute;
    max-height: 16px;
    /* min-height: 20px; */
    --HoverMenuColor:cyan;
}

.snippetset>m_>m_sub_>.op:not(leftsizeop):not(bottomsizeop)  { /*horizontal display of buttons*/
   display: table-cell;
   min-width: var(--menuiconsize);
   /* max-height: 10px; */
   /* overflow: hidden; */
}

/*leftsizeop::before { 
    position: absolute;
    font-size: calc(var(--Frac17-12) * var(--systemsfontsize));
    font-weight: bold;
    height:20px;
    width:18px;
   }
bottomsizeop::before{ 
    position: absolute;
    font-size: calc(var(--Frac22-12) * var(--systemsfontsize));
    font-weight: bold;
   }*/
   
.active {  
background-color:orange;
}
m_>m_sub_>.op {
  background: var(--HoverMenuColor);
}
m_>m_sub_>nullop.op {
  top: 4px;
}

 m_.cellnamesdisplay {
  top:-9px;
  left:15px;
  font-size: calc(var(--Frac14-12) * var(--systemsfontsize));

}  
m_.cellnamesdisplay>m_sub_{
  width:auto;
  max-width:unset;
  display: table;
}
m_.cellnamesdisplay>m_sub_>div{
  position:relative;
  display: table-row;
}
m_.cellnamesdisplay>m_sub_>div>span {
    background: var(--HoverMenuColor);
}
m_.cellnamesdisplay>m_sub_>div>div>div {
    background: var(--HoverMenuColorV2);
}
m_.cellnamesdisplay>m_sub_>div>span,m_.cellnamesdisplay>m_sub_>div>div>div {
  border:silver 2px solid;
  /* border-radius:2px; */
  /* display: table-cell; */
  height:auto;
  min-height: var(--systemsfontsize);
  width:auto;
  max-width:unset;
}

m_.cellnamesdisplay>m_sub_>div>span{
  display: table-cell;
}
m_.cellnamesdisplay>m_sub_>div>div {
  display:inline-block;
  height:0;
  position:absolute;
  margin-left:-2px;
  
}

box>m_>m_sub_>dragop.op {
   background: #66ff66;
   }
div>m_>m_sub_>dragop.op {
  background: #54c854;
  top: 1px;
}
m_>m_sub_>dragop::before {
  font-size: calc(var(--Frac19-12) * var(--systemsfontsize));
  font-family: Helvetica, sans-serif;
  position: relative;
  letter-spacing: -14px;
  content: '\2194\2195';
  left: -9px;
  top: -1px;
}

div>m_>m_sub_>dragop::before {
    /* left: -5px; */
}

dragop:hover::before{ 
   background-color: rgba(170,255,26,1) !important; 
   cursor: grab;
}
dragop:active:hover::before
{ 
   cursor: grabbing;
}
moveop::before {
   content: '\2756';
   font-size: calc(var(--Frac24-12) * var(--systemsfontsize));
   font-family: Helvetica, sans-serif;
   position: relative;
   /* letter-spacing: -14px; */
   /* content: '\2194\2195'; */
   left: -9px;
   top: 0px;
   width: 45px;
   height: 25px;
   min-width: 45px;
}
moveop:hover::before {
   cursor: move;
}
:not(.row)>m_>m_sub_>delop::before {
   content: '\2716';
   --HoverMenuColor: cyan;
   background: red;
   padding-right: 2px;
   padding-left: 2px;
   font-size: 95%;
}
.row>m_>m_sub_>delop::before {
    content: '\2716';
    background: red;
    padding-right: 2px;
    padding-left: 2px;
    font-size: 95%;
    /* top: 2px; */
}

.op{
  font-style: normal;
}
.op:hover::before {
    --comment: Default pointer for ops;
    --comment: Only specify where needed below for alternate pointers;
   cursor: pointer;
}


delop:hover::before {
    cursor: url(Delete.png) 12 12, auto;
}
resizeop::before {
   content: '\21FC'  ;
}

box.userresize>m_>m_sub_>resizeop {
   top:20px;
   background:orange;
   position: relative;
}
sourceop::before {
    letter-spacing: 1px;
    content: '\2045\2046';
  background-color:gold;
    padding-left: 3px;
    padding-right: 1px;
  position:relative;
  font-size: 95%;
  top:-1px;
}
sourceop:hover::before {
   cursor: cell;
}
hideshowop::before {
    background-color:silver;
   content: '\210d' ;
}
hideshowop:hover::before {
   cursor: cell;
}
delcolumnop::before {
   background-color:silver;
   content: '\2102' ;
   color:red;
}
delcolumnop:hover::before {
   cursor: cell;
}
selcolumnop::before {
   background-color:silver;
   content: '\290B' ;
   color:blue ;
}
selcolumnop:hover::before {
   cursor: cell;
}
duplicateboxop {
   transform: rotate(-90deg);
}
duplicateboxop::before {
   content: '\21A6' ;
   content: '\21A7\21A7' ;
}
duplicateboxop:hover::before {
   cursor: copy;
}
duplicaterowop::before {
   content: '\21A7\21A7' ;
}
duplicaterowop:hover::before {
   cursor: copy;
}
duplicaterowop25::before {
   content: '\21A7 \21A7 25';
   background:var(--HoverMenuColor);
   font-size: 85%;
}
duplicaterowop25:hover::before {
   cursor: copy;
}
duplicaterowop100::before {
   content: '\21A7 \21A7 100';
   background:var(--HoverMenuColor);
   letter-spacing: -1px;
   font-size: 85%;
}
duplicaterowop100:hover::before {
   cursor: copy;
}
deleterowsbelowop::before {
   content: '\21A7\21A7\2716';
   background:red;
   padding-left: 2px;
   padding-right: 2px;
   /* font-size: 90%; */
}
deleterowsbelowop:hover::before {
   cursor: copy;
}

sizeautoop::before {
   content: '\21f1';
}
gridop::before {
   content: '\229E';
}
snipop::before {
   content: '\2702'  ;
}
snipop:hover::before {
   cursor: copy;
}
newboxop::before {
  letter-spacing: -16px;
  content: '\224a';
  content: '\2680 \21c9';
  content: '\2610 \21c9';
  content: '\22a1 \21c9';
  content: '\22a1 \22b3';
  /* content: '\2680 \22b3'; */
  /* content: '\0220 \0003'; */
  /* content: '\0220 \21a3'; */
  /* content: '\2751 \21c9'; */
  position: relative;
  left: -8px;
}
newrowop::before {
   content: '\b6' ;
}
newsecop::before {
   content: '\a7' ;
}
newpageop::before {
   content: '\2119';
   content: '\2761' ;
}
tglpagebrkop:before{
   content: '\21df';
}
swapprevop::before {
   content: '\219e';
}
swapnextop::before {
   content: '\21a0';
}
newbelowop::before {
   content: '\b6' ;
}
changeolulop::before {
   content: '\2299' ;
}
swapcolprevop::before {
   content: '\27f8';
   content: '\27fd';
}
swapcolnextop::before {
   content: '\27f9';
   content: '\27fe';
}
insertcolumnop::before{
    content: '\21e5' ;
    content: '\21e8' ;
}
insertcolumnop:hover::before {
   cursor: e-resize;
}
duplicateobjop::before{
    content: '\21A6' ;
 }
duplicateobjop:hover::before {
   cursor: copy;
}
classesop::before{
    content: '\2696' ;
  background-color:gold;
    padding-left: 1px;
    padding-right: 1px;
 }
 
functionsop::before {
   background-color:gold;
   content: '\0192x';
   /* width:var(--menuiconsize); */
   padding-left: 3px;
   padding-right: 3px;
   /* margin-top: 0px; */
   position:relative;
   font-size: 85%;
   top:-1px;
/* font-style: italic; */}
undoop::before {
   content: '\238C' ;
}
pasteop::before {
   content: '\2762\21B3';
   content: '\2762';
   letter-spacing: -1px;
}
clipboardop::before{
  content: '\1f4cb';
}

nullop::before{
  content:' ';
  background:transparent;
/* top: -1px; *//* position: absolute; */}
leftsizeop {
position: absolute;
    width: 0;
    height: 100%;
    top: 2px;
    z-index:2800; 
    right: 1px;
}

:not(box)>leftsizeop {
  height: 80%;
  right: 3px;
  }
leftsizeop:hover {
   cursor:e-resize;
}
leftsizeop>div {
   height: 50%;
   min-height: 15px;
   max-height: 85%;
   width: 3px;
   position: relative;
   top: 15%;
   cursor: e-resize;
   left:0;
   background: white;
   opacity: 0.75;
   border-right: 3px double black;
}
bottomsizeop {
   position: absolute;
   width: 100%;
   height: 3px;
   text-align: center;
   display: block;
   bottom: -1px;
   left: 2px;
   z-index:2800;
}
:not(box)>bottomsizeop {
   width: 80%;
   bottom: 3px;
}

bottomsizeop>div {
    width: 50%;
    min-width: 25px;
    left: 25%;
    height: 3px;
    position: relative;
    top: 1px;
    cursor: n-resize;
    background: white;
    opacity: 0.75;
    border-top: black double;
    text-align: center;
    /* margin: auto; */
}
bottomsizeop:hover {
   cursor: n-resize;
}
configitemop::before{
    content: '\2699';
    left: -1px;
    position: relative;
    top: -1px;
 }
configitemop {
    background: var(--EditDataFieldColor);
    font-size: calc(var(--Frac16-12) * var(--systemsfontsize));
    font-weight: bold;
    vertical-align: middle;
    position: relative;
    /* top: 4px; */
    margin: 0 auto;
    padding: 0;
    /* left: -20px; */
    border: 1px solid grey;
    /* white-space:nowrap; */
    text-align: center;
    display: table-cell;
    width: 18px;
    height: 20px;
}
.fieldeditorcontainer.f_grey-noedit>.fieldeditormenu>div>div>configitemop{
    background: grey;
}
/*leftsizeop>div:hover, bottomsizeop>div:hover ??*/
m_>m_sub_>.op:hover { 
   opacity:1; 
   font-weight:bold;
   /*border: 2px solid black;*/
   }
   
.csveditormenu>div>div {
    display: table-row;
    /* margin: auto; */
    /* min-height: 22px; */
    /* line-height: 125%; */
    height: 18px;
}
.fieldeditormenu>.fieldeditoractions>div>div{
   min-width: 60px;
   display: inline-block;
   margin-left: 3px;
   margin-bottom: 10px;
   line-height:120%;
   width: auto;
   /* left: 0; */
   /* height: 49px; */
   /* position: unset; */
   background: none;
   border: none;
}
.fieldeditorcontainer {
    background: var(--EditDataFieldColor);
    z-index: 1900;
    /* position: absolute; */
    /* height: 0; */
}
.fieldeditorcontainer.f_grey-noedit{
    background: grey;
}


.fieldeditormenu>div>div>div.f_done_disabled>div, .fieldeditormenu>div>div>div.f_cancel_disabled>div, .fieldeditormenu>div>div>div.f_docdatacontrols_disabled>div{
    background-color: darkgray;
    color: darkred;
    position:relative;
}
.f_done_disabled:hover:before,.f_cancel_disabled:hover:before{
    position:absolute;
    /*height:0;*/
    /*width:0;*/
    color:black;
    font-weight:bold;
    white-space:nowrap;
    overflow:visible;
    content: "Action Disabled => Close Sub Menu First";
    background-color:orange;
    top: 7px;
}
.fieldeditorcontainer.f_grey-noedit:before{
    position:absolute;
    /*height:0;*/
    /*width:0;*/
    color:black;
    font-weight:bold;
    white-space:nowrap;
    overflow:visible;
    content: "Actions Disabled =>Close Sub Menu First";
    background-color:orange;
    top: 6px;
    left: 130px;
}
.f_fieldvalue>.fieldeditorcontainer{
    position: absolute;
}

.fieldcommandcontainer>div>fmt{
    display: inline-block;
    width: 80px;
}
.fieldcommandcontainer>div>span {
    width: 218px;
}
.fieldparams>div>fmt {
    display: inline-block;
    width: 120px;
}
.csveditormenu>.csveditoractions>div>div {
   min-width: 60px;
   display: inline-block;
   margin-left: 3px;
   margin-bottom: 10px;
   line-height:120%;
   width: auto;
   /* left: 0; */
   /* height: 49px; */
   /* position: unset; */
   background: none;
   border: none;
}
.fieldeditoractions>div{
    /* line-height:120%; */
    /* padding:0; */
    /* padding-top:3px; */
    /* margin:0; */
    /* margin-top: 1px; */
}
.fieldeditoractions>div>p{
    font-weight:bold;
    font-size:calc(var(--Frac16-12) * var(--systemsfontsize));
    line-height:120%;
}
.fieldeditoractions>div>div>span,.fieldeditoractions>div>div>input {
    /* font-size:12px; */
    /* line-height:120%; */
    padding:0;
    /* padding-top:3px; */
    margin:0;
    /* margin-top: 2px; */
}
.fieldeditormenu>div>div>:nth-child(1) {
    width: 160px;
    min-width: 140px;
    display: table-cell;
    border: solid grey 1px;
    background: var(--EditDataFieldColor);
    font-weight: bold;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    /* margin: 0; */
}
.fieldeditorcontainer.f_grey-noedit>.fieldeditormenu>div>div>span{
    background: grey;
}

.csveditormenu>div>div>a,.csveditormenu>div>div>span {
    /* width: 101px; */
    /*min-width: 80px;*/
    display: table-cell;
    border: solid grey 1px;
    background: deepskyblue;
    font-weight: bold;
    padding-left: 2px;
    padding-right: 2px;
  text-align: center;
}
.fieldeditormenu>div>div>div,.fieldeditormenu>div>div>span {
    /* width: 101px; */
    min-width: 80px;
    display: table-cell;
    border: solid grey 1px;
    background: aliceblue;
    padding-left: 2px;
    padding-right: 2px;
}
.fieldeditormenu>div>div>div.f_grey-noedit {
    background: silver;
}
.csveditormenu>div:not(.csveditoractions)>div:not(.csvheader)>div {
    /* width: 101px; */
    min-width: 180px;
    display: table-cell;
    border: solid grey 1px;
    background: aliceblue;
    padding-left: 2px;
    padding-right: 2px;
    /* min-height: 22px; */
    /* line-height: 100%; */
    /* vertical-align: middle; */
}
.csvheader>div {
    /* width: 101px; */
    min-width: 180px;
    display: table-cell;
    border: solid grey 1px;
    background: transparent;
    font-weight:bold;
    padding-left: 2px;
    padding-right: 2px;
    /* min-height: 22px; */
    /* line-height: 100%; */
    /* vertical-align: middle; */
}
 /*************************************/
.floatingcontrolpanel {
   position:absolute;
   display: block;
   top:1px;
   left: 1px;
   background-color: var(--floatingpanelcolor);
   padding: 5px;
   border: 2px solid LightSteelblue;
   border-radius: 8px;
   z-index: 99;
   font-size: var(--editmenufontsize);
   /* --checkboxsize:var(--editmenufontsize); */
   vertical-align:middle;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.floatOutline{
   opacity: .99;
   z-index:98;    /*just behind flaoting panel*/
   padding-top:0;
   position: absolute;
}

.menuhandle {
   /* FONT-VARIANT: JIS04; */
   background:transparent;
   height: 15px;
   width: 50px;
   /*padding-left: 50px;*/
   cursor:grab;
}

.floatFill{
}

#EditToolBar{
   margin:-2px;
   width: 100%;
   white-space: nowrap;
   display: table;
   overflow-x: visible;
}
#toolbarleft{
   margin:0;
   width: calc( 1.1 * var(--editmenunameswidth) + 10px); /*may need to be a multiple of --editmenuitemswidth */
   /* width: auto; */
   min-width: calc( 1.1 * var(--editmenunameswidth) + 10px);
   /* overflow: visible; */
   top: 4px;
   position: relative;
}
#toolfiller{
   width:3px;
   top:0;
   left: calc( 1.15 * var(--editmenunameswidth) + 27px);
   display:block;
   bottom:0;
   z-index:300;
   background-color: var(--floatingpanelcolor);
   position:absolute;
}
#toolbarcentre{
   margin:auto;
   width: auto;
   white-space: nowrap;
   display: table-cell;
   padding: 1px;
   padding-left: 20px;
   padding-right: 10px;
}
/* elements to allow flashing dotted border  works with Js Timer*/
/* marchning ants border looked nice - but if object already has a border - cannot see it - switch to outline, not as visually pleasing*/
/*.fbord, box:last-child.fbord {
   outline-style: dotted;
   outline-color: rgba(255,0,0,0.8); 
   outline-offset:1px;
   outline-width:3px;
}*/
@keyframes flashoutline {
0% {
    outline-offset:0;
    outline-style: dotted;
}
100% {
    outline-offset: 4px;
    outline-style: dashed;
}
}
.fbord {
    outline-style: dotted;
    outline-color: rgba(255,0,0,0.8); 
    outline-offset:0;
    outline-width:2px;
    animation-name: flashoutline;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.row>.fbord{
   outline-style: dotted;
   outline-color: rgba(128,0,255,0.8); 
   outline-width:2px;
}
.onepage.fbord{
   outline-style: dotted;
   outline-color: rgba(200,100,50,0.8); 
   outline-width:3px;
}
.paperpage.fbord{
   outline-style: dotted;
   outline-color: rgba(255,255,0,0.8); 
    outline-width:4px;
}

.docsection.fbord{
   outline-style: dotted;
   outline-color: rgba(0,255,0,0.8); 
    outline-width:5px;
}

.printzone.fbord{
   outline-style: dotted;
   outline-color: rgba(255,0,255,0.8); 
    outline-width:6px;
}

.reportcontainer.fbord{
   outline-style: dotted;
   outline-color: rgba(0,0,255,0.8); 
    outline-width:7px;
}

/*
for checking Outline and borders are correctly positioned
.onepage{
   outline-style: dotted;
   outline-color: rgba(255,0,0,0.8); 
    outline-width:3px;
}
.paperpage{
   outline-style: dotted;
   outline-color: rgba(255,255,0,0.8); 
    outline-width:5px;
}

.docsection {
   outline-style: dotted;
   outline-color: rgba(255,0,255,0.8); 
    outline-width:7px;
}

.printzone {
   outline-style: dotted;
   outline-color: rgba(0,255,0,0.8); 
    outline-width:9px;
}

.reportcontainer {
   outline-style: dotted;
   outline-color: rgba(0,0,255,0.8); 
    outline-width:11px;
}

*/

/* JS cycles throught the fbr classes Resulting in a moving outline*/
/*.fbr0{ outline-offset:1px;} 
.fbr1{ outline-offset:2px;}
.fbr2{ outline-offset:3px;}
.fbr3{ outline-offset:4px;}
.fbr4{ outline-offset:5px;}
.fbr5{ outline-offset:4px;}
.fbr6{ outline-offset:5px;}
.fbr7{ outline-offset:4px;}
.fbr8{ outline-offset:5px;}
.fbr9{ outline-offset:2px;}
.fbr10{ outline-offset:1px;}*/


/* items to produce a floating ruler aligned to the top of an object */
.ruler{
   position: relative;
   height: 0cm;
   width: calc( 100% + 2mm);
   xleft:-0.5cm; /*was trying to get ruler to start a few mm before Zero but counter and CM need to be offset => revisit later*/
   /* width: 0; */
}
.ruler>div{
   display: block;
   position: relative;
   padding: 0;
   padding-top: 10px;
   left: 0;
   width: 100%;
   top: -13px;
   height: 0.8cm;
   overflow: hidden;
   background: rgba(255,200,0,0.2);
}
.ruler>div>p,.rulerside>div>p{
   position:absolute;
   width: 100%;
   height:0.6cm;
   top:0;
}
.rulerside{
   /* position: absolute; */
   height: 0;
   width: 0;
   left: -3px;
   /* overflow: hidden; */
}

.rulerside>div{
   display: block;
   position: relative;
   padding: 0;
   padding-top: 10px;
   left:0;
   width: 30cm;
   top: -16px;
   height: 0.8cm;
   overflow: hidden;
   background: rgba(255,200,0,0.2);
   transform: rotate(90deg);
   transform-origin: left;
}

/* reduce VERTICAL Ruler Length depending upon the object type as the "width=100% refers to the X width of the box */
.row.rulerside>div,.row>div.rulerside>div,box>.rulerside>div{  width: 5cm;}
t_>.rulerside>div,d_>.rulerside>div{  width: 3cm;}
.row.rulerside>div:hover,.row>div.rulerside>div:hover,box>.rulerside>div:hover{  width: 15cm;}
t_>.rulerside>div:hover,d_>.rulerside>div:hover{  width: 6cm;}

.rulerside>div>p{
   position:absolute;
   
   width: 100%;
   height:0.6cm;
   top:0;
}
.cm{
   display:block;
   position: absolute;
   padding:0;
   counter-reset: cmruler -1;
   top: 12px;
   white-space: nowrap;
}
.mm5{
   display:block;
   position: absolute;
   padding:0;
   top: 7px;
   white-space: nowrap;
}
.mm{
   display:block;
   position: absolute;
   padding:0;
   top: 9px;
   white-space: nowrap;
}
.cm>li{
   margin: 0;
   padding: 0;
   border: 0;
   content: '';
   display: inline-block;
   counter-increment: cmruler;
   border-left: 1px solid black;
   padding-bottom: 16px;
   width: 1cm;
   height: 0.8cm;
   border-top: 1px solid black;
}
.cm>li::before{
   content: counter(cmruler);
   text-align: center;
   position: relative;
   width: 0;
   top: -15px;
   left: -7px;
   font-size: calc(var(--Frac10-12) * var(--systemsfontsize));
   line-height: 15px;
   font-weight: bold;
   border-top: 1px solid black;
}
.cm>li::after{
   counter-increment: ruler;
}
.mm5>li{
   margin: 0;
   padding: 0;
   border: 0;
   content: '';
   display: inline-block;
   counter-increment: ruler;
   border-left: 1px solid rgba(80,80,80,1);
   padding-bottom: 20px;
   width: 0.5cm;
   /*border-top: 1px solid black;*/

}
.mm>li{
   margin: 0;
   padding: 0;
   border: 0;
   content: '';
   display: inline-block;
   counter-increment: ruler;
   border-left: 1px solid rgba(150,150,150,1);
   padding-bottom: 15px;
   width: 0.1001cm;  /*minor adjustment for rounding error*/

}

.doctabset{ /*group doc tabs and force them to be inline*/
position:relative;
top : -20px;
}

.doctab{ /* set shape behaviour and function of individual document tabs*/
display:inline;
width: 35px;
padding-right: 5px;
background: yellow;
}

/* each tab then specify as needed*/
#doctab1{
 content: "doc1";

 }
 #doctab2{
 content: "doc2";

 }

.datachangesavemenu {
    top: 90px;
    z-index: 3500;
}
.datachangesaveactions>div>div{
    display:block;
    margin:auto;
    margin-top: 4px;
    border: solid grey 1px;
    margin-bottom: 4px;
}
 .datachangesaveactions>div>div>div{
    display:block;
    padding:0;
    margin-top: 3px;
    margin-bottom: 6px;
    margin-left: 4px;
    margin-right:4px;
}
 .datachangesaveactions>div>div>div>label{
    display:inline-block;
    padding:0;
    margin:0;
    margin-left: 4px;
}
 
 :not(.ignorecircular)>.formulaiscircular:not(.ignorecircular):not(.formulaisunstable):before{
   content : "CIRCULAR:";
   background-color:orange;
 }
.formulaiscircular.formulaisunstable:before{
  content : "UNSTABLE CIRCULAR";
  background-color: rgb(255 0 0);
  /* z-index: -5; */
  /* height: 0; */
  /* width: 58px; */
  position: absolute;
  font-size: 9pt;
  font-weight: bold;line-height: 100%;
  white-space: pre-line;
  padding: 0;
  margin: 0;
  border: 0;
left: 0px;top: 2px;opacity: 1;z-index: 2;/* margin: 0 auto; */}
 
 .illegalunamedobject>d_>o_:before{
  content : "Illegal Unamed Object:";
  background-color:orange;
   
 }
 
 .functionboxgroup,.functionboxdatagroup,.functionboxtitlegroup{
   display:table;
   border-collapse: collapse;
  }
 .functionboxgroup>div,.functionboxdatagroup>div,.functionboxtitlegroup>div{
   display:table-row;
  }
.functionboxgroup>div>div,.functionboxdatagroup>div>div,.functionboxtitlegroup>div>div{
   display:table-cell;
   border: solid #616060 0.5px;
   padding: 1px;
   min-width: 25px;
   line-height:110%;
   min-height: 19px;
   position: relative;
   font-family: system-ui;
   max-width: 330px;
   white-space: normal;
   word-break: break-all;
  }
.functionboxgroup>div>div:nth-child(6),.functionboxdatagroup>div>div:nth-child(6),.functionboxtitlegroup>div>div:nth-child(6){
  comment: "Set Column for Value List to prevent number wrap for decimals";
  width: 130px;
}
  
  
.functionboxgroup>div>div:nth-child(7),.functionboxdatagroup>div>div:nth-child(7),.functionboxtitlegroup>div>div:nth-child(7){
  comment: "Prevent Column for Class List being too wide !!";
    max-width: 105px;
}
  
 .functiontitles{
   font-weight:bold;
   white-space: pre;
  }
 
 .f_addfunctionrow>bg_ {
   position: relative;
   width: 1px;
   padding: 2px;
   top: -1px;
 }
  .f_addfunctionrow>bg_>btn_ {
  /* line-height: 100%; */
  position: relative;
  width: 350px;
  overflow: visible;
  font-weight:bold;
  left: 82px;
  }

.namewarning{
  font-weight:bold;
  background-color:orange;
  
}
.addinfohere{
  font-size:var(--editmenufontsize);
  
}
.functionerrors{
  
  
}
.functionerrors:before{
  content:"Function Errors";
  background: rgb(255 0 0);
  
position: absolute;font-weight: bold;opacity: 1;z-index: 3;font-size: 10pt;}