body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    margin-top: 20px;
    text-align: center;
    color: black;
}

h2 {
    text-align: center;
    margin-top: 0px;
    color: black;
    font-size: 1em; /* Smaller size */
}

.foldable-container {
    width: 90%;
}

.foldable-header {
    background-color: #d3d3d3; /* Lighter grey */
    color: #333; /* Darker color for the arrow */
    border: 2px solid black;
    padding: 5px;
    cursor: pointer;
    text-align: left; /* Align to left */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping */
}

.foldable-header .toggle-button {
  margin-left: 10px;  
  margin-right: 10px; /* Add space between the arrow and the text */
    cursor: pointer;
}

.foldable-title {
    flex: 1.1;
    font-weight: bold;
}

.search-section {
    display: flex;
    align-items: center;
}

.search-bar {
    padding: 5px;
    margin-right: 10px;
}

.empty-part {
    flex: 3; /* Takes remaining space */
}

.filters {
    flex: 2; /* Use flex for proper alignment */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align to the start */
}

.filters-label {
    font-weight: bold;
}

.hover {
    flex: 1.5; /* Use flex for proper alignment */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align to the start */
}

.hover-label {
    font-weight: bold;
   text-align: right;
    /* text-transform: uppercase; Change text to uppercase */
}

.console {
    display: none; /* Hidden by default */
    margin-left: auto;
    font-weight: bold;
}

.foldable-content {
    display: show; /* Default to show */
    border: 2px solid #333;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
}

.foldable-content.show {
    display: none;
}

.foldable-content.edit-mode {
    background-color: #d3d3d3;
}

.slider-container {
    position: relative;
    width: 100%;
}

.coordinate-system {
    position: relative;
    width: 100%;
    height: 500px; /* Set a fixed height */
    border: 2px solid #fff;
    margin-top: 20px;
    background: linear-gradient(to right, 
        #690000 0%, /* W1 */
        #CB6CE6 10%, /* W2 */
        #B23032 20%,/* W3 */
        #B23032 25%,/* W3 */
        #B1862A 35%,/* W4 */
        #B1862A 45%,/* W4 */
        #CB853A 55%,/* W5 */
        #CB853A 60%,/* W5 */
        #2C8841 70%, /* W6 green */
        #2C8841 70%, /* W6 green */
        #0A4D5D 80%, /* W6 teal*/
        #0A4D5D 83%, /* W6 teal*/
        #06BAE4 90%,  /* W6 turqoise */
        #06BAE4 94%,  /* W6 turqoise */
        #6406DB 100%);/* W */
}

.title-row {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.title {
    color: white;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    text-align: center;
    top: 10px;
}

.title.w1 { left: 1%; }
.title.w2 { left: 7.5%; }
.title.w3 { left: 22%; }
.title.w4 { left: 38%; }
.title.w5 { left: 54%; }
.title.w6 { left: 68%; }
.title.w6-2 { left: 80%; }
.title.w6-3 { left: 88%; }
.title.w7 { left: 97%; }

.slider-input {
    width: calc(100%); /* Allow the thumb center to reach the ends */
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    background: transparent;
    cursor: pointer;
    margin-top: 20px;
    border: 1px solid black; /* Add black border for better visibility */
    position: relative; /* Added for positioning child elements */
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--slider-color, black); /* Changed to black for better visibility */
    cursor: pointer;
    border: 2px solid #000;
    position: relative;
    margin-top: -5px; /* Center the thumb vertically */
    margin-left: 0px; /* Allow the thumb center to reach the ends */
    z-index: 2;
}

.slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--slider-color, #690000); /* Changed to black for better visibility */
    cursor: pointer;
    border: 2px solid #000;
    position: relative;
    margin-top: -5px; /* Center the thumb vertically */
    margin-left: -10px; /* Allow the thumb center to reach the ends */
    z-index: 2.
}

.slider-rectangles {
    position: absolute;
    top: 50%;
    left: 10px; /* Start at the same position as the slider circle */
    transform: translateY(-50%);
    width: 60px; /* Adjust as needed */
    height: 60px; /* Adjust as needed */
    z-index: 1;
}

.slider-rectangles div {
    width: 21px; /* Adjust as needed */
    height: 21px; /* Adjust as needed */
    position: absolute;
    background-color: grey;
    transition: background-color 0.3s, border 0.3s;
}

.slider-rect-1 { top: 15px; left: -20px; }
.slider-rect-2 { top: 15px; right: 35px; }
.slider-rect-3 { bottom: 0px; left: -20px; }
.slider-rect-4 { bottom: 0px; right: 35px; }

.slider-rect:hover {
    background-color: lightgray; /* Change to a lighter color on hover */
}

.slider-rect.selected {
    background-color: green; /* Change to green background when selected */
}

.vertical-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: white;
    transform: translateX(-50%);
}

.links {
    position: relative;
    height: 100%;
}

.link {
    position: absolute;
    color: white;
    text-decoration: none;
    transition: color 0.3s, left 0.3s, top 0.3s, background-color 0.3s; /* Added background-color transition */
    cursor: pointer;
}

.link.highlighted {
    background-color: white; /* Highlight background color for search match */
    color: black; /* Change text color for better readability */
}

.link.dragging {
    background-color: rgba(255, 0, 0, 0.3); /* 30% transparent red box */
}

/* Hover effect for links */
.link:hover {
    background-color: rgba(0, 0, 0, 0.5); /* Change background color on hover */
    color: white; /* Change text color on hover */
}

.bubble {
    position: absolute;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    text-align: center; /* Center align text */
}

.bubble h2 {
    margin: 0 0 10px;
}

.bubble img {
    max-width: 50px;
    height: auto;
    margin: 10px 0;
    display: block; /* Ensure it's a block element */
    margin-left: auto;
    margin-right: auto;
}

.bubble a {
    display: block;
    color: blue;
    text-decoration: underline;
}

.viewer {
    width: 80%;
    margin-top: 20px;
    padding: 20px;
    border: 2px solid #fff;
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin: 0 auto;
}

/* Modal Styles */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.modal-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 10px;
    text-align: left;
}

textarea {
    width: 100%;
    height: 100px; /* Adjust height as needed */
    resize: vertical;
}

button {
    margin: 10px 0;
}

.edit-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
    gap: 10px;
    width: 100%;
}

/* Suggestion Box Styles */
.suggestion-box {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    max-height: 150px; /* Limit the height */
    overflow-y: auto; /* Enable scrolling if the content is too tall */
    z-index: 1000;
}

.suggestion {
    padding: 10px;
    cursor: pointer;
}

.suggestion:hover,
.suggestion.selected {
    background-color: #ddd; /* Highlight on hover and selection */
}

/* Selected Labels Styles */
.selected-labels {
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap; /* Prevent text wrap */
}