html{
  font-family: Tahoma, sans-serif;
  text-align: center;
  height: 100%;
}

#mainTable{
  display: none;
}

.rematch_all{
  display: none;
}

.nameinput{
  display: block;
  padding-bottom: 20px;
}

.nameinput input{
  padding: 13px;
  text-align: center;
  font: bold 15px Arial, sans-serif;
}

body{
  background: url(bg.jpg);
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

table#mainTable{
  display: inline-block;
  margin: 3%;
  border: solid 8px #EEE;
  box-shadow: 0 0 20px #333;
}

table#mainTable td{
  border: solid 3px #CCC;
  background-color: #FFF;
}

table#mainTable td button{
  width: 30px;
  height: 30px;
}

table#mainTable td span{
  font-weight: bolder;
  display: inline-block;
  width: 30px;
  height: 24px;
  padding-top: 6px;
}

.bombcount1{
  color: #545454;
}

.bombcount2{
  color: #fa1e1e;
}

.bombcount3{
  color: #08009e;
}

.bombcount4{
  color: #b300ff;
}

.bombcount5{
  color: #f500b8;
}

.bombcount6{
  color: #00ab55;
}

.bombcount7{
  color: #cbcf00;
}

.bombcount8{
  color: #de6800;
}

.basilankare{
  background-color: #ff3636 !important;
}

.dogruisaretlenmis{
  background-color: #b3ff8a !important;
}

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:12px;font-weight:bold;padding:10px 5px;word-break:break-all;;border:solid 2px #CCC}
.tg th{font-family:Arial, sans-serif;font-size:12px;font-weight:bolder;padding:10px 5px;word-break:break-all;border:solid 2px #CCC}
.tg .tg-0pky{text-align:left;vertical-align:middle;padding-left:10px;padding-right:10px}
.tg .tg-0lax{text-align:center;vertical-align:middle;font-size:15px}
.tg .tg-0lax span{
  font-style: italic;
  font-weight: normal;
  font-size: 10px;
  color: #CCC;
  display: inline-block;
  clear: both;
  padding-top: 5px
}

.leaderboard{
  width: 600px;
  display: inline-block;
  margin-top: 3%;
  background-color: #FFF;
  box-shadow: 0 0 20px #333;
  display: none;
}

.leaderboard .baslik{
  display: block;
  margin: 0;
  padding: 0;
  font: bold 18px Arial, sans-serif;
  letter-spacing: -1px;
  padding: 10px;
  border:solid 2px #333;
  padding-left: 0;
  padding-right: 0;
  width: 238px;
  background-color: #F3F3F3;
  margin-bottom: 5px;
  color: #F1F1F1;
}

.leaderboard .part1{
  display:inline-block;
  width: 250px;
  margin-top: 30px;
}

.leaderboard .part2{
  display:inline-block;
  width: 240px;
  margin-top: 30px;
}

.leaderboard .part3{
  display:inline-block;
  width: 250px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.leaderboard .part4{
  display:inline-block;
  width: 240px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.createTable{
  width: 250px;
  display: inline-block;
  margin-top: 3%;
  background-color: #FFF;
  box-shadow: 0 0 20px #333;
  padding: 30px;
}

.createTable .logo{
  display: block;
  text-align: center;
  padding-bottom: 30px
}

.copyright{
  display: block;
  text-align: center;
  padding-top: 30px;
  font: italic bold 15px Arial, sans-serif;
  letter-spacing: -1px;
  color: #F1F1F1;
  text-shadow: 0px 0px 3px rgba(0,0,0,.5);
  opacity: .3;
  margin-bottom: 30px;
  clear: both;
}

.createTable .forminput{
  display: block;
  text-align: center;
  padding-bottom: 8px
}

.createTable .forminput:last-child{
  padding-bottom: 0;
}

.createTable .forminput input{
  padding: 10px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 14px;
  text-align: center;
}

.createTable .forminput  button{
  padding: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-style: italic;
  cursor: pointer;
}

.createTable .forminput .level{
  display: inline-block;
  width: 150px;
  padding: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
  font: italic bolder 18px sans-serif;
  letter-spacing: -1px;
  box-shadow: 0 0 15px rgba(0,0,0,.4);
}

.createTable .forminput .level span{
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 0;
}

.createTable .forminput .level b{
  font-style: normal !important;
}

.createTable .forminput .kolay{
  background-color: #292929;
  color: #F1F1F1
}

.createTable .forminput .kolay:hover{
  color: #292929;
  background-color: #FFF;
  box-shadow: 0 0 15px rgba(0,0,0,.7);
}

.createTable .forminput .orta{
  background-color: #003d52;
  color: #F1F1F1
}

.createTable .forminput .orta:hover{
  color: #292929;
  background-color: #FFF;
  box-shadow: 0 0 15px rgba(0,0,0,.7);
}

.createTable .forminput .zor{
  background-color: #520000;
  color: #F1F1F1
}

.createTable .forminput .zor:hover{
  color: #292929;
  background-color: #FFF;
  box-shadow: 0 0 15px rgba(0,0,0,.7);
}

.createTable .forminput .uzman{
  background-color: #52004a;
  color: #F1F1F1
}

.createTable .forminput .uzman:hover{
  color: #292929;
  background-color: #FFF;
  box-shadow: 0 0 15px rgba(0,0,0,.7);
}

.createTable .forminput .leader{
  background-color: #4a4a4a;
  color: #F1F1F1;
  font-size: 17px;
  margin-top: 15px;
}

.createTable .forminput .leader:hover{
  color: #292929;
  background-color: #FFF;
  box-shadow: 0 0 15px rgba(0,0,0,.7);
}

.createTable .forminput .custom{
  background-color: #737373;
  color: #F1F1F1
}

.createTable .forminput .custom:hover{
  background-color: #5c5c5c;
}

.goBackLeader{
  display: inline-block;
  background-color: #FFF;
  padding: 13px;
  margin-right: 10px;
  color: #333;
  box-shadow: 0 0 18px rgba(0,0,0,.4);
  text-decoration: none;
  clear:both;
  margin-bottom: 30px;
  font-weight:bold;
  letter-spacing: -1px;
  font: normal bolder 15px sans-serif;
}

.goBackLeader:hover{
  background-color: #F3F3F3;
}

.rematch{
  display: inline;
  background-color: #FFF;
  padding: 10px;
  margin-right: 10px;
  color: #333;
  box-shadow: 0 0 18px rgba(0,0,0,.4);
}

.rematch[href]{
  font: normal bolder 15px sans-serif;
  letter-spacing: -1px;
  box-shadow: 0 0 18px rgba(0,0,0,.4);
  text-decoration: none;
}

.rematch[href]:hover{
  background-color: #e0e0e0;
}

.clearfix {
  overflow: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}