@import "client/common";

.metronome-playback-mode-selector-popup {
  text-align:left;
  .bt-content {
    width:180px;
    background-color:#333;
    overflow:auto;
    border:1px solid #ED3618;
    text-align:left;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    ul {
      height:100%;
      margin-left:20px;
    }
    li {
      font-size:12px;
      margin-left:0;
      list-style-type: none;

      margin-bottom:5px;
    }

    p.please-select {
      font-size:14px;
      text-align:left;
      margin-bottom:10px;
    }
  }
}

#metronome-playback-select {

  margin-top:-10px;
  span.metronome-state {
    position:relative;
  }
  a {
    color:#ffcc00 !important;
    position:absolute;
    top:4px;
    right:-35px;
  }
  .down-arrow {
    cursor:pointer;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
    position:absolute;
    top:4px;
    right:-20px;
  }

  .up-arrow {
    cursor:pointer;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    position:absolute;
    top:2px;
    right:-20px;
  }
}