#phylogram-toolbar {

  display: flex;
  justify-content: space-between;
  width: 450px;

  .btn {
    height: 30px;
  }

  .btn-group {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
  }

  .btn-light {
    background-image: linear-gradient(white, #eee 50%, #e4e4e4);
    border: 1px solid #d5d4d4;
    color: rgba(0,0,0,0.4);
    text-shadow: 1px 1px 0 rgba(255,255,255,0.1);
  }

  .fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .fa-rotate-135 {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  .tree-selection-brush .extent {
    fill-opacity: .05;
    stroke: #fff;
    shape-rendering: crispEdges;
  }

  .tree-scale-bar text {
    font: sans-serif;
  }

  .tree-scale-bar line, .tree-scale-bar path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

}

#phylogram-container {

  .node circle, .node ellipse, .node rect {
    fill: steelblue;
    stroke: black;
    stroke-width: 0.5px;
  }

  .internal-node circle, .internal-node ellipse, .internal-node rect{
    fill: #CCC;
    stroke: black;
    stroke-width: 0.5px;
  }

  .node {
    font: 10px sans-serif;
  }

  .node-selected {
    fill: #f00 !important;
  }

  .node-collapsed circle, .node-collapsed ellipse, .node-collapsed rect{
    fill: black !important;
  }

  .node-tagged {
    fill: #00f;
  }

  .branch {
    fill: none;
    stroke: #999;
    stroke-width: 2px;
  }

  .clade {
    fill: lightgrey;
    stroke: #222;
    stroke-width: 2px;
    opacity: 0.5;
  }

  .branch-selected {
    stroke: #f00 !important;
    stroke-width: 3px;
  }

  .branch-tagged {
    stroke: #00f;
    stroke-dasharray: 10,5;
    stroke-width: 2px;
  }

  .branch-tracer {
    stroke: #bbb;
    stroke-dasharray: 3,4;
    stroke-width: 1px;
  }

  .branch-multiple {
    stroke-dasharray: 5, 5, 1, 5;
    stroke-width: 3px;
  }

  .branch:hover {
    stroke-width: 10px;
  }

  .internal-node circle:hover, .internal-node ellipse:hover, .internal-node rect:hover {
    fill: black;
    stroke: #CCC;
  }

  .tree-widget {
  }

}