#keying-widget {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: min-content min-content min-content;
	grid-gap: 0px 2rem;
	margin: 6rem 0px;

	.instructions {
		grid-column: 1/3;
		text-align: center;
		color: var(--darkest-blue);
		margin-bottom: 2rem;
		font-family: "open sans", sans-serif;
	}

	div.svg {
		grid-column: 1/3;

		svg {
			width: 100%;
			fill: var(--darker-blue);
			margin-bottom: 3rem;

			path {
				stroke: var(--darker-blue);
				stroke-width: 0.2px;
			}

			rect {
				fill: var(--light-blue);
				transition: fill 60ms linear, x 300ms linear;

				&.on {
					fill: white;
				}
			}

			text {
				font-size: 2px;
				stroke: transparent;
				fill: var(--darkest-blue);
				font-weight: bold;
			}
		}
	}

	div.input {
		text-align: center;

		label {
			display: block;
			font-family: "open sans", sans-serif;
			color: var(--darkest-blue);
			font-size: 1.2rem;
		}

		input[type=range] {
			display: block;
			width: 100%;
			position: relative;
			height: 4px;
			margin: 2rem 0px;
		}

		/* Special styling for WebKit/Blink */
		input[type=range]::-webkit-slider-thumb {
			border: 2px solid var(--darkest-blue);
			height: 1.5rem;
			width: 1.5rem;
			border-radius: 0.3rem;
			background: var(--darker-blue);
			cursor: pointer;
			-webkit-appearance: none;
		}

		/* All the same stuff for Firefox */
		input[type=range]::-moz-range-thumb {
			border: 2px solid var(--darkest-blue);
			height: 1.5rem;
			width: 1.5rem;
			border-radius: 0.3rem;
			background: var(--darker-blue);
			cursor: pointer;
		}

		/* All the same stuff for IE */
		input[type=range]::-ms-thumb {
			border: 2px solid var(--darkest-blue);
			height: 1.5rem;
			width: 1.5rem;
			border-radius: 0.3rem;
			background: var(--darker-blue);
			cursor: pointer;
		}


		/*****************************************************************************/

		input[type=range]::-webkit-slider-runnable-track {
			width: 100%;
			height: 4px;
			cursor: pointer;
			background: var(--dark-blue);
			border-radius: 4px;
		}

		input[type=range]:focus::-webkit-slider-runnable-track {
			background: var(--dark-blue);
		}

		input[type=range]::-moz-range-track {
			width: 100%;
			height: 4px;
			cursor: pointer;
			background: var(--dark-blue);
			border-radius: 4px;
		}

		input[type=range]::-ms-track {
			width: 100%;
			height: 4px;
			cursor: pointer;
			background: var(--dark-blue);
			border-radius: 4px;
		}
		input[type=range]::-ms-fill-lower {
			background: var(--dark-blue);
		}
		input[type=range]:focus::-ms-fill-lower {
			background: var(--dark-blue);
		}
		input[type=range]::-ms-fill-upper {
			background: var(--dark-blue);
		}
		input[type=range]:focus::-ms-fill-upper {
			background: var(--dark-blue);
		}
	}
}