/* menu bars */
.menu {
   display: inline-block;
   margin-right: 20px;
   cursor: pointer;
   position: relative;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 99;
   overflow-x: hidden;
}
.dropdown-content button {
   width: 100%;
   background: none;
   border: none;
   color: black;
   padding: 12px 16px;
   text-align: left;
   cursor: pointer;
   font-size: 16px;
}
.dropdown-content button:hover {
   background-color: #f1f1f1;
}
.menu:hover .dropdown-content {
   display: block;
}

button[disabled] {
   opacity: 0.5; /* This will make the button appear grayed out */
   cursor: not-allowed; /* This will change the cursor to indicate the button is not clickable */
   pointer-events: none; /* This will prevent any click events from being registered */
}

/* elementools */

#elementools {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden; /* Ensure content doesn't overflow */
}

#iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
}

#elementool-to-file {
   bottom: 4%; /* Adjust as needed */
   right:4%; /* Adjust as needed */
}

/* tabs implementation */

#tabs {
   display: flex;
   flex-direction: column;
   background-color: #333;
   width: 200px;
}
.tab {
   padding: 20px;
   color: white;
   text-align: center;
   cursor: pointer;
   border-bottom: 1px solid #444;
}
.tab:hover {
   background-color: #555;
}
.tab.active {
   background-color: #666;
}
#content {
   flex-grow: 1;
   padding: 20px;
   background-color: #f0f0f0;
}

/* This is the CSS for the ABOUT */

#about-dialog {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: white;
   padding: 20px;
   border: 1px solid #000;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   z-index: 10000; /* Ensure the dialog is on top of everything else */
}

.dialog-content {
   text-align: center;
}

#close-about-dialog {
   margin-top: 20px;
}