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

/*

	-- -- -- -- -- -- --
	com_support CSS
	-- -- -- -- -- -- --

*/

/* Intro */
	#introduction:after {
		content: "\f055";
	}
	#ticketForm {
		position: relative;
		overflow: hidden;
	}
	.com_support .ticket-watch {
		margin-top: 2em;
		padding: 0;
		background-color: #ccc;
		background-color: rgba(0, 0, 0, 0.05);
		-webkit-border-radius: 0.25em;
		   -moz-border-radius: 0.25em;
		    -ms-border-radius: 0.25em;
		     -o-border-radius: 0.25em;
		        border-radius: 0.25em;
		-webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 0px #fff;
		   -moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 0px #fff;
		    -ms-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 0px #fff;
		     -o-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 0px #fff;
		        box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 0px #fff;
	}
	.com_support .ticket-watch .btn {
		display: block;
	}
	.com_support .ticket-watch p {
		padding: 1em;
		margin: 0;
	}
	.com_support #watching {
		margin: 0;
		padding: 0.5em 30px;
		padding: 1em 1em 0 1em;
		-webkit-border-radius: 0.25em 0.25em 0 0;
		   -moz-border-radius: 0.25em 0.25em 0 0;
		    -ms-border-radius: 0.25em 0.25em 0 0;
		     -o-border-radius: 0.25em 0.25em 0 0;
		        border-radius: 0.25em 0.25em 0 0;
		background: #d2dfea;
		background: -webkit-gradient(linear, left top, left bottom, from(#bfd3e2), to(#d2dfea));
		background: -webkit-linear-gradient(#bfd3e2, #d2dfea);
		background: linear-gradient(#bfd3e2, #d2dfea);
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d2dfea,endColorstr=#bfd3e2);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d2dfea, endColorstr=#bfd3e2)";
		box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.8);
		border-bottom: 1px solid #a4bed2;
		text-align: center;
		font-weight: bold;
		color: #357fa1;
		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
		-webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
		   -moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
		    -ms-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
		     -o-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
		        box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
	}
	.com_support #watching p {
		padding: 0 0 1em 0;
	}
	.com_support #watching a {
		display: block;
		border: 1px solid #2586af;
		border-color: #2586af #2490b9 #2490b9 #2586af;
		color: #fff;
		padding: 0.4em 0.91em 0.4em 0.91em;
		-webkit-background-clip: padding-box;
		-webkit-border-radius: 0.25em;
		   -moz-border-radius: 0.25em;
		    -ms-border-radius: 0.25em;
		     -o-border-radius: 0.25em;
		        border-radius: 0.25em;
		-webkit-box-shadow: inset 0 0 1px #fff;
		   -moz-box-shadow: inset 0 0 1px #fff;
		    -ms-box-shadow: inset 0 0 1px #fff;
		     -o-box-shadow: inset 0 0 1px #fff;
		        box-shadow: inset 0 0 1px #fff;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
		outline: 0;
		font-size: 1em;
		white-space: nowrap;
		word-wrap: normal;
		text-align: center;
		font-weight: normal;
		vertical-align: middle;
		cursor: pointer;
		background: #3e779d;
		background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
		background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
		background: -moz-linear-gradient(top, #65a9d7, #3e779d);
		background: -ms-linear-gradient(top, #65a9d7, #3e779d);
		background: -o-linear-gradient(top, #65a9d7, #3e779d);
		background: linear-gradient(#65a9d7, #3e779d);
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#65a9d7,endColorstr=#3e779d);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#65a9d7, endColorstr=#3e779d)";
	}
	.com_support #watching a:hover {
		background: #3e779d;
		-webkit-box-shadow: inset 0 0 1px #fff, 0 0 2px rgba(0, 0, 0, 0.35);
		   -moz-box-shadow: inset 0 0 1px #fff, 0 0 2px rgba(0, 0, 0, 0.35);
		    -ms-box-shadow: inset 0 0 1px #fff, 0 0 2px rgba(0, 0, 0, 0.35);
		     -o-box-shadow: inset 0 0 1px #fff, 0 0 2px rgba(0, 0, 0, 0.35);
		        box-shadow: inset 0 0 1px #fff, 0 0 2px rgba(0, 0, 0, 0.35);
	}
	.com_support #watching a:active {
		background: #65a9d7;
		background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
		background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
		background: -moz-linear-gradient(top, #3e779d, #65a9d7);
		background: -ms-linear-gradient(top, #3e779d, #65a9d7);
		background: -o-linear-gradient(top, #3e779d, #65a9d7);
	}
	.com_support .four div {
		padding-left: 25px;
		*padding-left: 0;  /* [!] HACKS - IE 7 and older */
	}
	.com_support .four div:before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 1em;
		width: 20px;
		height: 20px;
		font-size: 20px;
		font-family: 'Fontcons';
		color: #aaa;
	}
	.com_support .four div.note:before {
		content: "\f01f";
	}
	.com_support .four div.presentation:before {
		content: "\270D";
	}
	.com_support .four div.tag:before {
		content: "\f02c";
	}
	.com_support .four div.search:before {
		content: "\f002";
	}
	.com_support .four div.feedback:before {
		content: "\f075";
	}
	.com_support .four div.series:before {
		content: "\f02d";
	}
	.com_support .four div.idea:before {
		content: "\f078";
	}
	.com_support .four div.wiki:before {
		content: "\f072";
	}
	.com_support .four div.ticket:before {
		content: "\f02a";
	}
	#hubForm label#fbBotcheck-label {
		display: none;
	}
	#component-body #content-header h2 {
		line-height: 1;
		font-size: 1.1em;
		font-weight: 400;
		letter-spacing: .1em;
		text-transform: uppercase;
		margin: 0;
		padding: 1em 1.618em;
		color: #fff;
		-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.06);
		   -moz-box-shadow: 0 2px 0 rgba(0,0,0,0.06);
		    -ms-box-shadow: 0 2px 0 rgba(0,0,0,0.06);
		     -o-box-shadow: 0 2px 0 rgba(0,0,0,0.06);
		        box-shadow: 0 2px 0 rgba(0,0,0,0.06);
		background-color: #e84c3d;
		background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .075) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .075) 50%, rgba(255, 255, 255, .075) 75%, transparent 75%, transparent);
		background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .075) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .075) 50%, rgba(255, 255, 255, .075) 75%, transparent 75%, transparent);
		background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .075) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .075) 50%, rgba(255, 255, 255, .075) 75%, transparent 75%, transparent);
		background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .075) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .075) 50%, rgba(255, 255, 255, .075) 75%, transparent 75%, transparent);
		background-image: linear-gradient(-45deg, rgba(255, 255, 255, .075) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .075) 50%, rgba(255, 255, 255, .075) 75%, transparent 75%, transparent);
		-webkit-background-size: 30px 30px;
		   -moz-background-size: 30px 30px;
		    -ms-background-size: 30px 30px;
		     -o-background-size: 30px 30px;
		        background-size: 30px 30px;
	}
	#component-body #hubForm fieldset {
		border: 1px solid rgba(0, 0, 0, 0.1);
		padding: 1em;
		margin: 1em 0;
	}
	#component-body #hubForm .form-group {
		margin: 0 0 1em 0;
	}
	#component-body #hubForm .submit {
		text-align: center;
	}
	#component-body #hubForm input[type=email],
	#component-body #hubForm input[type=text],
	#component-body #hubForm textarea,
	#component-body #hubForm select {
		width: 100%;
	}
	#component-body label span.required {
		text-transform: uppercase;
		font-size: xx-small;
		color: red;
	}

/* Columns */
	#comment {
		margin: 0;
	}
	.com_support .below {
		padding-top: 0;
	}

/* Query list */
	.panel {
		display: table;
		width: 100%;
	}
	.panel-row {
		display: table-row;
		width: 100%;
	}
	.pane {
		display: table-cell;
		margin: 0;
		padding: 0;
		vertical-align: top;
	}
	.pane-inner {
		overflow-y: scroll;
		height: 100%;
		margin: 0;
		padding: 0;
		position: relative;
		min-height: 760px;
	}

	.pane-queries {
		padding: 0;
		width: 15em;
		min-width: 15em;
		background: #e9e9e9;
		background: rgba(0, 0, 0, 0.075);
	}
	.pane-queries .pane-inner {
		padding: 30px;
		width: 15em;
		min-width: 15em;
	}

	/* Query list */
	.pane-queries ul {
		list-style: none;
		margin: 0;
		position: relative;
	}
	.pane-queries li {
		position: relative;
		margin: 0.5em 0;
		padding: 0;
	}
	.pane-queries ul ul {
		margin: 0 0 1em 1.5em;
		display: none;
	}
	.pane-queries ul ul:before {
		content: "";
		width: 1px;
		background: #999;
		background: rgba(0, 0, 0, 0.15);
		position: absolute;
		top: 0;
		left: -1em;
		bottom: 1em;
	}
	.pane-queries li li:before {
		content: "";
		width: 0.8em;
		height: 1px;
		background: #999;
		background: rgba(0, 0, 0, 0.15);
		position: absolute;
		top: 0.9em;
		left: -1em;
	}
	.pane-queries .folder {
		cursor: pointer;
	}
	.pane-queries .open .icon-folder:before {
		content: "\f07c";
	}
	.pane-queries .open ul {
		display: block;
	}
	.pane-queries li a {
		color: #888;
	}
	.pane-queries li a:hover {
		color: #222;
	}
	.pane-queries li a.aquery {
		display: block;
		margin: 0;
		padding: 0.2em 2em 0.2em 0.2em;
		border: none;
	}
	.pane-queries li a.copy,
	.pane-queries li a.delete,
	.pane-queries li a.edit {
		border: none;
		padding: 0;
		margin: 0;
		width: 1em;
		height: 1em;
		font-size: 1em;
		line-height: 1;
		font-weight: normal;
		overflow: hidden;
		display: inline-block;
		color: #666;
	}
	.pane-queries li a.copy:before,
	.pane-queries li a.delete:before,
	.pane-queries li a.edit:before {
		font-family: 'Fontcons';
		line-height: 1;
		margin-right: 2em;
	}
	.pane-queries li a.delete:before {
		content: '\2716';
	}
	.pane-queries li a.edit:before {
		content: '\270E';
	}
	.pane-queries li a.copy:before {
		content: '\f060';
	}
	.pane-queries li.active>a.aquery {
		color: #222;
		font-weight: bold;
	}
	.pane-queries li a span {
		font-size: 90%;
		display: block;
		position: absolute;
		top: 0.2em;
		right: 0;
		line-height: 1;
		padding: 0.3em 0.4em;
		background: #e1e1e1;
		background: rgba(0, 0, 0, 0.1);
		-webkit-border-radius: 0.25em;
		   -moz-border-radius: 0.25em;
		    -ms-border-radius: 0.25em;
		     -o-border-radius: 0.25em;
		        border-radius: 0.25em;
		color: #999;
		font-weight: normal;
	}

	/* Query options */
	.query-options {
		display: block;
		position: absolute;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		-webkit-opacity: 0;
		   -moz-opacity: 0;
		        opacity: 0;
		text-indent: 0;
		overflow: visible;
		transition: 0.3s ease;
		padding: 0.35em 0.65em 0.35em 0.65em;
		font-size: 0.95em;
		font-weight: 400;
		line-height: 1;
		white-space: nowrap;
		text-align: center;
		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
		border-radius: 0.25em;
		right: 100%;
		bottom: 50%;
		margin: 0 0.5em -0.75em 0;
		visibility: hidden\9;
		background-color: #eee;
		color: #222;
		text-shadow: 0 -1px 0px #fff;
	}
	.query-options:before {
		position: absolute;
		left: 100%;
		bottom: 50%;
		content: "";
		padding: 0;
		margin-bottom: -6px;
		background: transparent;
		border: 6px solid transparent;
		border-color: transparent transparent transparent #eee;
		box-shadow: none;
		display: block;
		width: 0;
	}
	.pane-queries li li:hover .query-options {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		-webkit-opacity: 1;
		   -moz-opacity: 1;
		        opacity: 1;
		visibility: visible\9;
	}
	.pane-queries .folder-options {
		float: right;
		display: none;
	}
	.pane-queries li:hover .folder-options {
		display: block;
	}

	.pane-queries li a:hover {
		color: #222;
	}
	.pane-queries li a.delete:hover {
		color: red;
	}

	/* Controls */
	.pane-queries ul.controls {
		border-top: 1px solid rgba(0, 0, 0, 0.2);
		margin: 30px 0 0 0;
		padding: 30px 0 0 0;
	}
	.pane-queries ul.controls:before,
	.pane-queries ul.controls:after {
		content: "";
		display: table;
		line-height: 0;
	}
	.pane-queries ul.controls:after {
		clear: left;
	}
	.pane-queries ul.controls li {
		float: left;
		margin: 0 1em 0 0;
		padding: 0.2em 0;
	}
	.pane-queries ul.controls li a {
		display: block;
		width: 1em;
		height: 1em;
		padding: 0.2em;
		font-size: 2em;
		overflow: hidden;
		white-space: nowrap;
		border: none;
		position: relative;
		color: #bbb;
		background: transparent;
	}
	.pane-queries ul.controls li a:after {
		border: none;
		padding: 1px;
		margin: 0;
		width: 1em;
		height: 1em;
		font-size: 0.65em;
		font-family: 'Fontcons';
		line-height: 1;
		content: "\2295";
		position: absolute;
		bottom: 0.2em;
		right: 0;
		background: #e1e1e1;
		text-align: center;
		border-radius: 50%;
	}
	.pane-queries ul.controls li a:hover {
		color: #222;
		border: none;
		text-decoration: none;
	}
	.pane-queries ul.controls li a:hover:after {
		color: #78c3d2;
	}
	.pane-queries ul.controls li a.icon-batch:after {
		content: "";
		display: none;
	}
	.icon-folder:before,
	.icon-list:before {
		font-family: "Fontcons";
		margin-right: 0.5em;
	}
	.icon-folder:before {
		content: "\f07b";
	}
	.icon-list:before {
		content: "\f036";
	}
	.icon-batch:before {
		content: "\f060";
		font-family: 'Fontcons';
	}
	.icon-watch:before {
		content: "\f06e";
		font-family: 'Fontcons';
		margin-right: 0.5em;
	}
	#watch-list>li {
		margin: 0;
	}
	#watch-list>li>ul,
	#watch-list>li>ul li:last-child {
		margin-bottom: 0;
	}
	#watch-list {
		padding-bottom: 30px;
		margin-bottom: 30px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}

	#ticketForm {
		position: relative;
		overflow: hidden;
		height: 100%;
	}
	#ticketForm .list-options {
		border-bottom: 1px solid #ddd;
		background: #fff;
	}
	#ticketForm fieldset#filter-bar {
		padding: 0;
		margin: 0;
		border: none;
		width: 85%;
		position: relative;
		border-left: 3px solid transparent;
	}
	#ticketForm fieldset#filter-bar .submit,
	#ticketForm fieldset#filter-bar label {
		display: none;
	}
	#ticketForm fieldset#filter-bar #filter_search {
		background-color: transparent;
		border: none;
		margin: 0;
		width: 100%;
		max-width: 100%;
		line-height: 1;
		padding: 1em .61803399em 1em 2.61803399em;
		color: #333;
		display: block;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		    -ms-box-sizing: border-box;
		     -o-box-sizing: border-box;
		        box-sizing: border-box;
		-webkit-background-clip: padding-box;
		   -moz-background-clip: padding-box;
		    -ms-background-clip: padding-box;
		     -o-background-clip: padding-box;
		        background-clip: padding-box;
		outline: none;
		-webkit-appearance: none;
		   -moz-appearance: none;
		-webkit-border-radius: 0;
		   -moz-border-radius: 0;
		    -ms-border-radius: 0;
		     -o-border-radius: 0;
		        border-radius: 0;
	}
	#ticketForm fieldset#filter-bar #filter_search:focus {
		color: #333;
	}

	/* Sort options */
	.sort-options {
		list-style: none;
		padding: 0;
		margin: 0;
		float: right;
	}
	.sort-options li {
		border: none;
		position: relative;
	}
	.sort-options>li {
		margin: 0;
		padding: 0;
	}
	.sort-options span {
		display: block;
		color: transparent;
		margin: 0;
		padding: 0.85em .41803399em;
		width: 2.7em;
		line-height: 1;
		height: 2.7em;
		font-size: 1.2em;
		overflow: hidden;
		font-weight: normal;
		cursor: pointer;
		white-space: nowrap;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	@-moz-document url-prefix() {
		.sort-options span {
			padding: 0.75em .41803399em;
		}
	}
	.sort-options span:before {
		content: "\f161";
		font-family: "Fontcons";
		color: #ccc;
	}
	.sort-options:hover span:before,
	.sort-options span:hover:before {
		color: #222;
	}
	.sort-options ul {
		list-style: none;
		margin: -1px 0 0 0;
		padding: 0.5em 0;
		visibility: hidden;
		position: absolute;
		top: 100%;
		right: 0.5em;
		z-index: 798;
		min-width: 8em;
		background: #fff;
		border: 1px solid #ddd;
		border-top: none;
	}
	.sort-options ul ul {
		padding: 0;
		margin: 0;
		top: auto;
		left: auto;
		position: static;
		width: auto;
		visibility: hidden;
	}
	.sort-options ul li {
		float: none;
		margin: 0;
		padding: 0;
		position: static;
	}
	.sort-options ul li a:before {
		content: "";
		font-family: 'Fontcons';
		padding-left: 0.2em;
		width: 1em;
		display: inline-block;
		text-align: center;
	}
	.sort-options ul li a {
		text-decoration: none;
		font-weight: normal;
		line-height: 1em;
		border: none;
		margin: 0;
		padding: 0.4em 0.75em;
		cursor: pointer;
		display: block;
	}
	.sort-options ul li a:hover {
		color: #222;
	}
	.sort-options ul li a.desc:before {
		content: "\2193";
	}
	.sort-options ul li a.asc:before {
		content: "\2191";
	}
	.sort-options li:hover ul,
	.sort-options li:focus ul {
		visibility: visible;
	}
	#clear-search {
		color: #ccc;
		position: absolute;
		display: block;
		width: 1em;
		height: 1em;
		overflow: hidden;
		top: 1.2em;
		left: 1em;
		font-size: 1em;
		line-height: 1;
		margin-right: 0.5em;
		cursor: pointer;
	}
	#clear-search:before {
		content: "\2716";
		font-family: "Fontcons";
		margin-right: 1em;
	}
	#clear-search:hover {
		color: #222;
	}

/* Ticket list */
	#tktlist {
		border: none;
		margin: 0;
		padding: 0;
	}
	#tktlist tbody th,
	#tktlist tbody td {
		padding: 1.22606798em .61803399em;
		border: none;
		border-bottom: 1px solid #e0e0e0;
	}
	#tktlist tfoot td {
		padding: 0.61803399em 1.61803399em 1.61803399em 1.61803399em;
	}
	#tktlist tbody tr th,
	#tktlist tbody tr th:first-child,
	#tktlist tbody tr td:first-child {
		border-left-width: 5px;
		border-left-style: solid;
		border-left-color: transparent;
		padding-left: 1.61803399em;
		text-align: center;
	}
	#tktlist tbody tr {
		background: transparent;
	}
	#tktlist tbody tr td.tkt-severity,
	#tktlist tbody tr th:last-child, 
	#tktlist tbody tr td:last-child {
		padding-right: 0;
		padding-top: 0;
	}
	#tktlist tbody tr.noresults td,
	#tktlist tbody tr.noresults td:last-child {
		padding-right: 1.61803399em;
		padding-top: 1.61803399em;
	}
	#tktlist thead tr th.tkt-severity,
	#tktlist tbody tr td.tkt-severity {

	}
	#tktlist tbody tr td.tkt-severity .delete {
		display: block;
		width: 1em;
		height: 1em;
		border: none;
		overflow: hidden;
		padding: 0;
		margin: 0;
		background: transparent;
		visibility: hidden;
		color: #ccc;
		font-size: 1.2em;
	}
	#tktlist tbody tr td.tkt-severity .delete:before {
		font-family: 'Fontcons';
		content: '\f014';
		padding-right: 2em;
	}
	#tktlist tbody tr td.tkt-severity .delete:hover {
		color: #333;
	}
	#tktlist tbody tr:hover td.tkt-severity .delete {
		visibility: visible;
	}
	#tktlist tbody tr:hover {
		background: #ffe;
	}
	#tktlist .ticket-author {
		font-weight: bold;
		color: #666;
	}
	#tktlist .ticket-id {
		color: #666;
		font-size: 1.2em;
		font-weight: bold;
	}
	#tktlist p {
		margin: 0.4em 0;
		position: relative;
	}
	#tktlist .ticket-content {
		color: #666;
		border: none;
		word-wrap: break-word;
	}
	#tktlist td:hover .ticket-content {
		border-bottom: 1px dotted #666;
	}
	#tktlist .ticket-content:hover {
		color: #333;
		border-bottom: 1px solid #333;
	}
	#tktlist td p:first-child {
		margin-top: 0;
	}
	#tktlist td p:last-child {
		margin-bottom: 0;
	}
	#tktlist .ticket-activity {
		font-weight: bold;
		position: absolute;
		top: 0;
		right: 0;
		color: #6b85ce;
	}
	#tktlist .ticket-datetime {
		color: #aaa;
		visibility: hidden;
	}
	#tktlist td:hover .ticket-datetime {
		visibility: visible;
	}
	#tktlist .ticket-details,
	#tktlist .ticket-details a {
		color: #aaa;
	}

	#tktlist .ticket-tags:before {
		font-family: 'Fontcons';
		content: "\f02c";
		font-weight: normal;
		padding-right: 0.2em;
	}
	#tktlist .ticket-tags a {
		font-weight: bold;
	}

	#tktlist .ticket-owner {
		float: right;
		font-weight: bold;
	}
	#tktlist .ticket-owner:after {
		font-family: 'Fontcons';
		content: "\f007";
		font-weight: normal;
		padding-left: 0.2em;
	}
	#tktlist td:hover .ticket-details,
	#tktlist td:hover .ticket-details a {
		color: #666;
	}
	/* Status */
	#tktlist .status {
		width: 1em;
		height: 1em;
		line-height: 1;
		overflow: hidden;
		text-align: left;
		font-weight: normal;
		display: none;
		margin: 0.4em auto 0 auto;
	}
	#tktlist .status.new,
	#tktlist .status.closed {
		display: block;
	}
	#tktlist .open {
		color: #66AA00;
	}
	#tktlist .new {
		color: #ff1177;
	}
	#tktlist .closed {
		color: #aaaaaa;
	}
	#tktlist small.status-before,
	#tktlist .status.closed:before,
	#tktlist .status.new:before {
		font-size: 1em;
		line-height: 1;
		font-family: 'Fontcons';
		margin-right: 0.2em;
	}
	#tktlist .status.closed:before {
		content: "\2714";
	}
	#tktlist .status.new:before {
		content: "\273D";
	}
	#tktlist .ticket-target_date {
		display: inline-block;
		margin: 0.5em 0 0 0;
		font-size: 1.5em;
		line-height: 1;
		width: 1em;
		height: 1em;
		overflow: hidden;
		color: #ccc;
	}
	#tktlist .ticket-target_date:before {
		font-family: 'Fontcons';
		margin-right: 0.2em;
		content: "\f0d0";
	}
	/* Severity */
	#tktlist .ticket-severity {
		display: block;
		width: 0;
		height: 0;
		border: 1.2em solid #e9e9e9;
		border-color: #e9e9e9 #e9e9e9 transparent transparent;
		text-align: right;
		position: relative;
		z-index: 50;
		margin: 0;
		padding: 0;
	}
	#tktlist .ticket-severity span {
		display: none;
	}
	#tktlist small.severity-after,
	#tktlist .ticket-severity:after {
		display: block;
		position: absolute;
		top: -0.85em;
		right: -0.85em;
		width: 1em;
		height: 1em;
		font-size: 1.2em;
		line-height: 1;
		font-family: 'Fontcons';
		color: #fff;
		z-index: 51;
		content: "";
		overflow: hidden;
		font-weight: normal;
	}
	#tktlist .critical {
		border-color: #dd4a38 #dd4a38 transparent transparent;
	}
	#tktlist .critical:after {
		content: "\2622";
	}
	#tktlist .major {
		border-color: #ebc250 #ebc250 transparent transparent;
	}
	#tktlist .major:after {
		content: "\f06d";
	}
	#tktlist .minor {
		border-color: #5fd2db #5fd2db transparent transparent;
	}
	#tktlist .minor:after {
		content: "\f043";
		right: -0.85em;
	}
	#tktlist .trivial {
		border-color: #6b85ce #6b85ce transparent transparent;
	}
	#tktlist .trivial:after {
		content: "\2746";
	}
	#tktlist .ticket-group {
		font-weight: bold;
	}
	#tktlist .ticket-group:before {
		font-family: 'Fontcons';
		content: "\f042";
		font-weight: normal;
		padding-right: 0.2em;
	}

/* Ticket */
	.ticket .entry-content {
		margin-bottom: 0;
	}
	.ticket .entry-body {
		word-wrap: break-word;
	}
	.ticket .entry-details {
		margin: 0 0 1em 70px;
		padding: 0;
		background: rgba(0, 0, 0, 0.040);
		-webkit-border-radius: 0 0.27em 0.27em 0.27em;
		   -moz-border-radius: 0 0.27em 0.27em 0.27em;
		    -ms-border-radius: 0 0.27em 0.27em 0.27em;
		     -o-border-radius: 0 0.27em 0.27em 0.27em;
		        border-radius: 0 0.27em 0.27em 0.27em;
		position: relative;
		color: #aaa;
		font-size: 0.85em;
	}
	.ie8 .ticket .entry-details {
		background: #e8e8e8;
	}
	.ticket .entry-details table {
		border: none;
	}
	.ticket .entry-details table tbody tr:first-child th,
	.ticket .entry-details table tbody tr:first-child td {
		border: none;
	}
	.ticket .entry-details table tbody tr,
	.ticket .entry-details table tbody th,
	.ticket .entry-details table tbody td {
		background: transparent;
		border: none;
		border-bottom: 1px solid #f7f7f7;
		text-align: left;
	}
	.ticket .entry-details table tbody th {
		padding: .61803399em 0 .61803399em 2em;
	}
	.ticket .entry-details table tbody td {
		padding: .61803399em 2em;
		white-space: pre-wrap;
	}
	.ticket .time:before, 
	.ticket .date:before {
		content: "";
		font-family: "Fontcons";
		margin-right: 0.2em;
	}
	.ticket .time:before {
		content: "\f017";
	}
	.ticket .date:before {
		content: "\f073";
	}
	/* Status */
	.ticket-status {
		margin: 0;
		padding: 0;
	}
	.ticket-status p {
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 1.2em;
		padding: 0.5em;
		text-align: center;
		border: 5px solid #fff; 
		background: #fff;
	}
	.ticket-status .open {
		color: #c00;
		border-color: #EFCCC2; 
		background: #FFF2EF;
	}
	.ticket-status .closed {
		color: #000;
		border-color: #ccc;
		background-color: #eee;
	}
/* Comments */
	ol.comments li.comment {
		margin-bottom: 1em;
	}
	ol.comments .comment-content {
		margin-bottom: 0;
		word-wrap: break-word;
	}
	ol.comments .comment-changelog {
		margin: 0 0 0 70px;
		padding: 1.61803399em 1.61803399em;
		background: #e8e8e8;
		background: rgba(0, 0, 0, 0.040);
		-webkit-border-radius: 0 0.27em 0.27em 0.27em;
		   -moz-border-radius: 0 0.27em 0.27em 0.27em;
		    -ms-border-radius: 0 0.27em 0.27em 0.27em;
		     -o-border-radius: 0 0.27em 0.27em 0.27em;
		        border-radius: 0 0.27em 0.27em 0.27em;
		position: relative;
		color: #aaa;
	}
	ol.comments .comment-content + .comment-changelog {
		padding: 0.836em 1.61803399em 1.61803399em 1.61803399em;
		-webkit-border-radius: 0 0 0.27em 0.27em;
		   -moz-border-radius: 0 0 0.27em 0.27em;
		    -ms-border-radius: 0 0 0.27em 0.27em;
		     -o-border-radius: 0 0 0.27em 0.27em;
		        border-radius: 0 0 0.27em 0.27em;
	}
	ol.comments .comment-changelog ul, 
	ol.comments .comment-changelog li {
		list-style: none;
		margin: 0;
		padding: 0;
		border: none;
		color: #999;
	}
	ol.comments .comment-changelog ul {
		position: relative;
		z-index: 1;
		overflow: hidden;
		list-style: none;
		padding: 0 0 0 20px;
		margin: 0;
		font-size: 0.85em;
	}
	ol.comments .comment-changelog li.changelog-before,
	ol.comments .comment-changelog li.changelog-after,
	ol.comments .comment-changelog ul:before, 
	ol.comments .comment-changelog ul:after {
		content: "";
		position: absolute;
		top: 0.218em;
		left: 0;
		z-index: 2;
		display: block;
		font-family: 'Fontcons';
		font-size: 14px;
		line-height: 14px;
		color: #aaa;
	}
	ol.comments .comment-changelog ul.changes li.changelog-before,
	ol.comments .comment-changelog ul.changes:before {
		left: 3px;
		content: '\270E';
	}
	ol.comments .comment-changelog ul.changes + ul.notifications {
		margin-top: 0.836em;
	}
	ol.comments .comment-changelog ul.notifications li.changelog-before,
	ol.comments .comment-changelog ul.notifications:before {
		content: '\2709';
	}

/* Abuse Item */
	.abuseitem {
		padding: 10px 10px 10px 50px; 
		margin: 5em 0 3em 0;
		text-align: left;
		border: 1px solid #EFCCC2; 
		background: #FFF2EF;
		position: relative;
	}
	.abuseitem:before {
		content: "";
		display: table;
		clear: left;
	}
	.abuseitem:after {
		content: "\270B";
		font-family: "Fontcons";
		display: block;
		font-size: 36px;
		line-height: 1;
		width: 36px;
		height: 36px;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 10px;
		color: #c00;
	}
	.abuseitem h4 {
		margin: 0;
		font-size: 100%;
		color: #666666;
		font-weight: normal;
	}
	#hubForm .abuseitem.field-wrap p, 
	#hubForm .abuseitem p,
	.abuseitem p {
		margin: 0.5em 0 0.5em 0;
	}
	.abuseitem a {
		color: #666;
		border-bottom: 1px solid #ccc;
	}

/* Forms */
	#hubForm .multiple-option label {
		padding-right: 1.5em;
	}

/* Stats */
	#ticket-stats .subject {
		margin-right: 505px;
		padding-top: 1em;
	}
	#ticket-stats .aside h3,
	#ticket-stats .subject h3 {
		display: block;
		margin-top: 0;
		border-bottom: 1px solid #ccc;
	}
	.legend table {
		background: transparent;
		width: auto;
		border: none;
	}
	.legend table tr {
		background: transparent;
	}
	.legend table td {
		padding: 0.2em;
		background: transparent;
		border: none;
	}
	.stats-pie-chart {
		min-width: 270px;
		height: 270px;
	}
	.stats-user-chart {
		min-width: 200px;
		height: 100px;
	}
	.stats-tickets-chart {
		min-width: 400px;
		height: 200px;
		margin: 0 auto;
	}
	.chart-label {
		font-size:8pt;
		text-align:center;
		padding:2px;
		color:white;
	}
	#flotTip {
		-webkit-border-radius: 0.25em;
		   -moz-border-radius: 0.25em;
		    -ms-border-radius: 0.25em;
		     -o-border-radius: 0.25em;
		        border-radius: 0.25em;
		background: #111111;
		background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
		background: -webkit-linear-gradient(#333333, #111111);
		background: -moz-linear-gradient(center top, #333333 0%, #111111 100%);
		background: -moz-gradient(center top, #333333 0%, #111111 100%);
		background: -o-linear-gradient(#333333, #111111);
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#333333,endColorstr=#111111);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#333333, endColorstr=#111111)";
		font-size: 0.85em;
		padding: 0.5em 1em;
		color: #eee;
	}
	.breakdown {
		margin-bottom: 2em;
	}
	.time-range {
		margin-top: 0;
		padding-top: 0;
	}
	.support-stats-filter {
		 text-align: right;
	}
	.support-stats-overview {
		border: none;
		margin: 0;
	}
	.support-stats-overview thead th {
		color: #999;
		font-weight: normal;
		border-bottom: none;
		padding-bottom: 0;
		padding-top: 1em;
	}
	.support-stats-overview tbody td {
		padding: 0 0.2em 0.4em 0.2em;
		font-size: 2.5em;
		line-height: 1;
		font-weight: normal;
		color: #777;
		border: none;
	}
	.entry-content .support-stats-overview {
		margin-top: 1.5em;
	}
	.entry-content .support-stats-overview tbody td {
		font-size: 2em;
	}
	.entry-content .support-stats-overview thead th {
		border-top: 2px solid #efefef;
	}
	.support-stats-overview tbody td.block {
		color: #b18fbc;
		color: #777;
	}
	.support-stats-overview tbody td.critical {
		color: red;
	}
	.support-stats-overview thead th.major {
		padding-right: 0;
	}
	.support-stats-overview tbody td.major {
		color: #ce7d7d;
		padding-right: 0;
	}
	.support-stats-overview tbody td span {
		color: #aaa;
		font-size: 12px;
		line-height: 12px;
		font-weight: normal;
		margin: 0 1.5em 0 0;
		padding: 0;
	}
	.entry-content .support-stats-overview tbody td span {
		margin: 0 1em 0 0;
	}
	/*.support-stats-people {
		border-top: none;
		border-bottom: none;
		margin: 1em 0;
	}
	.support-stats-people thead th {
		font-size: 85%;
		color: #aaa;
		font-weight: normal;
		border-bottom: 1px solid #eee;
	}
	.support-stats-people tbody th {
		font-weight: bold;
		border-bottom: 1px solid #eee;
	}
	.support-stats-people a.active {
		color: #aaa;
	}
	.support-stats-people thead th.group {
		background-image: none;
		padding-left: 10px;
	}
	.support-stats-people tbody td {
		font-weight: normal;
		border-bottom: 1px solid #eee;
	}
	.support-stats-people tbody tr.odd {
		background-color: transparent;
	}
	.support-stats-people tbody tr.odd .group {
		background-color: transparent;
		background-image: none;
		padding-left: 10px;
	}
	.support-stats-people tbody tr.even .group {
		background-color: transparent;
		background-image: none;
		padding-left: 10px;
	}*/
	.entry-head {
		position: relative;
		margin: 0;
		border-bottom: 2px solid #efefef;
	}
	.entry-rank {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 1.5em;
		line-height: 1;
		margin: 0;
		padding: 0;
		color: #666;
	}

	.entry-member-photo {
		float: left;
		margin: 0 1em 1em 0;
		padding: 0;
	}
	.entry-member-photo img {
		width: 48px;
		height: 48px;
	}
	.entry-title span {
		color: #999;
	}
	.pies h3 {
		text-align: center;
	}

/* Comment form */
	#commentform .top label {
		text-align: right;
	}
	#commentform .submit {
		margin-top: 1em;
		text-align: center;
	}
	#commentform.private textarea {
		/*background-color: #fdfbe9;
		border-color: #e1dec3;
		color: #aaa9a0;*/
		background-color: #fdf7f6;
		border-color: #ecada2;
	}
	.icon-help {
		display: inline-block;
		width: 1em;
		font-size: 1.2em;
		overflow: hidden;
		white-space: nowrap;
		border: none;
		text-decoration: none;
		float: right;
	}
	.icon-help:hover {
		border: none;
		text-decoration: none;
	}
/* Thank you Message */
	#ticket-number {
		margin-top: 2em;
		margin-bottom: 0em;
	}
	#ticket-number h2 {
		position: relative;
		font-size: 3.5em;
		text-align: center;
		color: #ccc;
		margin: 0;
		padding: 0;
		line-height: 1;
		font-weight: normal;
	}
	#ticket-number h2 span {
		white-space: nowrap;
	}
	#ticket-number h2 strong {
		font-size: 2em;
		display: block;
		font-weight: normal;
	}
	#ticket-number a {
		border: none;
	}
	#messagebox .wrap {
		background: #fff;
		-webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.2);
		   -moz-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.2);
		    -ms-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.2);
		     -o-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.2);
		        box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.2);
		position: relative;
		display: block;
		padding: 30px;
	}
	#messagebox h3 {
		margin-top: 0;
		padding-top: 0;
	}
	.ticket-btn {
		margin-top: 2em;
		text-align: center;
	}
	#ticket-group {
		max-width: 20em;
	}
/* Support ticket tooltip */
	.tooltip {
		z-index: 600;
	}

	.qq-uploading {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 107px;
		color: #fff;
		font-size: 18px;
		padding: 75px 0 0 0;
		text-align: center;
		background: rgba(0,0,0,0.75);
	}
	.qq-uploader {
		position: relative;
		margin: 1em 0 0 0;
		padding: 0;
	}
	/* Upload list */
	.qq-upload-list {
		list-style: 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;
	}

	/* Drop areas */
	.qq-upload-button,
	.qq-upload-drop-area  {
		background: #f7f7f7;
		border: 2px dashed #ddd;
		text-align: center;
		color: #bbb;
		padding: 0;
		font-size: 1.5em;
	}
	.asset-uploader .columns {
		margin-top: 0;
		padding-top: 0;
	}
	.qq-upload-button,
	.qq-upload-drop-area {
		text-align: center;
		padding: 0.8em 0;
	}
	.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: 2px solid #333;
		color: #333;
		cursor: pointer;
	}
	.qq-upload-drop-area {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	#hubForm .file-list .item-asset,
	.file-list .item-asset {
		background: #f7f7f7;
		border-radius: 0.25em;
		position: relative;
		margin: 0.5em 0;
		padding: 0.5em 1em;
	}
	.file-list .item-asset .asset-file {
		margin-right: 4em;
		display: inline-block;
		width: 80%;
	}
	.file-list .item-asset .delete {
		font-size: 1.2em;
		display: block;
		overflow: hidden;
		width: 1em;
		height: 1em;
		border: none;
		position: absolute;
		top: 0.4em;
		right: 0.6em;
	}
	.file-list .item-asset .delete:before {
		margin-right: 1em;
		content: "\f014";
		font-family: "Fontcons";
	}