/**
 * Global styles for Visual Vocabulary Templates
 */

@import url('https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-fonts@^3.0.4');

.section-heading {
    background-color: #00757f;
    color: #fff;
    font-family: Metric;
    font-weight: 600;
    font-size: 20px;
    padding: 8px 8px 5px;
}

figure {
    width: fit-content;
}

.button-holder {
    margin-bottom: 50px;
}

svg {
    font-size: 0;
    fill: transparent;
}
.axis {
    font-size: inherit !important;
}

/* .overall text styles on axis*/
.ft-webgraphic-s .axis text,
.ft-webgraphic-m .axis text,
.ft-webgraphic-m-default .axis text,
.ft-webgraphic-l .axis text {
    font-family: metric, MetricWeb;
    fill: #66605c;
}

.ft-socialgraphic .axis text {
    fill: #8e9095;
}

.ft-videographic .axis text {
    fill: #8e9095;
}

.ft-webgraphic-s .highlighted-label,
.ft-webgraphic-m .highlighted-label,
.ft-webgraphic-m-default .highlighted-label,
.ft-webgraphic-l .highlighted-label {
    fill: #000000;
}

.ft-socialgraphic .highlighted-label,
.ft-videographic .highlighted-label {
    fill: #ffffff;
    opacity: 1;
}
.ft-webgraphic-s .axis text,
.ft-webgraphic-s .highlighted-label {
    font-size: 14px;
}
.ft-webgraphic-m .axis text,
.ft-webgraphic-m .highlighted-label {
    font-size: 16px;
}
.ft-webgraphic-m-default .axis text,
.ft-webgraphic-m-default .highlighted-label {
    font-size: 20px;
}

.ft-webgraphic-l .axis text,
.ft-webgraphic-l .highlighted-label {
    font-size: 18px;
}

.ft-printgraphic .axis text,
.ft-printgraphic .highlighted-label {
    font-family: metric;
    font-size: 9.6px;
    fill: #000000;
}
.ft-socialgraphic .axis text,
.ft-socialgraphic .highlighted-label {
    font-family: metric;
    font-size: 20px;
}
.ft-videographic .axis text,
.ft-videographic .highlighted-label {
    font-family: metric;
    font-size: 48px;
}

/* .tick text on yAxis*/
.ft-webgraphic-s .yAxis text,
.ft-webgraphic-m .yAxis text,
.ft-webgraphic-m-default .yAxis text,
.ft-webgraphic-l .yAxis text {
    fill: #66605c;
    text-anchor: end;
}
.ft-printgraphic .yAxis text {
    text-anchor: end;
}
.ft-socialgraphic .yAxis text,
.ft-videographic .yAxis text {
    fill: #8e9095;
    text-anchor: end;
}

/* .tick line styles on yAxis*/
.ft-webgraphic-s .yAxis line,
.ft-webgraphic-m .yAxis line,
.ft-webgraphic-m-default .yAxis line,
.ft-webgraphic-l .yAxis line {
    stroke: #e6d9ce;
    stroke-width: 1px;
}
.ft-printgraphic .yAxis line {
    stroke: #000000;
    stroke-width: 0.3px;
}
.ft-socialgraphic .yAxis line {
    stroke: #47494d;
    stroke-width: 1px;
}
.ft-videographic .yAxis line {
    stroke: #47494d;
    stroke-width: 3px;
}
/* Makes domian invivible on yAxis*/
.ft-webgraphic-s .domain,
.ft-webgraphic-m .domain,
.ft-webgraphic-m-default .domain,
.ft-webgraphic-l .domain {
    stroke-width: 0px;
}
.ft-printgraphic .domain {
    stroke-width: 0px;
}
.ft-socialgraphic .domain {
    stroke-width: 0px;
}
.ft-videographic .domain {
    stroke-width: 0px;
}

/* reinstate domain for circle timelines*/

.ft-webgraphic-s .timelineHolder .baseline line,
.ft-webgraphic-m .timelineHolder .baseline line,
.ft-webgraphic-m-default .timelineHolder .baseline line,
.ft-webgraphic-l .timelineHolder .baseline line {
    stroke: #000000;
    stroke-width: 1px;
    stroke-dasharray: 1, 0;
    stroke-opacity: 0.4;
}

.ft-webgraphic-s .timelineHolder .domain,
.ft-webgraphic-m .timelineHolder .domain,
.ft-webgraphic-m-default .timelineHolder .domain,
.ft-webgraphic-l .timelineHolder .domain,
.ft-printgraphic .timelineHolder .domain {
    stroke-width: 1px;
    stroke-opacity: 0.4;
}

.ft-socialgraphic .timelineHolder .domain,
.ft-videographic .timelineHolder .domain {
    stroke: #ffffff;
}

.ft-socialgraphic .timelineHolder .domain {
    stroke-width: 1px;
}

.ft-videographic .timelineHolder .domain {
    stroke-width: 4px;
}
/* .tick text on yAxis*/
.ft-webgraphic-s .xAxis text,
.ft-webgraphic-m .xAxis text,
.ft-webgraphic-m-default .xAxis text,
.ft-webgraphic-l .xAxis text {
    fill: #66605c;
    text-anchor: middle;
}
.ft-printgraphic .xAxis text {
    text-anchor: middle;
}
.ft-socialgraphic .xAxis text,
.ft-videographic .xAxis text {
    fill: #8e9095;
    text-anchor: middle;
}

.ft-webgraphic-s .xAxis line,
.ft-webgraphic-m .xAxis line,
.ft-webgraphic-m-default .xAxis line,
.ft-webgraphic-l .xAxis line {
    stroke: #e6d9ce;
    stroke-width: 1px;
}
.ft-printgraphic .xAxis line {
    stroke: #000000;
    stroke-width: 0.3px;
}
.ft-socialgraphic .xAxis line {
    stroke: #47494d;
    stroke-width: 1px;
}
.ft-videographic .xAxis line {
    stroke: #47494d;
    stroke-width: 3px;
}
/* Style for the highlight or base line on yAxis*/
.ft-webgraphic-s .baseline line,
.ft-webgraphic-m .baseline line,
.ft-webgraphic-m-default .baseline line,
.ft-webgraphic-l .baseline line {
    stroke: #cec6b9;
    stroke-width: 1px;
    stroke-dasharray: 1, 0;
}
.ft-printgraphic .baseline line {
    stroke: #000000;
    stroke-width: 0.6px;
}
.ft-printgraphic .xAxis.baseline line {
    stroke: #000000;
    stroke-width: 0.3px;
}
.ft-socialgraphic .baseline line {
    stroke: #8e9095;
    stroke-width: 1px;
}
.ft-videographic .baseline line {
    stroke: #8e9095;
    stroke-width: 3px;
}
/* Styles for lines on chart*/
.ft-webgraphic-s .lines,
.ft-webgraphic-m .lines,
.ft-webgraphic-m-default .lines,
.ft-webgraphic-l .lines {
    stroke-linecap: square;
    stroke-linejoin: round;
    stroke-width: 3px;
    fill: none;
}
.ft-printgraphic .lines {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    fill: none;
}
.ft-socialgraphic .lines {
    stroke-linecap: square;
    stroke-linejoin: round;
    stroke-width: 4px;
    fill: none;
}
.ft-videographic .lines {
    stroke-linecap: square;
    stroke-linejoin: round;
    stroke-width: 10px;
    fill: none;
}

/* annotation styling*/

.ft-webgraphic-s .annotations-holder line,
.ft-webgraphic-m .annotations-holder line,
.ft-webgraphic-m-default .annotations-holder line,
.ft-webgraphic-l .annotations-holder line {
    stroke: #66605c;
    stroke-width: 1px;
}

.ft-printgraphic .annotations-holder line {
    stroke: #000000;
    stroke-width: 0.5px;
}
.ft-socialgraphic .annotations-holder line {
    stroke: #8e9095;
    stroke-width: 1px;
}
.ft-videographic .annotations-holder line {
    stroke: #8e9095;
    stroke-width: 3px;
}

.ft-webgraphic-s .annotations-holder path,
.ft-webgraphic-m .annotations-holder path,
.ft-webgraphic-m-default .annotations-holder path,
.ft-webgraphic-l .annotations-holder path {
    stroke: #66605c;
    stroke-width: 1px;
}

.ft-printgraphic .annotations-holder path {
    stroke: #000000;
    stroke-width: 0.5px;
}
.ft-socialgraphic .annotations-holder path {
    stroke: #8e9095;
    stroke-width: 1px;
}
.ft-videographic .annotations-holder path {
    stroke: #8e9095;
    stroke-width: 3px;
}

.ft-webgraphic-s .annotations-holder text {
    font-size: 14px;
}

.ft-webgraphic-m .annotations-holder text {
    font-size: 16px;
}

.ft-webgraphic-m-default .annotations-holder text {
    font-size: 20px;
}

.ft-webgraphic-l .annotations-holder text {
    font-size: 18px;
}

.ft-webgraphic-s .annotations-holder text,
.ft-webgraphic-m .annotations-holder text,
.ft-webgraphic-m-default .annotations-holder text,
.ft-webgraphic-l .annotations-holder text {
    fill: #66605c;
}

.ft-printgraphic .annotations-holder text {
    font-size: 9.6px;
    fill: #000000;
}

.ft-socialgraphic .annotations-holder text {
    font-size: 24px;
    fill: #ffffff;
}

.ft-videographic .annotations-holder text {
    font-size: 48px;
    fill: #ffffff;
}

/* .overall text styles on axis*/
.ft-webgraphic-s .highlights,
.ft-webgraphic-m .highlights,
.ft-webgraphic-m-default .highlights,
.ft-webgraphic-l .highlights {
    fill: #fce6d6;
}

.ft-printgraphic .highlights {
    fill: #95bfc5;
    opacity: 0.3;
}
.ft-socialgraphic .highlights {
    fill: #ffffff;
    opacity: 0.2;
}

.ft-videographic .highlights {
    fill: #ffffff;
    opacity: 0.2;
}

.ft-webgraphic-s .timeline-label,
.ft-webgraphic-m .timeline-label,
.ft-webgraphic-m-default .timeline-label,
.ft-webgraphic-l .timeline-label {
    font-family: metric, MetricWeb;
    fill: #000000;
}

/* legend */
.ft-webgraphic-s .legend,
.ft-webgraphic-m .legend,
.ft-webgraphic-m-default .legend,
.ft-webgraphic-l .legend {
    font-family: metric, MetricWeb;
    fill: #66605c;
}

.ft-webgraphic-s .timeline-label,
.ft-webgraphic-s .legend {
    font-size: 14px;
}

.ft-webgraphic-m .timeline-label,
.ft-webgraphic-m .legend {
    font-size: 16px;
}

.ft-webgraphic-m-default .timeline-label,
.ft-webgraphic-m-default .legend {
    font-size: 20px;
}

.ft-webgraphic-l .timeline-label,
.ft-webgraphic-l .legend {
    font-size: 18px;
}

.ft-printgraphic .timeline-label,
.ft-printgraphic .legend {
    font-family: metric;
    font-size: 9.6px;
    fill: #000000;
}

.ft-socialgraphic .timeline-label,
.ft-socialgraphic .legend text {
    font-family: metric;
    fill: #8e9095;
    font-size: 20px;
}

.ft-videographic .timeline-label,
.ft-videographic .legend text {
    font-family: metric;
    fill: #8e9095;
    font-size: 48px;
}

svg text {
    font-feature-settings: 'tnum', 1;
    -webkit-font-feature-settings: 'tnum';
    -moz-font-feature-settings: 'tnum';
}

.saveable button {
    display: block;
}

ul {
    line-height: 24px;
}

.button {
    border-radius: 10px;
    background-color: #00757f;
    color: #fff;
    font-family: Metric;
    font-weight: 600;
    font-size: 20px;
    height: 25px;
    margin-top: 2px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-width: 0px;
    padding-top: 3px;
    cursor: pointer;
}