body { }
 :root {  --borders-color:#B0C0E0 ; } /*#005070 */

 .globaldiv     {   }
 .maindiv       {   border: 0px inset var(--borders-color);  background-color: white;      text-align: center;  display: flex; flex-direction:row; }
 .menudiv       {   border: 3px inset var(--borders-color);  background-color: lightgreen; text-align: left  ; }
 .scorediv      {   border: 3px inset var(--borders-color);  background-color: white;      text-align: left  ; }
               
 .leftdiv       {   border: 0px inset var(--borders-color);  background-color: white  ;  text-align: center;  position: relative; }
 .imagediv      {   border: 3px inset var(--borders-color);  background-color: #E8E8E8;  text-align: center;  position: relative; }
 .worddiv       {   border: 3px inset var(--borders-color);  background-color: white  ;  text-align: center;  position:relative ; }
 .toolsdiv      {                                            background-color: white  ;  text-align: left  ;  position:relative ; border-top: 0px inset var(--borders-color); border-bottom: 2px inset var(--borders-color); border-right: 3px inset var(--borders-color);border-left: 3px inset var(--borders-color);}
 .configdiv     {                                            background-color: white  ;  text-align: left  ;  position:relative ; border-top: 0px inset var(--borders-color); border-bottom: 2px inset var(--borders-color); border-right: 3px inset var(--borders-color);border-left: 3px inset var(--borders-color);}
 .leveldiv      {   align-items : center ;                   background-color: white  ;  text-align: left  ;  position:relative ; border-top: 0px inset var(--borders-color); border-bottom: 2px inset var(--borders-color); border-right: 3px inset var(--borders-color);border-left: 3px inset var(--borders-color);} 
 .helpcommanddiv{                                            background-color: white  ;  text-align: left  ;  position:relative ; border-top: 0px inset var(--borders-color); border-bottom: 2px inset var(--borders-color); border-right: 3px inset var(--borders-color);border-left: 3px inset var(--borders-color);}

 .gamediv       {   border: 3px inset var(--borders-color);  background-color: white;  text-align: center;  position: relative; }
 .gamediv1      {   border: 3px inset var(--borders-color);  background-color: white;  text-align: center;  position: relative; }
 .gamediv2      {   border: 3px inset var(--borders-color);  background-color: white;  text-align: center;  }
 .videodiv      {   border: 3px inset var(--borders-color);  background-color: white;  text-align: center;  }
 .transparentdiv{   width:100%; height:100%; top:0; left:0;  background-color: salmon; opacity: 0.35;       position: absolute }
 .bigletterdiv  {   border: 3px inset var(--borders-color);  background-color: white;  text-align: center;  position: absolute; z-index: 4 ; vertical-align: top; }
 .helpdiv       {                                            background-color: white;  text-align: left  ;  position:relative }
 .helpcmddiv    {   border: 1px inset var(--borders-color);  background-color: white;  text-align: left  ;  position:relative }
 .helptextdiv   {   border: 1px inset var(--borders-color);  background-color: white;  text-align: left  ;  position:relative }
 .helpvideodiv  {   border: 1px inset var(--borders-color);  background-color: white;  text-align: left  ;  position:relative }
 .diagonaldiv   {   border: none ; inset: 0px; background-color: var(--borders-color)  ; z-index: 9 ; height: 4px;  text-align: left  ;  position:absolute }

 .levelcolumn   {  float: none ;  width: 15% ;  padding: 3px; }
 .firstcolumn   {  float: none ;  width: 40% ;  padding: 0px; margin: 0px ; border: 0px ; border-radius: 0px; top:0px ; left:0px ; display:inline-block }

 .borderdiv     {  width:  calc(100% - 32px) ; height: calc(100% - 32px) ; margin: 0 auto;  padding: 16px; position: relative;  background-color: #202020;  }
 
 .testbutton    {  margin   : 0.5em }
 .text          {  font-size: 1.1em ; font-family: "Times New Roman" ; margin:0px ; padding : 10px }
 .videoelt      {  display   : block ;  min-width : 100%  ;  min-height: 100%  ; max-width : 100%  ; max-height: 100%  ; width     : 100%  ;  height    : 100% ;   z-index   : 2;  object-fit: contain; }
 .imageelt      {  position: relative ; z-index : 1; top: 0.3em; left: 0px; width: 98%  ; height:98% ; object-fit:contain}
 .imagesizedelt {  position: relative ; z-index : 1; top: 0px; left: 0px; width: 100% ; height:100%; object-fit:contain}

 .iconabselt    {  position: absolute ; border : 3px solid magenta ; z-index  : 2; top: 0px; left: 0px;   object-fit: contain }
 .iconrelelt    {  position: relative ; border : 3px solid magenta ; }
 
 .iprogabselt   {  position: absolute ; z-index  : 2; top: 3px; left:  50px; width : 75% ; height : 10px }
 .vprogabselt   {  position: absolute ; z-index  : 2; top: 0px; left:  50px; width : 75% ; height :  5px }
 .verrabselt    {  position: absolute ; z-index  : 2; top: 0px; left:  50px; width : 75% ; height : 50px ; color:yellow }
    
/************************************** Pop up ***********************************************/

.modalgen { display: none; /* Hidden by default */  position: fixed; /* Stay in place */  z-index: 15; /* Sit on top */
            padding-top: 100px; /* Location of the box */  left: 0;  top: 0 ; width: 100%; /* Full width */ height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */  background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }
.modalcontent   { background-color: #fefefe; margin: auto; padding: 1em ; border: 1px solid #888;  width: 80%; }
.modalclosespan { color: #aaaaaa; float: right; font-size: 2em ; font-weight: bold; }
.modalclosespan:hover, .modalclosespan:focus {  color: #000; text-decoration: none;  cursor: pointer; }

/************************************** Menu ***********************************************/

.dropbtn                          { background-color: #04AA6D;  color: white; padding: 0.5em ; margin : 0.1em 0.5em 0.1em 0.3em; font-size: 1em; border: none; }
.dropdown                         { position: relative; display: inline-block; }
.dropdown-content                 { display: none; position: absolute; background-color: #f1f1f1; min-width: 16em; box-shadow: 0px 0.5em 1em 0px rgba(0,0,0,0.2);font-weight: bold; z-index: 5 ; }
.dropdown-content span            { color : black; padding: 0.5em 1em; text-decoration: none; display: block; }
.dropdown-content span:hover      { background-color: #cfc; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropbtn          { background-color: #3e8e41; }
.dropspan                         { color: blue; padding: 0.2em 0.5em;}

/*************************** table ****************************************/
table   { border-collapse: collapse; width: 100%; }
td, th  { border: 1px solid #dddddd; text-align: left; padding: 0.5em; }