.dial-widget {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dial-svg {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.dial-knob {
    fill: #d0d0d0;
    stroke: #888;
    stroke-width: 1.5;
}

.dial-knob:hover {
    fill: #ddd;
}

.dial-indicator {
    stroke: #333;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.dial-track {
    fill: none;
    stroke: #ccc;
    stroke-width: 4;
    stroke-linecap: round;
}

.dial-value-arc {
    fill: none;
    stroke: #4a90d9;
    stroke-width: 4;
    stroke-linecap: round;
}

.dial-tick {
    stroke: #999;
    stroke-width: 1;
}

.dial-value {
    font-size: 0.8em;
    color: #333;
    user-select: none;
    pointer-events: none;
}