html, body {
	font-family: verdana, sans-serif;
	-webkit-font-smoothing: antialiased;
	width:100%;
	height:100%;
}

@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+Mono+TC&display=swap');

.maintViewLogo {
	font-family: "LXGW WenKai Mono TC", "Courier New", Courier, monospace;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.1rem;
	/* color:gray; */
	color:#C2B280;  /* sand */
}

/* DARK MODE / THEME, see senseTheme() */

.dark-mode {
	color:#CCC !important;
	background: #111 !important;
}

.dark-mode input, .dark-mode textarea, .dark-mode select {
	color:white;
	background-color:black;
}

.dark-mode input::placeholder {
	color: #888;
}

.dark-mode .form-control:focus {
	color:white;
	background-color:black;
}

/* JUMP to TOP button, see topBtnHandler() */

.topBtn {
	clip-path: polygon(50% 0%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);  /* up arrow */
	position: sticky;
  bottom: 1rem;
  right: 1rem;
	float:right;
  z-index: 99;
	background-color: #888;
	border:0;
  cursor: pointer;
	width:2em;
	height:2em;
  display: none;
}
.topBtn:hover {
	background-color: black;
}
.dark-mode .topBtn:hover {
	background-color: white;
}


/* CUSTOM CHECKBOXES */

input[type="checkbox"] {    /* the box */
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	width: 1em;
	height: 1em;
	border: 0.08em solid #111;
	border-radius: 0.15em;
	/* transform: translateY(-0.075em); */
	transform: translateY(-0.175em);
	display: inline-grid;
	place-content: center;
	vertical-align:middle;
}

.dark-mode input[type="checkbox"] {
	border: 0.08em solid #CCC;
}

input[type="checkbox"]::before {  /* the check */
	background-color:black;
	content: "";
	width: 0.65em;
	height: 0.65em;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); /* checkmark */
	transform: scale(0);
	transform-origin: bottom left;
	transition: 60ms transform ease-in-out;
	/* box-shadow: inset 1em 1em var(--form-control-color); */
}

.dark-mode input[type="checkbox"]::before {
	background-color:white;
}

input.notset::before {  /* the check */
	clip-path: polygon(0% 36.79%, 0% 65%, 100% 65%, 100% 36.79%); /* indeterminate */
	/* clip-path: polygon(0% 100%, 100% 100%, 100% 0%); */
	background-color:#888 !important;
}

input[type="checkbox"]:checked::before {
	transform: scale(1);
}

input[type="checkbox"]:focus {
	outline: 1px solid currentColor;
	outline-offset: 1px;
}

input[type="checkbox"]:disabled {
	cursor: not-allowed;
}

.warn {
	color:red;
}

.dark-mode .warn {
	color:#F66;
}


.waiting {
	position:absolute;
	z-index:200;
	top:calc(50vh - 4em);
	left:calc(50vw - 4em);
	opacity:0.5;
}
.waiting img {
	height:8em;
}


/* DEBUG */

.debug {
	background-color:#222;
	outline:1px solid blue;
	border-radius:12px;
	margin:1em;
	padding:0.4em 1em 1em 1em;
	/* overflow-x:auto; */
	text-align:left;
	max-width: 50%;
	max-height:80%;
	font-size:smaller;
	overflow-y: scroll;
	resize: both;
}

.debug .title {
	float:right;
	position:sticky;
	top:0;
	background-color:inherit;
}

.debug .bubble {
	position: relative;
	top: -15px;
	left: 4px;
	background-color: #000;
	border: 1px solid blue;
	border-radius: 10px;
	padding: 0 5px 3px 5px;
	display: inline;
}

.debug .func {
	font-family:"Courier New", monospace;
}
.debug .file, .debug .line {
	font-size:smaller;
}
.debug .line {
	font-weight:bold;
	font-style:italic;
	/* margin-left:1em; */
}

.debug .val {
	font-family: monospace;
	font-size:90%;
	white-space: pre;
	margin-left:1em;
}

.left {text-align:left}
.center {text-align:center}
.right {text-align:right}


[contenteditable="true"]:active,
[contenteditable="true"]:focus {
  /* border:none; */
  outline:1px solid #888;
	border-radius:4px;
}
/* [contenteditable="true"]:hover::before,
[contenteditable="true"]:focus::before{
content:"Edit Me!";
} */