energy-visualization-sankey 1.0.4 → 1.0.6

package/dist/sankey.css

@@ -0,0 +1,667 @@
+/* Energy Visualization Sankey - Combined Styles */
+
+/* Import core Sankey diagram styles */
+
+/* US Energy Sankey - Core Styles */
+
+/* Typography */
+
+text, tspan {
+    font-family: Fieldwork, Futura, sans-serif;
+    font-size: 16px;
+}
+
+/* Flow Styles */
+
+.flow {
+    fill: none;
+    stroke-opacity: 0.8;
+}
+
+.flow:hover {
+    stroke-opacity: 0.9;
+}
+
+.flow.heat {
+    stroke: #98002e;
+}
+
+.flow.elec, .flow.waste.heat {
+    stroke: #e49942;
+}
+
+.flow.waste {
+    stroke: #e49942;
+    opacity: 0.4 !important;
+}
+
+.flow.solar {
+    stroke: #fed530;
+}
+
+.flow.nuclear {
+    stroke: #ca0813;
+}
+
+.flow.hydro {
+    stroke: #0b24fb;
+}
+
+.flow.wind {
+    stroke: #901d8f;
+}
+
+.flow.geo {
+    stroke: #905a1c;
+}
+
+.flow.gas {
+    stroke: #4cabf2;
+}
+
+.flow.coal {
+    stroke: #000000;
+}
+
+.flow.bio {
+    stroke: #46be48;
+}
+
+.flow.petro {
+    stroke: #095f0b;
+}
+
+/* Box Styles */
+
+.box.sector {
+    fill: #cccccc;
+}
+
+.box.solar {
+    fill: #fed530;
+}
+
+.box.nuclear {
+    fill: #ca0813;
+}
+
+.box.hydro {
+    fill: #0b24fb;
+}
+
+.box.wind {
+    fill: #901d8f;
+}
+
+.box.geo {
+    fill: #905a1c;
+}
+
+.box.gas {
+    fill: #4cabf2;
+}
+
+.box.coal {
+    fill: #000000;
+}
+
+.box.bio {
+    fill: #46be48;
+}
+
+.box.petro {
+    fill: #095f0b;
+}
+
+/* Other Elements */
+
+.maxline {
+    stroke: #cccccc;
+    stroke-width: 1px;
+}
+
+.bkgd {
+    fill: #000000;
+}
+
+/* Title Container - Responsive Header Layout */
+
+.title_container {
+    border-top: 2px solid #000000;
+    border-bottom: 1px solid #000000;
+    position: relative;
+    min-height: 58px;
+    padding: 8px 16px;
+    background: white;
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 20px;
+    flex-wrap: nowrap;
+}
+
+/* Logo Section */
+
+.header-logo {
+    flex: 0 0 auto;
+    min-width: 60px;
+}
+
+.header-logo img {
+    max-height: 45px;
+    height: auto;
+    display: block;
+}
+
+/* Main Title Section - Contains title and energy usage */
+
+.header-main {
+    flex: 1;
+    text-align: center;
+    min-width: 160px;
+    position: relative;
+}
+
+.header-title-section {
+    position: relative;
+    min-height: 45px;
+}
+
+.main-title {
+    font-family: Fieldwork, Futura, sans-serif;
+    font-size: 1em;
+    font-weight: normal;
+    color: black;
+    margin: 0;
+    line-height: 1.2;
+    margin-bottom: 2px;
+}
+
+.energy-usage-overlay {
+    position: absolute;
+    top: 22px;
+    left: 0;
+    width: 100%;
+    height: 25px;
+    pointer-events: none;
+}
+
+/* Year Section - Separate section for year display */
+
+.header-year {
+    flex: 1;
+    min-width: 80px;
+    height: 45px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.year-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+/* Info Section */
+
+.header-info {
+    flex: 1.9;
+    min-width: 160px;
+    text-align: left;
+}
+
+.subtitle {
+    font-family: Fieldwork-HumThin, Futura, sans-serif;
+    font-size: 1em;
+    color: #000000;
+    font-weight: bolder;
+    line-height: 1.2;
+    margin-bottom: 2px;
+}
+
+.attribution {
+    font-family: Fieldwork-HumThin, Futura, sans-serif;
+    font-size: 1em;
+    color: #000000;
+    font-weight: normal;
+    line-height: 1.2;
+}
+
+/* Affiliation Section */
+
+.header-affiliation {
+    flex: 1.7;
+    text-align: center;
+    min-width: 140px;
+}
+
+.affiliation-text {
+    font-family: Fieldwork-HumThin, Futura, sans-serif;
+    font-size: 1em;
+    color: #000000;
+    font-weight: normal;
+    line-height: 1.2;
+}
+
+/* SVG Overlay Styles */
+
+.energy-svg-overlay,
+.year-svg-overlay {
+    z-index: 10;
+}
+
+.energy-svg-overlay text,
+.year-svg-overlay text {
+    font-family: Fieldwork, Futura, sans-serif;
+    fill: black;
+}
+
+/* Legacy SVG styles for compatibility */
+
+.title_container svg {
+    font-size: 15px;
+}
+
+.title_container .title {
+    font-size: 1em;
+    fill: black;
+}
+
+.title_container .title .unit {
+    font-size: .9em;
+    font-weight: bold;
+}
+
+.title_container .title .year {
+    font-size: 3.1em;
+    font-weight: bold;
+    clear: left;
+    letter-spacing: .05em;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Mobile Responsive Design */
+
+@media (max-width: 1024px) {
+    .header-content {
+        gap: 15px;
+    }
+
+    .main-title {
+        font-size: 0.9em;
+    }
+
+    .header-logo {
+        min-width: 50px;
+    }
+
+    .header-main,
+    .header-year,
+    .header-info,
+    .header-affiliation {
+        flex: 1;
+        min-width: 120px;
+    }
+
+    .year-svg-overlay text {
+        font-size: 2.8em !important;
+    }
+
+    .subtitle, .attribution, .affiliation-text {
+        font-size: 0.9em;
+    }
+}
+
+@media (max-width: 768px) {
+    .title_container {
+        padding: 6px 12px;
+    }
+
+    .header-content {
+        gap: 10px;
+    }
+
+    .header-logo {
+        min-width: 40px;
+    }
+
+    .header-logo img {
+        max-height: 35px;
+    }
+
+    .main-title {
+        font-size: 0.8em;
+    }
+
+    .header-main,
+    .header-year,
+    .header-info,
+    .header-affiliation {
+        flex: 1;
+        min-width: 100px;
+    }
+
+    .header-year {
+        height: 40px;
+    }
+
+    .year-svg-overlay text {
+        font-size: 2.5em !important;
+    }
+
+    .energy-svg-overlay text {
+        font-size: 0.8em !important;
+    }
+
+    .subtitle, .attribution, .affiliation-text {
+        font-size: 0.8em;
+    }
+}
+
+@media (max-width: 600px) {
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .header-main {
+        order: 1;
+        flex: 1 1 100%;
+        margin-bottom: 8px;
+    }
+
+    .header-year {
+        order: 2;
+        flex: 1 1 100%;
+        margin-bottom: 8px;
+        justify-content: center;
+        height: 50px;
+    }
+
+    .header-logo {
+        order: 3;
+        flex: 1 1 50%;
+    }
+
+    .header-info {
+        order: 4;
+        flex: 1 1 100%;
+        margin-bottom: 8px;
+    }
+
+    .header-affiliation {
+        order: 5;
+        flex: 1 1 50%;
+        text-align: left;
+    }
+
+    .main-title {
+        text-align: center;
+        margin-bottom: 5px;
+    }
+
+    .energy-usage-overlay {
+        position: relative;
+        top: 0;
+        text-align: center;
+        margin-top: 5px;
+    }
+}
+
+/* Totals */
+
+.total.sector {
+    font-size: 0.7em;
+    font-weight: bold;
+}
+
+.total.waste-level {
+    fill: #e49942;
+    opacity: 0.4;
+}
+
+/* Visibility */
+
+.hidden {
+    visibility: hidden;
+}
+
+/* Tooltip */
+
+.tooltip {
+    color: #000000;
+    position: absolute;
+    text-align: justify;
+    width: auto;
+    padding: 5px;
+    background: #efefef;
+    border: 1px solid black;
+    pointer-events: none;
+    z-index: 3;
+}
+
+.fuel_value {
+    text-align: center;
+    vertical-align: middle;
+}
+
+/* Waste Heat Visibility Control */
+
+.waste-heat-hidden .flow.waste {
+    display: none !important;
+}
+
+.waste-heat-hidden .total.waste-level {
+    display: none !important;
+}
+
+/* Smooth transition for waste heat toggle (optional) */
+
+.flow.waste,
+.total.waste-level {
+    transition: opacity 0.3s ease;
+}
+
+/* Import UI controls styles */
+
+/* US Energy Sankey - Controls Styles */
+
+/* Range Slider */
+
+.range-slider {
+    width: 100%;
+    margin-top: 5px;
+    position: relative;
+    overflow: visible;
+    padding-top: 40px;
+}
+
+.range-slider__range {
+    -webkit-appearance: none;
+    width: 100%;
+    border-radius: 5px;
+    outline: none;
+    padding: 0;
+    margin: 0;
+}
+
+.range-slider__range:first-child {
+    background: #d7dcdf;
+}
+
+.range-slider__range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
+    cursor: pointer;
+    transition: background 0.15s ease-in-out;
+}
+
+.range-slider__range::-moz-range-thumb {
+    width: 11px;
+    height: 11px;
+    border: 0;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
+    cursor: pointer;
+    transition: background 0.15s ease-in-out;
+}
+
+/* Dynamic Year Display */
+
+#dynamicYear {
+    color: black;
+    position: absolute;
+    height: 25px;
+    width: 50px;
+    text-align: center;
+    border: 1px solid black;
+    border-radius: 3px;
+    display: block;
+    font-size: 16px;
+    top: 40%;
+    /*bottom: 100%;*/
+    background: white;
+    padding: 3px 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Add downward arrow pointing to slider */
+
+#dynamicYear::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -4px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 6px solid black;
+}
+
+/* Play/Pause Button */
+
+#play-button {
+    border-radius: 0;
+    display: block;
+    height: 0;
+}
+
+#play-button:hover {
+    background: transparent !important;
+}
+
+#play-button.playbutton {
+    outline: 0;
+    background: transparent;
+    border-color: transparent transparent transparent #202020;
+    transition: 100ms all ease;
+    cursor: pointer;
+    border-style: solid;
+    border-width: 13px 0 13px 20px;
+}
+
+#play-button.playpaused {
+    outline: 0;
+    background: transparent;
+    height: 26px;
+    border-color: transparent transparent transparent #202020;
+    transition: 100ms all ease;
+    cursor: pointer;
+    border-style: double;
+    border-width: 0px 0 0px 20px;
+}
+
+#play-button.playbutton:hover {
+    border-color: transparent transparent transparent #404040;
+}
+
+/* Waste Heat Toggle Switch */
+
+.switch_box {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    min-width: 200px;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+}
+
+.box_1 {
+    background: #ffffff;
+}
+
+input[type="checkbox"].switch_1 {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 3.5em;
+    height: 1.5em;
+    background: black;
+    border-radius: 3em;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    -webkit-transition: all .2s ease-in-out;
+    transition: all .2s ease-in-out;
+}
+
+input[type="checkbox"].switch_1:checked {
+    background: black;
+}
+
+input[type="checkbox"].switch_1:after {
+    position: absolute;
+    content: "";
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 50%;
+    background: #fff;
+    -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
+    box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
+    -webkit-transform: scale(.7);
+    transform: scale(.7);
+    left: 0;
+    -webkit-transition: all .2s ease-in-out;
+    transition: all .2s ease-in-out;
+}
+
+input[type="checkbox"].switch_1:checked:after {
+    left: calc(100% - 1.5em);
+}
+
+/* Milestone Tick Markers */
+
+#testTick .tick text {
+    cursor: pointer;
+}
+
+#testTick .tick text:hover {
+    color: grey;
+    transition: color 250ms;
+}
+
+/*# sourceMappingURL=sankey.css.map */

package/dist/sankey.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.css","sankey.css","controls.css"],"names":[],"mappings":"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","file":"sankey.css","sourcesContent":["/* Energy Visualization Sankey - Combined Styles */\n\n/* Import core Sankey diagram styles */\n@import './sankey.css';\n\n/* Import UI controls styles */\n@import './controls.css';\n","/* US Energy Sankey - Core Styles */\n\n/* Typography */\ntext, tspan {\n    font-family: Fieldwork, Futura, sans-serif;\n    font-size: 16px;\n}\n\n/* Flow Styles */\n.flow {\n    fill: none;\n    stroke-opacity: 0.8;\n}\n\n.flow:hover {\n    stroke-opacity: 0.9;\n}\n\n.flow.heat {\n    stroke: #98002e;\n}\n\n.flow.elec, .flow.waste.heat {\n    stroke: #e49942;\n}\n\n.flow.waste {\n    stroke: #e49942;\n    opacity: 0.4 !important;\n}\n\n.flow.solar {\n    stroke: #fed530;\n}\n\n.flow.nuclear {\n    stroke: #ca0813;\n}\n\n.flow.hydro {\n    stroke: #0b24fb;\n}\n\n.flow.wind {\n    stroke: #901d8f;\n}\n\n.flow.geo {\n    stroke: #905a1c;\n}\n\n.flow.gas {\n    stroke: #4cabf2;\n}\n\n.flow.coal {\n    stroke: #000000;\n}\n\n.flow.bio {\n    stroke: #46be48;\n}\n\n.flow.petro {\n    stroke: #095f0b;\n}\n\n/* Box Styles */\n.box.sector {\n    fill: #cccccc;\n}\n\n.box.solar {\n    fill: #fed530;\n}\n\n.box.nuclear {\n    fill: #ca0813;\n}\n\n.box.hydro {\n    fill: #0b24fb;\n}\n\n.box.wind {\n    fill: #901d8f;\n}\n\n.box.geo {\n    fill: #905a1c;\n}\n\n.box.gas {\n    fill: #4cabf2;\n}\n\n.box.coal {\n    fill: #000000;\n}\n\n.box.bio {\n    fill: #46be48;\n}\n\n.box.petro {\n    fill: #095f0b;\n}\n\n/* Other Elements */\n.maxline {\n    stroke: #cccccc;\n    stroke-width: 1px;\n}\n\n.bkgd {\n    fill: #000000;\n}\n\n/* Title Container - Responsive Header Layout */\n.title_container {\n    border-top: 2px solid #000000;\n    border-bottom: 1px solid #000000;\n    position: relative;\n    min-height: 58px;\n    padding: 8px 16px;\n    background: white;\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 20px;\n    flex-wrap: nowrap;\n}\n\n/* Logo Section */\n.header-logo {\n    flex: 0 0 auto;\n    min-width: 60px;\n}\n\n.header-logo img {\n    max-height: 45px;\n    height: auto;\n    display: block;\n}\n\n/* Main Title Section - Contains title and energy usage */\n.header-main {\n    flex: 1;\n    text-align: center;\n    min-width: 160px;\n    position: relative;\n}\n\n.header-title-section {\n    position: relative;\n    min-height: 45px;\n}\n\n.main-title {\n    font-family: Fieldwork, Futura, sans-serif;\n    font-size: 1em;\n    font-weight: normal;\n    color: black;\n    margin: 0;\n    line-height: 1.2;\n    margin-bottom: 2px;\n}\n\n.energy-usage-overlay {\n    position: absolute;\n    top: 22px;\n    left: 0;\n    width: 100%;\n    height: 25px;\n    pointer-events: none;\n}\n\n/* Year Section - Separate section for year display */\n.header-year {\n    flex: 1;\n    min-width: 80px;\n    height: 45px;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.year-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n}\n\n/* Info Section */\n.header-info {\n    flex: 1.9;\n    min-width: 160px;\n    text-align: left;\n}\n\n.subtitle {\n    font-family: Fieldwork-HumThin, Futura, sans-serif;\n    font-size: 1em;\n    color: #000000;\n    font-weight: bolder;\n    line-height: 1.2;\n    margin-bottom: 2px;\n}\n\n.attribution {\n    font-family: Fieldwork-HumThin, Futura, sans-serif;\n    font-size: 1em;\n    color: #000000;\n    font-weight: normal;\n    line-height: 1.2;\n}\n\n/* Affiliation Section */\n.header-affiliation {\n    flex: 1.7;\n    text-align: center;\n    min-width: 140px;\n}\n\n.affiliation-text {\n    font-family: Fieldwork-HumThin, Futura, sans-serif;\n    font-size: 1em;\n    color: #000000;\n    font-weight: normal;\n    line-height: 1.2;\n}\n\n/* SVG Overlay Styles */\n.energy-svg-overlay,\n.year-svg-overlay {\n    z-index: 10;\n}\n\n.energy-svg-overlay text,\n.year-svg-overlay text {\n    font-family: Fieldwork, Futura, sans-serif;\n    fill: black;\n}\n\n/* Legacy SVG styles for compatibility */\n.title_container svg {\n    font-size: 15px;\n}\n\n.title_container .title {\n    font-size: 1em;\n    fill: black;\n}\n\n.title_container .title .unit {\n    font-size: .9em;\n    font-weight: bold;\n}\n\n.title_container .title .year {\n    font-size: 3.1em;\n    font-weight: bold;\n    clear: left;\n    letter-spacing: .05em;\n    font-variant-numeric: tabular-nums;\n}\n\n/* Mobile Responsive Design */\n@media (max-width: 1024px) {\n    .header-content {\n        gap: 15px;\n    }\n\n    .main-title {\n        font-size: 0.9em;\n    }\n\n    .header-logo {\n        min-width: 50px;\n    }\n\n    .header-main,\n    .header-year,\n    .header-info,\n    .header-affiliation {\n        flex: 1;\n        min-width: 120px;\n    }\n\n    .year-svg-overlay text {\n        font-size: 2.8em !important;\n    }\n\n    .subtitle, .attribution, .affiliation-text {\n        font-size: 0.9em;\n    }\n}\n\n@media (max-width: 768px) {\n    .title_container {\n        padding: 6px 12px;\n    }\n\n    .header-content {\n        gap: 10px;\n    }\n\n    .header-logo {\n        min-width: 40px;\n    }\n\n    .header-logo img {\n        max-height: 35px;\n    }\n\n    .main-title {\n        font-size: 0.8em;\n    }\n\n    .header-main,\n    .header-year,\n    .header-info,\n    .header-affiliation {\n        flex: 1;\n        min-width: 100px;\n    }\n\n    .header-year {\n        height: 40px;\n    }\n\n    .year-svg-overlay text {\n        font-size: 2.5em !important;\n    }\n\n    .energy-svg-overlay text {\n        font-size: 0.8em !important;\n    }\n\n    .subtitle, .attribution, .affiliation-text {\n        font-size: 0.8em;\n    }\n}\n\n@media (max-width: 600px) {\n    .header-content {\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .header-main {\n        order: 1;\n        flex: 1 1 100%;\n        margin-bottom: 8px;\n    }\n\n    .header-year {\n        order: 2;\n        flex: 1 1 100%;\n        margin-bottom: 8px;\n        justify-content: center;\n        height: 50px;\n    }\n\n    .header-logo {\n        order: 3;\n        flex: 1 1 50%;\n    }\n\n    .header-info {\n        order: 4;\n        flex: 1 1 100%;\n        margin-bottom: 8px;\n    }\n\n    .header-affiliation {\n        order: 5;\n        flex: 1 1 50%;\n        text-align: left;\n    }\n\n    .main-title {\n        text-align: center;\n        margin-bottom: 5px;\n    }\n\n    .energy-usage-overlay {\n        position: relative;\n        top: 0;\n        text-align: center;\n        margin-top: 5px;\n    }\n}\n\n/* Totals */\n.total.sector {\n    font-size: 0.7em;\n    font-weight: bold;\n}\n\n.total.waste-level {\n    fill: #e49942;\n    opacity: 0.4;\n}\n\n/* Visibility */\n.hidden {\n    visibility: hidden;\n}\n\n/* Tooltip */\n.tooltip {\n    color: #000000;\n    position: absolute;\n    text-align: justify;\n    width: auto;\n    padding: 5px;\n    background: #efefef;\n    border: 1px solid black;\n    pointer-events: none;\n    z-index: 3;\n}\n\n.fuel_value {\n    text-align: center;\n    vertical-align: middle;\n}\n\n/* Waste Heat Visibility Control */\n.waste-heat-hidden .flow.waste {\n    display: none !important;\n}\n\n.waste-heat-hidden .total.waste-level {\n    display: none !important;\n}\n\n/* Smooth transition for waste heat toggle (optional) */\n.flow.waste,\n.total.waste-level {\n    transition: opacity 0.3s ease;\n}","/* US Energy Sankey - Controls Styles */\n\n/* Range Slider */\n.range-slider {\n    width: 100%;\n    margin-top: 5px;\n    position: relative;\n    overflow: visible;\n    padding-top: 40px;\n}\n\n.range-slider__range {\n    -webkit-appearance: none;\n    width: 100%;\n    border-radius: 5px;\n    outline: none;\n    padding: 0;\n    margin: 0;\n}\n\n.range-slider__range:first-child {\n    background: #d7dcdf;\n}\n\n.range-slider__range::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 11px;\n    height: 11px;\n    border-radius: 50%;\n    background: #fff;\n    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);\n    cursor: pointer;\n    transition: background 0.15s ease-in-out;\n}\n\n.range-slider__range::-moz-range-thumb {\n    width: 11px;\n    height: 11px;\n    border: 0;\n    border-radius: 50%;\n    background: #fff;\n    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);\n    cursor: pointer;\n    transition: background 0.15s ease-in-out;\n}\n\n/* Dynamic Year Display */\n#dynamicYear {\n    color: black;\n    position: absolute;\n    height: 25px;\n    width: 50px;\n    text-align: center;\n    border: 1px solid black;\n    border-radius: 3px;\n    display: block;\n    font-size: 16px;\n    top: 40%;\n    /*bottom: 100%;*/\n    background: white;\n    padding: 3px 5px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n/* Add downward arrow pointing to slider */\n#dynamicYear::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    margin-left: -4px;\n    width: 0;\n    height: 0;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 6px solid black;\n}\n\n/* Play/Pause Button */\n#play-button {\n    border-radius: 0;\n    display: block;\n    height: 0;\n}\n\n#play-button:hover {\n    background: transparent !important;\n}\n\n#play-button.playbutton {\n    outline: 0;\n    background: transparent;\n    border-color: transparent transparent transparent #202020;\n    transition: 100ms all ease;\n    cursor: pointer;\n    border-style: solid;\n    border-width: 13px 0 13px 20px;\n}\n\n#play-button.playpaused {\n    outline: 0;\n    background: transparent;\n    height: 26px;\n    border-color: transparent transparent transparent #202020;\n    transition: 100ms all ease;\n    cursor: pointer;\n    border-style: double;\n    border-width: 0px 0 0px 20px;\n}\n\n#play-button.playbutton:hover {\n    border-color: transparent transparent transparent #404040;\n}\n\n/* Waste Heat Toggle Switch */\n.switch_box {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: 200px;\n    -webkit-box-pack: center;\n    -ms-flex-pack: center;\n    justify-content: center;\n    -webkit-box-align: center;\n    -ms-flex-align: center;\n    align-items: center;\n    -webkit-box-flex: 1;\n    -ms-flex: 1;\n    flex: 1;\n}\n\n.box_1 {\n    background: #ffffff;\n}\n\ninput[type=\"checkbox\"].switch_1 {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    width: 3.5em;\n    height: 1.5em;\n    background: black;\n    border-radius: 3em;\n    position: relative;\n    cursor: pointer;\n    outline: none;\n    -webkit-transition: all .2s ease-in-out;\n    transition: all .2s ease-in-out;\n}\n\ninput[type=\"checkbox\"].switch_1:checked {\n    background: black;\n}\n\ninput[type=\"checkbox\"].switch_1:after {\n    position: absolute;\n    content: \"\";\n    width: 1.5em;\n    height: 1.5em;\n    border-radius: 50%;\n    background: #fff;\n    -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);\n    box-shadow: 0 0 .25em rgba(0, 0, 0, .3);\n    -webkit-transform: scale(.7);\n    transform: scale(.7);\n    left: 0;\n    -webkit-transition: all .2s ease-in-out;\n    transition: all .2s ease-in-out;\n}\n\ninput[type=\"checkbox\"].switch_1:checked:after {\n    left: calc(100% - 1.5em);\n}\n\n/* Milestone Tick Markers */\n#testTick .tick text {\n    cursor: pointer;\n}\n\n#testTick .tick text:hover {\n    color: grey;\n    transition: color 250ms;\n}\n"]}