html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  /* margin: 20px; */
  background-color: #f7f9fc;
}

#mutant-chat {
  width: 100%;
  height: 100%;
}

#webchat-form-container {
  padding-top: 20px;
}

form#atendimento-form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  /* Valor fixo */
  padding: 20px;
  border: 1px solid #b3c7d6;
  border-radius: 8px;
  background-color: white;
  margin: 0 auto;
  /* Centraliza o formulário */
}

#atendimento-form label {
  margin-bottom: 5px;
  color: #333;
}

form#atendimento-form > input {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #b3c7d6;
  border-radius: 4px;
}

form#atendimento-form > input[type="tel"],
form#atendimento-form > input[type="text"]:last-of-type {
  margin-bottom: 20px;
  /* Espaço adicional entre o último input e o grupo de botões */
}

#atendimento-form .button-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 colunas de tamanho igual */
  gap: 10px;
  /* Espaço entre os botões */
}

#atendimento-form button {
  width: 100%;
  /* Faz com que os botões ocupem 100% da largura da célula */
  height: 60px;
  /* Altura dos botões definida para 60px */
  border: none;
  cursor: pointer;
  position: relative;
  /* Necessário para o efeito de desfoque */
  overflow: hidden;
  /* Oculta o conteúdo que transborda */
  /* border-radius: 8px; */
  /* Cantos arredondados */
}

#atendimento-form button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid rgba(0, 114, 187, 0.5);
  /* Cor do contorno */
  border-radius: 8px;
  /* Borda arredondada */
  filter: blur(4px);
  /* Efeito de desfoque */
  z-index: 0;
  /* Coloca atrás do conteúdo do botão */
}

.btn-pernambuco {
  background-image: url('/img/logo-pernambuco.svg');
  /* Imagem do botão "Pernambuco" */
  background-size: 80%;
  /* Imagem ocupa 80% do botão */
  background-repeat: no-repeat;
  background-position: center;
  /* Centraliza a imagem */
}

.btn-elektro {
  background-image: url('/img/logo-elektro.svg');
  /* Imagem do botão "Elektro" */
  background-size: 80%;
  /* Imagem ocupa 80% do botão */
  background-repeat: no-repeat;
  background-position: center;
  /* Centraliza a imagem */
}

.btn-coelba {
  background-image: url('/img/logo-coelba.svg');
  /* Imagem do botão "Coelba" */
  background-size: 80%;
  /* Imagem ocupa 80% do botão */
  background-repeat: no-repeat;
  background-position: center;
  /* Centraliza a imagem */
}

.btn-cosern {
  background-image: url('/img/logo-cosern.svg');
  /* Imagem do botão "Cosern" */
  background-size: 80%;
  /* Imagem ocupa 80% do botão */
  background-repeat: no-repeat;
  background-position: center;
  /* Centraliza a imagem */
}