/* Additions to TodoMVC's stylesheets for this server-rendered version. */

/* Forms only group fields; they take no space of their own, so the
   TodoMVC layout is unchanged. */
.todoapp form {
	display: contents;
}

/* Without JavaScript, each checkbox is covered by a transparent submit
   button, and each item gets an Edit link. With JavaScript (html.js),
   they're hidden and the page is exactly TodoMVC's. */
.nojs-toggle-all,
.todo-list li .nojs-toggle {
	position: absolute;
	z-index: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0;
	color: transparent;
	cursor: pointer;
}

.nojs-toggle-all {
	top: -65px;
	left: 0;
	width: 45px;
	height: 65px;
}

.todo-list li .nojs-toggle {
	top: 0;
	bottom: 0;
	left: 0;
	width: 60px;
}

.nojs-toggle-all:focus-visible,
.todo-list li .nojs-toggle:focus-visible {
	outline: 1px solid #CF7D7D;
}

.todo-list li .nojs-edit {
	position: absolute;
	top: 0;
	right: 60px;
	bottom: 0;
	height: 20px;
	margin: auto 0;
	font-size: 14px;
	line-height: 20px;
	color: #949494;
	text-decoration: none;
}

.todo-list li .nojs-edit:hover,
.todo-list li .nojs-edit:focus {
	color: #484848;
	text-decoration: underline;
}

html:not(.js) .todo-list li label {
	padding-right: 110px;
}

.js .nojs-toggle-all,
.js .todo-list li .nojs-toggle,
.js .todo-list li .nojs-edit {
	display: none;
}