:root {
	--black: #191722;
	--purple: #262335;
	--dark-purple: #241b2f;
	--light-purple: #2a2139;
	--super-purple: #4b446c;
	--white: #f2f2f2;
	--red: #b82c35;
	--orange: #f97e72;
	--blue: #1c9fff;
	--green: #72f1b8;
	--grey: #7f8690;
	--yellow: #fcd354;

	--background: var(--purple);
	--hover-background: var(--dark-purple);
	--background-form: var(--super-purple);
	/* var(--dark-purple); */
	--active-background: rgba(36, 27, 47, 0.6);

	color: var(--white);
	background: var(--background);
}

* {
	margin: 0%;
	padding: 0%;
	box-sizing: border-box;
}

h1,
h2 {
	text-align: center;
	color: var(--white);
}

.color-yellow {
	color: var(--yellow);
}

.color-green {
	color: var(--green);
}

.color-red {
	color: var(--red);
}

a {
	text-decoration: none;
	color: var(--white);
}

input {
	width: 100%;
	padding: .5rem;

	background: var(--light-purple);
	color: var(--white);

	border: 5px solid var(--black);
	border-radius: .5rem;

	font-size: 1rem;
	line-height: 1rem;

	&:focus {
		outline: 1px solid var(--white);
	}
}

button {
	--color: var(--blue);


	&.submit {
		--color: var(--green);
	}

	&.reject {
		--color: var(--red);
	}

	&.noninteractive {
		--color: var(--grey);
	}

	cursor: pointer;
	border: none;
	border: 1px solid var(--color);
	border-radius: .5rem;

	padding: 0.5rem;
	font-size: 1rem;

	background: transparent;
	color: var(--color);

	&:hover {
		background: var(--hover-background);
	}

	&:active {
		background: var(--active-background);
	}

	&.selected {
		background: var(--color);
		color: var(--black);
		font-weight: bolder;
	}
}

.noninteractive {
	pointer-events: none;
}

.invisible {
	visibility: hidden !important;
}

.hidden {
	display: none !important;
}

.rotate-180 {
	transform: rotate(180deg);
}

.clickable {
	cursor: pointer;

	&:hover {
		background: var(--hover-background);
	}

	&:active {
		background: var(--active-background);
	}
}

.green {
	color: var(--green);
}

.red {
	color: var(--red);
}

.orange {
	color: var(--orange);
}

.table {
	position: relative;
	overflow-y: auto;

	.header,
	.row {
		--row-height: 3rem;
		display: grid;
		grid-auto-rows: var(--row-height);
		align-items: center;
		justify-items: center;

		>* {
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: var(--row-height);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.header {
		/* grid-template-columns: */
		position: sticky;
		top: 0;
		background: var(--background);
		font-weight: bold;
		border: 1.5px solid var(--black);
		z-index: 1;
	}

	.row {
		/* grid-template-columns: */
		border-radius: 0.5rem;
		border: 1.5px solid transparent;
		border-bottom: 1.5px solid var(--black);

		&:hover {
			border: 1.5px solid var(--white);
		}
	}

}