body {
    background: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: none;
}

@font-face {
    font-family: 'Digital-7';
    src: url('../fonts/digital-7/digital-7.ttf'); /* IE9 Compat Modes */
    src: url('../fonts/digital-7/digital-7.ttf') format('truetype');
}

input[type=submit] {
    margin: 0px 0px 0px 2px;
    left: 2px;
    border: none;
    text-decoration: none;
    width: 144px;
    height: 81px;
    margin: 2px 2px 5px 2px;
    cursor: pointer;
}

.PresetsView_Description {
    position: relative;
    float: right;
    margin: 0px 0px -12px 0px;
    top: -12px;
}

.presetsDiv {
    width: 153px;
    height: 108px;
}

img.PresetsView {
    width: 144px;
    height: 81px;
    margin: 2px 2px 2px 4px;
    cursor: pointer;
}

tr, td {
    text-align: left;
    padding: 0px;
    font-size: 1.2em;
    left: 0px;
}

td {
    width: 10px;
}

/*..........Scenariusze...........*/

.CamPresets::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.CamPresets::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px;
    border-radius: 10px;
}

.overlay::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

.overlay::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px;
    border-radius: 10px;
}

.previews::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

.previews::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px;
    border-radius: 10px;
}

#script-list::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

#script-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px;
    border-radius: 10px;
}

#script-list-next::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

#script-list-next::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px;
    border-radius: 10px;
}

.playoutInPause {
    animation: blinkPlay .5s step-end infinite alternate;
}

#seperateLine {
    margin-top: 55px;
    height: 1px;
    width: 100%;
    display: inline-block;
}

.VmixControlsOverlay {
    height: 195px;
    width: 280px;
    display: inline-block;
    margin: 0px 5px 0px 0px;
}

#VMIXOverlay {
    margin: 0px 0px 0px -8px;
}

.Cam1Presets {
    position: absolute;
    left: 5px;
    top: 340px;
    max-width: 310px;
    height: 760px;
    max-height: 640px;
    margin-left: 0px;
    margin-top: 0px;
}

.stopPTZButton {
    width: 100%;
}

.videos-container {
    position: absolute;
    top: 0;
    left: 0;
}

option, optgroup {
    -webkit-appearance: none;
}

.resetSignalActive
{
    animation: blinkNextOutset .5s step-end infinite alternate;

}

.overlayButton:hover,
.overlayButton2:hover,
#muteStream:hover,
.selectTransition:hover {
    cursor: pointer;
}

.submitButtons {
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;
}

/*volume channel 1*/

#vol-controlI1P1 {
    -webkit-appearance: none;
}

#vol-controlI1P1:focus {
    outline: none;
}

#vol-controlI1P1::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: rgba(103, 35, 47, 0);

}

#vol-controlI1P1::-webkit-slider-thumb {
    height: 18px;
    width: 12px;
    border-radius: 0px;
    background: #20a400;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px;
}

#vol-controlI1P1:focus::-webkit-slider-runnable-track {
    background: rgba(211, 211, 211, 1);
}

#vol-controlI1P1::-moz-range-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: rgba(211, 211, 211, 1);

}

#vol-controlI1P1::-moz-range-thumb {
    height: 18px;
    width: 12px;
    border-radius: 0px;
    background: #20a400;
    cursor: pointer;
}

#vol-controlI1P1::-ms-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

#vol-controlI1P1::-ms-fill-lower {
    background: rgba(88, 30, 40, 0);
    border: 0.7px solid #20a400;
    border-radius: 12.4px;
}

#vol-controlI1P1::-ms-fill-upper {
    background: rgba(103, 35, 47, 0);
    border: 0.7px solid #20a400;
    border-radius: 12.4px;
}

#vol-controlI1P1::-ms-thumb {
    border: 1px solid #000000;
    height: 18px;
    width: 12px;
    border-radius: 0px;
    background: #20a400;
    cursor: pointer;
}

#vol-controlI1P1:focus::-ms-fill-lower {
    background: rgba(103, 35, 47, 0);
}

#vol-controlI1P1:focus::-ms-fill-upper {
    background: rgba(118, 40, 54, 0);
}

#vol-controlI1P1::-webkit-slider-thumb:hover {
    background: #ccc31d;
}

/*volume channel 2*/

#vol-controlI1P2 {
    -webkit-appearance: none;
}

#vol-controlI1P2:focus {
    outline: none;
}

#vol-controlI1P2::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: rgba(103, 35, 47, 0);

}

#vol-controlI1P2::-webkit-slider-thumb {
    height: 18px;
    width: 12px;
    border-radius: 0px;
    background: #d90d1f;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px;
}

#vol-controlI1P2:focus::-webkit-slider-runnable-track {
    background: rgba(211, 211, 211, 1);
}

#vol-controlI1P2::-moz-range-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: rgba(211, 211, 211, 1);

}

#vol-controlI1P2::-moz-range-thumb {
    height: 18px;
    width: 12px;
    border-radius: 0px;
    background: #d90d1f;
    cursor: pointer;
}

#vol-controlI1P2::-ms-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

#vol-controlI1P2::-ms-fill-lower {
    background: rgba(88, 30, 40, 0);
    border: 0.7px solid #d90d1f;
    border-radius: 12.4px;
}

#vol-controlI1P2::-ms-fill-upper {
    background: rgba(103, 35, 47, 0);
    border: 0.7px solid #d90d1f;
    border-radius: 12.4px;
}

#vol-controlI1P2::-ms-thumb {
    border: 1px solid #000000;
    height: 18px;
    width: 12px;
    border-radius: 0px;
    background: #d90d1f;
    cursor: pointer;
}

#vol-controlI1P2:focus::-ms-fill-lower {
    background: rgba(103, 35, 47, 0);
}

#vol-controlI1P2:focus::-ms-fill-upper {
    background: rgba(118, 40, 54, 0);
}

#vol-controlI1P2::-webkit-slider-thumb:hover {
    background: #ccc31d;
}

#muteStream {
    position: absolute;
    top: 193px;
    left: 1860px;
    width: 30px;
    height: 30px;
    background: url('../images/speaker_on.png') no-repeat 0px 0px;
    background-size: 30px 30px;
}

.NextScriptActive,
.set-cam-config-active-button{
    animation: blinkNext .5s step-end infinite alternate;
}

#tooltip_img {
    height: 150px;
}

#tooltip_p {
    font-size: 17px;
    height: 10px;
    margin-top: -2px;
}

.locked {
    opacity: 0.2;
    pointer-events: none;
}

.locked-full-auto {
    opacity: 0.6;
    pointer-events: none;
}

.locked-remote-control {
    opacity: 0.8;
    pointer-events: none;
}

.locked-correct-presets {
    opacity: 0.8;
    pointer-events: none;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.savePreset {
    position: absolute;
    top: 326px;
    /*4 cams*/
    /*cam1*/
    /*left: 316px;*/
    /*cam2*/
    /*left: 5px;*/
    /*cam3*/
    /*left: 920px;*/
    /*cam4*/
    /*left: 620px;*/

    /*5 cams*/
    /*cam1*/
    /*left: 317px;*/
    /*cam2*/
    /*left: 620px;*/
    /*cam3*/
    /*left: 310px;*/
    /*cam4*/
    /*left: 612px;*/
    /*cam5*/
    /*left: 916px;*/
    width: 258px;
    height: 360px;
    border-radius: 5px;
    font-size: 18px;
    z-index: 999999;
    display: none;
}

.setCamConfigContainer {
    position: absolute;
    top: 326px;
    /*4 cams*/
    /*cam1*/
    /*left: 316px;*/
    /*cam2*/
    /*left: 5px;*/
    /*cam3*/
    /*left: 920px;*/
    /*cam4*/
    /*left: 620px;*/

    /*5 cams*/
    /*cam1*/
    /*left: 317px;*/
    /*cam2*/
    /*left: 620px;*/
    /*cam3*/
    /*left: 310px;*/
    /*cam4*/
    /*left: 612px;*/
    /*cam5*/
    left: 916px;
    width: 300px;
    height: 200px;
    border-radius: 5px;
    font-size: 18px;
    z-index: 2000;
    display: block;
}

.deleteConfirmation {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 256px;
    height: 355px;
    border-radius: 5px;
    font-size: 15px;
    z-index: 2000;
    display: none;
}

#confirmationText {
    font-size: 23px;
    text-align: center;
}

#confirmationTextcam {
    font-size: 23px;
    line-height: 25px;
    text-align: center;
    margin-top: -10px;
}

#confirmationTextpreset {
    font-size: 23px;
    line-height: 25px;
    text-align: center;
    margin-top: -10px;
}

.confirmDelete {
    top: 50px;
    width: inherit;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-top: 13px;
}

.calcelDelete {
    top: 50px;
    width: inherit;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
}

.saveConfirmation {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 256px;
    height: 355px;
    border-radius: 5px;
    font-size: 15px;
    z-index: 2000;
    display: none;
}

#saveconfirmationText {
    font-size: 23px;
    text-align: center;
}

#saveconfirmationTextcam {
    font-size: 23px;
    line-height: 25px;
    text-align: center;
    margin-top: -10px;
}

#saveconfirmationTextpreset {
    font-size: 23px;
    line-height: 15px;
    text-align: center;
    margin-top: -10px;
}

.confirmSave {
    top: 00px;
    width: inherit;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-top: 0px;
}

.calcelSave {
    top: 50px;
    width: inherit;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-top: 13px;
}
#timer_real{
	color: green;
}
#savePresetCamName{
    display: block;
    background-color: red;
    width: 258px;
    height: 30px;
    cursor: move;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
}

.savePreset img {
    position: absolute;
    top: 30px;
    left: 2px;
    float: left;
    width: 254px;
    /*border: solid 3px #670041;*/
}

#presetTitle {
    margin: 143px 0 0 4px;
    font-size: 15px;
    line-height: 25px;
    display: block;
    text-align: left;
    width: 256px;
}

#presetTooltip {
    margin: 7px 0 0 4px;
    font-size: 15px;
    line-height: 25px;
    display: block;
    text-align: left;
    width: 70px;
}

#presetDescription {
    margin: -23px 0 0 74px;
    font-size: 15px;
    line-height: 25px;
    display: block;
    text-align: left;
    width: 183px;
    border: none;
}

#presetTooltipContent {
    margin: -25px 0 0 74px;
    font-size: 15px;
    line-height: 25px;
    display: block;
    text-align: left;
    width: 183px;
    border: none;
}

#camNumber,
#presNumber {
    position: absolute;
    top: 223px;
    left: 4px;
    display: block;
    float: left;
}

#camNumber {
    font-size: 15px;
    line-height: 25px;
    text-align: left;
    width: 120px;

}

#presNumber {
    font-size: 15px;
    line-height: 25px;
    text-align: left;
    width: 120px;
    margin-top: 38px;
}

.pastePresetButton,
.copyPresetButton {
    position: relative;
    float: right;
    top: 50px;
    width: 47px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-top: -43px;
    margin-right: 63px;
}

.copyPresetButton {
    margin-right: 118px;
}

#tooltipCheckbox,
#tooltipPhotoCheckbox {
    width: 20px;
    height: 20px;
}

#tooltipSetting {
    margin-top: 4px;
    margin-left: 4px;
}

#edit-checkbox {
    position: relative;
    width: 230px;
    height: 20px;
    font-size: 13px;
    text-align: right;
    display: inline-block;
    float: right;
    margin: 50px 0px 0 45px;
}

#edit-checkbox input {
    width: 18px;
    height: 18px;
}
.edit-all-check {
    position: absolute;
    background-color: #0c6e97;
    top: 5px;
    left: -15px;
    width: 70px;
    height: 20px;
    border-radius: 5px;
    text-align: center;
    line-height: 20px;
    display: block;
    cursor: pointer;
}

.savePresetButton,
.cancelPresetButton,
.deletePresetButton {
    position: relative;
    width: 77px;
    height: 30px;
    float: left;
    text-align: center;
    font-size: 11px;
    line-height: 30px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin: 10px 5px 0 3px;
}

#move-presets {
    position: absolute;
    top: 239px;
    left: 201px;
    width: 50px;
    height: 50px;
    display: none;
}

#move-preset-up {
    height: 19px;
    border-radius: 5px;

}

#move-preset-down {
    height: 19px;
    border-radius: 5px;
}

.move-preset {
    cursor: pointer;
    margin-bottom: 3px;
    font-size: 10px;
    text-align: center;
    line-height: 19px;

}

.progress-icon {
    position: absolute;
    top: 30px;
    left: 62px;
    background: url('../images/loading.gif') no-repeat 0 0;
    background-size: 135px 135px;
    height: 135px;
    width: 135px;
    opacity: 0.5;
    display: none;
}

.blinking-frame {
    animation: blinkred-frame .5s step-end infinite alternate;
}

.signal-lamp {
    position: absolute;
    top: 3px;
    right: 0;
    width: 23px;
    height: 23px;
    display: inline-block;
    border-radius: 40px;
}

.signal-lamp-for-cam {
    position: absolute;
    top: 5px;
    margin-left: 10px;
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 40px;
}

#camera-bar {
    position: absolute;
    top: 193px;
    left: 0;
    width: 1898px;
    height: 33px;
}

.rec-str-ext-buttons {
    display: inline-block;
    width: 26px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    margin-right: 1px;
    cursor: pointer;
    text-align: center;
}

.rec-str-ext-buttons2 {
    display: inline-block;
    width: 26px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    margin-right: 1px;
    text-align: center;
    cursor: not-allowed;
}

.add-key {
    position: absolute;
    top:400px;
    left: 580px;
    height: 170px;
    width: 700px;
    display: block;
    z-index: 2000;
    border-radius: 5px;
    background-color: red;
    z-index: 9999999;

}
.enter-email{
    position: absolute;
    top:0px;
    left: 0px;
    height: 170px;
    width: 700px;
    display: block;
    z-index: 2000;
    border-radius: 5px;
    background-color: red;
    z-index: 9999999;
}
.add-key-input{
    margin-left: 18px;
    font-size: 20px;
    font-weight: bold;
    width: 95px;
    height: 40px;
    text-align: center;
}
.add-email-input{
    margin-left:140px;
    margin-top: 60px;
    font-size: 20px;
    font-weight: bold;
    width: 400px;
    height: 40px;
    text-align: center;
}
#add-key-text{
    font-size: 20px;
    text-align: center;
    width: 700px;
}

.submit-key{
    position: absolute;
    width: 120px;
    height: 30px;
    display: block;
    top: 130px;
    left: 290px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    cursor: pointer;
    background-color: #20a400;
}
.save-email{
    position: absolute;
    width: 120px;
    height: 30px;
    display: block;
    top: 130px;
    left: 350px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    cursor: pointer;
    background-color: #20a400;
    opacity: 1;
}
.save-email-not-active{
    pointer-events: none;
    background-color: #0c6e97;
    opacity: 0.8;
}

.exit-email{
    position: absolute;
    width: 120px;
    height: 30px;
    display: block;
    top: 130px;
    left: 200px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    cursor: pointer;
    background-color: #20a400;
}
.demo-key{
    position: absolute;
    width: 90px;
    height: 30px;
    display: block;
    top: 130px;
    left: 425px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    cursor: pointer;
    background-color: #20a400;
}
.key-eror{
    position: absolute;
    width: 700px;
    height: 20px;
    display: block;
    top: 105px;
    left: 0;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
}
.product-info-button{
    position: absolute;
    width: 180px;
    height: 30px;
    display: block;
    top: 130px;
    left: 100px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    cursor: pointer;
    background-color: #20a400;
}
.demo-time{
    position: absolute;
    top: 148px;
    left: 1400px;
    padding: 0;
    width: 500px;
    height: 100px;
    letter-spacing: -1px;
    background: rgba(103, 0, 65, 0.9);
    color: red;
    z-index: 8888888;
}
.demo-time-2{
    font-family: Digital-7;
    font-size: 60px;
    text-align: center;
}
.buy-licence{
    position: absolute;
    top: 60px;
    left: 10px;
    width: 200px;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    background-color: #20a400;
    cursor: pointer;
    color: black;
}

.show-key-input{
    position: absolute;
    top: 60px;
    right: 10px;
    width: 200px;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    background-color: #20a400;
    cursor: pointer;
    color: black;
}

.not-allowed {
    cursor: not-allowed;
}

.alert-box {
    position: absolute;
    top: 300px;
    left: 700px;
    display: none;
    width: 400px;
    height: 200px;
    border-radius: 5px;
    z-index: 9999999;
    opacity: 0.9;
    cursor: pointer;
    background-color: #f40001;
    animation: blinkNextOutset .4s step-end infinite alternate;
}

#alert {
    margin-top: 15px;
    position: relative;
    font-size: 40px;
    width: 395px;
    text-align: center;
}

#alert2 {
    margin-top: -30px;
    position: relative;
    font-size: 40px;
    width: 395px;
    text-align: center;
}

#name_file{
	padding-left: 50px;
    font-weight: bold;
    position: absolute;
    right: 40px;
    color: #fff;
    top: 30px;
    font-size: 10px;
}
#name_element{
	padding-left: 50px;
    font-weight: bold;
    position: absolute;
    right: 40px;
    color: red;
    top: 40px;
    font-size: 18px;
}
.remote-control {
    position: absolute;
    top: 230px;
    left: auto;
    right: 350px;
    display: none;
    width: 30vw;
    min-width: 570px;
    height: 70vh;
    border-radius: 5px;
    z-index: 9999999;
    opacity: 0.9;
    cursor: pointer;
    background-color: #000;
    padding: 10px;
    border: 5px solid #888;
    /* animation: blinkred-frame .4s step-end infinite alternate; */
}
.cols{
	display: flex;
	flex-direction: row;
	height: 100%;
}
.allow-control-remote{
    width: 280px;
    height: 20px;
    margin: -0 0 0 10px;
    display: inline-block;
    background-color: #f40001;
    text-align: center;
    cursor: pointer;
}
.allow-control-remote:hover{
    background-color: #703097;
}

.allow-control-remote:active{
    background-color: #f98f00;
}
#remote {
    margin-top: 8px;
    position: relative;
    font-size: 30px;
    width: 300px;
    text-align: center;
}

#remote2 {
    margin-top: -35px;
    position: relative;
    font-size: 25px;
    width: 300px;
    text-align: center;
}

.connected-users {
    position: absolute;
    top: 290px;
    right: 20px;
    display: none;
    width: 360px;
    height: 200px;
    border-radius: 5px;
    z-index: 9999999;
    opacity: 0.9;
    cursor: pointer;
    background-color: #f40001;
}

.camera-config {
    position: absolute;
    top: 326px;
    left: 916px;
    width: 258px;
    border-radius: 5px;
    font-size: 18px;
    z-index: 99999999;
    display: none;
}


.config-slider-container-onvif {
    display: block;
    width: 255px;
    height: 30px;

    margin-bottom: 2px;
    -webkit-box-shadow: inset 0px 0px 0px 1px #a10069;
    -moz-box-shadow: inset 0px 0px 0px 1px #a10069;
    box-shadow: inset 0px 0px 0px 1px #a10069;
    background-size: 236px 30px;
}

.config-slider-name {
    width: 44px;
    float: left;
    font-size: 10px;
    margin-top: 7px;
}

.config-sider-value {
    width: 25px;
    color: #31db2a;
    font-size: 10px;
    float: left;
    margin-top: 7px;
}
.config-slider {
    width:120px;
    position: absolute;
    right: 26px;
    top:4px;
}
.config-slider-inactive-value{
    opacity: 0.5;
    color: #ff0000;
}



.config-slider-down-button{
    display: block;
    background-color: red;
    width: 20px;
    height: 20px;
    float: left;
    margin-left: 1px;
    margin-top: 4px;
    background: url('../images/minus.png') no-repeat 0px 0px;
    background-size: 20px 20px;
    cursor: pointer;
}


.config-slider-up-button{
    position: absolute;
    right: 3px;
    top:4px;
    display: block;
    width: 20px;
    height: 20px;
    background: url('../images/plus.png') no-repeat 0px 0px;
    background-size: 20px 20px;
    cursor: pointer;
}


.camera-config-cam-name{
    width: 258px;
    height: 20px;
    text-align: center;
    line-height: 10px;
    font-size: 14px;
    padding-top: 10px;
    background-color: #a10069;
    display: block;
    cursor: move;
}
.camera-address-information{
    width: 258px;
    height: 12px;
    text-align: center;
    line-height: 3px;
    font-size: 12px;
    padding-top: 10px;
    margin-top: 2px;
    background-color: #a10069;
    display: block;
    cursor: move;
}

.exit-cam-config {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background: url('../images/x.png') no-repeat 0px 0px;
    background-size: 22px 22px;
    cursor: pointer;
    display: block;
}

.standby-button{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: block;
}

.standby-button-off{
    background: url('../images/cam-off.png') no-repeat 0px 0px;
    background-size: 30px 30px;
}

.standby-button-on{

    background: url('../images/cam-on.png') no-repeat 0px 0px;
    background-size: 30px 30px;
}

.cam-toggle-confirm-container{
    position: absolute;
    left: 5px;
    top:3px;
    display: none;
    width: 251px;
    height: 140px;
    background-color: #bfb900;
    z-index: 1000000;
}
#confirmCamToggleText{
    width: 251px;
    text-align: center;
    line-height: 30px;
    height: 30px;
    color: red;
}

#confirmCamToggle{
    position: absolute;
    top: 60px;
    left: 50px;
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    display: block;
    cursor: pointer;
    background-color: #20a400;
}

#cancelCamToggle{
    position: absolute;
    top: 60px;
    right: 50px;
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    display: block;
    cursor: pointer;
    background-color: #f00038;
}


.exit-cam-config-RS232 {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background: url('../images/x.png') no-repeat 0px 0px;
    background-size: 22px 22px;
    cursor: pointer;
    display: block;
}
.ae-container{
    position: relative;
    display: block;
    margin-top: 5px;
    width: 256px;
    height: 215px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 2px;
    -webkit-box-shadow: inset 0px 0px 0px 2px #a10069;
    -moz-box-shadow: inset 0px 0px 0px 2px #a10069;
    box-shadow: inset 0px 0px 0px 2px #a10069;
}

.ae-button{
    height: 30px;
    width: 80px;
    display: block;
    background-color: #20a400;
    font-size: 10px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.ae-shutter-priority{
    position: absolute;
    left:2px;
    top: 5px;
}
.ae-iris-priority{
    position: absolute;
    left: 89px;
    top: 5px;

}
.ae-bright{
    position: absolute;
    right:2px;
    top: 5px;
}

.ae-auto{
    position: absolute;
    top:40px;
    left:2px;
}
.ae-manual{
    position: absolute;
    top:40px;
    left: 89px;
}

.ae-blc{
    position: absolute;
    top:40px;
    right:2px;
    font-size: 10px;
    background-color: #000ade;
}

.api-blc{
    position: absolute;
    top:10px;
    left:2px;
    font-size: 10px;
    background-color: #000ade;
}

.wb-container{
    position: relative;
    display: block;
    margin-top: 5px;
    width: 256px;
    height: 137px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 2px;
    -webkit-box-shadow: inset 0px 0px 0px 2px #a10069;
    -moz-box-shadow: inset 0px 0px 0px 2px #a10069;
    box-shadow: inset 0px 0px 0px 2px #a10069;
}

.speed-container{
    position: relative;
    display: block;
    margin-top: 5px;
    width: 256px;
    height: 32px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 2px;
    -webkit-box-shadow: inset 0px 0px 0px 2px #a10069;
    -moz-box-shadow: inset 0px 0px 0px 2px #a10069;
    box-shadow: inset 0px 0px 0px 2px #a10069;
}

.wb-button{
    height: 30px;
    width: 80px;
    display: block;
    background-color: #20a400;
    font-size: 10px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.wb-indoor{
    position: absolute;
    left:2px;
    top: 5px;
}
.wb-outdoor{
    position: absolute;
    left: 87px;
    top: 5px;

}
.wb-one-push{
    position: absolute;
    right:2px;
    top: 5px;
}
.wb-auto{
    position: absolute;
    top:40px;
    left:2px;
}
.wb-manual{
    position: absolute;
    top: 40px;
    left: 87px;
}
.wb-preset-trigget{
    position: absolute;
    top:40px;
    right:2px;
}
.r-gain-slider{
    position: absolute;
    top: 75px

}
.b-gain-slider{
    position: absolute;
    top:110px;
}

.preset-speed-slider{
    position: absolute;
    top:35px;
}

.ae-shutter-slider{
    position: absolute;
    top:75px;

}
.ae-iris-slider{
    position: absolute;
    top:110px;

}
.ae-gain-slider{
    position: absolute;
    top:145px;

}
.ae-bright-slider{
    position: absolute;
    top:180px;
}

.blc-on{
    background-color: #ff0012;
    animation: blinkPlay .5s step-end infinite alternate;
}

.pan-speed-slider{
    position: absolute;
    top:0px;
}

.tilt-speed-slider{
    position: absolute;
    top:31px;
}

.zoom-speed-slider{
    position: absolute;
    top:62px;
}
.ptz-speed-container{
    position: relative;
    display: block;
    margin-top: 10px;
    width: 256px;
    height: 90px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 2px;
    -webkit-box-shadow: inset 0px 0px 0px 2px #a10069;
    -moz-box-shadow: inset 0px 0px 0px 2px #a10069;
    box-shadow: inset 0px 0px 0px 2px #a10069;
}
.focus-container{
    position: relative;
    display: block;
    margin-top: 10px;
    width: 256px;
    height: 70px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 2px;
    -webkit-box-shadow: inset 0px 0px 0px 2px #a10069;
    -moz-box-shadow: inset 0px 0px 0px 2px #a10069;
    box-shadow: inset 0px 0px 0px 2px #a10069;
}
.brightnes-container{
    position: relative;
    display: block;
    margin-top: 10px;
    width: 300px;
    height: 50px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 2px;
    -webkit-box-shadow: inset 0px 0px 0px 2px #a10069;
    -moz-box-shadow: inset 0px 0px 0px 2px #a10069;
    box-shadow: inset 0px 0px 0px 2px #a10069;
}
.focus-button{
    height: 30px;
    width: 80px;
    display: block;
    background-color: #20a400;
    font-size: 10px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}



.osd-menu-button{
    height: 30px;
    width: 80px;
    display: block;
    font-size: 10px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}
.osd-menu-button-on{
    background-color: #ff0012;
    animation: blinkPlay .5s step-end infinite alternate;

}

.osd-menu-button-off{
    background-color: #000ade;
}

.osd-menu-button-off-confirm{
    background-color: #decd00;
    animation: blinkred .5s step-end infinite alternate;

}

.focus-near{
    position: absolute;
    right:2px;
    top: 5px;
}
.focus-far{
    position: absolute;
    left:2px;
    top: 5px;
}
.focus-one-push-trigger{
    position: absolute;
    left: 87px;
    top: 5px;
}
.focus-auto{
    position: absolute;
    top:40px;
    left: 2px;
}
.focus-manual{
    position: absolute;
    top: 40px;
    left: 89px;
}


.api-focus-near{
    position: absolute;
    right:2px;
    top: 5px;
}
.api-focus-far{
    position: absolute;
    left:2px;
    top: 5px;
}

.api-focus-auto{
    position: absolute;
    top:40px;
    left: 2px;
}
.api-focus-manual{
    position: absolute;
    top:5px;
    left: 89px;
}


.osd-menu-button{
    position: absolute;
    top:40px;
    right: 2px;
}

.camera-config-locked-mask{
    position: absolute;
    top:30px;
    display: none;
    width: 256px;
    height: 600px;
    z-index: 999999;
    opacity: 0.5;
    background-color: #8e908c;
}

.locked-focus{
    opacity: 0.8;
    pointer-events: none;
    background-color: #af000a;
}
.locked-focus-active{
    opacity: 0.8;
    pointer-events: none;
    background-color: #ff000a;
    -webkit-box-shadow: inset 0px 0px 0px 6px #ccc31d;
    -moz-box-shadow: inset 0px 0px 0px 6px #ccc31d;
    box-shadow: inset 0px 0px 0px 6px #ccc31d;
}

.locked-wb{
    opacity: 0.8;
    pointer-events: none;
    background-color: #af000a;
}
.locked-wb-active{
    opacity: 0.8;
    pointer-events: none;
    background-color: #ff000a;
    -webkit-box-shadow: inset 0px 0px 0px 6px #ccc31d;
    -moz-box-shadow: inset 0px 0px 0px 6px #ccc31d;
    box-shadow: inset 0px 0px 0px 6px #ccc31d;
}
.locked-ae{
    opacity: 0.8;
    pointer-events: none;
    background-color: #af000a;
}

.locked-ae-active{
    opacity: 0.8;
    pointer-events: none;
    background-color: #ff000a;
    -webkit-box-shadow: inset 0px 0px 0px 6px #ccc31d;
    -moz-box-shadow: inset 0px 0px 0px 6px #ccc31d;
    box-shadow: inset 0px 0px 0px 6px #ccc31d;
}

.locked-slider{
    opacity: 0.8;
    pointer-events: none;
    background-color: #4f4e50;
}

.hide-config-preset{
    opacity: 0.8;
    pointer-events: none;
    background-color: #4f4e50;
}

.disable-config-element{
    opacity: 0.8;
    pointer-events: none;
    background-color: #b1001b;
}

.controll-locked{
   pointer-events: none;
   opacity: 0.8;
}

.DivCam_JOY{
    z-index: 999999;
    -webkit-box-shadow: inset 0px 0px 0px 3px #009704;
    -moz-box-shadow: inset 0px 0px 0px 3px #009704;
    box-shadow: inset 0px 0px 0px 3px #009704;
}

.DivCam_KEYBOARD_BLINK{
    z-index: 999999;
    animation: blink_keyboard_frame .5s step-end infinite alternate;
}

.DivCam_KEYBOARD{
    z-index: 999999;
    -webkit-box-shadow:inset 0px 0px 0px 3px #1200ff;
    -moz-box-shadow:inset 0px 0px 0px 3px #1200ff;
    box-shadow:inset 0px 0px 0px 3px #1200ff;
}



#script-list li .timer{
	position: absolute;
	left: 0;
	top: 2px;
}
#script-list li .action_time{
	position: absolute;
	right: 15px;
	top: 2px;
	background: #eee;
	color: #000;
}
#remoteControl #script-list li,
#remoteControl #script-list-next li{
    padding: 2px;
    width: 440px;
    padding-left: 90px;
    padding-right: 45px;
    position: relative;
    margin-left:0;
}
#remoteControl #script_popup{
	height: 90%;
	display: flex;
	flex-direction: row;
}
#remoteControl #script-list,
#remoteControl #script-list-next{
    margin-left: 0px;
    margin-top: 2px;
    text-align: left;
    height: auto;
    width: auto;
    overflow: auto;
    font-size: 12px;
    padding: 0;
}
.clock_digit{
    position: static;
    width: 111px;
    margin-top: -3px;
    padding: 0;
    font-family: Digital-7;
    font-size: 36px;
    letter-spacing: -1px;
}
#remoteControl #script-list li[type=Delay]{
	color: #FF4444;
}

#remoteControl #script-list li[type=MoveStop]{
	color: 1199FF;
}

#remoteControl #script-list li[type=Move]{
	color: AA44FF;
}

#remoteControl #script-list li[type=Camera]{
	color: #7777FF;
}

#remoteControl #script-list li[type=OverlayInputAllOff]{
	color: silver;
}

#remoteControl #script-list li[type=Overlay]{
	color: gray;
}

#remoteControl #script-list li[type=VmixInp]{
	color: #44FF44;
}

#remoteControl #script-list li[type=VMix]{
	color: #22FF99;
}

#remoteControl #script-list li[type=VmixVaInp]{
	color: #99FF22;
}

#remoteControl #script-list li[type=End]{
	color: white;
	font-weight: 700;
}