body {
   background-color:whitesmoke;
   font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
   font-size:14px;
}

input {border:0px; color:blue;}
select {width:100px;}

/* donker - helder */
#modusDH {
   position:absolute; left: 0px; top:0px; width:20px; height:10px;
}

.knop {
   text-align:center;
   padding:0px 7px 0px 7px;
   border: 1px outset;
   border-radius:7px;
   color:blue;
   background-color:silver;
   cursor:pointer;
   font-size:small;
}

/* --------------- links ----------------*/
.kader{
   border:0.1px;
   border-style: solid;
   border-color: silver;
   margin:5px;
}     

.seprow {
   max-height:5px;
   background-color:lightblue;
}

#tblBlok {
   position: absolute;
   left: 136px; top: 0px; 
   /*margin:0px 0px 0px 5px;*/
}
#tblBlok td {
   width:20px;
   max-height:20px;      
   background-color:silver;
   border:2px solid gray;
   border-radius:3px;
   padding:1px 0px 0px 1px;
}
#tblBlok td img {width:18px; height:16px; margin:0px;}

#svgWerk, #svgWerkb {
   position: absolute;
   left: 15px; top: 30px; width: 200px; height:200px; 
   margin:0px; padding:0px;
   
}
#svgWerkb {
   background-color:transparent;
   cursor:crosshair;
}

#imgSpiegelHoek {
   position: absolute;
   left:216px; top:230px;
   width: 10px; height:10px; 
   cursor:pointer;
   border: 2px solid blue;
   border-radius:2px;
   background-color:silver;
}
#imgSpiegelMidden {
   position: absolute;
   left:108.5px; top:231px;
   width: 10px; height:10px; 
   cursor:pointer;
   border: 2px solid blue;
   border-radius:2px;
   background-color:silver;
}


#txtMseXY {
   position: absolute;
   left: 225px; top: 35px; width: 50px; height:20px;    
   font-size:small;
}

#tblMover {
   user-select:none;
   position: absolute;
   left: 220px; top: 55px; 
   border-spacing:4px;
}

#tblMover TD {
   width:22px;height:22px;
   max-width:22px;max-height:22px; /* noodzakelijk voor MS Edge */
   line-height:1px;
   text-align:center;
   border:0.5px solid silver;
   border-radius:5px;
   cursor:pointer;
}

#tblInvoeg{
   position: absolute;
   left: 220px; top: -2px;    
}
#tblInvoeg TD {
   width:26px; 
   max-width:26px; /* noodzakelijk voor MS Edge */
   height:14px; line-height:1px;
   text-align:center;
   border: 0px solid red;
   border-radius:22px;
   background-image: linear-gradient(#694d42, #77bd2b);
   color:white;
   font-size:xx-small;
   cursor:pointer;
}

#tblInvoeg TD:hover {
   background-image: linear-gradient(#99f436,#694d42);
   box-shadow:2px 2px 5px black;
}

#tblPresets {
   position: absolute;
   left: 15px; top: 250px; 
   font-size:14px;
}
#tblPresets td {
   border:0px solid gray;
   vertical-align:top; 
}
#tblPresets td img{
   width:16px;
   padding:0px 3px 0px 3px;
   border: 1px outset;
   border-radius:7px;
   color:blue;
   background-color:silver;
   cursor:pointer;  
}

#spPresetFile, #spGradjson {font-size:xx-small;color:gray;max-height:8px; }

#imgGradInv {
   margin-top:50px;
}

#divOnderste{
   position: relative;
   left: 8px; top:400px; width: 97%;
   min-width:250px;
}
#txtCurPos{
   position: relative;
   left:0px; top: 0px;    
   width:45px; height:14px;
   border:0.5px solid silver;
   font-size:10px;
   text-align:left;
   padding-left:5px;
   white-space:nowrap;
   margin-bottom:3px;
}

#txtCurObj{
   position: absolute;
   left:55px; top: 0px;    
   width:50px; height:14px;
   overflow: hidden;
   border:0.5px solid silver;
   font-size:10px;
   text-align:left;
   padding-left:5px;
   white-space:nowrap;
   cursor:pointer;  
}
#divonIdle {
   position: absolute;left:115px; top: 0px; 
   width:80px;height:14px;
   border:0.5px solid silver;
   text-align:center;
   font-size:10px;
   overflow: hidden;
   margin-left:15x;
   cursor:pointer; 
}

#txtSVG {
   font-family:courier new;
   font-size:0.8rem;
   white-space:pre;
   
}

/* --------------- rechts ----------------*/
#tblBladCtrls {
   position: absolute;
   left:350px; top:0px;   
}
#tblBladCtrls td {
   background-color:silver;
   color:black;
   border:1px solid gray;
   border-radius:3px;
   width:20px;
   height:20px;   
   padding:0px 3px 0px 3px;
   font-size:0.8rem;
   font-weight:bold;
   vertical-align:middle;
   text-align:center;
   cursor:pointer; 
} 
#tblBladCtrls td table {
   border-collapse:collapse;
}
#tblBladCtrls td table td {
   border:none;
   vertical-align:middle;
   color:black;
}

#tblBladCtrls td img {width:16px; height:16px; margin:0px;}

#divBlad {
   position: absolute;
   left:350px; top:28px;
   width:500px; height:358px;
   border: 1px solid gray;
   padding:5px;
   overflow: scroll;
}

#svgBlad {
   position: absolute;
   border: 1px solid silver;
   border-radius:3px;
   background-color:whitesmoke;
}


#divTxtScherm {
   display:none;
   position:absolute;
   color:black;
   background-color:whitesmoke;
   left:0px; top: 0px; width:100%; height:100%;
}
#cmdSluiten {
   position:absolute; left:46%; top:95%;
}
#txtData {
   position:absolute; left:1%; top:2%; width:96%; height:88%;
   font-size:0.7rem;
   white-space: pre;
   overflow-wrap: normal;
   overflow-x: scroll;
}