
/* tree */
ul.tree,
ul.tree * {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.tree img.arrow {
    padding: 2px 0 0 0;
    border: 0;
    width: 20px;
}
ul#tree>li {
    margin-top: .125rem;
}
ul.tree li {
    padding: 0;
    line-height: 18px;
    position: relative;
}
ul.tree li>div>.custom-checkbox-label::after {
    content: attr(data-after);
    letter-spacing: 0;
    color: #3337;
    margin-left: .265rem;
    font-weight: normal;
    font-size: .825rem;
}
ul.tree .indicator-bar,
ul.tree .action-bar {
    position: absolute !important;
    font-size: .825rem;
}
ul.tree .indicator-bar {
    display: block;
    left: -22px;
    padding: 2px;
    top: 0;
}
ul.tree .action-bar {
    display: none;
    right: 0;
    padding: 2px;
    top: 3px;
}
ul.tree .indicator-bar.expanded {
    transition: transform .35s ease;
    transform-origin: 50% 50% !important;
    transform: rotate(90deg);
}
/* ul.tree li.selected>.action-bar, */
ul.tree li:hover>div>.action-bar {
    display: block !important;
}
ul.tree li.selected>div>label,
ul.tree li.selected>div>input[type="text"],
ul.tree li.selected>div>input[type="checkbox"] {
    background-color: #d1e7dd !important;
}
ul.tree li label,
ul.tree li input {
    padding: 4px;
    font-weight: normal !important;
}
ul.tree li ul {
    padding: 0 0 0 20px;
    margin: 0;
    width: fit-content;
}

ul.tree label {
    cursor: pointer;
    /* font-weight: bold; */
    padding: 2px 0;
}


.tree ul {
    margin-top: 5px;
    margin-bottom: 5px;
}
.tree ul.collapse:not(.show) {
    display: none !important;
}
ul.tree li .arrow {
    width: 20px;
    height: 18px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    float: left;
    background: transparent no-repeat 0 0px;
}


ul.tree li .checkbox {
    width: 20px;
    height: 18px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    float: left;
}

ul.tree .dragging {
    opacity: 0.5;
}


.tree li input {
    border: none !important;
    font-size: 16px;
    outline: none;
}
.tree li input[type="text"] {
    width: fit-content;
    min-width: 100px;
}


.tree li {
    margin: 0;
    cursor: pointer;
}
.tree li .my-counter {
    position: absolute;
    right: -40px;
    top: 5px;
    color: #3337;
}

.custom-checkbox-input:checked~.custom-checkbox-label::after {
	/* background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e") */
}
.custom-checkbox-input:indeterminate~.custom-checkbox-label::after{
	/* background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e")!important; */
	border-radius: 1px;
	/* color: #fff !important;
    border-color: #007bff;
    background-color: #007bff; */
}
.tree li input[type="text"],
.custom-checkbox-label {
    background-color: transparent;
}
ul.tree {
    margin-left: 1.5rem;
    margin-top: 1rem;
}

ul.tree li .collapsed {
    background-image: url(images/collapsed.svg);
    margin-top: 4px;
}
ul.owner_tree li .collapsed {
    background-image: unset;
    margin-top: unset;
}
ul.tree li .expanded {
    background-image: url(images/expanded.svg);
    margin-top: 4px;
}

ul.owner_tree li .expanded {
    background-image: unset;
    margin-top: unset;
}
ul.tree li .checkbox {
    width: 20px;
    height: 18px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    float: left;
    background: url(images/check0.svg) no-repeat 0 0px;
    margin-top: 4px;
}
ul.owner_tree li .expanded {
    background: unset;
}
ul.tree li .checked {
    background-image: url(images/check2.svg);
    margin-top: 4px;
}
ul.owner_tree li .expanded {
    background-image: unset;
}
ul.tree li .half_checked {
    background-image: url(images/check1.svg);
    margin-top: 4px;
}  
ul.owner_tree li .half_checked {
    background-image: unset ;
}
ul.tree>li>div>label,
ul.tree>li>div>input.custom-checkbox-label {
    font-weight: bold !important;
}