.docs-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
}

.docs-action-bar > .records-container {
    margin-right: auto;
}

.docs-action-bar .filters-container {
    display: flex;
}

.docs-action-bar .filters-container > *:not(:first-child),
dx-input {
    margin-left: var(--dx-g-spacing-sm);
}

dx-input {
    --dx-c-input-width: 285px;
}

.pagination-container {
    max-width: fit-content;
    margin: var(--dx-g-spacing-lg) auto;
}

@media screen and (max-width: 1024px) {
    dx-card-docs {
        --dx-c-body-max-lines: 3;
    }
}

@media screen and (max-width: 768px) {
    .docs-action-bar {
        flex-direction: column-reverse;
        width: 100%;
        padding: 0;
    }

    .records-container {
        margin-bottom: var(--dx-g-spacing-md);
    }

    dx-input {
        --dx-c-input-width: 100%;

        width: 100%;
        margin-bottom: var(--dx-g-spacing-md);
    }
}

@media screen and (max-width: 600px) {
    .pagination-container {
        width: 100%;
        overflow: hidden;
    }

    .pagination-container > * {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 460px) {
    .docs-action-bar .records-container {
        transform: initial;
        padding: var(--dx-g-spacing-md) 0;
    }
}