/* ======================================

		Form Creator Stylesheet
		Updated: 12/17/14 LD

====================================== */


#hiddenModalForm {
	display: none;
}
.ctaButton {
	cursor: pointer;
}

#hiddenModalForm h1,
#hiddenModalForm h2,
#hiddenModalForm h3,
#hiddenModalForm p,
#hiddenModalForm li,
#hiddenModalForm input,
#hiddenModalForm .set,
#hiddenModalForm .set span,
#hiddenModalForm .radioSet span {
	font-family: 'Avenir LT W05_35 Light', Arial, Helvetica, sans-serif;
}

/* General Fixes */

.ui-widget-overlay {
	z-index: 10000;
}

.ui-dialog {
	background: #FBFBFB;
	padding: 0 !important;
}

.ui-dialog.ui-front {
	z-index: 10020 !important;
}

.ui-dialog .ui-dialog-content {
	background: #FBFBFB;
	padding: 0 !important
}
.ui-dialog-titlebar  {
	display: none;
}


/* Updates for Form Renderer */
#pnlContainer {
/*
	margin-left: 30px;
	width: 90%;
*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 35px;
	width: 100%;
	*width: 90%;
}
#pnlphcolumn1 {
	float: left;
	margin: 0 2% 0 0;
	width: 48%;
	*width: expression(Math.floor(0.48 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
}
#pnlphcolumn2 {
	float: left;
	margin: 0 0 0 2%;
	width: 48%;
	*width: expression(Math.floor(0.48 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
}


/*
#1of2 {}
#2of2 {}
*/

/* Error Message */
.errorMessage {
	color: #da500f;
	display: none;
	font-size: 14px;
	margin: 15px 0 0 32px;
}
.highlight .label {
	color: #da500f !important;
}
.highlight input,
.highlight select {
	border: 1px solid #da500f !important;
}

input:focus,
select:focus {
	outline: 1px solid #007AC2;
}


/* Header Section */
.header {
	background: #FFF;
	border-bottom: 1px solid #DEDEDE;
	height: 50px;
	margin-bottom: 10px;
	padding: 10px;
}
.header h2 {
	color: #777;
	font-size: 35px;
	margin: 5px 0 0 20px;
}
.header a {
	font-size: 25px;
}

/* Close Modal */
#closeDialog,
.closeDialog {
	color: #777;
	cursor: pointer;
	float: right;
	font-family: 'Avenir LT W05_35 Light', Arial, Helvetica, sans-serif;
	font-size: 30px;
	top: -35px;
	text-decoration: none;
	right: 10px;
	position: relative;
}
#closeDialog:hover {}


table tr td {
	vertical-align: top;
}
.set {
	margin: 10px 10px 0 0;
}
.set span {
	color: #777;
	font-size: 14px;
}
.set input[type=text],
.set textarea,
.set select {
	border: 1px solid #DEDEDE;
	color: #777;
	font-size: 14px;
	padding: 2px;
	/* width: 350px; */
	width: 100%;
}
.optional {
	margin-left: 10px;
}
textarea {
	margin-top: 15px;
	min-height: 80px;
	width: 100%;
}
/* ZIP CODE field */
#main_1_content_1_txtZip {
	width: 120px;
}
.fieldContainer {
	/*margin: 0 auto;*/
	margin: 0 32px;
}

.radioSet {
	color: #777;
	font-size: 14px;
	margin-top: 15px;
}
.radioSet span {
	color: #777;
	font-size: 14px;
	margin-right: 36px;
}

.label {}

/* Page Bottom Form Container */
.bottomButtons,
.pageBottom {
	position: relative;
	right: 0;
	bottom: 0;
	margin: 10px 0;
	min-height: 30px;
	width: 100%;
}
/*
.pageBottom {
	min-height: 50px;
}
*/

/* Buttons */
.paging {
	color: #777777;
	position: absolute;
	top: 6px;
	right: 100px;
}
.buttonBlue,
.buttonBlue:hover,
.buttonBlue:active,
.buttonBlue:focus,
.buttonBlue:focus:hover,
.buttonGray,
.buttonGray:hover,
.buttonGray:active,
.buttonGray:focus,
.buttonGray:focus:hover {
	background-color: #007AC2 !important;
	border: 0 !important;
	color: #FFF;
	cursor: pointer;
	margin: 0 15px 15px 0;
	/* padding: 5px 10px; */
	padding: 6px 22px;
}
.buttonGray,
.buttonGray:hover,
.buttonGray:active,
.buttonGray:focus,
.buttonGray:focus:hover {
	background-color: #DEDEDE !important;
	color: #333;
}
.btnContinue,
#btnContinue,
#main_1_content_1_btnSend {
	position: absolute;
	top: 0;
	right: -20px;
	*width: 100px;
}
.btnBack,
#btnBack {
	left: 30px;
	position: absolute;
	*position: relative;
	top: 0;
}

/* Used on New Form Creator paging */
.back {
	left: 0;
	top: 10px;
}
.next {
	right: -10px;
	top: 10px;
}

/* Confirmation Page */
#confirmation {
	background: none;
	border: none;
	display: none;
}
#confirmation h1 {
	color: #777;
	font-size: 4em;
	left: 0;
	margin-top: 1em;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
}

#confirmation p {
	color: #777;
	font-size: 12px;
	left: 0;
	margin-top: 1em;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
}

#confirmation p {
	color: #777;
	text-align: center;
	margin-top: 150px;
}

#confirmation .closeDialog {
	position: absolute;
	top: 25px !important;
	right: 25px !important;
}

.clsIframeConfirmation {
	/* width: 785px; */
	width: 100%;
	min-height: 260px;
}


/* Pagination */
#pagination {}
#pagination .form-column {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
/*
	*margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block") && "15px");
	*margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block") && "15px");
*/
	padding: 0 15px;
	*padding: 0;
	width: 50%;
	*width: expression(Math.floor(0.50 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
}
#pagination .form-column.first {
	padding-left: 0;
}
#pagination .form-column.last {
	padding-right: 0;
}


/*  Mobile Modal  */
@media screen and (max-width: 768px) {

	.ui-dialog {
		/* top: 50% !important; */
		left: 0 !important;
		margin-left: 0 !important;
		width: 100% !important;
	}

  /* Fix close button on mobile */
  #closeDialog, 
  .closeDialog {
    top: -20px;
  }

	#pnlContainer {}
	#pnlContainer .set span,
	#pnlContainer .set input[type=text],
	#pnlContainer .set select {
			display: block;
			width: 100%;
	}
	#pnlContainer #pnlphcolumn1,
	#pnlContainer #pnlphcolumn2 {
			margin: 0;
			width: 100%;
	}
	/*Long added device responsive fixes */
	#pagination{
		padding-bottom: 20px !important;
	}
	#hiddenModalForm{
		position: absolute !important;
		top: 0!important;
		bottom: 0 !important;
	}
	#hiddenModalForm #headerDiv h2{
		font-size:16px!important;
		padding-right: 20px;
	}
	.ui-dialog{
		margin-top: 0 !important;
		top:0 !important;
		bottom:0 !important;
	}
}