snippets {
	display: none;
}

.hidden {
	display: none;
}

#toggle {
	display: grid;
	grid-auto-flow: column;
	text-align: center;
}

#toggle > h2 {
	position: relative;
	top: 5px;
	padding-right: 10px;
}

#game-tabs {
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
}

#game-tabs-container > div > .slider {
	display: flex;
}

#game-tabs-container > div > div > .custom-checkbox {
	margin: auto;
}

div.slider > #name {
	width: 250px;
	margin: auto;
}

div.slider > #time {
	width: 100px;
	margin: auto;
}

input.slider {
	width: 30%;
}

#game-tabs-container > * > div.slider {
	outline-color: var(--white);
	outline-style: solid;
	outline-width: 1px;
	height: 32px;
	text-align: center;
}

#game-tabs-container > * > div.slider.disabled {
	background-color: var(--red);
	color: var(--white);
}

#game-tabs-container > * > div.slider.enabled {
	background-color: var(--green);
	color: var(--white);
}

#game-tabs-container > * > div.slider.indeterminate {
	background-color: var(--orange);
	color: var(--white);
}

.custom-checkbox .custom-control-input:checked~.custom-control-label:before {
	background-color: var(--white);
}

.custom-checkbox > input[type="checkbox"][data-mode="0"]~.custom-control-label:after {
	background-image: none;
}

.custom-checkbox > input[type="checkbox"][data-mode="1"]~.custom-control-label:after {
	background-image: url("../images/checked.svg");
}

.custom-checkbox > input[type="checkbox"][data-mode="2"]~.custom-control-label:after {
	background-image: url("../images/indeterminate.svg");
}

#fixed-names > div > label {
	color: black;
}

#color-legend > ul > li {
	padding: 1px;
	margin: 1px;
}

#color-legend > ul > li:nth-child(1) {
	background-color: var(--green);
}

#color-legend > ul > li:nth-child(2) {
	background-color: var(--orange);
}

#color-legend > ul > li:nth-child(3) {
	background-color: var(--red);
}

#input > input {
	color: var(--white);
	text-align: center;
	width: 50px;
	margin-left: 25px;
}

#input > input:disabled {
	background-color: var(--red);
}

.radio > label {
	color: var(--black);
}

#set-all-checkboxes > .custom-checkbox > label::after {
	outline-style: solid;
	outline-color: var(--black);
	outline-width: 1px;
}

#set-all-checkboxes {
	display: inline-flex;
	position: relative;
	left: 15px;
}

#set-all-checkboxes > label {
	position: relative;
	top: 5px;
}
