#visibility-chart {
  width: 100%;
  min-width: 540;
/*   max-height: 740; */
  vertical-align: top;
  padding:16;
}

#visibility-top-container{
    width: 100%;
    max-width: 740;
}

.grid line {
    stroke: lightgrey;
    stroke-opacity: 0.3;
    shape-rendering: geometricPrecision;
}

.grid path {
    stroke: lightgrey;
    stroke-width: 0;
    stroke-opacity: 0.7;
}

.axis {
    stroke-width: 3px;
}

.axis text {
    font-family: sans-serif;
    font-size: 14px;
}

.axisx {
    stroke-width: 5px;
}

.targetline {
    fill: none;
    stroke: white;
    stroke-width: 4px;
}

.moonline {
    fill: none;
    stroke: yellow;
    stroke-width: 2px;
    stroke-dasharray: 10 5;
}

.astrotwilight {
    /* Interpolated color between night and day */
    fill: #19263f;
    fill-opacity: 1.0;
}

.nauticaltwilight {
    /* Interpolated color between night and day */
    fill: #334c7f;
    fill-opacity: 1.0;
}

.civiltwilight {
    /* Interpolated color between night and day */
    fill: #4c72bf;
    fill-opacity: 1.0;
}

.night {
    /* Black */
    fill: #000000;
    fill-opacity: 1.0;
}

.day {
    /* Blue defined in the Almanac */
    fill: #6698ff;
    fill-opacity: 1.0;
}

.bigairmass {
    fill: #555555;
    fill-opacity: 0.55;
}

.userstime {
    stroke: #87FF45;
    stroke-width: 3px;
    cursor: col-resize;
}

.chart-title {
	font-size: 18;
	font-family: sans-serif;
}

.speciallimit {
    stroke: red;
    stroke-width: 2px;
}

.specialtext {
    fill: red;
}