/**
 * @package    hubzero-cms
 * @copyright  Copyright (c) 2005-2020 The Regents of the University of California.
 * @license    http://opensource.org/licenses/MIT MIT
 */

/*===========================================
 	Group Media Browser
===========================================*/
	#page_main {
		position: relative;
	}
	#page_content.group_files {
		height: 100%;
		min-height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		/*width: 100%;*/
	}
	.group_files * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.group_files .files-wrap {
		position: relative;
		min-height: 50em;
		width: 100%;
		height: 100%;
		display: table;
		vertical-align: top;
	}
	@-moz-document url-prefix() {
		.group_files .files-wrap {
			height: 50em;
		}
	}
/* Within File Browser */
	.upload-browser {
		display: table-row;
	}
	.upload-browser-col {
		position: relative;
		display: table-cell;
		vertical-align: top;
		border: 1px solid #CCC;
		background: #FFF;
	}
	.upload-browser-col.left {
		width: 250px;
		min-width: 250px;
		padding-top: 7em;
		border-right: 2px solid #eee;
		overflow-y: auto;
	}
	.upload-browser-col.right {
		/*padding-left: 30px;*/
		border-left: 2px solid #eee;
		width: 100%;
	}
	.upload-browser-col .toolbar {
		margin: 10px;
		padding: 0 0 5px 0;
		border-bottom: 1px solid #ddd;
		font-weight: 200;
		font-size: 14px;
	}
	.upload-browser-col .toolbar .title {
		margin: 0;
		padding: 0;
		font-weight: 200;
		font-size: 1.2em;
		float: left;
	}
	.upload-browser-col .toolbar .buttons {
		float: right;
	}
	.upload-browser-filelist-iframe {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		/*background: #FFF;
		border: 1px solid #CCC;*/
		width: 100%;
		height: 100%;
		min-height: 100%;
	}
	*::-ms-backdrop, .upload-browser-filelist-iframe {
		height: 50em;
	}
	@-moz-document url-prefix() {
		.upload-browser-filelist-iframe {
			position: absolute;
		}
	}
	.upload-browser-uploader {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		display: block;
	}
	.action-addfolder {
		display: inline-block;
		width: 1em;
		overflow: hidden;
		white-space: nowrap;
	}
	.action-addfolder:hover {
		border: none;
		text-decoration: none;
	}
	.action-addfolder:before {
		margin-right: 2em;
	}

/* Folder Tree List */
	.foldertree {
		overflow-y: scroll;
		position: absolute;
		top: 11em;
		left: 10px;
		right: 10px;
		bottom: 10px;
	}
	.foldertree-list {
		display: none;
		margin: 0 10px;
	}
	.foldertree-list select {
		width: 100%;
	}
	.foldertree ul {
		margin: 0 0 0 20px;
		padding: 0;
		list-style: none;
		display: none;
	}
	.foldertree > ul {
		margin: 0;
		display: block;
	}
	.foldertree ul li {
		margin: 0;
		padding: 0;
	}
	.foldertree .tree-folder-toggle,
	.foldertree .tree-folder-toggle-spacer {
		display: inline-block;
		width: 10px;
		height: 10px;
		border: none;
		position: relative;
	}
	.foldertree .tree-folder-toggle:before {
		content: '+';
		line-height: 8px;
		font-size: 12px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		color: #aaa;
		border: 1px solid #aaa;
		text-align: center;
	}
	.foldertree .tree-folder-toggle.open:before {
		content: '-';
	}
	.foldertree .tree-folder {
		display: inline-block;
		border: none;
		color: #777;
		padding: 0 5px;
	}
	.foldertree .tree-folder:hover {
		color: #222;
	}
	.foldertree .tree-folder:before {
		content: '\f07b';
		font-family: 'Fontcons';
		font-size: 12px;
		color: #777;
		padding-right: 5px;
	}
	.foldertree ul li.active > .tree-folder:before {
		content: '\f07c';
	}
	.foldertree .tree-folder.activelisted {
		font-weight: bold;
		color: #555;
	}


/* File Grid/List */
	.upload-filelist-toolbar {
	}
	.upload-filelist-toolbar .toolbar {
		margin: 10px;
		padding: 0 0 5px 0;
		border-bottom: 1px solid #ddd;
		font-weight: 200;
	}
	.upload-filelist-toolbar .path {
		float: left;
		list-style: none;
	}
	.upload-filelist-toolbar .path li {
		float: left;
		margin: 0;
		padding: 0;
		font-size: 11px;
	}
	.upload-filelist-toolbar li.divider {
		padding: 0 7px;
	}
	.upload-filelist-toolbar .buttons {
		float:right;
	}
	.upload-filelist-toolbar .filelist-headers {
		font-weight: bold;
		background: #ccc;
		margin: 0 10px;
		overflow: hidden;
		list-style: none;
	}
	.upload-filelist-toolbar .filelist-headers li {
		padding: 5px 5px;
	}
	.upload-filelist-toolbar .filelist-headers .name {
		float: left;
		width: 70%;
	}
	.upload-filelist-toolbar .filelist-headers .modified {
		float: left;
		width: 30%;
	}
	.upload-filelist {
		position: absolute;
		top: 85px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		overflow-y: scroll;
	}
	.upload-filelist ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.upload-filelist ul li {
		margin: 0;
		padding: 8px 5px;
		border-bottom: 1px solid #efefef;
		position: relative;
	}
	.upload-filelist ul .name a {
		text-decoration: none;
		border: none;
		color: #555;
	}
	.upload-filelist > ul > li:hover {
		cursor: pointer;
		background-color: #f0f0f0;
	}
	.upload-filelist ul li.opened:hover {
		background-color: #fff;
	}
	.upload-filelist ul li.file-details:hover {
		cursor: default;
	}
	.upload-filelist ul li.context-menu-active {
		background-color: rgba(51, 153, 255, 0.75);
		color: #FFF;
	}
	.upload-filelist ul li.context-menu-active a {
		color: #FFF;
	}
	.upload-filelist ul li .name {
		float: left;
		width: 70%;
	}
	.upload-filelist ul li .modified {
		float: left;
		width: 30%;
	}
	.upload-filelist .folder,
	.upload-filelist .file {
		padding-left: 30px;
		overflow: hidden;
	}
	.upload-filelist .file:before,
	.upload-filelist .folder:before {
		content: '';
		font-family: 'Fontcons';
		font-size: 18px;
		position: absolute;
		top: 8px;
		left: 5px;
	}
	.upload-filelist .folder:before {
		content: '\f07b';
	}
	.upload-filelist .file:before {
		content: '\f0f5';
	}
	.upload-filelist .file:after {
		content: '\2304';
		font-family: 'Fontcons';
		position: absolute;
		top: 8px;
		right: 10px;
	}
	.upload-filelist .file.opened .name {
		font-weight: bold;
	}
	.upload-filelist .file.opened:after {
		content: '\2303';
	}

/* File Types */
	.upload-filelist .file-ini:before,
	.upload-filelist .file-txt:before {
		content: '\f0f6';
	}
	.upload-filelist .file-ppt:before,
	.upload-filelist .file-pptx:before {
		content: '\f000';
	}
	.upload-filelist .file-xls:before,
	.upload-filelist .file-xlsx:before {
		content: '\f080';
	}

	/* Archives */
	.upload-filelist .file-zip:before,
	.upload-filelist .file-tar:before,
	.upload-filelist .file-gz:before {
		content: '\f005';
	}

	/* Code & Scripts */
	.upload-filelist .file-js:before {
		content: '\f07d';
	}
	.upload-filelist .file-css:before {
		content: '\f054';
	}
	.upload-filelist .file-php:before,
	.upload-filelist .file-html:before,
	.upload-filelist .file-phtml:before {
		content: '\f121';
	}

	/* Music */
	.upload-filelist .file-wav:before,
	.upload-filelist .file-mp3:before  {
		content: '\266B';
	}

	/* Video */
	.upload-filelist .file-mp4:before,
	.upload-filelist .file-avi:before,
	.upload-filelist .file-m4v:before,
	.upload-filelist .file-wmv:before,
	.upload-filelist .file-webm:before,
	.upload-filelist .file-ogv:before  {
		content: '\f008';
	}

	/* Images */
	.upload-filelist .file-png:before,
	.upload-filelist .file-jpg:before,
	.upload-filelist .file-jpeg:before,
	.upload-filelist .file-gif:before,
	.upload-filelist .file-tiff:before,
	.upload-filelist .file-bmp:before,
	.upload-filelist .file-psd:before  {
		content: '\f03e';
	}

/* File Details Box */
	.file-details {
		background: #f0f0f0;
		display: none;
		padding: 20px !important;
		box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
	}
	.file-details .title {
		font-weight: bold;
		font-size: 14px;
		margin: 0 0 10px 0;
	}
	.file-details .left {
		float: left;
		width: 70%;
	}
	.file-details .right {
		float: left;
		width: 25%;
		margin-right: 5%;
	}
	.file-details ul li {
		border: none;
		font-size: 12px;
		padding: 3px 0 !important;
		color: #999;
	}
	.file-details ul li.path {
		word-wrap: break-word;
		cursor: pointer;
	}
	.file-details ul li strong {
		color: #777;
	}
	.file-details .preview {
		text-align: center;
		min-height: 25px;
		margin: 0 !important;
	}

/* File uplaoder */
	.qq-uploading {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		background: rgba(0,0,0,0.75);
	}
	.qq-uploading span {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		text-align: center;
		color: #fff;
		font-size: 36px;
	}
	.qq-uploader {
		position: relative;
		margin: 0;
		padding: 0;
	}
	.qq-upload-button,
	.qq-upload-drop-area {
		border: 3px dashed #ccc;
		min-height: 2em;
		text-align: center;
		font-size: 1.5em;
		color: #ccc;
		padding: 1em 0;
		-webkit-border-radius: 0.25em;
		   -moz-border-radius: 0.25em;
		    -ms-border-radius: 0.25em;
		     -o-border-radius: 0.25em;
		        border-radius: 0.25em;
	}
	.qq-upload-button span,
	.qq-upload-drop-area span {
		position: relative;
		padding-left: 1.5em;
	}
	.qq-upload-button span:before,
	.qq-upload-drop-area span:before {
		display: block;
		position: absolute;
		top: -0.1em;
		font-family: "Fontcons";
		font-size: 1.5em;
		line-height: 1;
		content: "\f016";
		left: 0;
	}
	.qq-upload-button:hover,
	.qq-upload-drop-area:hover,
	.qq-upload-drop-area-active {
		border: 3px solid #333;
		color: #333;
		cursor: pointer;
		background: #fdfce4;
	}
	.qq-upload-drop-area {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.qq-upload-list {
		display: none;
		margin: 1em 0;
	}
	.qq-upload-list li {
		color: #FFFFFF;
		margin: 0 0 1px;
		padding: 0.5em;
		overflow: hidden;
		line-height: 1;
		font-size: 1em;
		list-style: none;
		-webkit-text-shadow: none;
		   -moz-text-shadow: none;
		    -ms-text-shadow: none;
		     -o-text-shadow: none;
		        text-shadow: none;
		-webkit-border-radius: 0.5em;
		   -moz-border-radius: 0.5em;
		    -ms-border-radius: 0.5em;
		     -o-border-radius: 0.5em;
		        border-radius: 0.5em;
		position: relative;
		background: #BFE613;
		background: #5DA30C -moz-linear-gradient(-45deg, rgba(45, 170, 60, 0), rgba(45, 170, 60, 0) 10%, rgba(146, 209, 0, 0.4) 30%, rgba(146, 209, 0, 0.4) 50%, rgba(45, 170, 60, 0) 50%, rgba(45, 170, 60, 0));
		background: #5DA30C -webkit-gradient(linear, 0 0, 60 60, from(rgba(45, 170, 60, 0)), color-stop(.49, rgba(45, 170, 60, 0)), color-stop(.491, rgba(146, 209, 0, .4)), color-stop(.8, rgba(146, 209, 0, .4)), color-stop(.801, rgba(45, 170, 60, 0)), to(rgba(45, 170, 60, 0)));
		background-size: 120px 120px;
		-webkit-animation-name: gradientShift;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-fill-mode: both;
		-webkit-animation-timing-function: linear;
		-moz-animation-name: gradientShift;
		-moz-animation-duration: 1s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-fill-mode: both;
		-moz-animation-timing-function: linear;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
		filter: alpha(opacity=75);
		-webkit-opacity: 0.75;
		-moz-opacity: 0.75;
		opacity: 0.75;
	}
	@-webkit-keyframes gradientShift {
		0%   { background-position-x: 0px; }
		100% { background-position-x: 120px; }
	}

	@-moz-keyframes gradientShift {
		0%   { background-position: 0px 0; }
		100% { background-position: 120px 0; }
	}
	.qq-upload-file,
	.qq-upload-spinner,
	.qq-upload-size,
	.qq-upload-cancel,
	.qq-upload-failed-text {
		margin-right: 12px;
		z-index: 250;
		position: relative;
	}
	.qq-upload-spinner {
		display: inline-block;
		background: url("../img/loading.gif");
		width: 15px;
		height: 15px;
		vertical-align: text-bottom;
	}
	.qq-upload-size,
	.qq-upload-cancel {
		font-size: 0.9em;
		font-weight: normal;
	}
	.qq-upload-failed-text {
		display: none;
	}
	.qq-upload-fail .qq-upload-failed-text {
		display: inline;
	}
	.qq-upload-list li.qq-upload-success {
		background: #5DA30C;
		color: #FFFFFF;
	}
	.qq-upload-list li.qq-upload-fail {
		background: #AF0000;
		color: #FFFFFF;
	}
	.qq-upload-spinner,
	.qq-upload-size,
	.qq-upload-cancel,
	.qq-upload-failed-text {
		float: right;
	}
	.qq-upload-spinner {
		display: none;
	}
	.qq-progress-bar {
		width: 51%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #5DA30C;
		-webkit-box-shadow: 0px 0px 14px #0D4500;
		   -moz-box-shadow: 0px 0px 14px #0D4500;
		    -ms-box-shadow: 0px 0px 14px #0D4500;
		     -o-box-shadow: 0px 0px 14px #0D4500;
		        box-shadow: 0px 0px 14px #0D4500;
		-webkit-border-radius: 0.5em;
		   -moz-border-radius: 0.5em;
		    -ms-border-radius: 0.5em;
		     -o-border-radius: 0.5em;
		        border-radius: 0.5em;
	}
	.qq-upload-cancel {
		color: #800000;
		display: none;
	}
	.qq-upload-success .qq-progress-bar {
		display: none;
	}

/* Lightboxed Forms */
	.hubForm {
	}
	.hubForm fieldset {
		color: #777;
	}
	.hubForm legend {
		margin: 0;
		padding: 0.8em 2em;
		background: #666;
		text-shadow: 0 -1px 1px #000;
		color: #ECECEC;
		width: 100%;
		font-weight: bold;
		border-bottom: 1px solid #E5E5E5;
		box-sizing: border-box;
	}
	.hubForm label {
		display: block;
		padding: 1.5em 2em 0 2em;
	}
	.hubForm label input[type=text],
	.hubForm label select {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.hubForm .controls {
		margin: 2em 0;
		text-align: center;
	}

@media screen and (max-width: 1000px) {
	.foldertree {
		display: none;
	}
	.upload-browser,
	.foldertree-list {
		display: block;
	}
	.upload-browser-col {
		display: block;
	}
	.upload-browser-col.left {
		min-height: 13em;
		width: auto;
	}
	.upload-browser-col.right {
		padding-left: 0;
	}
}

@media screen and (max-width: 690px), (max-height: 233px) {
	.group_files .files-wrap {
		min-height: 40em;
	}
	.upload-filelist-toolbar {
		display: none;
	}
	.upload-filelist {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.upload-browser-filelist-iframe {
		position: static;
	}
	.name {
		width: 100%;
	}
	.modified {
		display: none;
	}
}

@media all and (max-width: 450px) {
	.file-details .left,
	.file-details .right {
		float: none;
		width: 100%;
		margin: 0;
	}
	.file-details .left {
		margin: 20px 0 0 0;
	}
}