/**************************************************************/
/* 	Archivo:	 css_style.css   
/* 	Creado para: http://ceroma.mx/   
/* 	Creado en: Desarrollado en: On Line Weaver Sites 1.4.3 http://www.nyda.mx   
/* 	Creado por: Jakerkat   
/**************************************************************/
/* Iconos de opciones */
a.rotate{
	margin:0px 5px;
	width:25px;
	height: 25px;
	text-indent: -999px;
	overflow: hidden;
	display:inline-block;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
	background-image:url("images/iconos/rotate_img.png");
	cursor:pointer;
}

/* Botón para fotos del celular */
a[title="camera"]{
	margin:0px 5px;
	width:42px;
	height: 42px;
	text-indent: -999px;
	overflow: hidden;
	display:inline-block;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
	background-image:url("images/iconos/camera.png");
	cursor:pointer;
}
/* Botón para fotos del celular */
a[title="file"]{
	margin:0px 5px;
	width:42px;
	height: 42px;
	text-indent: -999px;
	overflow: hidden;
	display:inline-block;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
	background-image:url("images/iconos/file.png");
	cursor:pointer;
}
/* Cuadro para subir imagenes */
.upldFile {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 700px;
	label {
	    display:flex;
	    width: 100%;
	    min-height: 120px;
	    border: 2px dashed #3b82f6;
	    border-radius: 20px;
	    background: #f8fbff;
	    align-items: center;
	    justify-content: center;
	    cursor: pointer;
	    transition: all .3s ease;
	    text-align: center;
	    padding: 20px;
	    flex-wrap: wrap;
	    gap:5px;
	}
	label:hover {
	    background: #eef5ff;
	    border-color: #2563eb;
	}
	label.dragover {
	    background: #dbeafe;
	    border-color: #1d4ed8;
	    transform: scale(1.01);
	}
	input {
		display:none;
	}
	.drop{
		display:inline-flex;
		gap:5px;
		align-items: center;
		svg{
			fill:#3b82f6;
		}
	}
	.search{
		background-color:#3b82f6;
		padding:5px 10px;
		text-align:center;
		border-radius:4px;
		color:#FFF;
	}
	.search:hover{
		background:#CCC;
	}
	.formats{
		width:100%;
		font-size:0.9em;
		color:#666;
	}
}


/* Listado de archivos */
.imageList{
	display:block;
}
.fileList{
	width: 100%;
	margin:0px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width:700px;
	border: 1px solid #3b82f6;
	border-radius: 5px;
	background: #f8fbff;
	flex-direction: column;
	.download{
		display:flex;
		color:#666;
		fill:#666;
		justify-content: flex-end;
		margin:5px 0px;
		width: 100%;
	}
	.download:hover{
		color:#CCC;
		fill:#CCC;
	}
	> div{
		> p{
			display:flex;
			padding:4px 8px;
			margin:0px;
			gap:5px;
			align-items: center;
			.fileName{
				font-size:0.7em;
				 text-align:left;
				 width:100%;
			}
			.fileSize{
				color:#666;
				font-size:0.85em;
				white-space: nowrap;
			}
			.view{
				display:flex;
				fill:#3b82f6;
				svg{
					width:32px;
					height:32px;
				}
			}
			.trash{
				display:flex;
				fill:#a40606;
				svg{
					width:32px;
					height:32px;
				}
			}
			
		}
	}
}

/* Barra de progreso */
.progress p
{
	display: block;
	width: 240px;
	padding: 6px 5px;
	margin: 2px 0;
	border: 1px solid #CCC;
	border-radius: 5px;
	background: #eee url("images/iconos/progress.png") 100% 0 repeat-y;
	margin:0px auto;
	margin-bottom:5px;
}
.progress div
{
	display: block;
	width: 240px;
	margin: 2px 0;
	margin:0px auto;
	text-align:left;
	font-size:0.7em;
	font-family: "Arial", "Verdana", serif;
	overflow:hidden;
	white-space: nowrap;
	color:#666666;
}

.progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

.progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}