.popover{
  // on top of modals even if they are attached to <body>
  z-index: $zindex-modal + 10;
  // give large popups more space..
  max-width: 600px;

  .arrow{
    pointer-events: none; // no pointer events (important on system popovers shout not 'detect' hover)
  }

  .popover-title{
    text-transform: capitalize;
    font-family: $font-family-readable;
    font-weight: bold;

    kbd{
      line-height: 90%;
      vertical-align: middle;
      box-shadow: none;
    }
  }

  .popover-content {
    font-family: $font-family-readable;

    > .hidden + .popover-footer,      // first content child is .hidden -> border radius to footer
    > .popover-footer:first-child {   // no content -> border radius to footer
      border-top-left-radius: ($border-radius-large - 1);
      border-top-right-radius: ($border-radius-large - 1);
    }
  }

  .popover-footer{
    margin: 0;                            // reset heading margin
    padding: 8px 14px;                    // same as popover-title
    background-color: $popover-title-bg;
    border-top: 1px solid darken($popover-bg, 5%);
    border-bottom-left-radius: ($border-radius-large - 1);
    border-bottom-right-radius: ($border-radius-large - 1);
  }

  // image in popover
  img{
    border-radius: 3px;
  }

  h4{
    color: $gray-lighter;
  }

  // table in pop popover
  table{
    color: $gray-lighter;
    line-height: 16px;
    font-size: 11px;

    td{
      padding: 0 4px; // 10px popover padding + 4px table cell padding == 14px -> same as popover title
      vertical-align: middle !important;
    }
  }

  .select2-container{
    // Select2 within popover (xEditable field)
    margin-top: -1px;   // strange UI bug 1px off
    margin-left: -1px;  // strange UI bug 1px off
  }
}

// smaller variant ----------------------------------------------------------------------------------------------------
.popover-small{
  .popover-title {
    padding: 4px 6px;
  }

  .popover-content {
    padding: 4px 2px 4px;
  }

  // "special" content wrapper for popups with "footer" (.popover-footer) element
  .popover-content-inner{
    padding: 7px 6px 0;
  }

  .popover-footer{
    padding: 6px 6px;
  }
}

// specific "Pathfinder" Popover settings -----------------------------------------------------------------------------
.pf-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; // overwrite "global"
      }

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

  .pf-popover-list-icon{
    width: 28px;
    margin: 5px 0;

    &:first-child{
      margin-left: 8px;
    }

    &:last-child{
      margin-right: 8px;
    }
  }
}

// character popover --------------------------------------------------------------------------------------------------
.pf-popover-character{
  .table>tbody>tr>td{
    border: none;
    white-space: nowrap;

    &:first-child + td{
      // 2nd column
      padding: 0 5px;
    }
  }

  .well{
    margin-bottom: 0; // overwrite default
    line-height: 13px;
  }
}