* {
  padding: 0;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

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

*::-webkit-scrollbar {
  display: none;
}

.footer {
  margin-top: 0;
}


.view {
  margin:auto;
  width: 100%;
  height: 10000px;
  min-height: fit-content;
  max-width: 2000px;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
}

.grid {
  width: 100%;
  height: 100%;
  min-height: fit-content;
  color: #fff;
  background-color: #24262b;
  display: grid;
  grid-template-columns: 250px auto;
  border-radius: 5px;
}

.single-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.single-box p {
  margin: 5px auto 0px auto;
}

.single-box span {
  margin: 0px auto 0px auto;
}

.refresh-button {
  margin: 0px auto 0px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 100px;
  margin: 10px auto auto auto;
  background-color: #043c00;
  transition: 0.5s;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.refresh-button:hover {
  background-color: #e91e63;
  transition: 0.4s;
}

.select-search {
  width: 240px;
  height: 40px;
  font-size: 20px;
  border-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  margin: auto auto auto 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
  border: none;
  border-radius: 5px;
  padding: 0em 0em 0em .35em;
}

.search-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 100px;
  margin: 10px auto auto auto;
  background-color: #043c00;
  transition: 0.5s;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-button:hover {
  background-color: #e91e63;
  transition: 0.4s;
}

.lighter-hr {
  height: 1px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  width: 225px;
  margin: 15px auto 15px auto;
}

.filter-title {
  font-size: 24px;
  text-align: center;
  cursor: default;
  margin: auto auto 0px auto;
}

.filter-warning {
  text-align: center;
  margin: auto auto 5px auto;
  height: 25px;
  width: 240px;
  cursor: default;
  font-size: 14px;
  color: #fff;
  filter: brightness(0.5);
}

.smaller {
  margin: 20px auto 5px auto;
  font-size: 18px;
}

.filter-bar {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

.stuck {
  position: sticky;
  top: 90px;
}

.filter-section {
  font-size: 18px;
  width: 240px;
  background-color: rgba(0, 0, 0, 0.5);
  margin: auto;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 5px;
  height: 30px;
  max-height: fit-content;
  overflow: hidden;
  transition: all 0.5s;
  cursor: default;
}

.section-title {
  display: grid;
  grid-template-columns: 200px 40px;
}

.section-title p {
  transform: translateX(20px);
}

.extend-section {
  min-height: fit-content;
  transition: all 1s ease-in-out;
}

.permaclick {
  transition: all 0.4s;
  cursor: pointer;
}

.permaclick:hover {
  background-color: #e91e63;
  filter: brightness(0.5);
}

.filter-group {
  font-size: 16px;
  display: grid;
  grid-template-columns: 65px auto;
  text-align: left;
  overflow: scroll;
}

.filter-group input {
  margin-left: 40px;
  transform: translateY(6px);
}

.filter-group input[type="checkbox"] {
  width: 20px;
  transition: 0.4s;
  cursor: pointer;
  accent-color: #043c00;
}

.filter-group input[type="checkbox"]:hover {
  filter: brightness(0.5);
}

.filter-group label {
  transition: 0.4s;
}

.filter-group label:hover {
  color: #e91e63;
  cursor: pointer;
}

.sub-filter-title {
  margin-bottom: 1px;
  grid-column-start: 1;
  grid-column-end: 3;
}

.sub-filters {
  display: grid;
  grid-template-columns: 20px auto;
  text-align: left;
}

.sub-filters input {
  margin-left: 1px;
  transform: translateY(6px);
}

.link {
  display: grid;
  grid-template-columns: 40px 100px;
  margin: auto auto auto 15px;
  cursor: default;
}

.link span {
  font-size: 40px;
  margin: 0px auto auto 0px;
  padding: 0px;
}

.link a {
  color: #fff;
  text-decoration: none;
  transition: 0.4s;
  margin: 7px auto auto 0px;
}

.link a:hover {
  color: #e91e63;
}

.link i {
  font-size: 20px;
  margin: 10px auto auto auto;
}

.play-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
}

.card {
  background-color: rgba(0, 0, 0, 0.1);
  height: 200px;
  width: 97%;
  border-radius: 5px;
} 

.card-title {
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 100px auto 120px 50px;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: default;
}

.league-box {
  margin-left: 10px;
  cursor: default;
}

.profit-box {
  background-color: rgba(4, 60, 0, 0.8);
  width: 115px;
  min-width: fit-content;
  border-radius: 5px;
  margin: auto 5px auto auto;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}

.percentage-box {
  background-color: rgba(4, 60, 0, 0.8);
  width: 115px;
  border-radius: 5px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}

.card-title p {
  margin: auto;
  font-size: 24px;
  cursor: default;
}

.dropdown-box {
  background-color: #24262b;
  width: 35px;
  height: 35px;
  margin: auto;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
  cursor: pointer;
}

.dropdown-box:hover {
  background-color: #41454e; /* 15% lighter grey */
  /*background-color: #555a66;*/ /* 25% lighter grey */
}

.drop-check {
  border: solid #fff;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 7px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-bottom: 5px;
}

.filter-dropdown {
  height: 25px;
  width: 25px;
  margin-top: 3px;
}

.filter-drop-check {
  padding: 5px;
  margin-bottom: 3px;
  border-width: 0 2px 2px 0;
}

/*
.upArrow {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
*/

.card-info {
  display: grid;
  grid-template-columns: 210px auto;
}

.side-box {
  background-color: rgba(0, 0, 0, 0.5);
  grid-row-start: 0;
  grid-row-end: 2;
  height: 130px;
  width: 200px;
  border-radius: 5px;
  margin: 5px;
}

.side-box-title {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #41454e;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 40px;
  width: 100%;
  cursor: default;
}

.left {
  margin: auto auto auto 5px;
  text-align: left;
}

.right {
  margin: auto 5px auto auto;
  text-align: right;
}

.slot-title {
  overflow: hidden;
  cursor: default;
}

.side-box-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.slot-title-main {
  margin: auto;
  font-size: 16px;
  max-width: fit-content;
  max-height: fit-content;
  overflow: hidden;
}

.top-space {
  margin-top: 10px;
}

.line-box {
  display: grid;
  grid-template-columns: auto 275px auto auto auto;
  background-color: rgba(0, 0, 0, 0.5);
  width: 98%;
  height: 130px;
  margin: 5px;
  border-radius: 5px;
  min-width: fit-content;
  min-height: fit-content;
}

.line-title {
  background-color: #41454e;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 40px;
}

.line-title p {
  text-align: center;
  margin: 8px auto auto auto;
  cursor: default;
}

.line {
  display: grid;
  grid-template-columns: auto auto auto;
  /*box-shadow: 3.5px 2.5px 2.5px #fff;*/
  margin: 2.5px auto 2.5px auto;
  height: 41.25px;
  width: 98%;
  border: double #41454e 1px;
  border-radius: 5px;
}

.border-set {
  border: double #41454e 1px;
  border-radius: 5px;
  margin: auto;
  height: 36.5px;
  width: 98%;
  min-width: fit-content;
}

.border-set p {
  text-align: center;
  margin: 5px auto auto auto;
  cursor: default;
}

.wager {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.wager p {
  margin: auto 0px auto auto;
}

.wager input {
  margin: auto auto auto 0px;
  height: 10px;
  width: 88%;
  color: #fff;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
  font-size: 14px;
  transform: translateY(-1px);
}

.wager:hover {
  border-color: #fff;
}

.gap-edges {
  padding: 0px 10px 0px 10px;
}