* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

body {
	font-family: 'Open Sans','Trebuchet MS', Arial;
	padding: 0;
}

#container {
	width: 100%;
	height: 50%;
	/* remove when not in sandbox mode */
	padding-bottom: 48px;
}
[draggable=true] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}

.dropzoneWrapper {
	display: table;
	width: 100%;
	height: 100%;
	border-spacing: 1em;
}
.dropzoneCol {
	display:table-cell;
	float: left;
	width: 50%;
	max-width: 50%;
	height: 100%;
	max-height: 100%;
	padding: 1em;
}
.dropzone {
	width: 100%;
	height: 100%;
	min-height: 480px;
	max-height: 100%;	
	border: 2px solid #ccc;
	background: #f4f4f4 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojNjY2NjY2O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MXtmaWxsOiM2NjY2NjY7fTwvc3R5bGU+PGcgaWQ9IkxheWVyXzIiPjxnPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxNS40IiB5MT0iNy42IiB4Mj0iMTUuNCIgeTI9IjIuOCIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIyMi4yIiB5MT0iMTIuNiIgeDI9IjIyLjIiIHkyPSIzIi8+PGxpbmUgY2xhc3M9InN0MCIgeDE9IjYuNSIgeTE9IjYuOSIgeDI9IjYuNSIgeTI9IjEuMSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxLjgiIHkxPSIxMC4xIiB4Mj0iMS44IiB5Mj0iNS43Ii8+PC9nPjwvZz48ZyBpZD0iTGF5ZXJfMyI+PGc+PHBhdGggY2xhc3M9InN0MSIgZD0iTTYuNyw5LjhsLTUuMSwzLjhjLTAuNywwLjUtMC43LDEuNCwwLjEsMS45bDExLjEsNy45YzAuOCwwLjUsMiwwLjYsMi43LDBsNy43LTUuN2MwLjctMC41LDAuNy0xLjQtMC4xLTEuOWwtOC4zLTUuOUw2LjcsOS44eiBNMTkuMSwxNi44TDE0LDIwLjZsLTEuOS0xLjNsMC4yLTEuNmwyLjktMC4xbDAuNS0xLjJMMTgsMTZMMTkuMSwxNi44TDE5LjEsMTYuOHogTTE1LjQsMTUuNWMtMC41LDAuNC0xLjQsMC40LTIsMGMtMC42LTAuNC0wLjYtMS4xLTAuMS0xLjVjMC41LTAuNCwxLjQtMC40LDIsMEMxNS45LDE0LjUsMTUuOSwxNS4xLDE1LjQsMTUuNXogTTEwLjksMTMuOEw3LjEsMTFsNy4zLDAuMUwxMC45LDEzLjh6Ii8+PC9nPjwvZz48L3N2Zz4=) no-repeat center center;
	background-size: 32px 32px;
}

#dropzone_alpha {
	background: #333;
	content: "";
	display: block !important;
	background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%), 
      linear-gradient(135deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size:10px 10px; /* Must be a square */
    background-position:0 0, 5px 0, 5px -5px, 0px 5px; /* Must be half of one side of the square */
	background-blend-mode: multiply;
	mix-blend-mode: multiply;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.dropzone.dropped {
	background: none;
	border: none;
}
.dropzone.hover {
	border: 4px dotted #ccc;
}
.dropzone img {
	max-width: 100%;
	max-height: auto;
}

button {
	padding: 1rem;
	margin: 1rem;
	cursor: pointer;
}

/* status and hint textbox */
#txtHint {
	color: #333;
	padding: 5px;
	margin: 0 5px;
	background-color: #fafafa;
	width: auto;
}
#txtHint {
	float: left;
	border-left: 5px solid;
}

#txtHint.info {
	border-color: #99cc00;
}
#txtHint.notice {
	border-color: #f9e71d;
}
#txtHint.success {
	border-color: #adbf19;
}
#txtHint.error {
	border-color: #fa3e3d;
}
#txtHint.none {
	display: none;
}

#parameters {
	float: left;
	display: flex;
    flex-direction: column;
	gap: 0.5rem;
}

/* Tooltip */
.tooltip {
	cursor: pointer;
	position: relative;
	display: inline-block;
	font-weight: bold;
}
.tooltip .tooltiptext {
	visibility: hidden;
	width: 100%;
	bottom: 100%;
	left: 50%;
	margin-left: -50%;
	background-color: #7A9D12;
	color: #fff;
	text-align: center;
	padding: 12px;
	border-radius: 6px;
	font-weight: normal;
	font-style: italic;
	-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow:1px 1px 3px rgba(0, 0, 0, 0.2);

	position: absolute;
	margin-bottom: 12px;
	z-index: 1;
}
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%; /* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #7A9D12 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
}

/* dialog box */
#dialogbox {
	position: fixed;
	color: #333;
	background-color: #fafafa;
	border-radius: 3px;
	width: 350px;
	height: 150px;
	top: 50%;
	left: 50%;
	padding: 0;
	margin-left: -175px;
	margin-top: -75px;
	z-index: 99999;
	-moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.33);
	-webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.33);
	box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.33);
}
#dialogbox p {
	width: 100%;
	text-align: center;
	padding: 0 1em;
	min-height: 33%;
	max-height: 40%;
	overflow: hidden;
}
#dialogbuttons {
	position: absolute;
	text-align: justify;
	min-width: 100%;
	bottom: 1.5em;
}
#dialogbuttons:after {
	content: '';
	width: 100%;
	display: inline-block;
}
#dialogbuttons button {
	appearance: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #fff;
	background-color: #99CC00;
	border: none;
	border-radius: 3px;
	padding: 0.5em;
	min-width: 25%;
	min-height: 33px;
	display: inline-block;
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: center center;
}
#dialogbuttons button:hover {
	background-color: #a0d600;
}
#dialogbuttons button:first-child {
	margin-left: 2em;
	float: left;
}
#dialogbuttons button:last-child {
	margin-right: 2em;
	float: right;
}
#dialogbuttons button.ok {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iI0ZGRkZGRiI+PHBhdGggZD0iTTEyLDJDNi40NzcsMiwyLDYuNDc3LDIsMTJjMCw1LjUyMyw0LjQ3NywxMCwxMCwxMHMxMC00LjQ3NywxMC0xMEMyMiw2LjQ3NywxNy41MjMsMiwxMiwyeiBNMTAuODIxLDE2Ljg0NmwtMy42OTItMy42ODUgIGwxLjQxMi0xLjQxNmwyLjIzOSwyLjIzNWw1Ljc1Ny02LjA4MWwxLjQ1MywxLjM3NUwxMC44MjEsMTYuODQ2eiIgZmlsbD0iI0ZGRkZGRiIgLz48L3N2Zz4=);
}
#dialogbuttons button.ok-only {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iI0ZGRkZGRiI+PHBhdGggZD0iTTEyLDJDNi40NzcsMiwyLDYuNDc3LDIsMTJjMCw1LjUyMyw0LjQ3NywxMCwxMCwxMHMxMC00LjQ3NywxMC0xMEMyMiw2LjQ3NywxNy41MjMsMiwxMiwyeiBNMTAuODIxLDE2Ljg0NmwtMy42OTItMy42ODUgIGwxLjQxMi0xLjQxNmwyLjIzOSwyLjIzNWw1Ljc1Ny02LjA4MWwxLjQ1MywxLjM3NUwxMC44MjEsMTYuODQ2eiIgZmlsbD0iI0ZGRkZGRiIgLz48L3N2Zz4=);
	float: left;
	width: 50%;
	margin-left: 25%;
}
#dialogbuttons button.cancel {
	background-image: url(data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjAvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQiW10+PHN2ZyB2ZXJzaW9uPSIxLjAiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNCAyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iI0ZGRkZGRiI+PGcgZmlsbD0iI0ZGRkZGRiI+PHBhdGggZD0iTTEyLDJDNi41LDIsMiw2LjUsMiwxMmMwLDUuNSw0LjUsMTAsMTAsMTBzMTAtNC41LDEwLTEwQzIyLDYuNSwxNy41LDIsMTIsMnogTTE2LjksMTUuNWwtMS40LDEuNEwxMiwxMy40bC0zLjUsMy41ICAgbC0xLjQtMS40bDMuNS0zLjVMNy4xLDguNWwxLjQtMS40bDMuNSwzLjVsMy41LTMuNWwxLjQsMS40TDEzLjQsMTJMMTYuOSwxNS41eiIgZmlsbD0iI0ZGRkZGRiIgLz48L2c+PC9zdmc+);
}
#dialogoverlay {
	opacity: 0.65;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #000;
	width: 100%;
	height: 100%;
	z-index: 99999;
}

#btn_share.tiny {
	width: 1.25rem;
    height: 1.25rem;
    background: none;
    border: none;
	margin: 0;
	padding: 0;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTZwdCIgaGVpZ2h0PSIxNnB0IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSAxMi41IDEgQyAxMS4xMjUgMSAxMCAyLjEyNSAxMCAzLjUgQyAxMCAzLjY3MTg3NSAxMC4wMTk1MzEgMy44MzU5MzggMTAuMDUwNzgxIDQgTCA1LjUxOTUzMSA2LjAzOTA2MyBDIDUuMDYyNSA1LjQxNDA2MyA0LjMyODEyNSA1IDMuNSA1IEMgMi4xMjUgNSAxIDYuMTI1IDEgNy41IEMgMSA4Ljg3NSAyLjEyNSAxMCAzLjUgMTAgQyA0LjMzMjAzMSAxMCA1LjA3NDIxOSA5LjU4MjAzMSA1LjUyNzM0NCA4Ljk0OTIxOSBMIDEwLjA2MjUgMTAuOTY0ODQ0IEMgMTAuMDIzNDM4IDExLjEzNjcxOSAxMCAxMS4zMTY0MDYgMTAgMTEuNSBDIDEwIDEyLjg3NSAxMS4xMjUgMTQgMTIuNSAxNCBDIDEzLjg3NSAxNCAxNSAxMi44NzUgMTUgMTEuNSBDIDE1IDEwLjEyNSAxMy44NzUgOSAxMi41IDkgQyAxMS42Njc5NjkgOSAxMC45MjU3ODEgOS40MTc5NjkgMTAuNDcyNjU2IDEwLjA1MDc4MSBMIDUuOTM3NSA4LjAzOTA2MyBDIDUuOTc2NTYzIDcuODYzMjgxIDYgNy42ODM1OTQgNiA3LjUgQyA2IDcuMzEyNSA1Ljk3NjU2MyA3LjEyODkwNiA1LjkzNzUgNi45NTMxMjUgTCAxMC40NDUzMTMgNC45MTQwNjMgQyAxMC44OTg0MzggNS41NzAzMTMgMTEuNjUyMzQ0IDYgMTIuNSA2IEMgMTMuODc1IDYgMTUgNC44NzUgMTUgMy41IEMgMTUgMi4xMjUgMTMuODc1IDEgMTIuNSAxIFogTSAxMi41IDIgQyAxMy4zMzU5MzggMiAxNCAyLjY2NDA2MyAxNCAzLjUgQyAxNCA0LjMzNTkzOCAxMy4zMzU5MzggNSAxMi41IDUgQyAxMS42NjQwNjMgNSAxMSA0LjMzNTkzOCAxMSAzLjUgQyAxMSAyLjY2NDA2MyAxMS42NjQwNjMgMiAxMi41IDIgWiBNIDMuNSA2IEMgNC4zMzU5MzggNiA1IDYuNjY0MDYzIDUgNy41IEMgNSA4LjMzNTkzOCA0LjMzNTkzOCA5IDMuNSA5IEMgMi42NjQwNjMgOSAyIDguMzM1OTM4IDIgNy41IEMgMiA2LjY2NDA2MyAyLjY2NDA2MyA2IDMuNSA2IFogTSAxMi41IDEwIEMgMTMuMzM1OTM4IDEwIDE0IDEwLjY2NDA2MyAxNCAxMS41IEMgMTQgMTIuMzM1OTM4IDEzLjMzNTkzOCAxMyAxMi41IDEzIEMgMTEuNjY0MDYzIDEzIDExIDEyLjMzNTkzOCAxMSAxMS41IEMgMTEgMTAuNjY0MDYzIDExLjY2NDA2MyAxMCAxMi41IDEwIFogIi8+CjwvZz4KPC9zdmc+Cg==");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* dual slider */
.min-max-slider {
	--highlight-color: #3b99fc;
	margin-bottom: 0.5rem;
}
.slider-container {
	position: relative;
	width: 250px;
	margin: 0.5rem 0;
	min-height: 16px;
}
.slider-legend {
	width: 250px;
	display: flex;
	justify-content: space-between;
}
.slider-legend input {
	width: 55px;
}
.slider {
	-webkit-appearance: none;
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	pointer-events: none;
	margin: 0;
	z-index: 3;
}
.slider-fill,
.slider-fill-shadow {
	position: absolute;
	height: 4px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	border-radius: 2px;
	z-index: 1;
	left: 0;
	right: 0;
}
.slider-fill {
	background: var(--highlight-color);
}

.slider-container:has(input:disabled) .slider-fill {
	background: #ccc
}
.slider-fill-shadow {
	background: #ddd;
}
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: all;
	width: 16px;
	height: 16px;
	background: #fff;
	border: 1px solid #aaa;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.slider::-webkit-slider-thumb:hover {
	background: var(--highlight-color);
	border-color: var(--highlight-color);
}
.slider-container:has(input:disabled) .slider::-webkit-slider-thumb:hover {
	background: #fff;
	border-color: #aaa;
	cursor: default;
}
.slider::-moz-range-thumb {
	pointer-events: all;
	width: 16px;
	height: 16px;
	background: #fff;
	border: 1px solid #aaa;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.slider::-moz-range-thumb:hover {
	background: var(--highlight-color);
	border-color: var(--highlight-color);
}
.slider-container:has(input:disabled) .slider::-moz-range-thumb:hover {
	background: #fff;
	border-color: #aaa;
	cursor: default;
}
.slider::-webkit-slider-runnable-track {
	background: transparent;
	border: none;
}
.slider::-moz-range-track {
	background: transparent;
	border: none;
}