.pg-next-col {
    vertical-align: baseline
}

.grid-view-header {
    display: grid;
    grid-template-columns: auto 1fr;
}

.grid-view-search {
    display: grid;
    grid-template-columns: auto 1fr;
}

.grid-view-search button {
    margin-left: 20px;
}

.grid-view-header__right-side {
    display: grid;
    grid-template-columns: 300px repeat(auto-fit, 160px);
    width: 100%;
    grid-gap: 8px;
    justify-content: end;
    text-align: center;
}

.pageable-grid-view-container .rz-grid-table {
    max-height: 40vh !important;
    display: block !important;
}

.pageable-grid-view-container .rz-grid-table td .validation-message {
    white-space: break-spaces;
    inline-size: 100%;
}

.pageable-grid-view-container colgroup {
    /* I don't know why this is necesary */
    /* I need to put a width here greater then the width of the table or there is a weird gap on the right */
    width: 2000px !important;
}

.pageable-grid-view-container td {
    max-width: 200px;
}

.pageable-grid-error-label {
    color: red
}

@media (max-width: 768px) {
    .grid-view-header {
        grid-template-columns: 1fr;
    }

    .grid-view-header__right-side {
        grid-template-columns: 1fr;
        margin-top: 10px;
    }
}

@media (min-width: 1200px) {
    .pageable-grid-view-container .rz-grid-table {
        max-height: 45vh !important;
    }
}

@media (min-width: 2000px) {
    .pageable-grid-view-container .rz-grid-table {
        max-height: 60vh !important;
    }
}