html, body {
      height: 100%;
      margin: 0px;
      padding: 0px;
      text-align: center;
      background-color: #E5F0FF;
    }

    #build_section {
      display: flex;
  }

  #code_section {
  display: flex;
  flex-direction: row;
  }



  .html_header {
  background-color:#9A66FE; 
  text-align:left; 
  padding:20px; 
  margin:0px;
}



   .ports {
    margin: 0px;
       
      align-items: center;
      text-align: center;
   }

   .ports img {
    
    text-align:center;
    height:100%;
   }

   #blockly_Edit {
  flex: 1;
  height:80%; 
  width: 90%; 

}

#codeDiv {
  flex-basis: 300px;
  background-color: white;
  min-width: 500px;
  padding: 20px;
  text-align:left; 
  height: 580px;
  overflow-y: auto; 
  display:none;
}

#toggleButton {
  margin-top: 10px;
  cursor: pointer;
}

   #code_button {
  position: absolute;
  right:20px; 
  top:12px; 
  height:65px; 
  width:75px;
  margin:0px; 
  padding-top:10px; 
  padding-bottom:10px; 
  padding-left:10px; 
  padding-right:10px; 
  border-radius: 10px; 
  background-color: floralwhite; 
  color:#9A66FE;
}

#code_button2 {
  position: absolute;
  right:100px; 
  top:12px; 
  height:65px; 
  width: 75px;
  margin:0px; 
  padding-top:10px; 
  padding-bottom:10px; 
  padding-left:10px; 
  padding-right:10px; 
  border-radius: 10px; 
  background-color: floralwhite; 
  color:#9A66FE;
}

#code_button3 {
  position: absolute;
  right:180px; 
  top:12px; 
  height:65px; 
  width:75px;
  margin:0px; 
  padding-top:10px; 
  padding-bottom:10px; 
  padding-left:10px; 
  padding-right:10px; 
  border-radius: 10px; 
  background-color: floralwhite; 
  color:#9A66FE;
}

.form-title {
      background-color: #9A66FE;
      font-size: 22px;
      font-family: Helvetica Neue;
      color: white;
      margin: 0px;
      border-radius: 8px 8px 0px 0px;
      position: relative;
      top:0px;
      left:0px;
      width: 100%;
      padding: 0px;
      text-align: center;
    }

   

.blocklyDropdownRect {
  stroke: #444444 !important;
  fill: #444444 !important;
  opacity: 0.4;
}

.object_form_overlay {
      position: fixed;
      
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(76, 151, 255, 0.8); 
      z-index: 2147483647;
      display:none;
      justify-content: center;
      align-items: center;
    }


    .object_form-container {
      width:50%;
      margin-left:25%;
      height:80vh;
      margin-top:10vh;
      background: white;
      padding: 0px;
      border-radius: 12px;
      border: 8px solid #87CEFA;
      text-align: center;
      background-color:#E5F0FF;
    }

    .form-title {
      background-color: #9A66FE;
      font-size: 25px;
      font-family: Helvetica Neue;
      color: white;
      margin: 0px;
      border-radius: 8px 8px 0px 0px;
      position: relative;
      top:0px;
      left:0px;
      width: 100%;
      padding: 0px;
      text-align: center;
    }



    .object_form-container label {
      display: inline-block;
      width: 180px; /* Adjust the width as needed */
      text-align: center;
      margin-right: 10px;
    }

    .object_form-container input {
      width: 50%; /* Adjust the width as needed */
      padding: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
      text-align:center;
    }

    .object_form-container button {
      width: 50%; /* Make the button full width */
      padding: 10px;
      display: inline-block;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .object_button{
      margin-bottom: 20px;
      font-size: 15px;
    }

     .close-icon {
      position: absolute;
      right: 10px;
      top: 10px;
      color: darkviolet;
    }

    .close-icon:hover {
    color: pink;
}