.RulerAxis {
}

.RulerAxis svg{
    width: 100%;
    height: 100%;
    background-color: var(--jp-layout-color2);
}

.RulerAxis .labelTick line{
    stroke: var(--jp-inverse-layout-color3);
    stroke-width: 1px;
}

.RulerAxis .labelTick text{
    text-anchor: middle;
    alignment-baseline: middle;
    fill: var(--jp-inverse-layout-color3);
}

.RulerAxis .BoundariesLabelTick text{
    font-weight: bold;
}

.RulerAxis .end text{
    text-anchor: end;
    font-weight: bold;
}

.RulerAxis .start text{
    text-anchor: start;
    font-weight: bold;
}

.RulerAxis .tick {
    stroke: var(--jp-inverse-layout-color4);
    stroke-width: 1px;
}

.RulerAxis .cursorTick rect{
    fill: var(--jp-layout-color3);
}

.RulerAxis .cursorTick line{
    stroke: var(--jp-inverse-layout-color2);
}

.RulerAxis .cursorTick text{
    fill: var(--jp-inverse-layout-color2);
    font-weight: bold;
}

.RulerAxis .out-of-domain {
    fill: var(--jp-layout-color1);
}

.RulerAxis .shadow {
    fill: var(--jp-layout-color1);
    opacity: 0.7;
    backdrop-filter: blur(4px);
}

.RulerAxis .HighlightLabelTick text{
    strike: var(--jp-inverse-layout-color2);
}

.RulerAxis #lightBackgroundFilter feFlood{
    flood-color: var(--jp-layout-color2);
}

.RulerAxis #darkBackgroundFilter feFlood{
    flood-color: var(--jp-layout-color1);
}