#container{
   position:absolute;
   left:0px;
   height:0px;
   width: 1100px; 
   height:768px;
   border:0px solid #73AD21;
}
#container1{
    position:absolute;
    left:270px;
    top:230px;
    border: 0px solid #73AD21;
    width:554px;
    height: 272px;;
 }
#blackboard{
    position:absolute;
    left: 0px; 
    top:0px;
 }
 #demo1{
    position:absolute;
    left: 150px; 
    top:155px;
    color: #ffffff;
 }
 #demo1a{
   position:absolute;
   left: 230px; 
   top:156px;
   color: #ffffff;
}
#demo1b{
   position:absolute;
   left:290px; 
   top:156px;
   color: #ffffff;
}
#demo1c{
   position:absolute;
   left: 350px; 
   top:156px;
   color: #ffffff;
}
 #demo2{
    position:absolute;
    left: 150px; 
    top:175px;
    color: #ffffff;
 }
 #demo2a{
   position:absolute;
   left: 230px; 
   top:176px;
   color: #ffffff;
}
#demo2b{
   position:absolute;
   left: 290px; 
   top:176px;
   color: #ffffff;
}
#demo2c{
   position:absolute;
   left: 350px; 
   top:176px;
   color: #ffffff;
}
 #demo3{
    position:absolute;
    left: 150px; 
    top:195px;
    color: #ffffff;
 }
 #demo3a{
   position:absolute;
   left: 230px; 
   top:195px;
   color: #ffffff;
}
#demo4a{
    position:absolute;
    left: 230px; 
    top:215px;
    color: #ffffff;
 }
#demo3b{
   position:absolute;
   left: 290px; 
   top:195px;
   color: #ffffff;
}
#demo4b{
    position:absolute;
    left: 290px; 
    top:215px;
    color: #ffffff;
 }
#demo3c{
   position:absolute;
   left: 350px; 
   top:195px;
   color: #ffffff;
}
#demo4c{
    position:absolute;
    left: 350px; 
    top:215px;
    color: #ffffff;
 }
 #demo4{
    position:absolute;
    left: 150px; 
    top:215px;
    color: #ffffff;
 }
#desk1{
    position:absolute;
    left: 10px; 
    top:90px;
 }
#a{
    position:absolute;
    left: 57px; 
    top:20px;
 }
 #b{
    position:absolute;
    left: 140px; 
    top:20px;
 }
 #c{
    position:absolute;
    left: 230px; 
    top:20px;
 }
 #d{
    position:absolute;
    left: 320px; 
    top:20px;
 }
 #desk2{
    position:absolute;
    left: 850px; 
    top:90px;
 }
 #d1{
    position:absolute;
    left: 894px; 
    top:20px;
    cursor: pointer;
 }
 #d2{
    position:absolute;
    left: 1000px; 
    top:20px;
    cursor: pointer;
 }
 #d3{
    position:absolute;
    left: 1115px; 
    top:20px;
    cursor: pointer;
 }
 #d4{
    position:absolute;
    left: 883px; 
    top:221px;
    cursor: pointer;
 }
 #d5{
    position:absolute;
    left: 931px; 
    top:223px;
    
    cursor: pointer;
 }
 #d6{
    position:absolute;
    left: 974px; 
    top:176px;
    cursor: pointer;
 }
 #d7{
    position:absolute;
    left: 1028px; 
    top:176px;
    cursor: pointer;
 }
 #d8{
    position:absolute;
    left: 1127px; 
    top:176px;
    cursor: pointer;
 }
 #desk3{
    position:absolute;
    left: 853px; 
    top:237px;
 }
 #desk{
    position:absolute;
    left: 270px; 
    top:656px;
 }
 #cup1{
    position:absolute;
    left: 320px; 
    top:582px;
 }
 #myCanvas1{
    position:absolute;
    left: 330px; 
    top:615px;
 }
 #myCanvas1a{
    position:absolute;
    left: 339px; 
    top:638px;
 }
 #demoCup1{
    position:absolute;
    left: 360px; 
    top:567px;
 }
 #cup2{
    position:absolute;
    left: 440px; 
    top:582px;
 }
 #myCanvas2{
    position:absolute;
    left: 450px; 
    top:615px;
 }
 #myCanvas2a{
    position:absolute;
    left: 459px; 
    top:638px;
 }
 #demoCup2{
    position:absolute;
    left: 480px; 
    top:567px;
 }
 #cup3{
    position:absolute;
    left: 560px; 
    top:582px;
 }
 #myCanvas3{
   position:absolute;
   left: 570px; 
   top:615px;
}
#myCanvas3a{
    position:absolute;
    left: 579px; 
    top:638px;
 }
#demoCup3{
    position:absolute;
    left: 600px; 
    top:567px;
 }
#cup4{
    position:absolute;
    left: 685px; 
    top:582px;
 }
 #myCanvas4{
   position:absolute;
   left:695px; 
   top:615px;
}
#myCanvas4a{
    position:absolute;
    left: 704px; 
    top:638px;
 }
#demoCup4{
    position:absolute;
    left: 725px; 
    top:567px;
 }
#cupUp{
   position:absolute;
   left: 585px; 
   top:623px;
   visibility: hidden;
}
#d1a{
   position:absolute;
   left: 235px; 
   top:130px;
   color: #ffffff;
}
#d2a{
   position:absolute;
   left: 295px; 
   top:130px;
   color: #ffffff;
}
#d3a{
    position:absolute;
    left: 355px; 
    top:130px;
    color: #ffffff;
 }
 #odigies{
   position:absolute;
   left: 21px; 
   top:230px;
}
#production{
   position:absolute;
   left: 858px; 
   top:650px;
   visibility:visible;
}
#clean{
   position:absolute;
   left: 168px; 
   top:633px;
   cursor: pointer;
   visibility: hidden;
}
 .tooltip {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 880px; 
   top:135px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
 .tooltip1 {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltip1 .tooltiptext1 {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 987px; 
   top:135px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 
 .tooltip1:hover .tooltiptext1 {
   visibility: visible;
 }
 .tooltip2 {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltip2 .tooltiptext2 {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 1099px; 
   top:135px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 
 .tooltip2:hover .tooltiptext2 {
   visibility: visible;
 }
 .tooltip3 {
    position:absolute;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip3 .tooltiptext3{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    left: 841px; 
    top:275px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip3:hover .tooltiptext3 {
    visibility: visible;
  }
  .tooltip4 {
    position:absolute;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip4 .tooltiptext4{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    left: 885px; 
    top:275px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip4:hover .tooltiptext4 {
    visibility: visible;
  }
  .tooltip5 {
    position:absolute;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip5 .tooltiptext5{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    left:935px; 
    top:275px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip5:hover .tooltiptext5 {
    visibility: visible;
  }
  .tooltip6 {
    position:absolute;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip6 .tooltiptext6{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    left:1015px; 
    top:275px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip6:hover .tooltiptext6 {
    visibility: visible;
  }
  .tooltip7 {
    position:absolute;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip7 .tooltiptext7{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    left:1110px; 
    top:275px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip7:hover .tooltiptext7 {
    visibility: visible;
  }
 #A{
   position:absolute;
   left:28px; 
   top:120px;
}
#B{
   position:absolute;
   left:112px; 
   top:120px;
}
#C{
   position:absolute;
   left:202px; 
   top:120px;
}
#D{
   position:absolute;
   left:293px; 
   top:120px;
}
#calculator{
   position:absolute;
   left:70px; 
   top:607px;
   cursor: pointer;
   visibility: hidden;
}
#digmata{
   position:absolute;
   left:440px; 
   top:735px; 
}
#restart{
   position:absolute;
   left:10px; 
   top:665px; 
   cursor: pointer;
   visibility:hidden ;
}
 #pdf1, #pdf2, #pdf3, #pdf4, #pdf5, #pdf6,#pdf7, #pdf8{
   position: absolute;
   left:829px; 
    top:320px;
   visibility:hidden;
 }
 #pdf0{
   position: absolute;
   left:920px; 
    top:320px;
   visibility:hidden;
 }
 #book{
   position: absolute;
   left:582px; 
    top:24px;
   cursor: pointer;
 }
 .tooltipTheory  {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltipTheory .tooltiptextTheory {
   visibility: hidden;
   width: 250px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 507px; 
   top:147px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 .tooltipTheory:hover .tooltiptextTheory  {
   visibility: visible;
 }
 .tooltipClean {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltipClean .tooltiptextClean {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 120px; 
   top:697px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 .tooltipClean:hover .tooltiptextClean {
   visibility: visible;
 }
 .tooltipSolution {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltipSolution .tooltiptextSolution {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 12px; 
   top: 699px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 .tooltipSolution:hover .tooltiptextSolution {
   visibility: visible;
 }
 #confirm,#confirm1,#confirm1a,#confirm1b,#confirm1c,#confirm1d,#confirm1e,#confirm1h,#confirm1g  {
   display: none;
   background-color: #fffdeb;
   border: 2px solid #363232;
   position: fixed;
   width: 250px;
   left: 85%;
   margin-left: -100px;
   padding: 6px 8px 8px;
   box-sizing: border-box;
   text-align: center;
}
#confirm button {
   background-color: #f4fdfd;
   display: inline-block;
   border-radius: 5px;
   border: 1px solid #aaa;
   padding: 5px;
   text-align: center;
   width: 40px;
   cursor: pointer;
}
#confirm .message {
   text-align: center;
}