/*
#main { 
	width:550px; 
	margin: 10px auto;
	border:solid 1px #b2b3b5; 
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
	padding:10px; 
	background-color:#f6f6f6;
}

#mainform { 
	background-color: #f6f6f6; 
	border: 0; 
}

fieldset { 
	border:none; 
	padding: 6px;
}

legend { 
	font-size:18px; 
	margin:5px 0px; 
	padding:5px 5px; 
	color:#b0232a; 
	font-weight:bold;
}
textarea { 
	width:98%; 
	padding:5px; 
	border:solid 1px #888;
}

label.error {
        float: none;
        margin-left: 10px;
        padding: 0 5px;
        vertical-align: middle;
        font-weight: bold;
        color: #cc0000;
        background-color     : #ffdddd;
        border: #ff6666 1px solid;
        font-size: 12px;
        font-style: italic;
}

.req_field { 
	color: red; 
	padding-left: 4px;
}

.tip {
	color: #444444;
	font             : 10px Verdana, Arial, Helvetica, sans-serif;
	font-weight      : normal;
	font-style: italic
}


*/

.wait {
visibility: hidden;
font-size: 0.9em;
color: #444;
}

.wait img {
margin: 0 12px 0 20px; 
vertical-align: middle;
}

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3333ff; }

.bold { 
	font-weight: 600;
}

.sitehelp {
        cursor: pointer;
        margin-left: 0.5rem;
}

.fill-timeline{display:flex;align-items:flex-start;margin:20px 0;font-family:sans-serif}
.timeline-item{flex:1;position:relative;text-align:center}
.timeline-item:not(:last-child):after{content:'';position:absolute;top:15px;left:50%;width:100%;height:2px;background:#dee2e6;z-index:1}
.fc-container{position:relative;display:inline-block;z-index:2}
.fc-circle{display:block;width:30px;height:30px;background:#fff;border:2px solid #adb5bd;color:#495057;border-radius:50%;line-height:26px;font-weight:700;margin:0 auto 8px}
.timeline-item.active .fc-circle{border-color:#28a745;background:#e8f5e9;color:#28a745}
.fill-meta{display:block;font-size:.8rem}.fill-label{display:block;font-weight:700}
.fill-date{color:#6c757d}.status-dot{position:absolute;top:0;right:-5px;height:10px;width:10px;background-color:#28a745;border-radius:50%;border:2px solid #fff}
.pulse{box-shadow:0 0 0 rgba(40,167,69,.4);animation:p 2s infinite}
@keyframes p{0%{box-shadow:0 0 0 0 rgba(40,167,69,.4)}70%{box-shadow:0 0 0 10px rgba(40,167,69,0)}100%{box-shadow:0 0 0 0 rgba(40,167,69,0)}}
.filter-link{text-decoration:none;color:inherit;display:block}
/* Style for the Traceability Section */

 .traceability-container {
        display: flex;
        gap: 20px;
        margin-top: 20px;
        align-items: flex-start;
    }
    .tree-column {
        flex: 1;
        max-width: 50%;
        background: #ffffff;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px;
        min-height: 400px;
    }
    .details-column {
        flex: 1;
        max-width: 50%;
        background: #f9fbff;
        border: 1px solid #bce8f1;
        border-radius: 4px;
        padding: 20px;
        position: sticky;
        top: 80px;
    }
    .scroll-box {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #a4c8e0;
        border-radius: 6px;
        background: #ffffff;
        padding: 10px;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    }
    .level-container {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px dashed #ccc;
    }
    .level-container:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .level-title {
        width: 100%;
        font-size: 0.95em;
        color: #666;
        margin-bottom: 10px;
        font-style: italic;
    }
    .node-flex-box {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
    .tree-node {
        display: inline-block;
        padding: 10px 15px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .meas-node {
        background: #ffffff;
        border: 2px solid #888;
        border-radius: 6px;
        color: #333;
        font-weight: normal;
        min-width: 300px;
    }
    .tank-node {
        background: #ffffff;
        border: 2px solid #ccc;
        border-radius: 20px;
        color: #333;
    }

    /* Level-specific border colors */
    .level-primary { border-color: #28a745; border-width: 3px; }
    .level-secondary { border-color: #ffc107; border-width: 3px; }
    .level-tertiary { border-color: #17a2b8; border-width: 3px; }
    .level-quaternary { border-color: #6f42c1; border-width: 3px; }


    .tree-node:hover {
        border-color: #0056b3;
        background: #f0f8ff;
    }
    .active-node {
        border-width: 3px;
        border-color: #0056b3;
        /*box-shadow: 0 0 0 2px rgba(0,86,179,0.2);*/
    }
    .tank-node.active-node {
        background: #0056b3;
        color: #ffffff;
    }
    .meas-node.active-node {
        border-width: 3px;
        border-color: #0056b3;
        background: #f0f8ff;
    }
    .node-data-table {
        margin: 0;
        font-size: 0.9em;
        width: 100%;
    }
    .node-data-table td {
        padding: 2px 10px 2px 0;
        border: none;
    }