:root {
  --primary-color: #007bff; /* Azul claro */
  --primary-dark: #0056b3; /* Azul escuro */
  --secondary-color: #66b3ff; /* Azul suave */
  --secondary-dark: #3399ff; /* Azul médio */
  --success-color: #5bc0de; /* Azul claro */
  --success-dark: #31b0d5; /* Azul mais escuro */
  --danger-color: #ff4a4a; /* Vermelho */
  --danger-dark: #992727; /* Vermelho escuro */
  --info-color: #4883ff; /* Azul */
  --info-dark: #2646bd; /* Azul escuro */
  --warning-color: #ffbd12; /* Amarelo */
  --warning-dark: #ac730b; /* Amarelo escuro */
  --text-color: #ffffff; /* Branco */
  --text-dark: #111111; /* Preto */
}

.eztxt {
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

.ezth {
  border-right: solid 0.1px;
}

.ezth2 {
  border-bottom: solid 0.1px;
}

.btnOver, .btnUnder, .buttonMaxMax, .buttonMin, .buttonMinMin, .buttonEq, .buttonEven, .buttonOdd {
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border-radius: 8px;
  font: bold 20px Arial;
  color: var(--text-color);
  text-decoration: none;
  transition: background 0.3s, border 0.3s;
}

.btnOver {
  border: 1px solid var(--primary-dark);
  background: linear-gradient(to bottom, var(--primary-color), var(--primary-dark));
}

.btnOver:hover, .btnOver:focus {
  border: 1px solid #0056b3; /* Azul escuro */
  background: linear-gradient(to bottom, #0056b3, #003d80); /* Azul escuro para um azul ainda mais escuro */
}

.btnOver:active {
  background: var(--primary-dark);
}

.btnUnder {
  border: 1px solid var(--secondary-dark);
  background: linear-gradient(to bottom, var(--secondary-color), var(--secondary-dark));
}

.btnUnder:hover, .btnUnder:focus {
  border: 1px solid #007bff; /* Azul claro */
  background: linear-gradient(to bottom, #3399ff, #007bff); /* Azul médio para azul claro */
}

.btnUnder:active {
  background: var(--secondary-dark);
}

.buttonMaxMax {
  border: 1px solid #FFFF00; /* Amarelo */
  background: linear-gradient(to bottom, var(--success-color), var(--success-dark));
}

.buttonMaxMax:hover, .buttonMaxMax:focus {
  border: 1px solid #2ab049; /* Verde */
  background: linear-gradient(to bottom, #66b3ff, #3399ff); /* Azul suave para azul médio */
}

.buttonMaxMax:active {
  background: var(--success-dark);
}

.buttonMin {
  border: 1px solid #a12727; /* Vermelho */
  background: linear-gradient(to bottom, var(--danger-color), var(--danger-dark));
}

.buttonMin:hover, .buttonMin:focus {
  background: #ff5959; /* Vermelho claro */
}

.buttonMin:active {
  background: #982727; /* Vermelho escuro */
}

.buttonMinMin {
  border: 1px solid #FFFF00; /* Amarelo */
  background: linear-gradient(to bottom, var(--danger-color), var(--danger-dark));
}

.buttonMinMin:hover, .buttonMinMin:focus {
  background: #ff5959; /* Vermelho claro */
}

.buttonMinMin:active {
  background: #982727; /* Vermelho escuro */
}

.buttonEq {
  border: 1px solid #989eab; /* Cinza */
  background: linear-gradient(to bottom, #d9e1f4, #989eab); /* Azul claro para cinza */
}

.buttonEq:hover, .buttonEq:focus {
  border: 1px solid #d9e1f4; /* Azul claro */
  background: linear-gradient(to bottom, #ffffff, #b6becd); /* Branco para cinza */
}

.buttonEq:active {
  background: #989eab; /* Cinza */
}

.buttonEven {
  border: 1px solid #2646bd; /* Azul escuro */
  background: linear-gradient(to bottom, #4883ff, #2646bd); /* Azul claro para azul escuro */
}

.buttonEven:hover,
.buttonEven:focus {
  border: 1px solid #2d52de; /* Azul médio */
  background: linear-gradient(to bottom, #66b3ff, #3399ff); /* Azul suave para azul médio */
}

.buttonEven:active {
  background: #2646bd; /* Azul escuro */
}

.buttonOdd {
  border: 1px solid #ac730b; /* Amarelo escuro */
  background: linear-gradient(to bottom, #ffbd12, #ac730b); /* Amarelo claro para amarelo escuro */
}

.buttonOdd:hover,
.buttonOdd:focus {
  border: 1px solid #f6a410; /* Amarelo médio */
  background: linear-gradient(to bottom, #ffe316, #ce8a0d); /* Amarelo claro para amarelo escuro */
}

.buttonOdd:active {
  background: #ac730b; /* Amarelo escuro */
}

@media (max-width: 768px) {
    .controls {
        flex-direction: column; /* Alinha os botões verticalmente em telas menores */
    }
    .token-section, .ticks-section, .market-section {
        width: 100%; /* Garante que as seções ocupem toda a largura da tela */
    }
}