body{
    background-color:#003399;
    color:#fff;
    font-family:Arial,sans-serif;
    margin:0;
    padding:0
  }

  header{
    background-color:#002266;
    padding:15px; 
    text-align:center
  }

  header h1{
    font-size:24px
  }

  form{
    background-color:#f0f4f8;
    border-radius:10px;
    padding:20px
  }

  .container{
    padding:20px;
    max-width:600px;
    margin:auto
  }

  .form-group{
    margin-bottom:15px
  }
  
  #totaisProposta .form-group {
  margin-bottom: 0px; 
  }
  
  #grupo-extra .form-group {
  margin-bottom: 5px; 
  }

  .form-group label{
    display:block;
    font-weight:700;
    margin-bottom:5px;
    color:#05c
  }
  
  .form-group input,  .form-group select, .form-group 
  textarea{
    padding:10px;
    width:100%;
    max-width:100%;
    margin-bottom:5px;
    border:1px solid #003399;
    border-radius:5px;
    box-sizing:border-box
  }
  
  .form-group 
  input[type=checkbox]{
    width:auto
  }
  
  .form-row{
    display:flex;
    justify-content:space-between
  }
  
  .form-row .form-group{
    flex:1;
    margin-right:10px
  }
  
  .form-row .form-group:last-child{
    margin-right:0
  }
  
  .form-row .form-group
    input{
      max-width:100%
    }
  
    button{
      background-color:#05c;
      color:#fff;
      padding:10px 20px;
      border:none;
      border-radius:5px;
      cursor:pointer;
      display:block;
      margin:0 auto;
      width: 100%
    }
  
  button:hover{
    background-color:#003399
  }

  .hidden{
    display:none
  }
  
  .result{
    margin-top:20px;
    background-color:#fff;
    padding:10px;
    border-radius:10px;
    color:#05c
  }
  
  h2{
    color:#05c
  }
  
  .add-seller-btn{
    background-color:#008000;
    color:#fff;
    border:none;
    border-radius:5px;
    cursor:pointer;
    padding:10px 20px;
    font-size:14px;
    width:100%;/**/
    margin-top:0px
  }

  .add-seller-btn:hover{
    background-color:#006414
  }
  
  .add-seller-btn.delete{
    background-color:#e91c05
  }

  .add-seller-btn.delete:hover{
    background-color:#970700
  }
  
  .seller-list{
    background:#fff;
    color:#000;
    max-height:200px;
    overflow-y:auto;
    list-style-type:none;
    padding:0
  }
  
  .seller-list li{
    padding:10px;cursor:pointer
  }
  
  .seller-list li:hover{
    background:#eee
  }
  
 #shareProposal{
    background-color:#008000;
   } 

  #shareProposal:hover{
    background-color:#006414
  }

  #proposalResult {
    font-size: 14px; /* Define o tamanho padrão do texto */
    line-height: 1.5; /* Opcional: melhora a legibilidade */
    background: none; /* Garante que nenhum fundo seja aplicado */
}

button#editProposal, button#shareProposal {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button#shareProposal {
  font-weight: bold;
}


#downloadProposal {
    background-color: #FF9F0A;         /* amarelo ouro #FFD700;  background-color:#05c; */
  color:#fff;
  padding: 10px;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#downloadProposal:hover {
  background-color: #FF8E08;        /* laranja escuro #DE5819;  background-color:#003399 */
}

#downloadProposal img {
  width: 20px;
  height: 20px;
}


  
.buttons-row .form-group {
    flex: 1; /* Faz com que os botões ocupem o mesmo espaço */
}

.buttons-row {
    display: flex;
    justify-content: space-between; /* Distribui os botões ao longo da linha */
    align-items: center; /* Alinha os itens verticalmente no centro */
    gap: 10px; /* Espaçamento entre os botões */
}

.buttons-row .form-group {
    margin: 0; /* Remove margens extras para garantir alinhamento */
}

.buttons-row .form-group button {
    width: 100%; /* Faz o botão ocupar toda a largura da coluna */
    padding: 10px; /* Define um espaçamento interno para o botão, se necessário */
    box-sizing: border-box; /* Inclui o padding dentro do tamanho do botão */
}

label[for]:has(+ input:required)::after {
    content: ' *'; /* Adiciona o asterisco */
    color: red;    /* Define a cor vermelha */
    font-weight: bold; /* Negrito opcional */
}

label.required::after {
    content: ' *';
    color: red;
    font-weight: bold;
}


#addGroupBtn {
  background-color: #008000;   /* verde escuro */
  color: white;                /* texto e ícone brancos */
  border: none;
  border-radius: 5px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin: 10px 0;
  width: 100%;                 /* largura de 30% */
  text-align: center;         /* centraliza o texto dentro do botão */
  display: block;             /* garante comportamento de bloco */
  margin-left: 0;             /* alinha o botão à esquerda */
}

#addGroupBtn:hover {
  background-color: #006414;  /* verde ainda mais escuro no hover */
}

.remove-group-btn {
  background-color: #e91c05;
  font-weight: bold; /* Negrito opcional */
  color: white;
  border: none;
  border-radius: 20%;
  width: 20px;
  height: 38px;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  margin-bottom: 5px;
  margin-right: 20px;
}

.remove-group-btn:hover {
  background-color: #b00000;
}

.form-row.parcela-com-botao .form-group {
  flex: 0 0 38%;
}

.form-row.parcela-com-botao .form-group.botao-excluir {
  flex: 0 0 24%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.page-break {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  page-break-before: always;
  break-before: page;
}