ui/home/allsoftwarecard.razor.scss
.all-card
{
	position: absolute;
	width: 260px;
	height: 260px;
	flex-shrink: 0;
	flex-grow: 0;
	overflow: visible;
	cursor: pointer;

	.all-card-ring
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 260px;
		height: 260px;
		border-radius: 14px;
		z-index: 1;
		overflow: visible;
		pointer-events: none;
	}

	.all-card-face
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 260px;
		height: 260px;
		border-radius: 14px;
		background-color: #d9dde3;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		overflow: hidden;
		box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.18 );
		z-index: 2;

		&.is-missing
		{
			align-items: center;
			justify-content: center;
			background-image: linear-gradient( to bottom, #9c9da2 0%, #38393d 100% );

			.missing-icon-disc
			{
				width: 129px;
				height: 129px;
			}

			.missing-icon
			{
				font-size: 73px;
			}
		}
	}

	&.selected .all-card-face
	{
		box-shadow: 0 7px 14px rgba( 0, 0, 0, 0.24 );
	}

	.all-card-title
	{
		position: absolute;
		left: -130px;
		bottom: -92px;
		width: 520px;
		max-width: 520px;
		height: 64px;
		padding: 0;
		border-radius: 14px;
		align-items: center;
		justify-content: center;
		background-color: rgba( 255, 255, 255, 0.98 );
		box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.14 );
		z-index: 3;
		overflow: visible;

		&.marquee
		{
			width: 520px;
			max-width: 520px;
			padding: 0;
		}
	}

	.all-card-title-arrow
	{
		position: absolute;
		left: 50%;
		top: -12px;
		width: 22px;
		height: 12px;
		margin-left: -11px;
		z-index: 4;
		pointer-events: none;
	}

	.all-card-title-clip
	{
		position: absolute;
		left: 34px;
		top: 0;
		width: 452px;
		height: 64px;
		overflow: hidden;
		z-index: 1;
		align-items: center;
		justify-content: center;
	}

	.all-card-title-text
	{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 64px;
		align-items: center;
		justify-content: center;
		font-family: Poppins;
		font-size: 30px;
		font-weight: 400;
		line-height: 38px;
		color: #1f76ad;
		white-space: nowrap;
		text-align: center;
	}

	.all-card-title-marquee
	{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 64px;
	}
}