.bars meter,
.no-meter .bars meter {
  display: block;
  display: inline-block;
  height: 4em;
  width: 170px;
  background: #ccc;
  border: 1px solid #888;
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-transform: rotate(-90deg)
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  margin-top: 105px;
  margin-left: 4em;
}

.bars .inner {
  margin-top: 10px;
  min-width: 400px;
}

.bars .inner > div:focus:after {
    content: attr(aria-label);
	  background-color: black;
    color: white;
    padding:5px;
    position: absolute;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    z-index: 1000;
}

.bars meter + div {
  font-size: 14px;
}

.bars ::-webkit-meter-bar {
  background: none;
  background-color: #ccc;
  border: 1px solid #888;
}

.birth:-moz-meter-optimum::-moz-meter-bar {
  background: rgb(79, 129, 189);
  color: rgb(79, 129, 189);
}

meter.birth::-webkit-meter-optimum-value {
  background: rgb(79, 129, 189);
  color: rgb(79, 129, 189);
}

meter.birth div {
  background: rgb(79, 129, 189);
}

@media screen and (-ms-high-contrast: active) {
  meter.birth div {
    background: rgb(79, 129, 189);
  }
}

.death:-moz-meter-optimum::-moz-meter-bar {
  background: rgb(192, 80, 77);
  color: rgb(192, 80, 77);
}

meter.death::-webkit-meter-optimum-value {
  background: rgb(192, 80, 77);
  color: rgb(192, 80, 77);
}

meter.death div {
  background: rgb(192, 80, 77);
}

@media screen and (-ms-high-contrast: active) {
  meter.death div {
    background: rgb(192, 80, 77);
  }
}

.immigration:-moz-meter-optimum::-moz-meter-bar {
  background: rgb(155, 187, 89);
  color: rgb(155, 187, 89);
}

meter.immigration::-webkit-meter-optimum-value {
  background: rgb(155, 187, 89);
  color: rgb(155, 187, 89);
}

meter.immigration div {
  background: rgb(155, 187, 89);
}

@media screen and (-ms-high-contrast: active) {
  meter.immigration div {
    background: rgb(155, 187, 89);
  }
}

.emigration:-moz-meter-optimum::-moz-meter-bar {
  background: rgb(128, 100, 162);
  color: rgb(128, 100, 162);
}

meter.emigration::-webkit-meter-optimum-value {
  background: rgb(128, 100, 162);
  color: rgb(128, 100, 162);
}

meter.emigration div {
  background: rgb(128, 100, 162);
}

@media screen and (-ms-high-contrast: active) {
  meter.emigration div {
    background: rgb(128, 100, 162);
  }
}

.non_permanent:-moz-meter-optimum::-moz-meter-bar {
  background: rgb(75, 172, 198);
  color: rgb(75, 172, 198);
}

meter.non_permanent::-webkit-meter-optimum-value {
  background: rgb(75, 172, 198);
  color: rgb(75, 172, 198);
}

meter.non_permanent div {
  background: rgb(75, 172, 198);
}

@media screen and (-ms-high-contrast: active) {
  meter.non_permanent div {
    background: rgb(75, 172, 198);
  }
}

.incountry_move:-moz-meter-optimum::-moz-meter-bar {
  background: rgb(247, 145, 29);
  color: rgb(247, 145, 29);
}

meter.incountry_move::-webkit-meter-optimum-value {
  background: rgb(247, 145, 29);
  color: rgb(247, 145, 29);
}

meter.incountry_move div {
  background: rgb(247, 145, 29);
}

@media screen and (-ms-high-contrast: active) {
  meter.incountry_move div {
    background: rgb(247, 145, 29);
  }
}

.no-meter meter div {
  height: 100%;
  border: none;
}

.birth.hilite {
  background: rgb(79, 129, 189);
  fill: rgb(79, 129, 189);
}

.death.hilite {
  background: rgb(192, 80, 77);
  fill: rgb(192, 80, 77);
}

.immigration.hilite {
  background: rgb(155, 187, 89);
  fill: rgb(155, 187, 89);
}

.emigration.hilite {
  background: rgb(128, 100, 162);
  fill: rgb(128, 100, 162);
}

.incountry_move.hilite {
  background: rgb(247, 145, 29);
}

.non_permanent.hilite {
  background: rgb(75, 172, 198);
  fill: rgb(75, 172, 198);
}

.province-pop tr {
  transition: background-color 4s ease-in;
}

.province-pop tr.hilite {
  transition: background-color .2s ease-out;
}

.canada-map path {
  fill: #94a6b2;
  stroke: #fff;
  stroke-width: 0.03;
  transition: fill 4s ease-in;
}

.canada-map path.hilite {
  transition: fill .2s ease-out;
}

.in-country-move {
  fill: none;
  stroke: rgb(247, 145, 29);
  stroke-width: 1;
  marker-end: url('#triangle');
}

.in-country-move.viz_fade {
  opacity: 0;
  transition: opacity 2s ease-in;
}

.paused .inner,
.paused svg {
  opacity: .2;
}

.paused *,
.paused + .province-pop * {
  transition-property: none !important;
}

/* Fix for IE11 pause */
.paused .hilite {
  fill: #94a6b2!important;
}

@media all and (-ms-high-contrast:none) {
  .in-country-move {
    marker-end: none;
  }
}

.clock:not(.paused-clock) .paused-text,
.clock.paused-clock .unpaused-text {
  display: none;
}

.event {
  height: 8em;
  overflow: scroll;
}

/* Fix map */
.xxsmallview .maps.hidden-xs,
.xsmallview .maps.hidden-xs {
  display: block !important;
  visibility: hidden;
  position: absolute;
}

.xxsmallview .bars .inner {
  margin-left: -15px;
  margin-right: -15px;
}

.xxsmallview .bars .col-xs-2{
  width: 26%;
}