div.content {
  overflow-y: scroll;
}

div.content div.padding {
  padding: 14px;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

div.content div.nav-sports {
  padding: 20px;

  background-color: rgba(255, 255, 255, 0.1);

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;

  overflow-x: scroll;
}

div.content div.nav-sports svg {
  cursor: pointer;
}

div.content div.nav-sports div {
  position: relative;
}

div.content div.nav-sports div span {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -4px;
  top: -6px;

  background-color: #ffffff;
  border-radius: 50%;
}

div.content div.nav-sports div.my-bets {
  flex: 1;
  text-align: end;
}

div.content div.padding div.games-calendar {
  display: flex;
  gap: 14px;
}

div.content div.padding div.games-calendar a {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--opaque-text);
  background-color: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 800px;

  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
}

div.swiffy-slider {
  --swiffy-slider-height: 198px;
  width: 100%;

  border-radius: 12px;
  /* overflow: hidden; */
}

div.swiffy-slider .slider-container li {
  position: relative;
}

div.swiffy-slider .slider-container li div.slide-content {
  position: absolute;
  left: 5%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  height: 100%;

  padding: 14px;
  padding-top: 36px;

  width: 300px;

  z-index: 1;
}

div.swiffy-slider .slider-container li div.slide-content h3 {
  color: #ffffff;
  font-weight: bold;
  font-size: 24px;
}

div.swiffy-slider .slider-container li div.slide-content p {
  font-size: 12px;
}

div.swiffy-slider .slider-container li div.slide-content button {
  padding: 12px 20px;

  border: none;
  border-radius: 1000px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;

  text-transform: uppercase;
  font-weight: bold;

  box-shadow: 0px 1px 5px 0px var(--accent);
}

@media (max-width: 425px) {
  div.swiffy-slider .slider-container li div.slide-content {
    padding: 12px;
  }

  div.swiffy-slider .slider-container li div.slide-content h3 {
    font-size: 18px;
  }

  div.swiffy-slider .slider-container li div.slide-content p {
    font-size: 12px;
  }

  div.swiffy-slider .slider-container li div.slide-content button {
    padding: 8px 14px;
  }
}

div.swiffy-slider .slider-container li img {
  width: 100%;

  min-height: var(--swiffy-slider-height);

  object-fit: cover;
}

div.swiffy-slider .slider-container li h2 {
  background-color: transparent;
}

div.swiffy-slider .slider-indicators {
  display: block;
}

div.swiffy-slider .slider-indicators button {
  width: 10px;
  border-radius: 1000px;
  background-color: #ffffff;

  opacity: 1;
}

div.swiffy-slider .slider-indicators .active {
  background-color: var(--accent);

  width: 30px;
}

div.sports-content-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

div.sports-content-block h2 {
  display: flex;
  align-items: center;

  gap: 8px;
}

div.sports-content-block div.block-games {
  margin-bottom: 12px;
}

div.sports-content-block div.block-games div.block-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  overflow-x: scroll;
}

div.sports-content-block div.block-games div.block-filters > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  overflow-x: scroll;
}

div.sports-content-block div.block-games div.block-filters button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;

  padding: 8px;
  border-radius: 1000px;
  border: none;

  color: #ffffff;
  font-weight: bold;
  font-size: 12px;

  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

div.sports-content-block div.block-games div.block-filters button.selected {
  background-color: var(--accent);
}

div.sports-content-block div.block-games div.block-filters i {
  color: var(--opaque-text);
  cursor: pointer;
}

div.sports-content-block div.block-games div.block-filters i:hover {
  color: #ffffff;
}

div.sports-content-block div.block-games {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

div.sports-content-block div.block-games div.block-grid {
  --blocks-background: rgb(5, 45, 110);
  --small-block-height: 204px;

  position: relative;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "block-item-1 block-item-2"
    "block-item-3 block-item-2"
    "block-item-4 block-item-2"
    "block-item-5 block-item-6";
  gap: 15px;
}

@media (max-width: 700px) {
  div.sports-content-block div.block-games div.block-grid {
    display: flex;
    flex-direction: column;
  }
}

div.sports-content-block div.block-games div.block-grid > div {
  padding: 8px 12px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.1);

  cursor: pointer;
}

div.sports-content-block div.block-games div.block-grid div.small-block {
  position: relative;
  display: flex;
  flex-direction: column;

  /* overflow: hidden; */

  height: var(--small-block-height);

  background-color: var(--blocks-background);
}

.absolute {
  position: absolute !important;
}

@keyframes open {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

@keyframes close {
  0% {
    height: 408px;
  }
  100% {
    height: 204px;
  }
}

div.sports-content-block
  div.block-games
  div.block-grid
  div.small-block
  .second-small-block-content {
  position: absolute;
  display: none;

  left: 0;
  top: calc(var(--small-block-height) - 12px);

  border-radius: 0 0 12px 12px;

  padding: 8px 12px;
  width: 100%;
  background-color: var(--blocks-background);

  -webkit-filter: drop-shadow(0px 25px 20px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(0px 25px 20px rgba(0, 0, 0, 0.4));

  z-index: 10000;
}

div.sports-content-block div.block-games div.block-grid div:nth-child(1) {
  grid-area: block-item-1;
}

div.sports-content-block div.block-games div.block-grid div:nth-child(2) {
  grid-area: block-item-2;
}

div.sports-content-block div.block-games div.block-grid div:nth-child(3) {
  grid-area: block-item-3;
}

div.sports-content-block div.block-games div.block-grid div:nth-child(4) {
  grid-area: block-item-4;
}

div.sports-content-block div.block-games div.block-grid div:nth-child(5) {
  grid-area: block-item-5;
}

div.sports-content-block div.block-games div.block-grid div:nth-child(6) {
  grid-area: block-item-6;
}

div.block-games div.block-grid div.small-block .main-small-block-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

div.block-games div.block-grid div.small-block .main-small-block-content .left {
  width: 90%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

div.block-games div.block-grid div.small-block h3 {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 12px;
  font-weight: bold;

  color: var(--opaque-text);
}

@media (max-width: 375px) {
  div.block-games div.block-grid div.small-block h3.block-title {
    font-size: 10px;
  }
}

div.block-games div.block-grid div.small-block .left span.game-time {
  color: var(--accent);
  font-size: 12px;
  font-weight: bold;
}

div.block-games div.block-grid div.small-block .left div.team {
  display: flex;
  align-items: center;

  font-size: 14px;
  font-weight: bold;
}

div.block-games div.block-grid div.small-block .left div.team img {
  width: 30px;
}

div.block-games div.block-grid div.small-block .main-small-block-content .right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  /* width: 10%; */
}

div.block-games div.block-grid div.small-block .right span.time-points {
  border: 1px solid var(--opaque-border);
  border-radius: 12px;
  padding: 6px 12px;

  background-color: rgba(255, 255, 255, 0.1);
}

div.block-games div.block-grid div.small-block span.game-score {
  color: var(--opaque-text);
  font-size: 12px;
  font-weight: bold;
}

div.block-games div.block-grid div.small-block div.game-bets {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;

  margin-top: 8px;
  margin-bottom: 10px;
}

div.block-games div.block-grid div.small-block div.game-bets > div {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background-color: rgba(255, 255, 255, 0.1);
  color: var(--opaque-text);
  border: 1px solid var(--opaque-border);
  border-radius: 8px;

  font-size: 12px;

  flex: 1;
  padding: 10px;

  transition: background-color 0.4s;
}

div.block-games div.block-grid div.small-block div.game-bets > div:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

div.block-games div.block-grid div.small-block div.game-bets div.more-bet-options {
  position: relative;

  flex: 0;
  padding: 12px 12px;
  transition: background-color 0.4s, color 0.4s;
}

/* Cobre o icone dentro do botão para que o click no botão funcione corretamente */
div.block-games div.block-grid div.small-block div.game-bets div.more-bet-options::after {
  content: "";
  inset: 0;

  position: absolute;
}

div.block-games div.block-grid div.small-block div.game-bets div.more-bet-options:hover {
  color: #ffffff;
}

div.block-games div.block-grid div.small-block div.game-bets span.bet-multiplier {
  color: #ffffff;
}

@media (max-width: 425px) {
  div.sports-content-block
    div.block-games
    div.block-grid
    div.small-block
    .second-small-block-content
    .game-bets {
    align-items: flex-start;
    flex-direction: column;
  }

  div.sports-content-block
    div.block-games
    div.block-grid
    div.small-block
    .second-small-block-content
    .game-bets
    > div {
    width: 100%;
  }
}

div.sports-content-block div.block-games div.block-grid div.large-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  height: 644px;

  background-color: var(--blocks-background);

  padding: 8px 60px;

  cursor: auto;
}

@media (max-width: 500px) {
  div.sports-content-block div.block-games div.block-grid div.large-block {
    padding: 8px 20px;
  }

  div.sports-content-block div.block-games div.block-grid div.large-block h2 {
    font-size: 20px;
  }
}

div.block-games div.block-grid div.large-block div.bet-combos {
  display: flex;
  flex-direction: column;
  gap: 12px;

  width: 100%;
}

div.block-games div.block-grid div.large-block div.bet-combos > div {
  position: relative;
  display: flex;
  align-items: center;

  padding: 8px;

  border-radius: 8px;

  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;

  height: 60px;
}

div.block-games div.block-grid div.large-block div.bet-combos div.bet-combo::before {
  content: "";
  position: absolute;

  top: 0;
  right: 0;

  background-color: var(--accent);
  height: 100%;
  width: 10px;
}

div.block-grid div.large-block div.bet-combos div.bet-combo div.club-info-combo {
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

div.block-grid div.large-block div.bet-combos div.bet-combo div.club-info-combo h3 {
  display: flex;
  align-items: center;
  gap: 4px;

  font-size: 12px;
  font-weight: bold;
}

div.block-grid div.large-block div.bet-combos div.bet-combo div.club-info-combo p,
div.block-grid div.large-block div.bet-combos div.bet-combo div.club-info-combo span {
  color: var(--opaque-text);

  font-size: 10px;
  font-weight: bold;
}

div.block-grid div.large-block div.bet-combos div.bet-combo span.bet-value-combo {
  padding: 0 16px;

  font-weight: bold;
}

div.block-grid div.large-block div.bet-combos div.bet-multiplier {
  position: relative;

  font-size: 12px;
  font-weight: bold;

  border: 2px solid var(--accent);

  overflow: hidden;
}

div.block-grid div.large-block div.bet-combos div.bet-multiplier::before {
  content: "MÚLTIPLA BOOST";
  position: absolute;

  top: 0;
  right: -2px;
  padding: 0 4px 4px;

  font-size: 10px;
  color: var(--primary);

  background-color: var(--accent);
  border-radius: 0 0 0 8px;
}

div.block-grid div.large-block div.bet-calculations {
  display: flex;
  flex-direction: column;
  gap: 8px;

  margin-top: 26px;
  width: 100%;
}

div.block-grid div.large-block div.bet-calculations .user-bet-value {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 12px;

  margin-bottom: 8px;
}

div.block-grid div.large-block div.bet-calculations .user-bet-value input,
div.block-grid div.large-block div.bet-calculations .user-bet-value button {
  height: 32px;
}

div.block-grid div.large-block div.bet-calculations .user-bet-value > div {
  border: 2px solid yellow;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;

  width: 100px;
  padding: 0 8px;

  border: 1px solid var(--opaque-border);
  background-color: var(--primary);

  border-radius: 4px;

  overflow: hidden;
}

div.block-grid div.large-block div.bet-calculations .user-bet-value > div input {
  color: #ffffff;
  background-color: transparent;
  border: none;
  text-align: end;
}

div.block-grid div.large-block div.bet-calculations .user-bet-value > div input:focus {
  outline: none;
}

div.block-grid div.large-block div.bet-calculations .user-bet-value > div i {
  font-size: 12px;
}

div.block-grid div.large-block div.bet-calculations .user-bet-value button {
  flex: 1;

  font-weight: bold;

  border-radius: 999px;
  border: none;

  outline: none;

  cursor: pointer;
}

div.block-grid div.large-block div.bet-calculations .user-bet-value button.selected {
  background-color: var(--accent);

  color: #ffffff;
  cursor: auto;
}

div.block-grid div.large-block div.bet-calculations > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div.block-grid div.large-block div.bet-calculations div.multipla-boost span {
  display: flex;
  align-items: center;
  gap: 4px;

  color: var(--accent);

  font-size: 12px;
  font-weight: bold;
}

div.block-grid div.large-block div.bet-calculations div.total-odd,
div.block-grid div.large-block div.bet-calculations div.bet-amount {
  font-size: 12px;
  font-weight: bold;

  color: var(--opaque-text);
}

div.block-grid div.large-block div.bet-calculations div.possible-earnings {
  text-transform: uppercase;
  font-weight: bold;

  font-size: 14px;
}

div.block-grid div.large-block div.bet-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
}

div.block-grid div.large-block div.bet-navigation button.left,
div.block-grid div.large-block div.bet-navigation button.right {
  width: 32px;
  aspect-ratio: 1/1;
  border-radius: 50%;

  border: none;

  cursor: pointer;
  transition: filter 0.4s;
}

div.block-grid div.large-block div.bet-navigation button.bet {
  padding: 0 70px;
  height: 40px;
  border: none;
  border-radius: 999px;
}

div.block-grid div.large-block div.bet-navigation button.bet,
div.block-grid div.large-block div.bet-navigation button.left,
div.block-grid div.large-block div.bet-navigation button.right {
  background-color: rgba(255, 255, 255, 0.1);

  color: var(--opaque-text);
}

div.block-grid div.large-block div.bet-navigation button.left:hover,
div.block-grid div.large-block div.bet-navigation button.right:hover {
  filter: brightness(0.8);
}