button,
.button,
.selector label,
.arrowButton,
input {
	cursor: pointer;
	border: none;
	border-radius: 0;
}

input[type="number"] {
	outline: none;
	border: .1em solid gray;
	border-radius: 5px;
}

button:focus,
.button:focus,
.selector label:focus,
.arrowButton:focus,
input:not([type="checkbox"]):focus {
	outline: .2em solid #43a047;
}

button,
.button,
.arrowButton,
.selector label {
	user-select: none;
}

button,
.button,
.selector label,
input {
	background-color: white;
}


input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="text"] {
	box-sizing: border-box;
	padding: .26em;
	font-size: 1.5em;
	color: black;
}

button,
.button,
.selector label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	color: black;
	padding: .5em 1em;
	transition: background-color 300ms;
}

button:hover,
.button:hover {
	background-color: #d3d3d3;
}

button.color,
.button.color {
	background-color: #43a047;
	color: white;
}

button.color:hover,
.button.color:hover {
	background-color: #388e3c;
}

.arrowButton {
	height: 4.5em;
	width: 4.5em;
	margin: 0 auto;
	transition: transform 150ms;
	/* to make icon white */
	filter: invert();
}

.selector {
	display: flex;

	input {
		display: none;
	}

	input + label {
		background: #d3d3d3;
	}

	input:checked + label {
		background: white;
	}

	label:after {
		font-size: .9rem;
		color: black;
		text-align: center;
		line-height: .9rem;
		margin-top: 2px;
	}

	div:not(:last-child),
	label:not(:last-child) {
		border-right: 1px solid #bbb;
	}
}

.selector.rectangular label {
	height: 2em;
	width: 2em;
	padding: 3px;
	font-weight: bold;
	overflow: hidden;
}