// popover =================================================================
.pf-character-info-popover{
  display: initial;

  .popover-content{
    padding: 0; // overwrite default popover padding
  }

  h6{
    white-space: nowrap;
    margin-right: 50px;
    @include clearfix();
  }

  .well{
    margin-top: 7px;
    margin-bottom: 10px;
  }

  .list-group{
    margin: 0;

    .list-group-item{
      color: $gray-dark;

      &:hover{
        color: $gray-darkest;
      }

      &.disabled{
        background-color: $gray;
        color: $gray-light;
        cursor: not-allowed;
      }

      img{
        width: 30px;
        margin: -8px 10px -6px -8px;
        border-radius: 0;
      }

      i{
        margin-right: 20px;
      }
    }
  }
}

// system info module ======================================================
.pf-system-info-module{

  // breadcrumb
  h5{
    text-transform: capitalize;
    line-height: 16px;
  }

  // dynamic area specific for the description field
  .pf-system-info-description-area{
    min-height: 123px;

    // textarea system description
    .pf-system-info-description{
      width: 330px;
    }
  }

  // system info table
  .pf-system-info-table{
    font-size: 11px;
    white-space: nowrap;
  }
}

// signature table module ==================================================
.pf-sig-table-module{

  // delete signature button
  .pf-sig-table-clear-button{
    will-change: opacity, transform;
    display: none;
  }

  .pf-sig-table{
    font-size: 10px;

    .pf-sig-table-edit-desc-text{
      white-space: normal;

      &.editable-empty{
        border-bottom: none;
        @extend .pf-dialog-icon-button;
      }
    }

    .fa-plus{
       @extend .pf-dialog-icon-button;
    }

    // textarea field
    .pf-editable-description{
      background-color: $gray-darker;
      max-height: 50px;
    }

    .pf-sig-table-edit-name-input{
      text-transform: uppercase;
    }
  }
}

// system graph module =====================================================
.pf-system-graph-module{

  .pf-system-graph{
    width: 100%;
    height: 100px;
  }
}

// route module ============================================================
.pf-system-route-module{

  .pf-system-route-table{
    width: 100%;
    font-size: 11px;

    td{
      text-transform: capitalize;
      
      & > .fa{
        font-size: 10px;
      }

      .fa-refresh{
        @extend .pf-dialog-icon-button;
      }
    }
  }
}

// killboard module ========================================================
.pf-system-killboard-module{

  .pf-system-killboard-graph-kills{
    width: 100%;
    height: 100px;
    position: relative;
    margin-bottom: 30px;
  }

  .pf-system-killboard-list{
    padding-bottom: 10px;
    border-bottom: 1px solid $gray-darker;


    li{
      margin-left: 0;
      overflow: visible;
      min-height: 50px;
      will-change: margin-left;
      @include transition( margin-left 0.12s cubic-bezier(0.30, 0.80, 0.80, 1.70));

      // character headline
      h5{
        white-space: nowrap;
      }

      // ISK headline
      h3{
        width: 120px;
        display: inline-block;
      }

      .pf-system-killboard-img-corp{
        margin-right: 10px;
        width: 16px;
      }

      .pf-system-killboard-img-ship{
        width: 50px;
        margin-right: 10px;
        border: 1px solid $gray-darker;
        transform: translateZ(1px);
        will-change: border-color;
        @include border-radius(25px);
        @include transition( border-color 0.12s ease-out);
      }

      &:before{
        content: "\f054";
        font-family: FontAwesome;
        position: absolute;
        z-index: 10;
        left: -25px;
        top: 15px;
        color: $teal;
        opacity: 0;
        will-change: opacity, left;
        @include transition(all 0.12s ease-out);
      }

      &:hover{
        margin-left: 20px;

        .pf-system-killboard-img-ship{
          border-color: $teal-lighter;
        }

        &:before{
          opacity: 1;
          left: -20px;
        }
      }


    }


  }
}