:root {
    --tree-btn-bg: #0066cc;
    --tree-btn-active-bg: #7eb300;
    --tree-btn-border: 0.5px solid var(--tree-btn-bg);
    --tree-btn-radius: .35rem;
    --tree-btn-font-size: 1.1rem;
    --tree-btn-padding: 1rem 2rem;
    --tree-btn-min-width: 120px;
    --tree-btn-font-weight: 600;
    --tree-arrow-size: 4rem;
    --tree-arrow-bg: #f3f6fa;
    /*--tree-arrow-border: 2.2px solid var(--tree-btn-bg);*/
	--tree-arrow-border: 2.2px solid #7eb300;
}
.cstree { font-family: system-ui,sans-serif; margin:2rem 0; }
.cstree__row {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; padding: 0.7rem 0;
}
.cstree__btn {
    display: flex; align-items: center; justify-content: center;
    padding: var(--tree-btn-padding);
    font-size: var(--tree-btn-font-size);
    border-radius: var(--tree-btn-radius);
    border: var(--tree-btn-border);
    background: var(--tree-btn-bg);
    cursor: pointer;
    font-weight: var(--tree-btn-font-weight);
    color: #fff;
    min-width: var(--tree-btn-min-width);
    box-sizing: border-box;
    transition: background 0.17s, color 0.17s, border 0.17s, font-size 0.17s;
    gap:0.6em;
}
.cstree__btn:hover { background: #094b8a; }
.cstree__btn--active, .cstree__btn.active {
    background: var(--tree-btn-active-bg) !important;
    /*border-color: var(--tree-btn-active-bg) !important;*/
	 border: 0.5px solid var(--tree-btn-active-bg) !important;
    color: #fff !important;
}
.cstree__arrow {
    width: fit-content;
    margin: 1.7rem auto;
    border-radius: 50%;
    border: var(--tree-arrow-border);
    background: var(--tree-arrow-bg);
    height: 4rem; width: 3rem;
    /*color: var(--tree-btn-bg);*/
	color: #7eb300;
    font-size: var(--tree-arrow-size);
    display:flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 7px #cccccc70;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.cstree__icon {
    display: inline-flex; align-items: center; justify-content: center; margin-right: 0.4em; font-size: 1.2em;
}
.cstree__node-content { text-align: center; margin: 1rem 0 0.5rem 0; font-size:1.1rem;}
.cstree__level { width: 100%; opacity:0; transform:translateY(1rem); transition:opacity .5s,transform .5s;}
.cstree__level--open { opacity:1; transform:translateY(0);}