:root {
    --afcc-primary: #005dc0;
    --afcc-primary-hover: #004b9b;
    --afcc-primary-contrast: #fff;
    --afcc-page-bg: #f6f8fb;
    --afcc-surface: #fff;
    --afcc-surface-subtle: #f7f7f8;
    --afcc-text: #182230;
    --afcc-text-muted: #667085;
    --afcc-border: #e0e5ec;
    --afcc-focus: #1570ef;
    --afcc-menu-bg: #2a3042;
    --afcc-menu-text: #a6b0cf;
    --afcc-menu-text-active: #fff;
}

body {
    color: var(--afcc-text);
    background-color: var(--afcc-page-bg);
}

.page-content,
.main-content {
    background-color: var(--afcc-page-bg);
}

#page-topbar {
    border-bottom: 1px solid var(--afcc-border);
    box-shadow: 0 1px 8px rgba(52, 52, 59, .08);
}

.navbar-header .header-item,
.navbar-header .header-item i {
    color: var(--afcc-text);
}

.navbar-header .header-item:hover,
.navbar-header .header-item:focus {
    color: var(--afcc-text);
    background: var(--afcc-surface-subtle);
}

.card,
.modal-content,
.dropdown-menu {
    border-color: var(--afcc-border);
    box-shadow: 0 8px 24px rgba(52, 52, 59, .08);
}

.card,
.modal-content,
.dropdown-menu,
.table {
    color: var(--afcc-text);
    background-color: var(--afcc-surface);
}

a,
.text-primary {
    color: var(--afcc-focus) !important;
}

a:hover,
a:focus {
    color: var(--afcc-primary-hover);
}

.btn-primary,
.page-item.active .page-link,
.form-check-input:checked {
    color: var(--afcc-primary-contrast) !important;
    background-color: var(--afcc-primary) !important;
    border-color: var(--afcc-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.page-item.active .page-link:hover {
    color: var(--afcc-primary-contrast) !important;
    background-color: var(--afcc-primary-hover) !important;
    border-color: var(--afcc-primary-hover) !important;
}

.btn-primary:focus,
.btn-check:focus + .btn-primary,
.form-control:focus,
.form-select:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    border-color: var(--afcc-focus) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--afcc-primary) 28%, transparent) !important;
}

.form-control,
.form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    color: var(--afcc-text);
    background-color: var(--afcc-surface);
    border-color: var(--afcc-border);
}

.form-control::placeholder {
    color: var(--afcc-text-muted);
    opacity: .8;
}

.table > :not(caption) > * > * {
    border-color: var(--afcc-border);
}

.table thead th,
.table-dark th {
    color: #fff;
    background-color: var(--afcc-menu-bg) !important;
    border-color: color-mix(in srgb, var(--afcc-menu-bg) 82%, #fff) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--afcc-surface-subtle);
}

.page-link {
    color: var(--afcc-text);
    background-color: var(--afcc-surface);
    border-color: var(--afcc-border);
}

.page-link:hover {
    color: var(--afcc-primary-contrast);
    background-color: color-mix(in srgb, var(--afcc-primary) 20%, var(--afcc-surface));
    border-color: var(--afcc-primary);
}

.badge.bg-primary,
.bg-primary {
    color: var(--afcc-primary-contrast) !important;
    background-color: var(--afcc-primary) !important;
}

.auth-manager .account-pages {
    min-height: 100vh;
    margin: 0 !important;
    padding: clamp(28px, 8vh, 80px) 0 !important;
    display: flex;
    align-items: center;
}

.auth-manager .card {
    border: 1px solid var(--afcc-border);
    border-radius: 8px;
}

.auth-manager .bg-primary-subtle,
.auth-manager .bg-fundo-caixa-topo-login {
    color: var(--afcc-primary-contrast);
}

.auth-manager .card-body {
    color: var(--afcc-text);
}

.auth-manager .profile-user-wid .avatar-title {
    border: 3px solid var(--afcc-surface);
    background: var(--afcc-menu-bg) !important;
    box-shadow: 0 5px 16px rgba(52, 52, 59, .18);
}

.auth-manager .form-control,
.auth-manager .input-group .btn {
    min-height: 44px;
}

.auth-manager .btnLoginAcessar {
    min-height: 44px;
    font-weight: 700;
}

.auth-manager .rodapePColor {
    color: var(--afcc-text-muted) !important;
}

@media (max-width: 575.98px) {
    .auth-manager .account-pages {
        align-items: flex-start;
        padding: 20px 0 !important;
    }
}