@charset "UTF-8";
/* CSS Document */

		html, body {
			font-family:Verdana, "Lucida Grande", "Lucida Sans", "DejaVu Sans", "sans-serif";
			font-size:15px;
			line-height: 1.5;
			font-weight: 600;
		}
		html.login {
			background-image: url('../img/foto-2.jpg');
			background-size: cover;
		}
		html.upload {
			background-image: url('../img/foto-1.jpg');
			background-size: cover;
		}
		body {
			background: -webkit-gradient(linear,left top, right top,color-stop(63%, rgba(243, 147, 0, 0.7)), color-stop(63%, #222));
			background: -webkit-linear-gradient(left,rgba(243, 147, 0, 0.7) 63%, #222 63%);
			background: -o-linear-gradient(left,rgba(243, 147, 0, 0.7) 63%, #222 63%);
			background: linear-gradient(90deg,rgba(243, 147, 0, 0.7) 63%, #222 63%);
			margin: 0;
			width: 100vw;
			height: 100vh;
		}
		h1 {font-size:1.3em}
		h2 {font-size:1.2em}
		h3 {font-size:1.1em}
		h4 {font-size:1em}
		h5 {font-size:0.9em}
		h6 {font-size:0.8em}

		a, a:visited, a:active
		{
			text-decoration: none;
		}

		.contenitore {
			width: 100%;
			height: 100%;
			position: relative;
		}
		.contenuto {
			background: #fbfbfb;
			background-image: -webkit-gradient(linear,left top, left bottom,from(#fbfbfb),to(#ededed));
			background-image: -webkit-linear-gradient(#fbfbfb,#ededed);
			background-image: -o-linear-gradient(#fbfbfb,#ededed);
			background-image: linear-gradient(#fbfbfb,#ededed);
			width: 33%;
			min-width: 310px;
			margin: 0 auto;
			padding: 2%;
			border-radius: 1px;
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%);
			    -ms-transform: translateX(-50%) translateY(-50%);
			        transform: translateX(-50%) translateY(-50%);
			-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
			        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
			-webkit-filter: drop-shadow(0 14px 10px rgba(0,0,0,0.2));
			        filter: drop-shadow(0 14px 10px rgba(0,0,0,0.2));
		}
		.contenuto::before {
			content: "";
			display: block;
			width: 100%;
			height: 40px;
			background-image: -webkit-linear-gradient(273deg,transparent 48%,#fbfbfb 49%);
			background-image: -o-linear-gradient(273deg,transparent 48%,#fbfbfb 49%);
			background-image: linear-gradient(177deg,transparent 48%,#fbfbfb 49%);
			top: -39px;
			left: 0;
			position: absolute;
		}
		.contenuto::after {
			content: "";
			display: block;
			width: 100%;
			height: 40px;
			background-image: -webkit-linear-gradient(273deg,#ededed 48%,transparent 49%);
			background-image: -o-linear-gradient(273deg,#ededed 48%,transparent 49%);
			background-image: linear-gradient(177deg,#ededed 48%,transparent 49%);
			bottom: -39px;
			left: 0;
			position: absolute;
		}

		.contenuto img {
			float: right;
			max-width: 100px;
			display: block;
			margin-top: -10px;
		}

		form span {
			display:-ms-grid;
			display:grid;
			clear: both;
			margin-bottom:20px;
			position: relative;
		}
		form input {
			height: 30px;
			padding: 10px 10px 10px 45px;
			display: block;
			font-size:15px;
			border: none;
		}
		form ::-webkit-input-placeholder {
			font-style: italic;
		}
		form :-ms-input-placeholder {
			font-style: italic;
		}
		form ::-ms-input-placeholder {
			font-style: italic;
		}
		form ::placeholder {
			font-style: italic;
		}

		/*Form login*/
		span#user::before {
			content: "\e800";
			color: #f39301;
			position: absolute;
			top: 12px;
			left: 15px;
			font-family: 'fontello';
			font-size: 19px;
			font-weight:400;
		}
		span#pw:hover::before, span#pw:active::before, span#pw:focus::before {
			content: "\e803";
		}

		span#pw::before {
			content: "\e802";
			color: #f39301;
			position: absolute;
			top: 12px;
			left: 15px;
			font-family: 'fontello';
			font-size: 19px;
			font-weight:400;
		}
		form button, .button {
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: 1px;
			font-size: 20px;
			padding: 15px 60px;
			cursor: pointer;
			position:relative;

			border: none;
			background: #f39300;
			color: #222;
			border-bottom: 3px solid #cc7a00;
			-webkit-transition: all 0.1s linear;
			-o-transition: all 0.1s linear;
			transition: all 0.1s linear;
			margin-top:4px;

		}
		form button:hover {
			background: #222;
			color: #f39300;
			margin-top:7px;
			border-bottom: 0px solid #222;
		}
		form button:after {
			content: "";
			opacity: 0;
			width: 0;
			position: absolute;
			height: 0;
			border-top: 27px solid transparent;
			border-bottom: 27px solid transparent;
			border-left: 24px solid #f39300;
			right: -12px;
			top: 0;
			-webkit-transition: all 0.1s linear;
			-o-transition: all 0.1s linear;
			transition: all 0.1s linear;
		}
		form button:hover::after {
			right: -23px;
			opacity: 1;
			border-left: 24px solid #222222;
		}

		/*Form Upload*/
		input[type="file"] {
			width: 0.1px;
			height: 0.1px;
			opacity: 0;
			overflow: hidden;
			position: absolute;
			z-index: -1;
		}
		input[type="file"] + label {
			color: white;
			background-color: #333;
			display: inline-block;
			height: 30px;
			padding: 10px 10px 10px 45px;
			font-size: 15px;
			border: none;
			font-weight: 400;
			letter-spacing: .9px;
			line-height: 2;
			cursor: pointer;
			border-bottom:3px solid #000;
		}

		input[type="file"]:focus + label,
		input[type="file"] + label:hover {
			background-color: #f39300;
			border-bottom: 0px solid transparent;
			margin-top:3px;
		}
		span#file::before {
			content: "\e80a";
			color: #f39301;
			position: absolute;
			top: 12px;
			left: 15px;
			font-family: 'fontello';
			font-size: 19px;
			font-weight:400;
		}

		span#file:hover::before, span#file:active::before, span#file:focus::before {
			color: #fff;
			padding-top:3px;
		}


		html.login .icon-load {
			position: absolute;
			right: 5%;
			bottom: 40px;
			display: none;
		}
		html.upload .icon-load {
			position: absolute;
			right: 48%;
			bottom: 15px;
			display: none;
		}

		.filereport
		{
			font-size: 14px;
			font-weight: normal;
			color: #333;
		}

		.delete
		{
			font-weight: bold;
			color: white;
			background-color: red;
			border-bottom: 2px darkred;
			display: inline-block;
			padding: 4px;
			margin-left: 10px;
		}

		.delete:hover
		{
			background-color: darkred;
		}



/*ANIMAZIONI*/
/*
   Animation example, for spinners
*/
.animate-spin {
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
  display: inline-block;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}