.title{
		color: #F0AA28;
		font-weight: bold;
		text-align: center;
		margin-bottom: 0px;
		text-transform: none;
	}

/* ## Filter
================================= */
	#chart-filter{
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax(90px, 1fr) );
		gap: 10px;
		padding: 2rem;
		margin-block: 0.5rem 2rem;
		background-color: #1D1D1E;
		border-radius: 4px;
		width: 100%;
		border: solid 1px #383737;
		.selector{
			flex-grow: 1;
			text-align: center;
			box-shadow: inset 0 0 0 1px #383737;
			border-radius: 4px;
			padding: 12px;
			cursor: pointer;
			transition: all 0.4s ease;
			color: #dadada;
			position: relative;
			&:hover{
				box-shadow: inset 0 0 0 2px #F0AA28;
			}
			&::before{
				content:'';
				width: 60px;
				height:30px;
				margin-inline: auto;
				display: block;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				margin-bottom: 3px;
			}
			&.helicopter::before{
				background-image: url(images/helicopter-svgrepo-com.svg);
			}
			&.plane::before{
				background-image: url(images/airplane-plane-svgrepo-com.svg);
			}
			&.drone::before{
				background-image: url(images/drone-tech-svgrepo-com.svg);
			}
			&.spraybar::before{
				background-image: url(images/pipes-pipe-svgrepo-com.svg);
			}
			&.hydrorig::before{
				background-image: url(images/truck.svg);
			}
			&.hose::before{
				background-image: url(images/hose-svgrepo-com.svg);
			}
			&.ugv::before{
				background-image: url(images/ugv-icon.svg);
			}
			&.active{
				box-shadow: inset 0 0 0 2px #F0AA28;
				&:after{
					content: '';
					display: block;
					width: 20px;
					height: 20px;
					background-image: url(images/checkmark2.svg);
					border-radius: 99px;
					position: absolute;
					bottom: -10px;
					right: 10px;
					background-color: #F0AA28;
					background-size: contain;
					background-position:center;
					background-repeat:no-repeat;
					background-origin:content-box;
					padding:3px;
				}
			}
			input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
				height: 0;
				width: 0;
			}
		}
	}

/* ## Chart
------------------------------------------- */
	#compare-matrix{
		.column-2,
		.column-3,
		.column-4,
		.column-5,
		.column-6,
		.column-7,
		.column-8{
			display: none;
			&.active{
				display: table-cell;
				transform: translateX(0);
				transition: all 0.4s ease;
				@starting-style{
					transform: translateX(20px);
				}
			}
		}
		.table-wrap{
			background-color: #3A3A3A;
			border: solid 1px #3A3A3A;
			border-radius: 8px;
			overflow-x: auto;
			table.tablepress{
				th{
					background-color: #000;
					font-weight: 600;
				}
				td{
					background-color: #1D1D1E;
					font-weight: 400;
				}
				th,td{
					color: #fff;
					border: 1px solid #3a3a3a;
					white-space: nowrap;
					&.column-1{
						color: #F0AA28;
						font-weight: 600;
						width: 200px;
					}
				}
			}
		}
	}
	
/* ## Compact View
------------------------------------------- */
	@media(min-width: 1200px){
		h4.title{
			min-height: 80px;
		}
		#compare-matrix.compact{
			display: grid;
			grid-template-columns: 270px 1fr;
			align-items: start;
			gap: 60px;
			#chart-filter{
				margin: 0;
			}
			> div{
				width: 100%;
				margin-top: 0;
			}
		}

	}