/* Designed by LoKiem */
 .media-player{ overflow: hidden; } .media-player.audio,.media-body { position: relative; background-color:#000; user-select: none; height:100%; } .media-body:-webkit-full-screen{width: 100% !important;height: 100% !important; } .media-body:-moz-full-screen{width: 100% !important;height: 100% !important;} .media-body:-o-full-screen{width: 100% !important;height: 100% !important;} .media-body:-ms-fullscreen{width: 100% !important;height: 100% !important;} .media-body:fullscreen{height: 100% !important;width:100% !important} .media-player .fa{ color:#FAFAFA; cursor:pointer; margin:0px 3px 0px 3px; min-width:15px; } @keyframes rotate { 100% {transform:rotateY(360deg); } } .media-player ul{display:none} .media-time{color: #FAFAFA;} .media-time-hover{ display:none; position: absolute; bottom:30px; background-color: #07141E; padding:3px 5px 3px 5px; border-radius:15px; font-size:14px; width:80px; margin-left:-40px; text-align: center; } .media-time-hover::after{ content: " "; position: absolute; top: 97%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #07141E transparent transparent transparent; } .hover-left{left:2px;margin-left:0px} .hover-right{right:2px;margin-left:0px} .hover-left::after,.hover-right::after{display:none;} .media-item-click,.media-player .fa:hover{color:#1F7EC4 !important} .media-item { position: relative; display: inline-block; } .media-item-body { display:none; position: absolute; z-index: 9; right:-70px; bottom:25px; border-radius: 2px; width:200px; overflow: hidden; } .media-item-body>div{ overflow: auto; max-height:180px; width: 220px; padding-right:10px; } .media-item-body span{ cursor:pointer; display:block; background-color: rgba(7,20,30,0.7); padding:6px; font-size:14px; overflow: hidden; white-space: nowrap; } .media-item-body span:hover{ background-color:#2185D0 !important; } .item-active{background-color:#1F7EC4 !important; } .media-item-body a { display: block } .media-item-body .fa{ color: #FAFAFA; } .media-setting-body{ display:none; z-index:9 } .media-setting-body span{ color: #EAEAEA; background-color: rgba(127,132,155,0.7); } .media-controls,.media-ads { position: absolute; bottom: 0; left: 0; right: 0; color: #FAFAFA; font-size: 16px; width: 100%; padding: 10px 0px 10px 0px; background-color: rgba(7,20,30,0.7); z-index: 9; max-height:50px } .controls-pd{padding:0px 10px 0px 10px} .media-ads-link{font-size:15px;background-color: #E7E7E7;padding:7px;border-radius:30px;display:inline-block;margin:0px 5px 10px 5px} .media-ads-skip,.media-ads-time{font-size:15px;float:right;background-color: #E7E7E7;padding:7px;border-radius:30px;display:inline-block; cursor:pointer; background-color: #07141e; background-color: rgba(7,20,30,.7);margin:0px 5px 10px 5px} .media-ads-popup{ position: absolute; margin: 0 auto; left: 0; right: 0; bottom:60px; max-width:750px; width: 90%; margin-bottom:5px; text-align: center; z-index:9; font-size:18px } .media-ads-popup img { max-height:100px; display:inline-block;} .media-ads-close{position: absolute;cursor:pointer; right:5px;top:5px} .media-ads-close:hover{font-size:19px} .audio .media-ads-popup{left: auto !important;width:80%;} .audio-title,.audio-singer{display:block} .media-title,.media-title-ads{ position: absolute; top: 0; color: #FAFAFA; width: 100%; padding: 10px; background-color: rgba(7,20,30,0.7); z-index: 9; text-align:center } .media-play-warning{ position: absolute; margin: 0 auto; left: 0; right: 0; top:50%; max-width:750px; width: 80%; text-align: center; z-index:9; background-color: #07141E; padding:10px; color:yellow; opacity: 0.7; display:none } .media-title span{opacity:0.8;padding:2px;color:#2185D0;float:right} .media-center { position:absolute; top:50%; left:50%; text-align: center; font-size:60px; transform: translate(-50%, -50%); } .media-play-loading{ animation:ispin 5s linear infinite; } video::cue { background: transparent; position:0% } video::cue(v[voice='Red']) { color:#FF0000;} video::cue(v[voice='Blue']) { color:#0000ff;} video::cue(v[voice='Green']) { color:#00ff00;} video::cue(v[voice='Yellow']) { color:#ffff00;} video::cue(v[voice='Black']) { color:#000000;} video::cue(v[voice='White']) { color:#FFFFFF;} .media-progress { position: relative; width: 100%; display: block; opacity:0.9; cursor:pointer } .media-buffered { position: absolute; left:0px; width: 0px; display: inline-block; border-bottom:1px solid #2185D0; bottom:10px; z-index:9; } .media-progress-bar { position: absolute; width: 100%; cursor:pointer; height: 6px; background: #808080; border:none; transition: all 0.3s ease; bottom: 10px; z-index:9 } .media-progress-bar::-webkit-progress-bar { background: #808080; border:none } .media-progress-bar::-webkit-progress-value {  background: #2185D0; border:none } .media-progress-bar::-moz-progress-bar {  background: #2185D0; border:none } .media-progress-bar::-ms-fill {  background: #2185D0; border:none } .media-volume-bar{ width:50px; background:#808080; display:inline-block; height:12px; position:relative; } .media-volume-bar > span{ background:#2185D0; width:100%; height:100%; position:absolute; } .media-playlist-count{left:40%;top:-5px;position: absolute;font-size:8px;padding:2px;background-color:#2185D0;color:black;border-radius:50%;min-width:12px;max-height:12px;display:inline-block;text-align: center;} .media-player audio{ margin-top:10px} .media-player.audio .media-meta>img{max-width:100%;float:left;width:180px;height:180px;padding:15px;border:1px solid transparent;border-radius:50%;} .media-player.audio .audio-info{font-size:16px;padding:1px; position: absolute; bottom:40%;color: #FAFAFA;} .img-spin{animation:ispin 30s linear infinite} @keyframes ispin { 100% {transform:rotate(360deg); } } .media-player.audio { color: #fff; background: linear-gradient(-45deg, #15617C, #7C1851, #1F4259, #147A62); background-size: 400% 400%; animation: Gradient 10s ease infinite; overflow:hidden; height:230px } @keyframes Gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} } @media(max-width: 480px) { #media-volume{display:none} .media-item-body {right:-20px;} } @media(max-width: 600px) { .media-player.audio .media-item-body>div{ max-height:100px } .media-player.audio .audio-info {font-size:14px;} .media-player.audio {height:150px;} .media-player.audio .media-meta>img{height:100px;width:100px;} } .media-player video{ cursor:pointer; width: 100%; min-height: 100%; height:auto; object-fit: cover; } .video-full-page{ display:none; position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); transition: 1s opacity; cursor:default; }