#mainContent {
    width: 100%;
}

.formTable > span {
    display: table-row;
}

.formTable > span label {
    display: table-cell;
    width: 7.5em;
}
.formTable > span select {
    display: table-cell;
    width: 100%
}

.formTable > span input {
    display: table-cell;
}

.formTable {
    border-collapse: separate;
    border-spacing: 0 5px;
}

.mainForm {
    margin-bottom: 1em;
}

fieldset.inline {
    legend {
        float: left;
        width: 4em;
        margin: 0;
    }
    input {
        width: 4em;
    }
    a {
        margin-left: .5em;
    }
}

.pagingControls {
    justify-content: center;
    display: flex;
    width: 100%;
    margin-top: .5em;
    svg {
        height: 1em;
    }
    svg > * {
        stroke: lightgray;
    }
    a {
        text-decoration: none;
        svg:hover {
            background: lightblue;
        }
        svg > * {
            stroke: black;
        }
    }
}

#pagingNav {
    margin-top: .5em;
    justify-self: center;
    grid-column: 1 / 3;
}

#pagingControls {
    display: grid;
    grid-template-columns: auto auto;
    label {
		justify-self: right;
	}
    /* .sizeInfo { */
    /*     justify-self: center; */
    /*     grid-column: 1 / 3; */
    /* } */
}

.searchResults {
    max-width: 100%;
    overflow: auto;

}

.searchResults > table {
    min-width: 20em;
    margin-top: 0;
}

@media (min-width: 38em) {
    fieldset.inline {
        legend {
            width: 7.5em;
        }
        div {
            width: 31em;
        }
        .help {
            width: unset;
            display: inline;
        }
    }

    #pagingControls {
		grid-template-columns: auto auto max-content;
        .sizeInfo {
            margin-left: .5em;
        }
    }

    .pagingControls {
	    display: inline;
        margin: 0 .5em 0 0;
    }

    #pagingNav {
	    margin: 0;
	    /* justify-self: center; */
	    grid-column: unset;
    }
}
