:root {
    --color-primary: #0098A9;
    --color-secondary: #2F277E;
}

.text-primary {
    color: var(--color-primary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.avatar.status-online:before {
    background-color: var(--phoenix-red);
}

nav .nav-link {
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--color-primary);
    border-bottom: none !important;
}

.space {
    height: 5thumb0px;
    display: block;
}

a {
    color: var(--color-primary);
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

a:hover,
a:focus,
a.active {
    color: var(--color-primary) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--color-primary);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--color-primary);
    color: #fff !important;
}

.navbar .dropdown-item {
    font-weight: 700 !important;
}

.btn {
    border-width: 2px;
    border-color: transparent;
}

.btn-primary {
    background-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--color-primary);
    border-width: 2px;
    color: var(--color-primary);
    background-color: transparent ;
}

.btn-secondary {
    background-color: var(--color-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    border-color: var(--color-secondary);
    background-color: transparent;
    color: var(--color-secondary);
}

.btn-action {
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    padding: 10px;
}

.btn-success {
    border: 2px solid transparent;
}

.btn-success:hover,
.btn-success:focus {
    background-color: transparent;
    color: var(--phoenix-btn-bg) !important;
    border: 2px solid var(--phoenix-btn-bg);
}

.btn-danger {
    border: 2px solid transparent;
    background-color: #f00;
}

.btn-danger:focus,
.btn-danger:hover {
    background-color: transparent;
    border: 2px solid #f00;
    color: #f00 !important;
}

.form-control:focus,
.choices.is-focused .choices__inner {
    color: var(--phoenix-body-color) !important;
    background-color: var(--phoenix-emphasis-bg) !important;
    border-color: var(--color-primary) !important;
    outline: 0 !important;
    -webkit-box-shadow: inset 0 1px 2px transparent, inset 0 0 0 30px var(--phoenix-emphasis-bg), 0 0 0 0.25rem rgba(0, 152, 169, 0.17) !important;
    box-shadow: inset 0 1px 2px transparent, inset 0 0 0 30px var(--phoenix-emphasis-bg), 0 0 0 0.25rem rgba(0, 152, 169, 0.17) !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable.is-selecte {
    background-color: var(--color-primary) !important;
}

.breadcrumb-item a {
    color: #000;
}

.breadcrumb-item a.active {
    color: var(--color-primary);
}
[data-list] li.active .page, .table-list li.active .page {
    background-color: var(--color-primary)  ;
}

[data-list] li.active .page, .table-list li.active .page {
    background-color: var(--color-primary)  ;
}

.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
    border-left: unset;
    opacity: 100% !important;
}

.page-link.active, .active > .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.thumb {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1/1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.thumb.rounded {
    border-radius: 100% !important;
}


@media (min-width: 992px) {

    .navbar-expand-lg .navbar-nav {
        gap: 20px;
    }

}