:root {
    --color-white: #ffffff;
    --color-black: #292929;
    --color-dark-gray: #dddddd;
    --color-light-gray: #eeeeee;
    --color-green: red;
    --color-light-green: #a5c596;

}
body{
    font-family: Roboto, Helvetica, sans-serif;
    background-color: #f4f4f2;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color: #e4e4e2;
    padding-top: 2vh;
    padding-bottom: 4vh;
}

.develop{
    border-style: solid;
    border-width: 1px;
}


.header{
    background-color: #ffffff;
    border-style: none;
    padding-top: 2vh;
    padding-bottom: 2vh;
}


.main-screen{
    max-width: 1000px;
    margin: 0 auto;
}

.nav>li>a{
    padding:5px 5px;
    font-weight: 600;
}

.nav-tabs{
    border-bottom:1px solid #e4e4e2;
}

.nav-tabs>li{
    float:left;
    border-color: #e4e4e2;
    padding: 0px 0px 0px 0px;
    margin-bottom: -1px;
}

.nav-tabs>li>a {
    cursor: default;
    color: #b5b6b7;
    border-color: #e4e4e2;
    padding-right: 7px;
    padding-left: 7px;
    margin-right: 0;
    border-radius: 4px 4px 0 0;
    border-width: 1px 1px 0px 1px;
}

.nav-tabs>li>a:hover {
    cursor: default;
    color: #b5b6b7;
    border-color: #e4e4e2;
    padding-right: 7px;
    padding-left: 7px;
    margin-right: 0;
    border-radius: 4px 4px 0 0;
    border-width: 1px 1px 0px 1px;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover{
    color: black;
    cursor: default;
    background-color:#ffffff;
    border-color:#e4e4e2;
    border-bottom-color:transparent;
    border-width: 1px 1px 0px 1px;
}

.tab-content>.active{
    display:block;
    padding: 10px;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    background-color:#ffffff;
    border-color: #e4e4e2;
    border-radius: 0px 0px 3px 3px;
    -webkit-box-shadow: 0px 15px 20px 5px rgba(228,228,228,1);
    -moz-box-shadow: 0px 15px 20px 5px rgba(228,228,228,1);
    box-shadow: 0px 15px 20px 5px rgba(228,228,228,1);

}


.controller-name{
    padding-bottom: 10px;
}

#img-preloader{
    opacity: 0;
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
    z-index:-1;
}



#lens-info{
    background-color: #434343;
    border-style: solid;
    border-color: #434343;
    color: #fefefe;
    margin-top: 15px;
    border-radius: 3px;
    width: fit-content;
    padding-right: 3px;
    padding-left: 3px;
    font-variant: all-petite-caps;
}

#data .tab-pane{
    display: none;
}

#data{
    height: 0;
    overflow: hidden;
    padding-top: 65%;
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #e4e4e2;
    border-radius: 3px;
    background-color: black;
    color: #ffffff;
}

.space{
    padding-left: 0px;
    padding-right: 0px;
}

#data #data-tab.active{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
}

#data #camera-setting-frame.active{
    border-color: red;
    z-index: 2;
}

#camera-setting-frame.active #camera-number,
#camera-setting-frame.active #camera-flag{
    background-color: red;
    color: #ffffff;
    cursor: default;
}

#data img{
    width: 100%;
    height: auto;
}

#camera-setting-frame{
    display: none;
    float: left;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    border-style: solid;
    border-width: 2px;
    border-color: #a5c596;
    height: 100%;
    width: 100%;
    z-index: 1;
    font-size: 12px;
    pointer-events: none;
}

#camera-number{
    background-color: #a5c596;
    color: white;
    width: fit-content;
    float: left;
    padding: 0px 3px 0px 3px;
    margin-top: -1px;
    margin-left: -1px;
    z-index: 20;
    cursor: pointer;
    pointer-events: auto;
}

#camera-flag{
    background-color: #a5c596;
    color: white;
    width: fit-content;
    float: right;
    padding: 0px 3px 0px 4px;
    margin-top: -1px;
    margin-right: -1px;
    z-index: 20;
    cursor: pointer;
    pointer-events: auto;
}

.header-headline{
    margin-bottom: 10px;
}


.sensor-set-row{
    background-color: #eeeeee;
    padding-top: 10px;
    padding-bottom: 10px;
}


.font-bold{
    font-weight: bold;
}

.font-bolder{
    font-weight: 510;
}



:focus {
    outline: none !important;
}

.bootstrap-select > select.mobile-device:focus + .dropdown-toggle, .bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
}



.btn{
    border-radius: 3px;
    color: #292929;
    background-color: #ffffff;
    border-color: #e4e4e2;
    padding: 3px 0px 3px 3px;
    min-width: 50px;
    min-height: 20px;
    font-size: 11px;
    text-align: left;

}

.btn:hover {
    color: black;
    background-color: #e6e6e6;
    border-color: #a7cf38;
}


.btn-default {

    background-color: #ffffff;
}

.btn-primary {
    color: black;
    background-color: #ffffff;
    border-color: #e4e4e2;
    border-radius: 0px 3px 3px 0px;
}

.btn-classic{
    border-radius: 3px;
    color: #292929;
    background-color: #ffffff;
    border-color: #e4e4e2;
    padding: 3px;
    min-width: 50px;
    min-height: 20px;
    font-size: 11px;
    text-align: center;

}

.btn-set{
    margin-top: 10px;
    padding: 3px;
}

.modal-content {
    border-radius: 3px;
}

.option-row{
    width: 100%;
}

.text{
    width: 100%;
}

.text-muted{
    float: right;
    text-align: right;
}


.dropdown-menu{
    border: 1px solid #e4e4e2;
    border-radius: 3px;
    padding: 0px;
}


.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    color: black;
    background-color: #a7cf38;

}

.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {

    border-color: #a7cf38;
    background-color: #ffffff;
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {

    border-color: #a7cf38;
    background-color: #ffffff;
}

.btn-default.focus, .btn-default:focus {
    border-color: #a7cf38;
    background-color: #ffffff;
}

.form-control {
    border-radius: 0px;
    height: 25px;
}

.form-control:focus {
    border-color: #292929;
    box-shadow: none;
}

.vertical-alignment-helper {
    display:table;
    height: 80%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    pointer-events: all;
    margin: 0 auto;
}

.bs-caret{
    display: none;
}



@media (min-width: 300px) {
#sensor-set{
text-align: left;
}

}



@media (min-width: 576px) {
#sensor-set{
text-align: left;
}


}


@media (min-width: 768px) {
#sensor-set{
text-align: right;
}


}


@media (min-width: 992px) {
#sensor-set{
text-align: right;
}


}


@media (min-width: 1200px) {
#sensor-set{
text-align: right;
}



}