@import url("../global/fonts.css");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  color: #ffffff;
}

.wrapperHeaderMain {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  padding: 2em 0;
  width: 100%;
  z-index: 88;
  transition: all 0.6s ease-in-out;
  background-color: #0c1015;
}

.containerHeaderContent {
  max-width: min(90%, 98em);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapperListLinksRegister {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style-type: none;
  gap: min(2vw, 2em);
}

.wrapperListLinksRegister li {
  display: flex;
}

.wrapperListLinksRegister a {
  border: 1px solid #fff;
  padding: 0.4em clamp(1em, 2vw, 2em);
  border-radius: 0.5em;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-align: center;
  font-weight: 500;
}

.differentColorAnchor {
  border: 1px solid #0000 !important;
  background: linear-gradient(94deg, #6eed82 0%, #ffc608 100%);
  color: #222;
}

#jb-logo-horiz-navbar {
  height: 2em;
  width: auto;
}

.containerPriceAndTableResultDay {
  background-color: #ffffff;
  background-image: url("../assets/images/home/gradient-area-cotação-MD.svg");
  background-repeat: repeat-x;
  transition: all 1.2s ease-in-out;
}

.sectionResults {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  width: 100%;
  padding: 10em 2em 5em 2em;
  color: #000000;
}

.sectionResults > form {
  display: flex;
  justify-items: flex-start;
  align-items: center;
  gap: 1em;
  width: 100%;
  max-width: 1250px;
}

.sectionResults > form > button[type="submit"] {
  padding: 0.5em 1.2em;
  outline: none;
  border-radius: 0.3em;
  border: 1px solid #fff5;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.7;
  font-weight: 500;
  background: linear-gradient(94deg, #6eed82 0%, #ffc608 100%);
  color: #222;
  height: auto;
  text-transform: uppercase;
}

.sectionResults > form > button[type="submit"]:hover {
  opacity: 1;
}

.textMainResult {
  display: flex;
  align-items: center;
  color: #0c1015;
  font-weight: 600;
  font-size: clamp(1.5em, 2vw, 2em);
  gap: 0.5em;
}

.textMainResult input {
  border-radius: 1em;
  border: 1px solid #fed5219d;
  font-size: 0.5em;
  padding: 0.2em 1em;
  color: #fed621;
  background-color: #0c1015;
  margin-bottom: -4px;
}

.containerTableScrollMobile {
  background-color: #090b0f;
  color: #fff;
  height: 100%;
  width: min(100%, 30em);
  max-width: 120em;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 0.8em 0.6em 2em;
  overflow-x: scroll;
  overflow-y: hidden;
}

.containerTableScrollMobile {
  display: none;
}

.navBarTableScrollMobile {
  padding: 0 0 1.2em 0;
  display: flex;
  align-items: center;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}

.lottery-option input {
  display: none;
}

.lottery-option {
  background: #090b0f;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  width: 100%;
  color: #8a8b8c;
}

.lottery-option label {
  display: flex;
  width: 100%;
  padding: 0.8em 6em;
  font-size: 1.2em;
  font-weight: 500;
}

.lottery-option:hover,
.lottery-option label:hover {
  cursor: pointer;
}

.lottery-option input[type="radio"]:checked + label {
  border-bottom: 2px solid #ffc608;
  background: rgba(21, 28, 37);
  color: #fff;
}

.tablesResultsMobile {
  display: flex;
  align-items: center;
  width: 100%;
  height: 23.6875em;
  background: linear-gradient(
    231deg,
    rgba(21, 28, 37, 0.9) 79.23%,
    rgba(111, 221, 62, 0.41) 100%,
    rgba(111, 221, 62) 100%
  );
  padding: 2em;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-color: #fff #0c1015;
  scrollbar-width: 1px;
  gap: 5em;
}

.containerTablesResults {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  flex: 0 0 auto;
  position: relative;
}

.tablesResultsHourBox {
  width: 100%;
  display: flex;
}

.tablesResultsHourBox p {
  font-size: 0, 8125em;
  font-weight: 500;
}

.tableResultsDay {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
  padding: 0 1em;
  overflow: hidden;
}

.tableResultsDay tr:nth-child(1) {
  position: sticky;
  top: 0;
  left: 0;
}

.tableResultsDay tr span {
  padding: 0.5em 0.8em;
  border-radius: 100%;
  background-color: #0c1015;
  color: #ffffff;
}

.tableResultsDay tr:nth-child(1) th:nth-child(1) span {
  border-radius: 0.8em;
  background: #d9d9d9;
  color: #0c1015;
  padding: 0.4em 1em;
}

.tableResultsDay tr {
  border-bottom: 1px solid rgba(113, 113, 113, 0.3);
  transition: all 0.3s ease;
}

.tableResultsDay td,
.tableResultsDay th {
  text-align: center;
  padding: 1em;
  font-weight: 300;
  color: #cecfd0;
  font-size: 1em;
}

.tableResultsDay th {
  color: #000000;
  padding: 1.5em 1em;
  font-weight: 700;
  font-size: 1.1em !important;
  background: linear-gradient(91deg, #ffc608 -7.3%, #ffc608 100%);
}

.tableResultsDay .lotteryResult {
  font-weight: 400 !important;
  font-size: 1.125em !important;
  color: #ffffff;
}

.containerListLotteryResultsBox {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: stretch;
}

.listLotteryResultsBox {
  display: flex;
  align-items: center;
  gap: 1em;
  width: 100%;
}

.listLotteryResultsBox p {
  color: #8a8b8c;
}

.imageAnimalTen {
  width: clamp(190px, 25vw, 240px);
  position: absolute;
  bottom: 0;
  left: 0;
}

.tr-ON {
  opacity: 1;
}

.tr-OFF {
  display: table-caption;
  opacity: 0;
  border: none;
  width: 0 !important;
  height: 0 !important;
  transform: translateX(-500px);
  display: none !important;
}

.containerTableScroll {
  height: 100%;
  width: 80%;
  overflow: scroll;
  background-color: #0c1015;
  border-radius: 0 0.5em 0.5em 0;
}

.containerSelectLotteryResult {
  display: flex;
  gap: 0.875em;
  flex-direction: column;
  width: 20%;
  height: 100%;
  background-color: #090b0f;
  padding: 4em 2em;
  border-radius: 0.5em 0 0 0.5em;
  border-right: 3px solid #ffc608;
  min-width: 185px;
  overflow: auto;
}

.containerSelectLotteryResult label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #8a8b8c;
  font-size: 1.125em;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
}

.containerSelectLotteryResult label:hover {
  color: #ffc608;
}

.containerSelectLotteryResult label::before {
  content: " ";
  width: 0.5em;
  height: 0.5em;
  background-color: #ffc608;
  border-radius: 100%;
  transform: translateX(-50px);
  opacity: 0;
  transition: all 0.3s ease;
}

.containerSelectLotteryResult label:hover::before {
  transform: translateX(0);
  opacity: 1;
}

.containerSelectLotteryResult input:checked + label {
  color: #ffc608;
  font-weight: 500;
}

.containerSelectLotteryResult input:checked + label::before {
  transform: translateX(0);
  opacity: 1;
}

.containerSelectLotteryResult input {
  display: none;
}

.containerTableResultsDay {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 30em;
  max-width: 1300px;
  box-shadow: 5px 10px 50px 0px rgba(51, 51, 51, 0.3);
}

.containerText {
  max-width: 1400px;
  margin-top: 1em;
}

.containerText > h1 {
  color: #ffc608;
  font-size: clamp(1.7em, 2vw + 1em, 2em);
  font-weight: 600;
}

.containerText > h1 > span {
  color: #0c1015;
}

.containerText > p {
  font-size: 1em;
  color: #222324;
}

@media (max-width: 578px) {
  .containerTableResultsDay {
    display: none;
  }

  .containerTableScrollMobile {
    display: flex;
  }

  .sectionResults > form,
  .textMainResult {
    flex-direction: column;
  }

  .textMainResult {
    gap: 0.3em;
  }

  .textMainResult input {
    font-size: 0.5em;
  }
}

@media (max-width: 520px) {
  .containerTablesResults {
    gap: 2em;
    align-items: center;
  }

  .tablesResultsHourBox {
    justify-content: center;
  }

  .imageAnimalTen {
    top: 24em;
    left: 50%;
    transform: translateX(-50%);
  }

  .tablesResultsMobile {
    align-items: flex-start;

    flex-direction: row;
    height: clamp(39em, 40vh, 39em);
  }
}