@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.01s;
}

.nav-pills .nav-link.active {
    color: #0d503c;
    background-color: #20c997;
}

.nav-pills .nav-link.disabled, .nav-tabs .nav-link.disabled {
    color: #6c757d;
}

.nav-pills .nav-link, .nav-tabs .nav-link {
    color: #06281e;
}

.nav-pills .nav-link:not(.active):hover {
    color: #20c997;
}

.btn.nav-drop, .btn.nav-drop:active {
    color: #0d503c;
    border-color: #20c997;
    background-color: #20c997;
}

.nav-drop .dropdown-item.active {
    color: #0d503c;;
    background-color: #20c997;
}

.nav-drop .dropdown-item:active {
    color: #0d503c;;
    background-color: #20c997;
}

div.htmx-swapping {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

tr.htmx-swapping {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.fade-in-out {
    opacity: 0;
    height: 0;
    animation: fade-in 1s ease-in forwards, fade-out 1s 5s ease-out forwards;
}

@keyframes fade-in {
    75% {
        height: 0.75rem;
    }
    100% {
        height: 0.75rem;
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
        height: 0.75rem;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        height: 0;
    }
}

.active > .page-link {
    background-color: white;
    color: var(--bs-pagination-active-border-color)
}

.btn-outline-danger.bg-white:hover, .btn-outline-danger.bg-white:focus-visible {
    color: var(--bs-danger) !important;
    background-color: #f8d7da !important;
}

.h-lines-3 {
    height: calc(var(--bs-body-font-size) * 3)
}

.h-lines-4 {
    height: calc(var(--bs-body-font-size) * 4)
}

.h-lines-5 {
    height: calc(var(--bs-body-font-size) * 5)
}

.h-fit-content {
    height: fit-content;
}

.text-transparent {
    color: #00000000;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}

/* "мобилизация" табов в карточке клиента */
.nav-tabs .nav-link.active {
    border: 0;
    border-bottom: 2px solid #20c997 !important;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
}