HTML {
	font-family:		"Gill Sans", sans-serif;
}
::backdrop {
	opacity:		0.95;
	background:		lightgray url(./veil.png) repeat 0 0;
}
dialog {
	border-radius:		9px;
	border-width:		1px;
}

#htFileSelectHdr {
	margin:			0 0 8px 0;
}
#htFileSelect  hr {
	margin:			0 0 16px 0;
}
/*
#htFileSelect  menu {
	border-top:		1px solid darkgray;
	margin-top:		16px;
	margin-bottom:		0;
	padding-top:		16px;
	display:		flex;
	gap:			16px;
}
*/
dialog footer {
	border-top:		1px solid darkgray;
	margin-top:		16px;
	margin-bottom:		0;
	padding-top:		16px;
	display:		flex;
	gap:			16px;
}
#htFileSelectKO,
#htDialogInputKO {
	flex:			1;
}
#htFileSelectOK,
#htDialogInputOK {
	flex:			1 0 auto;
}
#htDialogEmail input {
	width:			98%;
}
dialog label {
	opacity:		0.6;
}
@media (prefers-color-scheme: dark) {
body {
	background-color:	hsl(  0,  0%, 10%);
	color:			hsl(300, 10%, 60%);
}
::backdrop {
	opacity:		0.25;
	background-color:	gray;
}
dialog {
	background-color:	hsl(275,0%,19%);
	box-shadow:		8px 8px 32px 8px HSL(328, 38%, 43%);
	color:			hsl(300, 16%, 80%);
}
input {
	background-color:	hsl(0,0%,17.5%);		/* white */
	border:			solid 1px hsl(210,5.5%,43.5%);	/* black-200 */
	border-radius:		2px;
	color:			hsl(210,8%,82.5%);		/* black-700 */
	padding:		2px 3px;
}
input:hover {
	border-color:		hsl(210,7%,61%);		/* black-400, black-300 hsl(210,6.5%,52%)*/
}
img {
	filter:		none;
}
.task-input {
	border-bottom-color:	#ccc !important;
}
.taf-menu {
	background-color:	#333 !important;
	border:			1px solid;
}
.taf-menu li:hover {
	background-color:	#555 !important;
}
.task-input input:focus,
.task-input select:focus {
  border: 2px solid #3C87FF;
	box-shadow:	0px 0px 3px 1px cornflowerblue;
}
.task-input span {
	color:			#bfbfbf;
}
.task-input select,
.task-input input {
	color:			#bfbfbf;
	background-color:	hsl(300,33%,30%);
	border-color:		#999 !important;
}
.task-input input::placeholder{
	color:			#bfbfbf;
}

.task input[type=checkbox]::after {
	background-color:	hsl(318,20%,20%);
}


a:visited,
a:hover {
/*	color:			hsl(206,90%,74%);	blue-700 */
	color:			hsl(300,25%,70%);
}
a {
/*	color:			hsl(206,100%,60%);	blue-600 */
	color:			hsl(300,33%,60%);
}

}
/*____________________________________________________________________________*/
/*____________________________________________________________________________*/
@media (prefers-color-scheme: light) {

.task-input {
	border-bottom-color:	hsl(300,10%,60%) !important;
}
.task-input select,
.task-input input {
	border-color:		hsl(300,33%,30%) !important;
}
.task-input select:focus,
.task-input input:focus {
	border-color:		#3C87FF !important;
	box-shadow:		0px 0px 3px 1px cornflowerblue !important;
}

.task input[type=checkbox]::after {
	background-color:	hsl(300,10%,60%);
	border:			1px solid #666666;
	border-radius:		20%;
}

}
/*____________________________________________________________________________*/
/*____________________________________________________________________________*/

:root {
	--Vtodo:		flex;
	--Vdone:		flex;
}
body{
	width:			100%;
	height:			100vh;
	overflow:		hidden;
	margin:			0;
	padding:		0;
}
::selection{
  color: #fff;
  background: #3C87FF;
}

.wrapper{
	padding:	16px 0 0;
	height:		100vh;
	min-width:	320px;
}

.task-input {
	display:	flex;
	padding:	0 1rem 1rem;
	gap:		1rem;
	border-bottom:	1px solid red;
}
.task-input span {
	cursor:		pointer;
	font-weight:	bold;
	font-size:	x-large;
}
.task-input select {
	font-size:	1em;
	box-sizing:	border-box;
	border:		1px solid red;
	border-radius:	5px;
}
.task-input input{
	width:		100%;
	outline:	none;
	font-size:	18px;
	border-radius:	5px;
	border:		1px solid red;
}
.task-input input:focus,
.task-input select:focus {
	border:			2px solid red;
	box-shadow:		0px 0px 3px 1px red;
}

.task-box{
	margin:			0;
	padding:		0 20px 0px 25px;
	overflow:		hidden scroll;
	scrollbar-color:	hsl(300,33%,30%)	hsl(300, 10%, 60%);
	scrollbar-width:	thin;
}
.task-box::-webkit-scrollbar {
	width:			5px;
	height:			8px;
	background-color:	hsl(300, 10%, 60%);
}
/* Add a thumb */
.task-box::-webkit-scrollbar-thumb {
	background:		hsl(300,33%,30%);
}

.taf-menu {
	position:	absolute;
	top:		0;
	left:		0;
	background:	#bbb;
	transform:	scale(0);
	transform-origin: top right;
	box-shadow:	0 0 6px rgba(0,0,0,0.5);
	transition:	transform 0.2s ease;
	list-style:	none;
	padding:	5px 0;
}
.taf-menu.show{
	transform:	scale(1);
}
.taf-menu li {
	height:		20px;
	padding:	4px 16px;
	cursor:		pointer;
}
.taf-menu li:hover {
	background:	#f5f5f5;
}
.taf-menu li.menu-separator {
	border-bottom:	1px solid;
	height:		0;
	margin:		4px 0 4px 0;
	padding:	0;
	cursor:		auto;
}
.taf-menu li.disabled {
	color:		dimgray;
	pointer-events:	none;
}
.taf-menu li > img {
	width:		16px;
}
#htApp-export {
	display:	none;
}

nav.settings {
	cursor:		pointer;
	width:		1em;
}
nav.settings i {
	font-style:	initial;
	font-weight:	1000;
	font-size:	large;
	display:	block;
	text-align:	end;
}
i.fa {
	text-align:	center;
	width:		1em;
}

.task-box .task{
	list-style:		none;
	border-bottom:		1px solid #ccc;
	padding:		.5em 0;
	align-items:		baseline;
	justify-content:	space-between;
}
.task-box .task:last-child{
	margin-bottom:		0;
	border-bottom:		0;
	padding-bottom:		0;
}

.task.todo {
	display:		var(--Vtodo);
}
.task.done {
	display:		var(--Vdone);
}

.task input[type=checkbox] { 
	cursor:			pointer;
	appearance:		none;
	outline:		0;
	border-radius:		20%;
}
/* Unicode \00A0 No-Break Space   */
.task input[type=checkbox]::after {
	display:		block;
	line-height:		1.5em;
	content:		"\00A0";
	min-width:		1.5em;
	height:			1.5em;
}
/* Unicode \2713 Check-Mark ✓ */
.task input[type=checkbox]:checked::after {
	content:		"\2713";
	color:			chartreuse;
	font-weight:		900;
	text-align:		center;
}

.task div {
	user-select:		none;
	padding:		0 1em 0;
	word-wrap:		break-word;
	width:			-webkit-fill-available;
	width:			-moz-available;
}
.task.done div {
	text-decoration:	line-through;
	opacity:		.8;
}

.task span.ht-remind {
	background-color:	darkgreen;
}
.task span.ht-remind::before {
	content:		"\23f0";
}
.task span.ht-passed {
	opacity:		0.7;
}

.task-box .task:last-child {
  bottom: 0;
  transform-origin: bottom right;
}
.task-box .task:first-child {
  bottom: -65px;
  transform-origin: top right;
}

/* Drag'n drop item */
.task.drop-hint {
/*
	border:			1px solid #ffc49a;
	background:		#feffb4;
*/
}
.task.drop-allow {
	border-top:		1px solid #ffa5a5;
/*
	background:		#ffe7e7;
*/
}

@media (max-width: 400px) {

  .task-box{
    margin-right: 5px;
    padding: 0 15px 10px 20px;
  }
  .task label input{
    margin-top: 4px;
  }
}

@media (orientation: landscape) {
/*
.task-input img {
	top:		33%;
}
*/
.task-input select {
	display:	flex;
}
/*
nav.controls {
	display:	none;
}
*/
.task-box{
	height:		calc(100vh - 66px);
}
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
.task-box{
/*
	height:		calc(100vh - 160px);
*/
	height:		calc(100vh - 96px);
}

}