/********样式工具包********/
/*说明:
1,常用的样式,比如padding,margin,任何项目都可以使用
2,需要在config.css中定义样式变量
3,基本和uni-app项目的公用样式相同命名，以保证不同项目抒写习惯一致
*/
 

/***************************变量样式****************************/
/* 主色调、行为颜色变量的样式 */
.color-primary {
    color: var(--color-primary); /*主色系*/
}

.color-secondary {
    color: var(--color-secondary); /*第2色系*/
}

.color-dark {
    color: var(--color-dark); /*黑色*/
}

.color-red {
    color: var(--color-red)!important; /*红色，用于价格等明确要红色的地方*/
}

.color-grey {
    color: var(--color-grey); /*灰色*/
} 
.color-warn {
    color: var(--color-warn); /*警告*/
}
.color-error {
    color: var(--color-error); /*错误*/
}
.color-fff {
    color: #FFFFFF !important; /*白色*/
}
/**************************字体大小 *********************************/
.font-sm {
    font-size: 10px !important;
}

.font-base {
    font-size: 12px !important;
}

.font-md {
    font-size: 14px !important; /*中号*/
}

.font-lg {
    font-size: 16px !important; /*大号*/
}

.font-hg {
    font-size: 20px !important; /*特大号*/
}

.font-bold {
    font-weight: bold !important;
}

/*************************背景颜色*****************************/
.bg-color-primary {
    background-color: var(--color-primary); /*主色背景*/
}

.bg-white {
    background-color: #ffffff; /* 白色背景 */
}

/***************************常用样式****************************/
/*文字左右居中*/
.ta-c {
    text-align: center !important;
}

.ta-l {
    text-align: left !important;
}

.ta-r {
    text-align: right !important;
}
/*文字缩进*/
.text-indent {
    text-indent:2em;/*相对上级用em*/
}
/* Border */
.b-0 {
    border: 0 !important;
}
.bt-0 {
    border-top-width: 0 !important;
}

.br-0 {
    border-right-width: 0 !important;
}

.bb-0 {
    border-bottom-width: 0 !important;
}

.bl-0 {
    border-left-width: 0 !important;
}

.bt-1 {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--color-border);
    box-sizing: border-box;
}

.br-1 {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: var(--color-border);
    box-sizing: border-box;
}

.bb-1 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-border);
    box-sizing: border-box;
}

.bl-1 {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: var(--color-border);
    box-sizing: border-box;
}

.radius-0 {
    border-radius: 0px !important;
}

.radius-5 {
    border-radius: 5px;
}

.radius-10 {
    border-radius: 10px;
}

.radius-15 {
    border-radius: 15px;
}

.radius-round {
    border-radius: 100%;
}
/* 行高 */
.lh-0 {
    line-height: 0 !important;
}

.lh-1 {
    line-height: 1 !important;
}
.lh-2 {
    line-height: 2 !important;/*公告内容*/
}
.lh-sm {
    line-height: 1.2 !important;
}

.lh-md {
    line-height: 1.5 !important;
}
/*字据*/
.ls-1 {
    letter-spacing: 1px !important;
}
.ls-2 {
    letter-spacing: 2px !important;
}
/* margin */
.m-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.m-2 {
    margin-left: 2px!important;
    margin-right: 2px!important;
    margin-top: 2px!important;
    margin-bottom: 2px!important;
}
/*比如共2件商品的数字上*/
.m-5 {
    margin-left: 5px!important;
    margin-right: 5px!important;
    margin-top: 5px!important;
    margin-bottom: 5px!important;
}

.m-10 {
    margin-left: 10px!important;
    margin-right: 10px!important;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}

.m-15 {
    margin-left: 15px!important;
    margin-right: 15px!important;
    margin-top: 15px!important;
    margin-bottom: 15px!important;
}

.m-20 {
    margin-left: 20px!important;
    margin-right: 20px!important;
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}

.m-30 {
    margin-left: 30px!important;
    margin-right: 30px!important;
    margin-top: 30px!important;
    margin-bottom: 30px;
}

.m-40 {
    margin-left: 40px!important;
    margin-right: 40px!important;
    margin-top: 40px!important;
    margin-bottom: 40px;
}

.m-50 {
    margin-left: 50px!important;
    margin-right: 50px!important;
    margin-top: 50px!important;
    margin-bottom: 50px;
}

.m-100 {
    margin-left: 10px!important;
    margin-right: 100px!important;
    margin-top: 100px!important;
    margin-bottom: 100px;
}

.mx-0 {
    margin-left: 0!important;
    margin-right: 0!important;
}

.mx-2 {
    margin-left: 2px!important;
    margin-right: 2px!important;
}

.mx-5 {
    margin-left: 5px!important;
    margin-right: 5px!important;
}

.mx-10 {
    margin-left: 10px!important;
    margin-right: 10px!important;
}

.mx-15 {
    margin-left: 15px!important;
    margin-right: 15px!important;
}

.mx-20 {
    margin-left: 20px!important;
    margin-right: 20px!important;
}

.mx-30 {
    margin-left: 30px!important;
    margin-right: 30px!important;
}

.mx-40 {
    margin-left: 40px!important;
    margin-right: 40px!important;
}

.mx-50 {
    margin-left: 50px!important;
    margin-right: 50px!important;
}

.mx-80 {
    margin-left: 80px!important;
    margin-right: 80px!important;
}

.mx-100 {
    margin-left: 10px!important;
    margin-right: 100px!important;
}

.my-0 {
    margin-top: 0!important;
    margin-bottom: 0!important;
}

.my-2 {
    margin-top: 2px!important;
    margin-bottom: 2px!important;
}

.my-5 {
    margin-top: 5px!important;
    margin-bottom: 5px!important;
}

.my-10 {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}

.my-15 {
    margin-top: 15px!important;
    margin-bottom: 15px!important;
}

.my-20 {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}

.my-30 {
    margin-top: 30px!important;
    margin-bottom: 30px;
}

.my-40 {
    margin-top: 40px!important;
    margin-bottom: 40px;
}

.my-50 {
    margin-top: 50px!important;
    margin-bottom: 50px;
}

.my-80 {
    margin-top: 80px!important;
    margin-bottom: 80px;
}

.my-100 {
    margin-top: 100px!important;
    margin-bottom: 100px;
}

.mt-0 {
    margin-top: 0!important;
}

.mt-2 {
    margin-top: 2px!important;
}

.mt-5 {
    margin-top: 5px!important;
}

.mt-auto {
    margin-top: auto;
}

.mt-10 {
    margin-top: 10px!important;
}

.mt-15 {
    margin-top: 15px!important;
}

.mt-20 {
    margin-top: 20px!important;
}

.mt-30 {
    margin-top: 30px!important;
}

.mt-40 {
    margin-top: 40px!important;
}

.mt-50 {
    margin-top: 50px!important;
}

.mt-80 {
    margin-top: 80px!important;
}

.mt-100 {
    margin-top: 100px!important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-2 {
    margin-bottom: 2px!important;
}

.mb-5 {
    margin-bottom: 5px!important;
}
/*flex布局时，某项加了mb-auto，就会把其他项推到底部，效果等同fx-jc-sb，比如用在商品格的副标题上*/
.mb-auto {
    margin-bottom: auto;
}

.mb-15 {
    margin-bottom: 15px!important;
}

.mb-10 {
    margin-bottom: 10px!important;
}

.mb-20 {
    margin-bottom: 20px!important;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mb-100 {
    margin-bottom: 100px;
}

.mb-120 {
    margin-bottom: 120px !important;
}

.ml-0 {
    margin-left: 0!important;
}

.ml-2 {
    margin-left: 2px!important;
}

.ml-5 {
    margin-left: 5px!important;
}

.ml-auto {
    margin-left: auto;
}

.ml-10 {
    margin-left: 10px!important;
}

.ml-15 {
    margin-left: 15px!important;
}

.ml-20 {
    margin-left: 20px!important;
}

.ml-30 {
    margin-left: 30px!important;
}

.ml-40 {
    margin-left: 40px!important;
}

.ml-50 {
    margin-left: 50px!important;
}

.ml-80 {
    margin-left: 80px!important;
}

.ml-100 {
    margin-left: 10px!important;
}

.mr-0 {
    margin-right: 0!important;
}

.mr-2 {
    margin-right: 2px!important;
}

.mr-5 {
    margin-right: 5px!important;
}

.mr-10 {
    margin-right: 10px!important;
}

.mr-15 {
    margin-right: 15px!important;
}

.mr-20 {
    margin-right: 20px!important;
}

.mr-30 {
    margin-right: 30px!important;
}

.mr-40 {
    margin-right: 40px!important;
}

.mr-50 {
    margin-right: 50px!important;
}

.mr-80 {
    margin-right: 80px!important;
}

.mr-100 {
    margin-right: 100px!important;
}

/*padding*/
.p-0 {
    padding-left: 0!important;
    padding-right: 0!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.p-5 {
    padding-left: 5px!important;
    padding-right: 5px!important;
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}

.p-10 {
    padding-left: 10px!important;
    padding-right: 10px!important;
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}

.p-15 {
    padding-left: 15px!important;
    padding-right: 15px!important;
    padding-top: 15px!important;
    padding-bottom: 15px!important;
}

.p-20 {
    padding-left: 20px!important;
    padding-right: 20px!important;
    padding-top: 20px!important;
    padding-bottom: 20px!important;
}

.p-25 {
    padding-left: 25px!important;
    padding-right: 25px!important;
    padding-top: 25px!important;
    padding-bottom: 25px!important;
}

.p-30 {
    padding-left: 30px!important;
    padding-right: 30px!important;
    padding-top: 30px!important;
    padding-bottom: 30px!important;
}

.p-40 {
    padding-left: 40px!important;
    padding-right: 40px!important;
    padding-top: 40px!important;
    padding-bottom: 40px!important;
}

.p-50 {
    padding-left: 50px!important;
    padding-right: 50px!important;
    padding-top: 50px!important;
    padding-bottom: 50px!important;
}

.p-80 {
    padding-left: 80px!important;
    padding-right: 80px!important;
    padding-top: 80px!important;
    padding-bottom: 80px!important;
}

.p-100 {
    padding-left: 10px!important;
    padding-right: 100px!important;
    padding-top: 100px!important;
    padding-bottom: 100px!important;
}

.p-120 {
    padding-left: 120px;
    padding-right: 120px!important;
    padding-top: 120px!important;
    padding-bottom: 120px!important;
}

.px-0 {
    padding-left: 0!important;
    padding-right: 0!important;
}

.px-5 {
    padding-left: 5px!important;
    padding-right: 5px!important;
}

.px-10 {
    padding-left: 10px!important;
    padding-right: 10px!important;
}

.px-15 {
    padding-left: 15px!important;
    padding-right: 15px!important;
}

.px-20 {
    padding-left: 20px!important;
    padding-right: 20px!important;
}

.px-25 {
    padding-left: 25px!important;
    padding-right: 25px!important;
}

.px-30 {
    padding-left: 30px!important;
    padding-right: 30px!important;
}

.px-40 {
    padding-left: 40px!important;
    padding-right: 40px!important;
}

.px-50 {
    padding-left: 50px!important;
    padding-right: 50px!important;
}

.px-80 {
    padding-left: 80px!important;
    padding-right: 80px!important;
}

.px-100 {
    padding-left: 10px!important;
    padding-right: 100px!important;
}

.px-120 {
    padding-left: 120px;
    padding-right: 120px!important;
}

.py-0 {
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.py-5 {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}

.py-10 {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}

.py-15 {
    padding-top: 15px!important;
    padding-bottom: 15px!important;
}

.py-20 {
    padding-top: 20px!important;
    padding-bottom: 20px!important;
}

.py-25 {
    padding-top: 25px!important;
    padding-bottom: 25px!important;
}

.py-30 {
    padding-top: 30px!important;
    padding-bottom: 30px!important;
}

.py-40 {
    padding-top: 40px!important;
    padding-bottom: 40px!important;
}

.py-50 {
    padding-top: 50px!important;
    padding-bottom: 50px!important;
}

.py-80 {
    padding-top: 80px!important;
    padding-bottom: 80px!important;
}

.py-100 {
    padding-top: 100px!important;
    padding-bottom: 100px!important;
}

.py-120 {
    padding-top: 120px!important;
    padding-bottom: 120px!important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-5 {
    padding-top: 5px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-25 {
    padding-top: 25px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.pt-50 {
    padding-top: 50px !important;
}

.pt-80 {
    padding-top: 80px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

.pt-120 {
    padding-top: 120px !important;
}

.pb-0 {
    padding-bottom: 0!important;
}

.pb-5 {
    padding-bottom: 5px!important;
}

.pb-10 {
    padding-bottom: 10px!important;
}

.pb-15 {
    padding-bottom: 15px!important;
}

.pb-20 {
    padding-bottom: 20px!important;
}

.pb-25 {
    padding-bottom: 25px!important;
}

.pb-30 {
    padding-bottom: 30px!important;
}

.pb-40 {
    padding-bottom: 40px!important;
}

.pb-50 {
    padding-bottom: 50px!important;
}

.pb-80 {
    padding-bottom: 80px!important;
}

.pb-100 {
    padding-bottom: 100px!important;
}

.pb-120 {
    padding-bottom: 100px!important;
}

.pl-0 {
    padding-left: 0!important;
}

.pl-5 {
    padding-left: 5px!important;
}

.pl-10 {
    padding-left: 10px!important;
}

.pl-15 {
    padding-left: 15px!important;
}

.pl-20 {
    padding-left: 20px!important;
}

.pl-25 {
    padding-left: 25px!important;
}

.pl-30 {
    padding-left: 30px!important;
}

.pl-40 {
    padding-left: 40px!important;
}

.pl-50 {
    padding-left: 50px!important;
}

.pl-80 {
    padding-left: 80px!important;
}

.pr-0 {
    padding-right: 0!important;
}

.pr-5 {
    padding-right: 5px!important;
}

.pr-10 {
    padding-right: 10px!important;
}

.pr-15 {
    padding-right: 15px!important;
}

.pr-20 {
    padding-right: 20px!important;
}

.pr-25 {
    padding-right: 25px!important;
}

.pr-30 {
    padding-right: 30px!important;
}

.pr-40 {
    padding-right: 40px!important;
}

.pr-50 {
    padding-right: 50px!important;
}

.pr-80 {
    padding-right: 80px!important;
}

/* 定位 */
.po-absolute {
    position: absolute;
}

.po-fixed {
    position: fixed;
}

.po-relative {
    position: relative;
}

.left-0 {
    left: 0;
}

.top-0 {
    top: 0;
}

.bottom-0 {
    bottom: 0;
}

.right-0 {
    right: 0;
}

/* display模式 */
.d-block {
    display: block;
}

.d-inblock {
    display: inline-block;
}
/* flex布局相关 */
.d-flex {
    display: flex;
}
/*保留默认不换行*/
.fx-row {
    display: flex !important;
    flex-direction: row;
    box-sizing: border-box !important;
    align-items: center;
}
/*自动换行*/
.fx-row-wrap {
    display: flex !important;
    flex-direction: row;
    box-sizing: border-box !important;
    flex-wrap: wrap;
    align-items: center;
}

.fx-col {
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box !important;
}
/*其他view都有宽度，我flex-1的话，我就是剩余宽度，而且具备了宽度的属性，不会去挤别人了，或者掉到左边的图片下去另起一行*/
.fx-1 {
    flex: 1;
}

.fx-wrap {
    flex-wrap: wrap;
}

.fx-nowrap {
    flex-wrap: nowrap;
}
/*如果某一个元素的flex-shrink属性为 0，其他项目都为1，空间不足时，值为0的不缩小*/
.fx-shrink {
    flex-shrink: 0;
}

.fx-jc-start {
    justify-content: flex-start;
}

.fx-jc-center {
    justify-content: center;
}

.fx-jc-end {
    justify-content: flex-end;
}
/*前后无空白只有中间平方空白*/
.fx-jc-sb {
    justify-content: space-between;
}
/*前后和中间一起平方空白*/
.fx-jc-sa {
    justify-content: space-around;
}

.fx-ai-center {
    align-items: center;
}

.fx-ai-start {
    align-items: flex-start;
}

.fx-ai-end {
    align-items: flex-end;
}
/*侧轴默认值，拉伸满尺寸*/
.fx-ai-stretch {
    align-items: stretch;
}

.fx-as-center {
    align-self: center;
}

.fx-as-start {
    align-self: flex-start;
}

.fx-as-auto {
    align-self: auto;
}

.fx-as-end {
    align-self: flex-end;
}

.fx-as-stretch {
    align-self: stretch;
}

.fx-as-baseline {
    align-self: baseline;
}
/*老式布局暂时留着*/
.fl {
    float: left !important;
}

.fr {
    float: right !important;
}