.cpnGrid {
	.cell {
		height: var(--grid-row-height);

		> span {
			font-size: var(--grid-cell-font-size);
			height: var(--grid-row-height);
			line-height: var(--grid-row-height);
		}

		&.type-checkbox {
			justify-content: center;
		}

		&.type-icon {
			justify-content: center;
			align-items: center;

			> .icon {
				.material-symbols-outlined {
					font-size: 24px;
					display: block;
				}

			}

		}

		&.type-progressBar {
			.progressBar {
				width: 100%;
				height: 6px;
				display: flex;
				flex-direction: row;
				border-radius: 2px;
				overflow: hidden;

				.section:first-child {
					background-color: var(--colors-success);
				}

				.section:last-child {
					background-color: var(--colors-mediumGrey);
				}

			}

		}

		&.type-badge {
			justify-content: center;

			.badge {
				padding: 4px 12px;
				background-color: red;
				border-radius: 18px;
				color: white;
			}

		}

		.gridCellDateTime {
			display: flex;

			> .gridCellTime {
				margin-left: var(--global-tinyPadding);
			}

		}

		&.locked {
			pointer-events: none;
		}

	}

}