/*Classes for Advanced Filter and AI Demo dialogs. */


   .advancedfilterdialogbtn {
     margin-top: 10px;
     font-size: 14px;
     font-weight: normal;
     font-family: calibri;
     width: auto;
     display: inline-block;
     padding: 2px 4px;
     line-height: 1;
   }

   .advanced-filter-dialog {
     display: none;
     position: absolute;
     top: 200px;
     left: 75%;
     width: 300px;
     min-width: 150px;
     min-height: 100px;
     background-color: white;
     border: 1px solid black;
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
     z-index: 10000;
     border-radius: 8px;
     resize: none; /* Disable built-in resizing to use custom handle */
     overflow: hidden;
   }

   .AIDemo-dialog {
     display: none;
     position: absolute;
     top: 200px;
     left: 60%;
     width: 700px;
     min-width: 150px;
     min-height: 100px;
     background-color: white;
     border: 1px solid black;
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
     z-index: 10000;
     border-radius: 8px;
     resize: none; /* Disable built-in resizing to use custom handle */
     overflow: hidden;
   }


   .dialog-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
     background-color: #ebe1e1;
     color: black;
     cursor: move;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     user-select: none;
   }

   .header-buttons {
     display: flex;
     gap: 4px; /* space between minimize and close buttons */
   }

   .minimize-btn,
   .close-btn {
     cursor: pointer;
     font-size: 24px;
     font-weight: bold;
     line-height: 1;
     margin: 0;
     padding: 0 4px;
   }

   .dialog-body {
     padding: 10px;
   }

   .AIDemodialog-body {
     padding: 10px;
     max-height: 50vh;
     overflow-y: auto;
     padding-right: 8px;
   }

   #AIDemoresults table {
     border-collapse: collapse;        /* Prevent double borders */
     border: 1px solid #ccc;           /* Outer table border */
     width: 100%;                      /* Optional for layout */
     font-family: Calibri, sans-serif;
   }

   #AIDemoresults th {
     font-size: 16px;
     font-weight: bold;
     font-family: calibri;
     background-color: #f9f9f9;
     border: 1px solid #ccc;
     padding: 6px;
     text-align: left;
   }

   #AIDemoresults tr {
     font-size: 14px;
     font-weight: normal;
     font-family: calibri;
     border: 1px solid #ccc;
     padding: 6px;
     text-align: left;
   }

   #AIDemoresults td {
     font-size: 14px;
     font-weight: normal;
     font-family: calibri;
     border: 1px solid #ccc;
     padding: 6px;
     text-align: left;
   }

   /* Resize handle */
   .resize-handle {
     width: 16px;
     height: 16px;
     background: #ccc;
     position: absolute;
     right: 2px;
     bottom: 2px;
     cursor: se-resize;
     border-bottom-right-radius: 8px;
   }

   .AIDemo-dialog.minimized .AIDemodialog-body,
   .AIDemo-dialog.minimized #AIDemoresizeHandle {
    display: none;
   }

   /*Classes for STEM Demo dialogs. */

   .STEMDemo-dialog {
     display: none;
     position: absolute;
     top: 200px;
     left: 70%;
     width: 450px;
     min-width: 150px;
     min-height: 100px;
     background-color: white;
     border: 1px solid black;
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
     z-index: 10000;
     border-radius: 8px;
     resize: none; /* Disable built-in resizing to use custom handle */
     overflow: hidden;
   }

   .STEMDemodialog-body {
     padding: 10px;
     padding-right: 20px;
     max-height: 50vh;
     overflow-y: auto;
     padding-right: 8px;
   }

   .STEMDemo-dialog.minimized .STEMDemodialog-body,
   .STEMDemo-dialog.minimized #STEMDemoresizeHandle {
    display: none;
   }

   .STEMDemo-dialog.minimized {
     height: auto !important;
     overflow: hidden;
   }

   .STEMDemoyearslider-labels {
     font-size: 14px;
     font-weight: normal;
     font-family: calibri;
     display: flex;
     justify-content: space-between; /* keeps labels aligned under slider */
     margin-top: 0px;   /* space above labels if needed */
     margin-bottom: 12px; /* <-- controls extra space below */
   }

   #STEMPerformanceConfigtable,
   #STEMColorAssignmentstable {
     max-width: calc(100% - 20px); /* leave room for resize handle */
     border-collapse: collapse;
     border: none;
   }

   #STEMPerformanceConfigtable th,
   #STEMColorAssignmentstable th {
     border-collapse: collapse;
     border: 1px solid #ccc;
     text-align: center;
     vertical-align: middle;
     font-weight: bold;
     font-size: 14px;
     font-family: calibri;
     background-color: #f5f5f5;
   }

   #STEMPerformanceConfigtable td,
   #STEMColorAssignmentstable td {
     border-collapse: collapse;
     border: 1px solid #ccc;
     text-align: center;
     vertical-align: middle;
     font-weight: normal;
     font-family: calibri;
     font-size: 14px;
   }

   .table-wrapper {
     display: flex;
     align-items: center;  /* center rotated label */
     margin-top: 12px; 	/*spacing above table */
   }

   .table-label {
     writing-mode: vertical-rl;
     transform: rotate(180deg);
     font-weight: bold;
     font-family: calibri;
     font-size: 14px;
     text-align: center;
     line-height: 1;       /* helps vertical alignment */
     padding: 4px;         /* fine-tune position if needed */
     background-color: #f0f0f0;
     border: 1px solid #ccc;   /* match table border */
     position: relative;
     top: 16px;
   }

   #STEMColorAssignmentstable th:first-child {
     vertical-align: middle;    /* center top-left header relative to table rows */
   }