/*********************************
 檔案名稱與連結標題設定
 template_admin/set_filename.php
*********************************/

/*** 檔案名稱與標題設定 ***/
.option_main_wrap {
	display: table;
	table-layout: fixed;
	width: 100%;
	vertical-align: top;
	margin: 0;
	padding: 0;
}

.folder_option_wrap, .file_option_wrap {
	display: table-cell;
	vertical-align: top;
}

.folder_option_wrap {
	width: 15%;
	border-style: solid;
	border-width: 0 1px 0 0;
	border-color: rgba(127,127,127,.5);
}

.file_option_wrap {
	padding: .5em 1em;
}

.folder_box, .file_box {}

/*** 資料夾列表 ***/
ul.folder_list {
	list-style: none;
	font-size: 110%;
}

ul.folder_list li:hover {
	outline: 2px solid #FF9933;
	outline-offset: -2px;
}

ul.folder_list li a {
	display: block;
	padding: .3em;
}

ul.folder_list li.current a {
	color: #AC1616;
}

/*** 第一層 ***/
ul.folder_list li.top a:before {
	display: inline-block;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f0da";	/* <i class="fas fa-caret-right"></i> */
	padding-right: .4em;
	color: #E74847;
}

/*** 第二層 ***/
ul.folder_list li.child {
	padding-left: 1.5em;
}

/*** Ajax loading ***/
.ajax-loader {
	background-color: rgba(0,0,0,0.1);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height:100%;
	display: none;
}

.ajax-loader img {
	position: absolute;
	top:30%;
	left:50%;
}

/*** 右側表單 - 表格標題 ***/
.form_table_title {
	text-align: center;
	font-size: 150%;
	color: #AC1616;
	font-weight: 600;
	margin: 0 0 .2em 0;
	padding: 0;	
}

/*** 右側表單 - 檔案標題輸入框前方說明 ***/
table.file_title span.title {
	color: #006100;
	font-weight:600;
}

/*** 右側表單 - 檔案標題輸入框 ***/
table.file_title input.file_title {
	width: 85%;
	display: inline-block;
}

/********************************
 shortcode download 下載檔案列表
********************************/
.download_file_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.download_file_list li {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: center;

	padding: .3em .5em;
	margin-bottom: .7em;

	background-color: #F2FFF2;

	border-style: solid;
	border-width: 1px;
	border-color: rgba(127,127,127,.5);
	border-radius: 5px;
}

.download_file_list li:hover {
	background-color: #FFF2F2;
    outline: 2px solid #FF9933;
    outline-offset: -2px;
}

/*** 每個檔案第一個欄位的前置 icon ***/
.download_file_list .field:first-of-type:before {
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f0da";	/* <i class="fas fa-caret-right"></i> */
	padding-right: .5em;
	color: #E74847;
}

.download_file_list .field {
	flex: auto;
	border: 0px solid green;
	padding-right: .5em;
}

.download_file_list .field:last-of-type {
	padding-right: 0;
}

/*** 序號 ***/
.download_file_list .field.count {
	flex: 0 0 5%;
	max-width: 2.5em;
}

/*** 發佈日期 ***/
.download_file_list .field.date {
	flex: 0 0 6em;
	color: #AC1616;
	font-size: 90%;
	opacity: .8;
}

/*** 檔案說明 ***/
.download_file_list .field.description {
	flex: auto;
}

/*** 下載按鈕區 ***/
.download_file_list .field.action {
	flex: 1 1 6%;
	min-width: 3em;
	text-align: right;
	white-space: nowrap;
}

.download_file_list .field.action a {
	display: inline-block;
	padding-right: .3em;
}


/*** 下載 icon ***/
.download_file_list .field img {
	width: 1.5em; 
	height: auto;
}

@media only screen and (max-width: 599px) {
	.download_file_list li {
		display: block;
	}

	/*** 序號 ***/
	.download_file_list .field.count {
		display: none;
	}

	/*** 檔案連結 ***/
	.download_file_list .field.action {
		text-align: left;
	}
}