console
{
	font-family: Roboto Mono;
	font-size: 11px;
	font-weight: normal;
	flex-direction: column;
	padding: 3px;
	border-radius: 8px;
	gap: 2px;
	flex-grow: 1;
	background-image: linear-gradient( to bottom, #111c, #000d );
	backdrop-filter: blur( 5px );
	font-size: 1rem;

	.textentry
	{
	}

	.console_output
	{
		width: 100%;
		height: 100%;
		font-size: 11px;
		font-weight: 600;
	}

	.input
	{
		background-color: rgba(42, 44, 47, 0.4);
		cursor: text;
		flex-shrink: 0;
		color: #68bf61;
		opacity: 0.5;
		flex-grow: 1;

		&:active, &:focus, &:hover
		{
			opacity: 1;
		}
	}

	.toolbar
	{
		font-family: Roboto;
		gap: 3px;

		.scroll
		{
			background-color: rgba(#ccc, 0.1);
			padding: 0px 10px;
			flex-shrink: 1;
			justify-content: center;
			align-items: center;
			font-weight: lighter;
			font-size: 16px;
			white-space: nowrap;
			color: #999;

			&.active
			{
				color: #ccc;
			}
		}

		Button
		{
			font-family: Poppins;
			background-color: rgba(#ccc, 0.1);
			color: #ccc;
			padding: 0px 10px;
			flex-shrink: 1;
			justify-content: center;
			align-items: center;
			font-weight: 600;
			white-space: nowrap;
			min-width: 40px;
			cursor: pointer;
			gap: 5px;

			&.active
			{
				background-color: #3967c7;
				color: #fff;
			}
		}

		.type
		{
			background-color: rgba(104, 125, 104, 0.1);
			color: #687d68;
			flex-shrink: 1;
			justify-content: center;
			align-items: center;
			white-space: nowrap;
			width: 40px;

			&.err
			{
				color: #c66;
				background-color: rgba(204, 102, 102, 0.1);
			}

			&.wrn
			{
				color: #de935f;
				background-color: rgba(222, 147, 95, 0.1);
			}

			&.disabled
			{
				opacity: 0.1;
			}
		}

		.filter
		{
			background-color: rgba(42, 44, 47, 0.4);
			cursor: text;
			flex-shrink: 0;
			color: #777;
			flex-grow: 0;
			min-width: 200px;
			opacity: 0.5;

			&:active, &:focus, &:hover
			{
				opacity: 1;
			}
		}
	}
}