@charset "utf-8";
.yn-tree {
    overflow: hidden;
    transition: height .3s
}

.yn-tree .arrow {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: -4px;
    transition: transform .3s
}

.yn-tree .arrow:after {
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px;
    border-color: transparent
}

.yn-tree .arrow.arrow-right:after {
    top: 5px;
    left: 7px;
    border-left-color: #000
}

.yn-tree .checkbox>label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    min-height: 20px;
    padding-left: 20px
}

.yn-tree .checkbox>label input[type=checkbox] {
    position: absolute;
    margin: 4px 4px 0 -20px;
    display: block;
}

.yn-tree .yn-tree {
    margin-left: 25px
}

.yn-tree li {
    margin: 3px 0;
    overflow: hidden;
    transition: height .3s
}

.yn-tree-li>.yn-tree {
    height: 0
}

.yn-tree .yn-tree-li.spread>.yn-tree {
    height: auto
}

.yn-tree .spread>.checkbox>.arrow-right {
    transform: rotate(90deg)
}

.yn-tree .yn-tree-li.shrink>.yn-tree {
    height: 0
}

.yn-tree .shrink>.checkbox>.arrow-right {
    transform: rotate(0deg)
}