package-component {
  .jf-page-wrapper {
    .jf-page-content {
      .jf-content-section {
        .xray-toggler-wrapper {
          z-index: 1000001;
          position: relative;
        }
        .xray-graph-spinner {
          position: absolute;
          width: ~"calc(100% - 60px)";
          height: ~"calc(100% - 60px)";
          background-color: rgba(255, 255, 255, 0.5);
          z-index: 1000000;

          .spinner-msg {
            position: absolute;
            height: 70px;
            width: 70px;

            color: @grayFontGeneral;
            text-align: center;
            top: 50%;
            left: 50%;

            margin-top: -35px;
            margin-left: -35px;

          }
          .icon-hourglass {
            background-size: 70px 70px;
            width: 70px;
            height: 70px;
          }

        }
        .alert.alert-info {
          font-weight: 700;
          text-align: left;
          top: 20px;
          width: 733px;
          margin: 0 auto;
          z-index: 9999;
          opacity: .8;
          border: 1px solid;
          a.jf-link {
            font-weight: 700;
          }
          strong{
            font-size: 22px;
          }
        }
        .graph-wrapper {
          margin-top: 65px;
          height: 85%;
          &.mock-mode {
            margin-top: 0;
          }
          text.link-generated {
            fill: #006CAB;
            cursor: pointer;
          }
          text.bb-axis-y2-label,
          text.bb-axis-y-label {
            font-size: 14px;
            fill: #959595;
          }
          jf-billboard.bb {
            height: 85%;
          }
          .graph-filters {
            .dd-wrapper {
              width: 600px;
              position: absolute;
              top: 11px;
              left: 29px;
              > span {
                width: 280px;
                display: inline-block;
                &:last-child {
                  margin-left: 25px;
                }
              }

            }
            .jf-checkbox {
              input[type=checkbox]:checked + span {
                background-image: none;
                &:after {
                  content: "\e97f";
                  color: #fff;
                  text-align: center;
                  width: 100%;
                  display: inline-block;
                  position: relative;
                  font-family: artifactory !important;
                  bottom: 1px;
                }
              }
            }

            jf-checkbox {

              input[type=checkbox] {

                &.downloads {
                  & + span {

                    background-color: #753C8C !important;
                  }
                }

                &.security {
                  + span {

                    background-color: #E5B32D !important;
                  }
                }

                &.license {
                  + span {
                    background-color: #4A7CB8 !important
                  }
                }

              }
            }
          }
          span.legend-item span {
            width: 10px;
            height: 10px;
            display: inline-block;
            margin-left: 10px;
            border-radius: 50%;
          }
          .bb-legend-item {
            margin: 0 10px;

            &.bb-legend-item-downloads {
              display: none;
            }
          }

          div#bb-legend {
            display: inline-block;
            border: 1px solid;
            padding-right: 10px;
            padding-left: 10px;
            border-color: #dadada;
            h4 {
              width: auto;
              display: block;
              font-size: 14px;
            }
          }
          .bb-line-downloads {
            stroke-width: 3px;
          }
          line.bb-ygrid {
            stroke-dasharray: 0;
            stroke: #dadada;
          }
          .bb line, .bb path {
            fill: none;
            stroke: #dadada;
          }
          g.tick line {
            display: none;
          }

          .bb-tooltip-container {
            z-index: 10;
            position: fixed;
            background: white;
            font-size: 12px;
            opacity: 10 !important;
            padding: 15px;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
          }
          .bb-tooltip.data-point-tooltip {
            box-shadow: none;
          }
          span.tooltip-value.bold {
            font-weight: bold;
            color: #000;
          }
          span.tooltip-label {
            color: #989898;
            font-size: 14px;
            margin-right: 7px;
          }

        }
        jf-switch-toggler {
          float: right;
        }
        .jf-table-view {
          .jf-table-view-container {
            .jf-table-row {
              cursor: pointer;
            }
          }
          .jf-table-cell.field-id-name {
            padding-left: 10px;
          }
          .jf-table-cell.field-id-package-id {
            jf-clip-copy {
              display: inline-block;
              float: left;
            }
            .package-id {
              display: inline-block;
              padding: 4px;
              width: 100%;
            }
          }
        }
      }
    }
  }

  .icon-severity.normal:before {
    content: "\e97f";
    color: #43a047;

  }
  .icon-severity.minor:before {
    content: "\e97e";
    color: #f3c43d;
  }

  .icon-severity.major:before {
    content: "\e97c";
    color: #e08a00;
  }
  .icon-severity.critical:before {
    content: "\e97b";
    color: darkred !important;
  }
  .icon-severity.unscanned:before {
    content: "\e97d";
    color: #707070;
  }
  .icon-severity.unknown:before {
    content: "\e97d";
    color: #707070;
  }

}

.modal {
  .manifest-modal {
    .manifest {
      position: relative;
      jf-clip-copy {
        left: ~"calc(100% - 15px)";
        position: absolute;
      }
    }
  }
}



