@font-face {
	font-family: "Jetbrains Mono";
	src: url("/assets/JetBrainsMono-Regular.woff2") format("woff2"),
	url("/assets/JetBrainsMono-Regular.ttf")   format("truetype");
}
body {
	margin: 2em;
	background-color: #FAFAFA;
	color: #424242;
	text-align: center;
}
::selection, ::-moz-selection {
	background-color: #43A047;
	color: white;
}
body, input, button {
	font-family: helvetica, arial, sans-serif;
	font-size: 18px;
}
main {
	display: block; /* IE */
	margin: auto;
	margin-top: 50px;
	width: 100%;
	max-width: 400px;
}
#popup-blocked::warning, #popup-warning *::selection, #popup-warning::-moz-selection, #popup-warning *::-moz-selection {
	background-color: #F57F17;
}
#popup-type {
	margin: auto;
}
#popup-type td {
	width: 50vw;
	color: #9E9E9E;
	border-bottom: 1px solid #9E9E9E;
	padding-top: 1px;
	padding-bottom: 5px;
	user-select: none;
}
#popup-type td:not(.selected):hover {
	padding-top: 0;
	color: #424242;
	border-bottom: 2px solid #424242;
	cursor: pointer;
}
#popup-type td.selected {
	padding-top: 0;
	color: #43A047;
	border-bottom: 2px solid #43A047;
}
#input-common, #input-timer {
	display: none;
}
input {
	background-color: white;
	border: none;
	outline: none;
	border-bottom: 1px solid #9E9E9E;
	transition-duration: 0.2s;
}
input:focus {
	border-bottom: 1px solid #43A047;
}
input:invalid {
	border-bottom: 1px solid #E53935;
	background-color: #FFCDD2;
	outline: none;
	box-shadow: none;
}
input[type=checkbox] {
	accent-color: #43A047;
}
#time-input-container {
	display: flex;
}
.time-input {
	width: 33%;
	text-align: right;
	flex: 1;
	min-width: 0; /* SeaMonkey */
}
#create {
	width: 100%;
	background-color: #43A047;
	color: white;
	padding: 10px;
	border: none;
	outline: none;
	transition-duration: 0.2s;
	cursor: default;
}
#create:not(:disabled):hover {
	cursor: pointer;
	box-shadow: 2px 2px 2px #BDBDBD;
}
#create:active {
	background-color: #2E7D32;
}
#create:disabled {
	background-color: #9E9E9E;
}
#bookmark {
	font-size: 15px;
	margin-top: 10px;
	color: inherit;
	display: inline-block;
	text-decoration: inherit;
	cursor: default;
	border: none;
	outline: none;
	cursor: pointer;
}
#bookmark:not(.disabled):hover #bookmark-label {
	text-decoration: underline;
}
#link {
	display: none;
	background-color: #E0E0E0;
	padding: 3px;
	font-family: "Jetbrains Mono", monospace;
	font-size: 12px;
	cursor: pointer;
	word-break: break-all;
}
#welcome {
	background-color: #EEE;
	font-size: 12px;
	padding: 24px;
	border-radius: 4px;
	text-align: left;
	line-height: 1.4;
	margin-top: 50px;
}
#welcome > h5 {
	font-size: 14px;
	text-align: center;
	font-weight: normal;
	margin-bottom: 14px;
	margin-top: 0;
}
#pip {
	display: none;
	font-size: 14px;
	margin-top: 60px;
}
#advanced {
	font-size: 14px;
	display: none;
	margin-top: 40px;
}
#advanced summary {
	cursor: pointer;
	color: #757575;
	transition: color 200ms;
}
#advanced summary:hover {
	color: black;
}
.desc {
	margin: 8px 0;
	color: #757575;
	font-size: 12px;
}