:root {
	--background: #FFF;
	--background-secondary: #F7F7F7;
	--text: #111;
	--text-secondary: #2D3A45;
	--accent: #1855DA;
	--border: #D0DCE6;
	--active: #F5F8FC; /* F5F8FC | E9F2FF */
	--warn: #FFB444;
}
@media (prefers-color-scheme: dark) {
	:root {
		--background: #111;
		--background-secondary: #222;
		--text: #DDD;
		--text-secondary: #8693a1;
		--accent: #366adb;
		--border: #253745;
		--active: #202429;
		--warn: #d6ad6f;
	}
}

* {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* override bootstrap BS */
button, input, optgroup, select, textarea {
	font-family: 'IBM Plex Sans', Arial, sans-serif;
}

.body {
	display: flex;
	-webkit-box-align: stretch;
	align-items: stretch;
	align-content: stretch;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: var(--background-secondary);
	line-height: initial;
}

.equal-flex-width {
	flex-grow: 1;
	flex-basis: 0;
}
.inline-controls {
	display: flex;
	align-items: center;
}
.inline-controls .input-control:not(:first-child) {
	margin-left: 25px;
}
.inline-controls .input-control.small-margin:not(:first-child) {
	margin-left: 15px;
}
.control-group {
	margin-left: 20px;
}
.paragraph {
	margin-bottom: 15px;
}
.spacer {
	flex-grow: 1;
}
.spacer-small {
	width: 20px;
}
.no-margin {
	margin: 0;
}
.no-margin-bottom {
	margin-bottom: 0 !important;
}
.indent {
	margin-right: 32px;
}
/* the portal has a hidden class, so I came up with a smartypants name */
.hidden-in-spirit, .hidden-in-spirit:disabled {
	opacity: 0;
	pointer-events: none;
}

/* these are duplicated in dynamic.css, but are used to style the static form fields */
.control-container {
	margin-bottom: 20px;
	padding: 10px;
	background-color: var(--active);
	border: 1px solid var(--border);
	border-radius: 6px;
}
.container-header {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 10px 0;
}
.container-button {
	display: flex;
	height: 20px;
	width: 20px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.2s;
}
.container-button.close {
	color: #CE3538;
	opacity: 0;
	pointer-events: none;
}
.container-title {
	flex-grow: 1;
	margin: 0 10px;
}
.control-container .input-control.no-margin { margin-bottom: 0; }

/* left navigation (main navigation) */
.nav {
	min-width: 220px;
	height: 100vh;
	padding: 10px;
	box-sizing: border-box;
	background-color: var(--background);
	box-shadow: 0px 0px 20px rgba(102, 114, 164, 0.13);
	z-index: 20; /* added for the box-shadow to apply correctly to elements to the right of the nav pane */
	transition: 0.3s;
}

.nav.hidden {
	margin-left: -250px;
}

.nav button {
	display: block;
	margin-bottom: 5px;
	background-color: inherit;
	color: #2D3A45;
	padding: 16px 16px;
	width: 100%;
	border: none;
	outline: none;
	text-align: left;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}
.nav button:hover {
	background-color: var(--active);
}
.nav button.active {
	color: var(--accent);
	font-weight: bold;
	background-color: var(--active);
}

/* configuration content */
.main-content {
	position: relative;
	background: var(--background);
	z-index: 1000000;
}

.panel .tabbed-header {
	display: flex;
	height: 50px;
	margin: 5px -9px 0 -9px;
	border-bottom: 1px solid var(--border);
	background-color: var(--background);
	transition: 0.3s;
}

button.accordion:hover:enabled + .panel > .tabbed-header {
	background-color: var(--active);
}

.panel .tabbed-header button {
	padding: 10px;
	margin: 0 10px;
	color: #6D869B;
	background-color: transparent;
	border: none;
	border-bottom: 4px solid transparent;
	border-radius: 0;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
}
.panel .tabbed-header button.active {
	color: var(--text);
	background-color: transparent;
	border-bottom: 4px solid #00C666;
	font-weight: bold;
}
.panel .tabbed-header button:hover {
	background: var(--active);
	border-color: var(--active);
}
.panel .tabbed-header button.active:hover {
	border-color: #00C666;
}
.panel .tabbed-header button:disabled {
	background-color: transparent;
	border-color: transparent;
	cursor: default;
}

.tabcontent {
	display: none;
	min-width: 0px;
	height: calc(100vh + 2px);
	margin: -1px;
	overflow: hidden scroll;
	border-left: 1px solid var(--border);
	box-sizing: border-box;
}
.tabcontent.save-panel-shown {
	padding-bottom: 114px;
}
.tabcontent button.accordion {
	width: 100%;
	padding: 24px 18px;
	color: var(--text);
	background-color: var(--background);
	border-radius: 0;
	border: none;
	text-align: left;
	font-size: 17px;
	font-weight: 400;
	cursor: pointer;
	outline: none;
	transition: 0.4s;
}

button.accordion:after {
	content: '\002B';
	color: var(--accent);
	font-size: 30px;
	line-height: 17px;
	font-weight: normal;
	float: right;
}
button.accordion.active {
	font-weight: bold;
}
button.accordion.active:after {
	content: "\2212";
}
button.accordion + .panel {
	border-bottom: 1px solid var(--border);
}
.panel {
	width: 600px;
	padding: 0 18px;
	background-color: var(--background);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.panel.show {
	overflow: initial;
}
.panel.full-width {
	max-width: initial;
}

.main-content code {
	display: inline-block;
	margin: 2px;
	padding: 0 5px;
	border-radius: 4px;
	border: 1px solid var(--warn);
	color: var(--text);
}

button {
	background: var(--background);
	border-radius: 5px;
	border: 2px solid var(--border);
	padding: 10px 16px;
	transition: 0.3s;
}
.super-preview-container button:hover:enabled, .super-preview-container + .main-content button:hover:enabled { /* super verbose to prevent conflicts with the portal */
	background-color: var(--active);
	cursor: pointer;
}
button:disabled {
	cursor: default;
	opacity: 0.5;
	pointer-events: none;
}

.button-primary {
	color: #FFF;
	background-color: var(--accent);
	border: 2px solid var(--accent);
}
.button-secondary, .button-secondary.small {
	color: var(--accent);
	border: 2px solid var(--accent) !important;
}
.super-preview-container + .main-content .button-primary:hover:enabled {
	background-color: #0a3fb1;
	border: 2px solid #0a3fb1;
}

.play-button {
	width: 29px;
	height: 29px;
	margin: 0 0 0px 5px;
	padding: 0 0 0 1px;
	color: #b5c4d2;
	border-radius: 20px;
}

.button-primary.busy {
	color: transparent !important;
	pointer-events: none;
}

.button-primary.busy::before {
	content: '';
	position: absolute;
	top: 2px;
	width: 26px;
	height: 26px;
	margin: auto;
	border: 4px solid transparent;
	/* border-top: 4px solid var(--background); */
	border-bottom: 3px solid var(--background);
	border-radius: 100px;
	animation: spin 1s linear infinite;
}
.button-primary.busy::after {
	content: '';
	position: absolute;
	top: 10px;
	width: 14px;
	height: 14px;
	left: 24px;
	border: 2px solid transparent;
	border-top: 2px solid var(--background);
	/* border-bottom: 2px solid var(--background); */
	border-radius: 100px;
	animation: spin-reverse 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes spin-reverse {
	0% { transform: rotate(360deg); }
	100% { transform: rotate(0deg); }
}

.script-container {
	margin-bottom: 20px;
	padding: 10px;
	background-color: var(--active);
	border: 1px solid var(--border);
	border-radius: 6px;
	transition: opacity 0.2s, border-color 0.2s;
}
.script-button {
	position: relative;
	color: var(--background);
	background-color: var(--accent);
	border: none;
	font-weight: bold;
	text-transform: uppercase;
}

.button-pill {
	display: flex;
	align-items: center;
	padding: 5px 10px 5px 5px;
	color: var(--accent);
	background-color: transparent;
	border: none;
	border-radius: 50px;
	font-weight: bold;
	text-transform: uppercase;
	outline: none;
}
button.icon-add::before {
	content: "+";
	font: normal 22px / 20px Arial;
	display: flex;
	align-items: baseline;
	justify-content: center;
	height: 22px;
	width: 22px;
	margin-right: 8px;
	border: 2px solid;
	border-radius: 30px;
	box-sizing: border-box;
}

button.small {
	padding: 3px 6px;
	border: none !important;
	border-radius: 4px;
	font-weight: bold;
}
#copy-button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	height: 40px;
	width: 40px;
	border-radius: 0 5px 0 5px;
	border: none;
	background-color: var(--border);
}
#copy-button:hover {
	background-color: var(--accent);
}
#copy-button:hover + #generated-text {
	border: 1px solid var(--accent);
	box-shadow: 0 0 0 1px var(--accent) inset;
}
#copy-button div:first-child {
	margin: -3px -7px 0 0;
	font-size: 18px;
	font-family: Arial;
}
#copy-button div:last-child {
	font-weight: bold;
	font-size: 13px;
}
#copy-desktop {
	position: relative;
	width: 18px;
	margin-left: -10px;
	padding: 15px;
	transition: 0.3s;
}
#copy-desktop::before {
	content: '';
	display: block;
	height: 14px;
	width: 14px;
	border: 2px solid;
	border-radius: 50px;
}
#copy-desktop::after {
	content: '';
	display: block;
	position: absolute;
	top: 25px;
	left: 13px;
	height: 5px;
	width: 5px;
	border: 2px solid;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	box-shadow: 0 6px 0 4px var(--background);
	transition: 0.3s;
}
#copy-desktop:hover::after { box-shadow: 0 6px 0 4px var(--active); }

#mobile-configuration:not(.active) + #copy-desktop {
	width: 0;
	opacity: 0;
}

#lang {
	appearance: none; /* on safari, the padding is ignored!, so we set it to none! this also removes the stupid gradient background */
	min-width: 130px;
}
#lang, #queue-translations {
	align-self: center;
	width: auto;
	margin-bottom: 5px;
	padding-left: 32px;
	border: none;
	color: #6D869B;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236D869B' fill-rule='evenodd' d='m12.87 15.07-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04ZM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12Zm-1 2.67L15.88 17h3.24l-1.62-4.33Z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat 5px;
	font-size: 13.3px;
	box-shadow: none;
}
#lang option { padding: 4px; }

#queue-translations {
	padding-left: 28px;
	color: var(--accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%231855DA' fill-rule='evenodd' d='m12.87 15.07-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04ZM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12Zm-1 2.67L15.88 17h3.24l-1.62-4.33Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

#edit-survey-script, #edit-bot-script {
	position: absolute;
	top: 22px;
	right: 92px;
}
#delete-survey-script, #delete-bot-script {
	position: absolute;
	top: 22px;
	right: 28px;
	background-color: #CE3538;
}
i.circled-cog {
	position: absolute;
	height: 24px;
	width: 24px;
	left: 10px;
	top: 7px;
	/* background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.502 12c0 .34-.03.66-.07.98l2.11 1.65c.19.15.24.42.12.64l-2 3.46c-.09.16-.26.25-.43.25-.06 0-.12-.01-.18-.03l-2.49-1c-.52.39-1.08.73-1.69.98l-.38 2.65c-.03.24-.24.42-.49.42h-4c-.25 0-.46-.18-.49-.42l-.38-2.65c-.61-.25-1.17-.58-1.69-.98l-2.49 1a.5.5 0 01-.61-.22l-2-3.46a.505.505 0 01.12-.64l2.11-1.65c-.04-.32-.07-.65-.07-.98 0-.33.03-.66.07-.98l-2.11-1.65a.493.493 0 01-.12-.64l2-3.46c.09-.16.26-.25.43-.25.06 0 .12.01.18.03l2.49 1c.52-.39 1.08-.73 1.69-.98l.38-2.65c.03-.24.24-.42.49-.42h4c.25 0 .46.18.49.42l.38 2.65c.61.25 1.17.58 1.69.98l2.49-1a.5.5 0 01.61.22l2 3.46c.12.22.07.49-.12.64l-2.11 1.65c.04.32.07.64.07.98zm-2 0c0-.21-.01-.42-.05-.73l-.14-1.13.89-.7 1.07-.85-.7-1.21-1.27.51-1.06.43-.91-.7c-.4-.3-.8-.53-1.23-.71l-1.06-.43-.16-1.13-.19-1.35h-1.39l-.2 1.35-.16 1.13-1.06.43c-.41.17-.82.41-1.25.73l-.9.68-1.04-.42-1.27-.51-.7 1.21 1.08.84.89.7-.14 1.13c-.03.3-.05.53-.05.73 0 .2.02.43.05.74l.14 1.13-.89.7-1.08.84.7 1.21 1.27-.51 1.06-.43.91.7c.4.3.8.53 1.23.71l1.06.43.16 1.13.19 1.35h1.4l.2-1.35.16-1.13 1.06-.43c.41-.17.82-.41 1.25-.73l.9-.68 1.04.42 1.27.51.7-1.21-1.08-.84-.89-.7.14-1.13c.03-.3.05-.52.05-.73zm-5.5-4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-2 4c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2z' fill='%231855DA' /%3E%3C/svg%3E"); */
}

.tabcontent h4 {
	margin: 18px 0 10px 0;
	color: var(--text);
	font-size: 14px;
	font-weight: bold;
}
.tabcontent h4:not(:first-child) {
	margin-top: 40px;
}
.tabcontent h4.narrow-margin-top {
	margin-top: 25px;
}
.tabcontent h4.tall-margin-top {
	margin-top: 55px;
}
.tabcontent .description {
	/* font-weight: 100; */
	margin: 5px 0 20px 0;
	color: var(--text-secondary);
}

.panel .input-control {
	margin-bottom: 15px;
}
.panel input, .panel input[type='text'] {
	display: block;
	width: 100%;
	min-height: 32px;
	padding: 0 8px;
	border-radius: 5px;
	border: 1px solid var(--border);
	color: var(--text);
	background-color: var(--background);
	font-size: 16px;
	box-sizing: border-box;
	box-shadow: none;
}
.panel input.has-right-icon {
	padding-right: 28px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { appearance: none; }

.panel input.pixels::before {
	content: 'px';
	position: absolute;
	width: 20px;
	height: 20px;
}

.panel select {
	height: 20px;
	width: 100%;
	display: block;
	min-height: 32px;
	margin-bottom: 0;
	padding-right: 24px;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid var(--border);
	box-sizing: border-box;
	box-shadow: none;
	color: var(--text);
	/* thanks: https://stackoverflow.com/questions/7638677/how-can-i-remove-the-gloss-on-a-select-element-in-safari-on-mac */
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZmY7fS5jbHMtMntmaWxsOiM0NDQ7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5hcnJvd3M8L3RpdGxlPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat calc(100% - 5px) 50%;
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZyBmaWxsPSJub25lIiBpZD0iZzQiIHRyYW5zZm9ybT0ibWF0cml4KDAuNDE5NDk0NTMsMCwwLDAuNDE5NDk0NTMsLTAuNjY3MjY1OTIsMS44NDIyNTgxKSIgc3R5bGU9InN0cm9rZS13aWR0aDowLjk5ODgyMTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0gNC45MzIsNS40MzIgQSAwLjQ1LDAuNDUgMCAxIDAgNS41NjgsNi4wNjggTCA3LjUsNC4xMzYgOS40MzIsNi4wNjggYSAwLjQ1LDAuNDUgMCAwIDAgMC42MzYsLTAuNjM2IGwgLTIuMjUsLTIuMjUgYSAwLjQ1LDAuNDUgMCAwIDAgLTAuNjM2LDAgeiBtIDUuMTM2LDQuMTM2IEEgMC40NSwwLjQ1IDAgMCAwIDkuNDMyLDguOTMyIEwgNy41LDEwLjg2NCA1LjU2OCw4LjkzMiBBIDAuNDUsMC40NSAwIDAgMCA0LjkzMiw5LjU2OCBsIDIuMjUsMi4yNSBhIDAuNDUsMC40NSAwIDAgMCAwLjYzNiwwIHoiIGZpbGw9IiNCNkMyQ0MiIGlkPSJwYXRoMiIgc3R5bGU9InN0cm9rZS13aWR0aDowLjk5ODgyMTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgLz48L2c+PC9zdmc+) no-repeat calc(100% - 2px) 50%;
	background-color: var(--background);
	background-size: 18px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

.panel select option:disabled { color: #ccc; }

.panel input[type='text'], .panel input[type='color'], .panel input[type='number'], .panel textarea, .panel select {
	transition: 0.2s;
}
.panel input[type='text']:focus, .panel input[type='color']:focus, .panel input[type='number']:focus, .panel textarea:focus, .panel select:focus {
	outline: none;
	border: 1px solid var(--accent);
	border-radius: 5px;
	box-shadow: 0 0 0 1px var(--accent) inset;
}

.panel :invalid {
	border: 1px solid #be1919 !important;
	box-shadow: 0 0 0 1px #be1919 inset !important;
	background-color: #ffc1c1;
}

.panel label {
	display: block;
	margin-bottom: 0;
	color: var(--text-secondary);
	line-height: 18px;
}

.panel label.main-label {
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: bold;
}

.panel .borderless-input, .panel .borderless-input:focus {
	width: auto;
	border: none;
}

.panel label.inline-label {
	display: flex;
	align-items: center;
	margin: 0 10px;
	font-size: 16px;
	font-weight: normal;
}
.panel label.inline-label input {
	width: auto;
	margin: 0 10px;
}

#integration textarea {
	width: 100%;
	display: block;
	box-sizing: border-box;
	min-height: 185px;
	margin: 0;
	margin-bottom: 15px;
	padding: 10px 40px 10px 10px;
	border: 1px solid var(--border);
	color: var(--text);
	background: var(--background);
	border-radius: 5px;
	font-size: 14px;
	font-family: consolas, monospace;
	resize: none;
	box-shadow: none;
	overflow: hidden;
}

/* save-reset panel */
.main-content .save-reset-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -120px;
	padding: 10px;
	border-top: 1px solid var(--border);
	color: var(--text);
	background: var(--background);
	box-sizing: border-box;
	transition: 0.3s;
	z-index: 10;
}
.save-reset-panel p {
	margin: 1rem 0 1rem 0;
}
.main-content .save-reset-panel.show {
	bottom: 0;
}

.main-content .save-reset-panel button {
	position: relative;
	margin: auto 5px;
	float: right;
	border: 2px solid transparent;
	color: var(--text);
}
.main-content .save-reset-panel #save-button { color: #FFF; }
.save-reset-panel p:before {
	/* content: "⚠"; */
	/* content: "ℹ"; */
	content: "i";
	color: var(--accent);
	font: bold 20px / 20px 'times new roman';
	margin: auto 15px;
}

/* hand-wavy solution */
.inline-controls font-input + color-input {
	margin-left: 10px;
}
.inline-controls font-input + color-input + align-input {
	margin-left: 21px;
}

.panel eye-capture-answers .input-control {
	margin-bottom: 10px;
}

/* themes */
.theme {
	height: 0px;
	width: 0px;
	border-radius: 50%;
	border: 25px solid;
	transform: rotate(45deg);
}
.sporty-spice { border-color: #C4C4C4 #747E85 #181A1D #CE3538; }
.earthy { border-color: #D5E3DF #8E9B97 #27504B #70945F; }
.light { border-color: #F4ECFE #9E98B2 #6954DD #9F5EF0; }
.modern { border-color: #E6E9F4 #919CBF #181F36 #2548FD; }
.agent { border-color: #E6E9F4 #919CBF #E7E9F4 var(--active); }

.loading::before, .loading::after {
	content: '';
	position: absolute;
	inset: 40% calc(50% - 24px);
	width: 48px;
	height: 48px;
	border: 6px solid transparent;
	border-color: var(--accent) transparent var(--accent);
	border-radius: 100px;
	animation: spin 1s linear infinite;
	z-index: 1;
}
.loading::after {
	width: 32px;
	height: 32px;
	inset: calc(40% + 12px) calc(50% - 12px);
	border: 2px solid transparent;
	border-color: #00AA57 transparent #00AA57;
	animation: spin .5s linear infinite reverse;
}

/* scrollbar */
.main-content ::-webkit-scrollbar { width: 6px; }
.main-content ::-webkit-scrollbar:horizontal { height: 4px; }
.main-content ::-webkit-scrollbar-track {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 0;
}
.main-content ::-webkit-scrollbar-thumb {
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: 0;
}
.main-content ::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 0;
}
.super-preview-container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	position: relative;
	transition: 0.3s;
}

.preview-header {
	display: flex;
	height: 60px;
	padding: 0 10px;
	background-color: var(--background);
}

#mobile-configuration:disabled:hover:after {
	content: "To edit the mobile configuration, make sure to enable 'Use custom configuration for mobile devices' switch under the 'General' tab";
	position: absolute;
	left: 120px;
	top: 50px;
	max-width: 370px;
	padding: 8px;
	color: var(--text-secondary);
	background-color: var(--background);
	border-radius: 8px;
	border: 2px solid var(--border);
	text-align: left;
	font-size: 12px;
	box-shadow: 0px 6px 10px rgba(75, 103, 124, 0.07);
	z-index: 10;
}

#preview-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	height: calc(100% - 120px);
}

/* this css rule does not apply to the generated css - this is only here to correctly position the chat button within the preview pane */
#chat-button {
	position: absolute !important;
}

.preview-bottom-nav {
    height: 60px;
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 0;
	border-radius: 0;
	background: var(--background);
	text-align: center;
	box-sizing: border-box;
}

.preview-bottom-nav button, .preview-header button {
	padding: 15px 10px;
	margin: 0 10px;
	color: var(--text-secondary);
	background-color: inherit;
	border: none;
	border-bottom: 4px solid var(--background);
	border-radius: 0;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
}
.preview-bottom-nav button.active, .preview-header button.active {
	color: var(--text);
	background: var(--background);
	border-bottom: 4px solid #00C666;
	font-weight: bold;
}
.preview-bottom-nav button:hover, .preview-header button:hover {
	background: var(--active);
	border-color: var(--active);
}
.preview-bottom-nav button.active:hover, .preview-header button.active:hover {
	border-color: #00C666;
}
.preview-bottom-nav button:disabled, .preview-header button:disabled {
	background: transparent;
	border-color: transparent;
	cursor: default;
}

.preview-content {
	display: none;
	box-sizing: border-box;
	margin: 0 auto;
}
.preview-content.visible {
	display: block;
}
.eye-capture-container.visible ~ div .chat-body {
	display: none;
}
.eye-capture-container.preview-content {
	position: absolute !important; /* in the real thing, the position is fixed, but that doesn't work in our case because of the configuration tabs */
}

#preview-container #general {
	position: relative;
}
#preview-container .hatching {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: repeating-linear-gradient(-45deg, var(--border), var(--border) 2px, transparent 2px, transparent 20px);
}

.preview-content, #preview-container form {
	width: 100%;
}

.preview-content .query-none-field {
	display: flex;
	width: 100%;
	height: 46px;
	margin-top: 8px;
	align-items: center;
	justify-content: center;
	background: #ffc1c1;
	border-radius: 4px;
	border: 2px dashed #be1919;
	/* background: #f5f8fc; */
	/* border: 2px dashed #1855da; */
}

/* bot styles */
#divDialog #txtQuestion {
	top: unset;
}

/* Waiting styles */
#divMsgToWaitForResponse, #divMsgOnRequestQueued, #divMsgOnRequestRejected {
	font-size:14px;
	padding:0 0 10px 5px;
	width:95%;
	color:#464646;
}

#divMsgOnRequestQueued {
	color:green;
	display:none;
}

#divMsgOnRequestRejected {
	color:red;
	display:none;
}

/* conversation styles */
.preview-content #ButtonBar #ctlChatConsole_btnReduceExpand {
	margin-left: 10px;
}

.preview-content select {
	-webkit-appearance: menulist;
	appearance: menulist;
}

#tblChatInputs select:valid ~ .validation-error {
	display: none;
}
img-option {
	display: none;
}
img-select {
	display: block;
	position: relative;
}
img-select .selected {
	border: 1px solid var(--border);
	border-radius: 5px;
	transition: 0.3s;
}
img-select .selected img {
	margin: 0 auto;
}

/* arrow */
img-select .selected:after {
	position: absolute;
	content: "";
	right: 10px;
	width: 18px;
	height: 100%;
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZyBmaWxsPSJub25lIiBpZD0iZzQiIHRyYW5zZm9ybT0ibWF0cml4KDAuNDE5NDk0NTMsMCwwLDAuNDE5NDk0NTMsLTAuNjY3MjY1OTIsMS44NDIyNTgxKSIgc3R5bGU9InN0cm9rZS13aWR0aDowLjk5ODgyMTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0gNC45MzIsNS40MzIgQSAwLjQ1LDAuNDUgMCAxIDAgNS41NjgsNi4wNjggTCA3LjUsNC4xMzYgOS40MzIsNi4wNjggYSAwLjQ1LDAuNDUgMCAwIDAgMC42MzYsLTAuNjM2IGwgLTIuMjUsLTIuMjUgYSAwLjQ1LDAuNDUgMCAwIDAgLTAuNjM2LDAgeiBtIDUuMTM2LDQuMTM2IEEgMC40NSwwLjQ1IDAgMCAwIDkuNDMyLDguOTMyIEwgNy41LDEwLjg2NCA1LjU2OCw4LjkzMiBBIDAuNDUsMC40NSAwIDAgMCA0LjkzMiw5LjU2OCBsIDIuMjUsMi4yNSBhIDAuNDUsMC40NSAwIDAgMCAwLjYzNiwwIHoiIGZpbGw9IiNCNkMyQ0MiIGlkPSJwYXRoMiIgc3R5bGU9InN0cm9rZS13aWR0aDowLjk5ODgyMTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgLz48L2c+PC9zdmc+) no-repeat 100% 50%;
}
img-select .options-container {
	display: none;
	position: absolute;
	max-height: 320px;
	top: 1px;
	left: 0;
	right: 0;
	min-width: 250px;
	margin-top: 48px;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 5px;
	overflow-y: auto;
	z-index: 1000;
}
img-select.center .options-container {
	left: 50%;
	transform: translateX(-50%);
}
img-select.right .options-container {
	right: 0;
	left: initial;
}
img-select .selected, img-select .option {
	display: flex;
	height: 50px;
	padding: 5px;
	align-items: center;
}
img-select img {
	display: block;
	max-height: 40px;
	margin: 0 auto;
}
img-select .options-container div {
	padding: 5px;
	background: transparent;
	transition: 0.3s;
}
img-select .options-container div:hover,
img-select .selected:hover {
	background: var(--active);
}
img-select .options-container .custom-img {
	display: flex;
	padding: 10px;
	align-items: center;
}
img-select .custom-img input {
	width: 100%;
	flex-grow: 1;
	min-height: 32px;
	padding-right: 70px;
	border: 1px solid var(--border);
	border-radius: 5px;
}
img-select .custom-img button {
	position: absolute;
	width: 22px;
	height: 22px;
	right: 18px;
	padding: 0px;
	border: none;
	border-radius: 20px;
	color: var(--text);
	background: var(--border);
	font: normal 18px / 22px Arial;
}
img-select .custom-img button:last-child {
	right: 50px;
	font-size: 14px;
}

img-select .checkerboard {
	padding: 3px;
	border-radius: 10px;
	background-color: #D0DCE6;
	background-image:
		linear-gradient(45deg, #FFF 25%, transparent 25%),
		linear-gradient(-45deg, #FFF 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #FFF 75%),
		linear-gradient(-45deg, transparent 75%, #FFF 75%);
	background-size: 10px 10px;
	background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

/* scrollbar */
img-select .options-container::-webkit-scrollbar {
	width: 8px;
}

img-select .options-container::-webkit-scrollbar-track {
	background: transparent;
	border: 2px solid var(--background);
	border-radius: 20px;
}
img-select .options-container::-webkit-scrollbar-thumb {
	background: var(--border);
	border: 2px solid var(--background);
	border-radius: 20px;
}
img-select .options-container::-webkit-scrollbar-thumb:hover {
	background: var(--border);
	border: 2px solid var(--background);
	border-radius: 20px;
}color-input {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 5px;
	font-size: 16px;
	max-height: 32px;
    box-sizing: border-box;
}
color-input input {
	min-height: 32px;
}
color-input input[type=color] {
	width: 28px;
	margin-left: 4px;
	padding: 3px;
	border: none;
	background: transparent;
	outline: none;
}
color-input ::-webkit-color-swatch {
	border-radius: 20px;
}
color-input ::-moz-color-swatch {
	height: 22px;
	border-radius: 20px;
}
.panel color-input input[type=text] {
	width: 80px;
	padding: 0 6px;
	border: none;
	border-radius: 0;
	background: transparent;
	font-family: consolas, monospace;
	font-size: 16px;
	box-shadow: none;
}
color-input.invalid {
	border: 1px solid rgb(190, 25, 25);
}
font-input {
	display: flex;
	flex-grow: 1;
}
font-input .button-group {
	display: inline-flex;
	position: relative;
	margin-left: 5px;
}
font-input .button-group button {
	display: flex;
	width: 40px;
	height: 32px;
	padding: 6px 12px 5px 11px;
	align-items: center;
	justify-content: center;
	color: var(--text);
	background-color: var(--background);
	border: 1px solid var(--border);
	border-radius: 0;
	text-align: center;
	font-size: 14.9px;
	cursor: pointer;
	box-sizing: border-box;
	outline: none;
	transition: background-color 0.3s;
}
font-input .button-group button.active {
	border: 3px solid var(--accent);
	z-index: 10;
}
font-input .button-group button:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
font-input .button-group button:last-child {
	margin-left: -3px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
font-input select {
	min-height: 28px;
	min-width: 50px;
	width: initial;
	margin-right: 5px;
	border-radius: 5px;
	border: 1px solid var(--border);
}
font-input.tight select {
	max-width: 152px;
}
font-input select:not(:first-child) {
	width: 100px;
	margin-left: 5px;
}/* pretty much the same rule set of font-input control */
align-input {
	display: flex;
}
align-input .button-group {
	display: inline-flex;
}
align-input .button-group button {
	display: flex;
	width: 40px;
	height: 32px;
	padding: 5px 12px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 0;
	color: var(--text);
	background-color: var(--background);
	text-align: center;
	font-size: 14.9px;
	cursor: pointer;
	box-sizing: border-box;
	outline: none;
	transition: background-color 0.3s;
}
align-input .button-group button.active {
	border: 3px solid var(--accent);
	z-index: 10;
}
align-input .button-group button:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
align-input .button-group button:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
align-input .button-group button:not(:first-child) {
	margin-left: -1px;
}
/* https://www.w3schools.com/howto/howto_css_switch.asp */
.switch-container {
	margin: 5px 2px;
}

.switch {
	display: inline-block;
	position: relative;
	width: 40px;
    height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
	margin: 0;
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.switch .slider {
	box-sizing: border-box;
	position: absolute;
	height: 14px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: 7px;
	border-radius: 20px;
	cursor: pointer;
	background-color: var(--border);
	transition: .4s;
}

.switch .slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 0;
	bottom: -4px;
	border-radius: 20px;
	background-color: white;
	border: 1px solid var(--border);
	box-sizing: border-box;
	box-shadow: 0px 0px 2px rgba(0, 56, 183, 0.06), 0px 2px 2px rgba(0, 56, 183, 0.07);
	transition: .4s;
}

.switch input:checked + .slider {
	background-color: #1855DA66;
}

.switch input:focus + .slider {
	box-shadow: 0 0 1px var(--border);
}

.switch input:checked + .slider:before {
	background: var(--accent);
	border-color: var(--accent);
	transform: translateX(19px);
	-webkit-transform: translateX(19px);
	-ms-transform: translateX(19px);
}

switch-input.disabled {
	pointer-events: none;
	opacity: 0.5;
}
range-input {
	display: flex;
	height: 32px;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 5px;
	max-height: 32px;
	box-sizing: border-box;
}
range-input input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	min-height: 0;
	min-width: 10px;
	margin: 5px;
	padding: 0;
	flex-grow: 1;
	background: var(--border);
	background: linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, var(--border) 50%, var(--border) 100%); /* this is only an arbitrary initial value...it's actually set in js */
	border: none;
	outline: none;
}

range-input input[type="range"]::-moz-range-track {
	height: 2px;
	width: 100%;
	background-color: var(--border);
}
range-input input[type="range"]::-moz-range-progress {
	height: 2px;
	background-color: var(--accent);
}

range-input input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 20px;
	border: 2px solid var(--background);
	background: var(--accent);
	cursor: pointer;
	-webkit-transition: .1s;
	transition: .1s;
}
range-input input[type=range]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 20px;
	border: 2px solid var(--background);
	background: var(--accent);
	cursor: pointer;
	transition: .1s;
}

range-input input[type=range]::-webkit-slider-thumb:hover {
	box-shadow: 0 0 0 6px rgba(24, 85, 218, 0.15);
	cursor: pointer;
}

range-input input[type=range]::-moz-range-thumb:hover {
	box-shadow: 0 0 0 6px rgba(24, 85, 218, 0.15);
	cursor: pointer;
}
range-input output {
	cursor: default;
	padding: 0 7px 0 3px;
	color: var(--text-secondary);
	font-family: consolas, monospace;
}/* Popup container */
info-popover {
	position: relative;
	margin-left: 8px;
}
select + info-popover {
	margin-left: -48px;
	background-color: var(--background);
	box-shadow: 0 0 0 3px var(--background); /* to prevent clipping of the option text */
}
input:is([type=text], [type=number]) + info-popover {
	margin: 0 2px 0 -32px;
	padding: 0 4px;
}
h4 + info-popover {
	margin-top: 9px;
}

chips-input + info-popover {
	margin: 12px 12px auto -32px;
}

info-popover label {
	height: 22px;
	width: 22px;
	margin-bottom: 0;
	color: var(--border) !important;
	border: 2px solid;
	border-radius: 15px;
	padding-left: 6px;
	font: bold italic 18px / 18px 'times new roman';
	cursor: pointer;
	transition: 0.2s;
}
info-popover label:hover {
	color: var(--accent) !important;
}

/* The actual popup */
info-popover span {
	position: absolute;
	padding: 8px;
	color: var(--text-secondary);
	background-color: var(--background);
	border-radius: 8px;
	border: 2px solid var(--border);
	box-shadow: 0px 6px 10px rgba(75, 103, 124, 0.07);
	z-index: 10;
	opacity: 0;
	transition: 0.4s;
	pointer-events: none;
}
info-popover span.top {
	bottom: 135%;
	left: 50%;
	transform: translate(-50%);
}
info-popover span.right {
	top: 50%;
	left: 135%;
	transform: translateY(-50%);
}
info-popover span.bottom {
	top: 135%;
	left: 50%;
	transform: translate(-50%);
}
info-popover span.left {
	top: 50%;
	right: 135%;
	transform: translateY(-50%);
}

/* Popup arrow */
info-popover span::before, info-popover span::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border-width: 8px;
	border-style: solid;
	border-color: var(--border) transparent transparent transparent;
}
info-popover span::after {
	margin-left: -5px;
	border-width: 5px;
	border-color: var(--background) transparent transparent transparent;
}
info-popover span.right::before, info-popover span.right::after {
	top: 50%;
	left: 0;
	margin: -8px 0 0 -16px;
	border-color: transparent var(--border) transparent transparent;
}
info-popover span.right::after {
	margin: -5px 0 0 -10px;
	border-color: transparent var(--background) transparent transparent;
}
info-popover span.left::before, info-popover span.left::after {
	top: 50%;
	left: 100%;
	margin: -8px -16px 0 0;
	border-color: transparent transparent transparent var(--border);
}
info-popover span.left::after {
	margin: -5px -10px 0 0;
	border-color: transparent transparent transparent var(--background);
}

/* hide and show the popup */
info-popover label:hover + span, info-popover label + span:hover {
	opacity: 1;
	pointer-events: all;
}

info-popover span p {
	width: max-content;
	max-width: 400px;
	margin: 0;
	font-size: 10px;
	font-weight: normal;
	line-height: 14px;
}

info-popover span.top p, info-popover span.bottom p {
	max-width: 450px;
}/* pretty much the same rule set of font-input control */
toggle-input {
	display: flex;
}
toggle-input.group {
	display: inline-flex;
}

toggle-input.separate button {
	display: flex;
	width: 60px;
	height: 60px;
	margin-right: 10px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	border-radius: 50%;
	outline: none;
	transition: 0.3s;
}

toggle-input.group button {
	display: flex;
	height: 32px;
	padding: 5px 12px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 0;
	color: var(--text);
	background-color: var(--background);
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	outline: none;
	transition: background-color 0.3s;
}
toggle-input.group button:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
toggle-input.group button:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
toggle-input.group button:not(:first-child) {
	margin-left: -1px;
}
toggle-input.group button.active:not(:first-child) {
	margin-left: -1px;
}

toggle-input button.active {
	border: 2px solid var(--accent);
	z-index: 10;
}
chips-input {
	display: block;
	padding: 0 5px;
	border-radius: 5px;
	border: 1px solid var(--border);
	background-color: var(--background);
	transition: 0.3s;
}

chips-input ul, .chips-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

chips-input li, .chips-list li {
	display: flex;
	align-items: center;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 5px 5px 5px 15px;
	background: var(--border);
	color: var(--text);
	border-radius: 50px;
}

chips-input button, .chips-list li button {
	width: 25px;
	height: 25px;
	margin-left: 10px;
	padding: 0 6px 0 7px !important;
	border: none;
	border-radius: 50px;
	color: var(--text);
	line-height: 25px;
}

chips-input input {
	display: inline-block;
	margin: 5px 0;
	background: none;
	font-size: 14px !important;
	outline: none;
	border: none !important;
	box-shadow: none !important;
  }

chips-input[invalid] {
	border: 1px solid var(--warn) !important;
	box-shadow: 0 0 0 1px var(--warn) inset !important;
	background-color: var(--background);
}

.chips-list {
	gap: 10px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid var(--border);
	background: var(--background);

	li {
		gap: 10px;
		margin: 0;
		padding: 5px 15px 5px 5px;
		transition: .2s;
	}

	.dragover {
		box-shadow: 0 0 0 2px var(--accent);
	}
}

#field-ordering {
	counter-reset: field-ordering;

	li { cursor: move }
	li::before {
		counter-increment: field-ordering;
		content: counter(field-ordering);
		display: flex;
        align-items: center;
        justify-content: center;
		width: 24px;
		height: 24px;
		background: var(--background);
		border-radius: 50px;
	}
}checked-input label.inline-label {
	display: flex;
	align-items: center;
	margin: 0 2px !important;
	font-size: 16px;
	font-weight: normal;
}
checked-input label.inline-label input {
	width: auto;
	margin: 0 10px;
}
.dynamic .add-button {
	display: flex;
	align-items: center;
	padding: 5px 10px 5px 5px;
	color: var(--accent);
	border: none;
	border-radius: 50px;
	font-weight: bold;
	text-transform: uppercase;
	outline: none;
}

.dynamic .container-button {
	display: flex;
	height: 20px;
	width: 20px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.2s;
}
.dynamic i.circled-add {
	display: flex;
	align-items: baseline;
	justify-content: center;
	height: 22px;
	width: 22px;
	margin-right: 8px;
	border: 2px solid;
	border-radius: 30px;
	box-sizing: border-box;
}
.dynamic i.circled-add:before {
	content: "+";
	font: normal 22px / 20px Arial;
}
.dynamic .container-button.drag-handle {
	cursor: move;
}

.dynamic .control-container {
	margin-bottom: 20px;
	padding: 10px;
	background-color: var(--active);
	border: 1px solid var(--border);
	border-radius: 6px;
	transition: opacity 0.2s, border-color 0.2s;
}
.dynamic .control-container.no-background {
	background: transparent;
}
.dynamic .container-header {
	display: flex;
	align-items: center;
	margin: 0;
	color: var(--text);
	font-size: 14px;
	font-weight: bold;
}

.dynamic .container-body {
	margin-top: 10px;
}

.dynamic .container-header select {
	margin: 0 10px;
	padding-right: 20px;
	background-color: transparent;
}
.dynamic .container-header select:disabled {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: none;
}
.dynamic .container-header select:disabled:first-child {
	margin-left: -3px;
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: bold;
}
form-fields.dynamic .container-header select:disabled { width: 144px; }
.dynamic .container-header select option { background: var(--background); }

.dynamic .container-button.close {
	color: red;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
}
.dynamic .control-container:hover > .container-header .container-button.close {
	opacity: 1;
	pointer-events: all;
}
.dynamic .container-title {
	flex-grow: 1;
	margin: 0 10px;
}

.dynamic .input-control.no-margin {
	margin-bottom: 0;
}

/* drag-drop stuff */
.dynamic .control-container.start {
	opacity: 0.4;
}
.dynamic .control-container.over {
	padding: 9px;
	border-color: var(--accent);
	border-width: 2px;
}

eye-capture-toggle { display: block; }
eye-capture-toggle .control-container:not(:last-child) {
	margin-bottom: 10px !important;
}
eye-capture-toggle.dynamic > .item-container > .control-container:first-child:hover  > .container-header > .container-button.close {
	opacity: 0;
	pointer-events: none;
}
eye-capture-toggle.dynamic .control-container.selected-item {
	padding: 9px;
	color: var(--text);
	border: 2px solid var(--accent);
}
eye-capture-toggle .no-background > .container-header {
	margin: 0;
}
eye-capture-toggle .container-header input {
	margin: 0 13px !important;
	background: transparent !important;
	border: none !important;
	font-size: 14px !important;
	box-shadow: none !important;
}
eye-capture-toggle.dynamic .control-container.selected-item .container-header input {
	font-weight: bold;
}
eye-capture-toggle .edit {
	margin-right: 10px;
	padding: 3px 6px;
	color: #FFF;
	background: var(--accent);
	border: none;
	border-radius: 4px;
	font-weight: bold;
}

.dynamic .input-control.hide-siblings ~ .input-control {
	display: none;
}[translatable] {
	position: relative;
	padding-left: 40px !important;
	background: var(--background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' viewBox='0 0 25 15'%3E%3Cpath fill='%2300247d' d='M0 0h25v15H0z'/%3E%3Cpath stroke='%23fff' stroke-width='3' d='m0 0 25 15m0-15L0 15'/%3E%3Cpath stroke='%23fff' stroke-width='5' d='M12.5 0v15M0 7.5h25'/%3E%3Cpath stroke='%23cf142b' stroke-width='3' d='M12.5 0v15M0 7.5h25'/%3E%3C/svg%3E") no-repeat 5px;
}

/* flags */
[translatable][configuration-key$=".fr"], [translatable][inner-configuration-key$=".fr"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' viewBox='0 0 900 600'%3E%3Cpath fill='%23ED2939' d='M0 0h900v600H0z'/%3E%3Cpath fill='%23fff' d='M0 0h600v600H0z'/%3E%3Cpath fill='%23002395' d='M0 0h300v600H0z'/%3E%3C/svg%3E"); }
[translatable][configuration-key$=".es"], [translatable][inner-configuration-key$=".es"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' viewBox='0 0 750 500'%3E%3Cpath fill='%23c60b1e' d='M0 0h750v500H0z'/%3E%3Cpath fill='%23ffc400' d='M0 125h750v250H0z'/%3E%3C/svg%3E"); }
[translatable][configuration-key$=".pt"], [translatable][inner-configuration-key$=".pt"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' viewBox='0 0 600 400'%3E%3Cpath fill='red' d='M0 0h600v400H0z'/%3E%3Cpath fill='%23060' d='M0 0h240v400H0z'/%3E%3C/svg%3E"); }
[translatable][configuration-key$=".de"], [translatable][inner-configuration-key$=".de"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' viewBox='0 0 5 3'%3E%3Cpath d='M0 0h5v3H0z'/%3E%3Cpath fill='%23D00' d='M0 1h5v2H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E"); }
[translatable][configuration-key$=".it"], [translatable][inner-configuration-key$=".it"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' viewBox='0 0 3 2'%3E%3Cpath fill='%23009246' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h2v2H1z'/%3E%3Cpath fill='%23ce2b37' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }

/* translatable with a little info popover at the end */
.inline-controls > [translatable="non-default"] { margin: 0 0 0 -100%; }

/* fallback highlight */
[translatable]::placeholder { color: transparent!important; }
[translatable]:placeholder-shown { background-color: #FFECCFDE !important; }

/* visibility */
[translatable="non-default"] {
	display: none !important;
	margin-top: -32px;
}

body[contivio-lang=".fr"] [translatable][configuration-key$=".fr"],
body[contivio-lang=".es"] [translatable][configuration-key$=".es"],
body[contivio-lang=".pt"] [translatable][configuration-key$=".pt"],
body[contivio-lang=".de"] [translatable][configuration-key$=".de"],
body[contivio-lang=".it"] [translatable][configuration-key$=".it"],

body[contivio-lang=".fr"] [translatable][inner-configuration-key$=".fr"],
body[contivio-lang=".es"] [translatable][inner-configuration-key$=".es"],
body[contivio-lang=".pt"] [translatable][inner-configuration-key$=".pt"],
body[contivio-lang=".de"] [translatable][inner-configuration-key$=".de"],
body[contivio-lang=".it"] [translatable][inner-configuration-key$=".it"] {
	display: block !important;
}

/* CHIPTS INPUT */
chips-input[translatable] {
	padding-left: 5px !important;
	background-position: 5px 12px;
	grid-row-start: 2;
	grid-column-start: 1;
}

chips-input[translatable] > input {
	width: calc(100% - 35px) !important;
	margin-left: 35px !important;
	padding-left: 0 !important;
}

chips-input[translatable="non-default"] { margin-top: 0; }
chips-input[translatable="non-default"][empty] { background-color: #FFECCFDE; }
chips-input[translatable="non-default"][empty] > input { background-color: #FFECCFDE; }

body:not([contivio-lang=".fr"]):not([contivio-lang=".es"]):not([contivio-lang=".pt"]):not([contivio-lang=".de"]):not([contivio-lang=".it"]) chips-input[translatable]:not([translatable="non-default"]) { display: block; }

/* QUEUES */
#queue-translations-body {
	position: relative;
	max-height: 200px;
	margin: -202px -10px 2px;
	padding: 0 10px;
	background: var(--active);
	overflow-y: auto;
}
#queue-translations-body input:read-only {
	opacity: 0.5;
	font-style: italic;
	pointer-events: none;
}
@media (prefers-color-scheme: dark) {
	:root {
		--background: #FFF;
		--background-secondary: #F7F7F7;
		--text: #111;
		--text-secondary: #2D3A45;
		--accent: #1855DA;
		--border: #D0DCE6;
		--active: #F5F8FC; /* F5F8FC | E9F2FF */
		--warn: #FFB444;
	}
}

.body {
	position: absolute;
	top: -60px;
}

.preview-header {
	height: 100px;
	padding: 50px 10px 0 10px;
}

#preview-container {
	height: calc(100% - 160px);
}

#desktop-configuration {
	margin-left: 39px;
}

.tabcontent {
	height: calc(100vh - 99px);
	margin-top: 99px;
	border-top: 1px solid var(--border);
}

.preview-header {
	border-bottom: 1px solid var(--border);
}

#edit-survey-script, #edit-bot-script {
	top: 23px;
	font-size: 100%;
}
#delete-survey-script, #delete-bot-script {
	top: 23px;
	font-size: 100%;
}

.button-primary.busy::before { top: 6px; left: 17px; }
.button-primary.busy::after { top: 12px; left: 23px; }

#copy-desktop { box-sizing: content-box; }
#copy-desktop::after { top: 20px; }