.icone-esquerda {
  max-width: 50%;
  max-height: 50%;
  margin-right: 4px;
}

.icone-direita {
  max-width: 50%;
  max-height: 50%;
  margin-left: 4px;
}




/*botão branco*/
.btn-custom-branco {
  font-weight: bold;
  background-color: var(--transparente);
  padding: 4px;
  text-align: center;
  border: 1px var(--preto) solid;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-branco:hover {
  font-weight: bold;
  background-color: rgba(240, 240, 240, 0.863);
}

/*botão azul*/
.btn-custom-azul {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-azul:hover {
  font-weight: bold;
  background-color: #2e82ff;
}

/*botão vermelho*/
.btn-custom-vermelho {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-vermelho:hover {
  font-weight: bold;
  background-color: #c21d2d;
}

/*botão verde*/
.btn-custom-verde {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-verde:hover {
  font-weight: bold;
  background-color: #007a2f;
}

/*botão laranja*/
.btn-custom-laranja {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-laranja:hover {
  font-weight: bold;
  background-color: #e66700;
}

/*botão preto*/
.btn-custom-preto {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-preto:hover {
  font-weight: bold;
  background-color: #0f0f0f;
}

/*botão cinza*/
.btn-custom-cinza {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-cinza:hover {
  font-weight: bold;
  background-color: #60666b;
}

/*botão amarelo*/
.btn-custom-amarelo {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-amarelo:hover {
  font-weight: bold;
  background-color: #e0a800;
}

/*botão roxo*/
.btn-custom-roxo {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-roxo:hover {
  font-weight: bold;
  background-color: #632fc5;
}

/*botão ciano*/
.btn-custom-ciano {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-ciano:hover {
  font-weight: bold;
  background-color: #01cfcf;
}

/*botão rosa*/
.btn-custom-rosa {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-rosa:hover {
  font-weight: bold;
  background-color: #ca1e74;
}

/*botão azul escuro*/
.btn-custom-azul-escuro {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-azul-escuro:hover {
  font-weight: bold;
  background-color: #0041b1;
}

/*botão verde escuro*/
.btn-custom-verde-escuro {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-verde-escuro:hover {
  font-weight: bold;
  background-color: #007200;
}

/*botão laranja escuro*/
.btn-custom-laranja-escuro {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-laranja-escuro:hover {
  font-weight: bold;
  background-color: #db5800;
}

/*botão cinza escuro*/
.btn-custom-cinza-escuro {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-cinza-escuro:hover {
  font-weight: bold;
  background-color: #353636;
}

/*botão vermelho escuro*/
.btn-custom-vermelho-escuro {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-vermelho-escuro:hover {
  font-weight: bold;
  background-color: #720101;
}

/*botão amarelo escuro*/
.btn-custom-amarelo-escuro {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-amarelo-escuro:hover {
  font-weight: bold;
  background-color: #9e7702;
}

/* botão roxo escuro */
.btn-custom-roxo-escuro {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-roxo-escuro:hover {
  font-weight: bold;
  background-color: #3a006e;
}

/* botão ciano escuro */
.btn-custom-ciano-escuro {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-ciano-escuro:hover {
  font-weight: bold;
  background-color: #066;
}

/* botão rosa escuro */
.btn-custom-rosa-escuro {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
  padding: 5px;
  text-align: center;
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-rosa-escuro:hover {
  font-weight: bold;
  background-color: #6a0e4e;
}

/* botão cinza claro */
.btn-custom-cinza-claro {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--cinza-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-cinza-claro:hover {
  font-weight: bold;
  background-color: #d0d0d0;
}

/* botão azul claro */
.btn-custom-azul-claro {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--azul);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-azul-claro:hover {
  font-weight: bold;
  background-color: #78adff;
}

/* botão verde claro */
.btn-custom-verde-claro {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--verde);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-verde-claro:hover {
  font-weight: bold;
  background-color: #5ff0b1;
}

/* botão vermelho claro */
.btn-custom-vermelho-claro {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--vermelho);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-vermelho-claro:hover {
  font-weight: bold;
  background-color: #ff838d;
}

/* botão amarelo claro */
.btn-custom-amarelo-claro {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--amarelo);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-amarelo-claro:hover {
  font-weight: bold;
  background-color: #ffdd78;
}

/* botão roxo claro */
.btn-custom-roxo-claro {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--roxo);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-roxo-claro:hover {
  font-weight: bold;
  background-color: #c2acff;
}

/* botão laranja claro */
.btn-custom-laranja-claro {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--laranja);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-laranja-claro:hover {
  font-weight: bold;
  background-color: #ffa14d;
}

/* botão ciano claro */
.btn-custom-ciano-claro {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--ciano);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-ciano-claro:hover {
  font-weight: bold;
  background-color: #a1f9fa;
}

/* botão rosa claro */
.btn-custom-rosa-claro {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--rosa);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-rosa-claro:hover {
  font-weight: bold;
  background-color: #fdaada;
}




/*Vazados*/

/*botão azul vazado*/
.btn-custom-azul-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul);
  padding: 5px;
  text-align: center;
  border: var(--azul) solid 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-azul-vazado:hover {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
}

/*botão vermelho vazado*/
.btn-custom-vermelho-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho);
  padding: 5px;
  text-align: center;
  border: solid 1px var(--vermelho);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-vermelho-vazado:hover {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
}

/*botão verde vazado*/
.btn-custom-verde-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde);
  padding: 5px;
  text-align: center;
  border: var(--verde) 1px solid;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-verde-vazado:hover {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
}

/*botão laranja vazado*/
.btn-custom-laranja-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja);
  padding: 5px;
  text-align: center;
  border: 1px var(--laranja) solid;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-laranja-vazado:hover {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
}

/*botão preto vazado*/
.btn-custom-preto-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--preto);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-preto-vazado:hover {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
}

/*botão azul escuro vazado*/
.btn-custom-azul-escuro-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-escuro);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--azul-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-azul-escuro-vazado:hover {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
}

/*botão verde escuro vazado*/
.btn-custom-verde-escuro-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-escuro);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--verde-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-verde-escuro-vazado:hover {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
}

/*botão amarelo vazado*/
.btn-custom-amarelo-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--amarelo);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-amarelo-vazado:hover {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
}

/*botão roxo vazado*/
.btn-custom-roxo-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--roxo);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-roxo-vazado:hover {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
}

/*botão cinza vazado*/
.btn-custom-cinza-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--cinza);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-cinza-vazado:hover {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
}

/*botão ciano vazado*/
.btn-custom-ciano-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--ciano);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-ciano-vazado:hover {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
}

/*botão rosa vazado*/
.btn-custom-rosa-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--rosa);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-rosa-vazado:hover {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
}

/*botão vermelho escuro vazado*/
.btn-custom-vermelhoescuro-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho-escuro);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--vermelho-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-vermelhoescuro-vazado:hover {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
}

/*botão amarelo escuro vazado*/
.btn-custom-amareloescuro-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo-escuro);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--amarelo-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-amareloescuro-vazado:hover {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
}

/*botão roxo escuro vazado*/
.btn-custom-roxoescuro-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-escuro);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--roxo-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-roxoescuro-vazado:hover {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
}

/*botão laranja escuro vazado*/
.btn-custom-laranjaescuro-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja-escuro);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--laranja-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-laranjaescuro-vazado:hover {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
}

/*botão cinza escuro vazado*/
.btn-custom-cinzaescuro-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-escuro);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--cinza-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-cinzaescuro-vazado:hover {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
}

/*botão ciano escuro vazado*/
.btn-custom-cianoescuro-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano-escuro);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--ciano-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-cianoescuro-vazado:hover {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
}

/*botão rosa escuro vazado*/
.btn-custom-rosaescuro-vazado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-escuro);
  padding: 5px;
  text-align: center;
  border: 1px solid var(--rosa-escuro);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.btn-custom-rosaescuro-vazado:hover {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
}




























/*medio-arredondado FIXO*/

/*botão branco*/
.btn-custom-branco-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  text-align: center;
  border: 1px var(--preto) solid;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-branco-medio-arredondado:hover {
  font-weight: bold;
  background-color: rgba(240, 240, 240, 0.863);
}

/*botão azul*/
.btn-custom-azul-medio-arredondado {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azul-medio-arredondado:hover {
  font-weight: bold;
  background-color: #2e82ff;
}

/*botão vermelho*/
.btn-custom-vermelho-medio-arredondado {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
  text-align: center;
  border: none;
  height: 63px;
  width: 32%;
  font-size: 23px;
  border-radius: 30px;
}

.btn-custom-vermelho-medio-arredondado:hover {
  font-weight: bold;
  background-color: #c21d2d;
}

/*botão verde*/
.btn-custom-verde-medio-arredondado {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verde-medio-arredondado:hover {
  font-weight: bold;
  background-color: #007a2f;
}

/*botão laranja*/
.btn-custom-laranja-medio-arredondado {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}


.btn-custom-laranja-medio-arredondado:hover {
  font-weight: bold;
  background-color: #e66700;
}

/*botão preto*/
.btn-custom-preto-medio-arredondado {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-preto-medio-arredondado:hover {
  font-weight: bold;
  background-color: #0f0f0f;
}

/*botão azul escuro*/
.btn-custom-azul-escuro-medio-arredondado {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azul-escuro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #0041b1;
}

/*botão verde escuro*/
.btn-custom-verde-escuro-medio-arredondado {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verde-escuro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #007200;
}

/*botão cinza médio*/
.btn-custom-cinza-medio-arredondado {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinza-medio-arredondado:hover {
  font-weight: bold;
  background-color: #565e65;
}

/*botão amarelo médio*/
.btn-custom-amarelo-medio-arredondado {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-amarelo-medio-arredondado:hover {
  font-weight: bold;
  background-color: #e0a800;
}

/*botão roxo médio*/
.btn-custom-roxo-medio-arredondado {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxo-medio-arredondado:hover {
  font-weight: bold;
  background-color: #632fc5;
}

/*botão ciano médio*/
.btn-custom-ciano-medio-arredondado {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-ciano-medio-arredondado:hover {
  font-weight: bold;
  background-color: #01cfcf;
}

/*botão rosa médio*/
.btn-custom-rosa-medio-arredondado {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosa-medio-arredondado:hover {
  font-weight: bold;
  background-color: #ca1e74;
}

/*botão cinza claro médio*/
.btn-custom-cinza-claro-medio-arredondado {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinza-claro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #d1d1d1;
}

/*botão azul claro médio*/
.btn-custom-azul-claro-medio-arredondado {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azul-claro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #7cadff;
}

/*botão verde claro médio*/
.btn-custom-verde-claro-medio-arredondado {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verde-claro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #53d8a2;
}

/*botão vermelho claro médio*/
.btn-custom-vermelho-claro-medio-arredondado {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-vermelho-claro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #ff7782;
}

/*botão amarelo claro médio*/
.btn-custom-amarelo-claro-medio-arredondado {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-amarelo-claro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #ffdc7e;
}

/*botão roxo claro médio*/
.btn-custom-roxo-claro-medio-arredondado {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxo-claro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #cbb9ff;
}

/*botão laranja claro médio*/
.btn-custom-laranja-claro-medio-arredondado {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-laranja-claro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #ff9930;
}

/*botão ciano claro médio*/
.btn-custom-ciano-claro-medio-arredondado {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-ciano-claro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #94e8e8;
}

/*botão rosa claro médio*/
.btn-custom-rosa-claro-medio-arredondado {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosa-claro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #ff8ed6;
}

/*botão cinza escuro médio*/
.btn-custom-cinza-escuro-medio-arredondado {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinza-escuro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #353636;
}

/*botão vermelho escuro médio*/
.btn-custom-vermelho-escuro-medio-arredondado {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-vermelho-escuro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #720101;
}

/*botão amarelo escuro médio*/
.btn-custom-amarelo-escuro-medio-arredondado {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-amarelo-escuro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #9e7702;
}

/*botão roxo escuro médio*/
.btn-custom-roxo-escuro-medio-arredondado {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxo-escuro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #36005f;
}

/*botão laranja escuro médio*/
.btn-custom-laranja-escuro-medio-arredondado {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-laranja-escuro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #db5800;
}

/*botão ciano escuro médio*/
.btn-custom-ciano-escuro-medio-arredondado {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-ciano-escuro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #066666;
}

/*botão rosa escuro médio*/
.btn-custom-rosa-escuro-medio-arredondado {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosa-escuro-medio-arredondado:hover {
  font-weight: bold;
  background-color: #6b1450;
}

/*botão neutro-1 médio*/
.btn-custom-neutro-1-medio-arredondado {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-1-medio-arredondado:hover {
  font-weight: bold;
  background-color: #d9dfe3;
}

/*botão neutro-2 médio*/
.btn-custom-neutro-2-medio-arredondado {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-2-medio-arredondado:hover {
  font-weight: bold;
  background-color: #d0d7db;
}

/*botão neutro-3 médio*/
.btn-custom-neutro-3-medio-arredondado {
  font-weight: bold;
  background-color: var(--neutro-3);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-3-medio-arredondado:hover {
  font-weight: bold;
  background-color: #c6ccd0;
}

/*botão neutro-4 médio*/
.btn-custom-neutro-4-medio-arredondado {
  font-weight: bold;
  background-color: var(--neutro-4);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-4-medio-arredondado:hover {
  font-weight: bold;
  background-color: #b8bdc2;
}

/*botão neutro-5 médio*/
.btn-custom-neutro-5-medio-arredondado {
  font-weight: bold;
  background-color: var(--neutro-5);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-5-medio-arredondado:hover {
  font-weight: bold;
  background-color: #9ea4aa;
}














/*Botão medio-arredondado vazado medio-arredondado*/

/*botão azul vazado*/
.btn-custom-azul-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul);
  text-align: center;
  border: var(--azul) solid 1px;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azul-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
}

/*botão vermelho vazado*/
.btn-custom-vermelho-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho);
  text-align: center;
  border: solid 1px var(--vermelho);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-vermelho-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
}

/*botão verde vazado*/
.btn-custom-verde-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde);
  text-align: center;
  border: var(--verde) 1px solid;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verde-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
}

/*botão laranja vazado*/
.btn-custom-laranja-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja);
  text-align: center;
  border: 1px var(--laranja) solid;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-laranja-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
}

/*botão preto vazado*/
.btn-custom-preto-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  text-align: center;
  border: 1px solid var(--preto);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-preto-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
}

/*botão azul escuro vazado*/
.btn-custom-azulescuro-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-escuro);
  text-align: center;
  border: 1px solid var(--azul-escuro);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azulescuro-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
}

/*botão verde escuro vazado*/
.btn-custom-verdeescuro-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-escuro);
  text-align: center;
  border: 1px solid var(--verde-escuro);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verdeescuro-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
}

/*botão amarelo vazado*/
.btn-custom-amarelo-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo);
  text-align: center;
  border: 1px solid var(--amarelo);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-amarelo-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
}

/* botão roxo vazado */
.btn-custom-roxo-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo);
  text-align: center;
  border: 1px solid var(--roxo);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxo-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
}

/* botão ciano vazado */
.btn-custom-ciano-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano);
  text-align: center;
  border: 1px solid var(--ciano);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-ciano-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
}

/* botão rosa vazado */
.btn-custom-rosa-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa);
  text-align: center;
  border: 1px solid var(--rosa);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosa-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
}

/* botão cinza vazado */
.btn-custom-cinza-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza);
  text-align: center;
  border: 1px solid var(--cinza);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinza-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
}

/* botão cinza claro vazado */
.btn-custom-cinzaclaro-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-claro);
  text-align: center;
  border: 1px solid var(--cinza-claro);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinzaclaro-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
}

/* botão roxo claro vazado */
.btn-custom-roxoclaro-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-claro);
  text-align: center;
  border: 1px solid var(--roxo-claro);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxoclaro-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
}

/* botão rosa claro vazado */
.btn-custom-rosaclaro-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-claro);
  text-align: center;
  border: 1px solid var(--rosa-claro);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosaclaro-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
}

/* botão neutro 1 vazado */
.btn-custom-neutro1-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-1);
  text-align: center;
  border: 1px solid var(--neutro-1);
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro1-vazado-medio-arredondado:hover {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
}

/* botão gradiente preto (sem hover invertido pois é gradiente) */
.btn-custom-gradpreto-vazado-medio-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: #3d3d3d;
  text-align: center;
  border: 1px solid #3d3d3d;
  border-radius: 30px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-gradpreto-vazado-medio-arredondado:hover {
  font-weight: bold;
  background: var(--grad-preto);
  color: var(--branco);
}





















/*BOTÃO grande-arredondado*/

/*botão branco*/
.btn-custom-branco-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  text-align: center;
  border: 1px var(--preto) solid;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-branco-grande-arredondado:hover {
  font-weight: bold;
  background-color: rgba(240, 240, 240, 0.863);
}

/*botão azul*/
.btn-custom-azul-grande-arredondado {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-grande-arredondado:hover {
  font-weight: bold;
  background-color: #2e82ff;
}

/*botão vermelho*/
.btn-custom-vermelho-grande-arredondado {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-grande-arredondado:hover {
  font-weight: bold;
  background-color: #c21d2d;
}

/*botão verde*/
.btn-custom-verde-grande-arredondado {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-grande-arredondado:hover {
  font-weight: bold;
  background-color: #007a2f;
}

/*botão laranja*/
.btn-custom-laranja-grande-arredondado {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-grande-arredondado:hover {
  font-weight: bold;
  background-color: #e66700;
}

/*botão preto*/
.btn-custom-preto-grande-arredondado {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-preto-grande-arredondado:hover {
  font-weight: bold;
  background-color: #0f0f0f;
}

/*botão azul escuro*/
.btn-custom-azul-escuro-grande-arredondado {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-escuro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #0041b1;
}

/*botão verde escuro*/
.btn-custom-verde-escuro-grande-arredondado {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-escuro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #007200;
}

/*botão cinza*/
.btn-custom-cinza-grande-arredondado {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-grande-arredondado:hover {
  font-weight: bold;
  background-color: #565e65;
}

/*botão amarelo*/
.btn-custom-amarelo-grande-arredondado {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-grande-arredondado:hover {
  font-weight: bold;
  background-color: #e0a800;
}

/*botão roxo*/
.btn-custom-roxo-grande-arredondado {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-grande-arredondado:hover {
  font-weight: bold;
  background-color: #632fc5;
}

/*botão ciano*/
.btn-custom-ciano-grande-arredondado {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-grande-arredondado:hover {
  font-weight: bold;
  background-color: #01cfcf;
}

/*botão rosa*/
.btn-custom-rosa-grande-arredondado {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ca1e74;
}

/*botão cinza claro*/
.btn-custom-cinza-claro-grande-arredondado {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-claro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #d1d1d1;
}

/*botão azul claro*/
.btn-custom-azul-claro-grande-arredondado {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-claro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #7cadff;
}

/*botão verde claro*/
.btn-custom-verde-claro-grande-arredondado {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-claro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #53d8a2;
}

/*botão vermelho claro*/
.btn-custom-vermelho-claro-grande-arredondado {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-claro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ff7782;
}

/*botão amarelo claro*/
.btn-custom-amarelo-claro-grande-arredondado {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-claro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ffdc7e;
}

/*botão roxo claro*/
.btn-custom-roxo-claro-grande-arredondado {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-claro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #cbb9ff;
}

/*botão laranja claro*/
.btn-custom-laranja-claro-grande-arredondado {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-claro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ff9930;
}

/*botão ciano claro*/
.btn-custom-ciano-claro-grande-arredondado {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-claro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #94e8e8;
}

/*botão rosa claro*/
.btn-custom-rosa-claro-grande-arredondado {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-claro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ff8ed6;
}

/*botão cinza escuro*/
.btn-custom-cinza-escuro-grande-arredondado {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-escuro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #353636;
}

/*botão vermelho escuro*/
.btn-custom-vermelho-escuro-grande-arredondado {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-escuro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #720101;
}

/*botão amarelo escuro*/
.btn-custom-amarelo-escuro-grande-arredondado {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-escuro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #9e7702;
}

/*botão roxo escuro*/
.btn-custom-roxo-escuro-grande-arredondado {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-escuro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #36005f;
}

/*botão laranja escuro*/
.btn-custom-laranja-escuro-grande-arredondado {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-escuro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #db5800;
}

/*botão ciano escuro*/
.btn-custom-ciano-escuro-grande-arredondado {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-escuro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #066666;
}

/*botão rosa escuro*/
.btn-custom-rosa-escuro-grande-arredondado {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-escuro-grande-arredondado:hover {
  font-weight: bold;
  background-color: #6b1450;
}

/*botão neutro-1*/
.btn-custom-neutro-1-grande-arredondado {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-neutro-1-grande-arredondado:hover {
  font-weight: bold;
  background-color: #d9dfe3;
}

/*botão neutro-2*/
.btn-custom-neutro-2-grande-arredondado {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 50%;
}





















/*BOTÃO grande-arredondado VAZADO*/

/*botão branco vazado*/
.btn-custom-branco-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  text-align: center;
  border: 1px solid var(--preto);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-branco-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
}

/*botão azul vazado*/
.btn-custom-azul-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul);
  text-align: center;
  border: 1px solid var(--azul);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
}

/*botão vermelho vazado*/
.btn-custom-vermelho-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho);
  text-align: center;
  border: 1px solid var(--vermelho);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
}

/*botão verde vazado*/
.btn-custom-verde-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde);
  text-align: center;
  border: 1px solid var(--verde);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
}

/*botão laranja vazado*/
.btn-custom-laranja-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja);
  text-align: center;
  border: 1px solid var(--laranja);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
}

/*botão preto vazado*/
.btn-custom-preto-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  text-align: center;
  border: 1px solid var(--preto);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-preto-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
}

/*botão azul escuro vazado*/
.btn-custom-azul-escuro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-escuro);
  text-align: center;
  border: 1px solid var(--azul-escuro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-escuro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
}

/*botão verde escuro vazado*/
.btn-custom-verde-escuro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-escuro);
  text-align: center;
  border: 1px solid var(--verde-escuro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-escuro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
}

/*botão cinza vazado*/
.btn-custom-cinza-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza);
  text-align: center;
  border: 1px solid var(--cinza);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
}

/*botão amarelo vazado*/
.btn-custom-amarelo-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo);
  text-align: center;
  border: 1px solid var(--amarelo);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
}

/*botão roxo vazado*/
.btn-custom-roxo-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo);
  text-align: center;
  border: 1px solid var(--roxo);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
}

/*botão ciano vazado*/
.btn-custom-ciano-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano);
  text-align: center;
  border: 1px solid var(--ciano);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
}

/*botão rosa vazado*/
.btn-custom-rosa-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa);
  text-align: center;
  border: 1px solid var(--rosa);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
}

/*botão cinza claro vazado*/
.btn-custom-cinza-claro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-claro);
  text-align: center;
  border: 1px solid var(--cinza-claro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-claro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
}

/*botão azul claro vazado*/
.btn-custom-azul-claro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-claro);
  text-align: center;
  border: 1px solid var(--azul-claro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-claro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
}

/*botão verde claro vazado*/
.btn-custom-verde-claro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-claro);
  text-align: center;
  border: 1px solid var(--verde-claro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-claro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
}

/*botão vermelho claro vazado*/
.btn-custom-vermelho-claro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho-claro);
  text-align: center;
  border: 1px solid var(--vermelho-claro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-claro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
}

/*botão amarelo claro vazado*/
.btn-custom-amarelo-claro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo-claro);
  text-align: center;
  border: 1px solid var(--amarelo-claro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-claro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
}

/*botão roxo claro vazado*/
.btn-custom-roxo-claro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-claro);
  text-align: center;
  border: 1px solid var(--roxo-claro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-claro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
}

/*botão laranja claro vazado*/
.btn-custom-laranja-claro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja-claro);
  text-align: center;
  border: 1px solid var(--laranja-claro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-claro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
}

/*botão ciano claro vazado*/
.btn-custom-ciano-claro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano-claro);
  text-align: center;
  border: 1px solid var(--ciano-claro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-claro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
}

/*botão rosa claro vazado*/
.btn-custom-rosa-claro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-claro);
  text-align: center;
  border: 1px solid var(--rosa-claro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-claro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
}

/*botão cinza escuro vazado*/
.btn-custom-cinza-escuro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-escuro);
  text-align: center;
  border: 1px solid var(--cinza-escuro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-escuro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
}

/*botão vermelho escuro vazado*/
.btn-custom-vermelho-escuro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho-escuro);
  text-align: center;
  border: 1px solid var(--vermelho-escuro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-escuro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
}

/*botão amarelo escuro vazado*/
.btn-custom-amarelo-escuro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo-escuro);
  text-align: center;
  border: 1px solid var(--amarelo-escuro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-escuro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
}

/*botão roxo escuro vazado*/
.btn-custom-roxo-escuro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-escuro);
  text-align: center;
  border: 1px solid var(--roxo-escuro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-escuro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
}

/*botão laranja escuro vazado*/
.btn-custom-laranja-escuro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja-escuro);
  text-align: center;
  border: 1px solid var(--laranja-escuro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-escuro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
}

/*botão ciano escuro vazado*/
.btn-custom-ciano-escuro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano-escuro);
  text-align: center;
  border: 1px solid var(--ciano-escuro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-escuro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
}

/*botão rosa escuro vazado*/
.btn-custom-rosa-escuro-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-escuro);
  text-align: center;
  border: 1px solid var(--rosa-escuro);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-escuro-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
}

/*botão neutro-1 vazado*/
.btn-custom-neutro-1-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-1);
  text-align: center;
  border: 1px solid var(--neutro-1);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-neutro-1-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
}

/*botão neutro-2 vazado*/
.btn-custom-neutro-2-vazado-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-2);
  text-align: center;
  border: 1px solid var(--neutro-2);
  border-radius: 30px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-neutro-2-vazado-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
}
















/*EXTRAS grande-arredondado*/

/* Botão Azul */
.btn-custom-azul-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-azul-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #2e82ff;
  /* Uma cor mais clara, seguindo seu exemplo */
}

/* Botão Verde */
.btn-custom-verde-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-verde-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #00b310;
  /* Tom mais claro */
}

/* Botão Vermelho */
.btn-custom-vermelho-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-vermelho-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ff4d5a;
  /* Tom mais claro */
}

/* Botão Amarelo */
.btn-custom-amarelo-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--preto);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-amarelo-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ffd64d;
  /* Tom mais claro */
}

/* Botão Roxo */
.btn-custom-roxo-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-roxo-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #8c57e0;
  /* Tom mais claro */
}

/* Botão Laranja */
.btn-custom-laranja-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-laranja-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ff9147;
  /* Tom mais claro */
}

/* Botão Ciano */
.btn-custom-ciano-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--preto);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-ciano-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #49ffff;
  /* Tom mais claro */
}

/* Botão Rosa */
.btn-custom-rosa-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-rosa-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ff4d9e;
  /* Tom mais claro */
}

/* Botão Cinza */
.btn-custom-cinza-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-cinza-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #8a9298;
  /* Tom mais claro */
}

/* Botão Preto */
.btn-custom-preto-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-preto-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #333333;
  /* Tom um pouco mais claro */
}

/* Botão Branco */
.btn-custom-branco-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: 1px solid var(--cinza-claro);
  /* Borda para visibilidade */
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-branco-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #f0f0f0;
  /* Tom levemente mais escuro */
}


/* Botão Cinza Claro */
.btn-custom-cinza-claro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-cinza-claro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #cfcfcf;
  /* Tom levemente mais escuro */
}

/* Botão Azul Claro */
.btn-custom-azul-claro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-azul-claro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #b1d4ff;
  /* Tom um pouco mais escuro */
}

/* Botão Verde Claro */
.btn-custom-verde-claro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-verde-claro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #8effd0;
  /* Tom um pouco mais escuro */
}

/* Botão Vermelho Claro */
.btn-custom-vermelho-claro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-vermelho-claro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ffb1b8;
  /* Tom um pouco mais escuro */
}

/* Botão Amarelo Claro */
.btn-custom-amarelo-claro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-amarelo-claro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #fff0c7;
  /* Tom um pouco mais escuro */
}

/* Botão Roxo Claro */
.btn-custom-roxo-claro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-roxo-claro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #e5d0ff;
  /* Tom um pouco mais escuro */
}

/* Botão Laranja Claro */
.btn-custom-laranja-claro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-laranja-claro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ffc28f;
  /* Tom um pouco mais escuro */
}

/* Botão Ciano Claro */
.btn-custom-ciano-claro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-ciano-claro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #c9feff;
  /* Tom um pouco mais escuro */
}

/* Botão Rosa Claro */
.btn-custom-rosa-claro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-rosa-claro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ffc9ee;
  /* Tom um pouco mais escuro */
}


/* Botão Cinza Escuro */
.btn-custom-cinza-escuro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-cinza-escuro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #5a5b5d;
  /* Tom um pouco mais claro */
}

/* Botão Azul Escuro */
.btn-custom-azul-escuro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-azul-escuro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #0042a5;
  /* Tom mais claro, seguindo seu exemplo */
}

/* Botão Verde Escuro */
.btn-custom-verde-escuro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-verde-escuro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #007a00;
  /* Tom mais claro */
}

/* Botão Vermelho Escuro */
.btn-custom-vermelho-escuro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-vermelho-escuro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #a40000;
  /* Tom mais claro */
}

/* Botão Amarelo Escuro */
.btn-custom-amarelo-escuro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-amarelo-escuro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ce9c00;
  /* Tom mais claro */
}

/* Botão Roxo Escuro */
.btn-custom-roxo-escuro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-roxo-escuro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #6100a0;
  /* Tom mais claro */
}

/* Botão Laranja Escuro */
.btn-custom-laranja-escuro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-laranja-escuro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #e56d1a;
  /* Tom mais claro */
}

/* Botão Ciano Escuro */
.btn-custom-ciano-escuro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-ciano-escuro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #00aaaa;
  /* Tom mais claro */
}

/* Botão Rosa Escuro */
.btn-custom-rosa-escuro-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-rosa-escuro-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #a42c7a;
  /* Tom mais claro */
}



/* Botão Neutro 1 */
.btn-custom-neutro-1-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-neutro-1-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #e9ecef;
  /* Um tom um pouco mais escuro */
}

/* Botão Neutro 2 */
.btn-custom-neutro-2-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-neutro-2-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #dee2e6;
  /* Um tom um pouco mais escuro */
}

/* Botão Neutro 3 */
.btn-custom-neutro-3-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--neutro-3);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-neutro-3-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #ced4da;
  /* Um tom um pouco mais escuro */
}

/* Botão Neutro 4 */
.btn-custom-neutro-4-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--neutro-4);
  color: var(--preto);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-neutro-4-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #adb5bd;
  /* Um tom um pouco mais escuro */
}

/* Botão Neutro 5 */
.btn-custom-neutro-5-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--neutro-5);
  color: var(--branco);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-neutro-5-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: #9299a1;
  /* Um tom um pouco mais escuro */
}

/* Botão Gradiente Azul-Verde */
.btn-custom-grad-azul-verde-extra-grande-arredondado {
  font-weight: bold;
  background: var(--grad-azul-verde);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-grad-azul-verde-extra-grande-arredondado:hover {
  font-weight: bold;
  background: linear-gradient(45deg, #00933e, #00cc2f);
  /* Variação mais clara do gradiente */
}

/* Botão Gradiente Preto */
.btn-custom-grad-preto-extra-grande-arredondado {
  font-weight: bold;
  background: var(--grad-preto);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-grad-preto-extra-grande-arredondado:hover {
  font-weight: bold;
  background: linear-gradient(45deg, #2c2c2c, #565656);
  /* Variação mais clara do gradiente */
}

/* Botão Gradiente Laranja */
.btn-custom-grad-laranja-extra-grande-arredondado {
  font-weight: bold;
  background: var(--grad-laranja);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 30px;
}

.btn-custom-grad-laranja-extra-grande-arredondado:hover {
  font-weight: bold;
  background: linear-gradient(45deg, #ffa86b, #ff7b2d);
  /* Variação mais clara do gradiente */
}



















/*botão azul vazado*/
.btn-custom-azul-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul);
  text-align: center;
  border: 1px solid var(--azul);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
}

.btn-custom-azul-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
}


/* Botão Azul Vazado Extra Grande */
.btn-custom-azul-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul);
  text-align: center;
  border: 1px solid var(--azul);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Adicionado transição para suavizar o hover */
}

.btn-custom-azul-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
}

/* Botão Verde Vazado Extra grande-arredondado */
.btn-custom-verde-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde);
  text-align: center;
  border: 1px solid var(--verde);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-verde-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
}

/* Botão Vermelho Vazado Extra grande-arredondado */
.btn-custom-vermelho-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho);
  text-align: center;
  border: 1px solid var(--vermelho);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-vermelho-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
}

/* Botão Amarelo Vazado Extra grande-arredondado */
.btn-custom-amarelo-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo);
  text-align: center;
  border: 1px solid var(--amarelo);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-amarelo-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--preto);
  /* Ajuste para melhor contraste no hover */
}

/* Botão Roxo Vazado Extra grande-arredondado */
.btn-custom-roxo-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo);
  text-align: center;
  border: 1px solid var(--roxo);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-roxo-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
}

/* Botão Laranja Vazado Extra grande-arredondado */
.btn-custom-laranja-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja);
  text-align: center;
  border: 1px solid var(--laranja);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-laranja-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
}

/* Botão Ciano Vazado Extra grande-arredondado */
.btn-custom-ciano-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano);
  text-align: center;
  border: 1px solid var(--ciano);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-ciano-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--preto);
  /* Ajuste para melhor contraste no hover */
}

/* Botão Rosa Vazado Extra grande-arredondado */
.btn-custom-rosa-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa);
  text-align: center;
  border: 1px solid var(--rosa);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-rosa-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
}

/* Botão Cinza Vazado Extra grande-arredondado */
.btn-custom-cinza-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza);
  text-align: center;
  border: 1px solid var(--cinza);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-cinza-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
}

/* Botão Preto Vazado Extra grande-arredondado */
.btn-custom-preto-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  text-align: center;
  border: 1px solid var(--preto);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-preto-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
}

/* Botão Branco Vazado Extra grande-arredondado */
.btn-custom-branco-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza);
  /* Alterado para cinza para ser visível em fundo branco */
  text-align: center;
  border: 1px solid var(--cinza);
  /* Borda cinza para visibilidade */
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-branco-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--cinza-claro);
  /* Fundo claro no hover */
  color: var(--preto);
  border-color: var(--cinza-claro);
}

---

/* Botão Cinza Claro Vazado Extra grande-arredondado */
.btn-custom-cinza-claro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-claro);
  text-align: center;
  border: 1px solid var(--cinza-claro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-cinza-claro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Azul Claro Vazado Extra grande-arredondado */
.btn-custom-azul-claro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-claro);
  text-align: center;
  border: 1px solid var(--azul-claro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-azul-claro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Verde Claro Vazado Extra grande-arredondado */
.btn-custom-verde-claro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-claro);
  text-align: center;
  border: 1px solid var(--verde-claro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-verde-claro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Vermelho Claro Vazado Extra grande-arredondado */
.btn-custom-vermelho-claro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho-claro);
  text-align: center;
  border: 1px solid var(--vermelho-claro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-vermelho-claro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Amarelo Claro Vazado Extra grande-arredondado */
.btn-custom-amarelo-claro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo-claro);
  text-align: center;
  border: 1px solid var(--amarelo-claro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-amarelo-claro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Roxo Claro Vazado Extra grande-arredondado */
.btn-custom-roxo-claro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-claro);
  text-align: center;
  border: 1px solid var(--roxo-claro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-roxo-claro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Laranja Claro Vazado Extra grande-arredondado */
.btn-custom-laranja-claro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja-claro);
  text-align: center;
  border: 1px solid var(--laranja-claro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-laranja-claro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Ciano Claro Vazado Extra grande-arredondado */
.btn-custom-ciano-claro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano-claro);
  text-align: center;
  border: 1px solid var(--ciano-claro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-ciano-claro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Rosa Claro Vazado Extra grande-arredondado */
.btn-custom-rosa-claro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-claro);
  text-align: center;
  border: 1px solid var(--rosa-claro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-rosa-claro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}


/* Botão Cinza Escuro Vazado Extra grande-arredondado */
.btn-custom-cinza-escuro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-escuro);
  text-align: center;
  border: 1px solid var(--cinza-escuro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-cinza-escuro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
}

/* Botão Azul Escuro Vazado Extra grande-arredondado */
.btn-custom-azul-escuro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-escuro);
  text-align: center;
  border: 1px solid var(--azul-escuro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-azul-escuro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
}

/* Botão Verde Escuro Vazado Extra grande-arredondado */
.btn-custom-verde-escuro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-escuro);
  text-align: center;
  border: 1px solid var(--verde-escuro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-verde-escuro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
}

/* Botão Vermelho Escuro Vazado Extra grande-arredondado */
.btn-custom-vermelho-escuro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho-escuro);
  text-align: center;
  border: 1px solid var(--vermelho-escuro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-vermelho-escuro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
}

/* Botão Amarelo Escuro Vazado Extra grande-arredondado */
.btn-custom-amarelo-escuro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo-escuro);
  text-align: center;
  border: 1px solid var(--amarelo-escuro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-amarelo-escuro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
}

/* Botão Roxo Escuro Vazado Extra grande-arredondado */
.btn-custom-roxo-escuro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-escuro);
  text-align: center;
  border: 1px solid var(--roxo-escuro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-roxo-escuro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
}

/* Botão Laranja Escuro Vazado Extra grande-arredondado */
.btn-custom-laranja-escuro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja-escuro);
  text-align: center;
  border: 1px solid var(--laranja-escuro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-laranja-escuro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
}

/* Botão Ciano Escuro Vazado Extra grande-arredondado */
.btn-custom-ciano-escuro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano-escuro);
  text-align: center;
  border: 1px solid var(--ciano-escuro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-ciano-escuro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
}

/* Botão Rosa Escuro Vazado Extra grande-arredondado */
.btn-custom-rosa-escuro-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-escuro);
  text-align: center;
  border: 1px solid var(--rosa-escuro);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-rosa-escuro-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
}


/* Botão Neutro 1 Vazado Extra grande-arredondado */
.btn-custom-neutro-1-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-1);
  text-align: center;
  border: 1px solid var(--neutro-1);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-1-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Neutro 2 Vazado Extra grande-arredondado */
.btn-custom-neutro-2-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-2);
  text-align: center;
  border: 1px solid var(--neutro-2);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-2-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Neutro 3 Vazado Extra grande-arredondado */
.btn-custom-neutro-3-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-3);
  text-align: center;
  border: 1px solid var(--neutro-3);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-3-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--neutro-3);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Neutro 4 Vazado Extra grande-arredondado */
.btn-custom-neutro-4-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-4);
  text-align: center;
  border: 1px solid var(--neutro-4);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-4-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--neutro-4);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Neutro 5 Vazado Extra grande-arredondado */
.btn-custom-neutro-5-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-5);
  text-align: center;
  border: 1px solid var(--neutro-5);
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-5-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background-color: var(--neutro-5);
  color: var(--preto);
  /* Ajuste para contraste */
}


/* Botão Gradiente Azul-Verde Vazado Extra grande-arredondado */
.btn-custom-grad-azul-verde-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: #008332;
  /* Cor da borda inicial (primeira cor do gradiente) */
  text-align: center;
  border: 1px solid #008332;
  /* Borda com a cor inicial do gradiente */
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-grad-azul-verde-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background: var(--grad-azul-verde);
  /* Preenche com o gradiente no hover */
  color: var(--branco);
  border-color: transparent;
  /* A borda pode desaparecer ou se integrar ao gradiente */
}

/* Botão Gradiente Preto Vazado Extra grande-arredondado */
.btn-custom-grad-preto-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: #131313;
  /* Cor da borda inicial (primeira cor do gradiente) */
  text-align: center;
  border: 1px solid #131313;
  /* Borda com a cor inicial do gradiente */
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-grad-preto-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background: var(--grad-preto);
  /* Preenche com o gradiente no hover */
  color: var(--branco);
  border-color: transparent;
}

/* Botão Gradiente Laranja Vazado Extra grande-arredondado */
.btn-custom-grad-laranja-vazado-extra-grande-arredondado {
  font-weight: bold;
  background-color: var(--transparente);
  color: #ff933b;
  /* Cor da borda inicial (primeira cor do gradiente) */
  text-align: center;
  border: 1px solid #ff933b;
  /* Borda com a cor inicial do gradiente */
  border-radius: 30px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-grad-laranja-vazado-extra-grande-arredondado:hover {
  font-weight: bold;
  background: var(--grad-laranja);
  /* Preenche com o gradiente no hover */
  color: var(--branco);
  border-color: transparent;
}







































/*ARREDONDADOS
--------------------------------------------------------------------------------------
*/




/*medio-arredondado FIXO*/

/*botão branco*/
.btn-custom-branco-medio {
  font-weight: bold;
  background-color: var(--transparente);
  text-align: center;
  border: 1px var(--preto) solid;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-branco-medio:hover {
  font-weight: bold;
  background-color: rgba(240, 240, 240, 0.863);
}

/*botão azul*/
.btn-custom-azul-medio {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azul-medio:hover {
  font-weight: bold;
  background-color: #2e82ff;
}

/*botão vermelho*/
.btn-custom-vermelho-medio {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
  text-align: center;
  border: none;
  height: 63px;
  width: 32%;
  font-size: 23px;
  border-radius: 10px;
}

.btn-custom-vermelho-medio:hover {
  font-weight: bold;
  background-color: #c21d2d;
}

/*botão verde*/
.btn-custom-verde-medio {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verde-medio:hover {
  font-weight: bold;
  background-color: #007a2f;
}

/*botão laranja*/
.btn-custom-laranja-medio {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-laranja-medio:hover {
  font-weight: bold;
  background-color: #e66700;
}

/*botão preto*/
.btn-custom-preto-medio {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-preto-medio:hover {
  font-weight: bold;
  background-color: #0f0f0f;
}

/*botão azul escuro*/
.btn-custom-azul-escuro-medio {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azul-escuro-medio:hover {
  font-weight: bold;
  background-color: #0041b1;
}

/*botão verde escuro*/
.btn-custom-verde-escuro-medio {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verde-escuro-medio:hover {
  font-weight: bold;
  background-color: #007200;
}

/*botão cinza médio*/
.btn-custom-cinza-medio {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinza-medio:hover {
  font-weight: bold;
  background-color: #565e65;
}

/*botão amarelo médio*/
.btn-custom-amarelo-medio {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-amarelo-medio:hover {
  font-weight: bold;
  background-color: #e0a800;
}

/*botão roxo médio*/
.btn-custom-roxo-medio {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxo-medio:hover {
  font-weight: bold;
  background-color: #632fc5;
}

/*botão ciano médio*/
.btn-custom-ciano-medio {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-ciano-medio:hover {
  font-weight: bold;
  background-color: #01cfcf;
}

/*botão rosa médio*/
.btn-custom-rosa-medio {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosa-medio:hover {
  font-weight: bold;
  background-color: #ca1e74;
}

/*botão cinza claro médio*/
.btn-custom-cinza-claro-medio {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinza-claro-medio:hover {
  font-weight: bold;
  background-color: #d1d1d1;
}

/*botão azul claro médio*/
.btn-custom-azul-claro-medio {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azul-claro-medio:hover {
  font-weight: bold;
  background-color: #7cadff;
}

/*botão verde claro médio*/
.btn-custom-verde-claro-medio {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verde-claro-medio:hover {
  font-weight: bold;
  background-color: #53d8a2;
}

/*botão vermelho claro médio*/
.btn-custom-vermelho-claro-medio {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-vermelho-claro-medio:hover {
  font-weight: bold;
  background-color: #ff7782;
}

/*botão amarelo claro médio*/
.btn-custom-amarelo-claro-medio {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-amarelo-claro-medio:hover {
  font-weight: bold;
  background-color: #ffdc7e;
}

/*botão roxo claro médio*/
.btn-custom-roxo-claro-medio {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxo-claro-medio:hover {
  font-weight: bold;
  background-color: #cbb9ff;
}

/*botão laranja claro médio*/
.btn-custom-laranja-claro-medio {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-laranja-claro-medio:hover {
  font-weight: bold;
  background-color: #ff9930;
}

/*botão ciano claro médio*/
.btn-custom-ciano-claro-medio {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-ciano-claro-medio:hover {
  font-weight: bold;
  background-color: #94e8e8;
}

/*botão rosa claro médio*/
.btn-custom-rosa-claro-medio {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosa-claro-medio:hover {
  font-weight: bold;
  background-color: #ff8ed6;
}

/*botão cinza escuro médio*/
.btn-custom-cinza-escuro-medio {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinza-escuro-medio:hover {
  font-weight: bold;
  background-color: #353636;
}

/*botão vermelho escuro médio*/
.btn-custom-vermelho-escuro-medio {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-vermelho-escuro-medio:hover {
  font-weight: bold;
  background-color: #720101;
}

/*botão amarelo escuro médio*/
.btn-custom-amarelo-escuro-medio {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-amarelo-escuro-medio:hover {
  font-weight: bold;
  background-color: #9e7702;
}

/*botão roxo escuro médio*/
.btn-custom-roxo-escuro-medio {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxo-escuro-medio:hover {
  font-weight: bold;
  background-color: #36005f;
}

/*botão laranja escuro médio*/
.btn-custom-laranja-escuro-medio {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-laranja-escuro-medio:hover {
  font-weight: bold;
  background-color: #db5800;
}

/*botão ciano escuro médio*/
.btn-custom-ciano-escuro-medio {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-ciano-escuro-medio:hover {
  font-weight: bold;
  background-color: #066666;
}

/*botão rosa escuro médio*/
.btn-custom-rosa-escuro-medio {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosa-escuro-medio:hover {
  font-weight: bold;
  background-color: #6b1450;
}

/*botão neutro-1 médio*/
.btn-custom-neutro-1-medio {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-1-medio:hover {
  font-weight: bold;
  background-color: #d9dfe3;
}

/*botão neutro-2 médio*/
.btn-custom-neutro-2-medio {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-2-medio:hover {
  font-weight: bold;
  background-color: #d0d7db;
}

/*botão neutro-3 médio*/
.btn-custom-neutro-3-medio {
  font-weight: bold;
  background-color: var(--neutro-3);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-3-medio:hover {
  font-weight: bold;
  background-color: #c6ccd0;
}

/*botão neutro-4 médio*/
.btn-custom-neutro-4-medio {
  font-weight: bold;
  background-color: var(--neutro-4);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-4-medio:hover {
  font-weight: bold;
  background-color: #b8bdc2;
}

/*botão neutro-5 médio*/
.btn-custom-neutro-5-medio {
  font-weight: bold;
  background-color: var(--neutro-5);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro-5-medio:hover {
  font-weight: bold;
  background-color: #9ea4aa;
}












/*Botão medio vazado medio*/

/*botão azul vazado*/
.btn-custom-azul-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul);
  text-align: center;
  border: var(--azul) solid 1px;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azul-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
}

/*botão vermelho vazado*/
.btn-custom-vermelho-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho);
  text-align: center;
  border: solid 1px var(--vermelho);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-vermelho-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
}

/*botão verde vazado*/
.btn-custom-verde-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde);
  text-align: center;
  border: var(--verde) 1px solid;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verde-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
}

/*botão laranja vazado*/
.btn-custom-laranja-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja);
  text-align: center;
  border: 1px var(--laranja) solid;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-laranja-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
}

/*botão preto vazado*/
.btn-custom-preto-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  text-align: center;
  border: 1px solid var(--preto);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-preto-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
}

/*botão azul escuro vazado*/
.btn-custom-azulescuro-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-escuro);
  text-align: center;
  border: 1px solid var(--azul-escuro);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-azulescuro-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
}

/*botão verde escuro vazado*/
.btn-custom-verdeescuro-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-escuro);
  text-align: center;
  border: 1px solid var(--verde-escuro);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-verdeescuro-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
}

/*botão amarelo vazado*/
.btn-custom-amarelo-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo);
  text-align: center;
  border: 1px solid var(--amarelo);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-amarelo-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
}

/* botão roxo vazado */
.btn-custom-roxo-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo);
  text-align: center;
  border: 1px solid var(--roxo);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxo-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
}

/* botão ciano vazado */
.btn-custom-ciano-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano);
  text-align: center;
  border: 1px solid var(--ciano);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-ciano-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
}

/* botão rosa vazado */
.btn-custom-rosa-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa);
  text-align: center;
  border: 1px solid var(--rosa);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosa-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
}

/* botão cinza vazado */
.btn-custom-cinza-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza);
  text-align: center;
  border: 1px solid var(--cinza);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinza-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
}

/* botão cinza claro vazado */
.btn-custom-cinzaclaro-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-claro);
  text-align: center;
  border: 1px solid var(--cinza-claro);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-cinzaclaro-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
}

/* botão roxo claro vazado */
.btn-custom-roxoclaro-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-claro);
  text-align: center;
  border: 1px solid var(--roxo-claro);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-roxoclaro-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
}

/* botão rosa claro vazado */
.btn-custom-rosaclaro-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-claro);
  text-align: center;
  border: 1px solid var(--rosa-claro);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-rosaclaro-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
}

/* botão neutro 1 vazado */
.btn-custom-neutro1-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-1);
  text-align: center;
  border: 1px solid var(--neutro-1);
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-neutro1-vazado-medio:hover {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
}

/* botão gradiente preto (sem hover invertido pois é gradiente) */
.btn-custom-gradpreto-vazado-medio {
  font-weight: bold;
  background-color: var(--transparente);
  color: #3d3d3d;
  text-align: center;
  border: 1px solid #3d3d3d;
  border-radius: 10px;
  height: 63px;
  width: 32%;
  font-size: 23px;
}

.btn-custom-gradpreto-vazado-medio:hover {
  font-weight: bold;
  background: var(--grad-preto);
  color: var(--branco);
}







/*BOTÃO grande*/

/*botão branco*/
.btn-custom-branco-grande {
  font-weight: bold;
  background-color: var(--transparente);
  text-align: center;
  border: 1px var(--preto) solid;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-branco-grande:hover {
  font-weight: bold;
  background-color: rgba(240, 240, 240, 0.863);
}

/*botão azul*/
.btn-custom-azul-grande {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-grande:hover {
  font-weight: bold;
  background-color: #2e82ff;
}

/*botão vermelho*/
.btn-custom-vermelho-grande {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-grande:hover {
  font-weight: bold;
  background-color: #c21d2d;
}

/*botão verde*/
.btn-custom-verde-grande {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-grande:hover {
  font-weight: bold;
  background-color: #007a2f;
}

/*botão laranja*/
.btn-custom-laranja-grande {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-grande:hover {
  font-weight: bold;
  background-color: #e66700;
}

/*botão preto*/
.btn-custom-preto-grande {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-preto-grande:hover {
  font-weight: bold;
  background-color: #0f0f0f;
}

/*botão azul escuro*/
.btn-custom-azul-escuro-grande {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-escuro-grande:hover {
  font-weight: bold;
  background-color: #0041b1;
}

/*botão verde escuro*/
.btn-custom-verde-escuro-grande {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-escuro-grande:hover {
  font-weight: bold;
  background-color: #007200;
}

/*botão cinza*/
.btn-custom-cinza-grande {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-grande:hover {
  font-weight: bold;
  background-color: #565e65;
}

/*botão amarelo*/
.btn-custom-amarelo-grande {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-grande:hover {
  font-weight: bold;
  background-color: #e0a800;
}

/*botão roxo*/
.btn-custom-roxo-grande {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-grande:hover {
  font-weight: bold;
  background-color: #632fc5;
}

/*botão ciano*/
.btn-custom-ciano-grande {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-grande:hover {
  font-weight: bold;
  background-color: #01cfcf;
}

/*botão rosa*/
.btn-custom-rosa-grande {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-grande:hover {
  font-weight: bold;
  background-color: #ca1e74;
}

/*botão cinza claro*/
.btn-custom-cinza-claro-grande {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-claro-grande:hover {
  font-weight: bold;
  background-color: #d1d1d1;
}

/*botão azul claro*/
.btn-custom-azul-claro-grande {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-claro-grande:hover {
  font-weight: bold;
  background-color: #7cadff;
}

/*botão verde claro*/
.btn-custom-verde-claro-grande {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-claro-grande:hover {
  font-weight: bold;
  background-color: #53d8a2;
}

/*botão vermelho claro*/
.btn-custom-vermelho-claro-grande {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-claro-grande:hover {
  font-weight: bold;
  background-color: #ff7782;
}

/*botão amarelo claro*/
.btn-custom-amarelo-claro-grande {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-claro-grande:hover {
  font-weight: bold;
  background-color: #ffdc7e;
}

/*botão roxo claro*/
.btn-custom-roxo-claro-grande {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-claro-grande:hover {
  font-weight: bold;
  background-color: #cbb9ff;
}

/*botão laranja claro*/
.btn-custom-laranja-claro-grande {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-claro-grande:hover {
  font-weight: bold;
  background-color: #ff9930;
}

/*botão ciano claro*/
.btn-custom-ciano-claro-grande {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-claro-grande:hover {
  font-weight: bold;
  background-color: #94e8e8;
}

/*botão rosa claro*/
.btn-custom-rosa-claro-grande {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-claro-grande:hover {
  font-weight: bold;
  background-color: #ff8ed6;
}

/*botão cinza escuro*/
.btn-custom-cinza-escuro-grande {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-escuro-grande:hover {
  font-weight: bold;
  background-color: #353636;
}

/*botão vermelho escuro*/
.btn-custom-vermelho-escuro-grande {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-escuro-grande:hover {
  font-weight: bold;
  background-color: #720101;
}

/*botão amarelo escuro*/
.btn-custom-amarelo-escuro-grande {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-escuro-grande:hover {
  font-weight: bold;
  background-color: #9e7702;
}

/*botão roxo escuro*/
.btn-custom-roxo-escuro-grande {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-escuro-grande:hover {
  font-weight: bold;
  background-color: #36005f;
}

/*botão laranja escuro*/
.btn-custom-laranja-escuro-grande {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-escuro-grande:hover {
  font-weight: bold;
  background-color: #db5800;
}

/*botão ciano escuro*/
.btn-custom-ciano-escuro-grande {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-escuro-grande:hover {
  font-weight: bold;
  background-color: #066666;
}

/*botão rosa escuro*/
.btn-custom-rosa-escuro-grande {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-escuro-grande:hover {
  font-weight: bold;
  background-color: #6b1450;
}

/*botão neutro-1*/
.btn-custom-neutro-1-grande {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-neutro-1-grande:hover {
  font-weight: bold;
  background-color: #d9dfe3;
}

/*botão neutro-2*/
.btn-custom-neutro-2-grande {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 50%;
}








/*BOTÃO grande VAZADO*/

/*botão branco vazado*/
.btn-custom-branco-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  text-align: center;
  border: 1px solid var(--preto);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-branco-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
}

/*botão azul vazado*/
.btn-custom-azul-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul);
  text-align: center;
  border: 1px solid var(--azul);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
}

/*botão vermelho vazado*/
.btn-custom-vermelho-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho);
  text-align: center;
  border: 1px solid var(--vermelho);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
}

/*botão verde vazado*/
.btn-custom-verde-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde);
  text-align: center;
  border: 1px solid var(--verde);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
}

/*botão laranja vazado*/
.btn-custom-laranja-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja);
  text-align: center;
  border: 1px solid var(--laranja);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
}

/*botão preto vazado*/
.btn-custom-preto-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  text-align: center;
  border: 1px solid var(--preto);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-preto-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
}

/*botão azul escuro vazado*/
.btn-custom-azul-escuro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-escuro);
  text-align: center;
  border: 1px solid var(--azul-escuro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-escuro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
}

/*botão verde escuro vazado*/
.btn-custom-verde-escuro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-escuro);
  text-align: center;
  border: 1px solid var(--verde-escuro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-escuro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
}

/*botão cinza vazado*/
.btn-custom-cinza-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza);
  text-align: center;
  border: 1px solid var(--cinza);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
}

/*botão amarelo vazado*/
.btn-custom-amarelo-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo);
  text-align: center;
  border: 1px solid var(--amarelo);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--branco);
}

/*botão roxo vazado*/
.btn-custom-roxo-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo);
  text-align: center;
  border: 1px solid var(--roxo);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
}

/*botão ciano vazado*/
.btn-custom-ciano-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano);
  text-align: center;
  border: 1px solid var(--ciano);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--branco);
}

/*botão rosa vazado*/
.btn-custom-rosa-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa);
  text-align: center;
  border: 1px solid var(--rosa);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
}

/*botão cinza claro vazado*/
.btn-custom-cinza-claro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-claro);
  text-align: center;
  border: 1px solid var(--cinza-claro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-claro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
}

/*botão azul claro vazado*/
.btn-custom-azul-claro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-claro);
  text-align: center;
  border: 1px solid var(--azul-claro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-azul-claro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
}

/*botão verde claro vazado*/
.btn-custom-verde-claro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-claro);
  text-align: center;
  border: 1px solid var(--verde-claro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-verde-claro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
}

/*botão vermelho claro vazado*/
.btn-custom-vermelho-claro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho-claro);
  text-align: center;
  border: 1px solid var(--vermelho-claro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-claro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
}

/*botão amarelo claro vazado*/
.btn-custom-amarelo-claro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo-claro);
  text-align: center;
  border: 1px solid var(--amarelo-claro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-claro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
}

/*botão roxo claro vazado*/
.btn-custom-roxo-claro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-claro);
  text-align: center;
  border: 1px solid var(--roxo-claro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-claro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
}

/*botão laranja claro vazado*/
.btn-custom-laranja-claro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja-claro);
  text-align: center;
  border: 1px solid var(--laranja-claro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-claro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
}

/*botão ciano claro vazado*/
.btn-custom-ciano-claro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano-claro);
  text-align: center;
  border: 1px solid var(--ciano-claro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-claro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
}

/*botão rosa claro vazado*/
.btn-custom-rosa-claro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-claro);
  text-align: center;
  border: 1px solid var(--rosa-claro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-claro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
}

/*botão cinza escuro vazado*/
.btn-custom-cinza-escuro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-escuro);
  text-align: center;
  border: 1px solid var(--cinza-escuro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-cinza-escuro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
}

/*botão vermelho escuro vazado*/
.btn-custom-vermelho-escuro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho-escuro);
  text-align: center;
  border: 1px solid var(--vermelho-escuro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-vermelho-escuro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
}

/*botão amarelo escuro vazado*/
.btn-custom-amarelo-escuro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo-escuro);
  text-align: center;
  border: 1px solid var(--amarelo-escuro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-amarelo-escuro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
}

/*botão roxo escuro vazado*/
.btn-custom-roxo-escuro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-escuro);
  text-align: center;
  border: 1px solid var(--roxo-escuro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-roxo-escuro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
}

/*botão laranja escuro vazado*/
.btn-custom-laranja-escuro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja-escuro);
  text-align: center;
  border: 1px solid var(--laranja-escuro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-laranja-escuro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
}

/*botão ciano escuro vazado*/
.btn-custom-ciano-escuro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano-escuro);
  text-align: center;
  border: 1px solid var(--ciano-escuro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-ciano-escuro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
}

/*botão rosa escuro vazado*/
.btn-custom-rosa-escuro-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-escuro);
  text-align: center;
  border: 1px solid var(--rosa-escuro);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-rosa-escuro-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
}

/*botão neutro-1 vazado*/
.btn-custom-neutro-1-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-1);
  text-align: center;
  border: 1px solid var(--neutro-1);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-neutro-1-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
}

/*botão neutro-2 vazado*/
.btn-custom-neutro-2-vazado-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-2);
  text-align: center;
  border: 1px solid var(--neutro-2);
  border-radius: 10px;
  height: 63px;
  width: 50%;
  font-size: 27px;
}

.btn-custom-neutro-2-vazado-grande:hover {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
}






/*EXTRAS grande*/

/* Botão Azul */
.btn-custom-azul-extra-grande {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-azul-extra-grande:hover {
  font-weight: bold;
  background-color: #2e82ff;
  /* Uma cor mais clara, seguindo seu exemplo */
}

/* Botão Verde */
.btn-custom-verde-extra-grande {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-verde-extra-grande:hover {
  font-weight: bold;
  background-color: #00b310;
  /* Tom mais claro */
}

/* Botão Vermelho */
.btn-custom-vermelho-extra-grande {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-vermelho-extra-grande:hover {
  font-weight: bold;
  background-color: #ff4d5a;
  /* Tom mais claro */
}

/* Botão Amarelo */
.btn-custom-amarelo-extra-grande {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--preto);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-amarelo-extra-grande:hover {
  font-weight: bold;
  background-color: #ffd64d;
  /* Tom mais claro */
}

/* Botão Roxo */
.btn-custom-roxo-extra-grande {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-roxo-extra-grande:hover {
  font-weight: bold;
  background-color: #8c57e0;
  /* Tom mais claro */
}

/* Botão Laranja */
.btn-custom-laranja-extra-grande {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-laranja-extra-grande:hover {
  font-weight: bold;
  background-color: #ff9147;
  /* Tom mais claro */
}

/* Botão Ciano */
.btn-custom-ciano-extra-grande {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--preto);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-ciano-extra-grande:hover {
  font-weight: bold;
  background-color: #49ffff;
  /* Tom mais claro */
}

/* Botão Rosa */
.btn-custom-rosa-extra-grande {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-rosa-extra-grande:hover {
  font-weight: bold;
  background-color: #ff4d9e;
  /* Tom mais claro */
}

/* Botão Cinza */
.btn-custom-cinza-extra-grande {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-cinza-extra-grande:hover {
  font-weight: bold;
  background-color: #8a9298;
  /* Tom mais claro */
}

/* Botão Preto */
.btn-custom-preto-extra-grande {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-preto-extra-grande:hover {
  font-weight: bold;
  background-color: #333333;
  /* Tom um pouco mais claro */
}

/* Botão Branco */
.btn-custom-branco-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: 1px solid var(--cinza-claro);
  /* Borda para visibilidade */
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-branco-extra-grande:hover {
  font-weight: bold;
  background-color: #f0f0f0;
  /* Tom levemente mais escuro */
}


/* Botão Cinza Claro */
.btn-custom-cinza-claro-extra-grande {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-cinza-claro-extra-grande:hover {
  font-weight: bold;
  background-color: #cfcfcf;
  /* Tom levemente mais escuro */
}

/* Botão Azul Claro */
.btn-custom-azul-claro-extra-grande {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-azul-claro-extra-grande:hover {
  font-weight: bold;
  background-color: #b1d4ff;
  /* Tom um pouco mais escuro */
}

/* Botão Verde Claro */
.btn-custom-verde-claro-extra-grande {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-verde-claro-extra-grande:hover {
  font-weight: bold;
  background-color: #8effd0;
  /* Tom um pouco mais escuro */
}

/* Botão Vermelho Claro */
.btn-custom-vermelho-claro-extra-grande {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-vermelho-claro-extra-grande:hover {
  font-weight: bold;
  background-color: #ffb1b8;
  /* Tom um pouco mais escuro */
}

/* Botão Amarelo Claro */
.btn-custom-amarelo-claro-extra-grande {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-amarelo-claro-extra-grande:hover {
  font-weight: bold;
  background-color: #fff0c7;
  /* Tom um pouco mais escuro */
}

/* Botão Roxo Claro */
.btn-custom-roxo-claro-extra-grande {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-roxo-claro-extra-grande:hover {
  font-weight: bold;
  background-color: #e5d0ff;
  /* Tom um pouco mais escuro */
}

/* Botão Laranja Claro */
.btn-custom-laranja-claro-extra-grande {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-laranja-claro-extra-grande:hover {
  font-weight: bold;
  background-color: #ffc28f;
  /* Tom um pouco mais escuro */
}

/* Botão Ciano Claro */
.btn-custom-ciano-claro-extra-grande {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-ciano-claro-extra-grande:hover {
  font-weight: bold;
  background-color: #c9feff;
  /* Tom um pouco mais escuro */
}

/* Botão Rosa Claro */
.btn-custom-rosa-claro-extra-grande {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-rosa-claro-extra-grande:hover {
  font-weight: bold;
  background-color: #ffc9ee;
  /* Tom um pouco mais escuro */
}


/* Botão Cinza Escuro */
.btn-custom-cinza-escuro-extra-grande {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-cinza-escuro-extra-grande:hover {
  font-weight: bold;
  background-color: #5a5b5d;
  /* Tom um pouco mais claro */
}

/* Botão Azul Escuro */
.btn-custom-azul-escuro-extra-grande {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-azul-escuro-extra-grande:hover {
  font-weight: bold;
  background-color: #0042a5;
  /* Tom mais claro, seguindo seu exemplo */
}

/* Botão Verde Escuro */
.btn-custom-verde-escuro-extra-grande {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-verde-escuro-extra-grande:hover {
  font-weight: bold;
  background-color: #007a00;
  /* Tom mais claro */
}

/* Botão Vermelho Escuro */
.btn-custom-vermelho-escuro-extra-grande {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-vermelho-escuro-extra-grande:hover {
  font-weight: bold;
  background-color: #a40000;
  /* Tom mais claro */
}

/* Botão Amarelo Escuro */
.btn-custom-amarelo-escuro-extra-grande {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-amarelo-escuro-extra-grande:hover {
  font-weight: bold;
  background-color: #ce9c00;
  /* Tom mais claro */
}

/* Botão Roxo Escuro */
.btn-custom-roxo-escuro-extra-grande {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-roxo-escuro-extra-grande:hover {
  font-weight: bold;
  background-color: #6100a0;
  /* Tom mais claro */
}

/* Botão Laranja Escuro */
.btn-custom-laranja-escuro-extra-grande {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-laranja-escuro-extra-grande:hover {
  font-weight: bold;
  background-color: #e56d1a;
  /* Tom mais claro */
}

/* Botão Ciano Escuro */
.btn-custom-ciano-escuro-extra-grande {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-ciano-escuro-extra-grande:hover {
  font-weight: bold;
  background-color: #00aaaa;
  /* Tom mais claro */
}

/* Botão Rosa Escuro */
.btn-custom-rosa-escuro-extra-grande {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-rosa-escuro-extra-grande:hover {
  font-weight: bold;
  background-color: #a42c7a;
  /* Tom mais claro */
}



/* Botão Neutro 1 */
.btn-custom-neutro-1-extra-grande {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-neutro-1-extra-grande:hover {
  font-weight: bold;
  background-color: #e9ecef;
  /* Um tom um pouco mais escuro */
}

/* Botão Neutro 2 */
.btn-custom-neutro-2-extra-grande {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-neutro-2-extra-grande:hover {
  font-weight: bold;
  background-color: #dee2e6;
  /* Um tom um pouco mais escuro */
}

/* Botão Neutro 3 */
.btn-custom-neutro-3-extra-grande {
  font-weight: bold;
  background-color: var(--neutro-3);
  color: var(--preto);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-neutro-3-extra-grande:hover {
  font-weight: bold;
  background-color: #ced4da;
  /* Um tom um pouco mais escuro */
}

/* Botão Neutro 4 */
.btn-custom-neutro-4-extra-grande {
  font-weight: bold;
  background-color: var(--neutro-4);
  color: var(--preto);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-neutro-4-extra-grande:hover {
  font-weight: bold;
  background-color: #adb5bd;
  /* Um tom um pouco mais escuro */
}

/* Botão Neutro 5 */
.btn-custom-neutro-5-extra-grande {
  font-weight: bold;
  background-color: var(--neutro-5);
  color: var(--branco);
  /* Ajuste para melhor contraste */
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-neutro-5-extra-grande:hover {
  font-weight: bold;
  background-color: #9299a1;
  /* Um tom um pouco mais escuro */
}

/* Botão Gradiente Azul-Verde */
.btn-custom-grad-azul-verde-extra-grande {
  font-weight: bold;
  background: var(--grad-azul-verde);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-grad-azul-verde-extra-grande:hover {
  font-weight: bold;
  background: linear-gradient(45deg, #00933e, #00cc2f);
  /* Variação mais clara do gradiente */
}

/* Botão Gradiente Preto */
.btn-custom-grad-preto-extra-grande {
  font-weight: bold;
  background: var(--grad-preto);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-grad-preto-extra-grande:hover {
  font-weight: bold;
  background: linear-gradient(45deg, #2c2c2c, #565656);
  /* Variação mais clara do gradiente */
}

/* Botão Gradiente Laranja */
.btn-custom-grad-laranja-extra-grande {
  font-weight: bold;
  background: var(--grad-laranja);
  color: var(--branco);
  text-align: center;
  border: none;
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 30px
}

.btn-custom-grad-laranja-extra-grande:hover {
  font-weight: bold;
  background: linear-gradient(45deg, #ffa86b, #ff7b2d);
  /* Variação mais clara do gradiente */
}





/*botão azul vazado*/
.btn-custom-azul-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul);
  text-align: center;
  border: 1px solid var(--azul);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
}

.btn-custom-azul-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
}


/* Botão Azul Vazado Extra Grande */
.btn-custom-azul-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul);
  text-align: center;
  border: 1px solid var(--azul);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Adicionado transição para suavizar o hover */
}

.btn-custom-azul-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--azul);
  color: var(--branco);
}

/* Botão Verde Vazado Extra grande */
.btn-custom-verde-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde);
  text-align: center;
  border: 1px solid var(--verde);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-verde-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--verde);
  color: var(--branco);
}

/* Botão Vermelho Vazado Extra grande */
.btn-custom-vermelho-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho);
  text-align: center;
  border: 1px solid var(--vermelho);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-vermelho-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--vermelho);
  color: var(--branco);
}

/* Botão Amarelo Vazado Extra grande */
.btn-custom-amarelo-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo);
  text-align: center;
  border: 1px solid var(--amarelo);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-amarelo-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--amarelo);
  color: var(--preto);
  /* Ajuste para melhor contraste no hover */
}

/* Botão Roxo Vazado Extra grande */
.btn-custom-roxo-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo);
  text-align: center;
  border: 1px solid var(--roxo);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-roxo-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--roxo);
  color: var(--branco);
}

/* Botão Laranja Vazado Extra grande */
.btn-custom-laranja-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja);
  text-align: center;
  border: 1px solid var(--laranja);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-laranja-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--laranja);
  color: var(--branco);
}

/* Botão Ciano Vazado Extra grande */
.btn-custom-ciano-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano);
  text-align: center;
  border: 1px solid var(--ciano);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-ciano-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--ciano);
  color: var(--preto);
  /* Ajuste para melhor contraste no hover */
}

/* Botão Rosa Vazado Extra grande */
.btn-custom-rosa-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa);
  text-align: center;
  border: 1px solid var(--rosa);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-rosa-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--rosa);
  color: var(--branco);
}

/* Botão Cinza Vazado Extra grande */
.btn-custom-cinza-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza);
  text-align: center;
  border: 1px solid var(--cinza);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-cinza-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--cinza);
  color: var(--branco);
}

/* Botão Preto Vazado Extra grande */
.btn-custom-preto-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--preto);
  text-align: center;
  border: 1px solid var(--preto);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-preto-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--preto);
  color: var(--branco);
}

/* Botão Branco Vazado Extra grande */
.btn-custom-branco-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza);
  /* Alterado para cinza para ser visível em fundo branco */
  text-align: center;
  border: 1px solid var(--cinza);
  /* Borda cinza para visibilidade */
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-branco-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--cinza-claro);
  /* Fundo claro no hover */
  color: var(--preto);
  border-color: var(--cinza-claro);
}


/* Botão Cinza Claro Vazado Extra grande */
.btn-custom-cinza-claro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-claro);
  text-align: center;
  border: 1px solid var(--cinza-claro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-cinza-claro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--cinza-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Azul Claro Vazado Extra grande */
.btn-custom-azul-claro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-claro);
  text-align: center;
  border: 1px solid var(--azul-claro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-azul-claro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--azul-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Verde Claro Vazado Extra grande */
.btn-custom-verde-claro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-claro);
  text-align: center;
  border: 1px solid var(--verde-claro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-verde-claro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--verde-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Vermelho Claro Vazado Extra grande */
.btn-custom-vermelho-claro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho-claro);
  text-align: center;
  border: 1px solid var(--vermelho-claro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-vermelho-claro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--vermelho-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Amarelo Claro Vazado Extra grande */
.btn-custom-amarelo-claro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo-claro);
  text-align: center;
  border: 1px solid var(--amarelo-claro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-amarelo-claro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--amarelo-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Roxo Claro Vazado Extra grande */
.btn-custom-roxo-claro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-claro);
  text-align: center;
  border: 1px solid var(--roxo-claro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-roxo-claro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--roxo-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Laranja Claro Vazado Extra grande */
.btn-custom-laranja-claro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja-claro);
  text-align: center;
  border: 1px solid var(--laranja-claro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-laranja-claro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--laranja-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Ciano Claro Vazado Extra grande */
.btn-custom-ciano-claro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano-claro);
  text-align: center;
  border: 1px solid var(--ciano-claro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-ciano-claro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--ciano-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Rosa Claro Vazado Extra grande */
.btn-custom-rosa-claro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-claro);
  text-align: center;
  border: 1px solid var(--rosa-claro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-rosa-claro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--rosa-claro);
  color: var(--preto);
  /* Ajuste para contraste */
}


/* Botão Cinza Escuro Vazado Extra grande */
.btn-custom-cinza-escuro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--cinza-escuro);
  text-align: center;
  border: 1px solid var(--cinza-escuro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-cinza-escuro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--cinza-escuro);
  color: var(--branco);
}

/* Botão Azul Escuro Vazado Extra grande */
.btn-custom-azul-escuro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--azul-escuro);
  text-align: center;
  border: 1px solid var(--azul-escuro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-azul-escuro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--azul-escuro);
  color: var(--branco);
}

/* Botão Verde Escuro Vazado Extra grande */
.btn-custom-verde-escuro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--verde-escuro);
  text-align: center;
  border: 1px solid var(--verde-escuro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-verde-escuro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--verde-escuro);
  color: var(--branco);
}

/* Botão Vermelho Escuro Vazado Extra grande */
.btn-custom-vermelho-escuro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--vermelho-escuro);
  text-align: center;
  border: 1px solid var(--vermelho-escuro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-vermelho-escuro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--vermelho-escuro);
  color: var(--branco);
}

/* Botão Amarelo Escuro Vazado Extra grande */
.btn-custom-amarelo-escuro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--amarelo-escuro);
  text-align: center;
  border: 1px solid var(--amarelo-escuro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-amarelo-escuro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--amarelo-escuro);
  color: var(--branco);
}

/* Botão Roxo Escuro Vazado Extra grande */
.btn-custom-roxo-escuro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--roxo-escuro);
  text-align: center;
  border: 1px solid var(--roxo-escuro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-roxo-escuro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--roxo-escuro);
  color: var(--branco);
}

/* Botão Laranja Escuro Vazado Extra grande */
.btn-custom-laranja-escuro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--laranja-escuro);
  text-align: center;
  border: 1px solid var(--laranja-escuro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-laranja-escuro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--laranja-escuro);
  color: var(--branco);
}

/* Botão Ciano Escuro Vazado Extra grande */
.btn-custom-ciano-escuro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--ciano-escuro);
  text-align: center;
  border: 1px solid var(--ciano-escuro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-ciano-escuro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--ciano-escuro);
  color: var(--branco);
}

/* Botão Rosa Escuro Vazado Extra grande */
.btn-custom-rosa-escuro-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--rosa-escuro);
  text-align: center;
  border: 1px solid var(--rosa-escuro);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-rosa-escuro-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--rosa-escuro);
  color: var(--branco);
}


/* Botão Neutro 1 Vazado Extra grande */
.btn-custom-neutro-1-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-1);
  text-align: center;
  border: 1px solid var(--neutro-1);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-1-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--neutro-1);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Neutro 2 Vazado Extra grande */
.btn-custom-neutro-2-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-2);
  text-align: center;
  border: 1px solid var(--neutro-2);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-2-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--neutro-2);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Neutro 3 Vazado Extra grande */
.btn-custom-neutro-3-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-3);
  text-align: center;
  border: 1px solid var(--neutro-3);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-3-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--neutro-3);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Neutro 4 Vazado Extra grande */
.btn-custom-neutro-4-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-4);
  text-align: center;
  border: 1px solid var(--neutro-4);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-4-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--neutro-4);
  color: var(--preto);
  /* Ajuste para contraste */
}

/* Botão Neutro 5 Vazado Extra grande */
.btn-custom-neutro-5-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: var(--neutro-5);
  text-align: center;
  border: 1px solid var(--neutro-5);
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-custom-neutro-5-vazado-extra-grande:hover {
  font-weight: bold;
  background-color: var(--neutro-5);
  color: var(--preto);
  /* Ajuste para contraste */
}


/* Botão Gradiente Azul-Verde Vazado Extra grande */
.btn-custom-grad-azul-verde-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: #008332;
  /* Cor da borda inicial (primeira cor do gradiente) */
  text-align: center;
  border: 1px solid #008332;
  /* Borda com a cor inicial do gradiente */
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-grad-azul-verde-vazado-extra-grande:hover {
  font-weight: bold;
  background: var(--grad-azul-verde);
  /* Preenche com o gradiente no hover */
  color: var(--branco);
  border-color: transparent;
  /* A borda pode desaparecer ou se integrar ao gradiente */
}

/* Botão Gradiente Preto Vazado Extra grande */
.btn-custom-grad-preto-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: #131313;
  /* Cor da borda inicial (primeira cor do gradiente) */
  text-align: center;
  border: 1px solid #131313;
  /* Borda com a cor inicial do gradiente */
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-grad-preto-vazado-extra-grande:hover {
  font-weight: bold;
  background: var(--grad-preto);
  /* Preenche com o gradiente no hover */
  color: var(--branco);
  border-color: transparent;
}

/* Botão Gradiente Laranja Vazado Extra grande */
.btn-custom-grad-laranja-vazado-extra-grande {
  font-weight: bold;
  background-color: var(--transparente);
  color: #ff933b;
  /* Cor da borda inicial (primeira cor do gradiente) */
  text-align: center;
  border: 1px solid #ff933b;
  /* Borda com a cor inicial do gradiente */
  border-radius: 10px;
  height: 63px;
  width: 74%;
  font-size: 27px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-grad-laranja-vazado-extra-grande:hover {
  font-weight: bold;
  background: var(--grad-laranja);
  /* Preenche com o gradiente no hover */
  color: var(--branco);
  border-color: transparent;
}



















/*Botão de selecionar arquivo*/

.input-file {
  display: none;
}

.subir-arquivos-azul {

  width: 70px;
  height: 70px;
  background-color: var(--azul);
  color: white;
  font-size: 36px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.subir-arquivos-azul:hover {
  background-color: #0056b3;
}

.subir-arquivos-verde {

  width: 70px;
  height: 70px;
  background-color: var(--verde);
  color: white;
  font-size: 36px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.subir-arquivos-verde:hover {
  background-color: #00a31b;
}

.subir-arquivos-laranja {

  width: 70px;
  height: 70px;
  background-color: var(--laranja);
  color: white;
  font-size: 36px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.subir-arquivos-laranja:hover {
  background-color: #eb7100;
}


.subir-arquivos-vermelho {

  width: 70px;
  height: 70px;
  background-color: var(--vermelho);
  color: white;
  font-size: 36px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.subir-arquivos-vermelho:hover {
  background-color: #a10000;
}

.subir-arquivos-preto {

  width: 70px;
  height: 70px;
  background-color: var(--preto);
  color: white;
  font-size: 36px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.subir-arquivos-preto:hover {
  background-color: #222222;
}



.subir-arquivos-amarelo {

  width: 70px;
  height: 70px;
  background-color: var(--amarelo);
  color: white;
  font-size: 36px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.subir-arquivos-amarelo:hover {
  background-color: #ebdb00;
}

.subir-arquivos-roxo {

  width: 70px;
  height: 70px;
  background-color: var(--roxo);
  color: white;
  font-size: 36px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.subir-arquivos-roxo:hover {
  background-color: #6b009c;
}









/*Botão liga e desliga*/

.toggle-checkbox {
  display: none;
  /* or position: absolute; left: -9999px; for accessibility */
}


.toggle-checkbox {
  display: none;
  /* or position: absolute; left: -9999px; for accessibility */
}

.toggle-label {
  display: block;
  position: relative;
  width: 60px;
  /* Example width */
  height: 30px;
  /* Example height */
  background-color: var(--vermelho);
  border-radius: 15px;
  /* Half of height for rounded corners */
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-label::after {
  content: '';
  position: absolute;
  top: 3px;
  /* Adjust for padding */
  left: 3px;
  /* Adjust for padding */
  width: 24px;
  /* Example width */
  height: 24px;
  /* Example height */
  background-color: var(--branco);
  border-radius: 50%;
  /* For a circular thumb */
  transition: transform 0.3s;
}

.toggle-checkbox:checked+.toggle-label {
  background-color: #4CAF50;
  /* Example "on" color */
}

.toggle-checkbox:checked+.toggle-label::after {
  transform: translateX(30px);
  /* Move thumb to the right */
}






















@media (max-width: 800px) {

  /* Médios */
  .btn-custom-azul-vazado-medio-arredondado,
.btn-custom-vermelho-vazado-medio-arredondado,
.btn-custom-verde-vazado-medio-arredondado,
.btn-custom-laranja-vazado-medio-arredondado,
.btn-custom-preto-vazado-medio-arredondado,
.btn-custom-azulescuro-vazado-medio-arredondado,
.btn-custom-verdeescuro-vazado-medio-arredondado,
.btn-custom-amarelo-vazado-medio-arredondado,
.btn-custom-roxo-vazado-medio-arredondado,
.btn-custom-ciano-vazado-medio-arredondado,
.btn-custom-rosa-vazado-medio-arredondado,
.btn-custom-cinza-vazado-medio-arredondado,
.btn-custom-cinzaclaro-vazado-medio-arredondado,
.btn-custom-roxoclaro-vazado-medio-arredondado,
.btn-custom-rosaclaro-vazado-medio-arredondado,
.btn-custom-neutro1-vazado-medio-arredondado,
.btn-custom-gradpreto-vazado-medio-arredondado,
  .btn-custom-branco-medio-arredondado,
.btn-custom-azul-medio-arredondado,
.btn-custom-vermelho-medio-arredondado,
.btn-custom-verde-medio-arredondado,
.btn-custom-laranja-medio-arredondado,
.btn-custom-preto-medio-arredondado,
.btn-custom-azul-escuro-medio-arredondado,
.btn-custom-verde-escuro-medio-arredondado,
.btn-custom-cinza-medio-arredondado,
.btn-custom-amarelo-medio-arredondado,
.btn-custom-roxo-medio-arredondado,
.btn-custom-ciano-medio-arredondado,
.btn-custom-rosa-medio-arredondado,
.btn-custom-cinza-claro-medio-arredondado,
.btn-custom-azul-claro-medio-arredondado,
.btn-custom-verde-claro-medio-arredondado,
.btn-custom-vermelho-claro-medio-arredondado,
.btn-custom-amarelo-claro-medio-arredondado,
.btn-custom-roxo-claro-medio-arredondado,
.btn-custom-laranja-claro-medio-arredondado,
.btn-custom-ciano-claro-medio-arredondado,
.btn-custom-rosa-claro-medio-arredondado,
.btn-custom-cinza-escuro-medio-arredondado,
.btn-custom-vermelho-escuro-medio-arredondado,
.btn-custom-amarelo-escuro-medio-arredondado,
.btn-custom-roxo-escuro-medio-arredondado,
.btn-custom-laranja-escuro-medio-arredondado,
.btn-custom-ciano-escuro-medio-arredondado,
.btn-custom-rosa-escuro-medio-arredondado,
.btn-custom-neutro-1-medio-arredondado,
.btn-custom-neutro-2-medio-arredondado,
.btn-custom-neutro-3-medio-arredondado,
.btn-custom-neutro-4-medio-arredondado,
.btn-custom-neutro-5-medio-arredondado,
  .btn-custom-branco-medio,
  .btn-custom-azul-medio,
  .btn-custom-vermelho-medio,
  .btn-custom-verde-medio,
  .btn-custom-laranja-medio,
  .btn-custom-preto-medio,
  .btn-custom-azul-escuro-medio,
  .btn-custom-verde-escuro-medio,
  .btn-custom-cinza-medio,
  .btn-custom-amarelo-medio,
  .btn-custom-roxo-medio,
  .btn-custom-ciano-medio,
  .btn-custom-rosa-medio,
  .btn-custom-cinza-claro-medio,
  .btn-custom-azul-claro-medio,
  .btn-custom-verde-claro-medio,
  .btn-custom-vermelho-claro-medio,
  .btn-custom-amarelo-claro-medio,
  .btn-custom-roxo-claro-medio,
  .btn-custom-laranja-claro-medio,
  .btn-custom-ciano-claro-medio,
  .btn-custom-rosa-claro-medio,
  .btn-custom-cinza-escuro-medio,
  .btn-custom-vermelho-escuro-medio,
  .btn-custom-amarelo-escuro-medio,
  .btn-custom-roxo-escuro-medio,
  .btn-custom-laranja-escuro-medio,
  .btn-custom-ciano-escuro-medio,
  .btn-custom-rosa-escuro-medio,
  .btn-custom-neutro-1-medio,
  .btn-custom-neutro-2-medio,
  .btn-custom-neutro-3-medio,
  .btn-custom-neutro-4-medio,
  .btn-custom-neutro-5-medio,
  .btn-custom-azul-vazado-medio,
  .btn-custom-vermelho-vazado-medio,
  .btn-custom-verde-vazado-medio,
  .btn-custom-laranja-vazado-medio,
  .btn-custom-preto-vazado-medio,
  .btn-custom-azulescuro-vazado-medio,
  .btn-custom-verdeescuro-vazado-medio,
  .btn-custom-amarelo-vazado-medio,
  .btn-custom-roxo-vazado-medio,
  .btn-custom-ciano-vazado-medio,
  .btn-custom-rosa-vazado-medio,
  .btn-custom-cinza-vazado-medio,
  .btn-custom-cinzaclaro-vazado-medio,
  .btn-custom-roxoclaro-vazado-medio,
  .btn-custom-rosaclaro-vazado-medio,
  .btn-custom-neutro1-vazado-medio,
  .btn-custom-gradpreto-vazado-medio {
    width: 150px;
    font-size: 20px;
  }





  /* Grandes */
.btn-custom-branco-vazado-grande-arredondado,
.btn-custom-azul-vazado-grande-arredondado,
.btn-custom-vermelho-vazado-grande-arredondado,
.btn-custom-verde-vazado-grande-arredondado,
.btn-custom-laranja-vazado-grande-arredondado,
.btn-custom-preto-vazado-grande-arredondado,
.btn-custom-azul-escuro-vazado-grande-arredondado,
.btn-custom-verde-escuro-vazado-grande-arredondado,
.btn-custom-cinza-vazado-grande-arredondado,
.btn-custom-amarelo-vazado-grande-arredondado,
.btn-custom-roxo-vazado-grande-arredondado,
.btn-custom-ciano-vazado-grande-arredondado,
.btn-custom-rosa-vazado-grande-arredondado,
.btn-custom-cinza-claro-vazado-grande-arredondado,
.btn-custom-azul-claro-vazado-grande-arredondado,
.btn-custom-verde-claro-vazado-grande-arredondado,
.btn-custom-vermelho-claro-vazado-grande-arredondado,
.btn-custom-amarelo-claro-vazado-grande-arredondado,
.btn-custom-roxo-claro-vazado-grande-arredondado,
.btn-custom-laranja-claro-vazado-grande-arredondado,
.btn-custom-ciano-claro-vazado-grande-arredondado,
.btn-custom-rosa-claro-vazado-grande-arredondado,
.btn-custom-cinza-escuro-vazado-grande-arredondado,
.btn-custom-vermelho-escuro-vazado-grande-arredondado,
.btn-custom-amarelo-escuro-vazado-grande-arredondado,
.btn-custom-roxo-escuro-vazado-grande-arredondado,
.btn-custom-laranja-escuro-vazado-grande-arredondado,
.btn-custom-ciano-escuro-vazado-grande-arredondado,
.btn-custom-rosa-escuro-vazado-grande-arredondado,
.btn-custom-neutro-1-vazado-grande-arredondado,
.btn-custom-neutro-2-vazado-grande-arredondado,
  .btn-custom-branco-grande-arredondado,
.btn-custom-azul-grande-arredondado,
.btn-custom-vermelho-grande-arredondado,
.btn-custom-verde-grande-arredondado,
.btn-custom-laranja-grande-arredondado,
.btn-custom-preto-grande-arredondado,
.btn-custom-azul-escuro-grande-arredondado,
.btn-custom-verde-escuro-grande-arredondado,
.btn-custom-cinza-grande-arredondado,
.btn-custom-amarelo-grande-arredondado,
.btn-custom-roxo-grande-arredondado,
.btn-custom-ciano-grande-arredondado,
.btn-custom-rosa-grande-arredondado,
.btn-custom-cinza-claro-grande-arredondado,
.btn-custom-azul-claro-grande-arredondado,
.btn-custom-verde-claro-grande-arredondado,
.btn-custom-vermelho-claro-grande-arredondado,
.btn-custom-amarelo-claro-grande-arredondado,
.btn-custom-roxo-claro-grande-arredondado,
.btn-custom-laranja-claro-grande-arredondado,
.btn-custom-ciano-claro-grande-arredondado,
.btn-custom-rosa-claro-grande-arredondado,
.btn-custom-cinza-escuro-grande-arredondado,
.btn-custom-vermelho-escuro-grande-arredondado,
.btn-custom-amarelo-escuro-grande-arredondado,
.btn-custom-roxo-escuro-grande-arredondado,
.btn-custom-laranja-escuro-grande-arredondado,
.btn-custom-ciano-escuro-grande-arredondado,
.btn-custom-rosa-escuro-grande-arredondado,
.btn-custom-neutro-1-grande-arredondado,
.btn-custom-neutro-2-grande-arredondado,
  .btn-custom-branco-grande,
  .btn-custom-azul-grande,
  .btn-custom-vermelho-grande,
  .btn-custom-verde-grande,
  .btn-custom-laranja-grande,
  .btn-custom-preto-grande,
  .btn-custom-azul-escuro-grande,
  .btn-custom-verde-escuro-grande,
  .btn-custom-cinza-grande,
  .btn-custom-amarelo-grande,
  .btn-custom-roxo-grande,
  .btn-custom-ciano-grande,
  .btn-custom-rosa-grande,
  .btn-custom-cinza-claro-grande,
  .btn-custom-azul-claro-grande,
  .btn-custom-verde-claro-grande,
  .btn-custom-vermelho-claro-grande,
  .btn-custom-amarelo-claro-grande,
  .btn-custom-roxo-claro-grande,
  .btn-custom-laranja-claro-grande,
  .btn-custom-ciano-claro-grande,
  .btn-custom-rosa-claro-grande,
  .btn-custom-cinza-escuro-grande,
  .btn-custom-vermelho-escuro-grande,
  .btn-custom-amarelo-escuro-grande,
  .btn-custom-roxo-escuro-grande,
  .btn-custom-laranja-escuro-grande,
  .btn-custom-ciano-escuro-grande,
  .btn-custom-rosa-escuro-grande,
  .btn-custom-neutro-1-grande,
  .btn-custom-neutro-2-grande,
  .btn-custom-branco-vazado-grande,
  .btn-custom-azul-vazado-grande,
  .btn-custom-vermelho-vazado-grande,
  .btn-custom-verde-vazado-grande,
  .btn-custom-laranja-vazado-grande,
  .btn-custom-preto-vazado-grande,
  .btn-custom-azul-escuro-vazado-grande,
  .btn-custom-verde-escuro-vazado-grande,
  .btn-custom-cinza-vazado-grande,
  .btn-custom-amarelo-vazado-grande,
  .btn-custom-roxo-vazado-grande,
  .btn-custom-ciano-vazado-grande,
  .btn-custom-rosa-vazado-grande,
  .btn-custom-cinza-claro-vazado-grande,
  .btn-custom-azul-claro-vazado-grande,
  .btn-custom-verde-claro-vazado-grande,
  .btn-custom-vermelho-claro-vazado-grande,
  .btn-custom-amarelo-claro-vazado-grande,
  .btn-custom-roxo-claro-vazado-grande,
  .btn-custom-laranja-claro-vazado-grande,
  .btn-custom-ciano-claro-vazado-grande,
  .btn-custom-rosa-claro-vazado-grande,
  .btn-custom-cinza-escuro-vazado-grande,
  .btn-custom-vermelho-escuro-vazado-grande,
  .btn-custom-amarelo-escuro-vazado-grande,
  .btn-custom-roxo-escuro-vazado-grande,
  .btn-custom-laranja-escuro-vazado-grande,
  .btn-custom-ciano-escuro-vazado-grande,
  .btn-custom-rosa-escuro-vazado-grande,
  .btn-custom-neutro-1-vazado-grande,
  .btn-custom-neutro-2-vazado-grande {
      width: 190px;
      font-size: 22px;
  }




  .btn-custom-azul-extra-grande-arredondado,
.btn-custom-verde-extra-grande-arredondado,
.btn-custom-vermelho-extra-grande-arredondado,
.btn-custom-amarelo-extra-grande-arredondado,
.btn-custom-roxo-extra-grande-arredondado,
.btn-custom-laranja-extra-grande-arredondado,
.btn-custom-ciano-extra-grande-arredondado,
.btn-custom-rosa-extra-grande-arredondado,
.btn-custom-cinza-extra-grande-arredondado,
.btn-custom-preto-extra-grande-arredondado,
.btn-custom-branco-extra-grande-arredondado,
.btn-custom-cinza-claro-extra-grande-arredondado,
.btn-custom-azul-claro-extra-grande-arredondado,
.btn-custom-verde-claro-extra-grande-arredondado,
.btn-custom-vermelho-claro-extra-grande-arredondado,
.btn-custom-amarelo-claro-extra-grande-arredondado,
.btn-custom-roxo-claro-extra-grande-arredondado,
.btn-custom-laranja-claro-extra-grande-arredondado,
.btn-custom-ciano-claro-extra-grande-arredondado,
.btn-custom-rosa-claro-extra-grande-arredondado,
.btn-custom-cinza-escuro-extra-grande-arredondado,
.btn-custom-azul-escuro-extra-grande-arredondado,
.btn-custom-verde-escuro-extra-grande-arredondado,
.btn-custom-vermelho-escuro-extra-grande-arredondado,
.btn-custom-amarelo-escuro-extra-grande-arredondado,
.btn-custom-roxo-escuro-extra-grande-arredondado,
.btn-custom-laranja-escuro-extra-grande-arredondado,
.btn-custom-ciano-escuro-extra-grande-arredondado,
.btn-custom-rosa-escuro-extra-grande-arredondado,
.btn-custom-neutro-1-extra-grande-arredondado,
.btn-custom-neutro-2-extra-grande-arredondado,
.btn-custom-neutro-3-extra-grande-arredondado,
.btn-custom-neutro-4-extra-grande-arredondado,
.btn-custom-neutro-5-extra-grande-arredondado,
.btn-custom-grad-azul-verde-extra-grande-arredondado,
.btn-custom-grad-preto-extra-grande-arredondado,
.btn-custom-grad-laranja-extra-grande-arredondado,
/* Seletores de Botões Preenchidos (Solid) */
.btn-custom-azul-extra-grande,
.btn-custom-verde-extra-grande,
.btn-custom-vermelho-extra-grande,
.btn-custom-amarelo-extra-grande,
.btn-custom-roxo-extra-grande,
.btn-custom-laranja-extra-grande,
.btn-custom-ciano-extra-grande,
.btn-custom-rosa-extra-grande,
.btn-custom-cinza-extra-grande,
.btn-custom-preto-extra-grande,
.btn-custom-branco-extra-grande,
.btn-custom-cinza-claro-extra-grande,
.btn-custom-azul-claro-extra-grande,
.btn-custom-verde-claro-extra-grande,
.btn-custom-vermelho-claro-extra-grande,
.btn-custom-amarelo-claro-extra-grande,
.btn-custom-roxo-claro-extra-grande,
.btn-custom-laranja-claro-extra-grande,
.btn-custom-ciano-claro-extra-grande,
.btn-custom-rosa-claro-extra-grande,
.btn-custom-cinza-escuro-extra-grande,
.btn-custom-azul-escuro-extra-grande,
.btn-custom-verde-escuro-extra-grande,
.btn-custom-vermelho-escuro-extra-grande,
.btn-custom-amarelo-escuro-extra-grande,
.btn-custom-roxo-escuro-extra-grande,
.btn-custom-laranja-escuro-extra-grande,
.btn-custom-ciano-escuro-extra-grande,
.btn-custom-rosa-escuro-extra-grande,
.btn-custom-neutro-1-extra-grande,
.btn-custom-neutro-2-extra-grande,
.btn-custom-neutro-3-extra-grande,
.btn-custom-neutro-4-extra-grande,
.btn-custom-neutro-5-extra-grande,
.btn-custom-grad-azul-verde-extra-grande,
.btn-custom-grad-preto-extra-grande,
.btn-custom-grad-laranja-extra-grande,
.btn-custom-azul-vazado-extra-grande,
.btn-custom-verde-vazado-extra-grande,
.btn-custom-vermelho-vazado-extra-grande,
.btn-custom-amarelo-vazado-extra-grande,
.btn-custom-roxo-vazado-extra-grande,
.btn-custom-laranja-vazado-extra-grande,
.btn-custom-ciano-vazado-extra-grande,
.btn-custom-rosa-vazado-extra-grande,
.btn-custom-cinza-vazado-extra-grande,
.btn-custom-preto-vazado-extra-grande,
.btn-custom-branco-vazado-extra-grande,
.btn-custom-cinza-claro-vazado-extra-grande,
.btn-custom-azul-claro-vazado-extra-grande,
.btn-custom-verde-claro-vazado-extra-grande,
.btn-custom-vermelho-claro-vazado-extra-grande,
.btn-custom-amarelo-claro-vazado-extra-grande,
.btn-custom-roxo-claro-vazado-extra-grande,
.btn-custom-laranja-claro-vazado-extra-grande,
.btn-custom-ciano-claro-vazado-extra-grande,
.btn-custom-rosa-claro-vazado-extra-grande,
.btn-custom-cinza-escuro-vazado-extra-grande,
.btn-custom-azul-escuro-vazado-extra-grande,
.btn-custom-verde-escuro-vazado-extra-grande,
.btn-custom-vermelho-escuro-vazado-extra-grande,
.btn-custom-amarelo-escuro-vazado-extra-grande,
.btn-custom-roxo-escuro-vazado-extra-grande,
.btn-custom-laranja-escuro-vazado-extra-grande,
.btn-custom-ciano-escuro-vazado-extra-grande,
.btn-custom-rosa-escuro-vazado-extra-grande,
.btn-custom-neutro-1-vazado-extra-grande,
.btn-custom-neutro-2-vazado-extra-grande,
.btn-custom-neutro-3-vazado-extra-grande,
.btn-custom-neutro-4-vazado-extra-grande{
      width: 260px;
}


}