/* GLOBAL */
body, html{width:100%;height:100%;font-size:16px;font-family:verdana, sans-serif;background:#ddd;margin:0;padding:0;box-sizing:border-box;}
body{padding:0 15px;}
.hidden{display:none;}
*{font-family:inherit;box-sizing:inherit;}
.wall{position:relative;top:0;width:924px;margin:0 auto;}
#backpanel{position:fixed;width:1000px;height:100vh;left:50%;top:0;transform:translate(-50%);background:#fff;}
::-webkit-scrollbar{width:0;} /* CUSTOM SCROLLBAR */
input[readonly]{cursor:pointer;}/* look clickable not typable*/
:root{--tooltip:block;} /* tooltips */


/* LEGACY */
#content{position:relative;top:95px;max-height:calc(100vh - 155px);width:942px;overflow-y:scroll;margin:0 auto;overflow-x: hidden;white-space: nowrap;}
.default{border-collapse:collapse;border:1px solid gray;font-size:12px;/*width:948px;table-layout:fixed;*/}
.dheader{width:948px;}
.default .dheader td{background:#111;color:#fff;border:1px solid #111;}
.default td{border:1px solid #ddd;cursor:default;overflow:hidden;text-overflow: ellipsis;padding-left:4px;line-height:30px;height:30px;}
.default tr:nth-child(even){background:#eee;}
#drill{position:fixed;display:none;left:50%;top:40%;transform:translate(-50%, -50%);width:900px;height:400px;background:#acf;padding-left:20px;font-size:14px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);border-radius:8px;animation: modal 0.6s;}
#drill div{position:absolute;}


/* NAV BAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;width:100%;background:#79f;}
ul.nav{position:relative;display:block;width:100%;margin:0;padding:0;font-size:0;background:#79f;} 
ul.nav a{text-decoration:none;}
.nav .main{position:relative;display:inline-block;vertical-align:top;margin:0 auto;padding:0;text-align:center;}
.nav .main a{display:block;padding:10px 20px;background:#79f;font-size:14px;color:#444;}
.nav .main:hover a{background:#9bf;color:#000;}
.nav .main.mark a{background:#fff;color:#000;}
.nav .sub a{display:block;padding:12px 20px;background:#fff;white-space:nowrap;text-transform:uppercase;}
.nav .sub a:hover{background:rgb(255,245,190);color:#444;}
.nav .main:hover .sub{max-height:1200px;overflow:hidden;transition:max-height 1s;}
ul.sub{list-style: none;position:absolute;margin:0;padding:0;max-height:0;overflow:hidden;text-align:left;transition:max-height .1s;box-shadow:5px 5px 5px rgba(0,0,0,.4);}





/* ACCT */
#acctsel{position:absolute;top:0;right:0;background:#79f;color:#fff;}
#acctsel{display:flex;flex-direction:column;padding:0;margin:0;user-select:none;}
#acctsel li{position:relative;list-style:none;display:block;cursor:pointer;font-size:14px;max-height:0;overflow-y:hidden;opacity:0;   padding:0 40px 0 20px;background:inherit;color:inherit;line-height:0;      }
#acctsel li:hover{background:rgba(255,255,255,.15);}
#acctsel.show li, #acctsel li[data-sel="1"]{max-height:50px;overflow-y:auto; opacity:1;transition:max-height .3s, line-height .3s, opacity .3s;order:2;      line-height:37px;       }
#acctsel li[data-sel="1"]{order:1;}
#acctsel li[data-sel="1"]:after{position:absolute;content:'';top:calc(50% - 2px);right:15px;width:0;height:0;border:4px solid transparent;border-top-color:inherit;}
/*#acctsel li:last-child{color:#fff;}*/


/* CUSTOM SELECT */
.select{display:flex;flex-direction: column;padding:0;margin:0;user-select:none;}
.select li{position:relative;list-style:none;display:block;cursor:pointer;font-size:14px;max-height:0;overflow-y:hidden;opacity:0;	  padding:0 40px 0 20px;background:inherit;color:inherit;line-height:0;      }
.select li:hover{background:rgba(255,255,255,.15);}
.select.show li, .select li[data-sel="1"]{max-height:50px;overflow-y:auto; opacity:1;transition:max-height .3s, line-height .3s, opacity .3s;order:2;       line-height:37px;        }
.select li[data-sel="1"]{order:1;      }
.select li[data-sel="1"]:after{position:absolute;content:'';top:calc(50% - 2px);right:15px; width:0;height:0;border:4px solid transparent;border-top-color:inherit;
}


/* HEADER */
#header{position:absolute;left:0;top:0;}

/* TITLE */
#title{position:fixed;top:50px;color:#555;     /*background:rgb(255,245,190);box-shadow:0 0 20px 20px rgb(255,245,190);*/   }
#title b{font-weight:400;font-size:18px;position:relative;left:20px;bottom:1px;color:#444;}

/* SEARCH FORM */
#searchForm{position:fixed;top:95px;font-size:14px;}
#searchForm input{display:inline-block;padding:4px 8px 4px 80px;width:200px;font:normal 14px verdana, sans-serif;margin:15px 0;border:1px solid #ccc;border-radius:4px;}
#searchForm:before{content:'BEGIN:';position:absolute;top:20px;left:10px;pointer-events:none;color:#888;}
#searchForm:after{content:'END:';position:absolute;top:20px;left:216px;pointer-events:none;color:#888;}


/* MODAL */ 
#modal{display:none;position:fixed;left:50%;top:40%;transform:translate(-50%, -50%);z-index:1000; animation: modal 0.6s;    min-width:325px;    }
#modal:before{content:' ';position:absolute;left:-2000px;top:-2000px;height:4000px;width:4000px;background:rgba(0,0,0,.2);z-index:-1;}
@keyframes modal{from{top:0;opacity:0}to{top:40%; opacity:1}}

/* LOGIN FORM */
#login{display:block;background:#fff;padding:15px;border-radius:6px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}
#login input{width:100%;position:static;display:block;margin:0 0 2px 0;padding:8px 16px;border:1px solid #ccc;}
#login h2{margin:0 0 20px 0;}
#login a{font-size:14px;margin:10px 0;float:right;text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;}


/* --- MAIN TABLE --- */
#main{position:absolute;top:150px;left:0;display:block;} /* to hide scrollbars overflow:hidden;}*/
#maintab{position:fixed;width:607px;max-height:632px;overflow-x:hidden;overflow-y:auto;}
#maintab .thead{position:fixed;background:#666;color:#fff; font-size:0;white-space:nowrap;z-index:10;}
#maintab .thead span{font-size:14px;margin:-1px -1px 0 0;background:inherit;color:inherit;border:1px solid #666;padding:4px 8px;}
#maintab .tbody{position:relative;font-size:0;white-space:nowrap;}
#maintab input{margin:-1px -1px 0 0;background:none;border:1px solid #ddd;color:#666;}
#maintab input[value^="-"]{color:red;}
#maintab > div:nth-child(2){margin-top:26px;}  /* drop first data below fixed header*/
#maintab > div:nth-child(even) input{background:#eee;}
#maintab > div:nth-child(odd) input{background:#fff;}
#maintab div.foc > input{background:#e3eadb;color:#000;}
#maintab div.foc > input[value^="-"]{color:red;}
#maintab  div.foc input::placeholder{color:#939B8A;}
#maintab  input:focus{outline:none;box-shadow:0 0 2px 0 rgba(0,0,0,.5) inset;}

.tdate{display:inline-block;width:100px;padding:8px;box-sizing:border-box;}
.titem{display:inline-block;width:300px;padding:8px;box-sizing:border-box;}
.tcat{display:inline-block;width:60px;padding:8px;box-sizing:border-box;text-align:right;}
.tprice{display:inline-block;width:80px;padding:8px;box-sizing:border-box;text-align:right;}
.tck{display:inline-block;width:90px;padding:8px 32px 8px 8px;box-sizing:border-box;text-align:right;}

/* PKR */
.pkr{position:fixed;display:block; left:-2000px;/*offscreen*/ z-index:10000;margin:0;padding:0;background:#fff;color:#000;border:1px solid #aaa; box-shadow:5px 5px 5px 0 rgba(0,0,0,.3);
	overflow-y:scroll;  max-height:0;         font-size:14px;border-radius:0 8px 8px 8px;}
.pkr li{display:block;width:100%;min-width:163px;list-style: none;background:#fff;cursor:pointer;padding:8px;box-sizing: border-box;white-space:nowrap;}
.pkr li:hover, .pkr li:focus{background:#ddd;}
.pkr li.selected{background:#e3eadb;box-shadow:0 0 2px 2px rgba(0,0,0,.05) inset;}
/*.pkr li[data-payee="0"]{display:none;} /* hide "ADD NEW.." in payee picker */
/*.pkr li[data-cat="0"]{display:none;} /* hide "ADD NEW.." in cat picker */
.pkr li[data-payee="0"][data-payee_name='ADD NEW...']{display:none;} /* hide "ADD NEW..." in payee picker */
.pkr li[data-cat="0"][data-cat_name='ADD NEW...']{display:none;} /* hide "ADD NEW..." in cat picker */

.pkr.payees{top:453px;/*max-height:250px;*/}
.pkr.cats{top:170px;/*max-height:488px;*/}
.pkr_head{position:fixed;margin-top:-34px;background:#666;color:#fff;padding:8px 16px;border-radius:8px 8px 0 0;cursor:default;}

/* MYSPLIT */
@keyframes mysplit{from{top:0;opacity:0}to{top:203px; opacity:1}}
#mysplit{position:absolute;left:353px;top:203px;width:433px;margin-bottom:200px;background:#e3eadb;color:rgba(0,0,0,.5); font-size:14px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);display:none;border: 1px solid rgba(0,0,0,.1);border-radius:8px;z-index:1000;animation: mysplit 0.6s;}
#mysplit div:empty{padding:0;}
#mysplit:after{position:absolute;content:'';height:200px;width:200px;} /* creates gap at bottom of page when form gets long */
#split_head{padding-top:315px;}
#split_head p{position:absolute;pointer-events:none;}
#ltitle{top:0;left:16px;font-weight:bold;}
#lpayee{top:32px;left:16px}
#lnote{top:64px;left:16px;}
#lphone{top:225px;left:16px;}
#laddress{top:103px;left:16px;font-weight:bold;}
#lstreet{top:132px;left:16px;}
#lcity{top:164px;left:16px;}
#lstate{top:164px;left:222px;}
#lzip{top:164px;left:287px;}
#lcat{top:225px;left:241px;}
#lview{top:123px;left:21px;}

#split_top input{position:absolute;background:rgba(255,255,255,.15);border:1px solid rgba(0,0,0,.1);color:#444;padding:4px 8px;box-sizing:border-box;display:inline-block;font-size:14px;}
#split_top input:focus{outline:none;box-shadow:0 0 2px 1px rgba(0,0,0,.5) inset;}
#split_top input::placeholder{color:rgba(0,0,0,.5);}
#split_top input[name="payee_name"]{top:42px;left:10px;width:410px;display:inline-block;padding-left:60px;}
#split_top input[name="note"]{top:74px;left:10px;width:410px;display:inline-block;padding-left:60px;}
#split_top input[name="phone"]{top:234px;left:10px;width:192px;display:inline-block;padding-left:60px;}
#split_top input[name="street"]{top:141px;left:10px;width:410px;display:inline-block;padding-left:60px;}
#split_top input[name="city"]{top:173px;left:10px;width:192px;display:inline-block;padding-left:60px;}
#split_top input[name="state"]{top:173px;right:156px;width:68px;display:inline-block;padding-left:30px;text-align:right;text-transform:uppercase;}
#split_top input[name="zip"]{top:173px;left:280px;width:140px;display:inline-block;padding-left:40px;}
#split_top input[name="cat"]{top:234px;right:10px;width:187px;display:inline-block;text-align:right;padding-right:4px;}
#split_top input[name="st"]{top:133px;left:10px;width:130px;display:inline-block;padding-left:60px;cursor:pointer;color:rgba(0,0,0,.1)}
#split_top input[name="st"] + span{position:absolute;top:137px;left:72px;pointer-events:none;color:#444;}
#split_top input[name="st"][value="0"] + span:before{content:'HIDDEN';color:red;}
#split_top input[name="st"][value="1"] + span:before{content:'VISIBLE';}



#save{position:absolute;bottom:10px;right:10px;font-size:16px;background:rgba(0,0,0,.47);color:#fff;font-weight:400;padding:5px 10px;text-align:center;cursor:pointer;border-radius:4px;}

/* EXIT */
q.quit{font-size:0;position:absolute;top:2px;right:0;}
q.quit:before{content:'✕';position:absolute;right:4px;top:1px;font-size:24px;background:transparent;line-height:32px;width:32px;text-align:center;cursor:pointer;}
q.quit:after{content:'';}

/* FLASH */
#flash_div{position:fixed;opacity:0;z-index:10000;left:50%;top:35%;transform:translate(-50%, -50%);pointer-events:none;padding:10px 20px;font-size:1.5em;border-radius:100px;}
.orange_flash{background:rgb(255,245,190);color:#000;box-shadow:0 0 20px 5px rgb(209,209,209); animation: flash 2s;}
.gray_flash{background:#fff;color:#000;box-shadow:0 0 20px 5px rgb(209, 209, 209); animation: flash 2s;}

/* ANIMATIONS */
@keyframes flash{ 0%{opacity:0;} 30%{opacity:1.0;} 40%{opacity:1.0} 100%{opacity:0;}}

/* TOOLTIP */
input ~ span.tooltip{display:none;position:absolute;top:-33px;left:188px; /*left:145px*/font-size:14px;white-space: nowrap;pointer-events: none;z-index:10;}
input:focus ~ span.tooltip{/*display:var(--tooltip);*/background:#FFF5bE;color:rgba(0,0,0,.7);padding:12px;border-radius:8px;filter:drop-shadow(0 3px 6px rgb(0,0,0,.2));}
input:focus ~ span.tooltip:before{content:' ';position:absolute;bottom:-31px;border:20px solid transparent;border-top-color:#FFF5bE;}
input:focus ~ span.tooltip:after{content:'';position:static;white-space: pre;}
}