body {
    color: var(--color-text);
    font-family: var(--font-secondary);
}

h1, h2, h3, h4, h5, h6,
.page-title,
.modal-title,
label,
.btn,
.label,
.badge,
.nav-tabs > li > a,
.nav-pills > li > a,
.page-sidebar .page-sidebar-menu > li > a {
    font-family: var(--font-primary);
}

label,
.control-label,
th,
.modal-title,
.caption-subject,
.page-title,
.panel-heading,
.static-info .name,
.form-control-static strong,
strong, b {
    font-weight: 600;
}
.bold {
    font-weight: 600 !important;   /* contra components-rounded.css:1109 !important */
}

/* A sidebar do Metronic 3 só tem a altura do menu; a coluna escura até o rodapé é o fundo do container. */
.page-container,
.page-header.navbar,
.page-header.navbar .top-menu,
.page-header-fixed-mobile .page-header.navbar .top-menu,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle,
.page-sidebar,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
    background-color: var(--color-chrome);
}

/* bootstrap.min.css dá 4px ao .navbar; sem o reset do components.css o canto mostra o body claro. */
.page-header.navbar {
    border-radius: 0;
}

body {
    background-color: var(--color-canvas);   /* vence darkblue.css:906 (#364150) por ordem */
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle:hover {
    background-color: var(--color-chrome-hover);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > i {
    color: var(--color-chrome-text);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover > i,
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle > i {
    color: var(--color-text-inverse);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle .badge.badge-default {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.page-sidebar .page-sidebar-menu > li > a {
    border-top-color: var(--color-chrome-line);
    color: var(--color-chrome-text);
}

.page-sidebar .page-sidebar-menu > li > 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,
.page-sidebar .page-sidebar-menu .sub-menu > li > 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-"] {
    color: var(--color-chrome-text);
}

.page-sidebar .page-sidebar-menu > li:hover > a,
.page-sidebar .page-sidebar-menu > li.open > a {
    background-color: var(--color-chrome-hover);
}

.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a,
.page-sidebar .page-sidebar-menu > li.active > a:hover,
.page-sidebar .page-sidebar-menu > li.active.open > a:hover {
    background-color: var(--color-action);
    color: var(--color-text-inverse);
}

.page-sidebar .page-sidebar-menu > li:hover > a > i,
.page-sidebar .page-sidebar-menu > li.open > a > i,
.page-sidebar .page-sidebar-menu > li.active > a > i,
.page-sidebar .page-sidebar-menu > li.active.open > a > i {
    color: var(--color-text-inverse);
}

.page-sidebar .page-sidebar-menu > li.active > a > .selected {
    border-right-color: var(--color-canvas);
}

.page-sidebar .page-sidebar-menu > li .sub-menu {
    background-color: var(--color-chrome) !important;
}

.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 {
    background-color: var(--color-chrome-hover) !important;
    color: var(--color-text-inverse);
}

.page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
    color: var(--color-blue-neon);
}

/* O dropdown do cabeçalho é branco: lá o neon teria 1.6:1, então ele herda o anel global. */
.page-header.navbar a:focus-visible:not(.dropdown-menu a),
.page-sidebar a:focus-visible {
    outline: 2px solid var(--color-focus-inverse);
    outline-offset: -2px;
}

.page-content,
.page-container-bg-solid .page-content {
    background-color: var(--color-canvas);
}

.page-title {
    color: var(--color-text);
    font-weight: 500;
}

.page-title small {
    color: var(--color-text-muted);
}

.page-bar {
    background-color: var(--color-bg);
    border-radius: var(--radius-box-sm);
    box-shadow: var(--shadow-card);
}

/* No fundo sólido a barra vai de borda a borda por margem negativa: canto e sombra ficariam soltos. */
.page-container-bg-solid .page-bar {
    border-radius: 0;
    box-shadow: none;
}

.page-bar .page-breadcrumb > li > a,
.page-bar .page-breadcrumb > li > span,
.page-bar .page-breadcrumb > li > i,
.page-bar .page-breadcrumb > li > i[class^="icon-"],
.page-bar .page-breadcrumb > li > i[class*="icon-"] {
    color: var(--color-text-muted);
}

.page-footer .page-footer-inner {
    color: var(--color-chrome-text);
}

a,
.text-primary {
    color: var(--color-action);
}

a:hover,
a:focus,
.page-bar .page-breadcrumb > li > a:hover {
    color: var(--color-action-hover);
}

a:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.portlet {
    border-radius: var(--radius-box);
}

.portlet > .portlet-title {
    border-bottom-color: var(--color-line-soft);
    border-radius: var(--radius-box) var(--radius-box) 0 0;
}

.portlet > .portlet-body {
    border-radius: 0 0 var(--radius-box) var(--radius-box);
}

.portlet.light {
    background-color: var(--color-bg);
    box-shadow: var(--shadow-card);
}

.portlet.light.bordered {
    border-color: var(--color-line) !important;
}

.portlet.light > .portlet-title > .caption {
    color: var(--color-text);
}

.portlet > .portlet-title > .caption > .caption-subject {
    font-family: var(--font-primary);
    font-weight: 600;
}

.font-green-sharp,
.font-blue-chambray,
.font-blue-steel {
    color: var(--color-action) !important;
}

/* Texto auxiliar do Bootstrap 3 (#777 / #737373) segue o mesmo cinza da pele; o estado do campo
   (.has-error/.has-success/.has-warning .help-block, abaixo) continua mandando por especificidade. */
.text-muted,
.help-block {
    color: var(--color-text-muted);
}

.font-grey-cascade {
    color: var(--color-text-muted) !important;
}

.bg-blue-chambray,
.bg-blue-steel {
    background-color: var(--color-action) !important;
    border-color: var(--color-action) !important;
}

.portlet-title .caption-subject.uppercase,
.panel-heading.uppercase {
    text-transform: none !important;   /* contra components-rounded.css:1117 !important */
}

.panel {
    border-radius: var(--radius-box);
}

.panel-heading {
    border-top-left-radius: calc(var(--radius-box) - 1px);
    border-top-right-radius: calc(var(--radius-box) - 1px);
}

.panel-footer {
    border-bottom-left-radius: calc(var(--radius-box) - 1px);
    border-bottom-right-radius: calc(var(--radius-box) - 1px);
}

.panel-default {
    border-color: var(--color-line);
}

.panel-default > .panel-heading {
    background-color: var(--color-bg);
    border-color: var(--color-line);
    color: var(--color-text);
}

.panel-primary {
    border-color: var(--color-action);
}

.panel-primary > .panel-heading {
    background-color: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-text-inverse);
}

.well {
    background-color: var(--color-action-tint);
    border-radius: var(--radius-box-sm);
}

.modal-content {
    border-color: var(--color-line);
    border-radius: var(--radius-box-lg);
    box-shadow: var(--shadow-float);
}

.modal .modal-header {
    border-bottom-color: var(--color-line-soft);
}

.modal-footer {
    border-top-color: var(--color-line-soft);
}

.modal-title {
    font-weight: 600;
}

.dropdown-menu {
    border-color: var(--color-line);
    border-radius: var(--radius-box-sm);
    box-shadow: var(--shadow-float);
    font-family: var(--font-secondary);
}

/* components-rounded.css:2639 deixa o item em #555, e o hover logo abaixo já era o token:
   parado e sob o cursor discordavam, e qualquer item que não seja um <a> (um POST, por exemplo)
   não tinha cor com que combinar. */
.dropdown-menu > li > a {
    color: var(--color-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--color-action-tint);
    color: var(--color-text);
}

/* Utilitário de status dentro do menu: `.text-danger` é (0,1,0) e perde para o item e para o
   hover dele. O hover entra junto, senão a cor volta ao normal sob o cursor. */
.dropdown-menu > li > a.text-danger,
.dropdown-menu > li > a.text-danger:hover,
.dropdown-menu > li > a.text-danger:focus {
    color: var(--color-danger);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--color-action);
    color: var(--color-text-inverse);
}

.alert {
    border-radius: var(--radius-box-sm);
}

#toast-container > div {
    border-radius: var(--radius-box-sm);
}

.btn,
.btn-lg,
.btn-sm,
.btn-xs,
.btn-group-lg > .btn,
.btn-group-sm > .btn,
.btn-group-xs > .btn,
.input-group-lg > .input-group-btn > .btn,
.input-group-sm > .input-group-btn > .btn {
    border-radius: var(--radius-button);
}

.btn {
    font-weight: 600;
}

.btn-primary {
    background-color: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-text-inverse);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    background-color: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-text-inverse);
}

.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus {
    background-color: var(--color-action);
    border-color: var(--color-action);
}

.btn-primary .badge {
    background-color: var(--color-text-inverse);
    color: var(--color-action);
}

.btn-default {
    background-color: var(--color-bg);
    border-color: var(--color-line);
    color: var(--color-text);
}

/* O hover do secundário não pode ser o mesmo `--color-action-tint` da linha sob o cursor
   (`.table-hover > tbody > tr:hover`, abaixo): dentro da linha o botão ficava da cor do fundo
   e sumia. Ele fica branco e ganha a borda e o texto da ação — visível tanto na linha tingida
   quanto na branca —, e o tint passa a ser só o estado pressionado. */
.btn-default:hover,
.btn-default:focus,
.btn-default.focus {
    background-color: var(--color-bg);
    border-color: var(--color-action);
    color: var(--color-action-hover);
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default,
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
    background-color: var(--color-action-tint);
    border-color: var(--color-action);
    color: var(--color-text);
}

.btn-link {
    color: var(--color-action);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--color-action-hover);
}

.btn-danger, .red.btn,
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active,
.open > .dropdown-toggle.btn-danger,
.red.btn:hover, .red.btn:focus, .red.btn:active, .red.btn.active {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-text-inverse);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .red.btn:hover, .red.btn:focus, .red.btn:active {
    filter: brightness(0.92);
}
.btn-success, .green.btn,
.btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active,
.open > .dropdown-toggle.btn-success,
.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active,
.green-haze.btn, .green-haze.btn:hover, .green-haze.btn:focus, .green-haze.btn:active, .green-haze.btn.active {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-inverse);
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .green.btn:hover, .green.btn:focus, .green.btn:active,
.green-haze.btn:hover, .green-haze.btn:focus, .green-haze.btn:active {
    filter: brightness(0.92);
}
.btn-warning, .yellow.btn,
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active,
.open > .dropdown-toggle.btn-warning,
.yellow.btn:hover, .yellow.btn:focus, .yellow.btn:active, .yellow.btn.active {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-text-inverse);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .yellow.btn:hover, .yellow.btn:focus, .yellow.btn:active {
    filter: brightness(0.92);
}
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
    background-color: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-text-inverse);
}

.label-success, .badge-success { background-color: var(--color-success); }
.label-warning, .badge-warning { background-color: var(--color-warning); }
.label-danger,  .badge-danger  { background-color: var(--color-danger); }
.label-info,    .badge-info    { background-color: var(--color-action); }

.font-red, .font-red-intense, .font-red-thunderbird, .font-red-sunglo { color: var(--color-danger) !important; }   /* legado usa !important */
.font-green, .font-green-jungle, .font-green-meadow { color: var(--color-success) !important; }
.font-yellow, .font-yellow-gold, .font-yellow-casablanca { color: var(--color-warning) !important; }

.alert-success { background-color: var(--color-success-tint); border-color: var(--color-success-line); color: var(--color-success); }
.alert-warning { background-color: var(--color-warning-tint); border-color: var(--color-warning-line); color: var(--color-warning); }
.alert-danger  { background-color: var(--color-danger-tint);  border-color: var(--color-danger-line);  color: var(--color-danger); }
.alert-info    { background-color: var(--color-info-tint);    border-color: var(--color-info-line);    color: var(--color-action-hover); }

.form-control,
.input-sm,
.input-lg,
.form-group-sm .form-control,
.form-group-lg .form-control,
.input-group-addon,
.input-group-addon.input-sm,
.input-group-addon.input-lg,
.input-group-sm > .form-control,
.input-group-lg > .form-control,
.input-group-sm > .input-group-addon,
.input-group-lg > .input-group-addon,
.select2-container--bootstrap .select2-selection {
    border-radius: var(--radius-input);
}

.form-control,
.input-group-addon {
    border-color: var(--color-line);
    color: var(--color-text);
}

.form-control::placeholder,
.select2-container--bootstrap .select2-selection__placeholder,
.select2-container--bootstrap .select2-search__field::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* custom.css crava a borda do select2 com !important; foco e aberto ficam só no anel. */
.select2-container--bootstrap .select2-selection {
    border-color: var(--color-line) !important;
    color: var(--color-text);
}

.input-group-addon {
    background-color: var(--color-line-soft);
}

.form-control:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error .help-block,
.has-error .form-control-feedback,
.form-group .help-block ul li,
ul.list-unstyled li.text-danger {
    color: var(--color-danger);
}
.has-error .form-control {
    border-color: var(--color-danger);
}
.has-error .form-control:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-danger-ring);
}
.has-error .select2-container--bootstrap .select2-selection {
    border-color: var(--color-danger) !important;   /* custom.css crava a borda do select2 com !important */
}
.has-success .control-label, .has-success .help-block { color: var(--color-success); }
.has-success .form-control { border-color: var(--color-success); }
.has-warning .control-label, .has-warning .help-block { color: var(--color-warning); }
.has-warning .form-control { border-color: var(--color-warning); }
.form-group .help-block ul,
.form-group > ul {
    list-style-type: none;   /* a lista de erros do Symfony sai com marcador */
}

.select2-container--bootstrap .select2-dropdown {
    border-color: var(--color-action);
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-action);
    color: var(--color-text-inverse);
}

.select2-results .select2-highlighted {
    background-color: var(--color-action) !important;   /* custom.css crava o destaque do Select2 3 com !important */
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-action-tint);
    border-color: var(--color-line);
    border-radius: var(--radius-button);
    color: var(--color-text);
}

.datepicker .active,
.datepicker .active:hover,
.datepicker .selected {
    background-color: var(--color-action) !important;
}

.datepicker table td,
.datepicker table th {
    font-family: var(--font-secondary) !important;
}

.label {
    border-radius: var(--radius-button);
    font-weight: 500;
}

.badge {
    border-radius: var(--radius-button) !important;
}

.label-primary,
.badge-primary {
    background-color: var(--color-action);
}

.label-default,
.badge-default {
    background-color: var(--color-text-muted);
}

.pagination {
    border-radius: var(--radius-button);
}

.pagination > li > a,
.pagination > li > span {
    border-color: var(--color-line);
    color: var(--color-action);
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-bottom-left-radius: var(--radius-button);
    border-top-left-radius: var(--radius-button);
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-bottom-right-radius: var(--radius-button);
    border-top-right-radius: var(--radius-button);
}

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
    background-color: var(--color-action-tint);
    border-color: var(--color-line);
    color: var(--color-action-hover);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus,
.pagination .active > a,
.pagination .active > span {
    background-color: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-text-inverse);
}

.nav-tabs {
    border-bottom-color: var(--color-line);
}

.nav-tabs > li > a {
    border-radius: var(--radius-box-sm) var(--radius-box-sm) 0 0;
    color: var(--color-text-muted);
}

.tabs-left.nav-tabs > li > 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-radius: var(--radius-box-sm) 0 0 var(--radius-box-sm);
}
.tabs-left.nav-tabs {
    border-right-color: var(--color-line);
}
.nav-tabs > li > a.tab-pendente {
    color: var(--color-danger);   /* substitui style="color:red" inline em visualizar.html.twig */
}

.nav-tabs > li > a:hover {
    background-color: var(--color-action-tint);
    border-color: var(--color-line-soft) var(--color-line-soft) var(--color-line);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--color-bg);
    border-color: var(--color-line) var(--color-line) transparent;
    color: var(--color-action);
}

.tabs-left > li.active > a,
.tabs-left > li.active > a:hover,
.tabs-left > li.active > a:focus {
    border-color: var(--color-line) transparent var(--color-line) var(--color-line);
}

.tabbable-line > .nav-tabs > li.active {
    border-bottom-color: var(--color-action);
}

.tabbable-line > .nav-tabs > li:hover {
    border-bottom-color: var(--color-line);
}

.nav-pills > li > a {
    border-radius: var(--radius-button);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--color-action);
    color: var(--color-text-inverse);
}

.table > thead > tr > th {
    border-bottom-color: var(--color-line);
    color: var(--color-text-muted);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td {
    border-top-color: var(--color-line-soft);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
    border-color: var(--color-line);
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
    border-left-color: transparent;
    border-right-color: transparent;
}
.table > thead > tr > th {
    font-family: var(--font-primary);
    font-weight: 600;
}
.table > thead > tr > th > a {
    color: var(--color-text);
}
.table > thead > tr > th > a:hover {
    color: var(--color-action);
}

.table-striped
 > tbody > tr:nth-of-type(odd) {
    background-color: var(--color-row-stripe);
}

.table-hover > tbody > tr:hover {
    background-color: var(--color-action-tint);
}
.bootbox .modal-content { border-radius: var(--radius-box-lg); }
.modal-header .close { color: var(--color-text-muted); opacity: 1; }
#toast-container > .toast-success { background-color: var(--color-success); }
#toast-container > .toast-error   { background-color: var(--color-danger); }
#toast-container > .toast-warning { background-color: var(--color-warning); }
#toast-container > .toast-info    { background-color: var(--color-action); }
.datepicker { border-radius: var(--radius-box-sm); box-shadow: var(--shadow-pop); border-color: var(--color-line); }
.datepicker table tr td.today, .datepicker table tr td.today:hover { background-color: var(--color-action-tint); color: var(--color-text); }
.tooltip-inner { border-radius: var(--radius-box-xs); background-color: var(--color-chrome); }
.popover { border-radius: var(--radius-box-sm); border-color: var(--color-line); box-shadow: var(--shadow-pop); }
.input-group .btn { border-radius: 0 var(--radius-button) var(--radius-button) 0; }   /* pílula só do lado de fora */
.input-group .input-group-btn:first-child .btn { border-radius: var(--radius-button) 0 0 var(--radius-button); }
.input-group .input-group-addon:first-child { border-radius: var(--radius-input) 0 0 var(--radius-input); }
.input-group .input-group-addon:last-child  { border-radius: 0 var(--radius-input) var(--radius-input) 0; }
.input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0; }
.input-group .form-control:first-child { border-radius: var(--radius-input) 0 0 var(--radius-input); }
.input-group .form-control:last-child  { border-radius: 0 var(--radius-input) var(--radius-input) 0; }

/* Famílias de cor do Metronic e do Bootstrap que carregam status: portlet box, texto e barra de progresso. */
.portlet.box.red {
    border-color: var(--color-danger);
}
.portlet.box.red > .portlet-title {
    background-color: var(--color-danger);
}
.portlet.box.green {
    border-color: var(--color-success);
}
.portlet.box.green > .portlet-title {
    background-color: var(--color-success);
}
.portlet.box.yellow {
    border-color: var(--color-warning);
}
.portlet.box.yellow > .portlet-title {
    background-color: var(--color-warning);
}
.portlet.box.red > .portlet-title > .actions .btn-default,
.portlet.box.green > .portlet-title > .actions .btn-default,
.portlet.box.yellow > .portlet-title > .actions .btn-default {
    border-color: var(--color-inverse-line);
    color: var(--color-text-inverse);
}
.portlet.box.red > .portlet-title > .actions .btn-default > i,
.portlet.box.green > .portlet-title > .actions .btn-default > i,
.portlet.box.yellow > .portlet-title > .actions .btn-default > i {
    color: var(--color-text-inverse);
}
.text-danger,
a.text-danger:hover,
a.text-danger:focus {
    color: var(--color-danger);
}
.text-success,
a.text-success:hover,
a.text-success:focus {
    color: var(--color-success);
}
.text-warning,
a.text-warning:hover,
a.text-warning:focus {
    color: var(--color-warning);
}
.text-info,
a.text-info:hover,
a.text-info:focus {
    color: var(--color-action);
}
.progress-bar-danger,
.progress > .progress-bar-danger {
    background-color: var(--color-danger);
}
.progress-bar-success,
.progress > .progress-bar-success {
    background-color: var(--color-success);
}
.progress-bar-warning,
.progress > .progress-bar-warning {
    background-color: var(--color-warning);
}
.progress-bar-info,
.progress > .progress-bar-info {
    background-color: var(--color-action);
}
.block-spinner-bar > div {
    background-color: var(--color-action);
}

/* Login (PainelLogin.html.twig, sobre login3.css): a tela não tem .page-content, então
   o navy do chrome fica no próprio body.login e o cartão branco vem por cima dele. */
.login {
    background-color: var(--color-chrome) !important;   /* contra login3.css:9 background-color !important */
}
.login .content {
    background-color: var(--color-bg);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow-float);
}
.login .content h3,
.login .content h4 {
    color: var(--color-text);
}
.login .content p {
    color: var(--color-text-muted);
}
.login .content .form-title {
    font-family: var(--font-primary);
    font-weight: 600;   /* login3.css pede 300, e a Bai Jamjuree só tem 500/600: o browser sintetizaria */
}
/* O filete à esquerda do campo é do login3.css; a pele dá a ele o azul da ação e o raio do campo,
   e esquadra o lado esquerdo do input para os dois formarem uma peça só. */
.login .content .input-icon {
    border-left-color: var(--color-action) !important;   /* contra login3.css:48 border-left !important */
    border-radius: var(--radius-input);
}
.login .content .input-icon .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.login .content .form-actions {
    background-color: var(--color-bg);
    border-bottom-color: var(--color-line-soft);
}
.login .content .create-account {
    border-top-color: var(--color-line-soft);
}
.login .copyright {
    color: var(--color-inverse-muted);
}

/* Igor custom edit */
.portlet.box.blue {
    border-color: var(--color-action);
}
.portlet > .portlet-body.blue, .portlet.blue {
    background-color: var(--color-action);
}
.portlet.box.blue > .portlet-title {
    background-color: var(--color-action);
}
.blue.btn {
    background-color: var(--color-action);
}
.blue.btn:hover, .blue.btn:focus, .blue.btn:active, .blue.btn.active {
    background-color: var(--color-action-hover);
}
.open .blue.btn.dropdown-toggle {
    background-color: var(--color-action-hover);
}