/* ============================================================
   Fale Fácil — Central do Cliente / loja (WHMCS)
   Identidade visual do site novo aplicada ao tema Twenty-One
   ------------------------------------------------------------
   CAMADA 1 — cores, tipografia, botões e componentes.

   Este arquivo é carregado automaticamente pelo WHMCS depois do
   CSS do tema pai, então as regras daqui prevalecem sem precisar
   de !important na maior parte dos casos.

   O tema pai (Twenty-One) usa Bootstrap 4.5.3, jQuery 1.12.4 e
   Font Awesome 5.10.1 — por isso os seletores abaixo são os do
   Bootstrap 4 (.btn-primary, .card, .table…), e não os do
   Bootstrap 3 do tema Six (.panel, .btn-default…).

   A CAMADA 2 (topbar, menu, logo e rodapé iguais aos do site)
   entra no header.tpl e no footer.tpl, em outro pacote.

   Paleta: a mesma do site, extraída da logomarca.
   Fonte: a mesma pilha de sistema do site.
   ============================================================ */

:root{
  --ff-blue:       #205a8c;
  --ff-blue-dark:  #0d4a73;
  --ff-blue-deep:  #093a5c;
  --ff-green:      #7fb232;
  --ff-green-dark: #639026;
  --ff-wa:         #25d366;

  --ff-bg:         #ffffff;
  --ff-bg-soft:    #f4f8fb;
  --ff-bg-mist:    #eaf2f8;
  --ff-ink:        #16324a;
  --ff-ink-soft:   #4a6076;
  --ff-ink-faint:  #8199ac;
  --ff-line:       #dbe6ef;

  --ff-radius:     14px;
  --ff-shadow-sm:  0 1px 3px rgba(13,74,115,.08);
  --ff-shadow-md:  0 8px 24px rgba(13,74,115,.12);
  --ff-shadow-lg:  0 18px 48px rgba(13,74,115,.18);
  --ff-ease:       cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--ff-ink);
  background:var(--ff-bg);
}

h1,h2,h3,h4,h5{
  color:var(--ff-blue-deep);
  font-weight:800;
  line-height:1.2;
}

a{color:var(--ff-blue)}
a:hover,a:focus{color:var(--ff-blue-dark)}

/* Cor de seleção de texto, para o detalhe não destoar */
::selection{background:rgba(127,178,50,.25);color:var(--ff-blue-deep)}

hr{border-top-color:var(--ff-line)}

/* ------------------------------------------------------------
   Botões
   ------------------------------------------------------------
   O site usa botões em cápsula (border-radius 999px), com peso 700
   e um leve deslocamento no hover. Botões dentro de .btn-group e
   de .input-group ficam de fora da cápsula: agrupados, o arredondado
   total quebra o encaixe entre eles.
   ------------------------------------------------------------ */
.btn{
  border-radius:999px;
  font-weight:700;
  border-width:2px;
  transition:transform .25s var(--ff-ease),box-shadow .25s,background-color .25s,border-color .25s,color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}

.btn-group>.btn,
.input-group .btn,
.btn-group-vertical>.btn{border-radius:.25rem;transform:none}
.btn-group>.btn:hover,
.input-group .btn:hover{transform:none}

.btn-primary{
  background-color:var(--ff-blue);
  border-color:var(--ff-blue);
  box-shadow:var(--ff-shadow-sm);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active{
  background-color:var(--ff-blue-dark);
  border-color:var(--ff-blue-dark);
  box-shadow:var(--ff-shadow-md);
}

/* Verde da marca no lugar do verde padrão do Bootstrap */
.btn-success{
  background-color:var(--ff-green);
  border-color:var(--ff-green);
  box-shadow:var(--ff-shadow-sm);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active{
  background-color:var(--ff-green-dark);
  border-color:var(--ff-green-dark);
  box-shadow:0 8px 20px rgba(127,178,50,.35);
}

.btn-outline-primary{color:var(--ff-blue);border-color:var(--ff-blue)}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active{
  background-color:var(--ff-blue);border-color:var(--ff-blue);color:#fff;
}

.btn-secondary,.btn-default{
  background-color:#fff;
  border-color:var(--ff-line);
  color:var(--ff-ink-soft);
}
.btn-secondary:hover,.btn-default:hover{
  background-color:var(--ff-bg-soft);
  border-color:var(--ff-blue);
  color:var(--ff-blue);
}

.btn-link{color:var(--ff-blue)}
.btn-link:hover{color:var(--ff-blue-dark)}

/* Foco visível — acessibilidade. Nunca remover o outline sem repor algo. */
.btn:focus,.btn.focus{box-shadow:0 0 0 4px rgba(32,90,140,.20)}
.btn-success:focus{box-shadow:0 0 0 4px rgba(127,178,50,.25)}

/* ------------------------------------------------------------
   Formulários
   ------------------------------------------------------------ */
.form-control{
  border-color:var(--ff-line);
  border-radius:12px;
  color:var(--ff-ink);
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.form-control:focus{
  border-color:var(--ff-green);
  box-shadow:0 0 0 4px rgba(127,178,50,.15);
}
.form-control::placeholder{color:var(--ff-ink-faint)}
label{color:var(--ff-ink-soft);font-weight:600}
.custom-select:focus{border-color:var(--ff-green);box-shadow:0 0 0 4px rgba(127,178,50,.15)}

/* ------------------------------------------------------------
   Cartões e caixas
   ------------------------------------------------------------ */
.card{
  border:1px solid var(--ff-line);
  border-radius:18px;
  box-shadow:var(--ff-shadow-sm);
}
.card-header{
  background:var(--ff-bg-soft);
  border-bottom-color:var(--ff-line);
  color:var(--ff-blue-deep);
  font-weight:700;
  border-radius:18px 18px 0 0;
}
.card-footer{background:var(--ff-bg-soft);border-top-color:var(--ff-line)}

/* Resquícios de Bootstrap 3 que módulos antigos ainda imprimem */
.panel{border:1px solid var(--ff-line);border-radius:18px;box-shadow:var(--ff-shadow-sm)}
.panel-heading{background:var(--ff-bg-soft);border-bottom-color:var(--ff-line);color:var(--ff-blue-deep);font-weight:700}

/* ------------------------------------------------------------
   Tabelas (faturas, serviços, tickets)
   ------------------------------------------------------------ */
.table{color:var(--ff-ink)}
.table thead th{
  background:var(--ff-bg-soft);
  color:var(--ff-blue-deep);
  border-bottom:2px solid var(--ff-line);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.table td,.table th{border-top-color:var(--ff-line);vertical-align:middle}
.table-hover tbody tr:hover{background:var(--ff-bg-soft)}

/* ------------------------------------------------------------
   Selos, avisos e outros componentes
   ------------------------------------------------------------ */
.badge{border-radius:999px;font-weight:700;letter-spacing:.4px;padding:.35em .8em}
.badge-primary{background-color:var(--ff-blue)}
.badge-success{background-color:var(--ff-green)}
.label-success{background-color:var(--ff-green)}   /* legado do Bootstrap 3 */

.alert{border-radius:14px;border-width:1px}
.alert-info{background:var(--ff-bg-mist);border-color:var(--ff-line);color:var(--ff-blue-deep)}
.alert-success{background:rgba(127,178,50,.12);border-color:var(--ff-green);color:var(--ff-green-dark)}

.list-group-item.active{background-color:var(--ff-blue);border-color:var(--ff-blue)}
.list-group-item-action:hover{background:var(--ff-bg-soft)}

.nav-tabs .nav-link.active{color:var(--ff-blue-deep);border-bottom-color:#fff;font-weight:700}
.nav-tabs .nav-link:hover{border-color:var(--ff-line) var(--ff-line) transparent}

.breadcrumb{background:transparent;padding-left:0}
.breadcrumb a{color:var(--ff-ink-soft);font-weight:600}
.breadcrumb a:hover{color:var(--ff-blue)}

.page-item.active .page-link{background-color:var(--ff-blue);border-color:var(--ff-blue)}
.page-link{color:var(--ff-blue)}
.page-link:hover{color:var(--ff-blue-dark);background:var(--ff-bg-soft)}

.progress-bar{background-color:var(--ff-green)}

.modal-content{border:0;border-radius:20px;box-shadow:var(--ff-shadow-lg)}
.modal-header{border-bottom-color:var(--ff-line)}
.modal-header .modal-title{color:var(--ff-blue-deep);font-weight:800}
.modal-footer{border-top-color:var(--ff-line)}

.dropdown-menu{
  border:1px solid var(--ff-line);
  border-radius:var(--ff-radius);
  box-shadow:var(--ff-shadow-lg);
  padding:8px;
}
.dropdown-item{border-radius:10px;padding:9px 12px}
.dropdown-item:hover,.dropdown-item:focus{background:var(--ff-bg-soft);color:var(--ff-blue)}
.dropdown-item.active,.dropdown-item:active{background:var(--ff-blue)}

.tooltip-inner{background:var(--ff-blue-deep);border-radius:10px;font-size:12.5px}
.tooltip .arrow::before{border-top-color:var(--ff-blue-deep);border-bottom-color:var(--ff-blue-deep)}

/* ------------------------------------------------------------
   Acessibilidade: quem pediu menos movimento não vê o hover subir
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .btn,.btn:hover,.btn:active{transition:none;transform:none}
}


/* ============================================================
   CAMADA 2 — cabeçalho, menu e rodapé
   ------------------------------------------------------------
   Acompanha o header.tpl e o footer.tpl deste tema.
   Os seletores começam por header.header / footer.footer porque é
   assim que o Twenty-One escreve as regras dele — precisamos de
   pelo menos a mesma especificidade para prevalecer.
   ============================================================ */

/* Fundo geral da página: era #f1f1f1, passa a ser o cinza-azulado do site */
body.primary-bg-color{background-color:var(--ff-bg-soft)}

/* ------------------------------------------------------------
   Barra superior (nossa)
   ------------------------------------------------------------ */
header.header .topbar.ff-topbar{
  padding:6px 0;
  background:linear-gradient(90deg,var(--ff-blue-deep),var(--ff-blue-dark));
  color:rgba(255,255,255,.85);
}
header.header .topbar.ff-topbar .btn{
  border:0;
  padding:6px 12px;
  font-size:13.5px;
  color:rgba(255,255,255,.85);
  transform:none;
}
header.header .topbar.ff-topbar .btn:hover{color:#fff;background:rgba(255,255,255,.10)}

.ff-topbar-left,.ff-topbar-right{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ff-topbar-phone strong{font-size:15px;letter-spacing:.3px;color:#fff}
.ff-topbar-phone:hover strong{color:#d3e8b3}
.ff-topbar-site i{font-size:11px;opacity:.8}

/* "Conectado como" e o seletor de conta */
header.header .topbar.ff-topbar .active-client .input-group-text,
header.header .topbar.ff-topbar .active-client .btn{color:rgba(255,255,255,.8)}
header.header .topbar.ff-topbar .active-client .btn.btn-active-client span{
  border-bottom-color:rgba(255,255,255,.55);
}

/* Saldos (botao.tpl): aqui os botões mantêm as cores próprias,
   por isso vêm DEPOIS da regra que pinta os botões da barra de branco. */
.ff-saldos{display:inline-flex;align-items:center;gap:6px;margin-right:10px}
.ff-saldos .list-inline-item{margin-right:0}
header.header .topbar.ff-topbar .ff-saldos .btn{
  padding:5px 13px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  border:0;
}
header.header .topbar.ff-topbar .ff-saldos .btn:hover{color:#fff}
header.header .topbar.ff-topbar .ff-saldos .btn-success{background-color:var(--ff-green)}
header.header .topbar.ff-topbar .ff-saldos .btn-success:hover{background-color:var(--ff-green-dark)}
header.header .topbar.ff-topbar .ff-saldos .btn-primary{background-color:var(--ff-blue)}
header.header .topbar.ff-topbar .ff-saldos .btn-primary:hover{background-color:#2f74ad}
header.header .topbar.ff-topbar .ff-saldos .btn-warning{background-color:#e8a317;color:#3a2a00}
header.header .topbar.ff-topbar .ff-saldos .btn-danger{background-color:#dc3545}
/* O saldo em minutos é informativo (é um <span>), não deve parecer clicável */
.ff-btn-minutos{cursor:default}

@media (max-width:575px){
  .ff-topbar-left,.ff-topbar-right{width:100%;justify-content:center}
  .ff-saldos{margin-right:0}
}

/* ------------------------------------------------------------
   Cabeçalho: logo, busca e carrinho
   ------------------------------------------------------------ */
header.header{
  background-color:#fff;
  border-bottom:1px solid var(--ff-line);
  box-shadow:var(--ff-shadow-sm);
}
header.header .logo-img{max-height:56px;max-width:280px}

/* No tema original o botão do carrinho é cinza-claro sobre branco e
   quase não se enxerga. */
header.header .toolbar .nav-link{
  border-color:var(--ff-line);
  color:var(--ff-ink-soft);
  border-radius:999px;
}
header.header .toolbar .nav-link:hover{
  color:var(--ff-blue);
  border-color:var(--ff-blue);
  background:var(--ff-bg-soft);
}
header.header .toolbar .nav-link .badge{background-color:var(--ff-green);opacity:1}

header.header .search{border-color:var(--ff-line);border-radius:999px}
header.header .search .btn{color:var(--ff-ink-faint)}
header.header .search:focus-within{border-color:var(--ff-green)}

/* ------------------------------------------------------------
   Menu principal
   ------------------------------------------------------------
   O sublinhado em degradê é o mesmo detalhe do menu do site.
   ------------------------------------------------------------ */
header.header .main-navbar-wrapper{
  background:var(--ff-bg-soft);
  border-bottom:1px solid var(--ff-line);
}
header.header .navbar-nav a{
  color:var(--ff-ink);
  font-weight:600;
  border-radius:10px;
  position:relative;
}
header.header .navbar-nav > .nav-item > .nav-link::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:2px;height:2.5px;
  background:linear-gradient(90deg,var(--ff-green),var(--ff-blue));
  border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ff-ease);
}
header.header .navbar-nav > .nav-item:hover > .nav-link::after,
header.header .navbar-nav > .nav-item.active > .nav-link::after{transform:scaleX(1)}
header.header .navbar-nav a:hover{color:var(--ff-blue)}
header.header .dropdown-item.active,
header.header .dropdown-item:active{background-color:var(--ff-blue);color:#fff}

.master-breadcrumb{background-color:var(--ff-bg-mist)}
.master-breadcrumb .breadcrumb a{color:var(--ff-ink-soft)}
.master-breadcrumb .breadcrumb a:hover{color:var(--ff-blue)}

/* ------------------------------------------------------------
   Rodapé (nosso)
   ------------------------------------------------------------ */
footer.footer.ff-footer{
  padding:64px 0 0;
  background-color:#0b3550;
  color:#c8d9e6;
  font-size:14.5px;
}
.ff-footer-grid{padding-bottom:36px}
.ff-footer-col{margin-bottom:28px}
.ff-footer-col h4{
  color:#fff;font-size:15px;font-weight:800;letter-spacing:.5px;margin-bottom:16px;
}
.ff-footer-col ul{list-style:none;margin:0;padding:0}
.ff-footer-col ul li{margin-bottom:9px}
.ff-footer-col a{color:#c8d9e6;transition:color .2s,padding-left .25s var(--ff-ease)}
.ff-footer-col a:hover{color:#a5d360;padding-left:4px;text-decoration:none}
.ff-footer-col address{font-style:normal;margin-bottom:14px}
.ff-footer-col address p{margin-bottom:7px}

.ff-footer-logo{
  max-width:170px;background:#fff;padding:10px 14px;border-radius:12px;margin-bottom:14px;
}
.ff-footer-tagline{color:#9db8ca}
.ff-footer-suporte{color:#9db8ca;font-size:13.5px;line-height:1.5}
.ff-footer-social{display:flex;gap:10px;margin-top:16px}
.ff-footer-social a{
  width:38px;height:38px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;
  transition:background .25s,transform .25s var(--ff-ease);
}
.ff-footer-social a:hover{background:var(--ff-green);transform:translateY(-3px);color:#fff;padding-left:0}

.ff-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:18px 0 24px;
  text-align:center;
}
footer.footer.ff-footer .ff-footer-bottom .btn.ff-footer-lang{
  background-color:rgba(255,255,255,.1);color:#fff;border:0;
  border-radius:999px;padding:6px 16px;font-size:13.5px;
}
footer.footer.ff-footer .ff-footer-bottom .btn.ff-footer-lang:hover{background-color:rgba(255,255,255,.2)}
footer.footer.ff-footer .copyright{margin:16px 0 0;color:#7f9cb0;font-size:13px}

/* ------------------------------------------------------------
   Sobras do azul padrão do tema (#336699) que a camada 1 não pegou
   ------------------------------------------------------------ */
.bg-primary{background-color:var(--ff-blue)!important}
.border-primary{border-color:var(--ff-blue)!important}
.text-primary{color:var(--ff-blue)!important}
.nav-pills .nav-link.active,.nav-pills .show > .nav-link{background-color:var(--ff-blue)}
.custom-control-input:checked ~ .custom-control-label::before{
  border-color:var(--ff-blue);background-color:var(--ff-blue);
}
.custom-range::-webkit-slider-thumb{background-color:var(--ff-blue)}
.custom-range::-moz-range-thumb{background-color:var(--ff-blue)}
.status-onhold,.status-payment-pending,.status-delivered{background-color:var(--ff-blue)}
.domain-pricing .tld-pricing-header div:nth-child(odd){border-color:var(--ff-blue)}


/* ============================================================
   AJUSTE 27/08/2026 — cabeçalho mais largo
   ------------------------------------------------------------
   O .container do Bootstrap trava em 1140px. Numa tela larga, a
   barra superior e o menu ficavam amontoados no meio, com muito
   branco dos dois lados.

   As três faixas do cabeçalho (barra superior, linha da logo e
   linha do menu) passam a usar 96% da tela, com teto de 1320px —
   a mesma medida do cabeçalho do site.

   O corpo da página continua no container padrão: no site o
   cabeçalho também é mais largo que o conteúdo.
   ============================================================ */
header.header .topbar.ff-topbar > .container,
header.header .navbar > .container{
  width:96%;
  max-width:1320px;
}

/* Um pouco mais de respiro entre os itens da barra superior */
.ff-topbar-left,.ff-topbar-right{gap:6px}
header.header .topbar.ff-topbar .btn{padding:6px 14px}


/* ============================================================
   COMPATIBILIDADE BOOTSTRAP 3
   ------------------------------------------------------------
   As páginas próprias da Fale Fácil (segunda via, contratos,
   recargas, revenda…) foram escritas para o tema Six, que usa
   Bootstrap 3. O Twenty-One usa Bootstrap 4, e várias classes
   mudaram de nome ou sumiram.

   Em vez de reescrever milhares de linhas de HTML — e de ter de
   reescrever de novo na próxima página antiga que aparecer —,
   este bloco devolve o comportamento das classes do Bootstrap 3.
   Vale também para o HTML que os HOOKS imprimem (é o caso do
   pull-right do includes/hooks/products.php).

   Só o essencial: o que aparece nas nossas páginas.
   ============================================================ */

/* --- utilitários de posição --- */
.pull-left{float:left!important}
.pull-right{float:right!important}
.center-block{display:block;margin-left:auto;margin-right:auto}
.img-responsive{display:block;max-width:100%;height:auto}

/* --- grade: o Bootstrap 4 tirou o infixo "xs" --- */
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{
  position:relative;width:100%;padding-right:15px;padding-left:15px;
}
.col-xs-1 {flex:0 0 8.333333%; max-width:8.333333%}
.col-xs-2 {flex:0 0 16.666667%;max-width:16.666667%}
.col-xs-3 {flex:0 0 25%;       max-width:25%}
.col-xs-4 {flex:0 0 33.333333%;max-width:33.333333%}
.col-xs-5 {flex:0 0 41.666667%;max-width:41.666667%}
.col-xs-6 {flex:0 0 50%;       max-width:50%}
.col-xs-7 {flex:0 0 58.333333%;max-width:58.333333%}
.col-xs-8 {flex:0 0 66.666667%;max-width:66.666667%}
.col-xs-9 {flex:0 0 75%;       max-width:75%}
.col-xs-10{flex:0 0 83.333333%;max-width:83.333333%}
.col-xs-11{flex:0 0 91.666667%;max-width:91.666667%}
.col-xs-12{flex:0 0 100%;      max-width:100%}

/* --- visibilidade por tamanho de tela --- */
@media (max-width:767.98px){.hidden-xs{display:none!important}}
@media (min-width:768px) and (max-width:991.98px){.hidden-sm{display:none!important}}
@media (min-width:992px) and (max-width:1199.98px){.hidden-md{display:none!important}}
@media (min-width:1200px){.hidden-lg{display:none!important}}
.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none!important}
@media (max-width:767.98px){.visible-xs{display:block!important}}
@media (min-width:768px) and (max-width:991.98px){.visible-sm{display:block!important}}
@media (min-width:992px) and (max-width:1199.98px){.visible-md{display:block!important}}
@media (min-width:1200px){.visible-lg{display:block!important}}

/* --- painel: virou "card" no Bootstrap 4 --- */
.panel{background:#fff;margin-bottom:1.5rem}
.panel-body{padding:1.25rem}
.panel-heading{padding:.9rem 1.25rem;border-radius:18px 18px 0 0}
.panel-footer{padding:.9rem 1.25rem;background:var(--ff-bg-soft);border-top:1px solid var(--ff-line);border-radius:0 0 18px 18px}
.panel-title{margin:0;font-size:16px;font-weight:700;color:var(--ff-blue-deep)}
.panel-primary > .panel-heading{background:var(--ff-blue);color:#fff}
.panel-primary > .panel-heading .panel-title{color:#fff}

/* --- caixa "well" --- */
.well{
  padding:1.25rem;background:var(--ff-bg-soft);
  border:1px solid var(--ff-line);border-radius:14px;margin-bottom:1.25rem;
}

/* --- selo: "label" virou "badge" --- */
.label{
  display:inline-block;padding:.35em .8em;font-size:75%;font-weight:700;
  line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;
  border-radius:999px;color:#fff;
}
.label-default{background-color:var(--ff-ink-faint)}
.label-primary{background-color:var(--ff-blue)}
.label-success{background-color:var(--ff-green)}
.label-info{background-color:#17a2b8}
.label-warning{background-color:#e8a317;color:#3a2a00}
.label-danger{background-color:#dc3545}

/* --- formulários --- */
.control-label{font-weight:600;color:var(--ff-ink-soft);margin-bottom:.4rem}
.help-block{display:block;margin-top:.3rem;font-size:80%;color:var(--ff-ink-faint)}
.input-group-addon{
  display:flex;align-items:center;padding:.375rem .75rem;
  background:var(--ff-bg-soft);border:1px solid var(--ff-line);
  border-radius:12px 0 0 12px;color:var(--ff-ink-soft);font-size:.95rem;white-space:nowrap;
}
.input-group-addon + .form-control{border-top-left-radius:0;border-bottom-left-radius:0}
.form-horizontal .control-label{margin-bottom:0;padding-top:calc(.375rem + 1px)}
@media (min-width:768px){.form-horizontal .control-label{text-align:right}}
.checkbox,.radio{position:relative;display:block;margin:.5rem 0}
.checkbox label,.radio label{padding-left:1.5rem;font-weight:400;margin-bottom:0}
.checkbox input[type="checkbox"],.radio input[type="radio"]{position:absolute;margin-left:-1.5rem;margin-top:.3rem}

/* --- botão extra-pequeno: o Bootstrap 4 tirou o btn-xs --- */
.btn-xs{padding:.15rem .6rem;font-size:.75rem;line-height:1.5;border-width:1px}

/* --- setinha dos menus antigos --- */
.caret{
  display:inline-block;width:0;height:0;margin-left:.3em;vertical-align:middle;
  border-top:4px dashed;border-right:4px solid transparent;border-left:4px solid transparent;
}