/*
 * COPIA DESTE TEMPLATE -- default
 *
 * Este arquivo vale so para este template. Editar aqui NAO afeta os outros.
 * A base fica em assets/css/compat.css; quando um template nao tem a sua copia, a injecao
 * carrega a base (e por isso que um template novo funciona sem copiar nada).
 *
 * Medidas em px e tamanho de fonte em em -- nunca rem: a raiz e do tema e varios
 * usam html { font-size: 62.5% }, o que faria toda medida sair 37% menor.
 */

/*
 * NewEngine CMS - compatibilidade de Bootstrap
 *
 * O PROBLEMA
 *
 * Os modulos proprios (market, market de personagem, oficina, webshop) foram escritos
 * com classes de Bootstrap 4/5: d-flex, col-auto, w-100, form-check, card, btn-outline-*,
 * fw-bold, mb-3... O template default carrega Bootstrap 5, entao no default tudo alinha.
 *
 * So que dos dezoito templates instalados, DEZESSEIS carregam Bootstrap 3.3.7, o raven
 * carrega 4.6 e o korea nao carrega nenhum. No Bootstrap 3 nenhuma dessas classes existe:
 * o navegador simplesmente ignora, e a tela desmonta -- coluna sem largura, linha sem
 * flex, checkbox colado no texto, botao sem contorno. Foi isso que apareceu como
 * "estilos ruins e desalinhados" ao trocar de template.
 *
 * A SOLUCAO
 *
 * Definir aqui so o que falta no Bootstrap 3, e SEMPRE dentro de .ne-ui -- a classe que
 * os nossos modulos abrem. Nada aqui vaza para o template: se ele ja tem a classe (o
 * raven tem, o default tem), a nossa versao vale so dentro dos nossos blocos e o resto
 * da pagina dele continua intacto.
 *
 * O que o Bootstrap 3 JA tem nao entra neste arquivo: .btn, .btn-primary, .alert, .table,
 * .row, .col-md-*, .text-center, .text-muted, .form-control. Redefinir isso seria brigar
 * com o tema por nada.
 *
 * MEDIDAS: espacamento, raio e borda em px; tamanho de fonte em em.
 *
 * Nada de rem aqui. O tema decide o tamanho da raiz e varios usam o truque
 * html { font-size: 62.5% } para fazer 1rem valer 10px -- o battleforlorencia usa.
 * Com rem, toda medida sairia 37% menor do que o layout dos modulos assume: medido
 * na pagina ao vivo, .fs-3 dava 15px no lugar de 24 e .rounded dava 3.75px.
 * em, para fonte, segue o texto do proprio tema, que e o que se quer ali.
 */

/* ---------------------------------------------------------------- grade ---- */

/* O Bootstrap 3 monta a linha com float. As colunas novas (col, col-auto, col-12) sao
 * itens de flex e nao funcionam dentro de uma linha flutuante -- e daqui que vem a maior
 * parte do desalinhamento. As colunas antigas (col-md-*) continuam valendo: dentro de um
 * flex o float e ignorado e a largura em % delas e respeitada. */
.ne-ui .row {
	display: flex;
	flex-wrap: wrap;
}

.ne-ui .col,
.ne-ui .col-auto,
.ne-ui .col-12,
.ne-ui .col-6,
.ne-ui .col-4,
.ne-ui .col-3 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;   /* mesma calha do Bootstrap 3, senao a coluna nova cola na antiga */
	padding-right: 15px;
}

.ne-ui .col       { flex: 1 0 0%; max-width: 100%; }
.ne-ui .col-auto  { flex: 0 0 auto; width: auto; max-width: 100%; }
.ne-ui .col-12    { flex: 0 0 100%; max-width: 100%; }
.ne-ui .col-6     { flex: 0 0 50%;  max-width: 50%; }
.ne-ui .col-4     { flex: 0 0 33.333333%; max-width: 33.333333%; }
.ne-ui .col-3     { flex: 0 0 25%;  max-width: 25%; }

/* O REVES DE TORNAR A LINHA FLEX: no Bootstrap 3 uma col-md-* abaixo de 768px vira
 * bloco de largura cheia (o width so vale no media query de cima). Como item de flex
 * ela passaria a ter a largura do conteudo, e a coluna encolheria no celular. Esta
 * regra devolve a largura cheia -- o mesmo que o Bootstrap 3 faz sozinho. */
@media (max-width: 767px) {
	.ne-ui .row > [class*="col-md-"],
	.ne-ui .row > [class*="col-sm-"],
	.ne-ui .row > [class*="col-lg-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ----------------------------------------------- grade responsiva ---- */

/* Os modulos foram escritos para os pontos de quebra do Bootstrap 5, onde md
 * comeca em 768px. No Bootstrap 3 md so comeca em 992px, e as classes col-*-N
 * dele usam width, que perde para o flex-basis do .col-12 definido acima -- em
 * qualquer largura. Medido no koleos: os botoes de categoria do webshop, que sao
 * col-md-2 col-12, sairam um por linha ocupando 737px de uma janela de 798px.
 *
 * Definindo a grade aqui, os modulos saem iguais em todo template, e a coluna
 * antiga do tema continua intacta fora de .ne-ui. */

@media (min-width: 576px) {
	.ne-ui .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.ne-ui .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.ne-ui .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
	.ne-ui .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.ne-ui .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.ne-ui .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
	.ne-ui .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.ne-ui .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.ne-ui .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
	.ne-ui .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.ne-ui .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.ne-ui .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
	.ne-ui .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.ne-ui .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.ne-ui .col-md-3 { flex: 0 0 25%; max-width: 25%; }
	.ne-ui .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.ne-ui .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.ne-ui .col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.ne-ui .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.ne-ui .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.ne-ui .col-md-9 { flex: 0 0 75%; max-width: 75%; }
	.ne-ui .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.ne-ui .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.ne-ui .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
	.ne-ui .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.ne-ui .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.ne-ui .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
	.ne-ui .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.ne-ui .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.ne-ui .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
	.ne-ui .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.ne-ui .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.ne-ui .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
	.ne-ui .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.ne-ui .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.ne-ui .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
	.ne-ui .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.ne-ui .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.ne-ui .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
	.ne-ui .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.ne-ui .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.ne-ui .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
	.ne-ui .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.ne-ui .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.ne-ui .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
	.ne-ui .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.ne-ui .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.ne-ui .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Linha sem calha (g-0/g-1): usada onde os cartoes ja tem margem propria. */
.ne-ui .row.g-0  { margin-left: 0; margin-right: 0; }
.ne-ui .row.g-0  > [class*="col"] { padding-left: 0; padding-right: 0; }
.ne-ui .row.g-1  { margin-left: -4px; margin-right: -4px; }
.ne-ui .row.g-1  > [class*="col"] { padding-left: 4px; padding-right: 4px; }

/* O form-row do Bootstrap 4 (some no 5): linha de formulario com calha estreita. */
.ne-ui .form-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -5px;
	margin-right: -5px;
}
.ne-ui .form-row > [class*="col"] { padding-left: 5px; padding-right: 5px; }

/* ------------------------------------------------ container e input-group ---- */

/* No Bootstrap 3 o .container tem LARGURA FIXA por ponto de quebra (750/970/1170px).
 * Dentro da coluna de conteudo do template, mais estreita que isso, ele empurra tudo
 * para fora: medido na ficha de compra do webshop, o documento saiu com 1370px numa
 * janela de 783. No Bootstrap 5 o container e max-width e encolhe sozinho -- que e o
 * que os modulos esperam, ja que aqui ele esta SEMPRE dentro de uma coluna. */
.ne-ui .container,
.ne-ui .container-fluid {
	width: 100%;
	max-width: 100%;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}

/* No Bootstrap 3 o .input-group e display:table e espera .input-group-addon nas pontas;
 * a nossa marcacao e a do 5 (input-group-text + form-control + btn) e o 3 nao sabe
 * monta-la -- os tres filhos se sobrepoem. Medido no cartao de cupom do webshop: o campo
 * caia uma linha abaixo do grupo e o botao "Aplicar" ficava por cima do icone. */
.ne-ui .input-group {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
}
.ne-ui .input-group > .form-control,
.ne-ui .input-group > .form-select {
	flex: 1 1 auto;
	width: 1%;      /* deixa o campo ceder espaco para o icone e o botao */
	min-width: 0;
}
.ne-ui .input-group > .btn,
.ne-ui .input-group > .input-group-text {
	flex: 0 0 auto;
	white-space: nowrap;
	/* O tema costuma por largura fixa em button (o whiteblue usa 160px). Dentro do
	   grupo o botao tem que caber no seu proprio rotulo, senao engole o campo:
	   medido no whiteblue, o campo do cupom ficava com 96px e cortava o texto. */
	width: auto;
	min-width: 0;
}
/* Cantos: so as pontas do grupo ficam arredondadas. */
.ne-ui .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ne-ui .input-group > :not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ------------------------------------------------------ display e flex ---- */

.ne-ui .d-flex          { display: flex !important; }
.ne-ui .d-inline-flex   { display: inline-flex !important; }
.ne-ui .d-block         { display: block !important; }
.ne-ui .d-none          { display: none !important; }
/* d-grid + gap: o par que o Bootstrap 5 usa para botao de largura cheia empilhado. */
.ne-ui .d-grid          { display: grid !important; }

.ne-ui .flex-row        { flex-direction: row !important; }
.ne-ui .flex-column     { flex-direction: column !important; }
.ne-ui .flex-wrap       { flex-wrap: wrap !important; }

.ne-ui .align-items-center   { align-items: center !important; }
.ne-ui .align-items-start    { align-items: flex-start !important; }
.ne-ui .align-items-end      { align-items: flex-end !important; }
.ne-ui .align-items-stretch  { align-items: stretch !important; }
.ne-ui .align-self-center    { align-self: center !important; }

.ne-ui .justify-content-center   { justify-content: center !important; }
.ne-ui .justify-content-between  { justify-content: space-between !important; }
.ne-ui .justify-content-end      { justify-content: flex-end !important; }
.ne-ui .justify-content-start    { justify-content: flex-start !important; }

/* Erro de digitacao que existia em dois lugares do webshop ("alig"). Custa uma linha
 * cobrir aqui e evita que a caixa desalinhe de novo se reaparecer copiada. */
.ne-ui .alig-items-center { align-items: center !important; }

/* ------------------------------------------------- tamanho e espacamento ---- */

.ne-ui .w-100    { width: 100% !important; }
.ne-ui .w-auto   { width: auto !important; }
.ne-ui .h-100    { height: 100% !important; }
.ne-ui .mx-auto  { margin-left: auto !important; margin-right: auto !important; }

/* A escala do Bootstrap 4/5: 0, 4px, 8px, 16px, 24px, 48px. */
.ne-ui .m-0 { margin: 0 !important; }
.ne-ui .m-1 { margin: 4px !important; }
.ne-ui .m-2 { margin: 8px !important; }
.ne-ui .m-3 { margin: 16px !important; }

.ne-ui .mt-0 { margin-top: 0 !important; }
.ne-ui .mt-1 { margin-top: 4px !important; }
.ne-ui .mt-2 { margin-top: 8px !important; }
.ne-ui .mt-3 { margin-top: 16px !important; }
.ne-ui .mt-4 { margin-top: 24px !important; }

.ne-ui .mb-0 { margin-bottom: 0 !important; }
.ne-ui .mb-1 { margin-bottom: 4px !important; }
.ne-ui .mb-2 { margin-bottom: 8px !important; }
.ne-ui .mb-3 { margin-bottom: 16px !important; }
.ne-ui .mb-4 { margin-bottom: 24px !important; }

.ne-ui .my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.ne-ui .my-2 { margin-top: 8px !important;  margin-bottom: 8px !important; }
.ne-ui .my-3 { margin-top: 16px !important;   margin-bottom: 16px !important; }

.ne-ui .ms-1, .ne-ui .ml-1 { margin-left: 4px !important; }
.ne-ui .ms-2, .ne-ui .ml-2 { margin-left: 8px !important; }
.ne-ui .ms-auto            { margin-left: auto !important; }
.ne-ui .me-1, .ne-ui .mr-1 { margin-right: 4px !important; }
.ne-ui .me-2, .ne-ui .mr-2 { margin-right: 8px !important; }
/* mr-sm-2 e do Bootstrap 4 (no 5 virou me-sm-2) e o webshop usa em dezesseis lugares. */
@media (min-width: 576px) {
	.ne-ui .mr-sm-2, .ne-ui .me-sm-2 { margin-right: 8px !important; }
}

.ne-ui .p-0 { padding: 0 !important; }
.ne-ui .p-1 { padding: 4px !important; }
.ne-ui .p-2 { padding: 8px !important; }
.ne-ui .p-3 { padding: 16px !important; }

.ne-ui .gap-1 { gap: 4px !important; }
.ne-ui .gap-2 { gap: 8px !important; }
.ne-ui .gap-3 { gap: 16px !important; }

/* --------------------------------------------------------------- texto ---- */

.ne-ui .fw-bold    { font-weight: 700 !important; }
.ne-ui .fw-normal  { font-weight: 400 !important; }
.ne-ui .text-start { text-align: left !important; }
.ne-ui .text-end   { text-align: right !important; }
.ne-ui .small      { font-size: .875em; }

/* ----------------------------------------------------------- formulario ---- */

/* Caixa de opcao: no Bootstrap 3 o par input+label sai colado e sem alinhamento.
 * Flex resolve os dois de uma vez, e serve tanto para checkbox quanto para radio. */
.ne-ui .form-check {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}
.ne-ui .form-check-input {
	margin: 0;
	flex: 0 0 auto;
}
.ne-ui .form-check-label {
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}
/* form-check-inline: varias opcoes na mesma linha */
.ne-ui .form-check-inline { display: inline-flex; margin-right: 12px; }

.ne-ui .form-label {
	display: inline-block;
	margin-bottom: 5px;
	font-weight: 600;
}

/* Cor e fundo por heranca de proposito: o mesmo seletor serve o tema claro e o escuro,
 * e a paleta do market (market-escuro.css) continua mandando quando ela existe. */
.ne-ui .form-select {
	display: block;
	width: 100%;
	padding: 6px 10px;
	font-size: inherit;
	line-height: 1.5;
	color: inherit;
	background-color: transparent;
	border: 1px solid rgba(128, 128, 128, .45);
	border-radius: 4px;
}
.ne-ui .form-select-sm { padding: 3px 6px; font-size: .875em; }
.ne-ui .form-control-sm { padding: 3px 6px; font-size: .875em; height: auto; }

.ne-ui .form-range { width: 100%; }

.ne-ui .input-group-text {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border: 1px solid rgba(128, 128, 128, .45);
	border-radius: 4px;
	background-color: rgba(128, 128, 128, .12);
}

/* -------------------------------------------------------------- botoes ---- */

/* btn-outline-* e do Bootstrap 4 em diante. currentColor no lugar de cor fixa: assim
 * o botao acompanha o tema do template em vez de trazer o azul do Bootstrap. */
.ne-ui .btn-outline-primary,
.ne-ui .btn-outline-secondary,
.ne-ui .btn-outline-success,
.ne-ui .btn-outline-danger,
.ne-ui .btn-outline-warning,
.ne-ui .btn-outline-info,
.ne-ui .btn-outline-dark {
	background-color: transparent;
	border: 1px solid currentColor;
}
.ne-ui .btn-outline-primary   { color: var(--mk-accent, #337ab7); }
.ne-ui .btn-outline-secondary { color: #888; }
.ne-ui .btn-outline-success   { color: #1a7f37; }
.ne-ui .btn-outline-danger    { color: #b02a37; }
.ne-ui .btn-outline-warning   { color: #b8860b; }
.ne-ui .btn-outline-info      { color: #2f7dcc; }
.ne-ui .btn-outline-dark      { color: inherit; }

.ne-ui .btn-outline-primary:hover,
.ne-ui .btn-outline-secondary:hover,
.ne-ui .btn-outline-success:hover,
.ne-ui .btn-outline-danger:hover,
.ne-ui .btn-outline-warning:hover,
.ne-ui .btn-outline-info:hover,
.ne-ui .btn-outline-dark:hover {
	background-color: currentColor;
}
/* O texto precisa virar do fundo no hover, e currentColor acabou de virar o fundo. */
.ne-ui .btn-outline-primary:hover > *,
.ne-ui .btn-outline-secondary:hover > *,
.ne-ui .btn-outline-success:hover > *,
.ne-ui .btn-outline-danger:hover > *,
.ne-ui .btn-outline-warning:hover > *,
.ne-ui .btn-outline-info:hover > * { color: var(--mk-panel, #fff); }

/* btn-secondary e do 4 em diante (no 3 o equivalente e btn-default). */
.ne-ui .btn-secondary {
	background-color: #6c757d;
	border-color: #6c757d;
	color: #fff;
}
.ne-ui .btn-secondary:hover { background-color: #5c636a; border-color: #5c636a; color: #fff; }

/* btn-block existe no 3 e SUMIU no 5: definir cobre o default sem estragar os outros. */
.ne-ui .btn-block { display: block; width: 100%; }
/* Quem faz o botao ocupar a faixa e o proprio grid (justify-items: stretch). Forcar
 * width:100% aqui SOMA com a margem do elemento e vaza: medido no whiteblue, a barra
 * de preco (btn-block m-1 dentro de d-grid) saia 4px alem da coluna do card. */
.ne-ui .d-grid > .btn { width: auto; }

/* Botao de fechar do Bootstrap 5 (no 3 e <button class="close">&times;</button>). */
.ne-ui .btn-close {
	border: 0;
	background: transparent;
	font-size: 1.2em;
	line-height: 1;
	opacity: .6;
	cursor: pointer;
	padding: 4px 6px;
	color: inherit;
}
.ne-ui .btn-close::before { content: "\00d7"; }
.ne-ui .btn-close:hover { opacity: 1; }

/* -------------------------------------------------------------- cartao ---- */

/* No Bootstrap 3 o equivalente chama panel; card nao existe. */
.ne-ui .card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--mk-panel, #fff);
	border: 1px solid var(--mk-line, #ddd);
	border-radius: 6px;
	overflow: hidden;
}
.ne-ui .card-body   { flex: 1 1 auto; padding: 14px; }
.ne-ui .card-header {
	padding: 10px 14px;
	border-bottom: 1px solid var(--mk-line, #ddd);
	background-color: var(--mk-soft, rgba(128,128,128,.08));
	font-weight: 600;
}
.ne-ui .card-footer {
	padding: 10px 14px;
	border-top: 1px solid var(--mk-line, #ddd);
	background-color: var(--mk-soft, rgba(128,128,128,.08));
}
.ne-ui .card-title   { margin: 0 0 6px; font-size: 1.05em; font-weight: 600; }
.ne-ui .card-text    { margin: 0 0 6px; }
.ne-ui .card-img-top { width: 100%; display: block; }

/* -------------------------------------------------------------- outros ---- */

/* Paginacao: no Bootstrap 3 o estilo esta em .pagination > li > a, e os nossos modulos
 * escrevem .page-item/.page-link. Sem isto os numeros saem como lista com marcador. */
.ne-ui .pagination { display: flex; flex-wrap: wrap; padding-left: 0; list-style: none; gap: 2px; }
.ne-ui .page-item  { display: inline-block; }
.ne-ui .page-link  {
	display: block;
	padding: 6px 10px;
	border: 1px solid var(--mk-line, #ddd);
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
}

.ne-ui .alert-secondary {
	background-color: var(--mk-soft, #f7f7f7);
	border-color: var(--mk-line, #ddd);
	color: inherit;
}

.ne-ui .bg-success   { background-color: #1a7f37 !important; color: #fff; }
.ne-ui .bg-secondary { background-color: #6c757d !important; color: #fff; }
.ne-ui .bg-danger    { background-color: #b02a37 !important; color: #fff; }

/* No Bootstrap 3 o badge e uma pilula cinza fixa; no 4/5 a cor vem de bg-*. */
.ne-ui .badge {
	display: inline-block;
	padding: .25em .5em;
	font-size: .78em;
	font-weight: 600;
	line-height: 1;
	border-radius: 4px;
	vertical-align: baseline;
}

.ne-ui .modal-dialog-centered {
	display: flex;
	align-items: center;
	min-height: calc(100% - 56px);
}

/* A tabela responsiva do Bootstrap 3 so rola em telas pequenas (media query) e prende
 * a altura; a dos modulos precisa rolar sempre, senao a tabela larga estoura a coluna. */
.ne-ui .table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 0;
}

/* ------------------------------------------- regra crua do tema ---- */

/* O TEMA MANDA EM ELEMENTO CRU, e nao ha como prever o que ele vai mandar.
 * O battleforlorencia, por exemplo, tem em css/main.css:
 *
 *     input, textarea { min-width: 220px; }
 *
 * Os campos dos nossos filtros sao estreitos de proposito -- um "de/ate" de preco cabe
 * em 90px --, entao um minimo global desses estoura a coluna: media na pagina ao vivo,
 * o campo price_max saia 63px para fora do quadro do market.
 *
 * min-width: 0 tambem e o conserto classico de item de flex, que por padrao se recusa a
 * encolher abaixo do proprio conteudo. */
.ne-ui input,
.ne-ui select,
.ne-ui textarea {
	min-width: 0;
	max-width: 100%;
}

/* ------------------------------------------------------------ texto e cor ---- */

.ne-ui .font-weight-bold { font-weight: 700 !important; }
.ne-ui .fs-1 { font-size: 2.2em !important; }
.ne-ui .fs-2 { font-size: 1.8em !important; }
.ne-ui .fs-3 { font-size: 1.5em !important; }
.ne-ui .fs-4 { font-size: 1.28em !important; }
.ne-ui .fs-5 { font-size: 1.1em !important; }
.ne-ui .fs-6 { font-size: 1em !important; }

.ne-ui .text-white     { color: #fff !important; }
.ne-ui .text-dark      { color: #212529 !important; }
.ne-ui .text-secondary { color: #6c757d !important; }
.ne-ui .text-primary   { color: var(--mk-accent, #337ab7) !important; }

/* ------------------------------------------------------------- borda ---- */

.ne-ui .border         { border: 1px solid var(--mk-line, #dee2e6) !important; }
.ne-ui .border-0       { border: 0 !important; }
.ne-ui .border-dark    { border-color: #212529 !important; }
.ne-ui .border-primary { border-color: var(--mk-accent, #337ab7) !important; }

.ne-ui .rounded        { border-radius: 6px !important; }
.ne-ui .rounded-0      { border-radius: 0 !important; }
.ne-ui .rounded-circle { border-radius: 50% !important; }
.ne-ui .rounded-start  { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; }
.ne-ui .rounded-end    { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; }

/* -------------------------------------------------------- imagem e tabela ---- */

.ne-ui .img-fluid { max-width: 100%; height: auto; }

/* No Bootstrap 3 o cabecalho escuro de tabela nao existe. */
.ne-ui .thead-dark th {
	background-color: #343a40;
	color: #fff;
	border-color: #454d55;
}

/* --------------------------------------------------------- aviso e etiqueta ---- */

.ne-ui .alert-primary {
	background-color: rgba(51, 122, 183, .12);
	border-color: rgba(51, 122, 183, .35);
	color: inherit;
}

/* badge-* e do Bootstrap 4 (no 3 chamava label-*, no 5 virou bg-*). */
.ne-ui .badge-success   { background-color: #1a7f37; color: #fff; }
.ne-ui .badge-danger    { background-color: #b02a37; color: #fff; }
.ne-ui .badge-warning   { background-color: #b8860b; color: #fff; }
.ne-ui .badge-info      { background-color: #2f7dcc; color: #fff; }
.ne-ui .badge-secondary { background-color: #6c757d; color: #fff; }
.ne-ui .badge-important { background-color: #b02a37; color: #fff; }