
html,
body
{
	min-width: 820px;
}

*
{
	border: 0px;
	margin: 0px;
	padding: 0px;
	outline: none;

	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	font-family: "Roboto", "Helvetica", "Arial";
	font-size: 16px;
	font-weight: 400;
	color: #222;
}

body
{
	/*background-color: #3b728b;*/
	/*background-color: #223f4c;*/
	background-color: #0e1e27;
	padding-top: 50px;
}

a
{
	color: #004259;
	text-decoration: none;
}
a:hover
{
	/*text-decoration: underline;*/
}

header
{
	min-width: 820px;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	line-height: 50px;
	background-color: #fff;
	padding: 0px 20px;
	border-bottom: 1px solid #004259;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
header .logout
{
	order: 3;
}
header .logo
{
	height: 35px;
}
header .logo img
{
	height: 35px;
}

#search
{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/*padding: 0 10px;*/
}

h1
{
	height: 100px;
	line-height: 100px;
	font-size: 30px;
	font-weight: 600;
	color: #fff;
}
h2
{
	font-size: 20px;
	font-weight: 500;
	color: #222;
	margin-bottom: 15px;
}

.login
{
	display: inline-block;
	background-color: #fff;
	padding: 10px;
}
.login h1
{
	color: #222;
	height: 50px;
	line-height: 50px;
}

.cell
{
	padding: 5px;
	display: inline-block;
}
.row
{
	padding: 5px;
	display: block;
	clear: both;
}
.cell.right,
.row.right
{
	text-align: right;
}
.cell.buttons,
.row.buttons
{
	border-top: 1px solid #999;
	margin-top: 10px;
	padding-top: 15px;
}
.cell label,
.row label
{
	display: inline-block;
	width: 120px;
	height: 30px;
	line-height: 30px;

	color: #222;
}
.cell input,
.row input
{
	height: 30px;
	line-height: 30px;
	padding: 0px 10px;

}
.cell input[type=radio],
.row input[type=radio]
{
	height: auto;
	line-height: auto;
}
.cell input[type=text],
.cell input[type=password],
.row input[type=text],
.row input[type=password]
{
	color: #222;
	border: 1px solid #ccc;
}
.cell input[type=button],
.cell input[type=submit],
.row input[type=button],
.row input[type=submit]
{
	cursor: pointer;
	/*float: right;*/
	margin-left: 5px;
}
.cell input[type=submit],
.row input[type=submit]
{
	background-color: #ffd81e;
	/*color: #3b728b;*/
	color: #004259;
}
.cell input[type=submit].red,
.row input[type=submit].red
{
	background-color: #cc0000;
	color: #fff;
}
.cell input[type=button],
.row input[type=button]
{
	background-color: #cc0000;
	color: #fff;
}
.cell input[type=button].grey,
.row input[type=button].grey
{
	background-color: transparent;/*#ccc;*/
	color: #222;
}

.folders
{
	/*width: 220px;*/
	width: 100%;
	list-style: none;
}

.folder
{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	height: 35px;
	color: #fff;
	text-decoration: none;
	margin-top: 5px;
}
.left-panel .folder:hover .material-icons-outlined
{
	color: #222;
}

.folder:hover
{
	background-color: #fff;
	color: #3b728b;
}
.folder a
{
	display: inline-block;
	height: 35px;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	flex-grow: 1;
}
.folder:hover a
{
	color: #3b728b;
}
.folder-opened
{
}
.folder-closed
{
	opacity: 0.66;
	transition: opacity ease 0.5s;
}
.folder-closed:hover
{
	opacity: 1.0;
}
.folder-opened,
.folder-closed
{
	width: 100%;
}
.folder-opened img,
.folder-closed img
{
	width: 25px;
	margin-right: 5px;
}

.panel
{
	display: flex;
	height: calc(100vh - 50px);
	/*overflow: auto;*/
	overflow: none;

}
.panel-left
{
	flex: 0 0 250px;
	height: 100%;
	overflow-y: auto;
	background-color: #194157;
	border-right: 2px solid rgba(255,255,255,0.20);
}
.panel-left h2
{
	color: #fff;
	padding: 20px;
	margin-bottom: 0px;
}

.panel-right
{
	flex: 1;
	height: 100%;
	overflow-y: auto;
	padding: 20px;
}
.panel-right h2
{
	color: #fff;
	margin-bottom: 20px;
}
.panel-right h2 img
{
	width: 25px;
	margin-right: 5px;
	float: left;
}

table
{
	border-collapse: collapse;
}

table.files
{
	width: 100%;
}
table.files thead
{
	background-color: #ccc;
}
table.files thead tr
{
	height: 44px;
	line-height: 43px;
	border-bottom: 1px solid #004259;
}
table.files thead tr th
{
	white-space: nowrap;
	/*height: 25px;
	line-height: 25px;*/
	padding: 0px 20px;
	text-align: left;
	font-weight: 500;
}
table.files thead tr th.full
{
	width: 100%;
}

table.files tbody
{
	background-color: #fff;
}
table.files tbody tr
{
	/*height: 44px;*/
	/*line-height: 43px;*/
	line-height: 36px;
	border-bottom: 1px solid #004259;
}
table.files tbody tr:hover
{
	background-color: #eee;
}
table.files tbody tr td
{
	white-space: nowrap;
	/*height: 25px;
	line-height: 25px;*/
	padding: 0px 20px;
}

#overlay
{
	display: none;
	background-color: rgba(0,0,0,0.40);
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	cursor: pointer;
	z-index: 10000;
}

#add-edit-file,
#delete-file,
#delete-folder,
#add-edit-folder,
#search-adv,
#loading
{
	display: none;

	background-color: #ccc;
	padding: 20px;
	border: 2px solid #222;

	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	z-index: 10001;
}

#add
{
	position: fixed;
	display: inline-block;
	bottom: 20px;
	right: 20px;
	height: 80px;
	line-height: 80px;
	width: 80px;
	border-radius: 40px;
	background-color: #ffd81e;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	font-size: 60px;
	font-weight: 500;
}

.delete-file-filename,
.delete-folder-name
{
	font-weight: 500;
}

.panel-left .material-icons-outlined
{
	color: #fff;
}
.panel-left .material-icons-outlined:hover,
.panel-left .folder:hover .material-icons-outlined
{
	color: #222;
}

.material-icons-outlined.with-padding
{
	padding-top: 13px;
}

.file
{
	opacity: 0.33;
	transition: opacity ease 0.5s;
}
.file:hover
{
	opacity: 1.0;
}
.file.bright
{
	color: #3b728b;
	opacity: 1.0;
	text-decoration: none;
}
.file.bright:hover
{
	text-decoration: underline;
}

.msg
{
	display: inline-block;
	width: 100%;
	height: 44px;
	line-height: 44px;
	color: #fff;
	padding: 0px 20px;
	background-color: #cc0000;
}

.dragover
{
	opacity: 0.5;
}

.dnd
{
	color: #fff;
	width: 100%;
	margin: 20px;
	text-align: center;
	opacity: 0.33;
}

/* eof */
