#file_upload_div{
	margin-left:20px;
	margin-right:20px;
}
#file_upload_div p{
	font-size:1.5em;
	margin-bottom:5px;
	color:blue;
}
#file_upload_div progress{
	width:calc(100% - 1em);
}
#file_box{
	margin-left:20px;
	margin-right:20px;
	margin-top:10px;
}
#tab_button_div{
	border-radius:0 1em 0 0;
	background-color:lightgreen;
	position:relative;
}
#file_box .tabButton{
	display:inline-block;
	font-size:1.3em;
	font-weight:bold;
	text-align:center;
	border-radius:0.5em 1em 0 0;
	border: 1px solid #ccc;
	border-bottom:2px #ccc double;
	background-color: #f1f1f1;
	outline: none;
	margin:2px 2px 0 0;
	cursor: pointer;
	padding: 0.3em 0.5em 0.2em 0.5em;
	transition: 0.3s;
}
#search_bar{position:absolute; right:1em; bottom:0.5em;}
@media only screen and (max-aspect-ratio: 13/9){
	#file_box .tabButton{
		width:3.2em;
	}
}
#file_box .tabButton:first-child{border-left:none;}
#file_box .tabButton:hover{
	background-color: #ddd;
}
#file_box .tabButton.active{
	background-color: #6196ed;
	border-bottom-color: #6196ed;
}
#file_box .tabContent{
	display:none;
	
}
#file_box .tabContent tr td{animation: tab_fadeEffect 0.8s;}
@keyframes tab_fadeEffect {
	from {opacity: 0.5;}
	to {opacity: 1;}
}
#file_box table
{
	border:none;
	border-collapse:collapse;
	width:100%;
	margin-bottom:10px;
}

#file_box table th
{
	border: 1px lightgray solid;
	border-bottom:3px gray double;
	border-top:none;
	background-color:#6196ed;
}
#file_box table td
{
	border: 1px lightgray solid;
	background-color:#ddffc6;
}
#file_box table tr.highlight td{
	background-color:#f9e397;
}
#file_box table th:first-child, #file_box table td:first-child{border-left:none;}
#file_box table th:last-child, #file_box table td:last-child{border-right:none;}
#file_box table tr.deleted_file td{
	background-color:silver;
	color: gray;
}
#file_box table tr:not(:last-child) td.filename
{
	padding-left:1em;
	padding-right:0.4em;
	word-break:break-all;
}
#file_box table tr td.filename span:hover
{
	font-weight:bold;
	text-decoration:underline;
	cursor:pointer;
}
#file_box table tr td.filename .tooltip{
	position:absolute;
	opacity: 0;
	visibility:hidden;
}
#file_box table tr td.filename .tooltip::after{
	content: "";
	position: absolute;
	bottom: 100%; /* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #00796B transparent;
}
#file_box table tr td.filename span:hover+.tooltip{
	visibility:visible;
	z-index:1;
	margin-top:5px;
	margin-left:1em;
	background-color:#00796B;
	color:#E0F2F1;
	font-weight:bold;
	border-radius:5px;
	padding:5px 10px 5px 10px;
	opacity:1;
	transition: opacity 1s linear 0.5s;
	-webkit-transition: opacity 1s linear 0.5s;
}
#file_box table tr:not(:last-child):hover td{background-color:#f9e397;}
#file_box table tr td.editor
{
	width:5em;
	text-align:center;
}
#file_box table tr td.editLink
{
	width:3em;
	text-align:center;
}
#file_box table tr td.editLink:hover
{
	background-color:red;
	color:#f9e397;
	font-weight:bold;
	cursor:pointer;
}
#file_box table tr td.uploadTime
{
	width:7em;
	text-align:center;
}
#file_box table tr td.delFile
{
	width:2.5em;
	text-align:center;
}
#file_box table tr td.delFile:hover
{
	background-color:red;
	color:#f9e397;
	font-weight:bold;
	cursor:pointer;
}