body{
    width:100%;
    height:100%;
    font-family: -webkit-pictograph,serif;
    overflow-x:hidden;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
[v-cloak]{
    display:none;
}
.desc{
    font-size:80%;
    color:#aaa;
}
svg line ,svg rect {
    shape-rendering: crispEdges;
    stroke-width:1;
}
#svg_container{
    transition: scrollTop 2s;
    width:100%;
    overflow-y: auto;
    overflow-x: auto;
}
#svg_container.scrolling{
    cursor:grabbing;
}
line.dials{ stroke:#edd; }
line.dials-mini{ stroke:#aaa; }
line.dials-mouse{ stroke:#ccf; }
line.dials-select-line{ stroke: #08f; stroke-dasharray: 5,10; }
line.dials-skill{ stroke:#8c8; }
line.dials-skill-mark{ stroke:rgb(252, 39, 110); }
line.events{ stroke:rgb(247, 210, 249); }
text.dials{ fill: #aaa; }
text.dials-mouse{ fill: #88f; }
text.dials-select-line{ fill: #08f; }
text.dials-skill{ fill: #8c8; }
text.dials-skill-mark{ fill: rgb(252, 39, 110); }
text.dmg{ font-size:10px; }
text.dmg-normal, tSpan.dmg-normal{ fill: red; }
text.dmg-magic, tSpan.dmg-magic{ fill: #08f; }
text.dmg-true, tSpan.dmg-true{ fill: #e0d; }
text.dmg-all{ font-size: 16px; }
text.event-active{ fill: red; }
tSpan.event-summary-reduce{ fill: #f90; }
text.skill-type-active{ fill:red; }
rect.skill-cd{ fill:black; opacity: 0.15; }
rect.skill-cd-prev{ fill:transparent; stroke-width: 1px; stroke-dasharray: 5,10; stroke: black; opacity: 0.2; }
rect.skill-duration{ fill:#8f8; opacity: 0.5; }
rect.skill-duration2{ fill:#0f0; opacity: 0.5; }
rect.skill-duration-slide-range{ stroke-width: 1px; fill: transparent; stroke:#fac; }
.skill-active rect.skill-duration{ stroke-width: 1px; stroke: red; }
rect.skill-name-background{ fill:white; opacity: 0.4; }
rect.hover-rect{ fill:pink; opacity: 0.25; }
rect.select-range{ fill: #ccf; opacity: 0.25; }
.form-auto{ width:auto; display:inline-block; }
.share-container{
    position:fixed; top:0; left:0; right:0; bottom:0;
    padding:5%; background-color:rgba(255,255,255,0.5); z-index:100;
}
.input-wrapper{ margin-top:3px; }
.float-window-behind{
    position:fixed; z-index:700; background-color:rgba(255,255,255,0.7);
    box-shadow: 0 0 5px #8da; border-radius: 5px; padding:5px 10px;
}
.float-window{
    position:fixed; z-index:9999; background-color:rgba(255,255,255,0.7);
    box-shadow: 0 0 5px #8da; border-radius: 5px; padding:5px 10px;
}
.mask{
    position:fixed; z-index:999; background-color:rgba(0,0,0,0.5);
    right:0; top:0; left:0; bottom:0;
}
div.gcd-skill{
    flex:1; min-width: 16.66%; max-width: 16.66%;
    padding-top:8px; border-radius:5px; text-align: center; user-select: none;
}
div.gcd-skill:hover,div.skill-list:hover{ background-color:#cfc; }
div.skill-list{
    flex:1; min-width:60px; max-width:60px;
    padding-top:8px; border-radius:5px; text-align: center; user-select: none;
}
div.skill-container{ display:flex; flex-wrap:wrap; }
div.skill-selected{ background-color:#cfc; border:1px dashed red; }
input[type=range] {
    height:1em; -webkit-appearance: none; border-radius: 10px;
}
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; }
input[type=range]::-webkit-slider-runnable-track {
    height: 10px; border-radius: 10px; border:1px solid #ccc;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    box-shadow: 0 0 3px #6be; border:1px solid #6be;
}
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 15px; width: 15px; margin-top: -5px;
    background: #ffffff; border-radius: 50%;
    border: solid 0.125em rgba(205, 224, 230, 0.5);
    box-shadow: 0 .125em .125em #3b4547;
}
span.value-name{ display:inline-block; width:8em; text-align: right; margin-right: 20px; }

/* 重置 dps-overlay.css 中 ul { display:flex } 对 timeline 的污染 */
#container ul {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}
#container ul li {
  flex: none;
  height: auto;
  line-height: normal;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: list-item;
}