ul.parking-violation-reasons {
    list-style: none;
    margin-block: 0;
    padding-inline-start: 0;
}

ul.parking-violation-reasons li {
    display: flex;
    color: var(--text-color-medium);
    background-color: var(--background-color-demur);
    margin-bottom: .1rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: medium;
}

ul.parking-violation-reasons li.hilite {
    background-color: unset;
    background: linear-gradient(to right, rgb(90% 80% 60% / 1), rgb(80% 60% 50% / 1));
}

ul.parking-violation-reasons span {
    flex-grow: 1;
/*    font-size: 1.25rem;*/
}

ul.parking-violation-reasons span.violation-reason {
    width: 1.5rem;
    height: 1.5rem;
    opacity: .1;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: text-bottom;
    flex-grow: 0;
    flex-shrink: 0;
}

ul.parking-violation-reasons span.violated-check {
    margin-left: 1rem;
    opacity: 1;
    height: 2rem;
    width: 2rem;
}

ul.parking-violation-reasons span.violated-check > input[type=checkbox] {
    height: 2rem;
    width: 2rem;
/*    box-shadow: 0px 0px 3px red;*/
}

span.violation-reason.bootable {
    background-image: url("/static/images/car-booted.svg");
}

span.violation-reason.towable {
    background-image: url("/static/images/tow-truck.svg");
}

span.violation-reason.bootable.active {
    opacity: 1;
}

span.violation-reason.towable.active {
    opacity: 1;
}