@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');

.fileman-viewfolder
{
	margin: 0;
	box-sizing: border-box;
    padding: 1rem;
	min-height: 95%;
	z-index: 1000000;
}
#formData{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.drop_active
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    border: 5px dashed #555;
	border-radius: 5px;
	background-color: rgba(167, 185, 202, 0.2);
}
/* Nombre del archivo / carpeta */
.fileman-viewfolder div div a p:nth-child(2){
	font-weight: 500;
}
.icon
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}
.default-icon{
	margin: 0;
	box-sizing: border-box;
	padding: 0.5rem 1rem;
}
.tool_bar_btn{
	text-align: center;
	padding: 5px;
	transition: .3s;
	flex-grow: 1;
	color: #333;
}
.tool_bar_btn:hover{
	cursor: hand;
	background-color: #bbb;
	color: #333;
}	
.tool_bar_btn p{
	margin:0;
}
.tool_bar_cut{
	pointer-events: none;
}
.tool_bar_copy{
	pointer-events: none;
}
.a_fileman{
	text-decoration: none;
	color: #222;
	text-align: center;
	font-weight: 400;
	font-size: .8rem;
	word-break: break-all;
}
.earth{
	order: -1;
	height: 1.5rem;
	padding: 0 3px;
}
.earth a{
	color: #333;
}
.earth:hover{
	background-color: rgba(150,200,255,.3);
}
.route{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #ddd;
	padding: 1px 8px;
}
.back a img{
	height: 1.5rem;
	padding: 0 3px;
}
.back a img:hover{
	background-color: rgba(150,200,255,.3);
}
.back a svg{
	height: 1.5rem;
	padding: 0 3px;
}
.back a svg:hover{
	background-color: rgba(150,200,255,.3);
}
.title{
	width: 100%;
	margin: 1rem 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}
.title h2{
	margin-right: 1rem;
	font-size: 1.3rem;
	font-weight: 600;
}
.upload_file{
	padding: .2rem 1rem;
	color: white;
	background-color: #0266C8;
	transition: .2s;
	border: 1px solid #0266C8;
	font-size: .8rem;
	display: flex;
	align-items: center;
	gap: 8px;
}
.upload_file:hover{
	color: #0266C8;
	background-color: #fff;
}
.route_navigation{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	align-items: center;
	background-color: #fff;
	margin-right: 10px;
	z-index: 10;
}

.view_mode{
	align-items: center;
	justify-content: center;
	display: flex;
	gap: 4px;
}
.view_mode a{
	color: #333;
	padding: 4px;
}
.listView{
	grid-template-columns: 100%;
}
#input_search_container{
	border: 1px solid #000;
	display: flex;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	margin: 0;
}
#input_search{
	border: none;
	outline: none;
	width: 100%;
	background-color: transparent;
	padding-left: 8px;
}
#input_search_btn{
	border: none;
	outline: none;
	background-color: #0266C8;
	color: #fff;
	fill: #fff;
}
#filter_search{
	font-size: .8rem;
	border: none;
	outline: none;
	color: #aaa;
	fill: #aaa;
}
#upload_options{
	position: absolute;
	background-color: #fff;
	box-shadow: 1px 3px 15px 0 #ddd;
	z-index: 100;
	list-style: none;
	border: 1px solid #eee;
	padding: 22px 0;
	display: none;
	margin-left: 2rem;
	font-size: .9rem;
	font-weight: 600;
	border-radius: 5px;
}
#upload_options li{
	height: 3rem;
	width: 16rem;
	padding: 4px 16px;
	display: flex;
	gap: 12px;
	align-items: center;
	transition: .2s;
	cursor: pointer;
	color: #333;
}
#upload_options li:hover{
	background-color: #f5f5f5;
}
.upload_options_show{
	display: block !important;
}

/* ================== WAITING ANIMATION */

.processing_show{
	display: flex;
	animation: show_downloader .2s ease forwards;
}
#processing{
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12rem;
	height: 3rem;
	position: fixed;
	border-radius: 5px;
	box-shadow: 3px 5px 15px 0 #bbb;
	top: -4rem;
	left: 0;
	right: 0;
	border-bottom: 4px solid #0266C8;
	z-index: 1010;
	transition: .5s;
	margin: 0 auto;
}
#processing_loader{
	width: 10px;
	height: 10px;
	position: relative;
	animation: loader 1s ease infinite;
	margin-top: -40px;
	text-align: end;
}
#processing p{
	margin: 0;
	padding-left: 1rem;
	font-size: .9rem;
	font-weight: 600;
}
@keyframes loader{
	0%, 100%{
		box-shadow: -6px 12px 0 #0266C8, 6px 12px 0 rgba(0, 82, 236, 0.2), 6px 24px 0 rgba(0, 82, 236, 0.2), -6px 24px 0 rgba(0, 82, 236, 0.2);
	}
	25%{
		box-shadow: -6px 12px 0 rgba(0, 82, 236, 0.2), 6px 12px 0 #0266C8, 6px 24px 0 rgba(0, 82, 236, 0.2), -6px 24px 0 rgba(0, 82, 236, 0.2);
	}
	50%{
		box-shadow: -6px 12px 0 rgba(0, 82, 236, 0.2), 6px 12px 0 rgba(0, 82, 236, 0.2), 6px 24px 0 #0266C8, -6px 24px 0 rgba(0, 82, 236, 0.2);
	}
	75%{
		box-shadow: -6px 12px 0 rgba(0, 82, 236, 0.2), 6px 12px 0 rgba(0, 82, 236, 0.2), 6px 24px 0 rgba(0, 82, 236, 0.2), -6px 24px 0 #0266C8;
	}
}
@keyframes show_downloader{
	from{
		top: -4rem;
	}
	to{
		top: 4rem;
	}
}

/* ================== ICON VIEW */

.file_container{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 85% 15%;
	max-height: 9rem;
	max-width:7.5rem;
	margin: .5rem;
	border: 1px solid #eee;
	border-radius: 5px;
	box-shadow: 1px 3px 10px 0 #eee;
	transition: .3s;
	flex-grow:1;
	height: 9rem;
}
.controls_above{
	position: absolute;
	width: 6rem;
	margin: .2rem;
	display: flex;
}
.edit{
	flex-grow: 1;
	text-align: right;
	position: relative;
	left: -1000rem;
	color: #333;
}
.file_container_box{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 60% 40%;
	max-height: 8rem;
	width: 100%;
	padding: 0 .5rem;
	justify-content: center;
	overflow: hidden;
}
.file_container .file_container_box p{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 16px;
	max-height: 4rem;
}
.file_container:hover{
	background-color: rgba(245,245,245,.8);
}
.file_container:hover > .controls{
	left: 0;
}
.file_container:hover > .controls_above > .edit{
	left:0;
}
.main_body{
	display: grid;
	grid-template-columns: repeat(auto-fit, 7.5rem);
}
#file_options{
	padding: 0;
	margin: 0;
	transform: translate(10rem);
	background-color: #fff;
	box-shadow: 1px 3px 10px 0 #eee;
	list-style:none;
	position: absolute;
	z-index: 1000;
	border: 1px solid #eee;
}
.file_option a{
	padding: 12px 32px;
	width: 100%;
	height: 3rem;
}
.file_option a{
	text-decoration: none;
	color: #555;
}
.file_option:hover{
	background-color: #f5f5f5;
}
/*=========================TEST*/
.controls2{
	display: flex;
	align-items: center;
	justify-content: end;
}
#options_control2{
	border: none;
	outline: none;
	background-color: transparent;
	color: #aaa;
	fill: #aaa;
	transition: .3s;
}
#options_control2:hover{
	color: #000;
	fill: #000;
}
/*=============================*/
.controls{ 
	text-align: right;
	border-radius: 5px;
	background-color: white;
	position: relative;
	left: -10000px;
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
.controls a:hover, .view_mode a:hover{
	background-color: #ccc;
	color: #333;
}
.controls a{
	transition: .3s;
	flex-grow: 1;
	padding: 0 .2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
}
.tool_bar{
	margin-left: 1rem;
	min-width: 20rem;
	display:flex;
	justify-content: space-around;
	align-items: center;
	background-color: #eee;
	border: 1px solid #ddd;
	z-index: 1000;
}
.tool_bar img{
	width: 1.1rem;
}


/* ================== LIST VIEW */

.main_body_list{
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
}
.file_container_list{
	height: 100%;
	width: 100%;
	display: flex;
	transition: .3s;
	border-top: 1px solid #eee;
	transition: .3s;
	
}
.file_container_list:hover{
	background-color: rgba(245,245,245,.8);
}
.file_container_box_list{
	flex-grow: 9;
	display: grid;
	grid-template-columns: 3rem minmax(30vw, 1fr) 1fr 1fr 1fr;
	width: 70vw;
	height: 100%;
	align-items: center;
	gap: .5rem;
	transition: .3s;
}
.checkbox{
	margin-top: 5px;
	width: 1rem;
	height: 1rem;
}
.icon_list{
	height: 3.8rem;
	width: 3rem;
	padding: .3rem 0;
}
.file_container_box_list p{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
}
.default-icon_list{
	padding: .5rem .2rem;
}
.controls_list{
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	width: 10rem;
	align-content: center;
	gap: 4px;
	justify-content: end;
}
.controls_list a{
	color: #333;
}


/* ================== CARD VIEW */
.main_body_card{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	grid-template-rows: auto;
	gap: 12px;
}
.file_container_card{
	display: grid;
	grid-column: 100%;
	grid-template-rows: 85% 15%;
	border: 1px solid #eee;
	border-radius: 5px;
	box-shadow: 1px 3px 10px 0 #eee;
	transition: .3s;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.file_container_card:hover{
	background-color: rgba(245,245,245,.8);
}
.file_container_box_card{
	padding: 8px 16px;
	display: flex;
	flex-wrap: wrap;
}
.folder_icon_card{
	width: 1.5rem;
	height: 1.5rem;
}
.default_icon_card{
	width: 1.1rem;
	height: 1.1rem;
	margin-left: 6px;
}
.section_card{
	text-overflow: ellipsis;
	width: 100%;
	display: flex;
	overflow: hidden;
}
.name_card{
	align-items: center;
	height: 1.1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 16rem;
}
.description_card{
	height: 4rem;
	text-align: justify;
	margin-top: 8px;
	color: #666;
	text-overflow:inherit;
	overflow:auto;
	white-space: break-spaces;
}
.filedata_card{
	gap: 4px;
}
.title_card{
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	height: 1rem;
	width: 100%;
	white-space: break-spaces;
}
.controls_card{ 
	text-align: right;
	border-radius: 5px;
	background-color: white;
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
.controls_card a{
	color: #333;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.controls_card a:hover{
	background-color: #ccc;
}


@media screen and (max-width:968px){
	.controls{ 
		left: 0;
	}
	.route_navigation{
		flex-wrap: wrap;
		position: fixed;
		left:0;
		box-shadow: 0 2px 5px 0 #ddd;
	}
	.title{
		margin-top: 6rem;
	}
	.tool_bar{
		width: 100%;
		margin-left:0;
		min-width: auto;
	}
	.file_container_list{
		height: 100%;
	}
	.file_container_box_list{
		flex-grow: 9;
		display: grid;
		grid-template-columns: 3rem minmax(30vw, 1fr);
		width: 70vw;
		height: 100%;
		align-items: center;
		gap: 0;
	}
	.file_container_box_list p{
		color: #555;
		text-align: left;
	}
	.file_container_box_list p:nth-child(2){
		color: #000;
	}
	.file_container_box_list .icon_list{
		grid-row: 1/4;
	}
	.file_container_box_list .lastwrite{
		grid-column: 2/3;
	}
	.file_container_box_list .length{
		grid-column: 2/3;
	}
	.icon_list{
		padding: .5rem .3rem;
	}
	#input_search_container{
		width: 100%;
	}
	#upload_options{
		font-size: .8rem;
		margin: 0;
	}
	#upload_options li{
		height: 2rem;
		width: 14rem;
		padding: 4px 12px;
	}
	#upload_file_container{
		margin-right: 6rem;
	}
}