.tree-icon { background-image: url('32px.png'); background-repeat: no-repeat; width: 24px; height: 24px; line-height: 24px; min-height: 24px; }
.tree-nodes { background-color: white; max-height: 400px; overflow-y: auto; }
.tree-node { position: relative; background-image: url('32px.png'); background-position: -292px -4px; background-repeat: repeat-y; font-size: 13px; }
.tree-node-content { display: flex; align-items: center; cursor: pointer; transition: all 0.2s; height: 24px; line-height: 24px; min-height: 24px; }
.tree-node-content:hover { /* background-color: #f5f7fa; */ }
.tree-node-content.has-children .tree-node-toggle.tree-icon { background-position: -100px -4px; }
.tree-node-checkbox { margin-right: 8px; }
.tree-node-toggle { margin-right: 8px; width: 20px; text-align: center; cursor: pointer; transition: transform 0.2s; }
.tree-node-toggle.collapsed.tree-icon { background-position: -132px -4px !important; }
.tree-node-toggle.tree-icon { background-position: -100px -4px; }
.tree-node-label { flex: 1; }
.tree-node-children { padding-left: 24px; display: none; }
.tree-node-children.expanded { display: block; }
.tree-node-children .tree-node-toggle.tree-icon { background-image: url('32px.png'); background-position: -68px -4px; background-repeat: no-repeat; }
.tree-footer { padding: 12px 16px; background-color: #f8f9fa; border-top: 1px solid #e9ecef; text-align: right; }
.tree-selection { font-size: 14px; color: #6c757d; }