body, input, textarea {
    font-family: monospace, sans-serif;
    font-weight: 300;
    font-size: 14px;
    margin: 0;
    padding: 0;
}
.app{
    min-height: 100vh;
}
.noselect, header, button, input{
	-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button{
	margin: 4px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
button:not([disabled]){
	cursor: pointer;
}
button.btnAddTask{
	font-size: 16px;
	margin: 0;
	display: block;
	width: 100%;
	min-width: 242px;
}
header{
	display: flex;
	gap:24px;
	padding: 0 24px;
	align-items: center;
/*	justify-content: center;*/
	/*position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid rgba(127,127,127,1);*/
}
header button{
	font-size: 18px;
	padding: 8px 16px;
}
h3{
	font-size: 36px;
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}	
.hidden{
	display: none !important;
}
img{
	max-width: 100%;
	height: auto;
}

.group{
	border: 1px solid rgba(127,127,127,0.2);
	padding: 24px;
	margin: 24px;
	box-shadow: 0 10px 24px -12px rgba(127,127,127, 0.25);
}

.notes {
	display: none;
    background: rgba(127,127,127,0.2);
    padding: 12px;
    width: 330px;
}
.notes, .notes input {
    font-size: 12px;
    line-height: 1;
    padding: 4px;
}
.notes ul,
.notes li{
	margin: 0;
	padding: 0;
	list-style: none;
}
.notes.active{
	display: block;
}
.notes .note-list button{
	opacity: 0.5;
	border: none;
}
.notes .note-list li:hover button{
	opacity: 1 !important;
}
.task{
	padding: 12px 0px;
}
.task-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 0 ;
    margin: 0 ;
}
.task-list li.task{
	border-top: 1px dashed rgba(127,127,127,0.5);
}
/*.task-list > .task:not(:last-child),*/
.task-list > .task{
	border-top: 1px dashed rgba(127,127,127,1);
}
.task-details{
	font-weight: bold;
	font-size: 16px;
}

.task-display {
    display: flex;
    width: 100%;
    gap: 24px;
    flex-wrap: nowrap;
    flex-direction: row;
}
.task-display .task-all {
    flex: 1;
}
.task-display .task-all button{
	background:none;
	border: 1px solid rgba(127,127,127,1);
	border-radius: 4px;
/*	padding: 0;*/
/*	margin: 0;*/
}
.task-display .btnAddSubTask{
	margin-left: 100px;
	border:1px solid #ededed;
	padding: 4px 8px 4px 4px;
	border-radius: 4px;
}
.task-display .btnAddSubTask:hover{
	background-color: #ccc !important;
}
.btnToggleNotes{
	font-size: 16px;
	border: none !important;;;
	border-radius: 4px;
}
.text-nowrap{
	white-space: nowrap;
}
.task-top,
.task-wrap, 
.note-heading,
.sub-tasks > li {
	gap: 4px;
	align-items: center;
    display: flex;
    flex-direction: row;

}

.task-wrap{
    justify-content: space-between;	
}

.note-heading input{
	flex: 1;
}
.note-item{
	padding: 4px;
	
}
.note-item h4{
	margin: 0;
}

.task-all input[type="checkbox"]{
	display: inline-block;
	margin-right: 14px;
}
.sub-tasks{
	margin: 0;
	padding: 0;
}
.sub-tasks > li{
	min-height: 26px;
	flex-wrap: nowrap;
	background-color: transparent;
	transition: background-color 0.2s;
}
.sub-tasks > li:hover{
	background-color: rgba(127,127,127,0.2);
}
.sub-tasks > li button{
	opacity: 0.5;
}
.sub-tasks > li:hover button{
	opacity: 1
}

.sub-tasks .child-icon{
	margin: 0 6px;
}
.sub-tasks .spacer{
	width: 100px;
}
.sub-tasks .edit-task{
	position: relative;
	padding-left: 71px;
}
.sub-tasks .edit-task input{
	position: absolute;
    left: 128px;
    top: -8px;
    background: #fec;
    border: none;
    border-bottom: 1px solid #ca8;
    outline: none;
    box-shadow: none;
    width: calc(100vw - 250px);
}
.sub-tasks > li:has(.edit-task){
	background-color: #fec !important
}


.note-list{
	padding: 4px 0 8px;
}
.note-list li:has(button) button{
	opacity: 0;
}
/*.note-list li:first-child{
	margin-top: 12px;
}*/
.note-list li:has(button):hover button{
	opacity: 1;
}
.image-list{
	list-style: none;
	margin: 4px 0 0 !important;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.image-list li{
	list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc((100% / 3) - 9px);
    gap: 10px;
}
.image-list li button{
	position: absolute;
	bottom: 2px;
	right: 2px;
	bakground:#fff;
	opacity: 0 !important;
	border: 1px solid rgba(127, 127, 127, 1.0) !important;
}
.image-list li:hover button{
	opacity: 1 !important;
}

.image-list img{
	background: rgba(127,127,127,1);
	display: inline-block;
	aspect-ratio: 1/1;
	object-fit: contain;
	border: 1px solid rgba(0,0,0,0.1);
}





.mode-switch{
	display: block;
	position: fixed;
	z-index: 2;
	top: 24px;
	right: 24px;
	font-size: 20px;
}
.mode-switch label{
	cursor: pointer;
}
a{
	color: currentColor;
}

/* Light mode styles */
.light-mode {
  background-color: #fff;
  color: #212121;
}

/* Dark mode styles */
.dark-mode,
.dark-mode header {
  background-color: #212121;
  color: #fff;
}
.dark-mode .task-display .task-all button{
	color: #fff;
}

span[data-rbd-drag-handle-draggable-id]{
	display: none;
	cursor: grab;
}
span[data-rbd-drag-handle-draggable-id]:active{
	cursor: grabbing;
}


.noshow{
	opacity: 0;
	width: 0;
	height: 0;
	display: inline-block;
	float: left;
}