* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  
  html {font-size: 62.5%;}
  body {margin: 0; padding: 0; background: #fff; font-size: 1.2em;}
  input {height: 28px; border: 1px solid #777; font-size: 1em; color: #333; outline: none;}
  textarea {border: 1px solid #777; font-size: 1em; color: #333; border-radius: .5rem; outline: none; resize: none;}
  select {height: 28px; border: 1px solid #777; font-size: 1em; color: #333; outline: none;}
  button {font-size: 1em; color: #FFF; background: #1E374B; border: 0px; height: 30px; margin: .5rem; border-radius: .3rem; outline: none; cursor: pointer;}
  a {text-decoration: none; color: #666;}
  a:visited {text-decoration: none; color: #666;}
  a:hover {color: #369;}
  table {width: 100%;}
  input[type="file"]{display: none;}

  dialog {margin: auto; padding: auto; width: 50%; background-color: #f1d897; padding: 2rem; border: none; border-radius: .5rem; box-shadow: 0 0 1em rgb(0 0 0 / .3); text-align: center;}
  dialog::backdrop {background-color: #666; opacity: 0.5;}
  
  #cabecalho {float: left; width: 100vw; height: 50px; font-size: 1.2em; background: #1E374B; color: #fff; display: flex;}
  #cabecalho_esquerdo {width: 50%; height: 100%; padding-left: 2%; display: flex; justify-content: left; align-items: center;}
  #cabecalho_direito {width: 50%; height: 100%; padding-right: 3%; line-height:50px; text-align: right;}
  
  #cabecalho_direito a:link {text-decoration: none; color: #DAA520;}
  #cabecalho_direito a:visited {text-decoration: none; color: #DAA520;}
  #cabecalho_direito a:hover {color: #FFD700;}
  
  #menu_vazio {float: left; width: 100%; background: #fff; height: 35px;}
  #menu {float: left; width: 100%; background: #333; height: 35px; padding-left: 25px;}
  #menu ul {list-style: none; float: left; position: absolute; top: 50px; z-index: 1;}
  #menu ul li {float: left; height: 35px;}
  #menu ul li a {float: left; text-decoration: none; font: 15px Arial; color: #fff; padding: 9px 15px;}
  #menu ul li:hover {background: #666;}
  #menu ul li ul {display: none;}
  #menu ul li:hover ul {display: block; position: absolute; top: 35px; background: #666; width: 180px;}
  #menu ul li:hover ul li {float: left; position: relative; left: 0px; width: 180px; border-bottom: 1px solid #777;}
  #menu ul li:hover ul li:last-child {border: none;}
  #menu ul li:hover ul li a {width: 180px;}
  #menu ul li:hover ul li a:hover {background: #888;}
  
  #conteudo {float: left; width: 100%; background: #fff; text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 85px; bottom: 55px; overflow-y: auto;}
  #conteudo #conteudo_bloqueado_ate_carregar {display: none;}
  #conteudo #mensagem_carregando {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  #conteudo #tabela_padrao {width: 98vw; height: 60vh; background: #fff; text-align: center; overflow: auto; overflow-y: scroll;}
  #conteudo #tabela_pequena {width: 68vw; height: 32vh; background: #fff; text-align: center; overflow: auto; overflow-y: scroll;}
  #conteudo #titulo_tabela {background: #369; color: #fff; text-align: center;}
  #conteudo #frase_atencao {color: #DD1A2A;}
  #conteudo #caixa_texto_grande_invisivel {width: 98%; height: 120px; background: #FFF; padding: 10px; padding-top: 0px; resize: none; border: none; font-size: 1.1em;}
  
  #celula_tabela_claro {background: #cfb53b40; padding-left: 5px; padding-top: 10px; padding-bottom: 10px;}
  #celula_tabela_escuro {background: #cfb53b59; padding-left: 5px; padding-top: 10px; padding-bottom: 10px;}
  #celula_tabela_incolor {background: null; padding-left: 5px; padding-top: 10px; padding-bottom: 10px;}
  #coluna_tabela {background: #FFFFFF;}
  #linha_tabela:hover {background: #cfb53b1a;}
  
  #mensagem_vazio {float: left; width: 100%; height: 20px; background: #FFF; position: absolute; bottom: 25px;}
  #mensagem_vermelho {float: left; width: 100%; height: 30px; background: #DD1A2A; color: #fff; font-size: 1.2em; text-align: center; position: absolute; padding: 5px; bottom: 25px;}
  #mensagem_verde {float: left; width: 100%; height: 30px; background: #049906; color: #fff; font-size: 1.2em; text-align: center; position: absolute; padding: 5px; bottom: 25px;}
  
  #rodape {float:left; width: 100%; height: 25px; background: #1E374B; color: #fff; display: flex; font-size: 0.9em; justify-content: center; align-items: center; position: absolute; bottom: 0px;}
  
  .caixa_texto_padrao {width: 48vw; height: 100px; padding: 10px;}
  .caixa_grande {padding-left: 7px; margin-bottom: 5px; width: 48vw;}
  .caixa_padrao {padding-left: 7px; margin-bottom: 5px; width: 26vw;}
  .caixa_pequena {padding-left: 7px; margin-bottom: 5px; width: 12vw;}
  .caixa_user {display:inline-block; padding-left: 34px; width: 250px; background-position: 7px center; background-repeat: no-repeat; background-image: url(../imagens/user.png);}
  .caixa_pass {display:inline-block; padding-left: 34px; width: 250px; background-position: 7px center; background-repeat: no-repeat; background-image: url(../imagens/key.png);}
  .caixa_busca {display:inline-block; padding-left: 38px; width: 500px; height: 30px; background-position: 4px center; background-repeat: no-repeat; background-image: url(../imagens/busca.png);}

  .select_padrao {padding-left: 2px; margin-bottom: 5px; width: 350px;}
  
  .botao_padrao {width: 100px;}
  .botao_grande {width: 150px;}
  .botao_link {padding: 0px; border: 0px; width: 25px; height: 25px; background: none;}
  .botao_link_fosco {padding: 0px; border: 0px; width: 25px; height: 25px; background: none; opacity: 30%; cursor: auto;}
  .botao_sim_nao {border: 0px; width: 120px; height: 30px; margin: 15px; font-size: 0.8em;}
  
  /* Alert personalizado */
  .alerta {display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: auto; background-color: #f44336; opacity: 0.95; color: #fff; padding: 20px; text-align: center; font-size: 1.2em;}
  .confirma_exclusao {display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: auto; background-color: #f44336; opacity: 0.95; color: #fff; padding: 20px; text-align: center; font-size: 1.2em;}
  .closebtn {margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 30px; line-height: 15px; transition: 0.1s; cursor: pointer;}
  .closebtn:hover {color: black;}
   /* Alert personalizado */
  
  .esconde_tela {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; background-color: null;}

  /* específicos */
  #conteudo_propostas {display: flex; position: absolute; top: 10%; left: 3%; width: 45%; height: 90%; padding: 5px; overflow-y: auto;}
  #conteudo_sugestoes {display: flex; position: absolute; top: 10%; right: 3%; width: 42%; height: 80%; padding: 5px; overflow-y: auto;}
  #conteudo_titulo_propostas {display: flex; position: absolute; top: 0; left: 0; width: 50%; height: 10%; justify-content: center; align-items: center; color: #ff0000d5; font-weight: 600;}
  #conteudo_titulo_sugestoes {display: flex; position: absolute; top: 0; right: 0; width: 50%; height: 10%; justify-content: center; align-items: center; color: #049906; font-weight: 600;}
  #conteudo_quero_sugerir {display: flex; position: absolute; bottom: 0; right: 5%; width: 40%; height: 10%; justify-content: center; align-items: center;}
  #tabela_debate {width: 100%; height: 100%; background: #fff; text-align: center;}
  .celula_texto_proposta {background: #ff000040; padding: 10px; margin-top: 15px; border-radius: 0.8rem; color:#333; font-family: Verdana, Geneva, Tahoma, sans-serif;}
  .celula_texto_sugestao {background: #019b0e38; padding: 10px; margin-bottom: 10px; border-radius: 0.8rem; color:#333; font-family: Verdana, Geneva, Tahoma, sans-serif;}
  .celula_texto_comentario {background: #99999933; padding: 10px; border-radius: 0.8rem; color: #333; width: 65%; text-align: left;}
  .caixa_nome_autor {width: 100%; padding: 10px; border: none; color: #333; border-radius: 5px;}
  .caixa_comentario {width: 100%; height: 150px; padding: 10px; border: none; color: #333; border-radius: 5px;}
  .botao_sugerir {width: 90%; height: 80%; margin: 2px; background-color: #049906d7; border-radius: 0.8rem;}
  .celula_botao_comentar {display: flex; align-items: center; justify-content: right; width: 150px; border-radius: 5px; color:#333;}
  .celula_botao_curtir {display: flex; align-items: center; justify-content: left; width: 200px; border-radius: 5px; color:#333;}
  /* específicos */

    /* não alterar cor preenchimento automático */
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  }
  /* não alterar cor preenchimento automático */
  
  /* barra de rolagem estilizada */
  ::-webkit-scrollbar-track {
    background-color: #F4F4F4;
  }
  ::-webkit-scrollbar {
    width: 12px;
    background: #F4F4F4;
  }
  ::-webkit-scrollbar-thumb {
    background: #dad7d7;
  }
  /* barra de rolagem estilizada */

  @media screen and (max-width: 640px) {
    #conteudo {top: 60px;}
    #rodape {font-size: 0.7em;}
    .caixa_padrao {width: 95vw;}
    .botao_padrao {width: 95%; height: 40px; margin-bottom: 5px;}
    .botao_adicionar {width: 50vw;}
    .confirma_exclusao {right: 10px; left: 10px;}
    .botao_sim_nao {height: 40px; margin: 5px; width: 35vw;}
    table {width: 100%;}

    #conteudo_titulo_propostas {top: 5px; left: 0; width: 100%; height: auto;}
    #conteudo_propostas {top: 25px; width: 96%; height: 350px;}
    .celula_texto_proposta {width: 100%;}
    .celula_texto_comentario {width: 80%;}
    .celula_texto_sugestao {width: 100%;}
    #conteudo_titulo_sugestoes {top: 400px; right: 0; width: 100%; height: auto; justify-content: center; align-items: center; color: #049906; font-weight: 600;}
    #conteudo_quero_sugerir {top: 418px; left: 0; right: 0; width: 100%; height: 50px;}
    #conteudo_sugestoes {top: 470px; left: 2vw; right: 1vw; width: auto; height: auto;}
    dialog {margin: auto; padding: auto; width: 100%; background-color: #f1d897; padding: 2rem; border: none; border-radius: .5rem; box-shadow: 0 0 1em rgb(0 0 0 / .3); text-align: center;}

    /* barra de rolagem estilizada */
    ::-webkit-scrollbar-track {
      background-color: #F4F4F4;
    }
    ::-webkit-scrollbar {
      width: 5px;
      background: #F4F4F4;
    }
    ::-webkit-scrollbar-thumb {
      background: #dad7d7;
      border-radius: 15px;
    }
    /* barra de rolagem estilizada */
  }