/*
 * Compatibilidade com classes do AdminLTE 3 / Bootstrap 4 que nao existem no AdminLTE 4 / Bootstrap 5
 * e continuam sendo usadas nas telas. Regras copiadas do AdminLTE 3.2.0.
 */

/* Botao extra pequeno */
.btn-xs {
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.15rem;
}

/* Botao sem arredondamento */
.btn.btn-flat {
    border-radius: 0;
    border-width: 1px;
    box-shadow: none;
}

/* Botao padrao (cinza claro) */
.btn-default {
    background-color: #f8f9fa;
    border-color: #ddd;
    color: #444;
}

.btn-default:hover,
.btn-default:active,
.btn-default.active,
.btn-default.hover {
    background-color: #e9ecef;
    color: #2b2b2b;
}

.btn-default.disabled,
.btn-default:disabled {
    color: #444;
    background-color: #f8f9fa;
}

/* Icone de fonte no small-box (<div class="icon"><i class="..."></i></div>) */
.small-box .icon {
    color: rgba(0, 0, 0, 0.15);
    z-index: 0;
}

.small-box .icon > i {
    font-size: 90px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: transform 0.3s linear;
}

.small-box .icon > i.fa,
.small-box .icon > i.fas,
.small-box .icon > i.far,
.small-box .icon > i.fab,
.small-box .icon > i.ion {
    font-size: 70px;
    top: 20px;
}

.small-box:hover .icon > i {
    transform: scale(1.1);
}

@media (max-width: 767.98px) {
    .small-box .icon {
        display: none;
    }
}

/* Grupo de botoes com radio/checkbox (plugin "buttons" do Bootstrap 4) */
.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

/* Links: o Bootstrap 5 sublinha todo <a>; no Bootstrap 4 o sublinhado so aparecia no hover de links de texto */
a {
    text-decoration: none;
}

a:not([class]):hover {
    text-decoration: underline;
}

/* Cor do texto sobre fundos bg-* (no Bootstrap 5 o bg-* so pinta o fundo; no AdminLTE 3 tambem definia a cor do texto e dos links filhos) */
.bg-primary, .bg-primary > a {
    color: #fff !important;
}

.bg-secondary, .bg-secondary > a {
    color: #fff !important;
}

.bg-success, .bg-success > a {
    color: #fff !important;
}

.bg-info, .bg-info > a {
    color: #fff !important;
}

.bg-warning, .bg-warning > a {
    color: #1f2d3d !important;
}

.bg-danger, .bg-danger > a {
    color: #fff !important;
}

.bg-light, .bg-light > a {
    color: #1f2d3d !important;
}

.bg-dark, .bg-dark > a {
    color: #fff !important;
}

.bg-lightblue, .bg-lightblue > a {
    color: #fff !important;
}

.bg-navy, .bg-navy > a {
    color: #fff !important;
}

.bg-olive, .bg-olive > a {
    color: #fff !important;
}

.bg-lime, .bg-lime > a {
    color: #1f2d3d !important;
}

.bg-fuchsia, .bg-fuchsia > a {
    color: #fff !important;
}

.bg-maroon, .bg-maroon > a {
    color: #fff !important;
}

.bg-blue, .bg-blue > a {
    color: #fff !important;
}

.bg-indigo, .bg-indigo > a {
    color: #fff !important;
}

.bg-purple, .bg-purple > a {
    color: #fff !important;
}

.bg-pink, .bg-pink > a {
    color: #fff !important;
}

.bg-red, .bg-red > a {
    color: #fff !important;
}

.bg-orange, .bg-orange > a {
    color: #1f2d3d !important;
}

.bg-yellow, .bg-yellow > a {
    color: #1f2d3d !important;
}

.bg-green, .bg-green > a {
    color: #fff !important;
}

.bg-teal, .bg-teal > a {
    color: #fff !important;
}

.bg-cyan, .bg-cyan > a {
    color: #fff !important;
}

.bg-white, .bg-white > a {
    color: #1f2d3d !important;
}

.bg-gray, .bg-gray > a {
    color: #fff !important;
}

.bg-gray-dark, .bg-gray-dark > a {
    color: #fff !important;
}
/* Cabecalho das telas (content-header do AdminLTE 3) */
.content-header {
    padding: 15px 0.5rem;
}

.content-header h1 {
    font-size: 1.8rem;
    margin: 0;
}

.content-header .breadcrumb {
    background-color: transparent;
    line-height: 1.8rem;
    margin-bottom: 0;
    padding: 0;
}

/* Cards coloridos e com abas (card-tabs / card-outline-tabs) do AdminLTE 3: cor do cabecalho, dos links/abas e borda superior */
.card-primary:not(.card-outline) > .card-header {
    background-color: #007bff;
}

.card-primary:not(.card-outline) > .card-header,
.card-primary:not(.card-outline) > .card-header a {
    color: #fff;
}

.card-primary:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-primary.card-outline {
    border-top: 3px solid #007bff;
}

.card-primary.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-primary.card-outline-tabs > .card-header a.active,
.card-primary.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #007bff;
}

.card-secondary:not(.card-outline) > .card-header {
    background-color: #6c757d;
}

.card-secondary:not(.card-outline) > .card-header,
.card-secondary:not(.card-outline) > .card-header a {
    color: #fff;
}

.card-secondary:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-secondary.card-outline {
    border-top: 3px solid #6c757d;
}

.card-secondary.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-secondary.card-outline-tabs > .card-header a.active,
.card-secondary.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #6c757d;
}

.card-success:not(.card-outline) > .card-header {
    background-color: #28a745;
}

.card-success:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header a {
    color: #fff;
}

.card-success:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-success.card-outline {
    border-top: 3px solid #28a745;
}

.card-success.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-success.card-outline-tabs > .card-header a.active,
.card-success.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #28a745;
}

.card-info:not(.card-outline) > .card-header {
    background-color: #17a2b8;
}

.card-info:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header a {
    color: #fff;
}

.card-info:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-info.card-outline {
    border-top: 3px solid #17a2b8;
}

.card-info.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-info.card-outline-tabs > .card-header a.active,
.card-info.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #17a2b8;
}

.card-warning:not(.card-outline) > .card-header {
    background-color: #ffc107;
}

.card-warning:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header a {
    color: #1f2d3d;
}

.card-warning:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-warning.card-outline {
    border-top: 3px solid #ffc107;
}

.card-warning.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-warning.card-outline-tabs > .card-header a.active,
.card-warning.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #ffc107;
}

.card-danger:not(.card-outline) > .card-header {
    background-color: #dc3545;
}

.card-danger:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header a {
    color: #fff;
}

.card-danger:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-danger.card-outline {
    border-top: 3px solid #dc3545;
}

.card-danger.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-danger.card-outline-tabs > .card-header a.active,
.card-danger.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #dc3545;
}

.card-dark:not(.card-outline) > .card-header {
    background-color: #343a40;
}

.card-dark:not(.card-outline) > .card-header,
.card-dark:not(.card-outline) > .card-header a {
    color: #fff;
}

.card-dark:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-dark.card-outline {
    border-top: 3px solid #343a40;
}

.card-dark.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-dark.card-outline-tabs > .card-header a.active,
.card-dark.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #343a40;
}

.card-olive:not(.card-outline) > .card-header {
    background-color: #3d9970;
}

.card-olive:not(.card-outline) > .card-header,
.card-olive:not(.card-outline) > .card-header a {
    color: #fff;
}

.card-olive:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-olive.card-outline {
    border-top: 3px solid #3d9970;
}

.card-olive.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-olive.card-outline-tabs > .card-header a.active,
.card-olive.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #3d9970;
}

.card.card-tabs:not(.card-outline) > .card-header {
    border-bottom: 0;
}

.card.card-tabs:not(.card-outline) > .card-header .nav-item:first-child .nav-link {
    border-left-color: transparent;
}

.card.card-tabs.card-outline .nav-item {
    border-bottom: 0;
}

.card.card-tabs.card-outline .nav-item:first-child .nav-link {
    border-left: 0;
    margin-left: 0;
}

.card.card-tabs .card-tools {
    margin: .3rem .5rem;
}

.card.card-tabs:not(.expanding-card).collapsed-card .card-header {
    border-bottom: 0;
}

.card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
    border-bottom: 0;
}

.card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
    margin-bottom: 0;
}

.card.card-tabs.expanding-card .card-header .nav-tabs .nav-item {
    margin-bottom: -1px;
}

.card.card-outline-tabs {
    border-top: 0;
}

.card.card-outline-tabs .card-header .nav-item:first-child .nav-link {
    border-left: 0;
    margin-left: 0;
}

.card.card-outline-tabs .card-header a {
    border-top: 3px solid transparent;
}

.card.card-outline-tabs .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card.card-outline-tabs .card-header a.active:hover {
    margin-top: 0;
}

.card.card-outline-tabs .card-tools {
    margin: .5rem .5rem .3rem;
}

.card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header {
    border-bottom: 0;
}

.card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
    border-bottom: 0;
}

.card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
    margin-bottom: 0;
}

.card.card-outline-tabs.expanding-card .card-header .nav-tabs .nav-item {
    margin-bottom: -1px;
}

/* Utilitarios e componentes de perfil do AdminLTE 3 usados nas telas */
.text-bold,
.text-bold.table td,
.text-bold.table th {
    font-weight: 700;
}

.text-lg {
    font-size: 1.25rem !important;
}

.border-transparent {
    border-color: transparent !important;
}

.bg-gray-light {
    background-color: #f2f4f5;
    color: #1f2d3d !important;
}

.profile-user-img {
    border: 3px solid #adb5bd;
    margin: 0 auto;
    padding: 3px;
    width: 100px;
}

.profile-username {
    font-size: 21px;
    margin-top: 5px;
}

.list-group-unbordered > .list-group-item {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Cards clicaveis (info-box e small-box dentro de link ou com onclick): sem sublinhado e com efeito "pulse" suave no hover */
a:has(.info-box),
a:has(.small-box),
a:has(.info-box):hover,
a:has(.small-box):hover,
a:has(.info-box) *,
a:has(.small-box) * {
    text-decoration: none !important;
}

.info-box[onclick],
.small-box[onclick] {
    cursor: pointer;
}

@keyframes pulse-suave {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.025);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
    }
}

a:hover > .info-box,
a:hover > .small-box,
a:hover > div > .info-box,
a:hover > div > .small-box,
.info-box[onclick]:hover,
.small-box[onclick]:hover {
    animation: pulse-suave 1.6s ease-in-out infinite;
}

/* Quem prefere menos movimento no sistema operacional nao ve a animacao */
@media (prefers-reduced-motion: reduce) {
    a:hover > .info-box,
    a:hover > .small-box,
    a:hover > div > .info-box,
    a:hover > div > .small-box,
    .info-box[onclick]:hover,
    .small-box[onclick]:hover {
        animation: none;
    }
}