style.less

.bluegenesTissueExpressionVisualizer {
	// put all your css classes inside this block. Keeping them
	// nested under the tool name prevents your styles from
	// leaking out and affecting other elements by accident.

	// If you want to learn more about LESS, visit lesscss.org.

	// to build your css, run `lessc src/style.css dist/style.css --clean-css`
	// in your terminal

	// this is just an example class for root div element, you may modify or delete it as per your usecase
	.rootContainer {
		border: 1px solid black;
		padding: 20px;
	}

	.error {
		font-weight: 300;
		display: flex;
		justify-content: center;
		font-size: 22px;
		font-family: sans-serif;
	}

	.firstGraph {
		margin-bottom: 10%;

		.controls {
			display: grid;
			grid-template-columns: 33% 33% 33%;
			grid-template-rows: 100% 100%;

			div {
				display: flex;
				align-items: center;
				border: 1px solid #dcc8e2;
				font-family: sans-serif;
				font-size: 12px;
				input {
					cursor: pointer;
					margin-left: 40px;
					// make it above span
					z-index: 1;
				}
				span {
					margin-left: 20px;
					cursor: pointer;
				}
			}

			div:nth-child(even) {
				background: #fdf8fe;
				cursor: pointer;
			}
		}
	}

	.secondGraph {
	}

	.loading-container {
		display: flex;
		justify-content: center;
		margin: 40px;
		div {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: space-between;
			width: 2em;
			font-size: 40px;
			span {
				width: 0.3em;
				height: 1em;
				background-color: #a373ca;
			}

			span:nth-of-type(1) {
				animation: grow 1s -0.45s ease-in-out infinite;
			}

			span:nth-of-type(2) {
				animation: grow 1s -0.3s ease-in-out infinite;
			}

			span:nth-of-type(3) {
				animation: grow 1s -0.15s ease-in-out infinite;
			}

			span:nth-of-type(4) {
				animation: grow 1s 0.15s ease-in-out infinite;
			}

			@keyframes grow {
				0%,
				100% {
					transform: scaleY(1);
				}

				50% {
					transform: scaleY(2);
				}
			}
		}
	}
}