*{box-sizing:border-box}

:root{
 --page:#e8e8e5;
 --shell:#f3f3f0;
 --panel:#ffffff;
 --panel-soft:#f7f7f4;
 --ink:#171b1f;
 --muted:#687079;
 --light:#8a929a;
 --line:#d2d5d5;
 --line-soft:#e6e7e5;
 --blue:#284d6a;
 --blue-dark:#1e394f;
 --blue-soft:#e8eef2;
 --olive:#6f7848;
 --sand:#eeece4;
 --mono:Consolas,"Courier New",monospace;
 --sans:Arial,Helvetica,sans-serif;
}

html{scrollbar-gutter:stable}
body{
 margin:0;
 background:var(--page);
 color:var(--ink);
 font-family:var(--sans);
 font-size:13px;
 line-height:1.45;
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.frame{
 max-width:1440px;
 margin:16px auto;
 background:var(--shell);
 border:1px solid #bfc3c2;
 box-shadow:0 1px 2px rgba(0,0,0,.06);
}

header.site-header{
 background:#fafaf7;
 border-bottom:1px solid var(--line);
 padding:0;
}

.header-main{
 min-height:64px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:22px;
 padding:14px 24px 12px;
}

.brand{
 display:flex;
 flex-direction:column;
 gap:3px;
}

.brand strong{
 font-size:20px;
 letter-spacing:-.03em;
 font-weight:700;
}

.brand span{
 font-size:11px;
 color:var(--muted);
 font-family:var(--mono);
}

.topnav{
 display:flex;
 gap:22px;
 color:#4e565e;
 font-size:13px;
 align-items:center;
 flex-wrap:wrap;
}

.topnav a{
 color:inherit;
 padding:4px 0;
}

.topnav a.active{
 color:var(--blue-dark);
 font-weight:700;
 border-bottom:2px solid var(--blue-dark);
}

.breadcrumbbar{
 border-top:1px solid var(--line-soft);
 min-height:34px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 24px;
 background:#f3f3ef;
 color:#606871;
 font-size:12px;
}

.breadcrumbbar .path{
 font-family:var(--mono);
 font-size:11px;
}

.layout{
 display:grid;
 grid-template-columns:200px 1fr;
 min-height:720px;
}

aside.sidebar{
 background:#ededeb;
 border-right:1px solid var(--line);
 padding:14px 16px;
 max-height:none;
 overflow:visible;
}

.side-title{
 font-family:var(--mono);
 font-size:10px;
 color:#7a8289;
 text-transform:uppercase;
 letter-spacing:.04em;
 margin:18px 0 8px;
}

.side-title:first-child{margin-top:4px}

.side-item{
 display:block;
 border-bottom:1px solid #d9dcda;
 padding:8px 0;
 color:#30363c;
 line-height:1.15;
}

.side-item.active{
 color:var(--blue-dark);
 font-weight:700;
}

.side-item span:first-child{
 display:block;
 overflow-wrap:anywhere;
}

.side-item span:last-child{
 display:block;
 margin-top:3px;
 color:#778087;
 font-family:var(--mono);
 font-size:10px;
 text-align:left;
 white-space:normal;
 line-height:1.25;
}

main.content-main{
 padding:18px 18px 34px;
}

.titlebar{
 background:var(--panel);
 border:1px solid var(--line);
 padding:18px 18px;
 margin-bottom:14px;
 display:flex;
 justify-content:space-between;
 gap:24px;
 align-items:flex-start;
}

h1{
 margin:0;
 font-size:26px;
 letter-spacing:-.035em;
 line-height:1.15;
}

.subtitle{
 margin-top:6px;
 color:#4e565e;
 line-height:1.45;
 max-width:880px;
 font-size:13px;
}

.status{
 font-family:var(--mono);
 font-size:10px;
 color:#5e666e;
 text-align:right;
 line-height:1.7;
 min-width:230px;
}

.controls{
 display:grid;
 grid-template-columns:1.25fr 1fr 1fr auto;
 gap:8px;
 background:#f0f1ef;
 border:1px solid var(--line);
 padding:10px;
 margin-bottom:14px;
}

select,button{
 border:1px solid #b7bdbc;
 background:#fff;
 padding:7px 8px;
 font-size:12px;
 height:32px;
}

button,.button{
 background:#2f363d;
 color:#fff;
 border-color:#2f363d;
 cursor:pointer;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:7px 12px;
 height:32px;
 font-size:12px;
}

.grid{
 display:grid;
 grid-template-columns:minmax(0,1fr) 286px;
 gap:12px;
 align-items:start;
}

.panel{
 background:#fff;
 border:1px solid var(--line);
 margin-bottom:14px;
}

.panel-head{
 min-height:42px;
 border-bottom:1px solid var(--line);
 background:#f4f5f3;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 padding:10px 12px;
}

.panel-head h2{
 margin:0;
 font-size:15px;
 letter-spacing:-.01em;
}

.panel-head span{
 font-family:var(--mono);
 color:#747d84;
 font-size:10px;
}

.kpis{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 border-bottom:1px solid var(--line);
 background:#fbfbfa;
}

.kpi{
 padding:13px 14px;
 border-right:1px solid var(--line-soft);
}

.kpi:last-child{border-right:0}

.kpi label{
 display:block;
 font-family:var(--mono);
 font-size:10px;
 color:#80888f;
 text-transform:uppercase;
 margin-bottom:6px;
}

.kpi strong{
 display:block;
 font-size:26px;
 letter-spacing:-.04em;
 line-height:1;
}

.kpi span{
 display:block;
 color:#6f757b;
 font-size:11px;
 margin-top:5px;
}

.chartbox{
 padding:14px 16px 16px;
}

.chart{
 height:430px;
 position:relative;
 margin:10px 6px 30px 38px;
 border-left:1px solid #222;
 border-bottom:1px solid #222;
 background:
 linear-gradient(to top, rgba(0,0,0,.05) 1px, transparent 1px),
 linear-gradient(to right, rgba(0,0,0,.03) 1px, transparent 1px);
 background-size:100% 70px,90px 100%;
}

.chart svg{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
}

.yaxis{
 position:absolute;
 left:-39px;
 top:-4px;
 bottom:-2px;
 width:30px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 text-align:right;
 font-family:var(--mono);
 font-size:10px;
 color:#70777e;
}

.xaxis{
 position:absolute;
 left:0;
 right:0;
 bottom:-23px;
 display:flex;
 justify-content:space-between;
 font-family:var(--mono);
 font-size:10px;
 color:#70777e;
}

.legend{
 display:flex;
 gap:18px;
 font-size:11px;
 color:#60676e;
 padding-top:6px;
}

.legend i{
 display:inline-block;
 width:22px;
 height:2px;
 background:var(--blue);
 vertical-align:middle;
 margin-right:5px;
}

.legend .target i{background:var(--olive)}

.note{
 padding:13px 14px;
 line-height:1.55;
 color:#454d54;
}

.note p{margin:0 0 9px}

table{
 width:100%;
 border-collapse:collapse;
 font-size:12px;
}

th,td{
 padding:9px 10px;
 border-bottom:1px solid var(--line-soft);
 text-align:left;
 vertical-align:middle;
}

th{
 background:#f4f5f3;
 font-family:var(--mono);
 font-size:10px;
 color:#737b82;
 text-transform:uppercase;
}

td.num{
 text-align:right;
 font-family:var(--mono);
}

.compare-row{
 display:flex;
 justify-content:space-between;
 gap:10px;
 padding:8px 0;
 border-bottom:1px solid var(--line-soft);
}

.compare-row:last-child{border-bottom:0}

.compare-row span:last-child{
 font-family:var(--mono);
 text-align:right;
}

footer.site-footer{
 border-top:1px solid var(--line);
 min-height:38px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:10px 18px;
 color:#71777d;
 font-size:11px;
 background:#f7f8f8;
 gap:20px;
}

.error-box{
 background:#fff;
 border:1px solid var(--line);
 padding:18px;
}

@media(max-width:980px){
 .frame{margin:0;border-left:0;border-right:0}
 .layout{grid-template-columns:1fr}
 aside.sidebar{border-right:0;border-bottom:1px solid var(--line)}
 .grid{grid-template-columns:1fr}
 .controls{grid-template-columns:1fr 1fr}
 .topnav{gap:14px}
 .status{text-align:left;min-width:0}
 .titlebar{flex-direction:column}
}

@media(max-width:620px){
 .header-main,.breadcrumbbar,.titlebar{flex-direction:column;height:auto;align-items:flex-start}
 .header-main,.breadcrumbbar{padding:14px}
 .topnav{flex-wrap:wrap}
 .controls{grid-template-columns:1fr}
 .kpis{grid-template-columns:1fr 1fr}
 .chart{height:310px;margin-left:38px}
 h1{font-size:23px}
}


.seo-context{
 margin:0 22px 18px 222px;
 padding:16px 18px;
 background:#f7f7f4;
 border:1px solid var(--line);
 color:#4d555d;
 font-size:12px;
 line-height:1.6;
}

.seo-context h2{
 margin:0 0 8px;
 font-size:15px;
 color:#1b1f23;
 letter-spacing:-.01em;
}

.seo-context p{
 margin:0 0 8px;
 max-width:1000px;
}

noscript .noscript-box,
.noscript-box{
 margin:12px 22px;
 padding:12px;
 background:#fff7e6;
 border:1px solid #d8c48a;
 color:#5e4a12;
}

@media(max-width:980px){
 .seo-context{margin:0 14px 14px}
}


.timebar{
 background:#f6f6f3;
 border:1px solid var(--line);
 padding:10px 12px 12px;
 margin-bottom:14px;
}

.timebar-head{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
 margin-bottom:8px;
 font-size:12px;
 color:#4f575f;
}

.timebar-head strong{
 font-size:13px;
 color:#1b1f23;
}

.timebar-head span{
 font-family:var(--mono);
 color:#5d656d;
}

.range-wrap{
    position:relative;
    height:28px;
    margin:4px 0 8px;
    padding-top:0;
}

.range-wrap:before{
    top:14px;
}

.range-wrap input[type=range]{
    top:0;
    height:28px;
}

.range-wrap input[type=range]::-webkit-slider-thumb{
    margin-top:-6px;
}

/* FINAL slider repair */
.year-thumb-label{
    display:none !important;
}

.range-wrap{
    position:relative !important;
    height:22px !important;
    margin:8px 0 10px !important;
    padding:0 !important;
}

.range-wrap:before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:10px !important;
    height:3px !important;
    background:#d5d8d6 !important;
}

.range-wrap input[type=range]{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:22px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    pointer-events:none !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}

.range-wrap input[type=range]::-webkit-slider-thumb{
    pointer-events:auto !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    width:14px !important;
    height:14px !important;
    border-radius:50% !important;
    background:#2f363d !important;
    border:2px solid #fff !important;
    box-shadow:0 0 0 1px #9aa0a4 !important;
    cursor:pointer !important;
    margin-top:0 !important;
}

.range-wrap input[type=range]::-moz-range-thumb{
 pointer-events:auto;
 width:14px;
 height:14px;
 border-radius:50%;
 background:#2f363d;
 border:2px solid #fff;
 box-shadow:0 0 0 1px #9aa0a4;
 cursor:pointer;
}

.range-wrap:before{
 content:"";
 position:absolute;
 left:0;
 right:0;
 top:15px;
 height:3px;
 background:#d5d8d6;
}

.preset-row{
 display:flex;
 gap:6px;
 flex-wrap:wrap;
}

.preset-row .preset{
 height:26px;
 padding:4px 8px;
 font-size:11px;
 background:#fff;
 color:#30363c;
 border:1px solid #c6cbc9;
}

.preset-row .preset:hover{
 background:#eef0f1;
}

@media(max-width:620px){
 .timebar-head{align-items:flex-start;flex-direction:column}
}


.year-thumb-label{
 position:absolute;
 top:0;
 transform:translateX(-50%);
 min-width:36px;
 text-align:center;
 font-family:var(--mono);
 font-size:10px;
 color:#30363c;
 background:#fff;
 border:1px solid #c6cbc9;
 padding:2px 4px;
 z-index:4;
 pointer-events:none;
}

.year-thumb-label.start{left:0}
.year-thumb-label.end{left:100%}


.selected-year-inline{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:14px;
    min-width:420px;
}

.selected-year-meta{
    white-space:nowrap;
}

.selected-year-meta strong{
    font-size:12px;
    color:#1b1f23;
}

.selected-range-wrap{
    position:relative;
    width:190px;
    height:22px;
    flex-shrink:0;
}

.selected-range-wrap:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:10px;
    height:3px;
    background:#d5d8d6;
}

.selected-range-wrap input[type=range]{
    position:absolute;
    left:0;
    right:0;
    top:0;
    width:100%;
    height:22px;
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    appearance:none;
    -webkit-appearance:none;
}

.selected-range-wrap input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#2f363d;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #9aa0a4;
    cursor:pointer;
}

.selected-range-wrap input[type=range]::-moz-range-thumb{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#2f363d;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #9aa0a4;
    cursor:pointer;
}