:root {
    /*选框div的坐标及宽高 默认为0*/
    --rect-width: 0px; /*右下x - 左上x*/
    --rect-height: 0px; /*右下y - 左上y*/
    --rect-top: 0px; /*左上y*/
    --rect-left: 0px; /*左上x*/
    /*控制点的宽高及边框*/
    --ctrl-point-width: 3px;
    --ctrl-point-height: 3px;
    --ctrl-point-border: 1px;
    --ctrl-point-real-height: calc(var(--ctrl-point-height) + calc(var(--ctrl-point-border) * 2));
    --ctrl-point-real-width: calc(var(--ctrl-point-width) + calc(var(--ctrl-point-border) * 2));
}

.rect {
    display: none; /*默认隐藏*/
    /*width: var(--rect-width);
    height: var(--rect-height);*/
    border: 1px solid green;
    /*position: absolute;*/
    /*top: var(--rect-top);
    left: var(--rect-left);*/
    cursor: move;
    z-index: 9999;
    /*outline: rgb(220,220,220,0.7) solid 5000px;*/
    outline: #3071a9 solid 2px;
    background: rgb(187 187 187 / 30%);
}


    .rect .move_point div {
        /* height: var(--ctrl-point-height);
    width: var(--ctrl-point-width);
    border: var(--ctrl-point-border) solid;
    border-color: gray;
    background-color: green;*/
        width: 12px;
        height: 12px;
        border-radius: 100%;
        border: 1px solid #dc4342;
        background-color: #ffffff;
        transform: translate(-50%,-50%)
    }

    .rect .nw {
        cursor: nw-resize;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .rect .n {
        cursor: n-resize;
        position: absolute;
        top: calc(var(--ctrl-point-real-height)/2*-1);
        left: calc(var(--rect-width)/2 - var(--ctrl-point-real-width)/2);
    }

    .rect .ne {
        cursor: ne-resize;
        position: absolute;
        top: 0px;
        left: calc(var(--rect-width) - var(--ctrl-point-real-width));
    }

    .rect .e {
        cursor: e-resize;
        position: absolute;
        top: calc(var(--rect-height)/2 - var(--ctrl-point-real-height)/2);
        left: calc(var(--rect-width) - var(--ctrl-point-real-width)/2);
    }

    .rect .se {
        cursor: se-resize;
        position: absolute;
        top: calc(var(--rect-height) - var(--ctrl-point-real-height));
        left: calc(var(--rect-width) - var(--ctrl-point-real-width));
    }

    .rect .s {
        cursor: s-resize;
        position: absolute;
        top: calc(var(--rect-height) - var(--ctrl-point-real-height)/2);
        left: calc(var(--rect-width)/2 - var(--ctrl-point-real-width)/2);
    }

    .rect .sw {
        cursor: sw-resize;
        position: absolute;
        top: calc(var(--rect-height) - var(--ctrl-point-real-height));
        left: 0px;
    }

    .rect .w {
        cursor: w-resize;
        position: absolute;
        top: calc(var(--rect-height)/2 - var(--ctrl-point-real-height)/2);
        left: calc(var(--ctrl-point-real-width)/2*-1);
    }

/*videocontrolbar.css*/


.fas {
    color: white;
    font-size: 20px;
}

.player {
    max-width: 80vw;
    min-width: 800px;
    border: 5px solid black;
    border-radius: 10px;
    background: black;
    position: relative;
    cursor: pointer;
}


/* Containers */
.show-controls {
    width: 100%;
    height: 10%;
    z-index: 2;
    top: calc(100% - 50px);
    cursor: default;
}

.controls-container {
    position: absolute;
    bottom: -5px;
    width: 557px;
    height: 100%;
    /*margin-top: -95px;*/
    top:5%;
    background: rgb(112 112 112 / 50%);
    box-sizing: border-box;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    opacity: 1;
    transition: all 0.5s ease-out 2s;
    flex-direction: column;
}

/*.show-controls:hover .controls-container {
  opacity: 1;
  transition: all 0.2s ease-out;
}*/



.control-group {
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: space-between;
}

.controls-left,
.controls-right {
    width: 100%;
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    top: 22px;
}

/* Progress Bar */
.progress-range {
    height: 8px;
    width: calc(100% - 30px);
    background: #d4cece;
    margin: auto;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: 5px;
    cursor: pointer;
    transition: height 0.1s ease-in-out;
}

    .progress-range:hover {
        height: 10px;
    }


.video-progress-bar {
    background: #344642;
    width: 50%;
    height: 100%;
    border-radius: 10px;
    transition: all 0.5s ease;
}

/* Left Controls -------------------------- */

.controls-left {
    justify-content: flex-start;
    margin-left: 15px;
    flex: 1;
}

/* Play & Pause */
.play-controls {
    /*margin-right: 15px;*/
    flex: 1;
}

.fa-play:hover,
.fa-pause:hover {
    color: var(--primary-color);
    cursor: pointer;
}

/* Volume */
.volume-icon {
    cursor: pointer;
}

.volume {
    flex: 1;
}

.volume-range {
    height: 8px;
    width: 100px;
    background: rgba(70, 70, 70, 0.5);
    border-radius: 10px;
    position: relative;
    top: -21px;
    left: 50px;
    cursor: pointer;
}

.volume-bar {
    background: var(--font-color);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: width 0.2s ease-in;
}

    .volume-bar:hover {
        background: var(--primary-color);
    }

/* Right Controls ---------------------------- */
.controls-right {
    justify-content: flex-end;
    margin-right: 15px;
}

.speed,
.time {
    /*position: relative;
  top: 10px;*/
}

/* Playback Speed */
/*.speed {
  margin-right: 15px;
}

select,option {
  cursor: pointer;
}


select {
  background: transparent;
  color: var(--font-color);
  border: none;
  font-size: 18px;
  position: relative;
  top: -2.5px;
  border-radius: 5px;
}

select :focus {
  outline: none;
}


select > option {
  background: rgba(0, 0, 0, 0.9);
  border: none;
  font-size: 14px;
}*/

/* Elapsed Time & Duration */
.time {
    /* margin-right: 15px;*/
    color: white;
    font-weight: bold;
    user-select: none;
    flex: auto;
}

/* Fullscreen */
/*.fullscreen {
  cursor: pointer;
}

.video-fullscreen {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}*/

/* Media Query: Large Smartphone (Vertical) */
@media screen and (max-width: 600px) {
    .player {
        min-width: 0;
        max-width: 95vw;
    }

    .fas {
        font-size: 20px;
    }

    .controls-container {
        height: 50px;
    }

    .progress-range {
        width: 100%;
        top: 0;
        left: 0;
        border-radius: 0;
    }

    .video-progress-bar {
        border-radius: 0;
    }

    .volume-range {
        width: 50px;
        left: 30px;
        top: -15px;
    }

    .speed,
    .time {
        top: 3px;
    }

    select {
        font-size: 12px;
    }

    .time {
        font-size: 12px;
    }
}

/* Media Query: Large Smartphone (Horizontal) */
@media screen and (max-width: 900px) and (max-height: 500px) {
    .player {
        max-height: 95vh;
        max-width: auto;
    }

    /*  video {
    height: 95vh;
    object-fit: cover;
  }*/

    /* .video-fullscreen {
    height: 97.5vh;
    border-radius: 0;
  }*/
}