.hiddenStyle {
  display: none; /* Make sure it applies no matter what */
}

/* Style for the message box */
.message-box {
  background-color: #f4f4f4;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.hidden {
  display: none;
}

#close-message {
  background-color: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}

#close-message:hover {
  color: red;
}

#message {
  text-align: center;
  position: absolute;
  top: 20%; /* Adjust as needed */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust to center */
  font-size: 16px;
  font-weight: bold;
  color: #ac2468; /* Red color for error messages */
  background-color: #eff0ef; /* Light red background */
  border: 2px solid #ffffff; /* Light red border */
  border-radius: 10px;
  padding: 15px; /* Padding inside the message */
  border-radius: 4px; /* Rounded corners */
  font-size: 20px; /* Font size */
  margin: 10px 0; /* Margin above and below the message */
}

#login-link {
  display: block; /* Makes the link a block element */
  margin-top: 10px; /* Space between the message and link */
  color:#8dae10; /* Blue color for the link */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Make the link bold */
}

#login-link:hover {
  text-decoration: underline; /* Underline on hover for better UX */
} 

.title {
    font-family: 'Times New Roman', Times, serif;
    color: #8dae10;
    text-align: center; 
}

/*          Styling dropdown             */
.dropdownBtn {
    background-color: #003560;
    font-family: 'Times New Roman', Times, serif;
    color: white;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    height: 45px;
    width: 240px;
  }

.dropdown {
    position: relative;
    display: inline-block;
  }

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #025aa2;
    border-radius: 10px;
    border: 2px;
    border-color: #0278d9;
    min-width: 200px;
    margin-top: 2px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

.dropdown-menu a {
    color: white;
    padding: 12px 12px;
    font-size: 16px;
    text-decoration: none;
    display: block;
    width:200px;
    border-radius: 10px;
  }
  
  /* Change color of dropdown links on hover */
.dropdown-menu a:hover {background-color: #82b7e2}

  /* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
    display: block;
  }

.dropdown:hover .dropdownBtn {
    background-color:#0260ad;
  }

input {
    width: 70%;
  }
.small-input {
  width: 50%;
}


/*          Styling tabs          */
* {box-sizing: border-box}

.grid-container-tabs-and-contents {
  display: grid;
  grid-template-columns:200px,200px,200px,200px;

}

/* Style the tab buttons*/
.tab-syn {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  border-radius: 10px;
  margin-left: 10px;
  height: 700px;
  margin-top: 25px;
}

/* Style the buttons that are used to open the tab content */
.tab-syn button {
  display: block;
  background-color: inherit;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab-syn button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab-syn button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tab-container-syn .tab-content-syn {
  margin-top: 25px;
  float: right;
  padding: 10px 12px;
  border-left: none;
}

.item1-t {
  grid-column: 1;
  
}

.item2-t {
  grid-column: 2 ;
  
}

/* Styling the grids */
.grid-container-general {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f1f1f1;
  
  
}
.grid-item-general {
  
  text-align: left;
  padding: 5px;
}

.item1-ge {
  grid-column: 1 / span 3;
  grid-row: 1;
}

.item1-ge-btn {
  grid-column: 4 / span 5;
  grid-row: 1;
}

.item2-ge {
  grid-column: 1 / span 2 ;
  grid-row: 2 / span 10;
  
}
.item3-ge {
  grid-column: 3;
  grid-row: 2 / span 3  ;
  padding-right: 20px;
  padding-top: 0px;

}

.item4-ge {
  grid-column: 3 / span 4;
  grid-row: 4 / span 16 ;
  border: 1px solid #ccc;
  background-color: #cbe4d5;
  border-radius: 10px;
  padding: 15px
  
}

.item5-ge {
  grid-column: 1 / span 3;
  grid-row: 23 ;
}

.item6-ge {
  grid-column: 3 /span 4  ;
  grid-row: 23 ;
}
/* drag and drop*/
#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.btn-main-layer {
  width: 200px;
  height: 30px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  background-color:#3a729f;
  border: none;
  
}
.btn-main-layer:hover{background-color: #07528f}

/* Disabled button styling */
.btn-disabled {
  background-color: #d3d3d3; /* Grey color for disabled buttons */
  color: #888888;           /* Light grey text */
  cursor: not-allowed;       /* Not-allowed cursor */
}

/* Active (clicked) button styling */
.btn-active {
  background-color: #f39c12; /* Orange color for active button */
}


/* Grid structure Ignition */
.grid-container-ignition {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f1f1f1;
}

.grid-item-ig {
  text-align: left;
  padding: 5px;
}

.item1-ig {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.item2-ig {
  grid-column: 3 / span 7;
  grid-row: 1 ;
}

.item3-ig {
  grid-column: 1/ span 3 ;
  grid-row: 2;
}

.item4-ig {
  grid-column: 4/ span 8;
  grid-row: 2;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #cbe4d5;
}

.item5-ig {
  grid-column: 1 / span 3;
  grid-row: 5 ;
}

.item6-ig {
  grid-column: 1 /span 2 ;
  grid-row: 6;
  border: 1px solid #4d4c4c;
}
.item7-ig {
  grid-column: 3 /span 13 ;
  grid-row: 6;
  border: 1px solid #4d4c4c;
}
.item8-ig {
  grid-column: 1 /span 2 ;
  grid-row: 7;
  border: 1px solid #4d4c4c;
}
.item9-ig {
  grid-column: 3 /span 13 ;
  grid-row: 7;
  border: 1px solid #4d4c4c;
}
.item10-ig {
  grid-column: 1 /span 2 ;
  grid-row: 8;
  border: 1px solid #4d4c4c;
}
.item11-ig {
  grid-column: 3 /span 13 ;
  grid-row: 8;
  border: 1px solid #4d4c4c;
}
.item12-ig {
  grid-column: 1 /span 2 ;
  grid-row: 9;
  border: 1px solid #4d4c4c;
}
.item13-ig {
  grid-column: 3 /span 13 ;
  grid-row: 9;
  border: 1px solid #4d4c4c;
}
.item14-ig {
  grid-column: 1 /span 2 ;
  grid-row: 10;
  border: 1px solid #4d4c4c;
}
.item15-ig {
  grid-column: 3 /span 13 ;
  grid-row: 10;
  border: 1px solid #4d4c4c;
}
.item16-ig {
  grid-column: 1 /span 2 ;
  grid-row: 11;
  border: 1px solid #4d4c4c;
}
.item17-ig {
  grid-column: 3 /span 13 ;
  grid-row: 11;
  border: 1px solid #4d4c4c;
}
.item18-ig {
  grid-column: 1 /span 2 ;
  grid-row: 12;
  border: 1px solid #4d4c4c;
}
.item19-ig {
  grid-column: 3 /span 13 ;
  grid-row: 12;
  border: 1px solid #4d4c4c;
}
.item20-ig {
  grid-column: 1 /span 2 ;
  grid-row: 13;
  border: 1px solid #4d4c4c;
}
.item21-ig {
  grid-column: 3 /span 13 ;
  grid-row: 13;
  border: 1px solid #4d4c4c;
}

.item22-ig {
  grid-column: 1 /span 3 ;
  grid-row: 14;
}
.item23-ig {
  grid-column: 1 /span 10 ;
  grid-row: 15;
}
.item24-ig {
  grid-column: 1 /span 10 ;
  grid-row: 16;
}
.item25-ig {
  grid-column: 1 /span 10 ;
  grid-row: 17;
}
.item26-ig {
  grid-column: 1 /span 10 ;
  grid-row: 18;
}
.item27-ig {
  grid-column: 1 /span 10 ;
  grid-row: 19;
}
/* Styling btns in grid-item-ig item2-ign */
.btn-pre-step {
  width: 200px;
  height: 30px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  background-color:#3a729f;
  border: none;
  
}
.btn-pre-step:hover{background-color: #07528f}

.btn-pre-dep {
  width: 250px;
  height: 30px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  background-color:#3a729f;
  border: none;
  
}

.btn-pre-dep:hover{background-color: #07528f}

.btn-uplaod {
  width: 80px;
  height: 30px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  background-color:#3a729f;
  border: none;
  
}

.btn-uplaod:hover{background-color: #07528f}

/* Grid structure plasma */
.grid-container-plasma {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f1f1f1;
}

.grid-item-pl {
  text-align: left;
  padding: 20px;
}
.item1-pl {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.item2-pl {
  grid-column: 1 / span 2;
  grid-row: 2;
}
.item3-pl {
  grid-column: 1 / span 2;
  grid-row: 3;
}
.item4-pl {
  grid-column: 3 / span 40;
  grid-row: 2;
}

.grid-container-anealing {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f1f1f1;
}

.grid-item-an {
  text-align: left;
  padding: 20px;
}
.item1-an {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.item2-an {
  grid-column: 1 / span 2;
  grid-row: 2;
}
.item3-an {
  grid-column: 1 / span 8;
  grid-row: 3;
}
.item4-an {
  grid-column: 1 / span 10;
  grid-row: 4;
}
.item5-an {
  grid-column: 1 / span 4;
  grid-row: 5;
}

.saveLoadBtns {
  text-align:right;
  padding: 20px;
  
}

.item1-ss {
  grid-column: 15 / span 16;
  grid-row: 1;
  text-align: center;
  background-color: #33aa48;
  font-family: 'Times New Roman', Times, serif;
  color: white;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  height: 45px;
  width: 100px;
}
.item1-ss:hover{background-color: #08d508}
.item2-ss {
  grid-column: 17 / span 18;
  grid-row: 1;
  text-align: center;
  background-color: #33aa48;
  color: white;
  font-family: 'Times New Roman', Times, serif;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  height: 45px;
  width: 200px;
}
.item2-ss:hover{background-color: #08d508}

.row-header-plasma{
  text-align: right;
  color: white;
  background-color: #8e6c83;
  border: none;
  border-radius: 10px;
  font-size: 16px;
}