:root {
    --lgl-darkblue: #0077b2;
    --lgl-lightblue: #e2edf2;
}
@font-face {
    font-family : 'Roboto';
    font-style : normal;
    font-weight : 400;
    src : local('Roboto'), url("../fonts/Roboto-Regular.ttf") format('truetype');
}
* {
    box-sizing : border-box;
    text-align : center;
}
html, body {
    font-family : 'Roboto', sans-serif;
    font-size:100%;
}
body {
    overflow-y : scroll;
    margin : 0;
}
button {
    color: var(--lgl-lightblue);
    background-color: var(--lgl-darkblue);
    border: none;
}
.camera {
    display : inline-block;
}
.output {
    display : inline-block;
}

.block{
    display : block;
}

svg.vg {width:25px; height:25px; margin:-10px 0 0 0;}

#responseF{color:red;}

#non{display:none;}

.nullacht{font-size:0.8rem;}

#kameraAuswahl{display: none;}

#adk{display: none;}

#ergerg{display: none;}

#demo-content{display: none;}
/*
#video{border: 1px solid gray;}
*/
#ssp{display: table;}

#pfeil{width:30px;height:30px;display:none;}

#canvas{display:none;}
#canvasX{display:none;}
#canvasXX{display:none;}

#startButton3,#startButton3X,#startButton3XX{position:absolute;top:96px;left:135px;}

.non, #eins, #einsX, #einsXX,#zwei, #zweiX, #zweiXX, #ifr{display:none;}

#zoom{width:3rem;height:25px;display:inline;}

#special{width:513px;margin:0 auto;}

.righ{text-align:right;}

#relo{margin-top: 25px;}

#speicherhinweis{margin-top: 25px;}
/*#speicherhinweis{margin-top: 25px;display:none;}*/

#speichern{padding: 20px;}
/*#speichern{padding: 20px;display:none;}*/

#senden,.action-btn{margin-top: 25px;padding: 20px;width:200px;}
/*#senden,.action-btn{margin-top: 25px;padding: 20px;width:200px;display:none;}*/

#senden.action-btn{padding:0.5rem 0.5rem 0.5rem 0;width: 22rem;}

#pabo{padding-bottom:1rem;}

#cnull{color:#000;}

.LZ{display:none;}

#dim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 1000;
    display: none;
}
#dimBox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 1001;
    display: none;
}
#dimBox>div:first-child {
    text-align: right;
    font-size: 2rem;
    cursor: pointer;
}
#dimBox .btn2 {
    margin-top: 15px;
}

#hack{display:none;}

.vPtra, .camera {
    position: absolute;
    z-index:1;
    left:0;
    top:0;
    background:lightgrey;
}

.output, img#photo, img#photoX, img#photoXX {
    position: absolute;
    z-index:1;
    left:0;
    top:0;
    width:640px;
    height:480px;
    background:lightgrey;
    /*
	aspect-ratio: 3/4;
	-webkit-aspect-ratio: 3/4;
     */
}

#wrapper {
    max-width : 60rem;
    margin : 0 auto;
}
input#zoom{
    width:3rem !important;
    height:25px;
    display:inline;
}
.table-scrollable {
    display:block;
    width: 32rem;
    margin: 0 auto;
    overflow-y: auto;
}
.table-scrollable::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
}
.table-scrollable::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, .3);
}
#local-stored-applications {
    max-width: 32rem;
    margin: 0 auto;
}
#local-stored-applications table {
    margin: 0 auto;
}
th {
    background-color: var(--lgl-lightblue);
    font-weight:600;
    word-wrap: break-word;
}
td {border-right: thin solid gainsboro;
    border-bottom: thin solid gainsboro;}
tfoot>tr>td {
    border: thin solid white;
}
.clearfix {
    overflow : auto;
}
.clearfix::after {
    content : "";
    clear : both;
    display : table;
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
}
.flex-left{
    display:flex;
    justify-content:left;
    /*align-items:left;*/
}
textarea.grey, input.grey{
    background:rgb(225,225,225);
}
/*
img {
  width:100%;
  height:auto;
}
*/
.fl, .fll {
    position: absolute;
    left:1rem;
    top:12rem;
    z-index:1;
    display:inline-block;
    width:8rem;
    height:2rem;
    color:black;
    background-color:grey;
    box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 2px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    border-radius: 1rem;
    text-decoration-line:none;
}
.fl:hover, .fll:hover{
    color:#000;
    background:#cceeff;
}
.fll{
    color:#f00;
    /*background:#0f0;*/
    background: #cceeff;
}

.r3 {
    position: absolute;
    /*right:2rem;*/
    left:1rem;
    top:1rem;
    z-index:1;
    display:inline-block;
    font-size: 16px;
    font-weight: 600;
    text-decoration:none;
    color: rgba(255, 0, 0, 1);
    width:2rem;
}
.r3:hover{
    border-radius: 1rem;
    width:2rem;
    color:#000;
    background:#cceeff;
}

span.pflicht{
    color:#f00;
    font-size:11px;
    font-weight:300;
    text-align:right;
    background-color:#eee !important;
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:inline !important;
}
span.button6 {
    display : inline-block;
    margin:5px;
    width : 30px;
    height : 30px;
    border-radius : 50%;
    text-decoration : none;
    font-family : Arial;
    font-size : 16px;
    font-weight : bold;
    color : var(--lgl-lightblue);
    background-color : var(--lgl-darkblue);
    text-align : center;
    line-height: 27px;
    vertical-align: baseline;
    cursor: pointer;
    transition: background-color 0.1s ease-out;
}
span.button6:hover {
    color : var(--lgl-darkblue);
    background-color : var(--lgl-lightblue);
    outline: 1px solid var(--lgl-darkblue);
}
button.table-button {
    margin: 5px;
    padding: 5px;
    text-decoration : none;
    font-family : Arial;
    font-size : 16px;
    font-weight : bold;
    color : var(--lgl-lightblue);
    background-color : var(--lgl-darkblue);
    text-align : center;
    line-height: 27px;
    vertical-align: baseline;
    cursor: pointer;
    transition: background-color 0.1s ease-out;
    white-space: nowrap;
}
button.table-button:hover {
    color : var(--lgl-darkblue);
    background-color : var(--lgl-lightblue);
    outline: 1px solid var(--lgl-darkblue);
}
.button-edit-symbol {
    display: inline-block;
    transform: rotateZ(135deg);
}
#startbutton {
    display : block;
    position : relative;
    margin-left : auto;
    margin-right : auto;
    bottom : 32px;
    background-color : rgb(0, 150, 0, 0.5);
    border : rgb(255, 255, 255, 0.7) solid 1px;
    box-shadow : 0 0 1px 2px rgb(0, 0, 0, 0.2);
    font-size : 14px;
    color : rgb(255, 255, 255, 1);
}
#exportbutton {
    display : inline-block;
    outline : none;
    cursor : pointer;
    border-radius : 3px;
    font-size : 14px;
    font-weight : 500;
    line-height : 16px;
    padding : 2px 16px;
    height : 32px;
    min-width : 60px;
    min-height : 32px;
    border : none;
    color : #fff;
    background-color : #4f545c;
    transition : background-color 0.17s ease, color 0.17s ease;
}
.contentarea {
    font-size : 16px;
    width : 760px;
}
img.OSM {
    float:left !important;
    width : 256px;
    height : 256px;
    z-index : 0;
}
h1, h2 {
    padding : 0.5rem;
    margin : 0;
    text-align : center;
}
label {
    padding : 0.5rem 0.5rem 0.5rem 0;
    display : inline-block;
}
#nullspace {
    padding-bottom : 0.5rem;
}
input, textarea, select {
    display : block;
    width : 100%;
    padding : 8px;
    border : #000 solid 1px;
    border-radius : 4px;
    resize : vertical;
}
#minus {
    display : none;
}
#response{color:red;}
#logean{text-align:center;}
.aussi {
    display : block;
    width : 100%;
    padding : 8px;
    border : #000 solid 1px;
    border-radius : 4px;
    resize : vertical;
}
select {
    padding-top : 8px !important ;
    padding-bottom : 9px !important ;
}
input[type="checkbox"] {
    display : inline-block;
    width : 10%;
}
input[type="datetime-local"] {
    padding-top : 6px !important ;
    padding-bottom : 7px !important ;
}
input {
    font-size : 16px !important ;
}
a {
    display: inline-block;
    text-decoration: underline;
    color: #000;
    padding: 0.5rem;
}
.boxi {
    float: right;
    margin-right: 2%;
    margin-top: 1rem;
    width:25%;
}
.box, .box2, .boxi {
    display: block;
    text-align: right;
    padding: 1rem;
}
div.row label.box span, div.row label.box2 span {
    display : block;
    width : 100%;
    height : 33px;
    padding : 8px;
    border : #000 solid 1px;
    border-radius : 4px;
    resize : vertical;
    background : #cacaca;
}
.row span.box2 p{
    text-align:right;
    padding:0;
    font-size: 12px;
    font-weight: 400;
}
footer, header {
    margin : 1rem;
}
h2 > span.vio {
    display : inline-block;
    height : 1.5rem;
    width : 1.5rem;
    border : black solid 1px;
    border-radius : 1.2rem;
    font-size : 1.2rem;
    color : black;
    background-color : white;
}
h2 > span.vio:hover {
    color : white;
    background-color : black;
}
h2 > span {
    width : 1.2rem;
    height : 1.2rem;
    font-size : 1.2rem;
    border : black solid 1px;
    border-radius : 1.2rem;
}
.btnlos {
    margin : 1rem;
    padding : 11px 30px;
    text-transform : uppercase;
    color : #fff;
    background : #000;
    font-weight : 600;
    cursor : pointer;
    letter-spacing : 2px;
    transition : all 0.5s ease-out;
    border-radius : 1rem;
    text-decoration-line : none;
}
.btnlos:hover {
    color : #000;
    background : #cceeff;
}
#contentarea {
    display : none;
}
#pfeil {
    z-index : 1;
    position : absolute;
    left : 20px;
    display : none;
}
p, h2, h3{
    padding-top:1rem;
    margin:0;
    text-align:left;
}
div.row p.tbox, div.row p.tbox2 {
    text-align : justify;
    padding-top : 0.5rem;
}
.row {
    overflow : hidden;
}
.row:after {
    content : "";
    clear : both;
}
.box, .box2 {
    background : #eee;
    display : block;
    text-align : right;
    padding : 1rem;
}
.box, .tbox {
    float : left;
    width : 49%;
    margin-right : 2%;
}
.box:last-child {
    float : right;
    margin-right : 0%;
}
.box2, .tbox2 {
    float : right;
    width : 49%;
    margin-right : 0%;
}
.btn {
    display : inline-block;
    margin-top : 1rem;
    padding : 11px 30px;
    text-transform : uppercase;
    color : #fff;
    background : #cacaca;
    font-weight : 600;
    cursor : pointer;
    letter-spacing : 2px;
    transition : all 0.5s ease-out;
    border-radius : 1rem;
    text-decoration-line : none;
}
.btn:hover {
    color : #000;
    background : var(--lgl-lightblue);
}
.btn2 {
    /*display : inline-block;*/
    padding : 8px;
    color: #fff;
    background: var(--lgl-darkblue);
    font-weight : 600;
    cursor : pointer;
    letter-spacing : 2px;
    transition : all 0.1s ease-out;
    border-radius : 1rem;
    text-decoration-line : none;
    width:22rem;
}
a.fu2 {
    display : inline-block;
    padding : 8px;
    color : #000;
    background : #fff;
    font-weight : 400;
    cursor : pointer;
}
a.fu2:hover {
    color: #000;
    background: var(--lgl-lightblue);
}
.btn2:hover {
    color: var(--lgl-darkblue);
    background-color: var(--lgl-lightblue);
    outline: 1px solid var(--lgl-darkblue);
}
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #fff;
}
#tab1,#tab2{
    padding:0.5rem;
    display:inline-block;
    border-radius:3px;
}
.tabcontent {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
#tab1:hover, #tab2:hover {
    cursor : pointer;
    color : #000;
    background : #cceeff;
}
.tt33{
    text-align:right;
}

.tabZ {
    overflow: hidden;
    border: 1px solid #f1f1f1;
    background-color: #ccc;
}
#bb1, #bb2, #bb3{
    width:10rem;
    margin:3px;
    display:inline-block;
    color: #000;
    background-color: var(--lgl-darkblue);
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    border-radius : 1rem;
    text-decoration-line : none;
}
#bb1:hover, #bb2:hover, #bb3:hover {
    background-color: #ddd;
}

/* ab hier neu */

#Bi1, #Bi2, #Bi3 {position:relative;display:none;}

#video {
    /*width: 100%;
    max-width: 640px;*/
    width:320px;
    height:240px;
    display: block;
    margin: 0 auto;
    /*
            border: 1px solid gray;
            border-top: none;
    */
}

.tabcontentZ  {
    width: 640px;
    height:480px;
    display: block;
    margin: 0 auto;
}


/*
#zwei>#photo{width:640px; height:480px; border: 1px solid gray; border-top: none;}
*/
select{width:20rem;display:inline;}

/* Für den DatePicker aus jQuery */
.ui-widget-header .ui-icon {background-image: url(../image/ui-icons_444444_256x240.png);}
.REL{position: relative;z-index:0;}
.abs1{display:inline;position:absolute;;z-index:1;}
.abs2{display:inline;position:absolute;z-index:2;text-align:left;}
.ui-datepicker-trigger{width:16px;height:15px;float:left;}
/* Breakpoint */
@media only screen and (max-width: 32rem) {
    .row{
        margin:0;
    }
    .box, .box2{
        width:100%;
        margin-right:0%;
        float:none;
    }
    div.row p.tbox,div.row p.tbox2{
        width:100%;
        margin-right:0%;
        float:none;
        padding:0;
    }
    div.ulblock ul li{
        width:100%;
    }
    ul {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
}
/* Breakpoint iPad, iPad pro wäre 1024px*/
@media only screen and (device-width: 768px) {
    .row{
        margin:0;
    }
    .box, .box2{
        width:100%;
        margin-right:0%;
        float:none;
    }
    div.row p.tbox,div.row p.tbox2{
        width:100%;
        margin-right:0%;
        float:none;
        padding:0;
    }
    div.ulblock ul li{
        width:100%;
    }
    ul {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
}
@media print {
    #zurueck, a.fu2, footer, header{
        display:none;
    }
    .pbr {
        page-break-after: always;
    }
}

/**
 * Color disabled links
 */
a[disabled] {
    color: gray;
    background-color: lightgray;
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

#OnlineOffline.red {
    color: red;
}
#OnlineOffline.green {
    color: green;
}

tr.tr-offline-element {
    background-color: #e2edf2;
}
tr.error td {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
}

.alert.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
}

.alert.alert-info {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
}

/**
 * MAP-Setting Leaflet
 */
#map {
    width: 512px;
    min-height: 512px;
    max-width: 90%;
    /*margin: 0 auto 50px auto;*/
    margin: 0 auto 189px auto;
}
.container-map {
    position: relative;
}
/**
 * Loader
 */
#subsub2{width:140px;margin:0 auto;}
#subsub2-laoding-content{width: 100%;}
#subsub2-laoding-content p{margin: 0 auto!important;text-align: center!important;}

.loader {
    border: 24px solid #d2d2d2;
    border-radius: 75%;
    border-top: 24px solid var(--lgl-darkblue);
    width: 140px;
    height: 140px;
    -webkit-animation: spin 3s linear infinite; /* Safari */
    animation: spin 3s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}