:root
{	--content-padding:2em;
}
*
{	box-sizing:border-box;
	font-family:Sans-Serif;
	text-decoration:none;
}
.clearfix:after
{	clear:both;
	content:"";
	display:block;
	height:0;
	visibility:hidden
}
a
{	color:white;
}
a:hover
{	color:#C1CCD5;
}
a.file-name
{	color:#888;
}
a.file-name:hover
{	color:#88F;
}
body
{	display:flex;
	justify-content:center;
}
html
{	overflow-y:scroll;
}
input:focus
{	outline: none;
}
input
{	border:0.05em solid #888;
	border-radius:0.5em;
	height:2em;
	width:12em;
}
input[type=password],
input[type=text]
{	background-color:#FFF;
	padding-left:0.5em;
}
input[type=button],
input[type=submit]
{	background-color:#BBB;
	cursor:pointer;
}
input[type=button]:disabled,
input[type=submit]:disabled
{	background-color:#DDD;
	cursor:default;
}
input[type=button]:focus,
input[type=submit]:focus,
input[type=button]:hover,
input[type=submit]:hover
{	background-color:#DDF;
	cursor:default;
}
hr
{	margin-bottom:var(--content-padding);
	margin-top:var(--content-padding);
}
.content,
.footer
{	border:0.05em solid #808080;
	clear:both;
	max-width:600px;
	padding:var(--content-padding);
	position:relative;
	width:60em;
}
.content
{	background:#DDD;
}
.footer
{	background-color:rgb(127,145,159);
	bottom:calc(-1.5 * var(--content-padding));
	font-size:0.8em;
	left:calc(-1.25 * var(--content-padding) - 0.05em);
}
.cloud-icon
{	background-image:url("/style/cloud-icon.png");
	background-repeat:no-repeat;
	background-size:100% auto;
	float:left;
	height:6em;
	width:10em;
}
.error
{	background-color:#FDD;
	border:0.05em solid red;
	padding:1.5em;
}
.success
{	background-color:#DEDEDE;
	border:0.05em solid DEDEDE;
	padding:1.5em;
}
.filename
{	color:#888;
	padding-left:10px;
}
.header h1
{	color:#888;
	font-size:2em;
	margin:0;
	right:2em;
	text-align:right;
	top:1.2em;
	word-spacing:100vw;
}
.hidden
{	display:none;
}
.modal
{	background-color:rgba(8,8,8,0.7);
	height:100%;
	left:0;
	padding:var(--content-padding);
	position:fixed;
	top:0;
	width:100%;
	z-index:1;
}
.modal div.dialog
{	margin-left:auto;
	margin-right:auto;
	max-width:500px;
	width:50em;
}
.loader
{	animation:loader_spin 1.5s linear infinite;
	border:1em solid #F3F3F3;
	border-top:1em solid #DDF;
	border-bottom:1em solid #DDF;
	border-radius:50%;
	height:5em;
	margin:5em auto 5em auto;
	width:5em;
}
@keyframes loader_spin
{	0%
	{	transform: rotate(0deg);
	}
	100%
	{	transform: rotate(360deg);
	}
}
.progress
{	width:100%;
}
.user
{	border-bottom:0.05em dashed #999;
	text-decoration:none; 
}
@media (max-width: 600px)
{	#logo
	{	margin-bottom:1em;
	}
}
@media (min-width: 601px)
{	#logo
	{	float:right;
		margin-left:1em;
		position:relative;
		right:0;
	}
}
#uploadContainer, .uploaded-items
{	background:#EEE;
	border:0.05em dashed #888;
	padding:0.8em;
}
.uploaded-items{
   padding-top: 0;  
}
.uploaded-items ul
{   padding: 0 0;  
}
.uploaded-items li
{   padding: 3px 3px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 25px 0;   
}
.uploaded-items li.empty
{	margin-bottom: 0px;
	display: flex;
}
.uploaded-items li:hover
{   background: #ffffff
}
.uploaded-items li .first-row p
{	margin: 2px 0;
	font-size: 16px;
	font-weight: 600;
	color: #000000;
}
.uploaded-items li .first-row p:hover
{	cursor: pointer;
	text-decoration: underline;
}
.uploaded-items .first-row
{   display: flex;
   justify-content: space-between;   
}
.uploaded-items .actions
{   display: flex;
   justify-content: space-around;
   align-items: center;   
}
.uploaded-items .second-row
{   display: flex;   
}
.uploaded-items li .second-row p
{	margin: 2px 0;
	font-size: 14px;
}
.uploaded-items .icon i
{    font-size: 20px;
	color: #666666;
    width: 30px;
	cursor: pointer;
}
.uploaded-items .icon i:hover
{	color: #252525;
}
.uploaded-item-modal
{	padding: 20px 20px;
    background: #dedede;
	width: 500px;
    margin: 0 auto;
	border-radius: 4px;
}
.uploaded-item-modal .cancel-container
{	display: flex;
	justify-content: flex-end;
}
.uploaded-item-modal .cancel-container .cancel
{	margin: -40px -40px;
}
.uploaded-item-modal .cancel-container .cancel i
{	font-size: 40px;
    color: black;
    background: #dedede;
    border-radius: 30px;
	cursor: pointer;
}
.uploaded-item-modal .update-section
{	display: flex;
	flex-direction: column;
}
.uploaded-item-modal .update-section h3
{	margin-top: 0;
}
.uploaded-item-modal .update-section div
{	margin-bottom: 10px
}
.uploaded-item-modal .update-section .section-info
{	display: flex;
}
.uploaded-item-modal .section-info .key
{	flex: 2 0 0px;
}
.uploaded-item-modal .section-info .value
{	flex: 5 0 0px;
}
.uploaded-item-modal hr
{	margin: 1em 0 1em 0;
}
.uploaded-item-modal .actions
{	display:flex;
	justify-content: space-between;
}
.uploaded-item-modal .delete-actions
{	display: flex;
	justify-content: space-between;
}
.uploaded-item-modal input[type=button]
{	cursor: pointer;
}
.uploaded-file-modal
{	display: flex;
    justify-content: center;
    align-items: center;
}