/* ==========================================================================
   DESIGN TOKENS — "Dossiê Editorial Quente"
   Vindo de design-tokens.css (raiz do repo, removido depois deste merge —
   sem link algum apontando pra ele, era um arquivo morto). Colado aqui
   (não movido pra um .css separado) porque esta é a ÚNICA folha de estilo
   que qualquer página do app carrega (header.php:27) — um arquivo à parte
   só significaria mais uma tag <link> pra manter sincronizada com esta.
   Trouxe só a paleta LIGHT (a variante DARK do arquivo original é pra
   tela de leitura densa tipo relatório/dossiê, sem equivalente aqui) e só
   as CUSTOM PROPERTIES — não os seletores genéricos de elemento do
   arquivo original (body/h1/h2/h3/table/input/button/blockquote/dialog).
   Esses seletores aplicariam esse visual editorial no app inteiro (cada
   tabela, input, botão de cada tela), muito além do que foi pedido
   ("refazer o visual do MENU") — só as variáveis abaixo são inertes até
   alguma regra referenciá-las via var(...), então colar só elas aqui não
   muda nada sozinho. As regras do menu logo abaixo (.left_col e afins)
   são as que de fato aplicam esses tokens. */
:root {
  --bg:        #F5F2EC;
  --paper:     #FFFFFF;
  --paper2:    #FBF9F4;
  --tint:      #FBF3D8;
  --tint2:     #F7ECC4;

  --ink:       #0E0D0B;
  --ink2:      #5D574E;
  --ink3:      #8A8378;

  --line:      #E4DED2;
  --line2:     #ECE7DC;

  --amber:       #FBBA00;
  --amber-deep:  #E8A800;

  --pos:       #5C7A47;
  --neg:       #C74E32;

  --font-heading: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Source Code Pro', 'SF Mono', monospace;

  --radius-pill: 999px;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;

  --shadow-crisp: 0 6px 20px rgba(14, 13, 11, .16);
  --transition-fast: all .2s ease-out;
}

html , body{

 height:100%;

}
 
.full-width {
	
 width:100%;
 
 }
 
.full-height{
 height:100%;
 }

.daterangepicker .ranges li {
    color: #73879C
}
.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
    background: #536A7F;
    border: 1px solid #536A7F;
    color: #fff
}
.daterangepicker .input-mini {
    background-color: #eee;
    border: 1px solid #ccc;
    box-shadow: none !important
}
.daterangepicker .input-mini.active {
    border: 1px solid #ccc
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    font-size: 12px;
    padding: 1px;
    height: auto;
    margin: 0;
    cursor: default;
    height: 30px;
    border: 1px solid #ADB2B5;
    line-height: 30px;
    border-radius: 0px !important
}
.daterangepicker select.monthselect {
    margin-right: 2%
}
.daterangepicker td.in-range {
    background: #E4E7EA;
    color: #73879C
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #536A7F;
    color: #fff
}
.daterangepicker th.available:hover {
    background: #eee;
    color: #34495E
}
.daterangepicker:before,
.daterangepicker:after {
    content: none
}
.daterangepicker .calendar.single {
    margin: 0 0 4px 0
}
.daterangepicker .calendar.single .calendar-table {
    width: 224px;
    padding: 0 0 4px 0 !important
}
.daterangepicker .calendar.single .calendar-table thead tr:first-child th {
    padding: 8px 5px
}
.daterangepicker .calendar.single .calendar-table thead th {
    border-radius: 0
}
.daterangepicker.picker_1 {
    color: #fff;
    background: #34495E
}
.daterangepicker.picker_1 .calendar-table {
    background: #34495E
}
.daterangepicker.picker_1 .calendar-table thead tr {
    background: #213345
}
.daterangepicker.picker_1 .calendar-table thead tr:first-child {
    background: #1ABB9C
}
.daterangepicker.picker_1 .calendar-table td.off {
    background: #34495E;
    color: #999
}
.daterangepicker.picker_1 .calendar-table td.available:hover {
    color: #34495E
}
.daterangepicker.picker_2 .calendar-table thead tr {
    color: #1ABB9C
}
.daterangepicker.picker_2 .calendar-table thead tr:first-child {
    color: #73879C
}
.daterangepicker.picker_3 .calendar-table thead tr:first-child {
    color: #fff;
    background: #1ABB9C
}
.daterangepicker.picker_4 .calendar-table thead tr:first-child {
    color: #fff;
    background: #34495E
}
.daterangepicker.picker_4 .calendar-table td,
.daterangepicker.picker_4 .calendar-table td.off {
    background: #ECF0F1;
    border: 1px solid #fff;
    border-radius: 0
}
.daterangepicker.picker_4 .calendar-table td.active {
    background: #34495E
}
.calendar-exibit .show-calendar {
    float: none;
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    overflow: hidden
}
.calendar-exibit .show-calendar .calendar {
    margin: 0 0 4px 0
}
.calendar-exibit .show-calendar.picker_1 {
    background: #34495E
}
.calendar-exibit .calendar-table {
    padding: 0 0 4px 0
}
.left_col {
    background: var(--paper2);
    border-right: 1px solid var(--line);
}
.nav-sm .container.body .col-md-3.left_col {
    min-height: 100%;
    width: 70px;
    padding: 0;
    z-index: 9999;
    position: absolute
}
.nav-sm .container.body .col-md-3.left_col.menu_fixed {
    position: fixed;
    height: 100%
}
.nav-sm .container.body .col-md-3.left_col .mCSB_container,
.nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
    overflow: visible
}
.nav-sm .hidden-small {
    visibility: hidden
}
.nav-sm .container.body .right_col {
    padding: 10px 20px;
    margin-left: 70px;
    z-index: 2
}
.nav-sm .navbar.nav_title {
    width: 70px
}
.nav-sm .navbar.nav_title a span {
    display: none
}
/* Marca compacta exibida apenas no menu recolhido. */
.nav-sm .navbar.nav_title a img.site_title-short {
    display: block;
}
/* A regra genérica "a span" acima já esconde o separador "|" (é um
   span); a logo da Ampfy é uma <img>, então precisa da própria regra. */
.nav-sm .navbar.nav_title a img.site_title-brand-logo {
    display: none;
}
.nav-sm .navbar.nav_title .site_title {
    justify-content: center;
    padding-left: 0;
}
.site_title-short {
    display: none;
    width: 26px;
    height: auto;
    flex: 0 0 auto;
}
.site_title-brand-logo {
    /* SVG usa fill="currentColor", mas isso só herda a cor da página
       quando o <svg> é inline no HTML — carregado via <img> (mais simples
       e mais seguro aqui), ele renderiza no preto padrão do próprio
       arquivo, o que já combina com o fundo claro do menu. */
    height: 20px;
    width: auto;
    flex: 0 0 auto;
}
.site_title-divider {
    color: var(--line);
    font-weight: 400;
}
.nav-sm .main_container .top_nav {
    display: block;
    margin-left: 70px;
    z-index: 2
}
.nav-sm .nav.side-menu li a {
    /* display:block (não o flex herdado de .nav>li>a) — no menu
       colapsado (rail de 70px), o ícone precisa empilhar ACIMA do rótulo
       (ver .nav-sm .nav.side-menu li a i, width:100% + margin-bottom),
       não ficar lado a lado numa linha. O flyout (submenu que abre ao
       lado, mais abaixo) tem sua própria regra restaurando display:flex,
       porque ali sim o layout é em linha, com seta. */
    display: block;
    text-align: center !important;
    font-weight: 400;
    font-size: 10px;
    padding: 10px 5px
}
/* Mesma borda direita âmbar removida acima (.nav.side-menu>li.active),
   agora pro equivalente no menu colapsado (nav-sm) — pra não sobrar num
   estado e sumir no outro. */
.nav-sm ul.nav.child_menu ul,
.nav-sm .nav.side-menu li.active-sm ul ul {
    position: static;
    width: 200px;
    background: none
}
.nav-sm>.nav.side-menu>li.active-sm>a {
    /* --ink (não --amber) de propósito: texto amber sobre o fundo claro
       novo do menu (--paper2) tem contraste fraco — o amber já entra
       forte na borda de 4px logo acima, não precisa repetir no texto. */
    color: var(--ink) !important;
    font-weight: 600;
}
.nav-sm .nav.side-menu li a i.toggle-up {
    display: none !important
}
.nav-sm .nav.side-menu li a i {
    font-size: 25px !important;
    text-align: center;
    width: 100% !important;
    margin-bottom: 5px
}
.nav-sm ul.nav.child_menu {
    left: 100%;
    position: absolute;
    top: 0;
    width: 210px;
    z-index: 4000;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-crisp);
    display: none
}
.nav-sm ul.nav.child_menu li {
    padding: 0 10px
}
.nav-sm ul.nav.child_menu li a {
    /* Restaura o flex de .nav>li>a (mais específico que o display:block
       do rail colapsado, ver .nav-sm .nav.side-menu li a acima) — aqui é
       um flyout normal, com rótulo + seta lado a lado, igual ao menu
       expandido. */
    display: flex;
    align-items: center;
    text-align: left !important
}
.nav-sm .profile {
    display: none
}
/* Portal do flyout de 1º nível no menu colapsado (ver custom.js,
   closeFlyoutPortal/init_sidebar) — o <ul class="child_menu"> é movido
   pra cá em tempo de execução, porque o wrapper que rola o menu
   verticalmente (.left_col.scroll-view, mais abaixo neste arquivo) tem
   overflow-x:hidden e corta um position:absolute;left:100% que tentasse
   escapar de dentro dele. Aqui fora ele só precisa de position:fixed —
   top/left vêm inline (JS, calculados a partir do <a> clicado). */
.side-menu-flyout-portal {
    position: fixed;
    /* 4000 (mesmo valor de ".nav-sm ul.nav.child_menu", o normal deste
       flyout dentro do rail) não é suficiente aqui fora: a barra de
       navegação sticky do calendário (.fc-toolbar, mais abaixo neste
       arquivo) sobe pra z-index:10021 ao rolar, e o portal — sendo
       irmão do <body>, fora da pilha normal do sidebar — perdia pra ela.
       10030 é o mesmo nível já usado por .side-menu-tooltip logo acima,
       que tem o mesmo problema (também mora fora do rail) e já resolve. */
    z-index: 10030;
    display: none;
}
/* Neutraliza o left:100%/position:absolute de ".nav-sm ul.nav.child_menu"
   (o <ul> preserva as classes de antes de ser movido) — quem posiciona
   agora é o portal acima, o <ul> só precisa preencher essa caixa. */
.side-menu-flyout-portal > ul.nav.child_menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
}
.menu_section {
    margin-bottom: 35px
}
.menu_section h3 {
    padding-left: 15px;
    color: var(--ink3);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 0;
    margin-top: 0;
    text-shadow: none
}
.menu_section>ul {
    margin-top: 10px
}
.menu-section-areas {
    margin-bottom: 0;
}
.menu-section-clients > ul {
    margin-top: 0;
}
.profile_pic {
    width: 35%;
    float: left
}
.img-circle.profile_img {
    width: 70%;
    background: #fff;
    margin-left: 15%;
    z-index: 1000;
    position: inherit;
    margin-top: 10px;
    border: 1px solid rgba(52, 73, 94, 0.44);
    padding: 4px
}
.profile_info {
    padding: 10px;
    width: 65%;
    float: left
}
.profile_info span {
    font-size: 13px;
    line-height: 30px;
    color: var(--ink3)
}
.profile_info h2 {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
    font-weight: 300
}
.profile.img_2 {
    text-align: center
}
.profile.img_2 .profile_pic {
    width: 100%
}
.profile.img_2 .profile_pic .img-circle.profile_img {
    width: 50%;
    margin: 10px 0 0
}
.profile.img_2 .profile_info {
    padding: 15px 10px 0;
    width: 100%;
    margin-bottom: 10px;
    float: left
}
.main_menu span.fa {
    /* Sem float — o pai (.nav>li>a) agora é flex e cuida do
       posicionamento; float não ajudava mais, só arriscava o texto
       "abraçar" a seta de um jeito estranho quando quebra linha.
       margin-left:auto empurra só a seta pra direita, sem precisar de
       justify-content:space-between no pai (que espalharia ícone e texto
       também, já que não têm um wrapper próprio). */
    flex: 0 0 auto;
    margin-left: auto;
    text-align: center;
    font-size: 10px;
    min-width: inherit;
    color: var(--ink3)
}
/* Rótulo do item de menu (ver sidebar.php) — precisa do próprio wrapper
   porque texto-overflow:ellipsis não funciona direto num <a> flex com
   vários filhos (ícone/seta), só num bloco só de texto. flex:1 pra
   ocupar o espaço disponível entre ícone e seta (empurrando a seta pro
   fim sozinho, sem precisar de space-between no pai); min-width:0
   sobrescreve o padrão dos flex items (min-width:auto), que impediria o
   texto de encolher abaixo do próprio tamanho e nunca truncar. */
.side-menu-icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    color: var(--ink3);
}
.nav-sm .nav.side-menu > li > a > .side-menu-icon {
    margin: 0 auto;
}
.side-menu-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Itens sem submenu exibem o nome completo, inclusive em várias linhas. */
#sidebar-menu li:not(:has(> ul.child_menu)) > a > .side-menu-label {
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: clip;
}
/* Colapsado: só ícone, sem exceção pra item sem submenu (a regra acima,
   #443, deixa esses com nome completo em várias linhas no menu expandido
   — aqui vence por especificidade/ordem só na propriedade "display").
   O nome completo vira tooltip no hover do <a> (ver footer.php), porque
   com o rótulo escondido não sobra nenhuma pista visual do que é cada
   ícone. */
.nav-sm .nav.side-menu > li > a > .side-menu-label {
    display: none;
}
/* Tooltip do nome completo (ver footer.php) — só some quando o rótulo do
   menu trunca. Compacto e escuro (não o cartão claro de .resource-
   tooltip) porque aqui é só uma linha de texto, sem outras informações. */
.side-menu-tooltip {
    display: none;
    position: absolute;
    z-index: 10030;
    max-width: 280px;
    padding: 6px 10px;
    background: var(--ink);
    color: var(--paper2);
    border-radius: 6px;
    box-shadow: var(--shadow-crisp);
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    pointer-events: none;
}
.active a span.fa {
    text-align: right !important;
    margin-right: 4px
}
.nav-sm .menu_section {
    margin: 0
}
.nav-sm span.fa,
.nav-sm .menu_section h3 {
    display: none
}
.nav-sm li li span.fa {
    display: inline-block
}
.nav_menu {
    float: left;
    background: var(--paper2);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    min-height: 44px;
    margin-bottom: 0;
    width: 100%;
    position: relative
}
@media (min-width: 480px) {
    .nav_menu {
        position: static
    }
}
.nav-md .container.body .col-md-3.left_col {
    min-height: 100%;
    width: 230px;
    padding: 0;
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    z-index: 1
}
.nav-md .container.body .col-md-3.left_col.menu_fixed {
    height: 100%;
    position: fixed
}
body .container.body .right_col {
    background: #F7F7F7
}
body.calendar-page,
body.calendar-page .container.body .right_col {
    background: var(--bg);
}
/* .right_col não tem padding-bottom nenhum por padrão (regra genérica
   ".nav-md .container.body .right_col", logo abaixo neste arquivo, é
   "10px 20px 0" — 0 embaixo), então a página terminava exatamente colada
   no fim do conteúdo real do calendário. Mesmo valor do
   .right_col.admin-page (32px), pra respirar igual nas duas. */
body.calendar-page .container.body .right_col {
    padding-bottom: 32px;
}
/* Cabeçalho da Pauta por Cliente (allocation/calendarByClient.php) — só
   esta página tem esse header (a pauta normal vai direto pros filtros).
   Mesmos tokens/tipografia do resto do app (título leve maiúsculo,
   eyebrow mono), mas escritos soltos aqui em vez de reaproveitar
   .reports-eyebrow/.reports-page (aquelas regras são escopadas em
   .reports-page, que muda padding/fundo do .right_col de um jeito que
   colidiria com o resto da pauta). */
.calendar-by-client-header { padding: 16px 0 20px; }
.calendar-by-client-header p:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--ink2); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px; }
.calendar-by-client-header h1 { font-family: var(--font-heading); font-weight: 300; text-transform: uppercase; letter-spacing: .09em; color: var(--ink); font-size: 28px; margin: 0 0 10px; }
.calendar-by-client-header p:last-child { color: var(--ink2); margin: 0; line-height: 1.6; max-width: 640px; }
.nav-md .container.body .right_col {
    padding: 10px 20px 0;
    margin-left: 230px
}
.nav_title {
    width: 230px;
    float: left;
    background: var(--paper2);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    height: 57px
}
@media (max-width: 991px) {
    .nav-md .container.body .right_col,
    .nav-md .container.body .top_nav {
        width: 100%;
        margin: 0
    }
    .nav-md .container.body .col-md-3.left_col {
        display: none
    }
    .nav-md .container.body .right_col {
        width: 100%;
        padding-right: 0
    }
    .right_col {
        padding: 10px !important
    }
}
@media (max-width: 1200px) {
    .x_title h2 {
        width: 62%;
        font-size: 17px
    }
    .tile,
    .graph {
        zoom: 85%;
        height: inherit
    }
}
@media (max-width: 1270px) and (min-width: 192px) {
    .x_title h2 small {
        display: none
    }
}
.left_col .mCSB_scrollTools {
    width: 6px
}
.left_col .mCSB_dragger {
    max-height: 400px !important
}
.blue {
    color: #3498DB
}
.purple {
    color: #9B59B6
}
.green {
    color: #1ABB9C
}
.aero {
    color: #9CC2CB
}
.red {
    color: #E74C3C
}
.dark {
    color: #34495E
}
.border-blue {
    border-color: #3498DB !important
}
.border-purple {
    border-color: #9B59B6 !important
}
.border-green {
    border-color: #1ABB9C !important
}
.border-aero {
    border-color: #9CC2CB !important
}
.border-red {
    border-color: #E74C3C !important
}
.border-dark {
    border-color: #34495E !important
}
.bg-white {
    background: #fff !important;
    border: 1px solid #fff !important;
    color: #73879C
}
.bg-green {
    background: #1ABB9C !important;
    border: 1px solid #1ABB9C !important;
    color: #fff
}
.bg-red {
    background: #E74C3C !important;
    border: 1px solid #E74C3C !important;
    color: #fff
}
.bg-blue {
    background: #3498DB !important;
    border: 1px solid #3498DB !important;
    color: #fff
}
.bg-orange {
    background: #F39C12 !important;
    border: 1px solid #F39C12 !important;
    color: #fff
}
.bg-purple {
    background: #9B59B6 !important;
    border: 1px solid #9B59B6 !important;
    color: #fff
}
.bg-blue-sky {
    background: #50C1CF !important;
    border: 1px solid #50C1CF !important;
    color: #fff
}
.container {
    width: 100%;
    padding: 0
}
.navbar-nav>li>a,
.navbar-brand,
.navbar-nav>li>a {
    color: #fff !important
}
.top_nav .nav>li>a:focus,
.top_nav .nav>li>a:hover,
.top_nav .nav .open>a,
.top_nav .nav .open>a:focus,
.top_nav .nav .open>a:hover {
    background: #D9DEE4
}
body {
    color: #73879C;
    background: #f8f8f8;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.471
}
.main_container .top_nav {
    display: block;
    margin-left: 230px
}
.no-padding {
    padding: 0 !important
}
.page-title {
    width: 100%;
    height: 65px;
    padding: 10px 0
}
.page-title .title_left {
    width: 45%;
    float: left;
    display: block
}
.page-title .title_left h3 {
    margin: 9px 0
}
.page-title .title_right {
    width: 55%;
    float: left;
    display: block
}
.page-title .title_right .pull-right {
    margin: 10px 0
}
.fixed_height_320 {
    height: 320px
}
.fixed_height_390 {
    height: 390px
}
.fixed_height_200 {
    height: 200px
}
.overflow_hidden {
    overflow: hidden
}
.progress-bar-dark {
    background-color: #34495E !important
}
.progress-bar-gray {
    background-color: #BDC3C7 !important
}
table.no-margin .progress {
    margin-bottom: 0
}
.main_content {
    padding: 10px 20px
}
.col-md-55 {
    width: 50%;
    margin-bottom: 10px
}
@media (min-width: 768px) {
    .col-md-55 {
        width: 20%
    }
}
@media (min-width: 992px) {
    .col-md-55 {
        width: 20%
    }
}
@media (min-width: 1200px) {
    .col-md-55 {
        width: 20%
    }
}
@media (min-width: 192px) and (max-width: 1270px) {
    table.tile_info span.right {
        margin-right: 7px;
        float: left
    }
}
.center-margin {
    margin: 0 auto;
    float: none !important
}
.col-md-55,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
    position: relative;
    min-height: 1px;
    float: left;
    padding-right: 10px;
    padding-left: 10px
}
.row {
    margin-right: -10px;
    margin-left: -10px
}
.grid_slider .col-md-6 {
    padding: 0 40px
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 10px;
    margin-bottom: 10px
}
a {
    color: #2b2f33;
    text-decoration: none
}
a,
a:visited,
a:focus,
a:active,
:visited,
:focus,
:active,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: 0
}
a:hover,
a:focus {
    text-decoration: none
}
.navbar {
    margin-bottom: 0
}
.navbar-header {
    background: #34495E
}
.navbar-right {
    margin-right: 0
}
.top_nav .navbar-right {
    margin: 0;
    width: 70%;
    float: right
}
.top_nav .navbar-right li {
    display: inline-block;
    float: right;
    position: static
}
@media (min-width: 480px) {
    .top_nav .navbar-right li {
        position: relative
    }
}
.top_nav .dropdown-menu li {
    width: 100%
}
.top_nav .dropdown-menu li a {
    width: 100%;
    padding: 12px 20px
}
.top_nav li a i {
    font-size: 15px
}
.navbar-static-top {
    position: fixed;
    top: 0;
    width: 100%
}
.sidebar-header {
    border-bottom: 0;
    margin-top: 46px
}
.sidebar-header:first-of-type {
    margin-top: 0
}
.nav.side-menu>li {
    position: relative;
    display: block;
    cursor: pointer
}
.nav.side-menu>li>a {
    margin-bottom: 6px
}
.nav.side-menu>li>a:hover {
    color: var(--ink) !important
}
.nav.side-menu>li>a:hover,
.nav>li>a:focus {
    text-decoration: none;
    background: transparent
}
.nav.child_menu {
    display: none
}
.nav.child_menu li:hover,
.nav.child_menu li.active {
    background-color: var(--tint)
}
.nav.child_menu li {
    padding-left: 36px
}
/* Bolinha + linha vertical de conexão da árvore de Áreas/Grupos — volta
   da versão original (o border-left simples ficou fraco/pouco visível
   demais como guia). Usa posicionamento absoluto por item (cada <li> já
   é position:relative por conta da própria classe .nav do Bootstrap). */
.nav-md ul.nav.child_menu li:after {
    /* --line2 — o tom de borda mais claro que existe nos tokens. Testado
       antes (--ink3, depois um cinza intermediário); dessa vez é pra
       valer, o mais claro disponível. */
    border-left: 1px solid var(--line2);
    bottom: 0;
    content: "";
    left: 27px;
    position: absolute;
    top: 0
}
.nav-md ul.nav.child_menu li:last-child::after {
  bottom: 50%;
}
.nav.side-menu>li>a,
.nav.child_menu>li>a {
    color: var(--ink2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    font-weight: 500
}
.nav.child_menu li li:hover,
.nav.child_menu li li.active {
    background: none
}
.nav.child_menu li li a:hover,
.nav.child_menu li li a.active {
    color: var(--ink)
}
.nav>li>a {
    /* flex (não block) pra manter a seta (.fa.fa-chevron-down) alinhada
       verticalmente mesmo quando o texto quebra linha (ex.: "DATA
       INTELLIGENCE" no mono/uppercase) — com float:right (a técnica
       antiga de .main_menu span.fa) a seta descia junto com a 2ª linha
       do texto e ficava desalinhada. */
    /* justify-content: flex-start (não space-between) de propósito — o
       ícone (<i>) e o texto do item são dois flex items separados (sem
       wrapper próprio no HTML); space-between os espalharia pela largura
       toda em vez de manter os dois juntos à esquerda. A seta é quem
       empurra pra direita sozinha, via margin-left:auto (ver
       .main_menu span.fa). */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 13px 15px 12px
}
/* Borda direita âmbar removida a pedido — o item ativo/atual já fica
   marcado pelo fundo --tint em .nav li.current-page logo abaixo. */
.nav li.current-page {
    background: var(--tint)
}
.nav li li li.current-page {
    background: none
}
.nav li li.current-page a {
    color: var(--ink)
}
.nav.side-menu>li.active>a {
    /* Flat em vez do degradê antigo (#6a6c6f/#4c4e50) — os tokens tratam
       sombra como recurso raro e nítido, nunca soft-blur/gradiente. */
    text-shadow: none;
    background: var(--tint2);
    box-shadow: none
}
.navbar-brand,
.navbar-nav>li>a {
    font-weight: 500;
    color: #ECF0F1 !important;
    margin-left: 0 !important;
    line-height: 32px
}
.site_title {
    /* Era um <img> da logo — virou texto (ver sidebar.php), daí o
       flex+gap pra alinhar ícone e texto numa linha só sem depender de
       espaço em branco entre as tags, e a tipografia de masthead editorial
       (mono seria pesado demais aqui; heading fino combina mais com uma
       marca) em vez do font-size solto que só existia pra caber a logo. */
    display: flex;
    align-items: center;
    gap: 9px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: var(--font-heading);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    width: 100%;
    color: var(--ink) !important;
    margin-left: 0 !important;
    height: 57px;
    margin: 0;
    padding-left: 14px
}
.site_title:hover,
.site_title:focus {
    text-decoration: none
}
.nav.navbar-nav>li>a {
    color: #515356 !important
}
.nav.top_menu>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #34495E !important
}

.nav>li>a:hover,
.nav>li>a:focus {
    background-color: transparent
}
.top_search {
    padding: 0
}
.top_search .form-control {
    border-right: 0;
    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
    border-radius: 25px 0px 0px 25px;
    padding-left: 20px;
    border: 1px solid rgba(221, 226, 232, 0.49)
}
.top_search .form-control:focus {
    border: 1px solid rgba(221, 226, 232, 0.49);
    border-right: 0
}
.top_search .input-group-btn button {
    border-radius: 0px 25px 25px 0px;
    border: 1px solid rgba(221, 226, 232, 0.49);
    border-left: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    color: #93A2B2;
    margin-bottom: 0 !important
}
.toggle {
    float: left;
    margin: 0;
    padding-top: 16px;
    width: 70px
}
.toggle a {
    padding: 15px 15px 0;
    margin: 0;
    cursor: pointer
}
.toggle a i {
    font-size: 26px
}
.top_nav .toggle {
    padding: 0;
}
.top_nav .toggle #menu_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 0 6px;
    padding: 0;
    color: var(--ink2);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .2s ease-out;
}
.top_nav .toggle #menu_toggle:hover {
    color: var(--ink);
}
.top_nav .toggle #menu_toggle:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: -4px;
}
.nav.child_menu>li>a {
    /* Repete a mesma cor/família da 1ª declaração deste seletor (linha
       ~833) — essa regra vem depois no arquivo e venceria no empate de
       especificidade, sobrescrevendo com a cor antiga se não repetisse
       aqui. */
    color: var(--ink2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    padding: 9px
}
.panel_toolbox {
    float: right;
    min-width: 70px
}
.panel_toolbox>li {
    float: left;
    cursor: pointer
}
.panel_toolbox>li>a {
    padding: 5px;
    color: #C5C7CB;
    font-size: 14px
}
.panel_toolbox>li>a:hover {
    background: #F5F7FA
}
.line_30 {
    line-height: 30px
}
.main_menu_side {
    padding: 0
}
.bs-docs-sidebar .nav>li>a {
    display: block;
    padding: 4px 6px
}
footer {
    background: #fff;
    padding: 15px 20px;
    display: block
}
.nav-sm footer {
    margin-left: 70px
}
.footer_fixed footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%
}
@media (min-width: 768px) {
    .footer_fixed footer {
        margin-left: 0
    }
}
@media (min-width: 768px) {
    .footer_fixed .nav-sm footer {
        margin-left: 0
    }
}
.tile-stats.sparkline {
    padding: 10px;
    text-align: center
}
.jqstooltip {
    background: #34495E !important;
    width: 30px !important;
    height: 22px !important;
    text-decoration: none
}
.tooltip {
    display: block !important
}
.tiles {
    border-top: 1px solid #ccc;
    margin-top: 15px;
    padding-top: 5px;
    margin-bottom: 0
}
.tile {
    overflow: hidden
}
.top_tiles {
    margin-bottom: 0
}
.top_tiles .tile h2 {
    font-size: 30px;
    line-height: 30px;
    margin: 3px 0 7px;
    font-weight: bold
}
article.media {
    width: 100%
}
*,
*:before,
*:after {
    box-sizing: border-box
}
#integration-list {
    width: 100%;
    margin: 0 auto;
    display: table
}
#integration-list ul {
    padding: 0;
    margin: 20px 0;
    color: #555
}
#integration-list ul>li {
    list-style: none;
    border-top: 1px solid #ddd;
    display: block;
    padding: 15px;
    overflow: hidden
}
#integration-list ul:last-child {
    border-bottom: 1px solid #ddd
}
#integration-list ul>li:hover {
    background: #efefef
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer
}
.expand h2 {
    width: 85%;
    float: left
}
h2 {
    font-size: 30px;
    font-weight: 400
}
#left,
#right {
    display: table
}
#sup {
    display: table-cell;
    vertical-align: middle;
    width: 80%
}
.detail a {
    text-decoration: none;
    color: #C0392B;
    border: 1px solid #C0392B;
    padding: 6px 10px 5px;
    font-size: 13px;
    margin-right: 7px
}
.detail {
    margin: 10px 0 10px 0px;
    display: none;
    line-height: 22px;
    height: 150px
}
.detail span {
    margin: 0
}
.right-arrow {
    width: 10px;
    float: right;
    font-weight: bold;
    font-size: 20px
}
.accordion .panel {
    margin-bottom: 5px;
    border-radius: 0;
    border-bottom: 1px solid #efefef
}
.accordion .panel-heading {
    background: #F2F5F7;
    padding: 13px;
    width: 100%;
    display: block
}
.accordion .panel:hover {
    background: #F2F5F7
}
.x_panel {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 17px;
    display: inline-block;
    background: #fff;
    border: 1px solid #E6E9ED;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
    transition: all .2s ease
}
.x_title {
    border-bottom: 2px solid #E6E9ED;
    padding: 1px 5px 6px;
    margin-bottom: 10px
}
.x_title .filter {
    width: 40%;
    float: right
}
.x_title h2 {
    margin: 5px 0 6px;
    float: left;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}
.x_title h2 small {
    margin-left: 10px
}
.x_title span {
    color: #BDBDBD
}
.x_content {
    padding: 0 5px 6px;
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 5px
}
.x_content h4 {
    font-size: 16px;
    font-weight: 500
}
legend {
    padding-bottom: 7px
}
.demo-placeholder {
    height: 280px
}
.profile_details:nth-child(3n) {
    clear: both
}
.profile_details .profile_view {
    display: inline-block;
    padding: 10px 0 0;
    background: #fff
}
.profile_details .profile_view .divider {
    border-top: 1px solid #e5e5e5;
    padding-top: 5px;
    margin-top: 5px
}
.profile_details .profile_view .ratings {
    margin-bottom: 0
}
.profile_details .profile_view .bottom {
    background: #F2F5F7;
    padding: 9px 0;
    border-top: 1px solid #E6E9ED
}
.profile_details .profile_view .left {
    margin-top: 20px
}
.profile_details .profile_view .left p {
    margin-bottom: 3px
}
.profile_details .profile_view .right {
    margin-top: 0px;
    padding: 10px
}
.profile_details .profile_view .img-circle {
    border: 1px solid #E6E9ED;
    padding: 2px
}
.profile_details .profile_view h2 {
    margin: 5px 0
}
.profile_details .profile_view .ratings {
    text-align: left;
    font-size: 16px
}
.profile_details .profile_view .brief {
    margin: 0;
    font-weight: 300
}
.profile_details .profile_left {
    background: white
}
.pagination.pagination-split li {
    display: inline-block;
    margin-right: 3px
}
.pagination.pagination-split li a {
    border-radius: 4px;
    color: #768399;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px
}
table.tile h3,
table.tile h4,
table.tile span {
    font-weight: bold;
    vertical-align: middle !important
}
table.tile th,
table.tile td {
    text-align: center
}
table.tile th {
    border-bottom: 1px solid #E6ECEE
}
table.tile td {
    padding: 5px 0
}
table.tile td ul {
    text-align: left;
    padding-left: 0
}
table.tile td ul li {
    list-style: none;
    width: 100%
}
table.tile td ul li a {
    width: 100%
}
table.tile td ul li a big {
    right: 0;
    float: right;
    margin-right: 13px
}
table.tile_info {
    width: 100%
}
table.tile_info td {
    text-align: left;
    padding: 1px;
    font-size: 15px
}
table.tile_info td p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 28px
}
table.tile_info td i {
    margin-right: 8px;
    font-size: 17px;
    float: left;
    width: 18px;
    line-height: 28px
}
table.tile_info td:first-child {
    width: 83%
}
td span {
    line-height: inherit
}
.sidebar-widget {
    overflow: hidden
}
.error-number {
    font-size: 90px;
    line-height: 90px;
    margin: 20px 0
}
.col-middle {
    margin-top: 5%
}
.mid_center {
    width: 370px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px
}
h3.degrees {
    font-size: 22px;
    font-weight: 400;
    text-align: center
}
.degrees:after {
    content: "o";
    position: relative;
    top: -12px;
    font-size: 13px;
    font-weight: 300
}
.daily-weather .day {
    font-size: 14px;
    border-top: 2px solid rgba(115, 135, 156, 0.36);
    text-align: center;
    border-bottom: 2px solid rgba(115, 135, 156, 0.36);
    padding: 5px 0
}
.weather-days .col-sm-2 {
    overflow: hidden;
    width: 16.66666667%
}
.weather .row {
    margin-bottom: 0
}
.bulk-actions {
    display: none
}
table.countries_list {
    width: 100%
}
table.countries_list td {
    padding: 0 10px;
    line-height: 30px;
    border-top: 1px solid #eeeeee
}
.dataTables_paginate a {
    padding: 6px 9px !important;
    background: #ddd !important;
    border-color: #ddd !important
}
.paging_full_numbers a.paginate_active {
    background-color: rgba(38, 185, 154, 0.59) !important;
    border-color: rgba(38, 185, 154, 0.59) !important
}
button.DTTT_button,
div.DTTT_button,
a.DTTT_button {
    border: 1px solid #E7E7E7 !important;
    background: #E7E7E7 !important;
    box-shadow: none !important
}
table.jambo_table {
    border: 1px solid rgba(221, 221, 221, 0.78)
}
table.jambo_table thead {
    background: rgba(52, 73, 94, 0.94);
    color: #ECF0F1
}
table.jambo_table tbody tr:hover td {
    background: rgba(38, 185, 154, 0.07);
    border-top: 1px solid rgba(38, 185, 154, 0.11);
    border-bottom: 1px solid rgba(38, 185, 154, 0.11)
}
table.jambo_table tbody tr.selected {
    background: rgba(38, 185, 154, 0.16)
}
table.jambo_table tbody tr.selected td {
    border-top: 1px solid rgba(38, 185, 154, 0.4);
    border-bottom: 1px solid rgba(38, 185, 154, 0.4)
}
.dataTables_paginate a {
    background: #ff0000
}
.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1
}
.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 30px;
    margin-left: -125px;
    margin-top: -15px;
    padding: 14px 0 2px 0;
    border: 1px solid #ddd;
    text-align: center;
    color: #999;
    font-size: 14px;
    background-color: white
}
.dataTables_length {
    width: 40%;
    float: left
}
.dataTables_filter {
    width: 50%;
    float: right;
    text-align: right
}
.dataTables_info {
    width: 60%;
    float: left
}
.dataTables_paginate {
    float: right;
    text-align: right
}
table.dataTable th.focus,
table.dataTable td.focus {
    outline: 2px solid #1ABB9C !important;
    outline-offset: -1px
}
table.display {
    margin: 0 auto;
    clear: both;
    width: 100%
}
table.display thead th {
    padding: 8px 18px 8px 10px;
    border-bottom: 1px solid black;
    font-weight: bold;
    cursor: pointer
}
table.display tfoot th {
    padding: 3px 18px 3px 10px;
    border-top: 1px solid black;
    font-weight: bold
}
table.display tr.heading2 td {
    border-bottom: 1px solid #aaa
}
table.display td {
    padding: 3px 10px
}
table.display td.center {
    text-align: center
}
table.display thead th:active,
table.display thead td:active {
    outline: none
}
.dataTables_scroll {
    clear: both
}
.dataTables_scrollBody {
    *margin-top: -1px;
    -webkit-overflow-scrolling: touch
}
.top .dataTables_info {
    float: none
}
.clear {
    clear: both
}
.dataTables_empty {
    text-align: center
}
tfoot input {
    margin: 0.5em 0;
    width: 100%;
    color: #444
}
tfoot input.search_init {
    color: #999
}
td.group {
    background-color: #d1cfd0;
    border-bottom: 2px solid #A19B9E;
    border-top: 2px solid #A19B9E
}
td.details {
    background-color: #d1cfd0;
    border: 2px solid #A19B9E
}
.example_alt_pagination div.dataTables_info {
    width: 40%
}
.paging_full_numbers {
    width: 400px;
    height: 22px;
    line-height: 22px
}
.paging_full_numbers a:active {
    outline: none
}
.paging_full_numbers a:hover {
    text-decoration: none
}
.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
    border: 1px solid #aaa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 2px 5px;
    margin: 0 3px;
    cursor: pointer
}
.paging_full_numbers a.paginate_button {
    background-color: #ddd
}
.paging_full_numbers a.paginate_button:hover {
    background-color: #ccc;
    text-decoration: none !important
}
.paging_full_numbers a.paginate_active {
    background-color: #99B3FF
}
table.display tr.even.row_selected td {
    background-color: #B0BED9
}
table.display tr.odd.row_selected td {
    background-color: #9FAFD1
}
div.box {
    height: 100px;
    padding: 10px;
    overflow: auto;
    border: 1px solid #8080FF;
    background-color: #E5E5FF
}
ul.msg_list li {
    background: #f7f7f7;
    padding: 5px;
    display: -ms-flexbox;
    display: flex;
    margin: 6px 6px 0;
    width: 96% !important
}
ul.msg_list li:last-child {
    margin-bottom: 6px;
    padding: 10px
}
ul.msg_list li a {
    padding: 3px 5px !important
}
ul.msg_list li a .image img {
    border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    float: left;
    margin-right: 10px;
    width: 11%
}
ul.msg_list li a .time {
    font-size: 11px;
    font-style: italic;
    font-weight: bold;
    position: absolute;
    right: 35px
}
ul.msg_list li a .message {
    display: block !important;
    font-size: 11px
}
.dropdown-menu.msg_list span {
    white-space: normal
}
.dropdown-menu {
    border: medium none;
    box-shadow: none;
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: none outside none;
    padding: 0;
    position: absolute;
    text-shadow: none;
    top: 100%;
    z-index: 9998;
    border: 1px solid #D9DEE4;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}
.dropdown-menu>li>a {
    color: #5A738E
}
.navbar-nav .open .dropdown-menu {
    position: absolute;
    background: #fff;
    margin-top: 0;
    border: 1px solid #D9DEE4;
    -webkit-box-shadow: none;
    right: 0;
    left: auto;
    width: 220px
}
.navbar-nav .open .dropdown-menu.msg_list {
    width: 300px
}
.info-number .badge {
    font-size: 10px;
    font-weight: normal;
    line-height: 13px;
    padding: 2px 6px;
    position: absolute;
    right: 2px;
    top: 8px
}
ul.to_do {
    padding: 0
}
ul.to_do li {
    background: #f3f3f3;
    border-radius: 3px;
    position: relative;
    padding: 7px;
    margin-bottom: 5px;
    list-style: none
}
ul.to_do p {
    margin: 0
}
.dashboard-widget {
    background: #f6f6f6;
    border-top: 5px solid #79C3DF;
    border-radius: 3px;
    padding: 5px 10px 10px
}
.dashboard-widget .dashboard-widget-title {
    font-weight: normal;
    border-bottom: 1px solid #c1cdcd;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    padding-left: 40px;
    line-height: 30px
}
.dashboard-widget .dashboard-widget-title i {
    font-size: 100%;
    margin-left: -35px;
    margin-right: 10px;
    color: #33a1c9;
    padding: 3px 6px;
    border: 1px solid #abd9ea;
    border-radius: 5px;
    background: #fff
}
ul.quick-list {
    width: 45%;
    padding-left: 0;
    display: inline-block
}
ul.quick-list li {
    padding-left: 10px;
    list-style: none;
    margin: 0;
    padding-bottom: 6px;
    padding-top: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}
ul.quick-list li i {
    padding-right: 10px;
    color: #757679
}
.dashboard-widget-content {
    padding-top: 9px
}
.dashboard-widget-content .sidebar-widget {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    background: #fff;
    border: 1px solid #abd9ea;
    border-radius: 5px;
    text-align: center;
    float: right;
    padding: 2px;
    margin-top: 10px
}
.widget_summary {
    width: 100%;
    display: -ms-inline-flexbox;
    display: inline-flex
}
.widget_summary .w_left {
    float: left;
    text-align: left
}
.widget_summary .w_center {
    float: left
}
.widget_summary .w_right {
    float: left;
    text-align: right
}
.widget_summary .w_right span {
    font-size: 20px
}
.w_20 {
    width: 20%
}
.w_25 {
    width: 25%
}
.w_55 {
    width: 55%
}
h5.graph_title {
    text-align: left;
    margin-left: 10px
}
h5.graph_title i {
    margin-right: 10px;
    font-size: 17px
}
span.right {
    float: right;
    font-size: 14px !important
}
.tile_info a {
    text-overflow: ellipsis
}
.tile_count {
    margin-bottom: 20px;
    margin-top: 20px
}
.tile_count .tile_stats_count {
    border-bottom: 1px solid #D9DEE4;
    padding: 0 10px 0 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative
}
@media (min-width: 992px) {
    footer {
        margin-left: 230px
    }
}
@media (min-width: 992px) {
    .tile_count .tile_stats_count {
        margin-bottom: 10px;
        border-bottom: 0;
        padding-bottom: 10px
    }
}
.tile_count .tile_stats_count:before {
    content: "";
    position: absolute;
    left: 0;
    height: 65px;
    border-left: 2px solid #ADB2B5;
    margin-top: 10px
}
@media (min-width: 992px) {
    .tile_count .tile_stats_count:first-child:before {
        border-left: 0
    }
}
.tile_count .tile_stats_count .count {
    font-size: 30px;
    line-height: 47px;
    font-weight: 600
}
@media (min-width: 768px) {
    .tile_count .tile_stats_count .count {
        font-size: 40px
    }
}
@media (min-width: 992px) and (max-width: 1100px) {
    .tile_count .tile_stats_count .count {
        font-size: 30px
    }
}
.tile_count .tile_stats_count span {
    font-size: 12px
}
@media (min-width: 768px) {
    .tile_count .tile_stats_count span {
        font-size: 13px
    }
}
.tile_count .tile_stats_count .count_bottom i {
    width: 12px
}
.dashboard_graph {
    background: #fff;
    padding: 7px 10px
}
.dashboard_graph .col-md-9,
.dashboard_graph .col-md-3 {
    padding: 0
}
a.user-profile {
    color: #5E6974 !important
}
.user-profile img {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    margin-right: 10px
}
ul.top_profiles {
    height: 330px;
    width: 100%
}
ul.top_profiles li {
    margin: 0;
    padding: 3px 5px
}
ul.top_profiles li:nth-child(odd) {
    background-color: #eee
}
.media .profile_thumb {
    border: 1px solid;
    width: 50px;
    height: 50px;
    margin: 5px 10px 5px 0;
    border-radius: 50%;
    padding: 9px 12px
}
.media .profile_thumb i {
    font-size: 30px
}
.media .date {
    background: #ccc;
    width: 52px;
    margin-right: 10px;
    border-radius: 10px;
    padding: 5px
}
.media .date .month {
    margin: 0;
    text-align: center;
    color: #fff
}
.media .date .day {
    text-align: center;
    color: #fff;
    font-size: 27px;
    margin: 0;
    line-height: 27px;
    font-weight: bold
}
.event .media-body a.title {
    font-weight: bold
}
.event .media-body p {
    margin-bottom: 0
}
h4.graph_title {
    margin: 7px;
    text-align: center
}
.fontawesome-icon-list .fa-hover a:hover {
    background-color: #ddd;
    color: #fff;
    text-decoration: none
}
.fontawesome-icon-list .fa-hover a {
    display: block;
    line-height: 32px;
    height: 32px;
    padding-left: 10px;
    border-radius: 4px
}
.fontawesome-icon-list .fa-hover a:hover .fa {
    font-size: 28px;
    vertical-align: -6px
}
.fontawesome-icon-list .fa-hover a .fa {
    width: 32px;
    font-size: 16px;
    display: inline-block;
    text-align: right;
    margin-right: 10px
}
.main_menu .fa {
    width: 26px;
    opacity: .99;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.tile-stats {
    position: relative;
    display: block;
    margin-bottom: 12px;
    border: 1px solid #E4E4E4;
    -webkit-border-radius: 5px;
    overflow: hidden;
    padding-bottom: 5px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 5px;
    -moz-background-clip: padding;
    border-radius: 5px;
    background-clip: padding-box;
    background: #FFF;
    transition: all 300ms ease-in-out
}
.tile-stats:hover .icon i {
    animation-name: transformAnimation;
    animation-duration: .5s;
    animation-iteration-count: 1;
    color: rgba(58, 58, 58, 0.41);
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: transformAnimation;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: transformAnimation;
    -moz-animation-duration: .5s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards
}
.tile-stats .icon {
    width: 20px;
    height: 20px;
    color: #BAB8B8;
    position: absolute;
    right: 53px;
    top: 22px;
    z-index: 1
}
.tile-stats .icon i {
    margin: 0;
    font-size: 60px;
    line-height: 0;
    vertical-align: bottom;
    padding: 0
}
.tile-stats .count {
    font-size: 38px;
    font-weight: bold;
    line-height: 1.65857
}
.tile-stats .count,
.tile-stats h3,
.tile-stats p {
    position: relative;
    margin: 0;
    margin-left: 10px;
    z-index: 5;
    padding: 0
}
.tile-stats h3 {
    color: #BAB8B8
}
.tile-stats p {
    margin-top: 5px;
    font-size: 12px
}
.tile-stats>.dash-box-footer {
    position: relative;
    text-align: center;
    margin-top: 5px;
    padding: 3px 0;
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none
}
.tile-stats>.dash-box-footer:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.15)
}
.tile-stats>.dash-box-footer:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.15)
}
table.tile_info {
    padding: 10px 15px
}
table.tile_info span.right {
    margin-right: 0;
    float: right;
    position: absolute;
    right: 4%
}
.tile:hover {
    text-decoration: none
}
.tile_header {
    border-bottom: transparent;
    padding: 7px 15px;
    margin-bottom: 15px;
    background: #E7E7E7
}
.tile_head h4 {
    margin-top: 0;
    margin-bottom: 5px
}
.tiles-bottom {
    padding: 5px 10px;
    margin-top: 10px;
    background: rgba(194, 194, 194, 0.3);
    text-align: left
}
a.star {
    color: #428bca !important
}
.mail_content {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    margin-top: 20px;
    min-height: 500px;
    padding: 10px 11px;
    width: 100%
}
.list-btn-mail {
    margin-bottom: 15px
}
.list-btn-mail.active {
    border-bottom: 1px solid #39B3D7;
    padding: 0 0 14px
}
.list-btn-mail>i {
    float: left;
    font-size: 18px;
    font-style: normal;
    width: 33px
}
.list-btn-mail>.cn {
    background: none repeat scroll 0 0 #39B3D7;
    border-radius: 12px;
    color: #FFFFFF;
    float: right;
    font-style: normal;
    padding: 0 5px
}
.button-mail {
    margin: 0 0 15px !important;
    text-align: left;
    width: 100%
}
.bg-orange {
    background-color: rgb(254, 168, 11);
}
button,
.buttons,
.btn,
.modal-footer .btn+.btn {
    margin: 16px 5px 0px 5px;
}
.btn-xs {
    background-color: rgb(254, 168, 11);
    color: #fff;
}
.btn-xs:hover {
    background-color: rgb(230, 151, 7);
    border-color: rgb(230, 151, 7);
    color: #fff;
}
.btn-group-vertical .btn,
.btn-group .btn {
    margin-bottom: 0;
    margin-right: 0
}
.mail_list_column {
    border-left: 1px solid #DBDBDB
}
.mail_view {
    border-left: 1px solid #DBDBDB
}
.mail_list {
    width: 100%;
    border-bottom: 1px solid #DBDBDB;
    margin-bottom: 2px;
    display: inline-block
}
.mail_list .left {
    width: 5%;
    float: left;
    margin-right: 3%
}
.mail_list .right {
    width: 90%;
    float: left
}
.mail_list h3 {
    font-size: 15px;
    font-weight: bold;
    margin: 0px 0 6px
}
.mail_list h3 small {
    float: right;
    color: #ADABAB;
    font-size: 11px;
    line-height: 20px
}
.mail_list .badge {
    padding: 3px 6px;
    font-size: 8px;
    background: #BAB7B7
}
@media (max-width: 767px) {
    .mail_list {
        margin-bottom: 5px;
        display: inline-block
    }
}
.mail_heading h4 {
    font-size: 18px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-top: 20px
}
.attachment {
    margin-top: 30px
}
.attachment ul {
    width: 100%;
    list-style: none;
    padding-left: 0;
    display: inline-block;
    margin-bottom: 30px
}
.attachment ul li {
    float: left;
    width: 150px;
    margin-right: 10px;
    margin-bottom: 10px
}
.attachment ul li img {
    height: 150px;
    border: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 10px
}
.attachment ul li span {
    float: right
}
.attachment .file-name {
    float: left
}
.attachment .links {
    width: 100%;
    display: inline-block
}
.compose {
    padding: 0;
    position: fixed;
    bottom: 0;
    right: 0;
    background: #fff;
    border: 1px solid #D9DEE4;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 5px;
    z-index: 9999;
    display: none
}
.compose .compose-header {
    padding: 5px;
    background: #169F85;
    color: #fff;
    border-top-left-radius: 5px
}
.compose .compose-header .close {
    text-shadow: 0 1px 0 #ffffff;
    line-height: .8
}
.compose .compose-body .editor.btn-toolbar {
    margin: 0
}
.compose .compose-body .editor-wrapper {
    height: 100%;
    min-height: 50px;
    max-height: 180px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    overflow: auto
}
.compose .compose-footer {
    padding: 10px
}
.editor.btn-toolbar {
    zoom: 1;
    background: #F7F7F7;
    margin: 5px 2px;
    padding: 3px 0;
    border: 1px solid #EFEFEF
}
.input-group {
    margin-bottom: 10px
}
.ln_solid {
    border-top: 1px solid #e5e5e5;
    color: #ffffff;
    background-color: #ffffff;
    height: 1px;
    margin: 20px 0
}
span.section {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5
}
.form-control {
    border-radius: 0;
    width: 100%
}
.form-horizontal .control-label {
    padding-top: 8px
}
.form-control:focus {
    border-color: #CCD0D7;
    box-shadow: none !important
}
legend {
    font-size: 18px;
    color: inherit
}
.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0
}
.form-control-feedback {
    margin-top: 8px;
    height: 23px;
    color: #bbb;
    line-height: 24px;
    font-size: 15px
}
.form-control-feedback.left {
    border-right: 1px solid #ccc;
    left: 13px
}
.form-control-feedback.right {
    border-left: 1px solid #ccc;
    right: 13px
}
.form-control.has-feedback-left {
    padding-left: 45px
}
.form-control.has-feedback-right {
    padding-right: 45px
}
.form-group {
    margin-bottom: 10px
}
.validate {
    margin-top: 10px
}
.invalid-form-error-message {
    margin-top: 10px;
    padding: 5px
}
.invalid-form-error-message.filled {
    border-left: 2px solid #E74C3C
}
p.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6
}
p.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7
}
ul.parsley-errors-list {
    list-style: none;
    color: #E74C3C;
    padding-left: 0
}
input.parsley-error,
textarea.parsley-error,
select.parsley-error {
    background: #FAEDEC;
    border: 1px solid #E85445
}
.btn-group .parsley-errors-list {
    display: none
}
.bad input,
.bad select,
.bad textarea {
    border: 1px solid #CE5454;
    box-shadow: 0 0 4px -2px #CE5454;
    position: relative;
    left: 0;
    -moz-animation: .7s 1 shake linear;
    -webkit-animation: 0.7s 1 shake linear
}
.item input,
.item textarea {
    transition: 0.42s
}
.item .alert {
    float: left;
    margin: 0 0 0 20px;
    padding: 3px 10px;
    color: #FFF;
    border-radius: 3px 4px 4px 3px;
    background-color: #CE5454;
    max-width: 170px;
    white-space: pre;
    position: relative;
    left: -15px;
    opacity: 0;
    z-index: 1;
    transition: 0.15s ease-out
}
.item .alert::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-color: transparent #CE5454 transparent transparent;
    border-style: solid;
    border-width: 11px 7px;
    position: absolute;
    left: -13px;
    top: 1px
}
.item.bad .alert {
    left: 0;
    opacity: 1
}
.inl-bl {
    display: inline-block
}
.well .markup {
    background: #fff;
    color: #777;
    position: relative;
    padding: 45px 15px 15px;
    margin: 15px 0 0 0;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    box-shadow: none
}
.well .markup::after {
    content: "Example";
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 12px;
    font-weight: bold;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px
}
.autocomplete-suggestions {
    border: 1px solid #e4e4e4;
    background: #F4F4F4;
    cursor: default;
    overflow: auto
}
.autocomplete-suggestion {
    padding: 2px 5px;
    font-size: 1.2em;
    white-space: nowrap;
    overflow: hidden
}
.autocomplete-selected {
    background: #f0f0f0
}
.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399ff;
    font-weight: bolder
}
.btn {
    border-radius: 3px;
    border-color:  rgb(254, 168, 11);
}
a.btn-success,
a.btn-primary,
a.btn-warning,
a.btn-danger {
    color: #fff
}
.btn-success {
    background: #26B99A;
    border: 1px solid #169F85
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
    background: #169F85
}
.btn-dark {
    color: #E9EDEF;
    background-color: #4B5F71;
    border-color: #364B5F
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
    color: #FFFFFF;
    background-color: #394D5F;
    border-color: #394D5F
}
.btn-round {
    border-radius: 30px
}
.btn.btn-app {
    position: relative;
    padding: 15px 5px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    height: 60px;
    box-shadow: none;
    border-radius: 0;
    text-align: center;
    color: #666;
    border: 1px solid #ddd;
    background-color: #fafafa;
    font-size: 12px
}
.btn.btn-app>.fa,
.btn.btn-app>.glyphicon,
.btn.btn-app>.ion {
    font-size: 20px;
    display: block
}
.btn.btn-app:hover {
    background: #f4f4f4;
    color: #444;
    border-color: #aaa
}
.btn.btn-app:active,
.btn.btn-app:focus {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}
.btn.btn-app>.badge {
    position: absolute;
    top: -3px;
    right: -10px;
    font-size: 10px;
    font-weight: 400
}
textarea {
    padding: 10px;
    vertical-align: top;
    width: 200px
}
textarea:focus {
    outline-style: solid;
    outline-width: 2px
}
.btn_ {
    display: inline-block;
    padding: 3px 9px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    border: 1px solid #cccccc;
    border-bottom-color: #b3b3b3;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
}
.bs-glyphicons {
    margin: 0 -10px 20px;
    overflow: hidden
}
.bs-glyphicons-list {
    padding-left: 0;
    list-style: none
}
.bs-glyphicons li {
    float: left;
    width: 25%;
    height: 115px;
    padding: 10px;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    background-color: #f9f9f9;
    border: 1px solid #fff
}
.bs-glyphicons .glyphicon {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 24px
}
.bs-glyphicons .glyphicon-class {
    display: block;
    text-align: center;
    word-wrap: break-word
}
.bs-glyphicons li:hover {
    color: #fff;
    background-color: #1ABB9C
}
@media (min-width: 768px) {
    .bs-glyphicons {
        margin-right: 0;
        margin-left: 0
    }
    .bs-glyphicons li {
        width: 12.5%;
        font-size: 12px
    }
}
.tagsinput {
    border: 1px solid #CCC;
    background: #FFF;
    padding: 6px 6px 0;
    width: 300px;
    overflow-y: auto
}
span.tag {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    display: block;
    float: left;
    padding: 5px 9px;
    text-decoration: none;
    background: #1ABB9C;
    color: #F1F6F7;
    margin-right: 5px;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif
}
span.tag a {
    color: #F1F6F7 !important
}
.tagsinput span.tag a {
    font-weight: bold;
    color: #82ad2b;
    text-decoration: none;
    font-size: 11px
}
.tagsinput input {
    width: 80px;
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    border: 1px solid transparent;
    padding: 3px;
    background: transparent;
    color: #000;
    outline: 0px
}
.tagsinput div {
    display: block;
    float: left
}
.tags_clear {
    clear: both;
    width: 100%;
    height: 0px
}
.not_valid {
    background: #FBD8DB !important;
    color: #90111A !important
}
ul.bar_tabs {
    overflow: visible;
    background: #F5F7FA;
    height: 25px;
    margin: 21px 0 14px;
    padding-left: 14px;
    position: relative;
    z-index: 1;
    width: 100%;
    border-bottom: 1px solid #E6E9ED
}
ul.bar_tabs>li {
    border: 1px solid #E6E9ED;
    color: #333 !important;
    margin-top: -17px;
    margin-left: 8px;
    background: #fff;
    border-bottom: none;
    border-radius: 4px 4px 0 0
}
ul.bar_tabs>li.active {
    border-right: 6px solid #D3D6DA;
    border-top: 0;
    margin-top: -15px
}
ul.bar_tabs>li a {
    padding: 10px 17px;
    background: #F5F7FA;
    margin: 0;
    border-top-right-radius: 0
}
ul.bar_tabs>li a:hover {
    border: 1px solid transparent
}
ul.bar_tabs>li.active a {
    border-bottom: none
}
ul.bar_tabs.right {
    padding-right: 14px
}
ul.bar_tabs.right li {
    float: right
}
a:focus {
    outline: none
}
ul.timeline li {
    position: relative;
    border-bottom: 1px solid #e8e8e8;
    clear: both
}
.timeline .block {
    margin: 0;
    border-left: 3px solid #e8e8e8;
    overflow: visible;
    padding: 10px 15px;
    margin-left: 105px
}
.timeline.widget {
    min-width: 0;
    max-width: inherit
}
.timeline.widget .block {
    margin-left: 5px
}
.timeline .tags {
    position: absolute;
    top: 15px;
    left: 0;
    width: 84px
}
.timeline .tag {
    display: block;
    height: 30px;
    font-size: 13px;
    padding: 8px
}
.timeline .tag span {
    display: block;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis
}
.tag {
    line-height: 1;
    background: #1ABB9C;
    color: #fff !important
}
.tag:after {
    content: " ";
    height: 30px;
    width: 0;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    pointer-events: none;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 11px solid #1ABB9C
}
.timeline h2.title {
    position: relative;
    font-size: 16px;
    margin: 0
}
.timeline h2.title:before {
    content: "";
    position: absolute;
    left: -23px;
    top: 3px;
    display: block;
    width: 14px;
    height: 14px;
    border: 3px solid #d2d3d2;
    border-radius: 14px;
    background: #f9f9f9
}
.timeline .byline {
    padding: .25em 0
}
.byline {
    -webkit-font-smoothing: antialiased;
    font-style: italic;
    font-size: .9375em;
    line-height: 1.3;
    color: #aab6aa
}
ul.social li {
    border: 0
}
.social-sidebar,
.social-body {
    float: right
}
.social-sidebar {
    background: #EDEDED;
    width: 22%
}
.social-body {
    border: 1px solid #ccc;
    width: 78%
}
.thumb img {
    width: 50px;
    height: 50px;
    border-radius: 50%
}
.chat .thumb img {
    width: 27px;
    height: 27px;
    border-radius: 50%
}
.chat .status {
    float: left;
    margin: 16px 0 0 -16px;
    font-size: 14px;
    font-weight: bold;
    width: 12px;
    height: 12px;
    display: block;
    border: 2px solid #FFF;
    z-index: 12312;
    border-radius: 50%
}
.chat .status.online {
    background: #1ABB9C
}
.chat .status.away {
    background: #F39C12
}
.chat .status.offline {
    background: #ccc
}
.chat .media-body {
    padding-top: 5px
}
.dashboard_graph .x_title {
    padding: 5px 5px 7px
}
.dashboard_graph .x_title h3 {
    margin: 0;
    font-weight: normal
}
.chart {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center
}
.chart canvas {
    position: absolute;
    top: 0;
    left: 0
}
.percent {
    display: inline-block;
    line-height: 110px;
    z-index: 2;
    font-size: 18px
}
.percent:after {
    content: '%';
    margin-left: 0.1em;
    font-size: .8em
}
.angular {
    margin-top: 100px
}
.angular .chart {
    margin-top: 0
}
.widget {
    min-width: 250px;
    max-width: 310px
}
.widget_tally_box .btn-group button {
    text-align: center
}
.widget_tally_box .btn-group button {
    color: inherit;
    font-weight: 500;
    background-color: #f5f5f5;
    border: 1px solid #e7e7e7
}
ul.widget_tally,
ul.widget_tally li {
    width: 100%
}
ul.widget_tally li {
    padding: 2px 10px;
    border-bottom: 1px solid #ECECEC;
    padding-bottom: 4px
}
ul.widget_tally .month {
    width: 70%;
    float: left
}
ul.widget_tally .count {
    width: 30%;
    float: left;
    text-align: right
}
.pie_bg {
    border-bottom: 1px solid rgba(101, 204, 182, 0.16);
    padding-bottom: 15px;
    border-radius: 4px;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    padding-bottom: 10px;
    box-shadow: 0 4px 6px -6px #222
}
.widget_tally_box .flex {
    display: -ms-flexbox;
    display: flex
}
ul.widget_profile_box {
    width: 100%;
    height: 42px;
    padding: 3px;
    background: #ececec;
    margin-top: 40px;
    margin-left: 1px
}
ul.widget_profile_box li:first-child {
    width: 25%;
    float: left
}
ul.widget_profile_box li:first-child a {
    float: left
}
ul.widget_profile_box li:last-child {
    width: 25%;
    float: right
}
ul.widget_profile_box li:last-child a {
    float: right
}
ul.widget_profile_box li a {
    font-size: 22px;
    text-align: center;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(52, 73, 94, 0.44);
    display: block;
    border-radius: 50%;
    padding: 0px
}
ul.widget_profile_box li a:hover {
    color: #1ABB9C !important;
    border: 1px solid #26b99a
}
ul.widget_profile_box li .profile_img {
    width: 85px;
    height: 85px;
    margin: 0;
    margin-top: -28px
}
.widget_tally_box p,
.widget_tally_box span {
    text-align: center
}
.widget_tally_box .name {
    text-align: center;
    margin: 25px
}
.widget_tally_box .name_title {
    text-align: center;
    margin: 5px
}
.widget_tally_box ul.legend {
    margin: 0
}
.widget_tally_box ul.legend p,
.widget_tally_box ul.legend span {
    text-align: left
}
.widget_tally_box ul.legend li .icon {
    font-size: 20px;
    float: left;
    width: 14px
}
.widget_tally_box ul.legend li .name {
    font-size: 14px;
    margin: 5px 0 0 14px;
    text-overflow: ellipsis;
    float: left
}
.widget_tally_box ul.legend p {
    display: inline-block;
    margin: 0
}
.widget_tally_box ul.verticle_bars li {
    height: 140px;
    width: 23%
}
.widget .verticle_bars li .progress.vertical.progress_wide {
    width: 65%
}
ul.count2 {
    width: 100%;
    margin-left: 1px;
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    padding: 10px 0
}
ul.count2 li {
    width: 30%;
    text-align: center
}
ul.count2 li h3 {
    font-weight: 400;
    margin: 0
}
ul.count2 li span {
    font-weight: 300
}
.divider {
    border-bottom: 1px solid #ddd;
    margin: 10px
}
.divider-dashed {
    border-top: 1px dashed #e7eaec;
    background-color: #ffffff;
    height: 1px;
    margin: 10px 0
}
ul.messages {
    padding: 0;
    list-style: none
}
ul.messages li,
.tasks li {
    border-bottom: 1px dotted #e6e6e6;
    padding: 8px 0
}
ul.messages li img.avatar,
img.avatar {
    height: 32px;
    width: 32px;
    float: left;
    display: inline-block;
    border-radius: 2px;
    padding: 2px;
    background: #f7f7f7;
    border: 1px solid #e6e6e6
}
ul.messages li .message_date {
    float: right;
    text-align: right
}
ul.messages li .message_wrapper {
    margin-left: 50px;
    margin-right: 40px
}
ul.messages li .message_wrapper h4.heading {
    font-weight: 600;
    margin: 0;
    cursor: pointer;
    margin-bottom: 10px;
    line-height: 100%
}
ul.messages li .message_wrapper blockquote {
    padding: 0px 10px;
    margin: 0;
    border-left: 5px solid #eee
}
ul.user_data li {
    margin-bottom: 6px
}
ul.user_data li p {
    margin-bottom: 0
}
ul.user_data li .progress {
    width: 90%
}
.project_progress .progress {
    margin-bottom: 3px !important;
    margin-top: 5px
}
.projects .list-inline {
    margin: 0
}
.profile_title {
    background: #F5F7FA;
    border: 0;
    padding: 7px 0;
    display: -ms-flexbox;
    display: flex
}
ul.stats-overview {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 10px;
    margin-bottom: 10px
}
ul.stats-overview li {
    display: inline-block;
    text-align: center;
    padding: 0 15px;
    width: 30%;
    font-size: 14px;
    border-right: 1px solid #e8e8e8
}
ul.stats-overview li:last-child {
    border-right: 0
}
ul.stats-overview li .name {
    font-size: 12px
}
ul.stats-overview li .value {
    font-size: 14px;
    font-weight: bold;
    display: block
}
ul.stats-overview li:first-child {
    padding-left: 0
}
ul.project_files li {
    margin-bottom: 5px
}
ul.project_files li a i {
    width: 20px
}
.project_detail p {
    margin-bottom: 10px
}
.project_detail p.title {
    font-weight: bold;
    margin-bottom: 0
}
.avatar img {
    border-radius: 50%;
    max-width: 45px
}
.pricing {
    background: #fff
}
.pricing .title {
    background: #1ABB9C;
    height: 110px;
    color: #fff;
    padding: 15px 0 0;
    text-align: center
}
.pricing .title h2 {
    text-transform: capitalize;
    font-size: 18px;
    border-radius: 5px 5px 0 0;
    margin: 0;
    font-weight: 400
}
.pricing .title h1 {
    font-size: 30px;
    margin: 12px
}
.pricing .title span {
    background: rgba(51, 51, 51, 0.28);
    padding: 2px 5px
}
.pricing_features {
    background: #FAFAFA;
    padding: 20px 15px;
    min-height: 230px;
    font-size: 13.5px
}
.pricing_features ul li {
    margin-top: 10px
}
.pricing_footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    text-align: center;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px
}
.pricing_footer p {
    font-size: 13px;
    padding: 10px 0 2px;
    display: block
}
.ui-ribbon-container {
    position: relative
}
.ui-ribbon-container .ui-ribbon-wrapper {
    position: absolute;
    overflow: hidden;
    width: 85px;
    height: 88px;
    top: -3px;
    right: -3px
}
.ui-ribbon-container.ui-ribbon-primary .ui-ribbon {
    background-color: #5b90bf
}
.ui-ribbon-container .ui-ribbon {
    position: relative;
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    transform: rotate(45deg);
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    line-height: 20px;
    background-color: #555;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
}
.ui-ribbon-container.ui-ribbon-primary .ui-ribbon:after,
.ui-ribbon-container.ui-ribbon-primary .ui-ribbon:before {
    border-top: 2px solid #5b90bf
}
.ui-ribbon-container .ui-ribbon:before {
    left: 0;
    bottom: -1px
}
.ui-ribbon-container .ui-ribbon:before {
    right: 0
}
.ui-ribbon-container .ui-ribbon:after,
.ui-ribbon-container .ui-ribbon:before {
    position: absolute;
    content: " ";
    line-height: 0;
    border-top: 2px solid #555;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent
}
.thumbnail .image {
    height: 120px;
    overflow: hidden
}
.caption {
    padding: 9px 5px;
    background: #F7F7F7
}
.caption p {
    margin-bottom: 5px
}
.thumbnail {
    height: 190px;
    overflow: hidden
}
.view {
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default
}
.view .mask,
.view .content {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view .tools {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.35);
    margin: 43px 0 0 0
}
.mask.no-caption .tools {
    margin: 90px 0 0 0
}
.view .tools a {
    display: inline-block;
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    padding: 0 4px
}
.view p {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view-first img {
    transition: all 0.2s linear
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease-in-out
}
.view-first .tools {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear
}
.view-first:hover img {
    transform: scale(1.1)
}
.view-first:hover .mask {
    opacity: 1
}
.view-first:hover .tools,
.view-first:hover p {
    opacity: 1;
    transform: translateY(0px)
}
.view-first:hover p {
    transition-delay: 0.1s
}
.form-group.has-feedback span {
    display: block !important;
}
.form-group .btn {
    margin-bottom: -6px;
}

.input-group-btn .btn { margin-bottom:0; }

/*!
 * bootstrap-vertical-tabs - v1.2.1
 * https://dbtek.github.io/bootstrap-vertical-tabs
 * 2014-11-07
 * Copyright (c) 2014 İsmail Demirbilek
 * License: MIT
 */

.tabs-left,
.tabs-right {
    border-bottom: none;
    padding-top: 2px
}
.tabs-left {
    border-right: 1px solid #F7F7F7
}
.tabs-right {
    border-left: 1px solid #F7F7F7
}
.tabs-left>li,
.tabs-right>li {
    float: none;
    margin-bottom: 2px
}
.tabs-left>li {
    margin-right: -1px
}
.tabs-right>li {
    margin-left: -1px
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
    border-bottom-color: #F7F7F7;
    border-right-color: transparent
}
.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
    border-bottom: 1px solid #F7F7F7;
    border-left-color: transparent
}
.tabs-left>li>a {
    border-radius: 4px 0 0 4px;
    margin-right: 0;
    display: block;
    background: #F7F7F7;
    text-overflow: ellipsis;
    overflow: hidden
}
.tabs-right>li>a {
    border-radius: 0 4px 4px 0;
    margin-right: 0;
    background: #F7F7F7;
    text-overflow: ellipsis;
    overflow: hidden
}
.sideways {
    margin-top: 50px;
    border: none;
    position: relative
}
.sideways>li {
    height: 20px;
    width: 120px;
    margin-bottom: 100px
}
.sideways>li>a {
    border-bottom: 1px solid #ddd;
    border-right-color: transparent;
    text-align: center;
    border-radius: 4px 4px 0px 0px
}
.sideways>li.active>a,
.sideways>li.active>a:hover,
.sideways>li.active>a:focus {
    border-bottom-color: transparent;
    border-right-color: #ddd;
    border-left-color: #ddd
}
.sideways.tabs-left {
    left: -50px
}
.sideways.tabs-right {
    right: -50px
}
.sideways.tabs-right>li {
    transform: rotate(90deg)
}
.sideways.tabs-left>li {
    transform: rotate(-90deg)
}
.morris-hover {
    position: absolute;
    z-index: 1000
}
.morris-hover.morris-default-style {
    padding: 6px;
    color: #666;
    background: rgba(243, 242, 243, 0.8);
    border: solid 2px rgba(195, 194, 196, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-align: center
}
.morris-hover.morris-default-style .morris-hover-row-label {
    font-weight: bold;
    margin: 0.25em 0
}
.morris-hover.morris-default-style .morris-hover-point {
    white-space: nowrap;
    margin: 0.1em 0
}
.price {
    font-size: 40px;
    font-weight: 400;
    color: #26B99A;
    margin: 0
}
.prod_title {
    border-bottom: 1px solid #DFDFDF;
    padding-bottom: 5px;
    margin: 30px 0;
    font-size: 20px;
    font-weight: 400
}
.product-image img {
    width: 90%
}
.prod_color li {
    margin: 0 10px
}
.prod_color li p {
    margin-bottom: 0
}
.prod_size li {
    padding: 0
}
.prod_color .color {
    width: 25px;
    height: 25px;
    border: 2px solid rgba(51, 51, 51, 0.28) !important;
    padding: 2px;
    border-radius: 50px
}
.product_gallery a {
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    border: 1px solid #e5e5e5
}
.product_gallery a img {
    width: 100%;
    margin-top: 15px
}
.product_price {
    margin: 20px 0;
    padding: 5px 10px;
    background-color: #FFFFFF;
    text-align: left;
    border: 2px dashed #E0E0E0
}
.price-tax {
    font-size: 18px
}
.product_social {
    margin: 20px 0
}
.product_social ul li a i {
    font-size: 35px
}
.left {
    float: left
}
.alignleft {
    float: left;
    margin-right: 15px
}
.alignright {
    float: right;
    margin-left: 15px
}
.clearfix:after,
form:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}
header {
    width: 100%
}
#nprogress .bar {
    background: #1ABB9C
}
#nprogress .peg {
    box-shadow: 0 0 10px #1ABB9C, 0 0 5px #1ABB9C
}
#nprogress .spinner-icon {
    border-top-color: #1ABB9C;
    border-left-color: #1ABB9C
}
.editor-wrapper {
    min-height: 250px;
    background-color: white;
    border-collapse: separate;
    border: 1px solid #ccc;
    padding: 4px;
    box-sizing: content-box;
    box-shadow: rgba(0, 0, 0, 0.07451) 0px 1px 1px 0px inset;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    overflow: scroll;
    outline: none
}
.voiceBtn {
    width: 20px;
    color: transparent;
    background-color: transparent;
    transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -moz-transform: scale(2, 2);
    border: transparent;
    cursor: pointer;
    box-shadow: none;
    -webkit-box-shadow: none
}
div[data-role="editor-toolbar"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.dropdown-menu a {
    cursor: pointer
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    min-height: 38px
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #73879C;
    padding-top: 5px
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding-top: 3px
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-top: 2px;
    border: none;
    border-radius: 0;
    padding: 3px 5px
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #ccc
}
.switchery {
    width: 32px;
    height: 20px
}
.switchery>small {
    width: 20px;
    height: 20px
}
fieldset {
    border: none;
    margin: 0;
    padding: 0
}
.cropper .img-container,
.cropper .img-preview {
    background-color: #f7f7f7;
    width: 100%;
    text-align: center
}
.cropper .img-container {
    min-height: 200px;
    max-height: 516px;
    margin-bottom: 20px
}
@media (min-width: 768px) {
    .cropper .img-container {
        min-height: 516px
    }
}
.cropper .img-container>img {
    max-width: 100%
}
.cropper .docs-preview {
    margin-right: -15px
}
.cropper .img-preview {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden
}
.cropper .img-preview>img {
    max-width: 100%
}
.cropper .preview-lg {
    width: 263px;
    height: 148px
}
.cropper .preview-md {
    width: 139px;
    height: 78px
}
.cropper .preview-sm {
    width: 69px;
    height: 39px
}
.cropper .preview-xs {
    width: 35px;
    height: 20px;
    margin-right: 0
}
.cropper .docs-data>.input-group {
    margin-bottom: 10px
}
.cropper .docs-data>.input-group>label {
    min-width: 80px
}
.cropper .docs-data>.input-group>span {
    min-width: 50px
}
.cropper .docs-buttons>.btn,
.cropper .docs-buttons>.btn-group,
.cropper .docs-buttons>.form-control {
    margin-right: 5px;
    margin-bottom: 10px
}
.cropper .docs-toggles>.btn,
.cropper .docs-toggles>.btn-group,
.cropper .docs-toggles>.dropdown {
    margin-bottom: 10px
}
.cropper .docs-tooltip {
    display: block;
    margin: -6px -12px;
    padding: 6px 12px
}
.cropper .docs-tooltip>.icon {
    margin: 0 -3px;
    vertical-align: top
}
.cropper .tooltip-inner {
    white-space: normal
}
.cropper .btn-upload .tooltip-inner,
.cropper .btn-toggle .tooltip-inner {
    white-space: nowrap
}
.cropper .btn-toggle {
    padding: 6px
}
.cropper .btn-toggle>.docs-tooltip {
    margin: -6px;
    padding: 6px
}
@media (max-width: 400px) {
    .cropper .btn-group-crop {
        margin-right: -15px !important
    }
    .cropper .btn-group-crop>.btn {
        padding-left: 5px;
        padding-right: 5px
    }
    .cropper .btn-group-crop .docs-tooltip {
        margin-left: -5px;
        margin-right: -5px;
        padding-left: 5px;
        padding-right: 5px
    }
}
.cropper .docs-options .dropdown-menu {
    width: 100%
}
.cropper .docs-options .dropdown-menu>li {
    padding: 3px 20px
}
.cropper .docs-options .dropdown-menu>li:hover {
    background-color: #f7f7f7
}
.cropper .docs-options .dropdown-menu>li>label {
    display: block
}
.cropper .docs-cropped .modal-body {
    text-align: center
}
.cropper .docs-cropped .modal-body>img,
.cropper .docs-cropped .modal-body>canvas {
    max-width: 100%
}
.cropper .docs-diagram .modal-dialog {
    max-width: 352px
}
.cropper .docs-cropped canvas {
    max-width: 100%
}
.form_wizard .stepContainer {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0 solid #CCC;
    overflow-x: hidden
}
.wizard_horizontal ul.wizard_steps {
    display: table;
    list-style: none;
    position: relative;
    width: 100%;
    margin: 0 0 20px
}
.wizard_horizontal ul.wizard_steps li {
    display: table-cell;
    text-align: center
}
.wizard_horizontal ul.wizard_steps li a,
.wizard_horizontal ul.wizard_steps li:hover {
    display: block;
    position: relative;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    color: #666
}
.wizard_horizontal ul.wizard_steps li a:before {
    content: "";
    position: absolute;
    height: 4px;
    background: #ccc;
    top: 20px;
    width: 100%;
    z-index: 4;
    left: 0
}
.wizard_horizontal ul.wizard_steps li a.disabled .step_no {
    background: #ccc
}
.wizard_horizontal ul.wizard_steps li a .step_no {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100px;
    display: block;
    margin: 0 auto 5px;
    font-size: 16px;
    text-align: center;
    position: relative;
    z-index: 5
}
.wizard_horizontal ul.wizard_steps li a.selected:before,
.step_no {
    background: #34495E;
    color: #fff
}
.wizard_horizontal ul.wizard_steps li a.done:before,
.wizard_horizontal ul.wizard_steps li a.done .step_no {
    background: #1ABB9C;
    color: #fff
}
.wizard_horizontal ul.wizard_steps li:first-child a:before {
    left: 50%
}
.wizard_horizontal ul.wizard_steps li:last-child a:before {
    right: 50%;
    width: 50%;
    left: auto
}
.wizard_verticle .stepContainer {
    width: 80%;
    float: left;
    padding: 0 10px
}
.actionBar {
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 10px 5px;
    text-align: right;
    margin-top: 10px
}
.actionBar .buttonDisabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .65;
    filter: alpha(opacity=65);
    box-shadow: none
}
.actionBar a {
    margin: 0 3px
}
.wizard_verticle .wizard_content {
    width: 80%;
    float: left;
    padding-left: 20px
}
.wizard_verticle ul.wizard_steps {
    display: table;
    list-style: none;
    position: relative;
    width: 20%;
    float: left;
    margin: 0 0 20px
}
.wizard_verticle ul.wizard_steps li {
    display: list-item;
    text-align: center
}
.wizard_verticle ul.wizard_steps li a {
    height: 80px
}
.wizard_verticle ul.wizard_steps li a:first-child {
    margin-top: 20px
}
.wizard_verticle ul.wizard_steps li a,
.wizard_verticle ul.wizard_steps li:hover {
    display: block;
    position: relative;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    color: #666
}
.wizard_verticle ul.wizard_steps li a:before {
    content: "";
    position: absolute;
    height: 100%;
    background: #ccc;
    top: 20px;
    width: 4px;
    z-index: 4;
    left: 49%
}
.wizard_verticle ul.wizard_steps li a.disabled .step_no {
    background: #ccc
}
.wizard_verticle ul.wizard_steps li a .step_no {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100px;
    display: block;
    margin: 0 auto 5px;
    font-size: 16px;
    text-align: center;
    position: relative;
    z-index: 5
}
.wizard_verticle ul.wizard_steps li a.selected:before,
.step_no {
    background: #34495E;
    color: #fff
}
.wizard_verticle ul.wizard_steps li a.done:before,
.wizard_verticle ul.wizard_steps li a.done .step_no {
    background: #1ABB9C;
    color: #fff
}
.wizard_verticle ul.wizard_steps li:first-child a:before {
    left: 49%
}
.wizard_verticle ul.wizard_steps li:last-child a:before {
    left: 49%;
    left: auto;
    width: 0
}
.form_wizard .loader {
    display: none
}
.form_wizard .msgBox {
    display: none
}
.progress {
    border-radius: 0
}
.progress-bar-info {
    background-color: #3498DB
}
.progress-bar-success {
    background-color: #26B99A
}
.progress_summary .progress {
    margin: 5px 0 12px !important
}
.progress_summary .row {
    margin-bottom: 5px
}
.progress_summary .row .col-xs-2 {
    padding: 0
}
.progress_summary .more_info span {
    text-align: right;
    float: right
}
.progress_summary .data span {
    text-align: right;
    float: right
}
.progress_summary p {
    margin-bottom: 3px;
    width: 100%
}
.progress_title .left {
    float: left;
    text-align: left
}
.progress_title .right {
    float: right;
    text-align: right;
    font-weight: 300
}
.progress.progress_sm {
    border-radius: 0;
    margin-bottom: 18px;
    height: 10px !important
}
.progress.progress_sm .progress-bar {
    height: 10px !important
}
.dashboard_graph p {
    margin: 0 0 4px
}
ul.verticle_bars {
    width: 100%
}
ul.verticle_bars li {
    width: 23%;
    height: 200px;
    margin: 0
}
.progress.vertical.progress_wide {
    width: 35px
}
.alert-success {
    color: #ffffff;
    background-color: rgba(38, 185, 154, 0.88);
    border-color: rgba(38, 185, 154, 0.88)
}
.alert-info {
    color: #E9EDEF;
    background-color: rgba(52, 152, 219, 0.88);
    border-color: rgba(52, 152, 219, 0.88)
}
.alert-warning {
    color: #E9EDEF;
    background-color: rgba(243, 156, 18, 0.88);
    border-color: rgba(243, 156, 18, 0.88)
}
.alert-danger,
.alert-error {
    color: #E9EDEF;
    background-color: rgba(231, 76, 60, 0.88);
    border-color: rgba(231, 76, 60, 0.88)
}
.ui-pnotify.dark .ui-pnotify-container {
    color: #E9EDEF;
    background-color: rgba(52, 73, 94, 0.88);
    border-color: rgba(52, 73, 94, 0.88)
}
.custom-notifications {
    position: fixed;
    margin: 15px;
    right: 0;
    float: right;
    width: 400px;
    z-index: 4000;
    bottom: 0
}
ul.notifications {
    float: right;
    display: block;
    margin-bottom: 7px;
    padding: 0;
    width: 100%
}
.notifications li {
    float: right;
    margin: 3px;
    width: 36px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3)
}
.notifications li:last-child {
    margin-left: 0
}
.notifications a {
    display: block;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 9px 8px
}
.tabbed_notifications .text {
    padding: 5px 15px;
    height: 140px;
    border-radius: 7px;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3)
}
.tabbed_notifications div p {
    display: inline-block
}
.tabbed_notifications h2 {
    font-weight: bold;
    text-transform: uppercase;
    width: 80%;
    float: left;
    height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block
}
.tabbed_notifications .close {
    padding: 5px;
    color: #E9EDEF;
    float: right;
    opacity: 1
}
/* Botões da barra de navegação do calendário (hoje/anterior/próximo,
   Pauta/Mês) — mesma linguagem visual do menu e dos filtros da pauta:
   fundo --paper2/borda --line em repouso, --tint no hover, --tint2 no
   estado ativo/pressionado (mesmo par usado no item ativo do menu,
   .nav.side-menu>li.active>a, e no chip de filtro aplicado).
   Prefixado com #calendar (não só ".fc-state-default" solto) de
   propósito: fullcalendar.min.css é carregado DEPOIS deste arquivo
   (header.php), então numa disputa de MESMA especificidade a regra dele
   venceria por ordem de carregamento, gradiente/raio de canto padrão da
   lib incluídos — só um seletor mais específico (ID + classe, não mais
   só classe) garante vitória aqui independente da ordem. Zera o raio
   (cantos quadrados, mesmo padrão dos campos/botões dos filtros). */
#calendar .fc-state-default {
    background: var(--paper2);
    background-image: none;
    border-color: var(--line);
    color: var(--ink2);
    text-shadow: none;
    box-shadow: none;
    border-radius: 0;
    /* Mesma altura/tipografia de .map-filter-actions .btn (painel de
       filtros) — sem isso os botões ficavam com a altura padrão da lib
       (2.1em relativo à fonte herdada, ~27px), visivelmente menor que os
       38px dos controles do resto da página. line-height (não flex:
       são <button> da própria lib) centraliza o texto verticalmente;
       36px = 38px de altura menos 1px de borda de cada lado
       (box-sizing:border-box já vem do fullcalendar.min.css). */
    height: 38px;
    line-height: 36px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    transition: background var(--transition-fast), color var(--transition-fast);
}
#calendar .fc-state-default.fc-corner-left,
#calendar .fc-state-default.fc-corner-right {
    border-radius: 0;
}
#calendar .fc-state-hover {
    background: var(--tint);
    color: var(--ink);
}
#calendar .fc-state-down,
#calendar .fc-state-active {
    color: var(--ink);
    background: var(--tint2);
    background-image: none;
    box-shadow: none
}
.dropzone {
    min-height: 300px;
    border: 1px solid #e5e5e5
}

/*
.x_content {
    direction: rtl;
}
*/

.main_menu .label {
    line-height: 11px;
    margin-top: 4px;
}
@media (max-width: 460px) {
    .dataTables_wrapper .col-sm-6 {
        width: 100%;
        margin-bottom: 5px;
    }
    .dataTables_wrapper .col-sm-6 .dataTables_filter {
        float: none;
    }
}


@media (max-width: 767px) {
   .dataTables_length { float:none; }
}




/* CSS3 Checkbox */
/*
.checkbox-input { display:block;position:relative; }
.checkbox-input:before { display:block;content:"";position:absolute;top:2px;left:0;height:20px;width:20px;background:red;border-radius:3px; }


 #input + label:after {
    content: 'click my input';
    color: blue;
  }

  #input:focus + label:after {
    content: 'not valid yet';
    color: blue;
  }

  #input:valid + label:after {
    content: 'looks good';
    color: red;
  }

/* CSS3 Checkbox - end */
/*

/*
.checkbox 																										{ display: block;position:relative;cursor:pointer; }
.checkbox input 																								{ position:absolute;z-index:-1;opacity:0;left:0;top:0; }
.checkbox div 																									{ position:absolute;top:2px;left:0;height:20px;width:20px;background:#e6e6e6;border-radius:3px; }
.checkbox input:checked ~ div 																			{ background: #1ABC9C; }
.checkbox:hover input:not([disabled]):checked ~ div,
.checkbox input:checked:focus ~ div 																	{ background: #1ABC9C; }
.checkbox input:disabled ~ div 																			{ background: #1ABC9C;opacity: 0.6;pointer-events: none; }
.checkbox div:after 																							{ content: '';position: absolute;display: none; }
.checkbox input:checked ~ div:after 																	{ display: block; }
.checkbox-wp div:after 																					{ left: 7px;top: 3px;width: 7px;height: 11px;border: solid #fff;border-width: 0 2px 2px 0;transform: rotate(40deg); }
.checkbox-wp input:disabled ~ div:after 																{ border-color: #F2F2F2; }


.checkbox-radio div 																							{ border-radius: 50%; }
.checkbox-radio div:after 																					{ left: 7px;top: 7px;height: 6px;width: 6px;border-radius: 50%;background: #fff; }
.checkbox-radio input:disabled ~ div:after 															{ background: #F2F2F2; }


.checkbox, .radio { margin-top:-3px; }

table thead .checkbox { margin-top:-7px;margin-top:-21px; }
table thead .checkbox.radio { margin-top:-7px;margin-top:-21px; }
*/
			
.daterangepicker.xdisplay { width:228px; }

.dataTables_wrapper > .row{
  overflow:auto !important; /*prevent datatables overflowing its container*/
}

/** bootstrap-datetimepicker **/
.input-group.date .input-group-addon{
    border-radius: 0px !important;
    background-color: #ffff !important;
}
/** /bootstrap-datetimepicker **/

/* Barra de navegação do calendário (hoje/anterior/próximo, título do
   período, Pauta/Mês) — sticky no topo da janela, acima do cabeçalho de
   dias e do título de grupo (ambos empilham logo abaixo dela, ver
   .fc-head/.fc-divider mais abaixo neste arquivo). Fundo opaco
   (--paper): sem ele o conteúdo por trás (eventos, texto) apareceria
   por baixo dos botões/título ao rolar. margin-bottom:0 (não mais o
   1em padrão da lib) — aqui esse respiro é padding, senão sobraria uma
   faixa transparente entre a barra grudada e o cabeçalho de dias logo
   abaixo, também sticky. Prefixado com #calendar (mesmo motivo do
   comentário em #calendar .fc-state-default, logo acima neste arquivo):
   fullcalendar.min.css define esse MESMO seletor
   (".fc-toolbar.fc-header-toolbar", 2 classes) com margin-bottom:1em, e
   é carregado DEPOIS deste arquivo — em especificidade empatada, essa
   regra da lib venceria por ordem de carregamento e devolveria o vão. */
#calendar .fc-toolbar.fc-header-toolbar {
    position: sticky;
    top: 0;
    /* Acima do cabeçalho de dias (10020) e do título de grupo (10019),
       que empilham logo abaixo dela — mesma escala de z-index já usada
       nesses dois (ver comentário deles, mais abaixo neste arquivo). */
    z-index: 10021;
    margin-bottom: 0;
    /* Horizontal = var(--space-md), o mesmo respiro lateral do painel de
       filtros logo acima (.map-filters) — sem isso os botões (hoje/
       anterior/próximo, Pauta/Mês) ficavam encostados na borda do
       calendário, sem o mesmo recuo que o resto da página usa. */
    padding: 10px var(--space-md);
    background: var(--paper);
    border: 1px solid var(--line);
    /* Grid de 3 colunas (esquerda/título/direita) em vez do
       float+text-align:center padrão da lib (fullcalendar.js:
       renderSection cria .fc-left/.fc-right flutuantes e .fc-center
       inline-block) — com floats, cada seção tem sua própria altura de
       caixa (os botões de 38px vs a linha de texto do h2, bem mais
       baixa), e as duas ficam ancoradas no topo do toolbar por padrão,
       o que descentraliza o título verticalmente em relação aos
       botões. grid-template-columns: 1fr auto 1fr centraliza a coluna
       do meio (título) de verdade em relação à largura toda, mesmo com
       esquerda/direita de larguras diferentes (ao contrário de
       justify-content:space-between, que só distribui o espaço entre
       elas) — preserva a mesma posição horizontal central que já
       existia. align-items:center resolve o vertical sem precisar de
       margin/padding artificial nem no toolbar nem no h2. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
/* .fc-clear é só o <div> de clearfix que a lib usa pra fechar os floats
   (renderHeader, fullcalendar.js) — sem função nenhuma dentro de um
   grid (não há float pra limpar) e, sem escondê-lo, viraria uma 4ª
   célula extra no grid de 3 colunas. */
#calendar .fc-toolbar.fc-header-toolbar .fc-clear {
    display: none;
}
/* A lib renderiza esquerda/direita/centro nessa ordem. Fixar a linha
   impede que o título seja colocado na linha seguinte pelo grid. */
#calendar .fc-toolbar.fc-header-toolbar .fc-left,
#calendar .fc-toolbar.fc-header-toolbar .fc-center,
#calendar .fc-toolbar.fc-header-toolbar .fc-right {
    grid-row: 1;
}
#calendar .fc-toolbar.fc-header-toolbar .fc-left {
    grid-column: 1;
    justify-self: start;
}
#calendar .fc-toolbar.fc-header-toolbar .fc-center {
    grid-column: 2;
    justify-self: center;
}
#calendar .fc-toolbar.fc-header-toolbar .fc-right {
    grid-column: 3;
    justify-self: end;
}
#calendar .fc-center h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--ink);
    font-size: 16px !important;
    padding-top: 0 !important;
    /* h2 tem margin vertical por padrão em qualquer lugar do app (ver
       regra genérica "h2, .h2" no topo deste arquivo) — dentro do grid
       essa margem por si só já bastaria pra descentralizar de novo
       mesmo com align-items:center no pai (o h2 ficaria mais alto por
       causa da margem, não da altura da linha). Zerando, quem centraliza
       é só o align-items do grid. */
    margin: 0;
}


/* Overlay de "Trabalhando..." — usado só nas ações pontuais (salvar/
   editar/excluir tarefa, calendarJavascript.php) via .show()/.hide() do
   próprio jQuery. Chegou a cobrir o carregamento inicial da página
   também, mas esse papel virou o skeleton logo abaixo
   (#calendar-skeleton) — mais preciso, porque mostra o formato real do
   que está carregando em vez de bloquear a tela inteira. display:none
   aqui é o padrão de novo por causa disso.
   position:fixed + inset cobre a viewport inteira independente de scroll —
   mais simples e robusto que o antigo position:absolute + height:100%
   (que dependia do elemento esticar até o fim do conteúdo do body). */
#loading {
    /* display:none (não flex) de propósito — é o que o jQuery espera
       encontrar pra alternar com .show()/.hide() sem precisar de uma
       classe própria; .show() troca isso por "block" (o padrão dele pra
       <div>), nunca por "flex". A centralização do card por baixo não
       depende disso: usa position:absolute + transform, não flexbox. */
    display: none;
    position: fixed;
    inset: 0;
    /* Era 9999 — abaixo do toolbar sticky (10021), cabeçalho de dias
       (10020) e título de grupo (10019) da pauta (ver #calendar
       .fc-toolbar.fc-header-toolbar mais abaixo), então os 3 continuavam
       visíveis por cima do dimmer enquanto salva/move/edita uma tarefa
       (só a pauta usa #loading, ver calendarJavascript.php). 10026: acima
       do skeleton de carregamento inicial (10025, o mais alto que o
       calendário empilha sozinho), mas ainda abaixo de dropdown/tooltip
       do calendário (10030+) e de qualquer modal (10039/10040+) — não
       compete com eles, só com o que a pauta mesma põe por cima. */
    z-index: 10026;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.loading-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 40px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .14), 0 2px 8px rgba(16, 24, 40, .06);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* Cinza neutro com um quarto na cor de destaque do app (mesma do botão
       "Aplicar" dos filtros, --amber-deep) — gira só essa borda, sem
       precisar de imagem/gif. */
    border: 3px solid var(--line);
    border-top-color: var(--amber-deep);
    animation: loading-spin .7s linear infinite;
}

.loading-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink2);
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

/* Sem 3ª preferência de movimento reduzido pra parar de girar de vez —
   só desacelera bastante, ainda comunica "processando". */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner { animation-duration: 2.2s; }
}

footer {
    display: none;
}

/* Mantém a navegação lateral presa à viewport e rola somente seu conteúdo. */
@media (min-width: 992px) {
    .nav-md .container.body .col-md-3.left_col,
    .nav-sm .container.body .col-md-3.left_col {
        position: fixed;
        top: 0;
        bottom: auto;
        height: 100vh;
        min-height: 100vh;
    }

    .container.body .col-md-3.left_col > .left_col.scroll-view {
        width: 100%;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }

    .container.body .col-md-3.left_col > .left_col.scroll-view::-webkit-scrollbar {
        width: 6px;
    }

    .container.body .col-md-3.left_col > .left_col.scroll-view::-webkit-scrollbar-track {
        background: transparent;
    }

    .container.body .col-md-3.left_col > .left_col.scroll-view::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
        border-radius: 3px;
    }

    .container.body .col-md-3.left_col > .left_col.scroll-view::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.4);
    }
}

/* Fundo branco nas células comuns da grade (dias sem nada de especial) e
   na coluna de Grupos/Recursos — nenhuma das duas tem fundo próprio na
   lib (fullcalendar.min.css: .fc-unthemed não define nada aqui;
   scheduler.min.css chega a zerar de propósito com
   ".fc-time-area .fc-rows .ui-widget-content{background:0 0}"), então
   sem isso os dois deixavam aparecer o cinza de body/.right_col por
   trás. #calendar .fc-bg td é a mesma camada de pintura de fundo que o
   fim de semana/hoje usam logo abaixo — e por isso essas duas regras
   (mais específicas, com .fc-sun/.fc-today) continuam vencendo por cima
   deste branco-base. #calendar .fc-resource-area td é a célula real da
   coluna Grupos/Recursos (não a camada .fc-bg, que ali é só decorativa
   por trás do texto). */
#calendar .fc-bg td,
#calendar .fc-resource-area td {
    background: var(--paper);
}

/* Fim de semana: --bg (mesmo tom levemente mais quente que --paper usado
   no corpo da página) em vez do cinza escuro #e4e4e4 antigo — diferencia
   sem pesar. Escopado em #calendar .fc-bg (camada de pintura de fundo da
   timeline, mesma que o feriado usa via .css() inline em
   calendarJavascript.php — ver comentário lá) pra não repetir a pintura
   à toa na camada de grade (.fc-slats), que fica por baixo dela. */
#calendar .fc-bg td.fc-sun,
#calendar .fc-bg td.fc-sat {
    background: var(--bg);
}

/* Hoje: círculo âmbar no número (ver regra do cabeçalho, mais abaixo) +
   marcação bem suave na coluna toda (--tint, o mesmo creme usado no
   hover dos botões/menu) — precisa vir DEPOIS da regra de fim de semana
   pra vencer o empate de especificidade quando hoje cai num sábado/
   domingo (mesma regra de cascata já usada nos outros pares
   hover/ativo deste arquivo). */
#calendar .fc-bg td.fc-today {
    background: var(--tint);
}

/* Cabeçalho de dias em 2 linhas (dia da semana + número), geradas pela
   própria lib via slotLabelFormat: ['ddd', 'D'] (calendarJavascript.php) —
   escopado em .fc-time-area (não .fc-resource-area, onde ficam os
   cabeçalhos "Grupos"/"Recursos") pra não pegar as outras células
   fc-widget-header. 1ª linha (dia da semana) discreta e maiúscula tipo
   rótulo; 2ª linha (número) em destaque — mesma hierarquia do Google
   Agenda usado como referência, sem copiar o tamanho/arredondamento dele. */
#calendar .fc-time-area table tr:first-child th .fc-cell-text {
    padding: 4px 4px 0 !important;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink3);
}
#calendar .fc-time-area table tr:last-child th .fc-cell-text {
    padding: 1px 4px 4px !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
/* Círculo âmbar no número do dia atual — só na 2ª linha (número), não na
   linha do nome do dia da semana, que também carrega .fc-today (mesma
   data). Tamanho fixo + inline-flex centralizam o texto no círculo
   independente do dígito ter 1 ou 2 caracteres ("8" vs "10"). */
#calendar .fc-time-area table tr:last-child th.fc-today .fc-cell-text {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--amber);
    color: var(--ink);
}

.fc-timeline th {
    /* nowrap + ellipsis (defensivo, não deve disparar no uso normal): com
       slotLabelFormat curto (ver acima) o texto do cabeçalho nunca deveria
       precisar quebrar linha; pre-wrap (valor antigo) foi removido porque
       era exatamente o que deixava o nome do dia cortado ao meio (ex.:
       "Quin" de "Quinta", que também vinha errado do locale, ver
       slotLabelFormat) quando a coluna ficava mais estreita que o texto. */
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cor-base pro texto de qualquer célula (cabeçalhos "Grupos"/"Recursos",
   nome do grupo — ex. "BI" — e o que mais reusar essa classe): sem isso
   herdava o azul-acinzentado de body{color:#73879C} (mesmo problema já
   documentado em .resource-summary-modal .modal-title, mais abaixo neste
   arquivo), que não tem nada a ver com a paleta neutra do menu/filtros.
   Regras mais específicas (nome do recurso, cabeçalho de dias, valores
   negativos em vermelho) continuam decidindo por conta própria — esta é
   só o piso, aplicada antes delas neste arquivo de propósito, pra elas
   vencerem em empate de especificidade quando compartilham essa mesma
   classe. */
.fc-cell-text {
    display: inline-block !important;
    padding: 0 7px !important;
    white-space: pre-line;
    text-align: left !important;
    color: var(--ink2);
}

.fc-content .fc-time {
    display: none !important;
}

a.fc-timeline-event:focus {
    color: #FFF !important;
}

/* Alocações (blocos de tarefa): pequeno arredondamento + respiro interno
   consistente — a lib deixa isso 0/quase-0 por padrão (scheduler.min.css:
   .fc-timeline-event{border-radius:0} .fc-content{padding:0 1px}).
   border-radius não altera a caixa (raio de canto não desloca left/width),
   então a posição/duração representada continua exata; o mesmo vale pro
   box-shadow inset logo abaixo, que também não soma à largura real (ao
   contrário de aumentar a margem entre eventos, que mudaria o próprio
   limite renderizado — por isso a margem de 1px da lib entre eventos
   adjacentes não foi tocada). */
.fc-timeline-event {
    border-radius: 4px;
    /* A lib (scheduler.min.css) dá a cada evento border-color inline igual
       à cor de fundo (ver eventRender/calendarJavascript.php) — some com
       ela (border-width intacto, só a cor fica transparente, então a caixa
       não muda de tamanho) e deixa só o contorno abaixo, que é sempre a
       mesma cor neutra em qualquer evento. Duas bordas coloridas diferentes
       uma dentro da outra (a da lib + o contorno) é o que lia como um
       relevo/entalhe; com só uma, o contorno fica plano. */
    border-color: transparent !important;
    /* Contorno bem sutil e semi-transparente — não é uma borda de verdade
       (não soma pixels à largura/posição do bloco, só pinta por dentro),
       serve só pra separar visualmente eventos vizinhos do mesmo recurso
       quando as cores de cliente são parecidas ou claras. */
    box-shadow: inset 0 0 0 1px rgba(14, 13, 11, .12);
}
/* .fc-content já vem com white-space:nowrap + overflow:hidden da lib
   (scheduler.min.css) — só falta text-overflow:ellipsis pro título
   truncar com reticências em vez de simplesmente cortar sem aviso. O
   atributo title nativo (eventRender, calendarJavascript.php) mostra o
   texto completo no hover e no foco por teclado; abrir o evento (clique)
   mostra o valor inteiro no campo do formulário de edição. */
.fc-timeline-event .fc-content {
    padding: 2px 6px;
    text-overflow: ellipsis;
}
/* Títulos das tarefas sem sombra sobre a cor de cada cliente. */
.fc-timeline-event .fc-title {
    text-shadow: none;
}

/* Linhas de 1px e baixo contraste (--line, a mesma borda usada nos
   campos/cards dos filtros) — antes 0.2rem (~3.2px) numa cor escura padrão
   da lib, pesada demais pra grade de um calendário de baixa densidade
   visual. border-style aqui também: sem isso a resizer entre Recursos e a
   timeline (regra logo abaixo) ficava com o "double" padrão da lib, que a 1px
   de largura ainda desenha como 2 traços — força tudo a solid, uniforme. */
.fc td, .fc th {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--line) !important;
}

/* Resizer entre a coluna de Recursos e a timeline (arrasta pra redimensionar
   a coluna) — um <td> próprio (.fc-divider.fc-col-resizer), não um espaço
   vazio. A lib dá border-left/right "double" (2 traços) e, no corpo (fora
   do cabeçalho), um fundo cinza (#eee) que não existe em mais lugar nenhum
   da paleta — somado à borda "solid" da coluna vizinha (regra acima), lia
   como uma faixa dupla com vão cinza no meio, em vez de 1 linha só. Zera a
   borda própria e deixa o fundo igual ao das colunas ao lado — quem faz a
   linha vira só a borda comum (regra acima) da célula da timeline, uma coisa
   só, com a mesma espessura/cor de todo resto da grade. */
.fc-divider.fc-col-resizer {
    border-width: 0 !important;
    background: var(--paper) !important;
}

/* Cabeçalho de dias: 2 linhas de tabela empilhadas (nome do dia "SEG" e
   número "8", ver dump da tag <table> do fc-time-area) — cada uma leva
   border-top/bottom da regra .fc td, .fc th acima, então a base da 1ª +
   o topo da 2ª formavam a linha vista entre nome e número. Some só com essa
   costura interna; a borda externa do blooco (topo da 1ª linha = base da
   barra de navegação, base da 2ª = topo do corpo) continua intacta.
   Escopado em .fc-head (thead) de propósito — .fc-time-area também existe
   no corpo (uma só linha por recurso ali), e ali border-top/bottom das duas
   pontas SÃO a borda real entre recursos; não podem ser removidas. */
.fc-head .fc-time-area table tr:first-child th { border-bottom-width: 0 !important; }
.fc-head .fc-time-area table tr:last-child th { border-top-width: 0 !important; }

/* Remove só a moldura externa (as bordas de fora do grid inteiro),
   mantendo as linhas de dentro (regra acima) intactas. Como o grid é
   várias tabelas internas lado a lado (Grupos/Recursos + timeline,
   cabeçalho + corpo) e um número variável de linhas de recurso, não dá
   pra mirar cada célula do perímetro com segurança — algumas são a
   própria borda externa, outras (a última linha de um recurso, por
   exemplo) são um separador interno que precisa continuar visível, e as
   duas usam a mesma borda em toda célula (regra acima). Em vez de mexer
   borda por borda, pinta por cima só o 1px mais externo do próprio
   #calendar com a cor que já aparece ali hoje (--paper, o fundo da barra
   de navegação/coluna de recursos/células comuns, ver regras de fundo
   logo abaixo) — apaga a moldura visualmente sem tocar em nenhuma regra
   de borda das células. */
#calendar {
    box-shadow: inset 0 0 0 1px var(--paper);
}

.fc-resource-area .fc-icon {
    display: none !important;
}

/* Sticky do calendário (barra de navegação, dias, cabeçalho "Grupos"/
   "Recursos" e título de grupo) enquanto a página rola verticalmente —
   os 3 níveis empilham nessa ordem, cada um logo abaixo do anterior.
   O calendário é inicializado com height:'auto' (calendarJavascript.php),
   então ele nunca ganha scroll vertical interno — quem rola é a própria
   janela. Isso é o que torna sticky viável sem nenhum wrapper com
   overflow: não há ancestral entre esses elementos e <body> com overflow
   setado (position:fixed do menu lateral/.left_col não conta, são irmãos
   do #calendar, não ancestrais). O scroll horizontal (dias/recursos mais
   largos que a tela) continua sendo interno a cada quadrante
   (.fc-scroller, com overflow-x setado via JS) e não é afetado por isso.
   Aplicado no <td> (não no <thead>/<tr>): sticky em elemento de tabela é
   mais previsível no nível de célula entre navegadores. */
.fc-head td.fc-widget-header {
    position: sticky;
    /* --fc-toolbar-height (medido em JS, updateStickyHeadOffset) é a
       altura real da barra de navegação logo acima — sem isso, os dois
       ocupariam o mesmo top:0 e se sobreporiam ao rolar. */
    top: var(--fc-toolbar-height, 0px);
    /* Precisa ficar acima de tudo que o próprio calendário pode empilhar
       por cima dele ao rolar — não só do z-index:2 que a lib Scheduler já
       usa no header (scheduler.min.css, .fc-scrolled .fc-head
       .fc-scroller), mas também do maior z-index que um evento chega a
       usar: eventMouseover dá z-index:10000 ao bloco da tarefa em hover, e
       o tooltip dele (.tooltipevent) e o de "Xh disp." (.resource-tooltip)
       vão a 10001/10010 (calendarJavascript.php). Sem isso, um evento ou
       tooltip hovered bem no topo da tela aparecia por cima do cabeçalho
       sticky. Ainda fica bem abaixo de qualquer modal do app (o menor já
       usa z-index >= 9998, o maior 10500) — não disputa com eles. */
    z-index: 10020;
    background: var(--paper);
}

/* Título de grupo (linha "MÍDIA", "ATENDIMENTO" etc., renderizada como
   uma <tr> própria dentro da tabela interna da coluna de Recursos) sticky
   logo abaixo do cabeçalho de dias, pra continuar indicando de qual grupo
   é o recurso mesmo depois de rolar bastante numa lista longa.
   --fc-head-height e --fc-toolbar-height são medidos em JS
   (updateStickyHeadOffset, em calendarJavascript.php) porque as duas
   alturas mudam (cabeçalho conforme a view Pauta x Mês; barra de
   navegação quando quebra linha numa janela estreita); os valores em px
   aqui são só o fallback pro instante entre o 1º paint e essa 1ª medição.
   :not(.fc-col-resizer) exclui a barra de redimensionamento entre a
   coluna de Recursos e a timeline — ela reusa a classe .fc-divider mas é
   uma barra vertical de altura inteira, não um título de grupo, e já fica
   sticky (mesmo top do cabeçalho) por já carregar .fc-widget-header
   quando é a do cabeçalho (ver regra acima); a do corpo (altura inteira)
   não deve ficar presa no topo. */
.fc-divider:not(.fc-col-resizer) {
    position: sticky;
    top: calc(var(--fc-toolbar-height, 0px) + var(--fc-head-height, 42px));
    /* 1 abaixo do cabeçalho de dias/recursos (mesmo motivo do z-index
       acima) — só pra manter os dois sticky em ordem visual entre si; não
       chegam a se sobrepor de verdade (top diferente). */
    z-index: 10019;
    background: var(--paper);
}

/* Nomes de grupo completos, inclusive quando não há espaços no nome. */
#calendar .fc-body .fc-resource-area td[rowspan] > .fc-cell-content,
#calendar .fc-body .fc-resource-area td[rowspan] > .fc-cell-content > .fc-cell-text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-overflow: clip;
}

/* A página rola verticalmente (height:auto). Remova os scroll containers
   intermediários apenas na coluna de nomes para o sticky seguir a janela.
   clip mantém o recorte horizontal sem criar outro scroll container. */
#calendar .fc-body .fc-resource-area .fc-scroller,
#calendar .fc-body .fc-resource-area .fc-scroller-clip {
    overflow-x: clip !important;
    overflow-y: visible !important;
}
#calendar .fc-body .fc-resource-area td > .fc-cell-content,
#calendar .fc-body .fc-resource-area td > div > .fc-cell-content {
    /* O ScrollFollower da lib escreve position/top inline. */
    position: sticky !important;
    top: calc(var(--fc-toolbar-height, 0px) + var(--fc-head-height, 42px)) !important;
    z-index: 1;
    background: var(--paper);
}

.resource-availability-line {
    display: block;
    padding: 7px !important;
    margin-top: 3px;
    /* --ink3 (cinza quente do resto do app) no lugar do #6b7280 (cinza
       frio, de uma paleta à parte) — mesmo motivo do .resource-tooltip
       logo abaixo. Continua "secundário": mais claro que o nome do
       recurso (--ink2/--ink, ver .resource-name-link) e menor por já ser
       um elemento <small> (resourceAvailabilityLineHtml,
       calendarJavascript.php). */
    color: var(--ink3);
    cursor: help;
    width: max-content;
    /* Reserva uma folga extra além do padding interno, pra textos longos
       (ex: "245h 30min disp.") não encostarem na borda da coluna Recursos
       quando a caixa bate no teto de largura da coluna. */
    max-width: calc(100% - 8px);
    white-space: pre-line;
}

.resource-availability-line--negative {
    /* --neg, o vermelho já usado no resto do app pra valor negativo (ver
       :root no topo deste arquivo) — antes um #d9534f solto, de uma
       paleta à parte da "Dossiê Editorial Quente". */
    color: var(--neg);
    font-weight: bold;
}

/* Segunda linha ("Xh disp. hoje"), empilhada logo abaixo da do período —
   reduz o respiro de cima pra não abrir um vão grande entre as duas. */
.resource-availability-line--today {
    padding-top: 0 !important;
    margin-top: 0;
}

.resource-availability-icon {
    margin-right: 4px;
    font-size: 10px;
    color: var(--ink3);
}

.resource-availability-line--negative .resource-availability-icon {
    color: var(--neg);
}

/* Tooltip customizado de capacidade/disponibilidade do recurso (hover na
   linha "Xh disponíveis") — tokens do app (--paper/--line/--ink*) em vez
   dos cinzas frios soltos de antes (#fff/#e5e7eb/#374151 etc.), pra
   parecer parte do mesmo app que o menu e os filtros; raio/sombra mais
   discretos que --shadow-crisp (reservado pra acentos, não pra um
   tooltip leve). Continua sem usar o title nativo (cursor:help acima já
   indica que há mais informação, mas o conteúdo rico — 3 linhas com
   rótulo+valor — não cabe num tooltip nativo de texto simples). */
.resource-tooltip {
    display: none;
    position: absolute;
    z-index: 10010;
    min-width: 170px;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(14, 13, 11, 0.12);
    font-size: 12px;
    line-height: 1.5;
}

.resource-tooltip-period {
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    color: var(--ink3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.resource-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0;
}

.resource-tooltip-row .resource-tooltip-label {
    color: var(--ink3);
}

.resource-tooltip-row .resource-tooltip-value {
    color: var(--ink2);
    font-weight: 600;
}

.resource-tooltip-row--highlight {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.resource-tooltip-row--highlight .resource-tooltip-label,
.resource-tooltip-row--highlight .resource-tooltip-value {
    color: var(--ink);
    font-weight: 700;
}

.resource-tooltip-row--negative .resource-tooltip-value {
    color: var(--neg);
}

/* Nome do recurso clicável (abre o modal de resumo consolidado) — peso
   600 e --ink2 (mais escuro que o --ink3 da disponibilidade/cargo) dão o
   destaque pedido pro nome frente ao resto da célula, sem sublinhado
   permanente (só aparece no hover/foco, abaixo) — o sublinhado o tempo
   todo brigava com o resto da UI, que não usa esse tratamento em nenhum
   outro link. cursor:pointer + o sublinhado on-hover/focus continuam
   deixando claro que dá pra clicar. */
.resource-name-link {
    cursor: pointer;
    color: var(--ink2);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.resource-name-link:hover,
.resource-name-link:focus {
    color: var(--ink);
    text-decoration: underline;
    outline: none;
}

/* Bootstrap abre modal (.modal) e backdrop (.modal-backdrop) com
   z-index:1050/1040 (bootstrap.min.css) — bem abaixo do que o calendário
   chega a empilhar ao rolar (cabeçalho de dias/título de grupo em 10019-
   10020, barra de navegação sticky em 10021, skeleton de carregamento em
   10025, tooltips/dropdowns do calendário até 10030). Sem isso, abrir
   qualquer modal comum do app (adicionar/editar tarefa, resumo do
   recurso, editar perfil) com a página rolada deixava esses elementos do
   calendário aparecendo por cima do modal e do backdrop. Carregado depois
   de bootstrap.min.css (header.php), então essa regra vence em
   especificidade empatada (mesmo truque usado em #calendar .fc-toolbar.
   fc-header-toolbar, mais abaixo neste arquivo). Fica abaixo de
   .overload-confirm-modal (10500, mais abaixo), que precisa empilhar por
   cima de um modal comum já aberto. */
.modal {
    z-index: 10040;
}
.modal-backdrop {
    z-index: 10039;
}

/* Modal de resumo consolidado por recurso — tons de cinza, mesma paleta do
   restante do calendário (#374151/#6b7280/#9ca3af/#e5e7eb), sobrecarga em
   vermelho (#d9534f) igual à linha "Xh disp." negativa. */
.resource-summary-modal .modal-title {
    /* Sobrescreve o azul-acinzentado herdado de body{color:#73879C} — o
       Bootstrap não define cor própria pra .modal-title. */
    color: #111827;
    margin-bottom: 2px;
}

.resource-summary-modal .resource-summary-cargo {
    display: block;
    color: #6b7280;
    font-weight: normal;
    font-size: 13px;
}

/* Período/hoje podem ter várias linhas de cliente na legenda — trava a
   altura do modal e rola só o corpo, sem empurrar o rodapé pra fora da
   tela em telas menores. */
.resource-summary-modal .modal-body {
    max-height: 85vh;
    overflow-y: auto;
}

.resource-summary-state {
    display: none;
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
}

.resource-summary-state--error {
    color: #d9534f;
}

.resource-summary-state-icon {
    display: block;
    font-size: 28px;
    margin-bottom: 10px;
}

.resource-summary-content {
    display: none;
}

/* Hoje e período lado a lado — dois cards próprios, pra separar
   visualmente os dois grupos de indicadores + gráfico. */
.resource-summary-cards {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.resource-summary-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    flex: 1 1 0;
    min-width: 0; /* permite a legenda truncar em vez de esticar o card */
}

.resource-summary-section-title {
    color: #374151;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 14px 0 6px;
}

.resource-summary-section-title:first-child {
    margin-top: 0;
}

.resource-summary-selected-period {
    font-weight: normal;
}

.resource-summary-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-summary-indicator {
    flex: 1 1 110px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 7px 10px;
}

.resource-summary-indicator-label {
    color: #6b7280;
    font-size: 11px;
    margin-bottom: 2px;
}

.resource-summary-indicator-value {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
}

.resource-summary-indicator--negative {
    background: #fdf2f2;
    border-color: #f3d3d1;
}

.resource-summary-indicator--negative .resource-summary-indicator-label,
.resource-summary-indicator--negative .resource-summary-indicator-value {
    color: #d9534f;
}

.resource-summary-no-capacity {
    flex: 1 1 100%;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    color: #6b7280;
    text-align: center;
}

.resource-summary-empty-clients {
    color: #6b7280;
    font-size: 13px;
    padding: 10px 0 2px;
}

.resource-summary-chart-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
}

.resource-summary-chart-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    flex: 0 0 130px;
}

.resource-summary-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.resource-summary-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    margin: 0 -6px;
    border-radius: 4px;
    font-size: 12px;
    cursor: default;
    transition: background-color .1s ease;
}

/* Acompanha o esmaecimento das outras fatias do donut (JS) quando o mouse
   passa num item da legenda. */
.resource-summary-legend-item:hover {
    background: #f9fafb;
}

.resource-summary-legend-item:last-child {
    border-bottom: none;
}

/* Fatia sintética de capacidade livre (não é um cliente de verdade) — nome
   em itálico pra diferenciar visualmente dos clientes na legenda. */
.resource-summary-legend-item--available .resource-summary-legend-name {
    font-style: italic;
    color: #6b7280;
}

.resource-summary-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: 0 0 12px;
}

.resource-summary-legend-name {
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-summary-legend-value {
    color: #6b7280;
    white-space: nowrap;
}

/* Tooltip HTML do donut (fora do <canvas>, sem limite de 200x200px) — mesmo
   estilo do .resource-tooltip já usado na linha "Xh disp.". */
.resource-summary-chart-tooltip {
    position: absolute;
    z-index: 10020;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s ease;
    transform: translate(-50%, -115%);
    max-width: 220px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .resource-summary-cards {
        flex-direction: column;
    }

    .resource-summary-chart-row {
        flex-direction: column;
        align-items: stretch;
    }

    .resource-summary-chart-wrap {
        width: 100%;
        margin: 0 auto;
    }
}

/* Modal de aviso de sobrecarga — substitui o confirm() nativo do
   navegador ao salvar/mover uma tarefa que estoura a capacidade diária de
   algum recurso. Mesma paleta neutra de cinzas do modal de resumo do
   recurso, sem cor de alerta (vermelho/âmbar) — a ênfase vem do peso da
   fonte e do "chip" de sobrecarga, não da cor. */
.overload-confirm-modal .modal-title {
    color: #111827;
    display: flex;
    align-items: center;
    gap: 10px;
}

.overload-confirm-modal .overload-modal-icon {
    color: #6b7280;
    font-size: 20px;
}

.overload-confirm-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.overload-confirm-modal .overload-modal-summary {
    color: #374151;
    margin: 0 0 14px;
}

.overload-confirm-modal .overload-modal-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.overload-confirm-modal .overload-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.overload-confirm-modal .overload-modal-table thead th {
    background: #f9fafb;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .02em;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.overload-confirm-modal .overload-modal-table tbody td {
    padding: 10px 14px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
}

.overload-confirm-modal .overload-modal-table tbody tr:last-child td {
    border-bottom: 0;
}

.overload-confirm-modal .overload-modal-table tbody tr:hover td {
    background: #f9fafb;
}

.overload-confirm-modal .overload-modal-excess {
    display: inline-block;
    background: #e5e7eb;
    color: #111827;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 8px;
}

.overload-confirm-modal .overload-modal-more td {
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

.overload-confirm-modal .modal-footer .btn {
    border-radius: 7px;
    font-weight: 600;
    padding: 8px 16px;
}

.overload-confirm-modal .overload-modal-cancel {
    border: 1px solid #d4d4d8;
    background: #fff;
    color: #52525b;
}

.overload-confirm-modal .overload-modal-confirm {
    border: 1px solid #27272a;
    background: #27272a;
    color: #fff;
}

.overload-confirm-modal .overload-modal-confirm:hover,
.overload-confirm-modal .overload-modal-confirm:focus {
    border-color: #18181b;
    background: #18181b;
    color: #fff;
}

/* Empilha acima de qualquer outro modal já aberto (adicionar/editar
   tarefa) — mesma convenção de z-index elevado usada pelo antigo drawer de
   filtros. */
.overload-confirm-modal {
    z-index: 10500;
}

body.overload-confirm-modal-open .modal-backdrop:last-of-type {
    z-index: 10499;
}

@media (max-width: 600px) {
    .overload-confirm-modal .overload-modal-table {
        font-size: 12px;
    }

    .overload-confirm-modal .overload-modal-table thead th,
    .overload-confirm-modal .overload-modal-table tbody td {
        padding: 8px 10px;
    }
}

/* Selo de status do Taskrow no bloco da tarefa (eventRender em
   calendarJavascript.php). Mesma lógica de ênfase por cor do chip de
   sobrecarga: neutro por padrão, vermelho só quando atrasada, verde só
   quando entregue — sem gritar em cada bloco do calendário. */
.fc-event.taskrow-status--late,
.fc-event.taskrow-status--delivered,
.fc-event.taskrow-status--progress,
.fc-event.taskrow-status--loading,
.fc-event.taskrow-status--notfound {
    /* 15px cobriria só a altura do selo (sem folga nenhuma acima dele);
       o excedente é o respiro entre o texto da task e o(s) selo(s). */
    padding-bottom: 20px;
}

/* Wrapper dos selos (status + atrasada, quando os dois aparecem) — filho
   direto de .fc-event, numa linha abaixo do texto, um do lado do outro,
   ancorado só à esquerda do bloco. Não fica dentro de .fc-title/.fc-content
   de propósito: o ScrollFollowerSprite do Scheduler (que mantém o texto
   visível durante o scroll horizontal em barras largas) desenha um clone
   do .fc-title com estilo próprio via JS que ignora overflow do CSS —
   colar o selo lá dentro vazava o texto do card. Aqui o selo não segue
   esse clone durante o scroll (acompanha a posição real da barra), mas
   evita esse problema por completo. */
.taskrow-status-badges {
    position: absolute;
    left: 2px;
    bottom: 2px;
    /* width:auto (padrão) já faz o container ocupar só o espaço do seu
       conteúdo (shrink-to-fit) — "max-width" só entra como teto pro
       card estreito. "overflow: hidden" é o cinto de segurança: mesmo
       num bloco de 1 dia (mais estreito que "Atrasada" sozinho), o
       excedente é cortado em vez de vazar pra fora do card. */
    max-width: calc(100% - 4px);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

.taskrow-status-badge {
    /* flex-grow: 0 sempre — os selos nunca devem esticar além do
       próprio texto. flex-shrink alto: em espaço apertado, o selo de
       status (o mais variável em tamanho) cede espaço primeiro. */
    flex-grow: 0;
    flex-shrink: 3;
    flex-basis: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    border-radius: 3px;
    padding: 0 4px;
    background: rgba(255, 255, 255, 0.85);
    color: #374151;
}

.taskrow-status-badge--late {
    /* "Atrasada" é sempre curto e só encolhe por último — mas ainda
       encolhe (flex-shrink: 1, não mais 0): num bloco de 1 dia ele
       pode ser mais largo que o próprio card sozinho, então precisa
       conseguir truncar com "…" em vez de ultrapassar a borda. */
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    background: #fee2e2;
    color: #b91c1c;
}

.taskrow-status-badge--delivered {
    background: #dcfce7;
    color: #15803d;
}

/* Selo neutro enquanto a consulta ao Taskrow ainda não voltou — some
   assim que a resposta chega (achando status ou não), nunca fica preso
   pulsando (loadTaskrowStatuses() sempre limpa o pendente no .always()). */
.taskrow-status-badge--loading {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    animation: taskrow-status-pulse 1.2s ease-in-out infinite;
}

/* A consulta ao Taskrow voltou, mas a referência (cliente/job/task do
   link) não foi reconhecida (found: false) — cor de alerta (âmbar), não
   vermelho: não é a task que está atrasada, é o vínculo com o Taskrow que
   pode estar quebrado e merece checagem manual (ver
   TASKROW_STATUS_NOTFOUND_NOTICE). */
.taskrow-status-badge--notfound {
    background: #fef3c7;
    color: #92400e;
}

@keyframes taskrow-status-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

/* Selo "Pré-alocação" no bloco da tarefa (ind_pre_allocation = 1 —
   applyPreAllocationBadge() em calendarJavascript.php). Mesma
   posição/mecânica do selo de status do Taskrow acima (canto inferior
   esquerdo, padding-bottom abrindo espaço), container próprio — decisão
   14/09 de não reaproveitar .taskrow-status-badges: os 2 não colidem na
   prática (pré-alocação sempre tem ds_link = "#", que já pula a consulta
   ao Taskrow, ver taskrowCandidateItems), então cada selo fica
   independente em vez de 2 funções coordenando o mesmo container. Cor
   neutra por decisão do usuário (14/09, revertido de âmbar sólido) — mas
   um selo neutro sozinho (1ª tentativa: branco translúcido) não chamava
   atenção o bastante pra sinalizar "isso ainda não é uma alocação real".
   2ª tentativa (referência: print enviado pelo usuário): listras
   diagonais no bloco inteiro (padrão tipo rascunho/hachurado, textura em
   vez de cor — se destaca de qualquer card vizinho independente da cor do
   cliente dele) + selo com contorno sólido (papel/tinta) em vez de
   preenchimento. background-image (não background-color, que a lib
   escreve inline por evento — ver .fc-timeline-event abaixo) cobre a cor
   do cliente sem precisar de !important: imagem de fundo sempre pinta por
   cima da cor de fundo, mesmo vindo de uma classe. (Testada uma 3ª versão
   com listras translúcidas preservando a cor do cliente por baixo —
   revertida a pedido do usuário, voltou pra esta.) */
.fc-event.event--pre-allocation {
    padding-bottom: 20px;
    background-image: repeating-linear-gradient(135deg, var(--paper) 0, var(--paper) 5px, var(--paper2) 5px, var(--paper2) 10px);
    /* !important necessário: o Scheduler escreve a cor do texto inline por
       evento (.css("color", ...) em scheduler.min.js) — estilo inline
       sempre vence regra de classe, com qualquer especificidade. Sem isso
       o título ficava na cor padrão da lib (clara), ilegível sobre o fundo
       agora claro. */
    color: var(--ink) !important;
    /* Contorno um pouco mais escuro que o inset padrão de qualquer evento
       (.fc-timeline-event, rgba(14,13,11,.12)) — só a opacidade sobe
       (.12 -> .35), largura continua 1px igual a todo card: 1.5px numa
       cor sólida (1ª tentativa) tinha ficado forte demais, mas sem
       contorno nenhum o card ficava sem fechar contra o fundo agora
       claro (2ª tentativa, usuário pediu escurecer de novo). */
    box-shadow: inset 0 0 0 1px rgba(14, 13, 11, .35);
}
.pre-allocation-badges {
    position: absolute;
    left: 2px;
    bottom: 2px;
    max-width: calc(100% - 4px);
    overflow: hidden;
    /* display:flex + min-width:0 no filho (mesmo par usado em
       .taskrow-status-badges/badge acima) — sem isso o wrapper, sem
       width própria (só "left", shrink-to-fit), não respeitava o
       max-width de volta: o max-width:100% do filho (versão anterior,
       inline-block) não consegue restringir o shrink-to-fit do pai que
       o contém, então em cards estreitos (bloco de 1 dia) o selo vazava
       pra fora do evento em vez de truncar com "…". */
    display: flex;
    margin-left: 4px;
}
.pre-allocation-badge {
    /* flex-shrink:1 (não 0) pelo mesmo motivo de .taskrow-status-badge:
       sozinho já pode ser mais largo que um bloco de 1 dia. */
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 3px;
    padding: 0 4px;
    background: var(--paper);
    border: 1px solid var(--ink3);
    color: var(--ink2);
}

/* Aviso de divergência dentro do modal de edição de tarefa
   (allocation/calendar.php, #task-taskrow-divergence-note) — identidade
   visual do app (mesmos tokens de :root usados em admin/reports_*.php),
   não o .alert-warning amarelo padrão do Bootstrap. --neg é o mesmo tom já
   usado pra "divergência"/"sobrecarga" nos relatórios (.reports-overload),
   só como friso lateral discreto em vez de fundo sólido. */
.task-divergence-note {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--neg);
    border-radius: 4px;
    padding: 14px 16px;
    margin: 0 0 20px;
}
.task-divergence-note-title {
    margin: 0 0 6px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
}
.task-divergence-note-body {
    margin: 0 0 8px;
    color: var(--ink2);
    font-size: 13px;
    line-height: 1.6;
}
.task-divergence-note-sync {
    margin: 0;
    color: var(--ink3);
    font-size: 12px;
    line-height: 1.6;
}

/* Variante neutra do mesmo card acima, pro histórico de avanço automático
   da pré-alocação (#task-pre-allocation-history-note) — contexto, não um
   alerta de divergência: friso lateral em --ink3 (neutro) em vez de --neg
   (vermelho, reservado pra divergência de verdade). */
.task-divergence-note--info {
    border-left-color: var(--ink3);
}
.task-pre-allocation-history-list {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--ink3);
    font-size: 12px;
    line-height: 1.6;
}
.task-pre-allocation-history-list li {
    margin-bottom: 2px;
}

/* Checkbox de pré-alocação (allocation/calendar.php, modais Adicionar/
   Editar tarefa) — só alinhamento/espaçamento; o checkbox em si fica no
   estilo nativo do navegador de propósito (nenhum outro checkbox no app
   usa iCheck apesar da lib estar carregada, ver PLAN.md 14/09). */
.pre-allocation-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}
.pre-allocation-field input[type="checkbox"] {
    margin: 0;
}
.pre-allocation-hint {
    margin: 0;
    font-weight: 400;
    color: var(--ink2, #5D574E);
}

/* Histórico de tarefas (admin/logs?type=tasks, taskAuditLogs.php).
   text-align: left !important pra vencer a regra global de "últimas 2
   colunas alinhadas à direita" (.admin-page table.table
   td:nth-last-child(-n+2) logo abaixo neste arquivo) — aqui a penúltima
   coluna é "Tarefa" (nome + ID), não faz sentido jogada pra direita. */
.admin-page .task-audit-table th,
.admin-page .task-audit-table td {
    text-align: left !important;
    vertical-align: top;
}
.task-audit-muted {
    color: var(--ink3);
}

/* Toggle Geral/Tarefas (admin/listLogs.php) — 2 .btn soltos (sem
   .btn-group do Bootstrap: aqui não precisa dos cantos grudados, e
   .btn-group quebraria o border-radius: pill já aplicado a cada botão
   via .admin-page .btn-primary/.btn-default). */
.log-type-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

/* Pill de ação (Criação/Edição/Exclusão/…) na tabela de histórico —
   neutro por padrão, tonalidade opcional (--pos/--neg, mesmos tokens de
   "positivo/negativo" dos relatórios) só pra criação/exclusão se
   destacarem das edições/movimentações no meio do caminho. */
.task-audit-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--paper2);
    color: var(--ink2);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.task-audit-pill--pos {
    border-color: var(--pos);
    color: var(--pos);
    background: rgba(92, 122, 71, .08);
}
.task-audit-pill--neg {
    border-color: var(--neg);
    color: var(--neg);
    background: rgba(199, 78, 50, .08);
}

/* Modal de detalhes do histórico (#log-detail-modal, taskAuditLogs.php)
   — só leitura, sem form/footer de salvar, então não entra na lista de
   seletores de .base-modal/.base-modal-editar/.task-modal (citadas
   juntas em ~15 regras espalhadas por este arquivo — acrescentar uma 4ª
   classe em cada uma seria mais risco de esquecer alguma do que ganho).
   Bloco próprio replicando a mesma "ficha de índice" (borda sólida +
   sombra dura, sem blur, ver AGENTS.md) das outras modais do app. */
.modal.log-detail-modal .modal-content {
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--paper);
}
.modal.log-detail-modal .modal-header {
    border-bottom: 1px solid var(--line);
    padding: 20px 24px;
}
.modal.log-detail-modal .modal-title {
    font-family: var(--font-heading);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 18px;
    color: var(--ink);
}
.modal.log-detail-modal .modal-body {
    padding: 20px 24px;
    max-height: 60vh;
    overflow-y: auto;
}
.modal.log-detail-modal .modal-footer {
    border-top: 1px solid var(--line);
    padding: 16px 24px;
}
.modal.log-detail-modal .btn-default {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink2);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 10px 22px;
    height: auto;
    transition: all .2s ease-out;
}
.modal.log-detail-modal .btn-default:hover {
    background: var(--tint);
    border-color: var(--amber);
    color: var(--ink);
}
.log-detail-fields {
    margin: 0;
}
.log-detail-fields dt {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink3);
    margin-top: 16px;
}
.log-detail-fields dt:first-child {
    margin-top: 0;
}
.log-detail-fields dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}
.log-detail-arrow {
    color: var(--ink3);
    margin: 0 4px;
}
.log-detail-meta {
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--ink3);
    font-size: 12px;
}

/* Tipografia comum. */
body, input, button, select, textarea,
.ui-widget, .fc {
    font-family: 'Montserrat', sans-serif;
}

/* Filtros da pauta: a seleção altera o resumo, nunca a largura/altura.
   Mesma linguagem visual do menu lateral (tokens "Dossiê Editorial
   Quente" no :root, topo deste arquivo): superfície branca --paper com
   borda --line, cantos retos, rótulos em mono
   maiúsculo como .menu_section h3, e --tint/--amber-deep nos estados de
   destaque em vez do teal (#087d70) que não aparece em mais nenhum outro
   lugar do app. */
.map-filters {
    margin: 8px 0 22px;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink2);
}
.map-filters-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.map-filters-heading span {
    /* Mesma receita de .menu_section h3 (rótulo de seção do menu) —
       reforça que este painel é uma extensão do mesmo menu, não um
       componente à parte. */
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    font-size: 11px;
    color: var(--ink3);
}
.map-filters-heading .fa { margin-right: 6px; }
.map-share { background: transparent; border: 0; border-radius: 0; color: var(--ink2); padding: 4px 8px; margin: -4px -8px; font-family: var(--font-heading); font-size: 12px; font-weight: 500; transition: background var(--transition-fast); }
.map-share:hover { background: var(--tint); color: var(--ink); }
.map-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; align-items: end; gap: 14px; }
/* Pauta por Cliente (allocation/filtersByClient.php) — mesmo painel, só
   que com 2 campos (Cliente/Recurso, sem Cargo nem "Disponíveis hoje"),
   então o grid de 5 trilhas de .map-filter-grid deixaria a ação (Aplicar/
   Limpar) espremida numa coluna 1fr em vez de "auto". Modificador à parte
   em vez de tornar .map-filter-grid dinâmico. */
.map-filter-grid--client-map { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.map-filter-field { min-width: 0; }
.map-filter-field > label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: var(--ink3); }
/* Select2 "lista de checkboxes" — painel de filtros da pauta (#map-filters)
   e filtros da tela de relatórios (.reports-filters, admin/reports.php):
   mesmo componente (MapFilters.initCheckboxSelect, map-filters.js), mesmo
   estilo, escopado pela classe compartilhada .filter-select2 em vez de
   repetir estas regras uma vez por tela.
   A lista aberta também usa .select2-container, mas é posicionada fora
   do campo. Aplicar 100% nela soma a largura da página ao deslocamento. */
.filter-select2 .map-filter-field > .select2-container,
.filter-select2 .form-group > .select2-container { width: 100% !important; min-width: 0; }
/* .select2-container--default no seletor (em vez de só .select2-selection--multiple)
   é de propósito: sobe a especificidade pra (0,3,0), acima da própria regra
   default do select2.min.css pra esse elemento — select2.min.css carrega
   DEPOIS de custom.css (base/header.php), então com especificidade igual
   ela venceria (radius 4px, borda cinza) mesmo com .filter-select2 na frente. */
.filter-select2 .select2-container--default .select2-selection--multiple { height: 38px; min-height: 38px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); overflow: hidden; }
.filter-select2 .select2-container--focus .select2-selection,
.filter-select2 .select2-container--open .select2-selection { border-color: var(--amber-deep); box-shadow: 0 0 0 3px var(--tint); }
.filter-select2 .select2-selection--multiple .select2-selection__rendered { display: block; height: 36px; padding: 0 11px; overflow: hidden; }
.filter-select2 .select2-selection__choice { display: none; }
.filter-select2 .select2-search--inline { width: 100%; height: 36px; }
.filter-select2 .select2-search--inline .select2-search__field { width: 100% !important; height: 36px; margin: 0; font: inherit; font-size: 12px; text-overflow: ellipsis; cursor: pointer; }
.filter-select2 .select2-search__field::placeholder { color: var(--ink2); opacity: 1; }
/* Sombra leve — mesma receita de .sidebar-user-menu (dropdown do menu),
   não a --shadow-crisp global (mais forte, reservada pra tooltips). */
.filter-select2 .select2-dropdown { border-color: var(--line); border-radius: 0; overflow: hidden; box-shadow: 0 4px 16px rgba(14, 13, 11, .12); z-index: 10030; }
.filter-select2 .select2-results__option { font-size: 12px; padding: 9px 11px; overflow-wrap: anywhere; }
/* Quem marca "selecionado" aqui é o ícone fa-check-square-o (templateResult
   em map-filters.js), não um fundo — sem isso o select2-selection__choice
   selecionado ainda mostrava seu cinza padrão (#ddd, select2.min.css) atrás
   do texto/checkbox, uma "sobra" da seleção do próprio select2 nunca
   sobrescrita (nem antes desta regra, nem no painel da pauta). */
.filter-select2 .select2-results__option[aria-selected=true] { background: transparent; }
.filter-select2 .select2-results__option--highlighted[aria-selected] { background: var(--tint); color: var(--ink); }

/* Skeleton por campo — variante mais granular do skeleton de painel inteiro
   da pauta (.map-filters--loading, mais abaixo): aqui só o Cliente/Recurso
   dependem de JS (select2), Início/Fim e os botões já funcionam sem ele, então
   não faz sentido esconder o painel inteiro enquanto o select2 monta. Marcação:
   um <span class="filter-select2-skeleton"> logo antes do <select> real. JS
   (map-filters.js) tira .filter-select2--loading do painel quando os selects
   terminam de virar select2 de verdade. */
.filter-select2-skeleton { display: none; }
.filter-select2--loading .filter-select2-skeleton {
    display: block;
    height: 38px;
    border-radius: 0;
    background: var(--line2);
    animation: taskrow-status-pulse 1.2s ease-in-out infinite;
}
.filter-select2--loading .filter-select2-skeleton + select { display: none; }
.map-availability { display: flex; align-items: center; gap: 7px; height: 38px; margin: 0; white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.map-availability input { margin: 0; width: 15px; height: 15px; accent-color: var(--amber-deep); }
.map-filter-actions { display: flex; gap: 6px; }
.map-filter-actions .btn { margin: 0; height: 38px; border-radius: 0; padding: 0 14px; font-size: 12px; font-weight: 600; transition: background var(--transition-fast), color var(--transition-fast); }
/* Ação primária no tom de destaque do próprio menu (--amber-deep, mesma
   cor do avatar do rodapé de usuário) — no hover "inverte" pra --ink,
   eco do padrão amber-no-repouso/ink-no-destaque já usado no avatar e no
   item ativo do menu (.nav.side-menu>li.active>a). */
.map-filter-apply { background: var(--amber); border: 1px solid var(--amber); color: var(--ink); }
.map-filter-apply:hover, .map-filter-apply:focus { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Ação secundária = mesmo tratamento de item de lista do dropdown do
   menu (.sidebar-user-menu li>a:hover): fundo --tint, texto --ink. */
.map-filter-clear { background: var(--paper); border: 1px solid var(--line); color: var(--ink2); }
.map-filter-clear:hover, .map-filter-clear:focus { background: var(--tint); color: var(--ink); }
.map-filters-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin-top: 12px; padding-top: 10px; font-size: 11px; color: var(--ink3); }
.map-applied-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; min-height: 28px; }
/* Mesmo --tint usado no item de menu ativo/atual (.nav li.current-page)
   — "este filtro está aplicado" é a mesma ideia de "você está aqui". */
.map-filter-chip { flex: 0 1 auto; max-width: 100%; margin: 0; border: 0; border-radius: 6px; padding: 6px 10px; background: var(--tint); color: var(--ink); font-size: 11px; line-height: 1.5; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.map-filter-chip:hover { background: var(--tint2); }
#map-filter-feedback { flex: 1 1 100%; text-align: left; }
#map-filter-feedback:empty { display: none; }
#map-share-fallback { margin-top: 10px; }

/* Skeleton do painel de filtros. A seção nasce com .map-filters--loading
   (filters.php) — os <select multiple> nativos (feios, sem o checkbox do
   select2) já vêm prontos no HTML do servidor, então sem isso apareciam
   "crus" por um instante até map-filters.js rodar e montar o select2 por
   cima. Enquanto isso, o formulário/rodapé reais ficam ocultos e só o
   skeleton aparece; map-filters.js remove a classe assim que termina.
   Pulsação reaproveitada de .taskrow-status-badge--loading
   (taskrow-status-pulse, mais abaixo neste arquivo) — mesma linguagem
   visual de "carregando" já usada no calendário, em vez de uma nova. */
.map-filters--loading .map-filter-grid,
.map-filters--loading .map-filters-footer {
    display: none;
}
.map-filters-skeleton { display: none; }
.map-filters--loading .map-filters-skeleton {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
    align-items: center;
    gap: 14px;
}
.map-filters-skeleton-field,
.map-filters-skeleton-toggle,
.map-filters-skeleton-button {
    display: block;
    height: 38px;
    border-radius: 0;
    background: var(--line2);
    animation: taskrow-status-pulse 1.2s ease-in-out infinite;
}
.map-filters-skeleton-toggle { width: 110px; }
.map-filters-skeleton-button { width: 90px; }
.map-filters-skeleton--client-map { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }

@media (max-width: 1199px) {
    .map-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .map-filter-actions { grid-column: 2 / 4; justify-content: flex-end; }
    .map-filters-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .map-filters-skeleton-toggle, .map-filters-skeleton-button { display: none; }
    .map-filter-grid--client-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .map-filter-grid--client-map .map-filter-actions { grid-column: 1 / 3; justify-content: flex-end; }
    .map-filters-skeleton--client-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .map-filters { padding: 12px; }
    .map-filter-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .map-filter-actions { grid-column: auto; justify-content: flex-start; }
    .map-filters-footer { flex-direction: column; align-items: stretch; gap: 4px; }
    .map-applied-filters { flex: auto; }
    #map-filter-feedback { flex: auto; text-align: left; }
    .map-filters-skeleton { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .map-filter-grid--client-map { grid-template-columns: minmax(0, 1fr); }
    .map-filter-grid--client-map .map-filter-actions { grid-column: auto; justify-content: flex-start; }
    .map-filters-skeleton--client-map { grid-template-columns: minmax(0, 1fr); }
}

/* Skeleton do calendário — visível por padrão (sem display:none aqui),
   escondido só quando o próprio FullCalendar/Scheduler já montou o
   cabeçalho de dias e as linhas de recurso reais (calendarJavascript.php
   dá .hide() nele logo depois do primeiro viewRender síncrono).
   #calendar em si NUNCA fica display:none — a lib mede largura/altura
   durante a própria inicialização, e um container escondido nesse
   momento comprometeria esses cálculos mesmo depois de reexibido. Por
   No primeiro carregamento ele ocupa o lugar do calendário. Depois da
   inicialização vira uma sobreposição dentro de .calendar-loading-stage,
   permitindo reutilizá-lo nas atualizações AJAX sem desmontar o grid que
   já está na tela. Reaproveita o padrão flex 20%/80% do
   resourceAreaWidth real e a mesma pulsação do skeleton de filtros. */
.calendar-loading-stage {
    position: relative;
}
.calendar-skeleton {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--paper);
}
.calendar-loading-stage--initialized .calendar-skeleton {
    position: absolute;
    inset: 0;
    min-height: 320px;
    z-index: 10025;
    box-shadow: 0 8px 24px rgba(14, 13, 11, .06);
}
.calendar-skeleton-header {
    display: flex;
    background: var(--paper2);
    border-bottom: 1px solid var(--line);
}
.calendar-skeleton-name-col {
    flex: 0 0 20%;
    display: flex;
    align-items: center;
    padding: 14px;
    border-right: 1px solid var(--line);
}
.calendar-skeleton-name-col span {
    display: block;
    width: 55%;
    height: 12px;
    border-radius: 4px;
    background: var(--line);
}
.calendar-skeleton-days { flex: 1; display: flex; }
.calendar-skeleton-day {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 6px;
    border-right: 1px solid var(--line);
}
.calendar-skeleton-day:last-child { border-right: 0; }
.calendar-skeleton-day span {
    display: block;
    width: 65%;
    height: 10px;
    border-radius: 4px;
    background: var(--line);
}
.calendar-skeleton-row {
    display: flex;
    border-bottom: 1px solid var(--line2);
}
.calendar-skeleton-row:last-child { border-bottom: 0; }
.calendar-skeleton-name {
    flex: 0 0 20%;
    padding: 16px 14px;
    border-right: 1px solid var(--line);
}
.calendar-skeleton-name span {
    display: block;
    border-radius: 4px;
    background: var(--line);
    animation: taskrow-status-pulse 1.2s ease-in-out infinite;
}
.calendar-skeleton-name span:first-child { width: 75%; height: 12px; margin-bottom: 6px; }
.calendar-skeleton-name span:last-child { width: 45%; height: 8px; }
.calendar-skeleton-bars {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 6%;
}
.calendar-skeleton-bar {
    height: 22px;
    width: 30%;
    border-radius: 6px;
    background: var(--line);
    animation: taskrow-status-pulse 1.2s ease-in-out infinite;
}
/* Larguras/posições variadas por linha só pra não parecer uma grade
   uniforme demais — nada aqui precisa bater com dados reais. */
.calendar-skeleton-row:nth-child(2n) .calendar-skeleton-bar { width: 45%; margin-left: 8%; }
.calendar-skeleton-row:nth-child(3n) .calendar-skeleton-bar { width: 18%; margin-left: 20%; }
.calendar-skeleton-row:nth-child(4n) .calendar-skeleton-bar { width: 55%; margin-left: 2%; }

@media (max-width: 600px) {
    .calendar-skeleton-name-col span { width: 75%; }
    .calendar-skeleton-day:nth-child(n+5) { display: none; }
}

/* Tela de Relatórios (admin/reports.php) — escopado em .reports-* de
   propósito, pra não vazar pra outras tabelas/telas admin que reusam o
   mesmo x_panel/table genérico do tema. */
.reports-filter-actions {
    text-align: right;
}
.reports-empty {
    color: var(--ink3);
}
.reports-overload {
    /* Mesmo token de valor negativo usado no calendário
       (.resource-availability-line--negative) — sobrecarga é a mesma
       ideia de "passou da capacidade" em ambos os lugares. */
    color: var(--neg);
    font-weight: 600;
}
/* Link embutido na frase de divergência (admin/reports_taskrow_divergence.php,
   "...edite a alocação para liberar a pauta") — herda a cor de aviso, só o
   sublinhado marca que é clicável, em vez de virar um botão solto. */
.reports-overload a {
    color: inherit;
    text-decoration: underline;
}
.reports-overload a:hover {
    text-decoration-thickness: 2px;
}

/* Relatórios reutilizam a paleta clara global do app. */
body .container.body .right_col.reports-page {
    background: var(--bg);
    color: var(--ink);
    border-top: 6px solid var(--amber);
    padding: 32px;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
}
.reports-container { max-width: 1000px; margin: 0 auto; }
.reports-page .alert-form:empty { display: none; }
.reports-masthead { padding: 8px 0 32px; }
.reports-page .reports-eyebrow,
.reports-page label,
.reports-page .btn,
.reports-page th,
.reports-page .reports-index {
    font-family: 'Source Code Pro', monospace;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.reports-page .reports-eyebrow { color: var(--ink2); margin-bottom: 18px; }
.reports-page h1, .reports-page h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink);
}
.reports-page h1 { font-size: 36px; margin: 0 0 18px; }
.reports-masthead > p:last-child { color: var(--ink2); margin: 0; line-height: 1.7; }
.reports-page .x_panel {
    float: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 24px;
    margin: 0 0 28px;
}
.reports-page .x_title { border: 0; margin: 0 0 24px; padding: 0; }
.reports-page .x_title h2 { float: none; display: flex; align-items: baseline; gap: 16px; font-size: 18px; margin: 0; white-space: normal; overflow: visible; }
.reports-page .reports-index { color: var(--ink2); flex: 0 0 auto; }
.reports-page .panel-body { padding: 0; }
.reports-page form > .row:first-child { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.reports-page form > .row:first-child::before,
.reports-page form > .row:first-child::after { display: none; }
.reports-page form > .row:first-child > .form-group { width: auto; float: none; margin: 0; padding: 0; min-width: 0; }
.reports-page label { display: block; color: var(--ink2); margin-bottom: 10px; }
/* .select2-* de Cliente/Recurso vem de .filter-select2, mais acima —
   .form-control aqui é só o datepicker (Início/Fim), que não é select2. */
.reports-page .form-control {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    min-height: 44px;
    box-shadow: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
}
.reports-page .form-control:focus { border-color: var(--amber); box-shadow: 0 0 0 2px var(--tint); outline: 0; }
.reports-page .reports-filter-actions { margin: 24px 0 0; display: flex; justify-content: flex-end; gap: 10px; }
.reports-page .btn { border-radius: 999px; min-height: 44px; padding: 13px 24px; margin: 0; transition: all .2s ease-out; }
.reports-page .btn-primary { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.reports-page .btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.reports-page .btn-default { background: transparent; border-color: var(--ink3); color: var(--ink); }
.reports-page .btn-default:hover { background: var(--tint); border-color: var(--amber); }
.reports-page .btn:focus-visible, .reports-table-scroll:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* max-height + overflow-y dá um teto pra rolagem vertical DENTRO da
   própria tabela (em vez de a página inteira crescer com listas longas) —
   sem isso, "position: sticky" no cabeçalho não tem contra o que grudar:
   overflow-x: auto já torna este container um scroll container nos dois
   eixos (regra do CSS Overflow: um eixo não-visible força o outro a
   computar como auto), mas sem altura limitada ele nunca rola de verdade. */
.reports-table-scroll { width: 100%; max-height: 70vh; overflow-x: auto; overflow-y: auto; }
.reports-page .reports-table { margin: 0; min-width: 640px; }
/* Bootstrap força ".table{border-collapse:collapse!important}" — collapse
   quebra "position: sticky" no cabeçalho em vários navegadores (Safari é o
   pior caso). Precisa do !important pra vencer o do Bootstrap (mesmo peso
   de importância, custom.css carrega por último — ver comentário em
   base/header.php sobre isso). border-spacing:0 evita frestas entre
   células agora que não são mais "coladas" pelo collapse; a linha visível
   já vem do border-bottom de cada célula, não depende do collapse. */
.reports-page .reports-table { border-collapse: separate !important; border-spacing: 0; }
.reports-page .reports-table > thead > tr > th,
.reports-page .reports-table > tbody > tr > td { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 16px 12px; vertical-align: middle; }
.reports-page .reports-table > thead > tr > th {
    /* Fundo sólido (não "transparent" como as células do corpo, ver regra
       acima) — senão as linhas por baixo vazariam através do texto do
       cabeçalho ao rolar. Mesma cor do painel (.x_panel é --paper). */
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--paper);
}
.reports-page .reports-table th { color: var(--ink2); }
.reports-page .reports-table td { font-size: 15px; }
.reports-page .reports-table td:nth-child(n+3) { font-variant-numeric: tabular-nums; }
.reports-page .reports-table td:nth-child(2) { color: var(--ink2); }
.reports-page .reports-empty { color: var(--pos); border-left: 2px solid var(--pos); padding: 12px 18px; margin: 0; line-height: 1.7; }
/* Utilitário padrão de acessibilidade — some visualmente, continua lido
   por leitor de tela. Só o rótulo da coluna de expandir (admin/
   reports_client_consumption.php) usa isso hoje. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Consumo por Cliente (admin/reports_client_consumption.php) — direto do
   Taskrow, sem cruzar com o Allocation Map: 1 card por cliente, com a
   lista de recursos e minutos gastos dentro. Sem tabela aqui de propósito
   (não é o mesmo formato dos outros relatórios) — cards continuam retos
   (zero radius, ver AGENTS.md), só o --tint/amber de destaque muda. */
.reports-consumption-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); letter-spacing: .05em; margin: 0 0 8px; }
.reports-consumption-search { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.reports-consumption-search .form-group { flex: 1 1 220px; margin: 0; }
.reports-consumption-search label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); text-transform: uppercase; letter-spacing: .08em; }
.reports-consumption-search input[type=search] {
    width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 0;
    background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 14px;
}
.reports-consumption-search input[type=search]:focus { outline: 0; border-color: var(--amber); box-shadow: 0 0 0 2px var(--tint); }
.reports-consumption-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.reports-consumption-card { background: var(--paper); border: 1px solid var(--line); padding: 18px; }
.reports-consumption-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.reports-consumption-card-header h3 {
    margin: 0; font-family: var(--font-heading); font-size: 15px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere;
}
.reports-consumption-card-total { flex: none; font-family: var(--font-mono); font-size: 13px; color: var(--amber-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reports-consumption-resource-list { list-style: none; margin: 0; padding: 0; }
.reports-consumption-resource-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.reports-consumption-resource-row:last-child { border-bottom: 0; }
.reports-consumption-resource-name { color: var(--ink2); overflow-wrap: anywhere; }
.reports-consumption-resource-minutes { flex: none; color: var(--ink2); font-variant-numeric: tabular-nums; }
.reports-retry-btn { margin-left: 12px; padding: 0 14px; min-height: 32px; font-size: 11px; }
@media (max-width: 480px) {
    .reports-consumption-cards { grid-template-columns: 1fr; }
}

/* Administrativo > E-mails automáticos (admin/listEmailJobs.php) —
   registro somente leitura dos disparos automáticos (Email_jobs_registry).
   Reaproveita .reports-page/.x_panel/.reports-table de propósito (mesma
   identidade visual dos relatórios), mas não inclui admin/reports_header
   — não tem período/cliente/recurso pra filtrar, é uma lista estática. */
.email-jobs-variant, .email-jobs-note {
    display: block;
    color: var(--ink3);
    font-size: 12px;
    margin-top: 4px;
}
.email-jobs-muted { color: var(--ink3); }
.email-jobs-status {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    white-space: nowrap;
}
.email-jobs-status--active { background: rgba(92, 122, 71, .14); color: var(--pos); }
.email-jobs-status--broken { background: rgba(199, 78, 50, .14); color: var(--neg); }
.email-jobs-status--planned { background: var(--tint2); color: var(--amber-deep); }
/* not_scheduled: código funciona, mas nenhum cron chama (ou chama uma URL
   errada) — nem "quebrado" (bug aqui) nem "ativo" de verdade. Cinza neutro
   (--ink2/--ink3) de propósito, pra não competir com o vermelho/verde. */
.email-jobs-status--not_scheduled { background: var(--line2); color: var(--ink2); }
/* Formulário de "Testar disparo de e-mail" — mesmo padrão de
   .reports-consumption-search (label em cima, campo cresce, botão some no
   fim da linha), .form-control/.btn já vêm estilados de .reports-page. */
.email-jobs-test-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.email-jobs-test-form .form-group { flex: 1 1 280px; margin: 0; }
.email-jobs-test-form .btn { flex: none; }
/* Botão "Testar" por linha — .reports-page .btn é pensado pra formulário
   (min-height 44px, padding grande), grande demais dentro de uma célula de
   tabela ao lado de texto de 15px. */
.email-jobs-preview-form { margin: 0; }
.reports-page .email-jobs-preview-btn.btn-default {
    min-height: 0;
    padding: 6px 14px;
    font-size: 12px;
}

/* Sombra suave, mesma receita do dropdown do select2 (.filter-select2
   .select2-dropdown) — a sombra dura "ficha de índice" do AGENTS.md é só
   pra tooltips/dialogs, e esse datepicker é um dropdown como os outros. */
.reports-page .bootstrap-datetimepicker-widget.dropdown-menu { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 4px 16px rgba(14, 13, 11, .12); }
.reports-page .bootstrap-datetimepicker-widget table td.active,
.reports-page .bootstrap-datetimepicker-widget table td.active:hover { background: var(--amber); color: var(--ink); text-shadow: none; }
.reports-page .bootstrap-datetimepicker-widget table td.day:hover,
.reports-page .bootstrap-datetimepicker-widget table td span:hover,
.reports-page .bootstrap-datetimepicker-widget table th:hover { background: var(--tint); }
.reports-page .bootstrap-datetimepicker-widget table td.today:before { border-bottom-color: var(--amber); }
.reports-view footer { background: var(--bg); color: var(--ink2); font-family: 'Source Code Pro', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 760px) {
    body .container.body .right_col.reports-page { padding: 24px 16px !important; }
    .reports-page h1 { font-size: 28px; }
    .reports-page .x_panel { padding: 18px; }
    .reports-page form > .row:first-child { grid-template-columns: minmax(0, 1fr); }
    .reports-page .x_title h2 { font-size: 15px; }
    .reports-page .reports-filter-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* Administrativo > E-mail de aniversário (admin/aniversario.php) — gera a
   arte (foto + nome + data) e dispara por e-mail. Reaproveita
   .reports-page/.x_panel de propósito (mesma identidade de
   admin/listEmailJobs.php acima), sem admin/reports_header pelo mesmo
   motivo: não tem período/cliente/recurso pra filtrar. Cada pessoa fica
   num cartão fechado com botão de remover no canto, não uma lista de
   <div> soltos sem separação nenhuma como era antes. */
.birthday-fields-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.birthday-people { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.birthday-person-card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 20px 44px 20px 20px;
    background: var(--paper2);
    border: 1px solid var(--line);
}
.birthday-person-card .form-group { margin: 0; }
.birthday-remove-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink2);
    line-height: 1;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.birthday-remove-btn:hover { border-color: var(--neg); color: var(--neg); background: rgba(199, 78, 50, .08); }
.birthday-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
@media (max-width: 760px) {
    .birthday-fields-top { grid-template-columns: minmax(0, 1fr); }
    .birthday-person-card { grid-template-columns: minmax(0, 1fr); padding-right: 44px; }
}

.calendar-range-dialog { width: calc(100% - 32px); max-width: 520px; margin: 48px auto; }
.calendar-range-dialog .modal-content { border: 1px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 6px 6px 0 var(--ink); }
.calendar-custom-range {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 24px;
    margin: 0;
    background: var(--paper);
    color: var(--ink2);
}
#calendar-range-title { flex-basis: 100%; margin: 0 0 12px; font-family: var(--font-heading); font-size: 18px; font-weight: 300; text-transform: uppercase; letter-spacing: .1em; }
.calendar-custom-range .calendar-range-apply { margin-left: auto; }
.calendar-custom-range #calendar-range-hint { order: 1; }
.calendar-custom-range #calendar-range-error { order: 2; }
.calendar-custom-range button { order: 3; }
.calendar-range-field { flex: 1 1 160px; min-width: 0; }
.calendar-custom-range label,
.calendar-custom-range button { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.calendar-custom-range label { display: block; margin-bottom: 6px; }
.calendar-custom-range input { width: 100%; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 0; padding: 0 10px; color: var(--ink); background: var(--paper); }
.calendar-custom-range button { height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; background: transparent; color: var(--ink2); transition: all .2s ease-out; }
.calendar-custom-range .calendar-range-apply { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.calendar-custom-range .calendar-range-apply:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.calendar-custom-range input:focus { outline: 0; border-color: var(--amber); box-shadow: 0 0 0 2px var(--tint); }
.calendar-custom-range button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.calendar-custom-range p { flex-basis: 100%; margin: 0; font-size: 12px; }
#calendar-range-error { color: var(--neg); }
#calendar-range-error:empty { display: none; }

@media (max-width: 820px) {
    #calendar .fc-toolbar.fc-header-toolbar { grid-template-columns: 1fr; gap: 8px; }
    #calendar .fc-toolbar.fc-header-toolbar .fc-left { grid-column: 1; grid-row: 1; justify-self: center; }
    #calendar .fc-toolbar.fc-header-toolbar .fc-center { grid-column: 1; grid-row: 2; }
    #calendar .fc-toolbar.fc-header-toolbar .fc-right { grid-column: 1; grid-row: 3; justify-self: center; }
}

.reports-calendar-link { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink2); padding: 10px 12px; min-height: 38px; transition: all .2s ease-out; }
.reports-calendar-link { display: inline-block; white-space: nowrap; }
.reports-calendar-link:hover { color: var(--ink); border-color: var(--amber); background: var(--tint); }
.reports-period-options button:focus-visible,
.reports-calendar-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.reports-applied-period, .reports-client-note { font-size: 13px; color: var(--ink2); }
#reports-range-error, .reports-period-error { color: var(--neg); }
#reports-range-error:empty { display: none; }
#reports-range-title { flex-basis: 100%; margin: 0 0 12px; font-family: var(--font-heading); font-size: 18px; font-weight: 300; text-transform: uppercase; letter-spacing: .1em; }
#reports-range-hint { order: 1; }
#reports-range-error { order: 2; }

/* Painel de filtros: regras locais, sem alterar os demais componentes. */
.reports-page .reports-filters { background: var(--paper); border: 1px solid var(--line); padding: 22px; height: auto; }
.reports-page .reports-filters .x_title { margin: 0 0 18px; }
.reports-page .reports-filters .x_title h2 { font-family: var(--font-heading); font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: normal; }
/* 1ª linha: Cliente/Recurso + Aplicar/Limpar — só esses dois campos
   dependem do botão pra valer (GET normal, recarrega a página), então
   ficam juntos. "auto" na última coluna deixa os botões do tamanho do
   próprio conteúdo, encostados na borda direita; align-items: end alinha
   o topo dos botões com a base dos selects (que têm label em cima e os
   botões não).

   As 3 variantes (--fields/--no-client/--no-fields, ver reports_header.php)
   declaram display/clearfix/grid-template-columns por conta própria, sem
   contar com ".reports-page form > .row:first-child" (a regra genérica
   mais acima, que dá display:grid pra outros forms de relatório) — os
   campos ocultos que reaplicam o Período (também em reports_header.php)
   viraram os filhos de verdade primeiros do form, então essa .row deixou
   de ser ":first-child" de fato, e a regra genérica para de bater. */
.reports-page .reports-filters form > .row.reports-filters-row--fields,
.reports-page .reports-filters form > .row.reports-filters-row--no-client,
.reports-page .reports-filters form > .row.reports-filters-row--no-fields {
    display: grid;
    gap: 16px;
    align-items: end;
    margin: 0;
}
.reports-page .reports-filters form > .row.reports-filters-row--fields::before,
.reports-page .reports-filters form > .row.reports-filters-row--fields::after,
.reports-page .reports-filters form > .row.reports-filters-row--no-client::before,
.reports-page .reports-filters form > .row.reports-filters-row--no-client::after,
.reports-page .reports-filters form > .row.reports-filters-row--no-fields::before,
.reports-page .reports-filters form > .row.reports-filters-row--no-fields::after {
    display: none;
}
.reports-page .reports-filters form > .row.reports-filters-row--fields > .form-group,
.reports-page .reports-filters form > .row.reports-filters-row--no-client > .form-group,
.reports-page .reports-filters form > .row.reports-filters-row--no-fields > .form-group {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.reports-page .reports-filters form > .row.reports-filters-row--fields { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
/* Sobrecarga não tem o campo Cliente (ver reports_header.php,
   $showClientFilter) — só Recurso + Aplicar/Limpar, 2 colunas em vez de 3. */
.reports-page .reports-filters form > .row.reports-filters-row--no-client { grid-template-columns: minmax(0, 1fr) auto; }
/* Consumo por Cliente não tem Cliente NEM Recurso do Allocation Map (ver
   reports_header.php, $showResourceFilter) — só Aplicar/Limpar sobra,
   1 coluna só; o próprio .reports-filter-actions já alinha à direita. */
.reports-page .reports-filters form > .row.reports-filters-row--no-fields { grid-template-columns: 1fr; }
.reports-page .reports-filters label { margin-bottom: 8px; font-size: 11px; color: var(--ink3); }
/* Período (#reports-period-form, ver reports_header.php) não é mais um
   card — fica direto acima do card de resultados de cada relatório, sem
   o fundo/borda/padding que .reports-filters dá por padrão (reaproveitada
   só pelas regras de botão/tipografia abaixo, que já vêm de graça). */
.reports-page .reports-filters.reports-period-bar { background: transparent; border: 0; padding: 0 0 20px; margin: 0; }
.reports-page .reports-filters .reports-period-options { display: flex; flex-wrap: nowrap; gap: 0; width: 100%; }
.reports-page .reports-filters .reports-period-options button { flex: 1 1 auto; margin: 0; border: 1px solid var(--line); border-radius: 0; padding: 0 8px; background: var(--paper); color: var(--ink2); white-space: nowrap; }
.reports-page .reports-filters .reports-period-options button + button { border-left: 0; }
.reports-page .reports-filters .reports-period-options button:first-child { border-radius: 4px 0 0 4px; }
.reports-page .reports-filters .reports-period-options button:last-child { border-radius: 0 4px 4px 0; }
.reports-page .reports-filters .reports-period-options button[aria-pressed=true] { background: var(--tint); color: var(--ink); }
.reports-page .reports-filters .reports-period-options button:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* Sub-navegação entre as páginas de relatório (admin/reports_header.php) —
   um relatório por URL própria (Admin::reports($slug)), não um alternador
   de visibilidade; por isso são links de verdade (<a href>), destacando o
   ativo via aria-current="page", não aria-pressed. Mesmo componente visual
   do seletor Semana/Mês/Personalizado acima, só que solto na página (fora
   do painel de filtros), daí a altura/tipografia um pouco maiores. */
.reports-page .reports-tabs { display: flex; flex-wrap: nowrap; gap: 0; width: 100%; max-width: 720px; margin: 0 0 20px; }
.reports-page .reports-tabs a { flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); padding: 0 8px; background: var(--paper); color: var(--ink2); font-size: 14px; text-decoration: none; white-space: nowrap; }
.reports-page .reports-tabs a + a { border-left: 0; }
.reports-page .reports-tabs a:first-child { border-radius: 4px 0 0 4px; }
.reports-page .reports-tabs a:last-child { border-radius: 0 4px 4px 0; }
.reports-page .reports-tabs a[aria-current=page] { background: var(--tint); color: var(--ink); }
.reports-page .reports-tabs a:hover { color: var(--ink); }
.reports-page .reports-tabs a:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
@media (max-width: 560px) {
    /* 3 abas não cabem lado a lado numa tela estreita sem cortar o texto —
       empilha, uma por linha, como as demais listas do painel aqui. */
    .reports-page .reports-tabs { flex-wrap: wrap; max-width: 100%; }
    .reports-page .reports-tabs a { flex-basis: 100%; }
    .reports-page .reports-tabs a:first-child { border-radius: 4px 4px 0 0; }
    .reports-page .reports-tabs a:last-child { border-radius: 0 0 4px 4px; }
    .reports-page .reports-tabs a + a { border-left: 1px solid var(--line); border-top: 0; }
}
.reports-page .reports-filters input,
.reports-page .reports-filters button,
.reports-page .reports-filters .btn,
.reports-page .reports-filters .select2-results__option { font-family: var(--font-heading); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal; }
.reports-page .reports-filters .form-control,
.reports-page .reports-filters button,
.reports-page .reports-filters .btn,
.reports-page .reports-filters .select2-selection--multiple { height: 40px; min-height: 40px; border-radius: 4px; }
.reports-page .reports-filters .select2-selection--multiple { position: relative; }
.reports-page .reports-filters .select2-selection--multiple::after { content: ''; position: absolute; right: 13px; top: 14px; width: 6px; height: 6px; border-right: 1px solid var(--ink3); border-bottom: 1px solid var(--ink3); transform: rotate(45deg); pointer-events: none; }
.reports-page .reports-filters .select2-selection__rendered { height: 38px; padding: 0 30px 0 11px; }
.reports-page .reports-filters .select2-search--inline { height: 38px; }
.reports-page .reports-filters .select2-search__field { height: 38px; min-height: 0; line-height: 38px; margin: 0; font-family: var(--font-heading); font-size: 12px; text-transform: none; letter-spacing: normal; }
.reports-page .reports-filters .select2-container--focus .select2-selection,
.reports-page .reports-filters .select2-container--open .select2-selection { border-color: var(--amber); box-shadow: 0 0 0 2px var(--tint); }
.reports-page .reports-filters #reports-period-summary { margin: 8px 0 0; font-family: var(--font-heading); font-size: 10px; color: var(--ink3); letter-spacing: .1em; }
.reports-page .reports-filters #reports-period-summary:empty { display: none; }
/* Chips de Cliente/Recurso aplicados (ver reports_header.php). */
.reports-page .reports-filters .map-filters-footer { margin: 0; padding-top: 14px; }
.reports-page .reports-filters .reports-period-field { max-width: 420px; }
.reports-page .reports-filters .reports-filter-actions { display: flex; justify-content: flex-end; align-items: center; margin: 0; padding: 0; gap: 8px; white-space: nowrap; }
.reports-page .reports-filters .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; font-weight: 500; }
.reports-page .reports-filters .btn-primary { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.reports-page .reports-filters .btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.reports-page .reports-filters .btn-default { background: transparent; border-color: var(--line); color: var(--ink2); }
.reports-page .reports-filters .btn-default:hover { background: var(--tint); }
@media (max-width: 760px) {
    .reports-page .reports-filters { padding: 20px; }
    .reports-page .reports-filters form > .row.reports-filters-row--fields,
    .reports-page .reports-filters form > .row.reports-filters-row--no-client { grid-template-columns: minmax(0, 1fr); }
}

/* Login (dossiê editorial quente) — as 4 telas de acesso (login,
   forgetpass, forgetpassrecover, addPassword) usam este escopo .login-*;
   o antigo .login_wrapper/.login_content/.animate foi removido do arquivo
   (não tinha mais nenhuma view usando).

   Layout de header+hero+footer alinhado ao login de outro app da ampfy
   (Pesquisa de Clima) — faixa amber no topo do header (não mais no
   cartão), cartão "hero" com sombra suave (em vez da sombra dura de
   ficha de índice, reservada a tooltips/dialogs) e rodapé mono no
   rodapé da página. */
.login-page {
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.login-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--paper);
    border-top: 6px solid var(--amber);
    border-bottom: 1px solid var(--line);
    padding: 20px 32px;
}
.login-header-logo {
    height: 26px;
    width: auto;
}
.login-header-divider {
    width: 1px;
    height: 22px;
    background: var(--line);
}
.login-header-title {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink2);
}
.login-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}
.login-card {
    width: 100%;
    max-width: 440px;
    background: var(--paper);
    border: 1px solid var(--line);
    /* Sombra suave de propósito aqui (diferente da sombra dura "ficha de
       índice" de tooltips/dialogs, AGENTS.md) — este cartão é uma tela de
       entrada/hero, não um diálogo. */
    box-shadow: 0 24px 48px rgba(14, 13, 11, .08);
    padding: 56px 48px 48px;
    text-align: center;
}
.login-eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink3);
}
.login-heading {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 34px;
    color: var(--ink);
}
.login-description {
    margin: 0 0 32px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink2);
}
.login-form {
    text-align: left;
}
.login-footer {
    /* Precisa declarar display aqui: o tema tem "footer { display: none; }"
       (esconde o rodapé antigo do dashboard) — como esse seletor não
       define display, a disputa por essa propriedade específica ficava só
       entre os 2 "footer{}" do tema (display:block vs display:none, este
       por último), sem entrar em jogo a maior especificidade de
       .login-footer. Declarando aqui, .login-footer passa a valer. */
    display: block;
    margin: 0;
    padding: 20px 16px;
    text-align: center;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--ink3);
}
.login-field {
    margin-bottom: 18px;
}
.login-field label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink3);
}
.login-field input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    box-sizing: border-box;
}
.login-field input:focus {
    outline: 0;
    border-color: var(--amber);
    box-shadow: 0 0 0 2px var(--tint);
}
.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink2);
}
.login-remember input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--amber);
}
.login-remember label {
    margin: 0;
    font-weight: normal;
}
.login-submit {
    display: block;
    width: 100%;
    height: 46px;
    border: 1px solid var(--amber);
    border-radius: var(--radius-pill);
    background: var(--amber);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
    transition: all .2s ease-out;
}
.login-submit:hover {
    background: var(--amber-deep);
    border-color: var(--amber-deep);
}
.login-submit:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}
.login-forgot {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink2);
    text-decoration: none;
}
.login-forgot:hover {
    color: var(--amber-deep);
    text-decoration: underline;
}
.login-alert:empty {
    display: none;
}
.login-alert .alert {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink3);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink2);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}
.login-alert .alert-danger,
.login-alert .alert-error {
    border-left-color: var(--neg);
    color: var(--ink);
}
.login-alert .alert-success {
    border-left-color: var(--pos);
    color: var(--ink);
}
.login-alert .alert-warning,
.login-alert .alert-info {
    border-left-color: var(--amber);
    color: var(--ink);
}
@media (max-width: 480px) {
    .login-header { padding: 16px 20px; }
    .login-card { padding: 36px 24px; }
    .login-heading { font-size: 26px; }
}

/* Administrativo (Áreas/Grupos/Recursos/Associação/Clientes/Transferir
   demandas/Logs/Feriados) — mesma receita de .right_col do reports-page
   (fundo creme, faixa amber no topo, DM Sans no corpo), só que com classe
   própria (.admin-page): não são relatórios, então .reports-page não se
   aplica semanticamente, mas o tratamento visual é o mesmo. Modais de
   adicionar/editar (.base-modal/.base-modal-editar) são exclusivos destas
   8 páginas em todo o projeto — dá pra estilizar direto por essas classes,
   sem precisar aninhar em .admin-page (elas ficam fora de .right_col no
   HTML, como irmãs dele). */
body .container.body .right_col.admin-page {
    background: var(--bg);
    color: var(--ink);
    border-top: 6px solid var(--amber);
    padding: 32px;
    /* O filho direto (.col-md-12, grid antigo do Bootstrap) é float:left
       e .right_col não tinha overflow/BFC próprio pra "conter" esse
       float — a altura da caixa colapsava antes do fim do conteúdo
       flutuante (a paginação, quando é o último elemento, chegava a
       "vazar" pra fora da caixa), então o padding-bottom de 32px nunca
       era alcançado de verdade. flow-root cria o BFC sem precisar de
       clearfix com pseudo-elemento. */
    display: flow-root;
}
.admin-page .alert-form:empty { display: none; }
.admin-page .x_panel {
    float: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 24px;
    margin: 0 0 24px;
}
/* Título sempre primeiro (order:-1) e na mesma linha que botão/busca/
   filtro, mesmo vindo depois no HTML — botão Adicionar/busca/filtro do
   tema antigo usam pull-right e viram flex items normais aqui (float não
   tem efeito em item de flex). h2 com flex-grow:1 ocupa o espaço sobrando
   e empurra os controles (ordem original preservada, .btn com order:1 pra
   ficar sempre por último) pro canto direito — mesmo efeito de
   justify-content:space-between sem precisar agrupar os controles numa
   div própria. */
.admin-page .x_title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border: 0;
    margin: 0 0 20px;
    padding: 0;
}
.admin-page .x_title h2 {
    order: -1;
    flex: 1 1 auto;
    min-width: 0;
    float: none;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 20px;
    color: var(--ink);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
/* Ícones do Font Awesome do tema antigo (fa-cogs/fa-group/fa-sun-o) —
   fora do vocabulário visual do app (ver AGENTS.md: sem ícone nos títulos
   de seção, mesmo padrão dos cabeçalhos de relatório). */
.admin-page .x_title h2 .fa { display: none; }
/* Ícone de "+" (fa-plus-square-o) do botão Adicionar — mesmo motivo do
   ícone do título logo acima: fora do vocabulário visual do app. */
.admin-page .x_title > .btn .fa { display: none; }
.admin-page .x_title .clearfix { display: none; }
.admin-page .x_title > .btn {
    order: 1;
    display: inline-flex;
    align-items: center;
    /* Mesma altura de .form-control/select/botão Buscar (40px) — sem
       isso o padding vertical (10px + linha de 11px + borda) dava ~35px,
       uns pixels mais baixo que o resto da linha, e ficava visivelmente
       desalinhado apesar do align-items:center no .x_title. */
    height: 40px;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background: var(--amber);
    border: 1px solid var(--amber);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 0 18px;
    margin: 0 !important;
    transition: all .2s ease-out;
}
.admin-page .x_title > .btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.admin-page .x_title .form-control {
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    height: 40px;
    box-shadow: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}
/* .input-group{margin-bottom:10px} é global (tema antigo, custom.css:2369)
   — some form-group em outras telas dependem dele, então não dá pra tirar
   ali. Aqui ele empurrava só a caixa de busca pra baixo (a "margin box"
   mais alta descentraliza o conteúdo dentro do align-items:center do
   .x_title), descolando ela do botão Adicionar/select ao lado. Zera só
   dentro do filtro das telas administrativas. */
.admin-page .x_title .input-group { margin-bottom: 0; }
.admin-page .x_title .form-control:focus { border-color: var(--amber); box-shadow: 0 0 0 2px var(--tint); outline: 0; }
.admin-page .x_title .input-group-btn .btn {
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0;
    background: var(--paper);
    color: var(--ink2);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    height: 40px;
    padding: 0 14px;
    margin: 0 !important;
}
.admin-page .x_title .input-group-btn .btn:hover { background: var(--tint); border-color: var(--amber); color: var(--ink); }
.admin-page .panel-body { padding: 0; }
/* Tabela sem grid — só border-bottom por linha, mesma receita de
   .reports-table. Neutraliza o zebrado de .table-striped do tema antigo
   (mesma forma+especificidade do seletor do Bootstrap, só com
   .admin-page a mais na frente, o suficiente pra vencer). */
.admin-page .table-striped > tbody > tr:nth-of-type(odd) > td,
.admin-page .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: transparent;
}
.admin-page table.table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.admin-page table.table > thead > tr > th,
.admin-page table.table > tbody > tr > td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 12px;
    vertical-align: middle;
    font-size: 14px;
}
.admin-page table.table > thead > tr > th {
    color: var(--ink2);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 400;
}
.admin-page table.table a { color: var(--ink2); text-decoration: none; }
.admin-page table.table a:hover { color: var(--amber-deep); text-decoration: underline; }
/* Colunas de ação (Editar/Remover, e Ativar-Desativar quando existe) —
   últimas colunas da tabela em todas as 6 páginas com tabela. Em 5 delas
   são sempre as 2 últimas; só Recursos (listUsers.php) tem 3
   (Ativar/Desativar, Editar, Remover), marcado com a classe extra
   .admin-table--3actions no right_col dessa página. */
.admin-page table.table th:nth-last-child(-n+2),
.admin-page table.table td:nth-last-child(-n+2) {
    text-align: right;
}
.admin-table--3actions table.table th:nth-last-child(-n+3),
.admin-table--3actions table.table td:nth-last-child(-n+3) {
    text-align: right;
}
/* Paginação (Admin::listGeneric) — <ul class="pagination"><li
   class="paginate_button">, o ativo some mais "active" — troca o azul
   arredondado padrão do Bootstrap pelo mesmo mono/reto do resto do app.
   .reports-page reaproveita a mesma regra (tokens idênticos) desde
   admin/listEmailLogs.php, 1ª tela nova a usar .reports-page + paginação
   juntos — antes só .admin-page tinha listas paginadas. */
.admin-page .pagination, .reports-page .pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 20px 0 0; padding: 0; }
.admin-page .pagination .paginate_button, .reports-page .pagination .paginate_button { list-style: none; }
.admin-page .pagination .paginate_button a,
.reports-page .pagination .paginate_button a {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink2);
    text-decoration: none;
    background: var(--paper);
}
.admin-page .pagination .paginate_button a:hover,
.reports-page .pagination .paginate_button a:hover { border-color: var(--amber); color: var(--ink); background: var(--tint); }
.admin-page .pagination .paginate_button.active a,
.reports-page .pagination .paginate_button.active a {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--ink);
    font-weight: 600;
}
/* Formulário direto no panel-body sem modal (transfer.php) + os mesmos
   campos dentro dos modais de adicionar/editar (.base-modal/
   .base-modal-editar) + o modal de Adicionar/Editar tarefa
   (.task-modal, allocation/calendar.php — reaproveita este bloco de
   propósito, em vez de CSS próprio: mesmo padrão visual, rótulo à
   esquerda/campo à direita, decisão do usuário 14/09 depois de ver o
   modal de Usuário como referência). */
.admin-page .form-horizontal .control-label,
.modal.base-modal .control-label,
.modal.base-modal-editar .control-label,
.modal.task-modal .control-label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink3);
    font-weight: 400;
    padding-top: 10px;
}
.admin-page .required,
.modal.base-modal .required,
.modal.base-modal-editar .required,
.modal.task-modal .required {
    color: var(--neg);
}
.admin-page .form-control,
.modal.base-modal .form-control,
.modal.base-modal-editar .form-control,
.modal.task-modal .form-control {
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    box-shadow: none;
    height: 42px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}
.admin-page textarea.form-control,
.modal.base-modal textarea.form-control,
.modal.base-modal-editar textarea.form-control,
.modal.task-modal textarea.form-control {
    height: auto;
}
.admin-page .form-control:focus,
.modal.base-modal .form-control:focus,
.modal.base-modal-editar .form-control:focus,
.modal.task-modal .form-control:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 2px var(--tint);
    outline: 0;
}
.admin-page .form-control-feedback,
.modal.base-modal .form-control-feedback,
.modal.base-modal-editar .form-control-feedback,
.modal.task-modal .form-control-feedback {
    color: var(--ink3);
}
.admin-page .btn-primary,
.modal.base-modal .btn-primary,
.modal.base-modal-editar .btn-primary,
.modal.task-modal .btn-primary {
    background: var(--amber);
    border: 1px solid var(--amber);
    color: var(--ink);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 10px 22px;
    height: auto;
    transition: all .2s ease-out;
}
.admin-page .btn-primary:hover,
.modal.base-modal .btn-primary:hover,
.modal.base-modal-editar .btn-primary:hover,
.modal.task-modal .btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.admin-page .btn-default,
.modal.base-modal .btn-default,
.modal.base-modal-editar .btn-default,
.modal.task-modal .btn-default {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink2);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 10px 22px;
    height: auto;
    transition: all .2s ease-out;
}
.admin-page .btn-default:hover,
.modal.base-modal .btn-default:hover,
.modal.base-modal-editar .btn-default:hover,
.modal.task-modal .btn-default:hover { background: var(--tint); border-color: var(--amber); color: var(--ink); }
/* Diálogo em si — mesma "ficha de índice" (borda sólida + sombra dura,
   sem blur) usada em tooltips/dialogs no resto do app (AGENTS.md). */
.modal.base-modal .modal-content,
.modal.base-modal-editar .modal-content,
.modal.task-modal .modal-content {
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--paper);
}
.modal.base-modal .modal-header,
.modal.base-modal-editar .modal-header,
.modal.task-modal .modal-header {
    border-bottom: 1px solid var(--line);
    padding: 20px 24px;
}
.modal.base-modal .modal-title,
.modal.base-modal-editar .modal-title,
.modal.task-modal .modal-title {
    font-family: var(--font-heading);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 18px;
    color: var(--ink);
}
.modal.base-modal .modal-body,
.modal.base-modal-editar .modal-body,
.modal.task-modal .modal-body {
    padding: 24px;
}
.modal.base-modal .modal-footer,
.modal.base-modal-editar .modal-footer,
.modal.task-modal .modal-footer {
    border-top: 1px solid var(--line);
    padding: 16px 24px;
}
.modal.base-modal .close,
.modal.base-modal-editar .close,
.modal.task-modal .close {
    color: var(--ink3);
    opacity: 1;
    text-shadow: none;
}
.modal.base-modal .close:hover,
.modal.base-modal-editar .close:hover,
.modal.task-modal .close:hover { color: var(--ink); }
@media (max-width: 760px) {
    body .container.body .right_col.admin-page { padding: 20px 16px; }
    .admin-page .x_title .form-control { width: 100%; }
}