/* ----------------------------------------- */
/*  Flexbox                                  */
/* ----------------------------------------- */

.flexrow {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;

  > * {
    flex: 1;
  }

  .flex1 { flex: 1; }
  .flex2 { flex: 2; }
  .flex3 { flex: 3; }
  .flex4 { flex: 4; }
  .flex5 { flex: 5; }
  .flex6 { flex: 6; }
  .flex7 { flex: 7; }
  .flex8 { flex: 8; }
  .flex9 { flex: 9; }
}

.flexcol {
  display: flex;
  flex-flow: column nowrap;
  //flex-direction: column;
  //flex-wrap: nowrap;

  > * {
    flex: 1;
  }

  .flex1 { flex: 1; }
  .flex2 { flex: 2; }
  .flex3 { flex: 3; }
  .flex4 { flex: 4; }
}

.flex-group-center,
.flex-group-left,
.flex-group-right {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5px;
  //border: 1px solid #999;
}

.flex-group-left {
  justify-content: flex-start;
  text-align: left;
}

.flex-group-right {
  justify-content: flex-end;
  text-align: right;
}

.center {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.right {
  justify-content: flex-end;
  text-align: right;
  display: flex;
  align-items: center;
}

.flex-center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.flex-between {
  justify-content: space-between;
}

.no-wrap {
  flex-wrap: nowrap !important;
}