/**
  * Charts
  **/
.f13-data-key { 
    margin-bottom: 10px; 
    padding: 5px; 
    background: #efefef; 
    border: 1px solid #ccc; 
    position: relative; 
}
.f13-data-key summary { 
    cursor: pointer; 
    padding: 5px 0px 5px 25px; 
}
.f13-data-key summary:before { 
    content: "\f112"; 
    font-family: 'dashicons'; 
    position: absolute; 
    padding: 1px 5px; 
    margin-left: -25px; 
    color: #666; 
}
.f13-data-key summary:after { 
    color: #666; 
    content: "\f474"; 
    font-family: 'dashicons'; 
    position: absolute; 
    right: 10px; 
    transform: rotate(-90deg); 
}
.f13-data-key[open] summary:after { 
    transform: unset; 
}
.f13-data-key summary::-webkit-details-marker{ 
    display: none; 
}
.f13-data-key summary { 
    list-style: none; 
    background: #eee; 
    padding: 10px 10px 10px 30px; 
    margin: -5px;
}
.dark .f13-data-key summary { 
    background: #222; 
    color: #fff; 
}
.f13-data-key[open] summary { 
    margin: -5px -5px 5px; 
    border-bottom: 1px solid #aaa; 
}
.f13-data-key-item { 
    display: inline-block; 
    width: 150px; 
    overflow: hidden; 
    white-space: nowrap; 
    padding: 5px 0px 0px 25px; 
    margin-right: 5px; 
    text-overflow:ellipsis;
}
.f13-data-key-item-colour { 
    height:16px; 
    width: 20px; 
    display: inline-block; 
    position: absolute; 
    margin-left: -25px; 
}
.f13-data-stacked-bar-item { 
    box-sizing: border-box; 
    border: 1px solid #efefef; 
}
.f13-data-chart-scale .f13-data-chart-scale-10 { 
    width: 10%; 
    box-sizing: border-box; 
    border-right: 1px solid #aaa; 
    height: 20px; 
    display: inline-block; 
}
.f13-data-chart-scale { 
    border-left: 1px solid #aaa; 
    box-sizing: border-box; 
    margin-top: -5px; 
}
.f13-data-chart-scale-text span { display: inline-block; text-align: center; }
.f13-data-chart-scale-text .f13-data-chart-text-scale-20 { width: 40%; }
.f13-data-chart-scale-text .f13-data-chart-text-scale-50 { width: 20%; }
.f13-data-key-item:hover .f13-data-chart-hover { display: block; position: absolute; background: #fff; border: 1px solid #ccc; box-shadow: 0px 0px 5px #222; z-index: 9999; padding: 5px; margin-top: -24px; margin-left: -5px; cursor: help; }
.dark .f13-data-key-item:hover .f13-data-chart-hover { background: #323d4e; color: #fff; }
.f13-data-chart-item { cursor: help; }
.f13-data-chart-container { margin: 10px 0px; }
.f13-data-bar-item { box-sizing: border-box; border-left: 1px solid #fff; border-right: 1px solid #fff; border: 1px solid transparent; margin: 0px 1px; }
.f13-data-bar-item:hover { box-shadow: 0px 0px 5px #222; border: 1px solid #aaa; z-index: 999; }
.f13-data-chart-item .f13-data-chart-hover { display: none; position: absolute; background: #fff; padding: 5px; border: 1px solid #aaa; width: 200px; z-index: 9999; box-shadow: 0px 0px 5px #222; margin-left: -1px; }
.dark .f13-data-chart-item .f13-data-chart-hover { background: #323d4e; color: #fff; }
.f13-data-bar-item:hover .f13-data-chart-hover { display: block; }
.f13-data-chart-container { background: #fff; padding: 10px; border: 1px solid #aaa; }
.dark .f13-data-chart-container { background: #444; color: #fff; }
.f13-data-key { background: #fff; border: 1px solid #aaa; }
.dark .f13-data-key { background: #333; color: #fff; }
.f13-data-chart-title { font-size: 20px; color: #444; margin: -10px -10px 10px; padding: 10px; background: #eee; border-bottom: 1px solid #aaa; display: block; }
.dark .f13-data-chart-title { background: #222; color: #fff; }
.f13-data-horizontal-bar-item { border: 1px solid transparent; margin-bottom: 2px; }
.f13-data-chart-item:hover, .f13-data-chart-item-js-hover { border: 1px solid #aaa; box-shadow: 0px 0px 5px #222; z-index:2; }
.f13-data-pie-chart .f13-data-chart-item-js-hover { border: unset; box-shadow: unset; }
.f13-data-chart-hover { display: none; }
.f13-data-chart-item:hover .f13-data-stacked-bar-item-hover { display: block; position: absolute; border: 1px solid #aaa; background: #fff; margin-top: 60px; padding: 5px; width: 200px; box-shadow: 0px 0px 5px #222; z-index: 9999; margin-left: -1px; }
.dark .f13-data-chart-item:hover .f13-data-stacked-bar-item-hover { background: #323d4e; color: #fff; }

/*
 * Line chart -- start --
 */
.f13-data-line-chart svg.f13-data-line-chart-svg {
  width: 100%; 
  height: 100%; 
  overflow-x: hidden; 
  overflow-y: hidden; 
  background: repeating-linear-gradient(0deg, #ccc, #ccc 1px, transparent 1px, transparent 10%)}
/*
 * Line chart -- end --
 */

/*
 * Pie charts -- start --
 */
@property --p{ syntax: '<number>'; inherits: true; initial-value: 0; }
.f13-data-pie-slice { --p:20; --b:22px; --c:darkred; --w:250px; width:var(--w); aspect-ratio:1; position:relative; display:inline-grid; margin:5px; place-content:center; font-size:25px; font-weight:bold; font-family:sans-serif; transition: width 0.2s, margin-left 0.4s, margin-top 0.3s; }
.f13-data-pie-slice:before, .f13-data-pie-slice:after { content:""; position:absolute; border-radius:50%; }
.f13-data-pie-slice:before { inset:0; background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))); mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))); background-size: 0 0, auto; }
.f13-data-pie-slice:after { inset:calc(50% - var(--b)/2); background:var(--c); transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2)); content: none; }
.f13-data-pie-slice-animate { animation:p 1s .5s both; }
@keyframes p { from{--p:0} }
.pie-hover { width: 400px !important; margin-left: -150px !important; margin-top: -20px !important; border-color: transparent !important; z-index: 1 !important; }
.f13-data-pie-chart .f13-data-key { float: left; width: calc(100% - 525px); z-index: 2; }
.f13-data-pie-chart .f13-data-key-item { width: 100%; box-sizing: border-box; }
.f13-data-pie-chart .clear { clear: both; }
.f13-data-pie-chart .f13-data-chart { margin-left: calc(100% - 600px); }
.f13-data-pie-chart-label { width: 152px; height: 130px; display: block; text-align: center; left: 50%; position:absolute; top:50%; margin-top: -60px; margin-left: -26px; box-sizing: border-box; min-width: 152px; max-width: 152px; }
.f13-data-pie-chart-label span { display: inline-block; padding-top: 65px; font-weight: bold; }
.f13-data-key-item-pie span { display: none; }
@media screen and (max-width: 800px) {
    .f13-data-pie-chart .f13-data-key { 
        float: none; 
        width: unset; 
        z-index: unset; 
    }
    .f13-data-pie-chart .f13-data-chart { 
        margin-left: -25%; 
        margin-top: 10px; 
    }
    .f13-data-pie-chart .f13-data-key-item { 
        box-sizing: content-box; 
        width: 150px; 
    }
}
/*
 * Pie charts -- end --
 */

@media screen and (max-width: 600px) {
    .f13-data-stacked-bar-item { 
        border: 0px !important; 
    }
}