/* CSS Document */

body{
	font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	font-family:monospace;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:13px;
	margin:0px;
}



.message_success, .message_error{
	padding:5px;
	padding-left:10px;
	margin-top:0px;
	margin-bottom:0px;
	margin-right:50px;
	width:calc(100% - 15px - 2px);
	line-height:1.7em;
	color:#FFFFFF;
}

.message_success {
	background-color:#009900;
	border-bottom:1px solid #006600;
}

.message_error {
	background-color:#CE0000;
	border-bottom:1px solid #990000;
}


.file_list{
	display:block;
	width:100%;
	line-height:1em;
}

.file_list_header{
	background-color:#0077BB;
	color:#FFF;
	padding:1em;
	white-space:nowrap;
}
.file_list_header .mdi{
	color:#777;
	color:#FFF;
	
	display:inline-block;
	margin-top:0px;
	vertical-align:0px;
	
	height:24px;
	line-height:24px;
	
	padding-right:1em;
}
.file_list_header .mdi:hover{
	color:#FFF;
}

.file_list_header h1{
	
	margin:0px;
	padding:0px;
	
	color:#000;
	color:#FFF;
	display:inline-block;
	
	font-size:18px;
	font-weight:bold;
	
	line-height:1em;
	vertical-align:text-bottom;
	padding-bottom:4px;
	
	letter-spacing:1px;
	width:calc(100% - 48px - 1em);
	overflow:hidden;
	text-overflow:ellipsis;
}

.file_list_row{
	display:flex;
	
	white-space:nowrap;
	line-height:24px; !important /* should be able to fit the icon vertically */
	
	width:100%;
	cursor:pointer;
}

.file_list_row:nth-child(2n) {
	background-color: #FAFAFA;
}
.file_list_row:hover{
	background-color:#FDFAA6;
}

/* try to remove any styling from <a> */
a.file_list_link{
	text-decoration:none;
	line-height:inherit;
	color:inherit;
	margin:0px;
	padding:0px;
}

.title_cell{
	display:flex;
	padding:1em;
	width:100%; 
	align-items:center;
	overflow:hidden;
}
.title_cell .mdi{
	margin-right:1em;
	margin-bottom:-4px;
}
.title_text{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	width:auto;
}

.size_cell{
	color:#777;
	display:inline-block;
	white-space:nowrap;
	text-align:right;
	padding:1em;
	/* decrease horizontal padding to fit more on mobile screens */
	/*padding-right:0px;*/

	line-height:calc(24px + 4px);
}

.date_cell{
	color:#777;
	display:inline-block;
	white-space:nowrap;
	
	padding:1em;
	/* decrease horizontal padding to fit more on mobile screens */
	/*padding-right:0px;*/
	
	line-height:calc(24px + 4px);
}
.date_cell_hour{		
}
/* hide hour in date_cell when screen is up to 500px */
@media only screen and (max-width: 500px) {
    .date_cell_hour{	
        display:none;
    }
}
/* hide date completely in date_cell when screen is up to 320px */
@media only screen and (max-width: 320px) {
    .date_cell{	
        display:none;
    }
}

.menu_cell{
	display:inline-block;
	text-align:center;
	padding:1em;
	color:#777;
}
.menu_cell:hover{
	color:#000;
}



/* lightbox >>> */
#lightbox{
 
	width:100%; 
	height:100%; 
	
	background-color:rgba(0, 0, 0, 0.7); 
	position:fixed; 
	left:0px; 
	top:0px;   
	
	display:none; /* switch to "flex" in order to show lightbox */
	
	align-content:center;
}

#lightbox_content{
	background-color:#FFF; 
	border-radius:4px; 
	max-width:calc(320px - 2em); 
	min-height:1em;
	margin:auto;
	padding:1em;
	display:inline-block;
}
#lightbox_close_button{
	color:#FF0000; 
	float:right; 
	cursor:pointer;
}
/* <<< lightbox */



.liquid_button{
	padding:0.5em;
	padding-right:1em;
	text-decoration:none;
	border:1px solid #003399;
	background-color:#0077BB;
	color:#FFF;
	border-radius:4px;
	
	display:inline-block;
	height:24px;
	white-space:nowrap;
}
.liquid_button .mdi{
	margin-right:0.5em;
	
	display:inline-block;

	height:24px;

	vertical-align:-4px;
	margin-top:-1px;
}