/* required LIB STYLES */
/* .Treant se automatski dodaje na svaki chart container */
.Treant { position: relative; overflow: hidden; padding: 0 !important; }
.Treant > .node,
.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
.Treant.Treant-loaded .node,
.Treant.Treant-loaded .pseudo { visibility: visible; }
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
.Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; }
.Treant .collapsed .collapse-switch { background-color: #868DEE; }
.Treant > .node img { border: none; float: left; }

.chart { height: 600px; margin: 5px; width: 340px; }
@media screen and (min-width: 640px) {
    .chart { height: 600px; margin: 5px; width: 600px; }
}
@media screen and (min-width: 768px) {
    .chart { height: 800px; margin: 5px; width: 720px; }
}
@media screen and (min-width: 1024px) {
    .chart { height: 800px; margin: 5px; width: 980px; }
}
@media screen and (min-width: 1280px) {
    .chart { height: 800px; margin: 5px; width: 1260px; }
}

.node-name { font-weight: bold; }

.familyNode {
    padding-right: 0.75rem;
    border-radius: 9999px;
    width: 200px;
    height: 3.5rem;
}

.familyNode img {
    margin-right: 0.25rem;
    height: 3.5rem;
    width: 3.5rem;
}

.familyNode p {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1.5rem;
}

.familyNode.partner {
    padding-right: 0;
}
.familyNode.partner img {
    float: right;
    margin-left: 0.25rem;
    margin-right: 0;
}
.familyNode.partner p {
    float: right;
}