.uv-iiif-extension-host.uv-av-extension {
  //   // For the loading animation.
  //   .options-container, .mobileFooterPanel, .waveform, .time-display {
  //     transition: opacity .5s;
  //   }

  //   .player--loading {
  //     .options-container, .mobileFooterPanel {
  //       opacity: 0.5;
  //       pointer-events: none;
  //     }
  //     .time-display, .waveform {
  //       opacity: 0;
  //     }
  //   }

  //   .centerPanel {
  //     .player {
  //       background-color: transparent;
  //       transition: background-color .3s;
  //       position: relative;
  //     }

  //     .player--loading:after {
  //       position: absolute;
  //       content: '';
  //       top: 8px;
  //       bottom: 55px;
  //       left: 8px;
  //       right: 8px;
  //       z-index: 10;
  //       background-repeat: no-repeat;
  //       background-position: 50% 50%;
  //       background-image: url(data:image/gif;base64,R0lGODlhFAAUAMQSAGxsbFpaWnh4eEZGRhwcHD8/PzU1NVJSUisrKwgICH5+fkxMTGNjYyUlJXJycnt7exISEoCAgAAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1OTFjMzhjNS0xZmQyLTg5NGUtYjMyZi1kYTNkZWQ5NmQ5YjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Qzc0OEE1NDA5OTMzMTFFNUFBRjI5MkI3NTFFODJFRTYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Qzc0OEE1M0Y5OTMzMTFFNUFBRjI5MkI3NTFFODJFRTYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTkxYzM4YzUtMWZkMi04OTRlLWIzMmYtZGEzZGVkOTZkOWIzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5MWMzOGM1LTFmZDItODk0ZS1iMzJmLWRhM2RlZDk2ZDliMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAkAABIALAAAAAAUABQAAAVAoCSOZGmeaKqmSeu+LRpEdG0Hsq1H+DnvtZ7pB+TlikYfMjlcCktE4JMU3U1HVd1VlL2hCIiweExYmc/otHoUAgAh+QQJAAASACwAAAAAFAAUAAAFWqAkjmRpnmgqEgyhnkykHNA7GlEePUXyJg6dzoFQDYTI1gnyQCIVC1PA6YySGlSkwEcCZIWGEu6bA5gSCwW5gWJlAy+EV6io/QrN3MA2ShwUW3wkBGyChocSIQAh+QQFAAASACwAAAAAFAAUAAAFXKAkjmRpnmhaJsuimoYQKcQrNkCkR8wLBbsgApUYKIJBR8LUcCCfBRPh+Aw+IKZDFXkwQR7bHc1UCO96q1yYUTMhtg6DioFUDJaq6S6AtUkWEQANfiMJcoSIiSUhADs=);
  //     }

  //     .content {
  //       .iiif-av-component {
  //         .av-icon.av-icon-play {
  //           background-size: 30px 30px;
  //           &.play {
  //             //<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30">
  //             //    <path d="M8.5 26V4l13 11z" fill="#fff" fill-rule="evenodd"/>
  //             //</svg>
  //             background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Cpath d='M8.5 26V4l13 11z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
  //             &:after {
  //               background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Cpath d='M8.5 26V4l13 11z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
  //               opacity: 0;
  //               content: '';
  //             }
  //           }

  //           &.pause {
  //             // <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
  //             //   <g fill="#fff" fill-rule="evenodd">
  //             //     <path d="M18 4h6v22h-6zM6 4h6v22H6z"/>
  //             //   </g>
  //             // </svg>
  //             background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-rule='evenodd'%3E%3Cpath d='M18 4h6v22h-6zM6 4h6v22H6z'/%3E%3C/g%3E%3C/svg%3E");
  //           }
  //         }
  //       }
  //     }
  //   }

  .mobileFooterPanel {
    float: right;
    width: 90px;
    margin-top: -38px;
    height: 5px;

    .options {
      width: 100%;

      .left-options {
        min-width: 30px;
      }

      .btn {
        &.moreInfo {
          display: none;
        }

        &.download {
          display: block;
          float: left;
        }

        &.share {
          display: block;
          float: left;
        }
      }
    }
  }
}