/*!**********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/01_globals.css ***!
  \**********************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap);
/*!*******************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/@elsci-io/ui-essential/dist/bundle.css ***!
  \*******************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0);
/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/01_globals.css (1) ***!
  \**************************************************************************************/
* {
	font-family: Lato, sans-serif;
	-webkit-font-smoothing: antialiased;
}

*, :after, :before {
	box-sizing : border-box;
}

@font-face{
	font-family : 'Material Symbols Outlined';
	font-style  : normal;
	font-weight : 400;
	src         : url(/ui/font/materialIconsOutlined.woff2) format('woff2');
}

:root {
	--theme-element-background     : white;
	--md-theme-background             : rgb(238, 238, 238);
	--theme-background-on-hover   	  : rgb(238, 238, 238);
	--md-theme-input-border           : rgb(127, 127, 127);
	--theme-input-border-error     : rgb(229, 57, 53);
	--theme-text-primary-on-light  : rgba(0, 0, 0, 0.87);
	--theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
	--theme-text-hint-on-light     : rgba(0, 0, 0, 0.38);
	--theme-primary               : rgb(6, 95, 212);
	--theme-primary-light         : rgba(6, 95, 212, .1);
	--theme-primary-light-hover   : rgba(6, 95, 212, .2);
	--theme-primary-light-active  : rgba(6, 95, 212, .3);
	--theme-text-primary-on-dark       : white;
	--theme-secondary             : #018786;
	--theme-error                 : #b00020;
	--icon-team                   : rgba(6, 95, 212, 0.63);
	--theme-secondary-light       : rgba(1, 135, 134, 0.5);
	--box-shadow                      : 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
	--card-text-color                 : rgba(0, 0, 0, .5);
	--font-size-secondary             : 0.875rem;
	--list-background-on-hover-color  : rgba(0, 0, 0, 0.04);
	--list-background-secondary-color : #f9f9f9;
	--border-color                    : #dee2e6;
	--border-width                    : 0.0625rem;
	--border-radius                   : 0.375rem;
	--plain-border                    : var(--border-width) solid var(--border-color);
	--background-button-disabled      : rgba(0, 0, 0, 0.1);
	--background-button-text-active   : rgba(0, 0, 0, 0.1);
	--background-button-text-hover    : rgba(0, 0, 0, 0.04);
	--box-shadow-hover                : 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
	--page-header-box-shadow          : 0 0 10px rgba(0, 0, 0, 0.5);
	--page-header-title-line-height   : 2.5rem;
	--vis-shadow-color                : rgba(0, 208, 22);
	--vis-shadow-forbidden-color      : rgba(246, 129, 129, 0.7);
	--footer-height: 11rem;
	--table-border: 1px solid #ddd;
}

@-webkit-keyframes indeterminate{
	0%{
		left  : -35%;
		right : 100%;
	}
	60%{
		left  : 100%;
		right : -90%;
	}
	100%{
		left  : 100%;
		right : -90%;
	}
}

@keyframes indeterminate{
	0%{
		left  : -35%;
		right : 100%;
	}
	60%{
		left  : 100%;
		right : -90%;
	}
	100%{
		left  : 100%;
		right : -90%;
	}
}

@-webkit-keyframes indeterminate-short{
	0%{
		left  : -200%;
		right : 100%;
	}
	60%{
		left  : 107%;
		right : -8%;
	}
	100%{
		left  : 107%;
		right : -8%;
	}
}

@keyframes indeterminate-short{
	0%{
		left  : -200%;
		right : 100%;
	}
	60%{
		left  : 107%;
		right : -8%;
	}
	100%{
		left  : 107%;
		right : -8%;
	}
}

html {
	height     : 100%;
	scroll-padding-top: 80px; /* for header when navigate inside of the page */
}

body {
	background : white;
	margin     : 0;
	width      : 100%;
	min-height : 100%; /* do not use vh because in this case we get redundant vertical scroll when page has horizontal scroll*/
	display: flex;
	flex-direction: column;
}

.injection-page-body, .batch-page-body {
	background : var(--md-theme-background);
}

ul {
	list-style : none;
	margin     : 0;
	padding    : 0;
}

text{
	user-select : none;
}

svg{float : left;}

p{
	margin : 0;
	cursor : default;
}

input{
	display       : block;
	width         : 5em;
	border        : none;
	border-bottom : 1px solid var(--md-theme-input-border);
	color         : var(--theme-text-primary-on-light);
	outline       : 0;
	padding       : 16px 0 8px 0;
	cursor        : text;
}

input.error{
	border-bottom : 1px solid var(--theme-input-border-error);
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
	-webkit-appearance : none;
	margin             : 0;
}

input[type=number]{-moz-appearance : textfield;}

input[type=checkbox]{
	cursor : pointer;
}
input[type=checkbox][disabled]{
	cursor : default;
}

input::placeholder{opacity : 0.5;}

.search-input{
	position : relative;
	padding  : 1rem 0 0.5rem 0;
	height   : 2rem;
	width    : 18.5rem;
	display  : inline-block;
}

.search-input.sampleList{
	left : 50%;
}

.search-input input{
	font-size        : 1rem;
	line-height      : 1rem;
	margin           : 0;
	padding          : 0.5rem 0;
	width            : 100%;
	text-align       : left;
	background-color : transparent;
}

.search-input input:focus{
	outline : none;
}

.search-input label{
	position           : absolute;
	left               : 0;
	top                : 1.625rem;
	width              : 100%;
	color              : var(--theme-text-hint-on-light);
	font-size          : 1rem;
	line-height        : 1rem;
	font-weight        : normal;
	pointer-events     : none;
	transition         : 0.2s ease all;
	-moz-transition    : 0.2s ease all;
	-webkit-transition : 0.2s ease all;
}

.search-input input:focus ~ label{
	top       : 0;
	font-size : 0.75rem;
	color     : var(--theme-text-primary-on-light);
}

.search-input label.not-empty{
	top       : 0;
	font-size : 0.75rem;
}

.search-input .bar{
	display            : block;
	width              : 0;
	margin-left        : 50%;
	height             : 1px;
	background         : var(--theme-text-primary-on-light);
	opacity            : 0;
	transition         : 0.2s ease all;
	-moz-transition    : 0.2s ease all;
	-webkit-transition : 0.2s ease all;
}

.search-input input:focus ~ .bar{
	opacity     : 1;
	width       : 100%;
	margin-left : 0;
}

.search-input #total{
	float       : left;
	margin-top  : 8px;
	font-size   : 14px;
}

.page-title{text-align : center;}


.clickable {
	cursor : pointer;
}

dialog {
	border: none;
	border-radius : var(--border-radius);
	box-shadow: var(--box-shadow);
	outline: none;
}

.resource-not-found-message-container {
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	padding-top: 4rem;
	gap: 1rem;
	width: 100%;
}

.account-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
	font-weight: bold;
	font-size: 0.85rem;
	height: 2rem;
	width: 2rem;
	border-radius: 50%;
	color: white;
	opacity: 0.6;
	flex-shrink: 0;
}

.user-icon__initials {
	text-decoration: none;
}

label:has(input[type="checkbox"][disabled]) {
	cursor: default;
	color: var(--mdc-theme-text-disabled-on-background);
}
/*!**********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/01_helpers.css ***!
  \**********************************************************************************/
.not-displayed {
    display: none !important;
}
.form-row {
    margin-bottom: .75em;
}
.form-row--n-elements {
    display: grid;
    /*Can put as many elements you wish, while auto-fit will extend them as much as possible*/
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 1em;
}
.form-row__input-w-label {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
}
.form-row__input-w-icon {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px;
}
.form-row__label {
    margin-bottom: .7em;
}

.form-row__title {
    padding : 0.25rem 0 1rem;
    color   : var(--theme-text-secondary-on-light);
}

.outlined-button {
    border: 1px solid var(--theme-primary);
    color: var(--theme-primary);
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
}
.outlined-button:active {
    background: var(--theme-primary-light);
}
.link-icon {
    color: inherit;
    opacity: 0.5;
    text-decoration: none;
    width: fit-content;
    display: inline-block;
    transition: 250ms;
}
.link-icon:visited {
    color:inherit;
    text-decoration: none;
}
.link-icon:hover, .link-icon:active {
    color:inherit;
    text-decoration: none;
    opacity: 1;
}
.material-symbols-outlined--help {
    /*For some reason "help" icon takes twice in width as in height. Overriding this*/
    width: 1em;
}

.justify-start {
    margin-right : auto;
}

.justify-end {
    margin-left : auto;
}

.visually-hidden {
    display: none !important;
}

.scroll-hidden {
    overflow: hidden !important;
}

/*!************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_accordion.css ***!
  \************************************************************************************/
.accordion__item {
    background-color : var(--theme-element-background);
    border           : var(--plain-border);
}

.accordion__item:first-of-type {
    border-top-left-radius  : var(--border-radius);
    border-top-right-radius : var(--border-radius);
}

.accordion__item:not(:first-of-type) {
    border-top : 0;
}

.accordion__item:last-of-type {
    border-bottom-right-radius : var(--border-radius);
    border-bottom-left-radius  : var(--border-radius);
}

.accordion__item-header {
    display         : flex;
    padding         : 0.75rem 1rem;
    justify-content : space-between;
    align-items     : center;
}

.accordion__item:not([collapsed]) > .accordion__item-header {
    box-shadow : inset 0 calc(-1 * var(--border-width)) 0 var(--border-color);
}

.accordion__item:not([collapsed]) .accordion__item-header {
    box-shadow : inset 0 calc(-1px) 0 var(--border-color);
}

.accordion__collapse-icon {
    color     : var(--theme-text-secondary-on-light);
    transform : rotate(-180deg);
    font-size : 1.25rem;
}

.accordion__item[collapsed] .accordion__collapse-icon {
    transform : rotate(0deg);
}

.accordion__item[collapsed] > .accordion__inner {
    display : none;
}
/*!***************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_action-icons.css ***!
  \***************************************************************************************/
.action-icons {
    display     : flex;
    align-items : center;
    gap         : 0.25rem;
    padding     : 0.25rem 0.5rem;
}

.action-icons__item {
    font-size   : 1rem;
    line-height : 1.25rem;
    padding     : 0.25rem;
    color       : var(--theme-text-hint-on-light);
}
.action-icons__item--after-input {
    font-size   : 1.3rem;
    padding: 0;
}

.action-icons__item:not(.action-icons__item--disabled):hover {
    cursor : pointer;
    color  : var(--theme-text-primary-on-light);
}

.action-icons__item--disabled:hover {
    cursor : not-allowed;
}

/*!*********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_button.css ***!
  \*********************************************************************************/
.button {
	min-width       : 3rem;
	min-height      : 2.25rem;
	font-size       : 0.875rem;
	line-height     : 1;
	border-radius   : 0.25rem;
	letter-spacing  : 0.09em;
	font-weight     : 500;
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	cursor          : pointer;
	padding         : 0 1rem;
}

.button[disabled] {
	cursor: default;
	color          : var(--theme-text-hint-on-light);
}

.button--contained {
	background : var(--theme-primary);
	color      : var(--theme-text-primary-on-dark);
	border     : 1px solid var(--theme-primary);
	box-shadow : var(--box-shadow);
	transition : box-shadow cubic-bezier(0.4, 0, 0.2, 1);
}

.button--contained[disabled] {
	background     : var(--background-button-disabled);
	box-shadow     : none;
	border         : 1px solid transparent;
}

.button--contained:hover {
	opacity    : 0.9;
	box-shadow : var(--box-shadow-hover);
}

.button--contained[disabled]:hover {
	opacity    : unset;
	box-shadow : unset;
}

.button--contained:active {
	opacity : 0.8;
}

.button--outlined {
	background : none;
	color      : var(--theme-primary);
	border     : 1px solid var(--theme-primary);
}

.button--outlined[disabled] {
	border : 1px solid var(--theme-text-hint-on-light);
}

.button--outlined:hover {
	background : var(--background-button-text-hover);
}

.button--outlined[disabled]:hover {
	background : unset;
}

.button--outlined:active {
	background : var(--background-button-text-active);
}

.button--text {
	border     : none;
	background : none;
	color      : var(--theme-primary);
	/* If you need underlined text in a button, then use '.button--link' class */
	text-decoration: none;
}

.button--text:hover {
	background : var(--background-button-text-hover);
}

.button--text[disabled]:hover {
	background : unset;
}

.button--text:active {
	background : var(--background-button-text-active);
}

.button--text-red {
	color      : var(--theme-error);
}

.button-group {
	display       : inline-flex;
	box-shadow    : var(--box-shadow);
	border-radius : 0.25rem;
}

.button-group[disabled] {
	pointer-events : none;
	box-shadow     : none;
}

.button-group__button {
	min-width       : 3rem;
	min-height      : 2.25rem;
	font-size       : 0.875rem;
	line-height     : 1;
	border-radius   : 0.25rem;
	letter-spacing  : 0.09em;
	font-weight     : 500;
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	cursor          : pointer;
	padding         : 0 1rem;
	background      : var(--theme-primary);
	color           : var(--theme-text-primary-on-dark);
	border          : 1px solid var(--theme-primary);
	transition      : box-shadow cubic-bezier(0.4, 0, 0.2, 1);
}

.button-group__button:hover {
	opacity    : 0.9;
	box-shadow : var(--box-shadow-hover);
}

.button-group__button:active {
	opacity : 0.8;
}

.button-group[disabled] .button-group__button {
	color      : var(--theme-text-hint-on-light);
	background : var(--background-button-disabled);
	border     : 1px solid transparent;
}

.button-group[disabled] .button-icon {
	fill : var(--theme-text-hint-on-light);
}

.button-group__button--left {
	border-radius : 0.25rem 0 0 0.25rem;
}

.button-group__button--right {
	border-radius : 0 0.25rem 0.25rem 0;
	min-width     : 0;
	padding       : 0;
}

.button-icon {
	fill   : var(--theme-text-primary-on-dark);
	width  : 1.5rem;
	height : 1.5rem;
}

.button--floating {
	position: fixed;
	top: 90%;
	left: 90%;
	height: 56px;
	width: 56px;
	border-radius: 50%;
}

.button--link {
	border: none;
	background: unset;
	font-size: inherit;
	padding: 0;
	color: var(--theme-primary);
	text-decoration: underline;
	cursor: pointer;
}
/*!************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_container.css ***!
  \************************************************************************************/
.container {
    display          : flex;
    flex-direction   : column;
    justify-content  : center;
    align-items      : center;
    background-color : var(--theme-element-background);
    border           : var(--plain-border);
    border-radius    : var(--border-radius);
}

.container__header {
    display       : flex;
    flex-direction: column;
    width         : 100%;
    padding       : 0 1rem;
}

.container__title {
    font-size : 1.25rem;
}

.container__header-row {
    margin: 1rem 0;
    display: flex;
    justify-content: space-between;
}

.container__header-title{
    margin: 0;
    font-weight: 400;
}

.container__header-icon {
    display: none;
    font-size: 1rem;
    line-height: 1.25rem;
    padding: 0.25rem;
    color: var(--theme-text-hint-on-light);
}

.container__header-icon:hover{
    cursor: pointer;
    color: var(--theme-text-primary-on-light);
}

/* Should be uncomment when we edit team description  */
/*.container__header:hover .container__header-icon {*/
/*    display: inline-block;*/
/*}*/

.container__header-description {
    padding-bottom: 1rem;
}

.container__header-description:empty {
    display: none;
}

.container__body {
    width : 100%;
    padding: 1rem;
}
/*!***********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/@elsci-io/ui-essential/dist/bundle.css (1) ***!
  \***********************************************************************************************************/
list-box ul{display:grid;position:absolute;margin:0;box-shadow:var(--box-shadow);background-color:var(--theme-element-background);grid-template-columns:1fr;max-height:10rem;padding:0;border-radius:.375rem;color:var(--theme-text-primary-on-light);z-index:9;overflow-y:auto;max-width:100%}list-box li{display:flex;align-items:center;padding:0 .75rem;min-height:2rem;color:var(--theme-text-primary-on-light);cursor:pointer;background-color:var(--theme-element-background)}list-box li[hidden]{display:none}list-box li:hover,.list-box__item--active{background-color:var(--list-background-on-hover-color)}list-box li mark{font-weight:600;background-color:unset}text-input{--text-input__small-font-size: .75rem;--text-input__error-line-height: 1rem;--text-input__label__left-padding: .25rem;position:relative;padding-top:1.25rem;font-size:1rem;display:block;overflow-x:clip}.text-input__input{width:100%;box-sizing:border-box;border:none;border-bottom:1px solid #ddd;outline:none;padding:.1rem 0 .1em var(--text-input__label__left-padding);font-size:1rem;color:var(--theme-text-primary-on-light)}.text-input__input[disabled]{opacity:.5;cursor:default;background:#fff}.text-input__input:focus{border-bottom:1px solid var(--theme-primary)}.text-input__input::placeholder{color:rgba(0,0,0,0);user-select:none;-webkit-user-select:none}text-input.placeholder-shown .text-input__input::placeholder{color:var(--theme-text-hint-on-light)}.text-input__label{position:absolute;color:var(--theme-text-hint-on-light);bottom:2.25rem;left:0;margin:0;pointer-events:none;transform-origin:0 0;transform:translate3d(var(--text-input__label__left-padding), 1rem, 0);transition:.1s ease-in-out}.text-input__input:not(:focus):not(:placeholder-shown)+.text-input__label{color:var(--theme-text-hint-on-light)}.text-input__input:focus+.text-input__label{transform:translate(var(--text-input__label__left-padding), -0.375rem);font-size:var(--text-input__small-font-size);color:var(--theme-primary)}.text-input__input:not(:placeholder-shown)+.text-input__label{transform:translate(var(--text-input__label__left-padding), -0.375rem);font-size:var(--text-input__small-font-size)}text-input.placeholder-shown .text-input__label{transform:translate(var(--text-input__label__left-padding), -0.375rem);font-size:var(--text-input__small-font-size)}.text-input__input:invalid+.text-input__label{color:var(--theme-input-border-error)}.text-input__input:invalid{border-bottom:1px solid var(--theme-input-border-error)}.text-input__input:invalid:not(:focus):not(:placeholder-shown)+.text-input__label{color:var(--theme-input-border-error)}.text-input__error{margin:0;font-size:var(--text-input__small-font-size);height:var(--text-input__error-line-height);color:var(--theme-input-border-error);padding-left:var(--text-input__label__left-padding);text-align:start}.text-input--with-right-icon .text-input__input,.text-input--select .text-input__input{padding-right:1rem}.text-input__trailing-icon{position:absolute;right:0;bottom:1rem;font-size:1rem;cursor:pointer;color:var(--theme-text-secondary-on-light)}text-input[disabled] .text-input__trailing-icon{display:none !important}text-input[disabled] .text-input__input{padding-right:0 !important}.text-input__input[type=number]::-webkit-outer-spin-button,.text-input__input[type=number]::-webkit-inner-spin-button,.text-input__input[type=number]{-webkit-appearance:none;margin:0;-moz-appearance:textfield !important}.text-input__trailing-icon:hover{color:var(--theme-text-primary-on-light)}.text-input__input:placeholder-shown+label+.text-input__trailing-icon{display:none}.text-input__input:not(:placeholder-shown)+label+.text-input__trailing-icon{display:block}.text-input__input[readonly]{cursor:pointer}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 48}select-input{height:4rem;width:100%;display:inline-block}select-input list-box{display:none;margin-top:3rem;position:fixed;z-index:9}select-input list-box[open]{display:block}select-input text-input{cursor:pointer}select-input text-input .text-input__trailing-icon{pointer-events:none}select-input[disabled]{cursor:default}typeahead-input{display:inline-block;width:100%;height:4rem}typeahead-input list-box{display:none;margin-top:3rem;position:fixed;z-index:9}typeahead-input list-box[open]{display:block}typeahead-input.dropdown-select text-input .text-input__input{pointer-events:none}edit-text{display:inline-block;max-width:100%}.edit-text__popup{max-width:100%;min-width:8rem;width:auto;box-shadow:var(--box-shadow);position:absolute;border:none;margin:-0.7rem 0 0 -0.75rem;padding:0}.edit-text__popup text-input{width:calc(100% - 1rem);padding-top:0;margin:.5rem .5rem 1rem}.edit-text__popup .text-input__error{height:unset}.edit-text__popup::backdrop{background:rgba(0,0,0,0)}.edit-text__popup .text-input--with-right-icon .text-input__input{padding-right:0}edit-text .edit-text__text{text-decoration:underline;cursor:pointer;font-weight:normal}edit-text[disabled] .edit-text__text{text-decoration:none;cursor:default;pointer-events:none}edit-text[incorrect] .edit-text__text{color:var(--theme-input-border-error)}.edit-text__text[empty-value]{font-style:italic}.snackbar-container{--snackbar-background-color: rgb(51, 51, 51);--snackbar-background-color-hover: rgb(84, 84, 84);--snackbar-text-label-color: rgba(255, 255, 255, 0.87);--snackbar-text-action-color: rgb(187, 134, 252);--snackbar-text-action-disabled-color: rgb(140, 140, 140);z-index:8;margin:.5rem;position:fixed;right:0;bottom:0;left:0;display:flex;align-items:start;justify-content:center;box-sizing:border-box;flex-direction:column;pointer-events:none}.snackbar{pointer-events:all;margin:.5rem;background-color:var(--snackbar-background-color);min-width:344px;box-shadow:var(--box-shadow);max-width:672px;border-radius:4px;display:flex;align-items:center;justify-content:flex-start}@media(max-width: 480px),(max-width: 344px){.snackbar__surface{min-width:100%}}.snackbar__label{color:var(--snackbar-text-label-color)}.snackbar__label{font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.012rem;flex-grow:1;box-sizing:border-box;margin:0;padding:1rem}.snackbar__buttons{margin-left:.5rem;margin-right:.5rem;display:flex;flex-shrink:0;align-items:center;box-sizing:border-box}.snackbar__button-ok{background:var(--snackbar-background-color);color:var(--snackbar-text-action-color);border:none;cursor:pointer;padding:.5rem 1rem;border-radius:.25rem;margin-right:.5rem}.snackbar__button-ok:disabled,.snackbar__button-close:disabled{border:none;color:var(--snackbar-text-action-disabled-color);pointer-events:none}.snackbar__button-ok:hover,.snackbar__button-close:hover{background:var(--snackbar-background-color-hover)}.snackbar__button-close{background:var(--snackbar-background-color);color:var(--snackbar-text-label-color);border:none;cursor:pointer;font-size:1rem;width:1.5rem;height:1.5rem;border-radius:50%;padding:0}.visually-hidden{display:none !important}

/*# sourceMappingURL=bundle.css.map*/
/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_custom-components.css ***!
  \********************************************************************************************/

/*!*********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_footer.css ***!
  \*********************************************************************************/
.footer {
    font-weight: normal;
    font-size: 0.8rem;
    border-top: 1px solid var(--border-color);
    background: transparent;
    height: var(--footer-height);
    flex: 0;
}

.injection-page-body .footer{
    border-top: none;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem 2rem;
    width: 100%;
    max-width: 75rem;
    flex-wrap: wrap;
    margin: 0 auto;
}

.footer-section {
    padding-top: 1rem;
    min-width: 190px;
}

.footer__list-item {
    margin: 0.3rem 0;
}
.footer__link {
    color: black;
    text-decoration: none;
}
.footer__link:hover {
    text-decoration: underline;
}

.footer__address p {
    margin: 0.3rem 0;
    font-style: normal;
}

.footer-section__title {
    font-weight: 400;
    padding-bottom: 0.5rem;
}

/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_html-loader.css ***!
  \**************************************************************************************/
#htmlLoader {
    width: 100%;
    height: 100%;
}

#htmlLoaderIconWrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 50%;
    margin: .5rem 0;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

#htmlLoaderIcon {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #ccc;
    width: 40px;
    height: 40px;
    -webkit-animation: rotate 1s ease-in-out infinite forwards;
    animation: rotate 1s ease-in-out infinite forwards;
}
/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_list.css ***!
  \*******************************************************************************/
.list {
    overflow : hidden;
}

.list__item {
    display     : flex;
    align-items : center;
}

.list__item:hover {
    background-color : var(--list-background-on-hover-color) !important;
}

.list__item--border-bottom:not(:last-of-type) {
    box-shadow : inset 0 calc(-1px) 0 var(--border-color);
}

.list__item-cell:first-of-type {
    padding-left : 1.5rem;
    flex         : 1 1 auto;
}

.list__item-cell--text {
    padding       : 0.5rem;
    overflow      : hidden;
    white-space   : nowrap;
    text-overflow : ellipsis;
    color         : var(--theme-text-primary-on-light);
    font-size     : var(--font-size-secondary);
}

.list__item-cell--text-n-lines {
    display        : flex;
    flex-direction : column;
    padding        : 0.5rem;
    color          : var(--theme-text-primary-on-light);
    font-size      : var(--font-size-secondary);
    line-height    : 1.25rem;
}

.list__item-cell--visible-on-hover {
    visibility : hidden;
}

.list__item:hover > .list__item-cell--visible-on-hover {
    visibility : visible;
}

/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_menu.css ***!
  \*******************************************************************************/
.menu-caller {
    position: relative;
}

.menu {
    display: grid;
    position: absolute;
    right: 0;
    margin: 0;

    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
    background-color: var(--theme-element-background);
    grid-template-columns: 1fr;
    width: max-content;
    padding: 0;
    border-radius: 6px;
    color: var(--theme-text-primary-on-light);
    z-index: 9;
}
.menu--below {
    top: 2em;
}
.menu--left {
    right: 1em;
}
.menu[data-hidden] {
    display: none;
}
.menu__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    min-height: 42px;
    cursor: pointer;
}
.menu__item--disabled {
    /*Can't do
        pointer-events: none;
    because this would prevent tooltips from being shown on hover. So need to do this with JS*/
    color: var(--theme-text-hint-on-light);
}
.menu__hotkey {
    color: var(--theme-text-hint-on-light);
    margin-left: 1em;
    margin-bottom: .1em;
}
.menu__item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.menu__separator {
    height: 1px;
    width: 100%;
    border: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.1);
}
/*!******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_named-list-item.css ***!
  \******************************************************************************************/
.named-list-item {
    padding: .3em 0;
}
.named-list-item.fade-out {
    opacity : 0.4;
}
.named-list-item__title {
    font-size: .75em;
    color: var(--theme-text-hint-on-light);
}
.named-list-item:hover .named-list-item__title {
    color: var(--theme-primary);
}
/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_page-header.css ***!
  \**************************************************************************************/
.page__header {
    display          : flex;
    position         : fixed;
    top              : 0;
    left             : 0;
    right            : 0;
    justify-content  : space-between;
    align-items      : center;
    height           : 4rem;
    padding          : 0.5rem 0 0.5rem 0.75rem;
    color            : var(--theme-text-primary-on-light);
    background-color : var(--theme-element-background);
    z-index          : 9;
    border-bottom: var(--plain-border);
}

.page__header.scroll {
    -webkit-box-shadow: var(--page-header-box-shadow);
    box-shadow: var(--page-header-box-shadow);
}

.page__header .header__title {
    font-weight    : 500;
    letter-spacing : 0.009375em;
    padding        : 0 1rem;
}

/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_popup.css ***!
  \********************************************************************************/
.page-overlay {
    display          : flex;
    position         : fixed;
    z-index          : 4;
    left             : 0;
    top              : 0;
    width            : 100vw;
    height           : 100vh;
    background-color : rgba(0, 0, 0, 0.4);
}
.page-overlay--transparent {
    background-color: transparent;
}

.popup {
    --popup__header__height: 3em;
    --popup__header__top-padding: 24px;
    --popup__header__bottom-padding: 10px;
    --popup__footer__height: 3em;
    --popup__right-padding: 24px;

    margin: auto auto;
    /*need to keep right padding 0 so that the content could extend fully to the right and have its own padding.
     This way its scroll bar will touch popup right border instead of being padded.*/
    padding : 24px 0 var(--popup__header__bottom-padding) 24px;
    background: white;
    outline : none;
    /*position is set to relative because child element "progress-bar" has position "absolute" with top:left: 0*/
    position: relative;
    border-radius: var(--border-radius);
}

.popup__progress {
    position : absolute;
    top      : 0;
    left     : 0;
}
.popup__header {
    font-size: 1.25em;
    padding-right: var(--popup__right-padding);
}

.popup__main-content {
    /*
      We want the content of the popup to be scrollable while the header and the footer (buttons) stay on the screen,
      so the max height of the content is the screen height minus header & footer.

      The calculations are a bit off since the scroll appears sooner when you start shrinking the window,
      was lazy to figure out the mistake. But that's fine - we'd add extra space anyway, don't want to touch
      browser boundaries.

      There will be dialogs w/o header or footer, but those are usually small ones. Their max-height will have
      extra pixels, well.. because they have no actual header or footer. But for small popups this isn't critical
      because no one will shrink the browser that much.
    */
    max-height: calc(100vh - var(--popup__header__height)
                           - var(--popup__header__top-padding) - var(--popup__header__bottom-padding)
                           - var(--popup__footer__height));
    overflow: auto;
    margin-top: 1em;
    padding-right: var(--popup__right-padding);
}
.popup__main-content--text-only {
    margin-bottom: 3em;
}

.popup__footer {
    height   : var(--popup__footer__height);
    padding-right: var(--popup__right-padding);
}

.popup__footer--main-buttons-only {
    display         : flex;
    justify-content : flex-end;
    align-items     : center;
}

.popup__footer--main-buttons-only > button {
    margin-left : 0.5rem;
}
/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_style.css ***!
  \********************************************************************************/
#aliasInput, #formulaInput {
    width : 135px;
}

.bar {
    fill : #757575;
}

.selected {
    width : 2px;
}

.tick text {
    fill : #9e9e9e;
}

.bar-highlight {
    fill: var(--theme-primary);
}

.line {
    fill         : none;
    stroke       : #F44336;
    stroke-width : 2px;
}

.material-symbols-outlined[data-name="change-view"] {
    width: 18px;
    height: 18px;
    border-radius: 15%;
    color: var(--theme-text-secondary-on-light);
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    right: 8px;
    top: 4px;
    z-index: 3;
}
.white-background {
    background: #ffffff;
}

.material-symbols-outlined[data-name="change-view"]:hover {
    color: var(--theme-text-primary-on-light);
    transform: scale(1.1);
}

.plate-container {
    display        : inline-block;
    /*margin-right   : 6px;*/
    vertical-align : top;
    position       : relative;
}

.plate-container:last-child {
    margin-right : 0;
}

.plate-container paginator-cmp {
    margin : 8px auto 0 auto;
}

.plate-body {
    position   : relative;
    width      : fit-content;
    display    : inline-block;
    cursor     : pointer;
    padding    : 8px 8px 5px 8px;
    border-radius: var(--border-radius);
    background : #ffffff;
    box-shadow : 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

.plate-container .progress {
    position : absolute;
    margin   : unset !important;
    left     : 0;
    top      : 0;
    z-index  : 1;
}

.chromatogram .line, .chromatogram-line {
    fill         : none;
    stroke       : #000000;
    stroke-width : 1px;
}

.overlay {
    fill           : none;
    stroke         : none;
    pointer-events : all;
}

.focus, .massLabel {
    pointer-events : none;
}

.massLabelText {
    font-size   : 75%;
    fill        : white;
}

.massLabelRect {
    height  : 15px;
    opacity : 0.9;
    fill    : #616161;
}

.dialog-container {
    display          : none;
    position         : fixed;
    width            : 16em;
    height           : 11em;
    box-shadow       : -6px 4px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.13);
    background-color : white;
    top              : 50%;
    left             : 50%;
    margin-top       : -9em;
    margin-left      : -15em;
    z-index          : 6;
}

.dialog-title-container {
    padding : 24px 24px 20px 24px;
}

.dialog-title-container p {
    color       : black;
    font-size   : 125%;
    font-weight : 500;
}

.dialog-content-container {
    padding : 0 24px 24px;
}

.dialog-actions-container {
    height   : 52px;
    position : absolute;
    left     : 0;
    right    : 0;
    bottom   : 0;
}

.flat-button {
    float              : right;
    height             : 36px;
    width              : 64px;
    color              : #2196f3;
    font-size          : 87%;
    cursor             : pointer;
    position           : relative;
    margin             : 8px 8px 8px 0;
    padding            : 0;
    background         : transparent;
    text-transform     : uppercase;
    overflow           : hidden;
    user-select        : none;
    outline            : none;
    box-sizing         : border-box;
    border             : none;
    -webkit-transition : box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1);
    transition         : box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1);
}

.flat-button:hover {
    background : #eeeeee;
}

.flat-button:active {
    background : darkgray;
}

.flat-button:disabled {
    background-color : transparent;
    color            : rgba(0, 0, 0, .37);
    cursor           : default;
    pointer-events   : none;
}

.tracked-mass {
    user-select : none;
    cursor      : pointer;
}


.overlay:active, .overlay:focus {
    outline : 0;
}

.batches {
    box-shadow       : 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
    background-color : white;
    width            : 90%;
    top              : 8px;
    position         : relative;
    margin-left      : auto;
    margin-right     : auto;
}

.dialogInput {
    height         : 64px;
    width          : 5em;
    display        : inline-block;
    vertical-align : top;
}

.errorText {
    display     : none;
    color       : #E53935;
    font-size   : 80%;
    padding-top : 8px;
}

/* Progress Bar */
.progress {
    position         : absolute;
    height           : 4px;
    top              : 0;
    left             : 0;
    display          : none;
    width            : 100%;
    background-color : #acece6;
    background-clip  : padding-box;
    margin           : 0;
    overflow         : hidden;
}

.progress .determinate {
    background-color : #26a69a;
    position         : absolute;
    top              : 0;
    bottom           : 0;
    transition       : width .3s linear;
}

.progress .indeterminate {
    background-color : #26a69a;
}

.progress .indeterminate:before {
    content           : '';
    position          : absolute;
    background-color  : inherit;
    top               : 0;
    left              : 0;
    bottom            : 0;
    -webkit-animation : indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation         : indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.progress .indeterminate:after {
    content                 : '';
    position                : absolute;
    background-color        : inherit;
    top                     : 0;
    left                    : 0;
    bottom                  : 0;
    -webkit-animation       : indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation               : indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay : 1.15s;
    animation-delay         : 1.15s;
}

.search-input .search-label {
    display : none;
}

.error-label {
    color : #b00020 !important;
}

.injectionContent {
    margin    : 8px 8px 0 8px;
    min-width : 950px;
    display   : flex;
}

.well {
    fill         : #b0b0b0;
    fill-opacity : 0.2;
}

.well.not-empty:hover {
    fill-opacity : 1;
}

.well.active {
    fill-opacity : 1;
}

.well.compared{
    fill-opacity : 0.7;
}

.well.not-empty {
    fill : #009292;
}

.multi-injection {
    fill         : var(--theme-primary);
    fill-opacity : 0.5;
}

.hash-selection {
    fill-opacity : 0.5;
}

.user-selection {
    fill-opacity : 0.5;
}

.list-icon {
    font-size : 2.25em;
}

#export-dialog {
    width       : 21em;
    height      : 11em;
}

.dialog-content-container i {
    cursor    : pointer;
    float     : left;
    font-size : 30px;
}

.align {
    cursor : grab;
}

.align-progress {
    cursor : grabbing;
}

#apply-to-others-dialog {
    width  : 22em;
}

.header-overlay {
    visibility       : hidden;
    background-color : white;
    min-width        : 350px;
    max-width        : 600px;
    margin-left      : auto;
    margin-right     : auto;
    z-index          : 2;
    opacity          : 0;
    transition       : visibility 0s linear 300ms, opacity 300ms;
    border           : none;
    pointer-events   : none;
}

.header-overlay.visible {
    pointer-events : all;
}

.visible {
    visibility : visible;
    opacity    : 1;
    transition : visibility 0s linear 0s, opacity 300ms;
}

.header-overlay-start {
    color       : black;
    display     : inline;
    margin      : 0 50px 0 20px;
    max-width   : 100px;
    white-space : nowrap;
}

.header-overlay-end {
    color       : black;
    display     : inline;
    margin      : 0 auto 0 0;
    max-width   : 200px;
}

.header-overlay-end button {
    float       : right;
    margin-left : 8px;
}

.header-overlay-end button {
    float       : right;
    margin-left : 8px;
}

.header-overlay-start i {
    font-size    : 18px;
    cursor       : pointer;
    margin-right : 12px;
}

.header-overlay-start i:hover {
    font-weight : bold;
}

.header-overlay-start i,
.header-overlay-start p {
    display        : inline;
    vertical-align : text-bottom;
}

#reassign-batch-dialog {
    width : 450px;
}

#reassign-batch-dialog #batch-name {
    margin-top : 16px;
}

.reassign-batch-dialog__title{
    margin-bottom: 1rem;
}

.dialog-title-container {
    border-bottom : 1px solid rgba(0, 0, 0, 0.1);
}

.dialog-actions-container {
    border-top : 1px solid rgba(0, 0, 0, 0.1);
}

#reassign-batch-dialog .dialog-content-container {
    padding-top  : 20px;
    padding-left : 30px;
}

#reassign-batch-dialog .dropdown {
    width : 18.5rem;
}

.reassign-batch-dialog__dropdown-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    list-style: none;
    padding: 0.5rem;
}

.reassign-batch-dialog__item-description {
    font-size: 0.75rem;
}

.modal-overlay {
    display          : block;
    position         : fixed;
    z-index          : 4;
    padding-top      : 100px;
    left             : 0;
    top              : 0;
    width            : 100%;
    height           : 100%;
    overflow         : auto;
    background-color : rgba(0, 0, 0, 0.4);
}

i, img {
    user-select : none;
}

.tools-panel {
    height         : 62px;
    overflow       : hidden;
    pointer-events : none;
}

.plate {
    float   : none;
    display : inline-block;
    width   : 238px;
    height  : 176px;
}

.plate-well-injections {
    display    : inline-block;
    position   : absolute;
    z-index    : 3;
    background : white;
    box-shadow : 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

#wavelength-dialog {
    width : 400px;
}

.detectedPeak {
    fill         : #cafebabe;
    stroke       : gray;
    fill-opacity : .15;
}

.dialog-row {
    display     : block;
    width       : 100%;
    height      : 52px;
    padding-top : 8px;
}

.dialog-row > .dialogInput {
    width  : auto;
    height : 18px;
    cursor : default;
}

.dialog-row > .dialogInput > p {
    display   : inline;
    font-size : 14px;
}

.dialog-row > .dialogInput > input {
    display    : inline;
    font-size  : 15px;
    text-align : center;
    padding    : 0;
}

.dialog-row .input-container {
    width       : 155px;
    height      : 25px;
    padding-top : 16px;
}

.dialog-row > .search-input {
    width        : 96px;
    margin-right : 8px;
}

.simple-notification-dialog {
    width   : auto !important;
    z-index : 8;
}

.peakBorders {
    fill-opacity   : .05;
    stroke-opacity : 1;
    pointer-events : none;
}

#crawlers-table {
    font-size        : 12px;
    font-weight      : bold;
    border-spacing   : 0;
    border-collapse  : collapse;
    width            : 100%;
    color            : rgba(0, 0, 0, .7);
    background-color : #ffffff;
    box-shadow       : 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

#crawlers-table tr:not(:first-child):hover {
    background-color : rgba(0, 0, 0, 0.1);
    transition       : 250ms;
}

#crawlers-table th, #crawlers-table td {
    text-align : left;
    padding    : 8px;
}

#crawlers-table tr {
    cursor : default;
}

#hot-key-helper-dialog {
    width  : 400px;
}

.dropdown-triangle-area {
    display        : inline-block;
    cursor         : pointer;
    border-radius  : 50%;
    vertical-align : middle;
}

.dropdown-triangle {
    border           : 4px solid transparent;
    border-top-color : rgba(0, 0, 0, 0.54);
    width            : 1px;
}

.dropdown-triangle-area:hover .dropdown-triangle {
    border-top-color : black;
}

#analyze-injections {
    left        : 50%;
    margin-left : 110px;
    margin-top  : 8px;
}

#search-batches {
    background    : #f1f3f4;
    border        : 1px solid transparent;
    border-radius : 8px;
    position      : relative;
    width         : 100%;
    display       : inline-flex;
    padding-left  : 4px;
}

#search-batches div:nth-child(1) {
    width   : 40px;
    display : inline-block;
}

#search-batches div:nth-child(2) {
    display      : inline-block;
    width        : 100%;
    height       : 44px;
    padding      : 0;
    margin-left  : 12px;
    margin-right : 16px;
    overflow     : hidden;
}

#search-batches i {
    color   : black;
    margin  : 3px;
    padding : 8px;
}

#search-batches input {
    padding    : 14px 0;
    background : none;
    width      : 100%;
    border     : none;
    font-size  : 16px;
}

.integration-method-controls {
    display    : none;
    position   : relative;
    width      : 80px;
    height     : 190px;
    background : white;
}

.baseline {
    pointer-events : none;
    fill           : none;
    stroke         : orangered;
    stroke-width   : 1px;
}

.dropdown-list {
    display          : none;
    margin-left      : -145px;
    margin-top       : 8px;
    position         : absolute;
    background-color : #ffffff;
    width            : 215px;
    box-shadow       : 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    z-index          : 1;
}

.dropdown-item {
    font-size       : 16px;
    line-height     : 20px;
    font-weight     : 400;
    letter-spacing  : 0.04em;
    cursor          : pointer;
    color           : black;
    padding         : 8px 8px;
    text-decoration : none;
    display         : block;
    position        : relative;
    outline         : none;
    user-select     : none;
}

.dropdown-item:hover {
    background-color : #f5f5f5;
}

.dropdown-item span:nth-child(2) {
    float       : right;
    color       : grey;
    font-size   : 14px;
    line-height : 16px;
}

.dropdown {
    display          : block;
    position         : absolute;
    background-color : #ffffff;
    width            : 80px;
    box-shadow       : 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    z-index          : 1;
}

.dropdown.aliases {
    width       : auto;
    min-width   : 150px;
    margin-left : 24px;
    top         : 48px;
}

.dropdown.aliases.hidden {
    display : none;
}

.dropdown .item {
    font-size       : 1rem;
    line-height     : 1.75rem;
    font-weight     : 400;
    letter-spacing  : 0.04em;
    cursor          : pointer;
    color           : black;
    padding         : 8px 8px;
    text-decoration : none;
    display         : block;
    position        : relative;
    outline         : none;
    user-select     : none;
}

.dropdown .item:hover {
    background-color : #f5f5f5
}

.shaking {
    animation           : shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform           : translate3d(0, 0, 0);
    backface-visibility : hidden;
    perspective         : 1000px;
}

@keyframes shake {
    10%, 90% {
        transform : translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform : translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform : translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform : translate3d(4px, 0, 0);
    }
}

.report-page-header {
    background-color : var(--theme-element-background);
    position         : static;
    top              : 0;
    width            : 100%;
    letter-spacing   : 0.0125em;
    padding-top      : 16px;
    padding-left     : 16px;
    box-sizing       : border-box;
    border-bottom    : 1px solid black;
    margin-bottom    : 10px;
    padding-bottom   : 2px;
}

.report-header-injection-name span {
    font-size   : 20px;
    font-weight : 500;
}

.report-header-injection-name span#acquired {
    margin-left : 8px;
}

.report-page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.report-page-header-row button {
    flex: none;
    margin-top: 2px;
    margin-left: 2px;
}
.report-header-injection-method {
    margin-top : 8px;
    font-style : italic;
}

@media print {
    .no-print, .no-print * {
        display : none !important;
    }
}

.report-page {
    margin           : 0 auto;
    padding          : 0 20px;
    display          : table;
    width            : 750px;
    background-color : white;
    box-sizing       : border-box;
}

.substance-cards {
    display    : inline-block;
    width      : 100%;
}

.substance-card {
    width            : 218px;
    height           : 60px;
    display          : inline-block;
    border           : 1px solid gray;
    margin           : 8px;
    text-align       : center;
    background-color : white;
    vertical-align   : top;
}

.substance-card.with-svg {
    height : 208px;
}

.substance-card .substance-name, .substance-card .description {
    margin        : 8px 0;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.substance-card .description span {
    font-size : 12px;
}

.substance-card .description span:nth-of-type(2) {
    margin-left : 8px;
    color       : gray;
}

.substance-card.with-svg .card-svg {
    margin : 4px;
    height : 140px;
}

.detector-run-report-card {
    width             : 694px;
    height            : 220px;
    display           : flex;
    flex-direction    : column;
    border            : 1px solid gray;
    margin            : 8px;
    letter-spacing    : 0.0125em;
    page-break-inside : avoid;
    background        : var(--theme-element-background);
    position          : relative;
}

.report-card-header {
    margin      : 8px 4px 4px 12px;
    font-size   : 14px;
    flex-grow   : 1;
}

.detector-run-report-card .report-card-header {
    font-weight : 600;
}

.detector-run-report-card .integration-method-editor, .detector-run-report-card .chromatogram-graph__scan-selector {
    display        : none;
    pointer-events : none;
}

.transient-traces-layer {
    pointer-events : none;
}

.detector-run-report-card .peak-label-background {
    filter       : none;
    stroke       : gray;
    stroke-width : 1px;
    overflow     : hidden;
}

.report-page .axis:nth-of-type(2) .tick {
    display : none;
}

.resize-handle {
    display  : inline-block;
    width    : 4px;
    cursor   : ew-resize;
}

div.left {
    position   : absolute;
    display    : inline-block;
    left       : 8px;
    cursor     : ew-resize;
    box-shadow : 0 0 6px rgba(0, 0, 0, 0.5);
}

div.right {
    position   : absolute;
    display    : inline-block;
    cursor     : ew-resize;
    box-shadow : 0 0 6px rgba(0, 0, 0, 0.5);
}

/*  Scan card  (TBD: refactor when move to the new component) */
.scan-card {
    display    : block;
    position   : relative;
    height     : 266px;
    border-radius: var(--border-radius);
    background : var(--theme-element-background);
    box-shadow : var(--box-shadow)
}

.scan-card__header {
    position : relative;
    width    : 100%;
    height   : 44px;
}

.scan-card__body {
    position : relative;
    width    : 100%;
    height   : 222px;
}

.scan-header-columns {
    display         : flex;
    width           : 100%;
    height          : 100%;
    padding         : 0 16px;
    gap             : 8px;
    flex-wrap       : nowrap;
    flex-direction  : row;
    align-content   : center;
    justify-content : space-between;
    box-sizing      : border-box;
    align-items     : center;
}

.header-column__chips {
    display   : flex;
    flex-grow : 1;
}

.header-column__zoom {
    display   : flex;
    flex-grow : 0;
}

.header-column__ions {
    display   : flex;
    flex-grow : 0;
}

#select-ion-type {
    cursor : pointer;
}

#select-ion-type .name {
    line-height : 16px;
    font-size   : 13px;
    color       : rgba(0, 0, 0, 0.64);
}

#select-ion-type .dropdown-menu {
    right : 0;
    top   : 36px;
}

.scan-chart {
    width    : 100%;
    height   : 100%;
    position : relative;
}

.scan-card svg {
    /*m/z labels that are shown on hover if long can overflow the scan card - in this case we don't want to cut them*/
    overflow : visible;
    position : absolute;
}

.scan-card svg .bar {
    opacity : 1;
}

.scan-card svg.active .bar {
    opacity : .75;
}

.scan-card .main-group text {
    transform   : matrix(1, 0, 0, -1, 0, 0) rotate(-90deg);
    text-anchor : start;
    font-size   : 11px;
    fill        : #0000cd;
}

.scan-axis-y-label {
    transform   : rotate(-90deg) translate(0px, 15px);;
    font-size   : 12px;
    fill        : #9e9e9e;
    user-select : text;
    text-anchor : end;
}

.transient-mass-rectangle--active {
    filter: brightness(0.5);
}

/* -- end scan card -- */


.mode-switcher-dropdown .spacer {
    height        : 8px;
    border-bottom : 1px solid lightgray;
    margin-bottom : 8px;
}

.mode-switcher-dropdown__icon {
    font-size: 1rem;
    color: var(--theme-text-primary-on-light) !important;
}

.mode-switcher-dropdown__icon:hover {
    scale: 1 !important;
}

.mode-switcher-dropdown__title-block{
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

path[non-substance-chromatogram="true"] {
    opacity : .5;
}

#create-alias-dialog {
    width : 380px;
}

#create-alias-dialog .dialog-title {
    padding   : 24px 24px 0 24px;
    font-size : 16px;
}

#create-alias-dialog .dialog-content {
    padding : 16px 24px 24px;
    display : flex;
}

#create-alias-dialog .right-column {
    width       : 206px;
    height      : 215px;
    margin-left : 24px;
    position    : relative;
}

#create-alias-dialog #aliasInput {
    margin-top : 64px;
    width      : 170px;
}

.btn-delete {
    color       : red !important;
    float       : left !important;
    margin-left : 16px;
}

.btn-delete[disabled] {
    color : rgba(0, 0, 0, 0.37) !important;
}

#custom-top-bar {
    width      : 100%;
    height     : 64px;
    position   : fixed;
    top        : 0;
    background : white;
    z-index    : 10;
    right      : 0;
    overflow   : hidden;
}

#custom-top-bar div {
    width  : 600px;
    margin : 14px auto auto;
}

#custom-top-bar span {
    font-family : Robota, sans-serif;
    font-size   : 20px;
    float       : left;
    margin-top  : 8px;
}

#custom-top-bar button {
    width       : 80px;
    margin-left : 16px;
    float       : right;
}


.page-with-contextual-sidebar {
    padding : 0 0 0 150px;
}

.page-with-contextual-sidebar .settings-page-tab {
    padding : 0;
}

.sidebar {
    top              : 64px;
    width            : 150px;
    bottom           : 0;
    left             : 0;
    display          : block;
    position         : fixed;
    background-color : #fafafa;
    box-shadow       : 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.sidebar ul {
    padding-left : 0;
    list-style   : none;
}

.sidebar li {
    white-space : nowrap;
    cursor      : pointer;

}

.sidebar-li-content {
    display                 : flex;
    align-items             : center;
    padding                 : 12px 16px;
    color                   : #666;
    text-align              : center;
    -moz-osx-font-smoothing : grayscale;
    -webkit-font-smoothing  : antialiased;
    font-size               : 1rem;
    line-height             : 1.75rem;
    font-weight             : 400;
    letter-spacing          : 0.009375em;
}

.sidebar-li-content:hover {
    color            : #303030;
    background-color : rgba(48, 48, 48, 0.06);
}

.sidebar-li-content[active] {
    color       : #303030;
    background  : rgba(0, 0, 0, 0.04);
    box-shadow  : inset 4px 0 0 var(--theme-primary);
    font-weight : 600;
}

.sidebar-li-content[active] .nav-icon-container svg {
    fill : #4b4ba3;
}

.nav-icon-container {
    display      : flex;
    margin-right : 8px;
}

.nav-icon-container svg {
    fill : currentColor;
}

.page-content {
    flex: 1 1 auto;
}

.settings-page-tab h1 {
    text-align     : center;
    font-size      : 30px;
    font-weight    : 400;
    line-height    : 1.235;
    letter-spacing : 0.00735em;
}

.settings-page-content {
    margin : 96px 8px 0 116px;
}

.settings-page-tab {
    padding-top : 16px;
}

.settings-page-header-content {
    width                  : 100%;
    -webkit-font-smoothing : antialiased;
    font-weight            : 400;
    letter-spacing         : 0.009375em;
    color                  : rgba(0, 0, 0, 0.87);
    padding                : 8px 0;
    line-height            : 1.5rem;
    margin-left            : 60px;
}

.header-tab span {
    color          : black;
    font-size      : 1.5rem;
    margin-left    : 120px;
    vertical-align : super;
}

.methods-list {
    display                : block;
    list-style             : none;
    width                  : 600px;
    margin                 : auto;
    background-color       : white;
    box-shadow             : 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-font-smoothing : antialiased;
    font-size              : 1rem;
    font-weight            : 400;
    letter-spacing         : 0.009375em;
    color                  : rgba(0, 0, 0, 0.87);
    padding                : 8px 0;
    line-height            : 1.5rem;
    position               : relative;
}

.methods-list-li-container {
    position : relative;
    cursor   : pointer;
    padding  : 10px 16px;
    color    : #303030;
}

.methods-list-li-container span {
    letter-spacing : 0.015em;
    display        : block;
}

.li-col-2 .text-main {
    display : block;
}

.li-col-2 .text-secondary {
    display   : block;
    font-size : 0.875rem;
    opacity   : 0.7;
}


.chips {
    display : block;
}

.chip {
    align-items      : center;
    background-color : red;
    overflow         : hidden;
    display          : inline-flex;
    border-radius    : 0.75rem;
    position         : relative;
    max-width        : 100%;
    font-size        : 0.75rem;
    line-height      : 1rem;
    padding          : 0 8px;
}


.methods-list-li-container:hover {
    color            : #303030;
    background-color : rgba(48, 48, 48, 0.06);
}

.method-dialog {
    display  : block;
    width    : auto;
    height   : 560px;
    position : relative;
    left     : unset;
    top      : unset;
    margin   : auto;
}

.method-dialog .dialog-content-container {
    position   : relative;
    margin-top : 16px;
}

.method-dialog .dialog-actions-container {
    padding : 12px 8px 0px 24px;
}

.processing-methods-dialog {
    width            : 690px;
}

.accordion-list-container {
    margin-top : 8px;
    margin-bottom: 20px;
    padding: 4px 4px 0 4px;
}

.accordion-list-title {
    margin-top : 24px;
    opacity    : 0.6;
    color      : #303030;
}

.accordion-list {
    width            : 100%;
    height           : fit-content;
    font-weight      : 400;
    background-color : #fff;
    box-shadow       : 1px 0px 4px 1px rgba(0, 0, 0, 0.15);
}

.accordion-list .accordion-card .accordion-card-content {
    display : none;
}

.accordion-list .accordion-card .accordion-card-content ul {
    margin  : 0;
    padding : 8px 0;
}

.accordion-list .accordion-card[expanded] .accordion-card-content {
    display          : block;
    border-bottom    : 1px solid rgba(0, 0, 0, 0.12);
    background-color : rgba(0, 0, 0, 0.025)
}

.accordion-card-content ul {
    list-style : none;
}

.accordion-card .accordion-card-header .title {
    padding        : 12px;
    display        : inline-block;
    pointer-events : none;
    font-size      : 18px;
}

.accordion-card .accordion-card-header .alignment-title {
    display   : inline-block;
    font-size : 14px;
}

.accordion-card .accordion-card-header {
    border-bottom : 1px solid rgba(0, 0, 0, 0.12);
    cursor        : pointer;
    position      : relative;
    color         : #303030;
}

.accordion-card .accordion-card-header svg {
    float   : right;
    padding : 12px;
    fill    : currentColor;
}


.accordion-list .accordion-card[expanded] .accordion-card-header svg {
    transform : rotate(180deg);
}

.card-list__item {
    padding : 12px 24px;
    border  : 1px solid transparent;
}

.card-list__item--active {
    border-color     : var(--theme-primary);
    background-color : rgba(48, 48, 48, 0.06);
}

.card-list__item:hover {
    background-color : rgba(48, 48, 48, 0.06);
}

.list-item-title {
    pointer-events : none;
    color          : rgba(0, 0, 0, 0.84);
    letter-spacing : 0.0625rem;
}

.list-item-options {
    display    : none;
    float      : right;
    color      : #303030;
    margin-top : -8px;
    width      : 90px;
}

.list-item-options svg {
    opacity : 0.6;
}

.list-item-options svg:hover {
    opacity : 1;
    cursor  : pointer;
}

.card-list__item:hover .list-item-options {
    display : inline-block;
}

.list-item-options svg {
    padding : 6px;
    fill    : currentColor;
}

.md-list-wrapper {
    display          : block;
    background-color : white;
    position         : relative;
    pointer-events   : none;
    box-shadow       : 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.processing-methods-list {
    width  : 600px;
    margin : auto;
}

.processing-methods-list .dropdown-menu {
    width : 120px;
}

.md-list {
    font-size       : 1rem;
    font-weight     : 400;
    letter-spacing  : .009375em;
    text-decoration : inherit;
    text-transform  : inherit;
    line-height     : 1.5rem;
    margin          : 0;
    padding         : 8px 0;
    list-style-type : none;
    pointer-events  : none;
    color           : rgba(0, 0, 0, .87);
}

.md-list-item {
    display         : flex;
    position        : relative;
    align-items     : center;
    justify-content : flex-start;
    padding         : 0 16px;
    cursor          : pointer;
    min-height      : 36px;
    pointer-events  : all;
}

.md-list-item:hover {
    background-color : rgba(0, 0, 0, 0.04);
}

.md-list-item.md-list-item__faded-out {
    opacity : .6;
}

.processing-method-switch {
    margin : 24px 16px 24px 0;
}

.md-list-item__text {
    display : inline-block;
}

.two-line-text__primary {
    display       : block;
    text-overflow : ellipsis;
    white-space   : nowrap;
    overflow      : hidden;
}

.two-line-text__secondary {
    font-size      : .875rem;
    font-weight    : 400;
    letter-spacing : .0178571429em;
    text-overflow  : ellipsis;
    white-space    : nowrap;
    overflow       : hidden;
    display        : block;
    color          : rgba(0, 0, 0, .54);
}

.md-list-item__action-icons {
    position : absolute;
    right    : 24px;
    top      : 12px;
    display  : block;
}

.md-list-item__action-icons svg {
    fill          : currentColor;
    padding       : 12px;
    border-radius : 50%;
    color         : rgba(0, 0, 0, .54);
}

.md-list-item:hover .md-list-item__action-icons {
    display : block;
}

.md-list-item .md-list-item__action-icons svg:hover {
    background-color : rgba(0, 0, 0, .06);
}

.md-list-item-content{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.md-list-item__icon {
    font-size: 1rem;
}

.mouse-blocking-overlay {
    display  : block;
    position : fixed;
    z-index  : 8;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    overflow : auto;
    cursor   : default;
}

.multiple-structures-confirmation-dialog {
    width : 350px;
    top   : calc(50% - 250px);
    padding-bottom: 8px;
}

.delete-chromatogram-dialog {
    width : 350px;
    top   : calc(50% - 250px);
    padding-bottom: 8px;
}

.skipped-injections-dialog {
    width : 540px;
}

.skipped-injections-dialog .dialog-content ul {
    overflow   : auto;
    max-height : 296px;
}

.skipped-injections-dialog .dialog-content p {
    padding-top : 16px;
}

.skipped-injections-dialog .dialog-content-container ul li {
    padding-top : 4px;
}

#full-window-progress-bar {
    display          : none;
    position         : fixed;
    z-index          : 9;
    left             : 0;
    top              : 0;
    width            : 100%;
    height           : 100%;
    overflow         : auto;
    background-color : rgba(0, 0, 0, 0.4);
}

#full-window-progress-bar .progress {
    display : block;
    margin  : 0;

}

.common-notification-dialog {
    width     : fit-content;
    min-width : 450px;
    max-width : 700px;
    padding-bottom: 10px;
}

.common-notification-dialog p:nth-of-type(1) {
    font-weight : 600;
}

.common-notification-dialog p:nth-of-type(2) {
    margin-top : 16px;
}

.modal .dialog {
    margin           : 144px auto;
    background-color : white;
    position         : relative;
    box-shadow       : 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
    border-radius: var(--border-radius);
}

#discovered-injection-dialog {
    position  : relative;
    min-width : 450px;
    max-width : 600px;
    width     : fit-content;
}

#discovered-injection-dialog .labeled-text:nth-child(1) {
    margin-top : 0;
    width      : 100%;
}

#discovered-injection-dialog .labeled-text:nth-child(2), #discovered-injection-dialog .labeled-text:nth-child(3) {
    width   : 172px;
    display : inline-block;
}

#discovered-injection-dialog .labeled-text:nth-child(3) {
    float : right;
}

#discovered-injection-dialog .labeled-text:nth-child(4) .labeled-text--text {
    max-height : 250px;
    overflow-y : auto;
}

#discovered-injection-dialog .labeled-text {
    margin-top : 24px;
}

.labeled-text {
    position : relative;
}

.labeled-text span {
    display : block;
}

.labeled-text--label {
    font-size     : 0.75rem;
    color         : rgba(0, 0, 0, 0.52);
    margin-bottom : 8px;
}

.labeled-text--text {
    font-size  : 16px;
    color      : rgba(0, 0, 0, 0.82);
    width      : 100%;
    line-break : auto;
    word-break : break-word;
}

.labeled-text--text-italic-grey {
    font-size: 16px;
    color: var(--theme-text-secondary-on-light);
    width: 100%;
    line-break: auto;
    word-break: break-word;
    font-style: italic;
}

.labeled-text--bar {
    width      : 100%;
    height     : 1px;
    background : rgba(0, 0, 0, 0.22);
}

.dialog .progress {
    margin        : 0 !important;
    border-radius : unset;
}

#discovered-injection-dialog .discovered-injection-icon {
    margin-right : 0.5rem;
}

.modal {
    width            : 100%;
    height           : 100%;
    background-color : rgba(0, 0, 0, 0.4);
    position         : fixed;
    top              : 0;
    z-index          : 1050;
    display          : none;
}

.modal:last-of-type {
    display : block;
}

.dialog-content {
    padding : 24px;
}

.dialog-buttons {
    height : 48px;
}

.dialog-buttons > * {
    float        : right;
    margin-right : 16px;
}

.dialog-buttons-row {
    display         : flex;
    width           : 100%;
    height          : 3.25rem;
    align-items     : center;
    justify-content : end;
    padding-right   : 1.5rem;
}

.dialog-buttons-row .button:not(:last-child) {
    margin-right : 0.5rem;
}

#search-records {
    background    : #f1f3f4;
    border        : 1px solid transparent;
    border-radius : 8px;
    position      : relative;
    width         : 100%;
    height        : 48px;
    display       : inline-flex;
    padding-left  : 4px;
}

#search-records div:nth-child(1) {
    width   : 48px;
    height  : 48px;
    display : inline-block;
}

#search-records div:nth-child(2) {
    display  : inline-block;
    overflow : hidden;
    height   : 48px;
    width    : calc(100% - 60px);
}

#search-records i {
    color    : black;
    position : absolute;
    top      : 14px;
    left     : 14px;
}

#search-records input {
    padding-top : 18px;
    background  : none;
    width       : 100%;
    border      : none;
    font-size   : 16px;
}

#discovered-injection-table-paginator {
    margin : 16px auto;
}

.batch-not-exists-confirmation {
    width     : fit-content;
    min-width : 400px;
    max-width : 1000px;
}

#create-batch-dialog {
    width    : 450px;
    position : relative;
}

.batch-created-confirmation {
    width     : fit-content;
    max-width : 750px;
}

#create-batch-dialog #confirmation-sign {
    margin-top : 36px;
}

#create-batch-dialog #confirmation-sign span#total-filtered {
    font-weight : 600;
}

.loading-span::after {
    display   : inline-block;
    animation : dotty steps(1, end) 1s infinite;
    content   : '';
}

@keyframes dotty {
    0% {
        content : '';
    }
    25% {
        content : '.';
    }
    50% {
        content : '..';
    }
    75% {
        content : '...';
    }
    100% {
        content : '';
    }
}

#column-picker-dialog {
    width    : 750px;
    border-radius: var(--border-radius);
}

#column-picker-dialog .dialog-content {
    padding : 8px 24px 24px;
}

#column-picker-dialog #tabs {
    height : 64px;
}

#column-picker-dialog #column-filter {
    width : 100%;
}

#column-picker-dialog #global-selector {
    width      : 36px;
    margin-top : 16px;
}


#column-picker-dialog #column-list {
    width      : 100%;
    list-style : none;
    padding    : 0;
    margin     : 16px 0 0 0;
    max-height : 300px;
    overflow-y : auto;
}

#column-picker-dialog #column-list li {
    height      : 25px;
    white-space : nowrap;
}

#column-picker-dialog #column-list li input {
    width      : 36px;
    display    : inline-block;
    margin-top : 8px;
}

.column-picker-dialog__col-label {
    cursor         : pointer;
    font-size      : 14px;
    vertical-align : text-top;
}

#column-picker-dialog #row-filter {
    width : 100%;
}

#column-picker-dialog #tab-2-content {
    display : none;
}

#column-picker-dialog .btn-ok-secondary {
    float       : left;
    margin-left : 24px;
}

.visualisation-component {
    display        : inline-block;
    width          : calc(50% - 12px);
    min-width      : 254px;
    height         : 512px;
    min-height     : 512px;
    border-radius: var(--border-radius);
    background     : #ffffff;
    box-shadow     : 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);
    margin         : 0 4px;
    position       : relative;
    vertical-align : top;
    flex: 1;
}

.visualisation-component__right-shadow:before {
    content: '';
    position: absolute;
    right: -3px;
    top: 0;
    height: 100%;
    width: 3px;
    box-shadow: 5px 0 10px var(--vis-shadow-color);
}

.visualisation-component__left-shadow:before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    height: 100%;
    width: 3px;
    box-shadow: -5px 0 10px var(--vis-shadow-color);
}

.vis-grid-row__bottom-shadow:before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    box-shadow: 0 5px 10px var(--vis-shadow-color);
}

.vis-grid-row__top-shadow:before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    box-shadow: 0 -5px 10px var(--vis-shadow-color);
}

.visualisation-component.stub {
    background-color : #cacaca;
    box-shadow       : none;
    margin-bottom    : -8px;
}

.visualisation-component.stub-v2 {
    background-color : transparent !important;
    box-shadow       : none;
    margin-bottom    : -8px;
    border           : 2px dashed gray;
    box-sizing       : border-box;
}

.visualisation-component.stub-v2:after {
    content   : '+';
    font-size : 68px;
    color     : gray;
    position  : absolute;
    top       : calc(50% - 34px);
    left      : calc(50% - 20px);
}

.visualisation-component-header {
    padding : 1.125rem 0.75rem;
}

.visualisation-component-header span {
    display        : inline-block;
    letter-spacing : 1px;
}

.visualisation-component-header .vis-buttons {
    float   : right;
    display : inline-block;
}

.visualisation-component-header .vis-buttons > div {
    display : inline-block;
}

.visualisation-component-header .vis-buttons .add-column-dropdown {
    display     : none;
    margin-left : 24px;
    margin-top  : 0;
    z-index     : 10;
    width       : 168px;
}

.visualisation-component-header .vis-name {
    cursor      : default;
    max-width   : calc(100% - 8.75rem);
    position    : relative;
    min-width   : 7.5rem;
    width       : 100%;
    display     : inline-block;
    font-size   : 0.875rem;
    line-height : 1.25rem;
}

.visualisation-component-header edit-text {
    overflow: hidden;
}

.visualisation-component-header .vis-name i {
    display    : none;
    cursor     : pointer;
    font-size  : 14px;
    opacity    : 0.5;
    transition : transform 150ms;
}

.visualisation-component-header .vis-name:hover i {
    display : inline-block;
}

.visualisation-component-header .vis-name i:hover {
    transform : scale(1.3);
    opacity   : 0.82;
}

.visualisation-component-header div svg {
    width        : 24px;
    fill-opacity : 0.5;
    cursor       : pointer;
    transition   : transform 150ms;
}

.visualisation-component-header div svg:hover {
    transform    : scale(1.1);
    fill-opacity : 0.82;
}

.visualisation-component .move-bar {
    position : absolute;
    top      : 0;
    width    : 100%;
    height   : 16px;
    cursor   : all-scroll;
}

.visualisation-component-body {
    padding  : 8px;
    position : relative;
    width    : 100%;
    height   : calc(100% - 58px);
}

.visualisation-component-body .table-layer {
    position : absolute;
}

.visualisation-component-body .scatter-plot-layer {
    position : absolute;
    width    : calc(100% - 16px);
    height   : calc(100% - 72px);
}

.visualisation-component-body .table-container {
    height : 426px;
}

.visualization-component--new{
    box-shadow: 0 0 5px var(--theme-primary);
}

#edit-column-dialog {
    width : 650px;
}

#filter-table-dialog {
    width : 500px;
}

th[data-type="unknown"], td[data-type="unknown"] {
    text-align : left !important;
}

th[data-type="number"], td[data-type="number"] {
    text-align : right !important;
}

th[data-type="string"], td[data-type="string"] {
    text-align : left !important;
}

th[data-type="svg"], td[data-type="svg"] {
    text-align : left !important;
}

th[data-type="mixed"], td[data-type="mixed"] {
    text-align : left !important;
}

.th-w-control {
    width            : 4px;
    height           : 100%;
    background-color : transparent;
    position         : absolute;
    top              : 0;
    right            : 0;
}

.th-w-control:hover {
    cursor : col-resize;
}

.tr-h-control {
    width            : 100%;
    height           : 4px;
    background-color : transparent;
    position         : absolute;
    bottom           : -2px;
    left             : 0;
    z-index          : 1;
}

.tr-h-control:hover {
    cursor : row-resize;
}

.select-visualisation-source-dialog {
    display : block;
    width   : 400px;
}

.select-visualisation-source-dialog p {
    font-weight : 600;
}

.select-visualisation-source-dialog div:not(:nth-of-type(3)) {
    margin-top : 24px;
}

.select-visualisation-source-dialog input {
    display : inline-block;
    cursor  : pointer;
    width   : 24px;
}

.select-visualisation-source-dialog label {
    cursor      : pointer;
    /*margin-left : -8px;*/
}

.vis-resize-wl {
    position : absolute;
    right    : 0;
    top      : 0;
    height   : 100%;
    width    : 4px;
    cursor   : ew-resize;
}

.vis-grid {
    white-space    : nowrap;
    padding: 0 0.5rem 1rem;
}

.vis-grid-row {
    margin  : 8px 0;
    display: flex;
    max-width: 100%;
    position: relative;
}

.vis-grid-row--forbidden .visualisation-component {
    box-shadow: 20px 0 20px -10px var(--vis-shadow-forbidden-color), -20px 0 20px -10px var(--vis-shadow-forbidden-color);
}

.zoomed-svg .dialog__main-content{
    margin: 0;
    height : 75vh;
}

/*Chart component*/
.chart-component {
    width  : 100%;
    height : 100%;
}

.chart-component svg {
    width  : 100%;
    height : 100%;
}


/*VisualizationChart component*/

.vis-chart-container {
    font-size   : 100%;
    position    : absolute;
    left        : 16px;
    top         : 0;
    width       : calc(100% - 108px);
    height      : calc(100% - 26px);
}

.vis-chart-data-options {
    font-size   : 100%;
    position    : absolute;
    right       : 8px;
    top         : 0;
    width       : 92px;
    height      : calc(100% - 26px);
}

.vis-chart-data-options ul {
    list-style  : none;
    margin      : 0;
    padding     : 0;
    line-height : 16px;
}

.vis-chart-data-options .option-name {
    color          : rgba(0, 0, 0, 0.54);
    font-size      : 12px;
    pointer-events : none;
}

.z-axis-label {
    margin-top : 4px;
    cursor     : pointer;
}

.z-axis-label span#name {
    display        : inline-block;
    max-width      : 72px;
    overflow       : hidden;
    font-size      : 12px;
    pointer-events : none;
}

.z-axis-label .axis-options-dropdown {
    max-height : 375px;
}

.scatter-plot-circle[selected="false"] {
    color : #fff;
}

.scatter-plot-circle {
    stroke           : rgba(96, 96, 96, 0.8);
    fill             : currentColor;
    cursor           : pointer;
    transform-box    : fill-box;
    transform-origin : center;
}

.scatter-plot-circle:hover {
    transform : scale(1.2);

}

.chart-point-tooltip {
    padding       : 4px;
    position      : fixed;
    font-size     : 12px;
    color         : rgba(0, 0, 0, 0.54);
    visibility    : hidden;
    background    : white;
    box-shadow    : 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    border-radius : 6px;
    z-index       : 9;
    min-width     : min-content;
}

.chart-point-tooltip td {
    padding-top : 4px;
}

.chart-point-tooltip tr td:nth-of-type(1) {
    text-align  : right;
    white-space : break-spaces;
}

.chart-point-tooltip tr td:nth-of-type(3) {
    text-align : left;
}

.chart-point-tooltip tr:nth-last-of-type(1) td:nth-of-type(3), .chart-point-tooltip tr:nth-last-of-type(2) td:nth-of-type(3) {
    font-weight : bold;
    color       : black;
}

.vis-chart-component {
    width  : 100%;
    height : 100%;
}

.vis-chart-component .y-axis-label .name {
    position    : absolute;
    top         : calc(50% - 26px);
    transform   : translate(calc(-50% + 12px)) rotate(-90deg);
    cursor      : pointer;
    z-index     : 1;
    line-height : 12px;
}

.vis-chart-component .x-axis-label {
    margin      : auto;
    cursor      : pointer;
    width       : fit-content;
    width       : -moz-fit-content;
    max-width   : calc(100% - 36px);
    line-height : 12px;
}

.vis-chart-component .y-axis-label span#name {
    max-width : 400px;
}

.vis-chart-component .x-axis-label span#name, .vis-chart-component .y-axis-label span#name {
    color          : rgba(0, 0, 0, 0.54);
    font-size      : 12px;
    pointer-events : none;
    vertical-align : top;
    display        : inline-block;
    white-space    : nowrap;
    text-overflow  : ellipsis;
    overflow       : hidden;
    width          : calc(100% - 8px);
}

.axis-options-dropdown {
    pointer-events : all;
    overflow-y     : auto;
    overflow-x     : hidden;
}

.vis-chart-component .y-axis-label .axis-options-dropdown {
    left : 30px;
}

.y-axis-col {
    height : calc(100% - 26px);
}

.x-axis-col {
    width  : 100%;
    height : 26px;
}

.chart-tab {
    display  : none;
    position : absolute;
    width    : 100%;
    height   : 100%;
    left     : 0;
    top      : 0;
}

.chart-component .axes .tick line {
    stroke         : rgba(0, 0, 0, 0.12);
    pointer-events : none;
}

.chart-component .axes path.domain {
    stroke : currentColor;
}

.area-selector .selection {
    color            : rgb(34 121 181);
    fill             : currentColor;
    stroke           : currentColor;
    stroke-dasharray : 2 2;
    fill-opacity     : 0.1;
}

/* Dropdown menu */
.dropdown-menu {
    display       : none !important;
    position      : absolute !important;
    z-index       : 9;
    width         : max-content;
    border-radius : 6px;
    right         : 8px;
    top           : 42px;
}

.dropdown-menu[visible] {
    display : block !important;
}

.dropdown-menu .md-list {
    padding   : 4px 0;
    font-size : 14px;
    width     : max-content;
    min-width : 100%;
}

.dropdown-menu .md-list li {
    padding    : 0 12px;
    min-height : 32px;
    width      : auto;
}

.md-list-item.selected {
    background-color : rgba(0, 0, 0, 0.04);
}

li.md-list-item.item-separator {
    padding    : 4px 0 4px 0;
    min-height : 0;
    cursor     : default;
}

li.md-list-item.item-separator .separator-line {
    pointer-events : none;
}

span.separator-line {
    display       : block;
    border-bottom : 1px solid rgba(0, 0, 0, 0.24);
    height        : 1px;
    width         : 100%;
    box-sizing    : border-box;
}

.chart-options {
    display  : none;
    position : absolute;
    right    : 20px;
    top      : 20px;
    width    : 116px;
}

.dialog.chart-statistics-options {
    width : fit-content;
}

.dialog.chart-statistics-options tr {
    vertical-align : top;
}

.dialog.chart-statistics-options td ul {
    margin     : 0;
    padding    : 0;
    list-style : none;
}

.dialog.chart-statistics-options td {
    padding : 0 18px;
}

.dialog.chart-statistics-options td li {
    padding : 6px;
}

.dialog.chart-statistics-options td li input {
    display : inline-block;
    width   : 16px;
}

.dialog.chart-statistics-options td li label {
    padding-left : 16px;
    cursor       : pointer;
}

.labeled-line-group {
    pointer-events : painted;
}

.labeled-line-group:hover {
    cursor : pointer;
}

.labeled-line-group .line-text {
    color       : currentColor;
    text-anchor : end;
}

.labeled-line-group .line-text textPath {
    fill      : currentColor;
    font-size : 12px;
}

.labeled-line-group:hover .line-text {
    color : rgba(0, 0, 0, 0.82);
}

.labeled-line-group:hover path:not(.labeled-line-background) {
    stroke-width     : 2px !important;
    stroke-dasharray : none !important;
}

input:disabled + label {
    color : rgba(0, 0, 0, 0.5);
}

.statistic-function-config-dialog {
    width : 450px;
}

.statistic-function-config-dialog__title {
    color : gray;
}

.statistic-function-config-dialog #label-pattern {
    margin-top : 24px;
    display    : block;
}

.statistic-function-config-dialog #param {
    margin-top : 24px;
    display    : block;
}

.statistic-function-config-dialog #sd-number, .statistic-function-config-dialog #percentile {
    margin-top : 24px;
    width      : 128px;
    display    : block;
}

.labeled-line-group[data-line-type="solid"] path:not(.labeled-line-background) {
    stroke       : currentColor;
    stroke-width : 1px;
    fill         : none;
}

.labeled-line-group[data-line-type="dotted"] path:not(.labeled-line-background) {
    stroke           : currentColor;
    stroke-width     : 2px;
    stroke-linecap   : round;
    stroke-dasharray : 0 10;
    fill             : none;
}

.labeled-line-background {
    stroke-width   : 4px;
    fill           : none;
    pointer-events : all;
    cursor         : pointer;
}

.labeled-line-group[data-line-type="dashed"] path:not(.labeled-line-background) {
    stroke           : currentColor;
    stroke-dasharray : 4 8;
    fill             : none;
}

#function-style-color {
    display    : inline-block;
    margin-top : 24px;
    position   : relative;
    cursor     : pointer;
}

#function-style-color span {
    font-size : 14px;
    color     : rgba(0, 0, 0, 0.64);
}

#function-style-color .color-preview-rect {
    width          : 36px;
    height         : 18px;
    display        : inline-block;
    margin-left    : 8px;
    box-shadow     : 0 0 2px -1px rgb(0 0 0 / 14%), 0 2px 4px 0 rgb(0 0 0 / 14%), 0 1px 8px 0 rgb(0 0 0 / 14%);
    vertical-align : sub;
}

#function-style-color color-palette {
    position : absolute;
    top      : -122px;
    right    : -136px;
    z-index  : 1;
}

.statistic-function-config-dialog #line-type {
    display     : inline-block;
    width       : 150px;
    margin-left : 128px;
}

.statistic-function-config-dialog #line-type label {
    font-size : 14px;
    color     : rgba(0, 0, 0, 0.64);
}

.choose-substance-dialog {
    width     : fit-content;
    max-width : 700px;
}

.choose-substance-dialog .dialog-content ul {
    margin-top : 24px;
    max-height : 300px;
    overflow-y : auto;
}

.dancing-bars,
.dancing-bars:before,
.dancing-bars:after {
    background        : #009292;
    -webkit-animation : dancing-bars-animation 1s infinite ease-in-out;
    animation         : dancing-bars-animation 1s infinite ease-in-out;
    width             : 1em;
    height            : 4em;
}

.dancing-bars {
    color                   : #009292;
    text-indent             : -9999em;
    margin                  : 225px auto;
    position                : relative;
    font-size               : 11px;
    -webkit-transform       : translateZ(0);
    -ms-transform           : translateZ(0);
    transform               : translateZ(0);
    -webkit-animation-delay : -0.16s;
    animation-delay         : -0.16s;
}

.dancing-bars:before,
.dancing-bars:after {
    position : absolute;
    top      : 0;
    content  : '';
}

.dancing-bars:before {
    left                    : -1.5em;
    -webkit-animation-delay : -0.32s;
    animation-delay         : -0.32s;
}

.dancing-bars:after {
    left : 1.5em;
}

@-webkit-keyframes dancing-bars-animation {
    0%,
    80%,
    100% {
        box-shadow : 0 0;
        height     : 4em;
    }
    40% {
        box-shadow : 0 -2em;
        height     : 5em;
    }
}

@keyframes dancing-bars-animation {
    0%,
    80%,
    100% {
        box-shadow : 0 0;
        height     : 4em;
    }
    40% {
        box-shadow : 0 -2em;
        height     : 5em;
    }
}

.connection {
    fill         : none;
    stroke       : rgba(0, 0, 0, 0.42);
    stroke-width : 1px;
    cursor       : pointer;
}

.connection:hover {
    stroke       : rgba(0, 0, 0, 0.84);
    stroke-width : 2px;
}

#header-more-icon {
    cursor       : pointer;
    fill-opacity : 0.82;
}

.header-section .dropdown-menu {
    top : 54px;
}

.header-section.add-visualization .section-control {
    color          : var(--theme-primary);
    cursor         : pointer;
    font-size      : 14px;
    padding        : 0 12px;
    letter-spacing : 1px;
}

.page-header__section--align-end #open-injections-btn {
    white-space: nowrap;
    min-width: 90px;
}

.header-section.add-visualization .section-control .span-triangle {
    width: 1rem;
}

.header-section.add-visualization .dropdown-menu {
    right : 36px;
}

.add-visualization .menu--below{
    padding: 0.5rem;
}

.add-visualization .menu__item{
    border-radius: 0.4rem;
}

.add-visualization__item-title{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.add-visualization__item-icon{
    font-size: 1rem;
}

.header-section .md-list-item {
    min-height : 42px !important;
}

#import-visualizations-dialog {
    width          : 600px;
    padding-bottom : 10px;
}

#import-visualizations-dialog #batch-name {
    width : 100%;
}

#import-visualizations-dialog .md-list {
    max-height     : 300px;
    overflow       : auto;
    pointer-events : all;
    margin-top     : 16px;
}

.batch-edit {
    padding-top: 1rem;
}

.injection-list__checkboxes li > * {
    pointer-events : none;
}

.create-batch-confirmation {
    width     : fit-content;
    max-width : 550px;
}

.continuum-ms-line {
    stroke         : gray;
    stroke-width   : 1px;
    stroke-opacity : 0.5;
}

.mass-range-rect {
    fill-opacity : .25;
}

#upload-zip-overlay {
    position         : fixed;
    width            : 100%;
    height           : calc(100% - 64px);
    background-color : white;
    top              : 64px;
}

#upload-zip-overlay .overlay-content {
    margin-top     : calc(50vh - 154px);
    margin-left    : calc(50% - 222px);
    display        : block;
    pointer-events : none;
    width          : max-content;
}

#upload-zip-overlay #zip-icon {
    height : 128px;
}

#upload-zip-overlay #zip-icon svg {
    margin-left : calc(50% - 64px);
}

#upload-zip-overlay p {
    font-size      : 24px;
    color          : rgba(0, 0, 0, 0.82);
    letter-spacing : 0.0125em;
    margin-top     : 24px;
}

.upload-zip-error-message {
    width : 300px;
}

.labeled-text.error-text .labeled-text--text {
    font-family : monospace;
    font-size   : 12px;
    line-height : 1.3;
}

.last-table-column-delete-warning {
    width : 550px;
    padding-bottom: 10px;
}

#import-status-page-header {
    color        : black;
    font-size    : 18px;
    padding-left : 16px;
}

.table-tab {
    width  : 100%;
    height : 100%;
}

.v-table {
    display    : block;
    width      : 100%;
    height     : 100%;
    overflow-x : auto;
    overflow-y : hidden;
}

.v-table-header {
    min-width: fit-content;
    font-size      : 16px;
    color          : rgba(0, 0, 0, 0.8);
    letter-spacing : 0.0125em;
    vertical-align : middle;
    border-bottom: var(--table-border);
}

.v-table-body {
    overflow-y : auto;
    overflow-x : hidden;
    height     : 400px;
    min-width: 100%;
    max-width: fit-content;
}

.v-table-header-cell {
    display        : inline-block;
    font-size      : 13px;
    min-height     : 24px;
    max-height     : 48px;
    vertical-align : top;
    position       : sticky;
    top            : 0;
    z-index        : 1;
    color          : rgba(0, 0, 0, 0.82);
    cursor         : pointer;
    overflow       : hidden;
    white-space    : nowrap;
    text-overflow  : ellipsis;
    font-weight    : bold;
    padding        : 4px;
    box-sizing     : border-box;
    border-left    : var(--table-border);
}

.v-table-header-cell:first-child {
    border-left    : unset;
}

.v-table-header-cell:hover {
    background : rgba(0, 0, 0, 0.18);
}

.v-table-header-cell-name {
    pointer-events : none;
}

.v-table-body-row-cell:last-of-type, .v-table-header-cell:last-of-type{
    margin-right: 25px;
}

.v-table-body-row-cell {
    display        : inline-block;
    font-size      : 12px;
    color          : rgba(0, 0, 0, 0.82);
    cursor         : default;
    word-break     : break-word;
    overflow       : hidden;
    text-overflow  : ellipsis;
    height         : inherit !important;
    padding        : 0 4px;
    box-sizing     : border-box;
    border-left   : var(--table-border);
}

.v-table-body-row-cell:first-child {
    border-left   : unset;
}

.v-table-body-row-cells {
    height         : inherit !important;
    pointer-events : auto;
}

.v-table-body-row-cell * {
    height : inherit !important;
}

.v-table-body-row {
    position      : relative;
    border-bottom : var(--table-border);
    box-sizing    : border-box;
}

.v-table-body-row .tr-h-control {
    width    : 100%;
    height   : 4px;
    position : absolute;
    bottom   : -2px;
    left     : 0;
    z-index  : 1;
}

.v-table-body-row[data-order="odd"] {
    background-color : #fafafa;
}

.v-table-body-row[data-order="even"] {
    background-color : #fff;
}

.v-table-body-row:hover {
    background-color : #efefef;
}

.v-table-header-cell[data-type="unknown"], .v-table-body-row-cell[data-type="unknown"] {
    text-align : left !important;
}

.v-table-header-cell[data-type="number"], .v-table-body-row-cell[data-type="number"] {
    text-align : right !important;
}

.v-table-header-cell[data-type="string"], .v-table-body-row-cell[data-type="string"] {
    text-align : left !important;
}

.v-table-header-cell[data-type="svg"], .v-table-body-row-cell[data-type="svg"] {
    text-align : left !important;
}

.v-table-header-cell[data-type="mixed"], .v-table-body-row-cell[data-type="mixed"] {
    text-align : left !important;
}

.v-table-header-cell-missing-dependencies {
    color : red;
}

.v-table-body-row.row-selected {
    background-color : rgba(83, 114, 255, 0.47);
}

.v-table-body-row.row-active {
    background-color : rgba(83, 114, 255, 0.87);
}

.v-table-body-row.row-active.compared {
    color : white;
}

.v-table-body-row.compared {
    color : white;
    opacity: 0.9;
}

.v-table-body-row.compared:hover {
    opacity: 1;
}

.v-table-body-row-cell {
    user-select    : none;
}

/**
 * We use two classes, because we keep cell selection when scroll table,
 * but want to change color only if it is in selected row
 */
.row-selected .v-table-body-row-cell--selected{
    background: rgba(83, 114, 255, 0.47);
    color: white;
    border: 1px solid black;
}

.v-table__unmatched-icon {
    color: red;
    font-size: 1rem;
    vertical-align: text-top;
    margin-right: 0.5rem;
}

.v-table-body-row:has(.v-table__unmatched-icon) {
    background: rgba(255, 0, 0, 0.1);
}

.row-active.compared .v-table-body-row-cell{
    color: white;
}

/*!*********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_switch.css ***!
  \*********************************************************************************/
.switch {
    /*Size of the all children elements based on the size of the switch, this allows the switch to be resized*/
    font-size                     : 1rem;
    display                       : flex;
    padding                       : 0.375em;
    cursor                        : pointer;
    --background-color-transition : background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
    --slider-position-transition  : margin-left 0.2s ease-in-out;
}

.switch[disabled] {
    /*
    We want to show "not-allowed" cursor on disabled switch, but we still allow all pointer events to pass through it.
    To prevent the switch from being clicked, you have to set property "disabled" on the input element itself.
    */
    cursor  : not-allowed;
    opacity : 0.4;
}

.switch__input {
    display : none;
}

.switch__slider {
    display          : flex;
    width            : 2em;
    height           : 0.625em;
    border-radius    : 0.3125em;
    align-items      : center;
    transition       : var(--background-color-transition);
    background-color : var(--theme-text-hint-on-light);

}

.switch__slider::after {
    display          : flex;
    background-color : var(--theme-element-background);
    box-shadow       : var(--box-shadow);
    width            : 1em;
    height           : 1em;
    border-radius    : 50%;
    pointer-events   : none;
    z-index          : 1;
    margin-left      : 0;
    transition       : var(--slider-position-transition), var(--background-color-transition);
    content          : "";
}

.switch__input:checked + .switch__slider {
    background-color : var(--theme-secondary-light);
}

.switch__input:checked + .switch__slider::after {
    background-color : var(--theme-secondary);
    margin-left      : 1em;
}

/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/02_table.css ***!
  \********************************************************************************/
.table {
    width           : 100%;
    height          : 100%;
    border-collapse : collapse;
    border-spacing  : 0;
    font-weight     : 300;
}

.table__cell--head {
    font-size   : 0.875rem;
    font-weight : 500;
    text-align  : start;
}

.table .table__row {
    height        : 48px;
    border-bottom : 1px #eee solid;
}

.table tbody .table__row:hover {
    background-color : var(--list-background-on-hover-color);
}

.table__cell--visible-on-hover > * {
    visibility : hidden;
}

.table__row:hover .table__cell--visible-on-hover > * {
    visibility : visible;
}

.table__row--empty-table-message {
    font-style     : italic;
    text-align     : center;
    pointer-events : none;
    font-weight    : 400;
}

.table__cell--one-line-value {
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}
/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_apply-peak-dialog.css ***!
  \********************************************************************************************/
#apply-peak-dialog {
    width  : 420px;
}

.apply-peak-dialog__text {
    display : inline;
    margin-right: .2em;
}

#applyPeakChemFormula {
    font-weight     : bold;
    text-decoration : underline;
}
/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_billing_tab_style.css ***!
  \********************************************************************************************/
.container[data-name="billing"]{
    min-width: 21rem;
    border: none;
    border-radius: 0;
}

.billing-section {
    margin-bottom: 1rem;
}

.billing-section__header {
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border-bottom: var(--plain-border);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: 1rem;
    align-items: center;
    font-weight: 600;
    background: #f1f1f1;
}

.billing-section__header h2 {
    font-weight: 500;
    margin: 0;
    order: 0;
    flex: 1 1 auto;
}

.billing-section__main {
    margin-top: 1rem;
    border: var(--plain-border);
    border-radius: var(--border-radius);
}

.billing-section__body {
    padding: 1rem;
}
.billing-section__quotas-row {
    height: 2.5rem;
    display: flex;
    align-items: center;
}
.billing-section__quotas-row [data-name="metric-label"] {
    color: var(--theme-text-secondary-on-light);
}
.button--upgrade-plan {
    min-height: 1.8rem;
}
.billing-metric-tooltip-text {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    margin-top: 1.3rem;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    max-width: 28rem;
    font-size: 1rem;
}
.billing-metric {
    cursor: help;
}
[data-name="storage-free"], [data-name="requests-free"] {
    color: var(--theme-text-secondary-on-light);
    font-size: 0.8rem;
}

.billing-metric:hover .billing-metric-tooltip-text {
    visibility: visible;
    opacity: 1;
}

.billing-section__footer {
    padding: 1rem;
    background: #ffebe9;
}

.billing-section__footer:empty {
    display: none;
}

#featuresDisabled:empty {
    display: none;
}

.billing-section__quotas-text {
    display: inline-block;
    width: 10rem;
}
.billing-section__quotas-value{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.billing-section__quotas-hint {
    font-style: italic;
    display: inline-block;
    margin-left: 1rem;
}

.billing-section__description {
    font-style: italic;
    padding-top: 1rem;
}

#billing-section-usage .container {
    border: none;
}

.cancel-subscription-confirmation-dialog__body {
    padding: 1rem 2rem 2rem 0;
}

.cancel-subscription-confirmation-dialog__body p {
    padding: 0.3rem 0;
}
/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_chromatogram-card.css ***!
  \********************************************************************************************/
:root {
    --chromatogram-card__header-line-height : 20px;
}
.detector-run-card {
    display        : flex;
    flex-direction : column;
    position       : relative;
    height         : 100%;
    border-radius: var(--border-radius);
    background     : var(--theme-element-background);
    box-shadow     : var(--box-shadow);
}

.detector-run-card .progress {
    display          : block !important;
    height           : 0;
    transition       : height 150ms linear 250ms;
}

.detector-run-card--loading {
    pointer-events : none;
}

.detector-run-card--loading svg {
    pointer-events : none;
}

.detector-run-card--loading .progress {
    height : 0.25rem;
}

.detector-run-card--loading .detector-run-card-graph-container {
    filter : opacity(0.5);
}

.detector-run-card:focus {
    outline : none;
}

.detector-run-card-header {
    padding         : 0 8px;
    height          : 35px;
    display         : flex;
    align-items     : end;
    justify-content : space-between;
    color           : var(--card-text-color);
    font-size       : 16px;
    line-height     : var(--chromatogram-card__header-line-height);
}

.chromatogram-header__start {
    display : flex;
    gap: 8px;
}

.chromatogram-header__start .material-symbols-outlined {
    font-size : var(--chromatogram-card__header-line-height);
}

.chromatogram-header__view-model-label {
    font-size: 12px;
    user-select: none;
}
.chromatogram-header__end {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1rem;
}

.chromatogram-header__end .material-symbols-outlined {
    font-size  : 16px;
}
.circle {
    width          : 12px;
    height         : 12px;
    margin-right   : 2px;
    border-radius  : 50%;
    vertical-align : middle;
}

.detector-run-card-header .material-symbols-outlined {
    color      : var(--theme-text-hint-on-light);
    transition : color 250ms;
}

.detector-run-card-header .material-symbols-outlined:hover {
    cursor : pointer;
    color  : var(--theme-text-primary-on-light);
    scale  : 1.1;
}

.detector-run-card-graph-container {
    flex-grow  : 2;
    filter     : opacity(1);
    transition : filter 250ms linear 250ms;
}

.chromatogram-header-tour-tip {
    top: -0.25rem;
}

.detector-run-card.injection-chart-slot__collapsed-left{
    height: unset;
}

.injection-chart-slot__collapsed-left{

    .detector-run-card-graph-container{
        flex-grow: 0;
        height: 0;
        overflow: hidden;
    }

    .detector-run-card-header{
        margin-bottom: 1rem;
    }

    .chromatogram-header__collapsing-icon{
        transform: rotate(180deg);
    }

    .chromatogram-header__end{
        display: none;
    }
}
/*!***************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_crawler-page.css ***!
  \***************************************************************************************/
.crawlers-table-header-enabled {
    width : 55px;
}

.crawlers-table-header-progress {
    width : 170px;
}

.crawler-state {
    display : inline-block;
    float   : right;
    height  : 20px;
}

.crawler-state:hover {
    text-decoration : underline;
}

.crawler-state span {
    margin-left    : 8px;
    vertical-align : sub;
}

.crawler-options {
    display : inline-block;
    width   : 60px;
    height  : 20px;
    float   : right;
}

.crawler-options .material-symbols-outlined {
    display    : inline-block;
    float      : right;
    font-size  : 18px !important;
    opacity    : .25 !important;
    transition : opacity 250ms;
}

.crawler-options .material-symbols-outlined:hover {
    opacity   : .85 !important;
    transform : scale(1.1);
    cursor    : pointer;
}
/*!*********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_import-status-page.css ***!
  \*********************************************************************************************/
.page-header--import-status-page .page-header__section--align-start {
    /*The table body has a width of 1000px.*/
    /*Since the table is centered, we can divide the remaining space by 2 to*/
    /*align the end of the first header section with the start of the table.*/
    max-width: calc(calc(100% - 1000px) / 2);
    min-width: 10rem;
}

.page-header--import-status-page .page-header__breadcrumbs-section {
    /*We don't want to show the breadcrumbs on this page*/
    display: none;
}
.page-header--import-status-page .page-header__section--align-mid {
    max-width: 1000px;
}
/*!************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_injection-info-dialog.css ***!
  \************************************************************************************************/
#injection-info-dialog {
    width  : 450px;
}
/*!*****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_injection-page.css ***!
  \*****************************************************************************************/
injection-page {
    display: block;
    margin-top: 4rem;
    width: 100%;
    padding-bottom: 4rem;
    flex: 1 1 auto;
}

.injection-page__chart-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.injection-page__chart-col--left {
    width      : 70%;
    box-sizing : border-box;
    min-width  : 350px;
}

.injection-page__chart-col--right {
    width       : calc(30% - 4px);
    box-sizing  : border-box;
    min-width   : 296px;
}

.injection-chart-slot {
    max-height: 266px;
}

.injection-page__chart-col--right .injection-chart-slot {
    height: 266px;
}

.injection-page__chart-col--right .injection-chart-slot__collapsed-right {
    height: 51px;
    visibility: hidden;
}
/*!**********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_landing.css ***!
  \**********************************************************************************/
.table-page-container {
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    background: white;
    padding: 4rem 0;
}
.landing-tabs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    height: 4em;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.landing-tabs__list {
    padding-left : 2.5rem;
}
.landing-tabs__item {
    list-style-type: none;
    display: inline;
    border: 3px solid rgba(0, 0, 0, 0);
    padding-bottom: 10px;
}
.landing-tabs__item--current {
    border-bottom: 3px solid var(--theme-primary);
}
.landing-tabs__link {
    color: black;
    text-decoration: none;
    font-weight: 400;
    padding: 10px 15px;
}
.landing-tabs__link:hover, .landing-tabs__link--current {
    color: var(--theme-primary);
}

.landing-search {
    height: 48px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.landing-search__icon {
    color: grey;
    padding: 0 15px 0 20px;
}
.landing-search__input {
    border: none;
    height: 90%;
    padding: 0;
    flex: 1 1 0;
}
.n-of-found {
    font-style: italic;
    font-size: .8em;
    margin-right: 20px;
}
.n-of-found > span {
    margin: 0 .2em;
}
.landing-search__button {
    margin-right: 20px;
}
/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_list.css ***!
  \*******************************************************************************/
.peaksel-list{
    -moz-osx-font-smoothing : grayscale;
    -webkit-font-smoothing  : antialiased;
    font-size               : 1rem;
    font-weight             : 400;
    letter-spacing          : 0.009375em;
    text-decoration         : inherit;
    text-transform          : inherit;
    color                   : var(--theme-text-primary-on-light, rgba(0, 0, 0, 0.87));
    margin                  : 0;
    padding                 : 8px 0;
    line-height             : 1.5rem;
    list-style-type         : none;
}


.peaksel-list-item__graphic{
    background-color : transparent;
    color : rgba(0, 0, 0, 0.38);
}

.peaksel-list-item{
    display         : flex;
    position        : relative;
    align-items     : center;
    justify-content : flex-start;
    height          : 48px;
    padding         : 0 16px;
    overflow        : hidden;
}

.peaksel-list-item:focus{
    outline : none;
}

.peaksel-list-item--selected,
.peaksel-list-item--activated{
    color : var(--theme-primary, rgb(6, 95, 212));
}

.peaksel-list-item--selected .peaksel-list-item__graphic,
.peaksel-list-item--activated .peaksel-list-item__graphic{
    color : var(--theme-primary, rgb(6, 95, 212));
}

.peaksel-list-item--disabled{
    color : var(--theme-text-hint-on-light, rgba(0, 0, 0, 0.38));
}

.peaksel-list-item__graphic{
    /* @noflip */
    margin-left     : 0;
    /* @noflip */
    margin-right    : 32px;
    width           : 24px;
    height          : 24px;
    flex-shrink     : 0;
    align-items     : center;
    justify-content : center;
    fill            : currentColor;
}

.peaksel-list-item[dir=rtl] .peaksel-list-item__graphic, [dir=rtl] .peaksel-list-item .peaksel-list-item__graphic{
    /* @noflip */
    margin-left  : 32px;
    /* @noflip */
    margin-right : 0;
}

.peaksel-list .peaksel-list-item__graphic{
    display : inline-flex;
}

.peaksel-radio__outer-circle{
    position      : absolute;
    top           : 0;
    left          : 0;
    box-sizing    : border-box;
    width         : 100%;
    height        : 100%;
    transition    : border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    border-width  : 2px;
    border-style  : solid;
    border-radius : 50%;
}


.peaksel-radio__inner-circle{
    position          : absolute;
    top               : 0;
    left              : 0;
    box-sizing        : border-box;
    width             : 100%;
    height            : 100%;
    -webkit-transform : scale(0, 0);
    transform         : scale(0, 0);
    transition        : border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition        : transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition        : transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    border-width      : 10px;
    border-style      : solid;
    border-radius     : 50%;
}

.peaksel-list-item__graphic {
    margin-right : 16px !important;
}

.peaksel-list-item__text label {
    cursor : pointer;
}

.peaksel-list-item__graphic input[type="checkbox"] {
    width  : 1rem;
}
/*!*************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_page-table.css ***!
  \*************************************************************************************/
.page-table__body {
    padding: 0;
    margin: 0;
}
.page-table__row {
    height: 48px;
    border-bottom: 1px #eee solid;
    font-weight: 300;
    padding: 0 0.5rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-table__row:hover {
    background: var(--md-theme-background);
}
.page-table__row--header {
    display: flex;
    justify-content: flex-start;
}
.page-table__header-cell {
    border: none;
    background: none;
    text-align: left;
    padding: 0;
    font-size: 0.8em;
    font-weight: 500;
}
.page-table__row > * {
    flex: 1 1 0;
}

/*
 1st column is usually the most important (unless there's a column with checkboxes in front of it),
 so making it largest by default.
 */
.page-table__row > :first-child {
    margin: 0 0 0 55px;
    flex: 2 1 0;
}

/************
  Modification for particular tables (e.g. a table of batches, injections, tc) in case defaults didn't work
************/
.page-table__row--edit-batch-injections > :first-child {
    flex: 0 0 80px;
}

.page-table__cell {
    overflow           : hidden;
    /*max-height = 2 x line-height in order to allow only 2 rows per cell*/
    line-height        : 1.2em;
    max-height         : 2.4em;
    display            : -webkit-box;
    -webkit-line-clamp : 2;
    -webkit-box-orient : vertical;
}

.injection-list__row {
    position: relative;
}

.list__checkbox-input {
    position: absolute;
    left: 0;
    width: 1rem;
    display: none;
    margin: 1rem 1.25rem;
}

.page-table__row:hover .list__checkbox-input {
    display: inline-block;
}

.list__checkbox-input:checked {
    display: inline-block;
}

.list__header {
    text-align: center;
    padding: 2rem;
    line-height: 2;
}

/*!******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_pay.css ***!
  \******************************************************************************/
[data-name="subscription-checkout"] {
    border: none;
}

[data-name="subscription-checkout"] .container__body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* approximately equal to height of Paddle's iframe */
    min-height: 812px;
    gap: 4px;
}

.paddle-order-details, .paddle-payment-details {
    flex: 1;
    border: var(--plain-border);
    /* Nicely fit to mobile devices and desktop */
    min-width: 350px;
    max-width: 500px;
    border-radius: var(--border-radius);
}

.checkout-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
}

.checkout-row section {
    display: flex;
    flex-direction: column;
}

[data-name="checkout-subscription"] .checkout-row__label,
[data-name="checkout-subscription"] .checkout-row__value,
[data-name="checkout-pay-as-you-go"] .checkout-row__label,
[data-name="checkout-pay-as-you-go"] .checkout-row__value {
    line-height: 2rem;
}

.checkout-list-title {
    background: var(--md-theme-background);
}

li.checkout-list-title span {
    line-height: 2rem;
    padding-left: 1rem;
}

.checkout-row__details {
    font-weight: 300;
    font-size: 0.825rem;
}

[data-name="checkout-totals"] {
    padding-bottom: 2rem;
}
/*!***************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_radio-button.css ***!
  \***************************************************************************************/
.peaksel-radio{
    -webkit-tap-highlight-color     : rgba(0, 0, 0, 0);
    display                         : inline-block;
    position                        : relative;
    flex                            : 0 0 auto;
    box-sizing                      : border-box;
    width                           : 40px;
    height                          : 40px;
    padding                         : 10px;
    cursor                          : pointer;
    will-change                     : opacity, transform, border-color, color;
}

.peaksel-radio .peaksel-radio__native-control:enabled:not(:checked) + .peaksel-radio__background .peaksel-radio__outer-circle{
    border-color : rgba(0, 0, 0, 0.54);
}

.peaksel-radio .peaksel-radio__native-control:enabled:checked + .peaksel-radio__background .peaksel-radio__outer-circle{
    border-color : var(--theme-secondary, #018786);
}

.peaksel-radio .peaksel-radio__native-control:enabled + .peaksel-radio__background .peaksel-radio__inner-circle{
    border-color : var(--theme-secondary, #018786);
}

.peaksel-radio .peaksel-radio__background::before{
    background-color : #018786;
}

@supports not (-ms-ime-align: auto){
    .peaksel-radio .peaksel-radio__background::before{
        /* @alternate */
        background-color : var(--theme-secondary, #018786);
    }
}

.peaksel-radio::before, .peaksel-radio::after{
    position       : absolute;
    border-radius  : 50%;
    opacity        : 0;
    pointer-events : none;
    content        : "";
}

.peaksel-radio::before{
    transition : opacity 15ms linear, background-color 15ms linear;
    z-index    : 1;
}

.peaksel-radio::before, .peaksel-radio::after{
    top    : calc(50% - 50%);
    /* @noflip */
    left   : calc(50% - 50%);
    width  : 100%;
    height : 100%;
}

.peaksel-radio::before, .peaksel-radio::after{
    background-color : #018786;
}

@supports not (-ms-ime-align: auto){
    .peaksel-radio::before, .peaksel-radio::after{
        background-color : var(--theme-secondary, #018786);
    }
}

.peaksel-radio:hover::before{
    opacity : 0.04;
}

.peaksel-radio:not(.peaksel-ripple-upgraded):focus::before{
    transition-duration : 75ms;
    opacity             : 0.12;
}

.peaksel-radio:not(.peaksel-ripple-upgraded)::after{
    transition : opacity 150ms linear;
}

.peaksel-radio:not(.peaksel-ripple-upgraded):active::after{
    transition-duration : 75ms;
    opacity             : 0.16;
}

.peaksel-radio__background{
    display    : inline-block;
    position   : absolute;
    left       : 10px;
    box-sizing : border-box;
    width      : 50%;
    height     : 50%;
}

.peaksel-radio__background::before{
    position          : absolute;
    top               : 0;
    left              : 0;
    width             : 100%;
    height            : 100%;
    -webkit-transform : scale(0, 0);
    transform         : scale(0, 0);
    transition        : opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition        : opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    transition        : opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    border-radius     : 50%;
    opacity           : 0;
    pointer-events    : none;
    content           : "";
}

.peaksel-radio__native-control{
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    margin   : 0;
    padding  : 0;
    opacity  : 0;
    cursor   : inherit;
    z-index  : 1;
}

.peaksel-radio__native-control:checked + .peaksel-radio__background,
.peaksel-radio__native-control:disabled + .peaksel-radio__background{
    transition : opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition : opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition : opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
}

.peaksel-radio__native-control:checked + .peaksel-radio__background .peaksel-radio__outer-circle,
.peaksel-radio__native-control:disabled + .peaksel-radio__background .peaksel-radio__outer-circle{
    transition : border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
}

.peaksel-radio__native-control:checked + .peaksel-radio__background .peaksel-radio__inner-circle,
.peaksel-radio__native-control:disabled + .peaksel-radio__background .peaksel-radio__inner-circle{
    transition : border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition : transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition : transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
}

.peaksel-radio__native-control:checked + .peaksel-radio__background .peaksel-radio__inner-circle{
    -webkit-transform : scale(0.5);
    transform         : scale(0.5);
    transition        : border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition        : transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition        : transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
}

.peaksel-radio__native-control:disabled + .peaksel-radio__background,
[aria-disabled=true] .peaksel-radio__native-control + .peaksel-radio__background{
    cursor : default;
}

.peaksel-radio__native-control:disabled + .peaksel-radio__background .peaksel-radio__outer-circle,
[aria-disabled=true] .peaksel-radio__native-control + .peaksel-radio__background .peaksel-radio__outer-circle{
    border-color : rgba(0, 0, 0, 0.26);
}

.peaksel-radio__native-control:disabled + .peaksel-radio__background .peaksel-radio__inner-circle,
[aria-disabled=true] .peaksel-radio__native-control + .peaksel-radio__background .peaksel-radio__inner-circle{
    border-color : rgba(0, 0, 0, 0.26);
}

.peaksel-radio__native-control:focus + .peaksel-radio__background::before{
    -webkit-transform : scale(2, 2);
    transform         : scale(2, 2);
    transition        : opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition        : opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
    transition        : opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
    opacity           : 0.12;
}

/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_report-page.css ***!
  \**************************************************************************************/
:root {
    --peak-spectrum-card__header-height : 26px;
    --peak-spectrum-card__body-height   : calc(100% - var(--peak-spectrum-card__header-height));
}

.peak-spectrum-card {
    width      : 219px;
    height     : 208px;
    border     : 1px solid gray;
    margin     : 8px;
    display    : inline-block;
    background : var(--theme-element-background);
    position   : relative;
}

.peak-spectrum-card__header {
    font-size     : 14px;
    padding       : 8px 4px 0 12px;
    height        : var(--peak-spectrum-card__header-height);
    box-sizing    : border-box;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.peak-spectrum-card__body {
    height   : var(--peak-spectrum-card__body-height);
    position : relative;
}

/*!*************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_scan_chart.css ***!
  \*************************************************************************************/
.axis-horizontal-container {
    position: relative;
}

.axis-o {
    display: none;
}

.axis-o:not(:empty) {
    display: unset;
    position: absolute;
    top: 0;
    left: 0;
}

.axis-x:has(+ .axis-o:not(:empty)) {
    display: none;
}

.axis-x:has(+ .axis-o:empty) {
    display: unset;
}
/*!******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/css/03_tab.css ***!
  \******************************************************************************/
.tab{
    position                : relative;
    -moz-osx-font-smoothing : grayscale;
    -webkit-font-smoothing  : antialiased;
    font-size               : 0.875rem;
    line-height             : 2.25rem;
    font-weight             : 500;
    letter-spacing          : 0.0892857143em;
    text-decoration         : none;
    text-transform          : uppercase;
    display                 : flex;
    flex                    : 1 0 auto;
    justify-content         : center;
    box-sizing              : border-box;
    height                  : 48px;
    padding                 : 0 24px;
    border                  : none;
    outline                 : none;
    background              : none;
    text-align              : center;
    white-space             : nowrap;
    cursor                  : pointer;
    -webkit-appearance      : none;
    z-index                 : 1;
}

.tab .tab__text-label{
    color : #000;
}

.tab__ripple{
    -webkit-tap-highlight-color     : rgba(0, 0, 0, 0);
    will-change                     : transform, opacity;
    position                        : absolute;
    top                             : 0;
    left                            : 0;
    width                           : 100%;
    height                          : 100%;
    overflow                        : hidden;
}

.tab__ripple::before, .tab__ripple::after{
    position       : absolute;
    border-radius  : 50%;
    opacity        : 0;
    pointer-events : none;
    content        : "";
}

.tab__ripple::before{
    transition : opacity 15ms linear, background-color 15ms linear;
    z-index    : 1;
}

.tab__ripple::before, .tab__ripple::after{
    top    : calc(50% - 100%);
    /* @noflip */
    left   : calc(50% - 100%);
    width  : 200%;
    height : 200%;
}

.tab__ripple::before, .tab__ripple::after{
    background-color : rgb(6, 95, 212);
}

.tab__ripple:hover::before{
    opacity : 0.04;
}

.tab__ripple:not(.ripple-upgraded):focus::before, .tab__ripple.ripple-upgraded--background-focused::before{
    transition-duration : 75ms;
    opacity             : 0.12;
}

.tab__ripple:not(.ripple-upgraded)::after{
    transition : opacity 150ms linear;
}

.tab__ripple:not(.ripple-upgraded):active::after{
    transition-duration : 75ms;
    opacity             : 0.16;
}

.tab__content{
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : inherit;
    pointer-events  : none;
}

.tab__text-label{
    transition : 150ms color linear, 150ms opacity linear;
    z-index    : 2;
    display     : inline-block;
    opacity     : 0.6;
    line-height : 1;
}

.tab-scroller__scroll-content{
    position          : relative;
    display           : flex;
    flex              : 1 0 auto;
    -webkit-transform : none;
    transform         : none;
    will-change       : transform;
}

.tab--active .tab__text-label{
    color : rgb(6, 95, 212);
}

.tab-indicator{
    display        : flex;
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    pointer-events : none;
    z-index        : 1;
}

.tab-indicator > .tab-indicator__content--underline{
    background-color : rgb(6, 95, 212);
}

.tab-indicator > .tab-indicator__content--underline{
    height : 2px;
}

.tab-indicator__content{
    -webkit-transform-origin : left;
    transform-origin         : left;
    opacity                  : 0;
}

.tab-indicator__content--underline{
    align-self : flex-end;
    width      : 100%;
}

.tab-indicator--active > .tab-indicator__content{
    opacity : 1;
}

.tab-indicator > .tab-indicator__content{
    transition : 250ms -webkit-transform cubic-bezier(0.4, 0, 0.2, 1);
    transition : 250ms transform cubic-bezier(0.4, 0, 0.2, 1);
    transition : 250ms transform cubic-bezier(0.4, 0, 0.2, 1), 250ms -webkit-transform cubic-bezier(0.4, 0, 0.2, 1);
}

/*!******************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/ActionPanel/ActionPanel.css ***!
  \******************************************************************************************************/
.action-panel {
    --action-panel-background-color: rgb(51, 51, 51);
    --action-panel-background-color-hover: rgb(84, 84, 84);
    --action-panel-text-label-color: rgb(255, 255, 255);
    --action-panel-cancel-icon-color: rgb(196, 196, 196);
    --action-panel-button-disabled-color: rgb(136, 136, 136);
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 4rem;
    min-width: 30rem;
    background: var(--action-panel-background-color);
    border-radius: var(--border-radius);
    color: var(--action-panel-text-label-color)
}

.action-panel__body {
    padding: 1rem;
    height: 4rem;
}

.action-panel__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2rem;
}

.action-panel__selected-block {
    display: flex;
    align-items: center;
}

.action-panel__selected-count {
    padding-right: 0.375rem;
}

.action-panel__cancel-selection-icon {
    padding-left: 0.5rem;
    font-size: 1.25rem;
    color: var(--action-panel-cancel-icon-color);
    cursor: pointer;
}

.action-panel__cancel-selection-icon:hover {
    color: var(--action-panel-text-label-color);
}

.action-panel__action-button {
    border: none;
    padding: 0.5rem;
    font-size: 1rem;
    background: var(--action-panel-background-color);
    cursor: default;
    color: var(--action-panel-text-label-color);
    margin-left: 1rem;
}

.action-panel__action-button[disabled]{
    color: var(--action-panel-button-disabled-color);
}

.action-panel__action-button:hover:not([disabled]) {
    cursor: pointer;
}

.action-panel__action-icon {
    font-size: 1.25rem;
    color: inherit;
}

.action-panel__action-text {
    color: inherit;
}
/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/AddInjectionDialog/AddInjectionDialog.css ***!
  \********************************************************************************************************************/
.add-injection-dialog {
    width: 40rem;
    overflow: unset;
}

.add-injection-dialog__content {
    position: relative;
}

.add-injection-dialog__row {
    padding-bottom: .8rem ;
}

.add-injection-dialog__row-subtitle{
    font-style: italic;
    font-size: .8rem;
    color: var(--theme-text-hint-on-light);
}

.add-injection-dialog__drop-area {
    width: 100%;
    height: 15rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #f9f9f9;
}

.add-injection-dialog__upload-icon path {
    fill: var(--theme-text-hint-on-light);
}

.add-injection-dialog__drop-area-description {
    color: var(--theme-text-hint-on-light);
}

.add-injection-dialog__drop-area .drag-n-drop-area {
    box-sizing: content-box;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: var(--theme-element-background);
}

.add-injection-dialog__drop-area .drag-n-drop-area span {
    background: var(--theme-element-background);
    font-size: 1rem;
}

.add-injection-dialog__link {
    color: var(--theme-primary);
    text-decoration: underline;
    cursor: pointer;
}

.add-injection-dialog__help-icon {
    position: absolute;
    top: 1.3rem;
    right: 1.3rem;
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--theme-text-hint-on-light);
    border: none;
    background: transparent;
}

.add-injection-dialog__help-icon:hover {
    cursor: pointer;
    color: var(--theme-text-primary-on-light);
}

.add-injection-dialog__help-block {
    position: absolute;
    top: 2.75rem;
    right: 1.3rem;
    width: fit-content;
    height: 2.5rem;
    border-radius: 6px;
    box-shadow: var(--box-shadow);
}

.add-injection-dialog__help-block:hover {
    box-shadow: var(--box-shadow-hover);
}

.add-injection-dialog__help-link, .add-injection-dialog__help-link:visited {
    padding: 0.75rem 1rem;
    line-height: 2.5rem;
    color: var(--theme-primary);
}
/*!**********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/AddUserToTeamDialog/AddUserToTeamDialog.css ***!
  \**********************************************************************************************************************/
.add-user-dialog {
    width: 40rem;
    overflow: unset;
}

.add-user-dialog__dropdown-item {
    list-style: none;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.add-user-dialog__dropdown-item:hover {
    background: var(--list-background-on-hover-color);
    cursor: pointer;
}

.add-user-dialog__dropdown-item {
    display: flex;
}

.add-user-dialog__item-name {
    font-weight: bold;
}

.add-user-dialog__item-description {
    font-size: 0.75rem;
    opacity: 0.8;
}

.add-user-dialog__selected-users {
    max-height: 15rem;
    overflow: auto;
    margin-bottom: 1rem;
}

.add-user-dialog__admin-icon {
    margin-right: 1rem;
    flex-shrink: 0;
}

.add-user-dialog .chips__item:hover {
    cursor: default;
}

.add-user-dialog .chips__item:hover .chips__icon {
    cursor: pointer;
}
/*!*************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/apply-to-others-dialog/ApplyToOthersDialog.css ***!
  \*************************************************************************************************************************/
.apply-to-others-dialog {
    min-width: 20rem;
}

.apply-to-others-dialog__content {
    display: flex;
    gap: 4rem;
}

/*!****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/BaseDialog/BaseDialog.css ***!
  \****************************************************************************************************/
.base-dialog {
    min-width: 32rem;
    max-width: 85vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    --dialog__header__height: 3em;
    --dialog__header__top-padding: 24px;
    --dialog__header__bottom-padding: 10px;
    --dialog__footer__height: 3em;
    --dialog__right-padding: 24px;

    /*need to keep right padding 0 so that the content could extend fully to the right and have its own padding.
     This way its scroll bar will touch popup right border instead of being padded.*/
    padding: 24px 0 var(--dialog__header__bottom-padding) 24px;
    background: white;
    outline: none;
}

.dialog__header {
    font-size: 1.25em;
    padding-right: var(--dialog__right-padding);
}

.dialog__main-content {
    /*
      We want the content of the popup to be scrollable while the header and the footer (buttons) stay on the screen,
      so the max height of the content is the screen height minus header & footer.

      The calculations are a bit off since the scroll appears sooner when you start shrinking the window,
      was lazy to figure out the mistake. But that's fine - we'd add extra space anyway, don't want to touch
      browser boundaries.

      There will be dialogs w/o header or footer, but those are usually small ones. Their max-height will have
      extra pixels, well.. because they have no actual header or footer. But for small popups this isn't critical
      because no one will shrink the browser that much.
    */
    max-height: calc(100vh - var(--dialog__header__height)
    - var(--dialog__header__top-padding) - var(--dialog__header__bottom-padding)
    - var(--dialog__footer__height));
    overflow: auto;
    margin: 1rem 0;
    padding-right: var(--dialog__right-padding);
}

.dialog__main-content--stack-trace-only {
    font-family: monospace;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--theme-text-primary-on-light);
    white-space: pre;
}

.dialog__footer {
    height: var(--dialog__footer__height);
    padding-right: var(--dialog__right-padding);
}

.dialog__footer--main-buttons-only {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dialog__footer--main-buttons-only > button {
    margin-left: 0.5rem;
}

.bad-request-dialog__list-item {
    padding: 0.5rem 0;
}
/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/BatchViewCmp/BatchView.css ***!
  \*****************************************************************************************************/
.batch-view {
    padding: 4px 8px 0 8px;
}

.batch-view__content {
    display: flex;
    position: relative;
}

.batch-view__content .v-table-body {
    height: 156px;
}

.batch-view__preview {
    display: inline-block;
    height: 192px;
    border-radius: var(--border-radius);
    background: #ffffff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);
    position: relative;
    vertical-align: top;
    flex: 1;
}

.batch-view__preview .dancing-bars {
    color: #009292;
    text-indent: -9999em;
    margin: 70px auto;
    position: relative;
    font-size: 8px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.batch-view__preview-plate {
    width: 254px;
}

.batch-view__preview-table {
    width: 100%;
}

.batch-view__plates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.batch-view__table {
    height: 192px;
    width: 100%;
    min-width: 254px;
    border-radius: var(--border-radius);
    background: #ffffff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);
    /*margin: 0 4px;*/
    position: relative;
    vertical-align: top;
    flex: 1;
    padding: 4px 8px 8px;
    white-space: nowrap;
}

@media (max-width: 552px) {
    .batch-view__plates {
        width: 256px;
    }
}

@media (min-width: 553px) and (max-width: 812px) {
    .batch-view__plates {
        width: 516px;
    }
}

@media (min-width: 813px) and (max-width: 1072px) {
    .batch-view__plates {
        width: 772px;
    }
}

@media (min-width: 1073px) and (max-width: 1332px) {
    .batch-view__plates {
        width: 1032px;
    }
}

@media (min-width: 1333px) {
    .batch-view__plates {
        width: 1296px;
    }
}
/*!*****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/BulkOperationWarningDialog/BulkOperationDialog.css ***!
  \*****************************************************************************************************************************/
.bulk-operation-warning-dialog {
    width: 70vw;
    min-width: 30rem;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.bulk-operation-warning-dialog .dialog-buttons-row {
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}

.bulk-operation-warning-dialog .dialog-row{
    height: unset;
}

.bulk-operation-warning-dialog .dialog-row:nth-child(2){
    max-height: 40vh;
    overflow-y: auto;
    margin: 1rem 0;
}

.bulk-operation-warning-dialog li span:nth-child(2) {
    padding-left: 1rem;
    white-space: nowrap;
}

.bulk-operation-warning-dialog li {
    height: 1.5rem;
    display: flex;
}


/*!***********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/charts/axes/axes.css ***!
  \***********************************************************************************************/
.axis__label--y {
    transform   : rotate(-90deg) translate(0px, -5px);
    font-size   : 12px;
    fill        : #9e9e9e;
    user-select : text;
    text-anchor : end;
}
/*!**********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/charts/line-chart/LineChart.css ***!
  \**********************************************************************************************************/
.line-chart__trace {
    fill : none;
}

.transient-trace {
    stroke-opacity : 0.75;
}

.transient-trace--active {
    stroke-opacity : 1;
    stroke-width   : 2px;
}

.transient-trace--fadeout {
    stroke-opacity : 0.25;
}
/*!******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chips/Chips.css ***!
  \******************************************************************************************/
.chips {
    --chip-color-primary : 6, 95, 212;
    --chip-height        : 24px;
    width                : 100%;
    display              : flex;
    gap                  : 2px;
    overflow             : hidden;
}

.chip-container {
    display     : flex;
    position    : relative;
    align-items : center;
    height      : var(--chip-height);
    box-sizing  : border-box;
    flex-grow   : 1;
}

.chips__item {
    display       : flex;
    align-items   : center;
    padding       : 0 8px;
    border-radius : 8px;
    min-width     : 45px;
    height        : var(--chip-height);
    box-sizing    : border-box;
    position      : absolute;
    left          : 0;
    font-size     : 0.875rem;
    font-weight   : 400;
    color         : black;
    border        : solid 1px rgba(var(--chip-color-primary));
    cursor        : pointer;
    user-select   : none;
    background    : white;
    width         : max-content;
}

.chips__item:hover {
    box-shadow : inset 0 var(--chip-height) rgba(var(--chip-color-primary), .04);
    z-index    : 1;
}

.chips__item:active {
    box-shadow : inset 0 var(--chip-height) rgba(var(--chip-color-primary), .08);
}

.chips__item--selected {
    border-color: var(--theme-primary-light);
    color: var(--theme-primary);
}

.chips__icon {
    font-size: 1rem;
    line-height: 1.25rem;
    margin-left: 0.25rem;
    color: var(--theme-text-hint-on-light);
}

.chips__icon:hover {
    color: var(--theme-text-primary-on-light);
}

.chips--wrapped {
    flex-wrap: wrap;
}

.chips--wrapped .chip-container {
    /** We should remove option 'position: relative' because in wrapped mode want to apply default position */
    position: unset;
}

.chips--wrapped .chips__item {
    /** We should remove option 'position: absolut' because in wrapped mode want to apply default position */
    position: unset;
}
/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chromatogram/baseline/baseline-editor.css ***!
  \********************************************************************************************************************/
.baseline-overlay {
    fill           : none;
    stroke-opacity : 0;
    stroke-width   : 14px;
    stroke         : rgb(117, 117, 117);
}

.baseline-anchor {
    fill : #2b2b2b;
}

.baseline-anchor.active {
    fill-opacity : 0;
    stroke       : #2b2b2b;
}

/*!********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chromatogram/injection-splitter/EchoMsSplitDialog.css ***!
  \********************************************************************************************************************************/
.echoMs-split-popup {
    min-width: 34rem;
    width: 80%;
}

.echoMs-split-popup #chromatogram-graph {
    height: 200px;
}

.echoMs-split-popup #header-with-zoom-icon {
    display: flex;
    justify-content: flex-end;
}

.echoMs-split-popup #chromatogram-header-zoom-out-icon {
    font-size: var(--chromatogram-card__header-line-height);
    color: var(--theme-text-hint-on-light);
    transition: color 250ms;
}

.echoMs-split-popup #chromatogram-header-zoom-out-icon:hover {
    cursor: pointer;
    color: var(--theme-text-primary-on-light);
    scale: 1.1;
}
/*!**********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chromatogram/integration/IntegrationMethodEditorCmp.css ***!
  \**********************************************************************************************************************************/
.integration-method-editor__original-signal-trace{
    stroke       : rgba(0, 0, 0, .5);
    stroke-width : 1px;
}
.integration-method-editor__smoothed-signal-trace{
    stroke       : rgba(0, 0, 0, .5);
    stroke-width : 1px;
}
.integration-method-editor__deriv1-trace{
    stroke       : rgba(0, 128, 0, 0.5);
    stroke-width : 1px;
}
.integration-method-editor__deriv2-trace{
    stroke       : rgba(0, 0, 255, 0.5);
    stroke-width : 1px;
}
.integration-method-editor__curvature-threshold-line {
    stroke       : rgba(0, 0, 255);
    stroke-width : 2px;
    stroke-dasharray: 3;
}

.integration-method-editor__detected-peak {
    fill: #cafebabe;
    stroke: gray;
    fill-opacity: .15;
}
/*!***********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chromatogram/non-integrable-area/non-integrable-area.css ***!
  \***********************************************************************************************************************************/
.non-integrable {
    pointer-events : none;
}

.non-integrable__area {
    fill    : grey;
    opacity : .3;
    mask    : url(#mask-stripe);
}

.non-integrable__border {
    fill    : grey;
    opacity : .3;
}
.non-integrable__text {
    transform      : matrix(1, 0, 0, -1, 0, 0) rotate(-90deg);
    fill           : #9e9e9e;
    font-size      : 12px;
    pointer-events : none;
}

.non-integrable__area--editable {
    fill : #ff1b1b;
}

.non-integrable__border--editable {
    fill : #ff1b1b;
    cursor  : ew-resize;
    pointer-events: all;
}
/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chromatogram/peak/peak-editor.css ***!
  \************************************************************************************************************/
.peak__area {
    stroke         : #000066;
    pointer-events : none;
}

.unknown-peak__area {
    stroke: #787878;
    fill: #ccc;
    pointer-events: none;
}

.peak-creator__overlay {
    cursor         : crosshair;
    fill           : none;
    stroke         : none;
    pointer-events : all;
}

.peak-creator__selection {
    cursor          : crosshair;
    fill            : rgb(119, 119, 119);
    fill-opacity    : 0.3;
    shape-rendering : crispedges;
    stroke          : none;
}

.peak-editor__overlay {
    cursor          : move;
    fill            : rgb(119, 119, 119);
    fill-opacity    : 0.3;
    shape-rendering : crispedges;
    stroke          : none;
}

.peak-editor__border {
    cursor       : ew-resize;
    fill-opacity : 0;
}

.peak-editor__anchor {
    visibility             : visible;
    pointer-events         : all;
    font-family            : Lato, sans-serif;
    -webkit-font-smoothing : antialiased;
    fill                   : #2b2b2b;
}
/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chromatogram/peak/peak-labels.css ***!
  \************************************************************************************************************/
.chromatogram-graph__peak-labels {
    position       : absolute;
    overflow       : visible;
    /**
    The layer with labels is above the layer with peak-editing controls. And we can't move it underneath because
    in that case the line between peak and label will be underneath too and won't be visible. Neither we could
    put this layer as a sub-layer within the chromatogram graphs, because this one should be able to overflow.
     */
    pointer-events : none;
}

.peak-labels__label {
    cursor         : pointer;
    /**
    We set "pointer-events: none" to the parent, but the label itself must be clickable.
     */
    pointer-events : all;
}

.peak-labels__svg {
    overflow : hidden;
}

.peak-labels__label-text {
    pointer-events : none;
    font-size      : 12px;
}

.peak-labels__label-rect {
    filter : url(#drop-shadow);
    fill   : white;
}

.peak-labels__label-rect--unknown {
    filter : url(#drop-shadow);
    fill   : #d5d5d5;
}

.peak-labels__link {
    fill             : none;
    pointer-events   : none;
    stroke           : black;
    stroke-dasharray : 2, 4;
}

/*!***************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chromatogram/PeakSpectrumPopup/SpectrumPopup.css ***!
  \***************************************************************************************************************************/
.spectrum-popup .spectrum-component__header {
    height: 20px;
}

.spectrum-popup .spectrum-component__body {
    width: 650px;
    height: 350px;
    box-shadow: none;
}

.spectrum-popup .dancing-bars {
    position: absolute;
    top: 200px;
    left: 340px;
    margin: 0 auto;
    z-index: 9;
}

/*!***********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chromatogram/scan-selector/scan-selector.css ***!
  \***********************************************************************************************************************/
.chromatogram-graph__scan-selector {
    overflow : visible;
}

.shadow-scan-selector-stripe {
    fill             : none;
    pointer-events   : none;
    stroke           : #9e9e9e;
    stroke-dasharray : 4, 4;
}

.shadow-scan-selector-rect {
    opacity : 0.9;
    fill    : #616161;
}

.shadow-scan-selector-text {
    font-size   : 75%;
    fill        : white;
    user-select : text;
}

.scan-selector-line-red {
    fill           : none;
    stroke         : #F44336;
    stroke-width   : 1px;
    pointer-events : none;
}

/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/chromatogram/trace/chromatogram-trace.css ***!
  \********************************************************************************************************************/
.chromatogram-graph {
    position : relative;
    width    : 100%;
    height   : 231px; /* 266 px - card height - 35px header height*/;
}

.report-page .chromatogram-graph {
    height   : 100%;
}

.chromatogram-graph__trace {
    fill         : none;
    stroke       : rgb(117, 117, 117);
    stroke-width : 1px;
    opacity      : 0.5;
}

.chromatogram-graph__axes {
    width    : 100%;
    height   : 100%;
    position : absolute;
}

.chromatogram-graph__drawing-layer {
    position  : absolute;
}

svg.scan-selector-svg {
    width     : calc(100% - 38px);
    height    : 185px;
    transform : matrix(1, 0, 0, -1, 20, 15)
}

svg.baseline-controls-svg {
    width     : calc(100% - 38px);
    height    : 185px;
    transform : matrix(1, 0, 0, -1, 20, 15);
    overflow  : visible;
    display   : none;
}

svg.peak-anchors-controls-svg {
    width          : calc(100% - 38px);
    height         : 185px;
    transform      : matrix(1, 0, 0, -1, 20, 15);
    overflow       : visible;
    pointer-events : none;
}

.chromatogram-graph__alignment {
    height    : 25px;
    cursor    : grab;
}

/*LEGACY*/
.total-signal-chromatogram-baseline-area {
    opacity : 0.25;
}

.extracted-signal-chromatogram {
    fill         : none;
    stroke-width : 1px;
}

.chromatogram-graph svg {
    position : absolute;
}

.chromatogram-graph-svg-text {
    /*
    -1 turns they y coordinates upside down. So whatever was at the top is now at the bottom. This makes the
    actual text upside down. This is needed because the text's parent is also upside down, so we do yet another
    turn to fix the text.
    */
    transform : matrix(1, 0, 0, -1, 0, 0)
}

.baseline-anchor[activated="true"] {
    fill-opacity : 0;
    stroke       : #2b2b2b;
}

.peak-baseline-anchors-link {
    pointer-events : none;
    stroke         : #2b2b2b;
    stroke-width   : 1px;
}

g.peak-controls rect.selection {
    stroke : none;
}
/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/CreateOrgDialog/CreateOrgDialog.css ***!
  \**************************************************************************************************************/
.create-organization-dialog {
    width: 35rem;
}

dialog.create-organization-dialog .dialog-content {
    padding: .25rem .75rem .25rem .75rem;
    border-width: 1.25rem 0 0 0;
    border-color: var(--theme-element-background);
    border-style: solid;
    overflow: auto;
    max-height: 80vh;
}

dialog.create-organization-dialog .dialog-buttons {
    height: 2.25rem;
}

.create-organization-dialog__prompt-row {
    height: 3rem;
}

.create-organization-dialog__prompt {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--theme-text-hint-on-light);
    height: 3rem;
}

.create-organization-dialog__url {
    color: var(--theme-text-primary-on-light);
}
/*!******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/DeleteBatchNotificationDialog/DeleteBatchNotificationDialog.css ***!
  \******************************************************************************************************************************************/
.delete-batch-notification-dialog__content{
    padding-bottom: 0.5rem;
}

.delete-batch-notification-dialog__radio-buttons-block {
    margin: 1rem 0;
}

.delete-batch-notification-dialog__radio-buttons-row {
    display: flex;
    padding: 0.5rem 0;
}

.delete-batch-notification-dialog__error-block {
    height: 1.5rem;
}

.delete-batch-notification-dialog__error-text {
    color: var(--theme-error);
    font-size: 0.75rem;
}

.delete-batch-notification-dialog__radio-buttons-row input,
.delete-batch-notification-dialog__radio-buttons-row label {
    cursor: pointer;
}
/*!********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/DeleteBatchNotificationDialog/FailedBatchResourses/FailedInjectionsDialog.css ***!
  \********************************************************************************************************************************************************/
.forbidden-injections-dialog .dialog__header {
    font-size: 1rem;
}

.forbidden-injections-dialog__batch-block{
    margin: 1rem 0;
}

.forbidden-injections-dialog__batch-name{
    margin: 0.5rem 0;
}

.forbidden-injections-dialog__content {
    overflow: auto;
    margin: 2rem 0;
    padding: 0 1rem 0 0;
}
/*!**********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/DownloadErrorDialog/DownloadErrorDialog.css ***!
  \**********************************************************************************************************************/
.download-error-dialog__list {
    list-style: inside;
    padding: 0.5rem 0;
}
/*!**********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/DropdownInput/DropdownInput.css ***!
  \**********************************************************************************************************/
dropdown-input {
    display: inline-block;
    width: 100%;
    height: 4rem;
}

dropdown-input dropdown-list {
    display: none;
    margin-top: 3rem;
    /* We use a fixed position because we want to specify the location ourselves (related to the browser window,
    not closest positioned relative)*/
    position: fixed;
    z-index: 9;
}

dropdown-input dropdown-list[open] {
    display: block;
}

dropdown-input.dropdown-select text-input .text-input__input {
    pointer-events: none;
}

dropdown-list {
    width: 100%;
}

dropdown-list ul {
    display: grid;
    position: absolute;
    margin: 0;
    box-shadow: var(--box-shadow);
    background-color: var(--theme-element-background);
    grid-template-columns: 1fr;
    max-height: 10rem;
    padding: 0;
    border-radius: 0.375rem;
    color: var(--theme-text-primary-on-light);
    z-index: 9;
    overflow-y: auto;
    max-width: 100%;
}

dropdown-list li {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    min-height: 2rem;
    color: var(--theme-text-primary-on-light);
    cursor: pointer;
    background-color: var(--theme-element-background);
}

dropdown-list li[hidden] {
    display: none;
}

dropdown-list li[disabled] {
    pointer-events: none;
    color: var(--theme-text-hint-on-light);
}

dropdown-list li:hover, .dropdown-list__item--active {
    background-color: var(--list-background-on-hover-color);
}

dropdown-list li mark {
    font-weight: 600;
    background-color: unset;
}
/*!****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/ErrorPopup/ErrorPopup.css ***!
  \****************************************************************************************************/
.popup--error {
    max-width : 700px;
}

.popup--error .labeled-text--text {
    max-height    : 350px;
    overflow-y    : auto;
    border-bottom : var(--plain-border);
}

/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/file-drop/FileDropArea.css ***!
  \*****************************************************************************************************/
.drag-n-drop-area {
    width            : 100%;
    height           : 100%;
    position         : absolute;
    display          : flex;
    top              : 0;
    flex-direction   : column;
    justify-content  : center;
    align-items      : center;
    box-sizing       : border-box;
    background-color : #f9f9f9;
    border           : 1px dashed gray;
    border-radius: var(--border-radius);
}

.drag-n-drop-area span {
    font-size : 23px;
}
/*!************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/IconWithDropdownMenu/IconWithDropdownMenu.css ***!
  \************************************************************************************************************************/
.icon-with-dropdown-menu{
    position: relative;
}
.icon-with-dropdown-menu__icon{
    cursor: pointer;
}
.icon-with-dropdown-menu__menu-below {
    display: grid;
    position: absolute;
    right: 0;
    margin: 0;
    box-shadow: var(--box-shadow);
    border: none;
    background-color: var(--theme-element-background);
    grid-template-columns: 1fr;
    width: max-content;
    padding: 0.5rem;
    border-radius: 6px;
    color: var(--theme-text-primary-on-light);
    top: 2em;
}
.icon-with-dropdown-menu__menu-below[data-hidden] {
    display: none;
}
.icon-with-dropdown-menu__menu-item {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 12px;
    min-height: 42px;
    cursor: pointer;
    gap: 0.5rem;
    border-radius: 0.4rem
}
.icon-with-dropdown-menu__menu-item:hover:not([disabled]) {
    background-color: var(--list-background-on-hover-color);
}
.icon-with-dropdown-menu__menu-item[disabled]{
    cursor: default;
    color: var(--theme-text-hint-on-light);
}
.icon-with-dropdown-menu__menu-item[id="injection-delete"],
.icon-with-dropdown-menu__menu-item[id="batch-delete"],
.icon-with-dropdown-menu__menu-item[id="post-delete"] {
    color: red;
}

.icon-with-dropdown-menu__menu-below-icon{
    width: 1rem;
    font-size: 1rem;
}
/*!**********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/InjectionPropertiesDialog/InjectionPropertiesDialog.css ***!
  \**********************************************************************************************************************************/
.injection-properties-dialog {
    width: 50rem;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.injection-properties-dialog__content-block {
    height: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.injection-properties-dialog__content {
    max-height: calc(100% - 2.5rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.injection-properties-dialog__property-inputs{
    overflow-y: auto;
    padding-right: 1rem;
}

.injection-properties-dialog__title-row {
    height: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.injection-properties-dialog__add-property-row {
    height: 1.5rem;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--theme-text-primary-on-light);
    opacity: 0.8;
    width: max-content;
    padding-right: 0.5rem;
}

.injection-properties-dialog__add-property-row:hover {
   opacity: 1;
}

.injection-properties-dialog__add-property-row[disabled]{
    opacity: 0.5;
    cursor: default;
}

.injection-properties-dialog__title{
    font-size: 1.5rem;
    font-weight: bold;
}

.injection-properties-dialog__prompt {
    margin: 2rem auto;
    text-align: center;
}

.injection-properties-dialog__icon {
    padding-left: 0.5rem;
    font-size: 1.25rem;
    color: var(--theme-text-hint-on-light);
    cursor: pointer;
}

.injection-properties-dialog__icon:hover {
    color: var(--theme-text-primary-on-light);
}

.injection-properties-dialog__add-icon {
    height: 1.25rem;
    width: 1.25rem;
    display: inline-flex;
    background: var(--theme-text-primary-on-light);
    opacity: 0.9;
    color: white;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    margin-right: 0.5rem;
}

.injection-properties-dialog__property-row{
    display: flex;
    gap: 1rem;
    align-items: center;
}

.injection-properties-dialog__name-input {
    flex: 2;
}

.injection-properties-dialog__value-input {
    flex: 3;
}

.injection-properties-dialog__icon-block {
    width: 1rem;
}

.injection-properties-dialog__delete {
    display: none;
}

.injection-properties-dialog__property-row:hover .injection-properties-dialog__delete {
    display: inline;
}

.injection-properties-dialog__property-row[data-type="OVERRIDDEN"]:hover .injection-properties-dialog__delete {
    display: none;
}

.injection-properties-dialog__add-first-property-btn{
    margin-top: 1rem;
}

.injection-properties-dialog__help-link {
    display: inline-block;
    height: 1.25rem;
}

.injection-properties-dialog__undo {
    display: none;
}

[data-type="OVERRIDDEN"]:hover .injection-properties-dialog__undo {
    display: unset;
}

[data-type="OVERRIDDEN"] .injection-properties-dialog__delete {
    display: none;
}

[data-type="RAW"] .injection-properties-dialog__delete:hover {
    cursor: not-allowed;
    color: var(--theme-text-hint-on-light);
}
/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/IntegrationMethodCard/IntegrationMethodCard.css ***!
  \**************************************************************************************************************************/
.integration-method-card {
    display        : flex;
    flex-direction : column;
    position       : relative;
    height         : 266px;
    width          : 320px;
    border-radius: var(--border-radius);
    background     : var(--theme-element-background);
    box-shadow     : var(--box-shadow);
}

.integration-method-card__header {
    width  : 100%;
    height : 48px;
}

.integration-method-card__header .tab {
    width : 33%;
}

.integration-method-card__tab-content {
    height  : 154px;
    padding : 0 8px;
}

.integration-method-card .dialog-row {
    display : flex;
    height  : auto;
}

.integration-method-card .dialog-row:nth-child(2) {
    flex-direction : column;
}

.integration-method-card .dialog-buttons-row {
    height : 64px;
}

.integration-method-card .dialog-row text-input {
    margin-right : 0.875rem;
    display      : inline-block;
    flex: 1 1 45%;
}

.integration-method-card .dialog-row text-input label {
    font-size : 0.6875rem;
}

.integration-method-card .checkbox-with-label {
    display     : flex;
    align-items : center;
    font-size   : 12px;
    cursor      : pointer;
    user-select : none;
    color       : var(--theme-text-secondary-on-light);
    line-height : 32px;
    width       : fit-content;
}

.integration-method-card .checkbox-with-label input {
    width : 1.3125em;
}

.integration-method-card .js-additional-options-menu {
    margin-top : 88px;
}

.checkbox-with-label {
    display : flex;
}

.integration-method-card__help-icon {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--theme-text-hint-on-light);
    border: none;
    background: transparent;
}

.integration-method-card__help-icon:hover {
    color: var(--theme-text-primary-on-light);
}
/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/massSpec/FragmentConfigDialog.css ***!
  \************************************************************************************************************/
dialog.fragment-config .dialog-content {
    padding: .25rem .75rem .25rem .75rem;
    border-width: 1.25rem 0;
    border-color: var(--theme-element-background);
    border-style: solid;
    overflow: auto;
    max-height: 80vh;
    min-width: 37rem;
}

dialog.fragment-config .dialog-buttons {
    height: 2.25rem;
}

dialog.fragment-config header {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 2.25rem;
    position: relative;
}

dialog.fragment-config header h3 {
    margin: 0;
}

dialog.fragment-config .table__body--empty::after {
    content: "empty";
    color: darkgray;
}

dialog.fragment-config input[type="checkbox"] {
    width: 1rem
}

dialog.fragment-config th {
    text-align: center;
    vertical-align: middle;
    min-width: 7rem;
}

dialog.fragment-config th:first-child, dialog.fragment-config th:last-child {
    min-width: 2rem;
}

dialog.fragment-config td {
    text-align: center;
    vertical-align: middle;
}

.table__row--fragment-config .table__cell.clickable {
    text-decoration: underline;
    text-underline-offset: 4px;
}

dialog.fragment-config section[data-fragment-type] header button[data-name="add-fragment"] {
    display: none;
}

dialog.fragment-config section[data-fragment-type]:hover header button[data-name="add-fragment"] {
    display: block;
}

dialog.fragment-config section[data-fragment-type]:not(:last-of-type){
    margin-bottom: 1rem;
}

.fragment-config__dropdown-icon {
    transform: scaleY(-1);
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: var(--theme-text-hint-on-light);
    display: none;
}

.fragment-config__dropdown-icon:hover {
    color: var(--theme-text-primary-on-light);
}

[data-element="table-section"]:has(table.visually-hidden) .fragment-config__dropdown-icon {
    transform: unset;
}

[data-element="table-section"]:has(.table__body .table__row--fragment-config) .fragment-config__dropdown-icon {
    display: inline;
}
/*!*******************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/massSpec/IonConfigDialog.css ***!
  \*******************************************************************************************************/
dialog.ion-config .dialog-content {
    padding: .25rem .75rem .25rem .75rem;
    border-width: 1.25rem 0;
    border-color: var(--theme-element-background);
    border-style: solid;
    overflow: auto;
    max-height: 80vh;
}

dialog.ion-config .dialog-buttons {
    height: 2.25rem;
}

.ions-with-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
}

input.table-cell-input {
    padding: 0;
    border: none;
}

.mass-spec-ion__line {
    stroke: blue;
}

dialog.ion-config h3:first-of-type {
    margin-top: 0;
}

.mass-spec-ion__rect {
    fill: lightblue;
}

tbody tr td[data-name="int"] span {
    opacity: .2
}

tbody.qualifier-group tr td[data-name="int"] span {
    opacity: 1;
}

.ion-config__product-ion-scan td[data-name="int"] span {
    opacity: 1
}

.section__table {
    max-height: calc(80vh - 20rem);
    overflow: auto;
}

dialog.ion-config .table .table__row {
    height: 2.25rem;
}

dialog.ion-config th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--theme-element-background);
}

dialog.ion-config th:last-child, dialog.ion-config td:last-child {
    padding-left: 1rem;
    padding-right: 1rem;
}

.table__row--disabled span,
tbody.qualifier-group .table__row--disabled td[data-name="int"] span,
.table__row--disabled td[data-name="int"] span {
    opacity: 0.2;
}

.table__cell--italic {
    font-style: italic;
}

dialog.ion-config .table__cell.intensity-resolution,
dialog.ion-config .table__cell.mass-to-charge {
    width: 7rem;
}

dialog.ion-config .table__cell.intensity-resolution {
    text-align: center;
}

dialog.ion-config .table__cell.ion-name {
    min-width: 10rem;
}


/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/massSpec/MassSpecChart.css ***!
  \*****************************************************************************************************/
.section__graph {
    height: 10rem;
    width: 100%;
}

.mass-spec-graph {
    width: 100%;
    height: 100%;
}
/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/massSpec/MassSpecOverviewDialog.css ***!
  \**************************************************************************************************************/
dialog.mass-spec-overview {
    width: 36rem;
}

dialog.mass-spec-overview .dialog-content {
    padding: .25rem .75rem .25rem .75rem;
    border-width: 1.25rem 0;
    border-color: var(--theme-element-background);
    border-style: solid;
    overflow: auto;
    max-height: 80vh;
}

dialog.mass-spec-overview .mass-spec h3 {
    margin: 0;
}

dialog.mass-spec-overview .mass-spec:not(:last-child) {
    margin-bottom: 1rem;
}

dialog.mass-spec-overview .dialog-buttons {
    height: 2.25rem;
}

dialog.mass-spec-overview .mass-spec:not(:last-child) {
    margin-bottom: 1rem;
}

dialog.mass-spec-overview .mass-spec h3 {
    margin: 0;
}

td.mass-spec-row__value:not([disabled]) {
    color: var(--theme-text-primary-on-light);
    text-decoration: underline;
    cursor: pointer;
}

.mass-spec-ion__line--quantifier {
    stroke: blue;
}

.mass-spec-ion__rect--quantifier {
    fill: lightblue;
}

.mass-spec-ion__line--qualifier {
    stroke: green;
}

.mass-spec-ion__rect--qualifier {
    fill: lightgreen;
}

.mass-spec__header {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
}

/*!*****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/page-header/PageHeader.css ***!
  \*****************************************************************************************************/
.page-header {
    height: 4rem;
    top: 0;
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 4;
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    min-width: 350px;
}
.page-header--borderless {
    height: 4rem;
    border-bottom: none;
}

.page-header.scroll {
    -webkit-box-shadow: var(--page-header-box-shadow);
    box-shadow: var(--page-header-box-shadow);
}

.page-header__row {
    display: flex;
    top: 0;
    position: static;
    background-color: var(--theme-element-background);
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
}

.page-header__row a {
    text-decoration: none;
}

.page-header__title {
    color: var(--theme-text-primary-on-light);
    line-height: var(--page-header-title-line-height);
    vertical-align: super;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.0125em;
    text-decoration: inherit;
    text-transform: inherit;
    padding-left: 20px;
    padding-right: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.page-header__section {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    z-index: 1;
}

.page-header__section--align-mid {
    display: flex;
    flex-grow: 3;
    flex-shrink: 1;
    justify-content: end;
    max-width: 600px;
    min-width: 150px;
}
.page-header__section--align-mid:empty{
    display: none;
}
.page-header__section--align-end {
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: end;
    padding: 0;
}

.page-header__section--align-end i, .page-header__section--align-end > svg, .top-app-bar-nav-icon {
    cursor: pointer;
    color: black;
    opacity: .5;
    transition: 250ms;
    padding-left: 8px;
}

.header__right{
    display: flex;
}

.page-header__section--align-end i:hover, .page-header__section--align-end > svg:hover, .top-app-bar-nav-icon:hover {
    opacity: .9;
}

.page-header__section--align-end .add-visualization, .page-header__section--align-end > button {
    margin: 0 0.5rem;
}

.page-header__section--user {
    justify-content: end;
    flex: none;
    gap: 0.5rem;
    margin: 0 1rem;
}

.user-section__button-name {
    cursor: pointer;
    border: 1px solid;
    box-shadow: var(--box-shadow);
}

.user-section__button-name:hover {
    opacity: 0.7;
    box-shadow: var(--box-shadow-hover);
}
.header-buttons-section {
    display: contents;
}

.header-chips {
    padding: 0 1rem;
}

.header-chip {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 7px;
    padding-right: 7px;
    white-space: nowrap;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 16px;
    cursor: unset;
    outline: 0;
    vertical-align: middle;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid;
}
.header-chip--warning {
    border-color: #ffda47;
    background-color: #fffbeb;
    color: #8a5300;
}
.header-chip--error {
    border-color: #febdc3;
    background-color: #fff0f1;
    color: #92010e;
}

.page-header__breadcrumbs-section {
    flex-shrink: 1;
    display: flex;
    max-width: calc(100% - 40px); /* 40px - logo width */
}

.breadcrumbs {
    display: flex;
    margin-left: 1rem;
    align-items: center;
    width: 100%;
    min-width: 2rem;
}

.breadcrumbs__item {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 2 auto;
    min-width: 1.75rem;
}

.breadcrumbs__item:last-child[data-id="breadcrumbs-org"] {
    max-width: 100%;
}

.breadcrumbs__item:not(:last-child) .breadcrumbs__link {
    color: var(--theme-text-hint-on-light );
    margin-right: 1rem;
}

.breadcrumbs__item:last-child .breadcrumbs__link {
    pointer-events: none;
    color: var(--theme-text-primary-on-light);
}

.breadcrumbs__item:not(:last-child)::after {
    content: "/";
    position: absolute;
    right: 0.3rem;
    color: var(--theme-text-hint-on-light );
}

.breadcrumbs__link{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumbs__link:hover {
    text-decoration: underline;
    color: var(--theme-text-secondary-on-light);
}

.breadcrumbs__menu-icon {
    height: 1.5rem;
    cursor: pointer;
    display: inline-block;
}

.breadcrumbs__item:not(:last-child) .breadcrumbs__menu-icon {
    display: none;
}

.header-app-menu {
    .app-button {
        color: var(--theme-text-primary-on-light);
        cursor: pointer;
        display: flex;
        border: none;
        background: white;
        align-items: center;
        font-size: 1rem;
        letter-spacing: 0.05rem;
    }

    .app-menu{
        position: fixed;
        inset: unset;
        border: none;
        box-shadow: var(--box-shadow);
        padding: 0;
        margin: 0;
        top: 4rem;
        border-radius: 0.375rem;
        width: 20rem;
        overflow: hidden;
        transform: unset;
        justify-self: end;
        right: 0;
    }

    .list {
        display: flex;
        flex-direction: column;
    }

    .list-item {
        display: flex;
        flex-direction: column;
        padding: .8rem .5rem .8rem 2rem;
        gap: 0.2rem;
    }

    .list-item:hover {
        background-color: var(--theme-background-on-hover);
    }

    .links-row {
        display: flex;
        flex-direction: row;
        justify-content: start;
        gap: .8rem;
        font-size: .8rem;
    }

    .link {
        color: black;
        text-decoration: underline;
    }

    .dropdown-icon {
        font-size: 1.5rem;
        color: var(--theme-text-primary-on-light);
        background: none;
        border: none;
        padding: 0;
    }

    .dropdown-icon:hover {
        color: var(--theme-text-primary-on-light);
    }

    .item-description {
        color: var(--theme-text-hint-on-light);
        font-size: .8rem;
    }
}

.page-header__comparison-section {
    margin-left: 1rem;

    .comparison {
        display: flex;
        align-items: center;
        gap: 1rem;
        color: var(--theme-text-secondary-on-light);

    }

    .comparison-buttons {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .comparison-copy {
        font-size: 20px;
    }

    .comparison-icon{
        transition: color 0.2s ease;
    }

    .comparison-icon:hover {
        color: var(--theme-text-primary-on-light);
        cursor: pointer;
    }

    .comparison-icon:active {
        color: var(--theme-text-secondary-on-light);
        transform: scale(0.9);
    }
}

.page-header .progress-section{
    position: relative;
}

@media (max-width : 592px){
    .breadcrumbs__item:not(:last-child) .breadcrumbs__link {
        max-width: 70px;
    }
}

@media (max-width : 900px){
    .page-header__comparison-section .comparison {
       display: none;
    }
}
/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/QualifierPopup/QualifierPopup.css ***!
  \************************************************************************************************************/
.ion-descriptor-popup {
    position: fixed;
    pointer-events: none;
    background: var(--theme-element-background);
    box-shadow: var(--box-shadow);
    width: 20rem;
    padding: 0.5rem;
    font-size: 0.825rem;
    z-index: 99;
}

.ion-descriptor-popup td:first-of-type {
    padding-right: 0.5rem;
    font-weight: 400;
    width: 9.5rem;
}

.ion-descriptor-popup td:last-of-type {
    font-weight: 600;
}

#spectrum-dialog .scan-card{
    box-shadow: none;
}
/*!****************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/spectra/SpectrumGraph.css ***!
  \****************************************************************************************************/
.spectrum-graph {
    width  : 100%;
    height : 100%;
}

.spectrum-graph svg {
    position : absolute;
    overflow : visible;
}

.spectrum-graph__axes-layer {
    width  : 100%;
    height : 100%;
}

/**
sg - spectrum-graph
sg__b - spectrum-graph__bar
sg__lol-c - spectrum-graph__lollipop-circle

Because there are too many of them on the charts, we abbreviate so that HTML isn't too large
 */
.sg__b {
    fill : #757575;
}

.sg__lol-c {
    /*Half of bar width*/
    transform : translate(0.5px, 0);
}

.sg__l {
    text-anchor : start;
    font-size   : 11px;
    fill        : #0000cd;
    transform   : matrix(1, 0, 0, -1, 0, 0) rotate(-90deg);
}
/*!**********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/spinner/Spinner.css ***!
  \**********************************************************************************************/
.spinner {
    width            : 100%;
    height           : 100%;
    position         : absolute;
    background-color : rgba(255, 255, 255, 0.6);
    top              : 0;
    left             : 0;
    display          : flex;
    align-items      : center;
    justify-content  : center;
}

.spinner svg {
    -webkit-animation : rotation 1.35s linear infinite;
    animation         : rotation 1.35s linear infinite;
    position          : relative;
    stroke            : #9c27b0;
    display           : flex;
}


.spinner svg circle {
    stroke-dasharray         : 180;
    stroke-dashoffset        : 0;
    -webkit-transform-origin : center;
    transform-origin         : center;
    -webkit-animation        : turn 1.35s ease-in-out infinite;
    animation                : turn 1.35s ease-in-out infinite;
}

@keyframes rotation {
    0% {
        transform : rotate(0deg);
    }
    100% {
        transform : rotate(270deg);
    }
}

@keyframes turn {
    0% {
        stroke-dashoffset : 180;
    }
    50% {
        stroke-dashoffset : 45;
        transform         : rotate(135deg);
    }
    100% {
        stroke-dashoffset : 180;
        transform         : rotate(450deg);
    }
}

/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/substance-picker/substance-picker.css ***!
  \****************************************************************************************************************/
.substance-picker__label {
    cursor: pointer;
}
/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/SubstanceDialog/SubstanceDialog.css ***!
  \**************************************************************************************************************/
.substance-dialog {
    width: 576px;
    outline: none;
}

.substance-dialog .dialog-content {
    display: flex;
    padding: 1rem 1rem 1.5rem 1rem;
    justify-content: space-between;
}

.substance-dialog .dialog-content-col {
    display: flex;
    height: 222px;
    flex-direction: column;
    justify-content: space-between;
}

.substance-dialog .col-1 {
    width: 196px;
}

.substance-dialog #alias, .substance-dialog #mfOrEmw {
    display: block;
    height: 4rem;
}

#substance-dialog-color:not([disabled]) {
    display: block;
    position: relative;
    cursor: pointer;
    margin-top: 36px;
}

#substance-dialog-color span {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.64);
}

#substance-dialog-color .color-preview-rect {
    width: 36px;
    height: 18px;
    display: inline-block;
    margin-left: 8px;
    box-shadow: 0 0 2px -1px rgb(0 0 0 / 14%), 0 2px 4px 0 rgb(0 0 0 / 14%), 0 1px 8px 0 rgb(0 0 0 / 14%);
    vertical-align: sub;
}

#substance-dialog-color color-palette {
    position: absolute;
    top: -122px;
    right: -140px;
    z-index: 1;
}

.substance-dialog .col-2 {
    width: 296px;
}

.drop-structure__message {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*!**************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/SubstanceDialog/UploadStructure.css ***!
  \**************************************************************************************************************/
upload-structure-component {
    --border: 1px dashed #afafaf;
    width: 100%;
    height: 100%;
}

.upload-structure-component__body {
    width: 100%;
    height: 100%;
    border: var(--border);
    border-radius: var(--border-radius);
    position: relative;
}

.structure-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.structure-container svg {
    width: 100%;
    height: 100%;
}

.structure-container__hint {
    margin-bottom: -1rem;
}

.structure-container__hint * {
    font-size: .5625rem !important;
}


.upload-structure-component__body span {
    font-size: 1rem;
    color: var(--theme-text-secondary-on-light);
}

.upload-structure-component__body label {
    cursor: pointer;
    color: var(--theme-primary);
}

.drop-structure {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.structure-container .icon--zoom-in {
    position: absolute;
    top: .375rem;
    right: .375rem;
    cursor: pointer;
}

.structure-container .icon--zoom-in {
    transition: color 250ms;
    color: var(--theme-text-hint-on-light);
}

.structure-container .icon--zoom-in:hover {
    color: var(--theme-text-primary-on-light);
}

/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/TeamMemberList/TeamMemberList.css ***!
  \************************************************************************************************************/
.container[data-name="members"] {
    min-width: 21rem;
    border: none;
    border-radius: 0;
}

.container[data-name="members"] .container__body {
    padding: 1rem 0;
}

.container[data-name="members"] .table__cell:nth-of-type(1) {
    padding-left: 1.5rem;
}

.member-table {
    table-layout: fixed
}

.table__cell--admin-action {
    width: 4rem;
}

.member-table__admin-icon {
    margin-right: 0.5rem;
}

.member-table__delete-action{
    visibility: hidden;
}

.table__row-admin:hover .member-table__delete-action {
    visibility: visible;
    cursor: pointer;
}

.member-table__undo-link {
    color: var(--theme-primary);
    text-decoration: underline;
    cursor: pointer;
}

.member-table__deleted-info {
    display: none;
}

.table__row-admin--deleted .member-table__undo-action-block {
    color: var(--theme-text-secondary-on-light);
    font-style: italic;
    text-align: end;
    padding-right: 1rem;
}

.table__row-admin--deleted .table__cell--admin-name {
    opacity: 0.4;
}

.member-table .table__cell--admin-action {
    width: 7rem;
    margin-right: 1rem;
}

.member-table .action-icons {
    justify-content: end;
}

.member-table__admin-full-name {
    padding-right: 0.75rem;
}

.member-table__admin-full-name:empty {
    display: none;
}

.member-table__admin-username {
    font-size: 0.9rem;
}

.table__cell--admin-name {
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.table__no-member-row {
    padding: 1rem;
}

/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/toggle-zoom-btn/ToggleZoomBtn.css ***!
  \************************************************************************************************************/
.toggle-zoom-icon {
    font-size   : 20px;
    color       : var(--theme-text-hint-on-light);
    cursor      : pointer;
    transition  : color 250ms;
    user-select : none;
}

.toggle-zoom-icon:hover {
    color  : var(--theme-text-primary-on-light);
}

/*!**********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/TourTip/TourTip.css ***!
  \**********************************************************************************************/
.tour-tip {
    /*--tour-tip__main-color: rgb(51, 51, 51);*/
    --tour-tip__main-color: rgb(102, 124, 255);
    --tour-tip__text-color: white;
    position: relative;
    display: inline-block;
    font-size: 1rem;
}

.tour-tip__content {
    width: max-content;
    background-color: var(--tour-tip__main-color);
    color: var(--tour-tip__text-color);
    text-align: center;
    border-radius: 6px;
    padding: 0.75rem;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tour-tip__content::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}

.tour-tip__arrow-bottom {
    bottom: 150%;
    left: 50%;
    transform: translateX(-77%);
}

.tour-tip__arrow-bottom:after {
    top: 100%;
    left: 85%;
    border-color: var(--tour-tip__main-color) transparent transparent transparent;
}

.tour-tip__arrow-top{
    top: 100%;
    left: 50%;
    transform: translateX(-77%) translateY(25%);
}

.tour-tip__arrow-top:after {
    bottom: 100%;
    left: 75%;
    border-color: transparent transparent var(--tour-tip__main-color) transparent;
}

.tour-tip__arrow-right {
    top: -5px;
    right: 110%;
    transform: translateY(25%);
}

.tour-tip__arrow-right:after {
    top: 25%;
    left: 100%;
    border-color: transparent transparent transparent var(--tour-tip__main-color);
}

.tour-tip__arrow-left {
    left: 5px;
    transform: translateY(-25%);
}

.tour-tip__arrow-left:after {
    top: 25%;
    right: 100%;
    border-color: transparent var(--tour-tip__main-color) transparent transparent;
}

.tour-tip .tour-tip__content {
    visibility: visible;
}

.tour-tip__row {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: start;
}

.tour-tip__footer{
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.tour-tip__text{
    max-width: 200px;
    text-align: start;
}

.tour-tip__reject {
    font-size: 0.75rem;
    cursor: pointer;
}

.tour-tip .tour-tip__icon {
    font-size: 1rem;
    cursor: pointer;
    color: var(--tour-tip__text-color) !important;
    scale: 1 !important;
}
/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/UpdateAccessDialog/UpdateAccessDialog.css ***!
  \********************************************************************************************************************/
.update-access-dialog {
    width: 50rem;
    overflow: unset;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.update-access-dialog__content{
    padding-right: 1rem;
    flex: 1 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.update-access-dialog__buttons{
    flex: 0 0;
}

.update-access-dialog__find-block{
    flex: 0 0;
    height: 4rem;
    margin-bottom: 1rem;
}

.update-access-dialog__permissions-block{
    overflow: auto;
    padding: 1rem 0;
}

.update-access-dialog__row {
    display: flex;
    min-height: 4rem;
    justify-content: space-between;
    align-items: center;
}

.update-access-dialog__name-block {
    min-height: 4rem;
    flex: 3;
    margin-right: 2rem;
}

.update-access-dialog__access {
    flex: 2;
    margin-right: 1rem;
    max-width: 14rem;
}

.update-access-dialog__button {
    width: 4.5rem;
    text-align: center;
    height: 4rem;
}

.update-access-dialog__grant-btn {
    height: 2.25rem;
    width: 4.5rem;
}

.update-access-dialog__subject-name {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.update-access-dialog__delete-btn {
    cursor: pointer;
    color: var(--theme-text-hint-on-light);
    display: none;
    height: 1.5rem;
    width: 1.5rem;
    margin: 1.25rem 0;
}

.update-access-dialog__permission-row:hover .update-access-dialog__delete-btn {
    display: inline-block;
}

.update-access-dialog__delete-btn:hover {
    color: var(--theme-text-primary-on-light);
}

.update-access-dialog__icon {
    margin-right: 1rem;
    flex-shrink: 0;
}

.update-access-dialog__team-icon {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--icon-team);
    border-radius: 50%;
    color: var(--icon-team);
    text-align: center;
}

.update-access-dialog__team-icon span{
    /* We don't use line-height equal to icon height, because icon is not symmetrical
       and looks better if we move it up a little */
    line-height: 1.8rem;
}

.update-access-dialog__user-full-name{
    padding-right: 0.75rem;
}

.update-access-dialog__user-full-name:empty {
    display: none;
}

.update-access-dialog__username {
    font-size: 0.9rem;
}

.update-access-dialog__dropdown-item {
    list-style: none;
    padding: 0.5rem;
    border-radius: 0.25rem;
    display: flex;
}

.update-access-dialog__dropdown-item:hover {
    background: var(--list-background-on-hover-color);
    cursor: pointer;
}

.update-access-dialog__dropdown-username {
    font-weight: bold;
}

.update-access-dialog__item-description {
    font-size: 0.75rem;
    opacity: 0.8;
}

.update-access-dialog__save-button .update-access-dialog__save-button-text--save-and-grant {
    display: none;
}

.update-access-dialog__save-button[grant-and-save] .update-access-dialog__save-button-text--save-and-grant {
    display: inline;
}

.update-access-dialog__save-button[grant-and-save] .update-access-dialog__save-button-text--save {
    display: none;
}
/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/UploadInjectionDialog/UploadInjectionDialog.css ***!
  \**************************************************************************************************************************/
.upload-injection-dialog {
    width: 70vw;
    min-width: 30rem;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.upload-injection-dialog .dialog-buttons-row {
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}

.upload-injection-dialog .progress {
    display: block !important;
    position: relative;
    margin-top: 1rem;
}

.upload-injection-dialog .dialog-content {
    overflow: auto;
    margin-bottom: 1rem;
}

.upload-injection-dialog .dialog-row:nth-child(1) {
    height: 2.25rem;
}

.upload-injection-dialog .dialog-row:nth-child(2) {
    max-height: 50vh;
    height: 100%;
    overflow: auto;
    padding: 0.5rem 0 0.5rem 0.5rem;
}

.upload-injection-dialog .dialog-row:nth-child(3) {
    height: 1rem;
}

.upload-injection-dialog li span:nth-child(2) {
    padding-left: 1rem;
    white-space: nowrap;
}

.upload-error-message-modal {
    width: 70vw;
    padding: 0;
}

.upload-error-message-modal .dialog-content {
    height: auto;
    max-height: 70vh;
    overflow: auto;
    width: 100%;
    word-wrap: break-word;
}

.upload-injection-dialog__error-list {
    padding-bottom: 1rem;
}

.upload-injection-dialog__error-list li{
    list-style: inside;
}

.upload-injection-dialog__list-item {
    white-space: nowrap;
    padding-bottom: 0.5rem;
}

.upload-injection-dialog__list-item-icon {
    padding-right: 1rem;
}

.upload-injection-dialog__error-prompt {
    padding: .5rem 1rem;
    margin-top: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
/*!************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/UserMenu/UserMenu.css ***!
  \************************************************************************************************/
.user-menu {
    padding: 0;
    margin: 0;
    top: 4rem;
    left: auto;
    border-radius: 0.375rem;
    width: 18rem;
    overflow: hidden;
}

.user-menu__menu-wrapper {
    padding: 0.75rem;
    display: grid;
    margin: 0;
    background-color: var(--theme-element-background);
    grid-template-columns: 1fr;
    top: 1rem;
}

.user-menu__header {
    display: flex;
    align-items: center;
    height: 2.625rem;
    overflow: hidden;
}

.user-menu__name {
    max-height: 2.2rem;
    line-height: 1.1;
    overflow: hidden;
    color: var(--theme-text-primary-on-light);
}

.user-menu__initials-icon {
    flex: 0 0 2rem;
    margin-right: .5rem;
}

.user-menu__menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    min-height: 2.625rem;
    cursor: pointer;
    color: var(--theme-text-primary-on-light);
}

.user-menu__menu-item:hover:not([disabled]) {
    background-color: var(--list-background-on-hover-color);
}

.user-menu__menu-item[disabled]{
    cursor: default;
    color: var(--theme-text-hint-on-light);
}

.user-menu::backdrop{
    background-color: rgba(0, 0, 0, 0.05);
}

.user-menu__separator {
    display: none;
}

.user-menu__separator:has(+ li:not(.user-menu__separator)) {
    display: block;
    height: 1px;
    width: 100%;
    background: var(--border-color);
    margin: 0.75rem 0;
}

.user-menu__arrow-icon {
    margin-left: 1rem;
}

.user-menu__side-menu {
    padding: 0.75rem;
    margin: 0;
    top: 9rem;
    left: auto;
    right: 18rem;
    max-height: 24rem;
    min-width: 12rem;
}

.user-menu__side-menu::backdrop{
    background-color: transparent;
}

.user-menu__menu-item--link {
    padding: 0;
}

.user-menu__menu-item--org{
    margin-left: 1.5rem;
}

.user-menu__link, .user-menu__link:visited {
    height: 100%;
    width: 100%;
    padding: 0.5rem;
    color: var(--theme-text-primary-on-light);
    line-height: 1.625rem;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.user-menu__section-title {
    list-style: none;
    padding: 0.5rem;
    font-size: 1rem;
    color: var(--theme-text-hint-on-light);
    user-select: none;
}

.user-menu__menu-item-title {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
}

.user-menu__menu-item-icon{
    font-size: 1rem;
}
/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/UserTeamListDialog/UserTeamListDialog.css ***!
  \********************************************************************************************************************/
.user-team-list-dialog {
    width: 35rem;
}

.user-team-list-dialog__content {
    padding-bottom: 1rem;
}

.user-team-list-dialog__user-name{
    margin-bottom: 1rem;
    overflow: hidden;
}

.user-team-list-dialog__team-row {
    display: flex;
    padding: 0.5rem 0;
}

.user-team-list-dialog__checkbox {
    width: 1rem;
    margin-right: 1rem;
}

.user-team-list-dialog__checkbox:focus-within {
    outline: 1px solid var(--theme-text-hint-on-light);
}

.user-team-list-dialog__prompt-block {
    height: 1.5rem;
    margin-top: 1rem;
    color: var(--theme-error);
}
/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/zoom-range-picker/ZoomRangePicker.css ***!
  \****************************************************************************************************************/
#zoom-range-picker ul {
    list-style-type : none;
    margin          : 0;
    padding         : 0;
    max-height      : 300px;
}

#zoom-range-picker li {
    cursor : pointer;
}

/*!*********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/components/zoom-selector/ZoomSelector.css ***!
  \*********************************************************************************************************/
.zoom-selector-rect {
    fill             : #2082d820;
    stroke           : #2082d880;
    stroke-dasharray : 4 4;
}

.chromatogram-graph__zoom-layer, .zoom-selector {
    cursor : url(/ui/img/cursor-zoom.svg), crosshair;
}
/*!*****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/batch/BatchPage.css ***!
  \*****************************************************************************************/
.batch-page {
    padding-top: 4rem;
    flex: 1 1 auto;
    padding-bottom: 4rem;
}

.batch-page .plates {
    margin: 0 4px;
}

/*!*****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/error/ErrorPage.css ***!
  \*****************************************************************************************/
#error-page {
    flex: 1;
    padding-top: 4rem;
}
/*!***************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/home/HomePage.css ***!
  \***************************************************************************************/
.home-page {
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 350px;
    padding: 4rem 0;
    background: white;
}

.home-page__container {
    padding: 1rem;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 2rem;
}

.home-page__main-column {
    display: flex;
    min-height: 50vh;
    justify-content: center;
    flex: 1 1 70%;
    padding: 0 0.75rem;
    overflow: hidden;
    width: 100%;
}

.home-page__main-column-body {
    max-width: 75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
    width: 100%;
}

.home-page__intro-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 75rem;
}

.home-page__title {
    text-align: center;
    font-weight: normal;
    font-size: 56px;
    color: #4b4949;
    margin-top: 10rem;
    margin-bottom: 1rem;
}

.home-page__subtitle {
    text-align: center;
    font-size: 1.25rem;
    font-weight: normal;
    letter-spacing: 0.1rem;
}

.realistic-marker-highlight{
    position:relative;
}

.highlight-container, .highlight {
    position: relative;
}

.highlight-container  {
    display: inline-block;
}

.highlight-container:before{
    content: " ";
    display: block;
    height: 90%;
    width: 100%;
    margin-left: -3px;
    margin-right: -3px;
    position: absolute;
    transform: rotate(2deg);
    top: 3px;
    left: -1px;
    border-radius: 20% 25% 20% 24%;
    padding: 10px 3px 3px 10px;
}

.highlight-container--yellow::before {
    background: #ffd500;
}

.highlight-container--green::before {
    background: #99f6a7;
}

.highlight-container--magenta::before {
    background-color:#ff6db7;
}

.home-page__action-cards {
    display: flex;
    flex-wrap: wrap;
    max-width: 75rem;
    width: 100%;
    gap: 2rem;
}

.home-page__card {
    padding: 1rem 0;
}

.home-page__card--action {
    flex: 1 1 45%;
    min-width: 18rem;
}

.home-page__card--news {
    width: 100%;
    max-width: 75rem;
}

.home-page__card-body, .news-item__body {
    padding: 2rem 1rem;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color );
}

.home-page__card-button{
    margin-bottom: 1rem;
    font-weight: bold;
    border-radius: 3rem;
    width: 15rem;
    height: 3rem;
    font-size: 1rem;
    background: white;
    color: var(--theme-primary);
    white-space: nowrap;
}

.home-page__card-description {
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.home-page__card-title, .news-item__title {
    font-size: 1.75rem;
    color: #4b4949;
    text-align: center;
}

.home-page__news-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.news-item__body {
    padding: 1rem;
    align-items: start;
    max-width: 75rem;
    background: var(--list-background-secondary-color);
}

.news-item {
    padding: 1rem 0;
}

.news-item__title {
    font-size: 1.75rem;
    color: #4b4949;
    margin-bottom: 0.83rem;
    font-weight: bold;
    text-align: start;
}

.news-item__ul {
    list-style: unset;
    padding-left: 2rem;
}

.home-page__your-menu-section {
    padding: 1rem;
    border-right: 1px solid var(--border-color);
    min-height: 100%;
    flex: 1 1 20%;
    overflow: hidden;
    max-width: 25rem;
    min-width: 13rem;
}

.home-page__your-menu-title {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    padding-bottom: 0.75rem;
    color: #4b4949;
    font-weight: bold;
}

.home-page__org-block-title-icon {
    font-size: 1.25rem;
    line-height: 1.25rem;
    padding: 0.25rem;
    color: var(--theme-text-hint-on-light);
    margin-left: 0.25rem;
}

.home-page__org-block-title-icon:hover {
    cursor: pointer;
    color: var(--theme-text-primary-on-light);
}

.home-page__org-row {
    display: flex;
    align-items: center;
    height: 3rem;
}

.home-page__org-name {
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    color: var(--theme-primary);
    text-decoration: underline;
}

.home-page__org-link {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0.5rem;
    gap: 1rem;
    text-decoration: none;
}

.home-page__org-link:hover {
    background-color: var(--list-background-on-hover-color);
}

.hero {
    max-width: 50rem;
    width: 100%;
}

@media (max-width: 850px){
    .home-page__your-menu-section {
        border: none;
        flex: 1 1 100%;
    }
}
/*!*************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/home/Slider.css ***!
  \*************************************************************************************/
.slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.slides {
    width: 400%;
    height: 100%;
    display: flex;
}

.slides__item {
    width: 25%;
    transition: all 0.6s ease;
    background: white;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.slides__image {
    max-width: 100%;
    max-height: 78%;
    aspect-ratio: auto;
    display: block;
    margin: 0 auto;

    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

/*!**********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/org-settings/BillingSummary/CreateOrUpdateCustomerDialog.css ***!
  \**********************************************************************************************************************************/
.billing-customer-dialog {
    min-width: 30rem;
}

/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/org-settings/OrgMembersList/OrgMembersList.css ***!
  \********************************************************************************************************************/
.container[data-name="org-members-list"] {
    min-width: 21rem;
    border: none;
    border-radius: 0;
}

.container[data-name="org-members-list"] .container__body {
    padding: 1rem 0;
}

.container[data-name="org-members-list"] .table__cell:nth-of-type(1) {
    padding-left: 1.5rem;
}

.org-members-list-table{
    table-layout: fixed;
}

.org-members-list__user-icon {
    margin-right: 0.5rem;
}

.org-members-list__user-full-name {
    padding-right: 0.75rem;
}

.org-members-list__user-full-name:empty {
    display: none;
}

.org-members-list__username {
    font-size: 0.9rem;
}

.table__cell--org-members-list-action {
    width: 4rem;
}

.table__cell--org-members-list-teams-list {
    padding-left: 0.5rem;
}

.org-members-list__teams-list-link{
    color: var(--theme-primary);
    text-decoration: underline;
    cursor: pointer;
}

.org-members-list__delete-action {
    display: none;
}

.table__row-member:hover .org-members-list__delete-action{
    display: inline-block;
}
/*!**********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/org-settings/TeamsList/TeamsList.css ***!
  \**********************************************************************************************************/
.container[data-name="teams-list"] {
    min-width: 21rem;
    border: none;
    border-radius: 0;
}

.container[data-name="teams-list"] .container__body {
    padding: 1rem 0;
}

.container[data-name="teams-list"] .table__cell:nth-of-type(1) {
    padding-left: 1.5rem;
}

.table__cell--team-name {
    padding: 0.5rem 1rem 0.5rem 1.5rem;
}

.table__row-team {
    cursor: pointer;
}

.table__team-description {
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.table__team-name-link, .table__team-name-link:hover  {
    color: var(--theme-text-primary-on-light);
    text-decoration: none;
    font-weight: bold;
}
/*!************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/post-edit/EditPostPage.css ***!
  \************************************************************************************************/
.edit-post-page {
    --edit-page-padding-top: 4rem;
    --edit-post-header-height: 3.75rem;
    --edit-post-buttons-height: 4rem;
    --edit-post-body-height: calc(100vh - var(--edit-page-padding-top) - var(--edit-post-header-height) -
                            var(--edit-post-buttons-height) - 2rem /*padding*/);
    width: 100%;
    flex: 1 0 auto;
    padding: var(--edit-page-padding-top) 0 0;
    max-width: 1300px;
    margin: 0 auto;
}

.edit-post-page__container {
    padding: 1rem;
    display: flex;
    width: 100%;
    flex-direction: column;
}

.edit-post__title-block {
    display: flex;
    gap: 2rem;
    align-items: baseline;
}

.edit-post__title-input {
    flex: 1;
}

.edit-post__body-block {
    flex: 1 0 auto;
    border: 1px solid gray;
    padding: 1rem;
}

.edit-post__body {
    display: none;
}

.edit-post__body[active] {
    display: unset;
    font-size: 1rem;
}

.edit-post__header {
    height: var(--edit-post-header-height);
}

.edit-post__buttons-block {
    height: var(--edit-post-buttons-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.edit-post__buttons-left-block{
    display: flex;
    gap: 1rem;
}

.edit-post__button {
    color: var(--theme-primary);
}

.edit-post__button[active] {
    border-radius: unset;
    border-bottom: 3px solid var(--theme-primary);
}

.edit-post__button--right {
    float: right;
}

.edit-post__body-input {
    resize: none;
    border: none;
    outline: none;
    height: calc(var(--edit-post-body-height) - 2.2rem);
    width: 100%;
}

.edit-post__body-preview[active] {
    display: block;
    min-height: calc(var(--edit-post-body-height) - 2rem);
    overflow-x: auto;
    padding: 0 1rem;
}

.edit-post__body-example[active] {
    display: flex;
    gap: 1rem;
}

.edit-post__body-example-column {
    width: 50%;
    max-width: 50%;
    overflow-x: auto;
}

.edit-post__body-example-column:last-of-type{
    padding-left: 1rem;
    border-left: 1px solid var(--theme-text-hint-on-light);
}

.edit-post__example-row{
    color: var(--theme-text-hint-on-light);
    display: flex;
    justify-content: space-between;
    height: 1.5rem;
}

.edit-post__example-copy-icon {
    font-size: 1.25rem;
    cursor: pointer;
}

.edit-post__example-copy-icon:hover {
    color: var(--theme-text-primary-on-light);
}

.edit-page__doc-link, .edit-page__doc-link:visited {
    padding-left: 1rem;
    color: var(--theme-primary);
    font-weight: 200;
    font-size: 0.9rem;
}
/*!************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/post-list/PostListPage.css ***!
  \************************************************************************************************/
.post-list__create-post-link{
    text-decoration: none;
}
/*!***************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/post/PostPage.css ***!
  \***************************************************************************************/
.post-page {
    width: 100%;
    flex: 1 1 auto;
    padding: 4rem 0;
}

.post-page__container {
    padding: 1rem 2rem;
    display: flex;
    width: 100%;
    flex-direction: column;
}

.post {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.post__header {
    margin: 2rem 0 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.post__title {
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 1rem;
}

.post__data {
    color: var(--theme-text-hint-on-light);
    font-style: italic;
}

.post__buttons-block {
    display: flex;
    gap: 1rem;
}
/*!********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/settings/AliasTable/AliasTable.css ***!
  \********************************************************************************************************/
.container[data-name="aliases"] {
    border        : none;
    border-radius : 0;
}

.container[data-name="aliases"] .container__body {
    padding : 1rem 0;
}

.container[data-name="aliases"] .table {
    table-layout                 : fixed;
    --sidenav-width              : 9.375rem;
    --scroll-bar-width           : 26px;
    --table-width                : calc(100vw - var(--sidenav-width) - var(--scroll-bar-width));
    --table-col-1-width          : 7.5rem;
    --table-col-3-width          : 3.975rem;
    --fixed-columns-total-width  : calc(var(--table-col-1-width) + var(--table-col-3-width));
    --middle-columns-total-width : calc(var(--table-width) - var(--fixed-columns-total-width));
    --table-col-2-width          : calc(var(--middle-columns-total-width));
}

.container[data-name="aliases"] .table__cell {
    padding-left  : 0.5rem;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.container[data-name="aliases"] .table .table__cell:nth-of-type(1) {
    padding-left : 4.9rem;
    width        : var(--table-col-1-width);
}

.container[data-name="aliases"] .table .table__cell:nth-of-type(2) {
    width : var(--table-col-2-width);
}

.container[data-name="aliases"] .table .table__cell:nth-of-type(3) {
    width : var(--table-col-3-width);
}


.container[data-name="aliases"] .table .table__body .table__cell:nth-of-type(3) .material-symbols-outlined {
    padding-right : 1rem;
}

.container[data-name="aliases"] .table__cell--head {
    font-size   : 0.875rem;
    font-weight : 500;
}

.container[data-name="aliases"] span[data-name="color-box"] {
    display        : inline-block;
    width          : 1rem;
    height         : 1rem;
    border-radius  : 0.25rem;
    vertical-align : middle;
    margin-right   : 0.5rem;
}

/*!*************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/settings/CrawlerTable/CrawlerDialog.css ***!
  \*************************************************************************************************************/
/*to be moved out into a separate file or removed if we don't need to customize it*/
.crawler-info-dialog {
    width: 450px;
    height: 200px;
}

#crawler-dialog {
    width      : 450px;
    transition : height 250ms;
}

.change-passwd-button {
    height: 2.75em;
    align-self: center;
}

#safari-prevent-autocomplete {
    position : absolute;
    height   : 0;
    overflow : hidden;
}

/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/settings/CrawlerTable/CrawlerTable.css ***!
  \************************************************************************************************************/
.container[data-name="crawlers"] {
    border        : none;
    border-radius : 0;
}

.container[data-name="crawlers"] .container__body {
    padding : 1rem 0;
}

.container[data-name="crawlers"] .table {
    table-layout                 : fixed;
    --sidenav-width              : 9.375rem;
    --scroll-bar-width           : 26px;
    --table-width                : calc(100vw - var(--sidenav-width) - var(--scroll-bar-width));
    --table-col-1-width          : 4.5rem;
    --table-col-5-width          : 3.975rem;
    --fixed-columns-total-width  : calc(var(--table-col-1-width) + var(--table-col-5-width));
    --middle-columns-total-width : calc(var(--table-width) - var(--fixed-columns-total-width));
    --table-col-2-width          : calc(var(--middle-columns-total-width) * 0.5);
    --table-col-3-width          : calc(var(--middle-columns-total-width) * 0.3);
    --table-col-4-width          : calc(var(--middle-columns-total-width) * 0.2);
}

.container[data-name="crawlers"] .table__cell:not([data-name="status-cell"]) {
    padding-left  : 0.5rem;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.container[data-name="crawlers"] .table__cell[data-name="status-cell"] {
    padding-left  : 0.5rem;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.container[data-name="crawlers"] .table__cell[data-name="status-cell"] span:nth-of-type(2){
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    width: calc(var(--table-col-4-width) - 2rem);
    margin-left: 0.5rem;
}

.crawler-status__text {
    margin-left : 0.125rem;
}

.container[data-name="crawlers"] .table .table__cell:nth-of-type(1) {
    padding-left : 1.5rem;
    width        : var(--table-col-1-width);
}

.container[data-name="crawlers"] .table .table__cell:nth-of-type(2) {
    width : var(--table-col-2-width);
}

.container[data-name="crawlers"] .table .table__cell:nth-of-type(3) {
    width : var(--table-col-3-width);
}

.container[data-name="crawlers"] .table .table__cell:nth-of-type(4) {
    width : var(--table-col-4-width);
}

.container[data-name="crawlers"] .table .table__cell:nth-of-type(5) {
    width : var(--table-col-5-width);
}

.container[data-name="crawlers"] .table .table__body .table__cell:nth-of-type(4) span {
    font-size      : 1rem;
    line-height    : 1.5rem;
    vertical-align : middle;
    display        : inline-block;
}

.container[data-name="crawlers"] .table .table__body .table__cell:nth-of-type(5) .material-symbols-outlined {
    padding-right : 1rem;
}

.container[data-name="crawlers"] .table__cell--head {
    font-size   : 0.875rem;
    font-weight : 500;
}

.container[data-name="crawlers"] .table__cell .switch {
    font-size : 0.875rem;
}

.container__header--crawler{
    display: none;
}

.org-settings-page__crawler-table .container__header--crawler {
    display: flex;
}

.status-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

.status-gray { background-color: #b0b0b0; }   /* Idle / Disabled */
.status-blue { background-color: #2196f3; }   /* Discovering / Importing */
.status-red { background-color: #f44336; }    /* Error */

.dot-anim::after {
    content: '';
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: dots 2s steps(2, end) infinite;
}

@keyframes dots {
    33%   { content: '.'; }
    66%  { content: '..'; }
    100%  { content: '...'; }
}
/*!***********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/settings/ProcessingMethodTable/IntegrationAlgorithmDialog.css ***!
  \***********************************************************************************************************************************/
.integration-algorithm-dialog {
    max-width : 90vw;
    width     : 31.25rem;
}
/*!*******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/settings/ProcessingMethodTable/ProcessingMethodDialog.css ***!
  \*******************************************************************************************************************************/
.processing-methods-dialog .accordion__item-header-title--detector-family-w-alignment edit-text {
    max-width : 5rem;
    overflow: hidden;
    margin: 0 0.2rem;
}

.accordion__item-header-title--detector-family-name {
    letter-spacing : 0.125rem;
}

.processing-methods-dialog .accordion__item-header-title--detector-family-w-alignment span:nth-child(2) {
    font-size    : 0.8125rem;
    padding-left : 0.25rem;
    display: inline-flex;
}

.processing-methods-dialog .accordion {
    margin-bottom : 1.5rem;
}

.processing-methods-dialog .accordion .accordion__item:last-of-type .list {
    border-bottom-right-radius : var(--border-radius);
    border-bottom-left-radius  : var(--border-radius);
}

.processing-methods-dialog .accordion .list {
    background : var(--list-background-secondary-color);
}
/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/settings/ProcessingMethodTable/ProcessingMethodTable.css ***!
  \******************************************************************************************************************************/
.container[data-name="processing-methods"] {
    min-width     : 21rem;
    border        : none;
    border-radius : 0;
}

.container[data-name="processing-methods"] .container__body {
    padding : 1rem 0;
}

.container[data-name="processing-methods"] .table {
    table-layout                 : fixed;
    --table-col-1-width          : 4.5rem;
    --table-col-4-width          : 5.75rem;
    --middle-columns-total-width : calc(100vw - var(--table-col-1-width) - var(--table-col-4-width) - 9.375rem/*sidenav*/ - 26px /*scrollbar*/);
    --table-col-2-width          : calc(var(--middle-columns-total-width) * 0.65);
    --table-col-3-width          : calc(var(--middle-columns-total-width) * 0.35);
}

.container[data-name="processing-methods"] .table__cell {
    padding-left  : 0.5rem;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.container[data-name="processing-methods"] .table .table__cell:nth-of-type(1) {
    padding-left : 1.5rem;
    width        : var(--table-col-1-width);
}

.container[data-name="processing-methods"] .table .table__cell:nth-of-type(2) {
    width : var(--table-col-2-width);
}

.container[data-name="processing-methods"] .table .table__cell:nth-of-type(3) {
    width : var(--table-col-3-width);
}

.container[data-name="processing-methods"] .table .table__cell:nth-of-type(4) {
    width         : var(--table-col-4-width);
    padding-right : 1rem;
}

.container[data-name="processing-methods"] .table__cell--head {
    font-size   : 0.875rem;
    font-weight : 500;
}

.container[data-name="processing-methods"] .table__cell .switch {
    font-size : 0.875rem;
}
/*!***********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/settings/SettingsPage.css ***!
  \***********************************************************************************************/
settings-page {
    flex: 1 1 auto;
    display: flex;
    background: white;
}

.page__content {
    overflow: hidden;
    flex: 1 1 auto;
}

.page__main {
    flex: 1 1 auto;
}

settings-page .page__main--with-sidenav {
    flex: 1 1 auto;
    padding: 4rem 0;
    display: flex;
    width: 100%;
}
/*!**************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/main/ui/pages/settings/SideNav/SideNav.css ***!
  \**************************************************************************************************/
.page__sidenav--left {
    flex-shrink      : 0;
    width            : 10rem;
    background-color : var(--theme-element-background);
    border-right     : 1px #eee solid;
    display          : flex;
    flex-direction   : column;
    padding-top      : 1rem;
}

.sidenav__link {
    display         : flex;
    align-items     : center;
    font-size       : 0.9375rem;
    line-height     : 3.25rem;
    padding         : 0 1rem;
    color           : var(--theme-text-primary-on-light);
    text-decoration : none;
    cursor          : pointer;
}

.sidenav__link:hover {
    background-color : rgba(48, 48, 48, 0.06);
}

.sidenav__link--active {
    box-shadow       : inset 4px 0 0 var(--theme-primary);
    color            : var(--theme-primary);
    background-color : #f9f9f9;
}

/*# sourceMappingURL=bundle.441e5c5e.css.map*/