angular-material/modules/layouts/angular-material.layout-attributes.css

**[Support for legacy AngularJS ended on January 1st, 2022](https://goo.gle/angularjs-end-of-life). [See `@angular/core` for the actively supported Angular](https://npmjs.com/@angular/core).**

/*!
 * AngularJS Material Design
 * https://github.com/angular/material
 * @license MIT
 * v1.2.4-master-bfc8ae7
 */
/*
*  Responsive attributes
*
*  References:
*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
*  2) https://css-tricks.com/almanac/properties/f/flex/
*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
*  5) http://godban.com.ua/projects/flexgrid
*/
@-moz-document url-prefix() {
  [layout-fill] {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
  }
}
/*
 *  Apply Mixins to create Layout/Flexbox styles
 *
 */
[flex-order] {
  order: 0;
}

[flex-order="-20"] {
  order: -20;
}

[flex-order="-19"] {
  order: -19;
}

[flex-order="-18"] {
  order: -18;
}

[flex-order="-17"] {
  order: -17;
}

[flex-order="-16"] {
  order: -16;
}

[flex-order="-15"] {
  order: -15;
}

[flex-order="-14"] {
  order: -14;
}

[flex-order="-13"] {
  order: -13;
}

[flex-order="-12"] {
  order: -12;
}

[flex-order="-11"] {
  order: -11;
}

[flex-order="-10"] {
  order: -10;
}

[flex-order="-9"] {
  order: -9;
}

[flex-order="-8"] {
  order: -8;
}

[flex-order="-7"] {
  order: -7;
}

[flex-order="-6"] {
  order: -6;
}

[flex-order="-5"] {
  order: -5;
}

[flex-order="-4"] {
  order: -4;
}

[flex-order="-3"] {
  order: -3;
}

[flex-order="-2"] {
  order: -2;
}

[flex-order="-1"] {
  order: -1;
}

[flex-order="0"] {
  order: 0;
}

[flex-order="1"] {
  order: 1;
}

[flex-order="2"] {
  order: 2;
}

[flex-order="3"] {
  order: 3;
}

[flex-order="4"] {
  order: 4;
}

[flex-order="5"] {
  order: 5;
}

[flex-order="6"] {
  order: 6;
}

[flex-order="7"] {
  order: 7;
}

[flex-order="8"] {
  order: 8;
}

[flex-order="9"] {
  order: 9;
}

[flex-order="10"] {
  order: 10;
}

[flex-order="11"] {
  order: 11;
}

[flex-order="12"] {
  order: 12;
}

[flex-order="13"] {
  order: 13;
}

[flex-order="14"] {
  order: 14;
}

[flex-order="15"] {
  order: 15;
}

[flex-order="16"] {
  order: 16;
}

[flex-order="17"] {
  order: 17;
}

[flex-order="18"] {
  order: 18;
}

[flex-order="19"] {
  order: 19;
}

[flex-order="20"] {
  order: 20;
}

[flex-offset="0"] {
  margin-left: 0%;
}

[flex-offset="5"] {
  margin-left: 5%;
}

[flex-offset="10"] {
  margin-left: 10%;
}

[flex-offset="15"] {
  margin-left: 15%;
}

[flex-offset="20"] {
  margin-left: 20%;
}

[flex-offset="25"] {
  margin-left: 25%;
}

[flex-offset="30"] {
  margin-left: 30%;
}

[flex-offset="35"] {
  margin-left: 35%;
}

[flex-offset="40"] {
  margin-left: 40%;
}

[flex-offset="45"] {
  margin-left: 45%;
}

[flex-offset="50"] {
  margin-left: 50%;
}

[flex-offset="55"] {
  margin-left: 55%;
}

[flex-offset="60"] {
  margin-left: 60%;
}

[flex-offset="65"] {
  margin-left: 65%;
}

[flex-offset="70"] {
  margin-left: 70%;
}

[flex-offset="75"] {
  margin-left: 75%;
}

[flex-offset="80"] {
  margin-left: 80%;
}

[flex-offset="85"] {
  margin-left: 85%;
}

[flex-offset="90"] {
  margin-left: 90%;
}

[flex-offset="95"] {
  margin-left: 95%;
}

[flex-offset="33"] {
  margin-left: 33.3333333333%;
}

[flex-offset="66"] {
  margin-left: 66.6666666667%;
}

[layout-align],
[layout-align="start stretch"] {
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}

[layout-align=start],
[layout-align="start start"],
[layout-align="start center"],
[layout-align="start end"],
[layout-align="start stretch"] {
  justify-content: flex-start;
}

[layout-align=center],
[layout-align="center start"],
[layout-align="center center"],
[layout-align="center end"],
[layout-align="center stretch"] {
  justify-content: center;
}

[layout-align=end],
[layout-align="end center"],
[layout-align="end start"],
[layout-align="end end"],
[layout-align="end stretch"] {
  justify-content: flex-end;
}

[layout-align=space-around],
[layout-align="space-around center"],
[layout-align="space-around start"],
[layout-align="space-around end"],
[layout-align="space-around stretch"] {
  justify-content: space-around;
}

[layout-align=space-between],
[layout-align="space-between center"],
[layout-align="space-between start"],
[layout-align="space-between end"],
[layout-align="space-between stretch"] {
  justify-content: space-between;
}

[layout-align="start start"],
[layout-align="center start"],
[layout-align="end start"],
[layout-align="space-between start"],
[layout-align="space-around start"] {
  align-items: flex-start;
  align-content: flex-start;
}

[layout-align="start center"],
[layout-align="center center"],
[layout-align="end center"],
[layout-align="space-between center"],
[layout-align="space-around center"] {
  align-items: center;
  align-content: center;
  max-width: 100%;
}

[layout-align="start center"] > *,
[layout-align="center center"] > *,
[layout-align="end center"] > *,
[layout-align="space-between center"] > *,
[layout-align="space-around center"] > * {
  max-width: 100%;
  box-sizing: border-box;
}

[layout-align="start end"],
[layout-align="center end"],
[layout-align="end end"],
[layout-align="space-between end"],
[layout-align="space-around end"] {
  align-items: flex-end;
  align-content: flex-end;
}

[layout-align="start stretch"],
[layout-align="center stretch"],
[layout-align="end stretch"],
[layout-align="space-between stretch"],
[layout-align="space-around stretch"] {
  align-items: stretch;
  align-content: stretch;
}

[flex] {
  flex: 1;
  box-sizing: border-box;
}

[flex-grow] {
  flex: 1 1 100%;
  box-sizing: border-box;
}

[flex-initial] {
  flex: 0 1 auto;
  box-sizing: border-box;
}

[flex-auto] {
  flex: 1 1 auto;
  box-sizing: border-box;
}

[flex-none] {
  flex: 0 0 auto;
  box-sizing: border-box;
}

[flex="0"] {
  flex: 1 1 0%;
  max-width: 0%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="0"] {
  flex: 1 1 0%;
  max-width: 0%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="0"] {
  flex: 1 1 0%;
  max-width: 100%;
  max-height: 0%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="0"] {
  flex: 1 1 0%;
  max-width: 0%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="0"] {
  flex: 1 1 0%;
  max-width: 100%;
  max-height: 0%;
  box-sizing: border-box;
}

[flex="5"] {
  flex: 1 1 5%;
  max-width: 5%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="5"] {
  flex: 1 1 5%;
  max-width: 5%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="5"] {
  flex: 1 1 5%;
  max-width: 100%;
  max-height: 5%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="5"] {
  flex: 1 1 5%;
  max-width: 5%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="5"] {
  flex: 1 1 5%;
  max-width: 100%;
  max-height: 5%;
  box-sizing: border-box;
}

[flex="10"] {
  flex: 1 1 10%;
  max-width: 10%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="10"] {
  flex: 1 1 10%;
  max-width: 10%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="10"] {
  flex: 1 1 10%;
  max-width: 100%;
  max-height: 10%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="10"] {
  flex: 1 1 10%;
  max-width: 10%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="10"] {
  flex: 1 1 10%;
  max-width: 100%;
  max-height: 10%;
  box-sizing: border-box;
}

[flex="15"] {
  flex: 1 1 15%;
  max-width: 15%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="15"] {
  flex: 1 1 15%;
  max-width: 15%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="15"] {
  flex: 1 1 15%;
  max-width: 100%;
  max-height: 15%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="15"] {
  flex: 1 1 15%;
  max-width: 15%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="15"] {
  flex: 1 1 15%;
  max-width: 100%;
  max-height: 15%;
  box-sizing: border-box;
}

[flex="20"] {
  flex: 1 1 20%;
  max-width: 20%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="20"] {
  flex: 1 1 20%;
  max-width: 20%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="20"] {
  flex: 1 1 20%;
  max-width: 100%;
  max-height: 20%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="20"] {
  flex: 1 1 20%;
  max-width: 20%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="20"] {
  flex: 1 1 20%;
  max-width: 100%;
  max-height: 20%;
  box-sizing: border-box;
}

[flex="25"] {
  flex: 1 1 25%;
  max-width: 25%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="25"] {
  flex: 1 1 25%;
  max-width: 25%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="25"] {
  flex: 1 1 25%;
  max-width: 100%;
  max-height: 25%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="25"] {
  flex: 1 1 25%;
  max-width: 25%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="25"] {
  flex: 1 1 25%;
  max-width: 100%;
  max-height: 25%;
  box-sizing: border-box;
}

[flex="30"] {
  flex: 1 1 30%;
  max-width: 30%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="30"] {
  flex: 1 1 30%;
  max-width: 30%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="30"] {
  flex: 1 1 30%;
  max-width: 100%;
  max-height: 30%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="30"] {
  flex: 1 1 30%;
  max-width: 30%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="30"] {
  flex: 1 1 30%;
  max-width: 100%;
  max-height: 30%;
  box-sizing: border-box;
}

[flex="35"] {
  flex: 1 1 35%;
  max-width: 35%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="35"] {
  flex: 1 1 35%;
  max-width: 35%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="35"] {
  flex: 1 1 35%;
  max-width: 100%;
  max-height: 35%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="35"] {
  flex: 1 1 35%;
  max-width: 35%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="35"] {
  flex: 1 1 35%;
  max-width: 100%;
  max-height: 35%;
  box-sizing: border-box;
}

[flex="40"] {
  flex: 1 1 40%;
  max-width: 40%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="40"] {
  flex: 1 1 40%;
  max-width: 40%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="40"] {
  flex: 1 1 40%;
  max-width: 100%;
  max-height: 40%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="40"] {
  flex: 1 1 40%;
  max-width: 40%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="40"] {
  flex: 1 1 40%;
  max-width: 100%;
  max-height: 40%;
  box-sizing: border-box;
}

[flex="45"] {
  flex: 1 1 45%;
  max-width: 45%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="45"] {
  flex: 1 1 45%;
  max-width: 45%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="45"] {
  flex: 1 1 45%;
  max-width: 100%;
  max-height: 45%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="45"] {
  flex: 1 1 45%;
  max-width: 45%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="45"] {
  flex: 1 1 45%;
  max-width: 100%;
  max-height: 45%;
  box-sizing: border-box;
}

[flex="50"] {
  flex: 1 1 50%;
  max-width: 50%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="50"] {
  flex: 1 1 50%;
  max-width: 50%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="50"] {
  flex: 1 1 50%;
  max-width: 100%;
  max-height: 50%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="50"] {
  flex: 1 1 50%;
  max-width: 50%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="50"] {
  flex: 1 1 50%;
  max-width: 100%;
  max-height: 50%;
  box-sizing: border-box;
}

[flex="55"] {
  flex: 1 1 55%;
  max-width: 55%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="55"] {
  flex: 1 1 55%;
  max-width: 55%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="55"] {
  flex: 1 1 55%;
  max-width: 100%;
  max-height: 55%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="55"] {
  flex: 1 1 55%;
  max-width: 55%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="55"] {
  flex: 1 1 55%;
  max-width: 100%;
  max-height: 55%;
  box-sizing: border-box;
}

[flex="60"] {
  flex: 1 1 60%;
  max-width: 60%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="60"] {
  flex: 1 1 60%;
  max-width: 60%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="60"] {
  flex: 1 1 60%;
  max-width: 100%;
  max-height: 60%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="60"] {
  flex: 1 1 60%;
  max-width: 60%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="60"] {
  flex: 1 1 60%;
  max-width: 100%;
  max-height: 60%;
  box-sizing: border-box;
}

[flex="65"] {
  flex: 1 1 65%;
  max-width: 65%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="65"] {
  flex: 1 1 65%;
  max-width: 65%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="65"] {
  flex: 1 1 65%;
  max-width: 100%;
  max-height: 65%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="65"] {
  flex: 1 1 65%;
  max-width: 65%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="65"] {
  flex: 1 1 65%;
  max-width: 100%;
  max-height: 65%;
  box-sizing: border-box;
}

[flex="70"] {
  flex: 1 1 70%;
  max-width: 70%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="70"] {
  flex: 1 1 70%;
  max-width: 70%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="70"] {
  flex: 1 1 70%;
  max-width: 100%;
  max-height: 70%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="70"] {
  flex: 1 1 70%;
  max-width: 70%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="70"] {
  flex: 1 1 70%;
  max-width: 100%;
  max-height: 70%;
  box-sizing: border-box;
}

[flex="75"] {
  flex: 1 1 75%;
  max-width: 75%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="75"] {
  flex: 1 1 75%;
  max-width: 75%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="75"] {
  flex: 1 1 75%;
  max-width: 100%;
  max-height: 75%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="75"] {
  flex: 1 1 75%;
  max-width: 75%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="75"] {
  flex: 1 1 75%;
  max-width: 100%;
  max-height: 75%;
  box-sizing: border-box;
}

[flex="80"] {
  flex: 1 1 80%;
  max-width: 80%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="80"] {
  flex: 1 1 80%;
  max-width: 80%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="80"] {
  flex: 1 1 80%;
  max-width: 100%;
  max-height: 80%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="80"] {
  flex: 1 1 80%;
  max-width: 80%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="80"] {
  flex: 1 1 80%;
  max-width: 100%;
  max-height: 80%;
  box-sizing: border-box;
}

[flex="85"] {
  flex: 1 1 85%;
  max-width: 85%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="85"] {
  flex: 1 1 85%;
  max-width: 85%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="85"] {
  flex: 1 1 85%;
  max-width: 100%;
  max-height: 85%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="85"] {
  flex: 1 1 85%;
  max-width: 85%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="85"] {
  flex: 1 1 85%;
  max-width: 100%;
  max-height: 85%;
  box-sizing: border-box;
}

[flex="90"] {
  flex: 1 1 90%;
  max-width: 90%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="90"] {
  flex: 1 1 90%;
  max-width: 90%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="90"] {
  flex: 1 1 90%;
  max-width: 100%;
  max-height: 90%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="90"] {
  flex: 1 1 90%;
  max-width: 90%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="90"] {
  flex: 1 1 90%;
  max-width: 100%;
  max-height: 90%;
  box-sizing: border-box;
}

[flex="95"] {
  flex: 1 1 95%;
  max-width: 95%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="95"] {
  flex: 1 1 95%;
  max-width: 95%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="95"] {
  flex: 1 1 95%;
  max-width: 100%;
  max-height: 95%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="95"] {
  flex: 1 1 95%;
  max-width: 95%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="95"] {
  flex: 1 1 95%;
  max-width: 100%;
  max-height: 95%;
  box-sizing: border-box;
}

[flex="100"] {
  flex: 1 1 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="100"] {
  flex: 1 1 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="100"] {
  flex: 1 1 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout=row] > [flex="100"] {
  flex: 1 1 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="100"] {
  flex: 1 1 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=row] > [flex="33"], [layout=row] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box;
}
[layout=row] > [flex="66"], [layout=row] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 66.66%;
  max-height: 100%;
  box-sizing: border-box;
}

[layout=column] > [flex="33"], [layout=column] > [flex="33"] {
  flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box;
}
[layout=column] > [flex="66"], [layout=column] > [flex="66"] {
  flex: 1 1 66.66%;
  max-width: 100%;
  max-height: 66.66%;
  box-sizing: border-box;
}

[layout], [layout=column], [layout=row] {
  box-sizing: border-box;
  display: flex;
}

[layout=column] {
  flex-direction: column;
}

[layout=row] {
  flex-direction: row;
}

[layout-padding] > [flex-sm] {
  padding: 4px;
}

[layout-padding],
[layout-padding] > [flex],
[layout-padding] > [flex-gt-sm],
[layout-padding] > [flex-md] {
  padding: 8px;
}

[layout-padding] > [flex-gt-md],
[layout-padding] > [flex-lg] {
  padding: 16px;
}

[layout-margin] > [flex-sm] {
  margin: 4px;
}

[layout-margin],
[layout-margin] > [flex],
[layout-margin] > [flex-gt-sm],
[layout-margin] > [flex-md] {
  margin: 8px;
}

[layout-margin] > [flex-gt-md],
[layout-margin] > [flex-lg] {
  margin: 16px;
}

[layout-wrap] {
  flex-wrap: wrap;
}

[layout-nowrap] {
  flex-wrap: nowrap;
}

[layout-fill] {
  margin: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
}

/**
 * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
 * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
 * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
 *
 *  hide means hide everywhere
 *  Sizes:
 *         $layout-breakpoint-xs:     600px !default;
 *         $layout-breakpoint-sm:     960px !default;
 *         $layout-breakpoint-md:     1280px !default;
 *         $layout-breakpoint-lg:     1920px !default;
 */
@media (max-width: 599px) {
  [hide-xs]:not([show-xs]):not([show]), [hide]:not([show-xs]):not([show]) {
    display: none;
  }

  [flex-order-xs="-20"] {
    order: -20;
  }

  [flex-order-xs="-19"] {
    order: -19;
  }

  [flex-order-xs="-18"] {
    order: -18;
  }

  [flex-order-xs="-17"] {
    order: -17;
  }

  [flex-order-xs="-16"] {
    order: -16;
  }

  [flex-order-xs="-15"] {
    order: -15;
  }

  [flex-order-xs="-14"] {
    order: -14;
  }

  [flex-order-xs="-13"] {
    order: -13;
  }

  [flex-order-xs="-12"] {
    order: -12;
  }

  [flex-order-xs="-11"] {
    order: -11;
  }

  [flex-order-xs="-10"] {
    order: -10;
  }

  [flex-order-xs="-9"] {
    order: -9;
  }

  [flex-order-xs="-8"] {
    order: -8;
  }

  [flex-order-xs="-7"] {
    order: -7;
  }

  [flex-order-xs="-6"] {
    order: -6;
  }

  [flex-order-xs="-5"] {
    order: -5;
  }

  [flex-order-xs="-4"] {
    order: -4;
  }

  [flex-order-xs="-3"] {
    order: -3;
  }

  [flex-order-xs="-2"] {
    order: -2;
  }

  [flex-order-xs="-1"] {
    order: -1;
  }

  [flex-order-xs="0"] {
    order: 0;
  }

  [flex-order-xs="1"] {
    order: 1;
  }

  [flex-order-xs="2"] {
    order: 2;
  }

  [flex-order-xs="3"] {
    order: 3;
  }

  [flex-order-xs="4"] {
    order: 4;
  }

  [flex-order-xs="5"] {
    order: 5;
  }

  [flex-order-xs="6"] {
    order: 6;
  }

  [flex-order-xs="7"] {
    order: 7;
  }

  [flex-order-xs="8"] {
    order: 8;
  }

  [flex-order-xs="9"] {
    order: 9;
  }

  [flex-order-xs="10"] {
    order: 10;
  }

  [flex-order-xs="11"] {
    order: 11;
  }

  [flex-order-xs="12"] {
    order: 12;
  }

  [flex-order-xs="13"] {
    order: 13;
  }

  [flex-order-xs="14"] {
    order: 14;
  }

  [flex-order-xs="15"] {
    order: 15;
  }

  [flex-order-xs="16"] {
    order: 16;
  }

  [flex-order-xs="17"] {
    order: 17;
  }

  [flex-order-xs="18"] {
    order: 18;
  }

  [flex-order-xs="19"] {
    order: 19;
  }

  [flex-order-xs="20"] {
    order: 20;
  }

  [flex-offset-xs="0"] {
    margin-left: 0%;
  }

  [flex-offset-xs="5"] {
    margin-left: 5%;
  }

  [flex-offset-xs="10"] {
    margin-left: 10%;
  }

  [flex-offset-xs="15"] {
    margin-left: 15%;
  }

  [flex-offset-xs="20"] {
    margin-left: 20%;
  }

  [flex-offset-xs="25"] {
    margin-left: 25%;
  }

  [flex-offset-xs="30"] {
    margin-left: 30%;
  }

  [flex-offset-xs="35"] {
    margin-left: 35%;
  }

  [flex-offset-xs="40"] {
    margin-left: 40%;
  }

  [flex-offset-xs="45"] {
    margin-left: 45%;
  }

  [flex-offset-xs="50"] {
    margin-left: 50%;
  }

  [flex-offset-xs="55"] {
    margin-left: 55%;
  }

  [flex-offset-xs="60"] {
    margin-left: 60%;
  }

  [flex-offset-xs="65"] {
    margin-left: 65%;
  }

  [flex-offset-xs="70"] {
    margin-left: 70%;
  }

  [flex-offset-xs="75"] {
    margin-left: 75%;
  }

  [flex-offset-xs="80"] {
    margin-left: 80%;
  }

  [flex-offset-xs="85"] {
    margin-left: 85%;
  }

  [flex-offset-xs="90"] {
    margin-left: 90%;
  }

  [flex-offset-xs="95"] {
    margin-left: 95%;
  }

  [flex-offset-xs="33"] {
    margin-left: 33.3333333333%;
  }

  [flex-offset-xs="66"] {
    margin-left: 66.6666666667%;
  }

  [layout-align-xs],
[layout-align-xs="start stretch"] {
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
  }

  [layout-align-xs=start],
[layout-align-xs="start start"],
[layout-align-xs="start center"],
[layout-align-xs="start end"],
[layout-align-xs="start stretch"] {
    justify-content: flex-start;
  }

  [layout-align-xs=center],
[layout-align-xs="center start"],
[layout-align-xs="center center"],
[layout-align-xs="center end"],
[layout-align-xs="center stretch"] {
    justify-content: center;
  }

  [layout-align-xs=end],
[layout-align-xs="end center"],
[layout-align-xs="end start"],
[layout-align-xs="end end"],
[layout-align-xs="end stretch"] {
    justify-content: flex-end;
  }

  [layout-align-xs=space-around],
[layout-align-xs="space-around center"],
[layout-align-xs="space-around start"],
[layout-align-xs="space-around end"],
[layout-align-xs="space-around stretch"] {
    justify-content: space-around;
  }

  [layout-align-xs=space-between],
[layout-align-xs="space-between center"],
[layout-align-xs="space-between start"],
[layout-align-xs="space-between end"],
[layout-align-xs="space-between stretch"] {
    justify-content: space-between;
  }

  [layout-align-xs="start start"],
[layout-align-xs="center start"],
[layout-align-xs="end start"],
[layout-align-xs="space-between start"],
[layout-align-xs="space-around start"] {
    align-items: flex-start;
    align-content: flex-start;
  }

  [layout-align-xs="start center"],
[layout-align-xs="center center"],
[layout-align-xs="end center"],
[layout-align-xs="space-between center"],
[layout-align-xs="space-around center"] {
    align-items: center;
    align-content: center;
    max-width: 100%;
  }

  [layout-align-xs="start center"] > *,
[layout-align-xs="center center"] > *,
[layout-align-xs="end center"] > *,
[layout-align-xs="space-between center"] > *,
[layout-align-xs="space-around center"] > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  [layout-align-xs="start end"],
[layout-align-xs="center end"],
[layout-align-xs="end end"],
[layout-align-xs="space-between end"],
[layout-align-xs="space-around end"] {
    align-items: flex-end;
    align-content: flex-end;
  }

  [layout-align-xs="start stretch"],
[layout-align-xs="center stretch"],
[layout-align-xs="end stretch"],
[layout-align-xs="space-between stretch"],
[layout-align-xs="space-around stretch"] {
    align-items: stretch;
    align-content: stretch;
  }

  [flex-xs] {
    flex: 1;
    box-sizing: border-box;
  }

  [flex-xs-grow] {
    flex: 1 1 100%;
    box-sizing: border-box;
  }

  [flex-xs-initial] {
    flex: 0 1 auto;
    box-sizing: border-box;
  }

  [flex-xs-auto] {
    flex: 1 1 auto;
    box-sizing: border-box;
  }

  [flex-xs-none] {
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  [flex-xs="0"] {
    flex: 1 1 0%;
    max-width: 0%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="0"] {
    flex: 1 1 0%;
    max-width: 0%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="0"] {
    flex: 1 1 0%;
    max-width: 100%;
    max-height: 0%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=row] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
  }
  [layout=row] > [flex-xs="66"], [layout=row] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="33"], [layout=column] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 100%;
    max-height: 33.33%;
    box-sizing: border-box;
  }
  [layout=column] > [flex-xs="66"], [layout=column] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 100%;
    max-height: 66.66%;
    box-sizing: border-box;
  }

  [layout-xs=row] > [flex-xs="0"] {
    flex: 1 1 0%;
    max-width: 0%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout-xs=column] > [flex-xs="0"] {
    flex: 1 1 0%;
    max-width: 100%;
    max-height: 0%;
    box-sizing: border-box;
  }

  [flex-xs="5"] {
    flex: 1 1 5%;
    max-width: 5%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="5"] {
    flex: 1 1 5%;
    max-width: 5%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="5"] {
    flex: 1 1 5%;
    max-width: 100%;
    max-height: 5%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=row] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
  }
  [layout=row] > [flex-xs="66"], [layout=row] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="33"], [layout=column] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 100%;
    max-height: 33.33%;
    box-sizing: border-box;
  }
  [layout=column] > [flex-xs="66"], [layout=column] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 100%;
    max-height: 66.66%;
    box-sizing: border-box;
  }

  [layout-xs=row] > [flex-xs="5"] {
    flex: 1 1 5%;
    max-width: 5%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout-xs=column] > [flex-xs="5"] {
    flex: 1 1 5%;
    max-width: 100%;
    max-height: 5%;
    box-sizing: border-box;
  }

  [flex-xs="10"] {
    flex: 1 1 10%;
    max-width: 10%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="10"] {
    flex: 1 1 10%;
    max-width: 10%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="10"] {
    flex: 1 1 10%;
    max-width: 100%;
    max-height: 10%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=row] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
  }
  [layout=row] > [flex-xs="66"], [layout=row] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="33"], [layout=column] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 100%;
    max-height: 33.33%;
    box-sizing: border-box;
  }
  [layout=column] > [flex-xs="66"], [layout=column] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 100%;
    max-height: 66.66%;
    box-sizing: border-box;
  }

  [layout-xs=row] > [flex-xs="10"] {
    flex: 1 1 10%;
    max-width: 10%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout-xs=column] > [flex-xs="10"] {
    flex: 1 1 10%;
    max-width: 100%;
    max-height: 10%;
    box-sizing: border-box;
  }

  [flex-xs="15"] {
    flex: 1 1 15%;
    max-width: 15%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="15"] {
    flex: 1 1 15%;
    max-width: 15%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="15"] {
    flex: 1 1 15%;
    max-width: 100%;
    max-height: 15%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=row] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
  }
  [layout=row] > [flex-xs="66"], [layout=row] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="33"], [layout=column] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 100%;
    max-height: 33.33%;
    box-sizing: border-box;
  }
  [layout=column] > [flex-xs="66"], [layout=column] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 100%;
    max-height: 66.66%;
    box-sizing: border-box;
  }

  [layout-xs=row] > [flex-xs="15"] {
    flex: 1 1 15%;
    max-width: 15%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout-xs=column] > [flex-xs="15"] {
    flex: 1 1 15%;
    max-width: 100%;
    max-height: 15%;
    box-sizing: border-box;
  }

  [flex-xs="20"] {
    flex: 1 1 20%;
    max-width: 20%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="20"] {
    flex: 1 1 20%;
    max-width: 20%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="20"] {
    flex: 1 1 20%;
    max-width: 100%;
    max-height: 20%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=row] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
  }
  [layout=row] > [flex-xs="66"], [layout=row] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="33"], [layout=column] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 100%;
    max-height: 33.33%;
    box-sizing: border-box;
  }
  [layout=column] > [flex-xs="66"], [layout=column] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 100%;
    max-height: 66.66%;
    box-sizing: border-box;
  }

  [layout-xs=row] > [flex-xs="20"] {
    flex: 1 1 20%;
    max-width: 20%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout-xs=column] > [flex-xs="20"] {
    flex: 1 1 20%;
    max-width: 100%;
    max-height: 20%;
    box-sizing: border-box;
  }

  [flex-xs="25"] {
    flex: 1 1 25%;
    max-width: 25%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="25"] {
    flex: 1 1 25%;
    max-width: 25%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="25"] {
    flex: 1 1 25%;
    max-width: 100%;
    max-height: 25%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=row] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
  }
  [layout=row] > [flex-xs="66"], [layout=row] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="33"], [layout=column] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 100%;
    max-height: 33.33%;
    box-sizing: border-box;
  }
  [layout=column] > [flex-xs="66"], [layout=column] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 100%;
    max-height: 66.66%;
    box-sizing: border-box;
  }

  [layout-xs=row] > [flex-xs="25"] {
    flex: 1 1 25%;
    max-width: 25%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout-xs=column] > [flex-xs="25"] {
    flex: 1 1 25%;
    max-width: 100%;
    max-height: 25%;
    box-sizing: border-box;
  }

  [flex-xs="30"] {
    flex: 1 1 30%;
    max-width: 30%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="30"] {
    flex: 1 1 30%;
    max-width: 30%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="30"] {
    flex: 1 1 30%;
    max-width: 100%;
    max-height: 30%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=row] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
  }
  [layout=row] > [flex-xs="66"], [layout=row] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="33"], [layout=column] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 100%;
    max-height: 33.33%;
    box-sizing: border-box;
  }
  [layout=column] > [flex-xs="66"], [layout=column] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 100%;
    max-height: 66.66%;
    box-sizing: border-box;
  }

  [layout-xs=row] > [flex-xs="30"] {
    flex: 1 1 30%;
    max-width: 30%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout-xs=column] > [flex-xs="30"] {
    flex: 1 1 30%;
    max-width: 100%;
    max-height: 30%;
    box-sizing: border-box;
  }

  [flex-xs="35"] {
    flex: 1 1 35%;
    max-width: 35%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="35"] {
    flex: 1 1 35%;
    max-width: 35%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="35"] {
    flex: 1 1 35%;
    max-width: 100%;
    max-height: 35%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=row] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
  }
  [layout=row] > [flex-xs="66"], [layout=row] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="33"], [layout=column] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 100%;
    max-height: 33.33%;
    box-sizing: border-box;
  }
  [layout=column] > [flex-xs="66"], [layout=column] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 100%;
    max-height: 66.66%;
    box-sizing: border-box;
  }

  [layout-xs=row] > [flex-xs="35"] {
    flex: 1 1 35%;
    max-width: 35%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout-xs=column] > [flex-xs="35"] {
    flex: 1 1 35%;
    max-width: 100%;
    max-height: 35%;
    box-sizing: border-box;
  }

  [flex-xs="40"] {
    flex: 1 1 40%;
    max-width: 40%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="40"] {
    flex: 1 1 40%;
    max-width: 40%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="40"] {
    flex: 1 1 40%;
    max-width: 100%;
    max-height: 40%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=row] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    max-height: 100%;
    box-sizing: border-box;
  }
  [layout=row] > [flex-xs="66"], [layout=row] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 66.66%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="33"], [layout=column] > [flex-xs="33"] {
    flex: 1 1 33.33%;
    max-width: 100%;
    max-height: 33.33%;
    box-sizing: border-box;
  }
  [layout=column] > [flex-xs="66"], [layout=column] > [flex-xs="66"] {
    flex: 1 1 66.66%;
    max-width: 100%;
    max-height: 66.66%;
    box-sizing: border-box;
  }

  [layout-xs=row] > [flex-xs="40"] {
    flex: 1 1 40%;
    max-width: 40%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout-xs=column] > [flex-xs="40"] {
    flex: 1 1 40%;
    max-width: 100%;
    max-height: 40%;
    box-sizing: border-box;
  }

  [flex-xs="45"] {
    flex: 1 1 45%;
    max-width: 45%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="45"] {
    flex: 1 1 45%;
    max-width: 45%;
    max-height: 100%;
    box-sizing: border-box;
  }

  [layout=column] > [flex-xs="45"] {
    flex: 1 1 45%;
    max-width: 100%;
    max-height: 45%;
    box-sizing: border-box;
  }

  [layout=row] > [flex-xs="33"], [layout=ro