@import url("/css/style.css");
body {
          font: 10px sans-serif;
}
h1 {
        font: 14px;
}
.attribution{
        display: flex;
        align-items: center;
}
a {
  color: black;
}
img#rasnz_logo {
    height: 100%;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
title.x.axis path {
    display: none;
}
.all {
    stroke: darkorange;
    fill: darkorange;
    stroke-width: 1px;
}
.auckland {
    stroke: steelblue;
    fill: steelblue;
    stroke-width: 1px;
}
.wellington {
    stroke: black;
    fill: black;
    stroke-width: 1px;
}
.christchurch {
    stroke: green;
    fill: green;
    stroke-width: 1px;
}
.dunedin {
    stroke: red;
    fill: red;
    stroke-width: 1px;
}
.date {
    stroke: steelblue;
}

.solstice {
    stroke-dasharray: 3 3;
    stroke: brown;
    fill: none;
}
.solstice > text{
    stroke: none;
    fill: brown;
}
.daylight_savings {
    stroke-dasharray: 3 3;
    stroke: steelblue;
    fill: none;
}
.daylight_savings > text{
    stroke: none;
    fill: steelblue;
}
.daylength > text{
    stroke: none;
    fill: grey;
}
circle.center{
    fill: steelblue;
    opacity: 0.2;
}
path.today , .today>line {

    fill: steelblue;
    stroke: steelblue;
    opacity: 0.3;
}
.today > text{
    fill: steelblue;
    opacity: 1.0;
}
.table_wrapper{
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: left;
}
table.solstice, table.daylight_savings
{
    font-size: 10;
    font-family: sans-serif;
    stroke: none;
    fill: black;
}

.area {
    fill: steelblue;
    stroke: none;
    opacity: 0.1;
}
.backgrond {
    fill: white;;
    stroke: none;
    opacity: 0.1;
}

.zeroline {
    fill: none;
    stroke: red;
    stroke-width: 0.5px;
    stroke-dasharray: 5 5;
}

.zerolinetext {
    fill: red;
}

.overlay {
    fill: none;
    stroke: none;
    pointer-events: all;
}

.focusLine {
    fill: none;
    stroke-width: 0.5px;
}
#focusLineV {
    stroke: steelblue;
}

.focusCircle, {
    fill: red;
}
.opaque {
    opacity: 0.1;
}

table.particulars th, table.particulars td {
        border: 1px solid #ddd;
        padding: 10px;
        width: 100px;
    }
.title{
    font-size: 16;
    font-family: sans-serif;
    stroke: none;
    fill: black;
  text-anchor: middle;
  dominant-baseline: middle;
}
.circle title{
    font-size: 12;
    font-family: sans-serif;
    stroke: none;
    fill: steelblue;
}
.frame {
  fill: none;
  stroke: #000;
}

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis circle {
  fill: none;
  stroke: #777;
  stroke-dasharray: 4,4;
}

.axis :last-of-type circle {
  stroke: #333;
  stroke-dasharray: none;
}

.line {
  fill: none;
  stroke: red;
  stroke-width: 1.5px;
}


.active_city{
    stroke-width: 5;
}
.active_city path.star{
    stroke-width: 1;
    stroke-dasharray: 1,1;
    visibility: visible;
}
.highlight{
   fill: steelblue;
   opacity :  0.5;
}
text.highlight {
   opacity :  1.0;
}
line.highlight {
  stroke-dasharray: 5,5;
}
.pointerall{
    pointer-events: all;
}
.legend_group {
    cursor: pointer;
}

.first_quarter, .last_quarter, .full_moon{
    fill: #DEBE87;
    stroke: black;
}
.new_moon{
    fill: transparent;
    stroke: black;
}
.plot_section{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}