.videoplayer{
    position:relative;
    display:block
}

.videoplayer video{
    max-width:100%;
    max-height:100%
}

.videoplayer .controls{
    position:absolute;
    bottom:0;
    display:flex;
    width:100%;
    align-items:center;
    background-color:#eee
}

.videoplayer .controls .progress{
    background-color:#333
}

.videoplayer .controls .progress .progress-bar{
    transition:none !important;
    background-color:#666
}
.videoplayer .controls.controls-light .bi{
    color:#2b2b2b
}

.videoplayer .controls.controls-dark{
    background-color:#2b2b2b
}

.videoplayer .controls.controls-dark .bi{
    color:#eee
}

.videoplayer .controls.controls-dark .progress{
    background-color:#ccc
}

.videoplayer .controls.controls-dark .progress .progress-bar{
    background-color:#999
}

.videoplayer .controls.auto-hide{
    opacity:0;
    transition:opacity .5s ease-in-out;
    transition-delay:.5s
}

.videoplayer .controls button>*,

.videoplayer .controls .btn>*{
    pointer-events:none !important
}

.videoplayer .overlay{
    position:absolute;
    z-index:300;
    top:0;
    left:0
}

.videoplayer .overlay .title{
    font-size:inherit;
    color:#fff;
    padding:.5rem;
    font-weight:bold
}

.videoplayer .dropup-volume{
    position:absolute !important;
    bottom:calc(100% + 5px) !important;
    padding:.75rem 1rem;
    transform:none !important;
    min-width:inherit
}
.videoplayer .dropup-volume .form-range{
    -webkit-moz-appearance:slider-vertical;
    width:1rem;
    height:100% !important
}

.videoplayer:hover .controls.auto-hide{
    opacity:1
}

.tooltip{
    z-index:1400
}