h2{ 
    color: white;
   
    margin-top: 2%;
    margin-bottom: 2%;
    vertical-align:middle;
    font-size: 1.8em;
    
}
    
body{
	
    margin: 0px 0px;
    padding: 0px;
}
#scorecard thead tr th:first-child,
#scorecard tbody tr td:first-child {
 width: 35%;
 text-align: left;
 font-weight: bold;
}
.flex-dices {
    display: flex;
   justify-content: space-around;
   flex-direction: row;
}
.Titlecontainer{
    background-color: #4CAF50;
    font-size: 1.2em;
    display: flex; 
    justify-content: center;
    flex-direction: column;
   
    
}
.container{
    background-color:#FFF;
   
    display: flex; 
    justify-content: center;
    flex-direction: column;
    
    
}
.container div {
   

}
.dice img {
 height: 100%;
 width:100%;
}
.lockdice img {
     height: 100%;
     width:100%;
   }

.lockdice {
    
    background-color: green;
   
}
.dice{
   
}
.dices{
    display: flex;
    justify-content: space-around
}
#Title {
    text-align: center;
}
table {
    background: rgba(255, 255, 255, .5);
    width:20%;
    overflow: hidden;
    margin-left: 2%;
}
th, td {
    text-align: center;
    padding: 8px;
    font-size: 1em;
    font-weight: bold;
  }
canvas{
    position: absolute;
    z-index: -1;
}
body{
     z-index: 1;

}
.lastline{
    background-color: black !important;
    color:white;
   
}

.scorecardMain  {
    width: 100%;
    opacity: 1.0;
 
    flex-direction: column;
    display: inline-block;
    box-sizing: border-box;

}



/*Dice cell hover, --------------------------------------------- */

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}


#scorecard {

}

#scorecard td, #customers th {
    border: 0.5% solid #ddd;
    padding: 0.5%;

}

#scorecard tr:nth-child(even){background-color: #f2f2f2;}

#scorecard tr:hover {background-color: black;
    color:white;
}
table {
    margin-left: 0%;
}

 .top{
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    text-align: left;
    background-color: #4CAF50;
    color: white;
    height: 10%;
}


.MessageContainer {
    background-color: black !important;
    color: white!important; 
    text-align: center;
    height: 2em;    
}

.Message {
   
align: center;
text-align: center;
margin-top: 0%; 
margin-bottom: 0%;
display: block;



}
#Message{
    background: rgba(255, 255, 255, 1);

}



.scorecardMain table {
    width:100%;
    opacity: 1.0;
    box-sizing: border-box; 

}     

   /*.----------smalle screen------------*/
   
    .button {
        background-color:black; /* Green */
        height: 1.0;
        border: none;
        color: white;
     
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
        font-size: 2.0em;
        width:100%;
        
        
    }
    h1{
        font-size: 0.8em;
    }
/*----------------------------*/

@media only screen 
  and (min-width: 600px)

   {
   .scorecardMain table {
    width:40%;
    opacity: 1.0;
    box-sizing: border-box; 
    }
    .button {
        background-color:black; /* Green */
        height: 2.0em;
        border: none;
        color: white;
    
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
        font-size: 2.0em;
        width: 40%;
        
        
    }
    .Titlecontainer{
        background-color: #4CAF50;
        font-size: 1.2em;
        display: flex; 
        justify-content: center;
        flex-direction: column;
        max-height: 2.0em ;
        text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
       
        
    }
 
    
 
 
  }

  @media only screen 
  and (min-width: 320px) 
  and (max-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

    th, td {
        padding: 0px;
    }
    tr{
    
    }
    .scorecardMaintable {
       
        opacity: 0.8;
        box-sizing: border-box; 
        }
        .button {
            background-color:black; /* Green */
            height: 2em;
            border: none;
            color: white;
        
            text-align: center;
            text-decoration: none;
            box-sizing: border-box;
            font-size: 2em;

            text-align: center;
            padding-bottom: 5%;
           
            
            
        }
        .Titlecontainer{
            background-color: #4CAF50;
           
            display: flex; 
            justify-content: center;
            flex-direction: column;
            max-height: 1em ;
            text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
           
            
        }
        .Titlecontainer h2{
            font-size: 0.5em;
           
            
        }
        img {
            margin: 0px 0px 0px 0px;
        }
     
        
     
     
  
}