body { color: #222; margin: 0px; padding: 25px; background: #f4d6ae; }
.list { margin-bottom: 20px; }
.title { font-size: 1.2em; font-weight: bold; cursor: pointer; background: #e3c59d; padding: 5px 10px; border-radius: 10px; margin: 0px 5px; }
.list-item { padding: 10px; margin: 0px 5px; font-size: 1.1em; border-bottom: 1px solid #d2b48c; cursor:default; overflow:hidden; white-space:nowrap; }
.list-item div {overflow: hidden; }
.icon { cursor: pointer; font-size: 1.5em; padding: 0px 2px; margin: 0px 3px; color: #666 }
input, select { background:#f3dec3; border-radius: 5px; border: 1px solid #a76f26;}
.indent {margin-left: 50px;}
.check-circle-icon { color: #090; }
.cancel-icon { color: #900; }

/* input:valid { background:#900} */

.info {background:#d2b48c; border-radius: 25px; border: 2px solid #a76f26; padding: 25px; position: fixed; margin:25px; top: 0px; left: 0px; max-width: 700px; }

@media (min-width: 576px) {
    .indent { margin: 0px; }
}
/* 
.next-title { cursor: default; }
.filter-title { font-weight: bold; }
.list-items, .filter-items { display: none }
.next-item { display: block; }
#suspended-items .list-item, #inactive-items .list-item { opacity: 0.33;  }
#done-items, .item-done { opacity: 0.66; }
.list-item, .calendar-item { padding: 10px; margin: 0px 5px; font-size: 1.1em; border-bottom: 1px solid #d2b48c; cursor:default; overflow:hidden; white-space:nowrap; }
.task { overflow: hidden; }
.filter-container .icon { margin-top: 5px; padding: 5px; }
.filter-items { margin: 0px 10px; }
.icon { cursor: pointer; font-size: 1.5em; padding: 0px 2px; margin: 0px 3px }
.expand-icon, .controls-expand, .newcount { float: right; }
#filter-controls .icon { padding: 5px; margin: 5px;  }
.newcount { margin: 0px 10px; }
.list-context, .list-project { border-radius: 10px; background: #bbb; padding: 3px 10px; text-align: center; overflow: hidden; }

.edit-popup { position: fixed; width: 50%; top: 100px; left: 100px; background: #f4d6ae; padding: 25px; border-radius: 25px; border: 2px solid #000; display: none; }
.edit-popup .label { width: 20%; text-align: right; display: inline-block; }
.edit-popup .label:after { content: ":"; padding-right: 5px;}
input, select { margin: 0px 5px; background: #ddd; max-width: 60%; margin: 5px 10px;   }
button { margin: 15px; float: right; background: #e3c59d; }
.edit-popup [name="Task"] { width: 100%; }
.edit-popup [name="Recurrence"] { width: 50px; }
.popup-close-icon { position: absolute; width: fit-content; height: fit-content; top: 25px; right: 25px;     }


.calendar-item { width: 80%; background: inherit; border-top: solid #666 1px; position: absolute;}
.now { border-top: #000 solid 3px; height: 2px; width: 80%; background: none; position: absolute;  }
.last { border-bottom: solid #666 1px; }
.donecontainer, .activecontainer { margin: 0px 25px; }
.list-icon { border: none; position: absolute; top: 25px; right: 25px; width: fit-content;}
.dateheader { width: fit-content; background: #e3c59d; border-radius: 15px; border: 2px solid #666; padding: 10px 25px; position: relative; z-index: 200; font-weight: bold; font-size: 1.2em; }
 */