.siteobject_siteobjects_planner div.arrow
{
	background-image: url('./arrow.png');
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 19px;
}

#planner_1_intro a
{
	text-decoration: underline;
}

#planner_1_intro
{
	padding-top: 70px;
	padding-bottom: 70px;
}

#planner_1_form
{
	background-color: #990066;
	padding-top: 70px;
	padding-bottom: 70px;
	color: white;
}

#planner_1_steps_info
{
	background-color: #ededed;
	padding-top: 70px;
	padding-bottom: 70px;
}

.contenttype_a
{
	max-width: 200% !important;
	margin-left: -15px !important;
	margin-right: -15px !important;
}

.siteobject_siteobjects_planner div
{
	position: relative;
}

.siteobject_siteobjects_planner div.content
{
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
}

.siteobject_siteobjects_planner div.contentNoPadding
{
	max-width: 800px;
	margin: 0 auto;
	padding: 0px;
}

#planner_1_form
{
	text-align: center;
	color: white;
}

.siteobject_siteobjects_planner #planner_1_form div.content
{
	max-width: 420px;
	position: relative;
}

.help
{
	width: 37px;
 	height: 37px;
 	display: block;
 	background-image: url('./help.png');	
 	cursor: pointer;
}

.help > div
{
	position: absolute;
	padding: 20px;
	border: 1px solid #ccc;
	top: 18px;
	right: 18px;
	pointer-events: none;
	background-color: white;
	color: black;
	min-width: 300px;
	text-align: center;
	z-index: 100;

	font-weight: normal;
	line-height: 28px;
}

#planner_1_form .help > div
{
	right: initial;
	left: 18px;
}

.help:hover
{
	background-image: url('./help_hover.png');
}

 #planner_1_form .help
 {
 	position: absolute;
 	right: 0px;
 	top: 52px;
 }

#planner_1_form .feedback
{
	font-size: 12px;
}

#planner_1_form h3
{
	color: white;
}

#plannerform .actionbutton, #plannerform input
{
	width: 310px;	
	text-align: center;
}

#plannerform input
{
	border: 2px solid #ccc !important;
	height: 50px;	
}

#plannerform input:focus
{
	border: 2px solid #0099cc !important;
}

#planner_1_steps_info ol
{
	padding-left: 20px;
	margin-bottom: 50px;
	list-style: none;
	counter-reset: li;
}

#planner_1_steps_info ol li
{
	position: relative;
	padding: 0px;
	margin-left: 20px;
}

#planner_1_steps_info ol li:before
{
	content: counter(li) ".";
	counter-increment: li;
	font-size: 36px;
	position: absolute;
	top: 6px;
	left: -40px;
}

#planner_1_steps_info ol li::after
{
	
	content: "";
    display: block;
    height: 1px;
    margin-left: -40px;
    background: #ccc;
    margin-top: 10px;
    margin-bottom: 10px;
}

#planner_1_steps_info a, #planner_1_steps_info a:hover
{
	color: inherit !important;
	text-decoration: underline;
}

#planner_1_steps_info h3:last-of-type
{
	margin-top: 85px;
}

#planner_1_steps_info h3:last-of-type::after
{
	content: "";
    display: block;
    height: 1px;
    background: #ccc;
    margin-top: 10px;
    margin-bottom: 10px;
}

#planner_1_steps_info #stepman
{
	position: absolute;
    display: block;
    height: 398px;
    width: 766px;
    right: -202px;
    bottom: 87px;
    background-image: url('./stepman.png');    
}

#planner_1_steps_info .imageNextToText
{
	position: relative !important;
	top: 179px !important;
	right: 120px !important;
	bottom: initial !important;
}

#progress_title
{
	width: 595px;
	float: left;
	padding: 0 !important;
}

#progress_tagline
{
	display: block;
	width: 344px;
	height: 31px;
	margin: 0 auto;	
	background-image: url('./tagline.png');
	margin-bottom: 10px;
}


#progress_step
{
	width: 205px;
	float: left;
	padding: 0 !important;
	text-align: right;
}

#planner_progress .content
{
	padding: 0;
}

#planner_progress h1.gray
{
	color: #ccc;
}

#planner_progress h1.gray span.normal
{
	font-weight: normal;
}

#progress
{
	width: 100%;
	max-width: 790px;
	background-color: #f1f1f1;
	height: 23px;
	padding: 0;
	margin: 0 auto;
}

#progress .bar
{
	margin: 1px 0px;
	width: 20%;
	background-image: url('./20.png');
	float: left;
	height: 21px;
	background-size: cover;
}

#planner_2_yourdata, #planner_5_yourdata
{
	background: #f1f1f1;
	width: 100%;
	max-width: 800px;
	clear: both;
	padding-top: 30px;
	padding-bottom: 20px;
	margin: 0 auto;
}

#planner_2_yourdata .yourdata_value, #planner_5_yourdata .yourdata_value
{
	font-weight: bold;
}

.clear
{
	clear: both;
}

.yourdata_fields
{
	margin-top: 15px;
}

.yourdata_fields hr
{
	margin: 20px 0;	
}
 	
.redSubtitle
{
	font-weight: bold;
	color: #990066;
}

#planner_2_appointments, #planner_3_change
{
	padding-top: 20px;
}

#planner_2_appointments .help, #planner_3_change .help, #planner_4_options .help, #planner_5_header .help
{
	position: absolute;
	right: 0px;
	top: -5px;
}

div .blankactionbutton, div .blankactionbutton:hover
{
	background-color: white;
	border: 1px solid #ccc;
}

.appointmentItem
{
	line-height: 50px;
}

.redBlock
{
	padding: 0px 15px;
	color: white;
	font-weight: bold;
	background-color: #990066;
	line-height: 50px;
}

.appointmentItem .actionbutton
{
	width: 100%;
	text-align: center;
}

.appointmentItem .hr
{
	border-bottom: 1px solid #ccc;
	width: 100%;
}

.actionbuttons
{
	margin-top: 10px;
	line-height: 28px;
}

.appointmentValue
{
	font-weight: bold;
}

#bottom_tagline
{
	background-image: url('./step1tag.png');
	width: 404px;
	height: 28px;
	display: block;
	margin: 0 auto;	
}

#planner_3_change h2
{
	margin: 0;
	height: auto;
	
}

.redBlock .help
{
	position: absolute;
	right: 15px !important;
	top: 6px !important;
	background-image: url('./blancohelp.png');
}

.redBlock .help:hover
{
	background-image: url('./blancohelp.png');
}

.smallText
{
	font-size: 16px;
	color: #666;
}

.choiceSteps
{
	line-height: 50px;
}

.arrowLine
{
	width: 100%;
	background-image: url('./arrowline.png');
	background-position: center top;
	background-size: cover;
	height: 22px;
	margin-bottom: 20px;
}

.day input, .dayPart input
{
	opacity: 0;
}

.day
{
	background-position: left;
	background-repeat: no-repeat;
	width: 160px;
	height: 33px;
	float: left;
	background-image: url('./day.png');
	cursor: pointer;
	padding-left: 50px;
	line-height: 33px;
}

.selectedDay
{
	background-image: url('./selectedday.png');
}

.dayPart
{
	text-align: center;
	border: 1px solid #ccc;
	margin: 20px 0px;
	cursor:pointer;
	line-height: 43px;
	height: 43px;
}

.selectedDayPart
{
	background-image: url('./daypart.png');
	color: white;
	border: 1px solid transparent;
	background-size: cover;
	background-repeat: no-repeat;
}

.step3label, .step3value
{
	line-height: 50px;
}

.step3value
{
	font-weight: bold;
}

.step3sep
{
	margin: 1px 0;
}

#planner_5_form_content
{
	max-width: 800px;
	background-color: #eaf3f9;
	margin: 0 auto;
}

#planner_5_form_content > div
{
	max-width: 400px;
	padding: 40px 20px;
	margin: 0 auto;
}

#planner_5_form_content input, #planner_5_form_content span 
{
	width: 100%;
}

#planner_5_form_content .actionbutton
{
	text-align: center;
}

#planner_5_form_content input, #planner_3_change input.hasDatepicker  
{
	border: 2px solid #ccc !important;	
	height: 50px;
	padding: 0px 10px;
	background-position: right 10px center;
	background-repeat: no-repeat;
}

#planner_3_change input.hasDatepicker
{
	margin-left: 10px;
	margin-right: 10px;
	background-image: url('./calendar.png');
}

#planner_5_form_content input:focus, #planner_3_change input.hasDatepicker:focus
{
	border: 2px solid #0099cc !important;	
}

#planner_5_form_content input.ok
{
	background-image: url('./input_ok.png');
	
}

#planner_5_form_content input.error
{
	background-image: url('./input_error.png');
	border: 2px solid red !important;	
}

#planner_6_buttons span.actionbutton
{
	width: 100%;
	text-align: center;
}

.smallerror
{
	font-size: 12px;	
}

.ui-widget-header
{
	color: #999 !important;
}

#planner_4_alternatives
{
	background-color: #f5e5ef;
	margin-top: 50px;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center;
	position: relative;
}

#planner_4_alternatives a, #planner_4_options a
{
	text-decoration: underline;
}

#planner_4_alternatives .actionbutton
{
	width: 100%;
	text-align: center;
}

.reverseactionbutton
{
	background-image: url('./actionbutton_arrow_back.png') !important;
	background-position: left 15px center !important;
	padding: 7px 20px 7px 35px !important;
}

input[type="text"]::-ms-clear,
input[type="email"]::-ms-clear,
input[type="file"]::-ms-clear,
input[type="password"]::-ms-clear
{
	display: none;
}

.errorDateFrom, .errorDateTo
{
	display: none;
	color: #FF0000;
}

/* tablet or smaller */
@media screen and (max-width: 991px)  {
	html body  .content .siteobject_siteobjects_planner, html body  .content .siteobject_siteobjects_planner .content
	{
		font-size: 16px !important;
	}	
	#planner_1_steps_info ol li br
	{
		display: none;
	}
	.siteobject_siteobjects_planner
	{
		padding-left: 15px;
		padding-right: 15px;
	}
	.day
	{
		width: 100%;
		margin-bottom: 20px;
	}
	#bottom_tagline
	{
		max-width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.help > div
	{
		left: initial !important;
		right: 18px !important;
	}
}

/* phone */	
@media screen and (max-width: 767px)  {	
	html body  .content .siteobject_siteobjects_planner, html body  .content .siteobject_siteobjects_planner .content
	{
		font-size: 16px !important;
	}	
	
	#planner_1_intro
	{
		padding: 0px;
	}
	#plannerform .actionbutton, #plannerform input
	{
		width: 260px;
	}
	#planner_1_form, #planner_1_steps_info
	{
		padding: 20px 0;
	}
	#planner_1_form .help
	{
		right: 10px;
	}
	#planner_1_steps_info h3:last-of-type
	{
		margin-top: 10px;
	}
	.siteobject_siteobjects_planner
	{
		padding-left: 15px;
		padding-right: 15px;
	}
	#progress_title
	{
		max-width: 100%;
	}
	.yourdata_fields hr
	{
		margin: 10px 0px;
	}
	.appointmentItem
	{
		line-height: 42px;
	}
	#progress_tagline
	{
		width: 50%;
		float: left;
		margin: 0;
		background-image: url('./smalltagline.png');
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		height: 45px;
	}
	#progress_step_xs
	{
		width: 50%;
		float: left;
	}
	#progress_step_xs h1
	{
		margin: 0;
	}
	#progress
	{		
		clear: both;
	}
	.spacer-xs
	{
		height: 20px;
		float: left;
		clear: both;
		width: 100%;
	}
	
	#planner_3_change h2, #planner_5_header h2, #planner_4_options h2
	{
		max-width: 80%;
	}
	.choiceSteps
	{
		line-height: 32px;
	}
	#datefields
	{
		margin-top: 20px;
	}
	#planner_3_change input.hasDatepicker
	{
		width: 100%;
		margin: 0;
	}
	#planner_4_alternatives
	{
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 15px;
		padding-right: 15px;	
	}

	.help > div
	{
		min-width: 262px;
		max-width: 262px;
	}

	.actionButtonMarginBottom
	{
		margin-bottom: 30px;
	}
}