:root {
  --preto:     #000000; --branco:   #EEEEEE; --brancoc:   #FFFFFF;
  --cinza:     #888888; --cinzae:   #555555; --cinzacab:  #2B2B2B; --cinzapar:  #BABABA; --cinzaimpar:#DCDCDC;
  --vermelhoc: #FFAAAA; --vermelho: #EE9999; --vermelhoe: #CC7777; --vermelhot: #FF0000;
  --verdec:    #AAFFAA; --verde:    #99EE99; --verdee:    #77CC77;
  --azulc:     #AAAAFF; --azul:     #9999EE; --azule:     #7777CC; --azulx:     #222299;
  --roxoc:     #FFAAFF; --roxo:     #EE99EE; --roxoe:     #CC77CC;
  --amareloc:  #FFEEAA; --amarelo:  #FFCC88; --amareloe:  #CC9955; --amarelot:  #FF8000;
}
/* --cinzapar: #DCDCDC; --cinzaimpar:#FEFEFE; */
body { background-image: url("img/0bg.jpg"); background-color: #000000;  font-family:Arial; }

/*********************************************************************************************************************/
/* GENÉRICOS */

.texto_vermelho { color: var(--vermelhot); }
.texto_amarelo  { color: var(--amarelot); }

.titulo    { text-align:center; margin-top:0.5em; font-size: 1.5em; color:var(--branco);}
.cabecalho, .rodape { display:block; float:left; width:100%; background-color:var(--cinzacab); font-size:1.2em; 
                      padding-top:0.2em; padding-bottom:0.2em; color:var(--branco); }
.cabecalho          { text-align:center; }
.rodape, .rodapezim { text-align:left; }
.rodapezim { float:left; display:block; width:100%; height:1.3em; background-color:var(--cinzacab); }

/* Lista e seus Elementos */
.lista { float:left; display:block; overflow-x:hidden; overflow-y:scroll; width:100%; background-color:var(--cinzae); height:14.9em; }
.elemento_par, .elemento_impar { transition:all 0.3s;  float:left; display: block; 
  width:99.5%; height:2em; border: 1px solid black; }
.elemento_par { background-color:var(--cinzapar); }
.elemento_impar { background-color:var(--cinzaimpar); }
.elemento_par   .nome, .elemento_impar .nome { margin-top:0.5em; margin-left:0.5em;}

/*Botões para seleção de Fonte para Rótulo, Habilidade e Equipamento */
.botao_fonte, .botao_fonte_s, .botao_categoria, .botao_categoria_s, #botao_exportar {
  cursor:pointer; float:left; height:2em; text-align:center; border-style:none; font-size:0.7em; color:var(--brancoc); 
   border-radius:0.5em; margin-right:0.2em; margin-left:0.2em; transition: all 0.2s; transition-timing-function: ease-out; }
.botao_fonte, .botao_fonte_s         { width:15.3%; font-weight:bold; }
.botao_categoria, .botao_categoria_s { width:13.1%; font-weight:bold; }
.botao_fonte, .botao_categoria, #botao_exportar { background-color: var(--cinza); }
.botao_fonte_s, .botao_categoria_s { background-color: var(--cinzae); text-shadow: 2px 2px var(--cinza); }
.botao_fonte:hover, .botao_fonte_s:hover, .botao_categoria:hover, .botao_categoria_s:hover, #botao_exportar:hover { 
  background-color:var(--branco); color:var(--preto); }
.botao_fonte_s:hover, .botao_categoria_s:hover { text-shadow: 2px 2px var(--cinza); }

/* Botões Adicionar(+), Remover(X), Diminuir(-) e Desabilitado(#) */
.botao_adi, .botao_rem, .botao_dim { cursor:pointer; }
.botao_adi, .botao_rem, .botao_dim, .botao_des { 
  float:left; width:2em; height:80%; margin-top:0.2em; margin-left:0.2em; 
  text-align:center; background-color:var(--cinza); border-style:none; border-radius:0.5em; font-weight:bold;
  transition: all 0.2s; transition-timing-function: ease-out; } 
.botao_adi { color:var(--verdec);    }
.botao_rem { color:var(--vermelhoc); }
.botao_dim { color:var(--amareloc);  }
.botao_des { color:var(--azulc);     }
.botao_adi:hover { background-color:var(--verde);    color:var(--preto); text-shadow:2px 2px var(--cinza); }
.botao_rem:hover { background-color:var(--vermelho); color:var(--preto); text-shadow:2px 2px var(--cinza); }
.botao_dim:hover { background-color:var(--amarelo);  color:var(--preto); text-shadow:2px 2px var(--cinza); }
.botao_des:hover { background-color:var(--azul);     color:var(--preto); text-shadow:2px 2px var(--cinza); }
.bloqueado { color:var(--cinzae); }
.liberado  { color:var(--branco); }

/*********************************************************************************************************************/
/* BLOCOS PRINCIPAIS */
#titulo, #rotulo, #evolucao, #habilidade, #equipamento, #ataque, #defesa, #etc, #opcoes { 
 float:left; display:block; width:100%; margin-top:0.1%; margin-bottom:0.1%; border-radius:1em;
 opacity: 0.98; filter: alpha(opacity=98); margin-bottom:1em;                     }


/*********************************************************************************************************************/
/* RÓTULOS */
#rotulo, #selecionados, #detalhador, #registro, #detalhador .det_centro, .det_esquerda, .det_direita, .det_nome, .det_imagem, .det_atributo, .det_detalhe, 
.det_detalhe_longo, .det_descricao, .det_descricao_longa { float:left; display:inline-block; }
#rotulo       { width:100%; }
#selecionados { margin-left: 0.5%; margin:0.5%; width: 26%; }
#detalhador   {                    margin:0.5%; width: 35%; }
#registro     { margin-right:0.5%; margin:0.5%; width: 36%; }

/* RÓTULOS / SELECIONADOS */
#rot_sel_cab_tipo, #rot_sel_cab_nome { float:left; display:inline-block; text-align:left;  }
#rot_sel_cab_tipo { width:36%; margin-left:1.5em; }
#rot_sel_cab_nome { width:48%; }
#nivel, #range_nivel, #nivel_de_personagem { float:left; display:inline-block; }
#nivel                { width:20%; margin-left:1em; }
#nivel_de_personagem  { width:10%; text-align:center; }  
#range_nivel          { width:60%; margin-top:0.6em; }  

 
/* RÓTULOS / DETALHADOR */
#detalhador { height:15em; max-height:15em; }
.det_centro, .det_esquerda, .det_direita { background-color:var(--cinzapar); height:inherit; }
.det_centro   { width:100%; }  .det_esquerda { width:40%;  } .det_direita  { width:60%;  }
/**/
.det_nome        { width:100%; background-color:var(--cinzacab); font-size:1.1em; }
.det_nomeTexto   { text-align:left; margin-left:2em;  }
.det_imagem      { display: block; height:15em; }
.det_atributo        { width:100%; margin-left:0.5em; margin-top:0.25em; vertical-align:middle; }
.det_detalhe         { width:90%; margin-left:1em; margin-right:0.5em; font-size:1.0em; }
.det_detalhe_longo   { width:100%%; margin-left:1em; margin-right:0.5em; font-size:0.9em; 
                               overflow-y:scroll; max-height:5em; }
.det_descricao { width:90%; margin-left:1em; margin-right:1em; margin-top:0.5em; font-size:0.85em; }
.det_descricao_longa { width:93%; margin-left:1em; margin-right:0.5em; margin-top:0.5em; font-size:0.85em; max-height:6.5em; overflow-y:scroll; font-size:0.8em; }
.det_descricao_extra_longa { width:95%; margin-left:1em; margin-right:0.5em; margin-top:0.5em; font-size:0.8em; max-height:11em; overflow-y:scroll; font-size:0.8em; }
.det_descricao_completa { width:93%; margin-left:1em; margin-right:0.5em; margin-top:0.5em; font-size:0.8em; max-height:17em; overflow-y:scroll; font-size:0.8em; } 
.det_primeira        { font-size:1.5em; }

/* RÓTULOS / REGISTRO */
.reg_sec_tipo, .reg_sec_nome, .reg_sec_nome_longo, #reg_cab_nome, #reg_cab_atributos, #reg_cab_atributo, #reg_cab_habilidade, #reg_cab_corpo, .reg_lst_botao, .reg_lst_nome, .reg_lst_atributos, .reg_lst_atributo, 
.reg_lst_habilidade, .reg_lst_corpo, .reg_lst_org, .reg_lst_org_longo, .reg_lst_resumo { 
   float:left; display:inline-block; }
.reg_sec_tipo       { width:38%; margin-left:1em; margin-top:0.4em; }
.reg_sec_nome        { width:45%; margin-top:0.4em; }
.reg_sec_nome_longo  { width:45%; font-size:0.8em; }
.reg_sec_remover     { width:8%; }
#reg_cab_nome        { width:25%; margin-left:0.5em; text-align:left; margin-left:1.5em; }
#reg_cab_atributos   { width:29%; text-align:center; }
#reg_cab_atributo    { width:25%; }
#reg_cab_habilidade  { width:38%; text-align:center; }
#reg_cab_corpo       { width:63%; text-align:center; }
.reg_lst_botao       { width:7%;                                      margin-top:0.2em; }
.reg_lst_nome        { width:24%;                    font-size:1em;   margin-top:0.4em;  margin-left:0.2em; }
.reg_lst_atributos   { width:30%; text-align:center; font-size:1em;   margin-top:0.5em; }
.reg_lst_atributo    { width:25%;                    font-size:1em; }
.reg_lst_habilidade  { width:37%; text-align:center; font-size:0.9em; margin-top:0.6em; }
.reg_lst_corpo       { width:63%; text-align:center; font-size:0.8em; margin-top:0.6em; }
.reg_lst_org,.reg_lst_org_longo { width:42%; font-size:0.8em; margin-left:0.5em; }
.reg_lst_org { margin-top:0.6em; } .reg_lst_org_longo { margin-top:0.1em; }
.reg_lst_resumo      { width:48%;                    font-size:0.7em; margin-top:0.2em; }
/**/
.escolha { display: block; height:2em; margin:0.1%; text-align:center; font-size:1.1em;}
.coluna { float:left; display:inline-block; width:100%; text-align:center; width:14%; margin:0.5%; background-color:var(--branco);}

/*********************************************************************************************************************/
/* ATRIBUTO */
.linha    { display:block; }
.atributs, .atribute, .elementc, .elemento, .elementk, .elementx, .modificc, .modifica, .upgrdh, .upgrd, .checkh, .check {
  display:inline-block; text-align:center; float:left; }
.elementc, .elementk, .modificc { font-size:0.7em; padding-top:0.5em; }

/* ATRIBUTO / COLUNA "Atributos, Força, Agilidade, Inteligência, Vontade"  */
.atributs, .atribute { width:15%; }
.atributs { padding-right:0.5em; font-size:1em; margin-left:0.5em; }
.atribute { text-align:left; margin-left:1.2em;}

/* ATRIBUTO / COLUNAS "Total", "Raça", "Classe" / Cabeçalhos: (elementc), Valores: (elemento) */
.elemento, .elementc { width: 7.3%; }

/* ATRIBUTO / COLUNAS "Adpt.", "Antec", "Nv.4", "Nv.7" e "Nv10" / Cabeçalhos: (elementx), Valores: (elementk) */
.elementx, .elementk { width:7.4%; }
.elementx { }
.elementx a { margin-left:1em; margin-top:1em; }

/* ATRIBUTO / COLUNA "Mod.Hab." */
.modifica, .modificc { float:left; text-align:left; margin-left:0.5em; }
.upgrd, .upgrdh  { width:27%; }
.check, .checkh  { width:6.5%; }

.atribute, .elemento, .elementx, .modifica, .check, .upgrd { margin-top:0.5em; }


/*********************************************************************************************************************/
/* EVOLUÇÃO */
#evolucao #vital, #atributo, #vida_mana { float:left; display:inline-block; }
#vital     { margin-left: 0.5%; margin:0.5%; width: 40%; }
#atributo  { margin-right:0.5%; margin:0.5%; width: 58%; }
#vida_mana { text-align:center; color:var(--branco); height:2.3em;}
#vida_mana_texto { margin-top:0.4em; font-size:1.0em; }
#vida_texto { color:var(--vermelhoe); }
#mana_texto { color:var(--azule); }
.bonus, .const { font-size:0.7em; } .bonus { text-decoration:underline; }
.margem { margin:0.5em; }


/*********************************************************************************************************************/
/* HABILIDADE */
#habilidade { }
#habilidade #possuidas, #mostrador, #seletor { float:left; display:inline-block;}
#habilidade #possuidas { margin-left: 0.5%; margin:0.5%; width: 27%; }
#habilidade #mostrador {                    margin:0.5%; width: 25%; }
#habilidade #seletor   { margin-right:0.5%; margin:0.5%; width: 45%; }

/* HABILIDADE / POSSUIDAS */
#hab_pos_cab_nome, #hab_pos_cab_dificuldade, #hab_pos_cab_mana, .hab_pos_elm_nome, .hab_pos_elm_nomelongo, 
.hab_pos_elm_dificuldade, .hab_pos_elm_mana  { float:left; text-align:left; display:inline-block; }
.hab_pos_elm_nome, .hab_pos_elm_nomelongo, .hab_pos_elm_dificuldade, .hab_pos_elm_mana { margin-top:0.5em; }
#hab_pos_cab_nome, #hab_pos_cab_dificuldade, #hab_pos_cab_mana  { font-size:1em; }
#hab_pos_cab_nome                                               { width: 59%; margin-left:0.5em;}
#hab_pos_cab_dificuldade, #hab_pos_cab_mana                     { width: 12.5%; }
.hab_pos_elm_nome, .hab_pos_elm_nomelongo                       { width: 61%; text-align: left;  margin-left:0.5em;  }   
.hab_pos_elm_nomelongo                                          { width: 61.7%; font-size: 0.8em; margin-top: 0.6em;}
.hab_pos_elm_dificuldade, .hab_pos_elm_mana                     { width: 12.5%; text-align: center; }
/**/
#habilidades_disponiveis { float:left; display:block; text-align:center; }

/* HABILIDADE / MOSTRADOR */
.mostrador  { max-height:14em; }
.cabecalhoB { display:block; margin-top:2em; padding-top:0.5em; padding-bottom:0.25em; background-color:var(--cinzapar); }
.mostrador_nome, .mostrador_tipo, .mostrador_requisito, .mostrador_mana, .mostrador_dificuldade {
  display:block; text-align:left; font-size: 0.9em; margin-left:0.5em; }
.mostrador_nome           { font-size:1.0em; margin-top:0.2em; }
.mostrador_tipo           { margin-left:1em;  }

.mostrador_texto { float:left; display:block; text-align:left; background-color:var(--branco); width:100%; 
                   height:10.5em; overflow-y:scroll; }
.mostrador_descricao { display:block; margin:0.5em; }

/* HABILIDADE / SELETOR */
#lista_de_habilidades    { }


#hab_sel_cab_nome, #hab_sel_cab_categoria, #hab_sel_cab_tipo, #hab_sel_cab_dificuldade, #hab_sel_cab_mana {
  float:left; display: inline-block; font-size:1.0em; text-align:center; }
#hab_sel_cab_nome        { width: 50%; text-align:left; margin-left:1em; }
#hab_sel_cab_categoria   { width: 13.5%; }
#hab_sel_cab_tipo        { width: 10%; }
#hab_sel_cab_dificuldade { width:  9%; }
#hab_sel_cab_mana        { width:  9%; }


#habilidade #seletor .adicionar, .hab_sel_nome, .hab_sel_categoria, .hab_sel_tipo, .hab_sel_mana, .hab_sel_dificuldade 
 { float:left; display: inline-block; font-size:1.0em; text-align:center; margin-top:0.5em;}
#habilidade #seletor .adicionar   { width:  7%; }
.hab_sel_nome        { width: 47%; text-align:left; margin-left:0.5em; }
.hab_sel_categoria   { width: 15%; font-size:0.7em; margin-top: 0.7em; text-align:center; }
.hab_sel_tipo        { width: 10%; font-size:0.7em; margin-top: 0.7em; text-align:center; }
.hab_sel_dificuldade { width:  9%; }
.hab_sel_mana        { width:  9%; }

#habilidade #seletor #cabecalho .nome { width: 43%; margin-left:7%;}
#habilidade #seletor #cabecalho .tipo { width: 25%; font-size:1em; }

/*********************************************************************************************************************/
/* EQUIPAMENTO */
#inventario, #mostruario { float:left; display: inline-block; } 
#inventario { margin-left: 0.5%; margin:0.5%; width: 32%; }
#mostruario { margin-right:0.5%; margin:0.5%; width: 66%; }

/* EQUIPAMENTO INVENTÁRIO */
#inventario #cabecalho { float:left; display:block; width:100%; }
#lista_do_inventario   { width:100%; }

#eqp_inv_cab_nome, #eqp_inv_cab_peso, #eqp_inv_cab_custo { float:left; display:inline-block; text-align:center; }
#eqp_inv_cab_nome   { width: 50%; text-align:left; margin-left:0.5em; }
#eqp_inv_cab_peso   { width: 14%; }
#eqp_inv_cab_custo  { width: 14%; } 

.eqp_inv_elm_nome, .eqp_inv_elm_nomelongo, .eqp_inv_elm_peso, .eqp_inv_elm_custo, .eqp_inv_elm_botao {
  float:left; display:inline-block; text-align:center; }
.eqp_inv_elm_nome, .eqp_inv_elm_nomelongo { width: 55%; text-align:left; margin-left:0.5em; margin-top:0.5em; }
.eqp_inv_elm_nomelongo { font-size:0.7em; margin-top:0.7em; }
.eqp_inv_elm_peso     { width: 12%; margin-top:0.5em; }
.eqp_inv_elm_custo    { width: 14%; margin-top:0.5em; }
.eqp_inv_elm_botao    { width: 12%; margin-top:0.5em;  }
#moedas, #equipamento_extra { float:left; display:block; width:100%; }
#moedas { text-align:center; }

/* EQUIPAMENTO / MOSTRUÁRIO */
#cabecalho_do_mostruario { }
#lista_do_mostruario     { }
.adicionar_item_do_mostruario { float:left; display: inline-block; width: 5%; text-align: center; height:1em;  }

/* EQUIPAMENTO / MOSTRUÁRIO / ARMA */
#eqp_arm_cab_custo, #eqp_arm_cab_peso, #eqp_arm_cab_dano, #eqp_arm_cab_tipo, #eqp_arm_cab_fn, #eqp_arm_cab_fn, #eqp_arm_cab_alcance, #eqp_arm_cab_observacoes, .eqp_arm_elm_custo, .eqp_arm_elm_peso, .eqp_arm_elm_dano, 
.eqp_arm_elm_tipo, .eqp_arm_elm_fn, .eqp_arm_elm_alcance { float:left; text-align:center; }
#eqp_arm_cab_nome, #eqp_arm_cab_custo, #eqp_arm_cab_peso, #eqp_arm_cab_dano, #eqp_arm_cab_tipo, #eqp_arm_cab_fn, #eqp_arm_cab_fn, #eqp_arm_cab_alcance, #eqp_arm_cab_observacoes, 
.eqp_arm_elm_nome, .eqp_arm_elm_nomec, .eqp_arm_elm_custo, .eqp_arm_elm_peso, .eqp_arm_elm_dano, .eqp_arm_elm_tipo, 
.eqp_arm_elm_fn, .eqp_arm_elm_alcance, .eqp_arm_elm_observacoes { display:inline-block; font-size:1em; }
.eqp_arm_elm_nome, .eqp_arm_elm_nomec, .eqp_arm_elm_custo, .eqp_arm_elm_peso, .eqp_arm_elm_dano, .eqp_arm_elm_tipo, 
.eqp_arm_elm_fn, .eqp_arm_elm_alcance  { margin-top:0.5em; }
#eqp_arm_cab_nome, .eqp_arm_elm_nome               { float:left;  text-align:left; }
#eqp_arm_cab_nome                                  { width:  23.5%; margin-left:1.5em; } 
.eqp_arm_elm_nome                                  { width:    23%; margin-left:0.5em; }
#eqp_arm_cab_custo, .eqp_arm_elm_custo             { width:   8%; }
#eqp_arm_cab_peso                                  { width:   7%; }
.eqp_arm_elm_peso                                  { width: 7.5%; }
#eqp_arm_cab_dano, .eqp_arm_elm_dano               { width:   9%; }
#eqp_arm_cab_tipo                                  { width:12.1%; }
.eqp_arm_elm_tipo                                  { width:12.5%; }
#eqp_arm_cab_fn, .eqp_arm_elm_fn                   { width:   7%; }
#eqp_arm_cab_alcance, .eqp_arm_elm_alcance         { width:  10%; }
#eqp_arm_cab_observacoes, .eqp_arm_elm_observacoes { width:  15%; }
#eqp_arm_cab_observacoes                           {                  margin-left:0.5em;                   }
.eqp_arm_elm_observacoes                           { font-size:0.7em; margin-left:  1em; margin-top:0.1em; }

/* EQUIPAMENTO / MOSTRUÁRIO / MUNIÇÃO & MUNDANO */
#eqp_mun_cab_nome, #eqp_mun_cab_custo, #eqp_mun_cab_peso, #eqp_mund_cab_descricao,
.eqp_mun_elm_nome, .eqp_mun_elm_custo, .eqp_mun_elm_peso, .eqp_mun_elm_descricao, .eqp_mun_elm_descricaolonga { 
  float:left; display:inline-block; text-align:left; }
.eqp_mun_elm_nome, .eqp_mun_elm_custo, .eqp_mun_elm_peso, .eqp_mun_elm_descricao { margin-top:0.5em; }
#eqp_mun_cab_nome, .eqp_mun_elm_nome               { width: 29%; text-align:left; }
#eqp_mun_cab_nome                                  { margin-left:1.5em; }
.eqp_mun_elm_nome                                  { margin-left:0.5em; }
#eqp_mun_cab_custo, 
.eqp_mun_elm_custo     { width: 8%; text-align:center; }
#eqp_mun_cab_peso,
.eqp_mun_elm_peso      { width: 8%; text-align:center; }
.eqp_mun_elm_descricao, .eqp_mun_elm_descricaolonga { width: 50%;  text-align:left; }
.eqp_mun_elm_descricao      { font-size:0.8em; margin-top:0.8em;  }
.eqp_mun_elm_descricaolonga { font-size:0.7em; margin-top:0.3em; }

/* EQUIPAMENTO / MOSTRUÁRIO / DEFESA */
#eqp_def_cab_nome, #eqp_def_cab_custo, #eqp_def_cab_peso, #eqp_def_cab_defesa, #eqp_def_cab_fn, #eqp_def_cab_observacoes,
.eqp_def_elm_nome, .eqp_def_elm_nomec, .eqp_def_elm_nomec, .eqp_def_elm_custo, .eqp_def_elm_peso, .eqp_def_elm_defesa, 
.eqp_def_elm_fn, .eqp_def_elm_observacoes { float:left; text-align:center; display:inline-block; }
.eqp_def_elm_nome, .eqp_def_elm_nomec, .eqp_def_elm_nomec, .eqp_def_elm_custo, .eqp_def_elm_peso, .eqp_def_elm_defesa, 
.eqp_def_elm_fn, .eqp_def_elm_observacoes { margin-top:0.5em;  }
#eqp_def_cab_nome, .eqp_def_elm_nome               { width: 25%; text-align:left; }
#eqp_def_cab_nome                                  { margin-left:1.5em; }
.eqp_def_elm_nome                                  { margin-left:0.5em; }
#eqp_def_cab_custo, .eqp_def_elm_custo             { width: 10%; }
#eqp_def_cab_peso                                  { width:9.5%; }
.eqp_def_elm_peso                                  { width: 10%; }
#eqp_def_cab_defesa, .eqp_def_elm_defesa           { width: 10%; }
#eqp_def_cab_fn, .eqp_def_elm_fn                   { width: 10%; }
#eqp_def_cab_observacoes, .eqp_def_elm_observacoes { width: 25%; text-align:left; }

/* EQUIPAMENTO / MOSTRUÁRIO / CONJURAÇÃO */
#eqp_cnj_cab_nome, #eqp_cnj_cab_custo, #eqp_cnj_cab_peso, #eqp_cnj_cab_fn, #eqp_cnj_cab_observacoes,
.eqp_cnj_elm_nome, .eqp_cnj_elm_custo, .eqp_cnj_elm_peso, .eqp_cnj_elm_fn, .eqp_cnj_elm_observacoes{ 
  float:left; display:inline-block; text-align:center; }
.eqp_cnj_elm_nome, .eqp_cnj_elm_custo, .eqp_cnj_elm_peso, .eqp_cnj_elm_fn { margin-top:0.5em; }
#eqp_cnj_cab_nome, .eqp_cnj_elm_nome { text-align:left; }
#eqp_cnj_cab_nome { width: 20%; margin-left:1.5em; }
.eqp_cnj_elm_nome { width: 19%; margin-left:0.5em; }
#eqp_cnj_cab_custo, #eqp_cnj_cab_peso, .eqp_cnj_elm_custo, .eqp_cnj_elm_peso { width:7.5%; } 
#eqp_cnj_cab_fn, .eqp_cnj_elm_fn { width:  5%; }
#eqp_cnj_cab_observacoes, .eqp_cnj_elm_observacoes { width: 53%; }
.eqp_cnj_elm_observacoes { text-align:left; font-size:0.7em; margin-top:0.3em; }


/* EQUIPAMENTO / MOSTRUÁRIO / POÇÃO */
#eqp_poc_cab_nome, #eqp_poc_cab_custo, #eqp_poc_cab_peso, #eqp_poc_cab_raridade, #eqp_poc_cab_descricao,
.eqp_poc_elm_nome, .eqp_poc_elm_custo, .eqp_poc_elm_peso, .eqp_poc_elm_raridade, .eqp_poc_elm_descricao { 
  float:left; display:inline-block; text-align:center; }
.eqp_poc_elm_nome, .eqp_poc_elm_custo, .eqp_poc_elm_peso, .eqp_poc_elm_raridade { margin-top:0.5em; }
#eqp_poc_cab_nome, .eqp_poc_elm_nome { text-align:left; }
#eqp_poc_cab_nome                    { width: 32%;  margin-left:1.5em; }
.eqp_poc_elm_nome                    { width: 32%;  margin-left:0.5em; }
#eqp_poc_cab_custo, #eqp_poc_cab_peso, .eqp_poc_elm_custo, .eqp_poc_elm_peso { width:8%; }
#eqp_poc_cab_raridade, .eqp_poc_elm_raridade { width: 10%; }
#eqp_poc_cab_descricao, .eqp_poc_elm_descricao { width: 35%; text-align:left; margin-left:0.8em; }
.eqp_poc_elm_descricao { margin-top:0.3em; font-size:0.7em; }

/*********************************************************************************************************************/
/* ATAQUES / DEFESAS / ETC */
#ataque, #defesa, #etc { float:left; display:inline-block; background-color:var(--cinza);}
#ataque { margin-left: 0.5%; margin:0.5%; width:35%; }
#defesa {                    margin:0.5%; width:36%; }
#etc    { margin-right:0.5%; margin:0.5%; width:26%; }

/* ATAQUES */
#lista_de_ataques { width:100%; height:8.5em; }
#atq_cab_nome, #atq_cab_tipo, #atq_cab_alcance, #atq_cab_dano, .atq_elm_nome, .atq_elm_tipo, .atq_elm_alcance, 
.atq_elm_dano { float:left; display:inline-block; text-align: center; }
.atq_elm_nome, .atq_elm_tipo, .atq_elm_alcance, .atq_elm_dano { margin-top:0.5em; }
#atq_cab_nome, .atq_elm_nome  { text-align: left; margin-left:0.5em; }
#atq_cab_nome     { width: 43%; }
.atq_elm_nome     { width: 45%; }
#atq_cab_tipo     { width: 29%; }
.atq_elm_tipo     { width: 30%; }
#atq_cab_alcance, .atq_elm_alcance, #atq_cab_dano, .atq_elm_dano { width: 10%; }

/* DEFESAS */
#def_cab_nome, #def_cab_total, #def_cab_extra, .def_elm_nome, .def_elm_valor, .def_elm_extra {
  float:left; text-align:left; display:inline-block; }
#def_cab_nome,  .def_elm_nome  { width:30%; margin-left:0.5em;}
#def_cab_total, .def_elm_valor { width:34%; }
#def_cab_extra, .def_elm_extra { width:31%; }
.def_elm_nome,  .def_elm_valor, .def_elm_extra  { margin-top:0.5em; }

/* ETC : CARGA & DESLOCAMENTO & INICIATIVA */
.crd_elm_nome, .crd_elm_valor { float:left; text-align:left; display:inline-block; margin-top:0.5em; }
.crd_elm_nome  { margin-left:0.5em; width:40%; }
.crd_elm_valor { width:55%; }

/*********************************************************************************************************************/
/* OPCOES */

#opcoes { width:98%; height:2em; margin-top:1em; }

.opcoes_check { float:left; display:inline-block; color:var(--branco); height:2em; width:18%; margin:0.5em; width:18%;}

.opcoes_check_linha { padding-top:0.4em; }
.opcoes_check_texto { padding-top:0.5em; margin-left:2.5em; }

#botao_exportar { font-size:1.0em; float:left; display:inline-block; margin:0.5em; width:60%; height:2em; }

#exportador { display:none; position:fixed; z-index:1; left:0; top:0; width:100%; height:100%;
              background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4); padding-top: 60px; overflow: hidden; }

#exportador-conteudo { background-color: var(--branco); margin: 5% auto 15% auto; width:50%; height: 60%; }

#exportador-texto { width:95%; height:85%; float:left; display:block; white-space:pre; margin:2%;
                    font-family: "Courier New", Courier, monospace; }

#exportador-copiar { width:100%; height:auto; margin:2% float:left; display:block; }

/*********************************************************************************************************************/
/* SLIDE - RANGE */
.slider {
  -webkit-appearance:none; width:100%; height:0.5em; border-radius:5px; background:var(--cinzae);
  outline:none; opacity:1.0; -webkit-transition: .2s; transition: opacity .2s; }

.slider::-webkit-slider-thumb { 
  -webkit-appearance:none; appearance:none; width:1.2em; height:1.2em; border-radius:25%; 
  background:var(--cinzapar); cursor:pointer; }

.slider::-moz-range-thumb { width:1.2em; height:1.2em; border-radius:25%; background:var(--cinzaimpar); cursor:pointer; }

.slider:hover { background:var(--cinza); }


/*********************************************************************************************************************/
/* CHECKBOX */

/* Customiza o container : https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
.container, .cont_verm, .cont_verd, .cont_azul, .cont_amar, .cont_roxo {
  display:block; position:relative;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

/* "Abled" */
.container input, .cont_verm input, .cont_verd input, .cont_azul input, .cont_amar input, .cont_roxo input {
  position:absolute; opacity:0; height:0; width:0; }
.checkmark { cursor:pointer; position:absolute; top:0; left:8px; height:1em; width:1em; transition: all 0.2s;
             background-color:#FAFAFA; border:2px solid #A2A2A2; }

/* "Hover" sobre "Abled" */
.container:hover input ~ .checkmark { background-color:var(--brancoc); border:2px solid var(--cinzae);    }
.cont_verm:hover input ~ .checkmark { background-color:var(--brancoc); border:2px solid var(--vermelhoe); }
.cont_verd:hover input ~ .checkmark { background-color:var(--brancoc); border:2px solid var(--verdee);    }
.cont_azul:hover input ~ .checkmark { background-color:var(--brancoc); border:2px solid var(--azule);     }
.cont_amar:hover input ~ .checkmark { background-color:var(--brancoc); border:2px solid var(--amareloe);  }
.cont_roxo:hover input ~ .checkmark { background-color:var(--brancoc); border:2px solid var(--roxoe);     }

/* "Disabled" */
.container input:disabled ~ .checkmark, .cont_verm input:disabled ~ .checkmark, 
.cont_verd input:disabled ~ .checkmark, .cont_azul input:disabled ~ .checkmark, 
.cont_amar input:disabled ~ .checkmark, .cont_roxo input:disabled ~ .checkmark{ 
  cursor:default; background-color:#EBEBEB; border:2px solid #C9C9C9; }

/* Checked */
.container input:checked ~ .checkmark { background-color:var(--cinza);    border:2px solid var(--cinzae);    }
.cont_verm input:checked ~ .checkmark { background-color:var(--vermelho); border:2px solid var(--vermelhoe); }
.cont_verd input:checked ~ .checkmark { background-color:var(--verde);    border:2px solid var(--verdee);    }
.cont_azul input:checked ~ .checkmark { background-color:var(--azul);     border:2px solid var(--azule);     }
.cont_amar input:checked ~ .checkmark { background-color:var(--amarelo);  border:2px solid var(--amareloe);  }
.cont_roxo input:checked ~ .checkmark { background-color:var(--roxo);     border:2px solid var(--roxoe);     }

/* "Hover" sobre "Checked */
.container:hover input:checked ~ .checkmark { background-color:var(--cinza);    border:2px solid var(--preto); }
.cont_verm:hover input:checked ~ .checkmark { background-color:var(--vermelho); border:2px solid var(--preto); }
.cont_verd:hover input:checked ~ .checkmark { background-color:var(--verde);    border:2px solid var(--preto); }
.cont_azul:hover input:checked ~ .checkmark { background-color:var(--azul);     border:2px solid var(--preto); }
.cont_amar:hover input:checked ~ .checkmark { background-color:var(--amarelo);  border:2px solid var(--preto); }
.cont_roxo:hover input:checked ~ .checkmark { background-color:var(--roxo);     border:2px solid var(--preto); }

/* "" */
.checkmark:after { content: ""; position: absolute; display: none; }

/* Mostra o "checkmark" quando selecionado */
.container input:checked ~ .checkmark:after { display: block; }
.cont_verm input:checked ~ .checkmark:after { display: block; }
.cont_verd input:checked ~ .checkmark:after { display: block; }
.cont_azul input:checked ~ .checkmark:after { display: block; }
.cont_amar input:checked ~ .checkmark:after { display: block; }
.cont_roxo input:checked ~ .checkmark:after { display: block; }

/* Desenha o "checkmark" */
.container .checkmark:after, .cont_verm .checkmark:after, .cont_verd .checkmark:after, 
.cont_azul .checkmark:after, .cont_amar .checkmark:after, .cont_roxo .checkmark:after {
  left:4px; top:0px; width:5px; height:10px; border:solid var(--brancoc); border-width:0 3px 3px 0;
  -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);   }