@charset "UTF-8";
/*!
 * Copyright (C) 2016 Singular Studios (a.k.a Atom Tecnologia) - www.opensingular.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* Cubic Bezier Transition */
/***********
    Theme Colors
    ***********/
.theme-font-color {
  color: #004e66; }

/***********
    Body bg color
    ***********/
body {
  background: #f5f5f5; }
  body.page-md {
    background: #f5f5f5; }

/***********
    Page Header
    ***********/
/* Header search bar, toggler button & top menu */
.page-header.navbar {
  background: #004e66;
  /* Top notification menu/bar */
  /* Header seaech box */
  /* Menu Toggler */ }
  .page-header.navbar .top-menu .navbar-nav {
    /* Extended Dropdowns */
    /* Notification */
    /* Inbox */
    /* Tasks */
    /* User */
    /* Language */
    /* Dark version */ }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover {
      background-color: #004e66; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i {
      color: #00b0e6; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle .badge.badge-default {
      background-color: #004e66;
      color: #0089b3; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle {
      background-color: #004e66; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu:before {
      border-bottom-color: #ebebeb; }
    .page-header.navbar .top-menu .navbar-nav > li.separator {
      background: #e9ecef; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu {
      border: 1px solid #ebebeb; }
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu:before {
        border-bottom-color: #dedede; }
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu:after {
        border-bottom-color: #f0f0f0; }
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu > li.external {
        background: #f0f0f0; }
        .page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu > li.external > h3 {
          color: #62878f; }
        .page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu > li.external > a {
          color: #004e66; }
          .page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu > li.external > a:hover {
            color: #00141a;
            text-decoration: none; }
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu .dropdown-menu-list > li > a {
        border-bottom: 1px solid #EFF2F6 !important;
        color: #888888; }
        .page-header.navbar .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu .dropdown-menu-list > li > a:hover {
          background: #f8f9fa; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-notification .dropdown-menu .dropdown-menu-list > li > a .time {
      background: #f1f1f1; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-notification .dropdown-menu .dropdown-menu-list > li > a:hover .time {
      background: #e4e4e4; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-inbox > .dropdown-toggle > .circle {
      background-color: #004e66;
      color: #ffffff; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-inbox > .dropdown-toggle > .corner {
      border-color: transparent transparent transparent #004e66; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-inbox .dropdown-menu .dropdown-menu-list .subject .from {
      color: #5b9bd1; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-tasks .dropdown-menu .dropdown-menu-list .progress {
      background-color: #dfe2e9; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username {
      color: #ffffff; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > i {
      color: #ffffff; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu {
      width: 195px; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-language > .dropdown-toggle > .langname {
      color: #ffffff; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu {
      background: #0081a8;
      border: 0; }
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu:after {
        border-bottom-color: #0081a8; }
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu > li.external {
        background: #006280; }
        .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu > li.external > h3 {
          color: #80e1ff; }
        .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu > li.external > a:hover {
          color: #00799e; }
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu.dropdown-menu-default > li a,
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu .dropdown-menu-list > li a {
        color: #99e7ff;
        border-bottom: 1px solid #0098c7 !important; }
        .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu.dropdown-menu-default > li a > i,
        .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu .dropdown-menu-list > li a > i {
          color: #66dbff; }
        .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu.dropdown-menu-default > li a:hover,
        .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu .dropdown-menu-list > li a:hover {
          background: #0090bd; }
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu.dropdown-menu-default > li a {
        border-bottom: 0 !important; }
      .page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu.dropdown-menu-default > li.divider {
        background: #0098c7; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-notification.dropdown-dark .dropdown-menu .dropdown-menu-list > li > a .time {
      background: #006d8f; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-notification.dropdown-dark .dropdown-menu .dropdown-menu-list > li > a:hover .time {
      background: #005a75; }
  .page-header.navbar .search-form {
    background: #004e66; }
    .page-header.navbar .search-form .input-group {
      border: 1px solid #00b0e6; }
      .page-header.navbar .search-form .input-group:hover {
        border-color: #009ccc; }
      .page-header.navbar .search-form .input-group .form-control {
        color: #00b0e6; }
        .page-header.navbar .search-form .input-group .form-control::-moz-placeholder {
          color: #00ace0;
          opacity: 1; }
        .page-header.navbar .search-form .input-group .form-control:-ms-input-placeholder {
          color: #00ace0; }
        .page-header.navbar .search-form .input-group .form-control::-webkit-input-placeholder {
          color: #00ace0; }
      .page-header.navbar .search-form .input-group .input-group-btn .btn.submit > i {
        color: #00b0e6; }
  .page-header.navbar .menu-toggler {
    background-image: url(../../img/sidebar-toggle-light.png); }
  .page-header.navbar .page-actions .btn-group .btn-sm.btn-transparent {
    background: none;
    border: 1px solid #007599;
    color: #009ccc; }
    .page-header.navbar .page-actions .btn-group .btn-sm.btn-transparent > i {
      color: #009ccc; }
    .page-header.navbar .page-actions .btn-group .btn-sm.btn-transparent:hover, .page-header.navbar .page-actions .btn-group .btn-sm.btn-transparent:focus, .page-header.navbar .page-actions .btn-group .btn-sm.btn-transparent.active {
      background: none;
      border: 1px solid #00b0e6;
      color: #00b0e6; }
      .page-header.navbar .page-actions .btn-group .btn-sm.btn-transparent:hover > i, .page-header.navbar .page-actions .btn-group .btn-sm.btn-transparent:focus > i, .page-header.navbar .page-actions .btn-group .btn-sm.btn-transparent.active > i {
        color: #00b0e6; }

/* Page sidebar */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
.page-sidebar {
  background-color: #ffffff;
  /* Default sidebar */ }
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu,
  .page-sidebar .page-sidebar-menu {
    /* 1st level links */
    /* All links */ }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.heading > h3,
    .page-sidebar .page-sidebar-menu > li.heading > h3 {
      color: #004e66; }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a,
    .page-sidebar .page-sidebar-menu > li > a {
      color: #526779; }
      @media (max-width: 991px) {
        .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a,
        .page-sidebar .page-sidebar-menu > li > a {
          /* 991px */
          border-top: 1px solid white; } }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i,
      .page-sidebar .page-sidebar-menu > li > a > i {
        color: #526779; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i[class^="icon-"],
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i[class*="icon-"],
      .page-sidebar .page-sidebar-menu > li > a > i[class^="icon-"],
      .page-sidebar .page-sidebar-menu > li > a > i[class*="icon-"] {
        color: #526779; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .arrow.open:before,
      .page-sidebar .page-sidebar-menu > li > a > .arrow:before,
      .page-sidebar .page-sidebar-menu > li > a > .arrow.open:before {
        color: #586e82; }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a,
    .page-sidebar .page-sidebar-menu > li:hover > a,
    .page-sidebar .page-sidebar-menu > li.open > a {
      background: #f2f6f9;
      color: #004e66; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a > i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a > i,
      .page-sidebar .page-sidebar-menu > li:hover > a > i,
      .page-sidebar .page-sidebar-menu > li.open > a > i {
        color: #004e66; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a > .arrow.open:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a > .arrow.open:before,
      .page-sidebar .page-sidebar-menu > li:hover > a > .arrow:before,
      .page-sidebar .page-sidebar-menu > li:hover > a > .arrow.open:before,
      .page-sidebar .page-sidebar-menu > li.open > a > .arrow:before,
      .page-sidebar .page-sidebar-menu > li.open > a > .arrow.open:before {
        color: #005a75; }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a,
    .page-sidebar .page-sidebar-menu > li.active > a,
    .page-sidebar .page-sidebar-menu > li.active.open > a {
      background: #f2f6f9;
      color: #004e66; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a:hover, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a:hover,
      .page-sidebar .page-sidebar-menu > li.active > a:hover,
      .page-sidebar .page-sidebar-menu > li.active.open > a:hover {
        background: #f2f6f9; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a > i,
      .page-sidebar .page-sidebar-menu > li.active > a > i,
      .page-sidebar .page-sidebar-menu > li.active.open > a > i {
        color: #004e66; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > .arrow.open:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a > .arrow.open:before,
      .page-sidebar .page-sidebar-menu > li.active > a > .arrow:before,
      .page-sidebar .page-sidebar-menu > li.active > a > .arrow.open:before,
      .page-sidebar .page-sidebar-menu > li.active.open > a > .arrow:before,
      .page-sidebar .page-sidebar-menu > li.active.open > a > .arrow.open:before {
        color: #005a75; }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
    .page-sidebar .page-sidebar-menu > li.active > a {
      border-left: 3px solid #004e66 !important;
      margin-left: -3px;
      padding-left: 15px; }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a > .arrow.open:before,
    .page-sidebar .page-sidebar-menu li > a > .arrow:before,
    .page-sidebar .page-sidebar-menu li > a > .arrow.open:before {
      color: #586e82; }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover > a > .arrow.open:before,
    .page-sidebar .page-sidebar-menu li:hover > a > .arrow:before,
    .page-sidebar .page-sidebar-menu li:hover > a > .arrow.open:before {
      color: #005a75; }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li.active > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li.active > a > .arrow.open:before,
    .page-sidebar .page-sidebar-menu li.active > a > .arrow:before,
    .page-sidebar .page-sidebar-menu li.active > a > .arrow.open:before {
      color: #005a75; }
    .page-sidebar-closed .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu:hover .sub-menu, .page-sidebar-closed .page-sidebar .page-sidebar-menu:hover .sub-menu {
      background: #FFFFFF; }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a,
    .page-sidebar .page-sidebar-menu .sub-menu > li > a {
      color: #526779; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > i,
      .page-sidebar .page-sidebar-menu .sub-menu > li > a > i {
        color: #526779; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > i[class^="icon-"],
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > i[class*="icon-"],
      .page-sidebar .page-sidebar-menu .sub-menu > li > a > i[class^="icon-"],
      .page-sidebar .page-sidebar-menu .sub-menu > li > a > i[class*="icon-"] {
        color: #5d7388; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > .arrow.open:before,
      .page-sidebar .page-sidebar-menu .sub-menu > li > a > .arrow:before,
      .page-sidebar .page-sidebar-menu .sub-menu > li > a > .arrow.open:before {
        color: #586e82; }
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a,
    .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
    .page-sidebar .page-sidebar-menu .sub-menu > li.open > a,
    .page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
      color: #004e66;
      background: #f2f6f9; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a > i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a > i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a > i,
      .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a > i,
      .page-sidebar .page-sidebar-menu .sub-menu > li.open > a > i,
      .page-sidebar .page-sidebar-menu .sub-menu > li.active > a > i {
        color: #004e66; }
      .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a > .arrow.open:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a > .arrow.open:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a > .arrow:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a > .arrow.open:before,
      .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a > .arrow:before,
      .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a > .arrow.open:before,
      .page-sidebar .page-sidebar-menu .sub-menu > li.open > a > .arrow:before,
      .page-sidebar .page-sidebar-menu .sub-menu > li.open > a > .arrow.open:before,
      .page-sidebar .page-sidebar-menu .sub-menu > li.active > a > .arrow:before,
      .page-sidebar .page-sidebar-menu .sub-menu > li.active > a > .arrow.open:before {
        color: #005a75; }

/******
    Page Footer
    ******/
.page-footer .page-footer-inner {
  color: #69789E; }

.page-footer-fixed .page-footer {
  background-color: #f5f5f5; }
  .page-footer-fixed .page-footer .page-footer-inner {
    color: #526779; }

.page-boxed .page-footer .page-footer-inner {
  color: #526779; }

.page-footer-fixed .page-boxed .page-footer {
  background-color: #f5f5f5; }

@media (min-width: 992px) {
  /* 992px */
  /* Sidebar menu closed */
  .page-sidebar-menu.page-sidebar-menu-hover-submenu li:hover > .sub-menu {
    box-shadow: 5px 5px rgba(140, 178, 198, 0.2); }
  .page-sidebar-menu.page-sidebar-menu-closed > li:hover {
    box-shadow: 5px 5px rgba(140, 178, 198, 0.2); }
    .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu {
      box-shadow: 5px 5px rgba(140, 178, 198, 0.2); }
  /* Fixed Sidebar */
  .page-sidebar-fixed:not(.page-footer-fixed) .page-content {
    border-bottom: 0; }
  .page-sidebar-fixed:not(.page-footer-fixed) .page-footer .page-footer-inner {
    color: #333; }
  /* Boxed Layout */
  .page-boxed {
    /* Page container */ }
    .page-boxed .page-container {
      background-color: #f5f5f5; }
    .page-boxed.page-sidebar-reversed .page-container {
      border-left: 0; }
    .page-boxed.page-sidebar-fixed .page-container {
      border-left: 0;
      border-bottom: 0; }
    .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {
      border-left: 0;
      border-right: 0;
      border-bottom: 0; }
  /* Sidebar Menu Wirh Hoverable Submenu */
  .page-sidebar-menu-hover-submenu li:hover a > .arrow {
    border-right: 8px solid #FFFFFF; }
    .page-sidebar-reversed .page-sidebar-menu-hover-submenu li:hover a > .arrow {
      border-left: 8px solid #FFFFFF; }
  .page-sidebar-menu-hover-submenu li:hover > .sub-menu {
    background: #FFFFFF; } }

@media (max-width: 991px) {
  /* 991px */
  .page-header.navbar {
    padding: 0;
    /* Top menu */ }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover {
      background-color: #004a61; } }

@media (max-width: 767px) {
  /* 767px */
  .page-header.navbar {
    background: #004e66;
    /* Top menu */ }
    .page-header.navbar .page-top {
      background: #004e66; }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover {
      background-color: #004257; } }

/****
 CSS3 Spinner Bar
****/
.page-spinner-bar > div,
.block-spinner-bar > div {
  background: #006280; }

.force-inline-block {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle; }

.toast-success {
  background-color: #1BBC9B; }

.toast-info {
  background-color: #5C9BD1; }

.toast-error {
  background-color: #E35B5A; }

.toast-warning {
  background-color: #f89406; }

.toast-message a {
  color: #FAFAFA !important;
  font-weight: bold; }

:root {
  --sg-primary: #004e66;
  /* forma — antd default */
  --sg-radius: 6px;
  --sg-radius-lg: 8px;
  --sg-radius-sm: 4px;
  --sg-control-h: 32px;
  /* superfície */
  --sg-canvas: #f5f5f5;
  --sg-surface: #ffffff;
  --sg-sunk: #fafafa;
  /* linha */
  --sg-border: #c2c7ce;
  --sg-split: #e3e6ea;
  /* a divisória clara some sobre o fundo #f5f5f5: a linha
       que delimita uma região contra o fundo precisa ser mais escura que a que
       separa duas linhas de uma tabela */
  --sg-border-box: #cfd4da;
  /* tinta */
  --sg-ink: rgba(0, 0, 0, .88);
  --sg-ink-2: rgba(0, 0, 0, .65);
  --sg-ink-3: rgba(0, 0, 0, .45);
  --sg-link: #1677ff;
  --sg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* sombra de painel flutuante do antd */
  --sg-shadow: 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12),
                 0 9px 28px 8px rgba(0, 0, 0, .05); }

/* o antd declara a fonte em :where(.css-*).ant-btn e .ant-checkbox-wrapper, que
   carregam depois deste arquivo */
body, h1, h2, h3, h4, h5, .btn, input, select, textarea, label, td, th, button,
button.ant-btn, label.ant-checkbox-wrapper, textarea.ace_text-input,
.chosen-container-multi .chosen-choices li.search-field input[type="text"].chosen-search-input {
  font-family: var(--sg-font); }

/* body.page-md: o próprio default.css pinta o fundo por esse seletor */
body, body.page-md {
  background: var(--sg-canvas);
  color: var(--sg-ink);
  font-size: 14px; }

/* ---------- Card ---------- */
.portlet, .portlet.light,
.portlet.light.bg-inverse, .portlet.light.sg-authoring-tree-portlet {
  background: var(--sg-surface);
  box-shadow: none;
  border: 1px solid var(--sg-border-box);
  border-radius: var(--sg-radius-lg);
  padding: 0;
  overflow: hidden; }

/* a árvore de autoria tem altura fixa e rola por dentro, como no .sidenav do AuthoringTreePanel.css */
.portlet.light.sg-authoring-tree-portlet {
  overflow-y: auto; }

/* O tema zera o padding do card porque o respiro vem do .portlet-title e do .portlet-body.
   Card que põe o conteúdo direto dentro dele (o wizard do formulário) devolve o respiro. */
.portlet.light:not(.sg-authoring-tree-portlet):not(:has(> .portlet-title, > .portlet-body)) {
  padding: 16px; }

/* a árvore de autoria se posiciona sozinha e não entra no empilhamento */
.portlet:not(.sg-authoring-tree-portlet) {
  margin-bottom: 12px; }

/* O cabeçalho de seção respondia por quase metade da altura de cada bloco: 93px,
   dos quais 52 vinham do padding do grupo de botões, não do padding do título.
   Vale para TODO portlet: excluir a árvore daqui tirava dela o flex junto com o
   padding, e o título soltava dos botões para a linha de cima. */
.portlet > .portlet-title, .portlet.light > .portlet-title {
  padding: 12px 16px;
  margin: 0;
  border-bottom: 1px solid var(--sg-split);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px; }

/* os três últimos são os seletores com que o Metronic posiciona o título do card */
.portlet-title .caption, .portlet-title .caption-subject,
.portlet > .portlet-title > .caption,
.portlet.light > .portlet-title > .caption,
.portlet.light > .portlet-title > .caption > .caption-subject,
.portlet.light.sg-authoring-tree-portlet > .portlet-title > .caption {
  float: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--sg-ink);
  text-transform: none;
  letter-spacing: normal; }

/* o título vem com .bold, .font-dark e .uppercase, utilitários !important do Metronic */
.portlet-title .caption-subject {
  font-weight: 600 !important;
  color: var(--sg-ink) !important;
  text-transform: none !important; }

/* o portlet raiz é o título da tela; os aninhados são seções do formulário */
.portlet.bg-inverse > .portlet-title .caption,
.portlet.bg-inverse > .portlet-title .caption-subject,
.portlet.light.bg-inverse > .portlet-title > .caption,
.portlet.light.bg-inverse > .portlet-title > .caption > .caption-subject {
  font-size: 18px; }

.portlet-title .caption > i,
.portlet > .portlet-title > .caption > i,
.portlet.light > .portlet-title > .caption > i {
  color: var(--sg-ink-3);
  margin-right: 10px; }

.portlet-title > .actions,
.portlet-title > *:last-child:not(:first-child),
.portlet.light > .portlet-title > .actions,
.portlet.light.sg-authoring-tree-portlet > .portlet-title > .actions {
  float: none;
  padding: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px; }

.portlet-title > *:last-child:not(:first-child) > * {
  float: none;
  margin: 0; }

/* os atalhos do cabeçalho da árvore seguem a barra de ícones logo abaixo: só o ícone, fundo no hover */
.portlet.light.sg-authoring-tree-portlet > .portlet-title > .actions {
  gap: 2px; }

/* o ::after do clearfix vira item do flex e soma mais um gap à direita dos atalhos */
.portlet.light.sg-authoring-tree-portlet > .portlet-title::after {
  display: none; }

/* o corpo do card zera o padding; a barra de ícones e a árvore encostavam na borda */
.portlet.light.sg-authoring-tree-portlet > .portlet-body {
  padding: 8px 12px; }

.portlet.light.sg-authoring-tree-portlet > .portlet-title > .actions .btn.btn-icon-only {
  background: transparent;
  border-color: transparent;
  width: 28px;
  min-width: 28px;
  flex-basis: 28px;
  height: 28px; }

.portlet.light.sg-authoring-tree-portlet > .portlet-title > .actions .btn.btn-icon-only * {
  color: var(--sg-ink-3);
  font-size: 14px; }

.portlet.light.sg-authoring-tree-portlet > .portlet-title > .actions .btn.btn-icon-only:hover {
  background: var(--sg-split); }

.portlet.light.sg-authoring-tree-portlet > .portlet-title > .actions .btn.btn-icon-only:hover * {
  color: var(--sg-primary); }

.portlet-title > [class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
  float: none; }

/* o corpo do card não tem padding para a tabela encostar nas bordas e o raio
   recortá-la; formulário é o caso oposto e recupera o respiro logo abaixo */
.portlet-body, .portlet.light .portlet-body {
  padding: 0;
  background: transparent; }

/* O .row do Bootstrap tem margin 0 -15px e só fecha dentro de um container com
   padding. Sem isto TODO formulário dentro de card vaza 15px para fora — no
   interno, na autoria e no externo, já que é o mesmo motor de formulário. */
.portlet:not(.sg-authoring-tree-portlet) > .portlet-body:has(.singular-form-panel-generated),
.portlet:not(.sg-authoring-tree-portlet) > .portlet-body:has(> form),
.portlet:not(.sg-authoring-tree-portlet) > .portlet-body:has(.form-group) {
  padding: 12px 16px; }

/* listagem com filtro rápido: o filtro é .form-group e dá padding ao corpo, mas a
   tabela encosta nas bordas do card como nas listagens sem filtro */
.portlet:not(.sg-authoring-tree-portlet) > .portlet-body:has(.form-group) > .table-responsive {
  margin: 12px -16px -12px;
  max-width: none; }

/* .table-responsive compensa com margem negativa um padding do .portlet que este
   tema zera; sem isso a tabela vaza do card e o overflow corta a borda */
.portlet .table-responsive, .portlet-body .table-responsive {
  margin: 0;
  width: auto;
  max-width: 100%;
  border: none; }

/* ---------- Tabela: o padrão do ATOM ---------- */
table.worklist, table.table, table.worklist.table, .table-responsive table.worklist {
  margin: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* toda tabela se delimita sozinha: em modal (seleção de requerimento) não há
       card nenhum e a tabela ficava solta sobre o fundo */
  border: 1px solid var(--sg-border-box);
  border-radius: var(--sg-radius-lg);
  overflow: hidden; }

/* Só a tabela que é conteúdo de um card dispensa borda própria — o card já
   delimita. O modal fica dentro de um .portlet no DOM do Wicket, mas nunca
   dentro de .portlet-body, e é esse o critério correto. */
.portlet-body table.worklist, .portlet-body table.table {
  border: none;
  border-radius: 0; }

/* sentence case, 14/600 — o ATOM não usa caixa alta em cabeçalho */
table.worklist thead th, table.table thead th, th.sorting, table.dataTable thead th {
  background: var(--sg-sunk);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--sg-ink);
  white-space: nowrap;
  border-top: none;
  border-bottom: 1px solid var(--sg-split); }

/* .worklist th zera a borda com !important; a de cima já fica zerada por ela */
table.worklist thead th {
  border-bottom: 1px solid var(--sg-split) !important; }

table.worklist tbody td, table.table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--sg-ink);
  background: transparent;
  vertical-align: top;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  border-top: none;
  border-bottom: 1px solid var(--sg-split); }

/* .worklist tr td declara a borda com !important. A última linha e a de "nenhum
   registro" ficam fora: o border: 0 !important do vendor já as deixa sem borda. */
table.worklist tbody td {
  border-top: none !important; }

table.worklist tbody tr:not(:last-child):not(.norecords-tr) td:not(.norecords-td) {
  border-bottom: 1px solid var(--sg-split) !important; }

table.table-striped tbody tr:nth-of-type(odd) td {
  background: transparent; }

/* o bootstrap pinta a zebra no <tr>, não no <td> */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: transparent; }

table.worklist tbody tr:hover td, table.table tbody tr:hover td {
  background: var(--sg-sunk); }

tr.norecords-tr td, td.norecords-td, .table > tfoot > tr > td.norecords-td {
  padding: 56px 16px;
  text-align: center;
  color: var(--sg-ink-3);
  background: transparent; }

/* o tipo da tabela empata com table.table tbody td */
tr.norecords-tr td, td.norecords-td,
table tbody tr.norecords-tr td, table tbody td.norecords-td {
  border-bottom: none; }

tr.norecords-tr:hover td {
  background: transparent; }

/* seta de ordenação à direita, como no ATOM. O título da coluna mora dentro do
   <a>, então esconder a seta com opacity apagava também o texto. */
table.dataTable thead th.sorting > a,
table.dataTable thead th.sorting_asc > a,
table.dataTable thead th.sorting_desc > a {
  padding-left: 0;
  padding-right: 18px;
  background-position: right center;
  background-size: 16px 16px;
  color: inherit;
  text-decoration: none; }

table.dataTable thead th.sorting > a {
  background-image: none;
  padding-right: 0; }

table.dataTable thead th.sorting:hover {
  background: var(--sg-split); }

/* ações em linha */
thead th.action-column, tbody td.action-column {
  text-align: right;
  white-space: nowrap; }

table.worklist tbody td:last-child, table.table tbody td:last-child {
  white-space: nowrap; }

/* a coluna de ações recebe width inline do componente */
table.worklist tbody td:last-child, table.table tbody td:last-child {
  width: 1% !important; }

/* :not(.md-skip), .btn-sm e .btn-xs empatam com o dimensionamento do Metronic */
tbody td .btn:not(.md-skip), tbody td a.btn:not(.md-skip),
tbody td .btn.btn-sm:not(.md-skip), tbody td .btn.btn-xs:not(.md-skip),
tbody td .btn.btn-link:not(.md-skip) {
  height: 28px;
  width: 28px;
  padding: 0;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  color: var(--sg-ink-3);
  border-radius: var(--sg-radius-sm); }

tbody td .btn:not(.md-skip):hover,
tbody td .btn.btn-sm:not(.md-skip):hover {
  background: var(--sg-split);
  border-color: var(--sg-primary);
  color: var(--sg-ink); }

/* o upload de arquivo em formulário tabelado não é ação de linha: mantém o botão com texto */
tbody td .upload-single .upload-single-choose.btn:not(.md-skip) {
  width: auto;
  height: var(--sg-control-h);
  padding: 0 15px; }

/* O JS do upload alterna display: block/none inline no botão, então o flex da
   skin não vale e o texto é centralizado pela altura de linha. */
.upload-single .upload-single-choose.btn:not(.md-skip),
.upload-single .upload-single-choose.btn:not(.md-skip):hover {
  background: var(--sg-primary);
  border-color: var(--sg-primary);
  color: #fff;
  margin-left: 8px;
  line-height: calc(var(--sg-control-h) - 2px); }

.upload-single .upload-single-choose.btn:not(.md-skip):hover {
  filter: brightness(1.15); }

/* O layout.css posiciona a barra por top: -100% e left: 14px, contando com o campo de
   34px do v1; no campo de 32px ela cobria o ícone. Aqui ela é uma linha centrada no campo. */
.upload-single .input-group > .form-control {
  position: relative; }

.upload-single .upload-single-progress {
  position: absolute;
  top: 50%;
  left: 32px;
  right: 11px;
  width: auto;
  height: 6px;
  margin: 0;
  transform: translateY(-50%);
  border-radius: 3px;
  background: var(--sg-split);
  box-shadow: none; }

.upload-single .upload-single-progress .progress-bar {
  background: var(--sg-primary);
  border-radius: 3px; }

/* Com arquivo, o excluir é um addon colado ao campo, como o calendário da data. O JS
   do upload mostra o botão com display: block inline, que é o que indica o estado:
   a classe upload-single-uploaded também aparece no campo vazio. */
.upload-single .input-group:has(.upload-single-remove[style*="block"]) > .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.upload-single .upload-single-remove.btn:not(.md-skip) {
  width: 32px;
  height: var(--sg-control-h);
  padding: 0;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--sg-sunk);
  border-color: var(--sg-border);
  color: var(--sg-ink-2); }

.upload-single .upload-single-remove.btn:not(.md-skip):hover {
  background: var(--sg-split);
  color: var(--ant-color-error, #ff4d4f); }

tfoot td, .table > tfoot > tr > td {
  padding: 16px;
  border-bottom: none;
  background: transparent; }

/* a linha de atualizar da listagem grava padding inline */
tfoot td.sg-mobile-friendly-refresh-button {
  padding: 16px !important; }

.worklist tfoot .btn, table.table tfoot .btn, tfoot td .btn,
tfoot td .btn.btn-xs:not(.md-skip), tfoot td .btn.btn-sm:not(.md-skip) {
  width: auto;
  height: var(--sg-control-h);
  padding: 0 12px;
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-ink);
  white-space: nowrap; }

/* a tabela que o motor de formulário usa como LAYOUT não é tabela de dados */
table.table-unstyled, table.table-condensed {
  border: none;
  border-radius: 0; }

/* barra de rolagem fina em tabela larga */
.portlet-body, .table-responsive {
  scrollbar-width: thin;
  scrollbar-color: var(--sg-border) transparent; }

.portlet-body::-webkit-scrollbar, .table-responsive::-webkit-scrollbar {
  height: 8px;
  width: 8px; }

.portlet-body::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb {
  background: var(--sg-border);
  border-radius: 999px;
  border: 2px solid var(--sg-surface); }

/* ---------- Listas editáveis do motor de formulário ----------
   .list-table-body (lista por tabela) e .list-detail-body (mestre-detalhe) são
   tabelas de DADOS, mas suas células contêm campos de 32px e não texto — por
   isso o espaçamento é menor que o das tabelas de listagem acima. */
.list-table-body, .list-detail-body {
  border: 1px solid var(--sg-border-box);
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
  padding: 0; }

/* o overflow recorta a tabela no raio da caixa, mas também cortava a lista de opções
   de um campo de seleção aberto numa linha; enquanto ela está aberta, não recorta */
:is(.list-table-body, .list-detail-body):has(.tt-menu.tt-open, .bootstrap-select.open),
:is(.list-table-body, .list-detail-body):has(.tt-menu.tt-open, .bootstrap-select.open) table {
  overflow: visible; }

/* O thead tem menos células do que o tbody — a coluna de ações não tem cabeçalho
   — e o fundo de uma <tr> só é pintado atrás das células que existem. Por isso a
   faixa do cabeçalho vai na <table>, que aparece onde o thead não chega, e o
   corpo volta a branco por cima. */
.list-table-body table, .list-detail-body table {
  margin: 0;
  width: 100%;
  border: none;
  border-radius: 0;
  background: var(--sg-sunk); }

.list-table-body table tbody, .list-detail-body table tbody,
.list-table-body table tfoot, .list-detail-body table tfoot {
  background: var(--sg-surface); }

.list-table-body table thead, .list-detail-body table thead,
.list-table-body table thead tr, .list-detail-body table thead tr {
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--sg-split); }

.list-table-body table thead th, .list-detail-body table thead th {
  background: transparent;
  padding: 8px 12px;
  border-top: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--sg-ink);
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap; }

.list-table-body table tbody td, .list-detail-body table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--sg-split);
  border-top: none;
  vertical-align: middle; }

/* a célula já dá o espaçamento vertical da linha; a margem do form-group dobrava */
.list-table-body table td .form-group, .list-detail-body table td .form-group {
  margin-bottom: 0; }

/* na lista por tabela o nome do campo já está no th — só ali o label é redundante */
.list-table-body table td .control-label {
  display: none; }

.list-table-body table tbody tr:last-child td,
.list-detail-body table tbody tr:last-child td {
  border-bottom: none; }

.list-table-body table tbody tr:hover td,
.list-detail-body table tbody tr:hover td {
  background: var(--sg-sunk); }

/* o tfoot é o slot do botão de adicionar: quando a tabela o renderiza fora,
   a célula fica vazia e não pode ocupar espaço */
.list-table-body table tfoot td, .list-detail-body table tfoot td {
  padding: 8px 12px;
  border-top: 1px solid var(--sg-split); }

.list-table-body table tfoot td:not(:has(*)),
.list-detail-body table tfoot td:not(:has(*)) {
  padding: 0;
  border-top: none; }

/* O botão de adicionar fica fora da tabela. No mestre-detalhe a tabela encosta nas
   bordas do card e o botão recua com o conteúdo; na lista por tabela ela é uma caixa
   com borda própria e o botão alinha com essa borda. */
.list-detail-footer, .list-table-footer {
  margin-top: 12px;
  padding: 0 0 12px; }

.list-detail-footer {
  padding: 0 16px 12px; }

/* ---------- Menu lateral: neutro ----------
   O azul da marca vive na barra superior, não aqui: um menu colorido competiria
   com o conteúdo e deixaria duas âncoras de cor na mesma tela. */
.page-sidebar, .page-md .page-sidebar.navbar-collapse {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-box);
  border-radius: var(--sg-radius-lg);
  box-shadow: none;
  overflow: hidden; }

/* O tema e o layout.css estilizam o menu sob .page-sidebar .page-sidebar-menu e
   sob a variante do menu recolhido; com os mesmos prefixos a skin empata com
   eles. Os estados :hover, .open e .active do tema entram nas listas para que o
   item só mude onde a skin quer. */
.page-sidebar .page-sidebar-menu,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu {
  /* o layout.css recua o terceiro nível com padding próprio */
  /* item de primeiro nível não ganha o fundo nem a borda de ativo */ }
  .page-sidebar .page-sidebar-menu > li > a, .page-sidebar .page-sidebar-menu > li:hover > a, .page-sidebar .page-sidebar-menu > li.open > a,
  .page-sidebar .page-sidebar-menu .sub-menu > li > a, .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a, .page-sidebar .page-sidebar-menu .sub-menu > li.open > a,
  .page-sidebar .page-sidebar-menu .sub-menu li > a,
  .page-sidebar .page-sidebar-menu > li.nav-item > a.nav-link,
  .page-sidebar .page-sidebar-menu .sub-menu > li > a.nav-link,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.nav-item > a.nav-link,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a.nav-link {
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    background: transparent;
    color: var(--sg-ink-2); }
  .page-sidebar .page-sidebar-menu .sub-menu li > .sub-menu > li > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li > .sub-menu > li > a {
    padding: 10px 20px; }
  .page-sidebar .page-sidebar-menu > li > a:hover,
  .page-sidebar .page-sidebar-menu .sub-menu > li > a:hover,
  .page-sidebar .page-sidebar-menu > li.nav-item > a.nav-link:hover,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a:hover,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a:hover,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.nav-item > a.nav-link:hover {
    background: var(--sg-sunk);
    color: var(--sg-ink); }
  .page-sidebar .page-sidebar-menu > li.active > a, .page-sidebar .page-sidebar-menu > li.active.open > a,
  .page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
  .page-sidebar .page-sidebar-menu .sub-menu > li.active > a.nav-link,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a.nav-link {
    background: var(--sg-sunk);
    border-left-color: var(--sg-primary);
    color: var(--sg-primary);
    font-weight: 600; }
  .page-sidebar .page-sidebar-menu > li.nav-item > a.nav-link,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.nav-item > a.nav-link {
    color: var(--sg-ink);
    font-weight: 600;
    background: transparent;
    border-left-color: transparent; }
  .page-sidebar .page-sidebar-menu > li > a > i, .page-sidebar .page-sidebar-menu > li:hover > a > i, .page-sidebar .page-sidebar-menu > li.open > a > i,
  .page-sidebar .page-sidebar-menu > li > a > i[class^="icon-"], .page-sidebar .page-sidebar-menu > li > a > i[class*="icon-"],
  .page-sidebar .page-sidebar-menu .sub-menu > li > a > i, .page-sidebar .page-sidebar-menu .sub-menu li > a > i,
  .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a > i, .page-sidebar .page-sidebar-menu .sub-menu > li.open > a > i, .page-sidebar .page-sidebar-menu .sub-menu > li.active > a > i,
  .page-sidebar .page-sidebar-menu .sub-menu > li > a > i[class^="icon-"], .page-sidebar .page-sidebar-menu .sub-menu > li > a > i[class*="icon-"],
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i[class^="icon-"],
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i[class*="icon-"],
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li > a > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > i[class^="icon-"],
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > i[class*="icon-"] {
    color: var(--sg-ink-3);
    font-size: 15px; }
  .page-sidebar .page-sidebar-menu > li.active > a > i,
  .page-sidebar .page-sidebar-menu > li.nav-item > a.nav-link > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > i,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.nav-item > a.nav-link > i {
    color: var(--sg-primary); }
  .page-sidebar .page-sidebar-menu li > a > .arrow:before, .page-sidebar .page-sidebar-menu li > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu li:hover > a > .arrow:before, .page-sidebar .page-sidebar-menu li:hover > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu li.active > a > .arrow:before, .page-sidebar .page-sidebar-menu li.active > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu > li > a > .arrow:before, .page-sidebar .page-sidebar-menu > li > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu > li:hover > a > .arrow:before, .page-sidebar .page-sidebar-menu > li:hover > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu > li.active > a > .arrow:before, .page-sidebar .page-sidebar-menu > li.active > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu > li.active.open > a > .arrow:before, .page-sidebar .page-sidebar-menu > li.active.open > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu .sub-menu > li > a > .arrow:before, .page-sidebar .page-sidebar-menu .sub-menu > li > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a > .arrow:before, .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu .sub-menu > li.open > a > .arrow:before, .page-sidebar .page-sidebar-menu .sub-menu > li.open > a > .arrow.open:before,
  .page-sidebar .page-sidebar-menu .sub-menu > li.active > a > .arrow:before, .page-sidebar .page-sidebar-menu .sub-menu > li.active > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li.active > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li.active > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a > .arrow.open:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a > .arrow:before,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a > .arrow.open:before {
    color: var(--sg-ink-3); }

/* o tema marca o item ativo de primeiro nível com borda !important; no item com
   .nav-item a skin a esconde com border-image, que pinta no lugar dela */
.page-sidebar .page-sidebar-menu > li.nav-item.active > a.nav-link {
  border-image: linear-gradient(transparent, transparent) 1; }

/* ---------- Controles ---------- */
.control-label, label.control-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--sg-ink);
  text-transform: none;
  margin-bottom: 4px; }

.form-group {
  margin-bottom: 14px; }

.form-control, input.form-control, textarea.form-control {
  height: var(--sg-control-h);
  min-height: var(--sg-control-h);
  padding: 4px 11px;
  font-size: 14px;
  line-height: 1.5714;
  color: var(--sg-ink);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface); }

/* .form-group-sm e .input-icon do bootstrap/Metronic redimensionam o campo */
.form-group-sm .form-control, .form-group-sm select.form-control, .form-group-sm textarea.form-control,
.input-icon.right > .form-control {
  height: var(--sg-control-h);
  padding: 4px 11px;
  font-size: 14px;
  line-height: 1.5714;
  border-radius: var(--sg-radius); }

/* .input-group zera o raio do lado que encosta no addon */
.input-group .form-control:first-child, .input-group .form-control:last-child,
.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: var(--sg-radius); }

/* campo desabilitado ou somente leitura continua branco */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control, .tt-input[readonly] {
  background: var(--sg-surface); }

.form-control::placeholder, .login .content .form-control::placeholder {
  color: var(--sg-ink-3); }

.form-control:focus, .form-group-sm select.form-control:focus,
.form-control.ace_editor:focus {
  border-color: var(--sg-primary); }

/* .form-control do Metronic zera sombra e outline com !important. O wrapper do
   bootstrap-select e o campo do login ficam sem anel. */
.form-control:not(.bootstrap-select):not(.login .form-control):focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-primary) 12%, transparent) !important; }

/* O editor ACE carrega .form-control junto com .ace_editor, então a altura de
   32px do campo o colapsava numa linha — mesmo caso do bootstrap-select. */
.form-control.ace_editor, .ace_editor {
  height: auto;
  min-height: 220px;
  padding: 0;
  font-size: 14px;
  line-height: normal; }

/* o CSS do ACE, injetado depois, pinta a borda de cinza */
.form-control.ace_editor {
  border: 1px solid var(--sg-border); }

/* <select> nativo: sem padding vertical o popup do sistema volta a ancorar certo */
select.form-control, select.bs-select,
.form-group-sm select.form-control {
  height: var(--sg-control-h);
  padding: 0 11px;
  background-image: none;
  background-color: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  font-size: 14px; }

.input-group-addon, .input-group-addon:first-child, .input-group-addon:last-child,
.input-group-addon:not(:first-child):not(:last-child) {
  border: 1px solid var(--sg-border);
  border-right: none;
  border-radius: var(--sg-radius) 0 0 var(--sg-radius);
  background: var(--sg-sunk);
  color: var(--sg-ink-2);
  font-size: 14px;
  padding: 4px 11px; }

/* o wrapper do bootstrap-select carrega .form-control junto e duplicava o padding */
.bootstrap-select.form-control, .bootstrap-select.btn-group.form-control,
.form-group-sm .bootstrap-select.btn-group.form-control {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  height: auto;
  min-height: 0;
  width: 100%; }

.bootstrap-select.form-control > .btn, .bootstrap-select.btn-group > .btn.dropdown-toggle {
  width: 100%;
  float: none;
  height: var(--sg-control-h);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--sg-ink); }

.bootstrap-select .filter-option, .bootstrap-select.btn-group .dropdown-toggle .filter-option {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left; }

.bootstrap-select .bs-caret, .bootstrap-select .caret,
.bootstrap-select.btn-group .dropdown-toggle .caret {
  flex: none;
  position: static; }

/* .bootstrap-select .caret do Metronic declara a margem com !important */
.bootstrap-select .caret {
  margin: 0 !important; }

.bootstrap-switch {
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  box-shadow: none;
  height: var(--sg-control-h);
  overflow: hidden; }

.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
  font-size: 14px;
  padding: 5px 12px; }

.bootstrap-maxlength, .label.bootstrap-maxlength {
  background: transparent;
  color: var(--sg-ink-3);
  font-size: 12px;
  font-weight: 400;
  padding: 2px 0 0;
  box-shadow: none;
  border-radius: 0;
  margin-top: 2px; }

/* painéis flutuantes — a sombra do antd */
.bootstrap-select .dropdown-menu, .tt-menu {
  border: 1px solid var(--sg-split);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow);
  padding: 4px;
  background: var(--sg-surface); }

.bootstrap-select .dropdown-menu.inner {
  box-shadow: none;
  border: none;
  padding: 0; }

.bootstrap-select .dropdown-menu li > a, .tt-menu .tt-suggestion {
  color: var(--sg-ink);
  padding: 5px 12px;
  border-radius: var(--sg-radius-sm);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px; }

.bootstrap-select .dropdown-menu li > a:hover, .bootstrap-select .dropdown-menu li.active > a,
.tt-menu .tt-suggestion:hover, .tt-menu .tt-cursor {
  background: var(--sg-sunk);
  color: var(--sg-ink); }

.bootstrap-select .dropdown-menu li.selected > a {
  font-weight: 600;
  background: #e6f4ff; }

.bootstrap-select .dropdown-menu li > a .text {
  flex: 1 1 auto; }

.bootstrap-select .dropdown-menu li > a .check-mark {
  position: static;
  margin: 0 0 0 auto;
  flex: none;
  color: var(--sg-primary);
  opacity: 1; }

/* ---------- Botões: a métrica do antd ---------- */
/* Tamanho: além de .btn, os seletores com que o Metronic md dimensiona o botão —
   o genérico, os de tamanho sm/xs, o da barra de ações e os dos botões no
   cabeçalho do card. */
.btn, .btn:not(.md-skip),
.btn.btn-sm:not(.md-skip), .btn.btn-xs:not(.md-skip),
.page-content .form-actions .btn,
.portlet > .portlet-title > .actions > .btn,
.portlet > .portlet-title > .actions > .btn-group > .btn,
.portlet > .portlet-title > .actions > .btn.btn-default,
.portlet > .portlet-title > .actions > .btn.btn-sm.btn-default,
.portlet > .portlet-title > .actions > .btn-group > .btn.btn-default,
.portlet > .portlet-title > .actions > .btn-group > .btn.btn-sm.btn-default {
  height: var(--sg-control-h);
  padding: 0 15px;
  font-size: 14px;
  font-weight: 400;
  border-radius: var(--sg-radius);
  border-width: 1px;
  border-style: solid;
  /* o antd dá ao botão uma sombra sólida de 2px embaixo; aqui ela lê como
       borda dupla e envelhece o botão */
  box-shadow: none;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 8px; }

/* button { font-weight: 600 !important } no layout.css */
button.btn {
  font-weight: 400 !important; }

/* o botão flutuante do assistente é redondo e com sombra em .chat-trigger */
.btn.ai-gradient-bg.chat-trigger, .btn.ai-unavailable-bg.chat-trigger {
  border-radius: 50%;
  box-shadow: none;
  display: inline-flex; }

/* Altura e padding gravados inline pelo componente; a skin iguala ao botão padrão.
   A altura inline é vencida por min/max-height, que o style não declara. */
.btn.btn-advanced-filter {
  max-height: var(--sg-control-h); }

.btn.ai-gradient-bg.ant-dropdown-trigger {
  min-height: var(--sg-control-h);
  padding: 0 15px !important; }

/* O bootstrap zera o raio entre botões vizinhos de um .btn-group e entre o botão
   e o campo de um .input-group; na skin todo botão mantém o raio. */
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group > .dropdown-toggle:not(:first-child),
.input-group-btn:first-child > .btn, .input-group-btn:last-child > .btn,
.input-group-btn:first-child > .btn-group > .btn, .input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
  border-radius: var(--sg-radius); }

/* Campo seguido de botão (seleção + pesquisar) é um controle só: os dois se fundem na
   junção. O upload fica de fora porque o botão dele é separado do campo por um respiro. */
.input-group:not(.upload-single *) > .form-control:has(+ .input-group-btn:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.input-group:not(.upload-single *) > .form-control + .input-group-btn:last-child > .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

/* O botão só de ícone (calendário da data) é transparente pela regra de .btn.icon; colado
   ao campo ele vira o addon. A altura de 30px vem inline, vencida pelo min-height. */
.input-group > .form-control + .input-group-btn:last-child > .btn.icon:first-child {
  width: 32px;
  min-height: var(--sg-control-h);
  background: var(--sg-sunk);
  border-color: var(--sg-border);
  border-left-width: 0;
  color: var(--sg-ink-2); }

.input-group > .form-control + .input-group-btn:last-child > .btn.icon:first-child:hover {
  background: var(--sg-split);
  color: var(--sg-primary); }

/* Cor: o bootstrap e o Metronic recolorem o botão em foco e pressionado, e o
   .btn.default e o botão do cabeçalho do card têm cor própria. Na skin o botão
   só muda no hover, e só borda e texto. */
.btn, .btn:not(.md-skip), .page-content .form-actions .btn,
.btn:focus, .btn:active, .btn.active,
.btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active,
.open > .btn-default.dropdown-toggle,
.btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus,
.btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus,
.btn.default:not(.btn-outline),
.btn.default:not(.btn-outline):focus, .btn.default:not(.btn-outline).focus,
.btn.default:not(.btn-outline):active, .btn.default:not(.btn-outline).active,
.open > .btn.default:not(.btn-outline).dropdown-toggle,
.btn.default:not(.btn-outline):active:focus, .btn.default:not(.btn-outline):active.focus,
.btn.default:not(.btn-outline).active:focus, .btn.default:not(.btn-outline).active.focus,
.btn.default:not(.btn-outline):hover,
.btn.default:not(.btn-outline):active:hover, .btn.default:not(.btn-outline).active:hover,
.portlet.light > .portlet-title > .actions .btn-default {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-ink); }

/* o Metronic dá sombra ao botão pressionado em .btn:not(.md-skip):active */
.btn:focus, .btn:active, .btn.active, .btn:not(.md-skip):active {
  box-shadow: none; }

.btn:hover, .btn-default:hover,
.btn-default:active:hover, .btn-default.active:hover,
.btn.default:not(.btn-outline):hover,
.btn.default:not(.btn-outline):active:hover, .btn.default:not(.btn-outline).active:hover,
.page-content .form-actions .btn:hover,
.portlet.light > .portlet-title > .actions .btn-default:hover {
  border-color: var(--sg-primary);
  color: var(--sg-primary); }

.btn.send-btn, .btn.btn-primary, .portlet-title .btn:has(i.fa-plus), .login .form-submit .btn,
.portlet-title .btn:not(.md-skip):has(i.fa-plus),
.page-content .form-actions .send-btn, .page-content .form-actions .send-btn:hover {
  background: var(--sg-primary);
  color: #fff;
  border-color: var(--sg-primary);
  font-weight: 400;
  box-shadow: none; }

.btn.send-btn:hover, .btn.btn-primary:hover, .portlet-title .btn:has(i.fa-plus):hover {
  filter: brightness(1.15); }

.portlet-title .btn:has(i.fa-plus) i {
  color: #fff; }

/* .btn sem modificador de cor é a ação principal da tela (Salvar, Filtrar, Novo):
   no v1 o bootstrap.css já o pintava com a cor primária. O :where mantém a
   especificidade do .btn genérico, então os botões de ícone em tabela seguem
   valendo. */
.btn:not(.md-skip):where(:not(.default, [class*="btn-"], [class*="ai-"], .red, .success, .black, .cancel-btn)),
.page-content .form-actions .btn:where(:not(.default, [class*="btn-"], [class*="ai-"], .red, .success, .black, .cancel-btn)),
.btn:not(.md-skip):where(:not(.default, [class*="btn-"], [class*="ai-"], .red, .success, .black, .cancel-btn)):hover,
.page-content .form-actions .btn:where(:not(.default, [class*="btn-"], [class*="ai-"], .red, .success, .black, .cancel-btn)):hover {
  background: var(--sg-primary);
  border-color: var(--sg-primary);
  color: #fff; }

.btn:not(.md-skip):where(:not(.default, [class*="btn-"], [class*="ai-"], .red, .success, .black, .cancel-btn)):hover {
  filter: brightness(1.15); }

.btn.btn-back, .btn.btn-back.btn-back,
.page-content .form-actions .btn-back, .page-content .form-actions .btn-back:hover {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  color: var(--sg-ink);
  padding: 0 15px; }

/* Botão só de ícone não herda o padding horizontal do botão de texto: com 32px
   de largura e 15px de cada lado, o ícone era espremido e saía do centro.
   Os demais seletores são os do Metronic para o mesmo botão. */
.btn.btn-icon-only, .btn.btn-circle, .btn.btn-icon-only.btn-default,
.btn.btn-icon-only:not(.md-skip),
.portlet > .portlet-title > .actions .btn-icon-only,
.portlet > .portlet-title > .actions .btn-icon-only.btn-default,
.portlet.light > .portlet-title > .actions .btn-icon-only {
  padding: 0;
  justify-content: center;
  align-items: center;
  height: var(--sg-control-h);
  width: 32px;
  min-width: 32px;
  flex: 0 0 32px; }

/* .btn-circle tem raio de 25px com !important */
.btn.btn-circle {
  border-radius: var(--sg-radius) !important; }

.btn.btn-icon-only > i, .btn.btn-circle > i {
  margin: 0;
  line-height: 1; }

/* botão só de ícone não é botão de formulário; o do campo de data é
   .btn.btn-sm.default.icon e precisa empatar com .btn.default */
.btn.icon, .singular-form-action-bar .btn, .input-group-btn > .btn.icon,
.btn.icon.btn-sm:not(.md-skip),
.btn.icon.default:not(.btn-outline),
.btn.icon.default:not(.btn-outline):focus, .btn.icon.default:not(.btn-outline):active,
.btn.icon.default:not(.btn-outline):active:focus {
  height: 24px;
  width: 24px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--sg-ink-3);
  justify-content: center;
  box-shadow: none; }

/* o componente de data grava a altura inline */
.btn.icon {
  min-height: 24px;
  max-height: 24px; }

.btn.icon:hover, .singular-form-action-bar .btn:hover,
.btn.icon.default:not(.btn-outline):hover,
.btn.icon.default:not(.btn-outline):active:hover {
  background: var(--sg-split);
  color: var(--sg-ink); }

.singular-form-action-bar {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  align-self: center; }

/* Os botões do assistente têm fundo em gradiente e SVG branco; a regra genérica
   de .btn pintava o fundo de branco e o ícone sumia. */
.btn.ai-gradient-bg {
  background: linear-gradient(45deg, #6a5af9, #b27af5);
  color: #fff;
  border: none; }

.btn.ai-unavailable-bg {
  background: linear-gradient(45deg, #4f4f4f, #a2a2a2);
  color: #fff;
  border: none; }

.btn.ai-gradient-bg:hover, .btn.ai-gradient-bg:active {
  background: linear-gradient(45deg, #5a4be3, #a75fe5); }

.btn.ai-gradient-bg .icon svg, .btn.ai-unavailable-bg .icon svg {
  fill: #fff; }

.form-actions, .flow-buttons, .crud-actions, .page-content .form-actions {
  background: var(--sg-surface);
  box-shadow: none;
  border: 1px solid var(--sg-border-box);
  border-radius: var(--sg-radius-lg);
  /* a barra de ações nunca encosta na folha acima dela */
  margin-top: 16px;
  padding: 16px 24px; }

/* A barra de ações é filha direta do <form>, enquanto o formulário fica dentro
   de um .col-md-12 com padding 0 15px. As duas molduras empilhadas ficavam com
   larguras diferentes — 15px de sobra de cada lado — e isso lê como relevo. */
form:has(.singular-form-panel-generated) > .form-actions {
  margin-left: 15px;
  margin-right: 15px; }

/* Na autoria a barra de ações é uma régua DENTRO do card, não um card à parte
   como a do formulário acima. Sem isto ela fica a 4px da borda inferior e a
   moldura do card lê como se passasse por cima dos botões. */
/* div.: o painel injeta .authoring-actions num <style> depois deste arquivo */
.authoring-actions, div.authoring-actions {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--sg-split); }

/* ---------- Formulário ---------- */
/* A V1 dá relevo ao container com sombra; aqui a separação vem da borda. */
.singular-container, .portlet.light .singular-container, .modal-body .singular-container {
  box-shadow: none; }

/* Requerimento SEM abas não gera .singular-container-tab, e sem isto os campos
   ficam soltos sobre o fundo — o caso do /externo. O container do formulário
   passa a ser a folha; no form COM abas a folha é a aba.
   O critério é o formulário NÃO TER abas, e não o container estar fora delas:
   o container raiz fica a seis níveis do painel, então depender da cadeia de
   ancestrais quebra assim que a estrutura muda. */
.singular-form-panel-generated:not(:has(.singular-container-tab)) .singular-container {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-box);
  border-radius: var(--sg-radius-lg);
  padding: 20px 24px 4px; }

.singular-form-panel-generated > .row {
  margin: 0; }

/* A folha só vale onde NÃO existe card nem aba: dentro de um .portlet-body ela
   duplicava a moldura, e a barra de ações ficava espremida entre as duas bordas.
   Mesmo critério usado na tabela. */
.singular-container-tab .singular-container,
.portlet-body .singular-container {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0; }

/* Moldura dentro de moldura é sempre erro: a borda interna fica a um padding de
   distância da externa e as duas juntas leem como relevo. Seção aninhada é
   separada por régua e espaçamento, nunca por uma segunda caixa. */
.singular-container .singular-container {
  background: transparent;
  border: none;
  border-radius: 0; }

/* ---------- Formulário com abas ---------- */
.singular-tab-composite-title, h4.singular-tab-composite-title {
  background: var(--sg-surface);
  box-shadow: none;
  border: 1px solid var(--sg-border-box);
  /* régua entre o título do requerimento e o corpo */
  border-bottom: 1px solid var(--sg-border-box);
  border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0;
  padding: 20px 24px;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--sg-ink); }

.singular-container-tab.tab-pane {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-box);
  border-top: none;
  border-radius: 0 0 var(--sg-radius-lg) var(--sg-radius-lg);
  padding: 0;
  overflow: hidden; }

.singular-container-tab .row:has(> .tab-navigation) {
  margin: 0;
  display: flex;
  align-items: stretch;
  width: 100%; }

.singular-container-tab .row:has(> .tab-navigation) > .tab-navigation {
  flex: 0 0 220px;
  max-width: 220px;
  width: 220px;
  float: none;
  padding: 16px 0;
  background: var(--sg-sunk);
  border-right: 1px solid var(--sg-split); }

.singular-container-tab .row:has(> .tab-navigation) > .tab-content-container {
  flex: 1 1 auto;
  max-width: none;
  width: auto;
  float: none;
  padding: 24px;
  background: transparent;
  border: none; }

.singular-container-tab .tab-content-container > *,
.singular-container-tab .tab-content-container .tab-content,
.singular-container-tab .tab-content-container .tab-pane {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0; }

/* os seletores longos são os do Metronic para a aba em hover, foco e ativa */
.nav-tabs.tabs-left > li > a, li.tab-item a,
.tabs-left.nav-tabs > li > a:hover, .tabs-left.nav-tabs > li > a:focus,
.tabs-left.nav-tabs > li.active > a,
.tabs-left.nav-tabs > li.active > a:hover, .tabs-left.nav-tabs > li.active > a:focus {
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--sg-ink-2);
  font-size: 14px;
  font-weight: 400;
  padding: 8px 20px;
  margin: 0; }

.nav-tabs.tabs-left > li.active > a, li.tab-item.active a,
.tabs-left.nav-tabs > li.active > a:hover, .tabs-left.nav-tabs > li.active > a:focus {
  border-left-color: var(--sg-primary);
  background: var(--sg-surface);
  color: var(--sg-primary);
  font-weight: 600;
  box-shadow: none; }

.nav-tabs.tabs-left > li > a:hover,
.tabs-left.nav-tabs > li.active > a:hover {
  background: var(--sg-surface);
  color: var(--sg-ink); }

.singular-composite-title {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: var(--sg-ink);
  text-transform: none;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sg-split); }

/* ---------- Filtro ---------- */
.advanced-filter {
  background: var(--sg-sunk);
  border: 1px solid var(--sg-split);
  /* o corpo do card já dá 16px e as colunas do grid mais 15px: o filtro só
       acrescenta o respiro vertical */
  border-radius: var(--sg-radius);
  padding: 16px 1px;
  margin: 4px 0 16px; }

.advanced-filter .form-group {
  margin-bottom: 16px; }

/* ---------- Barra superior e chrome ---------- */
/* A barra superior carrega a cor da marca. É o que quebra a branquidão sem
   colorir o conteúdo, e cobre a faixa branca de topo que o ATOM não tem — lá a
   lateral escura cumpre esse papel. */
.page-header.navbar, .page-header.navbar.navbar-fixed-top {
  background: var(--sg-primary);
  border-bottom: none;
  box-shadow: none; }

/* Sobre a barra colorida o logotipo padrão (escuro) some. A versão negativa é um
   arquivo do projeto, não um upload da Aparência: assim o tema se sustenta com
   base zerada. Quem enviar um logotipo próprio pela Aparência sobrescreve isto. */
.page-header .page-logo .logo-default, .page-header.navbar .page-logo .logo-default {
  background-image: url("../../../img/logo/logo_singular_negativo.png");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat; }

.page-logo .title-logo, .page-logo .subtitle-logo {
  color: #fff; }

/* o último seletor é o do tema, que pinta o nome do usuário com a cor primária */
.page-header .top-menu .username, .page-header .username,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username {
  color: #fff; }

.page-header .top-menu a,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > i {
  color: rgba(255, 255, 255, 0.85); }

/* .force-header-top-menu-user-font-color aplica a cor da Aparência com !important */
.page-header .top-menu i {
  color: rgba(255, 255, 255, 0.85); }

.page-header .top-menu i.force-header-top-menu-user-font-color {
  color: rgba(255, 255, 255, 0.85) !important; }

.page-header .top-menu .dropdown-toggle:hover .username,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle:hover > .username {
  color: #fff; }

.page-header .top-menu .dropdown-toggle:hover i,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover > i,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle:hover > i {
  color: #fff; }

.page-header .top-menu .dropdown-toggle:hover i.force-header-top-menu-user-font-color {
  color: #fff !important; }

.page-header .badge,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle .badge.badge-default {
  background: #fff;
  color: var(--sg-primary); }

/* o estado aberto herdava fundo branco do Metronic e virava um bloco sobre a cor */
.page-header .top-menu .dropdown.open > .dropdown-toggle,
.page-header .top-menu .dropdown-toggle:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--sg-radius); }

/* O painel do menu de usuário tem fundo branco, mas o texto do .top-menu foi
   pintado de branco para a barra colorida — dentro do painel ele sumiria. */
.page-header .top-menu .dropdown-menu,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu {
  background: var(--sg-surface);
  padding: 4px;
  margin-top: 6px; }

/* .dropdown-menu do Metronic declara borda, raio e sombra com !important */
.page-header .top-menu .dropdown-menu {
  border: 1px solid var(--sg-border-box) !important;
  border-radius: var(--sg-radius-lg) !important;
  box-shadow: var(--sg-shadow) !important; }

.page-header .top-menu .dropdown-menu a,
.page-header .top-menu .dropdown-menu span,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu > li > a {
  color: var(--sg-ink); }

.page-header .top-menu .dropdown-menu i {
  color: var(--sg-ink); }

.page-header .top-menu .dropdown-menu > li > a {
  padding: 6px 12px;
  border-radius: var(--sg-radius-sm);
  display: flex;
  align-items: center;
  gap: 10px; }

.page-header .top-menu .dropdown-menu > li > a:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu > li > a:hover {
  background: var(--sg-sunk);
  color: var(--sg-ink); }

.page-footer, .page-footer-inner,
.page-footer .page-footer-inner, .page-footer-fixed .page-footer .page-footer-inner {
  color: var(--sg-ink-3);
  font-size: 12px; }

/* o rodapé se separa do conteúdo pela mesma régua que delimita as demais
   regiões, no lugar da sombra projetada que havia aqui */
.page-footer {
  border-top: 1px solid var(--sg-border-box);
  box-shadow: none; }

/* nas duas telas com arte de fundo o rodapé fica sobre a imagem, e a régua
   cortaria a arte ao meio */
body:has(.login) .page-footer,
body:has(.css-public-home-img) .page-footer {
  border-top: none; }

/* O .page-container abre com padding 20px 20px 0 — nada embaixo — e o rodapé é
   position: fixed. Sem reservar a altura dele no fim do documento, o último card
   encosta no rodapé mesmo com a barra de rolagem no fim: sobravam 2px. */
.page-container {
  padding-bottom: 56px; }

/* ---------- Modal ---------- */
.modal-content, .modal .modal-content {
  border: 1px solid var(--sg-split);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow); }

.modal-header, .modal .modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--sg-split); }

.modal-header .modal-title, .modal .modal-content .modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--sg-ink);
  text-transform: none; }

.modal-body, .modal .singular-form-panel-generated {
  padding: 20px 24px; }

/* Formulário dentro do .modal-body: o corpo da modal já dá o respiro, e a moldura
   de folha do .singular-container virava um segundo card dentro dela. */
.modal .modal-body .singular-form-panel-generated {
  padding: 0; }

/* sem o padding do painel, o .row volta a compensar o gutter das colunas e os
   campos alinham com o título da modal */
.modal-body .singular-form-panel-generated > .row {
  margin: 0 -15px; }

.modal-body .singular-form-panel-generated .singular-container {
  border: none;
  padding: 0;
  background: transparent; }

.modal-footer, .modal .modal-content .modal-footer {
  padding: 12px 24px;
  background: transparent; }

.modal-footer {
  border-top: 1px solid var(--sg-split); }

.alert, .alert-danger {
  border-radius: var(--sg-radius);
  border: 1px solid #ffccc7;
  background: #fff2f0;
  padding: 12px 16px;
  font-size: 14px; }

/* ---------- Login: a moldura do ATOM sobre o fundo da home ---------- */
/* O mesmo recurso que CustomStudioHomePanel aplica na home pública, alcançado
   por caminho relativo: este arquivo é servido em
   .../SingularStudioResourcesScope/singulei/layout4/css/themes/, e cinco níveis
   acima está a raiz /wicket/resource{versão}/ — então a referência sobrevive à
   troca de versão, que aparece no caminho absoluto.
   O arquivo estático img/sg-background.png NÃO serve aqui: é outra arte, num
   tom mais escuro, e o login ficaria diferente da home. */
body:has(.login), body.page-md:has(.login) {
  background: url("../../../../../org.apache.wicket.Application/homeBackground") center/cover no-repeat fixed var(--sg-primary);
  min-height: 100vh; }

/* Nas duas telas a arte já passa por trás do header — na home o div da imagem
   começa em top 0 e o header é fixed por cima dele. Pintar a barra da cor da
   marca ali corta a arte em duas; transparente, ela continua. */
body:has(.login) .page-header.navbar,
body:has(.css-public-home-img) .page-header.navbar {
  background: transparent;
  box-shadow: none;
  border-bottom: none; }

.login .content {
  background: var(--sg-surface);
  border: 1px solid var(--sg-split);
  border-radius: var(--sg-radius-lg);
  box-shadow: 0 2px 8px rgba(99, 99, 99, 0.2);
  width: 400px;
  padding: 24px; }

/* no ATOM a linha acima dos campos é instrução, não título de página */
.login .form-title, .login .content .form-title, .login .content h3.form-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--sg-ink);
  text-align: left;
  margin: 0 0 16px; }

/* campo grande do antd: 40px, raio 8, texto 16, com espaço à esquerda do ícone */
.login .form-control, .login .form-control-solid,
.login .content .form-control, .login .content .form-control:focus, .login .content .form-control:active {
  height: 40px;
  min-height: 40px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  font-size: 16px;
  padding: 7px 11px 7px 38px;
  color: var(--sg-ink);
  background-color: var(--sg-surface);
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px; }

/* Ícones UserOutlined e LockOutlined do @ant-design/icons, os mesmos do ATOM. Ficam num
   ::before do .form-group e não no fundo do input: o autofill do Chrome força
   background-image: none !important no campo preenchido e o ícone sumia. A senha é
   achada pelo name, não pelo type: o olho de mostrar senha troca o type para text e
   envolve o input num <div>. */
.login .form-group:has(> input[name$="username"]),
.login .form-group:has(input[name$="password"]) {
  position: relative; }

.login .form-group:has(> input[name$="username"])::before,
.login .form-group:has(input[name$="password"])::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  height: 40px;
  width: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  pointer-events: none;
  z-index: 1; }

.login .form-group:has(> input[name$="username"])::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' fill='%231f1f1f'%3E%3Cpath d='M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z'/%3E%3C/svg%3E"); }

.login .form-group:has(input[name$="password"])::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' fill='%231f1f1f'%3E%3Cpath d='M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z'/%3E%3C/svg%3E"); }

.login .form-group {
  margin-bottom: 16px; }

.login .form-submit {
  display: flex;
  margin-top: 24px; }

/* o ATOM herda do antd a sombra sólida de 2px sob o botão primário; aqui ela já
   foi retirada de todos os botões por ler como borda dupla */
.login .btn.uppercase, .login .form-submit .btn {
  width: 100%;
  justify-content: center;
  height: 40px;
  border-radius: var(--sg-radius-lg);
  font-size: 16px; }

/* .uppercase do Metronic é !important */
.login .btn.uppercase {
  text-transform: none !important; }

.login .password-eye {
  color: var(--sg-ink-3); }

/* ---------- Autoria (React/antd): volta ao default do antd ----------
   getTheme.ts hoje força borderRadius 3, Button.borderRadius 2, fontSize 12 e
   colorText #34495e. O ATOM usa o default do antd; o Studio deve usar o mesmo.
   Na implementação final isto vira token no StudioConfigProvider e sai daqui. */
:root, .ant-app {
  --ant-border-radius: 6px;
  --ant-border-radius-lg: 8px;
  --ant-border-radius-sm: 4px;
  --ant-control-height: 32px;
  --ant-font-size: 14px;
  --ant-color-text: rgba(0, 0, 0, .88);
  --ant-color-text-secondary: rgba(0, 0, 0, .65);
  --ant-color-border: #d9d9d9;
  --ant-color-border-secondary: #f0f0f0;
  --ant-color-bg-layout: #f5f5f5;
  --ant-color-fill-alter: #fafafa; }

/* o CSS do antd é injetado depois deste arquivo: o tipo do elemento no seletor
   desempata com :where(.css-*).ant-btn e .ant-btn.ant-btn-sm */
/* O antd regrava --ant-border-radius (2px) e a cor do botão padrão no próprio botão (.css-var-*.ant-btn),
   então o :root acima não chega nele; e o layout.css força button { font-weight: 600 !important }. */
.ant-btn, button.ant-btn {
  border-radius: var(--sg-radius);
  font-size: 14px;
  height: 32px; }

button.ant-btn {
  font-weight: 400 !important; }

button.ant-btn.ant-btn-color-default.ant-btn-variant-outlined {
  --ant-btn-text-color: var(--sg-ink);
  --ant-btn-border-color: var(--sg-border); }

.ant-btn-sm, button.ant-btn.ant-btn-sm {
  height: 24px;
  font-size: 14px; }

/* o Space.Compact do antd zera o raio dos botões que se encostam */
button.ant-btn.ant-btn-compact-item.ant-btn-compact-first-item,
button.ant-btn.ant-btn-compact-item.ant-btn-compact-last-item,
button.ant-btn.ant-btn-compact-item:not(.ant-btn-compact-first-item):not(.ant-btn-compact-last-item) {
  border-radius: var(--ant-border-radius); }

.ant-table-thead > tr > th,
.ant-table-wrapper .ant-table-thead > tr > th.ant-table-cell,
.ant-table-wrapper .ant-table-thead > tr > th.ant-table-cell.ant-table-column-has-sorters:hover,
.ant-table-wrapper .ant-table-thead > tr > th.ant-table-cell.ant-table-column-has-sorters:focus-visible,
.ant-table-wrapper .ant-table-thead > tr > th.ant-table-cell.ant-table-column-sort {
  background: var(--sg-sunk);
  border-bottom: 1px solid var(--sg-split);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--sg-ink); }

.ant-table-tbody > tr > td,
.ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell {
  border-bottom: 1px solid var(--sg-split);
  font-size: 14px; }

/* Os cartões já tinham borda, mas #f0f0f0 contra o fundo do container não
   marcava região nenhuma. */
.ant-card, div.ant-card {
  border-color: var(--sg-border-box);
  border-radius: var(--sg-radius-lg); }

/* um cartão que contém cartões é o canvas da tela, não um cartão */
div.ant-card:has(.ant-card) {
  border-color: transparent; }

/* quando o componente grava o fundo inline, prevalece o dele */
.ant-card:has(.ant-card) {
  background: var(--sg-canvas); }

/* ---------- Seleção de aplicativos (AppsPage.tsx) ---------- */
/* A página monta um card por grupo dentro do card da página; com o padding zerado
   pelo tema, a busca e os cards dos apps encostavam nas bordas. O grupo vira seção. */
.portlet.apps-page > .portlet-title > .caption,
.apps-page .portlet > .portlet-title > .caption {
  margin: 0 auto 0 0; }

.portlet.apps-page > .portlet-body.apps-page-body {
  padding: 16px;
  gap: 16px; }

.apps-page-body > div:first-child {
  margin: 0; }

.apps-page-body > .portlet.light {
  border: none;
  margin: 0;
  border-radius: 0;
  overflow: visible; }

.apps-page-body > .portlet.light > .portlet-title {
  padding: 0 0 12px;
  min-height: 0;
  border-bottom: none; }

.apps-page-body > .portlet.light > .portlet-title::before,
.apps-page-body > .portlet.light > .portlet-title::after {
  display: none; }

.apps-page .apps-grid .ant-card.ant-card-bordered {
  border: 1px solid var(--sg-border-box);
  border-radius: var(--sg-radius-lg); }

.apps-page .apps-grid .ant-card.ant-card-bordered:hover {
  border-color: var(--sg-primary); }

/* o layout.css dá 10px de topo ao conteúdo e nenhum ao menu lateral: o primeiro card
   descia em relação ao card do menu */
@media (min-width: 992px) {
  .page-content-wrapper .page-content {
    padding-top: 0; } }

/* ---------- Card .portlet.box (Metronic): Gestão de Implantações ---------- */
/* O box do Metronic pinta card e título com a cor do tema (grey-cascade: cinza
   médio, título branco). Na skin ele segue o card padrão: corpo branco, título em
   faixa clara. */
.portlet.box, .portlet.box.grey-cascade {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-box); }

.portlet.box > .portlet-title, .portlet.box.grey-cascade > .portlet-title {
  background: var(--sg-sunk);
  border-bottom: 1px solid var(--sg-split);
  padding: 0 16px;
  min-height: 44px; }

.portlet.box > .portlet-title > .caption, .portlet.box.grey-cascade > .portlet-title > .caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  float: none;
  width: 100%;
  margin: 0;
  padding: 12px 0;
  color: var(--sg-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px; }

.portlet.box > .portlet-title > .caption > i, .portlet.box.grey-cascade > .portlet-title > .caption > i {
  float: none;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--sg-ink-3); }

.portlet.box > .portlet-body {
  padding: 12px 16px;
  background: transparent; }

.portlet.box > .portlet-body:has(> .table-responsive:only-child),
.portlet.box > .portlet-body:has(> table) {
  padding: 0; }

/* Situação clicável (span.btn.label): a regra de botão em tabela a reduzia a um
   ícone de 28px transparente; ela volta a ser etiqueta, como a .label vizinha. */
tbody td .btn.label:not(.md-skip), tbody td .btn.label:not(.md-skip):hover {
  width: auto;
  height: auto;
  padding: 2px 6px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 2.5px;
  border-color: transparent;
  color: #fff; }

tbody td .btn.label.toast-error:not(.md-skip) {
  background: #e35b5a; }

tbody td .btn.label.toast-success:not(.md-skip) {
  background: #1bbc9b; }

tbody td .btn.label.toast-warning:not(.md-skip) {
  background: #f89406; }

tbody td .btn.label.toast-info:not(.md-skip) {
  background: #2f96b4; }

/* .btn-circle é tratado como botão só de ícone (32px); com texto ele cortava o rótulo */
.btn.btn-circle.btn-transparent:not(.btn-icon-only) {
  width: auto;
  min-width: 0;
  flex: none;
  padding: 0 15px; }