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

.fm { font-family:"Courier New", Courier, monospace; font-size:1em;}

/* INTRO */
#intro { position:fixed; z-index:2; left:0; top:0; height:100%; width:100%; transition: all 2s; transition-timing-function: ease-out; }
.breu { background-color:rgba(0,0,0,1); }
.bb { background-color:var(--branco); }

.sl { margin-left:-3px; }

/* COR */
.verd { color:var(--verdee); } .verdx { color:var(--verdex); } 
.verm { color:var(--vermelhoe); } 
.azul { color:var(--azule); } .azulx { color:var(--azulx); } 
.amar { color:var(--amarelo); }
.roxo { color:var(--roxox); }
.cinz { color:var(--cinzae); }
.vermelho { color:red; } .amarelo { color:var(--amarelot);  }
.pop { color:var(--amareloe); transition: all 0.2s; transition-timing-function:ease-out; }
.pop:hover { color:var(--amarelo); }
.hpu { }
.hpu:hover { font-weight:bold; text-decoration:underline; }

/* GENÉRICOS */
#versao { color:var(--brancoc); position:absolute; left:95%; bottom:6px; }
#obs { color:var(--brancoc); position:absolute; left:2%; width:100%; bottom:6px; }
.f07 { font-size:0.7em; } .f08 { font-size:0.8em; } .f09 { font-size:0.9em; } .f1 { font-size:1em; } .f1d5 { font-size:1.5em; } .f2 { font-size:2em; }
.fr { float:right; } .fl { float:left; } .di { display: inline-block; }
.tc { text-align:center; } .tl { text-align:left; } .tr { text-align:right; }
.pt02 { padding-top:3px; }
.m5 { margin:8px; } .mt { margin-top:8px; } .mb { margin-bottom:8px; } .ml { margin-left:8px; } .mr { margin-right:8px; }
.mt16 { margin-top:16px; }
.h5 { height:5em; }

.lista, .listb { float:left; display:block; overflow-x:hidden; overflow-y:scroll; width:100%; }
.lista { background-color:var(--cinzae); }
.listb { background-color:var(--cinzapar); }

.bt { border:1px solid black; }
.bl1 { border-left:1px solid black;  } .br1 { border-right:1px solid black; } .bt1 { border-top:1px solid black; } .bb1 { border-bottom:1px solid black; }
.fundo_branco { background-color: white; }

.h2 { height:28px; }
.fb { font-weight:bold;}
.tu { text-decoration:underline; }

.el_par, .el_impar { float:left; display:block; height:28px; width:100%; border-bottom:1px solid black; transition:all 0.2s; transition-timing-function:ease-out; }
.el_par { background-color:var(--cinzapar); } .el_impar { background-color:var(--cinzaimpar); }
.el_par:hover, .el_impar:hover { background-color:var(--branco); }
.lf_botao { display:inline-block; float:right; margin-right:4px; height:100%; }
.cp { cursor:pointer; }
.ch { cursor:help; }

.oa { overflow-x:hidden; overflow-y:scroll; }

/* LARGURAS */
.tab { width:8px; }
.w1 { width:1%; } .w2 { width:2%; } .w3 { width:3%; } .w4 { width:4%; } .w5 { width:5%; } .w6 { width:6%; } .w7 { width:7%; } .w8 { width:8%; } .w9 { width:9%; }
.w10 { width:10%; } .w11 { width:11%; }  .w11d8 { width:11.8%; } .w12 { width:12%; } .w13 { width:13%; } .w14 { width:14%; } .w15 { width:15%; } .w15d3 { width:15.3%; } .w15d5 { width:15.5%; } .w16 { width:16%; } .w17 { width:17%; } .w18 { width:18%; } .w19d5 { width:19.2%; }
.w20 { width:20%; } .w24 { width:24%; } .w25 { width:25%; } .w28 { width:28%; }
.w30 { width:30%; } .w32 { width:32%; } .w33 { width:33%; } .w34 { width:34%; } .w35 { width:35%; } .w37 { width:37%; }
.w40 { width:40%; } .w45 { width:45%; } .w48 { width:48%; } .w49 { width:49%; } 
.w50 { width:50%; } .w51 { width:51%; } .w52 { width:52%; } .w54 { width:54%; } .w55 { width:55%; } .w58 { width:58%; }
.w60 { width:60%; } .w65 { width:65%; } .w66 { width:66%; }
.w70 { width:70%; }
.w80 { width:80%; }
.w90 { width:90%; } .w95 { width:95%; } .w98 { width:98%; }
.w100 { width:100%; }

/* ALTURAS */
.t1l, .t3l, .t4l, .t5l, .t6l, .t7l, .t8l, .t8bl, .t9l, .t11l, .t11m, .t12l, .t13l { overflow:auto; background-color:var(--cinzae); }
.t1l { height:32px; }
.t3l { height:96px; } .t4l { height:127px; } .t5l { height:158px; } .t6l { height:188px; } .t7l { height:218px; } .t8l { height:259px; } .t8bl { height:19em; } .t9l { height:280px; } 
.t11l { height:344px; } .t11m { height:26em; } .t12l { height:372px; } .t13l { height:406px; } 
.h100 { height:100%; }
.mt8l { max-height:18em; }

.hec { height:54px; }

/* TABELAS */
 table { width:100%; border-collapse:collapse; border-right:1px solid black; }
 td { text-align:center; border-top:1px solid black; border-bottom:1px solid black; font-size:15px; height:28px; }
 thead th { font-weight:bold; font-size:1em; border:1px solid #000; color:var(--branco); background-color:var(--cinzacab); border:none; }
 thead tr div { position:absolute; top:2px; }
 .et { border:1px solid black; position:relative; padding-top:27px; background-color:var(--cinzacab); }

/* LINHAS */
 .impar, .par { font-size:0.9em; transition:all 0.2s; transition-timing-function:ease-out; }
	.impar { background-color:var(--cinzaimpar); }
	.par { background-color:var(--cinzapar); }
	.impar:hover, .par:hover { background-color:var(--branco); }


/* CAIXAS */
.titulo    { text-align:center; margin-top:8px; font-size:24px; color:var(--branco);}
.cabecalho, .cabecalhim, .rodape, .rodapezim { display:block; float:left; width:100%; background-color:var(--cinzacab); font-size:16px; padding-top:3px; padding-bottom:3px; font-weight:bold; color:var(--branco); }
.cabecalho, .cabecalhim { text-align:center; }
.cabecalhim, .rodapezim { font-size:16px; }
.rodape, .rodapezim { text-align:center; }


/* TEXTOS DIFERENCIADOS */
.bonus, .const { font-size:0.7em; } .bonus { text-decoration:underline; }
.bonus:hover { font-weight:bold; }

/* Botões/ FONTE */
.bt_c, .bt_s { cursor:pointer; float:left; height:24px; margin:2px; text-align:center; border-style:none; font-weight:bold; font-size:12px;  color:var(--brancoc); border-radius:8px; margin-right:2px; margin-left:2px; transition: all 0.2s; transition-timing-function: ease-out; }
.bt_c { background-color: var(--cinza); }
.bt_s { background-color: var(--cinzae); }
.bt_c:hover { background-color:var(--branco); color:var(--preto); border:1px solid black; }
.bt_s:hover { text-shadow: 2px 2px var(--cinza); }

/* Botões/ ADICIONAR{+}, REMOVER{X}, DIMINIUIR[-] e DESABILITADO{#} */
.botao_sqn { float:left; width:28px; height:24px; }
.botao_adi, .botao_rem, .botao_dim { cursor:pointer; }
.botao_adi, .botao_rem, .botao_dim, .botao_des { float:left; width:28px; height:24px; margin-top:0px; margin-left:3px; text-align:center; background-color:var(--cinza); border-style:none; border-radius:8px; 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); border:1px solid black; }
.botao_rem:hover { background-color:var(--vermelho); color:var(--preto); text-shadow:2px 2px var(--cinza); border:1px solid black; }
.botao_dim:hover { background-color:var(--amarelo);  color:var(--preto); text-shadow:2px 2px var(--cinza); border:1px solid black; }
.botao_des:hover { background-color:var(--azul);     color:var(--preto); text-shadow:2px 2px var(--cinza); border:1px solid black; }
.bloqueado { color:var(--cinzae); } .liberado  { color:var(--branco); } .negativo { color:red; font-weight:bold; }

/* SLIDE - RANGE */
.slider { -webkit-appearance:none; width:100%; height:8px; 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:20px; height:20px; border-radius:25%; background:var(--cinzaimpar); cursor:pointer; }
.slider::-moz-range-thumb { width:20px; height:16px; border-radius:25%; border-width:3px; background:var(--cinzapar); cursor:pointer; }
.slider::-moz-range-thumb:hover { width:20px; height:16px; border-color:var(--cinzae); border-width:3px; border-radius:25%; background:var(--cinzaimpar); cursor:pointer; }
.slider:hover { background:var(--cinza); }

/* CHECKBOX */
label { cursor: pointer; width:100%; height:100%; }
/* Customiza o container : https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
.container, .cont_verm, .cont_verd, .cont_azul, .cont_amar, .cont_roxo, .cont_cinz { 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, .cont_cinz input { position:absolute; opacity:0; height:0; width:0; }
.checkmark { cursor:pointer; position:absolute; top:3px; left:22px; height:14px; width:14px; transition: all 0.1s; background-color:#FAFAFA; border:4px solid #A2A2A2; }
/* "Hover" sobre "Abled" */
.container:hover input ~ .checkmark { background-color:var(--brancoc); border:4px solid var(--cinzae);    } .cont_verm:hover input ~ .checkmark { background-color:var(--brancoc); border:4px solid var(--vermelhoe); } .cont_verd:hover input ~ .checkmark { background-color:var(--brancoc); border:4px solid var(--verdee);    } .cont_azul:hover input ~ .checkmark { background-color:var(--brancoc); border:4px solid var(--azule);     } .cont_amar:hover input ~ .checkmark { background-color:var(--brancoc); border:4px solid var(--amareloe);  } .cont_roxo:hover input ~ .checkmark { background-color:var(--brancoc); border:4px solid var(--roxoe); } .cont_cinz:hover input ~ .checkmark { background-color:var(--brancoc); border:4px solid var(--cinzae); } 
/* "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, .cont_cinz input:disabled ~ .checkmark { cursor:default; background-color:#EBEBEB; top:2px; left:22px; border:4px solid #C9C9C9; }
/* Checked */
.container input:checked ~ .checkmark { background-color:var(--cinza); border:4px solid var(--cinzae);    } .cont_verm input:checked ~ .checkmark { background-color:var(--vermelho); border:4px solid var(--vermelhoe); } .cont_verd input:checked ~ .checkmark { background-color:var(--verde);    border:4px solid var(--verdee);    } .cont_azul input:checked ~ .checkmark { background-color:var(--azul);     border:4px solid var(--azule);     } .cont_amar input:checked ~ .checkmark { background-color:var(--amarelo);  border:4px solid var(--amareloe);  } .cont_roxo input:checked ~ .checkmark { background-color:var(--roxo); border:4px solid var(--roxoe); } .cont_cinz input:checked ~ .checkmark { background-color:var(--cinzac); border:4px solid var(--cinzae); }
/* "Hover" sobre "Checked */
.container:hover input:checked ~ .checkmark { background-color:var(--cinza); border:4px solid var(--preto); } .cont_verm:hover input:checked ~ .checkmark { background-color:var(--vermelho); border:4px solid var(--preto); } .cont_verd:hover input:checked ~ .checkmark { background-color:var(--verde);    border:4px solid var(--preto); } .cont_azul:hover input:checked ~ .checkmark { background-color:var(--azul);     border:4px solid var(--preto); } .cont_amar:hover input:checked ~ .checkmark { background-color:var(--amarelo);  border:4px solid var(--preto); } .cont_roxo:hover input:checked ~ .checkmark { background-color:var(--roxo); border:4px solid var(--preto); } .cont_cinz:hover input:checked ~ .checkmark { background-color:var(--cinzac); border:4px 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; } .cont_cinz 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, .cont_cinz .checkmark:after { left:3px; top:-2px; width:5px; height:10px; border:solid var(--brancoc); border-width:0 4px 4px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } 

/* NAVEGAÇÃO */
#navegacao { position:fixed; z-index:1; left:0; top:-100px; width:100%; height:50px; background:rgba(0,0,0,0.7); color:white; }
#barra_superior_curta, #barra_superior, #barra_inferior { position:absolute; left:0; width:100%; }
#barra_superior_curta, { z-index:0; top:50px; height:23px; background:url("img/0barra.png"); }
#barra_superior, #barra_inferior { height:50px; background:url("img/0barrao.png"); }
#barra_superior { top:0px; }
#barra_inferior { bottom:0px; height:-23px; transform: rotate(180deg); } 
.botao_aba, .botao_direita, .botao_salvar { float:left; display:inline-block; width:10%; z-index:2; background-color:rgba(0,0,0,0); color:var(--branco); margin-top:0.2em; padding:16px; font-size:16px; border:none; text-align:center; cursor:pointer; transition-duration:0.1s; }
.botao_aba:hover { font-size:18px; margin-top:0em; font-weight:bold; background-color:rgba(100,100,100,1); }
.botao_aba_aberta { font-size:20px; margin-top:0em; font-weight:bold; }
.botao_aba_aberta:hover { background-color:rgba(100,100,100,1); }
.botao_salvar, .botao_direita { float:right; }
.botao_salvar:hover  {  background-color:var(--verdee); font-size:18px; margin-top:0em; font-weight:bold; background-color:rgba(100,100,100,1); }
.botao_salvar:active { background-color:var(--verde); border:1px solid var(--verdec); }
.botao_direita:hover { font-size:18px; margin-top:0em; font-weight:bold; background-color:rgba(100,100,100,1); }

/* ABAS */
#aba_inicial, #aba_rotulo, #aba_evolucao, #aba_habilidade, #aba_equipamento, #aba_companheiro, #aba_exportar, #aba_material {
display:block; margin-bottom:0.1%; margin-right:1%; position:absolute; width:97%; height:50%; }
#aba_inicial { margin-top:100px; }
#aba_rotulo, #aba_evolucao, #aba_habilidade, #aba_equipamento, #aba_companheiro, #aba_exportar, #aba_material { margin-top:60px; }
.aba { left:0px; padding-left:20px; opacity:98; filter: alpha(opacity=98); transition-property:all; transition-duration:0.2s; }
.esquerda { left:-20px; opacity:0; filter: alpha(opacity=0); z-index:-1; }
.direita { left:20px; opacity:0; filter: alpha(opacity=0); z-index:-1; }
#titulo, #contexto, #rotulo, #evolucao, #habilidade, #equipamento, #ataque, #defesa, #etc { float:left; display:block; width:100%; margin-top:0.1%; margin-bottom:0.1%; opacity: 0.98; filter: alpha(opacity=98); }

/* Abas, INICIAL */
.logo { text-align:center; margin-top:-5%; }
#menu, #personagens, #materiais, .ini_nome, .ini_moedas { float:left; display:inline-block; }
#menu { margin-left:20%; width: 70%; }
#personagens { margin:16px; width:40%; } #materiais { margin:16px; width:40%; }
#botao_importar_personagens, #botao_importar_materiais { opacity:0; position:absolute; z-index:-1; }
.ini_nome   { margin-left:0.5em; margin-top:0.5em; width:70%; }
.ini_moedas { margin-left:0.5em; margin-top:0.5em; width:60%; }
.mt { margin-top:7px; }
#moedas_customizadas { margin-top:0.1em; display:inline-block; float:right; width:20%; margin-right:0.5em; }

/* Abas, RÓTULOS */
#rotulos_coluna_a, #rotulos_coluna_b, #rotulos_coluna_c { float:left; display:inline-block; height:100%; width:30%; margin:0.5em; }
#rotulos_coluna_a, #rotulos_coluna_b { width:30%; } #rotulos_coluna_c { width:36%; }

#selecionados, #idiomas, #detalhador, #registro, #detalhador, #rot_idade, #rot_motivacao, .contexto_texto, .contexto_idade { float:left; width:100%; margin-bottom:0.5em;  }
#selecionados { }
#idiomas      { }
#detalhador   { }
#registro     { }
#rot_idade { width:15%; margin-right:0.5em; }
#rot_motivacao { width:80%; }
.det_img   { background-color:white; display:block; margin:auto; height:240px; }
.la { font-size:1.8em; display:inline-block; } 
.lb { font-size:1.2em; display:inline-block; } 
.lc { font-size:0.9em; display:inline-block; }
.mi { float:left; display:block; text-align:left; background-color:var(--branco); width:100%; height:26.8em; overflow-y:scroll; }.

.contexto_texto, .contexto_idade { margin-right: 0.5%; }
.contexto_texto { width:100%; }
.contexto_idade { width:100%; }

.entrada_texto, .entrada_numero { background-color:var(--cinzaimpar); height:1.8em; border:1px solid black; font-size:1em; text-align:center; }
.entrada_texto  { width:99%; }
.entrada_numero { width:97%; }
.entrada_texto:hover,.entrada_numero:hover { background-color:var(--cinzapar); } 

/* Abas, Rótulos, IDIOMAS */
#idm_corpo { position:absolute; left:10%; top:10%; width:80%; border-radius:0.5em; background-color:var(--branco); padding-top:0.5em; }
#idm_col_a, #idm_col_b { float:left; display:inline-block; margin:8px; }
#idm_col_a { width:40%; margin-left:16px; }
#idm_col_b { width:55%; }
.bcb { margin-top:16px; margin-bottom:16px; }
.ci { margin-left:-2em; }
.mi { float:left; display:block; text-align:left; background-color:var(--branco); width:100%; height:349px; overflow-y:scroll; }
.lista_idiomas { float:left; min-height:2.2em; display:block; width:100%; border-bottom:1px solid black; background-color:var(--cinzapar); }
.idiomas_txt { float:left; width:display:inline-block; padding:0.5em; }

/* Abas, Rótulos, NOMES */
#anm_corpo { position:absolute; left:15%; top:15%; width:70%; border-radius:0.5em; background-color:var(--branco); padding-top:0.5em; }
#anm_col_a, #anm_col_b { float:left; display:inline-block; margin:8px; }
#anm_col_a { width:35%; margin-left:16px; margin-right:0px; }
#anm_col_b { width:60%; }

/* Abas, HABILIDADES */
#possuidas, #mostrador, #seletor { float:left; display:inline-block; }
#possuidas { margin-left: 0.5%; margin:0.5%; width: 30%; }
#mostrador {                    margin:0.5%; width: 25%; }
#seletor   { margin-right:0.5%; margin:0.5%; width: 41.5%; }
#habilidades_disponiveis { float:left; display:block; text-align:center; }

/* Abas, Habilidades, MOSTRADOR */
.mostrador  { max-height:var(--listalonga); }
.cabecalhoB { display:block; margin-top:28px; padding-top:8px; padding-bottom:4px; background-color:var(--cinzaimpar); }
.hmt, .hmc { display:block; text-align:left; font-size:14px; margin-left:8px; margin-top:2px; }
.mhn { display:block; text-align:left; font-size:16px; margin-left:8px; margin-top:3px; }
.mostrador_texto { float:left; display:block; text-align:left; background-color:var(--branco); width:100%; max-height:406px; overflow-y:scroll; }
.mhd { display:block; font-size:15px; margin:8px; }

/* Abas, EQUIPAMENTO */
#eqp_col_a, #eqp_col_b { float:left; display:inline-block; height:100%; margin:0.5em; }
#eqp_col_a { width:35%; }
#eqp_col_b { width:62%;}

/* Abas, COMPANHEIROS */
#aba_companheiro {}
#companheiro_coluna_a, #companheiro_coluna_b, #companheiro_coluna_c { float:left; display:inline-block; height:100%; width:32%; margin:0.5em; }
#lista_de_companheiros, #companheiro_equipamento, #companheiro_ataque, #companheiro_defmov, #companheiro_atributos, #companheiro_habilidades, #companheiro_hab_lista, #companheiro_mostrador { float:left; width:100%; display:block; margin-bottom:0.5em; }

/* Abas, EVOLUÇÃO */
#nivel, #vida, #mana, #atributo, #vital { float:left; display:inline-block; margin:0.5%; }
#nivel { width:32%; }
#vida  { width:32%; }
#mana  { width:32%; }
#atributo { width:99%; }
#vital { width:99%; }
#vida_mana { text-align:center; color:var(--branco); height:2.1em; }
.nvm { float:left; display:inline-block; width:100%; padding-top:0.2em; padding-bottom:0.2em; text-align:center; font-size:1.2em; height:32px; background-color:var(--cinzaimpar); }
.nvm:hover { background-color:var(--cinzapar); }
#vida_total, #mana_total { padding-top:0.4em; padding-bottom:0em; }
#range_nivel { float:left; display:inline-block; margin-top:0.4em; }
#nivel_de_personagem  { }
#range_nivel          { width:95%; margin-top:1em; margin-left:0.5em;}  

/* Abas, EQUIPAMENTO */
#inventario, #mostruario, #ataque, #defesa, #movimentacao { float:left; display: inline-block; margin:0.2%; } 
#inventario { width:100%; margin-bottom:0.5em; }
#mostruario { width:100%; margin-bottom:0.5em; }
#ataque { width:100%; }
#defesa { width:55%; }
#movimentacao { margin-left:1em; width:40%; }
#moedas, #equipamento_extra { float:left; display:block; width:100%; }
#moedas { text-align:center; }

/* Abas, 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;  }

/* Abas, Equipamento, ATAQUES */
#lista_de_ataques { width:100%; }

/* Abas, EXPORTAR */
#lista_de_formatos, #pre_visualizador { display:inline-block; float:left; margin:0.5em; }
#lista_de_formatos { width: 22%; }
#pre_visualizador { z-index:1; position:absolute; width: 74%; }
#visualizador { height:500px; background-color:var(--branco); }
.lf_nome { display:inline-block; float:left; margin-top:0.5em; margin-left:0.5em; }
#exportador-instrucoes { margin:1em; padding-top:2em; }
#exportador-conteudo { background-color: var(--branco); width:100%; height:95%; overflow-y: hidden; }
#exportador-texto { width:95%; height:90%; float:left; display:block; white-space:pre; margin:2%;
                    font-family: "Courier New", Courier, monospace; resize:none; overflow: auto; }
#exportador-imagem { background-color: var(--branco); width:99%; height:93%; }
#exportador-scroll { overflow-y: scroll; width:100%; height:100%; }
#ficha_desenhada { width:944px; height:1344px;}
#exportador-copiar { width:100%; height:auto; margin:2% float:left; display:block; }

/* Abas, MATERIAL */
#aba_material {}

#abas_de_material, #instancias_de_material, #visualizador_de_material { float:left; display:inline-block; height:100%; margin:0.5em; }
#abas_de_material { width:20%; }
#instancias_de_material { width:29%; }
#visualizador_de_material { width:35%; }

.txa { resize:none; height:4em; font-size:medium; }




/* POP-UP */
.menu_pop_block { position:fixed; z-index:2; left:0; top:0; height:100%; width:100%; background-color:rgba(0,0,0,0.7); transition: all 0.2s; transition-timing-function: ease-out; }
.menu_pop_none { position:fixed; z-index:-1; left:0; top:0; height:100%; width:100%; opacity:0; filter:alpha(opacity=0); transition: all 0.2s; transition-timing-function: ease-out; }

/* Pop-Up, SELEÇÃO DE COMPANHEIROS */
#cmp_corpo { border:1px solid black; position:absolute; left:15%; top:20%; width:70%; border-radius:0.5em; background-color:var(--branco); padding:0.5em; }
#cmp_col_a, #cmp_col_b { float:left; display:inline-block; margin:0.7em; }
#cmp_col_a { width:60%; }
#cmp_col_b { width:35%; }
#mostrador_companheiro {  }
.cmp_mostrador { float:left; display:block; padding:0.5em; width:100%; border:1px solid black; background-color:var(--cinzapar);}
.cmp_confirma { margin-top:0.5em; width:100%; }
.caixa { border:1px solid black; }

/* Pop-Up, OPÇÕES DE HABILIDADES */
#odh_corpo { border:1px solid black; position:absolute; left:30%; top:20%; width:40%; border-radius:0.5em; background-color:var(--branco); padding:1em; }
.odh_confirma { float:left; margin-top:8px; width:100%; }
#opcoes { float:left; display:inline-block; }

/* Pop-Up, MOEDAS */
#mds_corpo { border:1px solid black; position:absolute; left:30%; top:20%; width:40%; border-radius:0.5em; background-color:var(--branco); padding:0.5em; padding-top:1em; }
#mds_lista, #mds_numero, #mds_texto { float:left; display:inline-block; }
#mds_lista { margin:2.5%; width:95% }
#mds_numero { margin-left:2.5%; width:30%; }
#mds_texto { margin-left:1%; margin-top:0.5em; margin-bottom:3%; width:30%; }
.mds_confirma { margin-right:5%; margin-top:3px; width:30%; float:right; }

/* Pop-Up, QUALIDADE & MATERIAL */
.qem_pop { position:absolute; left:10%; top:17%; }
#qem_corpo { border:1px solid black; position:absolute; left:10%; top:17%; background-color:var(--branco); width:80%; border-radius:0.5em; padding:0.5em; padding-top:1em; }
.qem_l, #qem_qualidade, #qem_material { float:left; display:inline-block; }
.qem_l  { width:98%; margin:1% 0.5% 0.5% 1%; }
#qem_qualidade { width:39%; }
#qem_material  { width:59.5%; margin-left:1%; }
.qem_check { margin-top:-14px; margin-left:-10px; }
#qem_fechar   { display:inline-block;              width:25%; margin-top:0.3em; margin-left:1em; }
.bt_menu, .bt_mr, .bt_mg, .bt_mb, .bt_my { cursor:pointer; height:2em; background-color:var(--cinzae); text-align:center; border:1px solid black; font-weight:bold; font-size:1em; color:var(--brancoc); border-radius:0.5em; display:inline-block; transition:all 0.2s; transition-timing-function:ease-out; }
.bt_menu:hover { color:var(--preto); background-color:var(--cinzapar); }
.bt_mr:hover { color:var(--preto); background-color:var(--vermelho); }
.bt_mg:hover { color:var(--preto); background-color:var(--verde); }
.bt_mb:hover { color:var(--preto); background-color:var(--azul); }
.bt_my:hover { color:var(--preto); background-color:var(--amarelo); }

/* Pop-Up, TRANSFERÊNCIA de EQUIPAMENTO entre os COMPANHEIROS */
#tec_corpo { border:1px solid black; position:absolute; left:15%; top:20%; width:70%; border-radius:0.5em; background-color:var(--branco); padding:0.5em; }
#tec_col { float:left; display:inline-block; margin:0.7em; width:45%; }


/* Pop-Up: LEGENDA */
#lde_corpo { border:1px solid black; position:absolute; left:30%; top:20%; width:40%; background-color:var(--branco); border-radius:0.5em; padding:1em; }

/* Pop-Up: MATERIAL */
.col2 { float:left; display:inline-block; margin:1%; width:48%; }
.col3 { float:left; display:inline-block; margin:1%; width:31%; }

.mmb { float:left; display:inline-block; width:100%; margin:1em 0.5em 0.5em 0.5em; }

.me { width:100%; margin-bottom:1em; }

#mrc_corpo, #mnn_corpo, #mna_corpo 
{ border:1px solid black; position:absolute; top:10%; background-color:var(--branco); border-radius:0.5em; padding:1em 1em 0.5em 1em; }
#mrc_corpo { left:5%; width:90%; }
#mnn_corpo { left:35%; width:30%; }
#mna_corpo { left:10%; width:80%; }

/*textarea { padding:1px; font-family:"Lucida Console", Courier, sans-serif; }*/
textarea { height:100%; padding:1px; }
.ba { color:var(--branco); font-size:0.5em; }

.eb { width:99%; resize:none; margin:0px; border:1px solid black; font-size:1.5em; text-align:left; background-color:var(--cinzaimpar); display:inline-block; transition:all 0.2s; transition-timing-function:ease-out; }
.eb:hover { background-color:var(--cinzapar); }
.mh4 { min-height:4em; max-height:4em; }
.mh5 { min-height:5em; max-height:5em; }
.mh6 { min-height:6.8em; max-height:6.8em; }
.mh7 { min-height:7em; max-height:7em; }
.mh8 { min-height:8.8em; max-height:8.8em; }
.mh9 { min-height:9.2em; max-height:9.2em; }
.mh12 { min-height:12em; max-height:12em; }
.mh17 { min-height:17em; max-height:17em; }