/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
/*mycode*/
body {
    background-color: #111;
}

.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 250px;
  top: 0;
  height: 100%;
  left: 0;
  background-color: #2F4F4F ;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidepanel button {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
    background-color: #2F4F4F ;
border:none;
}

.sidepanel button:hover {
  color: #f1f1f1;
}
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}



/*error code*/
.erro p {
  margin-top:4px;
   margin-bottom:-10px;
  color: red;
  text-align:center;
}

.erro h4 {
  margin-top:4px;
   margin-bottom:-10px;
  color: green;
  font-size:20px;
  text-align:center;
}


.er  {
  margin-top:10px;
  margin-bottom:15px;
margin-left:10px;
  
}
.er label {
  position: relative;
  cursor: pointer;

  
}

.er label input{
display: none;
float: left;


}
.er h5{

color:red;

}

.er label span.am{
text-align: center;
  position: relative;
  display: inline-block;
  margin: 1px -1px ;
 padding-top:9px;
height:20px;
  width: 68px;
  border: 1px solid #444;
  color:white;
 font-size:13px;
    float: left;
  background-color: green;

}
.er label span.na{
text-align: center;
  position: relative;
  display: inline-block;
  margin: 1px -1px ;
 padding-top:9px;
height:20px;
  width: 68px;
  border: 1px solid #444;
  color:white;
 font-size:13px;
    float: left;
  background-color: blue;

}




/*erro code */





.openbtn {
  font-size: 20px;
  cursor: pointer;
  text-align:center;
  background-color:#2F4F4F;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color:#444;
}







.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}
.header h3{
   float:right;
 margin-top:-15px;
   color: #f1f1f1;
  
}
.header p{
   float:right;
margin-top:5px;
  color: gold;
 
}




.header {
   
   
    height:40px;
  padding: 10px 16px;
  background: #2F4F4F;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

.scrollmenu button {
    color:white;
     border:none;
  background-color: green;
  border-radius:2px;
  white-space: nowrap;
}


div.scrollmenu {
     
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
   
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}



.players  {
  margin-top:10px;
  margin-bottom:15px;
margin-left:10px;
  
}
.players label {
  position: relative;
  cursor: pointer;

  
}

.players label input{
display: none;
float: left;


}


.players label span{
text-align: center;
  position: relative;
  display: inline-block;
  margin: 1px -1px ;
 padding-top:10px;
height:22px;
  width: 68px;
  border: 1px solid #444;
  color:white;
 font-size:13px;
    float: left;
 

}
.player p{

 margin-top:-7px;
 padding-bottom:4px;

}
@media only screen and (min-width: 1000px) {
    .player p{

 margin-top:-15px;
 padding-bottom:3px;

}
    
}



.players label input:checked ~ span
{

  color:white;
  
  background-color: #008eff;
}
.players label input:checked ~ span.player
{
 
  color:white;
  
  background-color: green;
}


.players h2 {
    color:#111;
    text-align:center;
  
  margin-bottom:5px;
margin-left:10px;
  
}

@media only screen and (max-width: 350px) {
    .players label span{
text-align: center;
  position: relative;
  display: inline-block;
  margin: 1px -1px ;
 padding-top:9px;
height:20px;
  width: 60px;
  border: 1px solid #444;
  color:white;
 font-size:10px;
    float: left;
    font-family:arial;
 

}
    
}

.win h2 {
    color:white;
    text-align:center;
   margin-right:50px;
  margin-bottom:1px;

  
}

.win  {
   text-align:center;
  margin-top:10px;
  margin-bottom:10px;
  margin-left:50px;
}

.win label {
  position: relative;
  cursor: pointer;
 
  
}

.win label input{
display: none;
float: left;

}


.win label span{
    font-weight:bold;
  background-color: #2F4F4F;
text-align: center;
  position: relative;
  display: inline-block;
  margin: 1px -1px;
 padding-top:9px;
height:20px;
  width: 68px;
  border: 1px solid #444;
  color:white;
 font-size:15px;
    float: left;
 

}
.win label input:checked ~ span
{

  color:white;
  
  background-color: #008eff;
}
.win label input:checked ~ span.number
{
 font-weight:700;
  color:black;
  text-align: center;
  background-color: white;
}

.amount label input:checked ~ span.ama
{
 font-weight:700;
  color:black;

  background-color: white;
}




.amount  {
  margin-top:40px;
  margin-bottom:30px;
margin-left:10px;
  
}
.amount label {
  position: relative;
  cursor: pointer;

  
}

.amount label input{
display: none;
float: left;


}


.amount label span{
text-align: center;
  position: relative;
  display: inline-block;
  margin: 1px -1px ;
 padding-top:9px;
height:20px;
  width: 68px;
  border: 1px solid #444;
  color:white;
 font-size:13px;
    float: left;
 
}
.amount label input:checked ~ span
{

  color:black;
  
  background-color:white ;
}
.amount label input:checked ~ span.player
{
 
  color:white;
  
  background-color: green;
}


.amount h2 {
    color:white;
    text-align:center;
  
  margin-bottom:5px;
margin-left:10px;
  
}

.send {
   
    text-align:center;
  
}

.button {
    border-radius:3px;
    margin-top:10px;
    margin-bottom:40px;
    text-align:center;
 position: relative;
  background-color: #4CAF50;
  border: none;
  font-size: 18px;
  color: #FFFFFF;
  padding: 10px;
  width: 50%;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}



.paybill {
    text-align:center;
    background-color: #2F4F4F;
    width:90%;
margin:5% 5% 5% 2%;
border-radius:3px;
padding:10px;
}

.paybill h2 {
    float:right;
   color:white;
   font-weight:bold;
   font-family:arial;
   font-size:20px;
}
.paybill h3 {
     margin-top:10px;
   color:white;
   font-weight:bold;
   font-family:arial;
   font-size:20px;
}

.care {
    text-align:center;
    background-color: #2F4F4F;
    width:90%;
margin:5% 5% 100px 2%;
border-radius:3px;
padding:10px;
}

.care h2 {
    margin-bottom:10px;
   color:white;
   font-weight:bold;
   font-family:arial;
   font-size:20px;
}


a{
  text-decoration: none;
}

.care a {
    margin-top:5%;
   color:white;
   font-weight:bold;
   font-family:arial;
   font-size:20px;
}
.care i{
    margin-right:8px;
  margin-top:5%;
}
.info{
    border-radius:7px;
    background-color:#696969 ;
   
  margin:0% 0% 0% 3%;
  width:94%;
}
.info h2{
    font-weight:bold;
    font-family:arial;
   color:black;
   padding:10px;
}
.info p{
   color:white;
   padding-left:10px;
}


.deta{
    border-radius:7px;
    background-color:#2F4F4F;
   
  margin:3% 0% 70px 3%;
  width:94%;
}
.deta p{
    color:#2F4F4F;
}
.deta h2{
    font-weight:bold;
    font-family:arial;
   color:black;
   padding:10px;
}
.deta a{
   color:white;
   padding-left:10px;
}
.wel{
   color:white;
 text-align:center;
}




/*login code*/

.collapsible {
  background-color:black;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

.collapsible: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 h5 {
  color:black;
  margin-top:10px;
}
.content h2 {
  color:green;
  margin-top:5px;
}
.content h4 {
    font-size:15px;
  color:black;
  margin-top:10px;
}


input[type=number], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}


input[type=tel], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}


input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=password], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
.container p {
    
     color:red;
     text-align:center;
 
}

div.container {
   margin:30px 5% 0% 2%;
    width: 90%;
  border-radius: 5px;
  background-color:rgb(245,255,250);
  padding: 10px 10px 8% 10px;
}
.container a {
    font-size:20px;
     float:right;
 
}
.container h2 {
    font-size:20px;
     margin:10px 5% 10% 2%; 
 text-align:center;
}





.swing {
  margin-left:70px;
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
.swing img {
    border: 5px solid #f8f8f8;
    display: block;
}
.swing:after{
    content: '';
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
.swing:before{
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(4deg); }
    100% { transform: rotate(-4deg); }
}

.pay {
    text-align:center;
    background-color: #2F4F4F;
    width:90%;
margin:130px 5% 5% 2%;
border-radius:3px;
padding:10px;
}

.pay h2 {
    float:right;
   color:white;
   font-weight:bold;
   font-family:arial;
   font-size:20px;
}
.pay h3 {
     margin-top:10px;
   color:white;
   font-weight:bold;
   font-family:arial;
   font-size:20px;
}



/*how to play css*/


.ho {
  
    background-color:#2F4F4F;
    width:90%;
margin:10px 10px 0px 2%;
border-radius:3px;
padding:10px 10px 30px 10px;
}

.ho h2 {
   text-decoration: underline;
   color:white;
   font-weight:bold;
   font-family:arial;
   font-size:20px;
}
.ho h4 {
    margin-bottom:4px;
   color:white;
   font-weight:bold;
   font-family:arial;
   font-size:15px;
}
.ho h5 {
    padding-bottom:4px;
   float:right;
   color:white;
  
   font-family:arial;
   font-size:15px;
}

.ho p {
    padding-bottom:4px;
   
   color:white;
  
   font-family:arial;
   font-size:15px;
}


.playing {
  
    background-color:#2F4F4F;
    width:90%;
margin:50px 10px 0px 2%;
border-radius:3px;
padding:10px 10px 30px 10px;
}

.playing h2{
  
    background-color:white;
    width:90%;
margin:0px 10px 4px 2%;
border-radius:3px;
padding:2px 10px 0px 5px;
}
.playing h3{
  
   
margin:0px 10px 4px 2%;
border-radius:3px;
padding:2px 10px 0px 5px;
}

.playing p {
    padding-bottom:4px;
   
   color:white;
  
   font-family:arial;
   font-size:15px;
}

.playing h5 {
    padding-bottom:4px;
   float:right;
   color:white;
  
   font-family:arial;
   font-size:15px;
}