#bodydiv {
      font-family: Arial, sans-serif;
      margin: 15px;
      padding: 10px 10px 0px 10px;
      border: 1px solid #aaaaaa;
      overflow: hidden; /* Hide body overflow to prevent default scrollbars */
  }
  hi {
      font-size: 18px;
      margin-top: 5px;
      margin-bottom: 5px;
  }
  #upper-section {
      border-bottom: 2px solid #333;
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      position: relative; /* Set position to relative for absolute positioning of dot */
  }

  #menu-dot {
      cursor: pointer;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      margin-left: 10px;
      position: absolute;
      top: 0;
      right: 0;
  }
  .menu-dot-tosave:hover::after {
    content: "Save";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-20px, 55px);
    background-color: #777;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0.8;
    font-size: 12px;
    visibility: visible;
  }

  .submenuitem {
      border-bottom: 1px solid #333;
      padding-bottom: 3px;
      padding-top: 3px;
      display:none;
  }
  .menux ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
  }
  .menux li {
      margin-right: 10px;
  }
  .menux a { 
      text-decoration: none;
      _color: #333;
  }
  .menux a:hover {
      text-decoration: underline;
  }
  .selected {
      color: darkgreen; /* Change the color to blue for the selected item */
  }
  .pointed {
    cursor: pointer;
  }
  #lower-section {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 150px); /* Adjust the height to leave space for menu and navigation buttons */
  }
  .content-div {
      flex: 1;
      overflow-y: auto; /* Add vertical scrollbar if content overflows */
      box-sizing: border-box; 
      display: none;
      padding-top: 15px;
  }
  #navigation-buttons {
      margin-top: 20px;
  }
  #input-div label {
      text-align: left;
      display: block; /* Ensures each label is on a new line */
  }
  /* Style for CodeMirror editor */
  .CodeMirror {
      height: auto;
      border: 1px solid #ddd;
      font-size: 14px;
  }       
  .hidden-controls {
      display: none;
  } 

  .gentd {
      padding: 5px; 
      width: 200px;
      vertical-align: center;
  }
  .metatd {
      padding: 5px; 
      width:80px;
      vertical-align: center;
  }

  #popupDiv {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffc2c2;
  }

  .descTA {
    width:100%; 
    height: 60px;
  }
  
  .almostW {
    width: calc(100% - 10px);
  }


/***************** Form components ******************/
.select2-container--enabled .select2-selection {
  background-color: #FBFFFB !important;
  color: black;
}
.select2-container--disabled .select2-selection {
  background-color: red; !important;
  color: gray;
}

input[type="text"],
input[type="number"],
input[type="password"],
select, 
textarea {
 padding: 4px;
 margin-bottom: 15px;
 box-sizing: border-box;
 border: none;
 border-bottom: 1px solid #ccc;
 border-radius: 4px;
 font-size: 14px;
 background-color: #FBFFFB;
 transition: background-color 1s;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
input[type="checkbox"]:focus,
textarea:focus {
 outline: none;
 background-color: #F0FFF0;
}

input[type="text"]:disabled,
input[type="number"]:disabled,
select:disabled,
input[type="checkbox"]:disabled,
textarea:disabled {
  background-color: #f5f5f5 
}

.tooltip-button {
  position: relative;
  cursor: pointer;
}

.tooltip-button:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-20px, 55px);
  background-color: #777;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0.8;
  font-size: 12px;
  visibility: visible;
}


  .grayed-icon {
    opacity: 0.3;
    cursor: cross;
  }



  .separator {
    border-top: 3px solid #000; /* Simulate a horizontal line */
    border-bottom: 3px solid #000; /* Optional: bottom border for a more defined line */
    background-color: #f0f0f0; /* Optional: background color for the separator */
    height: 1px; /* Optional: set height to a very small value */
  }



.container-box {
  background-color: #FBFFFB; 
  border: 2px solid #ccc; 
  padding: 7px; 
  min-height: 100px; 
}
.container-box[disabled] {
  background-color: #f5f5f5; 
}

.framed-span {
  display: inline-block; /* Ensures proper padding and border are visible */
  border: 2px solid #7c8475; /* Main theme green color for the border */
  padding: 5px 10px; /* Padding inside the frame */
  border-radius: 5px; /* Rounded corners (optional) */
  background-color: white; /* Background color */
  color: #404040; /* Text color matching your theme */
  font-size: 14px; /* Adjust font size as needed */
  font-family: Arial, sans-serif; /* Font family */
  margin: 2px 0px 2px 0px;
}

.clickable-span {
  cursor: pointer; /* Changes the mouse pointer to a hand */
  text-decoration: none; /* Removes underline by default */
  color: #404040; /* Text color matching your theme */
}
.clickable-span:hover {
  text-decoration: underline; /* Underline text on hover */
  color: #7bc240; /* Optional: Change text color on hover */
}

.icon[disabled] {
  opacity: 0.5;
  pointer-events: none;
}


.smallDot {
      cursor: pointer;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      margin-left: 10px;
      position: absolute;
      top: 0;
      right: 0;
}