// Here you can add other styles

html {
  filter: contrast(110%);
}
.modal-header {
  background-color: $grey-800;
}
.modal-header, .modal-footer {
  padding: .5rem .7rem;
}
.severity-critical, .status-failed {
  color: $severity-critical;
  .progress-bar {
    background-color: $severity-critical;
  }
}
.severity-high {
  color:$severity-high;
  .progress-bar {
    background-color: $severity-high;
  }
}
.severity-medium, .status-warning {
  color: $severity-medium;
  .progress-bar {
    background-color: $severity-medium;
  }
}
.severity-low, .status-passed {
  color: $severity-low;
  .progress-bar {
    background-color: $severity-low;
  }
}
.severity-info, .status-info {
  color: $severity-info;
  .progress-bar {
    background-color: $severity-info;
  }
}
.severity-unassigned {
  color: $severity-unassigned;
  .progress-bar {
    background-color: $severity-unassigned;
  }
}
// Fixes the width for the bootstrap progress bar in tables
.table-progress {
  width: 100% !important;
}
.severity-critical-bg, .bg-severity-critical, .bg-CRITICAL {
  background: $severity-critical none;
}
.severity-high-bg, .bg-severity.high, .bg-HIGH {
  background: $severity-high none;
}
.severity-medium-bg, .bg-severity-medium, .bg-MEDIUM {
  background: $severity-medium none;
}
.severity-low-bg, .bg-severity-low, .bg-LOW {
  background: $severity-low none;
}
.severity-info-bg, .bg-severity-info, .bg-INFO {
  background: $severity-info none;
}
.severity-warn-bg {
  background: $severity-medium none;
}
.severity-fail-bg {
  background: $severity-critical none;
}
.bg-violation-type {
  background: $widget-3;
}
.severity-unassigned-bg, .bg-severity-unassigned, .bg-UNASSIGNED {
  background: $severity-unassigned none;
}
.severity-bug-icon {
  width:40px;
  height:40px;
  color:#ffffff;
}
.severity-bug-label {
  height:40px;
  color:#ffffff;
  background-color: $severity-label-bg;
}
.pointer:hover {
  cursor: pointer;
}
.label-analyzer {
  border: 1px solid #5C9CCB;
}
.label-analyzer-internal {
  color: $white;
}
.label-source {
  color: #222222;
  padding: .2em .6em .3em;
  font-weight: normal;
  font-size: 75%;
}
.label-source-nvd {
  background-color: #AECEE5;
  border: 1px solid #5C9CCB;
}
.label-source-npm {
  background-color: #B4AFE4;
  border: 1px solid #6E63CC;
}
.label-source-ossindex {
  background-color: #AFE4BF;
  border: 1px solid #73D08F;
}
.label-source-snyk {
  background-color: #afd2e4;
  border: 1px solid #73c1d0;
}
.label-source-vulndb {
  background-color: #FFC78B;
  border: 1px solid #FE9536;
}
.label-source-victims {
  background-color: #E4AFAF;
  border: 1px solid #CC6666;
}
.label-source-github {
  background-color: #D4BBF7;
  border: 1px solid #A66AF7;
}
.label-source-osv {
  background-color: #f7bbdc;
  border: 1px solid #cc668a;
}
.label-source-internal {
  background-color: #EBE5A8;
  border: 1px solid #DCD167;
}
.label-source-unknown {
  background-color: $severity-unassigned;
  border: 1px solid $grey-900;
  color: #FFFFFF;
}
.label-notification {
  color: #222222;
  padding: .2em .6em .3em;
  font-weight: normal;
  font-size: 75%;
}
.label-notification-fail {
  background-color: lighten($notification-fail, 15% );
  border: 1px solid $notification-fail;
}
.label-notification-warn {
  background-color: lighten($notification-warn, 15% );
  border: 1px solid $notification-warn;
}
.label-notification-info {
  background-color: lighten($notification-info, 15% );
  border: 1px solid $notification-info;
}
.table {
  background-color: $grey-750;
}
.table td.tight, .table th.tight {
  width: 1%;
}
.table td.expand, .table th.expand {
  width: 10%;
}
.table td.expand-20, .table th.expand-20 {
  width: 20%;
}
label.required:after {
  color: #d62728;
  content:" *";
}
input.required, select.required, textarea.required {
  border-color: #ffd700;
}

/* usage: use outer div/span with class truncate-ellipsis or truncate-ellipsis-inline and inner span with content to truncate */
.truncate-ellipsis {
  display: table;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
.truncate-ellipsis > * {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate-ellipsis-inline {
  display: inline-table;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
.truncate-ellipsis-inline > * {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
}
.body-bg-color {
  background-color: $body-bg;
}
.tab-content {
  background: $body-bg;
}
.nav-tabs .nav-link {
  border-top-color: $grey-900;
  border-left-color: $grey-900;
  border-right-color: $grey-900;
  border-bottom-color: transparent;
}
.nav-tabs .nav-link:hover {
  background-color: $grey-750;
}
.nav-tabs .nav-link.active {
  background: $grey-700;
  border-bottom-color: $grey-700;
  color: $white;
}
.nav-tabs .nav-link.active:focus {
  background: $grey-700;
  border-bottom-color: $grey-700;
}
.card-footer-action:hover {
  background: $grey-800;
}
.callout-severity-critical {
  border-left-color: $severity-critical;
}
.callout-severity-high {
  border-left-color: $severity-high;
}
.callout-severity-medium {
  border-left-color: $severity-medium;
}
.callout-severity-low {
  border-left-color: $severity-low;
}
.callout-severity-info {
  border-left-color: $severity-info;
}
.callout-severity-unassigned {
  border-left-color: $severity-unassigned;
}
.toast-container>div {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.expanded-row {
  margin-top:-12px;
  margin-bottom:-12px;
  margin-right: -13px;
  padding-top:20px;
  padding-bottom: 20px;
  background-color: $grey-800;
}

.btn-spaced-group .btn {
  margin-right: 0.5rem;
}

.btn-outline-primary.focus {
  box-shadow: 0 0 0 0;
}

.btn-outline-primary.disabled.active, .btn-outline-primary:disabled.active {
  background-color: darken($blue, 20);
  color: $white;
  opacity: 1.0;
}

.formattedLicenseContent {
  font-size: 1.25em;
  font-family: monospace;
  white-space: pre-wrap;
}

/* Bootstrap Toggle v2.2.2 corrections for Bootsrtap 4*/
.toggle-off {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.toggle.off {
  border-color: rgba(0, 0, 0, .25);
}
.toggle-handle {
  background-color: $toggle-handle-bg;
  border: thin rgba(0, 0, 0, .25) solid;
}
h6 {
  font-size: 1.0em;
  font-weight: 600;
  text-transform: uppercase;
}
.switch {
  vertical-align: middle;
  margin-top: .5rem;
  margin-bottom: .5rem;
  margin-right: 1rem;
}
.switch-slider {
  background-color: $switch-bg;
}
.switch-slider:before {
  background-color: $grey-200;
}
.card-footer > :not(:last-child) {
  margin-right: .25rem;
}
.card-footer > :not(:first-child) {
  margin-left: .25rem;
}
.bs-table-custom-toolbar > :not(:last-child) {
  margin-right: .25rem;
}
.bs-table-custom-toolbar > :not(:first-child) {
  margin-left: .25rem;
}
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
  background: $grey-750  !important;
}
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-dot,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-wrap::after,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-wrap::before {
  background: $grey-750  !important;;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}
.bg-widget {
  background-color: $grey-750;
}
button:focus {
  outline: 0;
}
.badge-tab-total {
  border: 1px solid #60768c !important;
  background-color: $grey-900 !important;
  margin-left: 0.6em !important;
  color: #21D983 !important;
}
.badge-tab-fail {
  border: 1px solid #60768c !important;
  background-color: $grey-900 !important;
  color: $notification-fail !important;
}
.badge-tab-warn {
  border: 1px solid #60768c !important;
  background-color: $grey-900 !important;
  color: $notification-warn !important;
}
.badge-tab-info {
  border: 1px solid #60768c !important;
  background-color: $grey-900 !important;
  color: $notification-info !important;
}
.badge-tag {
  color: $primary;
  background-color: transparent;
  border: 1px solid $primary;
}
.badge-tag:hover {
  color: $light-blue;
  background-color: transparent;
  border: 1px solid $primary;
}
td a.detail-icon {
  font-size: 150%;
  line-height: 1.0;
  color: $grey-600;
}
.b-calendar-grid-body .text-dark {
  color: #ffffff !important;
}
.treegrid-indent {
  width: 10px;
  height: 16px;
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
}
.treegrid-expander {
  width: 10px;
  height: 16px;
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  margin-right: 0.5rem;
}
.treegrid-expander-expanded {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwIDE2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoLTEsLTAuMDAwNDE4NDcxLDAuMDAwNDE4NDcxLC0xLDEyLjk3NDgsMTguNDM4MikiPgogICAgICAgIDxnIGlkPSJfLTAwMDAwMGZmIiBzZXJpZjppZD0iIzAwMDAwMGZmIj4KICAgICAgICAgICAgPHBhdGggZD0iTTguMTE5LDYuNDUyTDEyLjk4MSwxNC40MTZMMy4yNTgsMTQuNDE2TDguMTE5LDYuNDUyWiIgc3R5bGU9ImZpbGw6cmdiKDMzLDE2OCwyMTYpOyIvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
  cursor: pointer;
}
.treegrid-expander-collapsed {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwIDE2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDAwMTk2MDg4LDEsLTEsLTAuMDAwMTk2MDg4LDE0LjQzNTksLTAuMTE2NDI5KSI+CiAgICAgICAgPGcgaWQ9Il8tMDAwMDAwZmYiIHNlcmlmOmlkPSIjMDAwMDAwZmYiPgogICAgICAgICAgICA8cGF0aCBkPSJNOC4xMTksNi40NTJMMTIuOTgxLDE0LjQxNkwzLjI1OCwxNC40MTZMOC4xMTksNi40NTJaIiBzdHlsZT0iZmlsbDpyZ2IoMzMsMTY4LDIxNik7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
  cursor: pointer;
}

// Adjusts vue-multiselect style to dependency track

.multiselect__spinner {
  background: $grey-650;
  z-index: 52;
}

.multiselect__spinner:before,
.multiselect__spinner:after {
  border-color: $primary transparent transparent;
}

.multiselect--active {
  color: #bfcfdf;
}

.multiselect__input,
.multiselect__single {
  background: $grey-650;
  color: #bfcfdf;
  font-size: 0.875rem;
  font-weight: 400;
  padding-left: 0;
  margin-top: 0.15rem;
}

.multiselect__input::placeholder {
  color: #bfcfdf;
}

.multiselect__input:hover,
.multiselect__single:hover {
  border-color: $grey-650;
}

.multiselect__input:focus,
.multiselect__single:focus {
  border-color: $grey-650;
}

.multiselect__select,
.multiselect__select:before {
  border-color: #2f353a transparent;
  z-index: 51;
}

.multiselect__placeholder {
  color: $grey-400;
  font-size: 0.875rem;
  font-weight: 400;
}

.multiselect__content-wrapper {
  border: 1px solid $border-color;
  background: $grey-650;
  font-size: 0.875rem;
  font-weight: 400;
}

.multiselect__content {
  font-size: 0.875rem;
  font-weight: 400;
}

.multiselect__option {
  cursor: default;
  font-size: 0.875rem;
  font-weight: 400;
}

.multiselect__option--highlight {
  background: #52525e;
  color: #bfcfdf;
  font-size: 0.875rem;
  font-weight: 400;
}

.multiselect__option--selected {
  background: $grey-650;
  color: #bfcfdf;
  font-size: 0.875rem;
  font-weight: 700;
}

.multiselect__tags {
  border: 1px solid $border-color;
  background: $grey-650;
  color: #bfcfdf;
  height: $input-height;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
}

.multiselect__option--selected.multiselect__option--highlight {
  background: #52525e;
  color: #bfcfdf;
  font-weight: 700;
}

// keep elements together on the same line, e.g switch and label
.keep-together {
  display: inline;
  white-space: nowrap;
}


.icon-cellend {
  float: right;
  padding-top: 0.3rem;
}
