body {
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	align-items: start;
	cursor: default;
}
section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap:10px;
	width: 380px;
	height: 900px;
}
#image-circles {
	display: flex;

	input[type=checkbox] {
		appearance: none;
		width : 40px;
		height: 40px;
		background-color: #222;
		border-radius: 50%;
		padding: 5px;

		&:checked {
			background-color: #333;
		}
		&::after {
			display: flex;
			content: attr(name);
			font-weight: 700;
			width: 100%;
			height: 100%;
			text-align: center;
			justify-content: center;
			align-items: center;
		}
	}
}
#crops {
	display: flex;
	flex-direction: column;
	gap:5px;
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	padding-right: 15px;
	width: 100%;
	overflow: hidden auto;

	form {
		display: flex;
		flex-direction: column;
		background-color: #333;
		border-radius: 10px;
		border: 2px solid #333;
		contain: paint;
		font-size: 14px;
		width: 100%;

		.controls {
			background-color: #000;
			padding: 5px;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			gap:5px;

			header {
				display: flex;
				gap:5px;
				justify-content: space-between;
				align-items: center;

				button {
					width :18px;
					height:18px;
					background-color: transparent;
					padding: 0;
					border:none;
					appearance: none;
					position: relative;
					color: #aaa;

					&:after {
						content: 'x';
						position: relative;
						top:-2px;
						font-size: 18px;
						display: flex;
						font-weight: 700;
						width: 100%;
						height: 100%;
						text-align: center;
						justify-content: center;
						align-items: center;

					}
					&:hover {
						color :#fff
					}
				}
				input {
					border: 1px solid transparent;
					padding: 0;
					border-radius: 50%;
					width:16px;
					height:16px;
					aspect-ratio: 1;
					background: none;

					&:hover {
						border: 1px solid #fff;
					}
				}
			}
		}
		select {
			//appearance: none;
			background: #000;
			color: #fff;
			border: none;
			display: grid;
			grid-template-areas: "select";
			align-items: center;
			border-radius: 3px;

			&::after {
				grid-area: select;
				justify-content: end;
				content: " ";
				width: 0.8em;
				height: 0.5em;
				background: #fff;
				clip-path: polygon(100% 0%, 0 0%, 50% 100%);
				z-index: 9;
			}
			&:hover {
				background-color: #222;
			}
		}
		.dimensions {
			display: flex;
			gap: 5px;

			& p {
				margin: 0;
				width: 50%;
				text-align: center;
			}
		}
	}
}
.radio {
	display: grid;
	width: 100%;
	border-radius: 5px;
	contain: paint;
	font-size: 14px;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;

	&.resolution {
		height: 32px;
	}
	&.aspect-ratio {
		height: 24px;
	}

	input[type=radio] {
		appearance: none;
		height: 100%;
		margin: 0;
		z-index: -1;
		background-color: lch(20% 0 0 / 0.6);

		&:after {
			content: attr(value);
			width: 100%;
			height: 100%;
			display: flex;
			text-align: center;
			align-items: center;
			justify-content: center;
		}
		&:hover {
			filter: brightness(1.5);
		}
		&:checked {
			background-color: lch(30% 0 0);
			margin: 0;
			padding: 0;

			&:hover {
				filter: brightness(1.2);
			}
		}
	}
}
#add_new {
	appearance: none;
	text-align: center;
	background-color: #222;
	border-radius: 15px;
	padding: 5px 15px;
	color: #fff;
	border:none
}