/* general setup */
:root {
    --bg-color:#f1f1f1;
    --text-color: #6e6b5e;
}

svg {
    background-color: var(--bg-color);
}

text {
    vertical-align: baseline;
    text-anchor: start;
}

#heading {
    font-size: 24px;
    font-weight: bold;
}

#caption {
    font-size: 0.875em;
    font-family: "Open Sans", sans-serif;
    font-style: italic;
}

/* code related styling */
text.code {
    fill: #6e6b5e;
    white-space: pre;
    font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
    font-size: 0.875em;
}

text.label {
    font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
    font-size: 0.875em;
}

/* timeline/event interaction styling */
.solid {
    stroke-width: 5px;
}

.hollow {
    stroke-width: 1.5;
}

.dotted {
    stroke-width: 5px;
    stroke-dasharray: "2 1";
}

.extend {
    stroke-width: 1px;
    stroke-dasharray: "2 1";
}

.functionIcon {
    paint-order: stroke;
    stroke-width: 3px;
    fill: var(--bg-color);
    font-size: 20px;
    font-family: times;
    font-weight: lighter;
    dominant-baseline: central;
    text-anchor: start;
    font-style: italic;
}

.functionLogo {
    font-size: 20px;
    font-style: italic;
    paint-order: stroke;
    stroke-width: 3px;
    fill: var(--bg-color) !important;
}

/* flex related styling */
.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

object.tl_panel {
    flex-grow: 1;
}

object.code_panel {
    flex-grow: 0;
}

.tooltip-trigger {
    cursor: default;
}

.tooltip-trigger:hover{
    filter: url(#glow);
}

/* hash based styling */
[data-hash="0"] {
    fill: #6e6b5e;
}

[data-hash="1"] {
    fill: #1893ff;
    stroke: #1893ff;
}

[data-hash="2"] {
    fill: #ff7f50;
    stroke: #ff7f50;
}

[data-hash="3"] {
    fill: #8635ff;
    stroke: #8635ff;
}

[data-hash="4"] {
    fill: #dc143c;
    stroke: #dc143c;
}

[data-hash="5"] {
    fill: #0a810a;
    stroke: #0a810a;
}

[data-hash="6"] {
    fill: #008080;
    stroke: #008080;
}

[data-hash="7"] {
    fill: #ff6cce;
    stroke: #ff6cce;
}

[data-hash="8"] {
    fill: #00d6fc;
    stroke: #00d6fc;
}

[data-hash="9"] {
    fill: #b99f35;
    stroke: #b99f35;
}