/* default core styles*/

body {
 margin: 0;
 font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
 font-size: 15px;
 background-color:#FFFFFF;
 background: url("images/green-grass-for-texture-background.jpg");
 background-repeat: repeat;
 background-size: 65%;
 background-position: left top;
}

hr {
border-bottom: 1px dashed red;
border-top: 0px;
}

a {
color:#334FBE;
text-decoration: none;
line-height: 180%;
}

a:active {
color:black;
text-decoration: none;
line-height: 180%;
}

/* login screen styles */

input[type=password] {
  width: 200px;
  padding: 10px;
  font-size:14px;
  box-sizing: border-box;
  border: 2px dashed red;
  border-radius: 5px;
}

input[type=submit] {
  padding: 10px;
  font-size:14px;
  box-sizing: border-box;
  border: 2px solid gray;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
  background-color:#192c56;
}

.loginscreen-pass{
  padding: 10px;
  font-size:18px;
  font-weight: bold;
}
/* table header styles */

img.teamlogo {
border: 2px dashed red;
border-radius:50px;
padding:2px;
}

.vs-bubble {
border-radius:10px;
width: 100%;
background-color: #eee;
font-size: 20px;
padding: 2px;
}

#playerheader {
  width: 100%;
  border: none;
}

#playerheader td {
  text-align: center;
}

 .datemarquee {
  border-radius:10px;
  font-size: 18px;
  background-color: #eee;
  padding: 5px;
  margin-bottom: 15px;
  margin-left:20px; 
  margin-right:20px;
  text-align: center;
  
}
 

/* message flags and buttons styles*/

.ondemandbutton{
  background-color: #3ead4b;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
  text-decoration: none;
  color: #FFF;
  font-size: 13px;
  border: none;
  border-radius:5px;
  line-height: 1.6;
}

.nextgameflag{
  background-color: #f44336;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
  text-decoration: none;
  color: #FFF;
  font-size: 13px;
  border: none;
  border-radius:5px;

}

.note-orange {
  border-radius:10px;
  background-color: #f5bc42;
  border-left: 10px solid #f59342;
  margin-bottom: 15px;
  margin-left:20px; 
  margin-right:20px;
  padding: 4px 12px;
}

.note-red {
  border-radius:10px;
  background-color: #ffdddd;
  border-left: 10px solid #f44336;
  margin-bottom: 15px;
  margin-left:20px; 
  margin-right:20px;
  padding: 4px 12px;
  text-align: left;
}

.note-livegame {
  border-radius:10px;
 background-image: linear-gradient(to right, #bdfcc5 , yellow);
  border-left: 10px solid #3ead4b;
  margin-bottom: 15px;
  margin-left:20px; 
  margin-right:20px;
  padding: 4px 12px;
}

.note-green {
  border-radius:10px;
  background-color: #bdfcc5;
  border-left: 10px solid #3ead4b;
  margin-bottom: 15px;
  margin-left:20px; 
  margin-right:20px;
  padding: 4px 12px;
  text-align: left;
}

/* The close button */
button.closebtn {
color: black;
    font-weight: bold;
    float: right;
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #eeeeee;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 18px;
    border: 1px solid black;
    line-height:8px;
}

/* When moving the mouse over the close button */
button.closebtn:hover {
  color: white;
  background-color: black;
}


/* spacers and container styles*/

.lowerpage {
display: block;
margin-left:20px;
margin-right:20px;
text-align:left;
}

.pagecontainer {
	z-index:-2;
	width:90%;
	max-width:980px;
	min-width:400px;
    margin-bottom:10px;
    margin-left:auto; 
	margin-right:auto;
    background-color: #ffffff;
    border-style: dashed;
    border-color: red;
    border-width:2px;
    border-radius:15px;
    padding-left:auto;
    padding-right:auto;
    padding-bottom:20px;
     padding-top:20px;
}

.youtubeplayer
{overflow:hidden; padding-bottom:56.25%; position:relative; height:0;margin-left:20px; margin-right:20px;}

.youtubeplayer iframe
{left:0; top:0; height:100%; width:100%; position:absolute;}

.footercontainer {
	width:100%;
	height:100%;
    background-color: #ffffff;
    display: block;
    border-top: #DDD;
    border-width:1px;
    padding-top:20px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* ACCORDIAN STYLES */
.collapsible-top {
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-style: solid;
  border-color: #FFF;
  border-width:1px;
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible {
  border-style: solid;
  border-color: #FFF;
  border-width:1px;
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible-bottom {
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  border-style: solid;
  border-color: #FFF;
  border-width:1px;
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.active, .collapsible-top:hover {
  background-color: #555;
}

.collapsible-bottom:hover {
  background-color: #555;
}
.active, .collapsible-bottom:active {
  background-color: #555;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
}
.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible-top:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible-bottom:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

.content-bottom {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
}