/*---------------------------------------*/
BODY {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
   /*overflow:hidden;*/
   font-size:15px;
}

IMG { border: 0; }

#titel {
   position:absolute;
   left:5px; top:5px; width:242px;height:26px;
   background-color:whitesmoke;
   color:purple;
   border: 1px solid gray;
   border-radius:5px;
   box-shadow:5px 5px 10px #888888;
   padding:0px; 
   text-align:center;
   font-size:1.3rem;
   font-weight:bold;
   font-style:italic;
}

/* --- svgs --- */
#divBlad {
   position:absolute;
   top:40px;
   left:260px;
   border: 1px solid gray;
   border-radius:7px;
   box-shadow:5px 5px 10px #888888;
   padding:0px;
}
#divSubBlad {
   position:absolute;
   overflow-y:auto;
   border: 0px solid gray;
   border-radius:7px;
   margin:0px;
}

#tblSVGs{
   margin:5px 5px 5px 5px;
}
#tblSVGs td{
   border:1px solid gray;
   padding:0px;
}
#tblSVGs td svg{
   background-color:white;
   margin:0px;
   cursor:crosshair;
}

#divJongsteExport {
   position:fixed;
   left:85%;
   font-size:0.5rem;
}

/* ---- help --- zoom ---- transp ------- XY */
#divBovenop {
   position:fixed;
   left:260px;
   top:3px;
   background-color:whitesmoke;
   border: 1px solid gray;
   border-radius:7px;
   box-shadow:3px 3px 5px #888888;
   padding:0px 1px;
   vertical-align:middle;
}

#tblBovenop {
   padding:0px;
   margin:0px;
}
#tblBovenop td {
   background-color:whitesmoke;
   border: 0px solid gray;
   border-radius:7px;
   text-align:center;
   padding:1px 2px 0px 2px;
}

#tblBovenop table {
   border-collapse:collapse;
   margin:0px 3px;
   font-size:small; 
}

#tdHelp { cursor:pointer; width:10px;}
#tdHelp img { margin:2px 0px 0px 1px; }
#tblTransp td{ border: 0px; padding:0px; }
#tblZoom td{   border: 0px; padding:0px; }
#divZoom{ cursor:pointer; }
#tdXY { font-size:small; width:80px;}

/* -------------   input - output tab ------------------*/
#tblTab {
   border-collapse:collapse;
   position:absolute;
   left:15px; top:39px; width:170px;
   margin-left:0px;
}
#tblTab td{
   width:50%;
   margin:0px;
   padding:0.5px;
}
#tblTab div{
   height:26px;
   border: 1px solid gray;
   border-radius:7px 7px 0px 0px;
   text-align:center;
   font-size:1.2rem; 
   cursor:pointer;   
   background-color:silver;
   color:white;
}
#tblTab div.selected{
   background-color:whitesmoke;
   color:blue;
}

#divLatje {
   position:absolute;
   border:0px;
   background-color:whitesmoke;
   height:3px;   
}
/* -------------   input   ------------------*/
#divInput {
   position:absolute;
   left:5px; top:66px; width:230px; height:517px;
   display:none;
   background-color:whitesmoke;
   border: 1px solid gray;
   border-radius:5px;
   box-shadow:3px 3px 5px #888888;
   font-size:0.75rem;
   margin-left:0px;
   padding:5px;
}
#divInputSub {
   width:226px; height:470px;
   overflow-y:scroll;
   border: 0.5px solid gray;
   font-size:0.6rem;
   margin:2px;

}

#tblBB2 { font-size:0.7rem;}
#tblBB2 td:nth-child(1) {width:25%;}
#tblBB2 td:nth-child(2) {}
#tblBB1 th {background-color:white;border:1px solid gray; border-radius:7px;}
#tblBB1 th:nth-child(1) {padding-left:4px;padding-right:4px;width:25%;}
#tblBB1 th:nth-child(2) {}
/* ---- grootbed - met voet ---- */
#divGrootteBed {
   width:120px;
   background-color:#cddc3987;
   color:blue;
   border: 0.5px solid lightgray;
   border-radius:7px;
   font-size:1.2rem;
   text-align:center;
   padding:1px 3px 1px 3px;
   cursor:pointer;
}
#divGrootteBed div:nth-child(2){margin:0px;padding:0px;font-size:0.5rem}

.tblintbl {
   margin:-1px;  border-collapse:collapse;     
}
.tblintbl div{
   margin-left:9px;  border-collapse:collapse;     
}
#divMetVoet {
   width:50px;
   background-color:rgba(128,255,248,0.5);
   color:rgb(0 150 136);
   border: 0.5px solid lightgray;
   border-radius:7px;
   font-size:xx-small;
   text-align:center;
   padding:1px 3px 1px 3px;
   cursor:pointer;
}
#divBZPlPl {
   background-color:rgba(156,39,176,0.2);
   color:purple;
   border: 0.5px solid lightgray;
   border-radius:7px;
   font-size:xx-small;
   text-align:center;
   padding:1px 3px 1px 3px;
   cursor:pointer;
}
#divTRPlPl {
   background-color:rgba(244,67,54,0.33);
   color:darkred;
   border: 0.5px solid lightgray;
   border-radius:7px;
   font-size:xx-small;
   text-align:center;
   padding:1px 3px 1px 3px;
   cursor:pointer;
}


input[type=number]::-webkit-inner-spin-button {
   /*-webkit-appearance: none;*/
   opacity:1;
}

.afm { width:48px; height:24px; font-size:1.1rem;}



/* -------------   output   ------------------*/
#divOutput {
   position:absolute;
   left:5px; top:66px; width:230px; height:517px;
   display:none;
   background-color:whitesmoke;
   border: 1px solid gray;
   border-radius:5px;
   box-shadow:3px 3px 5px #888888;   
   font-size:0.75rem;
   margin-left:0px;   
   padding:5px;
   
}
#divOutput table{
   border-collapse:collapse;
}

#tblOutputZA {
   background-color:white;
}
#divOutputSub {
   width:226px; height:470px;
   overflow-y:scroll;
   border: 0.5px solid gray;
   font-size:0.6rem;
   margin:2px;
}
#divOutputSub table td{
   border:1px solid gray;
   width:200px;
   padding:1px 1px 1px 1px;
}
#divOutputSub table td:nth-child(1){width:100px;font-size:0.4rem; display:none;}
#divOutputSub table td:nth-child(2){width:10px;}
#divOutputSub table td:nth-child(3){width:90px;}

#OutPutHTML {
   float:right;
   margin-right:10px;
   text-align:right;
   color:purple;
   font-size:xx-small;
   cursor:pointer;
}

/* ----------------------------------- */
#divFout {
   font-size:0.7rem;
}

.foutTbl {
   font-family:courier;
   font-size:0.7rem;
   border-collapse:collapse;
}
.foutTbl td { border:1px solid gray; }
.foutParam {
   font-family:courier;
   font-size:0.8rem;
   color:blue;
}
#divTest {
  -webkit-touch-callout: auto; /* iOS Safari */
    -webkit-user-select: auto; /* Safari */
     -khtml-user-select: auto; /* Konqueror HTML */
       -moz-user-select: auto; /* Firefox */
        -ms-user-select: auto; /* Internet Explorer/Edge */
            user-select: auto; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#divTest svg {
   background-color:whitesmoke;
}
.mini {
   font-size:xx-small;
   color:blue;
}