﻿/* Append to the existing CRM stylesheet, loaded after theme styles. */
.crm-image-library-filters {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

    .crm-image-library-filters > .mud-input-control {
        flex: 1 1 240px;
        min-width: 0;
    }

    .crm-image-library-filters > .mud-select {
        flex: 0 1 220px;
    }

    .crm-image-library-filters > .mud-button-root {
        margin-top: 4px;
    }

.crm-image-library-grid .mud-table-head th.crm-cell-center .column-header {
    width: 100%;
    justify-content: center;
}

.crm-image-library-grid .mud-table-head th.crm-cell-end .column-header {
    width: 100%;
    justify-content: flex-end;
}

.crm-image-library-grid .crm-cell-center {
    text-align: center;
}

.crm-image-library-grid .crm-cell-end {
    text-align: right;
}

@media (max-width: 599.98px) {
    .crm-image-library-filters {
        flex-direction: column;
        gap: 8px;
    }

        .crm-image-library-filters > .mud-input-control,
        .crm-image-library-filters > .mud-select {
            flex: 0 0 auto;
            width: 100%;
        }

        .crm-image-library-filters > .mud-button-root {
            width: 100%;
        }
}
