/* ===============================
** Heartbeat
================================== */

svg.heartbeat {
    background-color: transparent;
    margin: 0px;
    padding: 0px;
    max-height:100%;
    display: block;
}

rect.heartbeat-complete-bar {
    fill: var(--col-main-n);
    stroke-width:0;
}
rect.heartbeat-complete-spacer {
    fill: var(--col-main-d1);
    stroke-width:0;
}

rect.heartbeat-started-bar {
    fill: #90CAF9;
    stroke-width:0;
}
rect.heartbeat-started-spacer {
    fill: #42A5F5;
    stroke-width:0;
}

rect.heartbeat-failed-bar {
    fill: var(--col-light-red);
    stroke-width:0;
}
rect.heartbeat-failed-spacer {
    fill: var(--col-red);
    stroke-width:0;
}


p.heartbeat {
    font-size:var(--font-size-xs);
    padding: 0px 10px 0px 10px;
    margin: 0px;
}

td.heartbeat {
    border-bottom: 1px solid white;
    background-color: var(--col-greys-l2);
    padding:0px;
    margin:0px;
    height: 40px;
    }

td.heartbeat-heading {
    border-top: 10px solid white;
    padding:0px;
    margin:0px;
    height: 22px;
    }


/* ===============================
** Over / under priced
================================== */

.chart-line-dark {
    stroke:rgb(80,80,80);
    stroke-width:1;
}

.chart-line-median {
    stroke:rgb(80,80,80);
    stroke-width:2;
}

.chart-line-underpriced{
    stroke:rgb(174, 214, 241);
    stroke-width:8;
}
.font-underpriced{
    font-size:10px;
    font-weight: 800;
    fill: rgb(40, 116, 166);
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
}

.chart-line-overpriced{
    stroke:rgb(241, 148, 138);
    stroke-width:8;
}
.font-overpriced{
    font-size:10px;
    font-weight: 800;
    fill: rgb(231, 76, 60);
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
}

.self-bullet {fill: rgb(0,0,0);}
.self-font {
    font-size:10px;
    font-weight: 800;
    fill: rgb(0,0,0);
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
}



.bm-bullet {fill: rgb(80,80,80);}
.bm-font {
    font-size:10px;
    font-weight: 200;
    fill: rgb(40,40,40);
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
}

.middle{text-anchor:middle;}
.end{text-anchor:end;}
.start{text-anchor:start;}
.hanging{alignment-baseline:hanging;}
.vertical-middle{alignment-baseline:middle;}
.baseline{alignment-baseline:baseline;}


/* ===============================
** General chart objects
================================== */

/*
text-alignment: Left/right, top/bottom
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
*/
.chart-explanation-font {
    font-size:var(--font-size-m);
    font-weight: 600;
    fill: black;
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.0em;
    text-anchor:start; /* start, middle, end */
    alignment-baseline:hanging; /* hanging, middle, baseline */
  }


/* ===============================
** Barchart
================================== */


.chart-debugging {
    stroke:rgb(120,120,120);
    stroke-width:0.0;
    fill:transparent;
}

.chart-xaxis {
    stroke-width:1.5;
    stroke: lightgrey;
    fill:transparent;
}

.plot-area-dbugging{
    fill:transparent;
    stroke-width:0;
    stroke:rgb(0,0,0)
}

.bar-chart-colored{
    fill: var(--col-brand);
    fill-opacity: 0.3;
    stroke-width:1.8;
    stroke: var(--col-brand);
}
.bar-chart-grey{
    fill: var(--col-greys-l2);
    fill-opacity: 0.8;
    stroke-width:0.5;
    stroke: lightgrey;
}

.bar-chart-red{
    fill: var(--col-greys-n);
    fill-opacity: 0.8;
    stroke-width:0.5;
    stroke: lightgrey;
}


.fake-bar-for-hover-text{
    fill: white;
    fill-opacity: 0;
    stroke-width:0;
    stroke: transparent;
}

.chart-line-colored {
    stroke: var(--col-brand);
    stroke-width: 2.2;
    fill:var(--col-brand);
}

.chart-line-grey {
    stroke: rgb(210, 210, 210);
    stroke-width: 1.5;
    fill: black;
}

.chart-line-selected {
    stroke: rgb(0, 0, 0);
    stroke-width: 2.2;
    opacity: 0;
}

.olav-img {
    
}

.grey-bullet {
    fill: transparent;
    cursor: pointer;  
    stroke: "black";
    stroke-width: 0;
}

.grey-bullet:hover {
    fill: rgb(50,50,50);
}



.chart-font {
    font-size:var(--font-size-xs);
    font-weight: 100;
    fill: var(--col-main-d1);
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
    text-anchor:middle;
  }

.bar-chart-support-text {
    font-size:9px;
    font-weight: 100;
    fill: rgb(70,70,70);
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
}

.bar-chart-auto-or-maually-set-text {
    font-size:8px;
    font-weight: 100;
    fill: white;
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
}


.chart-soft-text {
    fill: var(--col-greys-n);
}

.bar-chart-draggable-circle {
    stroke: black;
    stroke-width: 0.1;
    fill: black;
}

.bar-chart-draggable-circle-transparent {
    stroke: black;
    stroke-width: 0.1;
    fill: green;
    fill-opacity: 0.01;
    cursor: pointer;  
}

.bar-chart-difference-font {
    font-size:12px;
    font-weight: 700;
    fill: var(--col-greys-d2);
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
    text-anchor:middle;
  }

.chart-y-axis-ticks {
    font-size:9px;
    font-weight: 100;
    fill: grey;
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
    text-anchor:end;
    alignment-baseline:middle;
  }

.chart-y-diff-text {
    font-size:12px;
    font-weight: 700;
    fill: transparent;
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
    text-anchor:end;
    alignment-baseline:middle;
  }

.bar-chart-difference {    
    fill:none;
    stroke:black;
    stroke-width:1;
}



/* ===============================
** Line chart: Price index development
================================== */

.chart-line-price-index-plot{
    fill: var(--col-greys-l3);
    stroke-width:0;
    stroke:rgb(0,0,0)
}

.chart-line-price-index-mid-line{
    stroke-width:1;
    stroke: var(--col-greys-l2);
    stroke-dasharray: 9,5; 
}

.chart-line-price-index-tick{
    stroke-width:1;
    stroke: var(--col-greys-l1);
}

.chart-line-zero-line {
    stroke-width:1.8;
    stroke: var(--col-greys-d1);
}

.chart-line-min-max-limits {
    stroke-width:0.8;
    stroke-dasharray: 5 3;
    stroke: var(--col-greys-d1);
}


.chart-y-axis-tick{
    stroke-width:0.5;
    stroke: var(--col-greys-l2);
}

.chart-diff-lines {
    stroke-width:1.2;
    stroke: transparent;
    stroke-linecap:round;
}


g.strong-on-hover {
  pointer-events: bounding-box;
  opacity: 0.3;
}
g.strong-on-hover:hover {
    opacity: 1;
}



/* ===============================
** XXX
================================== */

.chart-campaign-daterange-line {
    stroke: var(--col-brand);
    stroke-width:30;
}

.chart-campaign-daterange-line-active {
    stroke: var(--col-brand);
    stroke-width:30;
}

.chart-campaign-daterange-line-inactive {
    stroke: var(--col-greys-n);
    stroke-width:30;
}

.chart-campaign-text {
    font-size: var(--font-size-s);
    font-weight: 100;
    fill: var(--col-greys-d1);
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.06em;
}

.chart-campaign-text-active {
    font-weight: 700;
    fill: var(--col-brand);
}