/*
  布局辅助类
 */

@import './function/px_function.scss';

/* 背景图片 */
.M-image-background {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.M-display-none {
  display: none;
}

.M-flexbox-vertical {
  flex-direction: column;
}
.M-flexbox-horizontal {
  flex-direction: row;
}
.M-flexbox-between {
  justify-content: space-between;
}
.M-flebox-around {
  justify-content: space-around;
}
.M-flex-flow-row-wrap {
  flex-direction: row;
  flex-wrap: wrap;
}
.M-flex-row-wrap {
  flex-direction: row;
  flex-wrap: wrap;
}
.M-flex-flow-row-nowrap {
  flex-direction: row;
  flex-wrap: nowrap;
}
.M-flex-row-nowrap {
  flex-direction: row;
  flex-wrap: nowrap;
}
.M-flex-item {
  flex: 1;
}
.M-horizontal-left {
  flex-direction: row;
  justify-content: flex-start;
}
.M-horizontal-right {
  flex-direction: row;
  justify-content: flex-end;
}
.M-horizontal-center {
  flex-direction: row;
  justify-content: center;
}
.M-vertical-top {
  flex-direction: row;
  align-items: flex-start;
}
.M-vertical-bottom {
  flex-direction: row;
  align-items: flex-end;
}
.M-vertical-middle {
  flex-direction: row;
  align-items: center;
}
.M-center-all {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* 文本对齐 */
.M-text-align-center {
  text-align: center;
}
.M-text-align-left {
  text-align: left;
}
.M-text-align-right {
  text-align: right;
}

/*常用边线*/
.M-outline-none {
  outline-width: 0;
}
.M-border-none {
  border-width: 0;
  outline-width: 0;
}

/*垂直方向*/
.M-bd-v-white {
  border-top: px(1) solid white;
  border-bottom: px(1) solid white;
}
.M-bd-v:after,
.M-bd-b-m-10:after {
  border-top: px(1) solid #e6e6e6;
  border-bottom: px(1) solid #e6e6e6;
}
.M-bd-t-white {
  border-top: px(1) solid white;
}
.M-bd-t:after,
.M-bd-t-m-l-10:after,
.M-bd-t-m-r-10:after,
.M-bd-t-m-b-10:after {
  border-top: px(1) solid #e6e6e6;
}
.M-bd-b-white {
  border-bottom: px(1) solid white;
}
.M-bd-b:after,
.M-bd-b-m-l-10:after,
.M-bd-b-m-r-10:after,
.M-bd-b-m-b-10:after {
  border-bottom: px(1) solid #e6e6e6;
}
.M-bd-b-m-10:after {
  margin-left: px(20);
  margin-right: px(20);
}
.M-bd-t-m-b-10:after {
  margin-left: px(20);
  margin-right: px(20);
}
.M-bd-t-m-l-10:after {
  margin-left: px(20);
}
.M-bd-t-m-r-10:after {
  margin-right: px(20);
}
.M-bd-b-m-b-10:after {
  margin-left: px(20);
  margin-right: px(20);
}
.M-bd-b-m-l-10:after {
  margin-left: px(20);
}
.M-bd-b-m-r-10:after {
  margin-right: px(20);
}
/*水平方向*/
.M-bd-h-white {
  border-left: px(1) solid white;
  border-right: px(1) solid white;
}
.M-bd-h:after,
.M-bd-h-m-10:after {
  border-left: px(1) solid #e6e6e6;
  border-right: px(1) solid #e6e6e6;
}
.M-bd-l-white {
  border-left: px(1) solid white;
}
.M-bd-l:after,
.M-bd-l-m-t-10:after,
.M-bd-l-m-n-10:after,
.M-bd-l-m-b-10:after {
  border-left: 1px solid #e6e6e6;
}
.M-bd-r-white {
  border-right: px(1) solid white;
}
.M-bd-r:after,
.M-bd-r-m-t-10:after,
.M-bd-r-m-b-10:after,
.M-bd-r-m-b-10:after {
  border-right: 1px solid #e6e6e6;
}
.M-bd-h-m-10:after {
  margin-top: px(20);
  margin-bottom: px(20);
}
.M-bd-l-m-b-10:after {
  margin-top: px(20);
  margin-bottom: px(20);
}
.M-bd-l-m-t-10:after {
  margin-top: px(20);
}
.M-bd-l-m-n-10:after {
  margin-bottom: px(20);
}
.M-bd-r-m-b-10:after {
  margin-top: px(20);
  margin-bottom: px(20);
}
.M-bd-r-m-t-10:after {
  margin-top: px(20);
}
.M-bd-r-m-b-10:after {
  margin-bottom: px(20);
}

/* 常用圆角 */
.M-r-10 {
  border-radius: px(20);
}
.M-r-15 {
  border-radius: px(30);
}

/* 常用高度 */
.M-height-p-100 {
  height: 100%;
}
.M-height-30 {
  height: px(60);
}
.M-height-35 {
  height: px(70);
}
.M-height-40 {
  height: px(80);
}
.M-height-44 {
  height: px(88);
}
.M-height-50 {
  height: px(100);
}
.M-height-55 {
  height: px(110);
}
.M-height-60 {
  height: px(120);
}
.M-height-70 {
  height: px(140);
}
.M-height-80 {
  height: px(160);
}
.M-w-0 {
  width: 0;
}
/* 常用宽度 */
.M-width-p-100 {
  width: 100%;
}

/* 常用边距 */

.M-p-h-10 {
  padding: 0px px(20);
}
.M-p-v-10 {
  padding: px(20) 0px;
}
.M-p-t-10 {
  padding-top: px(20);
}
.M-p-b-10 {
  padding-bottom: px(20);
}
.M-p-l-10 {
  padding-left: px(20);
}
.M-p-r-10 {
  padding-right: px(20);
}

.M-f-s-0 {
  font-size: 0;
}
.M-f-s-8 {
  font-size: px(16);
}
.M-f-s-10 {
  font-size: px(20);
}
.M-f-s-11 {
  font-size: px(22);
}
.M-f-s-12 {
  font-size: px(24);
}
.M-f-s-13 {
  font-size: px(26);
}
.M-f-s-14 {
  font-size: px(28);
}
.M-f-s-15 {
  font-size: px(30);
}
.M-f-s-16 {
  font-size: px(32);
}
.M-f-s-18 {
  font-size: px(36);
}
.M-f-s-20 {
  font-size: px(40);
}
.M-f-s-22 {
  font-size: px(44);
}
.M-f-s-24 {
  font-size: px(48);
}
.M-f-s-26 {
  font-size: px(52);
}
.M-f-s-28 {
  font-size: px(56);
}
.M-f-s-30 {
  font-size: px(60);
}

.M-f-w-b {
  font-weight: bold;
}

/* 扁平化主题字体颜色 */
.M-f-c-0 {
  color: #000;
}
.M-f-c-w {
  color: #ffffff;
}
.M-f-c-1 {
  color: #4883ff;
}
.M-f-c-2 {
  color: #ff7f8a;
}
.M-f-c-3 {
  color: #3c4146;
}
.M-f-c-4 {
  color: #ffa977;
}
.M-f-c-5 {
  color: #4db7ad;
}
.M-f-c-6 {
  color: #337ab7;
}
.M-f-c-7 {
  color: #d9534f;
}
.M-f-c-8 {
  color: #f0ad4e;
}
.M-f-c-9 {
  color: #5cb85c;
}
.M-f-c-333 {
  color: #333;
}
.M-f-c-666 {
  color: #666;
}
.M-f-c-999 {
  color: #999;
}
.M-f-c-fff {
  color: #fff;
}
// .M-f-c-red { color: red; }
.M-f-c-green {
  color: green;
}
.M-f-c-yellow {
  color: #ffa940;
}
.M-f-c-red {
  color: #fa541c;
}
.M-f-c-h {
  color: #747474;
}
/* 扁平化主题字背景颜色 */
.M-b-c-w {
  background-color: white;
}
.M-b-c-e {
  background-color: #eee;
}
.M-b-c-c {
  background-color: #ccc;
}
.M-b-c-1 {
  background-color: #4883ff;
}
.M-b-c-2 {
  background-color: #ff7f8a;
}
.M-b-c-3 {
  background-color: #3c4146;
}
.M-b-c-4 {
  background-color: #ffa977;
}
.M-b-c-5 {
  background-color: #4db7ad;
}
.M-b-c-6 {
  background-color: #337ab7;
}
.M-b-c-7 {
  background-color: #d9534f;
}
.M-b-c-8 {
  background-color: #f0ad4e;
}
.M-b-c-9 {
  background-color: #5cb85c;
}
.M-b-c-b {
  background-color: #1a1a1a;
}

/*常用边距*/
.M-p-0 {
  padding: 0;
}
.M-p-2 {
  padding: px(4);
}
.M-p-3 {
  padding: px(6);
}
.M-p-5 {
  padding: px(10);
}
.M-p-8 {
  padding: px(16);
}
.M-p-10 {
  padding: px(20);
}
.M-p-12 {
  padding: px(24);
}
.M-p-15 {
  padding: px(30);
}
.M-p-20 {
  padding: px(40);
}
.M-p-25 {
  padding: px(50);
}
.M-m-0 {
  margin: 0;
}
.M-m-h-auto {
  margin-left: auto;
  margin-right: auto;
}
.M-m-2 {
  margin: px(4);
}
.M-m-3 {
  margin: px(6);
}
.M-m-5 {
  margin: px(10);
}
.M-m-8 {
  margin: px(16);
}
.M-m-10 {
  margin: px(20);
}
.M-m-12 {
  margin: px(24);
}
.M-m-15 {
  margin: px(30);
}
.M-m-20 {
  margin: px(40);
}
.M-m-25 {
  margin: px(50);
}

/*垂直方向*/
.M-p-v-b-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.M-p-t-0 {
  padding-top: 0;
}
.M-p-b-0 {
  padding-bottom: 0;
}
.M-p-v-b-2 {
  padding-top: px(4);
  padding-bottom: px(4);
}
.M-p-t-2 {
  padding-top: px(4);
}
.M-p-b-2 {
  padding-bottom: px(4);
}
.M-p-v-b-3 {
  padding-top: px(6);
  padding-bottom: px(6);
}
.M-p-t-3 {
  padding-top: px(6);
}
.M-p-b-3 {
  padding-bottom: px(6);
}
.M-p-v-b-5 {
  padding-top: px(10);
  padding-bottom: px(10);
}
.M-p-t-5 {
  padding-top: px(10);
}
.M-p-b-5 {
  padding-bottom: px(10);
}
.M-p-v-b-8 {
  padding-top: px(16);
  padding-bottom: px(16);
}
.M-p-t-8 {
  padding-top: px(16);
}
.M-p-b-8 {
  padding-bottom: px(16);
}
.M-p-v-b-10 {
  padding-top: px(20);
  padding-bottom: px(20);
}
.M-p-t-10 {
  padding-top: px(20);
}
.M-p-b-10 {
  padding-bottom: px(20);
}
.M-p-v-b-12 {
  padding-top: px(24);
  padding-bottom: px(24);
}
.M-p-t-12 {
  padding-top: px(24);
}
.M-p-b-12 {
  padding-bottom: px(24);
}
.M-p-v-b-15 {
  padding-top: px(30);
  padding-bottom: px(30);
}
.M-p-t-15 {
  padding-top: px(30);
}
.M-p-b-15 {
  padding-bottom: px(30);
}
.M-p-v-b-20 {
  padding-top: px(40);
  padding-bottom: px(40);
}
.M-p-t-20 {
  padding-top: px(40);
}
.M-p-b-20 {
  padding-bottom: px(40);
}
.M-p-v-b-25 {
  padding-top: px(50);
  padding-bottom: px(50);
}
.M-p-t-25 {
  padding-top: px(50);
}
.M-p-b-25 {
  padding-bottom: px(50);
}
.M-m-v-b-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.M-m-t-0 {
  margin-top: 0;
}
.M-m-b-0 {
  margin-bottom: 0;
}
.M-m-v-b-2 {
  margin-top: px(4);
  margin-bottom: px(4);
}
.M-m-t-2 {
  margin-top: px(4);
}
.M-m-b-2 {
  margin-bottom: px(4);
}
.M-m-v-b-3 {
  margin-top: px(6);
  margin-bottom: px(6);
}
.M-m-t-3 {
  margin-top: px(6);
}
.M-m-b-3 {
  margin-bottom: px(6);
}
.M-m-v-b-5 {
  margin-top: px(10);
  margin-bottom: px(10);
}
.M-m-t-5 {
  margin-top: px(10);
}
.M-m-b-5 {
  margin-bottom: px(10);
}
.M-m-v-b-8 {
  margin-top: px(16);
  margin-bottom: px(16);
}
.M-m-t-8 {
  margin-top: px(16);
}
.M-m-b-8 {
  margin-bottom: px(16);
}
.M-m-v-b-10 {
  margin-top: px(20);
  margin-bottom: px(20);
}
.M-m-t-10 {
  margin-top: px(20);
}
.M-m-b-10 {
  margin-bottom: px(20);
}
.M-m-v-b-12 {
  margin-top: px(24);
  margin-bottom: px(24);
}
.M-m-t-12 {
  margin-top: px(24);
}
.M-m-b-12 {
  margin-bottom: px(24);
}
.M-m-v-b-15 {
  margin-top: px(30);
  margin-bottom: px(30);
}
.M-m-t-15 {
  margin-top: px(30);
}
.M-m-b-15 {
  margin-bottom: px(30);
}
.M-m-v-b-20 {
  margin-top: px(40);
  margin-bottom: px(40);
}
.M-m-t-20 {
  margin-top: px(40);
}
.M-m-b-20 {
  margin-bottom: px(40);
}
.M-m-v-b-25 {
  margin-top: px(50);
  margin-bottom: px(50);
}
.M-m-t-25 {
  margin-top: px(50);
}
.M-m-b-25 {
  margin-bottom: px(50);
}
/*水平方向*/
.M-p-h-b-0 {
  padding-left: 0;
  padding-right: 0;
}
.M-p-l-0 {
  padding-left: 0;
}
.M-p-r-0 {
  padding-right: 0;
}
.M-p-h-b-2 {
  padding-left: px(4);
  padding-right: px(4);
}
.M-p-l-2 {
  padding-left: px(4);
}
.M-p-r-2 {
  padding-right: px(4);
}
.M-p-h-b-3 {
  padding-left: px(6);
  padding-right: px(6);
}
.M-p-l-3 {
  padding-left: px(6);
}
.M-p-r-3 {
  padding-right: px(6);
}
.M-p-h-b-5 {
  padding-left: px(10);
  padding-right: px(10);
}
.M-p-l-5 {
  padding-left: px(10);
}
.M-p-r-5 {
  padding-right: px(10);
}
.M-p-h-b-8 {
  padding-left: px(16);
  padding-right: px(16);
}
.M-p-l-8 {
  padding-left: px(16);
}
.M-p-r-8 {
  padding-right: px(16);
}
.M-p-h-b-10 {
  padding-left: px(20);
  padding-right: px(20);
}
.M-p-l-10 {
  padding-left: px(20);
}
.M-p-r-10 {
  padding-right: px(20);
}
.M-p-h-b-12 {
  padding-left: px(24);
  padding-right: px(24);
}
.M-p-l-12 {
  padding-left: px(24);
}
.M-p-r-12 {
  padding-right: px(24);
}
.M-p-h-b-15 {
  padding-left: px(30);
  padding-right: px(30);
}
.M-p-l-15 {
  padding-left: px(30);
}
.M-p-r-15 {
  padding-right: px(30);
}
.M-p-h-b-20 {
  padding-left: px(40);
  padding-right: px(40);
}
.M-p-l-20 {
  padding-left: px(40);
}
.M-p-r-20 {
  padding-right: px(40);
}
.M-p-h-b-25 {
  padding-left: px(50);
  padding-right: px(50);
}
.M-p-l-25 {
  padding-left: px(50);
}
.M-p-r-25 {
  padding-right: px(50);
}
.M-m-h-b-0 {
  margin-left: 0;
  margin-right: 0;
}
.M-m-l-0 {
  margin-left: 0;
}
.M-m-r-0 {
  margin-right: 0;
}
.M-m-h-b-3 {
  margin-left: px(6);
  margin-right: px(6);
}
.M-m-l-3 {
  margin-left: px(6);
}
.M-m-r-3 {
  margin-right: px(6);
}
.M-m-h-b-2 {
  margin-left: px(4);
  margin-right: px(4);
}
.M-m-l-2 {
  margin-left: px(4);
}
.M-m-r-2 {
  margin-right: px(4);
}
.M-m-h-b-5 {
  margin-left: px(10);
  margin-right: px(10);
}
.M-m-l-5 {
  margin-left: px(10);
}
.M-m-r-5 {
  margin-right: px(10);
}
.M-m-h-b-8 {
  margin-left: px(16);
  margin-right: px(16);
}
.M-m-l-8 {
  margin-left: px(16);
}
.M-m-r-8 {
  margin-right: px(16);
}
.M-m-h-b-10 {
  margin-left: px(20);
  margin-right: px(20);
}
.M-m-l-10 {
  margin-left: px(20);
}
.M-m-r-10 {
  margin-right: px(20);
}
.M-m-h-b-12 {
  margin-left: px(24);
  margin-right: px(24);
}
.M-m-l-12 {
  margin-left: px(24);
}
.M-m-r-12 {
  margin-right: px(24);
}
.M-m-h-b-15 {
  margin-left: px(30);
  margin-right: px(30);
}
.M-m-l-15 {
  margin-left: px(30);
}
.M-m-r-15 {
  margin-right: px(30);
}
.M-m-h-b-20 {
  margin-left: px(40);
  margin-right: px(40);
}
.M-m-l-20 {
  margin-left: px(40);
}
.M-m-r-20 {
  margin-right: px(40);
}
.M-m-h-b-25 {
  margin-left: px(50);
  margin-right: px(50);
}
.M-m-l-25 {
  margin-left: px(50);
}
.M-m-r-25 {
  margin-right: px(50);
}

.M-overflow-hidden {
  overflow: hidden;
}

// 行高
.M-line-height-1 {
  line-height: 1;
}
.M-line-height-13 {
  line-height: 1.3;
}
.M-line-height-15 {
  line-height: 1.5;
}
.M-line-height-20 {
  line-height: 2;
}

/* 阴影 */
.M-boxshadow-1 {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.M-boxshadow-2 {
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
}
.M-boxshadow-3 {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}
.M-boxshadow-4 {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}
.M-boxshadow-5 {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}