section.uploader .incomplete
{
	outline: 2px solid red;
	animation: angry 0.5s;
}

/*Angry shaking animation, back and forth a few times */
@keyframes angry
{
	0% {transform: rotate(0deg);}
	5% {transform: rotate(3deg);}
	10% {transform: rotate(0deg);}
	15% {transform: rotate(-3deg);}
	20% {transform: rotate(0deg);}
	25% {transform: rotate(3deg);}
	30% {transform: rotate(0deg);}
	35% {transform: rotate(-3deg);}
	40% {transform: rotate(0deg);}
	45% {transform: rotate(3deg);}
	50% {transform: rotate(0deg);}
	55% {transform: rotate(-3deg);}
	60% {transform: rotate(0deg);}
	65% {transform: rotate(3deg);}
	70% {transform: rotate(0deg);}
	75% {transform: rotate(-2deg);}
	80% {transform: rotate(0deg);}
	85% {transform: rotate(1deg);}
	90% {transform: rotate(0deg);}
	95% {transform: rotate(-1deg);}
	100% {transform: rotate(0deg);}
}

section.uploader .content
{
	color: #fff;
	display: flex;
	flex-direction: row;
	height: 100%;
	/* min-width: 40vw; */
	text-transform: uppercase;
	padding: 20px;
}
	section.uploader .content h2 {margin: 0; margin-bottom: 1em; text-align: center;}

	section.uploader .content section .progress
	{
		position: absolute;
		right: -30px;
		top: 0%;
		height: 100%;
		font-size: 1.3em;
		display: flex;
		flex-direction: row;
		align-items: center;
		text-shadow: 0px 4px 3px #000000;
		/* overflow: hidden; */
		transform: translateX(100%);
	}
		section.uploader .content section .progress .filelist
		{
			list-style: none;
			overflow: hidden;
			overflow-y: scroll;
			/* padding-right: 0em; */
			/* max-width: 0px; */
			max-width: 100%;
			max-height: 100%;
			/* opacity: 0;	 */
			opacity: 1;
			transition: max-width 0.3s ease, opacity 0.3s ease, padding-right 0.3s ease;
			white-space: nowrap;
			font-size: 0.7em;
		}
		section.uploader .content section .progress .filelist::-webkit-scrollbar {display: none;}

		section.uploader .content section .progress:hover .filelist
		{
			max-width: 100%;
			opacity: 1;
			transition: max-width 0.3s ease, opacity 0.3s ease, padding-right 0.3s ease;
		}
			section.uploader .content section .progress .filelist li
			{
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-right: 2em;
				direction: rtl;
				text-align: left;
			}
			section.uploader .content section .progress .filelist li:not(.active) {opacity: 0.3;}
			section.uploader .content section .progress .filelist li.active {animation: bouncenote 0.24s;}
		section.uploader .content section .progress .complete
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			white-space: nowrap;
		}
		section.uploader .content section .progress .complete i
		{
			font-size: 2em;
			margin-bottom: 0.25em;
		}

	section.uploader .content section.preview/*:nth-of-type(1)*/
	{
		display: flex;
		flex-direction: column;
		padding-right: 3em;
		justify-content: space-between;
	}

		section.uploader.exists  .content .features,
		section.uploader.missing .content .features
		{display: none;}
		/* it should wiggle angrily when activated */
		section.uploader:not(.exists)  .content .existing {display: none;}
		section.uploader:not(.missing) .content .empty    {display: none;}

		section.uploader .content .existing,
		section.uploader .content .empty
		{
			animation: angry 0.5s;
			text-align: center;
			max-width: 245px;
			color: #ff5555;
			font-weight: 500;
			padding-top: 2.5em;
			flex-grow: 1;
		}


		section.uploader .content .features
		{
			/* border: 1px solid red; */
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			margin-left: 30px;
			/* align-items: center; */
			justify-content: center;
			flex-grow: 1;
		}
			section.uploader .content .features li
			{
				padding: 10px;
				opacity: 0.2;
			}
			section.uploader .content .features li.present
			{
				opacity: 1;
			}
			/* bounce animation on set present */
			section.uploader .content .features li.present
			{
				animation: bounce 0.5s;
			}

			section.uploader .content .features li input[type="checkbox"]
			{
				margin-right: 0.5em;
				transform: translateY(1px);
			}

	section.uploader .content section:nth-of-type(2)
	{
		position: relative;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		/* border: 1px solid yellow; */
	}

	section.uploader .content section:nth-of-type(2) form h2
	{
		margin-top: 1em;
	}

section.uploader .disabled:not(form),
section.uploader form.disabled input[type="text"],
section.uploader form.disabled .hint,
section.uploader form.disabled h2,
section.uploader form.disabled textarea,
section.uploader form.disabled button:not([name="cancel"])
{
	opacity: 0.33;
	pointer-events: none;
}
section.uploader .hint
{
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: center;
}
section.uploader form
{
	display: flex;
	flex-direction: column;
}

	section.uploader form input[type="text"],
	section.uploader form textarea
	{
		color: #ccc;
		background-color: #34363b;
		padding: 1em;
		margin-top: 0.5em;
	}
	section.uploader form textarea
	{
		border: none;
		border-radius: 6px;;
	}

	section.uploader form .fields
	{
		display: flex;
		flex-direction: column;
	}
	section.uploader form .fields.horizontal
	{
		flex-direction: row;
		/* border: 1px solid blue; */
		align-items: flex-end;
		justify-content: space-between;
		flex-grow: 1;
	}
		section.uploader form .fields.horizontal>*
		{
			flex-grow: 1;
			margin: 0.3em;
		}
		section.uploader form .fields .field
		{
			display: flex;
			flex-direction: column;
		}

		section.uploader .preview.rows3 .ArticulateNote {animation: showallnotes3 3s infinite;}
		section.uploader .preview.rows4 .ArticulateNote {animation: showallnotes4 5s infinite;}
		section.uploader .preview.rows5 .ArticulateNote {animation: showallnotes5 8s infinite;}
		section.uploader .preview.rows6 .ArticulateNote {animation: showallnotes6 12s infinite;}
		section.uploader .preview.rows7 .ArticulateNote {animation: showallnotes7 12s infinite;}
		section.uploader .preview.rows8 .ArticulateNote {animation: showallnotes8 12s infinite;}

		/* scroll them up slowly to -200%, then back down */
		section.uploader .ArticulatePanel.rows2 .ArticulateController {animation: showallcontrollers2 5s infinite;}
		section.uploader .ArticulatePanel.rows3 .ArticulateController {animation: showallcontrollers3 5s infinite;}
		section.uploader .ArticulatePanel.rows4 .ArticulateController {animation: showallcontrollers4 5s infinite;}
		section.uploader .ArticulatePanel.rows5 .ArticulateController {animation: showallcontrollers5 5s infinite;}
		section.uploader .ArticulatePanel.rows6 .ArticulateController {animation: showallcontrollers6 5s infinite;}
		section.uploader .ArticulatePanel.rows7 .ArticulateController {animation: showallcontrollers7 5s infinite;}
		section.uploader .ArticulatePanel.rows8 .ArticulateController {animation: showallcontrollers8 5s infinite;}
		section.uploader .ArticulatePanel.rows9 .ArticulateController {animation: showallcontrollers9 5s infinite;}
		section.uploader .ArticulatePanel.rows10 .ArticulateController {animation: showallcontrollers10 5s infinite;}
		section.uploader .ArticulatePanel.rows11 .ArticulateController {animation: showallcontrollers11 5s infinite;}
		section.uploader .ArticulatePanel.rows12 .ArticulateController {animation: showallcontrollers12 5s infinite;}
		section.uploader .ArticulatePanel.rows13 .ArticulateController {animation: showallcontrollers13 5s infinite;}
		section.uploader .ArticulatePanel.rows14 .ArticulateController {animation: showallcontrollers14 5s infinite;}
		section.uploader .ArticulatePanel.rows15 .ArticulateController {animation: showallcontrollers15 5s infinite;}
		section.uploader .ArticulatePanel.rows16 .ArticulateController {animation: showallcontrollers16 5s infinite;}