/* Display Roboto font */ 				 
	.my-form,
	.my-form h1,
	.my-form h2,
	.my-form h3,
	.my-form p,
	.my-form a,
	.my-form .large-orange,
	.my-form .small-orange,
	.my-form .large-light-teal,	
	.my-form .small-light-teal 
	{font-family: 'Roboto', sans-serif!important;}
	
	
	.my-form .large-orange,
	.my-form .small-orange,
	.my-form .large-light-teal,	
	.my-form .small-light-teal 
	{font-weight: 700!important;}	


	.my-form .selectboxit-container {display: none}	
	.my-form .large-orange, .my-form .large-light-teal {font-family: "Roboto", "sans-serif"!important; font-weight: 700!important}
	.my-form {font-size: 14px;color: black; padding: 0 2px;}    
	.my-form label{color: black}    	
	.my-form .required-fields {color:#FF8200;}
	.my-form label span .required-fields {color:#FF8200;}    
	.hide-this {display: none}


/* Style the label to display next to the inputs */
	.my-form label {
		margin: 10px 0 3px 0;
		display: block;
		font-size: 0.75rem;
		line-height: 1.66667;
		color: #000000;
	}    


/* Style inputs, select elements and textareas */
	.my-form input[type=text],
	.my-form input[type=email], 
	.my-form input[type=tel],
	.my-form input[type=number],	
	.my-form textarea {
		width: 100%;
		padding: 3px 5px;
		font-size: 11px;
		line-height: 1.5em;
		font-size: 0.75rem;
		font-weight: normal;
		color: #000000;
		-webkit-writing-mode: horizontal-tb !important;
		text-rendering: auto;
		color: initial;
		letter-spacing: normal;
		word-spacing: normal;
		text-transform: none;
		text-shadow: none;
		display: inline-block;
		text-align: start;
		-webkit-appearance: textfield;
		background-color: white;
		-webkit-rtl-ordering: logical;
		cursor: text;
		border: 1px solid #999999;
		border-radius: 2px;
		box-shadow: 0px 1px 2px 0px rgba(153, 153, 153, 0.65) inset;
	}


	.my-form input[type="checkbox"] {
		padding: 0;
		margin:0;
		vertical-align: middle;
		position: relative;
		top: -1px;
		*overflow: hidden;
	}



	.my-form .select-css {
		width: 100%;
		padding: 3px 5px;
		font-size: 11px;
		line-height: 1.5em;
		font-size: 0.75rem;
		font-weight: normal;
		color: #000000;
		-webkit-writing-mode: horizontal-tb !important;
		text-rendering: auto;
		color: initial;
		letter-spacing: normal;
		word-spacing: normal;
		text-transform: none;
		text-indent: 0px;
		text-shadow: none;
		display: inline-block;
		text-align: start;
		-webkit-appearance: textfield;
		background-color: white;
		-webkit-rtl-ordering: logical;
		cursor: text;
		border: 1px solid #999999;
		border-radius: 2px;
		box-shadow: 0px 1px 2px 0px rgba(153, 153, 153, 0.65) inset;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		background-color: #fff;
		/* if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference	*/
		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
		background-repeat: no-repeat, repeat;
		/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
		background-position: right .7em top 50%, 0 0;
		/* icon size, then gradient */
		background-size: .65em auto, 100%;
	}


	input:focus, 
	select:focus, 
	textarea:focus,
	input[type="radio"]:focus,
	input[type="checkbox"]:focus {
		outline: 0.15rem dashed #006072 !important;
		outline-offset: 0.1rem !important;
		border-radius: unset !important;
	}




/* Hide arrow icon in IE browsers */
	.my-form .select-css::-ms-expand {
		display: none;
	}


/* Hover style */
	.my-form .select-css:hover {
		border-color: #888;
		background-color: #FFF!important;
	}

	.my-form .select-css:hover::after {
		color: #F39C12!important;
		background-color: #FFF!important;
	}     








/* Set options to normal weight */
	.my-form .select-css option {
		font-weight:normal;
	}


.my-form input[type="radio"],.my-form input[type="checkbox"] {display: inline-block;vertical-align: top!important;}
.my-form input[type="radio"]:hover,.my-form input[type="checkbox"]:hover {cursor: pointer!important;}  

	
	
/* Checkbox labels */    
	.my-form .checkbox-label{
		margin: 10px 0 0 20px;
		text-indent: -20px;
		display: inline-block;
		vertical-align: top!important;
		font-size: 14px;
		line-height: 18px;
	}
	
	.my-form .checkbox-label input[type="checkbox"]{
		margin: 4px 2px 0 0;
	}	
	
	
/* Radio labels */    
	.my-form .radio-label{
		margin: 10px 0 0 20px;
		text-indent: -20px;
		display: inline-block;
		vertical-align: top!important;
		font-size: 14px;
		line-height: 18px;
	}
	
	.my-form .radio-label input[type="radio"]{
		margin: 2px 2px 0 0;
	}		
	


/* Support for rtl text, explicit support for Arabic and Hebrew */
	*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
		background-position: left .7em top 50%, 0 0;
		padding: .6em .8em .5em 1.4em;
	}


/* Disabled styles */
	.my-form .select-css:disabled, .my-form .select-css[aria-disabled=true] {
		color: graytext;
		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	}

	.my-form .select-css:disabled:hover, .my-form .select-css[aria-disabled=true] {
		border-color: #aaa;
	}

	input[disabled=disabled], input:disabled {opacity: .4;}



	.margin-top-20 {margin-top: 20px}
	.margin-top-30 {margin-top: 30px}



/* Transition */  
	.hover-rise {    
		transition: transform, box-shadow;
		transition-timing-function: ease-in-out;
		transition-duration: .2s;
	}

	.hover-rise:hover {
		transform: translate(0, -3px); 
		box-shadow: 0 6px 8px 0 rgba(0, 0, 0, .05), 0 6px 40px 0 rgba(0, 0, 0, .075);
	} 

	.new-margins p {margin: 15px 0 5px 0!important}
	.my-form .form-row {clear: both!important}
	.my-form .two-column {width: 48%; display: inline-block; margin: 0!important;}    
	.my-form .three-column {width: 31%; display: inline-block; margin: 0!important;}    		
	.my-form .four-column {width: 23%; display: inline-block; margin: 0!important;}     
	.my-form .fourish-column {width: 19.5%; display: inline-block; margin: 0!important;}    	
	.my-form .float-right {float: right}
	.cursor-pointer:hover{cursor: pointer!important;}         
	.my-form .p-hanging-indent {text-indent: -9px}	
	.fake-link {color: #428bca;}
	.fake-link:hover {color: #2a6596; cursor: pointer;}
	





	/* The Modal (background) */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
	}


	/* The Close Button */
	.the-form-closer-container {
		position: absolute;
		top: -15px;
		right:-15px;
		cursor: pointer;
	}

	.the-form-closer-container:hover {
		transform: scale(1.1);
	}   

	.the-form-closer-container:active {
		transform: scale(.9);
	}       	

	
	.panel-title-bar {
		display:inline-flex; 
		align-items: center;
		width: 100%;
		height: 50px;
		font-size: 17px;
		text-transform: uppercase;
		margin: 6px 0 0 0;
		padding: 0 20px;
	}
		
	.panel-content-wrapper {padding: 0 20px;}
	.panel-subhead {
		font-size: 16px;
		line-height: 1.375em;
		margin: 30px auto 0!important;
	}
	
	.image-shadow {box-shadow: 0px 3px 15px 0px  rgba(0, 0, 0, 0.375);}		
	
	
	.my-form pre {background-color: #333;}
	.my-form code {
		color: #F9E79F;
		display: block;
		margin: -10px 0 1px!important;
		font-size: 11px!important;
		unicode-bidi: embed;
	}	
	
	
	.tool-tips {	
		position: relative;
		margin: 0 2px;
		padding-top: 12px;
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		transition: all .5s;
	}	


	.tool-tips span {
		position: absolute;
		background: white;
		visibility: hidden;
		opacity: 0;	
		bottom: 0px;
		left: -10px;
		right: -10px;
		padding: 5px 7px;
		-webkit-transition: all .4s;
		-moz-transition: all .4s;
		transition: all .4s;
	}

	.tool-tips span:before {
	  content: '';
	/*   width: 0;
	  height: 0; */
	  border-left: 10px solid transparent;
	  border-right: 10px solid transparent;
	  border-top: 10px solid #fff;
	  position: absolute;
	  bottom: -9px;
	  left: 60px;
	}	


	.tool-tips:hover span {
		bottom: 30px;
		visibility: visible;
		opacity: 1;
	}		
	
	
	.my-form .summary { padding: 10px; background: #eee; line-height: 1.25em; font-weight:700;}
	.my-form .summary div {margin-top: 8px;}
	.my-form .summary div:first-of-type {margin-top: 0px;}
	.my-form .summary span {font-size: .75rem; font-family: Monaco, "Courier New", "monospace"; font-weight:400;}	
	.my-form .summary .bold-type {font-size: 14px; font-family: 'Roboto', sans-serif!important; font-weight:700;}	

	
	
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
		.my-form .two-column {width: 100%!important;}
		.my-form .four-column {width: 48%!important;}		
	}		
	
	
	@media screen and (max-width: 480px) {
		.my-form .panel-title-bar {padding: 0 10px;}		
		.my-form .panel-content-wrapper {padding: 0 10px 10px 10px;}
	}		


/* Responsive layout */
	@media screen and (max-width: 630px) {
		.my-form .two-column {width: 100%!important;}
		.my-form .three-column {width: 100%!important;}			
		.my-form .four-column {width: 48%!important;}	
		.my-form .fourish-column {width: 48%!important;}					
		.my-form input[type=submit] {width: 100%;}
	}		

	

	/*form styles*/
	.MULTI-steps {
		width: 92%;
		max-width: 640px;
		position: absolute;
		top: 15%;
		left: 50%;
		margin-left: -6px;
		transform: translate(-50%, -50%);}

	
	.MULTI-steps fieldset {
		background: white;
		border-radius: 4px;		
		border: 0 none;
		box-shadow: 0 17px 41px -21px rgb(0, 0, 0);
		padding: 0;
		width: 100%;
	  /*stacking fieldsets above each other*/
		position: absolute;
	}

	/*Hide all except first fieldset*/
	.MULTI-steps fieldset:not(:first-of-type) {
		display: none;
	}



	.MULTI-error {
		padding: 4px 0;
		display: block;
		color: #D7001E;
		border: 0;
		white-space: nowrap;
	}
	
	input.input-error {
		border: 2px solid red!important;
	}
	

	
	.dummy-for-radio-errors {
		float: right;
		border: none;		
		height:0!important;
		margin: 0!important; 
		padding: 0!important;
		opacity: 0!important;
	}
		
	.checkbox-error	{
		font-size: .75rem;	
	}
	
	
	.MULTI-error .invalid:before {
		position: relative; 
		margin: 0 4px 0 0; 
		vertical-align:middle;
		content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj4KICA8cGF0aCBpZD0iZXhjbGFtYXRpb24tY2lyY2xlLXNvbGlkXzFfIiBkYXRhLW5hbWU9ImV4Y2xhbWF0aW9uLWNpcmNsZS1zb2xpZCAoMSkiIGQ9Ik0yMCwxNGE2LDYsMCwxLDEtNi02QTYsNiwwLDAsMSwyMCwxNFptLTYsMS4yMWExLjExMywxLjExMywwLDEsMCwxLjExMywxLjExM0ExLjExMywxLjExMywwLDAsMCwxNCwxNS4yMVptLTEuMDU3LTQsLjE3OSwzLjI5YS4yOS4yOSwwLDAsMCwuMjkuMjc0aDEuMTc1YS4yOS4yOSwwLDAsMCwuMjktLjI3NGwuMTc5LTMuMjlhLjI5LjI5LDAsMCwwLS4yOS0uMzA2SDEzLjIzM0EuMjkuMjksMCwwLDAsMTIuOTQzLDExLjIwOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04IC04KSIgZmlsbD0iI0Q3MDAxRSIvPgo8L3N2Zz4K')
	}  	
	
	

	/*buttons*/
	.MULTI-steps .action-button, .action-button {
		-webkit-transition: all 0.3s linear 0s;
		-moz-transition: all 0.3s linear 0s;
		-ms-transition: all 0.3s linear 0s;
		-o-transition: all 0.3s linear 0s;
		transition: all 0.3s linear 0s;
		display: block;
		margin: 20px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.MULTI-steps .MULTI-next, .MULTI-steps .submit {
		float: right;
	}

	.MULTI-steps .MULTI-previous {
		font-weight: 500;
		float: left;
		padding: 10px 20px 0 20px;
	}
	
	.MULTI-steps .previous-arrow {position: relative; margin: 0 2px 0 0; vertical-align:top;}   
	.MULTI-steps .previous-arrow:before {
		content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5LjY2IiBoZWlnaHQ9IjkuNjYiIHZpZXdCb3g9IjAgMCA5LjY2IDkuNjYiPgogIDxwYXRoIGlkPSJJY29uX2lvbmljLW1kLWFycm93LWJhY2siIGRhdGEtbmFtZT0iSWNvbiBpb25pYy1tZC1hcnJvdy1iYWNrIiBkPSJNMTUuNjM3LDEwLjJIOC4zbDMuMzgxLTMuMzgxLS44NzYtLjg0NS00LjgzLDQuODMsNC44Myw0LjgzLjg0NS0uODQ1TDguMywxMS40MWg3LjMzNloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01Ljk3NyAtNS45NzcpIiBmaWxsPSIjMDA2MjcyIi8+Cjwvc3ZnPgo=')
	}     

	/* Changes icon color on hover */     
	.MULTI-previous:hover, .MULTI-previous:hover .previous-arrow:before, .MULTI-previous :hover {
		filter: invert(46%) sepia(87%) saturate(363%) hue-rotate(166deg) brightness(92%) contrast(90%);/* Sets Icon color. Can be overidded locally. Generate color filter at: https://codepen.io/sosuke/pen/Pjoqqp */
	}    	
		


	/*headings*/
	.MULTI-title {
		color: #006272;
		text-align: center;
	}

	.MULTI-subtitle {
		font-weight: normal;
		font-size: 13px;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
	}
	/*progressbar*/
	.MULTI-progressbar-wrapper {
		width: 100%;
		text-align: center!important;
	}	


	#MULTI-progressbar {
		margin:0 auto;
		padding: 10px 0!important;		
		overflow: hidden;
	  /*CSS counters to number the steps*/
		counter-reset: step;
		width: 100%;	
	}

	#MULTI-progressbar li {
		list-style-type: none;
		color: white;
		text-transform: uppercase;
		font-size: 10px;
		width: 20%;
		float: left;
		position: relative;
	}

	#MULTI-progressbar li:before {
		content: counter(step);
		counter-increment: step;
		width: 26px;
		line-height: 26px;
		display: block;
		font-size: 17px;
		font-weight: 700;
		color: #006272;
		background: white;
		border-radius: 3px;
		margin: -3px auto 3px auto;
	}
	/*progressbar connectors*/
	#MULTI-progressbar li:after {
		content: '';
		width: 100%;
		height: 2px;
		background: white;
		position: absolute;
		left: -50%;
		top: 9px;
		z-index: -1;
	 /*put it behind the numbers*/;
	}

	#MULTI-progressbar li:first-child:after {
	  /*connector not needed before the first step*/
		content: none;
	}
	/*marking active/completed steps green*/
	/*The number of the step and the connector before it = green*/
	#MULTI-progressbar li.active:before,  #MULTI-progressbar li.active:after {
		background: #FF8200;
		color: white;
	}


	/* my MULTI-panel */
	.MULTI-panel {
		position: fixed;
		top: 0%;
		left: 50%;
		width: 50%;
		max-width: 630px;
		min-width: 320px;
		height: auto;
		z-index: 1;
		visibility: hidden;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.MULTI-panel.MULTI-panel-show {
		visibility: visible;
	}

	.lt-ie9 .MULTI-panel {
		top: 0;
		margin-left: -315px;
	}

	.MULTI-panel-content {
		background: #ffffff;
		position: relative;
		margin: 0 auto;
		padding: 40px;
		border-radius: 3px;
	}

	.MULTI-panel-overlay {
		background: #000000;
		position: fixed;
		visibility: hidden;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
		opacity: 0;
		-moz-transition-property: visibility, opacity;
		-o-transition-property: visibility, opacity;
		-webkit-transition-property: visibility, opacity;
		transition-property: visibility, opacity;
		-moz-transition-delay: 0.5s, 0.1s;
		-o-transition-delay: 0.5s, 0.1s;
		-webkit-transition-delay: 0.5s, 0.1s;
		transition-delay: 0.5s, 0.1s;
		-moz-transition-duration: 0, 0.5s;
		-o-transition-duration: 0, 0.5s;
		-webkit-transition-duration: 0, 0.5s;
		transition-duration: 0, 0.5s;
	}

	.MULTI-panel-show .MULTI-panel-overlay {
		visibility: visible;
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
		opacity: 0.6;
		-moz-transition: opacity 0.5s;
		-o-transition: opacity 0.5s;
		-webkit-transition: opacity 0.5s;
		transition: opacity 0.5s;
	}

	/*slide*/
	.MULTI-panel[data-MULTI-panel-effect|=slide] .MULTI-panel-content {
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
		opacity: 0;
		-moz-transition: all 0.5s 0;
		-o-transition: all 0.5s 0;
		-webkit-transition: all 0.5s 0;
		transition: all 0.5s 0;
	}

	.MULTI-panel[data-MULTI-panel-effect|=slide].MULTI-panel-show .MULTI-panel-content {
		filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
		opacity: 1;
		-moz-transition: all 0.5s 0.1s;
		-o-transition: all 0.5s 0.1s;
		-webkit-transition: all 0.5s;
		-webkit-transition-delay: 0.1s;
		transition: all 0.5s 0.1s;
	}

	.MULTI-panel[data-MULTI-panel-effect=slide-top] .MULTI-panel-content {
		-moz-transform: translateY(-300%);
		-ms-transform: translateY(-300%);
		-webkit-transform: translateY(-300%);
		transform: translateY(-300%);
	}

	.MULTI-panel[data-MULTI-panel-effect=slide-top].MULTI-panel-show .MULTI-panel-content {
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	

	@media screen and (max-width: 394px) {
		.my-form .MULTI-progressbar-text {display: none;}
	}