body{
  align-self: center;
  margin: 0;
  width: 100%;
  height: 100%;
}

label{
  font-size: 30px;
}

input[type="checkbox"]{
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  width: 5%; /*Desired width*/
  height: auto; /*Desired height*/
}


#helpIcon, #exchangeIcon{
  font-size: 15px;
  padding: 5px;
}

/*Generated from CSS3 Gradient Generator; Note not all browsers support CSS3 Gradient
Modified slightly to resolve and pass W3C CSS Validations
*/

#blueRedDiv{
 width:100vw;
 height:100vh;
 background-color:#052afc;

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0300ea', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
 background:-moz-linear-gradient(left, #052afc 50%, #ff0000 50%); /* Firefox 3.6+ */
 background:-webkit-linear-gradient(left, #052afc 50%, #ff0000 50%); /* W3C */
 background:-ms-linear-gradient(left, #052afc 50%, #ff0000 50%);/* Chrome10+,Safari5.1+ */
 background:linear-gradient(#052afc 50%, #ff0000 50%); /* Opera 11.10+ */
 background:linear-gradient(to right, #052afc 50%, #ff0000 50%); /* Only IE11+; seems to work different from the rest, "to" seems to invert the positioning.*/
 background:-webkit-gradient(linear, left bottom, right bottom, color-stop(50%,#052afc), color-stop(50%,#ff0000)); /* Safari 4+,Chrome 2+ */
 display: flex;
 position: relative;
 text-align:center;
 background-size: cover; /*This is key to ensure that the background scale to zoom.*/
 font-size: 100%;
}

#redBlueDiv{
  width:100vw;
  height: 100vh;
  background-color: #ff0000;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0300ea', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
  background:-moz-linear-gradient(right, #052afc 50%, #ff0000 50%); /* Firefox 3.6+ */
  background:-webkit-linear-gradient(right, #052afc 50%, #ff0000 50%); /* W3C */
  background:-ms-linear-gradient(right, #052afc 50%, #ff0000 50%);/* Chrome10+,Safari5.1+ */
  background:linear-gradient( #ff0000 50%,  #052afc 50%); /* Opera 11.10+ */
  background:linear-gradient(to left, #052afc 50%, #ff0000 50%); /* Only IE11+; seems to work different from the rest, "to" seems to invert the positioning.*/
  background:-webkit-gradient(linear, right bottom, left bottom, color-stop(50%,#052afc), color-stop(50%,#ff0000)); /* Safari 4+,Chrome 2+ */
  display: flex;
  position: relative;
  text-align:center;
  background-size: cover; /*This is key to ensure that the background scale to zoom.*/
  font-size: 100%;

}

/*For top portion of score board*/
#left-AO{
  float:left;
  width:50%;
  font-size:50px;
  color:white;
  background-size: cover; 
}

#center-timer{
  background-color: white;
  width:  30%;
  height: 20%;
  margin: 1%;
  font-size: 115px;
  border-style: solid;
  border-color: black;
  vertical-align: text-top;
  background-size: cover; 
}

#right-AKA{
  float:right;
  width:50%;
  font-size:50px;
  color:white;
  background-size: cover; 
}

/*For middle portion of score board*/
#AO_PointZone, #AKA_PointZone{
  align-content: center;
  margin-top: 10%; /*Percent will be shifted here to adjust the spacing*/
  font-size:200px;
  background-size: cover; 
}

#buttonDiv{
  width: auto;
  height: 115px;
  align-items: center;
  background-size: cover; 
}

#AO-minus,#AKA-minus{
  align-content: center;
  margin: 15%;
  font-size:15px;
  position:relative;
  margin-top: 22%;
  background-size: cover; 
}

/*For the bottom portion of score board*/
#foulsLabelBox{
  background-color: lightgrey;
  align-self: baseline;
  font-size: 45px;
  display: inline-block;
  text-align: center;
  margin-top:45%;
  width: 100%;
  height: auto;
  padding: 5px;
  background-size: cover; 
}

#cat1FoulsAO,#cat2FoulsAO,#cat1FoulsAKA,#cat2FoulsAKA{
  align-self: center;
  margin: 2%;
  padding-bottom:5%;
  background-size: cover; 
}


/*Foul Buttons*/
#Cat1_AO_C, #Cat1_AO_K, #Cat1_AO_HC, #Cat2_AO_C, #Cat2_AO_K, #Cat2_AO_HC, #Cat1_AKA_C, #Cat1_AKA_K, #Cat1_AKA_HC, #Cat2_AKA_C, #Cat2_AKA_K, #Cat2_AKA_HC{
  display: inline-block;
  background-color:#f5f5f0;
  border-style: solid;
  border-color: black;
  border-width: thin;
  font-size: 50px;
  text-align: center;
  width: 20%;
  height: auto;
  background-size: cover; 
}


/*Extraction of W3 CSS - Use for the Help icon displaying in modal*/
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.w3-responsive{display:block;overflow-x:auto}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
.w3-hover-none:hover{box-shadow:none!important}