.popup.preset .content
{
	position: relative;
	display: flex;
	flex-direction: row;
	max-width: 50vw;
	/* flex-wrap: wrap; */
}

	.popup.preset .content h1
	{
		margin-top: 0;
		margin-bottom: 0.5em;
		font-size: 1.3em;
		text-transform: uppercase;
	}

		.popup.preset .rating
		{
			position: absolute;
			right: 250px;
			top: -50px;
			opacity: 0;
			transition: opacity 0.3s ease, transform 0.3s ease;
			z-index: 1;
		}

		.popup.preset:hover .rating
		{
			transform: translateY(50px);
			opacity: 1;
			transition: opacity 0.3s ease, transform 0.3s ease;
		}

		.popup.preset .rating i
		{
			padding: 2px;
			font-size: 0.8em;
			cursor: pointer;
			opacity: 0.8;
			color: #333;
			/* margin-left: 0.25em; */
		}

		.popup.preset .rating i:hover
		{
			opacity: 1;
		}

		.popup.preset .rating i.on
		{
			color: #ffb555;
		}
		.popup.preset .rating i.half
		{
			background: linear-gradient(to right, #ffb555 100%, #333 50%);
			-webkit-background-clip: text;
			background-clip: text;
			color: #00000000;
		}
		.popup.preset .rating i.set
		{
			text-shadow: -1px -1px 0px #ffb55566,
						  1px -1px 0px #ffb55566,
						  1px  1px 0px #ffb55566,
						 -1px  1px 0px #ffb55566;
			animation: bouncestar 0.5s ease;
		}
		@keyframes bouncestar
		{
			0%   {transform: rotate(0deg) scale(1);}
			25%  {transform: rotate(6deg) scale(1.1);}
			50%  {transform: rotate(-6deg) scale(0.9);}
			75%  {transform: rotate(3deg) scale(1.05);}
			100% {transform: rotate(0deg) scale(1);}
		}

		.popup.preset .content .about
		{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			/* min-height: 400px; */
			max-height: 80vh;
			min-height: 200px;
			overflow-y: auto;
			/* padding: 1em; */

		}

		.popup.preset .content .about h1
		{
			position: relative;
			margin-bottom: 0.25em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.popup.preset .content .about .isinactive
		{
			/* position: absolute; */
			float: right;
			top: 2px;
			right: 0px;
			font-size : 0.9em;
		}
		.popup.preset .content .about:not(.inactive) .isinactive
		{
			display: none;
		}


		.popup.preset .content .about .core
		{
			flex-grow: 1;
		}
		.popup.preset .content .about .core p.description
		{

			margin-top: 1em;
		}

		.popup.preset .content .about .core p textarea
		{
			padding: 4px 8px;
			font-size: 1em;
			border-radius: 8px;
			min-width:  100%;
			min-height: 5.5em;
			/* min-height: 100%; */
			background-color: #ffffff15;
			color: #eee;
			border: 1px solid #eeeeee40;
			resize: vertical;
			max-height: 60vh;
		}
		.popup.preset .content .about .core p textarea.data
		{
			min-height: 20em;
		}
		.popup.preset .content .about .core p .error
		{
			font-size: 0.9em;
			/* text-transform: uppercase; */
			margin-top: 12px;
			margin-right: auto;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.popup.preset .content .about .core p .error strong{color: #ca6572;}
		.popup.preset .content .about .core p textarea:focus
		{
			outline: none;
			border: 1px solid #eeeeee60;
		}

		.popup.preset .content .about .core p form
		{
			display: flex;
			justify-content: flex-end;
		}
		.popup.preset .content .about .core p button
		{
			max-width: 3em;
			margin-left: 0.25em;
		}

		.popup.preset .content .about .detailed
		{
			/* flex-grow: 1; */
			/* align-items: flex-end; */
		}
		.popup.preset .content .about:not(.editable) .edit
		{
			display: none;
		}
		.popup.preset .content .about .edit
		{
			background-color: #00000033;
			border-radius: 10px;
			padding: 0.5em;
			display: flex;
			/* 4 columns */
			/* grid-template: auto / 1fr 1fr 1fr 1fr; */
			
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			top: 0px;
			margin-bottom: 1em;
			user-select: none;
			/* min-width: 100%; */
		}

		@media screen and (((min-width: 1401px) and (max-width: 1800px)) or (max-width: 810px))
		{
			.popup.preset .content .about .edit
			{
				grid-template: auto / 1fr 1fr;
				overflow: hidden;
			}
		}

		.popup.preset .content .about .edit h1
		{
			display: none;
			/* margin-top: 0.5em; */
			/* margin-bottom: 0.25em; */
			/* min-width: 100%; */
		}

			.popup.preset .content .about .edit a
			{
				display: flex;
				flex-direction: row;
				overflow: hidden;
				padding: 0.25em;
				/* padding-right: 1.6em; */
			}

			.popup.preset .content .about .edit a:hover
			{
				background-color: #ffffff20;
				border-radius: 8px;
			}

			.popup.preset .content .about .edit a span
			{
				overflow: hidden;
				text-overflow: ellipsis;
			}

			/* .popup.preset .content .about       .edit a.replace
			{
				pointer-events: none;
				opacity: 0.25;
				text-decoration: line-through;
			} */
			.popup.preset .content .about.inactive       .edit a.inactive span::after {content: " active";}
			.popup.preset .content .about:not(.inactive) .edit a.inactive span::after {content: " inactive";}
			.popup.preset .content .about:not(.inactive) .edit a.inactive i.fa-eye::before {--fa: "\f070";}

			.popup.preset .content .about 		 		 .edit a.delete span::after {content: "Delete preset";}
			.popup.preset .content .about 		 		 .edit a.delete.confirm span::after {content: "Confirm";}
			.popup.preset .content .about 		 		 .edit a.delete.confirm
			{
				text-align: center;
				text-transform: uppercase;
				font-weight: bold;
				color: #ff6666;
			}
			.popup.preset .content .about:not(.inactive) .edit a.delete.confirm i::before {--fa: "\f071";}

			.popup.preset .content .edit a i {font-size: 0.8em; margin-top: 0.4em; width: 1em;}
			.popup.preset .content .edit a span
			{
				margin-left: 0.75em;
				/* margin-right: 3em; */
				white-space: nowrap;
				flex-grow: 1;
			}

		.popup.preset .content .about .author:before
		{
			content: "By ";
		}
		.popup.preset .content .about .author:hover
		{
			text-transform: uppercase;
			color: #ddd;
		}

		.popup.preset .content .about p
		{
			margin: 0;
			margin-bottom: 1em;
		}

		.popup.preset .content .about .featuring
		{
			text-transform: uppercase;
			font-size: 0.8em;
			opacity: 0.75;
			/* margin-top: 1em; */
		}
		.popup.preset .content .about .product
		{
			text-transform: uppercase;
			font-size: 0.8em;
			margin: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.popup.preset .content .about .product a:not(:nth-of-type(1)):before
		{
			content: " > ";
		}
		.popup.preset .content .about .product a:hover
		{
			color: #ddd;
			transition: color 0.3s ease, transform 0.3s ease;
		}
		.popup.preset .content .about .featuring span:not(:last-of-type):not(:first-of-type)::before {content: ", ";}
		.popup.preset .content .about .featuring span:last-of-type::before       {content: " and ";}

		.popup.preset .content .about .reviews
		{
			border-top: 1px solid #eeeeee40;
			padding-top: 1.5em;
		}
		.popup.preset .content .about .reviews::before
		{
			content: "Reviews";
			text-transform: uppercase;
			font-size: 0.8em;
			opacity: 0.75;
		}
		.popup.preset .content .about .reviews
		{
			margin-top: 1em;
		}

		.popup.preset .content>.download
		{
			position: relative;
			margin-left: 2em;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			border-left: 1px solid #eeeeee10;
			padding-left: 1em;
		}
	
			.popup.preset .content>.download form
			{
				display: flex;
				flex-direction: column;
				flex-grow: 1;
			}

				.popup.preset .content>.download form ul
				{
					margin: 0;
					padding: 0;
					list-style: none;
					user-select: none;
				}

					.popup.preset .content>.download form ul li
					{
						display: flex;
						flex-direction: row;
						align-items: right;
						white-space: nowrap;
					}

					.popup.preset .content>.download form ul li.disabled
					{
						opacity: 0.25;
						pointer-events: none;
					}

						.popup.preset .content>.download form ul li label
						{
							margin-left: 0.5em;
							cursor: pointer;
						}

						.popup.preset .content>.download form ul li input
						{
							accent-color: #eee;
						}

			.popup.preset .content>.download .actions
			{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 100%;
			}


				.popup.preset .content>.download .actions a
				{
					text-transform: uppercase;
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					font-size: 0.7em;
					max-width: 30%;
				}
				.popup.preset .content>.download .actions a
				{
					position: relative;
				}
				.popup.preset .content>.download .actions a i.fa-circle-check
				{
					position: absolute;
					top: 0;
					left: 0;
					font-size: 1.25em;
					color: #eee;
					opacity: 0;
					transform: translateY(1em);
					/* transition: opacity 0.3s ease; */
				}
				.popup.preset .content>.download .actions a.done i.fa-circle-check
				{
					opacity: 1;
					transform: translateY(0em);
					transition: opacity 0.3s ease, transform 0.3s ease;
				}
				.popup.preset .content>.download .actions a i
				{
					font-size: 3em;
					margin-top: 1em;
					margin-bottom: 0.25em;
				}

					.popup.preset .content>.download .actions a i img
					{
						width: 1em;
						height: 1em;
						display: block;
						filter: grayscale(100%);
						-webkit-filter: grayscale(100%);
					}

				.popup.preset .content>.download a:hover i
				{
					color: #eee;
					transform: translateY(-0.15em);
					transition: color 0.3s ease, transform 0.3s ease;
				}

.popup.preset .content .detailed
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin-bottom: 0.5em;
}

	.popup.preset .content .detailed h1
	{
		/* font-size: 1em; */
		min-width: 100%;
		cursor: pointer;
	}

	.popup.preset .content .detailed p
	{
		font-size: 0.9em;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.popup.preset .content .detailed:not(.open) p
	{
		display: none;
	}
	.popup.preset .content .detailed:not(.open) i:nth-of-type(1) {display: none;}
	.popup.preset .content .detailed.open       i:nth-of-type(2) {display: none;}

	.popup.preset .content .detailed i {float: right;}


	.popup.preset .content .detailed p>strong
	{
		text-transform: uppercase;
		font-size: 1em;
		opacity: 0.75;
	}
	.popup.preset .content .detailed .articulations,
	.popup.preset .content .detailed .controllers,
	.popup.preset .content .detailed .settings,
	.popup.preset .content .detailed .keys
	{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.popup.preset .content .detailed p span
	{
		margin-left : 1em;
	}
	.popup.preset .content .detailed p span.inactive
	{
		opacity: 0.5;
	}

@media screen and (max-width: 1150px)
{
	.popup.preset .content
	{
		flex-direction: column;
		/* max-width: 100%; */
	}

	.popup.preset .content>.download
	{
		flex-direction: row;
	}

	.popup.preset .rating
	{
		position: absolute;
		right: 0px;
		top: 0px;
	}
}

@media screen and (max-width: 1400px)
{
	.popup.preset .content
	{
		max-width: 70vw;
	}
}

@media screen and (max-width: 1300px)
{
	.popup.preset .content
	{
		max-width: 80vw;
	}
}

@media screen and (max-width: 1150px)
{
	.popup.preset .content
	{
		flex-direction: column;
		/* max-width: 100%; */
	}

	.popup.preset .content .download
	{
		flex-direction: row;
		border-top: 1px solid #eeeeee40;
		margin-top: 2em;
		padding-top: 0em;
		border-left: none;
	}

		.popup.preset .content .download h1
		{
			margin-right: 2em;
			/* writing-mode: vertical-lr; */
			/* transform: scale(-1, -1); */
		}

		.popup.preset .content .download h1 span
		{
			display: none;
		}
}

@media screen and (max-width: 900px)
{
	.popup.preset .about .detailed
	{
		display: none;
	}
	.popup.preset .content .download h1
	{
		display: none;
	}
}

@media screen and (max-width: 600px)
{
	.popup.preset .content .download h1
	{
		display: inline;
		padding-top: 1em;
	}
	.popup.preset .content .download
	{
		margin-top: 2em;
		flex-direction: column;
	}
}