@import url("https://fonts.googleapis.com/css?family=Exo:400,600&display=swap");
@import url("https://fonts.googleapis.com/css?family=Teko:400,600&display=swap");
    :root {/*
        --player-background: rgba(0, 0, 0, 0.25);
        --player-foreGround: rgba(0, 0, 0, 0.25);*/
        --player-background: #23ce6b;
        --player-foreGround: #edf2f4;
        --player-controls: #106132;
        --hover-color: #1fb860;
        --font-family: 'Exo', sans-serif;
    }

    .video-player {
        border-radius: 4px; overflow: hidden; position: relative; width: 100%; font-family: var(--font-family); background-color: #000000; display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center; align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center; justify-content: center;
        -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    }
    .video-player video { max-width: 100%; }
    .video-controls { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; background-color: var(--player-background); z-index: 2;
    -webkit-transition: all ease 0.5s; transition: all ease 0.5s; }
    .video-controls .icon { position: absolute; }
    .video-controls .seekbar { width: 100%; height: 4px; background-color: var(--player-controls); cursor: pointer; overflow: hidden; position: relative; }
    .video-controls .seekbar .progress { background-color: var(--player-foreGround); width: 0; position: absolute; top: 0; bottom: 0; left: 0; margin: auto;
    -webkit-transition: all ease 0.25s; transition: all ease 0.25s; }
    .video-controls .control-btn { padding: 0; height: 40px; min-height: 40px; min-width: 40px; width: 40px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center; align-items: center; border: 0; background-color: transparent; color: var(--player-controls); outline: 0; cursor: pointer; }
    .video-controls .control-btn:hover { color: var(--player-foreGround); background-color: var(--hover-color); }
    .video-controls .video-playback-controls { display: -webkit-box; display: -ms-flexbox; display: flex; height: 40px;
    -webkit-box-align: center;
    -ms-flex-align: center; align-items: center; }
    .video-controls .toggle-play-pause.play .pause-icon { display: none; }
    .video-controls .toggle-play-pause.pause .play-icon { display: none; }
    .video-controls .toggle-volume.on .volume-off { display: none; }
    .video-controls .toggle-volume.off .volume-on { display: none; }
    .video-controls .video-volume-control { width: 100px; display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 4px; }
    .video-controls .video-timings { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--player-controls);
    -webkit-box-align: center;
    -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center; justify-content: center; font-size: 14px; font-weight: 600; margin-left: auto; padding: 0 4px; }
    .video-controls .video-timings .time { width: 70px; text-align: center; }
    .video-player.hide-controls .video-topbar {
    -webkit-transform: translateY(-100%); transform: translateY(-100%); }
    .video-player.hide-controls .video-controls {
    -webkit-transform: translateY(100%); transform: translateY(100%); }
    
    
    #shake_body { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 17px; }
    #shake_body.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
    @-webkit-keyframes fadein { from { bottom: 0; opacity: 0; }  to { bottom: 30px; opacity: 1; } }
    @keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } }
    @-webkit-keyframes fadeout { from { bottom: 30px; opacity: 1; }  to { bottom: 0; opacity: 0; } }
    @keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }