body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}
/*#div_fixa { 
 	position:fixed; 
 	margin:15px;
 	margin-top: 300px;
 	z-index:5000;
 	bottom: 0px;
}*/
iframe {
    border: none;
    width: 100nv;
    height: 100nv; /* Defina a altura desejada */
}        
.invisible {
	visibility: hidden;
    display: none;
}
header {
    background-color: #fff;
    padding: 0px;
    text-align: center;
    width: auto;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center center; /* Centraliza a imagem horizontalmente e verticalmente */
    background-size: cover; /* Ajusta a imagem para cobrir todo o cabeçalho */
}

.loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* Certifique-se de que o spinner esteja acima de outros elementos */
}
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 15px;
}
.language-selector select {
    padding: 5px;
    margin-right: 5px;
}
.flag-image {
    width: 30px;
    height: 30px;
}
.text_h {
	color:#FFF;
	text-align: center;
	font-weight:bold;
}
/* Estilos para os botões do usuário */
.user-buttons {
    display: flex;
    justify-content: center;
    margin: 4px; /* Margem para espaçamento */
}
.my_table_h {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	padding: 0px;
	margin: auto;
}
/* Estilos para botões modernizados */
.button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    margin: 0 8px;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 5px;
    font-size: 20px;
	text-shadow: 2px 2px 4px black;
}

/* Estilos para o botão de comprador */
.buyer-button {
    background-color: #ffcc00;
	background-image: url('../imgs/saca_cr.png');
    background-repeat: no-repeat;
    background-position: left center;
	background-size: 150px 52px;
}

/* Estilos para o botão de produtor */
.producer-button {
    background-color: #28A745;
	background-image: url('../imgs/saca_pr.png');
    background-repeat: no-repeat;
    background-position: right center;
	background-size: 150px 52px;
}

.buyer-button:hover,
.producer-button:hover {
    background-color: #0056b3; /* Cor de fundo azul mais escura ao passar o mouse */
}
.we_are {
	border: 2px dashed;
	border-color: #CFF;
	width:auto;
    display: flex;
    justify-content: center;
    margin: 2px; /* Margem para espaçamento */
}
.pos-container {
	border: 1px solid #ccc;
	padding: 0;
    margin: 0;
    text-align: center;
	margin-top: -10px;
}
.pos-labels {
    display: inline;
    margin: 0px; /* Ajuste este valor conforme necessário */
	padding-left:10px;

}
.quality-container {
    align-items: center;
	border: 1px solid #ccc;
	padding: 0;
    margin: 0;
    text-align: center;
}

.quality-labels-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px; /* Ajuste este valor conforme necessário */
}

.quality-label {
    margin-right: -5px; /* Espaçamento entre os selos */
    display: flex;
    flex-direction: column;
    align-items: center;
}

  .quality-thumbnail {
    width: 75px;
    height: 60px;
  }

  .scaled-thumbnail {
    transform: scale(1); /* Ajuste a escala conforme necessário */
  }
table-dep {
	text-align:center;
	font:bold;
}
.info-tooltip {
    display: none;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #999;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
    top: calc(18%); /* Posição acima do botão */
    left: calc(50% - 175px); /* Centralizado horizontalmente */
    width: 350px;
    font-size: 14px;
    color: #333;
    text-align: center;
}
.info-link:hover + .info-tooltip {
    display: block;
}
.info-icon {
    font-size: 20px; /* Tamanho do ícone */
    margin-right: 5px; /* Espaçamento à direita do ícone em relação ao texto */
    color: #999; /* Cor do ícone (pode personalizar a cor desejada) */
}

/* Estilos para as setas */
.arrowc {
    display: block;
    position: absolute;
	left: calc(50% + 60px);
	top: 55px;
    width: 22px; /* Ajuste o tamanho conforme necessário */
    height: 55px; /* Ajuste o tamanho conforme necessário */
}
.arrowp {
    display: block;
    position: absolute;
	right: calc(50% + 60px);
	top: 55px;
    width: 22px; /* Ajuste o tamanho conforme necessário */
    height: 55px; /* Ajuste o tamanho conforme necessário */
}
.button:hover + .arrowp {
    display: none;
}
.button:hover + .arrowc {
    display: none;
}