.myButton {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ededed 5%, #c4c4c4 100%);
	background-color:#ededed;
	border-radius:6px;
	border:1px solid #a8a8a8;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:3px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
	background:linear-gradient(to bottom, #c4c4c4 5%, #ededed 100%);
	background-color:#c4c4c4;
}
.myButton:active {
	position:relative;
	top:1px;
}

        
/* Container para posicionar a seta */
.custom-select {
  position: relative;
  display: inline-block;
  width: 200px;
}

/* Estilo do Select (remover nativo) */
.custom-select select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  appearance: none; /* Remove seta nativa */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
  cursor: pointer;
}

/* Adicionar seta personalizada */
.custom-select::after {
  content: '?';
  font-size: 0.8rem;
  top: 12px;
  right: 10px;
  position: absolute;
  pointer-events: none; /* Clique passa pela seta */
  color: #555;
}

/* Container para posicionar a seta */
.produtos {
width: 120px;
margin-left: 50px; 
margin-right: 50px;
}
/* Estilo do Select (remover nativo) */
.produtos  select {

  width: 100%;
  padding: 3px;
  border: 2px solid #ccc;
  border-radius: 15px;
  appearance:  Classic;
  -webkit-appearance: Classic;
  -moz-appearance: Classic;
  background-color: white;
  cursor: pointer;
  font-weight: bold;
  font-family: Arial;
  font-size: 15;
  color: #0000FF
}

.image-container {
  position: relative;
  width: 240px; /* Largura da sua imagem */
  height: 240px; /* Altura da sua imagem */
}
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease-in-out; /* Transição suave */
}
.img-back {
  opacity: 0; /* Começa invisível */
}
.image-container:hover .img-back {
  opacity: 1; /* Mostra a segunda imagem */
}
.image-container:hover .img-front {
  opacity: 0; /* Esconde a primeira imagem */
}


form input, form textarea, form select {
    font-weight: bold;
}


.container-pai {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    height: 80vh;           /* Define a altura do container (100% da viewport) */
}

.caixa-grupo {
    width: 800px;
    height: 380px;
    background-color: lightblue;
    padding: 3px;
    border: 4px solid #ccc;
    font-weight: bold;
    font-size: 18;
    
       /* Outros estilos como border, padding, etc */
    
    
}