#qr--bar {
	outline: none;
	margin: 0;
    transition: 0.3s;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    order: 1;
	padding-right: 2.5em;
    position: relative;
	> #qr--popoutTrigger {
		position: absolute;
		right: 0.25em;
		top: 0;
	}
}
#qr--popout {
	display: flex;
	flex-direction: column;
	padding: 0;
	z-index: 31;
	> .qr--header {
		flex: 0 0 auto;
		height: 2em;
		position: relative;
		> .qr--controls {
			> .qr--close {
				height: 15px;
				aspect-ratio: 1 / 1;
				font-size: 20px;
				opacity: 0.5;
				transition: all 250ms;
			}
		}
	}
	> .qr--body {
		overflow-y: auto;
	}
}
#qr--bar, #qr--popout > .qr--body {
	> .qr--buttons {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 5px;
		width: 100%;

		> .qr--buttons {
			display: contents;
		}

		.qr--button {
			color: var(--SmartThemeBodyColor);
			// background-color: var(--black50a);
			border: 1px solid var(--SmartThemeBorderColor);
			border-radius: 10px;
			padding: 3px 5px;
			margin: 3px 0;
			cursor: pointer;
			transition: 0.3s;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			&:hover {
				opacity: 1;
				filter: brightness(1.2);
			}
			> .qr--button-expander {
				display: none;
			}
			&.qr--hasCtx {
				> .qr--button-expander {
					display: block;
				}
			}
		}
	}
}

.qr--button-expander {
	border-left: 1px solid;
	margin-left: 1em;
	text-align: center;
	width: 2em;
	&:hover {
		font-weight: bold;
	}
}

.ctx-blocker {
    /* backdrop-filter: blur(1px); */
    /* background-color: rgba(0 0 0 / 10%); */
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
}

.ctx-menu {
    position: absolute;
    overflow: visible;
}

.list-group .list-group-item.ctx-header {
    font-weight: bold;
    cursor: default;
}

.ctx-item+.ctx-header {
    border-top: 1px solid;
}

.ctx-item {
    position: relative;
}

.ctx-expander {
    border-left: 1px solid;
    margin-left: 1em;
    text-align: center;
    width: 2em;
}

.ctx-expander:hover {
    font-weight: bold;
}

.ctx-sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
}

@media screen and (max-width: 1000px) {
    .ctx-blocker {
        position: absolute;
    }

    .list-group .list-group-item.ctx-item {
        padding: 1em;
    }
}



#qr--settings {
	.qr--head {
		display: flex;
		align-items: baseline;
		gap: 1em;
		> .qr--title {
			font-weight: bold;
		}
		> .qr--actions {
			display: flex;
			flex-direction: row;
			align-items: baseline;
			gap: 0.5em;
		}
	}
	.qr--setList {
		> .qr--item {
			display: flex;
			flex-direction: row;
			gap: 0.5em;
			align-items: baseline;
			padding: 0 0.5em;
			> .drag-handle {
				padding: 0.75em;
			}
			> .qr--visible {
				flex: 0 0 auto;
				display: flex;
				flex-direction: row;
			}
		}
	}
	#qr--set-settings {
		#qr--injectInputContainer {
			flex-wrap: nowrap;
		}
	}
	#qr--set-qrList {
		.qr--set-qrListContents > {
			padding: 0 0.5em;
			> .qr--set-item {
				display: flex;
				flex-direction: row;
				gap: 0.5em;
				align-items: baseline;
				padding: 0.25em 0;
				> :nth-child(1) { flex: 0 0 auto; }
				> :nth-child(2) { flex: 1 1 25%; }
				> :nth-child(3) { flex: 0 0 auto; }
				> :nth-child(4) { flex: 1 1 75%; }
				> :nth-child(5) { flex: 0 0 auto; }
				> .drag-handle {
					padding: 0.75em;
				}
				.qr--set-itemLabel, .qr--action {
					margin: 0;
				}
				.qr--set-itemMessage {
					font-size: smaller;
				}
			}
		}
	}
	.qr--set-qrListActions {
		display: flex;
		flex-direction: row;
		gap: 0.5em;
		justify-content: center;
		padding-bottom: 0.5em;
	}
}





#qr--qrOptions {
	display: flex;
	flex-direction: column;
	> #qr--ctxEditor {
		.qr--ctxItem {
			display: flex;
			flex-direction: row;
			gap: 0.5em;
			align-items: baseline;
		}
	}
}



@media screen and (max-width: 750px) {
	body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
		flex-direction: column;
		overflow: auto;
		> #qr--main {
			flex: 0 0 auto;
		}
		> #qr--main > .qr--labels {
			flex-direction: column;
		}
		> #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
			min-height: 50svh;
			height: 50svh;
		}
	}
}
.dialogue_popup:has(#qr--modalEditor) {
	aspect-ratio: unset;

	.dialogue_popup_text {
		display: flex;
		flex-direction: column;

		> #qr--modalEditor {
			flex: 1 1 auto;
			display: flex;
			flex-direction: row;
			gap: 1em;
			overflow: hidden;

			> #qr--main {
				flex: 1 1 auto;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				> .qr--labels {
					flex: 0 0 auto;
					display: flex;
					flex-direction: row;
					gap: 0.5em;
					> label {
						flex: 1 1 1px;
						display: flex;
						flex-direction: column;
						> .qr--labelText {
							flex: 1 1 auto;
						}
						> .qr--labelHint {
							flex: 1 1 auto;
						}
						> input {
							flex: 0 0 auto;
						}
					}
				}
				> .qr--modal-messageContainer {
					flex: 1 1 auto;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					> .qr--modal-editorSettings {
						display: flex;
						flex-direction: row;
						gap: 1em;
						color: var(--grey70);
						font-size: smaller;
						align-items: baseline;
						> .checkbox_label {
							white-space: nowrap;
							> input {
								font-size: inherit;
							}
						}
					}
					> #qr--modal-messageHolder {
						flex: 1 1 auto;
						display: grid;
						text-align: left;
						overflow: hidden;
						> #qr--modal-messageSyntax {
							grid-column: 1;
							grid-row: 1;
							padding: 0;
							margin: 0;
							border: none;
							overflow: hidden;
							min-width: 100%;
							width: 0;
							> #qr--modal-messageSyntaxInner {
								height: 100%;
							}
						}
						> #qr--modal-message {
							grid-column: 1;
							grid-row: 1;
							caret-color: white;
							mix-blend-mode: difference;
							&::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
								visibility: hidden;
								cursor: default;
							}
						}
						#qr--modal-message, #qr--modal-messageSyntaxInner {
							padding: 0.75em;
							margin: 0;
							border: none;
							resize: none;
							line-height: 1.2;
							border: 1px solid var(--SmartThemeBorderColor);
							border-radius: 5px;
						}
					}
				}
			}

			#qr--modal-executeButtons {
				display: flex;
				gap: 1em;
				.qr--modal-executeButton {
					border-width: 2px;
					border-style: solid;
					display: flex;
					flex-direction: row;
					gap: 0.5em;
					padding: 0.5em 0.75em;
					.qr--modal-executeComboIcon {
						display: flex;
					}
				}
				#qr--modal-execute {
					transition: 200ms;
					filter: grayscale(0);
					&.qr--busy {
						cursor: wait;
						opacity: 0.5;
						filter: grayscale(1);
					}
				}
				#qr--modal-execute {
					border-color: rgb(81, 163, 81);
				}
				#qr--modal-pause, #qr--modal-stop {
					cursor: default;
					opacity: 0.5;
					filter: grayscale(1);
					pointer-events: none;
				}
				.qr--busy {
					~ #qr--modal-pause, ~ #qr--modal-stop {
						cursor: pointer;
						opacity: 1;
						filter: grayscale(0);
						pointer-events: all;
					}
				}
				#qr--modal-pause {
					border-color: rgb(146, 190, 252);
				}
				#qr--modal-stop {
					border-color: rgb(215, 136, 114);
				}
			}
			#qr--modal-executeProgress {
				--prog: 0;
				--progColor: rgb(146, 190, 252);
				--progFlashColor: rgb(215, 136, 114);
				--progSuccessColor: rgb(81, 163, 81);
				--progErrorColor: rgb(189, 54, 47);
				--progAbortedColor: rgb(215, 136, 114);
				height: 0.5em;
				background-color: var(--black50a);
				position: relative;
				&:after {
					content: '';
					background-color: var(--progColor);
					position: absolute;
					inset: 0;
					right: calc(100% - var(--prog) * 1%);
					transition: 200ms;
				}
				&.qr--paused:after {
					animation-name: qr--progressPulse;
					animation-duration: 1500ms;
					animation-timing-function: ease-in-out;
					animation-delay: 0s;
					animation-iteration-count: infinite;
				}
				&.qr--aborted:after {
					background-color: var(--progAbortedColor);
				}
				&.qr--success:after {
					background-color: var(--progSuccessColor);
				}
				&.qr--error:after {
					background-color: var(--progErrorColor);
				}
			}
			#qr--modal-executeErrors {
				display: none;
				&.qr--hasErrors {
					display: block;
				}
				text-align: left;
				font-size: smaller;
				background-color: rgb(189, 54, 47);
				color: white;
				padding: 0.5em;
				overflow: auto;
				min-width: 100%;
				width: 0;
			}
			#qr--modal-executeResult {
				display: none;
				&.qr--hasResult {
					display: block;
				}
				&:before { content: 'Result: '; }
				text-align: left;
				font-size: smaller;
				background-color: rgb(81, 163, 81);
				color: white;
				padding: 0.5em;
				overflow: auto;
				min-width: 100%;
				width: 0;
			}
		}
	}
}
@keyframes qr--progressPulse {
    0%, 100% {
        background-color: var(--progColor);
    }
    50% {
        background-color: var(--progFlashColor);
    }
}

.shadow_popup.qr--hide {
	opacity: 0 !important;
}