.flowform-input-feedback {
    margin-top: 20px;
}

.flowform-input-validation-error {
	background-color: var(--input-warning-background) !important;
}

.flowform-input-keyerror {
	background-color: var(--input-warning-background) !important;
}

.flowform-input-keyerrorfade {
	background-color: white !important;
}

.flow-progress-complete > .flowform-input-feedback.warning,
.ff-i-error-message {
	opacity:0;
	
	height:0px;
	transition: all 0.5s ease-in;
}

.ff-i-error-message {
	order: 100;
	width: 100%;
}

.flowform-input-feedback.warning,
.form-group.ff-i-error-max .ff-i-error-message-max,
.form-group.ff-i-error-max-warning .ff-i-error-message-max-warning,
.form-group.ff-i-error-min .ff-i-error-message-min,
.form-group.ff-i-error-min-warning .ff-i-error-message-min-warning,
.form-group.ff-i-error-verification .ff-i-error-message-verification,
.form-group.ff-i-error-format .ff-i-error-message-format {
	opacity:1;
	height:20px;
	margin-top:10px;
	margin-bottom:10px;
	color: var(--warning-color);
}

.form-group.ff-i-error-min-warning .ff-i-error-message-min-warning,
.form-group.ff-i-error-max-warning .ff-i-error-message-max-warning {
	color: var(--info-color);
}

/* flowform-input-icons */

.flowform-input-icons {
	display: inline-flex;
	float: right;
}

.flowform-input-icon {
	display: block;
	cursor: pointer;
	margin-left: 3px;
	color: var(--input-icon-background);
	text-align: center;
}

.flowform-box .flowform-input-icon-content {
	top: 0;
	border: 0 none;
	font-size: 13px;
	line-height: 25px;
	font-size: 16px;
	overflow:hidden;
	z-index: 3;
	min-height: 100px;
	max-height: calc(100vh - 325px);
	overflow-y: auto;
}

.flowform-box .flowform-input-icon-content::before {
    padding: 10px;
    overflow: hidden;
    max-height: 100%;
    bottom: 0;
}

.flowform-input-icon-content {
	margin: 0;
	position: absolute;
	width: 100%;
	left: 0;
	overflow:hidden;
	background-color: var(--input-icon-content-background);
	color: var(--neutral-0);
	font-size: 16px;
	line-height: 18px;
	text-align: left;
	white-space: normal;
	padding: 15px 30px;
	opacity: 0;
	box-sizing: border-box;
	z-index: 5;
	box-shadow: 0 0 15px 0 var(--shadow-dark);
	
	margin-left: -100000px;
	transition: opacity 0.2s ease-in, margin-left 0s ease-in 0.2s;
}

.flowform-input-icon-content:before {
	font-family: 'HypothekeIcons';
	color:  var(--neutral-0);
	opacity: 0.1;
	position: absolute;
	right: -25px;
	bottom: -10px;
	width: 150px;
	height: 150px;
	font-size: 150px;
	line-height: 150px;
}

.ff-i-source + .flowform-input-icon-content:before { content: 'v'; }
.ff-i-privacy + .flowform-input-icon-content:before { content: 'o'; }
.ff-i-info + .flowform-input-icon-content:before { content: 'c'; }
.ff-i-warning + .flowform-input-icon-content:before { content: '3'; }

.flowform-input-icon.active .flowform-input-icon-content {
	opacity: 1;
	margin-left: 0px;
	transition: opacity 0.2s ease-in;
}

/* flowform-input-title */

.ff-slim .form-input-title {
	background-color: transparent;
    color: var(--title-color);
}

/* flowform-input-text */

.flowform-input {
	border: 1px solid var(--input-text-border);
	background-color: var(--input-text-background);
	width: 100%;
	padding: 14.5px 10px;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s ease-in;
	text-overflow: ellipsis;
}

textarea.flowform-input {
    line-height: 18px;
    padding: 10px;
}

input.ff-i-text-xs {
	width: 50px;
}

.ff-textarea-autoscale textarea.flowform-input {
	field-sizing: content;
}

.ff-textarea-large textarea.flowform-input {
	height: 400px;
}

.input-group:hover > .flowform-input,
.input-group:focus-within > .flowform-input,
.input-group:hover > .typeahead__container .flowform-input,
.input-group:focus-within > .typeahead__container .flowform-input,
.input-group:hover > .input-group-addon,
.input-group:focus-within > .input-group-addon {
	border-color: var(--input-text-focus-border);
}

.input-group:hover > .ff-input-combo-input > .flowform-input,
.input-group:focus-within > .ff-input-combo-input > .flowform-input,
.input-group:focus-within > .ff-input-combo-input > .typeahead__container .flowform-input,
.input-group:hover > .ff-input-combo-input > .input-group-addon,
.input-group:focus-within > .ff-input-combo-input > .input-group-addon {
	border-color: var(--input-text-focus-border);
}

.flowform-input:hover,
.flowform-input:focus {
	border-color: var(--input-text-focus-border);
	background-color: var(--input-text-focus-background);
}

.input-group {
	display: flex;
}

.input-combo.input-combo-toolbar .choice-group {
	flex-wrap: nowrap;
    flex-direction: row;
    display: flex;
	height: 100%;
}

.input-combo.input-combo-toolbar .ff-buttongroup .btn-group {
	height: 100%;
}

.input-combo.input-combo-toolbar .choice-group .choice {
	border-bottom-style: solid;
}

.input-combo.input-combo-toolbar > * {
	box-shadow: 0 0 15px 0 var(--shadow-dark);
	margin-right: 5px;
}

.input-combo.input-combo-toolbar > :last-child {
	margin-right: 0;
}

.input-combo.input-combo-toolbar  {
	margin-top: 10px;
	margin-bottom: 20px;
}

.input-combo .ff-input-date,
.input-combo .flowform-input {
	flex: 1;
}

.input-group-full {
	width: 100%;
}

.input-group-separated {
	display: block;
}

.flowform-input-group.ff-panel-group,
.ff-panel-group {
	flex-direction: row;
}

.flowform-input-group.ff-panel-group-vertical,
.ff-panel-group-vertical {
	display: flex;
}

.ff-panel-group > .form-group,
.ff-panel-group-vertical > .form-group {
	margin-top: 0;
	margin-bottom: 0;
}

.ff-panel-group-vertical > *,
.ff-panel-group > * {
	flex: 1;
}

.ff-panel-group-vertical > .ff-vertical-content-expander {
	flex: 100%;
}

.ff-panel-group-2-1 > :nth-child(1) { flex: 2; }
.ff-panel-group-2-1 > :nth-child(2) { flex: 1; }

.ff-panel-group-limit-height-350 {
	max-height: calc(100vh - 350px);
}

.panel-group-vertical,
.input-group-vertical {
	flex-direction: column;
}

.input-group-wrapped {
	flex-wrap: wrap;
}

.input-group > .flowform-input,
.input-group > .input-group-addon,
.input-group > .ff-input-combo-input > .flowform-input,
.input-group > .ff-input-combo-input > .input-group-addon {
	border: 1px solid var(--input-text-border);
	border-left-style: none;
	transition: border-color 0.2s ease-in;	
}

.input-group-separated.input-group > .ff-input-combo-input {
	margin-bottom: 7px;
}

.input-group-separated.input-group > .ff-input-combo-input > .flowform-input {
	border-left-style: solid;
    border-bottom-style: solid;
    display: block;
}

.input-group-separated > .typeahead__container {
	margin-top: 10px
}

.input-group-separated > .flowform-input {
	border-left-style: solid;
	margin-top: 10px;
}

.input-group-vertical > .flowform-input,
.input-group-vertical > .input-group-addon,
.input-group-vertical > .typeahead__container .flowform-input,
.input-group-vertical > .ff-input-combo-input > .flowform-input,
.input-group-vertical > .ff-input-combo-input > .typeahead__container .flowform-input,
.input-group-vertical > .ff-input-combo-input > .input-group-addon {
	border-bottom-style: none;
	border-left-style: solid;
}

.panel-group-vertical > .ff-buttongroup,
.panel-group-vertical > .form-input-panel {
	margin-top: 0;
	margin-bottom: 0;
}

.input-group > .flowform-input:first-child,
.input-group > .input-group-addon:first-child,
.input-group > .ff-input-combo-input:first-child > .flowform-input,
.input-group > .ff-input-combo-input:first-child > .typeahead__container .flowform-input,
.input-group > .ff-input-combo-input:first-child > .input-group-addon {
	border-left-style: solid;
}

.input-group-vertical > .flowform-input:last-child,
.input-group-vertical > .input-group-addon:last-child,
.input-group-vertical > .ff-input-combo-input:last-child > .flowform-input,
.input-group-vertical > .ff-input-combo-input:last-child > .typeahead__container .flowform-input,
.input-group-vertical > .ff-input-combo-input:last-child > .input-group-addon {
	border-bottom-style: solid;
}

.input-group-addon {
	line-height: 45px;
	background-color: var(--input-text-addon-background);
	color: var(--input-text-addon-color);
	padding: 0 20px;
	white-space:nowrap;
}

/* typeahead */

.typeahead__result {
	position: relative;
}

.typeahead__hint {
	display: none !important;
}

.typeahead__list {
	display: none;
	position: absolute;
	width: 100%;
	z-index: 1;
	box-shadow: 0 0 15px 0 var(--shadow-dark);
}

.typeahead__item {
	
}

.typeahead__container.result.hint .typeahead__list {
	display: block; 
}

/* flowform-input-choice */
.typeahead__item,
.choice {
	cursor: pointer;
	
	display: block;
	
	background-color: var(--input-choice-background);
	border: 1px solid;
	border-bottom-style: none;
	border-color: var(--input-choice-border);
	color: var(--input-choice-color);
	padding: 13px 40px;
	min-width: 100px;
	text-align: left;
	box-sizing: border-box;
}

.ff-choice-compact .choice {
	padding-left: 13px;
	padding-right: 13px;
}

.typeahead__item:hover,
.choice:hover {
	background-color: var(--input-choice-hover-background);
}

.typeahead__item:hover a {
	color: var(--input-choice-active-color);
}

.typeahead__item:last-child,
.choice:last-child,
.choice:last-of-type {
	border-bottom-style: solid;
}

.typeahead__query {
	position: relative;
}

.typeahead__label-container {
	position: absolute;
	top: 0;
    left: 0;
    padding: 14.5px 10px;
	display: flex;
	flex-wrap: wrap;
}

.typeahead__label::before {
	content: '#';
}

.typeahead__cancel-button::before {
	content: var(--trash-icon-content);
	font-family: var(--icon-font);
	font-size: 14px;
	cursor: pointer;
}

.typeahead__cancel-button {
	margin-left: 7px;
    font-size: 0;
}

.typeahead__label {
	background-color: var(--button-secondary-background);
	color: var(--button-secondary-color);
	border-radius: 50px;
	padding: 7px 20px;
	margin-right: 7px;
	margin-bottom: 7px;
}

.ff-choice-navigation .choice-group,
.ff-choice-inline .choice-group {
	display: flex;
	flex-wrap:wrap;
	
}

.ff-choice-navigation .choice,
.ff-choice-inline .choice {
	flex: 1;
	text-align: center;
	border-bottom-style: solid;	
	margin-right: 2px;
	margin-bottom: 2px;
}

.ff-choice-navigation .choice {
	border: 0 none;
	margin-right: 1px;
	margin-bottom: 1px;
}

.ff-choice-navigation .choice:last-child {
	margin-right: 0;
}

.ff-choice-checkbox {
	padding-left: 30px;
}

.ff-choice-checkbox .choice {
	position: relative;
	min-height: 22px;
	background-color: transparent;
	color: var(--text-color);
	border: 0 none;
	
	padding: 0 10px 0 30px;
	margin-bottom: 10px;
	text-align: left;
	line-height: 22px;
}

.ff-choice-checkbox .choice.choice-active {
	background-color: transparent;
	color: var(--text-color);
}

.ff-checkbox-square {
    width: 22px;
	height: 22px;
	position: relative;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.ff-checkbox-square::before,
.ff-choice-checkbox .choice::before,
.ff-choice-checkbox .choice.choice-active::after {
    display: block;
    content: '';
    width: 20px;
	height: 20px;
	line-height: 20px;
	position: absolute;
	left: 0;
	top: 0;
    font-family: 'HypothekeIcons';
}

.ff-checkbox-square::before,
.ff-choice-checkbox .choice::before {
    border: 1px solid var(--input-choice-color);
}

.ff-choice-checkbox .choice.choice-active::after {
	content: 'Q';
	font-size: 10px;
	text-align: center;
}

.flowform-input-group-inline > .ff-choice-checkbox {
	flex: 1;
	min-width: 250px;
}

.ff-choice-checkbox.flow-progress-issue .choice {
	color: var(--warning-color);
}

.ff-choice-checkbox.flow-progress-issue .flowform-input-feedback.warning {
	display: none
}

.choice.ff-choice-link,
.choice.ff-choice-link.choice-active,
.choice.ff-choice-link:hover {
	border-width: 0;
	color: var(--link-color);
	background-color: var(--box-background);
	padding-top: 30px;
	padding-bottom: 5px;
	border-top-color: var(--input-choice-border);
	border-bottom: 4px solid transparent;
}


.choice.ff-choice-link.choice-active {
	border-bottom-color: var(--secondary-1);
}

.choice + .choice.ff-choice-link {
	border-top-width: 1px;
}

.choice-separate {
	margin-top:10px;
}

.choice-combined-last {
	border-bottom-width:1px;
	border-bottom-style:solid;
}

.typeahead__item.active,
.choice.choice-active {
	background-color: var(--input-choice-active-background);
	color: var(--input-choice-active-color);
	border-color: var(--input-choice-active-border);
}

.choice.choice-toggle::before {
	content: var(--close-icon-content);
    font-family: 'HypothekeIcons';
	font-size: 14px;
	line-height: 14px;
	margin-right: 10px;
	font-weight: bold;
}

.input-combo .choice.choice-toggle {
	margin-left: 7.5px;
	margin-bottom: 10px;
}

.choice.choice-toggle {
	font-size: 14px;
	line-height: 16px;
	border-radius: 20px;
	padding: 5px 20px;
	display: inline-block;
}

.choice.choice-toggle.choice-active::before {
	content: var(--check-icon-content);
}

.choice.choice-toggle.choice-active {
	background-color: transparent;
	color: var(--input-choice-active-border);
}

.form-input-readonly,
.choice-readonly {
	padding: 7.5px;
}

.choice-option-readonly {
	display: inline;
	line-height: 24px;
	font-style: italic;
}

.choice-option-readonly::before {
	content: ',';
	margin-left: -5px;
}

.choice-option-readonly:first-child::before {
	content: '';
	margin-left: 0;
}

.typeahead__item.active a {
	color: var(--input-choice-active-color);
}

.ff-input-combo-input {
	flex: 1;
}

.ff-input-combo-input.ff-ici-choice .choice {
	flex: 1;
	text-align: center;
}

.ff-input-combo-input.ff-ici-choice > div {
	height: 100%;
}

.ff-ici-event {
	flex: none;
}

.ff-ici-event .btn-group {
	height: 100%;
}

.ff-ici-choice {
	width: 100%;
}

/* flowform-image-choice */
.flowform-imagechoice .choice-group {
	
}

.flowform-imagechoice .choice {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 90% -4px;
	text-align: left;
}

@media screen and (max-width : 900px) {
	.typeahead__item,
	.choice {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* flowform-number-input */

.ff-nb-input {
	width: 90px;
}

.ff-nb-input .flowform-input {
	font-size: 28px;
	text-align: center;
	height: 60px;
	line-height: 60px;
}

.ff-nb-input-icon {
	position: relative;
}

.ff-nb-legend {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	z-index: 0;
}

.ff-nb-input-icon .flowform-input {
	padding-right: 40px;
	font-size: 20px;
	line-height: 20px;
	height: 80px;
	padding-bottom: 32px;
	position: relative;	
	background-color: transparent;	
	z-index: 1;
}

.ff-nb-visual .ff-i {
	color: var(--input-choice-active-background);
}

.flowform-input.empty + .ff-nb-legend .ff-nb-visual .ff-i {
	color: var(--input-choice-color);
}

.ff-nb-visual {
	text-align: right;
	font-size: 32px;
	line-height: 32px;
	padding: 10px 10px 0 10px;
}

.ff-nb-legend-label {
	font-size: 14px;
	line-height: 15px;
	text-align: center;
	padding: 0 5px;
}

.flowform-number-button {
	flex: 1;
	margin: 15px;
}

.ff-nb-input:hover .flowform-input {
	border-color: var(--input-choice-active-border);
}

.ff-nb-manipulator {
	display: flex;
}

.ff-nb-m {
	width: 50%;
	box-sizing: border-box;
	border: 1px solid var(--input-choice-border);
	border-top-style: none;
	text-align: center;
	line-height: 33px;
	cursor:pointer;
}

.ff-nb-m:hover {
	background-color: var(--input-choice-hover-background);
}

.ff-nb-m .ff-i {
	
}

.ff-nb-more {
	border-right: 0 none;
}

/* flowform-list */
.flowform-list {
	position: relative;
	padding: 0;
	flex: 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.flowform-list-header.ff-main-action {
	display: flex;
	margin-bottom: 0;
}

.flowform-list-description {
	order: 1;
	flex: 10;
	padding-right: 30px;
}

.flowform-list-items .btn-group {
	visibility: hidden;
	pointer-events: all;
}

.ff-list-left-aligned .flowform-list .flowform-list-items,
.ff-list-always-show-buttons .flowform-list .flowform-list-items {
	padding-left: 0;
}

.ff-list-left-aligned .flowform-list .btn-group,
.ff-list-always-show-buttons .flowform-list .btn-group {
	order: 0;
}

.ff-list-always-show-buttons .flowform-list .btn-group {
	visibility: visible;
}

.flowform-list-items .btn-group {
	margin: 0 15px;
	order: 2;
}

@media screen and (max-width : 400px) {
	
	.flowform-list-item {
		min-height: 55px;
	}

	.flowform-list-items .btn-group {
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

.flowform-list-footer {
	padding: 10px 20px;
}

.flowform-list-value {
	display: block;
	font-weight: bold;
	order: 3;
	text-align: right;
}

.flowform-list-total b {
	flex: 1;
}

.flowform-list-total > span {
	color: var(--font-color-highlight);
	font-weight: bold;
	display: block;
    text-align: right;
}

.flowform-list-total {
	text-align: left;
	margin-top: -10px;
	line-height: 24px;
	padding-top: 10px;
	border-top: 1px dotted var(--title-color);
	display: flex;
}

.flowform-list-items + .flowform-list-items,
.flowform-list-footer + .flowform-list-items {
	margin-top: 40px;
}

.flowform-list-total + .flowform-list-total {
	border-top: 0 none;
}

.ff-l-detail {
	font-size: 14px;
}

.ff-l-detail + .ff-l-detail {
	margin-top: 5px;
}

.flowform-list-no-items {
	flex: 100%;
}

.flowform-list-items {
	list-style: none;
	margin: 0;
	padding: 10px 10px;
}

.flowform-list-item {	
	border: 1px solid transparent;
	padding: 7px 10px;
	display: flex;
	position: relative;
}

.flowform-list-item.active,
.flowform-list-item:hover {
	background-color: var(--list-item-hover-background);
	border-color: var(--list-item-hover-background);
	box-shadow: 0 3px 5px 0 var(--list-item-hover-shadow);
}

.flowform-list-item.active .btn-group,
.flowform-list-item:hover .btn-group {
	visibility: visible;
	pointer-events: all;
}

.flowform-list-item.flow-progress:before {
	display: inline-block;
	content: var(--warning-icon-content);
	width: 30px;
	font-family: 'HypothekeIcons';
	color: var(--warning-color);
	order: 3;
}

.flow-warning i {
	color: var(--warning-color);
}

.flowform-list li.flow-progress-complete:before {
	display: none;
}

/* Inputgroup */
.flowform-input-group {
    display: flex;
    flex-direction: column;
}

.flowform-input-group-inline {
	flex-direction: row;
	flex-wrap: wrap;
}

.flowform-input-group-inline > .flowform-nested,
.flowform-input-group-inline > .form-group {
	flex: 1;
}

.ff-i-group-full {
	flex: 1;
} 

.flowform-input-group .ff-info-box.ff-design-icon-box {
    height: 100%;
    position: relative;
}

/* flowform-rating */
.ff-i-rating {
	display: flex;
}

.ff-i-rating-star {
	flex: 1;
	width: 25px;
	height: 25px;
	margin: 0 20px;
	cursor: pointer;
}

.ff-i-rating-star path {
	transition: fill 0.2s ease-in;	
	fill: var(--input-range-background);
}

.ff-i-rating-star.before-active path,
.ff-i-rating-star.active path {
	fill: var(--input-range-active-background);
}

/* flowform-range-input */

.ff-i-range-max {
	text-align: right;
	font-weight: bold;
}

.ff-i-range-value {
	text-align: center;
	color: var(--input-range-active-background);
	font-weight: bold;
}


.ff-i-range-options {
	display:flex;
	margin-top: 20px;
}

.ff-i-range-markers {
	display: flex;
	margin-top: 30px;
	margin-left: 20px;
	margin-right: -40px;
}

.ff-i-range-marker:last-child {
	border: 0;
	padding: 2px 0;
	background-color: transparent;
}

.ff-i-range-marker {
	flex: 1;
	border-color: var(--input-range-background);
	border-width: 2.5px 0;
	border-style: solid;
	height: 0;
	font-size: 0;
	background-color: var(--input-range-background);
}

.ff-i-range-markers.enabled .ff-i-range-marker-bullet {
	cursor: pointer;
}

.ff-i-range-markers.enabled .ff-i-range-marker-bullet:hover {
	box-shadow: 0 0 5px var(--shadow-dark);
	border-color: var(--input-range-active-background);
}

.ff-i-range-marker-bullet {
	width: 10px;
	height: 10px;
	margin-top: -5px;
	margin-left: -5px;
	border: 5px solid var(--input-range-background);
	
	border-radius: 50%;
	box-sizing: border-box;
	transition: all 0.3s ease-out;
}

.ff-i-range-option {
	text-align: center;
	font-size: 10px;
	line-height: 20px;
	flex: 1;
	position: relative;
	white-space: nowrap;
	transition: all 0.2s ease-out;
}

.ff-i-range-marker-bullet.active {
	box-shadow: 0 0 5px var(--shadow-dark);
	border-color: var(--input-range-active-background);
	width: 20px;
	height: 20px;
	margin-top: -10px;
	margin-left: -10px;
	border-width: 10px;
}

.ff-i-range-option.active {
	font-weight: bold;
	display: block;
	font-size: inherit;
	color: var(--input-range-active-background);
}

.ff-slider {
	-webkit-appearance: none;
	pointer-events: none;
	margin: 5px 0;
	padding: 0;
	width: 100%;
}

.ff-slider:focus {
  outline: none;
}

.ff-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  background: var(--input-text-background);
  border: 1px solid var(--input-text-border);
}

.ff-slider:focus::-webkit-slider-runnable-track {
  background: var(--input-text-background);
}

.ff-slider::-moz-range-track {
	width: 100%;
	height: 20px;
	cursor: pointer;
	background: var(--input-text-background);
	border: 1px solid var(--input-text-border);
}

.ff-slider::-ms-track {
	width: 100%;
	height: 20px;
	cursor: pointer;
	background-color: transparent;
	border-color: transparent;
	color: transparent;
}

.ff-slider::-ms-fill-lower {
	background-color: var(--input-text-background);
	border: 1px solid var(--input-text-border);
}

.ff-slider::-ms-fill-upper {
	background-color: var(--input-text-background);
	border: 1px solid var(--input-text-border);
}

.ff-slider:focus::-ms-fill-lower {
	background-color: var(--input-text-background);
}

.ff-slider:focus::-ms-fill-upper {
	background-color: var(--input-text-background);
}

.ff-slider::-webkit-slider-thumb {
	pointer-events: all;
	
	background-image: url('/img/slider-handle-white.svg');
	background-color: var(--input-slider-handle-background);
	height: 27px;
	width: 27px;
	border: 0px none;
	background-size: 25px 25px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50px;
	cursor: pointer;
	
	-webkit-appearance: none;
	margin-top: -3px;
}

.ff-slider::-moz-range-thumb {
	pointer-events: all;
	
	background-image: url('/img/slider-handle-white.svg');
	background-color: var(--input-slider-handle-background);
	height: 27px;
	width: 27px;
	border: 0px none;
	background-size: 25px 25px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50px;
	cursor: pointer;
}

.ff-slider::-ms-thumb {
	pointer-events: all;
	
	background-image: url('/img/slider-handle-white.svg');
	background-color: var(--input-slider-handle-background);
	height: 27px;
	width: 27px;
	border: 0px none;
	background-size: 25px 25px;
	background-position: center;
	border-radius: 50px;
	cursor: pointer;
}

.ff-slider::-moz-focus-outer {
    border: 0;
}

.ff-progress-slider .ff-slider::-moz-range-progress {
	transition: background 0.2s ease-in;
	background: var(--input-slider-progress-background);
	height: 25px;
}

.ff-progress-slider.ff-slider-warning .ff-slider::-moz-range-progress {
	background: var(--input-slider-warning-background);
}

.ff-progress-slider.flow-progress-complete .ff-slider::-moz-range-progress {
	background: var(--input-slider-progress-complete-background);
}

.ff-progress-slider .ff-slider::-ms-fill-lower {
	background: var(--input-slider-progress-background);
	height: 25px;
}

.ff-progress-slider .ff-slider::-moz-range-track {
	background: var(--input-slider-track-background);
	height: 25px;
	border: 0 none;
}

.ff-progress-slider .ff-slider::-ms-track {
	background: var(--input-slider-track-background);
	height: 25px;
	border: 0 none;
}

.ff-progress-slider .ff-slider {
	-webkit-appearance: none;
	overflow: hidden;
}

.ff-progress-slider .ff-slider::-webkit-slider-runnable-track {
	background: var(--input-slider-track-background);
	height: 25px;
	border: 0 none;
}

.ff-progress-slider .ff-slider::-moz-range-thumb {
	background-color: var(--input-slider-handle-background);
	background-size: 17px;
	background-repeat: no-repeat;
	height: 25px;
	width: 9px;
	border-radius: 0;
}

.ff-progress-slider .ff-slider::-webkit-slider-thumb {
	background-color: var(--input-slider-handle-background);
	background-size: 17px;
	background-repeat: no-repeat;
	height: 25px;
	width: 9px;
	border-radius: 0;
	margin-top: 0;
	
    -webkit-appearance: none;
	box-shadow: -1000px 0 0 1000px var(--input-slider-progress-background);
}

.ff-progress-slider.ff-slider-warning .ff-slider::-webkit-slider-thumb {
	box-shadow: -1000px 0 0 1000px var(--input-slider-warning-background);
}

.ff-progress-slider.flow-progress-complete .ff-slider::-webkit-slider-thumb {
	box-shadow: -1000px 0 0 1000px var(--input-slider-progress-complete-background);
}

.ff-progress-slider .ff-slider::-ms-thumb {
	background-color: var(--input-slider-handle-background);
	background-size: 17px;
	background-repeat: no-repeat;
	height: 25px;
	width: 9px;
	border-radius: 0;
}

.ff-progress-slider.ff-slider-disabled .ff-slider::-moz-range-thumb {
	width: 0;
	height: 0;
}

.ff-progress-slider.ff-slider-disabled .ff-slider::-webkit-slider-thumb {
	width: 0;
	height: 0;
}

.ff-progress-slider.ff-slider-disabled .ff-slider::-ms-thumb {
	width: 0;
	height: 0;
}

.ff-print-preview .ff-progress-slider .ff-slider {
	display: none;
}

.ff-minmax-frame {
	box-sizing: border-box;
	width: 100%;
	margin-top: 2px;
	padding-left: 7px;
	padding-right: 7px;
	height: 27px;
	background: var(--input-text-background);
	border: 1px solid var(--input-text-border);	
}

.ff-minmax-slider {
	position: relative;
}

.ff-minmax-handle {
	position: absolute;
	top: 0;
	width: 9px;
	height: 25px;
	margin-right: -7px;
	margin-left: -7px;
	cursor: pointer;
	background-image: url('/img/slider-handle-white.svg');
	background-repeat: no-repeat;
	background-size: 17px;
	background-color: var(--input-slider-handle-background);
	background-position: center;
	transition: all 0.5s ease-in;
}

.ff-minmax-range {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 100%;
	cursor: pointer;	
	background-color: var(--input-slider-progress-background);
	transition: all 0.5s ease-in;
}

.ff-minmax-slider.initialized .ff-minmax-handle,
.ff-minmax-slider.initialized .ff-minmax-range {
	transition: none;
}

.ff-minmax-handle.min {
	left: 0;
}

.ff-minmax-handle.max {
	left: 100%;
}

.ff-ipgq-wrapper {
	position: relative;
	width: 100%;
}

.ff-ipgq-wrapper input {
	padding-bottom: 20px;
	font-family: monospace;
}

.ff-ipg-quality {
    border-top: 0;
    background: var(--box-progress-none);
    box-sizing: border-box;
    border-radius: 5px;
    position: absolute;
    bottom: 3px;
	transition: background 0.4s ease-in;
    font-size: 10px;
	line-height: 15px;
	text-align: center;
	color: transparent;
	
    width: 32%;
}

.ff-ipgq-wrapper.weak .ff-ipgq-weak {
	background: var(--input-password-weak);
}

.ff-ipgq-wrapper.almost .ff-ipgq-weak,
.ff-ipgq-wrapper.almost .ff-ipgq-almost {
    background: var(--input-password-almost);
}

.ff-ipgq-wrapper.good .ff-ipgq-weak,
.ff-ipgq-wrapper.good .ff-ipgq-almost,
.ff-ipgq-wrapper.good .ff-ipgq-good {
	background: var(--input-password-good);
}

.ff-ipgq-weak	{ left: 1%; }
.ff-ipgq-almost	{ left: 34%; }
.ff-ipgq-good	{ left: 67%; }

.ff-ipgq-wrapper.weak .ff-ipgq-weak		{ color: var(--button-primary-color); }
.ff-ipgq-wrapper.almost .ff-ipgq-almost	{ color: var(--button-primary-color); }
.ff-ipgq-wrapper.good .ff-ipgq-good		{ color: var(--button-primary-color); }


.ff-input-document-viewer-image {
	max-height: calc(100vh - 400px);
}

.ff-input-document-viewer-pdf {
	min-height: min(800px,calc(100vh - 400px));
	border-radius: 10px 0 0 0;
}

.ff-i-swisstopo-map {
	border: 0 none;
	width: 100%;
	height: 300px;
}

.ff-input-image-editor {
	height: calc(100vh - 400px);
	min-height: 300px;
	display: flex;
	flex-direction: row;
}

.ff-iie-toolbar {
	display: flex;
	flex-direction: column;
	min-width: 250px;
}

.form-group.ff-iie-toolbar {
	margin-right: 7.5px;
}

.ff-iie-toolbar .ff-input-help {
	margin-right: 10px;
	line-height: 30px;
}

.ff-iie-toolbar .ff-compact-slider {
	padding: 10px;
}

.ff-iie-toolbar .btn-group {
	margin-top: 30px;
}

.ff-iie-toolbar .form-group.ff-compact-slider {
	flex-direction: column;
	padding: 0;
	margin-bottom: 10px;
	margin-right: 0;
}

.ff-iie-content {
	max-height: calc(100vh - 450px);
	overflow: auto;
	flex: 1;
}

.ff-iie-image-wrapper {
	position: relative;
	height: 100%;
}

.ff-iie-cropper {
	position: absolute;
	top: 0;
    width: 100%;
    height: 100%;

	--ff-iie-cropper-handle-height: 20px;
	--ff-iie-cropper-handle-width: 10px;
} 

.ff-iie-cropper-shadow {
	position: absolute;

	opacity: 0.5;
	background-color: black;
}

.ff-iie-cropper-area {
	position: absolute;

	border: 1px solid black;
	box-sizing: border-box;

	cursor: move;
}

.ff-iie-cropper-handle {
	position: absolute;
	border: 1px solid black;
	background-color: rgba(255,255,255,0.5);
	transform: translate(-50%,-50%);
	box-sizing: border-box;
}

.ff-iie-cropper-handle-top,
.ff-iie-cropper-handle-bottom {
	width: var(--ff-iie-cropper-handle-height);
	height: var(--ff-iie-cropper-handle-width);

	left: 50%;
	cursor: ns-resize;
}

.ff-iie-cropper-handle-top {
	top: 0;
	transform: translate(-50%,calc( var(--ff-iie-cropper-handle-width) * -1 ));
}

.ff-iie-cropper-handle-bottom {
	bottom: 0;
	transform: translate(-50%,var(--ff-iie-cropper-handle-width));
}

.ff-iie-cropper-handle-right,
.ff-iie-cropper-handle-left {
	width: var(--ff-iie-cropper-handle-width);
	height: var(--ff-iie-cropper-handle-height);
	top: 50%;

	cursor: ew-resize;
}

.ff-iie-cropper-handle-left {
	left: 0;
	transform: translate(calc( var(--ff-iie-cropper-handle-width) * -1 ),-50%);
}

.ff-iie-cropper-handle-right {
	right: 0;
	transform: translate(var(--ff-iie-cropper-handle-width),-50%);
}

.ff-iie-image {
	display: block;
	position: absolute;
}

.ff-iie-pdf-pages {
	display: flex;
	flex-direction: row;
	max-width: calc(100vw - 100px);
}

.ff-iie-pdf-page-box {
	position: relative;
	display: flex;
	flex-direction: row;
}

.ff-iie-pdf-page {
	min-height: 297px;
	min-width: 210px;
	margin: auto;
	background-color: white;
	box-shadow: 2px 2px 5px 0px gray;
}

.ff-iie-pdf-page-box.landscape .ff-iie-pdf-page {
	min-width: 297px;
	min-height: 210px;
}

.ff-iie-pdf-page-box .ff-dropzone-line {
	min-height: 297px;
}

.ff-photosort-name,
.ff-iie-pdf-page-nr {
	position: absolute;
    bottom: 0;
    text-align: center;
    left: calc(50%);
    z-index: 2;
    font-size: 12px;
    line-height: 14px;
    border-radius: 10px;
    width: 40px;
    background: white;
    padding: 2px;
    transform: translate(-50%,50%);
    box-shadow: 0px 2px 5px 0px gray;
}

.ff-iie-pdf-page-nr {
    margin: 10px;
}

.ff-iie-pdf-page-box .btn-group {
	position: absolute;
	top: 0;
	right: 0;
	margin: 10px;

	z-index: 1;
}

.ff-iie-pdf-page-box .btn-group .btn {
	visibility: hidden;
}

.ff-iie-pdf-page-box.removed canvas {
	opacity: 0.2;
}

.ff-iie-pdf-page-box.removed .btn-group .btn[data-name=remove],
.ff-iie-pdf-page-box.rotated .btn-group .btn[data-name=rotate],
.ff-iie-pdf-page-box:hover .btn-group .btn {
	visibility: visible;
}

.ff-iie-pdf-page-box.ff-dropzone-end .ff-iie-pdf-page-nr,
.ff-iie-pdf-page-box.ff-dropzone-end .btn-group,
.ff-iie-pdf-page-box.ff-dropzone-end .ff-iie-pdf-page {
	display: none;
}

.ff-dropzone-end .ff-dropzone-line {
	display: none;
}

.ff-photosort-content {
	display: flex;
	flex-direction: row;
}

.ff-photosort-group {
	display: flex;
	flex-direction: column;
	min-height: 150px;
	min-width: 150px;
}

.ff-photosort-group legend {
	font-size: small;
}

.ff-photosort-box {
	position: relative;
	display: flex;
	flex-direction: column;

	margin-bottom: 10px;
}

.ff-photosort-box img {
	width: 150px;
	max-width: 150px;
}

.ff-photosort-name {
	font-size: 10px;
	line-height: 12px;
	white-space: nowrap;
	padding: 5px 10px;
	width: 120px;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ff-photosort-description {
	font-size: 12px;
	line-height: 14px;
	margin-bottom: 10px;
}

.ff-dropzone {
	box-sizing: border-box;
	border-color: var(--dropzone-color);
}

.ff-dropzone-horizontal .ff-dropzone {
	margin: 0 5px;
}

.ff-dropzone-vertical .ff-dropzone {
	margin: 5px 0;
}

.ff-dropzone-end .ff-dropzone,
.ff-dropzone-line {
	border: 1px solid transparent;
	box-sizing: border-box;
}

.ff-dropzone-horizontal .ff-dropzone-line {
	width: 15px;
	height: 100%;
}

.ff-dropzone-vertical .ff-dropzone-line {
	width: 100%;
	height: 15px;
}

.dragging-enabled {
	--dropzone-color: var(--neutral-4);
	--dropzone-opacity: 1;
}

.dropping-enabled {
	--dropzone-color: var(--neutral-7);
	--dropzone-opacity: 1;
}

.dragging-enabled .drop-disabled,
.dragging-enabled .dragging {
	--dropzone-color: transparent;
}

.dragging-enabled .ff-dropzone-end .ff-dropzone,
.dragging-enabled .ff-dropzone-line {
	opacity: var(--dropzone-opacity);
	border: 1px solid var(--dropzone-color);
	background-image: repeating-linear-gradient(-45deg, 
      transparent 0 10px, 
      var(--dropzone-color) 10px 20px);
}

.ff-dropzone-end {
	flex: 5;
}

.ff-dropzone-end .ff-dropzone {
	width: 100%;
	height: 100%;

	margin: 0;
}

.dragging-enabled .ff-dropzone-end.drop-disabled .ff-dropzone {
	border: 0 none;
	background-image: none;
}

.ff-dropzone-horizontal .ff-dropzone-end .ff-dropzone {
	margin-left: 35px;
	min-height: 112px;
}

.ff-dropzone-vertical .ff-dropzone-end .ff-dropzone {
	margin-top: 0px;
	min-height: 150px;
}

.form-group.ff-compact-slider {
	display: flex;
	margin: 1px 0;
	margin-right: 10px;
	padding-top: 30px;
	padding-bottom: 10px;
	z-index: auto;
}

.ff-print-preview .form-group.ff-compact-slider {
	display: block;
	padding-top: 5px;
}

.ff-compact-slider .ff-input-label {
	position: absolute;
	top: 5px;
	left: 0;
	width: 100%;
	margin: 0;
}

.flowform-box .ff-compact-slider .ff-input-label {
	margin: 0;
}

.ff-print-preview .ff-compact-slider .ff-input-label {
	position: static;
	width: auto;
}

.ff-compact-slider .ff-slider {
	margin-right: 10px;
	/* width: 33.333%; */
	order: 1;
}

.ff-compact-slider .ff-inline-help {
	font-size: 12px;
	margin: 0;
	min-width: 110px;
	order: 2;
	
    display: flex;
    flex-direction: column;
	justify-content: center;
}

.flowform-box .ff-compact-slider .ff-inline-help {
	margin: 0;
}

.ff-compact-slider > .flowform-input {
	order: 2;
}

.ff-compact-slider .ff-inline-help + .input-group {
	min-width: 140px;
	order: 3;
}

.ff-compact-slider .input-group-addon {
	order: 2;
	background-color: transparent;
	padding: 2px 10px;
	padding-left: 0;
	line-height: 29px;
	font-weight: bold;
}

.ff-compact-slider .input-group > .input-group-addon:first-child {
	border-left-style: none;
}

.ff-compact-slider .flowform-input {
	padding: 2px 10px;
	border-left-style: solid;
	border-right-style: none;
	text-align: right;
	font-weight: bold;
}

.ff-print-preview .ff-compact-slider .input-group-addon,
.ff-print-preview .ff-compact-slider .flowform-input {
	line-height: 1.2;
	border: 0 none;
	border-bottom: 1px solid var(--input-text-border);
	margin-top: -20px;
	color: var(--input-text-color);
	background-color: transparent;
}