div.wizzardframe {
	background: #444;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	padding: 20px;
	font-family: Chivo;
	font-size: 13px;
	line-height: normal;
}

div.wizzardbackground {
	background: #ccc;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: 1500;
	display: none;
}

@media (min-width: 840px) {
	body.minimal div.wizzardouterframe {
		margin-left: calc(17.5vw - 150px);
	}
}

div.wizzardframe,
div.wizzardframe * {
	box-sizing: content-box !important;
}

div.wizzardframe .input {
	background: #fff;
	border-radius: 5px;
	padding: 10px;
	display: inline-block;
	height: 20px;
	line-height: 20px;
	vertical-align: top;
}

div.wizzardframe .input + .input {
	margin-left: 10px;
}

div.wizzardframe .input input:invalid {
	box-shadow: none;
	color: #800;
}

div.wizzardframe .input input:focus {
	outline: none;
}

div.wizzardframe .input input {
	border: none;
	background: #fff;
	height: auto;
	padding: 0px;
}

div.wizzardframe .input-icon i.fa {
	color: #8FC93C;
}

div.wizzardframe .input-icon input {
	width: calc(100% - 30px);
	margin-left: 10px;
}

div.wizzardframe .input.btn {
	border: none;
	background: #8FC93C;
	border-radius: 5px;
	height: 20px;
	vertical-align: top;
	color: #fff;
	font-weight: 400;
	text-transform: none;
}

div.wizzardframe input.btn:hover {
	background: #80b436;
}


div.wizzardframe.loginform {
	width: 700px;
}

div.wizzardframe.loginform .input {
	width: 260px;
}

div.wizzardframe .login .input {
	width: calc(30% - 79px);
}

div.wizzardframe .login .speechbubble {
	width: calc(40% - 106px);
}

div.wizzardframe.loginform .register,
div.wizzardframe.loginform .pwforgotten {
	margin-top: 4px;
	margin-bottom: -11px;
	font-size: 12px;
	display: inline-block;
	float: left;
}

div.wizzardframe.loginform .register {
	width: 290px;
}

.clb {
	clear: both;
}

div.wizzardframe.loginform .register a,
div.wizzardframe.loginform .pwforgotten a {
	color: #fff;
}

div.wizzardframe .speechbubble {
	width: calc(50% - 117px);
	margin-right: 20px;
	white-space: normal;
}

div.wizzardframe .registered .speechbubble {
	width: calc(100% - 75px);
	margin-right: 0px;
}

#footer-wizzard div.wizzardouterframe {
	margin-left: auto;
	margin-right: auto;
}

div.wizzardframe .terms {
	font-size: 12px;
	font-family: Chivo;
	margin-top: 5px;
	color: #fff;
	text-align: center;
}

div.wizzardouterframe .swapper {
	text-align: right;
	font-size: 13px;
	font-family: Chivo;
	font-weight: 400;
	padding-top: 5px;
	color: #fff;
	display: none;
	line-height: normal;
	width: 100%;
}

div.wizzardouterframe .swapper.register {
	display: block;
}

div.wizzardframe.registerform .errormessage,
div.wizzardouterframe .errormessage {
	font-size: 13px;
	font-family: Chivo;
	color: #f00;
	display: none;
	padding-top: 5px;
	line-height: 100%;
}

div.wizzardframe.main > div {
	display: none;
}

div.wizzardframe.main form {
	margin-bottom: 0px;
}

div.wizzardframe.main.register > div.register {
	display: block;
}

div.wizzardframe.main.registered > div.registered {
	display: block;
}

div.wizzardframe.main.login > div.login {
	display: block;
}

div.wizzardframe.main .input input {
	font-size: 15px;
}

div.wizzardouterframe .swapper a {
	color: #8fc93c;
}

div.wizzardframe .register .input {
	width: calc(50% - 117px);
}

div.wizzardframe .input.btn {
	width: 100px;
}

div.wizzardframe.main {
	width: calc(100% - 40px);
}

div.wizzardframe.registerform {
	width: 35em;
}

div.wizzardframe.registerform .speechbubble {
	width: calc(100% - 65px);
	margin-right: 0px;
}

div.wizzardframe.registerform .input {
	width: calc(100% - 20px);
	margin-top: 5px;
	margin-left: 0px;
}

div.wizzardframe.registerform .registered {
	display: none;
}

div.wizzardframe.registerform.registered .register {
	display: none;
}

div.wizzardframe.registerform.registered .registered {
	display: block;
}

div.wizzardframe.registerform .closebutton a.close {
	float: right;
	position: relative;
	height: 0px;
	top: -16px;
	right: -14px;
	color: #eee;
	text-decoration: none;
}

@media (max-width: 840px) {
	div.wizzardframe.main,
	div.wizzardouterframe .swapper {
		width: calc(95vw - 40px);
		white-space: normal;
	}
	div.wizzardframe.main .userIcon {
		float: left;
	}
	div.wizzardframe.main .speechbubble {
		width: calc(100% - 64px);
		margin-right: 0px;
	}
	div.wizzardframe.main .input {
		width: calc(100% - 20px);
		margin-top: 5px;
		margin-left: 0px;
	}
	div.wizzardouterframe iframe.sso-main {
		width: 95vw;
		height: 220px !important;
	}
}

@media (max-width: 750px) {
	div.wizzardframe.loginform {
		width: 85vw;
	}

	div.wizzardframe.loginform .input {
		width: 80vw;
		margin-left: 0px;
		margin-right: 0px;
	}

	div.wizzardframe.loginform .input + .input {
		margin-top: 5px;
	}

	div.wizzardframe.loginform .pwforgotten {
		margin-right: 2vw;
	}

	div.wizzardframe.loginform .register {
		width: auto;
	}

	div.wizzardframe.loginform .pwforgotten {
		float: right;
	}
}

@media screen and (max-width: 510px) {
	div.wizzardframe.registerform {
		width: calc(100vw - 55px);
	}

	div.wizzardframe.registerform .input {
		width: calc(100vw - 75px);
	}
}

@media screen and (max-width: 420px) {
        div.wizzardframe .speechbubble {
                font-size: 12px;
        }
}

@media (max-height: 545px) {
	div.wizzard {
		height: calc(100% - 10px);
		top: 5px;
	}

	div.wizzard .page {
		overflow-y: scroll;
		height: 100%;
	}

	div.wizzard .finish,
	div.wizzard .navs {
		margin-bottom: 10px;
	}
}

@media (max-width: 725px) {
	div.wizzard {
		width: calc(100% - 10px);
		left: 5px;
	}

	div.wizzard .speechbubble {
		width: 100%;
	}

	div.wizzard .page .form .row select,
	div.wizzard .page .form .row textarea,
	div.wizzard .page .form .row input {
		margin-left: 0px;
		width: 100%;
		min-width: 100%;
		max-width: 100%
	}

	div.wizzard .form .message {
		min-width: 50px;
		max-width: 100%;
		width: auto;
	}

	div.wizzard .form .row select + input,
	div.wizzard .form .row select + select,
	div.wizzard .form .row input + input {
		margin-top: 5px;
	}

	div.wizzard .navs.noprev .next {
		margin-left: 40px;
		width: calc(100% - 80px);
	}

	div.wizzard .navs .prev {
		margin-left: calc(50% - 85px);
	}
}

@media (min-width: 725px) {
	.wizzard .subheader .speechbubble {
		width: 612px;
	}

	.wizzard .form .row.questions {
		width: 596px;
	}
}

body.blurred {
	background: url(../img/wizzard/bg.png) no-repeat;
	background-size: 100vw 100vh;
}

body.blurred > .logo {
	z-index: 0;
	position: fixed;
	top: 10px;
	left: 20px;
}

body.signup .wizzard {
	height: 280px;
	top: calc(50vh - 140px);
}

body.signup .wizzard .page .btn {
	width: 100%;
}

.wizzard {
	background-color: rgba(0, 0, 0, 0.3);
	position: fixed;
	top: calc(50vh - 450px);
	left: calc(50vw - 360px);
	height: 900px;
	font-family: Chivo;
	font-size: 13px;
	border-radius: 10px !important;
	border: #aaa 2px solid;
	padding: 20px;
	z-index: 1;
}

.wizzard h1 {
	font-family: Chivo;
	font-size: 56px;
	color: #fff;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 20px;
}

.wizzard .subheader {
	color: #fff;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 40px;
	max-width: 676px;
}

.wizzardframe img.userIcon,
.wizzard .subheader img.userIcon {
	border-radius: 50% !important;
	margin-right: 10px;
	vertical-align: middle;
	width: 40px !important;
	height: 40px !important;
}

.wizzardframe .speechbubble {
	color: #fff;
	font-weight: 400;
}

.wizzardframe .speechbubble,
.wizzard .subheader .speechbubble {
	border: #dddddd solid 2px;
	border-radius: 5px;
	border-image: url("../img/wizzard/speech.png") 8 8 8 55 / 3 3 3 15 / 0 0 0 2;
	display: inline-block;
	vertical-align: middle;
	padding: 5px;
	text-align: left;
	max-width: calc(100% - 50px);
}

.wizzardframe .speechbubble .name,
.wizzard .subheader .name {
	font-weight: 600;
	display: block;
}

.wizzard .speechbubble .text {
	font-size: 14px;
}

.wizzard .form {
	max-width: 676px;
}

.wizzard .form .row {
	margin: 0px 40px 15px 40px;
}

.wizzard .form select,
.wizzard .form textarea,
.wizzard .form input {
	height: 40px;
	border: none;
	background: #fff;
	border-radius: 5px !important;
	padding: 5px 10px;
	font-size: 13px;
	display: inline;
}

.wizzard .form select {
	padding: 0px;
}

.wizzard .form select.salutation,
.wizzard .form .phone.pre {
	width: 85px;
}

.wizzard .form input.name,
.wizzard .form input.phone.main, .wizzard .form input.phone.main + input {
	margin-left: 15px;
	width: 290px;
}

.wizzard .form input.phone.main,
.wizzard .form input.first.name {
	width: 190px;
}

.wizzard .form input.password,
.wizzard .form input.half,
.wizzard .form select.half,
.wizzard .form .companyandphone input,
.wizzard .form .companyandphone select {
	width: 290px;
}

.wizzard .form .half + .half {
	margin-left: 15px;
}

.wizzard .form input.website {
	width: 500px;
	margin-right: 15px;
}

.wizzard .form input:invalid,
.wizzard .form select.req.missing,
.wizzard .form input.req.missing,
.wizzard .form input.visreq.missing,
.wizzard .form select.visreq.missing {
	box-shadow: 0px 0px 5px 2px #f33 !important;
}

.wizzard .form .message {
	width: 595px;
	min-width: 595px;
	max-width: 595px;
	height: 120px;
	min-height: 120px;
	max-height: 120px;
}

.wizzard .form .skill.row select {
	width: 290px;
	padding: 5px 10px;
}

.wizzard .row.taskTypes {
	padding: 5px 10px;
	border-radius: 5px !important;
	background: rgb(180, 180, 180, 0.9);
}

.wizzard #contactPage .appointmentLink {
	display: block;
	color: #eee;
	text-decoration: underline;
	margin-left: 40px;
	margin-bottom: 40px;
	margin-top: 40px;
}

.wizzard #contactPage iframe {
	width: 660px;
	height: 620px;
	border: 1px solid #888;
}

.wizzard .form .error {
	color: #b00000;
	margin-bottom: 15px;
}

.wizzard .form .success {
	color: #84bf35;
	font-weight: bold;
	text-shadow: #206000 2px 2px 2px;
	padding-top: 1em;
	text-align: center;
}

.wizzard .gallery {
	text-align: center;
}

.wizzard #finalPage .gallery {
	margin-top: 40px;
	margin-bottom: 40px;
}

.wizzard .navs .prev {
	margin-left: 40px;	
	margin-right: 15px;
}

.wizzard .navs.noprev .next {
	margin-left: 182px;
}

.wizzard .page .skill.row .taskclass {
	margin-right: 15px;
}

.wizzard .page .row.hours input {
	width: 7em;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.wizzard .page .btn {
	height: 40px;
	font-size: 13px;
	border-radius: 5px !important;
}

.wizzard .page .form_datetime input {
	border-radius: 5px 0px 0px 5px !important;
}

.wizzard .page .form_datetime .btn {
	border-radius: 0px 5px 5px 0px !important;
}

.wizzard .page .nav.btn {
	width: 290px;
}

.wizzard .page > .finish {
	text-align: center;
}

.wizzard .page .btn.finish {
	width: 240px;
	text-align: center;
}

.wizzard .step {
	text-align: center;
	color: #fff;
	margin-top: 25px;
	height: 25px;
}

.wizzard #page1 .step {
	margin-top: 184px;
}

.wizzard #page2 .step {
	margin-top: 49px;
}

.wizzard .dots {
	text-align: center;
	margin-bottom: 20px;
}

.wizzard .dots .dot {
	margin-left: 15px;
	margin-right: 15px;
}

.wizzard #page2 .form.page2 {
	position: relative;
}

.wizzard .rownumber {
	position: absolute;
	left: 5px;
	padding: 5px 10px;
	color: #ddd;
	font-size: 18px;
	margin-top: 2px;
}

.wizzard .page .questions {
	max-height: 300px;
	max-width: 676px;
	overflow-y: auto;
}

.wizzard .page .questions .questionBlock {
	background: #444;
	background: rgba(255, 255, 255, 0.3);
	border: 1px solid #bbb;
	padding: 0px 5px;
	margin-bottom: 3px;
}

.wizzard .page .questions .questionBlock .title {
	font-weight: 600;
	color: #333;
}

.wizzard .page .questions .questionBlock .toggler {
	color: #666;
	margin-left: 0.3em;
}

.wizzard .page .terms {
	background: #f0f0f0;
	padding: 5px;
	margin-bottom: 1em;
	max-width: 676px;
	max-height: 300px;
	overflow: auto;
}

.wizzard .form-group.text label,
.wizzard #termspage .confirmbox label {
	color: #fff;
}

.wizzard #termspage .navs {
	margin-top: 1em;
}

.wizzard .page .terms h3 {
	margin-top: 0px;
}

iframe.wizzardform {
	border: none;
}

iframe.wizzardform.sso-loggedin {
	max-width: 400px;
}

iframe.wizzardform.sso-login {
	max-width: 770px;
}

@media (max-width: 750px) {
	iframe.wizzardform.sso-login {
		max-width: 95vw;
		max-height: 95vh;
		height: 210px;
	}
}

.wizzardouterframe {
	width: 100%;
}

.wizzardouterframe iframe.sso-main {
	display: none;
	width: 100%;
}

.wizzardouterframe iframe.sso-main + .wizzardframe.main.login {
	display: none;
}

.wizzardframe.loggedin {
	color: #fff;
}

.wizzardframe a.gotowebapp {
	color: #fff;
	font-weight: bold;
	margin-top: 0.5em;
}

.wizzard .requiredHint {
	position: absolute;
	bottom: 10px;
	left: 15px;
	color: #bbb;
}