@import 'common';

.bubble {
    width:350px;
    min-height:200px;
    background-color:#242323;
    border:solid 1px #ed3618;
    position:absolute;
    z-index:1100;


  &.musician-bubble {
    width:438px;
  }

  h2 {
    padding:6px 0px;
    text-align:center;
    font-size:15px !important;
    font-weight:200 !important;
    width:100%;
    background-color:#ed3618;
  }

  h3 {
    font-weight:400 !important;
    font-size:16px !important;
    color:#fff;
  }

  .bubble-inner {
    padding:10px;
    color:#ccc;
  }

  .bubble-inner div.mb {
    margin-bottom:5px;
  }

  strong {
    font-weight:600 !important;
  }

  .musicians {
    margin-top:-3px;
    font-size:11px;
  }

  .musicians td {
    border-right:none;
    border-top:none;
    padding:3px;
    vertical-align:middle;
  }

  .musicians a {
    color:#fff;
    text-decoration:none;
  }

  .avatar-tiny {
      float:left;
      padding:1px;
      width:24px;
      height:24px;
      background-color:#ed3618;
      -webkit-border-radius:12px;
      -moz-border-radius:12px;
      border-radius:12px;
  }

  .avatar-tiny img {
      width: 24px;
      height: 24px;
      -webkit-border-radius:12px;
      -moz-border-radius:12px;
      border-radius:12px;
  }

  .musician-latency {
    margin-right:35px;
    position:relative;
    width:350px;
  }

  .latency-holder {
    position:absolute;
    width:100%;
    text-align:center;
  }

  .latency {
    min-width: 50px;
    display:inline-block;
    padding:4px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:200;
    font-size:11px;
    text-align:center;
    @include border-radius(2px);
    color:white;
  }

  .latency-unknown {
    background-color:$latencyBadgeUnknown;
  }

  .latency-unacceptable {
    background-color:$latencyBadgeUnacceptable;
  }

  .latency-good {
    background-color:$latencyBadgeGood;
  }

  .latency-fair{
    background-color:$latencyBadgeFair;
  }

  .latency-poor {
    background-color:$latencyBadgePoor;
  }
}