.apportion {
    border: 2px solid black;
}

.apportion fieldset input {
    margin: 2px;
    padding: 2px;
}

.apportion .methodSelector {
    display: inline-block;
    margin-right: 6px;
}

.apportion p {
    margin-top: 0;
    font-size: 1rem;
}

.apportion .cell {
    fill: red;
    stroke-width: 0.45;
    stroke: black;
}

.apportion .interactive {
    fill: orange;
}

.apportion .cell.bonus {
    fill: red;
}

.apportion .cell.extra {
    fill: lightgray;
}

.apportion .cell.wasted {
    fill: pink;
}

.apportion .cell.overflow {
    fill: white;
}

.apportion .cell.token {
    fill: gold;
}

.apportion .mask {
    filter: opacity(1);
    fill: transparent;
    touch-action: pinch-zoom;
    stroke: black;
    stroke-width: 1px;
    stroke-dasharray: 8 3;
    /* pointer-events: all; */
}

.apportion .mask:hover {
    filter: drop-shadow(3px 3px #333333) opacity(30%);
    fill: lightblue;
    cursor: grab;
}

.apportion .mask.dragging {
    filter: drop-shadow(3px 3px #333333) opacity(30%);
    fill: blue;
    cursor: ew-resize;
}

.apportion .ruler {
    stroke-width: 0.2px;
    stroke: black;
}

.apportion .ruler.rounding {
    stroke-dasharray: 1px;
    stroke: gray;
}

.apportion text {
    font-size: 6px;
    text-align: center;
}

.apportion .count {
    font-size: 6px;
    text-align: center;
    fill: black;
}

.apportion .token-count {
    fill: white;
    font-size: 7.5px;
}

.apportion .state-name {
    /* fill: white; */
    /* background-color: ; */
    font-size: 6px;
}

.apportion .name-bg {
    fill: #eeeeee;
    stroke: black;
    stroke-width: 0.1px;
}

.apportion .cost {
    font-size: 6px;
    fill: #333333;
}

.apportion svg {
    background-color: #eeeeee;
}
/*
.beforeAfter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
} */