/* Input */
input.red, textarea.red, select.red
	{
		background-color: #FEE;
	}
input.selectFile
	{
		display: none;
	}
label.selectFile
	{
		color: whitesmoke;
		cursor: pointer;
		text-decoration: underline;
	}
label.selectFile:hover
	{
		color: #ADADAD;
	}
/* Input */

div.value
	{
    text-align: left;
	}

div.hello
	{
		margin-top: 1.8em;
	}

.width550px
	{
		width: 550px !important;
	}

.right
	{
		text-align: right !important;
	}
.success, .green
	{
		background-color: #CFC !important;
	}
.error, .red
	{
		background-color: #FCC !important;
	}
.center
	{
		text-align: center !important;
	}
.floatRight
	{
		float: right !important;
	}
.topmargin20px
	{
		margin-top: 20px;
	}


div.progress
	{
		border: 1px solid grey;
		border-radius: 3px;
		position: relative;
	}
div.progress div
	{
		height: 1.2em;
		background: limegreen;
	}
div.progress font
	{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		text-align: left;
		padding-left: 4px;
		color: grey;
	}
div.progress font + span
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
	}
div.progress font + span + span
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: right;
		padding-right: 4px;
		color: grey;
	}



:root {
  --colour1: limegreen;
  --colour2: lime;
  --speed: 0.8s;
}


.progresso
	{
		box-sizing: border-box;
		width: 100%;
		border-radius: 3px;
		border: 4px solid transparent;
		position: relative;
		padding: 4px;
	}
.progresso:before
	{
		content:'';
		border: 1px solid limegreen;
		border-radius: 3px;
		position: absolute;
		top: -4px;
		right: -4px;
		bottom: -4px;
		left: -4px;
	}
.progresso .bar
	{
		position: absolute;
		border-radius: 3px;
		top: 0;
		right: 100%;
		bottom: 0;
		left: 0;
		background: limegreen;
		width: 0;
		animation: lorem 3s linear infinite;
	}

@keyframes lorem {
  0% {
    left: 0%;
    width: 0%;
		opacity: 0;
  }
  2% {
    width: 15%;
  }
  20% {
    opacity: 1;
  }
  99% {
    width: 0%;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 100%;
		opacity: 0;
  }
}

/* .progresso */
	/* { */
		/* background: lime; */
		/* display: flex; */
		/* justify-content: center; */
		/* align-items: center; */
		/* border: 1px solid grey; */
		/* border-radius: 3px; */
		/* width: 100%; */
	/* } */
/* .bar */
	/* { */
		/* background: limegreen; */
		/* min-height: 20px; */
		/* border-radius: 3px; */
		/* width: 100%; */
		/* background-color: var(--colour2); */
		/* background-image: repeating-linear-gradient( */
			/* 45deg, */
			/* transparent, */
			/* transparent 40px, */
			/* var(--colour1) 40px, */
			/* var(--colour1) 80px */
		/* ); */

		/* animation: slide var(--speed) linear infinite; */
		/* will-change: background-position; */
	/* } */
/* @keyframes slide { */
  /* from { */
    /* background-position-x: 0; */
  /* } */
  /* to { */
    /* background-position-x: 100%; */
  /* } */
/* } */


/* @media only screen and (max-width: 450px) */
	/* { */
		/* width: calc(113px * 3); */
	/* } */
/* @media only screen and (max-width: 350px) */
	/* { */
		/* width: calc(113px * 2); */
	/* } */


.filedropper
	{
		position: fixed;
		visibility: hidden;
		opacity: 0;
		font-size: 38pt;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: all 300ms;
		background: rgba(0, 0, 0, 0.5);
	}
.show
	{
		visibility: visible;
		opacity: 1;
		font-size: 48pt;
	}
.def
	{
	}
.nope
	{
		background: rgba(255, 128, 128, 0.5);
	}
.successs
	{
		background: rgba(128, 255, 128, 0.8);
	}
.filedropper div
	{
		display: flex;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: absolute;
		border-radius: 60px;
		margin: 40px;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
		pointer-events: none;
		font-weight: bold;
		border: 16px dashed #CCC;
		color: #CCC;
	}
.filedropper.def div
	{
	}
.filedropper.nope div
	{
		border: 16px dashed #F55;
		color: #BA0000;
	}
.filedropper.successs div
	{
		border: 16px dashed #4F4;
		color: #00BA00;
	}