/*
Grids
 -------------------------------------------------*/
.grid {
    display: flex;
    flex-flow: row wrap;
    /*box-shadow: 0 0 .25em red;*/
}

.grid .form-group {
    margin: 0;
    width: 100%;
}

.grid .form-group + .form-group {
    margin-top: 1em;
}


/*
 Grid -- Padding
 -------------------------------------------------*/
.grid {
    margin: -1.5em; /* Default to 3em spacing */
}

.grid.pad-0,
.grid .grid {
    margin: 0;
}

.grid.pad-1 {
    margin: -.5em;
}

.grid.pad-1-5 {
    margin: -.75em;
}

.grid.pad-2 {
    margin: -1em;
}

.grid.pad-4 {
    margin: 2em;
}

.grid > .action-buttons {
    margin-top: 0;
    margin-bottom: -1.5em;
}

.grid.pad-1 > .action-buttons {
    margin-bottom: -.5em;
}

.grid.pad-2 > .action-buttons {
    margin-bottom: -1em;
}

.grid.pad-4 > .action-buttons {
    margin-bottom: -2em;
}

/**
    Grid Stretch for user management page...
 */
.grid.grid-stretch > :not(.grid) {
    display: flex;
    align-items: stretch;
}

.grid.grid-stretch > :not(.grid) > .panel {
    display: flex;
    flex-flow: row wrap;
}

/**
    Grid Padding
 */
.grid > :not(.grid) {
    padding: 1.5em; /* Default to 3em spacing */
}

.grid.pad-0 > :not(.grid) {
    padding: 0;
}

.grid.pad-1 > :not(.grid) {
    padding: .5em;
}

.grid.pad-2 > :not(.grid) {
    padding: 1em;
}

.grid.pad-4 > :not(.grid) {
    padding: 2em;
}

/*
 Grid -- Columns
 -------------------------------------------------*/
.grid > *,
.grid .col-1,
.grid.columns-1 .col-1,
.grid.columns-2 .col-2,
.grid.columns-3 .col-3,
.grid.columns-4 .col-4 {
    width: 100%;
}

@media screen and (min-width: 640px) {
    .grid.columns-2 > *,
    .grid.columns-4 .col-2 {
        width: 50%;
    }

    .grid.columns-3 > *,
    .grid.columns-3 .col-1 {
        width: 33.3333%;
    }

    .grid.columns-4 > *,
    .grid.columns-4 .col-1 {
        width: 25%;
    }

    .grid.columns-3 .col-2 {
        width: 66.6666%;
    }

    .grid.columns-4 .col-3 {
        width: 75%;
    }
}