@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold');
body, input {
	font-family:"Roboto", "Arial";
}
body {
	font-size:62.5%;
	height:100%;
	background:#f1f1f1;
	overflow:scroll;
}
body * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;		
}

div#wrapper {
	display:table;
	/*table-layout:fixed; Changing this. Need to set min-width on columns */
	width:100%;
	padding:0px 15px;
}
/* Logo */
img#logo {
	position:absolute;
	top:15px;
	left:30px;
	
}
/* Login */
div#login-wrapper {
	position:fixed;
	width:110px;
	height:100px;
	left:50%;
	margin-left:-55px;
	top:50%;
	margin-top:-50px
}
div#login-wrapper form input[name='pw'] {
	position:relative;
	width:110px;	
	top:20px;
	border:0px;
	border-bottom:1px solid #ccc;
	background:none;
	padding:6px;
	text-align:center;
	font-weight:bold;
}
div#login-wrapper img#logo {
	position:relative;
	top:0px;
	left:0px;

}
/* Column */
div.column-wrapper {
	display:table-cell;
	padding:50px 15px 30px 15px;
	vertical-align:top;
	min-width:320px;
}
div.column-wrapper[data-status='hidden'] {
	display:none;
	opacity:0.3;
}
div.column {
	float:left;
	width:100%;
	background:#fff;
	box-shadow:0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08), 0 3px 1px -2px rgba(0, 0, 0, .2);
	position:relative;
}

/* Header */
div.column div.header {
	color:#888;
	font-size:2.2em;
	float:left;
	clear:both;
	width:100%;
	padding:15px 50px 15px 20px;
	border-bottom:1px solid #eee;
	line-height:1.5em;
	word-break:break-word;
}
div.column div.header[data-color='Gray'] {
	color:#888;
	border-top:3px solid #888;
}
div.column div.header[data-color='Blue'] {
	color:#3498db;
	border-top:3px solid #3498db;
}
div.column div.header[data-color='Green'] {
	color:#3dc96a;
	border-top:3px solid #3dc96a;
}
div.column div.header[data-color='Red'] {
	color:#e74c3c;
	border-top:3px solid #e74c3c;
}
div.column div.header[data-color='Yellow'] {
	color:#ffa518;
	border-top:3px solid #ffa518;
}
div.column div.header[data-color='Turquoise'] {
	color:#3bccc3;
	border-top:3px solid #3bccc3;
}
div.column div.header[data-color='Purple'] {
	color:#a251c0;
	border-top:3px solid #a251c0;
}
div.column div.header[data-color='Pink'] {
	color:#d444b7;
	border-top:3px solid #d444b7;
}
div.column div.header[data-color='Olive'] {
	color:#a8c33c;
	border-top:3px solid #a8c33c;
}
div.column div.header[data-color='Brown'] {
	color:#e78651;
	border-top:3px solid #e78651;
}



div.column div.header.editable {
	color:#ccc;
}
/* Drop field and dropzone */
div.dropzone-wrapper {
	float:left;
	clear:both;
	width:100%;
	padding:20px 20px 10px 20px;
}
div.dropzone
{
	position:relative;
	font-weight:700;
	font-size:1.4em;
	text-align:center;
	height:60px;
	line-height:58px;
	color:#ccc;
	border:2px dashed #ccc;
	border-radius:0px;
	cursor:default;
	background:#f7f7f7;
	overflow:hidden;
}
div.dropzone.hover
{
	background:#fff;
	border-color:#777;
	color:#777;
	
}
div.dropzone:hover {
	cursor:pointer;
}
div.dropzone-wrapper input {
	position:absolute;
	cursor: pointer;
	opacity:0;
	top:0px;
	left:0px;
	width:100%;
	height:60px;
	width:100%;
}
/* Pluss icon */
span#createColumn {
	position:fixed;
	border-radius:50%;
	height:30px;
	width:30px;
	background:#777 url('../img/icon_add.png') no-repeat 7px 7px;
	top:10px;
	right:30px;	
	z-index:2;
}
span#createColumn:Hover {
	background-color:#999;
	cursor:pointer;
}
/* View hidden columns icon */
span#toggleHiddenColumns {
	position:fixed;
	border-radius:50%;
	height:30px;
	width:30px;
	background:#777 url('../img/icon_view.png') no-repeat 7px 7px;
	top:10px;
	right:70px;	
	z-index:2;
}
span#toggleHiddenColumns:Hover {
	background-color:#999;
	cursor:pointer;
}


/* Loading bar */
div.progress-bar-wrapper {
	display:none;
	float:left;
	clear:both;
	width:100%;
	padding:20px 20px 10px 20px;
}
div.progress-bar-inner-wrapper {
	position:relative;
	height:60px;
	border:2px dashed #ccc;
	border-radius:0px;
}
div.progress-bar {
	position:absolute;
	height:56px;
	width:0px;
	background:#f7f7f7;
}
div.progress-bar-text {
	position:absolute;
	height:56px;
	width:100%;
	color:#444;
	font-weight:700;
	font-size:1.4em;
	text-align:center;
	line-height:58px;
}

/* File table */
div.files {
	float:left;
	clear:both;
	width:100%;
	padding:0px 20px 20px 20px;
}
/* Items */
div.item {
	float:left;
	clear:both;
	width:100%;
	padding:5px 10px 7px 10px;
	border-top:1px solid #e9e9e9;
	position:relative;
}
div.item[data-zipready='awaiting'] {
	cursor:default !important;
	
} 
div.item[data-zipready='awaiting'] .item-name::after {
	content: 'Compressing files';
	position:absolute;
	visibility:visible;
	width:100%;
	text-align:center;	
	left:0px;
	top:50%;
	height:30px;
	margin-top:-15px;
	text-transform:uppercase;
	font-style:italic;
	font-size:0.8em;
	background:url('../img/icon-loading-spinner.gif') no-repeat center 18px;
	color:#aaa;
}
div.item[data-zipready='awaiting'] * {
	visibility:hidden;
}
div.item:hover {
	background:#f9f9f9;
	cursor:pointer;
}

div.item:hover button.option-copyurl {
	display:block;
}
div.item span.item-name {
	font-size:1.3em;
	color:#444;
	display:block;
	float:left;
	text-decoration:none;
	word-break: break-word;
	line-height:1.3em;
	margin-bottom:5px;
	margin-right:20px;
}
div.item span.item-date {
	float:left;
	clear:left;
	width:120px;
}

div.item span.item-size {
	float:left;
}
div.item span.item-date, div.item span.item-size {
	color:#aaa;
	font-size:1.2em;
}
div.item div.checkbox-wrapper {
	cursor:default;
	position:absolute;
	right:0px;
	top:0px;
	height:35px;
	width:35px;
}
div.item input[type='checkbox'] {
	top:5px;
	right:5px;
	position:absolute;
	padding:5px;
}
/* Item options */
div.item span.item-options {
	display:block;
	
	width:100px;
	float:right;
	text-align:right;
}	

/* File list option */
div.column div.filelist-option {
	float:left;
	clear:both;
	width:100%;
	padding:0px 20px;
}
/* Search */
div.column input.search {
	border:0px;
	height:25px;
	font-size:1.3em;
	padding-left:10px;
	width:50%;
	float:left;
}
div.column input.search.inactive {
	font-style:italic;
	color:#aaa;
}

/* Icons */
div.column div.icons {
	width:50%;
	height:30px;
	float:left;
	padding-right:7px;
}
div.column div.icons span.check-uncheck-all {
	float:right;
	width:20px;
	height:16px;
	margin-right:-3px;
	top:4px;
	background:url('../img/icon_checkbox.png') no-repeat 0px -16px;
	position:relative;
	cursor:pointer;
}
div.column div.icons span.check-uncheck-all.active {
	background-position:0px 1px;
	cursor:pointer;
}
div.column div.icons span.zip-selected {
	float:right;
	width:20px;
	margin-right:7px;
	height:16px;
	top:4px;
	background:url('../img/icon_zip.png') no-repeat 0px -16px;
	position:relative;
}
div.column div.icons span.zip-selected.active {
	background-position:0px 1px;
	cursor:pointer;
}
div.column div.icons span.download-selected {
	float:right;
	width:16px;
	height:16px;
	margin-right:8px;
	top:4px;
	background:url('../img/icon_download.png') no-repeat 0px -33px;
	position:relative;
}
div.column div.icons span.download-selected.active {
	background-position:0px 0px;
	cursor:pointer;
}

div.column div.icons span.move-selected {
	float:right;
	width:20px;
	margin-right:4px;
	height:16px;
	top:4px;
	background:url('../img/icon_move.png') no-repeat 0px -16px;
	position:relative;
}
div.column div.icons span.move-selected.active {
	background-position:0px 0px;
	cursor:pointer;
}
div.column div.icons span.delete-selected {
	float:right;
	width:20px;
	margin-right:3px;
	height:16px;
	top:4px;
	background:url('../img/icon_delete.png') no-repeat 0px -18px;
	position:relative;
}
div.column div.icons span.delete-selected.active {
	background-position:0px 0px;
	cursor:pointer;
}
/* Column options menu */
div.column span.icon-column-option {
	position:absolute;
	top:23px;
	right:20px;
	width:21px;
	height:22px;
	background:url('../img/icon_gear_large.png') no-repeat 0px 0px;	
}
div.column span.icon-column-option:hover {
	background-position:0px -22px;
	cursor:pointer;
}
div.column-menu {
	position:absolute;
	width:110px;
	background:#fff;
	box-shadow:0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08), 0 3px 1px -2px rgba(0, 0, 0, .2);
	border:1px solid #e9e9e9;
	right:5px;
	top:15px;
	z-index:1;
}
div.column-menu span {
	display:block;
	float:left;
	clear:both;
	width:100%;
	padding:12px 10px;
	border-bottom:1px solid #e9e9e9;
	cursor:pointer;
	color:#444;
	font-size:1.3em;
}
div.column-menu span:hover {
	color:#444;
	background:#f9f9f9;
}
div.column-menu span:last-child {
	border-bottom:0px;
}
div.column-menu span.option-rename {
	padding-left:34px;
	background-image:url('../img/icon_rename.png');
	background-repeat:no-repeat;
	background-position:12px 10px;
}
div.column-menu span.option-hide {
	padding-left:34px;
	background-image:url('../img/icon_hide.png');
	background-repeat:no-repeat;
	background-position:10px 10px;
}
div.column-menu span.option-activate {
	padding-left:34px;
	background-image:url('../img/icon_activate.png');
	background-repeat:no-repeat;
	background-position:10px 10px;
}
div.column-menu span.option-delete {
	padding-left:34px;
	background-image:url('../img/icon_trash.png');
	background-repeat:no-repeat;
	background-position:12px 9px;
}

/* Modal */
div#modal-overlay {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	background:#ccc;
	opacity:0.7;
	z-index:3;	
}
div#modal-outer {
	background:#fff;
	box-shadow: 0px 0px 40px -10px rgba(0,0,0,0.75);
	position:fixed;
	top:100px;
	left:50%;
	z-index:4;
}
div#modal-outer iframe {
	height:100%;
	width:100%;
	overflow:hidden !important;
}
div#modal-outer span.title {
	display:block;
	width:100%;
	float:left;
	clear:both;
	color:#fff;
	font-size:2em;
	background:#1797e0;
	line-height:1.3em;
	padding-bottom:10px;
	padding:15px 20px;
}
body#modal-inner {
	padding:30px;	
	padding-top:25px;
}
body#modal-inner p {
	color:#aaa;
	font-size:1.3em;
	line-height:1.3em;
}
body#modal-inner div#button-wrapper {
	width:100%;
	float:left;
	clear:both;
	text-align:right;
	bottom:30px;
	right:30px;
	position:absolute;
}
body#modal-inner div#button-wrapper input[type='button'] {
	font-size:1.3em;
	color:#555;
	text-align:center;
	font-weight:bold;
	padding:6px 12px 6px 12px;
	border:1px solid #ccc;
	border-bottom:2px solid #bbb;
	text-decoration:none;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	background:#f1f1f1;
	margin-right:15px;
	
}
body#modal-inner div#button-wrapper input[type='button']:disabled {
	opacity:0.5;
}
body#modal-inner div#button-wrapper input[type='button']:not(:disabled):hover {	
	color:#fff;
	border-color:transparent;
	border-bottom:2px solid #1680bd;
	background:#1797e0; 
	cursor:pointer;
}
body#modal-inner div#button-wrapper input[type='button']:active {	
	position:relative;
	top:1px;
}

body#modal-inner div#button-wrapper input[type='button']:last-child {
	margin-right:0px;
}
body#modal-inner select {
	float:left;
	clear:both;
	height:28px;
	margin-top:8px;
}
body#modal-inner input[type='text'] {
	float:left;
	clear:both;
	margin-top:8px;
	padding:4px;
}
body#modal-inner input[type='checkbox'] {
	float:left;
	clear:both;
	margin-top:8px;
}
/* Mark */
mark{
    background: #FFFF00;
}
/* Global input */
select {
	font-family:"Roboto", "Arial";
}
select optgroup {
	font-weight:700;
}
 
 /* Session manager */
#intervalState {
	position:fixed;
	top:12px;
	right:110px;
	text-transform:uppercase;
	font-size:1.15em;
	color:#9dce95;
	font-weight:bold;
	border:2px solid #9dce95;
	border-radius:3px;
	padding:6px 8px 5px 8px;
	 
 }
 #intervalState.paused {
	 border:2px solid #f42a2f;
	 color:#f42a2f;
 }