/* Minimal 12-column responsive grid (Materialize-style s/m/l breakpoints)
   required by the row/col.sX/mX/lX classes used across the Razor pages. */

*, *::before, *::after {
    box-sizing: border-box;
}

.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    box-sizing: border-box;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.row .col {
    float: left;
    box-sizing: border-box;
    padding: 0 0.75rem;
    min-height: 1px;
}

.row .col.s1 { width: 8.3333%; }
.row .col.s2 { width: 16.6667%; }
.row .col.s3 { width: 25%; }
.row .col.s4 { width: 33.3333%; }
.row .col.s5 { width: 41.6667%; }
.row .col.s6 { width: 50%; }
.row .col.s7 { width: 58.3333%; }
.row .col.s8 { width: 66.6667%; }
.row .col.s9 { width: 75%; }
.row .col.s10 { width: 83.3333%; }
.row .col.s11 { width: 91.6667%; }
.row .col.s12 { width: 100%; }

@media only screen and (min-width: 601px) {
    .row .col.m1 { width: 8.3333%; }
    .row .col.m2 { width: 16.6667%; }
    .row .col.m3 { width: 25%; }
    .row .col.m4 { width: 33.3333%; }
    .row .col.m5 { width: 41.6667%; }
    .row .col.m6 { width: 50%; }
    .row .col.m7 { width: 58.3333%; }
    .row .col.m8 { width: 66.6667%; }
    .row .col.m9 { width: 75%; }
    .row .col.m10 { width: 83.3333%; }
    .row .col.m11 { width: 91.6667%; }
    .row .col.m12 { width: 100%; }
}

@media only screen and (min-width: 993px) {
    .row .col.l1 { width: 8.3333%; }
    .row .col.l2 { width: 16.6667%; }
    .row .col.l3 { width: 25%; }
    .row .col.l4 { width: 33.3333%; }
    .row .col.l5 { width: 41.6667%; }
    .row .col.l6 { width: 50%; }
    .row .col.l7 { width: 58.3333%; }
    .row .col.l8 { width: 66.6667%; }
    .row .col.l9 { width: 75%; }
    .row .col.l10 { width: 83.3333%; }
    .row .col.l11 { width: 91.6667%; }
    .row .col.l12 { width: 100%; }
}