.tags{
    background: #000;
    color: #fff;
    border-radius: 3px;
    padding: 2px 4px ;
    font-size: 12px;
    border:1px solid #000;
    display: inline-block;
    line-height: 1;
    cursor: default;

    &.wide{
        padding: 4px 8px ;
    }
    &.noBoder{
        border-color: transparent !important;
    }
    &.hui{
        background: #f5f5f5;
        border-color: hsl(0, 0%, 96%);
        color: #262626;
        &.plain{
            background: #f5f5f5;
            border-color: #d9d9d9; 
        }
        &.plain2{
            background: #fff;
            border-color: #d9d9d9; 
        }
        &.plain3{
            background: #fff;
            border-color: #d9d9d9; 
            border-style: dashed;
        }
    }

    &.hong{
        background: #ff4d50;
        border-color: #ff4d50;
        color: #fff;
    }
    &.hong2{
        background: #fff0f0;
        border-color: #fff0f0; 
        color: #f5212d;
        &.plain{
            border-color: #ffa19d; 
        }
    }

    
    &.lan{
        background: #1890ff;
        border-color: #1890ff;
        color: #fff;
        &.plain{
            background: #fff;
            border-color: #1890fe; 
            color: #1791ff;
        }
    }
    &.lan2{
        background: #e6f7ff;
        border-color: #e6f7ff;
        color: #1690fd;
        &.plain{
            border-color: #90d5ff; 
        }
        &.plain2{
            border-color: #1791fe; 
            color: #1791ff;
            background: #fff;
        }
    }
    
    &.lan3{
        background: #353688;
        border-color: #353688;
        color: #fff;
    }
    &.lan4{
        background: #f1f1f9;
        border-color: #f1f1f9;
        color: #373686;
        &.plain{
            border-color: #a4a4ca; 
        }
    }

    &.lan5{
        background: #155bd5;
        border-color: #155bd5;
        color: #fff;
    }
    &.lan6{
        background: #edf3ff;
        border-color: #edf3ff;
        color: #125cd5;
        &.plain{
            border-color: #94b4ed; 
        }
    }

    &.lv{
        background: #4fc519;
        border-color: #4fc519;
        color: #fff;
    }
    &.lv2{
        border-color: #f8ffed;
        background: #f8ffed;
        color: #51c51a;
        &.plain{
            border-color: #b9ea8f; 
        }
    }

    &.huang{
        background: #fbad15;
        border-color: #fbad15;
        color: #fff;
    }
    &.huang2{
        background: #fefbe8;
        border-color: #fefbe8; 
        color: #ffa83f;
        &.plain{
            border-color: #ffe58e; 
        }
    }

    &.cheng{
        background: #eb6a0c;
        border-color: #eb6a0c;
        color: #fff;
    }
    &.cheng2{
        background: #fff4f1;
        border-color: #fff4f1; 
        color: #ed6a0f;
        &.plain{
            border-color: #f8ba93; 
        }
    }

    &.zi{
        background: #893fd4;
        border-color: #893fd4;
        color: #fff;
    }
    &.zi2{
        background: #faeffd;
        border-color: #faeffd;
        color: #883ed3;
        &.plain{
            border-color: #c7a8ec; 
        }
    }

    &.fen{
        background: #d42a8d;
        border-color: #d42a8d;
        color: #fff;
    }

    &.fen2{
        background: #ffeefa;
        border-color: #ffeefa;
        color: #d5298b;
        &.plain{
            border-color: #ea9ecd; 
        }
    }

    




    &.myHover{
        cursor: pointer;
        &:hover{
            opacity: 0.8;
        }
    }
}