#formulario_externo {
      margin: 0;
      padding: 40px 0;
      /* height: 100vh;  <-- remover */
      display: flex;
      justify-content: center;
      /* align-items: center; <-- remover para permitir scroll */
      background-color: #e0f7f1;
      font-family: sans-serif;

    }



    #login {
      margin: 0;
      padding: 40px 0;
      display: flex;
      position: relative;
      font-family: sans-serif;
      height: 80vh;
      justify-content: center;     /* centraliza horizontalmente */
      align-items: center;
    }

    .form-login {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      flex-direction: column;
      }
        .img-top-container::before {
          content: ""; /* Isso é obrigatório para o pseudo-elemento aparecer */
          position: absolute; /* Precisa ser absolute para funcionar com z-index */
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
	
          background-image: url("/static/imagens/canal_denuncia.webp");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;

        }


        input:required:invalid,
        textarea:required:invalid,
        select:required:invalid {
          border: 2px solid #e74c3c !important; /* vermelho forte */
          background-color: #fceae9;
          outline: none;
        }


    input:required:valid,
    textarea:required:valid,
    select:required:valid {
      border: 2px solid #2ecc71; /* verde claro */
      background-color: #f0fff4;
    }

    .green-form-box {
      background-color: #ffffff;
      border-radius: 30px;
      padding: 40px;
      width: 90%;
      max-width: 800px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      /* overflow: hidden;  <-- remover ou trocar para visible */
    }

    .form-box {
      width: 100%;
      z-index: 2;
    }

    .text-field {
      border: 2px solid var(--white-smoke, #eee);
      color: var(--dark-slate-grey, #2c3e50);
      background-color: #fff;
      border-radius: 20px;
      height: 50px;
      margin-bottom: 20px;
      padding: 15px;
      font-size: 16px;
      width: 100%;
      box-sizing: border-box;

    }

    textarea.w-input {
      height: 120px;
      resize: vertical;
    }

    .w-layout-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .w-layout-grid input {
      margin-bottom: 15px;
    }

  .bt-form {
  background-color: var(--dark-slate-grey, #2c3e50);
  color: var(--goldenrod, #f1c40f);
  font-weight: bold;
  border: none;
  border-radius: 20px;
  padding: 12px 20px;
  cursor: pointer;
  transition: 0.3s;

    }

    .bt-form-reset {
      background-color: #bdc3c7;
      color: #2c3e50;
      font-weight: bold;
      border: none;
      border-radius: 20px;
      padding: 12px 20px;
      cursor: pointer;
      transition: 0.3s;

    }
    .botoes-direita {
      display: flex;
      justify-content: flex-end;
      gap: 1rem; /* Espaço entre os botões */
      margin-top: 1.5rem;
    }
    .bt-form-reset:hover {
      background-color: var(--lime-green, #27ae60);
      color: var(--dark-slate-grey, #2c3e50);
    }

    .bt-form:hover {
      background-color: var(--lime-green, #27ae60);
      color: var(--dark-slate-grey, #2c3e50);
    }
    .bt-form:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

    .bg-form {
      position: absolute;
      width: 100vh;
      height: 100vh;
      z-index: 1;
    }

    fieldset {
      border: none;
      border-radius: 20px;
      padding: 25px;
      margin-bottom: 30px;
      background-color: #ffffff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    legend {
      font-weight: bold;
      font-size: 1.1em;
      padding-bottom: 10px;
      margin-bottom: 15px;
      color: var(--dark-slate-grey, #2c3e50);
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input[type="file"] {
      margin-top: 10px;
      padding: 10px;
      background: #f9f9f9;
      border-radius: 10px;
      border: 2px dashed #ccc;
      font-size: 14px;
      width: 100%;
    }

    input[type="checkbox"] {
      margin-right: 8px;
    }

    .bg-form-repeat {

      background-image: url('https://cdn.prod.website-files.com/627be02c17bdd5054bd4786d/627e282038efcac17afd4aff_img-form.svg');
      background-repeat: repeat;  /* ou repeat-x / repeat-y */
      background-size: auto;  /* mantém tamanho original, ou ajuste */
      position: relative;
    }

      @media (max-width: 768px) {
      select{
      overflow-y: auto;
      }
      }