/** Stylesheet for the puzzles */
.line-number {
	float: right !important;
	font-size: 50%;
}
.sortable-code {
	position: static;
	padding-left: 0px;
	/*margin-left: 2%;*/
	float: left;
}
#sortableTrash {
	width: 38%;
}
#sortable {
	width: 56%;
}
.starter {
	width: 40%;
}
.solution {
	width: 58%;
	margin-left: 2%;
}
.sortable-code ul {
	font-size: 120%;
	font-family: monospace;
	list-style: none;
	background-color: #efefff;
	padding-bottom: 40px;
	padding-left: 0;
	margin-left: 0;
	border: 1px solid #efefff;
}
.sortable-code ul:empty {
	padding-bottom: 80px;
}
.sortable-code li,
.sortable-code li:before,
.sortable-code li:after {
	box-sizing: content-box;
}
ul.output {
	background-color: #ffa;
}
.sortable-code li {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color: #efefef;
	border: 1px solid lightgray;
	padding: 2px;
	/* Keep difference of 10 to respect padding specified just above */
	padding-left: 30px;
	text-indent: -20px;
	margin-top: 5px;
	overflow: hidden;
	cursor: move;
}
.sortable-code li span::before {
	content: '\200b';
}
.sortable-code li:hover {
	overflow: visible;
}

ul.incorrect {
	/* border: 1px solid red;
    background-color: #ffefef; */
	border: 1px solid yellow;
	background-color: #ffff66;
}

ul.correct {
	background-color: #efffef;
	background-color: #dff2bf;
}

li.incorrectIndent {
	/* border: 1px solid red;
    border-left: 10px solid red; */
	border: 1px solid yellow;
	background-color: #ffff66;
}

li.correctIndent {
	border: 1px solid green;
	border-left: 10px solid green;
}

li.incorrectPosition,
.testcase.fail,
.testcase.error {
	/* background-color: #FFBABA;
    border:1px solid red;
    */
	border: 1px solid yellow;
	background-color: #ffff66;
}

li.correctPosition,
.testcase.pass {
	background-color: #dff2bf;
	border: 1px solid green;
}

.red_error {
	border: 1px solid red;
	background-color: red;
	color: white;
	font-weight: bold;
}

.card,
.testcase:not(:last-child) {
	margin-bottom: 10px;
}
.testcase .msg {
	font-weight: bold;
	padding: 12px;
	display: block;
}
.testcase pre {
	padding: 12px;
	margin-bottom: 0;
}
.testcase .error {
	color: red;
}
.testcase .feedback {
	font-weight: bolder;
}
.testcase .fail .expected,
.testcase .fail .actual {
	color: red;
	font-weight: bolder;
}
.testcase .output {
	display: block;
	white-space: pre;
	background-color: #555555;
	color: white;
	font-size: 12px;
	line-height: 15px;
	margin: 5px;
	padding: 5px;
}
/** For styling the toggleable elements */
.jsparson-toggle {
	padding: 0 15px;
	display: inline-block;
	border: 1px dashed black;
	z-index: 500;
	cursor: pointer;
	min-width: 10px;
	min-height: 15px;
}
.jsparson-toggle:empty {
	border-color: red;
}
.jsparson-toggle:empty:before {
	content: '??';
	display: block;
	color: red;
}

/** For input within parsons blocks */
.text-box {
	border-width: 0px;
	border-bottom: solid 1px black;
	width: 80px;
	min-width: 80px;
	padding: 5px;
	font-size: 13.3333px;
	font-family: monospace;
	background-color: #efefef;
}

.text-box:focus {
	outline: 0;
}