:root {
    --clrbck: white;
    --clrtxt: black;
    --clrbck-select: #555555;
    --clrbck-locked: #dddddd;
    --clrtxt-select: White;
    --clrtxt-list-a: Blue;
    --clrbck-list: White; 
    --clrbck-hdr: #eeeeee;
    --clrbrd-hdr: silver;
    --clrbck-hover: rgba(110,110,110,0.5);
    --clrbck-folder: #eeeeee;
    --clrbck-tab: #cccccc;
    --clrbck-tab-hover: #555555;
    --clrtxt-tab-hover: white;
    --clrbck-sidebar: Silver;
    --clrbck-cur-tab: Maroon;
    --clrtxt-cur-tab: white;
    --clrtxt-subttl: black;
    --clr-outline: red;
    --clrbck-err: rgb(192,0,0);
    --clrbck-errtxt: white;
    --topedge: 0px;
    --leftedge: 0px;
}

body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0;}
input:invalid:not([required]), body[data-chk] input:invalid { box-shadow: 0px 0px 10px var(--clrbck-err); }
input, textarea, button { box-sizing: border-box; }
input, textarea { text-indent: 4px; }
body.iPad button { padding: 2px; -webkit-appearance: none; }
body.iPad input { border-radius: 0;}
input[type="date"] { font-family: inherit; text-indent: 0px;}
div.binddata input { font-size: inherit; font-family: inherit; }

.binderr, .bindalert { background-color: Maroon; color: var(--clrbck-errtxt); }
.binderr { position: relative; }
.binderr span { display: none; white-space: nowrap; z-index: 25; padding: 3px 6px; font-size: 150%; background-color: rgb(255 255 230); border: solid 2px Maroon; position: absolute; top: 1.2em; left: 3ch; color: Black;}
.binderr:hover span { display: block; }
.bindalert:not(:empty):before { display: inline-block; color: black; text-align: center; content: "!"; width: 2ch;  border-radius: 50%; margin: 6px; background-color: yellow; border: solid 2px Black; }
.bindalert:not(:empty) {font-size: 200%; display:block; vertical-align: middle; }

input.bind3state { display: none; }
input.bind3state:checked + input { filter:  invert(100%); /* or use brightness(0%) for solid fill */ }
select[size] { vertical-align: top; }
input:focus, button:focus, select:focus { outline: 1px solid var(--clr-outline); }
button:disabled { color: rgba(170,170,170,.8); }
input[readonly]:not(.bind_fcs) { background-color: var(--clrbck-locked); border: solid 1px var(--clrbrd-hdr);}
._td > input[readonly] { background-color: initial; border: initial;}
input[type="checkbox"] { width: 1.25em; height: calc(1em + 4px); vertical-align: sub; margin-top: 0; margin-bottom: 0;}
input[type="text"]:not(.bind_fcs), textarea { border: solid 1px Silver; padding: 2px; }

span.bindqry { position: relative; left: -20px; width: 20px; font-size: 90%; cursor: zoom-in; }
span.bindqry1 { position: relative; }
span.bindqry2 { position: absolute; right: 0px; top: 0; width: 20px; font-size: 90%; cursor: zoom-in; }
input[data-qry] { padding-right: 20px;}

/* Report view lists */

.bindrpt { display: inline-block; vertical-align: top; border: 1px solid; box-sizing: border-box;}

/* Use Divs like table */
div._table { display: table; width: -webkit-max-content; width: -moz-max-content; width: max-content;}
div._tr { display: block; /* table-row; */}
div._td { display: table-cell; vertical-align: middle; white-space: nowrap; box-sizing: border-box; padding: 2px; }
.bindrpt div._td { padding: 3px 2px; overflow: hidden;  text-overflow: ellipsis; }

div._tr[data-drag] {top: 0px; position: relative; background-color: white; outline: solid 1px black; filter: sepia(75%); pointer-events: none; box-shadow: 5px 10px 18px #888888;}
div._tr[data-del]  { background-color: white; outline: solid 1px Cyan; filter: invert(100%) sepia(75%); box-shadow: 5px 10px 18px Cyan;}
.rowdrag {  cursor: ns-resize; }
.bindhdr { background-image: linear-gradient(rgb(240 240 240), Silver); overflow: hidden; height: 1.90em; }
.bindhdr div._table div._td { height: 1.90em; padding-top: .3em; border-right: 1px solid #555; text-align: center !important; position: relative; }
.bindhdr div._table div._td[data-srt="U"]:after { content: "\25B3"; left: calc(50% - .5ch); position: absolute; font-size: 75%; top: -4px; }
.bindhdr div._table div._td[data-srt="D"]:after { content: "\25BD"; left: calc(50% - .5ch); position: absolute; font-size: 75%; top: -3px; }
.bindhdr div.bindsize { right: 0px; top: -3px; position: absolute;  margin: 0; padding: 0; width: 3px; height: 100%; cursor: ew-resize; }
.bindhdr div._table div._td[data-last] { width: 25px; min-width: 25px; border-right: none ; }

div._td:nth-child(1) { width:var(--w1); max-width:var(--w1);}
div._td:nth-child(2) { width:var(--w2); max-width:var(--w2);}
div._td:nth-child(3) { width:var(--w3); max-width:var(--w3);}
div._td:nth-child(4) { width:var(--w4); max-width:var(--w4);}
div._td:nth-child(5) { width:var(--w5); max-width:var(--w5);}
div._td:nth-child(6) { width:var(--w6); max-width:var(--w6);}
div._td:nth-child(7) { width:var(--w7); max-width:var(--w7);}
div._td:nth-child(8) { width:var(--w8); max-width:var(--w8);}
div._td:nth-child(9) { width:var(--w9); max-width:var(--w9);}
div._td:nth-child(10) { width:var(--w10); max-width:var(--w10);}
div._td:nth-child(11) { width:var(--w11); max-width:var(--w11);}
div._td:nth-child(12) { width:var(--w12); max-width:var(--w12);}
div._td:nth-child(13) { width:var(--w13); max-width:var(--w13);}
div._td:nth-child(14) { width:var(--w14); max-width:var(--w14);}
div._td:nth-child(15) { width:var(--w15); max-width:var(--w15);}
div._td:nth-child(16) { width:var(--w16); max-width:var(--w16);}
div._td:nth-child(17) { width:var(--w17); max-width:var(--w17);}
div._td:nth-child(18) { width:var(--w18); max-width:var(--w18);}
div._td:nth-child(19) { width:var(--w19); max-width:var(--w19);}
div._td:nth-child(20) { width:var(--w20); max-width:var(--w20);}
div._td:nth-child(21) { width:var(--w21); max-width:var(--w21);}
div._td:nth-child(22) { width:var(--w22); max-width:var(--w22);}
div._td:nth-child(23) { width:var(--w23); max-width:var(--w23);}
div._td:nth-child(24) { width:var(--w24); max-width:var(--w24);}
div._td:nth-child(25) { width:var(--w25); max-width:var(--w25);}


.binddata { overflow: auto; width: 100%; height: calc(100% - 1.90em); position: relative; background-color: var(--clrbck-list); }
.binddata a, .binddata a:visited , .binddata a:link{text-decoration: underline; color: var(--clrtxt-list-a);}
div._tr[data-sel] a, div._tr[data-sel] a:visited, div._tr[data-sel] a:link {color: var(--clrtxt-select);}

.bindlist div._tr:hover { background-image: linear-gradient(rgba(240,240,240,.5),var(--clrbck-hover, silver),rgba(240,240,240,.5)); }
.bindlist div._tr[data-sel] { background-color: var(--clrbck-select); color: var(--clrtxt-select); }
.bindgrid div._td input:not([type="checkbox"]):not([type="radio"]) { width: 100% !important; border: none; }
.bindgrid div._td select { width: 100% !important; }
 
.bind_fcs { position: absolute; top: 0;  background: transparent; color:transparent; border: none; pointer-events: none; padding: 3px 1px; box-sizing: content-box;}

/* Tab formatting  */

/* Tab style -- default */
ul.bindtabs { list-style: none; position: relative; float: none; padding: 0;}
ul.bindtabs > li { float: left; }
ul.bindtabs > li > input { display: none; }
ul.bindtabs > li > label { display: block; padding: 6px 10px; background-color: var(--clrbck-tab); border-radius: 8px 8px 0 0; margin-left: 2px; margin-right:3px; cursor: pointer; position: relative; }  
ul.bindtabs > li > input:checked + label { font-weight: bold; background-color: var(--clrbck-folder); }
.stdtab ul.bindtabs > li > input + label { top: 1px; }
.stdtab ul.bindtabs > li > input:checked + label { border: solid 1px Silver; border-bottom-width: 0; z-index: 10; } 
.stdtab .bindtabdiv { border: solid 1px Silver; }
ul.bindtabs > li > div { background-color: var(--clrbck-folder); visibility: hidden; width: 100%; position: absolute; left: 0; padding: .5em 1ch; box-sizing: border-box; overflow: auto; }
ul.bindtabs > li > input:checked + label + div { visibility: inherit;}
.bindspacer { visibility: hidden; z-index: -1; clear: both;}
input:not(:checked) + .bindtab:hover { text-decoration: underline;  background-color: var(--clrbck-tab-hover); color: var(--clrtxt-cur-tab);}

/* Web style */
div.web > ul.bindtabs { display: block; background: Silver; margin: 0; height: 2.2em;}
div.web > ul.bindtabs > li > label { background: transparent; border-radius: 0 0 0 0; padding: .5em 10px; }  
div.web > ul.bindtabs > li > input:checked + label { background-color: var(--clrbck-cur-tab); color: var(--clrtxt-cur-tab); }
div.web > ul.bindtabs > li > div  { background: transparent; padding-left: 0; padding-right:0;}
div.web > ul.bindtabs + .bindspacer { visibility: hidden; z-index: -1; clear: both;}
div.web input:not(:checked) + .bindtab:hover {  background-color: var(--clrbck-tab-hover); color: var(--clrtxt-tab-hover); }

/* Side Bar */
#sidebar { position: absolute; top:0; left: 0; padding-left: 160px; width: calc(100% - 160px); }
#sidebar::after { content: " "; position: fixed; top: var(--topedge); left: var(--leftedge); width: 150px; height: calc(100vh - var(--topedge)); background-color: var(--clrbck-sidebar); z-index: -1; overflow: hidden;}
div.bar > ul.bindtabs + .bindspacer { visibility: visible; border-top: solid 1px Silver; border-bottom: solid 1px Silver; padding-bottom: 4px; }
div.bar > ul.bindtabs {  margin: 0;  position: absolute; top: 4px; left: -160px; width: calc(100% + 160px); }
div.bar > ul.bindtabs > li:first-child { border-top: solid 1px White; }
div.bar > ul.bindtabs > li { clear: both; width: 150px; background: var(--clrbck-sidebar); border-bottom: solid 1px White;}
div.bar > ul.bindtabs > li > label { background: transparent; border-radius: 0; margin-right: 0px;}  
div.bar > ul.bindtabs > li > input:checked + label::before {content: "\25BA"; float: right;}
div.bar > ul.bindtabs > li > input:checked + label { background-color: var(--clrbck-cur-tab); Color: var(--clrtxt-cur-tab); margin-right: -5px; }
div.bar > ul.bindtabs > li > div  { background: transparent; width: calc(100% - 150px) !important; top: 0; left: 150px; padding: 0 1ch;  }
div.bar input:not(:checked) + .bindtab:hover { background-color: var(--clrbck-tab-hover); color: var(--clrtxt-tab-hover);}

/* File Drop */

._binddrop { display: inline-block; border: 2px dashed #ccc; border-radius: 20px; }
._binddrop label { height: 100%; width: 100%; display: block; position: relative; }
._binddrop label span { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; padding: 3px 10px;} 
._binddrop[data-lite] { border: 2px solid purple; background: lavender;}
.xferinfo { display: block; position: fixed; bottom: 0; right: 5px; width: 400px; height: 50px; box-sizing: border-box; 
  padding: 5px 10px; border: solid 1px Silver; background: #eeeeee; }
.xferinfo .xferX { float: right; cursor: pointer; }
.xferinfo progress { width: 100%;  }

/* Popup CSS */

.bindmask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10;
background-color: rgba(220,220,220,.5); /* background: radial-gradient(rgba(64,64,64,.5), rgba(192,192,192,.5));  */ }
.bindmask div.frame { border: 2px solid black; box-shadow: #888888 5px 10px 18px;
  height: 75%; width: 75%; /* Default size */
  min-height: 200px; min-width: 400px; 
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Center It */
  margin: 0;   background: White; }
.bindmask iframe { width: 100%; height: 100%; border: none; }
div.popClose { position: absolute; right: -30px; top: -30px; width: 30px; height: 30px; background: white; border: 2px solid black; border-radius: 50%; text-align: center; 
  font-weight: bold; font-size: 35px; line-height: 30px; }
div.popClose:hover { color: red; }

div.bindbottom {  position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 4px; box-sizing: border-box; }

span.msgalert:before { float: left; display: inline-block; color: black; text-align: center; content: "\26a0\fe0f"; font-size: 50px; margin: 8px 8px calc(100vh - 3em); }
span.msgstop:before { float: left; display: inline-block; color: white; text-align: center; content: "\1F6D1"; font-size: 50px; margin: 8px 8px calc(100vh - 3em); }

span.msgquest:before { float: left; display: inline-block; color: black; text-align: center; content: "?"; width: 54px; height: 54px; margin: 8px 8px calc(100vh - 3em); 
  font-size: 45px; border-radius: 50%; background-image: radial-gradient(farthest-corner at 30% 30%, lightgreen, green); border: solid 2px black; }
.msginfo:before { float: left; display: inline-block; color: white; text-align: center; content: "i"; width: 50px; height: 50px;  margin: 8px 8px calc(100vh - 3em);
  padding: 0 4px 8px 4px; border-radius: 50%; font-size: 45px; background-image: radial-gradient(farthest-corner at 30% 30%, #9999FF, blue); 
  border: solid 2px black; font-family: "Times New Roman", Times, serif; font-style: italic;}

/* ... */

.fadeIn { animation: fadeIn .5s; }

@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

.fm_whole { width: 97.5%; padding: 0em 1ch; box-sizing: border-box; min-width: 60ch; }
.fm_half { width: 48.5%; padding: 0em 1ch; min-width: 60ch; display: inline-block; box-sizing: border-box; vertical-align: top; }
.fm_third { width: 32%; padding: 0em 1ch; min-width: 40ch; display: inline-block; box-sizing: border-box; vertical-align: top; }
.fm_quarter { width: 23%; padding: 0em 1ch; min-width: 30ch; display: inline-block; box-sizing: border-box; vertical-align: top; }
.fm_flex { padding: 0em 1ch; display: inline-block; box-sizing: border-box; vertical-align: top; }
div.fm_whole:empty, div.fm_half:empty, div.fm_flex:empty { display: block; }

@media screen and (max-width: 1080px)
{ 
.fm_whole, .fm_half, .fm_third, .fm_quarter { width: 97.5%; padding: 0em 1ch; box-sizing: border-box; min-width: initial; }
}

.fm_row { width: 100%; position: relative;}
.fm_prompt, .fm_val { display: inline-block; white-space: nowrap; }
.fm_val { /* min-height:2.0em; */ margin-bottom: 3px; max-width: 100%;}
.fm_prompt { width: 20%; max-width: 20ch; padding-bottom: 2px; margin-right: 5ch;}
div.fm_whole div.fm_val { min-width:90ch; width: 70%; }
div.fm_half div.fm_val { min-width:40ch; }
div.fm_third div.fm_val { min-width:26ch;  }
div.fm_quarter div.fm_val { min-width:20ch;  }
.fm_val > input {max-width: 100% !important; }
div.fm_ttl { border: solid 1px var(--clrbrd-hdr); background: var(--clrbck-hdr); height: 2em; line-height:2em; font-size: 120%; padding: 0 1ch; 
   font-weight: bold; margin: .5em 1ch; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis;}
div.fm_subttl { font-weight: bold; color: var(--clrtxt-subttl); margin: 2px 0;}

/* Menus */
div.bindmenubar { width: 100%; background-color: var(--clrbck-hdr); z-index: 10;}
div.bindmenubar > div.binditem { display: inline-block; }
div.bindmenu { min-width: 10ch; border: solid 1px silver; position: relative; box-sizing: border-box; background-color: var(--clrbck-hdr); z-index: 10;}
div.binditem { line-height: 1.75em; position: relative;  padding: 0px 8px;box-sizing: border-box; color: var(--clrtxt); white-space: nowrap; }
div.bindmenu > div { width: 100%; padding-right: 50px; }
div.bindmenu > div.binditem > div.bindmenu { position: absolute; top: -1px; left: 100%; display: none; }
div.bindmenubar > div.binditem > div.bindmenu { min-width: 100%; position: absolute; top: 100%; left: 0; display: none; }
div.binditem:hover > div.bindmenu, div.binditem[data-sel] > div.bindmenu { display: block !important; } 
/* div.bindmenu > div.bindsub:hover::after, div.bindmenu > div.bindsub[data-sel]::after { content: "\25BA"; float: right; padding-right: 2px;} */
.bindarrow { position: absolute; right: 3px; }
div.binditem:hover { background-color: var(--clrbck-cur-tab); color: var(--clrtxt-cur-tab); }
div.bindmenu > div.binditem.addline { border-bottom: solid 1px var(--clrbrd-hdr); }

/* Std Template definitions */
#pageContents { position: relative; margin-top: var(--topedge, 50px); width: 100%; padding: 5px 5px 0 5px; box-sizing: border-box; 
  background-color: var(--clrbck-page, white); color: var(--clrtxt-page, black);}
#topCorner { cursor: pointer;} 
#topHeader {position: fixed; top: 0; left: var(--left); background-color: var(--clrbck-top, #eee); color: var(--clrtxt-top, black); 
  height: var(--topedge, 50px); width: 100%; line-height: var(--topedge, 50px); text-indent: 20px; z-index: 5;}

#leftEdge { width: 100%; background-color: var(--clrbck-left, #555); color: var(--clrtxt-left, white); min-height: calc(100vh - var(--topedge, 50px)); padding: 10px 0; box-sizing: border-box; 
     overflow: hidden; }
#leftEdge p { margin: 6px 10px; font-size: 125%;} 
#leftEdge a {text-decoration: none; color: inherit; } 
#leftEdge a:hover { text-decoration: underline; }
#leftEdge p.leftsep { border-top: solid 2px var(--clrtxt-left, white); height: 5px; margin-top: 8px;}

.noborder { border: none; }
.border { border: solid 1px black; }
.transparent { background-color: transparent; }
.symbol_only { border: none; background-color: transparent; font-size: 125%; }
.fm_browse { border: none; background-color: transparent;}
table:not(._fixedhi), table:not(._fixedhi) tr, table:not(.fixedhi) td { height: initial !important; min-height: 21px; }