client/css/settings.css

.settings-container {
    margin: 24px 0px 8px 0px;
    justify-content: center;
}

.settings-container span {
    font-size: 0.875rem;
    margin: 0;
}

.settings-container label {
    width: 24px;
    height: 16px;
}

.settings-container .field {
    justify-content: space-between;
}

.settings-container .checkbox input + label,
.settings-container .checkbox input:checked + label:after {
	background: var(--colour-1);
}

.settings-container .checkbox input + label:after,
.settings-container .checkbox input:checked + label {
	background: var(--colour-3);
}

.settings-container .checkbox label:after {
    left: 2px;
    width: 10px;
    height: 10px;
}

.settings-container .checkbox input:checked + label:after {
    left: calc(100% - 2px - 10px);
}

.settings-container .dropdown {
    padding: 4px 8px;
    font-size: 0.75rem;
}