button[data-playback-rate-button] {
  white-space: nowrap;
}

.media-control[data-media-control] .media-control-layer[data-controls] .playback_rate[data-playback-rate-select] {
  float: right;
  margin-top: 5px;
  position: relative;
  line-height: 1em;
  overflow-wrap: normal;
  button.media-control-button.media-control-icon {
    font-family: Roboto,"Open Sans",Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    cursor: pointer;
    padding: 10px;
    width: auto;
    height: auto;
    &:hover {
      color: #c9c9c9;
    }

    &.changing {
      -webkit-animation: pulse 0.5s infinite alternate;
    }
  }

  &> ul {
    display: none;
    list-style-type: none;
    position: absolute;
    bottom: 35px;
    border: 1px solid black;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.7);
  }

  li {
    position:relative;
    font-size: 12px;
    line-height: 1em;
    &[data-title] {
      padding: 5px;
    }

    a {
      color: #aaa;
      padding: 5px 10px 5px 15px;
      display: block;
      text-decoration: none;

      &.active {
        background-color: rgba(0,0,0,1.0);
        font-weight: bold;
        color: #fff;
        &:before {
            content: '\2713';
            position: absolute;
            top:5px;
            left:4px;
        }
      }
      &:hover {
        color: #fff;
        text-decoration: none;
      }
    }

  }
}

@-webkit-keyframes pulse {
  0% {color: #fff;}
  50% {color: #ff0101}
  100% {color: #B80000;}
}