::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: var(--comment-color);
	vertical-align: super;
}

::-moz-placeholder { /* Firefox 19+ */
	color: var(--comment-color);
	font-size: 14px;
}

:-ms-input-placeholder { /* IE 10+ */
	color: var(--comment-color);
	vertical-align: super;
}

.nested-subprocess {
	position: fixed;
	left: 50%;
	top: 0;
	max-width: 480px;
	width: 100%;
	transform: translateX(-50%);
	background-color: var(--form-background);
	max-height: 100vh;
	
	/* Firefox looks nicer this way */
	overflow-y: scroll;
	scrollbar-width: thin;
	scrollbar-color: var(--form-scrollbar-color) var(--form-background);
	
	z-index: 10;
}

.nested-subprocess::-webkit-scrollbar {
    background: var(--form-background);
    width: 5px;
}

.nested-subprocess::-webkit-scrollbar-thumb {
    background-color: var(--form-scrollbar-color);
}

.nested-subprocess.modal-open {
	min-height: 100vh;
}

.ff-slim-preview.ff-slim,
.ff-slim {
	max-width: 480px;
	padding: 20px;
	margin: auto;
	background-color: var(--form-background);
	box-sizing: border-box;
	/* iPhone X will not allow scrolling to the bottom of the form */
	padding-bottom: 100px; /* iPhoneX issue */
}

.ff-slim-preview.ff-slim {
    margin: auto !important;
    margin-top: 200px !important;
	
    box-shadow: 0 0 50px 50px var(--form-background-layer);
}

.nested-subprocess.ff-nsp-wide,
.nested-subprocess.ff-nsp-wide .ff-slim {
	max-width: 1300px;
}

.nested-subprocess.nested-subprocess-fullscreen.nested-subprocess,
.nested-subprocess.nested-subprocess-fullscreen.nested-subprocess .ff-slim {
	max-width: none;
	height: 100%;
}

.flowform-close {
	order: 3;
	margin-top: 10px;
	flex: 40px;
	justify-content: right;
	text-align: right;
	display: flex;
}

.flowform-close .btn {
	text-align: center;
	padding: 0;
	color: var(--form-button-color);
	border-radius: 50%;	
	line-height: 40px;
	font-size: 18px;	
	width: 40px;
	min-width: 40px;
	height: 40px;
	background-color: var(--form-button-background);
	margin-left: 10px;
}

.flowform-close .btn:hover {
	background-color: var(--form-button-hover-background);
}

.flowform-close .ff-i:before {
	line-height: 40px;
}

.nested-subprocess-background {
	position: fixed;
	z-index: 6;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--form-background-layer);	
	opacity: 0.9;
}

.nested-subprocess .nested-subprocess-background {
	position: absolute;
	width: 100%;
	height: 1000%;
}

.ff-slim .ff-header {
	display: flex;
}

.ff-slim .ff-header .flowform-subtitle {
	flex: 1;
    padding-left: 30px;
    padding-top: 6px;
    margin-bottom: 30px;
}

.ff-slim .ff-header .flowform-close {
	width: 40px;
	flex: none;
}

.ff-slim .flowform-head.ff-main {
	margin: 0;
}

.ff-slim .flowform-head.ff-main .ff-header  {
	background-position: center;
	max-width: 480px;
	padding-left: 0;
}

.ff-slim .flowform-head.ff-main .ff-header.ff-header-with-items {
	background-position: 30px;
}

.ff-slim .flowform-box {
    margin-left: 0;
    margin-right: 0;
}

.ff-slim .ff-i-document-list-light::before {
	display: none;
}

.ff-slim .ff-main > .flow {
	width: auto;
	margin: auto;
	height: auto;
}

.ff-slim .ff-header-title {
	padding: 20px 30px 40px 30px;
	line-height: 1;
	margin: 0;
	width: 100%;
} 

.ff-slim .form-input-panel h3,
.flowform-box .ff-slim .ff-choice-inline .ff-input-label,
.flowform-box .ff-slim .ff-input-label,
.ff-slim .ff-input-label {
	font-size: 18px;
	color: var(--text-color);
	margin: 5px 0 5px 10px;
	display: block;
}

.flowform-box .ff-slim .form-input-title p {
	margin: 5px 0 5px 10px;
}

.ff-slim .form-input-panel.warning {
	background-color: var(--box-warning-background);
}

.ff-slim .form-input-title h3 {
	margin-top: 35px;
	margin-bottom: 13px;
}

.ff-slim .form-input-title h3,
.ff-slim .form-input-title .ff-inline-help {
	margin-left: 0;
}

.ff-slim .form-input-panel b,
.ff-slim .form-input-panel em {
	color: var(--text-color);
	font-style: normal;
	font-weight: normal;
}

.ff-slim .form-input-panel h3 {
	margin-top: 13px;
}

.flowform-box .ff-slim .ff-inline-help,
.ff-slim .ff-inline-help {
	margin: 5px 0 22px 10px;
	font-size: 14px;
}

.flowform-box .ff-slim .ff-choice-inline .ff-input-label,
.flowform-box .ff-slim .ff-input-label,
.ff-slim .ff-input-label {
	margin-bottom: 22px;
}

.flowform-box .ff-slim .ff-input-label + .ff-inline-help,
.ff-input-label + .ff-inline-help {
	margin-top: -17px;
}

.ff-slim .form-input-title h3 + .ff-inline-help {
	margin-top: -8px;
}

.ff-slim .flowform-input-group.form-input-panel {
	background-color: var(--input-background);
	padding: 25px 30px;
}

.ff-slim .form-input-title.form-input-panel,
.ff-slim .form-group {
	background-color: var(--input-background);
	color: var(--font-color);
	padding: 25px 30px;
	margin: 7px 0;
}

.ff-slim .form-group.form-group-merged {
	margin-top: -25px;
    padding-top: 10px;
}

.ff-slim .ff-toolbar {
	width: calc(100% - 80px);
	padding: 0;
	margin: 0;
	background-color: transparent;
}

.btn.btn-slim-toolbar {
	padding: 0;
	margin: 10px 20px 40px 0;
	border-radius: 50%;
	font-size: 20px;
	line-height: 40px;
	width: 40px;
	height: 40px;
	background-color: var(--toolbar-icon-background);
}

.btn.btn-slim-toolbar:hover,
.btn.btn-slim-toolbar.active {
	background-color: var(--toolbar-icon-hover-background);
}

.btn-slim-toolbar span {
	display: none;
}

.ff-slim .form-group {
	position: relative;
}

.ff-slim .form-group.flow-progress:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	transition: all 0.3s ease-out;
	
	background-color: var(--form-background);
}

.ff-slim .form-group.flow-progress.flow-progress-issue:after {
	background-color: var(--form-progress-issue);
}

.ff-slim .form-group.flow-progress.flow-progress-complete:after {
	background-color: var(--form-progress-complete);
}

.ff-slim .form-group.buttongroup-final {
	background-color: transparent;
	padding: 0;
	margin-top: 20px;
	margin-bottom: 50px;
}

.ff-slim .form-group.buttongroup-final p {
    position: absolute;
    top: 100%;
    text-align: center;
    width: 100%;
    margin-top: 5px;
	font-size: 14px;
    color: var(--title-color);
}

.nested-subprocess-fullscreen .ff-slim .form-group.buttongroup-final {
    float: right;
}