/* Checkbox validation  */

.css-form input.ng-invalid.ng-touched {
    background-color: #FA787E;
}

.css-form input.ng-valid.ng-touched {
    background-color: #78FA89;
}

.input-error{
    color: red;
    font-weight: bold;
}

#veil {
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width:100%;
	cursor: not-allowed;
	filter: alpha(opacity=60);
	opacity: 0.6;
	background: #000000;
	z-index: 9;
}
#dataLoading {
	position: absolute;
	top:200px;
	width:100%;
	text-align: center;
	font-size: 4em;
	color:white;
	text-shadow: 2px 2px 2px #021124;
}

.table td span.clickable {
	cursor: pointer;
	font-weight: 400;
	color: #007aff;
}

.modal {
	text-align: center;
}

@media screen and (min-width: 768px) {
	.modal:before {
		display: inline-block;
		vertical-align: middle;
		content: " ";
		height: 100%;
	}
}

.modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	min-width: 80%;
}

.participant-controls .option-margin {
	margin: 10px 0 10px 0;
}

.single-participant input[type=checkbox] {
	outline: none;
	width: 58px;
	height: 23px;
	font-size: 11px;
	line-height: 2;
	display: block;
	font-weight: bold;
	border-radius: 3px;
	border: 1px solid #B9B9B9;
	-webkit-appearance: none;

	background-image: -webkit-gradient(
			linear, left top, left bottom,
			color-stop(0, #E8E8E8),
			color-stop(0.5, #E8E8E8),
			color-stop(0.5, #FDFDFD),
			color-stop(1, #FDFDFD)
	);
	box-shadow: 0px 1px 2px #AFAFAF inset;
	color: #7F7F7F;
}

.single-participant input[type=checkbox]:checked {
	background-image: -webkit-gradient(
			linear, left top, left bottom,
			color-stop(0, #367EF8),
			color-stop(0.5, #367EF8),
			color-stop(0.5, #66A3F8),
			color-stop(1, #66A3F8)
	);
	box-shadow: 0px 1px 2px #1449A3 inset;
	color: #FFF;
	text-shadow: 0px -1px 1px #000;
	border: 1px solid #99B9E8;
}

.single-participant input[type=checkbox]:before {
	content: 'NEJ';
	border-radius: 3px;
	border-top: 1px solid #F7F7F7;
	border-right: 1px solid #999999;
	border-bottom: 1px;
	solid: #BABABA;
	border-left: 1px solid #BDBDBD;
	background-image: -webkit-gradient(
			linear, left top, left bottom,
			color-stop(0, #D8D8D8),
			color-stop(1, #FBFBFB)
	);
	height: 20px;
	width: 22px;
	display: inline-block;
	text-indent: 27px;
}

.single-participant input[type=checkbox]:checked:before {
	content: 'JA';
	text-indent: -25px;
	margin-left: 33px;
}

.btn.save-order {
	margin: 0 20px 20px 0;
}

.participant-list-item {
	-ms-touch-action: auto !important;
	touch-action: auto !important;
	-webkit-touch-callout: default !important;
}

.participant-drag {
	-ms-touch-action: none;
	touch-action: none;
	-webkit-touch-callout: none;
	min-width: 50px;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 20px;
	text-align: center;
	padding: 5px 0;
	margin-right: 5px;
}

.table td span.clickable.next {
	color: #228036;
	font-weight: 700;
}

.next-participant {
	display: block;
	padding: 15px;
	background: #fff;
}

.badge-lg {
	font-size: 15px;
	padding: 7px 20px;
	margin-left: 10px;
}

.headline {
	font-size: 30px;
	vertical-align: middle;
}

.sticky-content{
	position: sticky;
	top: 0;
	background: lightgrey;
}

.scrollable-content {
	/*position: relative;*/
}

.statistics{
	display: flex;
	width: 100%;
}
.tournament-wrapper{
	display: flex;
	flex-wrap: wrap;
}
.tournament-wrapper>div{
	width: 100%;
}


.tournament-groups{
	border-right: solid 10px white;
	width: 75%;
}
.tournament-groups table {
	table-layout: fixed;
	width: 100%;
}

.tournament-groups table th{
	width: 12.5%;
}
.tournament-groups table tr th:nth-child(1){
	width: 25%;
}
.tournament-groups table tr th:nth-child(2){
	width: 25%;
}

.tournament-lanes{
	width: 25%;
}