body {
	background: #484848;
}

body > .overlay {
	/* The waiting overlay for when the trace is loading data.
	 * It needs to be in front of the other fixed-position things,
	 * but behind the header and footer.
	 */
	z-index: 2;
}

body > .overlay:before {
	content: 'Processing ...';
	position: absolute;
	top: calc(50% - 50px);
	width: 100%;
	text-align: center;
}

/*************************\
| High Level Page Layouts |
\*************************/

 .main-column {
 	width: calc(100% - 250px);
 	margin-top: 45px;
 	min-height: 200px;
 }

 .main-column > .overlay {
 	background-color: transparent;
 	z-index: 1;
 }
 
 .side-column {
 	position: fixed;
 	z-index: 2;
 	right: 0px;
 	width: 240px;
 	background-color: lightgray;
 }
 
 .middle-column-alt {
 	position: fixed;
 	z-index: 2;
 	left: calc(100% - 250px);
 
 	/* width = full screen minus:
 	   - 200px (the width of the .widget-label)
 	   -  50px (the width of the .widget-trace-toggle)
 	   -  60px (the width of the .widget-method-count)
 	   -  60px (the width of the percentage marker compact)
 	   - 241px (the width of the side bar)
 	   = 611px
 	*/
 	width: calc(100% - 611px);
 
 	transition: left .3s ease;
 	background-color: #9C9C9C;
 	border-left: 1px solid black;
 }

 .middle-column-alt:not(.in-view):not(.maximized):hover {
 	left: calc(100% - 260px);
 }
 
 .middle-column-alt.in-view {
 	/* left = 
 		+ 200px (width of .widget-label)
 		+  50px (width of .widget-trace-toggle)
 		+  60px (width of .widget-method-count)
 		+  60px (width of percentage marker compact)
 		= 370px
 	*/
 	left: 370px;
 	border-left: none;
 }

 .middle-column-alt.maximized {
	left: 0;
	width: calc(100% - 241px);
 }

 /* Special case for the projectSwitcher. It needs to be in front of
  * the fixed columns on this page, so we override its z-index.
  */
 .projectSwitcher .slideDownSidebar { z-index: 4; }
 .projectSwitcher .slideOutForm { z-index: 3; }

 #packages { margin-bottom: 26px; }

 /* Position the controls toolbar at the bottom left of the area */
 #packages-controls-menu {
 	position: fixed;
	bottom: 25px;
	z-index: 1;
 }

#packages-controls-menu.hidden {
	visibility: hidden;
}

/***********************************************\
| Subheader Styles (breadcrumbs + options menu) |
\***********************************************/

/* .project-header {
 	height: 60px;
 	line-height: 60px;
 	display: inline-block;
 }*/

 .header-section {
 	display: inline-block;
 }

 .header-section a {
	 color: #35B6F1;
	 font-size: small;
 }

 .breadcrumb-carat {
 	margin-left: -11px;
 	pointer-events: none;
 }

 .header-detail {
 	display: block;
 	margin-left: 15px;
 	line-height: 16px;
 }

 .header-detail .detail-name {
 	font-size: 0.7em;
 	color: lightgray;
 }

 .header-detail .date {
 	font-size: .75em;
 }
 
 .settings {
 	margin-right: 15px;
 	margin-top: 15px;
 }
 
 .settings .dropdown-menu li, .options .dropdown-menu li {
 	margin-left: 10px;
 	margin-right: 10px;
 }
 
 .settings .switch-label, .options .option-label {
 	font-size: 0.9em;
 	padding-right: 5px;
 	vertical-align: middle;
 	color: #323232;
 }
 
 .settings .switch.switch-mini {
 	vertical-align: middle;
 	color: #323232;
 	min-width: 100px;
 }
 
 ul.projects-list {
 	list-style: none;
 	margin: 0;
 }
 
 ul.projects-list > li {
 	margin-left: 5px;
 	margin-top: 5px;
 }
 
 .projects-scope {
 	min-height: 200px;
 }

 .projects-scope:before, .projects-scope:after {
 	display: table;
 	line-height: 0;
 	content: "";
 }
 
 .projects-scope:after {
 	clear: both;
 }

 .trace-buttons {
 	position: absolute;
 	top: 16px;
 	right: 16px;
 }

/****************************\
| Title Area Naming Conflict |
\****************************/

.nameConflict {
	position: relative;
	display: inline-block;
}
.nameConflict.hasConflict {
	color: rgb(239, 200, 75);
}

.nameConflict .warningText { display: none; }
.nameConflict.hasConflict .warningText {
	display: initial;
	position: absolute;
	bottom: -4px;
	left: 5px;
	white-space: nowrap;
	line-height: 14px;
	font-size: 12px;
}

.nameConflict .warningIcon { display: none; }
.nameConflict.hasConflict .warningIcon { display: inline-block;}

/***********************\
| Title Editor Controls |
\***********************/

 .editable {
 	position: relative;
 }

 .editable .edit-content {
 	padding: 0 3px;
 	border: 1px solid;
 	border-radius: 4px;
 	box-sizing: border-box;

 	border-color: rgba(0,0,0,0);
 }

 .editable .edit-content:hover {
 	border-color: inherit;
 }

 .editable .editor {
 	position: absolute;
 	height: 100%;
 	overflow: hidden;
 	top: 0;
 	left: 0;

 	width: 0; /* by default the editor is out of view */
 	opacity: 0;
 	transition: width .3s ease, opacity .3s ease;
 }

 .editable.editing .editor {
 	width: calc(100% + 100px);
 	opacity: 1;
 }

 .editable .editor input[type=text] {
 	height: 100%;
 	width: 100%;
 	box-sizing: border-box;

 	/* try to mimick the appearance of the edited test */
 	font-size: inherit;
 	font-style: inherit;

 	padding-right: 1em;
 	margin-right: -1.5em;
 }

 .editable .editor-save {
 	content: '\23ce';
 	color: lightgray;
 	cursor: pointer;
 }

 .editable .editor-save:hover {
 	color: black;
 }

/*********************\
| Treemap Header Area |
\*********************/

 .treemap-header {
 	height: 40px;
	line-height: 40px;
 }

 .in-view .treemap-header {
 	border-color: black;
 }

 .treemap-header .header-text {
 	color: white;
 	display: inline-block;
 }

 .treemap-header .maximizer {
	display: inline-block;
	float: right;
	line-height: 40px;
	width: 40px;
	text-align: center;
	color: white;
	cursor: pointer;
 }
 .treemap-header .maximizer:hover {
	background-color: rgba(255,255,255,0.1);
 }
 .treemap-header .maximizer i:before {
	content: '\f065'; /* fa-expand */
 }
 .maximized .treemap-header .maximizer i:before {
	content: '\f066'; /* fa-compress */
 }

/*********************\
| Show Treemap Button |
\*********************/

 #show-treemap-button {
 	color: lightgray;
 	cursor: pointer;
 
 	width: 30px;
 	text-align: center;

 	height: 40px;
 	line-height: 40px;

 	position: relative;
 	left: -30px;
 	transition: left .3s ease;
 
 	background-color: #9C9C9C;
 	display: inline-block;
 }
 
 #show-treemap-button:hover {
 	color: white;
 }

 #show-treemap-button.expanded {
 	left: 0;
 	border-left: none;
 }

 #show-treemap-button:after { content: "\25C0"; }
 #show-treemap-button.expanded:after { content: "\25B6"; }

/*************************\
| Treemap Area Boundaries |
\*************************/

 #treemap-container {
 	overflow-y: hidden;
 	/* Take up all vertical space except for the header */
 	height: calc(100% - 40px);
 }

 #treemap-container .widget-body {
 	height: 100%;
 	position: relative;
 }

/***********************************\
| Treemap Area No Selection Message |
\***********************************/

 #treemap-container.no-selection .widget-body { display: none; }
 #treemap-container.no-selection .no-selection-message { display: block; }

 #treemap-container .no-selection-message {
 	position: absolute;
 	top: 10%;
 	left: 10%;
 	bottom: 10%;
 	right: 10%;

 	padding: 35% 10% 0 10%;
 	line-height: 30px;
 	font-size: x-large;
 	text-align: center;

 	color: lightgray;
 	border: 3px dashed;

 	/* not displayed unless the container has '.no-selection' */
 	display: none;
 }

 /*************************\
 | Dependency Check Report |
 \*************************/

 #dependency-check-report {
 	z-index: 3;
 	position: fixed;
 	top: 120px;
 	bottom: 60px;
 	left: 210px;
 	right: 260px;

 	box-shadow: -2px 2px 10px 2px;
 }

 #dependency-check-report:not(.in-view) {
 	display: none;
 }

 .report-header {
 	height: 40px;
 	border-bottom: 2px solid black;
 	background-color: #9C9C9C;
 	color: white;
 }

 .report-header > * {
 	line-height: 40px;
 }

 .report-header .header-text {
 	margin-left: 5px;
 }

 .report-header .close-button {
 	float: right;
 	cursor: pointer;
 	width: 40px;
 	text-align: center;
 }

 .report-header .close-button:hover {
 	background-color: rgba(255, 255, 255, 0.1);
 }

 .report-container {
 	background: #f0f0f0;
 	height: calc(100% - 40px);
 	padding: 20px 30px;
 	overflow-y: auto;
 	box-sizing: border-box;
 }

 .report-container .summary {
 	margin: 0 -15px 15px -15px;
 	padding: 10px 19px;
 }

 .report-container .summary .credits {
 	float: right;
 	font-style: italic;
 	font-size: 90%;
 	max-width: calc(100% - 100px);
 	text-align: right;
 }

 .report-container .vuln-list {
 	list-style: none;
 	margin-left: 0;
 }

 .report-container .vuln-list .jar {
 	margin-bottom: 30px;
 }

 .report-container .vuln-list .jar-info {
 	margin-bottom: 10px;
 	border-bottom: 1px solid darkgray;
 	background: #DDD;
 	color: #333;
 	font-weight: bold;
 	padding: 2px 4px;
 }

 .report-container .vuln-list .cve-list {
 	list-style: none;
 	margin-left: 0;
 }

 .report-container .vuln-list .cve-list .cve {
 	margin-bottom: 15px;
 }

 .report-container .vuln-list .cve-list .cve .cve-header {
 	padding: 0 15px;
 }

 .report-container .vuln-list .cve-list .cve .cve-header a {
 	box-sizing: border-box;
 	display: inline-block;
 }

 .report-container .vuln-list .cve-list .cve .cve-header .cve-name {
 	color: #cf0000;
 	font-weight: bold;
 	width: 130px;
 	border-bottom: 1px dotted #cf0000;
 }

 .report-container .vuln-list .cve-list .cve .cve-header .cwe-name {
 	background: #4d85d1;
 	color: whitesmoke;
 	margin-left: 10px;
 	padding: 0 6px;
 	border-radius: 3px;
 	vertical-align: -2px;
 	font-size: 75%;
 	
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	max-width: calc(100% - 140px);
 	height: 15px;
 	line-height: 15px;
 }

 .report-container .vuln-list .cve-list .cve .cve-description {
 	margin: 5px 15px 0 15px;
 	padding: 0 15px;
 	font-size: 85%;
 	text-align: justify;
 	border-left: 1px solid #F0BCBC;
 }