.compass .back {
  fill: #eee;
  fill-opacity: .8;
}

.compass .fore {
  stroke: #999;
  stroke-width: 1.5px;
}

.compass rect.back.fore {
  fill: #999;
  fill-opacity: .3;
  stroke: #eee;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.compass .direction {
  fill: none;
}

.compass .chevron {
  fill: none;
  stroke: #999;
  stroke-width: 5px;
}

.compass .zoom .chevron {
  stroke-width: 4px;
}

.compass .active .chevron, .compass .chevron.active {
  stroke: #fff;
}

.compass.active .active .direction {
  fill: #999;
}

