/* Video Player CSS */
.video_page .video_container {position: fixed;width: 100%;height: 100%;display: none;background-color: rgba(0, 0, 0, 0.9);z-index: 99999999999;top:0px;}
.video_page .pop_close_icon {background: url(https://www.idrivemirror.com/source/images/video_close_btn.png) no-repeat scroll 0 0;cursor: pointer;height: 39px;width: 39px;position: absolute;right: 10px;top: 10px;z-index: 99;}
.video_page .video_center {position: absolute;left: 0;right: 0;top: 0;bottom: 0;height: 500px;width: 1180px;margin: auto !important;}
.video_page .container {width: 100%;margin: auto;position: relative;height: 500px;}
.video_page .vidcontainer {cursor:pointer;width: 75%;height: 100%;float: left;position: relative !important;z-index: 9;overflow: hidden;}
.video_page .vidcontainer:before {content: '';position: absolute;width: 100%;height: 99.5%;background: #000;z-index: -1;top: 2px;}
/* .video_page .reload, .video_page .single_reload {display:none;width: 100%;height: auto;position: absolute;right: 0;bottom: 0;background: url(https://www.idrivemirror.com/video/mirror_endframe.png) no-repeat;background-size: cover;background-position: center;z-index:99999;} */
.video_page .reload:before, .video_page .single_reload:before {content: '';background-image: url(https://www.idrivemirror.com/source/images/video_reload_icon.png);background-repeat:no-repeat;width: 64px;height: 64px;position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;z-index:99;opacity: 1;}
.video_page .reload:after, .video_page .single_reload:after {content: '';position: absolute;width: 100%;height: 100%;background-color: rgb(0 0 0 / 80%);}
.video_page .vidcontainer video {width: 100%;height: 500px;color: #fff;text-align: center;font-size: 20px;}
.video_page .videolist {float: right;width: 25%;background-color: #fff;height: 100%;position: relative;overflow-y: auto;}
.video_page .vids {margin: 0;padding: 0;}
.video_page .vids ul{display:grid;}
.video_page .vids a {cursor:pointer;text-decoration: none;color: #fff;font-size: 16px;display: block;border-bottom: 1px solid #616060;padding: 12px 10px 12px 4px;margin: 0;border: 1px solid #ddd;}
.video_page .vids a:hover {background-color: #35abd8;}
.video_page .playing, .video_page .vids a:hover.playing {background: #015575 url(https://www.idrivemirror.com/source/images/video-active-icon.png) no-repeat center left;}
.video_page .playing h3, .video_page .playing p, .video_page .vids a:hover h3, .video_page .vids a:hover p {color: #fff !important;}
.video_page .video-info {padding: 0 20px;color: #000;width: 100%;box-sizing: border-box;}
.video_page .video-info h3 {font-size: 18px;color: #000;display: inline;font-weight: 400;padding: 0;line-height: 24px;border-bottom: 0;}
.video_page .video-info p {font-size: 14px;line-height: 22px;color: #6c6d6f;padding: 0;padding-top: 10px;margin: 0;}
.video_page .fullscreen .vidcontainer{width:100%;background:transparent;}

/*--- controllers ---*/
.video_page .controllers {position: absolute;z-index:9999;bottom: 0;height: 40px;background-color: transparent;width: 100%;padding: 0 1%;box-sizing: border-box;cursor: default;}
/* Fullscreen Mode */
.loading {display: none;position: absolute;width: 64px;height: 64px;z-index: 9;left: 0;right: 0;bottom: 0;top: 0;margin: auto;}
.reload, .single_reload {display: none;position: absolute;width: 100%;height: 100%;z-index: 9;left: 0;right: 0;bottom: 0;top: 0;margin: auto;}
.video_page .fullscreen {background: transparent;width: 100%!important;height: 100%;position: absolute;}
.video_page .fullscreen .pop_close_icon, .fullscreen .videolist {display: none;}
.video_page .fullscreen .video_center {position: fixed;width: 100% !important;height: 100% !important;}
.video_page .fullscreen .container {width: 100%;height: 100%;position: absolute;background: transparent;}
.video_page .fullscreen video#myvid {width: 100% !important;height: 100% !important;position: absolute;object-fit: contain;}
.video_page .fullscreen .full_icon, .video_page .btnFS{display:block !important;}
.video_page .full_icon, .video_page .fullscreen .btnFS{display:none !important;}
.video_page .controllers button {position:relative;border: none;background-color: transparent;color: #777;height: 25px;width: 30px;border-radius: 0;margin: 5px;padding:0px;box-shadow: none;outline: none;font-size: 18px;display: inline-block;float: left;background-image:url(https://www.idrivemirror.com/source/images/player_new_icon.png);background-repeat:no-repeat;cursor:pointer;}
.video_page .controllers button:hover span{display:block!important;}
.video_page .controllers button span {white-space: nowrap;box-sizing: border-box;display: none;position: absolute;z-index:99999;left: 0px;background-color: #ffffff;color: #040404;padding: 5px;border-radius: 5px;font-size: 12px;line-height: 14px;text-align: center;top: -30px;height: 25px;}
.video_page .controllers button span:before {top: 100%;left: 10px;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(136, 183, 213, 0);border-top-color: #ffffff;border-width: 5px;margin-left: -5px;}
.video_page .controllers button span.txt_full, .video_page .fullscreen .controllers button span.txt_exitfull{left:auto;right: 10px;}
.video_page .controllers button span.txt_full:before, .video_page .fullscreen .controllers button span.txt_exitfull:before {left: auto;right: 10px;}
.video_page .controllers button span.sund_txt {left: 0px;}
.video_page .prevvid.disabled, .video_page .prevvid.disabled span.txt_prev {display: none!important;}
.video_page .btnPlay {background-position:6px 0px;}
.video_page .btnPlay:hover {background-position:5px -30px;}
.video_page .paused {background-position: 5px -60px;}
.video_page .paused:hover {background-position: 5px -90px;}
.video_page .prevvid.disabled, .video_page .nextvid.disabled, .video_page .btnPlay.disabled {pointer-events: none;cursor: default!important;opacity:0.5;}
.video_page .prevvid{background-position:5px -180px;}
.video_page .prevvid:hover{background-position:5px -210px;}
.video_page .nextvid{background-position:5px -118px;}
.video_page .nextvid:hover{background-position:5px -149px;}
.video_page .sound {background-position:0px -240px;}
.video_page .muted {background-position:0px -484px;}
.video_page .rewind {background-position:0px -518px;}
.video_page .btnFS{background-position:0px -359px;}
.video_page .btnFS:hover{background-position:0px -389px;}
.video_page .full_icon {background-position: 0px -590px;}
.video_page .full_icon:hover {background-position: 0px -590px;}
.video_page .playlist{background-position:0px -420px;}
.video_page .playlist:hover{background-position:0px -420px;}

/* PROGRESS BAR CSS */
.video_page .topControl {position: absolute;display: block;width: 96%;bottom: 50px;background-color: #d4d4d4;z-index: 1;margin: 0 2%;}
.video_page .control_conta {display: none;}
.video_page .control_conta.show {width:100%;height:auto;display: block;position:absolute;z-index:9;bottom:0px;}
.video_page .control_conta.show:before {content: '';width: 100%;height: 90px;position: absolute;bottom: 0;background: rgba(66,64,66,0);background: -moz-linear-gradient(top, rgba(66,64,66,0) 0%, rgba(19,19,19,1) 100%);background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(66,64,66,0)), color-stop(100%, rgba(19,19,19,1)));background: -webkit-linear-gradient(top, rgba(66,64,66,0) 0%, rgba(19,19,19,1) 100%);background: -o-linear-gradient(top, rgba(66,64,66,0) 0%, rgba(19,19,19,1) 100%);background: -ms-linear-gradient(top, rgba(66,64,66,0) 0%, rgba(19,19,19,1) 100%);background: linear-gradient(to bottom, rgba(66,64,66,0) 0%, rgba(19,19,19,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424042', endColorstr='#131313', GradientType=0 );opacity: .8;}
/* Progress bar */
.video_page .progress {width: 100%;height: 5px;position: relative;float: left;cursor: pointer;background: #d4d4d4;}
.video_page .progress span {height: 100%;position: absolute;top: 0;left: 0;display: block;}
.video_page .progress span.knob_cont {height: 13px;width: 13px;background-color: #fff;border-radius: 50%;box-shadow: 0 0 10px rgba(0,0,0,0.4);opacity: 1;pointer-events: none;position: absolute;top: -4px;z-index: 99;}
.video_page .progress .tooltip {box-sizing: border-box;display: none;position: absolute;background-color: #ffffff;color: #040404;padding: 5px 10px;border-radius: 5px;font-size: 12px;line-height: 14px;text-align: center;z-index: 1000;top: -30px;height: 25px;}
.video_page .progress .tooltip:before {top: 100%;left: 50%;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(136, 183, 213, 0);border-top-color: #ffffff;border-width: 5px;margin-left: -5px;}
.video_page .progress:hover .tooltip{display:block;}
.video_page .timeBar{z-index:10;width:0;background: #35abd8;}
.video_page .bufferBar{z-index:5;width:0;background: #eee;}
/* time and duration */
.video_page .time {width: 100px;float: left;text-align: center;font-size: 12px;line-height: 12px;right: 0;opacity: 1;position: relative;color: #fff;top: 9px;}
.video_page .topControl:hover .progress {width: 100%;height: 5px;}
/* VOLUME BAR CSS */
/* volume bar */
.video_page .volume {display: none;position: relative;cursor: pointer;width: 65px;height: 5px;float: left;top: -23px;left: 35px;background-color: #d4d4d4;margin: 0px 5px 0px 0px;}
.video_page .volume .slider {-webkit-appearance: none;width: 100%;height: 5px;border-radius: 0px;background: #d3d3d3;outline: none;opacity: 1;-webkit-transition: .2s;transition: opacity .2s;position:relative;bottom:12px;margin: 0;}
.video_page .volume .slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 15px;height: 15px;border-radius: 50%;background: #fff;cursor: pointer;}
.video_page .volume .slider::-moz-range-thumb {width: 15px;height: 15px;border-radius: 50%;background: #fff;cursor: pointer;}
.video_page .vol_cont {width: 30px;height: 30px;float: left;}


.video_page .vol_cont.width_bar {width: 100px!important;}
.video_page .controllers .vol_cont:hover .volume {display: block;}
.video_page .volumeBar{display: block;height: 100%;position: relative;top: 0;left: 0;background-color: #35abd8;z-index: 10;}
.video_page .volumeBar:after {display: block;content: '';width: 13px;height: 13px;background: #fff;position: absolute;top: -4px;right: -6px;border-radius: 50%;box-shadow: 0 0 10px rgba(0,0,0,0.4);}
.video_page .bigplay{display:block !important;}
.video_page .video_inner_close{display:none;}
/* Next Video Style */
.video_page .vid_thumb_cont {display: flex;width: 400px;height: 80px;position: absolute;right: 10px;bottom: 80px;background-color: #363838;}
.video_page .vid_thumb_cont .vid_thumb_img{flex: 0 0 auto;background: transparent url(https://www.idrivemirror.com/source/images/video_thumb_mirror.png);background-size: contain;background-position: center;float: left;width: 120px;height: 100%;}
.video_page .vid_thumb_cont .vid_thumb_content {width: calc(100% - 120px);float: left;overflow: hidden;padding: .75em .875em;display: block;}
.video_page .vid_thumb_cont .vid_thumb_content p {color: #fff;font-size: 14px;line-height: 1.35;font-weight: bold;display: inline-block;width: 100%;margin: 0px;float: left;}
.video_page .vid_thumb_cont .vid_thumb_content h3.vid_thumb_active {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;font-size: 14px;line-height: 1.35;font-weight: normal;color: #fff;float: left;margin: 10px 0px 0px;text-align: left;}
.video_page .vid_thumb_cont .thumb_close_icon {background: url(https://www.idrivemirror.com/source/images/video_close_btn.png) no-repeat scroll 0 0;cursor: pointer;height: 20px;width: 20px;position: absolute;right: 5px;top: 5px;z-index: 99;background-size: contain;}
.video_page .vid_thumb_cont .nextup_duration {align-self: flex-end;text-align: right;font-size: 12px;}
.video_page .vidcontainer .load {background: transparent url(https://www.idrivemirror.com/video/mirror_endframe3012.png);background-size: contain;background-position: center;width: 100%;height: 100%;position: absolute;}
.video_page .playlist_cont {box-sizing: border-box;position: absolute;z-index: 999999;width: 100%;height: 100%;background: hwb(0deg 0% 100% / 90%);padding: 20px 40px;display:none;overflow-y: auto;}
.video_page .playlist_cont.active{display:block;}
.video_page .playlist_thumb_sec {display: flex;flex-wrap: wrap;}
.video_page .playlist_thumb_sec a.link {width: calc(33% - 15px);border: 1px solid transparent;height: auto;position: relative;float: left;margin: 0 1% 1% 0;min-height: 140px;background: transparent url(https://www.idrivemirror.com/video/mirror_endframe3012.png) no-repeat;background-size: cover;background-position: center;border: 1px solid #000;}
.video_page .playlist_thumb_sec a.link.playing, .video_page .playlist_thumb_sec a.link:hover{border: 1px solid #fff;}
.video_page .playlist_cont .video_inner_close {display: none;background: url(https://www.idrivemirror.com/source/images/video_close_btn.png) no-repeat scroll 0 0;cursor: pointer;height: 30px;width: 30px;position: absolute;right: 10px;top: 15px;z-index: 99999;background-size: cover;}
.video_page .playlist_cont.active .video_inner_close{display: block;}
.video_page .playlist_cont p {display: none;}
.video_page .playlist_cont h3 {position: absolute;bottom: 20px;color: #fff !important;left: 10px;width: calc(100% - 20px);height: auto;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: center;font-size: 16px;}
.video_page .fullscreen .playlist_thumb_sec  a.link {min-height: 300px;}
.video_page .fullscreen .playlist_thumb_sec a.link h3 {font-size: 1.9rem;line-height: normal;}
.video_page .vidcontainer span.thumb_prev, .video_page .vidcontainer span.thumb_next {display:none;}
.video_page .video_center.no_list .playlist {display: none !important;}
/* IOS Controls */
video::-webkit-media-controls {display:none !important;}
video::-webkit-media-controls-pip-button { display: none;}
video::-moz-media-controls-pip-button {display: none;}
#myvid::-webkit-media-controls {display: none !important;}

/* No Playlist Design */
.no_list .videolist, .no_list .nextvid, .no_list .prevvid, .no_list .vid_thumb_cont, .no_list .playlist {display: none !important;}
.video_page .video_center.no_list {width: 885px;}
.video_page .video_center.no_list .vidcontainer{width:100%;}
.video_page .video_center.no_list .reload {display: none !important;}
.video_page .video_center.no_list.fullscreen .playlist, .video_page .video_center.no_list.fullscreen .control_conta.show .playlist {display: none !important;}
.video_page .no_playlist .video_center.no_list .playlist {display: none !important;}

@media only screen and (max-width:1180px){
.video_page .video_center, .video_page .video_center.no_list{width:96%;height: 350px;display: table;}
.video_page .video_center.fullscreen{display:block;height: auto;}
.video_page .vids{height:auto;padding: 20px;top:0px;left: 0px;}
.video_page .vidcontainer{width:100%;height:99%;background:transparent;}
.video_page .vidcontainer:before{background:transparent;}
.video_page .videolist {display: none!important;width: 100%;height: 100%;position: absolute;z-index: 99999;background-color: rgba(0, 0, 0, 0.95);padding: 20px;box-sizing: border-box;}
/* .video_page .videolist.active{display:block;} */
.video_page .fullscreen .playlist_thumb_sec  a.link {min-height: 190px;}
.video_page .fullscreen .playlist_thumb_sec a.link h3 {font-size: 1.2rem;line-height: normal;}
.video_page .vids a {width: 32%;border: 1px solid transparent;height: 100%;position: relative;float: left;margin: 0 1% 1% 0;min-height: 140px;background: transparent url(https://www.idrivemirror.com/video/mirror_endframe3012.png);background-size: contain;background-position: center;}
.video_page .vids a:before {content: '';position: absolute;width: 100%;height: 55%;bottom: 0;left: 0;background: rgba(147,206,222,0);background: -moz-linear-gradient(top, rgba(147,206,222,0) 0%, rgba(0,0,0,1) 100%);background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(147,206,222,0)), color-stop(100%, rgba(0,0,0,1)));background: -webkit-linear-gradient(top, rgba(147,206,222,0) 0%, rgba(0,0,0,1) 100%);background: -o-linear-gradient(top, rgba(147,206,222,0) 0%, rgba(0,0,0,1) 100%);background: -ms-linear-gradient(top, rgba(147,206,222,0) 0%, rgba(0,0,0,1) 100%);background: linear-gradient(to bottom, rgba(147,206,222,0) 0%, rgba(0,0,0,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#000000', GradientType=0 );}
.video_page .vids a.playing, .video_page .vids a:hover.playing, .video_page .vids a:hover{min-height: 140px;border: 1px solid #fff;background: transparent url(https://www.idrivemirror.com/video/mirror_endframe3012.png);background-size: contain;background-position: center;}
.video_page .video-info p {display: none;}
.video_page .video-info h3 {position: absolute;bottom: 20px;color: #fff;left: 10px;width: calc(100% - 20px);height: auto;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: center;font-size: 16px;}
.video_page .container {display: table;width: 79%;background: transparent;margin: auto;position: absolute;height: auto;top: 0;right: 0;bottom: 0;left: 0;}
.video_page .vidcontainer video {width: 100% !important;height: auto !important;}
.video_page .playlist_cont.active .video_inner_close{display: block;background: url(https://www.idrivemirror.com/source/images/video_close_btn.png) no-repeat scroll 0 0;cursor: pointer;height: 15px;width: 15px;position: absolute;right: 10px;top: 15px;z-index: 99999;background-size: cover;}
.video_page .fullscreen video#myvid{object-fit: contain;height: auto !important;margin: auto;top: 0;bottom: 0;}
.video_page .fullscreen .container{display: block;}
.video_page .tooltip{display:none !important;}
.no_list .videolist, .no_list .nextvid, .no_list .prevvid, .no_list .vid_thumb_cont, .no_list .playlist {display: none !important;}
.video_page .control_conta.show .playlist{display:block!important;}
.video_page .video_center.fullscreen .playlist, .video_page .video_center.fullscreen .control_conta.show .playlist{display:block!important;}
.video_page .video_center.no_list .playlist {display: none !important;}
.video_page .vol_cont.width_bar {width: 30px!important;}
.video_page .vol_cont.width_bar .volume, .video_page .vol_cont.width_bar:hover .volume, .video_page .volume{display: none !important;}
.video_page .topControl {width: 94%;margin:0px 3%;}
.video_page .controllers button:hover span{display:none!important;}
}

@media only screen and (max-width:1024px){
.video_page .bigplay.web_icon {display: none !important;}
}
@media only screen and (max-width:980px){
.video_page .vids a{width:32%;}
.video_page .container {width:70%;}
.video_page .video-info h3{font-size:14px;line-height: normal;}
.video_page .pop_close_icon{height: 20px;width: 20px;background-size: cover;right: 5px;}
.video_page .closescreen .pop_close_icon{display:none;}
}
@media only screen and (max-width:767px){
.video_page .container {width:75%;}
}
@media only screen and (max-width:640px){
.video_page .vids a {width: 26%;margin: 0 2% 2% 0;min-height:80px;box-sizing: border-box;}
.video_page .vids a.playing, .video_page .vids a:hover.playing, .video_page .vids a:hover{min-height:80px;}
.video_page .playlist_cont{padding:10px;overflow: hidden;}
.video_page .video_center.fullscreen .playlist_cont.active {display: table;}
.video_page .playlist_thumb_sec{padding: 0px 30px;}
.video_page .video_center.fullscreen .playlist_cont.active .playlist_thumb_sec{position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;margin: auto;width: 100%;height: 300px;}
.video_page .playlist_thumb_sec a.link {display: none;}
.video_page .playlist_thumb_sec a.link.playing {display: block;width: 100%;height: 100%;min-height: 190px;}
.video_page .playlist_thumb_sec a.link h3, .video_page .fullscreen .playlist_thumb_sec a.link h3 {font-size: 13px;line-height: normal;}
.video_page .playlist_cont .video_inner_close {height: 20px;width: 20px;right: -2px;top: 10px;}
.video_page .playlist_cont.active span.thumb_prev, .video_page .playlist_cont.active span.thumb_next {display:block;cursor: pointer;position: absolute;z-index: 9999;top: 50%;width: auto;padding: 16px;margin-top: -22px;color: #fff;font-weight: 700;font-size: 20px;transition: .3s;user-select: none;}
.video_page .playlist_cont.active span.thumb_prev {left: 0px;}
.video_page .playlist_cont.active span.thumb_next {right: 0px;}
.video_page .playlist_cont.active span.thumb_prev.active, .video_page .playlist_cont.active span.thumb_next.active{display:none;}
.video_page .fullscreen .playlist_thumb_sec a.link {position: absolute;height: 300px;min-height: 300px;width: calc(100% - 80px);margin: auto;top: 0px;bottom: 0px;right: 0px;left: 0px;}
}
@media only screen and (max-width:480px){
.video_page .vids a, .video_page .vids a.playing, .video_page .vids a:hover.playing, .video_page .vids a:hover{width:31%;min-height:50px;}
.video_page .container{width:100%;}
.video_page .video-info h3{bottom:20px;left:5px;font-size:10px;line-height: normal;}
.video_page .controllers button{width: 20px;}
.video_page .time{width:75px;}
.video_page .rewind {background-position: 2px -540px;}
.video_page .rewind:hover {background-position: 2px -570px;}
.video_page .mob_btn {position: relative;top: 0;width: auto;margin: auto;left: 0;right: 0;display: inline-block;float: left;}
.video_page .mob_btn button {height:20px;margin-left: 5px;}
.video_page .nextvid, .video_page .nextvid:hover {background-position: 0px -118px!important;}
.video_page .mob_btn button.rewind {background-position: 0px -518px;order: 1;}
.video_page .mob_btn button.btnPlay {order: 2;}
.video_page .mob_btn button.nextvid {order: 3;}
.video_page .volume{top: 12px;left: 10px;width: 40px;}
.video_page .video_center.fullscreen .mob_btn {position: relative;margin: 0;top:0px;}
.video_page .vid_thumb_cont{width: 300px;}
}