#arrange-main table {
	border-spacing: 0;
	border-right: 1px solid #444;
	-webkit-user-select: none;
	user-select: none;
}

#arrange-main td {
	border-bottom: 1px solid #444;
	border-left: 1px solid #444;
	width: 20px;
	min-width: 20px;
	max-width: 20px;
	height: 20px;
	position: relative;
	box-sizing: border-box;
}

#arrange-main .arrange-header {
	color: #444;
	overflow: visible;
}

#arrange-main .arrange-header:last-child {
	overflow: hidden;
}

#arrange-main .arrange-header.play-start-point {
	background-image: radial-gradient(circle, #eee 0%, #eee 10%, #444 20%, transparent 35%);
}

#arrange-main .arrange-header.loop-start-point {
	box-shadow: inset 2px 0 0 0 #ccc;
}

#arrange-main .arrange-header.loop-end-point {
	box-shadow: inset -2px 0 0 0 #ccc;
}

#arrange-main .arrange-header.loop-start-point.loop-end-point {
	box-shadow: inset 2px 0 0 0 #ccc, inset -2px 0 0 0 #ccc;
}

#arrange-main td:first-child {
	min-width: 59px;
	max-width: 59px;
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	background-color: #111;
	border-right: 1px solid #444;
	border-left: 1px solid #444;
	z-index: 1;
	font-size: 0.75rem;
	overflow: hidden;
	white-space: nowrap;
}

#arrange-main tr:first-child td {
	border-left: none;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: #111;
	z-index: 1;
	font-size: 1rem;
	counter-increment: numbers;
}

#arrange-main tr:first-child td:first-child {
	border-left: 1px solid #444;
	z-index: 3;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='70' width='230'><path d='M 10,10 60,60 110,10 M 130,60 180,10 230,60' style='fill:rgb(105,105,105);stroke:none'/></svg>");
	background-position: center left 0.5em;
	background-repeat: no-repeat;
	background-size: auto 35%;
	counter-reset: numbers -1;
}

#arrange-main tr td:nth-child(4n+2) {
	border-left: 1px solid #6a6a6a;
}

#arrange-main tr:first-child td:nth-child(4n+2) {
	z-index: 2;
}

#arrange-main tr:first-child td:nth-child(4n+2):before {
	content: counter(numbers);
	pointer-events: none;
}

#arrange-main tr:nth-child(4n+5) td {
	border-bottom: 1px solid #6a6a6a;
}

#arrange-main td.non-free-cell {
	background-color: #322;
}

#arrange-main td.js-fill-head {
	background-color: #eee;
	box-shadow: inset 0 0 0 1px #111;
}

#arrange-main td.js-fill-tail {
	background-color: #eee;
	box-shadow: inset 0 0 0 1px #111, inset 21px 0px 0 0 rgba(0, 0, 0, 0.39);
}

#arrange-main td.current-pattern-mark {
	box-shadow: inset -19px 0 #444;
}