:root {
  font-family: Roboto, 'Helvetica Neue', Helvetica, Tahoma, Arial, 'PingFang SC', 'Microsoft YaHei';
}

.demo-title {
  background: #eee;
  padding: 20rpx;
  font-size: 36rpx;
  text-transform: capitalize;
}

.demo-sub-title {
  padding: 20rpx;
  font-size: 32rpx;
  text-transform: capitalize;
}
.demo-sub-title--inverse {
  color: var(--color-white);
}

.demo-content {
  padding: 20rpx;
  background: #fff;
}

.demo-content--fullwidth {
  padding-left: 0;
  padding-right: 0;
}

.demo-content--normal,
.demo-content--primary,
.demo-content--warning {
  background: var(--color-white);
}
.demo-content--inverse {
  padding: 20rpx;
  background-color: var(--color-black);
}

/* 样式一：一行一个 */
.demo-item-line {
  display: flex;
  flex-direction: row;
  padding: 10rpx 0;
}
.demo-item-line .demo-item-name {
  font-size: 30rpx;
  min-width: 20%;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  color: var(--color-text1-3);
}

.demo-item-line .demo-item-content {
  padding-left: 20rpx;
  justify-content: center;
  flex: 1;
}

.demo-item-line .demo-item-content-flex {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.demo-item-line .demo-item-content-flex > .rax-view {
  margin-right: 50px;
}

.demo-item-line .demo-item-content-search {
  /* max-width: 375px; */
  /* width: 275px; */
  width: 80%;
}

/* 样式二：一行几个，标题在下方 */
.demo-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.demo-items .demo-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  text-align: center;
}
.demo-items .demo-item .demo-item-name {
  margin-top: 20rpx;
}

.demo-flex-box {
  display: flex;
  flex-direction: column;
}

.demo-flex-item {
  flex: 1;
}