/***********************\
| Base Widget Row Style |
\***********************/

 .widget-row {
 	height: 20px;
 	overflow: hidden;
 	margin-bottom: 4px;
 }
 
 .widget-row::after {
 	display: table;
 	content: "";
 	line-height: 0;
 	clear: both;
 }

/********************\
| Header Area Styles |
\********************/

 .packages-header {
 	margin-bottom: 5px;
	box-shadow: 2px 2px 2px #3c3c3c;
 
 	position: fixed;
 	top: 60px;
 	width: calc(100% - 250px);
 	z-index: 2;
 }

.packages-header .title-row {
	height: 40px;
	background-color: #b1afaf;
}

.packages-header .title-label,
.packages-header .title-toolbar {

	float: left;
	color: #FFF;
	box-sizing: border-box;
}

.packages-header .title-label {
	width: 200px;
	padding-left: 5px;
	line-height: 40px;
	background-color: #b1afaf;
}

.packages-header .title-toolbar {
	width: 170px;
	text-align: right;
	line-height: 40px;
	background-color: #b1afaf;
	padding-right: 5px;
}

 .packages-header .header-row {
 	height: 20px;
 }
 
 .packages-header .header-label,
 .packages-header .header-trace,
 .packages-header .header-method-count,
 .packages-header .header-barchart {
 
 	float: left;
 	color: #FFF;
 	box-sizing: border-box;
 }
 
 .packages-header .header-label {
 	width: 200px;
 	padding-left: 5px;
 	line-height: 20px;
 	background-color: #6D6D6D;
 }

 .packages-header .surface-icon {
	 cursor: pointer;
	 color: #9C9C9C;
	 display: table-cell;
	 vertical-align: middle;
	 height: 20px;
 }

 .packages-header .surface-icon.failed {
     color: #B30606;
 }

 .packages-header .surface-icon.hasResults {
     color: #FFFFFF
 }

 .packages-header .surface-icon.hasResults:hover {
     color: #A5A5A5
 }

 .packages-header .header-trace {
 	width: 50px;
 	text-align: center;
 	font-size: small;
 	line-height: 20px;
 	background-color: #9C9C9C;
 }
 
 .packages-header .header-method-count {
 	width: 60px;
 	text-align: center;
 	font-size: small;
 	background-color: #6b6b6b;
 }
 
 .packages-header .header-barchart {
 	background-color: #505050;

 	width: calc(100% - 310px);
 	line-height: 20px;
 	padding-left: 5px;
	font-size: small;
 }

 .packages-header.compact .header-barchart {
 	width: 60px;
 	font-size: small;
 	text-align: center;
 	line-height: inherit;
 	padding-left: 0;
 }

/*****************************\
| Package Widget Label Styles |
\*****************************/

 .widget-label {
 	width: 200px;
 	display: table;
 	height: 20px;
 	float: left;
 	box-sizing: border-box;
 	word-break: break-word;
 	color: white;
 }
 
 .widget-label .indent {
 	float: left;
 	min-height: 1px;
 	width: 0px;
 }
 
 .widget-label .widget-collapser {
 	float: left;
 	height: 20px;
 	padding: 1px 3px;
 	/* dimensions should end up as 20x20 */
 	box-sizing: border-box;
 	/*background-color: #7E7E7E;*/
 
 	cursor: pointer;
 	visibility: hidden;
 }
 
 /* Label collapser is only visible if the widget has children */
 .widget-container.has-children > .widget-row .widget-collapser {
 	visibility: visible;
 }
 
 .widget-label .content {
 	float: left;
 	border-left: 4px solid #484848;
 	box-sizing: border-box;
 	width: calc(180px);
 
 	cursor: pointer;
 }
 
 /* Selected Border Color for the label content */
 .selected > .widget-row > .widget-label .content {
 	/*border-color: #2C9494;*/
 }
 
 /* Default Background Color for the label collapser and content */
 .widget-label .widget-collapser,
 .widget-label .content {
 
 	background-color: #7E7E7E;
 }
 
 /* Hover Background Color for the label collapser and content */
 .widget-label .widget-collapser:hover,
 .widget-label .content:hover {
 
 	background-color: #9C9C9C;
 }
 
 /* Selected Background Color for the label collapser and content */
 .selected > .widget-row .widget-label .widget-collapser,
 .selected > .widget-row .widget-label .content {
 
 	background-color: #0CA1E4;
 }
 
 /* Selected + Hover Background color for the label collapser and content */
 .selected > .widget-row .widget-label .widget-collapser:hover,
 .selected > .widget-row .widget-label .content:hover {
 
 	background-color: #35B6F1;
 }
 
 .widget-label .vuln-badge {
 	float: right;
 	background: #ec0a0a;
 	border-radius: 2px;
 	padding: 0 4px;
 	line-height: 22px;
 	margin: 0 4px;
 	font-size: 80%;
 	color: whitesmoke;
 	cursor: pointer;
 }

 .widget-label .vuln-badge:hover {
 	background: #f85353;
 }

 .widget-label .vuln-badge.bubbled {
 	opacity: 0.6;
 }

 .widget-label .dependencycheck-badge {
 	float: right;
 	background: #ec0a0a;
 	border-radius: 2px;
 	padding: 0 4px;
 	margin: 0 4px;
 	font-size: 80%;
 	color: whitesmoke;
 	cursor: pointer;
 	transition: background 0.25s ease;
 }

.widget-label .dependencycheck-badge:hover {
	background: #f85353;
}

 .widget-label .dependencycheck-badge.clean {
 	background: rgb(12, 160, 12);
 	cursor: default;
 }

 .widget-label .dependencycheck-badge.pending {
 	background: rgb(70, 70, 70);
 	cursor: default;
 }

 /* The actual text inside the label */
 .widget-label .label-text {
 	line-height: 20px;
 	font-size: 12px;
 	padding-left: 23px;
 
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }

 .widget-label .label-text:before {
 	font-family: FontAwesome;
 	-webkit-font-smoothing: antialiased;

 	position: absolute;
 	left: 0;
 	width: 20px;
 	text-align: center;
 	font-size: 13px;

 	content: '\f096'; /* fa-square-o */
 	color: rgb(182,182,182);
 	background-color: rgb(138,138,138);
 }

.selected > .widget-row .widget-label .label-text:before {
    content: '\f00c'; /* fa-check */
    color: rgba(255, 255, 255, 0.87);
    background-color: #35b6f1;
}

 .selected.partial-select > .widget-row .widget-label .label-text:before {
 	content: '\f0c8'; /* fa-minus-square */
 }

/*******************************\
| Widget Tracing Toggler Styles |
\*******************************/

.widget-trace-toggle {
	width: 50px;
	float: left;
	text-align: center;
	background-color: #9C9C9C;
}

.tri-state-toggle {
	width: 20px;
	margin: auto;
	cursor: pointer;
}

.tri-state-toggle.disabled {
	cursor: initial;
}

.tri-state-toggle:before {
	font-family: FontAwesome;
	-webkit-font-smoothing: antialiased;

	width: 20px;
 	text-align: center;
 	font-size: 13px;

 	content: '\f096'; /* fa-square-o */
 	color: #FFF;
}

.tri-state-toggle.full-select:before {
	content: '\f00c'; /* fa-check */
}

.tri-state-toggle.partial-select:before {
	content: '\f0c8'; /* fa-minus-square */
}

/*****************************\
| Widget Method Counts Styles |
\*****************************/

 .widget-method-count {
 	background-color: #7E7E7E;
 	width: 60px;
 	display: inline-block;
 	float: left;
 	height: 20px;
 	text-align: center;
 	box-sizing: border-box;
 	color: white;
 }
 
 .widget-method-count .count-number {
 	font-size: small;
 }

 /* Some parts of the .widget-label will be highlighted, by showing a
  * .highlight div behind the regular content.
  */
 .highlight-container {
 	position: relative;
 }
 
 /* Things in the highlight container are pushed toward the front,
  * so that they can be in front of the actual .highlight div. They
  * should avoid having a background-color, or else the highlight
  * will be hidden.
  */
 .highlight-container > * {
 	position: relative;
 	z-index: 1;
 }
 
 /* The actual highlight div takes up the full area of its container.
  * It is orange, but completely transparent. Its opacity will be
  * set programmatically.
  */
 .highlight-container > .highlight {
 	position: absolute;
 	top: 0;
 	left: 0;
 	height: 100%;
 	width: 100%;
 	z-index: 0;
 	pointer-events: none;
 
 	background-color: orange;
 	opacity: 0; /* opacity should be set and transitioned with javascript */
 }

/************************\
| Widget Barchart Styles |
\************************/

 .widget-barchart {
 	width: calc(100% - 310px);
 	display: inline-block;
 	height: 20px;
 }
 
 /* The 'complete' bar of the barchart */
 .widget-barchart .bar-shell {
 	height: 14px;
 	background-color: #323232;
 	box-sizing: border-box;
 	margin-top: 3px;
 }
 
 /* The 'fill' part of the barchart. The width will be set by javascript. */
 .widget-barchart .bar-shell .bar-fill {
 	background-color: #b7b4b4;
 	height: 100%;
 	position: relative;
 }
 
 /* The percentage label that floats over the barchart.
  *
  */
 .widget-barchart .bar-shell .bar-label {
 	background-color: #5E5E5E;
 	position: absolute;
 	top: -4px;
 	display: inline-block;
 	width: 60px;
 	overflow: hidden;
 
 	box-sizing: border-box;
 	font-size: small;
 	text-overflow: clip;
 
 	text-align: center;
 	line-height: 20px;
 	font-weight: bold;
 	padding: 0 2px;
 
 	color: #B8B8B8;
 
 	transition: left .3s ease;
 }
 
 /* If the package is 'covered' by the trace, set the floating label's text color to white */
 .widget-barchart .bar-shell .bar-fill.covered .bar-label {
 	color: white;
 }
 
 /* By default, the bar label positions itself directly in the center of the bar fill. */
 .widget-barchart .bar-shell .bar-fill .bar-label {
 	left: calc(50% - 30px);
 }
 
 /* If the bar fill is 'small', position the label 10px to the right of the bar fill */
 .widget-barchart .bar-shell .bar-fill.small .bar-label {
 	left: calc(100% + 10px);
 }
 
 /* If the label is in a 'compact' element, the bar label hugs the left edge of the barchart */
 .compact .widget-barchart .bar-shell .bar-fill .bar-label {
 	left: 0;
 }
