body {
	overflow: hidden;
	font-family: Arial;
	background-color: #6BAED8;
	height: 100vh;
	width: 100%;
	margin:0;
	
	}

.note {
    position: fixed;
    left: 39%;
    top: 810px;
    display: inline-block;
	text-align:center;
}
	
#background {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display:none;
}

.inhoud{
    position: absolute;
    top:150px;
    left:250px;
    min-height:300px;
    border: #D2D2D2 solid 1px;
    border-radius: 10px;
    background-color:rgba(255,255,255,1);
    padding:30px;
	-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.75);

}

.clear{
    clear:both;
}

label{
    width:200px;
    display: inline-block;
    font-size: 18px;
    color: #363636;
    vertical-align: middle;
}

input{

    margin:5px;
    font-size: 18px;
    border-radius: 4px;
    padding:5px;
}

select{
    width:200px;
    margin:5px;
    font-size: 18px;
    border-radius: 4px;
    padding:5px;
}

.menu{
	position: absolute;
	background-color: #647E89;
	width: 152px;
	height: 100vh;
	padding: 50px 16px 5px;
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.38);
	z-index:10;
}

.menu a{
	display: block;
	border-radius: 5px;
	color: white;
	text-decoration: none;
	transition: all 0.5s ease 0s;
	text-align: left;
	line-height: 2;
}

.menu a:not(nth-of-type(3)) {
	border-top: 1px solid white;
}

.menu a:hover{
	background-color: rgba(149, 149, 149, 0.4);
	}

.menu img {
	margin-bottom: 20px;
		}

.menu p {
color: white;
font-size: 1.8em;
margin-top: 12px;
text-align: center;
}
	
.error{
    color:#FF0000;
}
.succes{
    color:#000;
}
#ban{
    position: absolute;
    top:40px;
    left:40px;
    width:1000px;
    height:600px;
    border-radius: 30px;
    background-color:rgba(255,255,255,1);
    border: #000 solid 1px;
    padding: 30px;
    z-index: 100;
}
.add_rol{
    margin-top:2px;
    width:16px;
    height:16px;
    
    float:left;
}
.selecteer_add_rol{
    display: none;
    float:left;
}
.groen{
    color: #007700;
}
.rood{
    color: #770000;
}

.groepItem{
    float:left;
    width:200px;
}

.datumChange{
    width:120px;
}

.missed, .total{
    float:left;
    width:400px;
}

.fifteenballbutton{
    width:50px;
    height:50px;
    float:left;
    margin:10px;
	cursor:pointer;
}



.fifteenballbuttontext{
position: relative;
top: -108%;
text-align: center;
text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
color: #fff;
}

@-webkit-keyframes rotateFifteen {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

@keyframes rotateFifteen {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

.used {
	opacity:0.75;
}

.used .player1Score {
	stroke: #0B5FCC;
	stroke-width: 3px;
}

.player1Score {
	stroke: #0B5FCC;
	stroke-width: 3px;
}

.player2Score {
	stroke: #E74A17;
	stroke-width: 3px;
}

/* BALL COLORS */

.fifteenballbutton:nth-of-type(3) .ballMiddle {
	fill:#d8d555;
	}

.fifteenballbutton:nth-of-type(4) .ballMiddle {
	fill:#3931dd;
	}
	
.fifteenballbutton:nth-of-type(5) .ballMiddle {
	fill:#e23a1e;
	}
	
.fifteenballbutton:nth-of-type(6) .ballMiddle {
	fill:#642460;
	}
	
.fifteenballbutton:nth-of-type(7) .ballMiddle {
	fill:#ff7714;
	}
	
.fifteenballbutton:nth-of-type(8) .ballMiddle {
	fill:#177a27;
	}
	
.fifteenballbutton:nth-of-type(9) .ballMiddle {
	fill:#8e121d;
	}
	
.fifteenballbutton:nth-of-type(10) .ballMiddle {
	fill:#16130e;
	}
	
.fifteenballbutton:nth-of-type(11) .ballMiddle {
	fill:#d8d555;
	}
	
.fifteenballbutton:nth-of-type(12) .ballMiddle {
	fill:#3931dd;
	}
	
.fifteenballbutton:nth-of-type(13) .ballMiddle {
	fill:#e23a1e;
	}
	
.fifteenballbutton:nth-of-type(14) .ballMiddle {
	fill:#642460;
	}
	
.fifteenballbutton:nth-of-type(15) .ballMiddle {
	fill:#ff7714;
	}
	
.fifteenballbutton:nth-of-type(16) .ballMiddle {
	fill:#177a27;
	}
	
.fifteenballbutton:nth-of-type(17) .ballMiddle {
	fill:#8e121d;
	}

/* END OF BALL COLORS */

.touch{
    position:absolute;
    height: 100%;
    width: 100%;
    top:0px;
    left:0px;
}

.leftColumn{
	float:left;
	width:50%;
	position:relative;
	left:-50%;
	transition: all 3s cubic-bezier(0.4,0.99,0.56,0.99) 0s;
	animation: mymove 3s;
	animation-timing-function: linear;
	}

.rightColumn{
	float:right;
	width:50%;
	position:relative;
	right:-50%;
	transition: all 3s cubic-bezier(0.4,0.99,0.56,0.99) 0s;
	}
	
.touch .player1 {
    background: url("../../_img/heel.gif") no-repeat scroll center center / contain transparent;
    text-align: center;
    font-size: 30px;
    color: #FFF;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 322px;
    position: relative;
    top: 124px;
    width: 87%;
    height: 322px;
    -webkit-animation: 3s ease 0s normal none 1 running mymove;
	animation: 3s ease 0s normal none 1 running mymove;
    border-radius: 168px;
	text-shadow: 1px 2px 5px #000;
}

.touch .player2 {
    background: url("../../_img/half.gif") no-repeat scroll center center / contain transparent;
    text-align: center;
    font-size: 30px;
    color: #FFF;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 322px;
    position: relative;
    top: 124px;
    width: 61%;
    height: 322px;
    -webkit-animation: 3s ease 0s normal none 1 running mymove;
	animation: 3s ease 0s normal none 1 running mymove;
    border-radius: 100%;
	text-shadow: 1px 2px 5px #000;
}

@-webkit-keyframes mymove {
    0%   {transform: translateY(0);
	animation-timing-function: ease-out;}
    16% {transform: translateY(-60%);
	animation-timing-function: ease-in;}
	30%  {transform: translateY(0);
	animation-timing-function: ease-out;}
	40%  {transform: translateY(-30%);
	animation-timing-function: ease-in;}
	51% {transform: translateY(0);
	animation-timing-function: ease-out;}
	58% {transform: translateY(-15%);
	animation-timing-function: ease-in;}
	66% {transform: translateY(0);
	animation-timing-function: ease-out;}
	71% {transform: translateY(-7%);
	animation-timing-function: ease-in;}
	76% {transform: translateY(0);
	animation-timing-function: ease-out;}
	80% {transform: translateY(-3%);
	animation-timing-function: ease-in;}
	84% {transform: translateY(0);
	animation-timing-function: ease-out;}
	86% {transform: translateY(-1%);
	animation-timing-function: ease-in;}
	89% {transform: translateY(0);}
}

	@keyframes mymove {
    0%   {transform: translateY(0);
	transform: translateY(0);
	animation-timing-function: ease-out;}
    16% {transform: translateY(-60%);
	transform: translateY(-60%);
	animation-timing-function: ease-in;}
	30%  {transform: translateY(0);
	animation-timing-function: ease-out;}
	40%  {transform: translateY(-30%);
	animation-timing-function: ease-in;}
	51% {transform: translateY(0);
	animation-timing-function: ease-out;}
	58% {transform: translateY(-15%);
	animation-timing-function: ease-in;}
	66% {transform: translateY(0);
	animation-timing-function: ease-out;}
	71% {transform: translateY(-7%);
	animation-timing-function: ease-in;}
	76% {transform: translateY(0);
	animation-timing-function: ease-out;}
	80% {transform: translateY(-3%);
	animation-timing-function: ease-in;}
	84% {transform: translateY(0);
	animation-timing-function: ease-out;}
	86% {transform: translateY(-1%);
	animation-timing-function: ease-in;}
	89% {transform: translateY(0);}
}

.winner1{
    position: relative;
	top: 162px;
	width: 244px;
	height: 60px;
	display: block;
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid #000;
	border-radius: 8px;
	text-align: center;
	font-size: 20px;
	color: #000;
	padding-bottom: 15px;
	margin-right: auto;
	margin-left: auto;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.winner2{
	position: relative;
	top: 162px;
	width: 244px;
	height: 60px;
	display: block;
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid #000;
	border-radius: 8px;
	text-align: center;
	font-size: 20px;
	color: #000;
	padding-bottom: 15px;
	margin-right: auto;
	margin-left: auto;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.winner1, .winner2, .save, .cancel, .groups, .userButtons {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	}

.save{
    display:none;
    position: absolute;
    top:50%;
    left:40%;
    width:20%;
    height:20%;
	background-color: rgba(200, 255, 175, 0.9);
	border: 1px solid #000;
    border-radius: 50px;
    text-align: center;
    font-size:30px;
	z-index:1;
}

#saved {
	position: absolute;
	background-image: url("../_img/save.gif");
	height: 200px;
	width: 200px;
	border-radius: 100px;
	z-index: 9001;
	left: 831px;
	border-radius: 100px;
	top: 270px;
}

.cancel{
    display:none;
    position: absolute;
    top:75%;
    left:40%;
    width:20%;
    height:20%;
	background-color: rgba(255, 148, 148, 0.9);
	border: 1px solid #000;
    border-radius: 50px;
    text-align: center;
    font-size:30px;
	z-index:1;
}

.solid, .stripes{
    position: relative;
    border-radius: 30px;
    margin-bottom:0px;
    width:45%;
    height:25%;
    border:1px solid #000;
    text-align: center;
    
}

table {text-align:left;}

td {padding-right: 30px;}

span{
    position: relative;
    top:46%;
}
.solid{
    float:right;
}
.stripes{
    right:0px;
}

.stripes_background{
  width: 100%; 
  height:100%;

}


.users{
    position:fixed;
    display:none;
    left:26%;
    margin:auto;
    margin-top: 100px;
    width: 50%;
	top: 15%;
	z-index: 1;
	
}
.groups{
    alignment-adjust: middle;
}
.groups div, .userButtons div{
    margin:5px;
    display:block;
    position: relative;
    height:150px;
    width:30%;
    float:left;
    text-align:center;
    background-color: #DDD;
    border-radius: 30px;
	border: 1px solid #000;
	box-shadow: 0 10px 10px rgba(0,0,0,0.7), 0px 10px 3px 0px rgba(50, 50, 50, 0.30) inset;
	
}

.touchMenu{
    margin:0px;
    padding:0px;
    position: absolute;
    width:93%;
    z-index: 100;
    height:10%;
}

.touchMenu div{
	float: left;
    margin-left: 10px;
    width: 7%;
    background-color: rgba(255, 255, 255, 0.9);
	border-radius: 5px;
    word-wrap: break-word;
    text-align: center;
    padding: 11px;
	border: 1px solid;
	margin-top: 20px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.touchMenu div a{
    display:block;
    width:100%;
    height:100%;
	color: #363636;
	text-decoration: none;
}



.poolstatsTitle {
text-align: center;
font-family: impact;
font-size: 68px;
text-shadow: 0px 1px 0px #CCC, 0px 2px 0px #C9C9C9, 0px 3px 0px #BBB, 0px 4px 0px #B9B9B9, 0px 5px 0px #AAA, 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 20px 20px rgba(0, 0, 0, 0.15);
color: white;
letter-spacing: 9px;
position: relative;
top: 45px;
width: 23%;
margin: auto;
filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.55));
}

.monthStats {
    position: absolute;
    display: block;
    width: 27%;
    left: 35%;
    margin-top: 3%;
    background-color: rgba(255, 255, 255, 1);
    padding: 17px;
    border: #D2D2D2 solid 1px;
    border-radius: 10px;
    background-color:rgba(255,255,255,1);
	-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.75);
}

.player3{
    width:40%;
    float:left;
}

 .overlayWinner{  
    position:absolute;
    top:-100%;
    left:0;
	background-color: #133337;
    width:100%;
    height:100%;
    z-index:1000;
  }
  
 #overlayWinnerText{
	position: relative;
	top: 35%;
	color: #C5C5C5;
	text-align:center;
	font-size: 29px;
	display: none;
	} 
	
#overlayWinnerName{
	position: relative;
	text-align:center;
	top: 35%;
	color: rgb(255, 255, 255);
	font-size: 95px;
	display:none;
	}
	
  .overlayWinner2{
	-webkit-animation: winner 3s forwards;
	animation: winner 3s forwards;
	}
	
@-webkit-keyframes winner {
0% {top:-100%;}
100% {top:0;}
}	
	
@keyframes winner {
0% {top:-100%;}
100% {top:0;}
}

#overlay {
	background-color: rgba(0,0,0,0.45);
	height: 100vh;
	width: 100%;
	position:fixed;
	display:none;
	z-index: 98;
	top:0;
	pointer-events:none;
}

.soundboardMenu h2 {
	color:white;}

.soundboardButton button { 
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.4);
	padding: 12px;
	border: none;
	border-radius: 5px;
	color: #363636;
	text-decoration: none;
	transition: opacity 0.5s ease-out 0s;
	text-align: center;
	margin-bottom: 12px;
	width: 183px;
	overflow:hidden;
	}
	
.soundboardButton button:active {
	background-color: #BCBCBC;
	}

.soundboardMenu {
	position: fixed;
	top: 0;
	width: 1305px;
	height: calc(100vh - 60px);
	overflow-y: scroll;
	overflow-y: scroll;
	background-color: #647E89;
	padding: 30px;
	transition: all 1s cubic-bezier(0.71, -0.01, 0.41, 1) 0s;
	overflow:hidden;
	right: -1364px;
	z-index: 99;
}

.Open {
	right: 0 !important;
}

#soundboardOpen {
	height: 46px;
	width: 50px;
	right: 21px;
	top: 18px;
	position: fixed;
	z-index:100;
	-webkit-filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.55));
	filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.55));
	}