.lockedHeader {
  font-family: "Poppins-Regular";
  font-size: 12px;
  background-color: black;
  border: 2px solid #57b846;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 15px;
  margin-top: 15px;
  width: 90%;
  color: white;
}

.exitButton {
  float: right;
  top: 0;
  text-align: right;
  font-size: 20px;
  margin-top: 15px;
}



.ppUnder {
  font-family: "Poppins-Regular";
  font-size: 15px;
  color: black;
  background-color: white;
  /* border: 5px solid black; */
  /* text-align: center; */
  /* border-radius: 9999px; */
  /* padding: 10px 10px 10px 10px; */
  /* margin-bottom: 15px; */
  width: 100%;
  font-weight: bold;
}

.ppWrap {
  font-family: "Poppins-Regular";
  font-size: 12px;
  color: white;
  background-color: black;
  border: 5px solid black;
  /* text-align: center; */
  border-radius: 9999px;
  /* padding: 10px 10px 10px 10px; */
  margin-bottom: 10px;
  width: 100%;
  /* font-weight: bold; */
}

.ppRed {
  font-family: "Poppins-Regular";
  font-size: 12px;
  color: black;
  background-color: #57b846;
  border: 4px solid #57b846;
  /* text-align: center; */
  /* border-radius: 9999px; */
  /* padding: 10px 10px 10px 10px; */
  /* margin-bottom: 15px; */
  /* width: 100%; */
  /* font-weight: bold; */
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  min-width: 24%;
  max-width: 74%;
  /* width: 68%; */
  padding: 4px 4px 4px 4px;
  white-space: nowrap;
  overflow: hidden;
}

.ppBlue {
  font-family: "Poppins-Regular";
  font-size: 12px;
  color: #57b846;
  background-color: black;
  border: 4px solid #57b846;
  /* text-align: center; */
  /* border-radius: 9999px; */
  /* padding: 10px 10px 10px 10px; */
  /* margin-bottom: 15px; */
  /* width: 100%; */
  /* font-weight: bold; */
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  min-width: 24%;
  max-width: 74%;
  /* width: 28%; */
  padding: 4px 4px 4px 4px;
  white-space: nowrap;
  overflow: hidden;
}

.center {
  text-align: center;
  margin-bottom: 5px;
  padding-bottom: 0px;
}

p[class=left] {
  text-align: center;
  margin-bottom: 5px;
  padding-bottom: 0px;
}

/* CENTER IMG, DIV, OR TEXT */

.centerAll {
  margin: 0 auto;
  padding: 10px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  text-align: center;

}

.centerImg {
  padding: 10px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

/* .Img {
  padding: 10px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
} */

.centerDiv {
  margin: 0 auto;
  padding: 10px;
  display: flex;
  justify-content: center;
  margin: 0 auto;

}

.centerMenu {
  margin: 0 auto;
  padding: 10px;
  /* display: flex; */
  justify-content: center;
  margin: 0 auto;
}

.centerText {
    text-align: center;
    color:white;
}



 body {
    background-color: black;
 }
/* HIDE ELEMENT */

.hide{
  display:none
}

/* POOLPICKS PAGE PROGRESS BARS CSS */

.progress{
  height: 80px;
  background: #fff;
  border-radius: 100px;
  box-shadow: none;
  margin-top: 40px;
  position: relative;
}
.progress .progress-title{
  width: 20%;
  height: 100%;
  background: #fff;
  border-radius: 100px 0 0 100px;
  float: left;
  margin: 0;
  font-size: 15px;
  color: #000;
  line-height: 40px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  position: relative;
}
.progress .progress-title:after{
  content: "";
  border-left: 10px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  top: 10px;
  right: -10px;
  z-index: 1;
}
.progress .progress-bar{
  width: 80%;
  background: #fff;
  box-shadow: none;
  position: relative;
}
.progress .progress-value{
  height: 100%;
  border-radius: 0 100px 100px 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 40px;
  color: #fff;
  animation: animate-positive 2s;
}
.progress.red .progress-value{ background: #ec4251; }
.progress.green .progress-value{ background: #73cd21; }
.progress.blue .progress-value{ background: #2e9ce0; }
.progress.yellow .progress-value{ background: #eea921; }
@keyframes animate-positive{
  0%{ width: 0; }
}
@media only screen and (max-width: 480px){
  .progress .progress-title{
      font-size: 12px;
      letter-spacing: 0;
  }
}

/* CENTER DIVS AND DEFAULT FONT */

div{
  margin: auto;
  font-family: "Poppins-Regular";
  background-color: black;
}




#standings {
  font-family: "Poppins-Regular";
  font-size: 10px;
  width: 95%;
}

#history {
  font-family: "Poppins-Regular";
  font-size: 10px;
  width: 95%;
}

#standings td {
  padding: 5px 5px;
  text-align: left;
  color: white;
}

#history td {
  padding: 5px 5px;
  text-align: left;
  /* color: white; */
}

input[class=formcontrol] {
  font-family: Tahoma;
  font-size: 15px;
  background-color: white;
  border: 2px black;
  color: black;
  border-radius: 8px;
  width: 100%;
}

/* a[class="dropdown-item"] {
  text-align: center;
  background-color: white;
  color: black;
  padding: 5px;
  margin: 4px 2px;
  font-family: "Humger";
  font-size: 18px;
} */

/* a[class="dropdown-item"]:active {
  text-align: center;
  background-color: white;
  color: black;
  padding: 5px;
  margin: 4px 2px;
  font-family: "Humger";
  font-size: 18px;
} */

/* #standings tr:hover {
  background-color: lime;
  color: black;
} */

th {
  /* font-family: 'BlowBrush'; */
  padding: 5px 5px;
  text-align: left;
  background-color: #57b846;
  color: black;
  text-decoration: bold;
  text-decoration: bold;
  padding: 9px 5px 8px 5px;
  font-size: 12px;
  border-bottom: 1px solid white !important;
}

/* #history th {
  font-family: 'BlowBrush';
  padding: 5px 5px;
  text-align: left;
  background-color: green;
  color: white;
  text-decoration: bold;
  padding: 9px 5px 8px 5px;
} */

th:first-child {
  border-top-left-radius: 8px;
}

th:last-child {
  border-top-right-radius: 8px;
}


tr {
  border-bottom: 1px solid white;
}

.thead {
  border-bottom: 1px solid black;
}

/* #history tr {
  border-bottom: 1px solid black;
} */


/* .center {
margin-left: auto;
margin-right: auto;
} */

/* th {
  background-color: green;
  color: white; 
} */

/* td[class=active] {
  color: white;
  background-color: green;
} */

tr[class=topten] {
color: black;
background-color: #57b846;
/* font-weight: bold; */
border-bottom: 1px solid white;
font-weight: bold;
}

.activePickH {
    color: black;
    background-color: #57b846;
    /* font-weight: bold; */
    border-bottom: 1px solid white;
    font-weight: bold;
    }

tr[class=draw] {
  color: red;
  background-color: black;
  /* font-weight: bold; */
  border-bottom: 1px solid white;
  font-weight: bold;
}

tr[class=activeuser] {
  color: white;
  background-color: #57b846;
  font-weight: bold;
  border-bottom: 1px solid white;
  font-weight: bold;
  /* color: white;
  background-color: green; */
  }
  
tr[class=standingsrow] {
  color: white;
  border-bottom: 1px solid white;
  font-weight: bold;
  }

text[class=tabs] {
  font-family: Tahoma;
  color: green;

}

input[class=formcontrol] {
  font-family: Tahoma;
  font-size: 15px;
  background-color: white;
  border: 2px black;
  color: black;
  /* text-align: center; */
  border-radius: 8px;
  width: 100%;
}

/* div[class=row]{
border: 2px black;
border-radius: 8px;
} */

tr[class=pickactive] {
  color: #57b846;
  background-color: white;
  font-weight: bold;
  border-bottom: 1px solid black;
}

/* .content {
  padding: 16px;
}

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

.sticky + .content {
  padding-top: 60px;
} */

.pagetitle {
  font-family: "Poppins-Regular";
  border: 2px solid #57b846;
  /* border-bottom: 2px solid #57b846; */
  /* border-radius: 9999px; */
  background-color: black;
  color: white;
  font-size: 18px;
  width: 95%;
  padding: 10px 10px 10px 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  /* border-bottom: 2px solid green; */
}

/* .denote {
  font-family: "Tahoma";
  border: 2px solid green;
  border-radius: 8px;
  background-color: white;
  color: green;
  font-size: 15px;
  width: 90%;
} */

div[class=main] {
  text-align: center;
  /* font-family: Tahoma; */
  /* padding: 5px; */
}

/* div[class=picksbox] {
  border: 2px solid black;
  padding: 5px 5px;
  width: 90%;
  border-radius: 8px;
  text-align: center;
} */

select {
  font-family: Tahoma;
  border: 2px solid white;
  border-radius: 5px;
  background-color: black;
  color: white;
  font-size: 15px;
  width: 90%;
  padding: 5px 5px;
}

/* button[class=picks] {
  font-family: Tahoma;
  border: 2px solid black;
  border-radius: 9999px;
  background-color: white;
  color: black;
  font-size: 15px;
  width: 90%;
  padding: 5px 5px;
} */

.half-select {
/* font-family: Tahoma; */
border: 2px solid white;
border-radius: 5px;
background-color: black;
color: white;
font-size: 15px;
width: 45%;
padding: 5px 5px;
}

/* form {
    font-family: Tahoma;
    font-size: 15px;
} */

/* .submit {
    font-family: Tahoma;
    font-size: 15px;
    background-color: white;
    border: 2px solid green;
    color: black;
    text-align: center;
    border-radius: 8px;
    width: 100%;
} */

/* .submitpick {
  font-family: Tahoma;
  font-size: 15px;
  background-color: white;
  border: 2px solid green;
  color: black;
  text-align: center;
  border-radius: 9999px;
  width: 90%;
} */

/* .locked {
  font-family: Tahoma;
  font-size: 15px;
  background-color: white;
  border: 2px solid red;
  color: black;
  text-align: center;
  border-radius: 9999px;
  width: 90%;
} */

/* RULES DIV ON RULES PAGE */

.rulesNewDiv {
  font-family: "Poppins-Regular";
  font-size: 15px;
  background-color: black;
  border: 2px solid #57b846;
  /* text-align: center; */
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 15px;
  width: 95%;
}

.rulesDiv {
  font-family: "Poppins-Regular";
  font-size: 15px;
  color: black;
  background-color: white;
  border: 2px solid black;
  /* text-align: center; */
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 15px;
  width: 95%;
}

/* SOCIAL MEDIA BUTTONS ON MENU- DISCORD, FACEBOOK ETC. */

.loginAlert {
  font-family: "Poppins-Regular";
  font-size: 15px;
  background-color: #57b846;
  border: 2px solid #57b846;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  width: 90%;
}

.socialButton {
  font-family: "Poppins-Regular";
  font-size: 15px;
  background-color: #57b846;
  border: 2px solid #57b846;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  width: 70%;
}

.userBar {
  font-family: "Poppins-Regular";
  font-size: 12px;
  background-color: #57b846;
  border: 2px solid #57b846;
  color: black;
  text-align: center;
  /* border-radius: 5px; */
  padding: 5px 5px 5px 5px;
  /* margin-bottom: 10px; */
  width: 100%;
}

.picksSubmitButton {
  font-family: "Poppins-Regular";
  font-size: 15px;
  background-color: #57b846;
  border: 2px solid #57b846;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  width: 90%;
  font-weight: bold;
}

.picksSubmitButton:hover {
  font-family: "Poppins-Regular";
  font-size: 15px;
  color: #57b846;;
  background-color: black;
  border: 2px solid black;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  width: 90%;
  font-weight: bold;
}

.socialButtonNoHover {
  font-family: "Poppins-Regular";
  font-size: 15px;
  background-color: #57b846;
  border: 2px solid #57b846;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  width: 70%;
}

.socialButton:hover {
  font-family: "Poppins-Regular";
  font-size: 15px;
  color: #57b846;
  background-color: black;
  border: 2px solid #57b846;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  width: 70%;
}

.menuItem {
  font-family: "Poppins-Regular";
  font-size: 15px;
  color: #57b846;
  background-color: black;
  border: 2px solid white;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  width: 70%;
}

.menuItem:hover {
  font-family: "Poppins-Regular";
  font-size: 15px;
  color: white;
  background-color: black;
  border: 2px solid white;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  width: 70%;
}

/* FIGHT TITLE IN PICKS PAGE */
.fightTitle {
  font-family: "Poppins-Regular";
  font-size: 15px;
  color: #57b846;
  background-color: black;
  border: 2px solid #57b846;;
  text-align: center;
  border-radius: 5px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 15px;
  width: 90%;
}

/* ADJUST FONT ON PICKS FORM  */

#picksForm  {
  font-family: "Poppins-Regular";
}

/* button[class="telegram"] {
  font-family: Tahoma;
  font-size: 15px;
  background-color: green;
  border: 2px solid green;
  color: white;
  text-align: left;
  border-radius: 9999px;
} */

button[class="activeUsertt"] {
  /* font-family: Tahoma; */
  font-weight: bold;
  font-size: 10px;
  background-color: black;
  border: 2px solid #57b846;
  color: #57b846;
  text-align: left;
  border-radius: 9999px;
  width: 100%;
  white-space: nowrap;
  padding-left: 5px;
  /* margin-left: 5px; */
}

button[class="activeUsernr"] {
  /* font-family: Tahoma; */
  font-weight: bold;
  font-size: 10px;
  background-color: white;
  border: 2px solid white;
  color: black;
  text-align: left;
  border-radius: 9999px;
  width: 100%;
  white-space: nowrap;
  padding-left: 5px;
}

button[class="topTen"] {
  font-weight: bold;
  /* font-family: Tahoma; */
  font-size: 10px;
  background-color: #57b846;
  border: 2px solid black;
  color: black;
  text-align: left;
  border-radius: 9999px;
  width: 100%;
  white-space: nowrap;
  padding-left: 5px;
}

button[class="notRanked"] {
  /* font-family: Tahoma; */
  font-weight: bold;
  font-size: 10px;
  background-color: black;
  border: 2px solid white;
  color: white;
  text-align: left;
  border-radius: 9999px;
  width: 100%;
  white-space: nowrap;
  padding-left: 5px;
  }

/* .form-entry {
    font-family: Tahoma;
    font-size: 15px;
    background-color: white;
    border: 2px solid green;
    color: black;
    text-align: center;
    border-radius: 8px;
    width: 100%;
}

.error {
    font-size: 10px;
    color: green;
}

.username {
  text-decoration: bold;
  color: green;
  font-size: 16px;
} */

/* .usernav {
  padding: 5px;
  font-family: "Tahoma";
  text-align: center;
  font-size: 16px;
}

button[class=redbar] {
  font-family: Tahoma;
  font-size: 10px;
  background-color: red;
  border: 2px solid red;
  color: white;
  text-align: center;
  border-radius: 9999px;
  width: 90%;
  white-space: nowrap;
  min-width: 30%;
}

button[class=bluebar] {
    font-family: Tahoma;
  font-size: 10px;
  background-color: blue;
  border: 2px solid blue;
  color: white;
  text-align: center;
  border-radius: 9999px;
  width: 90%;
  white-space: nowrap;
  min-width: 30%;
} */

  @font-face {
    font-family: "Humger";
    src: url(../fonts/Humger.ttf);
    src: url(../fonts/Humger.woff2);
    src: url(../fonts/Humger.woff);
    src: url(../fonts/Humger.otf);
  }

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

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

  @font-face {
    font-family: Poppins-Regular;
    src: url('../fonts/poppins/Poppins-Regular.ttf'); 
  }

  #red text {
    color: red;

  }

  .red {
    color: red;

  }

  button[class="userInactive"] {
    font-weight: bold;
    /* font-family: Tahoma; */
    font-size: 10px;
    background-color: white;
    border: 2px solid red;
    color: red;
    /* text-align: left; */
    border-radius: 9999px;
    /* width: 100%; */
    white-space: nowrap;
    padding-left: 5px;
  }

  button[class="userActive"] {
    font-weight: bold;
    /* font-family: Tahoma; */
    font-size: 10px;
    background-color: white;
    border: 2px solid #57b846;
    color: #57b846;
    /* text-align: left; */
    border-radius: 9999px;
    /* width: 100%; */
    white-space: nowrap;
    padding-left: 5px;
  }

  .textBlack {
    color: black;
  }

  html {
    background-color: black;
  }

  .close {
    color:black;
    background-color: black;
    /* margin-right: 5px;
    display: block; */
    position: absolute;
    right: 0px;
  }

  .modal-content, .modal-body {
    background-color: black !important;
  }