*,
      *::before,
      *::after,
      ::slotted(*) {
        box-sizing: border-box !important;
      }

	  /* :root {
	  	--main-vw: 100vw; 
		 --img-width: calc(60% + (((var(--main-vw) - 630px) / 5) ));
	  }*/

		label {
			line-height: 1.0 !important;
			font-size: 14px !important;
		
		}
      :host([hidden]),
      [hidden] {
        display: none !important;
      }
      
      .ice-card {
        background: transparent;
        
      }
      .ice-card:hover {
          border: solid black !important;
      } 

      .ice-card-selected {
      	border: solid black !important;
        background-color: #dae6ee !important;
      }
      .ice-card-selected:hover {
          border: solid black !important;
      } 
    
	  .filter-blue {
	  	  border-color: #6d9abf;
	  	  --filter-color: #6d9abf;
	  }
	  
	  .filter-darktomato {
	  	  border-color: #c64964;
	  	  --filter-color: #c64964;
	  }

	  .filter-fern {
	  	  border-color: #61ad5f;
	  	  --filter-color: #61ad5f;
	  }

	  .filter-amythyst {
	  	  border-color: #ab67c6;
	  	  --filter-color: #ab67c6;
	  }

	  .filter-goldish {
	  	  border-color: #b5b52f;
	  	  --filter-color: #b5b52f;
	  }
	  
	  .filter-skyblue {
	  	  border-color: #87cefa;
	  	  --filter-color: #87cefa;
	  }
	  
	  .filter-tangerine {
	  	  border-color: #ffa07a;
	  	  --filter-color: #ffa07a;
	  }

	  .filter-limegreen {
	  	  border-color: #93de65;
	  	  --filter-color: #93de65;
	  }

	  .filter-lavender {
	  	  border-color: #e171e2;
	  	  --filter-color: #e171e2;
	  }

	  .filter-chenin {
	  	  border-color: #dbdb64;
	  	  --filter-color: #dbdb64;
	  }
	  
	  .filter-deepblue {
	  	  border-color: #998af2;
	  	  --filter-color: #998af2;
	  }

	  .filter-deeppink {
	  	  border-color: #ff68a9;
	  	  --filter-color: #ff68a9;
	  }
	  
	  .filter-shamrock {
	  	  border-color: #29db74;
	  	  --filter-color: #29db74;
	  }

	  .filter-viola {
	  	  border-color: #c387be;
	  	  --filter-color: #c387be;
	  }
	  
	  .filter-tan {
	  	  border-color: #d2b48c;
	  	  --filter-color: #d2b48c;
	  }
	  	  
	  .filter {
	  	  position: relative;
	  }

	  .filter-first {
	  	  margin-left:32px;
	  }

	  .filter::before {
	  	  position:absolute;
	  	  content: '';
	  	  display: block;
	  	  height: 100%;
	  	  width: 100%;
	  	  border-radius: 10px;
	  }

	  .filter:hover::before {
	  	  background-color:var(--filter-color);
	  	  filter: brightness(132%);
	  }

	  .filter:hover {
	  	  cursor:grab;
	  }

	  .filter:active {
	  	  cursor: grabbing;
	  }
	  
	  .nobox::after {
	  	content: none !important;
	  }
      
	  .surfer-card-details {
	    margin-left: 0 !important;
	  }      
      
	  .ext-cs-card {
	    width: calc(101%) !important;
	  }      
      
	  /*:host(.filter-item-grid)  [part~="body-cell"] {
		  color: rbga(28, 52, 84, 0.026) !important;
      }
      
	  .icegrid-disabled-row {
		  color: rbga(28, 52, 84, 0.026);
	  }*/
	  
	  .v-dragged {
	      outline: 1px dotted hotpink;
	      background-color: #dae6ee !important;
	      opacity: 0.5;
	  }
	  
      .v-drag-over-target {
	      position:relative;
	      background-color: lightgrey !important;
	      border-radius: 10px;
	  }
      
      .filter-arrow {
      	  width: 45px;
      	  height: 25px;
      	  background-color:var(--filter-color);
      	  position:relative;
      	  color: black;
      	  line-height: 25px;
      	  text-align: center;
      	  margin-left: 10px;
      	  font-size: 14px;
      	  font-weight: bold;
      }
      
      .filter-arrow::before {
      	  content: '';
      	  position: absolute;
      	  top: 0;
      	  left: -10px;
      	  width: 0;
      	  height: 0;
      	  
      	  border-top: 12.5px solid var(--filter-color);
      	  border-bottom: 13.5px solid var(--filter-color);
      	  border-left: 10px solid transparent;
      }

      .filter-arrow::after {
      	  content: '';
      	  position: absolute;
      	  left: 45px;
      	  bottom: 0;
      	  width: 0;
      	  height: 0;
      	  
      	  border-top: 12.5px solid transparent;
      	  border-bottom: 13.5px solid transparent;
      	  border-left: 15px solid var(--filter-color);
      }

      .ice-tab {
        background: transparent;
        color: #4c6eac;
        flex-grow: 1;
        height: 36px;
      }

      .ice-tab-selected {
        background: #4c6eac;
        font-weight: bold;
        color: white;
        flex-grow: 1;
        height: 36px;
      }
    
      .ice-tab:hover {
          font-weight: bold !important;
          background-color: #dae6ee !important;
			    color: #215f90 !important;
      } 

	  .ice-button {
		    text-rendering: auto;
		    color: initial;
		    letter-spacing: normal;
		    word-spacing: normal;
		    text-transform: none !important;
		    text-indent: 0px;
		    text-shadow: none;
		    display: inline-block;
		    text-align: start;
		    box-shadow: 2px 2px 0 0 #215f90;
		    margin: 0 5px;
		    font: 400 13.3333px Arial; 
		    font-weight: 400 !important;
		    margin: 5px;
		    position: relative !important;           
      }
      
	  .ice-button:active {
			box-shadow: 0 0 1px 0 #215f90 inset;
	    	
	  } 
	  
	  .activecircle {
	  		pointer-events: all;
	  }
	  
	  .nonactivecircle {
	  		pointer-events: none;
	  }
	  
	  .activecircle:hover {
			stroke-width: 2px !important;
			/*fill: rgba(0,0,0,0.5);*/
			filter: brightness(80%);
  			/*box-shadow: inset 0em 0em 1000em 1000em rgba(0, 0, 0, 0.9);*/
       		/*fill: #E57B7B !important;*/
	  }
      
      .bottom-button {
      		position: absolute !important;
      		bottom: 12px;
      		left:18px;
      }  
      
      .info-drag div.draggable {
      	display:table;
      	padding-bottom:45px;
      	padding-top:18px;
      }

      .short-button {
      		height: 16px !important;
      		padding: 0.25rem !important;
      		line-height: 16px !important;
      }  
      
      .short-button iron-icon {
      		width: 12px !important;
      		height: 12px !important;
      		position: relative;
      		top: -5px;
      }
      
      .ice-downloader-xl {
      		display: block;
      		width: 43px;
      		height: 50px;
      		background: url(images/excel-triple-small.png) no-repeat top;
      }
       
      .ice-downloader-xl:hover {
      		background: url(images/excel-triple-small.png) no-repeat center;
      } 
       
      .ice-downloader-xl:active {
      		background: url(images/excel-triple-small.png) no-repeat bottom;
      }
       
      .ice-downloader-txt {
      		display: block;
      		width: 43px;
      		height: 50px;
      		background: url(images/txt-triple-small.png) no-repeat top;
      }
      
      .ice-downloader-txt:hover {
      		background: url(images/txt-triple-small.png) no-repeat center;
      } 
       
      .ice-downloader-txt:active {
      		background: url(images/txt-triple-small.png) no-repeat bottom;
      }
  
      .ice-downloader-pdf {
      		display: block;
      		width: 43px;
      		height: 50px;
      		background: url(images/pdf-triple-small.png) no-repeat top;
      }
       
      .ice-downloader-pdf:hover {
      		background: url(images/pdf-triple-small.png) no-repeat center;
      } 
       
      .ice-downloader-pdf:active {
      		background: url(images/pdf-triple-small.png) no-repeat bottom;
      }
       
      .ice-downloader-sdf {
      		display: block;
      		width: 43px;
      		height: 50px;
      		background: url(images/sdf-triple-small.png) no-repeat top;
      }
       
      .ice-downloader-sdf:hover {
      		background: url(images/sdf-triple-small.png) no-repeat center;
      } 
       
      .ice-downloader-sdf:active {
      		background: url(images/sdf-triple-small.png) no-repeat bottom;
      }
       
      /*:host(.detail-item-grid) [part~="row"] {
            height: 20px !important;
		    min-height: 20px !important;
		    font-size: 10px !important;
	  }*/
		
      :host(.detail-item-grid) [part~="body-cell"] {
		    height: 20px !important;
		    min-height: 20px !important;
		    font-size: 10px !important;
	  }
		
      :host(.item-detail-grid) [role~="gridcell"] {
		    height: 20px !important;
		    min-height: 20px !important;
		    font-size: 10px !important;
      }
		
      :host(:not([theme~="no-row-borders"])) [part~="cell"]:not([part~="details-cell"]) {
		    min-height: 20px !important;
      }
		
      .detail-item-grid [part="row"] {
      		height: 20px;
      }

	:host(.detail-item-grid-noscroll) [role~="gridcell"] .sizer {
		 display: none;
	}

	:host(.detail-item-grid-noscroll) #table {
	    overflow: hidden;
	}
       
	.detail-item-grid-noscroll #table {
	    overflow: hidden;
	}  
       
      .scrollable {
        padding: var(--lumo-space-m);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }

      .count {
        display: inline-block;
        background: var(--lumo-shade-10pct);
        border-radius: var(--lumo-border-radius);
        font-size: var(--lumo-font-size-s);
        padding: 0 var(--lumo-space-s);
        text-align: center;
      }

      .total {
        padding: 0 var(--lumo-space-s);
        font-size: var(--lumo-font-size-l);
        font-weight: bold;
        white-space: nowrap;
      }
      
      .sidebar.aggregate ul li a::before {
      	content: normal !important;
      }
      
      
      div[part="summary"]{
      --lumo-space-s: 2px !important;
	}

      @media (min-width: 600px) {
        .total {
          min-width: 0;
          order: 0;
          padding: 0 var(--lumo-space-l);
        }
      }

      @media (max-width: 600px) {
        search-bar {
          order: 1;
        }
      }
      
      .workflower {
      	display:flex;
      }
      
	  @media screen and (max-width: 1134px) {
		.workflower {
			display:table;
		}
	  }		

      .flex {
        display: flex;
      }

      .flex1 {
        flex: 1 1 auto;
      }

      .bold {
        font-weight: 600;
      }

      flow-component-renderer[theme="dialog"],
      flow-component-renderer[theme="dialog"] > div {
        display: flex;
        flex-direction: column;
        flex: auto;
      }
      
      .assaypnl {
      		display:table-cell;
      }
      
      .mbgrid {
      		width: 100%;
      }
      
      @media screen and (max-width: 1134px) {
         .rightpnl {
			margin-top:20px !important;
		 }
	     .assaypnl {
			display:table-footer-group !important;
			margin-top:20px;
			width: calc((var(--main-vw) - 210px)) !important;
	     }
	     
	     .mbgrid {
			width: calc((var(--main-vw) - 300px)) !important;
	     }
	  }
      
/* vaadin themeFor styles*/

vaadin-text-field.shorter-field::part(input-field) {
  height: 25px !important;
}

vaadin-text-field::part(label) {
  font-weight: normal !important;
  line-height: 1 !important;
  font-size: 12px !important;
}

vaadin-text-field > input {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

vaadin-text-field[disabled] > input {
  background-color: transparent !important;
  border: none !important;
}

vaadin-text-field::part(input-field) {
  background-color: transparent !important;
  border: 1px dashed var(--lumo-contrast-30pct) !important;
}

vaadin-text-field:hover:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}

vaadin-text-field[focused]:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}

/* Optional: if text fields inside a filter-item-grid should all be shorter */
.filter-item-grid vaadin-text-field::part(input-field) {
  height: 25px !important;
}

/* Multi Select Combo Box styling migrated from themeFor to global CSS */

vaadin-multi-select-combo-box::part(input-field) {
  background-color: transparent !important;
  border: 1px dashed var(--lumo-contrast-30pct) !important;
}

vaadin-multi-select-combo-box::part(label) {
  font-size: 12px !important;
  padding-bottom: 4px !important;
  font-weight: normal !important;
  line-height: 1 !important;
}

vaadin-multi-select-combo-box[disabled] > input {
  background-color: transparent !important;
  border: none !important;
}

vaadin-multi-select-combo-box:hover:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}

vaadin-multi-select-combo-box[focused]:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}

/* Accordion Panel styling migrated from themeFor to global CSS */

vaadin-accordion-panel {
  border-bottom: solid 3px var(--lumo-contrast-10pct) !important;
}

vaadin-accordion-panel::part(content) {
  padding: 0 0 var(--lumo-space-s) !important;
}

vaadin-accordion-panel.viz-accordion-panel::part(content) {
  left: 40px;
  position: absolute;
  background-color: white;
  border: 1px solid black;
}

vaadin-accordion-panel.viz-legend-accordion-panel::part(content) {
  left: 10px;
  position: absolute;
  background-color: white;
}

/* Checkbox styling migrated from themeFor to global CSS */

vaadin-checkbox.ivive-chkbox > label {
  margin: unset !important;
  font-weight: normal !important;
  line-height: 1 !important;
}

.filter-grid-disabled-row vaadin-checkbox[checked]::part(checkbox) {
  background-color: #DBDFE4 !important;
}

.visualizer-header vaadin-checkbox::part(checkbox) {
  margin: unset;
  top: 3px;
  position: relative;
}

.visualizer-header vaadin-checkbox > label {
  top: 3px !important;
  position: relative !important;
  font-weight: normal !important;
  line-height: 1 !important;
}

/* Combo Box styling migrated from themeFor to global CSS */

vaadin-combo-box::part(input-field) {
  background-color: transparent !important;
  border: 1px dashed var(--lumo-contrast-30pct) !important;
}

vaadin-combo-box::part(label) {
  font-weight: normal !important;
  line-height: 1 !important;
  font-size: 12px !important;
}

vaadin-combo-box[disabled] > input {
  background-color: transparent !important;
  border: none !important;
}

vaadin-combo-box:hover:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}

vaadin-combo-box[focused]:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}

/* Dialog styling migrated from themeFor / overlay targeting to global CSS */

vaadin-dialog[theme~="item-detail-dialog"]::part(content) {
  padding: 5px 0 0 !important;
  overflow: unset;
}

/* Grid styling migrated from themeFor to global CSS */

/* Disabled rows / cells */
vaadin-grid.filter-item-grid::part(filter-grid-disabled-row) {
  color: #DBDFE4 !important;
  background-color: white !important;
  background-image: unset !important;
  --vaadin-grid-cell-background: white;
}

vaadin-grid.filter-item-grid::part(body-cell):is([part~="filter-grid-disabled-row"]) {
  color: #DBDFE4 !important;
  background-color: white !important;
  background-image: unset !important;
}

vaadin-grid.filter-item-grid::part(row):is([part~="filter-grid-disabled-row"]) {
  color: #DBDFE4 !important;
  background-color: white !important;
  background-image: unset !important;
  pointer-events: none;
  --vaadin-grid-cell-background: white;
}

/* First-column width helper */
vaadin-grid.text-item-grid::part(first-column-cell) {
  width: 30px !important;
}

/* Short header */
vaadin-grid.short-header::part(header-cell) {
  height: 36px;
  min-height: 36px;
}

/* Filtered rows */
vaadin-grid.select-row-grid::part(filtered-row) {
  background: #e5e5e5;
  text-decoration: line-through;
  color: #c7c7c7;
  --vaadin-grid-cell-background: #e5e5e5;
}

/* Detail grid sizing */
vaadin-grid.detail-item-grid::part(small-row) {
  height: 32px !important;
  min-height: 30px !important;
  font-size: 16px !important;
}

vaadin-grid.detail-item-grid::part(body-cell) {
  height: 32px !important;
  min-height: 30px !important;
  font-size: 16px !important;
}

vaadin-grid.detail-item-grid::part(cell):not([part~="details-cell"]) {
  min-height: 32px !important;
}

vaadin-grid.detail-item-grid::part(header-cell) {
  padding: 0 !important;
}

/* Overlay grid disabled rows */
vaadin-grid.overlay-item-grid::part(small-row-disabled) {
  background: #e5e5e5;
  text-decoration: line-through;
  color: #c7c7c7;
  --vaadin-grid-cell-background: #e5e5e5;
}

/* Overlay grid sizing */
vaadin-grid.overlay-item-grid::part(body-cell) {
  height: 28px !important;
  min-height: 28px !important;
  font-size: 14px !important;
}

vaadin-grid.overlay-item-grid::part(cell):not([part~="details-cell"]) {
  min-height: 28px !important;
}

vaadin-grid.overlay-item-grid::part(header-cell) {
  padding: 0 0 0 20px !important;
}

/* Menu Bar Button styling migrated from themeFor to global CSS */

vaadin-menu-bar-button {
  cursor: pointer;
}

vaadin-menu-bar-button:hover {
  font-weight: bold !important;
  background-color: #dae6ee !important;
  color: #215f90 !important;
}

/* Number Field styling migrated from themeFor to global CSS */

vaadin-number-field.shorter-field::part(input-field) {
  height: 25px !important;
}

vaadin-number-field::part(label) {
  font-weight: normal !important;
  line-height: 1 !important;
  font-size: 12px !important;
}

vaadin-number-field > input {
  border: none !important;
}

vaadin-number-field[disabled] > input {
  background-color: transparent !important;
  border: none !important;
}

vaadin-number-field::part(input-field) {
  background-color: transparent !important;
  border: 1px dashed var(--lumo-contrast-30pct) !important;
}

vaadin-number-field:hover:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}

vaadin-number-field[focused]:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}

/* Optional: if all number fields inside a filter-item-grid should be shorter */
.filter-item-grid vaadin-number-field::part(input-field) {
  height: 25px !important;
}

/* Radio Button styling migrated from themeFor to global CSS */

/* Label styling */
vaadin-radio-button {
  --vaadin-radio-button-label-font-size: 14px;
  --vaadin-radio-button-label-line-height: 1;
}

/* If your theme supports it, keep label weight normal explicitly */
vaadin-radio-button > label {
  font-weight: normal !important;
  line-height: 1 !important;
  font-size: 14px !important;
}

/* Optional special-case styling when placed inside a filter-item-grid */
.filter-item-grid vaadin-radio-button {
  margin: 0;
}

/* Hover styling should target the radio marker, not a nonexistent input-field */
vaadin-radio-button:hover::part(radio) {
  background-color: transparent !important;
}

/* Disabled state */
vaadin-radio-button[disabled] > label {
  opacity: 1;
}

/* Radio Group styling migrated from themeFor to global CSS */

vaadin-radio-group.plot-selector::part(label) {
  font-weight: bold;
  font-size: 16px;
}

vaadin-radio-group::part(label) {
  padding-bottom: 2px !important;
}

/* Text Area styling migrated from themeFor to global CSS */

vaadin-text-area::part(input-field) {
  background-color: transparent !important;
  border: 1px dashed var(--lumo-contrast-30pct) !important;
}

vaadin-text-area::part(input-field)::after {
  background-color: transparent !important;
  opacity: 1;
  border: 1px dashed var(--lumo-contrast-30pct);
}

vaadin-text-area[disabled] > textarea {
  background-color: transparent !important;
  border: none !important;
}

vaadin-text-area > textarea {
  background-color: transparent !important;
  border: none !important;
}

vaadin-text-area:hover:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}

vaadin-text-area[focused]:not([readonly])::part(input-field) {
  border: 1px dashed var(--lumo-contrast-60pct) !important;
}