body {
	color: #777;
	width: 100%;
}

h3 {
	margin: 10px 0 30px 0;
	letter-spacing: 10px;
	font-size: 24px;
	color: #111;
}

h4 {
	font-size: 11px;
	color: white;
}

h6 {
	margin: 10px 0 30px 0;
	font-size: 20px;
	color: #111;
}

a {
	color: slategrey;
}

a:hover {
	color: black;
}

.title {
	margin: 10px 0 30px 0;
	font-size: 20px;
	color: #111;
}

.nav-link:focus, .nav-link:hover {
	color: white !important;
}

table td a {
	color: black !important;
	text-decoration: none;
}

table td a:hover {
	color: black !important;
	text-decoration: underline;
}

table td a:focus {
	color: black !important;
	text-decoration: underline;
}

table th a {
	color: black !important;
	text-decoration: none;
}

table th a:hover {
	color: black !important;
	text-decoration: underline;
}

table th a:focus {
	color: black !important;
	text-decoration: underline;
}

.table-responsive parent {
	overflow-y: scroll; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
}

/*
Force table width to 100%
*/
table.table-fixedheader {
	width: 100%;
}
/*
Set table elements to block mode.  (Normally they are inline).
This allows a responsive table, such as one where columns can be stacked
if the display is narrow.
*/
table.table-fixedheader, table.table-fixedheader>thead, table.table-fixedheader>tbody, table.table-fixedheader>thead>tr, table.table-fixedheader>tbody>tr, table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>td {
	display: block;
}
table.table-fixedheader>thead>tr:after, table.table-fixedheader>tbody>tr:after {
	content: ' ';
	display: block;
	visibility: hidden;
	clear: both;
}
/*
When scrolling the table, actually it is only the tbody portion of the
table that scrolls (not the entire table: we want the thead to remain
fixed).  We must specify an explicit height for the tbody.  We include
100px as a default, but it can be overridden elsewhere.

Also, we force the scrollbar to always be displayed so that the usable
width for the table contents doesn't change (such as becoming narrower
when a scrollbar is visible and wider when it is not).
*/
table.table-fixedheader>tbody {
	overflow-y: scroll;
	height: 800px;
}
/*
We really don't want to scroll the thead contents, but we want to force
a scrollbar to be displayed anyway so that the usable width of the thead
will exactly match the tbody.
*/
table.table-fixedheader>thead {
	overflow-y: scroll;
}
/*
For browsers that support it (webkit), we set the background color of
the unneeded scrollbar in the thead to make it invisible.  (Setting
visiblity: hidden defeats the purpose, as this alters the usable width
of the thead.)
*/
table.table-fixedheader>thead::-webkit-scrollbar {
	background-color: inherit;
}


table.table-fixedheader>thead>tr>th:after, table.table-fixedheader>tbody>tr>td:after {
	content: ' ';
	display: table-cell;
	visibility: hidden;
	clear: both;
}

/*
We want to set <th> and <td> elements to float left.
We also must explicitly set the width for each column (both for the <th>
and the <td>).  We set to 20% here a default placeholder, but it can be
overridden elsewhere.
*/

table.table-fixedheader>thead tr th, table.table-fixedheader>tbody tr td {
	float: left;
	word-wrap: break-word;
}

#largegamelisttable {
	margin: auto;
	width: 85% !important;
}

#largefixturelisttable {
	margin: auto;
	width: 90% !important;
}

#largestatslisttable {
	margin: auto;
	width: 90% !important;
}

.statsheader {
	background-color: ghostwhite;
}

.bg-upperslot {
	background-color: ghostwhite !important;
	border: 2px solid grey;
}

.bg-lowerslot {
	background-color: ghostwhite !important;
	border: 2px solid grey;
}

.bg-info {
	background-color: slategrey !important;
}

.btn-info {
	color: white !important;
	background-color: slategrey !important;
	border-color: darkgrey !important;
}

.btn-info:hover {
	color: black !important;
}

.btn-outline-info {
	color: slategrey !important;
	border-color: darkgrey !important;
}

.seasonselect {
	min-width: 90px !important;
	max-width: 105px !important;
}

.text-info {
	color: grey !important;
}

.statsfield {
	-ms-flex: 0 0 65px;
	flex: 0 0 65px;
	padding: .10rem !important;
	padding-right: 1rem !important;
	height: 35px;
}

.playername {
	padding: .10rem !important;
	height: 35px;
}

.detailsbutton {
	padding: .10rem !important;
	height: 35px;
}

.helpbutton {
   border: none;
   color: rgba(255,255,255,.5);
   padding: 3px 3px;
	margin-top: 2px;
   cursor: pointer;
   font-size: 18px;
}

/* Darker background on mouse-over */
.helpbutton:hover {
	background-color: #535a5f;
	color: black !important;
}

.col-form-theme {
	padding-top: 1px !important;
	line-height: 1.0 !important;
}

.form-group {
	margin-bottom: 2px !important;
}

.form-select {
	display: inline-block !important;
}

.formpulldown {
	font-family: verdana;
	font-size: 13px;
	margin-bottom: 5px;
}

/* hidden on-screen */
.print-only {
	display: none;
}

@media print {
  body {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
    background: #fff;
    color: #000;
  }
  h2 {
    text-align: center;
    font-size: 16pt;
    margin: 0 0 10px 0;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #000;
    padding: 6px;
    text-align: center;
  }
  .text-start { text-align: left !important; }
  .text-end { text-align: right !important; }

  /* Hide any elements you don't want printed */
  .no-print, nav, footer {
    display: none !important;
  }

  /* Prevent page break issues */
  tr { page-break-inside: avoid; }
}

.container {
	padding: 10px 15px;
}

.white {
	color: darkgray;
}

.black {
	color: black;
}

.coloura {
	background-color: seashell;
}
.colourb {
	background-color: aliceblue;
}
.colourc {
	background-color: honeydew;
}
.colourd {
	background-color: mistyrose;
}
.coloure {
	background-color: azure;
}
.colourf {
	background-color: papayawhip;
}
.colourg {
	background-color: mintcream;
}
.colourh {
	background-color: lightcyan;
}
.colourrooks {
	background-color: navajowhite;
}
.colourbishops {
	background-color: lightpink;
}
.colour pawns {
	background-color: powderblue;
}
.colourjuniors {
	background-color: beige;
}
.colourladies {
	background-color: slategray;
}
.colourseniors {
	background-color: lightsalmon;
}

#mapid {
	height: 400px;
}

.navbar {
	padding-left: 5px;
	padding-right: 5px;
}

/* change the brand and text color */
.navbar-brand {
	color: white;
}

.navbar-brand a {
	color: white;
}

.nav .nav-link {
	font-size: 14px;
	padding-left: 0px;
	padding-right: 0px;
}

.nav-link.active {
	background-color: slategrey !important;
}

.nav-link:hover {
	color: black !important;
}

.dropdown-submenu {
	position: relative;
	color: black;
	font-size: 14px;
	padding-left: 0px;
	padding-right: 0px;
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -1px;
	color: white;
	font-size: 14px;
	padding-left: 0px;
	padding-right: 0px;
}

.dropdown-item {
	color: black !important;
}

#myTab a {
	padding-left: 7px;
	padding-right: 7px;
}

.carousel {
	height: 500px;
}

.carousel-indicators {
	margin-bottom: 8px;
}

.carousel-indicators>li {
	width: 10px;
	height: 10px;
	border-radius: 100%;
}

.carousel-item {
	text-align: center;
	transition: transform 1s ease;
}

.carousel-inner {
	transition: transform 1s ease;
}

.carousel-inner img {
	width: 90%;
	height: 90%;
}

.carousel-control-prev {
	margin: 100px 0;
	border-radius: 30px;
	height: 26%;
	top: 43%;
	width: 46px;
	background: black;
}

.carousel-control-next {
	margin: 100px 0;
	border-radius: 30px;
	height: 26%;
	top: 43%;
	width: 46px;
	background: black;
}

.h1-carousel {
	width: 100%;
	text-align: center;
	color: white;
	text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
	font-family: Serif;
	font-style: normal;
	font-weight: 400;
	font-size: 4vw;
	transition: 0.4s;
}

.carousel-caption {
	position: absolute;
	top: 40%;
	opacity: 1;
	transition: 0.4s;
}

.carousel-caption.slide {
	top: 0;
	opacity: 0;
	transition: 0.4s;
}

.caption-bottom {
	position: absolute;
	top: 70%;
	opacity: 1;
	transition: 0.4s;
}

.caption-bottom.slide {
	bottom: -90vh;
	opacity: 0;
	transition: 0.4s;
}

.person {
	border: 10px solid transparent;
	margin-bottom: 25px;
	width: 80%;
	height: 80%;
	opacity: 0.7;
}
.person:hover {
	border-color: #f1f1f1;
}

@media (max-width: 600px) {
	.carousel-caption {
		display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
	}

}

.modal-header, .close {
	background-color: #333;
	color: #fff !important;
	text-align: center;
	font-size: 25px;
}

.modal-header {
	padding: 30px 40px;
}

/* Important part */
.modal-dialog {
	overflow-y: initial !important
}
.eventstat_modalbody {
	padding: 10px 20px;
	overflow-y: auto;
	height: 470px;
}

.modal-body {
	max-height: 500px;
	overflow-y: auto;
}

@media (max-height: 700px) {
	.eventstat_modalbody {
		height: 250px;
	}

}

.eventdate {
	font-size: 13px;
}

.latitude {
	font-size: 13px;
}

.longitude {
	font-size: 13px;
}

.lang {
	font-size: 13px;
}

.form-group {
	font-size: 13px !important;
	color: black;
	text-align: left;
}

.imagelabel {
	width: 60px;
}

.clubmap {
	width: 600px;
	height: 400px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 75%;
}

.username {
	text-align: left;
	width: 80px;
}

span.cbline {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	word-wrap: break-word !important;
}

.userselect {
	text-align: left;
	width: 294px;
}

.detailBox {
	width: 920px;
	border: 1px solid #bbb;
	margin: 50px;
}

#blog {
	margin: 5px;
}
.titleBox {
	background-color: #fdfdfd;
	padding: 0px;
}
.titleBox label {
	color: #444;
	margin: 0;
	display: inline-block;
}
.commentBox {
	padding: 7px;
	border-top: 1px dotted #bbb;
}
.commentBox .form-group:first-child, .actionBox .form-group:first-child {
	width: 80%;
}
.commentBox .form-group:nth-child(2), .actionBox .form-group:nth-child(2) {
	width: 18%;
}
.actionBox .form-group * {
	width: 100%;
}
.taskDescription {
	margin-top: 0px;
}
.commentList {
	padding:10px;
	list-style:none;
	max-height:400px;
	overflow:auto;
}
.commentList li > div {
	display: table-cell;
}
.commentTitle {
	padding: 10px;
	outline: 0px;
	color: black;
	font-size: 28px;
	font-weight: 400;
	margin-top: 5px;
	margin-left: 10px;
	margin-right: 5px;
	line-height: 1.2;
	text-decoration: none;
	word-wrap: break-word;
	display: inline;
}

.commentText {
	padding: 10px;
	outline: 0px;
	color: black;
	font-size: 18px;
	margin-left: 10px;
	margin-right: 5px;
	line-height: 28px;
	font-weight: 300;
	text-decoration: none;
	word-wrap: break-word;
	margin-bottom: 1.6em;
}
.commentlatestText {
	padding: 5px;
	outline: 0px;
	color: black;
	font-size: 16px;
	margin-left: 5px;
	margin-right: 5px;
	line-height: 24px;
	font-weight: 300;
	text-decoration: none;
	word-wrap: break-word;
	margin-bottom: 0.1em;
}

.sub-text {
	padding: 10px;
	color:#a8a6a1;
	font-size:11px;
	line-height: 1.2;
	margin-left: 5px;
	margin-right: 5px;
	display: inline;
}

.sub-text a {
	color: #a8a6a1;
	transition: color .2s;
}

.linkTitle {
	padding: 5px;
	outline: 0px;
	color: black;
	font-size: 22px;
	font-weight: 400;
	margin-top: 30px;
	margin-left: 10px;
	margin-right: 10px;
	line-height: 1.2;
	text-decoration: none;
	word-wrap: break-word;
	display: inline;
}

.linkText a {
	padding: 5px;
	outline: 0px;
	color: black;
	font-size: 18px;
	margin-left: 5px;
	margin-right: 10px;
	line-height: 35px;
	text-decoration: none;
	word-wrap: break-word;
	margin-bottom: 5px;
}

.linkText a:hover {
	color: black;
	text-decoration: underline;
}

.linkText a:focus {
	color: black;
	text-decoration: underline;
}
/* Mobile screen */
@media screen and (max-width: 991px) {
	h6 {
		margin: 10px 0 10px 0;
		font-size: 16px;
		color: #111;
	}
	
	.dropdown-item {
		font-size: 14px;
	}
	
	.dropdown-item a {
		color: black !important;
		font-size: 14px;
	}
	
	.nav a {
		color: white;
		font-size: 12px;
	}
	
	.nav-item {
		font-size: 22px;
		line-height: 1;
	}
	
	.nav-link li a {
		color: white !important;
		font-size: 22px;
	}
	
	.nav-link {
	}
	
	.navbar-toggler {
		padding: .25rem .25rem;
	}
	
	.commentTitle {
		padding: 50px;
		font-size: 24px;
		margin-top: 1px;
		margin-left: 1px;
		margin-right: 1px;
	}
	.commentText {
		padding: 1px;
		outline: 0px;
		color: black;
		font-size: 14px;
		margin-left: 1px;
		margin-right: 1px;
		line-height: 24px;
		margin-bottom: 1em;
	}
	.largetable {
		display: none;
	}
	.smalltable {
		display: block;
	}
	.largemenu {
		display: none;
	}
	.smallmenu {
		display: block;
	}
	.smallstripe {
		background-color: gainsboro;
	}
	table td {
		padding: 5px !important;
	}
	.seasonselect {
		font-size: 9px !important;
		min-width: 75px !important;
		max-width: 95px !important;
	}
}

@media 
only screen and (min-width: 992px) {
	
	.dropdown-item {
		font-size: 14px;
	}
	
	.dropdown-item a {
		color: black !important;
		font-size: 14px;
	}
	
	.nav a {
		font-size: 18px;
	}
	
	.nav-link {
		color: white !important;
		font-size: 14px !important;
	}
	
	.nav-item {
		font-size: 16px;
	}
	
	.nav-link li a {
		color: white !important;
		font-size: 14px;
	}

	.navbar-toggler {
		padding: .25rem .25rem;
	}
	
	.largetable {
		display: block;
	}
	.smalltable {
		display: none;
	}
	.largemenu {
		display: block;
	}
	.smallmenu {
		display: none;
	}
}

.actionBox {
	border-top: 1px dotted #bbb;
	padding: 0px;
}
.form-inline {
	margin: 5px;
	color: #aaa;
	font-family: verdana;
	font-size: 11px;
}
.team {
	margin: 5px;
	color: black;
	font-size: 14px;
}
.licence {
	font-family: verdana;
	font-size: 12px;
}
#licencebronze {
	color: darksalmon;
}
#licencesilver {
	color: silver;
}
#licencegold {
	color: gold;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5,
.col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10,
.col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5,
.col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md,
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3,
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto,
.col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2,
.col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
.col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8,
.col-xl-9, .col-xl-auto {
	padding-right: 0px;
	padding-left: 0px;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	float: right;
}

/* Hide default HTML checkbox */
.switch input {
	display: none;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input.default:checked + .slider {
	background-color: #444;
}
input.primary:checked + .slider {
	background-color: #2196F3;
}
input.success:checked + .slider {
	background-color: #8bc34a;
}
input.info:checked + .slider {
	background-color: #3de0f5;
}
input.warning:checked + .slider {
	background-color: #FFC107;
}
input.danger:checked + .slider {
	background-color: #f44336;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}
/* Remove sorting arrows on data tables */
table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
	background : none;
}
.logo {
	margin: 0px !important;
	width: 100% !important;
	max-width: 100% !important;
}
/* For jQuery UI Datepicker */
.ui-datepicker {
  background-color: gainsboro; /* light grey */
  border: 1px solid #ccc;
  padding: 4px;
  border-radius: 6px;
}