html {  font-size:calc(.75em + 1.5vh);}
body { font-family:Hind,Helvetica Neue,Open Sans,Source Sans Pro,sans-serif; line-height:1.3;}
#all { position:absolute; display:block; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden;}
#all > header { position:absolute; top:0; left:0; width:100%; height:2rem; overflow:hidden; line-height:160%;  background:linear-gradient(to top, #6f6 0%,#dfd 100%); box-sizing:border-box;  border-top:1px solid black; border-bottom:1px solid black; z-index:2;}
#all > main { position:absolute; top:2rem; bottom:2rem; width:100%; overflow:auto; padding-bottom:5em; z-index:1;}
#all > footer { position:absolute; bottom:0; left:0; width:100%; height:2rem; font-size:80%; overflow:hidden;  background:linear-gradient(to bottom, #fff 0%,#ddd 100%); box-sizing:border-box; box-shadow:0px 0px 5px 0px black; z-index:2;}

input[type=checkbox] {    transform: scale(1.5);}
#multiselect { display:none;  }
#newjob {  bottom:calc(0 - 3em); top:100%; left:0; right:0; padding:.5em .25em 0; background:#e6e6e6;  box-shadow:0px 0px 5px 0px black;  }
#newjob.open { top:calc(100% - 3em); }
#newjob #jobtitlediv { display:inline-block; width:calc(100% - 6em); vertical-align: top;}
#newjob #jobtitle { width:100%; box-sizing: border-box; }
h1,h2,h3,h4,h5 { color:#aaf;}
h1 { font-size:200%; font-weight:bold; margin:0; padding:.25em 0;}
h2,h3 { white-space: nowrap; overflow: hidden; margin:.5em 0 0 0; border:none; font-size:90%; padding:.2em .5em .1em; background:#cfc; text-transform: uppercase; color:#000;}
h2 {   border-width:1px 0px;   clear:both; }
h3 { font-weight:700; }
h4 { font-size:80%; color:#000; font-weight:700; margin:.5em 0 0 0; text-transform: uppercase;}
button {font-size:1rem;}
textarea,select,input { padding:.3em; margin:0; border-radius:5px; border:1px solid #999;  font-size:1rem;}
.width_max { width:100%; box-sizing:border-box;}

.navbar { white-space:nowrap; }
.navbar div {display:inline-block; vertical-align:middle;}
.navbar a { display:inline-block; text-decoration:none; color:#000; vertical-align: middle; padding:0 .2em;}
.navbar a:hover { background:#ccc; }
div#title { font-size:125%; line-height:180%; margin-left:.5em; }

.hide { display:none; }

.balance { font-size:10vh; text-align:center;}
.unit { font-size:2.5vh; display:block; margin-top:-1em;}
:disabled { background:transparent; border-color:transparent; }
#titlediv {width:85%; width:calc(100% - 3em);}
#titlediv input {width:100%; box-sizing:border-box;}




.prompt {  margin:0px 0px 20px 0px; position:relative; }
.err    { background:#c00; padding:10px; color:#fff; }
  .err ul { margin:5px;  padding-left:0px; list-style-type:none;}
  .err a:link,.err a:visited { color:#fff; }
.notice    { background:#ff9; padding:1em; color:#000;  border:1px solid  #aaa; display:block;}
  .notice ul { margin:5px; padding-left:0px; list-style-type:none;}
  .notice a:link,.notice a:visited { color:#000; }
  .notice .color { color:#900; }
  .notice ul ul { padding-left:2em; list-style-type:circle;}



ul.list { overflow-x:hidden !important; margin:0; padding:0;}
ul.list>li { position:relative; left:0;  background:white;  display:block; border-bottom:1px solid #ccc;}

ul.list>li>a { display:block; padding:.5em 4em .5em .3em; margin: 0 0 0 0;text-decoration:none;  color:#000; overflow:hidden;  background:#fff; position:relative; z-index: 2; left:0; transition:left .25s linear; }
#ul.list>li:first-child>a { border-top:1px solid #ccc;}
ul.list>li>a:hover { background:#f6f6ff; }
ul.list>li.timing>a { min-height:2.5em;}

#home ul.list>li.available>a,
ul.list>li.unavailable>a,
ul.list>li.incomplete>a,
 ul.list>li.completed>a,
 ul.list>li.paid>a { color:#ccc; }
ul.list>li>input+a { display:block; padding-left:2em; }
ul.list>li>input:checked+a { background:#ddf;}
ul.list>li.pending:before {position:absolute; top:0; right:0; bottom:0; left:50%; content:'Updating...'; background:#ccc; line-height:2em; text-align:center;}

ul.list>li>input { display:block; position:absolute; top:.85em; left:.5em; z-index:3; transition:left .25s linear; }
ul.list>li.open>input { left:12.5em; }

ul.list>li>a>.info {  display:block; position:absolute;  text-align:center; font-size: 75%; top:.2em; right:2em; bottom:.2em; width:6.1em; z-index:2; line-height:1.3; white-space: pre; overflow:hidden;}
ul.list>li>a>.info>div {  display:inline; vertical-align:middle; }
ul.list>li .logtime {  display:inline-block; color:#999; width:5em; text-align:center;}

ul.list>li .controlstgl { display:block; position:absolute; right:0;top:.3em;  line-height:1.0; z-index:3; width:1em; font-size:100%; padding:0 .25em .25em; transition:right .25s linear; }
ul.list>li.open .controlstgl { right:12em;}
ul.list>li .controls { display:block; position:absolute; left:0em; top:0; background:#ccf; line-height:1.0; width:100%;  bottom:0; padding:.2em; overflow:hidden; box-sizing:border-box;}
ul.list>li .controls a { display:inline-block; vertical-align: middle; width:1.85em;}
ul.list>li.open>a {left:12em; }
ul.list>li.openleft>a {left:-12em; }
ul.list>li.controls input { opacity:0;}

.list>li .title { display:inline-block; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; max-width:calc(100% - 0.25em); vertical-align:middle;}
.list>li.completed .title:before,
.list>li.paid .title:before { content: ' '; background:url(/img/check-square.svg) no-repeat; display:inline-block; width:1em; height: 1em; vertical-align: middle; padding-right:0.5em; background-size:contain; opacity:.2;}
.list>li.incomplete .title:before { content: ' '; background:url(/img/times-square.svg) no-repeat; display:inline-block; width:1em; height: 1em; vertical-align: middle; padding-right:0.5em; background-size:contain; opacity:.2;}

.list>li .comment {  display:inline-block; vertical-align: middle;  padding:0 0 0 1em; font-size:80%; color:#999; max-width:calc(100% - 1em); overflow:hidden; text-overflow:ellipsis;}

.list>li .field { text-transform: uppercase;  font-size: 55%; position:absolute; top:.2em; left:.5em; color:#009;  white-space:nowrap; z-index:3;}


.list .info .date { font-size:73.5%; text-transform: uppercase; text-align:center; top:.2em; right:2.5em; color:#009;  white-space:nowrap; z-index:3;}
.list .info .value { font-weight:bold; padding:0 .2em; text-align:center; }
.job .info .freq {  font-weight:normal; }
.job .tags { display:none;}
.list .info .flags { font-size:60%; line-height: 1em;}
.list .info .flags .svg { padding:0 .25em 0 .25em;}
.list .info .remain { font-size:73.5%; color:#666; text-align:center;}
.list .info .remain:after { content:'\00000a';}
.job .field:after { content:'> '}

.list>.trans>a { padding-right:.25em; line-height:1.5; }
.trans .timer { display:inline; }

.list>li.unread .comment { font-weight:bold; color:#000;}
.list>li.unread .title { font-weight:bold; color:#009;}
.list.messages .title {display:block; text-transform: uppercase;}
ul.list>li.trans .info>div { font-size:.9rem;line-height: 2.2rem; }
ul.list>li.trans .info { text-align: right; }

@media only screen and (max-width : 815px)  {
ul.list>li input { opacity:0; position:absolute; }
ul.list>li input+a { width:100%; box-sizing: border-box; padding-left:.3em; }
ul.list>li .controlstgl { display: none;}
ul.list>li>a>.info {  right:0em;}
ul.list .trans .title { max-width:calc(100% - 5em); }
ul.list .post .title { display:block;}
ul.list .post>a {padding:.25em;}
ul.list .trans .comment { display:block;}
ul.list .trans .logtime { line-height:1.5rem; font-size:70%; margin-left:-.25em; width:3.6em; overflow:hidden; padding-top:.15em; vertical-align: top;}
}


#chartdiv {white-space:nowrap; overflow-x:auto; padding-bottom: 2em;}
  .chartrow {  }
.chartcell { display:inline-block; font-size:3.5vh;width:4.5em; height:2.65em; border:1px solid black; text-align:center; line-height:3em; vertical-align: middle; overflow:hidden; }
.chartcell.rowhead { border:0px; font-weight:bold; text-align:right;  padding-right:.5em; direction:rtl; }
.chartcell.colhead { border:0px; font-weight:bold; height:2em; vertical-align: bottom;  }
.chartcell a { text-decoration:none; width:100%; height:100%; display:inline-block; color:#333;}
.chartcell a:hover { background:#e6e6e6; }
.chartcell a:visited {color:#333;}
.chartcell a.self {font-weight: bold; color:#00f;}

.addbut {float:right;}
.svg {line-height:1em;}
.svg img { height:2em; position:relative; width:1.5em; top:auto; left:auto; border:0; }
.svg img.small { height:1.5em;}
img.svg {line-height:1em; vertical-align:middle; height:1.8em; margin:-.4em 0;}
footer .navbar { text-align:center; white-space:nowrap; overflow:hidden; font-size:120%;}
footer .navbar .but { width:10%; width:calc(100% / 9);}
footer .navbar .logout { line-height:1; font-size:80%; display:inline-block; vertical-align: middle; text-decoration: underline;}

.cards a { position:relative; display:inline-block; color:#000;  padding:.3em; margin:.3em; box-shadow:0px 1px 3px 0px rgba(0, 0, 0, .4); border-radius:0.2em; text-decoration:none;}
.cards a:hover { background:#f6f6ff;}
.tags { font-size:65%; padding:0 .5em; }
.tags .but { border:1px solid; padding:.25em; margin:0 .25em; display:inline-block; text-decoration: none;}

.list .checkboxrow { display:block ; margin:-.5em 0; padding: 0; box-shadow:none;}
.checkboxrow > div { width:calc(100% - 1.5em); }
.checkboxrow .box { width: 1.5em; text-align:center;}

#valuediv { float:right; }
#job #remaindiv,
#maxdiv { clear:right; float:right; }
input#max,
input#remain,
input#value {width:2.5em; font-weight:bold; text-align:right;}
#max, #value, #remain, #freq { background:transparent; border-color:transparent; } 
#descriptiondiv { clear:both; max-height:60vh; overflow:hidden auto;}
#descriptiondiv #description { width:100%; box-sizing:border-box;}
#descriptiondiv .description { padding:1em;}

.accordion {
  font-size:1rem;
  font-family:Hind,Helvetica Neue,Open Sans,Source Sans Pro,sans-serif;
}
.accordion h2+div, .accordion h2+ul, .accordion h3+ul { height:0;  overflow:hidden;}
.ui-accordion .ui-accordion-header+div,
.ui-accordion .ui-accordion-header+ul.list {height:auto;}

.ui-accordion .ui-accordion-header {
  white-space:nowrap; overflow:hidden; padding:.25em; 
  margin:.5em 0 0 0; color:#000;  border:none; font-size:90%; padding:.2em .5em .1em; background:#cfc; text-transform: uppercase;
 }
.ui-accordion .ui-accordion-header-active {
    font-weight:bold;
 }
.ui-accordion .ui-accordion-header-active:focus {
    outline:none;
 }
.ui-accordion .ui-accordion-content { padding:0 0 1em 0; border:0; }

.member >a { padding:.5em !important; }

#joboptions { padding:0 1em 1em 1em; }
#joboptions>div { position:relative;}
#joboptions input,
#joboptions select
 { width:100%; box-sizing:border-box;
 background:transparent; border-color:transparent; border-bottom:1px solid #ccc; 
 padding:.4em 0; border-radius: 0;
}
#value:not([disabled]), #freq:not([disabled]), #joboptions input:not([disabled]),
#joboptions select:not([disabled])
 { color:#009; }

.controls .timer { white-space:nowrap; height:1em; text-align:left; font-size:100%; padding-left: 1em;}
.list>li.subtree .title:before {  content: ' '; background:url(/img/corner-down-right-alt.svg) no-repeat; display:inline-block; width:1em; height: 1em; vertical-align: middle; padding-right:0.5em; background-size:contain;  }
.list>li.level_2 { padding-left:0em; }
.list>li.level_3 { padding-left:2em; }
.list>li.level_4 { padding-left:3em; }
.list>li.level_5 { padding-left:4em; }
.list>li.level_6 { padding-left:5em; }
#chart_dash { padding:0em .5em; width:calc(100% - 2em);}
#chart_data { width:100%; margin:0; box-sizing:border-box;}
#chart_control { width:100%; margin:0; box-sizing:border-box; height:35px;}

#newpost .commentdiv { display:inline-block; width:calc(100% - 4em); vertical-align: top;}
#newpost #comment { width:100%; box-sizing: border-box; }

#schpickerdiv { position:relative;  }
#schpicker {width:calc(100% - 1em);}
.pickerbtn { position:absolute; right:.25em; top:.5em; }
/* form.forgoal div.forall:not(.forgoal) {visibility:hidden; position:absolute !important;} */
#showalloptions { text-transform: none; text-decoration: underline; color:#00c; cursor:pointer; padding-left:1em;}
::placeholder {color:#999;}
.sortableph>a { background:#ccc !important; }
.sortable-drag { box-shadow:0px 0px 5px 0px black !important;  }

/*
.slideout { position:absolute; top:100%; bottom:auto; left:0; right:0; overflow:hidden; z-index:3; background:#e6e6e6; padding:0; transition:top .25s linear; box-shadow:0px 0px 5px 0px black; }
.slideoutcontent { padding:.5em; position:absolute; visibility: hidden; }
.slideouttitle { background:#ccc;  font-weight:bold; padding:.25em;}
.slideout .slideoutcontent { position:relative;visibility: visible;}
*/
 
.slideout { position:absolute; overflow:hidden; z-index:3;  transition:all .25s linear; }
.slideout.open { display:block; }
.slideouttitle { background:#ccc;  font-weight:bold; padding:.25em; line-height:1.8em; white-space: nowrap; text-overflow: ellipsis;}
.slideout .svg img { width:2em; padding:0 .25em; vertical-align:middle;}
.slideoutcontent.loading { padding:1.5em; text-align: center; width:100%;}


#popup_schedule { padding:0em; font-size:20px; 
  top:1%; bottom:auto; left:auto; right:-18em; width:95%; max-width:17em; background:#fff;   box-shadow:0px 0px 5px 0px black;   }
#popup_schedule.open {   right:0; }

#popup_schedule
textarea, select, input { font-size:100%; }
#task_complete  { background:#e6e6e6; padding:0.25em 0.5em 0.5em; border-bottom:1px solid #666; overflow:hidden;}
#popup_schedule .svg img  { width:1.5em; padding-right:.5em; }
#task_complete .svg img  { padding:0;  }
#popup_schedule .list a  {  padding:0 .3em; white-space: nowrap; overflow:hidden;}



#task_complete div { display:inline-block; vertical-align: middle; box-sizing: border-box; overflow:hidden;  font-size:100%; margin-right:.5em;  line-height:2.1em;}
#task_complete #hours,
#task_complete #minutes { padding-left:0; padding-right:0; }
#task_complete #remain { padding:0; }

#task_complete #remaindiv,
#task_complete #repeatdiv { line-height:1.3em; text-transform: uppercase; color:#009; font-size:90%; }
#task_complete #reptxt { }
#task_complete #completebut { float:right; margin-right:0; font-size:95%;}
#task_complete #completebut img { width:1.5em; display:inline-block; vertical-align: middle;}
#task_complete .label {display:none;}

#task_complete #datadiv { width:20%; margin-right:0;}
#task_complete #commentdiv { width:80%; margin-right:0; }
#task_complete #commentdiv:first-child { width:100%; }
#task_complete #data,
#task_complete #comment { width:100%; box-sizing: border-box;  }


h3.hide,h3.hide+ul { display:none !important; }

offiul.list { overflow:visible !important;}
off#all > main {overflow-x:hidden;}
ul.list>li.new { opacity:1;  animation: new-item-animation 0.5s linear forwards; z-index:100 ;}
ul.list>li.new>a {  animation: new-a-animation 2.5s linear forwards; }
@keyframes new-item-animation {
    from {  opacity: 1; background:#e6e6e6;   transform: translateY(90vh); }
    to { opacity: 1;  background:auto; transform : translateY(0);  }
}
@keyframes new-a-animation {
    from {  background:#e6e6e6; }
    to {  background:#fff; }
}
ul.list>li { transition: max-height .8s ease-out; max-height:100vh; }
ul.list>li.incomplete,
oul.list>li.completed {
    animation: completed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    max-height:0;
    overflow:hidden;
  border-bottom:0;    
}
@keyframes completed-item-animation {
  0% {        transform: translateX(0);    }
  30% {       transform: translateX(50px);    }
  80% {       transform: translateX(-400px);    }
  100% {      transform: translateX(-800px);    }
}
.job .progress { background:#ddf; position:absolute; height:.25em; width:0; bottom:0; z-index:2;}
.selectcnt { font-weight:bold;color:#00f; }
#filter { font-size:60%; vertical-align: middle; display: inline-block; width:4em;}
#filterx { width:.7em; vertical-align: middle; position:relative; left:-.8em;}