/*@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');*/


@font-face {
  font-family: "League";
  src: url("fonts/League.otf");
}

@font-face {
  font-family: "Friz";
  src: url("fonts/friz.ttf");
}

/*
@font-face {
  font-family: "myFirstFont";
  src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");
}*/

*, *:before, *:after {
	box-sizing:border-box;
}

body {
   
	padding: 0;
	/*font-family:'Source Sans Pro', sans-serif;*/
  font-family:"Friz", Arial;
	/*margin:0;*/
	background-color: #ffffff;
	/*background-image : url("https://images3.alphacoders.com/129/1291921.jpg");*/
	margin : 0;
}

mark {
  color : green;
  background-color: transparent;
  font-weight: bold;
  font-size: 48px;
}
.maindiv{
     /*margin : 0 100px 0 100px;*/
     /*background-image : url("https://images3.alphacoders.com/129/1291921.jpg");*/
    /* background-image : url("https://wallpapers.com/images/featured/league-of-legends-background-a1iu7ppvueyfvfdw.jpg");*/
    /*background-color: #192340; */
    background-color:#0c1120;
     min-height:1000px;
     /*width: 1000px;*/
}

.homediv{
     /*margin : 0 100px 0 100px;*/
     background-image : url("https://wallpapers.com/images/featured/league-of-legends-background-a1iu7ppvueyfvfdw.jpg");
}

h1,h2,h3,h4,h5,h6 {
	margin:0;
  color:white;
  font-family:"League", arial;
  font-weight:normal;
}

.container {
	max-width: 1000px;
	margin-right:auto;
	margin-left:auto;
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:100vh;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #000000;
  margin: 10px;
}

td, th {
  border: 1px solid #000000;
  text-align: left;
  padding: 0px;
}

.won {
    background-color: #baffab;
}

.started {
  background-color: #eb9412;
}

.relative {
    position: relative;
}

.divleft {
    position: absolute;
    left: 0;
}

.div5 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.divright {
    position: absolute;
    right: 0;
}

.box {
    width: 50px;
    height: 50px;
}

.box2 {
  display: inline-block;
  width: 400px;
  height: 500px;
  margin : 0 1em 1em 1em;
}

.box3 {
  display: inline-block;
  width: 400px;
  height: 400px;
  margin : 0 1em 1em 1em;
}



/*
li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li h3 {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}*/

.active {
  background-color: #04AA6D;
}



p {
     margin : 0 100px 0 100px;
     text-align: center;
     color: white;
     font-size : 24px;
}

/* Style the form - display items horizontally */
.form-inline {
  float : right;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  color: white;
}

select{
    height:48px;
    width:200px;
}

/* Add some margins for each label */
.form-inline label {
  margin: 5px 5px 5px 0;
}

/* Style the input fields */
.form-inline input {
  vertical-align: middle;
  margin: 5px 5px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Style the submit button */
.form-inline button {
  /*background-color: dodgerblue;*/
  background-color: #c89c38;
  border: 1px solid #ddd;
  color: white;
  font-size: 16px;
  margin: 5px 5px 5px 0;
  width:100px;
  height:38px;
}

.form-inline button:hover {
  background-color: #a17f30;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
  .form-inline input {
    margin: 5px 10px 5px 0;
    width: 100px;
  }

  .form-inline {
    width: 200px;
  }
  .form-inline button {
    width:90px;
  }
}


.login {
    border: 3px solid #f1f1f1; 
    width:300px; 
    margin:auto;
    background-color:white;
}

.containerlogin input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.greenbutton {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.redbutton {
  background-color: #e4180a;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.containerlogin button:hover {
  opacity: 0.8;
}


.login .containerlogin {
  padding: 16px;
 
}

footer{
  height: 50px;
  background-color:  #333;
}


.dot {
  height: 15px;
  width: 15px;
  text-align: center;
  margin:auto;
  border-radius: 50%;
  display: inline-block;
}

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }


.statsdiv {
  display: inline-block;
  width : 700px;
}

.statstable {
  background-color: #012B39;
  border-radius: 0.25em;
  border-collapse: collapse;
  margin: 1em;
}
.statstable thead tr td {
  border-bottom: 1px solid #364043;
  border-right: none;
  border-left: none;
  color: #E2B842;
  font-size: 1.2em;
  font-weight: 600;
  padding: 0.5em 1em;
  text-align: left;
}
.statstable thead tr {
  background-color: #012B39;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #364043;  
  color: #E2B842;
  font-size: 1.2em;
  font-weight: 600;
  padding: 0.5em 1em;
  text-align: left;
}
.statstable tbody tr td {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 400;
  padding: 0.65em 1em;
}

.statstable tbody tr{
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 400;
  padding: 0.65em 1em;
}

.statstable tbody tr th {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 400;
  padding: 0.65em 1em;
}

.statstable .disabled td {
  color: #4F5F64;
}
.statstable tbody tr {
  transition: background 0.25s ease;
}
.statstable tbody tr:hover {
  background: #014055;
}




.statstableODD {
  background-color: #034155;
  border-radius: 0.25em;
  border-collapse: collapse;
  margin: 1em;
}
.statstableODD thead tr td {
  border-bottom: 1px solid #364043;
  border-right: none;
  border-left: none;
  color: #E2B842;
  font-size: 1.2em;
  font-weight: 600;
  padding: 0.5em 1em;
  text-align: left;
}
.statstableODD thead tr {
  background-color: #034155;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #364043;  
  color: #E2B842;
  font-size: 1.2em;
  font-weight: 600;
  padding: 0.5em 1em;
  text-align: left;
}
.statstableODD tbody tr td {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 400;
  padding: 0.65em 1em;
}

.statstableODD tbody tr{
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 400;
  padding: 0.65em 1em;
}

.statstableODD tbody tr th {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 400;
  padding: 0.65em 1em;
}

.statstableODD .disabled td {
  color: #4F5F64;
}
.statstableODD tbody tr {
  transition: background 0.25s ease;
}
.statstableODD tbody tr:hover {
  background: #014055;
}


tr:nth-child(even) {
  background-color: #dddddd;
}
tr:nth-child(odd) {
  background-color: #ffffff;
}

a:link {
  text-decoration: none;
  color : white;
  /*font-weight: bold;*/
}

a:visited {
  text-decoration: none;
  color : white;
  /*font-weight: bold;*/
}







.teamtable {
  background-color: #012B39;
  border-radius: 0.25em;
  border-collapse: collapse;
  margin: 0;
}
.teamtable thead tr td {
  border-bottom: 1px solid #364043;
  border-right: none;
  border-left: none;
  color: #E2B842;
  font-size: 1.2em;
  font-weight: 600;
  /*padding: 0.5em 1em;*/
  text-align: left;
}
.teamtable thead tr {
  background-color: #012B39;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #364043;  
  color: #E2B842;
  font-size: 1.2em;
  font-weight: 600;
  /*padding: 0.5em 1em;*/
  text-align: left;
}
.teamtable tbody tr td {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 400;
  font-size: 15px;
  /*padding: 0.65em 1em;*/
}

.teamtable tbody tr .won {
  background-color: #346100;
}

.teamtable tbody tr .started {
  background-color: #eb9412;
}

.teamtable tbody tr{
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 400;
  font-size: 15px;
  /*padding: 0.65em 1em;*/
}

.teamtable tbody tr th {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 400;
  /*padding: 0.65em 1em;*/
}

.teamtable .disabled td {
  color: #4F5F64;
}
.teamtable tbody tr {
  transition: background 0.25s ease;
}
.teamtable tbody tr:hover {
  background: #014055;
}

.thumbnail_sum{
  width: 400px;
  height: 300px;
  background:linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)), url("./images/bg/summonersrift.webp");
  background-size:cover;
  /*background-image: url("./images/bg/summonersrift.webp");
  background-color: rgba(0, 0, 0, 0.5);*/
  position: relative;
  display: inline-block;
  margin: 10px;
  border-radius: 10px;
}

.thumbnail_how{
  width: 400px;
  height: 300px;
  background:linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)), url("./images/bg/howlingabyss.webp");
  background-size:cover;
  /*background-image: url("./images/bg/summonersrift.webp");
  background-color: rgba(0, 0, 0, 0.5);*/
  position: relative;
  display: inline-block;
  margin: 10px;
  border-radius: 10px;
}



@media only screen and (max-width: 750px) {
  .useless {
    display: none;
  }
  .box3{
    margin:0;
  }

  .statsdiv {
    display: inline-block;
    width :  400px;
    margin : 0;
  }
  .statstable{
    margin : 0;
  }
  .statstableODD{
    margin : 0;
  }
}


.navbar {
  /*overflow: hidden;*/
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  font-family: "Arial";
  color: white;
  padding: 16px;
  text-decoration: none;
  border: none;
  font-weight: normal;
}


/* Dropdown Button */
.dropbtn {
  background-color: #c89c38;
  color: white;
  padding: 16px;
  font-size: 16px;
  font-family: "Arial";
  text-decoration: none;
  font-weight: normal;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2e2e2e;
  min-width: 250px;  
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  min-width: 250px;
  text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #a17f30;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #a17f30;}



h1 {
  text-align: center;
  color: white;
  font-size : 96px;
  font-weight:normal;
}
h2 {
  text-align: center;
  color: white;
  font-size : 48px;
  font-weight:normal;
}




table.minimalistBlack {
  border: 3px solid #000000;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  width : 400px;
  margin:auto;
}
table.minimalistBlack td, table.minimalistBlack th {
  border: 1px solid #000000;
  padding: 5px 4px;
}
table.minimalistBlack tbody td {
  font-size: 13px;
}
table.minimalistBlack thead {
  background: #CFCFCF;
  background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  border-bottom: 3px solid #000000;
}
table.minimalistBlack thead th {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: left;
}
table.minimalistBlack tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  border-top: 3px solid #000000;
}
table.minimalistBlack tfoot td {
  font-size: 14px;
}

.minimalistBlack tbody tr:nth-child(even) {
  background-color: white;
}

td h3 a{
  font-family: Arial;
}

thead tr td h3 a{
  font-family: "League";
}

.greenbutton:disabled {
  background-color: lightgray;
}

.blueprogress::-moz-progress-bar { background: blue; }
.blueprogress::-webkit-progress-value { background: blue; }
.blueprogress { color: blue; }

.blueprogress::-webkit-progress-bar {background-color: transparent; width: 100%;}
.blueprogress {background-color: transparent;}


.redprogress::-moz-progress-bar { background: red; }
.redprogress::-webkit-progress-value { background: red; }
.redprogress { color: red; }

.redprogress::-webkit-progress-bar {background-color: transparent; width: 100%;}
.redprogress {background-color: transparent;}

.redprogress {
  transform: rotate(180deg);
}