/* required LIB STYLES */
/* .Treant se automatski dodaje na svaki chart conatiner */
.Treant { position: relative; overflow: hidden; padding: 0 !important; }
.Treant > .node,
.Treant > .pseudo { position: absolute; display: block; }
.Treant.loaded .node,
.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; }

/* optional Container STYLES 


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

body { background: #fff;  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }

*/
.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }

.evolution-tree {
    padding: 2px;
    width: 40px; height: 40px;
    border-radius: 3px;
    font-size: 10px;
}

.evolution-tree .node-name { text-align: center; position: absolute; width: 88px; left: -50%; margin-top: 2px;}
.evolution-tree img {  
    width: 40px;
    height: 40px;
    margin-right:  10px; float: none !important; 
}

.evolution-tree.the-parent { border-radius: 50%; background-color: #000; width: 3px; height: 3px; }
.evolution-tree.the-parent .node-name { width: auto; margin-top: -7px; text-indent: 12px; font-weight: bold; }

.evolution-mastered > .node-name {
    color: yellowgreen !important;
}

.ps-container .ps-scrollbar-x {
    position: absolute; /* please don't change 'position' */
    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
    height: 8px;
    background-color: #aaa;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -webkit-transition: opacity.2s linear;
    -moz-transition: opacity .2s linear;
    transition: opacity .2s linear;
}

.ps-container:hover .ps-scrollbar-x {
    opacity: 0.6;
    filter: alpha(opacity = 60);
}

.ps-container .ps-scrollbar-x:hover {
    opacity: 0.9;
    filter: alpha(opacity = 90);
    cursor:default;
}

.ps-container .ps-scrollbar-x.in-scrolling {
    opacity: 0.9;
    filter: alpha(opacity = 90);
}

.ps-container .ps-scrollbar-y {
    position: absolute; /* please don't change 'position' */
    right: 3px; /* there must be 'right' for ps-scrollbar-y */
    width: 8px;
    background-color: #aaa;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -webkit-transition: opacity.2s linear;
    -moz-transition: opacity .2s linear;
    transition: opacity .2s linear;
}

.ps-container:hover .ps-scrollbar-y {
    opacity: 0.6;
    filter: alpha(opacity = 60);
}

.ps-container .ps-scrollbar-y:hover {
    opacity: 0.9;
    filter: alpha(opacity = 90);
    cursor: default;
}

.ps-container .ps-scrollbar-y.in-scrolling {
    opacity: 0.9;
    filter: alpha(opacity = 90);
}

.node-name {
    background-color: black;
    color: #ccc;
}



.tree45 {
    height: calc(100% - 400px);
    margin-left: 10px;
    zoom: 0.45;
    width: calc(100% - 175px);
}


.tree60 {
    height: calc(100% - 305px);
    margin-left: 10px;
    zoom: 0.6;
    width: calc(100% - 150px);
}


.tree90 {
    height: calc(100% - 200px);
    margin-left: 10px;
    zoom: 0.9;
    width: calc(100% - 100px);
}


.tree75 {
    height: calc(100% - 240px);
    margin-left: 10px;
    zoom: 0.75;
    width: calc(100% - 100px);
}

.tree-container::-webkit-scrollbar {
    width: 1em;
    height: 1em;
}