.tf-tree {text-align: center;cursor: grab;}
.tf-tree * {}
.tf-tree ul {display: inline-flex;}
.tf-tree > ul {transform-origin: 0 0;}
.tf-tree li ul {margin: 2.5em 0;}

.tf-tree li {align-items: center;display: flex;flex-direction: column;flex-wrap: wrap;padding: 0 .6em;position: relative;}
.tf-tree li li:before {border-top: 2px solid rgba(0 ,0, 0, .2);content: "";display: block;height: .0625em; left: -.03125em;position: absolute;top: -1.03125em;width: 100%}
.tf-tree li li:first-child:before {left: calc(50% - .03125em);max-width: calc(50% + .0625em)}
.tf-tree li li:last-child:before {left: auto;max-width: calc(50% + .0625em);right: calc(50% - .03125em)}
.tf-tree li li:only-child:before {display: none;}
.tf-tree li li:only-child > .tf-nc:before, .tf-tree li li:only-child > .tf-node-content:before {height: 1.0625em;top: -1.0625em;}
.tf-tree li.expanded ul, .tf-tree li.expanded > .tf-nc:after, .tf-tree li.expanded > .tf-nc .bottom-controls .btn {display: none}

.tf-tree .tf-nc, .tf-tree .tf-node-content {display: inline-block;padding: 0;position: relative;}


/* Block styles
--------------------------------------------------- */
.tf-tree .tf-nc .inner {background: #4ab3f5;border: 1px solid rgba(0,0,0, .1);border-radius: .5rem;padding: 0 0 1.25rem;position: relative;/*box-shadow: 0 0 10px rgba(0,0,0,.2);*/width: 270px;}
.tf-tree .tf-nc .inner .dropdown .btn:after {display: none;}

.tf-tree .tf-nc .inner .top-controls {padding: .25rem 1rem;border-radius: .5rem .5rem 0 0;color: #fff;padding: .25rem;}
.tf-tree .tf-nc .inner .top-controls .col {display: flex}
.tf-tree .tf-nc .inner .top-controls .col:last-child {justify-content: flex-end;}
.tf-tree .tf-nc .inner .top-controls .btn {border: none;padding: .25rem;
    margin-right: .15rem;}
.tf-tree .tf-nc .inner .top-controls .btn:focus {box-shadow: none;}


.tf-tree .tf-nc .inner .text-wrapper{text-align: left;color: #333;position: relative;cursor: text;padding: .5rem 1.5rem;}
.tf-tree .tf-nc .inner .text-wrapper .title {font-weight: 600;color: #fff;font-size: .875rem;}
.tf-tree .tf-nc .inner .text-wrapper .text {color: rgba(255, 255, 255, .8);line-height: 1.2;font-size: 1rem;max-height: 120px;overflow-y: scroll;}

.tf-tree .inner .expanded-indicator {display: none;}
.tf-tree .expanded .inner .expanded-indicator {display: block;}

.tf-tree .tf-nc .inner .bottom-controls {text-align: center;width: 100%;position: absolute;bottom: -18px;}
.tf-tree .tf-nc .inner .bottom-controls .btn, .tf-tree .add-neighbor .btn {border-radius: 50%;border: 0;border: 1px solid rgba(0, 0, 0, .1);padding: .55rem .65rem;}
.tf-tree .tf-nc .inner .bottom-controls .btn:hover, .tf-tree .add-neighbor .btn:hover {background: #fff;border: 1px solid #3fa9f5;}
.tf-tree .add-neighbor .btn {position: relative;}

.tf-tree .tf-nc .inner form {text-align: left;background: #eee;padding: .5rem;margin: 1rem 0 0;border-radius: .5rem;border: 1px solid #ccc;font-size: .875rem;}
.tf-tree .tf-nc .inner form label:not(.form-check-label) {display: block;}
.tf-tree .tf-nc .inner form .form-check {padding-left: 0;}

/* Block welcome */
.tf-tree .tf-nc .inner.welcome {width: 450px;}

/* Block question */
.tf-tree .tf-nc .inner.type_question {background: #ff7878/*#ffdd00*/;}

/* Block product */
.tf-tree .tf-nc .inner.type_product {background: #ff931e/*#a6c307*/;}

/* Block menu */
.tf-tree .tf-nc .inner.type_menu {}
.tf-tree .tf-nc .inner.type_menu {background: #cf8ae3;}


.tf-tree .tf-nc:before, .tf-tree .tf-node-content:before, .tf-tree li .add-neighbor:before {top: -1.03125em;}

.tf-tree .tf-nc:after, .tf-tree .tf-nc:before, .tf-tree .tf-node-content:after, .tf-tree .tf-node-content:before, .tf-tree li .add-neighbor:before  {
    border-left: 2px solid rgba(0 ,0, 0, .2);
    content: "";
    display: block;
    height: 1.5em;
    left: calc(50% - .03125em);
    position: absolute;
    width: .0625em
}

.tf-tree .tf-nc:after, .tf-tree .tf-node-content:after {top: calc(100% + .03125em);z-index: -1;}
.tf-tree .tf-nc:only-child:after, .tf-tree .tf-node-content:only-child:after, .tf-tree > ul > li > .tf-nc:before, .tf-tree > ul > li > .tf-node-content:before {
    display: none
}
.tf-tree.tf-gap-sm li {padding: 0 .6em;}
.tf-tree.tf-gap-sm li > .tf-nc:before, .tf-tree.tf-gap-sm li > .tf-node-content:before {
    height: .6em;
    top: -.6em;
}

.tf-tree.tf-gap-sm li > .tf-nc:after, .tf-tree.tf-gap-sm li > .tf-node-content:after {
    height: .6em;
}

.tf-tree.tf-gap-sm li ul {
    margin: 1.2em 0
}

.tf-tree.tf-gap-sm li li:before {
    top: -.63125em
}

.tf-tree.tf-gap-sm li li:only-child > .tf-nc:before, .tf-tree.tf-gap-sm li li:only-child > .tf-node-content:before {
    height: .6625em;
    top: -.6625em
}

.tf-tree.tf-gap-lg li {
    padding: 0 1.5em
}

.tf-tree.tf-gap-lg li > .tf-nc:before, .tf-tree.tf-gap-lg li > .tf-node-content:before {
    height: 1.5em;
    top: -1.5em
}

.tf-tree.tf-gap-lg li > .tf-nc:after, .tf-tree.tf-gap-lg li > .tf-node-content:after {
    height: 1.5em
}

.tf-tree.tf-gap-lg li ul {
    margin: 3em 0
}

.tf-tree.tf-gap-lg li li:before {
    top: -1.53125em
}

.tf-tree.tf-gap-lg li li:only-child > .tf-nc:before, .tf-tree.tf-gap-lg li li:only-child > .tf-node-content:before {
    height: 1.5625em;
    top: -1.5625em
}

.tf-tree li.tf-dotted-children .tf-nc:after, .tf-tree li.tf-dotted-children .tf-nc:before, .tf-tree li.tf-dotted-children .tf-node-content:after, .tf-tree li.tf-dotted-children .tf-node-content:before {
    border-left-style: dotted
}

.tf-tree li.tf-dotted-children li:before {
    border-top-style: dotted
}

.tf-tree li.tf-dotted-children > .tf-nc:before, .tf-tree li.tf-dotted-children > .tf-node-content:before {
    border-left-style: solid
}

.tf-tree li.tf-dashed-children .tf-nc:after, .tf-tree li.tf-dashed-children .tf-nc:before, .tf-tree li.tf-dashed-children .tf-node-content:after, .tf-tree li.tf-dashed-children .tf-node-content:before {
    border-left-style: dashed
}

.tf-tree li.tf-dashed-children li:before {
    border-top-style: dashed
}

.tf-tree li.tf-dashed-children > .tf-nc:before, .tf-tree li.tf-dashed-children > .tf-node-content:before {
    border-left-style: solid
}