body {
	background-color: #e6e6ff;
	/* rgb(230, 230, 255) */
	/* hsl(240, 100%, 95%) */
}

button {
	height: 1.8em;
	margin: auto;
}
pre {
	padding: 0;
	margin: 0;
}
div#attendance {
	font-family: monospace;
	padding: 0.8em;
	font-size: 0.9em;
	color: black;
	background-color: hsl(240, 100%, 92%);
	border: 1px solid hsl(240, 100%, 80%);
	display: inline-block;
	white-space: pre;
	width: auto;
}

table#att_list {
	border-collapse: collapse;
}

table#att_list td:first-child {
	padding-right: 1em;
}

table#att_list td:nth-child(2) {
	position: sticky;
	left: 30%;
}

table#att_list tr {
	display: flex;
	line-height: 2em;
}

table#att_list td {
	display: flex;
	margin: auto;
	margin-left: 0.1em;
	margin-right: 0.1em;
}

table#att_list td.bold {
	font-weight: bold;
}

tr td.roundbutt button {
	border-radius: 100%;
	border-width: 0.2em;
	border-style: outset;
	width: 1.8em;
	margin: auto;
	margin-left: 0.1em;
	margin-right: 0.1em;
}

tr td.change button {
}

button.comment {
}

tr td.roundbutt button.pressed {
	border-style: inset !important;
}

button.y {
	background-color: hsl(136, 20%, 80%);
	border-color: hsl(136, 20%, 80%);
	/* rgb(153, 255, 180) */
	/* hsl(136, 100%, 80%) */
}

button.y.pressed {
	background-color: hsl(136, 100%, 80%);
}

button.n {
	background-color: hsl(0, 20%, 80%);
	border-color: hsl(0, 20%, 80%);
	/* rgb(255, 153, 153) */
	/* hsl(0, 100%, 80%) */
}

button.n.pressed {
	background-color: hsl(0, 100%, 70%);
}

button.m {
	background-color: hsl(60, 20%, 80%);
	border-color: hsl(60, 20%, 80%);
	/* rgb(255, 255, 153) */
	/* hsl(60, 100%, 80%) */
}

button.m.pressed {
	background-color: hsl(60, 100%, 70%);
	/* rgb(255, 255, 153) */
	/* hsl(60, 100%, 80%) */
}