/*字号 从小到大*/
.font-size-1 {
    font-size: 12px;
    line-height: 20px;
}
.font-size-2 {
    font-size: 14px;
    line-height: 22px;
}
.font-size-3 {
    font-size: 16px;
    line-height: 24px;
}
.font-size-4 {
    font-size: 18px;
    line-height: 26px;
}
.font-size-5 {
    font-size: 20px;
    line-height: 30px;
}
.font-size-6 {
    font-size: 24px;
    line-height: 36px;
}
.font-size-7 {
    font-size: 36px;
    line-height: 44px;
}

/*字体加粗*/
.font-bold {
    font-weight: bold;
}

/*字体下划线*/
.text-under {
    text-decoration: underline;
}

/*段落对齐方式*/
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}

/*最多x行*/
.text-line-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-line-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.text-line-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/*悬浮*/
.float-left {
    float: left;
}
.float-right {
    float: right;
}

/*颜色 推荐3号字体颜色，10号背景颜色*/
:root {
    --colorGreen1: #033017;
    --colorGreen2: #044F2A;
    --colorGreen3: #056334;
    --colorGreen4: #067945;
    --colorGreen5: #078D5C;
    --colorGreen6: #00A870;
    --colorGreen7: #48C79C;
    --colorGreen8: #85DBBE;
    --colorGreen9: #BCEBDC;
    --colorGreen10: #E8F8F2;
    --colorBlue1: #092E5B;
    --colorBlue2: #124C91;
    --colorBlue3: #16629a;
    --colorBlue4: #2F79D0;
    --colorBlue5: #3A8AEA;
    --colorBlue6: #67ACFF;
    --colorBlue7: #99C7FF;
    --colorBlue8: #C1DDFF;
    --colorBlue9: #D7E9FF;
    --colorBlue10: #EEF6FF;
    --colorRed1: #680506;
    --colorRed2: #951114;
    --colorRed3: #B11F26;
    --colorRed4: #C9353F;
    --colorRed5: #E34D59;
    --colorRed6: #F36D78;
    --colorRed7: #F78D94;
    --colorRed8: #F8B9BE;
    --colorRed9: #F9D7D9;
    --colorRed10: #FDECEE;
    --colorOrange1: #5A1907;
    --colorOrange2: #842B0B;
    --colorOrange3: #9E3610;
    --colorOrange4: #BA431B;
    --colorOrange5: #D35A21;
    --colorOrange6: #ED7B2F;
    --colorOrange7: #F2995F;
    --colorOrange8: #F7C797;
    --colorOrange9: #F9E0C7;
    --colorOrange10: #FEF3E6;
    --colorWhite: #FFFFFF;
    --colorBlack: #000000;
    --colorGrey1: #292929;
    --colorGrey2: #333333;
    --colorGrey3: #666666;
    --colorGrey4: #989898;
    --colorGrey5: #AAAAAA;
    --colorGrey6: #E7E7E7;
    --colorTrans: transparent;
}
:root {
    --themeColor: #16629a;
    --themeColorTrans: rgba(18, 79, 172, 0.1);
}
.color-success {
    color: var(--colorGreen3);
}
.color-warn {
    color: #FF9600;
}
.color-fail {
    color: var(--colorRed3);
}
.color-grey {
    color: var(--colorGrey3);
}
.color-red {
    color: #FF616E;
}

/*flex盒子*/
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.flex-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-evenly {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.flex-inline {
    display: inline-flex;
}
.flex-warp {
    flex-wrap: wrap;
}
.flex-column {
    flex-direction: column;
}
.flex-self {
    flex-shrink: 0;
}

/*水平分割线*/
.divider-solid {
    height: 1px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #E7E7E7;
}
.divider-dashed {
    height: 1px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px dashed rgba(40, 101, 174, 0.1);
}

/*必填星号*/
.x-red {
    color: red;
    position: relative;
    top: 3px;
    margin-right: 3px;
    user-select: none;
}
.x-white {
    color: white;
    position: relative;
    top: 3px;
    margin-right: 3px;
    user-select: none;
}
.x-trans {
    color: transparent;
    position: relative;
    top: 3px;
    margin-right: 3px;
    user-select: none;
}