.file{

	& .body{
			position: relative;
			display: inline-block;
			width: 100%;
			height: 300px;
			padding: 8px;
			background: $c-w;
			@include bs-1;

			
		& .cont{
			position: relative;
			display: inline-block;
			float: left;
			margin: 4px;
			height: 160px;
			width: 150px;
			border-radius: 4px;

			overflow: hidden;
			cursor: pointer;
			background-color: $c-surface;
			@include interaction-surface;	
			@include transition(.150s, emph);
			border: 0.1px solid $c-divider;
			//border: 0.5px solid red; /*---------------------------------------------*/

			& > .img{
				position: absolute;
				width: 100%;
				height: 100%;

				//border:  1px solid blue; /*---------------------------------------------*/		
			}

			& .des{
				position: absolute;
				width: 100%;
				bottom: 0px !important;
				height: 32px;
				overflow: hidden;
				background: $c-w;

				cursor: pointer;   
				user-select: none;	
				display: flex;
				align-items: center;

				@include interaction-white;
			    
				//border: 0.5px solid green; /*---------------------------------------------*/      	   	     

				 & >  .img { 
				 	width: 28px;
				 	height: 24px;
				 	margin-left: 4px;
				 	opacity: 1 !important;

				 	//border: 0.5px solid green; /*---------------------------------------------*/   
				 }
				 
				 & >  label { 
				 	position: relative;
				 	display: inline-block;
				 	width: calc(100% - 4px);
				 	margin-left: 4px;
			    	//font-weight: 500;
			        pointer-events:none;   
				    user-select: none;		    	
			    	white-space: nowrap;
					text-overflow: ellipsis;
					text-wrap:none; 
					overflow: hidden;

				 	@include font(body2, $c-b);
					opacity: 1 !important;


				   //border: 0.5px solid blue; /*---------------------------------------------*/							
				 }
				 

	         // border: 0.5px solid blue; /*---------------------------------------------*/	


			}/*--des*/


			& .check{
				position: absolute;
				width: 48px;
				height: 48px;
				top: 4px; 
				right: 4px;	
				padding: 4px;
	      		width:  28px;
			    height: 28px;
			    border-radius: 50%;
			    opacity: 0;	

			    //border: 0.5px solid green; /*---------------------------------------------*/

			    & svg{
			    	position: absolute;
			    	top: 0px;
			    	left: 0px;
			    	width:  24px;;
			   	    height: 24px;;
	  				fill: $c-w;

					pointer-events:none;   
					user-select: none;	
					transition: all 0.250s;	
					border-radius: 33.33;  
					opacity: 0;
					//border: 0.5px solid yellow; /*---------------------------------------------*/      	   	   
			    }/*svg*/

				    &:hover{
				    	& svg {  opacity: 0.54;  }
				    }/*hover*/

			   }/*&--check*/	

			   	&:hover{
			    	& .check{ 
			    		border: 2px solid $c-p;
			    		opacity: 1;	  
			    	}
			    }/*hover*/

			    &:active{
			    	transform: scale(0.95);
			    }/*hover*/

		}/*cont*/


		.cont-checked{
			& .check{ 
				border: 2px solid $c-p;
				opacity: 1;	  
				  & svg{
				  	opacity: 1;	
				  	fill: $c-p;
				  }
			}	 	
			@include bs-8;
		 }/*cont-checked*/


		.cont-empty{
			position: relative;
			display: inline-block;
			width: 200px; //andry
			// width: 120px;
			height: 200px; //andry
			// height: 120px;
			margin: auto; //andry
			// margin: 16px;
			// background: $c-surface-l; // estaba descomentado, es el color de fondo gris que tiene por defecto
			border-radius: 10%; //andry
			// border-radius: 50%;
			@include align-center;
			@include centerFlexColum;
			

			//border: 0.5px solid red; /*---------------------------------------------*/ 

			    & > svg{
			    	position: relative;
			    	display: inline-block;
			    	width:  auto; //andry
			    	// width:  36px;;
			   	    height: 70px; //andry
			   	    // height: 36px;;
	  				fill: $c-b;
	  				opacity: 0.54;

					@include selectNo;	
					@include leftFlex;

					//border: 0.5px solid yellow; /*---------------------------------------------*/      	   	   
			    }/*svg*/

				 & >  label { 
				 	position: relative;
				 	display: inline-block;
				 	width: 100%;
				 	margin-left: 4px;
			    	//font-weight: 500;
			        pointer-events:none;   
				    user-select: none;		    	
			    	white-space: nowrap;
					text-overflow: ellipsis;
					text-wrap:none; 
					overflow: hidden;
					text-align: center;

				 	@include font(overline, $c-b);
					opacity: 1 !important;


				  // border: 0.5px solid blue; /*---------------------------------------------*/							
				 }

				 &-upload{
					 @include  interaction-color-ramdon($c-surface-file); //andry
					//  @include  interaction-color-ramdon($c-surface-l);
					  & > svg{ 

					  	fill: $c-p; 
					  	opacity: 1;

					  }
				 }


		 }/*cont-checked*/





	}/*body*/	




}/*files*/

@media screen and (max-width: 780px) {
	.file{
		& .body{
			height: 100%;
		}
	}
	
}