body {
    background-image: url("waterMarkShield.png");
    background-color: #FFFFFF;
 	margin: 10px;
}
table {
    border-spacing: 5px;
    border: 2px solid black;
    border-collapse: collapse;
		background-color: #ffffff;
	
}

 .waffle a {
	color: inherit;
    display: table;
    border-collapse: separate;
    border-color: blue;
    border-spacing: 0px;
	vertical-align: bottom;
}
.waffle .s1 {
	    background-color: White;
    height: 25px; 
}
.waffle .s1Highlighted {
	    background-color: Yellow;
    height: 25px; 
}
.waffle .s1 tr{
	
	text-align: left;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;

}
.waffle .s1:nth-child(even) td{
    background-color: LightGray;
}
.waffle .s1:nth-child(even):hover td{ 
    background-color: LightSkyBlue;
}
.waffle .s1:hover {
    background-color: LightSkyBlue;
}

.waffle .s10 {
	color: #000000;
	text-align: left;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
.waffle .s10r {
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
.waffle .s10r td input {
	vertical-align: middle;
	border-width: 0;
	padding: 2px 3px 2px 3px;
}
.waffle .waiting {
	text-align: left;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: bottom;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
    background-color: green;
    color: white;
}
.waffle .late {
	text-align: left;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: bottom;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
    background-color: red;
    color: white;
}
/* underlined empty cell*/
 .waffle .s27 {
	border-bottom: 1px SOLID #000000;
	background-color: #ffffff;
}
/* empty cells */
 .waffle .s14 {
	border-left: none;
	background-color: #ffffff;
	text-align: left;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
 .waffle .s14b {
	border-left: none;
	background-color: LightBlue;
	text-align: left;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
/* plain smaller with hover*/


/* larger bold manger labels */
 .waffle .s8 {
	border-left: none;
	background-color: #ffffff;
	text-align: left;
	font-weight: bold;
	color: #000000;
	font-family: 'Arial';
	font-size: 18pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
/* small underscore */
 .waffle .s26 {
	border-bottom: 1px SOLID #000000;
	background-color: #ffffff;
	text-align: left;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: bottom;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
/* buttons */
 .waffle .s4 {
	background-color: #ffffff;
	text-align: center;
	font-weight: bold;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: bottom;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}

 .waffle .s4i a {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
/* label in player grid */
 .waffle .s2 {
	border-right: none;
	background-color: #ffffff;
	text-align: left;
	color: #000000;
	font-family: 'Arial';
	font-size: 12pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
/* right border */
 .waffle .s11 {
	border-right: 3px SOLID #000000;
	background-color: #ffffff;
	text-align: left;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: normal;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
 .waffle .s11b {
	border-right: 3px SOLID #000000;
	background-color: LightBlue;
	text-align: left;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
.waffle .sa {
	background-color: #ff0000;
	text-align: left;
	color: #000000;
	font-family: 'Arial';
	font-size: 12pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
/* bold labels manager?*/
 .waffle .s5 {
	background-color: #ffffff;
	text-align: right;
	font-weight: bold;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
 .waffle .s5c {
	background-color: #ffffff;
	text-align: center;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
.waffle .s5l {
	background-color: #ffffff;
	text-align: left;
	font-weight: bold;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
} .waffle .s5u {
	border-bottom: 1px SOLID #000000;
	background-color: #ffffff;
	text-align: right;
	font-weight: bold;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: bottom;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
/* underlined bold */
 .waffle .s33 {
	border-bottom: 1px SOLID #000000;
	background-color: #ffffff;
	text-align: left;
	font-weight: bold;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: bottom;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}
/* right border small spacer column*/
 .waffle .s12 {
	border-right: 3px SOLID #000000;
	background-color: #ffffff;

}
/* normal */
 .waffle .s0 {
	text-align: left;
	font-weight: bold;
	color: #000000;
	font-family: 'Arial';
	font-size: 12pt;
	vertical-align: middle;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}

/* bold underscored*/
 .waffle .s25 {
	background-color: #ffffff;
	text-align: left;
	font-weight: bold;
	text-decoration: underline;
	color: #000000;
	font-family: 'Arial';
	font-size: 10pt;
	vertical-align: bottom;
	white-space: nowrap;
	direction: ltr;
	padding: 2px 3px 2px 3px;
}

@media only screen and (min-width: 600px) {
	.container {
		grid-template-columns: repeat(5, 100px)%;
	}
}

.container {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(5, 100px);
}

.title {
	grid-column: 1/6;
	background-color: #fff;
	margin: 0 auto;
}
.gameReport {
	background-color: #ffffff;
	margin: 0 auto;
   	width: 100%;
    grid-column: 1/6;
}

.menu_left {
	grid-column: 1/2;
	grid-row: 2/3;
	background-color: #bbb;
}

.pdf_list {
	background-color: #666;
	border-radius: 5px;
	padding: 20px;
	font-size: 150%;
}

.info_block {
	grid-column: 1/2;
	grid-row: 3/4;
	background-color: #888;
}

.waffle img {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 4px;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 15px; /* Set a small width */
    height: 15px; /* Set a small width */
}

/* Add a hover effect (blue shadow) */
.waffle img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
#newseason {
    width: 225px;
}
#newseason option{
    width: 225px;
}
#newcard  {
    width: 225px;
}
#newcard option{
    width: 225px;
}

#newteam {
    width: 225px;
}
#newteam option{
    width: 225px;
}
#newleague {
    width: 225px;
}
#newleague option{
    width: 225px;
}

#newreferee input[type=text] {
    width: 100%;
}