<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,600,800italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

body, h1, h2, h3, h4, h5, h6, .descr {
   font-family: 'Open Sans Condensed', sans-serif !important;
   text-rendering: optimizeLegibility;
   font-smoothing: antialiased;
}

#cite {
    font-size: 0.9rem; color: #B8B8B8; text-align: right; margin-top:10px; margin-right:5px; padding-bottom: 3px;
}
#cite a { text-decoration: none; color: #821122; }

#footer {
    font-size: 10.5px; color: #9B9B9B;
    margin-top:8px;
    background-color: #F6F6F6;
    padding: 8px;
}
#footer a { text-decoration: none; color: #821122; }


.descr {
  font-size: 1.4rem;
  color: #707070;
}

h1 {
   font-size:3em;
}

h2 {
   font-size:2.4rem !important;
   font-weight: 700 !important;
   line-height: 80%;
}

h3 {
   font-size:1.8em !important;
   color: #696969;
   line-height: 80%;
}

h4 {
   font-size:1.5em;
}

h5 {
   font-size:0.9em;
}

h6 {
   font-size:0.8em;
}


a:visited {
   color: rgb(50%, 0%, 50%);
}

td, th {
  border: none;
  font-size:0.95em;
}

blockquote {
   color:#666666;
   margin:0;
   padding-left: 1em;
   border-left: 0.5em #EEE solid;
}

body {
  max-width:100%;
  margin:1px 1px 0px 1px;
  font-weight: 300 !important;
}

a, a:visited {
  text-decoration: underline;
}


/*  ### METRICGRAPHICS ### */

/* No gutter class for bootstrap https://julienmelissas.com/no-gutter-column-trick-for-bootstrap /*/
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

/*  --------------------------- tooltip! -----------------  */
.mg-active-datapoint {
    fill: black;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 300;
}

.mg-area1-color {
    fill: #336666;
}

.mg-area2-color {
    fill: #368596;
}

.mg-area3-color {
    fill: #ab3d3f;
}

.mg-area4-color {
    fill: #ac673e;
}

.mg-area5-color {
    fill: #333366;
}

.mg-barplot rect.mg-bar {
    shape-rendering: auto;
    fill: #336666;
}

.mg-barplot rect.mg-bar.active {
    fill: #368596;
}

.mg-barplot .mg-bar-prediction {
    fill: #5b5b5b;
}

.mg-barplot .mg-bar-baseline {
    stroke: #5b5b5b;
    stroke-width: 2;
}

.mg-baselines line {
    opacity: 1;
    shape-rendering: auto;
    stroke: #b3b2b2;
    stroke-width: 1px;
}

.mg-baselines text {
    fill: black;
    font-size: 0.9rem;
    opacity: 0.6;
    stroke: none;
}

.mg-baselines-small text {
    font-size: 0.6rem;
}

.mg-header {
    cursor: default;
    font-size: 1.4rem;
}

.mg-header .mg-chart-description {
    fill: #ccc;
    font-family: FontAwesome;
    font-size: 1.3rem;
}

.mg-points circle {
    opacity: 0.9;
}

.mg-popover {
    font-size: 0.8rem;
    color: #696969;
}

.mg-popover-content {
    cursor: auto;
    line-height: 17px;
}

.mg-data-table {
    margin-top: 30px;
}

.mg-data-table thead tr th {
    border-bottom: 1px solid darkgray;
    cursor: default;
    font-size: 1.1rem;
    font-weight: normal;
    padding: 5px 5px 8px 5px;
    text-align: right;
}

.mg-data-table thead tr th .fa {
    color: #ccc;
    padding-left: 4px;
}

.mg-data-table thead tr th .popover {
    font-size: 1rem;
    font-weight: normal;
}

.mg-data-table .secondary-title {
    color: darkgray;
}

.mg-data-table tbody tr td {
    margin: 2px;
    padding: 5px;
    vertical-align: top;
}

.mg-data-table  tbody tr td.table-text {
    opacity: 0.8;
    padding-left: 30px;
}

.mg-y-axis line.mg-extended-y-ticks {
    opacity: 0.4;
}

.mg-x-axis line.mg-extended-x-ticks {
    opacity: 0.4;
}

.mg-histogram .axis path,
.mg-histogram .axis line {
    fill: none;
    opacity: 0.7;
    shape-rendering: auto;
    stroke: #ccc;
}

.mg-histogram .mg-bar rect {
    fill: #b6b6fc;
    shape-rendering: auto;
}

.mg-histogram .mg-bar rect.active {
    fill: #9e9efc;
}

.mg-least-squares-line {
    stroke: red;
    stroke-width: 1px;
}

.mg-lowess-line {
    fill: none;
    stroke: red;
}

.mg-line1-color {
    stroke: #669999;
}

.mg-hover-line1-color {
    fill: #4040e8;
}

.mg-line2-color {
    stroke: #05b378;
}

.mg-hover-line2-color {
    fill: #669999;
}

.mg-line3-color {
    stroke: #663333;
}

.mg-hover-line3-color {
    fill: #db4437;
}

.mg-line4-color {
    stroke: #f8b128;
}

.mg-hover-line4-color {
    fill: #ac7f3e;
}

.mg-line5-color {
    stroke: #5c5c5c;
}

.mg-hover-line5-color {
    fill: #5c5c5c;
}

.mg-line-legend text {
    font-size: 0.9rem;
    font-weight: 300;
    stroke: none;
}

.mg-line1-legend-color {
    color: #4040e8;
    fill: #4040e8;
}

.mg-line2-legend-color {
    color: #05b378;
    fill: #05b378;
}

.mg-line3-legend-color {
    color: #db4437;
    fill: #db4437;
}

.mg-line4-legend-color {
    color: #f8b128;
    fill: #f8b128;
}

.mg-line5-legend-color {
    color: #5c5c5c;
    fill: #5c5c5c;
}

.mg-main-area-solid svg .mg-main-area {
    fill: #ccccff;
    opacity: 1;
}

.mg-markers line {
    opacity: 1;
    shape-rendering: auto;
    stroke: #b3b2b2;
    stroke-width: 1px;
}

.mg-markers text {
    fill: black;
    font-size: 0.8rem;
    opacity: 0.6;
}

.mg-missing-text {
    opacity: 0.9;
}

.mg-missing-background {
    stroke: blue;
    fill: none;
    stroke-dasharray: 10,5;
    stroke-opacity: 0.05;
    stroke-width: 2;
}

.mg-missing .mg-main-line {
    opacity: 0.1;
}

.mg-missing .mg-main-area {
    opacity: 0.03;
}

path.mg-main-area {
    opacity: 0.2;
    stroke: none;
}

path.mg-confidence-band {
    fill: #ccc;
    opacity: 0.4;
    stroke: none;
}

path.mg-main-line {
    fill: none;
    opacity: 0.8;
    stroke-width: 1.1px;
}

.mg-points circle {
    fill-opacity: 0.4;
    stroke-opacity: 1;
}

circle.mg-points-mono {
    fill: #0000ff;
    stroke: #0000ff;
}

/* a selected point in a scatterplot */
.mg-points circle.selected {
    fill-opacity: 1;
    stroke-opacity: 1;
}

.mg-voronoi path {
    fill: none;
    pointer-events: all;
    stroke: none;
    stroke-opacity: 0.1;
}

.mg-x-rug-mono,
.mg-y-rug-mono {
    stroke: black;
}

.mg-x-axis line,
.mg-y-axis line {
    opacity: 1;
    shape-rendering: auto;
    stroke: #b3b2b2;
    stroke-width: 0.8px;
}

.mg-x-axis text,
.mg-y-axis text,
.mg-histogram .axis text {
    fill: black;
    font-size: 0.9rem;
    opacity: 0.95;
}

/* ---------------  Changes for small multiples, large axis names             -------------------*/
.mg-x-axis .label,
.mg-y-axis .label,
.mg-axis .label {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Open Sans Condensed', sans-serif;
}

.mg-x-axis-small text,
.mg-y-axis-small text,
.mg-active-datapoint-small {
    font-size: 0.8rem;
}

.mg-x-axis-small .label,
.mg-y-axis-small .label {
    font-size: 0.9rem;
}

.mg-european-hours {
}

.mg-year-marker text {
    fill: black;
    font-size: 0.7rem;
    opacity: 0.8;
}

.mg-year-marker line {
    opacity: 1;
    shape-rendering: auto;
    stroke: #b3b2b2;
    stroke-width: 1px;
}

.mg-year-marker-small text {
    font-size: 0.8rem;
}