/*
Custom video contols for HTML5 player
*/

/* BEGIN video controls overlay */


.video-section {
    text-align: center;
}

.position-relative {
    position: relative !important;
}

    .position-relative video {
        max-width: 100%;
    }

.play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 1;
    transition: all 0.25s ease;
}

.pause-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 1;
    display: none;
    transition: all 0.25s ease;
}

.play-btn i {
    font-size: 16px;
    color: #a1cead;
    border: 2px solid #a1cead;
    border-radius: 50%;
    padding: 10px 10px 10px 13px;
    opacity: 0.4;
}

.pause-btn i {
    font-size: 16px;
    color: #a1cead;
    border: 2px solid #a1cead;
    border-radius: 50%;
    padding: 10px 13px;
    opacity: 0;
    transition: all 0.5s;
}

.vulcraft-video-player:hover .pause-btn i {
    opacity: 1;
}

.carousel-control-prev {
    width: 10% !important;
}

.vulcraft-video-player {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: auto;
}

.video-control-part, .video-control-part > div, .video-vul-btn {
    display: flex;
    align-items: center;
}

.video-control-part {
    justify-content: space-between;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    opacity: 1;
    padding: 0 15px;
    background-color: #ffffff;
    transition: opacity .5s ease;
}

    .video-control-part.playing {
        opacity: 0;
    }

.vulcraft-video-player:hover .video-control-part {
    opacity: 1;
}

.video-vul-btn {
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #D9E8E2;
    width: 30px;
    height: 30px;
    margin: 5px 10px;
}

    .video-vul-btn::before {
        content: '';
        border-radius: 100%;
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        transition: all .25s ease;
    }

    .video-vul-btn::after {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        z-index: 1;
        transition: all .25s ease;
    }

.drop-btn > .video-vul-btn {
    background: none;
    box-shadow: none;
}

    .drop-btn > .video-vul-btn::before {
        background: none;
    }

.video-vul-btn:hover::before {
    opacity: 0;
}

.video-vul-btn:hover::after {
    color: #006325;
}


.sound-btn::after {
    content: '\f028';
    z-index: 3;
}

.sound-btn.low::after {
    content: '\f027';
}

.sound-btn.mute::after {
    content: '\f6a9';
}

.download-btn::after {
    content: '\f381';
}

.cc-btn::after {
    content: '\f20a';
}

.fullscreen-btn::after {
    content: '\f065';
}

.video-control-bar-part, .bar-bg {
    width: 100%;
}

.bar-bg {
    border-radius: 50px;
    height: 5px;
    background: #EFF0F4;
    margin: 0 10px;
}

.bar-time {
    position: relative;
    height: 5px;
    border-radius: 50px;
    background: #006325;
    width: 0%;
}

.bar-progress {
    height: 5px;
    width: 100%;
}

.bar-pin {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #D9E8E2;
    border-radius: 50px;
    right: -10px;
    top: -5px;
}

.video-element {
    width: 100%;
    min-width: 100%;
}

.box-sound {
    width: 0px;
    opacity: 0;
    overflow: hidden;
    background: #D9E8E2;
    height: 40px;
    padding: 17px 15px 0 40px;
    position: absolute;
    left: 0;
    z-index: 2;
    border-radius: 50px;
    transition: all .25s ease;
}

.drop-btn:hover .box-sound {
    width: 120px;
    opacity: 1;
}

.volume {
    width: 100%;
    height: 5px;
    background: #EFF0F4;
    border-radius: 50px;
}

.bar-volume {
    width: 100%;
    height: 5px;
    border-radius: 50px;
    background: #006325;
}


.bar-time-box {
    display: none;
    position: absolute;
    width: max-content;
    top: -65px;
    right: -55px;
    background: #ffffff;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #213B34;
}

.bar-progress:hover .bar-time-box {
    display: block;
}

.bar-time-box::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #ffffff;
    display: block;
    position: absolute;
    bottom: -6px;
    right: 47%;
    transform: rotate(45deg);
    border: solid #213B34;
    border-width: 0 1px 1px 0;
}

/* END video controls overlay */