@charset "UTF-8";

/* MAIN */

.ferramenta {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    padding: 20px;
  }

  section > h1{
      text-align: center;
      font-size: 1.5em;
  }

  .ferramenta div {
    display: flex;
    flex-flow: column nowrap;
    margin-top: 30px;
    position: relative;
  }

  div > label{
    font-weight: bold;
  }

  .ferramenta textarea {
    background-color: var(--fundo-verde, #f0f0f0);
    margin-top: 5px;
    padding: 5px;
    font-size: 14px;
    resize: vertical;
    border-radius: 5px;
  }

  div.acao > textarea {
    height: 100px;
  }

  .sugestoes {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
    z-index: 1000;
    display: none;
    border-radius: 5px;
  }

  #salvar-causa, #salvar-fato{
    width: 100px;
    margin-top: 10px;
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    background-color: var(--verde-principal);
    border-radius: 5px;
  }

  #salvar-causa:hover, #salvar-fato:hover{
    color: black;
    background-color: white;
  }

  .sugestoes li {
    padding: 8px;
    cursor: pointer;
  }

  .sugestoes li:hover {
    background-color: #eee;
  }

  #resultadofca {
    white-space: pre-line;
    background: #e7ffe7;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 20px;
  }

  #mensagem {
    color: green;
    font-weight: bold;
    margin-top: 10px;
  }

  div.botao{
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
  }

  div.botao > p{
      width: 100%;
      text-align: center;
  }

  #criar_fca{
      width: 400px;
      margin-right: 10px;
      padding: 10px;
      border-radius: 5px;
      border: 2px solid black;
      background-color: var(--verde-principal);
      cursor: pointer;
      color: white;
  }

  #criar_fca:hover{
      background-color: var(--fundo-claro);
      color: var(--verde-principal);
  }

  #limpar{
      width: 400px;
      background-color: red;
      border: 2px solid black;
      color: white;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
  }

  #limpar:hover{
      background-color: white;
      color: red;
  }