@import url(https://fonts.bunny.net/css?family=open-sans:400);
:root {
	--pageurlbk : #e0ffcd;
	--settingslabels: #b45c2f;
	--settingsbk:	#e2e2dd;
	--menutext: 	#a8a7a7;
	--main: 		#111111;
	--bkgrd:		#ffffff;
	--hover: 		#000000;
	--settings:		#dfd7c9;
	--tr: 			#aaaaaa;
	--tbak: 		#bbbbbb;
	--previewbk: 	#dbebc8;
  	--tag:			#edd480;
	--notags:		#e6905a;
	--templates:	#bababa;
	--allnotes:		#96db71;
	--taskstatus0:	#ed8134;
	--taskstatus1:	#609d55;
	--taskstatus2:	#c0c0ff;
}

@media (prefers-color-scheme: dark) {
	:root {
	--pageurlbk : #345a1f;
	--settingslabels: #a1542d;
	--settingsbk:	none;
	--menutext: 	#b3b3b3;
	--main: 		#8d8d8d;
	--bkgrd:		#000000;
	--hover: 		#FFFFFF;
	--settings:		#bbbbbb;
	}
}
 
*,html,body { font-family: 'Open Sans',Arial,sans-serif; color: var(--main); box-sizing:border-box;}
body {  background-color: var(--bkgrd); }

input, textarea { border:none; background-color: inherit; outline: none; touch-action: none;}
a:hover, nav #menu li a:hover {color: var(--hover);}
nav ul img {vertical-align: middle;}

table { border: 1px solid var(--tr);}
table th, table td { padding: 3px 10px;}
table thead { font-weight: 700; text-align: left; background-color: var(--tbak); }
table tbody tr { border-bottom: 2px dotted var(--tr);}

blockquote {margin-top: 10px; margin-bottom: 10px;  margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc; }

blockquote p {  font-family: 'literata',Arial,sans-serif;}


textarea { field-sizing: content;}
.container { max-width: 1200px; margin: 0 auto; padding: 0px 20px; font-size:1.1em;}
.content { clear: both;   margin-bottom: 30px;}
article textarea { width:100%; min-height: 400px;  }

header h1 { margin-top: 0px;}
header p { font-size: 1.25em; margin: 0;}
article h1 { margin-bottom:0px; }
article h1, article h2, article h3, article h4 { font-family: 'Open Sans',Arial,sans-serif;}
article h5 { font-size: 70%; font-weight: 400; margin: 0px;}
article code, article pre { background-color: #eee; font-size: 0.9em;}
article pre { padding: 10px;}
article a { text-decoration: none; border-bottom: 1px dashed; color: inherit;}
article #dates { font-size: 0.7em;}
article #dates span { margin-right:20px;}

#demo_banner { background-color: #f4e089; padding: 2px 5px; border-radius: 0px 0px 10px 10px; border:1px solid #ccc;}
#demo_banner p { padding: 0px; margin:0px; text-align: center;}
#article_content { margin-top: 0px;}
#article_content .guide { margin: 5px; font-size: 0.8em; color: var(--menutext);}
#article_content .guide a {  color: var(--menutext); border-bottom: 1px dotted;}
#article_content img { max-width: 100%;}

nav .row ul { padding: 0px;}
nav .row ul li { display: inline-block;margin-right: 10px;}
nav img:hover {cursor: pointer;}
nav #_template { font-size: 80%;}
nav .tmpl_picker { display: none;}
nav .bttn_right { float:right;}

.content #bar { height: 24px; border-bottom: 1px solid #999; font-size: 0.8em;}
.content #menu { float:right;}
.content #menu ul { margin: 0;}
.content #menu li { display: inline-block; padding: 3px 10px; color: var(--menutext);}
.content #menu li a { color: var(--menutext); border-bottom: none; text-decoration: none;}
.content #menu li a:hover { color: var(--hover); }
.content #menu label { color: var(--menutext);}
.content #menu input[type="checkbox"] { accent-color: var(--allnotes);}


input[type=text],input[type=password],input[type=email] { width: 100%;}

#settings { display: none;  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;}
#settings #pageurl { background-color: var(--pageurlbk); font-size: 85%;
	padding: 5px 10px; border-radius: 10px; margin-bottom: 10px; text-align:center;}

#settings  { padding: 10px 20px; border-radius: 10px; margin-bottom: 40px;}

#settings h5 { margin: 0px 0px 0px 0px; font-size: 1.2rem; color: var(--settingslabels); font-weight: 400;}
#settings .smaller {font-size: 80%; color: grey; margin: 0px; padding:0px;}
#settings p { margin: 0px; font-size: 0.8em; }
#settings input { margin-top: 10px;border-bottom: 1px dashed grey;}

#settings .settingsfield { margin-right: 20px;}
#settings .pwdbttn { font-size: 80%;}

label { display: inline-block; margin-bottom:0; font-weight: inherit;}

#editor { padding: 10px;}

#preview { display:none; background-color: var(--previewbk); border: 2px solid; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding: 5px; border-radius: 10px;}
#preview #title { text-align: center; background-color: var(--pageurlbk );}
#preview #title a { float: right; border-bottom: none;border: 1px solid; padding:0px 20px; background-color: #d7d3d3; }

#warn { display:none;  background-color: #f5a259; padding: 1px 5px; border-radius: 5px; color: white;}
#warn_del { display:none;  background-color: #f55959; padding: 1px 5px; border-radius: 5px; color: white;}

article .note_tag, #tag-cloud .note_tag, #dashboard .note_tag { 
  --s: 10px;
  line-height: 1.5;
  padding-inline: .2em calc(var(--s) + .2em);
  clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%);
  background-color: var(--tag);
  width: fit-content;
  border-radius: 5px;
  margin-right: 10px;
}

article .note_tag {
  	font-size: 0.8em;
}

#tag-cloud li .notags, #dashboard .notags {
  	background-color: var(--notags);
}

#tag-cloud li .templates, #dashboard .tempaltes {
  	background-color: var(--templates);
}

#tag-cloud li .allnotes {
  	background-color: var(--allnotes);
}

#tag-cloud li {
	display: inline-block;
	line-height: 2.5em;
	margin-right: 20px;
}

#tag-cloud li a { text-decoration: none;}

#tag-cloud .tag_count { color: #777; font-size:0.70em;}

article .note_tag a { border-bottom: none;}

article .task {
	font-size: 0.8em;
	padding: 2px 6px;
	border-radius: 5px;
    margin-right: 5px;
	cursor:alias;
}

article .task-desc { margin-left: 5px;}

article .task-status0 { background-color: var(--taskstatus0);}
article .task-status1 { background-color: var(--taskstatus1);}
article .task-status2 { background-color: var(--taskstatus2);}
article .task_change { display: none; font-size: 80%; border: 1px dotted #999; border-radius: 5px;}
article .task_change span { margin: 0px 10px; padding: 0px 2px; cursor: pointer;}

#dashboard { margin-top:0px;}
#dashboard hr { margin-top:50px; margin-bottom: 20px; }
#dashboard #logo {text-align: center;  margin-bottom:40px;}
#dashboard #srch { border:1px solid #999; padding: 10px 20px; font-size:1.25em; border-radius: 10px;}
#dashboard .note_tag  a {text-decoration: none;}
#dashboard #article-list ul {list-style-type: none; }
#dashboard #article-list a {text-decoration: none;}
#dashboard #article-list a:hover { color: var(--notags);}
#dashboard #ordering p { color: var(--menutext); font-size: 0.8em; margin-left: 20px;}
#dashboard #ordering a { color: var(--menutext); text-decoration: none;}
#dashboard #ordering .currentOrder { font-weight: 600; color: var(--allnotes);}
#dashboard #search p { margin:0px; padding: 0px;}
#dashboard #search #fts { margin-left: 20px; font-size:0.8em;}

#dashboard .task-status0 { color: var(--taskstatus0);}
#dashboard .task-status1 { color: var(--taskstatus1);}
#dashboard .task-status2 { color: var(--taskstatus2);}

#dashboard #task-list li { list-style-type: none; }
#dashboard #task-list .note { font-family: 'literata',Arial,sans-serif; margin-top:20px;}
#dashboard #task-list .note .date,
#article-list .date  { font-size: 0.7em; color: var(--menutext); margin-left: 10px;}
#dashboard #task-list .task { margin-left: 20px;}
#dashboard #task-list .task-marker { width: 20px; display: inline-block;}
#dashboard #legend { font-size: 0.7em; }
#dashboard #legend p { margin-top:0px;}

#dashboard #legend ul { margin: 0px; padding: 0px; display: inline-block;}
#dashboard #legend li { margin: 0px; display: inline-block;}
#dashboard #legend li { margin-right: 20px;}

#dashboard #legend
#dashboard .tl_head { margin: 0px;}



#dashboard #login { margin-top:50px; text-align: center;}
#dashboard #login input { border: 1px solid #999; border-radius: 5px; width:200px; padding: 10px;}
.error { border: 5px solid #f55959; text-align: center; font-size:110%;}

@media screen and (max-width: 400px) {
	#settings { font-size: 70%;}	
	#settings h5 { font-size: 0.8rem;}
	#menu ul { margin:0px;}
}


@media screen and (max-width: 600px) {
	#settings .settingsfield { width: 100%;}	
}