style.css

body {
    font: message-box;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
}
header {
    text-align: center;
}
table {
    margin-bottom: 3px;
    width: 100%;
}
td:nth-child(3) {
    width: 0;
}
th:nth-child(4) {
    min-width: 25%;
}
.button_container {
    display: table-cell;
}
.button_container > button {
    border: 0;
    background-color: inherit;
    padding: 0 2px 0 2px;
}
.button_container > button:hover {
    background-color: revert;
}
input {
    width: calc(100% - 7px);
}
.rule_label {
    vertical-align: baseline;
}
thead {
    position: sticky;
    top: 0;
    background-color: canvas;
}

body.popup {
    width: 260px;
    margin: 0.5em;
}
body.popup > button {
    margin-top: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
button#deactivate {
    border: 2px groove red;
    border-radius: 5px;
}
button#deactivate.off {
    border: 2px groove green;
}