@font-face {
    font-family: dana;
    src: url('../font/DanaFaNum-Regular.woff2') format('woff2'), url('../font/DanaFaNum-Regular.woff') format('woff');
}

@font-face {
    font-family: vazir;
    src: url('../font/VAZIRMATN.TTF');
}

.font-dana{
    font-family: dana;
}

.font-vazir{
    font-family: vazir;
}

.vjs-progress-holder{
    height: 6px;
    transition: all 0.2s ease-in-out;
}
.vjs-progress-holder:hover {
    height: 12px;
}
.vjs-load-progress {
    height: 100%;
    background-color: #999999AA;
    position: absolute;
    transition: all 0.2s ease-in-out;
}
.vjs-mouse-display {
    position: absolute;
    top: -40px;
}
.vjs-play-progress.vjs-slider-bar {
    height: 100%;
    position: relative;
    background-color: #F6B828;
    transition: all 0.2s ease-in-out;
}
.vjs-play-progress.vjs-slider-bar .vjs-time-tooltip {
    position: absolute;
    top: -40px;
    right: 0 !important;
}
.vjs-progress-holder .vjs-play-progress.vjs-slider-bar::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -8px;
    width: 16px;
    height: 16px;
    background-color: #F6B828;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;

}
.vjs-progress-holder:hover .vjs-play-progress.vjs-slider-bar::after {
    top: -6px;
    right: -16px;
    width: 24px;
    height: 24px;
}
.vjs-progress-control.vjs-control {
    direction: ltr;
}
.vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
    position: relative;
    background-color: #000000AA;
}
.vjs-time-tooltip{
    background-color: #F6B828 !important;
    color: #000;
    padding: 4px 8px;
    border-radius: 4px;
}
.vjs-mouse-display{
    transition: opacity 0.5s ease-in-out;
}
.vjs-mouse-display.hide{
    opacity: 0 !important;
}
#top-bar, #bottom-bar{
    transition: all 0.5s ease-in-out;
}
#top-bar.hide {
    top: -200px;
}
#bottom-bar.hide {
    bottom: -200px;
}
#player{
    padding: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

.sub-transparent-bg > div > div > div{
    background-color: #00000000 !important;
}
.sub-light-bg > div > div > div{
    background-color: #000000AA !important;
}
.sub-dark-bg > div > div > div{
    background-color: #000000 !important;
}
.sub-text-white > div > div > div{
    color: #FFFFFF !important;
}
.sub-text-yellow > div > div > div{
    color: #F5C518 !important;
}
.sub-text-blue > div > div > div{
    color: #2D9AFF !important;
}
.sub-font-vazir > div > div > div{
    font-family: vazir !important;
}
.sub-font-dana > div > div > div{
    font-family: dana !important;
}
.sub-font-iransans > div > div > div{
    font-family: iransans_medium !important;
}