/**
 * The flex css for easy use flexbox
 * @author Dennis Richter 
 */
[flex-row], [flex-box], [flex-col], [flex-layout] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[flex-row] > [flex], [flex-box] > [flex], [flex-col] > [flex], [flex-layout] > [flex] {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
[flex-row] > [flex-2x], [flex-box] > [flex-2x], [flex-col] > [flex-2x], [flex-layout] > [flex-2x] {
  -webkit-flex: 2;
      -ms-flex: 2;
          flex: 2;
}
[flex-row] > [flex-3x], [flex-box] > [flex-3x], [flex-col] > [flex-3x], [flex-layout] > [flex-3x] {
  -webkit-flex: 3;
      -ms-flex: 3;
          flex: 3;
}
[flex-row] > [flex-4x], [flex-box] > [flex-4x], [flex-col] > [flex-4x], [flex-layout] > [flex-4x] {
  -webkit-flex: 4;
      -ms-flex: 4;
          flex: 4;
}
[flex-row] > [flex-5x], [flex-box] > [flex-5x], [flex-col] > [flex-5x], [flex-layout] > [flex-5x] {
  -webkit-flex: 5;
      -ms-flex: 5;
          flex: 5;
}
[flex-row] > [flex-6x], [flex-box] > [flex-6x], [flex-col] > [flex-6x], [flex-layout] > [flex-6x] {
  -webkit-flex: 6;
      -ms-flex: 6;
          flex: 6;
}
[flex-row] > [flex-7x], [flex-box] > [flex-7x], [flex-col] > [flex-7x], [flex-layout] > [flex-7x] {
  -webkit-flex: 7;
      -ms-flex: 7;
          flex: 7;
}
[flex-row] > [flex-8x], [flex-box] > [flex-8x], [flex-col] > [flex-8x], [flex-layout] > [flex-8x] {
  -webkit-flex: 8;
      -ms-flex: 8;
          flex: 8;
}
[flex-row] > [flex-9x], [flex-box] > [flex-9x], [flex-col] > [flex-9x], [flex-layout] > [flex-9x] {
  -webkit-flex: 9;
      -ms-flex: 9;
          flex: 9;
}
[flex-row] > [flex-self="start"], [flex-box] > [flex-self="start"], [flex-col] > [flex-self="start"], [flex-layout] > [flex-self="start"] {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
[flex-row] > [flex-self="center"], [flex-box] > [flex-self="center"], [flex-col] > [flex-self="center"], [flex-layout] > [flex-self="center"] {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
[flex-row] > [flex-self="stretch"], [flex-box] > [flex-self="stretch"], [flex-col] > [flex-self="stretch"], [flex-layout] > [flex-self="stretch"] {
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
}
[flex-row] > [flex-self="baseline"], [flex-box] > [flex-self="baseline"], [flex-col] > [flex-self="baseline"], [flex-layout] > [flex-self="baseline"] {
  -webkit-align-self: baseline;
      -ms-flex-item-align: baseline;
          align-self: baseline;
}
[flex-row] > [flex-self="end"], [flex-box] > [flex-self="end"], [flex-col] > [flex-self="end"], [flex-layout] > [flex-self="end"] {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}

[flex-row], [flex-box], [flex-layout] {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

[flex-col] {
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

[flex-row^="reverse"] {
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

[flex-col^="reverse"] {
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

body[flex-box] {
  position: absolute;
  margin: 0;
}

[flex-box] {
  width: 100%;
  height: 100%;
}

[flex-row$="wrap"],
[flex-box$="wrap"],
[flex-col$="wrap"] {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

[flex-row$="wrap-reverse"],
[flex-box$="wrap-reverse"],
[flex-col$="wrap-reverse"] {
  -webkit-flex-wrap: wrap-reverse;
      -ms-flex-wrap: wrap-reverse;
          flex-wrap: wrap-reverse;
}

/* flex-Layout main axis */
[flex-layout^="start"] {
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

[flex-layout^="center"] {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

[flex-layout^="stretch"] > * {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

[flex-layout^="space"],
[flex-layout^="space-between"] {
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
[flex-layout^="space"]:not([flex-content]),
[flex-layout^="space-between"]:not([flex-content]) {
  -webkit-align-content: space-between;
      -ms-flex-line-pack: justify;
          align-content: space-between;
}

[flex-layout^="space-around"] {
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
[flex-layout^="space-around"]:not([flex-content]) {
  -webkit-align-content: space-around;
      -ms-flex-line-pack: distribute;
          align-content: space-around;
}

[flex-layout^="end"] {
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

/* flex-Layout cross axis*/
[flex-layout$="start"] {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
[flex-layout$="start"]:not([flex-content]) {
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}

[flex-layout$="center"] {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[flex-layout$="center"]:not([flex-content]) {
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}

[flex-layout$="stretch"] {
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

[flex-layout$="baseline"] {
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
[flex-layout$="baseline"]:not([flex-content]) {
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}

[flex-layout$="end"] {
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
[flex-layout$="end"]:not([flex-content]) {
  -webkit-align-content: flex-end;
      -ms-flex-line-pack: end;
          align-content: flex-end;
}

/* flex-Layout content*/
[flex-content="start"] {
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}

[flex-content="center"] {
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}

[flex-content="space"],
[flex-content="space-between"] {
  -webkit-align-content: space-between;
      -ms-flex-line-pack: justify;
          align-content: space-between;
}

[flex-content="space-around"] {
  -webkit-align-content: space-around;
      -ms-flex-line-pack: distribute;
          align-content: space-around;
}

[flex-content="end"] {
  -webkit-align-content: flex-end;
      -ms-flex-line-pack: end;
          align-content: flex-end;
}