[ui-container] {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  [ui-container] {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  [ui-container] {
    max-width: 970px;
  }
}

[ui-grid-row] {
  margin-top: 15px;
  box-sizing: border-box;
  display: block;
  margin-left: -15px;
  margin-right: -15px;
}

/* Offsets by gutter height (assuming $grid-gutter-width = 30px) */
[ui-grid-row~="offset:1"] {
  height: 30px;
}
[ui-grid-row~="offset:2"] {
  height: 60px;
}
[ui-grid-row~="offset:3"] {
  height: 90px;
}

/* XS columns (assume 12-column grid) */
[ui-grid-column~="xs:1"] {
  width: 8.3333%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:2"] {
  width: 16.6667%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:3"] {
  width: 25%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:4"] {
  width: 33.3333%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:5"] {
  width: 41.6667%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:6"] {
  width: 50%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:7"] {
  width: 58.3333%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:8"] {
  width: 66.6667%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:9"] {
  width: 75%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:10"] {
  width: 83.3333%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:11"] {
  width: 91.6667%;
  box-sizing: border-box;
  padding: 0 15px;
}
[ui-grid-column~="xs:12"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
}

[ui-grid-column~="xs-offset:1"] {
  margin-left: 8.3333%;
}
[ui-grid-column~="xs-offset:2"] {
  margin-left: 16.6667%;
}
[ui-grid-column~="xs-offset:3"] {
  margin-left: 25%;
}
[ui-grid-column~="xs-offset:4"] {
  margin-left: 33.3333%;
}
[ui-grid-column~="xs-offset:5"] {
  margin-left: 41.6667%;
}
[ui-grid-column~="xs-offset:6"] {
  margin-left: 50%;
}
[ui-grid-column~="xs-offset:7"] {
  margin-left: 58.3333%;
}
[ui-grid-column~="xs-offset:8"] {
  margin-left: 66.6667%;
}
[ui-grid-column~="xs-offset:9"] {
  margin-left: 75%;
}
[ui-grid-column~="xs-offset:10"] {
  margin-left: 83.3333%;
}
[ui-grid-column~="xs-offset:11"] {
  margin-left: 91.6667%;
}
[ui-grid-column~="xs-offset:12"] {
  margin-left: 100%;
}

/* sm columns - same widths but wrapped in media query */
@media (min-width: 768px) {
  [ui-grid-column~="sm:1"] {
    width: 8.3333%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:2"] {
    width: 16.6667%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:3"] {
    width: 25%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:4"] {
    width: 33.3333%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:5"] {
    width: 41.6667%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:6"] {
    width: 50%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:7"] {
    width: 58.3333%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:8"] {
    width: 66.6667%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:9"] {
    width: 75%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:10"] {
    width: 83.3333%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:11"] {
    width: 91.6667%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="sm:12"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
  }

  [ui-grid-column~="sm-offset:1"] {
    margin-left: 8.3333%;
  }
  [ui-grid-column~="sm-offset:2"] {
    margin-left: 16.6667%;
  }
  [ui-grid-column~="sm-offset:3"] {
    margin-left: 25%;
  }
  [ui-grid-column~="sm-offset:4"] {
    margin-left: 33.3333%;
  }
  [ui-grid-column~="sm-offset:5"] {
    margin-left: 41.6667%;
  }
  [ui-grid-column~="sm-offset:6"] {
    margin-left: 50%;
  }
  [ui-grid-column~="sm-offset:7"] {
    margin-left: 58.3333%;
  }
  [ui-grid-column~="sm-offset:8"] {
    margin-left: 66.6667%;
  }
  [ui-grid-column~="sm-offset:9"] {
    margin-left: 75%;
  }
  [ui-grid-column~="sm-offset:10"] {
    margin-left: 83.3333%;
  }
  [ui-grid-column~="sm-offset:11"] {
    margin-left: 91.6667%;
  }
  [ui-grid-column~="sm-offset:12"] {
    margin-left: 100%;
  }
}

/* md columns */
@media (min-width: 992px) {
  [ui-grid-column~="md:1"] {
    width: 8.3333%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:2"] {
    width: 16.6667%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:3"] {
    width: 25%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:4"] {
    width: 33.3333%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:5"] {
    width: 41.6667%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:6"] {
    width: 50%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:7"] {
    width: 58.3333%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:8"] {
    width: 66.6667%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:9"] {
    width: 75%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:10"] {
    width: 83.3333%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:11"] {
    width: 91.6667%;
    box-sizing: border-box;
    padding: 0 15px;
  }
  [ui-grid-column~="md:12"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
  }

  [ui-grid-column~="md-offset:1"] {
    margin-left: 8.3333%;
  }
  [ui-grid-column~="md-offset:2"] {
    margin-left: 16.6667%;
  }
  [ui-grid-column~="md-offset:3"] {
    margin-left: 25%;
  }
  [ui-grid-column~="md-offset:4"] {
    margin-left: 33.3333%;
  }
  [ui-grid-column~="md-offset:5"] {
    margin-left: 41.6667%;
  }
  [ui-grid-column~="md-offset:6"] {
    margin-left: 50%;
  }
  [ui-grid-column~="md-offset:7"] {
    margin-left: 58.3333%;
  }
  [ui-grid-column~="md-offset:8"] {
    margin-left: 66.6667%;
  }
  [ui-grid-column~="md-offset:9"] {
    margin-left: 75%;
  }
  [ui-grid-column~="md-offset:10"] {
    margin-left: 83.3333%;
  }
  [ui-grid-column~="md-offset:11"] {
    margin-left: 91.6667%;
  }
  [ui-grid-column~="md-offset:12"] {
    margin-left: 100%;
  }
}

/* Visibility utilities */
[ui-visible] {
  display: none !important;
}

@media (max-width: 767px) {
  [ui-visible~="xs-block"] {
    display: block !important;
  }

  [ui-visible~="xs-flex"] {
    display: flex !important;
  }

  [ui-visible~="xs-inline"] {
    display: inline !important;
  }

  [ui-hidden~="xs"] {
    display: none !important;
  }
}