/* Access Point Studio Key Points styles for Azure Media Player plugin apsKeyPoints.js */
.apsKeyPointRegion {
    font-family: "Segoe UI",Verdana,Arial,sans-serif;
    font-size: 12pt;
    background-color: rgba(0,0,0,  0.6);
    padding: 10px 0;
}

#videoTop-Left, #videoTop-Right, #videoBottom-Left,
#videoBottom-Right, #videoMid-Left, #videoMid-Right,
#videoTop-Mid, #videoBottom-Mid, #videoMid-Mid {
    position: absolute;
    display: none;
    height: auto;
    width: auto;
}

#videoTop-Left {
    top: 10%;
    left: 5%;
}

#videoTop-Mid {
    top: 10%;
    left: 40%;
}

#videoTop-Right {
    top: 10%;
    right: 5%;
}

#videoBottom-Left {
    bottom: 10%;
    left: 5%;
}

#videoBottom-Mid {
    bottom: 10%;
    left: 40%;
}

#videoBottom-Right {
    bottom: 10%;
    right: 5%;
}

#videoMid-Left {
    top: 50%;
    left: 5%;
}

#videoMid-Mid {
    top: 50%;
    left: 40%;
}

#videoMid-Right {
    top: 50%;
    right: 5%;
}

#videoFull {
    position: absolute;
    display: none;
    height: 83%;
    width: 90%;
    top: 7%;
    right: 5%;
    bottom: 10%;
}

.amp-default-skin .vjs-control-bar {
    z-index: 100; /* to allow key points divs to appear below paly bar */
}