YLShipBuildLandMap/YLShipBuildLandMap.Web/wwwroot/app/js/template/modal_treeselect.html

<div class="{{className}} vue-treeselect vue-treeselect--multi vue-treeselect--searchable vue-treeselect--has-value vue-treeselect--open-below" ng-class="containerShow==1?'vue-treeselect--open':''">
    <div class="{{className}} vue-treeselect__control">
        <div class="{{className}} vue-treeselect__value-container">
            <div class="{{className}} vue-treeselect__multi-value">
                <div class="{{className}} vue-treeselect__multi-value-item-container" ng-repeat="item in selectList">
                    <div class="{{className}} vue-treeselect__multi-value-item">
                        <span class="{{className}} vue-treeselect__multi-value-label">{{item.name}}</span>
                        <span class="{{className}} vue-treeselect__icon vue-treeselect__value-remove" ng-click="remove(item)">
                            <svg viewBox="0 0 348.333 348.333">
                                <path d="M336.559 68.611L231.016 174.165l105.543 105.549c15.699 15.705 15.699 41.145 0 56.85-7.844 7.844-18.128 11.769-28.407 11.769-10.296 0-20.581-3.919-28.419-11.769L174.167 231.003 68.609 336.563c-7.843 7.844-18.128 11.769-28.416 11.769-10.285 0-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139 0-56.85l105.54-105.549L11.774 68.611c-15.699-15.699-15.699-41.145 0-56.844 15.696-15.687 41.127-15.687 56.829 0l105.563 105.554L279.721 11.767c15.705-15.687 41.139-15.687 56.832 0 15.705 15.699 15.705 41.145.006 56.844z"></path>
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="{{className}} vue-treeselect__placeholder vue-treeselect-helper-zoom-effect-off vue-treeselect-helper-hide" style="">Select...</div>
            </div>
        </div>
        <div class="{{className}} vue-treeselect__x-container" title="Clear all" ng-click="clear()">
            <svg viewBox="0 0 348.333 348.333" class="vue-treeselect__x">
                <path d="M336.559 68.611L231.016 174.165l105.543 105.549c15.699 15.705 15.699 41.145 0 56.85-7.844 7.844-18.128 11.769-28.407 11.769-10.296 0-20.581-3.919-28.419-11.769L174.167 231.003 68.609 336.563c-7.843 7.844-18.128 11.769-28.416 11.769-10.285 0-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139 0-56.85l105.54-105.549L11.774 68.611c-15.699-15.699-15.699-41.145 0-56.844 15.696-15.687 41.127-15.687 56.829 0l105.563 105.554L279.721 11.767c15.705-15.687 41.139-15.687 56.832 0 15.705 15.699 15.705 41.145.006 56.844z"></path>
            </svg>
        </div>
        <div class="{{className}} vue-treeselect__control-arrow-container" ng-click="showContainer()">
            <svg viewBox="0 0 292.362 292.362" class="vue-treeselect__control-arrow" ng-class="containerShow==1?'vue-treeselect__control-arrow--rotated':''">
                <path d="M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.998 0 77.279 0 82.228c0 4.948 1.807 9.229 5.424 12.847l127.907 127.907c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.229-5.427-12.85z"></path>
            </svg>
        </div>
    </div>
    <div class="{{className}} vue-treeselect__menu-container" style="z-index: 999;">
        <div class="{{className}} vue-treeselect__menu" style="max-height: 200px;" ng-show="containerShow==1">
            <div class="{{className}} vue-treeselect__list" ng-repeat="data in dataList" ng-include="'treeselect-nodes.html'">
            </div>
        </div>
        <script type="text/ng-template" id="treeselect-nodes.html">
            <div class="{{className}} vue-treeselect__list-item vue-treeselect__indent-level-{{data.level}}">
                <div class="{{className}} vue-treeselect__option">
                    <div class="{{className}} vue-treeselect__option-arrow-placeholder" ng-show="data.childrens.length==0">&nbsp;</div>
                    <div class="{{className}} vue-treeselect__option-arrow-container" ng-show="data.childrens.length>0" ng-click="showChildren(data)">
                        <svg viewBox="0 0 292.362 292.362" class="vue-treeselect__option-arrow">
                            <path d="M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.998 0 77.279 0 82.228c0 4.948 1.807 9.229 5.424 12.847l127.907 127.907c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.229-5.427-12.85z"></path>
                        </svg>
                    </div>
                    <div class="{{className}} vue-treeselect__label-container" ng-click="check(data)">
                        <div ng-if="!data.isDisabled" class="vue-treeselect__checkbox-container" ng-show="ismulti==true">
                            <span class="{{className}} vue-treeselect__checkbox" ng-class="data.checked==1?'vue-treeselect__checkbox--checked':'vue-treeselect__checkbox--unchecked'">
                                <span class="{{className}} vue-treeselect__check-mark"></span>
                                <span class="{{className}} vue-treeselect__minus-mark"></span>
                            </span>
                        </div>
                        <label class="{{className}} vue-treeselect__label">{{data.name}}</label>
                    </div>
                </div>
                <div ng-show="data.chlidShow==1" >
                    <div class="{{className}} vue-treeselect__list" ng-repeat="data in data.childrens" ng-include="'treeselect-nodes.html'"></div>
                </div>
            </div>

        </script>
    </div>
</div>
<style>
    .vue-treeselect-helper-hide {
        display: none
    }

    .vue-treeselect-helper-zoom-effect-off {
        -ms-transform: none !important;
        transform: none !important
    }

    @keyframes vue-treeselect-animation-fade-in {
        0% {
            opacity: 0
        }
    }

    @keyframes vue-treeselect-animation-bounce {
        0%,to {
            transform: scale(0)
        }

        50% {
            transform: scale(1)
        }
    }

    @keyframes vue-treeselect-animation-rotate {
        to {
            transform: rotate(1turn)
        }
    }

    .vue-treeselect__multi-value-item--transition-enter-active, .vue-treeselect__multi-value-item--transition-leave-active {
        transition-duration: .2s;
        transition-property: transform,opacity
    }

    .vue-treeselect__multi-value-item--transition-enter-active {
        transition-timing-function: cubic-bezier(.075,.82,.165,1)
    }

    .vue-treeselect__multi-value-item--transition-leave-active {
        transition-timing-function: cubic-bezier(.215,.61,.355,1);
        position: absolute
    }

    .vue-treeselect__multi-value-item--transition-enter, .vue-treeselect__multi-value-item--transition-leave-to {
        -ms-transform: scale(.7);
        transform: scale(.7);
        opacity: 0
    }

    .vue-treeselect__multi-value-item--transition-move {
        transition: transform .2s cubic-bezier(.165,.84,.44,1)
    }

    .vue-treeselect {
        position: relative;
        text-align: left
    }

    [dir=rtl] .vue-treeselect {
        text-align: right
    }

    .vue-treeselect div, .vue-treeselect span {
        box-sizing: border-box
    }

    .vue-treeselect svg {
        fill: currentColor
    }

    .vue-treeselect__control {
        /*padding-left: 5px;
        padding-right: 5px;*/
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 36px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background: #fff;
        transition-duration: .2s;
        transition-property: border-color,box-shadow,width,height,background-color,opacity;
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover {
        border-color: rgba(204, 204, 204, 0.35)
    }

    .vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control {
        border-color: #039be5;
        box-shadow: 0 0 0 3px rgba(3,155,229,.1)
    }

    .vue-treeselect--disabled .vue-treeselect__control {
        background-color: #f9f9f9
    }

    .vue-treeselect--open .vue-treeselect__control {
        border-color: rgba(204, 204, 204, 0.35)
    }

    .vue-treeselect--open.vue-treeselect--open-below .vue-treeselect__control {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .vue-treeselect--open.vue-treeselect--open-above .vue-treeselect__control {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }

    .vue-treeselect__multi-value, .vue-treeselect__value-container {
        width: 100%;
        vertical-align: middle
    }

    .vue-treeselect__value-container {
        display: table-cell;
        position: relative;
        padding-left: 5px;
        padding-right: 5px;
    }

    .vue-treeselect--searchable:not(.vue-treeselect--disabled) .vue-treeselect__value-container {
        cursor: text
    }

    .vue-treeselect__multi-value {
        display: inline-block
    }

    .vue-treeselect--has-value .vue-treeselect__multi-value {
        margin-bottom: 5px
    }

    .vue-treeselect__placeholder, .vue-treeselect__single-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 5px;
        padding-right: 5px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        line-height: 34px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: none
    }

    .vue-treeselect__placeholder {
        color: #bdbdbd
    }

    .vue-treeselect__single-value {
        color: #333
    }

    .vue-treeselect--focused.vue-treeselect--searchable .vue-treeselect__single-value {
        color: #bdbdbd
    }

    .vue-treeselect--disabled .vue-treeselect__single-value {
        position: static
    }

    .vue-treeselect__multi-value-item-container {
        display: inline-block;
        padding-top: 5px;
        padding-right: 5px;
        vertical-align: top
    }

    [dir=rtl] .vue-treeselect__multi-value-item-container {
        padding-right: 0;
        padding-left: 5px
    }

    .vue-treeselect__multi-value-item {
        display: inline-table;
        padding: 2px 0;
        border: 1px solid rgba(0,0,0,0);
        border-radius: 2px;
        font-size: 12px;
        vertical-align: top
    }

    .vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-disabled):hover .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-new) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-new):hover, .vue-treeselect__multi-value-item {
        cursor: pointer;
        background: #e3f2fd;
        color: #039be5
    }

        .vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-disabled {
            cursor: default;
            background: #f5f5f5;
            color: #757575
        }

    .vue-treeselect--disabled .vue-treeselect__multi-value-item {
        cursor: default;
        background: #fff;
        border-color: #e5e5e5;
        color: #555
    }

    .vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-new, .vue-treeselect__multi-value-item.vue-treeselect__multi-value-item-new:hover {
        background: #e8f5e9
    }

    .vue-treeselect__multi-value-label, .vue-treeselect__value-remove {
        display: table-cell;
        padding: 0 5px;
        vertical-align: middle
    }

    .vue-treeselect__value-remove {
        color: #039be5;
        padding-left: 5px;
        border-left: 1px solid #fff;
        line-height: 0
    }

    [dir=rtl] .vue-treeselect__value-remove {
        border-left: 0;
        border-right: 1px solid #fff
    }

    .vue-treeselect__multi-value-item:hover .vue-treeselect__value-remove {
        color: #e53935
    }

    .vue-treeselect--disabled .vue-treeselect__value-remove, .vue-treeselect__multi-value-item-disabled .vue-treeselect__value-remove {
        display: none
    }

    .vue-treeselect__value-remove > svg {
        width: 6px;
        height: 6px
    }

    .vue-treeselect__multi-value-label {
        padding-right: 5px;
        white-space: pre-line;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .vue-treeselect__limit-tip {
        display: inline-block;
        padding-top: 5px;
        padding-right: 5px;
        vertical-align: top
    }

    [dir=rtl] .vue-treeselect__limit-tip {
        padding-right: 0;
        padding-left: 5px
    }

    .vue-treeselect__limit-tip-text {
        cursor: default;
        display: block;
        margin: 2px 0;
        padding: 1px 0;
        color: #bdbdbd;
        font-size: 12px;
        font-weight: 600
    }

    .vue-treeselect__input-container {
        display: block;
        max-width: 100%;
        outline: none
    }

    .vue-treeselect--single .vue-treeselect__input-container {
        font-size: inherit;
        height: 100%
    }

    .vue-treeselect--multi .vue-treeselect__input-container {
        display: inline-block;
        font-size: 12px;
        vertical-align: top
    }

    .vue-treeselect--searchable .vue-treeselect__input-container {
        padding-left: 5px;
        padding-right: 5px
    }

    .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container {
        padding-top: 5px;
        padding-left: 0
    }

    [dir=rtl] .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container {
        padding-left: 5px;
        padding-right: 0
    }

    .vue-treeselect--disabled .vue-treeselect__input-container {
        display: none
    }

    .vue-treeselect__input, .vue-treeselect__sizer {
        margin: 0;
        line-height: inherit;
        font-family: inherit;
        font-size: inherit
    }

    .vue-treeselect__input {
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        outline: none;
        box-sizing: content-box;
        box-shadow: none;
        background: none rgba(0,0,0,0);
        line-height: 1;
        vertical-align: middle
    }

        .vue-treeselect__input::-ms-clear {
            display: none
        }

    .vue-treeselect--single .vue-treeselect__input {
        width: 100%;
        height: 100%
    }

    .vue-treeselect--multi .vue-treeselect__input {
        padding-top: 3px;
        padding-bottom: 3px
    }

    .vue-treeselect--has-value .vue-treeselect__input {
        line-height: inherit;
        vertical-align: top
    }

    .vue-treeselect__sizer {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        height: 0;
        overflow: scroll;
        white-space: pre
    }

    .vue-treeselect__x-container {
        display: table-cell;
        vertical-align: middle;
        width: 20px;
        text-align: center;
        line-height: 0;
        cursor: pointer;
        color: #ccc;
        animation: vue-treeselect-animation-fade-in .2s cubic-bezier(.075,.82,.165,1)
    }

        .vue-treeselect__x-container:hover {
            color: #e53935
        }

    .vue-treeselect__x {
        width: 8px;
        height: 8px
    }

    .vue-treeselect__control-arrow-container {
        display: table-cell;
        vertical-align: middle;
        width: 20px;
        text-align: center;
        line-height: 0;
        cursor: pointer
    }

    .vue-treeselect--disabled .vue-treeselect__control-arrow-container {
        cursor: default
    }

    .vue-treeselect__control-arrow {
        width: 9px;
        height: 9px;
        color: #ccc
    }

    .vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__control-arrow-container:hover .vue-treeselect__control-arrow {
        color: #616161
    }

    .vue-treeselect--disabled .vue-treeselect__control-arrow {
        opacity: .35
    }

    .vue-treeselect__control-arrow--rotated {
        -ms-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .vue-treeselect__menu-container {
        position: absolute;
        left: 0;
        width: 100%;
        overflow: visible;
        transition: 0s
    }

    .vue-treeselect--open-below:not(.vue-treeselect--append-to-body) .vue-treeselect__menu-container {
        top: 100%
    }

    .vue-treeselect--open-above:not(.vue-treeselect--append-to-body) .vue-treeselect__menu-container {
        bottom: 100%
    }

    .vue-treeselect__menu {
        cursor: default;
        padding-top: 5px;
        padding-bottom: 5px;
        display: block;
        position: absolute;
        overflow-x: hidden;
        overflow-y: auto;
        width: auto;
        border: 1px solid rgba(204, 204, 204, 0.35);
        background: #fff;
        line-height: 180%;
        -webkit-overflow-scrolling: touch
    }

    .vue-treeselect--open-below .vue-treeselect__menu {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        top: 0;
        margin-top: -1px;
        border-top-color: #f2f2f2;
        /*box-shadow: 0 1px 0 rgba(0,0,0,.06)*/
    }

    .vue-treeselect--open-above .vue-treeselect__menu {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        bottom: 0;
        margin-bottom: -1px;
        border-bottom-color: #f2f2f2
    }

    .vue-treeselect__indent-level-0 .vue-treeselect__option {
        padding-left: 5px
    }

    [dir=rtl] .vue-treeselect__indent-level-0 .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 5px
    }

    .vue-treeselect__indent-level-0 .vue-treeselect__tip {
        padding-left: 25px
    }

    [dir=rtl] .vue-treeselect__indent-level-0 .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 25px
    }

    .vue-treeselect__indent-level-1 .vue-treeselect__option {
        /*padding-left: 25px;*/
        margin-left:20px;
    }

    [dir=rtl] .vue-treeselect__indent-level-1 .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 25px
    }

    .vue-treeselect__indent-level-1 .vue-treeselect__tip {
        padding-left: 45px
    }

    [dir=rtl] .vue-treeselect__indent-level-1 .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 45px
    }

    .vue-treeselect__indent-level-2 .vue-treeselect__option {
        /*padding-left: 45px*/
        margin-left: 40px;
    }

    [dir=rtl] .vue-treeselect__indent-level-2 .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 45px
    }

    .vue-treeselect__indent-level-2 .vue-treeselect__tip {
        padding-left: 65px
    }

    [dir=rtl] .vue-treeselect__indent-level-2 .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 65px
    }

    .vue-treeselect__indent-level-3 .vue-treeselect__option {
        /*padding-left: 65px*/
        margin-left: 60px;
    }

    [dir=rtl] .vue-treeselect__indent-level-3 .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 65px
    }

    .vue-treeselect__indent-level-3 .vue-treeselect__tip {
        padding-left: 85px
    }

    [dir=rtl] .vue-treeselect__indent-level-3 .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 85px
    }

    .vue-treeselect__indent-level-4 .vue-treeselect__option {
        /*padding-left: 85px*/
        margin-left: 80px;
    }

    [dir=rtl] .vue-treeselect__indent-level-4 .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 85px
    }

    .vue-treeselect__indent-level-4 .vue-treeselect__tip {
        padding-left: 105px
    }

    [dir=rtl] .vue-treeselect__indent-level-4 .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 105px
    }

    .vue-treeselect__indent-level-5 .vue-treeselect__option {
        /*padding-left: 105px*/
        margin-left: 100px;
    }

    [dir=rtl] .vue-treeselect__indent-level-5 .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 105px
    }

    .vue-treeselect__indent-level-5 .vue-treeselect__tip {
        padding-left: 125px
    }

    [dir=rtl] .vue-treeselect__indent-level-5 .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 125px
    }

    .vue-treeselect__indent-level-6 .vue-treeselect__option {
        /*padding-left: 125px*/
        margin-left: 120px;
    }

    [dir=rtl] .vue-treeselect__indent-level-6 .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 125px
    }

    .vue-treeselect__indent-level-6 .vue-treeselect__tip {
        padding-left: 145px
    }

    [dir=rtl] .vue-treeselect__indent-level-6 .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 145px
    }

    .vue-treeselect__indent-level-7 .vue-treeselect__option {
        /*padding-left: 145px*/
        margin-left: 140px;
    }

    [dir=rtl] .vue-treeselect__indent-level-7 .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 145px
    }

    .vue-treeselect__indent-level-7 .vue-treeselect__tip {
        padding-left: 165px
    }

    [dir=rtl] .vue-treeselect__indent-level-7 .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 165px
    }

    .vue-treeselect__indent-level-8 .vue-treeselect__option {
        /*padding-left: 165px*/
        margin-left: 160px;
    }

    [dir=rtl] .vue-treeselect__indent-level-8 .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 165px
    }

    .vue-treeselect__indent-level-8 .vue-treeselect__tip {
        padding-left: 185px
    }

    [dir=rtl] .vue-treeselect__indent-level-8 .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 185px
    }

    .vue-treeselect__option {
        padding-left: 5px;
        padding-right: 5px;
        display: table;
        table-layout: fixed;
        width: 100%
    }

    .vue-treeselect__option--highlight {
        background: #f5f5f5
    }

    .vue-treeselect--single .vue-treeselect__option--selected {
        background: #e3f2fd;
        font-weight: 600
    }

        .vue-treeselect--single .vue-treeselect__option--selected:hover {
            background: #e3f2fd
        }

    .vue-treeselect__option--hide {
        display: none
    }

    .vue-treeselect__option-arrow-container, .vue-treeselect__option-arrow-placeholder {
        display: table-cell;
        vertical-align: middle;
        width: 20px;
        text-align: center;
        line-height: 0
    }

    .vue-treeselect__option-arrow-container {
        cursor: pointer
    }

    .vue-treeselect__option-arrow {
        display: inline-block;
        width: 9px;
        height: 9px;
        color: #ccc;
        vertical-align: middle;
        transition: transform .2s cubic-bezier(.19,1,.22,1);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg)
    }

    [dir=rtl] .vue-treeselect__option-arrow {
        -ms-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover .vue-treeselect__option-arrow, .vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow {
        color: #616161
    }

    .vue-treeselect__option-arrow--rotated, [dir=rtl] .vue-treeselect__option-arrow--rotated {
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

        .vue-treeselect__option-arrow--rotated.vue-treeselect__option-arrow--prepare-enter {
            -ms-transform: rotate(-90deg) !important;
            transform: rotate(-90deg) !important
        }

        [dir=rtl] .vue-treeselect__option-arrow--rotated.vue-treeselect__option-arrow--prepare-enter {
            -ms-transform: rotate(90deg) !important;
            transform: rotate(90deg) !important
        }

    .vue-treeselect__label-container {
        display: table-cell;
        vertical-align: middle;
        cursor: pointer;
        display: table;
        width: 100%;
        table-layout: fixed;
        color: inherit
    }

    .vue-treeselect__option--disabled .vue-treeselect__label-container {
        cursor: not-allowed;
        color: rgba(0,0,0,.25)
    }

    .vue-treeselect__checkbox-container {
        display: table-cell;
        width: 20px;
        min-width: 20px;
        height: 100%;
        text-align: center;
        vertical-align: middle
    }

    .vue-treeselect__checkbox {
        display: block;
        margin: auto;
        width: 12px;
        height: 12px;
        border-width: 1px;
        border-style: solid;
        border-radius: 2px;
        position: relative;
        transition: all .2s cubic-bezier(.075,.82,.165,1)
    }

    .vue-treeselect__check-mark, .vue-treeselect__minus-mark {
        display: block;
        position: absolute;
        left: 1px;
        top: 1px;
        background-repeat: no-repeat;
        opacity: 0;
        transition: all .2s ease
    }

    .vue-treeselect__minus-mark {
        width: 8px;
        height: 8px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAuLMp9oYAAAAPSURBVAjXY4CDrJUgBAMAGaECJ9dz3BAAAAAASUVORK5CYII=);
        background-size: 8px 8px
    }

    @media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
        .vue-treeselect__minus-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==)
        }
    }

    @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
        .vue-treeselect__minus-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==)
        }
    }

    @media (-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi) {
        .vue-treeselect__minus-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMAy2EFIuWxUgAAACRJREFUGNNjGBBgJOICBY7KDCoucODEAJSAS6FwUJShGjAQAADBPRGrK2/FhgAAAABJRU5ErkJggg==)
        }
    }

    .vue-treeselect__checkbox--indeterminate > .vue-treeselect__minus-mark {
        opacity: 1
    }

    .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAACVBMVEUAAADi4uLh4eHOxeSRAAAAAnRSTlMAuLMp9oYAAAAPSURBVAjXY4CDrJUgBAMAGaECJ9dz3BAAAAAASUVORK5CYII=)
    }

    @media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
        .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAADi4uLi4uLh4eE5RQaIAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==)
        }
    }

    @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
        .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAADi4uLi4uLh4eE5RQaIAAAAA3RSTlMAyTzPIdReAAAAGUlEQVQI12PAD+b///+Nof7//79gAsLFCwAx/w4blADeeQAAAABJRU5ErkJggg==)
        }
    }

    @media (-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi) {
        .vue-treeselect__checkbox--disabled .vue-treeselect__minus-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAD1BMVEUAAADh4eHg4ODNzc3h4eEYfw2wAAAABHRSTlMAy2EFIuWxUgAAACRJREFUGNNjGBBgJOICBY7KDCoucODEAJSAS6FwUJShGjAQAADBPRGrK2/FhgAAAABJRU5ErkJggg==)
        }
    }

    .vue-treeselect__check-mark {
        width: 8px;
        height: 8px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAQlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////8IX9KGAAAAFXRSTlMA8u24NxILB+Tawb6jiH1zRz0xIQIIP3GUAAAAMklEQVQI1y3FtQEAMQDDQD+EGbz/qkEVOpyEOP6PudKjZNSXn4Jm2CKRdBKzSLsFWl8fMG0Bl6Jk1rMAAAAASUVORK5CYII=);
        background-size: 8px 8px;
        -ms-transform: scaleY(.125);
        transform: scaleY(.125)
    }

    @media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
        .vue-treeselect__check-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAzu4sDenl38fBvo1OMyIdEQrj1cSihX5hYFpHNycIcQOASAAAAF9JREFUGNN9zEcOgDAMRFHTS0LvNfe/JRmHKAIJ/mqeLJn+k9uDtaeUeFnFziGsBucUTirrprfe81RqZ3Bb6hPWeuZwDFOHyf+ig9CCzQ7INBn7bG5kF+QSt13BHNJnF7AaCT4Y+CW7AAAAAElFTkSuQmCC)
        }
    }

    @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
        .vue-treeselect__check-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAzu4sDenl38fBvo1OMyIdEQrj1cSihX5hYFpHNycIcQOASAAAAF9JREFUGNN9zEcOgDAMRFHTS0LvNfe/JRmHKAIJ/mqeLJn+k9uDtaeUeFnFziGsBucUTirrprfe81RqZ3Bb6hPWeuZwDFOHyf+ig9CCzQ7INBn7bG5kF+QSt13BHNJnF7AaCT4Y+CW7AAAAAElFTkSuQmCC)
        }
    }

    @media (-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi) {
        .vue-treeselect__check-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////9ZMre9AAAAHXRSTlMA/PiJhGNI9XlEHJB/b2ldV08+Oibk49vPp6QhAYgGBuwAAACCSURBVCjPrdHdDoIwDAXgTWAqCigo/+f9X5OwnoUwtis4V92XNWladUl+rzQPeQJAN2EHxoOnsPn7/oYk8fxBv08Rr/deOH/aZ2Nm8ZJ+s573QGfWKnNuZGzWm3+lv2V3pcU1XQ385/yjmBoM3Z+dXvlbYLLD3ujhTaOM3KaIXvNkFkuSEvYy1LqOAAAAAElFTkSuQmCC)
        }
    }

    .vue-treeselect__checkbox--checked > .vue-treeselect__check-mark {
        opacity: 1;
        -ms-transform: scaleY(1);
        transform: scaleY(1)
    }

    .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAP1BMVEUAAADj4+Pf39/h4eHh4eHh4eHk5OTh4eHg4ODi4uLh4eHh4eHg4ODh4eHh4eHg4ODh4eHh4eHp6en////h4eFqcyvUAAAAFHRSTlMAOQfy7bgS5NrBvqOIfXNHMSELAgQ/iFsAAAA2SURBVAjXY4AANjYIzcjMAaVFuBkY+RkEWERYmRjYRXjANAOfiIgIFxNIAa8IpxBEi6AwiAQAK2MBd7xY8csAAAAASUVORK5CYII=)
    }

    @media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx) {
        .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAADh4eHh4eHh4eHi4uLb29vh4eHh4eHh4eHh4eHh4eHh4eHh4eHi4uLi4uLj4+Pi4uLk5OTo6Ojh4eHh4eHi4uLg4ODg4ODh4eHg4ODh4eHf39/g4OD////h4eEzIk+wAAAAHnRSTlMAzu6/LA3p5eLZx8ONTjYiHRIKooV+YWBaRzEnCANnm5rnAAAAZElEQVQY033P2wqAIAyA4VWaaWrnc/n+j5mbhBjUf7WPoTD47TJb4i5zTr/sRDRHuyFaoWX7uK/RlbctlPEuyI1f4WY9yQINEkf6rzzo8YIzmUFoCs7J1EjeIaa9bXIEmzl8dgOZEAj/+2IvzAAAAABJRU5ErkJggg==)
        }
    }

    @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
        .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEUAAADh4eHh4eHh4eHi4uLb29vh4eHh4eHh4eHh4eHh4eHh4eHh4eHi4uLi4uLj4+Pi4uLk5OTo6Ojh4eHh4eHi4uLg4ODg4ODh4eHg4ODh4eHf39/g4OD////h4eEzIk+wAAAAHnRSTlMAzu6/LA3p5eLZx8ONTjYiHRIKooV+YWBaRzEnCANnm5rnAAAAZElEQVQY033P2wqAIAyA4VWaaWrnc/n+j5mbhBjUf7WPoTD47TJb4i5zTr/sRDRHuyFaoWX7uK/RlbctlPEuyI1f4WY9yQINEkf6rzzo8YIzmUFoCs7J1EjeIaa9bXIEmzl8dgOZEAj/+2IvzAAAAABJRU5ErkJggg==)
        }
    }

    @media (-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi) {
        .vue-treeselect__checkbox--disabled .vue-treeselect__check-mark {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAUVBMVEUAAADh4eHh4eHh4eHh4eHi4uLi4uLh4eHh4eHh4eHf39/j4+Ph4eHh4eHh4eHg4ODi4uLh4eHh4eHi4uLh4eHh4eHh4eHh4eHh4eH////h4eF3FMFTAAAAGnRSTlMA+/eJhGhfSHE9JBzz5KaQf3pXT0Xbz0I5AYDw8F0AAAB+SURBVCjPrdHbDoMgEEVRKAii1dZe9fz/hxplTiKIT7qfYCWTEEZdUvOwbckNAD2WHeh3brHW5f5EzGQ+iN+b1Gt6KPvtv16Dn6JX9M9ya3/A1yfu5dlyduL6Hec7mXY6ddXLPP2lpABGZ8PWXfYLTJxZekVhhl7eTX24zZPNKXoRC7zQLjUAAAAASUVORK5CYII=)
        }
    }

    .vue-treeselect__checkbox--unchecked {
        border-color: #e0e0e0;
        background: #fff
    }

    .vue-treeselect__label-container:hover .vue-treeselect__checkbox--unchecked {
        border-color: #039be5;
        background: #fff
    }

    .vue-treeselect__checkbox--checked, .vue-treeselect__checkbox--indeterminate, .vue-treeselect__label-container:hover .vue-treeselect__checkbox--checked, .vue-treeselect__label-container:hover .vue-treeselect__checkbox--indeterminate {
        border-color: #039be5;
        background: #039be5
    }

    .vue-treeselect__checkbox--disabled, .vue-treeselect__label-container:hover .vue-treeselect__checkbox--disabled {
        border-color: #e0e0e0;
        background-color: #f7f7f7
    }

    .vue-treeselect__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: table-cell;
        padding-left: 5px;
        max-width: 100%;
        vertical-align: middle;
        cursor: inherit
    }

    [dir=rtl] .vue-treeselect__label {
        padding-left: 0;
        padding-right: 5px
    }

    .vue-treeselect__count {
        margin-left: 5px;
        font-weight: 400;
        opacity: .6
    }

    [dir=rtl] .vue-treeselect__count {
        margin-left: 0;
        margin-right: 5px
    }

    .vue-treeselect__tip {
        padding-left: 5px;
        padding-right: 5px;
        display: table;
        table-layout: fixed;
        width: 100%;
        color: #757575
    }

    .vue-treeselect__tip-text {
        display: table-cell;
        vertical-align: middle;
        padding-left: 5px;
        padding-right: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        font-size: 12px
    }

    .vue-treeselect__error-tip .vue-treeselect__retry {
        cursor: pointer;
        margin-left: 5px;
        font-style: normal;
        font-weight: 600;
        text-decoration: none;
        color: #039be5
    }

    [dir=rtl] .vue-treeselect__error-tip .vue-treeselect__retry {
        margin-left: 0;
        margin-right: 5px
    }

    .vue-treeselect__icon-container {
        display: table-cell;
        vertical-align: middle;
        width: 20px;
        text-align: center;
        line-height: 0
    }

    .vue-treeselect--single .vue-treeselect__icon-container {
        padding-left: 5px
    }

    [dir=rtl] .vue-treeselect--single .vue-treeselect__icon-container {
        padding-left: 0;
        padding-right: 5px
    }

    .vue-treeselect__icon-warning {
        display: block;
        margin: auto;
        border-radius: 50%;
        position: relative;
        width: 12px;
        height: 12px;
        background: #fb8c00
    }

        .vue-treeselect__icon-warning:after {
            display: block;
            position: absolute;
            content: "";
            left: 5px;
            top: 2.5px;
            width: 2px;
            height: 1px;
            border-color: #fff;
            border-style: solid;
            border-width: 5px 0 1px
        }

    .vue-treeselect__icon-error {
        display: block;
        margin: auto;
        border-radius: 50%;
        position: relative;
        width: 12px;
        height: 12px;
        background: #e53935
    }

        .vue-treeselect__icon-error:after, .vue-treeselect__icon-error:before {
            display: block;
            position: absolute;
            content: "";
            background: #fff;
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .vue-treeselect__icon-error:before {
            width: 6px;
            height: 2px;
            left: 3px;
            top: 5px
        }

        .vue-treeselect__icon-error:after {
            width: 2px;
            height: 6px;
            left: 5px;
            top: 3px
        }

    .vue-treeselect__icon-loader {
        display: block;
        margin: auto;
        position: relative;
        width: 12px;
        height: 12px;
        text-align: center;
        animation: vue-treeselect-animation-rotate 1.6s linear infinite
    }

        .vue-treeselect__icon-loader:after, .vue-treeselect__icon-loader:before {
            border-radius: 50%;
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            opacity: .6;
            animation: vue-treeselect-animation-bounce 1.6s ease-in-out infinite
        }

        .vue-treeselect__icon-loader:before {
            background: #039be5
        }

        .vue-treeselect__icon-loader:after {
            background: #b3e5fc;
            animation-delay: -.8s
        }

    .vue-treeselect__menu-placeholder {
        display: none
    }

    .vue-treeselect__portal-target {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        height: 0;
        width: 0;
        padding: 0;
        margin: 0;
        border: 0;
        overflow: visible;
        box-sizing: border-box
    }
</style>