html, body {
    height: 100%;
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
}
body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
}
#content {
    position: relative;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto
}
.centered {
text-align:center;
}
canvas {
    padding: 0px;
    margin: 0px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.ui-slider-range {
    background: rgba(38,201,255,0.7);
}
h3 {padding-left:10px;}
.scrollDiv {
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.agentTable tr td:last-child {
    width: 1%;
    white-space: nowrap;
}
.renderEngine {
    border: solid 1px #ccc
}
body.modal-open {
    overflow: hidden;
}
.scrollDiv div button {
    margin: 1px;
    padding: 4px;
}
#snackbar {
    opacity: 0;
    visibility: hidden;
    text-align: center;
    background: rgb(6,6,6);
    border-radius: 0px;
    padding: 3px;
    position: absolute;
    cursor: pointer;
    transition: visibility 0s linear 0.2s, opacity 0.2s linear;
    content-visibility: auto;
}
#snackbar.show {
    opacity: 0.8;
    visibility: visible;
    transition: visibility 0s linear 0s, opacity 0.2s linear;
}
#alertcontainer {
    visibility: hidden;
    margin: auto;
    text-align: center;
    border-radius: 2px;
    padding: 8px;
    position: fixed;
    z-index: 2;
    top: -moz-calc(50% - 50px);
    top: -webkit-calc(50% - 50px);
    top: calc(50% - 50px);
    left: 0;
    right: 0;
    width: 300px;
    content-visibility: auto;
}
#alertcontainer.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
.active .dropdown-item {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}
.wordbreak {
    word-break: break-word;
}
canvas {
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.fa-xs {
    font-size: .75em !important;
}
.fa-sm {
    font-size: .875em !important;
}
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
#sidebar {
    position: absolute;
    z-index: 200;
    visibility: hidden;
    display: none;
    opacity: 0;
    right: 10px;
    transition: visibility 0s linear 0.2s, opacity 0.2s linear;
    height: auto;
    content-visibility: auto;
}
#sidebar-content {
    overflow-y: auto;
    overflow-x: hidden;
}
#sidebar-content button {
    margin-bottom: 3px;
}
#sidebar.active {
    margin-left: 0px;
    opacity: 1;
    visibility: visible;
    display:block;
    transition: visibility 0s linear 0s, opacity 0.2s linear;
}
#sidebar ul.components {
    padding: 0px 0px;
}
#sidebar ul li a {
    padding: 10px;
    display: block;
}
.sidebar-content {
    position:relative;
}
#sidebar ul li a {
    font-size: 0.8em;
}
#sidebar ul li a:hover {
    text-decoration: none;
}
.fa-stack[data-count]:after {
    position: absolute;
    right: 0%;
    top: 1%;
    content: attr(data-count);
    font-size: 60%;
    padding: .5em;
    border-radius: 999px;
    line-height: .6em;
    color: #fff;
    background: #3394FF;
    text-align: center;
    min-width: 1.5em;
    font-weight: bold;
}
.fa-stack.has-badge.hidden::after {
    content: none;
}
.fa-stack {
    vertical-align: top !important;
    height: auto !important;
    line-height: 1.5em !important;
}
.nav-link, .dropdown-item {
    cursor: pointer;
}
.viewoption {
    cursor: pointer;
    padding: 5px;
}
#editor {
    padding-left: 0 !important;
    content-visibility: auto;
}
.fixwidth {
    width: 1em !important;
}
/*bootstrap toggle*/
.btn-group-xs > .btn, .btn-xs {
    padding: .35rem .4rem .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem
}.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-1.25rem;margin-right:.35rem}.toggle{position:relative;overflow:hidden}.toggle.btn.btn-light,.toggle.btn.btn-outline-light{border-color:rgba(0,0,0,.15)}.toggle input[type=checkbox]{display:none}.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}.toggle-group label,.toggle-group span{cursor:pointer}.toggle.off .toggle-group{left:-100%}.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0;box-shadow:none}.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px;background-color:#fff}.toggle.btn-outline-primary .toggle-handle{background-color:var(--primary);border-color:var(--primary)}.toggle.btn-outline-secondary .toggle-handle{background-color:var(--secondary);border-color:var(--secondary)}.toggle.btn-outline-success .toggle-handle{background-color:var(--success);border-color:var(--success)}.toggle.btn-outline-danger .toggle-handle{background-color:var(--danger);border-color:var(--danger)}.toggle.btn-outline-warning .toggle-handle{background-color:var(--warning);border-color:var(--warning)}.toggle.btn-outline-info .toggle-handle{background-color:var(--info);border-color:var(--info)}.toggle.btn-outline-light .toggle-handle{background-color:var(--light);border-color:var(--light)}.toggle.btn-outline-dark .toggle-handle{background-color:var(--dark);border-color:var(--dark)}.toggle[class*=btn-outline]:hover .toggle-handle{background-color:var(--light);opacity:.5}.toggle.btn{min-width:3.7rem;min-height:2.15rem}.toggle-on.btn{padding-right:1.5rem}.toggle-off.btn{padding-left:1.5rem}.toggle.btn-lg{min-width:5rem;min-height:2.815rem}.toggle-on.btn-lg{padding-right:2rem}.toggle-off.btn-lg{padding-left:2rem}.toggle-handle.btn-lg{width:2.5rem}.toggle.btn-sm{min-width:3.125rem;min-height:1.938rem}.toggle-on.btn-sm{padding-right:1rem}.toggle-off.btn-sm{padding-left:1rem}.toggle.btn-xs{min-width:2.19rem;min-height:1.375rem}.toggle-on.btn-xs{padding-right:.8rem}.toggle-off.btn-xs{padding-left:.8rem}

.zoneControls, .detectorControls {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: -5px
}
.dropdown-menu {
    max-height: calc(100vh - 20px);
    overflow-y: auto;
}
.alertimage {
    margin-right:10px;
    float:left;
}
.rtl-align {
    text-align:right !important;
}
.connectedSortable {
    background-color: #666666;
    cursor:pointer;
}
.drawAttention {
    animation-name: highlight;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.drawAttention a i {
    color: #ffffff !important;
}

@keyframes highlight {
    0% {
        background: #ff0000;
    }

    50% {
        background: #B20000;
    }

    100% {
        background: #ff0000;
    }
}

.view-preview img {
    margin-right:10px;
}
.menu-border-right {
    border-right: 2px solid;
    color: #666666;
    padding-right: 10px;
    margin-right: 10px;
}
#navPlayback {
    position: absolute;
    opacity: 0.6;
}