/*   Shapes Toolbar IDs and classes */
*{
  font-size:25px;
}
button{
  text-align:center;
  width:75px;
  height:75px;
  color: #000;
}
button:hover{
  background-color: gray;
  color:white;
}
#shapes-div {
    position: absolute;
    top:10%;
    left:52%;
    z-index: 9;
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    text-align: center;
    width:300px;
    height:auto;
  }
  
  #shapes-div-header {
    padding: 0px;
    cursor: move;
    z-index: 10;
    background-color: #808080;
   
    color: white;
    height: 25px;
  }
  #close-shapes{
    position:absolute;
    cursor:pointer;
    top:0px;
    right: 0px;
    height: 25px;
    width: 25px;
    background-color:red;
  }
  #fem_panel-div {
    position: absolute;
    top:10%;
    left:52%;
    z-index: 9;
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    text-align: center;
    width:300px;
    height:auto;
  }
  
  #fem_panel-div-header {
    padding: 0px;
    cursor: move;
    z-index: 10;
    background-color: #808080;
   
    color: white;
    height: 25px;
  }
  #close-fem_panel{
    position:absolute;
    cursor:pointer;
    top:0px;
    right: 0px;
    height: 25px;
    width: 25px;
    background-color:red;
  }
  #close-toolbars{
    position:absolute;
    cursor:pointer;
    top:0px;
    right: 0px;
    height: 25px;
    width: 25px;
    background-color:red;
  }
  .shapes-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    justify-items: center;
}
  .shapes-group button {
    background-repeat: no-repeat; 
    background-position:50%,50%;
    background-color: #C0C0C0; /* Green background */
    border: 1px solid #aaaaaa; /* Green border */
    color: black; /* White text */
    padding: 5px 20px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
   /* Make the buttons ap*/
    width:100%;
    float:left;
    text-align:center;
    height:50px;
  }
  /* Clear floats (clearfix hack) */
.shapes-group:after {
  content: "";
  clear: both;
  display: table;
}
  .shapes-group button:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
  }
  
  .shapes-group button:hover {
    background-color: gray;
  }
  .fem-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    justify-items: center;
}
  .fem-group button {
    background-repeat: no-repeat; 
    background-position:50%,50%;
    background-color: #C0C0C0; /* Green background */
    border: 1px solid #aaaaaa; /* Green border */
    color: black; /* White text */
    padding: 5px 20px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
   /* Make the buttons ap*/
    width:100%;
    float:left;
    text-align:center;
    height:50px;
  }
  /* Clear floats (clearfix hack) */
.fem-group:after {
  content: "";
  clear: both;
  display: table;
}
  .fem-group button:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
  }
  
  .fem-group button:hover {
    background-color: gray;
  }
  /*   Toolbars menu*/
  #btn-div {
    position: absolute;
    z-index: 9;
    top:5%;
    left:1%;
    background-color: #f1f1f1;
    border: 1px solid #585757;
    text-align: center;
    width:125px;
    height:auto;
  }

  #btn-div-header {
    padding: 0px;
    cursor: move;
    z-index: 10;
    background-color: #808080;
    color: white;
    height: 25px;
  }
  .btn-group {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2px;
    justify-items: center;
}
  .btn-group button {
   
    background-color: #C0C0C0; /* Green background */
    border: 1px solid #aaaaaa; /* Green border */
    color: black; /* White text */
    padding: 5px 20px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width:100%;
    height:50px;
    float:left;
  }
 
  .btn-group button:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
  }
  
  .btn-group button:hover {
    background-color: gray;
  }
 
  #cursor-div {
    position: absolute;
    top:10%;
    left:30%;
    z-index: 9;
    background-color: #f1f1f1;
    border: 1px solid #808080;
    text-align: center;
    color:black;
  }
  #cursor-div-header {
    padding: 0px;
    cursor: move;
    z-index: 10;
    background-color: #808080;
    color: white;
  }
  #close-cursor{
    position:absolute;
    cursor:pointer;
    top:0px;
    right: 0px;
    height: 15px;
    width: 15px;
    background-color:red;
  }
  #cursorX {
    background-color:#585757; 
    color: white;
  }
  #cursorY {
    background-color:#585757; 
    color: white;
  }
  #view{
    height: 5px;
    margin: 10px;
  }