.xx_flex {
  display: flex;
  flex-wrap: wrap;
}
.xx_flex_middle {
  align-items: center;
}
.xx_flex_bottom {
  align-items: end;
}
.xx_flex_center {
  justify-content: center;
}
.xx_flex_column {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.xx_flex_to_bottom {
  margin-top: auto;
}
.xx_width_auto {
  width: auto;
}
.xx_width_expand,
.xx_width_expand_pad {
  flex: 1;
}
.xx_width_expand_pad {
  padding: 0 8px;
}
.xx_width_1_2 {
  width: calc(100% / 2);
}
.xx_width_1_3 {
  width: calc(100% / 3);
}
.xx_width_1_4 {
  width: calc(100% / 4);
}
.xx_width_1_5 {
  width: calc(100% / 5);
}
.xx_width_2_5 {
  width: calc((100% / 5) * 2);
}
.xx_width_3_5 {
  width: calc((100% / 5) * 3);
}


.xx_width_1_2_pad {
  width: calc((100% - 16px) / 2);
  padding: 0 8px;
  box-sizing: content-box;
}
.xx_width_1_3_pad {
  width: calc((100% - 32px) / 3);
  padding: 0 8px;
  box-sizing: content-box;
}
.xx_width_1_4_pad {
  width: calc((100% - 48px) / 4);
  padding: 0 8px;
  box-sizing: content-box;
}
.xx_width_1_5_pad {
  width: calc((100% - 32px) / 5);
  padding: 0 8px;
  box-sizing: content-box;
}
.xx_width_1_6_pad {
  width: calc((100% - 104px) / 6);
  padding: 0 8px;
  box-sizing: content-box;
}
.xx_width_3_5_pad {
  width: calc((100% - 32px) / 5 * 3);
  padding: 0 8px;
  box-sizing: content-box;
}
.xx_width_expand_pad:first-child,
.xx_width_1_2_pad:nth-of-type(odd),
.xx_width_1_3_pad:first-child,
.xx_width_1_4_pad:first-child,
.xx_width_1_5_pad:first-child,
.xx_width_3_5_pad:first-child {
  padding-left: 0;
}
.xx_width_expand_pad:last-child,
.xx_width_1_2_pad:nth-of-type(even),
.xx_width_1_3_pad:last-child,
.xx_width_1_4_pad:last-child,
.xx_width_1_5_pad:last-child {
  padding-right: 0;
}


.xx_height_100 {
  height: 100%;
  min-height: 100%;
}
.xx_height_100 .xx_height_100 {
  box-sizing: border-box;
}
.xx_min_width {
  min-width: 360px;
}