/* #region Regular form */
form label {
	/* padding-left: 0px !important;   /* used for help text beneath the input */
	/* font-size: 1em; */ /* used for help text beneath the input */
}

:disabled {
	background-color: #F0F0F0 !important;
}

.row {
	margin-bottom: 15px;
	position: relative;
	font-size: 1rem;
}

    .row .row-sizer{
        padding:0 20px;
    }

	.row .lbl {
		color: #4d4d4d;
		float: left;
		font-weight: normal;
		/* margin-left: 10px; */
		text-align: left;
	}

		.row .lbl.for-radiobuttons {
			padding-top: 2px;
		}

	.row .info:not(.warningbox) {
		float: left;
		margin-right: 6px;
		margin-left: 6px;
		min-width: 21px;
	}

	.row .input {
		float: left;
	}

		.row .input.radio {
			float: left;
			max-width: 350px; /* linked to input width */
			min-width: 268px;
		}

		.row .input.small {
			float: left;
			width: 168px;
		}

		.row .input label:not(.labelAfterInput) {
			margin-bottom: 4px;
			padding-left: 23px;
			/* width: 100%; */
			display: block;
		}

.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
	width: calc(100% - 114px) !important;
}

    .phone-with-prefix .ui.dropdown.label > .text {
        width: 90px;
    }

    .ui.labeled.phone-with-prefix.input:not([class*="corner labeled"]) .label:first-child + input {
        width: calc(100% - 149px) !important;
    }

.section .helptext {
	padding-left: 60px;
}

/*.row .input .helptext {*/
.row .helptext,
.section .helptext {
	color: #333;
	font-weight: normal;
	margin-top: 2px;
	font-size: 1rem;
}

.row .input .helptext label {
	padding-left: 0;
	color: #333;
}

@media only screen and (max-width: 768px) {
    .row .row-sizer {
        padding:0 10px;
    }

	.row .input label input[type="radio"], .row .input label input[type="checkbox"] {
		margin-top: 7px;
	}

	.ui.labeled.input:not([class*="corner labeled"]) .label:first-child,
	.ui.selection.dropdown {
		height: 34px !important;
	}

	.ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
		line-height: 0.8em !important;
	}

	.ui.selection.dropdown {
		line-height: 0.3em !important;
	}

	.row .lbl {
		width: calc(100% - 30px);
		padding-left: 0;
	}

	.row .input, .row .input.no-info {
		width: 100% !important;
	}
}

/* #endregion Regular form */

/* #region Questions */
.questions .row .lbl {
	float: none;
	margin-bottom: 5px;
	margin-left: 85px;
	text-align: left;
	width: auto;
	max-width: 470px;
}

.questions .row .input {
	clear: both;
	float: none;
	margin-left: 165px;
}

.questions .row .extra-info {
	float: left;
	margin-left: 85px;
	margin-bottom: 5px;
	text-align: left;
	width: auto;
	color: #a1a1a1;
}

/* #endregion Questions */

/* #region Inputs */
input, select, textarea {
	outline: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

	input[type="text"],
	textarea,
	select,
	input[type="password"],
	input[type="email"],
	input[type="number"],
	input[type='date'],
	input[type='tel'] {
		border: 1px solid #bbbbbb;
		border-radius: 3px;
		clear: none;
		color: #333333;
		display: inline-block;
		font-size: 1rem;
		/*height: 28px;*/
        height: 40px;
		line-height: 18px;
		padding: 0 0 0 8px;
		vertical-align: baseline;
		width: 100%;
        -moz-appearance:textfield;
	}
    
    textarea {
        height: initial;
    }

		input[type='text']:focus,
		textarea:focus,
		select:focus,
		input[type='password']:focus,
		input[type='email']:focus,
		input[type='number']:focus,
		input[type='date']:focus {
			border: 1px solid #3399CC;
			box-shadow: 0 2px 5px 1px #F0F0F0 inset, 0 0 0 #9497A7;
			outline: medium none;
		}

select {
	margin: 0 0 5px 0;
	padding: 3px 0 3px 8px;
}

	select option {
		font-weight: normal;
		display: block;
		white-space: pre;
		min-height: 1.2em;
		padding: 0 2px 1px;
	}

		select option:nth-child(even) {
			background: none repeat scroll 0 0 #E7F5FD;
		}

.ui.selection.dropdown {
	border: 1px solid #bbb !important;
    padding-left: 8px !important;
}

/* Removes the blue outline border of the custom semantic dropdown icon (on area code of tel nr) */
.ui.selection.dropdown i.dropdown {
    outline: none;
}

textarea {
	width: 100%;
	/*font: 12px/1.4 Arial,Helvetica,Verdana,Sans-serif;*/
	padding-top: 2px;
	padding-bottom: 2px;
    min-height: 80px;
}

/* TEXT AREA COUNT */

.positionCount {
    position: relative;
}

.count.textarea {
    font-size: 10px;
    position: absolute;
    z-index: 1;
	color: rgba(191,191,191,.87);
}

.count.textarea.full {
    right: 0;
    bottom: 0;
    padding: 5px;
    text-align: right;
}
.row .input textarea {
	padding-right: 5%;
}

/* END TEXT AREA COUNT */

input[type='checkbox'], input[type='radio'] {
	float: left;
	margin-right: 10px;
	margin-top: 1px;
	margin-left: -23px;
}

input[type='text'].small, input[type='password'].small, input[type='email'].small, input[type='number'].small, input[type='date'].small, input[type='tel'].small {
	width: 100px;
}

select.small {
	width: 109px;
}

    input[type='text'].datepicker.small {
        width: 135px;
    }

input[type='text'].medium, input[type='password'].medium, input[type='email'].medium, input[type='number'].medium, input[type='date'].medium, input[type='tel'].medium {
	width: 118px;
}

input[type='text'].tiny, input[type='password'].tiny, input[type='email'].tiny, input[type='number'].tiny, input[type='date'].tiny, input[type='tel'].tiny {
	width: 50px;
}



.labelAfterInput {
	margin-left: 10px;
	margin-top: 5px;
	float: left;
}

::-ms-clear {
	display: none; /* hide x mark when focus is on input in IE */
}

::-ms-reveal {
	display: none; /* hide x mark when focus is on input in IE */
}

/* #endregion inputs */

/* #region Custom Inputs (Checkboxes / Radio Buttons) */
.row .input.custom-image label:not(.error) {
	padding-left: 0;
	padding-left: 10px;
	margin: 0 0 10px 20px;
	cursor: pointer;
	font-size: 1rem;
	color: #333;
	padding-right: 10px;
}

.checkbox,
.input.custom-image {
	/* Enable absolute positioning of the hidden form controls */
	/*position: relative;*/
	/* Just a bit of space. */
	margin-bottom: 0.5em;
	/*
    Match line-height to the height of the replacement image to ensure it
    doesn't get clipped
    */
	line-height: 22px;
	/*margin-left: 2px;*/
}

	/*
    Position and hide the real checkboxes and radio buttons.
    The inputs are made transparent instead of completely hidden to preserve
    clickability in browsers that don't have clickable labels, like Safari for
    iOS 5 and older.
    */
	.input.custom-image input[type="checkbox"],
	.input.custom-image input[type="radio"] {
		position: absolute;
		/* Match the image dimensions */
		width: 22px;
		height: 22px;
		/* Reset anything that could peek out or interfere with dimensions */
		overflow: hidden;
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		opacity: 0;
		cursor: pointer;
	}

        .input.custom-image input[type="checkbox"][disabled],
        .input.custom-image input[type="radio"][disabled], 
        .input.custom-image input[type="checkbox"][disabled] + label,
        .input.custom-image input[type="radio"][disabled] + label {
            cursor:default;
        }

		/*
        Insert a pseudo element inside each label and give it a background
        image that will become the custom checkbox or radio button.
        Using inline-block lets you use vertical-align to adjust it vertically
        as needed.
        */
		.input.custom-image input[type="radio"]:not([disabled]) + label::before {
			display: inline-block;
			width: 22px;
			height: 22px;
			margin-right: 4px;
			margin-left: -30px;
			background: url(../images/input-radio.png) no-repeat;
			background-size: 100%;
			content: " ";
			vertical-align: top;
			cursor: pointer;
		}

        .input.custom-image input[type="radio"][disabled] + label::before {
			display: inline-block;
			width: 22px;
			height: 22px;
			margin-right: 4px;
			margin-left: -30px;
			background: url(../images/input-radio_gray.png) no-repeat;
			background-size: 100%;
			content: " ";
			vertical-align: top;
			cursor: pointer;
		}

		.input.custom-image input[type="checkbox"]:not([disabled]) + label::before {
			display: inline-block;
			width: 22px;
			height: 22px;
			margin-right: 7px;
			margin-left: -30px;
			background: url(../images/input-checkbox.png) no-repeat;
            background-size:100%;
			content: " ";
			vertical-align: top;
			cursor: pointer;
		}

        .input.custom-image input[type="checkbox"][disabled] + label::before {
			display: inline-block;
			width: 22px;
			height: 22px;
			margin-right: 7px;
			margin-left: -30px;
			background: url(../images/input-checkbox_gray.png) no-repeat;
            background-size:100%;
			content: " ";
			vertical-align: top;
			cursor: pointer;
		}

		/*
        Position the background image differently depending on the state of each
        checkbox and radio button.
        */
		.input.custom-image input[type="radio"]:focus + label::before {
			background-position: 0 0;
		}

		.input.custom-image input[type="radio"]:checked + label::before {
			background-position: 0 -22px;
		}

		.input.custom-image input[type="radio"]:checked:focus + label::before {
			background-position: 0 -22px;
		}

        input.custom-image[type="checkbox"]:focus + label::before {
	        background-position: 0 -44px;
        }

        input.custom-image[type="checkbox"][disabled] + label::before {
	        background-position: 0 -66px;
            cursor: default;
        }

        .input.custom-image input[type="checkbox"]:checked + label::before {
	        background-position: 0 -22px;
        }

        .input.custom-image input[type="checkbox"]:checked:focus + label::before {
	        background-position: 0 -22px;
        }

.special-radio input[type="radio"], .special-checkbox input[type="checkbox"] {
	margin-left: 0;
	margin-right: 0;
}

.special-radio, .special-checkbox {
	padding-left: 6px;
}

/* #endregion Custom Inputs (Checkboxes / Radio Buttons */

/* #region Currency Symbol */
input.currencySymbol {
}

div.currencySymbol {
	/* CSS when using a textual � sign */
	color: black;
	margin-left: 6px;
	margin-top: -28px;
	font-size: 13px;
	position: absolute;
	width: 23px;
	height: 27px;
	border-right: 1px solid #adadad;
	padding: 5px;
	box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
	div.currencySymbol {
		/* CSS when using a textual � sign */
		font-size: 1em;
		margin-top: -27px;
		width: 22px;
		height: 27px;
	}

	input.currencySymbol {
	}

	input[type="text"],
	textarea,
	select,
	input[type="password"],
	input[type="email"],
	input[type="number"],
	input[type='date'],
	input[type='tel'] {
		height: 34px;
	}

    textarea {
        height: initial;
    }

    input[type='text'].small, input[type='password'].small, input[type='email'].small, input[type='number'].small, input[type='date'].small, input[type='tel'].small,
    select.small,
    input[type='text'].medium, input[type='password'].medium, input[type='email'].medium, input[type='number'].medium, input[type='date'].medium, input[type='tel'].medium,
    input[type='text'].tiny, input[type='password'].tiny, input[type='email'].tiny, input[type='number'].tiny, input[type='date'].tiny, input[type='tel'].tiny {
	    width: 100%;
    }
}
/* #endregion Currency Symbol */


/* -------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------- SALESFLOW SPECIFIC ----------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */

/* #region General */
.row .lbl {
	padding-top: 9px;
	margin-right: 0;
	width: calc(300px - 21px);
	font-size: 1rem;
	/* padding-left: 10px; */
}

.row .info:not(.warningbox) {
	margin-top: 7px;
}

.row .info.for-radiobuttons:not(.warningbox) {
	margin-top: 1px;
}

.row .input {
	width: 460px;
	max-width: 460px;
	margin-top: 4px;
	/* margin-right: 10px; */
}

	.row .input.no-info {
		margin-left: 35px !important;
	}

	.row .input.radio {
		margin-top: 11px;
	}

        .row.multi .row-sizer .multi-field {
            float:left;
        }

        .row.multi .row-sizer .multi-field .input {
            width:100px;
        }

            .row.multi .row-sizer .multi-field ~ .multi-field .lbl {
                width: 225px;
                text-align:right;
                padding-right:25px;
            }

            .row.multi .row-sizer > .lbl {
               padding-top:0px;
           }

            .row.multi .row-sizer > .lbl.error {
               padding-top:10px; 
           }

           .row.multi .row-sizer > .input {
               margin-top:0px;
           }

/*
	label = 4 columns - info-icon compensation
	input = 6 columns
*/
@media only screen and (max-width: 992px) {
	.row .lbl {
		width: calc(228px - 21px);
	}

	.row .input, .row .input.no-info {
		width: 352px !important;
	}

        .row.multi .row-sizer .multi-field .input {
            width:100px !important;
        }

            .row.multi .row-sizer .multi-field ~ .multi-field .lbl {
                width: 117px !important;
            }
}

@media only screen and (max-width: 768px) {
    input[type="text"], textarea, select, input[type="password"], input[type="email"], input[type="number"], input[type='date'] {
    }

    .row .lbl {
        text-align: left;
        min-width: 200px;
        margin-left: 0;
        font-size: 1em;
        float: left;
        padding-left: 0;
        width: auto;
        margin-right: 24px;
    }

        .row .lbl label,
        span.mandatory {
            font-size: 1rem;
            color: #333;
        }

    .row .info:not(.warningbox) {
        right: 10px;
        margin-top: 6px;
        margin-right: 0;
        width: auto;
        position: absolute;
    }

    .with-warning.warningbox.info {
        width: 100%;
        margin: -20px 0 0 0;
    }

    .row .input {
        max-width: none;
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
    }

        .row .input.no-info {
            margin-left: 0 !important;
        }

        .row .input, .row .input.no-info {
            width: 100% !important;
        }

            .row .input input, .row .input select {
                font-size: 1em;
            }

            .row .input label {
                float: none;
            }

    .row.multi .row-sizer .multi-field
    {
        width: 45% !important;
        margin-right:10%;
    }

    .row.multi .row-sizer .multi-field ~ .multi-field
    {
        width: 45% !important;
        margin-right:0;
    }

        .row.multi .row-sizer .multi-field .input {
            width:100% !important;
        }

        .row.multi .row-sizer .multi-field .lbl {
            min-width:unset !important;
        }

            .row.multi .row-sizer .multi-field ~ .multi-field .lbl {
                width: auto !important;
                text-align:left;
                padding-right:0;
            }
}
/* #endregion General */


@media only screen and (max-width: 955px) {
	form#frm, #sim .content .container .bottom {
        width: auto !important;
		/*width: 744px !important;*/
	}
}
/*
@media only screen and (max-width: 768px) {
	form#frm, #sim .content .container .bottom {
		width: 480px !important;
	}
}

@media only screen and (max-width: 485px) {
	form#frm, #sim .content .container .bottom {
		width: auto !important;
	}
}
*/
/* hide input[number] spinner arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

span.no-input { /* color: red; */
	display: inline-block;
	padding-top: 6px;
}

span.explanation {
	font-size: 1rem;
	color: #333;
}

@media only screen and (max-width: 768px) {

	/* THANX */
	#sim .content .container .top .confirmation p,
	#sim > div > div.container > div > div.thx-what-now > h2,
	#sim > div > div.container > div > div.thx-what-now > div > div.text {
		padding: 0 !important;
	}

	.footer.buttons {
		/* margin: 15px 10px; */
	} 
}

/*#region Feedback form */
#feedback_form_remarks_container {
    display: none;
}

#FEEDBACK_FORM_REMARKS {
    resize: none; 
    overflow: hidden; 
    height: 74px;
}

.feedback-button:not(:first-child) {
    margin-top: 6px;
}

#feedback_form_succes_message {
    display: none;
}

@media only screen and (max-width: 768px) {
    .feedback-radios {
        width: calc(100% - 47px);
    }
}
/*#endregion Feedback form */