@import 'src/Components/GlobalStyles/colors';

body {
	.cardsContainer {
		form {
			.card {
				gap: 20px;

				@media (max-width: 700px) {
					flex-wrap: wrap;
				}

				.cardContainer {
					height: auto;
					width: 300px;
					padding-right: 20px !important;
					justify-content: start !important;

					@media (max-width: 900px) {
						width: 200px;
					}

					@media (max-width: 1400px) {
						width: 250px;
						margin: 20px 0 50px;
					}

					svg {
						transform: scale(1.3);
						position: absolute;
						top: 22px;
						right: 18px;
					}

					label {
						font-style: normal;
						font-weight: 600;
						font-size: 24px;
						line-height: 28px;
						padding-bottom: 20px;
						height: auto !important;
					}

					h2 {
						font-style: normal;
						font-weight: 400;
						font-size: 18px;
						line-height: 30px;
						color: #1d1d1d;

						small {
							font-weight: 400;
							font-size: 14px;
							line-height: 17px;
							color: #c3c3c4;
						}
					}

					ol {
						padding-left: 13px;

						li {
							// list-style-image: url('./CheckMark.svg');
							// list-style-image: url('/assets/check-mark.svg');
							list-style: none;
							font-weight: 400;
							font-size: 12px;
							line-height: 14px;
							color: #1d1d1d;
							padding: 10px 0;

							&::before {
								content: '';
								position: absolute;
								display: inline-block;
								height: 10px;
								width: 10px;
								// background-image: url('/assets/check-mark.svg');
								background-color: var(--primary-color);
								-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' viewBox='0 0 6 5' width='10'%3E%3Cpath d='M5.06735 0.15941C5.17103 0.0560331 5.309 -0.0011178 5.45216 1.65693e-05C5.59531 0.00115094 5.73244 0.0604821 5.83462 0.16549C5.93679 0.270498 5.99602 0.41297 5.99981 0.562843C6.00359 0.712715 5.95163 0.858266 5.8549 0.968782L2.91814 4.81523C2.86764 4.87219 2.80669 4.9179 2.73894 4.94963C2.67119 4.98137 2.59802 4.99846 2.52381 4.9999C2.44961 5.00134 2.37589 4.98709 2.30706 4.95801C2.23823 4.92893 2.17571 4.88561 2.12323 4.83064L0.175696 2.79103C0.121461 2.7381 0.0779598 2.67427 0.0477885 2.60336C0.0176172 2.53244 0.00139367 2.45589 8.59092e-05 2.37826C-0.00122186 2.30064 0.012413 2.22353 0.0401768 2.15155C0.0679405 2.07956 0.109265 2.01417 0.161684 1.95927C0.214103 1.90437 0.276543 1.86109 0.345279 1.83202C0.414016 1.80294 0.48764 1.78866 0.56176 1.79003C0.635881 1.7914 0.708978 1.80839 0.776692 1.83999C0.844406 1.87159 0.90535 1.91715 0.955887 1.97395L2.49713 3.58729L5.05336 0.176369C5.05796 0.170434 5.06288 0.164772 5.06808 0.15941Z' fill='currentColor'/%3E%3C/svg%3E");
								mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' viewBox='0 0 6 5' width='10'%3E%3Cpath d='M5.06735 0.15941C5.17103 0.0560331 5.309 -0.0011178 5.45216 1.65693e-05C5.59531 0.00115094 5.73244 0.0604821 5.83462 0.16549C5.93679 0.270498 5.99602 0.41297 5.99981 0.562843C6.00359 0.712715 5.95163 0.858266 5.8549 0.968782L2.91814 4.81523C2.86764 4.87219 2.80669 4.9179 2.73894 4.94963C2.67119 4.98137 2.59802 4.99846 2.52381 4.9999C2.44961 5.00134 2.37589 4.98709 2.30706 4.95801C2.23823 4.92893 2.17571 4.88561 2.12323 4.83064L0.175696 2.79103C0.121461 2.7381 0.0779598 2.67427 0.0477885 2.60336C0.0176172 2.53244 0.00139367 2.45589 8.59092e-05 2.37826C-0.00122186 2.30064 0.012413 2.22353 0.0401768 2.15155C0.0679405 2.07956 0.109265 2.01417 0.161684 1.95927C0.214103 1.90437 0.276543 1.86109 0.345279 1.83202C0.414016 1.80294 0.48764 1.78866 0.56176 1.79003C0.635881 1.7914 0.708978 1.80839 0.776692 1.83999C0.844406 1.87159 0.90535 1.91715 0.955887 1.97395L2.49713 3.58729L5.05336 0.176369C5.05796 0.170434 5.06288 0.164772 5.06808 0.15941Z' fill='currentColor'/%3E%3C/svg%3E");
								-webkit-mask-repeat: no-repeat;
								mask-repeat: no-repeat;
								-webkit-mask-size: contain;
								mask-size: contain;
								background-repeat: no-repeat;
								background-size: contain;
								margin-top: 3px;
								margin-left: -15px;
							}
						}
					}
				}
			}

			.numberCard {
				.cardContainer {
					label {
						font-weight: 600 !important;
						font-size: 34px !important;
						line-height: 51px !important;
						color: #1d1d1d !important;
						text-align: center;
					}

					svg {
						display: none;
					}

					h2 {
						font-weight: 400;
						font-size: 16px;
						line-height: 20px;
						text-align: center;
					}

					ol {
						display: none;
					}
				}
			}
		}
	}
}

.submitButton {
	margin-top: 20px !important;
}