/* 大播放按鈕 */
.mx_btnBigPlay {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    color: #fff;
    cursor: pointer;
    height: 5rem;
    width: 9rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/bigplay.png) no-repeat center;
    z-index: 999;
}

/* toolbar 底條*/
.mx_toolBar {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    background: rgba(0, 0, 0, .2);
    width: 100%;
    height: 2.2rem;
    bottom: 0rem;
}

/* 按鈕基礎 */
.mx_btnFirst {
    position: inherit;
    color: white;
    cursor: pointer;
    bottom: 0.5rem;
    height: 1.2rem;
    width: 1.4rem;
}

/* 播放按鈕 */
.mx_btnPlay {
    background-color: white;
    left: 0.5rem;
    -webkit-mask: url(../img/play.png) no-repeat center;
    mask: url(../img/play.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/*暫停按鈕*/
.mx_btnPause {
    background-color: white;
    left: 0.5rem;
    -webkit-mask: url(../img/pause.png) no-repeat center;
    mask: url(../img/pause.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/*時間顯示*/
.mx_timeInfo {
    position: inherit;
    bottom: 0.5rem;
    left: 2.8rem;
    color: white;
    font-size: 0.75rem;
}

/*恢復視角按鈕*/
.mx_btnGyroReset {
    right: 4.8rem;
    background-color: white;
    -webkit-mask: url(../img/full.png) no-repeat center;
    mask: url(../img/full.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    display: none;
}

/*使用重力按鈕*/
.mx_btnGyro {
    right: 0.6rem;
    /* right: 0.4rem; */
    -webkit-mask: url(../img/gyro.png) no-repeat center;
    mask: url(../img/gyro.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    display: block;
}

.mx_btnGyro_valid {
    background-color: white;
}

.mx_btnGyro_invalid {
    background-color: #888;
}


/*啟用VR按鈕*/
.mx_btnVr {
    right: 0.4rem;
    -webkit-mask: url(../img/vr.png) no-repeat center;
    mask: url(../img/vr.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    display: none;
}

.mx_btnVr_valid {
    background-color: white;
}

.mx_btnVr_invalid {
    background-color: #888;
}


/*全屏按鈕*/
.mx_btnFullScreen {
    right: 2.8rem;
    background-color: white;
    -webkit-mask: url(../img/full.png) no-repeat center;
    mask: url(../img/full.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    display: block;
}

.mx_btnFullScreen_valid {
    background-color: white;
}

.mx_btnFullScreen_invalid {
    background-color: #888;
}

.mx_btnNormalScreen {
    right: 2.8rem;
    background-color: white;
    -webkit-mask: url(../img/normal.png) no-repeat center;
    mask: url(../img/normal.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    display: block;
}

.mx_btnNormalScreen_valid {
    background-color: white;
}

.mx_btnNormalScreen_invalid {
    background-color: #888;
}


/*碼率選擇*/
.mx_btnRate {
    right: 4.8rem;
    background-color: white;
    -webkit-mask: url(../img/setting.png) no-repeat center;
    mask: url(../img/setting.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    display: block;
}

/*碼率顯示菜單*/
.mx_rateList {
    position: absolute;
    left: 0rem;
    top: 0rem;
    color: #fff;
    width: 6rem;
    display: none;
}

.mx_rateList ul {
    list-style: none;
    background: transparent;
    margin: 0;
    padding: 0;
    text-align: center;
}

.mx_rateList ul li {
    display: block;
    text-overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    width: 80%;
    line-height: 2rem;
    padding: 0 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    cursor: pointer;
}

.mx_rateList ul li.done::before {
    content: "\2713\0020";
}


/*進度條底條*/
.mx_progressBar {
    position: inherit;
    bottom: 0.9rem;
    left: 8.9rem;
    width: calc(100% - 17.9rem);
    height: 0.2rem;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    z-index:999;
}

/*進度條加載條*/
.mx_loadedProgress {
    position: inherit;
    width: 0%;
    height: 0.2rem;
    background: rgba(255, 255, 255, .3);
    z-index:999;
}

/*進度條播放條*/
.mx_playProgress {
    position: inherit;
    width: 0%;
    height: 0.2rem;
    background: rgba(221, 32, 32, .6);
    z-index:999;
}

.mx_progressBar:hover {
    height: 0.5rem;
    bottom: 0.75rem;
}

.mx_progressBar:hover .mx_loadedProgress,
.mx_progressBar:hover .mx_playProgress {
    height: 0.5rem;
}

.mx_fovRange {
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    position:absolute;
    width:2rem;
    height:60%;
    background:rgba(0,0,0,0);
    right:0rem;
    top:20%;
    text-align:center;
    display:block;
    border-radius:1rem;
    
}
.mx_fovRangeInput{
    width:100%;
    height:100%;
    -webkit-appearance: slider-vertical;
    /* -webkit-appearance: none; */
    margin:0;
}
/*緩衝顯示蒙層*/
.mx_loadingMask {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    display: none;
    background: rgba(0, 0, 0, 0);
}

/*緩衝gif*/
.mx_loadingGif {
    border:0.5rem solid rgb(50,50,50,.4);
    border-bottom: rgb(255,255,255,.6) 0.5rem solid;
    border-radius: 50%;

    width: 5rem;
    height: 5rem;
    position: absolute;
    left: calc(50% - 2.5rem);
    top: calc(50% - 2.5rem);

    -webkit-animation: animal 3s linear infinite;
    animation: animal 3s linear infinite;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}

@-webkit-keyframes animal {
    from {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      transition: all 3s;
    }
}
.testVideo{
    position: absolute;
    width: 48px;
    height: 36px;
    z-index:99999999;
}

#ii{
    width:200px;
    height:120px;
    z-index: 9999;
    border: 1px solid red;
    position: absolute;
    left:0px;
    top:0px;
    /* background: #888; */
}
/* #ii img{
    width: 100%;
    height: 100%;
} */


/* 方向指示圖*/
.cameraMap{
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: transparent;
    border-radius: 100px;
    -webkit-tap-highlight-color:rgba(255, 255, 255, 0);
    tap-highlight-color:rgba(255, 255, 255, 0);
    z-index: 99999;
}
.pie,.cameraMap {
    height: 60px;
    width: 60px;
}
/* 虛擬搖桿 */
.joystick {
    position: absolute;
    right:  calc((100% - 13rem)/2);
    bottom: 3.2rem;
    height: 10rem;
    width: 10rem;
    background-color: transparent;
    -webkit-tap-highlight-color:rgba(255, 255, 255, 0);
    tap-highlight-color:rgba(255, 255, 255, 0);
    z-index: 9;
}

/* 避免鼠標操作或手勢操作後，圖標被選中，這種情況下圖標有背景色*/

*{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}