.vms-speed-indicator-digit {
    text-align: center;
    width: 2em;
}

/*
    Buttons
*/
.vms-btn-play-from-time {
    background-repeat: no-repeat !important;
    width: 23px;
    height: 23px;
    border: none;
    margin: 2px;
    background: url(/app/images/monitoring/pane/normal/watch.png);
}

    .vms-btn-play-from-time:hover {
        background: url(/app/images/monitoring/pane/hover/watch.png);
        /*background-repeat: no-repeat;*/
    }

    .vms-btn-play-from-time.clicked {
        background: url(/app/images/monitoring/pane/clicked/watch.png);
        /*background-repeat: no-repeat;*/
    }


div[vms-timeline-command-button] {
    background-repeat: no-repeat;
    width: 23px;
    height: 23px;
    border: none;
    margin: 2px;
    float: left;
}

.vms-btn-slow-motion {
    background: url(/app/images/monitoring/pane/normal/snail.png);
}

    .vms-btn-slow-motion:hover {
        background: url(/app/images/monitoring/pane/hover/snail.png);
        background-repeat: no-repeat;
    }

/* start PAUSE */
.vms-btn-pause {
    background: url(/app/images/monitoring/pane/normal/pause.png);
}

    .vms-btn-pause.clicked, .vms-btn-pause.clicked:hover {
        background: url(/app/images/monitoring/pane/clicked/pause.png);
    }


    .vms-btn-pause:hover {
        background: url(/app/images/monitoring/pane/hover/pause.png);
        background-repeat: no-repeat;
    }

/* end PAUSE */

.vms-btn-playlive {
    background: url(/app/images/monitoring/pane/normal/live.png);
}

    .vms-btn-playlive:hover {
        background: url(/app/images/monitoring/pane/hover/live.png);
        background-repeat: no-repeat;
    }

.vms-btn-play-loop {
    background: url(/app/images/monitoring/pane/normal/loop.png);
}

    .vms-btn-play-loop:hover {
        background: url(/app/images/monitoring/pane/hover/loop.png);
        background-repeat: no-repeat;
    }

    .vms-btn-play-loop.clicked {
        background: url(/app/images/monitoring/pane/clicked/loop.png);
        background-repeat: no-repeat;
    }

/* start PLAY REVERSE */
.vms-btn-play-reverse {
    background: url(/app/images/monitoring/pane/normal/back.png);
}

.vms-btn-play-reverse.clicked {
    background: url(/app/images/monitoring/pane/clicked/back.png);
}

.vms-btn-play-reverse.clicked:hover {
    background: url(/app/images/monitoring/pane/clicked/back.png);
}

    .vms-btn-play-reverse:hover {
        background: url(/app/images/monitoring/pane/hover/back.png);
        background-repeat: no-repeat;
    }

/* end PLAY REVERSE */


.vms-btn-prevframe {
    background: url(/app/images/monitoring/pane/normal/prev-frame.png);
}

    .vms-btn-prevframe:hover {
        background: url(/app/images/monitoring/pane/hover/prev-frame.png);
        background-repeat: no-repeat;
    }


    .vms-btn-prevframe.clicked {
        background: url(/app/images/monitoring/pane/clicked/prev-frame.png);
        background-repeat: no-repeat;
    }

.vms-btn-nextframe {
    background: url(/app/images/monitoring/pane/normal/next-frame.png);
}

    .vms-btn-nextframe:hover {
        background: url(/app/images/monitoring/pane/hover/next-frame.png);
        background-repeat: no-repeat;
    }

    .vms-btn-nextframe.clicked {
        background: url(/app/images/monitoring/pane/clicked/next-frame.png);
        background-repeat: no-repeat;
    }

.vms-btn-playwithspeed-back {
    background: url(/app/images/monitoring/pane/normal/fast-bw.png);
}

    .vms-btn-playwithspeed-back:hover {
        background: url(/app/images/monitoring/pane/hover/fast-bw.png);
        background-repeat: no-repeat;
    }

    .vms-btn-playwithspeed-back.clicked {
        background: url(/app/images/monitoring/pane/clicked/fast-bw.png);
        background-repeat: no-repeat;
    }

.vms-btn-playwithspeed-forward {
    background: url(/app/images/monitoring/pane/normal/fast-fw.png);
}

    .vms-btn-playwithspeed-forward:hover {
        background: url(/app/images/monitoring/pane/hover/fast-fw.png);
        background-repeat: no-repeat;
    }

    .vms-btn-playwithspeed-forward.clicked {
        background: url(/app/images/monitoring/pane/clicked/fast-fw.png);
        background-repeat: no-repeat;
    }

/* start PLAY */
.vms-btn-play {
    background: url(/app/images/monitoring/pane/normal/play.png);
}

    .vms-btn-play:hover {
        background: url(/app/images/monitoring/pane/hover/play.png);
        background-repeat: no-repeat;
    }

    .vms-btn-play.clicked {
        background: url(/app/images/monitoring/pane/clicked/play.png);
        background-repeat: no-repeat;
    }

/* end PLAY */

/* slow motion button is dimmed by default */
/*.vms-slow-motion-indicator-disabled{
    display: inline-block;
}

.vms-slow-motion-indicator-enabled {
    display: none;
}*/

.vms-playback-speed-slow .vms-btn-slow-motion {
    background: url(/app/images/monitoring/pane/clicked/snail.png);
    background-repeat: no-repeat;
}


/* if playback isn't enabled don't show play from time and play reverse */
.vms-btn-play-from-time, .vms-btn-play-reverse {
    display: none;
}

.vms-timeline-tools-panel.vms-playback-enabled .vms-btn-play-from-time,
.vms-timeline-tools-panel.vms-playback-enabled .vms-btn-play-reverse {
    display: inline-block;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%% PLAY LIVE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* A default state is Live, so no specific class indicating the state is needed*/
.vms-timeline-tools-panel .vms-btn-pause {
    display: inline-block;
}

.vms-timeline-tools-panel .vms-btn-play-from-time,
.vms-timeline-tools-panel .vms-btn-play-loop,
.vms-timeline-tools-panel .vms-btn-play-reverse,
.vms-timeline-tools-panel .vms-btn-play,
.vms-timeline-tools-panel .vms-btn-playwithspeed-forward,
.vms-timeline-tools-panel .vms-btn-playwithspeed-back,
.vms-timeline-tools-panel .vms-btn-playlive,
.vms-timeline-tools-panel .vms-btn-prevframe,
.vms-timeline-tools-panel .vms-btn-nextframe,
.vms-timeline-tools-panel .vms-btn-slow-motion {
    display: none;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%% PLAY LIVE PAUSED %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-play-loop,
.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-prevframe,
.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-play-reverse,
.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-pause,
.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-play,
.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-nextframe,
.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-playlive {
    display: inline-block;
}

.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-slow-motion,
.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-playwithspeed-forward,
.vms-timeline-tools-panel.vms-timeline-paused .vms-btn-playwithspeed-back {
    display: none;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%% END PLAY LIVE PAUSED %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%% PLAY BACK (default playback state) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-slow-motion,
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-play-from-time,
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-play-loop,
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-playwithspeed-back,
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-play-reverse,
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-pause,
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-play,
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-playwithspeed-forward,
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-playlive {
    display: inline-block;
}

.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-prevframe,
.vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-nextframe {
    display: none;
}

.vms-resource-type-PlaybackVideoSource .vms-timeline-tools-panel.vms-timeline-state-playback .vms-btn-playlive {
    display: none;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%% PLAY BACK PAUSED %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-play-from-time,
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-play-loop,
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-prevframe,
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-play-reverse,
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-pause,
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-play,
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-nextframe,
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-playlive {
    display: inline-block;
}

.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-slow-motion,
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-playwithspeed-back,
.vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-playwithspeed-forward
 {
    display: none;
}

.vms-resource-type-PlaybackVideoSource .vms-timeline-tools-panel.vms-timeline-state-playback.vms-timeline-paused .vms-btn-playlive {
    display: none;
}