/* GLOBAL */
:root{
    --grass:  #e7eab8;
    --sage: #e7eab8;
    --gray: #242323;
}
html,body{padding:0;margin:0;}
body{margin:auto;text-align: center; background:#c7d0b3;}
*{font-family:verdana, sans-serif;box-sizing:border-box;scrollbar-width: none;}
.wall{max-width:300px; max-width:600px;margin:auto;padding:0 10px;}
.wall.w600{max-width:600px;}
#logo {position:fixed; width:700px; top:50%; left:50%; transform:translate(-50%, -50%); opacity:.1; z-index: -1;}



/* LOGIN / SEARCH FORM */
#form{position:relative;margin-top:calc(50vh - 111px);}
#form:has([id='emp']){margin-top:calc(50vh - 33px);transition:margin-top 2s;}
#form.slideup{margin-top:20px; transition:margin-top .5s;}


input{padding:20px 40px;font-size:20px;display:block;width:100%; background:#ffffffbb; border:1px solid #00000044;margin:4px 0;}
input[name='user']{border-radius:10px 10px 0 0;}
input[name='pass']{border-radius:0 0 10px 10px;}
#emp{border-radius:10px;} 
#emp:focus{outline:none;}


#html{opacity:0;transition:opacity 2s;}
.slideup #html{opacity:1; transition:opacity .5s}
button{padding:20px 40px;font-size:20px;display:inline-block;margin:auto;margin-top:20px;background:#6a832c;color:#fff;border:none;border-radius:8px;cursor:pointer;}
button[data-io='OUT']{background:#f18200;}

.card{position:relative;display:block;width:100%;padding:15px;margin:20px auto;text-align:left;  background:#fff; border-radius:10px; box-shadow:5px 5px 5px #00000044;}
.card h1{display:none;}
.card h3{margin:0;}
.card p{color:#666;padding:5px 0;margin:0;}

.card h7:is(.in, .out){position:absolute; display: block; content: '';right:18px;top:0;width:20px; height:36px;border:solid;border-width: 0 6px 6px 0;transform: rotate(45deg);}
.card h7.out{border-color:#f18200;}
.card h7.in{border-color:#6a832c;}

.card.red{background:#242323;}
.card.red h1{display:block;margin:0 0 5px 0;color:#fb0;}
.card.red h3{color:#fff;} /* #ffa700; */
.card.red p{color:#888;} /* ffdb98 */
.card.red button{background:#fb0;color:#000;}


/* MAIN */
#minmax{position:fixed;right:15px;top:4px; width:48px;height:48px; padding:12px;overflow:hidden;cursor:pointer;pointer-events:auto;opacity:.1;}
#minmax *{position:absolute;transition:opacity .5s;}
#minmax:hover *{fill:var(--accent1);}
#min{opacity:0;}



/* CUSTOM DROPDOWN */
.custom-dropdown { position: relative; margin-top:20px;width: 100%; font-size: 16px; border-radius:10px;user-select:none;}
.dropdown-btn:after{content:'❯';position:absolute;transform:rotate(90deg);right:0;top:0; width:50px; text-align:center; font-size:22px;background:#edf1e5;color:#6a832c;font-weight:bold;border-radius:10px 10px 0 0;}
.dropdown-btn { line-height:50px; padding: 0 20px;width:100%;background:#fff; text-align:left; cursor:pointer; font-size:16px; border-radius:10px; }
.dropdown-content {display: none;position:absolute;top: 100%; left: 0; width: 100%;text-align:left; border: 1px solid #ccc;  background-color: white; z-index: 1; border-radius:10px;overflow:hidden;}
.dropdown-item {padding: 10px 20px;cursor:pointer;background-color:white;}
.dropdown-item:hover {background-color:#edf1e5;}
.dropdown-active .dropdown-content {display:block;}

/* PERIOD */
#period{margin:20px auto;width:100%; border-radius:10px; border:1px solid #ccc;cursor:pointer;background:#edf1e5;color:#000;overflow:hidden;display:flex; justify-content: space-between;}
#prev,#next,#yrwk{cursor:pointer;line-height:50px;width:50px; display:inline-block;     color:#6a832c; user-select:none;    }
#prev,#next{color:#6a832c;font-weight:bold;font-size:22px;}
#yrwk{flex:1; background:#ffffff;color:#000;}
:hover:is(#prev,#next){background:#6a832c;color:#fff;}

/* DATA TABLES */
#data{margin:auto;}
.grid-table{display:grid;grid-template-columns: 3fr 1fr;gap:0; border-radius:10px;overflow:hidden;margin-bottom:20px;box-shadow: 5px 5px 5px #00000044;cursor:pointer;background:#fff;}
.grid-header{background:#b3c09a;  color:#494e40;  text-align: left;  padding: 10px;  font-weight: bold; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.grid-header.right{text-align: right;}
.grid-cell {text-align: left; padding: 10px;}
.grid-cell.right{text-align: right;}
.grid-cell.right:not([data-pid]):before{content:'$';}
.grid-cell span{display:inline-block;}
.grid-cell span:empty:after{content:'not set';color:#00000033;}
.grid-cell span.day{width:35px;}

.open .grid-cell:is(:nth-child(4n+1), :nth-child(4n+2)){background-color: #9db26d2e;} 
.open .grid-cell .red{color:#f00;}
.open .grid-cell .adj{color:#407000;}

[data-pid],[data-wid]{ font-size:12px;padding:0 10px;max-height:0;overflow:hidden; transition:all .5s;} 
.open [data-pid], .open [data-wid]{padding:10px 10px;max-height:50px; transition:all .5s;} 
.grid-table:has(.red) .grid-cell.right:not([data-pid]){color:#f00;}


/* EXTRA */
#exit{font-size:0;position:absolute;top:-0;right:0;z-index:1000;}
#exit:before {content:'✕';position:absolute;right:0;top:0;font-size:18px;background:transparent;line-height:32px;width:32px;text-align:center;cursor:pointer;color:#a11d29;}
#ip{position:fixed;bottom:5px;right:5px;color:#00000033;}
.add{display:block;color:#407000;}
.wk{display:none;}



 
 /* CHECK */
.check{position:relative;height:91mm; /*width:216mm;*/display:none;background:#9db26d2e}
.check *{position:absolute;}
.date{top:14mm;right:18mm;}
.name{top:30mm;left:18mm;}
.amt{top:30mm;right:18mm;}
.amtwords{top:45mm;left:18mm;} 
.memo{top:60mm;left:18mm;}
        

@media print {
/*@media screen and (min-width: 600px) {*/
    body{margin:0;background:none; /*-webkit-print-color-adjust: exact;*/}
    
    .wall{margin:0;max-width:none;padding:0;}
    #custom-dropdown{display:none}
    #period{display:none}
    #data{margin:0;}
    .page{width:8in; height:10.25in; margin: 0.25in auto; padding:0; box-sizing: border-box; background:#fff; /*break-after: page;*/ } /* Offset for Chrome's default print margins */
    .page:not(.open){display:none !important;}
    .grid-table{box-shadow:none;}
    .grid-header{max-width:none;}
    .add{display:none;}
    .open .grid-cell .adj{color:#000;}
    .open .grid-cell{background:none;border-top:1px solid #000;}
    .wk{display:inline;}
    .check{display:block !important;}
    
}