.hide { display:none; }

.divSingleVideoContainer video {
    width: 100%;
    height: 100%;
    position: absolute;
}

.playback-container .divSingleVideoContainer video {
    height: 100%;
}

video .ignore-aspect-ratio {
    object-fit: fill;
}

.multiview video { background-color:#FFFFFF; }
        
.Html5Holder {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}

.Html5Control {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #062760;
    background-size: cover;
}

.html5Control {
    bottom: 25px;
}

.Html5Control.multiview {
    background-color:#FFFFFF;
    background-image: none;
}
        
.FlashHolder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.divMultiVideoContainer .divSingleVideoContainer {
    width:25%;
    height:400px;
    overflow:hidden;
    float:left;
    position:relative;
    border:1px solid green;
    box-sizing: border-box;
}

.divSingleVideoContainer {
    /* width: 400px;
    height: 300px;
    overflow:hidden;

    position:relative;
    font-size: 13px;
    line-height: 16px;*/
    overflow: hidden;
}
        
.divSingleVideoContainer .header {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    height: 20px;
    background-color: #FFFFFF;
    opacity: 0.8;
    z-index:10;
    border-bottom:2px solid green;
}
        
.divSingleVideoContainer .header .title {
    position: absolute;
    top: 0px;
    right: 20px;
    left: 0px;
    height: 20px;
    background-color: #FFFFFF;
}

    .divSingleVideoContainer .statistics {
        background-color: #000000;
        color: #FFFFFF;
        bottom: 25px;
        left: 0px;
        position: absolute;
        z-index: 20;
        padding: 15px;
        width: 100%;
        max-width: 300px;
        text-align: left;
        border-right: 1px solid #FFFFFF;
        border-top: 1px solid #FFFFFF;
        opacity: 0;
    }

    .divSingleVideoContainer .statistics.open {
        opacity: 0.8;
    }

    .divSingleVideoContainer .statistics h1 {
        letter-spacing: 1px;
        text-decoration: underline;
        text-transform: uppercase;
    }
        
.divSingleVideoContainer .header .close {
    position: absolute;
    top:0px;
    right:0px;
    width:20px;
    height:20px;
    background-color: #CCCCCC;
    text-align:center;
    font-weight: bold;
    color: red;
    cursor: pointer;
}
        
.divSingleVideoContainer .controls {
    position:absolute;
    bottom:-1px;
    left:0px;
    right:0px;
    height:25px;
    background-color:#000000;
    z-index:99;
    border-top:1px solid #FFFFFF;
    /*display: none;*/
}

    .divSingleVideoContainer.popupControls .controls {
        max-height: 0px;
        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    }
    .divSingleVideoContainer.popupControls:hover .controls {
        max-height: 25px;
    }

.html5Wrapper {
    bottom: 25px;
    overflow: hidden;
}

.html5Wrapper.playing {
    background: black;
}

.divSingleVideoContainer.popupControls .html5Wrapper {
    bottom: 0px;
}

.snapshot-button {
    display: none;
}

.divSingleVideoContainer .controls a {
    color:#FFFFFF;
}
        
.divSingleVideoContainer .controls div {
    float:left;
    margin-left: 10px;
}
        
.message-box {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:30px;
    color: #eee;
    background-color: #2f2d2d;
    z-index: 99;
    display: block;
    padding: 4px;
    box-sizing: border-box;
    border-bottom: 1px solid #FFFFFF;
    font-weight: bold;
    text-align: left;
    font: 14px 'TitilliumTextBold' , 'Lucida Sans' , 'Lucida Sans Unicode' , Tahoma, sans-serif;
    overflow: auto;
    word-break: break-all;
    line-height: 22px;
}

.message-box::-webkit-scrollbar {
    display: none;
}

.header-box {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:30px;
    color:#000000;
    z-index: 98;
    display: block;
    padding: 4px 0px 4px 4px;
    box-sizing: border-box;
    font-weight: bold;
    text-align: left;
    font: 14px 'TitilliumTextBold' , 'Lucida Sans' , 'Lucida Sans Unicode' , Tahoma, sans-serif;
}
.header-box div { float:right; }
.header-box > .header-button { margin-right: 0px; }
.header-box > .header-button ~ .header-button { margin-right: 5px; }

.header-box .title {
    float:left;
    color: #FFFFFF;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: 16px;
}

.multiview .header-box .title { color: #000000; }
        
.message-box.error {
    color:#FFFFFF;
    background-color:red;
}

.ptz-in-button 
{
    background:url('../images/video/zoom-in-up.png') no-repeat 0px 10px;
    padding:5px 10px;
}

.ptz-in-button:hover
{
    background:url('../images/video/zoom-in-down.png') no-repeat 0px 10px;
}

.ptz-out-button
{
    background:url('../images/video/zoom-out-up.png') no-repeat 0px 10px;
    padding:5px 10px;
}

.ptz-out-button:hover
{
    background:url('../images/video/zoom-out-down.png') no-repeat 0px 10px;
}

.ptz-reset-button
{
    background:url('../images/video/recycle-white.png') no-repeat 0px 10px;
    padding:5px 10px;
}

.ptz-reset-button:hover
{
    background:url('../images/video/recycle-grey.png') no-repeat 0px 10px;
}

.snapshot-button
{
    background:url('../images/video/camera-white.png') no-repeat 0px 10px;
    padding:5px 10px;
}

.snapshot-button:hover
{
    background:url('../images/video/camera-grey.png') no-repeat 0px 10px;
}

.statistics-button
{
    background:url('../images/video/chart-white.png') no-repeat 0px 10px;
    padding:5px 10px;
}

.statistics-button-data
{
    background:url('../images/video/chart-green.png') no-repeat 0px 10px;
    padding:5px 10px;
}

.statistics-button:hover,
.statistics-button-data:hover
{
    background:url('../images/video/chart-grey.png') no-repeat 0px 10px;
}

.settings-menu
{
    background:url('../images/video/setting-white.png') no-repeat 3px 5px;
    min-height: 25px;
    min-width: 25px;
    float: right;
}

.divSingleVideoContainer .maximise-button { background:url('../images/video/header-fullscreen.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }
.divSingleVideoContainer .minimise-button { background:url('../images/video/header-fullscreen-exit.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }
.divSingleVideoContainer .change-camera-button { background:url('../images/video/header-camera.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }
.divSingleVideoContainer .send-to-sitemonitor-button { background:url('../images/video/header-show-in-alarm.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }
.divSingleVideoContainer .send-to-wall-button { background:url('../images/video/header-split.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }
.divSingleVideoContainer .reload-button { background:url('../images/video/header-reload.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }
.divSingleVideoContainer .close-button { background:url('../images/video/header-icon-error.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }
.divSingleVideoContainer .add-link-button { background:url('../images/video/header-link-add.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }
.divSingleVideoContainer .remove-link-button { background:url('../images/video/camera-expand.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }
.divSingleVideoContainer .popout-button { background:url('../images/video/camera-expand.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none;}
.divSingleVideoContainer .raise-button { background:url('../images/video/header-alarm.png') no-repeat 0px 4px; padding:5px 10px; opacity: 0.4; display: none; }

.divSingleVideoContainer:hover .maximise-button, 
.divSingleVideoContainer:hover .minimise-button, 
.divSingleVideoContainer:hover .change-camera-button, 
.divSingleVideoContainer:hover .send-to-sitemonitor-button, 
.divSingleVideoContainer:hover .send-to-wall-button, 
.divSingleVideoContainer:hover .reload-button, 
.divSingleVideoContainer:hover .close-button, 
.divSingleVideoContainer:hover .add-link-button, 
.divSingleVideoContainer:hover .remove-link-button, 
.divSingleVideoContainer:hover .popout-button,
.divSingleVideoContainer:hover .raise-button {
    display: inline;
}

.maximise-button:hover, 
.minimise-button:hover, 
.change-camera-button:hover, 
.send-to-sitemonitor-button:hover, 
.send-to-wall-button:hover, 
.reload-button:hover, 
.close-button:hover, 
.add-link-button:hover, 
.remove-link-button:hover,
.popout-button:hover,
.raise-button:hover
{
    opacity: 1;   
}

.settings-menu li
{
    display:none;
    color:#FFFFFF;
}

.settings-menu li ul
{
    position:absolute;
    bottom:25px;
    right:0px;
    background-color: #000000;
    padding:5px;
    border: 1px solid #FFFFFF;
    border-right: none;
    opacity: 0.8;
}

.divSingleVideoContainer .controls div.ddlQualityHolder
{
    margin-left: 0px;
    padding: 0px;
    width: 100%;
    box-sizing: border-box;
}

.divSingleVideoContainer .controls div.ddlQualityHolder .ddlQuality { width:100%; }

.divSingleVideoContainer .controls div.ddlPresetsHolder
{
    margin-left: 0px;
    padding: 0px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px;
}

.divSingleVideoContainer .controls div.ddlSpeedHolder
{
    margin-left: 0px;
    padding: 0px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px;
}

.divSingleVideoContainer .controls div.ddlPresetsHolder .ddlPresets { width:100%; }

.settings-menu li ul li
{
    padding:0px;
    text-align:left;
    width: 150px;
}

.settings-menu:hover li { display:block; }

.ptz-overlay
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 25;
}

.ptz-direction {
    width: 33.3%;
    height: 33.3%;
    float: left;
}

.ptz-direction-digital {
    width: 33.3%;
    height: 33.3%;
    float: left;
}
    
.ptz-direction:hover {
    background-color: transparent;
    opacity: 0.8;
    cursor: pointer;
}

.ptz-direction-digital:hover {
    background-color: transparent;
    opacity: 0.8;
    cursor: pointer;
}

.ptz-direction:hover { background:url('../images/video/ptz_arrow_white.png') no-repeat center center; }
.ptz-direction-digital:hover { background:url('../images/video/ptz_arrow_blue.png') no-repeat center center; }

.ptz-up-right
{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ptz-right
{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ptz-down-right
{
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ptz-down
{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ptz-up-left
{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.ptz-left
{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.ptz-down-left
{
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.ptz-center:hover { background:none; }

/* Multiview */
#multiViewHeader
{
    width: 100%; 
    height: 30px; 
    position: relative;
}

#multiViewHeader .left
{
    width: 100px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    bottom:0px; 
    text-align: left;
}

#multiViewHeader .center
{
    position: absolute; 
    top: 0px; 
    left: 100px; 
    right:100px; 
    bottom:0px; 
    text-align: center;
}
 
#multiViewHeader .right
{
    width: 100px; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom:0px; 
    text-align: right;
}

#divBodyHolder.multiViewContainer
{
    /*padding: 20px;*/
}

.Statistics_dataIndicator
{
    width: 25px;
    height: 25px;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    top: 0px;
    right: 30px;
    position: absolute;
}

#divCamHolder
{
    background:url('../images/video/placeholder_blank.jpg') no-repeat 0px 0px;
    background-size: cover;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 100%;
  text-align: left;
  margin-bottom: 5px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.divSingleVideoContainer .controls div.slider {
    margin-left: 90px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  width: 60px;
  border-radius: 1px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 1px;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}



/*AUDIT*/
div.audit-container {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: "TitilliumTextBold", "Lucida Sans", "Lucida Sans Unicode", Tahoma, sans-serif;
    border: none;
}

    div.audit-container.dark {
        border: 4px solid #B84141;
    }

        div.audit-container.dark div.button-bar {
            width: 100%;
            height: 30px;
            background-color: #000000;
            border-bottom: 1px solid #FFFFFF;
            color: #FFFFFF;
            box-sizing: border-box;
        }

    div.audit-container div.button-bar {
        width: 100%;
        height: 30px;
        background-color: transparent;
        border-bottom: none;
        color: #000000;
        box-sizing: border-box;
    }

        div.audit-container div.button-bar div.clip-description {
            width: 60%;
            float: left;
            padding: 5px;
            text-align: left;
            box-sizing: border-box;
        }


            div.audit-container div.button-bar div.clip-description span.time {
                letter-spacing: -1px;
                font-size: 12px;
                margin-left: 5px;
            }

        div.audit-container div.button-bar div.clip-list {
            width: 40%;
            float: right;
            padding: 5px;
            text-align: right;
            box-sizing: border-box;
        }

            div.audit-container div.button-bar div.clip-list select {
                width: 100%;
            }

    div.audit-container div.media-holder {
        position: absolute;
        top: 31px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }

    div.audit-container div.playback-container {
        width: 100%;
        height: 100%;
        position: relative;
    }

input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
    height: 18px;
}

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
    }

    input[type=range]:focus {
        outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
    }

    input[type=range]::-ms-track {
        width: 100%;
        cursor: pointer;
        /* Hides the slider so custom styles can be added */
        background: transparent;
        border-color: transparent;
        color: transparent;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 1px solid #000000;
        height: 16px;
        width: 6px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
        margin-top: -6px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    }

    /* All the same stuff for Firefox */
    input[type=range]::-moz-range-thumb {
        border: 1px solid #000000;
        height: 16px;
        width: 6px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
    }

    /* All the same stuff for IE */
    input[type=range]::-ms-thumb {
        border: 1px solid #000000;
        height: 16px;
        width: 6px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
    }



    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: #FFFFFF;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #367ebd;
    }

    input[type=range]::-moz-range-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: #FFFFFF;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-ms-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background: #2a6495;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: #FFFFFF;
    }

    input[type=range]::-ms-fill-upper {
        background: #FFFFFF;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: #FFFFFF;
    }