index.css

:not(input):not(textarea),
:not(input):not(textarea)::after,
:not(input):not(textarea)::before {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}
input, button, textarea, :focus {
    outline: none; // You should add some other style for :focus to help UX/a11y
}

html, body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  margin: 2px 0px;
}
.dark, .ultra-dark{
  color: white;
}

ul{
  margin: 0;
  padding: 0px;
  list-style-type: none;
}

ul li{
  padding-left: 20px;
  padding-right: 10px;
  line-height: 22px
}

.right{
  float: right;
}

ul li:hover{
  color: #fff;
  background-color: rgb(0, 114, 238);
}

ul li.separator{
  margin: 4px 0;
  border-bottom: 1px solid rgba(153, 153, 153, 0.9)
}

ul#service-list span.status{
  height: 12px;
  width: 24px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
}

span.toggler {
	cursor: pointer;
	text-indent: -9999px;
	width: 24apx;
	height: 12px;
	background: grey;
	display: block;
	border-radius: 12px;
  position: relative;
  top: 1px;
}

span.toggler:after {
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 10px;
	transition: 0.3s;
}

li[data-state="started"] span.toggler {
  background: rgb(76, 217, 100);
}

li[data-state="stopped"] span.toggler {
  background: rgb(255, 59, 48);
}

li[data-state="waiting"] span.toggler {
  background: orange;
}

li[data-state="started"] span.toggler:after {
	left: calc(100% - 1px);
	transform: translateX(-100%);
}

li[data-state="waiting"] span.toggler:after {
	left: calc(50%);
	transform: translateX(-50%);
}