html {
	height:			100%;
	user-select: 	none;
}
body {
	font-family:	sans-serif;
	padding:		0;
	margin:			0;
	height:			100%;
	overflow:		hidden;
	display:		flex;
	flex-direction:	column;
	align-items:	center;
	justify-content:	center;
}
a[href],
a[href]:visited {
	color:				#68a661;
	text-decoration:	none;
} 


.welcome {
	text-align:		center;
	align-items:	center;
	font-weight:	bold;
	font-size:		20px;
	line-height:	60px;
	margin-bottom:	50px;
}
.welcome > div + div {
	/* margin-top:	40px; */
}
.biling {
	position:		relative;
}
.biling * {
	transition:		all 400ms;
	line-height:	20px;
}
.biling :first-child {
	display:inline-block;
}
.biling :last-child {
	position:	absolute;
	left:		50%;
}
.biling [d] {
	transform:	translateY(-50%);
}
.biling [h] {
	transform:	translateY(50%);
}
.biling [d]:last-child {
	transform:	translateY(50%) translateX(-50%);
}
.biling [h]:last-child {
	transform:	translateY(150%) translateX(-50%);
}
.transparent-dsb .biling [d],
.transparent-hsb .biling [h] {
	opacity:	0.2;
}

.welcome .field {
	margin-top:			40px;
	display:			flex;
	width:				calc( 50px * 5 + 5px * 4);
	justify-content:	center;
	flex-wrap:			wrap;
}
.welcome .field * {
	position:		relative;
	width:			50px;
	height:			50px;
	line-height:	50px;
	font-size:		calc( 50px * 0.75 );
	background-color: #fff;
	border:			1px solid black;
	box-sizing:		border-box;
	font-weight:	bold;
	text-align:		center;
	color:			#fff;
	margin-right:	5px;
	margin-bottom:	5px;
}
.welcome .field ::after {
	position:	absolute;
	display:	block;
	content:	'';
	top:		0;
	left:		0;
	bottom:		-5px;
	right:		-5px;
}
.welcome .field :nth-child(5n) {
	margin-right:	0px;
}
.welcome .field :nth-child(5n)::after {
	right:		0;
}
.welcome .field [s],
.welcome .field [d],
.welcome .field [h] {
	border:	none;
	background-color:	#898989;
}
.welcome .field [s].yellow,
.welcome .field [d].yellow,
.welcome .field [h].yellow {
	border:	none;
	background-color:	#c7b458;
}
.welcome .field [s].green,
.welcome .field [d].green,
.welcome .field [h].green {
	border:	none;
	background-color:	#68a661 !important;
}
.welcome .field [h] {
	cursor:	pointer;
	animation-delay:			1s;
	animation-duration:			5s;
	animation-name:				hsbDsb;
	animation-iteration-count:	infinite;
	animation-direction:		normal;
}
.welcome .field [d] {
	cursor:	pointer;
	animation-delay:			3.5s;
	animation-duration:			5s;
	animation-name:				hsbDsb;
	animation-iteration-count:	infinite;
	animation-direction:		normal;
}
.welcome .field [s] {
	animation-delay:			1s;
	animation-duration:			5s;
	animation-name:				both;
	animation-iteration-count:	infinite;
	animation-direction:		normal;
}
.welcome .field:hover [s],
.welcome .field:hover [d],
.welcome .field:hover [h] {
	animation-name:				none;
}
@keyframes hsbDsb {
	0% {
		background-color:	#898989;
	}
	10% {
		background-color:	#c7b458;
	}
	40% {
		background-color:	#c7b458;
	}
	50% {
		background-color:	#898989;
	}
	100% {
		background-color:	#898989;
	}
}
@keyframes both {
	0% {
		background-color:	#898989;
	}
	10% {
		background-color:	#c7b458;
	}
	40% {
		background-color:	#c7b458;
	}
	50% {
		background-color:	#898989;
	}
	60% {
		background-color:	#c7b458;
	}
	90% {
		background-color:	#c7b458;
	}
	100% {
		background-color:	#898989;
	}
}




.sorble-header {
	position:		relative;
	height:			50px;
	flex-shrink:	0;
	font-size:		30px;
	line-height:	50px;
	font-weight:	bold;
	text-align:		center;
}
.sorble-header info {
	display:	block;
	position:	absolute;
	right:		0px;
	top:		0px;
	width:		24px;
	height:		50px;
	background-image:		url(info.svg);
	background-repeat:		no-repeat;
	background-position:	50% 50%;
	
}
.sorble-header version {
	line-height:	10px;
	opacity:		0.2;
	position:		fixed;
	font-size:		10px;
	right:			0;
	top:			0;
}

.sorble-field {
	position:			relative;
	flex-grow:			1;
	display:			flex;
	flex-direction:		column;
	justify-content:	center;
}
.sorble-footer {
	height:			calc( 50px * 3 + 5px * 2 );
	width:			100%;
	flex-shrink:	0;
	font-size:		20px;
	line-height:	50px;
	padding:		10px 0 5px;
}
.sorble-footer > div {
	display:			flex;
	justify-content:	center;
	margin-bottom:		5px;
	padding-left:		5px;
}
.sorble-footer > div > div {
	flex-grow:	1;
	width:		1%;
	background-color:	#D1D5DE;
	text-align:		center;
	margin-right:	5px;
	border-radius:	5px;
	max-width:		50px;
	filter:			brightness(1);
	transition:		filter 200ms, transform 200ms;
}
.sorble-footer > div > div.enter {
	width:		auto;
	font-size:	30px;
	min-width:	50px;
	max-width:	75px;
	background-image:		url(check.svg);
	background-position:	50% 50%;
	background-repeat:		no-repeat;
}
.sorble-footer > div > div.backspace {
	width:		auto;
	font-size:	30px;
	min-width:	50px;
	max-width:	75px;
	background-image:		url(delete.svg);
	background-position:	50% 50%;
	background-repeat:		no-repeat;
}
.sorble-footer > div > div.correct {
	transition:	all 200ms 600ms, filter 200ms, transform 200ms;
	background-color:	#68a661;
	color:	white;
}
.sorble-footer > div > div.wrong-place {
	transition:	all 200ms 600ms, filter 200ms, transform 200ms;
	background-color:	#c7b458;
	color:	white;
}
.sorble-footer > div > div.wrong {
	transition:	all 200ms 600ms, filter 200ms, transform 200ms;
	background-color:	#898989;
	color:	white;
}
.sorble-footer > div > div:active {
	filter:		brightness(0.8);
	transform:	translateY(2px);
}


.sorble-row {
	display:		flex;
	flex-direction:	row;
	flex-wrap:		nowrap;
	align-items:	stretch;
	margin-bottom:	5px;
}
.sorble-row:last-child {
	margin-bottom:	0px;
}

.sorble-cell {
	border:			1px solid black;
	box-sizing:		border-box;
	margin-right:	5px;
	text-align:		center;
	font-weight:	bold;
}
.sorble-cell:last-child {
	margin-right:	0px;
}
.sorble-cell.active {
	outline:	2px solid black;
}
.sorble-cell.correct {
	background-color:	#68a661;
	color:				#fff;
	border-color:		transparent;
}
.sorble-cell.wrong-place {
	background-color:	#c7b458;
	color:				#fff;
	border-color:		transparent;
}
.sorble-cell.wrong {
	background-color:	#898989;
	color:				#fff;
	border-color:		transparent;
}
.sorble-cell.correct:nth-child(1),
.sorble-cell.wrong-place:nth-child(1),
.sorble-cell.wrong:nth-child(1) {
	transition:	background-color 200ms 0ms, color 200ms 0ms, border-color 200ms 0ms;
}
.sorble-cell.correct:nth-child(2),
.sorble-cell.wrong-place:nth-child(2),
.sorble-cell.wrong:nth-child(2) {
	transition:	background-color 200ms 100ms, color 200ms 100ms, border-color 200ms 100ms;
}
.sorble-cell.correct:nth-child(3),
.sorble-cell.wrong-place:nth-child(3),
.sorble-cell.wrong:nth-child(3) {
	transition:	background-color 200ms 200ms, color 200ms 200ms, border-color 200ms 200ms;
}
.sorble-cell.correct:nth-child(4),
.sorble-cell.wrong-place:nth-child(4),
.sorble-cell.wrong:nth-child(4) {
	transition:	background-color 200ms 300ms, color 200ms 300ms, border-color 200ms 300ms;
}
.sorble-cell.correct:nth-child(5),
.sorble-cell.wrong-place:nth-child(5),
.sorble-cell.wrong:nth-child(5) {
	transition:	background-color 200ms 400ms, color 200ms 400ms, border-color 200ms 400ms;
}


.sorble-feedback {
	position:		absolute;
	top:			0;
	right:			0;
	bottom:			0;
	left:			0;
	background-color:	white;
	display:			flex;
	flex-direction:		column;
	align-items:		center;
	justify-content:	center;
	opacity:		0.95;
	z-index:		1	;
	transition:		opacity	400ms;
	font-weight:	bold;
	text-align:		center;
}
.sorble-feedback.fullscreen {
	position:	fixed;
	opacity:	0.98;
	padding:	20px;
}
.sorble-feedback.hidden {
	transition:	opacity 400ms, z-index 0s 400ms;
	opacity:	0;
	z-index:	-1;
}
.sorble-feedback closer {
	position:		absolute;
	top:			0;
	right:			0;
	font-weight:	normal;
	padding:		0 20px;
}
.sorble-feedback closer::before {
	content:		'×';
}
.sorble-feedback-info {
	font-size:		20px;
	font-weight:	normal;
	line-height:	1.5;
	width:			100%;
	margin:			-20px;
	padding:		20px;
	overflow-y:		auto;
}